/* Landing del Ciclo Anual — Pontificia Universidad Católica del Perú.

   TODO cuelga de .lp-flora. 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 herbario. Cada sección es una lámina numerada. Con el tema claro
   es papel de herbario (crema con retícula, tinta verde oscura, lavados de
   acuarela); con el oscuro es un cianotipo, la técnica que imprimía plantas en
   azul de Prusia: el mismo papel se vuelve azul y los trazos, blancos. Los dos
   temas solo reasignan variables.

   SIETE FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul noche y celeste de la franja superior, la
       identidad común de las landings de la PUCP.
     · LAS SUPERFICIES (--lp-papel-*, --lp-lino-*, --lp-ciano-*, --lp-verde-*):
       papel, lino, cianotipo y vivero. El cianotipo y el vivero son oscuros en los
       dos temas; el papel y el lino cambian con el tema.
     · LA BOTÁNICA (--lp-hoja, --lp-flor, --lp-lavado-*…): tintas y lavados de los
       dibujos. Cada color de un dibujo es una clase lp-flora__t-*; así ningún
       color vive en el marcado.
     · LOS PAPELES CLAROS (--lp-etiqueta-*, --lp-sobre-*, --lp-estaca): etiquetas
       de colección, fichas, sobres de semillas y estacas de vivero. Son objetos de
       papel o plástico pegados en la lámina y se quedan claros en los dos temas,
       con su propia tinta oscura.
     · EL PUNTAJE Y EL TRONCO (--lp-petalo-*, --lp-madera-*): los datos de las dos
       láminas interactivas.
     · EL CAMPUS Y EL CIERRE (--lp-campus-*, --lp-cierre-*).
     · LA ACCIÓN (--lp-accion-*): terracota sobre papel; crema de polen
       (--lp-accion-claro-*) sobre las superficies oscuras.

   Cada superficie fija además unas variables locales (--lp-sup-tinta,
   --lp-sup-suave, --lp-sup-linea, --lp-foco y --lp-dibujo-trazo) para que las
   piezas comunes y los dibujos reutilizados 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-flora {
    /* ── La universidad ────────────────────────────────────────────────── */
    --lp-uni: #0B2A5B;
    --lp-uni-alto: #14407F;
    --lp-uni-celeste: #8FCDF3;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-suave: #CFE3F6;
    /* ── Papel y lino: cambian con el tema ─────────────────────────────── */
    --lp-papel: #F5EFDF;
    --lp-papel-alto: #FCF9F0;
    --lp-papel-borde: #D6C9AB;
    --lp-reticula: rgba(64, 96, 60, .075);
    --lp-lino: #EDE3CB;
    --lp-lino-fibra: rgba(122, 94, 48, .07);
    --lp-tinta: #1F261D;
    --lp-tinta-suave: #4B5446;
    --lp-trazo: #28331F;
    --lp-sombra-papel: rgba(70, 52, 22, .22);
    --lp-opcion-activa: rgba(112, 170, 96, .16);
    /* ── Cianotipo y vivero: oscuros en los dos temas ──────────────────── */
    --lp-ciano: #1B4F8E;
    --lp-ciano-alto: #2B66AC;
    --lp-ciano-hondo: #123C70;
    --lp-ciano-tinta: #FFFFFF;
    --lp-ciano-suave: #D6E7FA;
    --lp-ciano-trazo: #EAF4FF;
    --lp-ciano-linea: rgba(234, 244, 255, .42);
    --lp-ciano-velo: rgba(255, 255, 255, .07);
    --lp-ciano-hoja: #A9E0BF;
    --lp-verde: #1E4B34;
    --lp-verde-alto: #2B6447;
    --lp-verde-tinta: #F6F2E4;
    --lp-verde-suave: #D2E6D6;
    --lp-verde-linea: rgba(246, 242, 228, .3);
    /* ── La botánica ───────────────────────────────────────────────────── */
    --lp-hoja: #3A7A4B;
    --lp-hoja-tinta: #FCF9F0;
    --lp-flor: #CF563F;
    --lp-cielo: #3C74BC;
    --lp-polen: #E3AC34;
    --lp-sello: #B2382C;
    --lp-cinta: rgba(223, 205, 160, .82);
    --lp-lavado-hoja: rgba(112, 170, 96, .32);
    --lp-lavado-flor: rgba(226, 112, 88, .3);
    --lp-lavado-polen: rgba(233, 180, 58, .45);
    --lp-lavado-agua: rgba(70, 128, 196, .26);
    --lp-lavado-tierra: rgba(168, 108, 64, .32);
    --lp-marca: rgba(233, 180, 58, .45);
    --lp-venado: #8A5A34;
    --lp-venado-sombra: #6A4325;
    --lp-venado-cola: #FFFFFF;
    --lp-venado-ojo: #1B1712;
    --lp-ala: rgba(236, 146, 58, .8);
    --lp-clip: #8E969E;
    --lp-foto-marco: #FFFFFF;
    /* ── Papeles claros en los dos temas ───────────────────────────────── */
    --lp-etiqueta: #FFFDF6;
    --lp-etiqueta-tinta: #1E241C;
    --lp-etiqueta-suave: #505A4B;
    --lp-etiqueta-linea: #CFC4A8;
    --lp-etiqueta-enlace: #1D5A9E;
    --lp-ficha-roja: rgba(196, 64, 52, .6);
    --lp-ficha-azul: rgba(64, 116, 188, .16);
    --lp-sobre-1: #F6E4B3;
    --lp-sobre-2: #DCEBCF;
    --lp-sobre-3: #D5E6F5;
    --lp-sobre-4: #F6D8CC;
    --lp-sobre-5: #E6DCF2;
    --lp-sobre-ventana: rgba(255, 255, 255, .62);
    --lp-sobre-linea: rgba(30, 36, 28, .28);
    --lp-estaca: #F8FAF3;
    /* ── El puntaje y el tronco ────────────────────────────────────────── */
    --lp-petalo-colegio: #79AE62;
    --lp-petalo-lectura: #3F77BF;
    --lp-petalo-matematica: #DB694C;
    --lp-disco: #E3AC34;
    --lp-disco-semilla: #6B4A1E;
    --lp-madera: #EBD1A2;
    --lp-madera-b: #E2BF8B;
    --lp-madera-borde: #B98A55;
    --lp-madera-veta: rgba(150, 100, 50, .34);
    --lp-corteza: #6E4526;
    --lp-anillo-activo: #F2A48D;
    /* ── El campus y el cierre ─────────────────────────────────────────── */
    --lp-campus-edificio: rgba(255, 255, 255, .6);
    --lp-campus-ventana: rgba(63, 119, 191, .38);
    --lp-campus-colina: rgba(112, 170, 96, .45);
    --lp-campus-colina-lejos: rgba(112, 170, 96, .24);
    --lp-campus-copa: rgba(78, 142, 72, .5);
    --lp-campus-agua: rgba(70, 128, 196, .36);
    --lp-sol: #E9B53C;
    --lp-luna: #F6EBC8;
    --lp-sol-visible: inline;
    --lp-luna-visible: none;
    --lp-cierre-petalo: #F2C24F;
    --lp-cierre-petalo-dentro: #E07458;
    --lp-cierre-disco: #6B4A1E;
    --lp-cierre-semilla: #F2C24F;
    --lp-luciernaga: #FFF3A6;
    --lp-luciernaga-halo: rgba(255, 236, 140, .6);
    --lp-ciano-lavado: rgba(169, 224, 191, .35);
    --lp-venado-noche: #DCEBFF;
    --lp-venado-noche-sombra: #AFC7E8;
    --lp-venado-noche-ojo: #0E2B55;
    /* ── La acción ─────────────────────────────────────────────────────── */
    --lp-accion: #B4402B;
    --lp-accion-alta: #983322;
    --lp-accion-tinta: #FFFFFF;
    --lp-accion-claro: #FBE3A0;
    --lp-accion-claro-alta: #FFEDBC;
    --lp-accion-claro-tinta: #3A1C06;
    --lp-accion-claro-suave: #5E3A12;
    --lp-sombra-flotante: rgba(0, 0, 0, .45);
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-titular: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
    --lp-texto: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-ficha: "Courier Prime", "Courier New", Courier, "Nimbus Mono PS", ui-monospace, monospace;
    --lp-dibujo-trazo: var(--lp-trazo);
    --lp-dibujo-grosor: 1.6px;
    margin: 0;
    background: var(--lp-papel);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: el herbario se vuelve cianotipo. El atributo lo pone
   Akcadmia en un ancestro, también cuando el tema se hereda del navegador; aquí
   solo se reasignan variables, nunca reglas. */
[data-tema="oscuro"] .lp-flora {
    --lp-uni: #061B3E;
    --lp-uni-alto: #0D2B5E;
    --lp-uni-celeste: #A3D6F7;
    --lp-uni-suave: #D6E7F8;
    --lp-papel: #0E2B55;
    --lp-papel-alto: #133464;
    --lp-papel-borde: #33588C;
    --lp-reticula: rgba(214, 232, 255, .065);
    --lp-lino: #0B2448;
    --lp-lino-fibra: rgba(214, 232, 255, .045);
    --lp-tinta: #EEF5FF;
    --lp-tinta-suave: #C0D3ED;
    --lp-trazo: #E8F2FF;
    --lp-sombra-papel: rgba(0, 4, 16, .5);
    --lp-opcion-activa: rgba(154, 215, 180, .14);
    --lp-ciano: #081B3F;
    --lp-ciano-alto: #0F2C5E;
    --lp-ciano-hondo: #040E26;
    --lp-verde: #0F3021;
    --lp-verde-alto: #174431;
    --lp-hoja: #9BD8B5;
    --lp-hoja-tinta: #0B2140;
    --lp-flor: #F59D83;
    --lp-cielo: #90C4F5;
    --lp-polen: #F2C95E;
    --lp-sello: #FF9282;
    --lp-cinta: rgba(196, 220, 248, .3);
    --lp-lavado-hoja: rgba(150, 214, 180, .2);
    --lp-lavado-flor: rgba(245, 150, 125, .24);
    --lp-lavado-polen: rgba(244, 206, 106, .3);
    --lp-lavado-agua: rgba(140, 194, 245, .22);
    --lp-lavado-tierra: rgba(214, 176, 140, .22);
    --lp-marca: rgba(143, 205, 243, .3);
    --lp-venado: #DCEBFF;
    --lp-venado-sombra: #AFC7E8;
    --lp-venado-cola: #FFFFFF;
    --lp-venado-ojo: #0E2B55;
    --lp-ala: rgba(200, 228, 255, .75);
    --lp-clip: #C9D4DF;
    --lp-foto-marco: #F2F6FC;
    --lp-petalo-colegio: #8ACB93;
    --lp-petalo-lectura: #7EB7F0;
    --lp-petalo-matematica: #F59A7E;
    --lp-disco: #F2C95E;
    --lp-madera: #1C4B86;
    --lp-madera-b: #225592;
    --lp-madera-borde: #8CB7EA;
    --lp-madera-veta: rgba(200, 225, 255, .26);
    --lp-corteza: #06163A;
    --lp-anillo-activo: #F59A7E;
    --lp-campus-edificio: rgba(214, 232, 255, .08);
    --lp-campus-ventana: rgba(255, 226, 140, .55);
    --lp-campus-colina: rgba(120, 190, 150, .22);
    --lp-campus-colina-lejos: rgba(120, 190, 150, .12);
    --lp-campus-copa: rgba(120, 190, 150, .26);
    --lp-campus-agua: rgba(140, 194, 245, .25);
    --lp-sol-visible: none;
    --lp-luna-visible: inline;
    --lp-accion: #F59A7E;
    --lp-accion-alta: #F8B39C;
    --lp-accion-tinta: #2A0D05;
    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-flora, que no ve sus variables. */
body:has(> .lp-flora) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0B2A5B;
}

[data-tema="oscuro"] body:has(> .lp-flora) {
    background-color: #061B3E;
}

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

    body > :has(+ .lp-flora) > :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-flora :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, b, label, legend, summary, button, input, details, fieldset, article, section, form) {
    color: inherit;
    font-family: inherit;
}

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

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

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

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

.lp-flora :where(button) {
    font: inherit;
}

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

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

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

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-flora [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-flora :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-flora :where(a, button, summary, input):focus-visible {
    outline: 3px solid var(--lp-foco, var(--lp-accion));
    outline-offset: 3px;
}

/* Texto solo para lectores de pantalla. También esconde los radios: siguen en el
   orden del teclado y su etiqueta enseña el foco con :has(:focus-visible). */
.lp-flora__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ Dibujos ══════════════════════════════════════════════════════════════
   La hoja de símbolos no ocupa sitio pero sigue en el documento: con display:
   none algunos navegadores dejarían de pintar los <use>. Los trazos no escalan
   con el dibujo (vector-effect) para que un icono de dos centímetros y una planta
   de diez lleven la misma línea de pluma. El color del trazo llega por la
   variable --lp-dibujo-trazo, que sí atraviesa el <use>: cada superficie la
   ajusta y el mismo símbolo se lee sobre papel, cianotipo o vivero. */
.lp-flora__simbolos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lp-flora__t-linea,
.lp-flora__t-fina,
.lp-flora__t-grueso,
.lp-flora__t-emblema-trazo {
    fill: none;
    stroke: var(--lp-dibujo-trazo);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.lp-flora__t-linea {
    stroke-width: var(--lp-dibujo-grosor);
}

.lp-flora__t-fina {
    stroke-width: calc(var(--lp-dibujo-grosor) * .6);
}

.lp-flora__t-grueso {
    stroke-width: calc(var(--lp-dibujo-grosor) * 2.6);
}

.lp-flora__t-lavado {
    fill: var(--lp-lavado-hoja);
}

.lp-flora__t-lavado-flor {
    fill: var(--lp-lavado-flor);
}

.lp-flora__t-lavado-polen {
    fill: var(--lp-lavado-polen);
}

.lp-flora__t-lavado-agua {
    fill: var(--lp-lavado-agua);
}

.lp-flora__t-lavado-tierra {
    fill: var(--lp-lavado-tierra);
}

.lp-flora__t-polen {
    fill: var(--lp-polen);
}

.lp-flora__t-pelaje {
    fill: var(--lp-venado);
}

.lp-flora__t-sombra {
    fill: var(--lp-venado-sombra);
}

.lp-flora__t-cola {
    fill: var(--lp-venado-cola);
    stroke: var(--lp-venado);
    stroke-width: .8;
}

.lp-flora__t-ojo {
    fill: var(--lp-venado-ojo);
}

.lp-flora__t-ala {
    fill: var(--lp-ala);
}

.lp-flora__t-cuerpo {
    fill: var(--lp-dibujo-trazo);
}

.lp-flora__t-emblema-libro {
    fill: var(--lp-uni-alto);
}

.lp-flora__t-emblema-trazo {
    stroke: var(--lp-uni-celeste);
    stroke-width: 1.8px;
}

/* ═══ Superficies ══════════════════════════════════════════════════════════ */
.lp-flora__papel,
.lp-flora__lino,
.lp-flora__cianotipo,
.lp-flora__vivero {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    color: var(--lp-sup-tinta);
}

/* Papel de herbario: la retícula fina de las láminas de montaje. */
.lp-flora__papel {
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-papel-borde);
    --lp-foco: var(--lp-accion);
    --lp-dibujo-trazo: var(--lp-trazo);
    background-color: var(--lp-papel);
    background-image: linear-gradient(var(--lp-reticula) 1px, transparent 1px), linear-gradient(90deg, var(--lp-reticula) 1px, transparent 1px);
    background-size: 2rem 2rem;
    background-position: center top;
}

/* Lino: dos tramas diagonales muy suaves, como la tela de una tapa. */
.lp-flora__lino {
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-papel-borde);
    --lp-foco: var(--lp-accion);
    --lp-dibujo-trazo: var(--lp-trazo);
    background-color: var(--lp-lino);
    background-image: repeating-linear-gradient(45deg, var(--lp-lino-fibra) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, var(--lp-lino-fibra) 0 1px, transparent 1px 6px);
}

.lp-flora__cianotipo {
    --lp-sup-tinta: var(--lp-ciano-tinta);
    --lp-sup-suave: var(--lp-ciano-suave);
    --lp-sup-linea: var(--lp-ciano-linea);
    --lp-foco: var(--lp-accion-claro);
    --lp-dibujo-trazo: var(--lp-ciano-trazo);
    background-color: var(--lp-ciano);
    background-image: radial-gradient(ellipse 70% 60% at 15% 0%, var(--lp-ciano-alto), transparent 70%), radial-gradient(ellipse 60% 55% at 90% 100%, var(--lp-ciano-hondo), transparent 70%);
}

.lp-flora__vivero {
    --lp-sup-tinta: var(--lp-verde-tinta);
    --lp-sup-suave: var(--lp-verde-suave);
    --lp-sup-linea: var(--lp-verde-linea);
    --lp-foco: var(--lp-accion-claro);
    --lp-dibujo-trazo: var(--lp-verde-tinta);
    background-color: var(--lp-verde);
    background-image: radial-gradient(ellipse 65% 60% at 8% 0%, var(--lp-verde-alto), transparent 70%);
}

/* El ancho útil es también el contenedor de las unidades cqi: los titulares se
   limitan a una fracción de él y nunca desbordan una columna estrecha. */
.lp-flora__ancho {
    container-type: inline-size;
    width: 100%;
    max-width: var(--lp-ancho);
    margin-inline: auto;
    padding-inline: 1rem;
}

    .lp-flora__ancho--estrecho {
        max-width: 52rem;
    }

@media (min-width: 768px) {
    .lp-flora__ancho {
        padding-inline: 1.75rem;
    }
}

/* ═══ Textos comunes ═══════════════════════════════════════════════════════ */
.lp-flora__cabecera {
    max-width: 48rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* El antetítulo imita el número de registro de una lámina: «Lámina 3» en una
   caja, como un sello de colección, y el tema al lado. */
.lp-flora__antetitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: .9rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-ficha);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-flora__antetitulo-numero {
    padding: .15rem .55rem;
    border: 1.5px solid currentColor;
    border-radius: .25rem;
    letter-spacing: .08em;
}

.lp-flora__h1,
.lp-flora__h2 {
    font-family: var(--lp-titular);
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.lp-flora__h1 {
    font-size: min(clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem), 13cqi);
    line-height: 1.04;
}

/* La palabra PUCP lleva un lavado de acuarela debajo, como un subrayado de
   pincel. */
.lp-flora__h1-marca {
    padding-inline: .08em;
    background-image: linear-gradient(transparent 58%, var(--lp-marca) 58% 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lp-flora__h2 {
    font-size: min(clamp(1.9rem, 1.15rem + 2.6vw, 3.05rem), 10cqi);
    line-height: 1.1;
}

.lp-flora__h3 {
    font-family: var(--lp-titular);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-flora__bajada {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: 1.08rem;
}

    .lp-flora__bajada--fechas {
        margin-top: .6rem;
        color: var(--lp-sup-tinta);
        font-family: var(--lp-ficha);
        font-size: .95rem;
        font-weight: 700;
    }

.lp-flora__nota {
    max-width: 52rem;
    margin: 2rem auto 0;
    color: var(--lp-sup-suave);
    font-size: .95rem;
    text-align: center;
}

/* ═══ Botones y enlaces ════════════════════════════════════════════════════ */
.lp-flora__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .75rem 1.5rem;
    border: 2px solid var(--lp-accion);
    border-radius: 999px;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 .75rem 1.5rem -1rem var(--lp-sombra-papel);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

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

    .lp-flora__boton:active {
        transform: translateY(1px);
    }

.lp-flora__boton--linea {
    border-color: currentColor;
    background: transparent;
    color: var(--lp-sup-tinta);
    box-shadow: none;
}

    .lp-flora__boton--linea:hover {
        border-color: var(--lp-sup-tinta);
        background: var(--lp-opcion-activa);
        color: var(--lp-sup-tinta);
    }

/* Sobre el cianotipo y el vivero el botón pasa a crema de polen. */
.lp-flora__boton--claro {
    border-color: var(--lp-accion-claro);
    background: var(--lp-accion-claro);
    color: var(--lp-accion-claro-tinta);
    --lp-dibujo-trazo: var(--lp-accion-claro-tinta);
}

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

.lp-flora__boton--grande {
    min-height: 3.5rem;
    padding: .9rem 2.1rem;
    font-size: 1.15rem;
}

/* La semilla de los botones toma el color de su letra. */
.lp-flora__boton-icono {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    --lp-dibujo-trazo: currentColor;
    --lp-dibujo-grosor: 1.4px;
}

.lp-flora__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.lp-flora__accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
}

    .lp-flora__accion--izquierda {
        align-items: flex-start;
        text-align: left;
    }

.lp-flora__accion-nota {
    max-width: 30rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

.lp-flora__enlace {
    color: var(--lp-etiqueta-enlace);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .2em;
}

    .lp-flora__enlace:hover {
        color: var(--lp-etiqueta-tinta);
    }

.lp-flora__boton-texto {
    padding: .35rem .2rem;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .lp-flora__acciones .lp-flora__boton {
        width: 100%;
    }
}

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-flora__franja {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-alto));
    color: var(--lp-uni-tinta);
    border-bottom: 3px solid var(--lp-uni-celeste);
}

.lp-flora__franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding-block: .7rem;
}

.lp-flora__franja-emblema {
    flex: none;
    width: 2rem;
    height: 2.2rem;
}

.lp-flora__franja-nombre {
    font-family: var(--lp-titular);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
}

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

.lp-flora__franja-sello {
    margin-left: auto;
    padding: .2rem .7rem;
    border: 1.5px solid var(--lp-uni-celeste);
    border-radius: 999px;
    color: var(--lp-uni-celeste);
    font-family: var(--lp-ficha);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .lp-flora__franja-fila {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .75rem;
    }

    .lp-flora__franja-emblema {
        grid-row: span 3;
    }

    .lp-flora__franja-sello {
        justify-self: start;
        margin: .3rem 0 0;
    }
}

/* ═══ Lámina 1 · Portada ═══════════════════════════════════════════════════ */
.lp-flora__portada {
    overflow: clip;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
}

.lp-flora__portada-rejilla {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-flora__portada-rejilla {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        gap: 3.5rem;
    }
}

.lp-flora__entrada {
    max-width: 38rem;
    margin-top: 1.25rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
}

/* Tres cifras en fila; en pantallas estrechas se apilan en dos columnas. */
.lp-flora__cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--lp-sup-linea);
}

.lp-flora__cifra {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.lp-flora__cifra-valor {
    color: var(--lp-hoja);
    font-family: var(--lp-titular);
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
}

.lp-flora__cifra-texto {
    color: var(--lp-sup-suave);
    font-size: .88rem;
    line-height: 1.35;
}

@media (max-width: 399.98px) {
    .lp-flora__cifra-texto {
        font-size: .8rem;
    }
}

/* La lámina de montaje: papel más claro, sombra de hoja suelta y la planta
   dibujada. La foto y la etiqueta se superponen desde 576 px; por debajo van en
   el flujo, encima y debajo del dibujo, para que nada salga de la pantalla. */
.lp-flora__lamina {
    position: relative;
    width: min(100%, 30rem);
    margin-inline: auto;
    padding: 1rem;
    border: 1px solid var(--lp-papel-borde);
    background: var(--lp-papel-alto);
    box-shadow: 0 1.75rem 3rem -1.5rem var(--lp-sombra-papel);
}

.lp-flora__lamina-dibujo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lp-flora__traza {
    fill: none;
    stroke: var(--lp-trazo);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-flora__traza--venas {
    stroke-width: .7;
}

.lp-flora__traza--tallo {
    stroke-width: 1.8;
}

.lp-flora__cinta {
    fill: var(--lp-cinta);
}

.lp-flora__lamina-foto {
    position: relative;
    z-index: 1;
    width: 88%;
    margin: .25rem auto 1rem;
    padding: .45rem .45rem 1.2rem;
    background: var(--lp-foto-marco);
    box-shadow: 0 .9rem 1.6rem -1rem var(--lp-sombra-papel);
    transform: rotate(-2deg);
}

/* El clip: dos óvalos de alambre hechos con bordes. */
.lp-flora__clip {
    position: absolute;
    z-index: 2;
    top: -1.1rem;
    left: 1.4rem;
    width: .9rem;
    height: 2.6rem;
    border: 2px solid var(--lp-clip);
    border-radius: 1rem;
}

    .lp-flora__clip::after {
        content: "";
        position: absolute;
        top: .35rem;
        left: .12rem;
        width: .38rem;
        height: 1.7rem;
        border: 2px solid var(--lp-clip);
        border-radius: 1rem;
    }

.lp-flora__lamina .lp-flora__foto {
    width: 100%;
}

/* El sello de tinta: lleva el papel de la lámina de fondo para leerse aunque
   caiga sobre un trazo. En móvil va en el flujo, a la derecha, entre el dibujo y
   la etiqueta, para no tapar la foto. */
.lp-flora__sello {
    position: relative;
    z-index: 2;
    display: table;
    margin: .75rem .4rem 0 auto;
    padding: .3rem .6rem;
    border: 3px double var(--lp-sello);
    border-radius: .3rem;
    background: var(--lp-papel-alto);
    color: var(--lp-sello);
    font-family: var(--lp-ficha);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(6deg);
}

/* La etiqueta de colección: siempre papel claro con tinta oscura. */
.lp-flora__etiqueta {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    padding: .75rem .9rem .85rem;
    border: 1px solid var(--lp-etiqueta-linea);
    background: var(--lp-etiqueta);
    color: var(--lp-etiqueta-tinta);
    font-family: var(--lp-ficha);
    box-shadow: 0 .6rem 1.2rem -.9rem var(--lp-sombra-papel);
    transform: rotate(.6deg);
}

.lp-flora__etiqueta-cabecera {
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--lp-etiqueta-tinta);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-flora__etiqueta-datos {
    display: grid;
    gap: .15rem;
    margin-top: .45rem;
}

.lp-flora__etiqueta-fila {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: .5rem;
    padding-block: .12rem;
    border-bottom: 1px dotted var(--lp-etiqueta-linea);
    font-size: .84rem;
    line-height: 1.4;
}

    .lp-flora__etiqueta-fila dt {
        color: var(--lp-etiqueta-suave);
        font-size: .7rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding-top: .1rem;
    }

    .lp-flora__etiqueta-fila dd {
        font-weight: 700;
    }

.lp-flora__mariposa {
    position: absolute;
    z-index: 3;
    top: 22%;
    right: 12%;
    width: 2.6rem;
    height: 2.5rem;
    pointer-events: none;
    --lp-dibujo-grosor: 1.2px;
}

@media (min-width: 576px) {
    .lp-flora__lamina {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .lp-flora__lamina-foto {
        position: absolute;
        top: 1.5rem;
        left: -.6rem;
        width: 50%;
        margin: 0;
        transform: rotate(-4deg);
    }

    .lp-flora__etiqueta {
        position: absolute;
        right: -.6rem;
        bottom: 1.2rem;
        width: min(64%, 17rem);
        margin: 0;
        transform: rotate(1.5deg);
    }

    .lp-flora__sello {
        position: absolute;
        top: 1rem;
        right: .9rem;
        margin: 0;
        transform: rotate(9deg);
    }
}

@media (min-width: 1200px) {
    .lp-flora__lamina-foto {
        left: -2.2rem;
    }

    .lp-flora__etiqueta {
        right: -1.6rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* El ejemplar se dibuja solo: cada grupo de trazos recorre su longitud con
       stroke-dashoffset (pathLength="1" normaliza cada camino) y los lavados de
       acuarela entran al final. Arranca al cargar porque la portada ya está a la
       vista. */
    .lp-flora--animada .lp-flora__traza {
        stroke-dasharray: 1;
        animation: lp-flora-trazar 1.6s cubic-bezier(.45, .05, .35, 1) both;
    }

    .lp-flora--animada .lp-flora__traza--tallo {
        animation-delay: .25s;
    }

    .lp-flora--animada .lp-flora__traza--helecho,
    .lp-flora--animada .lp-flora__traza--helecho-b {
        animation-delay: .55s;
        animation-duration: 1.9s;
    }

    .lp-flora--animada .lp-flora__traza--hojas {
        animation-delay: .8s;
    }

    .lp-flora--animada .lp-flora__traza--venas {
        animation-delay: 1.5s;
        animation-duration: 1.1s;
    }

    .lp-flora--animada .lp-flora__traza--flor {
        animation-delay: 1.35s;
    }

    .lp-flora--animada .lp-flora__lavados {
        animation: lp-flora-lavar 1.2s ease-out 2s both;
    }

    .lp-flora--animada .lp-flora__cintas {
        animation: lp-flora-lavar .6s ease-out 2.4s both;
    }

    .lp-flora--animada .lp-flora__lamina-foto {
        animation: lp-flora-caer .9s cubic-bezier(.2, .8, .3, 1.15) .3s both;
    }

    .lp-flora--animada .lp-flora__etiqueta {
        animation: lp-flora-caer .9s cubic-bezier(.2, .8, .3, 1.15) .6s both;
    }

    .lp-flora--animada .lp-flora__sello {
        animation: lp-flora-sellar .5s cubic-bezier(.3, 1.4, .5, 1) 2.2s both;
    }

    /* La mariposa entra volando desde la izquierda, aletea unas veces y se posa
       sobre la flor. El aleteo es un aplastamiento horizontal del dibujo entero. */
    .lp-flora--animada .lp-flora__mariposa {
        animation: lp-flora-volar 3.2s cubic-bezier(.3, .6, .35, 1) 1.2s both, lp-flora-aletear .28s ease-in-out 1.2s 11;
    }
}

@keyframes lp-flora-trazar {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lp-flora-lavar {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lp-flora-caer {
    from {
        opacity: 0;
        translate: 0 -1.5rem;
    }

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

@keyframes lp-flora-sellar {
    from {
        opacity: 0;
        scale: 1.6;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes lp-flora-volar {
    0% {
        opacity: 0;
        translate: -11rem 6rem;
        rotate: -25deg;
    }

    15% {
        opacity: 1;
    }

    55% {
        translate: -4rem -1.5rem;
        rotate: 10deg;
    }

    100% {
        opacity: 1;
        translate: 0 0;
        rotate: 6deg;
    }
}

@keyframes lp-flora-aletear {
    50% {
        scale: .35 1;
    }
}

/* ═══ 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. */
@media (prefers-reduced-motion: no-preference) {
    .lp-flora--animada [data-revelar] {
        opacity: 0;
        translate: 0 1.5rem;
        transition: opacity .7s ease-out, translate .7s cubic-bezier(.2, .7, .3, 1);
    }

        .lp-flora--animada [data-revelar].lp-flora--visible {
            opacity: 1;
            translate: 0 0;
        }
}

/* ═══ Lámina 2 · El vivero ═════════════════════════════════════════════════ */
.lp-flora__figuras {
    position: relative;
    display: grid;
    gap: 2rem;
    counter-reset: lp-figura;
}

/* La línea que une las tres figuras: vertical en móvil, horizontal desde 768 px. */
.lp-flora__figuras::before {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 3rem;
    left: 3rem;
    border-left: 2px dashed var(--lp-hoja);
    transform-origin: top;
}

.lp-flora__figura {
    position: relative;
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    grid-template-areas: "placa numero" "placa titulo" "placa texto";
    column-gap: 1.25rem;
    align-content: start;
}

.lp-flora__figura-placa {
    grid-area: placa;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border: 1.5px solid var(--lp-sup-linea);
    border-radius: 50%;
    background: var(--lp-papel-alto);
    box-shadow: 0 .7rem 1.4rem -1rem var(--lp-sombra-papel);
}

.lp-flora__figura-dibujo {
    width: 4.2rem;
    height: 4.2rem;
}

.lp-flora__figura-numero {
    grid-area: numero;
    align-self: end;
    color: var(--lp-sup-suave);
    font-family: var(--lp-ficha);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-flora__figura .lp-flora__h3 {
    grid-area: titulo;
}

.lp-flora__figura-texto {
    grid-area: texto;
    margin-top: .35rem;
    color: var(--lp-sup-suave);
}

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

    .lp-flora__figuras::before {
        top: 4rem;
        bottom: auto;
        left: 16.66%;
        right: 16.66%;
        border-left: 0;
        border-top: 2px dashed var(--lp-hoja);
        transform-origin: left;
    }

    .lp-flora__figura {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "placa" "numero" "titulo" "texto";
        justify-items: center;
        text-align: center;
    }

    .lp-flora__figura-placa {
        width: 8rem;
        height: 8rem;
        margin-bottom: 1rem;
    }

    .lp-flora__figura-dibujo {
        width: 5.4rem;
        height: 5.4rem;
    }

    .lp-flora__figura-texto {
        max-width: 19rem;
    }
}

.lp-flora__nota-directa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    max-width: 52rem;
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.25rem;
    border: 1.5px dashed var(--lp-flor);
    border-radius: .75rem;
    background: var(--lp-papel-alto);
}

.lp-flora__nota-directa-icono {
    width: 2.6rem;
    height: 2.6rem;
}

@media (prefers-reduced-motion: no-preference) {
    /* La línea se dibuja cuando aparece la primera figura; las placas crecen una
       tras otra. */
    .lp-flora--animada .lp-flora__figuras::before {
        scale: 0 1;
        transition: scale 1.2s ease-out .3s;
    }

    @media (max-width: 767.98px) {
        .lp-flora--animada .lp-flora__figuras::before {
            scale: 1 0;
        }
    }

    .lp-flora--animada .lp-flora__figuras:has(.lp-flora--visible)::before {
        scale: 1 1;
    }

    .lp-flora--animada .lp-flora__figura.lp-flora--visible .lp-flora__figura-dibujo {
        animation: lp-flora-germinar .9s cubic-bezier(.3, 1.4, .5, 1) .15s both;
    }

    .lp-flora--animada .lp-flora__figura:nth-child(2) {
        transition-delay: .15s;
    }

    .lp-flora--animada .lp-flora__figura:nth-child(3) {
        transition-delay: .3s;
    }
}

@keyframes lp-flora-germinar {
    from {
        opacity: 0;
        scale: .3;
        translate: 0 30%;
    }

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

/* ═══ Lámina 3 · Clave dicotómica ══════════════════════════════════════════ */
.lp-flora__clave {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .lp-flora__clave {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .lp-flora__hallazgo {
        position: sticky;
        top: 6rem;
    }
}

.lp-flora__pares {
    display: grid;
    gap: 1rem;
}

.lp-flora__par {
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--lp-sup-linea);
    border-radius: .6rem;
    background: var(--lp-papel-alto);
    box-shadow: 0 .6rem 1.2rem -1rem var(--lp-sombra-papel);
}

/* La leyenda flota a todo el ancho: así deja de ser la leyenda «dibujada» sobre
   el borde del fieldset y se queda dentro de la tarjeta. */
.lp-flora__par-titulo {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .65rem;
    margin-bottom: .8rem;
    font-family: var(--lp-titular);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.3;
}

.lp-flora__par-numero {
    padding: .05rem .5rem;
    border: 1.5px solid var(--lp-hoja);
    border-radius: 999px;
    color: var(--lp-hoja);
    font-family: var(--lp-ficha);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Cada opción es una línea de la clave: código, descripción y, al final, adónde
   lleva, unido con una línea de puntos como en los libros de botánica. */
.lp-flora__opcion {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: baseline;
    padding: .75rem .9rem;
    border: 1.5px dashed var(--lp-sup-linea);
    border-radius: .45rem;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

    .lp-flora__par-titulo + .lp-flora__opcion {
        clear: both;
    }

    .lp-flora__opcion + .lp-flora__opcion {
        margin-top: .55rem;
    }

    .lp-flora__opcion:hover {
        border-color: var(--lp-hoja);
    }

    .lp-flora__opcion:has(:checked) {
        border-style: solid;
        border-color: var(--lp-hoja);
        background: var(--lp-opcion-activa);
        box-shadow: inset .3rem 0 0 var(--lp-hoja);
    }

    .lp-flora__opcion:has(:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

.lp-flora__opcion-codigo {
    color: var(--lp-hoja);
    font-family: var(--lp-ficha);
    font-weight: 700;
}

.lp-flora__opcion-destino {
    color: var(--lp-sup-suave);
    font-family: var(--lp-ficha);
    font-size: .74rem;
    white-space: nowrap;
}

    .lp-flora__opcion-destino::before {
        content: "··· ";
    }

.lp-flora__opcion:has(:checked) .lp-flora__opcion-destino {
    color: var(--lp-sup-tinta);
    font-weight: 700;
}

.lp-flora__hallazgo {
    display: grid;
    gap: 1rem;
}

.lp-flora__hallazgo-vacio {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    border: 2px dashed var(--lp-sup-linea);
    border-radius: .75rem;
    color: var(--lp-sup-suave);
}

.lp-flora__hallazgo-lupa {
    width: 3.4rem;
    height: 3.4rem;
}

/* La ficha de determinación: la etiqueta que se pega junto al ejemplar ya
   identificado. Papel claro en los dos temas. */
.lp-flora__resultado {
    position: relative;
    padding: 1.3rem 1.3rem 1.4rem;
    border: 1px solid var(--lp-etiqueta-linea);
    border-top: 4px solid var(--lp-hoja);
    border-radius: .35rem;
    background: var(--lp-etiqueta);
    color: var(--lp-etiqueta-tinta);
    box-shadow: 0 1rem 2rem -1.3rem var(--lp-sombra-papel);
    --lp-foco: var(--lp-accion);
}

.lp-flora__resultado-antetitulo {
    color: var(--lp-etiqueta-suave);
    font-family: var(--lp-ficha);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-flora__resultado-titulo {
    margin-top: .3rem;
    font-family: var(--lp-titular);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-flora__resultado-texto {
    margin-top: .6rem;
}

.lp-flora__resultado-dato {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dotted var(--lp-etiqueta-linea);
    color: var(--lp-etiqueta-suave);
    font-size: .95rem;
}

    .lp-flora__resultado-dato strong {
        color: var(--lp-etiqueta-tinta);
    }

.lp-flora__resultado-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 1.1rem;
}

.lp-flora__reinicio {
    color: var(--lp-sup-suave);
    font-size: .95rem;
}

/* Sin :has() se ven todos los pares y todas las fichas, en orden: la clave se
   lee como en un libro. Con :has() cada par aparece solo en su camino y la ficha
   exige el camino completo. */
@supports selector(:has(a)) {
    .lp-flora__par--2,
    .lp-flora__par--3,
    .lp-flora__par--4,
    .lp-flora__par--5,
    .lp-flora__par--6,
    .lp-flora__resultado,
    .lp-flora__reinicio {
        display: none;
    }

    .lp-flora__clave:has(#lp-flora-par1-a:checked) .lp-flora__par--2,
    .lp-flora__clave:has(#lp-flora-par1-a:checked):has(#lp-flora-par2-b:checked) .lp-flora__par--3,
    .lp-flora__clave:has(#lp-flora-par1-b:checked) .lp-flora__par--4,
    .lp-flora__clave:has(#lp-flora-par1-b:checked):has(#lp-flora-par4-a:checked) .lp-flora__par--5,
    .lp-flora__clave:has(#lp-flora-par1-b:checked):has(#lp-flora-par4-b:checked) .lp-flora__par--6,
    .lp-flora__clave:has(#lp-flora-par1-a:checked, #lp-flora-par1-b:checked) .lp-flora__reinicio {
        display: block;
    }

    .lp-flora__clave:has(#lp-flora-par1-a:checked):has(#lp-flora-par2-a:checked) .lp-flora__resultado--arquitectura,
    .lp-flora__clave:has(#lp-flora-par1-a:checked):has(#lp-flora-par2-b:checked):has(#lp-flora-par3-a:checked) .lp-flora__resultado--arte,
    .lp-flora__clave:has(#lp-flora-par1-a:checked):has(#lp-flora-par2-b:checked):has(#lp-flora-par3-b:checked) .lp-flora__resultado--escenicas,
    .lp-flora__clave:has(#lp-flora-par1-b:checked):has(#lp-flora-par4-a:checked):has(#lp-flora-par5-a:checked) .lp-flora__resultado--educacion,
    .lp-flora__clave:has(#lp-flora-par1-b:checked):has(#lp-flora-par4-a:checked):has(#lp-flora-par5-b:checked) .lp-flora__resultado--gastronomia,
    .lp-flora__clave:has(#lp-flora-par1-b:checked):has(#lp-flora-par4-b:checked):has(#lp-flora-par6-a:checked) .lp-flora__resultado--ciencias,
    .lp-flora__clave:has(#lp-flora-par1-b:checked):has(#lp-flora-par4-b:checked):has(#lp-flora-par6-b:checked) .lp-flora__resultado--letras {
        display: block;
    }

    .lp-flora__clave:is(
        :has(#lp-flora-par1-a:checked):has(#lp-flora-par2-a:checked),
        :has(#lp-flora-par1-a:checked):has(#lp-flora-par2-b:checked):has(#lp-flora-par3-a:checked, #lp-flora-par3-b:checked),
        :has(#lp-flora-par1-b:checked):has(#lp-flora-par4-a:checked):has(#lp-flora-par5-a:checked, #lp-flora-par5-b:checked),
        :has(#lp-flora-par1-b:checked):has(#lp-flora-par4-b:checked):has(#lp-flora-par6-a:checked, #lp-flora-par6-b:checked)
    ) .lp-flora__hallazgo-vacio {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Cada par y cada ficha brotan al aparecer: la animación arranca cada vez que
       pasan de display: none a verse. */
    .lp-flora--animada .lp-flora__par:not(.lp-flora__par--1),
    .lp-flora--animada .lp-flora__resultado {
        animation: lp-flora-brotar .45s cubic-bezier(.2, .8, .3, 1.1) both;
    }

    .lp-flora--animada .lp-flora__resultado {
        transform-origin: top center;
    }
}

@keyframes lp-flora-brotar {
    from {
        opacity: 0;
        translate: 0 -.6rem;
        scale: .97;
    }

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

/* ═══ Lámina 4 · El árbol de carreras ══════════════════════════════════════ */
.lp-flora__pestanas {
    display: grid;
    gap: .65rem;
    margin-bottom: 2rem;
}

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

.lp-flora__pestana {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .8rem;
    align-items: center;
    padding: .8rem 1rem;
    border: 1.5px solid var(--lp-ciano-linea);
    border-radius: .8rem;
    background: var(--lp-ciano-velo);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .lp-flora__pestana:hover {
        border-color: var(--lp-ciano-trazo);
    }

    .lp-flora__pestana:has(:checked) {
        border-color: var(--lp-accion-claro);
        background: var(--lp-accion-claro);
        color: var(--lp-accion-claro-tinta);
        --lp-dibujo-trazo: var(--lp-accion-claro-tinta);
    }

    .lp-flora__pestana:has(:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 3px;
    }

.lp-flora__pestana-icono {
    grid-row: span 2;
    width: 2.4rem;
    height: 2.4rem;
}

.lp-flora__pestana-nombre {
    font-weight: 700;
    line-height: 1.25;
}

.lp-flora__pestana-cuenta {
    color: var(--lp-ciano-suave);
    font-family: var(--lp-ficha);
    font-size: .8rem;
}

.lp-flora__pestana:has(:checked) .lp-flora__pestana-cuenta {
    color: var(--lp-accion-claro-suave);
}

/* La raíz del árbol: la unidad por la que se entra. */
.lp-flora__raiz {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem 1rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.75rem;
    padding: .8rem 1.2rem;
    border: 1.5px solid var(--lp-ciano-trazo);
    border-radius: .6rem;
    background: var(--lp-ciano-velo);
}

.lp-flora__raiz-nombre {
    font-family: var(--lp-titular);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-flora__raiz-nota {
    color: var(--lp-ciano-suave);
    font-family: var(--lp-ficha);
    font-size: .82rem;
}

/* Cada facultad es una rama: un tallo vertical (::before), una yema arriba y una
   ramita con su hoja por cada carrera. Así cada rama se dibuja sola y el árbol
   aguanta cualquier número de columnas. */
.lp-flora__ramas {
    display: grid;
    gap: 1.75rem 2rem;
}

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

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

.lp-flora__rama {
    position: relative;
    padding-left: 1.6rem;
}

    .lp-flora__rama::before {
        content: "";
        position: absolute;
        top: .5rem;
        bottom: .7rem;
        left: .45rem;
        border-left: 2px solid var(--lp-ciano-trazo);
        border-radius: 2px;
        transform-origin: top;
    }

.lp-flora__rama--ancha {
    grid-column: 1 / -1;
}

.lp-flora__rama-nombre {
    position: relative;
    margin-bottom: .5rem;
    font-family: var(--lp-titular);
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.3;
}

    .lp-flora__rama-nombre::before {
        content: "";
        position: absolute;
        top: .15rem;
        left: -1.55rem;
        width: .95rem;
        height: .95rem;
        border-radius: 50%;
        background: var(--lp-ciano-hoja);
        box-shadow: 0 0 0 3px var(--lp-ciano);
    }

.lp-flora__rama--ancha .lp-flora__hojas {
    columns: 1;
    column-gap: 2rem;
}

@media (min-width: 576px) {
    .lp-flora__rama--ancha .lp-flora__hojas {
        columns: 2;
    }
}

@media (min-width: 992px) {
    .lp-flora__rama--ancha .lp-flora__hojas {
        columns: 3;
    }
}

.lp-flora__hoja {
    position: relative;
    padding: .2rem 0 .2rem 1.55rem;
    break-inside: avoid;
    line-height: 1.4;
}

    /* La ramita que sale del tallo y la hoja, hecha con dos radios de borde. */
    .lp-flora__hoja::before {
        content: "";
        position: absolute;
        top: .9rem;
        left: -1.15rem;
        width: 1.3rem;
        border-top: 1.5px solid var(--lp-ciano-trazo);
    }

    .lp-flora__hoja::after {
        content: "";
        position: absolute;
        top: .45rem;
        left: .1rem;
        width: 1.05rem;
        height: .62rem;
        border-radius: 0 100% 0 100%;
        background: var(--lp-ciano-hoja);
        rotate: -18deg;
    }

/* En las columnas de la rama ancha solo la primera toca el tallo: las demás
   llevan sus hojas sin ramita. */
@media (min-width: 576px) {
    .lp-flora__rama--ancha .lp-flora__hoja::before {
        display: none;
    }
}

@supports selector(:has(a)) {
    .lp-flora__panel {
        display: none;
    }

    .lp-flora__arbol:has(#lp-flora-rama-ciencias:checked) .lp-flora__panel--ciencias,
    .lp-flora__arbol:has(#lp-flora-rama-letras:checked) .lp-flora__panel--letras,
    .lp-flora__arbol:has(#lp-flora-rama-directo:checked) .lp-flora__panel--directo {
        display: block;
    }
}

/* Sin :has() los tres árboles se leen seguidos. */
@supports not selector(:has(a)) {
    .lp-flora__panel + .lp-flora__panel {
        margin-top: 2.5rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Al cambiar de pestaña el panel pasa de display: none a verse y las
       animaciones vuelven a empezar: los tallos crecen y las hojas brotan en
       cascada. */
    .lp-flora--animada .lp-flora__rama::before {
        animation: lp-flora-crecer .7s ease-out both;
    }

    .lp-flora--animada .lp-flora__hoja::after {
        animation: lp-flora-hojear .5s cubic-bezier(.3, 1.5, .5, 1) both;
    }

    .lp-flora--animada .lp-flora__hoja:nth-child(2)::after { animation-delay: .05s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(3)::after { animation-delay: .1s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(4)::after { animation-delay: .15s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(5)::after { animation-delay: .2s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(6)::after { animation-delay: .25s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(7)::after { animation-delay: .3s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(8)::after { animation-delay: .35s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(9)::after { animation-delay: .4s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(10)::after { animation-delay: .45s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(11)::after { animation-delay: .5s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(12)::after { animation-delay: .55s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(13)::after { animation-delay: .6s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(14)::after { animation-delay: .65s; }
    .lp-flora--animada .lp-flora__hoja:nth-child(15)::after { animation-delay: .7s; }

    .lp-flora--animada .lp-flora__raiz {
        animation: lp-flora-brotar .45s ease-out both;
    }
}

@keyframes lp-flora-crecer {
    from {
        scale: 1 0;
    }

    to {
        scale: 1 1;
    }
}

@keyframes lp-flora-hojear {
    from {
        scale: 0;
        opacity: 0;
    }

    to {
        scale: 1;
        opacity: 1;
    }
}

/* ═══ Lámina 5 · La flor del puntaje ═══════════════════════════════════════ */
.lp-flora__puntaje {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-flora__puntaje {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "flor interruptor" "flor leyenda";
        column-gap: 3rem;
    }

    .lp-flora__interruptor {
        grid-area: interruptor;
        align-self: end;
    }

    .lp-flora__flor {
        grid-area: flor;
    }

    .lp-flora__leyenda {
        grid-area: leyenda;
        align-self: start;
    }
}

.lp-flora__interruptor {
    display: grid;
    gap: .6rem;
}

.lp-flora__interruptor-titulo {
    margin-bottom: .1rem;
    font-family: var(--lp-titular);
    font-size: 1.2rem;
    font-weight: 700;
}

.lp-flora__interruptor-opcion {
    position: relative;
    padding: .75rem 1rem .75rem 2.9rem;
    border: 1.5px solid var(--lp-sup-linea);
    border-radius: .7rem;
    background: var(--lp-papel-alto);
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

    /* El círculo de la opción, relleno de verde cuando está marcada. */
    .lp-flora__interruptor-opcion::before {
        content: "";
        position: absolute;
        top: .8rem;
        left: 1rem;
        width: 1.15rem;
        height: 1.15rem;
        border: 2px solid var(--lp-hoja);
        border-radius: 50%;
        background: transparent;
        box-shadow: inset 0 0 0 3px var(--lp-papel-alto);
        transition: background-color .2s ease;
    }

    .lp-flora__interruptor-opcion:hover {
        border-color: var(--lp-hoja);
    }

    .lp-flora__interruptor-opcion:has(:checked) {
        border-color: var(--lp-hoja);
        background: var(--lp-opcion-activa);
    }

        .lp-flora__interruptor-opcion:has(:checked)::before {
            background: var(--lp-hoja);
        }

    .lp-flora__interruptor-opcion:has(:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

.lp-flora__flor {
    position: relative;
    width: min(100%, 25rem);
    margin-inline: auto;
}

.lp-flora__flor-dibujo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lp-flora__petalo {
    fill: var(--lp-petalo-matematica);
    stroke: var(--lp-trazo);
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill .5s ease;
}

    .lp-flora__petalo:nth-child(-n+5) {
        fill: var(--lp-petalo-colegio);
    }

    .lp-flora__petalo:nth-child(n+6):nth-child(-n+13) {
        fill: var(--lp-petalo-lectura);
    }

.lp-flora__disco {
    fill: var(--lp-disco);
    stroke: var(--lp-trazo);
    stroke-width: 1.2;
}

.lp-flora__semillas {
    fill: var(--lp-disco-semilla);
}

/* En el centro limpio del disco va la cifra total. Letra fija sobre el disco de
   polen, que es claro en los dos temas. */
.lp-flora__flor-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    width: 22%;
    translate: -50% -50%;
    color: var(--lp-accion-claro-tinta);
    line-height: 1.05;
    text-align: center;
}

.lp-flora__flor-centro-dato {
    font-family: var(--lp-titular);
    font-size: clamp(.95rem, .7rem + 1.1vw, 1.25rem);
    font-weight: 700;
}

.lp-flora__flor-centro-texto {
    font-family: var(--lp-ficha);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lp-flora__leyenda {
    display: grid;
    gap: .6rem;
}

.lp-flora__leyenda-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icono nombre" "icono dato";
    column-gap: .9rem;
    align-items: center;
    padding: .7rem .9rem;
    border: 1px solid var(--lp-sup-linea);
    border-left: .55rem solid var(--lp-muestra, var(--lp-sup-linea));
    border-radius: .5rem;
    background: var(--lp-papel-alto);
}

.lp-flora__leyenda-fila--lectura {
    --lp-muestra: var(--lp-petalo-lectura);
}

.lp-flora__leyenda-fila--matematica {
    --lp-muestra: var(--lp-petalo-matematica);
}

.lp-flora__leyenda-fila--colegio {
    --lp-muestra: var(--lp-petalo-colegio);
}

.lp-flora__leyenda-icono {
    grid-area: icono;
    width: 2.3rem;
    height: 2.3rem;
}

.lp-flora__leyenda-nombre {
    grid-area: nombre;
    font-weight: 700;
    line-height: 1.3;
}

.lp-flora__leyenda-dato {
    grid-area: dato;
    color: var(--lp-sup-suave);
    font-size: .95rem;
    line-height: 1.4;
}

.lp-flora__leyenda [data-en-unidad="demas"] {
    display: none;
}

@supports selector(:has(a)) {
    .lp-flora__puntaje:has(#lp-flora-flor-demas:checked) [data-en-unidad="ciencias"] {
        display: none;
    }

    .lp-flora__puntaje:has(#lp-flora-flor-demas:checked) [data-en-unidad="demas"] {
        display: inline;
    }

    /* Con las demás unidades, los pétalos 14 y 15 pasan de matemática a lectura:
       40 % y 40 % en vez de 32 % y 48 %. */
    .lp-flora__puntaje:has(#lp-flora-flor-demas:checked) .lp-flora__petalo:nth-child(n+14):nth-child(-n+15) {
        fill: var(--lp-petalo-lectura);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Los pétalos se abren desde el disco uno tras otro, en el sentido del reloj,
       cuando la flor entra en pantalla. */
    .lp-flora--animada .lp-flora__petalo {
        transform-box: view-box;
        transform-origin: 150px 150px;
        scale: .2;
        opacity: 0;
        transition: fill .5s ease, scale .6s cubic-bezier(.3, 1.4, .5, 1), opacity .4s ease;
    }

    .lp-flora--animada .lp-flora__flor.lp-flora--visible .lp-flora__petalo {
        scale: 1;
        opacity: 1;
    }

    .lp-flora--animada .lp-flora__petalo:nth-child(2) { transition-delay: 0s, .04s, .04s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(3) { transition-delay: 0s, .08s, .08s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(4) { transition-delay: 0s, .12s, .12s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(5) { transition-delay: 0s, .16s, .16s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(6) { transition-delay: 0s, .2s, .2s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(7) { transition-delay: 0s, .24s, .24s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(8) { transition-delay: 0s, .28s, .28s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(9) { transition-delay: 0s, .32s, .32s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(10) { transition-delay: 0s, .36s, .36s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(11) { transition-delay: 0s, .4s, .4s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(12) { transition-delay: 0s, .44s, .44s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(13) { transition-delay: 0s, .48s, .48s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(14) { transition-delay: 0s, .52s, .52s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(15) { transition-delay: 0s, .56s, .56s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(16) { transition-delay: 0s, .6s, .6s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(17) { transition-delay: 0s, .64s, .64s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(18) { transition-delay: 0s, .68s, .68s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(19) { transition-delay: 0s, .72s, .72s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(20) { transition-delay: 0s, .76s, .76s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(21) { transition-delay: 0s, .8s, .8s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(22) { transition-delay: 0s, .84s, .84s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(23) { transition-delay: 0s, .88s, .88s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(24) { transition-delay: 0s, .92s, .92s; }
    .lp-flora--animada .lp-flora__petalo:nth-child(25) { transition-delay: 0s, .96s, .96s; }

    /* Los dos pétalos que cambian de curso se sacuden al cambiar: un nombre de
       animación por estado hace que se repita en cada cambio. */
    .lp-flora--animada .lp-flora__flor.lp-flora--visible .lp-flora__petalo:nth-child(n+14):nth-child(-n+15) {
        animation: lp-flora-vaiven-a .6s ease-in-out 1.1s;
    }

    .lp-flora--animada .lp-flora__puntaje:has(#lp-flora-flor-demas:checked) .lp-flora__flor.lp-flora--visible .lp-flora__petalo:nth-child(n+14):nth-child(-n+15) {
        animation: lp-flora-vaiven-b .6s ease-in-out;
    }
}

@keyframes lp-flora-vaiven-a {
    30% {
        rotate: 4deg;
    }

    70% {
        rotate: -3deg;
    }
}

@keyframes lp-flora-vaiven-b {
    30% {
        rotate: -4deg;
    }

    70% {
        rotate: 3deg;
    }
}

/* ═══ Lámina 6 · Los anillos del ciclo ═════════════════════════════════════ */
.lp-flora__anillos {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-flora__anillos {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "etapas etapas" "tronco fichas";
        column-gap: 3rem;
    }

    .lp-flora__etapas {
        grid-area: etapas;
    }

    .lp-flora__tronco {
        grid-area: tronco;
    }

    .lp-flora__fichas {
        grid-area: fichas;
    }
}

/* Cuatro botones en una cápsula: caben en 320 px porque el nombre es corto. */
.lp-flora__etapas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
    width: min(100%, 38rem);
    margin-inline: auto;
    padding: .3rem;
    border: 1px solid var(--lp-sup-linea);
    border-radius: 999px;
    background: var(--lp-papel-alto);
}

.lp-flora__etapa-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.75rem;
    padding: .4rem .3rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

    .lp-flora__etapa-boton:hover {
        background: var(--lp-opcion-activa);
    }

    .lp-flora__etapa-boton:has(:checked) {
        background: var(--lp-hoja);
        color: var(--lp-hoja-tinta);
    }

    .lp-flora__etapa-boton:has(:focus-visible) {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

.lp-flora__etapa-numero {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-family: var(--lp-ficha);
    font-size: .72rem;
}

@media (max-width: 379.98px) {
    .lp-flora__etapa-numero {
        display: none;
    }
}

.lp-flora__tronco {
    width: min(100%, 24rem);
    margin-inline: auto;
}

.lp-flora__tronco-dibujo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lp-flora__corteza {
    fill: var(--lp-corteza);
    stroke: var(--lp-trazo);
    stroke-width: 1.4;
}

.lp-flora__banda {
    fill: var(--lp-madera);
    stroke: var(--lp-madera-borde);
    stroke-width: 1.6;
    transition: fill .45s ease;
}

.lp-flora__banda--2,
.lp-flora__banda--4 {
    fill: var(--lp-madera-b);
}

.lp-flora__vetas {
    fill: none;
    stroke: var(--lp-madera-veta);
    stroke-width: .8;
}

.lp-flora__grieta {
    fill: none;
    stroke: var(--lp-corteza);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-flora__medula {
    fill: var(--lp-corteza);
}

.lp-flora__anillos:has(#lp-flora-etapa-1:checked) .lp-flora__banda--1,
.lp-flora__anillos:has(#lp-flora-etapa-2:checked) .lp-flora__banda--2,
.lp-flora__anillos:has(#lp-flora-etapa-3:checked) .lp-flora__banda--3,
.lp-flora__anillos:has(#lp-flora-etapa-4:checked) .lp-flora__banda--4 {
    fill: var(--lp-anillo-activo);
}

/* La ficha de cada etapa es una ficha de biblioteca: papel claro, renglón rojo
   arriba y rayado azul suave. */
.lp-flora__ficha {
    position: relative;
    padding: 1.3rem 1.3rem 1.4rem;
    border: 1px solid var(--lp-etiqueta-linea);
    border-radius: .35rem;
    background-color: var(--lp-etiqueta);
    background-image: linear-gradient(var(--lp-ficha-roja), var(--lp-ficha-roja)), repeating-linear-gradient(transparent 0 1.7rem, var(--lp-ficha-azul) 1.7rem calc(1.7rem + 1px));
    background-size: 100% 1px, 100% 100%;
    background-position: 0 3.1rem, 0 3.2rem;
    background-repeat: no-repeat, repeat;
    color: var(--lp-etiqueta-tinta);
    box-shadow: 0 1rem 2rem -1.3rem var(--lp-sombra-papel);
}

.lp-flora__ficha-antetitulo {
    color: var(--lp-etiqueta-suave);
    font-family: var(--lp-ficha);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-flora__ficha-titulo {
    margin-top: 1.2rem;
    font-family: var(--lp-titular);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-flora__ficha-cuando {
    display: grid;
    gap: .1rem;
    margin-top: .6rem;
    font-family: var(--lp-ficha);
    font-size: .9rem;
}

.lp-flora__ficha-semanas {
    font-weight: 700;
}

.lp-flora__ficha-texto {
    margin-top: .75rem;
    line-height: 1.7rem;
}

@supports selector(:has(a)) {
    .lp-flora__ficha {
        display: none;
    }

    .lp-flora__anillos:has(#lp-flora-etapa-1:checked) .lp-flora__ficha[data-etapa="1"],
    .lp-flora__anillos:has(#lp-flora-etapa-2:checked) .lp-flora__ficha[data-etapa="2"],
    .lp-flora__anillos:has(#lp-flora-etapa-3:checked) .lp-flora__ficha[data-etapa="3"],
    .lp-flora__anillos:has(#lp-flora-etapa-4:checked) .lp-flora__ficha[data-etapa="4"] {
        display: block;
    }
}

.lp-flora__ficha + .lp-flora__ficha {
    margin-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    /* El tronco crece de la médula a la corteza al aparecer; después, el anillo
       elegido late una vez y la ficha se desliza. */
    .lp-flora--animada .lp-flora__bandas,
    .lp-flora--animada .lp-flora__vetas,
    .lp-flora--animada .lp-flora__corteza {
        transform-box: view-box;
        transform-origin: 180px 180px;
        scale: .15;
        opacity: 0;
        transition: scale 1.1s cubic-bezier(.2, .8, .3, 1), opacity .6s ease;
    }

    .lp-flora--animada .lp-flora__corteza {
        transition-delay: .25s;
    }

    .lp-flora--animada .lp-flora__tronco.lp-flora--visible :is(.lp-flora__bandas, .lp-flora__vetas, .lp-flora__corteza) {
        scale: 1;
        opacity: 1;
    }

    .lp-flora--animada .lp-flora__grieta {
        stroke-dasharray: 80;
        stroke-dashoffset: 80;
        transition: stroke-dashoffset .8s ease-out 1.1s;
    }

    .lp-flora--animada .lp-flora__tronco.lp-flora--visible .lp-flora__grieta {
        stroke-dashoffset: 0;
    }

    .lp-flora--animada .lp-flora__ficha {
        animation: lp-flora-deslizar .45s ease-out both;
    }
}

@keyframes lp-flora-deslizar {
    from {
        opacity: 0;
        translate: 1rem 0;
    }

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

/* ═══ Lámina 7 · Sobres de semillas ════════════════════════════════════════ */
/* La sombra va en la lista y no en cada sobre: el borde dentado es una máscara,
   que recortaría una sombra propia. drop-shadow sigue la silueta dentada.
   Flex y no rejilla: la última fila, si queda incompleta, se centra. */
.lp-flora__sobres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 1.25rem;
    filter: drop-shadow(0 .8rem .9rem var(--lp-sombra-papel));
}

.lp-flora__sobre {
    --lp-diente: .55rem;
    --lp-dibujo-trazo: var(--lp-etiqueta-tinta);
    --lp-foco: var(--lp-accion);
    position: relative;
    display: flex;
    flex: 1 1 13rem;
    flex-direction: column;
    max-width: 17rem;
    padding: calc(var(--lp-diente) + 1.2rem) 1.1rem 1.3rem;
    border-radius: 0 0 .45rem .45rem;
    background: var(--lp-sobre-color, var(--lp-sobre-1));
    color: var(--lp-etiqueta-tinta);
    -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / calc(var(--lp-diente) * 2) var(--lp-diente) repeat-x, linear-gradient(#000 0 0) 0 var(--lp-diente) / 100% calc(100% - var(--lp-diente)) no-repeat;
    mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / calc(var(--lp-diente) * 2) var(--lp-diente) repeat-x, linear-gradient(#000 0 0) 0 var(--lp-diente) / 100% calc(100% - var(--lp-diente)) no-repeat;
}

    /* El doblez del sobre: una línea de puntos bajo los dientes. */
    .lp-flora__sobre::before {
        content: "";
        position: absolute;
        top: calc(var(--lp-diente) + .55rem);
        left: .8rem;
        right: .8rem;
        border-top: 1.5px dashed var(--lp-sobre-linea);
    }

@media (max-width: 575.98px) {
    .lp-flora__sobre {
        max-width: none;
    }
}

.lp-flora__sobre--1 {
    --lp-sobre-color: var(--lp-sobre-1);
}

.lp-flora__sobre--2 {
    --lp-sobre-color: var(--lp-sobre-2);
}

.lp-flora__sobre--3 {
    --lp-sobre-color: var(--lp-sobre-3);
}

.lp-flora__sobre--4 {
    --lp-sobre-color: var(--lp-sobre-4);
}

.lp-flora__sobre--5 {
    --lp-sobre-color: var(--lp-sobre-5);
}

.lp-flora__sobre-ventana {
    display: grid;
    place-items: center;
    height: 7rem;
    margin-top: .5rem;
    border: 1.5px solid var(--lp-sobre-linea);
    border-radius: 3.5rem 3.5rem .6rem .6rem;
    background: var(--lp-sobre-ventana);
}

.lp-flora__sobre-dibujo {
    width: 5rem;
    height: 5rem;
}

.lp-flora__sobre-nombre {
    margin-top: 1rem;
    font-family: var(--lp-titular);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-flora__sobre-datos {
    display: grid;
    gap: .1rem;
    margin-top: .7rem;
    font-size: .93rem;
    line-height: 1.45;
}

    .lp-flora__sobre-datos dt {
        margin-top: .45rem;
        color: var(--lp-etiqueta-suave);
        font-family: var(--lp-ficha);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

@media (prefers-reduced-motion: no-preference) {
    /* Los sobres caen sobre la lámina uno tras otro, girando un poco. */
    .lp-flora--animada .lp-flora__sobre[data-revelar] {
        translate: 0 -2rem;
        rotate: -3deg;
        transition: opacity .6s ease-out, translate .7s cubic-bezier(.2, .8, .3, 1.2), rotate .7s ease-out;
    }

    .lp-flora--animada .lp-flora__sobre[data-revelar].lp-flora--visible {
        translate: 0 0;
        rotate: 0deg;
    }

    .lp-flora--animada .lp-flora__sobre:nth-child(2) { transition-delay: .08s; }
    .lp-flora--animada .lp-flora__sobre:nth-child(3) { transition-delay: .16s; }
    .lp-flora--animada .lp-flora__sobre:nth-child(4) { transition-delay: .24s; }
    .lp-flora--animada .lp-flora__sobre:nth-child(5) { transition-delay: .32s; }

    /* Al pasar el puntero, la planta del sobre asoma un poco. */
    .lp-flora__sobre-dibujo {
        transition: translate .3s ease;
    }

    .lp-flora__sobre:hover .lp-flora__sobre-dibujo {
        translate: 0 -.35rem;
    }
}

/* ═══ Lámina 8 · Cuidados del vivero ═══════════════════════════════════════ */
/* Seis estacas: una columna en móvil, dos en tableta y tres desde 992 px, para
   que las filas queden siempre completas. */
.lp-flora__estacas {
    display: grid;
    gap: 1.5rem 1.25rem;
}

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

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

/* La estaca termina en punta para clavarla en la tierra: la punta es un recorte
   de 2rem que el relleno de abajo deja libre de texto. Arriba lleva el agujero
   por donde se ata. */
.lp-flora__estaca {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icono cuidado" "icono titulo" "texto texto";
    column-gap: .9rem;
    align-content: start;
    padding: 1.4rem 1.25rem 3rem;
    border-radius: .6rem .6rem 0 0;
    background: var(--lp-estaca);
    color: var(--lp-etiqueta-tinta);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 50% 100%, 0 calc(100% - 2rem));
    --lp-dibujo-trazo: var(--lp-etiqueta-tinta);
}

    .lp-flora__estaca::before {
        content: "";
        position: absolute;
        top: .55rem;
        left: 50%;
        width: .55rem;
        height: .55rem;
        margin-left: -.275rem;
        border-radius: 50%;
        background: var(--lp-verde);
    }

.lp-flora__estaca-icono {
    grid-area: icono;
    width: 3rem;
    height: 3rem;
}

.lp-flora__estaca-cuidado {
    grid-area: cuidado;
    align-self: end;
    color: var(--lp-etiqueta-suave);
    font-family: var(--lp-ficha);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-flora__estaca-titulo {
    grid-area: titulo;
    font-family: var(--lp-titular);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-flora__estaca-texto {
    grid-area: texto;
    margin-top: .8rem;
    font-size: .98rem;
}

@media (prefers-reduced-motion: no-preference) {
    /* Las estacas se clavan: bajan y se asientan con un leve vaivén. */
    .lp-flora--animada .lp-flora__estaca[data-revelar] {
        translate: 0 -2.5rem;
        transition: opacity .5s ease-out, translate .6s cubic-bezier(.3, 1.5, .5, 1);
    }

    .lp-flora--animada .lp-flora__estaca[data-revelar].lp-flora--visible {
        translate: 0 0;
    }

    .lp-flora--animada .lp-flora__estaca:nth-child(2) { transition-delay: .07s; }
    .lp-flora--animada .lp-flora__estaca:nth-child(3) { transition-delay: .14s; }
    .lp-flora--animada .lp-flora__estaca:nth-child(4) { transition-delay: .21s; }
    .lp-flora--animada .lp-flora__estaca:nth-child(5) { transition-delay: .28s; }
    .lp-flora--animada .lp-flora__estaca:nth-child(6) { transition-delay: .35s; }

    .lp-flora__estaca-icono {
        transition: rotate .3s ease;
    }

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

/* ═══ Lámina 9 · Cuaderno de campo ═════════════════════════════════════════ */
.lp-flora__campus {
    display: grid;
    gap: 2rem;
    align-items: center;
}

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

.lp-flora__campus-escena {
    position: relative;
    padding: .7rem;
    border: 1px solid var(--lp-sup-linea);
    background: var(--lp-papel-alto);
    box-shadow: 0 1.5rem 2.5rem -1.6rem var(--lp-sombra-papel);
}

.lp-flora__campus-dibujo {
    display: block;
    width: 100%;
    height: auto;
}

.lp-flora__campus-linea,
.lp-flora__campus-fina {
    fill: none;
    stroke: var(--lp-trazo);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-flora__campus-linea {
    stroke-width: 1.3;
}

.lp-flora__campus-fina {
    stroke-width: .7;
}

.lp-flora__campus-edificio {
    fill: var(--lp-campus-edificio);
}

.lp-flora__campus-ventanas {
    fill: var(--lp-campus-ventana);
}

.lp-flora__campus-colina {
    fill: var(--lp-campus-colina);
}

.lp-flora__campus-colina--lejos {
    fill: var(--lp-campus-colina-lejos);
}

.lp-flora__campus-copa {
    fill: var(--lp-campus-copa);
}

.lp-flora__campus-agua {
    fill: var(--lp-campus-agua);
}

.lp-flora__astro--sol {
    display: var(--lp-sol-visible);
    fill: var(--lp-sol);
}

.lp-flora__astro--luna {
    display: var(--lp-luna-visible);
    fill: var(--lp-luna);
}

/* Las marcas numeradas: posiciones en porcentaje de la escena para que sigan al
   dibujo en cualquier ancho. */
.lp-flora__marca {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 2px solid var(--lp-papel-alto);
    border-radius: 50%;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-ficha);
    font-size: .9rem;
    font-weight: 700;
    translate: -50% -50%;
    box-shadow: 0 .4rem .8rem -.3rem var(--lp-sombra-papel);
    transition: scale .25s ease, background-color .25s ease;
}

.lp-flora__marca--1 {
    left: 21%;
    top: 34%;
}

.lp-flora__marca--2 {
    left: 45%;
    top: 24%;
}

.lp-flora__marca--3 {
    left: 49%;
    top: 81%;
}

.lp-flora__marca--4 {
    left: 83%;
    top: 58%;
}

.lp-flora__notas {
    display: grid;
    gap: 1rem;
    counter-reset: lp-nota;
}

.lp-flora__nota-campo {
    position: relative;
    padding: .2rem 0 .2rem 3rem;
    counter-increment: lp-nota;
}

    .lp-flora__nota-campo::before {
        content: counter(lp-nota);
        position: absolute;
        top: .15rem;
        left: 0;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--lp-accion);
        color: var(--lp-accion-tinta);
        font-family: var(--lp-ficha);
        font-weight: 700;
    }

    .lp-flora__nota-campo p {
        margin-top: .25rem;
        color: var(--lp-sup-suave);
    }

.lp-flora__nota-campo-titulo {
    font-family: var(--lp-titular);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Pasar el puntero por una nota enciende su marca en la escena. */
.lp-flora__campus:has(.lp-flora__nota-campo--1:hover) .lp-flora__marca--1,
.lp-flora__campus:has(.lp-flora__nota-campo--2:hover) .lp-flora__marca--2,
.lp-flora__campus:has(.lp-flora__nota-campo--3:hover) .lp-flora__marca--3,
.lp-flora__campus:has(.lp-flora__nota-campo--4:hover) .lp-flora__marca--4 {
    scale: 1.3;
    background: var(--lp-polen);
    color: var(--lp-accion-claro-tinta);
}

@media (prefers-reduced-motion: no-preference) {
    /* Las marcas caen como alfileres cuando aparece la escena, y los venados
       entran caminando desde la derecha. */
    .lp-flora--animada .lp-flora__marca {
        scale: 0;
        transition: scale .45s cubic-bezier(.3, 1.6, .5, 1), background-color .25s ease;
    }

    .lp-flora--animada .lp-flora__campus-escena.lp-flora--visible .lp-flora__marca {
        scale: 1;
    }

    .lp-flora--animada .lp-flora__campus-escena.lp-flora--visible .lp-flora__marca--1 { transition-delay: .5s, 0s; }
    .lp-flora--animada .lp-flora__campus-escena.lp-flora--visible .lp-flora__marca--2 { transition-delay: .65s, 0s; }
    .lp-flora--animada .lp-flora__campus-escena.lp-flora--visible .lp-flora__marca--3 { transition-delay: .8s, 0s; }
    .lp-flora--animada .lp-flora__campus-escena.lp-flora--visible .lp-flora__marca--4 { transition-delay: .95s, 0s; }

    .lp-flora--animada .lp-flora__campus:has(.lp-flora__nota-campo:hover) .lp-flora__marca {
        transition-delay: 0s;
    }

    .lp-flora--animada .lp-flora__campus-venado {
        translate: 60px 0;
        opacity: 0;
        transition: translate 1.6s ease-out .4s, opacity .8s ease .4s;
    }

    .lp-flora--animada .lp-flora__campus-escena.lp-flora--visible .lp-flora__campus-venado {
        translate: 0 0;
        opacity: 1;
    }
}

/* ═══ Lámina 10 · En familia ═══════════════════════════════════════════════ */
.lp-flora__familia {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-flora__familia {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

.lp-flora__familia-foto {
    position: relative;
    width: min(96%, 34rem);
    margin-inline: auto;
    padding: .6rem .6rem 2.4rem;
    background: var(--lp-foto-marco);
    box-shadow: 0 1.5rem 2.5rem -1.5rem var(--lp-sombra-papel);
    rotate: -1.5deg;
}

.lp-flora__familia-cinta {
    position: absolute;
    z-index: 1;
    top: -.8rem;
    left: 50%;
    width: 6.5rem;
    height: 1.7rem;
    margin-left: -3.25rem;
    background: var(--lp-cinta);
    rotate: 3deg;
}

.lp-flora__familia-foto .lp-flora__foto {
    width: 100%;
}

.lp-flora__familia-pie {
    position: absolute;
    bottom: .65rem;
    left: .9rem;
    color: var(--lp-etiqueta-suave);
    font-family: var(--lp-ficha);
    font-size: .8rem;
}

/* Los pasos cuelgan de una enredadera: una línea de puntos y un número en una
   hoja para cada uno. La hoja sale de redondear solo dos esquinas opuestas, así
   el número queda derecho sin girar nada. */
.lp-flora__pasos {
    position: relative;
    display: grid;
    gap: 1.1rem;
    counter-reset: lp-paso;
}

    .lp-flora__pasos::before {
        content: "";
        position: absolute;
        top: 1rem;
        bottom: 1rem;
        left: 1.05rem;
        border-left: 2px dotted var(--lp-hoja);
    }

.lp-flora__paso {
    position: relative;
    padding-left: 3.2rem;
    counter-increment: lp-paso;
}

    .lp-flora__paso::before {
        content: counter(lp-paso);
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50% 0;
        background: var(--lp-hoja);
        color: var(--lp-hoja-tinta);
        font-family: var(--lp-ficha);
        font-weight: 700;
    }

.lp-flora__paso-titulo {
    font-family: var(--lp-titular);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.lp-flora__paso-texto {
    margin-top: .2rem;
    color: var(--lp-sup-suave);
}

/* ═══ Lámina 11 · Fichas de consulta ═══════════════════════════════════════ */
.lp-flora__fichero {
    display: grid;
    gap: .8rem;
}

.lp-flora__consulta {
    border: 1px solid var(--lp-etiqueta-linea);
    border-radius: .35rem;
    background: var(--lp-etiqueta);
    color: var(--lp-etiqueta-tinta);
    box-shadow: 0 .6rem 1.2rem -1rem var(--lp-sombra-papel);
    --lp-foco: var(--lp-accion);
}

.lp-flora__consulta-pregunta {
    position: relative;
    display: block;
    padding: 1rem 3.4rem 1rem 1.15rem;
    border-radius: .35rem;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

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

    .lp-flora__consulta-pregunta::after {
        content: "+";
        position: absolute;
        top: .85rem;
        right: 1rem;
        display: grid;
        place-items: center;
        width: 1.6rem;
        height: 1.6rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        font-family: var(--lp-ficha);
        font-weight: 700;
        line-height: 1;
        transition: rotate .3s ease;
    }

    /* El foco se dibuja por dentro: el borde de la ficha no lo recorta. */
    .lp-flora__consulta-pregunta:focus-visible {
        outline-offset: -4px;
    }

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

.lp-flora__consulta-respuesta {
    padding: .85rem 1.15rem 1.15rem;
    border-top: 1px solid var(--lp-ficha-roja);
    background-image: repeating-linear-gradient(transparent 0 1.7rem, var(--lp-ficha-azul) 1.7rem calc(1.7rem + 1px));
    background-position: 0 .85rem;
    line-height: 1.7rem;
}

/* ═══ Lámina 12 · El cierre ════════════════════════════════════════════════ */
.lp-flora__cierre {
    overflow: clip;
}

.lp-flora__cierre-rejilla {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 992px) {
    .lp-flora__cierre-rejilla {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 3rem;
    }
}

.lp-flora__cierre-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}

    .lp-flora__cierre-texto .lp-flora__bajada {
        margin-top: 0;
        font-size: 1.15rem;
    }

    .lp-flora__cierre-texto .lp-flora__antetitulo {
        margin-bottom: 0;
    }

.lp-flora__independencia {
    max-width: 34rem;
    color: var(--lp-sup-suave);
    font-size: .88rem;
}

.lp-flora__cierre-arte {
    position: relative;
    width: min(100%, 22rem);
    margin-inline: auto;
}

    /* El suelo: una línea de pluma que se desvanece en los extremos. */
    .lp-flora__cierre-arte::after {
        content: "";
        position: absolute;
        right: -8%;
        bottom: 0;
        left: -8%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--lp-ciano-trazo) 18% 82%, transparent);
        opacity: .7;
    }

.lp-flora__cierre-dibujo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lp-flora__cierre-tallo {
    fill: none;
    stroke: var(--lp-ciano-trazo);
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* El cierre es cianotipo en los dos temas: hojas con lavado menta y el venado
   como silueta clara, igual que en una copia al sol. */
.lp-flora__cierre-hojas {
    --lp-lavado-hoja: var(--lp-ciano-lavado);
}

.lp-flora__cierre-petalo {
    fill: var(--lp-cierre-petalo);
    stroke: var(--lp-ciano-hondo);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.lp-flora__cierre-petalo--dentro {
    fill: var(--lp-cierre-petalo-dentro);
}

.lp-flora__cierre-disco {
    fill: var(--lp-cierre-disco);
    stroke: var(--lp-ciano-hondo);
    stroke-width: 1.2;
}

.lp-flora__cierre-semillas {
    fill: var(--lp-cierre-semilla);
}

.lp-flora__cierre-venado {
    position: absolute;
    right: -6%;
    bottom: 0;
    width: 36%;
    height: auto;
    aspect-ratio: 110 / 108;
    --lp-venado: var(--lp-venado-noche);
    --lp-venado-sombra: var(--lp-venado-noche-sombra);
    --lp-venado-ojo: var(--lp-venado-noche-ojo);
}

/* En móvil el suelo y el venado no pasan del borde de la columna. */
@media (max-width: 575.98px) {
    .lp-flora__cierre-arte::after {
        right: 0;
        left: 0;
    }

    .lp-flora__cierre-venado {
        right: 0;
    }
}

/* Luciérnagas: puntos de luz que se encienden una sola vez y se quedan. */
.lp-flora__luciernaga {
    position: absolute;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--lp-luciernaga);
    box-shadow: 0 0 .7rem .25rem var(--lp-luciernaga-halo);
}

.lp-flora__luciernaga--1 {
    top: 12%;
    left: 6%;
}

.lp-flora__luciernaga--2 {
    top: 36%;
    left: 88%;
}

.lp-flora__luciernaga--3 {
    top: 64%;
    left: 10%;
}

.lp-flora__luciernaga--4 {
    top: 6%;
    left: 72%;
}

.lp-flora__luciernaga--5 {
    top: 80%;
    left: 54%;
}

@media (prefers-reduced-motion: no-preference) {
    /* La flor se abre desde el disco: primero la corona exterior y luego la
       interior. Las luciérnagas se encienden con un pequeño vuelo. */
    .lp-flora--animada .lp-flora__cierre-corola {
        transform-box: view-box;
        transform-origin: 180px 150px;
    }

    .lp-flora--animada .lp-flora__cierre-petalo {
        transform-box: view-box;
        transform-origin: 180px 150px;
        scale: .15;
        opacity: 0;
        transition: scale 1s cubic-bezier(.3, 1.3, .5, 1), opacity .5s ease;
    }

    .lp-flora--animada .lp-flora__cierre-petalo--dentro {
        transition-delay: .35s;
    }

    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__cierre-petalo {
        scale: 1;
        opacity: 1;
    }

    .lp-flora--animada .lp-flora__cierre-tallo {
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        transition: stroke-dashoffset 1s ease-out;
    }

    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__cierre-tallo {
        stroke-dashoffset: 0;
    }

    .lp-flora--animada .lp-flora__luciernaga {
        opacity: 0;
    }

    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__luciernaga {
        animation: lp-flora-encender 2.4s ease-out both;
    }

    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__luciernaga--2 { animation-delay: .4s; }
    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__luciernaga--3 { animation-delay: .8s; }
    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__luciernaga--4 { animation-delay: 1.2s; }
    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__luciernaga--5 { animation-delay: 1.6s; }

    .lp-flora--animada .lp-flora__cierre-venado {
        opacity: 0;
        translate: 2rem 0;
        transition: opacity .9s ease .6s, translate 1.4s ease-out .6s;
    }

    .lp-flora--animada .lp-flora__cierre-arte.lp-flora--visible .lp-flora__cierre-venado {
        opacity: 1;
        translate: 0 0;
    }

    .lp-flora--animada .lp-flora__cierre-texto {
        opacity: 0;
        translate: 0 1.5rem;
        transition: opacity .8s ease-out, translate .8s ease-out;
    }

    .lp-flora--animada .lp-flora__cierre-texto.lp-flora--visible {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lp-flora-encender {
    0% {
        opacity: 0;
        translate: -.8rem 1.2rem;
    }

    40% {
        opacity: 1;
    }

    70% {
        opacity: .45;
    }

    100% {
        opacity: 1;
        translate: 0 0;
    }
}

/* ═══ 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-flora__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1.3rem;
    border: 2px solid var(--lp-accion-tinta);
    border-radius: 999px;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 .9rem 1.8rem -.7rem var(--lp-sombra-flotante);
    --lp-foco: var(--lp-accion);
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s;
}

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

.lp-flora__flotante--oculto {
    opacity: 0;
    translate: 0 150%;
    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, relleno y letra bajan un punto
   para que el texto quepa en una línea desde 320 px, y si aun así se parte, va
   centrado. */
@media (max-width: 575.98px) {
    .lp-flora__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        justify-content: center;
        padding-inline: 1rem;
        font-size: .95rem;
        text-align: center;
    }
}

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

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: los estados marcados se
   señalan con bordes y los dibujos se pintan con el color del texto. */
@media (forced-colors: active) {
    .lp-flora {
        --lp-dibujo-trazo: CanvasText;
    }

    .lp-flora__boton,
    .lp-flora__flotante,
    .lp-flora__pestana,
    .lp-flora__opcion,
    .lp-flora__interruptor-opcion,
    .lp-flora__etapa-boton {
        border: 2px solid ButtonText;
    }

        .lp-flora__opcion:has(:checked),
        .lp-flora__pestana:has(:checked),
        .lp-flora__interruptor-opcion:has(:checked),
        .lp-flora__etapa-boton:has(:checked) {
            outline: 3px solid Highlight;
            outline-offset: 2px;
        }

    .lp-flora__traza,
    .lp-flora__campus-linea,
    .lp-flora__petalo,
    .lp-flora__banda {
        stroke: CanvasText;
    }

    .lp-flora__anillos:has(#lp-flora-etapa-1:checked) .lp-flora__banda--1,
    .lp-flora__anillos:has(#lp-flora-etapa-2:checked) .lp-flora__banda--2,
    .lp-flora__anillos:has(#lp-flora-etapa-3:checked) .lp-flora__banda--3,
    .lp-flora__anillos:has(#lp-flora-etapa-4:checked) .lp-flora__banda--4 {
        fill: Highlight;
    }

    .lp-flora__sobre,
    .lp-flora__estaca {
        border: 2px solid CanvasText;
        -webkit-mask: none;
        mask: none;
        clip-path: none;
    }
}