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

   TODO cuelga de .lp-cuerda. 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 reloj de Pedro Ruiz Gallo. Con el tema claro es el taller de un
   relojero de día, de paredes de yeso marfil; con el oscuro, el mismo taller de
   noche, en nogal. Las piezas de reloj (latón, acero pavonado, esmalte) no
   cambian con el tema, como no cambian en la mesa de trabajo.

   OCHO FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul y oro de la franja superior, la
       identidad común de las landings de la UNPRG.
     · EL TALLER (--lp-pared-*, --lp-tinta-*, --lp-laton-texto): las paredes y los
       textos que cambian con el tema.
     · LOS METALES (--lp-laton-*, --lp-acero-*): latón de cajas, biseles y
       engranajes; acero pavonado de las agujas.
     · LOS ESMALTES Y PAPELES (--lp-esmalte-*, --lp-papel-*, --lp-carton-*,
       --lp-almanaque-*): esferas, placas, etiquetas y almanaque. Claros en los
       dos temas, con su propia tinta oscura.
     · LAS SALAS FIJAS (--lp-terciopelo-*, --lp-madera-*, --lp-noche-*): el
       terciopelo del estuche, la madera del banco y la noche azul del cierre.
       Oscuras en los dos temas.
     · LAS ÁREAS DEL EXAMEN (--lp-area-*): los seis colores de la esfera del
       examen, sobre el terciopelo.
     · LAS SOMBRAS DE LOS OBJETOS (--lp-filo-*, --lp-sombra-*, --lp-brillo-*):
       iguales en los dos temas, porque son de piezas que no cambian.
     · LA ACCIÓN (--lp-accion-*): acero pavonado con filete de latón sobre el
       taller claro y latón sobre el oscuro; --lp-accion-papel-* sobre los
       papeles y --lp-accion-clara-* sobre las salas fijas.

   Cada superficie fija además unas variables locales (--lp-sup-tinta,
   --lp-sup-suave, --lp-sup-linea, --lp-sup-oro 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. */

/* Propiedades registradas: el navegador puede animarlas porque conoce su tipo.
   Las fronteras de la esfera del examen son porcentajes del giro; el avance de
   cada esfera de etapa, centésimas de año. Se heredan para que los pseudo-
   elementos lean el valor que se está animando. */
@property --lp-cuerda-p2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 46%;
}

@property --lp-cuerda-p3 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 52%;
}

@property --lp-cuerda-p4 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 59%;
}

@property --lp-cuerda-p5 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 71%;
}

@property --lp-cuerda-avance {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.lp-cuerda {
    /* ── La universidad ────────────────────────────────────────────────── */
    --lp-uni: #0F2B5C;
    --lp-uni-alto: #1B4A9C;
    --lp-uni-oro: #E8B931;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-suave: #D3DFF3;
    /* ── El taller: yeso marfil de día, nogal de noche ─────────────────── */
    --lp-pared: #F5F0E6;
    --lp-pared-baja: #ECE4D4;
    --lp-pared-linea: #D3C6AE;
    --lp-tinta: #1F1A15;
    --lp-tinta-suave: #4F463B;
    --lp-laton-texto: #7A5718;
    --lp-laton-filete: #C9A24E;
    --lp-panel: rgba(255, 255, 255, .62);
    --lp-sombra: rgba(40, 28, 12, .2);
    --lp-sombra-honda: rgba(30, 20, 8, .38);
    --lp-sombra-flotante: rgba(0, 0, 0, .4);
    /* ── Los metales, iguales en los dos temas ─────────────────────────── */
    --lp-laton-alto: #F2DA9A;
    --lp-laton-medio: #B8913F;
    --lp-laton-brillo: #F5E3AE;
    --lp-laton-bajo: #8E6B27;
    --lp-laton-trazo: #5E4517;
    --lp-laton: linear-gradient(135deg, #F2DA9A 0%, #B8913F 42%, #F5E3AE 58%, #8E6B27 100%);
    --lp-laton-moleteado: repeating-linear-gradient(90deg, #8E6B27 0 2px, #F2DA9A 2px 4px);
    --lp-acero-alto: #2E5BA8;
    --lp-acero-bajo: #14295A;
    /* ── Esmaltes y papeles: claros en los dos temas ───────────────────── */
    --lp-esmalte: #FBF8F1;
    --lp-esmalte-tinta: #1B1814;
    --lp-esmalte-suave: #5A5246;
    --lp-esmalte-rojo: #A3261C;
    --lp-esmalte-marca: rgba(27, 24, 20, .55);
    --lp-papel: #FBF8F0;
    --lp-papel-tinta: #1D1914;
    --lp-papel-suave: #574E42;
    --lp-papel-linea: #DDD3C0;
    --lp-papel-oro: #7A5718;
    --lp-papel-pliegue: rgba(90, 70, 40, .1);
    --lp-papel-resalte: #F3E4BC;
    --lp-carton: #EFE2C4;
    --lp-carton-tinta: #2A2116;
    --lp-carton-suave: #594932;
    --lp-carton-borde: #C9B48A;
    --lp-carton-oro: #6E4F15;
    --lp-cordel: #8C6A3A;
    --lp-almanaque: #FFFFFF;
    --lp-almanaque-tinta: #1D1914;
    --lp-almanaque-suave: #554D46;
    --lp-almanaque-rojo: #B3261E;
    --lp-almanaque-borde: #D9D2C8;
    --lp-almanaque-taco: #7A1F1A;
    --lp-almanaque-taco-tinta: #F6DFA9;
    /* ── Salas fijas: oscuras en los dos temas ─────────────────────────── */
    --lp-terciopelo: #12362B;
    --lp-terciopelo-alto: #1D4D3D;
    --lp-terciopelo-bajo: #0A241C;
    --lp-terciopelo-tinta: #F3EEDF;
    --lp-terciopelo-suave: #CFE0D6;
    --lp-terciopelo-linea: rgba(243, 238, 223, .22);
    --lp-terciopelo-oro: #E6C878;
    --lp-terciopelo-brillo: rgba(230, 200, 120, .5);
    --lp-madera: #3B2414;
    --lp-madera-alta: #57361E;
    --lp-madera-veta: rgba(0, 0, 0, .16);
    --lp-madera-tinta: #F6EBDA;
    --lp-madera-suave: #E2CFB4;
    --lp-madera-oro: #E9C77C;
    --lp-madera-linea: rgba(246, 235, 218, .2);
    --lp-noche: #0B1D3F;
    --lp-noche-alta: #143066;
    --lp-noche-tinta: #F3F0E8;
    --lp-noche-suave: #CBD5E8;
    --lp-noche-oro: #E8C46A;
    --lp-noche-linea: rgba(243, 240, 232, .22);
    --lp-noche-luz: rgba(232, 196, 106, .18);
    /* ── Las seis áreas del examen ─────────────────────────────────────── */
    --lp-area-habilidades: #E2BC5E;
    --lp-area-matematica: #8DB2F0;
    --lp-area-comunicacion: #F08A80;
    --lp-area-personal: #F2EADB;
    --lp-area-sociales: #C3AAF0;
    --lp-area-ciencia: #7FD6BC;
    /* ── Sombras y brillos de los objetos ──────────────────────────────── */
    --lp-filo: rgba(0, 0, 0, .2);
    --lp-filo-papel: rgba(0, 0, 0, .08);
    --lp-brillo-filo: rgba(255, 255, 255, .3);
    --lp-hundido: rgba(0, 0, 0, .3);
    --lp-sombra-objeto: rgba(0, 0, 0, .45);
    --lp-sombra-colgada: rgba(0, 0, 0, .62);
    /* ── La acción ─────────────────────────────────────────────────────── */
    --lp-accion: #1F3E7A;
    --lp-accion-alta: #142B57;
    --lp-accion-tinta: #FFFFFF;
    --lp-accion-borde: #C9A24E;
    --lp-accion-papel: #1F3E7A;
    --lp-accion-papel-alta: #142B57;
    --lp-accion-papel-tinta: #FFFFFF;
    --lp-accion-papel-borde: #C9A24E;
    --lp-accion-clara: #E2C06C;
    --lp-accion-clara-alta: #EDD293;
    --lp-accion-clara-tinta: #1A1407;
    --lp-accion-clara-borde: #F7E7BE;
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-antigua: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "Iowan Old Style", Lora, Georgia, serif;
    --lp-texto: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    /* ── Superficie por defecto: el taller ─────────────────────────────── */
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-pared-linea);
    --lp-sup-oro: var(--lp-laton-texto);
    --lp-foco: var(--lp-accion);
    --lp-dibujo-trazo: var(--lp-tinta);
    --lp-dibujo-grosor: 1.8px;
    margin: 0;
    background: var(--lp-pared);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: el taller 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. Metales, esmaltes, papeles y salas fijas no
   cambian. */
[data-tema="oscuro"] .lp-cuerda {
    --lp-uni: #0A1F47;
    --lp-uni-alto: #12336E;
    --lp-uni-oro: #EDC468;
    --lp-uni-suave: #D8E2F4;
    --lp-pared: #15110D;
    --lp-pared-baja: #1C1712;
    --lp-pared-linea: #3B3128;
    --lp-tinta: #F2EBDD;
    --lp-tinta-suave: #C4B8A4;
    --lp-laton-texto: #DDB96C;
    --lp-laton-filete: #A8843C;
    --lp-panel: rgba(42, 35, 27, .78);
    --lp-sombra: rgba(0, 0, 0, .5);
    --lp-sombra-honda: rgba(0, 0, 0, .72);
    --lp-sombra-flotante: rgba(0, 0, 0, .65);
    --lp-accion: #D9B661;
    --lp-accion-alta: #E8CD8C;
    --lp-accion-tinta: #1A1407;
    --lp-accion-borde: #F1DDAA;
    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-cuerda, que no ve sus variables. */
body:has(> .lp-cuerda) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0F2B5C;
}

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

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

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

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

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

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

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

.lp-cuerda :where(dt, th) {
    font-weight: inherit;
}

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

.lp-cuerda,
.lp-cuerda *,
.lp-cuerda *::before,
.lp-cuerda *::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-cuerda [hidden] {
    display: none !important;
}

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

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

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-cuerda [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-cuerda :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-cuerda :where(a, button, 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(:focus-visible) o
   con el combinador de hermanos. */
.lp-cuerda__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> y los degradados. Los
   colores llegan por variables, que sí atraviesan el <use>. */
.lp-cuerda__simbolos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lp-cuerda__t-laton-alto {
    stop-color: var(--lp-laton-alto);
}

.lp-cuerda__t-laton-medio {
    stop-color: var(--lp-laton-medio);
}

.lp-cuerda__t-laton-brillo {
    stop-color: var(--lp-laton-brillo);
}

.lp-cuerda__t-laton-bajo {
    stop-color: var(--lp-laton-bajo);
}

.lp-cuerda__t-acero-alto {
    stop-color: var(--lp-acero-alto);
}

.lp-cuerda__t-acero-bajo {
    stop-color: var(--lp-acero-bajo);
}

/* El engranaje es de latón con su degradado; donde hace de icono (botones,
   preguntas) toma el color de la letra por --lp-engranaje-relleno. */
.lp-cuerda__t-engranaje {
    fill: var(--lp-engranaje-relleno, url(#lp-cuerda-laton));
    stroke: var(--lp-engranaje-trazo, var(--lp-laton-trazo));
    stroke-width: .8;
}

.lp-cuerda__t-linea {
    fill: none;
    stroke: var(--lp-dibujo-trazo);
    stroke-width: var(--lp-dibujo-grosor);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

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

.lp-cuerda__t-emblema-trazo {
    fill: none;
    stroke: var(--lp-uni-oro);
    stroke-width: 1.6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* La esfera: esmalte, marcas, números romanos con la XII en rojo. */
.lp-cuerda__t-esmalte {
    fill: var(--lp-esmalte);
}

.lp-cuerda__t-esfera-linea,
.lp-cuerda__t-esfera-fina,
.lp-cuerda__t-esfera-gruesa {
    fill: none;
    stroke: var(--lp-esmalte-tinta);
    stroke-linecap: round;
}

.lp-cuerda__t-esfera-linea {
    stroke-width: .8;
}

.lp-cuerda__t-esfera-fina {
    stroke-width: .9;
}

.lp-cuerda__t-esfera-gruesa {
    stroke-width: 2.2;
}

.lp-cuerda__t-esfera-numero,
.lp-cuerda__t-esfera-doce,
.lp-cuerda__t-esfera-marca,
.lp-cuerda__t-esfera-lugar {
    text-anchor: middle;
}

.lp-cuerda__t-esfera-numero,
.lp-cuerda__t-esfera-doce {
    fill: var(--lp-esmalte-tinta);
    font-size: 15px;
}

.lp-cuerda__t-esfera-doce {
    fill: var(--lp-esmalte-rojo);
}

.lp-cuerda__t-esfera-marca {
    fill: var(--lp-esmalte-tinta);
    font-size: 8.5px;
    letter-spacing: 2px;
}

.lp-cuerda__t-esfera-lugar {
    fill: var(--lp-esmalte-suave);
    font-size: 5px;
    letter-spacing: 1.5px;
}

.lp-cuerda__t-aguja {
    fill: url(#lp-cuerda-acero);
}

.lp-cuerda__t-rubi {
    fill: var(--lp-esmalte-rojo);
}

/* ═══ Superficies ══════════════════════════════════════════════════════════ */
.lp-cuerda__pared {
    background: var(--lp-pared);
    color: var(--lp-tinta);
}

.lp-cuerda__pared--baja {
    background: var(--lp-pared-baja);
}

/* El terciopelo del estuche: un brillo suave arriba y el pelo más oscuro abajo. */
.lp-cuerda__terciopelo {
    background:
        radial-gradient(ellipse 70% 55% at 50% 0, var(--lp-terciopelo-alto), transparent 72%),
        linear-gradient(180deg, var(--lp-terciopelo), 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: var(--lp-terciopelo-linea);
    --lp-sup-oro: var(--lp-terciopelo-oro);
    --lp-foco: var(--lp-terciopelo-oro);
    --lp-accion: var(--lp-accion-clara);
    --lp-accion-alta: var(--lp-accion-clara-alta);
    --lp-accion-tinta: var(--lp-accion-clara-tinta);
    --lp-accion-borde: var(--lp-accion-clara-borde);
}

/* La madera del banco: vetas con dos degradados repetidos. */
.lp-cuerda__madera {
    background:
        repeating-linear-gradient(94deg, transparent 0 .9rem, var(--lp-madera-veta) .9rem 1rem, transparent 1rem 2.7rem),
        repeating-linear-gradient(86deg, transparent 0 2.1rem, var(--lp-madera-veta) 2.1rem 2.18rem, transparent 2.18rem 4.4rem),
        linear-gradient(180deg, var(--lp-madera-alta), var(--lp-madera));
    color: var(--lp-madera-tinta);
    --lp-sup-tinta: var(--lp-madera-tinta);
    --lp-sup-suave: var(--lp-madera-suave);
    --lp-sup-linea: var(--lp-madera-linea);
    --lp-sup-oro: var(--lp-madera-oro);
    --lp-foco: var(--lp-madera-oro);
}

.lp-cuerda__noche {
    background:
        radial-gradient(ellipse 45% 60% at 22% 0, var(--lp-noche-luz), transparent 70%),
        linear-gradient(180deg, var(--lp-noche-alta), var(--lp-noche) 60%);
    color: var(--lp-noche-tinta);
    --lp-sup-tinta: var(--lp-noche-tinta);
    --lp-sup-suave: var(--lp-noche-suave);
    --lp-sup-linea: var(--lp-noche-linea);
    --lp-sup-oro: var(--lp-noche-oro);
    --lp-foco: var(--lp-noche-oro);
}

.lp-cuerda > section {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.25rem);
}

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

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

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

    .lp-cuerda__cabecera--centro .lp-cuerda__bajada {
        margin-inline: auto;
    }

/* El rótulo: versalitas grabadas entre dos rombos de latón. */
.lp-cuerda__rotulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
    color: var(--lp-sup-oro);
    font-family: var(--lp-antigua);
    font-size: 1rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
}

    .lp-cuerda__rotulo::before {
        content: "";
        flex: none;
        width: .5rem;
        height: .5rem;
        background: currentColor;
        rotate: 45deg;
    }

.lp-cuerda__cabecera--centro .lp-cuerda__rotulo {
    justify-content: center;
}

    .lp-cuerda__cabecera--centro .lp-cuerda__rotulo::after {
        content: "";
        flex: none;
        width: .5rem;
        height: .5rem;
        background: currentColor;
        rotate: 45deg;
    }

.lp-cuerda__h1 {
    font-family: var(--lp-antigua);
    font-size: min(clamp(2.8rem, 2rem + 4vw, 5.2rem), 13cqi);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1;
}

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

.lp-cuerda__h1-linea--fina {
    margin: .3em 0 .1em;
    color: var(--lp-sup-suave);
    font-size: .44em;
    font-style: italic;
}

.lp-cuerda__h1-linea--marca {
    color: var(--lp-sup-oro);
    font-size: .86em;
    font-weight: 700;
    letter-spacing: .01em;
}

.lp-cuerda__h2 {
    font-family: var(--lp-antigua);
    font-size: min(clamp(1.95rem, 1.4rem + 2.2vw, 3.1rem), 9.5cqi);
    font-weight: 400;
    line-height: 1.12;
    text-wrap: balance;
}

.lp-cuerda__bajada {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: 1.05rem;
    text-wrap: pretty;
}

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

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Píldoras de acero pavonado con filete de latón; el engranaje gira al pasar el
   puntero. */
.lp-cuerda__boton {
    --lp-boton-fondo: var(--lp-accion);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.1rem;
    padding: .7rem 1.55rem .8rem;
    border: 2px solid var(--lp-accion-borde);
    border-radius: 999px;
    background: var(--lp-boton-fondo);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-antigua);
    font-size: 1.15rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 1px 0 var(--lp-brillo-filo), 0 .8rem 1.3rem -.9rem var(--lp-sombra-honda);
    transition: background-color .2s ease, color .2s ease;
}

    .lp-cuerda__boton:hover {
        --lp-boton-fondo: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
    }

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

    .lp-cuerda__boton--linea:hover {
        --lp-boton-fondo: var(--lp-panel);
        color: var(--lp-sup-tinta);
    }

.lp-cuerda__boton--claro {
    --lp-boton-fondo: var(--lp-accion-clara);
    border-color: var(--lp-accion-clara-borde);
    color: var(--lp-accion-clara-tinta);
}

    .lp-cuerda__boton--claro:hover {
        --lp-boton-fondo: var(--lp-accion-clara-alta);
        color: var(--lp-accion-clara-tinta);
    }

.lp-cuerda__boton--grande {
    min-height: 3.6rem;
    padding: .9rem 2.2rem 1rem;
    font-size: 1.3rem;
}

.lp-cuerda__boton-icono {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    --lp-engranaje-relleno: currentColor;
    --lp-engranaje-trazo: none;
    transition: rotate .5s ease;
}

    .lp-cuerda__boton:hover .lp-cuerda__boton-icono {
        rotate: 60deg;
    }

.lp-cuerda__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.9rem;
}

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

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

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

@media (max-width: 575.98px) {
    .lp-cuerda__acciones .lp-cuerda__boton,
    .lp-cuerda__accion .lp-cuerda__boton,
    .lp-cuerda__placa-accion .lp-cuerda__boton {
        width: 100%;
    }
}

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

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

.lp-cuerda__franja-emblema {
    flex: none;
    width: 2.6rem;
    height: 1.9rem;
}

.lp-cuerda__franja-nombre {
    font-family: var(--lp-antigua);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
}

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

.lp-cuerda__franja-sello {
    margin-left: auto;
    padding: .15rem .8rem .2rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: 999px;
    color: var(--lp-uni-oro);
    font-family: var(--lp-antigua);
    font-size: .95rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .1em;
}

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

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

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

/* ═══ Portada · El reloj de bolsillo ═══════════════════════════════════════ */
.lp-cuerda > .lp-cuerda__portada {
    overflow: hidden;
    padding-block: clamp(2.75rem, 1.75rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.lp-cuerda__portada-rejilla {
    display: grid;
    gap: clamp(2.5rem, 2rem + 3vw, 4rem);
    align-items: center;
}

.lp-cuerda__entrada {
    max-width: 34rem;
    margin-top: 1.5rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
    text-wrap: pretty;
}

/* La ficha del reloj, como la que acompaña a un calibre. */
.lp-cuerda__ficha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    max-width: 34rem;
    margin-top: 2.1rem;
    border-top: 1px solid var(--lp-sup-linea);
}

.lp-cuerda__ficha-dato {
    padding: .6rem 0 .65rem;
    border-bottom: 1px solid var(--lp-sup-linea);
}

    .lp-cuerda__ficha-dato dt {
        color: var(--lp-sup-oro);
        font-family: var(--lp-antigua);
        font-size: .98rem;
        font-variant-caps: all-small-caps;
        font-weight: 700;
        letter-spacing: .1em;
    }

    .lp-cuerda__ficha-dato dd {
        font-size: .95rem;
        line-height: 1.45;
    }

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

/* El reloj abierto: la tapa con la foto a la izquierda, la caja con la esfera a
   la derecha, la bisagra entre las dos y la corona con su asa arriba. Las dos
   piezas son círculos de latón; el relleno es el ancho del bisel. */
.lp-cuerda__bolsillo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding-top: 3rem;
}

.lp-cuerda__tapa,
.lp-cuerda__caja {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 6%;
    background: var(--lp-laton);
    box-shadow: inset 0 0 0 2px var(--lp-laton-trazo), inset 0 .35rem .7rem var(--lp-brillo-filo), 0 1.5rem 2.2rem -1.2rem var(--lp-sombra-honda);
}

.lp-cuerda__tapa {
    z-index: 1;
    margin-right: -4%;
    rotate: -7deg;
}

    /* La bisagra: un cilindro moleteado que une tapa y caja. */
    .lp-cuerda__tapa::after {
        content: "";
        position: absolute;
        top: 42%;
        right: -5%;
        width: 9%;
        height: 16%;
        border-radius: .3rem;
        background: var(--lp-laton-moleteado);
        box-shadow: 0 0 0 1px var(--lp-laton-trazo);
    }

.lp-cuerda__tapa-foto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--lp-laton-trazo);
}

.lp-cuerda__caja {
    margin-left: -4%;
}

    /* La corona moleteada y el asa. */
    .lp-cuerda__caja::before {
        content: "";
        position: absolute;
        top: -8%;
        left: 50%;
        width: 15%;
        height: 9%;
        border-radius: .25rem .25rem .1rem .1rem;
        background: var(--lp-laton-moleteado);
        box-shadow: 0 0 0 1px var(--lp-laton-trazo);
        translate: -50% 0;
    }

    .lp-cuerda__caja::after {
        content: "";
        position: absolute;
        top: -24%;
        left: 50%;
        width: 26%;
        aspect-ratio: 1;
        border: .45rem solid var(--lp-laton-medio);
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px var(--lp-laton-trazo), 0 0 0 1px var(--lp-laton-trazo);
        translate: -50% 0;
    }

.lp-cuerda__esfera-dibujo,
.lp-cuerda__aguja {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
}

.lp-cuerda__esfera-dibujo {
    border-radius: 50%;
    font-family: var(--lp-antigua);
    box-shadow: inset 0 0 0 1px var(--lp-filo);
}

/* Cada aguja gira dentro de su propio svg, alrededor del centro de la esfera:
   si girara el svg entero, las esquinas de su caja cuadrada asomarían fuera del
   reloj y en pantallas estrechas darían a la página desplazamiento lateral. */
.lp-cuerda__aguja use {
    transform-box: view-box;
    transform-origin: 50% 50%;
}

/* Las 10:10 de los escaparates de relojería. */
.lp-cuerda__aguja--hora use {
    rotate: 305deg;
}

.lp-cuerda__aguja--minuto use {
    rotate: 60deg;
}

.lp-cuerda__grabado {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1.5rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-antigua);
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

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

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

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

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

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

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

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

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

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

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

    /* El reloj de la portada se pone en hora al cargar: el minutero da una
       vuelta entera de más y el horario llega a su sitio. */
    .lp-cuerda--animada .lp-cuerda__portada .lp-cuerda__aguja--hora use {
        animation: lp-cuerda-horario 2.6s cubic-bezier(.25, .8, .25, 1) .3s both;
    }

    .lp-cuerda--animada .lp-cuerda__portada .lp-cuerda__aguja--minuto use {
        animation: lp-cuerda-minutero 2.6s cubic-bezier(.25, .8, .25, 1) .3s both;
    }

    .lp-cuerda--animada .lp-cuerda__tapa {
        animation: lp-cuerda-abrir-tapa 1.4s cubic-bezier(.3, 1.3, .5, 1) .1s both;
    }
}

@keyframes lp-cuerda-horario {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 305deg;
    }
}

@keyframes lp-cuerda-minutero {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 420deg;
    }
}

@keyframes lp-cuerda-abrir-tapa {
    from {
        rotate: 8deg;
        translate: 18% 0;
    }

    to {
        rotate: -7deg;
        translate: 0 0;
    }
}

/* ═══ El mecanismo ═════════════════════════════════════════════════════════
   El ancho de cada engranaje sale de sus dientes: el dibujo mide 4 × dientes +
   10 unidades y --lp-escala dice cuántos píxeles vale cada una. Tres por fila
   hasta que caben los seis. En tres columnas cada una toma su engranaje más
   ancho (74 + 90 + 90 = 254 unidades): la escala reparte entre ellas el ancho
   del contenedor que queda tras los dos huecos, así el tren nunca se sale por
   los lados, con un tope para que no crezca de más. Por debajo de 1100 px el
   contenedor mide la ventana menos el margen de 1rem por lado; se cuenta con vw
   y no con unidades de contenedor porque un navegador que no las entienda
   dejaría los engranajes sin ancho. */
.lp-cuerda__tren {
    --lp-hueco-tren: clamp(.4rem, 1.6vw, 1.75rem);
    --lp-escala: clamp(.8px, (100vw - 2rem - 2 * var(--lp-hueco-tren)) / 254, 1.9px);
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: start;
    gap: 1.5rem var(--lp-hueco-tren);
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lp-cuerda__engranaje {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: calc(var(--lp-tam) * var(--lp-escala));
    text-align: center;
    cursor: pointer;
}

.lp-cuerda__engranaje--12 {
    --lp-tam: 58;
    --lp-dientes: 12;
}

.lp-cuerda__engranaje--16 {
    --lp-tam: 74;
    --lp-dientes: 16;
}

.lp-cuerda__engranaje--20 {
    --lp-tam: 90;
    --lp-dientes: 20;
}

.lp-cuerda__engranaje--horario {
    --lp-sentido: 1;
}

.lp-cuerda__engranaje--antihorario {
    --lp-sentido: -1;
}

.lp-cuerda__rueda {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

/* Cada paso del tren gira tres dientes: la rueda pequeña da más vuelta que la
   grande, como en un tren de verdad, y las vecinas giran en sentidos opuestos. */
.lp-cuerda__rueda-dibujo {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .5;
    rotate: calc(var(--lp-paso, 0) * 1080deg / var(--lp-dientes) * var(--lp-sentido));
    transition: rotate 1.2s cubic-bezier(.3, .8, .3, 1), opacity .3s ease, filter .3s ease;
}

.lp-cuerda__rueda-letra {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--lp-esmalte);
    color: var(--lp-esmalte-tinta);
    font-family: var(--lp-antigua);
    font-size: clamp(.95rem, .8rem + .6vw, 1.45rem);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--lp-laton-trazo), 0 .3rem .5rem var(--lp-sombra-objeto);
    translate: -50% -50%;
}

/* El nombre mide lo que su engranaje: en móvil «Agropecuarias» no cabe en la
   rueda de 16 dientes y se parte con guion; donde el navegador no sabe partir
   en español, se corta sin él antes que invadir el nombre vecino. */
.lp-cuerda__engranaje-nombre {
    color: var(--lp-terciopelo-suave);
    font-family: var(--lp-antigua);
    font-size: clamp(.82rem, .75rem + .25vw, .98rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.lp-cuerda__engranaje:hover .lp-cuerda__rueda-dibujo {
    opacity: .8;
}

.lp-cuerda__engranaje:has(:checked) .lp-cuerda__rueda-dibujo {
    opacity: 1;
    filter: drop-shadow(0 0 .7rem var(--lp-terciopelo-brillo));
}

.lp-cuerda__engranaje:has(:checked) .lp-cuerda__engranaje-nombre {
    color: var(--lp-terciopelo-oro);
    font-weight: 700;
}

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

.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-b:checked) {
    --lp-paso: 1;
}

.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-c:checked) {
    --lp-paso: 2;
}

.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-d:checked) {
    --lp-paso: 3;
}

.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-e:checked) {
    --lp-paso: 4;
}

.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-f:checked) {
    --lp-paso: 5;
}

/* Los seis en fila suman 444 unidades: al tope de escala y con sus cinco
   huecos ocupan unos 985 px, que caben desde 1100 px. */
@media (min-width: 1100px) {
    .lp-cuerda__tren {
        --lp-escala: 1.9px;
        grid-template-columns: repeat(6, auto);
    }
}

/* La lectura: la placa del grupo y la esfera de su examen. */
.lp-cuerda__lectura {
    display: grid;
    gap: 2rem;
}

/* Sin :has() se ven las seis placas una tras otra; con él, solo la del grupo
   marcado, que entra con un pequeño desliz. */
@supports selector(:has(a)) {
    .lp-cuerda__mecanismo:has(#lp-cuerda-grupo-a:checked) .lp-cuerda__placa:not([data-grupo="a"]),
    .lp-cuerda__mecanismo:has(#lp-cuerda-grupo-b:checked) .lp-cuerda__placa:not([data-grupo="b"]),
    .lp-cuerda__mecanismo:has(#lp-cuerda-grupo-c:checked) .lp-cuerda__placa:not([data-grupo="c"]),
    .lp-cuerda__mecanismo:has(#lp-cuerda-grupo-d:checked) .lp-cuerda__placa:not([data-grupo="d"]),
    .lp-cuerda__mecanismo:has(#lp-cuerda-grupo-e:checked) .lp-cuerda__placa:not([data-grupo="e"]),
    .lp-cuerda__mecanismo:has(#lp-cuerda-grupo-f:checked) .lp-cuerda__placa:not([data-grupo="f"]) {
        display: none;
    }
}

.lp-cuerda__placas {
    display: grid;
    gap: 1.5rem;
}

/* La placa es esmalte claro en los dos temas, con su propia acción. */
.lp-cuerda__placa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "relicario texto"
        "facultades facultades"
        "accion accion";
    align-items: center;
    gap: 1.25rem 1.5rem;
    padding: clamp(1.25rem, 1rem + 2vw, 2rem);
    border-radius: .5rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: inset 0 0 0 1px var(--lp-papel-linea), 0 1.6rem 2.4rem -1.4rem var(--lp-sombra-colgada);
    --lp-sup-tinta: var(--lp-papel-tinta);
    --lp-sup-suave: var(--lp-papel-suave);
    --lp-sup-linea: var(--lp-papel-linea);
    --lp-sup-oro: var(--lp-papel-oro);
    --lp-foco: var(--lp-accion-papel);
    --lp-accion: var(--lp-accion-papel);
    --lp-accion-alta: var(--lp-accion-papel-alta);
    --lp-accion-tinta: var(--lp-accion-papel-tinta);
    --lp-accion-borde: var(--lp-accion-papel-borde);
}

/* El relicario: la foto redonda en un bisel de latón, con su argolla. */
.lp-cuerda__relicario {
    position: relative;
    grid-area: relicario;
    width: clamp(6.25rem, 4rem + 9vw, 9.5rem);
    aspect-ratio: 1;
    margin-top: .9rem;
    padding: .45rem;
    border-radius: 50%;
    background: var(--lp-laton);
    box-shadow: inset 0 0 0 1px var(--lp-laton-trazo), 0 .8rem 1.2rem -.7rem var(--lp-sombra-objeto);
}

    .lp-cuerda__relicario::before {
        content: "";
        position: absolute;
        top: -1rem;
        left: 50%;
        width: 1.35rem;
        aspect-ratio: 1;
        border: .25rem solid var(--lp-laton-medio);
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--lp-laton-trazo);
        translate: -50% 0;
    }

.lp-cuerda__relicario-foto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--lp-laton-trazo);
}

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

.lp-cuerda__placa-letra {
    color: var(--lp-papel-oro);
    font-family: var(--lp-antigua);
    font-size: 1.05rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .12em;
}

.lp-cuerda__placa-titulo {
    margin-top: .15rem;
    font-family: var(--lp-antigua);
    font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
    line-height: 1.12;
    text-wrap: balance;
}

.lp-cuerda__placa-resumen {
    margin-top: .5rem;
    color: var(--lp-papel-suave);
    font-size: .95rem;
}

.lp-cuerda__placa-facultades {
    display: grid;
    grid-area: facultades;
    gap: .8rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--lp-papel-linea);
}

    .lp-cuerda__placa-facultades dt {
        color: var(--lp-papel-oro);
        font-family: var(--lp-antigua);
        font-size: 1rem;
        font-variant-caps: all-small-caps;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .lp-cuerda__placa-facultades dd {
        font-size: .95rem;
        line-height: 1.5;
    }

.lp-cuerda__placa-accion {
    grid-area: accion;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-cuerda__placa {
        animation: lp-cuerda-placa .5s ease-out;
    }
}

@keyframes lp-cuerda-placa {
    from {
        opacity: 0;
        translate: 0 .75rem;
    }
}

/* La esfera del examen. Cien marcas de 2,5° con 1,1° de aire (3,6° por
   pregunta): la máscara cruza las marcas con un anillo y el degradado cónico
   pinta las seis áreas. Cada frontera cae al inicio de una marca. */
.lp-cuerda__mecanismo {
    --lp-cuerda-p2: 46%;
    --lp-cuerda-p3: 52%;
    --lp-cuerda-p4: 59%;
    --lp-cuerda-p5: 71%;
    transition: --lp-cuerda-p2 .9s ease, --lp-cuerda-p3 .9s ease, --lp-cuerda-p4 .9s ease, --lp-cuerda-p5 .9s ease;
}

    .lp-cuerda__mecanismo:has(:is(#lp-cuerda-grupo-b, #lp-cuerda-grupo-c, #lp-cuerda-grupo-d):checked) {
        --lp-cuerda-p2: 44%;
        --lp-cuerda-p3: 58%;
        --lp-cuerda-p4: 66%;
        --lp-cuerda-p5: 88%;
    }

    .lp-cuerda__mecanismo:has(:is(#lp-cuerda-grupo-e, #lp-cuerda-grupo-f):checked) {
        --lp-cuerda-p2: 54%;
        --lp-cuerda-p3: 61%;
        --lp-cuerda-p4: 67%;
        --lp-cuerda-p5: 79%;
    }

.lp-cuerda__examen {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.lp-cuerda__esfera-examen {
    position: relative;
    width: min(100%, 21rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-terciopelo-bajo) 0 64%, transparent 65%);
    box-shadow: 0 0 0 .55rem var(--lp-laton-medio), 0 0 0 calc(.55rem + 1px) var(--lp-laton-trazo), 0 1.4rem 2rem -1rem var(--lp-sombra-colgada);
}

.lp-cuerda__anillo {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: conic-gradient(var(--lp-area-habilidades) 0 30%, var(--lp-area-matematica) 0 var(--lp-cuerda-p2), var(--lp-area-comunicacion) 0 var(--lp-cuerda-p3), var(--lp-area-personal) 0 var(--lp-cuerda-p4), var(--lp-area-sociales) 0 var(--lp-cuerda-p5), var(--lp-area-ciencia) 0);
    -webkit-mask: repeating-conic-gradient(#000 0 2.5deg, transparent 0 3.6deg), radial-gradient(farthest-side, transparent 70%, #000 71%);
    -webkit-mask-composite: source-in;
    mask: repeating-conic-gradient(#000 0 2.5deg, transparent 0 3.6deg), radial-gradient(farthest-side, transparent 70%, #000 71%);
    mask-composite: intersect;
}

.lp-cuerda__esfera-centro {
    position: absolute;
    inset: 24%;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: var(--lp-esmalte);
    color: var(--lp-esmalte-tinta);
    text-align: center;
    box-shadow: inset 0 0 0 1px var(--lp-filo), inset 0 .3rem .6rem var(--lp-hundido);
}

.lp-cuerda__esfera-cifra {
    font-family: var(--lp-antigua);
    font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.lp-cuerda__esfera-texto {
    max-width: 8rem;
    margin-top: .2rem;
    color: var(--lp-esmalte-suave);
    font-size: .78rem;
    line-height: 1.3;
}

.lp-cuerda__leyenda {
    display: grid;
    gap: .35rem;
}

.lp-cuerda__leyenda-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--lp-terciopelo-linea);
    font-size: .95rem;
}

    .lp-cuerda__leyenda-item::before {
        content: "";
        width: .95rem;
        height: .95rem;
        border-radius: .2rem;
        background: var(--lp-area);
    }

.lp-cuerda__leyenda-item--habilidades {
    --lp-area: var(--lp-area-habilidades);
}

.lp-cuerda__leyenda-item--matematica {
    --lp-area: var(--lp-area-matematica);
}

.lp-cuerda__leyenda-item--comunicacion {
    --lp-area: var(--lp-area-comunicacion);
}

.lp-cuerda__leyenda-item--personal {
    --lp-area: var(--lp-area-personal);
}

.lp-cuerda__leyenda-item--sociales {
    --lp-area: var(--lp-area-sociales);
}

.lp-cuerda__leyenda-item--ciencia {
    --lp-area: var(--lp-area-ciencia);
}

.lp-cuerda__leyenda-cuenta {
    font-family: var(--lp-antigua);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    /* Cada cifra trae las tres versiones del examen: se enseña la del grupo
       marcado; sin :has(), la del grupo A, que es el que viene marcado. */
    .lp-cuerda__leyenda-cuenta > span {
        display: none;
    }

@supports not selector(:has(a)) {
    .lp-cuerda__leyenda-cuenta > [data-para="a"] {
        display: inline;
    }
}

.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-a:checked) .lp-cuerda__leyenda-cuenta > [data-para="a"],
.lp-cuerda__mecanismo:has(:is(#lp-cuerda-grupo-b, #lp-cuerda-grupo-c, #lp-cuerda-grupo-d):checked) .lp-cuerda__leyenda-cuenta > [data-para="bcd"],
.lp-cuerda__mecanismo:has(:is(#lp-cuerda-grupo-e, #lp-cuerda-grupo-f):checked) .lp-cuerda__leyenda-cuenta > [data-para="ef"] {
    display: inline;
}

.lp-cuerda__examen-nota {
    color: var(--lp-terciopelo-suave);
    font-size: .88rem;
}

/* El desglose por curso: papel claro con desplazamiento lateral propio. */
.lp-cuerda__desglose {
    border-radius: .5rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: inset 0 0 0 1px var(--lp-papel-linea);
    --lp-foco: var(--lp-accion-papel);
}

.lp-cuerda__desglose-boton {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem;
    font-family: var(--lp-antigua);
    font-size: 1.1rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
    list-style: none;
    cursor: pointer;
}

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

    .lp-cuerda__desglose-boton::before {
        content: "";
        width: .55rem;
        height: .55rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        rotate: -45deg;
        transition: rotate .25s ease;
    }

.lp-cuerda__desglose[open] .lp-cuerda__desglose-boton::before {
    rotate: 45deg;
}

.lp-cuerda__tabla-marco {
    overflow-x: auto;
    padding: 0 1.1rem 1.1rem;
}

.lp-cuerda__tabla {
    width: 100%;
    min-width: 21rem;
    border-collapse: collapse;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

    .lp-cuerda__tabla th,
    .lp-cuerda__tabla td {
        padding: .32rem .45rem;
        border-bottom: 1px solid var(--lp-papel-linea);
        text-align: center;
    }

    .lp-cuerda__tabla th[scope="row"],
    .lp-cuerda__tabla thead th:first-child {
        text-align: left;
    }

    .lp-cuerda__tabla thead th {
        font-family: var(--lp-antigua);
        font-weight: 700;
    }

.lp-cuerda__tabla-area th {
    padding-top: .75rem;
    color: var(--lp-papel-oro);
    font-family: var(--lp-antigua);
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
}

.lp-cuerda__tabla-total th,
.lp-cuerda__tabla-total td {
    border-bottom: 0;
    font-weight: 700;
}

/* La columna del grupo marcado se resalta. */
.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-a:checked) .lp-cuerda__tabla [data-columna="a"],
.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-b:checked) .lp-cuerda__tabla [data-columna="b"],
.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-c:checked) .lp-cuerda__tabla [data-columna="c"],
.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-d:checked) .lp-cuerda__tabla [data-columna="d"],
.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-e:checked) .lp-cuerda__tabla [data-columna="e"],
.lp-cuerda__mecanismo:has(#lp-cuerda-grupo-f:checked) .lp-cuerda__tabla [data-columna="f"] {
    background: var(--lp-papel-resalte);
    font-weight: 700;
}

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

/* ═══ La balanza del puntaje ═══════════════════════════════════════════════
   La cruz gira --lp-inclinacion alrededor de su centro; los platillos cuelgan de
   sus extremos y giran lo contrario para quedarse derechos. El guion cambia la
   variable; sin él queda la del ejemplo (60 correctas, 20 incorrectas). Los
   extremos de la cruz quedan siempre a medio platillo del borde del dibujo: en
   pantallas estrechas la cruz se acorta y los platillos no se salen. */
.lp-cuerda__balanza-rejilla {
    display: grid;
    gap: 2rem;
}

.lp-cuerda__balanza {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 1rem + 2vw, 2rem);
    border: 1px solid var(--lp-pared-linea);
    border-radius: .6rem;
    background: var(--lp-panel);
}

.lp-cuerda__balanza-dibujo {
    --lp-inclinacion: -17.3deg;
    --lp-platillo: clamp(6rem, 4rem + 8vw, 8.5rem);
    position: relative;
    height: clamp(13rem, 10rem + 9vw, 16.5rem);
}

.lp-cuerda__balanza-columna {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    width: .8rem;
    height: 74%;
    border-radius: .4rem .4rem 0 0;
    background: var(--lp-laton);
    box-shadow: inset 0 0 0 1px var(--lp-laton-trazo);
    translate: -50% 0;
}

.lp-cuerda__balanza-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 42%;
    height: 1.2rem;
    border-radius: .8rem .8rem .25rem .25rem;
    background: var(--lp-laton);
    box-shadow: inset 0 0 0 1px var(--lp-laton-trazo), 0 .6rem 1rem -.6rem var(--lp-sombra-objeto);
    translate: -50% 0;
}

.lp-cuerda__balanza-cruz {
    position: absolute;
    top: 22%;
    right: max(14%, var(--lp-platillo) / 2 + .25rem);
    left: max(14%, var(--lp-platillo) / 2 + .25rem);
    height: .55rem;
    border-radius: .3rem;
    background: var(--lp-laton);
    box-shadow: inset 0 0 0 1px var(--lp-laton-trazo);
    rotate: var(--lp-inclinacion);
    transition: rotate .7s cubic-bezier(.3, 1.4, .5, 1);
}

    /* El pivote. */
    .lp-cuerda__balanza-cruz::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.15rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--lp-laton);
        box-shadow: inset 0 0 0 2px var(--lp-laton-trazo);
        translate: -50% -50%;
    }

/* El fiel: la aguja que marca la inclinación sobre el pivote. */
.lp-cuerda__balanza-fiel {
    position: absolute;
    top: calc(22% - 2.6rem);
    left: 50%;
    width: .22rem;
    height: 2.9rem;
    margin-left: -.11rem;
    border-radius: .2rem;
    background: linear-gradient(var(--lp-acero-alto), var(--lp-acero-bajo));
    rotate: var(--lp-inclinacion);
    transform-origin: 50% 100%;
    transition: rotate .7s cubic-bezier(.3, 1.4, .5, 1);
}

.lp-cuerda__platillo {
    position: absolute;
    top: .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: var(--lp-platillo);
    height: 6.6rem;
    padding-bottom: .55rem;
    rotate: calc(-1 * var(--lp-inclinacion));
    transform-origin: 50% 0;
    transition: rotate .7s cubic-bezier(.3, 1.4, .5, 1);
}

.lp-cuerda__platillo--correctas {
    left: 0;
    translate: -50% 0;
}

.lp-cuerda__platillo--incorrectas {
    right: 0;
    translate: 50% 0;
}

    /* Las cuerdas en V y el plato. */
    .lp-cuerda__platillo::before {
        content: "";
        position: absolute;
        top: 0;
        right: 12%;
        bottom: 2.3rem;
        left: 12%;
        background:
            linear-gradient(to top right, transparent calc(50% - 1px), var(--lp-laton-trazo) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
            linear-gradient(to top left, transparent calc(50% - 1px), var(--lp-laton-trazo) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat;
    }

    .lp-cuerda__platillo::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2.6rem;
        border-radius: 0 0 50% 50% / 0 0 100% 100%;
        background: var(--lp-laton);
        box-shadow: inset 0 0 0 1px var(--lp-laton-trazo), 0 .5rem .8rem -.5rem var(--lp-sombra-objeto);
    }

.lp-cuerda__platillo-nombre,
.lp-cuerda__platillo-peso {
    position: relative;
    z-index: 1;
    color: var(--lp-esmalte-tinta);
    line-height: 1.1;
}

.lp-cuerda__platillo-nombre {
    font-family: var(--lp-antigua);
    font-size: .9rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .06em;
}

.lp-cuerda__platillo-peso {
    font-family: var(--lp-antigua);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

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

.lp-cuerda__mando-etiqueta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--lp-antigua);
    font-size: 1.1rem;
    font-weight: 700;
}

.lp-cuerda__mando-valor {
    color: var(--lp-sup-oro);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.lp-cuerda__mando-barra {
    display: block;
    width: 100%;
    margin: .35rem 0 0;
    accent-color: var(--lp-accion);
    cursor: pointer;
}

.lp-cuerda__puntaje {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--lp-sup-linea);
}

.lp-cuerda__puntaje-etiqueta {
    color: var(--lp-sup-oro);
    font-family: var(--lp-antigua);
    font-size: 1.1rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
}

.lp-cuerda__puntaje-cifra {
    font-family: var(--lp-antigua);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lp-cuerda__puntaje-tope,
.lp-cuerda__puntaje-detalle,
.lp-cuerda__puntaje-ejemplo {
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

@media (min-width: 992px) {
    .lp-cuerda__balanza-rejilla {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas:
            "cabecera balanza"
            "accion balanza";
        align-items: start;
        column-gap: 3.5rem;
    }

        .lp-cuerda__balanza-rejilla > .lp-cuerda__cabecera {
            grid-area: cabecera;
        }

        .lp-cuerda__balanza-rejilla > .lp-cuerda__balanza {
            grid-area: balanza;
        }

        .lp-cuerda__balanza-rejilla > .lp-cuerda__accion {
            grid-area: accion;
            align-items: flex-start;
            margin-top: 0;
            text-align: left;
        }
}

/* ═══ Cuatro esferas ═══════════════════════════════════════════════════════
   Cada esfera pinta su tramo de año entre --lp-inicio y --lp-fin (centésimas);
   --lp-cuerda-avance es una propiedad registrada que, al entrar en pantalla,
   corre del inicio al fin: el arco se dibuja y la aguja lo sigue. */
.lp-cuerda__etapas {
    display: grid;
    gap: 1rem;
}

.lp-cuerda__etapa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 1.1rem;
    padding: 1.2rem 1.2rem 1.35rem;
    border: 1px solid var(--lp-pared-linea);
    border-radius: .6rem;
    background: var(--lp-panel);
}

.lp-cuerda__etapa--1 {
    --lp-inicio: 0;
    --lp-fin: 25;
}

.lp-cuerda__etapa--2 {
    --lp-inicio: 25;
    --lp-fin: 55;
}

.lp-cuerda__etapa--3 {
    --lp-inicio: 55;
    --lp-fin: 80;
}

.lp-cuerda__etapa--4 {
    --lp-inicio: 80;
    --lp-fin: 100;
}

.lp-cuerda__subesfera {
    --lp-cuerda-avance: var(--lp-fin);
    position: relative;
    display: grid;
    place-items: center;
    width: 4.9rem;
    aspect-ratio: 1;
    border: .3rem solid var(--lp-laton-medio);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--lp-esmalte) 0 58%, transparent 59%),
        repeating-conic-gradient(var(--lp-esmalte-marca) 0 1.2deg, transparent 1.2deg 30deg),
        var(--lp-esmalte);
    box-shadow: 0 0 0 1px var(--lp-laton-trazo), inset 0 .2rem .4rem var(--lp-hundido);
}

    /* El arco del tramo, en acero. */
    .lp-cuerda__subesfera::before {
        content: "";
        position: absolute;
        inset: 7%;
        border-radius: 50%;
        background: conic-gradient(transparent 0 calc(var(--lp-inicio) * 1%), var(--lp-acero-alto) 0 calc(var(--lp-cuerda-avance) * 1%), transparent 0);
        -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
        mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
    }

    /* La aguja, que apunta al final del tramo. */
    .lp-cuerda__subesfera::after {
        content: "";
        position: absolute;
        bottom: 50%;
        left: 50%;
        width: 2px;
        height: 34%;
        margin-left: -1px;
        border-radius: 1px;
        background: var(--lp-esmalte-rojo);
        rotate: calc(var(--lp-cuerda-avance) * 3.6deg);
        transform-origin: 50% 100%;
    }

.lp-cuerda__subesfera-numero {
    position: relative;
    z-index: 1;
    margin-top: 1.4rem;
    color: var(--lp-esmalte-tinta);
    font-family: var(--lp-antigua);
    font-size: .95rem;
    font-weight: 700;
}

.lp-cuerda__etapa-nombre {
    color: var(--lp-sup-oro);
    font-family: var(--lp-antigua);
    font-size: 1rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
}

.lp-cuerda__etapa-titulo {
    margin-top: .2rem;
    font-family: var(--lp-antigua);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
}

.lp-cuerda__etapa-cuando {
    display: flex;
    flex-direction: column;
    margin-top: .5rem;
    font-size: .88rem;
    line-height: 1.45;
}

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

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

.lp-cuerda__etapa-descripcion {
    margin-top: .55rem;
    color: var(--lp-sup-suave);
    font-size: .93rem;
}

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

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

    .lp-cuerda__etapa {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lp-cuerda--animada .lp-cuerda__subesfera {
        transition: --lp-cuerda-avance 1.5s cubic-bezier(.3, .7, .3, 1) .35s;
    }

    .lp-cuerda--animada .lp-cuerda__etapa:not(.lp-cuerda--visible) .lp-cuerda__subesfera {
        --lp-cuerda-avance: var(--lp-inicio);
    }
}

/* ═══ Ocho esferas ═════════════════════════════════════════════════════════
   Esmalte con marcas de hora y bisel de latón; la aguja roja da una vuelta al
   entrar en pantalla y se queda en las dos. */
.lp-cuerda__logros-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
}

.lp-cuerda__logro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    text-align: center;
}

.lp-cuerda__logro-esfera {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(6.2rem, 4.5rem + 6vw, 8.25rem);
    aspect-ratio: 1;
    border: .42rem solid var(--lp-laton-medio);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--lp-esmalte) 0 63%, transparent 64%),
        repeating-conic-gradient(var(--lp-esmalte-marca) 0 1.4deg, transparent 1.4deg 30deg),
        var(--lp-esmalte);
    box-shadow: 0 0 0 1px var(--lp-laton-trazo), inset 0 .25rem .5rem var(--lp-hundido), 0 1rem 1.4rem -.9rem var(--lp-sombra-colgada);
}

    .lp-cuerda__logro-esfera::after {
        content: "";
        position: absolute;
        bottom: 50%;
        left: 50%;
        width: 2px;
        height: 40%;
        margin-left: -1px;
        border-radius: 1px;
        background: var(--lp-esmalte-rojo);
        rotate: 60deg;
        transform-origin: 50% 100%;
    }

.lp-cuerda__logro-cifra {
    position: relative;
    z-index: 1;
    padding: 0 .15em;
    background: var(--lp-esmalte);
    color: var(--lp-esmalte-tinta);
    font-family: var(--lp-antigua);
    font-size: clamp(1rem, .8rem + 1vw, 1.55rem);
    font-variant-numeric: lining-nums;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.lp-cuerda__logro-texto {
    max-width: 16rem;
    color: var(--lp-madera-suave);
    font-size: .92rem;
    line-height: 1.45;
}

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

@media (prefers-reduced-motion: no-preference) {
    .lp-cuerda--animada .lp-cuerda__logro.lp-cuerda--visible .lp-cuerda__logro-esfera::after {
        animation: lp-cuerda-vuelta 1.6s cubic-bezier(.3, .7, .3, 1) calc(.3s + var(--lp-orden, 0) * 110ms) both;
    }
}

@keyframes lp-cuerda-vuelta {
    from {
        rotate: -300deg;
    }

    to {
        rotate: 60deg;
    }
}

/* ═══ Llaves de cuerda ═════════════════════════════════════════════════════
   Etiquetas de cartón colgadas de su gancho, con el ojal perforado (del color
   del muro, para que parezca un agujero) y el cordel. */
.lp-cuerda__tablero {
    position: relative;
    padding-top: 1.75rem;
}

    /* El listón de madera del que cuelgan. */
    .lp-cuerda__tablero::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1rem;
        border-radius: .3rem;
        background:
            repeating-linear-gradient(90deg, transparent 0 1.2rem, var(--lp-madera-veta) 1.2rem 1.3rem),
            linear-gradient(180deg, var(--lp-madera-alta), var(--lp-madera));
        box-shadow: 0 .4rem .7rem -.3rem var(--lp-sombra-objeto);
    }

/* Seis etiquetas: una, dos o tres por fila, para que ninguna fila quede coja. */
.lp-cuerda__llaves {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem 1.5rem;
    padding-top: 1.5rem;
}

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

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

/* El relleno lateral recoge lo que la etiqueta se balancea: girada desde el
   gancho, su borde de abajo se corre unos píxeles hacia un lado. */
.lp-cuerda__etiqueta {
    position: relative;
    padding-top: 1.6rem;
    padding-inline: .5rem;
}

    /* El gancho de latón y el cordel hasta el ojal. */
    .lp-cuerda__etiqueta::before {
        content: "";
        position: absolute;
        top: -.6rem;
        left: 50%;
        width: .95rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--lp-laton);
        box-shadow: inset 0 0 0 1px var(--lp-laton-trazo), 0 .2rem .3rem var(--lp-sombra-objeto);
        translate: -50% 0;
    }

    .lp-cuerda__etiqueta::after {
        content: "";
        position: absolute;
        top: .2rem;
        left: 50%;
        width: 2px;
        height: 2.4rem;
        margin-left: -1px;
        background: var(--lp-cordel);
    }

.lp-cuerda__etiqueta-carton {
    position: relative;
    height: 100%;
    padding: 2.2rem 1.25rem 1.3rem;
    border: 1px solid var(--lp-carton-borde);
    border-radius: .5rem .5rem .35rem .35rem;
    background:
        radial-gradient(circle at 50% 1.05rem, var(--lp-pared-baja) 0 .36rem, var(--lp-carton-borde) .37rem .5rem, transparent .52rem),
        var(--lp-carton);
    color: var(--lp-carton-tinta);
    box-shadow: 0 1rem 1.4rem -1rem var(--lp-sombra-honda);
    rotate: var(--lp-giro, 0deg);
    transform-origin: 50% -1.5rem;
    --lp-sup-oro: var(--lp-carton-oro);
    --lp-dibujo-trazo: var(--lp-carton-oro);
}

.lp-cuerda__etiqueta:nth-child(odd) .lp-cuerda__etiqueta-carton {
    --lp-giro: -1.2deg;
}

.lp-cuerda__etiqueta:nth-child(even) .lp-cuerda__etiqueta-carton {
    --lp-giro: 1deg;
}

.lp-cuerda__etiqueta-llave {
    position: absolute;
    top: .85rem;
    right: .9rem;
    width: 2rem;
    height: 2rem;
}

.lp-cuerda__etiqueta-numero {
    color: var(--lp-carton-oro);
    font-family: var(--lp-antigua);
    font-size: 1rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .1em;
}

.lp-cuerda__etiqueta-titulo {
    margin-top: .15rem;
    font-family: var(--lp-antigua);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}

.lp-cuerda__etiqueta-datos {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
}

    .lp-cuerda__etiqueta-datos dt {
        color: var(--lp-carton-oro);
        font-family: var(--lp-antigua);
        font-size: .95rem;
        font-variant-caps: all-small-caps;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .lp-cuerda__etiqueta-datos dd {
        color: var(--lp-carton-tinta);
        font-size: .9rem;
        line-height: 1.45;
    }

.lp-cuerda__llaves-nota {
    max-width: 46rem;
    margin-top: 2rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lp-cuerda__etiqueta:hover .lp-cuerda__etiqueta-carton {
        animation: lp-cuerda-mecer 1.1s ease-in-out;
    }
}

@keyframes lp-cuerda-mecer {
    0%,
    100% {
        rotate: var(--lp-giro, 0deg);
    }

    30% {
        rotate: calc(var(--lp-giro, 0deg) + 3.5deg);
    }

    65% {
        rotate: calc(var(--lp-giro, 0deg) - 2.5deg);
    }
}

/* ═══ Instrucciones de uso ═════════════════════════════════════════════════
   Papel plegado en tres: en pantalla ancha, dos sombras verticales marcan los
   pliegues entre columnas. */
.lp-cuerda__hoja-manual {
    padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    border: 1px solid var(--lp-papel-linea);
    border-radius: .3rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    box-shadow: 0 1.6rem 2.2rem -1.6rem var(--lp-sombra-honda);
    --lp-sup-tinta: var(--lp-papel-tinta);
    --lp-sup-suave: var(--lp-papel-suave);
    --lp-dibujo-trazo: var(--lp-papel-tinta);
}

.lp-cuerda__manual-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1.5rem;
    margin-bottom: 1.6rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid var(--lp-papel-tinta);
    font-family: var(--lp-antigua);
    font-size: 1rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .12em;
}

.lp-cuerda__figuras {
    display: grid;
    gap: 1.75rem 2.25rem;
}

.lp-cuerda__figura {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    grid-template-areas:
        "dibujo numero"
        "dibujo titulo"
        "dibujo texto";
    align-content: start;
    gap: .1rem 1rem;
}

.lp-cuerda__figura-dibujo {
    grid-area: dibujo;
    width: 4.4rem;
    height: 4.4rem;
    padding: .55rem;
    border: 1px solid var(--lp-papel-linea);
    border-radius: .3rem;
    background: var(--lp-esmalte);
}

.lp-cuerda__figura-numero {
    grid-area: numero;
    color: var(--lp-papel-oro);
    font-family: var(--lp-antigua);
    font-size: .95rem;
    font-style: italic;
}

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

.lp-cuerda__figura-texto {
    grid-area: texto;
    margin-top: .3rem;
    color: var(--lp-papel-suave);
    font-size: .92rem;
    line-height: 1.5;
}

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

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

    .lp-cuerda__hoja-manual {
        background-image: linear-gradient(90deg, transparent calc(33.33% - 1.5rem), var(--lp-papel-pliegue) 33.33%, transparent calc(33.33% + 1.5rem), transparent calc(66.67% - 1.5rem), var(--lp-papel-pliegue) 66.67%, transparent calc(66.67% + 1.5rem));
    }
}

/* ═══ El almanaque de la familia ═══════════════════════════════════════════
   Las hojas comparten la misma celda de la rejilla. La del radio marcado queda
   arriba y visible; las anteriores se van arrancadas hacia arriba; las que
   faltan esperan escondidas debajo. El canto del taco sale de dos sombras. */
.lp-cuerda__familia-rejilla {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.lp-cuerda__almanaque {
    position: relative;
    width: 100%;
    max-width: 23rem;
    margin-inline: auto;
    padding: 2.6rem 1rem 1.25rem;
    border-radius: .5rem;
    background: var(--lp-almanaque-taco);
    box-shadow: inset 0 0 0 1px var(--lp-filo), 0 1.6rem 2.2rem -1.4rem var(--lp-sombra-colgada);
    --lp-foco: var(--lp-almanaque-taco-tinta);
}

    /* El clavo del que cuelga. */
    .lp-cuerda__almanaque::before {
        content: "";
        position: absolute;
        top: -.55rem;
        left: 50%;
        width: 1.1rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--lp-laton);
        box-shadow: inset 0 0 0 1px var(--lp-laton-trazo), 0 .2rem .35rem var(--lp-sombra-objeto);
        translate: -50% 0;
    }

.lp-cuerda__almanaque-cabecera {
    position: absolute;
    top: .7rem;
    right: 0;
    left: 0;
    color: var(--lp-almanaque-taco-tinta);
    font-family: var(--lp-antigua);
    font-size: 1.05rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .16em;
    text-align: center;
}

.lp-cuerda__hojas {
    display: grid;
}

.lp-cuerda__hoja {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-height: 19rem;
    padding: 1.4rem 1.3rem 1.2rem;
    border-top: .5rem solid var(--lp-almanaque-rojo);
    border-radius: .15rem;
    background: var(--lp-almanaque);
    color: var(--lp-almanaque-tinta);
    visibility: hidden;
    box-shadow: 0 3px 0 -1px var(--lp-almanaque), 0 3px 0 0 var(--lp-almanaque-borde), 0 6px 0 -1px var(--lp-almanaque), 0 6px 0 0 var(--lp-almanaque-borde);
    --lp-foco: var(--lp-almanaque-rojo);
}

.lp-cuerda__hoja-dia {
    color: var(--lp-almanaque-rojo);
    font-family: var(--lp-antigua);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.lp-cuerda__hoja-titulo {
    margin-top: .4rem;
    font-family: var(--lp-antigua);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.lp-cuerda__hoja-texto {
    margin-top: .6rem;
    color: var(--lp-almanaque-suave);
    font-size: .98rem;
    text-align: center;
}

.lp-cuerda__hoja-arrancar {
    align-self: center;
    margin-top: auto;
    padding: .5rem 1rem;
    border: 1px dashed var(--lp-almanaque-borde);
    border-radius: 999px;
    color: var(--lp-almanaque-rojo);
    font-family: var(--lp-antigua);
    font-size: 1.05rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
}

    .lp-cuerda__hoja-arrancar:hover {
        border-style: solid;
        border-color: var(--lp-almanaque-rojo);
    }

/* La hoja del radio marcado, arriba y visible. */
#lp-cuerda-hoja-1:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--1,
#lp-cuerda-hoja-2:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--2,
#lp-cuerda-hoja-3:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--3,
#lp-cuerda-hoja-4:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--4,
#lp-cuerda-hoja-5:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--5 {
    z-index: 2;
    visibility: visible;
}

/* Las que ya se arrancaron. */
#lp-cuerda-hoja-2:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--1,
#lp-cuerda-hoja-3:checked ~ .lp-cuerda__hojas :is(.lp-cuerda__hoja--1, .lp-cuerda__hoja--2),
#lp-cuerda-hoja-4:checked ~ .lp-cuerda__hojas :is(.lp-cuerda__hoja--1, .lp-cuerda__hoja--2, .lp-cuerda__hoja--3),
#lp-cuerda-hoja-5:checked ~ .lp-cuerda__hojas :is(.lp-cuerda__hoja--1, .lp-cuerda__hoja--2, .lp-cuerda__hoja--3, .lp-cuerda__hoja--4) {
    z-index: 3;
    opacity: 0;
    translate: 0 -2.5rem;
    rotate: -7deg;
    pointer-events: none;
}

/* El foco del teclado en el radio se ve en su hoja. */
#lp-cuerda-hoja-1:focus-visible ~ .lp-cuerda__hojas .lp-cuerda__hoja--1,
#lp-cuerda-hoja-2:focus-visible ~ .lp-cuerda__hojas .lp-cuerda__hoja--2,
#lp-cuerda-hoja-3:focus-visible ~ .lp-cuerda__hojas .lp-cuerda__hoja--3,
#lp-cuerda-hoja-4:focus-visible ~ .lp-cuerda__hojas .lp-cuerda__hoja--4,
#lp-cuerda-hoja-5:focus-visible ~ .lp-cuerda__hojas .lp-cuerda__hoja--5 {
    outline: 3px solid var(--lp-almanaque-taco-tinta);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-cuerda__hoja {
        transform-origin: 20% 0;
        transition: opacity .55s ease, translate .55s ease, rotate .55s ease, visibility 0s linear .55s;
    }

    #lp-cuerda-hoja-1:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--1,
    #lp-cuerda-hoja-2:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--2,
    #lp-cuerda-hoja-3:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--3,
    #lp-cuerda-hoja-4:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--4,
    #lp-cuerda-hoja-5:checked ~ .lp-cuerda__hojas .lp-cuerda__hoja--5 {
        transition-delay: 0s;
    }
}

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

/* ═══ Preguntas al relojero ════════════════════════════════════════════════ */
.lp-cuerda__preguntas-rejilla {
    display: grid;
    gap: .5rem;
}

.lp-cuerda__consultas {
    display: grid;
}

.lp-cuerda__consulta {
    border-bottom: 1px solid var(--lp-sup-linea);
}

    .lp-cuerda__consulta:first-child {
        border-top: 1px solid var(--lp-sup-linea);
    }

.lp-cuerda__consulta-pregunta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    padding: 1rem .2rem;
    font-family: var(--lp-antigua);
    font-size: clamp(1.08rem, 1rem + .3vw, 1.24rem);
    font-weight: 700;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}

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

.lp-cuerda__consulta-icono {
    width: 1.7rem;
    height: 1.7rem;
    --lp-engranaje-relleno: var(--lp-sup-oro);
    --lp-engranaje-trazo: none;
    transition: rotate .45s ease;
}

.lp-cuerda__consulta[open] .lp-cuerda__consulta-icono {
    rotate: 90deg;
}

.lp-cuerda__consulta-respuesta {
    padding: 0 .2rem 1.3rem calc(1.7rem + .9rem + .2rem);
    color: var(--lp-sup-suave);
    font-size: .98rem;
}

@media (max-width: 575.98px) {
    .lp-cuerda__consulta-respuesta {
        padding-left: .2rem;
    }
}

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

        .lp-cuerda__preguntas-rejilla > .lp-cuerda__cabecera {
            position: sticky;
            top: 5.5rem;
        }
}

/* ═══ Es la hora ═══════════════════════════════════════════════════════════
   Las agujas parten de las 10:10 y se juntan en las doce al entrar en pantalla. */
.lp-cuerda__cierre-rejilla {
    display: grid;
    gap: 2.5rem;
    justify-items: center;
    text-align: center;
}

.lp-cuerda__reloj-cierre {
    position: relative;
    width: min(100%, 19rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--lp-laton);
    box-shadow: inset 0 0 0 2px var(--lp-laton-trazo), inset 0 .4rem .8rem var(--lp-brillo-filo), 0 2rem 3rem -1.4rem var(--lp-sombra-colgada);
}

    .lp-cuerda__reloj-cierre .lp-cuerda__aguja use {
        transition: rotate 2.2s cubic-bezier(.3, .8, .3, 1) .4s;
    }

    .lp-cuerda__reloj-cierre.lp-cuerda--visible .lp-cuerda__aguja--hora use {
        rotate: 360deg;
    }

    .lp-cuerda__reloj-cierre.lp-cuerda--visible .lp-cuerda__aguja--minuto use {
        rotate: 360deg;
    }

.lp-cuerda__cierre-entrada {
    max-width: 32rem;
    margin: 1rem auto 0;
    color: var(--lp-sup-suave);
    font-size: 1.08rem;
}

.lp-cuerda__cierre .lp-cuerda__acciones {
    justify-content: center;
}

.lp-cuerda__cierre .lp-cuerda__rotulo {
    justify-content: center;
}

.lp-cuerda__independiente {
    max-width: 34rem;
    margin: 1.75rem auto 0;
    color: var(--lp-sup-suave);
    font-size: .85rem;
}

@media (min-width: 992px) {
    .lp-cuerda__cierre-rejilla {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        justify-items: start;
        text-align: left;
    }

    .lp-cuerda__reloj-cierre {
        justify-self: center;
    }

    .lp-cuerda__cierre .lp-cuerda__acciones,
    .lp-cuerda__cierre .lp-cuerda__rotulo {
        justify-content: flex-start;
    }

    .lp-cuerda__cierre-entrada,
    .lp-cuerda__independiente {
        margin-left: 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-cuerda__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .65rem 1.35rem .75rem;
    border: 2px solid var(--lp-accion-borde);
    border-radius: 999px;
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-antigua);
    font-size: 1.15rem;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    box-shadow: inset 0 1px 0 var(--lp-brillo-filo), 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, background-color .2s ease;
}

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

.lp-cuerda__flotante-icono {
    width: 1.2rem;
    height: 1.2rem;
    --lp-engranaje-relleno: currentColor;
    --lp-engranaje-trazo: none;
}

.lp-cuerda__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-cuerda__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        padding-inline: 1rem;
        font-size: 1.05rem;
        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-cuerda *,
    .lp-cuerda *::before,
    .lp-cuerda *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: las piezas se dibujan con
   contornos, la esfera del examen con el color de resalte y el engranaje
   marcado con un contorno propio. */
@media (forced-colors: active) {
    .lp-cuerda {
        --lp-dibujo-trazo: CanvasText;
        --lp-engranaje-relleno: CanvasText;
        --lp-engranaje-trazo: CanvasText;
    }

    .lp-cuerda__boton,
    .lp-cuerda__flotante,
    .lp-cuerda__placa,
    .lp-cuerda__desglose,
    .lp-cuerda__balanza,
    .lp-cuerda__etapa,
    .lp-cuerda__etiqueta-carton,
    .lp-cuerda__hoja-manual,
    .lp-cuerda__hoja,
    .lp-cuerda__subesfera,
    .lp-cuerda__logro-esfera,
    .lp-cuerda__tapa,
    .lp-cuerda__caja,
    .lp-cuerda__reloj-cierre,
    .lp-cuerda__almanaque {
        border: 2px solid CanvasText;
    }

    .lp-cuerda__anillo {
        background: Highlight;
    }

    /* La balanza está hecha de fondos: sin contornos, los platillos quedarían
       flotando sin cruz ni columna. */
    .lp-cuerda__balanza-columna,
    .lp-cuerda__balanza-base,
    .lp-cuerda__balanza-cruz,
    .lp-cuerda__platillo::after {
        border: 2px solid CanvasText;
    }

    .lp-cuerda__balanza-fiel {
        background: Highlight;
    }

    .lp-cuerda__engranaje:has(:checked) .lp-cuerda__rueda {
        outline: 3px solid Highlight;
        outline-offset: 4px;
    }

    .lp-cuerda__t-esmalte {
        fill: Canvas;
    }

    .lp-cuerda__t-esfera-numero,
    .lp-cuerda__t-esfera-doce,
    .lp-cuerda__t-esfera-marca,
    .lp-cuerda__t-esfera-lugar {
        fill: CanvasText;
    }

    .lp-cuerda__t-esfera-linea,
    .lp-cuerda__t-esfera-fina,
    .lp-cuerda__t-esfera-gruesa {
        stroke: CanvasText;
    }

    .lp-cuerda__t-aguja,
    .lp-cuerda__t-rubi {
        fill: Highlight;
    }
}