/* Landing del Ciclo Verano — Universidad Nacional de Ingeniería.

   TODO cuelga de .lp-ecu. 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. De ahí el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: el verano como una ecuación que se resuelve en tres meses. Papel
   cuadriculado para las secciones claras, azul noche de pizarra para las oscuras
   y el sol de verano como color de acción.

   DOS IDENTIDADES, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): rojo ladrillo y plata. Es la franja superior y
       debe repetirse igual en las tres landings de la UNI.
     · LA CAMPAÑA (el resto): sol, cielo y noche. Es propia de este verano.

   Todo el movimiento respeta la preferencia de menos movimiento del sistema. */
.lp-ecu {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #8C1D18;
    --lp-uni-claro: #B3342B;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #DCE1E8;
    --lp-uni-tipo: "Trebuchet MS", "Segoe UI", sans-serif;
    /* ── Paleta de la campaña ──────────────────────────────────────────── */
    --lp-sol: #FF8A1F;
    --lp-sol-claro: #FFC23D;
    --lp-sol-tinta: #2B1400;
    --lp-cielo: #1447C8;
    --lp-cielo-claro: #5B8CFF;
    --lp-noche: #0B1B3F;
    --lp-noche-alta: #132A5C;
    --lp-tiza: #F4F1E8;
    --lp-tiza-suave: rgba(244, 241, 232, .78);
    --lp-cuadricula: rgba(20, 71, 200, .08);
    --lp-cuadricula-noche: rgba(244, 241, 232, .07);
    --lp-bien: #1A8F52;
    --lp-bien-fondo: rgba(26, 143, 82, .14);
    --lp-mal: #C8352F;
    --lp-mal-fondo: rgba(200, 53, 47, .14);
    --lp-whatsapp: #1B8A4C;
    /* ── Superficies y texto ───────────────────────────────────────────── */
    --lp-tinta: #10193A;
    --lp-tinta-suave: #4B5575;
    --lp-fondo: #FFFDF7;
    --lp-fondo-alterno: #FFF6E6;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(20, 71, 200, .16);
    --lp-sombra: rgba(11, 27, 63, .08);
    --lp-sombra-fuerte: rgba(11, 27, 63, .2);
    --lp-ancho: 82rem;
    --lp-ancho-texto: 46rem;
    --lp-mono: "Cascadia Code", Consolas, "Courier New", monospace;
    margin: 0;
    background: var(--lp-fondo);
    color: var(--lp-tinta);
    line-height: 1.65;
    scroll-behavior: smooth;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo se
   reasignan las variables, nunca las reglas. */
[data-tema="oscuro"] .lp-ecu {
    --lp-uni: #9E2620;
    --lp-uni-claro: #C2463C;
    --lp-uni-plata: #E6EAF0;
    --lp-sol: #FFA24D;
    --lp-sol-claro: #FFD06E;
    --lp-sol-tinta: #2B1400;
    --lp-cielo: #7FA6FF;
    --lp-cielo-claro: #A9C3FF;
    --lp-noche: #060E24;
    --lp-noche-alta: #0E1B40;
    --lp-cuadricula: rgba(127, 166, 255, .07);
    --lp-cuadricula-noche: rgba(244, 241, 232, .05);
    --lp-bien: #4ED08A;
    --lp-bien-fondo: rgba(78, 208, 138, .16);
    --lp-mal: #FF7A72;
    --lp-mal-fondo: rgba(255, 122, 114, .16);
    --lp-whatsapp: #2FB36A;
    --lp-tinta: #E8ECFA;
    --lp-tinta-suave: #A9B2D0;
    --lp-fondo: #0B1330;
    --lp-fondo-alterno: #101A3E;
    --lp-superficie: #14204A;
    --lp-borde: rgba(127, 166, 255, .2);
    --lp-sombra: rgba(0, 0, 0, .4);
    --lp-sombra-fuerte: rgba(0, 0, 0, .6);
}

/* ═══ 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 distinga. El color va escrito porque aquí se pinta un ancestro de
   .lp-ecu, que no ve sus variables. */
body:has(> .lp-ecu) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #8C1D18;
}

[data-tema="oscuro"] body:has(> .lp-ecu) {
    background-color: #2A0B09;
}

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

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

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta cero especificidad: solo derrota las reglas de elemento del sitio y
   queda por debajo de las clases de esta hoja. */
.lp-ecu :where(h1, h2, h3, h4, p, ul, ol, li, a, span, strong, small, em, label, summary, button, aside, article, figure, figcaption) {
    color: inherit;
    font-family: inherit;
}

/* Bootstrap ya lo impone en el documento compuesto, pero la landing no depende de
   ello: si el marco cambiara sus hojas, los anchos al 100 % con relleno seguirían
   cabiendo en su contenedor. */
.lp-ecu,
.lp-ecu *,
.lp-ecu *::before,
.lp-ecu *::after {
    box-sizing: border-box;
}

.lp-ecu__ancho {
    width: min(100% - 3rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-ecu svg {
    fill: currentColor;
}

.lp-ecu__icono {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* Las fotografías reservan su proporción con los atributos width y height del
   marcado, así la página no salta al cargarlas. El fondo es la red de seguridad si
   un archivo faltara: se ve un bloque del color de la paleta, no un hueco. */
.lp-ecu img {
    display: block;
    max-width: 100%;
    height: auto;
    background-color: var(--lp-fondo-alterno);
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase que oculta la pone el guion: sin él todo se ve desde el principio. */
.lp-ecu--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity .7s ease, transform .7s ease;
}

    .lp-ecu--animada [data-revelar].lp-ecu--visible {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    .lp-ecu {
        scroll-behavior: auto;
    }

    .lp-ecu--animada [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-ecu__simbolo,
    .lp-ecu__sol,
    .lp-ecu__destello,
    .lp-ecu__cinta-pista,
    .lp-ecu__grafico-curva,
    .lp-ecu__grafico-estrella,
    .lp-ecu__grafico-halo,
    .lp-ecu__flotante-sol,
    .lp-ecu__cierre-sol {
        animation: none;
    }

    .lp-ecu__grafico-curva {
        stroke-dashoffset: 0;
    }

    .lp-ecu__grafico-estrella {
        opacity: 1;
    }

    .lp-ecu__variable:hover,
    .lp-ecu__termino:hover {
        transform: none;
    }
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-ecu__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-claro));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -2px 0 var(--lp-uni-plata);
}

.lp-ecu__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

.lp-ecu__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .6rem;
    border: 2px solid var(--lp-uni-plata);
    color: var(--lp-uni-plata);
    transform: rotate(-8deg);
}

    .lp-ecu__emblema svg {
        width: 1.35rem;
        height: 1.35rem;
    }

.lp-ecu__uni {
    margin: 0 auto 0 0;
    line-height: 1.3;
}

.lp-ecu__uni-nombre {
    display: block;
    font-family: var(--lp-uni-tipo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.lp-ecu__uni-lema {
    display: block;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-uni-plata);
}

.lp-ecu__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-plata);
    border-radius: .4rem;
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-uni-plata);
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   Cuatro capas: cuadrícula de tiza, velo azul noche, fotografía y color de fondo.
   El velo es más denso a la izquierda, donde cae el titular. Si portada.jpeg
   faltara, queda la pizarra azul y la portada se ve terminada igual. */
.lp-ecu__portada {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 5rem;
    color: var(--lp-tiza);
    background-color: var(--lp-noche);
    background-image: linear-gradient(var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(90deg, var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(105deg, rgba(8, 20, 50, .96) 0%, rgba(8, 20, 50, .9) 38%, rgba(11, 27, 63, .62) 72%, rgba(140, 60, 20, .45) 100%), url("imagenes/portada.jpeg");
    background-size: 1.75rem 1.75rem, 1.75rem 1.75rem, cover, cover;
    background-position: 0 0, 0 0, center, center;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}

[data-tema="oscuro"] .lp-ecu__portada {
    background-image: linear-gradient(var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(90deg, var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(105deg, rgba(3, 9, 26, .97) 0%, rgba(3, 9, 26, .93) 38%, rgba(6, 14, 36, .72) 72%, rgba(90, 40, 12, .55) 100%), url("imagenes/portada.jpeg");
}

/* El sol del verano: un disco con halo y rayos que giran muy despacio. Se dibuja
   con gradientes; no hay imagen que descargar. */
.lp-ecu__sol {
    position: absolute;
    top: -9rem;
    right: -7rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-sol-claro) 0 22%, var(--lp-sol) 23% 30%, rgba(255, 138, 31, .28) 31% 46%, transparent 62%), repeating-conic-gradient(rgba(255, 194, 61, .22) 0 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 0 58%, transparent 70%);
    mask: radial-gradient(circle, #000 0 58%, transparent 70%);
    opacity: .85;
    pointer-events: none;
    animation: lp-ecu-girar 60s linear infinite;
}

@keyframes lp-ecu-girar {
    to {
        transform: rotate(360deg);
    }
}

.lp-ecu__simbolos {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lp-ecu__simbolo {
    position: absolute;
    font-family: var(--lp-mono);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--lp-tiza);
    opacity: .1;
    animation: lp-ecu-flotar 9s ease-in-out infinite;
}

.lp-ecu__simbolo--1 {
    top: 12%;
    left: 4%;
}

.lp-ecu__simbolo--2 {
    top: 64%;
    left: 8%;
    animation-delay: -2s;
}

.lp-ecu__simbolo--3 {
    top: 22%;
    left: 46%;
    animation-delay: -4s;
}

.lp-ecu__simbolo--4 {
    bottom: 10%;
    left: 52%;
    animation-delay: -6s;
}

.lp-ecu__simbolo--5 {
    top: 8%;
    right: 34%;
    animation-delay: -1s;
}

@keyframes lp-ecu-flotar {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-1.1rem) rotate(8deg);
    }
}

.lp-ecu__portada-rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 3rem;
    align-items: center;
}

/* inline-block y no flex: el rótulo mezcla texto suelto y huecos, y con flex cada
   trozo se convertía en una columna al partirse en móvil. */
.lp-ecu__antetitulo {
    display: inline-block;
    margin: 0 0 1.4rem;
    padding: .4rem 1.1rem;
    border-radius: .5rem;
    background: rgba(255, 194, 61, .14);
    border: 1px dashed rgba(255, 194, 61, .6);
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-sol-claro);
}

.lp-ecu__destello {
    display: inline-block;
    margin-right: .5rem;
    vertical-align: .05em;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--lp-sol-claro);
    box-shadow: 0 0 .6rem var(--lp-sol);
    animation: lp-ecu-destello 1.6s ease-in-out infinite;
}

@keyframes lp-ecu-destello {
    50% {
        opacity: .35;
        transform: scale(.7);
    }
}

.lp-ecu__titulo {
    margin: 0 0 1.25rem;
    font-size: clamp(2.1rem, 5vw, 4.1rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--lp-tiza);
}

.lp-ecu__titulo-destacado {
    display: block;
    color: var(--lp-sol-claro);
}

/* La meta va subrayada con un trazo de tiza, como la respuesta que se enmarca al
   final de un problema. */
.lp-ecu__titulo-meta {
    display: inline-block;
    margin-top: .2rem;
    padding: 0 .35rem;
    background: linear-gradient(transparent 62%, rgba(255, 138, 31, .55) 62% 90%, transparent 90%);
}

.lp-ecu__bajada {
    margin: 0;
    max-width: 36rem;
    font-size: 1.14rem;
    color: var(--lp-tiza-suave);
}

.lp-ecu__cifras {
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px dashed rgba(244, 241, 232, .28);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

    .lp-ecu__cifras li {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        font-size: .84rem;
        line-height: 1.35;
        color: var(--lp-tiza-suave);
    }

.lp-ecu__cifra {
    font-family: var(--lp-mono);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--lp-sol-claro);
    font-variant-numeric: tabular-nums;
}

/* ═══ Pizarra con la curva del verano ══════════════════════════════════════ */
.lp-ecu__pizarra {
    position: relative;
    padding: 1.5rem 1.5rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(8, 20, 50, .72);
    border: 1px solid rgba(244, 241, 232, .2);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
}

.lp-ecu__pizarra-rotulo {
    margin: 0 0 .75rem;
    font-family: var(--lp-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-sol-claro);
}

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

.lp-ecu__grafico-cuadro {
    fill: none;
    stroke: rgba(244, 241, 232, .08);
    stroke-width: 1;
}

.lp-ecu__grafico-eje,
.lp-ecu__grafico-flecha {
    fill: none;
    stroke: var(--lp-tiza);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-ecu__grafico-meta {
    fill: none;
    stroke: var(--lp-sol-claro);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
}

.lp-ecu__grafico-meta-texto {
    font-family: var(--lp-mono);
    font-size: 14px;
    font-weight: 700;
    fill: var(--lp-sol-claro);
}

.lp-ecu__grafico-texto {
    font-family: var(--lp-mono);
    font-size: 14px;
    fill: var(--lp-tiza-suave);
}

.lp-ecu__grafico-texto--fuerte {
    font-weight: 700;
    fill: var(--lp-sol-claro);
}

/* pathLength="1" en el marcado deja la longitud del trazo normalizada: con un
   dasharray de 1 se puede "dibujar" la curva sin medirla desde JavaScript. */
.lp-ecu__grafico-curva {
    fill: none;
    stroke: var(--lp-sol);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 .35rem rgba(255, 138, 31, .7));
    animation: lp-ecu-trazar 2.6s cubic-bezier(.4, 0, .2, 1) .4s forwards;
}

@keyframes lp-ecu-trazar {
    to {
        stroke-dashoffset: 0;
    }
}

.lp-ecu__grafico-punto {
    fill: var(--lp-sol-claro);
}

.lp-ecu__grafico-halo {
    fill: rgba(255, 194, 61, .3);
    transform-box: fill-box;
    transform-origin: center;
    animation: lp-ecu-halo 1.8s ease-out infinite;
}

@keyframes lp-ecu-halo {
    from {
        transform: scale(.6);
        opacity: 1;
    }

    to {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* La estrella de la meta aparece cuando el punto llega: empieza a los 3 s, justo
   después de que acaba el recorrido. */
.lp-ecu__grafico-estrella {
    fill: var(--lp-sol-claro);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: lp-ecu-estrella .6s ease-out 3s forwards;
}

@keyframes lp-ecu-estrella {
    from {
        opacity: 0;
        transform: scale(.2) rotate(-90deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.lp-ecu__calendario {
    list-style: none;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px dashed rgba(244, 241, 232, .22);
}

    .lp-ecu__calendario li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: .25rem 1rem;
        padding: .3rem 0;
        font-size: .9rem;
    }

    .lp-ecu__calendario span {
        color: var(--lp-tiza-suave);
    }

    .lp-ecu__calendario strong {
        text-align: right;
        color: var(--lp-tiza);
    }

/* ═══ Botones ══════════════════════════════════════════════════════════════
   El de acción es el sol: naranja con tinta casi negra, el par con más contraste
   de la paleta tanto sobre el azul noche como sobre el papel claro. */
.lp-ecu__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

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

.lp-ecu__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 2.1rem;
    border: 2px solid transparent;
    border-radius: .75rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

    .lp-ecu__accion:focus-visible {
        outline: 3px solid var(--lp-cielo-claro);
        outline-offset: 3px;
    }

.lp-ecu__accion--sol {
    background: linear-gradient(135deg, var(--lp-sol-claro), var(--lp-sol));
    color: var(--lp-sol-tinta);
    box-shadow: 0 .35rem 0 #B85A0A;
}

    /* Botón con "suela": al pulsarlo baja como una tecla. Refuerza la sensación
       de estar haciendo algo, no solo de navegar. */
    .lp-ecu__accion--sol:hover {
        color: var(--lp-sol-tinta);
        transform: translateY(-2px);
        box-shadow: 0 .55rem 0 #B85A0A, 0 1rem 1.75rem rgba(255, 138, 31, .35);
    }

    .lp-ecu__accion--sol:active {
        transform: translateY(.25rem);
        box-shadow: 0 .1rem 0 #B85A0A;
    }

[data-tema="oscuro"] .lp-ecu__accion--sol {
    box-shadow: 0 .35rem 0 #8A4305;
}

    [data-tema="oscuro"] .lp-ecu__accion--sol:hover {
        box-shadow: 0 .55rem 0 #8A4305, 0 1rem 1.75rem rgba(255, 162, 77, .3);
    }

    [data-tema="oscuro"] .lp-ecu__accion--sol:active {
        box-shadow: 0 .1rem 0 #8A4305;
    }

.lp-ecu__accion--contorno {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

    .lp-ecu__accion--contorno:hover {
        color: inherit;
        background: rgba(127, 166, 255, .14);
    }

.lp-ecu__accion--whatsapp {
    background: var(--lp-whatsapp);
    color: #FFFFFF;
}

    .lp-ecu__accion--whatsapp:hover {
        color: #FFFFFF;
        transform: translateY(-2px);
    }

.lp-ecu__accion--compacta {
    padding: .65rem 1.5rem;
    font-size: .95rem;
}

.lp-ecu__accion--bloque {
    display: flex;
    width: 100%;
    margin-top: 1.5rem;
}

/* ═══ Cinta de fórmulas ════════════════════════════════════════════════════ */
.lp-ecu__cinta {
    overflow: hidden;
    padding: .85rem 0;
    background: var(--lp-sol);
    color: var(--lp-sol-tinta);
    border-block: 2px solid var(--lp-sol-tinta);
}

.lp-ecu__cinta-pista {
    display: flex;
    width: max-content;
    gap: 2.5rem;
    font-family: var(--lp-mono);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    animation: lp-ecu-cinta 40s linear infinite;
}

    .lp-ecu__cinta-pista span::after {
        content: "✦";
        margin-left: 2.5rem;
        opacity: .5;
    }

@keyframes lp-ecu-cinta {
    to {
        transform: translateX(-50%);
    }
}

/* ═══ Secciones ════════════════════════════════════════════════════════════ */
.lp-ecu__seccion {
    padding: 5rem 0;
}

/* Papel cuadriculado de cuaderno: dos gradientes de una línea cada uno. */
.lp-ecu__seccion--papel {
    background-color: var(--lp-fondo-alterno);
    background-image: linear-gradient(var(--lp-cuadricula) 1px, transparent 1px), linear-gradient(90deg, var(--lp-cuadricula) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
}

.lp-ecu__seccion--noche {
    color: var(--lp-tiza);
    background-color: var(--lp-noche);
    background-image: linear-gradient(var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(90deg, var(--lp-cuadricula-noche) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
}

.lp-ecu__cabecera {
    max-width: var(--lp-ancho-texto);
    margin: 0 auto 1rem;
    text-align: center;
}

.lp-ecu__h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--lp-cielo);
}

.lp-ecu__h2--claro {
    color: var(--lp-tiza);
}

.lp-ecu__h3 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

.lp-ecu__texto {
    margin: 0 0 1rem;
    font-size: 1.03rem;
}

.lp-ecu__texto--intro {
    margin-bottom: 0;
    font-size: 1.12rem;
    color: var(--lp-tinta-suave);
}

.lp-ecu__texto--claro {
    color: var(--lp-tiza-suave);
}

.lp-ecu__texto--suave {
    color: var(--lp-tinta-suave);
}

.lp-ecu__pie-seccion {
    max-width: var(--lp-ancho-texto);
    margin: 2.25rem auto 0;
    font-size: .92rem;
    color: var(--lp-tinta-suave);
    text-align: center;
}

.lp-ecu__etiqueta {
    display: inline-block;
    margin: 0 0 .9rem;
    padding: .3rem 1rem;
    border-radius: .4rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-cielo);
}

.lp-ecu__etiqueta--sol {
    background: rgba(255, 194, 61, .12);
    border-color: rgba(255, 194, 61, .5);
    color: var(--lp-sol-claro);
}

/* ═══ Las tres variables ═══════════════════════════════════════════════════ */
.lp-ecu__variables {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}

.lp-ecu__variable {
    overflow: hidden;
    border-radius: 1.1rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    box-shadow: 0 .6rem 1.5rem var(--lp-sombra);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .lp-ecu__variable:hover {
        transform: translateY(-6px) rotate(-.4deg);
        box-shadow: 0 1.25rem 2.5rem var(--lp-sombra-fuerte);
    }

.lp-ecu__variable-foto {
    width: 100%;
    aspect-ratio: 10 / 7;
    object-fit: cover;
}

.lp-ecu__variable-cuerpo {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
}

    .lp-ecu__variable-cuerpo p {
        margin: 0;
        font-size: .96rem;
        color: var(--lp-tinta-suave);
    }

/* La incógnita de cada mes monta sobre el borde de la fotografía. */
.lp-ecu__variable-letra {
    position: absolute;
    top: -1.6rem;
    right: 1.25rem;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lp-sol);
    color: var(--lp-sol-tinta);
    font-family: var(--lp-mono);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 800;
    box-shadow: 0 .4rem 1rem rgba(255, 138, 31, .4);
}

.lp-ecu__igualdad {
    margin: 2.5rem auto 0;
    max-width: 48rem;
    padding: 1.1rem 1.5rem;
    border: 2px dashed var(--lp-cielo);
    border-radius: .85rem;
    font-family: var(--lp-mono);
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    text-align: center;
    color: var(--lp-cielo);
}

    .lp-ecu__igualdad strong {
        color: var(--lp-tinta);
    }

/* ═══ Reto UNI ═════════════════════════════════════════════════════════════
   Sin el guion se ven las preguntas apiladas, con sus soluciones plegadas. Con él,
   el contenedor recibe lp-ecu--con-reto y pasa a una pregunta a la vez. */
.lp-ecu__reto {
    max-width: 46rem;
    margin: 2.5rem auto 0;
}

.lp-ecu__reto-inicio {
    display: none;
    padding: 2.5rem 2rem;
    border-radius: 1.25rem;
    background: var(--lp-noche-alta);
    border: 1px solid rgba(244, 241, 232, .16);
    text-align: center;
}

.lp-ecu__reto-inicio-texto {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    color: var(--lp-tiza-suave);
}

.lp-ecu--con-reto .lp-ecu__reto-inicio {
    display: block;
}

.lp-ecu--con-reto .lp-ecu__reto-panel {
    display: none;
}

.lp-ecu--con-reto .lp-ecu__reto--corriendo .lp-ecu__reto-inicio {
    display: none;
}

.lp-ecu--con-reto .lp-ecu__reto--corriendo .lp-ecu__reto-panel {
    display: block;
}

/* Terminado: solo queda el resultado. Pesa más que la regla de inicio porque suma
   una clase, y el estado "corriendo" ya se retiró al terminar. */
.lp-ecu--con-reto .lp-ecu__reto--terminado .lp-ecu__reto-inicio,
.lp-ecu--con-reto .lp-ecu__reto--terminado .lp-ecu__reto-panel {
    display: none;
}

.lp-ecu__reto-panel {
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.lp-ecu__reto-cabeza {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.lp-ecu--con-reto .lp-ecu__reto-cabeza {
    display: flex;
}

.lp-ecu__reto-progreso,
.lp-ecu__reto-reloj {
    margin: 0;
    font-family: var(--lp-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ecu__reto-reloj {
    font-size: 1.1rem;
    color: var(--lp-cielo);
    font-variant-numeric: tabular-nums;
}

.lp-ecu__reto--apurado .lp-ecu__reto-reloj {
    color: var(--lp-mal);
}

/* La barra de tiempo se encoge de izquierda a derecha. El ancho lo pone el guion
   en cada segundo; la transición suaviza el salto. */
.lp-ecu__reto-tiempo {
    display: none;
    height: .45rem;
    margin-bottom: 1.5rem;
    border-radius: 999px;
    background: var(--lp-fondo-alterno);
    overflow: hidden;
}

.lp-ecu--con-reto .lp-ecu__reto-tiempo {
    display: block;
}

    .lp-ecu__reto-tiempo span {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--lp-sol), var(--lp-sol-claro));
        transition: width 1s linear;
    }

.lp-ecu__reto--apurado .lp-ecu__reto-tiempo span {
    background: var(--lp-mal);
}

.lp-ecu__reto-preguntas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-ecu__reto-pregunta + .lp-ecu__reto-pregunta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--lp-borde);
}

.lp-ecu--con-reto .lp-ecu__reto-pregunta {
    display: none;
}

    .lp-ecu--con-reto .lp-ecu__reto-pregunta + .lp-ecu__reto-pregunta {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.lp-ecu--con-reto .lp-ecu__reto-pregunta--activa {
    display: block;
    animation: lp-ecu-entrada .3s ease;
}

@keyframes lp-ecu-entrada {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-ecu__reto-curso {
    display: inline-block;
    margin: 0 0 .6rem;
    padding: .15rem .7rem;
    border-radius: .35rem;
    background: var(--lp-fondo-alterno);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-cielo);
}

.lp-ecu__reto-enunciado {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.lp-ecu__reto-opciones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    counter-reset: opcion;
}

    .lp-ecu__reto-opciones button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .9rem 1rem;
        background: var(--lp-fondo);
        border: 2px solid var(--lp-borde);
        border-radius: .8rem;
        color: var(--lp-tinta);
        font: inherit;
        font-family: var(--lp-mono);
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
    }

        /* La letra la pone el CSS con un contador: el marcado solo trae el valor. */
        .lp-ecu__reto-opciones button::before {
            counter-increment: opcion;
            content: counter(opcion, upper-alpha);
            flex: 0 0 auto;
            width: 1.9rem;
            height: 1.9rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: .45rem;
            background: var(--lp-cielo);
            color: #FFFFFF;
            font-size: .82rem;
        }

        [data-tema="oscuro"] .lp-ecu__reto-opciones button::before {
            color: var(--lp-noche);
        }

        .lp-ecu__reto-opciones button:hover:not(:disabled) {
            border-color: var(--lp-sol);
            transform: translateY(-2px);
        }

        .lp-ecu__reto-opciones button:focus-visible {
            outline: 3px solid var(--lp-sol);
            outline-offset: 2px;
        }

        .lp-ecu__reto-opciones button:disabled {
            cursor: default;
        }

/* Los estados de respuesta se marcan también con un signo, no solo con color: así
   se distinguen aunque quien mira no perciba bien el rojo y el verde. */
.lp-ecu__reto-opcion--bien {
    border-color: var(--lp-bien) !important;
    background: var(--lp-bien-fondo) !important;
}

    .lp-ecu__reto-opcion--bien::after {
        content: "✓";
        margin-left: auto;
        color: var(--lp-bien);
        font-size: 1.1rem;
    }

.lp-ecu__reto-opcion--mal {
    border-color: var(--lp-mal) !important;
    background: var(--lp-mal-fondo) !important;
}

    .lp-ecu__reto-opcion--mal::after {
        content: "✗";
        margin-left: auto;
        color: var(--lp-mal);
        font-size: 1.1rem;
    }

.lp-ecu__reto-solucion {
    margin-top: 1rem;
    border-radius: .8rem;
    background: var(--lp-fondo-alterno);
    border: 1px solid var(--lp-borde);
}

    .lp-ecu__reto-solucion summary {
        padding: .75rem 1rem;
        font-weight: 700;
        color: var(--lp-cielo);
        cursor: pointer;
    }

    .lp-ecu__reto-solucion p {
        margin: 0;
        padding: 0 1rem .9rem;
        font-family: var(--lp-mono);
        font-size: .92rem;
        color: var(--lp-tinta);
    }

/* Con el reto vivo, la solución no se puede abrir antes de responder: el guion la
   despliega al contestar. */
.lp-ecu--con-reto .lp-ecu__reto-pregunta:not(.lp-ecu__reto-pregunta--respondida) .lp-ecu__reto-solucion {
    display: none;
}

.lp-ecu__reto-pie {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

    .lp-ecu__reto-pie:empty,
    .lp-ecu__reto-pie:has(> [hidden]:only-child) {
        margin-top: 0;
    }

.lp-ecu__reto-resultado {
    padding: 2.5rem 2rem;
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    text-align: center;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
    animation: lp-ecu-entrada .35s ease;
}

.lp-ecu__reto-rotulo {
    margin: 0;
    font-family: var(--lp-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ecu__reto-marcador {
    margin: .25rem 0 1rem;
    font-family: var(--lp-mono);
    font-size: 1.3rem;
    color: var(--lp-tinta-suave);
}

    .lp-ecu__reto-marcador strong {
        font-size: clamp(3rem, 8vw, 4.5rem);
        line-height: 1;
        color: var(--lp-sol);
    }

.lp-ecu__reto-mensaje {
    max-width: 32rem;
    margin: 0 auto;
    font-size: 1.05rem;
}

/* Solo se ve el mensaje que el guion elige; sin guion, el bloque entero sigue
   oculto porque el resultado nace con hidden. */
.lp-ecu__reto-mensaje[hidden] {
    display: none;
}

.lp-ecu__reto-aviso {
    margin: 1.5rem 0 0;
    font-size: .84rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Banda Scientia et Labor ══════════════════════════════════════════════ */
.lp-ecu__banda {
    padding: 5.5rem 0;
    color: var(--lp-tiza);
    background-color: var(--lp-noche);
    background-image: linear-gradient(90deg, rgba(8, 20, 50, .94) 20%, rgba(8, 20, 50, .45) 100%), url("imagenes/campus.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border-block: 3px solid var(--lp-uni);
}

.lp-ecu__banda-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.lp-ecu__banda-lema {
    margin: 0 0 .5rem;
    font-family: var(--lp-uni-tipo);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-style: italic;
    font-weight: 700;
    color: var(--lp-sol-claro);
}

.lp-ecu__banda-texto {
    max-width: 36rem;
    margin: 0;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 600;
    color: var(--lp-tiza);
}

/* ═══ Facultades ═══════════════════════════════════════════════════════════
   La fila de pestañas se desplaza en horizontal en pantallas estrechas en lugar de
   partirse en muchas líneas. */
.lp-ecu__facultades {
    margin-top: 2.5rem;
}

.lp-ecu__pestanas {
    display: none;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.lp-ecu--con-pestanas .lp-ecu__pestanas {
    display: flex;
}

.lp-ecu__pestanas button {
    flex: 0 0 auto;
    padding: .6rem 1.1rem;
    border: 1px solid var(--lp-borde);
    border-radius: .6rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .lp-ecu__pestanas button:hover {
        border-color: var(--lp-cielo);
    }

    .lp-ecu__pestanas button[aria-selected="true"] {
        background: var(--lp-cielo);
        border-color: var(--lp-cielo);
        color: #FFFFFF;
    }

[data-tema="oscuro"] .lp-ecu__pestanas button[aria-selected="true"] {
    color: var(--lp-noche);
}

.lp-ecu__pestanas button:focus-visible {
    outline: 3px solid var(--lp-sol);
    outline-offset: 2px;
}

.lp-ecu__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    box-shadow: 0 .75rem 2rem var(--lp-sombra);
}

    .lp-ecu__panel + .lp-ecu__panel {
        margin-top: 1.25rem;
    }

/* Con pestañas solo se ve el panel activo; los demás se quedan con hidden. */
.lp-ecu--con-pestanas .lp-ecu__panel + .lp-ecu__panel {
    margin-top: 0;
}

.lp-ecu__panel[hidden] {
    display: none;
}

.lp-ecu--con-pestanas .lp-ecu__panel:not([hidden]) {
    animation: lp-ecu-entrada .35s ease;
}

.lp-ecu__panel-foto {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: .9rem;
}

.lp-ecu__panel-texto {
    padding: .5rem .75rem .5rem 0;
}

    .lp-ecu__panel-texto p {
        margin: 0 0 1rem;
        color: var(--lp-tinta-suave);
    }

.lp-ecu__panel-carreras {
    padding-top: 1rem;
    border-top: 1px dashed var(--lp-borde);
    font-family: var(--lp-mono);
    font-size: .88rem;
    font-weight: 700;
    color: var(--lp-cielo) !important;
}

/* ═══ Planificador ═════════════════════════════════════════════════════════ */
.lp-ecu__planificador-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.lp-ecu__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

    .lp-ecu__chips button {
        min-width: 3.4rem;
        padding: .55rem .95rem;
        border: 2px solid var(--lp-borde);
        border-radius: .6rem;
        background: var(--lp-superficie);
        color: var(--lp-tinta);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    }

        .lp-ecu__chips button:hover {
            border-color: var(--lp-sol);
        }

        .lp-ecu__chips button:focus-visible {
            outline: 3px solid var(--lp-cielo-claro);
            outline-offset: 2px;
        }

        .lp-ecu__chips button[aria-pressed="true"] {
            background: var(--lp-sol);
            border-color: var(--lp-sol);
            color: var(--lp-sol-tinta);
        }

.lp-ecu__semana-caja {
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    box-shadow: 0 1rem 2.5rem var(--lp-sombra);
}

/* La semana se desplaza en horizontal si no cabe: ocho columnas en un móvil muy
   estrecho no se aplastan, se deslizan. */
.lp-ecu__semana-desplazable {
    overflow-x: auto;
}

.lp-ecu__semana {
    display: grid;
    grid-template-columns: 4.5rem repeat(7, minmax(2.2rem, 1fr));
    gap: .35rem;
    min-width: 22rem;
}

    .lp-ecu__semana > span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.6rem;
        border-radius: .45rem;
        font-size: .8rem;
    }

.lp-ecu__semana-dia {
    font-family: var(--lp-mono);
    font-weight: 700;
    color: var(--lp-tinta-suave);
}

.lp-ecu__semana-turno {
    justify-content: flex-start !important;
    font-weight: 700;
    color: var(--lp-tinta-suave);
}

.lp-ecu__semana [data-celda] {
    background: var(--lp-fondo-alterno);
    border: 1px dashed var(--lp-borde);
    transition: background-color .25s ease, transform .25s ease;
}

.lp-ecu__semana .lp-ecu__celda--activa {
    background: linear-gradient(135deg, var(--lp-sol-claro), var(--lp-sol));
    border: 1px solid var(--lp-sol);
    transform: scale(1.04);
}

.lp-ecu__semana-total {
    margin: 1.25rem 0 .25rem;
    font-size: 1rem;
    color: var(--lp-tinta-suave);
}

    .lp-ecu__semana-total strong {
        font-family: var(--lp-mono);
        font-size: 1.8rem;
        color: var(--lp-sol);
        font-variant-numeric: tabular-nums;
    }

.lp-ecu__semana-mensaje {
    margin: 0;
    font-size: .98rem;
}

/* Sin guion se ve solo el primer mensaje, que invita a marcar. El guion enciende
   el que toca con la clase de visible. */
.lp-ecu__semana-mensaje + .lp-ecu__semana-mensaje {
    display: none;
}

.lp-ecu--con-planificador .lp-ecu__semana-mensaje {
    display: none;
}

.lp-ecu--con-planificador .lp-ecu__semana-mensaje--visible {
    display: block;
}

/* ═══ La fórmula Akcadmia ══════════════════════════════════════════════════
   Cuatro términos y sus operadores en una fila en escritorio. Por debajo del punto
   de corte los operadores se quedan entre tarjetas apiladas, girados, y la
   ecuación se sigue leyendo de arriba abajo. */
.lp-ecu__formula {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: .75rem;
    margin-top: 2.75rem;
}

.lp-ecu__termino {
    padding: 1.6rem 1.35rem;
    border-radius: 1rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    box-shadow: 0 .5rem 1.25rem var(--lp-sombra);
    transition: transform .25s ease;
}

    .lp-ecu__termino:hover {
        transform: translateY(-5px);
    }

    .lp-ecu__termino p {
        margin: 0;
        font-size: .94rem;
        color: var(--lp-tinta-suave);
    }

.lp-ecu__termino--resultado {
    background: var(--lp-noche);
    border-color: var(--lp-noche);
    color: var(--lp-tiza);
}

    .lp-ecu__termino--resultado .lp-ecu__h3 {
        color: var(--lp-sol-claro);
    }

    .lp-ecu__termino--resultado p {
        color: var(--lp-tiza-suave);
    }

.lp-ecu__termino-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    border-radius: .7rem;
    background: var(--lp-fondo-alterno);
    color: var(--lp-cielo);
}

.lp-ecu__termino--resultado .lp-ecu__termino-icono {
    background: var(--lp-sol);
    color: var(--lp-sol-tinta);
}

.lp-ecu__termino-icono svg {
    width: 1.5rem;
    height: 1.5rem;
}

.lp-ecu__operador {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-mono);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--lp-sol);
}

.lp-ecu__controles {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.6rem 1.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    border-radius: 1rem;
    background: var(--lp-cielo);
    color: #FFFFFF;
    font-size: .95rem;
}

[data-tema="oscuro"] .lp-ecu__controles {
    background: var(--lp-noche-alta);
    color: var(--lp-tinta);
    border: 1px solid var(--lp-borde);
}

.lp-ecu__controles strong {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--lp-mono);
}

/* ═══ Mosaico Ser UNI ══════════════════════════════════════════════════════ */
.lp-ecu__mosaico {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 14rem;
    gap: 1rem;
    margin-top: 2.5rem;
}

.lp-ecu__mosaico-pieza {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--lp-noche-alta);
}

.lp-ecu__mosaico-pieza--grande {
    grid-row: span 2;
}

.lp-ecu__mosaico-pieza--ancha {
    grid-column: span 2;
}

.lp-ecu__mosaico-pieza img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--lp-noche-alta);
    transition: transform .6s ease;
}

.lp-ecu__mosaico-pieza:hover img {
    transform: scale(1.06);
}

.lp-ecu__mosaico-pieza figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.1rem 1rem;
    background: linear-gradient(transparent, rgba(6, 14, 36, .9));
    font-weight: 700;
    color: #FFFFFF;
}

/* ═══ Preguntas frecuentes ═════════════════════════════════════════════════ */
.lp-ecu__faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: .85rem;
    align-items: start;
    margin-top: 2rem;
}

.lp-ecu__faq-item {
    border: 1px solid var(--lp-borde);
    border-radius: .85rem;
    background: var(--lp-superficie);
    overflow: hidden;
}

    .lp-ecu__faq-item summary {
        position: relative;
        padding: 1.1rem 3rem 1.1rem 1.3rem;
        font-weight: 700;
        color: var(--lp-tinta);
        cursor: pointer;
        list-style: none;
    }

        .lp-ecu__faq-item summary::-webkit-details-marker {
            display: none;
        }

        /* El marcador es un "+" que se convierte en "−": sigue la idea de las
           operaciones de toda la página. */
        .lp-ecu__faq-item summary::after {
            content: "+";
            position: absolute;
            right: 1.2rem;
            top: .85rem;
            font-family: var(--lp-mono);
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--lp-sol);
        }

        .lp-ecu__faq-item summary:focus-visible {
            outline: 3px solid var(--lp-cielo-claro);
            outline-offset: -3px;
        }

    .lp-ecu__faq-item[open] summary::after {
        content: "−";
    }

    .lp-ecu__faq-item p {
        margin: 0;
        padding: 0 1.3rem 1.2rem;
        font-size: .96rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cierre ═══════════════════════════════════════════════════════════════ */
.lp-ecu__cierre {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
    text-align: center;
    color: var(--lp-tiza);
    background: linear-gradient(180deg, var(--lp-noche) 0%, var(--lp-noche-alta) 100%);
}

    .lp-ecu__cierre .lp-ecu__ancho {
        position: relative;
        z-index: 1;
    }

    .lp-ecu__cierre .lp-ecu__texto {
        max-width: 36rem;
        margin-inline: auto;
    }

/* Un sol que se pone detrás del texto de cierre: el verano ya empezó. */
.lp-ecu__cierre-sol {
    position: absolute;
    left: 50%;
    bottom: -16rem;
    width: 30rem;
    height: 30rem;
    margin-left: -15rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 194, 61, .45) 0 30%, rgba(255, 138, 31, .18) 45%, transparent 68%);
    pointer-events: none;
    animation: lp-ecu-latido 6s ease-in-out infinite;
}

@keyframes lp-ecu-latido {
    50% {
        transform: scale(1.08);
    }
}

.lp-ecu__nota-legal {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(244, 241, 232, .2);
    font-size: .8rem;
    color: rgba(244, 241, 232, .66);
}

/* ═══ Botón flotante ═══════════════════════════════════════════════════════
   fixed y no sticky: las hojas del sitio definen su propio contenedor de
   desplazamiento y con eso sticky no se pega a nada.

   Oculto no basta con desplazarlo: sin visibility seguiría interceptando
   pulsaciones sobre el pie del sitio aunque no 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-ecu__flotante {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.4rem .85rem 1rem;
    border-radius: 999px;
    background: var(--lp-noche);
    border: 2px solid var(--lp-sol);
    color: var(--lp-tiza);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35);
}

    .lp-ecu__flotante:hover {
        color: var(--lp-sol-claro);
    }

    .lp-ecu__flotante:focus-visible {
        outline: 3px solid var(--lp-sol-claro);
        outline-offset: 3px;
    }

.lp-ecu--con-flotante .lp-ecu__flotante {
    opacity: 0;
    visibility: hidden;
    transform: translateY(150%);
    transition: transform .35s ease, opacity .35s ease, visibility .35s;
}

.lp-ecu--con-flotante .lp-ecu__flotante--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lp-ecu__flotante-sol {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-sol-claro) 0 45%, var(--lp-sol) 46% 60%, transparent 62%);
    box-shadow: 0 0 .75rem var(--lp-sol);
    animation: lp-ecu-latido 2.4s ease-in-out infinite;
}

/* ═══ Adaptación a pantallas medianas ══════════════════════════════════════ */
@media (max-width: 61.99rem) {
    .lp-ecu__portada {
        padding: 3.5rem 0 4rem;
        background-image: linear-gradient(var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(90deg, var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(180deg, rgba(8, 20, 50, .95), rgba(8, 20, 50, .88)), url("imagenes/portada.jpeg");
    }

    [data-tema="oscuro"] .lp-ecu__portada {
        background-image: linear-gradient(var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(90deg, var(--lp-cuadricula-noche) 1px, transparent 1px), linear-gradient(180deg, rgba(3, 9, 26, .96), rgba(3, 9, 26, .9)), url("imagenes/portada.jpeg");
    }

    .lp-ecu__portada-rejilla,
    .lp-ecu__planificador-rejilla {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .lp-ecu__portada-texto {
        text-align: center;
    }

    .lp-ecu__bajada {
        margin-inline: auto;
    }

    .lp-ecu__portada .lp-ecu__acciones {
        justify-content: center;
    }

    .lp-ecu__sol {
        width: 16rem;
        height: 16rem;
        top: -6rem;
        right: -6rem;
    }

    .lp-ecu__panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .lp-ecu__panel-texto {
        padding: 0 .5rem .5rem;
    }

    .lp-ecu__formula {
        grid-template-columns: minmax(0, 1fr);
        max-width: 30rem;
        margin-inline: auto;
    }

    .lp-ecu__operador {
        font-size: 1.8rem;
        line-height: 1;
    }

    .lp-ecu__banda {
        background-image: linear-gradient(180deg, rgba(8, 20, 50, .88), rgba(8, 20, 50, .95)), url("imagenes/campus.jpeg");
    }

    .lp-ecu__banda-contenido {
        justify-content: center;
        text-align: center;
    }

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

    .lp-ecu__mosaico-pieza--ancha {
        grid-column: span 2;
    }
}

/* ═══ Adaptación a móviles ═════════════════════════════════════════════════ */
@media (max-width: 35.99rem) {
    .lp-ecu__seccion,
    .lp-ecu__banda,
    .lp-ecu__cierre {
        padding: 3.5rem 0;
    }

    .lp-ecu__institucional-contenido {
        justify-content: center;
        text-align: center;
    }

    .lp-ecu__uni {
        margin: 0;
    }

    .lp-ecu__simbolo--3,
    .lp-ecu__simbolo--4,
    .lp-ecu__simbolo--5 {
        display: none;
    }

    .lp-ecu__cifras {
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
        text-align: center;
    }

    .lp-ecu__accion {
        width: 100%;
    }

    .lp-ecu__pizarra,
    .lp-ecu__reto-panel,
    .lp-ecu__reto-resultado,
    .lp-ecu__reto-inicio,
    .lp-ecu__semana-caja {
        padding: 1.4rem 1.1rem;
    }

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

    /* La semana cabe entera en un móvil de 360 px: columnas más estrechas y un
       mínimo menor. El desplazamiento horizontal queda solo para pantallas aún más
       angostas. */
    .lp-ecu__semana {
        grid-template-columns: 3.6rem repeat(7, minmax(1.6rem, 1fr));
        gap: .25rem;
        min-width: 17rem;
    }

        .lp-ecu__semana > span {
            min-height: 2.2rem;
            font-size: .72rem;
        }

    .lp-ecu__reto-enunciado {
        font-size: 1.1rem;
    }

    .lp-ecu__mosaico {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 13rem;
    }

    .lp-ecu__mosaico-pieza--grande {
        grid-row: span 1;
    }

    .lp-ecu__mosaico-pieza--ancha {
        grid-column: span 1;
    }

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

    /* En móvil el flotante ocupa el ancho entre márgenes: es más fácil de pulsar
       con el pulgar que una píldora pegada a la esquina. Por la derecha se detiene
       donde empieza la esquina de la mascota, 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 360 px, y si aun así se parte, va centrado. */
    .lp-ecu__flotante {
        left: 1rem;
        right: var(--edu-landing-reserva-mascota, 1rem);
        bottom: 1rem;
        justify-content: center;
        padding: .75rem 1rem;
        font-size: .95rem;
        text-align: center;
    }
}