/**
 * sportbook.css — Vista Sportbook. Archivo propio, no toca base/
 * components/sections/utilities/tokens existentes. Reutiliza tokens y
 * clases ya aprobadas (.card, .btn, .eyebrow, .container, .hero-carousel
 * y toda su familia) — acá solo se define layout nuevo, nunca color/
 * radio/sombra "a mano": todo sale de var(--...) de tokens.css.
 */

/* #sportbook-view usa el atributo nativo [hidden] para el estado
   oculto (display:none de UA stylesheet, cero especificidad que pelear).
   .is-active la agrega app-view.js en el mismo frame en que se saca
   [hidden] — sirve solo para la transición de entrada. */
.sportbook-view {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 80px; /* mismo alto que .navbar fija — ver css/components.css */
  /* Sin padding-bottom propio: body ya reserva 188px en mobile
     (calc(176px + var(--space-3) + safe-area), ver css/components.css)
     para que los FABs fijos y la bottom-nav nunca tapen el último
     contenido visible — universal para cualquier vista, agregar otro acá
     encima solo duplicaba el espacio muerto que ya se había eliminado
     en Home. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms var(--ease-out-premium), transform 380ms var(--ease-out-premium);
}

.sportbook-view.is-active {
  opacity: 1;
  transform: translateY(0);
}

.sportbook-view__content {
  padding-top: var(--space-6);
}

/* Título principal Mobile-only — Desktop ya tiene el suyo propio vía
   .sportbook-hero-content (eyebrow+h2), oculto en Mobile por diseño
   aprobado; este es el equivalente visible en Mobile, mismo nivel
   jerárquico que .hero h1 de Home en ese mismo ancho (1.75rem/1.15,
   ver sections.css) — no un tamaño nuevo inventado. margin-bottom
   propio (no var(--space-5) como el topbar, que ya separa igual):
   un salto más chico porque el título está más ligado al banner que
   le sigue que al botón "Home" de arriba. */
.sportbook-mobile-title {
  font-size: 1.75rem;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .sportbook-mobile-title {
    display: none;
  }
}

/* Ritmo entre módulos: mismo valor que .section usa en mobile
   (var(--space-6)=32px), para que la vista se sienta parte del mismo
   sistema y no una página con su propio ritmo inventado. */
.sportbook-section {
  margin-bottom: var(--space-6);
}

.sportbook-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sportbook-section__header h2 {
  font-size: 1.0625rem;
  font-family: var(--font-display);
  color: var(--text-primary);
}

.sportbook-section__caption {
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Hero Sportbook ----------
   Sin clase --desktop/--mobile: .hero-carousel base ya trae aspect-ratio
   1:1 (desktop) / 2:1 (mobile ≤639px), radio, sombra y borde — la misma
   instancia sirve para cualquier ancho, sin duplicar CSS. Solo se ajusta
   el margen alrededor para que respire dentro de .container como el
   resto de los módulos.

   .sportbook-hero-content es el bloque de texto (eyebrow+título+CTA) que
   acompaña al carrusel — no existe en Mobile (el Hero mobile ya aprobado
   es solo el carrusel, igual que estaba); recién a partir de 1024px se
   activa, en una grilla de 12 columnas con el MISMO split 7/5 que usa
   .hero__grid de Home (texto 1/span 7, carrusel 8/span 5 — antes era
   6/6, un split distinto que dejaba el banner de Sportbook con otro
   tamaño renderizado que el de Home pese a compartir la misma clase
   .hero-carousel con aspect-ratio:1/1; corregido para que ambos midan
   exactamente lo mismo, pedido explícito), mismo column-gap
   (var(--space-6)) y mismo align-items: start que ya usa .hero__grid de
   Home (ver sections.css, no se toca esa regla) — así el borde superior
   de ambos bloques queda exactamente a la misma altura sin ningún
   ajuste manual: a diferencia del carrusel de Home, el de Sportbook no
   pasa por la animación de entrada de cinema.js (esa apunta
   puntualmente a .hero__visual), así que no arrastra el desplazamiento
   vertical que ahí sí exige compensar con un margin-top adicional. */
.sportbook-hero-content {
  display: none;
}

.sportbook-hero {
  margin-bottom: var(--space-6);
}

/* Dos instancias (Desktop/Mobile con imágenes propias, ver index.html y
   sportbook-render.js) — mismo interruptor de visibilidad que ya usa el
   Hero de Home, pero con clases propias (.sportbook-hero--desktop/
   --mobile) para no heredar los overrides que sections.css ya trae
   scopeados a .hero-carousel--desktop/--mobile (esos son específicos de
   las fotos y el efecto "is-offset" de Home, no aplican acá). */
.sportbook-hero--mobile {
  display: none;
}

@media (max-width: 639px) {
  .sportbook-hero--desktop {
    display: none;
  }

  .sportbook-hero--mobile {
    display: block;
  }
}

@media (min-width: 1024px) {
  .sportbook-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-6);
    align-items: start;
    margin-bottom: var(--space-8);
  }

  .sportbook-hero-content {
    display: block;
    grid-column: 1 / span 7;
  }

  .sportbook-hero-content h2 {
    margin-top: var(--space-3);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  }

  .sportbook-hero-content__text {
    margin-top: var(--space-4);
    font-size: var(--fs-body-lg);
    color: var(--text-secondary);
    max-width: 46ch;
  }

  .sportbook-hero-content .cta-row {
    margin-top: var(--space-6);
    display: flex;
    gap: var(--space-4);
  }

  .sportbook-hero {
    grid-column: 8 / span 5;
    margin-bottom: 0;
  }
}

/* ---------- Ligas populares ----------
   Reemplaza el chip-row de texto por un carrusel visual continuo —
   mismo lenguaje de tarjeta que "Deportes destacados" (.card comparte
   border-radius/borde/box-shadow "gratis", ver components.css) + mismo
   mecanismo de loop infinito que Proveedores (Juegos): CSS
   transform+@keyframes en Mobile/tablet, rAF+scrollLeft en Desktop (ver
   league-marquee.js). .league-marquee-row es el contenedor real
   (overflow-x:auto en Desktop / overflow:hidden en Mobile, ver más
   abajo) — mismo rol que .juegos-provider-row. */
.league-marquee-row {
  display: flex;
  overflow-x: auto;
  padding-block: 2px;
  scrollbar-width: none;
}

.league-marquee-row::-webkit-scrollbar {
  display: none;
}

/* .league-marquee-track: arma sportbook-render.js con el set real + una
   copia aria-hidden a continuación (mismo mecanismo que
   .juegos-provider-track) — en Mobile es lo que se anima con transform
   (ver @media max-width:1023px más abajo), en Desktop es un contenedor
   neutro (league-marquee.js sigue leyendo scrollLeft/clientWidth de
   .league-marquee-row, sin cambios). */
.league-marquee-track {
  display: flex;
  gap: var(--space-2);
}

/* Tarjeta = imagen completa, sin título superpuesto (los 14 logos ya
   identifican la liga — pedido explícito). aspect-ratio 2/3: proporción
   REAL medida de los archivos fuente (12 de 14 son exactamente 1024×1536
   = 2:3; los otros 2 —ATP 1174×1339, AFA 1254×1254— quedan centrados vía
   object-fit:cover, el mismo tratamiento que ya usa Deportes destacados/
   Proveedores para toda foto que no calza exacto). overflow:hidden +
   position:relative acá (no en .card base) para que la imagen respete el
   border-radius heredado sin sobresalir. */
/* backdrop-filter:none (hereda blur(20px) saturate(150%) de .card):
   la foto de .league-card__photo es opaca y cubre el 100% de la
   superficie de la tarjeta — ese blur queda totalmente tapado, nunca
   se ve, y aun así el navegador lo sigue computando en las 28
   instancias del track (14 reales + 14 clones) en cada frame de la
   animación continua. Costo real medible sin ningún efecto visual:
   se apaga acá (hallazgo de rendimiento dentro del alcance de Ligas
   populares, ver informe). background también se simplifica a un
   color sólido liso (sin el rgba translúcido pensado para dejar
   traslucir el glow de fondo a través del blur) por el mismo motivo:
   nunca es visible detrás de la foto. */
.league-card {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  background: rgba(15, 11, 21, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.league-card__photo {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  /* var(--pos, 50% 50%): mismo mecanismo que .game-card__photo — default
     centrado, con override puntual por liga cuando la composición real
     de ese logo lo necesita (ver leagueCardHtml en sportbook-render.js
     y el comentario sobre "liga-profesional-argentina" ahí). */
  object-position: var(--pos, 50% 50%);
  display: block;
}

/* ---------- Ligas populares: tamaño + loop — Mobile/tablet (<1024px) ----------
   Ancho vía calc(), no un px fijo adivinado: así "exactamente 4
   tarjetas" se cumple en CUALQUIER ancho del rango, no solo en los
   verificados. 100vw − 2×padding real del .container en ese rango − 3
   gaps, entre 4 tarjetas. OJO: --container-pad (tokens.css) es la
   variable BASE (24px) — los media queries de .container (utilities.css)
   la pisan con un valor literal en padding-inline, no reasignan la
   variable — así que acá hay que usar el mismo literal, no var(
   --container-pad), o el cálculo sale mal (bug real detectado en vivo:
   con var(--container-pad) el ancho se calculaba con 24px en vez de
   16px, dejando lugar a un asomo de la 5ª tarjeta a 360px). Dos
   sub-rangos, mismo corte que .container: ≤639px usa 16px, 640-1023px
   usa 20px. Mismo mecanismo de loop que .juegos-provider-track:
   .league-marquee-row pasa a overflow:hidden y .league-marquee-track
   (ya con el set real + copia exacta) se anima transform:
   translateX(0)→translateX(-50%) en loop infinito — el duplicado es
   pixel-idéntico, así que el reinicio es invisible. */
@media (max-width: 1023px) {
  .league-marquee-row {
    overflow: hidden;
  }

  .league-card {
    flex: 0 0 calc((100vw - 40px - 3 * var(--space-2)) / 4);
    aspect-ratio: 2 / 3;
  }

  /* Velocidad Mobile — tercera revisión: 60px/s (ronda anterior, ver
     historial arriba) se siguió reportando lento en vivo. Remedido antes
     de tocar nada (pedido explícito): a 390px, distancia(w) = 3.5×w −
     88px seguía dando exacto (1277px medidos = 350×3.90−88), así que la
     recta de distancia no cambió — solo la velocidad objetivo. Nueva
     velocidad: +50% sobre 60px/s → 90px/s. Mismo mecanismo de siempre,
     duración(w) = distancia(w) / velocidad, ahora con 90 en vez de 60:

       animation-duration: calc((350vw - 88px) / 90px * 1s)

     Con esto la velocidad efectiva vuelve a ser constante en cualquier
     ancho del rango (320-430px) — no un número fijo que solo acertaba a
     390px — ahora calibrada a 90px/s en vez de 60px/s. Desktop
     (league-marquee.js, SPEED_PX_PER_SEC) queda sin tocar en 60: el
     pedido de esta ronda es exclusivo de Mobile, y ahora Mobile corre
     deliberadamente más rápido que Desktop (+50%) para lograr la
     diferencia perceptible pedida.

     Nada más cambia: mismo linear, mismo will-change:transform, mismo
     mecanismo de loop (track duplicado exacto), mismo ancho de tarjeta
     (.league-card arriba, sin tocar — "4 visibles" no depende de la
     velocidad). */
  .league-marquee-track {
    width: max-content;
    animation: league-marquee calc((350vw - 88px) / 90px * 1s) linear infinite;
    will-change: transform;
  }
}

/* translate3d (no translateX): fuerza capa de composición GPU en más
   motores/versiones que translateX solo — mismo resultado visual, más
   robusto en Android WebView viejos. */
@keyframes league-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .league-marquee-track {
    animation: none;
  }
}

/* ≤639px: .container pisa su padding a 16px acá (era 20px arriba) —
   mismo corte exacto, mismo literal, para que las 4 tarjetas sigan
   calzando justas en el rango realmente verificado (360-430px). */
@media (max-width: 639px) {
  .league-card {
    flex: 0 0 calc((100vw - 32px - 3 * var(--space-2)) / 4);
  }
}

/* ---------- Ligas populares — Desktop (≥1024px) ----------
   9 tarjetas completas simultáneas (pedido explícito), flechas
   heredadas de .carousel-nav (mismo componente compartido). Mismo fix
   de ancho que .juegos-provider-track: el track necesita un ancho
   DEFINIDO igual al de la fila real para que el calc() de cada tarjeta
   resuelva contra el ancho correcto (sin esto, 158px en vez de ~123px —
   mismo bug ya documentado y corregido en Proveedores). */
@media (min-width: 1024px) {
  .league-marquee-track {
    flex: 0 0 100%;
    min-width: 100%;
    gap: var(--space-4);
  }

  .league-card {
    flex: 0 0 calc((100% - 8 * var(--space-4)) / 9);
    aspect-ratio: 2 / 3;
  }
}

/* ---------- Deportes destacados ----------
   .sport-feature-list reutiliza .carousel-track (mismo componente que ya
   usan Servicios/Bonos/Juegos/Testimonios/el Sportbook de Home —
   overflow-x, scroll-snap, gap, touch/trackpad nativos, flechas con
   estado disabled en los extremos vía initCarousels() en carousel.js,
   sin JS nuevo) — acá solo se define el tamaño/proporción de cada
   tarjeta. 640-1023px (mismo corte que .carousel-nav para mostrar
   flechas): fila horizontal, tarjetas a ancho fijo, carrusel real con
   scroll+flechas (el propio .carousel-track ya se comporta así por
   definición). ≥1024px (ver el bloque más abajo): pasa a grid de
   columnas 1fr — todas las tarjetas entran a la vez sin scroll, a
   propósito (pedido explícito), así que ahí .carousel-track deja de
   comportarse como carrusel. ≤639px (ver media query más abajo): el
   mismo mecanismo "una tarjeta sin fragmentos vecinos" de
   .services-grid, ancho medido contra el content-box del track (mismo
   ancho que .service-card a cualquier ancho, sin copiar ningún valor
   fijo). */
.sport-feature-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 240px;
  height: 248px;
  cursor: pointer;
  transition: border-color var(--dur-standard) var(--ease-standard), box-shadow var(--dur-standard) var(--ease-standard),
    transform var(--dur-standard) var(--ease-standard);
}

.sport-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-float), var(--elev-purple-glow);
}

.sport-feature-card.is-active {
  border-color: rgba(255, 215, 0, 0.35);
  box-shadow: var(--elev-gold-glow);
}

/* Envuelve foto+overlay+label: blanco del microefecto "tarjeta
   protagonista" del carrusel Mobile (ver initSportFeatureCarouselFx en
   sportbook-render.js) — mismos valores medidos en .service-card__inner
   (Servicios/Home): 480ms var(--ease-out-premium), scale+lift al
   centrarse. position:absolute/inset:0 solo pasa a ser el nuevo
   contenedor de referencia para __photo/__overlay/__label (mismo
   resultado visual en reposo que antes), separado de .sport-feature-card
   (el snap target) para no repetir el bug ya documentado en Servicios:
   un transform en el propio ítem del carrusel rompe el reposo del
   scroll-snap tras swipes rápidos. */
.sport-feature-card__inner {
  position: absolute;
  /* -1px (no 0): .card (clase compartida) trae border:1px — inset:0
     posiciona esto contra el borde INTERNO de ese borde (la caja de
     padding), 2px más angosto/bajo que el ancho/alto real de la
     tarjeta (border-box, lo que mide getBoundingClientRect() sobre la
     tarjeta). -1px extiende __inner exactamente esos 2px, así su
     content-box iguala el border-box real de la tarjeta — de ahí para
     abajo, .sport-feature-card__photo sigue en width:100%/height:100%
     sin tocar (tal como se pidió), pero ese 100% ahora sí resuelve
     contra el tamaño completo de la tarjeta, no contra uno recortado
     por el borde. overflow:hidden de .card sigue recortando en el
     mismo lugar de siempre (la caja de padding) — cero cambio visual,
     el borde se sigue viendo igual; esto solo corrige la medición. */
  inset: -1px;
  transition: transform 480ms var(--ease-out-premium), opacity 480ms var(--ease-out-premium);
}

/* La atenuación de la tarjeta no-centrada solo tiene sentido donde el
   scroll es continuo/libre (≤1023px, ver el mismo corte en
   initSportFeatureCarouselFx) — en Desktop todas las tarjetas están
   siempre visibles a la vez (grid, sin scroll) y .is-centered nunca se
   agrega ahí, así que sin este límite quedarían al 75% de opacidad de
   forma permanente. */
@media (max-width: 1023px) {
  .sport-feature-card__inner {
    opacity: 0.75;
  }

  .sport-feature-card.is-centered .sport-feature-card__inner {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sport-feature-card__inner {
    transition: none;
  }
}

/* Foto a pantalla completa de la tarjeta: position:absolute con
   inset:0 + width/height:100% la hace ocupar EXACTAMENTE el 100% del
   ancho y alto reales de la tarjeta, sin excepción por deporte — regla
   única, sin transform/scale individual (ver más abajo, se sacó a
   propósito: cualquier scale() distinto de 1, aunque no cambie el
   layout-box, sí cambia el tamaño renderido real que mide
   getBoundingClientRect(), que es justo lo que tiene que ser idéntico
   entre tarjeta e imagen). El único ajuste permitido por foto es DÓNDE
   cae el recorte (object-position), nunca CUÁNTO ocupa el elemento.
   --pos-compact/--pos-mobile llegan inline por tarjeta: un mismo
   encuadre no funciona igual en el contorno casi cuadrado de
   tablet/Desktop que en la franja 7:4 de mobile, así que cada forma
   tiene su propio valor — eso sigue siendo válido (es encuadre, no
   tamaño). El overflow:hidden de .card recorta según el border-radius,
   sin deformar nada (object-fit:cover). */
.sport-feature-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-compact, 50% 50%);
  display: block;
}

/* "Todos los deportes" no tiene foto propia (no hay una imagen
   "correcta" para un agregado de 8 deportes) — fondo degradado en su
   lugar. Única excepción a "sin ícono" en Deportes destacados: al no
   representar un deporte puntual, lleva el trophy (mismo ícono que ya
   usa el Hero de Home para "Sportbook profesional") centrado encima,
   como identificador visual propio. */
.sport-feature-card__fallback-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 215, 0, 0.3), rgba(139, 95, 191, 0.22));
}

.sport-feature-card.is-active .sport-feature-card__fallback-bg {
  background: linear-gradient(160deg, rgba(255, 215, 0, 0.48), rgba(255, 193, 7, 0.24));
}

/* Centrado absoluto, tamaño proporcional al ancho de la propia
   tarjeta (clamp con piso/techo para que nunca se vea ni diminuto ni
   "excesivamente grande" en ningún ancho — de 240px en tablet a
   ~99-152px en el carrusel Mobile de 3 tarjetas). Un poco por encima
   del centro real (42% en vez de 50%) para no pisar el nombre, que
   vive en la franja inferior. Color gold-400: mismo tono ya usado en
   toda la paleta SuperPro para acentos sobre fondo oscuro, con buen
   contraste sobre el degradado dorado/violeta de abajo. */
.sport-feature-card__all-icon {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(28px, 34%, 44px);
  height: clamp(28px, 34%, 44px);
  color: var(--gold-400);
  filter: drop-shadow(0 2px 10px rgba(255, 215, 0, 0.3));
}

/* Degradado mínimo, solo en la franja inferior donde va el texto (no
   sobre toda la foto) — la fotografía sigue siendo la protagonista. */
.sport-feature-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 5, 14, 0.88) 0%, rgba(8, 5, 14, 0.5) 38%, transparent 68%);
  pointer-events: none;
}

.sport-feature-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  text-align: left;
}

.sport-feature-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.sport-feature-card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Mobile: 3 tarjetas completas visibles a la vez (a pedido explícito —
   ya no busca igualar el ancho de .service-card de Servicios, que
   muestra 1 sola tarjeta por vez; ese sistema quedó para Servicios,
   este es propio de Deportes destacados). Ancho: flex-basis en % del
   content-box del track (el % de un flex-basis ya se resuelve contra
   el ancho disponible DESPUÉS del padding-inline propio del
   contenedor, no hace falta restarlo acá) menos los 2 gaps entre las 3
   tarjetas — mismo resultado exacto en cualquier ancho, sin fórmulas
   por breakpoint. Alto: aspect-ratio nativo (ya no hace falta el
   truco padding-top/bottom — ese existía solo para replicar el alto
   compuesto de .service-card, que ya no aplica acá). Snap agrupado:
   scroll-snap-align solo en la 1ª tarjeta de cada grupo de 4
   (:nth-child(4n+1)) — así cada gesto de swipe reposa en un límite de
   grupo (1-2-3-4 → 5-6-7-8 → ...) en vez de tarjeta por tarjeta. */
@media (max-width: 639px) {
  .sport-feature-list {
    padding-inline: var(--space-4);
    scroll-padding-inline: var(--space-4);
    gap: var(--space-2);
  }

  /* El % de flex-basis se resuelve contra el content-box del track
     (después de restar su padding-inline de los 2 lados) — pero
     overflow-x recorta en el border-box (que SÍ incluye el
     padding-right). Sin sumar ese padding-right de vuelta acá, la
     4ª tarjeta de cada grupo termina justo en el borde del
     content-box y deja un hueco (el padding-right) por el que
     asoma un fragmento de la 5ª — se lo suma para que la 4ª llegue
     hasta el borde real donde recorta el scroll, sin fragmentos.
     Pedido explícito: 4 tarjetas completas por pantalla (antes 3) —
     mismo mecanismo, división entre 4 en vez de 3 y 3 gaps en vez
     de 2 (N tarjetas siempre tienen N-1 gaps entre ellas). */
  .sport-feature-card {
    flex: 0 0 calc((100% + var(--space-4) - (3 * var(--space-2))) / 4);
    width: auto;
    height: auto;
    aspect-ratio: 4 / 5;
    scroll-snap-align: none;
  }

  .sport-feature-card:nth-child(4n + 1) {
    scroll-snap-align: start;
  }

  .sport-feature-card:hover {
    transform: none;
  }

  .sport-feature-card__photo {
    object-position: var(--pos-mobile, 50% 50%);
  }

  /* Tarjeta bien más chica que antes (~⅓ del ancho): mismo criterio de
     compactación ya usado en la grilla Desktop (línea ~771 más abajo)
     para el mismo problema — nombre en 2 líneas si hace falta, meta
     oculto (no entra sin verse apretado a este ancho). */
  .sport-feature-card__label {
    padding: var(--space-2);
  }

  .sport-feature-card__name {
    font-size: 0.75rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sport-feature-card__meta {
    display: none;
  }
}

/* ---------- En vivo ahora / Cuotas destacadas ----------
   Tarjetas anchas en fila horizontal con snap — una tarjeta protagonista
   a la vez en mobile, mismo criterio de composición que el resto del
   sitio (Bonos, Servicios). */
.match-row,
.odds-spotlight-row {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  padding-inline: var(--space-4);
  padding-block: 2px var(--space-2);
  margin-inline: calc(var(--space-4) * -1);
  scrollbar-width: none;
}

.match-row::-webkit-scrollbar,
.odds-spotlight-row::-webkit-scrollbar {
  display: none;
}

.match-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(84vw, 320px);
  padding: var(--space-4);
}

.match-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.match-card__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--error);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-card__live-badge svg {
  width: 8px;
  height: 8px;
  animation: sportbook-pulse 1.6s ease-in-out infinite;
}

@keyframes sportbook-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.match-card__clock {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 600;
}

.match-card__league {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.match-card__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.match-card__teams span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-card__teams strong {
  flex-shrink: 0;
  font-family: var(--font-display);
  color: var(--gold-400);
  font-size: 0.9375rem;
}

.match-card__odds {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-2);
}

.odds-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  transition: border-color var(--dur-standard) var(--ease-standard), background var(--dur-standard) var(--ease-standard);
}

.odds-btn:active {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.08);
}

.odds-btn__label {
  font-size: 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.odds-btn__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--gold-400);
}

/* ---------- Próximos eventos (lista vertical) ---------- */
.fixture-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fixture-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.fixture-card__when {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 52px;
  font-size: 0.625rem;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}

.fixture-card__sport-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 215, 0, 0.18), rgba(255, 215, 0, 0.04));
  color: var(--gold-400);
}

.fixture-card__sport-icon svg {
  width: 15px;
  height: 15px;
}

.fixture-card__body {
  flex: 1;
  min-width: 0;
}

.fixture-card__league {
  font-size: 0.625rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.fixture-card__teams {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  /* 2 líneas en vez de 1 + ellipsis: "Equipo A vs Equipo B" no entra en
     una sola línea junto a fecha+cuotas en el mismo renglón — envolver
     es más legible que truncar un nombre de equipo a la mitad. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fixture-card__teams span {
  color: var(--text-muted);
  font-weight: 400;
}

.fixture-card__odds {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

.fixture-card__odds .odds-btn {
  width: 44px;
}

/* ---------- Cuotas destacadas ---------- */
.odds-spotlight-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(78vw, 280px);
  padding: var(--space-4);
  border-color: rgba(255, 215, 0, 0.25);
  box-shadow: var(--elev-float), 0 0 24px rgba(255, 215, 0, 0.08);
}

.odds-spotlight-card__badge {
  display: inline-block;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  background: rgba(255, 215, 0, 0.14);
  color: var(--gold-400);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.odds-spotlight-card__league {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.odds-spotlight-card__matchup {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.odds-spotlight-card__market {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.odds-spotlight-card__odd {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold-500);
}

/* ---------- Promociones Sportbook ----------
   .card ya da glass/glow/radio — acá solo el layout interno, mismo
   patrón que .bonus-card (badge, título, texto, CTA dorado). */
.sportbook-promo-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sportbook-promo-card {
  padding: var(--space-5);
}

.sportbook-promo-card__badge {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 215, 0, 0.14);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--gold-400);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.sportbook-promo-card h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
}

.sportbook-promo-card p {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* ---------- Responsive: Tablet (≥640px) ----------
   Primer escalón: de scroll horizontal de un solo carril a grilla —
   sigue siendo la misma información, ya sin necesitar swipe cuando hay
   ancho real para mostrar más de una tarjeta por vez. */
@media (min-width: 640px) {
  .match-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .match-card {
    width: 100%;
  }

  .odds-spotlight-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .odds-spotlight-card {
    width: 100%;
  }
}

/* ---------- Responsive: Desktop (≥1024px) ----------
   Misma información y misma arquitectura funcional que Mobile (ver
   sportbook-render.js — cero diferencia de datos ni de markup entre
   anchos), pero presentada con la densidad de una web premium: chips
   en una sola fila sin scroll, columnas dobles en próximos eventos y
   promociones, tarjetas de "en vivo"/cuotas mostrando 3 a la vez en vez
   de una por swipe. .container ya limita todo a --container-max=1280px
   centrado, igual que el resto del sitio — nada acá define un ancho
   máximo propio. */
@media (min-width: 1024px) {
  .sportbook-view__content {
    padding-top: var(--space-8);
  }

  .sportbook-section {
    margin-bottom: var(--space-8);
  }

  .sportbook-section__header h2 {
    font-size: 1.375rem;
  }

  /* Deportes destacados: las 10 (Todos + 9 deportes, incl. Béisbol)
     visibles a la vez, sin scroll ni flechas — grid de 10 columnas 1fr
     reparte el ancho útil exacto entre todas, gap uniforme por diseño
     del propio grid (no hay que calcular ancho a mano, y sigue siendo
     válido a CUALQUIER ancho ≥1024px, no solo en los 3 verificados).
     Con 1 columna más que la versión anterior (9) cada tarjeta es más
     angosta que antes (~112px reales en vez de ~126px) — para que esa
     tarjeta más angosta no se vea desproporcionadamente alta, el alto
     ya no es un valor fijo (134px): pasa a aspect-ratio, calcado de la
     proporción ~126.22×134 que ya tenían las tarjetas antes de sumar
     Béisbol, así el alto se recalcula solo junto con el ancho y la
     "misma proporción visual" se mantiene sin importar cuántas
     columnas haya. */
  .sportbook-section__header .carousel-nav {
    display: none;
  }

  .sport-feature-list {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    gap: var(--space-3);
  }

  .sport-feature-list .sport-feature-card {
    width: auto;
    height: auto;
    aspect-ratio: 0.942;
  }

  .sport-feature-list .sport-feature-card__label {
    align-items: center;
    text-align: center;
    padding: var(--space-2);
  }

  .sport-feature-list .sport-feature-card__name {
    font-size: 0.75rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sport-feature-list .sport-feature-card__meta {
    display: none;
  }

  /* En vivo / cuotas destacadas: 3 tarjetas visibles a la vez en vez de
     2 (mismo grid ya activado en ≥640px, minmax más chico = más
     columnas reales con el ancho de Desktop disponible). */
  .match-row {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-5);
  }

  .odds-spotlight-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .match-card:hover,
  .odds-spotlight-card:hover,
  .fixture-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-float), var(--elev-purple-glow);
  }

  .odds-btn:hover {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.07);
  }

  /* Próximos eventos: lista de una columna se sentía angosta con 1280px
     de ancho real disponible — 2 columnas muestran el doble de eventos
     sin scroll, mismas tarjetas, mismo contenido. */
  .fixture-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* Promociones: mismo criterio, 2 tarjetas lado a lado en vez de
     apiladas — con solo 2 promos en config no hace falta más de 2
     columnas. */
  .sportbook-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

}

/* ---------- Cierre legal ----------
   Línea única, discreta, al final real del contenido de Sportbook —
   deliberadamente NO es el Footer de Home (sin nav/columnas/redes/
   logo/copyright): un aviso legal secundario y nada más. clamp()
   cubre los 4 anchos Mobile requeridos (360/375/390/430) y Desktop en
   una sola declaración, sin breakpoints propios — mismo texto que
   footer__age-notice de Home, pero acá siempre en tono muted (nunca
   bold/primary: ese tratamiento es específico de cuando comparte
   renglón con el copyright en el Footer real). margin-top da el
   "espaciado final equilibrado" pedido; sin padding-bottom propio —
   el espacio libre tras el aviso ya lo resuelve el padding-bottom
   global de body (reservado para los FABs/bottom-nav fijos), agregar
   otro acá encima solo volvería a producir un "espacio muerto"
   grande. */
.sportbook-legal-notice {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  color: var(--text-muted);
  font-size: clamp(0.5625rem, 0.52rem + 0.3vw, 0.75rem);
  line-height: 1.4;
  white-space: nowrap;
}

/* Desktop (≥640px): acá SÍ suma padding-bottom simétrico (mismo
   criterio ya aplicado en .juegos-legal-notice, componente
   equivalente) — el aviso es el último elemento de la vista y quedaba
   con aire arriba (padding-top) pero pegado al borde inferior real de
   la vista (padding-bottom:0 heredado de la regla base). La reserva
   de 188px en body que justifica el padding-bottom:0 de arriba es
   EXCLUSIVA de mobile (bottom-nav + FABs apilados, ver comentario en
   css/components.css) — en Desktop no existe esa reserva ni la
   bottom-nav, así que sumar acá los mismos var(--space-4) que ya usa
   Juegos no reproduce ningún "espacio muerto" grande, solo empareja
   el padding-top existente. */
@media (min-width: 640px) {
  .sportbook-legal-notice {
    padding-bottom: var(--space-4);
  }
}

/* ---------- Estado activo en el navbar superior de Desktop ----------
   Compartida de hecho entre Sportbook y Juegos (juegos.css no trae su
   propia copia): app-view.js agrega .is-current a a[href="#sportbook"]
   y juegos-view.js hace lo mismo con a[href="#juegos"] — esta única
   regla, sin scope propio, resuelve el color dorado para las dos vistas
   sin duplicarla. Home nunca agrega .is-current a .navbar__links (no
   tiene scrollspy arriba, solo abajo en mobile vía bottom-nav.js), así
   que queda inerte ahí. No se toca ninguna regla existente de
   .navbar__links en components.css. */
.navbar__links a.is-current {
  color: var(--gold-400);
}

@media (prefers-reduced-motion: reduce) {
  .sportbook-view {
    transition: none;
  }

  .match-card__live-badge svg {
    animation: none;
  }
}