/* ==========================================================================
   Portada

   Una apertura a pantalla completa y, debajo, la pista contada sección por
   sección: fotos enteras, datos en fichas de líneas finas y una sola voz de
   titular. Las piezas comunes (rejilla, cabecera, pie, encabezados) viven en
   publico.css.

   Movimiento. Las escenas ligadas al desplazamiento las mueve GSAP con
   ScrollTrigger (portada-escenas.js) escribiendo estilos en línea: aquí no hay
   transiciones sobre las propiedades que GSAP anima, o las dos se pelearían
   en cada fotograma. Lo único que el CSS oculta antes de tiempo cuelga de
   `.portada-intro` (la apertura, la pone portada-arranque.js antes del primer
   fotograma) o de `.portada-animada` (la pone portada.js cuando GSAP está
   listo). Sin JavaScript, sin GSAP o con movimiento reducido ninguna de las dos
   existe y la página se ve completa y quieta.
   ========================================================================== */

.pagina-entrada {
  --luz-apagada: #2b100f;
  --luz-roja: #ff3b30;
}

/* ==========================================================================
   Apertura
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: max(660px, 100svh);
  padding-top: var(--pub-cabecera);
  overflow: hidden;
  background: #000;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
/* Velo: negro denso donde va el texto y la foto libre a la derecha. Abajo
   se funde con el negro de la página para que la apertura no tenga borde. */
.hero__foto::after {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .74) 34%, rgba(0, 0, 0, .28) 66%, rgba(0, 0, 0, .18) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .82) 88%, #000 100%);
}

.hero__sombra {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.hero__contenido {
  position: relative;
  align-self: center;
  padding-block: clamp(40px, 7vh, 96px) clamp(28px, 5vh, 56px);
}

/* Semáforo de salida: cinco luces que se encienden y se apagan al abrir. */
.hero__semaforo {
  display: inline-flex;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
/* El pórtico de la cuenta atrás: lo lleva al centro de la pantalla y de
   vuelta portada-escenas.js. Es una caja propia y no el semáforo, que ya lo
   aparta la salida: dos animaciones sobre el mismo `transform` se pisarían. */
.hero__portico {
  display: inline-block;
  margin-bottom: clamp(24px, 3.4vh, 36px);
  vertical-align: middle;
  transform-origin: 50% 50%;
}
.hero__semaforo span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--luz-apagada);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7);
  transition: background-color 160ms linear, box-shadow 160ms linear;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: var(--acento);
  font-family: var(--display);
  font-stretch: 118%;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.hero__kicker::before {
  width: 40px;
  height: 1px;
  content: '';
  background: currentColor;
}

.hero__titulo {
  margin: 0;
  font-size: clamp(3.5rem, 10.2vw, 10rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: .86;
  letter-spacing: .006em;
}
/* Cada línea es una ventana: su texto sube desde abajo en la apertura. */
.hero__linea {
  display: block;
  overflow: hidden;
  padding-block: .05em;
  margin-block: -.05em;
}
.hero__linea > span { display: block; }
.hero__linea--acento { color: var(--acento); }

.hero__lead {
  max-width: 44ch;
  margin: clamp(22px, 3.4vh, 32px) 0 0;
  color: rgba(244, 246, 243, .84);
  font-size: clamp(1.02rem, .35vw + .94rem, 1.2rem);
  line-height: 1.62;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(30px, 4.4vh, 44px);
}

/* Cifras al pie de la apertura, como el rótulo de un cronómetro. */
.hero__cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 0 clamp(28px, 5vh, 56px);
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.cifra { min-width: 0; padding: 22px 20px 0 0; }
.cifra + .cifra { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid rgba(255, 255, 255, .1); }
.cifra__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--display);
  font-stretch: 120%;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.cifra__valor small {
  color: var(--acento);
  font-size: .46em;
  font-weight: 650;
  letter-spacing: .04em;
}
.cifra__texto {
  display: block;
  margin-top: 10px;
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .hero { min-height: max(620px, 100svh); }
  .hero__foto img { object-position: 62% 50%; }
  /* En vertical el texto ocupa casi toda la altura y la pared del hangar es
     clara: el velo no se abre del todo en ningún tramo donde haya texto. */
  .hero__foto::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .32) 16%, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .8) 56%, rgba(0, 0, 0, .9) 76%, #000 100%);
  }
  .hero__contenido { align-self: end; }
  .hero__titulo { font-size: clamp(3.3rem, 17.4vw, 5.6rem); }
  .hero__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra { padding-block: 18px 16px; }
  .cifra:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cifra:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}

/* ==========================================================================
   01 · La pista: mosaico de fotos
   ========================================================================== */

/* El telón: en pantallas anchas la apertura se queda fija y esta sección
   sube por encima (portada-escenas.js). Va un plano por delante y su borde
   de arriba se funde con la foto en lugar de cortarla. Sin movimiento la
   apertura no se fija y no se nota nada: el negro es el de la página. Va por
   clase y no por `.hero + .seccion`: al fijarla, ScrollTrigger envuelve la
   apertura y deja de ser la hermana de esta sección. */
.seccion--telon {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--fondo) calc(var(--pub-seccion) * .62));
}

.mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}

.mosaico__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--pub-tarjeta);
  transform: translateZ(0);
  will-change: clip-path;
}
.mosaico__foto--ancha { grid-column: span 8; aspect-ratio: 16 / 9; }
.mosaico__foto--alta { grid-column: span 4; }
/* La foto alta no decide el alto de la fila: se recorta al de su vecina. */
.mosaico__foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.mosaico__foto picture { display: contents; }

.mosaico__foto figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 56px clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 20px);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .74));
  color: var(--texto);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* La escena del mosaico (pantallas anchas, con movimiento): la primera foto
   entra a pantalla completa por encima de las demás y vuelve a su casilla. */
.mosaico--escena .mosaico__foto:first-child {
  z-index: 2;
  will-change: transform;
}
/* Tras el recorrido la cámara se queda abajo, donde se vio entera la fila de
   abajo: lo que sigue sube lo mismo (--recorte-mosaico lo mide
   portada-escenas.js) para que no quede un hueco bajo el mosaico. */
.portada-animada .seccion--telon > .marco { margin-bottom: calc(-1 * var(--recorte-mosaico, 0px)); }
/* El recorrido por los detalles: el que se mira queda encendido y los demás,
   en penumbra (--penumbra la mueve GSAP; quieta vale 0 y no tapa nada). Sobre
   todo, también su pie de foto: solo se lee el que se está mirando. */
.mosaico--escena .mosaico__foto::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: '';
  background: #000;
  opacity: var(--penumbra, 0);
  pointer-events: none;
}

@media (max-width: 760px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico__foto--ancha { grid-column: 1 / -1; }
  .mosaico__foto--alta { grid-column: span 1; aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   02 · Complejo: disciplinas como sectores de una vuelta
   ========================================================================== */

.disciplinas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.disciplina {
  position: relative;
  min-width: 0;
  padding-top: 28px;
  border-top: 1px solid var(--pub-linea-2);
}
.disciplina__sector {
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--acento);
  transform-origin: left center;
}
/* La vuelta: una línea que recorre los cinco sectores mientras la lista se
   queda fija. Sin movimiento no existe. */
.disciplinas__pista { position: relative; }
.disciplinas__vuelta { display: none; }
.disciplina__num {
  display: block;
  margin-bottom: 18px;
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
}
/* Cada disciplina tiene su dibujo, en el mismo idioma que el plano del
   circuito: líneas de un píxel y medio, el asfalto como banda tenue y el
   verde solo para lo que se mueve (el auto, el dron, la línea de vuelo). */
.disciplina__dibujo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 22px;
  overflow: visible;
}
.trazo {
  fill: none;
  stroke: var(--texto-2);
  /* En unidades del dibujo y sin `vector-effect`: el trazo se dibuja con
     `pathLength`, y con el grosor fijo en píxeles Chrome mediría el guion en
     la pantalla y el dibujo se quedaría a medias. */
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trazo--tenue { stroke: var(--texto-3); }
.trazo--acento { stroke: var(--acento); }
.trazo--asfalto { stroke: rgba(255, 255, 255, .08); stroke-width: 14; }
/* La calzada del rally: la banda llena el ancho entre sus dos bordes y se
   corta a escuadra donde cambia la superficie. */
.trazo--calzada { stroke: rgba(255, 255, 255, .08); stroke-width: 20; stroke-linecap: butt; }
.trazo--tierra { stroke: rgba(255, 209, 102, .07); }
/* Sin `pathLength`: el guion se mide en unidades del dibujo. */
.trazo--punteado { stroke-dasharray: 2 4; }
.disciplina h3 {
  margin: 0 0 12px;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  font-stretch: 114%;
  letter-spacing: .05em;
  line-height: 1.18;
}
.disciplina p { margin: 0; color: var(--texto-2); font-size: .95rem; line-height: 1.6; }

@media (max-width: 1100px) {
  .disciplinas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 700px) {
  .disciplinas { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .disciplina {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    padding-block: 24px;
  }
  .disciplina__lamina { display: contents; }
  .disciplina__num { grid-row: span 3; margin: 0; padding-top: 3px; }
  .disciplina__dibujo { max-width: 160px; margin-bottom: 16px; }
}

/* ==========================================================================
   03 · Ficha técnica: plano del recinto y especificaciones
   ========================================================================== */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
}

.plano {
  position: sticky;
  top: calc(var(--pub-cabecera) + 32px);
  margin: 0;
  padding: clamp(20px, 3vw, 44px);
  border: 1px solid var(--pub-linea);
  border-radius: var(--pub-radio);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(147, 210, 65, .07), transparent 72%),
    var(--pub-tarjeta);
  transform: translateZ(0);
}
.plano__dibujo { display: block; width: 100%; height: auto; overflow: visible; }
.plano__reticula { stroke: rgba(255, 255, 255, .045); stroke-width: 1; }
.plano__recinto { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.plano__cota path { fill: none; stroke: var(--texto-3); stroke-width: 1; }
.plano__cota text,
.plano__curvas text {
  fill: var(--texto-2);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .16em;
}
.plano__curvas text { fill: var(--texto-3); font-size: 10px; }
.plano__asfalto {
  fill: none;
  stroke: #1c2023;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plano__trazado {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plano__meta { stroke: var(--texto); stroke-width: 3; stroke-dasharray: 3 3; }
.plano__salida { fill: var(--texto); }
.plano__auto { display: none; fill: var(--acento); }
.plano figcaption {
  margin-top: clamp(16px, 2vw, 24px);
  padding-top: 16px;
  border-top: 1px solid var(--pub-linea);
  color: var(--texto-3);
  font-size: .86rem;
}

.ficha__lista { margin: 0; border-top: 1px solid var(--pub-linea-2); }
.ficha__fila {
  display: grid;
  grid-template-columns: minmax(104px, 2fr) minmax(0, 3fr);
  gap: 16px;
  padding-block: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--pub-linea);
}
.ficha__fila dt {
  padding-top: .5em;
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ficha__fila dd { min-width: 0; margin: 0; }
.ficha__fila strong {
  display: block;
  font-family: var(--display);
  font-stretch: 114%;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums lining-nums;
}
.ficha__fila span { display: block; margin-top: 4px; color: var(--texto-2); font-size: .92rem; }

@media (max-width: 960px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .plano { position: relative; top: 0; }
}

/* ==========================================================================
   04 y 05 · Horarios y récords: título a un lado, tablero al otro
   ========================================================================== */

.partido {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(40px, 7vw, 120px);
}
.partido--invertido { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.partido--invertido > .seccion__cabeza { order: 2; }

.seccion__cabeza--columna {
  display: block;
  position: sticky;
  top: calc(var(--pub-cabecera) + 40px);
  margin: 0;
}
.seccion__cabeza--columna h2 { margin-bottom: 24px; }
.seccion__cabeza--columna .seccion__lead { margin-bottom: 32px; }

@media (max-width: 960px) {
  .partido,
  .partido--invertido { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .partido--invertido > .seccion__cabeza { order: 0; }
  .seccion__cabeza--columna { position: relative; top: 0; }
}

/* --- Horarios ------------------------------------------------------------ */

.horarios { min-width: 0; }
.horarios__lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pub-linea-2); }
.horario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'dia horas' 'estado horas';
  align-content: center;
  align-items: center;
  column-gap: 24px;
  min-height: clamp(96px, 9vw, 124px);
  padding-block: 18px;
  border-bottom: 1px solid var(--pub-linea);
}
.horario:not([data-estado]) { grid-template-areas: 'dia horas'; }
.horario__dia {
  grid-area: dia;
  font-family: var(--display);
  font-stretch: 118%;
  font-size: clamp(.92rem, 1.2vw, 1.1rem);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color 300ms var(--pub-curva);
}
.horario__horas {
  grid-area: horas;
  font-family: var(--display);
  font-stretch: 110%;
  font-size: clamp(1.5rem, 3.1vw, 2.75rem);
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.horario__estado {
  grid-area: estado;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--texto-2);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.horario__estado::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: '';
  background: currentColor;
}
.horario[data-estado="abierto"] .horario__dia { color: var(--acento); }
.horario[data-estado="abierto"] .horario__estado { background: var(--acento-suave); color: var(--acento); }
.horario[data-estado="abierto"] .horario__estado::before { animation: latido 1.8s ease-in-out infinite; }

@media (max-width: 560px) {
  .horario { grid-template-areas: 'dia horas' 'estado estado'; }
}
/* En los teléfonos más estrechos el día va encima de la hora: lado a lado
   no caben sin pisarse. */
@media (max-width: 400px) {
  .horario,
  .horario:not([data-estado]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'dia' 'horas' 'estado';
    row-gap: 6px;
  }
  .horario__horas { font-size: 1.7rem; }
}

.horarios__nota { max-width: 52ch; margin: 24px 0 0; color: var(--texto-3); font-size: .9rem; }

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(147, 210, 65, .55); }
  50% { box-shadow: 0 0 0 5px rgba(147, 210, 65, 0); }
}

/* --- Récords: tablero de cronometraje -------------------------------------- */

.tiempos {
  overflow: hidden;
  border: 1px solid var(--pub-linea);
  border-radius: var(--pub-radio);
  background: var(--pub-tarjeta);
}
.tiempos__cabeza,
.tiempo {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 88px 116px;
  align-items: center;
  gap: 16px;
  padding-inline: clamp(18px, 2.4vw, 32px);
}
.tiempos__cabeza {
  min-height: 48px;
  border-bottom: 1px solid var(--pub-linea);
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.tiempos__cabeza span:nth-child(n + 3) { text-align: right; }

.tiempos__lista { margin: 0; padding: 0; list-style: none; }
.tiempo {
  position: relative;
  min-height: clamp(78px, 7vw, 100px);
  border-bottom: 1px solid var(--pub-linea);
}
.tiempo__pos {
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 118%;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tiempo__piloto {
  min-width: 0;
  overflow: hidden;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 650;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tiempo__dif {
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 112%;
  font-size: .92rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tiempo__marca {
  font-family: var(--display);
  font-stretch: 118%;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.tiempo--lider {
  background: linear-gradient(90deg, rgba(147, 210, 65, .11), rgba(147, 210, 65, 0) 72%);
  box-shadow: inset 3px 0 0 var(--acento);
}
.tiempo--lider .tiempo__pos,
.tiempo--lider .tiempo__dif,
.tiempo--lider .tiempo__marca { color: var(--acento); }
.tiempo--lider .tiempo__dif { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }

.tiempos__pie { margin: 0; padding: 16px clamp(18px, 2.4vw, 32px); color: var(--texto-3); font-size: .82rem; }

@media (max-width: 560px) {
  .tiempos__cabeza { display: none; }
  .tiempo {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: 'pos piloto marca' 'pos dif marca';
    row-gap: 2px;
    padding-block: 16px;
  }
  .tiempo__pos { grid-area: pos; }
  .tiempo__piloto { grid-area: piloto; }
  .tiempo__dif { grid-area: dif; text-align: left; }
  .tiempo__marca { grid-area: marca; }
}

/* ==========================================================================
   06 · Eventos
   ========================================================================== */

.agenda {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.evento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  min-height: 320px;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--pub-linea);
  border-radius: var(--pub-radio);
  background: var(--fondo);
}
.evento::before {
  position: absolute;
  top: -1px;
  left: clamp(24px, 2.6vw, 36px);
  width: 44px;
  height: 2px;
  content: '';
  background: var(--acento);
}
.evento__fecha {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.evento__fecha b {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: clamp(3.4rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: .82;
  font-variant-numeric: tabular-nums lining-nums;
}
.evento__fecha span {
  color: var(--acento);
  font-family: var(--display);
  font-stretch: 118%;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.evento__texto { margin-top: auto; }
.evento h3 { margin: 0 0 10px; font-size: clamp(1.12rem, 1.5vw, 1.36rem); letter-spacing: .04em; line-height: 1.1; }
.evento p { margin: 0; color: var(--texto-2); }

.agenda__accion { margin-top: clamp(32px, 4vw, 52px); }

@media (max-width: 860px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .evento {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
  }
  .evento__fecha { flex-direction: column; gap: 8px; }
  .evento__fecha b { font-size: 3.2rem; }
}
@media (max-width: 480px) {
  .evento { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .evento__fecha { flex-direction: row; }
}

/* ==========================================================================
   Muy pronto
   ========================================================================== */

.pronto {
  position: relative;
  padding-block: var(--pub-seccion);
  overflow: hidden;
  background: var(--fondo);
}
.pronto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
}
.pronto__texto { min-width: 0; }
.pronto__texto h2 {
  margin: 0 0 28px;
  font-size: clamp(3rem, 8vw, 7.4rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: .9;
  letter-spacing: .006em;
}
.pronto__texto .seccion__lead { margin-bottom: 36px; }
.seccion__indice--alerta { color: var(--alerta); }
.seccion__indice--alerta::before {
  width: 32px;
  height: 8px;
  content: '';
  background: repeating-linear-gradient(-45deg, var(--alerta) 0 5px, transparent 5px 10px);
}

.pronto__foto {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pub-radio);
  background: var(--pub-tarjeta);
  transform: translateZ(0);
  will-change: clip-path;
}
/* Cinta de obra en el canto superior; con movimiento se desplaza con el scroll. */
.pronto__cinta {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--alerta) 0 14px, #111 14px 28px) 0 0 / 39.6px 10px;
}
/* Sin filtro propio: todas las fotos de la portada comparten la misma
   gradación, hecha en los archivos (ver public/images/README.md). */
.pronto__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 760px) {
  .pronto__rejilla { grid-template-columns: minmax(0, 1fr); }
  .pronto__foto { aspect-ratio: 16 / 11; }
}

/* ==========================================================================
   07 · Galería: una tira que se recorre de lado
   ========================================================================== */

.seccion__cabeza--con-controles { grid-template-columns: minmax(0, 1fr) auto; }
.galeria__controles { display: flex; gap: 10px; padding-bottom: .3em; }
.galeria__boton {
  translate: var(--mx, 0px) var(--my, 0px);
  will-change: translate;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--pub-linea-2);
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 180ms ease-out, color 180ms ease-out, background-color 180ms ease-out, opacity 180ms ease-out;
}
.galeria__boton svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.galeria__boton:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.galeria__boton:disabled { opacity: .32; cursor: default; }
.galeria__boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.galeria {
  --galeria-margen: max(var(--pub-margen), calc((100% - var(--pub-ancho)) / 2));
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  padding-inline: var(--galeria-margen);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--galeria-margen);
  scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; }

.galeria__foto {
  flex: none;
  width: min-content;
  margin: 0;
  scroll-snap-align: start;
}
.galeria__marco {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--pub-tarjeta);
  isolation: isolate;
  transform: translateZ(0);
}
.galeria__foto img {
  display: block;
  width: auto;
  height: clamp(340px, 58vh, 620px);
  max-width: none;
  object-fit: cover;
}
.galeria__avance { display: none; }
.galeria__foto figcaption {
  margin-top: 14px;
  color: var(--texto-3);
  font-size: .88rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .galeria__controles { display: none; }
  .seccion__cabeza--con-controles { grid-template-columns: minmax(0, 1fr); }
  /* En vertical todas las fotos miden lo mismo: una tira pareja se recorre
     con el pulgar sin saltos de alto. */
  .galeria__foto { width: 78vw; }
  .galeria__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   08 · Equipamiento
   ========================================================================== */

.productos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.productos > li { min-width: 0; }

.producto {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--pub-linea);
  border-radius: var(--pub-radio);
  background: #000;
  color: var(--texto);
  text-decoration: none;
  transition: border-color 200ms ease-out;
  will-change: transform;
}
.producto__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.producto__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.producto__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 20px;
  border-top: 1px solid var(--pub-linea);
}
.producto strong {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .02em;
}
.producto em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--acento);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .66rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.producto em::after {
  width: 10px;
  height: 10px;
  content: '';
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5l7-7M3 1.5h5.5V7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5l7-7M3 1.5h5.5V7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms ease-out;
}
.producto--pronto em::after { content: none; }
.producto:hover { border-color: rgba(147, 210, 65, .55); }
.producto:hover em::after { transform: translate(2px, -2px); }

.producto--pronto .producto__foto img { filter: grayscale(1) brightness(.62); }
.producto--pronto em { color: var(--texto-3); }

@media (max-width: 1100px) {
  .productos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 30%);
    width: 100%;
    padding-inline: var(--pub-margen);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pub-margen);
    scrollbar-width: none;
  }
  .productos::-webkit-scrollbar { display: none; }
  .productos > li { scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .productos { grid-auto-columns: 68%; }
}

/* ==========================================================================
   Tu pase
   ========================================================================== */

.acceso {
  position: relative;
  padding-block: calc(var(--pub-seccion) + 16px) var(--pub-seccion);
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 80% 58%, rgba(147, 210, 65, .085), transparent 72%),
    var(--fondo);
}
/* La bandera a cuadros: la última recta antes de entrar. */
.acceso__bandera {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 16px;
  background: repeating-conic-gradient(#f4f6f3 0 25%, #000 0 50%) 0 0 / 16px 16px;
  opacity: .92;
  transform-origin: left center;
  transform: translateZ(0);
  will-change: transform;
}

.acceso__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
}
.acceso__intro { min-width: 0; }
.acceso__intro h2 {
  margin: 0 0 18px;
  font-size: clamp(3rem, 7vw, 6.6rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: .9;
  letter-spacing: .006em;
}
.acceso__intro > .entrada__acceso-nota { margin: 0; color: var(--texto-2); font-size: clamp(1.05rem, .4vw + .95rem, 1.2rem); }

.ventajas {
  display: grid;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pub-linea);
}
.ventaja {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--pub-linea);
}
.ventaja__icono {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ventaja strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-stretch: 114%;
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ventaja p { margin: 0; color: var(--texto-2); font-size: .95rem; }

.entrada__acceso-panel {
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--pub-linea-2);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008) 40%),
    #070809;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .6);
}
.entrada__acceso-panel .pestanas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}
.entrada__acceso-panel .pestana { justify-content: center; text-align: center; white-space: nowrap; }
.entrada__acceso-subtitulo { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: .05em; }
.entrada__acceso-nota { color: var(--texto-2); }
.entrada__acceso-pie { margin: 18px 0 0; text-align: center; }

.campo__password { position: relative; }
.campo__password input { padding-right: 92px; }
.campo__password-toggle.boton--enlace {
  position: absolute;
  top: 50%;
  right: 8px;
  min-height: 36px;
  padding-inline: 8px;
  font-size: .82rem;
  transform: translateY(-50%);
}

/* Con movimiento la banda crece y deja ondear la bandera dibujada en su
   lienzo (portada-bandera.js); sin él queda la tira de cuadros quieta. */
.portada-animada .acceso__bandera--viva {
  height: clamp(84px, 10vw, 140px);
  background: none;
  opacity: 1;
}
.acceso__lienzo { display: block; width: 100%; height: 100%; }

@media (max-width: 960px) {
  .acceso__rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .entrada__acceso-panel { padding: 20px 16px; }
  .entrada__acceso-panel .pestana { padding-inline: 8px; font-size: .68rem; letter-spacing: .07em; }
}

/* ==========================================================================
   09 · Cómo funciona: del pack a la pista
   ========================================================================== */

/* Los tres pasos se leen a la izquierda y el teléfono se queda a la vista a
   la derecha (`sticky`, sin JavaScript), enseñando la pantalla del paso que
   se está leyendo. portada-pase.js cambia la pantalla; sin él, el teléfono
   enseña la última: el saldo después de entrar. */
/* El teléfono fijo no empuja la página de lado en ningún formato. */
.funciona { overflow-x: clip; }
.funciona__escena {
  display: grid;
  /* Los pasos y el teléfono forman una sola pieza centrada: el texto se lee
     a un vistazo de la pantalla que describe, sin un vacío entre los dos. */
  grid-template-columns: minmax(0, 560px) minmax(0, 380px);
  justify-content: center;
  gap: clamp(32px, 7vw, 120px);
  align-items: start;
}
.funciona__pasos { margin: 0; padding: 0; list-style: none; }
.funciona__paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(76vh, 720px);
  padding-block: 32px;
  border-top: 1px solid var(--pub-linea);
  transition: opacity 420ms ease-out;
}
.funciona__paso:first-child { justify-content: flex-start; padding-top: 0; border-top: 0; }
.funciona--guiado .funciona__paso { opacity: .3; }
.funciona--guiado .funciona__paso.funciona__paso--activo { opacity: 1; }
.funciona__num {
  margin-bottom: 18px;
  color: var(--acento);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .24em;
  font-variant-numeric: tabular-nums;
}
.funciona__paso h3 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  font-stretch: 118%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}
.funciona__paso p { max-width: 40ch; margin: 0; color: var(--texto-2); font-size: clamp(1rem, .3vw + .94rem, 1.12rem); line-height: 1.66; }

.funciona__telefono {
  position: sticky;
  top: calc(50vh - min(320px, 39vh) + var(--pub-cabecera) / 2);
  justify-self: center;
  width: min(100%, calc(min(640px, 78vh) * .49));
  /* Todo lo de dentro se mide en `em` sobre el ancho del teléfono: en
     pequeño es la misma pantalla, solo que más cerca de la vista. */
  container-type: inline-size;
}
.funciona__marco {
  position: relative;
  aspect-ratio: 9 / 18.4;
  padding: 12px;
  border-radius: 46px;
  font-size: clamp(10px, 5cqi, 16px);
  background: linear-gradient(160deg, #15191b, #050607 46%);
  box-shadow: inset 0 0 0 1px var(--pub-linea-2), var(--filo), var(--sombra-alta);
}
.funciona__isla {
  position: absolute;
  top: 1.5em;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 1.5em;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.funciona__pantalla {
  position: absolute;
  inset: 12px;
  display: none;
  flex-direction: column;
  gap: .9em;
  padding: 4em 1.4em 1.75em;
  overflow: hidden;
  border-radius: 35px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(147, 210, 65, .07), transparent 70%),
    var(--superficie);
}
.funciona__telefono[data-paso="1"] .funciona__pantalla--1,
.funciona__telefono[data-paso="2"] .funciona__pantalla--2,
.funciona__telefono[data-paso="3"] .funciona__pantalla--3 { display: flex; }
.funciona__app {
  margin: 0;
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .62em;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.funciona__titulo { margin: 0 0 .4em; font-family: var(--display); font-stretch: 116%; font-size: 1.45em; font-weight: 700; }
.funciona__pack {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: 0;
  padding: 1em 1.1em;
  border: 1px solid var(--pub-linea-2);
  border-radius: .75em;
  background: var(--fondo-2);
}
.funciona__pack b { font-family: var(--display); font-stretch: 120%; font-size: 2.1em; font-weight: 800; line-height: 1; }
.funciona__pack span { color: var(--texto-2); font-size: .9em; }
.funciona__pack--elegido { border-color: var(--acento-borde); background: var(--acento-suave); }
.funciona__pack--elegido b { color: var(--acento); }
.funciona__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
  margin-top: auto;
  border-radius: .75em;
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.funciona__qr { display: block; width: 100%; height: auto; margin-top: .4em; border-radius: .75em; }
.funciona__qr-fondo { fill: var(--texto); }
.funciona__qr-fijo,
.funciona__qr-datos { fill: var(--fondo); }
.funciona__qr-datos--b { display: none; }
.funciona__qr--renovado .funciona__qr-datos--a { display: none; }
.funciona__qr--renovado .funciona__qr-datos--b { display: inline; }
.funciona__haz { display: none; fill: var(--acento); }
.funciona__codigo {
  margin: .25em 0 0;
  color: var(--texto);
  font-family: var(--mono);
  font-size: .92em;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
}
.funciona__renueva { margin: 0; color: var(--texto-3); font-size: .82em; text-align: center; }
.funciona__cuenta { display: inline-block; min-width: 2ch; text-align: right; }
.funciona__renueva b { color: var(--acento); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.funciona__saldo { display: grid; justify-items: start; margin: 1.1em 0 0; }
.funciona__saldo b {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 6.4em;
  font-weight: 800;
  line-height: .9;
  font-variant-numeric: tabular-nums lining-nums;
}
.funciona__entradas { display: block; }
.funciona__saldo span { margin-top: .5em; color: var(--texto-2); }
.funciona__ok {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .6em;
  margin: .5em 0 0;
  padding: .65em .9em;
  border: 1px solid var(--acento-borde);
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: .86em;
  font-weight: 600;
}
.funciona__ok::before {
  width: .9em;
  height: .5em;
  margin-top: -.2em;
  content: '';
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}
.funciona__vivo {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: auto 0 0;
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .62em;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.funciona__vivo::before { width: .7em; height: .7em; content: ''; border-radius: 50%; background: var(--acento); }

@media (max-width: 900px) and (orientation: portrait) {
  /* En el teléfono en vertical el teléfono va arriba, fijo, y los pasos pasan
     por debajo en tarjetas, como las notas de un reportaje. Apaisado hay sitio
     a lo ancho y se queda como en pantalla ancha, uno al lado del otro. */
  .funciona__escena { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .funciona__telefono {
    top: calc(var(--pub-cabecera) + 12px);
    order: -1;
    width: min(56vw, calc(min(400px, 44vh) * .49));
  }
  .funciona__marco { padding: 8px; border-radius: 30px; }
  .funciona__pantalla { inset: 8px; border-radius: 23px; }
  .funciona__pasos { position: relative; z-index: 1; padding-top: 24px; }
  .funciona__paso {
    min-height: 0;
    margin-bottom: 46vh;
    padding: 24px 22px;
    border: 1px solid var(--pub-linea-2);
    border-radius: var(--pub-radio);
    background: rgba(11, 13, 14, .96);
  }
  .funciona__paso:first-child { padding-top: 24px; border-top: 1px solid var(--pub-linea-2); }
  .funciona__paso:last-child { margin-bottom: 8vh; }
  .funciona--guiado .funciona__paso { opacity: 1; }
}

/* ==========================================================================
   Pie: el nombre de la pista, de lado a lado
   ========================================================================== */

/* El último trazo de la página. Sin movimiento es un contorno; con él, el
   verde lo llena de izquierda a derecha al llegar al final, como la línea de
   meta que se cruza. */
.sitio-pie__gigante {
  position: relative;
  margin-bottom: clamp(12px, 2.4vw, 32px);
  font-family: var(--display);
  font-stretch: 125%;
  /* «MINIÁPOLIS» mide unas 6,6 veces su cuerpo: llena la columna de lado a lado. */
  font-size: min(calc((100vw - 2 * var(--pub-margen)) / 6.75), calc(var(--pub-ancho) / 6.75));
  font-weight: 800;
  line-height: .82;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.sitio-pie__gigante span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 246, 243, .22);
}
.sitio-pie__gigante b { display: none; }

/* ==========================================================================
   Apertura: el estado de la pista
   ========================================================================== */

/* Junto al semáforo, la verdad del momento: si la pista está abierta, hasta
   cuándo; si no, cuándo abre. Lo escribe portada.js con la tabla de horarios. */
.hero__estado { vertical-align: middle; }
.hero__semaforo { vertical-align: top; }
.hero__estado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 3.4vh, 36px) 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: var(--texto-2);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__estado::before { width: 7px; height: 7px; content: ''; border-radius: 50%; background: var(--texto-3); }
.hero__estado--abierta { color: var(--acento); }
.hero__estado--abierta::before { background: var(--acento); animation: latido 1.8s ease-in-out infinite; }

/* Cuando el rótulo no cabe junto al semáforo, va justo debajo y no a una
   distancia de párrafo: los dos son la misma señal de salida. */
@media (max-width: 560px) {
  .hero__portico { margin-bottom: 10px; }
  .hero__estado { margin-left: 0; }
}

/* ==========================================================================
   Táctil: lo que se pulsa mide al menos 44 px
   ========================================================================== */

@media (pointer: coarse) {
  .hero__acciones .enlace-flecha { min-height: 48px; }
}


/* ==========================================================================
   Movimiento
   ========================================================================== */

/* --- Nada empuja la página de lado ------------------------------------------- */

/* Lo que entra desde un costado espera fuera de la pantalla: cada sección
   recorta su desbordamiento horizontal para que la página no se pueda
   arrastrar de lado. `clip` (y no `hidden`) no crea un contenedor de
   desplazamiento, así que lo `sticky` y lo fijo siguen funcionando. */
.pagina-entrada main,
.pagina-entrada main > section,
.marquesina,
.sitio-pie { overflow-x: clip; }

/* --- Desplazamiento suave (Lenis, solo con puntero fino) -------------------- */

html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- Apertura ------------------------------------------------------------------ */

/* Antes del primer fotograma: el titular espera bajo su ventana y el resto,
   apagado. GSAP toma el relevo y lo saca; si no llega, portada-arranque.js
   retira la clase y todo se ve en su sitio. */
.portada-intro .hero__linea > span { transform: translate3d(0, 110%, 0); }
/* Hasta que empieza la cuenta atrás el semáforo no se ve en su sitio: aparece
   ya en el centro, como pórtico. */
.portada-intro:not(.portada-luces) .hero__portico { opacity: 0; }
.portada-intro .hero__kicker,
.portada-intro .hero__estado,
.portada-intro .hero__lead,
.portada-intro .hero__acciones,
.portada-intro .cifra { opacity: 0; }

/* Semáforo: las cinco luces se encienden de una en una y se apagan juntas. */
.portada-luces .hero__semaforo span { animation: luzRoja 1ms linear forwards; }
.portada-luces .hero__semaforo span:nth-child(2) { animation-delay: 200ms; }
.portada-luces .hero__semaforo span:nth-child(3) { animation-delay: 400ms; }
.portada-luces .hero__semaforo span:nth-child(4) { animation-delay: 600ms; }
.portada-luces .hero__semaforo span:nth-child(5) { animation-delay: 800ms; }
@keyframes luzRoja {
  to {
    background: var(--luz-roja);
    box-shadow: 0 0 6px 1px rgba(255, 59, 48, .9), 0 0 18px 2px rgba(255, 59, 48, .45);
  }
}

/* --- Guía de desplazamiento ---------------------------------------------------- */

/* Una línea fina con una luz que baja: la vuelta sigue hacia abajo. Sin
   movimiento no hace falta (no hay escenas que esperar) y no existe. */
.hero__guia { display: none; }
.portada-animada .hero__guia {
  position: absolute;
  right: 0;
  bottom: clamp(28px, 5vh, 56px);
  display: block;
  width: 1px;
  height: 72px;
  overflow: hidden;
  background: rgba(255, 255, 255, .26);
}
.portada-animada .hero__guia i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--acento);
  animation: guia 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes guia {
  from { transform: translateY(-100%); }
  to { transform: translateY(250%); }
}
@media (max-width: 760px) {
  .portada-animada .hero__guia { display: none; }
}

/* --- Titulares partidos (SplitText) ------------------------------------------ */

/* Cada línea es una ventana que recorta lo que sube por debajo. Se ensancha
   un poco hacia arriba y abajo para no cortar tildes ni descendentes. */
.linea-split-mask {
  padding-block: .14em .06em;
  margin-block: -.14em -.06em;
}
.letra-split,
.palabra-split,
.linea-split,
.numero-split { will-change: transform; }

/* El número del índice sube por su propia ventana, como el de un marcador, y
   la línea que lo sigue se traza después (--trazo la mueve GSAP). */
.numero-split-mask {
  padding-block: .12em;
  margin-block: -.12em;
}
.portada-animada .seccion__indice > span::after {
  transform: scaleX(var(--trazo, 1));
  transform-origin: left center;
}

/* La entradilla que se enciende palabra a palabra (escena del complejo):
   cada palabra sabe su número (--i) y la entradilla, cuánto se ha leído
   (--luz). Las aún no leídas esperan en penumbra; las leídas, enteras. */
.portada-animada .seccion__lead--iluminada .palabra-lead {
  opacity: calc(.22 + .78 * clamp(0, var(--luz, 99) - var(--i, 0), 1));
}

/* La marca verde de cada fecha se traza al llegar. */
.portada-animada .evento::before {
  transform: scaleX(var(--linea, 1));
  transform-origin: left center;
}

/* --- La mira: la telemetría fija cada caja ------------------------------------------ */

/* La monta portada-mira.js y solo existe con movimiento. Cuatro escuadras en
   las esquinas de la caja (se cierran sobre ella al fijarla) y el haz de
   lectura, que la recorre de izquierda a derecha mientras la imprime. */
.con-mira { position: relative; }
.mira {
  --mira-lado: clamp(9px, 1vw, 14px);
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.mira > i {
  position: absolute;
  width: var(--mira-lado);
  height: var(--mira-lado);
  border: 0 solid var(--acento);
  opacity: 0;
  will-change: transform, opacity;
}
.mira > i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.mira > i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.mira > i:nth-child(3) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.mira > i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
/* Aire para la mira: las escuadras se cierran sobre el borde de la caja. En
   las cajas sin relleno propio (las cifras de la apertura, los horarios, las
   ventajas, el pie y, en el teléfono, las disciplinas y las filas de la ficha)
   el texto tocaba ese borde y la mira se le montaba encima. Con movimiento,
   que es cuando hay mira, llevan un poco de aire por dentro; la animación es
   la misma. */
.portada-animada { --aire-mira: clamp(12px, 1.2vw, 16px); }
.portada-animada .cifra,
.portada-animada .cifra + .cifra { padding-inline: var(--aire-mira); padding-bottom: var(--aire-mira); }
.portada-animada .horario,
.portada-animada .ventaja { padding-inline: var(--aire-mira); }
.portada-animada .sitio-pie__marca,
.portada-animada .sitio-pie__columna { padding: var(--aire-mira); }
@media (max-width: 960px) {
  .portada-animada .ficha__fila { padding-inline: var(--aire-mira); }
}
@media (max-width: 700px) {
  .portada-animada .disciplina { padding-inline: var(--aire-mira); }
}
/* El haz va justo por detrás del borde de lo impreso, con una estela que se apaga. */
.mira__haz {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -2px;
  background: var(--acento);
  box-shadow: 0 0 12px 1px rgba(147, 210, 65, .6);
  opacity: 0;
}
.mira__haz::before {
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: clamp(36px, 14%, 160px);
  content: '';
  background: linear-gradient(90deg, rgba(147, 210, 65, 0), rgba(147, 210, 65, .16));
}
/* La mira que viaja de caja en caja: siempre entera, la escena la lleva. */
.mira--viajera {
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
.mira--viajera > i { opacity: 1; }

/* Récords: cada piloto corre hacia la meta con su barra; al cruzarla se apaga. */
.tiempo--en-carrera { isolation: isolate; }
.tiempo__carrera {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 0;
  border-right: 2px solid var(--acento);
  background: linear-gradient(90deg, rgba(147, 210, 65, 0), rgba(147, 210, 65, .13));
  pointer-events: none;
}

/* Tu pase: el borde del panel se traza como una vuelta antes de abrirse. */
.panel-trazo {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.panel-trazo rect {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.5;
}

/* Las fechas: la cifra llega en contorno y se rellena al fijarse la tarjeta. */
.portada-animada .evento__fecha b {
  -webkit-text-stroke: 1px var(--texto);
  color: color-mix(in srgb, var(--texto) calc(var(--relleno, 1) * 100%), transparent);
}

/* --- Marquesina ------------------------------------------------------------------ */

.marquesina {
  position: relative;
  display: grid;
  gap: clamp(4px, 1vw, 14px);
  padding-block: clamp(40px, 7vw, 96px);
  overflow: hidden;
  background: var(--fondo);
  user-select: none;
}
.marquesina__fila {
  /* El hueco final cierra el bucle: con él, media fila mide justo un texto. */
  --hueco: clamp(20px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: var(--hueco);
  width: max-content;
  padding-right: var(--hueco);
  font-family: var(--display);
  font-stretch: 125%;
  font-size: clamp(2.6rem, 8vw, 7.6rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
.marquesina__fila--llena { color: var(--texto); }
.marquesina__fila--hueca {
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 246, 243, .38);
}
/* Separador: una banderita a cuadros. */
.marquesina__bandera {
  flex: none;
  width: .42em;
  height: .42em;
  background: repeating-conic-gradient(var(--acento) 0 25%, transparent 0 50%) 0 0 / 50% 50%;
}
.marquesina__fila--hueca .marquesina__bandera {
  background: repeating-conic-gradient(rgba(244, 246, 243, .38) 0 25%, transparent 0 50%) 0 0 / 50% 50%;
}

/* --- Complejo: el escenario de los cinco sectores --------------------------------- */

/* En pantalla ancha, con movimiento, las cinco disciplinas comparten un
   escenario: cada una ocupa la pantalla en su turno, con su número enorme de
   contorno, su titular grande y su dibujo trazándose. Debajo, el tablero de
   sectores se llena con la vuelta y la mira corre por él. La clase la pone
   portada-escenas.js; sin ella, las cinco se leen en fila. */
.portada-animada .disciplina__sector {
  width: 100%;
  will-change: transform;
}
.disciplinas--vuelta .disciplinas { grid-template-columns: minmax(0, 1fr); }
.disciplinas--vuelta .disciplina {
  grid-area: 1 / 1;
  padding: 0;
  border: 0;
}
.disciplinas--vuelta .disciplina__sector { display: none; }
.disciplinas--vuelta .disciplina__lamina {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    'num dibujo'
    'titulo dibujo'
    'texto dibujo';
  grid-template-rows: 1fr auto auto;
  column-gap: clamp(40px, 6vw, 112px);
  align-items: end;
  min-height: clamp(300px, 54vh, 540px);
  will-change: transform, opacity;
}
.disciplinas--vuelta .disciplina__num {
  grid-area: num;
  align-self: end;
  margin: 0 0 clamp(8px, 1.4vh, 18px) -.04em;
  color: transparent;
  font-size: clamp(5.6rem, 12vw, 11.5rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: .8;
  letter-spacing: 0;
  -webkit-text-stroke: 1.5px rgba(147, 210, 65, .72);
}
.disciplinas--vuelta .disciplina h3 {
  grid-area: titulo;
  margin-bottom: 16px;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-stretch: 120%;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: .98;
}
.disciplinas--vuelta .disciplina p {
  grid-area: texto;
  max-width: 38ch;
  font-size: clamp(1rem, .4vw + .9rem, 1.15rem);
  line-height: 1.6;
}
.disciplinas--vuelta .disciplina__dibujo {
  grid-area: dibujo;
  align-self: center;
  justify-self: end;
  width: min(100%, 620px);
  max-width: none;
  max-height: 54vh;
  margin: 0;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--pub-linea);
  border-radius: var(--pub-radio);
  /* La lámina de un plano: la misma retícula fina que el plano del circuito. */
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--pub-tarjeta);
  box-shadow: var(--filo);
}
.disciplinas--vuelta .trazo { stroke-width: .95; }
.disciplinas--vuelta .trazo--asfalto { stroke-width: 14; }
.disciplinas--vuelta .trazo--calzada { stroke-width: 20; }

/* El tablero de sectores, bajo el escenario: cinco tramos con su número y su
   nombre que se llenan en orden. La línea de la vuelta corre por encima. */
.disciplinas__indice { display: none; }
.disciplinas--vuelta .disciplinas__indice {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  margin: clamp(28px, 4vh, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.disciplinas__indice li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 300ms ease-out;
}
.disciplinas__indice li::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  content: '';
  background: var(--pub-linea-2);
}
.disciplinas__indice b { color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.disciplinas__indice span { overflow: hidden; text-overflow: ellipsis; }
.disciplinas__indice i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.disciplinas__indice li.activo { color: var(--texto); }
.disciplinas__indice li.activo b { color: var(--acento); }
.disciplinas--vuelta .disciplinas__vuelta { display: none; }

/* --- La vuelta: el avance contado por sectores ------------------------------------- */

/* Lo monta portada-vuelta.js y es decorativo: la navegación ya dice dónde se
   está. Es una regla vertical en el margen izquierdo, con el número del
   sector, que rueda, y su nombre; solo en pantallas anchas, que tienen
   margen. En las estrechas no hay avance de lectura. */
@media (max-width: 899px), (max-height: 559px) {
  .vuelta { display: none; }
}

.portada-animada .vuelta {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
  transition: opacity 600ms var(--pub-curva), transform 600ms var(--pub-curva);
}
.portada-animada .vuelta.vuelta--en-pista { opacity: 1; }
.vuelta__numero,
.vuelta__nombre { display: none; }
.vuelta__sectores {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  height: 2px;
}
.vuelta__sectores i {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  transition: background-color 300ms ease-out;
}
.vuelta__sectores b {
  position: absolute;
  inset: 0;
  background: var(--acento);
  transform: scaleX(var(--llenado, 0));
  transform-origin: left center;
  will-change: transform;
}

@media (min-width: 900px) and (min-height: 560px) {
  .portada-animada .vuelta {
    top: calc(50% - 150px);
    right: auto;
    left: max(12px, calc((100vw - min(var(--pub-ancho), 100vw - 2 * var(--pub-margen))) / 2 - 46px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 24px;
    /* Sobre una foto clara el rótulo se sigue leyendo. */
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7));
    transform: translateX(-10px);
  }
  .portada-animada .vuelta.vuelta--en-pista { transform: none; }
  .vuelta__numero {
    display: block;
    height: 1.25em;
    overflow: hidden;
    color: var(--acento);
    font-family: var(--display);
    font-stretch: 115%;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .vuelta__pila {
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
  }
  .vuelta__pila > span { display: flex; align-items: center; justify-content: center; height: 1.25em; }
  /* La meta: el número se convierte en la bandera a cuadros. */
  .vuelta__bandera {
    display: block;
    width: 1em;
    height: 1em;
    background: repeating-conic-gradient(var(--texto) 0 25%, transparent 0 50%) 0 0 / 50% 50%;
  }
  .vuelta__sectores {
    grid-auto-rows: 18px;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: 5px;
    width: 2px;
    height: auto;
  }
  .vuelta__sectores i.activo { background: rgba(255, 255, 255, .28); }
  .vuelta__sectores b {
    transform: scaleY(var(--llenado, 0));
    transform-origin: center top;
  }
  .vuelta__nombre {
    display: block;
    color: var(--texto-2);
    font-family: var(--display);
    font-stretch: 115%;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
  }
  .vuelta__nombre span {
    display: inline-block;
    will-change: transform, opacity;
  }
  .vuelta--meta .vuelta__nombre { color: var(--texto); }
}

/* La meta: al cruzarla, el pie da el tiempo de la vuelta junto a «Volver
   arriba». Rótulo en versales como el resto del pie y la cifra en verde,
   como en el tablero de mejores tiempos. Lo escribe portada-vuelta.js. */
.sitio-vuelta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sitio-vuelta b {
  color: var(--acento);
  font-size: 1.32em;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Ficha técnica guiada por el desplazamiento ---------------------------------- */

.portada-animada .plano__auto {
  display: inline;
  filter: drop-shadow(0 0 6px rgba(147, 210, 65, .9));
  will-change: transform;
}
.ficha--guiada .ficha__fila {
  position: relative;
  opacity: .34;
  transition: opacity 320ms ease-out;
}
.ficha--guiada .ficha__fila::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--pub-curva);
}
.ficha--guiada .ficha__fila.activa,
.ficha--guiada .ficha__fila.vista { opacity: 1; }
.ficha--guiada .ficha__fila.activa::before { transform: scaleX(1); }
/* Cada fila activa enciende su recuadro entero: la línea de arriba y la de
   abajo, igual en todas. */
.ficha--guiada .ficha__fila::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--pub-curva) 90ms;
}
.ficha--guiada .ficha__fila.activa::after { transform: scaleX(1); }
.ficha--guiada .ficha__fila.activa strong { color: var(--acento); }
.ficha--guiada .ficha__fila strong { transition: color 320ms ease-out; }

/* --- Galería: tira horizontal fija ------------------------------------------------- */

.galeria-fija {
  display: grid;
  /* La columna mide la pantalla, no la tira entera: la tira desborda y corre. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  min-height: 100vh;
  padding-block: calc(var(--pub-cabecera) + clamp(16px, 3vh, 40px)) clamp(24px, 4vh, 48px);
  overflow: hidden;
}
.galeria-fija .seccion__cabeza { margin-bottom: clamp(20px, 4vh, 48px); }
.galeria-fija .galeria__controles { display: none; }
.galeria-fija .galeria {
  /* Referencia de las medidas de cada foto (offsetLeft) para la escena. */
  position: relative;
  align-items: flex-start;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
.galeria-fija .galeria__foto img {
  height: clamp(260px, 52vh, 580px);
  will-change: transform;
}
.galeria-fija .galeria__avance {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(16px, 3vh, 32px);
  color: var(--texto-3);
  font-family: var(--display);
  font-stretch: 115%;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
}
.galeria__contador b { color: var(--acento); font-weight: 700; }
/* En la tira fija el contador crece y el pie de la foto en foco se lee en
   grande a su lado, como un subtítulo (lo escribe portada-escenas.js). Los
   pies de cada foto siguen en su figura para quien no la ve. */
.galeria__leyenda { display: none; }
.galeria-fija .galeria__avance {
  align-items: flex-end;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(20px, 3.6vh, 40px);
}
.galeria-fija .galeria__contador {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 10px;
}
.galeria-fija .galeria__contador b {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: .8;
  letter-spacing: 0;
}
.galeria-fija .galeria__leyenda {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-block: .2em;
}
.galeria-fija .galeria__leyenda span {
  display: block;
  overflow: hidden;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: clamp(1.05rem, 1.35vw, 1.38rem);
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  will-change: transform, opacity;
}
.galeria-fija .galeria__barra { flex: 0 0 clamp(140px, 18vw, 280px); align-self: center; }
.portada-animada .galeria-fija .galeria__foto figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.galeria__barra {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--pub-linea-2);
}
.galeria__barra i {
  position: absolute;
  inset: 0;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* --- Tienda: brillo que sigue al puntero en la tarjeta inclinada ------------------ */

.producto { position: relative; transform-style: preserve-3d; }
.producto::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  content: '';
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--brillo-x, 50%) var(--brillo-y, 30%), rgba(255, 255, 255, .16), transparent 55%);
  transition: opacity 220ms ease-out;
}
.producto:hover::after { opacity: 1; }

/* --- Botones con imán: se mueven con `translate`, que no pisa el `transform`
   del hover ni el del clic. ---------------------------------------------------- */

.hero__acciones .boton,
.hero__acciones .enlace-flecha,
.sitio-accion,
.agenda__accion .boton,
.pronto__texto .boton,
.seccion__cabeza .boton,
.sitio-arriba { translate: var(--mx, 0px) var(--my, 0px); }

/* --- Cursor propio (puntero fino y movimiento permitido) --------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}
.cursor__punto,
.cursor__aro {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.cursor__punto {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--acento);
  box-shadow: 0 0 5px var(--acento);
  transition: transform 240ms var(--pub-curva), background-color 240ms ease-out, box-shadow 240ms ease-out;
}
.cursor__aro {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(226, 240, 231, .45);
  box-shadow: inset 0 0 0 1px rgba(147, 210, 65, .12), 0 0 8px rgba(147, 210, 65, .08);
  transition: width 240ms var(--pub-curva), height 240ms var(--pub-curva), margin 240ms var(--pub-curva), background-color 240ms ease-out, border-color 240ms ease-out, opacity 200ms ease-out, box-shadow 240ms ease-out;
}
.cursor__aro::before,
.cursor__aro::after {
  content: '';
  position: absolute;
  pointer-events: none;
  transition: background-color 240ms ease-out;
}
/* Mira táctica: retícula horizontal */
.cursor__aro::before {
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 1px;
  left: -7px;
  right: -7px;
  background: linear-gradient(
    90deg,
    var(--acento) 0,
    var(--acento) 9px,
    transparent 9px,
    transparent calc(100% - 9px),
    var(--acento) calc(100% - 9px),
    var(--acento) 100%
  );
}
/* Mira táctica: retícula vertical */
.cursor__aro::after {
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  top: -7px;
  bottom: -7px;
  background: linear-gradient(
    180deg,
    var(--acento) 0,
    var(--acento) 9px,
    transparent 9px,
    transparent calc(100% - 9px),
    var(--acento) calc(100% - 9px),
    var(--acento) 100%
  );
}
.cursor--enlace .cursor__aro {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: var(--acento);
  background: rgba(147, 210, 65, .09);
  box-shadow: 0 0 14px rgba(147, 210, 65, .25), inset 0 0 8px rgba(147, 210, 65, .1);
}
/* Sobre un objetivo el centro no se apaga: se enciende y fija la mira. */
.cursor--enlace .cursor__punto {
  transform: scale(1.5);
  background: var(--texto);
  box-shadow: 0 0 6px var(--acento);
}
.cursor--pulsado .cursor__aro {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-color: var(--acento);
  box-shadow: 0 0 10px rgba(147, 210, 65, .4), inset 0 0 4px rgba(147, 210, 65, .25);
}
.cursor--oculto .cursor__punto,
.cursor--oculto .cursor__aro { opacity: 0; }
html.cursor-propio,
html.cursor-propio a,
html.cursor-propio button,
html.cursor-propio [role="tab"],
html.cursor-propio label { cursor: none; }
html.cursor-propio input,
html.cursor-propio textarea,
html.cursor-propio select { cursor: text; }

/* --- Números fantasma: el número de cada sector, enorme y de contorno ---------- */

/* Detrás de cada encabezado, el número de su sector en contorno de un píxel:
   la página se orienta de un vistazo, como los dorsales en la nave. Lo pone
   portada-escenas.js y se desplaza un poco más despacio que la página. */
.pagina-entrada .seccion,
.pagina-entrada .acceso { isolation: isolate; }
.seccion__fantasma {
  position: absolute;
  top: calc(var(--pub-seccion) * .42);
  right: var(--pub-margen);
  z-index: -1;
  color: transparent;
  font-family: var(--display);
  font-stretch: 125%;
  font-size: clamp(7rem, 24vw, 23rem);
  font-weight: 800;
  line-height: .8;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-stroke: 1px rgba(244, 246, 243, .075);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* --- La vuelta: el cronómetro en marcha, con el parcial de cada sector ----------- */

.vuelta__crono { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  .vuelta__crono {
    display: block;
    color: var(--texto-3);
    font-family: var(--mono);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .vuelta--meta .vuelta__crono,
  .vuelta__crono--parcial { color: var(--acento); }
}

/* --- Cómo funciona: el haz del lector recorre el QR ------------------------------- */

/* En pantalla ancha, un riel de un píxel junto a los pasos se llena de verde
   mientras se leen (--avance lo mueve GSAP), como el tramo de un sector. */
@media (min-width: 901px) {
  .portada-animada .funciona__pasos { position: relative; padding-left: clamp(24px, 3vw, 48px); }
  .portada-animada .funciona__pasos::before,
  .portada-animada .funciona__pasos::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    content: '';
    background: var(--pub-linea-2);
  }
  .portada-animada .funciona__pasos::after {
    width: 2px;
    background: var(--acento);
    transform: scaleY(var(--avance, 0));
    transform-origin: center top;
  }
}

.portada-animada .funciona__haz {
  display: inline;
  opacity: .75;
  animation: haz 2.4s cubic-bezier(.65, 0, .35, 1) infinite alternate;
}
@keyframes haz {
  from { transform: translateY(0); }
  to { transform: translateY(25.8px); }
}
.funciona__pantalla > * { will-change: transform, opacity; }

/* --- Pie: la línea de meta llena el nombre ------------------------------------------ */

.portada-animada .sitio-pie__gigante b {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--acento);
  font-weight: inherit;
  clip-path: inset(-40% 100% -10% 0);
  will-change: clip-path;
}

@media (prefers-reduced-motion: reduce) {
  .hero__semaforo span,
  .producto,
  .producto em::after,
  .galeria__boton { transition: none; }
  .horario[data-estado="abierto"] .horario__estado::before { animation: none; }
  .hero__guia i { animation: none; }
  .hero__estado--abierta::before,
  .funciona__haz { animation: none; }
  .funciona__paso { transition: none; }
  .cursor { display: none; }
}

/* El mejor tiempo destella una vez cuando el cronómetro se detiene. */
.tiempo--destello { animation: destello 1.1s ease-out 1; }
@keyframes destello {
  0% { background-color: rgba(147, 210, 65, .34); }
  100% { background-color: transparent; }
}