/* =====================================================================
   PÚBLICO — landing y pantallas de autenticación.
   Es el ÚNICO lugar del proyecto con fondo oscuro, y vive en un archivo
   aparte a propósito: la app por dentro sigue clara y nada de acá tiene
   que poder filtrarse hacia ella. Por eso todo cuelga de .publico.
   No es una inconsistencia — es la separación entre la presentación
   pública y la herramienta de trabajo, que se usa en la cancha (bajo techo).
   Todos los colores salen de tokens.css.
   Mobile-first. Las versiones de escritorio viven en layout.css, que es el
   único lugar del proyecto con media queries de ancho.
   ===================================================================== */

.publico{
  min-height:100dvh;background:var(--pub-fondo);color:var(--sobre-oscuro);
  display:flex;flex-direction:column;
  position:relative;isolation:isolate;
}
/* El resplandor del color del club arriba de todo, detrás de la marca y del
   hero. Estático. Va en un pseudo-elemento y la intensidad en opacity porque
   el gradiente con color-mix() (--club mezclado con transparente) costó
   ~+450 ms de FCP y ~+900 ms de LCP en Lighthouse mobile; con var(--club) puro
   y opacity, que compone la GPU, el costo desaparece. */
.publico::before{
  content:"";position:absolute;inset:0 0 auto;height:28rem;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 75% 100% at 50% 0,var(--club),transparent);
  opacity:.4;
}
.publico[hidden]{display:none}
.vista{display:none}
.vista.on{display:block}

/* ---- marca: escudo + nombre, arriba de todo ---- */
.marca{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4) 0}
.marca img{width:2.75rem;height:2.75rem;flex:0 0 auto}
.marca .t{font-family:var(--ff-titulo);font-weight:700;font-size:var(--fs-230);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.marca .s{font-size:var(--fs-100);color:var(--gris-osc);letter-spacing:.14em;text-transform:uppercase;margin-top:.1875rem}

/* ---- landing ---- */
.hero{padding:var(--sp-6) var(--sp-4) var(--sp-5);text-align:center}
.hero .club{font-family:var(--ff-titulo);font-size:var(--fs-125);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-osc);margin-bottom:var(--sp-3)}

/* Escudo con el nombre del club girando alrededor. El SVG gira entero (su
   centro es el del escudo) y sólo anima transform. Es la única animación
   continua del proyecto (excepción en DESIGN.md): un observer le pone .quieto
   cuando sale de pantalla, y con prefers-reduced-motion base.css la apaga y el
   texto queda en su lugar, legible. */
.escudo-anillo{position:relative;width:9rem;height:9rem;margin:0 auto var(--sp-5)}
.escudo-anillo img{position:absolute;inset:26%;width:48%;height:48%;object-fit:contain}
.anillo{position:absolute;inset:0;width:100%;height:100%;animation:giro var(--dur-giro) linear infinite}
.anillo.quieto{animation-play-state:paused}
.anillo text{font-family:var(--ff-titulo);font-weight:600;letter-spacing:.04em;fill:var(--gris-osc)}
@keyframes giro{from{transform:rotate(-360deg)}}
.hero h1{font-size:clamp(1.75rem,1.35rem + 2vw,2.75rem);line-height:1.03;letter-spacing:.01em}
.hero h1 .r{color:var(--primario)}
.hero .bajada{color:var(--gris-osc);font-size:var(--fs-170);line-height:1.45;margin:var(--sp-4) auto 0;max-width:34rem}

.acciones-landing{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-6);max-width:24rem;margin-inline:auto;width:100%}

.beneficios{display:grid;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-6)}
/* Cada beneficio lleva un filete del color del club a la izquierda: marca la
   jerarquía sin sumar fondo. NO entran animados: se probó un fade escalonado y
   subía el LCP de la landing ~+316 ms (+2.6 %) en Lighthouse mobile, porque un
   párrafo de estas tarjetas es el elemento más grande y no cuenta hasta que se
   ve. Sin la animación el LCP queda igual que antes. */
.ben{
  position:relative;background:var(--pub-tarjeta);border:1px solid var(--pub-borde);
  border-radius:var(--r);padding:var(--sp-4);
  transition:transform var(--dur-2) var(--ease-salida);
  animation:subir-ben var(--dur-3) var(--ease-salida) backwards;
}
/* Entran subiendo, pero SIN opacity: con opacity 0 el párrafo (que es el LCP)
   no contaba hasta verse y costaba ~+316 ms. Un translateY no oculta nada, así
   que se pinta desde el primer frame. Sólo escalonan las 6 de la landing. */
@keyframes subir-ben{from{transform:translateY(.75rem)}}
.ben:nth-child(2){animation-delay:60ms}
.ben:nth-child(3){animation-delay:120ms}
.ben:nth-child(4){animation-delay:180ms}
.ben:nth-child(5){animation-delay:240ms}
.ben:nth-child(6){animation-delay:300ms}
.ben::before{
  content:"";position:absolute;left:-1px;top:var(--sp-4);bottom:var(--sp-4);width:3px;
  background:var(--primario);border-radius:0 2px 2px 0;transform-origin:left;
  transition:transform var(--dur-2) var(--ease-salida);
}
/* Anillo y resplandor del club, que aparecen con opacity. */
.ben::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:var(--brillo-club);opacity:0;transition:opacity var(--dur-2) var(--ease-salida);
}

.ben .t{
  font-family:var(--ff-titulo);font-size:var(--fs-170);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
  display:flex;align-items:baseline;gap:var(--sp-2);
}
.ben .t::before{
  content:"";width:.4375rem;height:.4375rem;background:var(--primario);flex:0 0 auto;
  transform:translateY(-.15em);transition:transform var(--dur-2) var(--ease-salida);
}
.ben .d{color:var(--gris-osc);font-size:var(--fs-135);line-height:1.5;margin-top:var(--sp-2)}

/* ---- demos de la landing ----
   Gráficos chicos con datos INVENTADOS, escritos en HTML/SVG y decorativos
   (aria-hidden): sólo muestran cómo se ve la función, no dicen nada real. Corren una sola vez: quedan pausadas,
   con fill-mode backwards (se ve el primer cuadro), hasta que landingAnimada.js
   le pone .en-vista a la tarjeta. Sólo se animan los gráficos: el texto de la
   tarjeta (.t y .d) se ve desde el primer cuadro porque es el LCP. */
.demo{margin-bottom:var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.ben:not(.en-vista) .demo *,.ben:not(.en-vista) .demo *::before{animation-play-state:paused}
@keyframes entra-demo{from{transform:translateY(.5rem);opacity:0}}
@keyframes aparece-demo{from{opacity:0}}
@keyframes destapa-demo{from{transform:translateX(0)}}

/* Planilla en miniatura con las columnas de la CABB. Una franja del color del
   club baja fila por fila (opacity, sin repintar) y cada fila "se convierte"
   en su chip de la derecha, con el mismo compás. */
.planilla{background:var(--pub-fondo);border:1px solid var(--pub-borde);border-radius:var(--r-s);overflow:hidden;font-family:var(--ff-mono);font-size:var(--fs-115);min-width:13.5rem}
.fila{position:relative;display:grid;grid-template-columns:2rem 1fr 2rem;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);color:var(--sobre-oscuro)}
.fila + .fila{border-top:1px solid var(--pub-borde)}
.fila span:first-child,.fila span:last-child,.fila b:first-child,.fila b:last-child{text-align:right}
.fila.cab{color:var(--gris-osc);background:var(--pub-tarjeta);font-weight:500}
.fila:not(.cab)::before{
  content:"";position:absolute;inset:0;background:var(--primario);opacity:0;pointer-events:none;
  animation:barre-fila var(--dur-3) var(--ease-salida);
}
.fila:nth-child(2)::before{animation-delay:150ms}
.fila:nth-child(3)::before{animation-delay:450ms}
.fila:nth-child(4)::before{animation-delay:750ms}
.fila:nth-child(5)::before{animation-delay:1050ms}
.fila:nth-child(6)::before{animation-delay:1350ms}
/* Sin fill backwards: en el retardo la fila está sin marcar (opacity 0) y no en el "from". */
@keyframes barre-fila{from{opacity:.4}}
.flecha{color:var(--gris-osc);font-size:var(--fs-190)}
.chips-j{display:flex;flex-wrap:wrap;gap:var(--sp-2);flex:1 1 12rem}
.chips-j span{
  font-family:var(--ff-mono);font-weight:500;font-size:var(--fs-115);color:var(--sobre-oscuro);
  background:var(--pub-fondo);border:1px solid var(--pub-borde);border-radius:var(--r-s);padding:var(--sp-1) var(--sp-2);
  animation:entra-demo var(--dur-3) var(--ease-salida) backwards;
}
.chips-j span:nth-child(1){animation-delay:300ms}
.chips-j span:nth-child(2){animation-delay:600ms}
.chips-j span:nth-child(3){animation-delay:900ms}
.chips-j span:nth-child(4){animation-delay:1200ms}
.chips-j span:nth-child(5){animation-delay:1500ms}
.chips-j span:nth-child(6){animation-delay:1800ms}
.chips-j .mas{color:var(--gris-osc)}

.demo-tiro svg{width:100%;max-width:22rem;height:auto;display:block}
.demo-tiro{gap:var(--sp-3) var(--sp-6)}
.curva-demo{fill:none;stroke:var(--primario);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/* stroke-dashoffset repinta cada cuadro y está prohibido: la curva se "dibuja"
   corriendo un rectángulo del color de la tarjeta, que en reposo ya está afuera. */
.tapa{fill:var(--pub-tarjeta);transform:translateX(100%);animation:destapa-demo var(--dur-demo) var(--ease-salida) backwards}
.punto{fill:var(--primario);animation:aparece-demo var(--dur-3) var(--ease-salida) var(--dur-demo) backwards}
.cifra-tiro{fill:var(--sobre-oscuro);font-family:var(--ff-mono);font-weight:600;animation:aparece-demo var(--dur-3) var(--ease-salida) var(--dur-demo) backwards}

.demo-salto{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3)}
.etq{font-family:var(--ff-titulo);font-weight:600;font-size:var(--fs-125);letter-spacing:.11em;text-transform:uppercase;color:var(--gris-osc)}
.cifra-salto{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-260);color:var(--sobre-oscuro);font-variant-numeric:tabular-nums}
.sube-osc{
  font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-115);color:var(--sube-osc);
  background:var(--pub-fondo);border-radius:var(--r-s);padding:var(--sp-1) var(--sp-2);
  animation:aparece-demo var(--dur-3) var(--ease-salida) var(--dur-demo) backwards;
}

/* La pizarra de la landing es la misma que la de la app (cancha clara, fichas
   del club): sobre la tarjeta oscura queda como un recuadro de papel. La anima
   landingAnimada.js con la jugada de jugadaDemoLanding.js. */
.demo-jugadas{display:block}
.demo-jugadas svg.pz{max-width:24rem;margin-inline:auto}

/* Línea de tiempo: la línea se llena con scaleY desde arriba y los nodos se
   prenden en secuencia. El texto de cada temporada se ve siempre. */
.linea-t{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:var(--sp-3);flex:1 1 100%}
.linea-t li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-125);line-height:1.2rem;color:var(--sobre-oscuro)}
.linea-t::before{
  content:"";position:absolute;left:calc(.3125rem - 1px);top:.6rem;bottom:.6rem;width:2px;
  background:var(--primario);transform-origin:top;
  animation:llena-demo var(--dur-demo) var(--ease-salida) backwards;
}
.linea-t li::before{
  content:"";position:absolute;left:0;top:.3rem;width:.625rem;height:.625rem;border-radius:50%;background:var(--primario);
  animation:nodo-demo var(--dur-3) var(--ease-salida) backwards;
}
.linea-t li:nth-child(2)::before{animation-delay:300ms}
.linea-t li:nth-child(3)::before{animation-delay:600ms}
@keyframes llena-demo{from{transform:scaleY(0)}}
@keyframes nodo-demo{from{transform:scale(0);opacity:0}}

/* Lo único que se dice del futuro, y se dice separado de lo que ya anda. */
.futuro{
  color:var(--gris-osc);font-size:var(--fs-125);text-align:center;
  padding:0 var(--sp-4) var(--sp-8);max-width:34rem;margin-inline:auto;
  border-top:1px solid var(--pub-borde);padding-top:var(--sp-5);margin-top:var(--sp-2);
}

/* ---- caja de autenticación ---- */
.caja{max-width:23rem;margin-inline:auto;width:100%;padding:var(--sp-5) var(--sp-4) var(--sp-8)}
.caja h2{font-size:var(--fs-260);text-align:center;margin-bottom:var(--sp-2)}
.caja .sub{color:var(--gris-osc);font-size:var(--fs-135);text-align:center;line-height:1.45;margin-bottom:var(--sp-5)}

/* "¿Quién sos?": dos opciones grandes con su explicación, para que nadie
   elija mal por tocar el botón más visible. */
.quien{display:flex;flex-direction:column;gap:var(--sp-3)}
.quien-op{
  display:flex;flex-direction:column;gap:var(--sp-1);text-align:left;width:100%;
  min-height:var(--tap);padding:var(--sp-4);
  background:var(--pub-tarjeta);border:1px solid var(--pub-borde);border-left:3px solid var(--primario);
  border-radius:var(--r-m);color:var(--sobre-oscuro);
  transition:transform var(--dur-1) var(--ease-salida);
}
.quien-op .t{font-family:var(--ff-titulo);font-size:var(--fs-190);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.quien-op .d{color:var(--gris-osc);font-size:var(--fs-135);line-height:1.45}
.quien-op:active{transform:scale(.98)}

/* El código de 6 caracteres que el chico le muestra al profe en la práctica (0037). */
.codigo-solicitud{
  font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-300);
  letter-spacing:.3em;text-align:center;color:var(--sobre-oscuro);
  margin:var(--sp-4) 0;
}

.campo-osc{margin-bottom:var(--sp-4)}
.campo-osc label{
  font-family:var(--ff-titulo);font-size:var(--fs-115);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris-osc);font-weight:500;
  display:block;margin-bottom:var(--sp-2);
}
.campo-osc .env{position:relative;display:block}
.campo-osc .env svg{
  position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);
  width:1.125rem;height:1.125rem;stroke:var(--gris-osc);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.campo-osc input{
  width:100%;min-height:3rem;padding:var(--sp-3) var(--sp-3) var(--sp-3) 2.75rem;
  background:var(--sup-2);border:1px solid var(--linea-osc);border-radius:var(--r-m);
  color:var(--sobre-oscuro);font-size:var(--fs-160);font-family:var(--ff-mono);
}
.campo-osc select{
  width:100%;min-height:3rem;padding:var(--sp-3);
  background:var(--sup-2);border:1px solid var(--linea-osc);border-radius:var(--r-m);
  color:var(--sobre-oscuro);font-size:var(--fs-160);
}
.campo-osc select:focus{border-color:var(--primario)}
.campo-osc input::placeholder{color:var(--placeholder-osc)}
.campo-osc input:focus{border-color:var(--primario)}
.campo-osc .ayuda{font-size:var(--fs-115);color:var(--gris-osc);margin-top:var(--sp-1)}

/* El aviso de la app es blanco sobre papel; acá tiene que vivir en oscuro. */
.publico .al{background:var(--sup-1);color:var(--sobre-oscuro);box-shadow:none}
.publico .al .mt{color:var(--gris-osc)}

/* El secundario sobre el negro. La regla global de .btn.sec lo pinta blanco
   con borde gris, para el papel de la app; acá eso dejaba texto blanco sobre
   fondo blanco (1.00:1), un rectángulo vacío. Vuelve a fondo transparente.

   El borde pasa a --gris-osc, el token pensado para fondo oscuro: 7.57:1
   contra --negro. El que había, --linea-osc, daba 1.65:1: el botón se
   reconocía sólo por el texto, y en este proyecto el borde tiene que alcanzar
   solo. Sin sombra: --sombra está pensada para superficies claras. */
.publico .btn.sec{background:transparent;border-color:var(--gris-osc);color:var(--sobre-oscuro);box-shadow:none}
/* Tampoco hereda el :active global, que pinta --papel: con texto blanco, un
   secundario apretado se volvía invisible justo mientras se lo toca. */
.publico .btn.sec:active{background:var(--presion-osc)}

.o{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0;color:var(--gris-osc);font-family:var(--ff-titulo);font-size:var(--fs-135);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.o::before,.o::after{content:"";flex:1;height:1px;background:var(--linea-osc)}

.btn-google{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  width:100%;min-height:var(--tap);padding:var(--sp-3) var(--sp-4);
  background:var(--blanco);color:var(--google-texto);border-radius:var(--r-btn);
  font-family:var(--ff-titulo);font-size:var(--fs-160);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  transition:transform var(--dur-1) var(--ease-salida);
}
.btn-google svg{width:1.125rem;height:1.125rem;flex:0 0 auto}
.btn-google:active{transform:scale(.97);background:var(--google-hover)}
.btn-google:disabled{background:var(--sup-2);color:var(--gris-osc);transform:none}

.enlaces{display:flex;flex-direction:column;align-items:center;margin-top:var(--sp-5)}
.enlaces button{
  min-height:var(--tap);display:flex;align-items:center;padding:0 var(--sp-2);
  color:var(--gris-osc);font-size:var(--fs-135);
}
.enlaces button b{color:var(--primario);font-family:var(--ff-titulo);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-left:.35em}

/* ---- Términos y Privacidad ---- */
.pie-legal{text-align:center;font-size:var(--fs-125);color:var(--gris-osc);padding:0 var(--sp-4) var(--sp-8);margin-top:calc(-1 * var(--sp-5))}
.pie-legal a,.nota-legal a,.docs-legales a{color:var(--sobre-oscuro)}
/* Dos links en línea: el área de toque llega a --tap sin cambiar el texto. */
.pie-legal a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap)}
.nota-legal{font-size:var(--fs-125);color:var(--gris-osc);text-align:center;line-height:1.45;margin-top:var(--sp-3)}
.docs-legales{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.docs-legales a{
  display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);
  background:var(--pub-tarjeta);border:1px solid var(--pub-borde);border-radius:var(--r-m);
  font-family:var(--ff-titulo);font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
}
.docs-legales a::after{content:"↗";margin-left:auto;color:var(--gris-osc)}
/* El texto entero es el blanco del toque: en el celular el checkbox solo es
   chico para el dedo. */
.acepto{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-145);line-height:1.5;margin-bottom:var(--sp-4);cursor:pointer}
.acepto input{width:1.375rem;height:1.375rem;flex:0 0 auto;margin-top:.1rem;accent-color:var(--primario)}

/* ---- cuenta sin club ---- */
.sin-club{max-width:28rem;margin-inline:auto;width:100%;padding:var(--sp-6) var(--sp-4) var(--sp-8);text-align:center}
.sin-club .ico{
  width:3.5rem;height:3.5rem;margin:0 auto var(--sp-4);border-radius:50%;
  background:var(--sup-1);border:1px solid var(--linea-osc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-titulo);font-size:var(--fs-260);font-weight:700;color:var(--primario);
}
.sin-club .btn + .d{margin-top:var(--sp-5)}
.sin-club .d + .btn{margin-top:var(--sp-2)}
.sin-club h2{font-size:var(--fs-250);margin-bottom:var(--sp-3)}
.sin-club .d{color:var(--gris-osc);font-size:var(--fs-145);line-height:1.55;margin-bottom:var(--sp-4);text-align:left}
.sin-club .mail{
  background:var(--sup-1);border:1px solid var(--linea-osc);border-radius:var(--r);
  padding:var(--sp-3);font-family:var(--ff-mono);font-size:var(--fs-145);
  margin-bottom:var(--sp-5);word-break:break-all;
}

/* El botón principal de la landing lleva un brillo suave en reposo y se
   enciende del todo al pasar el mouse (la regla de :hover lo pisa). */
.acciones-landing .btn:not(.sec)::after{opacity:.4}

@media (hover:hover){
  .ben:hover{transform:translateY(-4px)}
  .ben:hover::after{opacity:1}
  .ben:hover::before{transform:scaleX(1.7)}
  .ben:hover .t::before{transform:translateY(-.15em) rotate(45deg) scale(1.3)}
  .publico .btn.sec:not(:disabled):hover{background:var(--toque-osc)}
  .btn-google:not(:disabled):not(:active):hover{background:var(--google-hover);transform:translateY(-2px);transition-duration:var(--dur-2)}
  .enlaces button:hover b{color:var(--sobre-oscuro)}
  .quien-op:hover{background:var(--toque-osc)}
}