/* Landing del Ciclo Semestral · Área D, Ciencias Económicas y de la Gestión —
   San Marcos.

   TODO cuelga de .lp-eco. 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.
     · LA CAMPAÑA (el resto): crema de papel, azul tinta y verde de bono.

   El lenguaje es el de un diario económico y es exclusivo de esta landing: fondo
   crema en lugar de blanco o penumbra, titular con serif a todo el ancho, sumario a
   dos columnas, tabla de cotizaciones, cinta de indicadores arriba en vez de barra
   abajo y fotografía con pie en lugar de banda a sangre. */
.lp-eco {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #7A0C2E;
    --lp-uni-claro: #A31D42;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-oro: #D3A85B;
    /* ── Paleta de la campaña ──────────────────────────────────────────── */
    --lp-tinta: #16233A;
    --lp-tinta-suave: #5C6779;
    --lp-acento: #1E3A6E;
    --lp-acento-claro: #3D6BB8;
    --lp-acento-tinta: #FFFFFF;
    --lp-alza: #16794C;
    --lp-alza-suave: rgba(22, 121, 76, .1);
    --lp-baja: #9A3B3B;
    --lp-profundo: #101B2D;
    /* ── Superficies ───────────────────────────────────────────────────── */
    --lp-fondo: #FBF7EF;
    --lp-fondo-alterno: #F3EDE1;
    --lp-superficie: #FFFDF8;
    --lp-borde: rgba(22, 35, 58, .18);
    --lp-borde-suave: rgba(22, 35, 58, .1);
    --lp-claro: #DDE5F0;
    /* Serif del sistema para los titulares: es lo que da el registro de prensa
       económica sin pedir ninguna descarga. La monoespaciada queda para cifras y
       rótulos, donde el ancho fijo importa. */
    --lp-titular-tipo: Georgia, "Times New Roman", "Liberation Serif", serif;
    --lp-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    --lp-ancho: 78rem;
    --lp-ancho-texto: 46rem;
    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. El crema pasa a un papel oscuro y el
   azul sube de luminosidad para conservar el contraste. */
[data-tema="oscuro"] .lp-eco {
    --lp-uni: #8E1637;
    --lp-uni-claro: #B02A4E;
    --lp-uni-oro: #DFC384;
    --lp-tinta: #ECE7DC;
    --lp-tinta-suave: #A9B0BE;
    --lp-acento: #7FA8E8;
    --lp-acento-claro: #A8C4F0;
    --lp-acento-tinta: #0B1524;
    --lp-alza: #4CBF8B;
    --lp-alza-suave: rgba(76, 191, 139, .12);
    --lp-baja: #D98A8A;
    --lp-profundo: #0A1220;
    --lp-fondo: #14161A;
    --lp-fondo-alterno: #1A1D22;
    --lp-superficie: #1E2229;
    --lp-borde: rgba(236, 231, 220, .18);
    --lp-borde-suave: rgba(236, 231, 220, .1);
    --lp-claro: #C6D2E4;
}

/* ═══ 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-eco y
   aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-eco) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

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

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

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

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

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

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

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

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

    .lp-eco__punto,
    .lp-eco__cinta-pista {
        animation: none;
    }

    /* Sin movimiento no hay dibujado progresivo: el trazo aparece completo. */
    .lp-eco__curva-linea,
    .lp-eco__curva-area {
        transition: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

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

.lp-eco__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-eco__emblema svg {
        width: 1.3rem;
        height: 1.3rem;
    }

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

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

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

.lp-eco__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);
}

/* ═══ Cinta de indicadores ═════════════════════════════════════════════════
   Fija arriba y no abajo: es el teletipo de un diario económico, y de paso evita
   tapar el pie del sitio, donde vive el libro de reclamaciones.

   El botón va FUERA de la pista que se desplaza: si viajara con ella, sería un
   objetivo en movimiento. */
.lp-eco__cinta {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--lp-profundo);
    color: #fff;
    border-bottom: 2px solid var(--lp-uni-oro);
    transform: translateY(-110%);
    transition: transform .3s ease;
}

.lp-eco__cinta--visible {
    transform: none;
}

.lp-eco__cinta-marco {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem 0 0;
    /* El teletipo se recorta aquí: la pista es más ancha que la pantalla. */
    overflow: hidden;
}

.lp-eco__cinta-pista {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    animation: lp-eco-teletipo 38s linear infinite;
}

@keyframes lp-eco-teletipo {
    from {
        transform: translateX(0);
    }

    to {
        /* Exactamente el ancho de una copia: al llegar aquí, la segunda copia ocupa
           el sitio de la primera y el salto es invisible. */
        transform: translateX(-50%);
    }
}

.lp-eco__cinta-lista {
    display: flex;
    flex: 0 0 50%;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: .7rem 1.25rem .7rem 0;
    white-space: nowrap;
    font-family: var(--lp-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--lp-claro);
}

    .lp-eco__cinta-lista b {
        color: #fff;
    }

.lp-eco__cinta-cuenta {
    color: var(--lp-uni-oro);
    font-variant-numeric: tabular-nums;
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   Primera plana: cabecera de sección, titular a todo el ancho, sumario a dos
   columnas y cotizaciones al pie. Sin tarjeta lateral. */
.lp-eco__portada {
    padding: 3.5rem 0 3rem;
    border-bottom: 3px double var(--lp-borde);
}

.lp-eco__cabecera-diario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--lp-borde);
}

.lp-eco__seccion-diario {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-family: var(--lp-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

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

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

    50% {
        opacity: .3;
    }
}

.lp-eco__edicion {
    margin: 0;
    font-family: var(--lp-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-eco__titular {
    margin: 2rem 0 1.5rem;
    max-width: 22ch;
    font-family: var(--lp-titular-tipo);
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--lp-tinta);
}

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

/* Sumario a dos columnas, con filete entre ellas: la composición de prensa que
   ninguna de las otras landings usa. */
.lp-eco__sumario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.5rem 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lp-borde);
}

.lp-eco__entradilla {
    margin: 0;
    font-size: 1.05rem;
    color: var(--lp-tinta-suave);
}

    .lp-eco__entradilla + .lp-eco__entradilla {
        padding-left: 2.5rem;
        border-left: 1px solid var(--lp-borde-suave);
    }

/* ═══ Cotizaciones ═════════════════════════════════════════════════════════ */
.lp-eco__cotizaciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin: 2.5rem 0 0;
    background: var(--lp-borde);
    border: 1px solid var(--lp-borde);
}

.lp-eco__cotizacion {
    padding: .9rem 1.1rem;
    background: var(--lp-superficie);
}

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

    .lp-eco__cotizacion dd {
        margin: .2rem 0 0;
        font-family: var(--lp-mono);
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--lp-tinta);
        font-variant-numeric: tabular-nums;
    }

/* Los ceros van en verde y con su flecha: el signo no depende solo del color. */
.lp-eco__cotizacion--alza dd {
    color: var(--lp-alza);
}

    .lp-eco__cotizacion--alza dd::before {
        content: "▲ ";
        font-size: .7em;
    }

/* ═══ Botones ══════════════════════════════════════════════════════════════ */
.lp-eco__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

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

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

    .lp-eco__accion:hover {
        color: var(--lp-acento-tinta);
        background: var(--lp-tinta);
        transform: translateY(-2px);
    }

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

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

.lp-eco__accion--cinta {
    flex: 0 0 auto;
    padding: .45rem 1.1rem;
    background: var(--lp-uni-oro);
    color: var(--lp-profundo);
    font-size: .82rem;
}

    .lp-eco__accion--cinta:hover {
        background: #fff;
        color: var(--lp-profundo);
        transform: none;
    }

.lp-eco__accion--secundaria {
    background: transparent;
    border: 1px solid var(--lp-tinta);
    color: var(--lp-tinta);
}

    .lp-eco__accion--secundaria:hover {
        background: var(--lp-tinta);
        color: var(--lp-fondo);
    }

.lp-eco__accion--fantasma {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}

    .lp-eco__accion--fantasma:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

/* ═══ Secciones ════════════════════════════════════════════════════════════ */
.lp-eco__seccion {
    padding: 4.5rem 0;
}

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

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

.lp-eco__indice {
    margin: 0 0 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--lp-borde);
    font-family: var(--lp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

.lp-eco__indice--claro {
    border-bottom-color: rgba(255, 255, 255, .2);
    color: var(--lp-uni-oro);
}

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

.lp-eco__h2 {
    margin: 0 0 1rem;
    font-family: var(--lp-titular-tipo);
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--lp-tinta);
}

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

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

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

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

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

/* ═══ Calculadora ══════════════════════════════════════════════════════════
   Sin el guion no se pinta: un control que no calcula nada es peor que no ponerlo. */
.lp-eco__calculadora {
    display: none;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: start;
}

.lp-eco--con-calculadora .lp-eco__calculadora {
    display: grid;
}

.lp-eco__controles,
.lp-eco__resultado {
    padding: 1.75rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
}

.lp-eco__campo {
    margin: 0;
}

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

    .lp-eco__campo label {
        display: block;
        margin-bottom: .5rem;
        font-family: var(--lp-mono);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

    .lp-eco__campo input[type="range"] {
        width: calc(100% - 3.5rem);
        vertical-align: middle;
        /* Pinta el control nativo con el color de la campaña sin reescribir sus
           pseudoelementos por navegador. */
        accent-color: var(--lp-acento);
    }

    .lp-eco__campo input[type="number"] {
        width: 100%;
        padding: .7rem .9rem;
        background: var(--lp-fondo);
        border: 1px solid var(--lp-borde);
        color: var(--lp-tinta);
        font: inherit;
        font-family: var(--lp-mono);
        font-size: 1.05rem;
        font-weight: 700;
    }

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

.lp-eco__campo-valor {
    display: inline-block;
    width: 3rem;
    text-align: right;
    font-family: var(--lp-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--lp-acento);
    font-variant-numeric: tabular-nums;
}

.lp-eco__resultado-caras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1px;
    background: var(--lp-borde);
    border: 1px solid var(--lp-borde);
}

.lp-eco__cara {
    padding: 1.25rem;
    background: var(--lp-fondo);
}

.lp-eco__cara--propia {
    background: var(--lp-alza-suave);
}

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

.lp-eco__cara-cifra {
    margin: .35rem 0 .4rem;
    font-family: var(--lp-mono);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--lp-tinta);
    font-variant-numeric: tabular-nums;
}

.lp-eco__cara--propia .lp-eco__cara-cifra {
    color: var(--lp-alza);
}

.lp-eco__cara-nota {
    margin: 0;
    font-size: .85rem;
    color: var(--lp-tinta-suave);
}

.lp-eco__diferencia {
    margin: 1.25rem 0 0;
    padding: .9rem 1.1rem;
    background: var(--lp-tinta);
    color: var(--lp-fondo);
    font-size: 1rem;
    font-weight: 700;
    /* Sin resultado todavía no ocupa sitio, para que el bloque no dé un salto. */
    display: none;
}

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

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

/* ═══ Balance ══════════════════════════════════════════════════════════════
   Dos columnas separadas por un filete central, como en un libro de cuentas. */
.lp-eco__balance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0;
    margin-top: 2.5rem;
    border: 1px solid var(--lp-borde);
    background: var(--lp-superficie);
}

.lp-eco__columna {
    padding: 1.75rem;
}

.lp-eco__columna--haber {
    border-left: 1px solid var(--lp-borde);
    background: var(--lp-alza-suave);
}

.lp-eco__columna-titulo {
    margin: 0 0 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--lp-tinta);
    font-family: var(--lp-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

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

    .lp-eco__partidas li {
        padding: .7rem 0;
        border-bottom: 1px dotted var(--lp-borde);
        font-size: .95rem;
        color: var(--lp-tinta-suave);
    }

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

    .lp-eco__partidas span {
        display: block;
        font-weight: 700;
        color: var(--lp-tinta);
    }

/* ═══ Tabla de carreras ════════════════════════════════════════════════════ */
.lp-eco__tabla {
    margin-top: 2.5rem;
    border-top: 2px solid var(--lp-tinta);
}

.lp-eco__fila {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 14rem;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--lp-borde);
    align-items: baseline;
}

.lp-eco__fila--cabecera {
    font-family: var(--lp-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-eco__fila-nombre {
    font-family: var(--lp-titular-tipo);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

.lp-eco__fila-texto {
    font-size: .95rem;
    color: var(--lp-tinta-suave);
}

.lp-eco__fila-cursos {
    font-family: var(--lp-mono);
    font-size: .82rem;
    color: var(--lp-acento);
}

/* ═══ Fotografía con pie ═══════════════════════════════════════════════════
   Dentro del ancho y sin velo: la imagen se ve tal cual y el texto va debajo, como
   en prensa. Si el archivo faltara queda el marco con su fondo, no un hueco. */
.lp-eco__figura {
    margin: 0;
    padding: 1rem 0 4.5rem;
    background: var(--lp-fondo);
}

.lp-eco__imagen {
    height: clamp(14rem, 34vw, 26rem);
    background-color: var(--lp-fondo-alterno);
    background-image: url("imagenes/mercado.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--lp-borde);
}

.lp-eco__pie-foto {
    max-width: 44rem;
    margin: .75rem 0 0;
    padding-left: .9rem;
    border-left: 3px solid var(--lp-acento);
    font-size: .88rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Gráfico de proyección ════════════════════════════════════════════════
   El trazo se dibuja con dasharray: nace recortado y se completa cuando la sección
   entra en pantalla. El área aparece detrás con un desvanecido.

   pathLength normaliza la longitud del trazado a 100, así que el dasharray no
   depende de la geometría concreta del path y se puede reescribir sin recalcular
   nada. */
.lp-eco__grafico {
    margin-top: 2.5rem;
}

.lp-eco__curva {
    width: 100%;
    height: clamp(9rem, 20vw, 14rem);
    display: block;
}

    .lp-eco__curva path {
        fill: none;
        vector-effect: non-scaling-stroke;
    }

.lp-eco__curva-rejilla {
    stroke: rgba(255, 255, 255, .12);
    stroke-width: 1;
}

.lp-eco__curva-area {
    fill: var(--lp-uni-oro);
    stroke: none;
    opacity: 0;
    transition: opacity .9s ease .3s;
}

.lp-eco__curva-linea {
    stroke: var(--lp-uni-oro);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    pathLength: 100;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.4s ease-out;
}

.lp-eco--visible .lp-eco__curva-linea {
    stroke-dashoffset: 0;
}

.lp-eco--visible .lp-eco__curva-area {
    opacity: .16;
}

.lp-eco__etapas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.lp-eco__etapa-rango {
    display: block;
    font-family: var(--lp-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--lp-uni-oro);
}

.lp-eco__etapa-titulo {
    display: block;
    margin: .25rem 0 .3rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.lp-eco__etapa-texto {
    display: block;
    font-size: .88rem;
    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-eco__faq {
    margin-top: 2rem;
    border-top: 2px solid var(--lp-tinta);
}

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

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

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

        .lp-eco__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-acento);
        }

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

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

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

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
   Sobre el azul tinta, así engancha con el pie del sitio que el marco añade justo
   debajo. */
.lp-eco__cierre {
    background: var(--lp-profundo);
    color: #fff;
    padding: 4.5rem 0;
    text-align: center;
}

    .lp-eco__cierre .lp-eco__texto {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }

.lp-eco__nota-legal {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .78rem;
    color: rgba(255, 255, 255, .62);
}

/* ═══ Adaptación a pantallas estrechas ═════════════════════════════════════ */
@media (max-width: 61.99rem) {
    /* El sumario deja de ser dos columnas de prensa y el filete central sobra. */
    .lp-eco__entradilla + .lp-eco__entradilla {
        padding-left: 0;
        border-left: 0;
        padding-top: 1.25rem;
        border-top: 1px solid var(--lp-borde-suave);
    }

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

    .lp-eco__columna--haber {
        border-left: 0;
        border-top: 1px solid var(--lp-borde);
    }
}

@media (max-width: 47.99rem) {
    /* La tabla de carreras se apila: con tres columnas no cabe ninguna. */
    .lp-eco__fila {
        grid-template-columns: minmax(0, 1fr);
        gap: .4rem;
    }

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

    .lp-eco__fila-cursos::before {
        content: "Te pesa: ";
        color: var(--lp-tinta-suave);
    }
}

@media (max-width: 35.99rem) {
    .lp-eco__seccion {
        padding: 3.25rem 0;
    }

    .lp-eco__portada {
        padding: 2.5rem 0;
    }

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

    .lp-eco__uni {
        margin: 0;
    }

    .lp-eco__accion {
        width: 100%;
    }

    .lp-eco__accion--cinta {
        width: auto;
    }

    /* En pantalla estrecha el teletipo se queda sin sitio: se retira y la cinta
       conserva solo la cuenta atrás y el botón, que es lo accionable. */
    .lp-eco__cinta-lista {
        gap: 1.5rem;
    }

    .lp-eco__cinta-pista {
        animation-duration: 26s;
    }

    .lp-eco__controles,
    .lp-eco__resultado,
    .lp-eco__columna {
        padding: 1.5rem 1.25rem;
    }
}