/* Lo que no se cubre cómodo con utilities de Tailwind.

   Tailwind ya NO entra por CDN: se compila a assets/tailwind.css (ver
   landing/Dockerfile y tailwind.config.js). Este archivo es el otro, el de las
   piezas con nombre propio — el display, los huecos de medios, el botón de
   WhatsApp, el carrusel— y se carga DESPUÉS del compilado para poder pisarlo. */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body { -webkit-font-smoothing: antialiased; }

/* Selection con identidad de marca */
::selection {
  background: #1B5E20;
  color: #FAFFFB;
}

/* Aria + focus rings refinados (Tailwind ya pone outlines, pero queremos
   uno consistente con el primary). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #1B5E20;
  outline-offset: 2px;
}

/* Sobre fondo oscuro el verde no se ve: ahí el foco va en ámbar. */
.sobre-oscuro a:focus-visible,
.sobre-oscuro button:focus-visible {
  outline-color: #FFB300;
}

/* ─── Tipografía de display ────────────────────────────────────────────
   El gesto que se le toma a Nike: titulares enormes, en mayúsculas, con el
   tracking apretado y la línea casi pegada. El `clamp` es lo que lo hace
   funcionar en un teléfono y en un monitor de 27" sin media queries: crece
   con el viewport y se detiene en los dos extremos. */
.display {
  font-family: 'Lexend', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-wrap: balance;
}
/* El maximo esta medido contra la palabra mas larga del hero
   («PROFESIONAL.»): a 6.5rem se desbordaba de su columna y terminaba
   abajo de la maqueta del telefono, que le comia el punto final. Si se
   cambia el titular por uno con una palabra mas larga, hay que volver a
   medir esto. */
.display-xl { font-size: clamp(2.6rem, 7.2vw, 5.6rem); }
.display-lg { font-size: clamp(2.1rem, 5.5vw, 4rem); }
.display-md { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }

/* El “kicker” de arriba de cada sección: chiquito, espaciado, en ámbar. */
.kicker {
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ─── Fondo del hero ──────────────────────────────────────────────────
   Generado con CSS, no una foto: pesa cero, no se pixela y no depende de
   una imagen con licencia. Son tres luces de estadio difusas sobre el verde
   profundo, más las líneas de una cancha en SVG embebido.

   El SVG va como data URI y NO como archivo aparte a propósito: una sola
   petición menos y no hay forma de que el deploy se lleve el CSS y olvide
   la imagen. */
.hero-fondo {
  background-color: #062012;
  background-image:
    radial-gradient(60rem 40rem at 12% -10%, rgba(27, 94, 32, .55), transparent 60%),
    radial-gradient(45rem 30rem at 92% 8%, rgba(255, 179, 0, .16), transparent 60%),
    radial-gradient(50rem 38rem at 70% 110%, rgba(13, 63, 18, .75), transparent 65%);
}
.hero-cancha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700' viewBox='0 0 1200 700'%3E%3Cg fill='none' stroke='%23FAFFFB' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='60' y='40' width='1080' height='620' rx='4'/%3E%3Cline x1='600' y1='40' x2='600' y2='660'/%3E%3Ccircle cx='600' cy='350' r='110'/%3E%3Ccircle cx='600' cy='350' r='4' fill='%23FAFFFB' fill-opacity='.07' stroke='none'/%3E%3Crect x='60' y='180' width='150' height='340' rx='2'/%3E%3Crect x='990' y='180' width='150' height='340' rx='2'/%3E%3Crect x='60' y='265' width='55' height='170' rx='2'/%3E%3Crect x='1085' y='265' width='55' height='170' rx='2'/%3E%3Cpath d='M210 265a110 110 0 0 1 0 170'/%3E%3Cpath d='M990 265a110 110 0 0 0 0 170'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* ─── Espacio reservado para medios ───────────────────────────────────
   Los huecos donde después van los videos y las fotos. Se ven A PROPÓSITO:
   un placeholder invisible es un placeholder que nadie llena y que termina
   publicado como un rectángulo vacío.

   Cada uno dice qué va adentro y con qué medida. Para reemplazarlo, se
   borra el div y se pone el <img>/<video>/<iframe> con las mismas clases de
   proporción (aspect-*). */
.slot {
  position: relative;
  display: grid;
  /* `align-content: center` y no `place-items`: con place-items, cada <p> se
     vuelve una fila que se estira, y en un hueco alto (3:4) el titulo quedaba
     arriba y la medida abajo, separados media pantalla. Asi el bloque entero
     se centra y las dos lineas quedan juntas. */
  align-content: center;
  justify-items: center;
  grid-auto-rows: min-content;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 2px dashed rgba(27, 94, 32, .35);
  background-color: rgba(27, 94, 32, .04);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(27, 94, 32, .05) 0 12px,
      transparent 12px 24px);
  color: #54736A;
  text-align: center;
  padding: 1.25rem;
}
.slot--oscuro {
  border-color: rgba(250, 255, 251, .28);
  background-color: rgba(250, 255, 251, .05);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(250, 255, 251, .06) 0 12px,
      transparent 12px 24px);
  color: rgba(250, 255, 251, .72);
}
.slot__que {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.slot__medida {
  font-size: .72rem;
  font-weight: 600;
  opacity: .75;
  margin-top: .25rem;
  font-variant-numeric: tabular-nums;
}
.slot__play {
  width: 4.5rem; height: 4.5rem;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #FFB300;
  color: #062012;
  margin-bottom: .85rem;
  box-shadow: 0 10px 30px -8px rgba(255, 179, 0, .6);
}

/* ─── Carrusel de logos ───────────────────────────────────────────────
   Se duplica la lista en el HTML y se desplaza el 50%: así el loop no tiene
   salto. `prefers-reduced-motion` lo detiene, porque un movimiento infinito
   marea a quien pide que no se mueva nada. */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__pista {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__pista { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─── Botón flotante de WhatsApp ──────────────────────────────────────
   Abajo a la derecha, por encima de todo.

   El `bottom` sale de env(safe-area-inset-bottom): en un iPhone con la barra
   de gestos, un botón pegado a 1rem queda justo donde el dedo hace swipe y
   se vuelve imposible de tocar. */
.wa-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  background: #25D366;
  color: #062012;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 14px 34px -10px rgba(6, 32, 18, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(6, 32, 18, .6); }
.wa-fab__texto { display: none; }
@media (min-width: 640px) { .wa-fab__texto { display: inline; } }

/* El halo que late. Detrás del botón, sin capturar clicks. */
.wa-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: rgba(37, 211, 102, .45);
  z-index: -1;
  animation: latido 2.6s ease-out infinite;
}
@keyframes latido {
  0%   { transform: scale(.95); opacity: .7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ─── Aparecer al hacer scroll ────────────────────────────────────────
   Lo enciende el IntersectionObserver del final del HTML agregando .visible.
   Si el JS no corre, `.revelar` sin `.visible` tiene que quedar VISIBLE: por
   eso el estado oculto se aplica solo cuando el documento tiene .js, que la
   propia página se pone a sí misma. Sin eso, un error de JS deja la página
   entera en blanco. */
.js .revelar { opacity: 0; transform: translateY(18px); }
.js .revelar.visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__pista { animation: none; }
  .wa-fab::before { animation: none; }
  .js .revelar { opacity: 1; transform: none; }
}

/* ─── FAQ acordeón ─────────────────────────────────────────────────────
   <details>/<summary> nativos: el acordeón no necesita JS. Esconder el
   marker default y rotar el + a × cuando está abierto.
   - El selector ::-webkit-details-marker cubre Chrome/Safari.
   - `list-style: none` cubre Firefox. */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon {
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background-color: #1B5E20;
  color: #FAFFFB;
}
.faq-item[open] { border-color: #1B5E20; }

/* ─── Barra superior ──────────────────────────────────────────────────
   Arranca transparente sobre el hero oscuro y se vuelve sólida al bajar.
   La clase la pone el JS del final. */
.nav { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.nav--solida {
  background-color: rgba(250, 255, 251, .92);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(157, 183, 171, .4) !important;
  box-shadow: 0 10px 30px -24px rgba(6, 32, 18, .5);
}
.nav--solida .nav__link { color: #062012; }
.nav--solida .nav__logo-texto { color: #062012; }

/* ─── Maqueta de teléfono ─────────────────────────────────────────────
   La pantalla de la app, armada con HTML y CSS en vez de una captura: no se
   pixela, pesa nada, y cuando la app cambie se edita acá mismo. */
.telefono {
  border-radius: 2.5rem;
  border: 10px solid #062012;
  background: #FAFFFB;
  box-shadow: 0 40px 80px -30px rgba(6, 32, 18, .65);
  overflow: hidden;
}