/* Falcon Judo Club · site.css (v3, 2026-10-01; cierre v3: un solo logo, Shojumaru solo en titulares,
   coaches en rojo, y el corte del telefono sube a 899.98 px para la tablet chica)
   Tokens primero (brand.md + premium-web-effects/tokens.md). Nada de colores
   ni fuentes fuera de aqui. Escala aurea: 10.5, 17, 27.5, 44.5, 72, 116.5.
   v3, feedback de Ernesto, Alejandro y Michel: fondos blanco y rojo, dos
   fuentes (Shojumaru de pincel + Archivo), un solo logo, y en el telefono
   secciones cortas con filas que se deslizan (.rail) y plegables (.fold). */

:root{
  /* ── marca (brand.md, tal cual) ── */
  --rojo-sol:#D9241A;
  --naranja-fuego:#EA6E22;
  --tinta:#0B0E14;
  --carbon:#202637;
  --pizarra:#525B6C;
  --niebla:#D7DBE3;
  --papel:#F4F6F9;
  --blanco:#FFFFFF;
  --rojo-hondo:#C02119;
  --rojo-claro:#FE7B6A;
  --naranja-texto:#B95003;

  --borde-campo:var(--pizarra);
  --foco:var(--rojo-sol);
  --foco-claro:var(--blanco);          /* el anillo sobre Rojo sol y sobre Tinta */
  --error:var(--rojo-hondo);
  --exito:var(--tinta);

  /* nombres de premium-web-effects */
  --brand:var(--rojo-sol);
  --brand-rgb:217 36 26;
  --brand-btn:var(--rojo-sol);
  --brand-btn-hover:var(--rojo-hondo);
  --brand-soft:rgba(217,36,26,.15);
  --brand-line:rgba(217,36,26,.45);

  /* sobre Rojo sol: lineas decorativas en blanco */
  --linea-roja:rgba(255,255,255,.45);
  /* cristal: solo queda en el pie, que es Tinta */
  --glass:rgba(255,255,255,.055);
  --glass-line:rgba(255,255,255,.12);
  --glass-lift:rgba(255,255,255,.11);
  --glass-hover:rgba(255,255,255,.09);
  --glass-hover-line:rgba(255,255,255,.2);
  --velo:rgba(11,14,20,.6);           /* brand.md: velo de Tinta al 60 % */
  --sombra:0 30px 60px -28px rgba(11,14,20,.4);

  /* ── letra: dos fuentes. Shojumaru (pincel, como el logo) solo en el titular del heroe y en
     los h2 de hasta 5 palabras, nunca debajo de 27.5 px. Archivo para todo lo demas: cifras,
     precio, resultados y nombres van en Archivo 700 con cifras tabulares ── */
  --f-display:'Shojumaru', 'Archivo', system-ui, sans-serif;
  --f-texto:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* en rem (13, 17, 27.5, 44.5 px con la letra de 16 px del navegador) */
  --t-etiqueta:.8125rem;
  --t-cuerpo:1.0625rem;
  --t-deck:1.71875rem;
  --t-display:clamp(1.71875rem, 3.8vw, 2.78125rem);
  /* el lema mide lo que su columna: cada frase en una linea, de 27.5 a 56.6 px
     (56.6 = 44.5 por la raiz de 1.618, medio escalon aureo sobre el titular).
     8.2cqi deja un 5 % libre: "THROW TOGETHER," nunca llega al sol */
  --t-hero:clamp(1.71875rem, 8.2cqi, 3.5375rem);
  --peso-texto:400; --peso-fuerte:600; --peso-control:700;
  --tr-etiqueta:.16em;
  --lh-display:1.1; --lh-deck:1.35; --lh-texto:1.55;
  --med-titular:22ch; --med-deck:42ch; --med-cuerpo:56ch;

  /* ── espacio ── */
  --e-1:10.5px; --e-2:17px; --e-3:27.5px; --e-4:44.5px; --e-5:72px; --e-6:116.5px;
  --gut:clamp(17px, 5vw, 44.5px);
  --sec-pad:clamp(72px, 8vw, 116.5px);
  --maxw:1200px;
  --paso-cabecera:clamp(27.5px, 4vw, 44.5px);
  --gap-bloque:clamp(27.5px, 4vw, 72px);
  --gap-tarjetas:clamp(17px, 2.5vw, 27.5px);
  --header-h:80px;   /* el sello a 64 px de alto con 8 px de aire arriba y abajo */

  /* ── cuatro radios por oficio ── */
  --radius-xs:4px;
  --radius-sm:6.5px;
  --radius:10.5px;
  --radius-lg:17px;

  /* ── movimiento: dos velocidades, dos curvas ── */
  --rapido:136ms;
  --lento:220ms;
  --curva:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-reveal:700ms;
}

/* ── base ── */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--blanco);
  scroll-padding-top:calc(var(--header-h) + var(--e-1));
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font:var(--peso-texto) var(--t-cuerpo)/var(--lh-texto) var(--f-texto);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100% }
img,video{ height:auto }
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{ margin:0 }
ul,ol{ padding:0; list-style:none }
a{ color:inherit }
a[href^="tel:"]{ white-space:nowrap }
button{ font:inherit; color:inherit }
address{ font-style:normal }
[hidden]{ display:none !important }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

.i{ width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

:focus-visible{ outline:2px solid var(--foco); outline-offset:2px }
/* sobre Rojo sol el anillo rojo no se ve: va blanco (4.98:1); igual sobre Tinta y sobre video */
.red :focus-visible, .foot :focus-visible, .door :focus-visible{ outline-color:var(--foco-claro) }
/* el video del mensaje recibe el foco, pero la puerta lo recorta: el anillo va en el marco */
.msg:has(video:focus-visible), .msg:has(a:focus-visible){ outline:2px solid var(--foco); outline-offset:2px }

.skip{
  position:absolute; left:var(--gut); top:-100px; z-index:100;
  padding:var(--e-1) var(--e-2); background:var(--tinta); color:var(--blanco);
  border-radius:var(--radius-sm); font-weight:700; text-decoration:none;
}
.skip:focus{ top:var(--e-1) }

.wrap{ width:min(100% - 2 * var(--gut), var(--maxw)); margin-inline:auto }

/* ── papeles de texto ── */
.label{
  font-family:var(--f-texto); font-size:var(--t-etiqueta); font-weight:700;
  line-height:1.3; letter-spacing:var(--tr-etiqueta); text-transform:uppercase;
}
/* la letra de pincel: solo el titular del heroe y los h2 (de hasta 5 palabras). Un solo peso
   (sin negrita inventada), siempre en mayusculas, sin espaciado (ya es ancha) y con aire entre lineas */
.display, .hero-title{
  font-family:var(--f-display); font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:0; line-height:var(--lh-display);
}
/* datos y nombres: Archivo 700, al mismo tamano que tenian. Las cifras tabulares se alinean */
.stat-n, .price-n, .results dt, .plan-name, .coach-name, .msg-title, .fb-title, .follow-h{
  font-family:var(--f-texto); font-weight:700; letter-spacing:0; line-height:var(--lh-display);
  font-variant-numeric:tabular-nums lining-nums;
}
.display{ font-size:var(--t-display); max-width:var(--med-titular); text-wrap:balance }
.deck{ font-size:var(--t-deck); line-height:var(--lh-deck); max-width:var(--med-deck) }
.lede, .body-2{ max-width:var(--med-cuerpo); color:var(--pizarra) }

.text-link{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-weight:600; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px;
  background:none; border:0; padding:0; cursor:pointer;
  transition:text-decoration-color var(--rapido) var(--curva);
}
.text-link:hover{ text-decoration-thickness:2px }
.text-link .i{ font-size:var(--t-cuerpo) }

/* enlace corto de cierre: siempre lleva a #book */
.go{
  display:inline-flex; align-items:center; gap:var(--e-1); min-height:44px;
  font-weight:700; text-decoration:none; color:var(--tinta);
  border-bottom:2px solid var(--rojo-sol);
}
.go .i{ transition:translate var(--rapido) var(--curva) }
.go:hover .i{ translate:4px 0 }
.red .go{ color:var(--blanco); border-bottom-color:var(--blanco) }

/* ── botones ── */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-1);
  min-height:52px; padding:0 var(--e-3);
  border-radius:var(--radius-sm); border:1px solid transparent;
  font-family:var(--f-texto); font-size:var(--t-cuerpo); font-weight:var(--peso-control);
  line-height:1.15; text-align:center; text-decoration:none; cursor:pointer;
  transition:background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
             color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.btn:active{ transform:translateY(1px) }
.btn .i{ font-size:var(--t-cuerpo) }
.btn-sm{ min-height:44px; padding:0 var(--e-2) }
.btn-block{ width:100% }

.btn-primary{ background:var(--brand-btn); border-color:var(--brand-btn); color:var(--blanco) }
.btn-primary:hover{ background:var(--brand-btn-hover); border-color:var(--brand-btn-hover) }

.btn-dark{ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
.btn-dark:hover{ background:var(--carbon); border-color:var(--carbon) }

.btn-light{ background:var(--blanco); border-color:var(--blanco); color:var(--tinta) }
.btn-light:hover{ background:var(--niebla); border-color:var(--niebla) }

/* boton de linea: el secundario sobre blanco y sobre rojo (reemplaza al cristal).
   Al pasar el cursor se llena, nunca baja el contraste */
.btn-line{ background:transparent; border-color:var(--tinta); color:var(--tinta) }
.btn-line:hover{ background:var(--tinta); color:var(--blanco) }
.red .btn-line{ border-color:var(--blanco); color:var(--blanco) }
.red .btn-line:hover{ background:var(--blanco); color:var(--tinta) }

/* cristal: solo en el pie (Tinta) */
.btn-glass{
  background:var(--glass); border-color:var(--glass-line); color:var(--blanco);
  box-shadow:inset 0 1px 0 var(--glass-lift);
}
.btn-glass:hover{ background:var(--glass-hover); border-color:var(--glass-hover-line) }

/* receta 8: filo de luz que gira en el boton principal (uno por pantalla) */
@property --giro{ syntax:'<angle>'; inherits:false; initial-value:0deg }
.has-ring::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; z-index:-1;
  background:conic-gradient(from var(--giro), transparent 0deg, rgba(255,255,255,.66) 26deg, transparent 62deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:giro 4.5s linear 1;   /* una vuelta al llegar: menos de 5 s (WCAG 2.2.2) */
}
.has-ring:hover::before, .has-ring:focus-visible::before{ animation:giro-mano 4.5s linear infinite }
.bar .has-ring::before{ animation:none }
.bar.is-on .has-ring::before{ animation:giro 4.5s linear 1 }   /* una vuelta cada vez que aparece la barra */
@keyframes giro{ to{ --giro:360deg } }
@keyframes giro-mano{ to{ --giro:360deg } }

/* ── cabecera fija, clara: escalon de valor + linea de 1 px. El mismo sello de la mision y el pie ── */
.top{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.97); color:var(--tinta);
  border-bottom:1px solid var(--niebla);
}
@supports (backdrop-filter:blur(2px)){
  .top{ background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
}
.top-in{ display:flex; align-items:center; gap:var(--e-3); height:var(--header-h) }
.top-logo{ display:block; flex:none; margin-right:auto; border-radius:50% }
.top-logo img{ height:64px; width:auto }   /* el centro del mismo sello (sol, fuego y 家庭), recortado tal cual: a este tamano el sello completo no se lee */
.nav ul{ display:flex; gap:var(--e-1) }
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e-1);
  font-weight:600; text-decoration:none; color:var(--tinta);
  text-underline-offset:.3em; text-decoration-thickness:2px; text-decoration-color:var(--rojo-sol);
  border-radius:var(--radius-xs);
}
.nav a:hover{ text-decoration-line:underline }
.top-phone{
  display:inline-flex; align-items:center; gap:var(--e-1); min-height:44px;
  font-weight:600; text-decoration:none; color:var(--tinta); white-space:nowrap;
}
.top-phone .i{ font-size:var(--t-cuerpo); color:var(--rojo-sol) }
.top-phone:hover .top-phone-n{ text-decoration:underline; text-underline-offset:.22em }
.menu-btn{
  display:none;
  min-height:44px; min-width:44px; padding:0 var(--e-2);
  background:var(--blanco); border:1px solid var(--pizarra); border-radius:var(--radius-sm);
  font-weight:700; cursor:pointer;
}
.menu-btn:hover{ background:var(--papel) }

@media (max-width:1023.98px){
  .js .menu-btn{ display:inline-flex; align-items:center }
  .js .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--blanco); border-bottom:1px solid var(--niebla);
    box-shadow:0 18px 40px -12px rgba(11,14,20,.3);
    padding:var(--e-1) var(--gut) var(--e-3);
    display:none;
  }
  .js .nav.is-open{ display:block }
  .js .nav ul{ flex-direction:column; gap:0; max-width:var(--maxw); margin-inline:auto }
  .js .nav a{ width:100%; min-height:52px; font-size:var(--t-cuerpo); border-bottom:1px solid var(--niebla); border-radius:0 }
  /* sin JS no hay boton Menu: los cuatro enlaces van en una segunda fila que se parte */
  html:not(.js) .top{ position:relative }
  html:not(.js) .top-in{ flex-wrap:wrap; height:auto; min-height:var(--header-h); padding-block:var(--e-1) }
  html:not(.js) .nav{ order:9; flex:1 1 100% }
  html:not(.js) .nav ul{ flex-wrap:wrap; gap:0 var(--e-1) }
}
@media (max-width:767.98px){
  :root{ --header-h:72px }
  .top-logo img{ height:56px }   /* 56 x 56 en el telefono, 8 px de aire */
  .top-in{ gap:var(--e-1) }
  .top-book{ display:none }
  .top-phone{ justify-content:center; width:44px; border:1px solid var(--pizarra); border-radius:var(--radius-sm) }
  .top-phone-n{ display:none }
}

/* ── secciones: Papel por defecto, Blanco (.alt) y bandas en Rojo sol (.red) ── */
main{ position:relative; z-index:1; display:block }
.sec{ padding-block:var(--sec-pad); background:var(--papel) }
.sec.alt{ background:var(--blanco) }
.red{ background:var(--rojo-sol); color:var(--blanco); --brand-line:var(--linea-roja); --brand-soft:rgba(255,255,255,.14) }
.red .lede, .red .body-2{ color:var(--blanco) }
.sec-head{ display:grid; gap:var(--e-2); margin-bottom:var(--paso-cabecera); justify-items:start }
.sec-close{ margin-top:var(--e-4); display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-3) }

/* ── 1. heroe: blanco, y detras de la puerta el sol del sello ── */
.hero{ position:relative; isolation:isolate; overflow:clip; background:var(--blanco); color:var(--tinta) }
.hero-grid{
  display:grid; grid-template-columns:1.618fr 1fr; gap:var(--gap-bloque);
  align-items:center; padding-block:var(--e-4) var(--e-5);
}
.hero-copy{ container-type:inline-size; min-width:0 }
.hero h1{ display:grid; gap:var(--e-2); font-weight:400 }
.hero-title{ display:block; font-size:var(--t-hero) }
.hero-title .ln{ display:block }   /* el lema no se parte: una idea por linea */
.hero-lede{ margin-top:var(--e-3); max-width:var(--med-cuerpo); color:var(--pizarra) }
.hero-lede .hi{ color:var(--tinta) }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--e-1); margin-top:var(--e-3) }
.proof{
  display:inline-flex; align-items:center; gap:var(--e-1); min-height:44px; margin-top:var(--e-2);
  color:var(--pizarra); text-decoration:none; border-radius:var(--radius-xs);
}
.proof-t{ text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px }
.proof:hover .proof-t{ color:var(--tinta); text-decoration-thickness:2px }
.stars{ width:104px; height:17px; color:var(--naranja-fuego); flex:none }   /* sobre Blanco 3.11:1 (grafico) */

/* --dw es el ancho de la puerta: el sol se mide contra ella */
.hero-media{
  position:relative; isolation:isolate; display:grid; justify-items:end;
  --dw:min(100%, max(280px, calc((100vh - var(--header-h) - var(--e-6)) / 1.618)));
  --dw:min(100%, max(280px, calc((100svh - var(--header-h) - var(--e-6)) / 1.618)));
}

/* la puerta: marco alto en proporcion aurea, 1 de ancho por 1.618 de alto */
.door{
  position:relative; aspect-ratio:1 / 1.618; width:100%;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--niebla);
  box-shadow:var(--sombra);
}
.door-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero .door{ width:var(--dw) }

/* el sol del sello detras de la puerta: un disco plano de Rojo sol, 1.272 veces la puerta
   (medio escalon aureo). Asoma por los lados y por arriba; nunca toca el texto.
   Receta 13 (deriva lenta, solo mientras corre el video) + receta 1 (el puntero lo mueve al reves) */
.sun{
  position:absolute; z-index:-1; pointer-events:none;
  width:calc(var(--dw) * 1.272); aspect-ratio:1; border-radius:50%;
  /* margin-top y right en % se miden contra el ancho, como la puerta */
  top:0; margin-top:calc(var(--dw) * -.08); right:calc(var(--dw) * -.136);
  background:var(--rojo-sol);
  translate:var(--gx, 0) var(--gy, 0);
  transition:translate .5s var(--ease-out);
  animation:deriva 50s ease-in-out infinite;
  animation-play-state:paused;
}
.hero:has(.vid-toggle.is-playing) .sun{ animation-play-state:running }
@keyframes deriva{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(-1.5%,1%,0) scale(1.04) }
}

/* boton de pausa de los videos que se mueven solos */
.vid-toggle{
  position:absolute; right:var(--e-1); bottom:var(--e-1); z-index:3;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border-radius:50%; border:1px solid rgba(255,255,255,.2); background:var(--velo); color:var(--blanco);
  cursor:pointer; transition:background-color var(--rapido) var(--curva);
}
.vid-toggle:hover{ background:rgba(11,14,20,.8) }
/* el anillo blanco va sobre un halo Tinta: 19.32:1 sobre cualquier cuadro del video */
.vid-toggle:focus-visible{ outline-color:var(--blanco); box-shadow:0 0 0 6px var(--tinta) }
.vid-toggle .i{ font-size:var(--t-cuerpo) }
.vid-toggle .i-pause{ display:none }
.vid-toggle.is-playing .i-pause{ display:block }
.vid-toggle.is-playing .i-play{ display:none }

/* ── 2. cifras: banda roja ── */
.stats{ position:relative; z-index:1 }
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap-tarjetas);
  padding-block:var(--e-4);
}
.stat-n{ display:block; font-size:var(--t-display) }
.stat-l{
  display:block; margin-top:var(--e-1);
  font-size:var(--t-etiqueta); font-weight:700; line-height:1.3; letter-spacing:var(--tr-etiqueta);
  text-transform:uppercase; color:var(--blanco);
}

/* ── 3. reservar ── */
.book-grid{ display:grid; grid-template-columns:1.618fr 1fr; gap:var(--gap-bloque); align-items:start }
.form-card{
  position:relative; background:var(--blanco); border:1px solid var(--niebla);
  border-radius:var(--radius); padding:clamp(var(--e-2), 4vw, var(--e-4));
  box-shadow:0 30px 60px -28px rgba(11,14,20,.28);
}
.field{ display:grid; gap:var(--e-1); margin:0 0 var(--e-3); padding:0; border:0; min-width:0 }
.field > label, .field > legend{ font-weight:var(--peso-fuerte); color:var(--tinta); padding:0 }
.field > legend{ margin-bottom:var(--e-1) }
.opt{ font-weight:400; color:var(--pizarra) }
.input{
  width:100%; min-height:52px; padding:0 var(--e-2);
  font:inherit; color:var(--tinta); background:var(--blanco);
  border:1.5px solid var(--borde-campo); border-radius:var(--radius-sm);
  transition:border-color var(--rapido) var(--curva);
}
.input:hover{ border-color:var(--tinta) }
.input:focus-visible{ outline:2px solid var(--foco); outline-offset:2px }
.input[aria-invalid="true"]{ border-color:var(--error) }
.input-short{ max-width:116.5px }
.help, .form-note{ color:var(--pizarra) }
.err, .warn, .form-status{ display:flex; align-items:flex-start; gap:7px; font-weight:var(--peso-fuerte) }
.err{ color:var(--error) }
.warn{ color:var(--tinta) }
.err .i, .warn .i, .form-status .i{ font-size:var(--t-cuerpo); margin-top:.22em }
.form-status{ color:var(--tinta) }
/* vacia sigue en el arbol de accesibilidad (aria-live), solo no ocupa lugar */
.form-status:empty{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.form-status.is-err{ color:var(--error) }

.choices{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--e-1) }
.choice{
  position:relative; display:grid; align-content:center; gap:4px;
  min-height:72px; padding:var(--e-1) var(--e-4) var(--e-1) var(--e-2);
  background:var(--blanco); color:var(--tinta);
  border:1.5px solid var(--borde-campo); border-radius:var(--radius-sm); cursor:pointer;
  transition:background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.choice:hover{ border-color:var(--tinta) }
.choice input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.choice-t{ font-weight:var(--peso-fuerte) }
.choice-s{ font-size:var(--t-etiqueta); font-weight:700; letter-spacing:var(--tr-etiqueta); text-transform:uppercase; line-height:1.3; color:var(--pizarra) }
.choice-dot{
  position:absolute; right:var(--e-2); top:50%; translate:0 -50%;
  width:var(--e-2); height:var(--e-2); border-radius:50%;
  border:1.5px solid var(--borde-campo); background:var(--blanco);
}
.choice.is-checked{ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
.choice.is-checked .choice-s{ color:var(--niebla) }
.choice.is-checked .choice-dot{ border-color:var(--blanco); background:var(--rojo-sol); box-shadow:inset 0 0 0 2.5px var(--tinta) }
.choice.is-focus{ outline:2px solid var(--foco); outline-offset:2px }
.choice:has(input:focus-visible){ outline:2px solid var(--foco); outline-offset:2px }
fieldset[aria-invalid="true"] .choice{ border-color:var(--error) }
fieldset[aria-invalid="true"] .choice.is-checked{ border-color:var(--tinta) }

.submit-row{ display:grid; gap:var(--e-1); margin-top:var(--e-4) }
.submit-row .btn{ min-height:56px }
.btn[aria-disabled="true"]{ cursor:progress }

.fallback{ display:grid; gap:var(--e-1); justify-items:start }
.fb-title{ font-size:var(--t-deck); outline-offset:4px }
.fb-text{ color:var(--pizarra); max-width:var(--med-cuerpo) }
.fb-label{ margin-top:var(--e-2); color:var(--pizarra) }
/* el numero va en Archivo: un telefono tiene que leerse cifra por cifra */
.fb-phone{
  font-size:var(--t-deck); font-weight:700; line-height:1.15;
  color:var(--tinta); text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.fb-phone:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.15em }
.fb-msg{ min-height:auto; height:auto; padding:var(--e-1) var(--e-2); resize:none; background:var(--papel); line-height:var(--lh-texto) }
.fb-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-3); margin-top:var(--e-1) }
.fb-edit{ margin-top:var(--e-1) }

.call-line{ margin-top:var(--e-3); color:var(--pizarra) }
.call-line a, .faq-more a{ color:var(--tinta); font-weight:600; text-underline-offset:.22em }

/* sin JS el formulario no puede armar el texto: se esconde y queda "Text us" (nada viaja en la URL) */
html:not(.js) #book-form{ display:none }
.nojs-book{ display:grid; gap:var(--e-1); justify-items:start }
.nojs-book-t{ max-width:var(--med-cuerpo) }
.nojs-book-links{ display:flex; flex-wrap:wrap; gap:0 var(--e-3) }

.book-side{ display:grid; gap:var(--e-4) }
.msg{ background:var(--tinta) }
.msg-cover{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  gap:var(--e-2); padding:var(--e-3);
  color:var(--blanco);
  background:linear-gradient(to bottom, rgba(11,14,20,0) 45%, var(--velo) 68%, var(--velo) 100%);
}
.msg-kicker{ color:var(--blanco) }
.msg-title{ display:block; font-size:var(--t-deck) }
/* sin JS: la portada es un enlace al video (el reproductor del navegador) y el <video> no se ve ni recibe foco */
a.msg-cover{ text-decoration:none }
html:not(.js) #msg-video{ visibility:hidden }
.expect{ display:grid; gap:var(--e-2) }
.expect .label{ color:var(--pizarra) }
.ticks{ display:grid; gap:var(--e-1) }
.ticks li{ display:grid; grid-template-columns:auto 1fr; gap:var(--e-1); align-items:start }
.ticks .i{ font-size:var(--t-cuerpo); margin-top:.22em; color:var(--rojo-sol); stroke-width:2.5 }

/* ── 4. mision: banda roja con el sello ── */
.mission-grid{ display:grid; grid-template-columns:1fr 1.618fr; gap:var(--gap-bloque); align-items:center }
.seal{ display:grid; gap:var(--e-4); justify-items:center }   /* espacio de respeto: X = 8.3 % del sello, 33.2 px a 400 */
.seal img{ width:min(100%, 400px); min-width:min(100%, 340px) }
.seal figcaption{ color:var(--blanco); max-width:34ch; text-align:center }
.mission-copy{ display:grid; gap:var(--e-3); justify-items:start }

/* ── 5. programas ── */
.plans{ display:grid; gap:var(--gap-tarjetas) }
.plan{
  display:grid; align-items:center;
  grid-template-columns:272px 1.618fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"media head buy" "media list buy";
  gap:var(--e-2) var(--e-4);
  padding:var(--e-3); background:var(--papel);
  border:1px solid var(--niebla); border-radius:var(--radius);
}
.plan-media{ grid-area:media; width:272px; box-shadow:none; border-radius:var(--radius-sm) }
.plan-head{ grid-area:head; align-self:end; display:grid; gap:var(--e-1) }
.plan-list{ grid-area:list; align-self:start }
.plan-buy{
  grid-area:buy; align-self:stretch; display:grid; align-content:center; justify-items:start; gap:var(--e-3);
  padding-left:var(--e-4); border-left:1px solid var(--niebla);
}
.plan-tag{ color:var(--pizarra) }
.plan-name{ font-size:var(--t-display) }
.plan-when{ font-weight:var(--peso-fuerte) }
.price{ display:flex; align-items:baseline; gap:var(--e-1) }
.price-n{ font-size:var(--t-display); line-height:1 }
.price-l{ color:var(--pizarra) }
.plans-note{ margin-top:var(--e-4); max-width:var(--med-cuerpo); color:var(--pizarra) }

/* ── 6. coaches ── */
.coach-list{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-5) var(--gap-bloque) }
.coach{
  display:grid; grid-template-columns:1fr 1.618fr; gap:var(--e-2) var(--e-3);
  grid-template-areas:"photo head" "photo bio"; grid-template-rows:auto 1fr; align-items:start;
}
.coach-photo{ grid-area:photo; position:relative; aspect-ratio:1 / 1.618; border-radius:var(--radius); overflow:hidden; background:var(--niebla) }
.coach-photo img{ width:100%; height:100%; object-fit:cover }
.coach-head{ grid-area:head; display:grid; gap:var(--e-1) }
.coach-name{ font-size:var(--t-deck) }
.coach-role{ color:var(--pizarra) }
.coach-meta{ color:var(--pizarra) }
/* la bio es un <details>: en bloque con margenes (no todos los navegadores aceptan grid en <details>) */
.coach-bio{ grid-area:bio; display:block }
.coach-intl-h{ margin-top:var(--e-3); color:var(--pizarra) }
.coach-intl{ display:grid; gap:7px; margin-top:var(--e-2) }
.coach-intl li{ position:relative; padding-left:var(--e-3) }
.coach-intl li::before{ content:""; position:absolute; left:0; top:.75em; width:var(--e-2); height:2px; background:var(--rojo-sol) }
/* coaches es banda roja: todo el texto en Blanco (4.98:1 sobre Rojo sol, 6.05:1 sobre Rojo hondo) */
.red .coach-role, .red .coach-meta, .red .coach-intl-h{ color:var(--blanco) }
.red .coach-intl li::before{ background:var(--blanco) }
.red .coach-photo{ background:var(--rojo-hondo) }

/* ── 7. the falcon way: cuatro puertas, una foto real por pilar ── */
.pillars{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--e-4) var(--e-3) }
.pillars li{ display:grid; gap:7px; align-content:start }
.pillar-photo{
  aspect-ratio:1 / 1.618; margin-bottom:var(--e-1);
  border-radius:var(--radius); overflow:hidden; background:var(--niebla);
}
.pillar-photo picture, .pillar-photo img{ display:block; width:100%; height:100% }
.pillar-photo img{ object-fit:cover }
.pillars h3{ font-size:var(--t-cuerpo); font-weight:var(--peso-fuerte) }
.pillars p{ color:var(--pizarra) }

/* ── 8. logros (banda roja) y 9. comunidad ── */
.split{ display:grid; grid-template-columns:1fr 1.618fr; gap:var(--gap-bloque); align-items:center }
.split-rev{ grid-template-columns:1.618fr 1fr }
.split-podium .podium-copy{ grid-column:2; grid-row:1 }
.split-podium .podium-photo{ grid-column:1; grid-row:1 }
.photo{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--niebla) }
.red .photo{ background:var(--rojo-hondo) }
.photo img{ width:100% }
.results{ display:grid }
.results > div{ display:grid; gap:7px; padding-block:var(--e-3); border-top:1px solid var(--linea-roja) }
.results > div:last-child{ border-bottom:1px solid var(--linea-roja) }
.results dt{ font-size:var(--t-display) }
.results dd{ color:var(--blanco); max-width:var(--med-cuerpo) }
.results-close{ margin:var(--e-3) 0 var(--e-2) }
.blocks{ display:grid; gap:var(--e-3); margin-bottom:var(--e-3) }
.block{ display:grid; gap:7px; align-content:start; padding-left:var(--e-3); border-left:2px solid var(--rojo-sol) }
.block h3{ font-size:var(--t-cuerpo); font-weight:var(--peso-fuerte) }
.block p{ color:var(--pizarra); max-width:var(--med-cuerpo) }
.community-door{ max-width:440px; justify-self:end }

/* ── 10. galeria ── */
.masonry-wrap{ container-type:inline-size }
.masonry{
  --cols:4; --g:var(--e-2);
  display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:var(--g);
  grid-auto-rows:calc((100cqi - (var(--cols) - 1) * var(--g)) / var(--cols) * .75);
  grid-auto-flow:row dense;
}
.masonry li{ border-radius:var(--radius); overflow:hidden; background:var(--niebla) }
.masonry picture, .masonry img{ display:block; width:100%; height:100% }
.masonry img{ object-fit:cover }
.masonry .g-p{ grid-row:span 2 }
.masonry .g-big{ grid-column:span 2; grid-row:span 2 }
.follow{
  display:grid; grid-template-columns:1.618fr 1fr; gap:var(--e-3) var(--gap-bloque); align-items:center;
  margin-top:var(--e-5); padding-top:var(--e-4); border-top:2px solid var(--tinta);
}
.follow-copy{ display:grid; gap:var(--e-1) }
.follow-h{ font-size:var(--t-deck) }
.follow-copy p{ color:var(--pizarra); max-width:var(--med-cuerpo) }
.follow-links{ display:grid; gap:var(--e-1); justify-items:start }

/* ── 11. preguntas ── */
.faq-grid{ display:grid; grid-template-columns:1fr 1.618fr; gap:var(--gap-bloque); align-items:start }
.faq-head{ position:sticky; top:calc(var(--header-h) + var(--e-4)) }
.faq-list{ display:grid; justify-items:start }
.faq-list details{ width:100%; border-bottom:1px solid var(--niebla) }
.faq-list details:first-child{ border-top:1px solid var(--niebla) }
.faq-list summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-2);
  min-height:61px; padding:var(--e-2) 0; cursor:pointer; list-style:none;
  font-weight:var(--peso-fuerte); border-radius:var(--radius-xs);
}
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list summary:hover{ text-decoration:underline; text-underline-offset:.22em }
.pm{
  font-size:var(--e-3); padding:5px; border-radius:50%;
  border:1.5px solid var(--borde-campo); stroke-width:2.2;
}
/* el palo vertical gira hasta acostarse: el mas se vuelve menos */
.pm .pm-v{ transform-box:fill-box; transform-origin:center; transition:transform var(--lento) var(--curva) }
details[open] .pm .pm-v{ transform:rotate(90deg) }
details[open] .pm{ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
.ans{ padding:0 var(--e-4) var(--e-3) 0; color:var(--pizarra); max-width:var(--med-cuerpo) }
.faq-more{ margin:var(--e-3) 0 var(--e-1); color:var(--pizarra) }

/* ── 12. resenas: banda roja, tarjetas blancas ── */
.review-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap-tarjetas); align-items:stretch }
.review{
  position:relative; padding:var(--e-3); background:var(--blanco); color:var(--tinta);
  border-radius:var(--radius); box-shadow:0 18px 40px -22px rgba(11,14,20,.45);
}
.review figure{ display:grid; gap:var(--e-2); height:100%; grid-template-rows:auto 1fr auto }
.review figcaption{ display:grid; gap:4px; padding-top:var(--e-2); border-top:1px solid var(--niebla) }
.r-name{ font-weight:var(--peso-fuerte) }
.r-src{ color:var(--pizarra) }
.reviews-close{ margin-top:var(--e-4) }
.reviews-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-3) }

/* ── 13. visita ── */
.visit-grid{ display:grid; grid-template-columns:1.618fr 1fr; gap:var(--gap-bloque); align-items:start }
.visit-photo{ margin-top:calc(var(--t-display) * var(--lh-display) + var(--e-2) + 17px + var(--paso-cabecera)) }
.rows > div{
  display:grid; grid-template-columns:1fr 1.618fr; gap:var(--e-1) var(--e-3);
  padding-block:var(--e-2); border-top:1px solid var(--niebla); align-items:baseline;
}
.rows dt{ color:var(--pizarra) }
.sched dd{ font-weight:var(--peso-fuerte) }
.facts > div:last-child{ border-bottom:1px solid var(--niebla) }
.facts .text-link{ margin-top:4px }
.dd-links{ display:flex; flex-wrap:wrap; gap:0 var(--e-3) }
.visit-copy > .btn{ margin-top:var(--e-4) }

/* ── 14. pie: Tinta, el sello completo es el nombre ── */
.foot{ position:relative; z-index:1; background:var(--tinta); color:var(--blanco); padding-block:var(--e-5) var(--e-4) }
.foot-grid{ display:grid; grid-template-columns:auto 1fr; gap:var(--gap-bloque); align-items:center }
.foot-seal{ width:340px; height:auto }
.foot-info{ display:grid; gap:var(--e-2); justify-items:start }
.foot-info address, .foot-hours{ color:var(--niebla); max-width:var(--med-cuerpo) }
.foot-info address a{ display:inline-flex; align-items:center; min-height:44px; color:var(--blanco); font-weight:600; text-decoration:underline; text-underline-offset:.22em }
.foot-links{ display:flex; flex-wrap:wrap; gap:0 var(--e-3) }
.foot-links a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; font-weight:600; text-underline-offset:.22em; color:var(--blanco) }
.foot-links .i{ font-size:var(--t-cuerpo) }
.foot-copy{ color:var(--niebla); margin-top:var(--e-2) }

/* ── barra fija del telefono: blanca, escalon de valor + linea de 1 px ── */
.bar{ display:none }
@media (max-width:767.98px){
  /* lo que recibe el foco no queda detras de la barra (74 px + 10.5 de aire); WCAG 2.4.11 */
  html{ scroll-padding-bottom:calc(84.5px + env(safe-area-inset-bottom)) }
  .bar{
    position:fixed; z-index:50; left:0; right:0; bottom:0;
    display:grid; grid-template-columns:1.618fr 1fr; gap:var(--e-1);
    padding:var(--e-1) var(--gut) calc(var(--e-1) + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); border-top:1px solid var(--niebla);
    box-shadow:0 -12px 30px -18px rgba(11,14,20,.35);
  }
  .bar .btn{ min-height:52px; padding:0 var(--e-1) }
  .js .bar{
    transform:translateY(105%); visibility:hidden;
    transition:transform var(--lento) var(--curva), visibility 0s linear var(--lento);
  }
  .js .bar.is-on{ transform:none; visibility:visible; transition:transform var(--lento) var(--curva), visibility 0s }
  html:not(.js) .foot{ padding-bottom:calc(var(--e-5) + 72px + env(safe-area-inset-bottom)) }
}

/* ── efectos con puntero fino (receta 6 y 7, solo en fotos de coaches). Desde 900 px:
   debajo la lista es una fila con scroll y el 3D se escaparia de su recorte ── */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  /* la perspectiva va en el transform de cada foto, no en la lista: un contexto 3D en la lista
     dejaba fotos sin pintar dentro de la banda roja (medido en Chrome sin GPU, a 1440 y 2000) */
  .tilt{
    transition:transform var(--lento) var(--curva), scale var(--lento) var(--curva), box-shadow var(--lento) var(--curva);
  }
  .tilt::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 70%);
    opacity:0; transition:opacity var(--lento) var(--curva);
  }
  .tilt.is-lit{
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); scale:1.035; z-index:2;
    box-shadow:0 18px 40px rgba(11,14,20,.3), 0 0 0 1px var(--brand-line), 0 0 0 6px var(--brand-soft);
    transition:transform var(--rapido) var(--curva), scale var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
  }
  .tilt.is-lit::after{ opacity:1 }
}

/* ── receta 3, rehecha para el rojo: la luz del sol que sigue el scroll vive dentro de
   cada banda roja (una capa dentro de la banda). El punto mas claro es Rojo
   sol puro y el borde Rojo hondo: el blanco encima nunca baja de 4.98:1 (en el borde
   sube a 6.05:1). Sin JS o con movimiento reducido no existe: Rojo sol plano. ── */
/* Cierre v3: la capa ya no es fija recortada por clip-path sino absoluta dentro de la banda. Una capa
   fija dentro de un recorte dejaba fotos sin pintar en la banda roja de coaches (medido en Chrome sin
   GPU a 1440 y 2000). El script sigue moviendo el centro con el scroll, ahora medido sobre la banda */
.luz .red{ position:relative; isolation:isolate; background:var(--rojo-hondo) }
.luz .red::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(48vmax 42vmax at var(--lx, 30%) var(--ly, 50%),
    var(--rojo-sol) 0%, var(--rojo-sol) 34%, var(--rojo-hondo) 78%);
}


/* ── figuras de tinta en los fondos (siluetas reales del club pintadas estilo sumi-e) ──
   Las pone site.js con un azar fijo por seccion (no saltan al recargar). Tres capas:
   lejos (chica, desenfocada), medio (nitida) y cerca (grande, muy desenfocada, cortada
   por el borde). Siempre detras del contenido, tenues, sin foco ni clics. Sin JS no estan. */
.sec, .stats{ position:relative; isolation:isolate }
.tinta{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.tinta img{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:auto; max-width:none;
  transform:translate(-50%, calc(-50% + var(--py, 0px))) rotate(var(--r)) scaleX(var(--f));
  opacity:var(--o); will-change:transform; user-select:none;
}

/* ── escritura de pincel (h1 y h2 en Shojumaru): ver site.js ──
   Cada letra lleva una mascara con borde suave que corre de izquierda a derecha.
   El heroe se esconde desde la primera pintura para que no parpadee; si el
   script no llega, a los 4 s se ve igual (red de seguridad). */
.pincel-txt{ display:inline }
.pincel .w{ display:inline-block; white-space:nowrap }
.pincel .ch{ display:inline-block }
.js .pincel .ch{
  -webkit-mask-image:linear-gradient(100deg, #000 40%, rgba(0,0,0,.4) 49%, transparent 58%);
          mask-image:linear-gradient(100deg, #000 40%, rgba(0,0,0,.4) 49%, transparent 58%);
  -webkit-mask-size:260% 100%; mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
}
.js .pincel.escrito .ch{
  animation:pincel 640ms var(--ease-out) both;
  animation-delay:calc(var(--i) * var(--paso, 40ms));
}
@keyframes pincel{
  0%  { -webkit-mask-position:100% 0; mask-position:100% 0; filter:blur(1.5px) }
  70% { filter:none }
  100%{ -webkit-mask-position:0 0;    mask-position:0 0;    filter:none }
}
.js:not(.pincel-listo) .hero-title{ opacity:0; animation:a-la-vista-pincel 1ms linear 4s forwards }
@keyframes a-la-vista-pincel{ to{ opacity:1 } }

/* ── plegables (details.fold): en escritorio siempre abiertos y sin boton ── */
.fold > summary{ display:none }
.fold > summary::-webkit-details-marker{ display:none }
.rail-dots{ display:none }

/* ── responsive ── */
@media (max-width:1099.98px){
  .plan{
    grid-template-columns:272px 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"media head" "media list" "media buy";
  }
  .plan-buy{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-2) var(--e-3); padding:var(--e-2) 0 0; border-left:0; border-top:1px solid var(--niebla); width:100% }
  .plan-buy .btn{ white-space:nowrap }
  .review-list{ grid-template-columns:1fr; max-width:720px }
}
@media (max-width:899.98px){
  .hero-grid{ grid-template-columns:1fr; padding-block:var(--e-3) var(--e-4) }
  /* en una columna la puerta va al centro y el sol, del ancho del texto, detras */
  .hero-media{ justify-items:center; margin-top:var(--e-4); --dw:min(78.6%, 346px) }
  .sun{ right:auto; left:calc(50% - var(--dw) * .636) }
  .book-grid, .mission-grid, .split, .split-rev, .faq-grid, .visit-grid, .follow{ grid-template-columns:1fr }
  .faq-head{ position:static }
  .split-podium .podium-copy, .split-podium .podium-photo{ grid-column:auto; grid-row:auto }
  .visit-photo{ margin-top:0; max-width:560px }
  .podium-photo{ max-width:440px }
  .community-door{ justify-self:start; width:100% }
  .coach-list{ grid-template-columns:1fr; max-width:720px }
  .book-side{ max-width:560px }
  .mission .seal{ order:2 }
}

/* ── TELEFONO Y TABLET CHICA (hasta 899.98 px, donde la pagina ya va en una columna):
   secciones cortas con filas que se deslizan (.rail), plegables (.fold) y recortes (.m-cut).
   En escritorio nada de esto existe ── */
@media (max-width:899.98px){
  :root{ --sec-pad:var(--e-4) }   /* un escalon aureo menos de aire: 72 a 44.5 */
  .m-cut, .d-only{ display:none !important }
  .sec-head{ gap:var(--e-1); margin-bottom:var(--e-2) }
  .sec-close{ margin-top:var(--e-3) }

  /* filas que se deslizan: la siguiente tarjeta asoma, sin secuestrar el scroll vertical */
  .rail{
    position:relative;   /* contiene a los .sr (absolutos) de adentro: si no, se salen del recorte y ensanchan la pagina */
    display:grid; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:none;
    grid-auto-columns:var(--rail-w, 78%); gap:var(--e-2); align-items:start;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1); padding:var(--e-1) var(--gut);
    scrollbar-width:none; max-width:none;
  }
  .rail::-webkit-scrollbar{ display:none }
  .rail > *{ scroll-snap-align:start; min-width:0 }
  /* una fila dentro de una columna de grid no puede ensanchar la columna */
  .rail, .split > *, .book-grid > *, .mission-grid > *, .faq-grid > *, .visit-grid > *{ min-width:0 }
  .rail:focus-visible{ outline-offset:-3px }
  /* indicador de posicion (lo arma site.js, y lo esconde si la fila cabe entera): puntos, el actual
     es una pastilla. Puntos Pizarra (6.84:1 sobre Blanco); el actual se distingue por forma y color */
  .rail-dots{ display:flex; gap:var(--e-1); align-items:center; height:var(--e-2); margin-top:var(--e-1); color:var(--pizarra) }
  .rail-dots span{ width:6.5px; height:6.5px; border-radius:var(--radius-xs); background:currentColor; transition:width var(--lento) var(--curva) }
  .rail-dots span.is-on{ width:var(--e-3); background:var(--rojo-sol) }
  .red .rail-dots{ color:var(--blanco) }
  .red .rail-dots span.is-on{ background:var(--blanco) }

  /* plegables: boton de 44 px o mas, chevron que gira */
  .fold > summary{
    display:flex; align-items:center; justify-content:space-between; gap:var(--e-1);
    min-height:44px; cursor:pointer; list-style:none; font-weight:var(--peso-fuerte);
    border-radius:var(--radius-xs);
  }
  .fold .chev{ font-size:var(--t-cuerpo); color:var(--rojo-sol); stroke-width:2.5; transition:rotate var(--lento) var(--curva) }
  .fold[open] > summary .chev{ rotate:180deg }
  .red .fold .chev{ color:var(--blanco) }
  .fold-row{ border-block:1px solid var(--niebla) }
  .fold-row > summary{ min-height:52px }
  .fold-row[open] > summary{ margin-bottom:var(--e-1) }
  .fold-row[open]{ padding-bottom:var(--e-2) }
  .fold-more > summary{ display:inline-flex; justify-content:flex-start; text-decoration:underline; text-underline-offset:.22em }
  .fold-more[open] > summary{ margin-bottom:var(--e-1) }
  .fold .less, .fold[open] .more{ display:none }
  .fold[open] .less{ display:inline }

  /* cifras */
  .stats-grid{ --rail-w:41%; padding-block:var(--e-2) 0 }
  .stats .rail-dots{ margin:0 0 var(--e-2) }

  /* reservar: el mensaje de los senseis es una tarjeta corta con la puerta chica; al darle play se abre entera */
  .book-grid{ gap:var(--e-3) }
  .book-side{ gap:var(--e-2) }
  .msg:not(.is-open){
    /* 109 x 177: la puerta chica sigue en 1 por 1.618. minmax(0,1fr): a 320 px el texto
       se parte en vez de salirse del marco (WCAG 1.4.10) */
    display:grid; grid-template-columns:109px minmax(0, 1fr); align-items:center;
    aspect-ratio:auto; background:var(--blanco); border:1px solid var(--niebla); box-shadow:none;
    border-radius:var(--radius);
  }
  .msg:not(.is-open) .door-media{ position:relative; grid-area:1 / 1; aspect-ratio:1 / 1.618; height:auto; border-radius:var(--radius) 0 0 var(--radius) }
  .msg:not(.is-open) .msg-cover{
    position:relative; inset:auto; grid-area:1 / 2; min-width:0; background:none; color:var(--tinta);
    justify-content:center; gap:var(--e-1); padding:var(--e-2);
  }
  .msg:not(.is-open) .msg-kicker{ color:var(--pizarra) }
  .msg:not(.is-open) .msg-title{ font-size:var(--t-cuerpo); line-height:1.3 }
  .msg:not(.is-open) .btn-light{ min-height:44px; max-width:100%; padding:0 var(--e-2); white-space:normal; background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
  .msg:not(.is-open) .btn-light:hover{ background:var(--carbon) }
  .msg.is-open{ width:100% }
  .expect{ gap:0 }

  /* mision */
  .mission-grid{ gap:var(--e-4) }
  .mission-copy{ gap:var(--e-2) }
  .seal{ gap:var(--e-3) }

  /* coaches: fila que se desliza, foto apaisada en proporcion aurea */
  .coach-list{ --rail-w:78%; gap:var(--e-3); max-width:none }
  .coach{ grid-template-columns:1fr; grid-template-areas:"photo" "head" "bio"; grid-template-rows:auto; gap:var(--e-2) }
  .coach-photo{ aspect-ratio:1.618 / 1 }
  .coach-photo img{ object-position:50% 22% }

  /* the falcon way */
  .pillars{ --rail-w:61.8%; gap:var(--e-2) }

  /* logros: los tres resultados se deslizan; la foto, apaisada */
  .results{ --rail-w:72% }
  .results > div, .results > div:last-child{ align-self:stretch; padding:var(--e-2); border:1px solid var(--linea-roja); border-radius:var(--radius) }
  .podium-photo{ max-width:560px; aspect-ratio:1.618 / 1 }
  .podium-photo img{ height:100%; object-fit:cover; object-position:50% 22% }
  .split-podium{ gap:var(--e-3) }

  /* comunidad: titulo y puerta lado a lado, las tres historias se deslizan */
  .community .split-rev{
    grid-template-columns:1.618fr 1fr; align-items:center; gap:var(--e-2);
    grid-template-areas:"head door" "blocks blocks" "dots dots";
  }
  .community .split-rev > div{ display:contents }
  .community .sec-head{ grid-area:head; margin:0 }
  /* la fila llega a los bordes como las demas (el margen negativo de .rail) */
  .community .blocks{ grid-area:blocks; margin:0 calc(var(--gut) * -1) }
  .community .rail-dots{ grid-area:dots; margin:0 }
  .community-door{ grid-area:door; width:100%; border-radius:var(--radius) }
  .blocks{ --rail-w:78% }
  .block{ align-self:stretch; padding:var(--e-2); border-left:0; border-top:2px solid var(--rojo-sol); background:var(--blanco); border-radius:0 0 var(--radius) var(--radius) }

  /* galeria: una fila de fotos a la misma altura */
  .masonry-wrap{ container-type:normal }
  .masonry{ --g:var(--e-1); grid-auto-columns:auto; grid-auto-rows:280px; gap:var(--e-1) }
  .masonry li, .masonry .g-p, .masonry .g-big{ grid-row:auto; grid-column:auto; width:300px; height:280px }
  .masonry .g-p{ width:210px }
  .masonry .g-big{ width:min(331px, 85vw) }
  .follow{ margin-top:var(--e-4); padding-top:var(--e-3); gap:var(--e-2) }

  /* preguntas */
  .faq-list summary{ min-height:52px; padding:var(--e-1) 0 }

  /* resenas */
  .review-list{ --rail-w:85%; max-width:none }
  .review{ align-self:stretch; padding:var(--e-2) }
  .reviews-close{ margin-top:var(--e-3) }
}

/* tablet chica: las filas muestran mas de una tarjeta y la siguiente sigue asomando */
@media (min-width:600px) and (max-width:899.98px){
  .stats-grid, .pillars{ --rail-w:calc(25% - 13px) }   /* caben las cuatro: sin puntos ni parada de Tab */
  .coach-list, .results, .blocks, .review-list{ --rail-w:44% }
}

/* ── solo TELEFONO (hasta 767.98 px) ── */
@media (max-width:767.98px){
  /* heroe */
  .hero-grid{ gap:0 }
  .hero-ctas .btn{ flex:1 1 100% }
  .hero-ctas .hero-see{   /* el segundo camino es un enlace: sube la puerta sin tocar el rojo */
    flex:0 0 auto; min-height:44px; padding:0; justify-content:flex-start;
    background:none; border:0;
    font-weight:var(--peso-fuerte); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px;
  }
  .hero-ctas .hero-see:hover{ background:none; color:var(--tinta); text-decoration-thickness:2px }
  .proof{ margin-top:0 }
  .proof .stars{ width:86px; height:14px }

  /* reservar */
  .field{ margin-bottom:var(--e-2) }
  .choices{ grid-template-columns:1fr }
  .choice{ min-height:52px }
  /* la edad es corta: etiqueta y campo en la misma fila; avisos debajo */
  .field-inline{ grid-template-columns:1fr auto; align-items:center; column-gap:var(--e-2) }
  .field-inline > .err, .field-inline > .warn{ grid-column:1 / -1 }
  .submit-row{ margin-top:var(--e-3) }
  .call-line{ margin-top:var(--e-2) }

  /* programas: las dos tarjetas siguen a la vista; horario, precio e inscripcion, sin abrir nada */
  .plan{
    grid-template-columns:1fr 1.618fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"head head" "media buy" "list list";
    padding:var(--e-2); gap:var(--e-2);
  }
  .plan-media{ width:100% }
  .plan-head{ align-self:start }
  .plan-buy{ display:grid; align-self:center; justify-content:stretch; justify-items:start; gap:var(--e-2); padding:0; border:0 }
  .plan-buy .btn{ width:100%; padding:0 var(--e-1) }
  .plan-list .ticks{ padding-top:0 }
  .plan-list{ border-bottom:0 }
  .plans-note{ margin-top:var(--e-3) }

  /* logros: la foto ocupa el ancho */
  .podium-photo{ max-width:none }

  /* visita */
  .rows > div{ grid-template-columns:1fr; gap:4px; padding-block:var(--e-1) }
  .visit-copy > .btn{ width:100%; margin-top:var(--e-3) }

  /* pie */
  .foot{ padding-block:var(--e-4) }
  .foot-grid{ grid-template-columns:1fr; justify-items:start; gap:var(--e-3) }
  .foot-seal{ width:min(100%, 340px) }
}

/* ── v4 COMPACTO (2026-10-02, pedido de Michel): cada seccion cabe en una pantalla.
   Menos aire, tarjetas mas chicas, programas lado a lado (fila que se desliza en el
   telefono), coaches en 4 columnas con la bio plegable, galeria en tira horizontal
   con flechas y preguntas con 5 a la vista y un boton para el resto ── */

/* en todos los anchos */
.field-inline{ grid-template-columns:auto auto; justify-content:start; align-items:center; column-gap:var(--e-2) }
.field-inline > .err, .field-inline > .warn{ grid-column:1 / -1 }
.faq-extra{ width:100% }
.faq-toggle{ margin-top:var(--e-1) }
.faq-toggle .chev{ font-size:var(--t-cuerpo); color:var(--rojo-sol); stroke-width:2.5; transition:rotate var(--lento) var(--curva) }
.faq-toggle.is-open .chev{ rotate:180deg }
.faq-toggle .less, .faq-toggle.is-open .more{ display:none }
.faq-toggle.is-open .less{ display:inline }
.faq-list summary{ min-height:52px; padding:var(--e-1) 0 }
.strip-nav[hidden]{ display:none }

@media (min-width:900px){
  :root{ --sec-pad:clamp(44.5px, 4vw, 61px); --paso-cabecera:var(--e-3) }
  .sec-head{ gap:var(--e-1) }
  .sec-close{ margin-top:var(--e-3) }

  /* reservar: nombre y telefono lado a lado, la puerta del mensaje cuadrada */
  .field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e-2) }
  .field{ margin-bottom:var(--e-2) }
  .form-card{ padding:var(--e-3) }
  .choice{ min-height:61px }
  .submit-row{ margin-top:var(--e-2); gap:4px }
  .call-line{ margin-top:var(--e-2) }
  .book .msg{ aspect-ratio:1 / 1 }
  .book .msg .door-media{ object-position:50% 30% }
  .book-side{ gap:var(--e-3) }
  .expect{ gap:var(--e-1) }

  /* programas: las dos clases lado a lado, tarjeta chica */
  .plans{ grid-template-columns:1fr 1fr }
  .plan{
    grid-template-columns:132px 1fr; grid-template-rows:auto 1fr auto;
    grid-template-areas:"media head" "media list" "media buy";
    gap:var(--e-2) var(--e-3); padding:var(--e-2); align-items:start;
  }
  .plan-media{ width:132px }
  .plan-head{ align-self:start; gap:4px }
  .plan-name{ font-size:var(--t-deck) }
  .plan-list .ticks{ gap:7px }
  .plan-buy{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-1) var(--e-2);
    padding:var(--e-2) 0 0; border-left:0; border-top:1px solid var(--niebla); width:100%;
  }
  .plan-buy .btn{ white-space:nowrap; min-height:48px }
  .price-n{ font-size:var(--t-deck) }
  .plans-note{ margin-top:var(--e-2); max-width:none }

  /* coaches: los cuatro en una fila, foto cuadrada, la bio se abre con "Read more" */
  .coach-list{ grid-template-columns:repeat(4, 1fr); gap:var(--e-3) }
  .coach{ grid-template-columns:1fr; grid-template-areas:"photo" "head" "bio"; grid-template-rows:auto; gap:var(--e-2) }
  .coach-photo{ aspect-ratio:1 / 1 }
  .coach-photo img{ object-position:50% 22% }
  .coach-name{ font-size:1.375rem }
  .coach-head{ gap:7px }
  .fold-all > summary{
    display:inline-flex; align-items:center; gap:var(--e-1); min-height:44px; cursor:pointer; list-style:none;
    font-weight:var(--peso-fuerte); text-decoration:underline; text-underline-offset:.22em; border-radius:var(--radius-xs);
  }
  .fold-all .chev{ font-size:var(--t-cuerpo); stroke-width:2.5; transition:rotate var(--lento) var(--curva) }
  .fold-all[open] > summary{ margin-bottom:var(--e-1) }
  .fold-all[open] > summary .chev{ rotate:180deg }
  .fold-all .less, .fold-all[open] .more{ display:none }
  .fold-all[open] .less{ display:inline }

  /* the falcon way: fotos 4:5 en vez de 1:1.618 */
  .pillar-photo{ aspect-ratio:4 / 5 }

  /* comunidad: la puerta del video, mas angosta */
  .community-door{ max-width:330px }

  /* galeria: tira de dos filas que se desliza a lo ancho, con flechas */
  .masonry-wrap{ position:relative; container-type:normal }
  .masonry{
    grid-template-columns:none; grid-template-rows:repeat(2, 196px); grid-auto-rows:auto;
    grid-auto-flow:column dense; grid-auto-columns:auto;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--niebla) transparent;
    padding-bottom:var(--e-1);
  }
  .masonry li{ width:262px; scroll-snap-align:start }
  .masonry .g-p{ grid-row:span 2; width:304px }
  .masonry .g-big{ grid-row:span 2; grid-column:auto; width:603px }
  .strip-nav{ position:absolute; inset:0 0 var(--e-1); pointer-events:none }
  .strip-btn{
    position:absolute; top:50%; translate:0 -50%; pointer-events:auto;
    display:grid; place-items:center; width:52px; height:52px; padding:0; cursor:pointer;
    border-radius:50%; border:1px solid var(--niebla); background:var(--blanco); color:var(--tinta);
    box-shadow:0 12px 30px -12px rgba(11,14,20,.45);
    transition:background-color var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
  }
  .strip-btn:hover{ background:var(--papel) }
  .strip-btn .i{ font-size:var(--t-deck) }
  .strip-prev{ left:calc(var(--e-2) * -1) }
  .strip-prev .i{ rotate:180deg }
  .strip-next{ right:calc(var(--e-2) * -1) }
  .strip-btn:disabled{ opacity:0; pointer-events:none }
  .follow{ margin-top:var(--e-3); padding-top:var(--e-3) }

  /* resenas */
  .reviews-close{ margin-top:var(--e-3) }

  /* preguntas */
  .faq-head{ top:calc(var(--header-h) + var(--e-3)) }
  .ans{ padding-bottom:var(--e-2) }
}

.field-pair > .field{ align-content:start }

/* telefono y tablet chica: las dos clases son una fila que se desliza */
@media (max-width:899.98px){
  .plans{ --rail-w:86%; gap:var(--e-2) }
  .plans > .plan{ align-self:stretch }
  /* las tres opciones de clase en una fila: el punto arriba a la derecha, el texto debajo */
  .choices{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px }
  .choice{ min-height:72px; align-content:end; padding:var(--e-3) var(--e-1) var(--e-1) }
  .choice-dot{ top:var(--e-1); right:var(--e-1); translate:none }
  .choice-t{ font-size:.9375rem; line-height:1.25 }
  .choice-s{ font-size:.6875rem; letter-spacing:.08em }
}
@media (min-width:600px) and (max-width:899.98px){
  .plans{ --rail-w:calc(50% - 9px) }
}

/* ── movimiento reducido: nada se mueve, todo visible ── */
@media (prefers-reduced-motion:reduce){
  :root{ --rapido:0ms; --lento:0ms }
  .js .hero-title{ opacity:1 }
  .js .pincel .ch{ -webkit-mask-image:none; mask-image:none; filter:none }
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .has-ring::before, .luz .red::before{ display:none }
  .luz .red{ background:var(--rojo-sol) }
  .tilt.is-lit{ transform:none; scale:1 }
}

/* 2026-10-11: la foto del podio se cambia por los dos videos del sensei con los ninos (pedido de Alejandro) */
.podium-photo.podium-vids{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; background:none; overflow:visible; aspect-ratio:auto }
.podium-vids .podium-vid{ width:auto; aspect-ratio:464 / 832; border-radius:var(--radius); margin:0 }
/* el logo original del profe, con su fondo blanco de insignia */
.top-logo img{ height:64px; width:auto; border-radius:0 }
.top-logo{ border-radius:0 }
@media (max-width:767.98px){ .top-logo img{ height:56px } }