/* Landing del Ciclo Semestral · Área B, Ciencias Básicas — San Marcos.

   TODO cuelga de .lp-basicas. El marco del sitio inyecta en ESTE documento
   Bootstrap, akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: sus reglas
   conviven con las de aquí y, a igualdad de especificidad, ganan las suyas. De ahí
   el prefijo propio, el bloque de neutralización y los !important de la costura.

   DOS IDENTIDADES, Y NO SE MEZCLAN:

     · LA UNIVERSIDAD (--lp-uni-*): granate y dorado, idénticos en todas las
       landings de San Marcos. Ocupan la franja superior y los filetes.
     · LA CAMPAÑA (el resto): azul pizarra y ámbar.

   Y el lenguaje de formas también es propio: esquinas rectas, cuadrícula técnica,
   monoespaciada para cifras y rótulos, secciones numeradas y cabeceras alineadas a
   la izquierda. Es lo que hace que esta página no se lea como la de Salud repintada
   aunque las dos sean del mismo sitio. */
.lp-basicas {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #7A0C2E;
    --lp-uni-claro: #A31D42;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-oro: #D3A85B;
    --lp-uni-tipo: Georgia, "Times New Roman", serif;
    /* ── Paleta de la campaña ──────────────────────────────────────────── */
    --lp-acento: #17518C;
    --lp-acento-claro: #4E93CE;
    --lp-acento-tinta: #FFFFFF;
    --lp-profundo: #0A2038;
    --lp-profundo-medio: #113353;
    --lp-realce: #F2A73B;
    --lp-realce-tinta: #2E1B02;
    --lp-claro: #D7E5F2;
    --lp-linea: rgba(120, 170, 220, .16);
    --lp-acierto: #2E9E6B;
    --lp-fallo: #D0555B;
    /* ── Superficies y texto ───────────────────────────────────────────── */
    --lp-tinta: #16232E;
    --lp-tinta-suave: #4F6273;
    --lp-fondo: #FFFFFF;
    --lp-fondo-alterno: #F3F6FA;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(23, 81, 140, .18);
    --lp-sombra: rgba(10, 32, 56, .08);
    --lp-sombra-fuerte: rgba(10, 32, 56, .16);
    /* Monoespaciada del sistema: no pide descarga y da el aire técnico. */
    --lp-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    --lp-ancho: 82rem;
    --lp-ancho-texto: 46rem;
    --lp-radio: .35rem;
    margin: 0;
    background: var(--lp-fondo);
    color: var(--lp-tinta);
    line-height: 1.65;
    scroll-behavior: smooth;
    /* Pinta los controles nativos —el deslizador del planificador— con el color de
       la campaña sin tener que reescribir sus pseudoelementos por navegador. */
    accent-color: var(--lp-acento);
}

/* 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-basicas {
    --lp-uni: #8E1637;
    --lp-uni-claro: #B02A4E;
    --lp-uni-oro: #DFC384;
    --lp-acento: #6FADE4;
    --lp-acento-claro: #9BC9F0;
    --lp-acento-tinta: #05192C;
    --lp-profundo: #061626;
    --lp-profundo-medio: #0C2540;
    --lp-realce: #F5B85B;
    --lp-realce-tinta: #2E1B02;
    --lp-claro: #C6DAEC;
    --lp-linea: rgba(120, 170, 220, .12);
    --lp-acierto: #5FC496;
    --lp-fallo: #E8848A;
    --lp-tinta: #E6EEF5;
    --lp-tinta-suave: #A6B9C8;
    --lp-fondo: #0A1219;
    --lp-fondo-alterno: #0E1B26;
    --lp-superficie: #12212E;
    --lp-borde: rgba(111, 173, 228, .22);
    --lp-sombra: rgba(0, 0, 0, .4);
    --lp-sombra-fuerte: rgba(0, 0, 0, .55);
}

/* ═══ 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. Por ese hueco asomaba el fondo del cuerpo, que en el sitio
   es claro.

   El hueco no se suprime: se PINTA del color de la franja institucional, y así
   deja de distinguirse sea cual sea su origen. Las anulaciones se quedan porque
   recortan su altura cuando sí vienen de la cabecera.

   El granate va escrito y no como variable porque --lp-uni se declara en
   .lp-basicas y aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-basicas) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

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

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

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

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   Una regla de elemento del sitio gana siempre a un color heredado: sin esto, el
   titular de la portada tomaba el color de marca de la plataforma. :where aporta
   cero especificidad, así que este bloque solo derrota a esos selectores y queda
   por debajo de las clases de más abajo. */
.lp-basicas :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, i, b, label, summary, button, input, output, textarea, article) {
    color: inherit;
    font-family: inherit;
}

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

.lp-basicas svg {
    fill: currentColor;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   El estado inicial solo se aplica cuando el guion ha marcado el documento: sin él
   la clase nunca se añade y todo se ve desde el principio. */
.lp-basicas--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s ease, transform .6s ease;
}

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

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

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

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-basicas__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-oro);
}

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

.lp-basicas__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid var(--lp-uni-oro);
    color: var(--lp-uni-oro);
}

    .lp-basicas__emblema svg {
        width: 1.3rem;
        height: 1.3rem;
    }

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

.lp-basicas__uni-nombre {
    display: block;
    font-family: var(--lp-uni-tipo);
    font-size: 1rem;
    font-weight: 700;
}

.lp-basicas__uni-lema {
    display: block;
    font-family: var(--lp-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

.lp-basicas__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-oro);
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   El fondo es una cuadrícula técnica pintada con degradados repetidos: no hay
   ninguna imagen que descargar ni que pueda fallar, y escala a cualquier pantalla. */
.lp-basicas__portada {
    position: relative;
    background: radial-gradient(120% 90% at 12% 0%, var(--lp-profundo-medio), var(--lp-profundo) 72%);
    color: #fff;
    padding: 4rem 0;
    overflow: hidden;
}

.lp-basicas__cuadricula {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--lp-linea) 1px, transparent 1px), linear-gradient(90deg, var(--lp-linea) 1px, transparent 1px);
    background-size: 3rem 3rem;
    /* Se desvanece hacia abajo para no cortar en seco al llegar a la tira. */
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
    pointer-events: none;
}

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

.lp-basicas__marca-uni {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .5rem 1.1rem .5rem .5rem;
    background: rgba(0, 0, 0, .28);
    border-left: 3px solid var(--lp-uni-oro);
    text-align: left;
}

    .lp-basicas__marca-uni .lp-basicas__emblema {
        width: 2.1rem;
        height: 2.1rem;
    }

    .lp-basicas__marca-uni strong {
        display: block;
        font-family: var(--lp-uni-tipo);
        font-size: .98rem;
        line-height: 1.25;
    }

    .lp-basicas__marca-uni small {
        display: block;
        font-family: var(--lp-mono);
        font-size: .7rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-uni-oro);
    }

.lp-basicas__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .4rem 1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    font-family: var(--lp-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    font-weight: 700;
}

.lp-basicas__punto {
    width: .5rem;
    height: .5rem;
    background: var(--lp-realce);
    animation: lp-basicas-latido 1.8s ease-in-out infinite;
}

@keyframes lp-basicas-latido {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.lp-basicas__titulo {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
}

.lp-basicas__titulo-destacado {
    display: block;
    color: var(--lp-realce);
}

.lp-basicas__bajada {
    margin: 0;
    max-width: 34rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .92);
}

/* Línea de datos sueltos bajo los botones: sustituye a la franja de cifras que
   llevan otras landings, y ocupa una sola línea. */
.lp-basicas__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    font-family: var(--lp-mono);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--lp-claro);
}

    .lp-basicas__meta li {
        position: relative;
        padding-left: 1rem;
    }

        .lp-basicas__meta li::before {
            content: "·";
            position: absolute;
            left: 0;
            color: var(--lp-realce);
        }

/* ═══ Pregunta de la portada ═══════════════════════════════════════════════
   La ficha nace oculta y solo se pinta cuando el guion está vivo; mientras tanto
   lo que se ve es el banco, que es marcado normal y se lee sin nada. */
.lp-basicas__reto {
    display: none;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .18);
    border-top: 3px solid var(--lp-realce);
    border-radius: var(--lp-radio);
    padding: 1.75rem;
}

.lp-basicas--con-reto .lp-basicas__reto {
    display: block;
}

.lp-basicas--con-reto .lp-basicas__banco {
    display: none;
}

.lp-basicas__reto-rotulo {
    margin: 0 0 1rem;
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-realce);
}

.lp-basicas__reto-enunciado {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.lp-basicas__reto-alternativas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

    /* Cada alternativa es un botón a ancho completo: en móvil el área de toque es
       la fila entera y no solo el texto. */
    .lp-basicas__reto-alternativas button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .7rem .9rem;
        background: rgba(0, 0, 0, .25);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: var(--lp-radio);
        color: #fff;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }

        .lp-basicas__reto-alternativas button:hover {
            border-color: var(--lp-realce);
        }

        .lp-basicas__reto-alternativas button:focus-visible {
            outline: 3px solid var(--lp-realce);
            outline-offset: 2px;
        }

/* La letra de la alternativa la pone el CSS con un contador: el guion no
           tiene que escribir ni la A ni la B en el marcado. */
.lp-basicas__reto-alternativas {
    counter-reset: alternativa;
}

    .lp-basicas__reto-alternativas button::before {
        counter-increment: alternativa;
        content: counter(alternativa, upper-alpha);
        flex: 0 0 auto;
        width: 1.6rem;
        height: 1.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .35);
        font-family: var(--lp-mono);
        font-size: .78rem;
        font-weight: 700;
    }

    /* Estados tras responder. El color no va solo: la correcta lleva además el borde
   grueso y el símbolo, para quien no distingue verde de rojo. */
    .lp-basicas__reto-alternativas button[data-estado="correcta"] {
        border-color: var(--lp-acierto);
        border-width: 2px;
        background: rgba(46, 158, 107, .22);
    }

        .lp-basicas__reto-alternativas button[data-estado="correcta"]::after {
            content: "✓";
            margin-left: auto;
            font-weight: 700;
            color: var(--lp-acierto);
        }

    .lp-basicas__reto-alternativas button[data-estado="fallada"] {
        border-color: var(--lp-fallo);
        background: rgba(208, 85, 91, .18);
    }

        .lp-basicas__reto-alternativas button[data-estado="fallada"]::after {
            content: "✕";
            margin-left: auto;
            font-weight: 700;
            color: var(--lp-fallo);
        }

.lp-basicas__reto-veredicto {
    margin: 1.1rem 0 0;
    padding-left: .9rem;
    border-left: 3px solid var(--lp-realce);
    font-size: .93rem;
    color: var(--lp-claro);
    /* Sin respuesta todavía no ocupa sitio, para que la ficha no dé un salto al
       aparecer el texto. */
    display: none;
}

    .lp-basicas__reto-veredicto:not(:empty) {
        display: block;
    }

.lp-basicas__reto-otra {
    margin-top: 1.25rem;
    padding: .5rem 1.1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--lp-radio);
    color: #fff;
    font: inherit;
    font-family: var(--lp-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

    .lp-basicas__reto-otra:hover {
        border-color: var(--lp-realce);
        color: var(--lp-realce);
    }

/* Banco de preguntas: lo que se ve cuando no hay JavaScript. Se presenta como una
   lista de ejemplos, sin marcar cuál es la correcta. */
.lp-basicas__banco {
    list-style: none;
    margin: 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--lp-radio);
}

    .lp-basicas__banco > li + li {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .lp-basicas__banco p {
        margin: 0 0 .6rem;
        font-size: .98rem;
    }

    .lp-basicas__banco ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: .3rem;
        font-family: var(--lp-mono);
        font-size: .88rem;
        color: var(--lp-claro);
    }

/* ═══ Tira de la cuenta atrás ══════════════════════════════════════════════ */
.lp-basicas__tira {
    background: var(--lp-profundo-medio);
    color: #fff;
    border-top: 2px solid var(--lp-uni-oro);
}

.lp-basicas__tira-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    padding: 1.5rem 0;
}

.lp-basicas__tira-rotulo {
    margin: 0 0 .6rem;
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-claro);
}

.lp-basicas__cuenta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.lp-basicas__cuenta-caja {
    min-width: 4.5rem;
    padding: .6rem .5rem;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .16);
    text-align: center;
}

.lp-basicas__cuenta-cifra {
    display: block;
    font-family: var(--lp-mono);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lp-realce);
    /* Cifras de ancho fijo: sin esto el contador da un salto lateral cada vez que
       un número cambia de forma. */
    font-variant-numeric: tabular-nums;
}

.lp-basicas__cuenta-rotulo {
    display: block;
    font-family: var(--lp-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .7);
}

.lp-basicas__cuenta-pie {
    margin: .6rem 0 0;
    font-size: .84rem;
    color: rgba(255, 255, 255, .78);
}

.lp-basicas__tira-fechas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin: 0;
}

.lp-basicas__tira-dato dt {
    font-family: var(--lp-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-claro);
}

.lp-basicas__tira-dato dd {
    margin: .2rem 0 0;
    font-weight: 700;
    font-size: .98rem;
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Rectangulares y de radio corto, no píldoras: es la diferencia de forma que
   separa esta landing de las demás incluso en blanco y negro. */
.lp-basicas__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

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

.lp-basicas__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 1.9rem;
    border: 0;
    border-radius: var(--lp-radio);
    background: var(--lp-realce);
    color: var(--lp-realce-tinta);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .lp-basicas__accion:hover {
        color: var(--lp-realce-tinta);
        transform: translateY(-2px);
        box-shadow: 0 .7rem 1.4rem rgba(46, 27, 2, .35);
    }

    .lp-basicas__accion:focus-visible {
        outline: 3px solid var(--lp-uni-oro);
        outline-offset: 3px;
    }

.lp-basicas__accion--compacta {
    padding: .6rem 1.4rem;
    font-size: .92rem;
}

.lp-basicas__accion--fantasma {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
}

    .lp-basicas__accion--fantasma:hover {
        color: #fff;
        background: rgba(255, 255, 255, .12);
        box-shadow: none;
    }

/* ═══ Barra de llamada permanente ══════════════════════════════════════════
   fixed y no sticky: el documento carga las hojas del sitio, que definen su propio
   contenedor de desplazamiento, y con eso sticky no se pega a nada. La landing se
   sirve como documento propio, no dentro de un iframe, así que fixed es correcto.

   El guion la retira al llegar al cierre: debajo está el pie del sitio, con el
   libro de reclamaciones, y una barra fija encima lo dejaría inalcanzable.

   La franja ocupa todo el ancho, pero su contenido se detiene antes de la esquina
   inferior derecha, que es la de la mascota del sitio: el relleno derecho es la
   reserva que publica el marco, y la mascota, en su esquina, queda de pie sobre
   ese tramo vacío de la franja sin tapar el botón. Sin mascota la variable no
   existe y el relleno vuelve a cero. */
.lp-basicas__barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding-right: var(--edu-landing-reserva-mascota, 0px);
    background: var(--lp-profundo);
    color: #fff;
    border-top: 2px solid var(--lp-uni-oro);
    box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .35);
}

.lp-basicas--con-barra .lp-basicas__barra {
    transform: translateY(110%);
    opacity: 0;
    /* Sin visibilidad no basta el desplazamiento: la barra seguiría interceptando
       pulsaciones sobre el pie del sitio aunque no se vea. */
    visibility: hidden;
    transition: transform .35s ease, opacity .35s ease, visibility .35s;
}

.lp-basicas--con-barra .lp-basicas__barra--visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.lp-basicas__barra-progreso {
    display: block;
    width: 0;
    height: .2rem;
    background: var(--lp-realce);
    transition: width .1s linear;
}

.lp-basicas__barra-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: .75rem 0;
}

.lp-basicas__barra-texto {
    margin: 0;
    line-height: 1.35;
}

.lp-basicas__barra-titulo {
    display: block;
    font-size: .95rem;
}

.lp-basicas__barra-dato {
    display: block;
    font-family: var(--lp-mono);
    font-size: .82rem;
    color: var(--lp-claro);
    font-variant-numeric: tabular-nums;
}

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

.lp-basicas__seccion--alterna {
    background: var(--lp-fondo-alterno);
}

.lp-basicas__seccion--oscura {
    background: var(--lp-profundo);
    color: #fff;
}

/* Numeración de sección: es el recurso que da el aire de documento y ordena la
   lectura de arriba abajo. */
.lp-basicas__indice {
    margin: 0 0 1.5rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--lp-borde);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-basicas__indice--claro {
    border-bottom-color: rgba(255, 255, 255, .2);
    color: var(--lp-realce);
}

.lp-basicas__cabecera {
    max-width: var(--lp-ancho-texto);
    margin: 0 0 1rem;
}

.lp-basicas__h2 {
    color: var(--lp-acento);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.lp-basicas__h2--claro {
    color: #fff;
}

.lp-basicas__texto {
    margin: 0 0 1rem;
    font-size: 1.02rem;
}

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

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

.lp-basicas__pie-seccion {
    max-width: var(--lp-ancho-texto);
    margin: 2rem 0 0;
    font-size: .92rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Manifiesto ═══════════════════════════════════════════════════════════ */
.lp-basicas__lema {
    max-width: 34rem;
    margin: 0 0 2rem;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--lp-tinta);
}

.lp-basicas__manifiesto-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 2rem;
}

    .lp-basicas__manifiesto-columnas p {
        margin: 0;
        padding-top: 1rem;
        border-top: 2px solid var(--lp-realce);
        font-size: .98rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cursos eje ═══════════════════════════════════════════════════════════ */
.lp-basicas__ejes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.lp-basicas__eje {
    position: relative;
    padding: 2.5rem 1.5rem 1.5rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-top: 3px solid var(--lp-acento);
    border-radius: var(--lp-radio);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .lp-basicas__eje:hover {
        transform: translateY(-4px);
        box-shadow: 0 .9rem 1.8rem var(--lp-sombra);
    }

.lp-basicas__eje-numero {
    position: absolute;
    top: .9rem;
    left: 1.5rem;
    font-family: var(--lp-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--lp-realce);
}

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

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

/* ═══ Selector de carrera ══════════════════════════════════════════════════
   Sin la clase que añade el guion se ven todas las fichas seguidas: la sección se
   lee entera aunque el JavaScript no cargue. */
.lp-basicas__carreras {
    margin-top: 2.5rem;
}

.lp-basicas__carreras-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.lp-basicas__carrera {
    padding: .55rem 1.05rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    color: var(--lp-tinta-suave);
    font: inherit;
    font-size: .93rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

    .lp-basicas__carrera:hover {
        border-color: var(--lp-acento);
        color: var(--lp-acento);
    }

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

.lp-basicas__carrera--activa {
    background: var(--lp-acento);
    border-color: var(--lp-acento);
    color: var(--lp-acento-tinta);
}

    .lp-basicas__carrera--activa:hover {
        color: var(--lp-acento-tinta);
    }

.lp-basicas__ficha {
    padding: 2rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-left: 4px solid var(--lp-realce);
    border-radius: var(--lp-radio);
}

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

.lp-basicas__carreras--activas .lp-basicas__ficha {
    display: none;
    margin-top: 0;
}

.lp-basicas__carreras--activas .lp-basicas__ficha--visible {
    display: block;
    animation: lp-basicas-entrada .25s ease;
}

@keyframes lp-basicas-entrada {
    from {
        opacity: 0;
        transform: translateY(.5rem);
    }

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

.lp-basicas__ficha-nombre {
    margin: 0 0 .6rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

.lp-basicas__ficha-texto {
    margin: 0 0 1.1rem;
    max-width: 44rem;
    font-size: 1rem;
    color: var(--lp-tinta-suave);
}

.lp-basicas__ficha-cursos {
    margin: 0;
    font-family: var(--lp-mono);
    font-size: .88rem;
    color: var(--lp-acento);
}

    .lp-basicas__ficha-cursos span {
        display: block;
        font-size: .7rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

/* ═══ Planificador ═════════════════════════════════════════════════════════
   El cálculo lo hace el navegador sobre lo que el propio alumno declara: no es un
   dato de negocio ni compromete nada, y por eso puede vivir en el cliente. El
   bloque nace oculto y solo aparece si el guion está vivo, porque un deslizador
   que no mueve nada es peor que no ponerlo. */
.lp-basicas__plan {
    display: none;
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-top: 3px solid var(--lp-acento);
    border-radius: var(--lp-radio);
}

.lp-basicas--con-plan .lp-basicas__plan {
    display: block;
}

.lp-basicas__plan-control {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem 1.5rem;
    align-items: center;
}

    .lp-basicas__plan-control label {
        grid-column: 1 / -1;
        font-family: var(--lp-mono);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

    .lp-basicas__plan-control input {
        width: 100%;
    }

.lp-basicas__plan-valor {
    font-family: var(--lp-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lp-acento);
    font-variant-numeric: tabular-nums;
}

.lp-basicas__plan-reparto {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

    .lp-basicas__plan-reparto li {
        display: grid;
        grid-template-columns: 9rem 1fr 4rem;
        gap: 1rem;
        align-items: center;
        font-size: .95rem;
    }

.lp-basicas__plan-curso {
    font-weight: 700;
    color: var(--lp-tinta);
}

.lp-basicas__plan-barra {
    height: .7rem;
    background: var(--lp-fondo-alterno);
    border: 1px solid var(--lp-borde);
    overflow: hidden;
}

    /* El ancho es lo único que escribe el guion en el estilo: el color y la forma
       se quedan aquí. */
    .lp-basicas__plan-barra i {
        display: block;
        width: 0;
        height: 100%;
        background: var(--lp-acento);
        transition: width .25s ease;
    }

.lp-basicas__plan-horas {
    font-family: var(--lp-mono);
    font-weight: 700;
    text-align: right;
    color: var(--lp-acento);
    font-variant-numeric: tabular-nums;
}

.lp-basicas__plan-cierre {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lp-borde);
    font-size: 1rem;
    color: var(--lp-tinta-suave);
}

    .lp-basicas__plan-cierre strong {
        font-family: var(--lp-mono);
        color: var(--lp-tinta);
    }

/* ═══ Riel de una clase por dentro ═════════════════════════════════════════
   Cinco hitos numerados con contadores. En pantalla ancha van en fila unidos por
   la línea superior; en móvil se apilan y cada uno conserva su marca. */
.lp-basicas__riel {
    counter-reset: hito;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem;
}

.lp-basicas__hito {
    counter-increment: hito;
    position: relative;
    padding-top: 2.25rem;
    border-top: 2px solid var(--lp-borde);
}

    .lp-basicas__hito::before {
        content: "0" counter(hito);
        position: absolute;
        top: -.9rem;
        left: 0;
        padding-right: .6rem;
        background: var(--lp-fondo);
        font-family: var(--lp-mono);
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .1em;
        color: var(--lp-realce);
    }

.lp-basicas__hito-titulo {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--lp-tinta);
}

.lp-basicas__hito-texto {
    display: block;
    font-size: .93rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Banda con fotografía ═════════════════════════════════════════════════
   Ranura opcional: si laboratorio.jpeg no existe, queda el degradado sobre el azul
   y la banda se ve terminada igual. */
.lp-basicas__banda {
    position: relative;
    padding: 5rem 0;
    color: #fff;
    background-color: var(--lp-profundo);
    background-image: linear-gradient(90deg, rgba(6, 20, 34, .93) 20%, rgba(6, 20, 34, .5) 100%), url("imagenes/laboratorio.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border-block: 2px solid var(--lp-uni-oro);
}

.lp-basicas__banda-texto {
    max-width: 38rem;
    margin: 0;
    font-size: clamp(1.2rem, 2.6vw, 1.8rem);
    line-height: 1.4;
    font-weight: 700;
}

/* ═══ Ruta de las semanas ══════════════════════════════════════════════════ */
.lp-basicas__ruta {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}

.lp-basicas__fase {
    padding: 1.5rem 1.25rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-top: 3px solid var(--lp-realce);
    border-radius: var(--lp-radio);
}

.lp-basicas__fase-rango {
    display: block;
    font-family: var(--lp-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-realce);
}

.lp-basicas__fase-titulo {
    display: block;
    margin: .35rem 0 .4rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.lp-basicas__fase-texto {
    display: block;
    font-size: .93rem;
    color: var(--lp-claro);
}

/* ═══ Preguntas frecuentes ═════════════════════════════════════════════════
   details y summary: se despliegan sin JavaScript. El marcador del navegador se
   retira y se dibuja un signo que cambia al abrir. */
.lp-basicas__faq {
    margin-top: 2rem;
    border-top: 1px solid var(--lp-borde);
}

.lp-basicas__faq-item {
    border-bottom: 1px solid var(--lp-borde);
}

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

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

        .lp-basicas__faq-item summary::after {
            content: "+";
            position: absolute;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--lp-mono);
            font-size: 1.35rem;
            line-height: 1;
            color: var(--lp-realce);
        }

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

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

    .lp-basicas__faq-item p {
        max-width: 48rem;
        margin: 0;
        padding: 0 0 1.3rem;
        font-size: .96rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
   Sobre el azul profundo, así engancha con el pie del sitio que el marco añade
   justo debajo. No necesita relleno extra por la barra: al llegar aquí, el guion
   ya la retiró. */
.lp-basicas__cierre {
    background: var(--lp-profundo);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

    .lp-basicas__cierre .lp-basicas__texto {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }

.lp-basicas__nota-legal {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    color: rgba(255, 255, 255, .65);
}

/* ═══ Adaptación a pantallas estrechas ═════════════════════════════════════ */
@media (max-width: 61.99rem) {
    .lp-basicas__portada-rejilla {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .lp-basicas__banda {
        background-image: linear-gradient(180deg, rgba(6, 20, 34, .82), rgba(6, 20, 34, .95)), url("imagenes/laboratorio.jpeg");
    }
}

@media (max-width: 35.99rem) {
    .lp-basicas__seccion,
    .lp-basicas__banda {
        padding: 3.5rem 0;
    }

    .lp-basicas__portada {
        padding: 3rem 0 2.5rem;
    }

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

    .lp-basicas__uni {
        margin: 0;
    }

    .lp-basicas__accion {
        width: 100%;
    }

    .lp-basicas__accion--compacta {
        width: auto;
    }

    .lp-basicas__barra-titulo {
        display: none;
    }

    /* Descontada la esquina de la mascota, a la barra le queda poco más de dos
       tercios del ancho: el texto y el botón se alinean a la izquierda y con menos
       margen a los lados, para que les quede el mayor ancho posible. */
    .lp-basicas__barra .lp-basicas__ancho {
        width: calc(100% - 2rem);
    }

    .lp-basicas__cuenta-caja {
        min-width: 3.9rem;
    }

    /* El nombre del curso pasa a su propia línea: con tres columnas, la barra se
       quedaba en un hilo. */
    .lp-basicas__plan-reparto li {
        grid-template-columns: 1fr 4rem;
    }

    .lp-basicas__plan-curso {
        grid-column: 1 / -1;
    }

    .lp-basicas__reto,
    .lp-basicas__banco,
    .lp-basicas__plan,
    .lp-basicas__ficha,
    .lp-basicas__eje {
        padding: 1.5rem 1.25rem;
    }

    .lp-basicas__eje {
        padding-top: 2.5rem;
    }
}