/* OSSMAT — hoja base de la plataforma.

   La paleta sale del logo: carbón, blanco hueso y limón. El limón es acento y
   sólo acento —un botón, un filete, un estado vivo—: en superficies grandes no
   se lee y deja de significar algo.

   Oscuro de casa. Es una herramienta que se usa de pie en un coliseo y en la
   pantalla de la sala; el claro existe para quien lo prefiera en su teléfono.

   Nada de lo que se ve acá está escrito en el HTML: todo sale de i18n/. */

:root {
  color-scheme: dark light;

  --carbon: #191C1B;
  --hueso:  #F3F2E9;
  --limon:  #D8F84A;

  --fondo:      #131615;
  --superficie: #1D2120;
  --superficie2:#252A28;
  --borde:      #2F3532;
  --texto:      #F3F2E9;
  --texto2:     #9AA39D;

  --display: 'Archivo', system-ui, sans-serif;
  --cuerpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1120px;
  --gutter: 18px;
  --radio: 14px;
  --toque: 48px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #F3F2E9; --superficie: #FFFFFF; --superficie2: #EDECE3;
    --borde: #DCDBD0; --texto: #191C1B; --texto2: #5E635F;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` tiene que ganarle a cualquier `display:` que pongamos nosotros. El
   navegador lo declara como `[hidden] { display: none }`, y eso pierde contra
   `.boton { display: inline-flex }`, que es mas especifico. Sin esta linea,
   esconder un boton no lo esconde: en el ultimo paso del alta seguian
   viendose «Siguiente» y «Crear» a la vez. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* La barra es pegajosa: sin esto, un ancla aterriza debajo de ella. */
section[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--cuerpo); font-size: 17px; line-height: 1.6;
  color: var(--texto); background: var(--fondo);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); margin: 0 0 .7rem; }
h2 { font-size: clamp(1.4rem, 4.5vw, 2.1rem); margin: 2.5rem 0 1rem; }
h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--limon); outline-offset: 3px; border-radius: 4px; }
img, picture, svg { max-width: 100%; }
img { height: auto; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.estrecha { max-width: 70ch; }
.silencio { color: var(--texto2); }
.chico { font-size: .9rem; }
.num { font-variant-numeric: tabular-nums; }

/* ── Barra ──────────────────────────────────────────────────────────────── */

.barra { background: var(--carbon); border-bottom: 1px solid #232725; position: sticky; top: 0; z-index: 30; }
.barra .envoltura { display: flex; align-items: center; gap: .75rem; min-height: 62px; }
.marca { display: flex; align-items: center; margin-right: auto; }
.marca img { height: 26px; width: auto; display: block; }
.barra nav { display: flex; align-items: center; gap: .3rem; }

/* El selector de idioma no se esconde en un menú: es lo primero que busca
   alguien que no entiende la pantalla. */
/* En telefono, el boton de la barra se parte en dos lineas y se come el
   ancho. El hero tiene el mismo a dos dedos de ahi: uno alcanza. */
@media (max-width: 560px) { .barra nav .boton { display: none; } }
.idiomas { display: flex; gap: .15rem; }
.idiomas button {
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; background: transparent; color: #9AA39D;
  border: 1px solid transparent; border-radius: 6px;
  min-height: 36px; padding: .2rem .5rem; cursor: pointer;
}
.idiomas button[aria-current="true"] { color: var(--carbon); background: var(--limon); }
.idiomas button:hover { color: var(--hueso); }

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

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--toque); padding: .7rem 1.3rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: var(--limon); color: var(--carbon);
  border: 1px solid var(--limon); border-radius: 10px;
  text-decoration: none; cursor: pointer;
}
.boton:hover { filter: brightness(1.08); }
.boton--hueco { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--hueco:hover { background: var(--superficie2); filter: none; }
/* Sobre la foto del hero el fondo es oscuro, y ahi `--texto` es casi negro
   sobre negro: el boton secundario se veia como un rectangulo vacio. Sobre
   fondo oscuro se escribe en claro, con el borde en claro. */
.hero-texto .boton--hueco {
  color: var(--hueso); border-color: rgba(233,236,231,.55);
  background: rgba(12,14,13,.35); backdrop-filter: blur(2px);
}
.hero-texto .boton--hueco:hover { background: rgba(233,236,231,.16); border-color: var(--hueso); }
.boton--chico { min-height: 38px; padding: .3rem .8rem; font-size: .9rem; border-radius: 8px; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

/* Un boton que se lee como enlace. Para la accion secundaria que termina el
   mismo camino —«lo creo despues»— y que no debe competir con la principal.
   Sigue siendo `<button>`: no lleva a ninguna parte, hace algo. */
.enlace {
  font: inherit; background: none; border: 0; padding: .5rem 0; min-height: 44px;
  color: var(--texto2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enlace:hover { color: var(--texto); }

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

.hero { position: relative; background: #0C0E0D; margin: 0 0 2rem; }
.hero img { display: block; width: 100%; max-height: 74vh; object-fit: cover; object-position: center 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,12,11,.96) 4%, rgba(10,12,11,.6) 44%, rgba(10,12,11,.08) 86%);
}
.hero-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-bottom: 1.8rem; color: var(--hueso); }
.hero-texto p { color: #D2D6D1; max-width: 46ch; }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.rejilla { display: grid; gap: .9rem; }
@media (min-width: 720px) { .rejilla--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 560px) { .rejilla--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* La eleccion de plantilla: la tarjeta entera es el area de toque, no el
   circulito. Con el pulgar, un radio de 16 px se falla una de cada tres. */
.opcion { display: block; margin: 0 0 .6rem; cursor: pointer; }
.opcion input { width: auto; min-height: 0; margin-right: .5rem; }
.opcion:has(input:checked) { border-left: 3px solid var(--limon); }
input[type="color"] { padding: .2rem; height: var(--toque); }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.1rem;
}
.tarjeta--limon { border-left: 3px solid var(--limon); }

.banda { margin: 2rem calc(var(--gutter) * -1); position: relative; }
.banda img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
@media (min-width: 1152px) { .banda { margin-left: 0; margin-right: 0; border-radius: var(--radio); overflow: hidden; } }

/* ── Formularios y tablas ───────────────────────────────────────────────── */

label { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 .3rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: .7rem .8rem; min-height: var(--toque);
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie2); color: var(--texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* El foco toma el color del organizador, no el limon de la plataforma. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--marca, var(--limon)); outline-offset: 1px;
  border-color: var(--marca, var(--limon));
}
.campo { margin: 0 0 1rem; }
.campo .ayuda { font-size: .87rem; color: var(--texto2); margin: .3rem 0 0; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); margin: 0 0 1rem; padding: 1rem; background: var(--superficie); }
legend { font-family: var(--display); font-weight: 700; padding: 0 .4rem; }

.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borde); }
th { font-family: var(--display); color: var(--texto2); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; padding: .15rem .55rem;
  border: 1px solid var(--borde); border-radius: 999px; color: var(--texto2);
}
.etiqueta--viva { color: var(--limon); border-color: rgba(216,248,74,.45); }

.vacio {
  text-align: center; padding: 2.5rem 1.25rem;
  border: 1px dashed var(--borde); border-radius: var(--radio); color: var(--texto2);
}
.aviso { border-left: 3px solid var(--limon); background: var(--superficie2); padding: .8rem 1rem; border-radius: 8px; margin: 0 0 1rem; }

/* ── Pasos ──────────────────────────────────────────────────────────────── */

.pasos { display: flex; gap: .3rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pasos li {
  flex: 1 1 0; min-width: 0; text-align: center; font-size: .78rem;
  color: var(--texto2); padding: .3rem 0 .45rem; border-bottom: 3px solid var(--borde);
}
.pasos li[aria-current="step"] { color: var(--texto); border-bottom-color: var(--limon); font-weight: 700; }
.pasos li.hecho { border-bottom-color: var(--texto2); }

/* En telefono, cinco rotulos en una fila de 375 px se pisan entre ellos y se
   lee «La organizacionEl reglamentoMarca e idioma». Las barras se quedan —son
   el avance— y el nombre del paso pasa al contador, que tiene la linea entera.
   El texto no se borra: se esconde a la vista y el lector de pantalla lo
   sigue leyendo. */
@media (max-width: 559px) {
  .pasos .rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pasos li { padding: .6rem 0 .5rem; }
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

footer { background: var(--carbon); color: #9AA39D; padding: 2.5rem 0 3rem; margin-top: 3rem; border-top: 1px solid #232725; }
footer a { color: var(--hueso); }
footer img { height: 22px; width: auto; margin: 0 0 .8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── «El día del torneo, en vivo» ─────────────────────────────────────────

   Tres pantallas y un gesto, en bucle de siete segundos. Es HTML y CSS, no un
   vídeo: pesa unos kilobytes, no hay que volver a grabarlo cada vez que cambia
   un botón, y lo que se ve es de verdad la maqueta de las pantallas.

   El guion del bucle, para que se pueda leer sin descifrar los retardos:

     0,0 s  la mesa muestra el combate en curso
     1,2 s  el dedo baja sobre el lado que ganó
     1,8 s  aparece «Gana» en ese lado
     2,6 s  la pantalla de sala marca ese combate como terminado
     3,4 s  entra el combate siguiente en «En el tatami ahora»
     4,2 s  el teléfono del atleta enciende «Prepárate, sigues tú»
     7,0 s  vuelve a empezar

   Con `prefers-reduced-motion` no se mueve nada: las tres pantallas se quedan
   en su estado final, que es el que cuenta la historia entera. */

.vivo {
  position: relative; margin: 2.5rem 0; padding: 3rem 0;
  background: #0B0D0C url('/assets/arena-1200.jpg') center/cover no-repeat;
  color: var(--hueso);
}
.vivo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,12,.86), rgba(11,13,12,.94));
}
.vivo > .envoltura { position: relative; }
.vivo h2 { margin-top: 0; }

/* ── Los tres aparatos ────────────────────────────────────────────────────
   Un televisor y dos telefonos, dibujados en CSS. Antes eran tres rectangulos
   del mismo tamano, y nadie entendia que uno era la pantalla de la sala: se
   leia como tres tarjetas cualesquiera. Con la forma del aparato se entiende
   antes de leer una palabra, que es justo lo que tiene que pasar en la portada.

   El televisor va al centro y mas grande —es la que mira todo el coliseo— y
   los telefonos a los lados, un poco por delante y un poco mas abajo, como
   estarian en una mesa. En movil no caben tres al lado: se convierte en un
   carrusel que se arrastra, con `scroll-snap` para que cada aparato quede
   centrado solo. */

.demo { position: relative; display: grid; gap: 1.6rem; margin: 1.8rem 0 2.2rem; }
.demo-pieza { margin: 0; }
.demo figcaption {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8B948D; margin: 0 0 .5rem;
}

@media (max-width: 899px) {
  /* Carrusel. Los margenes negativos lo sacan del `padding` de la envoltura
     para que el primer aparato empiece pegado al borde y se vea que hay mas
     a la derecha. */
  .demo {
    grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter); scrollbar-width: none;
  }
  .demo::-webkit-scrollbar { display: none; }
  .demo-pieza { scroll-snap-align: center; }
}
@media (min-width: 900px) {
  /* El televisor se lleva mas del doble del ancho de cada telefono. Un
     telefono es mas ALTO que un televisor de 16:9 aunque sea mucho mas
     estrecho, asi que la unica forma de que el televisor lea como el aparato
     grande es darle ancho de verdad y ponerle tope al telefono. */
  .demo { grid-template-columns: 1fr 2.4fr 1fr; align-items: end; gap: 0 1.2rem; }
  .demo-pieza--tel { transform: translateY(1.5rem); z-index: 1; }
  .aparato--tel { max-width: 200px; margin-left: auto; margin-right: auto; }
}

/* ── El cuerpo de cada aparato ───────────────────────────────────────────── */

.aparato { position: relative; }

/* Telefono: proporcion 9:19.5, bordes muy redondeados, muesca arriba. */
.aparato--tel {
  border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, #3A423D, #1A1F1C 40%, #121614);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.aparato--tel .aparato-pantalla {
  aspect-ratio: 9 / 19.5; border-radius: 23px; border: 0;
  padding: 1.5rem .7rem .7rem;
}
.tel-muesca {
  position: absolute; z-index: 2; left: 50%; top: 8px; transform: translateX(-50%);
  width: 34%; height: 17px; border-radius: 0 0 11px 11px; background: #121614;
}

/* Televisor: 16:9 con marco fino y pie. */
.aparato--tv {
  border-radius: 10px; padding: 7px 7px 8px;
  background: linear-gradient(160deg, #3A423D, #171C19 45%, #0E1210);
  box-shadow: 0 16px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.aparato--tv .aparato-pantalla {
  aspect-ratio: 16 / 9; border-radius: 4px; border: 0; padding: .9rem 1rem;
}
/* El pie, en dos trazos: el cuello y la base. Sin el, el televisor se lee
   como un cuadro colgado. */
.tv-pie {
  display: block; width: 26%; height: 20px; margin: 0 auto;
  background: linear-gradient(180deg, #2A322E, #171C19);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.tv-pie::after {
  content: ""; display: block; position: relative; top: 20px; left: -40%;
  width: 180%; height: 5px; border-radius: 3px; background: #2A322E;
}

/* ── Lo que se ve dentro ─────────────────────────────────────────────────── */

.pant {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #151917; font-size: .78rem;
}
.pant b { display: block; font-family: var(--display); font-weight: 800; line-height: 1.15; }
.pant span { display: block; color: #8B948D; font-size: .7rem; }
.pant-cat { color: #6F7973; font-size: .64rem; margin: 0 0 .15rem; }
.pant-div { color: #8B948D; font-size: .66rem; margin: 0 0 .5rem; }
.pant-rotulo {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: #8B948D; margin: 0 0 .6rem;
}
.pant-tatami { font-family: var(--display); color: var(--limon); letter-spacing: .04em; }

.pant--mesa .pant-lado {
  position: relative; border: 2px solid #2A322E; border-radius: 10px;
  padding: .5rem .6rem; margin: 0 0 .4rem;
}
.pant--mesa .pant-lado--a { border-color: var(--limon); }
.pant-gana, .pant-fin {
  position: absolute; right: .4rem; top: .4rem; font-style: normal;
  font-family: var(--display); font-weight: 800; font-size: .66rem;
  background: var(--limon); color: var(--carbon); padding: .1rem .45rem; border-radius: 999px;
  opacity: 0;
}
.pant-dedo {
  position: absolute; left: 50%; top: 42%; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(216,248,74,.3); border: 2px solid var(--limon);
  opacity: 0; transform: translate(-50%,-50%) scale(.4);
}

.pant--tv b { font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.5rem); }
.pant-tv-sale { position: relative; border-left: 3px solid var(--limon); padding-left: .7rem; }
.pant-tv-entra {
  position: relative; border-left: 3px solid #3A423D; padding-left: .7rem;
  opacity: 0; height: 0; margin-top: 0; overflow: hidden;
}
.pant--atleta { justify-content: center; text-align: center; }
.pant--atleta b { font-size: 1.05rem; }
.pant-aviso {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  color: var(--limon); margin: 0 0 .5rem;
}

/* El halo: sale de la mesa y llega al televisor. Es lo unico que cuenta que
   una cosa provoca la otra; sin el son tres pantallas que cambian solas. */
.demo-halo {
  position: absolute; left: 22%; top: 55%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--limon); opacity: 0; pointer-events: none;
  box-shadow: 0 0 18px 6px rgba(216,248,74,.5);
}
@media (max-width: 899px) { .demo-halo { display: none; } }

/* ── El bucle, ocho segundos ──────────────────────────────────────────────
   0,0–1,6  el dedo toca «Gana» en la mesa
   1,6–3,0  el halo viaja de la mesa al televisor
   3,0–5,0  el televisor cierra el combate y abre el siguiente
   5,0–6,6  el telefono del atleta vibra y se enciende
   6,6–8,0  se sostiene el estado final, que es el que cuenta la historia

   Con `prefers-reduced-motion` no se mueve nada y todo queda en su estado
   final: la mesa con «Gana», el televisor con el combate siguiente y el aviso
   encendido. La pagina cuenta lo mismo sin un solo pixel en movimiento. */

@media (prefers-reduced-motion: no-preference) {
  .pant-dedo     { animation: dedo 8s infinite; }
  .pant-gana     { animation: aparece 8s infinite; }
  .demo-halo     { animation: halo 8s infinite; }
  .pant-fin      { animation: aparece-tarde 8s infinite; }
  .pant-tv-sale  { animation: sale 8s infinite; }
  .pant-tv-entra { animation: entra 8s infinite; }
  .aparato--vibra { animation: vibra 8s infinite; }
  .pant--atleta .pant-aviso, .pant--atleta b { animation: enciende 8s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pant-gana, .pant-fin { opacity: 1; }
  .pant-tv-sale { opacity: .35; }
  .pant-tv-entra { opacity: 1; height: auto; margin-top: .7rem; }
  .pant--atleta .pant-aviso, .pant--atleta b { opacity: 1; }
}

@keyframes dedo {
  0%, 8%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  13%      { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  20%      { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
  100%     { opacity: 0; }
}
@keyframes aparece {
  0%, 17%  { opacity: 0; }
  20%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes halo {
  0%, 20%  { opacity: 0; left: 22%; top: 55%; }
  24%      { opacity: 1; }
  36%      { opacity: .9; left: 50%; top: 42%; }
  40%      { opacity: 0; left: 50%; top: 42%; }
  100%     { opacity: 0; }
}
@keyframes aparece-tarde {
  0%, 40%  { opacity: 0; }
  44%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes sale {
  0%, 40%  { opacity: 1; }
  50%, 94% { opacity: .35; }
  100%     { opacity: 1; }
}
/* `height: auto` no se puede interpolar; se anima una altura concreta. Es una
   maqueta de tamano fijo, asi que la cifra no depende del contenido real. */
@keyframes entra {
  0%, 52%  { opacity: 0; height: 0; margin-top: 0; }
  60%, 94% { opacity: 1; height: 4.4rem; margin-top: .7rem; }
  100%     { opacity: 0; height: 0; margin-top: 0; }
}
/* Vibrar es un temblor corto, no un balanceo: tres sacudidas de dos pixeles. */
@keyframes vibra {
  0%, 62%, 69%, 100% { transform: translate(0,0); }
  63%, 67% { transform: translate(-2px, 1px); }
  65%      { transform: translate(2px, -1px); }
}
/* Apagado se sigue leyendo: una captura, una miniatura o una pestana en pausa congelan el bucle
   en cualquier punto, y a .2 el telefono salia vacio. Lo que cambia al encenderse es el color. */
@keyframes enciende {
  0%, 62%  { opacity: .7; color: var(--texto2, #9AA39D); text-shadow: none; }
  67%, 94% { opacity: 1; text-shadow: 0 0 14px rgba(216,248,74,.35); }
  100%     { opacity: .7; color: var(--texto2, #9AA39D); text-shadow: none; }
}

.vivo-frase {
  font-family: var(--display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.3rem, 4vw, 2.1rem); margin: 0 0 1rem;
}
.vivo-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 760px) { .vivo-puntos { grid-template-columns: repeat(3, 1fr); } }
.vivo-puntos li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; color: #C6CEC8; }
.vivo-puntos li::before { content: ""; width: 9px; height: 9px; margin-top: .5rem; border-radius: 2px; background: var(--limon); }

/* ── Cómo funciona, capturas, JJBDP, FAQ y pie ──────────────────────────── */

.pasos-numerados { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .pasos-numerados { grid-template-columns: repeat(3, 1fr); } }
.pasos-numerados li { counter-increment: p; padding-top: 2.4rem; position: relative; }
.pasos-numerados li::before {
  content: counter(p); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem; line-height: 1.7rem;
  width: 1.8rem; height: 1.8rem; text-align: center;
  background: var(--limon); color: var(--carbon); border-radius: 50%;
}

/* ── Las tres capturas ────────────────────────────────────────────────────
   Dentro de su aparato, el mismo que la animacion de arriba. Los pies de foto
   van ARRIBA y no debajo: con la leyenda debajo, tres aparatos de alturas
   distintas dejan las tres frases a tres alturas distintas y la fila se ve
   desordenada. Arriba arrancan las tres en la misma linea.

   En movil, carrusel con `scroll-snap`, igual que los aparatos de arriba: la
   pagina usa dos veces el mismo gesto y se aprende una sola vez. */
.capturas { display: grid; gap: 1.6rem; align-items: start; }
.capturas figure { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.capturas figcaption { margin: 0; min-height: 2.6em; }
.capturas .aparato { display: block; text-decoration: none; }
/* La captura conserva SU proporcion. Forzarle 9:16 la recortaba por los
   costados y volvia a cortar el texto —«Copa Altiplano» quedaba en «a
   Altiplano»—, que es justo el defecto que estas capturas venian a arreglar.
   El marco se adapta a la imagen, no al reves. */
.capturas .aparato-pantalla {
  display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill;
}
/* Sitio para la muesca. Sin esto se posa encima del primer renglon. */
.capturas .aparato--tel .aparato-pantalla { margin-top: 20px; border-radius: 6px; }
.capturas .aparato--tv .aparato-pantalla { border-radius: 4px; }
/* Los dos telefonos al mismo alto, y el televisor arriba del todo de su
   columna: un televisor es mucho mas bajo y centrarlo deja un hueco raro. */
.capturas .aparato--tel { max-width: 250px; margin: 0 auto; }
a.aparato:hover { outline: 2px solid var(--limon); outline-offset: 4px; }

@media (max-width: 719px) {
  .capturas {
    grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter); scrollbar-width: none;
  }
  .capturas::-webkit-scrollbar { display: none; }
  .capturas figure { scroll-snap-align: center; }
}
@media (min-width: 720px) { .capturas { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── La tarjeta de JJBDP ──────────────────────────────────────────────────
   Logo y texto pegados —24 px, no un vacio de cinco centimetros— y el logo a
   64 px de alto, que es la altura a la que su nombre se lee. Es un enlace
   entero a `/jjbdp/`: el que la mira quiere ver el sitio, no leer el cartel. */
.usa {
  display: grid; gap: 24px; align-items: center;
  text-decoration: none; color: inherit;
}
.usa img { height: 64px; width: auto; }
.usa h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.usa:hover { border-color: var(--limon); }
@media (min-width: 640px) { .usa { grid-template-columns: auto 1fr; } }

/* Un parrafo se lee mal si pasa de unos setenta caracteres por linea. Antes
   eso se conseguia estrechando la SECCION entera, con el efecto de que
   «Como cobramos» empezaba mas adentro que todas las demas: la pagina parecia
   mal cuadrada. Se limita el texto, no el contenedor. */
.envoltura > p, .envoltura > .faq, .envoltura > ol, .envoltura > ul { max-width: 70ch; }

.faq details {
  border-bottom: 1px solid var(--borde); padding: .3rem 0;
}
.faq summary {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  padding: .8rem 0; cursor: pointer; min-height: 48px; display: flex; align-items: center;
}
.faq details[open] summary { color: var(--limon); }
.faq p { margin: 0 0 1rem; }

.cierre h2 { font-size: clamp(1.5rem, 5vw, 2.4rem); }
.pie-ossmat { display: grid; gap: 1.8rem; }
@media (min-width: 760px) { .pie-ossmat { grid-template-columns: 1.6fr 1fr 1fr; } }
.pie-ossmat h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #6B7268; margin: 0 0 .4rem; }

/* ── El cartel de «nueva versión» ─────────────────────────────────────────
   Abajo, centrado, por encima de todo y sin tapar nada importante. Discreto a
   propósito: no es una alarma, es un aviso. Quien está en mitad de algo lo
   cierra y sigue. */
.hay-version {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .75rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem .6rem .6rem 1rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  background: var(--texto); color: var(--fondo);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.hay-version button {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; min-height: 38px; padding: 0 1rem;
  background: var(--marca); color: #10110f;
}
.hay-version .hay-version-cerrar {
  background: transparent; color: inherit; opacity: .65;
  min-width: 38px; padding: 0; font-size: 1.2rem; line-height: 1;
}
.hay-version .hay-version-cerrar:hover { opacity: 1; }
@media (max-width: 420px) {
  .hay-version { left: 1rem; right: 1rem; transform: none; max-width: none; border-radius: 14px; }
}

/* ── Lo que viene incluido ────────────────────────────────────────────────
   Una fila de seis, con un icono cada una. No son tarjetas: una tarjeta pide
   un parrafo, y aqui no hay parrafo que escribir —son seis nombres de cosas—.
   Con marco y sombra se veria como seis cajas medio vacias. */
.claves-titulo { margin: 2rem 0 .8rem; font-size: 1rem; color: var(--texto2); }
.claves {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; gap: .8rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.claves li {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 600; font-size: .95rem;
}
.claves svg {
  flex: 0 0 auto; width: 26px; height: 26px; color: var(--carbon);
  background: var(--limon); border-radius: 8px; padding: 4px;
}

/* El reparto por faja de una academia: los distintivos en fila, que envuelven
   en el telefono. `gap` y no un margen, para que la ultima linea no arrastre
   un hueco debajo. */
.reparto { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

/* Paginas legales: columna estrecha, que un parrafo de 90 caracteres no se lee. */
.legal { max-width: 42rem; }
.legal h2 { margin: 1.8rem 0 .4rem; }
.borrador { border-left: 3px solid var(--limon); background: var(--superficie2);
  padding: .8rem 1rem; border-radius: 8px; margin: 0 0 1.5rem; }

/* ── Entrar / Crear cuenta ──────────────────────────────────────────────── */

/* Dos columnas en escritorio: el visual del organizador manda a la izquierda,
   la tarjeta a la derecha. En telefono la tarjeta es lo unico que hay. */
.auth { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .auth { grid-template-columns: 1fr 420px; gap: 3.5rem; }
}

.auth-visual { display: none; }
@media (min-width: 900px) { .auth-visual { display: block; } }
.auth-visual img.auth-emblema { height: 56px; width: auto; margin: 0 0 1.2rem; }
.auth-visual h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; margin: 0 0 .8rem; }
.auth-visual p { color: var(--texto2); max-width: 34ch; }
.auth-proximo { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie); max-width: 34ch; }
.auth-proximo .etiqueta { font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto2); }

.auth-tarjeta { width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.6rem; }
@media (min-width: 520px) { .auth-tarjeta { padding: 2rem; } }

/* Las pestanas. El subrayado se desliza, que es toda la animacion que hace
   falta para que se entienda que son dos caras de lo mismo. */
.auth-pestanas { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 0 1.6rem; border-bottom: 1px solid var(--borde); }
.auth-pestanas button { appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--texto2);
  padding: .7rem .4rem; min-height: var(--toque); transition: color .18s ease; }
.auth-pestanas button[aria-selected="true"] { color: var(--texto); }
.auth-pestanas::after { content: ''; position: absolute; bottom: -1px; left: 0;
  width: 50%; height: 2px; background: var(--marca, var(--limon));
  transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.auth-pestanas[data-en="crear"]::after { transform: translateX(100%); }

/* El boton de Google, con su estilo oficial: fondo blanco y logo a color, en
   claro y en oscuro. No es decoracion, es lo que la gente reconoce. */
.boton-google { display: flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; min-height: var(--toque); padding: .7rem 1rem;
  background: #FFFFFF; color: #1F1F1F; border: 1px solid #DADCE0; border-radius: 10px;
  font-family: var(--cuerpo); font-weight: 600; font-size: .97rem;
  text-decoration: none; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.boton-google:hover { background: #F7F8F8; box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.boton-google svg { width: 18px; height: 18px; flex: none; }
/* A 320 px el texto del boton no cabe en una linea con el logo al lado. */
.boton-google { min-width: 0; text-align: center; }
.boton-google span { min-width: 0; overflow-wrap: anywhere; }

.auth-o { display: flex; align-items: center; gap: .9rem; margin: 1.3rem 0;
  color: var(--texto2); font-size: .88rem; }
.auth-o::before, .auth-o::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* Los campos, un punto mas claros que la tarjeta para que se lean como huecos
   donde se escribe y no como cajas decorativas. */
.auth-tarjeta .campo { margin: 0 0 1.1rem; }

/* Mostrar/ocultar la clave. El boton va dentro del campo, no al lado. */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 3rem; }
.campo-clave button { position: absolute; right: .35rem; bottom: .35rem;
  min-height: 38px; min-width: 38px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--texto2); cursor: pointer; border-radius: 8px; }
.campo-clave button:hover { color: var(--texto); background: var(--superficie); }

/* La fuerza de la clave: cuatro tramos que se encienden. */
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: .5rem 0 .3rem; }
.fuerza i { height: 4px; border-radius: 2px; background: var(--borde); transition: background .2s ease; }
.fuerza[data-n="1"] i:nth-child(-n+1), .fuerza[data-n="2"] i:nth-child(-n+2),
.fuerza[data-n="3"] i:nth-child(-n+3), .fuerza[data-n="4"] i:nth-child(-n+4) { background: var(--marca, var(--limon)); }
.fuerza-texto { font-size: .83rem; color: var(--texto2); }

/* El indicativo de pais y el numero, en una sola fila. */
.tel-fila { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }

/* El error de un campo va DEBAJO de ese campo, no al final del formulario:
   al final ya no se sabe cual era. */
.campo-error { color: var(--linea, #E4573D); font-size: .86rem; margin: .35rem 0 0; }
.auth-tarjeta .boton { width: 100%; }
.auth-pie { margin: 1.2rem 0 0; font-size: .86rem; color: var(--texto2); text-align: center; }
.auth-pie a { color: var(--texto2); }
.auth-legal { margin: 1rem 0 0; font-size: .82rem; color: var(--texto2); }

/* El boton mientras manda: se apaga y lo dice, sin cambiar de tamano. */
.boton[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Una ficha es una tarjeta de formulario: el mismo acabado que la de Entrar,
   para que inscribirse, «Mi cuenta» y «Registrar mi academia» no parezcan
   tres sitios distintos. */
.ficha { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.3rem; margin: 0 0 1.2rem; }
@media (min-width: 520px) { .ficha { padding: 1.6rem; } }
.ficha > :first-child { margin-top: 0; }
.ficha > :last-child { margin-bottom: 0; }

/* La sesion en la barra: iniciales y su menu. */
.ob-cuenta { position: relative; display: flex; align-items: center; }
.ob-yo { width: 36px; height: 36px; min-height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie2);
  color: var(--texto); font-family: var(--display); font-weight: 700; font-size: .82rem; }
.ob-yo:hover { border-color: var(--marca, var(--limon)); }
.ob-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; min-width: 12rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  padding: .4rem; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.ob-menu-quien { margin: .3rem .6rem .5rem; font-size: .84rem; color: var(--texto2);
  overflow-wrap: anywhere; }
.ob-menu a, .ob-menu button { display: block; width: 100%; text-align: left;
  padding: .6rem; min-height: var(--toque); border: 0; background: none; cursor: pointer;
  color: var(--texto); text-decoration: none; border-radius: 8px; font: inherit; }
.ob-menu a:hover, .ob-menu button:hover { background: var(--superficie2); }

/* La confirmacion de que algo se guardo. Verde del tatami, no el limon. */
.ok { color: #3F7D53; font-weight: 600; font-size: .9rem; margin: .5rem 0 0; }