/**
 * sections.css — Composición de cada sección de la landing.
 * Mobile primero: cada bloque se diseña para 320-430px y recién después
 * se recompone en tablet/desktop. No hay "desktop apilado".
 */

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-5));
  padding-bottom: var(--s-6);
  overflow: hidden;
}
.hero::before {
  /* Halo de marca. Un solo degradado, no 14 apilados. */
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 90%;
  background: radial-gradient(60% 60% at 50% 20%, rgba(68, 0, 115, 0.72), transparent 72%);
  pointer-events: none;
}

/* minmax(0,1fr) y min-width:0, no "1fr" a secas: un item de grid tiene
   min-width:auto por defecto, asi que NO puede encogerse por debajo del
   min-content de su contenido. El carrusel de banners (.hero__slides) tiene
   un min-content grande y estiraba la columna entera a 437px dentro de un
   viewport de 390 — medido. El overflow quedaba tapado por el clip global,
   que es red de seguridad, no arreglo. */
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.hero__grid > * { min-width: 0; }

.hero__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-4);
}
.hero h1 em { font-style: normal; color: var(--cta); }

.hero__sub {
  font-size: var(--fs-body);
  color: var(--text-body);
  max-width: 46ch;
  margin-bottom: var(--s-5);
}

.hero__cta { display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 400px) {
  .hero__cta { flex-direction: row; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1024px) {
  .hero__cta .btn { flex: 0 0 auto; }
}

/* Datos duros del hero: los 3 claims verificados. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}
.hero__fact b {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.85rem + 1vw, 1.6rem);
  color: var(--cta);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hero__fact span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 3px;
}

/* Carrusel de banners del hero */
.hero__media { position: relative; }
.hero__slides {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  /* mandatory (y no proximity como en los carruseles de tarjetas): los
     slides son de ancho completo, tienen que quedar siempre alineados,
     nunca a medio camino. */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  border-radius: var(--r-lg);
  scrollbar-width: none;
}
.hero__slides::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__slides { scroll-behavior: auto; } }

.hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  /* 16/9 en todos los anchos: es la proporcion nativa de los dos archivos.
     Antes era 16/10 en mobile — con la imagen real habria recortado. */
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--grad-hero);
  display: block;
}

/* Los banners miden 1672x941 = 16/9 exacto, y el slide usa ese mismo
   ratio: con object-fit:cover no hay recorte NI deformacion — la caja y la
   imagen tienen la misma proporcion. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Efecto "fade" (Carousel Studio, Editix) — el motor real sigue siendo
   este mismo carrusel, solo cambia CÓMO se muestra el slide activo:
   scroll horizontal (default) vs. stack con crossfade de opacidad. Se
   activa con `data-effect="fade"` en el propio `.hero__slides`, que
   pone `js/modules/hero.js` — nunca al revés, el CSS solo reacciona al
   atributo, no decide nada por su cuenta. */
.hero__slides[data-effect="fade"] {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  position: relative;
  aspect-ratio: 16 / 9;
}
.hero__slides[data-effect="fade"] .hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms var(--ease-std, ease);
  pointer-events: none;
}
.hero__slides[data-effect="fade"] .hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slides[data-effect="fade"] .hero__slide { transition: none; }
}

/* Crossfade (Ronda 44 — Carousel Editor Profesional): mismo mecanismo
   de stack absoluto + opacidad que "fade" arriba — la diferencia REAL
   (no solo el nombre) es que duración/curva son controlables en vivo
   por Editix vía las custom properties `--hero-crossfade-*` (hero.js
   las fija en cada `apply()`; "fade" arriba sigue con su duración fija
   de 500ms, sin cambios), más un leve zoom de entrada/salida
   (transform) que "fade" no tiene. */
.hero__slides[data-effect="crossfade"] {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  position: relative;
  aspect-ratio: 16 / 9;
}
.hero__slides[data-effect="crossfade"] .hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity var(--hero-crossfade-dur, 700ms) var(--hero-crossfade-ease, ease-in-out), transform var(--hero-crossfade-dur, 700ms) var(--hero-crossfade-ease, ease-in-out);
  pointer-events: none;
}
.hero__slides[data-effect="crossfade"] .hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slides[data-effect="crossfade"] .hero__slide { transition: none; transform: none; }
}

.hero__dots { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.hero__dot {
  /* El indicador visible mide 4px de alto, pero el boton entero cubre 44:
     el area tactil nunca la define el adorno. */
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
}
.hero__dot::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--border);
  transition: background var(--d-fast) var(--ease-std), width var(--d-fast) var(--ease-std);
}
.hero__dot.is-active::before { background: var(--cta); width: 30px; }

/* --- Hero desktop: primera pantalla completa ------------------------
   SOLO >=1024px. Mobile y tablet angosto no se tocan.

   Lo medido a 1440x900 antes del cambio: el hero terminaba en 657, la
   franja de Medios de pago ocupaba 657-755 y quedaban 145px de viewport
   vacio debajo. La franja se leia flotando a media altura, con un hueco
   muerto abajo.

   La correccion NO es bajar la franja con un margen ni con position
   absolute: es darle al hero el alto que le falta para que Medios de
   pago caiga por si sola al borde inferior, dentro del flujo normal.

       min-height = 100svh - alto de la franja  ->  900 - 98 = 802

   svh y no vh ni dvh: vh promete alto que en un navegador con barras no
   existe, y dvh cambia cuando las barras entran y salen, que es
   justamente el salto que no queremos. svh es el viewport chico, o sea
   el unico valor estable.

   Los 145px que sobran NO se apilan al final (eso seria el hueco que hay
   que evitar): el hero pasa a flex column con justify-content:center y
   la composicion se reparte el espacio arriba y abajo. Y como el
   padding-top ya incluye la altura del header, el resultado queda
   opticamente centrado entre el borde del header y la franja de pagos:
   136px arriba y 136px abajo, medido. Nada se movio de sitio dentro del
   hero — titulo, banner, CTA y datos conservan tamano, orden y
   proporcion; solo bajan en bloque hasta quedar equilibrados.

   Si la ventana es mas baja que el contenido, min-height no achica nada:
   el hero crece a lo que necesite y la franja se va abajo del pliegue,
   sin recortes. */
@media (min-width: 1024px) {
  .hero {
    /* Alto real de la franja de Medios de pago en desktop, medido en
       vivo: 24 de padding + 50 de contenido + 24 = 98. Es el unico
       numero que hay que tocar si esa franja cambia de alto. */
    --pay-h: 98px;
    min-height: calc(100vh - var(--pay-h));
    min-height: calc(100svh - var(--pay-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-h) + var(--s-8));
    padding-bottom: var(--s-8);
  }
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: var(--s-8); }
}

/* Desktop BAJO (<=800px de alto: 1280x720, 1366x768 y notebooks 16:9).
   Ahi el hero natural mide 657 y el viewport util para el solo da 622:
   la franja de pagos terminaba en 755, o sea 35px por debajo del pliegue,
   y los chips no llegaban a verse.

   No se toca ni el titulo, ni el banner, ni los CTA: se recorta el aire
   vertical del hero, que es lo unico que sobra. 64 -> 32 arriba y abajo
   devuelve 64px, mas que los 35 que faltaban, y con eso el min-height
   vuelve a mandar y la franja cae al borde inferior en vez de cruzarlo.

   Solo alto: el ancho sigue siendo >=1024, asi que mobile no entra por
   ningun lado. */
/* Banda angosta de desktop: la franja de pagos mide 131, no 98.
   Los 12 chips necesitan 1024px de fila para entrar en un renglon, y el
   contenedor deja de darselos cuando el layout baja de 1264 — ahi el
   container ya no alcanza su max-width de 1280 y el contenido cae por
   debajo de 1200. Desde 1264 -> una fila; por debajo -> dos.

   Sin esta correccion el hero se calculaba 33px de menos y la franja
   terminaba cruzando el pliegue justo en ese rango. Medido a 1248
   (2 filas, 131) y a 1300 (1 fila, 98). */
@media (min-width: 1024px) and (max-width: 1263px) {
  .hero { --pay-h: 131px; }
}

@media (min-width: 1024px) and (max-height: 800px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: var(--s-6);
  }
}

/* --- Hero mobile: titulo + banner en la misma pantalla --------
   SOLO <=559px. Desktop y tablet no se tocan.

   El problema medido a 390x844: el banner terminaba en 867 y el area util
   llega a 777 — quedaba 90px cortado. Y no era solo cuestion de compactar:
   en el orden original el banner va DESPUES del subtitulo, los CTA y los
   datos, y a 320x568 (441px utiles) esos tres bloques solos ya no dejan
   lugar para el banner. Por eso se reordena.

   Orden visual en mobile:  tags -> titulo -> banner -> subtitulo -> CTA -> datos.

   display:contents sobre el envoltorio de texto es lo que permite ordenar
   sus hijos junto con el banner, que es hermano del envoltorio y no podria
   intercalarse de otra forma sin tocar el DOM (y con eso, el desktop). */
@media (max-width: 559px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--s-3));
    padding-bottom: var(--s-5);
  }

  .hero__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* El envoltorio de texto deja de generar caja: sus hijos pasan a ser
     items directos del flex y pueden ordenarse. */
  .hero__grid > div:first-child { display: contents; }

  .hero__tags  { order: 1; margin-bottom: var(--s-3); }
  .hero h1     { order: 2; margin-bottom: var(--s-4); }
  .hero__media { order: 3; }
  .hero__sub   { order: 4; margin-top: var(--s-4); margin-bottom: var(--s-4); }
  .hero__cta   { order: 5; }
  .hero__facts { order: 6; margin-top: var(--s-4); padding-top: var(--s-4); }

  /* Titulo: se ajusta el interlineado y un punto de tamano, no se achica
     de mas. Sigue siendo el elemento dominante de la pantalla. */
  .hero h1 { font-size: clamp(1.75rem, 1.05rem + 3.4vw, 2.4rem); line-height: 1.04; }
  .hero__sub { font-size: 14px; line-height: 1.5; }

  /* El banner conserva su aspect-ratio (16/10): el alto sale del ancho, asi
     que nunca se deforma ni se recorta. */
  .hero__dots { margin-top: var(--s-2); }
}

/* Viewports cortos: con 568px de alto el area util es 441px. Se comprime
   la cabecera del hero, nunca la proporcion del banner. */
@media (max-width: 559px) and (max-height: 700px) {
  .hero { padding-top: calc(var(--header-h) + var(--s-2)); }
  .hero__tags { margin-bottom: var(--s-2); }
  .hero h1 { font-size: 1.6rem; margin-bottom: var(--s-3); }
  .hero__sub { font-size: 13px; margin-top: var(--s-3); margin-bottom: var(--s-3); }
  .hero__facts { margin-top: var(--s-3); padding-top: var(--s-3); }
}

/* ============================================================
   PAYMENT STRIP — franja de pagos, sección propia
   ============================================================ */

.pay {
  padding-block: var(--s-5);
  border-block: 1px solid var(--border-soft);
  /* Translucida, no opaca: deja pasar el fondo global para que la franja no
     se lea como un rectangulo pegado encima. */
  background: rgba(19, 5, 22, 0.42);
}
.pay__inner { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .pay__inner { grid-template-columns: auto 1fr; gap: var(--s-6); } }

.pay__label b {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.pay__label span { font-size: var(--fs-xs); color: var(--text-secondary); }

.pay__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* El chip es solo el marco. La imagen es un tile de marca con fondo propio
   (Amex azul, Itau naranja...), no un logo transparente, asi que el chip no
   lleva fondo ni borde: se veria un recuadro alrededor del tile.

   Ratio 2.15 = la mediana de los 12 archivos (van de 2.00 a 2.24). Con
   object-fit:contain cada logo entra entero con su propia proporcion; la
   diferencia contra 2.15 se resuelve como unos pocos px de aire, invisible
   porque el chip es transparente. Ninguno se recorta ni se estira.

   DESKTOP: ancho fijo -> los 12 chips miden exactamente igual. */
.pay__item {
  display: block;
  width: 78px;
  aspect-ratio: 2.15;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: transparent;
  border: 0;
  flex: 0 0 auto;
}
.pay__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* MOBILE: 4 por fila exactos. Grid de 4 columnas iguales — el ancho sale
   de (contenedor - 3 gaps) / 4, asi que entran completos en cualquier
   viewport sin overflow y sin achicar los logos a mano. */
@media (max-width: 559px) {
  .pay__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
  }
  .pay__item { width: auto; }
}

/* ============================================================
   BENEFICIOS
   ============================================================ */

.benefits__grid { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

/* ============================================================
   CASINO — píldoras de categoría + carrusel
   ============================================================ */

/* Misma correccion que el track: sin sangrado, la fila arranca y termina
   sobre las mismas lineas verticales que el resto de la pagina. Antes
   sangraba hasta el borde de pantalla y el extremo derecho no coincidia
   con el del contenido. */
.cats {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: 0 0 var(--s-4);
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }

.cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  white-space: nowrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  touch-action: manipulation;
  transition: background var(--d-fast) var(--ease-std), color var(--d-fast) var(--ease-std);
}
.cat:hover { color: var(--text-primary); }
/* Píldora activa: el violeta real de Progambling. */
.cat.is-active { background: var(--violet-primary); color: #fff; border-color: var(--violet-primary); }

/* Mobile: version compacta de los chips. Mismo diseno, colores, radio y
   orden — solo baja la escala para que la fila ocupe menos y la seccion
   respire mas. */
@media (max-width: 559px) {
  .cats { gap: 6px; padding-bottom: var(--s-3); }
  .cat {
    min-height: 34px;
    padding: 0 var(--s-3);
    font-size: 12px;
    border-radius: var(--r-sm);
  }
}

/* ============================================================
   SPORTBOOK
   ============================================================ */

.sportbook { position: relative; }
.markets {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--s-5);
}
@media (min-width: 640px) { .markets { grid-template-columns: repeat(4, 1fr); } }

.market {
  padding: var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  text-align: center;
}
.market b {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-transform: uppercase;
}
.market span { font-size: 11px; color: var(--text-secondary); }

/* ============================================================
   CLUB VIP — la sección premium
   ============================================================ */

.vip {
  position: relative;
  overflow: hidden;
}
.vip__panel {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--grad-vip);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 1024px) { .vip__panel { padding: var(--s-8) var(--s-7); } }

.vip__panel::before {
  content: "";
  position: absolute;
  inset: -40% 40% 40% -20%;
  background: radial-gradient(circle, var(--glow-violet), transparent 68%);
  pointer-events: none;
}
.vip__inner { position: relative; z-index: 1; }

/* --- Tarjetas del Club VIP ---------------------------------
   UNA sola clase para las 6. Antes eran tres componentes distintos
   (.tier / .tier--next / .tier--unknown / .vip__mod) con paddings, fondos,
   bordes y alturas propios: 197/218/218/137/137/158 px medidos a 390.
   Ahora todas heredan exactamente el tratamiento de la primera tarjeta
   (la aprobada): fondo oro al 6%, borde oro al 40%, radio 10, padding 24.
   La diferenciacion viene del contenido, no del estilo — por eso no hay
   ni un solo modificador por tarjeta. */
.vip__cards {
  display: grid;
  gap: var(--s-3);
  margin-block: var(--s-6);
  /* grid-auto-rows:1fr es lo que iguala las alturas: todas las filas miden
     lo mismo que la mas alta, asi que una tarjeta con mas texto ya no
     estira solo su fila. Vale para 1, 2 o 3 columnas. */
  grid-auto-rows: 1fr;
}
@media (min-width: 560px) { .vip__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .vip__cards { grid-template-columns: repeat(3, 1fr); } }

.vip-card {
  display: flex;
  flex-direction: column;
  /* min-width:0 por la misma razon que en el hero: un item de grid no se
     encoge por debajo de su min-content si no se le dice. */
  min-width: 0;
  padding: var(--s-5);
  background: rgba(255, 210, 0, 0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);
}

.vip-card__medal {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #a86b3c, #6d3f22);
  color: #fff;
}
.vip-card__medal svg { width: 22px; height: 22px; }

.vip-card__step {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.vip-card__name {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--cta);
  margin-bottom: var(--s-2);
}

.vip-card__note {
  font-size: 13px;
  color: var(--text-body);
}

/* ============================================================
   CÓMO EMPEZAR — secuencia real, la numeración informa
   ============================================================ */

.steps { display: grid; gap: var(--s-4); counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  counter-increment: step;
  padding: var(--s-5);
  padding-top: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cta);
}
.step b { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--s-2); color: var(--text-primary); }
.step p { font-size: var(--fs-sm); color: var(--text-body); }

/* ============================================================
   CONFIANZA
   ============================================================ */

.trust__grid { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust__grid { grid-template-columns: repeat(3, 1fr); } }

.trust__item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.trust__item svg { width: 22px; height: 22px; color: var(--success); flex: 0 0 auto; margin-top: 2px; }
.trust__item b { display: block; font-family: var(--f-display); font-weight: 700; color: var(--text-primary); font-size: var(--fs-sm); margin-bottom: 3px; }
.trust__item span { font-size: 13px; color: var(--text-body); }

/* ============================================================
   FAQ
   ============================================================ */

.faq__list { max-width: 780px; }

/* ============================================================
   CTA FINAL
   ============================================================ */

.final {
  position: relative;
  padding: var(--s-7) var(--s-5);
  background: var(--grad-vip);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  overflow: hidden;
}
@media (min-width: 1024px) { .final { padding: var(--s-8); } }

.final::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: radial-gradient(circle at 50% 100%, var(--glow-gold), transparent 66%);
  pointer-events: none;
}
.final__inner { position: relative; z-index: 1; }
.final h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; margin-bottom: var(--s-3); }
.final p { font-size: var(--fs-body); color: var(--text-body); max-width: 52ch; margin: 0 auto var(--s-5); }
.final .btn { min-width: 240px; }
.final__note { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-secondary); }

/* NOTA DE ORDEN: este bloque va DELIBERADAMENTE al final del archivo.
   Es una capa de override para mobile y sus selectores (.ptrack__rail)
   tienen la MISMA especificidad que los grid de cada seccion
   (.vip__cards, .trust__grid). Si estuviera antes, esos grid le
   ganarian por orden y el rail no se pondria horizontal.
   Ya paso: Confianza quedaba apilada en vertical. */

/* ============================================================
   PINNED TRACK — "scroll vertical -> movimiento horizontal"
   Sistema COMPARTIDO. Hoy lo usan Club VIP y Confianza; antes vivia
   duplicado en las clases .vip__*. Solo mobile (<=559px): de 560 en
   adelante cada seccion vuelve a su grid y estas reglas no aplican.

   Arquitectura y por que:
   La seccion se hace mas alta que la pantalla y su contenido queda
   "pinneado" con position:sticky. Ese alto extra ES el recorrido: a
   medida que la pagina scrollea de forma NATURAL,
   js/modules/pinned-track.js traduce ese progreso (0..1) en un
   translate3d horizontal del rail.

   Nada intercepta el gesto: no hay preventDefault, ni wheel hijacking, ni
   scrollTo. El usuario siempre esta scrolleando la pagina de verdad, asi
   que el "scroll jail" no puede ocurrir: cuando la seccion termina, el
   sticky se suelta solo y la pagina sigue. Tambien por eso funciona igual
   con touch que con rueda: no depende del tipo de evento.
   ============================================================ */

/* El espaciador solo existe en mobile, donde el pin recorre. */
.ptrack__spacer { display: none; }

@media (max-width: 559px) {
  .ptrack {
    /* CRITICO: position:sticky deja de funcionar si CUALQUIER ancestro
       tiene un overflow distinto de visible — se convierte en el
       contenedor de scroll y el sticky se pega a algo que no scrollea.
       .section trae overflow-x:clip (puesto para contener los .glow).
       Ninguna seccion con pinned track tiene .glow, asi que puede
       recuperar overflow visible sin reabrir aquel problema. Sin esta
       linea el pin no se pega y el recorrido horizontal no ocurre. */
    overflow: visible;

    /* Pista de la siguiente tarjeta y separacion. */
    --ptrack-peek: 16px;
    --ptrack-gap: 12px;
    /* Cuanto scroll vertical cuesta pasar de una tarjeta a la siguiente.
       ~0.45 de pantalla = aprox un gesto de pulgar por tarjeta. */
    --ptrack-step: 45dvh;
    /* Alto REAL de la bottom-nav, medido en vivo: 67px (5 + item 56 + 5 +
       borde). El token global --bottomnav-h dice 62 y quedo desfasado; no
       se toca porque lo usa el padding del body. Se le suma la safe-area. */
    --ptrack-nav-h: calc(67px + env(safe-area-inset-bottom, 0px));
    /* Cantidad de items del recorrido. Se sobreescribe por seccion. */
    --ptrack-count: 6;

    padding-block: var(--s-5);
  }
  /* Estas dos tienen 4 items, no 6. */
  .benefits, .startup { --ptrack-count: 4; }

  /* El glow decorativo de "Por que aca" se sale de la seccion por diseno
     (inset negativo). Con .ptrack recuperando overflow:visible para que el
     sticky funcione, ese glow generaba scroll horizontal. Se retira en
     mobile: el panel ya trae su propio glow interno. */
  .benefits > .glow { display: none; }

  /* El recorrido. Va como elemento en el flujo (no como padding de la
     seccion) porque el sticky se limita al content box del padre: con
     padding el pin no tendria espacio para viajar.
     Se calcula sobre --ptrack-count: son (n-1) saltos para n tarjetas. Con
     un 5 fijo, una seccion de 4 items recorria de mas y quedaba congelada
     al final. Cada seccion declara su cantidad mas abajo. */
  .ptrack__spacer {
    display: block;
    height: calc((var(--ptrack-count) - 1) * var(--ptrack-step));
  }

  .ptrack__pin {
    position: sticky;
    top: var(--header-h);
    /* El pin ocupa el AREA UTIL COMPLETA (viewport menos header y menos
       bottom-nav) y centra su contenido con flex. De esa forma el centrado
       lo resuelve el propio layout: no hay que calcular el alto del panel
       en JS, ni ir ajustando `top`, ni hacer excepciones por viewport.

       dvh y no vh: vh mide el viewport con las barras del navegador
       retraidas, o sea promete alto que en mobile no existe cuando las
       barras estan desplegadas. La primera linea es fallback para
       navegadores sin dvh. */
    height: calc(100vh - var(--header-h) - var(--ptrack-nav-h));
    height: calc(100dvh - var(--header-h) - var(--ptrack-nav-h));
    display: flex;
    /* stretch y no center: la tarjeta principal ocupa el area util
       completa, asi las dos secciones pinneadas rinden EXACTAMENTE la
       misma medida sin numeros magicos. El centrado del contenido pasa a
       resolverse adentro del panel (columna flex), no acomodando un panel
       mas chico dentro del pin. */
    align-items: stretch;
  }
  /* La cadena tiene que tener alto definido de punta a punta: si este
     contenedor intermedio queda en auto, el height del panel no resuelve
     contra nada y vuelve a medir por contenido.
     center en los dos ejes: el panel ya no llena el area util (mide 85%),
     asi que el aire sobrante queda repartido parejo arriba/abajo e
     izquierda/derecha. */
  .ptrack__pin > .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Ventana: recorta el rail. El overflow es hidden y no auto — el
     desplazamiento lo maneja el transform, no un scroller anidado. Un
     scroller anidado aca seria justamente lo que genera el jail. */
  .ptrack__viewport {
    overflow: hidden;
    margin-block: var(--s-4);
  }

  /* Rail horizontal. Solo se anima transform: nunca left, margin ni
     width, que dispararian reflow en cada frame. align-items:stretch es
     lo que mantiene las 6 tarjetas a la misma altura y en la misma
     posicion vertical: la cinta no "salta". */
  .ptrack__rail {
    display: flex;
    flex-direction: row;
    gap: var(--ptrack-gap);
    grid-auto-rows: auto;
    align-items: stretch;
    will-change: transform;
    /* El transform lo escribe el JS. transition solo en opacity: si el
       transform tuviera transicion, cada actualizacion de scroll animaria
       560ms y el movimiento iria arrastrado. */
    transition: opacity var(--d-slow) var(--ease-out);
  }

  /* Ancho de tarjeta = ventana menos el gap menos la pista. Con eso, un
     paso del rail (ancho + gap) deja exactamente la pista de la siguiente
     asomando. La proporcion se mantiene sola en cualquier viewport. */
  .ptrack__rail > * {
    flex: 0 0 calc(100% - var(--ptrack-gap) - var(--ptrack-peek));
    width: calc(100% - var(--ptrack-gap) - var(--ptrack-peek));
    height: auto;
  }

  /* El reveal por tarjeta se apaga: el escalonado dejaria tarjetas en
     opacity:0 fuera de la ventana y la pista de la siguiente nunca se
     veria. El fade se conserva a nivel grupo (el rail lleva .reveal). */
  .ptrack__rail > .reveal,
  .ptrack__rail > .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Indicacion discreta + contador, debajo del titulo. Pierden
     protagonismo apenas el usuario empieza a avanzar. */
  .ptrack__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-2);
  }
  .ptrack__hint {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--s-2);
    font-size: 11.5px;
    color: var(--text-secondary);
    transition: opacity var(--d-mid) var(--ease-std);
  }
  .ptrack__hint svg { width: 14px; height: 14px; flex: 0 0 auto; }
  .ptrack[data-ptrack-started] .ptrack__hint { opacity: 0; }

  .ptrack__counter {
    /* No parte en dos lineas cuando el panel se angosta: el contador es
       corto y fijo, el que cede espacio es el texto de ayuda. */
    white-space: nowrap;
    flex: 0 0 auto;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--cta);
    font-variant-numeric: tabular-nums;
  }

  /* --- Tarjeta principal COMPARTIDA -------------------------------
     Un solo componente para las dos secciones pinneadas. Antes Confianza
     tenia su propia piel plana y quedaba de 358x367 al lado de los 358x594
     de Club VIP: se leian como dos sistemas distintos.

     Vive SOLO dentro de este media query. En desktop no existe, asi que
     cada seccion conserva alli exactamente el layout que ya tenia.

     height:100% es lo que garantiza que ambas midan igual: el pin ya mide
     el area util real (dvh menos header menos bottom-nav), asi que las dos
     tarjetas rinden identico en cualquier viewport, sin numeros magicos y
     sin depender de cuanto contenido tenga cada una. */
  .ptrack__panel {
    position: relative;
    /* 85% del area util en AMBOS ejes: reduccion real de layout, no un
       transform:scale (que achicaria los pixeles pero dejaria el texto
       renderizado a otro tamano y el hit-area desalineada).
       El contenedor mide el area util exacta, asi que este porcentaje se
       traduce en medidas reales identicas entre las cuatro secciones en
       cualquier viewport.
       89.25% = el 85% anterior x 1.05 (el +5% pedido). Se expresa como
       porcentaje y no como px: sigue siendo layout real, no transform. */
    flex: 0 0 auto;
    /* Ancho COMPLETO del container: el pin ya esta dentro de .container, asi
       que 100% aqui son exactamente las mismas lineas verticales que usa el
       resto de la pagina (hero, banners, carruseles). Sin margenes propios
       ni offsets: el padding lateral lo sigue poniendo el container. */
    width: 100%;
    height: 89.25%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--s-5) var(--s-4);
    background: var(--grad-vip);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .ptrack__panel::before {
    content: "";
    position: absolute;
    inset: -40% 40% 40% -20%;
    background: radial-gradient(circle, var(--glow-violet), transparent 68%);
    pointer-events: none;
  }

  /* El contenido se reparte en columna y la ventana del carrusel se queda
     con el espacio sobrante, centrada. Asi la informacion se distribuye
     sola en la pantalla en vez de amontonarse arriba — y no hace falta
     recortar tipografia ni esconder texto para que entre. */
  .ptrack__panel > * { position: relative; z-index: 1; }
  .vip__inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

  .ptrack__viewport {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
  }
  /* La tarjeta mide por su contenido, con techo en el alto de la ventana.
     Estirarla al 100% se probo y no sirve: una tarjeta de 530px con 200px
     de contenido se lee vacia por dentro. Asi toma una altura proporcionada
     y el aire sobrante lo reparte el viewport arriba y abajo (centrado),
     que se ve intencional en vez de hueco. */
  .ptrack__viewport > .ptrack__rail { width: 100%; height: auto; }

  /* --- Tarjetas internas: un solo formato para las cuatro secciones ---
     La referencia es la tarjeta de Confianza (medida: 296x311 a 390px, o
     sea vertical, ratio ~0.95). Antes cada seccion tenia el suyo: 1.45,
     1.50 y 1.84 (apaisadas) contra 0.95 de Confianza.

     aspect-ratio y no una altura fija: el ancho ya sale de la misma
     formula del rail en las cuatro, asi que con la misma proporcion las
     cuatro tarjetas miden exactamente igual en cualquier viewport, sin
     numeros magicos por breakpoint.

     El contenido de cada una no se toca: solo el formato del contenedor. */
  .ptrack__rail > * {
    aspect-ratio: 0.95;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--s-5) var(--s-4);
  }
  /* El paso de "Como empezar" es un <li> (display:list-item): hay que
     declararlo flex explicitamente o no toma la direccion en columna. */
  .ptrack__rail > .step { display: flex; padding-top: var(--s-6); }
  .ptrack__rail > .step::before { top: var(--s-4); left: var(--s-4); }

  /* El contenido se centra verticalmente dentro de la tarjeta ya estirada,
     en vez de quedar pegado al borde superior. */
  /* En la cinta la tarjeta es alta y angosta: el icono pasa arriba y el
     texto debajo, como en las tarjetas de Club VIP. En fila, el icono
     quedaba centrado al costado de un parrafo de 4 lineas y se leia
     desalineado. El contenido va centrado como grupo. */

  .vip .section__head { margin-bottom: var(--s-3); }
  /* Con el panel al 85% la columna de texto es mas angosta y el parrafo
     envuelve mas: a 360px el encabezado llegaba a 238px y le comia el
     espacio a la ventana del carrusel. Se ajusta el interlineado y un
     punto de tamano — no se recorta ni se oculta texto. */
  .vip .section__lede { font-size: 12.5px; line-height: 1.5; }
  .trust .section__head { margin-bottom: var(--s-3); }
  .benefits .section__head,
  .startup .section__head { margin-bottom: var(--s-3); }

  /* Items internos: mismo criterio que en Confianza — se reparte el
     espacio con mas aire ahora que el panel los contiene. */

  /* Las tarjetas de Club VIP tambien se compactan un escalon, acompanando
     la reduccion del contenedor. */
  .ptrack__rail > .vip-card { padding: var(--s-4); }
  .ptrack__rail > .vip-card .vip-card__medal { margin-bottom: var(--s-2); }

  /* Confianza traia el interior mas holgado de las cuatro y su contenido
     (338px) desbordaba la altura compartida, estirando SOLO su tarjeta.
     Se ajusta la distribucion interna — icono, gap e interlineado — para
     que entre en la misma caja que las demas. El texto no se recorta.
     Conserva el contenedor circular verde del icono, su rasgo propio. */
  .trust .trust__item { background: var(--bg-elevated); gap: var(--s-3); }
  .trust .trust__item svg {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 50%;
    background: rgba(61, 214, 140, 0.12);
    border: 1px solid rgba(61, 214, 140, 0.28);
    margin-top: 0;
  }
  .trust .trust__item b { font-size: var(--fs-sm); margin-bottom: var(--s-1); }
  .trust .trust__item span { font-size: var(--fs-sm); line-height: 1.5; }
}

/* Viewports cortos (iPhone SE 1a gen). A 320x568 el area util real es
   441px: 568 menos header y bottom-nav. Se compacta la CABECERA, nunca la
   tarjeta. */
@media (max-width: 559px) and (max-height: 700px) {
  .ptrack { --ptrack-step: 55dvh; padding-block: var(--s-3); }
  .ptrack__viewport { margin-block: var(--s-1); }
  /* Con 568px de alto el area util es 441px y el panel al 89.25% dejaba
     ventanas de apenas 168px en "Como empezar" (su CTA y su encabezado se
     comen el panel). Aca el panel toma el area util completa para que las
     cuatro tarjetas puedan compartir tamano sin recortarse. */
  .ptrack__panel { height: 100%; }
  .vip .hero__cta .btn, .startup .hero__cta .btn { min-height: 40px; }
  /* Incluso recuperando todo ese espacio, con 568px de alto la ventana mas
     chica es la de "Como empezar" (227px, por su CTA): la proporcion
     vertical de Confianza (0.95) pediria 255 y la tarjeta quedaria
     recortada. 1.06 es el maximo que entra en las CUATRO, asi que siguen
     midiendo exactamente igual entre si — apenas menos altas. Es el limite
     geometrico de ese viewport, no una preferencia. */
  .ptrack__rail > * { aspect-ratio: 1.06; }

  .ptrack__panel { padding: var(--s-2); }
  .vip .section__head { margin-bottom: var(--s-2); gap: 2px; }
  /* En 568px de alto la prioridad es titulo + tarjeta + pista. El parrafo
     de apoyo se retira: el h2 y las propias tarjetas ya cuentan de que se
     trata, y dejarlo empujaba la tarjeta detras de la barra inferior. */
  .vip .section__lede { display: none; }
  .vip .btn--lg { min-height: var(--tap); font-size: var(--fs-sm); }
  .vip .hero__cta { margin-top: var(--s-2) !important; }
  /* Mismo criterio que en Confianza: con el panel al 85% y 568px de alto,
     se comprime la distribucion interna (medalla, paddings, interlineado),
     nunca el contenido. */
  .ptrack__rail > .vip-card { padding: 10px; }
  .ptrack__rail > .vip-card .vip-card__medal {
    width: 34px; height: 34px; margin-bottom: var(--s-2);
  }
  .ptrack__rail > .vip-card .vip-card__medal svg { width: 17px; height: 17px; }
  .ptrack__rail > .vip-card .vip-card__name { margin-bottom: var(--s-1); }
  .ptrack__rail > .vip-card .vip-card__note { line-height: 1.4; }

  .trust .section__head { margin-bottom: var(--s-2); gap: 2px; }
  /* Con el panel al 85% y solo 568px de alto, el espaciado generoso que
     funciona en pantallas grandes ya no entra y el texto quedaba cortado.
     Se comprime la DISTRIBUCION (icono, gaps, interlineado, padding), no
     el contenido: no se recorta ni se oculta nada. */
  .trust .trust__item {
    padding: 10px;
    gap: var(--s-2);
  }
  .trust .trust__item svg { width: 32px; height: 32px; padding: 7px; }
  .trust .trust__item b { font-size: var(--fs-sm); margin-bottom: var(--s-1); }
  .trust .trust__item span { font-size: 13px; line-height: 1.4; }

  /* Mismo criterio en las otras dos: se comprime la DISTRIBUCION (padding,
     icono, interlineado), nunca el contenido. */
  .ptrack__rail > .card {
    padding: 10px;
    gap: var(--s-2);
  }
  .ptrack__rail > .card .card__icon { width: 34px; height: 34px; }
  .ptrack__rail > .card .card__icon svg { width: 17px; height: 17px; }
  .ptrack__rail > .card .card__text { font-size: 13px; line-height: 1.45; }

  .ptrack__rail > .step { padding: 22px 10px 10px; }
  .ptrack__rail > .step::before { top: 8px; left: 10px; }
  .ptrack__rail > .step b { margin-bottom: var(--s-1); }
  .ptrack__rail > .step p { font-size: 13px; line-height: 1.45; }
}

/* De 560 en adelante nada del pinned track aplica: pin y ventana son divs
   neutros, y cada rail vuelve a ser el grid aprobado de su seccion. */
@media (min-width: 560px) {
  .ptrack__hint,
  .ptrack__meta { display: none; }
  .ptrack__rail.reveal { opacity: 1; transform: none; transition: none; }
  /* Fuera de mobile el panel es un div neutro en todas las secciones menos
     Club VIP, que conserva su .vip__panel de siempre. Asi el desktop de
     Confianza, Por que aca y Como empezar no cambia. */
  .ptrack__panel:not(.vip__panel) {
    height: auto;
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .ptrack__panel:not(.vip__panel)::before { display: none; }
}

/* ============================================================
   MOBILE: "Por que aca" y "Confianza" no se muestran
   ============================================================
   Solo <=559px. En desktop las dos secciones siguen existiendo tal
   cual — este bloque no las toca ahi.

   display:none y no visibility/opacity/height:0: hace falta que
   desaparezca el SUBARBOL ENTERO, no que quede invisible ocupando
   sitio. En particular se lleva puesto el .ptrack__spacer, que es el
   elemento que le da a estas secciones su recorrido de scroll (en
   Confianza, 5 x 45dvh de alto). Con visibility:hidden ese espaciador
   seguiria en el flujo y quedaria un tramo enorme de scroll vacio
   justo donde antes estaba la seccion — exactamente el "espacio
   muerto" que hay que evitar. Con display:none no queda ni caja, ni
   padding, ni margen, ni sticky: el pin deja de tener contexto y las
   secciones vecinas se tocan con su spacing normal.

   Selector por id: gana por especificidad a cualquier regla de clase
   sin importar el orden en el archivo, asi que no depende de donde
   este escrito este bloque.

   El JS que las animaba se apaga aparte, en pinned-track.js: no
   alcanza con ocultarlas en CSS si el modulo sigue midiendo y
   escribiendo transforms sobre ellas. */
@media (max-width: 559px) {
  #beneficios,
  #confianza {
    display: none;
  }
}