/* =========================================================
   SEDRO 10 — PÁGINA DE INICIO
   1. Portada + rodada (pista en perspectiva)
   2. Formas de jugar
   3. Café y bar
   4. Season 01
   5. Aprender a jugar
   6. Visita
   7. Cierre
   ========================================================= */


/* ---------- 1. Portada + rodada ---------- */
.rodada {
  position: relative;
  background: var(--negro);
  /* Tablas de maple de la pista (se reutilizan en pistas vecinas) */
  --tablas:
    repeating-linear-gradient(90deg, rgba(70, 36, 12, 0.24) 0 1px, transparent 1px calc(100% / 39)),
    linear-gradient(90deg, #b67944 0%, #d9a56d 12%, #cd935b 30%, #e0b07a 48%, #cf985f 66%, #dcab75 84%, #b67944 100%);
}

.rodada__fijo {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* Escenario 3D */
.escena {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100svh;
  perspective: 1100px;
  perspective-origin: 64% 12%;
  pointer-events: none;
  overflow: hidden;
}
/* Sin video en la página, la pista se ve desde el inicio */
.escena:not(:has(.escena__video)) .pista { --pista-visible: 1; }

/* Con "movimiento reducido" no hay rodada con scroll: se muestra la pista
   dibujada (lleva la bola y los pinos de la historia) y el video se retira */
@media (prefers-reduced-motion: reduce) {
  .pista { --pista-visible: 1; }
  .escena__video { display: none; }
}

/* Video del local: ocupa el primer vistazo y se funde al hacer scroll */
.escena__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--video-visible, 1);
}
.escena__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.escena__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 10, 9, 0.92) 0%, rgba(11, 10, 9, 0.55) 48%, rgba(11, 10, 9, 0.25) 100%),
    linear-gradient(0deg, rgba(11, 10, 9, 0.85), transparent 45%);
}

.escena__luz {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 30% at 64% 14%, rgba(255, 206, 150, 0.30), transparent 70%),
    radial-gradient(70% 50% at 64% 108%, rgba(214, 100, 20, 0.14), transparent 70%);
}

.pista {
  /* Mientras el video ocupa el primer vistazo, la pista dibujada espera.
     Nace oculta desde el primer pintado para que no parpadee sobre el video. */
  opacity: var(--pista-visible, 0);
  transition: opacity 120ms linear;
  --w: clamp(250px, 29vw, 430px);
  position: absolute;
  left: 64%;
  bottom: -4svh;
  width: var(--w);
  height: calc(var(--w) * 5.4);
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 100%;
  transform: rotateX(75deg);
  transform-style: preserve-3d;
}

/* Pistas vecinas, en penumbra */
.pista::before,
.pista::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: var(--w);
  background: var(--tablas);
  filter: brightness(0.26) saturate(0.7);
}
.pista::before { right: calc(100% + var(--w) * 0.27); }
.pista::after  { left: calc(100% + var(--w) * 0.27); }

.pista__tablas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 12, 6, 0.1) 0%, rgba(20, 12, 6, 0.55) 22%, rgba(20, 12, 6, 0.25) 55%, rgba(255, 232, 196, 0.16) 88%, rgba(255, 236, 205, 0.3) 100%),
    var(--tablas);
}

.pista__canal {
  position: absolute;
  top: 0; bottom: 0;
  width: calc(var(--w) * 0.12);
  background: linear-gradient(90deg, #0f0c0a, #3b3129 50%, #0f0c0a);
}
.pista__canal--izq { right: 100%; }
.pista__canal--der { left: 100%; }

.pista__flechas {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: calc(var(--w) * 1.35);
  height: calc(var(--w) * 0.42);
  fill: #5c3519;
  opacity: 0.85;
}

.pista__falta {
  position: absolute;
  left: calc(var(--w) * -0.12);
  right: calc(var(--w) * -0.12);
  bottom: calc(var(--w) * 0.3);
  height: calc(var(--w) * 0.018);
  background: #1a120c;
}

/* Unidad de máscara sobre los pinos */
.mascara {
  position: absolute;
  left: calc(var(--w) * -0.27);
  width: calc(var(--w) * 1.54);
  top: calc(var(--w) * -0.5);
  height: calc(var(--w) * 0.5);
  transform-origin: 50% 100%;
  transform: rotateX(-75deg) translateY(calc(var(--w) * -0.44));
  display: grid;
  place-items: center;
  background: linear-gradient(#211a15, #0c0a08);
  border-top: calc(var(--w) * 0.012) solid var(--naranja);
  border-bottom: calc(var(--w) * 0.008) solid var(--naranja);
}
.mascara span {
  font-stretch: 125%;
  font-weight: 850;
  text-transform: uppercase;
  font-size: calc(var(--w) * 0.13);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--crema);
}

/* Pinos: 10 en triángulo */
.pinos {
  position: absolute;
  left: 50%;
  top: calc(var(--w) * 0.22);
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.pino {
  --pw: calc(var(--w) * 0.115);
  --ph: calc(var(--pw) * 3);
  position: absolute;
  width: var(--pw);
  height: var(--ph);
  left: calc(var(--x) * var(--w) * 0.289 - var(--pw) / 2);
  top: calc(var(--y) * var(--w) * 0.25 - var(--ph));
  transform-origin: 50% 100%;
  transform: rotateX(-75deg);
  transition: transform 0.75s var(--salida), opacity 0.75s ease;
}
.pino svg { width: 100%; height: 100%; }

.rodada--strike .pino {
  transform:
    translate(calc(var(--dx) * var(--w) / 175), calc(var(--dy) * var(--w) / 175))
    rotate(calc(var(--rz) * 1deg))
    rotateX(-10deg);
  opacity: 0.9;
}

/* Bola */
.bola,
.bola-sombra {
  --b: calc(var(--w) * 0.205);
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * 0.36);
  width: var(--b);
  height: var(--b);
  margin-left: calc(var(--b) / -2);
  will-change: transform;
}
.bola {
  transform-origin: 50% 100%;
  transform: rotateX(-75deg);
}
.bola-sombra {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  transform: translateY(calc(var(--b) * -0.1));
}
.bola__cuerpo {
  --giro: 0deg;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 236, 226, 0.9) 0 3%, rgba(255, 190, 176, 0.3) 8%, transparent 20%),
    radial-gradient(circle at 72% 78%, rgba(0, 0, 0, 0.6), transparent 58%),
    conic-gradient(from var(--giro) at 46% 52%, #8e0c0c, #cc2a1d, #6c0707, #b8160f, #7a0a0a, #d3361f, #8e0c0c);
  box-shadow:
    inset -8px -12px 22px rgba(0, 0, 0, 0.55),
    inset 5px 7px 16px rgba(255, 130, 100, 0.2);
}
.bola__agujeros {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.bola__agujeros span {
  position: absolute;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 60%, #050101 52%, #2d0505 76%, rgba(90, 14, 14, 0.7));
}
.bola__agujeros span:nth-child(1) { left: 36%; top: 30%; }
.bola__agujeros span:nth-child(2) { left: 54%; top: 34%; }
.bola__agujeros span:nth-child(3) { left: 45%; top: 50%; }

/* Capa de textos */
.rodada__capa {
  position: relative;
  z-index: 2;
}

.portada {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35rem;
  max-width: 42rem;
  padding-block: calc(var(--nav-alto) + 2rem) 3rem;
}
.portada__escudo { width: clamp(108px, 11vw, 150px); }
.portada h1 { font-size: clamp(2.5rem, 5vw, 4.6rem); }
.sin-mayus { text-transform: none; }

/* En la portada el escudo grande reemplaza al del menú hasta que se baja */
body[data-pagina="inicio"] .nav__marca { transition: opacity var(--medio) ease, visibility var(--medio); }
body[data-pagina="inicio"] .nav:not(.nav--solida):not(.nav--abierta) .nav__marca { opacity: 0; visibility: hidden; }
.portada .lead { color: var(--texto); max-width: 30em; }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.latidos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-4);
  padding-block: var(--e-6);
  border-top: 1px solid var(--linea);
}
.latido { display: grid; gap: 0.75rem; align-content: start; max-width: 30rem; }
.latido__cuando {
  font-stretch: 125%;
  font-weight: 850;
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  line-height: 0.9;
  color: var(--naranja-claro);
  font-variant-numeric: tabular-nums;
}
.latido p:last-child { color: var(--texto-suave); font-size: 1.15rem; }

.final-rodada {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  padding-block: var(--e-5) var(--e-7);
}
.final-rodada__strike {
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: 0.3em;
  color: var(--naranja-claro);
}

/* --- Rodada con movimiento (la activa home.js) --- */
.rodada--viva { height: 380vh; }
.rodada--viva .rodada__fijo {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.rodada--viva .rodada__capa {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  padding-block: var(--nav-alto) 2rem;
}
.rodada--viva .rodada__capa > *,
.rodada--viva .latidos > * { grid-area: 1 / 1; }
.rodada--viva .latidos {
  display: grid;
  padding: 0;
  border: 0;
}
.rodada--viva .portada { min-height: 0; padding: 0; }
.rodada--viva .final-rodada { padding: 0; }

.rodada--viva [data-latido] {
  opacity: var(--o, 0);
  transform: translateY(calc((1 - var(--o, 0)) * 28px));
  max-width: 34rem;
}
.rodada--viva [data-latido="portada"] { --o: 1; max-width: 42rem; }
.rodada--viva [data-oculto] { visibility: hidden; }
/* Los textos de la historia van apilados encima de la portada; aunque estén
   transparentes, no deben robarle los clics a los botones de abajo */
.rodada--viva .latidos { pointer-events: none; }

.rodada--viva .final-rodada__strike {
  font-size: clamp(3.5rem, 11vw, 9rem);
  letter-spacing: -0.01em;
  line-height: 0.85;
  color: var(--crema);
  -webkit-text-stroke: 0;
  opacity: 0.12;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .latidos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* Celular: la pista queda arriba y el texto abajo, sin cruzarse con los pinos */
  .escena { perspective-origin: 50% 12%; perspective: 900px; }
  .escena__luz {
    z-index: 1;
    background:
      radial-gradient(60% 22% at 50% 8%, rgba(255, 206, 150, 0.28), transparent 70%),
      linear-gradient(to top, var(--negro) 0 36%, rgba(11, 10, 9, 0.88) 54%, transparent 72%);
  }
  .pista { --w: 46vw; left: 50%; bottom: 38svh; }
  .escena__video::after {
    background:
      linear-gradient(0deg, rgba(11, 10, 9, 0.95) 0 32%, rgba(11, 10, 9, 0.6) 55%, rgba(11, 10, 9, 0.25) 100%);
  }

  .portada { justify-content: flex-end; gap: 0.9rem; padding-bottom: 2rem; }
  .portada h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .portada .lead { font-size: 1.05rem; line-height: 1.45; }
  /* La barra inferior ya tiene "Book a lane" y "Call"; el escudo va en el menú */
  .portada__escudo,
  .portada__acciones { display: none; }
  /* Excepción: el botón del juego sí se ve en celular (los demás de esa fila siguen ocultos) */
  .portada__acciones:has(.portada__juego) { display: flex; }
  .portada__acciones > :not(.portada__juego) { display: none; }
  body[data-pagina="inicio"] .nav:not(.nav--solida):not(.nav--abierta) .nav__marca { opacity: 1; visibility: visible; }

  .latidos { grid-template-columns: 1fr; gap: var(--e-4); }

  .rodada--viva .rodada__capa { align-items: end; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  /* Mientras se vea el aviso de versión preliminar, el texto sube para no quedar tapado */
  body:has(.aviso-demo) .rodada--viva .rodada__capa { padding-bottom: calc(168px + env(safe-area-inset-bottom)); }
}


/* ---------- 1b. La sala: tira de fotos ----------
   La tira se desplaza a lo ancho (dedo, rueda, teclado o flechas).
   Alto fijo y ancho automático: así conviven fotos horizontales y
   verticales sin recortarlas ni dejar huecos. Esquina cortada en
   diagonal, igual que los botones y el escudo. */
.sala {
  padding-block: var(--e-6);
  background: var(--carbon);
  border-block: 1px solid var(--linea);
  --alto-foto: clamp(240px, 46vh, 460px);
}

.sala__cabeza {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

/* Flechas: las enciende home.js; sin JS no aparecen y la tira igual se arrastra */
.sala__mandos { display: flex; gap: 0.6rem; flex: none; }
.sala__flecha {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--linea-fuerte);
  background: transparent;
  color: var(--crema);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
  transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
.sala__flecha svg { width: 20px; height: 20px; }
.sala__flecha:hover:not([disabled]) { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.sala__flecha[disabled] { opacity: 0.3; cursor: not-allowed; }

/* Lleva "ul" delante para ganarle al ul[role="list"] de base.css, que pone padding 0 */
ul.tira {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
  /* El padding de la derecha lo ignoran algunos navegadores al final del
     scroll; por eso el aire final va como margen en la última foto */
  padding: 0 0 1.25rem var(--margen);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margen);
  scrollbar-color: var(--linea-fuerte) transparent;
  scrollbar-width: thin;
}
/* La última foto termina alineada con el margen de la página */
.tira > :last-child { margin-right: var(--margen); }

.tira__foto {
  flex: none;
  scroll-snap-align: start;
}
.tira__foto figure { display: grid; gap: 0.75rem; }
.tira__foto img {
  height: var(--alto-foto);
  width: auto;
  max-width: none;
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
  background: var(--carbon-2);
}
.tira__foto figcaption {
  font-stretch: 82%;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  max-width: 24ch;
}

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

@media (max-width: 760px) {
  .sala__cabeza { display: block; }
  /* En celular se arrastra con el dedo: las flechas sobran */
  .sala__mandos { display: none; }
}


/* ---------- 2. Formas de jugar ---------- */
.jugar__cabeza {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--e-5);
  align-items: end;
  margin-bottom: var(--e-6);
}

.ofertas { border-top: 1px solid var(--linea-fuerte); }

.oferta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 0.75fr) auto;
  gap: var(--e-4);
  align-items: center;
  padding-block: clamp(1.75rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  isolation: isolate;
}
.oferta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(168, 15, 15, 0.22));
  opacity: 0;
  transition: opacity var(--medio) ease;
}
.oferta:hover::before { opacity: 1; }

.oferta__nombre {
  font-stretch: 125%;
  font-weight: 850;
  text-transform: uppercase;
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  line-height: 0.95;
}
.oferta__texto { color: var(--texto-suave); }
.oferta__dato { display: grid; gap: 0.15rem; }
.oferta__dato .num {
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--crema);
}
.oferta__dato span:last-child { color: var(--texto-suave); font-size: 1rem; }

.oferta__flecha {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  color: var(--crema);
  background: var(--carbon-3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color var(--rapido) ease;
}
.oferta:hover .oferta__flecha { background: var(--rojo); }
.oferta:hover .flecha { transform: translateX(3px); }

@media (max-width: 900px) {
  .jugar__cabeza { grid-template-columns: 1fr; gap: var(--e-3); }
  .oferta { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1.25rem; }
  .oferta__nombre, .oferta__texto, .oferta__dato { grid-column: 1; }
  .oferta__flecha { grid-column: 2; grid-row: 1 / span 3; }
}


/* ---------- 3. Café y bar ---------- */
.barra { background: var(--carbon); padding-bottom: var(--e-7); }

/* Franja de madera: la barra y las mesas son las pistas anteriores */
.barra__madera {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--e-6);
  padding-block: clamp(4rem, 10vw, 7.5rem);
  color: var(--tinta);
  background:
    linear-gradient(180deg, rgba(40, 20, 5, 0.38), transparent 18%, transparent 80%, rgba(40, 20, 5, 0.5)),
    repeating-linear-gradient(180deg, rgba(74, 38, 12, 0.28) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(255, 240, 215, 0.09) 20px 36px, transparent 36px 58px),
    linear-gradient(90deg, #c98d55, #e2b580 30%, #d49c63 58%, #e6bd8c 84%, #c98d55);
}
.barra__madera-interior { position: relative; z-index: 1; display: grid; gap: 1.5rem; }
.barra__madera h2 { max-width: 11ch; }
.barra__madera-texto {
  max-width: 32em;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
}
.barra__flechas {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 7vw, 8rem);
  width: auto;
  height: 76%;
  transform: translateY(-50%);
  fill: #5c3519;
  opacity: 0.85;
}
@media (max-width: 900px) {
  .barra__madera { padding-bottom: 8.5rem; }
  /* En celular las flechas apuntan hacia arriba, como en la pista */
  .barra__flechas { top: auto; bottom: -3.25rem; left: 50%; right: auto; height: 14rem; transform: translateX(-50%) rotate(-90deg); transform-origin: 50% 50%; opacity: 0.75; }
}
.barra__grilla {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.barra__foto img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.barra__texto { display: grid; gap: 1.5rem; }
.barra__datos { border-top: 1px solid var(--linea); }
.barra__datos div {
  display: grid;
  grid-template-columns: 8.75rem 1fr;
  gap: 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--linea);
}
.barra__datos dt {
  font-stretch: 90%;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--naranja-claro);
}
.barra__datos dd { margin: 0; }
.barra__texto .enlace { justify-self: start; }
.barra__detalle { margin-top: 0.5rem; }
.barra__detalle img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.barra__detalle figcaption {
  margin-top: 0.6rem;
  font-size: 1rem;
  color: var(--texto-suave);
}

@media (max-width: 900px) {
  .barra__grilla { grid-template-columns: 1fr; }
}


/* ---------- 4. Season 01 ---------- */
.temporada {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 85% 50%, rgba(168, 15, 15, 0.18), transparent 70%),
    var(--negro);
}
.temporada__grilla {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.temporada__texto { display: grid; gap: 1.6rem; justify-items: start; }
.temporada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.ranking {
  padding: 1.25rem 1.5rem 0.75rem;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--naranja);
}
.ranking__cabeza,
.ranking__filas li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 1rem;
}
.ranking__cabeza {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linea-fuerte);
  font-stretch: 82%;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.ranking__cabeza span:last-child,
.ranking__filas .num { text-align: right; }
.ranking__filas li {
  min-height: 3.6rem;
  border-bottom: 1px solid var(--linea);
  font-weight: 700;
  font-size: 1.15rem;
}
.ranking__filas li:last-child { border-bottom: 0; }
.ranking__pos {
  font-stretch: 125%;
  font-weight: 850;
  font-size: 1.4rem;
  color: var(--naranja-claro);
}
.ranking__filas .num { color: var(--texto-suave); }
.ranking__vacio {
  height: 2px;
  margin-right: 1.5rem;
  background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 10px, transparent 10px 17px);
}
.ranking__tu { color: var(--crema); display: inline-flex; align-items: center; gap: 0.2rem; }
.ranking__tu i {
  width: 2px; height: 1.2em;
  background: var(--naranja-claro);
  animation: parpadeo 1.1s steps(2, start) infinite;
}
.ranking__salto { min-height: 2.6rem !important; color: var(--texto-suave); font-weight: 500 !important; font-size: 0.975rem !important; }
@keyframes parpadeo { to { visibility: hidden; } }

@media (max-width: 900px) {
  .temporada__grilla { grid-template-columns: 1fr; }
}


/* ---------- 5. Aprender a jugar ---------- */
.aprender { background: var(--crema); color: var(--tinta); }
.aprender .lead { color: var(--tinta-2); }
.aprender__grilla {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.aprender__texto { display: grid; gap: 1.6rem; justify-items: start; }
.consejos li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.35rem 1.25rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--linea-tinta);
}
.consejos li:last-child { border-bottom: 1px solid var(--linea-tinta); }
.consejos__flecha { grid-row: 1 / span 2; width: 16px; height: 40px; margin-top: 0.2rem; color: var(--rojo); }
.consejos h3 { font-size: 1.4rem; font-weight: 750; font-stretch: 105%; line-height: 1.2; }
.consejos p { color: var(--tinta-2); }

@media (max-width: 900px) {
  .aprender__grilla { grid-template-columns: 1fr; }
}


/* ---------- 6. Visita ---------- */
.visita { background: var(--carbon); }
.visita__grilla {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: stretch;
}
.visita__info { display: grid; gap: 1.4rem; align-content: start; }

.horario { width: 100%; border-collapse: collapse; }
.horario th,
.horario td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
  font-weight: 500;
  text-align: left;
}
.horario td { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.horario tr[data-hoy] th,
.horario tr[data-hoy] td { color: var(--crema); font-weight: 750; }
.horario__hoy {
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--naranja);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.visita__direccion { font-size: 1.25rem; font-weight: 600; line-height: 1.45; }
.visita__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.visita__mapa { min-height: 420px; }
.visita__mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  filter: grayscale(0.35) invert(0.92) hue-rotate(180deg) contrast(0.92);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}

@media (max-width: 900px) {
  .visita__grilla { grid-template-columns: 1fr; }
  .visita__mapa, .visita__mapa iframe { min-height: 320px; }
}


/* ---------- 7. Cierre ---------- */
.cierre {
  padding-block: var(--e-7);
  color: #fff;
  text-align: center;
  background: radial-gradient(90% 100% at 50% 0%, #bb1a15, var(--rojo) 45%, var(--rojo-oscuro));
}
.cierre__interior { display: grid; justify-items: center; gap: 2rem; }
.cierre__escudo { width: clamp(170px, 22vw, 280px); }