/* ==========================================================================
   VINCES FIGHT — sistema de diseño v4 (rediseño del 10-sep-2026) · WebClicStudio

   Dirección de arte: cartel de pelea, no plantilla de gimnasio.
   · Negro profundo + UN rojo de marca. El color de cada disciplina sólo aparece
     donde ayuda a leer (horario, tarjetas), nunca de adorno.
   · Tipografía: una sola familia, Archivo. Extracondensada negra para
     titulares (cursiva para el acento), normal para leer.
   · Fotografía: todo a color (retratos de estudio y fotos de clase; el jefe de
     la academia pidió color el 13-sep-2026). Ninguna foto se amplía.
   · Firma gráfica: el corte diagonal (la X del escudo, las líneas de los
     cuadros de horario del cliente). Se usa en el hero, los rótulos y los
     subrayados. Nada más: sin cadenas, haces de luz, brasas ni texturas sucias.

   Índice: 1 tokens · 2 base · 3 tipografía · 4 botones · 5 navegación ·
   6 hero · 7 secciones de portada · 8 cabecera de página · 9 horario ·
   10 páginas internas · 11 pie · 12 utilidades y movimiento · 13 responsive
   ========================================================================== */

/* ---------- Fuentes propias (personalizacion/generar-fuentes.py) ---------- */
@font-face{font-family:"VF Display";src:url("../fonts/archivo-display.woff2") format("woff2");
  font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"VF Display";src:url("../fonts/archivo-display-italic.woff2") format("woff2");
  font-weight:700 900;font-style:italic;font-display:swap}
@font-face{font-family:"VF Text";src:url("../fonts/archivo-text.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

/* ==================== 1. TOKENS ==================== */
:root{
  /* Color */
  --fondo:#08080a; --fondo-2:#0c0c0e;
  --superficie:#121215; --superficie-2:#18181c; --superficie-3:#222227;
  --linea:#24242a; --linea-2:#33333a;
  --texto:#f5f4f2; --texto-suave:#b4b3b9;
  /* #8b8a92 sobre --fondo da 5.8:1 y sobre --superficie 5.2:1: pasa AA. */
  --texto-tenue:#8b8a92;
  --rojo:#e11d2a; --rojo-osc:#b9141f; --rojo-hondo:#8e0f18;
  /* Rojo para TEXTO pequeño: el de marca da 4.16:1 sobre el fondo y no
     llega al AA. Este es el mismo tono del titular, así que no desentona. */
  --rojo-txt:#ff2b3c;
  --verde-wa:#25d366; --verde-wa-osc:#1da851;

  /* Tipografía */
  /* Respaldo mientras carga la fuente (o si fallara): condensadas del sistema.
     Medido en Chrome/Windows con «DISCIPLINA.» a 100 px: la nuestra 447 px,
     Bahnschrift Condensed 454, Impact 463. «Arial Narrow» va al final: si no
     está instalada, Windows la cambia por Arial (677 px, un 50 % más ancha) y
     tapaba a las demás; los titulares se salían de la pantalla en el móvil. */
  --f-display:"VF Display","Bahnschrift Condensed","Avenir Next Condensed","Roboto Condensed","sans-serif-condensed",Impact,"Arial Narrow",sans-serif;
  --f-texto:"VF Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Forma y ritmo */
  --r:2px; --r-lg:4px;
  --corte:14px;                         /* esquina cortada de las piezas grandes */
  --contenedor:1280px;
  --gutter:clamp(18px,4vw,40px);
  --nav-h:76px;
  --sec:clamp(64px,9vw,128px);          /* aire vertical de sección */
  --ease:cubic-bezier(.2,.7,.2,1);
  --sombra:0 18px 50px rgba(0,0,0,.55);
}

/* ==================== 2. BASE ==================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f-texto);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;padding-top:var(--nav-h)}
body.con-hero{padding-top:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.1}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
em,i{font-style:normal}                 /* el texto no tiene cursiva real */
::selection{background:var(--rojo);color:#fff}
:focus-visible{outline:2px solid var(--rojo-txt);outline-offset:3px}
[data-ancla]:focus{outline:none}          /* destino de un enlace interno (anclas() en main.js) */
.skip-link{position:absolute;left:-999px;top:8px;z-index:300;background:var(--rojo);color:#fff;
  padding:10px 16px;font:800 .9rem var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.skip-link:focus{left:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;flex:none;vertical-align:middle}
.container{width:100%;max-width:var(--contenedor);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--sec) 0;position:relative}
.section--tight{padding:calc(var(--sec) * .6) 0}
.section--panel{background:var(--fondo-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.center{text-align:center}
.red{color:var(--rojo-txt)}
[hidden]{display:none!important}

/* ==================== 3. TIPOGRAFÍA ==================== */
/* Titulares: extracondensada negra, en mayúsculas. El <em> dentro de un
   titular es el acento: cursiva y rojo (como los cuadros del cliente). */
.t-display,.sec-title,.phead__title,.hero__title-main{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:.005em}
.t-display em,.sec-title em,.phead__title em,.hero__title-main em{font-style:italic;color:var(--rojo-txt);
  padding-right:.04em}
.sec-title{font-size:clamp(2.35rem,5.4vw,4.4rem);line-height:.94}
.sec-title--md{font-size:clamp(1.9rem,3.8vw,3rem)}
.sec-sub{color:var(--texto-suave);font-size:1.08rem;line-height:1.65;max-width:58ch;margin-top:18px}

/* Rótulo: la pieza más repetida del sitio. El corte rojo es la firma. */
.kicker{display:inline-flex;align-items:center;gap:12px;font:800 .78rem/1 var(--f-display);
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:18px}
.kicker::before{content:"";width:22px;height:5px;background:var(--rojo);transform:skewX(-24deg);flex:none}
.kicker--red{color:var(--rojo-txt)}

/* Cabecera de sección: título a la izquierda, acción a la derecha */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;
  margin-bottom:clamp(34px,5vw,56px)}
.sec-head__txt{max-width:780px}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center .sec-sub{margin-left:auto;margin-right:auto}
.lead{color:var(--texto-suave);font-size:1.1rem;line-height:1.7;max-width:62ch}
.lead b,.sec-sub b,.lead strong{color:var(--texto);font-weight:600}

/* ==================== 4. BOTONES Y ENLACES ==================== */
.btn{--pad:15px 26px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--pad);border:1px solid transparent;border-radius:var(--r);
  font:800 .92rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);position:relative}
.btn .ico{width:1.15em;height:1.15em;stroke-width:2}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--primary{background:var(--rojo);color:#fff}
.btn--primary:hover{background:var(--rojo-osc)}
.btn--light{background:#fff;color:#0a0a0b}
.btn--light:hover{background:#e7e6e4}
.btn--ghost{border-color:var(--linea-2);color:var(--texto);background:rgba(8,8,10,.35)}
.btn--ghost:hover{border-color:#fff}
.btn--wa{background:var(--verde-wa);color:#04140a}
.btn--wa:hover{background:#1fc05b}
.btn--dark{background:#0a0a0b;color:#fff}
.btn--dark:hover{background:#000}
.btn--lg{--pad:19px 32px;font-size:1rem}
.btn--sm{--pad:11px 16px;font-size:.78rem;letter-spacing:.08em}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:8px;font:800 .82rem/1 var(--f-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto)}
.link .ico{color:var(--rojo);width:18px;height:18px;stroke-width:2;transition:transform .2s var(--ease)}
.link:hover .ico{transform:translateX(4px)}
.link--red{color:var(--rojo-txt)}

/* Etiquetas */
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r);
  font:800 .68rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(8,8,10,.72);border:1px solid var(--linea-2);color:var(--texto)}
.tag .ico{width:13px;height:13px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--rojo));flex:none;display:inline-block}

/* ==================== 5. NAVEGACIÓN ==================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  background:rgba(8,8,10,.94);border-bottom:1px solid var(--linea);
  transition:background .3s,border-color .3s}
/* Sobre el hero la barra es transparente; al bajar, sólida. */
.nav--over:not(.is-scrolled){background:transparent;border-color:transparent}
/* Sobre la foto, un degradado negro que baja más que la barra: separa el menú
   del fondo sin volverlo una barra sólida. Degradado y no backdrop-filter:
   un blur fijo se recalcula en cada cuadro del scroll (Android de gama media). */
.nav--over::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:calc(var(--nav-h) * 2.1);pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.9) 0,rgba(5,5,5,.72) 38%,rgba(5,5,5,.3) 72%,rgba(5,5,5,0));transition:opacity .3s}
.nav--over.is-scrolled::before{opacity:0}
.nav--over:not(.is-scrolled) .nav__menu > a{color:#e2e1e5;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.nav--over:not(.is-scrolled) .nav__menu > a:hover,.nav--over:not(.is-scrolled) .nav__menu > a[aria-current]{color:#fff}
.nav__inner{display:flex;align-items:center;gap:20px;height:100%}
/* Logo: grande mientras se está arriba de una página con cabecera (cuelga
   bajo la barra, como un escudo) y chico al bajar (pedido del jefe de la
   academia, 13-sep-2026). En las páginas sin cabecera va siempre chico: ahí
   el contenido empieza justo bajo la barra y el grande lo taparía. */
.nav__logo{--logo:50px;flex:none;align-self:flex-start;display:block;margin-top:calc((var(--nav-h) - var(--logo)) / 2);
  transition:margin-top .35s var(--ease)}
.nav__logo img{height:var(--logo);width:auto;transition:height .35s var(--ease)}
.nav--over:not(.is-scrolled) .nav__logo{--logo:110px;margin-top:10px}
.nav--over:not(.is-scrolled) .nav__logo img{filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.nav__menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__menu > a{position:relative;padding:10px 11px;font:800 .78rem/1 var(--f-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-suave);transition:color .2s}
.nav__menu > a:hover{color:#fff}
.nav__menu > a[aria-current]{color:#fff}
.nav__menu > a[aria-current]::after{content:"";position:absolute;left:11px;right:11px;bottom:1px;height:3px;
  background:var(--rojo);transform:skewX(-24deg)}
.nav__extra{display:none}
.nav__cta{margin-left:10px}
.nav__toggle{display:none;width:46px;height:46px;border:1px solid var(--linea-2);border-radius:var(--r);
  background:transparent;align-items:center;justify-content:center;margin-left:auto}
.nav__toggle .ico{width:24px;height:24px;stroke-width:1.8}

/* ==================== 6. HERO CON EL CARTEL (Profesores) ==================== */
/* La portada tiene su propio hero (sección 14, .portada). Este es el de la
   página de Profesores: vf_hero_cartel() en includes/ui.php.
   Cartel del equipo: cinco retratos en paneles diagonales (una sola imagen
   compuesta en personalizacion/optimizar-fotos.py: un archivo, una descarga).
   Las caras viven en el 45 % superior; el titular, abajo, en una sola línea
   como en los carteles de pelea. Así nunca tapa una cara. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#070708;
  min-height:min(100svh,1000px);display:flex;flex-direction:column;justify-content:flex-end}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
/* La mitad de abajo va casi negra: ahí están las camisetas (con letras
   grandes) y encima va el titular. Más un velo a la izquierda, detrás del
   bloque de texto. Las caras, arriba, quedan limpias. */
.hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(7,7,8,.62) 0,rgba(7,7,8,0) 18%),
  linear-gradient(0deg,#070708 0,rgba(7,7,8,.96) 30%,rgba(7,7,8,.8) 44%,rgba(7,7,8,.3) 58%,rgba(7,7,8,0) 66%),
  linear-gradient(90deg,rgba(7,7,8,.55) 0,rgba(7,7,8,0) 55%)}
.hero__in{position:relative;padding-top:calc(var(--nav-h) + 38vh);padding-bottom:clamp(30px,4.5vw,54px)}
.hero__h1{margin:0}
.hero__title-kicker{display:flex;align-items:center;gap:14px;font:800 clamp(.74rem,1.1vw,.9rem)/1.2 var(--f-display);
  letter-spacing:.24em;text-transform:uppercase;color:var(--texto);margin-bottom:14px}
.hero__title-kicker::before{content:"";width:34px;height:6px;background:var(--rojo);transform:skewX(-24deg);flex:none}
.hero__title-main{display:block;font-size:clamp(3.1rem,8.4vw,9rem);line-height:.86;letter-spacing:0;
  text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero__title-main span{display:inline-block}
.hero__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px 48px;align-items:end;margin-top:clamp(20px,2.6vw,32px)}
.hero__lead{color:#d6d5d9;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.6;max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

/* Entrada del hero: la única animación «de firma» del sitio */
@media (prefers-reduced-motion:no-preference){
  html.js .hero__media img{animation:hero-in 1.6s var(--ease) both}
  html.js .hero__title-main span{animation:sube .9s var(--ease) both}
  html.js .hero__title-main span:nth-child(2){animation-delay:.08s}
  html.js .hero__title-main span:nth-child(3){animation-delay:.16s}
  html.js .hero__row,html.js .hero__title-kicker{animation:aparece .9s .3s var(--ease) both}
  @keyframes hero-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
  @keyframes sube{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
  @keyframes aparece{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ==================== 7. SECCIONES DE PORTADA ==================== */

/* Control segmentado (sedes, turnos) */
.seg{display:inline-flex;padding:4px;gap:4px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-lg)}
.seg__b{border:0;background:transparent;color:var(--texto-suave);padding:10px 16px;border-radius:var(--r);
  font:800 .78rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;transition:background .2s,color .2s}
.seg__b:hover{color:#fff}
.seg__b[aria-pressed="true"],.seg__b[aria-selected="true"]{background:var(--rojo);color:#fff}
.seg--light .seg__b[aria-pressed="true"]{background:#fff;color:#0a0a0b}

/* --- Disciplinas --- */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.dcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:4/5;background:var(--superficie);color:#fff;border-radius:var(--r)}
.dcard picture,.dcard > img{position:absolute;inset:0;z-index:-2}
.dcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* Al pasar, un filete del color de la disciplina (las fotos van a color: sin tintes) */
.dcard::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:1;background:var(--c,var(--rojo));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.dcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(6,6,7,.96) 0,rgba(6,6,7,.72) 34%,rgba(6,6,7,0) 64%)}
.dcard:hover img{transform:scale(1.05)}
.dcard:hover::before{transform:none}
.dcard__num{position:absolute;top:16px;left:18px;font:900 1rem/1 var(--f-display);letter-spacing:.12em;color:#fff;
  display:flex;align-items:center;gap:10px}
.dcard__num::after{content:"";width:26px;height:4px;background:var(--c,var(--rojo));transform:skewX(-24deg)}
.dcard__body{padding:22px 22px 24px}
.dcard h3{font:900 clamp(1.9rem,2.8vw,2.6rem)/.92 var(--f-display);text-transform:uppercase}
.dcard p{color:#d0cfd4;font-size:.95rem;line-height:1.5;margin-top:10px;max-width:34ch}
.dcard__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.dcard__go{position:absolute;top:14px;right:14px;width:42px;height:42px;display:grid;place-items:center;
  background:rgba(8,8,10,.6);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);transition:background .25s,border-color .25s}
.dcard__go .ico{width:20px;height:20px;stroke-width:2;transform:rotate(-45deg);transition:transform .3s var(--ease)}
.dcard:hover .dcard__go{background:var(--c,var(--rojo));border-color:transparent}
.dcard:hover .dcard__go .ico{transform:none}

/* --- Equipo (retratos de estudio) --- */
.roster{position:relative}
.roster__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,21vw,286px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
  padding:4px var(--gutter) 18px;margin:0 calc(var(--gutter) * -1);scrollbar-width:thin;scrollbar-color:var(--linea-2) transparent}
.roster__track::-webkit-scrollbar{height:6px}
.roster__track::-webkit-scrollbar-thumb{background:var(--linea-2)}
.roster__nav{display:flex;gap:8px}
.roster__btn{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--linea-2);
  border-radius:var(--r);background:transparent;transition:border-color .2s,background .2s}
.roster__btn:hover{border-color:#fff}
.roster__btn .ico{width:22px;height:22px;stroke-width:2}
.roster__btn:disabled{opacity:.3;cursor:default}

.coach{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/4;scroll-snap-align:start;
  background:var(--superficie);border-radius:var(--r);display:flex;flex-direction:column;justify-content:flex-end}
.coach picture{position:absolute;inset:0;z-index:-2}
.coach img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;transition:transform .7s var(--ease)}
.coach::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(6,6,7,.97) 0,rgba(6,6,7,.6) 26%,rgba(6,6,7,0) 50%)}
.coach:hover img{transform:scale(1.04)}
.coach__top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:6px}
.coach__in{padding:0 16px 16px}
.coach__alias{font:900 .72rem/1 var(--f-display);font-style:italic;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rojo-txt);margin-bottom:6px}
.coach h3{font:900 clamp(1.3rem,1.8vw,1.6rem)/.95 var(--f-display);text-transform:uppercase}
.coach__spec{display:flex;align-items:center;gap:7px;margin-top:8px;font:800 .72rem/1.2 var(--f-display);
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.coach__spec .dot{width:8px;height:8px}
.coach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}

/* --- Zona Roja Fight: el único bloque rojo del sitio --- */
.zrf{position:relative;isolation:isolate;overflow:hidden;background:var(--rojo-hondo);color:#fff}
.zrf::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(105deg,#a3111c 0,#8e0f18 45%,#5c0910 100%)}
.zrf::after{content:"ZRF";position:absolute;right:-.06em;bottom:-.2em;z-index:-1;pointer-events:none;
  font:900 clamp(12rem,34vw,30rem)/1 var(--f-display);font-style:italic;color:rgba(0,0,0,.18);letter-spacing:-.02em}
.zrf__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
.zrf .kicker{color:#fff}
.zrf .kicker::before{background:#fff}
.zrf__title{font:900 clamp(3rem,7.4vw,6.6rem)/.86 var(--f-display);text-transform:uppercase}
.zrf__title em{font-style:italic;color:#0a0a0b}
.zrf__lead{color:#ffe3e5;font-size:1.1rem;line-height:1.65;margin-top:22px;max-width:52ch}
.zrf__lead b{color:#fff}
.zrf__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2)}
.zrf__stat{background:rgba(0,0,0,.2);padding:26px 24px}
.zrf__stat b{display:block;font:900 clamp(2.6rem,4.6vw,3.8rem)/.9 var(--f-display)}
.zrf__stat span{font:800 .76rem/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#ffd4d7}
.zrf__stat--wide{grid-column:1/-1}
.zrf .btn--ghost{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}
.zrf .btn--ghost:hover{border-color:#fff;background:rgba(0,0,0,.15)}

/* --- Sedes --- */
.venues{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.venue{background:var(--superficie);border:1px solid var(--linea);display:flex;flex-direction:column;border-radius:var(--r)}
.venue__img{position:relative;aspect-ratio:16/9;overflow:hidden}
.venue__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.venue:hover .venue__img img{transform:scale(1.03)}
.venue__img .tag{position:absolute;top:14px;left:14px}
.venue__body{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;flex:1}
.venue__name{font:900 clamp(1.7rem,2.6vw,2.3rem)/.95 var(--f-display);text-transform:uppercase}
.venue__list{list-style:none;display:grid;gap:10px}
.venue__list li{display:flex;gap:11px;color:var(--texto-suave);font-size:.95rem;line-height:1.45}
.venue__list .ico{color:var(--rojo);width:19px;height:19px;margin-top:2px}
.venue__list b{color:var(--texto);font-weight:600}
.venue__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.venue__actions .btn{flex:1 1 150px}

/* --- Cierre --- */
.cierre{position:relative;isolation:isolate;overflow:hidden;background:#070708;border-top:1px solid var(--linea)}
.cierre__in{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:30px;min-height:560px}
.cierre__txt{padding:var(--sec) 0}
.cierre__title{font:900 clamp(2.8rem,6.4vw,5.6rem)/.88 var(--f-display);text-transform:uppercase}
.cierre__title em{font-style:italic;color:var(--rojo-txt)}
.cierre__media{align-self:stretch;position:relative;min-height:420px}
.cierre__media img{position:absolute;bottom:0;right:0;height:100%;width:auto;max-width:none;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(0deg,transparent 0,#000 18%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(0deg,transparent 0,#000 18%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* --- Auspiciadores --- */
.ausp{border-top:1px solid var(--linea);padding:34px 0;background:var(--fondo-2)}
.ausp__label{text-align:center;color:var(--texto-tenue);font:800 .72rem var(--f-display);letter-spacing:.3em;text-transform:uppercase;margin-bottom:22px}
.ausp__row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 54px}
.ausp__logo{height:52px;width:auto;opacity:.6;filter:grayscale(1);transition:.25s}
.ausp__logo:hover{opacity:1;filter:none}

/* ==================== 8. CABECERA DE PÁGINA ==================== */
.phead{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--linea);background:var(--fondo)}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,42,.13),transparent) 88% 0/60vw 60vw no-repeat}
.phead__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(40px,6vw,84px)}
.phead--compact .phead__in{grid-template-columns:minmax(0,1fr) auto;padding-top:clamp(34px,4.5vw,60px);padding-bottom:clamp(28px,3.5vw,44px);align-items:end}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:22px;font:800 .72rem/1 var(--f-display);
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto-tenue)}
.crumb a:hover{color:#fff}
.crumb .ico{width:13px;height:13px;stroke-width:2}
.phead__title{font-size:clamp(2.8rem,7vw,6.2rem);line-height:.88}
.phead--compact .phead__title{font-size:clamp(2.4rem,5.6vw,4.6rem)}
.phead__lead{color:var(--texto-suave);font-size:1.1rem;line-height:1.7;max-width:56ch;margin-top:22px}
.phead__lead b{color:var(--texto);font-weight:600}
.phead__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.phead__facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:30px;padding-top:20px;border-top:1px solid var(--linea)}
.phead__facts span{display:inline-flex;align-items:center;gap:9px;font:800 .76rem/1 var(--f-display);
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.phead__facts .ico{color:var(--rojo);width:18px;height:18px}
.phead__media{position:relative;margin:0;aspect-ratio:4/3.4;overflow:hidden;border-radius:var(--r);
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.phead__media img{width:100%;height:100%;object-fit:cover}
.phead__media--retrato{aspect-ratio:3/3.4}
.phead__media--retrato img{object-position:50% 12%}
.phead__media::after{content:"";position:absolute;left:9%;top:0;width:5px;height:100%;background:var(--rojo);
  transform-origin:top left;transform:skewX(-5.1deg)}
/* Bloques propios de cada cabecera (no todas se ven igual) */
.phead__extra{margin-top:28px}
.sede-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px}
.sede-pick a{display:block;padding:14px 16px;background:var(--superficie);border:1px solid var(--linea);border-left:3px solid var(--rojo);
  transition:border-color .2s,background .2s}
.sede-pick a:hover{background:var(--superficie-2)}
.sede-pick b{display:block;font:900 1.02rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.sede-pick span{color:var(--texto-suave);font-size:.86rem}

/* ==================== 9. HORARIO ==================== */
/* Filtros en tres pasos numerados (sede → disciplina → turno). Rediseño del
   10-sep-2026: la academia los encontraba «muy pequeños y difíciles de
   distinguir, más en el celular». Botones de 48 px, cada disciplina con su
   color y su número de clases, y una línea que dice qué se está viendo.
   No es fija: pegada bajo la navegación tapaba el cuadro. Lo que sí queda
   fijo al bajar son los nombres de los días (thead de la tabla). */
.hbar{position:relative;z-index:40;background:var(--fondo-2);border-bottom:1px solid var(--linea)}
.hbar__in{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"sede turno" "disc disc" "estado estado";
  gap:20px 40px;padding-top:24px;padding-bottom:18px}
.hbar__grupo{min-width:0}
.hbar__grupo--sede{grid-area:sede}
.hbar__grupo--disc{grid-area:disc}
.hbar__grupo--turno{grid-area:turno;justify-self:end}
.hbar__label{display:flex;align-items:center;gap:10px;margin-bottom:10px;font:800 .8rem/1 var(--f-display);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto)}
.hbar__label span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rojo);color:#fff;
  font:900 .8rem/1 var(--f-display);letter-spacing:0}
.hopts{display:flex;flex-wrap:wrap;gap:8px}
.hopt{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px;border:1.5px solid var(--linea-2);
  border-radius:var(--r);background:var(--superficie);color:var(--texto);text-align:left;
  font:800 .92rem/1.1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s,opacity .2s}
.hopt:hover{border-color:var(--texto-tenue);background:var(--superficie-2)}
.hopt b{font-weight:900;font-size:1rem}
.hopt small{display:block;font:700 .76rem/1.15 var(--f-text);letter-spacing:0;text-transform:none;color:var(--texto-suave)}
.hopt .ico{width:22px;height:22px;flex:none;color:var(--texto-suave)}
.hopts--sede .hopt{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:118px}
.hopts--turno .hopt{display:inline-grid;grid-template-columns:auto auto;align-content:center;justify-content:start;gap:2px 10px}
.hopts--turno .hopt .ico{grid-row:span 2}
.hopt[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0a0a0b}
.hopt[aria-pressed="true"] small,.hopt[aria-pressed="true"] .ico{color:#3d3c42}
/* Disciplina: la muestra de color es la del cuadro. Elegida, el botón entero
   se pinta de ese color, con la letra que da contraste (blanca u oscura). */
.hopt__sw{width:16px;height:16px;flex:none;border-radius:4px;background:var(--c,#fff)}
.hopt--disc[data-f-disc=""] .hopt__sw{background:conic-gradient(#4f8ff7 0 17%,#3fb56a 0 33%,#f05252 0 50%,#f59e2b 0 67%,#38b6d8 0 83%,#f2c94c 0)}
.hopt__n{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 7px;margin-left:2px;border-radius:12px;
  background:var(--fondo);font:900 .8rem/1 var(--f-display);color:var(--texto-suave);letter-spacing:0}
.hopt__n b{font-size:inherit}
.hopt--disc[aria-pressed="true"]:not([data-f-disc=""]){background:var(--rel);border-color:var(--rel);color:var(--tin)}
.hopt--disc[aria-pressed="true"] .hopt__n{background:rgba(0,0,0,.24);color:inherit}
.hopt--disc[aria-pressed="true"]:not([data-f-disc=""]) .hopt__sw{box-shadow:0 0 0 2px currentColor}
.hopt.is-cero:not([aria-pressed="true"]){opacity:.5}
.hbar__estado{grid-area:estado;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:14px;
  border-top:1px solid var(--linea);color:var(--texto-suave);font-size:.98rem;min-height:30px}
.hbar__estado b{color:#fff;font:900 1.1rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.hbar__reset{border:0;background:none;padding:6px 0;color:var(--rojo-txt);font:800 .82rem/1 var(--f-display);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
@media (max-width:1100px){
  .hbar__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"sede" "disc" "turno" "estado"}
  .hbar__grupo--turno{justify-self:stretch}
}
@media (max-width:760px){
  .hbar__in{gap:18px;padding-top:20px}
  .hopts--sede{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hopts--sede .hopt{min-width:0}
  .hopts--disc,.hopts--turno{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hopt{width:100%;padding:8px 12px}
  .hopt--disc[data-f-disc=""]{grid-column:1/-1}
  .hopt--disc .hopt__n{margin-left:auto}
}

/* Aviso de ahora / próxima clase */
.hnow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px;margin-bottom:22px;
  background:var(--superficie);border:1px solid var(--linea);border-left:3px solid var(--c,var(--rojo))}
.hnow:empty{display:none}
.hnow__k{font:800 .72rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;background:var(--rojo);color:#fff}
.hnow__k.is-live{background:var(--verde-wa);color:#04140a}
.hnow b{font:800 1.08rem/1.2 var(--f-display);text-transform:uppercase}
.hnow > span:not(.hnow__k){color:var(--texto-suave);font-size:.94rem}
.hnow button{margin-left:auto}

/* Cabecera de cada sede */
.hsede{padding-top:clamp(34px,5vw,60px)}
html.js .hsede:not(.is-on){display:none}
.hsede__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 30px;margin-bottom:26px}
.hsede__name{font:900 clamp(2.2rem,4.8vw,3.8rem)/.9 var(--f-display);text-transform:uppercase}
.hsede__name em{font-style:italic;color:var(--rojo-txt)}
.hsede__info{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;color:var(--texto-suave);font-size:.95rem}
.hsede__info span{display:inline-flex;align-items:center;gap:8px}
.hsede__info .ico{color:var(--rojo);width:18px;height:18px}
.hsede__acts{display:flex;flex-wrap:wrap;gap:10px}

/* Menú de descarga */
.hdl{position:relative}
.hdl summary{list-style:none}
.hdl summary::-webkit-details-marker{display:none}
.hdl__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:290px;padding:6px;
  background:var(--superficie-2);border:1px solid var(--linea-2);box-shadow:var(--sombra);border-radius:var(--r-lg)}
.hdl__menu--izq{left:0;right:auto}   /* lo pone main.js si anclado a la derecha se sale */
.hdl__menu button,.hdl__menu a{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;background:transparent;
  text-align:left;border-radius:var(--r);color:var(--texto)}
.hdl__menu button:hover,.hdl__menu a:hover{background:var(--superficie-3)}
.hdl__menu .ico{width:22px;height:22px;color:var(--rojo)}
.hdl__menu b{display:block;font:800 .86rem/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.hdl__menu small{display:block;color:var(--texto-tenue);font-size:.8rem;line-height:1.3}

/* Cuadro de escritorio: una tabla de verdad (encabezados de día y hora que
   un lector de pantalla anuncia en cada celda). Los turnos van en grupos
   separados con aire, como pidió la academia. */
/* Sin overflow en el contenedor: un contenedor con scroll anula el sticky, y
   lo que se quiere es que los nombres de los días acompañen al bajar. El
   cuadro sólo se muestra desde 981 px, donde siempre cabe. */
.htable-wrap{overflow:visible}
.htable thead th{position:sticky;top:calc(var(--nav-h) + 6px);z-index:5;box-shadow:0 -12px 0 var(--fondo)}
.htable{width:100%;min-width:900px;border-collapse:separate;border-spacing:6px;table-layout:fixed;margin:-6px}
.htable col.hc-hora{width:96px}
.htable thead th{padding:12px 6px;background:var(--superficie-2);font:900 .82rem/1 var(--f-display);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave);text-align:center;border-radius:var(--r)}
.htable thead th.hc-hora{background:transparent}
.htable thead th.is-hoy{background:var(--rojo);color:#fff}
/* «Hoy» en blanco pleno: al 75 % quedaba rosado sobre el rojo (3.2:1). */
.htable thead th small{display:block;font:800 .7rem/1 var(--f-display);letter-spacing:.14em;margin-top:5px;color:inherit}
.hturno th{padding:28px 0 6px;text-align:left}
.hturno:first-child th{padding-top:10px}
.hturno__t{display:flex;align-items:center;gap:14px;font:900 1.3rem/1 var(--f-display);font-style:italic;
  letter-spacing:.06em;text-transform:uppercase;color:#fff}
.hturno__t::before{content:"";width:28px;height:6px;background:var(--rojo);transform:skewX(-24deg)}
.hturno__t small{font:800 .76rem/1 var(--f-display);font-style:normal;letter-spacing:.12em;color:var(--texto-tenue)}
.hturno__t::after{content:"";flex:1;height:1px;background:var(--linea)}
.htable tbody th.hc-hora{vertical-align:top;text-align:left;padding:12px 4px 0 2px;font:900 1rem/1.05 var(--f-display);
  font-variant-numeric:tabular-nums;color:var(--texto)}
.htable tbody th.hc-hora small{display:block;font:700 .8rem var(--f-display);color:var(--texto-tenue);margin-top:3px}
.htable td{padding:0;vertical-align:top;height:1px}
.hcell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;height:100%;min-height:92px;
  padding:12px 12px 13px;border:0;border-top:3px solid var(--c);border-radius:var(--r);text-align:left;color:var(--texto);
  background:var(--superficie);background:color-mix(in oklab,var(--c) 15%,var(--superficie));
  transition:background .2s,opacity .25s,transform .2s var(--ease)}
.hcell:hover{background:color-mix(in oklab,var(--c) 27%,var(--superficie));transform:translateY(-2px)}
.hcell__t{font:900 1rem/1.02 var(--f-display);text-transform:uppercase;letter-spacing:.015em}
.hcell__n{font:800 .66rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.hcell__p{font-size:.8rem;line-height:1.3;color:var(--texto-suave);margin-top:auto;padding-top:4px}
.hcell__x{font:800 .72rem/1 var(--f-display);font-variant-numeric:tabular-nums;padding:4px 6px;background:rgba(0,0,0,.4);color:#fff}
/* --texto-suave y no --tenue: sobre el tinte amarillo de Kids el tenue daba 4.2:1. */
.hcell__nota{font-size:.74rem;color:var(--texto-suave)}
.hvacio{min-height:92px;height:100%;border-radius:var(--r);border-top:3px solid transparent;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 6px,transparent 6px 13px)}
.is-off{opacity:.14}
.hcell.is-off:hover{transform:none}
.htable tr.is-turno-off,.htable tbody.is-turno-off{display:none}

/* Lista del móvil: un día por vez, agrupado por turno */
.hmovil{display:none}
.hdias{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:18px}
.hdia{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 9px;border:1px solid var(--linea-2);
  border-radius:var(--r);background:var(--superficie);color:var(--texto-suave);position:relative}
.hdia b{font:900 .9rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.hdia span{font:700 .66rem/1 var(--f-display);letter-spacing:.08em;color:var(--texto-tenue)}
.hdia[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0a0a0b}
.hdia[aria-pressed="true"] span{color:#55545a}
.hdia.is-hoy::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--rojo)}
.hlist__dia{display:none}
.hlist__dia.is-on{display:block}
html:not(.js) .hlist__dia{display:block;margin-bottom:26px}
.hlist__dia > h3{font:900 1.6rem/1 var(--f-display);text-transform:uppercase;margin-bottom:6px}
.hlist__turno{margin-top:18px}
.hlist__turno h4{display:flex;align-items:center;gap:10px;font:900 1rem/1 var(--f-display);font-style:italic;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.hlist__turno h4::before{content:"";width:20px;height:5px;background:var(--rojo);transform:skewX(-24deg)}
.hlist__turno h4 small{font-style:normal;font-weight:700;color:var(--texto-tenue);letter-spacing:.06em}
.hitem{display:grid;grid-template-columns:66px 1fr auto;align-items:center;gap:12px;width:100%;margin-bottom:6px;
  padding:12px 12px 12px 14px;border:0;border-left:4px solid var(--c);border-radius:var(--r);text-align:left;color:var(--texto);
  background:var(--superficie);background:color-mix(in oklab,var(--c) 11%,var(--superficie))}
.hitem__h{font:900 .98rem/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.hitem__h small{display:block;font-size:.78rem;color:var(--texto-tenue);font-weight:700}
.hitem__t{font:900 1.04rem/1.05 var(--f-display);text-transform:uppercase;display:block}
.hitem__t em{font-style:normal;font-size:.7rem;letter-spacing:.12em;color:var(--texto-suave);margin-left:4px}
.hitem__p{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--texto-suave);margin-top:5px}
.hitem__p img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.hitem .ico{width:18px;height:18px;color:var(--texto-tenue)}
.hlist__vacio{color:var(--texto-tenue);padding:12px 0;font-size:.92rem}

.hnota{display:flex;gap:12px;align-items:flex-start;margin-top:34px;padding:16px 18px;border:1px solid var(--linea);
  color:var(--texto-suave);font-size:.92rem;max-width:760px}
.hnota .ico{color:var(--rojo);width:20px;height:20px;margin-top:2px}

/* Ficha de clase (se abre al tocar una clase) */
.csheet{border:0;padding:0;background:transparent;color:var(--texto);max-width:min(520px,94vw);width:100%;overflow:visible}
.csheet::backdrop{background:rgba(4,4,5,.8)}
.csheet__box{position:relative;background:var(--superficie);border-top:5px solid var(--c,var(--rojo));box-shadow:var(--sombra);border-radius:var(--r-lg)}
.csheet__close{position:absolute;top:10px;right:10px;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--linea-2);border-radius:var(--r);background:var(--superficie-2)}
.csheet__close .ico{width:20px;height:20px}
.csheet__head{padding:24px 60px 18px 24px}
.csheet__disc{display:flex;align-items:center;gap:8px;font:800 .74rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.csheet__title{font:900 2.1rem/.92 var(--f-display);text-transform:uppercase;margin-top:10px}
.csheet__when{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;color:var(--texto-suave);font-size:.95rem}
.csheet__when span{display:inline-flex;align-items:center;gap:8px}
.csheet__when .ico{color:var(--rojo);width:18px;height:18px}
.csheet__prof{display:flex;align-items:center;gap:14px;padding:16px 24px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--fondo-2)}
.csheet__prof img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.csheet__prof b{display:block;font:900 1.15rem/1 var(--f-display);text-transform:uppercase}
.csheet__prof small{display:block;font:900 .72rem var(--f-display);font-style:italic;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo-txt);margin-top:5px}
.csheet__prof span{display:block;color:var(--texto-suave);font-size:.86rem;margin-top:3px}
.csheet__body{padding:18px 24px 24px;display:grid;gap:10px}
.csheet__body p{color:var(--texto-suave);font-size:.92rem}
.csheet__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (prefers-reduced-motion:no-preference){
  .csheet[open]{animation:sheet .3s var(--ease)}
  @keyframes sheet{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* ==================== 10. PÁGINAS INTERNAS ==================== */
/* Relato a dos columnas (Nosotros, detalle de disciplina, contacto) */
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.split--top{align-items:start}
.split__media{position:relative;margin:0;border-radius:var(--r);overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media figcaption{position:absolute;left:14px;bottom:14px}
.split__body .sec-title{margin-bottom:6px}
.split__body .lead + .lead{margin-top:16px}

/* Objetivos */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vcard{background:var(--superficie);border:1px solid var(--linea);padding:28px 24px;border-radius:var(--r);transition:border-color .25s,transform .25s var(--ease)}
.vcard:hover{border-color:var(--linea-2);transform:translateY(-4px)}
.vcard .ico{width:34px;height:34px;color:var(--rojo);stroke-width:1.5;margin-bottom:18px}
.vcard h3{font:900 1.3rem/1.05 var(--f-display);text-transform:uppercase;margin-bottom:10px}
.vcard p{color:var(--texto-suave);font-size:.95rem;line-height:1.6}


/* Galería (Comunidad) */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:10px}
.gcard{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--superficie)}
.gcard:first-child{grid-column:span 2;grid-row:span 2}
/* Con 8 fotos (la primera ocupa 2×2) quedaba un hueco al final: la última se ensancha. */
@media (min-width:421px){.gallery .gcard:nth-child(8):last-child{grid-column:span 2}}
.gcard a{display:block;width:100%;height:100%}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gcard:hover img{transform:scale(1.05)}
.gcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,6,7,.85),rgba(6,6,7,0) 50%)}
.gcard figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;pointer-events:none;
  font:900 .95rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.04em}

/* Fotos de la clase por sede (detalle de disciplina) */
.clase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.clase-card{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--superficie)}
.clase-card a{display:block;aspect-ratio:16/10}
.clase-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.clase-card:hover img{transform:scale(1.04)}
.clase-card figcaption{position:absolute;left:14px;bottom:14px}

/* Horario de una disciplina (detalle) */
.dh{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dh__sede{background:var(--superficie);border:1px solid var(--linea);padding:22px}
.dh__sede h3{font:900 1.4rem/1 var(--f-display);text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dh__list{list-style:none;display:grid;gap:6px}
.dh__list li{display:grid;grid-template-columns:48px 96px 1fr;gap:10px;align-items:baseline;padding:9px 12px;background:var(--superficie-2);border-left:3px solid var(--c)}
.dh__list b{font:900 .86rem var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.dh__list time{font:800 .9rem var(--f-display);font-variant-numeric:tabular-nums}
.dh__list span{color:var(--texto-suave);font-size:.88rem}

/* Contacto */
.pasos{list-style:none;counter-reset:paso;display:grid;gap:18px;margin-top:26px}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:52px 1fr;gap:4px 16px}
.pasos li::before{content:"0" counter(paso);grid-row:span 2;font:900 2.1rem/1 var(--f-display);font-style:italic;color:var(--rojo-txt)}
.pasos b{font:900 1.12rem/1.1 var(--f-display);text-transform:uppercase}
.pasos span{color:var(--texto-suave);font-size:.95rem;line-height:1.6}
.pasos__pie{display:flex;align-items:center;gap:12px;margin-top:26px;padding:14px 16px;border-left:3px solid var(--rojo);background:var(--superficie);color:var(--texto)}
.pasos__pie .ico{color:var(--rojo);width:22px;height:22px}
.vf-form{background:var(--superficie);border:1px solid var(--linea);padding:clamp(22px,3vw,34px);border-radius:var(--r);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.vf-form__h{font:900 1.7rem/1 var(--f-display);text-transform:uppercase;margin-bottom:6px}
.vf-form__sub{color:var(--texto-suave);font-size:.95rem;margin-bottom:20px}
.vf-form label{display:block;font:800 .72rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin:14px 0 8px}
.vf-form input,.vf-form textarea,.vf-form select{width:100%;padding:14px 15px;background:var(--fondo);border:1px solid var(--linea-2);
  border-radius:var(--r);color:var(--texto);font:inherit;font-size:1rem}
.vf-form input:focus,.vf-form textarea:focus,.vf-form select:focus{outline:2px solid var(--rojo);outline-offset:0;border-color:var(--rojo)}
.vf-form__enviar{width:100%;margin-top:18px}
.vf-form__trampa{position:absolute!important;left:-9999px;width:1px;height:1px}
.form-msg{color:var(--texto-suave);font-size:.9rem;margin-top:12px;min-height:22px}
.faq{max-width:860px;display:grid;gap:8px}
.faq__item{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;font:900 1.08rem/1.25 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--rojo-txt);border-bottom:2px solid var(--rojo-txt);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease)}
.faq__item[open] summary::after{transform:rotate(225deg)}
.faq__item p{padding:0 20px 20px;color:var(--texto-suave);line-height:1.7}

/* Blog */
.post-dest{display:grid;grid-template-columns:1.15fr .85fr;background:var(--superficie);border:1px solid var(--linea);overflow:hidden;
  border-radius:var(--r);margin-bottom:18px;transition:border-color .25s}
.post-dest:hover{border-color:var(--linea-2)}
.post-dest__img{aspect-ratio:16/10;overflow:hidden}
.post-dest__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-dest:hover .post-dest__img img{transform:scale(1.03)}
.post-dest__body{padding:clamp(22px,3vw,42px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.post-dest__body h2{font:900 clamp(1.7rem,2.8vw,2.5rem)/.98 var(--f-display);text-transform:uppercase}
.post-dest__body p{color:var(--texto-suave)}
/* auto-fit: con dos notas, las dos llenan la fila (no queda una columna vacía) */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.post-card{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease)}
.post-card:hover{border-color:var(--linea-2);transform:translateY(-4px)}
.post-card__img{aspect-ratio:16/10;overflow:hidden;display:block}
.post-card__img img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h3{font:900 1.3rem/1.02 var(--f-display);text-transform:uppercase}
.post-card p{color:var(--texto-suave);font-size:.94rem;flex:1}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:800 .72rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-tenue)}
.meta .ico{color:var(--rojo);width:15px;height:15px}
.entrada{max-width:780px;margin:0 auto}
.entrada__img{margin:0 0 30px;border-radius:var(--r);overflow:hidden}
.entrada__body{color:#d2d1d6;font-size:1.1rem;line-height:1.85}
.entrada__body p + p{margin-top:20px}

/* Lightbox (galería) */
.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:95vh;overflow:visible;color:var(--texto)}
.lb::backdrop{background:rgba(4,4,5,.94)}
.lb img{max-width:min(1300px,94vw);max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
.lb__cap{margin-top:12px;text-align:center;font:800 .8rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.lb__close{position:absolute;top:-18px;right:-18px;width:46px;height:46px;border-radius:50%;background:var(--rojo);color:#fff;border:0;display:grid;place-items:center}
.lb__close .ico{width:22px;height:22px;stroke-width:2.2}
.js-zoom{cursor:zoom-in}

/* ==================== 11. PIE ==================== */
.footer{background:#060607;border-top:1px solid var(--linea)}
.footer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:54px;padding-bottom:40px;border-bottom:1px solid var(--linea)}
.footer__brand{display:flex;align-items:center;gap:22px}
.footer__brand img{height:92px;width:auto}
.footer__lema{font:900 clamp(1.5rem,2.6vw,2.2rem)/.95 var(--f-display);text-transform:uppercase}
.footer__lema em{font-style:italic;color:var(--rojo-txt)}
.footer__grid{display:grid;grid-template-columns:1.25fr 1.25fr .8fr .9fr;gap:34px;padding-top:44px;padding-bottom:44px}
.footer h2{font:900 .8rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-tenue);margin-bottom:18px}
.footer__sede b{display:block;font:900 1.2rem/1 var(--f-display);text-transform:uppercase;margin-bottom:10px}
.footer__sede p{display:flex;gap:10px;color:var(--texto-suave);font-size:.92rem;line-height:1.5;margin-bottom:8px}
.footer__sede .ico{color:var(--rojo);width:17px;height:17px;margin-top:3px}
.footer__sede a{color:var(--texto)}
.footer__sede a:hover{color:var(--rojo-txt)}
.footer__links{display:grid;gap:9px}
.footer__links a{color:var(--texto-suave);font-size:.94rem;transition:color .2s}
.footer__links a:hover{color:#fff}
.footer__social{display:flex;gap:8px;margin-bottom:18px}
.footer__social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linea-2);border-radius:var(--r);transition:.2s}
.footer__social a:hover{border-color:#fff;transform:translateY(-2px)}
.footer__social .ico{width:20px;height:20px}
.footer__bar{border-top:1px solid var(--linea);padding:20px 0}
/* Tres piezas: el © a la izquierda, el crédito de webclicstudio justo al centro y el lema a la derecha */
.footer__bar-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 20px;color:var(--texto-tenue);font-size:.84rem}
.footer__bar-in > :last-child{justify-self:end;text-align:right}
.footer__credito{display:inline-flex;align-items:center;gap:6px;color:inherit;transition:color .2s}
.footer__credito .ico{width:14px;height:14px;transition:transform .2s var(--ease),color .2s}
.footer__credito:hover{color:#fff}
.footer__credito:hover .ico{color:var(--rojo-txt);transform:translateX(3px)}
@media (max-width:760px){
  .footer__bar-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .footer__bar-in > :last-child{justify-self:center;text-align:center}
}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--verde-wa);color:#04140a;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.wa-float:hover{transform:scale(1.06)}
.wa-float .ico{width:30px;height:30px;stroke-width:1.8}

/* ==================== 12. UTILIDADES Y MOVIMIENTO ==================== */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js .reveal.is-in{opacity:1;transform:none}
@view-transition{navigation:auto}
.nav{view-transition-name:vf-nav}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .2s ease-in both}
  ::view-transition-new(root){animation:vt-in .35s var(--ease) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none}
}

/* ==================== 13. RESPONSIVE ==================== */
@media (max-width:1180px){
  .nav__menu > a{padding:10px 8px;letter-spacing:.08em}
  .nav__menu > a[aria-current]::after{left:8px;right:8px}
}
@media (max-width:1100px){
  :root{--nav-h:70px}
  .nav__logo{--logo:46px}
  .nav--over:not(.is-scrolled) .nav__logo{--logo:84px;margin-top:8px}
  /* Con el menú abierto el logo grande taparía la primera opción */
  body.menu-open .nav .nav__logo{--logo:46px;margin-top:calc((var(--nav-h) - var(--logo)) / 2)}
  .nav__toggle{display:inline-flex}
  .nav__cta{margin-left:0}
  /* Menú a pantalla completa: letras grandes, fácil de tocar con el pulgar */
  .nav__menu{position:fixed;inset:var(--nav-h) 0 0 0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--fondo);padding:10px var(--gutter) 28px;overflow-y:auto;visibility:hidden;opacity:0;
    transform:translateY(-10px);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
  .nav__menu.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .3s var(--ease)}
  .nav__menu > a{font-size:clamp(1.7rem,6.4vw,2.4rem);letter-spacing:.01em;color:var(--texto);padding:13px 0;border-bottom:1px solid var(--linea)}
  .nav__menu > a[aria-current]{color:var(--rojo-txt)}
  .nav__menu > a[aria-current]::after{display:none}
  .nav__extra{display:grid;gap:10px;margin-top:26px}
  .nav__extra p{color:var(--texto-tenue);font:800 .72rem var(--f-display);letter-spacing:.18em;text-transform:uppercase}
  body.menu-open{overflow:hidden}
  .disc-grid{grid-template-columns:repeat(2,1fr)}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .zrf__in{grid-template-columns:1fr}
}
@media (max-width:980px){
  /* El cuadro de 6 columnas no cabe: pasa a un día por vez */
  .htable-wrap{display:none}
  .hmovil{display:block}
  /* minmax(0,1fr) y no 1fr: `1fr` no baja del ancho mínimo de su contenido,
     y una fila ancha dentro de la cabecera la ensanchaba más allá de la
     pantalla a 390 px (el texto quedaba cortado a la derecha). */
  .phead__in{grid-template-columns:minmax(0,1fr)}
  .phead__media{max-height:360px;aspect-ratio:16/10;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .phead__media::after{display:none}
  .phead--compact .phead__in{grid-template-columns:minmax(0,1fr);align-items:start}
  .split{grid-template-columns:minmax(0,1fr)}
  /* Aquí el botón «Descargar» queda a la izquierda: anclado a la derecha, el
     menú se salía 60–70 px de la pantalla por ese lado. */
  .hdl__menu{left:0;right:auto;min-width:0;width:min(300px,calc(100vw - 36px))}
  .venues{grid-template-columns:1fr}
  .cierre__in{grid-template-columns:1fr;min-height:0}
  .cierre__txt{padding-bottom:0}
  .cierre__media{min-height:0;height:420px;margin:0 calc(var(--gutter) * -1)}
  .cierre__media img{right:50%;transform:translateX(50%)}
  .post-dest{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .dh{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
}
@media (max-width:760px){
  body{font-size:16px}
  /* Hero en móvil: el cartel (3 peleadores) arriba con su proporción y el
     texto debajo, montado sobre el borde inferior de la foto. */
  /* La proporción de cada imagen de móvil llega en --ar-m / --k-m (alto/ancho):
     el cartel es 3:4; las composiciones con fotos de grupo, 4:3. */
  .hero{min-height:0;display:block}
  .hero__media{position:relative;inset:auto;aspect-ratio:var(--ar-m,3/4);width:100%}
  .hero__shade{bottom:auto;height:calc(100vw * var(--k-m,1.3333));
    background:linear-gradient(0deg,#070708 0,rgba(7,7,8,.9) 20%,rgba(7,7,8,0) 48%),
    linear-gradient(180deg,rgba(7,7,8,.7) 0,rgba(7,7,8,0) 18%)}
  .hero__in{padding-top:0;margin-top:calc(-100vw * var(--k-m,1.3333) * .26)}
  .hero__title-main{font-size:clamp(2.7rem,13.4vw,4.2rem);line-height:.9}
  .hero__title-main span{display:block}
  .hero__row{grid-template-columns:1fr}
  .hero__actions{justify-content:stretch}
  .hero__actions .btn{flex:1 1 100%}
  .disc-grid{grid-template-columns:1fr}
  .dcard{aspect-ratio:4/4.3}
  .vgrid{grid-template-columns:1fr 1fr}
  .zrf__stats{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__brand{flex-direction:column;align-items:flex-start;gap:14px}
  .blog-grid{grid-template-columns:1fr}
  .sede-pick{grid-template-columns:1fr}
  .hsede__acts{width:100%}
  .hsede__acts > *{flex:1 1 auto}
  .csheet{margin:auto auto 0;max-width:100%}
  .csheet__box{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .csheet__row{grid-template-columns:1fr}
  .roster__nav{display:none}
}
@media (max-width:420px){
  .hdia b{font-size:.8rem}
  .seg__b{padding:10px 12px}
  .gallery{grid-template-columns:1fr;grid-auto-rows:220px}
  .gcard:first-child{grid-column:auto;grid-row:auto}
}
/* ==================== 14. PORTADA ORDENADA (v4.1) ====================
   Pedido de la agencia: «que el home tenga más orden». La portada se lee
   como capítulos numerados:
     hero → índice 01–04 al pie (mapa de la página y, a la vez, las cifras)
     01 Disciplinas · 02 Horario · 03 Equipo · 04 Sedes · 05 ZRF · 06 Empieza
   La cabecera es la «Editorial» (sección 22) cuando está procesada la imagen del
   diseñador. Si falta, queda este modo:
     .portada--marca  el escudo oficial grande
                      (la composición de la página «en construcción»)
   El cartel del equipo ahora abre el capítulo 03 y es el hero de Profesores
   (que sigue usando las reglas .hero de la sección 6). */
.portada{position:relative;isolation:isolate;overflow:hidden;background:#070708;
  display:flex;flex-direction:column;min-height:min(100svh,960px)}
.portada__in{flex:1;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(24px,4vw,56px));padding-bottom:clamp(28px,4vw,52px)}
.portada__in > *{width:100%}
.portada__h1{margin:0}
.portada__kicker{display:flex;align-items:center;gap:14px;margin-bottom:20px;text-wrap:balance;
  font:800 clamp(.74rem,1vw,.86rem)/1.3 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--texto)}
.portada__kicker::before{content:"";width:34px;height:6px;background:var(--rojo);transform:skewX(-24deg);flex:none}
.portada__titulo{display:block;font:900 clamp(3.3rem,7.2vw,7.4rem)/.86 var(--f-display);text-transform:uppercase;letter-spacing:.005em}
.portada__titulo > span{display:block}
.portada__titulo em{font-style:italic;color:var(--rojo-txt);padding-right:.04em}
.portada__lead{color:#d6d5d9;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.65;max-width:48ch;margin-top:26px}
.portada__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Modo marca: escudo a la izquierda, texto a la derecha */
.portada--marca::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(closest-side,rgba(225,29,42,.30),rgba(225,29,42,.07) 58%,transparent) 18% 55%/min(1000px,95vw) min(1000px,95vw) no-repeat,
  radial-gradient(closest-side,rgba(225,29,42,.09),transparent) 100% 0/60vw 60vw no-repeat,
  linear-gradient(180deg,#0c0b0c,#070708 70%)}
.portada__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:center}
.portada__escudo{justify-self:center;width:min(500px,100%)}
.portada__escudo img{width:100%;height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.7))}
/* Los dos cortes diagonales de los cuadros de horario del cliente */
.portada__corte{position:absolute;z-index:-1;pointer-events:none;height:5px;background:var(--rojo);
  transform:rotate(-38deg);box-shadow:0 18px 0 -1px rgba(225,29,42,.45)}
.portada__corte--a{width:230px;right:-46px;top:20%}
.portada__corte--b{width:190px;left:-56px;bottom:32%}

/* Con la escena del diseñador, la portada es la «Editorial»: sección 22. */

/* Rótulo numerado de cada capítulo */
.kicker--num::before{display:none}
.kicker__n{display:inline-flex;align-items:center;gap:12px;font:italic 900 1.05rem/1 var(--f-display);letter-spacing:.04em;color:var(--rojo-txt)}
.kicker__n::after{content:"";width:28px;height:2px;background:var(--linea-2)}
.zrf .kicker__n{color:#fff}
.zrf .kicker__n::after{background:rgba(255,255,255,.5)}

/* 01 · Disciplinas: ver la sección 19 (una a la vez) */

/* 03 · El equipo: el cartel abre el capítulo */
.equipo{background:var(--fondo)}
.cartel{position:relative;isolation:isolate;overflow:hidden;background:#070708;height:clamp(440px,52vw,720px)}
.cartel picture{position:absolute;inset:0;z-index:-2}
.cartel img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.cartel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(0deg,var(--fondo) 0,rgba(8,8,10,.94) 20%,rgba(8,8,10,.45) 40%,rgba(8,8,10,0) 58%),
  linear-gradient(180deg,var(--fondo-2) 0,rgba(12,12,14,0) 14%)}
.cartel__txt{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(20px,3vw,34px)}
.cartel__txt .sec-head{margin-bottom:0}
.equipo__roster{padding-top:clamp(22px,3vw,36px);padding-bottom:var(--sec)}
/* Los cuatro principales en grande (el fundador está en el cartel) y, debajo,
   las caras del resto: todo el capítulo baja, nada se desliza de lado. */
.principales{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.equipo__mas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;
  margin-top:24px;padding-top:24px;border-top:1px solid var(--linea)}
.caras{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;color:var(--texto-suave)}
.caras__fila{display:flex}
.caras__fila span{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--fondo);margin-left:-13px;background:var(--superficie-2)}
.caras__fila span:first-child{margin-left:0}
.caras__fila img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.caras__pie{font-size:.96rem;line-height:1.45}
.caras__pie b{display:block;color:#fff;font:900 1.06rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.02em;transition:color .2s}
.caras:hover .caras__pie b{color:var(--rojo-txt)}

/* Cabeceras de página (vf_hero_pagina): una composición propia por página,
   con las reglas .hero de la sección 6. «abajo» = retratos (el titular al pie,
   como un cartel); «lado» = fotos de grupo (titular a la izquierda). */
.hero--pagina{min-height:min(88svh,880px)}
.hero--pagina .hero__in{padding-top:calc(var(--nav-h) + 30vh)}
.hero--pagina .crumb{margin-bottom:18px}
.hero--pagina .hero__title-main{font-size:clamp(2.9rem,6.8vw,7.2rem)}
.hero--corta{min-height:min(68svh,660px)}
.hero--corta .hero__in{padding-top:calc(var(--nav-h) + 16vh)}
.hero--lado{justify-content:center}
.hero--lado .hero__in{padding-top:calc(var(--nav-h) + 48px);padding-bottom:clamp(44px,6vw,84px)}
.hero--lado .hero__txt{max-width:660px}
.hero--lado .hero__row{grid-template-columns:minmax(0,1fr)}
.hero--lado .hero__actions{justify-content:flex-start}
.hero--lado .hero__title-main{font-size:clamp(2.8rem,5.4vw,5.6rem);line-height:.9}
.hero--lado .hero__media img{object-position:62% 50%}
.hero--lado .hero__shade{background:
  linear-gradient(90deg,rgba(7,7,8,.95) 0,rgba(7,7,8,.82) 30%,rgba(7,7,8,.32) 58%,rgba(7,7,8,0) 76%),
  linear-gradient(0deg,#070708 0,rgba(7,7,8,0) 24%),
  linear-gradient(180deg,rgba(7,7,8,.62) 0,rgba(7,7,8,0) 20%)}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.hero__facts span{display:inline-flex;align-items:center;gap:9px;font:800 .76rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#d6d5d9}
.hero__facts .ico{width:18px;height:18px;color:var(--rojo)}
.hero__pie{margin-top:16px;color:var(--texto-suave);font-size:.92rem}
/* Rótulos sobre la imagen (el nombre de cada sede sobre su mitad) */
.hero__rotulo{position:absolute;top:calc(var(--nav-h) + 26px);transform:translateX(-50%);padding:9px 15px;white-space:nowrap;
  background:rgba(7,7,8,.74);border:1px solid rgba(255,255,255,.22);font:900 .84rem/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#fff}

/* Recuerdo del fundador en Profesores: sobrio, sin rojo */
.memoria{display:flex;align-items:center;gap:16px;max-width:680px;margin-top:22px;padding:14px 18px;background:#0b0b0c;
  border:1px solid var(--linea);border-radius:var(--r);color:var(--texto-suave);transition:border-color .2s}
.memoria:hover{border-color:var(--linea-2)}
.memoria picture{flex:none}
.memoria img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.memoria b{display:block;color:#e9e8e6;font:900 1rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.memoria span{font-size:.93rem;line-height:1.45}

/* 06 · Empieza: los cuatro pasos dentro del cierre */
.pasos-h{list-style:none;counter-reset:paso;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px;margin:30px 0 34px;max-width:720px}
.pasos-h li{counter-increment:paso;display:grid;grid-template-columns:46px minmax(0,1fr);gap:4px 12px}
.pasos-h li::before{content:"0" counter(paso);grid-row:1/span 2;font:italic 900 2rem/1 var(--f-display);color:var(--rojo-txt)}
.pasos-h b{font:900 1.08rem/1.1 var(--f-display);text-transform:uppercase}
.pasos-h span{color:var(--texto-suave);font-size:.94rem;line-height:1.55}

/* Barra fija del móvil: las dos acciones en la zona del pulgar (sustituye
   al botón flotante de WhatsApp en pantallas chicas). */
.barra-movil{display:none}

@media (prefers-reduced-motion:no-preference){
  html.js .portada__titulo > span{animation:sube .9s var(--ease) both}
  html.js .portada__titulo > span:nth-child(2){animation-delay:.08s}
  html.js .portada__titulo > span:nth-child(3){animation-delay:.16s}
  html.js .portada__escudo{animation:aparece 1.1s var(--ease) both}
  html.js .portada__lead,html.js .portada__acciones,html.js .portada__kicker{animation:aparece .9s .3s var(--ease) both}
}
@media (max-width:1100px){
  .principales{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .portada__grid{grid-template-columns:minmax(0,1fr)}
  .portada__escudo{justify-self:start;width:min(300px,62vw)}
}
@media (max-width:760px){
  .portada{min-height:0}
  .portada__in{padding-top:calc(var(--nav-h) + 22px)}
  .portada__escudo{width:min(230px,56vw)}
  .portada__titulo{font-size:clamp(2.9rem,14vw,4.4rem);line-height:.9}
  .portada__acciones .btn{flex:1 1 100%}
  .portada__corte{display:none}
  .principales{gap:10px}
  .principales .coach__top .tag + .tag{display:none}
  .equipo__mas{flex-direction:column;align-items:stretch}
  .caras__fila span{width:40px;height:40px;margin-left:-11px}
  /* El cartel en el móvil: la foto (3 peleadores) arriba con su proporción y
     el texto debajo, montado sobre su borde (como el hero de Profesores). Encima
     de las camisetas, el rótulo rojo se perdía. */
  .cartel{height:auto;display:flex;flex-direction:column}
  .cartel picture{position:relative;inset:auto;display:block;aspect-ratio:3/4;width:100%}
  .cartel img{object-position:50% 0}
  .cartel::after{bottom:auto;height:calc(100vw * 4 / 3);background:
    linear-gradient(0deg,var(--fondo) 0,rgba(8,8,10,.9) 16%,rgba(8,8,10,0) 42%),
    linear-gradient(180deg,var(--fondo-2) 0,rgba(12,12,14,0) 14%)}
  .cartel__txt{position:relative;margin-top:-24vw}
  .pasos-h{grid-template-columns:minmax(0,1fr)}
  .equipo__nav p{display:none}
  .hero--pagina .hero__in,.hero--lado .hero__in,.hero--corta .hero__in{padding-top:0}
  .hero--pagina .hero__title-main,.hero--lado .hero__title-main{font-size:clamp(2.5rem,12vw,3.9rem);line-height:.92}
  .hero--lado .hero__media img{object-position:50% 50%}
  .hero--lado .hero__shade{background:linear-gradient(0deg,#070708 0,rgba(7,7,8,.9) 20%,rgba(7,7,8,0) 50%),
    linear-gradient(180deg,rgba(7,7,8,.7) 0,rgba(7,7,8,0) 22%)}
  .hero__rotulo{top:calc(var(--nav-h) + 10px);padding:6px 10px;font-size:.68rem;letter-spacing:.14em}
  .memoria{align-items:flex-start}
  .barra-movil{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(8,8,10,.96);border-top:1px solid var(--linea);
    transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
  .barra-movil.is-on{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  .barra-movil .btn{--pad:14px 10px;font-size:.8rem;letter-spacing:.06em}
  .wa-float{display:none}
  body:has(.barra-movil){padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ==================== 15. IMÁGENES DEL DISEÑADOR: UN LADO DE LA CABECERA ====================
   portada2 (Disciplinas) va de UN LADO de la cabecera, no a sangre (lo aclaró
   el cliente, 11-sep-2026): a su tamaño real (~1024×900), pegada al borde de la
   pantalla y fundida hacia el texto, que va del otro lado; en el móvil, arriba
   y entera. El lado lo dice el script (cabeceras.json: panel «izq» o «der»).
   La de Inicio tiene su propia puesta en escena: sección 22. */
/* Páginas (vf_hero_pagina con imagen de un lado): hero--panel-izq / -der */
.hero--panel{min-height:min(86svh,860px);justify-content:center}
.hero--panel-der .hero__media{inset:0 0 0 auto;width:min(58vw,1024px)}
.hero--panel-izq .hero__media{inset:0 auto 0 0;width:min(54vw,1024px)}
.hero--panel .hero__media img{object-position:50% 38%}
.hero--panel-der .hero__media img{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 16%,#000 36%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 16%,#000 36%)}
.hero--panel-izq .hero__media img{-webkit-mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.55) 20%,#000 42%);
  mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.55) 20%,#000 42%)}
.hero--panel .hero__shade{background:
  radial-gradient(closest-side,rgba(225,29,42,.16),rgba(225,29,42,0)) 86% 56%/60vw 60vw no-repeat,
  linear-gradient(0deg,#070708 0,rgba(7,7,8,0) 22%),linear-gradient(180deg,rgba(7,7,8,.62) 0,rgba(7,7,8,0) 16%)}
.hero--panel-der .hero__shade{background:
  radial-gradient(closest-side,rgba(225,29,42,.16),rgba(225,29,42,0)) 14% 56%/60vw 60vw no-repeat,
  linear-gradient(0deg,#070708 0,rgba(7,7,8,0) 22%),linear-gradient(180deg,rgba(7,7,8,.62) 0,rgba(7,7,8,0) 16%)}
.hero--panel .hero__in{padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(40px,5vw,72px)}
.hero--panel .hero__txt{max-width:min(600px,42vw)}
.hero--panel-izq .hero__txt{margin-left:auto}
.hero--panel .hero__row{grid-template-columns:minmax(0,1fr)}
.hero--panel .hero__actions{justify-content:flex-start}
.hero--panel .hero__title-main{font-size:clamp(2.8rem,5vw,5.4rem);line-height:.9}
/* Menos aire entre una cabecera de página y su primera sección */
.hero--pagina + .section,.hero2 + .section{padding-top:clamp(44px,5.5vw,84px)}
@media (max-width:760px){
  /* La imagen empieza bajo la barra de navegación (encima tapaba caras) y la
     cabecera mide lo que su contenido: en el móvil no hay alto mínimo. */
  .hero--pagina{padding-top:var(--nav-h)}
  .hero--pagina,.hero--panel{min-height:0}
  .hero--pagina .hero__shade{top:var(--nav-h)}
  .hero--panel .hero__media{position:relative;inset:auto;width:100%;aspect-ratio:var(--ar-m,4/5)}
  .hero--panel .hero__media img{-webkit-mask-image:none;mask-image:none}
  .hero--panel .hero__shade,.hero--panel-der .hero__shade{background:linear-gradient(0deg,#070708 0,rgba(7,7,8,.88) 18%,rgba(7,7,8,0) 46%)}
  .hero--panel .hero__txt{max-width:none}
  .hero--panel-izq .hero__txt{margin-left:0}
}

/* ==================== 16. SEDES (sedes.php) ====================
   Cada sede, completa: qué se entrena ahí (con su nº de clases, que lleva al
   horario ya filtrado), la próxima clase, el horario de atención por día, quién
   da clases, fotos de sus clases y el mapa (Google sólo si se pide). */
.sede-det__head{display:grid;gap:20px;margin-bottom:24px}
.sede-det__name{font:900 clamp(2.4rem,5.4vw,4.6rem)/.88 var(--f-display);text-transform:uppercase}
.sede-det__dir{display:flex;align-items:flex-start;gap:10px;margin-top:14px;color:var(--texto-suave);font-size:1.02rem}
.sede-det__dir b{color:var(--texto);font-weight:600}
.sede-det__dir .ico{color:var(--rojo);width:20px;height:20px;margin-top:2px;flex:none}
.sede-det__acts{display:flex;flex-wrap:wrap;gap:10px}
.sede-det__prox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:30px;padding:14px 18px;
  background:var(--superficie);border:1px solid var(--linea);border-left:3px solid var(--c,var(--rojo));border-radius:var(--r)}
.sede-det__k{font:800 .72rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;background:var(--rojo-osc);color:#fff}
.sede-det__k.is-live{background:var(--verde-wa);color:#04140a}
.sede-det__prox b{font:900 1.05rem/1.2 var(--f-display);text-transform:uppercase}
.sede-det__prox > span:last-child{color:var(--texto-suave);font-size:.94rem}
.sede-det__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,60px);align-items:start}
.sede-det__bloque + .sede-det__bloque{margin-top:32px}
.sede-det__h{display:flex;align-items:center;gap:12px;font:900 1rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.sede-det__h::before{content:"";width:22px;height:5px;background:var(--rojo);transform:skewX(-24deg)}
.sede-discs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sede-discs a{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 14px;background:var(--superficie);
  border:1px solid var(--linea);border-left:4px solid var(--c);border-radius:var(--r);transition:background .2s}
.sede-discs a:hover{background:color-mix(in oklab,var(--c) 14%,var(--superficie))}
.sede-discs b{flex:1;font:900 1rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.sede-discs small{font:800 .72rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);white-space:nowrap}
.sede-horas{width:100%;border-collapse:separate;border-spacing:0 5px}
.sede-horas th,.sede-horas td{padding:11px 14px;background:var(--superficie);text-align:left}
.sede-horas th{width:36%;font:900 .86rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.08em;border-left:3px solid var(--linea-2)}
.sede-horas td{font:800 .92rem/1.3 var(--f-display);font-variant-numeric:tabular-nums;color:var(--texto-suave)}
.sede-horas tr.is-hoy th{border-left-color:var(--rojo)}
.sede-horas tr.is-hoy td{color:#fff}
.sede-horas small{display:inline-block;margin-left:8px;padding:3px 6px;background:var(--rojo-osc);color:#fff;font-size:.62rem;letter-spacing:.12em;vertical-align:1px}
.sede-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sede-fotos figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--superficie);aspect-ratio:4/3}
.sede-fotos figure:first-child{grid-column:1/-1;aspect-ratio:16/9}
.sede-fotos a{display:block;height:100%}
.sede-fotos img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sede-fotos a:hover img{transform:scale(1.04)}
.sede-fotos figcaption{position:absolute;left:10px;bottom:10px;pointer-events:none}
/* El mapa de Google va puesto (20-sep-2026); el fondo gris se ve sólo mientras carga */
.mapa{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--linea);border-radius:var(--r);background:#e5e3df}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:980px){
  .sede-det__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sede-det__acts{width:100%}
  .sede-det__acts .btn{flex:1 1 100%}
  .sede-discs{grid-template-columns:minmax(0,1fr)}
  .mapa{aspect-ratio:4/3}
}

/* ==================== 17. BLOG Y NOTAS ====================
   blog.php: la nota más reciente es la portada (tipo revista).
   entrada.php: lectura cómoda (68 caracteres por línea), compartir por
   WhatsApp/Facebook/enlace, y la clase de prueba a la vista sin interrumpir. */
.bhero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--linea);background:var(--fondo)}
.bhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,42,.14),transparent) 88% 10%/60vw 60vw no-repeat}
.bhero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"txt media" "nota media";
  gap:24px clamp(28px,4.5vw,72px);align-items:end;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(36px,5vw,72px)}
.bhero__txt{grid-area:txt;align-self:start}
.bhero__h1{font:900 clamp(2.6rem,5.8vw,5.2rem)/.88 var(--f-display);text-transform:uppercase}
.bhero__h1 em{font-style:italic;color:var(--rojo-txt)}
.bhero__lead{color:var(--texto-suave);font-size:1.08rem;line-height:1.65;margin-top:18px;max-width:46ch}
.bhero__media{grid-area:media;position:relative;display:block;aspect-ratio:16/11;overflow:hidden;border-radius:var(--r);
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.bhero__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bhero__media:hover img{transform:scale(1.03)}
.bhero__media::after{content:"";position:absolute;left:8%;top:0;width:5px;height:100%;background:var(--rojo);transform-origin:top left;transform:skewX(-6.6deg)}
.bhero__nota{grid-area:nota;display:block;padding:22px 24px;background:var(--superficie);border:1px solid var(--linea);
  border-left:4px solid var(--rojo);border-radius:var(--r);transition:background .2s}
.bhero__nota:hover{background:var(--superficie-2)}
.bhero__k{display:block;font:800 .72rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--rojo-txt)}
.bhero__t{display:block;margin-top:12px;font:900 clamp(1.5rem,2.4vw,2.1rem)/1 var(--f-display);text-transform:uppercase;text-wrap:balance}
.bhero__r{display:block;margin:10px 0 14px;color:var(--texto-suave);line-height:1.55}
.ig-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}

.nota__head{border-bottom:1px solid var(--linea);
  background:radial-gradient(closest-side,rgba(225,29,42,.12),transparent) 92% 0/55vw 55vw no-repeat,var(--fondo)}
.nota__head-in{padding-top:clamp(34px,5vw,64px);padding-bottom:clamp(28px,4vw,46px)}
.nota__head-in > *{max-width:980px}
.nota__meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-bottom:16px;font:800 .74rem/1.2 var(--f-display);letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-tenue)}
.nota__meta > span::before{content:"·";margin:0 12px;color:var(--rojo-txt)}
.nota__h1{font:900 clamp(2.3rem,5.2vw,4.6rem)/.92 var(--f-display);text-transform:uppercase;text-wrap:balance}
.nota__lead{margin-top:20px;color:var(--texto-suave);font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.6;max-width:62ch}
.nota__share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
.nota__share > span{font:800 .72rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-tenue);margin-right:6px}
.nota__share a,.nota__share button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;border:1px solid var(--linea-2);
  border-radius:var(--r);background:transparent;color:var(--texto);font:800 .76rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s}
.nota__share a:hover,.nota__share button:hover{border-color:#fff}
.nota__share .ico{width:17px;height:17px}
.nota__img{margin:clamp(24px,3vw,40px) auto 0}
.nota__img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.nota__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.nota__cta{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:12px;padding:24px;background:var(--superficie);
  border:1px solid var(--linea);border-top:4px solid var(--rojo);border-radius:var(--r)}
.nota__cta h2{font:900 1.8rem/.95 var(--f-display);text-transform:uppercase}
.nota__cta h2 em{font-style:italic;color:var(--rojo-txt)}
.nota__cta p:not(.kicker){color:var(--texto-suave);font-size:.95rem;line-height:1.6}
.nota__cta .btn{width:100%}
.nota__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding-top:22px;padding-bottom:clamp(40px,5vw,72px);border-top:1px solid var(--linea)}
.nota__pie .nota__share{margin-top:0}
.entrada__body{max-width:68ch;color:#d2d1d6;font-size:1.1rem;line-height:1.85}
.entrada__body > * + *{margin-top:20px}
.entrada__body > p:first-child{font-size:1.24rem;line-height:1.7;color:var(--texto)}
.entrada__body h2{margin-top:46px;font:900 clamp(1.6rem,2.6vw,2.1rem)/1 var(--f-display);text-transform:uppercase;color:#fff}
.entrada__body h3{margin-top:34px;font:900 1.3rem/1.1 var(--f-display);text-transform:uppercase;color:#fff}
.entrada__body h2 + *,.entrada__body h3 + *{margin-top:14px}
.entrada__body ul{list-style:none;padding:0;display:grid;gap:10px}
.entrada__body li{position:relative;padding-left:28px}
.entrada__body li::before{content:"";position:absolute;left:0;top:.74em;width:15px;height:4px;background:var(--rojo);transform:skewX(-24deg)}
.entrada__body strong{color:#fff;font-weight:700}
.entrada__body blockquote{margin-top:30px;padding:6px 0 6px 22px;border-left:4px solid var(--rojo);font:800 1.3rem/1.45 var(--f-display);font-style:italic;color:#fff}
/* Formato ampliado del editor (14-sep-2026): enlaces, cursiva, listas numeradas,
   separador, imágenes y lo que entra por el insertador de HTML. */
.entrada__body a{color:#fff;text-decoration:underline;text-decoration-color:var(--rojo);text-underline-offset:3px;text-decoration-thickness:2px}
.entrada__body a:hover{text-decoration-color:#fff}
.entrada__body em{font-style:italic;color:#e7e6ea}
.entrada__body ol{list-style:none;padding:0;display:grid;gap:10px;counter-reset:vf-ol}
.entrada__body ol > li{counter-increment:vf-ol;padding-left:38px}
.entrada__body ol > li::before{content:counter(vf-ol,decimal-leading-zero);width:auto;height:auto;top:.1em;background:none;transform:none;
  font:900 1rem/1.6 var(--f-display);color:var(--rojo-txt)}
.entrada__body hr{margin:40px 0;border:0;height:4px;width:64px;background:var(--rojo);transform:skewX(-24deg)}
.entrada__body code{padding:2px 6px;border-radius:3px;background:var(--superficie-2,#18181c);font-size:.92em}
.entrada__body pre{padding:16px;overflow-x:auto;border-radius:var(--r);background:var(--superficie-2,#18181c);font-size:.9rem;line-height:1.6}
.nota-fig img,.nota-html img{display:block;max-width:100%;height:auto;border-radius:var(--r)}
.nota-fig figcaption,.nota-html figcaption{margin-top:10px;color:var(--texto-tenue);font-size:.88rem;line-height:1.5}
.nota-html{max-width:100%}
.nota-html > * + *{margin-top:16px}
.nota-html table{width:100%;border-collapse:collapse;font-size:.96rem;line-height:1.5}
.nota-html :is(th,td){padding:10px 12px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.nota-html th{font:800 .78rem/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#fff;border-bottom-color:var(--rojo)}
.nota-html .tabla-scroll{overflow-x:auto}
.nota-html video,.nota-html audio{width:100%;border-radius:var(--r)}
.vf-embed{position:relative;width:100%;border-radius:var(--r);overflow:hidden;background:#000}
.vf-embed iframe{display:block;width:100%;min-height:360px;border:0}
.vf-embed--video{aspect-ratio:16/9}
.vf-embed--video iframe{position:absolute;inset:0;height:100%;min-height:0}
.nota-html .instagram-media,.nota-html .tiktok-embed{margin-left:auto!important;margin-right:auto!important}
.nota-aviso{padding:18px 20px;border-left:4px solid var(--rojo);background:var(--superficie,#121215);border-radius:0 var(--r) var(--r) 0}
.nota-aviso > b:first-child{display:block;font:900 1rem/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.entrada__body a.btn{text-decoration:none;margin-top:4px}
.entrada__body a.btn--wa{color:#04140a}
.entrada__body a.btn--primary{color:#fff}
@media (max-width:980px){
  .bhero__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "media" "nota"}
  .bhero__media{clip-path:none}
  .bhero__media::after{display:none}
  .nota__cuerpo{grid-template-columns:minmax(0,1fr)}
  .nota__cta{position:static}
}
@media (max-width:760px){
  .nota__share > span{width:100%;margin-bottom:2px}
  .nota__pie{flex-direction:column;align-items:stretch}
}

/* ==================== 18. CABECERAS PROPIAS (vf_hero_split) Y EL EQUIPO ====================
   Cada página con su modelo (pedido de la academia, 11-sep-2026: «en las demás
   estás repitiendo el mismo modelo»): Horarios = tablero de hoy · Sedes = dos
   puertas · Comunidad = mosaico · Contacto = chat · cada disciplina = su ficha. */
.hero2{position:relative;isolation:isolate;overflow:hidden;background:var(--fondo);border-bottom:1px solid var(--linea)}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,42,.16),rgba(225,29,42,0)) 88% 34%/64vw 64vw no-repeat}
.hero2__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,5vw,84px);align-items:center;
  padding-top:calc(var(--nav-h) + clamp(28px,4.5vw,64px));padding-bottom:clamp(40px,5vw,76px)}
.hero2__h1{margin:0}
.hero2 .crumb{margin-bottom:18px}
.hero2 .hero__title-kicker{margin-bottom:16px}
.hero2__title{display:block;font:900 clamp(2.8rem,5.6vw,5.6rem)/.88 var(--f-display);text-transform:uppercase;text-wrap:balance}
.hero2__title em{font-style:italic;color:var(--rojo-txt)}
.hero2__lead{color:#d6d5d9;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65;max-width:50ch;margin-top:22px}
.hero2__lead b{color:#fff;font-weight:600}
.hero2__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* Apilado (Sedes): el título a la izquierda y la bajada a la derecha; debajo, la pieza */
.hero2--apilado .hero2__in{grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,40px)}
.hero2--apilado .hero2__txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);column-gap:56px;align-items:end}
.hero2--apilado .crumb{grid-column:1/-1}
.hero2--apilado .hero2__lead{margin-top:0;padding-bottom:10px}

/* Horarios · el tablero de hoy */
.hero2--tablero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px)}
.tablero{overflow:hidden;background:rgba(14,14,16,.94);border:1px solid var(--linea-2);border-top:4px solid var(--rojo);
  border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.tablero__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:16px 20px;border-bottom:1px solid var(--linea)}
.tablero__head b{font:900 1.1rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.tablero__hora{display:inline-flex;align-items:center;gap:8px;font:800 .7rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#7ee2a8}
.tablero__hora::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde-wa)}
.tablero__sede{padding:16px 20px}
.tablero__sede + .tablero__sede{border-top:1px solid var(--linea)}
.tablero__nombre{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px;
  font:900 1.14rem/1.1 var(--f-display);text-transform:uppercase}
.tablero__nombre small{font:800 .7rem/1.2 var(--f-display);letter-spacing:.12em;color:var(--texto-suave)}
.tablero__lista{list-style:none;display:grid;gap:6px}
.tablero__lista li{display:grid;grid-template-columns:78px 56px minmax(0,1fr);align-items:center;gap:3px 12px;padding:10px 12px;
  background:var(--superficie);border-left:3px solid var(--c);border-radius:var(--r)}
.tablero__lista li.is-ahora{background:color-mix(in oklab,var(--c) 14%,var(--superficie))}
.tablero__k{font:800 .64rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.tablero__lista li.is-ahora .tablero__k{color:#7ee2a8}
.tablero__lista time{font:900 1.02rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.tablero__lista b{font:900 .98rem/1.1 var(--f-display);text-transform:uppercase}
.tablero__p{grid-column:3;color:var(--texto-suave);font-size:.84rem;line-height:1.3}
.tablero__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--linea);
  font:800 .76rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:background .2s}
.tablero__pie:hover{background:var(--superficie)}
.tablero__pie .ico{color:var(--rojo)}

/* Sedes · las dos puertas */
.puertas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.puerta{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(300px,32vw,430px);
  padding:clamp(20px,2.6vw,32px);overflow:hidden;border:1px solid var(--linea);border-radius:var(--r);transition:border-color .25s}
.puerta picture,.puerta > img{position:absolute;inset:0;z-index:-2}
.puerta img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.puerta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,7,8,.96) 0,rgba(7,7,8,.6) 42%,rgba(7,7,8,.08) 76%)}
.puerta:hover{border-color:var(--rojo)}
.puerta:hover img{transform:scale(1.04)}
.puerta__n{position:absolute;top:18px;left:clamp(20px,2.6vw,32px);padding:6px 9px;background:rgba(7,7,8,.78);
  font:italic 900 1.3rem/1 var(--f-display);color:var(--rojo-txt)}
.puerta b{display:block;font:900 clamp(1.9rem,3.6vw,3.2rem)/.9 var(--f-display);text-transform:uppercase}
.puerta__dir{display:block;margin-top:10px;color:#e2e1e5;font-size:1rem}
.puerta__dato{display:block;margin-top:6px;font:800 .72rem/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.puerta__go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:800 .78rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.puerta__go .ico{color:var(--rojo);transform:rotate(90deg);transition:transform .25s}
.puerta:hover .puerta__go .ico{transform:rotate(90deg) translateX(4px)}

/* Comunidad · el mosaico */
.mosaico{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,clamp(110px,10.5vw,158px));gap:8px;
  grid-template-areas:"a a b" "a a z" "c d d"}
.mosaico figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--superficie)}
.mosaico picture{display:block;height:100%}
.mosaico img{width:100%;height:100%;object-fit:cover}
.mosaico__a{grid-area:a}
.mosaico__b{grid-area:b}
.mosaico__c{grid-area:c}
.mosaico__c img{object-position:50% 30%}
.mosaico__d{grid-area:d}
.mosaico__zrf{grid-area:z;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,#a3111c,#5c0910);color:#fff;transition:filter .2s}
.mosaico__zrf:hover{filter:brightness(1.12)}
.mosaico__zrf b{font:900 clamp(2rem,3.4vw,2.9rem)/.9 var(--f-display)}
.mosaico__zrf span{margin-top:6px;font:800 .68rem/1.25 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#ffe3e5}

/* Contacto · la conversación */
.chat{max-width:440px;margin:0 0 0 auto;overflow:hidden;background:#0b141a;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.chat__head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#202c33}
.chat__head picture{flex:none}
.chat__head img{width:40px;height:40px;border-radius:50%;object-fit:contain;background:#0b141a;padding:3px}
.chat__head b{display:block;font:700 .98rem/1.2 var(--f-text);color:#e9edef}
.chat__head small{display:block;color:#8696a0;font-size:.8rem}
.chat__head .ico{margin-left:auto;width:24px;height:24px;color:var(--verde-wa)}
.chat__body{display:grid;gap:8px;padding:18px 14px 20px}
.chat__msg{justify-self:start;max-width:86%;padding:8px 12px;border-radius:2px 10px 10px 10px;background:#202c33;color:#e9edef;
  font:400 .95rem/1.45 var(--f-text)}
.chat__msg--yo{justify-self:end;border-radius:10px 2px 10px 10px;background:#005c4b}
.chat__escribiendo{justify-self:start;display:inline-flex;gap:4px;padding:11px 12px;border-radius:2px 10px 10px 10px;background:#202c33}
.chat__escribiendo span{width:7px;height:7px;border-radius:50%;background:#8696a0}
.chat__nota{padding:10px 16px;background:#111b21;color:#8696a0;font-size:.78rem;text-align:center}
@media (prefers-reduced-motion:no-preference){
  html.js .chat__msg{animation:aparece .5s var(--ease) both}
  html.js .chat__msg:nth-child(2){animation-delay:.45s}
  html.js .chat__msg:nth-child(3){animation-delay:.9s}
  html.js .chat__msg:nth-child(4){animation-delay:1.35s}
  html.js .chat__escribiendo{animation:aparece .4s 1.8s var(--ease) both}
  .chat__escribiendo span{animation:punto 1.2s infinite}
  .chat__escribiendo span:nth-child(2){animation-delay:.2s}
  .chat__escribiendo span:nth-child(3){animation-delay:.4s}
  @keyframes punto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
}

/* Cada disciplina · su ficha (la foto con su color y quiénes la dictan) */
.hero2--ficha::before{background:radial-gradient(closest-side,color-mix(in oklab,var(--c) 26%,transparent),transparent) 86% 40%/62vw 62vw no-repeat}
.hero2--ficha .hero__title-kicker::before{background:var(--c)}
.hero2--ficha .hero2__visual{justify-self:end;width:min(100%,440px)}
.ficha{position:relative;margin:16px 0 0 16px;aspect-ratio:4/5}
.ficha::before{content:"";position:absolute;inset:-16px 16px 16px -16px;z-index:-1;border:2px solid var(--c);border-radius:var(--r)}
.ficha picture{display:block;height:100%}
.ficha img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.ficha__quien{position:absolute;left:-34px;bottom:24px;display:flex;align-items:center;gap:12px;max-width:calc(100% + 20px);padding:12px 16px;
  background:rgba(12,12,14,.95);border:1px solid var(--linea-2);border-left:4px solid var(--c);border-radius:var(--r);box-shadow:var(--sombra)}
.ficha__quien .caras__fila span{width:38px;height:38px;margin-left:-10px;border-color:#0c0c0e}
.ficha__quien .caras__fila span:first-child{margin-left:0}
.ficha__quien b{display:block;font:900 .9rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.ficha__quien small{display:block;margin-top:2px;color:var(--texto-suave);font-size:.84rem;line-height:1.35}

/* Inicio · los cinco: ver «Tu esquina» en la sección 21 */
.coach--fundador .tag{background:#0b0b0c;border-color:#56555c;color:#e9e8e6}
.coach--fundador .coach__alias,.coach--fundador .coach__spec{color:#b4b3b9}
.coach--fundador:hover h3{text-decoration:underline;text-underline-offset:4px}

@media (max-width:980px){
  .hero2__in{grid-template-columns:minmax(0,1fr)}
  .hero2--apilado .hero2__txt{grid-template-columns:minmax(0,1fr)}
  .hero2--apilado .hero2__lead{margin-top:18px;padding-bottom:0}
  .hero2--ficha .hero2__visual{justify-self:center}
  .chat{margin:0 auto}
}
@media (max-width:900px){
}
@media (max-width:760px){
  .hero2__in{padding-top:calc(var(--nav-h) + 22px)}
  .hero2__title{font-size:clamp(2.5rem,12vw,3.9rem);line-height:.92}
  .hero2__actions .btn{flex:1 1 100%}
  .hero2--mosaico .hero2__visual,.hero2--ficha .hero2__visual{order:-1}
  .puertas{grid-template-columns:minmax(0,1fr)}
  .puerta{min-height:240px}
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,118px);grid-template-areas:"a a" "b z" "c d"}
  .tablero__head,.tablero__sede{padding-left:16px;padding-right:16px}
  .tablero__lista li{grid-template-columns:62px 48px minmax(0,1fr);gap:3px 10px}
  .hero2--ficha .hero2__visual{width:min(100%,340px)}
  .ficha__quien{left:10px;right:10px;bottom:10px;max-width:none}
}

/* ==================== 19. DISCIPLINAS · «ELIGE TU COMBATE», UNA A LA VEZ ====================
   Vive en la página Disciplinas (hasta el 13-sep-2026 estuvo en la portada;
   se intercambió con la cartelera de la sección 20).
   Parte del modelo de programas de tristargym.com (13-sep-2026) y le suma lo
   que allí no hay: la próxima clase en vivo, un botón de clase de prueba por
   disciplina, los niveles reales del horario, la escena clicable y videos que
   sólo se descargan si se van a ver.
   Escritorio: la lista numerada a la izquierda y la escena de la activa pegada
   al borde derecho. Cambia sola cada --dur; la barra de color ES el
   temporizador (main.js avanza en su animationend), así que pausar la
   animación con CSS —mouse sobre la lista o la escena, foco de teclado, fuera
   de pantalla, botón de pausa— pausa también el cambio. Con «reducir
   movimiento» no avanza.
   Móvil: todo baja. Acordeón con la foto dentro y sin avance solo; al abrir
   una, la pantalla se desliza lo justo para mostrarla entera (main.js). */
/* overflow:clip y no hidden: hidden la volvería contenedor de scroll y la
   escena ya no podría quedarse fija (sticky) mientras se recorre la lista. */
.discv{--dur:9s;position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--fondo)}
.discv__in{position:relative;z-index:1;display:flex;align-items:center;min-height:clamp(600px,78vh,740px);
  padding-top:clamp(40px,4.2vw,64px);padding-bottom:clamp(40px,4.2vw,64px);pointer-events:none}
.discv__txt{width:min(520px,38vw);pointer-events:auto}
.discv__sub{display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 clamp(18px,2vw,24px);
  font:800 .76rem/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.discv__sub b{color:var(--rojo-txt);font-weight:800}

/* Lista: cada fila es un botón a lo ancho, con separador y flecha (se lee
   como algo que se toca); la barra de la izquierda marca la activa y su tiempo */
.discv__lista{list-style:none;border-top:1px solid var(--linea)}
.discv__item{position:relative;padding-left:20px;border-bottom:1px solid var(--linea)}
.discv__barra{position:absolute;left:0;top:-1px;bottom:-1px;width:3px;overflow:hidden}
.discv__barra i{position:absolute;inset:0;background:var(--c,var(--rojo));transform:scaleY(0);transform-origin:top}
.discv__item.is-on .discv__barra i{transform:none}
.discv__h{margin:0}
.discv__tab{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:48px;
  padding:6px 0;border:0;background:none;text-align:left;color:var(--texto-tenue);transition:color .25s}
.discv__n{font:italic 900 .9rem/1 var(--f-display);letter-spacing:.04em;transition:color .25s}
.discv__nombre{font:900 clamp(1.3rem,1.75vw,1.65rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.discv__flecha{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--linea-2);border-radius:50%;color:var(--texto-tenue);
  transition:transform .35s var(--ease),background .25s,border-color .25s,color .25s}
.discv__flecha .ico{width:16px;height:16px;stroke-width:2}
.discv__tab:hover,.discv__item.is-on .discv__tab{color:#fff}
.discv__tab:hover .discv__n,.discv__item.is-on .discv__n{color:var(--c)}
.discv__tab:hover .discv__flecha{border-color:var(--c);color:#fff}
.discv__item.is-on .discv__flecha{background:var(--c);border-color:var(--c);color:#0a0a0b}
/* El detalle se abre con grid-template-rows (0fr → 1fr): sin medir alturas */
.discv__det{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s .45s}
.discv__item.is-on .discv__det{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease)}
.discv__det-in{min-height:0;overflow:hidden;padding-left:44px}
.discv__resumen{color:var(--texto-suave);font-size:.96rem;line-height:1.55;max-width:42ch;text-wrap:pretty}
/* Próxima clase: la dice el horario real y se actualiza sola */
.prox{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;color:var(--texto-suave);font-size:.9rem;line-height:1.3}
.prox small{font:800 .68rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-tenue)}
.prox b{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;background:var(--superficie-2);border-left:3px solid var(--c);
  font:800 .82rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.prox b.is-vivo{background:var(--verde-wa);border-color:var(--verde-wa);color:#04140a}
.prox b.is-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.discv__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.discv__meta .ico{color:var(--c)}
.discv__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:14px;padding-bottom:16px}
.discv__mini{display:none}
.discv__pie{display:flex;align-items:center;gap:24px;margin-top:clamp(14px,1.6vw,20px)}
html:not(.js) .discv__det{grid-template-rows:1fr;visibility:visible}

/* Escena: pegada al borde derecho, fundida hacia el texto; toda es el enlace.
   Si la sección es más alta que la pantalla (laptops de 768 px), la escena se
   queda fija bajo la navegación mientras se recorre la lista: su título y
   «Ver disciplina» siempre están a la vista. */
.discv__escena{position:absolute;inset:0 0 0 auto;width:min(54vw,1100px);background:#070708}
.discv__escena-in{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));max-height:100%;overflow:hidden}
.discv__escena .prox{position:absolute;z-index:2;top:clamp(30px,4vw,60px);left:clamp(40px,4.2vw,72px);right:40%;margin:0;color:#e9e8e6}
.discv__escena .prox small{color:#d6d5d9}
.discv__escena .prox b{background:rgba(8,8,10,.78)}
.discv__escena .prox b.is-vivo{background:var(--verde-wa)}
.discv__cuadro{position:absolute;inset:0;display:block;overflow:hidden;color:#fff;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.discv__cuadro.is-on{opacity:1;pointer-events:auto}
.discv__cuadro picture{position:absolute;inset:0}
/* La foto es 80 px más ancha que la escena para poder desplazarse de lado
   (transform, en la GPU) sin ampliarse. */
.discv__cuadro img{position:absolute;top:0;left:-40px;width:calc(100% + 80px);max-width:none;height:100%;object-fit:cover;object-position:50% 58%}
.discv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.discv__video.is-vivo{opacity:1}
.discv__cuadro::before,.discv__cuadro::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* Velo que se levanta al pasar el mouse: la escena «responde» antes del clic */
.discv__cuadro::before{background:rgba(8,8,10,.2);transition:opacity .35s}
.discv__cuadro:hover::before{opacity:0}
.discv__cuadro::after{background:
  linear-gradient(90deg,var(--fondo) 0,rgba(8,8,10,.72) 12%,rgba(8,8,10,0) 38%),
  linear-gradient(0deg,rgba(8,8,10,.95) 0,rgba(8,8,10,.45) 32%,rgba(8,8,10,0) 58%),
  linear-gradient(180deg,rgba(8,8,10,.55) 0,rgba(8,8,10,0) 24%)}
.discv__num{position:absolute;z-index:2;top:clamp(30px,4vw,60px);right:clamp(40px,5vw,84px);padding-right:.06em;
  font:italic 900 clamp(5.5rem,9.5vw,9rem)/.8 var(--f-display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28)}
.discv__rotulo{position:absolute;z-index:2;left:clamp(40px,4.2vw,72px);right:clamp(40px,5vw,84px);bottom:clamp(34px,4.2vw,60px);
  display:flex;flex-direction:column;align-items:flex-start}
.discv__rotulo small{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:italic 900 1rem/1 var(--f-display);letter-spacing:.06em}
.discv__rotulo small::after{content:"";width:34px;height:5px;background:var(--c);transform:skewX(-24deg)}
.discv__titulo{font:900 clamp(3rem,5.4vw,5.8rem)/.86 var(--f-display);text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.discv__ver{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font:800 .8rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.discv__ver i{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;
  transition:background .25s,border-color .25s,color .25s,transform .3s var(--ease)}
.discv__ver .ico{width:18px;height:18px;stroke-width:2}
.discv__cuadro:hover .discv__ver i{background:var(--c);border-color:var(--c);color:#0a0a0b;transform:translateX(4px)}
.discv__pausa{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linea-2);border-radius:var(--r);
  background:none;color:var(--texto-suave);transition:border-color .2s,color .2s}
.discv__pausa:hover{border-color:#fff;color:#fff}
.discv__pausa .ico{width:18px;height:18px}
.discv__i-play,.discv__pausa[aria-pressed="true"] .discv__i-pausa{display:none}
.discv__pausa[aria-pressed="true"] .discv__i-play{display:block}

@media (prefers-reduced-motion:no-preference){
  .prox b.is-vivo::before{animation:discv-vivo 1.6s ease-in-out infinite}
  @keyframes discv-vivo{50%{opacity:.3}}
}
/* En escritorio la próxima clase va en la escena; en el móvil, dentro de la ficha */
@media (min-width:981px){
  .discv__det .prox{display:none}
}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  html.js .discv__item.is-on .discv__barra i{animation:discv-barra var(--dur) linear both}
  html.js .discv__cuadro.is-on img{animation:discv-paneo calc(var(--dur) + 1.5s) linear both}
  html.js .discv__cuadro:has(.discv__video.is-vivo) img{animation:none}
  html.js .discv__cuadro.is-on .discv__rotulo{animation:sube .8s .12s var(--ease) both}
  html.js .discv.is-quieto :is(.discv__barra i,.discv__cuadro img),
  html.js .discv:has(.discv__lista:hover,.discv__escena:hover) :is(.discv__barra i,.discv__cuadro img),
  html.js .discv:has(:focus-visible) :is(.discv__barra i,.discv__cuadro img){animation-play-state:paused}
  @keyframes discv-barra{from{transform:scaleY(0)}to{transform:none}}
  @keyframes discv-paneo{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
}
@media (max-width:980px){
  .discv__escena,.discv__pausa{display:none!important}
  .discv__in{display:block;min-height:0;padding-top:var(--sec);padding-bottom:var(--sec);pointer-events:auto}
  .discv__txt{width:auto}
  /* Sin transición de alto: main.js deja quieta la fila tocada y luego
     desliza la pantalla hasta mostrarla entera. */
  .discv__det,.discv__item.is-on .discv__det{transition:none}
  .discv__item{padding-left:16px}
  .discv__tab{grid-template-columns:28px minmax(0,1fr) auto;min-height:64px;padding:10px 0}
  .discv__nombre{font-size:clamp(1.45rem,6.4vw,1.8rem)}
  .discv__flecha{width:36px;height:36px}
  .discv__item.is-on .discv__flecha{transform:rotate(180deg)}
  .discv__det-in{padding-left:0}
  .discv__mini{display:block;position:relative;aspect-ratio:16/10;margin:2px 0 16px;overflow:hidden;border-radius:var(--r);background:var(--superficie)}
  .discv__mini::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1;background:var(--c)}
  .discv__mini picture{position:absolute;inset:0}
  .discv__mini img,.discv__mini .discv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
  .discv__mini-ver{position:absolute;z-index:1;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;padding:9px 11px 9px 13px;
    background:rgba(8,8,10,.82);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
    font:800 .7rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#fff}
  .discv__mini-ver .ico{width:15px;height:15px;stroke-width:2;color:var(--c)}
  .discv__cta{gap:14px 22px}
  .discv__cta .btn{flex:1 1 100%;--pad:15px 18px;font-size:.86rem}
}
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  html.js .discv__item.is-on .discv__det-in > *{animation:aparece .45s var(--ease) both}
  html.js .discv__item.is-on .discv__det-in > :nth-child(2){animation-delay:.05s}
  html.js .discv__item.is-on .discv__det-in > :nth-child(3){animation-delay:.1s}
  html.js .discv__item.is-on .discv__det-in > :nth-child(4){animation-delay:.15s}
  html.js .discv__item.is-on .discv__det-in > :nth-child(5){animation-delay:.2s}
}

/* ==================== 20. CARTELERA (portada) Y PÁGINA DISCIPLINAS ====================
   Segunda vuelta del 13-sep-2026 («muy larga; quiero algo más arte, fuera de
   lo común»). Página Disciplinas: cabecera → «Elige tu combate» (sección 19)
   → el mapa del combate con el selector de objetivo → dudas y WhatsApp de
   cada sede. La cartelera nació aquí y ese mismo día pasó a la portada. */

/* ---- La cartelera ----
   Base (móvil, tableta y sin JS): franjas cortadas en diagonal (--sm) que
   bajan y se enciman lo justo para dejar un filete de 4 px; la abierta
   muestra su foto y su ficha.
   Escritorio con JS (más abajo): los seis paneles lado a lado (--s); el
   abierto crece y los cerrados dejan el nombre en vertical.
   Fotos a color, sin tintes; el color de la disciplina va en el filete, el
   número y la ficha. Anchos máximos para no ampliar la foto de 720 px. */
.cartel-sec .sec-head{margin-bottom:clamp(26px,3.4vw,40px)}
.cart{--s:44px;--sm:14px;display:grid;max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.cart__panel{position:relative;isolation:isolate;min-height:92px;margin-top:calc(var(--sm) * -1 + 4px);overflow:hidden;
  background:#070708;color:#fff;clip-path:polygon(0 var(--sm),100% 0,100% calc(100% - var(--sm)),0 100%)}
.cart__panel:first-child{margin-top:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--sm)),0 100%)}
.cart__panel:last-child{clip-path:polygon(0 var(--sm),100% 0,100% 100%,0 100%)}
.cart__panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,rgba(7,7,8,0) 70px,#070708 232px)}
.cart__panel::after{content:"";position:absolute;left:0;top:0;bottom:0;z-index:1;width:5px;background:var(--c)}
.cart__foto{position:absolute;inset:0;z-index:-2;isolation:isolate}
.cart__foto picture{position:absolute;inset:0}
.cart__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* Velo de las cerradas (en la abierta se levanta y la foto se ve a color) */
.cart__foto::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(7,7,8,.62);transition:opacity .5s var(--ease)}
.cart__num{position:absolute;z-index:1;top:calc(var(--sm) + 10px);right:18px;padding-right:.06em;opacity:0;transition:opacity .4s;
  font:italic 900 4.2rem/.8 var(--f-display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.cart__cuerpo{position:relative;padding:calc(var(--sm) + 14px) 18px calc(var(--sm) + 14px) 22px}
.cart__estilo{display:none;align-items:center;gap:10px;margin-bottom:10px;
  font:800 .7rem/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#d6d5d9}
.cart__estilo span{font:italic 900 1rem/1 var(--f-display);letter-spacing:.04em;color:var(--c)}
.cart__h{margin:0}
.cart__tab{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;color:#fff;text-align:left}
.cart__n{min-width:26px;font:italic 900 1rem/1 var(--f-display);color:var(--c)}
.cart__nombre{flex:1;min-width:0;font:900 clamp(1.7rem,7vw,2.3rem)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.cart__chev{width:22px;height:22px;stroke-width:2;color:var(--c);transition:transform .35s var(--ease)}
.cart__det{display:none}
.cart__resumen{margin-top:12px;max-width:46ch;color:#d6d5d9;font-size:1rem;line-height:1.5;text-wrap:pretty}
.cart .prox{margin-top:14px;color:#d6d5d9}
.cart .prox small{color:#b4b3b9}
.cart .prox b{background:rgba(8,8,10,.82)}
.cart .prox b.is-vivo{background:var(--verde-wa)}
.cart__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cart__tags .ico{color:var(--c)}
.cart__tags .cart__turno{margin-left:1px}
.cart__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px}
/* Abierta (y todas, sin JS) */
.cart__panel.is-on::before,html:not(.js) .cart__panel::before{opacity:1}
.cart__panel.is-on .cart__foto,html:not(.js) .cart__panel .cart__foto{bottom:auto;height:232px}
.cart__panel.is-on .cart__foto::before,html:not(.js) .cart__panel .cart__foto::before{opacity:0}
.cart__panel.is-on .cart__num,html:not(.js) .cart__panel .cart__num{opacity:1}
.cart__panel.is-on .cart__cuerpo,html:not(.js) .cart__panel .cart__cuerpo{padding-top:150px}
.cart__panel.is-on .cart__estilo,html:not(.js) .cart__panel .cart__estilo{display:flex}
.cart__panel.is-on .cart__det,html:not(.js) .cart__panel .cart__det{display:block}
.cart__panel.is-on .cart__chev{transform:rotate(180deg)}
/* Abierta, el número ya va en la línea de arriba (cart__estilo) */
.cart__panel.is-on .cart__n,html:not(.js) .cart__n,html:not(.js) .cart__chev{display:none}

/* ---- La cinta (entre la cabecera y «Elige tu combate») ----
   La foto de la cabecera (izquierda) y la escena (derecha) quedaban una sobre
   otra. Las separa una cinta de cartel de pelea, inclinada: los nombres
   alternan blanco y gris (con contorno, la fuente variable dejaba ver sus
   trazos internos), con un filete del color de cada disciplina.
   Al bajar se corre de lado, atada al scroll (la mueve quien lee, no un
   temporizador); con «reducir movimiento», quieta. */
.dcinta{padding-block:clamp(30px,3.4vw,48px);overflow:hidden;overflow:clip;background:var(--fondo)}
.dcinta__banda{position:relative;transform:skewY(-1.4deg);background:var(--superficie);
  border-top:2px solid var(--rojo);border-bottom:1px solid var(--linea-2)}
.dcinta__pista{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);width:max-content;margin-left:-72px;
  padding-block:clamp(14px,1.5vw,22px);white-space:nowrap}
.dcinta__n{font:900 clamp(1.5rem,2.6vw,2.6rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:#f5f4f2}
.dcinta__n.is-hueco{color:var(--texto-tenue)}
.dcinta__pista i{flex:none;width:clamp(18px,2vw,28px);height:clamp(5px,.5vw,7px);background:var(--c);transform:skewX(-24deg)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .dcinta__pista{animation:dcinta-corre linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes dcinta-corre{from{transform:translateX(0)}to{transform:translateX(-9%)}}
  }
}
/* En el móvil la foto de la cabecera va arriba y no hay escena: la cinta sólo
   marca el paso, con menos aire */
@media (max-width:980px){
  .dcinta{padding-block:clamp(18px,4vw,28px)}
  .dcinta + .discv .discv__in{padding-top:clamp(28px,6vw,44px)}
}

/* ---- Mapa del combate ----
   Filas de disciplinas sobre cuatro columnas, de los puños a la lucha en el
   suelo. El nombre va escrito en cada fila: el color de la barra acompaña, no
   identifica (los tonos no se distinguen solos con daltonismo, se validó).
   MMA Kids va rayada: «un poco de todo, adaptado a su edad». */
.dmapa{--lab:clamp(160px,17vw,220px);padding:clamp(18px,2.6vw,32px);background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r)}
.dmapa__cab{display:grid;grid-template-columns:var(--lab) repeat(4,minmax(0,1fr));align-items:end}
.dmapa__eje{grid-column:2/-1;grid-row:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:18px}
.dmapa__eje::after{content:"";grid-column:2;grid-row:1;height:2px;background:linear-gradient(90deg,var(--linea-2),var(--texto-tenue),var(--linea-2))}
.dmapa__eje b{font:800 .7rem/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--texto-suave)}
.dmapa__eje b:last-child{grid-column:3}
.dmapa__col{grid-row:2;padding:0 10px 14px;border-left:1px solid var(--linea-2);
  font:800 .7rem/1.25 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#d6d5d9}
/* Columna explícita para cada rótulo: con sólo la fila fija, el auto-placement
   mandaba el segundo rótulo a la columna de los nombres. */
.dmapa__cab > :nth-child(2){grid-column:2}
.dmapa__cab > :nth-child(3){grid-column:3}
.dmapa__cab > :nth-child(4){grid-column:4}
.dmapa__cab > :nth-child(5){grid-column:5}
.dmapa__filas{list-style:none;border-top:1px solid var(--linea-2)}
.dmapa__fila{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:stretch;min-height:60px;
  border-bottom:1px solid var(--linea);transition:opacity .3s,background .3s}
.dmapa__filas li:last-child .dmapa__fila{border-bottom:0}
.dmapa__nombre{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 14px 10px 0}
.dmapa__nombre b{font:900 1.2rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.dmapa__nombre small{font:800 .64rem/1.1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.dmapa__recom{display:none;padding:4px 7px;background:var(--rojo);color:#fff;font:800 .6rem/1 var(--f-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.dmapa__pista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;
  background:linear-gradient(90deg,var(--linea-2) 1px,transparent 1px) 0 0/25% 100%}
.dmapa__pista i{grid-column:var(--a)/var(--b);height:16px;margin:0 8px;border-radius:4px;background:var(--c);transform-origin:left;
  transition:transform .8s var(--ease);transition-delay:calc(var(--k,0) * 90ms)}
.dmapa__fila.is-ninos .dmapa__pista i{background:repeating-linear-gradient(135deg,var(--c) 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 2px var(--c)}
html.js .dmapa.reveal .dmapa__pista i{transform:scaleX(0)}
html.js .dmapa.reveal.is-in .dmapa__pista i{transform:none}
.dmapa__fila:hover,.dmapa__fila:focus-visible{background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 70%)}
/* Apagar sólo la barra y pasar el nombre a gris: con opacity en toda la fila
   el nombre bajaba del contraste AA (lo marcó axe). */
.dmapa__pista,.dmapa__nombre b{transition:opacity .3s,color .3s}
.dmapa__filas:has(.dmapa__fila:hover) .dmapa__fila:not(:hover) .dmapa__pista{opacity:.4}
/* Con un objetivo elegido: las recomendadas se marcan y el resto se apaga */
.dmapa__fila.is-recom{background:linear-gradient(90deg,rgba(225,29,42,.1),transparent 70%)}
.dmapa__fila.is-recom .dmapa__recom{display:inline-block}
.dmapa__filas .dmapa__fila.is-atenuada .dmapa__pista{opacity:.22}
.dmapa__fila.is-atenuada .dmapa__nombre b,.dmapa__fila.is-atenuada .dmapa__nombre small{color:var(--texto-tenue)}

/* ---- Selector de objetivo (sobre el mapa) ---- */
.mruta__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(26px,3.4vw,40px)}
.mruta__cab .sec-head__txt{max-width:620px}
.mruta__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(500px,100%)}
.mruta__btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border:1px solid var(--linea-2);border-radius:var(--r);
  background:var(--superficie);color:#d6d5d9;font:800 .76rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .2s,background .2s,color .2s}
.mruta__btn .ico{width:18px;height:18px;color:var(--rojo-txt)}
.mruta__btn:hover{border-color:#fff;color:#fff}
.mruta__btn[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo);color:#fff}
.mruta__btn[aria-pressed="true"] .ico{color:#fff}
.mruta__res{margin-top:16px}
.mruta__pista{padding:12px 0;color:var(--texto-tenue);font-size:.95rem}
.mruta__r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:18px 22px;
  background:var(--superficie);border:1px solid var(--linea);border-left:4px solid var(--rojo);border-radius:var(--r)}
.mruta__r p{max-width:72ch;color:var(--texto-suave);line-height:1.55}
.mruta__r b{color:#fff;font-weight:600}
.mruta__r p a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--rojo);text-underline-offset:3px}
html:not(.js) .mruta__btns,html:not(.js) .mruta__pista{display:none}
html:not(.js) .mruta__r + .mruta__r{margin-top:8px}
html.js .mruta__r{display:none}
html.js .mruta__r.is-on{display:flex}
html.js .mruta.tiene-ruta .mruta__pista{display:none}

/* ---- Cierre · dudas frecuentes y el WhatsApp de cada sede ---- */
.dcierre{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:clamp(28px,5vw,72px)}
.dcierre .faq{margin-top:26px}
.dcierre__mas{margin-top:22px}
.dcierre__card{position:sticky;top:calc(var(--nav-h) + 24px);padding:clamp(24px,3vw,36px);background:#070708;border:1px solid var(--linea-2);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.dcierre__h{font:900 clamp(2rem,3.4vw,3rem)/.92 var(--f-display);text-transform:uppercase}
.dcierre__h em{font-style:italic;color:var(--rojo-txt)}
.dcierre__p{margin-top:14px;color:var(--texto-suave);line-height:1.6}
.dcierre__sedes{display:grid;gap:10px;margin-top:22px}
.dcierre__sede{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;
  background:var(--verde-wa);color:#04140a;border-radius:var(--r);transition:background .2s,transform .2s var(--ease)}
.dcierre__sede:hover{background:#1fc05b;transform:translateY(-2px)}
.dcierre__sede .ico{width:26px;height:26px}
.dcierre__sede b{display:block;font:900 1.05rem/1.1 var(--f-display);text-transform:uppercase}
.dcierre__sede small{display:block;margin-top:3px;font-size:.84rem;line-height:1.3}
.dcierre__tel{font:800 .95rem/1 var(--f-display);letter-spacing:.04em;white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  html.js .mruta__r.is-on{animation:aparece .4s var(--ease) both}
  html.js .cart__panel.is-on .cart__det{animation:aparece .45s .05s var(--ease) both}
}
/* ---- Cartelera en escritorio: los seis paneles lado a lado ---- */
@media (min-width:981px){
  html.js .cart{display:flex;max-width:1480px;height:clamp(560px,76vh,680px)}
  html.js .cart__panel{flex:1 1 0;min-width:0;min-height:0;margin:0 0 0 calc(var(--s) * -1 + 4px);
    clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);transition:flex-grow .7s var(--ease)}
  html.js .cart__panel:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
  html.js .cart__panel:last-child{clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%)}
  html.js .cart__panel.is-on{flex-grow:4}
  html.js .cart__panel::after{top:auto;right:0;width:auto;height:5px}
  html.js .cart__panel.is-on::before{background:linear-gradient(0deg,rgba(7,7,8,.97) 0,rgba(7,7,8,.8) 36%,rgba(7,7,8,0) 68%)}
  html.js .cart__panel.is-on .cart__foto{bottom:0;height:auto}
  html.js .cart__panel:not(.is-on){cursor:pointer}
  html.js .cart__panel:not(.is-on):hover .cart__foto::before{opacity:.36}
  html.js .cart__panel.is-on .cart__num{top:28px;right:calc(var(--s) + 24px);font-size:clamp(5.5rem,8.4vw,8.4rem)}
  /* Cerrado: el botón ocupa todo el panel, con el número arriba y el nombre en vertical */
  html.js .cart__panel:not(.is-on) .cart__cuerpo{position:absolute;inset:0;padding:0}
  html.js .cart__panel:not(.is-on) .cart__h{height:100%}
  html.js .cart__panel:not(.is-on) .cart__tab{flex-direction:column;justify-content:space-between;height:100%;padding:30px 0 34px}
  html.js .cart__panel:not(.is-on) .cart__n{min-width:0;font-size:1.1rem}
  /* Letras derechas, una debajo de otra (pedido del cliente: girado no se leía bien) */
  html.js .cart__panel:not(.is-on) .cart__nombre{flex:0 1 auto;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;
    font-size:clamp(1.25rem,1.6vw,1.7rem);line-height:1;letter-spacing:-.14em;text-align:center}
  html.js .cart__panel:not(.is-on) .cart__chev{transform:rotate(-90deg)}
  /* Abierto: la ficha abajo, sobre el degradado */
  html.js .cart__panel.is-on .cart__cuerpo{position:absolute;left:40px;right:calc(var(--s) + 26px);bottom:0;padding:0 0 38px}
  html.js .cart__panel.is-on .cart__n,html.js .cart__panel.is-on .cart__chev{display:none}
  html.js .cart__panel.is-on .cart__tab{cursor:default}
  html.js .cart__panel.is-on .cart__nombre{font-size:clamp(3rem,4.4vw,4.6rem);line-height:.88}
  html.js .cart__estilo{margin-bottom:14px}
}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  html.js .cart__panel:not(.is-on) .cart__tab{animation:aparece .5s .3s var(--ease) both}
  html.js .cart__panel.is-on .cart__cuerpo{animation:aparece .55s .32s var(--ease) both}
  html.js .cart__panel.is-on .cart__det{animation:none}
}
@media (max-width:980px){
  .dcierre{grid-template-columns:minmax(0,1fr)}
  .dcierre__card{position:static}
}
@media (max-width:760px){
  .cart__cta .btn{flex:1 1 100%}
  .mruta__btns{width:100%}
  .mruta__btn{padding:10px 12px;font-size:.7rem;letter-spacing:.06em;text-align:left}
  .mruta__r{padding:16px}
  .mruta__r .btn{width:100%}
  .dmapa{--lab:0px;padding:16px 14px}
  .dmapa__cab{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dmapa__eje{grid-column:1/-1;gap:10px;margin-bottom:14px}
  .dmapa__eje b{font-size:.62rem;letter-spacing:.14em}
  .dmapa__cab > :nth-child(2){grid-column:1}
  .dmapa__cab > :nth-child(3){grid-column:2}
  .dmapa__cab > :nth-child(4){grid-column:3}
  .dmapa__cab > :nth-child(5){grid-column:4}
  .dmapa__col{padding:0 6px 12px;font-size:.58rem;letter-spacing:.06em}
  .dmapa__fila{grid-template-columns:minmax(0,1fr);min-height:0;padding:12px 0 10px}
  .dmapa__nombre{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px 10px;padding:0 0 8px}
  .dmapa__nombre b{font-size:1.1rem}
  .dmapa__pista{min-height:24px}
  .dcierre__sede{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .dcierre__tel{grid-column:2}
}

/* ==================== 21. PEDIDOS DEL JEFE DE LA ACADEMIA (13-sep-2026) ====================
   Portada: «Quiénes somos» (capítulo 01), «Hoy en Vinces» más visual y «Tu
   esquina» más grande. Nosotros: el mosaico de «Formamos personas, forjamos
   campeones» y el homenaje al fundador, «la figura clave de la página». */

/* ---- Portada · 01 Quiénes somos ----
   Texto a la izquierda y un collage de tres fotos de grupo cortadas en
   diagonal (la firma de la marca), con el escudo encima; debajo, cuatro
   pilares numerados. Sin retratos: las personas salen en «Tu esquina».
   20-sep-2026: las fotos de grupo son panorámicas, así que las tres van en
   franjas horizontales apiladas (antes, tres paneles verticales con las
   fotos de disciplina, que se repetían en todo el sitio). */
/* Menos aire (13-sep-2026, «mucho espacio arriba y abajo»): con --sec eran
   128 px arriba y, abajo, 128 más los 128 de la cartelera, 256 px vacíos. */
.section.somos{padding-top:clamp(52px,6vw,88px);padding-bottom:clamp(36px,4vw,56px)}
.somos + .cartel-sec{padding-top:clamp(32px,3.6vw,52px)}
.somos__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(32px,5vw,84px)}
.somos__lead{margin-top:22px;max-width:52ch;color:var(--texto-suave);font-size:1.08rem;line-height:1.7}
.somos__cta{margin-top:28px}
.somos__collage{--s:30px;position:relative;display:flex;flex-direction:column;height:clamp(420px,42vw,560px)}
.somos__panel{position:relative;flex:1 1 0;min-height:0;margin:calc(var(--s) * -1 + 6px) 0 0;overflow:hidden;background:#070708;
  clip-path:polygon(0 var(--s),100% 0,100% calc(100% - var(--s)),0 100%)}
.somos__panel:first-child{margin-top:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--s)),0 100%)}
.somos__panel:last-child{clip-path:polygon(0 var(--s),100% 0,100% 100%,0 100%)}
.somos__panel--centro{flex-grow:1.45;transform:translateX(-26px)}
.somos__panel picture{position:absolute;inset:0}
.somos__panel img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.somos__panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(7,7,8,.42),rgba(7,7,8,0) 46%)}
.somos__panel--centro::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:1;width:5px;background:var(--rojo)}
.somos__escudo{position:absolute;left:-12px;bottom:-40px;z-index:2;width:clamp(112px,11vw,156px)}
.somos__escudo img{width:100%;height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.75))}
.somos__pilares{list-style:none;counter-reset:pilar;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(56px,5.6vw,80px);border-top:1px solid var(--linea)}
.somos__pilares li{counter-increment:pilar;position:relative;padding:28px clamp(16px,2vw,28px) 0;border-left:1px solid var(--linea)}
.somos__pilares li:first-child{padding-left:0;border-left:0}
.somos__pilares li::before{content:"0" counter(pilar);display:block;margin-bottom:14px;font:italic 900 2.4rem/1 var(--f-display);color:var(--rojo-txt)}
.somos__pilares li::after{content:"";position:absolute;left:0;top:-2px;width:46px;height:3px;background:var(--rojo)}
.somos__pilares b{display:block;font:900 1.3rem/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.somos__pilares p{margin-top:10px;color:var(--texto-suave);font-size:.95rem;line-height:1.6}

/* ---- Portada · Hoy en Vinces ----
   La próxima clase en grande (foto de su disciplina, hora en su color, cuenta
   regresiva y botón), la línea del día con la marca de «ahora» y los turnos
   con la hora en grande. */
.hoy{position:relative;background:var(--superficie);border:1px solid var(--linea);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.hoy::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--rojo) 0 22%,transparent 22%)}
.hoy__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px;padding:clamp(24px,3vw,34px) clamp(20px,3vw,36px) 0}
.hoy__etq{font:800 .74rem/1.2 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-tenue)}
.hoy__dia{margin-top:10px;font:900 clamp(2.3rem,4.6vw,3.8rem)/.9 var(--f-display);text-transform:uppercase}
.hoy__dia span{font-style:italic;color:var(--rojo-txt)}
.hoy__dia small{font-size:.46em;letter-spacing:.04em;color:var(--texto-suave)}
.hoy__reloj{display:flex;align-items:center;gap:9px;margin-top:14px;font:800 .76rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.hoy__reloj b{font-size:1.05rem;letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums}
.hoy__reloj i{width:9px;height:9px;border-radius:50%;background:var(--verde-wa)}
.hoy__sede{display:none}
.hoy__sede.is-on{display:block}
html:not(.js) .hoy__sede{display:block}
html:not(.js) .hoy__sede + .hoy__sede{border-top:1px solid var(--linea)}
.hoy__cuerpo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.6fr);gap:clamp(16px,2.2vw,26px);
  padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px) clamp(22px,3vw,34px)}
.hoy__next{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;
  padding:clamp(20px,2.4vw,28px);background:#070708;border-radius:var(--r);box-shadow:inset 0 -6px 0 var(--c)}
.hoy__next-foto{position:absolute;inset:0;z-index:-2}
.hoy__next-foto picture{position:absolute;inset:0}
.hoy__next-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hoy__next::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,7,8,.97) 0,rgba(7,7,8,.84) 40%,rgba(7,7,8,.2) 72%,rgba(7,7,8,.45) 100%)}
.hoy__next-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:auto}
.hoy__estado{padding:7px 10px;background:var(--rojo);color:#fff;font:800 .72rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.hoy__estado.is-vivo{background:var(--verde-wa);color:#04140a}
.hoy__next-k span:not(.hoy__estado){padding:7px 10px;background:rgba(7,7,8,.78);color:#fff;font:800 .74rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.hoy__next-hora{margin-top:18px;font:italic 900 clamp(3.8rem,6.4vw,5.8rem)/.82 var(--f-display);letter-spacing:-.01em;color:var(--c);font-variant-numeric:tabular-nums}
.hoy__next-nom{margin-top:12px;font:900 clamp(1.7rem,2.6vw,2.3rem)/.95 var(--f-display);text-transform:uppercase}
.hoy__next-nom small{font-size:.52em;letter-spacing:.06em;color:#d6d5d9}
.hoy__next-det{margin-top:10px;color:#d6d5d9;font-size:.95rem;line-height:1.45}
.hoy__next .btn{align-self:flex-start;margin-top:18px}
.hoy__vista{display:grid;align-content:start;gap:clamp(14px,1.8vw,20px);min-width:0}
/* La línea del día: tramos del color de cada disciplina, con un anillo del
   color del fondo para que dos tramos seguidos no se fundan */
.hoy__linea{padding:16px 18px 8px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r)}
.hoy__pista{position:relative;height:calc(var(--carriles,1) * 30px - 8px);margin-top:26px}
.hoy__pista::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--linea-2)}
.hoy__tramo{position:absolute;left:var(--x);top:calc(var(--k,0) * 30px);width:max(var(--w),6px);height:22px;border-radius:4px;
  background:var(--c);box-shadow:0 0 0 2px var(--fondo);transition:opacity .4s}
.hoy__tramo.is-pasada{opacity:.3}
.hoy__ahora{position:absolute;left:var(--x);top:-26px;bottom:-6px;width:2px;background:#fff;transform:translateX(-1px)}
.hoy__ahora b{position:absolute;top:0;left:50%;padding:4px 7px;background:#fff;color:#0a0a0b;white-space:nowrap;transform:translate(-50%,-4px);
  font:800 .62rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.hoy__horas{position:relative;height:24px;margin-top:12px;border-top:1px solid var(--linea)}
.hoy__horas span{position:absolute;left:var(--x);top:7px;transform:translateX(-50%);font:800 .68rem/1 var(--f-display);letter-spacing:.06em;
  color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.hoy__horas span:first-child{transform:none}
.hoy__horas span:last-child{transform:translateX(-100%)}
.hoy__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hoy__col{padding:16px 14px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r)}
.hoy__turno{display:flex;align-items:center;gap:9px;margin-bottom:12px;font:900 1.02rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.hoy__turno .ico{width:20px;height:20px;color:var(--rojo-txt)}
.hoy__turno small{margin-left:auto;font:800 .66rem/1 var(--f-display);letter-spacing:.08em;color:var(--texto-tenue)}
.hoy__list{list-style:none;display:grid;gap:8px}
.hoy__item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;padding:10px 12px;
  background:var(--superficie-2);border-left:4px solid var(--c);border-radius:0 var(--r) var(--r) 0;transition:opacity .3s}
.hoy__item time{grid-row:1/span 2;font:italic 900 1.4rem/1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
.hoy__item b{font:900 .96rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.hoy__item b small{font-size:.78em;color:var(--texto-suave)}
.hoy__item span{grid-column:2;color:var(--texto-suave);font-size:.8rem;line-height:1.3}
/* Ya terminó: gris legible y sin su color (con opacity bajaba del contraste AA, lo marcó axe) */
.hoy__item.is-pasada{border-left-color:var(--linea-2)}
.hoy__item.is-pasada time,.hoy__item.is-pasada b,.hoy__item.is-pasada b small,.hoy__item.is-pasada span{color:var(--texto-tenue)}
.hoy__vacio{color:var(--texto-tenue);font-size:.88rem}
.hoy__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px clamp(20px,3vw,36px);border-top:1px solid var(--linea)}
.hoy__foot p{color:var(--texto-tenue);font-size:.86rem}

/* ---- Portada · Tu esquina ----
   Más grande: las tarjetas suben en arco hacia el fundador, al centro y más
   alto, con un halo rojo detrás (degradado, sin blur). Cada entrenador lleva
   abajo el filete del color de su disciplina. */
.esquina-sec .container{max-width:1480px}
.equipo5.esquina{position:relative;isolation:isolate;display:grid;align-items:end;gap:clamp(10px,1.2vw,16px);padding-top:24px;
  grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.32fr) repeat(2,minmax(0,1fr))}
.esquina::before{content:"";position:absolute;left:50%;top:45%;z-index:-1;width:min(960px,92%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,42,.2),rgba(225,29,42,0))}
.esquina .coach{height:clamp(360px,33vw,470px);aspect-ratio:auto;transition:transform .4s var(--ease)}
.esquina .coach:nth-child(2),.esquina .coach:nth-child(4){height:clamp(410px,37vw,530px)}
.esquina .coach--fundador{height:clamp(460px,42vw,600px);box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.esquina .coach:hover{transform:translateY(-8px)}
.esquina .coach::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:5px;background:var(--c,var(--rojo))}
.esquina .coach--fundador::before{background:#e9e8e6}
.esquina .coach__top > .tag{display:none}
.esquina .coach__in{padding:0 clamp(14px,1.6vw,22px) clamp(18px,2vw,26px)}
.esquina .coach__alias{font-size:.8rem}
.esquina .coach h3{font-size:clamp(1.35rem,1.9vw,2.1rem)}
.esquina .coach--fundador h3{font-size:clamp(1.7rem,2.5vw,2.7rem)}
.esquina .coach__spec{font-size:.76rem}

/* ---- Nosotros · Formamos personas, forjamos campeones ----
   Mosaico editorial en zigzag (20-sep-2026, con las fotos de grupo, que son
   panorámicas): foto ancha y dos cifras; el texto y los valores; dos cifras
   y la otra foto ancha. En el móvil todo baja en dos columnas. */
.mosaico-n{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:clamp(10px,1.2vw,16px);
  grid-template-areas:
    "a a a a a a a a a n1 n1 n1"
    "a a a a a a a a a n2 n2 n2"
    "t t t t t t t v v v v v"
    "n3 n3 n3 b b b b b b b b b"
    "n4 n4 n4 b b b b b b b b b"}
.mosaico-n > :nth-child(1){grid-area:a}
.mosaico-n > :nth-child(2){grid-area:t}
.mosaico-n > :nth-child(3){grid-area:n1}
.mosaico-n > :nth-child(4){grid-area:n2}
.mosaico-n > :nth-child(5){grid-area:b}
.mosaico-n > :nth-child(6){grid-area:n3}
.mosaico-n > :nth-child(7){grid-area:n4}
.mosaico-n > :nth-child(8){grid-area:v}
.mosaico-n figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:#070708}
.mosaico-n figure picture{position:absolute;inset:0}
.mosaico-n figure img{width:100%;height:100%;object-fit:cover}
.mosaico-n figure img{object-position:50% 45%}
.mosaico-n__txt{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(22px,2.8vw,36px);
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r)}
.mosaico-n__txt p{color:var(--texto-suave);font-size:1.02rem;line-height:1.7}
.mosaico-n__txt b{color:#fff;font-weight:600}
.mosaico-n__num{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px 22px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r)}
.mosaico-n__num::before{content:"";position:absolute;left:22px;top:20px;width:26px;height:5px;background:var(--rojo);transform:skewX(-24deg)}
.mosaico-n__num b{font:900 clamp(3rem,5vw,4.6rem)/.85 var(--f-display);font-variant-numeric:tabular-nums}
.mosaico-n__num span{font:800 .74rem/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.mosaico-n__num--rojo{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}
.mosaico-n__num--rojo::before{background:#fff}
.mosaico-n__num--rojo span{color:#ffe3e5}
/* «El legado continúa» (21-sep-2026): la frase de la academia, con el filete
   rojo a la izquierda y el escudo de fondo, apenas visible */
.mosaico-n__legado{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:clamp(24px,2.8vw,38px) clamp(24px,2.8vw,38px) clamp(24px,2.8vw,38px) clamp(30px,3.2vw,44px);
  background:radial-gradient(120% 90% at 100% 100%,rgba(225,29,42,.2),rgba(225,29,42,0) 60%),#070708;border:1px solid var(--linea);border-radius:var(--r)}
.mosaico-n__legado::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--rojo)}
.mosaico-n__legado::after{content:"";position:absolute;right:-12%;top:50%;z-index:-1;width:62%;aspect-ratio:1;translate:0 -50%;opacity:.09;pointer-events:none;
  background:url(../img/logo/vinces-fight-mono.webp) center/contain no-repeat}
.mosaico-n__legado-k{display:flex;align-items:center;gap:10px;font:800 .74rem/1.2 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-suave)}
.mosaico-n__legado-k::before{content:"";width:22px;height:5px;background:var(--rojo);transform:skewX(-24deg)}
.mosaico-n__legado-t{font:900 clamp(2.5rem,4.2vw,4rem)/.86 var(--f-display);letter-spacing:-.005em;text-transform:uppercase;color:#f5f4f2}
.mosaico-n__legado-t span,.mosaico-n__legado-t em{display:block}
.mosaico-n__legado-t em{font-style:italic;color:var(--rojo-txt);padding-right:.05em}
@media (max-width:980px){
  .mosaico-n__legado{min-height:210px}
  .mosaico-n__legado-t{font-size:clamp(2.7rem,12.5vw,4.4rem)}
  .mosaico-n__legado::after{width:48%;right:-6%}
}

/* ---- Nosotros · Homenaje a Alexander Vinces ----
   «La figura clave de la página»: su retrato a gran tamaño a la derecha,
   fundido hacia el texto, el nombre enorme y sus distinciones. Digno: blanco
   sobre negro, sin rojo de acento ni animación (el rojo lo pone su retrato).
   Entra en una sola pantalla (13-sep-2026: «tengo que deslizar para verlo
   completo»): la sección mide la pantalla menos la barra de navegación, y el
   nombre y los espacios crecen con el ALTO de la pantalla, no sólo con el ancho. */
.tributo{position:relative;isolation:isolate;overflow:hidden;background:#050506;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.tributo__foto{position:absolute;top:0;right:0;bottom:0;z-index:-1;width:min(54vw,920px);margin:0}
.tributo__foto picture{position:absolute;inset:0}
/* 30 % (antes 16 %): con la sección a la medida de la pantalla, la cara quedaba
   muy abajo (Johnny, 13-sep-2026: «sube un poco al profe»). Ahora va a la
   altura del nombre, con aire sobre la cabeza. */
.tributo__foto img{width:100%;height:100%;object-fit:cover;object-position:40% 30%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.7) 18%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.7) 18%,#000 38%)}
.tributo__foto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#050506 0,rgba(5,5,6,.75) 20%,rgba(5,5,6,0) 44%)}
/* Alto: la pantalla menos la barra, los 16 px que deja el ancla (scroll-padding) y los 2 px de bordes */
.tributo__in{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(calc(100vh - var(--nav-h) - 18px),940px);min-height:min(calc(100svh - var(--nav-h) - 18px),940px);
  padding-top:clamp(28px,5vh,64px);padding-bottom:clamp(22px,4vh,48px)}
.tributo__txt{max-width:min(720px,56%)}
.tributo__k{display:flex;align-items:center;gap:14px;font:800 .78rem/1.2 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:#d6d5d9}
.tributo__k::before{content:"";flex:none;width:40px;height:2px;background:#e9e8e6}
.tributo__nombre{margin-top:clamp(10px,2vh,22px);font:900 clamp(3rem,min(7.6vw,11vh),6.6rem)/.84 var(--f-display);letter-spacing:-.005em;text-transform:uppercase;color:#f5f4f2}
.tributo__nombre span{display:block}
.tributo__alias{margin-top:clamp(8px,1.4vh,16px);font:italic 900 clamp(1.2rem,min(2.2vw,3.6vh),2rem)/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#b4b3b9}
.tributo__lead{margin-top:clamp(12px,2.2vh,24px);max-width:62ch;color:#cfced3;font-size:1rem;line-height:1.65}
.tributo__cita{margin:clamp(12px,2.2vh,24px) 0 0;padding-left:20px;border-left:3px solid #e9e8e6;font:italic 800 clamp(1.1rem,min(1.6vw,2.6vh),1.45rem)/1.3 var(--f-display);color:#f5f4f2}
.tributo__honores{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(20px,4vh,56px);border-top:1px solid rgba(255,255,255,.2)}
.tributo__honores li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 14px;padding:clamp(14px,2.2vh,24px) 20px 4px;border-left:1px solid rgba(255,255,255,.12)}
.tributo__honores li:first-child{padding-left:0;border-left:0}
.tributo__honores .ico{grid-row:1/span 2;width:30px;height:30px;stroke-width:1.4;color:#e9e8e6}
.tributo__honores b{font:900 clamp(1.4rem,min(2.6vw,4vh),2.4rem)/1 var(--f-display);text-transform:uppercase;color:#fff}
.tributo__honores span{font:800 .74rem/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#b4b3b9}

@media (max-width:980px){
  .somos__in,.hoy__cuerpo{grid-template-columns:minmax(0,1fr)}
  .somos__collage{height:clamp(340px,80vw,500px)}
  .somos__panel--centro{transform:none}
  .somos__pilares{grid-template-columns:repeat(2,minmax(0,1fr))}
  .somos__pilares li:nth-child(3){padding-left:0;border-left:0}
  .somos__pilares li:nth-child(n+3){margin-top:12px}
  .hoy__next{min-height:360px}
  .mosaico-n{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;grid-template-areas:"t t" "a a" "n1 n2" "b b" "n3 n4" "v v"}
  .mosaico-n__a,.mosaico-n__b{aspect-ratio:16/9}
  .mosaico-n__num{min-height:150px}
  /* Retrato más bajo (la cara queda arriba) y el texto montado sobre su pecho */
  .tributo__foto{position:relative;top:auto;right:auto;bottom:auto;width:100%;aspect-ratio:4/3;max-height:min(44svh,520px)}
  .tributo__foto img{-webkit-mask-image:none;mask-image:none}
  .tributo__foto::after{background:linear-gradient(0deg,#050506 0,rgba(5,5,6,.82) 30%,rgba(5,5,6,0) 62%)}
  .tributo__in{min-height:0;margin-top:-120px;padding-top:0}
  .tributo__txt{max-width:none}
  .tributo__honores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tributo__honores li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .equipo5.esquina{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;padding-top:0}
  .esquina .coach,.esquina .coach:nth-child(2),.esquina .coach:nth-child(4){height:auto;aspect-ratio:3/4}
  /* 21-sep-2026 («se ve muy grande en celular»): el fundador ya no va a todo
     el ancho; es una tarjeta más, primero y al lado de Fiorela. En el retrato
     la cara está al 41 % del ancho: se acerca un 10 % y se corre hacia el
     centro, sin dejar bordes vacíos. El último, si queda solo, va al centro. */
  .esquina .coach--fundador{order:-1}
  .esquina .coach--fundador img,.esquina .coach--fundador:hover img{object-position:50% 12%;transform:translateX(5%) scale(1.1);transform-origin:50% 0}
  .esquina > .coach:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
  .esquina .coach:hover{transform:none}
}
@media (max-width:760px){
  .hoy__cols{grid-template-columns:minmax(0,1fr)}
  .hoy__col.is-vacia{display:none}
  .hoy__next-hora{font-size:clamp(3.4rem,17vw,4.6rem)}
  .somos__escudo{left:0;bottom:-30px;width:96px}
  .somos__collage{--s:18px}
  .somos__pilares{grid-template-columns:minmax(0,1fr)}
  .somos__pilares li,.somos__pilares li:nth-child(3){display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;padding:20px 0 0;border-left:0}
  .somos__pilares li::before{grid-row:1/span 2;margin:0;font-size:2rem}
  .somos__pilares li:nth-child(n+2){margin-top:0}
  .esquina .coach h3{font-size:clamp(1.1rem,5vw,1.4rem)}
  .esquina .coach--fundador h3{font-size:clamp(1.1rem,5vw,1.4rem)}
  /* Retrato cuadrado desde arriba: cabeza, hombros y la medalla enteros (en
     3:2 se veía cortado; en 4:5, muy grande); el texto se monta sobre la parte baja */
  .tributo__foto{aspect-ratio:1/1;max-height:none}
  .tributo__foto img{object-position:40% 8%}
  .tributo__nombre{margin-top:10px;font-size:clamp(2.5rem,12vw,4.2rem)}
  .tributo__in{margin-top:-120px;padding-bottom:20px}
  .tributo__lead{margin-top:12px;font-size:.95rem;line-height:1.55}
  .tributo__cita{margin-top:14px;font-size:1.05rem}
  .tributo__honores{margin-top:18px}
  .tributo__honores li{grid-template-columns:auto minmax(0,1fr);gap:0 10px;padding:12px 10px 2px}
  .tributo__honores li:nth-child(n+3){padding-top:10px}
  .tributo__honores .ico{grid-row:1/span 2;width:22px;height:22px}
  .tributo__honores b{font-size:1.2rem}
  .tributo__honores span{font-size:.64rem;letter-spacing:.08em}
}

/* ==================== 22. PORTADA «EDITORIAL» (14-sep-2026) ====================
   Propuesta B de personalizacion/propuestas-portada/, la elegida por la
   academia. Reemplaza a «La salida» (13-sep-2026).
   · Portada de revista, asimétrica: la escena del diseñador ocupa dos
     tercios, cortada en diagonal como la firma de la marca (la X del escudo,
     las líneas de sus cuadros de horario), con un filete rojo doble en el corte.
   · El titular gigante («El legado continúa», 16-sep-2026) cruza el corte y
     se monta sobre la foto. Abajo, la ficha de la academia con cifras reales y la próxima clase.
   · El borde de la escena se ancla al contenedor (390 px después de donde
     empieza el texto), no a la pantalla: en monitores anchos la composición se
     mantiene. El filete usa la misma caja, sin recorte.
   · Todo va en una rejilla de dos filas: la escena, el filete y el texto en la
     primera, la ficha en la segunda. Así la foto y el filete terminan justo en
     la línea de la ficha, y la nota del mural es un pie de foto: su borde de
     abajo coincide con el de los botones y el derecho con el del botón «Clase
     de prueba» del menú (arriba tapaba las cabezas de los peleadores).
   · Nunca se amplía la foto: el alto de la portada se topa en el alto real de
     la imagen (--h-max, desde portada.json).
   · La foto sale del script con un 20 % menos de saturación: el rojo luminoso
     queda para la tipografía y los botones.
   · Rendimiento: sin filter ni blur; sólo animan opacity y transform. */
.editorial{position:relative;isolation:isolate;overflow:hidden;background:#070708;
  min-height:max(640px,min(100svh,var(--h-max,941px)));display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  --foto-w:calc(100% - max(0px,(100% - var(--contenedor)) / 2) - var(--gutter) - 390px)}
.editorial::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(40vw 60vh at 0% 100%,rgba(225,29,42,.12),rgba(225,29,42,0) 100%),
  repeating-linear-gradient(-66deg,rgba(255,255,255,.028) 0 1px,transparent 1px 14px)}
/* Escena y filete, absolutos DENTRO de la primera fila (grid-area): terminan en
   la ficha y no suman su tamaño natural al alto de la portada. En un absoluto,
   el final «auto» sería el borde de la sección: por eso 1/1/2/2 completo. */
.editorial__foto{position:absolute;z-index:-2;grid-area:1/1/2/2;top:0;right:0;bottom:0;width:var(--foto-w);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.editorial__foto picture{display:block;width:100%;height:100%}
.editorial__img{width:100%;height:100%;object-fit:cover;object-position:58% 22%}
.editorial__foto::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,7,8,.62) 0,rgba(7,7,8,.2) 26%,rgba(7,7,8,0) 44%),
  linear-gradient(0deg,rgba(7,7,8,.9) 0,rgba(7,7,8,0) 30%),
  linear-gradient(180deg,rgba(5,5,5,.5) 0,rgba(5,5,5,0) 22%)}
/* Filete rojo doble a lo largo del corte (SVG estirado, trazo de grosor fijo) */
.editorial__filo{position:absolute;z-index:-1;grid-area:1/1/2/2;top:0;right:0;bottom:0;width:var(--foto-w);height:100%;overflow:visible;pointer-events:none}
/* Cortina que se abre al cargar, siguiendo el corte */
.editorial__cortina{position:absolute;z-index:-1;top:0;bottom:0;right:-10%;width:80%;background:#070708;
  transform-origin:100% 50%;transform:skewX(-9deg) scaleX(0);pointer-events:none}

/* El escudo del menú cuelga bajo la barra (110 px hasta 1100 px de ancho, 84 px
   después): el rótulo empieza siempre por debajo, también en pantallas bajas.
   Titular, márgenes y ficha se miden con el alto de la pantalla para que la
   portada entera, con sus cifras, entre en laptops de 1366×657 y en pantallas
   de 1920 px con Windows al 125 % (1536×730). */
.editorial__in{position:relative;grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) 230px;column-gap:40px;
  align-items:start;align-content:center;
  padding-top:max(calc(var(--nav-h) + clamp(14px,3vh,36px)),138px);padding-bottom:clamp(14px,2.6vh,28px)}
.editorial__txt{max-width:940px}
.editorial__ficha{grid-area:2/1}
.editorial__rotulo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:800 clamp(.72rem,.85vw,.82rem)/1.2 var(--f-display);
  letter-spacing:.24em;text-transform:uppercase;color:#d6d5d9}
.editorial__rotulo::before{content:"";width:34px;height:5px;background:var(--rojo);transform:skewX(-24deg)}
.editorial__h1{margin-top:clamp(12px,1.8vh,20px);color:#fff;font:900 clamp(3.2rem,min(9.4vw,12.8vh),9.8rem)/.8 var(--f-display);
  text-transform:uppercase;letter-spacing:-.008em}
.editorial__h1 .l{display:block}
.editorial__h1 em{display:inline-block;font-style:italic;color:var(--rojo-txt);padding-right:.05em}
.editorial__lead{max-width:40ch;margin-top:clamp(14px,2.2vh,24px);color:#d2d1d6;font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.6}
.editorial__lead b{color:#fff;font-weight:600}
.editorial__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.6vh,28px)}
/* Secundario con borde claro: tocable sin competir con el rojo. Fondo casi opaco:
   el filete pasa por detrás y no debe transparentarse a través del botón. */
.editorial .btn--ghost{background:rgba(7,7,8,.94);border-color:rgba(255,255,255,.46);color:#fff}
.editorial .btn--ghost:hover{background:rgba(30,30,34,.92);border-color:#fff}

/* Quién es el del mural: sobria (sin rojo ni movimiento) */
.editorial__pie{grid-column:2;align-self:end;display:grid;gap:5px;padding:13px 16px;border-left:2px solid rgba(255,255,255,.4);
  background:linear-gradient(90deg,rgba(6,6,7,.86),rgba(6,6,7,.6));
  color:#c9c8cd;font-size:.84rem;line-height:1.4;transition:border-color .2s}
.editorial__pie:hover{border-color:#fff}
.editorial__pie small{font:800 .66rem/1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#8b8a92}
.editorial__pie b{font:900 1.06rem/1.08 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:#f1f0ee}

/* Ficha de la academia: cifras reales y la próxima clase */
.editorial__ficha{position:relative;border-top:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(7,7,8,.72),#070708)}
.editorial__ficha-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,2.2fr)}
.editorial__cifra{display:flex;align-items:center;gap:12px;padding:clamp(10px,1.8vh,18px) 18px;border-left:1px solid rgba(255,255,255,.1)}
.editorial__cifra:first-child{padding-left:0;border-left:0}
.editorial__cifra > b{font:italic 900 clamp(2.3rem,3.3vw,3.2rem)/.9 var(--f-display);color:#fff}
.editorial__cifra > span{font:800 .72rem/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#b4b3b9}
.editorial__proxima{gap:14px;padding-right:0;color:#dcdbe0;transition:background .2s}   /* la flecha llega al borde del contenedor */
.editorial__proxima:hover{background:rgba(255,255,255,.04)}
.editorial__proxima-txt{display:grid;gap:4px}
.editorial__proxima-txt b{font:800 .7rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#8b8a92}
.editorial__proxima-txt span{font:900 clamp(.9rem,1.1vw,1.04rem)/1.25 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.editorial__proxima .ico{width:20px;height:20px;margin-left:auto;color:var(--rojo-txt);transition:transform .2s var(--ease)}
.editorial__proxima:hover .ico{transform:translateX(4px)}
.editorial__punto{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,var(--rojo));box-shadow:0 0 0 3px rgba(255,255,255,.1)}

/* El WhatsApp flotante espera a que se baje: arriba, la cabecera ya tiene el suyo */
.wa-float{transition:transform .2s,opacity .3s,visibility 0s}
body:has(.editorial):has(.nav:not(.is-scrolled)) .wa-float{opacity:0;visibility:hidden;transform:scale(.8);
  transition:transform .3s,opacity .3s,visibility 0s .3s}

@media (prefers-reduced-motion:no-preference){
  html.js .editorial__cortina{animation:ed-cortina 1.15s .1s cubic-bezier(.7,0,.2,1) both}
  html.js .editorial__img{animation:ed-acerca 2.6s var(--ease) both}
  html.js .editorial__rotulo{animation:aparece .7s .35s var(--ease) both}
  html.js .editorial__h1 .l{animation:ed-entra .9s .45s var(--ease) both}
  html.js .editorial__h1 .l + .l{animation-delay:.56s}
  html.js .editorial__h1 .l + .l + .l{animation-delay:.67s}
  html.js .editorial__lead,html.js .editorial__acciones{animation:aparece .8s .9s var(--ease) both}
  html.js .editorial__cifra{animation:aparece .7s var(--ease) both;animation-delay:calc(1s + var(--i,0) * 70ms)}
  .editorial__proxima.is-ahora .editorial__punto{animation:ed-vivo 1.4s ease-in-out infinite}
  @keyframes ed-cortina{from{transform:skewX(-9deg) scaleX(1)}to{transform:skewX(-9deg) scaleX(0)}}
  @keyframes ed-acerca{from{transform:scale(1.08)}to{transform:none}}
  @keyframes ed-entra{from{opacity:0;transform:translateX(-.25em)}to{opacity:1;transform:none}}
  @keyframes ed-vivo{50%{opacity:.3}}
}
@media (max-width:1240px){
  .editorial__in{grid-template-columns:minmax(0,1fr)}
  .editorial__pie{display:none}
}
@media (max-width:1100px){
  .editorial{--foto-w:74%}
  .editorial__in{padding-top:max(calc(var(--nav-h) + clamp(14px,3vh,36px)),112px)}
  .editorial__ficha-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .editorial__proxima{grid-column:1/-1;padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}
@media (max-width:760px){
  .editorial{display:block;min-height:0;padding-top:var(--nav-h)}
  .editorial::before{background:radial-gradient(90vw 60vw at 0% 60%,rgba(225,29,42,.12),rgba(225,29,42,0) 100%)}
  /* La escena arriba, recortada a 8:9 con los tres peleadores y el mural */
  .editorial__foto{position:relative;width:100%;height:auto;aspect-ratio:8/9;clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
  .editorial__img{object-position:50% 0}
  .editorial__foto::after{background:linear-gradient(0deg,rgba(7,7,8,.85) 0,rgba(7,7,8,0) 38%)}
  .editorial__filo,.editorial__cortina{display:none}
  .editorial__in{display:block;margin-top:-28vw;padding-top:0;padding-bottom:28px}
  .editorial__rotulo{font-size:.68rem;letter-spacing:.18em}
  .editorial__rotulo::before{width:24px;height:4px}
  .editorial__h1{margin-top:14px;font-size:clamp(3.2rem,19vw,5.6rem)}
  .editorial__lead{margin-top:20px;font-size:1rem}
  .editorial__acciones .btn{flex:1 1 100%}
  .editorial__ficha-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial__cifra{padding:18px 0 18px 16px}
  .editorial__cifra:nth-child(odd){padding-left:0;border-left:0}
  .editorial__cifra:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .editorial__cifra > b{font-size:2.4rem}
  .editorial__proxima{padding:18px 0}
}

/* ==================== 23. EL LEGADO CONTINÚA Y FACHADAS (16-sep-2026) ====================
   · La directora, Fiorela Herrera, con la misma tarjeta que el equipo y el
     filete claro del fundador (Profesores, «Tu esquina» de la portada).
   · Nosotros: «El legado continúa», justo después del homenaje. Su retrato a
     tamaño original (1086×1337), sin ampliar.
   · Sedes: la foto de la entrada al lado del mapa, en «Cómo llegar» (el mapa
     toma el alto de la foto). La de SMP es vertical y chica (591×755): va en
     una columna más angosta, nunca ampliada. */
.coach--directora .tag{background:#0b0b0c;border-color:#56555c;color:#e9e8e6}
.coach--directora .coach__alias,.coach--directora .coach__spec{color:#b4b3b9}
.coach--directora:hover h3{text-decoration:underline;text-underline-offset:4px}
.esquina .coach--directora::before{background:#e9e8e6}

.direccion__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.direccion__foto{position:relative;margin:0;justify-self:center;width:min(100%,460px);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.direccion__foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#e9e8e6}
.direccion__foto img{width:100%;height:auto}
.direccion__nombre{display:grid;gap:6px;margin-top:20px}
.direccion__nombre b{font:900 clamp(1.7rem,2.8vw,2.6rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;color:#fff}
.direccion__nombre span{font:800 .78rem/1.2 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--texto-suave)}
.direccion .lead{margin-top:18px}
.direccion__acts{margin-top:26px}

/* «Cómo llegar» va a todo el ancho, debajo de las dos columnas (20-sep-2026):
   la fachada a su tamaño y el mapa ocupa el resto, con el mismo alto. */
.sede-llegar{margin-top:clamp(36px,4vw,56px)}
.llegar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);align-items:stretch}
.llegar--vertical{grid-template-columns:minmax(0,.6fr) minmax(0,1.6fr)}
.llegar:not(:has(.fachada)){grid-template-columns:minmax(0,1fr)}     /* sin foto: el mapa solo */
.fachada{margin:0;display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:var(--r);background:var(--superficie);overflow:hidden}
.fachada a{display:block;overflow:hidden}
.fachada img{width:100%;height:auto;transition:transform .7s var(--ease)}
.fachada a:hover img{transform:scale(1.03)}
.fachada figcaption{padding:10px 12px;color:var(--texto-suave);font-size:.86rem;line-height:1.45}
.llegar:has(.fachada) .mapa{aspect-ratio:auto;height:100%;min-height:340px}

@media (max-width:900px){
  .esquina .coach--directora{order:-1}          /* bajo el fundador, primera de la rejilla */
  .direccion__in{grid-template-columns:minmax(0,1fr)}
  .direccion__foto{width:min(100%,380px)}
}
@media (max-width:560px){
  .llegar,.llegar--vertical{grid-template-columns:minmax(0,1fr)}
  .llegar:has(.fachada) .mapa{order:-1;aspect-ratio:4/3;height:auto;min-height:0}   /* primero el mapa, luego la puerta */
}

/* ==================== 24. PULIDA PARA EL LANZAMIENTO (20-sep-2026) ==================== */
/* Sedes: las dos columnas terminan a la misma altura. Las fotos se estiran
   (o se acortan) hasta el alto de la columna del horario. */
@media (min-width:981px){
  .sede-det__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:stretch}
  .sede-det__col{display:flex;flex-direction:column;min-width:0}
  .sede-det__bloque--fotos{flex:1;display:flex;flex-direction:column}
  .sede-det__bloque--fotos .sede-fotos{flex:1;grid-template-rows:minmax(0,1fr) auto}
  .sede-det__bloque--fotos .sede-fotos figure:first-child{aspect-ratio:auto;min-height:280px}
}

/* Profesores: de dos en dos en el celular (pedido de la academia). El
   fundador es una tarjeta más, la primera (21-sep-2026: a todo el ancho «se
   veía muy grande»), con la cara al centro (ver «Tu esquina»). */
@media (max-width:600px){
  .coach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .coach-grid .coach--fundador img,.coach-grid .coach--fundador:hover img{object-position:50% 12%;transform:translateX(5%) scale(1.1);transform-origin:50% 0}
  .coach-grid > .coach:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
  .coach-grid .coach__top{top:8px;left:8px;right:8px}
  .coach-grid .coach__top > .tag{display:none}            /* el conteo de clases no entra en media pantalla */
  .coach-grid .coach__top .tag{padding:4px 6px;font-size:.58rem;letter-spacing:.08em}
  .coach-grid .coach__in{padding:0 10px 12px}
  .coach-grid .coach__alias{margin-bottom:4px;font-size:.6rem;letter-spacing:.08em}
  .coach-grid .coach h3{font-size:1.05rem}
  .coach-grid .coach__spec{gap:5px;margin-top:6px;font-size:.58rem;letter-spacing:.06em}
  .coach-grid .coach__spec .dot{width:6px;height:6px}
}

/* Contacto: las preguntas frecuentes, al centro */
.faq-sec .faq{margin-inline:auto}

/* Contacto: el correo de ventas, debajo del formulario */
.vf-form__correo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea);
  color:var(--texto-suave);font-size:.9rem}
.vf-form__correo .ico{width:18px;height:18px;color:var(--rojo-txt)}
.vf-form__correo a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-msg a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Comunidad: la foto de Nochebuena con el profe Vinces va en la galería (vf_galeria), en un cuadro chico */

/* ---- Portada · Empieza hoy ----
   El profe Vinces recortado (sin fondo) y hasta la cintura (21-sep-2026: sin
   el short), sobre su apellido en grande con contorno, un halo rojo y el
   corte diagonal doble de la marca. Entra con un «pisotón» (cae, aterriza
   con rebote, el texto se sacude y el piso destella). En escritorio la
   cabeza sale por encima del borde de la sección («súbelo»).
   El brillo va en .cierre__fig y el fundido en la imagen: juntos en la misma
   imagen, la máscara cortaba el brillo y se veía un rectángulo. */
.cierre{z-index:1}
.cierre__media{isolation:isolate}
.cierre__fig{position:absolute;left:0;right:0;bottom:0;z-index:2;width:min(100%,460px);margin-inline:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) drop-shadow(-12px -4px 24px rgba(225,29,42,.34))}
.cierre__media .cierre__fig img{position:static;display:block;width:100%;height:auto;max-width:100%;transform:none;
  -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 20%);mask-image:linear-gradient(0deg,transparent 0,#000 20%)}
/* Destello en el piso cuando aterriza */
.cierre__media::before{content:"";position:absolute;left:0;right:-10%;bottom:-8%;z-index:4;height:30%;pointer-events:none;opacity:0;
  background:radial-gradient(50% 50% at 50% 62%,rgba(255,120,126,.5),rgba(225,29,42,.22) 45%,rgba(225,29,42,0) 72%)}
/* El apellido en grande, con contorno, cruza el fondo de toda la sección */
.cierre__marca{position:absolute;left:50%;bottom:-.1em;z-index:-1;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:italic 900 clamp(7rem,21vw,21rem)/.8 var(--f-display);letter-spacing:-.01em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.1)}
.cierre__halo{position:absolute;left:56%;top:50%;z-index:-1;width:min(680px,125%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,42,.42),rgba(225,29,42,.14) 55%,rgba(225,29,42,0))}
.cierre__corte{position:absolute;left:38%;top:10%;bottom:0;z-index:-1;width:18%;background:linear-gradient(180deg,var(--rojo),var(--rojo-hondo));
  transform:skewX(-14deg);transform-origin:50% 100%;opacity:.85}
.cierre__corte::after{content:"";position:absolute;top:8%;bottom:0;left:calc(100% + 14px);width:26%;background:var(--rojo);opacity:.55}
/* Escritorio: dos columnas iguales; la figura un poco más ancha que la suya,
   hacia el margen derecho, y más alta que la sección: la cabeza sale por
   arriba. clip-path recorta abajo y a los costados, no arriba. */
@media (min-width:981px){
  /* overflow-x:clip: sin él, lo que asoma a los costados ensanchaba la página (clip-path sólo recorta lo que se pinta) */
  .cierre{overflow:visible;overflow-x:clip;clip-path:inset(-40vh 0 0 0)}
  .cierre__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
  .cierre__txt{padding:clamp(48px,4.4vw,64px) 0}
  .cierre__fig{left:auto;right:-4%;width:108%;margin:0}
}
@media (min-width:1360px){
  .cierre__fig{right:-8%;width:116%}
}
@media (max-width:980px){
  .cierre__media{height:auto;min-height:0;aspect-ratio:1105/960;max-height:420px}
  .cierre__marca{font-size:clamp(5rem,30vw,9rem)}
  .cierre__corte{left:36%;width:22%}
}
@media (prefers-reduced-motion:no-preference){
  html.js .cierre__media.fx .cierre__fig{opacity:0}
  html.js .cierre__media.fx.is-in .cierre__fig{animation:aterriza .95s cubic-bezier(.3,.6,.3,1) both}
  html.js .cierre__media.fx .cierre__corte{scale:1 0;transition:scale .3s cubic-bezier(.6,0,.4,1) .32s}
  html.js .cierre__media.fx.is-in .cierre__corte{scale:1 1}
  .cierre__media.is-in::before{animation:destello 1s .44s ease-out both}
  .cierre:has(.cierre__media.is-in) .cierre__txt{animation:sacudon .5s .44s both}
  html.js .cierre__marca.fx{opacity:0;transition:opacity 1.4s var(--ease) .2s}
  html.js .cierre__marca.fx.is-in{opacity:1}
  .cierre__halo{animation:halo 4.5s ease-in-out infinite}
  @keyframes halo{50%{opacity:.65;scale:1.06}}
  @keyframes aterriza{0%{opacity:0;translate:0 -90px;scale:1.1}50%{opacity:1;translate:0 8px;scale:.985}68%{translate:0 -4px;scale:1.01}
    84%{translate:0 1px;scale:1}100%{opacity:1;translate:0 0;scale:1}}
  @keyframes destello{0%{opacity:0;scale:.6 .5}22%{opacity:1;scale:1 1}100%{opacity:0;scale:1.3 1.1}}
}

/* ---- Portada · Quiénes somos: el collage con más vida ----
   Marco rojo desfasado detrás, las franjas entran desde los costados, la del
   centro se pasea lento (Ken Burns), al pasar el mouse se destaca una y el
   escudo flota. */
/* Mientras espera para entrar, la franja del centro está 80 px a la derecha:
   sin este recorte, en el celular ensanchaba la página (desborde horizontal). */
.section.somos{overflow-x:clip}
.somos__collage{isolation:isolate}
.somos__collage::before{content:"";position:absolute;inset:22px -14px -18px 20px;z-index:-1;pointer-events:none;
  border:2px solid rgba(225,29,42,.6);transform:skewY(-2.4deg)}
.somos__collage::after{content:"";position:absolute;right:-14px;top:-18px;z-index:-1;width:38%;height:46%;pointer-events:none;
  background:repeating-linear-gradient(-60deg,rgba(225,29,42,.55) 0 2px,transparent 2px 11px)}
.somos__panel img{transition:transform 1.1s var(--ease),filter .5s}
@media (hover:hover){
  .somos__collage:hover .somos__panel img{filter:grayscale(.55) brightness(.6)}
  .somos__collage .somos__panel:hover img{filter:none;transform:scale(1.07)}
}
@media (prefers-reduced-motion:no-preference){
  html.js .somos__collage.fx .somos__panel{opacity:0;translate:-80px 0;transition:opacity .8s var(--ease),translate 1s var(--ease)}
  html.js .somos__collage.fx .somos__panel:nth-child(2){translate:80px 0;transition-delay:.12s}
  html.js .somos__collage.fx .somos__panel:nth-child(3){transition-delay:.24s}
  html.js .somos__collage.fx.is-in .somos__panel{opacity:1;translate:0 0}
  html.js .somos__collage.fx::before{opacity:0;translate:18px 18px;transition:opacity .8s var(--ease) .45s,translate .9s var(--ease) .45s}
  html.js .somos__collage.fx.is-in::before{opacity:1;translate:0 0}
  .somos__panel--centro picture,.mosaico-n figure picture{animation:paseo 18s ease-in-out infinite alternate}
  .somos__escudo img{animation:flota 4.6s ease-in-out infinite alternate}
  @keyframes paseo{from{transform:scale(1.07) translateX(-1.6%)}to{transform:scale(1.07) translateX(1.6%)}}
  @keyframes flota{to{transform:translateY(-9px) rotate(-2deg)}}
}

/* ---- Nosotros · Formamos personas: más efecto ----
   Las fotos se pasean lento y se acercan con un marco rojo al pasar el
   mouse; las cifras cuentan desde cero (main.js) y su filete crece; los
   valores entran uno por uno. */
.mosaico-n figure img{transition:transform 1.1s var(--ease)}
.mosaico-n figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--rojo);transition:box-shadow .35s var(--ease)}
@media (hover:hover){
  .mosaico-n figure:hover img{transform:scale(1.06)}
  .mosaico-n figure:hover::after{box-shadow:inset 0 0 0 3px var(--rojo)}
  .mosaico-n__num{transition:transform .35s var(--ease),border-color .35s}
  .mosaico-n__num:hover{transform:translateY(-4px);border-color:var(--linea-2)}
}
@media (prefers-reduced-motion:no-preference){
  html.js .mosaico-n__num.reveal::before{scale:0 1;transform-origin:0 50%;transition:scale .6s var(--ease) .35s}
  html.js .mosaico-n__num.reveal.is-in::before{scale:1 1}
  html.js .mosaico-n__legado.reveal .mosaico-n__legado-t > *{opacity:0;translate:-32px 0;transition:opacity .6s var(--ease),translate .8s var(--ease)}
  html.js .mosaico-n__legado.reveal .mosaico-n__legado-t em{transition-delay:.18s}
  html.js .mosaico-n__legado.reveal.is-in .mosaico-n__legado-t > *{opacity:1;translate:0 0}
  html.js .mosaico-n__legado.reveal::before{scale:1 0;transform-origin:50% 100%;transition:scale .7s var(--ease) .3s}
  html.js .mosaico-n__legado.reveal.is-in::before{scale:1 1}
  .mosaico-n__legado::after{animation:flota-escudo 7s ease-in-out infinite alternate}
  @keyframes flota-escudo{to{translate:0 -54%;rotate:-4deg}}
}

/* ---- En todo el sitio ----
   · Los títulos de sección caen con un «pisotón» (grandes, aterrizan con
     rebote) y su palabra roja se subraya (main.js les pone .fx-titulo).
   · Los botones rojos y verdes llevan un brillo que cruza al pasar el mouse.
   · Una línea roja arriba marca cuánto falta de la página. */
.vf-avance{position:fixed;left:0;top:0;z-index:130;width:100%;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--rojo-hondo),var(--rojo) 60%,#ff5a63);transform-origin:0 50%;transform:scaleX(0)}
.btn--primary,.btn--wa{overflow:hidden;isolation:isolate}
.btn--primary::after,.btn--wa::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn--primary::after,.btn--wa::after{transition:transform .75s var(--ease)}
  .btn--primary:hover::after,.btn--wa:hover::after{transform:translateX(120%)}
}
@media (prefers-reduced-motion:no-preference){
  /* Sin clip-path para ocultarlo: IntersectionObserver no avisa de un
     elemento recortado entero por su propio clip-path y el título no aparecía. */
  html.js .fx-titulo{opacity:0;transform-origin:25% 100%}
  html.js .center .fx-titulo,html.js .sec-head--center .fx-titulo{transform-origin:50% 100%}
  html.js .fx-titulo.is-in{animation:pisoton .8s cubic-bezier(.3,.6,.3,1) both}
  @keyframes pisoton{0%{opacity:0;scale:1.4}45%{opacity:1;scale:.96}64%{scale:1.025}82%{scale:.995}100%{opacity:1;scale:1}}
  @keyframes pisoton-fuerte{0%{opacity:0;scale:1.9}45%{opacity:1;scale:.95}63%{scale:1.035}81%{scale:.99}100%{opacity:1;scale:1}}
  @keyframes sacudon{0%,100%{translate:0 0}14%{translate:-6px 3px}28%{translate:5px -3px}44%{translate:-4px 2px}60%{translate:3px -1px}78%{translate:-1px 1px}}
  html.js .fx-titulo em{background:linear-gradient(var(--rojo),var(--rojo)) 0 96%/0 .07em no-repeat;transition:background-size .8s var(--ease) .45s}
  html.js .fx-titulo.is-in em{background-size:100% .07em}
}

/* ---- Portadas de cada página (21-sep-2026: «ponle efectos a las portadas de todos los menús») ----
   Las tres cabeceras del sitio (.hero--pagina: Nosotros, Disciplinas,
   Profesores; .hero2: Horarios, Sedes, Comunidad, Contacto y cada
   disciplina; .bhero: Blog):
   · un barrido de luz roja cruza la portada al cargar;
   · el título cae con un «pisotón» fuerte, el texto se sacude al aterrizar
     y su palabra roja se subraya (también en la portada de Inicio);
   · el texto entra en cascada y la pieza de al lado (tablero, puertas,
     mosaico, chat, ficha) llega de costado, con sus partes una por una;
   · las fotos de fondo quedan quietas: sólo aparecen (21-sep-2026, se quitó
     el acercamiento lento y el movimiento con el mouse). */
.hero--pagina::after,.hero2::after,.bhero::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;z-index:4;width:24%;pointer-events:none;
  background:linear-gradient(90deg,rgba(225,29,42,0),rgba(225,29,42,.26) 45%,rgba(255,255,255,.1) 50%,rgba(225,29,42,.26) 55%,rgba(225,29,42,0));
  transform:skewX(-18deg);translate:-160% 0;opacity:0}
.mosaico figure img{transition:transform .8s var(--ease)}
.mosaico figure:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:no-preference){
  html.js .hero--pagina::after,html.js .hero2::after,html.js .bhero::after{animation:barrido 1.6s .15s cubic-bezier(.7,0,.2,1) both}
  html.js .hero__title-main,html.js .hero2__title,html.js .bhero__h1{transform-origin:25% 100%;animation:pisoton-fuerte .85s .1s cubic-bezier(.3,.6,.3,1) both}
  html.js .hero__txt,html.js .hero2__txt,html.js .bhero__txt{animation:sacudon .5s .48s both}
  html.js .editorial__h1 .l{transform-origin:20% 100%;animation:pisoton-fuerte .85s .45s cubic-bezier(.3,.6,.3,1) both}
  html.js .editorial__h1 .l + .l{animation-delay:.62s}
  html.js .editorial__txt{animation:sacudon .5s 1s both}
  html.js .editorial__img{animation:none}
  html.js .hero__title-main em,html.js .hero2__title em,html.js .bhero__h1 em{
    background:linear-gradient(var(--rojo),var(--rojo)) 0 96%/0 .07em no-repeat;animation:subraya .8s .9s var(--ease) forwards}
  html.js .hero__media img{animation:foto-aparece 1.2s var(--ease) both}
  html.js .hero2 .crumb,html.js .hero .crumb,html.js .bhero .crumb{animation:aparece .7s .05s var(--ease) both}
  html.js .hero2__h1 .hero__title-kicker{animation:aparece .7s .15s var(--ease) both}
  html.js .hero2__lead,html.js .bhero__lead{animation:aparece .8s .4s var(--ease) both}
  html.js .hero2__actions{animation:aparece .8s .55s var(--ease) both}
  html.js .hero2 .hero__facts,html.js .hero .hero__facts{animation:aparece .8s .7s var(--ease) both}
  html.js .hero2__visual,html.js .bhero__media,html.js .bhero__nota{animation:pieza-in 1.1s .25s var(--ease) both}
  html.js .bhero__nota{animation-delay:.45s}
  html.js .mosaico > *,html.js .puerta,html.js .tablero__sede{animation:aparece .7s var(--ease) both}
  html.js .mosaico > :nth-child(1){animation-delay:.35s}
  html.js .mosaico > :nth-child(2){animation-delay:.47s}
  html.js .mosaico > :nth-child(3){animation-delay:.59s}
  html.js .mosaico > :nth-child(4){animation-delay:.71s}
  html.js .mosaico > :nth-child(5){animation-delay:.83s}
  html.js .puerta:nth-child(1),html.js .tablero__sede:nth-of-type(2){animation-delay:.4s}
  html.js .puerta:nth-child(2),html.js .tablero__sede:nth-of-type(3){animation-delay:.58s}
  @keyframes barrido{0%{opacity:1;translate:-160% 0}100%{opacity:1;translate:560% 0}}
  @keyframes subraya{to{background-size:100% .07em}}
  @keyframes foto-aparece{from{opacity:0}to{opacity:1}}
  @keyframes pieza-in{from{opacity:0;translate:48px 0;scale:.97}to{opacity:1;translate:0 0;scale:1}}
}
/* Lo que se agranda al caer (títulos) no debe ensanchar la página en el
   celular: cada sección recorta a los costados. clip, no hidden: no crea
   una caja con scroll y los position:sticky siguen funcionando. */
.section{overflow-x:clip}

/* ---- Más efectos en las secciones ----
   · el filete rojo de cada rótulo se dibuja al aparecer (main.js les pone .fx);
   · tarjetas de sedes, «Entrena a tu manera», blog y galería se levantan con
     un brillo rojo al pasar el mouse. */
@media (prefers-reduced-motion:no-preference){
  html.js .kicker.fx::before{scale:0 1;transform-origin:0 50%;transition:scale .6s var(--ease) .1s}
  html.js .kicker.fx .kicker__n::after{scale:0 1;transform-origin:0 50%;transition:scale .6s var(--ease) .2s}
  html.js .kicker.fx.is-in::before,html.js .kicker.fx.is-in .kicker__n::after{scale:1 1}
}
@media (hover:hover){
  .venue,.vcard,.post-card,.gcard,.puerta{transition:translate .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
  .venue:hover,.vcard:hover,.post-card:hover,.gcard:hover{translate:0 -5px;box-shadow:0 22px 44px -22px rgba(225,29,42,.55)}
  .puerta:hover{box-shadow:0 22px 44px -22px rgba(225,29,42,.55)}
}

@media print{
  .nav,.footer,.wa-float,.barra-movil,.hbar,.hdl,.hnow{display:none!important}
  body{padding-top:0;background:#fff;color:#000}
}