/* Landing del Ciclo Anual — Universidad Nacional Federico Villarreal.

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

   CONCEPTO: la Villarreal como una red de transporte. Las secciones de "túnel"
   son oscuras en los dos temas; las de "andén" son claras, con baldosas, y se
   oscurecen en el tema oscuro. La tipografía es la de la señalética: palo seco,
   gruesa y sin cursivas.

   TRES FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): negro y naranja. Es la franja superior y será
       idéntica en las landings de la Villarreal.
     · LA ACCIÓN (--lp-naranja-*): el naranja de la Villarreal con texto casi
       negro, que es donde tiene contraste suficiente.
     · LAS LÍNEAS (--lp-l1 a --lp-l6): un color por familia de carreras. En el
       tema claro son oscuras con texto blanco; en el oscuro, claras con texto
       oscuro, para que se lean sobre el fondo de cada tema.

   Todo el movimiento respeta la preferencia de menos movimiento del sistema. */
.lp-ruta {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #141414;
    --lp-uni-alto: #262626;
    --lp-uni-naranja: #F26B1D;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #D6D6D6;
    --lp-uni-tipo: "Trebuchet MS", "Segoe UI", sans-serif;
    /* ── Acción ────────────────────────────────────────────────────────── */
    --lp-naranja: #F26B1D;
    --lp-naranja-fuerte: #E05A0C;
    --lp-naranja-borde: #9C3D05;
    --lp-naranja-tinta: #160800;
    --lp-naranja-suave: rgba(242, 107, 29, .14);
    --lp-naranja-brillo: rgba(242, 107, 29, .5);
    --lp-naranja-brillo-nulo: rgba(242, 107, 29, 0);
    /* ── Las seis líneas ───────────────────────────────────────────────── */
    --lp-l1: #D7263D;
    --lp-l2: #1D6FD8;
    --lp-l3: #0F7F44;
    --lp-l4: #7E3FC1;
    --lp-l5: #B98200;
    --lp-l6: #0B7A85;
    --lp-linea-tinta: #FFFFFF;
    --lp-l5-tinta: #1A1300;
    --lp-validado: #18A058;
    /* ── Túnel: oscuro en los dos temas ────────────────────────────────── */
    --lp-tunel: #111214;
    --lp-tunel-alto: #1C1E22;
    --lp-tunel-panel: rgba(255, 255, 255, .06);
    --lp-tunel-borde: rgba(255, 255, 255, .14);
    --lp-luz: #F5F5F2;
    --lp-luz-suave: rgba(245, 245, 242, .74);
    --lp-luz-tenue: rgba(245, 245, 242, .05);
    --lp-foco-tunel: rgba(242, 107, 29, .22);
    --lp-led: #FF8A1F;
    --lp-led-brillo: rgba(255, 138, 31, .55);
    --lp-led-fondo: #0A0A0B;
    --lp-led-rejilla: rgba(0, 0, 0, .55);
    --lp-velo: rgba(12, 12, 14, .5);
    --lp-velo-fuerte: rgba(12, 12, 14, .86);
    --lp-reflejo: rgba(255, 255, 255, .16);
    /* ── Puertas del vagón ─────────────────────────────────────────────── */
    --lp-puerta: #C7CBD1;
    --lp-puerta-sombra: #969CA4;
    --lp-puerta-vidrio: rgba(17, 18, 20, .72);
    --lp-puerta-goma: #2A2C30;
    /* ── Andén: secciones claras ───────────────────────────────────────── */
    --lp-tinta: #16181C;
    --lp-tinta-suave: #525861;
    --lp-acento: #B84A0B;
    --lp-fondo: #F5F5F3;
    --lp-fondo-alterno: #EBEBE7;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(22, 24, 28, .12);
    --lp-borde-fuerte: rgba(22, 24, 28, .26);
    --lp-sombra: rgba(22, 24, 28, .08);
    --lp-sombra-fuerte: rgba(22, 24, 28, .2);
    --lp-sombra-foto: rgba(0, 0, 0, .45);
    --lp-baldosa: rgba(22, 24, 28, .04);
    --lp-mapa-fondo: #FFFFFF;
    --lp-mapa-reticula: rgba(22, 24, 28, .05);
    --lp-mapa-nodo: #FFFFFF;
    --lp-mapa-nodo-borde: #16181C;
    --lp-anillo: #B84A0B;
    /* ── Medidas y tipografías ─────────────────────────────────────────── */
    --lp-ancho: 80rem;
    --lp-rotulo: "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --lp-led-tipo: Consolas, "Cascadia Mono", "Courier New", monospace;
    margin: 0;
    background: var(--lp-fondo);
    color: var(--lp-tinta);
    line-height: 1.6;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo se
   reasignan las variables, nunca las reglas. El túnel ya es oscuro: el cambio se
   nota en el andén, en el mapa y en los colores de las líneas. */
[data-tema="oscuro"] .lp-ruta {
    --lp-uni: #0C0C0C;
    --lp-uni-alto: #1E1E1E;
    --lp-uni-naranja: #FF7A2E;
    --lp-uni-plata: #E3E3E3;
    --lp-naranja: #FF7A2E;
    --lp-naranja-fuerte: #FF8E4D;
    --lp-naranja-borde: #B34A0E;
    --lp-naranja-suave: rgba(255, 122, 46, .16);
    --lp-naranja-brillo: rgba(255, 122, 46, .45);
    --lp-naranja-brillo-nulo: rgba(255, 122, 46, 0);
    --lp-l1: #FF5A6E;
    --lp-l2: #5B9BFF;
    --lp-l3: #3CCB7F;
    --lp-l4: #B08AF0;
    --lp-l5: #F2B705;
    --lp-l6: #2CC4D1;
    --lp-linea-tinta: #0E0F12;
    --lp-validado: #3CCB7F;
    --lp-tunel: #0A0B0D;
    --lp-tunel-alto: #16181C;
    --lp-foco-tunel: rgba(255, 122, 46, .16);
    --lp-velo: rgba(5, 5, 6, .6);
    --lp-velo-fuerte: rgba(5, 5, 6, .9);
    --lp-reflejo: rgba(255, 255, 255, .1);
    --lp-puerta: #8E949C;
    --lp-puerta-sombra: #5F656D;
    --lp-puerta-vidrio: rgba(5, 5, 6, .8);
    --lp-puerta-goma: #141518;
    --lp-tinta: #ECEBE7;
    --lp-tinta-suave: #A9ADB5;
    --lp-acento: #FF9A55;
    --lp-fondo: #121316;
    --lp-fondo-alterno: #181A1E;
    --lp-superficie: #202328;
    --lp-borde: rgba(236, 235, 231, .14);
    --lp-borde-fuerte: rgba(236, 235, 231, .28);
    --lp-sombra: rgba(0, 0, 0, .45);
    --lp-sombra-fuerte: rgba(0, 0, 0, .6);
    --lp-sombra-foto: rgba(0, 0, 0, .6);
    --lp-baldosa: rgba(236, 235, 231, .03);
    --lp-mapa-fondo: #16181C;
    --lp-mapa-reticula: rgba(236, 235, 231, .05);
    --lp-mapa-nodo: #202328;
    --lp-mapa-nodo-borde: #ECEBE7;
    --lp-anillo: #FF9A55;
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. El hueco se pinta del color de la franja institucional
   para que no se distinga. El color va escrito porque aquí se pinta un ancestro
   de .lp-ruta, que no ve sus variables. */
body:has(> .lp-ruta) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #141414;
}

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

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

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

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

.lp-ruta,
.lp-ruta *,
.lp-ruta *::before,
.lp-ruta *::after {
    box-sizing: border-box;
}

/* Lo que el guion oculta con hidden se oculta siempre, aunque una regla de esta
   hoja le haya dado otro display. */
.lp-ruta [hidden] {
    display: none !important;
}

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-ruta [id] {
    scroll-margin-top: 5rem;
}

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

.lp-ruta__ancho--estrecho {
    width: min(100% - 2.5rem, 52rem);
}

.lp-ruta svg {
    fill: currentColor;
}

.lp-ruta__icono {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}

/* Las fotografías reservan su proporción con width y height del marcado, así la
   página no salta al cargarlas. El fondo que lleva cada una es la red de
   seguridad si un archivo faltara. Va dentro de :where para que la clase de
   cada foto pueda cambiarle el alto sin pelear por especificidad. */
.lp-ruta :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

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

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

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-ruta__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-alto));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -3px 0 var(--lp-uni-naranja);
}

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

.lp-ruta__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .5rem;
    background: var(--lp-uni-naranja);
    color: var(--lp-uni);
}

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

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

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

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

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

/* ═══ Secciones y tipografía ═══════════════════════════════════════════════
   El andén lleva una retícula de baldosas muy tenue. overflow-x: clip recorta lo
   que sobresale sin crear un contenedor de desplazamiento. */
.lp-ruta__seccion {
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    overflow-x: clip;
    background-image: linear-gradient(var(--lp-baldosa) 1px, transparent 1px), linear-gradient(90deg, var(--lp-baldosa) 1px, transparent 1px);
    background-size: 3rem 3rem;
}

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

.lp-ruta__seccion--tunel {
    --lp-anillo: var(--lp-naranja);
    background-color: var(--lp-tunel);
    background-image: radial-gradient(ellipse 60% 40% at 50% 0%, var(--lp-foco-tunel), transparent 70%);
    background-size: auto;
    color: var(--lp-luz);
}

.lp-ruta__cabecera {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.lp-ruta__cabecera--centro {
    margin-inline: auto;
    text-align: center;
}

/* El antetítulo es un letrero de estación: cápsula oscura con su punto naranja. */
.lp-ruta__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .3rem .95rem .3rem .35rem;
    border-radius: 99rem;
    background: var(--lp-tinta);
    color: var(--lp-fondo);
    font-family: var(--lp-rotulo);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
}

    .lp-ruta__antetitulo::before {
        content: "";
        width: 1.15rem;
        height: 1.15rem;
        border: .28rem solid var(--lp-naranja);
        border-radius: 50%;
        background: var(--lp-fondo);
    }

.lp-ruta__seccion--tunel .lp-ruta__antetitulo {
    background: var(--lp-luz);
    color: var(--lp-tunel);
}

    .lp-ruta__seccion--tunel .lp-ruta__antetitulo::before {
        background: var(--lp-luz);
    }

.lp-ruta__h2 {
    margin: 0 0 1rem;
    font-family: var(--lp-rotulo);
    font-size: clamp(2rem, 4.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.lp-ruta__h3 {
    margin: 0 0 .5rem;
    font-family: var(--lp-rotulo);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.lp-ruta__h4 {
    margin: 0 0 .5rem;
    font-family: var(--lp-rotulo);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.lp-ruta__entrada {
    margin: 0;
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    color: var(--lp-tinta-suave);
}

.lp-ruta__seccion--tunel .lp-ruta__entrada {
    color: var(--lp-luz-suave);
}

.lp-ruta__nota {
    max-width: 52rem;
    margin: 1.5rem 0 0;
    font-size: .9rem;
    color: var(--lp-tinta-suave);
}

.lp-ruta__nota--centro {
    margin-inline: auto;
    text-align: center;
}

.lp-ruta__seccion--tunel .lp-ruta__nota {
    color: var(--lp-luz-suave);
}

.lp-ruta__enlace {
    color: var(--lp-acento);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
}

    .lp-ruta__enlace:hover {
        color: var(--lp-tinta);
    }

    .lp-ruta__enlace:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 2px;
        border-radius: .2rem;
    }

/* ═══ Botones ══════════════════════════════════════════════════════════════
   El color de hover se repite en cada variante porque la regla a:hover del sitio
   pesa más que una sola clase. */
.lp-ruta__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.75rem;
}

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

.lp-ruta__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: .65rem;
    font-family: var(--lp-rotulo);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

    .lp-ruta__accion:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 3px;
    }

    .lp-ruta__accion:disabled {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.lp-ruta__accion--naranja {
    background: var(--lp-naranja);
    border-color: var(--lp-naranja-borde);
    color: var(--lp-naranja-tinta);
    box-shadow: 0 .28rem 0 var(--lp-naranja-borde);
}

    .lp-ruta__accion--naranja:hover {
        background: var(--lp-naranja-fuerte);
        color: var(--lp-naranja-tinta);
        transform: translateY(-2px);
        box-shadow: 0 .42rem 0 var(--lp-naranja-borde);
    }

    .lp-ruta__accion--naranja:active {
        transform: translateY(.22rem);
        box-shadow: 0 .05rem 0 var(--lp-naranja-borde);
    }

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

    .lp-ruta__accion--contorno:hover:not(:disabled) {
        background: var(--lp-tinta);
        border-color: var(--lp-tinta);
        color: var(--lp-fondo);
    }

.lp-ruta__portada .lp-ruta__accion--contorno:hover,
.lp-ruta__seccion--tunel .lp-ruta__accion--contorno:hover:not(:disabled) {
    background: var(--lp-luz);
    border-color: var(--lp-luz);
    color: var(--lp-tunel);
}

.lp-ruta__accion--tinta {
    background: var(--lp-tinta);
    border-color: var(--lp-tinta);
    color: var(--lp-fondo);
}

    .lp-ruta__accion--tinta:hover:not(:disabled) {
        background: var(--lp-naranja);
        border-color: var(--lp-naranja-borde);
        color: var(--lp-naranja-tinta);
    }

.lp-ruta__accion--compacta {
    min-height: 2.75rem;
    padding: .55rem 1.1rem;
    font-size: .98rem;
}

.lp-ruta__accion--grande {
    min-height: 3.6rem;
    padding: 1rem 2.2rem;
    font-size: 1.25rem;
}

/* El botón principal de la portada late como la luz de un andén. */
.lp-ruta__accion--brillo {
    animation: lp-ruta-brillo 2.6s ease-in-out infinite;
}

@keyframes lp-ruta-brillo {
    0%, 100% {
        box-shadow: 0 .28rem 0 var(--lp-naranja-borde), 0 0 0 0 var(--lp-naranja-brillo);
    }

    50% {
        box-shadow: 0 .28rem 0 var(--lp-naranja-borde), 0 0 0 .7rem var(--lp-naranja-brillo-nulo);
    }
}

/* ═══ Insignias de línea ═══════════════════════════════════════════════════
   El cuadrado de color con su número, como en los planos de metro. */
.lp-ruta__insignia {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .4rem;
    border-radius: .55rem;
    color: var(--lp-linea-tinta);
    font-family: var(--lp-rotulo);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}

.lp-ruta__insignia--1 {
    background: var(--lp-l1);
}

.lp-ruta__insignia--2 {
    background: var(--lp-l2);
}

.lp-ruta__insignia--3 {
    background: var(--lp-l3);
}

.lp-ruta__insignia--4 {
    background: var(--lp-l4);
}

.lp-ruta__insignia--5 {
    background: var(--lp-l5);
    color: var(--lp-l5-tinta);
}

.lp-ruta__insignia--6 {
    background: var(--lp-l6);
}

.lp-ruta__insignia--terminal {
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
}

/* ═══ Portada ══════════════════════════════════════════════════════════════ */
.lp-ruta__portada {
    --lp-anillo: var(--lp-naranja);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--lp-tunel);
    color: var(--lp-luz);
}

    /* Las luces del túnel: un halo naranja arriba y franjas de luz que pasan. */
    .lp-ruta__portada::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(ellipse 55% 45% at 15% 0%, var(--lp-foco-tunel), transparent 70%), repeating-linear-gradient(90deg, transparent 0 9rem, var(--lp-luz-tenue) 9rem 9.4rem);
    }

.lp-ruta__portada-rejilla {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.lp-ruta__distintivo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.4rem;
    padding: .4rem 1rem .4rem .5rem;
    border: 1px solid var(--lp-tunel-borde);
    border-radius: 99rem;
    background: var(--lp-tunel-panel);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Las seis líneas en miniatura, como el haz que sale del origen del mapa. */
.lp-ruta__distintivo-linea {
    width: 2.2rem;
    height: .9rem;
    border-radius: 99rem;
    background: linear-gradient(180deg, var(--lp-l1) 0 16.6%, var(--lp-l2) 16.6% 33.3%, var(--lp-l3) 33.3% 50%, var(--lp-l4) 50% 66.6%, var(--lp-l5) 66.6% 83.3%, var(--lp-l6) 83.3% 100%);
}

.lp-ruta__titulo {
    margin: 0 0 1.25rem;
    font-family: var(--lp-rotulo);
    font-size: clamp(2.6rem, 6.8vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.lp-ruta__titulo-remate {
    display: block;
    margin-top: .1em;
    color: var(--lp-naranja);
}

.lp-ruta__bajada {
    max-width: 36rem;
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.22rem);
    color: var(--lp-luz-suave);
}

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

    .lp-ruta__insignias li {
        padding: .3rem .8rem;
        border: 1px solid var(--lp-tunel-borde);
        border-radius: 99rem;
        background: var(--lp-tunel-panel);
        font-size: .82rem;
        font-weight: 600;
    }

        .lp-ruta__insignias li::before {
            content: "";
            display: inline-block;
            width: .5rem;
            height: .5rem;
            margin-right: .45rem;
            border-radius: 50%;
            background: var(--lp-naranja);
            vertical-align: .1em;
        }

/* La foto como la ventana de un vagón: marco grueso de esquinas redondas y un
   reflejo de vidrio cruzado. */
.lp-ruta__portada-visual {
    position: relative;
}

.lp-ruta__ventana {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: .8rem solid var(--lp-tunel-alto);
    border-radius: 2.2rem;
    background: var(--lp-tunel-alto);
    box-shadow: 0 0 0 2px var(--lp-tunel-borde), 0 1.75rem 3.5rem var(--lp-sombra-foto);
}

    .lp-ruta__ventana::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 30%, var(--lp-reflejo) 38%, transparent 46%, transparent 62%, var(--lp-reflejo) 66%, transparent 70%);
        pointer-events: none;
    }

.lp-ruta__ventana-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.4rem;
    background: var(--lp-uni-alto);
}

/* El boleto: cuerpo y talón separados por una línea troquelada con dos muescas. */
.lp-ruta__boleto {
    position: relative;
    z-index: 2;
    margin: -2rem .75rem 0;
    overflow: hidden;
    border-radius: .8rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra-foto);
}

.lp-ruta__boleto-cuerpo {
    padding: 0 1rem .5rem;
}

.lp-ruta__boleto-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: 0 -1rem;
    padding: .6rem 1rem;
    background: var(--lp-tinta);
    color: var(--lp-fondo);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

    .lp-ruta__boleto-cabecera span:last-child {
        color: var(--lp-naranja);
    }

.lp-ruta__boleto-datos {
    margin: 0;
    padding-top: .35rem;
}

.lp-ruta__boleto-fila {
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr);
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--lp-borde);
}

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

    .lp-ruta__boleto-fila dt {
        padding-top: .15rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

    .lp-ruta__boleto-fila dd {
        margin: 0;
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.35;
    }

.lp-ruta__boleto-talon {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 0;
    padding: .75rem 1rem .85rem;
    border-top: 2px dashed var(--lp-borde-fuerte);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

    .lp-ruta__boleto-talon::before,
    .lp-ruta__boleto-talon::after {
        content: "";
        position: absolute;
        top: -.75rem;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        background: var(--lp-tunel);
    }

    .lp-ruta__boleto-talon::before {
        left: -.7rem;
    }

    .lp-ruta__boleto-talon::after {
        right: -.7rem;
    }

.lp-ruta__boleto-lineas {
    display: inline-flex;
    gap: .25rem;
}

.lp-ruta__punto {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
}

.lp-ruta__punto--1 {
    background: var(--lp-l1);
}

.lp-ruta__punto--2 {
    background: var(--lp-l2);
}

.lp-ruta__punto--3 {
    background: var(--lp-l3);
}

.lp-ruta__punto--4 {
    background: var(--lp-l4);
}

.lp-ruta__punto--5 {
    background: var(--lp-l5);
}

.lp-ruta__punto--6 {
    background: var(--lp-l6);
}

/* El letrero luminoso del andén: diodos naranja sobre negro con una rejilla de
   puntos encima; la cinta va duplicada y corre la mitad de su largo. */
.lp-ruta__marquesina {
    position: relative;
    margin-top: clamp(3rem, 7vw, 5rem);
    overflow: hidden;
    border-top: 3px solid var(--lp-tunel-alto);
    background: var(--lp-led-fondo);
}

    .lp-ruta__marquesina::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(transparent 55%, var(--lp-led-rejilla) 60%);
        background-size: 4px 4px;
        pointer-events: none;
    }

.lp-ruta__marquesina-cinta {
    display: flex;
    width: max-content;
    animation: lp-ruta-marquesina 48s linear infinite;
}

    .lp-ruta__marquesina-cinta span {
        padding: .85rem 1.6rem;
        color: var(--lp-led);
        font-family: var(--lp-led-tipo);
        font-size: clamp(.95rem, 2vw, 1.2rem);
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-shadow: 0 0 .45rem var(--lp-led-brillo);
        white-space: nowrap;
    }

        .lp-ruta__marquesina-cinta span::after {
            content: "•";
            margin-left: 3.2rem;
        }

@keyframes lp-ruta-marquesina {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (min-width: 62rem) {
    .lp-ruta__portada-rejilla {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 3.5rem;
    }

    .lp-ruta__ventana-foto {
        aspect-ratio: 5 / 6;
    }

    .lp-ruta__boleto {
        position: absolute;
        bottom: -2.5rem;
        left: -3rem;
        width: min(21rem, 80%);
        margin: 0;
        transform: rotate(-2.5deg);
    }
}

/* ═══ La ruta del año ══════════════════════════════════════════════════════
   El diagrama de línea: siete columnas iguales (seis estaciones y la terminal).
   El tren va encima, centrado sobre la estación elegida con --lp-parada, que
   escribe el guion. En móvil el diagrama se pone vertical. */
.lp-ruta__recorrido {
    --lp-parada: 0;
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--lp-borde);
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra);
}

/* La pantalla del vagón. Si el texto no cabe, el guion calcula cuánto sobra y
   la cinta va y vuelve para enseñarlo entero. */
.lp-ruta__pantalla {
    --lp-sobra: 0px;
    position: relative;
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    overflow: hidden;
    border-radius: .6rem;
    background: var(--lp-led-fondo);
    color: var(--lp-led);
    font-family: var(--lp-led-tipo);
    font-size: clamp(.9rem, 1.8vw, 1.05rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-shadow: 0 0 .4rem var(--lp-led-brillo);
    white-space: nowrap;
}

    .lp-ruta__pantalla::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(transparent 55%, var(--lp-led-rejilla) 60%);
        background-size: 3px 3px;
        pointer-events: none;
    }

.lp-ruta__pantalla-texto {
    display: inline-block;
}

.lp-ruta__pantalla--desliza .lp-ruta__pantalla-texto {
    animation: lp-ruta-pantalla 7s ease-in-out 1s infinite alternate;
}

@keyframes lp-ruta-pantalla {
    0%, 12% {
        transform: translateX(0);
    }

    88%, 100% {
        transform: translateX(calc(-1 * var(--lp-sobra)));
    }
}

.lp-ruta__via {
    position: relative;
    padding-top: 3.2rem;
}

.lp-ruta__paradas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* La vía: de la primera estación a la terminal, a la altura de los puntos. */
    .lp-ruta__paradas::before {
        content: "";
        position: absolute;
        top: .55rem;
        right: calc(100% / 14);
        left: calc(100% / 14);
        height: .5rem;
        border-radius: 99rem;
        background: var(--lp-naranja);
    }

.lp-ruta__parada {
    position: relative;
    display: flex;
    justify-content: center;
}

.lp-ruta__parada-boton,
.lp-ruta__parada-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 100%;
    margin: 0;
    padding: 0 .15rem .25rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
}

.lp-ruta__parada-boton {
    cursor: pointer;
}

    .lp-ruta__parada-boton:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 2px;
        border-radius: .5rem;
    }

.lp-ruta__parada-punto {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border: .3rem solid var(--lp-tinta);
    border-radius: 50%;
    background: var(--lp-superficie);
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

.lp-ruta__parada-nombre {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lp-tinta-suave);
}

.lp-ruta__parada--pasada .lp-ruta__parada-punto {
    background: var(--lp-tinta);
}

.lp-ruta__parada-boton[aria-selected="true"] .lp-ruta__parada-punto {
    border-color: var(--lp-naranja-borde);
    background: var(--lp-naranja);
    transform: scale(1.25);
}

.lp-ruta__parada-boton[aria-selected="true"] .lp-ruta__parada-nombre {
    color: var(--lp-tinta);
}

/* La terminal es una cápsula, como las estaciones de trasbordo. */
.lp-ruta__parada--terminal .lp-ruta__parada-punto {
    width: 2.6rem;
    border-radius: 99rem;
    border-color: var(--lp-naranja-borde);
    background: var(--lp-tinta);
}

.lp-ruta__parada--terminal .lp-ruta__parada-nombre {
    color: var(--lp-acento);
    font-weight: 800;
}

.lp-ruta__tren {
    position: absolute;
    top: 0;
    left: calc((var(--lp-parada) + .5) / 7 * 100%);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    background: var(--lp-tinta);
    color: var(--lp-naranja);
    box-shadow: 0 .4rem .9rem var(--lp-sombra-fuerte);
    transform: translateX(-50%);
    transition: left .7s cubic-bezier(.45, 0, .2, 1), top .7s cubic-bezier(.45, 0, .2, 1);
}

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

    .lp-ruta__tren::after {
        content: "";
        position: absolute;
        bottom: -.4rem;
        left: 50%;
        border: .4rem solid transparent;
        border-top-color: var(--lp-tinta);
        border-bottom: 0;
        transform: translateX(-50%);
    }

.lp-ruta__mandos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    margin: 1.5rem 0;
}

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

.lp-ruta__estacion {
    display: grid;
    gap: 1rem 1.75rem;
    padding: clamp(.75rem, 2vw, 1.25rem);
    border: 1px solid var(--lp-borde);
    border-radius: 1rem;
    background: var(--lp-fondo);
}

.lp-ruta--animada .lp-ruta__estacion {
    animation: lp-ruta-entrar .45s ease both;
}

@keyframes lp-ruta-entrar {
    from {
        opacity: 0;
        transform: translateX(1.25rem);
    }

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

.lp-ruta__estacion-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .75rem;
    background: var(--lp-uni-alto);
}

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

.lp-ruta__estacion-texto .lp-ruta__h3 {
    margin-bottom: .35rem;
}

p.lp-ruta__estacion-numero {
    margin: 0 0 .25rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

p.lp-ruta__estacion-semanas {
    margin: 0;
    font-weight: 700;
    color: var(--lp-tinta);
}

p.lp-ruta__estacion-fechas {
    font-size: .9rem;
}

.lp-ruta__cursos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

    .lp-ruta__cursos li {
        padding: .25rem .75rem;
        border: 1px solid var(--lp-borde-fuerte);
        border-radius: 99rem;
        background: var(--lp-superficie);
        font-size: .85rem;
        font-weight: 700;
    }

@media (min-width: 48rem) {
    .lp-ruta__estacion {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        align-items: center;
    }
}

/* En pantallas estrechas el diagrama se pone de pie: filas de alto fijo, la vía
   a la izquierda y el tren bajando por ella. */
@media (max-width: 47.99rem) {
    .lp-ruta__via {
        padding-top: 0;
        padding-left: 3.4rem;
    }

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

        .lp-ruta__paradas::before {
            top: 1.5rem;
            right: auto;
            bottom: 1.5rem;
            left: .55rem;
            width: .5rem;
            height: auto;
        }

    .lp-ruta__parada {
        justify-content: flex-start;
    }

    .lp-ruta__parada-boton,
    .lp-ruta__parada-marca {
        flex-direction: row;
        gap: .85rem;
        padding: 0 .25rem 0 0;
        text-align: left;
    }

    .lp-ruta__parada-nombre {
        font-size: .95rem;
    }

    .lp-ruta__parada--terminal .lp-ruta__parada-punto {
        width: 1.6rem;
        height: 2.4rem;
    }

    .lp-ruta__tren {
        top: calc((var(--lp-parada) + .5) * 3rem);
        left: 0;
        width: 2.4rem;
        height: 2.4rem;
        transform: translateY(-50%);
    }

        .lp-ruta__tren::after {
            top: 50%;
            right: -.4rem;
            bottom: auto;
            left: auto;
            border: .4rem solid transparent;
            border-left-color: var(--lp-tinta);
            border-right: 0;
            transform: translateY(-50%);
        }
}

/* ═══ La red ═══════════════════════════════════════════════════════════════ */
.lp-ruta__red {
    display: grid;
    gap: 1.5rem;
}

.lp-ruta__red-mandos {
    display: grid;
    gap: 1.25rem;
}

.lp-ruta__lineas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .6rem;
}

.lp-ruta__linea-boton {
    --lp-color-linea: var(--lp-l1);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: .75rem;
    margin: 0;
    padding: .6rem .8rem;
    border: 2px solid var(--lp-borde-fuerte);
    border-radius: .8rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .lp-ruta__linea-boton .lp-ruta__insignia {
        grid-row: 1 / span 2;
    }

    .lp-ruta__linea-boton:hover {
        border-color: var(--lp-color-linea);
        transform: translateY(-2px);
    }

    .lp-ruta__linea-boton:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 2px;
    }

    .lp-ruta__linea-boton[aria-pressed="true"] {
        border-color: var(--lp-color-linea);
        box-shadow: inset .4rem 0 0 var(--lp-color-linea), 0 .6rem 1.2rem var(--lp-sombra);
    }

.lp-ruta__linea-boton--2 {
    --lp-color-linea: var(--lp-l2);
}

.lp-ruta__linea-boton--3 {
    --lp-color-linea: var(--lp-l3);
}

.lp-ruta__linea-boton--4 {
    --lp-color-linea: var(--lp-l4);
}

.lp-ruta__linea-boton--5 {
    --lp-color-linea: var(--lp-l5);
}

.lp-ruta__linea-boton--6 {
    --lp-color-linea: var(--lp-l6);
}

.lp-ruta__linea-nombre {
    font-weight: 700;
    line-height: 1.25;
}

.lp-ruta__linea-cuenta {
    font-size: .8rem;
    color: var(--lp-tinta-suave);
}

/* El buscador de destinos. */
.lp-ruta__buscador {
    display: grid;
    gap: .75rem;
    max-width: 40rem;
}

.lp-ruta__campo {
    display: grid;
    gap: .4rem;
    margin: 0;
}

.lp-ruta__campo-rotulo {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-ruta__campo-caja {
    position: relative;
    display: block;
}

.lp-ruta__campo-lupa {
    position: absolute;
    top: 50%;
    left: .85rem;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--lp-tinta-suave);
    transform: translateY(-50%);
    pointer-events: none;
}

.lp-ruta__campo-control {
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: .6rem .9rem .6rem 2.6rem;
    border: 2px solid var(--lp-borde-fuerte);
    border-radius: .65rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font: inherit;
    font-size: 1rem;
    color-scheme: light;
}

    .lp-ruta__campo-control:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 2px;
    }

    .lp-ruta__campo-control::placeholder {
        color: currentColor;
        opacity: .55;
    }

[data-tema="oscuro"] .lp-ruta__campo-control {
    color-scheme: dark;
}

.lp-ruta__resultados {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .lp-ruta__resultados:empty {
        display: none;
    }

.lp-ruta__resultado {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid var(--lp-borde);
    border-radius: .6rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .lp-ruta__resultado:hover {
        border-color: var(--lp-naranja);
    }

    .lp-ruta__resultado:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 2px;
    }

    .lp-ruta__resultado .lp-ruta__insignia {
        min-width: 2rem;
        height: 2rem;
        font-size: .8rem;
    }

.lp-ruta__resultado-carrera {
    display: block;
    font-weight: 700;
    line-height: 1.25;
}

.lp-ruta__resultado-donde {
    display: block;
    font-size: .82rem;
    color: var(--lp-tinta-suave);
}

.lp-ruta__sin-resultados {
    margin: 0;
    font-size: .92rem;
    color: var(--lp-tinta-suave);
}

/* El mapa: retícula de plano y líneas gruesas de extremos redondos. Al elegir
   una línea (data-linea-activa, que pone el guion) las demás se apagan y salen
   los nombres de sus estaciones. */
.lp-ruta__mapa-marco {
    margin: 0;
    padding: clamp(.5rem, 2vw, 1.25rem);
    border: 1px solid var(--lp-borde);
    border-radius: 1.25rem;
    background-color: var(--lp-mapa-fondo);
    background-image: linear-gradient(var(--lp-mapa-reticula) 1px, transparent 1px), linear-gradient(90deg, var(--lp-mapa-reticula) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra);
}

.lp-ruta__mapa {
    display: block;
    width: 100%;
    height: auto;
}

.lp-ruta__mapa-via {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .3s ease, stroke-width .3s ease;
}

.lp-ruta__mapa-via--1 {
    stroke: var(--lp-l1);
}

.lp-ruta__mapa-via--2 {
    stroke: var(--lp-l2);
}

.lp-ruta__mapa-via--3 {
    stroke: var(--lp-l3);
}

.lp-ruta__mapa-via--4 {
    stroke: var(--lp-l4);
}

.lp-ruta__mapa-via--5 {
    stroke: var(--lp-l5);
}

.lp-ruta__mapa-via--6 {
    stroke: var(--lp-l6);
}

.lp-ruta__mapa-tren {
    transition: opacity .3s ease;
}

    .lp-ruta__mapa-tren rect {
        fill: var(--lp-mapa-fondo);
        stroke: currentColor;
        stroke-width: 3;
    }

.lp-ruta__mapa-tren--1 {
    color: var(--lp-l1);
}

.lp-ruta__mapa-tren--2 {
    color: var(--lp-l2);
}

.lp-ruta__mapa-tren--3 {
    color: var(--lp-l3);
}

.lp-ruta__mapa-tren--4 {
    color: var(--lp-l4);
}

.lp-ruta__mapa-tren--5 {
    color: var(--lp-l5);
}

.lp-ruta__mapa-tren--6 {
    color: var(--lp-l6);
}

.lp-ruta__mapa-estacion {
    fill: var(--lp-mapa-nodo);
    stroke: var(--lp-mapa-nodo-borde);
    stroke-width: 4;
    transition: opacity .3s ease, fill .3s ease;
}

/* La estación encontrada con el buscador se enciende de naranja y su borde
   parpadea entre el color del plano y el naranja, sin tapar el relleno. */
.lp-ruta__mapa-estacion--marcada {
    fill: var(--lp-naranja);
    stroke-width: 5;
    animation: lp-ruta-palpito 1.2s ease-in-out infinite;
}

@keyframes lp-ruta-palpito {
    0%, 100% {
        stroke: var(--lp-mapa-nodo-borde);
    }

    50% {
        stroke: var(--lp-naranja-borde);
    }
}

.lp-ruta__mapa-etiqueta {
    fill: var(--lp-tinta);
    font-family: var(--lp-rotulo);
    font-size: 15px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--lp-mapa-fondo);
    stroke-width: 5px;
    stroke-linejoin: round;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.lp-ruta__mapa-nodo {
    fill: var(--lp-mapa-nodo);
    stroke: var(--lp-mapa-nodo-borde);
    stroke-width: 4;
}

.lp-ruta__mapa-nodo--examen {
    stroke: var(--lp-naranja);
    stroke-width: 6;
}

.lp-ruta__mapa-nodo--ingreso {
    fill: var(--lp-naranja);
}

.lp-ruta__mapa-nodo-texto {
    fill: var(--lp-tinta);
    font-family: var(--lp-rotulo);
    font-size: 20px;
    font-weight: 800;
    text-anchor: middle;
}

.lp-ruta__mapa-nodo-sigla {
    fill: var(--lp-acento);
    font-family: var(--lp-rotulo);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .12em;
    text-anchor: middle;
}

.lp-ruta__mapa[data-linea-activa] .lp-ruta__mapa-via,
.lp-ruta__mapa[data-linea-activa] .lp-ruta__mapa-tren {
    opacity: .14;
}

.lp-ruta__mapa[data-linea-activa] .lp-ruta__mapa-estacion {
    opacity: .2;
}

.lp-ruta__mapa[data-linea-activa="1"] .lp-ruta__mapa-via--1,
.lp-ruta__mapa[data-linea-activa="2"] .lp-ruta__mapa-via--2,
.lp-ruta__mapa[data-linea-activa="3"] .lp-ruta__mapa-via--3,
.lp-ruta__mapa[data-linea-activa="4"] .lp-ruta__mapa-via--4,
.lp-ruta__mapa[data-linea-activa="5"] .lp-ruta__mapa-via--5,
.lp-ruta__mapa[data-linea-activa="6"] .lp-ruta__mapa-via--6 {
    opacity: 1;
    stroke-width: 13;
}

.lp-ruta__mapa[data-linea-activa="1"] .lp-ruta__mapa-tren--1,
.lp-ruta__mapa[data-linea-activa="2"] .lp-ruta__mapa-tren--2,
.lp-ruta__mapa[data-linea-activa="3"] .lp-ruta__mapa-tren--3,
.lp-ruta__mapa[data-linea-activa="4"] .lp-ruta__mapa-tren--4,
.lp-ruta__mapa[data-linea-activa="5"] .lp-ruta__mapa-tren--5,
.lp-ruta__mapa[data-linea-activa="6"] .lp-ruta__mapa-tren--6,
.lp-ruta__mapa[data-linea-activa="1"] [data-estacion-linea="1"],
.lp-ruta__mapa[data-linea-activa="2"] [data-estacion-linea="2"],
.lp-ruta__mapa[data-linea-activa="3"] [data-estacion-linea="3"],
.lp-ruta__mapa[data-linea-activa="4"] [data-estacion-linea="4"],
.lp-ruta__mapa[data-linea-activa="5"] [data-estacion-linea="5"],
.lp-ruta__mapa[data-linea-activa="6"] [data-estacion-linea="6"],
.lp-ruta__mapa[data-linea-activa="1"] [data-etiqueta-linea="1"],
.lp-ruta__mapa[data-linea-activa="2"] [data-etiqueta-linea="2"],
.lp-ruta__mapa[data-linea-activa="3"] [data-etiqueta-linea="3"],
.lp-ruta__mapa[data-linea-activa="4"] [data-etiqueta-linea="4"],
.lp-ruta__mapa[data-linea-activa="5"] [data-etiqueta-linea="5"],
.lp-ruta__mapa[data-linea-activa="6"] [data-etiqueta-linea="6"] {
    opacity: 1;
}

/* En móvil el mapa se ve a un tercio de su tamaño: los nombres de estación no
   se leerían, así que se dejan para el panel, y los de los nodos crecen. */
@media (max-width: 47.99rem) {
    .lp-ruta__mapa-etiqueta {
        display: none;
    }

    .lp-ruta__mapa-nodo-texto {
        font-size: 34px;
    }

    .lp-ruta__mapa-nodo-sigla {
        font-size: 26px;
    }
}

.lp-ruta__panel-vacio {
    margin: 0;
    padding: 1.25rem;
    border: 2px dashed var(--lp-borde-fuerte);
    border-radius: 1rem;
    color: var(--lp-tinta-suave);
    text-align: center;
}

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

    /* Sin línea elegida, el contenedor vacío no ocupa sitio en la rejilla. */
    .lp-ruta__paneles:not(:has(> :not([hidden]))) {
        display: none;
    }

/* Cada panel toma el color de su línea en --lp-color-linea. */
.lp-ruta__panel {
    --lp-color-linea: var(--lp-l1);
    display: grid;
    gap: 1rem 1.75rem;
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--lp-borde);
    border-top: .5rem solid var(--lp-color-linea);
    border-radius: 1rem;
    background: var(--lp-superficie);
    box-shadow: 0 1rem 2rem var(--lp-sombra);
}

    .lp-ruta__panel[data-panel-linea="2"] {
        --lp-color-linea: var(--lp-l2);
    }

    .lp-ruta__panel[data-panel-linea="3"] {
        --lp-color-linea: var(--lp-l3);
    }

    .lp-ruta__panel[data-panel-linea="4"] {
        --lp-color-linea: var(--lp-l4);
    }

    .lp-ruta__panel[data-panel-linea="5"] {
        --lp-color-linea: var(--lp-l5);
    }

    .lp-ruta__panel[data-panel-linea="6"] {
        --lp-color-linea: var(--lp-l6);
    }

.lp-ruta--animada .lp-ruta__panel {
    animation: lp-ruta-entrar .45s ease both;
}

.lp-ruta__panel-cabecera {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .lp-ruta__panel-cabecera .lp-ruta__h3 {
        margin: 0;
    }

.lp-ruta__panel-foto {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .75rem;
    background: var(--lp-uni-alto);
}

.lp-ruta__panel-texto {
    margin: 0;
    color: var(--lp-tinta-suave);
}

/* Las estaciones del panel repiten el diagrama: punto y tramo de vía del color
   de la línea a la izquierda de cada facultad. */
.lp-ruta__panel-estaciones {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-ruta__panel-estacion {
    position: relative;
    padding: 0 0 1.1rem 2.1rem;
}

    .lp-ruta__panel-estacion::before {
        content: "";
        position: absolute;
        top: .7rem;
        bottom: -.3rem;
        left: .45rem;
        width: .35rem;
        background: var(--lp-color-linea);
    }

    .lp-ruta__panel-estacion:last-child::before {
        display: none;
    }

    .lp-ruta__panel-estacion::after {
        content: "";
        position: absolute;
        top: .2rem;
        left: 0;
        width: 1.25rem;
        height: 1.25rem;
        border: .25rem solid var(--lp-color-linea);
        border-radius: 50%;
        background: var(--lp-superficie);
    }

.lp-ruta__panel-estacion--marcada::after {
    border-color: var(--lp-naranja-borde);
    background: var(--lp-naranja);
}

.lp-ruta__panel-nota {
    margin: .6rem 0 0;
    font-size: .88rem;
    color: var(--lp-tinta-suave);
}

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

.lp-ruta__carrera {
    padding: .3rem .8rem;
    border: 1.5px solid var(--lp-borde-fuerte);
    border-radius: 99rem;
    background: var(--lp-fondo);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.lp-ruta__carrera--marcada {
    border-color: var(--lp-naranja-borde);
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
}

@media (min-width: 48rem) {
    .lp-ruta__panel {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: start;
    }

        .lp-ruta__panel-cabecera,
        .lp-ruta__panel-texto {
            grid-column: 1 / -1;
        }

        .lp-ruta__panel-foto {
            grid-row: 3;
        }
}

/* En escritorio el mapa ocupa la columna ancha y se queda a la vista mientras
   se recorre el panel de la línea, en la columna de al lado. En esa columna el
   panel vuelve a una sola columna. */
@media (min-width: 62rem) {
    .lp-ruta__red {
        grid-template-areas: "mapa mandos" "mapa vacio" "mapa paneles" "nota nota";
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        align-items: start;
        column-gap: 2.5rem;
    }

    .lp-ruta__red-mandos {
        grid-area: mandos;
    }

    .lp-ruta__mapa-marco {
        position: sticky;
        top: 6rem;
        grid-area: mapa;
    }

    .lp-ruta__panel-vacio {
        grid-area: vacio;
    }

    .lp-ruta__paneles {
        grid-area: paneles;
    }

    .lp-ruta__red > .lp-ruta__nota {
        grid-area: nota;
    }

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

        .lp-ruta__panel-foto {
            grid-row: auto;
        }
}

/* ═══ El examen: el convoy ═════════════════════════════════════════════════
   Cada vagón es una etiqueta que envuelve su casilla: se marca pulsando en
   cualquier parte del vagón. Arriba, la fila de ventanas; abajo, las ruedas;
   entre vagones, el enganche. Al entrar en pantalla el convoy llega desde la
   derecha, como un tren al andén. */
.lp-ruta__convoy {
    overflow-x: clip;
}

.lp-ruta__vagones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: 1.6rem 1.1rem;
    margin: 0;
    padding: 0 0 .5rem;
    list-style: none;
}

.lp-ruta--animada .lp-ruta__convoy .lp-ruta__vagones {
    opacity: 0;
    transform: translateX(35%);
    transition: transform 1.4s cubic-bezier(.15, .75, .2, 1), opacity .6s ease;
}

.lp-ruta--animada .lp-ruta__convoy.lp-ruta--visible .lp-ruta__vagones {
    opacity: 1;
    transform: none;
}

.lp-ruta__vagon {
    --lp-color-vagon: var(--lp-naranja);
    position: relative;
}

    /* El enganche con el vagón siguiente. */
    .lp-ruta__vagon::after {
        content: "";
        position: absolute;
        top: 55%;
        right: -1.1rem;
        width: 1.1rem;
        height: .35rem;
        border-radius: 99rem;
        background: var(--lp-tunel-borde);
    }

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

.lp-ruta__vagon--conocimientos {
    --lp-color-vagon: var(--lp-l2);
}

.lp-ruta__vagon--cultura {
    --lp-color-vagon: var(--lp-l6);
}

.lp-ruta__vagon-marco {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    margin: 0;
    padding: 2.6rem 1.1rem 1.9rem;
    border: 2px solid var(--lp-tunel-borde);
    border-top: .45rem solid var(--lp-color-vagon);
    border-radius: 1.1rem 1.1rem .6rem .6rem;
    background: var(--lp-tunel-alto);
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

    /* La fila de ventanas del vagón. */
    .lp-ruta__vagon-marco::before {
        content: "";
        position: absolute;
        top: .6rem;
        right: 1rem;
        left: 1rem;
        height: 1.3rem;
        border-radius: .35rem;
        background: repeating-linear-gradient(90deg, var(--lp-tunel-panel) 0 2.2rem, transparent 2.2rem 2.7rem);
        box-shadow: inset 0 0 0 1px var(--lp-tunel-borde);
    }

    /* Las ruedas: dos pares dibujados con degradados radiales. */
    .lp-ruta__vagon-marco::after {
        content: "";
        position: absolute;
        right: 1.2rem;
        bottom: -.75rem;
        left: 1.2rem;
        height: 1.5rem;
        background: radial-gradient(circle at 1.4rem 50%, var(--lp-luz-suave) .32rem, var(--lp-tunel) .36rem .62rem, transparent .66rem), radial-gradient(circle at 3.4rem 50%, var(--lp-luz-suave) .32rem, var(--lp-tunel) .36rem .62rem, transparent .66rem), radial-gradient(circle at calc(100% - 3.4rem) 50%, var(--lp-luz-suave) .32rem, var(--lp-tunel) .36rem .62rem, transparent .66rem), radial-gradient(circle at calc(100% - 1.4rem) 50%, var(--lp-luz-suave) .32rem, var(--lp-tunel) .36rem .62rem, transparent .66rem);
    }

    .lp-ruta__vagon-marco:hover {
        border-color: var(--lp-color-vagon);
        transform: translateY(-3px);
    }

    .lp-ruta__vagon-marco:has(.lp-ruta__vagon-casilla:focus-visible) {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 3px;
    }

    .lp-ruta__vagon-marco:has(.lp-ruta__vagon-casilla:checked) {
        border-color: var(--lp-color-vagon);
        background: var(--lp-tunel-panel);
        box-shadow: 0 0 1.4rem var(--lp-naranja-suave), inset 0 0 0 1px var(--lp-color-vagon);
    }

/* La casilla real queda invisible pero accesible: el vagón entero es su etiqueta. */
.lp-ruta__vagon-casilla {
    position: absolute;
    top: .6rem;
    left: .6rem;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.lp-ruta__vagon-tipo {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-luz-suave);
}

.lp-ruta__vagon-nombre {
    font-family: var(--lp-rotulo);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.lp-ruta__vagon-temas {
    font-size: .88rem;
    color: var(--lp-luz-suave);
}

.lp-ruta__vagon-marca {
    align-self: flex-start;
    margin-top: auto;
    padding: .25rem .7rem;
    border: 1px solid var(--lp-tunel-borde);
    border-radius: 99rem;
    font-size: .78rem;
    font-weight: 700;
}

    .lp-ruta__vagon-marca::before {
        content: "○ ";
    }

.lp-ruta__vagon-marco:has(.lp-ruta__vagon-casilla:checked) .lp-ruta__vagon-marca {
    border-color: var(--lp-naranja-borde);
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
}

    .lp-ruta__vagon-marco:has(.lp-ruta__vagon-casilla:checked) .lp-ruta__vagon-marca::before {
        content: "✓ ";
    }

/* En pantallas estrechas el convoy pasa de largo: los vagones van en fila y se
   recorren deslizando, como un tren que cruza el andén. */
.lp-ruta__convoy-pista {
    display: none;
    margin: 0 0 .75rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--lp-luz-suave);
    text-align: center;
}

@media (max-width: 47.99rem) {
    .lp-ruta__convoy-pista {
        display: block;
    }

    .lp-ruta__vagones {
        display: flex;
        gap: 1.1rem;
        padding: .5rem .25rem 1.4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .lp-ruta__vagon {
        flex: 0 0 min(80%, 18rem);
        scroll-snap-align: center;
    }
}

.lp-ruta__convoy-cuenta {
    margin: 2rem auto 0;
    font-family: var(--lp-rotulo);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 800;
    text-align: center;
    color: var(--lp-naranja);
}

.lp-ruta__reglas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.lp-ruta__regla {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--lp-tunel-borde);
    border-radius: .9rem;
    background: var(--lp-tunel-panel);
    color: var(--lp-luz-suave);
}

.lp-ruta__regla-titulo {
    display: block;
    margin-bottom: .3rem;
    font-family: var(--lp-rotulo);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--lp-luz);
}

/* ═══ La tarjeta ═══════════════════════════════════════════════════════════ */
.lp-ruta__tarjeta-rejilla {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.lp-ruta__validador {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--lp-borde);
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra);
}

.lp-ruta__torniquete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

/* La tarjeta: proporción de tarjeta bancaria, degradado de la Villarreal. */
.lp-ruta__tarjeta {
    position: relative;
    width: min(100%, 17rem);
    aspect-ratio: 1.586;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--lp-naranja) 0%, var(--lp-naranja-fuerte) 45%, var(--lp-uni) 100%);
    color: var(--lp-uni-tinta);
    box-shadow: 0 1rem 2rem var(--lp-sombra-fuerte);
    transform: rotate(-6deg);
}

.lp-ruta__tarjeta--pasando {
    animation: lp-ruta-pasar .7s ease;
}

@keyframes lp-ruta-pasar {
    0% {
        transform: rotate(-6deg);
    }

    45% {
        transform: translateX(22%) rotate(0deg);
    }

    100% {
        transform: rotate(-6deg);
    }
}

.lp-ruta__tarjeta-chip {
    position: absolute;
    top: 2.4rem;
    left: 1.1rem;
    width: 2.4rem;
    height: 1.8rem;
    border-radius: .35rem;
    background: linear-gradient(135deg, var(--lp-puerta), var(--lp-puerta-sombra));
}

/* Las ondas del pago sin contacto: tres arcos concéntricos. */
.lp-ruta__tarjeta-ondas {
    position: absolute;
    top: 2.35rem;
    left: 4.2rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: radial-gradient(circle at 0 50%, transparent .45rem, var(--lp-uni-tinta) .45rem .6rem, transparent .6rem .8rem, var(--lp-uni-tinta) .8rem .95rem, transparent .95rem 1.15rem, var(--lp-uni-tinta) 1.15rem 1.3rem, transparent 1.3rem);
    opacity: .85;
}

.lp-ruta__tarjeta-nombre {
    position: absolute;
    right: 1.1rem;
    bottom: 2.2rem;
    left: 1.1rem;
    font-family: var(--lp-rotulo);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.lp-ruta__tarjeta-ruta {
    position: absolute;
    right: 1.1rem;
    bottom: 1rem;
    left: 1.1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .9;
}

/* El lector: una caja negra con luz y pantalla de diodos. */
.lp-ruta__lector {
    display: grid;
    justify-items: center;
    gap: .6rem;
    width: min(100%, 14rem);
    padding: 1rem;
    border-radius: 1rem;
    background: var(--lp-tunel);
    color: var(--lp-luz);
    box-shadow: inset 0 0 0 2px var(--lp-tunel-borde);
}

.lp-ruta__lector-luz {
    width: 3rem;
    height: .55rem;
    border-radius: 99rem;
    background: var(--lp-tunel-borde);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.lp-ruta__lector-luz--ok {
    background: var(--lp-validado);
    box-shadow: 0 0 1rem var(--lp-validado);
}

.lp-ruta__lector-pantalla {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 7.5rem;
    margin: 0;
    padding: .6rem .75rem;
    border-radius: .5rem;
    background: var(--lp-led-fondo);
    color: var(--lp-led);
    font-family: var(--lp-led-tipo);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 0 .35rem var(--lp-led-brillo);
}

.lp-ruta__lector-viajes {
    margin: 0;
    font-family: var(--lp-led-tipo);
    font-size: .78rem;
    color: var(--lp-luz-suave);
}

.lp-ruta__mensajes {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--lp-tinta-suave);
}

.lp-ruta__mensajes--guion {
    display: none;
}

@media (min-width: 62rem) {
    .lp-ruta__tarjeta-rejilla {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 4rem;
    }

        .lp-ruta__tarjeta-rejilla .lp-ruta__cabecera {
            margin-bottom: 0;
        }
}

/* ═══ El sabio de Túcume ═══════════════════════════════════════════════════ */
.lp-ruta__sabio-rejilla {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

.lp-ruta__sabio-figura {
    display: grid;
    gap: .75rem;
    margin: 0;
}

.lp-ruta__sabio-foto {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--lp-uni-alto);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra-fuerte);
}

.lp-ruta__sabio-pie {
    font-size: .88rem;
    color: var(--lp-tinta-suave);
}

/* La línea de la universidad: vía naranja vertical con sus años como estaciones. */
.lp-ruta__historia {
    position: relative;
    margin: 0;
    padding: 0 0 0 2.4rem;
    list-style: none;
}

    .lp-ruta__historia::before {
        content: "";
        position: absolute;
        top: .6rem;
        bottom: .9rem;
        left: .55rem;
        width: .45rem;
        border-radius: 99rem;
        background: var(--lp-naranja);
    }

.lp-ruta__hito {
    position: relative;
    padding-bottom: 1.3rem;
}

    .lp-ruta__hito::before {
        content: "";
        position: absolute;
        top: .35rem;
        left: -2.2rem;
        width: 1.35rem;
        height: 1.35rem;
        border: .3rem solid var(--lp-tinta);
        border-radius: 50%;
        background: var(--lp-superficie);
    }

.lp-ruta__hito-anio {
    display: block;
    font-family: var(--lp-rotulo);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
}

.lp-ruta__hito-texto {
    margin: 0;
    color: var(--lp-tinta-suave);
}

.lp-ruta__hito--tuyo::before {
    border-color: var(--lp-naranja-borde);
    background: var(--lp-naranja);
    animation: lp-ruta-latido-hito 1.8s ease-in-out infinite;
}

@keyframes lp-ruta-latido-hito {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--lp-naranja-brillo);
    }

    50% {
        box-shadow: 0 0 0 .6rem var(--lp-naranja-brillo-nulo);
    }
}

.lp-ruta__hito--tuyo .lp-ruta__hito-anio {
    color: var(--lp-acento);
}

.lp-ruta__hito--tuyo .lp-ruta__hito-texto {
    color: var(--lp-tinta);
    font-weight: 600;
}

@media (min-width: 62rem) {
    .lp-ruta__sabio-rejilla {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 4rem;
    }

    .lp-ruta__sabio-figura {
        position: sticky;
        top: 6rem;
    }

    .lp-ruta__sabio-foto {
        aspect-ratio: 4 / 5;
    }
}

/* ═══ Para la familia: aviso a los acompañantes ════════════════════════════
   Un cartel de información de estación: cabecera azul con su "i". */
.lp-ruta__familia-rejilla {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.lp-ruta__aviso {
    padding: 0 clamp(1.1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--lp-tunel-borde);
    border-radius: 1.1rem;
    background: var(--lp-tunel-alto);
}

.lp-ruta__aviso-cabecera {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 calc(-1 * clamp(1.1rem, 3vw, 2rem)) 1.5rem;
    padding: .7rem clamp(1.1rem, 3vw, 2rem);
    background: var(--lp-l2);
    color: var(--lp-linea-tinta);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lp-ruta__aviso-icono {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--lp-linea-tinta);
    color: var(--lp-l2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 700;
    text-transform: none;
}

.lp-ruta__aviso-lista {
    display: grid;
    gap: .9rem;
    margin: 1.5rem 0 1.75rem;
    padding: 0;
    list-style: none;
}

    .lp-ruta__aviso-lista li {
        position: relative;
        padding-left: 2.1rem;
        color: var(--lp-luz-suave);
    }

        .lp-ruta__aviso-lista li::before {
            content: "";
            position: absolute;
            top: .2rem;
            left: 0;
            width: 1.35rem;
            height: 1.35rem;
            border-radius: .35rem;
            background: var(--lp-naranja);
        }

        .lp-ruta__aviso-lista li::after {
            content: "";
            position: absolute;
            top: .4rem;
            left: .47rem;
            width: .42rem;
            height: .75rem;
            border: solid var(--lp-naranja-tinta);
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

    .lp-ruta__aviso-lista strong {
        color: var(--lp-luz);
    }

.lp-ruta__familia-figura {
    margin: 0;
}

.lp-ruta__familia-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.1rem;
    background: var(--lp-uni-alto);
    box-shadow: 0 1.5rem 3rem var(--lp-sombra-foto);
}

@media (min-width: 48rem) and (max-width: 61.99rem) {
    .lp-ruta__familia-foto {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 62rem) {
    .lp-ruta__familia-rejilla {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 4rem;
    }

    .lp-ruta__familia-foto {
        aspect-ratio: 5 / 6;
    }
}

/* ═══ Preguntas ════════════════════════════════════════════════════════════ */
.lp-ruta__preguntas {
    display: grid;
    gap: .75rem;
}

.lp-ruta__pregunta {
    overflow: hidden;
    border: 1px solid var(--lp-borde);
    border-left: .4rem solid var(--lp-naranja);
    border-radius: .8rem;
    background: var(--lp-superficie);
    box-shadow: 0 .4rem 1rem var(--lp-sombra);
}

    .lp-ruta__pregunta > summary {
        position: relative;
        display: block;
        padding: 1.05rem 3.6rem 1.05rem 1.25rem;
        font-size: 1.04rem;
        font-weight: 700;
        line-height: 1.35;
        list-style: none;
        cursor: pointer;
    }

        .lp-ruta__pregunta > summary::-webkit-details-marker {
            display: none;
        }

        /* Una señal de sentido de circulación: cuadro oscuro con su flecha, que
           gira hacia abajo al abrir. La flecha son dos bordes de una caja girada. */
        .lp-ruta__pregunta > summary::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 1.1rem;
            width: 1.7rem;
            height: 1.7rem;
            margin-top: -.85rem;
            border-radius: .45rem;
            background: var(--lp-tinta);
        }

        .lp-ruta__pregunta > summary::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 1.72rem;
            width: .5rem;
            height: .5rem;
            margin-top: -.25rem;
            border-right: .16rem solid var(--lp-fondo);
            border-bottom: .16rem solid var(--lp-fondo);
            transform: rotate(-45deg);
            transition: transform .3s ease;
        }

        .lp-ruta__pregunta > summary:focus-visible {
            outline: 3px solid var(--lp-anillo);
            outline-offset: -3px;
        }

    .lp-ruta__pregunta[open] > summary::after {
        transform: rotate(45deg);
    }

    .lp-ruta__pregunta > p {
        margin: 0;
        padding: 0 1.25rem 1.2rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Última estación ══════════════════════════════════════════════════════ */
.lp-ruta__cierre {
    --lp-anillo: var(--lp-naranja);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(4.5rem, 10vw, 7rem);
    background: var(--lp-tunel);
    color: var(--lp-luz);
    text-align: center;
}

.lp-ruta__cierre-foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-ruta__cierre-velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--lp-velo), var(--lp-velo-fuerte));
}

.lp-ruta__cierre-contenido {
    position: relative;
    z-index: 1;
}

.lp-ruta__cierre-letrero {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.25rem;
    padding: .35rem 1rem .35rem .35rem;
    border-radius: .8rem;
    background: var(--lp-luz);
    color: var(--lp-tunel);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .lp-ruta__cierre-letrero .lp-ruta__insignia {
        min-width: 3.2rem;
        font-size: .8rem;
    }

.lp-ruta__cierre-titulo {
    max-width: 46rem;
    margin: 0 auto 1.25rem;
    font-family: var(--lp-rotulo);
    font-size: clamp(2.4rem, 6.5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.lp-ruta__cierre-destino {
    display: block;
    color: var(--lp-naranja);
}

.lp-ruta__cierre-texto {
    max-width: 36rem;
    margin: 0 auto;
    font-size: 1.15rem;
    color: var(--lp-luz-suave);
}

.lp-ruta__cierre-fecha {
    margin: 1rem auto 0;
    font-weight: 700;
}

/* Las puertas del vagón. Por defecto están abiertas —fuera de la vista—: solo se
   cierran si el guion marcó la página como animada y la sección aún no ha
   aparecido, así nunca tapan la llamada sin guion. */
.lp-ruta__puerta {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 50%;
    background: linear-gradient(90deg, var(--lp-puerta-sombra), var(--lp-puerta) 30%, var(--lp-puerta) 70%, var(--lp-puerta-sombra));
    pointer-events: none;
    transition: transform 1.4s cubic-bezier(.7, 0, .2, 1) .25s;
}

    /* La ventana de cada hoja, a media altura. */
    .lp-ruta__puerta::before {
        content: "";
        position: absolute;
        top: 12%;
        right: 18%;
        bottom: 45%;
        left: 18%;
        border: .5rem solid var(--lp-puerta-sombra);
        border-radius: 1.2rem;
        background: var(--lp-puerta-vidrio);
    }

    /* La goma del cierre, en el borde interior de cada hoja. */
    .lp-ruta__puerta::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: .6rem;
        background: var(--lp-puerta-goma);
    }

.lp-ruta__puerta--izquierda {
    left: 0;
    transform: translateX(-101%);
}

    .lp-ruta__puerta--izquierda::after {
        right: 0;
    }

.lp-ruta__puerta--derecha {
    right: 0;
    transform: translateX(101%);
}

    .lp-ruta__puerta--derecha::after {
        left: 0;
    }

.lp-ruta--animada .lp-ruta__cierre:not(.lp-ruta--visible) .lp-ruta__puerta {
    transform: none;
    transition: none;
}

/* ═══ Próxima estación: botón flotante ═════════════════════════════════════
   Fijo y no pegajoso: el marco del sitio puede cambiar el contenedor de
   desplazamiento y sticky dejaría de funcionar. Oculto, además de fuera de la
   vista, sale del orden de tabulación con visibility.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. Su ancho máximo descuenta además la
   reserva de esa esquina que publica el marco: si no cabe entero, lo que cede es
   el nombre de la estación, que se recorta con puntos suspensivos, y la llamada
   queda siempre entera. */
.lp-ruta__proxima {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .8rem;
    max-width: calc(100vw - 2rem - var(--edu-landing-reserva-mascota, 0px));
    padding: .45rem .45rem .45rem 1rem;
    border: 2px solid var(--lp-naranja);
    border-radius: 99rem;
    background: var(--lp-tunel);
    color: var(--lp-luz);
    font-family: var(--lp-rotulo);
    text-decoration: none;
    box-shadow: 0 .75rem 1.75rem var(--lp-sombra-foto);
    opacity: 0;
    visibility: hidden;
    transform: translateY(150%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s linear .45s;
}

.lp-ruta__proxima--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s linear 0s;
}

    .lp-ruta__proxima:hover {
        background: var(--lp-tunel-alto);
        color: var(--lp-luz);
    }

    .lp-ruta__proxima:focus-visible {
        outline: 3px solid var(--lp-naranja);
        outline-offset: 3px;
    }

.lp-ruta__proxima-anuncio {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.lp-ruta__proxima-rotulo {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-luz-suave);
}

.lp-ruta__proxima-nombre {
    overflow: hidden;
    max-width: 12rem;
    color: var(--lp-led);
    font-family: var(--lp-led-tipo);
    font-size: .9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    text-shadow: 0 0 .35rem var(--lp-led-brillo);
    white-space: nowrap;
}

.lp-ruta__proxima-texto {
    padding: .55rem 1.05rem;
    border-radius: 99rem;
    background: var(--lp-naranja);
    color: var(--lp-naranja-tinta);
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
}

/* ═══ Pantallas estrechas ══════════════════════════════════════════════════
   Por debajo de 36rem los grupos de botones se apilan a lo ancho y el botón
   flotante se queda con el nombre de la estación y la llamada. */
@media (max-width: 35.99rem) {
    .lp-ruta__acciones .lp-ruta__accion,
    .lp-ruta__mandos .lp-ruta__accion {
        flex: 1 1 100%;
    }

    .lp-ruta__proxima-rotulo {
        display: none;
    }

    .lp-ruta__proxima-nombre {
        max-width: 8.5rem;
    }

    .lp-ruta__estacion-foto {
        aspect-ratio: 16 / 9;
    }

    /* Las seis líneas en dos columnas para que el mapa quede cerca. */
    .lp-ruta__lineas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .lp-ruta__linea-boton {
        column-gap: .55rem;
        padding: .5rem .55rem;
    }

        .lp-ruta__linea-boton .lp-ruta__insignia {
            min-width: 2rem;
            height: 2rem;
            font-size: .82rem;
        }

    .lp-ruta__linea-nombre {
        font-size: .86rem;
    }

    .lp-ruta__linea-cuenta {
        display: none;
    }

    .lp-ruta__linea-boton {
        grid-template-rows: auto;
    }

        .lp-ruta__linea-boton .lp-ruta__insignia {
            grid-row: auto;
        }
}

/* Por debajo de 25rem la llamada del botón flotante se compacta para dejarle
   sitio al nombre de la estación. Por debajo de 22.5rem el anuncio se retira:
   descontada la esquina de la mascota, de él no quedarían más que los puntos
   suspensivos. */
@media (max-width: 24.99rem) {
    .lp-ruta__proxima {
        gap: .6rem;
        padding-left: .8rem;
    }

    .lp-ruta__proxima-texto {
        padding: .5rem .85rem;
        font-size: .9rem;
    }
}

@media (max-width: 22.49rem) {
    .lp-ruta__proxima-anuncio {
        display: none;
    }
}

/* ═══ Menos movimiento ═════════════════════════════════════════════════════
   Quien lo pidió en su sistema no recibe entradas, bucles ni recorridos: el
   letrero queda quieto, los trenes del mapa se ocultan y las puertas del final
   ya están abiertas. */
@media (prefers-reduced-motion: reduce) {
    .lp-ruta--animada [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-ruta__accion--brillo,
    .lp-ruta__marquesina-cinta,
    .lp-ruta__pantalla--desliza .lp-ruta__pantalla-texto,
    .lp-ruta--animada .lp-ruta__estacion,
    .lp-ruta--animada .lp-ruta__panel,
    .lp-ruta__mapa-estacion--marcada,
    .lp-ruta__tarjeta--pasando,
    .lp-ruta__hito--tuyo::before {
        animation: none !important;
    }

    .lp-ruta__marquesina-cinta {
        flex-wrap: wrap;
        width: auto;
    }

        .lp-ruta__marquesina-cinta span:nth-child(n + 8) {
            display: none;
        }

    .lp-ruta__pantalla {
        white-space: normal;
    }

    .lp-ruta__mapa-trenes {
        display: none;
    }

    .lp-ruta--animada .lp-ruta__convoy .lp-ruta__vagones {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-ruta--animada .lp-ruta__cierre:not(.lp-ruta--visible) .lp-ruta__puerta {
        transform: translateX(-101%);
    }

        .lp-ruta--animada .lp-ruta__cierre:not(.lp-ruta--visible) .lp-ruta__puerta.lp-ruta__puerta--derecha {
            transform: translateX(101%);
        }

    .lp-ruta__accion,
    .lp-ruta__tren,
    .lp-ruta__parada-punto,
    .lp-ruta__mapa-via,
    .lp-ruta__mapa-tren,
    .lp-ruta__mapa-estacion,
    .lp-ruta__mapa-etiqueta,
    .lp-ruta__linea-boton,
    .lp-ruta__vagon-marco,
    .lp-ruta__puerta,
    .lp-ruta__proxima {
        transition: none !important;
    }
}