/* ============================================================
   SPORTBOOK — estilos propios de la vista.

   Nada de acá se aplica a la Home ni a Casino: todos los selectores
   cuelgan de clases sb-*. Los componentes compartidos (.section,
   .container, .btn, .badge, .card) se usan tal cual, sin redefinir.

   Mobile first de verdad: las reglas base son las de teléfono y los
   @media suman a partir de ahí, no al revés.
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.sb-top {
  padding-top: calc(var(--header-h) + var(--s-5));
  padding-bottom: var(--s-6);
}
.sb-top__title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.04;
  margin: var(--s-1) 0 var(--s-2);
}
/* Dos colores en la misma frase, con el mismo mecanismo que ya usa el
   claim de Casino: dos <span> en flujo, no un degradado sobre texto. */
.sb-top__claim {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 0.95rem + 1.75vw, 2rem);
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.sb-top__claim-oro { color: var(--cta); }
.sb-top__claim-blanco { color: var(--text-primary); }
.sb-top__lede { margin-bottom: var(--s-5); }
.sb-top__lede strong { color: var(--text-primary); font-weight: 700; }

.sb-top__cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
@media (min-width: 480px) {
  .sb-top__cta { flex-direction: row; }
  .sb-top__cta .btn { flex: 0 1 auto; }
}

/* ------------------------------------------------------------
   BANNER

   16/9 no es arbitrario: es la proporción que ya usan el hero de la Home
   y la vista Casino, y también la del asset — "baner deportess" viene en
   1672x941 (1.77683), recortado al 16:9 exacto y reescalado a 1200x675
   antes de entrar, así que object-fit: cover no llega a recortar nada.

   El mismo encuadre en Mobile y en Desktop, a propósito: el asset lleva
   el texto a la izquierda y el jugador a la derecha, de modo que cualquier
   recorte lateral en pantallas estrechas se comería una de las dos mitades.
   Manteniendo 16/9 se ve la composición entera en los dos casos.
   ------------------------------------------------------------ */
.sb-banner {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-banner);
  border: 1px solid var(--border-soft);
  box-shadow: var(--elev-2);
}
/* cover y no fill: si algún día entra un asset con otra proporción,
   preferimos que recorte antes que estirarlo. Con el actual, cover y fill
   dan el mismo resultado porque las proporciones coinciden. */
.sb-banner__img {
  /* inset:-1px y +2px de tamaño: el <img> normal llenaria la caja de
     CONTENIDO, que el borde de 1px deja en 1.7856 frente al 1.77778 del
     archivo — un recorte de 0.9px. Estirandolo sobre el borde, la caja
     de la imagen coincide con la del contenedor y la proporcion queda
     exacta: cover no recorta ni un pixel. Es el mismo recurso que usa
     .sb-liga__img mas abajo, por el mismo motivo. */
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  /* base.css pone max-width:100% a todas las imagenes. Sin desactivarlo
     aca, capaba el ANCHO a 356 pero dejaba el alto en 201.4 y la caja
     salia mas apaisada que el archivo. */
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (min-width: 1024px) {
  /* En Desktop el banner es el elemento con más presencia del hero, tal
     como se pidió: ocupa la columna derecha y sube su elevación. */
  .sb-banner { box-shadow: var(--elev-3); }
}

/* ------------------------------------------------------------
   DEPORTES
   ------------------------------------------------------------ */
/* Rejilla de 4 en Mobile: cuatro entran cómodos incluso a 320px, y es la
   misma densidad que ya usan las tarjetas de Casino. */
.sb-sports {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.sb-sport {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s-3) 4px;
  min-height: 76px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.sb-sport__ico {
  display: grid;
  place-items: center;
  /* --tint viene por style en línea desde el dataset: cada deporte trae
     su color y el componente no conoce ninguno. */
  color: var(--tint, var(--violet-accent));
}
.sb-sport__ico svg { width: 24px; height: 24px; }
.sb-sport__name {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.sb-deportes__mas {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Chips de texto — los 15 deportes sin icono y los mercados. */
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip {
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-body);
}
.sb-chip--hi {
  border-color: var(--border-gold);
  color: var(--text-primary);
  background: rgba(255, 210, 0, 0.07);
}

/* ------------------------------------------------------------
   EN VIVO — señal, no baño de color

   El token --live aparece en cuatro sitios y en ninguno más: el punto
   del epígrafe, el badge, el borde superior de la tarjeta y el minuto.
   El resto de la tarjeta es la identidad violeta de siempre.
   ------------------------------------------------------------ */
.sb-eyebrow-live { display: inline-flex; align-items: center; gap: 7px; }
.sb-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: var(--live-glow);
  flex: 0 0 auto;
  animation: sb-latido 2s ease-in-out infinite;
}
@keyframes sb-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-punto { animation: none; }
}

/* Rótulo de ejemplo. Lo pinta el JS solo mientras DEMO sea true. */
.sb-rotulo {
  display: inline-block;
  margin: 0 0 var(--s-3);
  padding: 3px 9px;
  border-radius: var(--r-xs);
  border: 1px dashed var(--border);
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sb-aviso {
  margin: var(--s-3) 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   TARJETA DE EVENTO

   Mobile: carrusel horizontal con la siguiente tarjeta asomando, que es
   lo que le dice al dedo que hay más. Desktop: rejilla, porque el ancho
   sobra y verlas todas de golpe comunica volumen.
   ------------------------------------------------------------ */
.sb-evs {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* El padding abre sitio para el glow y el margen negativo lo devuelve
     al layout: mismo truco que .marquee, misma razón. */
  padding-block: 10px;
  margin-block: -10px;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);

  /* scroll-padding y no un offset a mano.
     scroll-snap-align:start alinea la tarjeta con el inicio del
     SCROLLPORT, que es el borde de la caja de padding — o sea x=0, no
     x=16. Al cargar, el navegador scrolleaba 16px solo para cumplir esa
     regla y se comia el padding izquierdo entero: la primera tarjeta
     quedaba pegada al borde de la pantalla mientras titulos y demas
     secciones empezaban en 16.

     scroll-padding-inline le dice al snap donde empieza de verdad el
     contenido, asi que la tarjeta se detiene exactamente sobre la linea
     del container. Mismo token --pad-x que usa .container, no un numero
     nuevo, y el padding-inline de arriba se encarga del borde derecho al
     llegar al final del carrusel. */
  scroll-padding-inline: var(--pad-x);
  scrollbar-width: none;
}
.sb-evs::-webkit-scrollbar { display: none; }

.sb-ev {
  flex: 0 0 auto;
  /* 85% del ancho útil: la siguiente asoma lo justo para leerse como
     carrusel sin que la actual pierda sitio. */
  width: min(85%, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
}
/* La tarjeta en vivo se distingue por una línea superior y un borde algo
   más cálido. No se tiñe entera: la señal deja de ser señal cuando lo
   cubre todo. */
.sb-ev--vivo {
  border-color: var(--live-line);
  position: relative;
  overflow: hidden;
}
.sb-ev--vivo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--live);
}

.sb-ev__top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 22px;
}
.sb-ev__min {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--live);
  font-variant-numeric: tabular-nums;
}
.sb-ev__hora {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sb-ev__liga {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
  /* La liga nunca parte la tarjeta: si no entra, se corta. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Equipos apilados, no "A vs B" en una línea: los nombres reales son
   largos ("Universidad Católica") y en una sola línea se truncan los dos.
   Apilados, cada uno tiene el ancho entero — y además deja el marcador
   alineado a la derecha, que es como se lee un resultado.

   Acá es donde entrarían los escudos el día que se decidan: un
   .sb-ev__escudo de ancho fijo delante de .sb-ev__equipo dentro de
   .sb-ev__lado, sin tocar nada más. */
.sb-ev__equipos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-ev__lado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.sb-ev__equipo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-ev__gol {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.sb-ev__mercado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: 2px;
}
.sb-ev__mercado-n {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "+26": el argumento de profundidad del producto real. */
.sb-ev__mas {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--cta);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}

/* Las cuotas NO son botones: no hay nada que apretar en una landing.
   Son celdas de lectura, y se ven como tales. */
.sb-ev__cuotas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.sb-odd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
}
.sb-odd__k { font-size: 11px; color: var(--text-secondary); }
.sb-odd__v {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   LIGAS — carrusel continuo

   .sb-ligas es el contenedor con scroll nativo: el swipe, el momentum y
   la rueda son los del navegador, sin reimplementar. league-marquee.js
   solo hace que ese mismo scroll avance solo cuando nadie lo toca.
   ------------------------------------------------------------ */
.sb-ligas {
  display: flex;
  overflow-x: auto;
  /* El margen lateral lo pone el .container que lo envuelve, no este
     elemento: tenerlo en los dos era el padding duplicado que descuadraba
     la seccion. Aca solo quedan 12px de aire para que el halo violeta de
     la primera y la ultima tarjeta no se corte contra la caja de recorte,
     devueltos al layout con el margen negativo — exactamente el mismo
     recurso que ya se usaba arriba y abajo. La alineacion exterior no
     cambia: la primera tarjeta sigue empezando en el eje. */
  padding-inline: 12px;
  margin-inline: -12px;
  /* 12px de padding y -12 de margen: overflow-x:auto convierte tambien
     overflow-y en auto, asi que este contenedor recorta arriba y abajo y
     se comia el halo de las tarjetas. El recorte es contra la caja de
     PADDING, no la de contenido, de modo que estos 12px abren sitio para
     el glow y el margen negativo los devuelve al layout: la franja ocupa
     exactamente el mismo alto que antes. Mismo recurso que .marquee.
     A los lados no hace falta: el padding-inline ya deja 16px. */
  padding-block: 12px;
  margin-block: -12px;
  scrollbar-width: none;
  /* Difumina los extremos en vez de cortarlos en seco: el mismo recurso
     que .marquee, para que el bucle no tenga bordes duros. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.sb-ligas::-webkit-scrollbar { display: none; }
.sb-ligas__track { display: flex; gap: var(--s-2); }

/* 2:3 es la proporción real de 12 de los 14 archivos. Las otras dos
   (ATP 526x600, AFA 600x600) quedan encuadradas por object-fit: cover,
   el mismo tratamiento que reciben las fotos de Casino que no calzan. */
.sb-liga {
  position: relative;
  flex: 0 0 auto;
  width: calc((100vw - (var(--pad-x) * 2) - (3 * var(--s-2))) / 4);
  max-width: 150px;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-surface);

  /* Contorno neon violeta PERMANENTE, en Desktop y en Mobile. No es un
     efecto nuevo: es exactamente el de .sport-card (Apuestas deportivas)
     — mismo color, misma opacidad, mismo blur, mismo box-shadow. Se
     cambia el COLOR del borde que la tarjeta ya tenia en vez de sumar
     uno, asi que la caja no varia ni un pixel: mismo ancho, alto,
     aspect-ratio, gap y cantidad visible. El halo va en box-shadow
     exterior, que tampoco ocupa layout.

     El overflow:hidden de arriba recorta la IMAGEN contra el radio, pero
     no recorta el box-shadow propio del elemento: el halo sale entero. */
  border: 1px solid rgba(151, 71, 255, 0.5);
  box-shadow: var(--neon-glow);
}
.sb-liga__img {
  position: absolute;
  /* -1px y +2px: sin esto se ve una hairline del fondo entre la imagen y
     el borde redondeado en pantallas con dpr fraccionario. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  display: block;
}

/* ------------------------------------------------------------
   MERCADOS
   ------------------------------------------------------------ */
.sb-mercados__max {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  flex-wrap: wrap;
}
.sb-mercados__max > span:first-child {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--cta);
  font-variant-numeric: tabular-nums;
}
.sb-mercados__max > span:last-child {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   CTA FINAL
   ------------------------------------------------------------ */
.sb-cta__box {
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--grad-vip);
  border: 1px solid var(--border);
  text-align: center;
}
.sb-cta__box h2 { margin: 0 0 var(--s-3); }
.sb-cta__box p { margin: 0 0 var(--s-5); color: var(--text-body); }
.sb-cta__box .btn { width: 100%; }
@media (min-width: 480px) {
  .sb-cta__box .btn { width: auto; min-width: 240px; }
}

/* ============================================================
   TABLET — a partir de acá sobra ancho para más columnas
   ============================================================ */
@media (min-width: 560px) {
  .sb-sports { grid-template-columns: repeat(8, 1fr); }
  .sb-sport { min-height: 84px; }
  .sb-sport__name { font-size: 11px; }
  .sb-liga { width: calc((100vw - (var(--pad-x) * 2) - (5 * var(--s-2))) / 6); }
}

/* ============================================================
   DESKTOP — no es la versión mobile estirada

   Cambia la FORMA, no solo el tamaño: los eventos dejan de ser carrusel
   y pasan a rejilla, el hero se parte en dos columnas y el banner gana
   la mitad del ancho.
   ============================================================ */
@media (min-width: 1024px) {
  /* El hero a dos columnas (texto izquierda / banner derecha), su
     padding superior y el reparto de columnas los pone ahora .view-hero
     en components.css, compartido con la vista Casino. Se retiraron de
     aca para que no existan dos definiciones del mismo layout y las dos
     cabeceras no puedan desalinearse. */

  .sb-top__lede { max-width: 46ch; }

  /* Eventos: rejilla, no carrusel. Se ven todos de golpe. */
  .sb-evs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-4);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: none;
  }
  .sb-ev { width: auto; }

  .sb-sport { min-height: 96px; padding: var(--s-4) var(--s-2); }
  .sb-sport__ico svg { width: 28px; height: 28px; }
  .sb-sport__name { font-size: 12px; }
  .sb-chip { font-size: 13px; padding: 7px 13px; }

  .sb-liga { width: 168px; max-width: none; }
  /* Se retiro `padding-inline: max(var(--pad-x), calc((100vw - 1200px)/2))`.
     Centraba el carrusel sobre una columna de 1200px cuando el container
     global mide 1280, y ademas medía con 100vw —que incluye la barra de
     scroll— en vez del ancho de layout. Resultado medido a 1440: el
     contenido caia en 120.0→1305.0 contra el eje 104.5→1320.5, o sea
     15.5px metido de cada lado. Ahora el eje lo da el container. */

  .sb-cta__box { padding: var(--s-8) var(--s-7); }
}

@media (min-width: 1440px) {
  .sb-liga { width: 186px; }
}

/* ============================================================
   Efectos de cursor — Desktop con puntero fino únicamente.
   Encapsulado igual que el resto del sitio para que en táctil no
   aparezca ningún estado pegajoso ni haga falta un segundo toque.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .sb-sport,
  .sb-liga,
  .sb-ev {
    transition: transform var(--d-fast) var(--ease-out),
                border-color var(--d-fast) var(--ease-std),
                box-shadow var(--d-fast) var(--ease-std);
  }
  .sb-sport:hover {
    transform: translateY(-2px);
    border-color: var(--violet-accent);
    box-shadow: var(--neon-glow);
  }
  /* El neon ya esta puesto de base; el hover solo lo intensifica. */
  .sb-liga:hover {
    transform: translateY(-3px);
    border-color: var(--violet-accent);
    box-shadow: 0 0 18px -2px rgba(138, 43, 226, 0.7);
  }
  .sb-ev:hover {
    transform: translateY(-2px);
    border-color: var(--violet-accent);
    box-shadow: var(--elev-2);
  }
  /* La tarjeta en vivo conserva SU color al pasar el cursor: si el hover
     la volviera violeta se perdería justo la señal que la distingue. */
  .sb-ev--vivo:hover {
    border-color: var(--live);
    box-shadow: 0 0 20px -4px rgba(228, 88, 129, 0.55);
  }
}