/* ========================================================
   EXPLORAR / ENCUENTRA TUS GAFAS — ver inc/explorar/render.php.
   Color y tipografía desde los tokens de style.css; los tamaños, de la referencia.
   ======================================================== */

/* ========================================================
   LA CAJA DE KADENCE, APAGADA EN ESTA PÁGINA

   Kadence puede dibujar el contenido como una tarjeta blanca con sombra (su modo "con caja").
   La banda de garantía del final sale a 100vw para ocupar el ancho completo, así que se escapa
   de esa tarjeta y deja su borde inferior a la vista por detrás: es la raya con sombra.

   No se toca el relleno ni el ancho —de eso ya se encarga .mmc-exp-cuerpo— solo lo que se ve.
   ======================================================== */
body.mmc-exp-pagina .content-bg,
body.mmc-exp-pagina article.entry {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.mmc-exp {
    font-family: var(--mmc-fuente);
    color: var(--mmc-texto);
    /* `clip` y no `hidden`: `hidden` crearía un contenedor de scroll y la barra lateral dejaría
       de poder pegarse al bajar. */
    overflow-x: clip;
}


/* ========================================================
   MIGAS
   ======================================================== */
.mmc-exp-migas {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 1340px;
    margin: 0 auto;
    padding: 22px 20px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mmc-texto-suave);
}
.mmc-exp .mmc-exp-migas a { color: var(--mmc-texto-suave); text-decoration: none; }
.mmc-exp .mmc-exp-migas a:hover { color: var(--mmc-enlace); text-decoration: underline; }
.mmc-exp-migas-aqui {
    /* Un título largo desborda y descoloca la fila en pantallas estrechas. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========================================================
   CUERPO
   ======================================================== */
.mmc-exp-cuerpo {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 1340px;
    margin: 0 auto;
    padding: 34px 20px 88px;
}


/* ========================================================
   BARRA LATERAL
   ======================================================== */
.mmc-exp-lateral {
    position: sticky;
    /* El alto de la cabecera pegajosa de Kadence más un respiro. Mismo valor que la barra del
       Centro de ayuda y la de compartir del blog: si cambia la cabecera, hay que tocar los tres. */
    top: 120px;
}

/* Solo para el móvil; en escritorio la lista va siempre abierta. */
.mmc-exp .mmc-exp-movil { display: none; }

.mmc-exp-grupo + .mmc-exp-grupo { margin-top: 32px; }

.mmc-exp .mmc-exp-grupo-tit {
    margin: 0 0 8px;
    padding: 0 16px 19px 24px;
    border-bottom: 1px solid var(--mmc-borde-fuerte);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--mmc-negro);
}

.mmc-exp .mmc-exp-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* La sangría de la izquierda deja sitio a la rayita del activo SIN que el texto se mueva al
       cambiar de sección. */
    padding: 12px 8px 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--mmc-negro);
    text-decoration: none;
    transition: background-color .12s ease;
}
.mmc-exp .mmc-exp-item:hover { background: var(--mmc-fondo-gris); color: var(--mmc-negro); }

/* La rayita del activo: posicionada, no en el flujo, para que no empuje nada. */
.mmc-exp-item-marca {
    position: absolute;
    left: 2px;
    top: 50%;
    width: 12px;
    height: 2px;
    margin-top: -1px;
    background: transparent;
}
.mmc-exp .mmc-exp-item.is-activo { font-weight: 700; }
.mmc-exp .mmc-exp-item.is-activo .mmc-exp-item-marca { background: var(--mmc-negro); }


/* ========================================================
   PANEL DE CONTENIDO
   ======================================================== */
.mmc-exp-panel { min-width: 0; }

/* Solo se ve la sección elegida. Las demás siguen en el HTML —ocultas, no quitadas— así que el
   contenido entero le llega de una vez al robot de Google y cambiar de sección es instantáneo. */
.mmc-exp-seccion { display: none; }
.mmc-exp-seccion.is-activa { display: block; }

/* Respaldo SIN JavaScript: con el ancla en la dirección, el navegador marca esa sección como
   :target y se enseña ella en lugar de la primera.

   OJO con el :not(.mmc-exp-js). En cuanto el script arranca añade esa clase y estas dos reglas
   dejan de aplicarse. Es imprescindible: `:target` se queda clavado en la sección con la que se
   CARGÓ la página —cambiar la dirección con replaceState no lo actualiza— así que al pulsar otra
   entrada estas reglas seguían enseñando la vieja y, peor, la segunda escondía precisamente la
   que el script acababa de elegir. */
.mmc-exp:not(.mmc-exp-js) .mmc-exp-seccion:target { display: block; }
.mmc-exp:not(.mmc-exp-js) .mmc-exp-panel:has(.mmc-exp-seccion:target) .mmc-exp-seccion.is-activa:not(:target) { display: none; }

.mmc-exp .mmc-exp-titulo {
    margin: 0 0 16px;
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.19;
    color: var(--mmc-negro);
    text-wrap: balance;
}
.mmc-exp .mmc-exp-intro {
    max-width: 637px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--mmc-texto);
}


/* ========================================================
   EN ESCALERA
   Foto y texto alternando lados. Los pasos NO se pisan: cada uno es una fila completa y el
   texto va centrado respecto a su foto.
   ======================================================== */
.mmc-exp-escalera { margin-top: 44px; }

.mmc-exp-paso {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}
.mmc-exp-paso + .mmc-exp-paso { margin-top: 64px; }

/* Pasos pares: el texto a la izquierda y la foto a la derecha. Se hace con `order` y no
   reordenando el HTML, para que el lector de pantalla siga oyendo título y foto en el orden en
   que se escribieron. */
.mmc-exp-paso:nth-child(even) .mmc-exp-paso-foto { order: 2; }
.mmc-exp-paso:nth-child(even) .mmc-exp-paso-txt  { order: 1; }

.mmc-exp-paso-foto {
    display: block;
    overflow: hidden;
    border-radius: var(--mmc-radio-grande);
    background: var(--mmc-fondo-suave);
}
.mmc-exp-paso-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    transition: transform .4s ease;
}
.mmc-exp a.mmc-exp-paso-foto:hover img { transform: scale(1.03); }

.mmc-exp .mmc-exp-paso-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    color: var(--mmc-negro);
}
.mmc-exp .mmc-exp-paso-titulo a { color: inherit; text-decoration: none; }
.mmc-exp .mmc-exp-paso-titulo a:hover { color: var(--mmc-enlace); }

.mmc-exp .mmc-exp-paso-sub {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--mmc-texto);
}

.mmc-exp .mmc-exp-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 14px 30px;
    background: var(--mmc-negro);
    border-radius: var(--mmc-radio-pildora);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease;
}
.mmc-exp .mmc-exp-btn:hover { background: var(--mmc-accion); color: #fff; }


/* ========================================================
   EN REJILLA
   ======================================================== */
.mmc-exp-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 44px;
    align-items: start;
}

.mmc-exp .mmc-exp-tarjeta {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.mmc-exp-tarjeta-foto {
    display: block;
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: var(--mmc-radio-grande);
    background: var(--mmc-fondo-suave);
}
.mmc-exp-tarjeta-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}
.mmc-exp a.mmc-exp-tarjeta:hover .mmc-exp-tarjeta-foto img { transform: scale(1.04); }

.mmc-exp-tarjeta-titulo {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    color: var(--mmc-negro);
}
.mmc-exp a.mmc-exp-tarjeta:hover .mmc-exp-tarjeta-titulo { color: var(--mmc-enlace); }

.mmc-exp-tarjeta-txt {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--mmc-texto);
}


/* ========================================================
   PANTALLAS MEDIANAS Y MÓVIL
   ======================================================== */
@media (max-width: 1100px) {
    .mmc-exp-cuerpo { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
    .mmc-exp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mmc-exp-paso { gap: 36px; }
    .mmc-exp-paso + .mmc-exp-paso { margin-top: 48px; }
}

@media (max-width: 782px) {
    .mmc-exp-cuerpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 20px 20px 56px;
    }

    /* La barra pasa a un desplegable: la lista entera ocuparía la primera pantalla y habría que
       bajar mucho antes de llegar al contenido. */
    .mmc-exp-lateral {
        position: static;
        margin-bottom: 28px;
    }
    .mmc-exp .mmc-exp-movil {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        background: #fff !important;
        border: 1px solid var(--mmc-borde-fuerte) !important;
        border-radius: var(--mmc-radio);
        box-shadow: none !important;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--mmc-negro) !important;
        cursor: pointer;
    }
    .mmc-exp .mmc-exp-movil svg { transition: transform .2s ease; }
    .mmc-exp .mmc-exp-movil[aria-expanded="true"] svg { transform: rotate(180deg); }

    .mmc-exp-lista { display: none; padding-top: 18px; }
    .mmc-exp-lista.is-abierta { display: block; }

    /* Foto arriba y texto debajo: a este ancho no hay dos lados que alternar. */
    .mmc-exp-escalera { margin-top: 30px; }
    .mmc-exp-paso { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mmc-exp-paso + .mmc-exp-paso { margin-top: 44px; }
    .mmc-exp-paso:nth-child(even) .mmc-exp-paso-foto,
    .mmc-exp-paso:nth-child(even) .mmc-exp-paso-txt { order: 0; }

    .mmc-exp-rejilla { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 30px; }
}