/* ==========================================================================
   Pulsaciones Gym — hoja de estilos
   Orden: tokens -> base -> loader -> header -> hero -> hub -> opiniones -> cta -> motion
   Sin librerias externas. Motion portado de presets estandar a CSS/JS nativo.
   ========================================================================== */

:root{
  /* Tipografia. Cambiar aqui la familia de texto revierte el cambio de Inter
     a Archivo en todo el sitio sin tocar ningun componente. */
  --font-display:"Barlow Condensed",Impact,sans-serif;
  --font-body:Archivo,"Segoe UI",system-ui,Arial,sans-serif;

  /* Marca */
  --brand:#2563eb;        /* relleno solido con texto blanco (5,17:1 AA) */
  --brand-dark:#1d4ed8;   /* hover */
  --brand-light:#3b82f6;  /* acento sobre fondo oscuro (4,85:1 AA) */
  --brand-tint:#e8effd;

  /* Neutros */
  --ink:#0b1220;          /* fondo mas oscuro: hero, opiniones */
  --ink-2:#111827;        /* tarjetas oscuras */
  --ink-3:#1b2333;        /* superficies oscuras elevadas */
  --paper:#eef1f5;        /* fondo general claro */
  --surface:#fff;
  --line:#e2e6ec;
  --text:#111827;
  --muted:#5b6474;        /* 5,9:1 sobre --surface */
  --muted-dark:#9aa3b2;   /* sobre superficies oscuras */

  /* Espaciado */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px;
  --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:88px;

  /* Forma y profundidad */
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(11,18,32,.06),0 6px 18px rgba(11,18,32,.05);
  --shadow-md:0 10px 30px rgba(11,18,32,.10);
  --shadow-lg:0 26px 64px rgba(11,18,32,.20);

  /* Motion. Curva unica de salida fuerte: arranca rapido y frena largo, que
     es lo que hace que una transicion de 200ms se perciba mas rapida que una
     de 200ms con la curva por defecto. Se elimino la curva "back" (rebote):
     el sobrepaso elastico envejece mal y delataba el efecto. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-micro:200ms;
  --t-press:150ms;
  --t-reveal:700ms;   /* revelado al hacer scroll: fundido largo y suave */
  --t-loader:600ms;        /* desvanecido del overlay de carga */
  --t-loader-cycle:7000ms; /* un ciclo completo de la pulsacion del loader */

  --header-h:74px;
  --container:1240px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{font-family:var(--font-display);margin:0;text-transform:uppercase;line-height:.95;text-wrap:balance}
p{text-wrap:pretty}
section[id],div[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
:focus-visible{outline:3px solid var(--brand-light);outline-offset:3px;border-radius:4px}

/* Texto solo para lectores de pantalla. Da titulo a secciones que visualmente
   no lo necesitan pero que sin el dejan huecos en el esquema de encabezados. */
.sr-only{
  position:absolute;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;
}

/* Salto al contenido: primer tabulador de la pagina. Sin el, quien navega con
   teclado recorre los 7 enlaces del menu en cada visita. */
.skipLink{
  position:fixed;top:10px;left:10px;z-index:100;
  transform:translateY(-160%);
  background:var(--brand);color:#fff;padding:12px 18px;border-radius:8px;
  font:800 12px var(--font-body);letter-spacing:.6px;
  box-shadow:var(--shadow-md);transition:transform var(--t-micro) var(--ease-out);
}
.skipLink:focus{transform:translateY(0)}

/* Etiqueta pequena sobre los titulos de seccion */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;
  font:800 11px var(--font-body);letter-spacing:1.6px;color:var(--brand);
}
.eyebrow .ic{color:inherit}

/* Superficies que pinta el navegador y que, sin tocarlas, salen con los
   colores por defecto del sistema y no con los de la marca. */
html{color-scheme:light}
::selection{background:var(--brand);color:#fff}
.hero ::selection,.reviews ::selection,.cta ::selection,footer ::selection{background:#fff;color:var(--ink)}
body{caret-color:var(--brand);accent-color:var(--brand)}
:where(a):not(.btn):focus-visible{text-underline-offset:3px}
@supports (scrollbar-color:auto){
  html{scrollbar-color:#b8c2d2 var(--paper);scrollbar-width:thin}
}
@supports selector(::-webkit-scrollbar){
  html::-webkit-scrollbar{width:11px;height:11px}
  html::-webkit-scrollbar-track{background:var(--paper)}
  html::-webkit-scrollbar-thumb{background:#b8c2d2;border-radius:99px;border:3px solid var(--paper)}
  html::-webkit-scrollbar-thumb:hover{background:#93a0b5}
}

/* Iconos SVG */
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.ic--11{width:11px;height:11px}.ic--12{width:12px;height:12px}.ic--14{width:14px;height:14px}
.ic--16{width:16px;height:16px}.ic--18{width:18px;height:18px}.ic--20{width:20px;height:20px}
.ic--24{width:24px;height:24px}.ic--26{width:26px;height:26px}.ic--27{width:27px;height:27px}

/* ---------- Pantalla de carga ----------
   Cubre la pagina en la primera pintura y se desvanece cuando el sitio esta
   listo. El fondo es --ink, el mismo del hero que queda debajo: asi el
   desvanecido no deja un destello claro entre medias.
   Solo se muestra con JS activo: quien lo retira es el script del final del
   documento, de modo que con html.no-js se queda oculto y la web es usable. */
#loader{
  position:fixed;inset:0;z-index:200;
  display:none;
  align-items:center;justify-content:center;
  background:var(--ink);
  overscroll-behavior:contain;
  transition:opacity var(--t-loader) var(--ease-out),visibility var(--t-loader) var(--ease-out);
}
html:not(.no-js) #loader{display:flex}
#loader.is-done{opacity:0;visibility:hidden;pointer-events:none}

/* Bloqueo del scroll mientras el loader esta delante. Se retira en el mismo
   momento que el overlay; si la URL traia un ancla, el script vuelve a
   colocarse en el destino despues de soltarlo. */
html.is-loading,html.is-loading body{overflow:hidden}

.loader__stage{
  position:relative;
  width:min(90vw,520px);aspect-ratio:5/2;
  display:flex;align-items:center;justify-content:center;
}

/* El logotipo no aparece hasta que la linea de pulso ya ha cruzado: es la
   pulsacion la que "revela" la marca, no dos animaciones en paralelo. */
.loader__logo{
  position:absolute;
  width:clamp(220px,46vw,380px);height:auto;
  opacity:0;transform:scale(.94);
  animation:loaderLogo var(--t-loader-cycle) var(--ease-out) infinite;
  user-select:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
}

.loader__logoWrap{display:contents}

.loader__pulse{position:absolute;width:100%;height:100%;overflow:visible}
.loader__line{
  fill:none;stroke:var(--brand-light);
  stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600;
  animation:loaderPulse var(--t-loader-cycle) cubic-bezier(.65,0,.35,1) infinite;
  filter:drop-shadow(0 0 8px rgba(59,130,246,.55));
}

.loader__label{
  position:absolute;bottom:-84px;
  font-family:var(--font-display);font-size:14px;font-weight:700;
  letter-spacing:3px;color:var(--muted-dark);
}
.loader__kg{color:#fff}

/* Barra de pesas: dos discos a los lados de una barra que se rellena de 0 a
   100 kg, como si se fuera cargando peso en una barra olimpica mientras
   carga la pagina. Rellena en el 85% del ciclo para llegar a 100 kg justo
   antes de que la pulsacion revele el logotipo del todo. */
.loader__weight{
  position:absolute;bottom:-38px;
  display:flex;align-items:center;gap:8px;
  opacity:0;
  animation:loaderWeightIn var(--t-loader-cycle) var(--ease-out) infinite;
}
.loader__plate{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:3px solid var(--muted-dark);
  box-shadow:inset 0 0 0 3px var(--ink);
}
.loader__bar{
  position:relative;
  width:clamp(160px,34vw,260px);height:8px;border-radius:999px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
/* El ancho lo escribe el script en cada fotograma, no una animacion CSS: asi
   la barra y el contador van sobre el mismo reloj que el temporizador que
   retira el overlay. Solo se suaviza el salto entre fotogramas. */
.loader__bar-fill{
  position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;
  background:var(--brand-light);
  box-shadow:0 0 8px rgba(59,130,246,.7);
  transition:width 90ms linear;
}

@keyframes loaderWeightIn{
  0%,8%{opacity:0}
  16%{opacity:1}
  92%{opacity:1}
  100%{opacity:0}
}

@keyframes loaderPulse{
  0%  {stroke-dashoffset:600;opacity:1}
  55% {stroke-dashoffset:0;opacity:1}
  70% {stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes loaderLogo{
  0%,50%  {opacity:0;transform:scale(.94)}
  62%     {opacity:1;transform:scale(1.03)}
  72%,92% {opacity:1;transform:scale(1)}
  100%    {opacity:0;transform:scale(1)}
}

/* Sin movimiento no hay pasada de la linea, asi que trazo y logotipo caerian
   uno encima del otro en el centro del escenario. Aqui se apilan: la marca ya
   revelada arriba y la pulsacion entera, quieta, debajo. El script ademas
   acorta la espera a un parpadeo. */
@media(prefers-reduced-motion:reduce){
  .loader__stage{
    flex-direction:column;justify-content:center;gap:var(--sp-2);
    aspect-ratio:auto;height:auto;
  }
  .loader__logoWrap{display:block}
  .loader__logo{position:static;opacity:1;transform:none;animation:none;width:220px;height:auto}
  .loader__pulse{position:static;width:min(70vw,300px);height:70px;flex:none}
  .loader__line{stroke-dashoffset:0;animation:none;stroke-width:9;filter:none}
  .loader__weight{position:static;opacity:1;animation:none;margin-top:var(--sp-1)}
  .loader__bar-fill{width:100%;transition:none}
  .loader__label{position:static;bottom:auto;margin-top:var(--sp-1)}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:13px 22px;
  background:var(--brand);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.8px;white-space:nowrap;
  border-radius:8px;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 6px 16px rgba(23,49,105,.22);
  transition:transform var(--t-micro) var(--ease-out),
             box-shadow var(--t-micro) var(--ease-out),
             background var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out),
             color var(--t-micro) var(--ease-out);
}
.btn::after{ /* barrido de luz en hover */
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .55s var(--ease-out);
}
.btn:hover{background:var(--brand-dark)}
.btn--sm{min-height:38px;padding:10px 16px;font-size:11.5px;letter-spacing:.7px;border-radius:7px}
.btn--block{display:flex;width:100%}
.btn--ghost{
  background:rgba(11,18,32,.55);color:#fff;
  border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:none;
}
.btn--ghost:hover{background:rgba(11,18,32,.75);border-color:#fff;box-shadow:none}
.btn--outline{
  background:transparent;color:var(--brand);
  border:1.5px solid #cfd8e6;box-shadow:none;
}
.btn--outline:hover{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark);box-shadow:none}
.btn--light{background:#fff;color:var(--brand-dark);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.btn--light:hover{background:#fff;color:var(--brand-dark);box-shadow:0 16px 34px rgba(0,0,0,.24)}

/* ---------- Header ---------- */
header{
  position:fixed;z-index:60;top:0;left:0;right:0;
  display:flex;align-items:center;gap:var(--sp-4);
  padding:15px max(20px,3.5vw);color:#fff;
  transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out),
             transform .4s var(--ease-out);
}
/* Se retira al bajar y vuelve al subir: devuelve la altura del header al
   contenido en movil sin renunciar a tenerlo siempre a un gesto. */
header.is-hidden{transform:translateY(-102%)}

/* Progreso de lectura. Animacion dirigida por scroll nativa: cero JavaScript y
   corre fuera del hilo principal. Los navegadores que no la soportan
   simplemente no pintan la barra. */
.scrollbarProgress{
  position:absolute;left:0;right:0;bottom:0;height:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-light),var(--brand));
  transform:scaleX(0);opacity:0;transition:opacity .3s var(--ease-out);
}
header.is-stuck .scrollbarProgress{opacity:1}
@supports (animation-timeline:scroll()){
  .scrollbarProgress{
    animation:progressGrow linear;
    animation-timeline:scroll(root block);
  }
  @keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
header.is-stuck{
  background:rgba(11,18,32,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.3);
}
.logo{z-index:2;flex:none;display:flex;align-items:center}
.logo img{display:block;height:44px;width:auto;transform-origin:left center;transition:transform var(--t-micro) var(--ease-out)}
header.is-stuck .logo img{transform:scale(.86)}
.footer__logo img{height:58px}
nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:11px;font-weight:700;letter-spacing:1px}
nav a{position:relative;padding:6px 0;color:#e6eaf1;transition:color var(--t-micro) var(--ease-out)}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-light);
  transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease-out);
}
nav a:hover{color:#fff}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
nav a.is-active{color:var(--brand-light)}
nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:none} /* solo dentro del menú móvil */
.header__cta{flex:none}

/* Botón de menú móvil */
.navToggle{
  display:none;margin-left:auto;width:44px;height:44px;z-index:2;
  align-items:center;justify-content:center;border-radius:9px;
  border:1px solid rgba(255,255,255,.24);
  transition:transform var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out);
}
.navToggle span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:background .2s}
.navToggle span::before,.navToggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;
  transition:transform .3s var(--ease-out),top .3s var(--ease-out);
}
.navToggle span::before{top:-6px}
.navToggle span::after{top:6px}
header.nav-open .navToggle span{background:transparent}
header.nav-open .navToggle span::before{top:0;transform:rotate(45deg)}
header.nav-open .navToggle span::after{top:0;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;background:var(--ink);
  min-height:clamp(600px,88vh,860px);
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:24px;
}
/* Dos capas a proposito: el contenedor lo mueve el parallax desde JS y la
   imagen de dentro lleva el zoom lento. Compartiendo elemento, la animacion
   CSS sobre "transform" ganaba en la cascada al style inline y el parallax no
   se aplicaba nunca. */
.heroMedia{
  position:absolute;left:0;right:0;top:-70px;
  height:calc(100% + 140px);
  transform:translate3d(0,0,0);   /* margen reservado para el parallax */
  will-change:transform;
}
.heroMedia picture{display:block;width:100%;height:100%}
.heroMedia__img{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 26s var(--ease-out) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* Distintivo sobre el titular: valoracion real de Google como primera prueba
   social, antes incluso de leer el lema. */
.heroBadge{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 18px;padding:7px 14px 7px 11px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:700;color:#eef2f8;letter-spacing:.2px;
}
.heroBadge__star{color:#fbbc05;margin:0 0 0 1px}
.heroBadge__dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.25);
  animation:livePulse 2.6s var(--ease-out) infinite;
}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.25)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.06)}}

.shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,18,32,.96) 0%,rgba(11,18,32,.78) 32%,rgba(11,18,32,.25) 68%,rgba(11,18,32,.45) 100%),
    linear-gradient(to bottom,rgba(11,18,32,.75) 0%,transparent 30%,rgba(11,18,32,.85) 100%);
}
.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto;
  padding:var(--header-h) max(20px,3.5vw) 0;
}
.heroText{max-width:620px}
.heroText h1{
  /* El lema es mucho mas largo que un titular de 3 palabras: escala menor
     para que quepa en 4 lineas sin invadir la barra de valores. */
  font-size:clamp(33px,4.4vw,60px);letter-spacing:-.3px;line-height:.98;
  text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.heroText h1 span{color:var(--brand-light)}
.heroText .heroLead{
  max-width:470px;margin:var(--sp-3) 0 var(--sp-4);
  font-size:16px;line-height:1.7;color:#cdd5e2;
}
.heroActions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Barra de valores ---------- */
.values{
  position:relative;z-index:3;
  width:100%;max-width:var(--container);
  margin:auto auto 0;        /* auto arriba: se ancla al pie del hero */
  padding:0 max(20px,3.5vw);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.values::before{ /* panel oscuro tras las 4 columnas */
  content:"";position:absolute;left:max(20px,3.5vw);right:max(20px,3.5vw);top:0;bottom:0;
  background:rgba(13,20,34,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.value{
  position:relative;display:flex;gap:13px;align-items:flex-start;
  padding:24px 22px;color:#fff;border-radius:var(--radius-sm);
  transition:background var(--t-micro) var(--ease-out);
}
.value:not(:last-child)::after{
  content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.11);
}
.value:hover{background:rgba(255,255,255,.05)}
.value__ic{color:var(--brand-light);flex:none;margin-top:2px}
.value strong{
  display:block;font:700 15px/1.15 var(--font-display);
  letter-spacing:1.1px;text-transform:uppercase;
}
.value p{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted-dark)}

/* Los tres fondos decorativos de mas abajo (la franja del hub, el fondo de
   opiniones y el velo del CTA) usan gym-hero-texture, una version reducida a
   960px de la foto del hero. Van con grayscale y brightness muy bajos, asi
   que no se distingue un pixel de detalle, pero antes cargaban la foto del
   hero entera: 182 KB extra que ningun visitante llegaba a ver. */

/* ---------- HUB (servicios · tienda · contacto) ---------- */
.hub{position:relative;background:var(--paper);padding:30px 0 28px}
.hub::before{ /* franja fotográfica oscura en el borde izquierdo */
  content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(60px,9vw,150px);
  background:image-set(url(assets/gym-hero-texture.webp) type("image/webp"),url(assets/gym-hero-texture.jpg) type("image/jpeg")) center/cover;
  filter:grayscale(.35) brightness(.42);
}
.hub__grid{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto;
  padding:0 max(20px,3.5vw);
  /* stretch + margen negativo en .card--info: la tarjeta de contacto crece
     hasta la altura de la fila y ademas sobresale sobre la banda de opiniones. */
  display:grid;grid-template-columns:2.62fr .86fr;gap:20px;align-items:stretch;
}
/* Sin esto una columna fr no baja del min-content de su contenido y desborda. */
.hub__grid>*,.hub__main>*,.reviews__inner>*{min-width:0}
/* Servicios y tienda comparten fila propia para igualar altura; la columna de
   contacto queda fuera para poder sobresalir sobre la banda de opiniones. */
.hub__main{display:grid;grid-template-columns:1fr 1.62fr;gap:20px;align-items:stretch}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;
}
.card__title{font-size:23px;letter-spacing:.3px;padding-bottom:12px;position:relative}
.card__title::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--brand);border-radius:2px}
.card__title--icon{display:flex;align-items:center;gap:9px;color:var(--text)}
.card__title--icon .ic{color:var(--brand)}
.card__lead{margin:16px 0 22px;font-size:13.5px;line-height:1.65;color:var(--muted)}

/* Servicios */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:16px 8px;margin-bottom:auto}
.services>*{min-width:0}
.services li{
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  font:800 11.5px/1.3 var(--font-body);letter-spacing:0;color:var(--text);
  padding:12px 3px;border-radius:var(--radius-sm);
  hyphens:auto;overflow-wrap:break-word;
  transition:background var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out);
}
.services li:hover{background:var(--brand-tint)}
.services__ic{color:var(--brand);display:grid;place-items:center}
.card--services .btn--outline{margin-top:22px;font-size:11.5px;letter-spacing:.2px;padding-left:10px;padding-right:10px}

/* Galería: fundido cruzado entre fotos (no es un scroll horizontal) */
.gallery{position:relative;margin-top:16px}
.gallery__track{position:relative;aspect-ratio:16/10;border-radius:var(--radius-sm);overflow:hidden;background:#e9edf2}
.gallery__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out),visibility .7s;z-index:0}
.gallery__slide.is-active{opacity:1;visibility:visible;z-index:1}
.gallery__slide picture,.gallery__slide img{display:block;width:100%;height:100%;object-fit:cover}
.gallery__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;background:#fff;color:var(--text);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);
  transition:background var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out);
}
.gallery__arrow:hover{background:var(--brand);color:#fff}
.gallery__arrow--prev{left:10px}
.gallery__arrow--prev .ic{transform:scaleX(-1)}
.gallery__arrow--next{right:10px}
.card--gallery>.dots{margin-top:14px}

/* Contacto / ubicación.
   El margen inferior negativo la deja sobresalir sobre la banda de opiniones
   sin que esa banda tape las tarjetas de servicios y tienda. */
.card--info{position:relative;z-index:4;margin-bottom:-130px}
.card--info .card__title{font-size:clamp(18px,1.6vw,23px)}
.card--info .btn{font-size:11.5px;letter-spacing:.3px;padding-left:12px;padding-right:12px;text-wrap:balance}
.infoList{margin:20px 0 0;display:grid;gap:15px}
.infoList li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--muted)}
.infoList__ic{color:var(--brand);flex:none;margin-top:1px}
.infoList a{color:var(--text);font-weight:700}
.infoList a:hover{color:var(--brand)}
.miniMap{
  position:relative;margin:20px 0;min-height:160px;flex:1;border-radius:var(--radius-sm);
  overflow:hidden;border:1px solid var(--line);
  transition:box-shadow var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out);
}
.miniMap:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.miniMap iframe{display:block;width:100%;height:100%;min-height:160px;border:0;filter:grayscale(.15) contrast(1.02)}
.miniMap__link{
  position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--text);font:800 12px var(--font-display);letter-spacing:.5px;
  padding:8px 12px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.miniMap__link:hover{color:var(--brand)}

/* ---------- Opiniones ---------- */
.reviews{
  position:relative;background:var(--ink);color:#fff;
  padding:var(--sp-5) 0 var(--sp-6);
}
.reviews::before{
  content:"";position:absolute;inset:0;
  background:image-set(url(assets/gym-hero-texture.webp) type("image/webp"),url(assets/gym-hero-texture.jpg) type("image/jpeg")) center/cover;
  filter:grayscale(.5) brightness(.28);
}
.reviews::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,32,.94),rgba(11,18,32,.8))}
.reviews__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto;
  padding:0 max(20px,3.5vw);
  display:grid;grid-template-columns:2.62fr .86fr;gap:20px;
}
.reviews__body{grid-column:1}
.reviews__head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:18px}
.reviews__head h2{font-size:24px;letter-spacing:.4px}
.rating{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;transition:opacity var(--t-micro)}
.rating:hover{opacity:.82}
.rating__g{
  width:22px;height:22px;border-radius:50%;background:#fff;color:#1a73e8;
  display:grid;place-items:center;font:800 13px/1 var(--font-body);flex:none;
}
.rating b{font-size:18px;font-weight:800}
.rating small{color:var(--muted-dark)}
.stars{display:inline-flex;gap:2px;color:#fbbc05}
.reviews__track{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{
  margin:0;padding:18px;border-radius:var(--radius-sm);
  background:rgba(27,35,51,.82);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;gap:11px;
  transition:transform var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out);
}
.review:hover{border-color:rgba(59,130,246,.5)}
.review__q{color:var(--brand-light);opacity:.85}
.review blockquote{
  margin:0;font-size:13px;line-height:1.7;color:#dbe1ea;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.review figcaption{
  margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:11.5px;font-weight:700;color:var(--muted-dark);
}
.dots{display:flex;justify-content:center;gap:4px;margin-top:18px}
.dots button{position:relative;flex:none;width:20px;height:7px;padding:0;background:none}
/* Area tactil ampliada sin tocar el tamano visible del punto. El inset
   horizontal es de 2px, no de 14: el paso entre puntos es 24px (20 de ancho
   + 4 de hueco), asi que con 14 el area de cada punto invadia 24px la del
   vecino y al tocar entre dos respondia el de al lado. Queda en 24x43,
   que cumple el criterio 2.5.8 de WCAG 2.2 (nivel AA, 24x24) sin solapes. */
.dots button::before{content:"";position:absolute;inset:-18px -2px}
/* El punto activo se alarga con scaleX en vez de con width: la anchura
   reflowea la fila entera en cada frame, el transform no. */
.dots button::after{
  content:"";position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.32);
  transform:scaleX(.35);
  transition:transform var(--t-micro) var(--ease-out),background var(--t-micro) var(--ease-out);
}
.dots button.is-on::after{transform:scaleX(1);background:var(--brand-light)}
.card--gallery .dots button::after{background:rgba(11,18,32,.18)}
.card--gallery .dots button.is-on::after{background:var(--brand)}
.reviews__more{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font:800 13px var(--font-display);letter-spacing:.6px;color:#dbe1ea}
.reviews__more:hover{color:#fff}

/* ---------- Tarifas ----------
   Cinco planes en una fila que se reflowea. La tarjeta destacada no se hace
   mas grande (romperia la rejilla en movil): se marca con borde, sombra y
   boton solido, que es suficiente jerarquia sin descolocar nada. */
.pricing{background:var(--paper);padding:var(--sp-6) 0 var(--sp-6)}
.pricing__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  padding:0 max(20px,3.5vw);
}
.pricing__head{max-width:640px;margin-bottom:var(--sp-4)}
.pricing__head h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:.3px}
.pricing__lead{margin:14px 0 0;font-size:14.5px;line-height:1.7;color:var(--muted)}

.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
.plans>*{min-width:0}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;box-shadow:var(--shadow-sm);
  transition:transform var(--t-micro) var(--ease-out),
             box-shadow var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out);
}
.plan__name{
  margin:0;font:800 13px/1 var(--font-display);letter-spacing:1.4px;color:var(--muted);
  text-transform:uppercase;
}
.plan__price{margin:14px 0 0;display:flex;align-items:baseline;gap:3px;color:var(--text)}
.plan__price b{font:700 clamp(34px,3.6vw,44px)/1 var(--font-display);letter-spacing:-.5px}
.plan__price span{font:700 20px/1 var(--font-display);color:var(--muted)}
.plan__meta{margin:8px 0 0;font-size:12.5px;font-weight:800;color:var(--brand)}
.plan__note{margin:10px 0 20px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.plan .btn{margin-top:auto;font-size:11.5px;letter-spacing:.4px;padding-left:10px;padding-right:10px}

.plan--best{
  border-color:var(--brand);box-shadow:0 18px 44px rgba(37,99,235,.18);
  padding-top:30px;
}
.plan--best .plan__name{color:var(--text)}
.plan__flag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  margin:0;white-space:nowrap;
  background:var(--brand);color:#fff;border-radius:999px;
  font:800 10px var(--font-body);letter-spacing:1.1px;
  padding:6px 12px;box-shadow:0 6px 14px rgba(37,99,235,.35);
}

.pricing__notes{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:var(--sp-4);
  font-size:13px;color:var(--muted);
}
.pricing__notes li{display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.pricing__notes li .ic{margin-top:1px}
.pricing__notes .ic{color:#16a34a}
.pricing__notes b{color:var(--text)}

/* ---------- Preguntas frecuentes ----------
   <details>/<summary> nativo: el acordeon funciona sin JavaScript y el texto
   de las respuestas es indexable aunque el bloque este cerrado. */
.faq{background:var(--surface);padding:var(--sp-6) 0;border-top:1px solid var(--line)}
.faq__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  padding:0 max(20px,3.5vw);
  display:grid;grid-template-columns:.9fr 1.4fr;gap:var(--sp-5);align-items:start;
}
.faq__inner>*{min-width:0}
.faq__head h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:.3px}
.faq__lead{margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.faq__list{display:grid;gap:10px}

.qa{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);overflow:hidden;
  transition:border-color var(--t-micro) var(--ease-out),background var(--t-micro) var(--ease-out);
}
.qa[open]{border-color:#c9d6ee;background:var(--surface);box-shadow:var(--shadow-sm)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 18px;min-height:44px;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--text);
  list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand)}
.qa__chev{color:var(--brand);transition:transform .3s var(--ease-out)}
.qa[open] .qa__chev{transform:rotate(180deg)}
.qa__body{padding:0 18px 18px}
.qa__body p{margin:0;font-size:13.5px;line-height:1.75;color:var(--muted)}
.qa__body a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* La apertura se anima cuando el navegador sabe interpolar a "auto"; donde no,
   el bloque simplemente aparece, que es el comportamiento nativo de siempre. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .qa::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .32s var(--ease-out),content-visibility .32s allow-discrete;
  }
  .qa[open]::details-content{block-size:auto}
}

/* ---------- CTA final ---------- */
.cta{background:linear-gradient(100deg,var(--brand-dark),var(--brand) 60%,#2b6ae8);color:#fff;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background:image-set(url(assets/gym-hero-texture.webp) type("image/webp"),url(assets/gym-hero-texture.jpg) type("image/jpeg")) center/cover;mix-blend-mode:overlay;
}
.cta__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto;
  padding:var(--sp-4) max(20px,3.5vw);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
}
.cta h2{font-size:clamp(22px,2.4vw,29px);letter-spacing:.3px}
.cta p{margin:8px 0 0;font-size:14px;font-weight:500;color:#fff}

/* ---------- Footer ----------
   Repite nombre, direccion, telefono y horario. Es la senal NAP que Google
   cruza con la ficha de Google Business para el posicionamiento local. */
footer{background:var(--ink);color:#fff;font-size:12px}
.footer__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  padding:var(--sp-5) max(20px,3.5vw) var(--sp-4);
  display:grid;grid-template-columns:1.6fr 1fr 1.1fr;gap:var(--sp-5);align-items:start;
}
.footer__inner>*{min-width:0}
.footer__logo img{height:58px}
.footer__slogan{margin:16px 0 0;color:var(--muted-dark);font-size:12.5px;font-style:italic;max-width:320px}
.footer__ig{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;
  color:var(--brand-light);font-weight:700;
  transition:color var(--t-micro) var(--ease-out);
}
.footer__ig:hover{color:#fff}
.footer__h{
  font-size:14px;letter-spacing:1.2px;color:#fff;margin-bottom:16px;
}
.footer__col nav{display:grid;gap:2px}
.footer__col nav a{
  display:flex;align-items:center;min-height:34px;color:var(--muted-dark);
  transition:color var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out);
}
.footer__col nav a:hover{color:#fff;transform:translateX(3px)}
.footer__nap{font-style:normal;line-height:2;color:var(--muted-dark)}
.footer__nap a{color:#fff;font-weight:700}
.footer__nap a:hover{color:var(--brand-light)}
.footer__legal{
  margin:0;padding:18px max(20px,3.5vw);text-align:center;
  border-top:1px solid rgba(255,255,255,.08);color:#7d8697;
}

/* ---------- Banner de productos destacados ---------- */
.promo{background:var(--ink);padding:34px 0 40px;text-align:center}
.promo__label{
  margin:0 0 18px;font:800 11px "Barlow Condensed",sans-serif;letter-spacing:1.6px;
  color:var(--muted-dark);padding:0 max(20px,3.5vw);
}
.promo__track{
  position:relative;width:100%;
  aspect-ratio:21/8;overflow:hidden;background:#111;
}
.promo__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease-out),visibility .7s;z-index:0;
  display:block;
}
.promo__slide.is-active{opacity:1;visibility:visible;z-index:1}
.promo__slide picture,.promo__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.promo__tag{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(11,18,32,.82);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:800 11.5px "Barlow Condensed",sans-serif;letter-spacing:.5px;
  padding:10px 12px;border-radius:999px;max-width:340px;margin:0 auto;
}
.promo__tag .ic{color:#25d366;flex:none}
.promo>.dots{margin-top:16px}


.waFab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  box-shadow:0 10px 24px rgba(23,49,105,.38);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s;
}
.waFab.is-on{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.waFab::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--brand-light);animation:pulse 2.4s var(--ease-out) 3;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ==========================================================================
   MOTION
   Un unico sistema de revelado para toda la pagina:
     .reveal        un bloque que sube y aparece al entrar en el viewport
     .reveal-group  igual, pero escalonando a sus hijos uno detras de otro
   Se anima solo opacidad y transform, las dos propiedades que el compositor
   resuelve sin recalcular diseno ni repintar. El retardo de cada hijo lo
   escribe el JS en --d.
   ========================================================================== */
.reveal,
.reveal-group>*{
  opacity:0;
  transform:translateY(var(--reveal-y,26px));
  transition:opacity var(--t-reveal) var(--ease-out),
             transform var(--t-reveal) var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-visible,
.reveal-group.is-visible>*{opacity:1;transform:none}

/* Los hijos de un grupo recorren menos distancia: al ir escalonados, un
   desplazamiento largo hace que la lista entera parezca tambalearse. */
.reveal-group>*{--reveal-y:18px}

/* Entrada escalonada del hero. Va con animation y no con transition porque
   no depende del scroll: arranca sola. Queda en pausa mientras la pantalla
   de carga tapa la pagina — si no, los 5 s del loader se comen la entrada
   entera y al descubrirse el hero ya estaria colocado y quieto. */
.heroText>*{opacity:0;transform:translateY(22px);animation:heroIn .7s var(--ease-out) forwards}
.heroText>*:nth-child(1){animation-delay:.1s}
.heroText>*:nth-child(2){animation-delay:.26s}
.heroText>*:nth-child(3){animation-delay:.42s}
.heroText>*:nth-child(4){animation-delay:.58s}
@keyframes heroIn{to{opacity:1;transform:none}}

html.is-loading .heroText>*,
html.is-loading .heroMedia__img,
html.is-loading .heroBadge__dot{animation-play-state:paused}

/* Sin JS: nada queda invisible */
.no-js .reveal,.no-js .reveal-group>*,.no-js .heroText>*{opacity:1;transform:none;animation:none}

/* ==========================================================================
   ESTADOS
   El hover que mueve cosas se limita a punteros finos: en tactil el navegador
   dispara un hover falso al tocar y la tarjeta se quedaba levantada despues
   del toque, sin forma de deshacerlo.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(23,49,105,.3)}
  .btn:hover::after{transform:translateX(120%)}
  .btn--ghost:hover,.btn--outline:hover{box-shadow:none}
  .services li:hover{transform:translateY(-3px)}
  .review:hover{transform:translateY(-4px)}
  .waFab.is-on:hover{transform:translateY(-3px) scale(1.05)}
  .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#c9d6ee}
  .plan--best:hover{box-shadow:0 26px 56px rgba(37,99,235,.24);border-color:var(--brand)}
  .card:hover{box-shadow:var(--shadow-lg)}
}
.card{transition:box-shadow .3s var(--ease-out)}
.plan:active{transform:scale(.99);transition-duration:var(--t-press)}

/* Respuesta a la pulsacion: va despues del hover para ganarle cuando se pulsa
   con el puntero encima. */
.btn:active{transform:scale(.97);transition-duration:var(--t-press)}
.waFab.is-on:active{transform:scale(.94);transition-duration:var(--t-press)}
.services li:active{transform:scale(.985);transition-duration:var(--t-press)}
.navToggle:active{transform:scale(.94);transition-duration:var(--t-press)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1140px){
  /* La columna de contacto pasa a una banda horizontal bajo servicios/tienda:
     por debajo de este ancho no le queda anchura util como columna. */
  .hub__grid,.reviews__inner{grid-template-columns:1fr;gap:18px}
  .hub__main{gap:18px}
  .card--info{margin-bottom:0}
  .card--info .infoList{grid-template-columns:repeat(3,1fr)}
  .card--info .miniMap{min-height:110px}
  .card--info .card__title{white-space:normal}
  .reviews__body{grid-column:1}
}
@media(max-width:1140px){
  /* Cinco planes en una fila dejan de caber. Se reparten 2 + 2 + 1: con tres
     columnas la segunda fila quedaba con una tarjeta y dos huecos. El
     destacado ocupa la fila final entera para que su etiqueta flotante no
     pise al vecino. */
  .plans{grid-template-columns:repeat(2,1fr)}
  .plan--best{grid-column:1/-1}
  .plan--best .plan__price{justify-content:center}
  .plan--best{align-items:center;text-align:center}
  .plan--best .btn{max-width:320px;margin-left:auto;margin-right:auto}
  .faq__inner{grid-template-columns:1fr;gap:var(--sp-4)}
}
@media(max-width:980px){
  nav{gap:18px;font-size:10px}
  .values{grid-template-columns:repeat(2,1fr)}
  .value:nth-child(2)::after{display:none}
}
@media(max-width:860px){
  header nav{
    position:fixed;left:0;right:0;top:0;bottom:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,18,32,.97);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    padding:calc(var(--header-h) + 18px) 8% var(--sp-5);
    transform:translateY(-100%);transition:transform .38s var(--ease-out);
    font-size:15px;letter-spacing:1.4px;
    overflow-y:auto;
  }
  header.nav-open nav{transform:translateY(0)}
  header nav a{padding:17px 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.09)}
  header nav a::after{display:none}
  .nav__cta{display:flex;margin-top:var(--sp-3);border-bottom:0;justify-content:center;min-height:46px}
  .header__cta{display:none}
  .navToggle{display:flex}

  .hub__main{grid-template-columns:1fr}
  /* A todo el ancho, el reflujo llegaba a 5 columnas y dejaba un huerfano.
     Con 5 servicios la segunda fila solo lleva dos: la rejilla es de 12
     columnas y cada elemento ocupa 4, asi los dos ultimos se pueden centrar
     en lugar de quedar pegados a la izquierda. */
  .services{grid-template-columns:repeat(12,1fr)}
  .services li{grid-column:span 4}
  .services li:nth-child(4){grid-column:3/7}
  .services li:nth-child(5){grid-column:7/11}
  .card--info .infoList{grid-template-columns:1fr}
  .reviews__track{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;
    align-items:start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .reviews__track::-webkit-scrollbar{display:none}
  .review{scroll-snap-align:start}
  .cta__inner{flex-direction:column;align-items:flex-start}
  .footer__inner{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .footer__brand{grid-column:1/-1}
}
@media(max-width:640px){
  .pricing,.faq{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan--best{margin-top:12px}
  .pricing__notes{gap:10px 18px;font-size:12.5px}
  .footer__inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .footer__slogan{max-width:none}
  .footer__col nav a{justify-content:center}
  .footer__col nav a:hover{transform:none}
  .heroBadge{font-size:11.5px}
  .hero{min-height:clamp(560px,86vh,760px)}
  .heroActions .btn{flex:1 1 100%}
  .values{grid-template-columns:1fr}
  .value::after{display:none!important}
  .value:not(:last-child){border-bottom:1px solid rgba(255,255,255,.1)}
  .hub::before{width:0}
  /* Dos columnas: el quinto servicio se quedaria solo y descolgado a la
     izquierda, asi que se centra en su fila. */
  /* Los 13 puntos de la galeria pedian 308px en un contenedor de 293 y el
     navegador los encogia a 18,9. Con hueco de 2px entran enteros. Trece
     objetivos de 24px no caben ahi de ninguna manera, pero el criterio 2.5.8
     de WCAG 2.2 exime al control cuando existe otro equivalente: las flechas
     de 38x38 y el gesto de arrastre hacen lo mismo. */
  .card--gallery .dots{gap:2px}

  .services{grid-template-columns:repeat(4,1fr)}
  .services li{grid-column:span 2}
  .services li:nth-child(4){grid-column:auto/span 2}
  .services li:nth-child(5){grid-column:2/4}
  .card{padding:20px}
  .cta__inner{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
  .cta .btn{width:100%}
}

/* Las secciones de debajo del pliegue no se maquetan ni se pintan hasta que se
   acercan al viewport. Con contain-intrinsic-size el navegador reserva una
   altura estimada, asi que la barra de scroll no pega saltos al llegar.

   Solo se aplica donde el bloque que se revela es la propia seccion. Un
   .reveal ANIDADO dentro de una seccion omitida no tiene caja, y el
   IntersectionObserver no emite ninguna entrada para el: si el scroll pasa
   de largo (un salto a un ancla, por ejemplo) se queda en opacidad 0 para
   siempre. Le paso por eso a .pricing y .faq, que son las dos que llevan
   bloques revelados dentro; ademas son texto y DOM ligero, donde saltarse el
   renderizado apenas ahorraba nada. */
@supports (content-visibility:auto){
  .promo,.cta,footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 500px;
  }
}

/* ---------- Preferencia de movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-group>*{opacity:1;transform:none;transition:none}
  .heroText>*{opacity:1;transform:none;animation:none}
  .heroMedia__img,.waFab::before,.heroBadge__dot,.scrollbarProgress{animation:none}
  .btn::after{display:none}
  header.is-hidden{transform:none}
  .qa::details-content{transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}