/* ============================================================
   VISTA CASINO — solo lo propio de casino.html
   ============================================================
   Deliberadamente corto. La tarjeta de juego, el carrusel, los chips de
   proveedor, el marquee, el banner y el contorno neon YA existen en
   components.css y se reutilizan tal cual: esta vista no redefine ni una
   medida de tarjeta. Aca solo esta el encabezado de la vista, el ritmo
   vertical de las secciones por proveedor y el ajuste del banner.

   Estructura tomada de premioplus.online -> Juegos -> Proveedores
   (analizada en vivo: 29 secciones, chips duplicados, 12 tarjetas por
   carrusel). Nada de su apariencia: color, tipografia, tamano de tarjeta
   y navegacion son los de Progambling.
   ============================================================ */

/* --- Encabezado de la vista --- */
.casino-top { padding-top: calc(var(--header-h) + var(--s-6)); }

.casino-top__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: var(--s-2) 0 var(--s-2);
}
/* --- Claim de dos colores ---
   Un unico titulo partido en dos tramos. Los colores NO son nuevos: son
   los dos que la pagina ya usa para eso — el amarillo de los CTA
   (--cta) y el blanco de titulo (--text-primary).

   Los spans son inline y el espacio entre ellos sale del salto de linea
   del HTML, asi que la frase se lee corrida y reflowea sola cuando el
   ancho no da. */
.casino-top__claim {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display);
  font-weight: 800;
  /* Escala propia, no el h1 encogido: por debajo del "Casino" y por
     encima del texto descriptivo. */
  /* Sube ~8% en todo el rango mobile (19.45 -> 21.16 a 390px). El tope
     de 1.9rem no se toca: en desktop ya estaba en el tope, asi que alli
     el tamaño queda exactamente igual. */
  font-size: clamp(1.25rem, 0.92rem + 1.65vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.casino-top__claim-oro { color: var(--cta); }
.casino-top__claim-blanco { color: var(--text-primary); }

/* Descripcion, ahora DEBAJO del banner. Usa .section__lede — la clase de
   texto secundario que ya existe en el proyecto — asi que hereda su
   tamaño y color en vez de estrenar una escala propia. */
.casino-top__lede {
  max-width: 62ch;
  margin: var(--s-4) 0 0;
}

/* El banner reusa .hero__media entero (aspect-ratio, radio, dots y
   carrusel). Lo unico propio es el ancho.

   En desktop se acota a 900px y no al ancho del contenedor: los assets
   son 16:9, asi que a los 1216 del container el banner media 684px de
   alto — mas de dos tercios de pantalla solo para la cabecera, y todo lo
   demas empujado bajo el pliegue. Acotado da 506px, que es una cabecera
   de seccion y no una portada. No se toca el aspect-ratio: se limita el
   ancho, no se recorta la imagen. */
.casino-banner { width: 100%; margin-inline: auto; }
/* En desktop el ancho lo marca la columna del hero compartido
   (.view-hero__media en components.css). El acotado a 900px era para la
   composicion de una sola columna: con el banner en su propia columna ya
   no mide 684 de alto, sino ~351, asi que deja de hacer falta. */

/* --- Franja de chips --- */
.casino-chips-sec { padding-block: var(--s-6); }
.casino-chips-sec .section__head { margin-bottom: var(--s-5); }

/* --- Desktop: Proveedores centrado entre el banner y el buscador ---
   Medido a 1440 antes del cambio: del borde inferior del banner al
   titulo "Proveedores" habia 120px, y de los chips al buscador 48. El
   bloque quedaba pegado abajo.

   El hueco no lo forma un solo elemento: son tres paddings encadenados
   —el inferior del hero, los del propio bloque y el superior del
   buscador—, por eso no se corrige con un margen en Proveedores.

   Se reparte en dos mitades iguales a partir de UNA variable:

     mitad = 84px         (120 + 48 = 168, repartido en dos)
     arriba = padding-bottom del hero            -> 84
     abajo  = padding-bottom del bloque + 16 del buscador -> 68 + 16 = 84

   La suma total no cambia (84 + bloque + 84 = 120 + bloque + 48), asi
   que ni el buscador ni nada de lo que viene despues se mueve. El banner
   tampoco: su posicion la fija el padding SUPERIOR del hero; abajo solo
   se recorta el aire que sobraba.

   Sin top, sin translateY, sin margenes negativos: solo padding-block. */
@media (min-width: 1024px) {
  :root { --prov-half: 84px; }
  .casino-top { padding-bottom: var(--prov-half); }
  .casino-chips-sec {
    padding-top: 0;
    /* Descuenta los 16 que ya aporta el padding superior del buscador. */
    padding-bottom: calc(var(--prov-half) - var(--s-4));
  }
}


/* En la Home los chips son estaticos; aca son enlaces. Se les quita el
   subrayado y se les deja el cursor de enlace, nada mas: tamano, radio,
   contorno neon y logo full-chip siguen siendo los aprobados. */
.marquee__track > .provider-card { text-decoration: none; }

/* Ancho FIJO para todos los chips de esta vista, tengan logo o no.
   En la Home el chip sin logo usa min-width y crece con el texto: medido
   aca, "Pragmatic Play Virtuals" salia mas ancho que los de logo y la
   fila dejaba de ser uniforme. Con ancho fijo los 39 miden 134x62
   exactos. El texto largo se recorta con puntos suspensivos en vez de
   estirar el chip. */
.casino-chips-sec .provider-card {
  width: 134px;
  overflow: hidden;
}
.casino-chips-sec .provider-card:not(.provider-card--logo) {
  display: block;
  padding: var(--s-3) var(--s-2);
  line-height: 1.2;
  text-align: center;
  align-content: center;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .marquee__track > a.provider-card { cursor: pointer; }
}

/* --- Secciones por proveedor ---
   Ritmo mucho mas apretado que en la Home: son 39 secciones seguidas.
   Medido con 48+48: entre el final de un carrusel y el titulo del
   siguiente quedaban 107px de aire, casi el alto de una tarjeta vacio,
   repetido 39 veces. Con 24+24 el hueco baja a ~59px, que sigue
   separando con claridad sin convertir la vista en una caminata. Los
   16px entre titulo y carrusel se conservan: ahi el aire si hace falta
   para que el titulo no se pegue a las tarjetas. */
.casino-prov { padding-block: var(--s-4); }
.casino-prov__head {
  display: flex;
  /* row EXPLICITO: .section__head trae flex-direction:column y sin esto
     se heredaba, con lo que align-items:center centraba el titulo y las
     flechas en vez de mandarlos a cada extremo. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  /* 16 -> 8: el titulo tiene que leerse como encabezado del carrusel,
     no como un bloque aparte. */
  margin-bottom: var(--s-2);
}
.casino-prov__head h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-primary);
  margin: 0;
}

/* Reserva de alto mientras la seccion todavia no monto sus tarjetas.
   Sin esto el scroll saltaria cada vez que un carrusel se puebla: la
   pagina crece de golpe bajo el dedo. El valor sale de la propia
   tarjeta — 1:1 mas el gap — asi que no hay numero magico que se
   desincronice si cambia la medida. */
.casino-prov .carousel__track:empty {
  min-height: calc((100% - (8 * var(--c-gap))) / 9);
}
@media (max-width: 559px) {
  .casino-prov { padding-block: var(--s-3); }
  .casino-prov .carousel__track:empty {
    min-height: calc((100% - (4 * var(--c-gap)) - var(--c-peek)) / 4);
  }
}

/* --- CTA de cierre --- */
.casino-final { text-align: center; }
.casino-final .hero__cta { justify-content: center; margin-top: var(--s-5); }


/* --- Titulo + flecha como una sola unidad --- */
.casino-prov__titulo {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

/* --- Boton de expandir ---
   Antes vivia en .carousel__nav y heredaba el chip de 44x44 con borde y
   fondo de las flechas del carrusel: medido, quedaba a 1049px del
   titulo y pesaba mas que el nombre del proveedor.

   Ahora es un control secundario: sin fondo, sin borde, solo el icono.
   El area TACTIL sigue siendo de 44px — la da el padding, no el aspecto
   — asi que en mobile se toca igual de facil aunque se vea chico. Eso es
   lo que permite tener a la vez "flecha pequeña" y "area suficiente":
   son dos cosas distintas y solo la primera es visible. */
.casino-prov__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 13px;               /* 18 de icono + 26 = 44 de area tactil */
  margin: -13px -13px -13px -4px;  /* se descuenta del layout: no empuja */
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.casino-prov__toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform var(--d-mid) var(--ease-out);
}
.casino-prov.is-expanded .casino-prov__toggle { color: var(--text-primary); }
.casino-prov.is-expanded .casino-prov__toggle svg { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .casino-prov__toggle:hover { color: var(--text-primary); }
}
@media (prefers-reduced-motion: reduce) {
  .casino-prov__toggle svg { transition: none; }
}
.casino-prov__toggle svg {
  transition: transform var(--d-mid) var(--ease-out);
}
.casino-prov.is-expanded .casino-prov__toggle svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .casino-prov__toggle svg { transition: none; }
}

/* --- Estado expandido ---
   El track deja de ser una fila con scroll y pasa a ser una grid. Son
   LAS MISMAS tarjetas: no hay segunda lista ni segundo render.

   Las columnas replican exactamente el ancho del carrusel — 9 en
   desktop, 4 en mobile — asi que la tarjeta conserva su medida. Lo unico
   que cambia es que en grid no hay que reservar la pista de la siguiente
   tarjeta (no hay "siguiente" al costado), asi que en mobile la tarjeta
   gana esos pocos pixeles en vez de perderlos.

   NO se anima la altura: con 634 tarjetas animar height seria pedirle al
   navegador que recalcule layout en cada frame durante toda la
   transicion. Solo hay un fundido corto de opacidad. */
.casino-prov.is-expanded .carousel__track {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /* El column-gap NO se redefine: el track ya trae el suyo y es el que
     hace que la tarjeta mida exactamente lo mismo que en el carrusel.
     Pisarlo con var(--c-gap) lo bajaba de 14 a 12 y la tarjeta pasaba de
     122.656 a 124.44 — medido.

     El row-gap SI hay que fijarlo, y es la trampa de todo esto: el gap
     del carrusel esta en PORCENTAJE. En flex solo afectaba al eje
     horizontal, pero en grid define los dos ejes, y un row-gap en % se
     resuelve contra el ALTO del contenedor. Con Pragmatic expandido el
     track mide 8.726px, asi que ese mismo gap se convertia en 953px
     entre filas — medido: fila 1 en y=240, fila 2 en y=1193.

     Se deriva del mismo calculo que el column-gap en vez de escribir un
     14 suelto, para que las dos separaciones sigan siendo la misma si
     manana cambia la tarjeta o el contenedor. */
  row-gap: var(--c-gap);
  overflow: visible;
  scroll-snap-type: none;
  animation: casino-expand var(--d-mid) var(--ease-out);
}
.casino-prov.is-expanded .carousel__track > * {
  width: auto;
  min-width: 0;
}
/* Las flechas no tienen sentido cuando ya se ve todo. */
.casino-prov.is-expanded [data-carousel-prev],
.casino-prov.is-expanded [data-carousel-next] {
  display: none;
}

@keyframes casino-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .casino-prov.is-expanded .carousel__track { animation: none; }
}

@media (max-width: 559px) {
  .casino-prov.is-expanded .carousel__track {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* A partir de 1280 el column-gap del track vale 14px (los 1216 de
   contenido menos 9 tarjetas de 122.667, repartido en 8 huecos). El
   row-gap se calcula igual para que ambas separaciones coincidan. */
@media (min-width: 1280px) {
  .casino-prov.is-expanded .carousel__track {
    row-gap: calc((var(--container) - (2 * var(--pad-x)) - (9 * var(--pp-card))) / 8);
  }
}
/* Entre 560 y 1023 el carrusel muestra 4; la grid acompaña con 6, que es
   lo que entra a esa medida sin achicar la tarjeta. */
@media (min-width: 560px) and (max-width: 1023px) {
  .casino-prov.is-expanded .carousel__track {
    grid-template-columns: repeat(6, 1fr);
  }
}


/* ============================================================
   MOBILE — tarjetas mas grandes, 4 completas
   ============================================================
   Solo <=559px y solo dentro de .casino-prov: la Home y el Desktop de
   esta misma vista no entran por ningun lado.

   Medido antes: ancho util 358, tarjeta 79.00, gap 8 y una pista de 10
   para asomar la quinta. Las cuatro ocupaban 340 y sobraban 18px.

   La formula pedida es ancho = (contenedor - gaps) / 4, o sea SIN
   reservar pista. Con cuatro tarjetas hay TRES huecos entre ellas, no
   cuatro: la regla compartida reserva un gap extra despues de la cuarta
   (que es lo que deja sitio para la pista) y aca ese gap sobra.

       (358 - 3 x 6) / 4 = 85.0

   Esos 18px desperdiciados pasan integros a las imagenes: +7.6% de lado,
   y como la tarjeta es aspect-ratio 1/1 el alto acompaña solo. Nada de
   transform:scale — cambia el ancho real del layout.

   Contrapartida honesta: al no reservar pista, la quinta tarjeta ya no
   asoma. Se gana superficie de imagen y se pierde esa señal de "hay
   mas al costado". Es lo que pide la formula; con una pista de 4-6px
   volveria a haber una insinuacion a costa de ~1.5px por tarjeta. */
@media (max-width: 559px) {
  .casino-prov .carousel__track--games {
    --c-gap: 6px;
    --c-peek: 0px;
  }
  .casino-prov .carousel__track--games > * {
    flex: 0 0 calc((100% - (3 * var(--c-gap))) / 4);
    width: calc((100% - (3 * var(--c-gap))) / 4);
  }
}


/* ============================================================
   TARJETAS UN POCO MAS GRANDES
   ============================================================
   Solo dentro de .casino-prov: la Home no entra.

   DESKTOP. Medido antes: tarjeta 122.656 con gap 14 sobre 1216 de
   contenido, 9 visibles. La cantidad visible no se toca, asi que el
   unico espacio disponible es el gap: bajando de 14 a 6 se liberan 64px
   que se reparten entre las nueve.

       (1216 - 8 x 6) / 9 = 129.78   ->  +5.8%

   La formula va sobre el 100% del track, que ES el content box del
   container, asi que los dos bordes siguen al ras solos. */
@media (min-width: 1024px) {
  /* La grid del buscador entra en la misma regla: vive fuera de
     .casino-prov, asi que sin nombrarla caia en la medida base y sus
     tarjetas salian 122.656 contra las 129.766 de los carruseles —
     medido. Los resultados tienen que ser la misma tarjeta, no una
     parecida. */
  .casino-prov .carousel__track--games,
  .casino-buscar__grid {
    --c-gap: 6px;
    --c-peek: 0px;
    gap: var(--c-gap);
  }
  .casino-prov .carousel__track--games > *,
  .casino-buscar__grid > * {
    flex: 0 0 calc((100% - (8 * var(--c-gap))) / 9);
    width: calc((100% - (8 * var(--c-gap))) / 9);
  }
  /* La grid expandida usa el mismo ancho y el mismo gap en los dos ejes,
     asi que carrusel y grid no pueden desincronizarse. */
  .casino-prov.is-expanded .carousel__track {
    row-gap: var(--c-gap);
  }
}

/* MOBILE. Aca el margen ya estaba exprimido: la pista de la quinta se
   habia eliminado en la ronda anterior y el gap estaba en 6. Lo unico
   que queda es bajarlo a 4.

       (358 - 3 x 4) / 4 = 86.5   ->  +1.8%

   No llega al 5-8% pedido, y no por falta de ganas: para eso habria que
   recortar el margen lateral del container y las secciones de proveedor
   dejarian de estar alineadas con el banner y los chips de arriba. Se
   prioriza la alineacion; ver informe. */
@media (max-width: 559px) {
  .casino-prov .carousel__track--games,
  .casino-buscar__grid {
    --c-gap: 4px;
    --c-peek: 0px;
  }
  .casino-prov .carousel__track--games > *,
  .casino-buscar__grid > * {
    flex: 0 0 calc((100% - (3 * var(--c-gap))) / 4);
    width: calc((100% - (3 * var(--c-gap))) / 4);
  }
}


/* ============================================================
   BUSCADOR GLOBAL
   ============================================================
   Estructura y UX tomadas de premioplus.online -> Juegos (input pill con
   lupa, filtrado al escribir, sin Enter). La piel es de Progambling:
   superficie violeta, borde neon y la misma tipografia del resto.
   ============================================================ */

/* Etiqueta solo para lectores de pantalla. El proyecto no la tenia. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pegado al carrusel de chips, sin bloque vacio en medio. */
.casino-buscar { padding-block: var(--s-4) var(--s-2); }

.casino-buscar__caja {
  position: relative;
  display: flex;
  align-items: center;
}

.casino-buscar__lupa {
  position: absolute;
  left: 14px;
  width: 18px; height: 18px;
  color: var(--text-secondary);
  pointer-events: none;   /* el clic tiene que llegar al input */
}

.casino-buscar__input {
  width: 100%;
  /* Sitio a la izquierda para la lupa y a la derecha para la X. */
  padding: 13px 46px 13px 42px;
  border-radius: 999px;
  border: 1px solid rgba(151, 71, 255, 0.5);
  background: var(--bg-surface);
  box-shadow: var(--neon-glow);
  color: var(--text-primary);
  font-family: var(--f-body);
  /* 16px NO es capricho: por debajo de 16 Safari en iPhone hace zoom
     automatico al enfocar el campo, y de ahi no se vuelve solo. */
  font-size: 16px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--d-fast) var(--ease-std),
              box-shadow var(--d-fast) var(--ease-std);
}
.casino-buscar__input::placeholder { color: var(--text-secondary); }
.casino-buscar__input:focus {
  outline: none;
  border-color: var(--violet-accent);
  box-shadow: var(--neon-line), var(--hov-halo, 0 10px 30px -12px rgba(138, 43, 226, 0.5));
}
/* Se apaga la X nativa de type=search: ya hay un boton propio, visible
   y con area de toque de verdad. */
.casino-buscar__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.casino-buscar__limpiar {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.casino-buscar__limpiar svg { width: 16px; height: 16px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .casino-buscar__limpiar:hover { color: var(--text-primary); }
}

/* --- Resultados --- */
.casino-buscar__salida { margin-top: var(--s-4); }

.casino-buscar__conteo,
.casino-buscar__mas,
.casino-buscar__vacio {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--s-3);
}
.casino-buscar__mas { margin: var(--s-4) 0 0; }
.casino-buscar__vacio {
  padding: var(--s-6) 0;
  text-align: center;
  color: var(--text-body);
}

/* La grid de resultados reusa .carousel__track--games — misma tarjeta,
   mismo tamaño — pero en modo grid, igual que la vista expandida de un
   proveedor. Sin scroll horizontal ni snap. */
.casino-buscar__grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  row-gap: var(--c-gap);
  overflow: visible;
  scroll-snap-type: none;
}
.casino-buscar__grid > * { width: auto; min-width: 0; }
/* En grid manda grid-template-columns, no el flex-basis: se anula el
   ancho fijo para que las columnas repartan y la tarjeta salga exacta. */
.casino-buscar__grid > * { flex: initial; width: auto; }

@media (max-width: 559px) {
  .casino-buscar { padding-block: var(--s-3) var(--s-1); }
  .casino-buscar__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .casino-buscar__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Proveedor bajo el nombre del juego: mas chico y apagado, para
   identificar sin competir. */
.game-card__prov {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-secondary);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --- Cabecera de Casino: espaciado ---
   Mobile va mas apretado: el claim tiene que leerse pegado al titulo
   como una sola cabecera, no como dos bloques sueltos. */
@media (max-width: 559px) {
  .casino-top__claim { margin-bottom: var(--s-4); }
  .casino-top__lede { margin-top: var(--s-3); }
}

/* Ya no se centran en desktop: viven en la columna izquierda del hero
   compartido, alineados al borde del container igual que en Sportbook. */


/* ============================================================
   MOBILE — primera pantalla de Casino mas compacta
   ============================================================
   Objetivo: que el borde superior de los chips de proveedores se vea sin
   scroll, POR ENCIMA de la barra inferior fija.

   Medido antes a 390x844: la barra arranca en y=777 y los chips en 705.
   Ya asomaban, pero con 114px muertos entre la descripcion y el titulo
   de Proveedores — la suma del padding-bottom de la cabecera (48) mas el
   padding-top de la franja de chips (32) mas los margenes de rotulo.

   Todo lo que se toca es espacio vacio: ni el banner pierde altura, ni
   la descripcion pierde texto, ni se recorta nada. Sin position
   absolute, sin translate, sin superponer.

   El aumento del claim (+2px de alto) queda mas que compensado por los
   ~80px que se liberan. */
@media (max-width: 559px) {
  .casino-top {
    /* El header mide 60: quedaban 32 de aire por debajo, bastan 16. */
    padding-top: calc(var(--header-h) + var(--s-4));
    padding-bottom: var(--s-4);

    /* La cabecera se estira hasta que el carrusel de chips arranque
       JUSTO en el borde de lo visible, dejando asomar solo una franja.
       No se recorta nada: el carrusel empieza donde termina la primera
       pantalla, y lo que sobra queda naturalmente bajo el pliegue.

           alto = viewport - barra inferior - bloque del titulo - franja

       Los 109px son el bloque "Proveedores / Los estudios que ponen los
       juegos" con su padding y su margen. No es una estimacion: medido
       en 360, 390 y 430 da 108, 109 y 110 — el h2 va a dos lineas en
       todo el rango, asi que la altura es estable.

       svh y NO dvh: dvh cambia cuando las barras del navegador entran y
       salen, y con el alto atado a el la pagina daria un salto en pleno
       scroll. svh es el viewport chico, o sea el unico valor estable. */
    min-height: calc(100vh - 67px - 109px - 12px);
    min-height: calc(100svh - (67px + env(safe-area-inset-bottom, 0px)) - 109px - 12px);

    /* El sobrante NO se apila al final: se reparte arriba y abajo, asi
       la cabecera queda opticamente centrada en su pantalla en vez de
       dejar un hueco muerto justo antes del titulo de Proveedores. */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .casino-chips-sec .section__head { margin-bottom: var(--s-3); }

  /* --- Aire alrededor del buscador ---
     UN solo valor para los dos lados. Medido antes: 28px arriba
     (16 del padding de la franja de chips + 12 del buscador) y 16px
     abajo (4 del buscador + 12 del primer proveedor) — dos numeros
     distintos formados por margenes acumulados de tres bloques.

     La forma de que las dos distancias sean REALMENTE iguales, y no
     solo dos reglas con el mismo numero, es que el espacio lo aporte un
     unico elemento: se anula lo que ponian los vecinos y el buscador se
     queda con todo. Asi la simetria no depende de que tres valores
     sigan cuadrando entre si. */
  .casino-buscar { --casino-search-gap: 32px; }

  .casino-chips-sec { padding-block: var(--s-3) 0; }

  /* Arriba manda --casino-gap-hero, que escribe casino-view.js con la
     distancia real que hay en el hero entre la descripcion y el titulo
     "Proveedores". No se puede resolver en CSS: ese hueco es el sobrante
     que reparte el justify-content:center del hero dentro de un
     min-height atado a svh, o sea depende del alto del contenido, que
     CSS no sabe medir. Medido: 28px a 320x568 y 128.66 a 430x932 — no
     hay numero fijo que sirva para las dos.

     El 32px del fallback es el valor que habia antes: si el JS no corre,
     la pagina queda como estaba en vez de quedar sin aire.

     Abajo NO se toca: sigue en --casino-search-gap, los mismos 32px que
     ya estaban entre el buscador y Pragmatic. */
  .casino-buscar {
    padding-block: var(--casino-gap-hero, var(--casino-search-gap))
                   var(--casino-search-gap);
  }
  /* Solo el PRIMER proveedor: es el unico que toca el buscador. Los
     otros 38 conservan su separacion. */
  [data-casino-providers] > .casino-prov:first-child { padding-top: 0; }
}