/* ==========================================================================
   Physio Wellness by Marshall — Prototipo Home
   Sistema de diseño base: color, tipografía, espaciado, botones,
   cabecera, menú móvil, hero y primera transición de sección.

   Tono de movimiento: controlado, preciso, tranquilo (es salud, no un
   parque de atracciones). Inspirado en el ritmo editorial de Revo Studios,
   sin copiar su paleta ni su estética "tech".
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Color — confirmados por el Inventario Maestro (14/08/2026) */
  --pw-primary:#237369;       /* verde corporativo confirmado */
  --pw-primary-600:#1c5c54;   /* hover / estado activo, derivado */
  --pw-primary-900:#123c37;   /* fondo profundo (cabecera sólida, secciones oscuras), derivado */
  --pw-accent:#269888;        /* acento confirmado por el inventario maestro */
  --pw-accent-accessible:#8fd9c9; /* para textos pequeños (8fd9c9 = 7.5:1 sobre oscuro) */
  --pw-white:#ffffff;
  --pw-ink:#12201d;           /* texto principal, casi negro con matiz verde */
  --pw-ink-70:rgba(18,32,29,.7);
  --pw-ink-50:rgba(18,32,29,.5);
  --pw-mist:#f3f6f5;          /* neutro claro de apoyo (no es un color de marca) */
  --pw-line:rgba(18,32,29,.12);
  --pw-line-on-dark:rgba(255,255,255,.22);

  /* Tipografía — Jost confirmada como tipografía de marca */
  --font-base:'Jost',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --fs-display:clamp(2.25rem,6vw,5.75rem);
  --fs-h2:clamp(1.75rem,3.8vw,3.25rem);
  --fs-h3:clamp(1.375rem,2vw,1.75rem);
  --fs-lead:clamp(1.05rem,1.4vw,1.25rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.75rem;

  /* Espaciado — escala base 8, según el design system del proyecto */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem; --sp-32:8rem;

  /* Jerarquía Semántica de Espaciado (Ritmo Editorial Global) */
  --space-micro:var(--sp-1);             /* 0.25rem / 4px: elementos íntimamente relacionados (icono+texto, pills) */
  --space-2xs:0.375rem;                  /* 6px: microespaciado de soporte */
  --space-sm:var(--sp-2);                /* 0.5rem / 8px: label->heading compacto, heading->metadata */
  --space-sm-md:var(--sp-3);             /* 0.75rem / 12px: eyebrow -> heading estándar, card title -> desc */
  --space-md:var(--sp-4);                /* 1rem / 16px: heading -> paragraph / lead compacto, entre párrafos */
  --space-md-lg:var(--sp-5);             /* 1.25rem / 20px: heading -> lead editorial con respiración */
  --space-lg:var(--sp-6);                /* 1.5rem / 24px: lead/intro -> CTA o contenido */
  --space-xl:var(--sp-8);                /* 2rem / 32px: separación de bloques internos y subsecciones */
  --space-2xl:var(--sp-12);              /* 3rem / 48px: grandes agrupaciones internas */
  --space-section:clamp(4rem, 7vw, 6.5rem);        /* Espacio de sección estándar */
  --space-section-dense:clamp(3rem, 5vw, 4.75rem); /* Transición de sección con contraste de fondo o franja compacta */
  --space-section-hero:clamp(5rem, 10vh, 8.5rem);  /* Hero y transiciones mayores */

  /* Movimiento */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-emphatic:cubic-bezier(.16,1,.3,1);
  --dur-fast:.25s; --dur-med:.5s; --dur-slow:.9s;

  /* Layout */
  --container:1240px;
  --radius:2px; /* precisión clínica: bordes casi rectos, nada juguetón */
}

/* ---------- 2. Reset base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
body{
  margin:0;
  font-family:var(--font-base);
  background-color:var(--pw-white);
  color:var(--pw-ink);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:400;
  overflow-wrap:break-word;
}
img, picture{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit;}
[hidden]{display:none!important;}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-base);
  font-weight:500;
  text-wrap:balance;
}
h1{
  line-height:1.1;
  letter-spacing:-.02em;
}
h2{
  line-height:1.18;
  letter-spacing:-.015em;
}
h3{
  line-height:1.28;
  letter-spacing:-.01em;
}
h4{
  line-height:1.35;
  letter-spacing:0;
}
p{margin:0;}
p + p{margin-top:var(--space-md);}
ul{margin:0;padding:0;list-style:none;}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,2.75rem);
}

/* Evita que el header fijo (siempre presente, con o sin .is-hidden) tape el
   inicio de una sección al llegar por ancla, tanto en saltos nativos del
   navegador (enlaces entre páginas) como en el scrollIntoView de
   smoothAnchor(). La altura del header es fija en todos los anchos
   (§4, "Altura fija y compacta"), así que un único valor sirve para todo
   el sitio; :where() mantiene especificidad 0 para no pisar otras reglas. */
:where([id]){scroll-margin-top:6rem;}

/* foco visible consistente en toda la web */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:3px;
}

.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--pw-primary-900);color:var(--pw-white);
  padding:.85rem 1.4rem;z-index:200;
  font-size:var(--fs-small);
}
.skip-link:focus{left:var(--sp-4);top:var(--sp-4);}

/* Utilidad genérica: contenido solo para lectores de pantalla. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.display{font-size:var(--fs-display);font-weight:500;line-height:1.08;letter-spacing:-.02em;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--pw-primary);
  line-height:1.3;
}
.eyebrow::before{
  content:"";display:block;width:2rem;height:1px;background:var(--pw-primary);flex-shrink:0;
}
.eyebrow--on-dark{color:var(--pw-accent-accessible);}
.eyebrow--on-dark::before{background:var(--pw-accent-accessible);}

/* ---------- 3. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 2rem;
  font-family:var(--font-base);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn--primary{
  background:var(--pw-primary);
  color:var(--pw-white);
}
.btn--primary:hover{
  background:var(--pw-primary-600);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -16px rgba(18,60,55,.45);
}
.btn--outline{
  border-color:rgba(255,255,255,.5);
  color:var(--pw-white);
}
.btn--outline:hover{
  border-color:var(--pw-accent);
  background:rgba(38,152,136,.14);
}
.btn--sm{padding:.7rem 1.4rem;font-size:.72rem;}
/* Para etiquetas largas que no caben en una línea en pantallas estrechas. */
.btn--wrap{white-space:normal;text-align:center;}

/* ---------- 4. Cabecera y navegación ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  color:var(--pw-white);
  background:linear-gradient(to bottom, rgba(18,32,29,.5), rgba(18,32,29,0));
  transform:translateY(0);
  transition:background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.site-header.is-solid{
  background:var(--pw-primary-900);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.5);
}
/* Se oculta desplazándose fuera de la vista (no display:none ni visibility)
   para que la transición sea fluida y el elemento siga midiéndose igual;
   headerState() en main.js ya se asegura de no aplicar esta clase mientras
   el header tiene foco de teclado dentro. */
.site-header.is-hidden{transform:translateY(-100%);}
/* Altura fija y compacta: el header NO se comprime al hacer scroll,
   solo cambia el fondo (transparente sobre el Hero → verde oscuro). */
.site-header__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  min-height:3.5rem;
  padding-block:.55rem;
}

.brand{display:inline-flex;align-items:center;}
.brand img{height:2.1rem;width:auto;}

.main-nav{display:none;}
@media (min-width:960px){
  .main-nav{
    display:flex;align-items:center;gap:clamp(0.85rem, 1.5vw, 1.75rem);
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  }
  .main-nav > a,
  .nav-item__btn{
    position:relative;padding-block:.3rem;
    display:inline-flex;align-items:center;gap:.45rem;
    font-size:inherit;letter-spacing:inherit;text-transform:inherit;
    color:inherit;white-space:nowrap;
  }
  .main-nav > a::after,
  .nav-item__btn::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:0%;
    background:var(--pw-accent);
    transition:width var(--dur-fast) var(--ease-out);
  }
  .main-nav > a:hover::after,
  .main-nav > a[aria-current="page"]::after,
  .nav-item__btn:hover::after,
  .nav-item__btn.is-current::after,
  .nav-item__btn[aria-expanded="true"]::after{width:100%;}
}

.nav-item{position:relative;}
.nav-item__chevron{flex-shrink:0;transition:transform var(--dur-fast) var(--ease-out);}
[aria-expanded="true"] .nav-item__chevron{transform:rotate(180deg);}

@keyframes disclosure-in{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}

.nav-dropdown{
  position:absolute;top:calc(100% + .85rem);left:-1.25rem;z-index:60;
  min-width:15.5rem;
  display:flex;flex-direction:column;
  padding-block:.4rem;
  background:var(--pw-primary-900);
  border:1px solid var(--pw-line-on-dark);
  border-radius:var(--radius);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
  animation:disclosure-in var(--dur-fast) var(--ease-out) both;
}
.nav-dropdown a{
  padding:.7rem 1.25rem;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-dropdown a:hover{background:rgba(38,152,136,.18);color:var(--pw-white);}
.nav-dropdown a.nav-dropdown__all{
  margin-top:.4rem;padding-top:.9rem;
  border-top:1px solid var(--pw-line-on-dark);
  color:#8fd9c9;
}
/* Página actual dentro del desplegable: fondo + filete, no sólo color. */
.nav-dropdown a[aria-current="page"]{
  background:rgba(38,152,136,.18);
  color:var(--pw-white);
  box-shadow:inset 2px 0 0 var(--pw-accent);
}

.header-actions{display:flex;align-items:center;gap:clamp(0.85rem, 1.8vw, var(--sp-6));}

.lang-switch{
  display:none;
  align-items:center;gap:.4rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
@media (min-width:960px){ .lang-switch{display:inline-flex;} }
.lang-switch a{opacity:.65;padding:.2rem .15rem;transition:opacity var(--dur-fast) var(--ease-out);}
.lang-switch a:hover{opacity:1;}
.lang-switch a[aria-current="true"]{opacity:1;font-weight:600;color:var(--pw-accent);}
.lang-switch span{opacity:.4;}

.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;min-width:44px;min-height:44px;color:var(--pw-white);
  margin-right:-.5rem;
}
@media (min-width:960px){ .menu-toggle{display:none;} }

/* ---------- 4b. Recorrido de reserva (CTA principal) ---------- */
.booking{position:relative;}
.booking__btn{display:none;}
@media (min-width:960px){ .booking__btn{display:inline-flex;} }
@media (min-width:960px) and (max-width:1080px){
  .booking__btn{padding:.85rem 1.35rem;}
}

.booking-panel{
  position:absolute;top:calc(100% + .85rem);right:0;z-index:180;
  width:min(25rem,calc(100vw - 2rem));
  max-height:calc(100vh - 6rem);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.1rem 1.35rem 1.35rem;
  background:var(--pw-primary-900);
  border:1px solid var(--pw-line-on-dark);
  border-radius:var(--radius);
  box-shadow:0 28px 56px -24px rgba(0,0,0,.65);
  animation:disclosure-in var(--dur-fast) var(--ease-out) both;
}
.booking-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);}
.booking-panel__title{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:#8fd9c9;
}
.booking-panel__close{
  display:none;width:2.25rem;height:2.25rem;
  align-items:center;justify-content:center;
  color:var(--pw-white);margin-right:-.5rem;
}
.booking-panel__list{display:flex;flex-direction:column;}
.booking-panel__list a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:.8rem 0;
  font-size:.95rem;line-height:1.35;
  color:rgba(255,255,255,.9);
  border-top:1px solid var(--pw-line-on-dark);
  transition:color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.booking-panel__list a:first-child{border-top:none;}
.booking-panel__list a::after{content:"→";color:var(--pw-accent);}
.booking-panel__list a:hover{color:var(--pw-white);padding-left:.35rem;}
.booking-panel__help{
  padding-top:.9rem;
  border-top:1px solid var(--pw-line-on-dark);
  font-size:.8rem;line-height:1.45;color:#8fd9c9;
  transition:color var(--dur-fast) var(--ease-out);
}
.booking-panel__help:hover{color:var(--pw-white);}

/* En móvil el panel de reserva se convierte en hoja inferior */
@keyframes sheet-in{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
@media (max-width:959px){
  .booking{position:static;}
  .booking-panel{
    position:fixed;top:auto;right:0;left:0;bottom:0;
    width:auto;max-height:82vh;
    border-inline:0;border-bottom:0;border-radius:0;
    padding:1.1rem clamp(1.5rem,6vw,2.75rem) calc(1.5rem + env(safe-area-inset-bottom));
    animation-name:sheet-in;
  }
  .booking-panel__close{display:inline-flex;}
}

/* Botón fijo inferior de reserva (solo móvil) */
.book-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:170;
  padding:.7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background:var(--pw-primary-900);
  border-top:1px solid var(--pw-line-on-dark);
}
.book-bar__btn{width:100%;justify-content:center;}
@media (min-width:960px){ .book-bar{display:none;} }
@media (max-width:959px){ body{padding-bottom:4rem;} }

/* ---------- 5. Menú móvil ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:150;
  background:var(--pw-primary-900);
  color:var(--pw-white);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--dur-med) var(--ease-emphatic), visibility 0s linear var(--dur-med);
  display:flex;flex-direction:column;gap:var(--sp-6);
  padding:.55rem clamp(1.5rem,6vw,2.75rem) calc(5rem + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform var(--dur-med) var(--ease-emphatic), visibility 0s;
}
@media (min-width:960px){ .mobile-menu{display:none;} }

.mobile-menu__top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:3.5rem;flex-shrink:0;
}
.mobile-menu__close{
  width:2.75rem;height:2.75rem;
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:-.5rem;
}

.mobile-nav{display:flex;flex-direction:column;padding-block:var(--sp-6);}
.mobile-nav__link,
.m-acc__btn{
  font-size:clamp(1.5rem,6vw,2.1rem);
  font-weight:400;letter-spacing:-.01em;
  padding-block:.55rem;
  color:var(--pw-white);opacity:.92;
  text-align:left;
}
.m-acc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;
}
.m-acc__btn[aria-expanded="true"]{opacity:1;color:var(--pw-accent);}
.m-acc__chevron{flex-shrink:0;color:var(--pw-accent);transition:transform var(--dur-fast) var(--ease-out);}
[aria-expanded="true"] .m-acc__chevron{transform:rotate(180deg);}

.m-acc__panel{
  display:flex;flex-direction:column;
  padding:.25rem 0 .9rem;
  animation:disclosure-in var(--dur-fast) var(--ease-out) both;
}
.m-acc__panel a{
  padding:.7rem 0 .7rem 1.1rem;
  font-size:.95rem;letter-spacing:.05em;
  color:rgba(255,255,255,.82);
  border-left:1px solid var(--pw-line-on-dark);
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.m-acc__panel a:hover{color:var(--pw-white);border-left-color:var(--pw-accent);}
.m-acc__panel a.m-acc__all{color:#8fd9c9;}
.m-acc__panel a[aria-current="page"]{
  color:var(--pw-white);
  border-left-color:var(--pw-accent);
  border-left-width:2px;
}
.m-acc__btn.is-current{opacity:1;}

/* margin-top:auto en lugar de justify-content:space-between en el contenedor:
   con los acordeones abiertos el contenido puede desbordar y así hace scroll
   en vez de salirse por arriba */
.mobile-menu__bottom{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--sp-6);border-top:1px solid var(--pw-line-on-dark);
  flex-wrap:wrap;gap:var(--sp-4);flex-shrink:0;
}
.lang-switch--in-menu{
  display:inline-flex;
  gap:var(--sp-2);
}
.lang-switch--in-menu a{
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem;
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--pw-primary-900);
  color:var(--pw-white);
}
.hero__media{
  position:absolute;inset:0;
  will-change:transform,opacity;
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(10,26,23,.92) 0%, rgba(10,26,23,.55) 42%, rgba(10,26,23,.22) 68%, rgba(10,26,23,.35) 100%);
}
.hero__content{
  position:relative;z-index:2;width:100%;
  padding-block:clamp(7rem,14vh,10rem) clamp(3.5rem,7vh,5rem);
}
.hero__eyebrow{margin-bottom:var(--space-sm-md);}
.hero__title{
  max-width:52rem;
  margin-bottom:var(--sp-8);
}
/* padding-bottom da aire a los descendentes (j, g, y); el margen negativo mantiene el interlineado */
.hero__title .reveal-line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em;}
.hero__title .reveal-line > span{
  display:block;
  transform:translateY(130%);
  transition:transform var(--dur-slow) var(--ease-emphatic);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.hero.is-ready .hero__title .reveal-line > span{transform:translateY(0);}

.hero__lead{
  max-width:34rem;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.86);
  margin-bottom:var(--sp-12);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:.55s;
}
.hero.is-ready .hero__lead{opacity:1;transform:translateY(0);}

.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:.72s;
}
.hero.is-ready .hero__actions{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .hero__title .reveal-line > span{transition-delay:0ms!important;}
  .hero__lead,.hero__actions{transition-delay:0ms!important;}
}

/* ---------- 6.1. Hero Announcement Card (Novedad destacada) ---------- */
.hero__announcement {
  position: absolute;
  inset-block-start: clamp(5.4rem, 8.5vh, 6.4rem);
  inset-inline: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: 0.15s;
}

.hero.is-ready .hero__announcement {
  opacity: 1;
  transform: translateY(0);
}

.hero__announcement--hidden,
.announcement-card--hidden,
[data-announcement-active="false"] {
  display: none !important;
}

.hero__announcement-inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.announcement-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 310px;
  padding: 1.1rem 1.25rem 1rem;
  background: rgba(10, 24, 21, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: var(--pw-white);
  text-decoration: none;
  font-family: var(--font-base);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: pointer;
  transition:
    background-color 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.announcement-card:hover {
  background: rgba(14, 32, 28, 0.94);
  border-color: rgba(143, 217, 201, 0.42);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.announcement-card:focus-visible {
  outline: 2px solid var(--pw-accent);
  outline-offset: 3px;
}

.announcement-card__header {
  margin-bottom: 0.35rem;
}

.announcement-card__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fd9c9;
  line-height: 1;
}

.announcement-card__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pw-white);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}

.announcement-card__desc {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
}

.announcement-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fd9c9;
  line-height: 1;
}

.announcement-card__cta-text {
  position: relative;
}

.announcement-card__cta-arrow {
  display: inline-block;
  width: 13px;
  height: 9px;
  color: currentColor;
  transition: transform 220ms var(--ease-out);
}

.announcement-card:hover .announcement-card__cta-arrow {
  transform: translateX(3px);
}

/* Tablet: card compacta a dalt a l'esquerra */
@media (max-width: 960px) {
  .hero__announcement {
    inset-block-start: clamp(5rem, 8vh, 5.75rem);
  }
  .announcement-card {
    max-width: 260px;
    padding: 0.95rem 1.1rem 0.9rem;
  }
  .announcement-card__title {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
  }
  .announcement-card__desc {
    font-size: 0.78rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }
}

/* Mobile: simplificar eliminant descripció per no ocupar espai excessiu i assegurar zero solapament */
@media (max-width: 640px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    min-height: 100vh;
  }
  .hero__announcement {
    position: relative;
    inset-block-start: auto;
    inset-inline: auto;
    width: 100%;
    padding-top: clamp(4.5rem, 7vh, 5rem);
    margin-bottom: auto;
  }
  .hero__content {
    padding-block-start: var(--sp-4);
    padding-block-end: clamp(2.5rem, 6vh, 4rem);
  }
  .announcement-card {
    width: auto;
    max-width: 215px;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
  }
  .announcement-card__header {
    margin-bottom: 0.25rem;
  }
  .announcement-card__badge {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
  }
  .announcement-card__title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }
  .announcement-card__desc {
    display: none;
  }
  .announcement-card__cta {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 360px) {
  .announcement-card {
    max-width: 195px;
    padding: 0.55rem 0.75rem;
  }
  .announcement-card__title {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__announcement {
    transition-delay: 0ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .announcement-card,
  .announcement-card:hover,
  .announcement-card__cta-arrow,
  .announcement-card:hover .announcement-card__cta-arrow {
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- 7. Utilidad de revelado al hacer scroll (reutilizable) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-emphatic), transform var(--dur-slow) var(--ease-emphatic);
  transition-delay:calc(var(--i,0) * 90ms);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transition-delay:0ms!important;}
}

.section-eyebrow{margin-bottom:var(--space-sm-md);}
.section-heading{font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.015em;max-width:26ch;}
.section-lead{font-size:var(--fs-lead);line-height:1.6;color:var(--pw-ink-70);max-width:44ch;text-wrap:pretty;}
/* Jerarquía editorial Gestalt:
   Eyebrow -> (petit / 12px) -> Heading -> (mitjà / 20px) -> Lead -> (gran / 32px) -> Contingut */
.section-heading + .section-lead{margin-top:var(--space-md-lg);}
.section-lead + *{margin-top:var(--space-xl);}

/* ---------- 8. Franja de confianza ----------
   Tira editorial de datos de confianza, no barra de "features": sin cards,
   sin sombras, sin puntos. Cada dato es un par valor/etiqueta apilado; los
   separadores son líneas de 1px casi invisibles (var(--pw-line)) y solo
   aparecen en la fila única de escritorio (≥960px), donde no hay ambigüedad
   de "primero de fila" — en móvil/tablet el aire (gap) ya separa cada dato
   sin necesidad de trazo. La micro-animación de conteo (10+ / 1.500+) vive
   en trustCounters() en main.js y usa este mismo [data-reveal] como disparo:
   ver comentario ahí para el porqué de no repetirla al hacer scroll. */
.trust{padding-block:var(--sp-12);background:var(--pw-white);border-bottom:1px solid var(--pw-line);}
.trust__list{
  display:grid;grid-template-columns:1fr;
  gap:var(--sp-8) var(--sp-6);
}
.trust__item{display:flex;flex-direction:column;gap:.3rem;}
.trust__value{
  display:block;
  font-size:clamp(1.75rem,2.4vw,2.125rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--pw-ink);
  font-variant-numeric:tabular-nums;
}
.trust__label{
  display:block;
  font-size:var(--fs-small);
  letter-spacing:.02em;
  color:var(--pw-ink-70);
}
@media (min-width:640px){
  .trust__list{grid-template-columns:repeat(2,1fr);gap:var(--sp-10) var(--sp-8);}
}
@media (min-width:960px){
  .trust__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);}
  .trust__item{
    padding-inline-start:var(--sp-6);
    border-inline-start:1px solid var(--pw-line);
  }
  .trust__item:first-child{padding-inline-start:0;border-inline-start:none;}
}

/* ---------- 9. Orientación: "¿qué necesitas?" ---------- */
.orient{
  padding-block:var(--space-section);
  background:var(--pw-mist);
  border-block:1px solid var(--pw-line);
}
.orient__head{max-width:42rem;margin-bottom:var(--sp-12);}
.orient__lead{margin-top:var(--sp-5);max-width:52ch;}
.orient__list{
  display:grid;gap:1px;
  background:var(--pw-line);
  border:1px solid var(--pw-line);
}
.orient__item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  background:var(--pw-white);
  padding:var(--sp-6) var(--sp-8);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.orient__item:hover,.orient__item:focus-visible{background:rgba(35,115,105,.06);}
.orient__item-text{font-size:1.02rem;max-width:34rem;}
.orient__item-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pw-primary);white-space:nowrap;
}
.orient__item-cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.orient__item:hover .orient__item-cta svg,.orient__item:focus-visible .orient__item-cta svg{transform:translateX(4px);}
.orient__note{
  margin-top:var(--sp-6);
  font-size:.9rem;color:var(--pw-ink-50);
}
@media (max-width:640px){
  .orient__item{flex-direction:column;align-items:flex-start;gap:var(--sp-3);}
}

/* ---------- 10. Servicios ----------
   Diseño visual: fondo profundo (--pw-primary-900, el mismo tono que The
   Marshall Method, con el que conecta directamente) para que la sección se
   lea como un momento principal de la Home, con paneles editoriales grandes
   dominados por la fotografía.

   Comportamiento de escritorio (>=1100px, sin prefers-reduced-motion):
   servicesPinScroll (main.js) fija el escenario con position:sticky y
   traduce .services__grid con transform:translate3d() según el progreso de
   scroll vertical (ver JS para el cálculo de distancias). Todo el CSS de
   aquí es también el fallback SIN JavaScript / por debajo de 1100px /
   reduced-motion: sin la clase .is-pin-active que añade el script, el
   riel es un scroll horizontal nativo (overflow-x:auto, mismo patrón que
   .google-reviews__viewport) y .services__pin-inner no llega a fijarse
   porque .services__pin-wrap no tiene una altura forzada. */
.services{padding-block:clamp(var(--sp-8),4vh,var(--sp-16)) 0;background:var(--pw-primary-900);color:var(--pw-white);}

.services__pin-wrap{position:relative;}

.services__pin-inner{padding-block:clamp(0.25rem,0.8vh,var(--sp-2)) 0;}
@media (min-width:1100px){
  .services__pin-inner{
    position:sticky;
    top:var(--services-pin-top,0px);
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .services.is-pin-active .services__stage{
    height:100%;
    min-height:0;
  }
  .services.is-pin-active .service-panel{
    height:100%;
    max-height:680px;
    width:clamp(280px,min(30vw,52vh),420px);
  }
  .services.is-pin-active .service-panel__media{
    flex:1 1 auto;
    min-height:120px;
    aspect-ratio:auto;
  }
  .services.is-pin-active .service-panel__body{
    flex:0 0 auto;
  }
  .services.is-pin-active .services__aside{
    height:100%;
    max-height:680px;
  }
  .services.is-pin-active .service-complementary{
    height:100%;
    max-height:680px;
    width:100%;
    display:flex;
    flex-direction:column;
  }
  .services.is-pin-active .service-complementary__media{
    flex:0 0 clamp(160px, 28vh, 230px);
    aspect-ratio:auto;
  }
  .services.is-pin-active .service-complementary__body{
    flex:1 1 auto;
    min-height:0;
  }
  .services.is-pin-active .service-panel[data-reveal],
  .services.is-pin-active .services__aside[data-reveal],
  .services.is-pin-active .service-complementary[data-reveal]{
    transform:none;
    opacity:1;
  }
}

.services__head-row{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-8);margin-bottom:clamp(var(--sp-4),2.5vh,var(--sp-12));
  flex:0 0 auto;
}
.services__head{max-width:34rem;}
.services__head .section-heading{color:var(--pw-white);}

.services__nav{display:flex;align-items:center;gap:var(--sp-6);}
.services__progress{
  font-size:.85rem;letter-spacing:.06em;
  color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:opacity var(--dur-med) var(--ease-out);
}
.services__progress-current{color:var(--pw-white);font-weight:500;}
/* Panel final: el contador se mantiene en 04/04 pero se atenúa, ya no hay
   "siguiente servicio" que contar (ver requisito 10, servicesPinScroll). */
.services__progress.is-final{opacity:.45;}

.services__arrows{display:flex;gap:var(--sp-3);}
.services__arrow{
  width:54px;height:54px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);
  color:var(--pw-white);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.services__arrow:hover,.services__arrow:focus-visible{
  background:rgba(143,217,201,.14);border-color:rgba(143,217,201,.55);
}
.services__arrow:focus-visible{outline:2px solid #8fd9c9;outline-offset:2px;}
.services__arrow:active{background:rgba(143,217,201,.22);border-color:rgba(143,217,201,.7);}
.services__arrow:disabled:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3);}
.services__arrow:disabled{
  opacity:.3;cursor:not-allowed;
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3);
}

/* El riel vive fuera de .container a propósito, igual que
   .google-reviews__viewport: puede superar el ancho del encabezado (1240px)
   pero nunca el del documento, ya que .services (la section) no tiene
   max-width propio. El desbordamiento horizontal queda contenido en este
   viewport (overflow-x:auto de base; overflow:hidden solo cuando
   servicesPinScroll activa .is-pin-active), nunca en html/body. El
   padding-inline repite el del .container para que el primer panel
   arranque alineado con el encabezado. */
/* Escenario de Servicios: en desktop (>=1100px) distribuye el carrusel de las
   5 formas principales a la izquierda y el aside de Fisioterapia a domicilio
   a la derecha, ambos alineados en altura. En tablet y móvil pasa debajo. */
.services__stage{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:clamp(2rem,4vw,3.5rem);
}

.services__viewport{
  width:100%;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-inline:clamp(1.5rem,4vw,2.75rem);
  padding-block:var(--sp-2);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
  flex:1 1 auto;
  min-height:0;
}
.services__viewport::-webkit-scrollbar{height:6px;}
.services__viewport::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:999px;}
.services.is-pin-active .services__viewport{
  overflow:hidden;
  scroll-snap-type:none;
}

.services__grid{
  display:flex;gap:clamp(1.25rem,2vw,1.75rem);align-items:stretch;
  width:max-content;
  height:100%;
  padding-inline:clamp(1.5rem,4vw,2.75rem);
}
.services.is-pin-active .services__grid{will-change:transform;}

.services__aside{
  width:100%;
  display:flex;
  justify-content:center;
  padding-inline:clamp(1.5rem,4vw,2.75rem);
}

@media (min-width:1100px){
  .services__stage{
    flex-direction:row;
    align-items:stretch;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:clamp(1.5rem,4vw,2.75rem);
    gap:clamp(1.5rem,2.2vw,2.5rem);
    flex:1 1 auto;
    min-height:0;
  }
  .services__viewport{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    padding-inline:0;
  }
  .services__grid{
    padding-inline:0;
  }
  .services__aside{
    flex:0 0 clamp(280px,21vw,330px);
    width:auto;
    padding-inline:0;
    display:flex;
    flex-direction:column;
    height:100%;
  }
}

.service-panel{
  flex:0 0 auto;
  width:clamp(360px,36vw,480px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  scroll-margin-top:6rem;
}
.service-panel__media{aspect-ratio:3/4;overflow:hidden;background:rgba(255,255,255,.06);}
.service-panel__img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.service-panel:hover .service-panel__img,.service-panel:focus-within .service-panel__img{transform:scale(1.04);}
.service-panel__img--physio{object-position:58% 32%;}
.service-panel__img--wellness{object-position:70% 32%;}
.service-panel__img--strength{object-position:46% 35%;}
.service-panel__img--pilates{object-position:42% 30%;}
.service-panel__img--stretching{object-position:44% 38%;}

.service-panel__body{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-6);flex-grow:1;
}
.service-panel__num{font-size:.72rem;letter-spacing:.14em;color:#8fd9c9;}
.service-panel__title{font-size:1.35rem;font-weight:500;line-height:1.15;color:var(--pw-white);}
.service-panel__hook{font-size:.95rem;color:rgba(255,255,255,.75);}
.service-panel__benefits{display:flex;flex-direction:column;gap:.4rem;margin-top:.15rem;}
.service-panel__benefits li{
  position:relative;padding-left:1rem;
  font-size:.85rem;color:rgba(255,255,255,.65);
}
.service-panel__benefits li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:.3rem;height:.3rem;border-radius:50%;
  background:#8fd9c9;
}
.service-panel__cta{
  margin-top:auto;padding-top:var(--sp-3);
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8fd9c9;
}
.service-panel__cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.service-panel__cta:hover svg,.service-panel__cta:focus-visible svg{transform:translateX(4px);}

/* Composición móvil: recorrido vertical normal de las 5 formas principales */
@media (max-width:719px){
  .services__nav{display:none;}
  .services__viewport{overflow-x:visible;scroll-snap-type:none;padding-inline:0;}
  .services__grid{
    display:flex;flex-direction:column;width:auto;height:auto;
    gap:var(--sp-10);padding-inline:0;
  }
  .services__stage{
    padding-inline:clamp(1.5rem,4vw,2.75rem);
    gap:var(--sp-10);
  }
  .services__aside{
    padding-inline:0;
  }
  .service-panel{width:100%;scroll-snap-align:none;}
  .service-panel__media{aspect-ratio:4/3;}
  .service-panel__img--stretching{object-position:44% 25%;}
}

/* Servicio complementario: Fisioterapia a domicilio.
   Bloque complementario sobrio y editorial, integrado en el mismo universo visual
   de la web (mismo fondo, bordes, tipografía y estilo de viñetas), con escala propia,
   etiqueta SERVICIO COMPLEMENTARIO y sin numeración. */
.service-complementary{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:520px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
  box-sizing:border-box;
  scroll-margin-top:6rem;
  transition:border-color var(--dur-med) var(--ease-out);
}
.service-complementary:hover,
.service-complementary:focus-within{
  border-color:rgba(143,217,201,.35);
}
.service-complementary::before{
  display:none;
}

.service-complementary__media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.service-complementary__img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 28%;
  transition:transform var(--dur-slow) var(--ease-out);
}
.service-complementary:hover .service-complementary__img,
.service-complementary:focus-within .service-complementary__img{
  transform:scale(1.03);
}

.service-complementary__body{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:clamp(var(--sp-5),2vw,var(--sp-6));
  flex-grow:1;
}
.service-complementary__tag{
  margin-bottom:0.15rem;
}
.service-complementary__badge{
  display:inline-flex;align-items:center;
  font-size:0.68rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:#8fd9c9;
  background:rgba(143,217,201,.08);
  border:1px solid rgba(143,217,201,.26);
  padding:0.24rem 0.65rem;border-radius:2px;
}
.service-complementary__title{
  font-size:1.35rem;font-weight:500;line-height:1.18;
  color:var(--pw-white);
  margin:0;
}
.service-complementary__hook{
  font-size:0.92rem;line-height:1.52;
  color:rgba(255,255,255,.76);
  margin:0;
}
.service-complementary__benefits{
  display:flex;flex-direction:column;gap:0.35rem;margin-top:0.2rem;
  padding:0;list-style:none;
}
.service-complementary__benefits li{
  position:relative;padding-left:1rem;
  font-size:0.85rem;color:rgba(255,255,255,.68);
}
.service-complementary__benefits li::before{
  content:"";position:absolute;left:0;top:0.5em;
  width:0.3rem;height:0.3rem;border-radius:50%;
  background:#8fd9c9;
}
.service-complementary__cta{
  margin-top:auto;padding-top:var(--sp-3);
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  color:#8fd9c9;font-weight:600;text-decoration:none;
}
.service-complementary__cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.service-complementary__cta:hover svg,
.service-complementary__cta:focus-visible svg{transform:translateX(4px);}

@media (max-width:719px){
  .service-complementary{
    max-width:100%;
    margin-inline:0;
  }
}

/* Adaptación vertical para pantallas de escritorio con altura moderada/reducida
   (MacBook 13"/14", 1440x900 con barras de navegador, 1366x768, 1280x800, 1280x720):
   escala proporcional de espacios verticales para garantizar visibilidad completa
   de encabezado, foto, número, título, hook, beneficios y CTA. */
@media (min-width:1100px) and (max-height:860px){
  .services__head-row{
    gap:var(--sp-4);
    margin-bottom:clamp(0.5rem,1.8vh,var(--sp-4));
  }
  .services__head .section-heading{
    font-size:clamp(1.75rem,2.8vw,2.5rem);
  }
  .services__arrow{
    width:46px;height:46px;
  }
  .services.is-pin-active .service-panel__body{
    padding:clamp(var(--sp-3),1.8vh,var(--sp-5)) clamp(var(--sp-4),2vw,var(--sp-6));
    gap:clamp(0.25rem,0.9vh,var(--sp-3));
  }
  .services.is-pin-active .service-panel__title{
    font-size:clamp(1.15rem,1.4vw,1.3rem);
  }
  .services.is-pin-active .service-panel__hook{
    font-size:clamp(0.82rem,0.95vw,0.92rem);
  }
  .services.is-pin-active .service-panel__benefits{
    gap:clamp(0.2rem,0.5vh,0.35rem);
  }
  .services.is-pin-active .service-panel__benefits li{
    font-size:clamp(0.78rem,0.85vw,0.82rem);
  }
  .services.is-pin-active .service-panel__cta{
    padding-top:clamp(0.2rem,0.6vh,var(--sp-2));
    font-size:clamp(0.65rem,0.72vw,0.7rem);
  }
  .services.is-pin-active .service-complementary__media{
    flex:0 0 clamp(130px, 24vh, 180px);
  }
  .services.is-pin-active .service-complementary__body{
    padding:clamp(var(--sp-3),1.8vh,var(--sp-5)) clamp(var(--sp-4),2vw,var(--sp-6));
    gap:clamp(0.2rem,0.8vh,var(--sp-3));
  }
  .services.is-pin-active .service-complementary__title{
    font-size:clamp(1.15rem,1.4vw,1.3rem);
  }
  .services.is-pin-active .service-complementary__hook{
    font-size:clamp(0.8rem,0.92vw,0.88rem);
    line-height:1.35;
  }
  .services.is-pin-active .service-complementary__benefits{
    gap:clamp(0.15rem,0.4vh,0.3rem);
  }
  .services.is-pin-active .service-complementary__benefits li{
    font-size:clamp(0.78rem,0.85vw,0.82rem);
  }
  .services.is-pin-active .service-complementary__cta{
    padding-top:clamp(0.2rem,0.6vh,var(--sp-2));
    font-size:clamp(0.65rem,0.72vw,0.7rem);
  }
}

@media (min-width:1100px) and (max-height:740px){
  .services__pin-inner{
    padding-block:0.25rem 0;
  }
  .services__head-row{
    margin-bottom:0.35rem;
  }
  .services__head .section-heading{
    font-size:1.6rem;
  }
  .services__arrow{
    width:40px;height:40px;
  }
  .services__nav{
    gap:var(--sp-3);
  }
  .services.is-pin-active .service-panel__body{
    padding:0.6rem 0.85rem;
    gap:0.2rem;
  }
  .services.is-pin-active .service-panel__title{
    font-size:1.08rem;
  }
  .services.is-pin-active .service-panel__hook{
    font-size:0.8rem;
  }
  .services.is-pin-active .service-panel__benefits{
    gap:0.15rem;
  }
  .services.is-pin-active .service-panel__benefits li{
    font-size:0.75rem;
    padding-left:0.85rem;
  }
  .services.is-pin-active .service-panel__cta{
    padding-top:0.2rem;
    font-size:0.65rem;
  }
  .services.is-pin-active .service-complementary__media{
    flex:0 0 clamp(110px, 20vh, 140px);
  }
  .services.is-pin-active .service-complementary__body{
    padding:0.6rem 0.85rem;
    gap:0.2rem;
  }
  .services.is-pin-active .service-complementary__badge{
    font-size:0.65rem;
    padding:0.25rem 0.65rem;
  }
  .services.is-pin-active .service-complementary__title{
    font-size:1.08rem;
  }
  .services.is-pin-active .service-complementary__hook{
    font-size:0.78rem;
    line-height:1.3;
  }
  .services.is-pin-active .service-complementary__benefits li{
    font-size:0.75rem;
  }
  .services.is-pin-active .service-complementary__cta{
    padding-top:0.2rem;
    font-size:0.65rem;
  }
}

/* Transición editorial en flujo normal: micropausa de respiración antes de The Marshall Method */
.services__bridge{
  padding-block:clamp(3.5rem,6vw,5.5rem) clamp(2.5rem,4vw,4.5rem);
  display:flex;
  justify-content:center;
  text-align:center;
  position:relative;
}
.services__bridge-text{
  font-size:clamp(1.15rem,2.2vw,1.55rem);
  font-weight:400;
  line-height:1.45;
  color:rgba(255,255,255,.88);
  max-width:44ch;
  letter-spacing:-0.01em;
  position:relative;
}
.services__bridge-text::before{
  content:"";
  display:block;
  width:2.5rem;
  height:1px;
  background:rgba(143,217,201,.4);
  margin:0 auto clamp(1.25rem,2.5vw,2rem);
}

/* ---------- 11. The Marshall Method — "El umbral" ----------
   Escena única y continua ligada al scroll (umbralSequence() en
   main.js), NO cinco slides: veladuras, núcleo de luz, numeral y
   encuadre son las mismas capas del principio al final, solo cambian
   sus variables CSS numéricas (--u-*) fase a fase. JS nunca decide
   color ni forma — solo interpola una tabla de keyframes (una entrada
   por fase) y escribe esas variables en .umbral__stage en cada frame
   de scroll (rAF, sin interceptar rueda/touch, mismo patrón "función
   pura de scroll" que servicesPinScroll()/methodSequence() antes de
   esta fase). El físico de cada efecto (blur máximo, recorrido de las
   veladuras, grosor del encuadre) vive en CSS y varía por breakpoint
   (--u-blur-max/--u-veil-travel/--u-frame-max/--u-core-size más abajo),
   así JS puede seguir siendo agnóstico del ancho de pantalla: solo
   cambia cuánto dura el recorrido de scroll (STEP_VH_FRACTION por
   breakpoint, en main.js), no la intensidad visual de cada capa.
   Pin activo (.is-pin-active, añadida por JS) en cualquier ancho —
   incluido móvil, con recorrido y blur reducidos vía CSS — mientras
   no haya motion reducido y la ventana tenga alto suficiente. Sin
   JS / con motion reducido, la sección nunca gana .is-pin-active: las
   capas decorativas (veladuras, núcleo, numeral, encuadre) quedan en
   display:none y las cinco fases se leen como una lista vertical
   normal, cada una con [data-reveal] (misma utilidad del resto del
   sitio) — versión estática accesible exigida por la dirección. */
.umbral{
  position:relative;
  padding-block:var(--sp-32) 0;
  background:var(--pw-primary-900);
  color:var(--pw-white);
  --u-blur-max:32px;
  --u-veil-travel:34vw;
  --u-frame-max:13vw;
  --u-core-size:min(50vw,600px);
}
@media (max-width:959px){
  .umbral{--u-blur-max:20px;--u-veil-travel:24vw;--u-frame-max:9vw;--u-core-size:min(62vw,440px);}
}
@media (max-width:639px){
  .umbral{--u-blur-max:16px;--u-veil-travel:18vw;--u-frame-max:5vw;--u-core-size:min(85vw,350px);}
}

.umbral__head{max-width:36rem;margin-bottom:var(--sp-16);}
.umbral__lead{margin-top:var(--sp-5);color:rgba(255,255,255,.75);max-width:52ch;}

.umbral__pin-wrap{position:relative;}

.umbral__stage{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.umbral.is-pin-active .umbral__stage{
  position:sticky;
  top:var(--umbral-pin-top,0px);
  overflow:hidden;
  isolation:isolate;
  background:var(--pw-primary-900);
}

/* Capas decorativas de la escena: solo existen (display:block) en modo
   fijado. En la lista estática de respaldo no aportan nada — el fondo
   plano de .umbral ya resuelve el color, y el texto ya es legible sin
   ellas. */
.umbral__stage-glow,.umbral__texture,.umbral__core,.umbral__core-warm,
.umbral__num,.umbral__veil,.umbral__frame{display:none;}
.umbral.is-pin-active .umbral__stage-glow,
.umbral.is-pin-active .umbral__texture,
.umbral.is-pin-active .umbral__core,
.umbral.is-pin-active .umbral__core-warm,
.umbral.is-pin-active .umbral__num,
.umbral.is-pin-active .umbral__veil,
.umbral.is-pin-active .umbral__frame{display:block;}

/* "Abrir hacia la luz": no recoloreamos toda la sección (rompería el
   contraste de .btn--outline en el CTA final), sino que el propio
   escenario respira hacia un halo neutro/mist alrededor del núcleo de
   luz — mismo efecto sensorial que pide la dirección ("pasando a un
   fondo neutro/mist") sin cambiar el verde de fondo real de la página. */
.umbral__stage-glow{
  position:absolute;z-index:0;inset:0;
  background:radial-gradient(ellipse 92% 76% at calc(var(--u-core-x,.5) * 100%) calc(var(--u-core-y,.46) * 100%),
    rgba(243,246,245,.82) 0%, rgba(243,246,245,.38) 36%, rgba(243,246,245,0) 72%);
  opacity:calc(1 - var(--u-bg-dark,1));
  mix-blend-mode:soft-light;
  pointer-events:none;
}

/* Grano sutil constante (misma textura feTurbulence que .page-tarifas
   .area-tile, sin petición de red): no varía con el scroll, es la única
   capa que permanece literalmente idéntica de principio a fin. */
.umbral__texture{
  position:absolute;z-index:0;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.05;
  pointer-events:none;
}

/* Núcleo de luz: dos gradientes concéntricos (frío/cálido) con punto focal puro
   y alta densidad lumínica en el centro, fundidos por opacidad sin escalonar color.
   Posición, escala, glow y temperatura derivan matemáticamente del progreso (§8 Fase 2). */
.umbral__core,.umbral__core-warm{
  position:absolute;z-index:1;
  width:var(--u-core-size);aspect-ratio:1;border-radius:50%;
  left:calc(var(--u-core-x,.5) * 100%);
  top:calc(var(--u-core-y,.46) * 100%);
  transform:translate(-50%,-50%) scale(var(--u-core-scale,.55));
  pointer-events:none;
  will-change:transform, filter, opacity;
}
.umbral__core{
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.98) 0%,
    rgba(214,245,238,.92) 18%,
    rgba(143,217,201,.55) 40%,
    rgba(52,108,98,.3) 60%,
    rgba(18,60,55,0) 76%);
  filter:blur(calc(8px + var(--u-core-glow,.3) * 26px));
  mix-blend-mode:screen;
  opacity:calc(1 - var(--u-core-warm,0) * .25);
}
.umbral__core-warm{
  background:radial-gradient(circle at 50% 50%,
    rgba(255,252,242,.98) 0%,
    rgba(255,238,209,.90) 20%,
    rgba(242,204,148,.52) 42%,
    rgba(212,143,56,.28) 62%,
    rgba(18,60,55,0) 76%);
  filter:blur(calc(8px + var(--u-core-glow,.3) * 26px));
  mix-blend-mode:screen;
  opacity:var(--u-core-warm,0);
}

/* Numeral editorial: ancla espacial propia ubicada sobre el bloque de texto
   con microdesplazamiento tridimensional (--u-num-x, --u-num-y) que respira
   con el avance del espacio sin deformar la tipografía (§11 Fase 2). */
.umbral__num{
  position:absolute;z-index:2;
  left:clamp(1.5rem, 4vw, 3.5rem);
  bottom:clamp(9.5rem, 23vh, 15rem);
  transform:translate3d(var(--u-num-x, 0px), var(--u-num-y, 0px), 0) scale(var(--u-num-scale,.65));
  transform-origin:left bottom;
  mix-blend-mode:screen;
  opacity:var(--u-num-opacity,.25);
  pointer-events:none;user-select:none;
  will-change:transform, opacity;
}
.umbral__num-digit{
  position:absolute;left:0;bottom:0;
  font-size:clamp(5.5rem, 20vw, 15rem);
  font-weight:600;line-height:1;letter-spacing:-.02em;
  color:#8fd9c9;white-space:nowrap;
  opacity:0;
  will-change:opacity;
}
@media (max-width:639px){
  .umbral__num{
    left:var(--sp-5);
    bottom:clamp(11rem, 28vh, 15rem);
    transform-origin:left bottom;
  }
  .umbral__num-digit{
    font-size:clamp(4.5rem, 22vw, 7.5rem);
  }
}

/* Veladuras: dos paños translúcidos en diagonal que se separan lateralmente
   con microparallax suave en 2 ejes, simulando tejidos que dejan pasar el haz (§9 Fase 2). */
.umbral__veil{
  position:absolute;z-index:3;inset:-16%;
  mix-blend-mode:screen;
  pointer-events:none;
  will-change:transform,filter,opacity;
}
.umbral__veil--a{
  background:linear-gradient(128deg, rgba(255,255,255,.48) 0%, rgba(150,224,210,.24) 46%, rgba(150,224,210,0) 76%);
  filter:blur(calc(6px + var(--u-veil-blur,1) * var(--u-blur-max)));
  opacity:var(--u-veil-a-opacity,.9);
  transform:translate3d(calc(var(--u-veil-a-gap,0) * var(--u-veil-travel) * -1), calc(var(--u-veil-a-gap,0) * 10px), 0) rotate(-6deg) scale(1.26);
}
.umbral__veil--b{
  background:linear-gradient(-128deg, rgba(255,255,255,.44) 0%, rgba(150,224,210,.2) 46%, rgba(150,224,210,0) 76%);
  filter:blur(calc(6px + var(--u-veil-blur,1) * var(--u-blur-max)));
  opacity:var(--u-veil-b-opacity,.85);
  transform:translate3d(calc(var(--u-veil-b-gap,0) * var(--u-veil-travel)), calc(var(--u-veil-b-gap,0) * -8px), 0) rotate(6deg) scale(1.26);
}

/* Encuadre: viñeta perimetral anamórfica envolvente (no marco de bordes duros)
   cuya apertura y densidad respiran con el avance del recorrido (--u-frame-inset).
   En 01 la penumbra abraza los límites de la pantalla; en 03 se retira para el clímax;
   en 05 se disuelve completamente hacia el horizonte abierto (§10 Fase 2). */
.umbral__frame{
  position:absolute;z-index:4;inset:0;
  pointer-events:none;
  will-change:opacity;
}
.umbral__frame--dark{
  background:radial-gradient(ellipse 92% 76% at calc(var(--u-core-x,.5) * 100%) calc(var(--u-core-y,.46) * 100%),
    transparent calc(28% + (1 - var(--u-frame-inset,1)) * 48%),
    rgba(18,60,55,.62) calc(52% + (1 - var(--u-frame-inset,1)) * 36%),
    var(--pw-primary-900) 100%);
  opacity:var(--u-bg-dark,1);
}
.umbral__frame--light{
  background:radial-gradient(ellipse 95% 80% at calc(var(--u-core-x,.5) * 100%) calc(var(--u-core-y,.46) * 100%),
    transparent calc(32% + (1 - var(--u-frame-inset,1)) * 46%),
    rgba(243,246,245,.42) calc(58% + (1 - var(--u-frame-inset,1)) * 32%),
    var(--pw-mist) 100%);
  opacity:calc(1 - var(--u-bg-dark,1));
}

/* Texto de cada fase: apilado por grid donde la opacidad y el desplazamiento
   se interpolan directamente en scroll desde main.js (render), eliminando
   saltos de transición temporales fijos (§4 auditoría). En móvil se añade
   un resguardo inferior de seguridad para evitar solapamiento con la barra
   fija de reserva (.book-bar, §6 auditoría). */
.umbral.is-pin-active .umbral__content{
  position:absolute;z-index:5;inset:0;
  display:flex;align-items:flex-end;
  padding:var(--sp-8) var(--sp-6) var(--sp-10);
}
.umbral.is-pin-active .umbral__content::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(11,34,31,.82) 0%, rgba(11,34,31,.2) 48%, transparent 74%);
  pointer-events:none;
}
.umbral.is-pin-active .umbral__phases{
  display:grid;width:100%;max-width:32rem;
}
.umbral__phase{
  position:relative;
  padding-block:var(--sp-6);
  border-top:1px solid var(--pw-line-on-dark);
}
.umbral__phase:first-child{border-top:none;padding-top:0;}
.umbral__phase:last-child{padding-bottom:0;}
.umbral.is-pin-active .umbral__phase{
  grid-area:1/1;
  border-top:none;padding-block:0;
  opacity:0;
  transform:translate3d(0, 16px, 0);
  pointer-events:none;
  transition:none!important;
  transition-delay:0ms!important;
  will-change:opacity, transform;
}
.umbral.is-pin-active .umbral__phase.is-active{
  pointer-events:auto;
}
.umbral__phase-eyebrow{display:block;font-size:.75rem;letter-spacing:.14em;color:#8fd9c9;}
.umbral__phase-title{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:500;margin-top:.3rem;color:var(--pw-white);}
.umbral__phase-text{font-size:.95rem;color:rgba(255,255,255,.75);margin-top:.4rem;max-width:42ch;}

@media (max-width:639px){
  .umbral.is-pin-active .umbral__content{
    padding:var(--sp-6) var(--sp-5) calc(var(--sp-10) + 18px);
  }
  .umbral__phase-title{font-size:clamp(1.4rem, 5.5vw, 1.8rem);}
  .umbral__phase-text{font-size:.88rem;max-width:32ch;}
}

/* Indicador "01 — 02 — 03 — 04 — 05": puramente decorativo (aria-hidden),
   solo visible en modo fijado — el contenido real y accesible ya está
   en .umbral__phases, en el orden natural del documento. */
.umbral__progress{display:none;list-style:none;margin:0;padding:0;}
.umbral.is-pin-active .umbral__progress{
  display:flex;align-items:center;gap:var(--sp-2);
  position:absolute;z-index:6;top:var(--sp-6);left:var(--sp-6);right:var(--sp-6);
}
.umbral__progress-item{
  font-size:.75rem;letter-spacing:.1em;
  color:rgba(255,255,255,.4);
  transition:color var(--dur-med) var(--ease-out);
}
.umbral__progress-item.is-active{color:var(--pw-white);font-weight:600;}
.umbral__progress-item.is-done{color:#8fd9c9;}
.umbral__progress-seg{
  flex:1 1 auto;height:1px;min-width:var(--sp-6);
  background:rgba(255,255,255,.18);
  transition:background var(--dur-med) var(--ease-out);
}
.umbral__progress-seg.is-done{background:#8fd9c9;}

.umbral__cta{
  margin-top:var(--sp-16);
  position:relative;z-index:1;
  backdrop-filter:blur(4px);
}

/* Salida hacia Primera visita: transición lumínica continua enriquecida
   que conecta la disolución cálida de 05 con el tono sereno de --pw-mist,
   eliminando cualquier corte brusco antes de la siguiente sección (§18 Fase 2). */
.umbral__exit{
  height:clamp(6rem,11vw,9.5rem);
  margin-top:clamp(3.5rem,5.5vw,5rem);
  background:linear-gradient(180deg,
    var(--pw-primary-900) 0%,
    rgba(18,60,55,.94) 22%,
    rgba(52,108,98,.48) 54%,
    rgba(186,235,225,.24) 76%,
    var(--pw-mist) 100%);
}

/* ---------- 12. Primera visita ----------
   Siguiente capítulo natural tras The Marshall Method: de la abstracción
   conceptual ("así trabajamos") a la experiencia física y humana ("así
   empieza tu primera visita"). Fondo continuo en --pw-mist sin corte superior,
   fotografía real de bienvenida de la clínica, insignia de 60 minutos y
   relato progresivo de 5 momentos que disipa la incertidumbre del paciente. */
.first-visit{
  padding-block:clamp(6.5rem,9.5vw,9.5rem) clamp(7.5rem,10.5vw,10.5rem);
  background:var(--pw-mist);
  border-bottom:1px solid var(--pw-line);
}
.first-visit__grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem);}
@media (min-width:860px){
  .first-visit__grid{grid-template-columns:1.05fr .95fr;gap:clamp(3.5rem,5.5vw,5.5rem);align-items:start;}
}
.first-visit .section-heading{font-size:clamp(1.85rem,2.7vw,2.45rem);line-height:1.2;}

/* Insignia editorial de 60 min: anotación tipográfica limpia, sin aspecto de píldora SaaS (§2 QA) */
.first-visit__badge-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  margin-bottom:clamp(.85rem,1.4vw,1.25rem);
}
.first-visit__badge-row .section-eyebrow{margin-bottom:0;}
.first-visit__duration{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.73rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pw-primary-900);
  background:transparent;
  border:none;
  border-left:1px solid var(--pw-line);
  padding:0 0 0 var(--sp-3);
}
.first-visit__duration-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--pw-accent);
}

.first-visit__lead{margin-top:clamp(1.4rem,2.2vw,1.9rem);max-width:44ch;}

/* Fotografía editorial de bienvenida: encuadre integrado, sombra mínima (§3 QA) */
.first-visit__media{
  position:relative;
  margin-top:clamp(2.75rem,4vw,3.75rem);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:rgba(18,60,55,.04);
  box-shadow:0 4px 18px -4px rgba(18,60,55,.06);
}
.first-visit__img{
  width:100%;height:auto;
  aspect-ratio:16/11;
  object-fit:cover;
  display:block;
  transform:scale(1.015);
  transition:transform 500ms var(--ease-out);
}
.first-visit__media.is-revealed .first-visit__img,
.first-visit__media.is-visible .first-visit__img,
.first-visit__media[data-reveal].is-visible .first-visit__img{
  transform:scale(1);
}
.first-visit__media-caption{
  display:flex;align-items:center;gap:.45rem;
  padding:.55rem .9rem;
  font-size:.75rem;letter-spacing:.02em;
  color:var(--pw-ink-muted);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(0,0,0,.04);
}
.first-visit__media-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--pw-accent);
}

.first-visit__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:clamp(2.75rem,4vw,3.75rem);}
.first-visit__mobile-actions{display:none;}

@media (max-width:859px){
  .first-visit{padding-bottom:clamp(5.5rem,8.5vw,8rem);}
  .first-visit__actions{display:none;}
  .first-visit__mobile-actions{
    display:flex;flex-direction:column;gap:var(--sp-3);
    margin-top:clamp(2.75rem,5.5vw,4rem);margin-bottom:0;
  }
}
.first-visit .btn--outline{border-color:var(--pw-line);color:var(--pw-primary-900);}
.first-visit .btn--outline:hover{border-color:var(--pw-accent);background:rgba(38,152,136,.08);}

/* Timeline editorial: marcadores sutiles y línea fina, protagonismo tipográfico (§1 QA) */
.first-visit__steps{
  --fv-step-pad:clamp(1.75rem,2.5vw,2.35rem);
  counter-reset:none;display:grid;
}
.first-visit .first-visit__step{
  counter-increment:none;
  display:block;
  position:relative;
  align-items:unset;gap:0;
  padding-block:var(--fv-step-pad);
  padding-left:2.75rem;
  border-top:none;
  font-size:1rem;
}
.first-visit .first-visit__step::before{content:none;}

@media (min-width:860px){
  .first-visit__intro{position:sticky;top:var(--fv-sticky-top,6rem);align-self:start;}
}

.first-visit__marker{
  position:absolute;
  left:0;top:0;bottom:0;
  width:1.5rem;
  display:flex;justify-content:center;
}
.first-visit__marker::before{
  content:'';
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:var(--pw-line);
  transform:translateX(-50%);
  transition:background var(--dur-med) var(--ease-out);
}
.first-visit .first-visit__step:first-child .first-visit__marker::before{top:calc(var(--fv-step-pad) + .6rem);}
.first-visit .first-visit__step:last-child .first-visit__marker::before{bottom:calc(var(--fv-step-pad) + .6rem);}

.first-visit__dot{
  position:absolute;
  left:50%;top:calc(var(--fv-step-pad) + .6rem);
  transform:translate(-50%,-50%);
  width:.45rem;height:.45rem;border-radius:50%;
  background:var(--pw-white);
  border:1.5px solid var(--pw-line);
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.first-visit__step-body{display:flex;align-items:flex-start;gap:var(--sp-3);}
.first-visit__step-num{
  flex:0 0 auto;
  font-size:.78rem;font-weight:500;letter-spacing:.08em;
  color:var(--pw-accent);
  font-variant-numeric:tabular-nums;
  padding-top:.15rem;
}
.first-visit__step-content{flex:1 1 auto;min-width:0;}
.first-visit__step-title{
  font-size:1.05rem;font-weight:550;line-height:1.35;
  color:var(--pw-ink);margin:0 0 .25rem 0;
  transition:color var(--dur-med) var(--ease-out);
}
.first-visit__step-desc{
  font-size:.92rem;line-height:1.5;
  color:var(--pw-ink-muted);margin:0;
}

/* Estados narrativos discretos con IntersectionObserver */
.first-visit.is-timeline-active .first-visit__step{
  opacity:.42;
  transform:translateY(4px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.first-visit.is-timeline-active .first-visit__step.is-active,
.first-visit.is-timeline-active .first-visit__step.is-done{
  opacity:1;
  transform:translateY(0);
}
.first-visit.is-timeline-active .first-visit__step.is-done{opacity:.78;}

.first-visit.is-timeline-active .first-visit__step.is-active .first-visit__marker::before,
.first-visit.is-timeline-active .first-visit__step.is-done .first-visit__marker::before{
  background:var(--pw-primary);
}
.first-visit.is-timeline-active .first-visit__step.is-active .first-visit__dot{
  background:var(--pw-primary);border-color:var(--pw-primary);
  transform:translate(-50%,-50%) scale(1.2);
}
.first-visit.is-timeline-active .first-visit__step.is-done .first-visit__dot{
  background:var(--pw-primary);border-color:var(--pw-primary);
}
.first-visit.is-timeline-active .first-visit__step.is-active .first-visit__step-title{
  color:var(--pw-primary);
}

@media (prefers-reduced-motion:reduce){
  .first-visit.is-timeline-active .first-visit__step{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .first-visit__img{
    transform:none!important;
    transition:none!important;
  }
}

/* ---------- 13. Equipo profesional ----------
   Retrato y texto en horizontal a partir de tablet: reequilibra la
   proporción retrato/texto y evita que la sección ocupe una franja
   vertical excesiva, sobre todo en móvil (ratio 3/4 en vez de 4/5). */
.team{padding-block:clamp(7.5rem,11vw,10.5rem) var(--sp-24);background:var(--pw-white);}
.team__head{max-width:40rem;margin-bottom:var(--sp-12);}
.team__grid{display:grid;gap:var(--sp-10);grid-template-columns:1fr;}
@media (min-width:640px){ .team__grid{grid-template-columns:repeat(2,1fr);} }
.team-card{display:flex;flex-direction:column;gap:var(--sp-4);}
.team-card__media{aspect-ratio:3/4;overflow:hidden;background:var(--pw-mist);}
.team-card__media img{width:100%;height:100%;object-fit:cover;}
@media (min-width:640px){
  .team-card{flex-direction:row;align-items:flex-start;gap:var(--sp-6);}
  .team-card__media{flex:0 0 38%;}
  .team-card__body{flex:1 1 auto;padding-top:.2rem;}
}
.team-card__name{font-size:1.15rem;font-weight:500;line-height:1.55;letter-spacing:normal;margin-top:.2rem;}
.team-card__role{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pw-accent);
  margin-top:.15rem;
}
.team-card__bio{font-size:.92rem;color:var(--pw-ink-70);margin-top:.35rem;}
.team-card__facts{display:grid;gap:.45rem;margin-top:.5rem;}
.team-card__facts li{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:.88rem;color:var(--pw-ink-70);
}
.team-card__facts li::before{
  content:"";flex:0 0 auto;
  width:.3rem;height:.3rem;border-radius:50%;
  background:var(--pw-accent);transform:translateY(-.15rem);
}
.team__note{
  margin-top:var(--sp-12);font-size:.92rem;color:var(--pw-ink-70);
  border-top:1px solid var(--pw-line);padding-top:var(--sp-6);max-width:44rem;
}

/* ---------- 14. Instalaciones / espacio ---------- */
.facility{padding-block:var(--sp-32);background:var(--pw-mist);border-block:1px solid var(--pw-line);}
.facility__head{max-width:42rem;margin-bottom:var(--sp-16);}
.facility__lead{margin-top:var(--sp-5);max-width:56ch;}
.facility__space + .facility__space{
  margin-top:var(--sp-12);
}

.facility__space-header{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-4);
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--pw-line);
}

.facility__space-tag{
  font-family:var(--font-sans);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--pw-accent, #6a7f70);
  background:rgba(106,127,112,0.1);
  padding:0.18rem 0.5rem;
  border-radius:4px;
}

.facility__space-title{
  font-family:var(--font-heading, var(--font-sans));
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--pw-ink);
  margin:0;
}

.facility__space-desc{
  font-size:0.85rem;
  color:var(--pw-ink-60);
  margin-left:auto;
}

.facility__grid{
  display:grid;
  gap:var(--sp-3);
}

.facility__item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm, 6px);
  background:var(--pw-sand);
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  display:block;
  text-align:left;
  width:100%;
}

.facility__item picture{
  display:block;
  width:100%;
  height:100%;
}

.facility__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform var(--dur-med) var(--ease-out);
}

.facility__item--lounge img{
  object-position:center 30%;
}

.facility__item:hover img{
  transform:scale(1.04);
}

/* Sombreado inferior para contraste editorial */
.facility__item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(16,24,22,0.48) 0%, rgba(16,24,22,0.12) 32%, transparent 58%);
  pointer-events:none;
  opacity:0.85;
  transition:opacity var(--dur-fast);
}

.facility__item:hover::after{
  opacity:0.96;
}

/* Badge editorial flotante */
.facility__badge{
  position:absolute;
  bottom:var(--sp-3);
  left:var(--sp-3);
  z-index:2;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.015em;
  color:#f8f3ec;
  background:rgba(15,28,24,0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:0.32rem 0.68rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:0.28rem;
  white-space:nowrap;
  max-width:calc(100% - var(--sp-3) * 2);
  box-sizing:border-box;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

.facility__badge-space{
  font-weight:600;
  opacity:1;
  flex-shrink:0;
}

.facility__badge-sep{
  opacity:0.65;
  font-size:0.72rem;
  flex-shrink:0;
}

.facility__badge-room{
  opacity:0.96;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.facility__item:hover .facility__badge{
  background:rgba(15,28,24,0.9);
  border-color:rgba(255,255,255,0.3);
  transform:translateY(-1px);
}

.facility__item--hero .facility__badge,
.facility__item--reformer .facility__badge{
  font-size:0.82rem;
  padding:0.36rem 0.8rem;
}

/* ================= RESPONSIVE ================= */

/* Móvil (<720px) */
@media (max-width:719px){
  .facility__space + .facility__space{
    margin-top:var(--sp-10);
  }
  .facility__space-desc{
    display:none;
  }
  .facility__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--sp-2-5, 10px);
  }
  
  /* Fisio en móvil */
  .facility__grid--fisio .facility__item--hero{
    grid-column:1 / -1;
    aspect-ratio:16/10;
  }
  .facility__grid--fisio .facility__item--recepcion,
  .facility__grid--fisio .facility__item--natural{
    aspect-ratio:4/3;
  }
  .facility__grid--fisio .facility__item--active{
    grid-column:1 / -1;
    aspect-ratio:16/9;
  }

  /* Strength & Pilates en móvil */
  .facility__grid--strength .facility__item--reformer{
    grid-column:1 / -1;
    aspect-ratio:16/10;
    order:-1;
  }
  .facility__grid--strength .facility__item--lounge{
    grid-column:1 / 2;
    grid-row:span 2;
    aspect-ratio:2/3;
  }
  .facility__grid--strength .facility__item--gym,
  .facility__grid--strength .facility__item--cardio{
    grid-column:2 / 3;
    aspect-ratio:4/3;
  }
  
  .facility__badge{
    font-size:0.74rem;
    padding:0.28rem 0.6rem;
    left:var(--sp-2-5, 10px);
    bottom:var(--sp-2-5, 10px);
    max-width:calc(100% - var(--sp-2-5, 10px) * 2);
  }
  .facility__badge-space{
    display:none;
  }
  .facility__badge-sep{
    display:none;
  }
}

/* Tablet (720px - 859px) */
@media (min-width:720px) and (max-width:859px){
  .facility__space + .facility__space{
    margin-top:var(--sp-12);
  }
  .facility__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--sp-3);
  }
  
  /* Fisio en tablet */
  .facility__grid--fisio .facility__item--hero{
    grid-column:1 / -1;
    aspect-ratio:16/9;
  }
  .facility__grid--fisio .facility__item--recepcion,
  .facility__grid--fisio .facility__item--natural{
    aspect-ratio:4/3;
  }
  .facility__grid--fisio .facility__item--active{
    grid-column:1 / -1;
    aspect-ratio:16/8;
  }

  /* Strength & Pilates en tablet */
  .facility__grid--strength .facility__item--reformer{
    grid-column:1 / -1;
    aspect-ratio:16/9;
    order:-1;
  }
  .facility__grid--strength .facility__item--lounge{
    grid-column:1 / 2;
    grid-row:span 2;
    aspect-ratio:auto;
  }
  .facility__grid--strength .facility__item--gym,
  .facility__grid--strength .facility__item--cardio{
    grid-column:2 / 3;
    aspect-ratio:4/3;
  }
}

/* Desktop (>=860px): Bento editorial asimétrico con ritmo diagonal */
@media (min-width:860px){
  .facility__grid{
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(2, 215px);
    gap:var(--sp-3);
  }
  
  .facility__item{
    aspect-ratio:auto;
    height:100%;
  }

  /* Grid Fisioterapia */
  .facility__grid--fisio .facility__item--hero{
    grid-column:1 / 3;
    grid-row:1 / 3;
  }
  .facility__grid--fisio .facility__item--recepcion{
    grid-column:3 / 4;
    grid-row:1 / 2;
  }
  .facility__grid--fisio .facility__item--natural{
    grid-column:4 / 5;
    grid-row:1 / 2;
  }
  .facility__grid--fisio .facility__item--active{
    grid-column:3 / 5;
    grid-row:2 / 3;
  }

  /* Grid Strength & Pilates */
  .facility__grid--strength .facility__item--lounge{
    grid-column:1 / 2;
    grid-row:1 / 3;
  }
  .facility__grid--strength .facility__item--gym{
    grid-column:2 / 3;
    grid-row:1 / 2;
  }
  .facility__grid--strength .facility__item--cardio{
    grid-column:2 / 3;
    grid-row:2 / 3;
  }
  .facility__grid--strength .facility__item--reformer{
    grid-column:3 / 5;
    grid-row:1 / 3;
  }
}

/* Ajuste de badges en resoluciones intermedias (860px - 1080px) */
@media (min-width:860px) and (max-width:1080px){
  .facility__badge{
    font-size:0.70rem;
    padding:0.26rem 0.54rem;
    gap:0.22rem;
    left:var(--sp-2, 0.5rem);
    bottom:var(--sp-2, 0.5rem);
    max-width:calc(100% - var(--sp-2, 0.5rem) * 2);
  }
  .facility__item--hero .facility__badge,
  .facility__item--reformer .facility__badge{
    font-size:0.78rem;
    padding:0.32rem 0.7rem;
    left:var(--sp-3);
    bottom:var(--sp-3);
    max-width:calc(100% - var(--sp-3) * 2);
  }
}

/* Pantallas grandes (>=1200px) */
@media (min-width:1200px){
  .facility__grid{
    grid-template-rows:repeat(2, 255px);
    gap:var(--sp-4);
  }
}

/* ---------- Modal Lightbox ---------- */
.facility-lightbox{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
}

.facility-lightbox[open]{
  display:flex;
}

.facility-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,18,16,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:zoom-out;
}

.facility-lightbox__stage{
  position:relative;
  z-index:2;
  width:92vw;
  max-width:1180px;
  height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.facility-lightbox__figure{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:100%;
  max-height:100%;
}

.facility-lightbox__img{
  max-width:88vw;
  max-height:82vh;
  object-fit:contain;
  border-radius:var(--radius-sm, 6px);
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  background:var(--pw-ink);
}

.facility-lightbox__caption{
  margin-top:var(--sp-3);
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--pw-chalk);
  background:rgba(255,255,255,0.08);
  padding:0.35rem 0.9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  text-align:center;
}

.facility-lightbox__close{
  position:absolute;
  top:var(--sp-2);
  right:var(--sp-2);
  background:rgba(255,255,255,0.12);
  color:var(--pw-chalk);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--dur-fast), transform var(--dur-fast);
  z-index:10;
}

.facility-lightbox__close:hover{
  background:rgba(255,255,255,0.24);
  transform:scale(1.06);
}

.facility-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.1);
  color:var(--pw-chalk);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:50%;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--dur-fast), transform var(--dur-fast);
  z-index:10;
}

.facility-lightbox__nav:hover{
  background:rgba(255,255,255,0.22);
  transform:translateY(-50%) scale(1.06);
}

.facility-lightbox__nav--prev{left:var(--sp-2);}
.facility-lightbox__nav--next{right:var(--sp-2);}

@media (max-width:768px){
  .facility-lightbox__nav{
    display:none;
  }
  .facility-lightbox__img{
    max-width:94vw;
    max-height:76vh;
  }
}

/* ---------- 15. Reseñas reales ---------- */
/* ---------- 15. Reseñas editoriales / Experiencias (Home) ----------
   Composición editorial basada en scroll vertical: una pista sticky donde
   las fotografías contextuales de la experiencia Physio Wellness ascienden
   y se superponen en sincronía con el progreso de lectura de las historias,
   eliminando cualquier concepto de slider/carrusel.
   Atribución discreta (sin nombres protagonistas) y fallback completo en flujo
   normal para prefers-reduced-motion. */
.testimonials{
  background:var(--pw-white);
  position:relative;
}

/* Pista de scroll vertical escalable según N testimonios */
.testimonials__track{
  position:relative;
  height:var(--testimonials-track-height, 280vh); /* Calculado dinámicamente según N */
}

/* Contenedor sticky que se mantiene anclado en pantalla mientras dura el recorrido */
.testimonials__sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.testimonials__container{
  width:100%;
}

.testimonials__layout{
  display:grid;
  grid-template-columns:minmax(0, 46%) minmax(0, 54%);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}

/* Columna 1: Escenario de fotos contextuales superpuestas */
.testimonials__media{
  position:relative;
  width:100%;
}

.testimonials__stage{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:var(--radius, 2px);
  overflow:hidden;
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
}

/* Cada capa fotográfica ocupa el 100% del marco y asciende desde abajo */
.testimonials__photo-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  will-change:transform;
}

.testimonials__photo-layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--focal-point, center);
  display:block;
}

/* Columna 2: Contenido editorial */
.testimonials__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.testimonials__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--pw-line);
  margin-bottom:var(--sp-6);
}

.testimonials__eyebrow{
  font-size:var(--fs-label, .75rem);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pw-primary);
  margin:0;
}

.testimonials__stars{
  color:var(--pw-primary);
  font-size:1.05rem;
  letter-spacing:.16em;
  line-height:1;
  user-select:none;
}

/* Escenario de textos: historias superpuestas gobernadas por scroll */
.testimonials__text-stage{
  position:relative;
  min-height:280px;
}

.testimonials__story{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translate3d(0, 16px, 0);
  pointer-events:none;
  visibility:hidden;
  will-change:opacity, transform;
}

.testimonials__quote-wrap{
  margin:0 0 var(--sp-6);
}

.testimonials__quote{
  font-size:clamp(1.15rem, 1.75vw, 1.5rem);
  line-height:1.58;
  color:var(--pw-ink);
  font-weight:400;
  margin:0;
  letter-spacing:-.01em;
}

.testimonials__quote::before{
  content:"“";
  color:var(--pw-primary);
  font-size:1.25em;
  line-height:0;
  vertical-align:-.2em;
  margin-right:.04em;
}

.testimonials__quote::after{
  content:"”";
  color:var(--pw-primary);
  font-size:1.25em;
  line-height:0;
  vertical-align:-.2em;
  margin-left:.04em;
}

/* Recorte armónico para testimonios extensos en tarjeta */
.testimonials__quote[data-clamped]{
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.testimonials__quote-toggle{
  background:none;
  border:none;
  padding:var(--sp-2) 0 0;
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--pw-primary);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  display:inline-block;
  transition:color .2s ease;
}

.testimonials__quote-toggle:hover{
  color:var(--pw-ink);
}

/* Modal editorial para lectura completa de testimonios (cero solapamientos) */
.testimonial-modal{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
}

.testimonial-modal[open]{
  display:flex;
}

.testimonial-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,18,16,0.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
}

.testimonial-modal__stage{
  position:relative;
  z-index:2;
  width:min(660px, 92vw);
  max-height:min(86vh, 720px);
  background:var(--pw-white);
  border-radius:var(--radius-lg, 8px);
  border:1px solid var(--pw-line);
  box-shadow:0 24px 48px -12px rgba(12,18,16,0.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:modalFadeIn .25s cubic-bezier(0.16,1,0.3,1);
}

@keyframes modalFadeIn{
  from{opacity:0;transform:scale(0.96) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

.testimonial-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-6) var(--sp-8);
  border-bottom:1px solid var(--pw-line);
  gap:var(--sp-4);
  flex-shrink:0;
}

.testimonial-modal__author-group{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}

.testimonial-modal__avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
  border:2px solid var(--pw-primary);
  flex-shrink:0;
}

.testimonial-modal__name{
  font-size:1.15rem;
  font-weight:600;
  color:var(--pw-ink);
  margin:0;
}

.testimonial-modal__role{
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pw-primary);
  margin:2px 0 0;
}

.testimonial-modal__close{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--pw-line);
  background:transparent;
  color:var(--pw-ink);
  font-size:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  line-height:1;
  padding:0;
}

.testimonial-modal__close:hover{
  background:var(--pw-mist);
  color:var(--pw-primary);
}

.testimonial-modal__body{
  padding:var(--sp-8);
  overflow-y:auto;
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  line-height:1.68;
  color:var(--pw-ink);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

.testimonial-modal__body p{
  margin:0;
}

.testimonial-modal__footer{
  padding:var(--sp-4) var(--sp-8);
  border-top:1px solid var(--pw-line);
  display:flex;
  justify-content:flex-end;
  background:var(--pw-mist);
  flex-shrink:0;
}

.testimonial-modal__btn{
  padding:8px 24px!important;
  font-size:.85rem!important;
  cursor:pointer;
}

@media (max-width:860px){
  .testimonial-modal__header{
    padding:var(--sp-4) var(--sp-5);
  }
  .testimonial-modal__body{
    padding:var(--sp-5);
    font-size:.95rem;
    line-height:1.6;
  }
  .testimonial-modal__footer{
    padding:var(--sp-3) var(--sp-5);
  }
}


.testimonials__meta{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pw-ink-50);
  margin-top:auto;
  padding-top:var(--sp-5);
}

.testimonials__author{
  font-weight:600;
  color:var(--pw-ink);
}

.testimonials__sep{
  color:var(--pw-line);
}

.testimonials__treatment{
  font-weight:500;
  color:var(--pw-primary);
}

.testimonials__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-top:var(--sp-5);
  border-top:1px solid var(--pw-line);
  margin-top:var(--sp-6);
}

.testimonials__google{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.testimonials__google-rating{
  font-size:.8rem;
  font-weight:500;
  color:var(--pw-ink);
}

.testimonials__google-verified{
  font-size:.72rem;
  color:var(--pw-ink-50);
}

/* Fuente semántica única en flujo normal (usada sin JS y en prefers-reduced-motion) */
.testimonials__flow{
  padding-block:var(--sp-20);
}

.testimonials__header--flow{
  margin-bottom:var(--sp-12);
}

.testimonials__item{
  display:grid;
  grid-template-columns:minmax(0, 44%) minmax(0, 56%);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
  padding-bottom:var(--sp-12);
  margin-bottom:var(--sp-12);
  border-bottom:1px solid var(--pw-line);
}

.testimonials__item:last-of-type{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:var(--sp-6);
}

.testimonials__item-media{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:var(--radius, 2px);
  overflow:hidden;
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
}

.testimonials__item-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--focal-point, center);
  display:block;
}

.testimonials__item-text{
  display:flex;
  flex-direction:column;
}

/* Cuando el visor sticky interactivo está activo, la fuente semántica se oculta solo visualmente,
   permaneciendo 100% disponible y navegable para tecnologías asistivas (lectores de pantalla) */
.testimonials__flow--visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:normal!important;
  border:0!important;
}

/* Responsivo para móviles y tablets */
@media (max-width:860px){
  .testimonials__track{
    height:var(--testimonials-track-height, 250vh);
  }

  .testimonials__sticky{
    align-items:center;
    justify-content:center;
    padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); /* Reserva espacio para .book-bar fijo */
  }

  .testimonials__layout{
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
  }

  .testimonials__header{
    margin-bottom:var(--sp-3);
    padding-bottom:var(--sp-3);
  }

  .testimonials__stage{
    aspect-ratio:auto;
    height:clamp(135px, 22svh, 210px);
    width:100%;
  }

  .testimonials__text-stage{
    min-height:190px;
  }

  .testimonials__quote-wrap{
    margin:0 0 var(--sp-3);
  }

  .testimonials__quote{
    font-size:clamp(.92rem, 3.2vw, 1.05rem);
    line-height:1.46;
  }

  .testimonials__quote[data-clamped]{
    -webkit-line-clamp:5;
  }


  .testimonials__meta{
    font-size:.75rem;
    flex-wrap:wrap;
    padding-top:var(--sp-3);
  }

  .testimonials__footer{
    margin-top:var(--sp-3);
    padding-top:var(--sp-3);
  }

  .testimonials__item{
    display:flex;
    flex-direction:column;
    gap:var(--sp-6);
  }

  .testimonials__item-media{
    aspect-ratio:auto;
    height:clamp(135px, 22svh, 210px);
    width:100%;
  }
}

/* Soporte accesible total con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .testimonials__track{
    display:none!important;
  }
  .testimonials__flow{
    display:block!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
    clip:auto!important;
  }
}

/* ---------- 15b. Reseñas de Google (Fisioterapia) ----------
   Sección independiente de "15. Reseñas reales" (Home): usa sus propias
/* ==========================================================================
   Editorial Reviews / Testimonios de pacientes
   Composición editorial asimétrica en 2 columnas:
   - Columna 1: Eyebrow + Titular + Indicador discreto Google + Navegación minimalista (← 01 / 06 → + barra de progreso)
   - Columna 2: Cita protagonista tipográfica + Comilla sutil + Metadatos de paciente
   Transición suave de fade + micro-desplazamiento vertical de 8px, con autoplay pausado al interactuar.
   ========================================================================== */
.editorial-reviews {
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
  background: var(--pw-mist);
  border-block: 1px solid var(--pw-line);
  position: relative;
}

.editorial-reviews__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
@media (min-width: 960px) {
  .editorial-reviews__layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.85fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

/* Columna de context (esquerra) */
.editorial-reviews__col-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.editorial-reviews__title {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pw-ink);
  margin-top: var(--sp-2);
  margin-bottom: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* Indicador de Google compacte i discret */
.editorial-reviews__google {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--pw-ink-70);
  margin-top: var(--sp-1);
}
.editorial-reviews__google-stars {
  color: var(--pw-primary);
  letter-spacing: 0.12em;
  font-size: 0.88rem;
}
.editorial-reviews__google-score {
  font-weight: 600;
  color: var(--pw-ink);
}
.editorial-reviews__google-sep {
  color: var(--pw-line);
}
.editorial-reviews__google-label {
  color: var(--pw-ink-70);
  font-size: 0.82rem;
}

/* Columna protagonista (dreta) */
.editorial-reviews__col-stage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.editorial-reviews__stage {
  position: relative;
  min-height: 180px;
}

.editorial-reviews__item {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  position: relative;
}
.editorial-reviews__item.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-reviews__item.is-exiting {
  display: block;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* Cometa tipogràfica subtil com a marca d'aigua de fons (Opció B) */
.editorial-reviews__mark {
  position: absolute;
  top: -1.85rem;
  left: -1.25rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(6.5rem, 10vw, 9rem);
  line-height: 0.75;
  color: var(--pw-primary);
  opacity: 0.06;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Cita protagonista gran i espaiosa */
.editorial-reviews__quote {
  margin: 0;
  font-size: clamp(1.22rem, 2vw, 1.625rem);
  line-height: 1.58;
  color: var(--pw-ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 52ch;
  position: relative;
  z-index: 1;
}
.editorial-reviews__quote p {
  margin: 0 0 var(--sp-4);
}
.editorial-reviews__quote p:last-child {
  margin-bottom: 0;
}

/* Autoria discreta i neta */
.editorial-reviews__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.editorial-reviews__author {
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pw-ink);
}
.editorial-reviews__sep {
  color: var(--pw-ink-30, rgba(0, 0, 0, 0.25));
  font-size: 0.85rem;
}
.editorial-reviews__source {
  font-size: 0.84rem;
  color: var(--pw-ink-70);
  letter-spacing: 0.01em;
}

/* Navegació editorial a la columna de la ressenya */
.editorial-reviews__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.editorial-reviews__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.editorial-reviews__btn {
  background: transparent;
  border: 1px solid var(--pw-line);
  color: var(--pw-ink-70);
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  padding: 0;
}
.editorial-reviews__btn:hover {
  border-color: var(--pw-primary);
  color: var(--pw-primary);
  background-color: rgba(35, 115, 105, 0.06);
}
.editorial-reviews__btn:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
}
.editorial-reviews__btn:active {
  transform: scale(0.94);
}
.editorial-reviews__counter {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--pw-ink-70);
  font-variant-numeric: tabular-nums;
  min-width: 4.25rem;
  text-align: center;
  user-select: none;
}
.editorial-reviews__progress-track {
  width: 140px;
  height: 2px;
  background: var(--pw-line);
  border-radius: 999px;
  overflow: hidden;
}
.editorial-reviews__progress-bar {
  height: 100%;
  width: 16.66%;
  background: var(--pw-primary);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .editorial-reviews__item.is-active,
  .editorial-reviews__item.is-exiting {
    transform: none !important;
    transition: opacity 0.15s linear !important;
  }
  .editorial-reviews__progress-bar {
    transition: none !important;
  }
}

/* ---------- 16. Ubicación y contacto ---------- */
.contact{padding-block:var(--sp-32);background:var(--pw-mist);border-block:1px solid var(--pw-line);}
.contact__grid{display:grid;gap:var(--sp-16);}
@media (min-width:960px){ .contact__grid{grid-template-columns:1fr 1fr;gap:var(--sp-24);} }
.contact__head{margin-bottom:var(--sp-8);}
.contact__details{
  display:grid;gap:0;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .contact__details{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-8);} }
.contact__detail{display:flex;flex-direction:column;gap:.15rem;padding-block:var(--sp-4);border-top:1px solid var(--pw-line);}
.contact__detail strong{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pw-accent);}
.contact__detail a,.contact__detail span{font-size:.98rem;}
.contact__map{aspect-ratio:4/3;max-height:28rem;border:1px solid var(--pw-line);overflow:hidden;background:var(--pw-white);}
/* el mapa no captura el scroll de la página: para interactuar está
   "Cómo llegar", que abre Google Maps */
.contact__map iframe{width:100%;height:100%;border:0;pointer-events:none;}

/* ---------- 17. CTA final ---------- */
.cta-final{
  padding-block:var(--space-section-hero);
  background:var(--pw-primary-900);
  color:var(--pw-white);
  text-align:center;
}
.cta-final__inner{
  max-width:clamp(40rem, 52vw, 48rem);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.cta-final__inner .eyebrow{margin-bottom:var(--space-sm-md);}
.cta-final__title{font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.015em;text-wrap:balance;}
.cta-final__title + .cta-final__lead{margin-top:var(--space-md-lg);}
.cta-final__lead{font-size:var(--fs-lead);line-height:1.6;color:rgba(255,255,255,.82);max-width:44ch;}
.cta-final__lead + .cta-final__actions{margin-top:var(--space-xl);}
.cta-final__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--pw-primary-900);color:rgba(255,255,255,.82);padding-block:var(--space-section-dense) var(--space-xl);}
.site-footer__top{display:grid;gap:var(--sp-12);padding-bottom:var(--sp-12);border-bottom:1px solid var(--pw-line-on-dark);}
@media (min-width:720px){ .site-footer__top{grid-template-columns:1.2fr 1fr 1fr;} }
.site-footer__brand{display:flex;align-items:center;gap:.65rem;font-size:1rem;font-weight:600;color:var(--pw-white);margin-bottom:var(--space-md);}
.site-footer__brand img{height:6.5rem;width:auto;}
.site-footer__desc{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.65);max-width:26rem;}
.site-footer__heading{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8fd9c9;margin-bottom:var(--space-md);font-weight:600;}
.site-footer__list{display:grid;gap:.75rem;font-size:.88rem;line-height:1.5;}
.site-footer__list a{display:inline-block;padding-block:0.25rem;opacity:.82;transition:opacity var(--dur-fast) var(--ease-out);}
.site-footer__list a:hover{opacity:1;color:var(--pw-accent);}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-top:var(--sp-8);font-size:.75rem;color:rgba(255,255,255,.5);
}
.site-footer__author{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  color:rgba(255,255,255,.5);
}
.site-footer__author a{
  color:rgba(255,255,255,.8);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  transition:color var(--dur-fast) var(--ease-out);
}
.site-footer__author a strong{
  font-weight:600;
  color:rgba(255,255,255,.95);
  transition:color var(--dur-fast) var(--ease-out);
}
.site-footer__author a:hover,
.site-footer__author a:hover strong{
  color:var(--pw-accent);
}
.site-footer__author-arrow{
  font-size:.72rem;
  line-height:1;
  display:inline-block;
  opacity:.8;
  transition:transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.site-footer__author a:hover .site-footer__author-arrow{
  transform:translate(2px, -2px);
  color:var(--pw-accent);
}
@media (max-width:768px){
  .site-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-3);
  }
}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--sp-4);}
.site-footer__legal a{opacity:.85;}
.site-footer__legal a:hover{opacity:1;}

/* Footer institucional ampliado (solo metodo.html): Marca / Servicios /
   Physio Wellness / Contacto. Reutiliza el lenguaje visual de .site-footer
   pero con una columna más, como cierre de un recorrido más largo. */
.footer-grid{
  display:grid;
  gap:var(--sp-10);
  padding-bottom:var(--sp-12);
  border-bottom:1px solid var(--pw-line-on-dark);
}
@media (min-width:720px) and (max-width:959px){
  .footer-grid{grid-template-columns:1.2fr 1fr;gap:var(--sp-8);}
}
@media (min-width:960px){
  .footer-grid{grid-template-columns:1.3fr repeat(3,1fr);gap:var(--sp-8);}
}
.footer-brand .brand{display:inline-flex;margin-bottom:var(--sp-4);}
.footer-brand .brand img{height:4.5rem;width:auto;}
.footer-desc{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:24rem;}
.footer-title{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#8fd9c9;margin-bottom:var(--sp-4);}
.footer-links{display:grid;gap:.7rem;font-size:.88rem;list-style:none;padding:0;margin:0;}
.footer-links a{opacity:.82;transition:opacity var(--dur-fast) var(--ease-out);}
.footer-links a:hover{opacity:1;color:var(--pw-accent);}
.footer-meta{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 var(--sp-4);}
.footer-meta:last-child{margin-bottom:0;}
.footer-meta a{opacity:.9;}
.footer-meta a:hover{opacity:1;color:var(--pw-accent);}
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-top:var(--sp-8);font-size:.75rem;color:rgba(255,255,255,.5);
}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:var(--sp-4);}
.footer-bottom-links a{opacity:.85;}
.footer-bottom-links a:hover{opacity:1;}

/* ---------- 19. Cabecera de página interior ----------
   Las páginas internas no repiten el hero a pantalla completa de la Home:
   abren con un bloque editorial oscuro, más corto, que deja el contenido
   arriba y no obliga a hacer scroll para empezar a leer. */
.page-hero{
  position:relative;
  background:
    radial-gradient(120% 95% at 10% 0%, rgba(38,152,136,.30) 0%, rgba(38,152,136,0) 58%),
    var(--pw-primary-900);
  color:var(--pw-white);
}
.page-hero__inner{
  padding-block:clamp(7.5rem,15vh,10.5rem) clamp(4rem,9vh,6rem);
}

.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}
.breadcrumb li{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.5);}
.breadcrumb li + li::before{content:"/";color:rgba(255,255,255,.3);}
.breadcrumb a{color:rgba(255,255,255,.7);transition:color var(--dur-fast) var(--ease-out);}
.breadcrumb a:hover{color:var(--pw-white);}
.breadcrumb [aria-current="page"]{color:#8fd9c9;}
.page-hero__breadcrumb{margin-bottom:var(--sp-10);}

.page-hero__eyebrow{margin-bottom:var(--space-sm-md);}
.page-hero__title{
  font-size:clamp(2.15rem,4.6vw,4rem);
  max-width:24ch;
}
.page-hero__text{
  display:grid;gap:var(--sp-5);
  max-width:48ch;
  margin-block:var(--sp-8) var(--sp-10);
}
.page-hero__text p{font-size:var(--fs-lead);color:rgba(255,255,255,.84);}
.page-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);}
.page-hero__micro{
  margin-top:var(--sp-6);
  font-size:.82rem;letter-spacing:.03em;
  color:rgba(255,255,255,.6);
}

/* ---------- 20. Carrusel de áreas (Servicios) ----------
   Componente reutilizable: .area-carousel. La tarjeta activa se fija por
   CSS mediante [data-position="0"]; el resto de posiciones (±1, ±2) se
   colocan alrededor. Los datos de cada tarjeta (texto, imagen, ruta) viven
   únicamente en el HTML; data-position es el único enganche que el JS
   (areaCarousel, main.js) reescribe en los 5 <li> para ciclar el carrusel,
   avanzar/retroceder o saltar a una tarjeta concreta, sin tocar esta hoja
   de estilos. Las reglas de posición se aplican en todos los anchos (no
   solo en escritorio) para que el arrastre/deslizamiento táctil anime la
   misma composición a cualquier tamaño; el media query de 1024px solo
   amplía tamaños y revela descripción/CTA de la tarjeta activa. */
.area-carousel{
  position:relative;
  padding-block:var(--space-section);
  background:var(--pw-primary-900);
  overflow:hidden;
  scroll-margin-top:4.5rem;
}
/* Resplandor ambiental tras la tarjeta central. rgba calculada a partir de
   --pw-accent (#269888 = 38,152,136) y --pw-primary-900 (#123c37 =
   18,60,55), mismo criterio que --pw-line respecto a --pw-ink: un custom
   property no puede variar su alpha dentro de un radial-gradient. */
.area-carousel::before{
  content:"";
  position:absolute;top:50%;left:50%;
  width:50rem;height:50rem;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(38,152,136,.4) 0%, rgba(38,152,136,.14) 42%, rgba(18,60,55,0) 70%);
  pointer-events:none;
}
.area-carousel__head{position:relative;z-index:1;max-width:42rem;margin-bottom:var(--sp-12);color:var(--pw-white);}
.area-carousel__head .section-heading{color:var(--pw-white);}
.area-carousel__lead{margin-top:var(--sp-5);max-width:56ch;color:rgba(255,255,255,.72);}

.area-carousel__viewport{
  position:relative;z-index:1;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
}
.area-carousel__viewport:active{cursor:grabbing;}
.area-carousel__track{
  display:flex;align-items:flex-start;justify-content:center;
  gap:1.25rem;
  margin:0;padding:.5rem var(--sp-4) 1rem;
  user-select:none;-webkit-user-select:none;
  transition:transform .3s var(--ease-out);
}
.area-carousel.is-dragging .area-carousel__track{transition:none;}

/* Duración propia (700ms) fuera de la escala --dur-* del sitio: el pedido
   del carrusel es 600-800ms, y ningún token existente cae en ese rango
   (--dur-med .5s, --dur-slow .9s). Precedente de duraciones puntuales fuera
   de la escala ya usado en otros componentes del sitio. */
.area-carousel__card{
  list-style:none;flex:0 0 auto;
  width:13rem;
  transition:transform .7s var(--ease-out), opacity .7s var(--ease-out), width .7s var(--ease-out);
}
.area-carousel.is-dragging .area-carousel__card{transition:none;}
.area-carousel__card-link{display:block;position:relative;}
.area-carousel__media{
  position:relative;display:block;
  aspect-ratio:3/4;overflow:hidden;
  border-radius:1.25rem;
  background:var(--pw-primary-600);
}
.area-carousel__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.area-carousel__img--physio{object-position:58% 32%;}
.area-carousel__img--wellness{object-position:70% 32%;}
.area-carousel__img--strength{object-position:46% 35%;}
.area-carousel__img--pilates{object-position:42% 30%;}
/* FASE 7: fotografía real de Stretching (ver ASSET_SOURCES.md). Mismo
   criterio de recorte que .service-panel__img--stretching (contenedor
   3/4, muy cercano al ratio nativo de la foto). */
.area-carousel__img--stretching{object-position:44% 38%;}
.area-carousel__img--domicilio{object-position:center;}
.area-carousel__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,60,55,0) 45%, rgba(18,60,55,.88) 100%);
}
.area-carousel__card-link:hover .area-carousel__media img,
.area-carousel__card-link:focus-visible .area-carousel__media img{transform:scale(1.05);}
.area-carousel__card-link:focus-visible{outline:2px solid var(--pw-accent);outline-offset:3px;border-radius:1.25rem;}

.area-carousel__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  color:var(--pw-white);
  display:flex;flex-direction:column;gap:.35rem;
}
.area-carousel__title{font-size:1rem;font-weight:500;line-height:1.25;}
.area-carousel__desc,.area-carousel__cta{display:none;}
.area-carousel__cta{
  align-items:center;gap:.5rem;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8fd9c9;margin-top:.15rem;
}
.area-carousel__cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.area-carousel__card-link:hover .area-carousel__cta svg,
.area-carousel__card-link:focus-visible .area-carousel__cta svg{transform:translateX(4px);}

/* -- Composición base (también móvil): tarjeta activa centrada y más
   grande, tarjetas visibles a cada lado, escala/opacidad decrecientes
   y extremos parcialmente recortados por el ancho limitado del viewport.
   Los 6 <li> siempre tienen un data-position (0/±1/±2/-3), así que estas
   reglas son incondicionales y el JS solo reescribe el atributo. La
   tarjeta -3 (Stretching) extiende el mismo patrón de reducción: el total
   par de tarjetas hace que el abanico ya no sea simétrico (un nivel más
   en el lado izquierdo), asumido para no rediseñar el algoritmo de
   areaCarousel(). -- */
.area-carousel__card[data-position="0"]{order:0;opacity:1;transform:translateY(0) scale(1);z-index:5;}
.area-carousel__card[data-position="0"] .area-carousel__title{font-size:1.05rem;}

.area-carousel__card[data-position="1"],
.area-carousel__card[data-position="-1"]{width:9.5rem;opacity:.75;transform:translateY(1.15rem) scale(.94);z-index:4;}
.area-carousel__card[data-position="1"]{order:1;}
.area-carousel__card[data-position="-1"]{order:-1;}

.area-carousel__card[data-position="2"],
.area-carousel__card[data-position="-2"]{width:6.5rem;opacity:.42;transform:translateY(1.75rem) scale(.88);z-index:3;}
.area-carousel__card[data-position="2"]{order:2;}
.area-carousel__card[data-position="-2"]{order:-2;}

.area-carousel__card[data-position="-3"]{width:4.5rem;opacity:.2;transform:translateY(2.15rem) scale(.82);z-index:2;order:-3;}

@media (min-width:1024px){
  .area-carousel__viewport{
    max-width:70rem;margin-inline:auto;
  }
  .area-carousel__track{padding-inline:0;}

  .area-carousel__card[data-position="0"]{width:21rem;}
  .area-carousel__card[data-position="0"] .area-carousel__title{font-size:var(--fs-h3);}
  .area-carousel__card[data-position="0"] .area-carousel__desc{display:block;font-size:.9rem;color:rgba(255,255,255,.82);max-width:26ch;}
  .area-carousel__card[data-position="0"] .area-carousel__cta{display:inline-flex;}

  .area-carousel__card[data-position="1"],
  .area-carousel__card[data-position="-1"]{width:15.5rem;transform:translateY(1.75rem) scale(.94);}

  .area-carousel__card[data-position="2"],
  .area-carousel__card[data-position="-2"]{width:10.5rem;transform:translateY(2.75rem) scale(.88);}

  .area-carousel__card[data-position="-3"]{width:7.5rem;transform:translateY(3.5rem) scale(.82);}
}

.area-carousel__note{
  position:relative;z-index:1;
  margin-top:var(--sp-10);
  max-width:60ch;
  padding-left:var(--sp-6);
  border-left:2px solid var(--pw-accent);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);
}
.area-carousel__note-text{font-size:.98rem;color:rgba(255,255,255,.72);}
.area-carousel__note-link{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8fd9c9;
  border-bottom:1px solid currentColor;padding-bottom:.25rem;
}
.area-carousel__note-link:hover,.area-carousel__note-link:focus-visible{color:var(--pw-white);}

/* ---------- 21. Las áreas en detalle (Servicios) ----------
   Las áreas se leen como capítulos de un mismo proceso: filete superior
   común, misma retícula y el listado de servicios siempre en el mismo
   lugar. Nada de tarjetas independientes: no son cuatro negocios. */
.areas-detail{padding-block:var(--sp-32);background:var(--pw-white);}
.areas-detail__head{max-width:44rem;margin-bottom:var(--sp-16);}
.areas-detail__intro{display:grid;gap:var(--sp-5);margin-top:var(--sp-6);}
.areas-detail__intro p{font-size:var(--fs-lead);color:var(--pw-ink-70);max-width:56ch;}

.area-block{
  display:grid;gap:var(--sp-10);
  padding-top:var(--sp-12);
  border-top:1px solid var(--pw-line);
  scroll-margin-top:5rem;
}
.area-block + .area-block{margin-top:var(--sp-16);}
@media (min-width:960px){
  .area-block{grid-template-columns:1.05fr .95fr;column-gap:var(--sp-24);align-items:start;}
}
.area-block__claim{
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.15;
  max-width:20ch;
}
.area-block__text{display:grid;gap:var(--sp-4);margin-top:var(--sp-6);}
.area-block__text p{color:var(--pw-ink-70);max-width:52ch;}
/* enlace de acción secundaria, compartido por los bloques de la página */
.area-block__cta,
.home-care__cta,
.expertise__cta{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:var(--sp-8);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pw-primary);
  border-bottom:1px solid currentColor;padding-bottom:.3rem;
}
.area-block__cta svg,
.home-care__cta svg,
.expertise__cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.area-block__cta:hover svg,
.home-care__cta:hover svg,
.expertise__cta:hover svg{transform:translateX(4px);}

.area-block__services{
  background:var(--pw-mist);
  border-left:2px solid var(--pw-primary);
  padding:var(--sp-6) var(--sp-6) var(--sp-8);
}
.area-block__services-label{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pw-ink-70);
  margin-bottom:var(--sp-2);
}
.area-block__list li{
  padding-block:.75rem;
  border-top:1px solid var(--pw-line);
}
.area-block__list li:first-child{border-top:none;}
.area-block__note{
  margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:1px solid var(--pw-line);
  font-size:.85rem;line-height:1.5;color:var(--pw-ink-70);
}

/* Variaciones de ritmo: la retícula se invierte y, cuando un área no tiene
   listado, el bloque se abre a todo el ancho. En móvil todos caen a una
   columna en el orden del documento. */
@media (min-width:960px){
  .area-block--reverse{grid-template-columns:.95fr 1.05fr;}
  .area-block--reverse .area-block__main{order:2;}
  .area-block--reverse .area-block__services{order:1;}

  .area-block--wide{grid-template-columns:1fr;}
  .area-block--wide .area-block__claim{
    font-size:clamp(1.75rem,3.2vw,2.6rem);
    max-width:22ch;
  }
  .area-block--wide .area-block__text{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--sp-16);
    margin-top:var(--sp-8);
  }
  .area-block--wide .area-block__text p{max-width:46ch;}
}

/* ---------- 22. El recorrido entre áreas ---------- */
.path{
  padding-block:var(--space-section);
  background:var(--pw-primary-900);
  color:var(--pw-white);
}
.path__inner{display:grid;gap:var(--sp-10);}
@media (min-width:860px){
  .path__inner{grid-template-columns:1fr 1.2fr;column-gap:var(--sp-24);align-items:start;}
}
.path__title{max-width:18ch;}
.path__text{display:grid;gap:var(--sp-5);}
.path__text p{font-size:var(--fs-lead);color:rgba(255,255,255,.78);max-width:58ch;}
.path__cta{margin-top:var(--sp-10);}

/* ---------- 23. Fisioterapia a domicilio ----------
   Es una modalidad, no una quinta área: mismo filete de apoyo que el
   servicio complementario de la Home y titular por debajo del de sección. */
.home-care{padding-block:var(--space-section);background:var(--pw-white);}
.home-care__inner{
  max-width:62ch;
  padding-left:var(--sp-6);
  border-left:2px solid var(--pw-primary);
}
.home-care__title{
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.15;
  max-width:30ch;
}
.home-care__text{display:grid;gap:var(--sp-4);margin-top:var(--sp-5);}
.home-care__text p{color:var(--pw-ink-70);}

/* ---------- 24. Primera consulta (reutiliza el bloque de primera visita) ---------- */
.first-visit{scroll-margin-top:5rem;}
.first-visit__note{margin-top:var(--sp-6);color:var(--pw-ink-70);max-width:44ch;}
.first-visit__list-intro{margin-bottom:var(--sp-5);color:var(--pw-ink-70);}

/* ---------- 25. Confianza ---------- */
.expertise{padding-block:var(--space-section);background:var(--pw-white);}
.expertise__title{max-width:24ch;}
.expertise__text{display:grid;gap:var(--sp-5);margin-top:var(--sp-8);}
@media (min-width:860px){
  .expertise__text{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-16);}
}
.expertise__text p{font-size:var(--fs-lead);color:var(--pw-ink-70);max-width:46ch;}

/* microcopy de cierre del CTA final (solo en páginas interiores) */
.cta-final__micro{font-size:.85rem;color:rgba(255,255,255,.6);}

/* ---------- 26. Acabado de /servicios ----------
   Correcciones de accesibilidad acotadas a esta página con `.page-servicios`.
   Se mantienen dentro del ámbito de la página porque tocar los selectores
   globales (.btn, .eyebrow) cambiaría también la Home, que no entra en este
   encargo. Cuando se construyan el resto de páginas conviene promoverlas al
   sistema. */

/* Contraste AA. --pw-accent (#269888) sólo llega a 3.5:1 sobre fondos claros
   y a 3.4:1 sobre el verde oscuro. Para texto pequeño se usa --pw-primary
   sobre claro (5.6:1) y #8fd9c9 sobre oscuro (7.5:1). */
.page-servicios .eyebrow:not(.eyebrow--on-dark){color:var(--pw-primary);}
.page-servicios .eyebrow:not(.eyebrow--on-dark)::before{background:var(--pw-primary);}

/* Área táctil. Los enlaces de texto crecían sólo 17-24px de alto: se les da
   recorrido vertical y se compensa el margen para que no se muevan de sitio. */
.page-servicios .breadcrumb a{padding-block:.5rem;margin-block:-.5rem;}
.page-servicios .area-carousel__note-link{padding-top:.7rem;margin-top:-.7rem;}
.page-servicios .area-block__cta,
.page-servicios .home-care__cta,
.page-servicios .expertise__cta{
  padding-top:.7rem;
  margin-top:calc(var(--sp-8) - .7rem);
}

/* Estados. El foco visible global ya cubre a/button; aquí se añade el estado
   activo. */
.page-servicios .btn:active{transform:translateY(1px);}
.page-servicios .area-block__cta:active,
.page-servicios .home-care__cta:active,
.page-servicios .expertise__cta:active{color:var(--pw-primary-900);}
.page-servicios .area-carousel__note-link:active{color:var(--pw-white);}
.page-servicios .breadcrumb a:hover{color:var(--pw-white);}

/* ---------- 26b. Acabado de Home ----------
   Mismo criterio de contraste AA que en /servicios (ver comentario arriba):
   --pw-accent no llega a 4.5:1 sobre fondos claros para texto pequeño, así
   que aquí también se usa --pw-primary. Todo va prefijado con `.page-home`
   para no afectar a Servicios ni a Tarifas, que reutilizan estas mismas
   clases (.eyebrow, .first-visit__step). */
.page-home .eyebrow:not(.eyebrow--on-dark){color:var(--pw-primary);}
.page-home .eyebrow:not(.eyebrow--on-dark)::before{background:var(--pw-primary);}
.page-home .first-visit__step::before{color:var(--pw-primary);}

/* Estado activo del botón, igual que en /servicios: el foco visible global
   ya cubre a/button; esto añade el "clic" táctil que faltaba en Home. */
.page-home .btn:active{transform:translateY(1px);}


/* ---------- 27. Tarifas (/es/tarifas/) ----------
   Dirección visual de la página de tarifas.

   Criterio: composición editorial asimétrica, cifras a gran escala y mucho
   aire. Sin tabla ni cuadrícula de tarjetas comerciales iguales: cada bloque
   de precio tiene el peso que le corresponde en el recorrido.

   Los módulos de precio NO son interactivos: no llevan sombra, ni cursor de
   mano, ni elevación al pasar el ratón. El único elemento clicable de cada
   sección es su botón.

   Todo lo que toca clases compartidas (.page-hero, .btn) va prefijado con
   .page-tarifas para no afectar a la Home ni a /servicios.

   Los precios se editan en tarifas.html, no aquí.                          */

/* Cifras: ancho fijo para que precios y duraciones se alineen en vertical. */
.page-tarifas .entry__num,
.page-tarifas .entry__price,
.page-tarifas .step__num,
.page-tarifas .step__price,
.page-tarifas .split__num,
.page-tarifas .split__price,
.page-tarifas .travel__num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Botón secundario sobre fondo claro. El .btn--outline base está pensado para
   fondo oscuro (borde blanco), así que aquí se reescribe. */
.page-tarifas .help .btn--outline{
  border-color:var(--pw-line);
  color:var(--pw-primary-900);
}
.page-tarifas .help .btn--outline:hover{
  border-color:var(--pw-accent);
  background:rgba(38,152,136,.08);
}

/* ----- Hero: composición de texto -----
   FASE 7B: se retiran las cifras de duración (hero-nums) y con ellas la
   segunda columna que ocupaban. Un único bloque de texto, más estrecho que
   el contenedor (ver .page-hero__title/.page-hero__text, §19), deja más
   foto exclusiva visible a la derecha en escritorio. */
.page-tarifas .hero-grid{display:grid;gap:var(--sp-12);}

/* ----- Orientación previa -----
   Dos paneles asimétricos: el de primera visita pesa más porque es el punto
   de partida habitual. */
.pre-choice{padding-block:var(--space-section);background:var(--pw-white);}
.pre-choice__head{margin-bottom:var(--sp-12);}
.pre-choice__grid{display:grid;gap:var(--sp-10);}
@media (min-width:860px){
  .pre-choice__grid{grid-template-columns:1.4fr .6fr;gap:var(--sp-16);align-items:start;}
}

.choice-card{
  padding-top:var(--sp-6);
  border-top:2px solid var(--pw-primary);
}
.choice-card--secondary{border-top-color:var(--pw-line);}
@media (min-width:860px){
  .choice-card--secondary{margin-top:var(--sp-16);}
}
.choice-card__step{
  font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--pw-primary);
  margin-bottom:var(--sp-3);
}
.choice-card--secondary .choice-card__step{color:var(--pw-ink-50);}
.choice-card__title{font-size:var(--fs-h3);margin-bottom:var(--sp-4);}
.choice-card--primary .choice-card__title{font-size:var(--fs-h2);}
.choice-card__duration{
  display:flex;align-items:baseline;gap:.2em;
  margin-bottom:var(--sp-5);line-height:.85;
}
.choice-card__num{
  font-size:clamp(2.75rem,6vw,4.5rem);
  font-weight:500;letter-spacing:-.02em;
  color:var(--pw-primary);
}
.choice-card__unit{font-size:var(--fs-label);color:var(--pw-ink-70);}
.choice-card__text{color:var(--pw-ink-70);max-width:44ch;}

.tag-list{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6);}
.tag{
  display:inline-flex;align-items:center;
  padding:.4rem .85rem;
  border:1px solid var(--pw-line);
  font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--pw-primary);
  font-variant-numeric:tabular-nums;
}

/* ----- Elige tu área: tarjetas editoriales -----
   Inspirado en el ritmo de tarjeta grande + imagen tratada de Revo Studios,
   sin copiar su paleta. Las cuatro enlazan al mismo panel #en-la-clinica
   (no hay cuatro tarifas, solo cuatro puertas de entrada a la misma).
   Bordes redondeados y grano son deliberados en esta sección: el resto de
   la página mantiene el --radius:2px "clínico"; --radius-tile es una
   excepción local, no un cambio del token global.
   Nombrado .area-select/.area-tile (no .areas/.area-card) a propósito:
   esas clases ya existen en styles.css §10 para el bloque "Las cuatro
   áreas" de index.html — reutilizar el mismo nombre habría filtrado estos
   estilos a la Home. Ver ASSET_SOURCES.md para el origen de las imágenes. */
.page-tarifas .area-select{padding-block:var(--space-section);background:var(--pw-white);}
.page-tarifas .area-select__head{max-width:60ch;}

/* ----- FASE 4: layout de paneles + contexto lateral -----
   En escritorio ancho, la rejilla 2×2 de paneles vive junto a un panel de
   contexto pegajoso (sticky) que refleja el área activa. En estrecho, el
   contexto se apila justo debajo de la rejilla: mismo contenido, sin
   posicionamiento especial. */
.page-tarifas .area-select__layout{margin-top:var(--sp-12);}
@media (min-width:1100px){
  .page-tarifas .area-select__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(240px,300px);
    gap:var(--sp-10);
    align-items:start;
  }
}

.page-tarifas .area-select__grid{
  --radius-tile:20px;
  display:grid;gap:var(--sp-6);
}
@media (min-width:640px){
  .page-tarifas .area-select__grid{grid-template-columns:1fr 1fr;}
}
/* FASE 6: de 4 puertas estrechas a 2×2 puertas grandes — "paneles
   fotográficos de mayor escala" en vez de una cuadrícula pequeña. */
@media (min-width:1100px){
  .page-tarifas .area-select__grid{gap:var(--sp-8);}
}

/* .area-tile ya no es un enlace: es un contenedor con dos elementos
   interactivos propios (el botón de selección y el enlace "Ver tarifas"),
   así que el estado hover/foco se engancha con :focus-within, no con
   :focus-visible sobre el propio contenedor. */
.page-tarifas .area-tile{
  position:relative;
  display:flex;flex-direction:column;
  min-height:26rem;
  border-radius:var(--radius-tile);
  overflow:hidden;
  color:var(--pw-white);
  isolation:isolate;
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.page-tarifas .area-tile:hover,
.page-tarifas .area-tile:focus-within{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -20px rgba(18,32,29,.45);
}
@media (min-width:1100px){
  .page-tarifas .area-tile{min-height:32rem;}
}

/* Composición para 5 elementos: con 4 tarjetas la cuadrícula 2×2 cierra
   perfecta, pero la quinta (Stretching) deja una única tarjeta suelta en
   su propia fila, pegada a la izquierda con un hueco vacío al lado — lee
   como sobrante en vez de como parte del mismo sistema. En vez de
   ensanchar la tarjeta (lo que cambiaría la proporción de su contenedor
   y, por tanto, el recorte visible de la foto con object-fit:cover), se
   ocupa toda la fila (grid-column:1/-1) pero se fija un width idéntico al
   de una tarjeta normal de la cuadrícula y se centra: mismo tamaño y
   recorte exactos, solo cambia su posición dentro de la fila. */
@media (min-width:640px){
  .page-tarifas .area-tile[data-area="Stretching"]{
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - (var(--sp-6) / 2));
  }
}
@media (min-width:1100px){
  .page-tarifas .area-tile[data-area="Stretching"]{
    width:calc(50% - (var(--sp-8) / 2));
  }
}

/* Estado seleccionado: anillo + insignia + texto, nunca solo color. */
.page-tarifas .area-tile.is-selected{
  box-shadow:0 0 0 3px var(--pw-white), 0 0 0 5px var(--pw-primary);
}
.page-tarifas .area-tile.is-selected:hover,
.page-tarifas .area-tile.is-selected:focus-within{
  box-shadow:0 0 0 3px var(--pw-white), 0 0 0 5px var(--pw-primary), 0 18px 40px -20px rgba(18,32,29,.45);
}

.page-tarifas .area-tile__media{
  position:absolute;inset:0;z-index:-2;
  display:block;
}
.page-tarifas .area-tile__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(1.08) contrast(1.05) brightness(.92);
  transition:transform var(--dur-slow) var(--ease-out);
}
/* FASE 7C: cada tarjeta usa su propia fotografía (ver ASSET_SOURCES.md),
   así que cada una necesita su propio encuadre -nunca el mismo recorte
   centrado-: el contenedor es más estrecho que la foto (recorta lados),
   así que el eje horizontal es el que hay que ajustar por imagen. */
.page-tarifas .area-tile[data-area="Fisioterapia"] .area-tile__media img{object-position:58% 32%;}
.page-tarifas .area-tile[data-area="Pilates"] .area-tile__media img{object-position:42% 30%;}
.page-tarifas .area-tile[data-area="Fuerza"] .area-tile__media img{object-position:46% 35%;}
.page-tarifas .area-tile[data-area="Bienestar"] .area-tile__media img{object-position:70% 32%;}
/* FASE 7: fotografía real de Stretching, de encuadre vertical (retrato) a
   diferencia de las demás (paisaje): aquí el contenedor recorta sobre todo
   en el eje vertical, así que es el valor Y el que hay que ajustar para
   priorizar la pierna elevada y las manos por encima del centro. */
.page-tarifas .area-tile[data-area="Stretching"] .area-tile__media img{object-position:50% 20%;}
@media (max-width:639px){
  .page-tarifas .area-tile[data-area="Fisioterapia"] .area-tile__media img{object-position:65% 28%;}
  .page-tarifas .area-tile[data-area="Bienestar"] .area-tile__media img{object-position:78% 30%;}
  .page-tarifas .area-tile[data-area="Stretching"] .area-tile__media img{object-position:50% 24%;}
}
.page-tarifas .area-tile:hover .area-tile__media img,
.page-tarifas .area-tile:focus-within .area-tile__media img{transform:scale(1.05);}

/* Oscurecimiento inferior en degradado, para que el texto mantenga
   contraste AA sobre cualquier foto. */
.page-tarifas .area-tile__media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,60,55,0) 35%,rgba(18,60,55,.55) 70%,rgba(18,60,55,.92) 100%);
}
/* Grano sutil: textura feTurbulence en SVG inline, sin petición de red. */
.page-tarifas .area-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
  pointer-events:none;
}

.page-tarifas .area-tile__body{
  position:relative;z-index:1;
  margin-top:auto;
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-1);
  padding:var(--sp-6);
}

/* Botón semántico: ocupa el eyebrow + título, con área de toque generosa.
   Reset de estilos nativos de <button> para heredar la tipografía del panel. */
.page-tarifas .area-tile__select{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);
  background:none;border:none;padding:var(--sp-1) 0;margin:0;
  font:inherit;color:inherit;text-align:left;
  cursor:pointer;
  width:100%;
}
.page-tarifas .area-tile__select:focus-visible{
  outline:2px solid var(--pw-accent);outline-offset:4px;
}
.page-tarifas .area-tile__eyebrow{
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:#8fd9c9;
  /* El degradado inferior de .area-tile__media::after ya garantiza AA por
     luminosidad, pero el matiz de cada foto (p. ej. tonos cálidos en
     Bienestar) puede restar nitidez percibida al mismo verde. Una sombra
     sutil iguala la legibilidad de la numeración en las cuatro fotos. */
  text-shadow:0 1px 6px rgba(10,20,18,.5);
}
.page-tarifas .area-tile__title{
  font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:500;
  text-shadow:0 1px 8px rgba(10,20,18,.4);
}

/* Insignia "Seleccionada": oculta por defecto, visible solo en el panel
   activo. Va acompañada de icono + texto, además del anillo del panel:
   tres recursos distintos del color para marcar la selección. */
.page-tarifas .area-tile__badge{
  display:none;
  align-items:center;gap:.4em;
  margin-top:var(--sp-1);
  padding:.3rem .65rem;
  border-radius:999px;
  background:var(--pw-white);
  color:var(--pw-primary-900);
  font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.page-tarifas .area-tile.is-selected .area-tile__badge{display:inline-flex;}

.page-tarifas .area-tile__text{
  font-size:var(--fs-small);color:rgba(255,255,255,.85);
  max-width:32ch;
}
@media (min-width:1100px){
  .page-tarifas .area-tile__body{padding:var(--sp-8);}
  .page-tarifas .area-tile__text{font-size:var(--fs-body);}
}
.page-tarifas .area-tile__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:var(--sp-4);
  padding:.25rem 0;
  font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--pw-white);
}
.page-tarifas .area-tile__cta:focus-visible{
  outline:2px solid var(--pw-accent);outline-offset:4px;
}
.page-tarifas .area-tile__cta svg{transition:transform var(--dur-fast) var(--ease-out);}
.page-tarifas .area-tile:hover .area-tile__cta svg,
.page-tarifas .area-tile:focus-within .area-tile__cta svg{transform:translateX(3px);}

@media (prefers-reduced-motion:reduce){
  .page-tarifas .area-tile,.page-tarifas .area-tile__media img,.page-tarifas .area-tile__cta svg{transition:none;}
  .page-tarifas .area-tile:hover,.page-tarifas .area-tile:focus-within{transform:none;}
  .page-tarifas .area-tile:hover .area-tile__media img,
  .page-tarifas .area-tile:focus-within .area-tile__media img{transform:none;}
}

/* ----- Panel de contexto -----
   Refleja el área activa: mismo contenido que las 4 puertas, sin datos
   nuevos. En escritorio ancho queda fijo (sticky) junto a la rejilla; en
   estrecho se apila justo debajo, como una quinta ficha de la misma serie. */
.page-tarifas .area-context{
  margin-top:var(--sp-8);
  padding:var(--sp-8);
  border:1px solid var(--pw-line);
  background:var(--pw-mist);
}
@media (min-width:1100px){
  .page-tarifas .area-context{
    margin-top:0;
    position:sticky;top:var(--sp-10);
  }
}
.page-tarifas .area-context__eyebrow{
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--pw-primary);
  margin-bottom:var(--sp-2);
}
.page-tarifas .area-context__title{font-size:var(--fs-h3);margin-bottom:var(--sp-3);}
.page-tarifas .area-context__text{color:var(--pw-ink-70);margin-bottom:var(--sp-6);}
.page-tarifas .area-context__cta{width:100%;justify-content:center;}

/* ----- Estructura común de las dos secciones de tarifas -----
   Retícula asimétrica: enunciado a la izquierda, precios a la derecha. */
.rates{padding-block:var(--space-section);background:var(--pw-white);}
.rates--home{background:var(--pw-mist);padding-bottom:var(--sp-16);}
.rates__inner{display:grid;gap:var(--sp-10);}
@media (min-width:960px){
  .rates__inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-16);align-items:start;}
}
.rates__lead{margin-top:var(--sp-5);}
.rates__note{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--pw-ink-70);}
.rates__body{display:grid;gap:var(--sp-8);}
.rates__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-2);}

/* ----- 01 · Puerta de entrada: primera sesión -----
   Panel oscuro, la pieza de más peso de la página. */
.entry{
  display:grid;
  /* minmax(0,1fr): sin el 0 explícito, el ancho automático de contenido
     del CTA (nowrap, ver .entry__cta) obligaba a esta columna -y con ella
     toda la tarjeta y la página- a desbordarse en viewports estrechos. */
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:var(--sp-4) var(--sp-8);
  padding:var(--sp-8) var(--sp-6);
  background:var(--pw-primary-900);
  color:var(--pw-white);
}
@media (min-width:640px){
  .entry{padding:var(--sp-10) var(--sp-8);gap:var(--sp-5) var(--sp-10);}
}

.entry__duration{grid-column:1;grid-row:1 / span 2;display:flex;align-items:baseline;gap:.4rem;}
.entry__num{
  font-size:clamp(3.5rem,10vw,5.5rem);
  line-height:.8;font-weight:500;letter-spacing:-.03em;
  color:#8fd9c9;
}
.entry__unit{font-size:var(--fs-small);color:rgba(255,255,255,.65);}

.entry__title{grid-column:2;grid-row:1;font-size:var(--fs-h3);font-weight:500;}
.entry__price{
  grid-column:2;grid-row:2;
  font-size:clamp(2rem,5vw,2.75rem);
  line-height:1;font-weight:500;letter-spacing:-.02em;
  color:var(--pw-white);
}
.entry__note{
  grid-column:2;grid-row:3;
  margin-top:var(--sp-1);
  font-size:var(--fs-small);
  color:rgba(255,255,255,.6);
  max-width:46ch;
}
.entry__cta{
  grid-column:2;grid-row:4;margin-top:var(--sp-3);width:fit-content;
  /* Permite envolver en dos líneas si el espacio disponible es escaso,
     en vez de heredar el nowrap de .btn y desbordar la columna. */
  white-space:normal;
}

/* ----- 01 · Seguimiento: una modalidad, dos duraciones escalonadas ----- */
.follow{padding-top:var(--sp-6);border-top:1px solid var(--pw-line);}
.follow__title{
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--pw-ink-50);
  margin-bottom:var(--sp-2);
}
.follow__list{display:grid;}
/* Cada duración es un <li> propio. FASE 7B: se retira el escalón que
   desplazaba la segunda fila (rompía el eje común pedido para 30'/50'). */
.follow__list > li{border-bottom:1px solid var(--pw-line);}

.step{padding-block:var(--sp-2);}
.step__summary{
  display:grid;
  /* Tres zonas estables (Duración / Precio / Control), con anchos en rem
     -no en ch, que se calcula sobre el font-size del <summary>, no el de
     cada span hijo, y se queda corto para cifras a gran escala-. minmax()
     reserva sitio de sobra para "50 minutos"/"80 €" en cualquier idioma
     de longitud similar, y el gap evita que se toquen aunque el contenido
     crezca. */
  grid-template-areas:"duration price toggle";
  grid-template-columns:minmax(10rem,1fr) minmax(5.5rem,auto) auto;
  align-items:baseline;
  column-gap:var(--sp-6);
  padding-block:var(--sp-4);
  cursor:pointer;
  list-style:none;
}
.step__summary::-webkit-details-marker{display:none;}
.step__summary:focus-visible{outline:2px solid var(--pw-accent);outline-offset:3px;}
.step__duration{
  grid-area:duration;
  display:flex;align-items:baseline;gap:.5rem;
  min-width:0;
}
.step__num{
  font-size:clamp(2.25rem,6vw,3rem);
  line-height:.85;font-weight:500;letter-spacing:-.02em;
  color:var(--pw-primary);
  font-variant-numeric:tabular-nums;
}
.step__unit{font-size:var(--fs-small);color:var(--pw-ink-70);white-space:nowrap;}
.step__price{
  grid-area:price;
  font-size:clamp(1.5rem,3.5vw,2rem);
  line-height:1;font-weight:500;
  color:var(--pw-ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  justify-self:start;
}
/* Botón "Bonos": mismo lenguaje de +/− que el acordeón de preguntas
   frecuentes, a escala reducida. */
.step__toggle{
  grid-area:toggle;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--pw-primary);
  white-space:nowrap;
  justify-self:end;
  transition:color var(--dur-fast) var(--ease-out);
}
/* Móvil: la fila "Duración | Precio | Control" ya no cabe en tres columnas
   cómodas, así que se redistribuye en dos filas manteniendo el mismo orden
   de lectura (duración arriba; precio y control abajo, alineados a los
   extremos). Sin position:absolute y con el mismo gap en todas las filas. */
@media (max-width:639px){
  .step__summary{
    grid-template-areas:
      "duration duration"
      "price toggle";
    grid-template-columns:1fr auto;
    row-gap:var(--sp-2);
    column-gap:var(--sp-4);
  }
  .step__price{justify-self:start;}
}
.step__toggle::after{
  content:"";flex:none;
  width:9px;height:9px;
  background:
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/100% 1px no-repeat,
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/1px 100% no-repeat;
  transition:transform var(--dur-fast) var(--ease-out);
}
.step__summary:hover .step__toggle{color:var(--pw-accent);}
.step[open] .step__toggle::after{transform:rotate(45deg);}

.step__bonos{padding-bottom:var(--sp-5);}
.bonos-list{display:grid;gap:var(--sp-1);}
.bonos-list__row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:baseline;gap:var(--sp-4);
  padding-block:var(--sp-2);
  border-top:1px solid var(--pw-line);
}
@media (max-width:480px){
  .bonos-list__row{
    gap:var(--sp-2) var(--sp-3);
  }
}
.bonos-list__n{font-weight:500;color:var(--pw-ink);}
.bonos-list__unit{
  color:var(--pw-ink-70);font-size:var(--fs-small);text-align:right;
  font-variant-numeric:tabular-nums;
}
.bonos-list__total{
  min-width:6ch;text-align:right;font-weight:500;color:var(--pw-primary);
  font-variant-numeric:tabular-nums;
}

/* ----- 02 · A domicilio: panel dividido con los bloques desplazados -----
   Composición deliberadamente distinta a la de la sección presencial. */
.split{display:grid;}
@media (min-width:860px){
  .split{grid-template-columns:1fr 1fr;}
}

.split__panel{
  padding:var(--sp-8) 0 var(--sp-8);
  border-top:2px solid var(--pw-primary);
}
.split__panel + .split__panel{border-top-color:var(--pw-accent);}

@media (min-width:860px){
  .split__panel{padding-right:var(--sp-8);}
  /* medianera compartida + desplazamiento vertical del segundo bloque */
  .split__panel--offset{
    padding-left:var(--sp-8);padding-right:0;
    border-left:1px solid var(--pw-line);
    margin-top:var(--sp-12);
  }
}

.split__title{font-size:var(--fs-h3);font-weight:500;max-width:16ch;}
.split__duration{display:flex;align-items:baseline;gap:.4rem;margin-top:var(--sp-6);}
.split__num{
  font-size:clamp(2.25rem,6vw,3rem);
  line-height:.85;font-weight:500;letter-spacing:-.02em;
  color:var(--pw-primary);
}
.split__unit{font-size:var(--fs-small);color:var(--pw-ink-70);}
.split__price{
  margin-top:var(--sp-4);
  font-size:clamp(1.75rem,4.5vw,2.5rem);
  line-height:1;font-weight:500;letter-spacing:-.02em;
  color:var(--pw-ink);
}

/* ----- Condiciones del desplazamiento -----
   Misma banda de fondo que la sección anterior y conector vertical: se lee
   como el pie de las tarifas a domicilio. */
.travel{padding-block:0 var(--sp-24);background:var(--pw-mist);}
.travel__inner{position:relative;max-width:64ch;padding-top:var(--sp-16);}
.travel__inner::before{
  content:"";position:absolute;top:0;left:0;
  width:1px;height:var(--sp-10);
  background:var(--pw-accent);
}
.travel__title{font-size:var(--fs-h3);}
.travel__text{margin-top:var(--sp-5);color:var(--pw-ink-70);font-size:var(--fs-lead);}

.travel__highlights{display:grid;gap:var(--sp-5);margin-top:var(--sp-10);}
@media (min-width:640px){ .travel__highlights{grid-template-columns:1fr 1fr;gap:var(--sp-8);} }
.travel__highlight{
  padding-top:var(--sp-4);
  border-top:1px solid var(--pw-line);
  color:var(--pw-ink-70);
}
.travel__num{
  display:block;
  font-size:clamp(1.5rem,4vw,2rem);
  line-height:1.1;font-weight:500;letter-spacing:-.02em;
  color:var(--pw-primary);
  font-variant-numeric:tabular-nums;
}
.conditions--travel{margin-top:var(--sp-10);max-width:60ch;}

/* ----- Condiciones en acordeón (clínica y domicilio) -----
   Mismo lenguaje +/− que .faq__q, a escala reducida, para no competir con
   los precios que van encima. Dos patrones conviven a propósito: en clínica
   (Fase 5) cada condición sigue siendo un <details>/<summary> nativo, sin
   tocar; en domicilio (Fase 6) es <button aria-expanded aria-controls>
   real, así que .cond__q reutiliza estos mismos estilos sobre ambas
   etiquetas y las reglas de icono cubren [open] (details) y
   [aria-expanded="true"] (button). */
.conditions{display:grid;}
.cond__item{border-bottom:1px solid var(--pw-line);}
.cond__item:first-child{border-top:1px solid var(--pw-line);}
.cond__item-heading{margin:0;font:inherit;}
.cond__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);
  width:100%;
  padding-block:var(--sp-4);
  background:none;border:none;margin:0;
  font-size:var(--fs-small);font-weight:600;letter-spacing:.01em;text-align:left;
  color:var(--pw-ink);
  cursor:pointer;list-style:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.cond__q::-webkit-details-marker{display:none;}
.cond__q:hover{color:var(--pw-primary);}
.cond__q::after{
  content:"";flex:none;
  width:9px;height:9px;margin-top:.3em;
  background:
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/100% 1px no-repeat,
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/1px 100% no-repeat;
  transition:transform var(--dur-fast) var(--ease-out);
}
.cond__item[open] .cond__q::after,
.cond__q[aria-expanded="true"]::after{transform:rotate(90deg);background-size:100% 1px,0 0;}
.cond__q:focus-visible{outline:2px solid var(--pw-accent);outline-offset:3px;}
.cond__a{padding-bottom:var(--sp-5);color:var(--pw-ink-70);font-size:var(--fs-small);max-width:60ch;}
.cond__a p + p{margin-top:var(--sp-3);}

/* ----- Bloque de ayuda ----- */
.help{padding-block:var(--space-section-dense);background:var(--pw-white);}
.help__inner{max-width:54ch;}
.help__title{font-size:var(--fs-h2);}
.help__text{margin-top:var(--sp-6);color:var(--pw-ink-70);font-size:var(--fs-lead);}
.help__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8);}

/* ----- Preguntas frecuentes -----
   Acordeón con <button aria-expanded>: reset de estilos nativos de botón
   para heredar la misma composición visual que antes tenía <summary>. */
.faq{padding-block:var(--space-section-dense);background:var(--pw-mist);}
.faq__inner{display:grid;gap:var(--sp-10);}
@media (min-width:960px){
  .faq__inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-16);align-items:start;}
}
.faq .section-heading{font-size:clamp(1.85rem,2.7vw,2.45rem);line-height:1.2;}
.faq__list{display:grid;}
.faq__item{border-bottom:1px solid var(--pw-line);}
.faq__item:first-child{border-top:1px solid var(--pw-line);}
.faq__item-heading{margin:0;font:inherit;}

.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);
  width:100%;
  padding-block:var(--sp-5);
  background:none;border:none;margin:0;
  font:inherit;font-weight:500;text-align:left;
  color:var(--pw-ink);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.faq__q:hover{color:var(--pw-primary);}
.faq__q::after{
  content:"";flex:none;
  width:11px;height:11px;margin-top:.42em;
  background:
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/100% 1px no-repeat,
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/1px 100% no-repeat;
  transition:transform var(--dur-fast) var(--ease-out);
}
.faq__q[aria-expanded="true"]::after{transform:rotate(90deg);background-size:100% 1px,0 0;}
.faq__q:focus-visible{outline:2px solid var(--pw-accent);outline-offset:3px;}
.faq__a{padding-bottom:var(--sp-6);color:var(--pw-ink-70);max-width:62ch;}

/* ----- CTA final: el eyebrow necesita centrarse en esta página ----- */
.page-tarifas .cta-final__inner .eyebrow{justify-content:center;}
.page-tarifas .cta-final{
  padding-bottom:var(--sp-16);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(38,152,136,.28) 0%, rgba(38,152,136,0) 60%),
    var(--pw-primary-900);
}
/* La franja final ya cierra en verde oscuro igual que el footer: se acorta el
   colchón combinado (cta-final + footer) para que la transición no se lea
   como una gran banda vacía sin contenido. */
.page-tarifas .site-footer{padding-top:var(--sp-10);}

/* ==========================================================================
   FASE 6 — Rediseño editorial de Tarifas
   Hero inmersivo, puertas de área a mayor escala, ruptura oscura en
   "a domicilio" y bloque de ayuda con imagen. Sigue el mismo criterio de
   scoping que el resto del archivo: todo lo que toca .page-hero, .help,
   .rates--home o .btn va prefijado con .page-tarifas.
   ========================================================================== */

/* ----- Hero inmersivo -----
   FASE 7B: min-height sube de 74vh a 82vh y el scrim superior se aclara
   ligeramente (antes ocultaba parte de la foto reutilizada de la Home; con
   una foto exclusiva de Tarifas conviene que se lea mejor). El texto sigue
   protegido por text-shadow + el degradado lateral de .page-hero__media::after. */
.page-tarifas .page-hero--media{
  min-height:82vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--pw-primary-900);
}
@media (max-width:639px){
  /* En móvil evitamos un hero excesivamente alto: cabe el titular, el
     contexto y el CTA sin pantalla vacía. */
  .page-tarifas .page-hero--media{min-height:0;padding-top:6.5rem;}
}
.page-tarifas .page-hero__media{
  position:absolute;inset:0;
}
.page-tarifas .page-hero__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.04);
  transition:transform .6s var(--ease-out);
}
.page-tarifas .page-hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(18,32,29,.4) 0%, rgba(18,32,29,.24) 40%, rgba(18,32,29,.86) 100%),
    linear-gradient(90deg, rgba(18,60,55,.4) 0%, rgba(18,60,55,0) 55%);
}
/* Red de seguridad de legibilidad: el título y el texto se apoyan en el
   scrim de arriba, pero una sombra sutil evita que una zona clara de la
   foto (p. ej. la pared del fondo) comprometa el contraste del texto
   blanco, sin necesidad de oscurecer más la fotografía en sí. */
.page-tarifas .page-hero--media .page-hero__title,
.page-tarifas .page-hero--media .page-hero__text p{
  text-shadow:0 2px 10px rgba(10,20,18,.45);
}
.page-tarifas .page-hero--media .page-hero__inner{
  position:relative;z-index:1;
  padding-block:clamp(9rem,20vh,12rem) clamp(4.5rem,9vh,6rem);
  width:100%;
}
@media (max-width:639px){
  /* FASE 4: en el hero compacto de móvil (min-height:0, ver arriba) este
     padding-block heredado del hero de escritorio (hasta 20vh arriba) se
     suma al padding-top del contenedor y empuja el CTA secundario hasta
     quedar tapado por el book-bar fijo inferior. Se sustituye por
     valores fijos y moderados propios de este layout. */
  .page-tarifas .page-hero--media .page-hero__inner{
    padding-block:0 2.5rem;
  }
}

/* Indicación de scroll discreta. Puramente decorativa: no añade destino
   nuevo (ya replica el CTA secundario "Necesito ayuda para elegir"), así
   que queda fuera del foco de teclado y oculta a lectores de pantalla. */
.page-tarifas .page-hero__scroll-cue{
  position:absolute;left:50%;bottom:var(--sp-8);
  transform:translateX(-50%);
  width:1px;height:var(--sp-12);
  display:none;
}
.page-tarifas .page-hero__scroll-cue span{
  display:block;width:100%;height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation:pw-scroll-cue 1.8s var(--ease-out) infinite;
}
@media (min-width:860px){ .page-tarifas .page-hero__scroll-cue{display:block;} }
@keyframes pw-scroll-cue{
  0%{transform:scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .page-tarifas .page-hero__media img{transition:none;transform:none;}
  .page-tarifas .page-hero__scroll-cue span{animation:none;opacity:.5;}
}

/* ----- "Tarifa en clínica compartida por las cuatro áreas" -----
   Chip con icono + texto fijo en el HTML (Fase 2): no cambia al elegir un
   área en #areas, para no sugerir que el precio varía. Coherente
   visualmente con la insignia "Seleccionada" de .area-tile__badge. */
.page-tarifas .rates__selected{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:var(--sp-5);
  padding:.4rem .8rem;
  border-radius:999px;
  background:var(--pw-mist);
  font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--pw-primary);
}
.page-tarifas .rates__selected svg{flex:none;}
.page-tarifas .rates--home .rates__selected{background:rgba(255,255,255,.1);color:#8fd9c9;}

/* ----- Zona sticky en las dos secciones de tarifas -----
   El bloque de contexto (eyebrow, título, precio de entrada más próximo)
   se queda anclado mientras se recorren bonos y condiciones al lado. */
@media (min-width:960px){
  .page-tarifas .rates__head{position:sticky;top:6rem;align-self:start;}
}

/* ----- "A domicilio": ruptura oscura -----
   Antes compartía el mismo --pw-mist que "En la clínica" con apenas
   contraste; ahora es un cambio de fondo real que marca el paso de
   sesiones presenciales a desplazamiento, con un motivo lineal propio
   (ver comentario en tarifas.html). FASE 7 añade además una fotografía
   con licencia verificada (ver ASSET_SOURCES.md); el motivo lineal se
   mantiene como capa decorativa detrás del texto. */
.page-tarifas .rates--home{
  position:relative;
  overflow:hidden;
  background:var(--pw-primary-900);
  color:var(--pw-white);
}
.page-tarifas .rates--home__motif{
  position:absolute;right:-4%;bottom:-6%;z-index:0;
  width:min(46vw,26rem);height:auto;
  color:rgba(143,217,201,.14);
  pointer-events:none;
}
.page-tarifas .rates--home .rates__inner{position:relative;z-index:1;}
.page-tarifas .rates--home .rates__lead,
.page-tarifas .rates--home .rates__note{color:rgba(255,255,255,.72);}
.page-tarifas .rates--home .split__panel{border-top-color:#8fd9c9;}
.page-tarifas .rates--home .split__panel + .split__panel{border-top-color:var(--pw-accent);}
.page-tarifas .rates--home .split__panel--offset{border-left-color:var(--pw-line-on-dark);}
.page-tarifas .rates--home .split__title{color:var(--pw-white);}
.page-tarifas .rates--home .split__num{color:#8fd9c9;}
.page-tarifas .rates--home .split__unit{color:rgba(255,255,255,.65);}
.page-tarifas .rates--home .split__price{color:var(--pw-white);}
@media (max-width:1099px){
  /* El motivo queda detrás del contenido en pantallas estrechas: se
     atenúa aún más para no interferir con la lectura de los precios. */
  .page-tarifas .rates--home__motif{opacity:.6;}
}

/* ----- Fotografía de "A domicilio" (FASE 7) -----
   Puramente ambiental (aria-hidden, sin texto superpuesto), así que no
   lleva velo de degradado ni grano: aquí no cumplirían ninguna función
   visual. Solo reencuadre + la misma gradación cálida y unificadora que
   el resto de fotografía de la página. */
.page-tarifas .rates__portrait{
  margin-top:var(--sp-8);
  /* FASE 7C: foto propia del cliente (hombre con camilla de tratamiento) —
     aspect-ratio ajustado a las dimensiones reales del archivo, igual que
     el propio recorte de origen, para que se vea el hombre completo y la
     camilla sin recortar nada por los lados. */
  aspect-ratio:1122/1402;
  overflow:hidden;
  border-radius:2px;
}
.page-tarifas .rates__portrait img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}
@media (min-width:960px){
  .page-tarifas .rates__portrait{margin-top:var(--sp-10);}
}

/* ----- Bloque de ayuda: dos columnas con imagen -----
   FASE 6: banner de texto centrado → dos columnas con imagen.
   FASE 7B: se retiró la fotografía (repetía local-lounge.jpg) por un
   grafismo tipográfico sin foto.
   FASE 7C: vuelve a llevar fotografía, esta vez propia del cliente (ver
   ASSET_SOURCES.md), distinta de las cuatro tarjetas de #areas. */
.page-tarifas .help{padding-block:0;background:var(--pw-white);}
.page-tarifas .help__inner{
  display:grid;gap:var(--sp-10);
  padding-block:var(--sp-16);
  max-width:var(--container);
}
@media (min-width:860px){
  .page-tarifas .help__inner{
    grid-template-columns:.9fr 1.1fr;
    gap:var(--sp-16);
    align-items:center;
    padding-block:var(--space-section-dense);
  }
}
.page-tarifas .help__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
}
@media (min-width:860px){
  .page-tarifas .help__media{aspect-ratio:3/4;}
}
.page-tarifas .help__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}
@media (max-width:639px){
  .page-tarifas .help__media img{object-position:center 15%;}
}
.page-tarifas .help__body{max-width:44ch;}
.page-tarifas .help__eyebrow{margin-bottom:var(--sp-4);}
.page-tarifas .help .help__title{font-size:var(--fs-h2);}
.page-tarifas .help .help__text{margin-top:var(--sp-6);color:var(--pw-ink-70);font-size:var(--fs-lead);}
.page-tarifas .help .help__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8);}
/* Enlace terciario: mismo destino que antes ("Ver todos los servicios"),
   pero ya no compite en peso con el CTA de reserva ni con WhatsApp. */
.page-tarifas .help__link{
  display:inline-block;margin-top:var(--sp-5);
  font-size:var(--fs-small);font-weight:600;
  color:var(--pw-primary);
  text-decoration:underline;text-underline-offset:.2em;
}
.page-tarifas .help__link:hover{color:var(--pw-accent);}

/* ==========================================================================
   Página de área de servicio (Fisioterapia y futuras: Wellness/Fuerza/Pilates)
   Componentes nuevos para src/pages/servicios/*.html. Reutilizan tokens,
   .container, .eyebrow, .section-eyebrow/-heading/-lead y .first-visit__steps
   ya existentes; solo se define aquí lo que no tenía equivalente reutilizable.
   ========================================================================== */

/* Corrección AA: mismo criterio ya aplicado en .page-home y .page-servicios
   para los números de .first-visit__step (--pw-accent no llega a AA).
   FASE 5 (Stretching): .page-stretching reutiliza exactamente el mismo
   criterio, así que se añade al mismo selector en vez de duplicar la regla. */
.page-physio .first-visit__step::before,
.page-stretching .first-visit__step::before{color:var(--pw-primary);}

/* ----- Hero de Fisioterapia: composición editorial a dos columnas -----
   FASE 8. El .page-hero base (§19) es de un solo bloque de texto sin foto;
   aquí se añade una variante (.page-hero--split) solo para esta página:
   contenido a la izquierda, fotografía a la derecha en escritorio, con
   menos altura/espacio vacío que el hero base. En móvil el orden natural
   del DOM ya coloca el contenido antes que la foto, sin necesidad de
   "order". Mismo tratamiento visual (aspect-ratio 4/3→3/4, filtro) que
   .service-photo más abajo, para no introducir un lenguaje visual nuevo.
   FASE 5 (Stretching): misma página de servicio individual, mismo hero
   partido — se añade .page-stretching a los mismos selectores en vez de
   redefinir el componente. */
.page-physio .page-hero__inner,
.page-stretching .page-hero__inner{
  padding-block:clamp(6rem,12vh,8rem) clamp(3rem,7vh,4.5rem);
}
.page-physio .page-hero__grid,
.page-stretching .page-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10);}
.page-physio .page-hero__text,
.page-stretching .page-hero__text{margin-block:var(--sp-6) var(--sp-8);}
.page-physio .page-hero__photo,
.page-stretching .page-hero__photo{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
}
.page-physio .page-hero__photo img,
.page-stretching .page-hero__photo img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}
.page-physio .page-hero__photo img{object-position:60% center;}
/* FASE 7: fotografía real de Stretching, de retrato (0.8), muy distinta de
   la de Fisioterapia: en el hero móvil (4/3) el recorte es vertical, así
   que se prioriza el tercio superior (pierna elevada + manos de la
   profesional) sobre el centro geométrico. */
.page-stretching .page-hero__photo img{object-position:center 26%;}
@media (min-width:860px){
  .page-physio .page-hero__grid,
  .page-stretching .page-hero__grid{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:var(--sp-16);
    align-items:center;
  }
  .page-physio .page-hero__photo,
  .page-stretching .page-hero__photo{aspect-ratio:3/4;}
  .page-physio .page-hero__photo img{object-position:65% center;}
  /* En 3/4 el recorte pasa a ser horizontal y mínimo (0.8 vs 0.75): basta
     un ligero desplazamiento a la izquierda del centro. */
  .page-stretching .page-hero__photo img{object-position:42% center;}
}

/* ----- "Cuándo empezar por aquí": texto + fotografía de referencia -----
   Bloque asimétrico a dos columnas, no una tarjeta ni un hero: en móvil la
   imagen va primero como apoyo visual, luego el texto. */
.service-context{padding-block:var(--space-section);background:var(--pw-white);}
/* Fisioterapia: el texto ahora es un único párrafo breve (antes eran dos),
   así que el bloque queda con más aire del necesario entre el hero y la
   siguiente sección. Se reduce el padding-block ~17% respecto a la base
   (var(--sp-24) = 6rem) en esta página, conservando el mismo ritmo editorial y el
   resto de reglas compartidas de .service-context. En Stretching, tras eliminar la
   antigua franja de ticker, el padding inferior se calibra a var(--sp-12) para que
   la transición a "¿Encaja contigo?" sea fluida y sin vacío excesivo. */
.page-physio .service-context{padding-block:5rem;}
.page-stretching .service-context{padding-top:5rem;padding-bottom:var(--sp-12);}
.service-context__grid{display:grid;gap:var(--sp-12);}
.service-context__text .area-block__text{max-width:56ch;}
.service-photo{
  order:-1;
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
}
.service-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}
/* FASE 7: fotografía real de Stretching (mismo archivo que el hero, otro
   recorte). En 4/3 móvil el recorte es vertical: se prioriza el tercio
   superior, igual que en el hero de esta misma página. */
.page-stretching .service-photo img{object-position:center 24%;}
@media (min-width:860px){
  .service-context__grid{
    grid-template-columns:1.1fr .9fr;
    gap:var(--sp-16);
    align-items:center;
  }
  .service-photo{order:0;aspect-ratio:3/4;}
  /* En 3/4 el recorte pasa a horizontal y mínimo (0.8 vs 0.75). */
  .page-stretching .service-photo img{object-position:47% center;}
}

/* ----- Subespecialidades: lista editorial, no cuadrícula de tarjetas -----
   Líneas separadas por borde, numeración tipográfica en vez de iconos;
   en pantallas grandes se reparten en dos columnas manteniendo el orden
   de lectura por filas.
   FASE 3 (pulido, 2026): el padding-block reducido (sp-12) venía de
   cuando esta sección compartía la misma franja --pw-mist con
   .problem-ticker y .area-relation, ambas ya eliminadas de esta página
   (FASE 10). Sin esas franjas vecinas, sp-12 quedaba corto para el
   contenido actual (banner con foto + mapa de 6 filas) frente a sus
   vecinas reales (.process, 96px): se iguala a sp-24 para mantener el
   mismo ritmo vertical. */
.specialty-list{padding-block:var(--space-section);background:var(--pw-mist);}
.specialty-list__head{max-width:60ch;}
.specialty-list__items{
  list-style:none;margin:var(--sp-12) 0 0;padding:0;
  display:grid;
}
.specialty-item{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--sp-8);
  row-gap:var(--sp-2);
  padding-block:var(--sp-6);
  border-top:1px solid var(--pw-line);
}
.specialty-list__items li:last-child{border-bottom:1px solid var(--pw-line);}
.specialty-item__num{
  grid-row:1 / 3;
  font-family:var(--font-base);
  font-size:var(--fs-label);
  color:var(--pw-primary);
  padding-top:.2em;
}
.specialty-item__title{
  grid-column:2;
  font-size:1.05rem;
  font-weight:600;
  color:var(--pw-ink);
}
.specialty-item__desc{
  grid-column:2;
  color:var(--pw-ink-70);
  max-width:52ch;
}
@media (min-width:640px){
  .specialty-list__items{
    grid-template-columns:1fr 1fr;
    column-gap:var(--sp-16);
  }
}
@media (min-width:860px){
  .specialty-item{padding-block:var(--sp-8);}
}

/* Micro-reveal por ámbito: reutiliza [data-reveal]/.is-visible tal cual
   (misma IntersectionObserver, mismo fallback de 2.5s, mismo <noscript>
   global que fuerza opacity:1 en todo [data-reveal]), solo con un
   translateY menor (14px en vez de 28px) para que sea casi imperceptible.
   Num, título y texto quedan como observados independientes: cada uno
   dispara su propia entrada al cruzar el viewport, con --i (fraccionario,
   0/.4/.8) como único desfase entre los tres — nunca bounce/elastic/zoom,
   mismos easings de marca que el resto del sitio. */
.specialty-item__num[data-reveal],
.specialty-item__title[data-reveal],
.specialty-item__desc[data-reveal]{
  transform:translateY(14px);
}
.specialty-item__num[data-reveal]{
  color:var(--pw-ink-50);
  transition:opacity var(--dur-slow) var(--ease-emphatic), transform var(--dur-slow) var(--ease-emphatic), color var(--dur-slow) var(--ease-emphatic);
}
.specialty-item__num[data-reveal].is-visible{color:var(--pw-primary);}

/* ----- Relación entre las áreas -----
   Bloque breve de una sola columna de texto, deliberadamente ligero
   (no es un componente de tarjetas ni de lista con enlaces): un párrafo
   corto y, como mucho, un enlace a una ruta real ya existente. FASE 1:
   deja de ser una sección propia en blanco y pasa a funcionar como el
   cierre de "Ámbitos en los que podemos ayudarte": misma --pw-mist que
   .specialty-list, sin borde entre ambas (la línea bajo el último ámbito,
   .specialty-list__items li:last-child, ya marca el eje compartido) y
   con muy poco padding superior. El padding inferior, más generoso,
   introduce el cambio real de fondo (a blanco) de "Cómo es el proceso". */
.area-relation{padding-block:var(--sp-12) var(--sp-8);background:var(--pw-mist);}
.area-relation__inner{max-width:56ch;}
.area-relation__text{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  margin:0 0 var(--sp-6);
}
.area-relation__cta{
  display:inline-block;
  font-weight:600;
  color:var(--pw-primary);
  text-decoration:none;
}
.area-relation__cta:hover,.area-relation__cta:focus-visible{text-decoration:underline;}

/* ----- Cómo es el proceso: "service-process" -----
   FASE 2: componente reutilizable pensado para las futuras service pages
   (Bienestar, Fuerza, Pilates Reformer, Stretching), no exclusivo de
   Fisioterapia. Misma familia visual que .first-visit (Home) —columna
   sticky a la izquierda + pasos a la derecha con línea/punto—, pero con
   nombres genéricos (service-process__*) y sin cantidad de pasos fija:
   el JS (serviceProcessTimeline) detecta [data-sp-steps]/[data-sp-step]
   dinámicamente, así que esto funciona igual con 3, 5 o 6 pasos.

   Mejora progresiva idéntica a .first-visit: sin JS (o con
   prefers-reduced-motion) los pasos se quedan estáticos, todos visibles,
   con la línea/punto en tono neutro — nunca hay contenido esperando una
   animación que no va a llegar. El sticky de la introducción es CSS puro
   (position:sticky) y solo se activa a partir de 860px; por debajo, todo
   fluye en una sola columna sin forzar ningún comportamiento de scroll. */
.process{padding-block:var(--space-section);background:var(--pw-white);}
.service-process__grid{display:grid;gap:var(--sp-10);}
.service-process__intro{max-width:60ch;}
@media (min-width:860px){
  .service-process__grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-24);align-items:start;}
  .service-process__intro{position:sticky;top:var(--sp-sticky-top,6rem);align-self:start;}
}

.service-process__steps{display:grid;list-style:none;margin:0;padding:0;}
.service-process__step{
  display:block;
  position:relative;
  padding-block:var(--sp-8);
  padding-left:2.75rem;
}

.service-process__marker{
  position:absolute;
  left:0;top:0;bottom:0;
  width:1.5rem;
  display:flex;justify-content:center;
}
.service-process__marker::before{
  content:'';
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:var(--pw-line);
  transform:translateX(-50%);
  transition:background var(--dur-med) var(--ease-out);
}
.service-process__step:first-child .service-process__marker::before{top:calc(var(--sp-8) + .78rem);}
.service-process__step:last-child .service-process__marker::before{bottom:calc(var(--sp-8) + .78rem);}

.service-process__dot{
  position:absolute;
  left:50%;top:calc(var(--sp-8) + .78rem);
  transform:translate(-50%,-50%);
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--pw-white);
  border:2px solid var(--pw-line);
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.service-process__body{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-4);}
.service-process__number{
  flex:0 0 auto;
  font-size:.85rem;font-weight:600;letter-spacing:.06em;
  color:var(--pw-primary);
  font-variant-numeric:tabular-nums;
}
.service-process__text{flex:1 1 12rem;min-width:0;margin:0;font-size:1.05rem;line-height:1.55;color:var(--pw-ink);}

/* Estados narrativos — solo con .is-process-active (JS + sin motion reducido) */
.service-process.is-process-active .service-process__step{
  opacity:.4;
  transform:translateY(10px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.service-process.is-process-active .service-process__step.is-active,
.service-process.is-process-active .service-process__step.is-done{
  opacity:1;
  transform:translateY(0);
}
.service-process.is-process-active .service-process__step.is-done{opacity:.75;}

.service-process.is-process-active .service-process__step.is-active .service-process__marker::before,
.service-process.is-process-active .service-process__step.is-done .service-process__marker::before{
  background:var(--pw-primary);
}
.service-process.is-process-active .service-process__step.is-active .service-process__dot{
  background:var(--pw-primary);border-color:var(--pw-primary);
  transform:translate(-50%,-50%) scale(1.35);
  box-shadow:0 0 0 4px rgba(35,115,105,.15);
}
.service-process.is-process-active .service-process__step.is-done .service-process__dot{
  background:var(--pw-primary);border-color:var(--pw-primary);
}

/* Por debajo de 860px: sin sticky, espaciado más compacto para evitar un
   scroll de la sección desproporcionado en móvil/tablet. */
@media (max-width:859px){
  .service-process__step{padding-block:var(--sp-5);padding-left:2.25rem;}
  .service-process__step:first-child .service-process__marker::before{top:calc(var(--sp-5) + .78rem);}
  .service-process__step:last-child .service-process__marker::before{bottom:calc(var(--sp-5) + .78rem);}
  .service-process__dot{top:calc(var(--sp-5) + .78rem);}
}

/* ----- Fisioterapia a domicilio + enlace a tarifas -----
   Mismo fondo y ritmo que el bloque equivalente de Servicios; separa el
   aviso de "a domicilio" del enlace general a tarifas sin usar tarjetas. */
/* ----- "service-feature": módulo reutilizable de característica destacada -----
   FASE 3: generaliza el antiguo .home-care-note ("Fisioterapia a
   domicilio") en un bloque que cualquier futura página de servicio pueda
   usar para presentar una modalidad, tecnología o característica
   diferencial — con eyebrow opcional, título, texto, CTA opcional y
   fotografía opcional. Sin cards, iconos ni interacciones nuevas: sigue
   siendo una franja editorial simple.

   Caso base (sin fotografía, el único usado hoy en "Fisioterapia a
   domicilio"): franja flex texto/acciones, idéntica en valores a la
   antigua .home-care-note (mismo fondo --pw-mist, mismo padding, mismo
   punto de quiebre a 720px) — ningún cambio visual respecto a antes.

   Variante con fotografía (.service-feature--with-photo, no usada
   todavía en esta página): __grid pasa a grid con áreas nombradas para
   no depender de un envoltorio extra ni de auto-placement frágil; la
   fotografía reutiliza los mismos valores (aspect-ratio 4/3→3/4 en
   860px, radio, filtro) que .service-context/.service-photo, para que el
   tratamiento fotográfico sea consistente en toda la página. */
.service-feature{padding-block:var(--space-section);background:var(--pw-mist);border-block:1px solid var(--pw-line);}
.service-feature__grid{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-8);
}
@media (min-width:720px){
  .service-feature__grid{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-10);}
}
.service-feature__text{max-width:52ch;}
.service-feature__eyebrow{margin-bottom:var(--sp-3);}
.service-feature__title{margin-top:0;font-size:var(--fs-h3);}
.service-feature__desc{margin-top:var(--sp-4);color:var(--pw-ink-70);line-height:1.6;}
.service-feature__desc + .service-feature__desc{margin-top:var(--sp-3);}

.service-feature__actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);
  flex-shrink:0;
}
@media (min-width:720px){
  .service-feature__actions{flex-direction:row;align-items:center;gap:var(--sp-8);}
}
.service-feature__link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding-block:.35rem;
  font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pw-primary);
  border-bottom:1px solid currentColor;
  transition:color var(--dur-fast) var(--ease-out);
}
.service-feature__link:hover{color:var(--pw-primary-600);}
.service-feature__arrow{transition:transform var(--dur-fast) var(--ease-out);}
.service-feature__link:hover .service-feature__arrow,
.service-feature__link:focus-visible .service-feature__arrow{transform:translateX(4px);}

/* Variante con fotografía: opcional, preparada para cuando un futuro
   service-feature la necesite (texto corto/largo, con/sin CTA, foto
   vertical/horizontal ya resueltos por el mismo aspect-ratio fluido que
   .service-photo). Áreas nombradas en vez de reordenar con order:
   más explícito y no depende de que texto/acciones compartan wrapper.

   Orden móvil deliberadamente "texto → foto → acciones", NO calcado del
   "foto primero" de .service-context/.service-photo: en un bloque de
   característica/modalidad puntual (a diferencia de un bloque "cuándo
   empezar" con foto de referencia grande) la lectura natural es entender
   primero de qué se trata y solo después ver la foto de apoyo. */
/* FASE 2 (pulido): antes sin borde, tocando directamente otras dos
   secciones también en blanco (Servicios y modalidades, Reseñas reales) sin
   ninguna línea de separación entre las tres — mismo criterio de línea fina
   que ya usa .service-menu justo encima, para marcar el cambio de sección
   sin romper el fondo blanco compartido. */
.service-feature--with-photo{background:var(--pw-white);border-block:none;border-top:1px solid var(--pw-line);}
.service-feature--with-photo .service-feature__grid{
  display:grid;
  grid-template-areas:"text" "photo" "actions";
  gap:var(--sp-8);
  align-items:start;
}
.service-feature--with-photo .service-feature__text{grid-area:text;max-width:none;}
.service-feature--with-photo .service-feature__actions{grid-area:actions;}
.service-feature__photo{
  grid-area:photo;
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
}
.service-feature__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}
@media (min-width:860px){
  .service-feature--with-photo .service-feature__grid{
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:"text photo" "actions photo";
    /* FASE 3 (pulido): antes sp-4 (16px) de separación vertical entre el
       texto y los enlaces de acción — quedaban casi pegados. sp-8 (32px)
       da el aire "generoso" que pide la jerarquía antes de un CTA, sin
       tocar el gap horizontal con la fotografía (sp-16). */
    gap:var(--sp-8) var(--sp-16);
    align-items:center;
  }
  .service-feature__photo{aspect-ratio:3/4;}
}

/* Variante preparada (sin uso todavía) para invertir la fotografía al
   lado izquierdo sin tocar el HTML, mismo criterio que .area-block--reverse. */
@media (min-width:860px){
  .service-feature--photo-left .service-feature__grid{
    grid-template-columns:.9fr 1.1fr;
    grid-template-areas:"photo text" "photo actions";
  }
}

/* ========== FOCUS STATES (Accesibilidad) ========== */

/* Botones primarios */
.btn:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
  border-radius:2px;
}

/* Enlaces (.service-feature__link, .area-relation__cta) */
a:not(.booking-panel__help):focus-visible,
.service-feature__link:focus-visible,
.area-relation__cta:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}

/* Nav items */
.nav-item__btn:focus-visible,
.mobile-nav__link:focus-visible{
  outline:2px dashed var(--pw-accent);
  outline-offset:4px;
}

/* Aumentar touch target en móvil */
@media (max-width:768px){
  .btn{
    min-height:44px;
    min-width:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  a[class*="link"]{
    min-height:44px;
  }
}

.home-care-note__link:hover{color:var(--pw-primary-600);}
.home-care-note__arrow{transition:transform var(--dur-fast) var(--ease-out);}
.home-care-note__link:hover .home-care-note__arrow,
.home-care-note__link:focus-visible .home-care-note__arrow{transform:translateX(4px);}

/* ==========================================================================
   25. MÉTODO MARSHALL — PÁGINA DEDICADA (.page-metodo) — FASE 2
   Direcció creativa avançada: Hero cinematogràfic amb frame expansiu,
   integració de les disciplines reals (fisioteràpia, força, pilates, stretching, benestar),
   transicions connectades entre escenes, moments WOW i responsive d'alçada optimitzat.
   ========================================================================== */

/* ---------- 1. Fil conductor bio-cinètic (Eix lateral amb waypoints) ---------- */
.method-thread-track{
  position:fixed;
  top:0;
  left:max(1.5rem,calc((100vw - var(--container)) / 2 - 2.8rem));
  width:3px;
  height:100vh;
  height:100dvh;
  pointer-events:none;
  z-index:4;
  opacity:0;
  transition:opacity var(--dur-med) var(--ease-out);
}
.page-metodo.has-scrolled .method-thread-track{
  opacity:1;
}
.method-thread-spine{
  position:relative;
  width:100%;
  height:100%;
  background:rgba(18,32,29,.08);
}
.method-thread-progress-bar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0%;
  background:var(--pw-primary);
  transition:height .1s linear;
}
.method-thread-pulse{
  position:absolute;
  top:0%;
  left:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--pw-primary);
  box-shadow:0 0 12px var(--pw-accent),0 0 4px #8fd9c9;
  transform:translate(-50%,-50%);
  transition:top .1s linear;
}
@media (max-width:1180px){
  .method-thread-track{display:none;}
}

/* ---------- 2. Botó outline sobre fons clar ---------- */
.btn--outline-dark{
  border:1.5px solid var(--pw-ink-50);
  color:var(--pw-ink);
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em;
  padding:.95rem 2rem;
  border-radius:var(--radius);
  transition:all var(--dur-fast) var(--ease-out);
}
@media (max-width:480px){
  .btn--outline-dark{
    padding:.85rem 1.25rem;
    white-space:normal;
    text-align:center;
  }
}
.btn--outline-dark:hover,
.btn--outline-dark:focus-visible{
  border-color:var(--pw-primary);
  color:var(--pw-primary);
  background:rgba(35,115,105,.06);
  transform:translateY(-2px);
}

/* El header transparent (text blanc, pensat per a fotos fosques com
   el .hero de la home) queda il·legible sobre el fons blanc d'aquest
   Hero. Es força sòlid des de l'inici, només en aquesta pàgina. */
.page-metodo .site-header{
  background:var(--pw-primary-900);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.5);
}

/* ---------- 3. Hero Cinematogràfic (Fase 2) ---------- */
.method-hero{
  background:var(--pw-white);
  padding-top:clamp(6.5rem,13vh,8.8rem);
  padding-bottom:clamp(3.5rem,7vh,5.5rem);
  position:relative;
  overflow:hidden;
}
.method-hero__intro{
  max-width:var(--container);
}
.method-hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4);
  margin-bottom:var(--sp-4);
}
.method-hero__eyebrow{
  color:var(--pw-primary);
  font-weight:600;
  letter-spacing:.14em;
  margin:0;
}
.method-hero__title{
  font-size:clamp(2.75rem,6.5vw,5.5rem);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--pw-ink);
  margin:0 0 var(--space-md-lg);
}
.method-hero__statement{
  margin-bottom:var(--sp-6);
}
.method-hero__claim{
  margin:0;
  font-size:clamp(1.65rem,3.4vw,2.75rem);
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--pw-ink);
}
.method-hero__claim-line{
  display:block;
}
.method-hero__claim-line--accent{
  color:var(--pw-primary);
  font-weight:600;
}
.method-hero__bottom-row{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  margin-bottom:clamp(2rem,5vh,3.5rem);
}
@media (min-width:860px){
  .method-hero__bottom-row{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--sp-10);
  }
}
.method-hero__lead{
  font-size:var(--fs-lead);
  line-height:1.65;
  color:var(--pw-ink-70);
  max-width:54ch;
  margin:0 0 var(--sp-8);
}
.method-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-6);
  flex-shrink:0;
  margin-top:clamp(2rem,3.8vw,2.5rem);
}
.method-hero__anchor{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pw-ink-70);
  text-decoration:none;
  padding-block:.5rem;
  transition:color var(--dur-fast) var(--ease-out);
}
.method-hero__anchor svg{
  transition:transform var(--dur-fast) var(--ease-out);
}
.method-hero__anchor:hover{
  color:var(--pw-primary);
}
.method-hero__anchor:hover svg{
  transform:translateY(4px);
}

/* Layout editorial del hero (imagen + narrativa) */
.method-hero__container{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(3rem,8vw,5.5rem);
  align-items:center;
  margin-block:clamp(2rem,6vh,4rem);
}
@media (min-width:960px){
  .method-hero__container{
    grid-template-columns:1fr 1fr;
  }
}

.method-hero__visual{
  position:relative;
}
.method-hero__visual-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
  aspect-ratio:1122/1402;
  box-shadow:0 24px 54px -12px rgba(18,32,29,.12);
}
.method-hero__visual-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.method-hero__visual-caption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to top,rgba(18,60,55,.85),transparent);
  padding:var(--sp-4);
  color:var(--pw-white);
  font-size:var(--fs-small);
  text-align:center;
}

/* Control d'alçada per a MacBooks */
@media (max-height:820px) and (min-width:960px){
  .method-hero{
    padding-top:clamp(5.5rem,10vh,7rem);
    padding-bottom:var(--sp-8);
  }
  .method-hero__title{margin-bottom:var(--sp-3);}
  .method-hero__statement{margin-bottom:var(--sp-4);}
}

/* ---------- 4. Escena de transició (.method-bridge) ---------- */
.method-bridge{
  background:var(--pw-primary-900);
  color:var(--pw-white);
  padding-block:clamp(5.5rem,11vh,8.5rem);
  position:relative;
  text-align:center;
  overflow:hidden;
}
.method-bridge::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(38,152,136,.16) 0%,rgba(18,60,55,0) 70%);
  pointer-events:none;
}
.method-bridge__container{
  max-width:880px;
  position:relative;
  z-index:2;
}
.method-bridge__badge-wrap{
  margin-bottom:var(--sp-5);
}
.method-bridge__eyebrow{
  color:#8fd9c9;
  letter-spacing:.16em;
}
.method-bridge__quote{
  margin:0 0 var(--sp-7);
  padding:0;
}
.method-bridge__phrase{
  margin:0;
  font-size:clamp(1.8rem,3.6vw,2.95rem);
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.02em;
}
.method-bridge__phrase--1{
  color:rgba(255,255,255,.88);
}
.method-bridge__phrase--2{
  color:#8fd9c9;
  font-weight:600;
  margin-top:.4rem;
}
.method-bridge__desc{
  font-size:var(--fs-lead);
  line-height:1.7;
  color:rgba(255,255,255,.76);
  max-width:60ch;
  margin:0 auto var(--sp-8);
}
.method-bridge__stations{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.method-bridge__station{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#8fd9c9;
}
.method-bridge__station-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8fd9c9;
}
.method-bridge__station-sep{
  color:rgba(255,255,255,.3);
}

/* ---------- 5. Las cinco fases — Sistema (.method-system) ---------- */
.method-system{
  background:var(--pw-white);
  position:relative;
  padding-top:clamp(5.5rem,11vh,8.5rem);
}
.method-system__head{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  margin-bottom:clamp(3rem,6vh,4.5rem);
}
@media (min-width:860px){
  .method-system__head{
    grid-template-columns:1.15fr 1fr;
    gap:clamp(3rem,6vw,5.5rem);
    align-items:end;
  }
}
.method-system__head-intro .section-eyebrow{
  margin-bottom:var(--sp-3);
}
.method-system__title{
  margin:0;
  font-size:var(--fs-h2);
  line-height:1.15;
  max-width:100%;
}
.method-system__head-narrative{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.method-system__claim{
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--pw-primary);
  margin:0 0 var(--sp-3);
}
.method-system__lead{
  color:var(--pw-ink-70);
  max-width:54ch;
  margin:0;
}

/* Riel sticky de navegació de fases */
.method-system__sticky-nav{
  position:sticky;
  top:4.5rem;
  z-index:9;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--pw-line);
  transition:transform var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
/* El header se oculta (translateY) al bajar; sin este ajuste el riel
   sticky sigue reservando el hueco de 4.5rem donde estaba el header,
   dejando un espacio en blanco encima. Cuando el header está oculto,
   el riel sube hasta el borde superior. */
.site-header.is-hidden ~ main .method-system__sticky-nav{
  top:0;
}
.method-system__sticky-container{
  padding-block:.65rem;
}
.method-system__nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  overflow-x:auto;
  scrollbar-width:none;
}
.method-system__nav-list::-webkit-scrollbar{display:none;}
.method-system__nav-item{
  flex-shrink:0;
}
.method-system__nav-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .9rem;
  border-radius:2px;
  text-decoration:none;
  font-size:.875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pw-ink-70);
  transition:all var(--dur-fast) var(--ease-out);
}
.method-system__nav-num{
  font-weight:600;
  color:var(--pw-primary);
  font-size:.8rem;
}
.method-system__nav-name{
  font-weight:600;
}
.method-system__nav-item.is-active .method-system__nav-link{
  background:var(--pw-primary);
  color:#ffffff;
}
.method-system__nav-item.is-active .method-system__nav-num{
  color:#8fd9c9;
}
.method-system__nav-link:hover{
  color:var(--pw-primary);
  background:rgba(35,115,105,.06);
}
.method-system__nav-item.is-active .method-system__nav-link:hover{
  background:var(--pw-primary-600);
  color:#ffffff;
}

/* Línea de progreso continuo bajo el riel sticky (Fase 3): su ancho lo
   escribe metodoFasesSystem() en cada frame como % de las 5 fases
   recorridas; en 0% (fallback sin pin) queda invisible por altura 0. */
.method-system__nav-progress{
  height:2px;
  background:var(--pw-line);
}
.method-system__nav-progress-bar{
  display:block;
  height:100%;
  width:0%;
  background:var(--pw-primary);
}

/* Escenes individuals de fase (.method-scene) */
.method-scene{
  padding-block:clamp(4.5rem,10vh,7.5rem);
  position:relative;
}
.method-scene--01{background:var(--pw-white);}
.method-scene--02{background:var(--pw-mist);}
.method-scene--03{background:var(--pw-white);}
.method-scene--04{background:var(--pw-mist);}
.method-scene--05{background:var(--pw-white);}

.method-scene__container{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-10);
  align-items:center;
}
@media (min-width:960px){
  .method-scene__container{
    grid-template-columns:1.05fr .95fr;
    gap:clamp(3rem,6vw,5.5rem);
  }
  .method-scene__container--reverse .method-scene__content{
    order:2;
  }
  .method-scene__container--reverse .method-scene__media{
    order:1;
  }
}

.method-scene__header{
  display:flex;
  align-items:baseline;
  gap:var(--sp-4);
  margin-bottom:var(--sp-2);
}
.method-scene__num{
  font-size:clamp(3.8rem,7vw,6rem);
  line-height:.85;
  font-weight:500;
  letter-spacing:-.04em;
  color:rgba(35,115,105,.18);
  font-feature-settings:"tnum";
}
.method-scene__eyebrow{
  color:var(--pw-primary);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.12em;
  margin:0;
}
.method-scene__title{
  font-size:clamp(2rem,3.8vw,3.1rem);
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--pw-ink);
  margin:0 0 var(--sp-3);
}
.method-scene__subtitle{
  font-size:1.15rem;
  line-height:1.45;
  font-weight:500;
  color:var(--pw-primary);
  margin:0 0 var(--sp-5);
}
.method-scene__discipline-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pw-primary);
  background:rgba(35,115,105,.08);
  padding:.35rem .75rem;
  border-radius:2px;
  margin-bottom:var(--sp-5);
}
.method-scene__discipline-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pw-primary);
}
.method-scene__text{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--pw-ink-70);
  margin:0 0 var(--sp-8);
  max-width:54ch;
}
/* Sustituye las antiguas tres "pill" con caja/borde por fase (Fase 3,
   auditoría de mini-cards): microcopy editorial en lista, sin contenedores
   — misma información, priorizando composición tipográfica sobre cards. */
.method-scene__meta{
  list-style:none;
  margin:var(--sp-6) 0 0;
  padding:0;
  max-width:36rem;
}
.method-scene__meta-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-block:.55rem;
  border-top:1px solid var(--pw-line);
  font-size:.95rem;
}
.method-scene__meta-item:first-child{border-top:none;}
.method-scene__meta-label{
  font-weight:600;
  letter-spacing:.02em;
  color:var(--pw-primary);
}
.method-scene__meta-val{
  color:var(--pw-ink-70);
  text-align:right;
}

/* Columna de media de cada fase */
.method-scene__media{
  position:relative;
}
.method-scene__media-frame{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 54px -12px rgba(18,32,29,.12);
  background:var(--pw-mist);
}
.method-scene__media-frame--portrait{
  aspect-ratio:4/5;
  max-height:clamp(440px,65vh,640px);
}
.method-scene__media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease-out);
}
.method-scene__media-frame:hover img{
  transform:scale(1.025);
}

/* Targeta flotant d'informació sobre la imatge */
.method-scene__caption-card{
  position:absolute;
  bottom:var(--sp-4);
  left:var(--sp-4);
  right:var(--sp-4);
  background:rgba(18,60,55,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.75rem 1rem;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.15);
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.method-scene__caption-title{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8fd9c9;
}
.method-scene__caption-desc{
  font-size:.9rem;
  color:rgba(255,255,255,.9);
}

/* Composició multi-imatge per a les fases 04 i 05 */
.method-scene__multi-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
  align-items:center;
}
.method-scene__media-frame--duo{
  aspect-ratio:4/5;
  border-radius:16px;
  position:relative;
}
@media (min-width:960px){
  .method-scene__multi-grid > div:first-child{
    transform:translateY(-14px);
  }
  .method-scene__multi-grid > div:last-child{
    transform:translateY(14px);
  }
}
.method-scene__mini-tag{
  position:absolute;
  bottom:.75rem;
  left:.75rem;
  right:.75rem;
  background:rgba(18,60,55,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#ffffff;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem .6rem;
  border-radius:2px;
  text-align:center;
  border:1px solid rgba(255,255,255,.15);
}

/* Transició connectada (Handoff) entre escenes */
.method-scene__handoff{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  padding-top:clamp(3rem,6vh,4.5rem);
  opacity:.45;
}
.method-scene__handoff-line{
  width:60px;
  height:1px;
  background:var(--pw-line);
}
.method-scene__handoff-node{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--pw-primary);
}

/* ---------- Fase 3: escena fijada y continua de las 5 fases ----------
   JS: metodoFasesSystem() (main.js). Sin JS, con motion reducido o por
   debajo de los umbrales mínimos que decide measure() (ancho/alto de
   ventana), NUNCA se añade .is-pin-active: las 5 <article> quedan en su
   flujo normal de documento, una tras otra, con su propia fotografía y
   numeral — la experiencia de hoy, íntegra, es el fallback real (mismo
   principio que .umbral, §11). Con el pin activo, las 5 fases se apilan
   exactas unas sobre otras dentro de .method-system__stage (sticky) y
   se funden entre sí por opacidad/transform según una posición continua
   de scroll (0..4 fases), nunca por temporizador ni por clic. */
.method-system__pin-wrap{position:relative;}
.method-system__stage{position:relative;}
.method-system.is-pin-active .method-system__stage{
  position:sticky;
  top:var(--fases-pin-top,0px);
  overflow:hidden;
  background:var(--fases-bg,var(--pw-white));
}
.method-system__stage-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
}
/* Numeral editorial compartido: solo existe visualmente con el pin activo
   (en el fallback, cada fase ya muestra su propio .method-scene__num). Los
   5 dígitos quedan superpuestos (inset:0) y JS funde su opacidad según la
   distancia a la posición continua actual — mismo patrón que .umbral__num
   (§11): la cifra activa nunca "salta", se disuelve. */
.method-system__stage-num{display:none;}
.method-system.is-pin-active .method-system__stage-num{
  display:block;
  position:relative;
  flex-shrink:0;
  height:clamp(3.2rem,6vw,4.6rem);
  margin-block:var(--sp-6) var(--sp-2);
}
.method-system__stage-num-digit{
  position:absolute;
  inset:0 auto auto 0;
  font-size:clamp(3.2rem,6vw,4.6rem);
  line-height:1;
  font-weight:500;
  letter-spacing:-.03em;
  color:rgba(35,115,105,.24);
  font-feature-settings:"tnum";
  opacity:0;
}
.method-system__stage-panels{position:relative;flex:1;min-height:0;}
.method-system.is-pin-active .method-scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding-block:0;
  background:transparent!important;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.method-system.is-pin-active .method-scene__container{
  width:100%;
  max-height:100%;
}
.method-system.is-pin-active .method-scene__num,
.method-system.is-pin-active .method-scene__handoff{
  display:none;
}

/* Ajustaments per alçada reduïda a les escenes */
@media (max-height:800px) and (min-width:960px){
  .method-scene{
    padding-block:clamp(3rem,6vh,4.5rem);
  }
  .method-scene__text{margin-bottom:var(--sp-4);}
  .method-scene__media-frame--portrait{max-height:420px;}
  .method-scene__multi-grid > div:first-child{transform:none;}
  .method-scene__multi-grid > div:last-child{transform:none;}
}

/* ---------- 6. El moviment com a llenguatge visual (.method-movement) ---------- */
.method-movement{
  background:var(--pw-mist);
  border-block:1px solid var(--pw-line);
  padding-block:clamp(5.5rem,11vh,8.5rem);
}
.method-movement__container{
  max-width:var(--container);
}
.method-movement__head{
  max-width:760px;
  margin-bottom:clamp(2.5rem,5vh,4rem);
}
.method-movement__head .section-heading{
  text-wrap:balance;
}
/* Tres pilares editoriales: MOVILIDAD / CONTROL / CAPACIDAD */
.method-movement__intro{
  max-width:760px;
  margin-bottom:clamp(2rem,4vh,3.5rem);
}
.method-movement__context{
  font-size:var(--fs-lead);
  line-height:1.65;
  color:var(--pw-ink-70);
  max-width:58ch;
  margin:0;
}
.method-movement__pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--pw-line);
  padding-top:clamp(2.5rem,5vh,4rem);
}
@media (min-width:860px){
  .method-movement__pillars{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(2rem,3vw,3.5rem);
  }
}
.method-movement__pillar{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
@media (min-width:860px){
  .method-movement__pillar{
    padding-top:0;
    border-left:1px solid var(--pw-line);
    padding-left:clamp(1.5rem,3vw,2.5rem);
  }
  .method-movement__pillar--1{
    padding-left:0;
    border-left:0;
  }
}
.method-movement__pillar-title{
  font-size:clamp(1.35rem,2vw,1.65rem);
  font-weight:600;
  color:var(--pw-primary);
  margin:0;
  letter-spacing:.01em;
}
.method-movement__pillar-desc{
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--pw-ink-70);
  margin:0;
  max-width:40ch;
}

/* ---------- 7. Moment de respiració (.method-pause) ---------- */
.method-pause{
  background:var(--pw-white);
  padding-block:clamp(5.5rem,11vh,8.5rem);
  text-align:center;
  position:relative;
}
.method-pause__container{
  max-width:840px;
}

/* Transición narrativa breve */
.method-pause__content{
  display:flex;
  flex-direction:column;
  gap:clamp(1.25rem,2.5vh,2rem);
  max-width:660px;
}
.method-pause__main{
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.35;
  color:var(--pw-ink-70);
  font-weight:400;
  letter-spacing:-.01em;
  margin:0;
}
.method-pause__accent{
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  line-height:1.25;
  color:var(--pw-primary);
  font-weight:600;
  letter-spacing:-.01em;
  margin:0;
}

/* ---------- 8. De la teoria a la persona (.method-practice) ---------- */
.method-practice{
  background:var(--pw-white);
  border-top:1px solid var(--pw-line);
  padding-block:clamp(5.5rem,11vh,8.5rem);
  overflow-x:clip;
}
.method-practice__head{
  max-width:800px;
  margin-bottom:clamp(2.5rem,5vh,4rem);
}
.method-practice__head .section-heading{
  text-wrap:balance;
  margin-bottom:var(--sp-4);
}
.method-practice__lead{
  color:var(--pw-ink-70);
  max-width:62ch;
  margin:0;
}
.method-practice__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-12);
  align-items:start;
}
@media (min-width:960px){
  .method-practice__grid{
    grid-template-columns:1.05fr .95fr;
    gap:clamp(3rem,6vw,5.5rem);
  }
}
.method-practice__timeline{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  position:relative;
  padding-left:var(--sp-6);
  border-left:2px solid rgba(35,115,105,.2);
}
.method-practice__step{
  position:relative;
}
.method-practice__step::before{
  content:'';
  position:absolute;
  left:calc(-1 * var(--sp-6) - 5px);
  top:.5rem;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--pw-primary);
  box-shadow:0 0 0 4px var(--pw-white),0 0 0 5px rgba(35,115,105,.3);
}
/* El numeral fantasma repeteix el vocabulari de .method-scene__num i
   .method-movement__item-num: el pas de la primera visita és una
   continuació de la mateixa progressió numerada, no un servei nou. */
.method-practice__step-head{
  display:flex;
  align-items:baseline;
  gap:var(--sp-3);
  margin-bottom:.3rem;
}
.method-practice__step-num{
  font-size:1.4rem;
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--pw-ink-50);
}
.method-practice__step-time{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pw-primary);
  margin:0;
}
.method-practice__step-title{
  font-size:1.2rem;
  font-weight:600;
  color:var(--pw-ink);
  margin:0 0 .4rem;
}
.method-practice__step-desc{
  font-size:.95rem;
  line-height:1.65;
  color:var(--pw-ink-70);
  margin:0;
}
.method-practice__therapist{
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px solid var(--pw-line);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
.method-practice__therapist-thumb{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.method-practice__therapist-name{
  font-size:1rem;
  font-weight:600;
  color:var(--pw-ink);
  margin:0 0 .2rem;
}
.method-practice__therapist-meta{
  font-size:.8rem;
  line-height:1.45;
  color:var(--pw-ink-70);
  margin:0;
}
.method-practice__figure{
  margin:0;
  position:relative;
  aspect-ratio:4/3;
  max-height:clamp(440px,58vh,600px);
  border-radius:var(--radius-tile,20px);
  overflow:hidden;
}
.method-practice__figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (min-width:960px){
  .method-practice__figure{
    margin-right:calc(-1 * (max(0px, (100vw - var(--container)) / 2) + clamp(1.5rem,4vw,2.75rem)));
    border-radius:var(--radius-tile,20px) 0 0 var(--radius-tile,20px);
  }
}
.method-practice__caption{
  margin-top:var(--sp-4);
  font-size:.85rem;
  line-height:1.5;
  color:var(--pw-ink-70);
  font-style:normal;
  padding-left:var(--sp-3);
  border-left:2px solid var(--pw-primary);
  max-width:52ch;
}

/* CTA intermedio tras "Primera sesión" (Fase 2, UX/conversión): enlace de
   jerarquía secundaria, mismo lenguaje visual que .method-hero__anchor
   (texto + flecha, sin fondo ni card), separado del contenido superior
   solo con un filete fino — igual patrón que .method-practice__therapist
   más arriba, para que se lea como cierre natural de la sección, no como
   un bloque comercial nuevo. */
.method-practice__cta{
  margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-top:var(--sp-6);
  border-top:1px solid var(--pw-line);
}
.method-practice__cta-link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pw-primary);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.method-practice__cta-link svg{
  transition:transform var(--dur-fast) var(--ease-out);
}
.method-practice__cta-link:hover{
  color:var(--pw-primary-600);
}
.method-practice__cta-link:hover svg{
  transform:translateX(4px);
}

/* ---------- 9. Ressenya editorial humana (.method-quote) ---------- */
.method-quote{
  background:var(--pw-primary-900);
  color:var(--pw-white);
  padding-block:clamp(5rem,10vh,7.5rem);
  position:relative;
}
.method-quote__container{
  max-width:760px;
  position:relative;
  z-index:2;
}
.method-quote__box{
  position:relative;
}
.method-quote__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--sp-6);
}
.method-quote__eyebrow{
  color:#8fd9c9;
  letter-spacing:.14em;
  margin:0;
}
.method-quote__stars{
  color:#8fd9c9;
  letter-spacing:.15em;
  font-size:1.1rem;
}
.method-quote__body{
  margin:0 0 var(--sp-7);
  padding:0;
}
.method-quote__text{
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.38;
  letter-spacing:-.01em;
  font-weight:400;
  color:rgba(255,255,255,.96);
  margin:0;
  font-style:italic;
}
.method-quote__author-row{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding-top:var(--sp-6);
  border-top:1px solid var(--pw-line-on-dark);
}
.method-quote__author-photo{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.method-quote__name{
  display:block;
  font-size:1.05rem;
  font-weight:600;
  color:#ffffff;
  font-style:normal;
}
.method-quote__meta{
  display:block;
  font-size:.85rem;
  color:#8fd9c9;
  margin-top:.2rem;
}

/* ---------- 10. Tancament del recorregut — torna al punt de partida (.method-closing) ---------- */
.method-closing{
  text-align:center;
}
.method-closing .photo-banner__media::after{
  background:linear-gradient(180deg, rgba(18,60,55,.45) 0%, rgba(18,60,55,.86) 68%, var(--pw-primary-900) 100%);
}
.method-closing .photo-banner__inner{
  max-width:56rem;
}
.method-closing__title{
  margin:0 auto var(--sp-5);
  max-width:34ch;
}
.method-closing__lead{
  margin:0 auto;
  max-width:52ch;
}
.method-closing__cta{
  min-width:240px;
  margin-top:clamp(2.25rem,4.2vw,3rem);
}
.method-closing__secondary{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--sp-3);
  font-size:.85rem;
  margin-top:var(--sp-6);
}
.method-closing__secondary a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:color var(--dur-fast);
}
.method-closing__secondary a:hover{
  color:var(--pw-white);
}
.method-closing__secondary-sep{
  color:rgba(255,255,255,.35);
}

/* ---------- 11. Accessibilitat per a prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .method-thread-track{
    display:none!important;
  }
  .method-hero__visual-img,
  .method-scene__media-frame img{
    transition:none!important;
    transform:none!important;
  }
  .method-system__sticky-nav{
    position:static!important;
  }
  .method-scene__multi-grid > div:first-child,
  .method-scene__multi-grid > div:last-child{
    transform:none!important;
  }
}

/* ==========================================================================
   FASE 9 — Fisioterapia: dirección artística (segunda pasada)
   Bloque nuevo, autocontenido, para src/pages/servicios/physiotherapy.html.
   Todo lo que es específico de esta página va con seudo-clases
   .page-physio para no afectar a Stretching (que comparte .page-hero,
   .service-context y .service-feature con Fisioterapia, ver §"Página de
   área de servicio" más arriba). Los componentes con nombre propio nuevo
   (.photo-break, .service-menu, .pull-quote, .photo-banner,
   .testimonial-feature, [data-crossfade]) no necesitan ese prefijo: no
   existen todavía en ninguna otra página.
   ========================================================================== */

/* ----- Hero: la foto gana peso y sangra al borde en escritorio -----
   FASE 8 dejaba el hero con columnas casi iguales (1.1fr/.9fr) y la foto
   contenida dentro de .container, igual que Stretching. Esta segunda
   pasada solo pide más peso fotográfico en Fisioterapia: se sobrescribe
   aquí, con selectores .page-physio, sin tocar las reglas compartidas de
   §"Página de área de servicio" (Stretching sigue con el hero contenido
   tal cual). La foto se libera del padding derecho de .container con el
   mismo cálculo que .method-hero__media usa para el sangrado lateral,
   adaptado a "solo el lado derecho" (la columna de texto se queda dentro
   del contenedor, alineada con el resto de la página). */
@media (min-width:860px){
  .page-physio .page-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .page-physio .page-hero__photo{
    margin-right:calc(-1 * (max(0px, (100vw - var(--container)) / 2) + clamp(1.5rem,4vw,2.75rem)));
    border-radius:var(--radius-tile,20px) 0 0 var(--radius-tile,20px);
  }
}
/* FASE hero (lectura): el titular es una frase de 9 palabras, no un
   nombre corto — a --fs-display (5.75rem) con solo 15ch de ancho
   envolvía en 5-6 líneas de 2-3 palabras. Se baja un escalón (clamp más
   contenido) y se amplía el ancho de línea; columnas 1fr/1fr (antes
   .86fr/1.14fr) le devuelven aire al texto sin quitarle presencia a la
   foto, que además sigue sangrando fuera de su columna (regla de arriba). */
.page-physio .page-hero__title{
  font-size:clamp(2.3rem,3.6vw,4.25rem);
  max-width:21ch;
}
/* Con el titular ahora en 3 líneas (antes 5-6), el espaciado heredado de
   .page-physio .page-hero__text (§"Hero de Fisioterapia", sp-6/sp-8)
   quedaba corto para separar un bloque de texto de 3 líneas del párrafo:
   se amplía un escalón (sp-8/sp-10) solo aquí. */
.page-physio .page-hero__text{margin-block:var(--sp-8) var(--sp-10);}

/* ----- Hero: entrada del bloque completo, sin desfase escalonado -----
   El hero es contenido above-the-fold: el stagger genérico de §7
   (transition-delay:i*90ms + --dur-slow de .9s) tiene sentido para
   secciones a las que se llega haciendo scroll, pero aquí hacía que la
   foto (clip-path, delay 180ms, .9s de barrido) terminara de revelarse
   más de 1s después de pintada la página, muy por detrás del texto.
   Se neutraliza el delay y se acorta la duración SOLO dentro del grid
   del hero de Fisioterapia/Stretching: título, texto, CTA y foto quedan
   disparados por el mismo IntersectionObserver (revealOnScroll(), sin
   JS nuevo) pero terminan de aparecer casi a la vez, con una transición
   breve en vez de desaparecer la coreografía por completo. */
.page-physio .page-hero__grid [data-reveal]{
  transition-delay:0ms;
  transition-duration:.4s;
}
.page-physio .page-hero__photo[data-reveal]{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .4s var(--ease-emphatic);
  transition-delay:0ms;
}
.page-physio .page-hero__photo[data-reveal].is-visible{clip-path:inset(0 0 0% 0);}

.page-hero__cue{display:flex;justify-content:center;margin-top:var(--sp-10);}
.page-hero__cue span{
  position:relative;
  display:block;
  width:1px;height:2.75rem;
  overflow:hidden;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.page-hero__cue span::before{
  content:'';
  position:absolute;
  left:0;top:-100%;width:100%;height:100%;
  background:var(--pw-white);
  animation:pageHeroCueDrop 1.8s var(--ease-out) infinite;
}
@keyframes pageHeroCueDrop{
  0%{transform:translateY(0);}
  100%{transform:translateY(200%);}
}

/* ----- "Cuándo empezar": fotografía flotante en capas -----
   .service-context__visual pasa a ser el hijo directo de la rejilla (antes
   lo era .service-photo): hereda aquí el mismo order:-1/0 que antes tenía
   .service-photo (definido más arriba, §"Cuándo empezar..."), para que la
   foto se siga viendo primero en móvil sin tocar esa regla. El desfase
   negativo de .service-context__detail está deliberadamente acotado por
   debajo del gutter mínimo del .container (1.5rem) para que nunca provoque
   scroll horizontal, ni siquiera en el viewport más estrecho soportado. */
.service-context__visual{position:relative;order:-1;}
@media (min-width:860px){
  .service-context__visual{order:0;}
}
.service-context__detail{
  position:absolute;
  right:clamp(-1rem,-3vw,-1.25rem);
  bottom:clamp(-1rem,-3vw,-1.5rem);
  z-index:1;
  margin:0;
  width:clamp(5.5rem,26vw,8.5rem);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
  border:4px solid var(--pw-white);
  box-shadow:0 12px 28px rgba(18,60,55,.18);
}
.service-context__detail img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}

/* ----- Ruptura fotográfica a sangre completa ----- */
.photo-break{position:relative;overflow:hidden;background:var(--pw-primary-900);}
.photo-break__media{
  margin:0;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  aspect-ratio:16/9;
  overflow:hidden;
}
.photo-break__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 32%;
  filter:saturate(1.05) contrast(1.04) brightness(.9);
}
.photo-break__caption{
  position:absolute;
  left:50%;bottom:var(--sp-8);
  transform:translateX(-50%);
  margin:0;
  max-width:88vw;
  padding:.6rem 1.35rem;
  background:rgba(18,60,55,.55);
  color:var(--pw-white);
  font-size:var(--fs-small);
  font-weight:500;
  text-align:center;
  border-radius:999px;
}
@media (min-width:640px){
  .photo-break__media{aspect-ratio:21/9;}
}

/* ----- "¿En qué podemos ayudarte?": explorador de síntomas↔ámbitos -----
   FASE 2 (progressive disclosure, 2026): sustituye el banner con foto +
   .symptom-map (dos columnas con todo el texto visible desde el
   principio) por .symptom-explorer. Mismos seis pares síntoma↔ámbito de
   siempre, ahora con revelado real: cada fila es un
   <button aria-expanded aria-controls> (mismo lenguaje visual que
   .faq__q: color en :hover, icono +/− que gira) junto a un panel
   [hidden], controlado por main.js (symptomExplorer). Solo los títulos
   son visibles al entrar; al abrir una fila aparece su explicación y se
   resalta (línea de acento a la izquierda) la fila emparejada de la otra
   columna, sin abrir su texto. En escritorio, tres zonas en grid:
   síntomas | fotografía | ámbitos, con la fotografía estirada a la altura
   de las columnas. En móvil la columna de ámbitos se oculta y el ámbito
   relacionado se muestra dentro de la propia fila de síntoma abierta
   (.symptom-explorer__inline-ambito, oculto en escritorio). */
.symptom-explorer{margin-top:var(--sp-16);}

.symptom-explorer__photo{
  margin:0 0 var(--sp-8);
  border-radius:var(--radius-tile,20px);
  overflow:hidden;
  aspect-ratio:4/3;
}
.symptom-explorer__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 25%;
}

.symptom-explorer__list{list-style:none;margin:0;padding:0;}
.symptom-explorer__list--ambitos{margin-top:var(--sp-10);}
.symptom-explorer__list li:last-child{border-bottom:1px solid var(--pw-line);}
.symptom-explorer__heading{margin:0;font:inherit;}

.symptom-explorer__row{
  border-top:1px solid var(--pw-line);
  border-left:2px solid transparent;
  padding-left:var(--sp-4);
  margin-left:calc(-1 * var(--sp-4));
  transition:border-color var(--dur-slow) var(--ease-emphatic);
}
.symptom-explorer__row.is-open,
.symptom-explorer__row.is-paired{
  border-left-color:var(--pw-primary);
}

.symptom-explorer__title{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);
  width:100%;
  padding-block:var(--sp-5);
  font:inherit;font-size:1.05rem;font-weight:600;text-align:left;
  color:var(--pw-ink);
  transition:color var(--dur-fast) var(--ease-out);
}
.symptom-explorer__title:hover{color:var(--pw-primary);}
.symptom-explorer__title:focus-visible{outline:2px solid var(--pw-accent);outline-offset:3px;}
.symptom-explorer__num{
  flex:none;
  font-size:var(--fs-label);
  color:var(--pw-ink-50);
  padding-top:.25em;
}
.symptom-explorer__title-text{flex:1;}
.symptom-explorer__icon{
  flex:none;
  width:11px;height:11px;margin-top:.42em;
  background:
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/100% 1px no-repeat,
    linear-gradient(var(--pw-primary),var(--pw-primary)) center/1px 100% no-repeat;
  transition:transform var(--dur-fast) var(--ease-out);
}
.symptom-explorer__title[aria-expanded="true"] .symptom-explorer__icon{
  transform:rotate(90deg);background-size:100% 1px,0 0;
}

/* Cuando hay una fila abierta, el resto de títulos (de las dos columnas)
   pasan a un segundo plano; la fila abierta y su pareja emparejada
   recuperan el color de texto completo. */
.symptom-explorer.has-active .symptom-explorer__title{color:var(--pw-ink-50);}
.symptom-explorer.has-active .symptom-explorer__row.is-open .symptom-explorer__title,
.symptom-explorer.has-active .symptom-explorer__row.is-paired .symptom-explorer__title{
  color:var(--pw-ink);
}

.symptom-explorer__panel{padding-bottom:var(--sp-6);}
.symptom-explorer__desc{color:var(--pw-ink-70);max-width:52ch;}
.symptom-explorer__inline-ambito{
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px dashed var(--pw-line);
}
.symptom-explorer__inline-label{
  margin:0 0 var(--sp-1);
  font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--pw-primary);
}
.symptom-explorer__inline-ambito p{color:var(--pw-ink-70);max-width:52ch;}
.symptom-explorer__inline-ambito strong{color:var(--pw-ink);}

@media (max-width:859.98px){
  .symptom-explorer__list--ambitos{display:none;}
}
@media (min-width:860px){
  .symptom-explorer{
    display:grid;
    grid-template-columns:1fr minmax(200px,280px) 1fr;
    column-gap:var(--sp-16);
    align-items:stretch;
    margin-top:var(--sp-10);
  }
  .symptom-explorer__list--symptoms{order:1;}
  .symptom-explorer__photo{
    order:2;
    margin:0;
    width:100%;
    height:100%;
    min-height:380px;
    aspect-ratio:auto;
  }
  .symptom-explorer__list--ambitos{order:3;margin-top:0;}
  .symptom-explorer__inline-ambito{display:none;}
}

/* ----- Fotografía con crossfade (Cómo es el proceso) -----
   Componente pequeño y reutilizable (punto 13/14 del brief): cualquier
   futura sección con [data-sp-steps] puede añadir [data-crossfade] +
   [data-crossfade-img] + data-crossfade-src por paso sin CSS nuevo.
   crossfadeStepPhotos() (main.js) alterna la clase .is-fading (opacity:0)
   y sustituye el src a mitad de transición; con prefers-reduced-motion la
   duración pasa a .01ms por la regla global (§2), así que el cambio de
   foto es instantáneo en vez de con fundido. */
[data-crossfade]{
  margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
}
[data-crossfade] img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
  transition:opacity var(--dur-fast) var(--ease-out);
}
[data-crossfade] img.is-fading{opacity:0;}

/* ----- Servicios y modalidades: lista editorial de formatos de sesión -----
   FASE 10: cada fila expone 4 campos (servicio · duración · modalidad ·
   acción) en vez de una etiqueta + una sola línea de meta combinada, para
   escanear en columnas SERVICIO → DURACIÓN → MODALIDAD → ACCIÓN en vez de
   tener que leer una frase completa por fila.
   .service-menu__details agrupa duración+modalidad: en móvil se queda
   como una única línea (mismo aspecto que la antigua .service-menu__meta,
   con un punto separador via ::before en .service-menu__modality) y en
   escritorio (≥640px) pasa a display:contents para que sus dos hijos se
   coloquen como columnas propias del grid, sin envoltorio visible. */
.service-menu{padding-block:var(--sp-16);background:var(--pw-white);border-top:1px solid var(--pw-line);}
.service-menu__head{max-width:60ch;margin-bottom:var(--sp-10);}
.service-menu__list{list-style:none;margin:0;padding:0;display:grid;}
.service-menu__item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--sp-2) var(--sp-6);
  padding-block:var(--sp-5);
  border-top:1px solid var(--pw-line);
}
.service-menu__list li:last-child{border-bottom:1px solid var(--pw-line);}
.service-menu__label{grid-column:1;font-weight:600;color:var(--pw-ink);}
.service-menu__details{grid-column:1;display:flex;gap:.4em;font-size:.85rem;color:var(--pw-ink-70);}
.service-menu__modality::before{content:"· ";}
.service-menu__link{
  grid-column:2;grid-row:1 / 3;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--pw-primary);
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.service-menu__link:hover{color:var(--pw-primary-600);}
.service-menu__arrow{transition:transform var(--dur-fast) var(--ease-out);}
.service-menu__link:hover .service-menu__arrow,
.service-menu__link:focus-visible .service-menu__arrow{transform:translateX(4px);}
.service-menu__note{margin-top:var(--sp-8);font-size:.9rem;color:var(--pw-ink-70);max-width:60ch;}
@media (min-width:640px){
  .service-menu__item{grid-template-columns:1.4fr .7fr 1fr auto;column-gap:var(--sp-8);}
  .service-menu__label{grid-column:1;}
  .service-menu__details{display:contents;}
  .service-menu__duration{grid-column:2;color:var(--pw-ink-70);font-size:.9rem;}
  .service-menu__modality{grid-column:3;color:var(--pw-ink-70);font-size:.9rem;}
  .service-menu__modality::before{content:"";}
  .service-menu__link{grid-column:4;grid-row:auto;}
}

/* ----- Cómo es el proceso: nota + enlace a Primera visita + foto + progreso -----
   La línea de progreso vertical (::after) se calcula con --sp-progress
   (fijada por serviceProcessTimeline en main.js según activeIndex/pasos),
   superpuesta al borde de la fotografía sticky. Desfase negativo pequeño
   (-1rem), siempre dentro del hueco entre columnas (gap var(--sp-24) en
   escritorio), así que nunca se solapa con la columna de pasos ni con el
   gutter del contenedor. */
.service-process__note{margin-top:var(--sp-5);color:var(--pw-ink-70);max-width:52ch;}
.service-process__link{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:var(--sp-5);
  font-size:.85rem;font-weight:600;letter-spacing:.02em;
  color:var(--pw-primary);
  border-bottom:1px solid currentColor;
  padding-block:.2rem;
  transition:color var(--dur-fast) var(--ease-out);
}
.service-process__link:hover{color:var(--pw-primary-600);}
.service-process__link:hover .service-feature__arrow,
.service-process__link:focus-visible .service-feature__arrow{transform:translateX(4px);}
.service-process__visual{
  position:relative;
  margin-top:var(--sp-6);
  max-width:26rem;
  aspect-ratio:4/3;
}
@media (min-width:860px){
  .service-process__visual{margin-top:var(--sp-8);max-width:22rem;aspect-ratio:3/4;}
  .service-process__visual::before{
    content:'';
    position:absolute;
    left:-1rem;top:0;bottom:0;
    width:2px;
    background:var(--pw-line);
  }
  .service-process__visual::after{
    content:'';
    position:absolute;
    left:-1rem;top:0;
    width:2px;
    height:calc(var(--sp-progress,0) * 100%);
    background:var(--pw-primary);
    transition:height var(--dur-med) var(--ease-out);
  }
}

/* ----- Cita entrelazada reutilizable (proceso + testimonio) ----- */
.pull-quote{
  max-width:44rem;
  margin:var(--sp-16) auto 0;
  padding-top:var(--sp-8);
  border-top:1px solid var(--pw-line);
  text-align:center;
}
.pull-quote p{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-primary-900);
  line-height:1.4;
  margin:0 0 var(--sp-4);
}
.pull-quote cite{
  display:block;
  font-style:normal;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pw-ink-50);
}
.pull-quote--compact{margin-top:var(--sp-12);}
.pull-quote--compact p{font-size:var(--fs-lead);}

/* ----- Testimonio protagonista (sustituye la cinta de 6 en esta página) ----- */
/* FASE 2 (pulido): misma razón que en .service-feature--with-photo — línea
   fina para separar de la sección blanca anterior sin cambiar de fondo. */
.testimonial-feature{padding-block:var(--space-section);background:var(--pw-white);border-top:1px solid var(--pw-line);}
.testimonial-feature__grid{display:grid;gap:var(--sp-10);align-items:center;}
.testimonial-feature__photo{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-tile,20px);
}
.testimonial-feature__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(1.05) contrast(1.04) brightness(.97);
}
.testimonial-feature__stars{margin:var(--sp-4) 0 0;color:var(--pw-primary);letter-spacing:.12em;font-size:.9rem;}
.testimonial-feature__quote{margin:var(--sp-4) 0 var(--sp-5);}
.testimonial-feature__quote p{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-primary-900);
  line-height:1.4;
}
.testimonial-feature__quote p + p{margin-top:var(--sp-4);}
.testimonial-feature__cite{
  display:block;
  font-style:normal;
  font-size:.85rem;
  color:var(--pw-ink-70);
  letter-spacing:.02em;
}
@media (min-width:860px){
  .testimonial-feature__grid{grid-template-columns:.85fr 1.15fr;gap:var(--sp-16);}
  .testimonial-feature__photo{aspect-ratio:3/4;}
}

/* ----- "photo-banner": franja a sangre completa con foto + velo + CTA -----
   Base compartida por el puente al Método Marshall (.discipline-bridge) y
   por el CTA final de esta página (.cta-final--photo). Nombre distinto de
   ".method-bridge" (ya usado dentro de src/pages/metodo.html para una
   escena de transición interna no relacionada) para no heredar ni chocar
   con esas reglas. */
.photo-banner{position:relative;overflow:hidden;color:var(--pw-white);text-align:center;}
.photo-banner__media{position:absolute;inset:0;margin:0;z-index:0;}
.photo-banner__media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.04) brightness(.85);
}
.photo-banner__media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,60,55,.55), rgba(18,60,55,.84));
}
.photo-banner__inner{
  position:relative;z-index:1;
  max-width:38rem;
  margin-inline:auto;
  padding-block:var(--sp-32);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);
}
.photo-banner__title{font-size:var(--fs-h2);}
.photo-banner__lead{font-size:var(--fs-lead);color:rgba(255,255,255,.84);}

.discipline-bridge .eyebrow--on-dark{margin-bottom:var(--sp-2);}

.cta-final--photo.cta-final{padding-block:0;background:none;}
.cta-final--photo .cta-final__inner{padding-block:var(--sp-32);}
.cta-final--photo .cta-final__lead{color:rgba(255,255,255,.84);}

/* ==========================================================================
   PÁGINA: EQUIPO (CONÓCENOS)
   ========================================================================== */

/* ----- 1. Hero de Equipo (Integración Fotografía + Verde) ----- */
.team-hero {
  position: relative;
  background-color: var(--pw-primary-900);
  color: var(--pw-white);
  overflow: hidden;
  width: 100%;
}

@media (min-width: 960px) {
  .team-hero {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    align-items: stretch;
    min-height: clamp(36rem, 74vh, 46rem);
  }
}

.team-hero__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--pw-primary-900);
}

@media (max-width: 959px) {
  .team-hero__media {
    height: clamp(18rem, 50vw, 25rem);
  }
}

@media (min-width: 960px) {
  .team-hero__media {
    height: 100%;
    min-height: 100%;
  }
}

.team-hero__media picture,
.team-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
}

/* Transición elegante entre fotografía y verde */
.team-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (min-width: 960px) {
  .team-hero__media::after {
    background: linear-gradient(
      90deg,
      rgba(18, 60, 55, 0.05) 0%,
      rgba(18, 60, 55, 0.1) 40%,
      rgba(18, 60, 55, 0.55) 75%,
      rgba(18, 60, 55, 0.9) 92%,
      var(--pw-primary-900) 100%
    );
  }
}

@media (max-width: 959px) {
  .team-hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(18, 60, 55, 0) 50%,
      rgba(18, 60, 55, 0.55) 80%,
      var(--pw-primary-900) 100%
    );
  }
}

.team-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 5.5vw, 5.5rem) clamp(1.75rem, 4vw, 4.5rem);
}

@media (max-width: 959px) {
  .team-hero__content {
    margin-top: -1.75rem;
    padding: var(--sp-4) var(--sp-5) var(--sp-12);
  }
}

.team-hero__breadcrumb {
  margin-bottom: var(--sp-6);
}

.team-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.68);
}

.team-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--dur-hover, .2s) var(--ease-out);
}

.team-hero__breadcrumb a:hover {
  color: var(--pw-white);
}

.team-hero__breadcrumb li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}

.team-hero__breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.team-hero__eyebrow {
  margin-bottom: var(--space-sm-md);
}

.team-hero__title {
  font-size: clamp(1.65rem, 3.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--pw-white);
  margin: 0 0 var(--sp-5);
  max-width: 32ch;
}

.team-hero__lead {
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.team-hero__lead p {
  margin: 0;
}

.team-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* ----- 2. Explorador interactivo del equipo ----- */
.team-explorer{
  padding-block:var(--space-section);
  background:var(--pw-white);
}
.team-explorer__head{
  max-width:44rem;
  margin-bottom:var(--sp-12);
}
.team-explorer__lead{
  margin-top:var(--sp-4);
}

.team-explorer__layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:var(--sp-8);
}
@media (min-width:860px){
  .team-explorer__layout{
    grid-template-columns:minmax(280px,340px) minmax(0, 1fr);
    gap:var(--sp-12);
    align-items:start;
  }
  .team-explorer__sidebar{
    position:sticky;
    top:6.5rem;
  }
}

.team-explorer__nav-label{
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pw-ink-50);
  font-weight:600;
  margin-bottom:var(--sp-3);
}

.team-explorer__nav{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}
@media (min-width:640px) and (max-width:859px){
  .team-explorer__nav{
    grid-template-columns:1fr 1fr;
  }
}
@media (min-width:860px){
  .team-explorer__nav{
    grid-template-columns:1fr;
    gap:var(--sp-3);
  }
}

.team-explorer__tab{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4);
  background:var(--pw-white);
  border:1px solid var(--pw-line);
  border-radius:var(--radius);
  text-align:left;
  cursor:pointer;
  transition:background var(--dur-hover, .2s) var(--ease-out),
              border-color var(--dur-hover, .2s) var(--ease-out),
              box-shadow var(--dur-hover, .2s) var(--ease-out);
  position:relative;
  width:100%;
}
.team-explorer__tab:hover{
  background:rgba(243,246,245,.7);
  border-color:rgba(18,32,29,.2);
}
.team-explorer__tab:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}
.team-explorer__tab.is-active{
  background:var(--pw-mist);
  border-color:var(--pw-primary);
  border-left-width:3px;
  box-shadow:0 4px 16px -8px rgba(18,32,29,.12);
}

.team-explorer__tab-num{
  font-size:var(--fs-label);
  font-weight:600;
  color:var(--pw-primary);
  letter-spacing:.08em;
  flex-shrink:0;
  width:1.5rem;
}
.team-explorer__tab-content{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
}
.team-explorer__tab-name{
  font-size:1rem;
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.25;
}
.team-explorer__tab-role{
  font-size:var(--fs-small);
  color:var(--pw-ink-70);
  line-height:1.3;
  margin-top:.2rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-explorer__tab-arrow{
  color:var(--pw-ink-50);
  flex-shrink:0;
  transition:transform .2s var(--ease-out), color .2s var(--ease-out);
}
.team-explorer__tab.is-active .team-explorer__tab-arrow{
  color:var(--pw-primary);
  transform:translateX(3px);
}
@media (max-width:859px){
  .team-explorer__tab-arrow{
    display:none;
  }
}

.team-explorer__note{
  margin-top:var(--sp-6);
  padding:var(--sp-4);
  background:var(--pw-mist);
  border-left:2px solid var(--pw-primary);
  font-size:var(--fs-small);
  color:var(--pw-ink-70);
  line-height:1.55;
  border-radius:0 var(--radius) var(--radius) 0;
}
.team-explorer__note strong{
  color:var(--pw-ink);
  font-weight:500;
}
@media (max-width:859px){
  .team-explorer__note{
    display:none;
  }
}

/* Escenario interactivo */
.team-explorer__stage{
  position:relative;
  min-height:28rem;
  min-width:0;
}

.team-explorer__panel{
  display:none;
}
.team-explorer__panel.is-active{
  display:block;
  animation:teamPanelFade .3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes teamPanelFade{
  0%{
    opacity:0;
    transform:translateY(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
@media (prefers-reduced-motion:reduce){
  .team-explorer__panel.is-active{
    animation:none!important;
  }
}

/* Ficha del profesional */
.team-profile{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:var(--sp-8);
  min-width:0;
}
@media (min-width:680px){
  .team-profile{
    grid-template-columns:minmax(260px,360px) minmax(0, 1fr);
    gap:var(--sp-10);
    align-items:start;
  }
}
@media (min-width:860px) and (max-width:1140px){
  .team-explorer__stage .team-profile{
    grid-template-columns:minmax(180px,240px) minmax(0, 1fr);
    gap:var(--sp-6);
  }
}

.team-profile__media{
  position:relative;
  min-width:0;
}
.team-profile__figure{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
  box-shadow:0 10px 30px -15px rgba(18,32,29,.12);
  margin:0;
}
.team-profile__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  transition:transform .6s var(--ease-out);
}
.team-profile__figure:hover .team-profile__img{
  transform:scale(1.02);
}
.team-profile__badge{
  position:absolute;
  bottom:var(--sp-3);
  left:var(--sp-3);
  background:rgba(18,32,29,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#8fd9c9;
  font-size:var(--fs-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem .7rem;
  border-radius:var(--radius);
  line-height:1;
  font-weight:500;
}

.team-profile__body{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.team-profile__tag{
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pw-primary);
  font-weight:600;
  margin:0 0 .25rem;
}
.team-profile__name{
  font-size:clamp(1.75rem,3.2vw,2.4rem);
  font-weight:500;
  line-height:1.15;
  color:var(--pw-ink);
  letter-spacing:-.01em;
  margin:0;
}
.team-profile__role{
  font-size:1.05rem;
  color:var(--pw-primary);
  font-weight:500;
  line-height:1.4;
  margin:.4rem 0 0;
}
.team-profile__desc{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.65;
  margin-top:var(--sp-4);
}
.team-profile__desc p{
  margin:0;
}

.team-profile__section{
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--pw-line);
}
.team-profile__subtitle{
  font-size:var(--fs-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pw-ink-50);
  font-weight:600;
  margin:0 0 var(--sp-3);
}

.team-profile__facts{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.65rem;
}
.team-profile__facts li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  font-size:.92rem;
  color:var(--pw-ink);
  line-height:1.45;
}
.team-profile__fact-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pw-primary);
  flex-shrink:0;
  margin-top:.45rem;
}

.team-profile__areas{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.team-profile__pill{
  display:inline-block;
  padding:.3rem .75rem;
  font-size:.82rem;
  color:var(--pw-ink);
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
  border-radius:999px;
  line-height:1.2;
}

.team-profile__cta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  max-width:100%;
}
.team-profile__cta .btn{
  white-space:normal;
  text-align:center;
  max-width:100%;
}
.team-profile__cta .btn--outline{
  border:1.5px solid var(--pw-primary);
  color:var(--pw-primary);
  background:transparent;
}
.team-profile__cta .btn--outline:hover,
.team-profile__cta .btn--outline:focus-visible{
  border-color:var(--pw-primary-600);
  color:var(--pw-primary-600);
  background:rgba(35,115,105,.08);
}
.team-profile__cta .btn--outline:visited{
  color:var(--pw-primary);
}

/* ----- 3. Bloque Intermedio Humano ----- */
.team-quote-banner{
  position:relative;
  overflow:hidden;
  padding-block:clamp(5rem,9vw,7.5rem);
  color:var(--pw-white);
  text-align:center;
  background:var(--pw-primary-900);
}
.team-quote-banner__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.team-quote-banner__media picture,
.team-quote-banner__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  filter:saturate(1.05) contrast(1.04) brightness(.82);
  display:block;
}
.team-quote-banner__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,60,55,.62), rgba(18,60,55,.86));
}
.team-quote-banner__inner{
  position:relative;
  z-index:1;
  max-width:48rem;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
}
.team-quote-banner__quote{
  margin:0;
  font-size:clamp(1.35rem,2.4vw,1.95rem);
  font-weight:500;
  line-height:1.4;
  color:var(--pw-white);
  letter-spacing:-.01em;
}
.team-quote-banner__caption{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.76);
  letter-spacing:.03em;
  margin:0;
}

/* ----- 4. Una forma compartida de trabajar (Editorial & Interactiva) ----- */
.team-values{
  padding-block:var(--space-section);
  background:var(--pw-white);
  border-block:1px solid var(--pw-line);
}
.team-values__head{
  max-width:44rem;
  margin-bottom:var(--sp-12);
}
.team-values__lead{
  margin-top:var(--sp-4);
}

.team-values__interactive{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
}
@media (min-width:860px){
  .team-values__interactive{
    grid-template-columns:minmax(320px,400px) 1fr;
    gap:var(--sp-12);
    align-items:start;
  }
}

.team-values__nav{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

/* Tab interactiva del principio */
.team-value-tab{
  display:flex;
  flex-direction:column;
  text-align:left;
  background:transparent;
  border:1px solid var(--pw-line);
  border-left:3px solid transparent;
  border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6);
  cursor:pointer;
  transition:all var(--dur-fast, .2s) var(--ease-out);
  position:relative;
  width:100%;
}
.team-value-tab:hover{
  background:var(--pw-mist);
  border-color:rgba(18,32,29,.2);
}
.team-value-tab:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}
.team-value-tab.is-active{
  background:var(--pw-mist);
  border-color:var(--pw-line);
  border-left:3px solid var(--pw-primary);
  box-shadow:0 4px 16px -8px rgba(18,32,29,.08);
}
@media (min-width:860px){
  .team-value-tab:not(.is-active){
    opacity:0.65;
  }
  .team-value-tab:not(.is-active):hover{
    opacity:0.92;
  }
}

.team-value-tab__header{
  display:flex;
  align-items:baseline;
  gap:var(--sp-4);
}
.team-value-tab__num{
  font-size:1.35rem;
  font-weight:600;
  color:var(--pw-primary);
  line-height:1;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.team-value-tab__title{
  font-size:1.15rem;
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.3;
}
.team-value-tab__hook{
  font-size:var(--fs-small);
  color:var(--pw-ink-70);
  line-height:1.45;
  margin-top:.35rem;
  margin-left:2.25rem;
}

/* En desktop el cuerpo detallado se muestra en el escenario derecho */
.team-value-tab__mobile-body{
  display:none;
}

/* En mobile, funciona como acordeón elegante */
@media (max-width:859px){
  .team-value-tab.is-active .team-value-tab__mobile-body{
    display:block;
    margin-top:var(--sp-4);
    padding-top:var(--sp-4);
    border-top:1px dashed var(--pw-line);
    animation:accordionSlide .25s var(--ease-out);
  }
  .team-value-tab__desc{
    font-size:var(--fs-body);
    color:var(--pw-ink-70);
    line-height:1.6;
    margin:0;
  }
  .team-value-tab__takeaway{
    display:flex;
    align-items:center;
    gap:.65rem;
    margin-top:var(--sp-3);
    font-size:var(--fs-small);
    font-weight:500;
    color:var(--pw-primary);
  }
  .team-value-tab__takeaway-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--pw-primary);
    flex-shrink:0;
  }
}

@keyframes accordionSlide{
  from{
    opacity:0;
    transform:translateY(-4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Escenario editorial derecho (Desktop) */
.team-values__stage{
  position:relative;
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
  border-radius:var(--radius);
  padding:clamp(2.5rem,4vw,3.5rem);
  min-height:20rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (max-width:859px){
  .team-values__stage{
    display:none;
  }
}

.team-value-panel{
  display:none;
  position:relative;
}
.team-value-panel.is-active{
  display:block;
  animation:valuePanelFade .3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes valuePanelFade{
  0%{
    opacity:0;
    transform:translateY(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.team-value-panel__watermark{
  position:absolute;
  top:-1.5rem;
  right:-0.5rem;
  font-size:clamp(5rem,9vw,7.5rem);
  font-weight:700;
  color:rgba(18,60,55,.05);
  line-height:1;
  pointer-events:none;
  user-select:none;
}
.team-value-panel__header{
  position:relative;
  margin-bottom:var(--sp-4);
}
.team-value-panel__eyebrow{
  display:inline-block;
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pw-primary);
  font-weight:600;
  margin-bottom:var(--sp-2);
}
.team-value-panel__title{
  font-size:clamp(1.4rem,2.2vw,1.85rem);
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.25;
  margin:0;
  letter-spacing:-.01em;
}
.team-value-panel__text{
  font-size:clamp(1.02rem,1.1vw,1.12rem);
  color:var(--pw-ink-70);
  line-height:1.7;
  margin:0 0 var(--sp-6);
  max-width:52ch;
}
.team-value-panel__takeaway{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem 1rem;
  background:var(--pw-white);
  border:1px solid var(--pw-line);
  border-radius:999px;
  font-size:var(--fs-small);
  font-weight:500;
  color:var(--pw-primary);
}
.team-value-panel__takeaway-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pw-primary);
  flex-shrink:0;
}

/* ----- 5. Conexión del universo Conócenos ----- */
.conocenos-nav{
  padding-block:var(--space-section);
  background:var(--pw-white);
}
.conocenos-nav__head{
  max-width:42rem;
  margin-bottom:var(--sp-10);
}
.conocenos-nav__head .section-heading{
  max-width:32ch;
}
.conocenos-nav__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:var(--sp-8);
}
@media (min-width:768px){
  .conocenos-nav__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--sp-8);
  }
}

.conocenos-door{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--pw-white);
  border:1px solid var(--pw-line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.conocenos-door:hover{
  border-color:rgba(18,32,29,.24);
  transform:translateY(-3px);
  box-shadow:0 12px 28px -12px rgba(18,32,29,.1);
}
.conocenos-door__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--pw-mist);
}
.conocenos-door__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease-out);
}
.conocenos-door:hover .conocenos-door__media img{
  transform:scale(1.03);
}
.conocenos-door__content{
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.conocenos-door__eyebrow{
  font-size:var(--fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pw-primary);
  font-weight:600;
  margin:0 0 .3rem;
}
.conocenos-door__title{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.25;
  margin:0;
}
.conocenos-door__desc{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.55;
  margin:var(--sp-3) 0 var(--sp-6);
  flex:1 1 auto;
}
.conocenos-door__link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.95rem;
  font-weight:500;
  color:var(--pw-primary);
  text-decoration:none;
  margin-top:auto;
  transition:gap .2s var(--ease-out), color .2s var(--ease-out);
}
.conocenos-door__link svg{
  transition:transform .2s var(--ease-out);
}
.conocenos-door:hover .conocenos-door__link{
  color:var(--pw-primary-600);
}
.conocenos-door:hover .conocenos-door__link svg{
  transform:translateX(4px);
}

.conocenos-nav__cta{
  margin-top:var(--sp-12);
  padding:var(--sp-8) var(--sp-8);
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
  border-radius:var(--radius);
}
.conocenos-nav__cta-inner{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
}
@media (min-width:860px){
  .conocenos-nav__cta-inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
}
.conocenos-nav__cta-title{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-ink);
  margin:0;
}
.conocenos-nav__cta-lead{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  margin-top:.4rem;
  max-width:38ch;
}
.conocenos-nav__cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  flex-shrink:0;
}
.conocenos-nav__cta .btn--outline{
  border:1.5px solid var(--pw-primary);
  color:var(--pw-primary);
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:500;
  transition:all var(--dur-hover, .2s) var(--ease-out);
}
.conocenos-nav__cta .btn--outline:hover,
.conocenos-nav__cta .btn--outline:focus-visible{
  border-color:var(--pw-primary-600);
  color:var(--pw-primary-600);
  background:rgba(35,115,105,.08);
}
.conocenos-nav__cta .btn--outline:visited{
  color:var(--pw-primary);
}

/* ==========================================================================
   PÀGINA: EL CENTRO (src/pages/conocenos/el-centro.html)
   Dos espacios. Un mismo proceso. (Fisioterapia | Strength & Pilates)
   ========================================================================== */

/* 1. HERO SPLIT */
.center-hero{
  padding-top:clamp(6.5rem,11vh,9rem);
  padding-bottom:var(--sp-12);
  background:var(--pw-white);
}
.center-hero__head{
  max-width:860px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:var(--sp-10);
}
.center-hero__eyebrow{
  letter-spacing:.14em;
  color:var(--pw-primary);
  font-weight:600;
  font-size:var(--fs-label);
  margin-bottom:var(--space-sm-md);
}
.center-hero__title{
  font-size:var(--fs-display);
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 var(--space-md-lg);
}
.center-hero__lead{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  max-width:62ch;
  margin-inline:auto;
  line-height:1.55;
  margin-bottom:var(--sp-6);
}
.center-hero__nav-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--sp-3);
}
.center-hero__btn-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem 1.4rem;
  border-radius:999px;
  border:1px solid var(--pw-line);
  background:var(--pw-white);
  color:var(--pw-ink);
  font-size:var(--fs-small);
  font-weight:500;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(18,32,29,.04);
  transition:all var(--dur-fast) var(--ease-out);
}
.center-hero__btn-pill:hover{
  border-color:var(--pw-primary);
  color:var(--pw-primary);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(35,115,105,.12);
}
.center-hero__btn-arrow{
  color:var(--pw-primary);
  font-weight:600;
  transition:transform var(--dur-fast) var(--ease-out);
}
.center-hero__btn-pill:hover .center-hero__btn-arrow{
  transform:translateY(2px);
}

/* Escenari split-screen */
.center-hero__split-stage{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,2.75rem);
}
@media (min-width:860px){
  .center-hero__split-stage{
    grid-template-columns:1fr 1fr;
    gap:var(--sp-6);
  }
}
.center-hero__panel{
  position:relative;
  min-height:clamp(360px,46vh,520px);
  border-radius:var(--radius-tile, 20px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 8px 24px rgba(18,32,29,.08);
  isolation:isolate;
}
.center-hero__media{
  position:absolute;
  inset:0;
  z-index:1;
}
.center-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--dur-slow) var(--ease-emphatic);
}
.center-hero__panel-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(18,32,29,0.05) 0%, rgba(18,32,29,0.3) 45%, rgba(18,32,29,0.88) 100%);
  transition:background var(--dur-med) var(--ease-out);
}
.center-hero__panel-info{
  position:relative;
  z-index:3;
  color:#ffffff;
}
.center-hero__panel-tag{
  display:block;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  color:#8fd9c9;
  margin-bottom:.35rem;
}
.center-hero__panel-name{
  font-size:clamp(1.75rem,3.2vw,2.4rem);
  font-weight:500;
  color:#ffffff;
  line-height:1.15;
  margin:0 0 .45rem;
}
.center-hero__panel-desc{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.88);
  line-height:1.5;
  max-width:38ch;
  margin:0;
}
@media (hover:hover) and (min-width:860px){
  .center-hero__split-stage:hover .center-hero__panel{
    opacity:.92;
  }
  .center-hero__split-stage .center-hero__panel:hover{
    opacity:1;
  }
  .center-hero__panel:hover .center-hero__media img{
    transform:scale(1.04);
  }
}

/* 2. INTRODUCCIÓ EDITORIAL */
.center-intro{
  padding-block:var(--space-section);
  background:var(--pw-mist);
  border-block:1px solid var(--pw-line);
}
.center-intro__grid{
  display:grid;
  gap:var(--sp-8);
}
@media (min-width:860px){
  .center-intro__grid{
    grid-template-columns:1fr 1.15fr;
    gap:var(--sp-16);
    align-items:start;
  }
}
.center-intro__title{
  margin-top:.35rem;
  max-width:18ch;
}
.center-intro__lead{
  font-size:var(--fs-lead);
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.55;
  margin-bottom:var(--sp-4);
}
.center-intro__text{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.65;
  margin-bottom:var(--sp-4);
}

/* 3. EXPLORADOR INTERACTIU */
.center-explorer{
  padding-block:var(--space-section);
  background:var(--pw-white);
}
.center-explorer__header{
  text-align:center;
  max-width:820px;
  margin-inline:auto;
  margin-bottom:var(--sp-12);
}
.center-explorer__subtitle{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  margin-top:.4rem;
  margin-bottom:var(--sp-8);
}
.center-explorer__switcher{
  display:inline-grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
  padding:var(--sp-2);
  background:var(--pw-mist);
  border:1px solid var(--pw-line);
  border-radius:var(--radius);
  width:100%;
  max-width:720px;
  margin-inline:auto;
}
@media (min-width:640px){
  .center-explorer__switcher{
    grid-template-columns:1fr 1fr;
  }
}
.center-explorer__tab{
  text-align:left;
  padding:var(--sp-4) var(--sp-5);
  background:transparent;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.25s var(--ease-out);
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-family:var(--font-base);
  min-height:56px;
  -webkit-tap-highlight-color:transparent;
}
.center-explorer__tab:focus-visible{
  outline:2px solid var(--pw-primary);
  outline-offset:2px;
}
.center-explorer__tab.is-active{
  background:var(--pw-white);
  border-color:rgba(18,32,29,.12);
  box-shadow:0 4px 18px rgba(18,32,29,.08);
}
.center-explorer__tab-num{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--pw-ink-50);
  transition:color var(--dur-fast) ease;
}
.center-explorer__tab.is-active .center-explorer__tab-num{
  color:var(--pw-primary);
}
.center-explorer__tab-title{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-ink);
}
.center-explorer__tab-meta{
  font-size:var(--fs-small);
  color:var(--pw-ink-50);
}
.center-explorer__tab:not(.is-active):hover{
  background:rgba(255,255,255,.65);
}

.center-explorer__panels{
  margin-top:var(--sp-10);
  position:relative;
}
.center-explorer__panel{
  display:none;
}
.center-explorer__panel.is-active{
  display:block;
  animation:centerPanelFade 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Garantir que el contingut intern no quedi ocult per data-reveal */
.center-explorer__content,
.center-explorer__visual{
  opacity:1 !important;
  transform:none !important;
}
@keyframes centerPanelFade{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .center-explorer__panel.is-active{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

.center-explorer__grid{
  display:grid;
  gap:var(--sp-10);
}
@media (min-width:960px){
  .center-explorer__grid{
    grid-template-columns:1fr 1.15fr;
    gap:var(--sp-12);
    align-items:center;
  }
}
.center-explorer__badge{
  display:inline-block;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:var(--sp-3);
  padding:4px 10px;
  border-radius:999px;
}
.center-explorer__badge--fisio{
  color:var(--pw-primary);
  background:rgba(26,92,79,.08);
}
.center-explorer__badge--strength{
  color:#14493e;
  background:rgba(20,73,62,.12);
}
.center-explorer__panel-title{
  font-size:var(--fs-h2);
  font-weight:500;
  color:var(--pw-ink);
  line-height:1.2;
  margin:0 0 var(--sp-4);
}
.center-explorer__desc{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.65;
  margin-bottom:var(--sp-8);
}
.center-explorer__features{
  display:grid;
  gap:var(--sp-4);
  padding-top:var(--sp-6);
  border-top:1px solid var(--pw-line);
}
.center-explorer__feature{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:var(--sp-3);
  align-items:start;
}
.center-explorer__feature-num{
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--pw-primary);
  padding-top:2px;
}
.center-explorer__badge--strength ~ .center-explorer__features .center-explorer__feature-num,
#panel-strength .center-explorer__feature-num{
  color:#14493e;
}
.center-explorer__feature-name{
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--pw-ink);
  margin:0 0 .2rem;
}
.center-explorer__feature-text{
  font-size:var(--fs-small);
  color:var(--pw-ink-70);
  line-height:1.5;
  margin:0;
}

.center-explorer__main-media{
  margin:0;
  border-radius:var(--radius-tile, 20px);
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--pw-mist);
  box-shadow:0 8px 24px rgba(18,32,29,.06);
}
.center-explorer__main-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.center-explorer__caption{
  font-size:var(--fs-label);
  color:var(--pw-ink-50);
  margin-top:var(--sp-2);
  text-align:right;
}
.center-explorer__detail-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
  margin-top:var(--sp-4);
}
.center-explorer__sub-media{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--pw-mist);
}
.center-explorer__sub-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.center-explorer__sub-caption{
  font-size:var(--fs-label);
  color:var(--pw-ink-70);
  font-weight:500;
  margin-top:.35rem;
}

/* Pont visual cap a la continuïtat */
.center-explorer__bridge{
  margin-top:var(--sp-16);
  padding-top:var(--sp-8);
  border-top:1px dashed var(--pw-line);
  text-align:center;
  max-width:680px;
  margin-inline:auto;
}
.center-explorer__bridge-caption{
  font-size:var(--fs-small);
  color:var(--pw-ink-70);
  font-weight:500;
  line-height:1.5;
  margin:0;
}

/* 4. CONTINUÏTAT */
.center-continuity{
  padding-block:var(--space-section);
  background:var(--pw-primary-900);
  color:#ffffff;
}
.center-continuity .section-eyebrow{
  color:#8fd9c9;
}
.center-continuity__title{
  color:#ffffff;
  max-width:24ch;
}
.center-continuity__lead{
  color:rgba(255,255,255,.82);
  font-size:var(--fs-lead);
  max-width:62ch;
  line-height:1.6;
  margin-top:var(--sp-3);
}
.center-continuity__track-wrap{
  margin-top:var(--sp-12);
  padding-top:var(--sp-8);
  border-top:1px solid rgba(255,255,255,.2);
}
.center-continuity__poles{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-4);
  margin-bottom:var(--sp-8);
}
.center-continuity__pole{
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.12em;
  color:#8fd9c9;
  text-transform:uppercase;
}
.center-continuity__pole-separator{
  flex:1;
  height:2px;
  background:linear-gradient(90deg, rgba(143,217,201,.85) 0%, rgba(255,255,255,.4) 50%, rgba(143,217,201,.85) 100%);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.center-continuity__track-wrap.is-visible .center-continuity__pole-separator{
  transform:scaleX(1);
}

.center-continuity__steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media (min-width:960px){
  .center-continuity__steps{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:var(--sp-2);
  }
}
@media (max-width:959px){
  .center-continuity__steps{
    display:flex;
    flex-direction:column;
    gap:var(--sp-5);
    position:relative;
    padding-left:var(--sp-6);
    border-left:2px solid rgba(143,217,201,.3);
    margin-left:var(--sp-2);
    margin-top:var(--sp-8);
  }
  .center-continuity__step-arrow{
    display:none !important;
  }
  .center-continuity__step::before{
    content:"";
    position:absolute;
    left:calc(-1 * var(--sp-6) - 5px);
    top:12px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8fd9c9;
    box-shadow:0 0 0 4px rgba(143,217,201,.2);
    transition:transform 0.2s ease, background 0.2s ease;
  }
  .center-continuity__step.is-selected::before,
  .center-continuity__step:hover::before{
    background:#ffffff;
    transform:scale(1.3);
    box-shadow:0 0 0 6px rgba(143,217,201,.4);
  }
}

.center-continuity__step{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:var(--sp-3) var(--sp-3);
  border-radius:var(--radius-sm, 10px);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  outline:none;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  -webkit-tap-highlight-color:transparent;
}
.center-continuity__track-wrap.is-visible .center-continuity__step{
  opacity:1;
  transform:translateY(0);
}
.center-continuity__track-wrap.is-visible .center-continuity__step:nth-child(1){ transition-delay:0.08s; }
.center-continuity__track-wrap.is-visible .center-continuity__step:nth-child(3){ transition-delay:0.18s; }
.center-continuity__track-wrap.is-visible .center-continuity__step:nth-child(5){ transition-delay:0.28s; }
.center-continuity__track-wrap.is-visible .center-continuity__step:nth-child(7){ transition-delay:0.38s; }
.center-continuity__track-wrap.is-visible .center-continuity__step:nth-child(9){ transition-delay:0.48s; }

.center-continuity__step:hover,
.center-continuity__step:focus-visible,
.center-continuity__step.is-selected{
  background:rgba(255,255,255,.08);
  border-color:rgba(143,217,201,.35);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.center-continuity__step:focus-visible{
  outline:2px solid #8fd9c9;
  outline-offset:2px;
}
.center-continuity__step-num{
  font-size:var(--fs-label);
  font-weight:700;
  color:#8fd9c9;
  letter-spacing:.05em;
  transition:transform 0.2s ease, color 0.2s ease;
  display:inline-block;
}
.center-continuity__step:hover .center-continuity__step-num,
.center-continuity__step.is-selected .center-continuity__step-num{
  color:#b7faec;
  transform:scale(1.08);
}
.center-continuity__step-name{
  font-size:var(--fs-h3);
  font-weight:500;
  color:#ffffff;
  transition:color 0.2s ease;
}
.center-continuity__step-desc{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.76);
  line-height:1.5;
  transition:color 0.2s ease;
}
.center-continuity__step:hover .center-continuity__step-desc,
.center-continuity__step.is-selected .center-continuity__step-desc{
  color:rgba(255,255,255,.95);
}

@media (hover: hover) and (min-width:960px){
  .center-continuity__steps:hover .center-continuity__step:not(:hover):not(.is-selected){
    opacity:0.65;
  }
}

.center-continuity__step-arrow{
  display:none;
}
@media (min-width:960px){
  .center-continuity__step-arrow{
    display:block;
    color:rgba(255,255,255,.3);
    font-size:1.25rem;
    padding-top:var(--sp-6);
  }
}
@media (prefers-reduced-motion: reduce){
  .center-continuity__pole-separator{
    transform:none !important;
    transition:none !important;
  }
  .center-continuity__step{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}
.center-continuity__note{
  margin-top:var(--sp-8);
  font-size:var(--fs-small);
  color:rgba(255,255,255,.62);
  font-style:italic;
  line-height:1.5;
}

/* 5. EL CENTRO EN MOVIMIENTO */
.center-motion{
  padding-block:var(--space-section);
  background:var(--pw-mist);
  border-bottom:1px solid var(--pw-line);
}
.center-motion__head{
  max-width:800px;
  margin-bottom:var(--sp-12);
}
.center-motion__lead{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  margin-top:var(--sp-3);
  line-height:1.6;
}
.center-motion__gallery{
  display:grid;
  gap:var(--sp-6);
}
@media (min-width:860px){
  .center-motion__gallery{
    grid-template-columns:repeat(3, 1fr);
    gap:var(--sp-8);
  }
}
.center-motion__card{
  margin:0;
  display:flex;
  flex-direction:column;
  background:var(--pw-white);
  border:1px solid var(--pw-line);
  border-radius:var(--radius-tile, 20px);
  overflow:hidden;
}
.center-motion__media{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--pw-mist);
}
.center-motion__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.center-motion__card:hover .center-motion__media img{
  transform:scale(1.03);
}
.center-motion__caption{
  padding:var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.center-motion__caption strong{
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--pw-ink);
}
.center-motion__caption span{
  font-size:var(--fs-small);
  color:var(--pw-ink-70);
  line-height:1.5;
}

/* 6. DETALLS DEL CENTRO */
.center-details{
  padding-block:var(--space-section);
  background:var(--pw-white);
}
.center-details__head{
  max-width:780px;
  margin-bottom:var(--sp-12);
}
.center-details__lead{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  margin-top:var(--sp-3);
}
.center-details__list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--pw-line);
}
.center-details__item{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  padding-block:var(--sp-8);
  border-bottom:1px solid var(--pw-line);
  align-items:center;
}
@media (min-width:860px){
  .center-details__item{
    grid-template-columns:80px 1fr 280px;
    gap:var(--sp-8);
  }
}
.center-details__num{
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:500;
  color:var(--pw-primary);
  letter-spacing:-.02em;
  line-height:1;
}
.center-details__title{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-ink);
  margin:0 0 .4rem;
}
.center-details__text{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.6;
  margin:0;
  max-width:54ch;
}
.center-details__figure{
  margin:0;
  border-radius:var(--radius-tile, 20px);
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--pw-mist);
}
.center-details__figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 7. UBICACIÓ */
.center-location{
  border-top:1px solid var(--pw-line);
}
.center-location__intro-text{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.6;
  margin-top:var(--sp-3);
  margin-bottom:var(--sp-6);
}

/* 8. CONNEXIÓ CONÓCENOS I CTA FINAL */
.center-next{
  padding-block:var(--space-section);
  background:var(--pw-mist);
  border-top:1px solid var(--pw-line);
}
.center-next__intro{
  text-align:center;
  max-width:700px;
  margin-inline:auto;
  margin-bottom:var(--sp-12);
}
.center-next__lead{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  margin-top:var(--sp-3);
}
.center-next__grid{
  display:grid;
  gap:var(--sp-6);
  max-width:960px;
  margin-inline:auto;
}
@media (min-width:720px){
  .center-next__grid{
    grid-template-columns:1fr 1fr;
    gap:var(--sp-8);
  }
}
.center-next__card{
  background:var(--pw-white);
  border:1px solid var(--pw-line);
  border-radius:var(--radius-tile, 20px);
  padding:clamp(1.5rem,3vw,2.5rem);
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 16px rgba(18,32,29,.04);
  transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.center-next__card:hover{
  transform:translateY(-3px);
  border-color:var(--pw-primary);
}
.center-next__tag{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  color:var(--pw-primary);
  margin-bottom:var(--sp-2);
  display:block;
}
.center-next__card-title{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-ink);
  margin:0 0 .5rem;
  line-height:1.3;
}
.center-next__desc{
  font-size:var(--fs-body);
  color:var(--pw-ink-70);
  line-height:1.6;
  margin:0 0 var(--sp-6);
  flex:1;
}
.center-next__action{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--pw-primary);
  text-decoration:none;
  transition:gap var(--dur-fast) var(--ease-out);
}
.center-next__card:hover .center-next__action{
  gap:.85rem;
  color:var(--pw-primary-600);
}

.center-next__cta-block{
  margin-top:var(--sp-16);
  padding:clamp(2rem,4vw,3.5rem);
  background:var(--pw-white);
  border:1px solid var(--pw-line);
  border-radius:var(--radius-tile, 20px);
  text-align:center;
  max-width:860px;
  margin-inline:auto;
  box-shadow:0 4px 20px rgba(18,32,29,.04);
}
.center-next__cta-title{
  font-size:var(--fs-h2);
  font-weight:500;
  color:var(--pw-ink);
  margin:0 0 .5rem;
}
.center-next__cta-text{
  font-size:var(--fs-lead);
  color:var(--pw-ink-70);
  max-width:50ch;
  margin:0 auto var(--sp-6);
  line-height:1.6;
}
.center-next__cta-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--sp-4);
}
.center-next__btn-wa{
  border-color:var(--pw-primary);
  color:var(--pw-primary);
}
.center-next__btn-wa:hover{
  background:rgba(35,115,105,.08);
}

/* ==========================================================================
   PÁGINA: PRIMERA VISITA / PRIMERA SESIÓN (CONÓCENOS)
   ========================================================================== */

/* ----- 1. Hero Específico de Primera Visita ----- */
.visit-hero {
  padding-top: clamp(7.5rem, 14vh, 10.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.visit-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .visit-hero__grid {
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(3.5rem, 6vw, 6rem);
  }
}
.visit-hero__badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.visit-hero__badge-row .section-eyebrow {
  margin-bottom: 0;
}
.visit-hero__duration {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pw-primary);
  background: rgba(35, 115, 105, .08);
  padding: .3rem .75rem;
  border-radius: 999px;
}
.visit-hero__duration-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pw-primary);
}
.visit-hero__title {
  font-size: clamp(2.35rem, 4.4vw, 3.85rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pw-ink);
  margin: 0 0 var(--space-md-lg);
  max-width: 24ch;
}
.visit-hero__lead {
  font-size: var(--fs-lead);
  color: var(--pw-ink-70);
  line-height: 1.55;
  margin: 0 0 var(--sp-8);
  max-width: 44ch;
}
.visit-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.visit-hero__micro {
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--pw-ink-50);
  margin: 0;
  max-width: 42ch;
  line-height: 1.45;
}
.visit-hero__frame {
  margin: 0;
  position: relative;
  border-radius: var(--radius-tile, 20px);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 20px 48px -12px rgba(18, 32, 29, .14);
}
.visit-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform .6s var(--ease-out);
}
.visit-hero__frame:hover img {
  transform: scale(1.02);
}
.visit-hero__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(0deg, rgba(18, 32, 29, .88) 0%, rgba(18, 32, 29, 0) 100%);
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.visit-hero__caption-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pw-accent);
  flex-shrink: 0;
}

/* ----- 2. Bloque Editorial: No necesitas saber qué te pasa ----- */
.visit-intro {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}
.visit-intro__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.visit-intro__eyebrow {
  justify-content: center;
  color: var(--pw-primary);
  margin-bottom: var(--space-sm-md);
}
.visit-intro__heading {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
}
.visit-intro__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--pw-ink-70);
  margin: 0 auto;
  max-width: 48ch;
}

/* ----- 3. Recorrido Interactivo: Así será tu primera visita ----- */
.visit-journey {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.visit-journey__head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.visit-journey__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 960px) {
  .visit-journey__grid {
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.1fr);
    gap: clamp(3rem, 5.5vw, 5.5rem);
    align-items: start;
  }
}

/* Timeline lista de pasos */
.visit-journey__nav {
  position: relative;
}
.visit-journey__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.visit-journey__step {
  position: relative;
  padding-bottom: var(--sp-3);
}
.visit-journey__step:last-child {
  padding-bottom: 0;
}
/* Línea vertical del timeline */
.visit-journey__step::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--pw-line);
  transition: background var(--dur-normal) var(--ease-out);
}
.visit-journey__step:last-child::before {
  display: none;
}
.visit-journey__step.is-done::before {
  background: var(--pw-primary);
}

.visit-journey__btn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all var(--dur-fast) var(--ease-out);
}
.visit-journey__btn:hover {
  background: rgba(35, 115, 105, .03);
  border-color: rgba(35, 115, 105, .12);
}
.visit-journey__btn:focus-visible {
  outline: 2px solid var(--pw-accent);
  outline-offset: 2px;
}
.visit-journey__step.is-active .visit-journey__btn {
  background: rgba(35, 115, 105, .05);
  border-color: rgba(35, 115, 105, .2);
  box-shadow: 0 4px 16px rgba(35, 115, 105, .06);
}

.visit-journey__marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--pw-line);
  background: var(--pw-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.visit-journey__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.visit-journey__step.is-active .visit-journey__marker {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
  box-shadow: 0 0 0 4px rgba(35, 115, 105, .16);
}
.visit-journey__step.is-active .visit-journey__dot {
  background: var(--pw-white);
}
.visit-journey__step.is-done .visit-journey__marker {
  border-color: var(--pw-primary);
  background: var(--pw-white);
}
.visit-journey__step.is-done .visit-journey__dot {
  background: var(--pw-primary);
}

.visit-journey__info {
  flex: 1 1 auto;
  min-width: 0;
}
.visit-journey__num-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}
.visit-journey__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--pw-primary);
}
.visit-journey__step-tag {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pw-ink-50);
}
.visit-journey__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.3;
  margin: 0 0 .35rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.visit-journey__step.is-active .visit-journey__title {
  color: var(--pw-primary);
}
.visit-journey__summary {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.45;
  margin: 0;
}

/* Escenario sticky dinámico */
@media (min-width: 960px) {
  .visit-journey__stage {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
}
.journey-card {
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius-tile, 20px);
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(18, 32, 29, .08);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.journey-card[hidden] {
  display: none;
}
.journey-card.is-active {
  animation: journeyFadeIn .35s var(--ease-out);
}
@keyframes journeyFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.journey-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--pw-primary-900);
}
.journey-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.journey-card__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: rgba(18, 32, 29, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-weight: 500;
}
.journey-card__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.journey-card__eyebrow {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pw-primary);
  font-weight: 600;
  margin-bottom: .5rem;
}
.journey-card__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.25;
  margin: 0 0 var(--sp-3);
}
.journey-card__text {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
}
.journey-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--pw-line);
}
.journey-card__meta-item {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  color: var(--pw-ink-70);
  background: var(--pw-white);
  padding: .25rem .65rem;
  border-radius: var(--radius);
  border: 1px solid var(--pw-line);
}

/* ----- 4. Qué pasa realmente durante la sesión ----- */
.visit-breakdown {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.visit-breakdown__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .visit-breakdown__grid {
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(3.5rem, 6vw, 6rem);
  }
}
.visit-breakdown__list {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.visit-breakdown__item {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--pw-primary);
}
.visit-breakdown__item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0 0 .3rem;
}
.visit-breakdown__item-desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin: 0;
}
.visit-breakdown__frame {
  margin: 0;
  border-radius: var(--radius-tile, 20px);
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(18, 32, 29, .1);
}
.visit-breakdown__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.visit-breakdown__caption {
  font-size: .8rem;
  color: var(--pw-ink-50);
  padding-top: var(--sp-3);
  text-align: center;
  font-style: italic;
}

/* ----- 5. Antes de venir ----- */
.visit-before {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}
.visit-before__head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.visit-before__layout {
  max-width: 52rem;
}

/* ----- 6. Información práctica de la consulta (Retícula editorial) ----- */
.visit-facts {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.visit-facts__head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}
.visit-facts__grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--pw-line);
  background: var(--pw-line);
  gap: 1px;
}
@media (min-width: 640px) {
  .visit-facts__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .visit-facts__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.visit-facts__cell {
  background: var(--pw-white);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}
.visit-facts__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pw-primary);
  margin-bottom: var(--sp-3);
}
.visit-facts__val {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
.visit-facts__desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin: 0;
  margin-top: auto;
}
.visit-facts__footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
@media (min-width: 860px) {
  .visit-facts__footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.visit-facts__footer-note {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  max-width: 48ch;
  line-height: 1.5;
}
.visit-facts__footer-note strong {
  color: var(--pw-ink);
}

/* ----- 7. ¿Y después de la primera visita? ----- */
.visit-continuity {
  padding-block: var(--space-section);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}
.visit-continuity__head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.visit-continuity__paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .visit-continuity__paths {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .visit-continuity__paths {
    grid-template-columns: repeat(5, 1fr);
  }
}
.continuity-path {
  background: var(--pw-white);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.continuity-path:hover {
  transform: translateY(-3px);
  border-color: rgba(35, 115, 105, .3);
  box-shadow: 0 10px 24px -6px rgba(18, 32, 29, .08);
}
.continuity-path__badge {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--pw-primary);
  margin-bottom: var(--sp-3);
}
.continuity-path__title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.25;
  margin: 0 0 var(--sp-2);
}
.continuity-path__desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin: 0;
}
.visit-continuity__bridge {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.visit-continuity__bridge-card {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
@media (min-width: 860px) {
  .visit-continuity__bridge-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.visit-continuity__bridge-eyebrow {
  margin-bottom: .25rem;
  color: var(--pw-primary);
}
.visit-continuity__bridge-title {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--pw-ink);
  margin: 0 0 .4rem;
}
.visit-continuity__bridge-lead {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  margin: 0;
  max-width: 44ch;
}

/* ----- 8. Mini FAQ ----- */
.visit-faq {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.faq__help-link {
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.faq__help-link a {
  color: var(--pw-primary);
  text-decoration: none;
  font-weight: 500;
}
.faq__help-link a:hover {
  text-decoration: underline;
}

/* ----- 9. Testimonial de Confianza ----- */
.visit-quote {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}

/* ----- 10. CTA Final de Conversión ----- */
.visit-cta {
  padding-block: clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(38,152,136,.28) 0%, rgba(38,152,136,0) 60%),
    var(--pw-primary-900);
}
.visit-cta .cta-final__actions {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  gap: var(--sp-4);
}

/* ==========================================================================
   PÁGINA DE CONTACTO (REDISEÑO EDITORIAL COMPLETO)
   Estilos dedicados para la página Contacto de Physio Wellness.
   Diseño editorial, limpio, asimétrico, humano y sin cards genéricas.
   ========================================================================== */

/* ----- 1. Hero Contacto: Editorial Asimétrico (70–80vh) ----- */
.contact-hero {
  min-height: clamp(34rem, 74vh, 46rem);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 7vw, 6rem);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .contact-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(3rem, 5vw, 5.5rem);
  }
}
.contact-hero__content {
  max-width: 44rem;
}
.contact-hero__eyebrow {
  margin-bottom: var(--space-sm-md);
}
.contact-hero__title {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pw-ink);
  margin-bottom: var(--space-md-lg);
  font-weight: 500;
}
.contact-hero__lead {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.62;
  color: var(--pw-ink-70);
  margin-bottom: var(--space-xl);
  max-width: 46ch;
}
.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.contact-hero__cta-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  padding: 0.85rem 1.6rem;
}
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(4px);
}
.btn--secondary-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.45rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1.5px solid rgba(35, 115, 105, 0.35);
  color: var(--pw-primary);
  background: rgba(35, 115, 105, 0.05);
  transition: all var(--dur-fast) var(--ease-out);
}
.btn--secondary-wa:hover,
.btn--secondary-wa:focus-visible {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
  color: var(--pw-white);
  transform: translateY(-2px);
}
.btn--secondary-wa:visited {
  color: var(--pw-primary);
}
.btn--secondary-wa:hover:visited {
  color: var(--pw-white);
}
.icon-wa {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn--secondary-wa:hover .icon-wa {
  transform: scale(1.05);
}

/* Imagen y frame del Hero */
.contact-hero__visual {
  position: relative;
}
.contact-hero__figure {
  margin: 0;
  position: relative;
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pw-mist);
  box-shadow: 0 10px 30px rgba(18, 32, 29, 0.04);
}
.contact-hero__picture {
  display: block;
}
.contact-hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.contact-hero__caption {
  padding: var(--sp-4) var(--sp-5);
  background: var(--pw-white);
  border-top: 1px solid var(--pw-line);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.contact-hero__badge {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-primary);
  font-weight: 600;
}
.contact-hero__caption-sub {
  font-size: 0.88rem;
  color: var(--pw-ink-70);
  font-weight: 400;
}

/* ----- 2. Bloque Principal: Hablemos + Formulario Integrado ----- */
.contact-main {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}
.contact-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 6rem);
}
@media (min-width: 960px) {
  .contact-main__grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

/* Columna Izquierda: Información de contacto editorial */
.contact-info {
  display: flex;
  flex-direction: column;
}
.contact-info__head {
  margin-bottom: var(--space-xl);
}
.contact-info__eyebrow {
  margin-bottom: var(--space-sm-md);
}
.contact-info__title {
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  color: var(--pw-ink);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin-bottom: var(--space-md-lg);
  font-weight: 500;
}
.contact-info__intro {
  font-size: var(--fs-lead);
  color: var(--pw-ink-70);
  line-height: 1.6;
  max-width: 44ch;
}
.contact-info__items {
  display: flex;
  flex-direction: column;
}
.contact-info__entry {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--pw-line);
}
.contact-info__entry:last-child {
  border-bottom: 1px solid var(--pw-line);
}
.contact-info__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pw-primary);
  font-weight: 600;
}
.contact-info__val {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.45;
}
.contact-info__val--link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-info__val--link:hover {
  color: var(--pw-accent);
}
.contact-info__icon-arrow {
  font-size: 0.95rem;
  opacity: 0.6;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.contact-info__val--link:hover .contact-info__icon-arrow {
  transform: translate(3px, -3px);
  opacity: 1;
}
.contact-info__hint {
  font-size: 0.9rem;
  color: var(--pw-primary);
  font-weight: 500;
  margin-left: 0.35rem;
}
.contact-info__schedule {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-info__hours {
  font-size: 1.05rem;
  color: var(--pw-ink);
  font-weight: 500;
}
.contact-info__subtext {
  font-size: 0.88rem;
  color: var(--pw-ink-70);
  margin-top: 0.15rem;
}
.contact-info__address {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-info__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--pw-primary);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-info__directions:hover {
  color: var(--pw-accent);
  text-decoration: underline;
}

/* Columna Derecha: Formulario integrado (sin caja genérica) */
.contact-form-wrap {
  background: transparent;
  display: flex;
  flex-direction: column;
}
@media (min-width: 960px) {
  .contact-form-wrap {
    padding-left: clamp(1rem, 2vw, 2.5rem);
    border-left: 1px solid var(--pw-line);
  }
}
.contact-form__head {
  margin-bottom: var(--sp-6);
}
.contact-form__title {
  font-size: var(--fs-h3);
  color: var(--pw-ink);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}
.contact-form__desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.55;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.form-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--pw-ink);
  margin-bottom: 0.2rem;
}
.form-req {
  color: var(--pw-primary);
  font-weight: 600;
}
.form-opt {
  font-size: 0.75rem;
  color: var(--pw-ink-50);
  font-weight: 400;
}
.form-input,
.form-textarea {
  width: 100%;
  font-family: var(--font-base);
  font-size: 0.95rem;
  color: var(--pw-ink);
  background: #ffffff;
  border: 1px solid rgba(18, 32, 29, 0.16);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.form-input:hover,
.form-textarea:hover {
  border-color: rgba(18, 32, 29, 0.35);
}
.form-textarea {
  resize: vertical;
  min-height: 8rem;
}
.form-input:focus-visible,
.form-textarea:focus-visible {
  border-color: var(--pw-primary);
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(35, 115, 105, 0.12);
}
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #c53030;
  background: #fffafa;
}
.form-error-text {
  font-size: 0.78rem;
  color: #c53030;
  line-height: 1.3;
  display: none;
}
.form-group.has-error .form-error-text {
  display: block;
}
.form-privacy {
  font-size: 0.82rem;
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin-top: var(--sp-1);
}
.form-privacy a {
  color: var(--pw-primary);
  text-decoration: underline;
}
.contact-form__submit {
  margin-top: var(--space-lg);
  width: 100%;
  justify-content: center;
  padding-block: 0.95rem;
  font-size: 1rem;
  gap: 0.5rem;
}

/* Notificación de estado del formulario */
.form-notice {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-left: 4px solid var(--pw-primary);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(18, 32, 29, 0.04);
}
.form-notice__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin-bottom: 0.35rem;
}
.form-notice__text {
  font-size: 0.85rem;
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.form-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.form-notice--success {
  border-left-color: var(--pw-primary);
  background: rgba(35, 115, 105, 0.04);
}
.form-notice--success .form-notice__title {
  color: var(--pw-primary);
}
.form-notice--error {
  border-left-color: #c53030;
  background: #fffafa;
}
.form-notice--error .form-notice__title {
  color: #c53030;
}
.contact-form__submit.is-loading {
  pointer-events: none;
  opacity: 0.85;
  cursor: wait;
}
.contact-form__submit .btn__spinner {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: pwSpinner 0.7s linear infinite;
}
.contact-form__submit.is-loading .btn__spinner {
  display: inline-block;
}
.contact-form__submit.is-loading .btn__arrow {
  display: none;
}
@keyframes pwSpinner {
  to { transform: rotate(360deg); }
}

/* ----- 3. Sección: Elige cómo empezar ----- */
.contact-guide {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.contact-guide__head {
  max-width: 44rem;
  margin-bottom: var(--space-2xl);
}
.contact-guide__eyebrow {
  margin-bottom: var(--space-sm-md);
}
.contact-guide__title {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pw-ink);
  margin-bottom: var(--space-md-lg);
  font-weight: 500;
}
.contact-guide__lead {
  font-size: var(--fs-lead);
  color: var(--pw-ink-70);
  line-height: 1.6;
}
.contact-guide__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 800px) {
  .contact-guide__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}
.contact-guide__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid var(--pw-line);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contact-guide__item:hover {
  border-color: var(--pw-primary);
  transform: translateY(-3px);
}
.contact-guide__item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-5);
}
.contact-guide__num {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--pw-primary);
  letter-spacing: -0.02em;
}
.contact-guide__arrow {
  font-size: 1.3rem;
  color: var(--pw-ink-50);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contact-guide__item:hover .contact-guide__arrow {
  color: var(--pw-primary);
  transform: translateX(4px);
}
.contact-guide__item:hover .contact-guide__arrow[aria-hidden="true"]:not([style]) {
  transform: translateX(4px);
}
.contact-guide__name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-ink);
  margin-bottom: var(--sp-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-guide__item:hover .contact-guide__name {
  color: var(--pw-primary);
}
.contact-guide__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
}

/* ----- 4. Sección Google Maps: Dónde estamos (Protagonismo) ----- */
.contact-map-section {
  padding-block: var(--space-section);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}
.contact-map-section__head {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-xl);
}
@media (min-width: 768px) {
  .contact-map-section__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-xl);
  }
}
.contact-map-section__info {
  max-width: 36rem;
}
.contact-map-section__eyebrow {
  margin-bottom: var(--space-sm-md);
}
.contact-map-section__title {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pw-ink);
  margin-bottom: var(--space-md-lg);
  font-weight: 500;
}
.contact-map-section__desc {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  line-height: 1.6;
}
.contact-map-section__action {
  margin-top: var(--space-md);
}
@media (min-width: 768px) {
  .contact-map-section__action {
    margin-top: 0;
    flex-shrink: 0;
  }
}
.contact-map__directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

/* Escenario y Viewport del Mapa con Overlay Editorial */
.contact-map__stage {
  position: relative;
  width: 100%;
}
.contact-map__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 26rem;
  max-height: 36rem;
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pw-white);
  box-shadow: 0 10px 30px rgba(18, 32, 29, 0.04);
}
.contact-map__viewport iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.contact-map__overlay {
  margin-top: var(--space-md);
  padding: var(--sp-5) var(--sp-6);
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
}
@media (min-width: 768px) {
  .contact-map__overlay {
    position: absolute;
    bottom: var(--sp-6);
    left: var(--sp-6);
    margin-top: 0;
    max-width: 22rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(18, 32, 29, 0.08);
  }
}
.contact-map__overlay-badge {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-primary);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.contact-map__overlay-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin-bottom: 0.25rem;
}
.contact-map__overlay-address {
  font-size: 0.85rem;
  color: var(--pw-ink-70);
  line-height: 1.45;
  margin-bottom: var(--space-sm);
}
.contact-map__overlay-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pw-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-map__overlay-link:hover {
  color: var(--pw-accent);
  text-decoration: underline;
}

/* ----- 5. Sección: Dos Espacios, Una Misma Ubicación ----- */
.contact-spaces {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}
.contact-spaces__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 840px) {
  .contact-spaces__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-2xl);
  }
}
.contact-spaces__head-left {
  max-width: 44rem;
}
.contact-spaces__eyebrow {
  margin-bottom: var(--space-sm-md);
}
.contact-spaces__title {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pw-ink);
  margin-bottom: var(--space-md-lg);
  font-weight: 500;
}
.contact-spaces__text {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  line-height: 1.6;
}
.contact-spaces__head-right {
  flex-shrink: 0;
}
.contact-spaces__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.contact-spaces__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .contact-spaces__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}
.contact-spaces__card {
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pw-mist);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.contact-spaces__card:hover {
  transform: translateY(-3px);
  border-color: rgba(35, 115, 105, 0.3);
  box-shadow: 0 12px 30px rgba(18, 32, 29, 0.05);
}
.contact-spaces__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.contact-spaces__picture {
  display: block;
}
.contact-spaces__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.contact-spaces__caption {
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-spaces__tag {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-primary);
  font-weight: 600;
}
.contact-spaces__card-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--pw-ink);
}
.contact-spaces__card-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pw-ink-70);
}

/* ----- 6. Cierre Emocional Único (Fondo Verde Oscuro) ----- */
.contact-closing-cta {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--pw-primary-900);
  color: var(--pw-white);
  text-align: center;
}
.contact-closing-cta .cta-final__inner {
  max-width: 52rem;
}
.contact-closing-cta__eyebrow {
  color: #8fd9c9;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-4);
  justify-content: center;
}
.contact-closing-cta .cta-final__title {
  font-size: clamp(1.65rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--pw-white);
  margin-bottom: var(--sp-5);
  max-width: 32ch;
}
.contact-closing-cta .cta-final__lead {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}
.contact-closing-cta .cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
}
.contact-closing-cta .btn--outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: var(--pw-white);
  background: transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.contact-closing-cta .btn--outline-dark:hover,
.contact-closing-cta .btn--outline-dark:focus-visible {
  border-color: var(--pw-white);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  color: var(--pw-white);
}
.contact-closing-cta .btn--outline-dark:visited {
  color: var(--pw-white);
}

/* FASE 3 (pulido, Fisioterapia): .photo-banner__inner/.cta-final__inner
   reparten título, texto y CTA con el mismo gap:sp-6 del flex en las dos
   franjas finales de esta página (Método Marshall y CTA final) — título
   y CTA quedaban a la misma distancia que título y subtítulo, sin salto
   claro antes del botón. Se sustituye por márgenes explícitos por
   relación: título→texto un salto claro, texto→CTA uno más generoso.
   Solo en esta página: en Método/Tarifas/Servicios/Stretching estos
   mismos componentes ya tienen su propio ajuste (p.ej. method-closing) y
   quedan fuera de esta revisión para no tocar nada ya resuelto. */
.page-physio .photo-banner__inner{gap:0;}
.page-physio .photo-banner__title + .photo-banner__lead,
.page-physio .cta-final__title + .cta-final__lead{margin-top:var(--sp-5);}
.page-physio .photo-banner__lead + .btn,
.page-physio .cta-final__lead + .cta-final__actions{margin-top:var(--sp-8);}

/* ----- "legal": cuerpo de texto legal (aviso legal, privacidad, cookies) -----
   Pensado para lectura larga, no para conversión: contenedor de ancho de
   línea reducido (~68ch), jerarquía H2/H3 discreta, listas y tablas de
   cookies adaptadas a móvil. Reutiliza tokens existentes, no introduce
   paleta ni tipografía nueva. */
.legal{padding-block:var(--space-section);}
.legal__container{display:flex;justify-content:center;}
.legal__body{width:100%;max-width:68ch;overflow-wrap:break-word;}
.legal__body > .legal__section + .legal__section{margin-top:var(--sp-16);}
.legal__body h2{
  font-size:var(--fs-h3);
  font-weight:500;
  color:var(--pw-primary-900);
  margin-bottom:var(--sp-5);
}
.legal__body h3{
  font-size:1.05rem;
  font-weight:600;
  color:var(--pw-primary);
  margin-top:var(--sp-8);
  margin-bottom:var(--sp-3);
}
.legal__body p{color:var(--pw-ink-70);line-height:1.75;}
.legal__body p + p{margin-top:var(--sp-4);}
.legal__body h2 + p,
.legal__body h3 + p{margin-top:0;}
.legal__body ul{display:grid;gap:var(--sp-3);margin-top:var(--sp-4);}
.legal__body li{
  position:relative;
  padding-left:var(--sp-6);
  color:var(--pw-ink-70);
  line-height:1.6;
}
.legal__body li::before{
  content:'';
  position:absolute;left:0;top:.65em;
  width:.4rem;height:.4rem;
  background:var(--pw-accent);
}
.legal__body a{color:var(--pw-primary);text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere;}
.legal__body a:hover{color:var(--pw-primary-600);}

.legal__facts{margin-top:var(--sp-4);display:grid;gap:var(--sp-2);}
.legal__facts li{padding-left:0;}
.legal__facts li::before{content:none;}
.legal__facts strong{color:var(--pw-ink);font-weight:600;}

.legal__table-wrap{margin-top:var(--sp-4);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.legal__table{width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:32rem;}
.legal__table caption{text-align:left;font-size:var(--fs-small);color:var(--pw-ink-50);margin-bottom:var(--sp-2);}
.legal__table th,
.legal__table td{
  text-align:left;
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--pw-line);
  color:var(--pw-ink-70);
  vertical-align:top;
}
.legal__table th{color:var(--pw-ink);font-weight:600;white-space:nowrap;}

.legal__meta{
  margin-top:var(--sp-16);
  padding-top:var(--sp-6);
  border-top:1px solid var(--pw-line);
  font-size:var(--fs-small);
  color:var(--pw-ink-50);
}

@media (max-width:639px){
  .legal__body h2{font-size:1.4rem;}
}

/* ==========================================================================
   PROGRAMA DE TEMPORADA — SNOW PERFORMANCE BY MARSHALL
   Componentes para Home (#programa-temporada), Página de Fuerza
   (.strength-seasonal) y Landing Completa (/snow-performance).
   ========================================================================== */

/* ---------- 1. Home: Bloque Programa de Temporada (SEASONAL TAKEOVER) ----------
   Gran experiencia cinematográfica de 80–100vh ubicada orgánicamente tras
   Método Marshall y antes de Primera Visita.
   Full-bleed, fotografía alpina de impacto, tipografía masiva editorial,
   marca de agua tipográfica gigante de fondo y transiciones lumínicas continuas. */
.seasonal-takeover {
  position: relative;
  min-height: clamp(82vh, 94vh, 104vh);
  display: flex;
  align-items: center;
  background-color: #0b1812;
  color: var(--pw-white);
  padding-block: clamp(6.5rem, 12vh, 10rem);
  overflow: hidden;
  box-sizing: border-box;
}

.seasonal-program--hidden {
  display: none !important;
}

/* Marca de agua tipográfica colosal */
.seasonal-program__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120vw;
  pointer-events: none;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
}

.seasonal-program__watermark-text {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 13.5vw, 13rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.05);
  display: block;
  line-height: 0.85;
}

/* Capa de fondo cinematográfica con parallax suave */
.seasonal-program__bg {
  position: absolute;
  inset: -8% 0;
  height: 116%;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

.seasonal-program__bg-media,
.seasonal-program__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  /* Estado de entrada: la montaña llega apagada, algo más cerca y con un
     leve desenfoque — "entrando en pista". Mismo easing de marca que
     [data-reveal] (var(--ease-emphatic)); snowTakeoverVideoInit() en
     main.js añade .is-in-view a .seasonal-takeover al hacer scroll hasta
     aquí. */
  transform: scale(1.06);
  filter: brightness(0.55) contrast(1.08) saturate(0.9) blur(5px);
  transition: transform 1.4s var(--ease-emphatic), filter 1.4s var(--ease-emphatic);
}

.seasonal-program__bg-media {
  /* Evita un destello claro del <video> mientras decodifica el primer
     fotograma (mismo tono que el overlay/fondo de la sección). */
  background-color: #0b1812;
}

/* Llegada a pista: la montaña cobra vida al entrar en viewport. */
.seasonal-takeover.is-in-view .seasonal-program__bg-media,
.seasonal-takeover.is-in-view .seasonal-program__bg-img {
  transform: scale(1);
  filter: brightness(0.88) contrast(1.08) saturate(0.95) blur(0);
}

@media (prefers-reduced-motion: reduce) {
  /* Sin animación de entrada: directamente el encuadre final, sin blur ni
     escala de aproximación. snowTakeoverVideoInit() ya evita cargar el
     vídeo en este caso, así que esto aplica siempre al poster/fotografía. */
  .seasonal-program__bg-media,
  .seasonal-program__bg-img {
    transition: none;
    transform: scale(1.02);
    filter: brightness(0.88) contrast(1.08) saturate(0.95);
  }
}

/* Veladuras de profundidad y contraste editorial.
   Estado inicial ligeramente más claro (se ve algo más de montaña) que se
   asienta, casi imperceptiblemente, al valor final (idéntico al de siempre)
   cuando .is-in-view se añade — mismo disparador que la llegada a pista del
   vídeo — para dirigir la atención hacia el contenido según va apareciendo. */
.seasonal-program__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 85% at 20% 50%, rgba(9, 22, 16, 0.82) 0%, rgba(11, 26, 19, 0.7) 45%, rgba(11, 24, 18, 0.36) 85%, transparent 100%),
    linear-gradient(90deg, rgba(9, 22, 16, 0.84) 0%, rgba(11, 26, 19, 0.74) 35%, rgba(11, 26, 19, 0.52) 60%, rgba(9, 22, 16, 0.24) 100%);
  pointer-events: none;
  z-index: 3;
  transition: background 1.3s var(--ease-emphatic);
  transition-delay: .15s;
}

.seasonal-takeover.is-in-view .seasonal-program__overlay {
  background:
    radial-gradient(ellipse 65% 85% at 20% 50%, rgba(9, 22, 16, 0.94) 0%, rgba(11, 26, 19, 0.82) 45%, rgba(11, 24, 18, 0.45) 85%, transparent 100%),
    linear-gradient(90deg, rgba(9, 22, 16, 0.96) 0%, rgba(11, 26, 19, 0.88) 35%, rgba(11, 26, 19, 0.65) 60%, rgba(9, 22, 16, 0.35) 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* Sin animación: directamente el degradado final de siempre, sin depender
     de .is-in-view (que con reduced-motion nunca llega a activarse porque
     el vídeo no se carga). */
  .seasonal-program__overlay {
    transition: none;
    background:
      radial-gradient(ellipse 65% 85% at 20% 50%, rgba(9, 22, 16, 0.94) 0%, rgba(11, 26, 19, 0.82) 45%, rgba(11, 24, 18, 0.45) 85%, transparent 100%),
      linear-gradient(90deg, rgba(9, 22, 16, 0.96) 0%, rgba(11, 26, 19, 0.88) 35%, rgba(11, 26, 19, 0.65) 60%, rgba(9, 22, 16, 0.35) 100%);
  }
}

.seasonal-program__glow {
  position: absolute;
  top: 25%;
  left: 15%;
  width: 50vw;
  height: 50vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 152, 136, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 3;
  filter: blur(40px);
}

/* Transición superior suave desde Servicios */
.seasonal-program__fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(5rem, 10vw, 8rem);
  background: linear-gradient(180deg, var(--pw-primary-900) 0%, rgba(11, 24, 18, 0.85) 65%, rgba(11, 24, 18, 0) 100%);
  pointer-events: none;
  z-index: 4;
}

/* Transición inferior continua hacia Método Marshall */
.seasonal-program__fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(6rem, 12vw, 10rem);
  background: linear-gradient(180deg, rgba(11, 24, 18, 0) 0%, rgba(18, 60, 55, 0.75) 45%, var(--pw-primary-900) 100%);
  pointer-events: none;
  z-index: 4;
}

/* Conexión editorial entre Snow Performance y Método Marshall */
.metodo-bridge {
  background: var(--pw-primary-900);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 2vw, 2.5rem);
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.metodo-bridge__text {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  max-width: 48ch;
  margin: 0 auto;
  letter-spacing: -0.01em;
  position: relative;
}

.metodo-bridge__text::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: rgba(143, 217, 201, 0.4);
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
}

.seasonal-program__inner {
  position: relative;
  z-index: 5;
  width: 100%;
}

.seasonal-program__content {
  max-width: 54rem;
}

.seasonal-program__content > [data-reveal] {
  transition-duration: 0.6s;
}

/* Eyebrow de temporada */
.seasonal-program__eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
}

.seasonal-program__badge {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  background: rgba(38, 152, 136, 0.14);
  border: 1px solid rgba(56, 180, 163, 0.35);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

.seasonal-program__season {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Frase puente narrativa entre Método Marshall y Snow Performance */
.seasonal-program__bridge-narrative {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 clamp(1rem, 2.2vh, 1.75rem);
  max-width: 44ch;
  font-style: italic;
  letter-spacing: -0.01em;
  border-left: 2px solid var(--pw-accent);
  padding-left: var(--sp-4);
}

/* Titular monumental editorial.
   El propio [data-reveal] del <h2> queda neutralizado (siempre visible): la
   entrada real la hacen sus líneas internas .reveal-line, con el mismo
   patrón de máscara que .hero__title (línea entra desde abajo, oculta tras
   overflow:hidden), para un revelado más coreografiado línea a línea en vez
   de un fade en bloque. Disparo: misma clase .is-visible que revealOnScroll()
   ya añade a este <h2> — sin JS nuevo. */
.seasonal-program__headline {
  font-size: clamp(3.2rem, 7.5vw, 6.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--pw-white);
  margin: 0 0 clamp(1.25rem, 2.5vh, 2rem);
  display: flex;
  flex-direction: column;
}

.seasonal-program__headline[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.seasonal-program__headline span {
  display: block;
}

.seasonal-program__headline .reveal-line {
  overflow: hidden;
  display: block;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

.seasonal-program__headline .reveal-line > span {
  display: block;
  transform: translateY(120%);
  transition: transform .65s var(--ease-emphatic);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.seasonal-program__headline.is-visible .reveal-line > span {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-program__headline .reveal-line > span {
    transition-delay: 0ms !important;
  }
}

/* Identificador de marca / programa */
.seasonal-program__brand-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.seasonal-program__brand-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
}

.seasonal-program__brand-by {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

/* Ejes de rendimiento / pilares visuales */
.seasonal-program__pillars {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(1.75rem, 3.5vh, 2.75rem);
  padding-top: clamp(1rem, 2vh, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 48rem;
}

.seasonal-program__trajectory {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  height: 14px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.seasonal-program__trajectory path {
  fill: none;
  stroke: var(--pw-accent-accessible);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  transition: stroke-dashoffset 0.85s var(--ease-emphatic);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.seasonal-program__pillars.is-visible .seasonal-program__trajectory path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-program__trajectory path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

.seasonal-program__pillar {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.seasonal-program__pillar-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-accent-accessible);
  opacity: 0.85;
}

.seasonal-program__pillar-name {
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.seasonal-program__pillar-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.9rem;
}

/* Acciones y CTA protagonista */
.seasonal-program__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.seasonal-program__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background-color: var(--pw-accent);
  color: var(--pw-primary-900);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.15rem 2.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(38, 152, 136, 0.35);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  z-index: 1;
}

.seasonal-program__cta:hover,
.seasonal-program__cta:focus-visible {
  background-color: #3ec4b2;
  color: var(--pw-primary-900);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 32px rgba(56, 180, 163, 0.55);
}

.seasonal-program__cta-icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.seasonal-program__cta:hover .seasonal-program__cta-icon,
.seasonal-program__cta:focus-visible .seasonal-program__cta-icon {
  transform: translateX(7px);
}

.seasonal-program__cta-text {
  position: relative;
}

.seasonal-program__cta-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.2rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.6;
  transition: right var(--dur-fast) var(--ease-out);
}

.seasonal-program__cta:hover .seasonal-program__cta-text::after,
.seasonal-program__cta:focus-visible .seasonal-program__cta-text::after {
  right: 0;
}

.seasonal-program__meta-note {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
}

/* Responsivo para móviles y tablets */
@media (max-width: 767px) {
  .seasonal-takeover {
    min-height: auto;
    padding-block: clamp(4.5rem, 10vh, 6rem);
  }
  .seasonal-program__headline {
    font-size: clamp(2.5rem, 11vw, 3.6rem);
    line-height: 1;
  }
  .seasonal-program__pillars {
    gap: 0.5rem 0.85rem;
  }
  .seasonal-program__trajectory {
    /* En mobile los pilares suelen envolver en varias líneas: una línea
       decorativa fija en la parte superior perdería sentido visual, así
       que se prioriza legibilidad y se descarta este detalle. */
    display: none;
  }
  .seasonal-program__pillar-sep {
    display: none;
  }
  .seasonal-program__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    width: 100%;
  }
  .seasonal-program__cta {
    width: 100%;
    justify-content: center;
    padding: 1.1rem 1.6rem;
  }
  .seasonal-program__watermark-text {
    font-size: 18vw;
  }
}

/* ---------- 2. Página Fuerza: Sección Snow Performance ---------- */
.strength-seasonal {
  background-color: var(--pw-mist);
  padding-block: clamp(var(--sp-16), 8vh, var(--sp-24));
  border-block: 1px solid var(--pw-line);
}

.strength-seasonal__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 860px) {
  .strength-seasonal__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-12);
    align-items: center;
  }
}

.strength-seasonal__eyebrow {
  color: var(--pw-primary);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.strength-seasonal__eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background-color: var(--pw-primary);
}

.strength-seasonal__headline {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  color: var(--pw-ink);
  margin: 0 0 var(--sp-2);
}

.strength-seasonal__title {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--pw-primary);
  margin: 0 0 var(--sp-4);
}

.strength-seasonal__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--pw-ink-70);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* Visual flow ASSESS -> TRAIN -> TRACK -> RETEST */
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
}

.flow-step {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--pw-ink);
  text-transform: uppercase;
}

.flow-step__arrow {
  margin-left: var(--sp-2);
  color: var(--pw-accent);
}

.strength-seasonal__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--pw-primary);
  color: var(--pw-white);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 2rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}

.strength-seasonal__cta:hover,
.strength-seasonal__cta:focus-visible {
  background-color: var(--pw-primary-600);
  color: var(--pw-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(35, 115, 105, 0.25);
}

.strength-seasonal__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--pw-line);
  box-shadow: 0 8px 24px rgba(18, 32, 29, 0.06);
}

.strength-seasonal__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Microbloc complementari: Tastet de tecnologia */
.strength-seasonal__tech {
  margin-top: clamp(var(--sp-8), 3.5vw, var(--sp-12));
  padding-top: clamp(var(--sp-5), 2.5vw, var(--sp-8));
  border-top: 1px solid var(--pw-line);
}

.strength-seasonal__tech-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.strength-seasonal__tech-eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-ink-60);
}

.strength-seasonal__tech-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--pw-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.strength-seasonal__tech-link:hover,
.strength-seasonal__tech-link:focus-visible {
  color: var(--pw-primary-600);
  transform: translateX(2px);
}

.strength-seasonal__tech-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.strength-seasonal__tech-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
}

.strength-seasonal__tech-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strength-seasonal__tech-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.9;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.strength-seasonal__tech-item:hover .strength-seasonal__tech-thumb img {
  opacity: 1;
  transform: scale(1.05);
}

.strength-seasonal__tech-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strength-seasonal__tech-name {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--pw-ink);
  line-height: 1.25;
}

.strength-seasonal__tech-desc {
  font-size: var(--fs-label);
  color: var(--pw-ink-70);
  line-height: 1.35;
}

.strength-seasonal__tech-sep {
  width: 1px;
  height: 38px;
  background-color: var(--pw-line);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .strength-seasonal__tech-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .strength-seasonal__tech-grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .strength-seasonal__tech-sep {
    display: none;
  }

  .strength-seasonal__tech-item {
    padding-block: var(--sp-2);
    border-bottom: 1px solid rgba(18, 32, 29, 0.06);
  }

  .strength-seasonal__tech-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ---------- 3. Landing Completa: /snow-performance ---------- */
.page-snow-performance {
  background-color: var(--pw-white);
  color: var(--pw-ink);
}

/* Hero Landing Snow — Rediseño Editorial & Inmersivo */
.snow-hero {
  position: relative;
  background-color: var(--pw-primary-900);
  color: var(--pw-white);
  min-height: calc(100svh - 4.5rem);
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(6.25rem, 11vh, 8.5rem);
  padding-bottom: clamp(2rem, 4vh, 3.25rem);
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .snow-hero {
    min-height: 92vh;
    min-height: 92svh;
  }
}

/* Fondo fotográfico con protagonismo, textura y presencia alpina */
.snow-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.snow-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 28%;
  opacity: 0.94;
  transform: scale(1.02);
  transform-origin: center center;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Scrim selectivo y direccional: protege legibilidad tipográfica en la izquierda sin teñir de verde al atleta ni la nieve */
.snow-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Máscara lateral izquierda: garantiza contraste tipográfico riguroso sobre la nieve */
    linear-gradient(to right,
      rgba(10, 26, 24, 0.94) 0%,
      rgba(10, 26, 24, 0.84) 30%,
      rgba(10, 26, 24, 0.52) 50%,
      rgba(10, 26, 24, 0.15) 68%,
      transparent 82%
    ),
    /* Gradiente vertical sutil: protege navegación superior y funde el corte inferior con el fondo */
    linear-gradient(to bottom,
      rgba(10, 26, 24, 0.62) 0%,
      rgba(10, 26, 24, 0.2) 16%,
      transparent 35%,
      transparent 72%,
      rgba(10, 26, 24, 0.45) 88%,
      rgba(18, 60, 55, 0.98) 100%
    );
}

/* Contenedores de contenido */
.snow-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 2.75rem);
}

.snow-hero__content {
  max-width: 48rem;
}

.snow-hero__breadcrumb {
  margin-bottom: var(--space-md);
}

.snow-hero__eyebrow {
  color: #8fd9c9;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--space-sm-md);
}

.snow-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1.5px;
  background-color: #8fd9c9;
}

/* Titular de gran escala y ritmo editorial compacto */
.snow-hero__title {
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
  color: var(--pw-white);
  max-width: 20ch;
}

.snow-hero__title .reveal-line {
  overflow: hidden;
  display: block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.snow-hero__title .reveal-line > span {
  display: block;
  transform: translateY(115%);
  transition: transform 0.85s var(--ease-emphatic);
  transition-delay: calc(var(--i, 1) * 110ms);
}

.snow-hero.is-ready .snow-hero__title .reveal-line > span {
  transform: translateY(0);
}

.snow-hero__title-accent {
  display: inline-block;
}

/* Especificaciones técnicas del programa (4-8 semanas / 1-2 sesiones / 30-50 min) */
.snow-hero__specs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  background: rgba(10, 26, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 0.65rem 1.25rem;
  margin-bottom: var(--space-sm-md);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
}

.snow-hero__spec {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.snow-hero__spec-val {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pw-white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.snow-hero__spec-lbl {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fd9c9;
}

.snow-hero__spec-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
}

/* Anotación técnica editorial: microelementos de rendimiento */
.snow-hero__rubric {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-md);
}

.snow-hero__rubric span[aria-hidden="true"] {
  color: #8fd9c9;
  opacity: 0.65;
}

/* Párrafo lead */
.snow-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--sp-8);
  max-width: 44ch;
}

.snow-hero__lead p + p {
  margin-top: var(--space-sm);
}

/* Acciones / CTAs */
.snow-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.snow-hero__actions .btn {
  min-height: 3.125rem;
  padding-inline: 1.85rem;
}

.snow-hero__actions .btn--primary {
  background: var(--pw-primary);
  color: var(--pw-white);
  box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

.snow-hero__actions .btn--primary:hover {
  background: var(--pw-primary-600);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.6);
}

.snow-hero__actions .btn--outline {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(10, 26, 24, 0.35);
}

.snow-hero__actions .btn--outline:hover {
  border-color: #8fd9c9;
  background: rgba(255, 255, 255, 0.12);
  color: var(--pw-white);
  transform: translateY(-2px);
}

/* Franja inferior: Transición hacia siguiente bloque + Detalle Técnico */
.snow-hero__bottom {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 2.75rem);
  padding-top: var(--space-lg);
  margin-top: auto;
}

.snow-hero__bottom-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Indicador de Scroll minimalista */
.snow-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
  padding-block: var(--space-micro);
}

.snow-hero__scroll:hover {
  color: var(--pw-white);
}

.snow-hero__scroll-track {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 14px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding-top: 3px;
  box-sizing: border-box;
}

.snow-hero__scroll-thumb {
  width: 2px;
  height: 6px;
  background-color: var(--pw-accent-accessible);
  border-radius: 1px;
  animation: snowScrollThumb 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes snowScrollThumb {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(8px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.snow-hero__scroll-arrow {
  display: inline-block;
  font-size: 0.85rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.snow-hero__scroll:hover .snow-hero__scroll-arrow {
  transform: translateY(2px);
  color: var(--pw-accent-accessible);
}

/* Detalle Técnico Editorial (Dimensiones reales) */
.snow-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-micro);
  text-align: right;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.snow-hero__meta-top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--pw-accent-accessible);
  letter-spacing: 0.18em;
}

.snow-hero__meta-code {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.snow-hero__meta-pillars {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 400;
}

.snow-hero__meta-dot {
  opacity: 0.4;
}

/* Coreografía de entrada (Motion System 700-1100ms) */
.snow-hero .snow-hero__eyebrow,
.snow-hero .snow-hero__specs,
.snow-hero .snow-hero__rubric,
.snow-hero .snow-hero__supporting,
.snow-hero .snow-hero__lead,
.snow-hero .snow-hero__actions,
.snow-hero .snow-hero__bottom {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.snow-hero.is-ready .snow-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.snow-hero.is-ready .snow-hero__specs {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.36s;
}

.snow-hero.is-ready .snow-hero__rubric {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.46s;
}

.snow-hero.is-ready .snow-hero__supporting {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.52s;
}

.snow-hero.is-ready .snow-hero__lead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.58s;
}

.snow-hero.is-ready .snow-hero__actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.snow-hero.is-ready .snow-hero__bottom {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.82s;
}

/* Fallback si JS no estuviese disponible */
html:not(.js) .snow-hero .snow-hero__eyebrow,
html:not(.js) .snow-hero .snow-hero__specs,
html:not(.js) .snow-hero .snow-hero__rubric,
html:not(.js) .snow-hero .snow-hero__supporting,
html:not(.js) .snow-hero .snow-hero__lead,
html:not(.js) .snow-hero .snow-hero__actions,
html:not(.js) .snow-hero .snow-hero__bottom,
html:not(.js) .snow-hero__title .reveal-line > span {
  opacity: 1 !important;
  transform: none !important;
}

/* Responsive Tablet */
@media (max-width: 960px) {
  .snow-hero__bottom-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .snow-hero__meta {
    align-items: flex-start;
    text-align: left;
  }
  .snow-hero__meta-pillars {
    justify-content: flex-start;
  }
}

/* Responsive Mobile */
@media (max-width: 640px) {
  .snow-hero {
    min-height: 85svh;
    padding-top: clamp(5.25rem, 9.5vh, 6.25rem);
    padding-bottom: var(--space-md);
  }
  .snow-hero__bg img {
    object-position: 68% 25%;
    opacity: 0.88;
  }
  .snow-hero__title {
    font-size: clamp(1.85rem, 8.5vw, 3.25rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
  }
  .snow-hero__specs {
    width: 100%;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    gap: 0.35rem;
  }
  .snow-hero__spec-val {
    font-size: 0.9375rem;
  }
  .snow-hero__spec-lbl {
    font-size: 0.625rem;
  }
  .snow-hero__rubric {
    font-size: 0.625rem;
    gap: 0.3rem 0.5rem;
  }

@media (max-width: 380px) {
  .snow-hero__inner {
    padding-inline: 1rem;
  }
  .snow-hero__title {
    font-size: clamp(1.55rem, 7.5vw, 1.85rem);
  }
  .snow-hero__specs {
    padding: 0.45rem 0.65rem;
    gap: 0.25rem 0.45rem;
    justify-content: flex-start;
  }
  .snow-hero__spec-val {
    font-size: 0.85rem;
  }
  .snow-hero__spec-lbl {
    font-size: 0.5625rem;
  }
  .snow-hero__spec-sep {
    display: none;
  }
}
  .snow-hero__lead {
    font-size: 0.9375rem;
    margin-bottom: var(--sp-6);
  }
  .snow-hero__actions {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-3);
  }
  .snow-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .snow-hero__bottom {
    padding-top: var(--space-sm);
  }
  .snow-hero__bottom-grid {
    border-top: none;
    padding-top: 0;
    gap: var(--sp-3);
  }
  .snow-hero__meta-pillars {
    font-size: 0.625rem;
  }
}

/* Accesibilidad: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .snow-hero .snow-hero__eyebrow,
  .snow-hero .snow-hero__supporting,
  .snow-hero .snow-hero__lead,
  .snow-hero .snow-hero__actions,
  .snow-hero .snow-hero__bottom,
  .snow-hero__title .reveal-line > span,
  .snow-hero__bg img {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .snow-hero__scroll-thumb {
    animation: none !important;
  }
}

/* Sección 02: Skiing is harder than it looks */
.snow-fatigue {
  padding-block: var(--space-section);
  background-color: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.snow-fatigue__header {
  max-width: 780px;
  margin-bottom: var(--sp-12);
}

.snow-fatigue__headline {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
}

.snow-fatigue__text {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--pw-ink-70);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Diagrama visual de fatiga */
.fatigue-progression {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  background: var(--pw-mist);
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  border-radius: var(--radius);
  border: 1px solid var(--pw-line);
}

@media (min-width: 860px) {
  .fatigue-progression {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }
}

.fatigue-step {
  position: relative;
  background: var(--pw-white);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--pw-line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.fatigue-step:hover {
  transform: translateY(-2px);
  border-color: var(--pw-primary);
}

.fatigue-step__num {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-primary);
  letter-spacing: 0.08em;
}

.fatigue-step__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.fatigue-step__desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin: 0;
}

.fatigue-step__meter {
  height: 4px;
  background: var(--pw-line);
  border-radius: 2px;
  margin-top: var(--sp-3);
  overflow: hidden;
}

.fatigue-step__fill {
  height: 100%;
  transition: width var(--dur-med) var(--ease-out);
}

.fatigue-step--1 .fatigue-step__fill { width: 100%; background: var(--pw-accent); }
.fatigue-step--2 .fatigue-step__fill { width: 75%; background: var(--pw-primary); }
.fatigue-step--3 .fatigue-step__fill { width: 45%; background: #d97736; }
.fatigue-step--4 .fatigue-step__fill { width: 25%; background: #c53b27; }

/* Sección 03: Capacidades (Composición Interactiva Editorial) */
.snow-capacities {
  padding-block: clamp(var(--sp-16), 10vh, var(--sp-24));
  background-color: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}

.snow-capacities__head {
  max-width: 780px;
  margin-bottom: var(--sp-10);
}

.capacities-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 860px) {
  .capacities-matrix {
    grid-template-columns: 320px 1fr;
    gap: var(--sp-10);
    align-items: start;
  }
}

.capacities-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.capacity-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-ink);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}

.capacity-btn:hover {
  background: rgba(35, 115, 105, 0.05);
  border-color: var(--pw-primary);
  transform: translateX(3px);
}

.capacity-btn.is-active {
  background: var(--pw-primary-900);
  color: var(--pw-white);
  border-color: var(--pw-primary-900);
}

.capacity-btn__tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.capacity-btn.is-active .capacity-btn__tag {
  color: var(--pw-accent-accessible);
  opacity: 1;
}

.capacity-display {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: clamp(var(--sp-6), 5vw, var(--sp-10));
  box-shadow: 0 10px 30px rgba(18, 32, 29, 0.04);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capacity-panel {
  display: none;
  animation: fadeInPanel var(--dur-med) var(--ease-out);
}

.capacity-panel.is-active {
  display: block;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.capacity-panel__header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--pw-line);
  padding-bottom: var(--sp-4);
}

.capacity-panel__name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--pw-ink);
  margin: 0;
}

.capacity-panel__badge {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-primary);
}

.capacity-panel__desc {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--pw-ink);
  margin-bottom: var(--sp-6);
}

.capacity-panel__snow-context {
  background: var(--pw-mist);
  border-left: 3px solid var(--pw-primary);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.capacity-panel__snow-context p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--pw-ink-70);
}

/* Sección 04: Método (Assess -> Train -> Track -> Retest) */
.snow-method {
  padding-block: var(--space-section);
  background-color: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.snow-method__head {
  max-width: 820px;
  margin-bottom: var(--sp-12);
}

.method-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  position: relative;
}

@media (min-width: 860px) {
  .method-flow-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
  .method-flow-grid::before {
    content: '';
    position: absolute;
    top: 2.2rem;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--pw-line);
    z-index: 1;
  }
}

.method-step {
  position: relative;
  z-index: 2;
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.method-step:hover {
  transform: translateY(-3px);
  border-color: var(--pw-primary);
  box-shadow: 0 8px 24px rgba(35, 115, 105, 0.08);
}

.method-step__node {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-primary);
  margin-bottom: var(--sp-2);
}

.method-step:hover .method-step__node {
  background: var(--pw-primary);
  color: var(--pw-white);
  border-color: var(--pw-primary);
}

.method-step__name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pw-ink);
  margin: 0;
  text-transform: uppercase;
}

.method-step__desc {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0;
}

/* Sección 05: Four Weeks to Performance (Timeline) */
.snow-timeline-sec {
  padding-block: var(--space-section);
  background-color: var(--pw-primary-900);
  color: var(--pw-white);
  border-bottom: 1px solid var(--pw-line-on-dark);
}

.snow-timeline-sec__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-12);
}

@media (min-width: 860px) {
  .snow-timeline-sec__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.snow-timeline-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  padding: 0.4rem 1rem;
  border: 1px solid var(--pw-line-on-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

/* Timeline grid: horizontal desktop, vertical mobile */
.snow-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  position: relative;
}

@media (min-width: 860px) {
  .snow-timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
  .snow-timeline::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: 2%;
    right: 2%;
    height: 1px;
    background: var(--pw-line-on-dark);
    z-index: 1;
  }
}

.timeline-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--pw-line-on-dark);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: all var(--dur-fast) var(--ease-out);
}

.timeline-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--pw-accent);
  transform: translateY(-2px);
}

.timeline-card__week {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--pw-accent-accessible);
  text-transform: uppercase;
}

.timeline-card__title {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pw-white);
  margin: 0;
  text-transform: uppercase;
}

.timeline-card__subtitle {
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.timeline-card__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Sección 06: Snow Readiness Score */
.snow-score-sec {
  padding-block: var(--space-section);
  background-color: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.snow-score-sec__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 860px) {
  .snow-score-sec__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-12);
  }
}

.snow-score-sec__sub {
  color: var(--pw-primary);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.snow-score-sec__headline {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
}

.snow-score-sec__text {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--pw-ink-70);
  margin-bottom: var(--sp-6);
}

.snow-score-sec__disclaimer {
  font-size: var(--fs-small);
  color: var(--pw-ink-50);
  line-height: 1.5;
  border-left: 2px solid var(--pw-line);
  padding-left: var(--sp-3);
  margin-top: var(--sp-6);
  font-style: italic;
}

/* Visual BEFORE -> AFTER */
.score-visual-card {
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  box-shadow: 0 8px 24px rgba(18, 32, 29, 0.05);
}

.score-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.score-metric__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

.score-metric__bars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-bar {
  height: 8px;
  border-radius: 4px;
  position: relative;
}

.score-bar--before {
  background: rgba(18, 32, 29, 0.18);
}

.score-bar--after {
  background: var(--pw-primary);
}

.score-legend {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--pw-line);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.score-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.score-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.score-legend__dot--before { background: rgba(18, 32, 29, 0.25); }
.score-legend__dot--after { background: var(--pw-primary); }

/* Sección 07: Your Programme Goes With You */
.snow-moments {
  padding-block: clamp(var(--sp-16), 10vh, var(--sp-24));
  background-color: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}

.snow-moments__head {
  max-width: 780px;
  margin-bottom: var(--sp-12);
}

.moments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 860px) {
  .moments-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
}

.moment-card {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.moment-card:hover {
  transform: translateY(-3px);
  border-color: var(--pw-primary);
  box-shadow: 0 8px 24px rgba(18, 32, 29, 0.06);
}

.moment-card__time {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--pw-primary);
  text-transform: uppercase;
}

.moment-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pw-ink);
  margin: 0;
}

/* Sección 08: Choose Your Programme & Every Programme Includes */
.snow-programs {
  padding-block: var(--space-section);
  background-color: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.snow-programs__head {
  max-width: 720px;
  margin-bottom: clamp(var(--sp-8), 6vw, var(--sp-12));
}

/* Grilla de los 2 grandes bloques: 04 WEEKS y 08 WEEKS */
.snow-programs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-bottom: clamp(var(--sp-12), 8vw, var(--sp-20));
}

@media (min-width: 900px) {
  .snow-programs__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
}

/* Tarjeta de programa (04 WEEKS / 08 WEEKS) */
.snow-program-card {
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.snow-program-card:hover {
  border-color: rgba(35, 115, 105, 0.35);
  box-shadow: 0 12px 32px -16px rgba(18, 60, 55, 0.12);
}

.snow-program-card__header {
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--pw-line);
  padding-bottom: var(--space-md-lg);
}

.snow-program-card__badge {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pw-primary);
  display: inline-block;
  margin-bottom: var(--sp-1);
}

.snow-program-card__duration {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--space-sm);
}

.snow-program-card__num {
  font-size: clamp(3.5rem, 7vw, 5.25rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--pw-primary-900);
}

.snow-program-card__unit {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--pw-ink);
  text-transform: uppercase;
}

.snow-program-card__desc {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0;
  max-width: 44ch;
}

/* Opciones de frecuencia dentro del bloque */
.snow-program-card__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.snow-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--pw-white);
  padding: var(--space-md) var(--space-md-lg);
  border: 1px solid rgba(18, 32, 29, 0.08);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.snow-option:hover {
  border-color: rgba(35, 115, 105, 0.4);
}

@media (min-width: 480px) {
  .snow-option {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.snow-option__frequency {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.snow-option__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--pw-primary);
  text-transform: uppercase;
}

.snow-option__rate {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pw-primary-900);
  text-transform: uppercase;
}

.snow-option__deliverables {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

@media (min-width: 480px) {
  .snow-option__deliverables {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
}

.snow-option__count {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
}

.snow-option__duration {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  font-weight: 400;
}

.snow-option__divider {
  display: none;
}

/* ==========================================================================
   SNOW PERFORMANCE — EL RECORRIDO COMPLETO: TODO PROGRAMA INCLUYE
   Rediseño Editorial y Narrativo (5 Etapas Biomecánicas)
   ========================================================================== */
.snow-journey,
.snow-includes {
  background: var(--pw-primary-900);
  color: var(--pw-white);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.25rem, 4vw, 3.25rem);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Encabezado del Recorrido */
.snow-journey__header {
  max-width: 56rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.snow-journey__header-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.snow-journey__header-top .eyebrow {
  color: #8fd9c9;
  margin-bottom: 0;
}

.snow-journey__badge {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8fd9c9;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.snow-journey__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--pw-white);
  text-transform: uppercase;
  margin: 0 0 var(--space-sm-md);
}

.snow-journey__subtitle {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-md-lg);
  max-width: 52ch;
}

/* Pipeline visual de etapas (recorrido) */
.snow-journey__pipeline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  padding: 0.65rem 1.15rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.snow-journey__pipe-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.snow-journey__pipe-step span {
  color: #8fd9c9;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.snow-journey__pipe-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
}

/* Flujo vertical de etapas */
.snow-journey__flow {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.5vw, 3.5rem);
}

/* Tarjeta / Bloque de cada etapa del recorrido */
.snow-journey-card {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md-lg);
}

@media (min-width: 960px) {
  .snow-journey-card {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2.5rem, 4.5vw, 4rem);
    align-items: center;
  }
}

.snow-journey-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--space-sm);
}

.snow-journey-card__num {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #8fd9c9;
  font-variant-numeric: tabular-nums;
}

.snow-journey-card__phase {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.snow-journey-card__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pw-white);
  margin: 0 0 var(--space-sm);
}

.snow-journey-card__lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-md);
  max-width: 46ch;
}

/* Checklist técnico de valoración */
.snow-journey-card__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.snow-journey-card__checklist li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.snow-journey-card__checklist li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #8fd9c9;
  font-weight: 600;
}

.snow-journey-card__checklist strong {
  color: var(--pw-white);
  font-weight: 500;
}

/* Gran elemento tipográfico / Stat Hero (80+ / 7 MIN) */
.snow-journey-hero-metric {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}

.snow-journey-hero-metric__val {
  font-size: clamp(4.25rem, 7.5vw, 6.75rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--pw-white);
  font-variant-numeric: tabular-nums;
}

.snow-journey-hero-metric--accent .snow-journey-hero-metric__val {
  color: #8fd9c9;
}

.snow-journey-hero-metric__unit {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fd9c9;
  margin-top: 0.35rem;
}

.snow-journey-hero-metric__label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.5rem;
}

/* Indicadores complementarios */
.snow-journey-metric-pills {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.snow-journey-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  font-size: 0.75rem;
}

.snow-journey-pill__lbl {
  color: rgba(255, 255, 255, 0.72);
}

.snow-journey-pill__val {
  color: #8fd9c9;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Bloque Dúo (Plan Personalizado + Digital) */
.snow-journey-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (min-width: 640px) {
  .snow-journey-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.snow-journey-duo__item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.snow-journey-duo__tag {
  font-size: 0.65625rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #8fd9c9;
  display: block;
  margin-bottom: 0.35rem;
}

.snow-journey-duo__title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pw-white);
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

.snow-journey-duo__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}

/* Mockup de Aplicación / Rutina Digital */
.snow-app-mockup {
  background: #0d1e1b;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.55);
}

.snow-app-mockup__bar {
  background: rgba(0, 0, 0, 0.35);
  padding: 0.6rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.65625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.snow-app-mockup__status {
  color: #8fd9c9;
  font-weight: 600;
}

.snow-app-mockup__screen {
  padding: 1.1rem 1rem 1.25rem;
}

.snow-app-mockup__badge {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #8fd9c9;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.snow-app-mockup__title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pw-white);
  letter-spacing: -0.015em;
  margin-bottom: 0.2rem;
}

.snow-app-mockup__meta {
  font-size: 0.71875rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.9rem;
}

.snow-app-mockup__rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.snow-app-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.snow-app-row__num {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  width: 14px;
}

.snow-app-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.snow-app-row__name {
  font-size: 0.78125rem;
  color: var(--pw-white);
  font-weight: 500;
}

.snow-app-row__sub {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
}

.snow-app-row__check {
  font-size: 0.75rem;
  color: #8fd9c9;
  font-weight: 700;
}

/* ================= ETAPA 03: SNOW READINESS SCORE ================= */
.snow-journey-card--score {
  grid-template-columns: 1fr;
}

.snow-journey-score-spotlight {
  background: linear-gradient(145deg, rgba(14, 38, 35, 0.9) 0%, rgba(9, 22, 20, 0.98) 100%);
  border: 1px solid rgba(143, 217, 201, 0.28);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5);
}

.snow-journey-score-spotlight__head {
  max-width: 50rem;
  margin-bottom: var(--space-md-lg);
}

.snow-readiness-meter {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.snow-readiness-meter__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem 2rem;
}

.snow-readiness-meter__score-block {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.snow-readiness-meter__score-num {
  font-size: clamp(3.75rem, 7vw, 5.5rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #8fd9c9;
  font-variant-numeric: tabular-nums;
}

.snow-readiness-meter__score-max {
  font-size: 1.25rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}

.snow-readiness-meter__status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.snow-readiness-meter__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8fd9c9;
  display: inline-block;
  box-shadow: 0 0 10px #8fd9c9;
}

.snow-readiness-meter__status-txt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pw-white);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.snow-readiness-meter__status-sub {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Track de zonas de progreso */
.snow-readiness-meter__track {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 4px;
}

.snow-readiness-meter__zone {
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.snow-readiness-meter__zone--base {
  background: rgba(255, 255, 255, 0.04);
}

.snow-readiness-meter__zone--building {
  background: rgba(38, 152, 136, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

.snow-readiness-meter__zone--ready {
  background: rgba(38, 152, 136, 0.45);
  color: var(--pw-white);
  border: 1px solid rgba(143, 217, 201, 0.4);
}

.snow-readiness-meter__pin {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 3px;
  background-color: #8fd9c9;
  border-radius: 2px;
  box-shadow: 0 0 12px #8fd9c9;
}

/* Telemetría 3 métricas */
.snow-readiness-meter__telemetry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .snow-readiness-meter__telemetry {
    grid-template-columns: repeat(3, 1fr);
  }
}

.snow-telemetry-item {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.snow-telemetry-item__val {
  font-size: 1.35rem;
  font-weight: 600;
  color: #8fd9c9;
  letter-spacing: -0.01em;
}

.snow-telemetry-item__lbl {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pw-white);
}

.snow-telemetry-item__note {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.58);
}

/* ================= ETAPA 04: CALENTAMIENTO 7 MINUTOS ================= */
.snow-protocol-steps {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: var(--space-sm);
}

.snow-protocol-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
}

.snow-protocol-step__time {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8fd9c9;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.snow-protocol-step__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.snow-protocol-step__desc strong {
  color: var(--pw-white);
  font-weight: 500;
}

.snow-journey-action-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 0.85rem;
}

.snow-journey-action-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 220px;
}

.snow-journey-photo-caption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 100%);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8fd9c9;
}

/* ================= ETAPA 05: RECUPERACIÓN & DELTA COMPARATIVO ================= */
.snow-delta-box {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
}

.snow-delta-box__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
}

.snow-delta-box__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fd9c9;
}

.snow-delta-box__cycle {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

.snow-delta-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.snow-delta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
}

.snow-delta-row:last-child {
  border-bottom: none;
}

.snow-delta-row__label {
  color: rgba(255, 255, 255, 0.78);
}

.snow-delta-row__val {
  color: #8fd9c9;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.snow-delta-box__foot {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.58);
}

/* ================= CULMINACIÓN NATURAL DEL RECORRIDO ================= */
.snow-journey-culmination {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 860px) {
  .snow-journey-culmination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .snow-journey-culmination__content {
    max-width: 38rem;
  }
}

.snow-journey-culmination__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fd9c9;
  display: block;
  margin-bottom: 0.35rem;
}

.snow-journey-culmination__title {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--pw-white);
  margin: 0 0 0.35rem;
  letter-spacing: -0.015em;
}

.snow-journey-culmination__lead {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.snow-journey-culmination__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.btn--outline-dark {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--pw-white);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus-visible {
  border-color: #8fd9c9;
  background: rgba(255, 255, 255, 0.1);
  color: var(--pw-white);
}

@media (max-width: 640px) {
  .snow-journey-culmination__buttons {
    flex-direction: column;
    width: 100%;
  }
  .snow-journey-culmination__buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .snow-journey {
    padding-inline: 1rem;
  }
  .snow-journey__pipeline {
    font-size: 0.65rem;
    padding: 0.45rem 0.65rem;
    gap: 0.25rem 0.45rem;
  }
  .snow-readiness-meter__track {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .snow-readiness-meter__zone {
    height: 28px;
    font-size: 0.58rem;
  }
  .snow-readiness-meter__pin {
    display: none;
  }
  .snow-journey-hero-metric__val {
    font-size: 4rem;
  }
}

/* Sección 09: Para Quién */
.snow-audience {
  padding-block: var(--space-section);
  background-color: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}

.snow-audience__inner {
  max-width: 820px;
}

.snow-audience__headline {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--sp-6);
}

.snow-audience__text {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--pw-ink-70);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Sección 10: Cierre Final / Ready for your season? */
.snow-closing {
  position: relative;
  background-color: var(--pw-primary-900);
  color: var(--pw-white);
  padding-block: clamp(var(--sp-24), 14vh, var(--sp-32));
  text-align: center;
  overflow: hidden;
}

.snow-closing__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.18;
}

.snow-closing__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.snow-closing__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-inline: auto;
}

.snow-closing__headline {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md-lg);
  color: var(--pw-white);
}

.snow-closing__supporting {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--pw-accent-accessible);
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

.snow-closing__text {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--sp-8);
}

.snow-closing__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--pw-accent);
  color: var(--pw-primary-900);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.1rem 2.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.snow-closing__cta:hover,
.snow-closing__cta:focus-visible {
  background-color: #38b4a3;
  color: var(--pw-primary-900);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

.snow-closing__meta {
  margin-top: var(--sp-6);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}

/* ==========================================================================
   SERVICE HERO SYSTEM
   Arquitectura modular, asimétrica y editorial para páginas de servicios
   (Fisioterapia, Bienestar, Fuerza, Pilates Reformer, Stretching).

   Principios de diseño:
   - Dirección de arte wellness premium (no clínica genérica).
   - Pantalla completa intencionada (100vh / 100dvh).
   - Tipografía de gran escala integrada como elemento gráfico.
   - Fotografía cinematográfica con sangrado editorial (sin cards).
   - Microtipografía informativa de servicio estructurada.
   - Modificadores por disciplina (.service-hero--[servicio]) sobre variables compartidas.
   ========================================================================== */

.service-hero {
  /* Variables configurables por modificador de disciplina */
  --hero-bg: #0d221e;
  --hero-accent: var(--pw-accent-accessible, #8fd9c9);
  --hero-watermark-opacity: 0.08;
  --hero-watermark-size: clamp(5.5rem, 16vw, 14.5rem);
  --hero-watermark-top: clamp(2.5rem, 6.5vh, 5.5rem);
  --hero-photo-ratio: 4 / 5;
  --hero-photo-pos: center 22%;
  --hero-photo-scale: 1;

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--hero-bg);
  color: var(--pw-white);
  overflow: hidden;
  box-sizing: border-box;
  padding-top: clamp(5.25rem, 9.5vh, 7.25rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

/* Volumen atmosférico sutil en el lienzo */
.service-hero::before {
  content: "";
  position: absolute;
  top: -15%;
  right: 5%;
  width: 70vw;
  height: 70vw;
  max-width: 950px;
  max-height: 950px;
  background: radial-gradient(circle, rgba(35, 115, 105, 0.16) 0%, rgba(13, 34, 30, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

/* Marca gráfica de agua a gran escala (pieza editorial con presencia) */
.service-hero__watermark {
  position: absolute;
  top: var(--hero-watermark-top);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100vw;
  font-family: var(--font-base);
  font-size: var(--hero-watermark-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.038em;
  line-height: 0.78;
  color: rgba(255, 255, 255, var(--hero-watermark-opacity));
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  text-align: center;
  will-change: opacity;
}

/* Contenedor principal: distribuye breadcrumb arriba, grid al medio, meta abajo */
.service-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  box-sizing: border-box;
}

/* Ruta de navegación sutil integrada */
.service-hero__breadcrumb {
  margin-bottom: clamp(0.75rem, 1.8vh, 1.5rem);
}

/* Composición editorial principal con interbloqueo visual */
.service-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
  margin-block: auto;
  padding-block: clamp(0.75rem, 1.8vh, 2.25rem);
}

/* Columna de texto */
.service-hero__content {
  position: relative;
  z-index: 3;
}

/* Micro-descriptor numerado: identificador principal de la página/servicio
   (reforzado ligeramente frente a --fs-label global tras retirar la
   antigua marca de agua de fondo, para que siga leyéndose con claridad
   como el ancla de identificación del hero). */
.service-hero__descriptor {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(0.8rem, 0.62vw + 0.68rem, 0.9rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hero-accent);
  margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem);
}
.service-hero__descriptor::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1.5px;
  background-color: var(--hero-accent);
}

/* Titular imponente con amplia presencia y peso editorial */
.service-hero__headline {
  font-family: var(--font-base);
  font-size: clamp(2.65rem, 4.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pw-white);
  max-width: 26ch;
  margin: 0 0 clamp(1.15rem, 2.2vh, 1.65rem);
}

/* Párrafo explicativo con respiración y lectura pausada */
.service-hero__lead {
  font-size: clamp(1.05rem, 1.32vw, 1.22rem);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  max-width: 47ch;
  margin: 0 0 clamp(1.75rem, 3.5vh, 2.5rem);
}

/* Grupo de acciones jerarquizado */
.service-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Botón de acción principal */
.service-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 2.25rem;
  background-color: var(--pw-primary);
  color: var(--pw-white);
  font-family: var(--font-base);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--pw-primary);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.service-hero__cta-primary:hover,
.service-hero__cta-primary:focus-visible {
  background-color: var(--pw-primary-600);
  border-color: var(--pw-primary-600);
  color: var(--pw-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}
.service-hero__cta-arrow {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.service-hero__cta-primary:hover .service-hero__cta-arrow,
.service-hero__cta-primary:focus-visible .service-hero__cta-arrow {
  transform: translateX(5px);
}

/* Enlace editorial secundario (NO botón idéntico) */
.service-hero__cta-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-base);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding-block: 0.5rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.service-hero__cta-secondary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.service-hero__cta-secondary:hover,
.service-hero__cta-secondary:focus-visible {
  color: var(--pw-white);
}
.service-hero__cta-secondary:hover::after,
.service-hero__cta-secondary:focus-visible::after {
  background-color: var(--hero-accent);
  transform: scaleX(1.05);
  transform-origin: left;
}
.service-hero__secondary-arrow {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.service-hero__cta-secondary:hover .service-hero__secondary-arrow,
.service-hero__cta-secondary:focus-visible .service-hero__secondary-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Columna y contenedor fotográfico cinematográfico */
.service-hero__media-col {
  position: relative;
  z-index: 2;
  width: 100%;
}
.service-hero__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--hero-photo-ratio);
  background-color: rgba(255, 255, 255, 0.03);
}
.service-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-photo-pos);
  filter: saturate(1.06) contrast(1.04) brightness(0.99);
  transform: scale(var(--hero-photo-scale));
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.service-hero:hover .service-hero__figure img {
  transform: scale(calc(var(--hero-photo-scale) * 1.025));
}

/* Integración tonal suave y cinematográfica de bordes fotográficos */
.service-hero__media-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(13, 34, 30, 0.55) 0%, rgba(13, 34, 30, 0.12) 20%, transparent 40%),
              linear-gradient(to top, rgba(13, 34, 30, 0.45) 0%, transparent 22%);
}

/* Etiqueta vertical discreta sobre el borde de la fotografía: sustituye a
   la antigua marca de agua de gran escala como identificador secundario,
   muy sutil, apoyada en el degradado oscuro ya presente en ese borde.
   Solo en escritorio (ver breakpoint ≥960px más abajo). */
.service-hero__tag {
  display: none;
  position: absolute;
  z-index: 2;
  top: clamp(1.75rem, 3.5vh, 2.5rem);
  left: clamp(1.25rem, 2vw, 1.75rem);
  align-items: center;
  gap: 0.7rem;
  writing-mode: vertical-rl;
  font-family: var(--font-base);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  user-select: none;
}
.service-hero__tag-line {
  display: block;
  width: 1px;
  height: 2.25rem;
  background-color: var(--hero-accent);
  opacity: 0.75;
}

/* Capa de microtipografía informativa al pie del hero */
.service-hero__meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: clamp(1.35rem, 2.4vh, 1.85rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: clamp(1.5rem, 2.8vh, 2.5rem);
  position: relative;
  z-index: 3;
}
.service-hero__meta-items {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  flex-wrap: wrap;
}
.service-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.service-hero__meta-index {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--hero-accent);
  letter-spacing: 0.12em;
}
.service-hero__meta-text {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.service-hero__meta-sep {
  color: rgba(255, 255, 255, 0.24);
  font-size: 0.75rem;
  user-select: none;
}

/* Elemento de continuidad (scroll cue sutil) */
.service-hero__scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.service-hero__scroll-cue:hover,
.service-hero__scroll-cue:focus-visible {
  color: var(--hero-accent);
}
@keyframes serviceHeroScrollDrop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.service-hero__scroll-arrow {
  display: inline-block;
  font-size: 0.85rem;
  animation: serviceHeroScrollDrop 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   MODIFICADORES POR DISCIPLINA
   -------------------------------------------------------------------------- */

/* 1. FISIOTERAPIA (.service-hero--physio)
   Fotografía dominante a la derecha con sangrado al extremo del viewport,
   watermark de gran presencia que atraviesa la parte superior hacia la foto,
   gesto de valoración articular y atmósfera verde botánica profunda. */
.service-hero--physio {
  --hero-bg: #0d221e;
  --hero-accent: var(--pw-accent-accessible, #8fd9c9);
  --hero-photo-pos: center 22%;
}

@media (min-width: 960px) {
  .service-hero--physio .service-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 4.5rem);
  }

  .service-hero--physio .service-hero__figure {
    /* Sangrado hacia el extremo derecho del viewport */
    margin-right: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + clamp(1.5rem, 4vw, 2.75rem)));
    border-radius: var(--radius, 2px) 0 0 var(--radius, 2px);
    height: 100%;
    min-height: clamp(520px, 72vh, 760px);
    max-height: 780px;
    aspect-ratio: auto;
  }

  .service-hero--physio .service-hero__watermark {
    text-align: left;
    left: clamp(1rem, 3.5vw, 3.5rem);
    transform: none;
    top: clamp(3.25rem, 7.5vh, 6.25rem);
    font-size: clamp(6rem, 16vw, 15rem);
  }

  .service-hero__tag {
    display: inline-flex;
  }
}

/* 2. BIENESTAR (.service-hero--wellness) - Preparado para fase posterior */
.service-hero--wellness {
  --hero-bg: #112825;
  --hero-watermark-opacity: 0.045;
}

/* 3. FUERZA (.service-hero--strength) - Preparado para fase posterior */
.service-hero--strength {
  --hero-bg: #0c1c1a;
  --hero-watermark-opacity: 0.07;
}

/* 4. PILATES REFORMER (.service-hero--pilates) - Preparado para fase posterior */
.service-hero--pilates {
  --hero-bg: #122623;
  --hero-watermark-opacity: 0.05;
}

/* 5. STRETCHING (.service-hero--stretching) - Preparado para fase posterior */
.service-hero--stretching {
  --hero-bg: #102925;
  --hero-watermark-opacity: 0.055;
}

/* 6. FISIOTERAPIA A DOMICILIO (.service-hero--domicilio)
   Añadido en FASE 2 (familia de páginas de servicio) junto con las reglas
   de escritorio de abajo; sigue el mismo patrón de variables que las 5
   disciplinas anteriores. */
.service-hero--domicilio {
  --hero-bg: #0e211d;
  --hero-watermark-opacity: 0.06;
}

/* FASE 2 (familia de páginas de servicio): réplica aditiva, para el resto
   de disciplinas, del mismo tratamiento de escritorio (grid a dos columnas
   con la fotografía a sangre en el extremo derecho) que ya tenía en
   exclusiva .service-hero--physio más arriba. No se toca ninguna regla de
   Fisioterapia: mismos valores, solo extendidos a los selectores nuevos,
   para que el hero final de cada servicio sea visualmente idéntico al de
   Fisioterapia (sin marca de agua, igual que en Fisioterapia). */
@media (min-width: 960px) {
  .service-hero--wellness .service-hero__grid,
  .service-hero--strength .service-hero__grid,
  .service-hero--pilates .service-hero__grid,
  .service-hero--stretching .service-hero__grid,
  .service-hero--domicilio .service-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 4.5rem);
  }
  .service-hero--domicilio .service-hero__headline {
    font-size: clamp(2.35rem, 3.8vw, 3.65rem);
    max-width: 28ch;
  }

  .service-hero--wellness .service-hero__figure,
  .service-hero--strength .service-hero__figure,
  .service-hero--pilates .service-hero__figure,
  .service-hero--stretching .service-hero__figure,
  .service-hero--domicilio .service-hero__figure {
    margin-right: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + clamp(1.5rem, 4vw, 2.75rem)));
    border-radius: var(--radius, 2px) 0 0 var(--radius, 2px);
    height: 100%;
    min-height: clamp(520px, 72vh, 760px);
    max-height: 780px;
    aspect-ratio: auto;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE (MÓVIL Y TABLET)
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  .service-hero {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  .service-hero__watermark {
    font-size: clamp(3.5rem, 14vw, 5.75rem);
    top: 4.25rem;
    opacity: 0.06;
  }

  .service-hero__grid {
    gap: var(--sp-6);
    padding-block: var(--sp-3);
  }

  .service-hero__figure {
    /* Sangrado horizontal completo en móvil para máxima sensación editorial */
    margin-inline: calc(-1 * clamp(1.5rem, 4vw, 2.75rem));
    border-radius: 0;
    aspect-ratio: 4 / 3;
    max-height: 52vh;
  }
  .service-hero__figure img {
    object-position: center 18%;
  }

  .service-hero__headline {
    font-size: clamp(1.75rem, 7.5vw, 3rem);
    max-width: 100%;
  }

  .service-hero__lead {
    font-size: 1.05rem;
    max-width: 100%;
  }

  .service-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .service-hero__cta-primary {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  .service-hero__meta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
  }

  .service-hero__meta-items {
    gap: 0.75rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   ANIMACIÓN Y COREOGRAFÍA DE ENTRADA
   -------------------------------------------------------------------------- */

@keyframes serviceHeroWatermarkFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes serviceHeroContentFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes serviceHeroClipReveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0% 0);
  }
}

@keyframes serviceHeroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.service-hero__watermark {
  animation: serviceHeroWatermarkFade 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.service-hero__descriptor {
  animation: serviceHeroContentFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.service-hero__headline {
  animation: serviceHeroContentFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.service-hero__lead {
  animation: serviceHeroContentFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.service-hero__actions {
  animation: serviceHeroContentFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.service-hero__figure {
  animation: serviceHeroClipReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.service-hero__tag {
  animation: serviceHeroContentFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.service-hero__meta-strip {
  animation: serviceHeroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .service-hero__watermark,
  .service-hero__descriptor,
  .service-hero__headline,
  .service-hero__lead,
  .service-hero__actions,
  .service-hero__figure,
  .service-hero__tag,
  .service-hero__meta-strip,
  .service-hero__scroll-arrow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   PILATES REFORMER — SISTEMA EDITORIAL E INTERACCIONES
   ========================================================================== */

/* ---------- 1. Sección 2: Un trabajo guiado (.pilates-guided) ---------- */
.pilates-guided {
  padding-block: var(--space-section);
  background: var(--pw-white);
  position: relative;
}

.pilates-guided__media-wrap {
  position: relative;
}

.pilates-guided__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 2px);
}

.pilates-guided__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pilates-guided__tags {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

@media (min-width: 960px) {
  .pilates-guided__tags {
    margin-top: var(--sp-8);
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

.pilates-guided-tag {
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 2px);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.pilates-guided-tag:hover {
  border-color: var(--pw-primary);
  background: var(--pw-white);
  transform: translateY(-2px);
}

.pilates-guided-tag__header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.pilates-guided-tag__num {
  font-family: var(--font-base);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--pw-primary);
  letter-spacing: 0.05em;
}

.pilates-guided-tag__title {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pw-ink);
}

.pilates-guided-tag__desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.45;
}

/* ---------- 2. Sección 3: Qué trabajamos (.pilates-capacities) ---------- */
.pilates-capacities {
  padding-block: var(--space-section-dense);
  background: #122623;
  color: var(--pw-white);
  position: relative;
  overflow: hidden;
}

.pilates-capacities::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--pw-line-on-dark);
}

.pilates-capacities__head {
  max-width: 44rem;
  margin-bottom: var(--sp-16);
}

.pilates-capacities__head .section-heading {
  color: var(--pw-white);
}

.pilates-capacities__head .section-lead {
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--sp-4);
}

.pilates-capacities__grid {
  display: grid;
  gap: var(--sp-12);
}

@media (min-width: 960px) {
  .pilates-capacities__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 5vw, 6rem);
    align-items: start;
  }
}

.pilates-capacities__visual {
  position: relative;
}

@media (min-width: 960px) {
  .pilates-capacities__visual {
    position: sticky;
    top: calc(72px + var(--sp-8));
  }
}

.pilates-capacities__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pilates-capacities__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.pilates-capacities__badge {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  background: rgba(18, 38, 35, 0.88);
  backdrop-filter: blur(8px);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius, 2px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  font-weight: 500;
}

.pilates-capacities__list {
  display: flex;
  flex-direction: column;
}

.pilates-cap-item {
  border-top: 1px solid var(--pw-line-on-dark);
  padding-block: var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: baseline;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.pilates-cap-item:last-child {
  border-bottom: 1px solid var(--pw-line-on-dark);
}

.pilates-cap-item__num {
  font-family: var(--font-base);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 500;
  color: var(--pw-accent-accessible);
  opacity: 0.8;
  line-height: 1;
}

.pilates-cap-item__body {
  display: grid;
  gap: var(--sp-2);
}

.pilates-cap-item__title {
  font-family: var(--font-base);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--pw-white);
  letter-spacing: -0.01em;
}

.pilates-cap-item__desc {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  max-width: 48ch;
}

/* ---------- 3. Sección 4: El Reformer se adapta a ti (.reformer-adapt) ---------- */
.reformer-adapt {
  padding-block: var(--space-section-dense);
  background: var(--pw-mist);
  position: relative;
}

.reformer-adapt__head {
  max-width: 48rem;
  margin-bottom: var(--sp-12);
}

.reformer-adapt__head .section-lead {
  color: var(--pw-ink-70);
  margin-top: var(--sp-4);
}

.reformer-adapt__interactive {
  display: grid;
  gap: var(--sp-8);
}

.reformer-adapt__viewport {
  position: relative;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  background: #0d1e1a;
  border: 1px solid var(--pw-line);
}

.reformer-adapt__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .reformer-adapt__img {
    aspect-ratio: 4 / 3;
  }
}

/* Hotspots discretos */
.reformer-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--pw-white);
  background: var(--pw-primary);
  color: var(--pw-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.reformer-pin::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--pw-accent-accessible);
  opacity: 0.6;
  animation: reformerPulse 2.4s infinite cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes reformerPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.reformer-pin:hover,
.reformer-pin:focus-visible,
.reformer-pin.is-active {
  background: var(--pw-primary-900);
  border-color: var(--pw-accent-accessible);
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 4px rgba(35, 115, 105, 0.4);
}

/* Tooltip editorial sobre la foto (desktop) */
.reformer-pin__tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(18, 38, 35, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--pw-white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius, 2px);
  width: max-content;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 10;
  text-align: left;
}

@media (max-width: 768px) {
  .reformer-pin__tooltip {
    display: none; /* En móvil usamos las cards inferiores sincronizadas */
  }
}

.reformer-pin:hover .reformer-pin__tooltip,
.reformer-pin:focus-visible .reformer-pin__tooltip,
.reformer-pin.is-active .reformer-pin__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.reformer-pin__title {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  margin-bottom: 2px;
}

.reformer-pin__text {
  font-size: var(--fs-label);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

/* Tarjetas sincronizadas bajo la máquina */
.reformer-adapt__cards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .reformer-adapt__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .reformer-adapt__cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.reformer-card {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 2px);
  padding: var(--sp-5);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  width: 100%;
}

.reformer-card:hover,
.reformer-card:focus-visible {
  border-color: var(--pw-primary);
  transform: translateY(-2px);
}

.reformer-card.is-active {
  border-color: var(--pw-primary);
  background: var(--pw-white);
  box-shadow: 0 4px 16px rgba(18, 32, 29, 0.08);
  position: relative;
}

.reformer-card.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pw-primary);
}

.reformer-card__index {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
  margin-bottom: var(--sp-2);
  display: block;
}

.reformer-card__title {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pw-ink);
  margin-bottom: var(--sp-2);
}

.reformer-card__desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.45;
}

/* ---------- 4. Sección 5: Perfiles (.pilates-profiles) ---------- */
.pilates-profiles {
  padding-block: var(--space-section-dense);
  background: #122623;
  color: var(--pw-white);
  position: relative;
}

.pilates-profiles__head {
  max-width: 44rem;
  margin-bottom: var(--sp-12);
}

.pilates-profiles__head .section-heading {
  color: var(--pw-white);
}

.pilates-profiles__head .section-lead {
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--sp-4);
}

.pilates-profiles__tabs {
  display: flex;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--pw-line-on-dark);
  margin-bottom: var(--sp-10);
  overflow-x: auto;
  scrollbar-width: none;
}

.pilates-profiles__tabs::-webkit-scrollbar {
  display: none;
}

.pilates-profiles__tab {
  font-family: var(--font-base);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-6);
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.pilates-profiles__tab:hover,
.pilates-profiles__tab:focus-visible {
  color: var(--pw-white);
}

.pilates-profiles__tab[aria-selected="true"] {
  color: var(--pw-white);
  border-bottom-color: var(--pw-accent-accessible);
}

.pilates-profiles__panel {
  display: grid;
  gap: var(--sp-8);
  animation: pilatesPanelFade 0.35s var(--ease-out) both;
}

@keyframes pilatesPanelFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 860px) {
  .pilates-profiles__panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--sp-16);
    align-items: start;
  }
}

.pilates-profiles__thesis {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--pw-white);
  margin-bottom: var(--sp-6);
  letter-spacing: -0.01em;
}

.pilates-profiles__narrative {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 58ch;
}

.pilates-profiles__features {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--pw-line-on-dark);
  border-radius: var(--radius, 2px);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}

.pilates-profiles__feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.pilates-profiles__feature-icon {
  color: var(--pw-accent-accessible);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- 5. Sección 6: Así es una sesión (.pilates-journey) ---------- */
.pilates-journey {
  padding-block: var(--space-section);
  background: var(--pw-white);
  position: relative;
}

.pilates-journey__head {
  max-width: 44rem;
  margin-bottom: var(--sp-16);
}

.pilates-journey__head .section-lead {
  color: var(--pw-ink-70);
  margin-top: var(--sp-4);
}

.pilates-journey__grid {
  display: grid;
  gap: var(--sp-12);
}

@media (min-width: 960px) {
  .pilates-journey__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
  }
}

.pilates-journey__timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: var(--sp-10);
}

.pilates-journey__line {
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--pw-line);
}

.pilates-journey__line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--pw-primary);
  transition: height var(--dur-med) var(--ease-out);
}

.pilates-journey__step {
  position: relative;
  padding-bottom: var(--sp-10);
  transition: opacity var(--dur-med) var(--ease-out);
}

.pilates-journey__step:last-child {
  padding-bottom: 0;
}

.pilates-journey__node {
  position: absolute;
  left: calc(-1 * var(--sp-10) + 4px);
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pw-white);
  border: 2px solid var(--pw-ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.pilates-journey__step.is-active .pilates-journey__node {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
}

.pilates-journey__node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pilates-journey__step.is-active .pilates-journey__node-dot {
  background: var(--pw-white);
}

.pilates-journey__step-tag {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-primary);
  margin-bottom: var(--sp-2);
  display: block;
}

.pilates-journey__step-title {
  font-family: var(--font-base);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}

.pilates-journey__step-desc {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  line-height: 1.5;
  max-width: 48ch;
}

.pilates-journey__media {
  margin: 0;
  position: relative;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  border: 1px solid var(--pw-line);
}

.pilates-journey__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pilates-journey__caption {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius, 2px);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--pw-ink);
  font-weight: 500;
  border: 1px solid var(--pw-line);
}

/* ---------- 6. Sección 7: Conexión con Physio Wellness (.pilates-ecosystem) ---------- */
.pilates-ecosystem {
  padding-block: var(--space-section-dense);
  background: #122623;
  color: var(--pw-white);
  position: relative;
}

.pilates-ecosystem__head {
  max-width: 48rem;
  margin-bottom: var(--sp-16);
}

.pilates-ecosystem__head .section-heading {
  color: var(--pw-white);
}

.pilates-ecosystem__head .section-lead {
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--sp-4);
}

.pilates-ecosystem__constellation {
  display: grid;
  gap: var(--sp-6);
}

.pilates-ecosystem__core {
  background: rgba(35, 115, 105, 0.18);
  border: 1px solid var(--pw-accent-accessible);
  border-radius: var(--radius, 2px);
  padding: var(--sp-6) var(--sp-8);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  width: 100%;
}

.pilates-ecosystem__core-tag {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  font-weight: 600;
  display: inline-block;
  margin-bottom: var(--sp-2);
}

.pilates-ecosystem__core-title {
  font-family: var(--font-base);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--pw-white);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.01em;
}

.pilates-ecosystem__core-desc {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  max-width: 52ch;
  margin-inline: auto;
}

.pilates-ecosystem__nodes {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

@media (min-width: 640px) {
  .pilates-ecosystem__nodes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pilates-ecosystem__nodes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pilates-node {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pw-line-on-dark);
  border-radius: var(--radius, 2px);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.pilates-node:hover {
  border-color: var(--pw-accent-accessible);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.pilates-node__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.pilates-node__num {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-accent-accessible);
  letter-spacing: 0.06em;
}

.pilates-node__title {
  font-family: var(--font-base);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--pw-white);
  letter-spacing: -0.01em;
}

.pilates-node__desc {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
  flex-grow: 1;
}

.pilates-node__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  margin-top: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.pilates-node__link:hover {
  color: var(--pw-white);
}

.pilates-node__link svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

.pilates-node__link:hover svg {
  transform: translateX(3px);
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .reformer-pin::before {
    animation: none !important;
  }
  .pilates-profiles__panel {
    animation: none !important;
  }
  .pilates-guided-tag,
  .reformer-card,
  .pilates-node {
    transition: none !important;
  }
}

/* ==========================================================================
   FUERZA (STRENGTH) — SISTEMA EDITORIAL E INTERACCIONES
   ========================================================================== */

/* 1. Sección: No entrenamos por entrenar (.strength-philosophy) */
.strength-philosophy {
  padding-block: var(--space-section);
  background: var(--pw-mist);
}

.strength-philosophy__head {
  max-width: 64ch;
  margin-bottom: clamp(var(--sp-10), 4.5vw, var(--sp-14));
}

.strength-philosophy__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .strength-philosophy__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-12);
  }
}

.strength-philosophy__step {
  position: relative;
  border-top: 1px solid var(--pw-line);
  padding-top: var(--sp-8);
  transition: transform var(--dur-med) var(--ease-out);
}

.strength-philosophy__step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--pw-primary);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.strength-philosophy__step:hover::before,
.strength-philosophy__step:focus-within::before {
  opacity: 1;
  transform: scaleX(1);
}

.strength-philosophy__num {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
  display: block;
  margin-bottom: var(--sp-3);
}

.strength-philosophy__title {
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}

.strength-philosophy__desc {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0;
}

/* 2. Sección: Qué trabajamos interactivo (.specialty-list--interactive) */
.specialty-list--interactive {
  padding-block: var(--space-section);
  background: var(--pw-white);
}

.strength-work__grid {
  display: grid;
  gap: var(--sp-12);
}

@media (min-width: 960px) {
  .strength-work__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-16);
    align-items: start;
  }
}

.strength-work__head {
  max-width: 58ch;
  margin-bottom: clamp(var(--sp-10), 4.5vw, var(--sp-14));
}

.strength-work__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.strength-work__item {
  border-top: 1px solid var(--pw-line);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.strength-work__item:last-child {
  border-bottom: 1px solid var(--pw-line);
}

.strength-work__btn {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-2);
  width: 100%;
  cursor: pointer;
  outline: none;
  position: relative;
}

.strength-work__btn:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
}

.strength-work__btn::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pw-primary);
  transition: width var(--dur-med) var(--ease-out);
}

.strength-work__item.is-active .strength-work__btn::before,
.strength-work__btn:hover::before {
  width: 3.5rem;
}

.strength-work__num {
  grid-row: 1 / 3;
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-primary);
  padding-top: 0.15em;
  letter-spacing: 0.06em;
}

.strength-work__title {
  grid-column: 2;
  font-family: var(--font-base);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.strength-work__item.is-active .strength-work__title,
.strength-work__btn:hover .strength-work__title {
  color: var(--pw-primary);
}

.strength-work__desc {
  grid-column: 2;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0;
  max-width: 52ch;
  transition: color var(--dur-fast) var(--ease-out);
}

.strength-work__item.is-active .strength-work__desc {
  color: var(--pw-ink);
}

/* Columna visual con marco editorial */
.strength-work__media {
  position: sticky;
  top: var(--sp-sticky-top, 6rem);
  margin: 0;
}

@media (max-width: 959px) {
  .strength-work__media {
    display: none;
  }
}

.strength-work__media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius, 4px);
  overflow: hidden;
  background: var(--pw-mist);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}

.strength-work__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.strength-work__media-img.is-fading {
  opacity: 0.35;
  transform: scale(1.02);
}

.strength-work__caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) var(--sp-6);
  background: linear-gradient(to top, rgba(15, 36, 32, 0.85) 0%, rgba(15, 36, 32, 0) 100%);
  color: var(--pw-white);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.strength-work__caption-index {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-accent-accessible, #4fb8aa);
  letter-spacing: 0.08em;
}

.strength-work__caption-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pw-white);
}

/* 3. Sección: ¿Para quién es Fuerza? (.strength-audience) */
.strength-audience {
  padding-block: var(--space-section);
  background: var(--pw-mist);
}

.strength-audience__head {
  max-width: 64ch;
  margin-bottom: clamp(var(--sp-10), 4.5vw, var(--sp-14));
}

.strength-audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.audience-item {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 4px);
  padding: var(--sp-5) var(--sp-6);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  position: relative;
}

.audience-item:hover {
  border-color: rgba(35, 115, 105, 0.35);
}

.audience-item.is-open {
  border-color: var(--pw-primary);
  box-shadow: 0 6px 20px rgba(35, 115, 105, 0.06);
  background: #ffffff;
}

.audience-item__trigger {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding-block: var(--sp-2);
  padding-right: var(--sp-2);
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  outline: none;
}

.audience-item__trigger:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
}

.audience-item__num {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.audience-item__title {
  font-family: var(--font-base);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  transition: color var(--dur-fast) var(--ease-out);
}

.audience-item:hover .audience-item__title {
  color: var(--pw-primary-dark, #1b5b53);
}

.audience-item.is-open .audience-item__title {
  color: var(--pw-primary);
}

.audience-item__icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  border-radius: 50%;
  background: rgba(18, 32, 29, 0.04);
  color: var(--pw-ink-70);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.audience-item:hover .audience-item__icon {
  background: rgba(35, 115, 105, 0.08);
  color: var(--pw-primary);
}

.audience-item.is-open .audience-item__icon {
  transform: rotate(45deg);
  background: var(--pw-primary);
  color: var(--pw-white);
}

.audience-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.audience-item.is-open .audience-item__body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.audience-item__body-inner {
  min-height: 0;
  overflow: hidden;
}

.audience-item__desc {
  padding-top: var(--sp-3);
  padding-left: calc(2.75rem + var(--sp-4));
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--pw-ink-70);
  margin: 0;
}

@media (max-width: 767px) {
  .audience-item {
    padding: var(--sp-4) var(--sp-5);
  }
  .audience-item__trigger {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: var(--sp-3);
  }
  .audience-item__title {
    font-size: 1.1rem;
  }
  .audience-item__desc {
    padding-left: 0;
    font-size: 0.96rem;
  }
}

/* 4. Sección: Cómo es una sesión (.session-journey) */
.session-journey {
  padding-block: var(--space-section);
  background: var(--pw-white);
}

.session-journey__container {
  max-width: 1320px;
}

.session-journey__head {
  max-width: 62ch;
  margin-bottom: clamp(var(--sp-12), 5vw, var(--sp-16));
}

/* Desktop: recorrido horizontal con máxima presencia y aire */
@media (min-width: 960px) {
  .session-journey__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(var(--sp-6), 2.8vw, var(--sp-10));
  }

  .session-journey__track::before {
    content: '';
    position: absolute;
    top: 0.65rem;
    left: 1.25rem;
    right: 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(35, 115, 105, 0.3) 0%, rgba(35, 115, 105, 0.2) 100%);
    z-index: 1;
  }

  .journey-step {
    position: relative;
    z-index: 2;
    padding-top: var(--sp-10);
    display: flex;
    flex-direction: column;
  }

  .journey-step__dot {
    position: absolute;
    top: 0.65rem;
    left: 0;
    transform: translateY(-50%);
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--pw-white);
    border: 2.5px solid var(--pw-primary);
    box-shadow: 0 0 0 4px rgba(35, 115, 105, 0.08);
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  .journey-step:hover .journey-step__dot {
    transform: translateY(-50%) scale(1.35);
    background: var(--pw-primary);
    box-shadow: 0 0 0 6px rgba(35, 115, 105, 0.18);
  }

  .journey-step__num {
    font-family: var(--font-base);
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--pw-primary);
    letter-spacing: 0.12em;
    display: inline-block;
    margin-bottom: var(--sp-3);
  }

  .journey-step__title {
    font-family: var(--font-base);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pw-ink);
    margin: 0 0 var(--sp-3);
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .journey-step__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pw-ink-70);
    margin: 0;
  }
}

/* Tablet intermedio (768px - 959px) */
@media (min-width: 768px) and (max-width: 959px) {
  .session-journey__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }

  .journey-step {
    padding-top: var(--sp-6);
    border-top: 2px solid var(--pw-line);
  }

  .journey-step__dot {
    display: none;
  }

  .journey-step__num {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--pw-primary);
    margin-bottom: var(--sp-2);
    display: block;
  }

  .journey-step__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pw-ink);
    margin-bottom: var(--sp-2);
  }

  .journey-step__desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--pw-ink-70);
  }
}

/* Mobile: timeline vertical generoso y aireado */
@media (max-width: 767px) {
  .session-journey__track {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 2.75rem;
  }

  .session-journey__track::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 2px;
    background: linear-gradient(180deg, var(--pw-primary) 0%, rgba(35, 115, 105, 0.2) 100%);
  }

  .journey-step {
    position: relative;
    padding-bottom: var(--sp-10);
  }

  .journey-step:last-child {
    padding-bottom: 0;
  }

  .journey-step__dot {
    position: absolute;
    top: 0.35rem;
    left: -2.75rem;
    transform: translateX(0.12rem);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--pw-white);
    border: 2px solid var(--pw-primary);
    box-shadow: 0 0 0 3px rgba(35, 115, 105, 0.1);
  }

  .journey-step__num {
    font-family: var(--font-base);
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--pw-primary);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: var(--sp-1);
  }

  .journey-step__title {
    font-family: var(--font-base);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pw-ink);
    margin-bottom: var(--sp-2);
  }

  .journey-step__desc {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--pw-ink-70);
    margin: 0;
  }
}

/* Ecosistema de Tecnología y Maquinaria en Ski/Snow (.strength-tech) */
.strength-tech {
  margin-top: clamp(var(--sp-14), 5vw, var(--sp-20));
  padding-top: clamp(var(--sp-12), 4.5vw, var(--sp-16));
  border-top: 1px solid var(--pw-line);
}

.strength-tech__head {
  max-width: 68ch;
  margin-bottom: clamp(var(--sp-8), 3.5vw, var(--sp-12));
}

.strength-tech__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--pw-ink);
  margin: var(--sp-2) 0 var(--sp-3);
  line-height: 1.2;
}

.strength-tech__desc {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--pw-ink-70);
  margin: 0;
}

.strength-tech__layout {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-8), 3.5vw, var(--sp-12));
}

/* Featured Hero: Power Plate my5 (gris) — más compacto y equilibrado */
.strength-tech__featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 4px);
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  align-items: center;
  box-shadow: 0 4px 18px rgba(18, 32, 29, 0.04);
}

@media (min-width: 860px) {
  .strength-tech__featured {
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--sp-10);
  }
}

.strength-tech__badge {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-primary);
  background: rgba(35, 115, 105, 0.08);
  border: 1px solid rgba(35, 115, 105, 0.2);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  margin-bottom: var(--sp-3);
}

.strength-tech__item-title {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0 0 var(--sp-1);
  letter-spacing: -0.01em;
}

.strength-tech__item-role {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
  margin-bottom: var(--sp-3);
}

.strength-tech__item-desc {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--pw-ink-70);
  margin: 0 0 var(--sp-5);
  max-width: 54ch;
}

.strength-tech__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  border-top: 1px solid var(--pw-line);
  padding-top: var(--sp-3);
}

@media (min-width: 640px) {
  .strength-tech__specs {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
}

.strength-tech__specs li {
  font-size: 0.85rem;
  color: var(--pw-ink-70);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.strength-tech__specs li span {
  font-weight: 600;
  color: var(--pw-ink);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.strength-tech__featured-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  background: none;
}

.strength-tech__img--hero {
  max-height: 250px;
  width: auto;
  object-fit: contain;
  transition: transform var(--dur-normal) var(--ease-out);
}

.strength-tech__featured:hover .strength-tech__img--hero {
  transform: translateY(-3px) scale(1.02);
}

/* Support Rail & Navigation (.strength-tech__support) */
.strength-tech__support {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.strength-tech__support-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
}

.strength-tech__support-titles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.strength-tech__support-label {
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pw-primary);
}

.strength-tech__support-sub {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pw-ink);
  margin: 0;
}

.strength-tech__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.strength-tech__nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--pw-line);
  background: var(--pw-white);
  color: var(--pw-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.strength-tech__nav-btn:hover:not(:disabled) {
  background: var(--pw-primary);
  border-color: var(--pw-primary);
  color: var(--pw-white);
  transform: scale(1.05);
}

.strength-tech__nav-btn:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
}

.strength-tech__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.strength-tech__rail {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0 var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 115, 105, 0.3) transparent;
  -webkit-overflow-scrolling: touch;
}

.strength-tech__rail::-webkit-scrollbar {
  height: 5px;
}

.strength-tech__rail::-webkit-scrollbar-thumb {
  background: rgba(35, 115, 105, 0.25);
  border-radius: 999px;
}

.strength-tech__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 4px);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.strength-tech__card:hover {
  transform: translateY(-3px);
  border-color: rgba(35, 115, 105, 0.35);
  box-shadow: 0 8px 22px rgba(18, 32, 29, 0.05);
}

.strength-tech__card-visual {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  background: none;
  padding: var(--sp-2);
}

.strength-tech__card-visual .strength-tech__img {
  max-height: 110px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform var(--dur-normal) var(--ease-out);
}

.strength-tech__card:hover .strength-tech__img {
  transform: scale(1.05);
}

.strength-tech__card-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.strength-tech__card-tag {
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-primary);
  margin-bottom: var(--sp-1);
}

.strength-tech__card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.01em;
}

.strength-tech__card-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--pw-ink-70);
  margin: 0;
}

/* 10. Sección: Tarifas de Fuerza (.strength-rates) */
.strength-rates {
  padding-top: clamp(4.5rem, 7.5vw, 7rem);
  padding-bottom: clamp(5.5rem, 8.5vw, 7.75rem);
  background: var(--pw-mist);
  border-block: 1px solid var(--pw-line);
}

.strength-rates__head {
  max-width: 64ch;
  margin-bottom: clamp(3rem, 4.5vw, 4rem);
}

.strength-rates__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

@media (min-width: 960px) {
  .strength-rates__grid {
    grid-template-columns: 1fr 1.08fr 1fr;
    align-items: stretch;
    gap: clamp(1.5rem, 2.2vw, 2rem);
  }
}

.strength-rate-card {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 4px);
  padding: clamp(1.75rem, 2.8vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.85rem);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.strength-rate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(18, 32, 29, 0.08);
}

.strength-rate-card--featured {
  border: 2px solid var(--pw-primary);
  box-shadow: 0 8px 24px rgba(35, 115, 105, 0.1);
  background: #fdfdfc;
}

.strength-rate-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: clamp(0.9rem, 1.4vw, 1.15rem);
}

.strength-rate-card__badge {
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pw-ink-70);
  background: rgba(18, 32, 29, 0.05);
  border-radius: 100px;
  padding: 0.25rem 0.65rem;
}

.strength-rate-card__badge--accent {
  color: var(--pw-primary);
  background: rgba(35, 115, 105, 0.1);
  border: 1px solid rgba(35, 115, 105, 0.25);
}

.strength-rate-card__duration {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pw-ink-70);
  letter-spacing: 0.02em;
  margin: 0;
}

.strength-rate-card__title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.strength-rate-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0 0 clamp(1.25rem, 2vw, 1.6rem);
  min-height: 4.2em;
}

.strength-rate-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: clamp(1.25rem, 2vw, 1.6rem);
  padding-bottom: clamp(1rem, 1.6vw, 1.35rem);
  border-bottom: 1px solid var(--pw-line);
}

.strength-rate-card__price {
  font-family: var(--font-base);
  font-size: clamp(2.4rem, 3.5vw, 3rem);
  font-weight: 600;
  color: var(--pw-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.strength-rate-card__unit {
  font-size: 0.82rem;
  color: var(--pw-ink-70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.strength-rate-card__features {
  list-style: none;
  margin: 0 0 clamp(1.25rem, 2.2vw, 1.75rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-grow: 1;
}

.strength-rate-card__features li {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--pw-ink-70);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.strength-rate-card__features li::before {
  content: '✓';
  color: var(--pw-primary);
  font-weight: 700;
}

.strength-rate-card__bonos {
  margin: 0 0 clamp(1.25rem, 2.2vw, 1.75rem);
  padding: clamp(0.9rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.25rem);
  background: var(--pw-mist);
  border-radius: var(--radius, 4px);
  border: 1px solid rgba(18, 32, 29, 0.06);
  flex-grow: 1;
}

.strength-rate-card__bonos-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pw-ink);
  margin: 0 0 0.65rem;
}

.strength-rate-bonos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.strength-rate-bonos-list li {
  font-size: 0.88rem;
  color: var(--pw-ink-70);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.strength-rate-bonos-list li strong {
  color: var(--pw-ink);
  font-weight: 600;
}

.strength-rate-bonos-list li small {
  font-size: 0.78rem;
  color: var(--pw-primary);
}

.strength-rate-card__btn {
  width: 100%;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: 0.9rem 1.25rem;
  margin-top: auto;
}

/* Strip de condiciones */
.strength-rates__strip {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 4px);
  padding: clamp(1.35rem, 2.2vw, 1.85rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 860px) {
  .strength-rates__strip {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.strength-rates__strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) clamp(1.5rem, 2.5vw, 2.25rem);
  align-items: center;
}

.strength-rates__strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--pw-ink-70);
}

.strength-rates__strip-item strong {
  color: var(--pw-ink);
}

.strength-rates__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pw-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.strength-rates__more-link:hover,
.strength-rates__more-link:focus-visible {
  color: var(--pw-primary-dark);
  text-decoration: underline;
  transform: translateX(4px);
}

/* 5. Badge programa especializado Snow Performance */
.strength-seasonal__badge {
  display: inline-block;
  font-family: var(--font-base);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--pw-primary);
  padding: 0.35rem 0.85rem;
  background: rgba(35, 115, 105, 0.09);
  border: 1px solid rgba(35, 115, 105, 0.22);
  border-radius: 100px;
  margin-bottom: var(--sp-4);
}

/* 6. Sección: Relación entre áreas (.strength-relations) */
.strength-relations {
  padding-block: var(--space-section);
  background: var(--pw-white);
}

.strength-relations__head {
  max-width: 62ch;
  margin-bottom: clamp(var(--sp-10), 4.5vw, var(--sp-14));
}

.strength-relations__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--pw-line);
}

.relation-row {
  border-top: 1px solid var(--pw-line);
  padding-block: var(--sp-8);
  display: grid;
  gap: var(--sp-4);
  transition: background-color var(--dur-fast) var(--ease-out);
}

@media (min-width: 860px) {
  .relation-row {
    grid-template-columns: 240px 1fr auto;
    align-items: baseline;
    column-gap: var(--sp-8);
    padding-block: var(--sp-10);
  }
}

.relation-row__area {
  font-family: var(--font-base);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.relation-row__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.relation-row__focus {
  font-family: var(--font-base);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pw-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.relation-row__desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pw-ink-70);
  margin: 0;
  max-width: 58ch;
}

.relation-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pw-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.relation-row__link:hover,
.relation-row__link:focus-visible {
  color: var(--pw-primary-dark);
  text-decoration: underline;
  transform: translateX(4px);
}

/* 7. Sección: El espacio de entrenamiento (.strength-facility) */
.strength-facility {
  padding-block: var(--space-section);
  background: var(--pw-mist);
}

.strength-facility__head {
  max-width: 64ch;
  margin-bottom: clamp(var(--sp-8), 3.5vw, var(--sp-10));
}

.strength-facility__features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
  font-family: var(--font-base);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pw-ink-70);
  letter-spacing: 0.02em;
}

.strength-facility__feature-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.strength-facility__feature-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pw-primary);
}

/* Galería editorial: 1 Hero panorámico + 2 vistas de detalle */
.strength-facility__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.strength-facility__card {
  margin: 0;
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 4px);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18, 32, 29, 0.04);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.strength-facility__card:hover {
  transform: translateY(-3px);
  border-color: rgba(35, 115, 105, 0.3);
  box-shadow: 0 12px 32px rgba(18, 32, 29, 0.08);
}

.strength-facility__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pw-mist);
}

.strength-facility__media--hero {
  aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
  .strength-facility__media,
  .strength-facility__media--hero {
    aspect-ratio: 4 / 3;
  }
}

.strength-facility__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.strength-facility__card:hover .strength-facility__img {
  transform: scale(1.03);
}

.strength-facility__caption {
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--pw-line);
  background: var(--pw-white);
}

.strength-facility__caption-badge {
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pw-primary);
}

.strength-facility__caption-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pw-ink-80);
  line-height: 1.45;
}

.strength-facility__subgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 860px) {
  .strength-facility__subgrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Accesibilidad para reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .strength-philosophy__step,
  .strength-philosophy__step::before,
  .strength-work__media-img,
  .strength-facility__img,
  .journey-step__dot,
  .audience-item__icon {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   STRETCHING — SISTEMA EDITORIAL E INTERACCIONES
   ========================================================================== */

/* 1. ¿Encaja contigo? (.stretching-fit) */
.stretching-fit {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-24);
  background: var(--pw-white);
  position: relative;
}

.stretching-fit__head {
  margin-bottom: var(--sp-16);
}

@media (min-width: 900px) {
  .stretching-fit__head {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: var(--sp-16);
    align-items: end;
  }
}

.stretching-fit__intro {
  max-width: 56ch;
}

.stretching-fit__synthesis {
  margin-top: var(--sp-8);
}

@media (min-width: 900px) {
  .stretching-fit__synthesis {
    margin-top: 0;
    padding-left: var(--sp-8);
    border-left: 1px solid var(--pw-line);
  }
}

.stretching-fit__synthesis-label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--pw-primary);
  margin: 0 0 var(--sp-3);
  line-height: 1.3;
}

.stretching-fit__synthesis-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 540px) and (max-width: 899px) {
  .stretching-fit__synthesis-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-6);
  }
  .stretching-fit__synthesis-item:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .stretching-fit__synthesis-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-6);
  }
  .stretching-fit__synthesis-item:last-child {
    grid-column: 1 / -1;
  }
}

.stretching-fit__synthesis-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.45;
}

.stretching-fit__synthesis-item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--pw-primary);
  flex-shrink: 0;
  transform: translateY(-2px);
}

.stretching-fit__layout {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 900px) {
  .stretching-fit__layout {
    grid-template-columns: 1.15fr 0.95fr;
    gap: var(--sp-16);
  }
}

.stretching-fit__list {
  display: flex;
  flex-direction: column;
}

.stretching-fit-item {
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid var(--pw-line);
  padding: var(--sp-8) var(--sp-4);
  margin: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}

.stretching-fit-item:last-child {
  border-bottom: 1px solid var(--pw-line);
}

.stretching-fit-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--pw-primary);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.stretching-fit-item:hover,
.stretching-fit-item:focus-visible {
  background: rgba(35, 115, 105, 0.03);
}

.stretching-fit-item.is-active {
  background: rgba(35, 115, 105, 0.045);
  padding-left: var(--sp-6);
}

.stretching-fit-item.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

.stretching-fit-item__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.stretching-fit-item__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.stretching-fit-item__tag {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pw-ink-50);
}

.stretching-fit-item__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--pw-ink);
  line-height: 1.25;
  margin-bottom: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.stretching-fit-item.is-active .stretching-fit-item__title {
  color: var(--pw-primary);
}

.stretching-fit-item__desc {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  line-height: 1.5;
  max-width: 50ch;
  margin-bottom: var(--sp-3);
}

.stretching-fit-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--pw-ink-50);
  padding-top: var(--sp-2);
}

.stretching-fit-item__focus {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.stretching-fit-item__arrow {
  color: var(--pw-primary);
  font-size: 1.1rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.stretching-fit-item:hover .stretching-fit-item__arrow,
.stretching-fit-item.is-active .stretching-fit-item__arrow {
  transform: translateX(4px);
}

.stretching-fit__mobile-img {
  display: none;
  margin-top: var(--sp-4);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.stretching-fit__mobile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 899px) {
  .stretching-fit__visual {
    display: none;
  }
  .stretching-fit__mobile-img {
    display: block;
  }
}

/* Columna visual sticky */
.stretching-fit__visual {
  position: sticky;
  top: 6rem;
}

.stretching-fit__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pw-mist);
  box-shadow: 0 16px 44px rgba(18, 32, 29, 0.08);
}

.stretching-fit__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s var(--ease-out), transform 0.8s var(--ease-emphatic);
}

.stretching-fit__img.is-fading {
  opacity: 0.3;
}

.stretching-fit__figure:hover .stretching-fit__img {
  transform: scale(1.02);
}

.stretching-fit__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 32, 29, 0) 40%, rgba(18, 32, 29, 0.72) 100%);
  pointer-events: none;
}

.stretching-fit__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-6) var(--sp-8);
  color: var(--pw-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stretching-fit__badge-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.stretching-fit__badge-index {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-accent-accessible);
}

.stretching-fit__badge-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stretching-fit__badge-focus {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.82);
}

/* 2. Sección Conceptual Manifiesto (.stretching-concept) */
.stretching-concept {
  padding-block: var(--space-section-dense);
  background: var(--pw-primary-900);
  color: var(--pw-white);
  position: relative;
  overflow: hidden;
}

.stretching-concept::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 152, 136, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.stretching-concept__inner {
  max-width: 68rem;
  margin-inline: auto;
}

.stretching-concept__eyebrow {
  color: var(--pw-accent-accessible);
  margin-bottom: var(--sp-4);
}

.stretching-concept__headline {
  font-size: clamp(1.85rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.stretching-concept__headline-muted {
  color: rgba(255, 255, 255, 0.55);
}

.stretching-concept__headline-main {
  color: var(--pw-white);
}

.stretching-concept__intro {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  margin-bottom: var(--sp-12);
}

/* Recorrido de observación gráfica */
.stretching-concept__trajectory {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-8);
  border-block: 1px solid var(--pw-line-on-dark);
  margin-bottom: var(--sp-16);
}

.stretching-trajectory__step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.stretching-trajectory__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-accent-accessible);
}

.stretching-trajectory__label {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pw-white);
}

.stretching-trajectory__arrow {
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .stretching-concept__trajectory {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .stretching-trajectory__arrow {
    display: none;
  }
}

/* Bloques de contraposición */
.stretching-concept__contrast {
  display: grid;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}

@media (min-width: 768px) {
  .stretching-concept__contrast {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
}

.stretching-contrast-col {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--pw-line-on-dark);
  border-radius: var(--radius);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.stretching-contrast-col:hover {
  background: rgba(255, 255, 255, 0.07);
}

.stretching-contrast-col__tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stretching-contrast-col--no .stretching-contrast-col__tag {
  color: rgba(255, 255, 255, 0.55);
}

.stretching-contrast-col--yes .stretching-contrast-col__tag {
  color: var(--pw-accent-accessible);
}

.stretching-contrast-col__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pw-white);
  line-height: 1.3;
}

.stretching-contrast-col__text {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* Conexión con el Método */
.stretching-concept__method-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--pw-line-on-dark);
}

@media (min-width: 768px) {
  .stretching-concept__method-link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
  }
}

.stretching-concept__method-badge {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-accent-accessible);
  white-space: nowrap;
}

.stretching-concept__method-text {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
  line-height: 1.5;
}

.stretching-concept__method-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--pw-accent-accessible);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.stretching-concept__method-cta:hover {
  color: var(--pw-white);
}

/* 3. Qué se trabaja en cada sesión (.stretching-work) */
.stretching-work {
  padding-block: var(--space-section);
  background: var(--pw-mist);
}

.stretching-work__head {
  max-width: 64ch;
  margin-bottom: var(--sp-16);
}

.stretching-work__grid {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 960px) {
  .stretching-work__grid {
    grid-template-columns: 1.25fr 0.85fr;
    gap: var(--sp-16);
  }
}

.stretching-work__list {
  display: flex;
  flex-direction: column;
}

.stretching-work-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-8);
  row-gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--pw-line);
  cursor: pointer;
  outline: none;
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.stretching-work-item:last-child {
  border-bottom: 1px solid var(--pw-line);
}

.stretching-work-item:hover,
.stretching-work-item:focus-visible {
  background: rgba(35, 115, 105, 0.035);
}

.stretching-work-item.is-active {
  background: var(--pw-white);
  box-shadow: 0 4px 18px rgba(18, 32, 29, 0.05);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-6);
  border-color: transparent;
}

.stretching-work-item__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
  padding-top: 0.25em;
}

.stretching-work-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stretching-work-item__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pw-ink);
  line-height: 1.25;
}

.stretching-work-item.is-active .stretching-work-item__title {
  color: var(--pw-primary);
}

.stretching-work-item__lead {
  font-size: var(--fs-body);
  color: var(--pw-ink-70);
  line-height: 1.5;
  max-width: 52ch;
}

.stretching-work-item__detail {
  display: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.55;
  max-width: 52ch;
  border-top: 1px dashed var(--pw-line);
  padding-top: var(--sp-3);
}

.stretching-work-item.is-active .stretching-work-item__detail {
  display: block;
}

/* Columna visual dinámica */
.stretching-work__visual {
  display: none;
}

@media (min-width: 960px) {
  .stretching-work__visual {
    display: block;
    position: sticky;
    top: 6rem;
  }
}

.stretching-work__card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(18, 32, 29, 0.08);
  background: var(--pw-white);
}

.stretching-work__figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.stretching-work__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stretching-work__card:hover .stretching-work__figure img {
  transform: scale(1.02);
}

.stretching-work__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-6);
  background: linear-gradient(180deg, rgba(18, 32, 29, 0) 0%, rgba(18, 32, 29, 0.85) 100%);
  color: var(--pw-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stretching-work__badge-tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-accent-accessible);
  text-transform: uppercase;
}

.stretching-work__badge-text {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

/* 4. Cómo es una sesión (.stretching-session) */
.stretching-session {
  padding-block: var(--space-section);
  background: var(--pw-white);
}

.stretching-session__head {
  max-width: 64ch;
  margin-bottom: var(--sp-16);
}

.stretching-session__timeline {
  position: relative;
}

.stretching-session__line {
  position: absolute;
  top: 1.25rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pw-line);
  z-index: 1;
  display: none;
}

.stretching-session__progress {
  height: 100%;
  width: 33.33%;
  background: var(--pw-primary);
  transition: width 0.6s var(--ease-emphatic);
}

@media (min-width: 768px) {
  .stretching-session__line {
    display: block;
  }
}

.stretching-session__steps {
  display: grid;
  gap: var(--sp-8);
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .stretching-session__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
}

.stretching-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  background: var(--pw-white);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .stretching-step {
    border: none;
    padding: 0;
    padding-top: var(--sp-8);
    background: transparent;
  }
}

.stretching-step.is-active {
  border-color: rgba(35, 115, 105, 0.4);
}

.stretching-step__marker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.stretching-step__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pw-line);
  background: var(--pw-white);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.stretching-step.is-active .stretching-step__dot {
  background: var(--pw-primary);
  border-color: var(--pw-primary);
  transform: scale(1.2);
}

.stretching-step__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.stretching-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stretching-step__phase {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pw-ink-50);
}

.stretching-step__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--pw-ink);
  line-height: 1.2;
}

.stretching-step.is-active .stretching-step__title {
  color: var(--pw-primary);
}

.stretching-step__desc {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.45;
}

.stretching-step__sub {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.55;
}

/* 5. Relación entre áreas (.stretching-ecosystem) */
.stretching-ecosystem {
  padding-block: var(--space-section);
  background: var(--pw-mist);
}

.stretching-ecosystem__head {
  max-width: 64ch;
  margin-bottom: var(--sp-16);
}

.stretching-ecosystem__hub {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: var(--sp-8);
  box-shadow: 0 8px 30px rgba(18, 32, 29, 0.04);
}

@media (min-width: 860px) {
  .stretching-ecosystem__hub {
    padding: var(--sp-12);
  }
}

.stretching-ecosystem__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--pw-line);
}

.stretching-eco-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  background: var(--pw-primary-900);
  color: var(--pw-white);
}

.stretching-eco-pill__status {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-accent-accessible);
  padding: 0.1em 0.4em;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.stretching-eco-pill__name {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.stretching-eco-divider {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pw-ink-50);
}

.stretching-eco-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--pw-line);
  background: var(--pw-white);
  color: var(--pw-ink);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.stretching-eco-tab:hover {
  background: var(--pw-mist);
  border-color: rgba(18, 32, 29, 0.25);
}

.stretching-eco-tab.is-active {
  background: var(--pw-primary);
  border-color: var(--pw-primary);
  color: var(--pw-white);
}

.stretching-eco-tab__num {
  font-size: var(--fs-label);
  opacity: 0.75;
}

.stretching-eco-panel {
  display: none;
  animation: serviceHeroContentFadeUp 0.4s var(--ease-emphatic) both;
}

.stretching-eco-panel.is-active {
  display: block;
}

.stretching-eco-panel__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 860px) {
  .stretching-eco-panel__grid {
    grid-template-columns: 1fr auto;
    gap: var(--sp-12);
  }
}

.stretching-eco-panel__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 60ch;
}

.stretching-eco-panel__synergy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stretching-eco-panel__tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-primary);
}

.stretching-eco-panel__headline {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 600;
  color: var(--pw-ink);
}

.stretching-eco-panel__desc {
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.45;
}

.stretching-eco-panel__detail {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.6;
}

.stretching-eco-panel__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pw-primary);
  text-transform: uppercase;
  margin-top: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.stretching-eco-panel__link:hover {
  color: var(--pw-primary-600);
}

.stretching-eco-panel__badge {
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 220px;
}

.stretching-eco-badge__title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-ink-50);
}

.stretching-eco-badge__sub {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--pw-primary);
  line-height: 1.4;
}

.stretching-ecosystem__footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--pw-line);
}

/* 6. El espacio (.stretching-space) */
.stretching-space {
  padding-block: var(--space-section);
  background: var(--pw-white);
}

.stretching-space__head {
  max-width: 64ch;
  margin-bottom: var(--sp-16);
}

.stretching-space__mosaic {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 900px) {
  .stretching-space__mosaic {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-8);
    align-items: stretch;
  }
}

.stretching-space__col {
  display: grid;
  gap: var(--sp-8);
}

.stretching-space__item {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pw-mist);
  box-shadow: 0 12px 36px rgba(18, 32, 29, 0.06);
}

.stretching-space__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stretching-space__item:hover img {
  transform: scale(1.02);
}

.stretching-space__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-4) var(--sp-6);
  background: linear-gradient(180deg, rgba(18, 32, 29, 0) 0%, rgba(18, 32, 29, 0.75) 100%);
  color: var(--pw-white);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.stretching-space__item--main {
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .stretching-space__item--main {
    aspect-ratio: auto;
    height: 100%;
  }
}

.stretching-space__item--secondary,
.stretching-space__item--tertiary {
  aspect-ratio: 16 / 10;
}

/* 7. Sección de Tarifas (.stretching-rates) */
.stretching-rates {
  padding-block: var(--space-section);
  background: var(--pw-mist);
}

.stretching-rates__card {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius);
  padding: var(--sp-12) var(--sp-8);
  display: grid;
  gap: var(--sp-8);
  box-shadow: 0 12px 40px rgba(18, 32, 29, 0.04);
}

@media (min-width: 860px) {
  .stretching-rates__card {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--sp-16) var(--sp-12);
    gap: var(--sp-16);
  }
}

.stretching-rates__content {
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.stretching-rates__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--pw-ink);
  line-height: 1.15;
}

.stretching-rates__lead {
  font-size: var(--fs-lead);
  color: var(--pw-ink-70);
  line-height: 1.55;
}

.stretching-rates__note {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--pw-primary);
}

.stretching-rates__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  min-width: 240px;
}

.stretching-rates__btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.stretching-rates__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}

.stretching-rates__secondary:hover {
  color: var(--pw-primary);
}

/* Reducción de movimiento para Stretching */
@media (prefers-reduced-motion: reduce) {
  .stretching-fit-item::before,
  .stretching-fit-item__arrow,
  .stretching-fit__img,
  .stretching-contrast-col,
  .stretching-work-item,
  .stretching-work__figure img,
  .stretching-step__dot,
  .stretching-eco-tab,
  .stretching-space__item img {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   FISIOTERAPIA A DOMICILIO — SISTEMA EDITORIAL E INTERACCIONES
   ========================================================================== */

/* 1. Potenciación: Un proceso individual (.domicilio-journey) */
.domicilio-journey {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.domicilio-journey__grid {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 960px) {
  .domicilio-journey__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 6rem);
  }
}

.domicilio-journey__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.domicilio-journey__lead {
  font-size: var(--fs-lead);
  color: var(--pw-ink-70);
  line-height: 1.6;
  margin: 0;
}

.domicilio-journey__stages {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
  position: relative;
  padding-left: var(--sp-6);
}

.domicilio-journey__stages::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--pw-line);
}

.domicilio-journey__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.domicilio-journey__stage-dot {
  position: absolute;
  left: calc(-1 * var(--sp-6) + 3px);
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pw-primary);
  box-shadow: 0 0 0 3px var(--pw-white);
}

.domicilio-journey__stage-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.domicilio-journey__stage-num {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.domicilio-journey__stage-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0;
}

.domicilio-journey__stage-desc {
  font-size: var(--fs-small);
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}

.domicilio-journey__visual {
  position: relative;
}

.domicilio-journey__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(18, 32, 29, 0.08);
}

.domicilio-journey__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  display: block;
}

.domicilio-journey__tag {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-6);
  background: rgba(14, 33, 29, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--pw-white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius, 2px);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.domicilio-journey__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fd9c9;
}

/* 2. ¿Cuándo tiene sentido? (.domicilio-when) */
.domicilio-when {
  padding-block: var(--space-section);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}

.domicilio-when__head {
  max-width: 68ch;
  margin-bottom: var(--sp-12);
}

.domicilio-when__grid {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 960px) {
  .domicilio-when__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 6rem);
  }
}

.domicilio-when__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.domicilio-when__item {
  border-bottom: 1px solid var(--pw-line);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.domicilio-when__item:first-child {
  border-top: 1px solid var(--pw-line);
}

.domicilio-when__item.is-active {
  background-color: rgba(35, 115, 105, 0.04);
}

.domicilio-when__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--pw-ink);
  font-family: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}

.domicilio-when__btn:hover,
.domicilio-when__btn:focus-visible {
  color: var(--pw-primary);
}

.domicilio-when__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--pw-primary);
  min-width: 2.2ch;
}

.domicilio-when__title {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}

.domicilio-when__chevron {
  width: 12px;
  height: 12px;
  margin-left: auto;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out);
  align-self: center;
}

.domicilio-when__chevron::before,
.domicilio-when__chevron::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}

.domicilio-when__chevron::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

.domicilio-when__chevron::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

.domicilio-when__btn[aria-expanded="true"] .domicilio-when__chevron::after {
  transform: rotate(90deg);
  opacity: 0;
}

.domicilio-when__panel {
  padding-left: calc(2.2ch + var(--sp-4));
  padding-right: var(--sp-4);
  padding-bottom: var(--sp-5);
}

.domicilio-when__desc {
  font-size: 0.95rem;
  color: var(--pw-ink-70);
  line-height: 1.6;
  margin: 0;
  max-width: 54ch;
}

.domicilio-when__visual-wrap {
  position: sticky;
  top: clamp(6rem, 12vh, 8rem);
  display: none;
}

@media (min-width: 960px) {
  .domicilio-when__visual-wrap {
    display: block;
  }
}

.domicilio-when__visual {
  border-radius: var(--radius, 2px);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(18, 32, 29, 0.08);
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pw-white);
}

.domicilio-when__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.domicilio-when__img.is-fading {
  opacity: 0.2;
  transform: scale(0.98);
}

.domicilio-when__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) var(--sp-6);
  background: linear-gradient(to top, rgba(14, 33, 29, 0.85) 0%, rgba(14, 33, 29, 0) 100%);
  color: var(--pw-white);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}

/* 3. Sección principal: La clínica se desplaza contigo (.domicilio-shift) */
.domicilio-shift {
  padding-block: var(--space-section-dense);
  background: #0e211d;
  color: var(--pw-white);
  position: relative;
  overflow: hidden;
}

.domicilio-shift::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 152, 136, 0.12) 0%, rgba(14, 33, 29, 0) 70%);
  pointer-events: none;
}

.domicilio-shift__inner {
  position: relative;
  display: grid;
  gap: var(--sp-12);
}

@media (min-width: 960px) {
  .domicilio-shift__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}

.domicilio-shift__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.domicilio-shift__eyebrow {
  color: #8fd9c9;
}

.domicilio-shift__title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--pw-white);
  margin: 0;
}

.domicilio-shift__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 50ch;
}

.domicilio-shift__cards {
  display: grid;
  gap: var(--sp-4);
}

.domicilio-shift__card {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius, 2px);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.domicilio-shift__card:hover {
  border-color: rgba(143, 217, 201, 0.4);
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

.domicilio-shift__card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.domicilio-shift__card-num {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8fd9c9;
}

.domicilio-shift__card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pw-white);
  margin: 0;
}

.domicilio-shift__card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.domicilio-shift__media {
  position: relative;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.domicilio-shift__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.domicilio-shift__media-quote {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-6);
  right: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(14, 33, 29, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 2px solid #8fd9c9;
  border-radius: var(--radius, 2px);
}

.domicilio-shift__quote-text {
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  margin: 0;
}

/* 4. Sección de la Maleta / Material (.domicilio-kit) */
.domicilio-kit {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.domicilio-kit__head {
  max-width: 68ch;
  margin-bottom: var(--sp-12);
}

.domicilio-kit__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 960px) {
  .domicilio-kit__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 5vw, 6rem);
  }
}

.domicilio-kit__figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(18, 32, 29, 0.08);
}

.domicilio-kit__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  display: block;
}

.domicilio-kit__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.domicilio-kit__item {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 2px);
  background: var(--pw-white);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.domicilio-kit__item:hover {
  border-color: var(--pw-primary);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(18, 32, 29, 0.05);
}

.domicilio-kit__item-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

.domicilio-kit__item-tag {
  font-family: var(--font-base);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.domicilio-kit__item-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0;
}

.domicilio-kit__item-desc {
  font-size: 0.9rem;
  color: var(--pw-ink-70);
  line-height: 1.5;
  margin: 0;
}

/* 5. Información práctica (.domicilio-plan) */
.domicilio-plan {
  padding-block: var(--space-section);
  background: var(--pw-mist);
  border-bottom: 1px solid var(--pw-line);
}

.domicilio-plan__card {
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius, 2px);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  gap: var(--sp-8);
  box-shadow: 0 12px 36px rgba(18, 32, 29, 0.04);
}

@media (min-width: 860px) {
  .domicilio-plan__card {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.domicilio-plan__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.domicilio-plan__badge-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.domicilio-plan__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(35, 115, 105, 0.08);
  color: var(--pw-primary);
  border-radius: var(--radius, 2px);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.domicilio-plan__time {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pw-ink);
  line-height: 1;
}

.domicilio-plan__pillars {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1rem;
  font-weight: 500;
  color: var(--pw-primary);
  flex-wrap: wrap;
}

.domicilio-plan__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pw-ink-70);
  margin: 0;
}

.domicilio-plan__action {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--pw-line);
}

@media (min-width: 860px) {
  .domicilio-plan__action {
    padding-top: 0;
    border-top: none;
    padding-left: clamp(2rem, 4vw, 4rem);
    border-left: 1px solid var(--pw-line);
  }
}

.domicilio-plan__btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.domicilio-plan__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--pw-ink-70);
  transition: color var(--dur-fast) var(--ease-out);
}

.domicilio-plan__whatsapp:hover {
  color: var(--pw-primary);
}

.domicilio-plan__tarifas-note {
  font-size: var(--fs-label);
  color: var(--pw-ink-50);
  line-height: 1.4;
  margin: 0;
}

.domicilio-plan__tarifas-note a {
  color: var(--pw-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 6. Zona de Desplazamiento (.domicilio-coverage) */
.domicilio-coverage {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-bottom: 1px solid var(--pw-line);
}

.domicilio-coverage__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 960px) {
  .domicilio-coverage__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.domicilio-coverage__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.domicilio-coverage__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--pw-ink-70);
  margin: 0;
  max-width: 54ch;
}

.domicilio-coverage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

/* Gráfico territorial minimalista (Radar geométrico editorial) */
.domicilio-radar {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.domicilio-radar__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--pw-line);
  pointer-events: none;
}

.domicilio-radar__ring--1 {
  width: 32%;
  height: 32%;
  border-style: solid;
  border-color: rgba(35, 115, 105, 0.2);
}

.domicilio-radar__ring--2 {
  width: 64%;
  height: 64%;
  border-color: rgba(35, 115, 105, 0.15);
}

.domicilio-radar__ring--3 {
  width: 96%;
  height: 96%;
  border-color: rgba(35, 115, 105, 0.1);
}

.domicilio-radar__axis {
  position: absolute;
  background: var(--pw-line);
  pointer-events: none;
}

.domicilio-radar__axis--h {
  left: 5%;
  right: 5%;
  height: 1px;
}

.domicilio-radar__axis--v {
  top: 5%;
  bottom: 5%;
  width: 1px;
}

.domicilio-radar__hub {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  background: var(--pw-white);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--pw-primary);
  border-radius: var(--radius, 2px);
  box-shadow: 0 4px 16px rgba(35, 115, 105, 0.12);
}

.domicilio-radar__hub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pw-primary);
  box-shadow: 0 0 0 3px rgba(35, 115, 105, 0.2);
}

.domicilio-radar__hub-title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-ink);
  text-transform: uppercase;
}

.domicilio-radar__satellite {
  position: absolute;
  z-index: 2;
  background: var(--pw-mist);
  border: 1px solid var(--pw-line);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius, 2px);
  font-size: var(--fs-label);
  color: var(--pw-ink-70);
  white-space: nowrap;
}

.domicilio-radar__satellite--1 {
  top: 14%;
  right: 10%;
}

.domicilio-radar__satellite--2 {
  bottom: 16%;
  left: 8%;
}

/* Reducción de movimiento para Fisioterapia a Domicilio */
@media (prefers-reduced-motion: reduce) {
  .domicilio-when__item,
  .domicilio-when__btn,
  .domicilio-when__chevron,
  .domicilio-when__img,
  .domicilio-shift__card,
  .domicilio-kit__item {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   BIENESTAR: SISTEMA EDITORIAL DE SERVICIO
   Componentes para wellness.html:
   - .wellness-needs: ¿Qué necesitas hoy? (Interacción editorial con foto grande)
   - .wellness-tools: Herramientas para cada objetivo
   - .wellness-method: Bienestar dentro del Método Marshall (Tríada conectada)
   - .wellness-profiles: ¿Para quién es? (Flujo espacioso de perfiles)
   ========================================================================== */

/* 1. ¿Qué necesitas hoy? (.wellness-needs) */
.wellness-needs {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-top: 1px solid var(--pw-line);
}

.wellness-needs__head {
  max-width: 68ch;
  margin-bottom: var(--sp-16);
}

.wellness-needs__layout {
  display: grid;
  gap: var(--sp-12);
}

.wellness-needs__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--pw-line);
}

.wellness-need-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--pw-line);
  padding: var(--sp-6) var(--sp-4) var(--sp-6) var(--sp-6);
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.wellness-need-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pw-primary);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.wellness-need-item:hover,
.wellness-need-item:focus-visible {
  background-color: rgba(35, 115, 105, 0.03);
}

.wellness-need-item.is-active {
  background-color: rgba(35, 115, 105, 0.05);
}

.wellness-need-item.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.wellness-need-item__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.wellness-need-item__num {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.wellness-need-item__tag {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pw-ink-50);
}

.wellness-need-item__title {
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.2;
  transition: color var(--dur-fast) var(--ease-out);
}

.wellness-need-item.is-active .wellness-need-item__title {
  color: var(--pw-primary);
}

.wellness-need-item__desc {
  margin: 0 0 var(--sp-4);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pw-ink-70);
  max-width: 50ch;
}

.wellness-need-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: var(--sp-2);
}

.wellness-need-item__focus {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pw-ink-50);
  transition: color var(--dur-fast) var(--ease-out);
}

.wellness-need-item.is-active .wellness-need-item__focus {
  color: var(--pw-primary-600);
}

.wellness-need-item__arrow {
  font-size: 1.1rem;
  color: var(--pw-primary);
  transform: translateX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.wellness-need-item:hover .wellness-need-item__arrow,
.wellness-need-item.is-active .wellness-need-item__arrow {
  transform: translateX(5px);
}

.wellness-needs__mobile-img {
  display: none;
  width: 100%;
  margin-top: var(--sp-4);
  border-radius: var(--radius-tile, 16px);
  overflow: hidden;
  aspect-ratio: 16/9;
}

.wellness-needs__mobile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Columna visual (derecha en desktop) */
.wellness-needs__visual {
  position: relative;
  display: none;
}

.wellness-needs__figure {
  position: sticky;
  top: var(--sp-sticky-top, 6rem);
  margin: 0;
  aspect-ratio: 4/5;
  border-radius: var(--radius-tile, 20px);
  overflow: hidden;
  box-shadow: 0 16px 40px -12px rgba(18, 32, 29, 0.12);
}

.wellness-needs__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.04) contrast(1.02);
  transition: opacity 0.35s var(--ease-out);
}

.wellness-needs__img.is-fading {
  opacity: 0.3;
}

.wellness-needs__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 32, 29, 0.85) 100%);
  pointer-events: none;
}

.wellness-needs__badge {
  position: absolute;
  left: var(--sp-6);
  right: var(--sp-6);
  bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  color: var(--pw-white);
  z-index: 2;
}

.wellness-needs__badge-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.wellness-needs__badge-index {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8fd9c9;
}

.wellness-needs__badge-title {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wellness-needs__badge-focus {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 960px) {
  .wellness-needs__layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-16);
    align-items: start;
  }
  .wellness-needs__visual {
    display: block;
  }
}

@media (max-width: 959px) {
  .wellness-needs__mobile-img {
    display: block;
  }
}

/* 2. Herramientas para cada objetivo (.wellness-tools) */
.wellness-tools {
  padding-block: var(--space-section);
  background: var(--pw-mist);
  border-top: 1px solid var(--pw-line);
}

.wellness-tools__head {
  max-width: 68ch;
  margin-bottom: var(--sp-16);
}

.wellness-tools__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .wellness-tools__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
}

.wellness-tool-card {
  display: flex;
  flex-direction: column;
  background: var(--pw-white);
  border: 1px solid var(--pw-line);
  border-radius: var(--radius-tile, 16px);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 4px 16px rgba(18, 32, 29, 0.03);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.wellness-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -8px rgba(18, 32, 29, 0.08);
  border-color: rgba(35, 115, 105, 0.3);
}

.wellness-tool-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--pw-line);
}

.wellness-tool-card__num {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1;
  color: var(--pw-primary);
  font-feature-settings: 'tnum' 1;
}

.wellness-tool-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.wellness-tool-card__category {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pw-primary);
  margin: 0;
}

.wellness-tool-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--pw-ink);
  letter-spacing: -0.01em;
}

.wellness-tool-card__lead {
  margin: 0 0 var(--sp-6);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
  flex-grow: 1;
}

.wellness-tool-card__tools {
  background: rgba(35, 115, 105, 0.03);
  border-radius: var(--radius, 4px);
  padding: var(--sp-5);
  border-left: 2px solid var(--pw-primary);
}

.wellness-tool-card__tools-label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pw-primary);
}

.wellness-tool-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.wellness-tool-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.wellness-tool-item__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pw-ink);
}

.wellness-tool-item__desc {
  font-size: 0.825rem;
  line-height: 1.45;
  color: var(--pw-ink-70);
}

/* 3. Estilo de subtítulo de paso en .service-process */
.service-process__step-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pw-ink);
  margin: 0 0 var(--sp-1);
}

/* 4. Bienestar dentro del Método Marshall (.wellness-method) */
.wellness-method {
  padding-block: var(--space-section-dense);
  background: var(--pw-primary-900);
  color: var(--pw-white);
  border-top: 1px solid var(--pw-line-on-dark);
  position: relative;
  overflow: hidden;
}

.wellness-method::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(38, 152, 136, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.wellness-method__head {
  max-width: 68ch;
  margin-bottom: var(--sp-16);
  position: relative;
  z-index: 1;
}

.wellness-method__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--pw-white);
  letter-spacing: -0.01em;
}

.wellness-method__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.wellness-method__diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .wellness-method__diagram {
    grid-template-columns: 1fr auto 1.15fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
  }
}

.wellness-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--pw-line-on-dark);
  border-radius: var(--radius-tile, 16px);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  position: relative;
  backdrop-filter: blur(8px);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.wellness-node:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(143, 217, 201, 0.4);
  transform: translateY(-2px);
}

.wellness-node.is-featured {
  background: rgba(38, 152, 136, 0.14);
  border-color: rgba(143, 217, 201, 0.45);
  box-shadow: 0 0 40px rgba(38, 152, 136, 0.15);
}

.wellness-node__badge {
  position: absolute;
  top: -0.75rem;
  right: 1.25rem;
  background: #8fd9c9;
  color: var(--pw-primary-900);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius, 2px);
}

.wellness-node__indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.wellness-node__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fd9c9;
}

.wellness-node__index {
  font-size: var(--fs-label);
  font-weight: 600;
  color: #8fd9c9;
  letter-spacing: 0.08em;
}

.wellness-node__title {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 500;
  color: var(--pw-white);
  margin: 0 0 var(--sp-3);
}

.wellness-node__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 var(--sp-4);
  flex-grow: 1;
}

.wellness-node__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8fd9c9;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.wellness-node__link:hover {
  color: var(--pw-white);
  transform: translateX(3px);
}

.wellness-node__current {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Conectores inter-nodos */
.wellness-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}

.wellness-connector__line {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

@media (max-width: 959px) {
  .wellness-connector__line {
    width: 2px;
    height: 36px;
  }
}

.wellness-connector__pulse {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, #8fd9c9, transparent);
  animation: wellnessPulse 3s infinite linear;
}

@keyframes wellnessPulse {
  0% { left: -30px; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wellness-connector__pulse {
    animation: none;
    display: none;
  }
}

.wellness-connector__tag {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 0.725rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #8fd9c9;
  text-align: center;
  white-space: nowrap;
}

.wellness-method__action {
  margin-top: var(--sp-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}

.wellness-method__note {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* 5. ¿Para quién es? (.wellness-profiles) */
.wellness-profiles {
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-top: 1px solid var(--pw-line);
}

.wellness-profiles__grid {
  display: grid;
  gap: var(--sp-12);
}

@media (min-width: 960px) {
  .wellness-profiles__grid {
    grid-template-columns: 1fr 1.35fr;
    gap: var(--sp-24);
    align-items: start;
  }
  .wellness-profiles__intro {
    position: sticky;
    top: var(--sp-sticky-top, 6rem);
  }
}

.wellness-profiles__accent-box {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--pw-mist);
  border-left: 3px solid var(--pw-primary);
  border-radius: var(--radius, 2px);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.wellness-profiles__accent-num {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--pw-primary);
  font-feature-settings: 'tnum' 1;
}

.wellness-profiles__accent-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pw-ink-70);
  margin: 0;
}

.wellness-profiles__list {
  display: flex;
  flex-direction: column;
}

.wellness-profile-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--pw-line);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.wellness-profile-item:first-child {
  border-top: 1px solid var(--pw-line);
}

.wellness-profile-item:hover {
  background-color: rgba(35, 115, 105, 0.02);
}

.wellness-profile-item__num {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--pw-primary);
  font-feature-settings: 'tnum' 1;
  opacity: 0.9;
}

.wellness-profile-item__content {
  display: flex;
  flex-direction: column;
}

.wellness-profile-item__title {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 500;
  color: var(--pw-ink);
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
}

.wellness-profile-item__highlight {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pw-primary-600);
  line-height: 1.5;
  margin: 0 0 var(--sp-2);
}

.wellness-profile-item__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0;
}

/* ==========================================================================
   Equipment Showcase (.equipment-showcase)
   Componente global reutilizable para tecnología y equipamiento en servicios.
   Estética editorial, limpia y clínica. Sin aspecto de ecommerce.
   ========================================================================== */

.equipment-showcase {
  position: relative;
  padding-block: var(--space-section);
  background: var(--pw-white);
  border-top: 1px solid var(--pw-line);
  overflow: hidden;
}

/* Encabezado */
.equipment-showcase__head {
  max-width: 68ch;
  margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.equipment-showcase__head .section-heading {
  margin-bottom: var(--sp-3);
}

.equipment-showcase__head .section-lead {
  color: var(--pw-ink-70);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin: 0;
}

/* Stage principal (Layout split: featured machine + selector rail) */
.equipment-showcase__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  align-items: center;
}

@media (min-width: 960px) {
  .equipment-showcase__stage {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(var(--sp-10), 5vw, var(--sp-16));
  }
}

/* Columna Protagonista (Hero display) */
.equipment-showcase__featured {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: clamp(var(--sp-6), 3.5vw, var(--sp-10));
  position: relative;
  overflow: hidden;
  min-height: 420px;
  justify-content: space-between;
}

/* Contenedor de la imagen recortada sin fondo */
.equipment-showcase__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: clamp(220px, 28vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-6);
  padding: clamp(0.5rem, 1.5vw, 1rem);
  box-sizing: border-box;
}

.equipment-showcase__img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  aspect-ratio: auto;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  will-change: opacity, transform;
}

.equipment-showcase__media.is-changing .equipment-showcase__img {
  opacity: 0;
  transform: scale(0.92) translateY(6px);
}

/* Información de la máquina protagonista */
.equipment-showcase__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: opacity var(--dur-med) var(--ease-out);
}

.equipment-showcase__info.is-changing {
  opacity: 0;
}

.equipment-showcase__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-primary-600);
  background: rgba(35, 115, 105, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 2px;
  margin-bottom: var(--sp-1);
}

.equipment-showcase__name {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--pw-ink);
  line-height: 1.15;
  margin: 0;
}

.equipment-showcase__role {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--pw-primary);
  margin: 0;
  line-height: 1.4;
}

.equipment-showcase__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--pw-ink-70);
  margin: 0;
}

/* Columna de Navegación y Selector (Rail / Thumbnails) */
.equipment-showcase__nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  gap: var(--sp-4);
}

.equipment-showcase__nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--pw-line);
}

.equipment-showcase__nav-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pw-ink-50);
}

.equipment-showcase__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.equipment-showcase__counter {
  font-size: var(--fs-small);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  color: var(--pw-ink-70);
  min-width: 4.5ch;
  text-align: center;
}

.equipment-showcase__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pw-line);
  background: var(--pw-white);
  color: var(--pw-ink);
  transition: all var(--dur-fast) var(--ease-out);
}

.equipment-showcase__btn:hover {
  border-color: var(--pw-primary);
  color: var(--pw-primary);
  background: var(--pw-mist);
}

.equipment-showcase__btn:focus-visible {
  outline: 2px solid var(--pw-accent);
  outline-offset: 2px;
}

/* Track de mini-cards / botones interactivos */
.equipment-showcase__track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.equipment-showcase__item-btn {
  display: grid;
  grid-template-columns: 2.2ch 1fr 50px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--pw-white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}

.equipment-showcase__item-btn:hover {
  background: var(--pw-mist);
}

.equipment-showcase__item-btn.is-active {
  background: var(--pw-white);
  border-color: var(--pw-primary);
  box-shadow: 0 4px 12px rgba(18, 32, 29, 0.05);
}

.equipment-showcase__item-num {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-ink-50);
  font-feature-settings: "tnum" 1;
}

.equipment-showcase__item-btn.is-active .equipment-showcase__item-num {
  color: var(--pw-primary);
}

.equipment-showcase__item-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--pw-ink);
  margin: 0;
  line-height: 1.25;
}

.equipment-showcase__item-tag {
  font-size: var(--fs-label);
  color: var(--pw-ink-50);
  display: block;
  margin-top: 2px;
}

.equipment-showcase__item-thumb {
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
}

.equipment-showcase__item-thumb img {
  width: 100%;
  height: 100%;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  object-position: center center;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.equipment-showcase__item-btn.is-active .equipment-showcase__item-thumb img {
  opacity: 1;
}

/* Variant Single: Pilates Reformer Spotlight */
.equipment-showcase--single {
  background: var(--pw-white);
}

.equipment-showcase--single .equipment-showcase__stage {
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .equipment-showcase--single .equipment-showcase__stage {
    grid-template-columns: 1.15fr 1fr;
  }
}

.equipment-showcase__single-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: clamp(var(--sp-6), 4vw, var(--sp-12));
  min-height: 360px;
}

.equipment-showcase__single-visual img {
  width: 100%;
  height: 100%;
  max-width: 90%;
  max-height: 340px;
  object-fit: contain;
  object-position: center center;
}

.equipment-showcase__single-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.equipment-showcase__single-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

@media (min-width: 640px) {
  .equipment-showcase__single-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

.equipment-showcase__pillar {
  border-top: 1px solid var(--pw-line);
  padding-top: var(--sp-3);
}

.equipment-showcase__pillar-num {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pw-primary);
  font-feature-settings: "tnum" 1;
}

.equipment-showcase__pillar-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pw-ink);
  margin: var(--sp-1) 0;
}

.equipment-showcase__pillar-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--pw-ink-70);
  margin: 0;
}

/* Mobile swipe & overflow adjustments */
@media (max-width: 640px) {
  .equipment-showcase__track {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-2);
    gap: var(--sp-2);
  }
  .equipment-showcase__item-btn {
    min-width: 220px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   COOKIE CONSENT SYSTEM & BANNER (Physio Wellness)
   Google Consent Mode (Basic mode) UI
   ========================================================================== */

/* Footer cookie link / button */
.site-footer__cookie-btn,
.site-footer__legal button[data-open-cookie-settings]{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  font-size:inherit;
  color:inherit;
  cursor:pointer;
  opacity:.85;
  transition:opacity .2s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.site-footer__cookie-btn:hover,
.site-footer__legal button[data-open-cookie-settings]:hover{
  opacity:1;
}
.site-footer__cookie-btn:focus-visible,
.site-footer__legal button[data-open-cookie-settings]:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}

/* Layer 1: Cookie Banner */
.pw-cookie-banner{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  width:min(940px, calc(100% - 2rem));
  z-index:999990;
  background:var(--pw-primary-900);
  border:1px solid var(--pw-line-on-dark);
  border-radius:4px;
  box-shadow:0 16px 40px rgba(0,0,0,0.38);
  color:var(--pw-white);
  padding:1.5rem 1.75rem;
  display:none;
  animation:pwCookieSlideUp .3s cubic-bezier(0.16,1,0.3,1);
}
.pw-cookie-banner.is-visible{
  display:block !important;
}
@keyframes pwCookieSlideUp{
  from{opacity:0;transform:translate(-50%, 20px);}
  to{opacity:1;transform:translate(-50%, 0);}
}

.pw-cookie-banner__inner{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
@media (min-width:860px){
  .pw-cookie-banner__inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
  }
}

.pw-cookie-banner__content{
  flex:1;
}

.pw-cookie-banner__title{
  font-size:1.15rem;
  font-weight:600;
  margin:0 0 0.5rem;
  letter-spacing:-0.01em;
  color:var(--pw-white);
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.pw-cookie-banner__text{
  font-size:0.925rem;
  line-height:1.55;
  color:rgba(255,255,255,0.85);
  margin:0;
}

.pw-cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.75rem;
  flex-shrink:0;
}

/* Equal hierarchy buttons for Accept and Reject */
.pw-cookie-banner__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0.75rem 1.4rem;
  font-family:inherit;
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.pw-cookie-banner__btn:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}

.pw-cookie-banner__btn--accept{
  background:var(--pw-primary);
  color:var(--pw-white);
  border:1px solid var(--pw-primary);
}
.pw-cookie-banner__btn--accept:hover{
  background:var(--pw-primary-600);
  border-color:var(--pw-primary-600);
  transform:translateY(-1px);
}

.pw-cookie-banner__btn--reject{
  background:rgba(255,255,255,0.12);
  color:var(--pw-white);
  border:1px solid rgba(255,255,255,0.45);
}
.pw-cookie-banner__btn--reject:hover{
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.7);
  transform:translateY(-1px);
}

.pw-cookie-banner__btn--settings{
  background:transparent;
  color:#8fd9c9;
  border:1px solid rgba(143,217,201,0.45);
}
.pw-cookie-banner__btn--settings:hover{
  background:rgba(143,217,201,0.14);
  border-color:#8fd9c9;
  transform:translateY(-1px);
}

@media (max-width:540px){
  .pw-cookie-banner{
    bottom:0.75rem;
    width:calc(100% - 1.5rem);
    padding:1.25rem 1.25rem;
  }
  .pw-cookie-banner__actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.6rem;
  }
  .pw-cookie-banner__btn--settings{
    grid-column:1 / -1;
  }
}

/* Layer 2: Settings Modal */
.pw-cookie-modal{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  z-index:999995;
  display:none;
  align-items:center;
  justify-content:center;
}
.pw-cookie-modal.is-open{
  display:flex !important;
}

.pw-cookie-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,18,16,0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}

.pw-cookie-modal__stage{
  position:relative;
  z-index:2;
  width:min(620px, 92vw);
  max-height:min(88vh, 700px);
  background:var(--pw-white);
  border-radius:var(--radius-lg, 8px);
  border:1px solid var(--pw-line);
  box-shadow:0 24px 50px -12px rgba(12,18,16,0.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:modalFadeIn .25s cubic-bezier(0.16,1,0.3,1);
}

.pw-cookie-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-6) var(--sp-8);
  border-bottom:1px solid var(--pw-line);
  flex-shrink:0;
}

.pw-cookie-modal__title{
  font-size:1.25rem;
  font-weight:600;
  color:var(--pw-ink);
  margin:0;
  letter-spacing:-0.01em;
}

.pw-cookie-modal__close{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--pw-line);
  background:transparent;
  color:var(--pw-ink);
  font-size:1.15rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  line-height:1;
  padding:0;
}
.pw-cookie-modal__close:hover{
  background:var(--pw-mist);
  color:var(--pw-primary);
  border-color:var(--pw-primary);
}
.pw-cookie-modal__close:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}

.pw-cookie-modal__body{
  padding:var(--sp-6) var(--sp-8);
  overflow-y:auto;
  flex:1;
  overscroll-behavior:contain;
}

.pw-cookie-modal__intro{
  font-size:0.925rem;
  line-height:1.6;
  color:var(--pw-ink-70);
  margin:0 0 var(--sp-6);
}

.pw-cookie-categories{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.pw-cookie-card{
  border:1px solid var(--pw-line);
  border-radius:4px;
  padding:1.15rem 1.25rem;
  background:var(--pw-white);
  transition:border-color .2s ease;
}
.pw-cookie-card:hover{
  border-color:rgba(35,115,105,0.3);
}

.pw-cookie-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.6rem;
}

.pw-cookie-card__info{
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-wrap:wrap;
}

.pw-cookie-card__name{
  font-size:1rem;
  font-weight:600;
  color:var(--pw-ink);
  margin:0;
}

.pw-cookie-card__badge{
  font-size:0.75rem;
  font-weight:600;
  padding:0.2rem 0.55rem;
  border-radius:2px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.pw-cookie-card__badge--always{
  background:rgba(35,115,105,0.12);
  color:var(--pw-primary);
}
.pw-cookie-card__badge--vendor{
  background:rgba(18,32,29,0.06);
  color:var(--pw-ink-70);
}

.pw-cookie-card__desc{
  font-size:0.875rem;
  line-height:1.55;
  color:var(--pw-ink-70);
  margin:0;
}

/* Accessible Toggle Switch */
.pw-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:44px;
  height:24px;
  cursor:pointer;
  flex-shrink:0;
}
.pw-toggle input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.pw-toggle__track{
  position:absolute;
  inset:0;
  background:#d1d5db;
  border-radius:24px;
  transition:background-color .2s ease;
}
.pw-toggle input:checked + .pw-toggle__track{
  background:var(--pw-primary);
}
.pw-toggle input:disabled + .pw-toggle__track{
  background:var(--pw-primary-600);
  opacity:0.75;
  cursor:not-allowed;
}
.pw-toggle input:focus-visible + .pw-toggle__track{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}
.pw-toggle__thumb{
  position:absolute;
  left:2px;
  top:2px;
  width:20px;
  height:20px;
  background:#ffffff;
  border-radius:50%;
  transition:transform .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.pw-toggle input:checked + .pw-toggle__track .pw-toggle__thumb{
  transform:translateX(20px);
}

.pw-cookie-modal__footer{
  padding:var(--sp-5) var(--sp-8);
  border-top:1px solid var(--pw-line);
  background:var(--pw-mist);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:0.75rem;
  flex-shrink:0;
}

.pw-cookie-modal__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0.75rem 1.4rem;
  font-family:inherit;
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.pw-cookie-modal__btn:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}

.pw-cookie-modal__btn--save{
  background:var(--pw-primary);
  color:var(--pw-white);
  border:1px solid var(--pw-primary);
}
.pw-cookie-modal__btn--save:hover{
  background:var(--pw-primary-600);
  border-color:var(--pw-primary-600);
  transform:translateY(-1px);
}

.pw-cookie-modal__btn--accept-all{
  background:var(--pw-primary-900);
  color:var(--pw-white);
  border:1px solid var(--pw-primary-900);
}
.pw-cookie-modal__btn--accept-all:hover{
  background:#1a4d46;
  border-color:#1a4d46;
  transform:translateY(-1px);
}

.pw-cookie-modal__btn--reject-all{
  background:var(--pw-white);
  color:var(--pw-ink);
  border:1px solid var(--pw-line);
}
.pw-cookie-modal__btn--reject-all:hover{
  background:#e7ecea;
  border-color:var(--pw-ink-50);
  transform:translateY(-1px);
}

@media (max-width:600px){
  .pw-cookie-modal__header{
    padding:var(--sp-4) var(--sp-5);
  }
  .pw-cookie-modal__body{
    padding:var(--sp-5) var(--sp-5);
  }
  .pw-cookie-modal__footer{
    padding:var(--sp-4) var(--sp-5);
    flex-direction:column;
    align-items:stretch;
  }
  .pw-cookie-modal__btn{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .pw-cookie-banner{
    animation: none !important;
    transition: none !important;
  }
  .pw-cookie-modal__stage{
    animation: none !important;
    transition: none !important;
  }
}