/* ==========================================================================
   gimnasio-rc
   Variante tonal B — Galería clara · superficie Editorial (radio 0, filetes)
   Sistema bloqueado en FASE 3. Ningún valor mágico por debajo de :root.
   ========================================================================== */

:root{
  /* ---- color: papel cálido + tinta azul-negra. El acento es el azul REAL
     del logo, muestreado del píxel (#020EF8): sólo en botones de acción. */
  --bg:#F5F4EF;  --bg-2:#FCFBF8; --ink:#0D0F14; --ink-mut:#5B5F69;
  --line:#E1DED6; --accent:#020EF8; --accent-ink:#FCFBF8;
  /* bloques oscuros (firma, cierre y pie): los mismos tonos, papel sobre tinta */
  --ink-rgb:13 15 20; --bg-rgb:245 244 239; --paper-rgb:252 251 248;
  --on-ink-mut:#A6A9B1; --line-ink:#2A2D35;

  /* ---- espacio: escala de 8px, sin improvisar ---------------------------- */
  --s-1:4px;  --s-2:8px;   --s-3:16px;  --s-4:24px;  --s-5:32px;
  --s-6:48px; --s-7:64px;  --s-8:96px;  --s-9:128px; --s-10:192px; --s-11:256px;

  /* ---- tipografía: 5 tamaños (xs · base · lg · xl · 2xl/hero) ------------ */
  --t-xs:   clamp(.875rem, .85rem + .1vw, .9375rem);   /* 14 px mínimo: se lee en móvil */
  --t-base: clamp(1rem,    .96rem + .22vw, 1.1875rem);
  --t-lg:   clamp(1.125rem, 1.04rem + .45vw, 1.5rem);
  --t-xl:   clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --t-2xl:  clamp(2rem,    1.2rem + 3.6vw, 4.5rem);
  --t-hero: clamp(2.125rem, 1rem + 5.4vw, 6.75rem);

  /* Archivo Expanded 800 (display, eco del RC ancho del logo) + Archivo 400/500 */
  --f-display:'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --f-body:   'Archivo', system-ui, sans-serif;
  --w-display:800; --w-body:400; --w-strong:500;

  /* ---- movimiento -------------------------------------------------------- */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-ui: cubic-bezier(.4,0,.2,1);

  /* ---- layout ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw:   1440px;
  --radius: 0px;            /* un solo lenguaje de radio en toda la web */
  --sec-y:  clamp(4.5rem, 8vw, 9rem);
  --top-h:  72px;
  --bar-h:  64px;           /* barra fija de acciones en móvil */
  --scrim:  rgb(var(--ink-rgb)/.86);
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip;
  scroll-padding-top:var(--top-h); }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:var(--w-body); font-size:var(--t-base); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,video,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p,figure,blockquote,dl,dd{ margin:0; }
p{ max-width:65ch; text-wrap:pretty; }
b,strong{ font-weight:var(--w-strong); }
small{ font-size:var(--t-xs); }
abbr[title]{ text-decoration:none; }

h1,h2,h3{ font-family:var(--f-display); font-weight:var(--w-display); margin:0;
  letter-spacing:-.03em; line-height:.98; text-wrap:balance; }
h2{ font-size:var(--t-2xl); }
h3{ font-size:var(--t-lg); letter-spacing:-.015em; line-height:1.15; }

.eyebrow{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--ink-mut); }
.num{ font-variant-numeric:tabular-nums; }
.lead{ font-size:var(--t-lg); line-height:1.45; max-width:42ch; }
.fine{ font-size:var(--t-xs); color:var(--ink-mut); letter-spacing:.02em; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec-y); }
/* Lejos del pliegue: el navegador no las pinta, ni pide sus fotos, hasta que se acercan.
   Sin esto las fotos de abajo arrancan a la vez que el póster del hero y le roban el LCP.
   Alturas MEDIDAS con la web pintada a 1440, 768 y 375 px, MENOS el relleno vertical:
   contain-intrinsic-size fija la caja de contenido y el padding se suma aparte. */
.cut, .metodo, .sala, .clases, .planes, .testimonios, .visita, .pie{ content-visibility:auto; }
.cut{ contain-intrinsic-size:auto 340vh; }
.metodo{ contain-intrinsic-size:auto 790px; }
.sala{ contain-intrinsic-size:auto 999px; }
.clases{ contain-intrinsic-size:auto 1643px; }
.planes{ contain-intrinsic-size:auto 1184px; }
.testimonios{ contain-intrinsic-size:auto 846px; }
.visita{ contain-intrinsic-size:auto 1398px; }
.pie{ contain-intrinsic-size:auto 390px; }
@media (max-width:1023px){
  .cut{ contain-intrinsic-size:auto 300vh; }
  .metodo{ contain-intrinsic-size:auto 1443px; }
  .sala{ contain-intrinsic-size:auto 1224px; }
  .clases{ contain-intrinsic-size:auto 1256px; }
  .planes{ contain-intrinsic-size:auto 1348px; }
  .testimonios{ contain-intrinsic-size:auto 817px; }
  .visita{ contain-intrinsic-size:auto 2292px; }
  .pie{ contain-intrinsic-size:auto 535px; }
}
@media (max-width:719px){
  .metodo{ contain-intrinsic-size:auto 1103px; }
  .sala{ contain-intrinsic-size:auto 1049px; }
  .clases{ contain-intrinsic-size:auto 1918px; }
  .planes{ contain-intrinsic-size:auto 1573px; }
  .testimonios{ contain-intrinsic-size:auto 843px; }
  .visita{ contain-intrinsic-size:auto 2092px; }
  .pie{ contain-intrinsic-size:auto 798px; }
}
.br-d{ display:none; }
@media (min-width:900px){ .br-d{ display:inline; } }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink); padding:var(--s-3) var(--s-4); }
.skip:focus{ left:0; }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; }

/* ---- botones: el acento vive SÓLO aquí ----------------------------------- */
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); }
.cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:52px; padding:0 var(--s-5); border-radius:var(--radius);
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-weight:var(--w-strong); font-size:var(--t-base); letter-spacing:.01em;
  transition:transform .22s var(--ease-ui); }
.cta svg{ width:var(--s-4); height:var(--s-4); flex:none; transition:transform .45s var(--ease); }
.cta::after{ content:""; position:absolute; inset:-40%; pointer-events:none; opacity:0;
  background:radial-gradient(28% 42% at var(--mx,50%) var(--my,50%), rgb(var(--paper-rgb)/.42), transparent 70%);
  transition:opacity .25s var(--ease-ui); }
@media (hover:hover){
  .cta:hover{ transform:translateY(-2px); }
  .cta:hover::after{ opacity:1; }
  .cta:hover svg{ transform:translateY(-2px); }
}
.cta:active{ transform:translateY(1px); transition-duration:.09s; }
.cta--sm{ min-height:44px; padding:0 var(--s-4); font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase; }

.link{ position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-weight:var(--w-strong); text-decoration:none; }
.link::after{ content:""; position:absolute; left:0; right:0; bottom:var(--s-2); height:1px;
  background:currentColor; transform-origin:0 50%; transition:transform .45s var(--ease); }
@media (hover:hover){ .link:hover::after{ transform:scaleX(.35); } }

/* ---- cabecera: se retira al bajar, vuelve al subir -------------------------- */
.top{ position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line);
  background:rgb(var(--bg-rgb)/.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .5s var(--ease); }
.top.oculta{ transform:translateY(-101%); }
.top:focus-within{ transform:none; }
.top__in{ display:flex; align-items:center; gap:var(--s-5); min-height:var(--top-h); }
.brand{ display:inline-flex; align-items:center; gap:var(--s-3); margin-right:auto; min-height:44px;
  text-decoration:none; font-family:var(--f-display); font-weight:var(--w-display);
  font-size:var(--t-base); letter-spacing:-.02em; }
.brand img{ width:40px; height:40px; }
.nav{ display:none; gap:var(--s-5); }
.nav a{ position:relative; text-decoration:none; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  font-weight:var(--w-strong); padding-block:var(--s-3); }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:var(--s-2); height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease); }
@media (hover:hover){ .nav a:hover::after{ transform:scaleX(1); } }
@media (min-width:1024px){ .nav{ display:flex; } }
@media (min-width:1024px) and (max-width:1199px){ .nav{ gap:var(--s-4); } .top__in{ gap:var(--s-4); } }
/* En un teléfono, desenfocar el fondo de una barra pegajosa obliga a la GPU a
   rehacer el desenfoque en CADA fotograma del scroll, y es de lo más caro que
   hay. Barra opaca: se ve prácticamente igual y el scroll va suelto. */
@media (max-width:719px){
  .top .cta--sm{ display:none; }
  .top{ background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ---- 1 · hero ------------------------------------------------------------ */
.hero{ padding-top:var(--s-6); }
.hero__head{ display:grid; gap:var(--s-4); padding-bottom:var(--s-6); }
.hero__t{ font-size:var(--t-hero); letter-spacing:-.04em; line-height:.94; }
.hero__side{ display:grid; gap:var(--s-4); margin-top:var(--s-3); }
/* los datos que se buscan nada más llegar: llenan la columna derecha en escritorio */
.hero__datos{ display:grid; border-top:1px solid var(--line); }
.hero__datos > div{ display:grid; grid-template-columns:var(--s-9) 1fr; gap:var(--s-3); align-items:baseline;
  padding:var(--s-3) 0; border-bottom:1px solid var(--line); animation:aparecer .9s var(--ease) both; }
.hero__datos > div:nth-child(1){ animation-delay:.25s; }
.hero__datos > div:nth-child(2){ animation-delay:.35s; }
.hero__datos > div:nth-child(3){ animation-delay:.45s; }
.hero__datos dt{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--ink-mut); }
.hero__datos dd{ font-weight:var(--w-strong); }
@keyframes aparecer{ from{ opacity:0; transform:translateY(var(--s-3)); } }
@media (min-width:1024px){
  .hero__head{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); }
  .hero__head > .eyebrow, .hero__t{ grid-column:1 / -1; }
  .hero__side{ grid-column:1 / span 6; }
  .hero__datos{ grid-column:8 / -1; align-self:start; margin-top:var(--s-4); }
}
/* la banda se abre desde un marco hacia el borde, una vez, al cargar */
.hero__media{ position:relative; overflow:hidden; aspect-ratio:4 / 5; background:var(--line);
  animation:abrir 1.6s var(--ease) both; }
/* con transform y no con clip-path: se compone en la GPU y no repinta el póster durante la carga */
@keyframes abrir{ from{ transform:scale(.94); } }
/* Escritorio: banda panorámica a sangre. El recorte bajo deja fuera los carteles
   viejos de la pared y se queda con la clase. Altura explícita y no aspect-ratio:
   con max-height, el ratio encogía el ancho y dejaba un hueco a la derecha. */
@media (min-width:720px){
  .hero__media{ aspect-ratio:auto; width:100%; height:min(42vw, 78svh); }
  .hero__media video, .hero__poster{ object-position:50% 88%; }
}
.hero__media video,
.hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__poster{ transition:opacity .8s var(--ease-ui); animation:asentar 1.6s var(--ease) both; }
.hero__media.playing .hero__poster{ opacity:0; }
@keyframes asentar{ from{ transform:scale(1.06); } to{ transform:none; } }

/* ---- el botón que abre un panel: una tarjeta que dice lo que hace ---------- */
.opener{ appearance:none; font:inherit; color:inherit; cursor:pointer; text-align:left; width:100%;
  margin-top:var(--s-7); padding:var(--s-4) var(--s-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4) var(--s-5);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s var(--ease-ui), transform .3s var(--ease-ui); }
.opener__txt{ flex:1 1 260px; display:grid; gap:var(--s-1); }
.opener__k{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--ink-mut); }
.opener__t{ font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg);
  letter-spacing:-.02em; line-height:1.15; }
.opener__d{ color:var(--ink-mut); }
.opener__go{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-4);
  border:1px solid var(--ink); white-space:nowrap;
  font-size:var(--t-xs); font-weight:var(--w-strong); letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .3s var(--ease-ui), color .3s var(--ease-ui); }
.opener__go svg{ width:var(--s-4); height:var(--s-4); transition:transform .45s var(--ease); }
@media (hover:hover){
  .opener:hover{ border-color:var(--ink); transform:translateY(-2px); }
  .opener:hover .opener__go{ background:var(--ink); color:var(--bg); }
  .opener:hover .opener__go svg{ transform:translateX(4px); }
}
.opener:active{ transform:translateY(1px); }
.opener--ink{ background:rgb(var(--ink-rgb)/.62); border-color:rgb(var(--paper-rgb)/.34); }
.opener--ink .opener__k,
.opener--ink .opener__d{ color:rgb(var(--paper-rgb)/.86); }
.opener--ink .opener__go{ border-color:var(--bg); }
@media (hover:hover){
  .opener--ink:hover{ border-color:var(--bg); }
  .opener--ink:hover .opener__go{ background:var(--bg); color:var(--ink); }
}

/* cabecera de sección compartida por la sala y las clases */
.bloque__head{ display:grid; gap:var(--s-4); }
.bloque__head h2{ max-width:16ch; }
@media (min-width:1024px){
  .bloque__head{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); align-items:end; }
  .bloque__head > .eyebrow{ grid-column:1 / -1; }
  .bloque__head h2{ grid-column:1 / span 7; }
  .bloque__head .lead{ grid-column:9 / -1; }
}

/* ---- 2 · firma: el corte 1995 → hoy (11-firma.md §6) --------------------- */
/* --s es el barrido de verdad: ocurre entre .14 y .62 del recorrido. Antes, la foto
   de 1995 se queda quieta; después, la de hoy, con su texto entero, también. */
.cut{ position:relative; height:340vh; background:var(--ink); color:var(--bg);
  --s:clamp(0, calc((var(--p) - .14) * 2.08), 1); }
.cut__stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
/* El relleno de arriba reserva la cabecera: en un portátil de 600 px de alto el
   titular llegaba a meterse debajo y sólo se veía la mitad inferior de las letras. */
.cut__layer{ position:absolute; inset:0; display:grid; align-items:end;
  padding-top:calc(var(--top-h) + var(--s-3)); }
/* Cada capa, su propio contexto de apilado: sin esto el titular de 1995
   escapaba de su capa y se pintaba encima de la foto de hoy a mitad del barrido. */
.cut__a{ z-index:0; }
.cut__b{ z-index:1; }
.cut__layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cut__layer::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgb(var(--ink-rgb)/.1) 0%, rgb(var(--ink-rgb)/.3) 34%, rgb(var(--ink-rgb)/.72) 62%, rgb(var(--ink-rgb)/.9) 100%); }
.cut__a img{ object-position:54% 50%; transform:scale(calc(1.04 + var(--s) * .06)); }
.cut__b img{ object-position:34% 50%; transform:scale(calc(1.1 - var(--s) * .1)); }
.cut__b{ clip-path:inset(calc((1 - var(--s)) * 100%) 0 0 0); }
.cut__copy{ position:relative; z-index:1; width:100%; display:grid; gap:var(--s-3); align-content:end;
  padding-bottom:calc(var(--s-8) + var(--s-3)); }
.cut__copy .eyebrow{ color:var(--bg); }
/* el titular también mide con la ALTURA de la pantalla, no sólo con el ancho */
.cut__copy h2,
.cut__t{ font-size:min(var(--t-2xl), 8.4svh); line-height:.98; letter-spacing:-.03em; max-width:18ch; color:var(--bg); }
.cut__a .cut__copy{ transform:translateY(calc(var(--s) * -48px)); opacity:calc(1 - var(--s) * 1.6); }
.cut__b .cut__copy{ transform:translateY(calc((1 - var(--s)) * 48px)); }
.cut .opener{ max-width:620px; margin-top:var(--s-3); }
/* Escritorio: el botón se va a la derecha del titular. La escena mide la mitad
   de alto y el titular queda lejos del borde superior en cualquier portátil. */
@media (min-width:1024px){
  .cut__b .cut__copy{ grid-template-columns:minmax(0, 1fr) minmax(300px, 380px); column-gap:var(--s-7); align-items:end; }
  .cut__b .cut__copy > *{ grid-column:1; }
  .cut__b .cut__copy > .opener{ grid-column:2; grid-row:1 / span 2; margin-top:0; }
}
/* la línea de tiempo: se llena mientras una foto barre a la otra */
.cut__linea{ position:absolute; z-index:2; inset-inline:0; bottom:var(--s-5); display:flex; align-items:center; gap:var(--s-3);
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; font-weight:var(--w-strong); color:var(--bg); }
.cut__linea i{ position:relative; flex:1; height:1px; background:rgb(var(--paper-rgb)/.28); }
.cut__linea i::after{ content:""; position:absolute; inset:0; background:var(--bg);
  transform-origin:0 50%; transform:scaleX(var(--s)); }
@media (max-width:900px){ .cut{ height:300vh; } }
/* Móvil: el bloque de texto es alto y el titular sube hasta la zona clara de la foto.
   Fondo más oscuro arriba y el botón sin su línea de detalle. */
@media (max-width:719px){
  .cut__layer::after{ background:linear-gradient(180deg, rgb(var(--ink-rgb)/.3) 0%, rgb(var(--ink-rgb)/.62) 30%, rgb(var(--ink-rgb)/.84) 58%, rgb(var(--ink-rgb)/.94) 100%); }
  .cut .opener__d{ display:none; }
}

/* ---- 3 · método ---------------------------------------------------------- */
.metodo__grid{ display:grid; gap:var(--s-6); }
@media (min-width:960px){
  .metodo__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); align-items:center; }
  .metodo__foto{ grid-column:1 / span 6; }
  .metodo__copy{ grid-column:8 / -1; }
}
.metodo__foto{ aspect-ratio:4 / 5; }
.metodo__copy{ display:grid; gap:var(--s-4); align-content:center; }
.metodo__copy .opener{ margin-top:var(--s-4); }

/* ---- 4 · la sala: tres zonas, una a la vista -------------------------------- */
/* Sin JS (o sin :has) las tres zonas se leen apiladas, cada una con sus dos fotos. */
.zonas{ display:grid; gap:var(--s-7); margin-top:var(--s-8); }
.zonas[data-reveal]{ opacity:1; transform:none; }
.zonas__k, .zonas__menu{ display:none; }
.zona{ display:grid; gap:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--ink); }
.zona__txt{ display:grid; gap:var(--s-3); align-content:start; }
.zona__t{ font-size:var(--t-xl); letter-spacing:-.03em; line-height:1; }
.zona__d{ max-width:30ch; font-size:var(--t-lg); line-height:1.4; }
.zona__equipo{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-4); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; font-weight:var(--w-strong); color:var(--ink-mut); }
/* un cuadrado delante de cada pieza, como el de «ahora»: al partir línea no cuelga ningún punto */
.zona__equipo li{ display:inline-flex; align-items:center; gap:var(--s-2); }
.zona__equipo li::before{ content:""; flex:none; width:var(--s-1); height:var(--s-1); background:var(--ink); }
/* dos fotos del mismo tamaño y alineadas: pequeñas, así ninguna se ve pobre */
.zona__fotos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2); }
.zona__foto{ overflow:hidden; aspect-ratio:4 / 5; background:var(--line); }
.zona__foto img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:960px){ .zona__fotos{ gap:var(--s-3); } }

/* Con JS, un selector. Las pestañas son radios de verdad: el cambio de zona, el teclado y
   el lector de pantalla no necesitan JS; main.js sólo pone el recorrido automático
   (una vuelta, mientras se ve, hasta que alguien elige una zona). */
@supports selector(:has(*)){
  .js .zonas{ gap:0; }
  .js .zonas__k{ display:block; }
  .js .zonas__menu{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:var(--s-3); border-top:1px solid var(--line); }
  .zonas__op{ position:relative; display:grid; align-content:start; gap:var(--s-1); padding:var(--s-3) var(--s-2) var(--s-4) 0; cursor:pointer;
    font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-base); letter-spacing:-.02em; line-height:1.1;
    color:var(--ink-mut); opacity:0; transform:translateY(var(--s-3));
    transition:color .4s var(--ease-ui), opacity .7s var(--ease) calc(var(--i, 0) * 90ms), transform .9s var(--ease) calc(var(--i, 0) * 90ms); }
  .zonas__op:nth-child(2){ --i:1; }
  .zonas__op:nth-child(3){ --i:2; }
  .zonas.in .zonas__op{ opacity:1; transform:none; }
  /* el radio, oculto como para lector de pantalla: la etiqueta entera lo activa */
  .zonas__op input{ position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
  .zonas__op .num{ font-family:var(--f-body); font-weight:var(--w-strong); font-size:var(--t-xs); letter-spacing:.14em; }
  .zonas__op:has(:checked){ color:var(--ink); }
  .zonas__op:has(:focus-visible){ outline:3px solid var(--accent); outline-offset:3px; }
  @media (hover:hover){ .zonas__op:hover{ color:var(--ink); } }
  /* el filete de la zona elegida; durante el recorrido se llena mientras dura su turno.
     Longhands y no el atajo animation: el atajo pondría play-state en running */
  .zonas__op i{ position:absolute; left:0; right:var(--s-2); top:-2px; height:3px; background:var(--ink);
    transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease); }
  .zonas__op:has(:checked) i{ transform:none; }
  .zonas.in:not(.man) .zonas__op:has(:checked) i{ animation-name:llenar; animation-duration:6s; animation-timing-function:linear; }
  .zonas:not(.ver) .zonas__op i, .zonas:focus-within .zonas__op i{ animation-play-state:paused; }
  @media (hover:hover){ .zonas:hover .zonas__op i{ animation-play-state:paused; } }

  /* las tres zonas en la misma celda: no cambia la altura al elegir; la elegida, encima */
  .js .zona{ --on:0; grid-row:3; grid-column:1; padding-top:var(--s-3); border:0; visibility:hidden; transition:visibility 0s .9s; }
  .zonas.in:has(.zonas__op:nth-child(1) :checked) .zona:nth-of-type(1),
  .zonas.in:has(.zonas__op:nth-child(2) :checked) .zona:nth-of-type(2),
  .zonas.in:has(.zonas__op:nth-child(3) :checked) .zona:nth-of-type(3){ --on:1; z-index:1; visibility:visible; transition-delay:0s; }
  .js .zona__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .js .zona__fotos{ order:-1; }
  /* La que entra barre de abajo arriba sobre la que sale, que espera quieta debajo.
     Duración y retraso salen de --on: cada zona usa su mitad del cambio. */
  .js .zona__foto{ clip-path:inset(calc((1 - var(--on)) * 100%) 0 0 0);
    transition:clip-path calc(var(--on) * .9s) var(--ease) calc((1 - var(--on)) * .9s + var(--on) * var(--d, 0s)); }
  .js .zona__foto + .zona__foto{ --d:.1s; }
  .js .zona__foto img{ transform:scale(calc(1.15 - var(--on) * .15));
    transition:transform calc(var(--on) * 1.3s) var(--ease) calc((1 - var(--on)) * .9s + var(--on) * var(--d, 0s)); }
  .js .zona__txt > *{ opacity:var(--on); transform:translateY(calc((1 - var(--on)) * var(--s-3)));
    transition:opacity calc(.2s + var(--on) * .6s) var(--ease-ui) calc(var(--on) * (.25s + var(--i, 0) * 80ms)),
      transform calc(var(--on) * .9s) var(--ease) calc(var(--on) * (.25s + var(--i, 0) * 80ms)); }
  .js .zona__equipo{ --i:1; }

  /* Escritorio: las zonas en grande a la izquierda y las fotos a la derecha */
  @media (min-width:960px){
    .js .zonas{ grid-template-columns:repeat(12, minmax(0, 1fr)); grid-template-rows:auto auto 1fr; column-gap:var(--s-5); }
    /* fila explícita: las zonas ocupan todas las celdas y el menú se iría a una fila nueva */
    .js .zonas__k, .js .zonas__menu{ grid-column:1 / span 5; grid-row:1; position:relative; z-index:2; }
    .js .zonas__menu{ grid-row:2; grid-template-columns:minmax(0, 1fr); margin-top:var(--s-4); }
    .zonas__op{ grid-template-columns:var(--s-7) minmax(0, 1fr); align-items:baseline; gap:0; padding:var(--s-4) 0;
      border-bottom:1px solid var(--line); font-size:var(--t-xl); letter-spacing:-.03em; line-height:1; }
    .zonas__op i{ top:auto; bottom:-2px; right:0; }
    .js .zona{ grid-column:1 / -1; grid-row:1 / -1; grid-template-columns:subgrid; grid-template-rows:subgrid; gap:0 var(--s-5); padding-top:0; }
    .js .zona__txt{ grid-column:1 / span 5; grid-row:3; align-self:end; padding-top:var(--s-6); }
    .js .zona__fotos{ grid-column:6 / -1; grid-row:1 / -1; align-self:end; order:0; }
  }
}
@keyframes llenar{ from{ transform:scaleX(0); } }
.comodidades{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-5);
  margin-top:var(--s-8); padding-top:var(--s-4); border-top:1px solid var(--line); font-weight:var(--w-strong); }

/* ---- 5 · clases ------------------------------------------------------------- */
/* la cinta: los nombres de las clases corren de lado mientras se baja */
.cinta{ overflow:hidden; margin-bottom:var(--s-6); }
.cinta__txt{ max-width:none; white-space:nowrap; font-family:var(--f-display); font-weight:var(--w-display);
  font-size:var(--t-hero); letter-spacing:-.04em; line-height:1.05;
  transform:translateX(calc(var(--gutter) - var(--p) * 28%)); will-change:transform; }
.cinta__txt .hueco{ color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.cinta__txt .sep{ color:var(--ink-mut); }
.clips{ display:grid; gap:var(--s-3); margin-top:var(--s-7); }
@media (min-width:720px){
  .clips{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); align-items:start; }
  .clip:nth-child(1){ grid-column:1 / span 6; }
  .clip:nth-child(2){ grid-column:8 / -1; margin-top:var(--s-8); translate:0 calc((.5 - var(--p)) * var(--s-7)); will-change:translate; }
}
.clip{ position:relative; overflow:hidden; aspect-ratio:4 / 5; background:var(--ink); }
.clip video, .clip__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clip__poster{ transition:opacity .8s var(--ease-ui); }
.clip.playing .clip__poster{ opacity:0; }
.clip::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgb(var(--ink-rgb)/0) 48%, rgb(var(--ink-rgb)/.8) 100%); }
.clip__cap{ position:absolute; z-index:1; inset-inline:0; bottom:0; display:grid; gap:var(--s-1);
  padding:var(--s-5); color:var(--bg); }
.clip__dias{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:var(--w-strong); }
.clip__t{ font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-2xl); letter-spacing:-.035em; line-height:1; }
.clip__d{ color:rgb(var(--paper-rgb)/.86); }
.semana{ margin-top:var(--s-7); }
.semana__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-2) var(--s-5); }
.hoy{ display:inline-flex; align-items:flex-start; gap:var(--s-2); font-weight:var(--w-strong); }
.hoy::before{ content:""; flex:none; width:var(--s-2); height:var(--s-2); margin-top:calc(.825em - var(--s-1)); background:var(--ink);
  animation:latir 1.8s var(--ease-ui) infinite; }
@keyframes latir{ 50%{ opacity:.2; } }
.semana__dias{ display:grid; grid-template-columns:repeat(5, 1fr); margin-top:var(--s-4); border-top:1px solid var(--ink); }
.semana__dias li{ position:relative; display:grid; gap:var(--s-1); padding:var(--s-3) var(--s-2) 0 0;
  font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.1; }
.semana__dias abbr{ font-family:var(--f-body); font-weight:var(--w-strong); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); }
.semana__dias li.is-next::before{ content:""; position:absolute; left:0; right:var(--s-2); top:-2px; height:3px; background:var(--ink); }
.semana__dias li.is-next abbr{ color:var(--ink); }
@media (max-width:599px){
  .semana__dias{ grid-template-columns:1fr; }
  .semana__dias li{ grid-template-columns:var(--s-8) 1fr; align-items:baseline; padding:var(--s-2) 0;
    border-bottom:1px solid var(--line); }
  .semana__dias li.is-next::before{ left:calc(var(--s-3) * -1); right:auto; top:var(--s-2); bottom:var(--s-2); width:3px; height:auto; }
}
.semana .opener{ margin-top:var(--s-7); }

/* ---- 6 · planes ------------------------------------------------------------ */
.planes__t{ margin-top:var(--s-4); }
.planes__grid{ display:grid; gap:var(--s-7); margin-top:var(--s-7); }
.planes__head{ display:grid; gap:var(--s-4); align-content:start; }
.planes__head .actions{ margin-top:var(--s-3); }
@media (min-width:1024px){
  .planes__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); align-items:start; }
  .planes__head{ grid-column:1 / span 5; position:sticky; top:calc(var(--top-h) + var(--s-6)); }
  .planes__detalle{ grid-column:7 / -1; }
}
.tarifa{ width:100%; border-collapse:collapse; }
.tarifa caption{ text-align:left; padding-bottom:var(--s-3); font-size:var(--t-xs); letter-spacing:.18em;
  text-transform:uppercase; font-weight:var(--w-strong); color:var(--ink-mut); }
.tarifa th, .tarifa td{ padding:var(--s-3) var(--s-3) var(--s-3) 0; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line); }
.tarifa thead th{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--ink-mut); border-bottom-color:var(--ink); }
.tarifa tbody th{ font-weight:var(--w-strong); }
/* cada fila entra con su turno, antes de que crezca su barra */
.tarifa tbody tr{ opacity:clamp(0, calc((var(--p) - .1 - var(--i) * .04) * 7), 1); }
.tarifa__mes{ position:relative; width:46%; }
.tarifa__mes span{ position:relative; z-index:1; padding-left:var(--s-2);
  font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg); letter-spacing:-.02em; }
/* el dato que se llena (11-firma.md §9.4): el precio al mes, proporcional y en orden */
.tarifa__mes::before{ content:""; position:absolute; left:0; top:var(--s-2); bottom:var(--s-2);
  width:calc(var(--v) * 100%); background:var(--line); transform-origin:0 50%;
  transform:scaleX(clamp(0, calc((var(--p) - .2 - var(--i) * .05) * 4), 1)); }
.otros{ display:grid; margin-top:var(--s-6); border-top:1px solid var(--line); }
.otros > div{ display:grid; gap:var(--s-1); padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
@media (min-width:600px){ .otros > div{ grid-template-columns:var(--s-10) 1fr; gap:var(--s-5); } }
.otros dt{ font-weight:var(--w-strong); }
.otros b{ font-family:var(--f-display); font-weight:var(--w-display); letter-spacing:-.02em; }
.planes__detalle .fine{ margin-top:var(--s-4); }
.planes__detalle .opener{ margin-top:var(--s-6); }

/* ---- 7 · testimonios: completos, en una fila que se desliza ----------------- */
.testimonios__head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s-5); }
.testimonios__head h2{ margin-top:var(--s-4); max-width:16ch; }
.testimonios__head .lead{ margin-top:var(--s-4); }
.rail__ctrl{ display:flex; gap:var(--s-2); }
.rail__ctrl[hidden]{ display:none; }
.rail__btn{ appearance:none; display:grid; place-items:center; width:52px; height:52px; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:var(--radius);
  transition:background-color .3s var(--ease-ui), color .3s var(--ease-ui), opacity .3s var(--ease-ui); }
.rail__btn svg{ width:var(--s-4); height:var(--s-4); }
@media (hover:hover){ .rail__btn:hover:not(:disabled){ background:var(--ink); color:var(--bg); } }
.rail__btn:disabled{ opacity:.3; cursor:default; }
/* la fila empieza alineada con la rejilla y se sale por la derecha: se ve que sigue */
.rail{ --edge:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  display:grid; grid-auto-flow:column; grid-auto-columns:min(84vw, 400px); gap:var(--s-3);
  margin-top:var(--s-7); padding:0 var(--edge) var(--s-4); scroll-padding-inline:var(--edge);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.voz{ scroll-snap-align:start; display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-5); background:var(--bg-2); border:1px solid var(--line); }
.voz__k{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--ink-mut); }
.voz blockquote{ flex:1; }
.voz blockquote p{ line-height:1.6; }
.voz__who{ padding-top:var(--s-3); border-top:1px solid var(--line);
  font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.15; }

/* ---- 8 · cierre: tu primer día y cómo llegar ---------------------------------- */
.visita{ padding-bottom:0; }
.visita__grid{ display:grid; gap:var(--s-7); }
.visita__copy{ display:grid; gap:var(--s-5); align-content:start; }
.visita__foto{ aspect-ratio:4 / 5; }
@media (min-width:1024px){
  .visita__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); }
  .visita__copy{ grid-column:1 / span 6; }
  /* la foto ocupa exactamente el alto del texto: sin hueco a la derecha */
  .visita__foto{ grid-column:8 / -1; aspect-ratio:auto; position:relative; }
  .visita__foto img{ position:absolute; left:0; top:0; }
}
.pasos{ display:grid; border-top:1px solid var(--line); }
.pasos li{ display:grid; grid-template-columns:var(--s-7) 1fr; gap:var(--s-3); align-items:baseline;
  padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
.pasos__n{ font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg); letter-spacing:-.02em; }
/* la dirección, en grande y sobre tinta: es la acción principal de toda la web */
.llegar{ margin-top:var(--sec-y); padding-block:var(--s-9) var(--s-7); background:var(--ink); color:var(--bg); }
.llegar__grid{ display:grid; gap:var(--s-7); }
@media (min-width:1024px){
  .llegar__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); align-items:end; }
  .llegar__dir{ grid-column:1 / span 7; }
  .llegar__info{ grid-column:8 / -1; }
}
.llegar .eyebrow, .llegar .fine, .llegar small{ color:var(--on-ink-mut); }
.llegar__calle{ position:relative; display:inline-block; margin-top:var(--s-3); padding-block:var(--s-2); text-decoration:none;
  font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-hero); letter-spacing:-.045em; line-height:.92; }
.llegar__calle::after{ content:""; position:absolute; left:0; right:0; bottom:calc(var(--s-2) - .06em); height:3px; background:currentColor;
  opacity:.28; transition:opacity .45s var(--ease-ui); }
@media (hover:hover){ .llegar__calle:hover::after{ opacity:1; } }
.llegar__ciudad{ margin-top:var(--s-4); font-size:var(--t-lg); color:var(--on-ink-mut); }
.estado{ display:flex; align-items:flex-start; gap:var(--s-2); padding-bottom:var(--s-4); margin-bottom:var(--s-4);
  border-bottom:1px solid var(--line-ink); font-weight:var(--w-strong); }
.estado::before{ content:""; flex:none; width:var(--s-2); height:var(--s-2); margin-top:calc(.825em - var(--s-1)); border:1px solid var(--bg); }
.estado.abierto::before{ background:var(--bg); animation:latir 1.8s var(--ease-ui) infinite; }
.llegar__datos{ display:grid; gap:var(--s-3); }
.llegar__datos > div{ display:grid; gap:var(--s-1); }
@media (min-width:600px){ .llegar__datos > div{ grid-template-columns:var(--s-10) 1fr; gap:var(--s-4); } }
.llegar__datos dt{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--on-ink-mut); padding-top:var(--s-1); }
.llegar .actions{ margin-top:var(--s-6); }
.llegar .fine{ margin-top:var(--s-3); }
.llegar__datos a, .pie__lista a{ display:inline-flex; align-items:center; min-height:44px; font-weight:var(--w-strong);
  text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; overflow-wrap:anywhere; }
/* 44 px de zona táctil sin engordar la fila */
.llegar__datos a{ margin-block:calc(var(--s-2) * -1); }

/* ---- pie: continúa el bloque oscuro del cierre ------------------------------- */
/* un píxel encima del cierre: sin él, el redondeo dejaba asomar una raya de papel entre los dos bloques */
.pie{ position:relative; margin-top:-1px; background:var(--ink); color:var(--bg); padding-block:0 var(--s-6); }
.pie__grid{ display:grid; gap:var(--s-7); padding-top:var(--s-7); border-top:1px solid var(--line-ink); }
@media (min-width:960px){
  .pie__grid{ grid-template-columns:repeat(12, 1fr); column-gap:var(--s-5); align-items:end; }
  .pie__marca{ grid-column:1 / span 6; }
  .pie__lista{ grid-column:8 / -1; }
  .pie__legal{ grid-column:1 / -1; }
}
.pie__marca{ display:grid; gap:var(--s-3); }
.pie__nombre{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  font-weight:var(--w-strong); color:var(--on-ink-mut); }
.pie__lema{ font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-2xl);
  letter-spacing:-.035em; line-height:.95; }
.pie__lista{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-5); }
@media (max-width:479px){ .pie__lista{ grid-template-columns:1fr; } }
.pie__lista li{ display:grid; gap:var(--s-1); align-content:start; min-width:0;
  padding-top:var(--s-3); border-top:1px solid var(--line-ink); }
.pie__lista .eyebrow{ color:var(--on-ink-mut); }
.pie__txt{ display:inline-flex; align-items:center; min-height:44px; font-weight:var(--w-strong); }
.pie__legal{ max-width:none; padding-top:var(--s-5); border-top:1px solid var(--line-ink); font-size:var(--t-xs); color:var(--on-ink-mut); }

/* ---- barra fija de acciones en móvil: llegar primero, WhatsApp al lado ----- */
.barra-movil{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr auto;
  padding-bottom:env(safe-area-inset-bottom); background:var(--ink); }
.barra-movil .cta{ min-height:var(--bar-h); }
.barra-movil__wa{ display:grid; place-items:center; min-height:var(--bar-h); padding:0 var(--s-5);
  color:var(--bg); text-decoration:none; font-weight:var(--w-strong); }
.barra-movil.auto{ transform:translateY(110%); transition:transform .45s var(--ease); }
.barra-movil.auto.on{ transform:none; }
@media (min-width:720px){ .barra-movil{ display:none; } }
@media (max-width:719px){ body{ padding-bottom:var(--bar-h); } }

/* ---- 404 -------------------------------------------------------------------- */
.nf{ min-height:80svh; display:grid; align-content:center; gap:var(--s-5); padding-block:var(--s-8); }
.nf h1{ font-size:var(--t-2xl); }

/* ---- movimiento base (lo lee scroll.js) ---------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(28px); }
[data-reveal].in{ opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
html:not(.js) [data-reveal]{ opacity:1; transform:none; }
[data-scroll]{ --p:0; --p-eased:0; }

/* titulares por palabras: cada una sube desde detrás de su propia máscara.
   El margen negativo compensa el relleno que deja sitio a tildes y descendentes. */
.is-split[data-reveal]{ opacity:1; transform:none; }
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-block:.14em; margin-block:-.14em; }
.w > span{ display:inline-block; transform:translateY(112%);
  transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 60ms); }
.in .w > span{ transform:none; }

/* la imagen se descubre y se posa; el recorte va en la <img>, nunca en lo observado */
.unveil{ overflow:hidden; background:var(--line); }
.unveil img{ width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 100% 0); transform:scale(1.12);
  transition:clip-path 1s var(--ease), transform 1.2s var(--ease); }
.unveil.in img{ clip-path:inset(0 0 0 0); transform:none; }
html:not(.js) .unveil img{ clip-path:none; transform:none; }
/* parallax corto: la foto se desliza 48 px dentro de su marco mientras cruza la pantalla */
.parallax img{ height:calc(100% + var(--s-6)); margin-top:calc(var(--s-4) * -1);
  translate:0 calc((.5 - var(--p)) * var(--s-6)); will-change:translate; }

/* Sin JS no existe --p: esta red deja todo visible y la firma se lee apilada. */
html:not(.js) [data-scroll],
html:not(.js) [data-scroll] *{
  opacity:1 !important; transform:none !important; clip-path:none !important; translate:none !important; }
html:not(.js) .tarifa__mes::before{ transform:none; }
html:not(.js) .cut{ height:auto; }
html:not(.js) .cut__stage{ position:static; height:auto; }
html:not(.js) .cut__layer{ position:relative; min-height:56svh; }
html:not(.js) .cut__linea{ display:none; }

/* ---- capa de profundidad (la activa panel.js; sin JS son secciones) ------------ */
/* sin JS son secciones al final de la página: no se maquetan hasta que se acercan */
.panel{ padding-block:var(--sec-y); border-top:1px solid var(--line); content-visibility:auto; contain-intrinsic-size:auto 2400px; }
.panel__sheet{ max-width:min(880px, 100%); margin-inline:auto; padding-inline:var(--gutter); }
html.panels .panel{ content-visibility:visible; position:fixed; inset:0; z-index:150; overflow-y:auto; padding:0; border:0;
  overscroll-behavior:contain; background:rgb(var(--ink-rgb)/0); backdrop-filter:blur(0);
  transition:background .38s var(--ease-ui), backdrop-filter .38s var(--ease-ui); }
html.panels .panel[hidden]{ display:none; }
/* mientras se cierra sigue cubriendo la pantalla medio segundo: que no se coma
   el primer gesto del dedo (con overscroll-behavior:contain no encadena) */
html.panels .panel:not(.is-open){ pointer-events:none; }
html.panels .panel.is-open{ background:var(--scrim); backdrop-filter:blur(10px); }
/* en el móvil la hoja tapa toda la pantalla: el desenfoque del fondo no llega a
   verse y en un teléfono de verdad es de lo más caro que se puede pedir */
@media (max-width:719px){ html.panels .panel, html.panels .panel.is-open{ backdrop-filter:none; } }
html.panels .panel__sheet{ min-height:100%; padding-block:0 var(--s-9); background:var(--bg);
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .34s var(--ease-ui), transform .42s var(--ease); }
html.panels .panel.is-open .panel__sheet{ opacity:1; transform:none; }
.panel__bar{ display:none; }
html.panels .panel__bar{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  position:sticky; top:0; z-index:3; padding-block:var(--s-3); margin-bottom:var(--s-6);
  background:var(--bg); border-bottom:1px solid var(--line); }
.panel__close{ appearance:none; font:inherit; font-size:var(--t-xs); font-weight:var(--w-strong);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:transparent;
  border:1px solid var(--ink); min-height:44px; padding:0 var(--s-4); cursor:pointer; }
@media (hover:hover){ .panel__close:hover{ background:var(--ink); color:var(--bg); } }
/* El fondo se queda quieto mientras hay un panel abierto. NO se fija el body con
   position:fixed: eso colapsa la altura del documento, obliga a devolver la
   posición del scroll a mano y en los móviles deja el scroll trabado o lentísimo
   hasta recargar (queja real del cliente, 11-sep-2026). Con overflow-y la
   posición no se toca: el documento sólo deja de responder al dedo. En el móvil
   no hay barra de scroll, así que ni siquiera cambia el ancho. */
html.panel-open{ overflow-y:hidden; }

.panel__body > * + *{ margin-top:var(--s-6); }
.panel__body > p + p{ margin-top:var(--s-4); }
.panel__body > .eyebrow + h2{ margin-top:var(--s-3); }
.panel__body > h3{ margin-top:var(--s-8); }
.panel__body > h3 + *{ margin-top:var(--s-4); }
.panel__body h2{ font-size:var(--t-xl); letter-spacing:-.03em; }
.panel__body figure img{ width:100%; }
.panel__body figcaption{ margin-top:var(--s-2); font-size:var(--t-xs); color:var(--ink-mut); letter-spacing:.02em; }
.panel__body .doc{ max-width:560px; }
.panel__body .doc img{ border:1px solid var(--line); }
.panel__end{ padding-top:var(--s-6); border-top:1px solid var(--line);
  font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.2; }
.panel__body > .panel__end + .actions{ margin-top:var(--s-4); }
.guia{ display:grid; border-top:1px solid var(--line); }
.guia > div{ display:grid; gap:var(--s-1); padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
@media (min-width:600px){ .guia > div{ grid-template-columns:var(--s-10) 1fr; gap:var(--s-5); } }
.guia dt{ font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-lg); letter-spacing:-.02em; }
.guia dd span{ font-weight:var(--w-strong); }

/* fichas de suplementos: foto, nombre y para qué sirve */
.productos{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s-5) var(--s-3); }
@media (min-width:720px){ .productos{ grid-template-columns:repeat(3, 1fr); } }
.producto{ display:grid; gap:var(--s-2); align-content:start; }
.producto img{ width:100%; aspect-ratio:480 / 540; margin-bottom:var(--s-2); }
.producto__t{ font-family:var(--f-display); font-weight:var(--w-display); font-size:var(--t-base);
  letter-spacing:-.01em; line-height:1.2; }
.producto__d{ font-size:var(--t-xs); line-height:1.5; color:var(--ink-mut); }

/* Sólo se apaga lo intrusivo: Windows trae reduced-motion activado a menudo y
   gatearlo todo deja la web muerta. Se ve el RESULTADO, no el recorrido. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero__poster, .hero__media{ animation:none; }
  .cut{ height:auto; }
  .cut__stage{ position:static; height:auto; }
  .cut__layer{ position:relative; min-height:56svh; }
  .cut__b{ clip-path:none; }
  .cut__layer img{ transform:none; }
  .cut__a .cut__copy, .cut__b .cut__copy{ transform:none; opacity:1; }
  .cut__linea{ display:none; }
  .tarifa__mes::before{ transform:none; }
  .tarifa tbody tr{ opacity:1; }
  .cinta__txt{ transform:translateX(var(--gutter)); }
  .clip:nth-child(2), .parallax img{ translate:none; }
  .js .zona, .js .zona__foto, .js .zona__foto img, .js .zona__txt > *{ transition:none; }
  .zonas.in:not(.man) .zonas__op:has(:checked) i{ animation-name:none; }
  .hoy::before, .estado.abierto::before{ animation:none; }
  html.panels .panel__sheet{ transform:none; }
}