/* Landing del Ciclo Anual — Universidad Nacional de San Agustín de Arequipa.

   TODO cuelga de .lp-misti. El marco del sitio inyecta en ESTE documento
   Bootstrap, akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: a igualdad
   de especificidad ganan sus reglas. Por eso el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: el año como el ascenso desde la ciudad blanca hasta la cumbre del
   Misti. Con el tema claro es Arequipa de día, de sillar y cielo azul; con el
   oscuro, la misma ciudad de noche, con los volcanes a la luz de la luna. El
   cielo de altura del ascenso, la piedra de las placas, la postal y la cumbre
   del cierre son objetos: no cambian con el tema.

   SIETE FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): el granate de la San Agustín en la franja
       superior, con el oro del sol del emblema.
     · LA CIUDAD (--lp-cal-*, --lp-tinta-*, --lp-panel-*, --lp-acento,
       --lp-cielo): el fondo de las secciones y sus textos; cambia con el tema.
     · LOS VOLCANES (--lp-roca-*, --lp-nieve-*, --lp-ciudad-*, --lp-bruma-*): la
       cordillera, los volcanes de las áreas y el perfil del ascenso; de noche se
       apagan con la ciudad.
     · LAS ÁREAS (--lp-area-*): un color por área, más luminoso de noche.
     · EL CIELO DE ALTURA Y LA NOCHE (--lp-altura-*, --lp-noche-*): el azul hondo
       del ascenso y la noche estrellada del cierre, oscuros en los dos temas.
     · LA PIEDRA Y EL PAPEL (--lp-piedra-*, --lp-papel-*): el sillar de las placas
       y las portadas y el papel de la postal, claros en los dos temas.
     · LA ACCIÓN (--lp-accion-*): botones granate sobre la ciudad y
       --lp-accion-clara-* sobre el cielo y la noche.

   Cada superficie fija además unas variables locales (--lp-sup-tinta,
   --lp-sup-suave, --lp-sup-linea, --lp-sup-acento y --lp-foco) para que las
   piezas comunes se lean bien encima de cualquiera.

   El movimiento solo existe con prefers-reduced-motion: no-preference y ninguna
   animación se repite sin fin. */

.lp-misti {
    /* ── La universidad ─────────────────────────────────────────────────── */
    --lp-uni: #5E151D;
    --lp-uni-oro: #E8C07A;
    --lp-uni-tinta: #F6EFE6;
    --lp-uni-suave: #E3C9C9;
    --lp-uni-piedra: #E9DCC9;
    /* ── La ciudad: cambia con el tema ──────────────────────────────────── */
    --lp-cal: #F7F4EE;
    --lp-cal-baja: #EDE7DC;
    --lp-poro: rgba(120, 100, 70, .11);
    --lp-resplandor: rgba(255, 205, 130, .42);
    --lp-tinta: #1F2328;
    --lp-tinta-suave: #4D5561;
    --lp-linea: #D6CDBC;
    --lp-acento: #8E2531;
    --lp-cielo: #1F5F99;
    --lp-panel: #FFFDF8;
    --lp-panel-borde: #E3DACA;
    --lp-curva: rgba(31, 95, 153, .12);
    --lp-sombra: rgba(70, 55, 35, .15);
    --lp-sombra-honda: rgba(50, 40, 25, .3);
    --lp-sombra-flotante: rgba(0, 0, 0, .35);
    /* El astro de la portada: sol de día, luna de noche. */
    --lp-astro: #F4B24E;
    --lp-astro-claro: #FFE4A3;
    --lp-astro-halo: rgba(244, 178, 78, .42);
    /* ── Los volcanes ───────────────────────────────────────────────────── */
    --lp-roca-lejos: #9AA6B8;
    --lp-nieve-lejos: #EEF3F8;
    --lp-roca: #5D6879;
    --lp-roca-sombra: #4A5464;
    --lp-nieve: #FFFFFF;
    --lp-roca-cerca: #8C8274;
    --lp-ciudad: #FBF8F1;
    --lp-ciudad-hueco: #C9BFAE;
    --lp-bruma: #D6E7F4;
    --lp-bruma-baja: #E9EEF1;
    /* ── Las áreas: cambian con el tema ─────────────────────────────────── */
    --lp-area-ing: #1F5F99;
    --lp-area-bio: #1A6E4C;
    --lp-area-soc: #8A5A00;
    /* ── El cielo de altura y la noche, fijos ───────────────────────────── */
    --lp-altura-alto: #0D2747;
    --lp-altura-medio: #163F69;
    --lp-altura-bajo: #1D4E7E;
    --lp-altura-tinta: #F2F6FA;
    --lp-altura-suave: #C8D6E6;
    --lp-altura-acento: #FFD58A;
    --lp-altura-velo: rgba(255, 255, 255, .08);
    --lp-altura-borde: rgba(255, 255, 255, .2);
    --lp-noche-alto: #090E1F;
    --lp-noche-medio: #18214A;
    --lp-noche-bajo: #2B2F63;
    --lp-noche-tinta: #F5F1EA;
    --lp-noche-suave: #D9DCEB;
    --lp-noche-acento: #FFD58A;
    --lp-estrella: rgba(255, 255, 255, .75);
    --lp-alba: rgba(255, 170, 90, .55);
    --lp-silueta: #0B1022;
    --lp-silueta-sombra: #070A17;
    --lp-silueta-nieve: #C9D3E3;
    /* ── La piedra y el papel, claros en los dos temas ──────────────────── */
    --lp-piedra: #EEE7D9;
    --lp-piedra-baja: #D9CFBC;
    --lp-piedra-poro: rgba(110, 90, 60, .18);
    --lp-piedra-luz: rgba(255, 252, 244, .8);
    --lp-piedra-tinta: #2E241B;
    --lp-piedra-suave: #463A2E;
    --lp-grabado: #5E151D;
    --lp-madera: #6B4A2E;
    --lp-madera-veta: rgba(30, 18, 8, .25);
    --lp-papel: #FBF6EC;
    --lp-papel-linea: #E6DCC8;
    --lp-papel-tinta: #2B2420;
    --lp-papel-suave: #5A4E44;
    --lp-papel-acento: #8E2531;
    --lp-postal-cielo: #BFDDF5;
    --lp-postal-cielo-bajo: #F6E7CC;
    --lp-postal-tinta: #1D2C45;
    /* ── La acción ──────────────────────────────────────────────────────── */
    --lp-accion: #8E2531;
    --lp-accion-alta: #A0303D;
    --lp-accion-tinta: #FFF8F3;
    --lp-accion-canto: #5E151D;
    --lp-accion-clara: #FFD58A;
    --lp-accion-clara-alta: #FFE2A8;
    --lp-accion-clara-tinta: #2A1A05;
    --lp-accion-clara-canto: #B98A2E;
    /* ── Letras ─────────────────────────────────────────────────────────── */
    --lp-titulo: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "P052", Georgia, "Times New Roman", serif;
    --lp-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lp-ancho: 74rem;
    /* ── Lo que leen las piezas comunes; cada superficie lo reasigna ────── */
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
    position: relative;
    background: var(--lp-cal);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: Arequipa de noche. El atributo lo pone Akcadmia en un
   ancestro, también cuando el tema se hereda del navegador; aquí solo se
   reasignan variables, nunca reglas. El cielo de altura, la noche del cierre,
   la piedra y la postal no cambian, salvo un sillar apenas más apagado. */
[data-tema="oscuro"] .lp-misti {
    --lp-uni: #4A1016;
    --lp-cal: #11151C;
    --lp-cal-baja: #161B24;
    --lp-poro: rgba(210, 220, 235, .05);
    --lp-resplandor: rgba(220, 225, 240, .1);
    --lp-tinta: #EEF0F3;
    --lp-tinta-suave: #B8BEC8;
    --lp-linea: #2B313D;
    --lp-acento: #F2A3AB;
    --lp-cielo: #9CC8F2;
    --lp-panel: #1B212B;
    --lp-panel-borde: #2E3542;
    --lp-curva: rgba(156, 200, 242, .09);
    --lp-sombra: rgba(0, 0, 0, .4);
    --lp-sombra-honda: rgba(0, 0, 0, .6);
    --lp-sombra-flotante: rgba(0, 0, 0, .6);
    --lp-astro: #D8D0BA;
    --lp-astro-claro: #F6F1E1;
    --lp-astro-halo: rgba(240, 234, 214, .18);
    --lp-roca-lejos: #364052;
    --lp-nieve-lejos: #7F8BA0;
    --lp-roca: #2A3240;
    --lp-roca-sombra: #202733;
    --lp-nieve: #C7D1DE;
    --lp-roca-cerca: #262B34;
    --lp-ciudad: #BDB5A4;
    --lp-ciudad-hueco: #6E6758;
    --lp-bruma: #16243A;
    --lp-bruma-baja: #141A24;
    --lp-area-ing: #8EC1F0;
    --lp-area-bio: #7FD3A8;
    --lp-area-soc: #E9B949;
    --lp-altura-alto: #070F1E;
    --lp-altura-medio: #0E2443;
    --lp-altura-bajo: #163659;
    --lp-piedra: #CFC6B4;
    --lp-piedra-baja: #BBB19E;
    --lp-piedra-luz: rgba(255, 250, 238, .45);
    --lp-accion: #F2A3AB;
    --lp-accion-alta: #F6B9BF;
    --lp-accion-tinta: #2A0A0F;
    --lp-accion-canto: #B5626B;
    color-scheme: dark;
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. El hueco se pinta del color de la franja institucional
   para que no se note. El color va escrito porque aquí se pinta un ancestro de
   .lp-misti, que no ve sus variables. */
body:has(> .lp-misti) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #5E151D;
}

[data-tema="oscuro"] body:has(> .lp-misti) {
    background-color: #4A1016;
}

body > :has(+ .lp-misti) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-misti) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta especificidad cero: derrota las reglas de elemento del sitio y
   queda por debajo de cualquier clase de esta hoja. */
.lp-misti :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, b, label, legend, summary, details, figure, figcaption, section, output) {
    color: inherit;
    font-family: inherit;
}

.lp-misti :where(h1, h2, h3, h4, p, dl, dd, figure) {
    margin: 0;
}

.lp-misti :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bootstrap hace flotar las leyendas a lo ancho y les sube la letra. */
.lp-misti :where(legend) {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.lp-misti :where(fieldset) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.lp-misti :where(dt) {
    font-weight: inherit;
}

.lp-misti :where(label) {
    display: block;
    margin: 0;
}

.lp-misti,
.lp-misti *,
.lp-misti *::before,
.lp-misti *::after {
    box-sizing: border-box;
}

/* Lo que el guion oculta con hidden se oculta siempre, aunque una regla de esta
   hoja le haya dado otro display. */
.lp-misti [hidden] {
    display: none !important;
}

/* Sin guion no se escriben las fechas ni los datos del ciclo: lo que depende de
   ellos no se enseña, para no dejar etiquetas con el hueco vacío. Con guion, lo
   que solo sirve sin él se retira. */
.lp-misti:not(.lp-misti--animada) :is([data-depende-fechas], [data-requiere-guion]) {
    display: none !important;
}

.lp-misti.lp-misti--animada [data-sin-guion] {
    display: none;
}

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-misti [id] {
    scroll-margin-top: 5rem;
}

/* Las fotos reservan su proporción con width y height del marcado, así la página
   no salta al cargarlas. Dentro de :where para que la clase de cada foto pueda
   cambiarle el alto sin pelear por especificidad. */
.lp-misti :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* El foco se ve sobre cualquier superficie: cada una fija su color en --lp-foco. */
.lp-misti :where(a, summary, input, [tabindex]):focus-visible {
    outline: 3px solid var(--lp-foco);
    outline-offset: 3px;
}

/* Texto solo para lectores de pantalla. También esconde los radios: siguen en el
   orden del teclado y su pieza visible enseña el foco con el combinador de
   hermanos. */
.lp-misti__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lp-misti__simbolos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Los trazos de los dibujos leen variables: un <use> no deja que un selector de
   descendiente entre en su copia, pero las variables sí se heredan. Cada
   contexto puede reasignar --lp-dib-* para pintar el mismo volcán de otra
   manera, como la silueta nocturna del cierre. */
.lp-misti__t-linea {
    fill: none;
    stroke: var(--lp-dibujo-trazo, currentColor);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-misti__t-emblema-sol {
    fill: var(--lp-uni-oro);
}

.lp-misti__t-emblema-cono {
    fill: var(--lp-uni-piedra);
}

.lp-misti__t-emblema-nieve {
    fill: #FFFFFF;
}

.lp-misti__t-emblema-base {
    fill: none;
    stroke: var(--lp-uni-oro);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.lp-misti__t-roca-lejos {
    fill: var(--lp-dib-roca-lejos, var(--lp-roca-lejos));
}

.lp-misti__t-nieve-lejos {
    fill: var(--lp-dib-nieve-lejos, var(--lp-nieve-lejos));
}

.lp-misti__t-roca {
    fill: var(--lp-dib-roca, var(--lp-roca));
}

.lp-misti__t-roca-sombra {
    fill: var(--lp-dib-roca-sombra, var(--lp-roca-sombra));
}

.lp-misti__t-nieve {
    fill: var(--lp-dib-nieve, var(--lp-nieve));
}

.lp-misti__t-roca-cerca {
    fill: var(--lp-roca-cerca);
}

.lp-misti__t-ciudad {
    fill: var(--lp-ciudad);
}

.lp-misti__t-ciudad-hueco {
    fill: var(--lp-ciudad-hueco);
}

.lp-misti__t-sendero {
    fill: none;
    stroke: var(--lp-dib-sendero, var(--lp-altura-acento));
    stroke-width: 2.4;
    stroke-dasharray: 5 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.lp-misti__t-asta {
    fill: none;
    stroke: var(--lp-dib-asta, currentColor);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.lp-misti__t-banderin {
    fill: var(--lp-dib-banderin, var(--lp-acento));
}

/* ═══ Textos comunes ═══════════════════════════════════════════════════════ */
.lp-misti__ancho {
    width: min(100% - 2rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-misti__cabecera {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lp-misti__cabecera--centro {
    text-align: center;
}

    .lp-misti__cabecera--centro .lp-misti__rotulo {
        justify-content: center;
    }

    .lp-misti__cabecera--centro .lp-misti__bajada {
        margin-inline: auto;
    }

/* El rótulo lleva delante dos cumbres pequeñas. */
.lp-misti__rotulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-texto);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

    .lp-misti__rotulo::before {
        content: "";
        flex: none;
        width: 1.5rem;
        height: .85rem;
        background: currentColor;
        clip-path: polygon(0 100%, 34% 28%, 48% 56%, 70% 0, 100% 100%);
    }

.lp-misti__h1 {
    margin-top: 1rem;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(2.7rem, 1.6rem + 4.4vw, 5rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.02;
}

.lp-misti__h1-linea {
    display: block;
}

.lp-misti__h1-linea--fina {
    margin-block: .35rem .2rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-texto);
    font-size: .4em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

/* El nombre se asienta sobre una fila de cumbres: dos degradados en diagonal
   dibujan los dientes y se clonan en cada renglón aunque el nombre se parta. */
.lp-misti__h1-linea--marca {
    display: inline;
    padding-bottom: .22em;
    color: var(--lp-sup-acento);
    background:
        linear-gradient(-45deg, var(--lp-cielo) .085em, transparent 0) 0 100% / .17em .17em repeat-x,
        linear-gradient(45deg, var(--lp-cielo) .085em, transparent 0) 0 100% / .17em .17em repeat-x;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lp-misti__h2 {
    margin-top: .85rem;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.05rem);
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.1;
    text-wrap: balance;
}

.lp-misti__h3 {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
    font-weight: 700;
    line-height: 1.2;
}

.lp-misti__bajada {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
}

.lp-misti__bajada--fechas {
    color: var(--lp-sup-tinta);
    font-weight: 700;
}

.lp-misti__introduccion {
    max-width: 36rem;
    margin-top: 1.4rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem);
}

.lp-misti__nota {
    max-width: 44rem;
    margin-top: 1.4rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

.lp-misti__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1rem;
    margin-top: 1.8rem;
}

.lp-misti__acciones--centro {
    justify-content: center;
}

/* Por debajo de 576 px los botones de un grupo ocupan cada uno su fila. */
@media (max-width: 575.98px) {
    .lp-misti__acciones .lp-misti__boton {
        flex: 1 1 100%;
    }
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Bloques granate con el canto oscuro abajo, como una piedra pulida. Al pasar
   suben un poco y la bandera se planta; al pulsar se hunden. */
.lp-misti__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .7rem 1.45rem .75rem;
    border: 0;
    border-radius: .55rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: .015em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .25rem 0 var(--lp-accion-canto), 0 .8rem 1.2rem -.55rem var(--lp-sombra-honda);
    transition: translate .15s ease, box-shadow .15s ease, background-color .2s ease;
    --lp-foco: var(--lp-accion);
    --lp-dib-asta: currentColor;
    --lp-dib-banderin: currentColor;
}

    .lp-misti__boton:hover {
        background: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
        translate: 0 -2px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .35rem 0 var(--lp-accion-canto), 0 1rem 1.3rem -.55rem var(--lp-sombra-honda);
    }

    .lp-misti__boton:active {
        translate: 0 .18rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .07rem 0 var(--lp-accion-canto), 0 .3rem .5rem -.3rem var(--lp-sombra-honda);
    }

.lp-misti__boton-icono {
    flex: none;
    width: .9rem;
    height: 1.2rem;
    transform-origin: 20% 95%;
    transition: rotate .3s ease;
}

.lp-misti__boton:hover .lp-misti__boton-icono {
    rotate: -8deg;
}

/* De línea: solo el contorno, del color del texto de la superficie. */
.lp-misti__boton--linea {
    background: transparent;
    color: var(--lp-sup-tinta);
    box-shadow: inset 0 0 0 2px var(--lp-sup-tinta);
    --lp-foco: var(--lp-sup-tinta);
}

    .lp-misti__boton--linea:hover {
        background: transparent;
        color: var(--lp-sup-acento);
        box-shadow: inset 0 0 0 2px var(--lp-sup-acento);
    }

    .lp-misti__boton--linea:active {
        box-shadow: inset 0 0 0 2px var(--lp-sup-acento);
    }

/* Claro: para el cielo de altura y la noche, que son oscuros en los dos temas. */
.lp-misti__boton--claro {
    background: var(--lp-accion-clara);
    color: var(--lp-accion-clara-tinta);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 .25rem 0 var(--lp-accion-clara-canto), 0 .8rem 1.2rem -.55rem rgba(0, 0, 0, .55);
    --lp-foco: var(--lp-accion-clara);
}

    .lp-misti__boton--claro:hover {
        background: var(--lp-accion-clara-alta);
        color: var(--lp-accion-clara-tinta);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 .35rem 0 var(--lp-accion-clara-canto), 0 1rem 1.3rem -.55rem rgba(0, 0, 0, .55);
    }

    .lp-misti__boton--claro:active {
        box-shadow: 0 .07rem 0 var(--lp-accion-clara-canto);
    }

.lp-misti__boton--grande {
    min-height: 3.6rem;
    padding-inline: 2.1rem;
    font-size: 1.16rem;
}

.lp-misti__boton--pequeno {
    min-height: 2.7rem;
    padding: .5rem 1.15rem .55rem;
    font-size: .95rem;
}

/* ═══ Superficies ══════════════════════════════════════════════════════════
   La ciudad cambia con el tema y lleva los poros del sillar: dos rejillas de
   puntos corridas media celda. */
.lp-misti__cal,
.lp-misti__cal-baja {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background-image:
        radial-gradient(var(--lp-poro) 1px, transparent 1.5px),
        radial-gradient(var(--lp-poro) .8px, transparent 1.3px);
    background-position: 0 0, 9px 11px;
    background-size: 18px 22px, 18px 22px;
    color: var(--lp-tinta);
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
}

.lp-misti__cal {
    background-color: var(--lp-cal);
}

.lp-misti__cal-baja {
    background-color: var(--lp-cal-baja);
}

/* La cornisa: al empezar una sección baja, la anterior le deja una moldura de
   dentellones de su color, como las de las casonas de sillar. */
.lp-misti__arcos-seccion,
.lp-misti__sillar-seccion,
.lp-misti__familia-seccion {
    --lp-borde-previo: var(--lp-cal);
}

    :is(.lp-misti__arcos-seccion, .lp-misti__sillar-seccion, .lp-misti__familia-seccion)::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: .85rem;
        background:
            linear-gradient(var(--lp-borde-previo), var(--lp-borde-previo)) 0 0 / 100% .3rem no-repeat,
            repeating-linear-gradient(90deg, var(--lp-borde-previo) 0 1rem, transparent 1rem 1.55rem) 0 .3rem / 100% .55rem no-repeat;
        pointer-events: none;
    }

/* El cielo de altura: azul hondo en los dos temas, con texto claro. */
.lp-misti__cielo {
    position: relative;
    padding-block: clamp(3.75rem, 2.75rem + 4vw, 6.25rem);
    background:
        radial-gradient(ellipse 45% 35% at 88% 6%, rgba(255, 225, 160, .16), transparent 70%),
        linear-gradient(var(--lp-altura-alto), var(--lp-altura-medio) 55%, var(--lp-altura-bajo));
    color: var(--lp-altura-tinta);
    --lp-sup-tinta: var(--lp-altura-tinta);
    --lp-sup-suave: var(--lp-altura-suave);
    --lp-sup-linea: var(--lp-altura-borde);
    --lp-sup-acento: var(--lp-altura-acento);
    --lp-foco: var(--lp-altura-acento);
}

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-misti__franja {
    background: var(--lp-uni);
    border-bottom: 3px solid var(--lp-uni-oro);
    color: var(--lp-uni-tinta);
    --lp-foco: var(--lp-uni-oro);
}

.lp-misti__franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    min-height: 3.25rem;
    padding-block: .55rem;
}

.lp-misti__franja-emblema {
    flex: none;
    width: 2.6rem;
    height: 1.86rem;
}

.lp-misti__franja-nombre {
    font-family: var(--lp-titulo);
    font-size: clamp(.95rem, .85rem + .4vw, 1.08rem);
    font-weight: 700;
    line-height: 1.25;
}

.lp-misti__franja-lugar {
    color: var(--lp-uni-suave);
    font-size: .86rem;
}

.lp-misti__franja-sello {
    margin-left: auto;
    padding: .18rem .75rem .22rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: .3rem;
    color: var(--lp-uni-oro);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   El resplandor del sol detrás de la ventana; abajo, la cordillera. */
.lp-misti__portada {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
    background-image:
        radial-gradient(ellipse 60% 55% at 84% 22%, var(--lp-resplandor), transparent 70%),
        radial-gradient(var(--lp-poro) 1px, transparent 1.5px);
    background-size: auto, 18px 22px;
}

.lp-misti__portada-rejilla {
    display: grid;
    align-items: center;
    gap: clamp(2.25rem, 1rem + 3vw, 3.5rem);
    padding-bottom: clamp(1.25rem, .5rem + 2vw, 2.25rem);
}

@media (min-width: 992px) {
    .lp-misti__portada-rejilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Las cotas: los datos del ciclo como hitos de altura, con su cumbre al lado. */
.lp-misti__ficha {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 34rem;
    margin-top: 2.2rem;
}

.lp-misti__cota {
    position: relative;
    flex: 1 1 9.5rem;
    padding: .55rem .9rem .6rem 2.25rem;
    border-radius: .55rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), inset 0 -3px 0 var(--lp-linea), 0 .4rem .8rem -.55rem var(--lp-sombra-honda);
}

    .lp-misti__cota::before {
        content: "";
        position: absolute;
        left: .8rem;
        top: .78rem;
        width: .95rem;
        height: .7rem;
        background: var(--lp-cota, var(--lp-acento));
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

    .lp-misti__cota:nth-child(2) {
        --lp-cota: var(--lp-cielo);
    }

    .lp-misti__cota:nth-child(3) {
        --lp-cota: var(--lp-area-bio);
    }

    .lp-misti__cota:nth-child(4) {
        --lp-cota: var(--lp-area-soc);
    }

    .lp-misti__cota:nth-child(5) {
        --lp-cota: var(--lp-tinta-suave);
    }

    .lp-misti__cota dt {
        color: var(--lp-sup-suave);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .lp-misti__cota dd {
        margin-top: .1rem;
        color: var(--lp-sup-tinta);
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.35;
    }

/* La ventana: la foto bajo un arco rebajado, enmarcada en sillar, con el sol (o
   la luna) que asoma detrás. */
.lp-misti__ventana {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 42rem;
    padding-top: clamp(1.25rem, 3vw, 2.5rem);
}

.lp-misti__sol {
    position: absolute;
    top: 0;
    right: 8%;
    width: clamp(5.5rem, 16vw, 9.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-astro-claro) 0 45%, var(--lp-astro) 72%);
    box-shadow: 0 0 3rem 1rem var(--lp-astro-halo);
}

.lp-misti__ventana-marco {
    position: relative;
    display: block;
    padding: clamp(.45rem, .3rem + .6vw, .75rem) clamp(.45rem, .3rem + .6vw, .75rem) 0;
    border-radius: 50% 50% .5rem .5rem / 34% 34% .5rem .5rem;
    background:
        radial-gradient(var(--lp-piedra-poro) 1px, transparent 1.5px) 0 0 / 9px 11px,
        linear-gradient(var(--lp-piedra), var(--lp-piedra-baja));
    box-shadow: inset 0 0 0 1px var(--lp-piedra-luz), 0 1.2rem 1.8rem -1.1rem var(--lp-sombra-honda);
}

.lp-misti__ventana-foto {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 50% 50% 0 0 / 32% 32% 0 0;
}

.lp-misti__ventana-pie {
    margin-top: .9rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-titulo);
    font-size: .98rem;
    font-style: italic;
    text-align: center;
}

/* La cordillera: el dibujo se recorta por los lados en pantallas estrechas para
   que el Misti quede siempre al centro; detrás, una bruma de cielo. */
.lp-misti__cordillera {
    position: relative;
    height: clamp(7.5rem, 4rem + 12vw, 15rem);
    background: linear-gradient(transparent, var(--lp-bruma) 42%, var(--lp-bruma-baja));
}

.lp-misti__cordillera-dibujo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ═══ Tres volcanes, tres áreas ════════════════════════════════════════════ */
.lp-misti__volcan--ing,
.lp-misti__ruta--ing {
    --lp-area: var(--lp-area-ing);
}

.lp-misti__volcan--bio,
.lp-misti__ruta--bio {
    --lp-area: var(--lp-area-bio);
}

.lp-misti__volcan--soc,
.lp-misti__ruta--soc {
    --lp-area: var(--lp-area-soc);
}

/* Las tres cumbres: en móvil, una por fila con el dibujo a la izquierda; desde
   576 px, lado a lado. */
.lp-misti__cumbres {
    display: grid;
    gap: .9rem;
}

@media (min-width: 576px) {
    .lp-misti__cumbres {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.lp-misti__volcan {
    position: relative;
    display: grid;
    grid-template-columns: clamp(4.5rem, 28vw, 6.5rem) minmax(0, 1fr);
    grid-template-areas:
        "cima nombre"
        "cima area"
        "cima cuenta";
    align-content: center;
    column-gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 .7rem 1.2rem -.9rem var(--lp-sombra-honda);
    cursor: pointer;
    transition: translate .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s ease;
}

@media (min-width: 576px) {
    .lp-misti__volcan {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "cima"
            "nombre"
            "area"
            "cuenta";
        padding: 1.4rem 1.2rem 1.25rem;
        text-align: center;
    }
}

    .lp-misti__volcan:hover {
        translate: 0 -3px;
        box-shadow: inset 0 0 0 2px var(--lp-area), 0 1rem 1.4rem -.9rem var(--lp-sombra-honda);
    }

.lp-misti__volcan-cima {
    --lp-volcan-ancho: 13rem;
    grid-area: cima;
    position: relative;
    align-self: center;
    display: block;
    padding-top: .9rem;
}

.lp-misti__volcan-dibujo {
    display: block;
    width: 100%;
    max-width: var(--lp-volcan-ancho);
    height: auto;
    aspect-ratio: 160 / 100;
    margin-inline: auto;
}

/* La bandera se planta en la cumbre de cada volcán al elegirlo. El dibujo mide
   min(100 %, --lp-volcan-ancho) de ancho y 0,625 de eso de alto; la cumbre de
   cada uno está en la fracción --lp-cima-fx de su ancho y --lp-cima-fy de su
   alto. El margen superior se mide en porcentaje del ancho, por eso la altura
   va en margin-top. */
.lp-misti__volcan-bandera {
    position: absolute;
    top: .9rem;
    left: calc(50% + (var(--lp-cima-fx) - .5) * min(100%, var(--lp-volcan-ancho)));
    width: 1.15rem;
    height: 1.55rem;
    margin-top: calc(var(--lp-cima-fy) * .625 * min(100%, var(--lp-volcan-ancho)) - 1.5rem);
    translate: -21% 0;
    scale: 0;
    transform-origin: 21% 100%;
    transition: scale .45s cubic-bezier(.3, 1.6, .5, 1);
    --lp-dib-asta: var(--lp-sup-tinta);
    --lp-dib-banderin: var(--lp-area);
}

.lp-misti__volcan--ing .lp-misti__volcan-bandera {
    --lp-cima-fx: .6;
    --lp-cima-fy: .25;
}

.lp-misti__volcan--bio .lp-misti__volcan-bandera {
    --lp-cima-fx: .575;
    --lp-cima-fy: .15;
}

.lp-misti__volcan--soc .lp-misti__volcan-bandera {
    --lp-cima-fx: .6;
    --lp-cima-fy: .32;
}

.lp-misti__volcan-nombre {
    grid-area: nombre;
    margin-top: .2rem;
    color: var(--lp-sup-suave);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-misti__volcan-area {
    grid-area: area;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;
}

.lp-misti__volcan-cuenta {
    grid-area: cuenta;
    margin-top: .15rem;
    color: var(--lp-area);
    font-size: .92rem;
    font-weight: 700;
}

/* Elegido: el volcán se rodea de su color y se le planta la bandera. */
.lp-misti [data-area-radio]:checked ~ .lp-misti__volcan-cima .lp-misti__volcan-bandera {
    scale: 1;
}

.lp-misti__volcan:has([data-area-radio]:checked) {
    box-shadow: inset 0 0 0 3px var(--lp-area), 0 1rem 1.4rem -.9rem var(--lp-sombra-honda);
    translate: 0 -3px;
}

.lp-misti [data-area-radio]:focus-visible ~ .lp-misti__volcan-cima .lp-misti__volcan-dibujo {
    outline: 3px solid var(--lp-foco);
    outline-offset: 4px;
    border-radius: .4rem;
}

/* El mapa de rutas: papel topográfico con curvas de nivel, en el panel de la
   ciudad. Sin área elegida, las tres columnas. */
.lp-misti__mapa {
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    padding: clamp(1.2rem, .8rem + 2vw, 2.25rem);
    border-radius: 1.25rem;
    background:
        repeating-radial-gradient(circle at 12% 20%, transparent 0 1.7rem, var(--lp-curva) 1.7rem calc(1.7rem + 1px)),
        repeating-radial-gradient(circle at 88% 85%, transparent 0 2.1rem, var(--lp-curva) 2.1rem calc(2.1rem + 1px)),
        var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 1.1rem 1.8rem -1.3rem var(--lp-sombra-honda);
}

.lp-misti__mapa-titulo {
    color: var(--lp-sup-acento);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-misti__mapa-pista {
    margin-top: .4rem;
    color: var(--lp-sup-suave);
    font-size: .94rem;
}

.lp-misti__mapa-columnas {
    display: grid;
    gap: 1.6rem 2rem;
    margin-top: 1.4rem;
}

@media (min-width: 768px) {
    .lp-misti__mapa-columnas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lp-misti__ruta-encabezado {
    display: flex;
    flex-direction: column;
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--lp-area);
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-misti__ruta-volcan {
    color: var(--lp-area);
    font-family: var(--lp-texto);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-misti__ruta-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

    .lp-misti__ruta-datos div {
        display: flex;
        align-items: baseline;
        gap: .35rem;
        padding: .15rem .6rem .18rem;
        border-radius: .4rem;
        background: var(--lp-cal-baja);
        font-size: .82rem;
    }

    .lp-misti__ruta-datos dt {
        color: var(--lp-sup-suave);
    }

    .lp-misti__ruta-datos dd {
        color: var(--lp-sup-tinta);
        font-weight: 800;
    }

.lp-misti__ruta-lista {
    margin-top: .85rem;
}

    .lp-misti__ruta-lista li {
        position: relative;
        padding-left: 1.15rem;
        break-inside: avoid;
        color: var(--lp-sup-tinta);
        font-size: .95rem;
        line-height: 1.45;
    }

        .lp-misti__ruta-lista li + li {
            margin-top: .3rem;
        }

        /* Cada carrera es un hito del sendero: una cumbre pequeña del color del
           área. */
        .lp-misti__ruta-lista li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .42em;
            width: .62rem;
            height: .5rem;
            background: var(--lp-area);
            clip-path: polygon(0 100%, 50% 0, 100% 100%);
        }

/* Con un área elegida queda solo su columna, con la lista repartida en columnas
   si cabe. */
.lp-misti__volcanes:has([data-area-radio]:checked) .lp-misti__mapa-pista {
    display: none;
}

.lp-misti__volcanes:has([data-area-radio]:checked) .lp-misti__mapa-columnas {
    grid-template-columns: minmax(0, 1fr);
}

.lp-misti__volcanes:has([data-area-radio]:checked) .lp-misti__ruta {
    display: none;
}

.lp-misti__volcanes:has(#lp-misti-area-ing:checked) .lp-misti__ruta--ing,
.lp-misti__volcanes:has(#lp-misti-area-bio:checked) .lp-misti__ruta--bio,
.lp-misti__volcanes:has(#lp-misti-area-soc:checked) .lp-misti__ruta--soc {
    display: block;
}

.lp-misti__volcanes:has([data-area-radio]:checked) .lp-misti__ruta-lista {
    columns: 15rem 3;
    column-gap: 2.25rem;
}

/* Las llamadas del área: sin elegir se ve la general; al elegir, la del área. */
.lp-misti__volcanes-accion {
    margin-top: 2rem;
}

.lp-misti__area-cta:not([data-area-cta=""]) {
    display: none;
}

.lp-misti__volcanes:has([data-area-radio]:checked) .lp-misti__area-cta[data-area-cta=""] {
    display: none;
}

.lp-misti__volcanes:has(#lp-misti-area-ing:checked) .lp-misti__area-cta[data-area-cta="ing"],
.lp-misti__volcanes:has(#lp-misti-area-bio:checked) .lp-misti__area-cta[data-area-cta="bio"],
.lp-misti__volcanes:has(#lp-misti-area-soc:checked) .lp-misti__area-cta[data-area-cta="soc"] {
    display: inline-flex;
}

/* ═══ Un año de ascenso ════════════════════════════════════════════════════
   El perfil del Misti y el altímetro, lado a lado desde 992 px. */
.lp-misti__subida {
    display: grid;
    align-items: center;
    gap: 1.75rem clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 992px) {
    .lp-misti__subida {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    }
}

/* El perfil: el sendero va por el flanco izquierdo, de la esquina inferior
   (5 % del ancho) a la cumbre (50 % del ancho, 90,9 % de la altura). Cada
   campamento y la bandera se colocan sobre esa recta con su fracción --lp-f. */
.lp-misti__perfil {
    position: relative;
    aspect-ratio: 400 / 220;
    --lp-dib-roca: #33465F;
    --lp-dib-roca-sombra: #26374D;
    --lp-dib-nieve: #EEF4FA;
}

.lp-misti__perfil-dibujo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lp-misti__campamento {
    position: absolute;
    left: calc(5% + 45% * var(--lp-f));
    bottom: calc(90.9% * var(--lp-f));
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--lp-altura-alto);
    color: var(--lp-altura-tinta);
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--lp-altura-acento);
    translate: -50% 50%;
    transition: background-color .3s ease, color .3s ease, scale .3s ease;
}

.lp-misti__campamento--1 {
    --lp-f: .2;
}

.lp-misti__campamento--2 {
    --lp-f: .45;
}

.lp-misti__campamento--3 {
    --lp-f: .7;
}

.lp-misti__campamento--4 {
    --lp-f: .9;
}

.lp-misti__campamento--5 {
    --lp-f: 1;
}

.lp-misti__perfil[data-etapa-activa="1"] .lp-misti__campamento--1,
.lp-misti__perfil[data-etapa-activa="2"] .lp-misti__campamento--2,
.lp-misti__perfil[data-etapa-activa="3"] .lp-misti__campamento--3,
.lp-misti__perfil[data-etapa-activa="4"] .lp-misti__campamento--4,
.lp-misti__perfil[data-etapa-activa="5"] .lp-misti__campamento--5 {
    background: var(--lp-altura-acento);
    color: var(--lp-accion-clara-tinta);
    scale: 1.2;
}

/* La bandera del escalador: sin guion queda plantada en la cumbre; con guion la
   lleva el altímetro. */
.lp-misti__escalador {
    position: absolute;
    left: calc(5% + 45% * var(--lp-avance, 1));
    bottom: calc(90.9% * var(--lp-avance, 1));
    width: 1.5rem;
    height: 2rem;
    translate: -20% -6%;
    transition: left .45s cubic-bezier(.3, .9, .3, 1), bottom .45s cubic-bezier(.3, .9, .3, 1);
    --lp-dib-asta: var(--lp-altura-tinta);
    --lp-dib-banderin: var(--lp-altura-acento);
}

/* El altímetro: la barra y la lectura de la semana elegida. */
.lp-misti__altimetro {
    padding: 1.25rem 1.35rem 1.4rem;
    border-radius: 1.1rem;
    background: var(--lp-altura-velo);
    box-shadow: inset 0 0 0 1px var(--lp-altura-borde);
}

.lp-misti__altimetro-etiqueta {
    color: var(--lp-altura-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

/* La barra se dibuja a mano en los dos motores: un surco claro y una perilla
   dorada con el canto oscuro. */
.lp-misti__altimetro-barra {
    display: block;
    width: 100%;
    height: 2.4rem;
    margin: .9rem 0 .4rem;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    --lp-foco: var(--lp-altura-acento);
}

    .lp-misti__altimetro-barra::-webkit-slider-runnable-track {
        height: .55rem;
        border-radius: 1rem;
        background: linear-gradient(90deg, var(--lp-altura-suave), var(--lp-altura-acento));
    }

    .lp-misti__altimetro-barra::-moz-range-track {
        height: .55rem;
        border-radius: 1rem;
        background: linear-gradient(90deg, var(--lp-altura-suave), var(--lp-altura-acento));
    }

    .lp-misti__altimetro-barra::-webkit-slider-thumb {
        width: 1.6rem;
        height: 1.6rem;
        margin-top: -.525rem;
        border: 3px solid var(--lp-altura-alto);
        border-radius: 50%;
        background: var(--lp-altura-acento);
        box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .45);
        -webkit-appearance: none;
        appearance: none;
    }

    .lp-misti__altimetro-barra::-moz-range-thumb {
        width: 1.6rem;
        height: 1.6rem;
        border: 3px solid var(--lp-altura-alto);
        border-radius: 50%;
        background: var(--lp-altura-acento);
        box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .45);
    }

.lp-misti__altimetro-lectura {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .9rem;
    color: var(--lp-altura-suave);
    font-size: .95rem;
    font-weight: 700;
}

.lp-misti__altimetro-dato--altura {
    color: var(--lp-altura-acento);
    font-family: var(--lp-titulo);
    font-size: 1.9rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.lp-misti__altimetro-fechas {
    margin-top: .35rem;
    color: var(--lp-altura-tinta);
    font-size: .95rem;
}

/* Los cinco tramos: tarjetas de velo claro sobre el cielo. */
.lp-misti__tramos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lp-misti__etapa {
    position: relative;
    padding: 1.1rem 1.15rem 1.25rem;
    border-radius: 1rem;
    background: var(--lp-altura-velo);
    box-shadow: inset 0 0 0 1px var(--lp-altura-borde);
}

.lp-misti__etapa-marca {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lp-altura-acento);
    color: var(--lp-accion-clara-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.05rem;
    font-weight: 700;
}

.lp-misti__etapa-nombre {
    margin-top: .7rem;
    color: var(--lp-altura-acento);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.lp-misti__etapa-titulo {
    margin-top: .25rem;
    color: var(--lp-altura-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-misti__etapa-cuando {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    margin-top: .5rem;
    font-size: .86rem;
}

.lp-misti__etapa-semanas {
    padding: .04rem .5rem .06rem;
    border-radius: .35rem;
    background: rgba(255, 255, 255, .14);
    color: var(--lp-altura-tinta);
    font-weight: 700;
}

.lp-misti__etapa-fechas {
    color: var(--lp-altura-suave);
}

.lp-misti__etapa-texto {
    margin-top: .55rem;
    color: var(--lp-altura-suave);
    font-size: .94rem;
}

/* ═══ Las puertas del año ══════════════════════════════════════════════════
   Siete portadas de sillar, centradas por filas. La clave del arco lleva el
   mes; las hojas de madera solo existen con guion y movimiento, y se abren al
   entrar en pantalla. */
.lp-misti__puertas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 1.25rem;
}

.lp-misti__puerta {
    position: relative;
    flex: 1 1 100%;
    padding: 2.6rem 1.25rem 1.35rem;
    overflow: hidden;
    border-radius: 7rem 7rem .7rem .7rem / 5.5rem 5.5rem .7rem .7rem;
    background:
        radial-gradient(var(--lp-piedra-poro) 1px, transparent 1.5px) 0 0 / 9px 11px,
        linear-gradient(var(--lp-piedra), var(--lp-piedra-baja));
    color: var(--lp-piedra-tinta);
    text-align: center;
    box-shadow: inset 0 0 0 .45rem var(--lp-piedra-luz), inset 0 0 0 calc(.45rem + 1px) var(--lp-piedra-poro), 0 .9rem 1.4rem -1rem var(--lp-sombra-honda);
    --lp-foco: var(--lp-grabado);
}

@media (min-width: 576px) {
    .lp-misti__puerta {
        flex: 1 1 15rem;
        max-width: 18rem;
    }
}

/* La clave del arco: una dovela granate con el mes, por encima de las hojas. */
.lp-misti__puerta-mes {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    min-width: 6.5rem;
    padding: .3rem .9rem .45rem;
    background: var(--lp-acento);
    color: var(--lp-cal);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
    translate: -50% 0;
}

.lp-misti__puerta-nombre {
    color: var(--lp-piedra-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-misti__puerta-texto {
    margin-top: .5rem;
    color: var(--lp-piedra-suave);
    font-size: .93rem;
}

/* ═══ Bajo los arcos ═══════════════════════════════════════════════════════
   Cada foto bajo un arco de medio punto, enmarcada en sillar. En móvil la
   primera va a lo ancho con un arco rebajado y las otras dos debajo. */
.lp-misti__arcos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .lp-misti__arcos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem clamp(1.25rem, 3vw, 2.5rem);
    }
}

.lp-misti__arco {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lp-misti__arco-marco {
    position: relative;
    display: block;
    padding: clamp(.4rem, .25rem + .5vw, .6rem) clamp(.4rem, .25rem + .5vw, .6rem) 0;
    border-radius: 999px 999px .45rem .45rem;
    background:
        radial-gradient(var(--lp-piedra-poro) 1px, transparent 1.5px) 0 0 / 9px 11px,
        linear-gradient(var(--lp-piedra), var(--lp-piedra-baja));
    box-shadow: inset 0 0 0 1px var(--lp-piedra-luz), 0 1.1rem 1.6rem -1.1rem var(--lp-sombra-honda);
}

    /* La clave del arco, tallada arriba al centro. */
    .lp-misti__arco-marco::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: -.35rem;
        left: 50%;
        width: 1.6rem;
        height: 1.4rem;
        background: linear-gradient(var(--lp-piedra), var(--lp-piedra-baja));
        box-shadow: inset 0 0 0 1px var(--lp-piedra-poro);
        clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
        translate: -50% 0;
    }

.lp-misti__arco-foto {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: 999px 999px .2rem .2rem;
}

@media (max-width: 767.98px) {
    .lp-misti__arco:first-child {
        grid-column: 1 / -1;
    }

        .lp-misti__arco:first-child .lp-misti__arco-marco {
            border-radius: 50% 50% .45rem .45rem / 30% 30% .45rem .45rem;
        }

        .lp-misti__arco:first-child .lp-misti__arco-foto {
            aspect-ratio: 4 / 3;
            border-radius: 50% 50% .2rem .2rem / 28% 28% .2rem .2rem;
        }
}

.lp-misti__arco-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .6rem;
    margin-top: .8rem;
    text-align: center;
}

.lp-misti__arco-carrera {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.12rem;
    font-weight: 700;
}

.lp-misti__arco-area {
    padding: .05rem .55rem .08rem;
    border-radius: .35rem;
    color: var(--lp-area);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px var(--lp-area);
}

.lp-misti__arco--ing {
    --lp-area: var(--lp-area-ing);
}

.lp-misti__arco--bio {
    --lp-area: var(--lp-area-bio);
}

.lp-misti__arco--soc {
    --lp-area: var(--lp-area-soc);
}

/* ═══ El día del examen ════════════════════════════════════════════════════
   El reloj a la izquierda y los datos a la derecha desde 768 px; debajo, lo
   que se evalúa. */
.lp-misti__examen {
    display: grid;
    grid-template-areas:
        "reloj"
        "datos"
        "evalua";
    align-items: center;
    gap: 1.75rem clamp(2rem, 4vw, 3.5rem);
    padding: clamp(1.25rem, .8rem + 2vw, 2.25rem);
    border-radius: 1.5rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 1.2rem 2rem -1.4rem var(--lp-sombra-honda);
}

@media (min-width: 768px) {
    .lp-misti__examen {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "reloj datos"
            "evalua evalua";
    }
}

/* El reloj: una esfera con 80 marcas, una por pregunta (360° / 80 = 4,5°), y
   una aguja que da la vuelta de los 150 minutos. */
.lp-misti__reloj {
    grid-area: reloj;
    justify-self: center;
}

.lp-misti__reloj-esfera {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(11rem, 8rem + 12vw, 14.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from -.45deg, var(--lp-sup-tinta) 0 .9deg, transparent .9deg 4.5deg),
        var(--lp-cal-baja);
    box-shadow: inset 0 0 0 .55rem var(--lp-panel), inset 0 0 0 calc(.55rem + 2px) var(--lp-linea), 0 .8rem 1.4rem -1rem var(--lp-sombra-honda);
}

    /* El centro tapa el interior de las marcas para dejarlas en un anillo. */
    .lp-misti__reloj-esfera::before {
        content: "";
        position: absolute;
        inset: 18%;
        border-radius: 50%;
        background: var(--lp-panel);
        box-shadow: 0 0 0 1px var(--lp-linea);
    }

.lp-misti__reloj-aguja {
    position: absolute;
    z-index: 1;
    left: calc(50% - 2px);
    bottom: 50%;
    width: 4px;
    height: 41%;
    border-radius: 2px;
    background: var(--lp-acento);
    transform-origin: 50% 100%;
}

.lp-misti__reloj-centro {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    padding: .35rem .6rem;
    border-radius: .6rem;
    background: var(--lp-panel);
}

.lp-misti__reloj-cifra {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
}

.lp-misti__reloj-unidad {
    color: var(--lp-sup-suave);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-misti__examen-datos {
    grid-area: datos;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

@media (max-width: 575.98px) {
    .lp-misti__examen-datos {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }
}

.lp-misti__examen-dato {
    padding: .75rem .85rem .85rem;
    border-radius: .8rem;
    background: var(--lp-cal-baja);
}

    .lp-misti__examen-dato dt {
        color: var(--lp-sup-suave);
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .lp-misti__examen-dato dd {
        margin-top: .15rem;
        color: var(--lp-sup-tinta);
        font-family: var(--lp-titulo);
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .lp-misti__examen-dato:nth-child(-n + 2) dd {
        font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem);
    }

    .lp-misti__examen-dato:last-child {
        grid-column: 1 / -1;
    }

        .lp-misti__examen-dato:last-child dd {
            font-family: var(--lp-texto);
            font-size: 1rem;
        }

.lp-misti__evalua {
    grid-area: evalua;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--lp-linea);
}

.lp-misti__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

    .lp-misti__chips li {
        padding: .3rem .85rem .35rem;
        border-radius: 999px;
        background: var(--lp-cal-baja);
        color: var(--lp-sup-tinta);
        font-size: .92rem;
        font-weight: 600;
        box-shadow: inset 0 0 0 1px var(--lp-panel-borde);
    }

        .lp-misti__chips li:last-child {
            background: transparent;
            color: var(--lp-sup-acento);
            box-shadow: inset 0 0 0 1.5px var(--lp-sup-acento);
        }

.lp-misti__examen-nota {
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: .9rem;
}

/* ═══ Tallado en sillar ════════════════════════════════════════════════════
   Bloques de piedra con la cifra grabada: luz en el borde de abajo del surco y
   sombra en el de arriba. */
.lp-misti__placas {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 576px) {
    .lp-misti__placas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .lp-misti__placas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lp-misti__placa {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1.4rem 1.45rem;
    border-radius: .35rem;
    background:
        radial-gradient(var(--lp-piedra-poro) 1px, transparent 1.6px) 0 0 / 11px 13px,
        radial-gradient(var(--lp-piedra-poro) .8px, transparent 1.3px) 5px 6px / 11px 13px,
        linear-gradient(160deg, var(--lp-piedra), var(--lp-piedra-baja));
    color: var(--lp-piedra-tinta);
    box-shadow: inset 2px 2px 0 var(--lp-piedra-luz), inset -2px -2px 0 rgba(80, 60, 35, .22), 0 .8rem 1.2rem -.9rem var(--lp-sombra-honda);
}

    /* El brillo que pule la piedra al entrar en pantalla; en reposo queda fuera. */
    .lp-misti__placa::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%);
        translate: -120% 0;
        pointer-events: none;
    }

.lp-misti__placa-cifra {
    color: var(--lp-grabado);
    font-family: var(--lp-titulo);
    font-size: clamp(2.3rem, 1.7rem + 2vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 var(--lp-piedra-luz), 0 -1px 0 rgba(60, 40, 20, .28);
}

.lp-misti__placa-texto {
    margin-top: .55rem;
    color: var(--lp-piedra-suave);
    font-size: .95rem;
}

/* ═══ La cordada ═══════════════════════════════════════════════════════════
   Una cuerda trenzada y seis tarjetas atadas con su mosquetón: en móvil la
   cuerda baja por la izquierda; desde 992 px va por el centro y las tarjetas se
   alternan a cada lado. */
.lp-misti__cordada {
    --lp-cuerda-x: 1.05rem;
    position: relative;
    display: grid;
    gap: 1.1rem;
    padding-left: 3rem;
}

    .lp-misti__cordada::before {
        content: "";
        position: absolute;
        top: .5rem;
        bottom: .5rem;
        left: calc(var(--lp-cuerda-x) - .2rem);
        width: .4rem;
        border-radius: .2rem;
        background: repeating-linear-gradient(-35deg, var(--lp-acento) 0 .3rem, var(--lp-area-soc) .3rem .6rem);
    }

.lp-misti__nudo {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icono titulo"
        "icono texto";
    column-gap: 1rem;
    align-items: start;
    padding: 1.05rem 1.2rem 1.15rem;
    border-radius: 1rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 .8rem 1.3rem -1rem var(--lp-sombra-honda);
}

    /* El mosquetón: un anillo que une la tarjeta con la cuerda. */
    .lp-misti__nudo::before {
        content: "";
        position: absolute;
        top: 1.35rem;
        left: calc(-3rem + var(--lp-cuerda-x) - .55rem);
        width: 3.1rem;
        height: 1.1rem;
        border: .22rem solid var(--lp-tinta-suave);
        border-radius: 1rem;
    }

.lp-misti__nudo-icono {
    grid-area: icono;
    width: 2.6rem;
    height: 2.6rem;
    --lp-dibujo-trazo: var(--lp-cielo);
}

.lp-misti__nudo-titulo {
    grid-area: titulo;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-misti__nudo-texto {
    grid-area: texto;
    margin-top: .3rem;
    color: var(--lp-sup-suave);
    font-size: .95rem;
}

@media (min-width: 992px) {
    .lp-misti__cordada {
        --lp-cuerda-x: 50%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 6rem;
        padding-left: 0;
    }

    .lp-misti__nudo:nth-child(odd) {
        grid-column: 1;
    }

    .lp-misti__nudo:nth-child(even) {
        grid-column: 2;
        margin-top: 4rem;
        margin-bottom: -4rem;
    }

        .lp-misti__nudo:nth-child(odd)::before {
            left: auto;
            right: -3.55rem;
        }

        .lp-misti__nudo:nth-child(even)::before {
            left: -3.55rem;
        }

    .lp-misti__cordada-seccion .lp-misti__acciones {
        margin-top: 6rem;
    }
}

/* ═══ Una postal desde Arequipa ════════════════════════════════════════════ */
.lp-misti__familia-rejilla {
    display: grid;
    gap: 1rem clamp(2rem, 4vw, 4rem);
}

@media (min-width: 992px) {
    .lp-misti__familia-rejilla {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: center;
    }
}

.lp-misti__postal {
    perspective: 70rem;
}

/* El frente: un paisaje de postal con su saludo; el botón para voltearla va en
   una tira al pie. */
.lp-misti__postal-frente {
    display: block;
    overflow: hidden;
    border-radius: .8rem;
    background: var(--lp-papel);
    box-shadow: 0 0 0 .5rem var(--lp-papel), 0 0 0 calc(.5rem + 1px) var(--lp-papel-linea), 0 1.2rem 1.8rem -1rem var(--lp-sombra-honda);
    color: var(--lp-papel-tinta);
    list-style: none;
    cursor: pointer;
    --lp-foco: var(--lp-papel-acento);
}

    .lp-misti__postal-frente::-webkit-details-marker {
        display: none;
    }

.lp-misti__postal-paisaje {
    position: relative;
    display: block;
    aspect-ratio: 3 / 1.6;
    overflow: hidden;
    border-radius: .4rem .4rem 0 0;
    background:
        radial-gradient(circle at 78% 30%, #FFE7A8 0 7%, rgba(255, 231, 168, 0) 14%),
        linear-gradient(var(--lp-postal-cielo), var(--lp-postal-cielo-bajo));
    --lp-dib-roca: #6D7A8C;
    --lp-dib-roca-sombra: #586577;
    --lp-dib-nieve: #FFFFFF;
}

.lp-misti__postal-dibujo {
    position: absolute;
    left: 50%;
    bottom: -2%;
    width: 76%;
    height: auto;
    aspect-ratio: 160 / 100;
    translate: -50% 0;
}

.lp-misti__postal-saludo {
    position: absolute;
    left: 1rem;
    top: .8rem;
    color: var(--lp-postal-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(1.15rem, .95rem + 1vw, 1.6rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.15;
}

.lp-misti__postal-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.2rem;
    padding: .7rem 1rem;
    color: var(--lp-papel-acento);
    font-family: var(--lp-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

    .lp-misti__postal-boton::after {
        content: "";
        flex: none;
        width: .6rem;
        height: .6rem;
        border: solid currentColor;
        border-width: .15rem .15rem 0 0;
        rotate: 45deg;
    }

.lp-misti__postal[open] :is(.lp-misti__postal-paisaje, .lp-misti__postal-boton--abrir),
.lp-misti__postal:not([open]) .lp-misti__postal-boton--cerrar {
    display: none;
}

.lp-misti__postal[open] .lp-misti__postal-boton::after {
    rotate: -135deg;
}

/* El dorso: papel con la estampilla del Misti, el mensaje y la firma. */
.lp-misti__postal-dorso {
    position: relative;
    margin-top: 1rem;
    padding: 1.4rem clamp(1.15rem, .9rem + 1.5vw, 1.9rem) 1.6rem;
    border-radius: .8rem;
    background:
        repeating-linear-gradient(transparent 0 1.6rem, var(--lp-papel-linea) 1.6rem calc(1.6rem + 1px)) 0 4.4rem / 100% calc(100% - 4.4rem) no-repeat,
        var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 1.2rem 1.8rem -1rem var(--lp-sombra-honda), inset 0 0 0 1px var(--lp-papel-linea);
    transform-origin: 50% 0;
    --lp-sup-tinta: var(--lp-papel-tinta);
    --lp-sup-suave: var(--lp-papel-suave);
    --lp-sup-acento: var(--lp-papel-acento);
    --lp-foco: var(--lp-papel-acento);
}

/* La estampilla: el emblema sobre granate, con un borde blanco y el picado
   del sello dibujado por un contorno discontinuo. */
.lp-misti__postal-estampilla {
    float: right;
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 3.4rem;
    margin: .2rem .2rem .6rem 1rem;
    background: var(--lp-uni);
    box-shadow: 0 0 0 3px var(--lp-papel), 0 0 0 4px var(--lp-papel-linea);
    outline: 2px dashed var(--lp-papel);
    outline-offset: -5px;
    rotate: 4deg;
}

.lp-misti__postal-estampilla-dibujo {
    width: 2.8rem;
    height: 2rem;
}

.lp-misti__postal-titulo {
    color: var(--lp-papel-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 700;
}

.lp-misti__postal-parrafo {
    margin-top: .55rem;
    color: var(--lp-papel-tinta);
}

.lp-misti__postal-lista {
    clear: both;
    display: grid;
    gap: .45rem;
    margin-top: .8rem;
}

    .lp-misti__postal-lista li {
        position: relative;
        padding-left: 1.6rem;
        color: var(--lp-papel-tinta);
    }

        .lp-misti__postal-lista li::before {
            content: "";
            position: absolute;
            left: .1rem;
            top: .55em;
            width: .75rem;
            height: .55rem;
            background: var(--lp-papel-acento);
            clip-path: polygon(0 100%, 50% 0, 100% 100%);
        }

.lp-misti__postal-firma {
    margin-top: .9rem;
    font-family: var(--lp-titulo);
    font-style: italic;
    font-weight: 700;
    text-align: right;
}

/* ═══ Antes de subir ═══════════════════════════════════════════════════════ */
.lp-misti__preguntas-rejilla {
    display: grid;
    gap: 1rem clamp(2rem, 4vw, 4rem);
}

@media (min-width: 992px) {
    .lp-misti__preguntas-rejilla {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        align-items: start;
    }

        .lp-misti__preguntas-rejilla > .lp-misti__cabecera {
            position: sticky;
            top: 6rem;
        }
}

.lp-misti__consultas {
    display: grid;
    gap: .7rem;
}

.lp-misti__consulta {
    border-radius: .9rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde);
}

.lp-misti__consulta-pregunta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: .9rem;
    color: var(--lp-sup-tinta);
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

    .lp-misti__consulta-pregunta::-webkit-details-marker {
        display: none;
    }

    /* Una cumbre pequeña que se da la vuelta al abrirse. */
    .lp-misti__consulta-pregunta::after {
        content: "";
        flex: none;
        width: .95rem;
        height: .7rem;
        background: var(--lp-sup-acento);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        transition: rotate .3s ease;
    }

.lp-misti__consulta[open] > .lp-misti__consulta-pregunta::after {
    rotate: 180deg;
}

.lp-misti__consulta-texto {
    flex: 1;
}

.lp-misti__consulta-respuesta {
    padding: 0 1.15rem 1.15rem;
    color: var(--lp-sup-suave);
}

/* ═══ La cumbre ════════════════════════════════════════════════════════════
   La noche estrellada, igual en los dos temas: el texto va arriba y abajo el
   Misti en silueta, con el alba detrás. */
.lp-misti__cierre {
    position: relative;
    overflow: hidden;
    padding-top: clamp(4rem, 3rem + 4vw, 6.5rem);
    background:
        radial-gradient(var(--lp-estrella) 1.1px, transparent 1.7px) 17px 23px / 157px 131px,
        radial-gradient(var(--lp-estrella) .8px, transparent 1.3px) 71px 5px / 103px 89px,
        radial-gradient(rgba(255, 255, 255, .5) .7px, transparent 1.2px) 29px 61px / 67px 73px,
        radial-gradient(rgba(255, 255, 255, .35) .6px, transparent 1.1px) 3px 37px / 41px 47px,
        linear-gradient(var(--lp-noche-alto), var(--lp-noche-medio) 55%, var(--lp-noche-bajo));
    color: var(--lp-noche-tinta);
    --lp-sup-tinta: var(--lp-noche-tinta);
    --lp-sup-suave: var(--lp-noche-suave);
    --lp-sup-acento: var(--lp-noche-acento);
    --lp-foco: var(--lp-noche-acento);
}

.lp-misti__cierre-texto {
    position: relative;
    z-index: 1;
    text-align: center;
}

    .lp-misti__cierre-texto .lp-misti__rotulo {
        justify-content: center;
    }

.lp-misti__cierre-entrada {
    max-width: 40rem;
    margin: 1rem auto 0;
    color: var(--lp-noche-suave);
    font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem);
}

.lp-misti__independiente {
    max-width: 40rem;
    margin: 1.6rem auto 0;
    color: var(--lp-noche-suave);
    font-size: .85rem;
}

.lp-misti__cumbre {
    position: relative;
    overflow-x: clip;
    height: clamp(9rem, 6.5rem + 9vw, 14rem);
    margin-top: clamp(1rem, 3vw, 2rem);
}

.lp-misti__cumbre-alba {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(46rem, 120%);
    height: 85%;
    border-radius: 50% 50% 0 0;
    background: radial-gradient(ellipse 50% 60% at 50% 100%, var(--lp-alba), transparent 70%);
    translate: -50% 0;
}

.lp-misti__cumbre-volcan {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: auto;
    height: 100%;
    aspect-ratio: 160 / 100;
    translate: -50% 0;
    --lp-dib-roca: var(--lp-silueta);
    --lp-dib-roca-sombra: var(--lp-silueta-sombra);
    --lp-dib-nieve: var(--lp-silueta-nieve);
}

/* La bandera, en la cumbre del dibujo: el dibujo mide 1,6 veces su alto y la
   cumbre está al 53,75 % de su ancho y al 15 % de su alto, así que queda 0,06
   altos a la derecha del centro y al 85 % desde abajo. */
.lp-misti__cumbre-bandera {
    position: absolute;
    left: calc(50% + .06 * clamp(9rem, 6.5rem + 9vw, 14rem));
    bottom: 85%;
    width: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
    height: auto;
    aspect-ratio: 24 / 32;
    translate: -20% 0;
    transform-origin: 20% 100%;
    --lp-dib-asta: var(--lp-noche-tinta);
    --lp-dib-banderin: var(--lp-noche-acento);
}

/* ═══ Botón flotante ═══════════════════════════════════════════════════════
   Escondido se aparta hacia abajo y deja de recibir foco: visibility cambia al
   final de la transición para que la salida se vea.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. */
.lp-misti__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .65rem 1.4rem .7rem;
    border-radius: .55rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.06rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 .25rem 0 var(--lp-accion-canto), 0 1rem 1.8rem -.6rem var(--lp-sombra-flotante);
    --lp-foco: var(--lp-accion);
    --lp-dib-asta: currentColor;
    --lp-dib-banderin: currentColor;
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s, background-color .2s ease;
}

    .lp-misti__flotante:hover {
        background: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
    }

.lp-misti__flotante-icono {
    width: .9rem;
    height: 1.2rem;
}

.lp-misti__flotante--oculto {
    opacity: 0;
    translate: 0 160%;
    visibility: hidden;
    pointer-events: none;
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear .35s;
}

/* En el teléfono el botón ocupa el ancho entre márgenes. Por la derecha se
   detiene donde empieza la esquina de la mascota del sitio, con la reserva que
   publica el marco; sin mascota la variable no existe y el margen vuelve a ser
   el de la izquierda. Al quedar más estrecho, el relleno baja un punto para que
   el texto quepa en una línea desde 320 px, y si aun así se parte, va centrado. */
@media (max-width: 575.98px) {
    .lp-misti__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        padding-inline: 1rem;
        text-align: center;
    }
}

/* ═══ Apariciones ══════════════════════════════════════════════════════════
   El guion pone --visible al entrar en pantalla. El estado de partida solo existe
   con movimiento permitido y guion en marcha: sin ellos todo se ve desde el
   principio. --lp-orden escalona los hermanos. */
.lp-misti [data-revelar]:nth-child(2) {
    --lp-orden: 1;
}

.lp-misti [data-revelar]:nth-child(3) {
    --lp-orden: 2;
}

.lp-misti [data-revelar]:nth-child(4) {
    --lp-orden: 3;
}

.lp-misti [data-revelar]:nth-child(5) {
    --lp-orden: 4;
}

.lp-misti [data-revelar]:nth-child(6) {
    --lp-orden: 5;
}

.lp-misti [data-revelar]:nth-child(n + 7) {
    --lp-orden: 6;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-misti--animada [data-revelar] {
        transition: opacity .75s ease-out, translate .75s cubic-bezier(.2, .7, .3, 1);
        transition-delay: calc(var(--lp-orden, 0) * 90ms);
    }

        .lp-misti--animada [data-revelar]:not(.lp-misti--visible) {
            opacity: 0;
            translate: 0 1.5rem;
        }

    /* El sol de la portada sube detrás de la ventana y la cordillera se levanta
       de la bruma. */
    .lp-misti--animada .lp-misti__sol {
        animation: lp-misti-amanecer 2.2s cubic-bezier(.25, .8, .3, 1) .4s both;
    }

    .lp-misti--animada .lp-misti__cordillera-dibujo {
        animation: lp-misti-emerger 2.4s cubic-bezier(.2, .75, .3, 1) .2s both;
    }

    /* Los campamentos aparecen de abajo arriba cuando el perfil entra en
       pantalla. */
    .lp-misti--animada .lp-misti__campamento {
        transition: background-color .3s ease, color .3s ease, scale .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease;
        transition-delay: 0s, 0s, calc(var(--lp-f) * 1.2s), calc(var(--lp-f) * 1.2s);
    }

    .lp-misti--animada .lp-misti__perfil:not(.lp-misti--visible) .lp-misti__campamento {
        opacity: 0;
        scale: 0;
    }

    /* Las hojas de las portadas: dos tablas de madera que cubren la puerta y se
       abren hacia los lados. */
    .lp-misti--animada .lp-misti__puerta::before,
    .lp-misti--animada .lp-misti__puerta::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: .45rem;
        bottom: .45rem;
        width: calc(50% - .45rem);
        background:
            repeating-linear-gradient(90deg, transparent 0 .9rem, var(--lp-madera-veta) .9rem calc(.9rem + 2px)),
            var(--lp-madera);
        pointer-events: none;
        transition: translate 1.1s cubic-bezier(.5, 0, .2, 1), opacity .4s ease;
        transition-delay: calc(.35s + var(--lp-orden, 0) * 90ms), calc(1.2s + var(--lp-orden, 0) * 90ms);
    }

    .lp-misti--animada .lp-misti__puerta::before {
        left: .45rem;
        border-radius: 6.5rem 0 0 .4rem / 5rem 0 0 .4rem;
    }

    .lp-misti--animada .lp-misti__puerta::after {
        right: .45rem;
        border-radius: 0 6.5rem .4rem 0 / 0 5rem .4rem 0;
    }

    .lp-misti--animada .lp-misti__puerta.lp-misti--visible::before {
        translate: -102% 0;
        opacity: 0;
    }

    .lp-misti--animada .lp-misti__puerta.lp-misti--visible::after {
        translate: 102% 0;
        opacity: 0;
    }

    /* La foto de cada arco aparece desde el pie, como la luz por una puerta. */
    .lp-misti--animada .lp-misti__arco-foto {
        transition: clip-path 1.2s cubic-bezier(.3, .8, .3, 1);
        transition-delay: calc(.25s + var(--lp-orden, 0) * 120ms);
        clip-path: circle(150% at 50% 100%);
    }

    .lp-misti--animada .lp-misti__arco:not(.lp-misti--visible) .lp-misti__arco-foto {
        clip-path: circle(0 at 50% 100%);
    }

    /* La aguja del reloj da su vuelta de 150 minutos. */
    .lp-misti--animada .lp-misti__reloj.lp-misti--visible .lp-misti__reloj-aguja {
        animation: lp-misti-vuelta 2.6s cubic-bezier(.45, .05, .25, 1) .2s both;
    }

    /* El brillo pule cada placa una vez. */
    .lp-misti--animada .lp-misti__placa.lp-misti--visible::after {
        animation: lp-misti-pulir 1.4s ease-in-out calc(.5s + var(--lp-orden, 0) * 110ms) both;
    }

    /* La postal se voltea al abrirse. */
    .lp-misti__postal[open] .lp-misti__postal-dorso {
        animation: lp-misti-voltear .7s cubic-bezier(.3, .8, .3, 1);
    }

    /* La respuesta de cada pregunta asoma al abrirse. */
    .lp-misti__consulta[open] .lp-misti__consulta-respuesta {
        animation: lp-misti-asomar .4s ease-out;
    }

    /* En la cumbre clarea el alba y se planta la bandera. */
    .lp-misti--animada .lp-misti__cumbre-alba {
        transition: opacity 2.4s ease .2s;
    }

    .lp-misti--animada .lp-misti__cumbre:not(.lp-misti--visible) .lp-misti__cumbre-alba {
        opacity: 0;
    }

    .lp-misti--animada .lp-misti__cumbre-bandera {
        transition: scale .6s cubic-bezier(.3, 1.6, .5, 1) 1.4s;
    }

    .lp-misti--animada .lp-misti__cumbre:not(.lp-misti--visible) .lp-misti__cumbre-bandera {
        scale: 0;
    }
}

@keyframes lp-misti-amanecer {
    from {
        opacity: 0;
        translate: 0 3rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lp-misti-emerger {
    from {
        opacity: 0;
        translate: 0 18%;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lp-misti-vuelta {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes lp-misti-pulir {
    from {
        translate: -120% 0;
    }

    to {
        translate: 120% 0;
    }
}

@keyframes lp-misti-voltear {
    from {
        opacity: 0;
        transform: rotateX(-80deg);
    }

    to {
        opacity: 1;
        transform: rotateX(0);
    }
}

@keyframes lp-misti-asomar {
    from {
        opacity: 0;
        translate: 0 -.4rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ═══ Movimiento reducido ══════════════════════════════════════════════════
   Por si alguna regla futura escapa de los bloques no-preference: sin movimiento
   nada se anima ni transiciona. */
@media (prefers-reduced-motion: reduce) {
    .lp-misti *,
    .lp-misti *::before,
    .lp-misti *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: tarjetas, puertas, placas
   y volcanes se dibujan con contornos. Los dibujos de los volcanes, el perfil
   del ascenso y las cumbres de las listas conservan sus colores, porque ahí el
   color dibuja la forma. */
@media (forced-colors: active) {
    .lp-misti {
        --lp-dibujo-trazo: CanvasText;
    }

    .lp-misti__boton,
    .lp-misti__flotante,
    .lp-misti__cota,
    .lp-misti__volcan,
    .lp-misti__mapa,
    .lp-misti__altimetro,
    .lp-misti__etapa,
    .lp-misti__puerta,
    .lp-misti__arco-marco,
    .lp-misti__examen,
    .lp-misti__examen-dato,
    .lp-misti__placa,
    .lp-misti__nudo,
    .lp-misti__postal-frente,
    .lp-misti__postal-dorso,
    .lp-misti__consulta {
        border: 2px solid CanvasText;
    }

    .lp-misti__volcan:has([data-area-radio]:checked) {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .lp-misti__cordillera,
    .lp-misti__volcan-cima,
    .lp-misti__perfil,
    .lp-misti__reloj-esfera,
    .lp-misti__ruta-lista li::before,
    .lp-misti__postal-paisaje,
    .lp-misti__cumbre {
        forced-color-adjust: none;
    }
}