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

   TODO cuelga de .lp-pista. 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: ingresar a la UNI como una carrera de atletismo. Las secciones de
   "estadio" son de noche en los dos temas, con reflector y líneas de carril; las
   de "tribuna" son claras, color cemento, y se oscurecen en el tema oscuro. La
   pista es tartán rojo con líneas de cal y el color de acción es el amarillo
   fosforescente de las zapatillas de competencia.

   DOS IDENTIDADES, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): rojo ladrillo y plata. Es la franja superior y
       es idéntica en las landings de la UNI.
     · LA CAMPAÑA (el resto): tartán, cal, noche de estadio y fosforescente.

   Los titulares van en mayúsculas, estrechos y en cursiva, como la rotulación de
   un estadio. Todo el movimiento respeta la preferencia de menos movimiento. */
.lp-pista {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #8C1D18;
    --lp-uni-claro: #B3342B;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #DCE1E8;
    --lp-uni-tipo: "Trebuchet MS", "Segoe UI", sans-serif;
    /* ── La pista ──────────────────────────────────────────────────────── */
    --lp-tartan: #C4442B;
    --lp-tartan-hondo: #9E3320;
    --lp-tartan-claro: #E0694E;
    --lp-cal: #FFFFFF;
    --lp-cal-suave: rgba(255, 255, 255, .78);
    --lp-carril-tinta: #5A1A0E;
    --lp-cesped: #3F8C4E;
    --lp-cesped-raya: #4A9A5A;
    --lp-cesped-linea: rgba(255, 255, 255, .34);
    /* ── Acción: fosforescente ─────────────────────────────────────────── */
    --lp-volt: #D7FF3C;
    --lp-volt-fuerte: #C4F01F;
    --lp-volt-borde: #6B8600;
    --lp-volt-tinta: #1A2100;
    --lp-volt-brillo: rgba(215, 255, 60, .55);
    --lp-volt-brillo-nulo: rgba(215, 255, 60, 0);
    /* ── Estadio: oscuro en los dos temas ──────────────────────────────── */
    --lp-noche: #121419;
    --lp-noche-alta: #1C1F27;
    --lp-noche-panel: rgba(255, 255, 255, .06);
    --lp-noche-borde: rgba(255, 255, 255, .16);
    --lp-foco: #F4F6FA;
    --lp-foco-suave: rgba(244, 246, 250, .76);
    --lp-reflector: rgba(255, 252, 235, .22);
    --lp-reflector-suave: rgba(255, 252, 235, .06);
    --lp-linea-noche: rgba(255, 255, 255, .045);
    --lp-velo: rgba(10, 11, 14, .55);
    --lp-velo-fuerte: rgba(10, 11, 14, .86);
    --lp-marcador: #FFB21F;
    --lp-marcador-brillo: rgba(255, 178, 31, .6);
    --lp-marcador-fondo: rgba(0, 0, 0, .45);
    --lp-en-vivo: #FF4D3A;
    /* ── El dorsal: papel e imperdibles ────────────────────────────────── */
    --lp-papel: #FFFFFF;
    --lp-papel-tinta: #14161B;
    --lp-papel-suave: #5A5F69;
    --lp-papel-linea: rgba(20, 22, 27, .2);
    --lp-metal: #9AA0A8;
    --lp-metal-brillo: #FFFFFF;
    --lp-metal-sombra: #5B616B;
    /* ── WhatsApp ──────────────────────────────────────────────────────── */
    --lp-whatsapp: #25D366;
    --lp-whatsapp-fuerte: #1EBE5A;
    --lp-whatsapp-borde: #128C4B;
    --lp-whatsapp-tinta: #062E17;
    /* ── Tribuna: secciones claras ─────────────────────────────────────── */
    --lp-tinta: #17191F;
    --lp-tinta-suave: #50555F;
    --lp-acento: #B0361F;
    --lp-fondo: #F4F2ED;
    --lp-fondo-alterno: #EAE6DE;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(23, 25, 31, .12);
    --lp-borde-fuerte: rgba(23, 25, 31, .26);
    --lp-sombra: rgba(23, 25, 31, .08);
    --lp-sombra-fuerte: rgba(23, 25, 31, .2);
    --lp-sombra-foto: rgba(0, 0, 0, .45);
    --lp-arena: #E6CC97;
    --lp-arena-honda: #C9A764;
    --lp-descanso: #3A4150;
    --lp-anillo: #9E3320;
    /* ── Medidas y tipografías ─────────────────────────────────────────── */
    --lp-ancho: 80rem;
    --lp-titular: "Bahnschrift Condensed", Bahnschrift, "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --lp-cifras: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
    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 estadio ya es de noche: el cambio
   se nota sobre todo en las secciones de tribuna y en el papel del dorsal, que
   baja de brillo para no deslumbrar. */
[data-tema="oscuro"] .lp-pista {
    --lp-uni: #9E2620;
    --lp-uni-claro: #C2463C;
    --lp-uni-plata: #E6EAF0;
    --lp-tartan: #B03C25;
    --lp-tartan-hondo: #86291A;
    --lp-tartan-claro: #E57A60;
    --lp-cal: #F1EEE8;
    --lp-cal-suave: rgba(241, 238, 232, .78);
    --lp-carril-tinta: #4A150B;
    --lp-cesped: #2C6A38;
    --lp-cesped-raya: #33763F;
    --lp-cesped-linea: rgba(241, 238, 232, .26);
    --lp-volt: #CFF53A;
    --lp-volt-fuerte: #BFE82A;
    --lp-volt-borde: #7F9A12;
    --lp-volt-brillo: rgba(207, 245, 58, .45);
    --lp-volt-brillo-nulo: rgba(207, 245, 58, 0);
    --lp-noche: #0B0C10;
    --lp-noche-alta: #15171E;
    --lp-reflector: rgba(255, 252, 235, .16);
    --lp-reflector-suave: rgba(255, 252, 235, .04);
    --lp-velo: rgba(5, 6, 8, .62);
    --lp-velo-fuerte: rgba(5, 6, 8, .9);
    --lp-papel: #ECE9E2;
    --lp-papel-tinta: #14161B;
    --lp-papel-suave: #555A63;
    --lp-metal: #8A9098;
    --lp-metal-brillo: #E9EBEE;
    --lp-metal-sombra: #4E535C;
    --lp-whatsapp: #22C35E;
    --lp-whatsapp-fuerte: #1CAF53;
    --lp-whatsapp-borde: #0F7A40;
    --lp-tinta: #ECEAE4;
    --lp-tinta-suave: #ABA69B;
    --lp-acento: #FF8A6B;
    --lp-fondo: #121317;
    --lp-fondo-alterno: #191B21;
    --lp-superficie: #20232B;
    --lp-borde: rgba(236, 234, 228, .14);
    --lp-borde-fuerte: rgba(236, 234, 228, .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-arena: #9C8150;
    --lp-arena-honda: #7B6439;
    --lp-descanso: #2B303B;
    --lp-anillo: #FF8A6B;
}

/* ═══ 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-pista, que no ve sus variables. */
body:has(> .lp-pista) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #8C1D18;
}

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

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

    body > :has(+ .lp-pista) > :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-pista :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, input, select) {
    color: inherit;
    font-family: inherit;
}

.lp-pista,
.lp-pista *,
.lp-pista *::before,
.lp-pista *::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-pista [hidden] {
    display: none !important;
}

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

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

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

.lp-pista svg {
    fill: currentColor;
}

/* El corredor está dibujado a trazo: cabeza rellena y extremidades con línea
   redondeada, que a tamaño pequeño se lee mejor que una silueta rellena. */
.lp-pista__trazo {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-pista__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-pista :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

.lp-pista__solo-lectores {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

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

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

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

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

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

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

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

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

/* ═══ Secciones y tipografía ═══════════════════════════════════════════════
   overflow-x: clip recorta lo decorativo que sobresale sin crear un contenedor
   de desplazamiento, así las anclas y el reposicionamiento siguen funcionando. */
.lp-pista__seccion {
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    overflow-x: clip;
}

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

.lp-pista__seccion--estadio {
    --lp-anillo: var(--lp-volt);
    background: var(--lp-noche);
    color: var(--lp-foco);
}

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

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

/* El antetítulo es un rótulo de tartán en paralelogramo, como las marcas que se
   pintan en la pista. */
.lp-pista__antetitulo {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .3rem 1.2rem;
    background: var(--lp-tartan);
    color: var(--lp-cal);
    font-family: var(--lp-titular);
    font-size: .85rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
}

.lp-pista__h2 {
    margin: 0 0 1rem;
    font-family: var(--lp-titular);
    font-size: clamp(2.1rem, 5.2vw, 3.7rem);
    font-stretch: condensed;
    font-style: italic;
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.lp-pista__h3 {
    margin: 0 0 .5rem;
    font-family: var(--lp-titular);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

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

.lp-pista__seccion--estadio .lp-pista__entrada {
    color: var(--lp-foco-suave);
}

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

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

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

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

    .lp-pista__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-pista__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.75rem;
}

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

.lp-pista__accion {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.1rem;
    padding: .75rem 1.6rem;
    border: 2px solid transparent;
    border-radius: .4rem;
    font-family: var(--lp-titular);
    font-size: 1.12rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

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

.lp-pista__accion--volt {
    background: var(--lp-volt);
    color: var(--lp-volt-tinta);
    border-color: var(--lp-volt-borde);
    box-shadow: 0 .3rem 0 var(--lp-volt-borde);
}

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

    .lp-pista__accion--volt:active {
        transform: translateY(.25rem);
        box-shadow: 0 .05rem 0 var(--lp-volt-borde);
    }

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

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

.lp-pista__portada .lp-pista__accion--contorno:hover,
.lp-pista__seccion--estadio .lp-pista__accion--contorno:hover {
    background: var(--lp-foco);
    border-color: var(--lp-foco);
    color: var(--lp-noche);
}

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

    .lp-pista__accion--tinta:hover {
        background: var(--lp-tartan);
        border-color: var(--lp-tartan);
        color: var(--lp-cal);
    }

.lp-pista__accion--whatsapp {
    background: var(--lp-whatsapp);
    border-color: var(--lp-whatsapp-borde);
    color: var(--lp-whatsapp-tinta);
    box-shadow: 0 .3rem 0 var(--lp-whatsapp-borde);
}

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

.lp-pista__accion--compacta {
    min-height: 2.75rem;
    padding: .55rem 1.2rem;
    font-size: 1rem;
}

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

/* El botón principal de la portada late como un pulso antes de la salida. */
.lp-pista__accion--latido {
    animation: lp-pista-latido 2.4s ease-in-out infinite;
}

@keyframes lp-pista-latido {
    0%, 100% {
        box-shadow: 0 .3rem 0 var(--lp-volt-borde), 0 0 0 0 var(--lp-volt-brillo);
    }

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

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

    /* Líneas de carril en diagonal, muy tenues, sobre la noche del estadio. */
    .lp-pista__portada::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: repeating-linear-gradient(115deg, transparent 0 4.8rem, var(--lp-linea-noche) 4.8rem 4.95rem);
    }

/* El reflector se enciende con el parpadeo de las luces de un estadio. */
.lp-pista__reflector {
    position: absolute;
    top: -30%;
    right: -15%;
    z-index: -1;
    width: min(90vw, 60rem);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, var(--lp-reflector), var(--lp-reflector-suave) 55%, transparent 72%);
    pointer-events: none;
    animation: lp-pista-encendido 2.2s ease-out both;
}

@keyframes lp-pista-encendido {
    0% {
        opacity: 0;
    }

    18% {
        opacity: .8;
    }

    26% {
        opacity: .15;
    }

    42%, 100% {
        opacity: 1;
    }
}

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

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

    .lp-pista__distintivo .lp-pista__icono {
        color: var(--lp-volt);
    }

/* La voz del juez de salida: tres palabras apiladas que se relevan en bucle. El
   "¡Fuera!" cae a la mitad del ciclo, justo cuando arranca el corredor de la
   línea de salida, que usa la misma duración. */
.lp-pista__voces {
    position: relative;
    height: 1.35em;
    margin: 0 0 .6rem;
    font-family: var(--lp-titular);
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    font-style: italic;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--lp-foco-suave);
}

.lp-pista__voz {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    opacity: 0;
    animation: lp-pista-voz 6s linear infinite;
}

.lp-pista__voz--2 {
    animation-delay: 1.5s;
}

.lp-pista__voz--3 {
    color: var(--lp-volt);
    animation-delay: 3s;
}

@keyframes lp-pista-voz {
    0% {
        opacity: 0;
        transform: translateY(.35em);
    }

    3%, 20% {
        opacity: 1;
        transform: none;
    }

    24%, 100% {
        opacity: 0;
        transform: translateY(-.35em);
    }
}

.lp-pista__titulo {
    margin: 0 0 1.25rem;
    font-family: var(--lp-titular);
    font-size: clamp(2.6rem, 7.2vw, 5.4rem);
    font-stretch: condensed;
    font-style: italic;
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.015em;
    text-transform: uppercase;
    text-wrap: balance;
}

.lp-pista__titulo-remate {
    display: block;
    margin-top: .15em;
    color: var(--lp-volt);
}

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

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

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

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

/* La foto va sobre un marco de carriles girado; la ficha de inscripción la pisa
   por abajo en escritorio y va debajo en pantallas estrechas. */
.lp-pista__portada-visual {
    position: relative;
}

.lp-pista__portada-figura {
    position: relative;
    margin: 0;
}

    .lp-pista__portada-figura::before {
        content: "";
        position: absolute;
        inset: 1.1rem -1rem -1rem 1.1rem;
        z-index: 0;
        border-radius: 1.1rem;
        background: repeating-linear-gradient(90deg, var(--lp-tartan) 0 2.6rem, var(--lp-cal) 2.6rem 2.8rem);
        transform: rotate(3deg);
    }

.lp-pista__portada-foto {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 1rem;
    background: var(--lp-tartan-hondo);
    box-shadow: 0 1.75rem 3.5rem var(--lp-sombra-foto);
}

.lp-pista__ficha {
    position: relative;
    z-index: 2;
    margin: -2.25rem .75rem 0;
    padding-bottom: .9rem;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra-foto);
}

.lp-pista__ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: 0;
    padding: .6rem 1rem;
    background: var(--lp-tartan);
    color: var(--lp-cal);
    font-family: var(--lp-titular);
    font-size: .85rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lp-pista__ficha-datos {
    margin: 0;
    padding: .35rem 1rem 0;
}

.lp-pista__ficha-fila {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--lp-borde-fuerte);
}

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

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

.lp-pista__ficha-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .75rem 1rem 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-acento);
}

/* Un código de barras dibujado con franjas: pura decoración de dorsal. */
.lp-pista__ficha-barras {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 1.4rem;
    background: repeating-linear-gradient(90deg, var(--lp-tinta) 0 2px, transparent 2px 4px, var(--lp-tinta) 4px 5px, transparent 5px 8px);
    opacity: .8;
}

/* La línea de salida: ocho carriles numerados en perspectiva y un corredor que
   arranca con el "¡Fuera!". */
.lp-pista__salida {
    position: relative;
    height: clamp(4.5rem, 10vw, 7rem);
    margin-top: clamp(3rem, 7vw, 5rem);
    overflow: hidden;
    border-top: .35rem solid var(--lp-cal);
    background: var(--lp-tartan);
    perspective: 30rem;
}

.lp-pista__salida-carriles {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: rotateX(28deg);
    transform-origin: top center;
}

    .lp-pista__salida-carriles li {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: .4rem;
        border-left: 3px solid var(--lp-cal);
        font-family: var(--lp-titular);
        font-size: clamp(1.4rem, 4vw, 2.6rem);
        font-style: italic;
        font-weight: 800;
        line-height: 1;
        color: var(--lp-cal);
    }

        .lp-pista__salida-carriles li:first-child {
            border-left: 0;
        }

.lp-pista__salida-corredor {
    position: absolute;
    bottom: 18%;
    left: 0;
    width: clamp(2.4rem, 5vw, 3.6rem);
    height: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--lp-volt);
    animation: lp-pista-sprint 6s linear infinite;
}

@keyframes lp-pista-sprint {
    0%, 50% {
        transform: translateX(-4rem);
    }

    85%, 100% {
        transform: translateX(calc(100vw + 4rem));
    }
}

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

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

    .lp-pista__ficha {
        position: absolute;
        bottom: -2rem;
        left: -2.5rem;
        width: min(22rem, 85%);
        margin: 0;
        transform: rotate(-2deg);
    }
}

/* ═══ El marcador ══════════════════════════════════════════════════════════
   Un tablero de estadio: oscuro en los dos temas, con rejilla de puntos y cifras
   ámbar que brillan como diodos. */
.lp-pista__marcador-rejilla {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.lp-pista__marcador {
    position: relative;
    padding: clamp(1rem, 3vw, 1.75rem);
    border: .55rem solid var(--lp-noche-alta);
    border-radius: 1rem;
    background-color: var(--lp-noche);
    background-image: radial-gradient(var(--lp-noche-panel) 1px, transparent 1.4px);
    background-size: 7px 7px;
    color: var(--lp-foco);
    box-shadow: 0 1.5rem 3rem var(--lp-sombra-fuerte);
}

.lp-pista__marcador-rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 0 0 .25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--lp-noche-borde);
    font-family: var(--lp-titular);
    font-size: .9rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-foco-suave);
}

.lp-pista__marcador-vivo::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--lp-en-vivo);
    vertical-align: .08em;
    animation: lp-pista-parpadeo 1.4s ease-in-out infinite;
}

@keyframes lp-pista-parpadeo {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

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

.lp-pista__marcador-fila {
    display: grid;
    grid-template-columns: minmax(5.2rem, 7.5rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: .8rem 0;
    border-bottom: 1px dashed var(--lp-noche-borde);
}

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

.lp-pista__marcador-cifra {
    padding: .45rem .35rem;
    border-radius: .35rem;
    background: var(--lp-marcador-fondo);
    color: var(--lp-marcador);
    font-family: var(--lp-cifras);
    font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-align: center;
    text-shadow: 0 0 .5rem var(--lp-marcador-brillo);
}

.lp-pista__marcador-cifra--rodando {
    opacity: .75;
}

.lp-pista__marcador-cifra--tuya {
    color: var(--lp-volt);
    text-shadow: 0 0 .55rem var(--lp-volt-brillo);
    animation: lp-pista-parpadeo 2.2s ease-in-out infinite;
}

.lp-pista__marcador-texto {
    font-size: .98rem;
    line-height: 1.45;
    color: var(--lp-foco-suave);
}

.lp-pista__marcador-fila--tuya .lp-pista__marcador-texto {
    color: var(--lp-foco);
    font-weight: 600;
}

.lp-pista__marcador .lp-pista__enlace {
    display: inline-block;
    margin-left: .25rem;
    color: var(--lp-volt);
}

    .lp-pista__marcador .lp-pista__enlace:hover {
        color: var(--lp-foco);
    }

    .lp-pista__marcador .lp-pista__enlace:focus-visible {
        outline-color: var(--lp-volt);
    }

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

        .lp-pista__marcador-rejilla .lp-pista__cabecera {
            margin-bottom: 0;
        }
}

/* ═══ La vuelta ════════════════════════════════════════════════════════════ */
.lp-pista__vuelta {
    display: grid;
    gap: 1.25rem;
}

.lp-pista__estadio {
    padding: clamp(.6rem, 2vw, 1.25rem);
    border: 1px solid var(--lp-borde);
    border-radius: 1.25rem;
    background: var(--lp-superficie);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra);
}

/* Al cruzar la meta el estadio se ilumina un instante. */
.lp-pista__estadio--meta {
    animation: lp-pista-meta 1.2s ease-out;
}

@keyframes lp-pista-meta {
    0% {
        box-shadow: 0 1.25rem 2.5rem var(--lp-sombra), 0 0 0 0 var(--lp-volt-brillo);
    }

    40% {
        box-shadow: 0 1.25rem 2.5rem var(--lp-sombra), 0 0 0 .8rem var(--lp-volt-brillo);
    }

    100% {
        box-shadow: 0 1.25rem 2.5rem var(--lp-sombra), 0 0 0 1.4rem var(--lp-volt-brillo-nulo);
    }
}

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

.lp-pista__ovalo-cesped {
    fill: var(--lp-cesped);
}

.lp-pista__ovalo-cesped-cortado {
    fill: url(#lp-pista-cesped-rayas);
}

.lp-pista__ovalo-cesped-raya {
    fill: var(--lp-cesped-raya);
}

.lp-pista__ovalo-cancha {
    fill: none;
    stroke: var(--lp-cesped-linea);
    stroke-width: 2;
}

.lp-pista__ovalo-tartan {
    fill: var(--lp-tartan);
    fill-rule: evenodd;
}

.lp-pista__ovalo-linea {
    fill: none;
    stroke: var(--lp-cal);
    stroke-width: 1.2;
    opacity: .75;
}

.lp-pista__ovalo-linea--borde {
    stroke-width: 3;
    opacity: 1;
}

/* El tramo en curso se ilumina sobre la calle 1. */
.lp-pista__ovalo-tramo {
    fill: none;
    stroke: var(--lp-volt);
    stroke-width: 12;
    opacity: 0;
    transition: opacity .35s ease;
}

.lp-pista__ovalo-tramo--activo {
    opacity: .45;
}

.lp-pista__ovalo-marca {
    fill: none;
    stroke: var(--lp-cal);
    stroke-width: 3;
    stroke-dasharray: 6 5;
}

.lp-pista__ovalo-distancia {
    fill: var(--lp-cal);
    font-family: var(--lp-cifras);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
}

.lp-pista__ovalo-meta {
    fill: url(#lp-pista-cuadros);
}

.lp-pista__ovalo-cuadro-blanco {
    fill: var(--lp-cal);
}

.lp-pista__ovalo-cuadro-negro {
    fill: var(--lp-noche);
}

.lp-pista__ovalo-numero circle {
    fill: var(--lp-cal);
}

.lp-pista__ovalo-numero text {
    fill: var(--lp-tartan-hondo);
    font-family: var(--lp-titular);
    font-size: 17px;
    font-style: italic;
    font-weight: 800;
    text-anchor: middle;
}

/* El trazo recorrido: pathLength="400" hace que el guion hable en metros. */
.lp-pista__ovalo-recorrido {
    fill: none;
    stroke: var(--lp-volt);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 400 400;
}

.lp-pista__ovalo-ruta {
    fill: none;
    stroke: none;
}

.lp-pista__ovalo-tramo-nombre {
    fill: var(--lp-cal);
    font-family: var(--lp-titular);
    font-size: 22px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .1em;
    text-anchor: middle;
    text-transform: uppercase;
}

.lp-pista__ovalo-cifra {
    fill: var(--lp-cal);
    font-family: var(--lp-titular);
    font-size: 76px;
    font-style: italic;
    font-weight: 800;
    text-anchor: middle;
}

.lp-pista__ovalo-de {
    fill: var(--lp-cal-suave);
    font-family: var(--lp-cifras);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .12em;
    text-anchor: middle;
    text-transform: uppercase;
}

.lp-pista__ovalo-corredor {
    color: var(--lp-volt-tinta);
}

.lp-pista__ovalo-corredor-halo {
    fill: var(--lp-volt);
    opacity: .35;
    transform-box: fill-box;
    transform-origin: center;
    animation: lp-pista-halo 1.6s ease-out infinite;
}

@keyframes lp-pista-halo {
    0% {
        transform: scale(.7);
        opacity: .55;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* En pantallas estrechas la pista entera se encoge: el corredor se agranda
   para seguir siendo lo primero que se ve. */
@media (max-width: 47.99rem) {
    .lp-pista__ovalo-corredor-cuerpo {
        transform: scale(1.6);
    }
}

.lp-pista__ovalo-corredor-punto {
    fill: var(--lp-volt);
    stroke: var(--lp-volt-tinta);
    stroke-width: 2;
}

/* En la recta opuesta se corre hacia la izquierda: el corredor se voltea sobre
   su propio centro, que es el origen de su grupo. */
.lp-pista__ovalo-corredor-figura--izquierda {
    transform: scaleX(-1);
}

.lp-pista__vuelta-mando {
    display: grid;
    gap: .9rem;
}

.lp-pista__vuelta-lectura {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: .6rem;
    background: var(--lp-noche);
    color: var(--lp-foco);
    font-family: var(--lp-cifras);
    font-size: clamp(.95rem, 1.8vw, 1.08rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
}

.lp-pista__vuelta-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.25rem;
}

.lp-pista__deslizador {
    display: block;
    flex: 1 1 16rem;
    margin: 0;
}

/* El deslizador es un tramo de tartán y su tirador, una zapatilla fosforescente. */
.lp-pista__deslizador-control {
    display: block;
    width: 100%;
    height: 2.4rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    .lp-pista__deslizador-control::-webkit-slider-runnable-track {
        height: .9rem;
        border-radius: 99rem;
        background: repeating-linear-gradient(90deg, var(--lp-tartan) 0 1.4rem, var(--lp-tartan-hondo) 1.4rem 1.55rem);
    }

    .lp-pista__deslizador-control::-moz-range-track {
        height: .9rem;
        border-radius: 99rem;
        background: repeating-linear-gradient(90deg, var(--lp-tartan) 0 1.4rem, var(--lp-tartan-hondo) 1.4rem 1.55rem);
    }

    .lp-pista__deslizador-control::-webkit-slider-thumb {
        width: 2rem;
        height: 2rem;
        margin-top: -.55rem;
        border: 3px solid var(--lp-volt-tinta);
        border-radius: 50%;
        background: var(--lp-volt);
        box-shadow: 0 .2rem .5rem var(--lp-sombra-fuerte);
        -webkit-appearance: none;
        appearance: none;
    }

    .lp-pista__deslizador-control::-moz-range-thumb {
        width: 1.6rem;
        height: 1.6rem;
        border: 3px solid var(--lp-volt-tinta);
        border-radius: 50%;
        background: var(--lp-volt);
        box-shadow: 0 .2rem .5rem var(--lp-sombra-fuerte);
    }

    .lp-pista__deslizador-control:focus-visible {
        outline: 3px solid var(--lp-anillo);
        outline-offset: 4px;
        border-radius: 99rem;
    }

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

/* Cada tramo es una tarjeta entera pulsable: el botón del título estira su zona
   de clic por encima de toda la tarjeta. */
.lp-pista__tramo {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--lp-borde);
    border-radius: 1rem;
    background: var(--lp-superficie);
    box-shadow: 0 .75rem 1.5rem var(--lp-sombra);
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.lp-pista__tramo--activo {
    border-color: var(--lp-tartan);
    box-shadow: 0 1.1rem 2.2rem var(--lp-sombra-fuerte);
    transform: translateY(-.35rem);
}

.lp-pista__tramo-figura {
    position: relative;
    margin: 0;
}

.lp-pista__tramo-foto {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--lp-tartan-hondo);
}

.lp-pista__tramo-numero {
    position: absolute;
    bottom: -1.25rem;
    left: .9rem;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 3px solid var(--lp-tartan);
    border-radius: 50%;
    background: var(--lp-cal);
    color: var(--lp-tartan-hondo);
    font-family: var(--lp-titular);
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1;
}

.lp-pista__tramo-cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .35rem;
    padding: 1.6rem 1.1rem 1.2rem;
}

    .lp-pista__tramo-cuerpo .lp-pista__h3 {
        margin: 0;
    }

.lp-pista__tramo-ir {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

    .lp-pista__tramo-ir::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 1rem;
    }

    .lp-pista__tramo-ir:focus-visible {
        outline: none;
    }

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

.lp-pista__tramo-lugar {
    font-family: var(--lp-cifras);
    font-size: .78rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--lp-acento);
}

.lp-pista__tramo-nombre {
    display: block;
}

.lp-pista__tramo-semanas {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
}

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

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

.lp-pista__tramo-aqui {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    padding: .25rem .7rem;
    border-radius: 99rem;
    background: var(--lp-volt);
    color: var(--lp-volt-tinta);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-.4rem);
    transition: opacity .3s ease, transform .3s ease;
}

.lp-pista__tramo--activo .lp-pista__tramo-aqui {
    opacity: 1;
    transform: none;
}

/* ═══ Once carriles ════════════════════════════════════════════════════════
   La lista entera es una pista de tartán; cada facultad, un carril separado por
   su línea de cal. */
.lp-pista__carriles {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-top: .3rem solid var(--lp-cal);
    border-bottom: .3rem solid var(--lp-cal);
    border-radius: 1rem;
    background: var(--lp-tartan);
    box-shadow: 0 1.25rem 2.5rem var(--lp-sombra-fuerte);
    color: var(--lp-cal);
}

.lp-pista__carril {
    position: relative;
}

    .lp-pista__carril + .lp-pista__carril {
        border-top: 3px solid var(--lp-cal);
    }

    .lp-pista__carril:nth-child(even) {
        background: var(--lp-tartan-hondo);
    }

.lp-pista__carril-cabecera {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.lp-pista__carril-boton {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.75rem;
    align-items: center;
    gap: .5rem 1rem;
    width: 100%;
    min-height: 4.5rem;
    margin: 0;
    padding: .85rem 1.1rem 1.35rem 1rem;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .25s ease;
}

    .lp-pista__carril-boton:hover {
        background: var(--lp-noche-panel);
    }

    .lp-pista__carril-boton:focus-visible {
        outline: 3px solid var(--lp-volt);
        outline-offset: -5px;
    }

    /* El signo de abrir: una cruz de cal que gira al desplegar el carril. */
    .lp-pista__carril-boton::after {
        content: "";
        width: 1.75rem;
        height: 1.75rem;
        border: 2px solid var(--lp-cal);
        border-radius: 50%;
        background: linear-gradient(var(--lp-cal), var(--lp-cal)) center / .75rem 2px no-repeat, linear-gradient(var(--lp-cal), var(--lp-cal)) center / 2px .75rem no-repeat;
        transition: transform .3s ease, background-color .3s ease;
    }

.lp-pista__carril--abierto .lp-pista__carril-boton::after {
    transform: rotate(135deg);
}

.lp-pista__carril-numero {
    font-family: var(--lp-titular);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-style: italic;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.lp-pista__carril-nombre {
    font-size: clamp(.98rem, 1.8vw, 1.12rem);
    font-weight: 700;
    line-height: 1.25;
}

.lp-pista__carril-cuenta {
    padding: .2rem .65rem;
    border: 1px solid var(--lp-cal-suave);
    border-radius: 99rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* El corredor del carril: al pasar por encima o al abrirlo, esprinta de la
   salida al final del carril. */
.lp-pista__carril-corredor {
    position: absolute;
    bottom: .15rem;
    left: 4.2rem;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--lp-volt);
    opacity: 0;
    pointer-events: none;
    transition: left 1s cubic-bezier(.3, .6, .25, 1), opacity .25s ease;
}

.lp-pista__carril-boton:hover .lp-pista__carril-corredor,
.lp-pista__carril--abierto .lp-pista__carril-corredor {
    left: calc(100% - 2.5rem);
    opacity: 1;
}

.lp-pista__carril-panel {
    display: grid;
    gap: 1rem 1.5rem;
    padding: .25rem 1.25rem 1.5rem 5.2rem;
}

.lp-pista__carril--abierto .lp-pista__carril-panel {
    animation: lp-pista-desplegar .45s ease both;
}

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

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

.lp-pista__carril-foto {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .6rem;
    background: var(--lp-tartan-hondo);
    box-shadow: 0 .5rem 1rem var(--lp-sombra-foto);
}

.lp-pista__carril-texto p {
    margin: 0 0 .9rem;
    font-size: 1rem;
}

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

/* Cada carrera es una ficha de cal que lleva al dorsal. */
.lp-pista__carrera {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: .45rem .95rem;
    border-radius: 99rem;
    background: var(--lp-cal);
    color: var(--lp-carril-tinta);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

    .lp-pista__carrera::after {
        content: "→";
        font-weight: 800;
    }

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

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

@media (min-width: 48rem) {
    .lp-pista__carril-panel {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        align-items: start;
    }
}

/* En móvil la cuenta de carreras baja debajo del nombre y el panel pierde la
   sangría del número para no estrechar el texto. */
@media (max-width: 35.99rem) {
    .lp-pista__carril-boton {
        grid-template-columns: 2.4rem minmax(0, 1fr) 1.75rem;
        gap: .35rem .75rem;
        padding: .8rem .9rem 1.35rem .75rem;
    }

        .lp-pista__carril-boton::after {
            grid-column: 3;
            grid-row: 1 / span 2;
        }

    .lp-pista__carril-numero {
        grid-row: 1 / span 2;
    }

    .lp-pista__carril-nombre {
        grid-column: 2;
    }

    .lp-pista__carril-cuenta {
        grid-column: 2;
        justify-self: start;
    }

    .lp-pista__carril-corredor {
        left: 3.2rem;
    }

    .lp-pista__carril-panel {
        padding-left: .9rem;
        padding-right: .9rem;
    }
}

/* ═══ Tu dorsal ════════════════════════════════════════════════════════════ */
.lp-pista__dorsal-seccion {
    isolation: isolate;
}

.lp-pista__dorsal-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .24;
}

    /* Velo sobre la foto de fondo para que el texto se lea en cualquier punto. */
    .lp-pista__dorsal-seccion::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, var(--lp-noche) 15%, transparent 85%), linear-gradient(0deg, var(--lp-noche), transparent 45%);
    }

/* En móvil: cabecera, dorsal y formulario, uno debajo de otro. En escritorio el
   dorsal ocupa su propia columna a la altura de los dos. */
.lp-pista__dorsal-rejilla {
    display: grid;
    gap: 2.25rem;
    align-items: center;
}

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

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

.lp-pista__campo-rotulo {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

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

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

    .lp-pista__campo-control:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

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

[data-tema="oscuro"] .lp-pista__campo-control,
.lp-pista__seccion--estadio .lp-pista__campo-control {
    color-scheme: dark;
}

.lp-pista__seccion--estadio .lp-pista__campo-control {
    border-color: var(--lp-noche-borde);
    background: var(--lp-noche-alta);
    color: var(--lp-foco);
}

/* El dorsal es un objeto de papel: claro en los dos temas, algo más apagado en
   el oscuro. Cuatro imperdibles en las esquinas y la banda de la competencia. */
.lp-pista__dorsal-figura {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    margin: 0;
}

.lp-pista__dorsal {
    position: relative;
    width: min(100%, 25rem);
    padding: 1.1rem 1.5rem 1rem;
    border-radius: .5rem;
    background: var(--lp-papel);
    color: var(--lp-papel-tinta);
    text-align: center;
    box-shadow: 0 1.75rem 3.5rem var(--lp-sombra-foto);
    transform: rotate(-2.5deg);
}

.lp-pista__dorsal--nuevo {
    animation: lp-pista-sellado .45s ease;
}

@keyframes lp-pista-sellado {
    0% {
        transform: rotate(-2.5deg) scale(1);
    }

    35% {
        transform: rotate(-.5deg) scale(1.04);
    }

    100% {
        transform: rotate(-2.5deg) scale(1);
    }
}

.lp-pista__dorsal-imperdible {
    position: absolute;
    z-index: 1;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--lp-metal-brillo), var(--lp-metal) 60%, var(--lp-metal-sombra));
    box-shadow: 0 0 0 2px var(--lp-papel-linea);
}

.lp-pista__dorsal-imperdible--1 {
    top: .55rem;
    left: .6rem;
}

.lp-pista__dorsal-imperdible--2 {
    top: .55rem;
    right: .6rem;
}

.lp-pista__dorsal-imperdible--3 {
    bottom: .6rem;
    left: .6rem;
}

.lp-pista__dorsal-imperdible--4 {
    right: .6rem;
    bottom: .6rem;
}

.lp-pista__dorsal-banda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .15rem .6rem;
    margin: -1.1rem -1.5rem .5rem;
    padding: .5rem 2rem;
    border-radius: .5rem .5rem 0 0;
    background: var(--lp-tartan);
    color: var(--lp-cal);
    font-family: var(--lp-titular);
    font-size: .95rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-pista__dorsal-numero {
    margin: .1rem 0 .2rem;
    font-family: var(--lp-cifras);
    font-size: clamp(4.8rem, 18vw, 7.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: .95;
    letter-spacing: .02em;
}

.lp-pista__dorsal-nombre {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--lp-titular);
    font-size: clamp(1.3rem, 4.5vw, 1.8rem);
    font-style: italic;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.lp-pista__dorsal-carrera {
    margin: .3rem 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--lp-papel-suave);
}

.lp-pista__dorsal-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: .9rem 0 0;
    padding: .6rem .6rem 0;
    border-top: 2px dashed var(--lp-papel-linea);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-papel-suave);
}

.lp-pista__dorsal-nota {
    margin: 0;
    font-size: .85rem;
    text-align: center;
    color: var(--lp-foco-suave);
}

@media (min-width: 36rem) {
    .lp-pista__dorsal-campos {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }
}

@media (min-width: 62rem) {
    .lp-pista__dorsal-rejilla {
        grid-template-areas: "cabecera figura" "formulario figura";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 4rem;
    }

    .lp-pista__dorsal-cabecera {
        grid-area: cabecera;
        align-self: end;
    }

    .lp-pista__dorsal-figura {
        grid-area: figura;
    }

    .lp-pista__dorsal-formulario {
        grid-area: formulario;
        align-self: start;
        padding-top: 1.75rem;
    }
}

/* ═══ El salto triple ══════════════════════════════════════════════════════ */
.lp-pista__salto {
    display: grid;
    gap: 1.25rem;
}

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

.lp-pista__salto-pasillo {
    fill: var(--lp-tartan);
}

.lp-pista__salto-foso {
    fill: var(--lp-arena);
    stroke: var(--lp-arena-honda);
    stroke-width: 3;
}

.lp-pista__salto-regla {
    fill: none;
    stroke: var(--lp-tinta-suave);
    stroke-width: 2;
}

.lp-pista__salto-tabla {
    fill: var(--lp-cal);
}

/* Los arcos por saltar van punteados; los saltados, llenos; el que se está
   saltando, más grueso y en el color de acento. */
.lp-pista__salto-arco {
    fill: none;
    stroke: var(--lp-tinta-suave);
    stroke-width: 3;
    stroke-dasharray: 3 9;
    stroke-linecap: round;
    opacity: .55;
    transition: stroke .3s ease, opacity .3s ease;
}

.lp-pista__salto-arco--hecho {
    stroke: var(--lp-tartan);
    stroke-dasharray: none;
    opacity: 1;
}

.lp-pista__salto-arco--activo {
    stroke: var(--lp-acento);
    stroke-width: 5;
    stroke-dasharray: none;
    opacity: 1;
}

.lp-pista__salto-huella {
    fill: var(--lp-tinta);
    opacity: 0;
    transition: opacity .3s ease;
}

.lp-pista__salto-huella--marcada {
    opacity: .45;
}

.lp-pista__salto-rotulo {
    fill: var(--lp-tinta-suave);
    font-family: var(--lp-titular);
    font-size: 26px;
    font-style: italic;
    font-weight: 800;
    text-anchor: middle;
}

.lp-pista__salto-saltador {
    color: var(--lp-volt-tinta);
}

.lp-pista__salto-saltador-punto {
    fill: var(--lp-volt);
    stroke: var(--lp-volt-tinta);
    stroke-width: 2.5;
}

/* En móvil la escena se ve a menos de la mitad de su tamaño: arcos más gruesos y
   un saltador mayor, que crece desde su punto de apoyo para no hundirse. */
@media (max-width: 47.99rem) {
    .lp-pista__salto-arco {
        stroke-width: 5;
    }

    .lp-pista__salto-arco--activo {
        stroke-width: 7;
    }

    .lp-pista__salto-saltador-cuerpo {
        transform: scale(1.45);
        transform-origin: 0 13px;
    }
}

/* Las fases son pestañas inclinadas como un rótulo deportivo; el texto se
   endereza dentro para que se lea recto. */
.lp-pista__fases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.lp-pista__fase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-height: 3.6rem;
    margin: 0;
    padding: .6rem .5rem;
    border: 2px solid var(--lp-borde-fuerte);
    border-radius: .6rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font: inherit;
    cursor: pointer;
    transform: skewX(-8deg);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .lp-pista__fase > * {
        transform: skewX(8deg);
    }

    .lp-pista__fase:hover {
        border-color: var(--lp-tartan);
    }

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

    .lp-pista__fase[aria-selected="true"] {
        border-color: var(--lp-tartan);
        background: var(--lp-tartan);
        color: var(--lp-cal);
    }

.lp-pista__fase-nombre {
    font-family: var(--lp-titular);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.lp-pista__fase-dia {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
}

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

.lp-pista__prueba {
    display: grid;
    gap: 1rem 1.75rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--lp-borde);
    border-radius: 1rem;
    background: var(--lp-superficie);
    box-shadow: 0 1rem 2rem var(--lp-sombra);
}

.lp-pista--animada .lp-pista__prueba {
    animation: lp-pista-desplegar .4s ease both;
}

.lp-pista__prueba-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .7rem;
    background: var(--lp-arena-honda);
}

.lp-pista__prueba-temas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0 1rem;
    padding: 0;
    list-style: none;
}

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

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

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

@media (max-width: 35.99rem) {
    .lp-pista__fase-nombre {
        font-size: 1.05rem;
    }

    .lp-pista__fase-dia {
        font-size: .66rem;
        letter-spacing: .06em;
    }
}

/* ═══ El relevo ════════════════════════════════════════════════════════════
   Una pista recta une las cuatro postas y el testigo la recorre al entrar en
   pantalla, encendiendo cada posta al llegar. En escritorio corre en
   horizontal; en pantallas estrechas, las postas se apilan y el testigo baja. */
.lp-pista__relevo {
    position: relative;
    padding-left: 2.4rem;
}

    .lp-pista__relevo::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: .7rem;
        width: .5rem;
        border-radius: 99rem;
        background: repeating-linear-gradient(180deg, var(--lp-tartan) 0 2rem, var(--lp-tartan-hondo) 2rem 2.15rem);
    }

.lp-pista__testigo {
    position: absolute;
    top: 0;
    left: .35rem;
    z-index: 1;
    width: 1.2rem;
    height: 2.6rem;
    border: 2px solid var(--lp-volt-tinta);
    border-radius: 99rem;
    background: var(--lp-volt);
    box-shadow: 0 .3rem .7rem var(--lp-sombra-fuerte);
}

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

.lp-pista__posta {
    position: relative;
    padding: 1.25rem 1.2rem 1.3rem;
    border: 2px solid var(--lp-borde);
    border-radius: .9rem;
    background: var(--lp-superficie);
    box-shadow: 0 .75rem 1.5rem var(--lp-sombra);
}

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

.lp-pista__posta-numero {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .15rem .6rem;
    border-radius: .3rem;
    background: var(--lp-tinta);
    color: var(--lp-fondo);
    font-family: var(--lp-titular);
    font-size: .8rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__testigo {
    animation: lp-pista-testigo-vertical 3.6s ease-in-out .3s both;
}

.lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__posta {
    animation: lp-pista-posta .5s ease both;
}

    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__posta:nth-child(1) {
        animation-delay: .3s;
    }

    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__posta:nth-child(2) {
        animation-delay: 1.5s;
    }

    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__posta:nth-child(3) {
        animation-delay: 2.7s;
    }

    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__posta:nth-child(4) {
        animation-delay: 3.9s;
    }

@keyframes lp-pista-posta {
    from {
        border-color: var(--lp-borde);
    }

    to {
        border-color: var(--lp-tartan);
    }
}

/* El testigo se detiene en el centro aproximado de cada posta. */
@keyframes lp-pista-testigo-vertical {
    0%, 8% {
        top: calc(12.5% - 1.3rem);
    }

    33%, 41% {
        top: calc(37.5% - 1.3rem);
    }

    66%, 74% {
        top: calc(62.5% - 1.3rem);
    }

    100% {
        top: calc(87.5% - 1.3rem);
    }
}

@keyframes lp-pista-testigo-horizontal {
    0%, 8% {
        left: calc(12.5% - 1.3rem);
    }

    33%, 41% {
        left: calc(37.5% - 1.3rem);
    }

    66%, 74% {
        left: calc(62.5% - 1.3rem);
    }

    100% {
        left: calc(87.5% - 1.3rem);
    }
}

@media (min-width: 62rem) {
    .lp-pista__relevo {
        padding-top: 2.4rem;
        padding-left: 0;
    }

        .lp-pista__relevo::before {
            top: .7rem;
            right: 0;
            bottom: auto;
            left: 0;
            width: auto;
            height: .5rem;
            background: repeating-linear-gradient(90deg, var(--lp-tartan) 0 2rem, var(--lp-tartan-hondo) 2rem 2.15rem);
        }

    .lp-pista__testigo {
        top: .35rem;
        left: calc(12.5% - 1.3rem);
        width: 2.6rem;
        height: 1.2rem;
    }

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

    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__testigo {
        animation-name: lp-pista-testigo-horizontal;
    }
}

/* ═══ El cronómetro ════════════════════════════════════════════════════════ */
/* En móvil: cabecera, reloj y mandos, uno debajo de otro, para que el reloj se
   vea al pulsar un perfil. En escritorio el reloj ocupa su propia columna. */
.lp-pista__crono-rejilla {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.lp-pista__crono-perfiles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
}

.lp-pista__perfil {
    min-height: 2.6rem;
    margin: 0;
    padding: .45rem 1rem;
    border: 2px solid var(--lp-borde-fuerte);
    border-radius: 99rem;
    background: var(--lp-superficie);
    color: var(--lp-tinta);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .lp-pista__perfil:hover {
        border-color: var(--lp-tartan);
    }

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

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

.lp-pista__crono-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 28rem;
}

.lp-pista__crono-resultado {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.2rem;
    border-left: .35rem solid var(--lp-tartan);
    border-radius: .4rem;
    background: var(--lp-superficie);
    font-size: 1.02rem;
}

.lp-pista__crono-figura {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin: 0;
}

/* El cronómetro es un objeto oscuro en los dos temas: así el fosforescente de
   las horas libres resalta igual sobre tribuna clara u oscura. */
.lp-pista__crono {
    display: block;
    width: min(100%, 24rem);
    height: auto;
}

@media (max-width: 35.99rem) {
    .lp-pista__crono {
        width: min(100%, 19rem);
    }
}

.lp-pista__crono-corona,
.lp-pista__crono-caja {
    fill: var(--lp-noche-alta);
}

.lp-pista__crono-esfera {
    fill: var(--lp-noche);
}

.lp-pista__crono-marcas {
    fill: none;
    stroke: var(--lp-foco-suave);
    stroke-width: 2;
    stroke-linecap: round;
}

.lp-pista__crono-hora {
    transition: fill .45s ease;
}

.lp-pista__crono-hora--libre {
    fill: var(--lp-volt);
}

.lp-pista__crono-hora--ocupada {
    fill: var(--lp-tartan);
}

.lp-pista__crono-hora--descanso {
    fill: var(--lp-descanso);
}

.lp-pista__crono-etiqueta {
    fill: var(--lp-foco-suave);
    font-family: var(--lp-cifras);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.lp-pista__crono-cifra {
    fill: var(--lp-foco);
    font-family: var(--lp-titular);
    font-size: 50px;
    font-style: italic;
    font-weight: 800;
    text-anchor: middle;
}

.lp-pista__crono-rotulo {
    fill: var(--lp-foco-suave);
    font-family: var(--lp-cifras);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-anchor: middle;
    text-transform: uppercase;
}

.lp-pista__crono-leyenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
}

.lp-pista__crono-clave::before {
    content: "";
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin-right: .45rem;
    border-radius: .2rem;
    vertical-align: -.1em;
}

.lp-pista__crono-clave--libre::before {
    background: var(--lp-volt);
    box-shadow: inset 0 0 0 1px var(--lp-volt-borde);
}

.lp-pista__crono-clave--ocupada::before {
    background: var(--lp-tartan);
}

.lp-pista__crono-clave--descanso::before {
    background: var(--lp-descanso);
}

/* En tableta el reloj y los mandos van lado a lado, bajo la cabecera. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
    .lp-pista__crono-rejilla {
        grid-template-areas: "cabecera cabecera" "figura mando";
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        column-gap: 2rem;
    }

    .lp-pista__crono-cabecera {
        grid-area: cabecera;
    }

    .lp-pista__crono-figura {
        grid-area: figura;
    }

    .lp-pista__crono-mando {
        grid-area: mando;
    }
}

@media (min-width: 62rem) {
    .lp-pista__crono-rejilla {
        grid-template-areas: "cabecera figura" "mando figura";
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 0 4rem;
    }

    .lp-pista__crono-cabecera {
        grid-area: cabecera;
        align-self: end;
    }

    .lp-pista__crono-figura {
        grid-area: figura;
    }

    .lp-pista__crono-mando {
        grid-area: mando;
        align-self: start;
        padding-top: 1.75rem;
    }
}

/* ═══ Para la familia ══════════════════════════════════════════════════════ */
.lp-pista__familia-rejilla {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.lp-pista__familia-figura {
    position: relative;
    margin: 0 0 1rem;
}

    /* Un tramo de grada pintado bajo la foto. */
    .lp-pista__familia-figura::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: -1rem;
        left: -.5rem;
        height: 1rem;
        border-radius: .3rem;
        background: repeating-linear-gradient(90deg, var(--lp-tartan) 0 1rem, var(--lp-cal) 1rem 1.15rem);
    }

.lp-pista__familia-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--lp-noche-alta);
    box-shadow: 0 1.5rem 3rem var(--lp-sombra-foto);
}

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

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

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

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

    .lp-pista__familia-lista strong {
        color: var(--lp-foco);
    }

/* En tableta la foto se apaisa para no empujar la lista fuera de la pantalla. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
    .lp-pista__familia-foto {
        aspect-ratio: 16 / 9;
    }
}

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

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

/* ═══ Fotofinish ═══════════════════════════════════════════════════════════
   Sin guion: una rejilla de cinco fotos con su texto debajo. Con guion
   (--interactiva): una tira de cuadros que se despliega; el elegido se
   ensancha y enseña su texto encima de la foto. */
.lp-pista__fotofinish {
    position: relative;
}

/* La regla de tiempos de una foto de llegada, sobre la tira. */
.lp-pista__fotofinish-regla {
    display: block;
    height: 1.4rem;
    margin-bottom: .6rem;
    background: repeating-linear-gradient(90deg, var(--lp-tinta) 0 2px, transparent 2px 10%) bottom / 100% .9rem no-repeat, repeating-linear-gradient(90deg, var(--lp-tinta-suave) 0 1px, transparent 1px 2%) bottom / 100% .45rem no-repeat;
    opacity: .55;
}

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

.lp-pista__cuadro {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: .9rem;
    background: var(--lp-noche);
    color: var(--lp-foco);
    box-shadow: 0 1rem 2rem var(--lp-sombra);
}

.lp-pista__cuadro-foto {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--lp-noche-alta);
}

.lp-pista__cuadro-tiempo {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 1;
    padding: .15rem .5rem;
    border-radius: .3rem;
    background: var(--lp-velo-fuerte);
    color: var(--lp-marcador);
    font-family: var(--lp-cifras);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.lp-pista__cuadro-leyenda {
    padding: .8rem .9rem 1rem;
}

.lp-pista__cuadro-titulo {
    margin: 0 0 .35rem;
    font-family: var(--lp-titular);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.lp-pista__cuadro-boton {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

    /* Toda la foto es zona de clic. */
    .lp-pista__cuadro-boton::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .lp-pista__cuadro-boton:focus-visible {
        outline: none;
    }

        .lp-pista__cuadro-boton:focus-visible::after {
            outline: 3px solid var(--lp-volt);
            outline-offset: -4px;
            border-radius: .9rem;
        }

.lp-pista__cuadro-texto {
    margin: 0;
    font-size: .92rem;
    color: var(--lp-foco-suave);
}

@media (min-width: 48rem) {
    .lp-pista__cuadros {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Modo interactivo, común a todos los anchos. */
.lp-pista__fotofinish--interactiva .lp-pista__cuadros {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro {
    height: 4.75rem;
    transition: height .55s cubic-bezier(.3, .7, .2, 1), flex-grow .55s cubic-bezier(.3, .7, .2, 1);
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro--activo {
    height: min(26rem, 115vw);
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 30%, var(--lp-velo-fuerte));
    pointer-events: none;
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo)::before {
    background: var(--lp-velo);
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro-leyenda {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 0 1rem .9rem;
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro-tiempo {
    z-index: 3;
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro--activo .lp-pista__cuadro-titulo {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

.lp-pista__fotofinish--interactiva .lp-pista__cuadro--activo .lp-pista__cuadro-texto {
    max-width: 30rem;
    color: var(--lp-foco);
    animation: lp-pista-desplegar .4s ease .15s both;
}

/* En móvil un cuadro plegado es una franja: el tiempo a la derecha y el título
   centrado a su izquierda, sin pisarse. */
@media (max-width: 47.99rem) {
    .lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo) .lp-pista__cuadro-tiempo {
        top: 50%;
        right: .75rem;
        left: auto;
        transform: translateY(-50%);
    }

    .lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo) .lp-pista__cuadro-leyenda {
        top: 0;
        display: flex;
        align-items: center;
        padding: 0 6.25rem 0 1rem;
    }

    .lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo) .lp-pista__cuadro-titulo {
        margin: 0;
        font-size: 1rem;
    }
}

/* En escritorio la tira va en horizontal: los cuadros plegados son franjas
   verticales con el título de lado, como en una foto de llegada. */
@media (min-width: 48rem) {
    .lp-pista__fotofinish--interactiva .lp-pista__cuadros {
        flex-direction: row;
        height: clamp(26rem, 60vh, 34rem);
    }

    .lp-pista__fotofinish--interactiva .lp-pista__cuadro,
    .lp-pista__fotofinish--interactiva .lp-pista__cuadro--activo {
        flex: 1 1 0;
        min-width: 0;
        height: auto;
    }

    .lp-pista__fotofinish--interactiva .lp-pista__cuadro--activo {
        flex-grow: 4.5;
    }

    .lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo) .lp-pista__cuadro-leyenda {
        top: 2.6rem;
        right: auto;
        bottom: 1rem;
        left: 50%;
        padding: 0;
        transform: translateX(-50%);
    }

    .lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo) .lp-pista__cuadro-titulo {
        margin: 0;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
    }

    /* En una franja estrecha el tiempo se centra y encoge para no salirse. */
    .lp-pista__fotofinish--interactiva .lp-pista__cuadro:not(.lp-pista__cuadro--activo) .lp-pista__cuadro-tiempo {
        left: 50%;
        padding: .1rem .35rem;
        font-size: .68rem;
        transform: translateX(-50%);
    }
}

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

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

    .lp-pista__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-pista__pregunta > summary::-webkit-details-marker {
            display: none;
        }

        /* Una cruz sobre tartán que gira hasta ser una equis al abrir. */
        .lp-pista__pregunta > summary::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 1.1rem;
            width: 1.6rem;
            height: 1.6rem;
            margin-top: -.8rem;
            border-radius: 50%;
            background: linear-gradient(var(--lp-cal), var(--lp-cal)) center / .7rem 2px no-repeat, linear-gradient(var(--lp-cal), var(--lp-cal)) center / 2px .7rem no-repeat, var(--lp-tartan);
            transition: transform .3s ease;
        }

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

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

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

/* ═══ La meta ══════════════════════════════════════════════════════════════ */
.lp-pista__cierre {
    --lp-anillo: var(--lp-volt);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5.5rem, 12vw, 9rem) 0 clamp(4.5rem, 10vw, 7rem);
    background: var(--lp-noche);
    color: var(--lp-foco);
    text-align: center;
}

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

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

/* La cinta de llegada: dos mitades que, al entrar la sección en pantalla, caen
   cada una desde su extremo como si el corredor la hubiera roto. */
.lp-pista__cinta {
    position: absolute;
    top: 2.6rem;
    right: 0;
    left: 0;
    display: flex;
    height: .9rem;
    pointer-events: none;
}

.lp-pista__cinta-mitad {
    flex: 1;
    background: repeating-linear-gradient(90deg, var(--lp-volt) 0 2.5rem, var(--lp-cal) 2.5rem 5rem);
    box-shadow: 0 .2rem .5rem var(--lp-sombra-foto);
    transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), opacity .7s ease 1s;
}

.lp-pista__cinta-mitad--izquierda {
    transform-origin: left center;
}

.lp-pista__cinta-mitad--derecha {
    transform-origin: right center;
}

/* Rota, cada mitad cuelga de su extremo y se desvanece: el titular queda limpio. */
.lp-pista--animada .lp-pista__cierre.lp-pista--visible .lp-pista__cinta-mitad--izquierda {
    transform: rotate(68deg);
    opacity: 0;
}

.lp-pista--animada .lp-pista__cierre.lp-pista--visible .lp-pista__cinta-mitad--derecha {
    transform: rotate(-68deg);
    opacity: 0;
}

.lp-pista__cierre-contenido {
    position: relative;
}

.lp-pista__cierre-titulo {
    max-width: 44rem;
    margin: 0 auto 1.25rem;
    font-family: var(--lp-titular);
    font-size: clamp(2.6rem, 7.5vw, 5.6rem);
    font-stretch: condensed;
    font-style: italic;
    font-weight: 800;
    line-height: .95;
    text-transform: uppercase;
    text-wrap: balance;
}

.lp-pista__cierre-sigla {
    display: block;
    font-size: 1.35em;
    color: var(--lp-volt);
}

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

.lp-pista__cierre-fecha {
    margin: 1rem auto 0;
    font-weight: 700;
    color: var(--lp-foco);
}

/* La línea de meta a cuadros: dos filas de casillas alternas. */
.lp-pista__cierre-cuadros {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.5rem;
    background: repeating-conic-gradient(var(--lp-cal) 0 25%, var(--lp-noche) 0 50%) 0 0 / 1.5rem 1.5rem;
}

/* ═══ En marcha: 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. */
.lp-pista__marcha {
    --lp-avance: 0;
    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: .7rem;
    max-width: calc(100vw - 2rem);
    padding: .45rem .5rem .45rem .9rem;
    border: 2px solid var(--lp-volt);
    border-radius: 99rem;
    background: var(--lp-noche);
    color: var(--lp-foco);
    font-family: var(--lp-titular);
    font-style: italic;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    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-pista__marcha--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s linear 0s;
}

    .lp-pista__marcha:hover {
        background: var(--lp-noche-alta);
        color: var(--lp-foco);
    }

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

.lp-pista__marcha-pista {
    position: relative;
    flex: 0 0 auto;
    width: 5.5rem;
    height: .45rem;
    border-radius: 99rem;
    background: var(--lp-tartan);
}

.lp-pista__marcha-avance {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lp-volt);
    transform: scaleX(var(--lp-avance));
    transform-origin: left center;
}

.lp-pista__marcha-corredor {
    position: absolute;
    bottom: .15rem;
    left: calc(var(--lp-avance) * (100% - 1.2rem));
    width: 1.2rem;
    height: 1.2rem;
    color: var(--lp-volt);
}

.lp-pista__marcha-metros {
    min-width: 3.3rem;
    font-family: var(--lp-cifras);
    font-size: .85rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-transform: none;
    color: var(--lp-foco-suave);
}

.lp-pista__marcha-texto {
    padding: .5rem 1rem;
    border-radius: 99rem;
    background: var(--lp-volt);
    color: var(--lp-volt-tinta);
    font-size: .95rem;
    white-space: nowrap;
}

/* ═══ Pantallas estrechas ══════════════════════════════════════════════════
   Por debajo de 36rem los grupos de botones se apilan a lo ancho y el botón
   flotante pierde los metros para caber junto al pulgar. */
@media (max-width: 35.99rem) {
    .lp-pista__acciones .lp-pista__accion {
        flex: 1 1 100%;
    }

    .lp-pista__marcha-pista {
        width: 3.5rem;
    }

    .lp-pista__marcha-metros {
        display: none;
    }

    .lp-pista__marcador-fila {
        grid-template-columns: 5.2rem minmax(0, 1fr);
        gap: .8rem;
    }

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

    .lp-pista__tramo-foto {
        aspect-ratio: 2 / 1;
    }
}

/* Por debajo de 25rem el botón flotante, que va a la izquierda, ya no cabe
   entero entre el borde y la mascota del sitio, que ocupa la esquina derecha: se
   compacta. Por debajo de 22.5rem ni así cabe, y la pista cede su sitio al
   texto, que es lo que se pulsa. */
@media (max-width: 24.99rem) {
    .lp-pista__marcha {
        gap: .5rem;
        padding-left: .75rem;
    }

    .lp-pista__marcha-pista {
        width: 2.75rem;
    }

    .lp-pista__marcha-texto {
        padding: .45rem .8rem;
        font-size: .88rem;
    }
}

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

/* ═══ Menos movimiento ═════════════════════════════════════════════════════
   Quien lo pidió en su sistema no recibe entradas, bucles ni recorridos: la voz
   del juez se lee de corrido y la cinta de meta queda entera. */
@media (prefers-reduced-motion: reduce) {
    .lp-pista--animada [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-pista__reflector,
    .lp-pista__voz,
    .lp-pista__salida-corredor,
    .lp-pista__accion--latido,
    .lp-pista__marcador-vivo::before,
    .lp-pista__marcador-cifra--tuya,
    .lp-pista__ovalo-corredor-halo,
    .lp-pista__estadio--meta,
    .lp-pista__dorsal--nuevo,
    .lp-pista__carril--abierto .lp-pista__carril-panel,
    .lp-pista--animada .lp-pista__prueba,
    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__testigo,
    .lp-pista--animada .lp-pista__relevo.lp-pista--visible .lp-pista__posta,
    .lp-pista__fotofinish--interactiva .lp-pista__cuadro--activo .lp-pista__cuadro-texto {
        animation: none !important;
    }

    .lp-pista__voces {
        height: auto;
    }

    .lp-pista__voz {
        position: static;
        opacity: 1;
        transform: none;
    }

        .lp-pista__voz + .lp-pista__voz::before {
            content: " · ";
        }

    .lp-pista__salida-corredor {
        left: 70%;
    }

    .lp-pista__accion,
    .lp-pista__carril-corredor,
    .lp-pista__tramo,
    .lp-pista__tramo-aqui,
    .lp-pista__ovalo-tramo,
    .lp-pista__crono-hora,
    .lp-pista__fotofinish--interactiva .lp-pista__cuadro,
    .lp-pista__cinta-mitad,
    .lp-pista__marcha {
        transition: none !important;
    }

    .lp-pista--animada .lp-pista__cierre.lp-pista--visible .lp-pista__cinta-mitad--izquierda,
    .lp-pista--animada .lp-pista__cierre.lp-pista--visible .lp-pista__cinta-mitad--derecha {
        transform: none;
        opacity: 1;
    }
}