/* =========================================================================
   Los Dueños de las Canchas · Pulsar x FUTTO
   Landing de inscripción. Sigue el arte de Pulsar (formulario.ai) y la
   cabecera/pie de futto.co (Pagina Futto/src/estilos.css).
   ========================================================================= */

@font-face {
  font-family: "Titular";
  src: url("../assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Titular";
  src: url("../assets/fonts/anton-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --negro: #0a0a0a;
  --superficie: #151515;
  --linea: #2a2a2a;
  --lime: #a1ff00;
  --blanco: #ffffff;
  --gris-claro: #b8bcc4;
  --gris-medio: #7a8089;
  --rojo: #e8262d;          /* rojo Pulsar del logo */
  --borde-campo: #8a8a8a;

  --titular: "Titular", "Arial Black", "Arial Bold", sans-serif;
  --texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --sesgo: -9deg;
  --ancho: 78rem;
  --borde: 1.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lime); text-underline-offset: 0.2em; }
:where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin: 0;
}
.contenedor { width: min(var(--ancho), 100% - var(--borde) * 2); margin-inline: auto; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgb(10 10 10 / 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
/* Solo los dos logos, centrados. Sin menú: el sitio es la inscripción y nada más. */
.cabecera__fila { display: flex; align-items: center; justify-content: center; gap: 1.25rem; min-height: 4.25rem; }
.cabecera__marca { width: clamp(5rem, 11vw, 7rem); height: auto; }
.cabecera__marca--futto { width: clamp(4.5rem, 10vw, 6rem); }
.cabecera__separador { width: 1px; height: 1.75rem; background: var(--linea); }

/* --------------------------------------------------------------------- hero
   Escritorio: la foto ES el arte terminado de Pulsar (título incrustado). Encima
   solo van el logo Pulsar y el botón. Móvil: foto de la cancha + título en HTML. */
.hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero__pulsar { width: clamp(9rem, 22vw, 15rem); filter: drop-shadow(0 4px 14px rgb(0 0 0 / 0.5)); }
.hero__contenido { position: relative; }

@media (min-width: 40.01rem) {
  .hero { aspect-ratio: 16 / 9; }
  .hero__pulsar { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: clamp(10rem, 15vw, 15rem); }
  .hero__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Premio y botón en una sola fila: la bajada incrustada en la foto termina cerca
     del 87% de alto y en columna la banda roja le quedaba encima. */
  .hero__contenido { position: absolute; left: 0; right: 0; bottom: 2.5%; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 0 var(--borde); }
  /* Con selector compuesto: las reglas base de .hero__premio y .hero__cta están más
     abajo en el archivo y con la misma especificidad le ganaban a este override
     (el `margin: auto` del premio empujaba el botón al borde derecho). */
  .hero__contenido > .hero__premio { margin: 0; font-size: clamp(0.95rem, 1.6vw, 1.3rem); }
  .hero__contenido > .hero__cta { margin: 0; font-size: 0.95rem; padding: 0.7rem 1.8rem; }
}
@media (max-width: 40rem) {
  .hero { min-height: 32rem; display: grid; place-items: center; padding: 2.5rem var(--borde) 3rem; }
  /* Velo rojo con caída a negro, como el spray del arte */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgb(10 10 10 / 0.35) 0%, rgb(10 10 10 / 0) 25%, rgb(10 10 10 / 0.55) 100%),
      linear-gradient(180deg, rgb(232 38 45 / 0.72) 0%, rgb(232 38 45 / 0.45) 45%, rgb(120 20 20 / 0.35) 100%);
  }
  .hero__pulsar { margin: 0 auto 0.5rem; }
}
.hero__pregunta {
  display: flex; align-items: center; justify-content: center; gap: 0.3em;
  font-family: var(--titular); text-transform: uppercase; color: var(--blanco);
  font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1;
  text-shadow: 0 3px 16px rgb(0 0 0 / 0.55);
  margin-bottom: -0.2em;
}
.hero__signo { font-size: 1.8em; line-height: 0.6; position: relative; top: 0.12em; opacity: 0.95; }
.hero__logo-duenos { width: clamp(17rem, 46vw, 34rem); margin: 0 auto; filter: drop-shadow(0 10px 30px rgb(0 0 0 / 0.6)); }
.hero__cierre {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.hero__bajada {
  font-weight: 700; font-size: clamp(1.15rem, 2.3vw, 1.65rem); line-height: 1.25;
  max-width: 30ch; margin: 1.5rem auto 0; text-shadow: 0 2px 10px rgb(0 0 0 / 0.6);
}
/* El premio, pedido por Pulsar el 2026-09-02 «debajo del logo». En escritorio el
   logo está incrustado en la foto, así que va justo debajo de la bajada del arte. */
.hero__premio {
  display: inline-block; margin: 1.4rem auto 0;
  background: var(--rojo); color: var(--blanco);
  font-family: var(--titular); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(1.05rem, 2.1vw, 1.55rem); line-height: 1.2;
  padding: 0.45rem 1.3rem; transform: skewX(var(--sesgo));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
}
.hero__premio > span { display: inline-block; transform: skewX(calc(var(--sesgo) * -1)); }
.hero__cta {
  display: inline-block; margin-top: 1.6rem;
  font-family: var(--titular); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem;
  color: var(--negro); background: var(--blanco); text-decoration: none;
  padding: 0.8rem 2.2rem; transform: skewX(var(--sesgo));
  transition: background 140ms ease-out, color 140ms ease-out;
}
.hero__cta > span { display: inline-block; transform: skewX(calc(var(--sesgo) * -1)); }
.hero__cta:hover { background: var(--lime); }
@media (max-width: 40rem) {
  .hero__pregunta { flex-wrap: wrap; gap: 0.1em 0.3em; }
  .hero__cta { margin-top: 1.2rem; }
}

/* ------------------------------------------------------------ cuándo y dónde */
.info { background: var(--superficie); border-block: 1px solid var(--linea); padding-block: 1.6rem; }
.info__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; }
.info__dato { display: flex; flex-direction: column; gap: 0.15rem; border-left: 3px solid var(--rojo); padding-left: 1rem; }
.info__rotulo { font-family: var(--titular); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; color: var(--lime); }
.info__dato strong { font-size: 1.15rem; line-height: 1.25; }
.info__dato > span:last-child { color: var(--gris-claro); font-size: 0.95rem; }
@media (max-width: 48rem) { .info__fila { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ------------------------------------------------------------------ ubicación */
.ubicacion { padding: 3.5rem 0 4rem; background: var(--negro); }
.ubicacion .bloque__ayuda { max-width: 60ch; }
.ubicacion__mapa { border: 1px solid var(--linea); }
.ubicacion__mapa iframe { display: block; width: 100%; height: 400px; filter: grayscale(0.3) contrast(1.05); }
@media (max-width: 40rem) { .ubicacion__mapa iframe { height: 300px; } }

/* ------------------------------------------------------------------ formulario */
.formulario {
  position: relative;
  padding: 3.5rem 0 5rem;
  background:
    linear-gradient(180deg, var(--negro) 0%, rgb(10 10 10 / 0.78) 25%, rgb(10 10 10 / 0.78) 100%),
    url("../assets/img/cancha-fondo.jpg") center / cover no-repeat;
}
.formulario__contenedor { width: min(56rem, 100% - var(--borde) * 2); margin-inline: auto; }
.bloque + .bloque { margin-top: 4rem; }
.bloque__titulo {
  font-size: clamp(2rem, 4.6vw, 3rem);
  border-left: 0.35rem solid var(--blanco);
  padding-left: 1rem;
  margin-bottom: 0.6rem;
}
.bloque__titulo--simple { border-left: 0; padding-left: 0; }
.bloque__ayuda { color: var(--gris-claro); margin: 0 0 1.75rem; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; }
.campo { display: flex; flex-direction: column; gap: 0.45rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo__rotulo { font-size: 1.0625rem; color: var(--blanco); }
.campo__rotulo--negrita { font-weight: 700; }
.obligatorio { color: var(--rojo); margin-left: 0.1em; }
.campo__entrada {
  width: 100%;
  background: transparent;
  border: 1px solid var(--borde-campo);
  color: var(--blanco);
  font: inherit; font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0;
  transition: border-color 140ms ease-out;
}
.campo__entrada::placeholder { color: var(--gris-medio); }
.campo__entrada:focus { outline: none; border-color: var(--lime); }
.campo__entrada.error { border-color: var(--rojo); }
.campo__entrada[type="date"] { color-scheme: dark; }
.campo__error { min-height: 1.2em; font-size: 0.85rem; color: var(--rojo); }
.campo__pista { font-size: 0.85rem; color: var(--gris-medio); }
@media (max-width: 40rem) { .campos { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Retos */
.retos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
.reto__nombre { font-family: var(--texto); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.6rem; }
.reto__texto { color: var(--gris-claro); margin: 0 0 1.1rem; max-width: 40ch; }
@media (max-width: 40rem) { .retos { grid-template-columns: 1fr; } }

/* Opciones (checkbox y radio dibujados como cuadros, igual que el arte) */
.opciones { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.opcion { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; user-select: none; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion__caja {
  flex: 0 0 auto; width: 1.55rem; height: 1.55rem;
  border: 1px solid var(--blanco); background: transparent;
  display: grid; place-items: center;
  transition: background 120ms ease-out;
}
.opcion__caja::after {
  content: ""; width: 0.85rem; height: 0.85rem; background: var(--lime);
  transform: scale(0); transition: transform 120ms ease-out;
}
.opcion input:checked + .opcion__caja::after { transform: scale(1); }
.opcion input:focus-visible + .opcion__caja { outline: 3px solid var(--lime); outline-offset: 3px; }
.opcion__texto { font-size: 1.0625rem; }
.grupo-error .opcion__caja { border-color: var(--rojo); }
.grupo__error { min-height: 1.2em; font-size: 0.85rem; color: var(--rojo); margin-top: 0.5rem; }

.condicional { margin-top: 2rem; }
.condicional[hidden] { display: none; }
.condicional__rotulo { font-weight: 700; margin: 0 0 1rem; }

/* Términos y envío */
.terminos { margin-top: 3rem; }
.terminos a { color: var(--blanco); font-weight: 700; }
.terminos a:hover { color: var(--lime); }
.boton-enviar {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin-top: 2rem; min-width: 12rem;
  background: transparent; color: var(--blanco);
  border: 1px solid var(--lime);
  font: inherit; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.9rem 2.6rem; cursor: pointer;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.boton-enviar:hover:not(:disabled) { background: var(--lime); color: var(--negro); }
.boton-enviar:disabled { opacity: 0.6; cursor: wait; }
.girando {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.aviso-error {
  margin-top: 1rem; color: var(--rojo); font-weight: 700;
}
.aviso-error[hidden] { display: none; }

/* ---------------------------------------------------------------------- popup */
.popup {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(0 0 0 / 0.78);
  display: grid; place-items: center;
  padding: var(--borde);
}
.popup[hidden] { display: none; }
.popup__caja {
  position: relative;
  width: min(60rem, 100%);
  aspect-ratio: 16 / 9;
  min-height: 24rem;
  background: url("../assets/img/popup-fondo.jpg") center / cover no-repeat;
  display: grid; place-items: center;
  text-align: center;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.7);
  overflow: hidden;
}
.popup__contenido { padding: 2.5rem clamp(1.25rem, 6vw, 5rem); max-width: 40rem; text-shadow: 0 2px 10px rgb(0 0 0 / 0.5); }
.popup__titulo { font-size: clamp(2rem, 5vw, 3.4rem); }
.popup__titulo::after { content: ""; display: block; width: 100%; height: 4px; background: var(--blanco); margin: 0.6rem auto 1.2rem; }
.popup__subtitulo { font-weight: 800; font-size: 1.25rem; margin: 0 0 0.8rem; }
.popup__texto { margin: 0 auto 1.6rem; max-width: 46ch; }
.popup__marcas { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.popup__marcas img { height: 2.1rem; width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5)); }
.popup__marcas span { font-family: var(--titular); font-size: 1.5rem; line-height: 1; }
.popup__cierre { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.popup__flecha { position: absolute; right: 3%; bottom: 6%; width: clamp(5rem, 12%, 9rem); pointer-events: none; }
.popup__cerrar {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgb(0 0 0 / 0.55); color: var(--blanco); border: 0;
  font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer;
  display: grid; place-items: center;
}
.popup__cerrar:hover { background: var(--lime); color: var(--negro); }
@media (max-width: 40rem) {
  .popup__caja { aspect-ratio: auto; min-height: 0; }
  .popup__contenido { padding: 3.5rem 1.25rem 3rem; }
  .popup__flecha { display: none; }
}

/* ------------------------------------------------------------------------ pie */
.pie {
  border-top: 1px solid var(--linea);
  background: var(--superficie);
  padding-block: 3rem 2.5rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
}
.pie__fila { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-end; justify-content: space-between; }
.pie img { width: 8.5rem; height: auto; }
.pie__legal { font-size: 0.8125rem; color: var(--gris-medio); max-width: 46ch; }
.pie__legal p { margin: 0 0 0.35rem; }
.pie__legal a { color: var(--lime); }
.pie__documentos { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.pie__documentos a { text-decoration: none; font-weight: 700; }
.pie__documentos a:hover { text-decoration: underline; }
.pie__slogan { font-family: var(--titular); text-transform: uppercase; font-size: clamp(1.125rem, 2.4vw, 1.625rem); line-height: 1.05; max-width: 18ch; }
.pie__marcas { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.pie__marcas img { width: auto; height: 1.6rem; opacity: 0.85; }

/* ------------------------------------------------------- página de términos */
.legal { padding: 3rem 0 5rem; }
.legal__contenedor { width: min(50rem, 100% - var(--borde) * 2); margin-inline: auto; }
.legal__encabezado { border-bottom: 1px solid var(--linea); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.legal__titulo { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.5rem; }
.legal__sub { color: var(--gris-claro); margin: 0; }
.legal__fecha { color: var(--gris-medio); font-size: 0.85rem; margin: 0.5rem 0 0; }
.legal h2 { font-size: 1.4rem; margin: 2.5rem 0 0.8rem; color: var(--lime); }
.legal p, .legal li { color: var(--gris-claro); }
.legal p { margin: 0 0 0.9rem; max-width: none; }
.legal ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.4rem; }
.legal strong { color: var(--blanco); }
.legal__destacado { border-left: 3px solid var(--lime); padding: 0.9rem 1.2rem; background: var(--superficie); margin: 1.2rem 0; }
.legal__destacado p:last-child { margin: 0; }
.legal__volver { display: inline-block; margin-top: 2.5rem; font-weight: 700; }

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