/* Landing del Ciclo Verano — Universidad Nacional Pedro Ruiz Gallo.

   TODO cuelga de .lp-totora. 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: un verano en la orilla de Lambayeque. Con el tema claro es la playa
   a pleno sol; con el oscuro, la misma playa de noche, y el sol de la portada
   pasa a ser la luna. La pizarra de la caleta, la paja de los caballitos, las
   sombrillas, los cielos del día, la carta de la botella y el atardecer del
   cierre son objetos: no cambian con el tema, como no cambia una sombrilla al
   caer la tarde.

   SIETE FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul y oro de la franja superior, la
       identidad común de las landings de la UNPRG.
     · LA ORILLA (--lp-arena-*, --lp-tinta-*, --lp-panel-*, --lp-acento,
       --lp-celeste): el fondo de las secciones y sus textos; cambia con el tema.
     · EL MAR (--lp-mar-*): oscuro en los dos temas, más hondo de noche; lleva
       siempre texto claro.
     · LA TOTORA Y LOS GRUPOS (--lp-paja-*, --lp-amarra, --lp-g-*): la paja de
       los caballitos y el color de cada grupo académico, iguales en los dos
       temas.
     · LAS ÁREAS DEL EXAMEN (--lp-area-*): un color por área, más luminoso de
       noche para que los atados se distingan sobre el fondo oscuro.
     · LOS OBJETOS (--lp-pizarra-*, --lp-tiza-*, --lp-tela-*, --lp-cielo-*,
       --lp-papel-*, --lp-ocaso-*, --lp-sol-*): fijos, con su propia tinta.
     · LA ACCIÓN (--lp-accion-*): botones de coral sobre la orilla y
       --lp-accion-clara-* sobre el mar y el cielo del cierre.

   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-totora {
    /* ── La universidad ─────────────────────────────────────────────────── */
    --lp-uni: #0F2B5C;
    --lp-uni-oro: #E8BE5A;
    --lp-uni-oro-bajo: #B98A2E;
    --lp-uni-tinta: #F3E9D2;
    --lp-uni-suave: #C9D6EE;
    /* ── La orilla: cambia con el tema ──────────────────────────────────── */
    --lp-arena: #F7EBD3;
    --lp-arena-baja: #EFDDBA;
    --lp-grano: rgba(150, 110, 60, .14);
    --lp-resplandor: rgba(255, 196, 120, .45);
    --lp-tinta: #1F2A33;
    --lp-tinta-suave: #4A5560;
    --lp-linea: #D9C29A;
    --lp-acento: #A6381F;
    --lp-celeste: #0E6873;
    --lp-panel: #FFF8EA;
    --lp-panel-borde: #E5CFA6;
    --lp-sombra: rgba(80, 55, 20, .16);
    --lp-sombra-honda: rgba(60, 40, 15, .3);
    --lp-sombra-flotante: rgba(0, 0, 0, .35);
    --lp-poste: #7A6248;
    /* El astro de la portada: sol de día, luna de noche. */
    --lp-astro: #F6B24A;
    --lp-astro-claro: #FFE29A;
    --lp-astro-halo: rgba(246, 178, 74, .45);
    /* ── El mar: oscuro en los dos temas ────────────────────────────────── */
    --lp-mar-alto: #135A69;
    --lp-mar: #0F4F63;
    --lp-mar-hondo: #0A3446;
    --lp-mar-claro: #2F8794;
    --lp-espuma: #DDF1EE;
    --lp-mar-tinta: #F1F7F6;
    --lp-mar-suave: #CFE3E3;
    --lp-mar-acento: #FFC98A;
    --lp-pez-vivo: #FFC98A;
    /* ── La totora y los grupos, iguales en los dos temas ───────────────── */
    --lp-paja: #D8B56A;
    --lp-paja-alta: #E9CD92;
    --lp-paja-baja: #B38C45;
    --lp-paja-veta: rgba(110, 75, 25, .32);
    --lp-paja-tinta: #3A2A10;
    --lp-amarra: #6E4A1E;
    --lp-remo: #5C3D1A;
    --lp-g-a: #B3261E;
    --lp-g-b: #1F5FAD;
    --lp-g-c: #8A5A00;
    --lp-g-d: #6E3FA3;
    --lp-g-e: #0F6F68;
    --lp-g-f: #4E7A12;
    --lp-g-tinta: #FFFFFF;
    /* ── Las áreas del examen: cambian con el tema ──────────────────────── */
    --lp-area-hab: #A63D2A;
    --lp-area-mat: #24639E;
    --lp-area-com: #8F6305;
    --lp-area-per: #74469C;
    --lp-area-soc: #3F7D3A;
    --lp-area-cie: #0E7C86;
    --lp-area-tinta: #FFFFFF;
    /* ── El calentamiento: acierto y fallo, cambian con el tema ─────────── */
    --lp-bien: #1E7A46;
    --lp-bien-fondo: #DDF2E3;
    --lp-bien-tinta: #0F3D22;
    --lp-mal: #B3261E;
    --lp-mal-fondo: #FBE0DC;
    --lp-mal-tinta: #5C1410;
    --lp-marca-tinta: #FFFFFF;
    /* ── La arena mojada de los escritos: cambia con el tema ────────────── */
    --lp-mojada: #E3C99A;
    --lp-mojada-baja: #D9BC88;
    --lp-grabado: #5E4426;
    --lp-grabado-suave: #4D3920;
    --lp-grabado-luz: rgba(255, 244, 220, .8);
    --lp-grabado-sombra: rgba(70, 45, 15, .3);
    --lp-ola-lavado: rgba(255, 255, 255, .6);
    /* ── El vidrio de la botella: cambia con el tema ────────────────────── */
    --lp-vidrio: rgba(150, 210, 196, .55);
    --lp-vidrio-borde: #2F6F64;
    /* ── Los objetos, fijos ─────────────────────────────────────────────── */
    --lp-pizarra: #233F33;
    --lp-pizarra-marco: #8B5E34;
    --lp-pizarra-marco-bajo: #5E3B1E;
    --lp-tiza: #F4F1E6;
    --lp-tiza-suave: #C9D3C8;
    --lp-tiza-amarilla: #F2D56B;
    --lp-tiza-a: #F7A8A0;
    --lp-tiza-b: #9CC7F2;
    --lp-tiza-c: #F2D56B;
    --lp-tiza-d: #CDB0F0;
    --lp-tiza-e: #96E0C8;
    --lp-tiza-f: #BCE08A;
    --lp-tela-crema: #FFF1D6;
    --lp-tela-1: #E4573D;
    --lp-tela-2: #1F8A93;
    --lp-tela-3: #F2B33D;
    --lp-tela-4: #284B8C;
    --lp-tela-5: #3E9A5B;
    --lp-tela-6: #D9577F;
    --lp-papel: #FBF3E2;
    --lp-papel-linea: #E6D6B5;
    --lp-papel-tinta: #2B2118;
    --lp-papel-suave: #574634;
    --lp-papel-acento: #9C3A22;
    --lp-cinta: #B5432A;
    --lp-corcho: #A87443;
    --lp-sol: #F6B24A;
    --lp-sol-claro: #FFE29A;
    --lp-sol-halo: rgba(246, 178, 74, .45);
    --lp-ocaso-alto: #1F1A4A;
    --lp-ocaso-medio: #3B2463;
    --lp-ocaso-bajo: #8A3A5C;
    --lp-ocaso-horizonte: #D9663F;
    --lp-ocaso-tinta: #FBF1E6;
    --lp-ocaso-suave: #E3D5EC;
    --lp-ocaso-mar: #2A1F45;
    --lp-ocaso-mar-hondo: #150F2A;
    --lp-silueta: #1A1226;
    /* ── La acción ──────────────────────────────────────────────────────── */
    --lp-accion: #A6381F;
    --lp-accion-alta: #B5432A;
    --lp-accion-tinta: #FFF8F0;
    --lp-accion-canto: #6E2210;
    --lp-accion-clara: #FFD27A;
    --lp-accion-clara-alta: #FFE09E;
    --lp-accion-clara-tinta: #2A1A05;
    --lp-accion-clara-canto: #B98A2E;
    /* ── Letras ─────────────────────────────────────────────────────────── */
    --lp-titulo: "Nunito", "Varela Round", "Quicksand", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lp-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lp-mano: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, 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-arena);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la playa 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. La pizarra, la paja, las sombrillas, los
   cielos, la carta y el atardecer no cambian. */
[data-tema="oscuro"] .lp-totora {
    --lp-uni: #0A1F47;
    --lp-uni-oro: #EDC468;
    --lp-arena: #0F1B24;
    --lp-arena-baja: #13222D;
    --lp-grano: rgba(200, 225, 230, .05);
    --lp-resplandor: rgba(225, 230, 210, .1);
    --lp-tinta: #EEF2EF;
    --lp-tinta-suave: #B9C6CC;
    --lp-linea: #2A3B47;
    --lp-acento: #FF9C7A;
    --lp-celeste: #6FD0D6;
    --lp-panel: #182A36;
    --lp-panel-borde: #2C4352;
    --lp-sombra: rgba(0, 0, 0, .4);
    --lp-sombra-honda: rgba(0, 0, 0, .6);
    --lp-sombra-flotante: rgba(0, 0, 0, .6);
    --lp-poste: #A08C70;
    --lp-astro: #D8CFB5;
    --lp-astro-claro: #F6F0DE;
    --lp-astro-halo: rgba(240, 232, 210, .2);
    --lp-mar-alto: #123E4F;
    --lp-mar: #0B2E3C;
    --lp-mar-hondo: #071E29;
    --lp-mar-claro: #1B5866;
    --lp-espuma: #5E8E93;
    --lp-area-hab: #F08A6E;
    --lp-area-mat: #7DB3F0;
    --lp-area-com: #E9B949;
    --lp-area-per: #C29BEA;
    --lp-area-soc: #8FCB7E;
    --lp-area-cie: #5CCFD6;
    --lp-area-tinta: #10181E;
    --lp-bien: #6FD39A;
    --lp-bien-fondo: #123526;
    --lp-bien-tinta: #DDF7E8;
    --lp-mal: #FF8A80;
    --lp-mal-fondo: #3B1A1A;
    --lp-mal-tinta: #FFE1DC;
    --lp-marca-tinta: #0F1B24;
    --lp-mojada: #2B2519;
    --lp-mojada-baja: #231E14;
    --lp-grabado: #EAD3A6;
    --lp-grabado-suave: #D8C6A2;
    --lp-grabado-luz: rgba(0, 0, 0, .55);
    --lp-grabado-sombra: rgba(255, 235, 200, .12);
    --lp-ola-lavado: rgba(170, 220, 225, .22);
    --lp-vidrio: rgba(120, 190, 176, .35);
    --lp-vidrio-borde: #8FD0C3;
    --lp-accion: #FF9C7A;
    --lp-accion-alta: #FFB497;
    --lp-accion-tinta: #2A0F06;
    --lp-accion-canto: #B85A3C;
    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-totora, que no ve sus variables. */
body:has(> .lp-totora) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0F2B5C;
}

[data-tema="oscuro"] body:has(> .lp-totora) {
    background-color: #0A1F47;
}

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

    body > :has(+ .lp-totora) > :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-totora :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-totora :where(h1, h2, h3, h4, p, dl, dd, figure) {
    margin: 0;
}

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

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

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

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

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

.lp-totora,
.lp-totora *,
.lp-totora *::before,
.lp-totora *::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-totora [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-totora:not(.lp-totora--animada) :is([data-depende-fechas], [data-requiere-guion]) {
    display: none !important;
}

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

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-totora [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-totora :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-totora :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-totora__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lp-totora__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. */
.lp-totora__t-linea {
    fill: none;
    stroke: var(--lp-dibujo-trazo, currentColor);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.lp-totora__t-emblema-casco {
    fill: var(--lp-paja);
}

.lp-totora__t-emblema-amarra {
    fill: none;
    stroke: var(--lp-uni);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.lp-totora__t-emblema-ola {
    fill: none;
    stroke: var(--lp-uni-suave);
    stroke-width: 2;
    stroke-linecap: round;
}

.lp-totora__t-caballito-casco {
    fill: var(--lp-caballito-casco, var(--lp-paja));
}

.lp-totora__t-caballito-linea {
    fill: none;
    stroke: var(--lp-caballito-linea, var(--lp-amarra));
    stroke-width: 1.6;
    stroke-linecap: round;
}

.lp-totora__t-caballito-remo {
    fill: var(--lp-caballito-remo, var(--lp-remo));
    stroke: var(--lp-caballito-remo, var(--lp-remo));
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-totora__t-pez {
    fill: var(--lp-pez, currentColor);
    stroke: var(--lp-pez-borde, none);
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-dasharray: var(--lp-pez-trazo, none);
}

.lp-totora__t-pez-ojo {
    fill: var(--lp-pez-ojo, transparent);
}

.lp-totora__t-botella {
    fill: var(--lp-vidrio);
    stroke: var(--lp-vidrio-borde);
    stroke-width: 2;
    stroke-linejoin: round;
}

.lp-totora__t-botella-papel {
    fill: var(--lp-papel);
}

.lp-totora__t-botella-cinta {
    fill: none;
    stroke: var(--lp-cinta);
    stroke-width: 2.2;
}

.lp-totora__t-botella-corcho {
    fill: var(--lp-corcho);
}

.lp-totora__t-botella-brillo {
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 2.6;
    stroke-linecap: round;
}

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

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

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

    .lp-totora__cabecera--centro .lp-totora__rotulo {
        justify-content: center;
    }

    .lp-totora__cabecera--centro .lp-totora__bajada {
        margin-inline: auto;
    }

/* El rótulo lleva delante una ola pequeña: dos filas de arcos, una hacia arriba
   y otra hacia abajo, que se empalman en una línea ondulada continua. */
.lp-totora__rotulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-titulo);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

    .lp-totora__rotulo::before {
        --lp-r: .22rem;
        content: "";
        flex: none;
        width: calc(8 * var(--lp-r));
        height: calc(2 * var(--lp-r));
        background:
            radial-gradient(circle at 50% 100%, transparent calc(var(--lp-r) - 1.7px), currentColor calc(var(--lp-r) - 1.7px) var(--lp-r), transparent calc(var(--lp-r) + .6px)) 0 0 / calc(4 * var(--lp-r)) var(--lp-r) repeat-x,
            radial-gradient(circle at 50% 0, transparent calc(var(--lp-r) - 1.7px), currentColor calc(var(--lp-r) - 1.7px) var(--lp-r), transparent calc(var(--lp-r) + .6px)) calc(2 * var(--lp-r)) var(--lp-r) / calc(4 * var(--lp-r)) var(--lp-r) repeat-x;
    }

.lp-totora__h1 {
    margin-top: 1rem;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(2.6rem, 1.55rem + 4.2vw, 4.9rem);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.02;
}

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

.lp-totora__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 va subrayado con una ola: el subrayado ondulado del navegador sigue
   cada renglón aunque el nombre se parta en dos. */
.lp-totora__h1-linea--marca {
    display: inline;
    color: var(--lp-sup-acento);
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--lp-celeste);
    text-decoration-thickness: .055em;
    text-decoration-skip-ink: none;
    text-underline-offset: .2em;
}

.lp-totora__h2 {
    margin-top: .85rem;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-wrap: balance;
}

.lp-totora__h3 {
    font-family: var(--lp-titulo);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
    font-weight: 800;
    line-height: 1.15;
}

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

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

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

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

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

.lp-totora__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-totora__acciones .lp-totora__boton {
        flex: 1 1 100%;
    }
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Tablas de surf: píldoras de coral con su estela abajo. Al pasar suben un poco
   y la ola del icono corre hacia adelante; al pulsar se hunden en el agua. */
.lp-totora__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .7rem 1.5rem .75rem;
    border: 0;
    border-radius: 999px;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 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-dibujo-trazo: currentColor;
}

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

    .lp-totora__boton:active {
        translate: 0 .18rem;
        box-shadow: 0 .07rem 0 var(--lp-accion-canto), 0 .3rem .5rem -.3rem var(--lp-sombra-honda);
    }

.lp-totora__boton-icono {
    flex: none;
    width: 1.6rem;
    height: .8rem;
    transition: translate .3s ease;
}

.lp-totora__boton:hover .lp-totora__boton-icono {
    translate: .2rem 0;
}

/* De línea: solo el contorno, del color del texto de la superficie. */
.lp-totora__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-totora__boton--linea:hover {
        background: transparent;
        color: var(--lp-sup-acento);
        box-shadow: inset 0 0 0 2px var(--lp-sup-acento);
    }

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

/* Claro: para el mar y el cielo del cierre, que son oscuros en los dos temas. */
.lp-totora__boton--claro {
    background: var(--lp-accion-clara);
    color: var(--lp-accion-clara-tinta);
    box-shadow: 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-totora__boton--claro:hover {
        background: var(--lp-accion-clara-alta);
        color: var(--lp-accion-clara-tinta);
        box-shadow: 0 .35rem 0 var(--lp-accion-clara-canto), 0 1rem 1.3rem -.55rem rgba(0, 0, 0, .55);
    }

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

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

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

/* ═══ Superficies ══════════════════════════════════════════════════════════
   La orilla cambia con el tema y lleva un grano de arena muy suave. */
.lp-totora__orilla-clara,
.lp-totora__orilla-baja {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background-image: radial-gradient(var(--lp-grano) 1px, transparent 1.4px);
    background-size: 22px 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-totora__orilla-clara {
    background-color: var(--lp-arena);
}

.lp-totora__orilla-baja {
    background-color: var(--lp-arena-baja);
}

/* El mar: oscuro en los dos temas, con texto claro. */
.lp-totora__agua {
    position: relative;
    padding-block: clamp(4rem, 3rem + 4vw, 6.5rem);
    background:
        radial-gradient(ellipse 50% 30% at 80% 10%, rgba(255, 220, 160, .08), transparent 70%),
        linear-gradient(var(--lp-mar-alto), var(--lp-mar) 55%, var(--lp-mar-hondo));
    color: var(--lp-mar-tinta);
    --lp-sup-tinta: var(--lp-mar-tinta);
    --lp-sup-suave: var(--lp-mar-suave);
    --lp-sup-linea: rgba(241, 247, 246, .25);
    --lp-sup-acento: var(--lp-mar-acento);
    --lp-foco: var(--lp-mar-acento);
}

/* El borde de espuma: al empezar una sección, la anterior le deja una fila de
   medias lunas de su color, como la orilla que la ola dibuja en la arena. */
.lp-totora__olas-seccion,
.lp-totora__sombrillas-seccion,
.lp-totora__botella-seccion {
    --lp-borde-previo: var(--lp-arena);
}

.lp-totora__agua {
    --lp-borde-previo: var(--lp-arena-baja);
}

    :is(.lp-totora__olas-seccion, .lp-totora__sombrillas-seccion, .lp-totora__botella-seccion, .lp-totora__agua)::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: .8rem;
        background: radial-gradient(circle at 50% 0, var(--lp-borde-previo) .8rem, transparent calc(.8rem + .5px)) 50% 0 / 1.6rem .8rem repeat-x;
        pointer-events: none;
    }

    /* Al salir del mar, la arena de la sección siguiente sube en medias lunas. */
    .lp-totora__agua::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: .8rem;
        background: radial-gradient(circle at 50% 100%, var(--lp-arena) .8rem, transparent calc(.8rem + .5px)) 50% 100% / 1.6rem .8rem repeat-x;
        pointer-events: none;
    }

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-totora__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-totora__franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    min-height: 3.25rem;
    padding-block: .55rem;
}

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

.lp-totora__franja-nombre {
    font-family: var(--lp-titulo);
    font-size: clamp(.92rem, .82rem + .4vw, 1.06rem);
    font-weight: 800;
    line-height: 1.25;
}

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

.lp-totora__franja-sello {
    margin-left: auto;
    padding: .18rem .8rem .22rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: 999px;
    color: var(--lp-uni-oro);
    font-family: var(--lp-titulo);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   La arena con el resplandor del sol detrás de la foto; abajo, el mar. */
.lp-totora__portada {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
    background-image:
        radial-gradient(ellipse 60% 55% at 82% 20%, var(--lp-resplandor), transparent 70%),
        radial-gradient(var(--lp-grano) 1px, transparent 1.4px);
    background-size: auto, 22px 22px;
}

.lp-totora__portada-rejilla {
    display: grid;
    align-items: center;
    gap: clamp(2.25rem, 1rem + 3vw, 3.5rem);
    padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

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

/* Las tablas: datos del ciclo con forma de tabla de surf, la punta redonda y el
   canto de color. */
.lp-totora__ficha {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 34rem;
    margin-top: 2.2rem;
}

.lp-totora__tabla {
    flex: 1 1 9.5rem;
    padding: .55rem 1.25rem .6rem 1.45rem;
    border-radius: 1.8rem;
    background: var(--lp-panel);
    box-shadow: inset .4rem 0 0 var(--lp-tabla-canto, var(--lp-acento)), inset 0 0 0 1px var(--lp-panel-borde), 0 .4rem .8rem -.5rem var(--lp-sombra-honda);
}

    .lp-totora__tabla:nth-child(2) {
        --lp-tabla-canto: var(--lp-celeste);
    }

    .lp-totora__tabla:nth-child(3) {
        --lp-tabla-canto: var(--lp-uni-oro-bajo);
    }

    .lp-totora__tabla:nth-child(4) {
        --lp-tabla-canto: var(--lp-area-per);
    }

    .lp-totora__tabla:nth-child(5) {
        --lp-tabla-canto: var(--lp-area-soc);
    }

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

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

/* La ventana: la foto termina abajo en una fila de espuma, y el sol (o la luna)
   asoma detrás de ella. */
.lp-totora__ventana {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 42rem;
    padding-top: clamp(1.25rem, 3vw, 2.5rem);
}

.lp-totora__sol {
    position: absolute;
    top: 0;
    right: 7%;
    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-totora__ventana-foto {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 1.6rem 1.6rem 0 0;
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 1rem) no-repeat,
        radial-gradient(circle at 50% 0, #000 1rem, transparent calc(1rem + .5px)) 50% 100% / 2rem 1rem repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 1rem) no-repeat,
        radial-gradient(circle at 50% 0, #000 1rem, transparent calc(1rem + .5px)) 50% 100% / 2rem 1rem repeat-x;
}

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

/* El mar de la portada: cresta arriba, una ola clara, el caballito montado en
   ella, la espuma delante y la arena de la sección siguiente al pie. Las capas
   son más anchas que la pantalla para poder correr sin dejar huecos. */
.lp-totora__mar {
    position: relative;
    height: clamp(6rem, 4.5rem + 6vw, 9.5rem);
    overflow: hidden;
    background: linear-gradient(var(--lp-mar-hondo), var(--lp-mar) 60%, var(--lp-mar-alto));
    -webkit-mask:
        radial-gradient(circle at 50% 100%, #000 .9rem, transparent calc(.9rem + .5px)) 50% 0 / 1.8rem .9rem repeat-x,
        linear-gradient(#000 0 0) 0 .9rem / 100% 100% no-repeat;
    mask:
        radial-gradient(circle at 50% 100%, #000 .9rem, transparent calc(.9rem + .5px)) 50% 0 / 1.8rem .9rem repeat-x,
        linear-gradient(#000 0 0) 0 .9rem / 100% 100% no-repeat;
}

    .lp-totora__mar::after {
        content: "";
        position: absolute;
        z-index: 4;
        inset: auto 0 0;
        height: .8rem;
        background: radial-gradient(circle at 50% 100%, var(--lp-arena-baja) .8rem, transparent calc(.8rem + .5px)) 50% 100% / 1.6rem .8rem repeat-x;
    }

.lp-totora__ola-capa {
    position: absolute;
    left: -8rem;
    right: -8rem;
}

.lp-totora__ola-capa--fondo {
    z-index: 1;
    top: 40%;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 100%, var(--lp-mar-claro) 1.1rem, transparent calc(1.1rem + .5px)) 0 0 / 2.2rem 1.1rem repeat-x,
        linear-gradient(var(--lp-mar-claro), var(--lp-mar-claro)) 0 1.1rem / 100% 100% no-repeat;
}

.lp-totora__ola-capa--frente {
    z-index: 3;
    bottom: 0;
    height: 32%;
    background:
        radial-gradient(circle at 50% 100%, var(--lp-espuma) .75rem, transparent calc(.75rem + .5px)) .6rem 0 / 1.5rem .75rem repeat-x,
        linear-gradient(var(--lp-espuma), var(--lp-espuma)) 0 .75rem / 100% 100% no-repeat;
}

.lp-totora__caballito {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 9vw, 8rem);
    bottom: 18%;
    width: clamp(8.5rem, 6rem + 12vw, 15rem);
    height: auto;
    aspect-ratio: 240 / 90;
    transform-origin: 60% 80%;
}

/* ═══ Los seis caballitos ══════════════════════════════════════════════════ */
.lp-totora__grupos {
    --lp-g: var(--lp-acento);
}

.lp-totora__parado--a {
    --lp-g: var(--lp-g-a);
}

.lp-totora__parado--b {
    --lp-g: var(--lp-g-b);
}

.lp-totora__parado--c {
    --lp-g: var(--lp-g-c);
}

.lp-totora__parado--d {
    --lp-g: var(--lp-g-d);
}

.lp-totora__parado--e {
    --lp-g: var(--lp-g-e);
}

.lp-totora__parado--f {
    --lp-g: var(--lp-g-f);
}

/* El varadero: tres por fila en móvil, los seis en fila desde 768 px. */
.lp-totora__varadero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem .75rem;
}

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

.lp-totora__parado {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .8rem;
    padding-top: 1.3rem;
    text-align: center;
    cursor: pointer;
}

/* Cada caballito queda parado en la arena, un poco ladeado, como los dejan los
   pescadores para que se sequen: paja con sus vetas y tres amarras. */
.lp-totora__parado-caballito {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(2.7rem, 2.2rem + 1.6vw, 3.4rem);
    height: clamp(6.2rem, 5rem + 3.5vw, 8rem);
    border-radius: 50% 50% .9rem .9rem / 30% 30% .9rem .9rem;
    background:
        linear-gradient(transparent 0 26%, var(--lp-amarra) 26% calc(26% + 3px), transparent calc(26% + 3px) 72%, var(--lp-amarra) 72% calc(72% + 3px), transparent calc(72% + 3px) 88%, var(--lp-amarra) 88% calc(88% + 3px), transparent calc(88% + 3px)),
        repeating-linear-gradient(90deg, var(--lp-paja-veta) 0 1px, transparent 1px 6px),
        linear-gradient(90deg, var(--lp-paja-baja), var(--lp-paja-alta) 35%, var(--lp-paja) 65%, var(--lp-paja-baja));
    box-shadow: 0 .55rem .5rem -.35rem var(--lp-sombra-honda);
    rotate: var(--lp-giro, 0deg);
    transform-origin: 50% 100%;
    transition: rotate .5s cubic-bezier(.3, 1.5, .5, 1), translate .5s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease;
}

    /* La punta curva del caballito, que asoma por encima. */
    .lp-totora__parado-caballito::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 50%;
        bottom: calc(100% - .55rem);
        width: 46%;
        height: 1.4rem;
        border-radius: 50% 50% 20% 20% / 80% 80% 20% 20%;
        background: linear-gradient(90deg, var(--lp-paja-baja), var(--lp-paja-alta) 45%, var(--lp-paja-baja));
        translate: -50% 0;
        rotate: 14deg;
        transform-origin: 50% 100%;
    }

.lp-totora__parado:nth-child(2) .lp-totora__parado-caballito {
    --lp-giro: -7deg;
}

.lp-totora__parado:nth-child(3) .lp-totora__parado-caballito {
    --lp-giro: 5deg;
}

.lp-totora__parado:nth-child(4) .lp-totora__parado-caballito {
    --lp-giro: -4deg;
}

.lp-totora__parado:nth-child(5) .lp-totora__parado-caballito {
    --lp-giro: 7deg;
}

.lp-totora__parado:nth-child(6) .lp-totora__parado-caballito {
    --lp-giro: -6deg;
}

.lp-totora__parado:nth-child(7) .lp-totora__parado-caballito {
    --lp-giro: 4deg;
}

.lp-totora__parado:hover .lp-totora__parado-caballito {
    rotate: calc(var(--lp-giro, 0deg) / 3);
}

.lp-totora__parado-letra {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lp-g);
    color: var(--lp-g-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--lp-paja-alta);
}

.lp-totora__parado-nombre {
    color: var(--lp-sup-suave);
    font-family: var(--lp-titulo);
    font-size: clamp(.84rem, .8rem + .2vw, .95rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* Elegido: el caballito se endereza, se levanta y se rodea del color del grupo;
   su nombre se subraya con ese color. */
.lp-totora [data-grupo-radio]:checked + .lp-totora__parado-caballito {
    rotate: 0deg;
    translate: 0 -.45rem;
    box-shadow: 0 0 0 3px var(--lp-arena-baja), 0 0 0 6px var(--lp-g), 0 1.1rem .9rem -.45rem var(--lp-sombra-honda);
}

.lp-totora [data-grupo-radio]:focus-visible + .lp-totora__parado-caballito {
    outline: 3px solid var(--lp-foco);
    outline-offset: 9px;
}

.lp-totora [data-grupo-radio]:checked ~ .lp-totora__parado-nombre {
    color: var(--lp-sup-tinta);
    text-decoration-line: underline;
    text-decoration-color: var(--lp-g);
    text-decoration-thickness: 3px;
    text-underline-offset: .3em;
}

/* ═══ La pizarra de la caleta ══════════════════════════════════════════════
   Tiza sobre pizarra verde con marco de madera, igual en los dos temas. */
.lp-totora__pizarra {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding: clamp(1.15rem, .8rem + 2vw, 2.25rem);
    border: clamp(.55rem, .4rem + .6vw, .9rem) solid var(--lp-pizarra-marco);
    border-radius: .6rem;
    background:
        radial-gradient(ellipse 60% 50% at 25% 15%, rgba(255, 255, 255, .07), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 90%, rgba(255, 255, 255, .05), transparent 70%),
        var(--lp-pizarra);
    color: var(--lp-tiza);
    box-shadow: inset 0 0 0 2px var(--lp-pizarra-marco-bajo), inset 0 .35rem 1.2rem rgba(0, 0, 0, .35), 0 1rem 1.6rem -1rem var(--lp-sombra-honda);
    --lp-sup-tinta: var(--lp-tiza);
    --lp-sup-suave: var(--lp-tiza-suave);
    --lp-sup-acento: var(--lp-tiza-amarilla);
    --lp-foco: var(--lp-tiza-amarilla);
}

.lp-totora__pizarra-titulo {
    display: inline-block;
    padding-bottom: .25rem;
    border-bottom: 2px dashed rgba(244, 241, 230, .4);
    color: var(--lp-tiza-amarilla);
    font-family: var(--lp-titulo);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-totora__pizarra-pista {
    margin-top: .55rem;
    color: var(--lp-tiza-suave);
    font-size: .93rem;
}

/* Sin grupo elegido, las 44 en tres columnas que se rellenan de arriba abajo;
   ningún grupo se parte entre dos columnas. */
.lp-totora__pizarra-columnas {
    margin-top: 1.35rem;
    columns: 15rem 3;
    column-gap: 2.25rem;
    column-rule: 1px dashed rgba(244, 241, 230, .16);
}

.lp-totora__pizarra-grupo {
    break-inside: avoid;
    padding-bottom: 1.35rem;
}

.lp-totora__pizarra-grupo--a {
    --lp-tiza-grupo: var(--lp-tiza-a);
}

.lp-totora__pizarra-grupo--b {
    --lp-tiza-grupo: var(--lp-tiza-b);
}

.lp-totora__pizarra-grupo--c {
    --lp-tiza-grupo: var(--lp-tiza-c);
}

.lp-totora__pizarra-grupo--d {
    --lp-tiza-grupo: var(--lp-tiza-d);
}

.lp-totora__pizarra-grupo--e {
    --lp-tiza-grupo: var(--lp-tiza-e);
}

.lp-totora__pizarra-grupo--f {
    --lp-tiza-grupo: var(--lp-tiza-f);
}

.lp-totora__pizarra-encabezado {
    margin-bottom: .45rem;
    color: var(--lp-tiza-grupo, var(--lp-tiza-amarilla));
    font-family: var(--lp-titulo);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
}

.lp-totora__pizarra-lista li {
    position: relative;
    padding-left: 1rem;
    break-inside: avoid;
    font-size: .95rem;
    line-height: 1.45;
    text-shadow: 0 0 1px rgba(244, 241, 230, .35);
}

    .lp-totora__pizarra-lista li + li {
        margin-top: .2rem;
    }

    .lp-totora__pizarra-lista li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .72em;
        width: .5rem;
        height: 2px;
        border-radius: 2px;
        background: var(--lp-tiza-grupo, var(--lp-tiza));
    }

.lp-totora__pizarra-familia {
    color: var(--lp-tiza-suave);
    font-size: .88em;
}

/* Con un grupo elegido quedan solo sus carreras, repartidas en columnas si son
   muchas. */
.lp-totora__grupos:has([data-grupo-radio]:checked) :is(.lp-totora__pizarra-pista, .lp-totora__examen-pista) {
    display: none;
}

.lp-totora__grupos:has([data-grupo-radio]:checked) .lp-totora__pizarra-columnas {
    columns: auto;
}

.lp-totora__grupos:has([data-grupo-radio]:checked) .lp-totora__pizarra-grupo {
    display: none;
    padding-bottom: 0;
}

.lp-totora__grupos:has(#lp-totora-grupo-a:checked) .lp-totora__pizarra-grupo--a,
.lp-totora__grupos:has(#lp-totora-grupo-b:checked) .lp-totora__pizarra-grupo--b,
.lp-totora__grupos:has(#lp-totora-grupo-c:checked) .lp-totora__pizarra-grupo--c,
.lp-totora__grupos:has(#lp-totora-grupo-d:checked) .lp-totora__pizarra-grupo--d,
.lp-totora__grupos:has(#lp-totora-grupo-e:checked) .lp-totora__pizarra-grupo--e,
.lp-totora__grupos:has(#lp-totora-grupo-f:checked) .lp-totora__pizarra-grupo--f {
    display: block;
}

.lp-totora__grupos:has([data-grupo-radio]:checked) .lp-totora__pizarra-lista {
    columns: 14rem 3;
    column-gap: 2.25rem;
}

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

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

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

.lp-totora__grupos:has(#lp-totora-grupo-a:checked) .lp-totora__grupos-cta[data-grupo-cta="a"],
.lp-totora__grupos:has(#lp-totora-grupo-b:checked) .lp-totora__grupos-cta[data-grupo-cta="b"],
.lp-totora__grupos:has(#lp-totora-grupo-c:checked) .lp-totora__grupos-cta[data-grupo-cta="c"],
.lp-totora__grupos:has(#lp-totora-grupo-d:checked) .lp-totora__grupos-cta[data-grupo-cta="d"],
.lp-totora__grupos:has(#lp-totora-grupo-e:checked) .lp-totora__grupos-cta[data-grupo-cta="e"],
.lp-totora__grupos:has(#lp-totora-grupo-f:checked) .lp-totora__grupos-cta[data-grupo-cta="f"] {
    display: inline-flex;
}

/* ═══ El caballito del examen ══════════════════════════════════════════════
   Panel con el texto, el caballito parado y la leyenda. El caballito queda al
   lado de la leyenda en todos los anchos; en pantalla ancha el texto se les
   suma a la izquierda. */
.lp-totora__examen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "texto texto"
        "balsa leyenda"
        "nota nota";
    align-items: center;
    gap: 1.6rem clamp(1rem, .5rem + 2.5vw, 2.5rem);
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: clamp(1.1rem, .7rem + 2vw, 2.25rem);
    border-radius: 1.6rem;
    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: 992px) {
    .lp-totora__examen {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
        grid-template-areas:
            "texto balsa leyenda"
            "nota nota nota";
    }
}

.lp-totora__examen-texto {
    grid-area: texto;
}

.lp-totora__examen-entrada {
    margin-top: .7rem;
    color: var(--lp-sup-suave);
}

.lp-totora__examen-pista {
    margin-top: .85rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-titulo);
    font-weight: 800;
}

.lp-totora__examen-nota {
    grid-area: nota;
    padding-top: 1rem;
    border-top: 1px dashed var(--lp-sup-linea);
    color: var(--lp-sup-suave);
    font-size: .9rem;
}

/* El caballito: un casco de paja que se llena de abajo arriba con un atado por
   área. Cada atado crece en proporción a sus preguntas (flex-grow), así los
   cambios de grupo se animan solos. El número de cada atado lo escribe un
   contador que toma su valor de la misma variable. */
.lp-totora__balsa {
    grid-area: balsa;
    position: relative;
    justify-self: center;
    padding-top: 2.1rem;
}

.lp-totora__casco {
    --lp-n-hab: 30;
    --lp-n-mat: 0;
    --lp-n-com: 0;
    --lp-n-per: 0;
    --lp-n-soc: 0;
    --lp-n-cie: 0;
    --lp-n-suelto: 70;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: clamp(3.3rem, 2.6rem + 3vw, 4.6rem);
    height: clamp(16rem, 13rem + 8vw, 21rem);
    overflow: hidden;
    border-radius: 50% 50% 1.1rem 1.1rem / 3rem 3rem 1.1rem 1.1rem;
    background: var(--lp-paja);
}

    /* El volumen del atado: los costados en sombra y un contorno de paja oscura. */
    .lp-totora__casco::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 0 2px var(--lp-paja-baja), inset .55rem 0 .6rem -.35rem rgba(0, 0, 0, .18), inset -.6rem 0 .7rem -.35rem rgba(0, 0, 0, .28);
        pointer-events: none;
    }

.lp-totora__atado {
    flex: var(--lp-n, 0) 1 0px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 5px), var(--lp-atado, var(--lp-paja));
    color: var(--lp-area-tinta);
    font-family: var(--lp-titulo);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, .32);
    counter-reset: lp-totora-n var(--lp-n, 0);
    transition: flex-grow .8s cubic-bezier(.3, .9, .3, 1);
}

    .lp-totora__atado::after {
        content: counter(lp-totora-n);
    }

.lp-totora__atado--hab {
    --lp-n: var(--lp-n-hab);
    --lp-atado: var(--lp-area-hab);
}

.lp-totora__atado--mat {
    --lp-n: var(--lp-n-mat);
    --lp-atado: var(--lp-area-mat);
}

.lp-totora__atado--com {
    --lp-n: var(--lp-n-com);
    --lp-atado: var(--lp-area-com);
}

.lp-totora__atado--per {
    --lp-n: var(--lp-n-per);
    --lp-atado: var(--lp-area-per);
}

.lp-totora__atado--soc {
    --lp-n: var(--lp-n-soc);
    --lp-atado: var(--lp-area-soc);
}

.lp-totora__atado--cie {
    --lp-n: var(--lp-n-cie);
    --lp-atado: var(--lp-area-cie);
}

/* Las 70 de conocimientos que faltan amarrar: paja suelta, con su propia tinta. */
.lp-totora__atado--suelto {
    --lp-n: var(--lp-n-suelto);
    background:
        repeating-linear-gradient(90deg, var(--lp-paja-veta) 0 1px, transparent 1px 5px),
        linear-gradient(90deg, var(--lp-paja-baja), var(--lp-paja-alta) 40%, var(--lp-paja) 70%, var(--lp-paja-baja));
    color: var(--lp-paja-tinta);
    font-size: 1rem;
    box-shadow: none;
}

/* La punta curva, detrás del casco. */
.lp-totora__balsa-punta {
    position: absolute;
    z-index: 0;
    top: .2rem;
    left: 50%;
    width: 42%;
    height: 2.6rem;
    border-radius: 50% 50% 30% 30% / 75% 75% 25% 25%;
    background:
        repeating-linear-gradient(90deg, var(--lp-paja-veta) 0 1px, transparent 1px 5px),
        linear-gradient(90deg, var(--lp-paja-baja), var(--lp-paja-alta) 45%, var(--lp-paja-baja));
    translate: -40% 0;
    rotate: 16deg;
    transform-origin: 50% 100%;
}

/* Las tres versiones del examen. El grupo A rinde la suya; B, C y D comparten
   otra, y E y F, la tercera. */
.lp-totora__grupos:has(#lp-totora-grupo-a:checked) .lp-totora__casco {
    --lp-n-mat: 16;
    --lp-n-com: 6;
    --lp-n-per: 7;
    --lp-n-soc: 12;
    --lp-n-cie: 29;
    --lp-n-suelto: 0;
}

.lp-totora__grupos:has(:is(#lp-totora-grupo-b, #lp-totora-grupo-c, #lp-totora-grupo-d):checked) .lp-totora__casco {
    --lp-n-mat: 14;
    --lp-n-com: 14;
    --lp-n-per: 8;
    --lp-n-soc: 22;
    --lp-n-cie: 12;
    --lp-n-suelto: 0;
}

.lp-totora__grupos:has(:is(#lp-totora-grupo-e, #lp-totora-grupo-f):checked) .lp-totora__casco {
    --lp-n-mat: 24;
    --lp-n-com: 7;
    --lp-n-per: 6;
    --lp-n-soc: 12;
    --lp-n-cie: 21;
    --lp-n-suelto: 0;
}

/* La leyenda: el color de cada atado, el área y sus preguntas en las tres
   versiones; con un grupo elegido, solo en la suya. */
.lp-totora__leyenda {
    grid-area: leyenda;
    display: grid;
    gap: .7rem;
}

.lp-totora__leyenda-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .8rem;
    padding-left: 1.5rem;
}

    .lp-totora__leyenda-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: .2rem;
        width: .95rem;
        height: .95rem;
        border-radius: .3rem;
        background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 4px), var(--lp-atado);
    }

.lp-totora__leyenda-item--hab {
    --lp-atado: var(--lp-area-hab);
}

.lp-totora__leyenda-item--mat {
    --lp-atado: var(--lp-area-mat);
}

.lp-totora__leyenda-item--com {
    --lp-atado: var(--lp-area-com);
}

.lp-totora__leyenda-item--per {
    --lp-atado: var(--lp-area-per);
}

.lp-totora__leyenda-item--soc {
    --lp-atado: var(--lp-area-soc);
}

.lp-totora__leyenda-item--cie {
    --lp-atado: var(--lp-area-cie);
}

.lp-totora__leyenda-nombre {
    flex: 1 1 9rem;
    color: var(--lp-sup-tinta);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

.lp-totora__leyenda-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.lp-totora__cifra {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .1rem .6rem .12rem;
    border-radius: 999px;
    background: var(--lp-arena);
    color: var(--lp-sup-tinta);
    font-size: .82rem;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde);
}

.lp-totora__cifra-version {
    color: var(--lp-sup-suave);
    font-size: .92em;
}

.lp-totora__cifra-numero {
    font-family: var(--lp-titulo);
    font-weight: 800;
}

.lp-totora__grupos:has(#lp-totora-grupo-a:checked) .lp-totora__cifra:not([data-para="a"]),
.lp-totora__grupos:has(:is(#lp-totora-grupo-b, #lp-totora-grupo-c, #lp-totora-grupo-d):checked) .lp-totora__cifra:not([data-para="bcd"]),
.lp-totora__grupos:has(:is(#lp-totora-grupo-e, #lp-totora-grupo-f):checked) .lp-totora__cifra:not([data-para="ef"]) {
    display: none;
}

.lp-totora__grupos:has([data-grupo-radio]:checked) .lp-totora__cifra {
    font-size: .92rem;
    box-shadow: inset 0 0 0 2px var(--lp-atado);
}

/* ═══ En la orilla ═════════════════════════════════════════════════════════
   Tres fotos de pie sobre la línea del agua, cada una con su reflejo. En
   móvil, la primera a lo ancho y las otras dos debajo, lado a lado; desde
   768 px, las tres en fila. */
.lp-totora__reflejos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

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

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

.lp-totora__reflejo-marco {
    display: block;
}

.lp-totora__reflejo-foto,
.lp-totora__reflejo-copia {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 40%;
}

.lp-totora__reflejo-foto {
    border-radius: 1.1rem 1.1rem 0 0;
    box-shadow: 0 2px 0 rgba(241, 247, 246, .65);
}

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

        .lp-totora__reflejo:first-child :is(.lp-totora__reflejo-foto, .lp-totora__reflejo-copia) {
            aspect-ratio: 4 / 3;
        }
}

/* El reflejo: la misma foto volteada, de la que solo se ve la franja más
   cercana al agua, desvanecida y con las rayas de luz de las ondas. */
.lp-totora__reflejo-agua {
    position: relative;
    display: block;
    aspect-ratio: 5 / 1.5;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 60%, transparent);
    mask-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 60%, transparent);
}

    .lp-totora__reflejo-agua::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(transparent 0 .3rem, rgba(241, 247, 246, .16) .3rem .38rem);
    }

.lp-totora__reflejo-copia {
    scale: 1 -1;
    filter: blur(.6px);
}

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

.lp-totora__reflejo-carrera {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.08rem;
    font-weight: 800;
}

.lp-totora__reflejo-grupo {
    padding: .05rem .6rem .08rem;
    border-radius: 999px;
    color: var(--lp-sup-acento);
    font-family: var(--lp-titulo);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px var(--lp-sup-acento);
}

/* ═══ El calentamiento ═════════════════════════════════════════════════════ */
.lp-totora__calentamiento-rejilla {
    display: grid;
    gap: 1rem clamp(2rem, 4vw, 4rem);
}

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

        .lp-totora__calentamiento-rejilla > .lp-totora__cabecera {
            position: sticky;
            top: 6rem;
        }
}

/* Los aciertos y los fallos los cuenta el CSS: cada radio marcado suma a uno de
   los dos contadores, que la pesca escribe más abajo. */
.lp-totora__prueba {
    display: grid;
    gap: 1rem;
    counter-reset: lp-totora-aciertos lp-totora-fallos;
}

.lp-totora__marca[data-correcta]:checked {
    counter-increment: lp-totora-aciertos;
}

.lp-totora__marca:not([data-correcta]):checked {
    counter-increment: lp-totora-fallos;
}

.lp-totora__pregunta {
    border-radius: 1.3rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 .8rem 1.4rem -1.1rem var(--lp-sombra-honda);
}

/* La leyenda se queda dentro de la tarjeta: flotando deja de dibujarse sobre el
   borde del fieldset y pasa a ocupar su primera fila, con relleno propio. */
.lp-totora__enunciado {
    position: relative;
    float: left;
    width: 100%;
    padding: 1.05rem 1.25rem .85rem 3.55rem;
    color: var(--lp-sup-tinta);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
}

.lp-totora__enunciado-numero {
    position: absolute;
    left: 1.2rem;
    top: .95rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--lp-acento);
    color: var(--lp-arena);
    font-family: var(--lp-titulo);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}

.lp-totora__opciones {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: 0 1.25rem 1.25rem;
}

@media (max-width: 359.98px) {
    .lp-totora__opciones {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Entre 360 y 400 px las dos columnas se estrechan: la píldora recorta su
   relleno para que quepa la palabra más larga de una analogía. */
@media (min-width: 360px) and (max-width: 399.98px) {
    .lp-totora__opcion {
        padding-inline: 2.45rem .7rem;
        font-size: .94rem;
    }

        .lp-totora__opcion::before {
            left: .7rem;
        }

    .lp-totora__marca[data-correcta]:checked + .lp-totora__opcion::after {
        left: 1.18rem;
    }

    .lp-totora__marca:not([data-correcta]):checked + .lp-totora__opcion::after {
        left: 1rem;
    }
}

/* Cada opción es una píldora con su círculo; al marcarla, el círculo se llena
   de verde con un visto o de rojo con una equis. */
.lp-totora__opcion {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: .55rem 1rem .55rem 2.75rem;
    border-radius: 999px;
    background: var(--lp-arena);
    color: var(--lp-sup-tinta);
    font-weight: 600;
    line-height: 1.3;
    box-shadow: inset 0 0 0 2px var(--lp-linea);
    cursor: pointer;
    transition: box-shadow .2s ease, background-color .2s ease;
}

    .lp-totora__opcion::before {
        content: "";
        position: absolute;
        left: .9rem;
        top: 50%;
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2px var(--lp-sup-suave);
        translate: 0 -50%;
    }

    .lp-totora__opcion:hover {
        box-shadow: inset 0 0 0 2px var(--lp-acento);
    }

.lp-totora__marca:focus-visible + .lp-totora__opcion {
    outline: 3px solid var(--lp-foco);
    outline-offset: 2px;
}

.lp-totora__marca[data-correcta]:checked + .lp-totora__opcion {
    background: var(--lp-bien-fondo);
    color: var(--lp-bien-tinta);
    box-shadow: inset 0 0 0 2px var(--lp-bien);
}

    .lp-totora__marca[data-correcta]:checked + .lp-totora__opcion::before {
        background: var(--lp-bien);
        box-shadow: none;
    }

    .lp-totora__marca[data-correcta]:checked + .lp-totora__opcion::after {
        content: "";
        position: absolute;
        left: 1.38rem;
        top: 50%;
        width: .36rem;
        height: .68rem;
        border: solid var(--lp-marca-tinta);
        border-width: 0 .16rem .16rem 0;
        translate: 0 -62%;
        rotate: 45deg;
    }

.lp-totora__marca:not([data-correcta]):checked + .lp-totora__opcion {
    background: var(--lp-mal-fondo);
    color: var(--lp-mal-tinta);
    box-shadow: inset 0 0 0 2px var(--lp-mal);
}

    .lp-totora__marca:not([data-correcta]):checked + .lp-totora__opcion::before {
        background: var(--lp-mal);
        box-shadow: none;
    }

    .lp-totora__marca:not([data-correcta]):checked + .lp-totora__opcion::after {
        content: "";
        position: absolute;
        left: 1.2rem;
        top: 50%;
        width: .7rem;
        height: .7rem;
        background:
            linear-gradient(45deg, transparent calc(50% - .08rem), var(--lp-marca-tinta) calc(50% - .08rem) calc(50% + .08rem), transparent calc(50% + .08rem)),
            linear-gradient(-45deg, transparent calc(50% - .08rem), var(--lp-marca-tinta) calc(50% - .08rem) calc(50% + .08rem), transparent calc(50% + .08rem));
        translate: 0 -50%;
    }

/* Tras un fallo, la correcta se señala con un contorno discontinuo. */
.lp-totora__opciones:has(.lp-totora__marca:not([data-correcta]):checked) .lp-totora__marca[data-correcta] + .lp-totora__opcion {
    outline: 2px dashed var(--lp-bien);
    outline-offset: 3px;
}

/* La explicación aparece en cuanto se marca cualquier opción de la pregunta. */
.lp-totora__explicacion {
    display: none;
    grid-column: 1 / -1;
    margin-top: .35rem;
    padding: .75rem 1rem;
    border-radius: .9rem;
    background: var(--lp-arena-baja);
    color: var(--lp-sup-tinta);
    font-size: .94rem;
    box-shadow: inset .3rem 0 0 var(--lp-celeste);
}

.lp-totora__marca:checked ~ .lp-totora__explicacion {
    display: block;
}

/* La pesca: un pez por pregunta, que se llena al acertarla y se aleja al
   fallarla; debajo, la cuenta de los contadores y el puntaje. */
.lp-totora__pesca {
    padding: 1.15rem 1.25rem 1.3rem;
    border-radius: 1.3rem;
    background: linear-gradient(var(--lp-mar-alto), var(--lp-mar-hondo));
    color: var(--lp-mar-tinta);
    text-align: center;
    --lp-sup-tinta: var(--lp-mar-tinta);
    --lp-sup-suave: var(--lp-mar-suave);
    --lp-sup-acento: var(--lp-mar-acento);
    --lp-foco: var(--lp-mar-acento);
}

.lp-totora__pesca-titulo {
    color: var(--lp-mar-acento);
    font-family: var(--lp-titulo);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-totora__peces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem .7rem;
    margin-top: .7rem;
}

.lp-totora__pescado {
    width: 2.7rem;
    height: 1.35rem;
    opacity: .8;
    --lp-pez: transparent;
    --lp-pez-borde: var(--lp-mar-suave);
    --lp-pez-trazo: 3 2.5;
    transition: opacity .3s ease, scale .4s ease;
}

.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p1"][data-correcta]:checked) .lp-totora__pescado--1,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p2"][data-correcta]:checked) .lp-totora__pescado--2,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p3"][data-correcta]:checked) .lp-totora__pescado--3,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p4"][data-correcta]:checked) .lp-totora__pescado--4,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p5"][data-correcta]:checked) .lp-totora__pescado--5 {
    opacity: 1;
    --lp-pez: var(--lp-pez-vivo);
    --lp-pez-borde: var(--lp-pez-vivo);
    --lp-pez-trazo: none;
    --lp-pez-ojo: var(--lp-mar-hondo);
}

.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p1"]:not([data-correcta]):checked) .lp-totora__pescado--1,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p2"]:not([data-correcta]):checked) .lp-totora__pescado--2,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p3"]:not([data-correcta]):checked) .lp-totora__pescado--3,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p4"]:not([data-correcta]):checked) .lp-totora__pescado--4,
.lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p5"]:not([data-correcta]):checked) .lp-totora__pescado--5 {
    opacity: .3;
    scale: -1 1;
}

.lp-totora__pesca-cuenta {
    margin-top: .65rem;
    color: var(--lp-mar-suave);
    font-size: .92rem;
}

.lp-totora__cuenta-aciertos::after,
.lp-totora__cuenta-fallos::after {
    color: var(--lp-mar-tinta);
    font-family: var(--lp-titulo);
    font-weight: 800;
}

.lp-totora__cuenta-aciertos::after {
    content: counter(lp-totora-aciertos);
}

.lp-totora__cuenta-fallos::after {
    content: counter(lp-totora-fallos);
}

.lp-totora__pesca-puntaje {
    margin-top: .3rem;
    color: var(--lp-mar-tinta);
    font-size: .98rem;
}

.lp-totora__pesca-cifra {
    color: var(--lp-mar-acento);
    font-family: var(--lp-titulo);
    font-size: 1.4rem;
    font-weight: 800;
}

/* ═══ Cuatro olas ══════════════════════════════════════════════════════════
   Las tarjetas cuelgan de una línea ondulada: vertical a la izquierda hasta
   992 px y horizontal por encima desde ahí. */
.lp-totora__olas {
    --lp-r: .4rem;
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding-left: 3.25rem;
}

    .lp-totora__olas::before {
        content: "";
        position: absolute;
        top: 1rem;
        bottom: 1rem;
        left: calc(1.15rem - var(--lp-r));
        width: calc(2 * var(--lp-r));
        color: var(--lp-celeste);
        background:
            radial-gradient(circle at 100% 50%, transparent calc(var(--lp-r) - 2px), currentColor calc(var(--lp-r) - 2px) var(--lp-r), transparent calc(var(--lp-r) + .6px)) 0 0 / var(--lp-r) calc(4 * var(--lp-r)) repeat-y,
            radial-gradient(circle at 0 50%, transparent calc(var(--lp-r) - 2px), currentColor calc(var(--lp-r) - 2px) var(--lp-r), transparent calc(var(--lp-r) + .6px)) var(--lp-r) calc(2 * var(--lp-r)) / var(--lp-r) calc(4 * var(--lp-r)) repeat-y;
    }

@media (min-width: 992px) {
    .lp-totora__olas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-left: 0;
        padding-top: 3.4rem;
    }

        .lp-totora__olas::before {
            top: calc(1.15rem - var(--lp-r));
            bottom: auto;
            left: 12.5%;
            right: 12.5%;
            width: auto;
            height: calc(2 * var(--lp-r));
            background:
                radial-gradient(circle at 50% 100%, transparent calc(var(--lp-r) - 2px), currentColor calc(var(--lp-r) - 2px) var(--lp-r), transparent calc(var(--lp-r) + .6px)) 0 0 / calc(4 * var(--lp-r)) var(--lp-r) repeat-x,
                radial-gradient(circle at 50% 0, transparent calc(var(--lp-r) - 2px), currentColor calc(var(--lp-r) - 2px) var(--lp-r), transparent calc(var(--lp-r) + .6px)) calc(2 * var(--lp-r)) var(--lp-r) / calc(4 * var(--lp-r)) var(--lp-r) repeat-x;
        }
}

.lp-totora__etapa {
    position: relative;
    padding: 1.1rem 1.25rem 1.3rem;
    border-radius: 1.3rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 .8rem 1.4rem -1.1rem var(--lp-sombra-honda);
}

/* La boya de cada ola: un círculo sobre la línea, con un aro del color de la
   sección para cortarla limpio. */
.lp-totora__etapa-marca {
    position: absolute;
    top: .9rem;
    left: -3.25rem;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--lp-celeste);
    color: var(--lp-arena);
    box-shadow: 0 0 0 .3rem var(--lp-arena-baja);
}

@media (min-width: 992px) {
    .lp-totora__etapa-marca {
        top: -3.4rem;
        left: 50%;
        translate: -50% 0;
    }
}

.lp-totora__etapa-numero {
    font-family: var(--lp-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

.lp-totora__etapa-nombre {
    color: var(--lp-sup-acento);
    font-family: var(--lp-titulo);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
}

.lp-totora__etapa-titulo {
    margin-top: .3rem;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.lp-totora__etapa-cuando {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    margin-top: .55rem;
    font-size: .88rem;
}

.lp-totora__etapa-semanas {
    padding: .05rem .55rem .08rem;
    border-radius: 999px;
    background: var(--lp-arena-baja);
    color: var(--lp-sup-tinta);
    font-weight: 700;
}

.lp-totora__etapa-fechas {
    color: var(--lp-sup-suave);
}

.lp-totora__etapa-texto {
    margin-top: .6rem;
    color: var(--lp-sup-suave);
    font-size: .95rem;
}

/* ═══ Escrito en la arena ══════════════════════════════════════════════════
   Una franja de arena mojada con las cifras grabadas: la luz cae en el borde
   inferior del surco y la sombra en el superior. */
.lp-totora__escritos {
    position: relative;
    display: grid;
    gap: 1.6rem 2.25rem;
    overflow: hidden;
    padding: clamp(1.5rem, 1rem + 3vw, 3rem);
    border-radius: 2rem;
    background:
        radial-gradient(rgba(90, 60, 25, .12) 1px, transparent 1.5px) 0 0 / 14px 14px,
        linear-gradient(170deg, var(--lp-mojada), var(--lp-mojada-baja));
    color: var(--lp-grabado);
    box-shadow: inset 0 .4rem 1rem rgba(60, 40, 15, .14);
}

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

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

    /* La ola que repasa la franja al entrar en pantalla; en reposo queda fuera. */
    .lp-totora__escritos::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 0 32%, var(--lp-ola-lavado) 46%, var(--lp-ola-lavado) 52%, transparent 66%);
        translate: -110% 0;
        pointer-events: none;
    }

.lp-totora__escrito {
    display: grid;
    align-content: start;
    gap: .4rem;
    padding-top: .7rem;
    border-top: 2px dashed var(--lp-grabado-sombra);
}

.lp-totora__escrito-cifra {
    color: var(--lp-grabado);
    font-family: var(--lp-titulo);
    font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-shadow: 0 1px 0 var(--lp-grabado-luz), 0 -1px 0 var(--lp-grabado-sombra);
}

.lp-totora__escrito-texto {
    color: var(--lp-grabado-suave);
    font-size: .95rem;
}

/* ═══ Seis sombrillas ══════════════════════════════════════════════════════ */
.lp-totora__sombrillas {
    display: grid;
    gap: 2.25rem 1.5rem;
}

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

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

.lp-totora__sombrilla {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 5.6rem;
}

    /* El palo, de la tela a la sombra. */
    .lp-totora__sombrilla::before {
        content: "";
        position: absolute;
        top: 4.6rem;
        left: 50%;
        width: .28rem;
        height: 1.4rem;
        border-radius: .14rem;
        background: var(--lp-poste);
        translate: -50% 0;
    }

.lp-totora__sombrilla--1 {
    --lp-tela: var(--lp-tela-1);
}

.lp-totora__sombrilla--2 {
    --lp-tela: var(--lp-tela-2);
}

.lp-totora__sombrilla--3 {
    --lp-tela: var(--lp-tela-3);
}

.lp-totora__sombrilla--4 {
    --lp-tela: var(--lp-tela-4);
}

.lp-totora__sombrilla--5 {
    --lp-tela: var(--lp-tela-5);
}

.lp-totora__sombrilla--6 {
    --lp-tela: var(--lp-tela-6);
}

/* La tela: media luna de gajos que salen del palo, con el borde festoneado. */
.lp-totora__sombrilla-tela {
    position: absolute;
    top: 0;
    left: 50%;
    width: 9.6rem;
    height: 4.8rem;
    border-radius: 4.8rem 4.8rem 0 0;
    background: conic-gradient(from -90deg at 50% 100%, var(--lp-tela) 0 30deg, var(--lp-tela-crema) 30deg 60deg, var(--lp-tela) 60deg 90deg, var(--lp-tela-crema) 90deg 120deg, var(--lp-tela) 120deg 150deg, var(--lp-tela-crema) 150deg 180deg, transparent 180deg);
    translate: -50% 0;
    transform-origin: 50% 100%;
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - .5rem) no-repeat,
        radial-gradient(circle at 50% 0, #000 .4rem, transparent calc(.4rem + .5px)) 50% 100% / .8rem .5rem repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - .5rem) no-repeat,
        radial-gradient(circle at 50% 0, #000 .4rem, transparent calc(.4rem + .5px)) 50% 100% / .8rem .5rem repeat-x;
}

.lp-totora__sombrilla-sombra {
    flex: 1;
    padding: 1.25rem 1.25rem 1.35rem;
    border-radius: 1.3rem;
    background: radial-gradient(ellipse 60% 2.4rem at 50% 0, var(--lp-sombra), transparent 75%), var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 .8rem 1.4rem -1.1rem var(--lp-sombra-honda);
    text-align: center;
}

.lp-totora__sombrilla-titulo {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.2;
}

.lp-totora__sombrilla-datos {
    display: grid;
    gap: .6rem;
    margin-top: .8rem;
    text-align: left;
}

    .lp-totora__sombrilla-datos dt {
        color: var(--lp-sup-acento);
        font-family: var(--lp-titulo);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .lp-totora__sombrilla-datos dd {
        color: var(--lp-sup-suave);
        font-size: .93rem;
        line-height: 1.5;
    }

/* ═══ Un día de verano ═════════════════════════════════════════════════════
   Cada tarjeta lleva arriba su pedazo de cielo con el mar al fondo; el sol sube
   de una a otra hasta el mediodía y vuelve a bajar. */
.lp-totora__dia {
    display: grid;
    gap: 1.25rem;
}

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

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

.lp-totora__momento {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "cielo cielo"
        "icono hora"
        "icono titulo"
        "texto texto";
    align-content: start;
    column-gap: .9rem;
    overflow: hidden;
    padding: 0 1.25rem 1.3rem;
    border-radius: 1.3rem;
    background: var(--lp-panel);
    box-shadow: inset 0 0 0 1px var(--lp-panel-borde), 0 .8rem 1.4rem -1.1rem var(--lp-sombra-honda);
}

.lp-totora__momento-cielo {
    grid-area: cielo;
    position: relative;
    height: 4.6rem;
    margin: 0 -1.25rem 1rem;
    overflow: hidden;
    background: linear-gradient(var(--lp-cielo-alto), var(--lp-cielo-bajo));
}

    /* El mar del horizonte tapa la mitad baja del sol cuando está bajo. */
    .lp-totora__momento-cielo::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: auto 0 0;
        height: 26%;
        background: linear-gradient(var(--lp-cielo-mar), var(--lp-cielo-mar-hondo));
    }

.lp-totora__momento-sol {
    position: absolute;
    left: var(--lp-sol-x);
    bottom: var(--lp-sol-y);
    width: 1.9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-sol-claro) 0 40%, var(--lp-sol) 75%);
    box-shadow: 0 0 1rem .25rem var(--lp-sol-halo);
    translate: -50% 50%;
}

.lp-totora__momento--1 {
    --lp-cielo-alto: #2E3F72;
    --lp-cielo-bajo: #F2A07B;
    --lp-cielo-mar: #3D4A78;
    --lp-cielo-mar-hondo: #283561;
    --lp-sol-x: 14%;
    --lp-sol-y: 26%;
}

.lp-totora__momento--2 {
    --lp-cielo-alto: #6FAEDF;
    --lp-cielo-bajo: #FBE2B4;
    --lp-cielo-mar: #3F86A8;
    --lp-cielo-mar-hondo: #2C6C8E;
    --lp-sol-x: 30%;
    --lp-sol-y: 52%;
}

.lp-totora__momento--3 {
    --lp-cielo-alto: #5AA3DD;
    --lp-cielo-bajo: #CDE7F5;
    --lp-cielo-mar: #2F87AE;
    --lp-cielo-mar-hondo: #1F6C92;
    --lp-sol-x: 46%;
    --lp-sol-y: 70%;
}

.lp-totora__momento--4 {
    --lp-cielo-alto: #3D92D6;
    --lp-cielo-bajo: #ABD7F2;
    --lp-cielo-mar: #2681AB;
    --lp-cielo-mar-hondo: #19688E;
    --lp-sol-x: 58%;
    --lp-sol-y: 80%;
}

.lp-totora__momento--5 {
    --lp-cielo-alto: #E59656;
    --lp-cielo-bajo: #FBD6A0;
    --lp-cielo-mar: #5B7E9A;
    --lp-cielo-mar-hondo: #45657F;
    --lp-sol-x: 74%;
    --lp-sol-y: 46%;
}

.lp-totora__momento--6 {
    --lp-cielo-alto: #3B2D63;
    --lp-cielo-bajo: #E0735A;
    --lp-cielo-mar: #4A3B6B;
    --lp-cielo-mar-hondo: #2F2550;
    --lp-sol-x: 88%;
    --lp-sol-y: 26%;
}

.lp-totora__momento-hora {
    grid-area: hora;
    align-self: end;
    color: var(--lp-sup-acento);
    font-family: var(--lp-titulo);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
}

.lp-totora__momento-icono {
    grid-area: icono;
    align-self: center;
    width: 2.75rem;
    height: 2.75rem;
    --lp-dibujo-trazo: var(--lp-celeste);
}

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

.lp-totora__momento-texto {
    grid-area: texto;
    margin-top: .75rem;
    color: var(--lp-sup-suave);
    font-size: .94rem;
}

/* ═══ Un mensaje en una botella ════════════════════════════════════════════ */
.lp-totora__botella-rejilla {
    display: grid;
    gap: 1rem clamp(2rem, 4vw, 4rem);
}

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

/* El botón es la botella varada en la arena: echada mientras está cerrada y
   de pie al abrirse. */
.lp-totora__botella-boton {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-height: 5.5rem;
    padding: .9rem 1.5rem .9rem 1rem;
    border-radius: 999px;
    background: var(--lp-panel);
    color: var(--lp-sup-tinta);
    box-shadow: inset 0 0 0 2px var(--lp-panel-borde), 0 .8rem 1.4rem -1.1rem var(--lp-sombra-honda);
    list-style: none;
    cursor: pointer;
    transition: box-shadow .2s ease;
}

    .lp-totora__botella-boton::-webkit-details-marker {
        display: none;
    }

    .lp-totora__botella-boton:hover {
        box-shadow: inset 0 0 0 2px var(--lp-acento), 0 .8rem 1.4rem -1.1rem var(--lp-sombra-honda);
    }

.lp-totora__botella-dibujo {
    flex: none;
    width: 2.4rem;
    height: 4.5rem;
    margin-inline: .7rem;
    rotate: -62deg;
    transition: rotate .5s cubic-bezier(.3, 1.4, .5, 1);
}

.lp-totora__botella[open] .lp-totora__botella-dibujo {
    rotate: 0deg;
}

.lp-totora__botella-boton:hover .lp-totora__botella-dibujo {
    rotate: -50deg;
}

.lp-totora__botella[open] .lp-totora__botella-boton:hover .lp-totora__botella-dibujo {
    rotate: 6deg;
}

.lp-totora__botella-texto {
    font-family: var(--lp-titulo);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
}

.lp-totora__botella[open] .lp-totora__botella-texto--abrir,
.lp-totora__botella:not([open]) .lp-totora__botella-texto--cerrar {
    display: none;
}

/* La carta: papel claro con renglones, igual en los dos temas. */
/* El margen lateral deja sitio al giro de la hoja dentro de su columna. */
.lp-totora__carta {
    margin: 1.1rem .35rem 0;
    padding: 1.4rem clamp(1.15rem, .9rem + 1.5vw, 1.9rem) 1.6rem;
    border-radius: .45rem;
    background:
        repeating-linear-gradient(transparent 0 1.6rem, var(--lp-papel-linea) 1.6rem calc(1.6rem + 1px)) 0 .9rem,
        var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 1rem 1.6rem -1rem var(--lp-sombra-honda), inset 0 0 0 1px var(--lp-papel-linea);
    rotate: -.5deg;
    --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);
}

.lp-totora__carta-saludo {
    font-family: var(--lp-mano);
    font-size: 1.15rem;
    font-weight: 700;
}

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

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

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

        .lp-totora__carta-lista li::before {
            content: "";
            position: absolute;
            left: .35rem;
            top: .38em;
            width: .38rem;
            height: .7rem;
            border: solid var(--lp-papel-acento);
            border-width: 0 .15rem .15rem 0;
            rotate: 45deg;
        }

.lp-totora__carta-firma {
    margin-top: .9rem;
    font-family: var(--lp-mano);
    font-weight: 700;
    text-align: right;
}

/* ═══ Preguntas desde la orilla ════════════════════════════════════════════ */
.lp-totora__preguntas-rejilla {
    display: grid;
    gap: 1rem clamp(2rem, 4vw, 4rem);
}

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

        .lp-totora__preguntas-rejilla > .lp-totora__cabecera {
            position: sticky;
            top: 6rem;
        }
}

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

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

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

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

    /* El más que gira hasta ser una equis al abrirse. */
    .lp-totora__consulta-pregunta::after {
        content: "";
        flex: none;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        background:
            linear-gradient(currentColor 0 0) 50% 50% / .72rem .14rem no-repeat,
            linear-gradient(currentColor 0 0) 50% 50% / .14rem .72rem no-repeat,
            var(--lp-arena-baja);
        color: var(--lp-sup-acento);
        transition: rotate .3s ease;
    }

.lp-totora__consulta[open] > .lp-totora__consulta-pregunta::after {
    rotate: 45deg;
}

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

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

/* ═══ La vuelta ════════════════════════════════════════════════════════════
   El cielo del atardecer, igual en los dos temas: el texto va en la parte
   oscura y abajo el sol se pone en el mar. */
.lp-totora__cierre {
    position: relative;
    overflow: hidden;
    padding-top: clamp(4rem, 3rem + 4vw, 6.5rem);
    background: linear-gradient(var(--lp-ocaso-alto), var(--lp-ocaso-medio) 50%, var(--lp-ocaso-bajo) 78%, var(--lp-ocaso-horizonte));
    color: var(--lp-ocaso-tinta);
    --lp-sup-tinta: var(--lp-ocaso-tinta);
    --lp-sup-suave: var(--lp-ocaso-suave);
    --lp-sup-acento: var(--lp-sol-claro);
    --lp-foco: var(--lp-sol-claro);
}

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

    .lp-totora__cierre-texto .lp-totora__rotulo {
        justify-content: center;
    }

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

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

.lp-totora__atardecer {
    position: relative;
    height: clamp(9rem, 7rem + 8vw, 14rem);
    margin-top: clamp(1rem, 3vw, 2rem);
}

.lp-totora__atardecer-sol {
    position: absolute;
    left: 50%;
    bottom: 30%;
    width: clamp(7rem, 5rem + 8vw, 11rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-sol-claro) 0 42%, var(--lp-sol) 74%);
    box-shadow: 0 0 4rem 1.5rem var(--lp-sol-halo);
    translate: -50% 42%;
}

/* El mar del ocaso, con el camino de luz que el sol deja en el agua. */
.lp-totora__atardecer-mar {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 32%;
    background:
        radial-gradient(ellipse 18% 70% at 50% 0, rgba(255, 210, 122, .55), transparent 75%),
        repeating-linear-gradient(transparent 0 .45rem, rgba(255, 210, 122, .12) .45rem .55rem),
        linear-gradient(var(--lp-ocaso-mar), var(--lp-ocaso-mar-hondo));
}

.lp-totora__atardecer-caballito {
    position: absolute;
    z-index: 2;
    left: 14%;
    bottom: 22%;
    width: clamp(7rem, 5rem + 9vw, 11rem);
    height: auto;
    aspect-ratio: 240 / 90;
    transform-origin: 60% 80%;
    --lp-caballito-casco: var(--lp-silueta);
    --lp-caballito-linea: rgba(255, 210, 122, .35);
    --lp-caballito-remo: var(--lp-silueta);
}

/* ═══ 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-totora__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.1rem;
    padding: .65rem 1.4rem .7rem;
    border-radius: 999px;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.04rem;
    font-weight: 800;
    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-dibujo-trazo: currentColor;
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s, background-color .2s ease;
}

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

.lp-totora__flotante-icono {
    width: 1.6rem;
    height: .8rem;
}

.lp-totora__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, y si aun
   así el texto se parte, va centrado. */
@media (max-width: 575.98px) {
    .lp-totora__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        padding-inline: 1rem;
        text-align: center;
    }
}

/* Por debajo de 340px el texto ya no cabe en una línea junto a la ola: el
   icono, que es adorno, cede su sitio, para que el botón no doble su alto. */
@media (max-width: 339.98px) {
    .lp-totora__flotante-icono {
        display: none;
    }
}

/* ═══ 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-totora [data-revelar]:nth-child(2),
.lp-totora__escrito:nth-child(2) {
    --lp-orden: 1;
}

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

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

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

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

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

@media (prefers-reduced-motion: no-preference) {
    .lp-totora--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-totora--animada [data-revelar]:not(.lp-totora--visible) {
            opacity: 0;
            translate: 0 1.5rem;
        }

    /* El sol de la portada sube detrás de la foto; el mar entra corriendo y el
       caballito llega montado en la ola y se mece tres veces. */
    .lp-totora--animada .lp-totora__sol {
        animation: lp-totora-amanecer 2.2s cubic-bezier(.25, .8, .3, 1) .4s both;
    }

    .lp-totora--animada .lp-totora__ola-capa--fondo {
        animation: lp-totora-oleaje 3.6s cubic-bezier(.25, .7, .35, 1) both;
    }

    .lp-totora--animada .lp-totora__ola-capa--frente {
        animation: lp-totora-oleaje-frente 3.6s cubic-bezier(.25, .7, .35, 1) both;
    }

    .lp-totora--animada .lp-totora__caballito {
        animation: lp-totora-llegar 2.8s cubic-bezier(.2, .75, .3, 1) .3s both, lp-totora-mecer 1.7s ease-in-out 3.1s 3;
    }

    /* El caballito del examen se amarra de la base a la punta al entrar en
       pantalla. */
    .lp-totora--animada .lp-totora__casco {
        transition: clip-path 1.3s cubic-bezier(.3, .8, .3, 1);
    }

    .lp-totora--animada .lp-totora__balsa:not(.lp-totora--visible) .lp-totora__casco {
        clip-path: inset(100% 0 0 0);
    }

    .lp-totora--animada .lp-totora__balsa-punta {
        transition: opacity .5s ease 1.1s, rotate .7s cubic-bezier(.3, 1.5, .5, 1) 1.1s;
    }

    .lp-totora--animada .lp-totora__balsa:not(.lp-totora--visible) .lp-totora__balsa-punta {
        opacity: 0;
        rotate: -20deg;
    }

    /* Al elegir un grupo, sus carreras se escriben con tiza. */
    .lp-totora__grupos:has([data-grupo-radio]:checked) .lp-totora__pizarra-grupo {
        animation: lp-totora-tiza .6s ease-out;
    }

    /* La ola repasa la arena y detrás quedan grabadas las cifras, una tras otra. */
    .lp-totora--animada .lp-totora__escritos.lp-totora--visible::after {
        animation: lp-totora-lavar 2.4s cubic-bezier(.4, 0, .3, 1) .2s both;
    }

    .lp-totora--animada .lp-totora__escrito-cifra {
        transition: clip-path 1s cubic-bezier(.4, 0, .2, 1);
        transition-delay: calc(.9s + var(--lp-orden, 0) * 140ms);
    }

    .lp-totora--animada .lp-totora__escritos:not(.lp-totora--visible) .lp-totora__escrito-cifra {
        clip-path: inset(0 100% 0 0);
    }

    /* Las sombrillas se abren al llegar. */
    .lp-totora--animada .lp-totora__sombrilla-tela {
        transition: scale .9s cubic-bezier(.3, 1.45, .45, 1), rotate .9s cubic-bezier(.3, 1.45, .45, 1);
        transition-delay: calc(.25s + var(--lp-orden, 0) * 90ms);
    }

    .lp-totora--animada .lp-totora__sombrilla:not(.lp-totora--visible) .lp-totora__sombrilla-tela {
        scale: .2 .85;
        rotate: -10deg;
    }

    /* El sol de cada momento sale del mar hasta su altura. */
    .lp-totora--animada .lp-totora__momento-sol {
        transition: translate 1.4s cubic-bezier(.25, .8, .3, 1);
        transition-delay: calc(.3s + var(--lp-orden, 0) * 90ms);
    }

    .lp-totora--animada .lp-totora__momento:not(.lp-totora--visible) .lp-totora__momento-sol {
        translate: -50% 260%;
    }

    /* La carta se desenrolla al abrir la botella. */
    .lp-totora__botella[open] .lp-totora__carta {
        animation: lp-totora-desenrollar .8s cubic-bezier(.3, .8, .3, 1);
    }

    /* La respuesta de cada pregunta asoma al abrirse, y la explicación del
       calentamiento al marcar. */
    .lp-totora__consulta[open] .lp-totora__consulta-respuesta,
    .lp-totora__marca:checked ~ .lp-totora__explicacion {
        animation: lp-totora-asomar .4s ease-out;
    }

    /* El pez de una pregunta acertada salta. */
    .lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p1"][data-correcta]:checked) .lp-totora__pescado--1,
    .lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p2"][data-correcta]:checked) .lp-totora__pescado--2,
    .lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p3"][data-correcta]:checked) .lp-totora__pescado--3,
    .lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p4"][data-correcta]:checked) .lp-totora__pescado--4,
    .lp-totora__prueba:has(.lp-totora__marca[name="lp-totora-p5"][data-correcta]:checked) .lp-totora__pescado--5 {
        animation: lp-totora-saltar .7s cubic-bezier(.3, 1.4, .5, 1);
    }

    /* El sol del cierre se pone y el caballito vuelve a la orilla. */
    .lp-totora--animada .lp-totora__atardecer-sol {
        transition: translate 3s cubic-bezier(.3, .6, .3, 1) .3s;
    }

    .lp-totora--animada .lp-totora__atardecer:not(.lp-totora--visible) .lp-totora__atardecer-sol {
        translate: -50% -55%;
    }

    .lp-totora--animada .lp-totora__atardecer-caballito {
        transition: translate 3.2s cubic-bezier(.2, .7, .3, 1) .2s;
    }

    .lp-totora--animada .lp-totora__atardecer:not(.lp-totora--visible) .lp-totora__atardecer-caballito {
        translate: -150% 0;
    }

    .lp-totora--animada .lp-totora__atardecer.lp-totora--visible .lp-totora__atardecer-caballito {
        animation: lp-totora-mecer 1.9s ease-in-out 3.3s 2;
    }
}

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

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

@keyframes lp-totora-oleaje {
    from {
        translate: -5rem 0;
    }

    to {
        translate: 0 0;
    }
}

@keyframes lp-totora-oleaje-frente {
    from {
        translate: 6rem 0;
    }

    to {
        translate: 0 0;
    }
}

@keyframes lp-totora-llegar {
    from {
        translate: -150% .6rem;
    }

    to {
        translate: 0 0;
    }
}

@keyframes lp-totora-mecer {
    0%,
    100% {
        rotate: 0deg;
        translate: 0 0;
    }

    30% {
        rotate: -2.5deg;
        translate: 0 -.25rem;
    }

    70% {
        rotate: 2deg;
        translate: 0 .15rem;
    }
}

@keyframes lp-totora-tiza {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes lp-totora-lavar {
    from {
        translate: -110% 0;
    }

    to {
        translate: 110% 0;
    }
}

@keyframes lp-totora-desenrollar {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

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

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

@keyframes lp-totora-saltar {
    0% {
        translate: 0 0;
    }

    40% {
        translate: 0 -.7rem;
        rotate: -12deg;
    }

    100% {
        translate: 0 0;
        rotate: 0deg;
    }
}

/* ═══ 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-totora *,
    .lp-totora *::before,
    .lp-totora *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: tarjetas, opciones y
   caballitos se dibujan con contornos. El caballito del examen, la leyenda, los
   peces y los círculos de acierto y fallo conservan sus colores, porque ahí el
   color es el dato. */
@media (forced-colors: active) {
    .lp-totora {
        --lp-dibujo-trazo: CanvasText;
    }

    .lp-totora__boton,
    .lp-totora__flotante,
    .lp-totora__tabla,
    .lp-totora__parado-caballito,
    .lp-totora__pizarra,
    .lp-totora__examen,
    .lp-totora__pregunta,
    .lp-totora__opcion,
    .lp-totora__explicacion,
    .lp-totora__pesca,
    .lp-totora__etapa,
    .lp-totora__etapa-marca,
    .lp-totora__escritos,
    .lp-totora__sombrilla-sombra,
    .lp-totora__momento,
    .lp-totora__botella-boton,
    .lp-totora__carta,
    .lp-totora__consulta,
    .lp-totora__cifra {
        border: 2px solid CanvasText;
    }

    .lp-totora [data-grupo-radio]:checked + .lp-totora__parado-caballito,
    .lp-totora__marca:checked + .lp-totora__opcion {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .lp-totora__parado-letra,
    .lp-totora__balsa,
    .lp-totora__leyenda-item::before,
    .lp-totora__peces,
    .lp-totora__opcion::before,
    .lp-totora__opcion::after {
        forced-color-adjust: none;
    }
}