/* ═══════════════ Base ═══════════════ */
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/InstrumentSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/InstrumentSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-deep); color:var(--text);
  font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:300;font-variation-settings:var(--fraunces-display,normal)}
p{margin:0}
a{color:inherit}

.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-modal);
  background:var(--surface); color:var(--text); padding:var(--s-3) var(--s-5);
  border:var(--hair) solid var(--text); transition:top var(--dur) var(--ease-out);
}
.skip:focus{top:var(--s-4)}

:focus-visible{outline:2px solid var(--accent-gold);outline-offset:3px;border-radius:var(--radius)}

.eyebrow{
  font-size:var(--t-micro); font-weight:500; letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--accent-calm); margin:0;
}
.eyebrow--gold{color:var(--accent-gold)}

/* ═══════════════ Botones ═══════════════ */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:var(--bh); padding:0 var(--s-6); background:transparent; -webkit-appearance:none; appearance:none;
  font-family:var(--font-body); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  border:var(--hair) solid transparent; border-radius:var(--radius);
  cursor:pointer; position:relative; overflow:hidden;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.btn__arw{width:20px;height:9px;transition:transform var(--dur) var(--ease-out)}
.btn:hover .btn__arw{transform:translateX(4px)}

.btn--solid{background:var(--surface);color:var(--surface-deep)}
.btn--solid:hover{background:var(--surface-soft)}

.btn--ghost-light{color:var(--surface);border-color:rgba(250,246,240,.34)}
.btn--ghost-light:hover{border-color:var(--surface);background:rgba(250,246,240,.07)}

.btn--ghost{color:var(--text);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--text)}

/* ═══════════════ Nav ═══════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  transition:background var(--dur-slow) var(--ease-out), backdrop-filter var(--dur-slow);
}
.nav.is-stuck{background:rgba(36,27,22,.72);backdrop-filter:blur(14px) saturate(120%)}
.nav__in{
  max-width:var(--max); margin-inline:auto; padding:var(--s-5) var(--gutter);
  display:flex; align-items:center; gap:var(--s-6);
}
.nav__logo{flex:0 0 auto;line-height:0}
.nav__logo img{width:clamp(124px,11vw,168px);height:auto}
.nav__links{display:flex;gap:var(--s-6);margin-inline:auto}
.nav__links a{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-warm); text-decoration:none; padding:var(--s-3) 0;
  position:relative; transition:color var(--dur) var(--ease-out);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:var(--hair);
  background:var(--accent-gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.nav__links a:hover{color:var(--surface)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:var(--s-4);flex:0 0 auto}

.lang{
  background:none; border:0; cursor:pointer; padding:0 var(--s-3);
  min-height:44px; display:inline-flex; align-items:center;
  font-family:var(--font-body); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.16em; color:var(--surface);
}
.lang__sep{color:var(--surface-mid);margin:0 2px}
.lang__off{color:var(--surface-mid)}

/* ═══════════════ Hero ═══════════════ */
.hero{
  position:relative; min-height:100svh; background:var(--surface-deep);
  color:var(--text-on-deep); display:flex; flex-direction:column;
  isolation:isolate; overflow:hidden;
}
/* luz de la sala, no degradado decorativo */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 34%, rgba(185,150,119,.20), transparent 62%),
    radial-gradient(90% 70% at 8% 96%, rgba(15,12,10,.85), transparent 60%);
}
.hero__canvas{position:absolute;inset:0;z-index:0}
.hero__canvas canvas{width:100%;height:100%}

.hero__in::before{
  content:""; position:absolute; inset:0 auto 0 0; width:min(86rem,80%); z-index:-1;
  background:linear-gradient(96deg, rgba(26,19,16,.95) 0%, rgba(26,19,16,.88) 34%, rgba(26,19,16,.46) 66%, rgba(26,19,16,0) 100%);
  pointer-events:none;
}
.hero__in{
  position:relative; z-index:2; flex:1;
  max-width:var(--max); width:100%; margin-inline:auto;
  padding:calc(var(--s-11) + 2vw) var(--gutter) var(--s-7);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero__title{
  font-size:clamp(2.7rem, 6.6vw, 5.6rem); line-height:1.02; letter-spacing:-.020em;
  margin:var(--s-5) 0 0; max-width:min(13ch, 52%); text-wrap:balance;
}
.hero__title em{font-style:normal;color:var(--surface-soft)}
.line{display:block;overflow:hidden}
.line>span{display:block}

.hero__lead{
  margin-top:var(--s-6); max-width:34ch; color:var(--accent-warm);
  font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.5;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-7)}

.hero__facts{
  position:relative; z-index:2; border-top:var(--hair) solid var(--rule-deep);
  max-width:var(--max); width:100%; margin-inline:auto;
  padding:var(--s-5) var(--gutter) var(--s-6);
  display:flex; align-items:flex-end; gap:var(--s-6);
}
.hero__facts dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);flex:1;margin:0}
.fact dt{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-gold)}
.fact dd{margin:var(--s-2) 0 0;font-family:var(--font-display);font-size:clamp(1rem,1.3vw,1.2rem);color:var(--surface-soft)}


/* ═══════════════ Escena continua ═══════════════
   Un solo lienzo fijo detrás de toda la página. Las secciones
   son paneles que flotan sobre él; algunas lo dejan ver entero. */
.scene{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 76% 30%, rgba(169,176,162,.13), transparent 62%),
    radial-gradient(100% 80% at 10% 100%, rgba(16,19,16,.9), transparent 62%),
    var(--surface-deep);
}
.scene canvas{width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease-out)}
.scene[data-ready] canvas{opacity:1}

/* Cada sección es un acto sobre la escena */
.act{position:relative;z-index:var(--z-base)}

/* Actos abiertos: la escena se ve entera, el texto flota */
.act--open{background:transparent!important;color:var(--text-on-deep)}
.act--open .h-display,.act--open h2,.act--open h3{color:var(--surface)}
.act--open p,.act--open li{color:var(--accent-warm)}
.act--open .eyebrow{color:var(--accent-gold)}

/* Actos panel: cristal sobre la escena, no un bloque opaco */
.act--panel{
  background:rgba(26,19,16,.74)!important;
  backdrop-filter:blur(26px) saturate(115%);
  -webkit-backdrop-filter:blur(26px) saturate(115%);
  border-top:var(--hair) solid rgba(185,150,119,.18);
  border-bottom:var(--hair) solid rgba(185,150,119,.18);
  color:var(--text-on-deep);
}
.act--panel h2,.act--panel h3,.act--panel .h-display{color:var(--surface)}
.act--panel p,.act--panel li,.act--panel dd{color:var(--accent-warm)}
.act--panel .eyebrow{color:var(--accent-gold)}
.act--panel .row{border-bottom-color:rgba(185,150,119,.16)}
.act--panel .row__name,.act--panel .row__price{color:var(--surface)}
.act--panel .row__desc{color:var(--accent-warm)}
.act--panel .row__dur{color:var(--surface-soft)}
.act--panel .svc__head{border-bottom-color:rgba(185,150,119,.30)}
.act--panel .grp__label h3{color:var(--surface)}
.act--panel .btn--ghost{color:var(--surface);border-color:rgba(250,246,240,.34)}
.act--panel .btn--ghost:hover{border-color:var(--surface)}
.act--panel .work__head{border-bottom-color:rgba(185,150,119,.24)}
.act--panel .facts2 div{border-top-color:rgba(185,150,119,.24)}
.act--panel .facts2 dt{color:var(--accent-gold)}
.act--panel .facts2 dd{color:var(--surface-soft)}
.act--panel .quote blockquote{color:var(--surface)}
.act--panel .policies{border-top-color:rgba(185,150,119,.24)}
.act--panel .policies h3{color:var(--surface)}
.act--panel .stp{border-top-color:rgba(185,150,119,.28)}
.act--panel .tile figcaption,.act--panel .work__note,.act--panel .svc__foot p{color:var(--accent-warm)}
.act--panel .ph{background:
  radial-gradient(120% 100% at 30% 20%, rgba(185,150,119,.34), transparent 60%),
  linear-gradient(150deg, #16100D, #33251E 70%, #4A382D)}

/* El héroe ya no pinta fondo: lo pone la escena */
.hero{background:transparent}
.hero::before{content:none}
.hero__in::before{content:none}

/* El ritual, abierto: el texto se centra sobre el iris */
.ritual.act--open{padding-block:clamp(7rem,16vw,14rem);isolation:isolate}
.ritual.act--open::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(78% 62% at 50% 50%, rgba(20,15,12,.86) 0%, rgba(20,15,12,.62) 46%, rgba(20,15,12,0) 78%);
}
.ritual.act--open .stp{border-top-color:rgba(185,150,119,.34)}
.ritual.act--open .stp p{color:var(--accent-warm)}

/* Cierre abierto */
.closing.act--open{background:transparent}

/* ═══════════════ Estructura común ═══════════════ */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.h-display{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.018em}

/* ═══════════════ Servicios ═══════════════ */
.svc{background:var(--surface);padding:clamp(4.5rem,10vw,9rem) 0 clamp(4rem,8vw,7rem)}
.svc__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:var(--s-7); align-items:end;
  padding-bottom:var(--s-7); border-bottom:var(--hair) solid var(--text);
}
.svc__head h2{margin-top:var(--s-4)}
.svc__lead{color:var(--text-muted);font-size:0.9375rem;line-height:1.65}
.svc__note{display:block;margin-top:var(--s-4);color:var(--accent-calm);font-weight:500}

.grp{padding-top:var(--s-7)}
.grp__label{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-2)}
.grp__label span{
  font-size:var(--t-micro);letter-spacing:.2em;color:var(--accent-warm);
  font-variant-numeric:tabular-nums;
}
.grp__label h3{font-size:var(--t-h3);color:var(--text)}

.rows{list-style:none;margin:0;padding:0}
.row{
  display:grid; grid-template-columns:minmax(0,1fr) 6.5rem 7rem;
  align-items:baseline; gap:var(--s-5);
  padding:var(--s-5) 0; border-bottom:var(--hair) solid var(--rule);
  transition:padding-left var(--dur) var(--ease-out);
}
.row:hover{padding-left:var(--s-3)}
.row__main{min-width:0}
.row__name{
  display:block; font-family:var(--font-display); font-size:var(--t-lead);
  color:var(--text); line-height:1.25;
}
.row__desc{display:block;margin-top:var(--s-2);color:var(--text-muted);font-size:0.9375rem;max-width:52ch}
.row__dur{
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-calm); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.row__price{
  font-family:var(--font-display); font-size:var(--t-h3); color:var(--text);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tag{
  font-style:normal; font-family:var(--font-body); font-size:0.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-gold);
  border:var(--hair) solid var(--accent-gold); border-radius:var(--radius);
  padding:2px 8px; margin-left:var(--s-3); vertical-align:middle;
}
.row--star .row__name{color:var(--text)}

.svc__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-5); margin-top:var(--s-8);
}
.svc__foot p{color:var(--text-faint);font-size:var(--t-micro);letter-spacing:.06em}

/* ═══════════════ El ritual ═══════════════ */
.ritual{background:var(--surface-soft);padding:clamp(4.5rem,10vw,9rem) 0}
.ritual h2{margin-top:var(--s-4)}
.steps{
  list-style:none;margin:var(--s-8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6);
}
.stp{border-top:var(--hair) solid var(--accent-warm);padding-top:var(--s-5)}
.stp__n{
  display:block;font-size:var(--t-micro);letter-spacing:.2em;color:var(--accent-gold);
  font-variant-numeric:tabular-nums;
}
.stp h3{margin-top:var(--s-3);font-size:var(--t-h3);color:var(--text)}
.stp p{margin-top:var(--s-3);color:var(--text-muted);font-size:0.9375rem;line-height:1.62}

/* ═══════════════ Galería ═══════════════ */
.work{background:var(--surface);padding:clamp(4.5rem,10vw,9rem) 0}
.work__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--s-7);align-items:end;
  padding-bottom:var(--s-6);border-bottom:var(--hair) solid var(--rule);
}
.work__head h2{margin-top:var(--s-4)}
.work__lead{color:var(--text-muted);font-size:0.9375rem;line-height:1.65}
.grid{
  margin-top:var(--s-7);display:grid;gap:var(--s-4);
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:15rem;
}
.tile{margin:0;display:flex;flex-direction:column;min-height:0}
.tile--tall{grid-row:span 2}
.tile--wide{grid-column:span 2}
.tile--w2{grid-column:span 2}
.ph{
  width:100%;flex:1;min-height:0;border-radius:var(--radius);
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(169,176,162,.30), transparent 60%),
    linear-gradient(150deg, var(--surface-deep), #2B332C 70%, #3D463D);
}
.tile figcaption{
  margin-top:var(--s-3);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);
}
.work__note{margin-top:var(--s-6);color:var(--text-faint);font-size:var(--t-micro);letter-spacing:.06em}

/* ═══════════════ Estudio ═══════════════ */
.studio{background:var(--surface-soft);padding:clamp(4.5rem,10vw,9rem) 0}
.studio__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:clamp(2.5rem,6vw,6rem)}
@media (min-width:1240px){
  /* el retrato entra como primera columna: ella primero, luego su palabra */
  .studio__in{grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,26rem);
              gap:clamp(2rem,4vw,4.5rem);align-items:start}
}
.studio__who h2{margin-top:var(--s-4)}
.studio__body{margin-top:var(--s-5);max-width:46ch;color:var(--text-muted);line-height:1.7}
.facts2{margin:var(--s-7) 0 0;display:grid;gap:0}
.facts2 div{
  display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--s-4);
  padding:var(--s-4) 0;border-top:var(--hair) solid var(--accent-warm);
}
.facts2 dt{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-calm)}
.facts2 dd{margin:0;color:var(--text);font-size:0.9375rem}

.quote{margin:0 0 var(--s-6);padding-left:var(--s-5);border-left:2px solid var(--accent-gold)}
.quote blockquote{margin:0;font-family:var(--font-display);font-size:var(--t-lead);line-height:1.5;color:var(--text)}
.quote figcaption{margin-top:var(--s-3);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.quote figcaption span{color:var(--text-faint)}
.policies{border-top:var(--hair) solid var(--accent-warm);padding-top:var(--s-5);margin-top:var(--s-7)}
.policies h3{font-size:var(--t-h3);color:var(--text)}
.policies ul{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3)}
.policies li{position:relative;padding-left:var(--s-5);color:var(--text-muted);font-size:0.9375rem}
.policies li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:var(--hair);background:var(--accent-gold)}

/* ═══════════════ Cierre ═══════════════ */
.closing{background:var(--surface-deep);color:var(--text-on-deep);padding:clamp(5rem,11vw,10rem) 0}
.closing__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-6)}
.closing__line{font-family:var(--font-display);font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.15;color:var(--surface)}

/* ═══════════════ Reservas ═══════════════ */
.book{background:var(--surface-deep);color:var(--text-on-deep);padding:clamp(4.5rem,10vw,9rem) 0}
.book__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28rem);gap:var(--s-7);align-items:end;
  padding-bottom:var(--s-7);border-bottom:var(--hair) solid var(--rule-deep);
}
.book__head h2{margin-top:var(--s-4);color:var(--surface)}
.book__lead{color:var(--accent-warm);font-size:0.9375rem;line-height:1.65}

.bk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:clamp(2rem,4vw,4rem);margin-top:var(--s-8)}
.bk__eyebrow{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-gold);margin:0}
.bk__h{font-size:var(--t-h2);color:var(--surface);margin-bottom:var(--s-6)}
.bk__h:focus{outline:none}

.bk__steps{display:flex;flex-wrap:wrap;gap:var(--s-5);list-style:none;margin:0 0 var(--s-7);padding:0}
.bk__step{display:flex;align-items:center;gap:var(--s-3);color:#8B9489}
.bk__stepn{
  width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:var(--hair) solid currentColor;font-size:.6875rem;letter-spacing:.04em;
}
.bk__stepl{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.bk__step.is-now{color:var(--surface)}
.bk__step.is-now .bk__stepn{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--surface-deep)}
.bk__step.is-done{color:var(--accent-warm)}
.bk__step.is-done .bk__stepn{border-color:var(--accent-warm)}

.bk__group{border:0;margin:0 0 var(--s-6);padding:0}
.bk__group legend{
  font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-warm);padding:0 0 var(--s-3);
}
.bk__opts{display:grid;gap:var(--s-2)}
.opt{
  position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-4);
  min-height:56px;padding:var(--s-3) var(--s-5);cursor:pointer;
  border:var(--hair) solid var(--rule-deep);border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.opt:hover{border-color:rgba(169,176,162,.45);background:rgba(250,246,240,.03)}
.opt.is-on{border-color:var(--accent-gold);background:rgba(169,138,79,.10)}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.opt input:focus-visible + .opt__name{outline:2px solid var(--accent-gold);outline-offset:4px}
.opt__name{font-family:var(--font-display);font-size:var(--t-lead);color:var(--surface)}
.opt__meta{font-size:var(--t-micro);letter-spacing:.1em;color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Calendario */
.cal{border:var(--hair) solid var(--rule-deep);border-radius:var(--radius);padding:var(--s-5);
     max-width:none}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-5)}
.cal__head p{font-family:var(--font-display);font-size:var(--t-h3);color:var(--surface)}
.cal__nav{
  width:44px;height:44px;background:none;color:var(--stone);cursor:pointer;
  border:var(--hair) solid var(--rule-deep);border-radius:var(--radius);font-size:1rem;
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.cal__nav:hover{color:var(--surface);border-color:rgba(169,176,162,.45)}
.cal__dow,.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal__dow{margin-bottom:var(--s-3)}
.cal__dow span{
  text-align:center;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
}
.cal__pad{aspect-ratio:1}
.cal__d{
  aspect-ratio:1;min-height:44px;max-height:84px;display:grid;place-items:center;cursor:pointer;
  background:none;border:var(--hair) solid transparent;border-radius:var(--radius);
  color:var(--surface-soft);font-family:var(--font-body);font-size:1.0625rem;
  font-variant-numeric:tabular-nums;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.cal__d:hover:not(:disabled){border-color:rgba(169,176,162,.45)}
.cal__d:disabled{color:#737E70;cursor:not-allowed}
.cal__d.is-on{background:var(--surface);color:var(--surface-deep);border-color:var(--surface)}

/* Horas */
.slots{margin-top:var(--s-6);min-height:5rem}
.slots__msg{color:var(--stone);font-size:0.9375rem}
.slots__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:var(--s-2);margin-top:var(--s-4)}
.slot{
  min-height:48px;padding:0 var(--s-3);cursor:pointer;
  background:none;border:var(--hair) solid var(--rule-deep);border-radius:var(--radius);
  color:var(--surface-soft);font-family:var(--font-body);font-size:var(--t-micro);
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.slot:hover{border-color:rgba(169,176,162,.45)}
.slot.is-on{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--surface-deep);font-weight:500}

/* Formulario */
.bk__form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.fld--full{grid-column:1/-1}
.fld label{display:block;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:var(--s-2)}
.fld input,.fld textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);
  background:rgba(250,246,240,.04);color:var(--surface);
  border:var(--hair) solid var(--rule-deep);border-radius:var(--radius);
  font-family:var(--font-body);font-size:var(--t-body);
  transition:border-color var(--dur) var(--ease-out);
}
.fld textarea{min-height:96px;resize:vertical}
.fld input:hover,.fld textarea:hover{border-color:rgba(169,176,162,.45)}
.fld input.is-bad{border-color:#C08A8A}
.err{min-height:1.2em;margin-top:var(--s-2);font-size:var(--t-micro);color:#D6A2A2}

.bk__nav{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6)}
.bk__nav .btn:disabled{opacity:.4;cursor:not-allowed}

/* Resumen */
.bk__side{
  align-self:start;position:sticky;top:calc(var(--s-9));
  background:#232A24;                       /* opaco: evita el repintado fantasma de Chrome */
  border:var(--hair) solid var(--rule-deep);border-radius:var(--radius);padding:var(--s-6);
}
.bk__empty{color:#8B9489;font-size:0.9375rem;margin-top:var(--s-4)}
.bk__svcname{font-family:var(--font-display);font-size:var(--t-h3);color:var(--surface);margin-top:var(--s-4)}
.bk__sum{margin:var(--s-5) 0 0;display:grid;gap:var(--s-3)}
.bk__sum div{display:flex;justify-content:space-between;gap:var(--s-4);align-items:baseline}
.bk__sum dt{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.bk__sum dd{margin:0;font-size:0.9375rem;color:var(--surface-soft);text-align:right}
.bk__dep{margin-top:var(--s-5);padding-top:var(--s-5);border-top:var(--hair) solid var(--rule-deep);display:grid;gap:var(--s-2)}
.bk__dep div{display:flex;justify-content:space-between;gap:var(--s-4);font-size:0.9375rem;color:var(--surface)}
.bk__dep strong{font-family:var(--font-display);font-size:var(--t-h3);font-weight:400;line-height:1}
.bk__dep .muted{color:#8B9489;font-size:var(--t-micro)}

/* Confirmación */
.done{text-align:center;padding:var(--s-7) 0}
.done img{margin:0 auto var(--s-6)}
.done__when{font-family:var(--font-display);font-size:var(--t-h3);color:var(--surface-soft);margin-top:var(--s-4);line-height:1.4}
.done__msg{max-width:44ch;margin:var(--s-5) auto var(--s-7);color:var(--accent-warm);font-size:0.9375rem}

/* ═══════════════ Pie ═══════════════ */
.foot{position:relative;z-index:var(--z-base);background:var(--ink);color:var(--accent-warm);padding:clamp(3.5rem,7vw,6rem) 0 var(--s-6)}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:var(--s-7);padding-bottom:var(--s-7);border-bottom:var(--hair) solid #241B16;
}
.foot__brand img{width:clamp(150px,13vw,200px);height:auto}
.foot__sig{margin-top:var(--s-4);font-size:var(--t-micro);letter-spacing:var(--track-logo);color:#8B9489}
.foot__col{display:flex;flex-direction:column;gap:var(--s-1);align-items:flex-start}
.foot__k{
  font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-gold);margin-bottom:var(--s-1);
}
.foot__col a,.foot__col p{font-size:0.9375rem;color:var(--surface-soft);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.foot__col a{position:relative}
.foot__col a::after{
  content:"";position:absolute;left:0;right:0;bottom:11px;height:var(--hair);background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-out);
}
.foot__col a:hover::after{transform:scaleX(1)}
.muted2{color:#8B9489!important}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4);
  padding-top:var(--s-5);
}
.foot__legal p{font-size:var(--t-micro);letter-spacing:.05em;color:#8B9489}

/* Barra fija de reserva — solo móvil */
.cta-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  min-height:56px;align-items:center;justify-content:center;text-decoration:none;
  padding:var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--surface);color:var(--surface-deep);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 -1px 0 rgba(36,27,22,.12);
}

/* ═══════════════ Revelado ═══════════════ */
/* Sin JS el contenido se ve igual: la animación es un extra, no un requisito. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out) var(--d,0ms),transform 700ms var(--ease-out) var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ═══════════════ Menú móvil ═══════════════ */
.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{display:block;width:22px;height:1px;background:var(--surface);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:1px;background:var(--surface);
  transition:transform var(--dur) var(--ease-out)
}
.burger span::before{top:-7px} .burger span::after{top:7px}
.nav.is-open .burger span{background:transparent}
.nav.is-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════ Responsive ═══════════════ */
@media (max-width:1024px){
  .nav__links{gap:var(--s-5)}
}

@media (max-width:900px){
  .burger{display:flex}
  .nav.is-open{background:rgba(26,19,16,.97);backdrop-filter:blur(14px)}
  .nav__links{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; gap:0;
    padding:var(--s-4) var(--gutter) var(--s-7);
    background:rgba(26,19,16,.97); backdrop-filter:blur(14px);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{
    padding:var(--s-4) 0; font-size:var(--t-body); letter-spacing:.12em;
    border-bottom:var(--hair) solid var(--rule-deep); color:var(--surface-soft);
  }
  .nav__links a::after{display:none}
  .nav__right .btn{display:none}

  /* el haz baja y se atenúa: no debe pelear con el texto */
  .hero__canvas{opacity:.85; inset:30% -30% 2% -4%}
  .hero__in::before{
    inset:0; width:100%;
    background:linear-gradient(180deg, rgba(26,19,16,.97) 0%, rgba(26,19,16,.93) 50%, rgba(26,19,16,.34) 100%);
  }
  .hero__facts dl{grid-template-columns:1fr;gap:var(--s-4)}
  .fact{display:flex;align-items:baseline;gap:var(--s-4)}
  .fact dt{flex:0 0 auto;min-width:9.5rem}
  .fact dd{margin:0}
}

@media (max-width:1024px){
  .bk{grid-template-columns:1fr}
  .bk__side{position:static;order:-1}
}

@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
  .studio__in{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:13rem}
  .tile--wide{grid-column:span 2}
.tile--w2{grid-column:span 2}
  .tile--tall{grid-row:span 1}
}

@media (max-width:900px){
  .foot__in{grid-template-columns:1fr 1fr;gap:var(--s-6)}
  .cta-bar{display:flex}
  body{padding-bottom:56px}
  .foot{padding-bottom:var(--s-8)}
  .work__head{grid-template-columns:1fr;align-items:start;gap:var(--s-5)}
  .facts2 div{grid-template-columns:1fr;gap:var(--s-1)}
  .book__head{grid-template-columns:1fr;align-items:start;gap:var(--s-5)}
  .bk__steps{gap:var(--s-3)}
  .bk__stepl{display:none}
  .bk__form{grid-template-columns:1fr}
  .bk__nav{flex-direction:column-reverse}
  .bk__nav .btn{width:100%}
  .svc__head{grid-template-columns:1fr;align-items:start;gap:var(--s-5)}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3) var(--s-4)}
  .row__dur{grid-column:1;order:3;margin-top:var(--s-2)}
  .row__price{grid-column:2;grid-row:1;font-size:var(--t-lead)}
  .row__main{grid-column:1;grid-row:1}
  .row:hover{padding-left:0}
}

@media (max-width:560px){
  .foot__in{grid-template-columns:1fr;gap:var(--s-6)}
  .foot__legal{flex-direction:column;gap:var(--s-2)}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;grid-auto-rows:12rem}
  .tile--wide{grid-column:span 1}
  .closing .btn{width:100%}
  .svc__foot{flex-direction:column;align-items:stretch}
  .svc__foot .btn{width:100%}
  .hero__in{padding-top:calc(var(--s-10) + 4vw)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__title{font-size:clamp(2.5rem,11vw,3.4rem)}
  .fact{display:block}
  .fact dd{margin-top:var(--s-1)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}


/* ═══════════════════════════════════════════════════════════════
   RITMO DE SUPERFICIES
   La página alterna cuatro materiales. Ese juego es lo que da
   respiración; un solo tono, claro u oscuro, aplana.

     PAPEL   lino, translúcido — deja ver la escena 3D
     TINTA   espresso sólido — foco, peso, decisión
     SALVIA  verde sólido — el bloque de bienestar
     CREMA   claro cálido sólido — descanso entre extremos

   Proporción global aproximada 55 · 25 · 12 · 8, dentro de lo
   que fija el manual.
   ═══════════════════════════════════════════════════════════════ */

body{background:var(--surface);color:var(--text)}

/* La escena vive sobre papel: luz de ventana, no sala oscura */
.scene{
  background:
    radial-gradient(120% 90% at 74% 22%, rgba(234,223,209,.46), transparent 66%),
    radial-gradient(90% 80% at 12% 96%,  rgba(185,150,119,.09), transparent 66%),
    var(--surface);
}

/* ── PAPEL · translúcido, la escena se ve ────────────────── */
.s-paper{background:transparent!important;color:var(--text)}
.s-paper h1,.s-paper h2,.s-paper h3,.s-paper .h-display{color:var(--text)}
.s-paper p,.s-paper li,.s-paper dd{color:var(--text-muted)}
.s-paper .eyebrow{color:var(--accent-calm)}

/* ── TINTA · espresso sólido ─────────────────────────────── */
.s-ink{background:var(--surface-deep)!important;color:var(--text-on-deep)}
.s-ink h2,.s-ink h3,.s-ink .h-display{color:var(--surface)}
.s-ink p,.s-ink li,.s-ink dd{color:var(--stone)}
.s-ink .eyebrow{color:var(--accent-gold)}
.s-ink .row{border-bottom-color:rgba(169,176,162,.16)}
.s-ink .row__name,.s-ink .row__price{color:var(--surface)}
.s-ink .row__desc{color:var(--stone)}
.s-ink .row__dur{color:var(--surface-soft)}
.s-ink .svc__head{border-bottom-color:rgba(169,176,162,.34)}
.s-ink .grp__label span{color:var(--accent-gold)}
.s-ink .svc__note{color:var(--surface-soft)}
.s-ink .svc__foot p,.s-ink .work__note{color:#8B9489}
.s-ink .btn--ghost{color:var(--surface);border-color:rgba(250,246,240,.34)}
.s-ink .btn--ghost:hover{border-color:var(--surface)}
.s-ink .btn--solid{background:var(--surface);color:var(--surface-deep)}
.s-ink .btn--solid:hover{background:var(--surface-soft)}

/* ── SALVIA · el bloque de bienestar ─────────────────────── */
.s-sage{background:var(--accent-calm)!important;color:#F2F4EE}
.s-sage h2,.s-sage h3,.s-sage .h-display{color:#FBFCF9}
.s-sage p,.s-sage li{color:#DCE2D4}
.s-sage .eyebrow{color:#C9D3BE}
.s-sage .stp{border-top-color:rgba(251,252,249,.34)}
.s-sage .stp__n{color:#C9D3BE}
.s-sage::before{content:none!important}

/* ── CREMA · descanso cálido ─────────────────────────────── */
.s-cream{background:var(--surface-soft)!important;color:var(--text)}
.s-cream h2,.s-cream h3,.s-cream .h-display{color:var(--text)}
.s-cream p,.s-cream li,.s-cream dd{color:var(--text-muted)}
.s-cream .eyebrow{color:var(--accent-calm)}
.s-cream .work__head{border-bottom-color:#D6C6B2}
.s-cream .facts2 div{border-top-color:#D6C6B2}
.s-cream .quote blockquote{color:var(--text)}
.s-cream .policies{border-top-color:#D6C6B2}
.s-cream .tile figcaption,.s-cream .work__note{color:var(--text-faint)}
.s-cream .ph{background:
  radial-gradient(120% 100% at 30% 20%, rgba(111,83,68,.30), transparent 58%),
  linear-gradient(150deg, #D9C8B4, #C2AC94 70%, var(--accent-warm))}

/* ── Barra superior: se adapta al bloque que tiene debajo ── */
.nav__links a{color:var(--text-muted)}
.nav__links a:hover{color:var(--text)}
.nav.is-stuck{background:rgba(250,246,240,.86);backdrop-filter:blur(16px) saturate(110%)}
.lang{color:var(--text)}
.lang__sep,.lang__off{color:var(--text-faint)}
.burger span,.burger span::before,.burger span::after{background:var(--text)}
.nav__logo img{content:url("../img/logo-espresso.svg")}
@media (max-width:900px){
  .nav.is-open,.nav__links{background:rgba(250,246,240,.97)}
  .nav__links a{border-bottom-color:var(--rule)!important;color:var(--text)}
}

/* ── Botones por defecto sobre papel ─────────────────────── */
.btn--solid{background:var(--surface-deep);color:var(--surface)}
.btn--solid:hover{background:var(--ink)}
.btn--ghost-light{color:var(--text);border-color:var(--rule)}
.btn--ghost-light:hover{border-color:var(--text);background:rgba(36,27,22,.04)}
/* sobre superficie oscura vuelve a ser lino */
.s-ink .btn--ghost-light,.book .btn--ghost-light{color:var(--surface);border-color:rgba(250,246,240,.34)}
.s-ink .btn--ghost-light:hover,.book .btn--ghost-light:hover{border-color:var(--surface);background:rgba(250,246,240,.08)}

/* ── Héroe sobre papel ───────────────────────────────────── */
.hero{color:var(--text)}
.hero__title em{color:var(--accent-calm)}
.hero__lead{color:var(--text-muted)}
.hero__facts{border-top-color:var(--rule)}
.fact dt{color:var(--accent-calm)}
.fact dd{color:var(--text)}

/* ── Estudio sobre papel: la escena asoma detrás ─────────── */
.studio.s-paper .facts2 div{border-top-color:var(--rule)}
.studio.s-paper .policies{border-top-color:var(--rule)}
.studio.s-paper .quote blockquote{color:var(--text)}

/* ── Reservas sobre tinta ────────────────────────────────── */
.book.s-ink{color:var(--text-on-deep)}
.book__head{border-bottom-color:rgba(185,150,119,.30)}
.bk__h{color:var(--surface)}
.bk__step{color:#8B9489}
.bk__step.is-now{color:var(--surface)}
.bk__step.is-now .bk__stepn{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--surface-deep)}
.bk__step.is-done{color:var(--accent-warm)}
.bk__group legend{color:var(--accent-warm)}
.opt{border-color:rgba(169,176,162,.20);background:transparent}
.opt:hover{border-color:rgba(169,176,162,.45);background:rgba(250,246,240,.05)}
.opt.is-on{border-color:var(--accent-gold);background:rgba(169,138,79,.12)}
.opt__name{color:var(--surface)}
.opt__meta{color:var(--stone)}
.cal{border-color:rgba(185,150,119,.22)}
.cal__head p{color:var(--surface)}
.cal__nav{border-color:rgba(185,150,119,.22);color:var(--accent-warm)}
.cal__d{color:var(--surface-soft)}
.cal__d:disabled{color:#737E70}
.cal__d.is-on{background:var(--surface);color:var(--surface-deep);border-color:var(--surface)}
.slot{border-color:rgba(185,150,119,.22);color:var(--surface-soft)}
.slot.is-on{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--surface-deep)}
.fld label{color:var(--accent-warm)}
.fld input,.fld textarea{background:rgba(250,246,240,.05);color:var(--surface);border-color:rgba(185,150,119,.22)}
.bk__side{border-color:rgba(169,176,162,.20)}
.bk__svcname{color:var(--surface)}
.bk__sum dd{color:var(--surface-soft)}
.bk__dep{border-top-color:rgba(169,176,162,.20)}
.bk__dep div{color:var(--surface)}
.done__when{color:var(--surface-soft)}

/* ── Cierre sobre papel ──────────────────────────────────── */
.closing.s-paper .closing__line{color:var(--text)}

/* ── Pie: tinta profunda, el canto del libro ─────────────── */
.foot{background:var(--ink);color:var(--stone)}
.foot__in{border-bottom-color:rgba(169,176,162,.18)}
.cta-bar{background:var(--surface-deep);color:var(--surface)}
.skip{background:var(--surface-deep);color:var(--surface);border-color:var(--surface-deep)}

/* Los bloques de papel dejan ver la escena: el texto necesita
   un velo de luz, no una caja, para seguir siendo legible. */
.studio.s-paper,.closing.s-paper{isolation:isolate}
.studio.s-paper::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(92deg, rgba(250,246,240,1) 0%, rgba(250,246,240,1) 58%, rgba(250,246,240,.94) 78%, rgba(250,246,240,.66) 100%);
}
.closing.s-paper::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 56% at 50% 46%, rgba(250,246,240,.92) 0%, rgba(250,246,240,.62) 52%, rgba(250,246,240,0) 80%);
}

/* La barra superior toma el color de la superficie que tiene debajo */
.nav--dark .nav__links a{color:var(--stone)}
.nav--dark .nav__links a:hover{color:var(--surface)}
.nav--dark .lang{color:var(--surface)}
.nav--dark .lang__sep,.nav--dark .lang__off{color:#8B9489}
.nav--dark .burger span,.nav--dark .burger span::before,.nav--dark .burger span::after{background:var(--surface)}
.nav--dark .nav__logo img{content:url("../img/logo-lino.svg")}
.nav--dark .btn--ghost-light{color:var(--surface);border-color:rgba(250,246,240,.34)}
.nav--dark .btn--ghost-light:hover{border-color:var(--surface);background:rgba(250,246,240,.07)}
.nav--dark.is-stuck{background:rgba(30,36,31,.80)}

.nav--sage .nav__links a{color:#DCE2D4}
.nav--sage .nav__links a:hover{color:#FBFCF9}
.nav--sage .lang{color:#FBFCF9}
.nav--sage .lang__sep,.nav--sage .lang__off{color:#B7C2AA}
.nav--sage .burger span,.nav--sage .burger span::before,.nav--sage .burger span::after{background:#FBFCF9}
.nav--sage .nav__logo img{content:url("../img/logo-lino.svg")}
.nav--sage .btn--ghost-light{color:#FBFCF9;border-color:rgba(251,252,249,.42)}
.nav--sage.is-stuck{background:rgba(95,107,84,.82)}

/* ═══════════════════════════════════════════════════════════════
   SUPERFICIES TRANSLÚCIDAS
   Las hebras son oscuras: solo se ven sobre fondos claros o medios.
   Por eso el verde y el crema dejan pasar la escena, y la tinta no.
   ═══════════════════════════════════════════════════════════════ */

/* ── SALVIA translúcida ── */
.s-sage-glass{
  background:rgba(95,107,84,.80)!important;
  backdrop-filter:blur(3px) saturate(105%);
  -webkit-backdrop-filter:blur(3px) saturate(105%);
  color:#F2F4EE;
}
.s-sage-glass h2,.s-sage-glass h3,.s-sage-glass .h-display{color:#FBFCF9}
.s-sage-glass p,.s-sage-glass li,.s-sage-glass dd{color:#DFE5D7}
.s-sage-glass .eyebrow{color:#C9D3BE}
.s-sage-glass .svc__head{border-bottom-color:rgba(251,252,249,.46)}
.s-sage-glass .grp__label span{color:#C9D3BE}
.s-sage-glass .row{border-bottom-color:rgba(251,252,249,.22)}
.s-sage-glass .row__name,.s-sage-glass .row__price{color:#FBFCF9}
.s-sage-glass .row__desc{color:#DFE5D7}
.s-sage-glass .row__dur{color:#C9D3BE}
.s-sage-glass .svc__note{color:#EDF1E7}
.s-sage-glass .svc__foot p{color:#C9D3BE}
.s-sage-glass .tag{color:#E8DFC4;border-color:rgba(232,223,196,.66)}
.s-sage-glass .btn--ghost{color:#FBFCF9;border-color:rgba(251,252,249,.42)}
.s-sage-glass .btn--ghost:hover{border-color:#FBFCF9;background:rgba(251,252,249,.08)}

/* ── CREMA translúcida ── */
.ritual.s-cream-glass{isolation:isolate}
.ritual.s-cream-glass::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(234,223,209,0) 0%, rgba(234,223,209,.22) 30%,
                             rgba(234,223,209,.86) 54%, rgba(234,223,209,.97) 100%);
}
.s-cream-glass{
  background:rgba(234,223,209,.76)!important;
  backdrop-filter:blur(3px) saturate(105%);
  -webkit-backdrop-filter:blur(3px) saturate(105%);
  color:var(--text);
}
.s-cream-glass h2,.s-cream-glass h3,.s-cream-glass .h-display{color:var(--text)}
.s-cream-glass p,.s-cream-glass li{color:var(--text-muted)}
.s-cream-glass .eyebrow{color:var(--accent-calm)}
.s-cream-glass .stp{border-top-color:var(--surface-mid)}
.s-cream-glass .stp__n{color:var(--accent-calm)}


/* ── La galería pasa a tinta: las fotografías respiran mejor ── */
.work.s-ink .work__head{border-bottom-color:rgba(169,176,162,.26)}
.work.s-ink .work__lead{color:var(--stone)}
.work.s-ink .tile figcaption{color:var(--stone)}
.work.s-ink .ph{background:
  radial-gradient(130% 110% at 32% 18%, rgba(234,223,209,.10), transparent 62%),
  linear-gradient(152deg, #161A16, #1E241F 68%, #262E27)}

/* El titular del héroe se ajusta al idioma: el español pide una
   línea más que el inglés y no debe invadir el abanico. */
.hero__title em{display:inline}
html[lang="es"] .hero__title{max-width:min(12ch, 50%);font-size:clamp(2.4rem, 5.8vw, 4.9rem)}
@media (max-width:900px){
  .hero__title,html[lang="es"] .hero__title{max-width:100%}
}


/* ═══ Reservas · selección múltiple ═══════════════════════ */
.bk__hint{font-size:.82rem;line-height:1.55;color:var(--text-muted-on-deep);
  margin:-.4rem 0 1.6rem;max-width:44ch}
.opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.1rem .85rem}
.opt__tick{width:15px;height:15px;border:1px solid rgba(250,246,240,.34);border-radius:2px;
  display:block;position:relative;transition:background .18s ease,border-color .18s ease}
.opt.is-on .opt__tick{background:var(--accent-gold);border-color:var(--accent-gold)}
.opt.is-on .opt__tick::after{content:"";position:absolute;left:4px;top:.5px;width:4px;height:9px;
  border:solid #1E241F;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt input:focus-visible+.opt__tick{outline:2px solid var(--accent-gold);outline-offset:3px}

.bk__tally{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-gold);margin:0;align-self:center;max-width:38ch;line-height:1.5}
.bk__tally.is-bad{color:#D9A38A;text-transform:none;letter-spacing:.01em;font-size:.82rem}
.bk__nav{align-items:center}

.bk__picks{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem}
.bk__picks li{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:.7rem;
  font-size:.86rem;padding-bottom:.55rem;border-bottom:1px solid rgba(169,176,162,.16)}
.bk__pn{color:var(--surface)}
.bk__pp{color:var(--accent-gold);font-variant-numeric:tabular-nums}
.bk__px{background:none;border:0;cursor:pointer;font-size:1.05rem;line-height:1;padding:0 .1rem;
  color:var(--text-muted-on-deep);transition:color .18s ease}
.bk__px:hover{color:#D9A38A}


/* ═══ Reservas · paso 2 en dos columnas ═══════════════════
   Con el calendario acotado sobraba medio panel vacío; las horas
   suben a su lado y el paso deja de exigir scroll. */
.bk__sum div{gap:var(--s-4)}
.bk__sum dd{white-space:nowrap;text-align:right}
.bk__sum dt{white-space:nowrap}

@media (min-width:900px){
  /* la casilla llena su columna: el día elegido se lee como celda, no como sello */
  .cal__d{aspect-ratio:auto;height:84px;max-height:none}
  .slots__grid{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
}


/* ═══ Retrato de la artista ═══════════════════════════════ */
.studio__portrait{margin:0;position:relative}
.studio__portrait img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/4.4;object-fit:cover;object-position:50% 40%;
  border-radius:var(--radius);
  /* el papel de la sección es cálido; la foto se asienta con un canto de oro */
  box-shadow:0 0 0 1px rgba(169,138,79,.28), 0 26px 60px -32px rgba(36,27,22,.42);
}
@media (max-width:1239px){
  .studio__portrait{max-width:26rem;margin-bottom:var(--s-2)}
  .studio__portrait img{aspect-ratio:4/5}
}
@media (max-width:900px){
  .studio__portrait{max-width:none}
  .studio__portrait img{aspect-ratio:3/4}
}


/* ═══ Reservas · avisos y antispam ════════════════════════ */
.bk__aviso{grid-column:1/-1;margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);
  border:var(--hair) solid rgba(169,176,162,.28);border-radius:var(--radius);
  font-size:.86rem;line-height:1.55;color:var(--stone);background:rgba(169,176,162,.06)}
.bk__aviso--malo{border-color:#8C5A52;color:#E0A79C;background:rgba(140,90,82,.12)}
.done__ref{margin-top:var(--s-3);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
.done__ref strong{color:var(--accent-gold);letter-spacing:.2em}
/* el campo trampa: invisible para una persona, irresistible para un robot */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}