/* =====================================================================
   Portada de FutBase — versión HTML estática
   ---------------------------------------------------------------------
   Misma razón de ser que /clubes: fuera del bundle de Flutter, para que
   Google pueda leerla y para que cargue en menos de un segundo. La SPA
   sigue existiendo; esta página solo es el escaparate.

   Las variables de :root hacen de AppColors y AppTypography, que aquí no
   se pueden importar porque no hay Dart.
   ===================================================================== */

:root {
  --verde: #6B7C4C;
  --verde-oscuro: #5A6840;
  --verde-suave: rgba(107, 124, 76, .10);
  --verde-borde: rgba(107, 124, 76, .28);

  --gris-900: #111827;
  --gris-700: #374151;
  --gris-500: #6B7280;
  --gris-300: #D1D5DB;
  --gris-200: #E5E7EB;
  --gris-50: #F8FAFB;
  --blanco: #FFFFFF;

  --txt-h1: clamp(2rem, 3.9vw, 3.4rem);
  --txt-h2: clamp(1.75rem, 3.6vw, 2.75rem);
  --txt-h3: 1.125rem;
  --txt-body: 1.0625rem;
  --txt-small: .9375rem;
  --txt-label: .8125rem;

  --radio: 16px;
  --radio-btn: 12px;
  --ancho: 1280px;
  --sombra-card: 0 2px 12px rgba(17, 24, 39, .05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--txt-body);
  line-height: 1.6;
  color: var(--gris-700);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1, h2, h3 { color: var(--gris-900); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: var(--txt-h1); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: var(--txt-h2); font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: var(--txt-h3); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--verde); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* El verde de marca en cursiva del titular, como en la portada actual. */
.acento { color: var(--verde); font-style: italic; }

/* ── Botones ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radio-btn);
  font-family: inherit;
  font-size: var(--txt-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn-principal {
  background: var(--verde);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(107, 124, 76, .28);
}

.btn-principal:hover {
  background: var(--verde-oscuro);
  transform: translateY(-2px);
}

.btn-claro {
  background: var(--blanco);
  color: var(--gris-900);
  border: 1.5px solid var(--gris-200);
}

.btn-claro:hover { border-color: var(--verde-borde); }

/* ── Cabecera ─────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Al bajar aparece la línea: sin ella el menú flota sobre el contenido. */
.cabecera.con-scroll {
  border-bottom-color: var(--gris-200);
  box-shadow: 0 2px 14px rgba(17, 24, 39, .05);
}

.cabecera .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--gris-900);
  letter-spacing: -.02em;
}

.logo img { height: 38px; width: 38px; }

.logo span { display: flex; flex-direction: column; line-height: 1.05; }

/* La bajada del logo, como en el mockup. */
.logo small {
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--gris-500);
  text-transform: none;
}

.nav {
  display: flex;
  align-items: center;
  /* 20 y no 28: con la entrada de Torneos son cinco destinos y los 8 px de
     más por hueco eran justo lo que faltaba para caber en un portátil. */
  gap: 20px;
  margin-left: auto;
}

.nav a, .nav button {
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: var(--txt-small);
  font-weight: 500;
  color: var(--gris-700);
  text-decoration: none;
  cursor: pointer;
}

.nav a:hover, .nav button:hover { color: var(--verde); }

/* Ningún rótulo de la barra se parte en dos líneas. Sin esto, a 1366 px
   —el portátil más común— "Sobre nosotros", "Iniciar sesión" y
   "Preinscripciones 26/27" caían a dos renglones y la cabecera se veía
   descuadrada. Lo que no cabe se resuelve acortando el CTA por ancho
   (ver `.txt-ancho` / `.txt-estrecho` más abajo), no partiendo palabras. */
.nav a, .nav button, .enlace-sesion, .chip-preins { white-space: nowrap; }

.acciones-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acciones-cabecera .btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--txt-small);
}

/* Atajo de sesión de la cabecera: el acceso principal es el botón del hero,
   éste es para quien vuelve arriba después de bajar por la página. */
.enlace-sesion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--gris-200);
  border-radius: 999px;
  font-size: var(--txt-small);
  font-weight: 600;
  color: var(--gris-700);
  text-decoration: none;
}

.enlace-sesion:hover { border-color: var(--verde-borde); color: var(--verde); }

.chip-preins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--verde-suave);
  border: 1px solid var(--verde-borde);
  font-size: var(--txt-small);
  font-weight: 700;
  color: var(--verde);
  text-decoration: none;
}

/* FB-Torneos dentro de la navegación: una píldora fina, para que se vea que
   es otra cosa y no una sección más de la portada. En la zona de CTA de la
   derecha no cabía sin partir la barra en dos líneas. */
.nav a.enlace-torneos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--gris-200);
  border-radius: 999px;
  color: var(--gris-700);
}

.nav a.enlace-torneos:hover {
  border-color: var(--verde-borde);
  background: var(--verde-suave);
  color: var(--verde);
}

/* Menú desplegable de Recursos */
.desplegable { position: relative; }

.desplegable > .panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 232px;
  padding: 8px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .12);
  display: none;
}

.desplegable[open] > .panel,
.desplegable:hover > .panel { display: block; }

.desplegable .panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: var(--txt-small);
  color: var(--gris-700);
}

.desplegable .panel a:hover { background: var(--gris-50); color: var(--verde); }

.abrir-menu { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────── */

/* Foto de cabecera a todo el ancho. La imagen ya trae por su izquierda el
   degradado a blanco donde cae el texto, el logotipo en marca de agua y el
   rótulo manuscrito, así que aquí solo se coloca.

   Si `hero-fondo.jpg` todavía no está, el degradado de debajo mantiene el
   aspecto anterior: la portada no se rompe por que falte la foto. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  background:
    radial-gradient(60% 60% at 50% 40%, var(--verde-suave) 0%, transparent 70%),
    var(--blanco);
}

/* La foto ocupa solo la mitad derecha, no todo el hero: a pantalla completa
   el titular caía sobre el césped y las flechas tácticas se le montaban
   encima. Así queda como en el mockup — texto sobre blanco, foto al lado. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/hero-fondo.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Velo sobre la mitad izquierda: sin él, el titular cae sobre el césped y
   las flechas tácticas de la foto se le montan encima. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(255, 255, 255, .96) 0%,
    rgba(255, 255, 255, .94) 30%,
    rgba(255, 255, 255, .72) 42%,
    rgba(255, 255, 255, .18) 55%,
    rgba(255, 255, 255, 0) 66%);
  z-index: 0;
}

/* El contenido, por encima de foto y velo. */
.hero > .wrap, .hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 32px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: var(--verde-suave);
  border: 1px solid var(--verde-borde);
  font-size: var(--txt-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde);
}

.badge .punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  animation: latido 2s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.25); }
}

.hero .entradilla {
  font-size: 1.1875rem;
  color: var(--gris-500);
  max-width: 46ch;
}

.hero .entradilla strong { color: var(--gris-900); font-weight: 700; }

.hero .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 36px;
}

.hero .acciones .btn {
  min-height: 50px;
  padding: 13px 22px;
  font-size: var(--txt-small);
}

/* Garantías, con su explicación debajo: "Sin permanencia" solo dice la
   mitad; lo que tranquiliza es el "cancela cuando quieras". */
.garantias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  justify-content: start;
}

.garantia { display: flex; align-items: flex-start; gap: 11px; }

/* Separador entre garantías, como en el mockup. */
.garantia + .garantia { border-left: 1px solid var(--gris-200); padding-left: 22px; }

.garantia svg { flex-shrink: 0; margin-top: 2px; }

.garantia b {
  display: block;
  font-size: var(--txt-label);
  font-weight: 700;
  color: var(--gris-900);
}

.garantia span { font-size: .75rem; color: var(--gris-500); line-height: 1.35; }

/* ── Composición del hero ─────────────────────────────────────────
   Portátil + móvil + rótulos manuscritos, como en el mockup. Las dos
   capturas son reales, sacadas de la demo con Playwright.            */

.hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
}

/* Marco de portátil dibujado con CSS: no hace falta una imagen de
   dispositivo, y así la captura se puede cambiar sin rehacer el montaje. */
.portatil {
  position: relative;
  width: 68%;
  margin-right: 26%;
  padding: 12px 12px 14px;
  background: linear-gradient(160deg, #2B3140, #171B24);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(17, 24, 39, .28);
}

.portatil img {
  width: 100%;
  height: auto;
  border-radius: 7px;
  display: block;
}

/* Base del portátil, la pestaña de abajo. */
.portatil::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  width: 30%;
  height: 11px;
  background: linear-gradient(180deg, #232833, #171B24);
  border-radius: 0 0 10px 10px;
}

/* Móvil por delante y a la izquierda, pisando el portátil. */
.movil {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 27%;
  max-width: 190px;
  padding: 6px;
  background: #1F2430;
  border-radius: 26px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .32);
}

.movil img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 17;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
  display: block;
}

/* Rótulos manuscritos del mockup. */
.rotulo {
  position: absolute;
  z-index: 3;
  font-family: 'Caveat', cursive;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--verde-oscuro);
  text-align: center;
  transform: rotate(-6deg);
}

.rotulo-arriba { top: -6%; right: 2%; }

/* "Más que gestión, comunidad" sobre una mancha verde. La pincelada es
   CSS puro (border-radius irregular): no hace falta una imagen. */
.pincelada {
  position: absolute;
  z-index: 3;
  right: -4%;
  bottom: -6%;
  padding: 22px 30px;
  background: var(--verde);
  border-radius: 46% 54% 40% 60% / 58% 42% 58% 42%;
  transform: rotate(-5deg);
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--blanco);
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 12px 30px rgba(107, 124, 76, .3);
}

/* Tarjetas de cifras del hero. */
.dato-flotante {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .16);
  white-space: nowrap;
}

.dato-flotante b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--gris-900);
  line-height: 1.1;
}

.dato-flotante span { font-size: var(--txt-label); color: var(--gris-500); }

.dato-flotante .icono {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--verde-suave);
  color: var(--verde);
  flex-shrink: 0;
}

.dato-1 { top: 12%; left: 6%; }
.dato-2 { bottom: 26%; right: 14%; }

/* ── Invitación a bajar ──────────────────────────────────────────── */

.bajar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 48px;
  font-size: var(--txt-small);
  color: var(--gris-500);
  text-decoration: none;
}

.bajar .circulo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--gris-200);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--verde);
  animation: rebote 2.2s ease-in-out infinite;
}

.bajar:hover .circulo { border-color: var(--verde-borde); }

@keyframes rebote {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ── Franja de confianza ──────────────────────────────────────────── */

.confianza {
  margin-top: 56px;
  padding: 26px 32px 24px;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  text-align: center;
}

.confianza .titulo {
  font-size: var(--txt-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-bottom: 18px;
}

.escudos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}

.escudos img {
  height: 40px;
  width: auto;
  opacity: .92;
  transition: opacity .2s ease, transform .2s ease;
}

.escudos img:hover { opacity: 1; transform: scale(1.08); }

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  border-left: 1px solid var(--gris-200);
  padding-left: 30px;
}

.cifra + .cifra { border-left: 1px solid var(--gris-200); padding-left: 34px; }

.cifra b {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gris-900);
  line-height: 1.1;
}

.cifra span { font-size: var(--txt-label); color: var(--gris-500); }

.confianza .nota {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gris-200);
  font-size: var(--txt-small);
  color: var(--gris-500);
}

/* `hidden` no basta cuando el elemento tiene display: flex, y las tarjetas
   de cifras salian vacias -solo la etiqueta, sin numero- mientras no hubiera
   dato. Con esto no aparecen hasta que app.js les pone una cifra real. */
[hidden] { display: none !important; }

/* Si no hay cifras reales (endpoint sin subir), el bloque desaparece en
   lugar de enseñar ceros o números inventados. */
.cifras:empty, .cifras:empty + .nota { display: none; }

/* ── Secciones ────────────────────────────────────────────────────── */

.seccion { padding: 88px 0; }
.seccion.gris { background: var(--gris-50); }

.antetitulo {
  font-size: var(--txt-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 14px;
}

.seccion-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}

.funciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.funcion {
  padding: 22px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: 14px;
  box-shadow: var(--sombra-card);
  transition: border-color .15s ease, transform .15s ease;
}

.funcion:hover {
  border-color: var(--verde-borde);
  transform: translateY(-3px);
}

.funcion .icono {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 11px;
  background: var(--verde-suave);
  color: var(--verde);
}

.funcion h3 { margin-bottom: 4px; font-size: 1rem; }

.funcion p {
  margin: 0;
  font-size: var(--txt-small);
  color: var(--gris-500);
  line-height: 1.5;
}

/* ── Planes ───────────────────────────────────────────────────────── */

.planes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  gap: 24px;
  justify-content: center;
  margin-top: 44px;
}

.plan {
  position: relative;
  padding: 32px;
  background: var(--blanco);
  border: 1.5px solid var(--gris-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
}

.plan.destacado {
  border-color: var(--verde);
  box-shadow: 0 16px 40px rgba(107, 124, 76, .18);
}

.plan .etiqueta {
  position: absolute;
  top: -13px;
  left: 32px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--blanco);
  font-size: var(--txt-label);
  font-weight: 700;
}

.plan h3 { font-size: 1.375rem; margin-bottom: 2px; }

.plan .sub {
  font-size: var(--txt-small);
  color: var(--gris-500);
  margin-bottom: 22px;
}

.plan ul { margin-bottom: 26px; }

.plan li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: var(--txt-small);
}

.plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 15px;
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--verde);
  border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg);
}

.plan .btn { width: 100%; }

/* ── CTA final y pie ──────────────────────────────────────────────── */

.cta-final {
  padding: 84px 0;
  text-align: center;
  color: var(--blanco);
  background: linear-gradient(150deg, var(--verde) 0%, var(--verde-oscuro) 100%);
}

.cta-final h2 { color: var(--blanco); }

.cta-final p {
  color: rgba(255, 255, 255, .92);
  max-width: 48ch;
  margin: 0 auto 30px;
}

.cta-final .btn-claro { border-color: transparent; }

.pie {
  padding: 44px 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--gris-50);
  border-top: 1px solid var(--gris-200);
  font-size: var(--txt-small);
  color: var(--gris-500);
}

.pie-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.pie h4 {
  margin: 0 0 14px;
  font-size: var(--txt-label);
  font-weight: 700;
  color: var(--gris-900);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pie li { margin-bottom: 10px; }
.pie a { color: var(--gris-500); text-decoration: none; }
.pie a:hover { color: var(--verde); }

.pie .legal {
  padding-top: 22px;
  border-top: 1px solid var(--gris-200);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--txt-label);
}

/* Aviso legal, privacidad, cookies y términos. Van en la misma fila que el
   copyright mientras quepan; al estrecharse pasan a línea propia en vez de
   partirse por la mitad. */
.pie .legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.pie .legal-enlaces a { color: var(--gris-500); }
.pie .legal-enlaces a:hover { color: var(--verde); }

/* ── Responsive ───────────────────────────────────────────────────── */

/* La cabecera se pasa al menú desplegable antes que el resto de la página
   (1280 en vez de 1080): por debajo de ahí la barra completa ya no cabe y,
   como sus rótulos no se parten, se salía por la derecha —medido: a 1200 px
   sobresalían 12 px y aparecía barra de desplazamiento horizontal—.
   El corte del contenido sigue en 1080, que es donde de verdad estorban las
   dos columnas. */
@media (max-width: 1279px) {
  .nav { display: none; }
  .abrir-menu {
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    background: none;
    border: 1.5px solid var(--gris-200);
    border-radius: 10px;
    cursor: pointer;
  }
  .acciones-cabecera .enlace-sesion,
  .acciones-cabecera .chip-preins { display: none; }
}

@media (max-width: 1080px) {
  .seccion-grid { grid-template-columns: 1fr; gap: 32px; }
  .funciones { grid-template-columns: repeat(2, 1fr); }
  .confianza { grid-template-columns: 1fr; gap: 26px; }
  .cifras { border-left: 0; padding-left: 0; }
  .confianza .nota { max-width: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* La imagen va DEBAJO del titular: encima se comía la primera pantalla
     y el visitante aterrizaba sin ver de qué va esto. */
  .hero-visual { order: 2; }
  .planes { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .hero { padding: 44px 0 40px; }
  .seccion { padding: 56px 0; }
  .garantias { grid-template-columns: 1fr; gap: 16px; }
  .funciones { grid-template-columns: 1fr; }
  .hero .acciones { flex-direction: column; }
  .hero .acciones .btn { width: 100%; }
  .movil { position: static; transform: none; width: 62%; margin: -18% auto 0; }
  .dato-flotante { display: none; }
  .cifras { gap: 22px; }
  .pie-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Menú de móvil ────────────────────────────────────────────────────
   El panel lo inyecta app.js clonando los enlaces, para no mantener dos
   listas que se acaben desincronizando.                                */

#menu-movil {
  display: none;
  padding: 12px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gris-200);
  background: var(--blanco);
  max-height: calc(100vh - 76px);
  overflow-y: auto;
}

body.menu-abierto #menu-movil { display: block; }

#menu-movil a {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--gris-200);
  font-size: var(--txt-body);
  font-weight: 500;
  color: var(--gris-700);
  text-decoration: none;
}

#menu-movil a:last-child { border-bottom: 0; }

/* La entrada de captación va primera y destacada: es el camino de quien
   todavía no es cliente. */
#menu-movil a.destacado {
  margin-bottom: 8px;
  padding: 14px 16px;
  border: 1px solid var(--verde-borde);
  border-radius: 12px;
  background: var(--verde-suave);
  color: var(--verde);
  font-weight: 700;
}

#menu-movil a.destacado span {
  display: block;
  font-size: var(--txt-label);
  font-weight: 400;
  color: var(--gris-500);
}

/* El CTA de la cabecera no puede partirse en dos líneas: en móvil se comía
   media barra y descolocaba el logo. */
.acciones-cabecera .btn { white-space: nowrap; }

/* Dos rótulos para el mismo CTA: el largo vende, el corto cabe. Se cambia por
   ancho en vez de recortar con "…", que dejaría la frase a medias. */
.acciones-cabecera .txt-estrecho { display: none; }

/* 1400 y no 1080: por debajo de ahí la barra entera (logo + cinco destinos +
   sesión + CTA + preinscripciones) ya no cabía en una línea. El rótulo largo
   sigue estando donde hay sitio de verdad, que es la pantalla de escritorio. */
@media (max-width: 1400px) {
  .acciones-cabecera .txt-ancho { display: none; }
  .acciones-cabecera .txt-estrecho { display: inline; }
}

@media (max-width: 620px) {
  .cabecera .wrap { gap: 10px; min-height: 66px; }
  .logo { font-size: 1.125rem; }
  .logo img { height: 28px; width: 28px; }
  .acciones-cabecera .btn { padding: 9px 13px; font-size: var(--txt-label); }
}

/* En móvil las garantías se apilan, así que el separador vertical del
   escritorio queda como una raya suelta a la izquierda. */
@media (max-width: 620px) {
  .garantia + .garantia { border-left: 0; padding-left: 0; }

  /* Los rótulos manuscritos se solapaban con el texto al no haber sitio. */
  .rotulo-arriba { position: static; display: block; margin-bottom: 12px; transform: none; }
  .pincelada { position: static; display: inline-block; margin: 18px auto 0; }
  .hero-visual { min-height: 0; flex-direction: column; text-align: center; }
  .portatil { width: 100%; margin: 0; }
  .movil { position: static; width: 42%; margin: -14% auto 0; }
}

/* ── La foto del hero, solo en pantallas anchas ───────────────────────
   La imagen está compuesta en apaisado. En un móvil, `cover` la amplía
   tanto que el rótulo manuscrito acaba detrás del titular y no se lee ni
   una cosa ni la otra. Ahí gana el texto: se queda el fondo limpio y el
   producto se enseña con el portátil y el móvil, que sí se ven bien. */
/* Por debajo de 1180 px la foto se amplía tanto que corta el rótulo y deja
   al niño a medias: mejor fondo limpio que una foto mal encuadrada. */
@media (max-width: 1180px) {
  .hero::before, .hero::after { display: none; }
}

/* ── El hero aprovecha las pantallas anchas ───────────────────────────
   El resto del sitio se queda en 1280 px, que es lo cómodo de leer, pero
   en el hero eso dejaba una franja blanca enorme a la izquierda: el texto
   arrancaba muy adentro mientras la foto llegaba hasta el borde. Aquí se
   deja crecer para que las dos mitades se equilibren. */
@media (min-width: 1400px) {
  /* El hero NO se centra en una caja: usa todo el ancho con un margen fijo
     a cada lado. La cabecera acompaña, o el logo no se alinearía con el
     titular. */
  .hero .wrap, .cabecera .wrap {
    max-width: none;
    padding-left: clamp(48px, 4.5vw, 96px);
    padding-right: clamp(48px, 4.5vw, 96px);
  }

  /* La foto respeta ese mismo margen por la derecha en vez de sangrar hasta
     el borde: si no, había blanco a un lado y foto a ras del otro, y la
     página se veía descentrada. */
  .hero::before, .hero::after {
    right: clamp(48px, 4.5vw, 96px);
    border-radius: 0 var(--radio) var(--radio) 0;
  }

  /* La tarjeta de confianza no llega al borde de la foto: dejarle aire a la
     derecha deja ver al chaval y hace que se lea como una tarjeta apoyada
     encima, no como una banda pegada. */
  .confianza { margin-right: 22%; }

  .hero-grid { gap: 56px; }

  /* El conjunto de portátil y móvil, más arriba y más a la izquierda: pegado
     abajo y a la derecha se comía al chaval y dejaba hueco encima. */
  .hero-visual { align-items: flex-start; padding-top: 34px; }
  /* 55% y no más: por encima de ese ancho el portátil llega hasta el rótulo
     manuscrito de la foto y le come las primeras letras. */
  .portatil { width: 55%; margin-right: 42%; }
  .movil { top: 22%; bottom: auto; left: -6%; }

  /* Los dos dispositivos se desplazan JUNTOS hacia el hueco que queda entre
     el titular y el rótulo manuscrito de la foto: así el conjunto se lee
     como el centro del hero en vez de quedar escorado al borde derecho, y
     además destapa "el fútbol base más conectado", que antes se comía.

     El desplazamiento NO es fijo: hasta 1450 px el titular llega casi hasta
     el móvil y no hay hueco que aprovechar, así que vale 0. A partir de ahí
     crece con la ventana —el hueco crece igual de rápido— y se corta en
     -170 px, que es donde el móvil empezaría a pisar el punto final de
     "profesional.".

     Va en .portatil y .movil, no en .hero-visual, para no arrastrar el
     rótulo manuscrito ni las tarjetas de cifras: ésos sí están bien donde
     están. */
  .portatil, .movil {
    transform: translate(clamp(-170px, (100vw - 1450px) * -0.9, 0px), -58px);
  }
}

@media (min-width: 1800px) {
  .portatil { width: 52%; margin-right: 44%; }
}