/* =================================================================
   ESTILOS EXCLUSIVOS ESCRITORIO
   ================================================================= */
.mmc-d-nav * { box-sizing: border-box; }
.mmc-d-menu { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 20px; }
.mmc-d-item { position: static; } 

/* Letra Roboto (cargada en mega-menu-custom.php), sin mayúsculas forzadas y grosor normal —
   estilo de la referencia. El grosor NO cambia al pasar el mouse (solo el color), para que el
   ancho del texto no se mueva. */
.mmc-d-link { position: relative; padding: 20px 0; text-decoration: none; color: #111; font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 400; text-transform: none; display: block; font-size: 16px; letter-spacing: 0; transition: color 0.2s ease; }
.mmc-d-sale .mmc-d-link { color: #e0102c; }

/* Raya inferior como pseudo-elemento absoluto: antes era un border-bottom de 3px que solo
   existía en :hover, así que sumaba 3px de alto al pasar el mouse y el header "temblaba".
   Así siempre ocupa 0px de alto; solo cambia su opacidad. Toma el color del texto
   (currentColor): negra en las opciones normales, roja en Sale. */
.mmc-d-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0; transition: opacity 0.2s ease; }
.mmc-d-item:hover .mmc-d-link::after { opacity: 1; }

/* Opción señalada: mantiene su color. Explícito porque el a:hover de Kadence (más
   específico que .mmc-d-link solo) la pintaba de otro color. */
.mmc-d-item:hover .mmc-d-link { color: #111; }
.mmc-d-sale:hover .mmc-d-link { color: #e0102c; }

/* Mientras una opción está señalada, las demás se apagan: normales a gris, Sale a rojo claro.
   :has() en navegadores muy viejos se ignora — ahí solo se ve la raya, sin el apagado. */
.mmc-d-menu:has(.mmc-d-item:hover) .mmc-d-item:not(:hover) .mmc-d-link { color: #8a8a8a; }
.mmc-d-menu:has(.mmc-d-item:hover) .mmc-d-sale:not(:hover) .mmc-d-link { color: #ee8f99; }

/* Dropdown */
.mmc-d-dropdown { 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: translate(-50%, 0); 
    /* Todo el ancho de la pantalla (antes 92vw con techo de 1500px, que dejaba el panel angosto y
       centrado). Se mantiene left:50% + translateX(-50%) porque su contenedor está centrado en la
       ventana: así el panel se estira a los dos lados por igual. */
    width: 100vw;
    max-width: 100vw;
    background: #fff; 
    border: 1px solid #eee; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    opacity: 0; 
    visibility: hidden; 
    z-index: 999; 
    transition: all 0.2s ease-in-out; 
}
.mmc-d-item:hover .mmc-d-dropdown { opacity: 1; visibility: visible; }

/* El panel blanco ocupa todo el ancho de la pantalla, pero su CONTENIDO se alinea con el resto del
   sitio: mismo ancho que la fila del header, centrado. Así la primera columna arranca a la altura
   del logo y la última termina donde la zona de la cuenta, en vez de pegarse a los bordes.
   Si algún día cambias el ancho del contenedor en Kadence, este número hay que igualarlo. */
.mmc-d-inner {
    display: flex;
    width: 100%;
    max-width: 1300px; /* medido sobre la captura: con 1420px el contenido arrancaba ~60px a la izquierda del logo */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 350px;
    height: auto;
    overflow: visible;
}

/* Info Side — el bloque de texto ocupa SOLO lo que miden sus columnas (200px cada una, ver
   mmc_get_desktop_grid_html en inc/shortcode.php). Antes tenía flex: 1 1 65%, así que se quedaba
   con el 65% del ancho aunque sus columnas fueran angostas: ese sobrante era el hueco enorme que
   quedaba entre la última columna y las imágenes. */
.mmc-d-info {
    position: relative;
    /* Sin espacio lateral propio: el margen ya lo da .mmc-d-inner, que alinea el contenido con el
       contenedor del sitio. Si se lo agregara acá, la primera columna quedaría corrida respecto
       del logo. */
    /* El espacio a la DERECHA corre la línea divisoria (.mmc-d-info::after, que se dibuja en el
       borde de este bloque) hacia las imágenes: con una sola columna quedaba pegada al texto. */
    padding: 30px 40px 30px 0;
    display: grid;
    gap: 30px;
    align-content: start;
    flex: 0 1 auto;
}
.mmc-d-info::after { content: ""; position: absolute; right: 0; top: 5%; height: 90%; width: 1px; background-color: #f0f0f0; }

/* Promos Side */
/* Las imágenes se quedan con TODO el espacio que sobra (flex: 1), en vez de un 35% fijo. */
.mmc-d-promos {
    display: flex;
    /* Alineamos arriba para que todas empiecen igual */
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* 40px por la izquierda para despegar la primera imagen de la línea divisoria (.mmc-d-info::after);
       por la derecha sigue en 0 para que la última termine a la altura de la zona de cuenta. */
    padding: 20px 0 20px 40px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Modos */
.mode-sale .mmc-d-info { flex: 0 0 250px; }
.mode-sale .mmc-d-promos { flex: 1; gap: 30px; justify-content: center !important; }

.mode-visual-only .mmc-d-info { display: none; }
.mode-visual-only .mmc-d-promos { flex: 0 0 100%; width: 100%; gap: 30px; }

/* --- TARJETAS SIMÉTRICAS (Corrección Final) --- */
.mmc-promo-card {
    /* Se reparten en partes iguales el espacio disponible, con un techo para que en el modo Sale
       (3 imágenes) no crezcan desmedidas. Antes eran 300px fijos y dejaban aire alrededor. */
    flex: 1 1 0;
    min-width: 200px;
    max-width: 290px; /* con la proporción 4:3, el alto acompaña: ~218px de imagen, y el panel queda holgado en 350px */
    text-decoration: none; 
    background: #fff; 
    /* Borde redondeado y fino estilo referencia */
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    overflow: hidden; 
    
    /* Sombra sutil */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    transition: all 0.3s ease; 
    
    display: flex; 
    flex-direction: column; 
}
.mmc-promo-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #ccc; }

.mmc-card-img {
    /* Proporción fija en vez de altura fija: así el alto acompaña al ancho. Con 280px fijos, en el
       modo Sale (3 imágenes más angostas) quedaban demasiado altas y desproporcionadas. */
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
    overflow: hidden; 
    position: relative;
    background: #f9f9f9; /* Fondo por si la imagen tarda en cargar */
}

.mmc-card-img img { 
    width: 100%; 
    height: 100%; 
    /* COVER: Llena el espacio sin deformar la imagen */
    object-fit: cover; 
    object-position: center;
    transition: transform 0.5s ease;
}
.mmc-promo-card:hover .mmc-card-img img { transform: scale(1.03); }

.mmc-card-txt { 
    /* Texto fijo abajo */
    padding: 12px 15px; 
    text-align: center; 
    font-weight: 700; 
    color: #1C1818; 
    font-size: 15px; 
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

/* Columnas y Textos — misma letra Roboto que la barra del menú (cargada en mega-menu-custom.php),
   color del logo (#020621), títulos sin mayúsculas forzadas. */
.mmc-d-dropdown { font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; }
.mmc-d-col h4 { font-family: inherit !important; font-size: 17px; font-weight: 700; margin: 0 0 14px !important; text-transform: none; letter-spacing: 0; color: #020621 !important; text-align: left !important; }

/* Eliminar Puntos */
.mmc-d-col ul, .mmc-d-col li { list-style: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.mmc-d-col li { margin: 0 0 8px !important; } /* antes 14px: demasiado aire entre enlaces */
.mmc-d-col li a { font-family: inherit; text-decoration: none; color: #020621 !important; font-size: 16px !important; font-weight: 400; line-height: 1.4; display: inline-block; }

/* Subrayado al pasar el mouse: text-decoration (no border-bottom), así no suma alto y no empuja
   las líneas de abajo. Fino y pegado al texto, como la referencia. */
.mmc-d-col li a:hover,
.mmc-shape-btn:hover span,
.mmc-view-all:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Elementos Extra */
.mmc-shape-btn { display: flex; align-items: center; gap: 15px; text-decoration: none; color: #020621; font-size: 16px; font-weight: 400; margin-bottom: 8px; }
.mmc-shape-btn img { width: 32px; opacity: 0.7; }

.mmc-brands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: 55px; }
.mmc-brand-box { background: #f7f7f7; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 4px; height: 100%; }
.mmc-brand-box img { max-width: 85%; max-height: 80%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(100%); opacity: 0.6; }
.mmc-view-all { display: block; text-align: center; margin-top: 15px; font-size: 14px; font-weight: 700; color: #020621; text-decoration: none; }

/* AJUSTES RESPONSIVE INTERMEDIOS */
@media (max-width: 1500px) {
    .mmc-d-info { gap: 15px; padding: 20px; }
    .mmc-d-promos { gap: 15px; padding: 20px; }
    .mmc-d-col h4 { font-size: 16px; }
    .mmc-d-col li a { font-size: 15px !important; }
    .mmc-shape-btn { font-size: 15px; }
    /* Ajuste de altura en pantallas medianas para mantener proporción */
    .mmc-card-img { height: 200px; }
}
/* Enlace suelto en rojo dentro de una columna (se marca con la casilla "Rojo" en el panel).
   Sirve para destacar cosas como "En oferta" en medio de una lista normal. */
.mmc-d-col li a.mmc-link-rojo { color: #e0102c !important; }