/* Falcon Judo Club · site.css
   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. */

: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-oscuro:var(--blanco);
  --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-glow:rgba(217,36,26,.14);   /* techo medido para el reflejo de tarjeta */
  --brand-soft:rgba(217,36,26,.15);
  --brand-line:rgba(217,36,26,.45);
  --brand-deep:color-mix(in srgb, var(--rojo-sol) 25%, var(--tinta));

  /* cristal y filo de luz (sobre oscuro) */
  --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);
  --flare:rgba(255,255,255,.2);
  --flare-glow:rgba(255,255,255,.04);
  --velo:rgba(11,14,20,.6);           /* brand.md: velo de Tinta al 60 % */

  /* ── letra: tres papeles + deck y heroe de la escalera aurea ── */
  --f-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-texto:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* en rem (13, 17, 27.5, 44.5 y 72 px con la letra de 16 px del navegador):
     quien agranda la letra del navegador ve el cambio */
  --t-etiqueta:.8125rem;
  --t-cuerpo:1.0625rem;
  --t-deck:1.71875rem;
  --t-display:clamp(1.71875rem, 3.8vw, 2.78125rem);
  --t-hero:clamp(2.78125rem, 6vw, 4.5rem);
  --peso-texto:400; --peso-fuerte:600; --peso-control:700;
  --tr-etiqueta:.16em;
  --lh-display:1.08; --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:72px;

  /* ── 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(--tinta);
  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(--tinta); 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 }
.hero :focus-visible, .stats :focus-visible, .top :focus-visible, .dark :focus-visible,
.foot :focus-visible, .bar :focus-visible, .door :focus-visible{ outline-color:var(--foco-oscuro) }
/* 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(--blanco); color:var(--tinta);
  border-radius:var(--radius-sm); font-weight:700; text-decoration:none;
}
.skip:focus{ top:var(--e-1) }
.skip:focus-visible{ outline-color:var(--foco-oscuro) }

.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;
}
.eyebrow{
  display:flex; align-items:center; gap: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(--pizarra);
}
.eyebrow::before{   /* el sol del sello, un punto */
  content:""; flex:none; width:var(--e-1); height:var(--e-1); border-radius:50%;
  background:var(--rojo-sol);
}
.display{
  font-family:var(--f-display); font-weight:400; font-size:var(--t-display);
  line-height:var(--lh-display); text-transform:uppercase; max-width:var(--med-titular);
}
.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 }
.dark .go{ 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) }

.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) }
@supports (backdrop-filter:blur(2px)){
  .btn-glass{ -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%) }
}

/* 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, oscura: escalon de valor + linea de 1 px ── */
.top{
  position:sticky; top:0; z-index:40;
  background:rgba(11,14,20,.94); color:var(--blanco);
  border-bottom:1px solid var(--glass-line);
}
@supports (backdrop-filter:blur(2px)){
  .top{ background:rgba(11,14,20,.92); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%) }
}
.top-in{ display:flex; align-items:center; gap:var(--e-3); height:var(--header-h) }
.top-logo{ display:block; flex:none; margin-right:auto; padding-block:2px; border-radius:var(--radius-xs) }
.top-logo img{ height:42px; width:auto }   /* aire de 15 px arriba y abajo; X = 14 */
.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(--niebla);
  border-radius:var(--radius-xs);
  transition:color var(--rapido) var(--curva);
}
.nav a:hover{ color:var(--blanco) }
.top-phone{
  display:inline-flex; align-items:center; gap:var(--e-1); min-height:44px;
  font-weight:600; text-decoration:none; color:var(--blanco); white-space:nowrap;
}
.top-phone .i{ font-size:var(--t-cuerpo); color:var(--niebla) }
.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(--glass); border:1px solid var(--glass-line); border-radius:var(--radius-sm);
  font-weight:700; cursor:pointer;
}

@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(--carbon); border-bottom:1px solid var(--glass-line);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    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); color:var(--blanco); border-bottom:1px solid var(--glass-line); 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) }
  html:not(.js) .nav a{ color:var(--blanco) }
}
@media (max-width:767.98px){
  .top-in{ gap:var(--e-1) }
  .top-logo img{ height:40px }
  .top-book{ display:none }
  .top-phone{ justify-content:center; width:44px; border:1px solid var(--glass-line); border-radius:var(--radius-sm); background:var(--glass) }
  .top-phone-n{ display:none }
}

/* ── secciones ── */
main{ position:relative; z-index:1; display:block }
.sec{ padding-block:var(--sec-pad); background:var(--papel) }
.sec.alt{ background:var(--blanco) }
.sec.dark{ background:transparent; color:var(--blanco) }   /* deja ver la luz de scroll */
.dark .eyebrow{ color:var(--niebla) }
.dark .lede, .dark .body-2{ color:var(--niebla) }
.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 ── */
.hero{ position:relative; isolation:isolate; overflow:clip; background:var(--tinta); color:var(--blanco) }
.hero-grid{
  display:grid; grid-template-columns:1.618fr 1fr; gap:var(--gap-bloque);
  align-items:center; padding-block:var(--e-4);
}
.hero h1{ display:grid; gap:var(--e-2); font-weight:400 }
.hero .antetitulo{ color:var(--niebla) }
.hero-title{
  display:block; font-family:var(--f-display); font-size:var(--t-hero);
  line-height:var(--lh-display); text-transform:uppercase; max-width:var(--med-titular);
}
.hero-title .ln, .coaches-h .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(--niebla) }
.hero-lede .hi{ color:var(--blanco) }
.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(--niebla); 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(--blanco); text-decoration-thickness:2px }
.stars{ width:104px; height:17px; color:var(--naranja-fuego); flex:none }

.hero-media{ position:relative; isolation:isolate; display:grid; justify-items:end }

/* 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(--carbon);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.55), inset 0 0 0 1px var(--glass-line);
}
/* sin fondo propio: hasta que llega el poster se ve el Carbon de la puerta, y sin JS el poster de <noscript> que va debajo */
.door-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero .door{
  width:min(100%, calc((100vh - var(--header-h) - var(--e-6)) / 1.618));
  width:min(100%, calc((100svh - var(--header-h) - var(--e-6)) / 1.618));
  min-width:min(100%, 280px);
  box-shadow:inset 0 0 0 1px var(--glass-line);   /* sin sombra negra: la luz del sol sale por los bordes */
}

/* receta 13: el sol detras de la puerta, deriva lenta; el puntero lo mueve al reves (receta 1) */
.door-glow{
  position:absolute; z-index:-1; inset:-14% -34%; pointer-events:none;
  background:
    radial-gradient(50% 50% at 56% 50%, rgb(var(--brand-rgb) / .42) 0%, rgb(var(--brand-rgb) / .42) 50%, rgb(var(--brand-rgb) / .22) 66%, rgb(var(--brand-rgb) / 0) 86%),
    radial-gradient(60% 62% at 44% 60%, var(--brand-deep) 0%, transparent 74%);
  translate:var(--gx, 0) var(--gy, 0);
  transition:translate .5s var(--ease-out);
  animation:deriva 50s ease-in-out infinite;
  animation-play-state:paused;
}
/* la deriva solo corre mientras corre el video: el boton de pausa del heroe para las dos cosas */
.hero:has(.vid-toggle.is-playing) .door-glow{ animation-play-state:running }
@keyframes deriva{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(2%,-1.5%,0) scale(1.08) }
}

/* 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 var(--glass-line); 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 ── */
.stats{ position:relative; z-index:1; background:var(--tinta); color:var(--blanco) }
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap-tarjetas);
  padding-block:var(--e-4) var(--e-5); border-top:1px solid var(--glass-line);
}
.stat-n{ display:block; font-family:var(--f-display); font-size:var(--t-display); line-height:var(--lh-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(--niebla);
}

/* ── 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-family:var(--f-display); font-weight:400; font-size:var(--t-display); line-height:var(--lh-display); text-transform:uppercase; outline-offset:4px }
.fb-text{ color:var(--pizarra); max-width:var(--med-cuerpo) }
.fb-label{ margin-top:var(--e-2); color:var(--pizarra) }
.fb-phone{
  font-family:var(--f-display); font-size:var(--t-display); line-height:var(--lh-display);
  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-cover .eyebrow{ color:var(--blanco) }
.msg-title{ display:block; font-family:var(--f-display); font-weight:400; font-size:var(--t-deck); line-height:var(--lh-display); text-transform:uppercase; max-width:18ch }
/* 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 ── */
.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(--niebla); max-width:34ch; text-align:center }
.mission-copy{ display:grid; gap:var(--e-3); justify-items:start }
.mission .deck{ color:var(--blanco) }

/* ── 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(--blanco);
  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-family:var(--f-display); font-weight:400; font-size:var(--t-display); line-height:var(--lh-display); text-transform:uppercase }
.plan-when{ font-weight:var(--peso-fuerte) }
.price{ display:flex; align-items:baseline; gap:var(--e-1) }
.price-n{ font-family:var(--f-display); 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) }
.coaches-h{ max-width:none }
.coach-name{ font-family:var(--f-display); font-weight:400; font-size:var(--t-deck); line-height:var(--lh-display); text-transform:uppercase }
.coach-role{ color:var(--pizarra) }
.coach-meta{ color:var(--pizarra) }
.coach-bio{ grid-area:bio; display:grid; gap:var(--e-2); align-content:start }
.coach-intl-h{ margin-top:var(--e-1); color:var(--pizarra) }
.coach-intl{ display:grid; gap:7px }
.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) }

/* ── 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) }
.way-go{ margin-top:var(--e-4) }

/* ── 8 y 9. franjas oscuras ── */
.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(--carbon) }
.photo img{ width:100% }
.results{ display:grid }
.results > div{ display:grid; gap:7px; padding-block:var(--e-3); border-top:1px solid var(--glass-line) }
.results > div:last-child{ border-bottom:1px solid var(--glass-line) }
.results dt{ font-family:var(--f-display); font-size:var(--t-display); line-height:var(--lh-display); text-transform:uppercase }
.results dd{ color:var(--niebla); 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; 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(--niebla); max-width:var(--med-cuerpo) }
.community-door{ max-width:440px; justify-self:end }
.community-close{ margin-top:0 }

/* ── 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 }
@media (min-width:768px){
  .masonry li:nth-child(1){ grid-column:2 / 4; grid-row:1 / 3 }
  .masonry li:nth-child(2){ grid-column:1; grid-row:1 / 3 }
  .masonry li:nth-child(3){ grid-column:4; grid-row:1 / 3 }
  .masonry li:nth-child(4){ grid-column:1; grid-row:3 }
  .masonry li:nth-child(5){ grid-column:4; grid-row:3 }
  .masonry li:nth-child(6){ grid-column:2; grid-row:3 / 5 }
  .masonry li:nth-child(7){ grid-column:3; grid-row:3 / 5 }
  .masonry li:nth-child(8){ grid-column:2; grid-row:5 }
  .masonry li:nth-child(9){ grid-column:3; grid-row:5 }
  .masonry li:nth-child(10){ grid-column:1; grid-row:4 / 6 }
  .masonry li:nth-child(11){ grid-column:4; grid-row:4 / 6 }
}
.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-family:var(--f-display); font-weight:400; font-size:var(--t-display); line-height:var(--lh-display); text-transform:uppercase }
.follow-copy p{ color:var(--pizarra); max-width:var(--med-cuerpo) }
.follow-links{ display:grid; gap:var(--e-1); justify-items:start }
.gallery-go{ margin-top:var(--e-4) }

/* ── 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;
}
.pm .pm-v{ transition:opacity var(--rapido) var(--curva) }
details[open] .pm .pm-v{ opacity:0 }
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 ── */
.reviews-h{ max-width:24ch }
.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(--carbon);
  border-radius:var(--radius); overflow:hidden;
}
/* receta 5: filo de luz de cristal en la tarjeta */
.review::before{
  content:""; position:absolute; inset:0 0 auto 0; height:20px; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%, var(--flare) 28%, var(--flare) 72%, transparent 100%) top left / 100% 1px no-repeat,
    radial-gradient(120% 100% at 50% 0%, var(--flare-glow), transparent 70%);
}
.review figure{ display:grid; gap:var(--e-2); height:100%; grid-template-rows:auto 1fr auto }
.review blockquote p{ color:var(--blanco) }
.review figcaption{ display:grid; gap:4px; padding-top:var(--e-2); border-top:1px solid var(--glass-line) }
.r-name{ font-weight:var(--peso-fuerte) }
.r-src{ color:var(--niebla) }
.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 ── */
.foot{ position:relative; z-index:1; color:var(--blanco); padding-block:var(--e-5) var(--e-4); border-top:1px solid var(--glass-line) }
.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-name{ font-family:var(--f-display); font-size:var(--t-display); line-height:var(--lh-display); text-transform:uppercase }
.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-motto{ font-family:var(--f-display); font-size:var(--t-deck); line-height:var(--lh-display); text-transform:uppercase; color:var(--blanco) }
.foot-copy{ color:var(--niebla); margin-top:var(--e-2) }

/* ── barra fija del telefono ── */
.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(11,14,20,.96); border-top:1px solid var(--glass-line);
  }
  .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) ── */
@media (hover:hover) and (pointer:fine){
  .coach-list{ perspective:1100px }
  .tilt{
    transform-style:preserve-3d;
    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:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); scale:1.035; z-index:2;
    box-shadow:0 18px 40px rgba(11,14,20,.38), 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: luz que sigue el scroll (solo se ve por las secciones oscuras) ── */
.luz-scroll{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(38vmax 34vmax at var(--lx, 20%) var(--ly, 55%),
    rgb(var(--brand-rgb) / .30), rgb(var(--brand-rgb) / .10) 40%, rgb(var(--brand-rgb) / 0) 72%);
}

/* ── receta 2 + 11: etiquetas que enfocan, con red de seguridad ── */
.js .eyebrow.reveal{
  opacity:0; filter:blur(14px); letter-spacing:.4em; white-space:nowrap;
  transition:opacity var(--dur-reveal) var(--ease-out), filter 1s var(--ease-out), letter-spacing 1s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
  animation:a-la-vista 1ms linear 4s forwards;   /* si el script no llega, a los 4 s se ve todo */
}
.js.arranca .eyebrow.reveal{ animation:none }
.js .eyebrow.reveal.is-in{ opacity:1; filter:none; letter-spacing:var(--tr-etiqueta) }
@keyframes a-la-vista{ to{ opacity:1; filter:none; letter-spacing:var(--tr-etiqueta) } }

/* el heroe no espera a nadie: CSS puro */
.js .hero .antetitulo{ animation:enfoca 1s var(--ease-out) 180ms both }
@keyframes enfoca{ from{ opacity:0; filter:blur(14px) } to{ opacity:1; filter: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) }
  .hero-media{ justify-items:stretch }
  .hero .door{ width:100%; max-width:440px; justify-self:center }
  .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 }
}
@media (max-width:767.98px){
  .stats-grid{ grid-template-columns:1fr 1fr; gap:var(--e-3) var(--e-2) }
  .hero-ctas .btn{ flex:1 1 100% }
  /* en el telefono, el segundo camino es un enlace: sube la puerta del heroe sin tocar el rojo */
  .hero-ctas .hero-see{
    flex:0 0 auto; min-height:44px; padding:0; justify-content:flex-start;
    background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    font-weight:var(--peso-fuerte); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px;
  }
  .hero-ctas .hero-see:hover{ background:none; text-decoration-thickness:2px }
  .proof{ margin-top:0 }   /* el enlace de arriba ya trae su aire dentro de sus 44 px */
  .proof .stars{ width:86px; height:14px }
  .choices{ grid-template-columns:1fr }
  .choice{ min-height:61px }
  .plan{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"media head" "list list" "buy buy";
    padding:var(--e-2); gap:var(--e-2);
  }
  .plan-media{ width:100% }
  .plan-head{ align-self:center }
  .plan-buy{ display:grid; grid-auto-flow:row; justify-content:stretch; justify-items:stretch }
  .plan-buy .btn{ width:100% }
  .pillars{ grid-template-columns:1fr 1fr; gap:var(--e-4) var(--e-2) }
  .coach{ grid-template-areas:"photo head" "bio bio"; grid-template-rows:auto auto; align-items:center }
  .rows > div{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr; justify-items:start; gap:var(--e-4) }
  .foot-seal{ width:min(100%, 340px) }
  .masonry{ --cols:2; --g:var(--e-1) }
  .visit-copy > .btn{ width:100% }
}

/* ── movimiento reducido: nada se mueve, todo visible ── */
@media (prefers-reduced-motion:reduce){
  :root{ --rapido:0ms; --lento:0ms }
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .js .eyebrow.reveal{ opacity:1; filter:none; letter-spacing:var(--tr-etiqueta) }
  .js .hero .antetitulo{ opacity:1; filter:none }
  .has-ring::before, .luz-scroll{ display:none }
  .tilt.is-lit{ transform:none; scale:1 }
}