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

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

   CONCEPTO: el semestre como un bordado del valle del Colca. Con el tema claro
   la página es lino crudo; con el oscuro, una tela teñida de noche donde los
   hilos brillan más. El bastidor, las muestras, el molde, las etiquetas, los
   retazos y el terciopelo del remate son objetos: no cambian con el tema, salvo
   un tono apenas más apagado de las telas claras.

   OCHO FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): el granate de la San Agustín en la franja.
     · EL LINO (--lp-lino*, --lp-tinta*, --lp-linea, --lp-panel*, --lp-acento):
       el fondo de las secciones y sus textos; cambia con el tema.
     · LOS HILOS (--lp-hilo-*): los colores del bordado, vivos en los dos temas.
       Solo dibujan: ningún texto se escribe con ellos.
     · LAS ÁREAS (--lp-area-*): un color por área para textos y carretes, más
       luminoso de noche.
     · LA MADERA (--lp-madera-*): el bastidor, los carretes y el costurero.
     · LAS TELAS CLARAS (--lp-tela-*, --lp-papel-*, --lp-cinta-*,
       --lp-etiqueta-*): muestras, molde, cinta métrica y etiquetas, claras en
       los dos temas y con su texto oscuro.
     · LOS RETAZOS Y EL TERCIOPELO (--lp-retazo-*, --lp-terciopelo-*): telas
       oscuras en los dos temas, con texto claro.
     · LA ACCIÓN (--lp-accion-*): botones granate sobre el lino y
       --lp-accion-clara-* sobre el terciopelo.

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

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

.lp-bordado {
    /* ── La universidad ─────────────────────────────────────────────────── */
    --lp-uni: #5E151D;
    --lp-uni-oro: #E8C07A;
    --lp-uni-tinta: #F6EFE6;
    --lp-uni-suave: #E3C9C9;
    --lp-uni-flor-a: #F3C9D6;
    --lp-uni-flor-b: #E8C07A;
    --lp-uni-flor-centro: #FFFFFF;
    /* ── El lino: cambia con el tema ────────────────────────────────────── */
    --lp-lino: #F8F3EA;
    --lp-lino-bajo: #EFE7D8;
    --lp-trama: rgba(120, 92, 52, .07);
    --lp-tinta: #241F1B;
    --lp-tinta-suave: #574D44;
    --lp-linea: #DCCDB6;
    --lp-acento: #8C1D2F;
    --lp-panel: #FFFCF6;
    --lp-panel-borde: #E5D8C2;
    --lp-panel-tinte: #FBF1E6;
    --lp-pespunte: rgba(140, 29, 47, .38);
    --lp-sombra: rgba(70, 50, 25, .14);
    --lp-sombra-honda: rgba(50, 35, 15, .3);
    --lp-sombra-flotante: rgba(0, 0, 0, .32);
    /* ── Los hilos: vivos en los dos temas ──────────────────────────────── */
    --lp-hilo-fucsia: #D81B78;
    --lp-hilo-rosa: #F06BA8;
    --lp-hilo-naranja: #F07A1A;
    --lp-hilo-amarillo: #F6C431;
    --lp-hilo-verde: #2E9B4E;
    --lp-hilo-verde-claro: #7CC35A;
    --lp-hilo-turquesa: #14A3B8;
    --lp-hilo-anil: #3550B5;
    --lp-hilo-rojo: #D9342B;
    --lp-hilo-raso: rgba(255, 255, 255, .42);
    --lp-hilo-nudo: #B9761A;
    /* ── Las áreas: cambian con el tema ─────────────────────────────────── */
    --lp-area-ing: #2B4CA0;
    --lp-area-bio: #1B6E42;
    --lp-area-soc: #A8175C;
    --lp-area-ing-tinte: #E7ECF8;
    --lp-area-bio-tinte: #E2F1E8;
    --lp-area-soc-tinte: #F8E3EC;
    /* ── La madera, fija ────────────────────────────────────────────────── */
    --lp-madera: #B9844E;
    --lp-madera-luz: #E2B57E;
    --lp-madera-sombra: #8A5A2C;
    --lp-madera-hueco: #6E4422;
    --lp-madera-veta: rgba(90, 50, 15, .22);
    --lp-metal: #A9B0B8;
    --lp-metal-luz: #E9EDF1;
    /* ── Las telas claras, claras en los dos temas ──────────────────────── */
    --lp-tela: #FBF7EF;
    --lp-tela-trama: rgba(110, 85, 50, .09);
    --lp-tela-tinta: #2A231D;
    --lp-tela-suave: #5B5046;
    --lp-papel: #FFFDF6;
    --lp-papel-cuadro: rgba(43, 76, 160, .12);
    --lp-papel-cuadro-fuerte: rgba(43, 76, 160, .26);
    --lp-papel-tinta: #26221E;
    --lp-papel-suave: #574D44;
    --lp-cruz: #A8175C;
    --lp-cinta: #F4D35E;
    --lp-cinta-borde: #D9B23A;
    --lp-cinta-tinta: #2B2207;
    --lp-cinta-marca: rgba(43, 34, 7, .55);
    --lp-etiqueta: #FFF8EC;
    --lp-etiqueta-tinta: #2A2018;
    --lp-etiqueta-suave: #574A3D;
    --lp-etiqueta-trama: rgba(90, 60, 30, .05);
    /* Los cinco tramos del semestre: oscuros para el número en blanco. */
    --lp-tramo-1: #A34A0B;
    --lp-tramo-2: #A8175C;
    --lp-tramo-3: #1B6E42;
    --lp-tramo-4: #2B4CA0;
    --lp-tramo-5: #7A1630;
    --lp-tramo-tinta: #FFFFFF;
    /* ── Los retazos y el terciopelo, oscuros en los dos temas ──────────── */
    --lp-retazo-ing: #22408F;
    --lp-retazo-bio: #165C38;
    --lp-retazo-soc: #8E1450;
    --lp-retazo-tinta: #FFFFFF;
    --lp-retazo-suave: #F3E6C8;
    --lp-retazo-pespunte: rgba(255, 255, 255, .78);
    --lp-terciopelo-alto: #1E1742;
    --lp-terciopelo-bajo: #0F0C24;
    --lp-terciopelo-tinta: #F7F1EA;
    --lp-terciopelo-suave: #D9D3E8;
    --lp-terciopelo-acento: #FFD27A;
    --lp-terciopelo-brillo: rgba(255, 210, 122, .14);
    --lp-terciopelo-pelo: rgba(255, 255, 255, .025);
    /* El parche del nombre: fijo, con el color del área elegida. */
    --lp-parche-fondo: #23306B;
    --lp-parche-remalle: #F6C431;
    --lp-parche-pespunte: rgba(255, 255, 255, .7);
    --lp-parche-nombre: #FFFFFF;
    --lp-parche-sombra: rgba(0, 0, 0, .28);
    --lp-parche-sub: #F6C431;
    /* ── La acción ──────────────────────────────────────────────────────── */
    --lp-accion: #8C1D2F;
    --lp-accion-alta: #A0263A;
    --lp-accion-tinta: #FFF7F4;
    --lp-accion-canto: #5A0F1C;
    --lp-accion-puntada: rgba(255, 255, 255, .5);
    --lp-accion-clara: #FFD27A;
    --lp-accion-clara-alta: #FFE09E;
    --lp-accion-clara-tinta: #2A1A05;
    --lp-accion-clara-canto: #B98A2E;
    /* ── Letras ─────────────────────────────────────────────────────────── */
    --lp-titulo: ui-rounded, "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif;
    --lp-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lp-ancho: 74rem;
    /* ── Lo que leen las piezas comunes; cada superficie lo reasigna ────── */
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
    position: relative;
    background: var(--lp-lino);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la misma tela teñida de noche. El atributo lo pone
   Akcadmia en un ancestro, también cuando el tema se hereda del navegador;
   aquí solo se reasignan variables, nunca reglas. Los retazos, el terciopelo,
   la madera y el parche no cambian; las telas claras se apagan un poco. */
[data-tema="oscuro"] .lp-bordado {
    --lp-uni: #4A1016;
    --lp-lino: #15121A;
    --lp-lino-bajo: #1B1721;
    --lp-trama: rgba(235, 220, 245, .045);
    --lp-tinta: #F2ECE6;
    --lp-tinta-suave: #C6BCB2;
    --lp-linea: #3A3340;
    --lp-acento: #F2A3AB;
    --lp-panel: #211C27;
    --lp-panel-borde: #372F3E;
    --lp-panel-tinte: #2A2230;
    --lp-pespunte: rgba(242, 163, 171, .3);
    --lp-sombra: rgba(0, 0, 0, .45);
    --lp-sombra-honda: rgba(0, 0, 0, .6);
    --lp-sombra-flotante: rgba(0, 0, 0, .6);
    --lp-hilo-raso: rgba(255, 255, 255, .34);
    --lp-area-ing: #9DB4F2;
    --lp-area-bio: #7FD6A5;
    --lp-area-soc: #F59CC2;
    --lp-area-ing-tinte: #1F2640;
    --lp-area-bio-tinte: #172A22;
    --lp-area-soc-tinte: #33192A;
    --lp-madera: #9E6E3E;
    --lp-madera-luz: #C79A63;
    --lp-madera-sombra: #6E4622;
    --lp-tela: #E7E0D2;
    --lp-papel: #ECE6D8;
    --lp-cinta: #E3C452;
    --lp-cinta-borde: #BF9E30;
    --lp-etiqueta: #ECE3D2;
    --lp-accion: #F2A3AB;
    --lp-accion-alta: #F6B9BF;
    --lp-accion-tinta: #2A0A0F;
    --lp-accion-canto: #B5626B;
    --lp-accion-puntada: rgba(42, 10, 15, .4);
    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-bordado, que no ve sus variables. */
body:has(> .lp-bordado) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #5E151D;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ═══ Los trazos de los dibujos ════════════════════════════════════════════
   Leen variables: un <use> no deja que un selector de descendiente entre en su
   copia, pero las variables sí se heredan. Cada <use> de flor fija con sus
   clases --lp-dib-petalo y --lp-dib-dentro; cada carrete, --lp-dib-hilo. */
.lp-bordado__t-petalo {
    fill: var(--lp-dib-petalo, var(--lp-hilo-fucsia));
}

.lp-bordado__t-dentro {
    fill: var(--lp-dib-dentro, var(--lp-hilo-naranja));
}

/* Las hebras del punto de relleno: líneas claras que no engordan al escalar la
   flor, para que una flor grande y un brote tengan la misma hebra. */
.lp-bordado__t-raso {
    fill: none;
    stroke: var(--lp-hilo-raso);
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.lp-bordado__t-centro {
    fill: var(--lp-hilo-amarillo);
}

.lp-bordado__t-nudo {
    fill: var(--lp-hilo-nudo);
}

.lp-bordado__t-hoja {
    fill: var(--lp-dib-hoja, var(--lp-hilo-verde));
}

.lp-bordado__t-vena {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1;
    stroke-dasharray: 3 2;
    vector-effect: non-scaling-stroke;
}

.lp-bordado__hoja--clara {
    --lp-dib-hoja: var(--lp-hilo-verde-claro);
}

.lp-bordado__c-fucsia { --lp-dib-petalo: var(--lp-hilo-fucsia); }
.lp-bordado__c-rosa { --lp-dib-petalo: var(--lp-hilo-rosa); }
.lp-bordado__c-naranja { --lp-dib-petalo: var(--lp-hilo-naranja); }
.lp-bordado__c-amarillo { --lp-dib-petalo: var(--lp-hilo-amarillo); }
.lp-bordado__c-turquesa { --lp-dib-petalo: var(--lp-hilo-turquesa); }
.lp-bordado__c-anil { --lp-dib-petalo: var(--lp-hilo-anil); }
.lp-bordado__c-rojo { --lp-dib-petalo: var(--lp-hilo-rojo); }
.lp-bordado__d-fucsia { --lp-dib-dentro: var(--lp-hilo-fucsia); }
.lp-bordado__d-rosa { --lp-dib-dentro: var(--lp-hilo-rosa); }
.lp-bordado__d-naranja { --lp-dib-dentro: var(--lp-hilo-naranja); }
.lp-bordado__d-amarillo { --lp-dib-dentro: var(--lp-hilo-amarillo); }
.lp-bordado__d-turquesa { --lp-dib-dentro: var(--lp-hilo-turquesa); }
.lp-bordado__d-anil { --lp-dib-dentro: var(--lp-hilo-anil); }
.lp-bordado__d-rojo { --lp-dib-dentro: var(--lp-hilo-rojo); }

.lp-bordado__t-turquesa {
    fill: var(--lp-hilo-turquesa);
}

.lp-bordado__t-anil {
    fill: var(--lp-hilo-anil);
}

.lp-bordado__t-fucsia {
    fill: var(--lp-hilo-fucsia);
}

.lp-bordado__t-ojo {
    fill: #1D1D1D;
}

.lp-bordado__t-pico {
    fill: none;
    stroke: #3A2A1A;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* El emblema de la franja va siempre sobre el granate. */
.lp-bordado__t-emblema-a {
    fill: var(--lp-uni-flor-a);
}

.lp-bordado__t-emblema-b {
    fill: var(--lp-uni-flor-b);
}

.lp-bordado__t-emblema-centro {
    fill: var(--lp-uni-flor-centro);
}

/* La madera y el hilo de los carretes. */
.lp-bordado__t-madera {
    fill: var(--lp-madera);
}

.lp-bordado__t-madera-luz {
    fill: var(--lp-madera-luz);
}

.lp-bordado__t-madera-hueco {
    fill: var(--lp-madera-hueco);
}

.lp-bordado__t-hilo {
    fill: var(--lp-dib-hilo, var(--lp-acento));
}

.lp-bordado__t-hilo-ing {
    fill: var(--lp-area-ing);
}

.lp-bordado__t-hilo-bio {
    fill: var(--lp-area-bio);
}

.lp-bordado__t-hilo-soc {
    fill: var(--lp-area-soc);
}

.lp-bordado__t-hilo-vuelta {
    fill: none;
    stroke: rgba(0, 0, 0, .2);
    stroke-width: .9;
}

.lp-bordado__t-hilo-brillo {
    fill: rgba(255, 255, 255, .22);
}

.lp-bordado__t-hilo-suelto {
    fill: none;
    stroke: var(--lp-dib-hilo, var(--lp-acento));
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* Los iconos: el trazo es del color del texto y el detalle, del hilo. */
.lp-bordado__t-linea {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-bordado__t-linea-fina {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.lp-bordado__t-hilo-icono {
    fill: none;
    stroke: var(--lp-dib-detalle, var(--lp-acento));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 2.2;
}

.lp-bordado__t-hilo-icono-relleno {
    fill: var(--lp-dib-detalle, var(--lp-acento));
}

.lp-bordado__t-punto {
    fill: currentColor;
}

.lp-bordado__t-punto-claro {
    fill: var(--lp-panel);
}

/* ═══ Las puntadas ═════════════════════════════════════════════════════════
   Cada trazo cosido lleva un pathLength de 40, 80, 160 o 320 según su largo, y
   aquí su patrón: puntadas de 5 con huecos de 3 hasta cubrir el trazo, y
   después un hueco tan largo como el trazo. Quieto (desfase 0) se ve el trazo
   entero cosido; con el desfase en el largo, solo el hueco: al bajar el desfase
   las puntadas entran una a una, como si tiraran del hilo. */
.lp-bordado__puntada {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: var(--lp-trazo);
    stroke-dashoffset: 0;
}

.lp-bordado__puntada--40 {
    --lp-trazo: 5 3 5 3 5 3 5 3 5 3 0 40;
    --lp-largo: 40;
}

.lp-bordado__puntada--80 {
    --lp-trazo: 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 0 80;
    --lp-largo: 80;
}

.lp-bordado__puntada--160 {
    --lp-trazo: 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 0 160;
    --lp-largo: 160;
}

.lp-bordado__puntada--320 {
    --lp-trazo: 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 5 3 0 320;
    --lp-largo: 320;
}

/* El hilván son puntadas largas y flojas; el punto atrás, casi pegadas. */
.lp-bordado__puntada--160.lp-bordado__puntada--hilvan {
    --lp-trazo: 10 6 10 6 10 6 10 6 10 6 10 6 10 6 10 6 10 6 10 6 0 160;
}

.lp-bordado__puntada--160.lp-bordado__puntada--atras {
    --lp-trazo: 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 6 2 0 160;
}

.lp-bordado__t-tallo {
    stroke: var(--lp-hilo-verde);
    stroke-width: 3.4;
}

.lp-bordado__t-borde {
    stroke: var(--lp-terciopelo-acento);
    stroke-width: 3;
}

.lp-bordado__t-borde-fino {
    stroke: var(--lp-terciopelo-acento);
    stroke-width: 1.6;
    opacity: .7;
}

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

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

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

    .lp-bordado__cabecera--centro .lp-bordado__rotulo {
        justify-content: center;
    }

    .lp-bordado__cabecera--centro .lp-bordado__bajada {
        margin-inline: auto;
    }

/* El rótulo lleva delante una hebra cosida que acaba en un nudo. */
.lp-bordado__rotulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-texto);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

    .lp-bordado__rotulo::before {
        content: "";
        flex: none;
        width: 1.9rem;
        height: .45rem;
        background:
            radial-gradient(circle, currentColor .2rem, transparent .22rem) 100% 50% / .45rem .45rem no-repeat,
            repeating-linear-gradient(90deg, currentColor 0 .3rem, transparent .3rem .5rem) 0 50% / calc(100% - .5rem) 2px no-repeat;
    }

.lp-bordado__h1 {
    margin-top: 1rem;
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.85rem);
    font-weight: 800;
    letter-spacing: -.012em;
    line-height: 1.02;
}

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

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

/* El nombre lleva debajo un pespunte de dos colores: dos degradados con el
   mismo paso, el segundo corrido media puntada. Se clona en cada renglón si el
   nombre se parte. El relleno inferior de una caja en línea no empuja el
   renglón siguiente: la cola guarda la distancia con su propio margen. */
.lp-bordado__h1-linea--marca {
    display: inline;
    padding-bottom: .2em;
    color: var(--lp-sup-acento);
    background:
        repeating-linear-gradient(90deg, var(--lp-hilo-fucsia) 0 .28em, transparent .28em .56em) 0 100% / 100% .085em no-repeat,
        repeating-linear-gradient(90deg, transparent 0 .28em, var(--lp-hilo-amarillo) .28em .56em) 0 calc(100% - .02em) / 100% .085em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lp-bordado__h1-linea--cola {
    margin-top: 1.1em;
    color: var(--lp-sup-suave);
    font-family: var(--lp-texto);
    font-size: .44em;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
}

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

.lp-bordado__h3 {
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(1.3rem, 1.12rem + .75vw, 1.6rem);
    font-weight: 800;
    line-height: 1.2;
}

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

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

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

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

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

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

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

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Parches de tela granate con un pespunte por dentro y el canto oscuro abajo.
   Al pasar suben un poco y la aguja se inclina; al pulsar se hunden. */
.lp-bordado__boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .7rem 1.5rem .75rem;
    border: 0;
    border-radius: .8rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 .25rem 0 var(--lp-accion-canto), 0 .8rem 1.2rem -.55rem var(--lp-sombra-honda);
    transition: translate .15s ease, box-shadow .15s ease, background-color .2s ease;
    --lp-foco: var(--lp-accion);
}

    .lp-bordado__boton::after {
        content: "";
        position: absolute;
        inset: .3rem;
        border: 1.5px dashed var(--lp-accion-puntada);
        border-radius: .55rem;
        pointer-events: none;
    }

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

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

.lp-bordado__boton-icono {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    transition: rotate .3s ease;
}

.lp-bordado__boton:hover .lp-bordado__boton-icono {
    rotate: -12deg;
}

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

    .lp-bordado__boton--linea::after {
        border-color: var(--lp-pespunte);
    }

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

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

/* Claro: para el terciopelo, oscuro en los dos temas. */
.lp-bordado__boton--claro {
    background: var(--lp-accion-clara);
    color: var(--lp-accion-clara-tinta);
    box-shadow: 0 .25rem 0 var(--lp-accion-clara-canto), 0 .8rem 1.2rem -.55rem rgba(0, 0, 0, .55);
    --lp-foco: var(--lp-accion-clara);
}

    .lp-bordado__boton--claro::after {
        border-color: rgba(42, 26, 5, .4);
    }

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

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

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

/* El enlace de los retazos: texto subrayado con un pespunte. */
.lp-bordado__enlace {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .35rem .25rem;
    color: var(--lp-sup-acento);
    font-family: var(--lp-titulo);
    font-size: 1.02rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    background: repeating-linear-gradient(90deg, currentColor 0 .4rem, transparent .4rem .65rem) 0 calc(100% - .3rem) / 100% 2px no-repeat;
    transition: color .2s ease;
}

    .lp-bordado__enlace:hover {
        color: var(--lp-sup-tinta);
    }

/* ═══ Superficies ══════════════════════════════════════════════════════════
   El lino cambia con el tema: dos rejillas de hilos finos, en cruz. Cada sección
   del lino bajo empieza con una costura de la sección anterior. */
.lp-bordado__lino,
.lp-bordado__lino-bajo {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background-image:
        repeating-linear-gradient(0deg, var(--lp-trama) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(90deg, var(--lp-trama) 0 1px, transparent 1px 5px);
    color: var(--lp-tinta);
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-linea);
    --lp-sup-acento: var(--lp-acento);
    --lp-foco: var(--lp-acento);
}

.lp-bordado__lino {
    background-color: var(--lp-lino);
}

.lp-bordado__lino-bajo {
    background-color: var(--lp-lino-bajo);
}

    .lp-bordado__lino-bajo::before {
        content: "";
        position: absolute;
        inset: .6rem 0 auto;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--lp-pespunte) 0 .7rem, transparent .7rem 1.15rem);
        pointer-events: none;
    }

/* La sección de los hilos ya empieza en la cenefa. */
.lp-bordado__hilos-seccion::before {
    display: none;
}

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-bordado__franja {
    background:
        repeating-linear-gradient(90deg, var(--lp-uni-oro) 0 .55rem, transparent .55rem .9rem) 0 calc(100% - .35rem) / 100% 2px no-repeat,
        var(--lp-uni);
    color: var(--lp-uni-tinta);
    --lp-foco: var(--lp-uni-oro);
}

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

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

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

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

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

/* ═══ Portada ══════════════════════════════════════════════════════════════
   En escritorio, el texto a la izquierda y el bastidor a la derecha; por debajo
   de 992 px el bastidor baja y se achica. */
.lp-bordado__portada {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 3vw, 4.5rem);
}

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

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

/* La ficha: marbetes de tela, como las etiquetas que se cosen a una prenda. */
.lp-bordado__ficha {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2rem;
}

.lp-bordado__marbete {
    position: relative;
    padding: .5rem .9rem .55rem 1.35rem;
    border-radius: .35rem .9rem .9rem .35rem;
    background: var(--lp-panel);
    box-shadow: 0 0 0 1px var(--lp-panel-borde), 0 .35rem .7rem -.45rem var(--lp-sombra);
    line-height: 1.25;
}

    .lp-bordado__marbete::before {
        content: "";
        position: absolute;
        inset: .4rem auto .4rem .55rem;
        width: 2px;
        background: repeating-linear-gradient(180deg, var(--lp-sup-acento) 0 .3rem, transparent .3rem .5rem);
    }

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

    .lp-bordado__marbete dd {
        color: var(--lp-sup-tinta);
        font-size: .98rem;
        font-weight: 700;
    }

/* El bastidor: un lienzo cuadrado con el aro de madera, la foto como tela y la
   guirnalda encima. El aro va en proporción al lienzo (sus rellenos en % se
   miden contra el ancho), así la guirnalda cae siempre sobre la madera. */
.lp-bordado__bastidor {
    width: min(100%, 22rem);
    margin-inline: auto;
}

@media (min-width: 576px) {
    .lp-bordado__bastidor {
        width: min(100%, 27rem);
    }
}

@media (min-width: 992px) {
    .lp-bordado__bastidor {
        width: min(100%, 31rem);
    }
}

.lp-bordado__bastidor-lienzo {
    position: relative;
    display: block;
    aspect-ratio: 1;
}

.lp-bordado__bastidor-aro {
    position: absolute;
    inset: 3%;
    display: block;
    padding: 4.6%;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, transparent 94.4%, rgba(60, 30, 8, .4) 94.6% 95.6%, transparent 95.8%),
        repeating-conic-gradient(from 10deg, var(--lp-madera-veta) 0 2deg, transparent 2deg 9deg),
        linear-gradient(140deg, var(--lp-madera-luz), var(--lp-madera) 42%, var(--lp-madera-sombra));
    box-shadow: 0 1.4rem 2rem -1.1rem var(--lp-sombra-honda), inset 0 0 0 1px rgba(60, 30, 8, .25);
}

.lp-bordado__bastidor-foto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(60, 30, 8, .35);
}

/* La abrazadera del aro: dos orejas de madera atravesadas por el tornillo de
   metal. La caja mide lo que el tornillo; las orejas van en el centro. */
.lp-bordado__bastidor-tornillo {
    position: absolute;
    top: .8%;
    left: 50%;
    width: 19.4%;
    height: 7%;
    translate: -50% 0;
}

    .lp-bordado__bastidor-tornillo::before {
        content: "";
        position: absolute;
        inset: 0 21.5%;
        border-radius: .3rem;
        background:
            linear-gradient(90deg, transparent 46%, rgba(60, 30, 8, .45) 46% 54%, transparent 54%),
            linear-gradient(var(--lp-madera-luz), var(--lp-madera) 60%, var(--lp-madera-sombra));
        box-shadow: 0 .2rem .35rem rgba(0, 0, 0, .25);
    }

    .lp-bordado__bastidor-tornillo::after {
        content: "";
        position: absolute;
        inset: 30% 0;
        border-radius: 999px;
        background: linear-gradient(var(--lp-metal-luz), var(--lp-metal));
        box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .3);
    }

.lp-bordado__guirnalda {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

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

/* Las flores, las hojas y el ave se transforman desde su propio centro. */
.lp-bordado__flor,
.lp-bordado__ave {
    transform-box: fill-box;
    transform-origin: center;
}

.lp-bordado__hoja {
    transform-box: fill-box;
    transform-origin: 0 50%;
}

.lp-bordado__turno-1 { --lp-turno: 0; }
.lp-bordado__turno-2 { --lp-turno: 1; }
.lp-bordado__turno-3 { --lp-turno: 2; }
.lp-bordado__turno-4 { --lp-turno: 3; }

/* ═══ Cenefa ═══════════════════════════════════════════════════════════════
   El ribete bordado de una pollera: rombos fucsia con su corazón amarillo
   entre dos pespuntes, sobre el granate de la universidad. Cada rombo son
   cuatro esquinas de baldosas vecinas; el paso de media baldosa en vertical
   los centra en la banda. */
.lp-bordado__cenefa {
    height: 2.4rem;
    background:
        repeating-linear-gradient(90deg, var(--lp-hilo-turquesa) 0 .55rem, transparent .55rem .9rem) 0 .32rem / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--lp-hilo-turquesa) 0 .55rem, transparent .55rem .9rem) .45rem calc(100% - .32rem) / 100% 2px no-repeat,
        linear-gradient(135deg, transparent 84%, var(--lp-hilo-amarillo) 84%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(225deg, transparent 84%, var(--lp-hilo-amarillo) 84%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(45deg, transparent 84%, var(--lp-hilo-amarillo) 84%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(315deg, transparent 84%, var(--lp-hilo-amarillo) 84%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(135deg, transparent 68%, var(--lp-hilo-fucsia) 68%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(225deg, transparent 68%, var(--lp-hilo-fucsia) 68%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(45deg, transparent 68%, var(--lp-hilo-fucsia) 68%) 0 50% / 1.6rem 1.6rem,
        linear-gradient(315deg, transparent 68%, var(--lp-hilo-fucsia) 68%) 0 50% / 1.6rem 1.6rem,
        var(--lp-uni);
}

/* ═══ Los hilos de las áreas ═══════════════════════════════════════════════ */
.lp-bordado__carretes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    max-width: 52rem;
    margin: 0 auto 1.8rem;
}

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

.lp-bordado__carrete {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .25rem;
    padding: 1rem .6rem 1.1rem;
    border: 2px solid var(--lp-panel-borde);
    border-radius: 1.1rem;
    background: var(--lp-panel);
    color: var(--lp-sup-tinta);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 .5rem 1rem -.7rem var(--lp-sombra);
    transition: border-color .2s ease, background-color .2s ease, translate .2s ease, box-shadow .2s ease;
    --lp-carrete-color: var(--lp-acento);
    --lp-carrete-tinte: var(--lp-panel-tinte);
}

    .lp-bordado__carrete:hover {
        translate: 0 -2px;
        border-color: var(--lp-carrete-color);
    }

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

    .lp-bordado__carrete:has(:checked) {
        border-color: var(--lp-carrete-color);
        background: var(--lp-carrete-tinte);
        box-shadow: 0 0 0 1px var(--lp-carrete-color), 0 .9rem 1.4rem -.8rem var(--lp-sombra-honda);
    }

.lp-bordado__carrete--ing {
    --lp-dib-hilo: var(--lp-area-ing);
    --lp-carrete-color: var(--lp-area-ing);
    --lp-carrete-tinte: var(--lp-area-ing-tinte);
}

.lp-bordado__carrete--bio {
    --lp-dib-hilo: var(--lp-area-bio);
    --lp-carrete-color: var(--lp-area-bio);
    --lp-carrete-tinte: var(--lp-area-bio-tinte);
}

.lp-bordado__carrete--soc {
    --lp-dib-hilo: var(--lp-area-soc);
    --lp-carrete-color: var(--lp-area-soc);
    --lp-carrete-tinte: var(--lp-area-soc-tinte);
}

.lp-bordado__carrete-dibujo {
    width: 3.3rem;
    height: 4.55rem;
    margin-bottom: .2rem;
}

.lp-bordado__carrete-area {
    font-family: var(--lp-titulo);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}

.lp-bordado__carrete:has(:checked) .lp-bordado__carrete-area {
    color: var(--lp-carrete-color);
}

.lp-bordado__carrete--todas:has(:checked) .lp-bordado__carrete-area {
    color: var(--lp-sup-tinta);
}

.lp-bordado__carrete-cuenta {
    color: var(--lp-sup-suave);
    font-size: .88rem;
}

/* En las pantallas más estrechas el nombre del área cabe con menos relleno. */
@media (max-width: 359.98px) {
    .lp-bordado__carrete {
        padding-inline: .3rem;
    }

    .lp-bordado__carrete-area {
        font-size: .94rem;
    }
}

/* La tela de carreras: un paño con pespunte y un área por franja, separadas
   por otra costura. Con un área elegida, las demás salen de la tela. */
.lp-bordado__tela {
    position: relative;
    display: grid;
    gap: 1.6rem;
    padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
    border-radius: 1.4rem;
    background: var(--lp-panel);
    box-shadow: 0 0 0 1px var(--lp-panel-borde), 0 1.2rem 2rem -1.4rem var(--lp-sombra-honda);
}

    .lp-bordado__tela::before {
        content: "";
        position: absolute;
        inset: .55rem;
        border: 2px dashed var(--lp-pespunte);
        border-radius: 1rem;
        pointer-events: none;
    }

.lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked) .lp-bordado__hilo:not(.lp-bordado__hilo--ing),
.lp-bordado__hilos-seccion:has(#lp-bordado-area-bio:checked) .lp-bordado__hilo:not(.lp-bordado__hilo--bio),
.lp-bordado__hilos-seccion:has(#lp-bordado-area-soc:checked) .lp-bordado__hilo:not(.lp-bordado__hilo--soc) {
    display: none;
}

.lp-bordado__hilo {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
    --lp-hilo-color: var(--lp-acento);
}

    .lp-bordado__hilo + .lp-bordado__hilo {
        padding-top: 1.6rem;
        background: repeating-linear-gradient(90deg, var(--lp-pespunte) 0 .7rem, transparent .7rem 1.15rem) 0 0 / 100% 2px no-repeat;
    }

.lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked, #lp-bordado-area-bio:checked, #lp-bordado-area-soc:checked) .lp-bordado__hilo {
    padding-top: 0;
    background: none;
}

@media (min-width: 992px) {
    .lp-bordado__hilo {
        grid-template-columns: 15rem minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "titulo lista"
            "datos lista"
            "nota lista";
        column-gap: 2.5rem;
    }

    .lp-bordado__hilo-titulo {
        grid-area: titulo;
    }

    .lp-bordado__hilo-datos {
        grid-area: datos;
        flex-direction: column;
    }

    .lp-bordado__hilo-lista {
        grid-area: lista;
        align-content: start;
        margin-top: 0;
    }

    .lp-bordado__hilo-nota {
        grid-area: nota;
    }
}

.lp-bordado__hilo--ing {
    --lp-hilo-color: var(--lp-area-ing);
}

.lp-bordado__hilo--bio {
    --lp-hilo-color: var(--lp-area-bio);
}

.lp-bordado__hilo--soc {
    --lp-hilo-color: var(--lp-area-soc);
}

.lp-bordado__hilo-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .7rem;
    color: var(--lp-hilo-color);
    font-family: var(--lp-titulo);
    font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
}

.lp-bordado__hilo-cuenta {
    color: var(--lp-sup-suave);
    font-family: var(--lp-texto);
    font-size: .9rem;
    font-weight: 600;
}

.lp-bordado__hilo-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.2rem;
    margin-top: .55rem;
    font-size: .88rem;
}

    .lp-bordado__hilo-datos dt,
    .lp-bordado__hilo-datos dd {
        display: inline;
    }

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

        .lp-bordado__hilo-datos dt::after {
            content: ": ";
        }

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

/* Cada carrera es una pastilla cosida con el hilo de su área. */
.lp-bordado__hilo-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

    .lp-bordado__hilo-lista li {
        padding: .3rem .75rem .35rem;
        border: 1.5px dashed var(--lp-hilo-color);
        border-radius: 999px;
        background: var(--lp-panel);
        color: var(--lp-sup-tinta);
        font-size: .9rem;
        line-height: 1.3;
    }

/* Con un área elegida, sus carreras se agrandan. */
.lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked, #lp-bordado-area-bio:checked, #lp-bordado-area-soc:checked) .lp-bordado__hilo-lista {
    gap: .6rem;
}

    .lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked, #lp-bordado-area-bio:checked, #lp-bordado-area-soc:checked) .lp-bordado__hilo-lista li {
        padding: .45rem 1rem .5rem;
        border-width: 2px;
        font-size: 1rem;
    }

.lp-bordado__hilo-nota {
    margin-top: .9rem;
    color: var(--lp-sup-suave);
    font-size: .88rem;
    font-style: italic;
}

/* Una llamada por estado: la general con las tres áreas y la del área elegida
   con una. Sin :has() se queda la general. */
.lp-bordado__area-cta {
    display: none;
}

.lp-bordado__area-cta[data-area-cta="todas"] {
    display: inline-flex;
}

.lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked, #lp-bordado-area-bio:checked, #lp-bordado-area-soc:checked) .lp-bordado__area-cta[data-area-cta="todas"] {
    display: none;
}

.lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked) .lp-bordado__area-cta[data-area-cta="ing"],
.lp-bordado__hilos-seccion:has(#lp-bordado-area-bio:checked) .lp-bordado__area-cta[data-area-cta="bio"],
.lp-bordado__hilos-seccion:has(#lp-bordado-area-soc:checked) .lp-bordado__area-cta[data-area-cta="soc"] {
    display: inline-flex;
}

/* ═══ El semestre en cinco puntadas ════════════════════════════════════════
   El muestrario va a todo lo ancho, con las cinco muestras en fila desde 768 px,
   y la etapa elegida debajo. */
.lp-bordado__muestrario {
    display: grid;
    gap: 1.6rem;
}

.lp-bordado__muestras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
    gap: .75rem;
}

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

.lp-bordado__muestra {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: .55rem .5rem .75rem;
    border: 2px solid var(--lp-panel-borde);
    border-radius: 1rem;
    background: var(--lp-panel);
    color: var(--lp-sup-tinta);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, translate .2s ease;
}

    .lp-bordado__muestra:hover {
        translate: 0 -2px;
        border-color: var(--lp-sup-acento);
    }

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

    .lp-bordado__muestra:has(:checked) {
        border-color: var(--lp-sup-acento);
        background: var(--lp-panel-tinte);
    }

/* El retazo de tela clara donde va cada puntada, con su propia trama. */
.lp-bordado__muestra-tela {
    display: block;
    width: 100%;
    border-radius: .55rem;
    background-color: var(--lp-tela);
    background-image:
        repeating-linear-gradient(0deg, var(--lp-tela-trama) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, var(--lp-tela-trama) 0 1px, transparent 1px 4px);
    box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .15);
}

.lp-bordado__muestra-dibujo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 120 / 72;
}

.lp-bordado__muestra-numero {
    position: absolute;
    top: -.55rem;
    left: -.45rem;
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 2px solid var(--lp-sup-acento);
    border-radius: 50%;
    background: var(--lp-panel);
    color: var(--lp-sup-acento);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}

.lp-bordado__muestra:has(:checked) .lp-bordado__muestra-numero {
    background: var(--lp-accion);
    border-color: var(--lp-accion);
    color: var(--lp-accion-tinta);
}

.lp-bordado__muestra-nombre {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .lp-bordado__muestra {
        padding: .7rem .7rem .85rem;
    }

    .lp-bordado__muestra-nombre {
        font-size: 1rem;
    }
}

/* Las puntadas de las muestras. */
.lp-bordado__t-muestra-hilo {
    stroke: var(--lp-hilo-fucsia);
    stroke-width: 2.6;
}

.lp-bordado__t-muestra-eslabon {
    fill: none;
    stroke: var(--lp-hilo-verde);
    stroke-width: 2.2;
}

.lp-bordado__t-muestra-fondo {
    fill: var(--lp-hilo-anil);
}

.lp-bordado__t-muestra-hebras {
    fill: none;
    stroke: rgba(255, 255, 255, .45);
    stroke-width: 1;
}

.lp-bordado__t-muestra-nudo {
    fill: var(--lp-hilo-amarillo);
    stroke: var(--lp-hilo-nudo);
    stroke-width: 1.2;
}

.lp-bordado__t-muestra-cola {
    fill: none;
    stroke: var(--lp-hilo-rojo);
    stroke-width: 2;
    stroke-linecap: round;
}

.lp-bordado__eslabon,
.lp-bordado__nudo-remate {
    transform-box: fill-box;
    transform-origin: center;
}

/* La etapa elegida. Sin :has() se ven las cinco, una debajo de otra. */
.lp-bordado__muestrario:has(#lp-bordado-puntada-1:checked) .lp-bordado__etapa:not([data-etapa="1"]),
.lp-bordado__muestrario:has(#lp-bordado-puntada-2:checked) .lp-bordado__etapa:not([data-etapa="2"]),
.lp-bordado__muestrario:has(#lp-bordado-puntada-3:checked) .lp-bordado__etapa:not([data-etapa="3"]),
.lp-bordado__muestrario:has(#lp-bordado-puntada-4:checked) .lp-bordado__etapa:not([data-etapa="4"]),
.lp-bordado__muestrario:has(#lp-bordado-puntada-5:checked) .lp-bordado__etapa:not([data-etapa="5"]) {
    display: none;
}

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

.lp-bordado__etapa {
    position: relative;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: 1.2rem;
    background: var(--lp-panel);
    box-shadow: 0 0 0 1px var(--lp-panel-borde), 0 1rem 1.8rem -1.2rem var(--lp-sombra-honda);
}

    .lp-bordado__etapa::before {
        content: "";
        position: absolute;
        inset: .5rem;
        border: 2px dashed var(--lp-pespunte);
        border-radius: .85rem;
        pointer-events: none;
    }

.lp-bordado__etapa-puntada {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--lp-sup-acento);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-bordado__etapa-numero {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-size: .8rem;
    letter-spacing: 0;
}

.lp-bordado__etapa-nombre {
    margin-top: .6rem;
}

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

.lp-bordado__etapa-cuando {
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid var(--lp-sup-linea);
    color: var(--lp-sup-tinta);
    font-size: .95rem;
    font-weight: 700;
}

/* En escritorio la etapa se lee en dos columnas: la puntada y su nombre a la
   izquierda; lo que haces y cuándo, a la derecha. */
@media (min-width: 992px) {
    .lp-bordado__etapa {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        grid-template-rows: auto 1fr auto;
        column-gap: 2.5rem;
        padding: 1.8rem 2.1rem;
    }

    .lp-bordado__etapa-puntada {
        grid-area: 1 / 1;
    }

    .lp-bordado__etapa-nombre {
        grid-area: 2 / 1;
        align-self: start;
    }

    .lp-bordado__etapa-texto {
        grid-area: 1 / 2 / 3 / 3;
        margin-top: 0;
    }

    .lp-bordado__etapa-cuando {
        grid-area: 3 / 2;
    }
}

/* La cinta métrica: el amarillo de la cinta de costura, una marca por semana
   (el paso es el ancho entre el número de semanas que pone el guion) y un tramo
   por etapa, colocado con las fracciones del guion. */
.lp-bordado__cinta {
    margin-top: 2.2rem;
}

.lp-bordado__cinta-tira {
    position: relative;
    height: 3.2rem;
    border-radius: .3rem;
    background:
        repeating-linear-gradient(90deg, var(--lp-cinta-marca) 0 1.5px, transparent 1.5px calc(100% / var(--lp-semanas, 20))) 0 0 / 100% 42% no-repeat,
        var(--lp-cinta);
    box-shadow: inset 0 0 0 1px var(--lp-cinta-borde), 0 .5rem .9rem -.55rem var(--lp-sombra-honda);
    color: var(--lp-cinta-tinta);
}

.lp-bordado__cinta-tramo {
    position: absolute;
    bottom: .3rem;
    left: calc(var(--lp-desde, 0) * 100%);
    display: grid;
    place-items: center;
    width: calc((var(--lp-hasta, 0) - var(--lp-desde, 0)) * 100%);
    height: 48%;
    padding-inline: .1rem;
    border: 1.5px dashed var(--lp-cinta-marca);
    border-radius: .25rem;
    color: var(--lp-cinta-tinta);
    font-size: .85rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transform-origin: 0 50%;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.lp-bordado__semestre:has(#lp-bordado-puntada-1:checked) [data-tramo="1"] {
    border: 0;
    background: var(--lp-tramo-1);
    color: var(--lp-tramo-tinta);
}

.lp-bordado__semestre:has(#lp-bordado-puntada-2:checked) [data-tramo="2"] {
    border: 0;
    background: var(--lp-tramo-2);
    color: var(--lp-tramo-tinta);
}

.lp-bordado__semestre:has(#lp-bordado-puntada-3:checked) [data-tramo="3"] {
    border: 0;
    background: var(--lp-tramo-3);
    color: var(--lp-tramo-tinta);
}

.lp-bordado__semestre:has(#lp-bordado-puntada-4:checked) [data-tramo="4"] {
    border: 0;
    background: var(--lp-tramo-4);
    color: var(--lp-tramo-tinta);
}

.lp-bordado__semestre:has(#lp-bordado-puntada-5:checked) [data-tramo="5"] {
    border: 0;
    background: var(--lp-tramo-5);
    color: var(--lp-tramo-tinta);
}

.lp-bordado__cinta-extremos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3rem 1rem;
    margin-top: .55rem;
    color: var(--lp-sup-suave);
    font-size: .88rem;
    font-weight: 600;
}

/* ═══ El costurero ═════════════════════════════════════════════════════════
   Una caja de madera con seis cajones forrados de tela: la madera se ve en el
   marco y entre los cajones. */
.lp-bordado__costurero {
    display: grid;
    gap: .75rem;
    padding: .75rem;
    border-radius: 1.4rem;
    background:
        repeating-linear-gradient(100deg, var(--lp-madera-veta) 0 2px, transparent 2px 13px),
        linear-gradient(160deg, var(--lp-madera-luz), var(--lp-madera) 45%, var(--lp-madera-sombra));
    box-shadow: 0 1.5rem 2.4rem -1.5rem var(--lp-sombra-honda), inset 0 0 0 1px rgba(60, 30, 8, .3);
}

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

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

.lp-bordado__cajon {
    position: relative;
    padding: 1.3rem 1.25rem 1.4rem;
    border-radius: .9rem;
    background-color: var(--lp-panel);
    background-image:
        repeating-linear-gradient(45deg, var(--lp-trama) 0 1px, transparent 1px 6px);
    box-shadow: inset 0 .35rem .7rem -.3rem rgba(40, 20, 5, .35);
    color: var(--lp-sup-tinta);
}

.lp-bordado__cajon-icono {
    width: 3rem;
    height: 3rem;
    color: var(--lp-sup-tinta);
    --lp-dib-detalle: var(--lp-acento);
}

.lp-bordado__cajon:nth-child(2) .lp-bordado__cajon-icono {
    --lp-dib-detalle: var(--lp-area-ing);
}

.lp-bordado__cajon:nth-child(3) .lp-bordado__cajon-icono {
    --lp-dib-detalle: var(--lp-area-soc);
}

.lp-bordado__cajon:nth-child(4) .lp-bordado__cajon-icono {
    --lp-dib-detalle: var(--lp-area-bio);
}

.lp-bordado__cajon:nth-child(5) .lp-bordado__cajon-icono {
    --lp-dib-detalle: var(--lp-area-ing);
}

.lp-bordado__cajon:nth-child(6) .lp-bordado__cajon-icono {
    --lp-dib-detalle: var(--lp-area-soc);
}

.lp-bordado__cajon-herramienta {
    margin-top: .7rem;
    color: var(--lp-sup-acento);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-bordado__cajon-titulo {
    margin-top: .2rem;
    font-family: var(--lp-titulo);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

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

/* ═══ Retazos ══════════════════════════════════════════════════════════════
   Cada foto va en un retazo de tela oscura cortado con tijera de zigzag (una
   máscara de dientes arriba y abajo) y con un pespunte claro alrededor. */
.lp-bordado__retazos {
    display: grid;
    gap: 2.4rem 1.6rem;
    max-width: 24rem;
    margin-inline: auto;
}

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

/* El margen lateral deja sitio a la inclinación de cada retazo. */
.lp-bordado__retazo {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: .7rem;
    min-width: 0;
    padding-inline: .5rem;
}

.lp-bordado__retazo-figura {
    --lp-diente: 1rem;
    display: grid;
    align-content: start;
    width: 100%;
    height: 100%;
    padding: 1.25rem 1rem 1.1rem;
    background: var(--lp-retazo-fondo, var(--lp-retazo-ing));
    color: var(--lp-retazo-tinta);
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--lp-diente) 51% repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--lp-diente) 51% repeat-x;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--lp-diente) 51% repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--lp-diente) 51% repeat-x;
}

.lp-bordado__retazo--ing .lp-bordado__retazo-figura {
    --lp-retazo-fondo: var(--lp-retazo-ing);
    rotate: -1.4deg;
}

.lp-bordado__retazo--bio .lp-bordado__retazo-figura {
    --lp-retazo-fondo: var(--lp-retazo-bio);
    rotate: 1.2deg;
}

.lp-bordado__retazo--soc .lp-bordado__retazo-figura {
    --lp-retazo-fondo: var(--lp-retazo-soc);
    rotate: -1deg;
}

.lp-bordado__retazo-marco {
    position: relative;
    display: block;
    border-radius: .35rem;
    overflow: hidden;
}

    .lp-bordado__retazo-marco::after {
        content: "";
        position: absolute;
        inset: .5rem;
        border: 2px dashed var(--lp-retazo-pespunte);
        border-radius: .25rem;
        pointer-events: none;
    }

.lp-bordado__retazo-foto {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.lp-bordado__retazo-pie {
    display: grid;
    gap: .1rem;
    margin-top: .85rem;
    text-align: center;
}

.lp-bordado__retazo-carrera {
    color: var(--lp-retazo-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
}

.lp-bordado__retazo-area {
    color: var(--lp-retazo-suave);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ═══ El patrón del examen ═════════════════════════════════════════════════
   En escritorio: los textos arriba a la izquierda, el molde a la izquierda y
   las medidas a la derecha. */
.lp-bordado__examen-rejilla {
    display: grid;
    gap: 2rem;
}

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

        .lp-bordado__examen-rejilla > .lp-bordado__cabecera {
            grid-column: 1 / -1;
            margin-bottom: 0;
        }
}

/* El molde: papel cuadriculado de patrones, claro en los dos temas, con un
   cuadro fuerte cada cinco. Los puntos de cruz son dos diagonales por celda en
   una rejilla de 8 × 10. */
.lp-bordado__molde {
    padding: 1.4rem 1.2rem 1.2rem;
    border-radius: .6rem;
    background-color: var(--lp-papel);
    background-image:
        linear-gradient(var(--lp-papel-cuadro-fuerte) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-papel-cuadro-fuerte) 1px, transparent 1px),
        linear-gradient(var(--lp-papel-cuadro) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-papel-cuadro) 1px, transparent 1px);
    background-size: 5rem 5rem, 5rem 5rem, 1rem 1rem, 1rem 1rem;
    color: var(--lp-papel-tinta);
    box-shadow: 0 1.2rem 2rem -1.3rem var(--lp-sombra-honda), inset 0 0 0 1px rgba(43, 76, 160, .2);
}

.lp-bordado__molde-cruces {
    display: block;
    width: min(100%, 19rem);
    aspect-ratio: 8 / 10;
    margin-inline: auto;
    background:
        linear-gradient(45deg, transparent calc(50% - 1.6px), var(--lp-cruz) calc(50% - 1.6px) calc(50% + 1.6px), transparent calc(50% + 1.6px)),
        linear-gradient(-45deg, transparent calc(50% - 1.6px), var(--lp-cruz) calc(50% - 1.6px) calc(50% + 1.6px), transparent calc(50% + 1.6px));
    background-size: calc(100% / 8) calc(100% / 10);
    -webkit-mask: radial-gradient(circle closest-side, #000 80%, transparent 82%) 0 0 / calc(100% / 8) calc(100% / 10);
    mask: radial-gradient(circle closest-side, #000 80%, transparent 82%) 0 0 / calc(100% / 8) calc(100% / 10);
}

.lp-bordado__molde-pie {
    margin-top: 1rem;
    color: var(--lp-papel-tinta);
    font-size: .95rem;
    font-weight: 700;
    text-align: center;
}

/* Las dos cifras van lado a lado si caben; por debajo de unos 300 px, una
   sobre otra. Cada columna mide al menos la mitad del ancho: nunca hay más de
   dos. */
.lp-bordado__medidas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.5rem, calc((100% - .8rem) / 2))), 1fr));
    gap: .8rem;
}

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

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

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

    .lp-bordado__medida dd {
        margin-top: .2rem;
        color: var(--lp-sup-tinta);
        font-weight: 600;
    }

.lp-bordado__medida-cifra {
    font-family: var(--lp-titulo);
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
}

.lp-bordado__medida .lp-bordado__medida-cifra {
    font-weight: 800;
}

.lp-bordado__vias-titulo {
    margin-top: 1.8rem;
}

/* Las vías llevan delante un punto de cruz. */
.lp-bordado__vias {
    display: grid;
    gap: .5rem;
    margin-top: .8rem;
}

    .lp-bordado__vias li {
        position: relative;
        padding-left: 1.7rem;
        color: var(--lp-sup-tinta);
    }

        .lp-bordado__vias li::before {
            content: "";
            position: absolute;
            top: .35em;
            left: .15rem;
            width: .85rem;
            height: .85rem;
            background:
                linear-gradient(45deg, transparent calc(50% - 1.2px), var(--lp-sup-acento) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
                linear-gradient(-45deg, transparent calc(50% - 1.2px), var(--lp-sup-acento) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px));
        }

/* ═══ Etiquetas ════════════════════════════════════════════════════════════
   Cintas tejidas claras en los dos temas, con los extremos doblados en punta,
   dos hilos de color en los bordes y un pespunte en cada extremo. El color del
   hilo cambia de etiqueta en etiqueta. */
.lp-bordado__etiquetas {
    display: grid;
    gap: 1.1rem;
}

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

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

.lp-bordado__etiqueta {
    --lp-etiqueta-hilo: var(--lp-hilo-fucsia);
    position: relative;
    padding: 1.35rem 2.4rem 1.45rem;
    background:
        linear-gradient(var(--lp-etiqueta-hilo), var(--lp-etiqueta-hilo)) 0 .5rem / 100% 3px no-repeat,
        linear-gradient(var(--lp-etiqueta-hilo), var(--lp-etiqueta-hilo)) 0 calc(100% - .5rem) / 100% 3px no-repeat,
        repeating-linear-gradient(180deg, var(--lp-etiqueta-suave) 0 .35rem, transparent .35rem .6rem) 1.55rem 0 / 1.5px 100% no-repeat,
        repeating-linear-gradient(180deg, var(--lp-etiqueta-suave) 0 .35rem, transparent .35rem .6rem) calc(100% - 1.55rem) 0 / 1.5px 100% no-repeat,
        repeating-linear-gradient(0deg, var(--lp-etiqueta-trama) 0 1px, transparent 1px 3px),
        var(--lp-etiqueta);
    color: var(--lp-etiqueta-tinta);
    clip-path: polygon(0 0, 100% 0, calc(100% - .85rem) 50%, 100% 100%, 0 100%, .85rem 50%);
    text-align: center;
}

.lp-bordado__etiqueta:nth-child(2) {
    --lp-etiqueta-hilo: var(--lp-hilo-turquesa);
}

.lp-bordado__etiqueta:nth-child(3) {
    --lp-etiqueta-hilo: var(--lp-hilo-naranja);
}

.lp-bordado__etiqueta:nth-child(4) {
    --lp-etiqueta-hilo: var(--lp-hilo-verde);
}

.lp-bordado__etiqueta:nth-child(5) {
    --lp-etiqueta-hilo: var(--lp-hilo-anil);
}

.lp-bordado__etiqueta:nth-child(6) {
    --lp-etiqueta-hilo: var(--lp-hilo-rojo);
}

.lp-bordado__etiqueta-cifra {
    color: var(--lp-etiqueta-tinta);
    font-family: var(--lp-titulo);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.lp-bordado__etiqueta-texto {
    margin-top: .4rem;
    color: var(--lp-etiqueta-suave);
    font-size: .95rem;
    line-height: 1.45;
}

/* ═══ Tu nombre bordado ════════════════════════════════════════════════════ */
.lp-bordado__nombre-rejilla {
    display: grid;
    gap: 2rem;
    align-items: center;
}

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

        .lp-bordado__nombre-rejilla > .lp-bordado__cabecera {
            margin-bottom: 0;
        }
}

.lp-bordado__campo {
    max-width: 26rem;
    margin-top: 1.6rem;
}

.lp-bordado__campo-etiqueta {
    margin-bottom: .45rem;
    color: var(--lp-sup-tinta);
    font-weight: 700;
}

.lp-bordado__campo-entrada {
    display: block;
    width: 100%;
    min-height: 3.1rem;
    padding: .65rem 1rem;
    border: 2px solid var(--lp-panel-borde);
    border-radius: .8rem;
    background: var(--lp-panel);
    color: var(--lp-sup-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: inset 0 .15rem .3rem rgba(0, 0, 0, .06);
    transition: border-color .2s ease;
}

    .lp-bordado__campo-entrada::placeholder {
        color: var(--lp-sup-suave);
        font-weight: 500;
        opacity: 1;
    }

    .lp-bordado__campo-entrada:hover,
    .lp-bordado__campo-entrada:focus {
        border-color: var(--lp-sup-acento);
    }

.lp-bordado__campo-ayuda {
    margin-top: .45rem;
    color: var(--lp-sup-suave);
    font-size: .88rem;
}

/* El parche: fijo en los dos temas y con el hilo del área elegida arriba. */
.lp-bordado__parche {
    width: min(100%, 36rem);
    margin-inline: auto;
}

.lp-bordado:has(#lp-bordado-area-ing:checked) .lp-bordado__parche {
    --lp-parche-fondo: var(--lp-retazo-ing);
}

.lp-bordado:has(#lp-bordado-area-bio:checked) .lp-bordado__parche {
    --lp-parche-fondo: var(--lp-retazo-bio);
}

.lp-bordado:has(#lp-bordado-area-soc:checked) .lp-bordado__parche {
    --lp-parche-fondo: var(--lp-retazo-soc);
}

.lp-bordado__parche-dibujo {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 .9rem 1rem var(--lp-parche-sombra));
}

.lp-bordado__t-parche {
    fill: var(--lp-parche-fondo);
    transition: fill .4s ease;
}

.lp-bordado__t-parche-remalle {
    fill: none;
    stroke: var(--lp-parche-remalle);
    stroke-width: 12;
    stroke-dasharray: 1.6 1;
}

.lp-bordado__t-parche-pespunte {
    fill: none;
    stroke: var(--lp-parche-pespunte);
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

.lp-bordado__t-nombre,
.lp-bordado__t-nombre-puntada {
    font-family: var(--lp-titulo);
    font-size: 74px;
    font-weight: 800;
}

.lp-bordado__t-nombre {
    fill: var(--lp-parche-nombre);
}

/* Encima del relleno, el mismo texto solo con su contorno a puntadas: así las
   letras parecen cosidas. */
.lp-bordado__t-nombre-puntada {
    fill: none;
    stroke: rgba(0, 0, 0, .28);
    stroke-width: 1.4;
    stroke-dasharray: 3 2;
}

.lp-bordado__t-nombre-area {
    fill: var(--lp-parche-sub);
    font-family: var(--lp-texto);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* ═══ Preguntas ════════════════════════════════════════════════════════════
   Cada pregunta lleva un botón de costura con sus cuatro agujeros, que gira al
   abrirse. El color del botón cambia de pregunta en pregunta. */
.lp-bordado__preguntas-rejilla {
    display: grid;
    gap: 1rem;
}

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

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

.lp-bordado__boton-pregunta {
    --lp-boton-color: var(--lp-hilo-fucsia);
    border: 2px solid var(--lp-panel-borde);
    border-radius: 1rem;
    background: var(--lp-panel);
    transition: border-color .2s ease;
}

    .lp-bordado__boton-pregunta[open] {
        border-color: var(--lp-sup-acento);
    }

.lp-bordado__boton-pregunta:nth-of-type(5n + 2) {
    --lp-boton-color: var(--lp-hilo-turquesa);
}

.lp-bordado__boton-pregunta:nth-of-type(5n + 3) {
    --lp-boton-color: var(--lp-hilo-naranja);
}

.lp-bordado__boton-pregunta:nth-of-type(5n + 4) {
    --lp-boton-color: var(--lp-hilo-verde);
}

.lp-bordado__boton-pregunta:nth-of-type(5n) {
    --lp-boton-color: var(--lp-hilo-anil);
}

.lp-bordado__pregunta {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 3.4rem;
    padding: .85rem 1.1rem;
    color: var(--lp-sup-tinta);
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

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

    .lp-bordado__pregunta::before {
        content: "";
        flex: none;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        background:
            radial-gradient(circle at 36% 36%, var(--lp-panel) 0 .12rem, transparent .14rem),
            radial-gradient(circle at 64% 36%, var(--lp-panel) 0 .12rem, transparent .14rem),
            radial-gradient(circle at 36% 64%, var(--lp-panel) 0 .12rem, transparent .14rem),
            radial-gradient(circle at 64% 64%, var(--lp-panel) 0 .12rem, transparent .14rem),
            var(--lp-boton-color);
        box-shadow: inset 0 0 0 .18rem rgba(255, 255, 255, .28), 0 .12rem .2rem rgba(0, 0, 0, .18);
        transition: rotate .4s ease;
    }

.lp-bordado__boton-pregunta[open] > .lp-bordado__pregunta::before {
    rotate: 135deg;
}

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

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

@media (max-width: 575.98px) {
    .lp-bordado__respuesta {
        padding-left: 1.15rem;
    }
}

/* ═══ El remate ════════════════════════════════════════════════════════════
   Terciopelo oscuro en los dos temas, con su brillo de pelo, y el medallón
   terminado. */
.lp-bordado__remate {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    background:
        radial-gradient(ellipse 55% 60% at 22% 45%, var(--lp-terciopelo-brillo), transparent 70%),
        repeating-linear-gradient(115deg, var(--lp-terciopelo-pelo) 0 2px, transparent 2px 7px),
        linear-gradient(var(--lp-terciopelo-alto), var(--lp-terciopelo-bajo));
    color: var(--lp-terciopelo-tinta);
    --lp-sup-tinta: var(--lp-terciopelo-tinta);
    --lp-sup-suave: var(--lp-terciopelo-suave);
    --lp-sup-linea: rgba(255, 255, 255, .2);
    --lp-sup-acento: var(--lp-terciopelo-acento);
    --lp-foco: var(--lp-terciopelo-acento);
}

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

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

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

@media (min-width: 576px) {
    .lp-bordado__medallon {
        width: min(100%, 25rem);
    }
}

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

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

.lp-bordado__independiente {
    max-width: 34rem;
    margin-top: 1.6rem;
    color: var(--lp-sup-suave);
    font-size: .85rem;
}

/* ═══ 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-bordado__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .65rem 1.4rem .7rem;
    border-radius: .8rem;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 .25rem 0 var(--lp-accion-canto), 0 1rem 1.8rem -.6rem var(--lp-sombra-flotante);
    --lp-foco: var(--lp-accion);
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s, background-color .2s ease;
}

    .lp-bordado__flotante::after {
        content: "";
        position: absolute;
        inset: .3rem;
        border: 1.5px dashed var(--lp-accion-puntada);
        border-radius: .55rem;
        pointer-events: none;
    }

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

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

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

/* En el teléfono el botón ocupa el ancho entre márgenes. Por la derecha se
   detiene donde empieza la esquina de la mascota del sitio, con la reserva que
   publica el marco; sin mascota la variable no existe y el margen vuelve a ser
   el de la izquierda. Al quedar más estrecho, 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-bordado__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        padding-inline: 1rem;
        font-size: 1rem;
        text-align: center;
    }
}

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

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

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

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

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

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

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

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

    /* La guirnalda y el medallón se bordan por turnos: primero el tallo o el
       borde, después hojas y flores, y el picaflor al final. Cada pieza espera
       su turno (--lp-turno) y las del mismo turno salen casi a la vez. */
    .lp-bordado--animada :is(.lp-bordado__bastidor, .lp-bordado__medallon) .lp-bordado__puntada {
        transition: stroke-dashoffset 1.2s cubic-bezier(.3, .6, .35, 1);
        transition-delay: calc(var(--lp-turno, 0) * .45s + .2s);
    }

    .lp-bordado--animada :is(.lp-bordado__bastidor, .lp-bordado__medallon):not(.lp-bordado--visible) .lp-bordado__puntada {
        stroke-dashoffset: var(--lp-largo);
    }

    .lp-bordado--animada :is(.lp-bordado__bastidor, .lp-bordado__medallon) :is(.lp-bordado__flor, .lp-bordado__hoja) {
        transition: scale .7s cubic-bezier(.3, 1.45, .5, 1), rotate .9s cubic-bezier(.25, .8, .3, 1), opacity .4s ease;
        transition-delay: calc(var(--lp-turno, 0) * .45s + .5s);
    }

    .lp-bordado--animada :is(.lp-bordado__bastidor, .lp-bordado__medallon):not(.lp-bordado--visible) .lp-bordado__flor {
        opacity: 0;
        scale: 0;
        rotate: -60deg;
    }

    .lp-bordado--animada :is(.lp-bordado__bastidor, .lp-bordado__medallon):not(.lp-bordado--visible) .lp-bordado__hoja {
        opacity: 0;
        scale: 0 1;
    }

    .lp-bordado--animada .lp-bordado__bastidor .lp-bordado__ave {
        transition: translate 1.1s cubic-bezier(.2, .8, .3, 1), opacity .6s ease;
        transition-delay: 2s;
    }

    .lp-bordado--animada .lp-bordado__bastidor:not(.lp-bordado--visible) .lp-bordado__ave {
        opacity: 0;
        translate: 2.4rem -1.6rem;
    }

    /* La flor grande del medallón gira una vuelta más lenta al abrirse. */
    .lp-bordado--animada .lp-bordado__medallon .lp-bordado__flor--grande {
        transition-duration: 1s, 1.6s, .5s;
    }

    /* El carrete elegido da una vuelta sobre su eje. */
    .lp-bordado--animada .lp-bordado__carrete-dibujo {
        transition: rotate .8s cubic-bezier(.3, .7, .3, 1);
    }

    .lp-bordado--animada .lp-bordado__carrete:has(:checked) .lp-bordado__carrete-dibujo {
        rotate: y 360deg;
    }

    /* Las carreras del área elegida se cosen una tras otra. */
    .lp-bordado--animada .lp-bordado__hilos-seccion:has(#lp-bordado-area-ing:checked, #lp-bordado-area-bio:checked, #lp-bordado-area-soc:checked) .lp-bordado__hilo-lista li {
        animation: lp-bordado-pegar .45s cubic-bezier(.3, 1.4, .5, 1) both;
    }

    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(2) { animation-delay: 30ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(3) { animation-delay: 60ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(4) { animation-delay: 90ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(5) { animation-delay: 120ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(6) { animation-delay: 150ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(7) { animation-delay: 180ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(8) { animation-delay: 210ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(9) { animation-delay: 240ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(10) { animation-delay: 270ms; }
    .lp-bordado--animada .lp-bordado__hilo-lista li:nth-child(n + 11) { animation-delay: 300ms; }

    /* La puntada de la muestra elegida se vuelve a coser cada vez. */
    .lp-bordado--animada .lp-bordado__muestra:has(:checked) .lp-bordado__puntada {
        animation: lp-bordado-coser 1s cubic-bezier(.3, .6, .35, 1) both;
    }

    .lp-bordado--animada .lp-bordado__muestra:has(:checked) .lp-bordado__eslabon {
        animation: lp-bordado-pegar .4s cubic-bezier(.3, 1.4, .5, 1) both;
    }

    .lp-bordado--animada .lp-bordado__muestra:has(:checked) .lp-bordado__hebras {
        animation: lp-bordado-rellenar .9s ease-out both;
    }

    .lp-bordado--animada .lp-bordado__muestra:has(:checked) .lp-bordado__nudo-remate {
        animation: lp-bordado-pegar .35s cubic-bezier(.3, 1.6, .5, 1) both;
        animation-delay: .5s;
    }

    .lp-bordado--animada .lp-bordado__eslabon:nth-child(2) { animation-delay: .08s; }
    .lp-bordado--animada .lp-bordado__eslabon:nth-child(3) { animation-delay: .16s; }
    .lp-bordado--animada .lp-bordado__eslabon:nth-child(4) { animation-delay: .24s; }
    .lp-bordado--animada .lp-bordado__eslabon:nth-child(5) { animation-delay: .32s; }
    .lp-bordado--animada .lp-bordado__eslabon:nth-child(6) { animation-delay: .4s; }
    .lp-bordado--animada .lp-bordado__eslabon:nth-child(7) { animation-delay: .48s; }

    /* La etapa que se enseña entra de abajo cada vez que cambia. */
    .lp-bordado--animada .lp-bordado__muestrario:has(:checked) .lp-bordado__etapa {
        animation: lp-bordado-asomar .45s ease-out both;
    }

    /* Los tramos de la cinta se estiran desde la izquierda al verse la cinta. */
    .lp-bordado--animada .lp-bordado__cinta-tramo {
        transition: background-color .25s ease, color .25s ease, border-color .25s ease, scale .6s cubic-bezier(.25, .8, .3, 1);
    }

    .lp-bordado--animada .lp-bordado__cinta:not(.lp-bordado--visible) .lp-bordado__cinta-tramo {
        scale: 0 1;
    }

    .lp-bordado--animada .lp-bordado__cinta-tramo[data-tramo="2"] { transition-delay: 0s, 0s, 0s, .12s; }
    .lp-bordado--animada .lp-bordado__cinta-tramo[data-tramo="3"] { transition-delay: 0s, 0s, 0s, .24s; }
    .lp-bordado--animada .lp-bordado__cinta-tramo[data-tramo="4"] { transition-delay: 0s, 0s, 0s, .36s; }
    .lp-bordado--animada .lp-bordado__cinta-tramo[data-tramo="5"] { transition-delay: 0s, 0s, 0s, .48s; }

    /* Los iconos del costurero caen en su cajón. */
    .lp-bordado--animada .lp-bordado__cajon-icono {
        transition: translate .7s cubic-bezier(.3, 1.4, .5, 1), rotate .7s ease;
        transition-delay: calc(var(--lp-orden, 0) * 90ms + .25s);
    }

    .lp-bordado--animada .lp-bordado__cajon:not(.lp-bordado--visible) .lp-bordado__cajon-icono {
        translate: 0 -1.2rem;
        rotate: -25deg;
    }

    /* El pespunte de cada retazo se cose de izquierda a derecha. */
    .lp-bordado--animada .lp-bordado__retazo-marco::after {
        clip-path: inset(0 0 0 0);
        transition: clip-path 1.1s ease-out;
        transition-delay: calc(var(--lp-orden, 0) * 90ms + .4s);
    }

    .lp-bordado--animada .lp-bordado__retazo:not(.lp-bordado--visible) .lp-bordado__retazo-marco::after {
        clip-path: inset(0 100% 0 0);
    }

    /* Los puntos de cruz del molde se cosen fila a fila. */
    .lp-bordado--animada .lp-bordado__molde-cruces {
        clip-path: inset(0 0 0 0);
        transition: clip-path 2s steps(10, end) .3s;
    }

    .lp-bordado--animada .lp-bordado__molde:not(.lp-bordado--visible) .lp-bordado__molde-cruces {
        clip-path: inset(0 0 100% 0);
    }

    /* Las etiquetas llegan girando un poco, como recién cosidas. */
    .lp-bordado--animada .lp-bordado__etiqueta {
        transition: opacity .7s ease-out, translate .7s cubic-bezier(.2, .7, .3, 1), rotate .9s cubic-bezier(.3, 1.4, .5, 1);
        transition-delay: calc(var(--lp-orden, 0) * 90ms);
    }

    .lp-bordado--animada .lp-bordado__etiqueta:not(.lp-bordado--visible) {
        rotate: -5deg;
    }

    /* El nombre se vuelve a bordar cada vez que cambia. */
    .lp-bordado--animada .lp-bordado__parche--cosiendo .lp-bordado__t-nombre-puntada {
        animation: lp-bordado-pespuntear 1s ease-out both;
    }

    .lp-bordado--animada .lp-bordado__parche--cosiendo .lp-bordado__t-nombre {
        animation: lp-bordado-tenir .7s ease-out both;
    }
}

@keyframes lp-bordado-coser {
    from {
        stroke-dashoffset: var(--lp-largo);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lp-bordado-pegar {
    from {
        opacity: 0;
        scale: .4;
    }

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

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

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

@keyframes lp-bordado-asomar {
    from {
        opacity: 0;
        translate: 0 .6rem;
    }

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

@keyframes lp-bordado-pespuntear {
    from {
        stroke-dashoffset: 40;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes lp-bordado-tenir {
    from {
        opacity: .25;
    }

    to {
        opacity: 1;
    }
}

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

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: tarjetas, carretes,
   muestras, etiquetas y botones se dibujan con contornos, y la elección se
   marca con Highlight. Los dibujos bordados, el bastidor, la cinta métrica, el
   molde y la cenefa conservan sus colores, porque ahí el color dibuja la forma. */
@media (forced-colors: active) {
    .lp-bordado__boton,
    .lp-bordado__flotante,
    .lp-bordado__marbete,
    .lp-bordado__carrete,
    .lp-bordado__tela,
    .lp-bordado__muestra,
    .lp-bordado__etapa,
    .lp-bordado__cajon,
    .lp-bordado__retazo-figura,
    .lp-bordado__medida,
    .lp-bordado__etiqueta,
    .lp-bordado__campo-entrada,
    .lp-bordado__boton-pregunta {
        border: 2px solid CanvasText;
    }

    .lp-bordado__carrete:has(:checked),
    .lp-bordado__muestra:has(:checked) {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .lp-bordado__hilo-lista li {
        border-color: CanvasText;
    }

    .lp-bordado__etiqueta {
        clip-path: none;
    }

    .lp-bordado__retazo-figura {
        -webkit-mask: none;
        mask: none;
    }

    .lp-bordado__bastidor-lienzo,
    .lp-bordado__carrete-dibujo,
    .lp-bordado__muestra-tela,
    .lp-bordado__cinta-tira,
    .lp-bordado__molde-cruces,
    .lp-bordado__cenefa,
    .lp-bordado__parche,
    .lp-bordado__medallon,
    .lp-bordado__franja-emblema,
    .lp-bordado__pregunta::before {
        forced-color-adjust: none;
    }
}