/* PSLSC Soccer School — landing v1 (/school). Mobile-first; un breakpoint a 960px. */

@font-face {
  font-family: 'Druk';
  src: url('/assets/fonts/Druk-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Manual del Soccer School */
  --red: #FF0048;
  --aqua: #AAF6E6;
  --ink: #1C1C1C;
  --paper: #FFFFFF;
  --c-explorers: #FF7800;
  --c-sailors: #FEEB0A;
  --c-mates: #FE00FE;
  --c-captains: #2EE600;
  --muted: #555555;
  --line: rgba(28, 28, 28, .15);
  --error: #C4003A;
  /* El manual pide Druk XCond y Coolvetica; hasta tener licencia web, Druk Heavy y Proxima Nova (licencias del club) */
  --font-display: 'Druk', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --wrap: 1120px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } /* gutter fijo: al sacar el overflow:hidden del intro no aparece la barra y no salta todo (CLS 0,83 en PageSpeed) */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.d {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.arrow { width: .7em; height: .7em; flex: none; }
.arrow--up { transform: rotate(-90deg); }

/* ---------- Barra del club ---------- */
.clubbar { background: var(--ink); color: #fff; }
.clubbar .wrap { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.clubbar img { width: 30px; }
.clubbar__name { font-size: 19px; }
.clubbar__city { font-size: 12px; color: #b5b5b5; margin-top: 2px; }
.clubbar__tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--aqua);
  text-align: right;
}

/* ---------- Hero + formulario ---------- */
.hero { --wave-h: 44px; position: relative; background: var(--red); color: #fff; padding: 22px 0 32px; margin-bottom: var(--wave-h); }
/* Borde ondulado que cuelga sobre la sección blanca (la onda de "Register now" del video) */
.hero__wave { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: calc(var(--wave-h) + 1px); fill: var(--red); }
.hero + .section { padding-top: 40px; }
.hero__grid { display: grid; gap: 22px; }
.hero__intro { text-align: center; }
.hero__logo { width: min(260px, 74%); margin: 16px auto 14px; }
.hero__title { color: var(--aqua); font-size: clamp(40px, 11.5vw, 84px); }
.hero__lpe { font-size: clamp(22px, 6.4vw, 34px); margin: 8px 0 12px; }
/* Blanco sobre red marine da 3,9:1 → sobre rojo solo texto grande (≥ 19px bold o ≥ 24px regular) */
.hero__lead { font-size: 19px; font-weight: 700; line-height: 1.35; max-width: 32ch; margin: 0 auto; }

.card {
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  padding: 22px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  scroll-margin-top: 16px;
}
.form__title { font-size: 34px; }
.form__sub { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.field { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.field > label,
.field > legend {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field > legend em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px evita el zoom automático de iOS */
}
.input::placeholder { color: #8a8a8a; }
.input[aria-invalid="true"],
[data-ss-ages][aria-invalid="true"] .chip span { border-color: var(--red); }

.chips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; max-width: 420px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  user-select: none;
}
.chip input:checked + span { background: var(--ink); color: var(--aqua); }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.4; color: #333; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 54px;
  padding: 8px 28px 5px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--aqua);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #000; }
.btn:disabled { opacity: .6; cursor: progress; }
.form .btn { width: 100%; margin-top: 18px; }
.btn--aqua { background: var(--aqua); color: var(--ink); }
.btn--aqua:hover { background: #fff; }

.msg { font-size: 14px; margin-top: 10px; }
.msg:empty { display: none; }
.msg[data-state="err"] { color: var(--error); font-weight: 700; }
.legal { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 12px; }

.success { text-align: center; padding: 20px 4px; outline: none; }
.success__title { font-size: 44px; margin-bottom: 10px; }
.success p { font-size: 17px; }

/* ---------- Secciones ---------- */
.section { padding: 56px 0; }
.section--tight { padding-top: 0; }
.section--ink { background: var(--ink); color: #fff; }
.section--red { background: var(--red); color: #fff; text-align: center; }
.h2 { font-size: clamp(40px, 9.5vw, 64px); margin-bottom: 24px; }

.pillars { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pillar { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: baseline; }
.pillar__name { font-size: 42px; }
.pillar p { font-size: 17px; }

.cats { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: cat; }
.cat { position: relative; overflow: hidden; min-height: 190px; padding: 18px 18px 16px; border-radius: 0 28px 0 0; color: var(--ink); counter-increment: cat; }
.cat > * { position: relative; z-index: 1; }
/* Número fantasma de la etapa, asomando por la esquina de abajo a la derecha */
.cat::after {
  content: '0' counter(cat);
  position: absolute;
  z-index: 0;
  right: -4px;
  bottom: -.14em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 104px;
  line-height: 1;
  color: rgba(28, 28, 28, .13);
  pointer-events: none;
}
.cat h3 { font-size: 32px; }
.cat p { margin-top: 8px; font-size: 16px; line-height: 1.35; }
.cat--explorers { background: var(--c-explorers); }
.cat--sailors { background: var(--c-sailors); }
.cat--mates { background: var(--c-mates); }
.cat--captains { background: var(--c-captains); }
/* Teléfonos y tablets: las etapas van en un carrusel horizontal con snap, asomando la siguiente */
@media (max-width: 959px) {
  .cats {
    grid-auto-flow: column;
    grid-auto-columns: min(76%, 300px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .cats::-webkit-scrollbar { display: none; }
  .cat { scroll-snap-align: start; }
}

.why__title { color: var(--aqua); }
.reasons { margin: 0; padding: 0; list-style: none; }
.reasons li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: 18px; }
.reasons li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: url('/assets/anchor-aqua.webp') center / contain no-repeat;
}

.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--font-display); font-size: 28px; line-height: 1; transition: transform .2s ease; }
.faq details[open]:not(.is-closing) summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; max-width: 60ch; color: #444; }

.closing__title { color: var(--aqua); font-size: clamp(44px, 11.5vw, 96px); margin-bottom: 26px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #b5b5b5; padding: 32px 0; font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.footer__club { display: flex; align-items: center; gap: 12px; }
.footer__club img { width: 40px; }
.footer__name { font-size: 22px; color: #fff; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.footer__site { color: var(--aqua); font-weight: 700; text-decoration: none; }
.footer__site:hover { text-decoration: underline; }
.social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
}
.social a:hover { border-color: var(--aqua); color: var(--aqua); }
.social svg { width: 16px; height: 16px; }

/* ---------- Intro: video del club como pantalla de carga (lo maneja school.js; ver el <head>) ---------- */
.intro {
  /* Apaisado: el video cubre la pantalla. Vertical: elipse (ver más abajo). */
  --stage-w: max(100vw, 177.78vh);
  --stage-h: calc(var(--stage-w) * .5625);
  --p: 0; /* avance del loader, de 0 a 1 (lo pone school.js) */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #FF0052; /* el rojo de las placas del video tal como lo pinta Chrome (no es --red) */
  transition: opacity .9s ease;
}
@supports (height: 100dvh) { .intro { --stage-w: max(100vw, 177.78dvh); } }
@media (max-aspect-ratio: 1/1) {
  /* Vertical: el video va adentro de una elipse con la proporción del logo de la school (2,1:1), más ancha que la
     pantalla, que sobresale por los costados. Se ve el 48% central del ancho y el 85% del alto del cuadro, donde
     cae todo el texto del video. El loader queda pegado al borde de arriba. */
  .intro { --stage-w: 210vw; --stage-h: calc(210vw / 2.1); }
  .intro__stage { border-radius: 50%; overflow: hidden; clip-path: ellipse(50% 50%); isolation: isolate; }
  .intro .intro__loader { top: 0; } /* pisa el top calculado de más abajo */
}
.intro-on { overflow: hidden; }
.intro-on .intro, .intro.is-leaving { display: block; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
/* La landing espera abajo y sube mientras el video se desvanece */
body > :not(.intro) { transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.intro-on body > :not(.intro) { opacity: 0; transform: translateY(56px); }
.intro__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: translate(-50%, -50%);
}
.intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__loader {
  position: absolute;
  left: 0;
  right: 0;
  /* Pegado al borde de arriba del video; si el video se sale por arriba (pantallas muy anchas), al de la pantalla */
  top: max(0px, calc(50% - var(--stage-h) / 2));
}
.intro__bar {
  display: block;
  height: 4px;
  background: var(--aqua);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  transform: scaleX(var(--p));
  transform-origin: left;
}
.intro__track { position: absolute; top: 14px; left: var(--gutter); right: var(--gutter); }
.intro__label {
  position: absolute;
  top: 0;
  /* Acompaña la punta de la línea sin salirse: al 0% arranca en el borde izquierdo, al 100% termina en el derecho */
  left: calc(var(--p) * 100%);
  transform: translateX(calc(var(--p) * -100%));
  padding: 9px 16px 6px;
  border-radius: 999px;
  background: rgba(28, 28, 28, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--aqua);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Movimiento (lo activa school.js; sin JS o con reduced motion se ve todo quieto) ---------- */
/* Todo entra subiendo con `rise`, escalonado: --i es el índice (palabra o ítem), --step el paso y --d el arranque.
   Se anima `translate` y no `transform`, para no pisar el hover de las tarjetas. */
@keyframes rise { from { opacity: 0; translate: 0 var(--rise, 24px); } }
.w { display: inline-block; --rise: .5em; }
.reveal-on [data-reveal]:not(.is-in) :is(.w, .pillar, .cat, .reasons li, .faq details, .btn),
.reveal-on:not(.page-in) .hero :is(.w, .hero__lead) { opacity: 0; }
.reveal-on [data-reveal].is-in :is(.w, .pillar, .cat, .reasons li, .faq details, .btn),
.reveal-on.page-in .hero :is(.w, .hero__lead) {
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--step, 70ms));
}
:is(.pillars, .cats, .reasons, .faq) > :nth-child(2) { --i: 1; }
:is(.pillars, .cats, .reasons, .faq) > :nth-child(3) { --i: 2; }
:is(.pillars, .cats, .reasons, .faq) > :nth-child(4) { --i: 3; }
:is(.pillars, .cats, .reasons, .faq) > :nth-child(5) { --i: 4; }
:is(.pillar, .cat, .reasons li, .faq details) { --step: 90ms; --d: 180ms; } /* después de las palabras del título */
.pillar { --d: 0ms; }
.section--red .btn { --i: 4; } /* después de las 4 palabras del cierre */
/* Hero: arranca cuando el intro ya se está yendo (la página sube en .9 s) */
.hero__title { --d: 250ms; }
.hero__lpe { --d: 530ms; }
.hero__lead { --d: 760ms; }

/* Microinteracciones */
@keyframes pop { 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: no-preference) {
  .arrow { transition: translate .2s ease; }
  .btn:hover .arrow { translate: 4px 0; }
  .btn:hover .arrow--up { translate: 0 -4px; }
  .chip span { transition: background-color .15s ease, color .15s ease; }
  .chip input:checked + span { animation: pop .3s ease; }
  .cat { transition: transform .25s ease, box-shadow .25s ease; }
}
@media (hover: hover) and (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .cat:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0, 0, 0, .14); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq summary::after { transition: none; }
}

/* Teléfonos muy angostos: los chips pasan a dos filas para no bajar de 24px */
@media (max-width: 359px) {
  .chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .clubbar__tag { display: none; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .clubbar .wrap { min-height: 64px; gap: 12px; }
  .clubbar img { width: 36px; }
  .clubbar__name { font-size: 22px; }
  .clubbar__tag { font-size: 12px; }
  .hero { --wave-h: 80px; padding: 56px 0 64px; }
  .hero + .section { padding-top: 64px; }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
  .hero__intro { text-align: left; }
  .hero__logo { width: 400px; margin: 22px 0; }
  .hero__lead { margin: 0; }
  .card { padding: 30px; }
  .form__title { font-size: 40px; }
  .section { padding: 84px 0; }
  .section--tight { padding-top: 0; }
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .pillar { display: block; }
  .pillar__name { font-size: 76px; margin-bottom: 12px; }
  .pillar p { font-size: 18px; max-width: 300px; }
  .cats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .cat { min-height: 220px; padding: 24px 22px; border-radius: 0 40px 0 0; }
  .cat::after { font-size: 128px; }
  .cat h3 { font-size: 36px; }
  .cat p { font-size: 15px; }
  .split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .reasons li { font-size: 20px; padding: 16px 0; }
  .footer .wrap { justify-content: space-between; }
  .intro__bar { height: 6px; }
  .intro__track { top: 20px; }
  .intro__label { font-size: 28px; padding: 11px 20px 8px; }
}