/* Fusion & Pilates — propuesta «&» · paleta de sus posts de Instagram: blanco de estudio, piedra, espresso y arcilla */
@font-face{font-family:"Bodoni Moda";src:url("../fonts/display.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("../fonts/text.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  /* Colores medidos en ig/*.jpg (ver README). Contrastes WCAG calculados:
     arcilla #8a5f49 sobre blanco 5.5:1 y sobre papel 5.1:1 · espresso sobre piedra 6.8:1 · arcilla clara sobre espresso 7.0:1 */
  --paper:#f5f5f4; --mist:#ebeae8; --stone:#a09f9a; --stone-l:#dcdbd8;
  --ink:#1b1612; --espresso:#1b1612; --mute:#5c544e; --line:rgba(27,22,18,.16);
  --accent:#8a5f49; --accent-d:#6f4a38; --accent-l:#c09a84; --white:#fff;
  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --text:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --head:4.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,dl,dd,ol,ul,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:2px}
.skip:focus{top:1rem}
[tabindex="-1"]:focus{outline:0}
.wrap{width:min(100% - 2*var(--gut),88rem);margin-inline:auto}
::selection{background:var(--accent);color:#fff}

/* ---------- tipografía ---------- */
.eyebrow{font:600 .72rem/1.5 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.eyebrow--ink{color:var(--ink)}
.eyebrow--white{color:rgba(255,255,255,.86)}
.h-xl{font:500 clamp(2.5rem,5.4vw,6rem)/.98 var(--display);letter-spacing:-.025em;font-variation-settings:"opsz" 96;margin:1.1rem 0 1.6rem}
.h-xl em{font-style:italic;color:var(--accent)}
.h-mega{font:500 clamp(2.7rem,5.6vw,6.6rem)/.96 var(--display);letter-spacing:-.03em;font-variation-settings:"opsz" 96;margin:1.2rem 0 2.4rem}
.amp-i{color:var(--accent);padding-inline:.12em;font-weight:400}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.62;color:#2e2722;max-width:34rem}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:1rem 1.5rem;border-radius:2px;font:600 .8rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),border-color .35s}
.btn span{transition:transform .35s var(--ease)}
.btn:hover span{transform:translateX(5px)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-d)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--accent)}
.btn--line{border:1px solid var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--lg{padding:1.25rem 1.9rem;font-size:.86rem}


/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:80;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);pointer-events:none;display:none;place-items:center;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s,background .3s;will-change:transform}
.cursor.is-on-accent{background:var(--ink)}
.cursor__label{font:400 0rem/1 var(--display);color:#fff;transition:font-size .3s var(--ease)}
.cursor.is-big{width:76px;height:76px;margin:-38px 0 0 -38px}
.cursor.is-big .cursor__label{font-size:2.6rem}
@media (hover:hover) and (pointer:fine){.has-cursor .cursor{display:grid}}

/* ---------- cabecera ---------- */
/* transparente sobre la portada; sólida (.is-solid, scene.js) en cuanto se sale de ella */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);border-bottom:1px solid transparent;transition:transform .6s var(--ease-io),background .5s,border-color .5s}
.site-header.is-solid{background:rgba(245,245,244,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.site-header.is-hidden{transform:translateY(-101%)}
.brand{display:inline-flex;align-items:baseline;gap:.35rem;font:500 1.35rem/1 var(--display);letter-spacing:-.01em}
.brand__amp{color:var(--accent);font-weight:400;font-size:1.5rem}
.main-nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2.2rem)}
.main-nav a{font:600 .74rem/1 var(--text);letter-spacing:.18em;text-transform:uppercase;position:relative;padding-block:.5rem}
.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.main-nav a:hover::after{transform:scaleX(1)}
.main-nav__cta{background:var(--accent);color:#fff;padding:.8rem 1.1rem!important;border-radius:2px}
.main-nav__cta::after{display:none}
.menu-btn{display:none;align-items:center;gap:.8rem;font:600 .74rem/1 var(--text);letter-spacing:.18em;text-transform:uppercase}
.menu-btn__bars{width:26px;height:9px;position:relative}
.menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.menu-btn__bars::before{top:0}.menu-btn__bars::after{bottom:0}
body.menu-open .menu-btn__bars::before{transform:translateY(3.6px) rotate(45deg)}
body.menu-open .menu-btn__bars::after{transform:translateY(-3.6px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;background:var(--espresso);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--head) + 2rem) var(--gut) 2rem;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);overflow:hidden}
.menu[hidden]{display:flex;visibility:hidden}
body.menu-open .menu{clip-path:inset(0);visibility:visible}
body.menu-open .site-header{background:transparent;border-bottom-color:transparent;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
body.menu-open .brand__amp{color:var(--accent-l)}
.menu__amp{position:absolute;right:-8vw;bottom:-14vw;font:400 70vw/1 var(--display);color:var(--accent);opacity:.35;pointer-events:none}
.menu nav{display:grid;gap:.4rem;position:relative}
.menu nav a{font:500 clamp(2.8rem,13vw,6rem)/1.05 var(--display);letter-spacing:-.02em;display:flex;align-items:baseline;gap:1rem}
.menu nav a span{font:600 .72rem/1 var(--text);letter-spacing:.2em;opacity:.75}
.menu__foot{margin-top:2.5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* ---------- 1 · PORTADA «Las manos» ----------
   La foto manda: el nombre está «pintado» en la pared y la barra de madera, Daniela y su cabeza (en móvil) quedan
   delante (img/manos*-front.webp, tools/cutout.py). Al bajar: lámina enmarcada → persiana → manifiesto (manos.js). */
.hand{position:relative;height:420vh;background:var(--paper)}
.hand__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}

/* lámina: mismo encuadre «cover» para la foto, el nombre y el recorte (unidades cqw = ancho de la lámina) */
.plate{
  --ar:1.7943;
  position:absolute;left:50%;top:50%;
  width:max(100%, calc(100svh * var(--ar)));aspect-ratio:var(--ar);
  container-type:inline-size;
  transform:translate(-50%,-50%) translateY(var(--py,0px)) scale(var(--ps,1));
  transform-origin:50% 0;            /* escritorio: se encaja en el marco anclada arriba (manos.js) */
}
.plate__photo,.plate__front{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate picture{display:contents}
.plate__front{pointer-events:none}

.hand__clip{position:absolute;inset:0;will-change:clip-path;animation:handIn 1.6s var(--ease) both}
@keyframes handIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

/* el nombre en la pared. --mx/--my llevan el borde visible de la ventana a coordenadas de la lámina,
   para que la «F» nunca quede cortada sea cual sea la proporción de la pantalla */
.plate{
  --fs:11cqw;                                                    /* cuerpo del nombre */
  --mx:calc((100cqw - 100vw) / 2 + var(--gut));
  --my:calc((100cqw / var(--ar) - 100svh) / 2 + 2.1cqw);         /* la barra de madera cruza la parte alta de «Fusion» */
  --lead:calc(var(--fs) * .9);
}
.mast{position:absolute;inset:0;margin:0;font-weight:500;pointer-events:none}
.mast__w{position:absolute;left:var(--mx);font:500 var(--fs)/.86 var(--display);letter-spacing:-.03em;font-variation-settings:"opsz" 96;color:var(--ink);white-space:nowrap;animation:handWord 1.4s var(--ease) both}
.mast__w--1{top:var(--my);animation-delay:.25s}
.mast__w--2{top:calc(var(--my) + var(--lead));animation-delay:.4s}
@keyframes handWord{from{clip-path:inset(0 0 100% 0);transform:translateY(.25em)}to{clip-path:inset(0 0 -10% 0);transform:none}}
/* velo de papel tras el final de «Pilates»: la planta oscura queda detrás y el texto pasa de ~2:1 a >7:1 */
.mast__haze{position:absolute;left:calc(var(--mx) + var(--fs) * 1.45);top:calc(var(--my) + var(--lead) - var(--fs) * .05);width:calc(var(--fs) * 1.9);height:calc(var(--fs) * 1.15);background:radial-gradient(closest-side,rgba(245,245,244,.78) 55%,rgba(245,245,244,0));pointer-events:none;animation:handAmp 1.4s var(--ease) .5s both}
/* la & va delante de todo: pequeña, en cursiva, en arcilla, al final de «Fusion» */
.mast__amp{position:absolute;left:calc(var(--mx) + var(--fs) * 2.86);top:calc(var(--my) + var(--fs) * .1);font:400 calc(var(--fs) * .62)/1 var(--display);color:var(--accent);pointer-events:none;animation:handAmp 1.2s var(--ease) .75s both}
@keyframes handAmp{from{opacity:0;transform:translateY(.3em) rotate(-8deg)}to{opacity:1;transform:none}}

/* en reposo, la marca de la cabecera sobra: el nombre grande ya está en la pared */
@media (min-width:701px){
  .site-header:not(.is-solid) .brand{opacity:0;transition:opacity .4s}
  .site-header:not(.is-solid) .brand:focus-visible{opacity:1}
}

/* pie de figura que aparece cuando la foto se enmarca */
.hand__fig{position:absolute;left:var(--gut);top:var(--fig-top,90%);font:600 .68rem/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);opacity:var(--fig,0)}
.hand__fig b{color:var(--accent);margin-right:.8rem}

/* tarjeta: precisión */
/* arriba a la derecha, sobre la pared libre: no tapa manos ni cuerpo */
.hand__card{position:absolute;right:var(--gut);top:calc(var(--head) + 6.2rem);width:min(19.5rem,23vw);opacity:var(--card,1);transform:translateY(calc((1 - var(--card,1)) * -16px));animation:handCard 1.3s var(--ease) .9s both}
@keyframes handCard{from{opacity:0;transform:translateY(24px)}}
.hand__card .eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--accent)}
.hand__rule{width:2.2rem;height:1px;background:currentColor}
.hand__go{white-space:nowrap;padding-inline:1.1rem;font-size:.72rem;letter-spacing:.1em}
.hand__copy{font:500 clamp(1.25rem,1.6vw,1.7rem)/1.2 var(--display);letter-spacing:-.01em;margin:.8rem 0 1.4rem}
.hand__copy em{font-style:italic;color:var(--accent)}
.hand__meta{position:absolute;right:var(--gut);top:calc(var(--head) + 1.2rem);text-align:right;font:600 .7rem/1.6 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);opacity:var(--card,1)}

/* ---------- manifiesto (detrás de la cortina) ---------- */
.hand__mf{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,6vw,6rem);padding:calc(var(--head) + 1rem) var(--gut) 2rem;opacity:var(--man,0);transform:translateY(calc((1 - var(--man,0)) * 40px))}
.hand__mf .mf__text{margin:1.2rem 0 1.8rem;max-width:17em}
.hand__mf .eyebrow{color:var(--accent)}
.hand__loop{position:relative;width:clamp(12rem,22vw,22rem);aspect-ratio:720/860;overflow:hidden;border-radius:2px;background:var(--mist)}
.hand__loop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hand__loop figcaption{position:absolute;left:.8rem;bottom:.8rem;background:var(--paper);padding:.45rem .7rem;font:600 .64rem/1 var(--text);letter-spacing:.18em;text-transform:uppercase}


/* manifiesto: palabras que se encienden (scene.js) */
.mf__text{font:500 clamp(1.75rem,4.2vw,4.6rem)/1.1 var(--display);letter-spacing:-.02em;font-variation-settings:"opsz" 96}
.mf__text .w{opacity:.16;transition:opacity .3s linear}
.mf__text .w.on{opacity:1}
.mf__text .w--key{font-style:italic;color:var(--accent)}
.mf__sign{font:600 .72rem/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ---------- 2 · PARES ---------- */
.pairs{position:relative;height:620vh;background:var(--paper)}
.pairs__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:calc(var(--head) + 1.6rem) var(--gut) 2rem;display:flex;flex-direction:column}
.pairs__lede{font:500 clamp(1.3rem,2.2vw,2.2rem)/1.2 var(--display);letter-spacing:-.01em;max-width:24em;margin-top:.7rem}
.pairs__lede em{color:var(--accent)}
.pairs__stage{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:var(--gut);min-height:0}
.pair{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s;align-self:center}
.pair.is-on{opacity:1;visibility:visible;transition:opacity .7s var(--ease) .15s,visibility 0s}
.pair__t{display:grid;font:500 clamp(2.7rem,8.4vw,10.4rem)/.92 var(--display);letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.pair__a,.pair__b,.pair__amp{display:block;overflow:hidden;padding-bottom:.06em}
.pair__a>*,.pair__b>*{display:block}
.pair__amp{color:var(--accent);font-weight:400;font-size:.62em;line-height:.9;padding-left:.9em}
.pair__b{padding-left:.5em}
.pair__a,.pair__b,.pair__amp{transform:translateY(40px);opacity:0;transition:transform .9s var(--ease),opacity .6s}
.pair.is-on .pair__a,.pair.is-on .pair__b,.pair.is-on .pair__amp{transform:none;opacity:1}
.pair.is-on .pair__amp{transition-delay:.12s}
.pair.is-on .pair__b{transition-delay:.24s}
.pair__d{margin-top:2rem;max-width:30rem;color:#2e2722;font-size:1.05rem;opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
.pair.is-on .pair__d{opacity:1;transform:none;transition-delay:.45s}
.pairs__photo{grid-area:1/2;position:relative;aspect-ratio:4/5;width:100%;max-height:100%;justify-self:end;max-width:min(30vw,28rem);overflow:hidden;border-radius:2px;background:var(--mist)}
.pairs__photo img,.pairs__photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-io),transform 1.4s var(--ease);transform:scale(1.12)}
.pairs__photo img.is-on,.pairs__photo video.is-on{clip-path:inset(0);transform:none}
.pairs__count{position:absolute;left:var(--gut);bottom:1.6rem;font:500 1.1rem/1 var(--display);color:var(--mute)}
.pairs__count b{color:var(--ink);font-weight:500}
.pairs__dots{position:absolute;right:var(--gut);bottom:1.8rem;display:flex;gap:.5rem}
.pairs__dots li{width:1.6rem;height:2px;background:var(--line);transition:background .4s,width .4s var(--ease)}
.pairs__dots li.is-on{background:var(--accent);width:3rem}
.pairs__dots li{position:relative}
.pairs__dots button{position:absolute;inset:-12px -3px}

/* ---------- 3 · ESTUDIO ---------- */
.studio{padding:clamp(5rem,12vw,11rem) 0;background:var(--paper)}
.studio__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,8rem);align-items:center}
.studio__photo,.thera__photo{position:relative;overflow:hidden;border-radius:2px;background:var(--mist)}
.studio__photo{aspect-ratio:9/14}
.studio__photo img,.thera__photo img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.studio__photo video,.thera__photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio__photo figcaption,.thera__photo figcaption{position:absolute;left:1rem;bottom:1rem;background:var(--paper);padding:.5rem .8rem;font:600 .68rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;border-radius:2px}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:2.6rem 0 2rem;border-top:1px solid var(--ink)}
.facts div{padding:1.4rem 1rem 1.4rem 0;border-bottom:1px solid var(--line)}
.facts div:nth-child(odd){border-right:1px solid var(--line);padding-right:1.4rem}
.facts div:nth-child(even){padding-left:1.4rem}
.facts dt{font:500 clamp(2.3rem,4vw,3.8rem)/1 var(--display);letter-spacing:-.03em;color:var(--accent)}
.facts dt small{font-size:.5em;margin-left:.1em}
.facts dd{margin-top:.5rem;font-size:.92rem;color:var(--mute);max-width:14rem}
.lines li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1rem}
.lines span{font:600 .7rem/1.7 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* ---------- 4 · REFORMER ---------- */
.rig{padding:clamp(5rem,11vw,10rem) 0;background:var(--stone-l)}
.rig__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,7rem);align-items:center}
.goal{display:grid;margin-top:2.2rem;border-top:1px solid var(--ink)}
.goal button{display:flex;align-items:baseline;gap:1.2rem;text-align:left;padding:1.05rem 0;border-bottom:1px solid var(--line);font:500 clamp(1.7rem,3vw,2.7rem)/1 var(--display);letter-spacing:-.02em;color:#6b625b;transition:color .35s,padding .45s var(--ease)}
.goal button span{font:600 .68rem/1 var(--text);letter-spacing:.2em}
.goal button:hover{color:var(--ink)}
.goal button[aria-selected="true"]{color:var(--accent);padding-left:1.2rem}
.goal__copy{margin-top:1.4rem;min-height:5.2em;max-width:28rem;color:#2e2722}
.rig__card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:clamp(1rem,2.2vw,1.8rem)}
.rig__cap{display:flex;justify-content:space-between;gap:1rem;font:600 .68rem/1.4 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-bottom:1rem;border-bottom:1px solid var(--line)}
.rig__cap b{color:var(--ink)}
.rig__svg{width:100%;height:auto;margin-block:.6rem}
.rig__read{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.rig__read div{padding:1rem 1rem 0 0}
.rig__read dt{font:600 .66rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rig__read dd{margin-top:.5rem;font:500 1.5rem/1.1 var(--display)}
.rig__note{margin-top:1rem;font-size:.82rem;color:var(--mute)}

/* ---------- 5 · TERAPÉUTICO ---------- */
.thera{padding:clamp(5rem,12vw,11rem) 0;background:var(--paper)}
.thera__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,7vw,8rem);align-items:center}
.thera__photo{aspect-ratio:3/4.4;order:2}
.steps{margin:2.4rem 0 2.4rem;border-top:1px solid var(--ink)}
.steps li{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.steps b{font:500 2.2rem/1 var(--display);color:var(--accent);letter-spacing:-.03em}
.steps h3{font:500 1.5rem/1.15 var(--display);letter-spacing:-.01em}
.steps p{color:var(--mute);margin-top:.25rem;font-size:.98rem}

/* ---------- 6 · REFERENCIAS ---------- */
.quotes{position:relative;background:var(--stone);color:var(--ink);padding:clamp(5rem,11vw,10rem) 0;overflow:hidden}
.quotes__amp{position:absolute;right:-6vw;top:50%;transform:translateY(-52%);font:400 clamp(28rem,74vw,70rem)/1 var(--display);color:#fff;opacity:.22;pointer-events:none;font-variation-settings:"opsz" 96}
.quotes__wrap{position:relative}
.quotes__list{display:grid;margin:2.2rem 0 2.6rem;min-height:clamp(20rem,36vw,28rem)}
.quote{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .6s;align-self:start}
.quote.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--ease) .2s,transform .9s var(--ease) .2s,visibility 0s}
.quote p{font:500 clamp(1.7rem,3.7vw,4.1rem)/1.12 var(--display);letter-spacing:-.02em;max-width:20em;font-variation-settings:"opsz" 96}
.quote footer{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font:600 .74rem/1.6 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.quote footer b{color:var(--ink)}
.quotes__ctrl{display:flex;align-items:center;gap:1.4rem;font:500 1.1rem/1 var(--display)}
.quotes__ctrl button{width:3.4rem;height:3.4rem;border:1px solid var(--ink);border-radius:50%;font:400 1.2rem/1 var(--text);transition:background .3s,color .3s}
.quotes__ctrl button:hover{background:var(--ink);color:#fff}
.quotes__note{margin-top:2.4rem;font-size:.8rem;color:var(--ink);max-width:36rem}

/* ---------- 7 · RESERVA ---------- */
.book{padding:clamp(5rem,12vw,11rem) 0;background:var(--paper)}
.book__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.app{padding:1.6rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.app__t{font:500 clamp(1.5rem,2.2vw,2rem)/1.2 var(--display);margin-top:.8rem}
.app__t b{color:var(--accent);font-weight:500}
.app__d{color:var(--mute);margin-top:.5rem}
.form{margin-top:2.4rem;display:grid;gap:1.1rem}
.form__t{font:500 1.9rem/1 var(--display);letter-spacing:-.02em}
.form label{display:grid;gap:.35rem}
.form label span{font:600 .68rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.form input,.form textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:.55rem 0;resize:vertical;transition:border-color .3s}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.form .btn{justify-self:start;margin-top:.6rem}
.form__note{font-size:.78rem;color:var(--mute)}

/* ---------- pie ---------- */
.foot{position:relative;background:var(--espresso);color:#fff;padding:clamp(4rem,8vw,7rem) 0 1.6rem;overflow:hidden}
.foot__amp{position:absolute;right:-4vw;bottom:-22vw;font:400 52vw/1 var(--display);color:var(--accent);opacity:.75;pointer-events:none;font-variation-settings:"opsz" 96}
.foot__grid{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot__brand{font:500 clamp(2rem,4vw,3.4rem)/1 var(--display);letter-spacing:-.02em;margin-bottom:1rem}
.foot__h{font:600 .7rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:.8rem}
.foot a{border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s}
.foot a:hover{border-color:#fff}
/* dato pendiente de confirmar con el estudio (la dirección) */
.tbc{display:inline-block;margin-left:.5rem;padding:.25rem .45rem;font:600 .6rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:2px;vertical-align:middle}
.foot .tbc{background:var(--accent-l);color:var(--ink)}
.foot small{display:block;margin-top:.4rem;font-size:.78rem;color:rgba(255,255,255,.7)}
.foot__legal{position:relative;margin-top:clamp(4rem,10vw,9rem);font-size:.78rem;color:rgba(255,255,255,.7)}

/* ---------- revelados ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
/* fotos: cortina de papel que se recoge (sin clip-path en la figura: el observer necesita su área) */
.js figure.reveal:not(.rig__card){opacity:1;transform:none}
.js figure.reveal:not(.rig__card)::after{content:"";position:absolute;inset:-1px;z-index:2;background:var(--paper);transform-origin:50% 0;transition:transform 1.3s var(--ease-io);transition-delay:var(--d,0s)}
.js figure.reveal:not(.rig__card).in::after{transform:scaleY(0)}
.js figure.reveal:not(.rig__card) img,.js figure.reveal:not(.rig__card) video{scale:1.14;transition:scale 1.8s var(--ease);transition-delay:var(--d,0s)}
.js figure.reveal:not(.rig__card).in img,.js figure.reveal:not(.rig__card).in video{scale:1}

/* ---------- responsive ---------- */
/* con 6 secciones + reserva, la navegación pasa al botón de menú por debajo de 1100 px (core.js usa el mismo corte) */
@media (max-width:1100px){
  .main-nav{display:none}.menu-btn{display:inline-flex}
}
@media (max-width:900px){
  :root{--head:4rem}
  .pairs{height:560vh}
  .pairs__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:1.2rem}
  .pairs__photo{grid-area:1/1;justify-self:start;aspect-ratio:16/10;max-width:100%;max-height:30svh}
  .pair{grid-area:2/1;align-self:start}
  .pair__t{font-size:clamp(2.6rem,14vw,5.4rem)}
  .pair__d{margin-top:1rem;font-size:.98rem}
  .pairs__count{display:none}
  .studio__grid,.rig__grid,.thera__grid,.book__grid{grid-template-columns:1fr}
  .studio__photo{aspect-ratio:4/5}
  .thera__photo{order:0;aspect-ratio:4/5}
  .foot__grid{grid-template-columns:1fr 1fr}.foot__grid>div:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .lines li{grid-template-columns:1fr;gap:.1rem}
  .rig__read dd{font-size:1.15rem}
  .rig__cap{flex-wrap:wrap;row-gap:.3rem}
  .rig__cap span{flex-basis:100%}
  .facts div:nth-child(even){padding-left:1rem}
  .facts div:nth-child(odd){padding-right:1rem}
}

/* ---------- 1 · móvil: la foto se corta en los hombros y la cabeza sale del marco ---------- */
@media (max-width:700px){
  .hand{height:360vh}
  .plate{--ar:.6061;transform:translate(-50%,-50%) translateY(calc(24% + var(--py,0px))) scale(var(--ps,1));transform-origin:50% 40%}
  .plate__photo{clip-path:inset(30.5% 0 0 0)}
  .plate{--fs:16.4cqw;--my:calc((100cqw / var(--ar) - 100svh) / 2 - 24cqw / var(--ar) + var(--head) + 3.2rem)}
  .mast__w--2{left:calc(var(--mx) + var(--fs) * .62)}
  .mast__amp{left:var(--mx);top:calc(var(--my) + var(--lead) + var(--fs) * .14);font-size:calc(var(--fs) * .56)}
  .mast__haze{display:none}
  .hand__card{display:contents}
  .hand__txt{position:absolute;left:var(--gut);top:38svh;width:calc(50% - 100svh * .6061 * .075 - var(--gut));opacity:var(--card,1);animation:handCard 1.3s var(--ease) 1.1s both}
  .hand__card .eyebrow{font-size:.62rem;gap:.5rem}
  .hand__rule{width:1.2rem}
  .hand__copy{font-size:1.02rem;line-height:1.22;margin:.5rem 0 0}
  .hand__go{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);justify-content:center;opacity:var(--card,1);animation:handCard 1.3s var(--ease) 1.2s both}
  .hand__meta .m-hide{display:none}
  .hand__meta{top:38svh;width:calc(50% - 100svh * .6061 * .12 - var(--gut));font-size:.6rem;letter-spacing:.16em}
  .hand__mf{grid-template-columns:1fr;align-content:center;gap:1.4rem}
  .hand__loop{width:min(44vw,12rem);order:-1}
  .hand__fig{font-size:.6rem}
}
@media (max-width:700px) and (max-height:700px){
  .hand__copy{font-size:.92rem}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .pairs{height:auto}
  .pairs__stick{position:relative;height:auto;min-height:100svh}
  .hand{height:auto}
  .hand__stick{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column}
  .hand__clip{position:relative;height:100svh;overflow:hidden;clip-path:none!important}
  .hand__mf{position:relative;opacity:1;transform:none;order:3;padding-block:5rem}
  .hand__card{opacity:1}
  .hand__fig{display:none}
  .mf__text .w{opacity:1}
  .pair{grid-area:auto;opacity:1;visibility:visible;margin-bottom:3rem}
  .pairs__stage{display:block}.pairs__photo,.pairs__dots,.pairs__count{display:none}
  .js .reveal,.js figure.reveal{opacity:1;transform:none;clip-path:none}
  .js figure.reveal::after{display:none}.js figure.reveal img,.js figure.reveal video{scale:1}
}