/* ==========================================================================
   Soccer Fit Ibagué
   Sistema: una superfamilia variable (Archivo) explotada por el eje de ancho,
   un solo acento (rojo de marca), tema oscuro bloqueado en toda la página.
   Radios: elementos interactivos = píldora. Superficies = recto.
   ========================================================================== */

:root {
  --ink:       #0A0B0D;
  --ink-2:     #12161C;
  --ink-3:     #1B222C;
  --bone:      #EDEAE4;
  --bone-dim:  #A8AEB6;
  --steel:     #7C8794;
  --red:       #E4032E;
  --red-lite:  #FF3B57;
  --line:      rgba(237, 234, 228, 0.14);

  --pad: max(clamp(1.25rem, 5vw, 5rem), env(safe-area-inset-left));
  --gap: clamp(1rem, 2.2vw, 2rem);
  --section-y: clamp(3.75rem, 11vw, 11rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;

  --z-nav: 40;
  --z-hud: 45;
  --z-skip: 60;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-tap-highlight-color: rgba(228, 3, 46, 0.24);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* El nav flotante mide 64px + 0.9rem: los anclas no pueden quedar debajo */
[id] { scroll-margin-top: 6.5rem; }

a, button { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--red-lite);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-skip);
  background: var(--bone); color: var(--ink);
  padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Tipografía display ---------- */

.hero__title,
.manifiesto__text,
.sesion__head h2,
.cambia__title,
.precios__lead h2,
.comunidad__head h2,
.donde__info h2,
.cierre__body h2,
.paso__title {
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 0.88;
  margin: 0;
  text-wrap: balance;
}

.hud__label, .hud__time, .paso__time, .tarifas__head,
.tarifas__list, .datos dt, .foot__credit, .manifiesto__foot {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Botones ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn > span:first-child { display: block; }

.btn--primary { --btn-bg: var(--red); --btn-fg: #FFFFFF; }
.btn--primary:hover { background: #C60228; }

.btn--ghost {
  --btn-fg: var(--bone);
  border-color: var(--line);
  background: rgba(237, 234, 228, 0.05);
  padding-right: 1.4rem;
}
.btn--ghost:hover { border-color: rgba(237, 234, 228, 0.4); background: rgba(237, 234, 228, 0.1); }

.btn--lg { font-size: 1.0625rem; padding: 0.8rem 0.8rem 0.8rem 1.75rem; }

.btn__icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; flex: 0 0 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.35s var(--ease);
}
.btn--lg .btn__icon { width: 2.4rem; height: 2.4rem; flex-basis: 2.4rem; }
.btn__icon svg { width: 1rem; height: 1rem; }
.btn:hover .btn__icon { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon { transition: none; }
  .btn:hover .btn__icon { transform: none; }
}

/* ---------- Nav ---------- */

.nav {
  position: fixed; z-index: var(--z-nav);
  top: 0.9rem; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 1.5rem), 1320px);
  height: 64px;
  display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2rem);
  padding: 0 0.55rem 0 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 11, 13, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  /* sombra en dos capas: ambiente + directa, tintada al fondo */
  box-shadow:
    0 1px 0 rgba(237, 234, 228, 0.06) inset,
    0 2px 8px rgba(4, 5, 7, 0.5),
    0 18px 44px rgba(4, 5, 7, 0.42);
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease), visibility 0.45s;
}

/* En reposo el nav se retira para que el hero se vea limpio; vuelve al primer
   scroll. Sigue siendo alcanzable con teclado: al recibir foco reaparece. */
.nav-oculto .nav,
.nav.is-hidden {
  transform: translateX(-50%) translateY(-150%);
  opacity: 0;
  visibility: hidden;
}
.nav-oculto .nav:focus-within,
.nav.is-hidden:focus-within {
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

.nav__brand { display: block; flex: 0 0 auto; line-height: 0; }
.nav__brand img { width: clamp(96px, 12vw, 132px); height: auto; }

.nav__links {
  display: flex; gap: clamp(1rem, 2.2vw, 2rem);
  margin-inline-start: auto;
  font-size: 0.875rem; font-weight: 600; font-stretch: 95%;
}
/* padding vertical para llegar al mínimo de 24px de área táctil */
.nav__links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 0.25rem;
  text-decoration: none; color: var(--bone-dim);
  transition: color 0.3s var(--ease);
}
.nav__links a:hover { color: var(--bone); }

.nav__cta { font-size: 0.8125rem; padding-left: 1.1rem; }
.nav__cta .btn__icon { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; }

/* Conmutador de idioma: pieza propia (no vive en .nav__links) para que siga
   visible en móvil, donde los enlaces del nav se ocultan. */
.nav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 0.7rem; margin-inline: 0.85rem 0.15rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
  text-decoration: none; color: var(--bone-dim);
  border: 1px solid color-mix(in srgb, var(--bone-dim) 45%, transparent);
  border-radius: 999px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__lang:hover { color: var(--bone); border-color: var(--bone); }

@media (max-width: 760px) {
  .nav { height: 58px; }
  .nav__links { display: none; }
  .nav__cta { margin-inline-start: auto; }
  .nav__lang { margin-inline-start: auto; }
  .nav__cta { margin-inline-start: 0; }
}

/* Por debajo de 400px la píldora del nav no da para logo + botón + flecha.
   Se sacrifica la flecha, no la etiqueta: el texto del CTA no se abrevia
   para que sea el mismo en toda la página. */
@media (max-width: 400px) {
  .nav { padding: 0 0.5rem 0 0.7rem; gap: 0.5rem; }
  .nav__brand img { width: 80px; }
  .nav__cta { font-size: 0.6875rem; padding: 0.5rem 0.85rem; }
  .nav__cta .btn__icon { display: none; }
}

/* ---------- HUD reloj de sesión ---------- */

.hud {
  position: fixed; z-index: var(--z-hud);
  right: calc(var(--pad) + env(safe-area-inset-right));
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; align-items: baseline; gap: 0.65rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  background: rgba(10, 11, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 6px rgba(4, 5, 7, 0.45), 0 14px 34px rgba(4, 5, 7, 0.4);
}
/* La mañana se acaba: al llegar al pie el reloj se retira y deja
   los enlaces del footer libres. */
.hud.is-done { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
.hud { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; }
@media (prefers-reduced-motion: reduce) { .hud { transition: none; } }

.hud__label {
  margin: 0; font-size: 0.625rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--steel);
}
.hud__time {
  margin: 0; font-size: 1.0625rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--bone);
}
.hud__icon { width: 0.75rem; height: 0.75rem; fill: currentColor; flex: 0 0 auto; }
.hud__icon .ic-play { display: none; }
.hud__toggle[aria-pressed="true"] .ic-pause { display: none; }
.hud__toggle[aria-pressed="true"] .ic-play { display: block; }

.hud__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-inline-start: 0.4rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--bone-dim);
  font: inherit; font-size: 0.6875rem; font-family: 'Archivo', sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hud__toggle:hover { color: var(--bone); border-color: rgba(237, 234, 228, 0.4); }

/* En móvil el reloj se reduce a la hora sola: la barra completa tapaba la
   última línea de las tarjetas con foto. Como badge de esquina no estorba. */
@media (max-width: 620px) {
  .hud {
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    right: calc(0.75rem + env(safe-area-inset-right));
    gap: 0; padding: 0.35rem 0.6rem;
  }
  .hud__label { display: none; }
  .hud__time { font-size: 0.9375rem; }
  /* el botón se queda: sin él no habría forma de pausar el video (WCAG 2.2.2).
     Pasa a icono, con la etiqueta accesible todavía en el DOM. */
  .hud__toggle { position: relative; margin-inline-start: 0.5rem; padding: 0.35rem; border-radius: 999px; }
  /* el icono mide 25px: el área táctil se estira a 44px sin agrandar el botón */
  .hud__toggle::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .hud__toggle-txt {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-content: end;
  padding: 6rem var(--pad) clamp(5rem, 11vh, 8rem);
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10,11,13,0.94) 2%, rgba(10,11,13,0.34) 46%, rgba(10,11,13,0.18) 100%),
    linear-gradient(to right, rgba(10,11,13,0.62), rgba(10,11,13,0.04) 58%);
}

.hero__body { max-width: 70rem; }

/* line-height y padding dan aire al descendente de la "j" y la "g" de "jugar",
   que la máscara con overflow hidden cortaría. */
/* El tope de 6rem sale de la línea más larga: "quieres jugar?" mide 11.4em
   y el bloque del hero está limitado a 70rem, así que por encima se corta. */
.hero__title { font-size: clamp(2.4rem, 6.6vw, 6rem); line-height: 0.94; }

/* En escritorio el titular es de dos líneas, siempre. Tres líneas empujarían
   el CTA fuera de pantalla en portátiles de 720px de alto. */
@media (min-width: 900px) {
  .hero__title .line > span { white-space: nowrap; }
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.16em; }
.hero__title .line > span { display: block; }

/* El enunciado entra pequeño y la pregunta es la que carga el peso:
   con dos frases seguidas al mismo tamaño el hero se aplana. */
.hero__title .line--lead { font-size: 0.46em; padding-bottom: 0.1em; }
.hero__title .line--lead:first-child { padding-top: 0.06em; }
.hero__title .line--q > span { color: var(--red-lite); }
.hero__title .line--q:first-of-type { margin-top: 0.14em; }

.hero__sub {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  color: var(--bone-dim);
  line-height: 1.45;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* --- Hero en móvil ---
   A pantalla completa, "cover" recortaba cerca del 70% del ancho del plano y se
   perdía la jugadora del fondo. Aquí el video pasa a ser una banda en flujo con
   la relación 16:9 original, así se ve el cuadro entero. El tope de 280px evita
   que en tablets pequeñas la banda se coma la mitad de la pantalla. */
/* Se aplica en móviles y también en cualquier pantalla vertical (tablet en
   retrato), que es donde "cover" recorta de verdad. La condición real no es
   el ancho sino la proporción de la ventana frente al 16:9 del video. */
/* Un 16:9 no puede llenar una pantalla vertical sin recortar cerca del 70%
   del ancho. Así que el video queda de fondo a sangre, con un sobrebarrido
   corto (118%: se pierde un 7% por lado y la jugadora del fondo sigue dentro),
   colocado en la mitad alta para que el titular caiga encima de su parte baja. */
@media (max-width: 760px), (max-aspect-ratio: 4 / 5) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    padding-top: clamp(5.25rem, 12vh, 7rem);
    padding-bottom: 5.5rem;
  }
  .hero__media { position: absolute; inset: 0; overflow: hidden; }
  .hero__media video {
    position: absolute;
    top: 33%; left: 50%;
    transform: translate(-50%, -50%);
    /* 175%: se recorta un 21% por lado, muy lejos del ~70% que se comía
       "cover" a pantalla completa. La jugadora del fondo está al 73% del
       cuadro, así que sigue dentro. Más zoom que esto y se pierde. */
    width: 175%;
    max-width: none; /* la regla global de img/video lo capaba a 100% */
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
  .hero::after {
    background:
      linear-gradient(to top, var(--ink) 26%, rgba(10,11,13,0.72) 52%, rgba(10,11,13,0.35) 78%, rgba(10,11,13,0.6) 100%);
  }
  /* Escala propia: la del escritorio está limitada por "quieres jugar?" en una
     sola línea, y aquí eso no aplica. El mínimo lo fija "¿TODAVÍA", que a 280px
     de ancho es la palabra más larga que no puede partirse. */
  /* el límite lo marca "para empezar?", que debe caber en una línea;
     el enunciado de entrada sí puede partirse, así que va proporcionalmente
     más grande que en escritorio para que siga siendo legible */
  .hero__title { font-size: clamp(1.3rem, 7.4vw, 4.5rem); }
  .hero__title .line--lead { font-size: 0.54em; }
  .hero__body { align-self: end; }
  .hero__sub { max-width: 32ch; }
}

/* Pantallas muy estrechas (Galaxy Fold cerrado, 280px) */
@media (max-width: 400px) {
  .hero__actions { gap: 0.5rem; }
  .hero__actions .btn { font-size: 0.875rem; padding-left: 1.1rem; }
  .hero__actions .btn--ghost { padding-right: 1.1rem; }
  /* el CTA grande del cierre no cabe a 280px con su escala de escritorio */
  .btn--lg { font-size: 0.9375rem; padding: 0.7rem 0.7rem 0.7rem 1.2rem; }
  .btn--lg .btn__icon { width: 2rem; height: 2rem; flex-basis: 2rem; }
}

/* ==========================================================================
   2. MANIFIESTO
   ========================================================================== */

.manifiesto {
  padding: var(--section-y) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.manifiesto__hook {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  max-width: 38ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--steel);
}
/* interlineado abierto: varias líneas terminan en "jugar" y "ganas" */
.manifiesto__text { font-size: clamp(1.7rem, 5.4vw, 4.5rem); line-height: 1.0; }
.manifiesto__text .r { display: block; color: var(--bone); }
.manifiesto__text .r--accent { color: var(--red-lite); margin-top: 0.32em; }
.manifiesto__foot {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel);
}

/* ==========================================================================
   3. LA SESIÓN
   ========================================================================== */

.sesion { background: var(--ink-2); border-top: 1px solid var(--line); overflow-x: clip; }
.sesion__pin { padding: var(--section-y) 0; }

.sesion__head { padding: 0 var(--pad) clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.sesion__head h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.sesion__head p { margin: 1rem 0 0; color: var(--bone-dim); max-width: 44ch; }

.sesion__track {
  display: flex; gap: var(--gap); align-items: stretch;
  margin: 0; padding: 0 var(--pad); list-style: none;
}

.paso {
  flex: 0 0 min(78vw, 30rem);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--ink);
  padding: 0 0 1.6rem;
}
.paso__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
.paso__text { flex: 0 0 auto; }
.paso__media video, .paso__media img { width: 100%; height: 100%; object-fit: cover; }
.paso__time {
  margin: 1.4rem 1.4rem 0.5rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--red-lite);
  font-variant-numeric: tabular-nums;
}
.paso__title { margin: 0 1.4rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* La última tarjeta cierra con una frase completa en vez de una etiqueta.
   Baja de escala para caber en la tarjeta y para que no grite: es el remate
   emotivo de la mañana, no un rótulo más de la secuencia. */
.paso__title--largo {
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
}
.paso__text { margin: 0.85rem 1.4rem 0; color: var(--bone-dim); font-size: 0.9375rem; }

/* El trabajo central rota entre seis contenidos: se muestran como fichas,
   no como lista con viñetas, porque ninguno manda sobre los demás. */
.paso__lista {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 1rem 1.4rem 0; padding: 0; list-style: none;
}
.paso__lista li {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  white-space: nowrap;
}

/* En escritorio el bloque se fija: debe caber exacto en la ventana,
   así que la tarjeta llena el alto disponible y el video flexiona. */
@media (min-width: 900px) {
  .sesion__pin {
    height: 100dvh;
    display: flex; flex-direction: column;
    padding: 6.5rem 0 5.25rem; /* deja libre la franja del reloj fijo */
    overflow: hidden; /* el track mide más que la ventana: no debe ensanchar el documento */
  }
  .sesion__head { flex: 0 0 auto; }
  /* alineadas arriba y con el video siempre en 16:9: las tarjetas tienen
     distinta cantidad de texto y con flex-fill los videos quedaban dispares */
  .sesion__track { flex: 1 1 auto; min-height: 0; align-items: flex-start; }
  .paso__media { flex: 0 0 auto; }
}

/* Fallback móvil y sin JS: scroll horizontal nativo con snap */
@media (max-width: 899px) {
  .sesion__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    scrollbar-width: thin;
  }
  .paso { flex-basis: min(84vw, 24rem); scroll-snap-align: start; }
}

/* ==========================================================================
   4. LO QUE CAMBIA (bento de 5 celdas para 5 beneficios)
   ========================================================================== */

.cambia { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
.cambia__title { font-size: clamp(1.9rem, 4.6vw, 3.6rem); max-width: 18ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* 5 beneficios, 5 celdas, cero huecos.
   fila 1: a(2) + b(2) · fila 2: a sigue(2) + c(1) + d(1) · fila 3: e(4) */
.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(11.5rem, auto);
}
.cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
}
.cell h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 800; font-stretch: 110%;
  line-height: 1.1; letter-spacing: -0.01em;
}
.cell p { margin: 0; color: var(--bone-dim); font-size: 0.9375rem; }

.cell--a { grid-column: span 2; grid-row: span 2; }
.cell--b { grid-column: span 2; }
.cell--c { grid-column: span 1; }
.cell--d { grid-column: span 1; }
.cell--e { grid-column: span 4; min-height: 22rem; }
.cell--accent { background: var(--red); border-color: var(--red); }
.cell--accent h3, .cell--accent p { color: #FFFFFF; }

.cell--media { padding: 0; }
.cell--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* el titular caía sobre la zona clara de la foto y el contraste quedaba justo:
   el velo sube antes y arranca más opaco */
.cell--media .cell__body {
  position: relative; margin-top: auto; padding: 1.6rem;
  background: linear-gradient(to top,
    rgba(10,11,13,0.97) 48%,
    rgba(10,11,13,0.72) 76%,
    rgba(10,11,13,0));
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell--a { grid-column: span 2; grid-row: span 1; min-height: 20rem; }
  .cell--b { grid-column: span 2; }
  .cell--e { grid-column: span 2; min-height: 20rem; }
}
/* En una sola columna el texto se mantiene sobre la foto: apilarlos suma
   unos 140px por celda y el scroll se hace eterno. Celda más baja en su lugar. */
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(0, auto); }
  .cell--a, .cell--b, .cell--c, .cell--d, .cell--e { grid-column: span 1; }
  .cell--a, .cell--e, .cell--media { min-height: 15rem; }
  .cell { padding: 1.25rem; }
  /* después de .cell, que si no le devuelve el padding y el velo queda
     enmarcado como una caja flotante dentro de la foto */
  .cell--media { padding: 0; }
  .cell--media .cell__body { padding: 1.25rem; }
}

/* ==========================================================================
   5. PRECIOS
   ========================================================================== */

.precios {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: var(--section-y) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.precios__lead h2 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
.precios__lead p { margin: 1.5rem 0 2rem; max-width: 38ch; color: var(--bone-dim); }

.tarifas { border: 1px solid var(--line); background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); }
.tarifas__head {
  margin: 0 0 1.25rem; font-size: 0.6875rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--steel);
}
.tarifas__list { margin: 0; }
.tarifa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.tarifa:last-child { border-bottom: 0; }
.tarifa dt {
  font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim);
}
.tarifa dd {
  margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--bone);
}
.tarifa--best dd { color: var(--red-lite); }
.tarifas__note { margin: 1.25rem 0 0; font-size: 0.8125rem; color: var(--steel); }

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

/* ==========================================================================
   6. COMUNIDAD
   ========================================================================== */

.comunidad { padding: var(--section-y) 0; border-top: 1px solid var(--line); overflow: hidden; }
.comunidad__head { padding: 0 var(--pad) clamp(2.5rem, 5vw, 3.5rem); max-width: 44rem; }
.comunidad__head h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
.comunidad__head p { margin: 1rem 0 0; color: var(--bone-dim); max-width: 46ch; }

.marquee { position: relative; width: 100%; overflow: hidden; }
.marquee__track {
  display: flex; gap: var(--gap); width: max-content;
  animation: slide 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee figure { margin: 0; flex: 0 0 auto; }
/* height:auto es obligatorio: los atributos width/height del HTML llegan como
   hint de presentación y fijan la altura real, pisando el aspect-ratio. */
.marquee img {
  width: clamp(13rem, 28vw, 24rem);
  height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ==========================================================================
   7. EMPRESAS Y ENTIDADES
   Público secundario: panel embutido con filo de acento a la izquierda.
   Deliberadamente más callado que el resto para no competir con el CTA principal.
   ========================================================================== */

.empresas { padding: 0 var(--pad) var(--section-y); border-top: 1px solid var(--line); }
.empresas__panel {
  max-width: 54rem;
  margin-top: var(--section-y);
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
}
.empresas__panel h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800; font-stretch: 110%;
  line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: balance;
}
.empresas__panel p { margin: 0 0 1.75rem; max-width: 52ch; color: var(--bone-dim); }

/* ==========================================================================
   8. DÓNDE Y CUÁNDO
   ========================================================================== */

.donde {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: var(--section-y) var(--pad);
  border-top: 1px solid var(--line);
}
.donde__info h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); margin-bottom: 2rem; }
.datos { margin: 0 0 2rem; display: grid; gap: 0; }
.datos > div {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.datos dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); padding-top: 0.25rem; }
.datos dd { margin: 0; color: var(--bone); }
.datos dd a { color: var(--red-lite); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.donde__foto { margin: 0; }
.donde__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 860px) {
  .donde { grid-template-columns: 1fr; }
  .datos > div { grid-template-columns: 6.5rem 1fr; }
}

/* ==========================================================================
   8. CIERRE
   ========================================================================== */

.cierre {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 84vh;
  display: grid; place-items: center;
  padding: var(--section-y) var(--pad);
  text-align: center;
}
.cierre__media { position: absolute; inset: 0; z-index: -2; }
.cierre__media video { width: 100%; height: 100%; object-fit: cover; }
.cierre::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 11, 13, 0.78);
}
/* el mínimo lo marca "MAÑANA": a 2.6rem no cabe en 280px y se recortaba */
/* el mínimo lo marca "MAÑANA": a 2.6rem no cabe en 280px y se recortaba */
.cierre__body h2 { font-size: clamp(1.9rem, 9vw, 7.5rem); }
.cierre__body p { margin: 1.5rem auto 2rem; max-width: 34ch; color: var(--bone-dim); }
/* place-items:center dimensiona el bloque al contenido más ancho, que es el
   botón (lleva nowrap). Sin este tope, el CTA estiraba el cierre 15px fuera
   de pantalla a 280px y el overflow del section recortaba el titular. */
.cierre__body { max-width: 100%; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.75rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad) clamp(4.5rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.foot__brand img { width: 118px; height: auto; }
.foot__brand p { margin: 0.85rem 0 0; font-size: 0.8125rem; color: var(--steel); }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.875rem; }
.foot__links a { color: var(--bone-dim); text-decoration: none; transition: color 0.3s var(--ease); }
.foot__links a:hover { color: var(--bone); }
.foot__credit { margin: 0; width: 100%; font-size: 0.75rem; color: var(--steel); }
.foot__credit a { color: var(--bone-dim); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot__credit a:hover { color: var(--red-lite); }

/* ==========================================================================
   Reveal por scroll
   ========================================================================== */

.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  /* con la misma especificidad que .js .reveal, si no no lo pisa */
  .js .reveal, .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
}

/* Estado inicial de la máscara del hero, solo si hay JS y movimiento permitido */
.js-mask .hero__title .line > span { transform: translate3d(0, 105%, 0); }