/* ==========================================================================
   Santé Pilates Studio
   Paleta muestreada de las fotos reales del estudio de Torredembarra.
   ========================================================================== */

:root{
  /* Greige claro y sereno, con la foto oscura solo en la portada. El rosa del
     logo aparece a cuentagotas: un rotulo, un subrayado, poco mas. La calma
     la pone el espacio, no el color. */
  --canvas:#F1E7D6;        /* miel: calido y luminoso, el suelo de la pagina */
  --canvas-deep:#E4D6BF;
  --panel:#FFFFFF;
  --panel-hi:#FFFFFF;
  --linen:#E9DCC7;

  --blush:#F2C4CE;
  --blush-soft:#FAF4EA;    /* el apartado alternante: crema, un tono por encima */
  --blush-deep:#E4A2B2;
  --rose-ink:#9C2D50;
  --rose-glow:#F7E3E7;

  --cocoa:#241C18;         /* el boton principal: casi negro */
  --cocoa-mid:#3D302A;
  --cocoa-wash:#E4D6BF;

  --sage:#5E7566;
  --sage-mid:#9BB4A3;
  --sage-soft:#E6EDE8;

  --ink:#241C18;
  --ink-soft:#584C45;
  --ink-faint:#645850;
  --on-cocoa:#FFFFFF;
  --on-sage:#FFFFFF;

  --rule:#DCCDB3;
  --rule-strong:#C2AC8D;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --navh:92px;
  --pad:clamp(1.15rem,4.2vw,3.25rem);
  --maxw:74rem;
  --gap:clamp(1rem,2.4vw,1.75rem);

  --shadow-s:0 1px 2px rgba(36,28,24,.05),0 6px 20px rgba(36,28,24,.06);
  --shadow-m:0 2px 6px rgba(36,28,24,.07),0 22px 54px rgba(36,28,24,.11);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- el entorno: una sola capa de fondo detrás de todo ---------- */

/* Burbujas. Susurro, no fiesta: hilos de luz que suben muy despacio y
   cosen las secciones entre si. Solo transform y opacity. */
.bub{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.34) 44%, rgba(255,211,224,.16) 72%, rgba(255,211,224,0) 100%);
  animation:rise linear infinite;
}
@keyframes rise{
  from{transform:translate3d(0,10vh,0) scale(.82);opacity:0}
  12%{opacity:.7}
  80%{opacity:.5}
  to{transform:translate3d(2vw,-108vh,0) scale(1.12);opacity:0}
}

.site{position:relative;z-index:1}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,5.6vw,4.15rem);line-height:1.03;letter-spacing:-.022em}
h2{font-size:clamp(1.85rem,3.9vw,3rem);line-height:1.09;letter-spacing:-.018em}
h3{font-size:clamp(1.28rem,2.3vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
h4{font-size:1.1rem;line-height:1.28;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.06rem,1.85vw,1.26rem);line-height:1.55;color:var(--ink-soft);max-width:56ch}
.body-w{max-width:62ch}
strong{font-weight:700}
em{font-style:italic}

.kicker{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose-ink);display:block;margin:0 0 .85rem;
}
.kicker.blush{color:var(--rose-ink)}

a{color:var(--cocoa-mid);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--cocoa)}
:focus-visible{outline:2.5px solid var(--cocoa);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--cocoa);color:var(--on-cocoa);padding:.7rem 1.1rem;border-radius:0 0 4px 0;
}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
/* Sin franja detras, la barra vive directamente sobre la foto: el logo claro
   pide sombra sobre los mundos luminosos, y los enlaces se invierten cuando el
   mundo es oscuro (Femme Forte). */
/* El logo original esta pensado para fondo oscuro: sobre los mundos claros se
   borraba. Van los dos y se cruzan segun el mundo, sin barra que los sostenga. */
.brand{position:relative}
/* Sin barra que lo sostenga, el logo se apoya en un halo propio: una nube suave
   que solo existe detras de la marca y se desvanece antes de tocar nada.
   No es un marco, es lo que permite que la foto llegue hasta el borde. */



/* el logo va sobre fondo liso: no necesita halo ninguno */
.brand img{filter:none}
.brand .logo-claro{
  position:absolute;left:0;top:0;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 1.5px rgba(14,3,8,.95)) drop-shadow(0 0 5px rgba(14,3,8,.85)) drop-shadow(0 2px 14px rgba(14,3,8,.6));
}
.brand .logo-tinta,.brand .logo-claro{transition:opacity .5s var(--ease)}


.nav-links{position:relative}
/* los enlaces llevan su propia nube, igual que la marca */


.nav-links a{text-shadow:0 1px 2px rgba(251,248,246,.9),0 3px 14px rgba(251,248,246,.7)}



/* en pantallas bajas el numero del capitulo choca con el titular */

/* la barra flota por encima: los anclajes tienen que dejarle sitio */
[id]{scroll-margin-top:calc(var(--navh) + .5rem)}
.in .arch-line path,.arch-line.drawn path{stroke-dashoffset:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;font-size:.88rem;font-weight:700;letter-spacing:.02em;
  padding:.78rem 1.45rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .32s var(--ease),color .32s var(--ease),
             border-color .32s var(--ease),transform .32s var(--ease),
             box-shadow .32s var(--ease);
}
.btn-primary{background:var(--cocoa);color:var(--on-cocoa);box-shadow:var(--shadow-s)}
.btn-primary:hover{background:var(--cocoa-mid);color:var(--on-cocoa);transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{background:var(--panel-hi);color:var(--ink);border-color:var(--blush);transform:translateY(-2px)}
.btn-quiet{background:var(--blush-soft);color:var(--ink);border-color:transparent}
.btn-quiet:hover{background:var(--blush);color:var(--ink);transform:translateY(-2px)}
.btn-sm{padding:.58rem 1.05rem;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

.textlink{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.93rem;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--rule-strong);padding-bottom:.12rem;
  transition:border-color .3s var(--ease),color .3s var(--ease),gap .3s var(--ease);
}
.textlink:hover{color:var(--sage);border-color:var(--sage);gap:.65rem}
.textlink .ar{transition:transform .3s var(--ease)}
.textlink:hover .ar{transform:translateX(2px)}

@media (pointer:coarse){
  .btn,.textlink{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .textlink{justify-content:flex-start}
}

/* ---------- navegación ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(244,201,213,.94);   /* la barra, en el rosa del logo */
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(150,70,95,.16);
}
.nav.stuck{background:rgba(244,201,213,.97);box-shadow:0 1px 0 rgba(90,40,55,.08),0 10px 30px rgba(90,40,55,.07)}
.nav-in{display:flex;align-items:center;gap:1.4rem;height:var(--navh);max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.brand{
  font-family:"Fraunces",Georgia,serif;font-size:1.32rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;font-weight:600;
  white-space:nowrap;
}
.brand span{color:var(--rose-ink)}
.nav-links{display:none;gap:1.5rem;margin-left:auto;align-items:baseline}
.nav-links a{
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:.78rem;font-weight:600;color:var(--ink);text-decoration:none;
  text-transform:uppercase;letter-spacing:.16em;
  transition:color .28s var(--ease);white-space:nowrap;
}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto}
.lang{
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;border:1px solid var(--rule);
  padding:.3rem .55rem;border-radius:2px;transition:border-color .28s var(--ease),color .28s var(--ease);
}
.lang:hover{color:var(--ink);border-color:var(--rule-strong)}
@media(min-width:960px){
  .nav-links{display:flex}
  .nav-cta{margin-left:0}
}

/* ==========================================================================
   HERO A PANTALLA COMPLETA
   El estudio ocupa toda la pantalla y la visitante avanza por dentro segun
   baja. El texto va encima, sobre un velo claro, porque el espacio es
   luminoso: tinta oscura sobre luz, no blanco sobre sombra.
   ========================================================================== */
.hero{position:relative;margin-top:calc(var(--navh) * -1)}


/* el metraje, a sangre */






/* velo base: siempre puesto, para que ningun fotograma quede crudo */
/* El velo trabaja abajo, que es donde vive el texto y donde la imagen ya es
   suelo claro. Arriba apenas toca nada: los arcos y la profundidad se ven
   enteros, que es el motivo de que la imagen ocupe toda la pantalla. */
.veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(240,236,233,.5) 0%,
      rgba(240,236,233,.14) 18%,
      rgba(240,236,233,.06) 36%,
      rgba(240,236,233,.34) 50%,
      rgba(240,236,233,.8) 68%,
      rgba(240,236,233,.94) 82%,
      rgba(240,236,233,1) 100%);
}

/* la capa de texto */
.hero-ui{
  position:relative;z-index:2;height:100%;
  display:grid;place-items:end center;
  padding:calc(var(--navh) + 1rem) var(--pad) clamp(4.2rem,11vh,7rem);
  text-align:center;
}

/* Velo local. El estudio es luminoso pero bajo los arcos hay sombra, y ahi la
   tinta se pierde. Este halo claro se abre solo detras de la frase activa y
   deja la imagen intacta en los bordes. */










/* palabras que se ensamblan, gobernadas por --k de cada banda */



/* la chapa de reseñas, flotando sobre el metraje */
.hero-chip{
  position:absolute;z-index:3;left:50%;bottom:clamp(1.1rem,3.4vh,2.2rem);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  background:rgba(250,247,245,.86);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(163,35,92,.16);border-radius:999px;
  padding:.5rem .95rem .5rem .6rem;
  box-shadow:0 2px 6px rgba(90,20,50,.1),0 16px 44px rgba(90,20,50,.16);
}
.hero-chip .score{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--cocoa);color:var(--on-cocoa);
  font-weight:700;font-size:.84rem;flex:none;
}
.hero-chip .stars{display:inline-flex;gap:.08rem;color:var(--rose-ink)}
.hero-chip .stars svg{width:12px;height:12px}
.hero-chip .txt{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
@media(max-width:520px){.hero-chip .txt{display:none}}

/* contador de carga del metraje */
.loadnum{
  position:absolute;z-index:3;right:clamp(1rem,3vw,2.2rem);
  bottom:clamp(1.1rem,3.4vh,2.2rem);
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  color:var(--ink-faint);opacity:.9;transition:opacity .6s var(--ease);
}


.hero-cue{
  position:absolute;z-index:3;left:clamp(1rem,3vw,2.2rem);
  bottom:clamp(1.1rem,3.4vh,2.2rem);
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:.55rem;
}
.hero-cue::after{
  content:"";width:26px;height:1px;background:var(--rule-strong);
  transform-origin:left;animation:cue 3.4s var(--ease-soft) -.8s infinite;
}
@keyframes cue{0%,100%{opacity:.3;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}
@media(max-width:720px){.hero-cue{display:none}}

/* ---------- secciones ---------- */
.sec{padding:clamp(3.4rem,8vw,6.5rem) 0;position:relative}
.sec-head{margin-bottom:clamp(1.8rem,3.6vw,2.8rem);max-width:52rem}
.sec-head h2{margin-bottom:.7rem}

/* entradas al hacer scroll */
.rise{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0s}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}
/* retirar los retardos cuando la entrada ha terminado, o los hovers van tarde */
.stagger.done>*:nth-child(n){transition-delay:0s!important}
@media(min-width:640px){.says{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.says{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){.routes{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.routes{grid-template-columns:repeat(4,1fr)}}
.route .num{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  color:var(--rose-ink);text-align:center;margin-bottom:.6rem;
}
.route .btn{align-self:center}

/* ---------- pilares del método ---------- */
.pillars{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:1.6rem}
@media(min-width:820px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.pillar figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--canvas-deep)}
.pillar img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.pillar:hover img{transform:scale(1.045)}
.pillar .txt{padding:1.3rem 1.3rem 1.5rem}
.pillar h3{margin-bottom:.4rem}
.pillar .role{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-bottom:.55rem;display:block;
}
.pillar p{font-size:.95rem;color:var(--ink-soft);margin:0}
@media(min-width:900px){.cross{grid-template-columns:1fr auto 1fr;gap:1.8rem}}
.cross.done .col-after li{opacity:1;transform:none}
.cross.done .col-after li::before{background:var(--sage)}
.cross.done .col-after li:nth-child(1){transition-delay:.05s}
.cross.done .col-after li:nth-child(2){transition-delay:.14s}
.cross.done .col-after li:nth-child(3){transition-delay:.23s}
.cross.done .col-after li:nth-child(4){transition-delay:.32s}
.cross.done .col-after li:nth-child(5){transition-delay:.41s}
.cross.done .col-after li:nth-child(6){transition-delay:.5s}
.cross.done .col-after li:nth-child(7){transition-delay:.59s}
.cross.done .hold{color:var(--sage)}
@media(min-width:900px){.trial{grid-template-columns:1.15fr .85fr;gap:2.6rem}}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.split.flip>figure{order:1}}

/* ---------- planes ---------- */
.plans{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:stretch}
@media(min-width:700px){.plans{grid-template-columns:1fr 1fr}}
@media(min-width:1150px){.plans{grid-template-columns:repeat(5,1fr)}}
.plan{
  display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--rule);border-radius:3px;
  padding:1.6rem 1.15rem 1.3rem;position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.plan .for{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-bottom:.5rem;
  min-height:2.4em;display:flex;align-items:center;justify-content:center;
}
.plan h3{font-size:1.02rem;text-align:center;line-height:1.22;margin-bottom:.7rem;font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.plan .why{font-size:.9rem;color:var(--ink-soft);text-align:center;margin-bottom:1rem;min-height:3.4em}
.plan .incl{list-style:none;padding:0;margin:0 0 1.1rem;border-top:1px solid var(--rule);flex:1}
.plan .incl li{font-size:.87rem;color:var(--ink-soft);padding:.45rem 0;border-bottom:1px solid var(--rule);line-height:1.35}
.plan .amount{text-align:center;margin-bottom:.3rem}
.plan .amount b{font-family:"Fraunces",serif;font-size:2.15rem;font-weight:400;letter-spacing:-.03em}
.plan .per{
  display:block;text-align:center;font-family:"DM Mono",monospace;font-size:.66rem;
  letter-spacing:.08em;color:var(--ink-faint);margin-bottom:1rem;
}
.plan .btn{width:100%}
.plan.featured{
  border-color:var(--sage-mid);border-width:1.5px;
  background:linear-gradient(180deg,var(--sage-soft) 0%,var(--panel) 34%);
  box-shadow:var(--shadow-m);
}
.plan.featured .tagline{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--cocoa);color:var(--on-cocoa);border-radius:2px;
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.28rem .8rem;white-space:nowrap;
}
.plans-note{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:1.15rem 1.3rem;
}
.plans-note p{margin:0;font-size:.96rem}
.trust-row{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.1rem;
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.trust-row span{display:inline-flex;align-items:center;gap:.4rem}
.trust-row svg{width:13px;height:13px;color:var(--sage);flex:none}

/* ---------- galería de comunidad ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.7rem}
@media(min-width:760px){.gal{grid-template-columns:repeat(4,1fr);gap:.75rem}}
.gal figure{margin:0;overflow:hidden;border-radius:3px;background:var(--canvas-deep);aspect-ratio:3/4}
.gal figure.tall{grid-row:span 2;aspect-ratio:3/4}
@media(min-width:760px){.gal figure.tall{aspect-ratio:3/8}}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}

.events{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:1.8rem}
@media(min-width:820px){.events{grid-template-columns:1fr 1fr}}
.event{
  display:flex;gap:1.1rem;background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:1.2rem;align-items:flex-start;
}
.event figure{margin:0;width:88px;flex:none;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--canvas-deep)}
.event img{width:100%;height:100%;object-fit:cover;display:block}
.event h4{margin-bottom:.25rem}
.event p{font-size:.9rem;color:var(--ink-soft);margin:0}
.event .when{
  font-family:"DM Mono",monospace;font-size:.65rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sage);display:block;margin-bottom:.3rem;
}
@media(min-width:820px){.person{grid-template-columns:.8fr 1.2fr}}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.steps{grid-template-columns:repeat(4,1fr)}}
@media(min-width:820px){.where{grid-template-columns:1fr 1fr}}
.addr{font-style:normal;font-size:1rem;line-height:1.65;color:var(--ink-soft);margin-bottom:1.2rem}
.addr b{color:var(--ink);font-weight:700}

/* ---------- cierre ---------- */
.finale{text-align:center;padding:clamp(3.6rem,9vw,7rem) 0}
.finale h2{margin-bottom:.9rem}
.finale .lede{margin-inline:auto;text-align:center}
.finale .btn-row{justify-content:center;margin-top:1.7rem}
.finale .sign-off{
  margin-top:2.4rem;font-family:"Fraunces",serif;font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--rose-ink);letter-spacing:-.01em;
}

/* ---------- pie ---------- */
.foot{background:rgba(244,201,213,.94);border-top:1px solid var(--rule);padding:clamp(2.4rem,5vw,3.6rem) 0 1.6rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1fr;gap:1.8rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot h4{font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;margin-bottom:.8rem}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.foot a{color:var(--ink-soft);text-decoration:none;font-size:.93rem;transition:color .28s var(--ease)}
.foot a:hover{color:var(--ink)}
.foot .brand{font-size:1.25rem;margin-bottom:.7rem;display:inline-block}
.foot-note{
  margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
}

/* ---------- barra fija de reserva ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:.55rem;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(240,236,233,.9);backdrop-filter:blur(16px);
  border-top:1px solid var(--rule);
  transform:translateY(110%);transition:transform .5s var(--ease);
}
.dock.up{transform:none}
@media(min-width:900px){.dock:not(.up){transform:translateY(calc(100% + 2.2rem))}}
.dock .btn{flex:1;padding-block:.75rem}
@media(min-width:900px){
  .dock{
    left:auto;right:1.4rem;bottom:1.4rem;border-radius:3px;border:1px solid var(--rule);
    padding:.45rem .5rem;box-shadow:var(--shadow-m);
  }
  .dock .btn{flex:none}
}
@media(min-width:900px){body{padding-bottom:0}}
body{padding-bottom:0}

/* whatsapp flotante en escritorio va dentro del dock, no duplicado */

/* ---------- accesibilidad y movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .rise,.stagger>*{opacity:1!important;transform:none!important}
  .arch-line path{stroke-dashoffset:0!important}
  .col-after li{opacity:1!important;transform:none!important}
  .col-after li::before{background:var(--sage)!important}
  .dock{transform:none!important}
  
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ==========================================================================
   EL RECORRIDO
   La pagina se lee como una historia por capitulos. El carril fijo dice por
   donde vas, y cada capitulo lleva su numero. Los arcos del carril son los
   mismos arcos de la marca, en pequeno.
   ========================================================================== */

.chapter{
  display:flex;align-items:baseline;gap:.7rem;margin:0 0 .9rem;
  font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);
}
.chapter b{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.5rem;letter-spacing:0;color:var(--rose-ink);line-height:1;
  text-transform:none;
}
.chapter span{position:relative;top:-.15rem}

/* el carril: solo en pantallas anchas, donde sobra sitio a los lados */



@media(min-width:880px){.care{grid-template-columns:.72fr 1.28fr}}

/* ---------- el argumento de la fisioterapeuta ---------- */
.claim{
  margin:clamp(1.8rem,4vw,3rem) 0 0;padding:clamp(1.4rem,3.2vw,2.2rem);
  background:var(--blush-soft);border:1px solid var(--blush);border-radius:3px;
  display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;
}
@media(min-width:820px){.claim{grid-template-columns:1.4fr .6fr;gap:1.8rem}}
.claim p{margin:0}
.claim .big{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.24;letter-spacing:-.012em;color:var(--ink);
}
.claim .small{font-size:.95rem;color:var(--ink-soft);margin-top:.6rem}
.claim .btn{justify-self:start}
@media(min-width:820px){.claim .btn{justify-self:end}}

/* ==========================================================================
   SANTÉ CAFÉ
   El vaso se sirve solo: primero la leche, despues el matcha por encima, en
   dos capas, igual que el de verdad. Dibujado a mano, sin video ni imagenes.
   ========================================================================== */

.cafe{
  display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3.4vw,3rem);
  align-items:center;margin-top:clamp(2rem,5vw,3.4rem);
  background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:0;overflow:hidden;
}
@media(min-width:900px){.cafe{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0}}
.cafe .cafe-txt{padding:clamp(1.6rem,4vw,3.2rem)}
.cafe h3{margin-bottom:.6rem;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.cafe p{color:var(--ink-soft);margin:0 0 1.2rem;max-width:42ch}
.pour .matcha{fill:#8CA86A}

/* estado quieto: el vaso lleno. La animacion solo corre cuando se ve. */
.pour .milk,.pour .matcha,.pour .stream{transform-box:fill-box;transform-origin:center bottom}

.cafe.playing .pour .milk{animation:milkUp 7s var(--ease-soft) -0.2s infinite}
.cafe.playing .pour .matcha{animation:matchaUp 7s var(--ease-soft) -0.2s infinite}
.cafe.playing .pour .stream{animation:streamRun 7s linear -0.2s infinite}

@keyframes milkUp{
  0%   {transform:translateY(64px)}
  22%  {transform:translateY(0)}
  88%  {transform:translateY(0)}
  100% {transform:translateY(64px)}
}
@keyframes matchaUp{
  0%,26%{transform:translateY(30px);opacity:0}
  30%  {opacity:1}
  46%  {transform:translateY(0);opacity:1}
  88%  {transform:translateY(0);opacity:1}
  100% {transform:translateY(30px);opacity:0}
}
@keyframes streamRun{
  0%,2%  {transform:scaleY(0);opacity:0}
  5%     {opacity:.95}
  8%     {transform:scaleY(1);opacity:.95}
  20%    {transform:scaleY(1);opacity:.95}
  24%    {transform:scaleY(1);opacity:0}
  26%,100%{transform:scaleY(0);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .cafe.playing .pour .milk,
  .cafe.playing .pour .matcha,
  .cafe.playing .pour .stream{animation:none!important}
  .pour .milk{transform:none!important}
  .pour .matcha{transform:none!important;opacity:1!important}
  .pour .stream{opacity:0!important}
}

/* ==========================================================================
   RESEÑAS
   Reales, de Google, colocadas cada una junto a la duda que responde.
   ========================================================================== */

.said{
  background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(1.3rem,3vw,2rem);position:relative;
}
.said::before{
  content:"";position:absolute;left:0;top:clamp(1.3rem,3vw,2rem);bottom:clamp(1.3rem,3vw,2rem);
  width:2px;background:var(--blush-deep);border-radius:2px;
}
.said blockquote{
  margin:0 0 1rem;font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.08rem,1.9vw,1.34rem);line-height:1.34;letter-spacing:-.008em;color:var(--ink);
}
.said blockquote::before{content:"“"}
.said blockquote::after{content:"”"}
.said .who{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem}
.said .name{font-weight:700;font-size:.92rem;color:var(--ink)}
.said .stars{display:inline-flex;gap:.1rem;color:var(--rose-ink)}
.said .stars svg{width:13px;height:13px}
.said .src{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
}
.said[lang="ca"] .src::after{content:" · en català"}

.saids{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:820px){.saids{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.saids.three{grid-template-columns:repeat(3,1fr)}}

/* una reseña suelta, junto a la seccion que responde */
.said.solo{max-width:44rem}
.said.tint{background:var(--blush-soft);border-color:var(--blush)}
.said.tint::before{background:var(--sage)}

/* ==========================================================================
   EL RECORRIDO SIGUE: LAS SALAS
   Al salir de la animacion la visitante no aterriza en un bloque de texto,
   sigue caminando por el estudio, sala por sala.
   ========================================================================== */

.rooms{padding:0}




/* la parada del zoom se separa del desplazamiento: uno lo manda la entrada,
   el otro el scroll, y asi no se pisan */










.in 
/* el matcha de verdad, servido en video */
.matcha{
  position:relative;margin:0;width:100%;overflow:hidden;
  background:var(--canvas-deep);min-height:min(62svh,520px);
}
.matcha video{
  width:100%;height:100%;position:absolute;inset:0;
  object-fit:cover;display:block;
}
.matcha::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(163,35,92,.14);
}
@media(max-width:899px){.matcha{min-height:min(52svh,400px)}}

/* ==========================================================================
   FONDO DE FOTOS
   El fondo deja de ser color plano. Cada seccion se apoya en una foto del
   estudio, con su velo, para que bajar sea seguir dentro del sitio.
   ========================================================================== */






/* variante para secciones con tarjetas encima, que necesitan mas calma */

/* variante de cierre, algo mas abierta: ahi la foto es el premio */


/* ---------- las cuatro especialidades de fisioterapia ----------
   Fichas sobrias, sin iconos ni adornos: aqui lo que importa es que se lea
   rapido si lo tuyo esta en la lista. */
.fisios{
  display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:2rem;
}
@media(min-width:700px){.fisios{grid-template-columns:repeat(2,1fr);gap:.7rem}}
.fisio{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(239,194,211,.5);
  border-radius:3px;
  padding:clamp(1.3rem,2.6vw,1.8rem);
}
.fisio .role{
  display:block;font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  color:var(--rose-ink);margin-bottom:.7rem;
}
.fisio h3{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.22rem,2.5vw,1.5rem);
  line-height:1.15;letter-spacing:-.015em;margin-bottom:.5rem;color:var(--ink);
}
.fisio p{color:var(--ink-soft);font-size:.97rem;margin:0}

.fisio-pie{
  margin-top:1.6rem;padding:clamp(1.3rem,2.6vw,1.8rem);
  background:var(--panel);
  border-radius:3px;
  border:1px solid rgba(239,194,211,.5);
}
.fisio-pie p{color:var(--ink-soft);margin-bottom:1.1rem}
.fisio-pie b{color:var(--ink);font-weight:600}
.fisio-pie .btn-row{margin:0}

/* ---------- la galeria de eventos ----------
   Un mosaico, no una fila de postales: el plano estrella manda, la panoramica
   de la clase entera respira a lo ancho, y el invierno cierra para que se vea
   que Sante tambien sale del estudio en enero. */
.gal-ev{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1.8rem;
}
.gal-ev figure{
  position:relative;margin:0;overflow:hidden;border-radius:2px;
  background:var(--canvas-deep);aspect-ratio:4/5;
}
.gal-ev img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease);
}
.gal-ev figure:hover img{transform:scale(1.045)}
.gal-ev .grande{grid-column:1/-1;aspect-ratio:4/3}
.gal-ev .ancha{grid-column:1/-1;aspect-ratio:16/9}
.gal-ev .invierno{grid-column:1/-1;aspect-ratio:16/9}
@media(min-width:820px){
  .gal-ev{grid-template-columns:repeat(3,1fr);gap:.6rem}
  /* el plano estrella ocupa dos columnas y dos filas: se estira hasta la altura
     de los dos retratos de al lado, asi la reja siempre cuadra */
  /* la panoramica manda a lo ancho; el resto, retratos del mismo alto, y
     asi las cinco fotos caben en dos filas en vez de tres */
  .gal-ev figure{aspect-ratio:4/5}
  .gal-ev .grande{grid-column:span 2;aspect-ratio:auto}
  .gal-ev .invierno{grid-column:span 1;aspect-ratio:4/5}
}


/* ==========================================================================
   EL CURSOR MUEVE EL MUNDO
   Las capas se desplazan unos pocos pixeles siguiendo el raton. Es lo que
   da la sensacion de profundidad sin cargar un motor 3D.
   ========================================================================== */






/* ==========================================================================
   EL VIAJE
   Siete escenas a pantalla completa. El scroll no baja por una pagina: te
   lleva de un sitio al siguiente. Cada escena entra, se sostiene y se va,
   y mientras esta puesta la camara avanza un poco hacia dentro.
   ========================================================================== */

/* ==========================================================================
   EL MUNDO
   Las escenas ya no viven dentro de un escenario pegajoso al principio de la
   pagina: son el telon fijo de TODA la web. El contenido pasa por delante y
   el mundo va cambiando debajo. Asi el viaje no se acaba nunca.
   ========================================================================== */






/* los capitulos: bloques de scroll con el texto de cada escena */




/* La puerta y el umbral necesitan mas recorrido: ahi no se pasa de largo,
   se entra, y el zoom necesita sitio para cruzar el arco. */
/* el primero lleva el titular grande y los botones: necesita algo mas de sitio */




/* El rotulo va arriba del bloque, donde el velo aun no protege, y es texto
   pequeno en rosa. Se apoya en un halo propio en vez de aclarar media foto. */







/* el contenido pasa por delante del mundo, sobre su propia bandeja de luz */

/* La bandeja no es un bloque rosa encima de la escena: es un cristal casi
   neutro que deja ver el mundo detras. Menos color, mas desenfoque. */


/* las tarjetas de dentro tambien bajan de tono */





/* el numeral del viaje, arriba a la izquierda */




/* la chapa de reseñas y la señal de bajar viven en la primera escena */




/* el logo de la marca sustituye al texto */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand img{height:66px;width:auto;display:block}
.foot .brand img{height:64px}
@media(max-width:520px){.brand img{height:50px}}

/* la foto del matcha, pequeña y dentro del texto, no compitiendo con el video */
.cafe-mini{
  margin:1.4rem 0 0;display:flex;align-items:center;gap:.9rem;
}
.cafe-mini img{
  width:74px;height:74px;object-fit:cover;border-radius:2px;display:block;flex:none;
  box-shadow:var(--shadow-s);
}
.cafe-mini figcaption{
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);
}






/* ==========================================================================
   EL COLOR CAMBIA AL BAJAR
   Cada apartado tiñe el mundo de su propio tono. La transicion es lenta,
   asi que se siente como cambiar de habitacion, no como un salto.
   ========================================================================== */
:root{--tint:#F9DCE6}


/* ==========================================================================
   EL CALENDARIO
   La semana real del estudio. Cada clase es un boton que abre WhatsApp con
   el dia y la hora ya escritos, para que reservar no cueste ni pensarlo.
   ========================================================================== */
.semana{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.6rem;
}
@media(min-width:720px){.semana{grid-template-columns:repeat(3,1fr);gap:.75rem}}
@media(min-width:1060px){.semana{grid-template-columns:repeat(5,1fr)}}

.dia{
  background:rgba(251,248,246,.9);border:1px solid var(--rule);
  border-radius:3px;padding:1rem .85rem 1.1rem;display:flex;flex-direction:column;
}
.dia h4{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rose-ink);font-weight:400;
  margin-bottom:.75rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule);
}
.dia ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.clase{
  display:flex;align-items:baseline;gap:.55rem;text-decoration:none;color:var(--ink);
  padding:.42rem .5rem;border-radius:2px;
  transition:background-color .28s var(--ease),transform .28s var(--ease);
}
.clase:hover{background:var(--blush-soft);color:var(--ink);transform:translateX(2px)}
.clase b{
  font-family:"DM Mono",monospace;font-size:.72rem;font-weight:400;
  color:var(--rose-ink);flex:none;
}
.clase span{font-size:.87rem;line-height:1.25}
.clase .lvl{
  display:block;font-family:"DM Mono",monospace;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.1rem;
}
.dia.cerrado{background:rgba(251,248,246,.55);justify-content:center;align-items:center;text-align:center}
.dia.cerrado p{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0;
}
.semana-pie{
  margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;
  align-items:center;justify-content:space-between;
}
.semana-pie p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ==========================================================================
   FEMME FORTE: METRAJE REAL A PANTALLA COMPLETA
   El reel es vertical y la pantalla es ancha, asi que recortarlo se comia
   medio encuadre. En vez de eso: una copia desenfocada rellena los lados y
   el video de verdad se ve entero en el centro. No se pierde nada.
   Y como el metraje lleva ropa negra, aqui el texto va en claro sobre
   sombra, al reves que en el resto del sitio.
   ========================================================================== */

/* el metraje vertical se recorta para llenar la pantalla entera: el encuadre
   sube al 30% porque ahi estan las caras y las pesas, no en el centro */




/* en este mundo el texto se lee en claro */






/* El jardín es metraje apaisado: no necesita relleno, cubre la pantalla tal cual */


/* y aqui el texto vuelve a ir oscuro sobre luz, como en el resto del sitio */


/* ==========================================================================
   PAGINAS LEGALES
   Fuera del recorrido: fondo liso, una columna, y todo el peso en que se lea.
   ========================================================================== */
body.legal{background:var(--canvas)}
.legal-cab{background:var(--canvas-deep)}
.legal-cab{
  border-bottom:1px solid var(--rule);
  background:var(--panel);
  position:relative;z-index:2;
}
.legal-cab .nav-in{justify-content:space-between}

.legal-cab .brand img{filter:none}
.volver{
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
}
.volver:hover{color:var(--ink)}
.volver::before{content:"←"}

.legal-main{max-width:46rem;margin:0 auto;padding:clamp(2.6rem,6vw,4.6rem) var(--pad) clamp(4rem,9vw,6rem)}
.legal-main h1{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(2rem,5vw,3.1rem);
  line-height:1.04;letter-spacing:-.028em;color:var(--ink);margin:.6rem 0 .9rem;
}
.legal-fecha{
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:2.4rem;
}
.legal-main h2{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.25rem,2.6vw,1.6rem);
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);
  margin:2.8rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--rule);
}
.legal-main h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal-main h3{
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1rem;
  color:var(--ink);margin:1.6rem 0 .45rem;
}
.legal-main p,.legal-main li{color:var(--ink-soft);font-size:.98rem;line-height:1.72}
.legal-main p{margin:0 0 1rem}
.legal-main ul,.legal-main ol{margin:0 0 1.2rem;padding-left:1.2rem}
.legal-main li{margin-bottom:.5rem}
.legal-main a{color:var(--cocoa-mid)}
.legal-main strong{color:var(--ink);font-weight:600}

.ficha{
  background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(1.1rem,2.4vw,1.6rem);margin-bottom:1.4rem;
}
.ficha dl{margin:0;display:grid;grid-template-columns:1fr;gap:.15rem}
@media(min-width:620px){.ficha dl{grid-template-columns:12rem 1fr;gap:.4rem 1.2rem}}
.ficha dt{
  font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:.2rem;
}
.ficha dd{margin:0 0 .7rem;color:var(--ink);font-size:.97rem}
@media(min-width:620px){.ficha dd{margin-bottom:0}}

/* lo que falta por rellenar: imposible que se cuele sin verlo */
.pendiente{
  background:#3A2E12;color:#F2D98A;border:1px dashed #8A6F2A;
  border-radius:2px;padding:.05em .4em;font-family:"DM Mono",monospace;
  font-size:.85em;letter-spacing:.02em;
}
.aviso-borrador{
  background:#2E2413;border:1px solid #5A4A24;border-radius:3px;
  padding:1rem 1.2rem;margin-bottom:2.2rem;
}
.aviso-borrador p{margin:0;color:#EBD79B;font-size:.9rem}

.indice{margin-bottom:2.6rem}
.indice ol{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
@media(max-width:560px){.indice ol{columns:1}}
.indice li{margin-bottom:.4rem;break-inside:avoid}
.indice a{
  font-size:.9rem;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;
}
.indice a:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}

.legal-pie{
  border-top:1px solid var(--rule);padding:1.6rem var(--pad) 2.4rem;
  text-align:center;
}
.legal-pie a{
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none;margin:0 .7rem;
  display:inline-block;line-height:2;
}
.legal-pie a:hover{color:var(--ink)}

/* la fila legal del pie */
.foot-legal{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  padding:1.4rem 0 1.1rem;margin-top:1.6rem;
  border-top:1px solid var(--rule);
}
.foot-legal a{
  font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none;
}
.foot-legal a:hover{color:var(--ink)}

/* ==========================================================================
   ESTRUCTURA NORMAL
   Se acabo el mundo fijo detras del texto. Cada apartado es un bloque con su
   fondo, y las fotos van limpias, sin velo encima: por eso se ven nitidas.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.sec{padding:clamp(2.4rem,5vw,3.9rem) 0;background:var(--canvas);position:relative}
/* los apartados se alternan blanco y rosa polvo, para que el rosa se note
   sin invadir; y Femme Forte se va a chocolate, que es donde pega la fuerza */
.sec:nth-of-type(even){background:var(--blush-soft)}
.sec.finale{background:var(--cocoa-wash)}

#femme-forte{background:var(--ink)}
#femme-forte .kicker{color:var(--blush)}
#femme-forte h2 em{color:var(--blush)}
#femme-forte h2{color:#F7F3EF}
#femme-forte h2 em{color:var(--blush)}
#femme-forte p{color:#CFC5BD}
#femme-forte .ff-cuando{color:#9A8D84}
#femme-forte .btn-primary{background:var(--blush);color:var(--ink);border-color:var(--blush)}
#femme-forte .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--ink)}
.sec-head{max-width:44rem;margin-bottom:clamp(1.3rem,2.8vw,2rem)}
.sub{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink-soft);max-width:34rem}

/* ---------- la portada ----------
   Una sola foto a sangre, oscurecida, y encima el nombre del estudio en
   mayusculas muy espaciadas. Todo centrado, todo quieto: la calma la pone
   el aire alrededor de las letras. */
.hero{
  position:relative;isolation:isolate;
  min-height:min(92svh,780px);
  display:grid;place-items:end center;
  padding:calc(var(--navh) + clamp(3rem,9vw,6rem)) var(--pad) clamp(2.4rem,6vw,3.8rem);
  text-align:center;background:var(--ink);
}
.hero-fondo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(24,17,14,.14) 0%,
    rgba(24,17,14,.1) 26%,
    rgba(24,17,14,.38) 46%,
    rgba(24,17,14,.58) 62%,
    rgba(24,17,14,.74) 80%,
    rgba(24,17,14,.84) 100%);
}
.hero-centro{max-width:44rem}

.marca-grande{margin:0 0 clamp(1.4rem,3.4vw,2.4rem);line-height:1}
.marca-grande span{
  display:block;font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(3rem,9.8vw,6.3rem);letter-spacing:-.028em;
  text-transform:uppercase;color:#FFFFFF;
}
.marca-grande b{
  display:block;margin-top:.9rem;font-family:"Hanken Grotesk",Arial,sans-serif;
  font-weight:700;font-size:clamp(.72rem,1.7vw,.92rem);letter-spacing:.3em;
  text-transform:uppercase;color:#FFFFFF;text-indent:.3em;
}

.hero h1{
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(1.1rem,2.5vw,1.5rem);letter-spacing:.16em;line-height:1.5;
  text-transform:uppercase;color:#FFFFFF;margin:0 0 1.2rem;text-wrap:balance;
}
.hero .btn-row{justify-content:center;margin:0}
.hero-chip{
  display:inline-flex;align-items:center;gap:.55rem;margin:0;flex-wrap:wrap;
  justify-content:center;
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:#EDE3DC;
}
.hero-chip .stars{display:inline-flex;gap:.1rem;color:var(--blush)}
.hero-chip .stars svg{width:13px;height:13px}

/* boton claro sobre la foto oscura */
.btn-claro{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.btn-claro:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF;transform:translateY(-2px)}

/* ---------- las cuatro salas ---------- */
.salas{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,2vw,1.4rem)}
@media(min-width:640px){.salas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.salas{grid-template-columns:repeat(4,1fr)}}
.sala{margin:0;background:var(--panel);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.sala img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
}
.sala figcaption{padding:1rem 1.1rem 1.2rem}
.sala b{
  display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.12rem;color:var(--ink);margin-bottom:.3rem;
}
.sala span{display:block;font-size:.93rem;color:var(--ink-soft);line-height:1.6}

/* ---------- Femme Forte ---------- */
.ff{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media(min-width:860px){.ff{grid-template-columns:.85fr 1fr}}
.ff-video{
  position:relative;border-radius:4px;overflow:hidden;
  background:var(--cocoa);aspect-ratio:3/4;
}
.ff-video video{width:100%;height:100%;object-fit:cover;display:block}
.ff-txt h2{margin:.5rem 0 1rem}
.ff-txt p{color:var(--ink-soft);margin-bottom:1rem}
.ff-cuando{
  font-family:"DM Mono",monospace;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin:1rem 0 0;
}

/* ---------- botones grandes en la portada ---------- */
.btn-lg{padding:.95rem 1.6rem;font-size:1rem}

/* ---------- el Método, en versión corta ----------
   Sus tres pilares ya tienen apartado propio mas abajo (fisioterapia, las
   salas, Femme Forte), asi que aqui van sin foto: es el resumen, no el
   desarrollo. Se ahorran cerca de mil pixeles de scroll. */
#metodo .pillar figure{display:none}
#metodo .pillar{
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(1.2rem,2.4vw,1.6rem);
}
#metodo .pillar .txt{padding:0}
#metodo .pillar h3{margin-bottom:.4rem}
#metodo .pillar p{font-size:.95rem;color:var(--ink-soft);margin:0}
#metodo .pillar .role{
  display:block;font-family:"DM Mono",monospace;font-size:.65rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);margin-bottom:.55rem;
}

/* ---------- el vídeo de la comunidad ---------- */
.com-video{
  position:relative;margin:0 0 clamp(.9rem,2vw,1.4rem);
  border-radius:4px;overflow:hidden;background:var(--canvas-deep);
}
.com-video video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.com-video figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.4rem 1.1rem .9rem;
  background:linear-gradient(to top, rgba(20,10,7,.78) 0%, rgba(20,10,7,0) 100%);
  font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#F7EFEA;
}

/* ---------- banda de foto a sangre ----------
   Un respiro entre apartados: la foto sola, sin una palabra encima. Por eso
   no lleva velo ni halo: no hay nada que proteger. */
.banda{position:relative;overflow:hidden;background:var(--canvas-deep)}
.banda img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/6;object-fit:cover;object-position:50% 46%;
}
@media(max-width:700px){.banda img{aspect-ratio:16/9}}

/* ---------- tira editorial ----------
   Tres retratos verticales, sin marco ni pie: solo las fotos, respirando.
   Van dentro del Método, que se habia quedado en puro texto. */
.tira{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1.4vw,.9rem);
  margin:0 0 clamp(1.6rem,3.4vw,2.4rem);
}
.tira figure{margin:0;overflow:hidden;border-radius:3px;background:var(--canvas-deep)}
.tira img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease);
}
.tira figure:hover img{transform:scale(1.04)}
@media(max-width:560px){
  .tira{grid-template-columns:repeat(3,1fr);gap:.35rem}
  .tira img{aspect-ratio:3/4}
}

/* ---------- la tira bajo la portada ----------
   Lo que antes iba encima de la foto y obligaba a oscurecerla: la frase de
   presentacion y la chapa de Google. Aqui abajo se lee sin tapar nada. */
.hero-pie{background:var(--canvas);border-bottom:1px solid var(--rule);padding:clamp(1.2rem,2.6vw,1.8rem) 0}
.hero-pie .wrap{display:grid;gap:.7rem;justify-items:center;text-align:center}
.hero-sub{margin:0;max-width:38rem;color:var(--ink-soft);font-size:1rem;line-height:1.65}
.hero-pie .hero-chip{
  display:inline-flex;align-items:center;gap:.55rem;margin:0;flex-wrap:wrap;justify-content:center;
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);
}
.hero-pie .hero-chip .stars{display:inline-flex;gap:.1rem;color:var(--rose-ink)}
.hero-pie .hero-chip .stars svg{width:13px;height:13px}

/* ---------- el cierre, sobre foto ----------
   Como la portada: la foto a sangre y el texto encima en claro. Cierra la
   pagina con la misma imagen con la que se abre. */
#empezar{position:relative;isolation:isolate;background:var(--ink);overflow:hidden}
.cierre-fondo{position:absolute;inset:0;z-index:-2}
.cierre-fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
#empezar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(22,15,12,.82) 0%,
    rgba(22,15,12,.74) 40%,
    rgba(22,15,12,.78) 70%,
    rgba(22,15,12,.88) 100%);
}
#empezar h2,#empezar .big{color:#FCF6F1}
#empezar h2 em{color:var(--blush)}
#empezar p,#empezar li{color:#DFD2C9}
#empezar .kicker,#empezar .chapter b{color:var(--blush)}
#empezar .chapter span{color:#C0B0A5}
#empezar .sign-off{color:var(--blush)}
#empezar .said{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
}
#empezar .said p,#empezar .said blockquote{color:#F0E7E0}
#empezar .said .name{color:#FCF6F1}
#empezar .said .src{color:#BFAEA3}
#empezar .said .stars{color:var(--blush)}
#empezar .btn-ghost{color:#FCF6F1;border-color:rgba(255,255,255,.5)}
#empezar .btn-ghost:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
#empezar .btn-primary{background:var(--blush);color:var(--ink);border-color:var(--blush)}
#empezar .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--ink)}
/* nada dentro del cierre puede quedarse con el color oscuro heredado */
#empezar b,#empezar strong,#empezar dt,#empezar dd{color:#FCF6F1}
#empezar a:not(.btn){color:#F6E2E8;text-decoration-color:rgba(246,226,232,.5)}
#empezar a:not(.btn):hover{color:#FFFFFF}
#empezar .said{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
#empezar .said .src{color:#EDE2DA}
#empezar .addr,#empezar .addr *{color:#E6DAD1}

/* ---------- la entrada ----------
   Al abrir, la foto viene un punto acercada y se asienta despacio: la
   sensacion es de cruzar la puerta y quedarte de pie dentro. El texto llega
   detras, escalonado. La escala vive en la imagen y el desplazamiento en su
   contenedor, asi no se pisan cuando el scroll mueve el fondo. */
@keyframes entrar-foto{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes entrar-texto{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-fondo img{
  transform:scale(1.16);
  animation:entrar-foto 2.6s cubic-bezier(.16,.72,.24,1) .05s forwards;
  will-change:transform;
}
.hero-centro > .marca-grande{animation:entrar-texto .9s var(--ease) .5s both}
.hero-centro > h1{animation:entrar-texto .9s var(--ease) .72s both}
.hero-centro > .btn-row{animation:entrar-texto .9s var(--ease) .92s both}

@media (prefers-reduced-motion:reduce){
  .hero-fondo img{transform:none;animation:none}
  .hero-centro > *{animation:none}
}

/* ---------- aviso de cookies ----------
   Abajo, discreto, y con las dos opciones igual de a mano: aceptar y rechazar
   son el mismo tamaño y el mismo peso. Lo exige la AEPD y ademas es lo justo. */
.cookies{
  position:fixed;left:var(--pad);right:var(--pad);bottom:var(--pad);z-index:60;
  max-width:34rem;margin-inline:auto;
  background:var(--panel);border:1px solid var(--rule-strong);border-radius:4px;
  box-shadow:var(--shadow-m);
  padding:clamp(1rem,2.2vw,1.35rem);
  display:grid;gap:.9rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.cookies.visible{opacity:1;transform:none}
.cookies p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.cookies a{color:var(--cocoa-mid)}
.cookies-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cookies-btns .btn{flex:1 1 auto;min-width:8rem;justify-content:center}
@media(min-width:620px){
  .cookies{grid-template-columns:1fr auto;align-items:center;gap:1.2rem;max-width:46rem}
  .cookies-btns{flex-wrap:nowrap}
}
/* con el dock abajo en el móvil, el aviso se sube para no taparlo */
@media(max-width:899px){.cookies{bottom:calc(var(--pad) + 64px)}}