/* Landing del Ciclo Semestral · Área C, Ingeniería — San Marcos.

   TODO cuelga de .lp-ing. 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): esmeralda sobre grafito frío.

   El lenguaje de formas es el de una herramienta de trabajo: página CLARA, tarjetas
   con esquina redondeada, sombras suaves y monoespaciada solo en métricas y
   rótulos. Salud abre en penumbra con fotografía y Ciencias Básicas en azul
   pizarra; esta abre en blanco con un panel de control. Es la diferencia que se
   nota antes de leer una palabra. */
.lp-ing {
    /* ── 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: #0E9F6E;
    --lp-acento-claro: #34D399;
    --lp-acento-tinta: #FFFFFF;
    --lp-realce: #10B981;
    --lp-realce-tinta: #05261B;
    --lp-profundo: #131A21;
    --lp-profundo-medio: #1D262F;
    --lp-claro: #D6E3E0;
    /* ── Superficies y texto ───────────────────────────────────────────── */
    --lp-tinta: #131A21;
    --lp-tinta-suave: #5A6873;
    --lp-fondo: #FFFFFF;
    --lp-fondo-alterno: #F4F7F6;
    --lp-superficie: #FFFFFF;
    --lp-apagado: #EDF1F0;
    --lp-borde: rgba(19, 26, 33, .12);
    --lp-borde-fuerte: rgba(19, 26, 33, .22);
    --lp-sombra: rgba(19, 26, 33, .07);
    --lp-sombra-fuerte: rgba(19, 26, 33, .14);
    /* Monoespaciada del sistema para métricas y rótulos: no pide descarga. */
    --lp-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    --lp-ancho: 82rem;
    --lp-ancho-texto: 46rem;
    --lp-radio: .9rem;
    --lp-radio-corto: .5rem;
    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-ing {
    --lp-uni: #8E1637;
    --lp-uni-claro: #B02A4E;
    --lp-uni-oro: #DFC384;
    --lp-acento: #34D399;
    --lp-acento-claro: #6EE7B7;
    --lp-acento-tinta: #05261B;
    --lp-realce: #34D399;
    --lp-profundo: #0B1116;
    --lp-profundo-medio: #131A21;
    --lp-claro: #C7D6D2;
    --lp-tinta: #E8EFED;
    --lp-tinta-suave: #A3B2B8;
    --lp-fondo: #0E1418;
    --lp-fondo-alterno: #141C21;
    --lp-superficie: #182027;
    --lp-apagado: #1A2329;
    --lp-borde: rgba(52, 211, 153, .18);
    --lp-borde-fuerte: rgba(52, 211, 153, .3);
    --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-ing y
   aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-ing) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

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

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

    body > :has(+ .lp-ing) > :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-ing :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, label, summary, button, textarea, article, aside) {
    color: inherit;
    font-family: inherit;
}

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

.lp-ing 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-ing--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s ease, transform .6s ease;
}

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

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

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

    .lp-ing__punto,
    .lp-ing__panel-punto {
        animation: none;
    }
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-ing__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-ing__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

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

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

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

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

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

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

/* ═══ Portada ══════════════════════════════════════════════════════════════
   En claro. El fondo es un degradado muy suave con dos halos: no hay imagen que
   descargar y la página abre al instante, que es parte del mensaje. */
.lp-ing__portada {
    position: relative;
    background: radial-gradient(60rem 40rem at 85% -10%, rgba(52, 211, 153, .16), transparent 65%), radial-gradient(50rem 35rem at 0% 100%, rgba(19, 26, 33, .07), transparent 60%), var(--lp-fondo);
    padding: 4rem 0 4.5rem;
    overflow: hidden;
}

.lp-ing__portada-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 3rem;
    align-items: center;
}

.lp-ing__marca-uni {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .5rem 1.1rem .5rem .5rem;
    background: var(--lp-fondo-alterno);
    border: 1px solid var(--lp-borde);
    border-radius: 999px;
    text-align: left;
}

    .lp-ing__marca-uni .lp-ing__emblema {
        width: 2.1rem;
        height: 2.1rem;
        border-color: var(--lp-uni);
        color: var(--lp-uni);
    }

    .lp-ing__marca-uni strong {
        display: block;
        font-family: var(--lp-uni-tipo);
        font-size: .95rem;
        line-height: 1.25;
        color: var(--lp-tinta);
    }

    .lp-ing__marca-uni small {
        display: block;
        font-family: var(--lp-mono);
        font-size: .68rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

.lp-ing__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .35rem 1rem;
    background: rgba(16, 185, 129, .12);
    border: 1px solid var(--lp-acento);
    border-radius: 999px;
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-ing__punto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--lp-realce);
    animation: lp-ing-latido 1.8s ease-in-out infinite;
}

@keyframes lp-ing-latido {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.7);
    }
}

.lp-ing__titulo {
    margin: 0 0 1rem;
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: var(--lp-tinta);
}

.lp-ing__titulo-destacado {
    display: block;
    color: var(--lp-acento);
}

.lp-ing__bajada {
    margin: 0;
    max-width: 34rem;
    font-size: 1.12rem;
    color: var(--lp-tinta-suave);
}

.lp-ing__ventajas {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .lp-ing__ventajas li {
        padding: .35rem .9rem;
        background: var(--lp-fondo-alterno);
        border: 1px solid var(--lp-borde);
        border-radius: 999px;
        font-size: .88rem;
        font-weight: 600;
        color: var(--lp-tinta-suave);
    }

/* ═══ Panel de control ═════════════════════════════════════════════════════
   La tarjeta que hace de "interfaz" en la portada. El punto verde que late arriba
   es el guiño de servicio en marcha. */
.lp-ing__panel {
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 1.5rem 3rem var(--lp-sombra);
}

.lp-ing__panel-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lp-borde);
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ing__panel-punto {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--lp-realce);
    box-shadow: 0 0 0 .25rem rgba(16, 185, 129, .18);
    animation: lp-ing-latido 2.4s ease-in-out infinite;
}

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

.lp-ing__cuenta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}

.lp-ing__cuenta-caja {
    padding: .7rem .3rem;
    background: var(--lp-fondo-alterno);
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio-corto);
    text-align: center;
}

.lp-ing__cuenta-cifra {
    display: block;
    font-family: var(--lp-mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lp-acento);
    /* 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-ing__cuenta-rotulo {
    display: block;
    font-family: var(--lp-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ing__cuenta-pie {
    margin: .6rem 0 0;
    font-size: .82rem;
    color: var(--lp-tinta-suave);
    text-align: center;
}

.lp-ing__panel-datos {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lp-borde);
}

    .lp-ing__panel-datos > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: .5rem;
        padding: .4rem 0;
    }

    .lp-ing__panel-datos dt {
        font-family: var(--lp-mono);
        font-size: .68rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

    .lp-ing__panel-datos dd {
        margin: 0;
        font-weight: 700;
        font-size: .93rem;
        text-align: right;
    }

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Redondeados y con sombra de color: forma de producto, no de píldora ni de pieza
   mecánica. */
.lp-ing__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

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

.lp-ing__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.9rem;
    border: 0;
    border-radius: var(--lp-radio-corto);
    background: var(--lp-acento);
    color: var(--lp-acento-tinta);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 .5rem 1.2rem rgba(14, 159, 110, .28);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .lp-ing__accion:hover {
        color: var(--lp-acento-tinta);
        transform: translateY(-2px);
        box-shadow: 0 .9rem 1.8rem rgba(14, 159, 110, .35);
    }

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

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

.lp-ing__accion--compacta {
    padding: .6rem 1.4rem;
    font-size: .92rem;
    box-shadow: none;
}

.lp-ing__accion--secundaria {
    background: transparent;
    border: 2px solid var(--lp-borde-fuerte);
    color: var(--lp-tinta);
    box-shadow: none;
}

    .lp-ing__accion--secundaria:hover {
        color: var(--lp-tinta);
        border-color: var(--lp-acento);
        box-shadow: none;
    }

.lp-ing__accion--fantasma {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    color: #fff;
    box-shadow: none;
}

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

.lp-ing__nota-accion {
    margin: 1rem 0 0;
    font-size: .88rem;
    color: var(--lp-tinta-suave);
}

/* ═══ 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.

   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-ing__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, .28);
}

.lp-ing--con-barra .lp-ing__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 .3s ease, opacity .3s ease, visibility .3s;
}

.lp-ing--con-barra .lp-ing__barra--visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

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

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

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

.lp-ing__barra-titulo {
    display: block;
    font-size: .92rem;
}

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

/* ═══ Métricas ═════════════════════════════════════════════════════════════ */
.lp-ing__metricas {
    background: var(--lp-profundo);
    color: #fff;
    padding: 2.5rem 0;
}

.lp-ing__metricas-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem;
}

.lp-ing__metrica {
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--lp-radio);
}

.lp-ing__metrica-cifra {
    display: block;
    font-family: var(--lp-mono);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lp-acento-claro);
    font-variant-numeric: tabular-nums;
}

.lp-ing__metrica-texto {
    display: block;
    font-size: .85rem;
    color: rgba(255, 255, 255, .75);
}

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

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

.lp-ing__indice {
    margin: 0 0 1.25rem;
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

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

.lp-ing__h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--lp-tinta);
}

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

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

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

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

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

/* ═══ Backlog ══════════════════════════════════════════════════════════════
   Dos columnas: los temas disponibles a la izquierda y el plan a la derecha. Sin
   el guion, la columna del plan se oculta y los temas quedan como listado del
   temario. */
.lp-ing__backlog {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: start;
}

.lp-ing__backlog-fuente,
.lp-ing__backlog-plan {
    padding: 1.75rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
}

.lp-ing__backlog-plan {
    display: none;
    /* La columna del plan acompaña al desplazamiento mientras se eligen temas: es
       lo que hace que el contador se vea moverse. Solo en pantalla ancha, donde hay
       sitio para las dos columnas. */
    position: sticky;
    top: 1.5rem;
    border-color: var(--lp-acento);
    box-shadow: 0 1rem 2rem var(--lp-sombra);
}

.lp-ing--con-backlog .lp-ing__backlog-plan {
    display: block;
}

.lp-ing__backlog-titulo {
    margin: 0 0 1.25rem;
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ing__grupo + .lp-ing__grupo {
    margin-top: 1.5rem;
}

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

.lp-ing__temas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .lp-ing__temas button {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 1rem;
        background: var(--lp-fondo-alterno);
        border: 1px solid var(--lp-borde);
        border-radius: 999px;
        color: var(--lp-tinta-suave);
        font: inherit;
        font-size: .9rem;
        cursor: pointer;
        transition: border-color .15s ease, color .15s ease, background-color .15s ease;
    }

        /* El signo delante cambia con el estado: es la señal que no depende del
           color y por tanto funciona para quien no lo distingue. */
        .lp-ing__temas button::before {
            content: "+";
            font-family: var(--lp-mono);
            font-weight: 700;
            color: var(--lp-acento);
        }

        .lp-ing__temas button:hover {
            border-color: var(--lp-acento);
            color: var(--lp-tinta);
        }

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

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

            .lp-ing__temas button[aria-pressed="true"]::before {
                content: "✓";
                color: var(--lp-acento-tinta);
            }

.lp-ing__plan-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
    max-height: 16rem;
    overflow-y: auto;
}

    .lp-ing__plan-lista li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .5rem .75rem;
        background: var(--lp-fondo-alterno);
        border-radius: var(--lp-radio-corto);
        font-size: .9rem;
    }

    /* El botón de quitar es un elemento aparte para que la fila no sea un botón
       entero: se lee mejor con lector de pantalla y evita quitar un tema por un
       toque accidental. */
    .lp-ing__plan-lista button {
        flex: 0 0 auto;
        width: 1.6rem;
        height: 1.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--lp-borde-fuerte);
        border-radius: 50%;
        color: var(--lp-tinta-suave);
        font: inherit;
        font-size: .9rem;
        line-height: 1;
        cursor: pointer;
    }

        .lp-ing__plan-lista button:hover {
            border-color: var(--lp-acento);
            color: var(--lp-acento);
        }

.lp-ing__plan-vacio {
    margin: 0;
    font-size: .9rem;
    color: var(--lp-tinta-suave);
}

.lp-ing__plan-totales {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lp-borde);
    text-align: center;
}

    .lp-ing__plan-totales dt {
        font-family: var(--lp-mono);
        font-size: .66rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

    .lp-ing__plan-totales dd {
        margin: .2rem 0 0;
        font-family: var(--lp-mono);
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1;
        color: var(--lp-acento);
        font-variant-numeric: tabular-nums;
    }

.lp-ing__plan-aviso {
    margin: 1rem 0 0;
    font-size: .8rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Carreras destacadas ══════════════════════════════════════════════════ */
.lp-ing__carreras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.lp-ing__carrera {
    padding: 1.75rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    box-shadow: 0 .5rem 1.5rem var(--lp-sombra);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .lp-ing__carrera:hover {
        transform: translateY(-5px);
        box-shadow: 0 1.2rem 2.4rem var(--lp-sombra-fuerte);
    }

.lp-ing__carrera-nombre {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

.lp-ing__carrera-texto {
    margin: 0 0 1.25rem;
    font-size: .95rem;
    color: var(--lp-tinta-suave);
}

.lp-ing__carrera-datos {
    list-style: none;
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--lp-borde);
    font-size: .9rem;
}

    .lp-ing__carrera-datos li + li {
        margin-top: .6rem;
    }

    .lp-ing__carrera-datos span {
        display: block;
        font-family: var(--lp-mono);
        font-size: .64rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--lp-acento);
    }

/* ═══ Diagrama de flujo ════════════════════════════════════════════════════
   Los nodos se encadenan con una flecha dibujada en el pseudoelemento: en fila
   apunta a la derecha y, al apilarse en móvil, hacia abajo. */
.lp-ing__flujo {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2.5rem 2rem;
}

.lp-ing__nodo {
    position: relative;
    padding: 1.5rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-top: 3px solid var(--lp-acento);
    border-radius: var(--lp-radio);
}

    .lp-ing__nodo::after {
        content: "→";
        position: absolute;
        top: 50%;
        right: -1.6rem;
        transform: translateY(-50%);
        font-family: var(--lp-mono);
        font-size: 1.3rem;
        color: var(--lp-acento);
    }

    .lp-ing__nodo:last-child::after {
        display: none;
    }

.lp-ing__nodo--decision {
    border-top-color: var(--lp-uni-oro);
}

.lp-ing__nodo--salida {
    border-top-color: var(--lp-realce);
    background: var(--lp-fondo-alterno);
}

.lp-ing__nodo-tipo {
    display: block;
    font-family: var(--lp-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ing__nodo-titulo {
    display: block;
    margin: .3rem 0 .4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

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

.lp-ing__nodo-ramas {
    display: grid;
    gap: .4rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--lp-borde-fuerte);
    font-size: .82rem;
    font-weight: 600;
}

.lp-ing__rama--si {
    color: var(--lp-acento);
}

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

/* ═══ Banda ════════════════════════════════════════════════════════════════
   Ranura de fotografía opcional: si campus.jpeg no existe, queda el degradado
   sobre el grafito y la banda se ve terminada igual. */
.lp-ing__banda {
    padding: 4.5rem 0;
    color: #fff;
    background-color: var(--lp-profundo);
    background-image: linear-gradient(90deg, rgba(11, 17, 22, .94) 25%, rgba(11, 17, 22, .55) 100%), url("imagenes/campus.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

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

.lp-ing__banda-texto {
    max-width: 38rem;
    margin: 0;
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
}

/* ═══ Tabla comparativa ════════════════════════════════════════════════════
   Tres columnas: concepto, cómo se hace fuera y cómo se hace aquí. La columna
   propia va destacada con fondo y filete. */
.lp-ing__tabla {
    margin-top: 2.5rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    overflow: hidden;
}

.lp-ing__fila {
    display: grid;
    grid-template-columns: 10rem 1fr 1fr;
    gap: 1.5rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--lp-borde);
    font-size: .95rem;
}

    .lp-ing__fila:last-child {
        border-bottom: 0;
    }

.lp-ing__fila--cabecera {
    background: var(--lp-fondo-alterno);
    font-family: var(--lp-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-ing__fila-clave {
    font-weight: 700;
    color: var(--lp-tinta);
}

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

.lp-ing__fila-nuestro {
    position: relative;
    padding-left: 1.4rem;
    font-weight: 600;
    color: var(--lp-tinta);
}

    .lp-ing__fila-nuestro::before {
        content: "✓";
        position: absolute;
        left: 0;
        font-weight: 700;
        color: var(--lp-acento);
    }

/* ═══ 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-ing__faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: .75rem;
    align-items: start;
    margin-top: 2rem;
}

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

    .lp-ing__faq-item summary {
        position: relative;
        padding: 1.05rem 2.75rem 1.05rem 1.2rem;
        font-weight: 700;
        color: var(--lp-tinta);
        cursor: pointer;
        list-style: none;
    }

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

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

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

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

    .lp-ing__faq-item p {
        margin: 0;
        padding: 0 1.2rem 1.1rem;
        font-size: .95rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
   Sobre el grafito, 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-ing__cierre {
    background: var(--lp-profundo);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

    .lp-ing__cierre .lp-ing__texto {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }

.lp-ing__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, .6);
}

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

    /* Con una sola columna, el plan va debajo de los temas y deja de acompañar al
       desplazamiento: pegado ahí taparía la mitad de la pantalla. */
    .lp-ing__backlog {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-ing__backlog-plan {
        position: static;
    }

    /* Apilados, los nodos encadenan hacia abajo. */
    .lp-ing__nodo::after {
        content: "↓";
        top: auto;
        right: 50%;
        bottom: -2rem;
        transform: translateX(50%);
    }

    .lp-ing__banda {
        background-image: linear-gradient(180deg, rgba(11, 17, 22, .85), rgba(11, 17, 22, .96)), url("imagenes/campus.jpeg");
    }

    .lp-ing__banda-contenido {
        justify-content: flex-start;
    }
}

@media (max-width: 47.99rem) {
    /* La clave sube a su propia línea y las dos comparaciones quedan una sobre
       otra: con tres columnas no cabe ninguna. */
    .lp-ing__fila {
        grid-template-columns: minmax(0, 1fr);
        gap: .35rem;
    }

    .lp-ing__fila--cabecera {
        display: none;
    }

    .lp-ing__fila-otros::before {
        content: "Fuera: ";
        font-weight: 700;
    }
}

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

    .lp-ing__portada {
        padding: 3rem 0 3.5rem;
    }

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

    .lp-ing__uni {
        margin: 0;
    }

    .lp-ing__accion {
        width: 100%;
    }

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

    .lp-ing__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-ing__barra .lp-ing__ancho {
        width: calc(100% - 2rem);
    }

    .lp-ing__panel,
    .lp-ing__backlog-fuente,
    .lp-ing__backlog-plan,
    .lp-ing__carrera,
    .lp-ing__nodo {
        padding: 1.5rem 1.25rem;
    }
}