/* Dirección: superficies lisas (cemento, crema, grafito). La materialidad la ponen las fotos reales, no el fondo.
   Proporciones tomadas de la referencia: corte hormigón/foto al 45%, titular desde el 8% del ancho,
   banda del estudio en 4 columnas (35 / 27 / 21 / 17). */
:root{
  --ink:#111111; --graphite:#2B2B29; --cement:#C9C4BB; --cement-d:#A9A59D; --cream:#F1EEE8; --muted:#5E5C58; --grey:#625E57;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Montserrat",system-ui,sans-serif;
  --pl:8vw; --pr:max(20px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:999px){:root{--pl:max(22px,env(safe-area-inset-left,0px))}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);font:600 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.line{background:transparent;color:var(--ink)}.btn.line:hover{background:var(--ink);color:var(--cream)}

/* ---------- header ---------- */
header.top{position:fixed;z-index:40;left:0;right:0;top:0;height:76px;display:flex;align-items:center;gap:1.8vw;padding:0 var(--pr) 0 var(--pl);transition:background .3s,box-shadow .3s}
header.top.stuck{background:var(--hdbg);box-shadow:0 1px 0 var(--hdsh)}
header.top .lg img{height:40px;width:auto}
header.top nav.d{display:none;gap:clamp(12px,1.25vw,20px)}
header.top nav a{text-decoration:none;font:600 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
header.top nav a:hover{text-decoration:underline;text-underline-offset:8px}
.hr{margin-left:auto;display:flex;align-items:center;gap:14px}
.hcta{display:none!important;min-height:46px;padding:0 24px;font-size:.72rem;background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hcta:hover{background:transparent;color:var(--cream)}
header.top.stuck .hcta{background:var(--ink);color:var(--cream);border-color:var(--ink)}
header.top.stuck .hcta:hover{background:transparent;color:var(--ink)}
.hb{display:inline-flex;align-items:center;min-height:48px;min-width:48px;justify-content:center;background:none;border:0;color:var(--ink)}
.hb i{display:block;width:26px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu{position:fixed;z-index:50;inset:0;background:var(--ink);color:var(--cream);display:none;flex-direction:column;justify-content:center;gap:4px;padding:80px var(--pr) 40px var(--pl)}
.menu.open{display:flex}
.menu a{font:500 clamp(1.5rem,7vw,2.4rem)/1.4 var(--serif);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.menu .x{position:absolute;top:14px;right:var(--pr);min-height:48px;background:none;border:0;color:inherit;font:600 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
@media(min-width:1000px){header.top nav.d{display:flex}.hcta{display:inline-flex!important}.hb{color:var(--cream)}header.top.stuck .hb{color:var(--ink)}}

/* ---------- espacios de foto (lisos, sin simular fotografía) ---------- */
.slot{position:relative;overflow:hidden;background:var(--graphite)}
.slot .fill{position:absolute;inset:-6% 0;background:var(--graphite)}
.slot .fill::before{content:"";position:absolute;inset:clamp(14px,1.8vw,26px);border:1px solid rgba(241,238,232,.32)}
.slot .lab{position:absolute;left:clamp(30px,3.4vw,50px);bottom:clamp(30px,3.4vw,48px);font:600 .78rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);max-width:26ch}
.slot .lab small{display:block;font:500 .72rem/1.5 var(--sans);letter-spacing:.12em;opacity:.7}
.slot.ph .fill::before,.slot.ph .lab{display:none}
.slot .fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot.shade .fill::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,17,17,.72),rgba(17,17,17,0) 58%)}
.slot .lab.top{bottom:auto;top:clamp(96px,9vw,120px)}
.slot.light,.slot.light .fill{background:var(--cement-d)}
.slot.light .fill::before{border-color:rgba(17,17,17,.3)}
.slot.light .lab{color:var(--ink)}
.slot.pale,.slot.pale .fill{background:#DDD9D1}
.slot.pale .fill::before{border-color:rgba(17,17,17,.25)}
.slot.pale .lab{color:var(--ink)}

/* ---------- 01 hero ---------- */
#hero{position:relative;display:grid;grid-template-columns:1fr;min-height:100svh;background:var(--cement)}
#hero .hl{background:var(--cement);padding:116px var(--pr) 44px var(--pl);display:flex;flex-direction:column;justify-content:center}
#hero .k{margin:0 0 22px;font:600 .74rem/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--tx2)}
#hero h1{margin:0;font:500 clamp(1.7rem,7.6vw,3rem)/1.18 var(--serif);letter-spacing:.05em;text-transform:uppercase}
#hero h1 span{display:block}
#hero h1 .g{color:var(--grey)}
#hero .sub{margin:26px 0 30px;font:400 1.1rem/1.55 var(--sans);max-width:27ch;color:var(--tx2)}
#hero .cta{display:flex;flex-wrap:wrap;gap:12px}
#hero .hr2{position:relative;min-height:62svh}
#hero .hr2 .slot{position:absolute;inset:0}
#hero .tagr{position:absolute;z-index:3;right:var(--pr);bottom:30px;max-width:190px;font:600 .74rem/1.75 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
#hero .tagr hr{width:100%;border:0;border-top:1px solid rgba(241,238,232,.6);margin:16px 0 14px}
.cue{display:none}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#hero .hl>*{opacity:0;animation:rise .9s var(--ease) forwards}
#hero .hl>*:nth-child(2){animation-delay:.12s}#hero .hl>*:nth-child(3){animation-delay:.26s}#hero .hl>*:nth-child(4){animation-delay:.4s}
@media(min-width:1000px){
  #hero{grid-template-columns:45fr 55fr;min-height:max(660px,100svh)}
  #hero .hl{padding:130px 3vw 100px var(--pl)}
  #hero h1{font-size:clamp(1.9rem,3.35vw,3.9rem)}
  #hero .hr2{min-height:0}
  #hero .tagr{bottom:12%;right:5%}
  .cue{display:flex;align-items:flex-end;gap:12px;position:absolute;left:3.2vw;bottom:5vh;z-index:4;font:600 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
  .cue i{display:block;width:1px;height:92px;background:var(--tx2);position:relative}
  .cue i::after{content:"";position:absolute;bottom:-1px;left:-3px;width:7px;height:7px;border-right:1px solid var(--tx2);border-bottom:1px solid var(--tx2);transform:rotate(45deg)}
}

/* ---------- 02 estudio (primera banda) ---------- */
#estudio{position:relative;background:var(--cream)}
.est{display:grid;grid-template-columns:1fr}
.est .pa{position:relative;aspect-ratio:5/4}
.est .pa .slot{position:absolute;inset:0}
.est .inset{position:absolute;z-index:2;right:0;bottom:0;width:46%;height:32%;border:7px solid var(--cream);border-right:0;border-bottom:0}
.est .inset .slot{position:absolute;inset:0}
.est .inset .lab{display:none}
.est .m{padding:58px var(--pr) 60px var(--pl);display:flex;flex-direction:column;justify-content:center}
.kick{display:flex;align-items:center;gap:14px;margin:0 0 26px;font:600 .74rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.kick i{display:block;width:40px;height:1px;background:currentColor;opacity:.6}
.est h2{margin:0 0 22px;font:500 clamp(1.3rem,5.4vw,1.8rem)/1.25 var(--serif);letter-spacing:.06em;text-transform:uppercase}
.est h2 em{font-style:normal;font-weight:600;color:var(--grey)}
.est .m p{margin:0;font:400 1.05rem/1.7 var(--sans);color:var(--tx3);max-width:34ch}
.est .pb{aspect-ratio:3/4;margin:0 var(--pr) -56px var(--pl);position:relative;z-index:4}
.est .pb .slot{position:absolute;inset:0}
.est .idx{display:none}
@media(max-width:999px){.est .pa .lab{bottom:auto;top:30px}}
@media(min-width:1000px){
  .est{grid-template-columns:35.1fr 26.9fr 21.1fr 16.9fr;height:clamp(540px,41vw,700px)}
  .est .pa{aspect-ratio:auto}
  .est .m{padding:72px 1.8vw 0 2.6vw;margin-top:-72px;height:calc(100% + 72px);position:relative;z-index:3;background:var(--cream)}
  .est h2{font-size:clamp(2rem,2.7vw,3.3rem);margin-bottom:24px}
  .est .pb{aspect-ratio:auto;margin:1.4% 0 calc(-1*clamp(60px,6.5vw,100px)) 0;z-index:4}
  .est .idx{display:flex;flex-direction:column;justify-content:center;padding:0 var(--pr) 0 2.4vw}
  .est .idx a{display:block;padding:clamp(16px,2vw,28px) 0;border-bottom:1px solid var(--line);text-decoration:none;font:600 .78rem/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--tx5)}
  .est .idx a b{display:block;font-weight:600;font-size:.7rem;letter-spacing:.2em;margin-bottom:4px}
  .est .idx a.on{color:var(--ink);box-shadow:-14px 0 0 -13px var(--ink)}
  .est .idx a:hover{color:var(--ink)}
}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* continuidad: las fotos se desplazan apenas al scrollear (solo donde el navegador lo soporta) */
@supports (animation-timeline:view()){
  @keyframes drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
  .slot .fill{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #hero .hl>*{opacity:1;animation:none}.js .rv{opacity:1;transform:none;transition:none}.slot .fill{animation:none}.btn{transition:none}
}

/* ---------- resto del sitio (mismo lenguaje: superficies lisas, serif grande) ---------- */
.sec{padding:clamp(84px,11vw,150px) var(--pr) clamp(84px,11vw,150px) var(--pl)}
.wrap{max-width:1240px;margin:0 auto}
h2.t{margin:0;font:500 clamp(1.6rem,5.2vw,3.1rem)/1.18 var(--serif);letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
h2.t em{font-style:normal;font-weight:500;color:var(--grey)}
.lead{margin:22px 0 0;font:400 1.1rem/1.6 var(--sans);max-width:34ch}
.note{margin:22px 0 0;font:500 .8rem/1.6 var(--sans);letter-spacing:.06em;color:var(--muted);max-width:60ch}
.kick.l{color:#bdb8ae}

/* equipo (oscuro) */
#equipo{background:var(--ink);color:var(--cream)}
#equipo .wrap{display:grid;gap:44px;align-items:center}
#equipo .lead{color:#cfcac1}
.cards{display:grid;gap:14px}
.card{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:var(--graphite);overflow:hidden;text-align:left;color:var(--cream)}
.card .slot{position:absolute;inset:0}
.card .nm{position:absolute;z-index:3;left:clamp(20px,2vw,28px);right:20px;bottom:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px}
.card .nm b{font:600 1.05rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.card .nm u{font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-underline-offset:6px}
.card .slot .lab{display:none}
.card:hover .slot .fill{filter:brightness(1.1)}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr);align-items:start}.cards .card:nth-child(2){margin-top:56px}}
@media(min-width:1000px){#equipo .wrap{grid-template-columns:3.3fr 8.7fr;gap:5vw}}

/* trabajos */
#trabajos{background:var(--cream);padding-inline:0;padding-bottom:clamp(96px,11vw,160px)}
#trabajos .hd{padding:0 var(--pr) 0 var(--pl);max-width:1240px;margin:0 auto}
.strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin-top:clamp(48px,6vw,84px);gap:clamp(16px,2.2vw,32px);padding:0 var(--pr) 20px calc(max(0px,(100vw - 1240px)/2) + var(--pl));scroll-padding-left:calc(max(0px,(100vw - 1240px)/2) + var(--pl));-webkit-overflow-scrolling:touch}
.strip .slot{flex:0 0 auto;height:clamp(300px,34vw,480px);scroll-snap-align:start}
.strip .w1{width:min(78vw,520px)}.strip .w2{width:min(54vw,330px);margin-top:44px;height:calc(clamp(300px,34vw,480px) - 44px)}.strip .w3{width:min(66vw,420px)}.strip .w4{width:min(48vw,300px);margin-top:44px;height:calc(clamp(300px,34vw,480px) - 44px)}
.strip .slot.t2,.strip .slot.t2 .fill{background:var(--cement-d)}
.strip .slot.t3,.strip .slot.t3 .fill{background:#DDD9D1}
.strip .more{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:0 var(--pr) 0 clamp(8px,2vw,28px);text-decoration:none;font:600 .78rem/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.strip .more i{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;font-style:normal;font-size:1.2rem}

/* servicios */
#servicios{background:var(--cement)}
.srv{margin-top:48px;border-top:1px solid var(--ink)}
.srv button{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:baseline;text-align:left;padding:28px 0;background:none;border:0;border-bottom:1px solid var(--ink);transition:padding .35s var(--ease)}
.srv button:hover,.srv button:focus-visible{padding-left:16px}
.srv .n{font:500 clamp(1.05rem,3.6vw,1.7rem)/1.25 var(--serif);letter-spacing:.07em;text-transform:uppercase}
.srv .p{font:600 clamp(1.1rem,3.8vw,1.6rem)/1.2 var(--sans);text-align:right}
.srv .m{grid-column:1/3;display:flex;justify-content:space-between;font:600 .76rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx4)}
.srv .m u{text-underline-offset:5px}

/* experiencia */
#experiencias{background:var(--cream)}
.rev{display:grid;gap:16px;margin-top:clamp(40px,5vw,64px)}
.rev blockquote{margin:0;padding:clamp(26px,3vw,40px);border:1px solid var(--line2);display:flex;flex-direction:column;gap:22px;background:transparent}
.stars{font:400 1rem/1 var(--sans);letter-spacing:.24em;color:var(--ink)}
.rev blockquote p{margin:0;font:400 clamp(1.05rem,1.5vw,1.25rem)/1.65 var(--sans);color:var(--tx2);text-wrap:pretty}
.rev cite{margin-top:auto;font:600 .78rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.rev cite small{display:block;margin-top:6px;font:500 .74rem/1.4 var(--sans);letter-spacing:.12em;color:var(--muted);text-transform:none}
@media(min-width:900px){.rev{grid-template-columns:repeat(2,1fr);gap:24px 28px}.rev blockquote:nth-child(even){margin-top:48px}}
/* reservas (oscuro) */
#reservas{background:var(--ink);color:var(--cream)}
#reservas .lead{color:#cfcac1}
/* reservas (motor genérico, solo variables del tema) */
#reservas{background:var(--ink);color:var(--cream)}
#reservas .kick{color:#bdb8ae}
.vsb{margin-top:40px;max-width:760px;border:1px solid rgba(244,244,242,.28)}
.vsb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(244,244,242,.28);font:600 .66rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.vsb-bar{height:2px;background:rgba(244,244,242,.2)}.vsb-bar i{display:block;height:100%;width:0;background:var(--cream);transition:width .5s var(--ease)}
.vsb-body{padding:22px 18px 26px;min-height:340px}

.vsb-list{display:grid;gap:8px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:12px 16px;text-align:left;background:transparent;border:1px solid rgba(244,244,242,.4);color:inherit;font:500 .95rem/1.3 var(--sans);transition:background .2s,color .2s}
.opt small{font:500 .68rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.75;text-align:right}
.opt:hover{border-color:var(--cream)}
.opt[aria-pressed="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.opt[disabled]{opacity:.32;text-decoration:line-through;cursor:not-allowed}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.days .opt{flex:0 0 auto;flex-direction:column;justify-content:center;min-width:68px;min-height:76px;padding:8px;scroll-snap-align:start;text-align:center}
.days .opt b{font:600 1.25rem/1 var(--sans)}.days .opt small{text-align:center}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:560px){.slots{grid-template-columns:repeat(4,1fr)}}
.slots .opt{justify-content:center;min-height:50px}
.fld{display:grid;gap:6px;margin-bottom:14px}
.fld label{font:600 .66rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.fld input{min-height:52px;padding:0 14px;background:transparent;border:1px solid rgba(244,244,242,.5);border-radius:0;color:var(--cream)}
.fld input[aria-invalid="true"]{border-color:#ff9d8f}
.fld .er{min-height:1em;font:500 .74rem/1.3 var(--sans);color:#ffb4a8}
.sum{display:grid;gap:0;margin-bottom:20px;border-top:1px solid rgba(244,244,242,.3)}
.sum div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(244,244,242,.3);font:500 .92rem/1.3 var(--sans)}
.sum span:first-child{font:600 .66rem/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.vsb-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.vsb .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}.vsb .btn:hover{background:transparent;color:var(--cream)}
.vsb .btn.ghost{background:transparent;color:var(--cream);border-color:rgba(244,244,242,.5)}.vsb .btn.ghost:hover{background:var(--cream);color:var(--ink)}
.vsb-demo{margin:16px 0 0;font:500 .72rem/1.6 var(--sans);letter-spacing:.06em;color:#bdb8ae;max-width:60ch}
.done{padding:6px 0}.tag{display:inline-block;font:600 .6rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;padding:4px 7px;margin-bottom:16px;opacity:.8}


.vsb h3{margin:0 0 18px;font:500 clamp(1.1rem,3.8vw,1.5rem)/1.3 var(--serif);letter-spacing:.07em;text-transform:uppercase}
.opt{font-size:1rem}.opt small{font-size:.74rem}
.vsb-top{font-size:.74rem}.fld label{font-size:.74rem}.sum span:first-child{font-size:.74rem}.vsb-demo{font-size:.8rem}

/* ubicación */
#ubicacion{background:var(--cement)}
#ubicacion .wrap{display:grid;gap:56px}
.facts{display:grid;border-top:1px solid var(--ink);margin-top:36px}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--ink);font:500 1.05rem/1.4 var(--sans)}
.facts span:first-child{font:600 .74rem/1.9 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tx4)}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mapslot{position:relative;overflow:hidden;background:#2B2B29}
.msvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.msvg .bg{fill:#2B2B29}.msvg .zn{fill:#32312e}.msvg .rd{fill:#454440}.msvg .mj{fill:#5d5a54}.msvg .am{fill:none;stroke:#8d897f;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.msvg .sl{font:600 12.5px/1 var(--sans);letter-spacing:.13em;fill:#a39f95;paint-order:stroke;stroke:#2B2B29;stroke-width:4.5px;stroke-linejoin:round}.msvg .am-l{fill:#d9d5cc;font-size:14px}
.msvg .pd{fill:#F1EEE8}.msvg .pc{fill:#111}.msvg .pr{fill:none;stroke:#F1EEE8;stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite}.msvg .p2{animation-delay:1.3s}
@keyframes ping{from{transform:scale(.7);opacity:.7}to{transform:scale(3);opacity:0}}
.mpin{position:absolute;z-index:2;left:clamp(20px,3vw,36px);top:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:6px;padding:16px 20px;background:var(--cream);color:var(--ink)}
.mpin b{font:600 .8rem/1 var(--sans);letter-spacing:.2em}.mpin span{font:500 .8rem/1.4 var(--sans);color:var(--muted)}
.mgo{position:absolute;z-index:2;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,36px);display:inline-flex;gap:10px;align-items:center;min-height:46px;padding:0 20px;background:var(--ink);color:var(--cream);border:1px solid rgba(241,238,232,.4);font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.mgo:hover,.mgo:focus-visible{background:var(--cream);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.msvg .pr{animation:none;opacity:.5}}
.mapslot{min-height:460px}


.facts{margin-top:0}
.uh{margin:0 0 16px;font:600 .76rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tx4)}
.ugrid{display:grid;gap:36px}.ugrid .links{margin-top:0}
.umedia{display:grid;gap:14px}.ufac{min-height:440px}.umedia .mapslot{min-height:440px}
@media(min-width:760px){.ugrid{grid-template-columns:1fr 1fr;gap:5vw}.ugrid .links{grid-column:1/3}}
@media(min-width:1000px){.umedia{grid-template-columns:4fr 8fr;gap:16px;height:clamp(500px,40vw,600px)}.ufac,.umedia .mapslot{min-height:0}}

/* luces hexagonales (eco del techo del local) */
#equipo,#reservas{position:relative;overflow:hidden}
#equipo .wrap,#reservas .wrap{position:relative;z-index:1}
.hexc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s ease}
.hexc.on{opacity:1}
#equipo .hexc{-webkit-mask-image:radial-gradient(ellipse 80% 90% at 100% 0%,#000 0,rgba(0,0,0,.0) 78%);mask-image:radial-gradient(ellipse 80% 90% at 100% 0%,#000 0,rgba(0,0,0,0) 78%)}
#reservas .hexc{-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,0) 62%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,0) 62%)}
footer.f{background:var(--ink);color:#bdb8ae;padding:56px var(--pr) 120px var(--pl)}
footer.f .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end;font:400 .9rem/1.7 var(--sans)}
footer.f img{height:42px;width:auto;margin-bottom:14px}
.pill{position:fixed;z-index:35;left:50%;transform:translate(-50%,120%);bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:54px;padding:0 28px;background:var(--ink);color:var(--cream);border:1px solid rgba(241,238,232,.45);font:600 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.pill.on{transform:translate(-50%,0)}
@media(min-width:1000px){.pill{display:none}}

/* ---------- modo noche / día + conexión entre secciones ---------- */
:root{--cream-t:var(--cream);--cement-t:var(--cement);--dk-t:#111;--tx2:#2c2b28;--tx3:#3d3b37;--tx4:#3b3a36;--tx5:#77736b;--line:rgba(17,17,17,.2);--line2:rgba(17,17,17,.35);--hdbg:rgba(241,238,232,.95);--hdsh:rgba(17,17,17,.12)}
:root[data-mode="night"]{--ink:#F1EEE8;--cream:#151514;--cement:#1d1d1b;--cement-d:#2a2a27;--muted:#a39f99;--grey:#9b968c;--dk-t:#0a0a09;--tx2:#d9d5cc;--tx3:#cfcac1;--tx4:#bdb8ae;--tx5:#8e8a82;--line:rgba(241,238,232,.18);--line2:rgba(241,238,232,.3);--hdbg:rgba(21,21,20,.92);--hdsh:rgba(241,238,232,.1);color-scheme:dark}
#equipo,#reservas,footer.f,.menu{--ink:#111;--cream:#F1EEE8;--muted:#bdb8ae}
:root[data-mode="night"] #equipo,:root[data-mode="night"] #reservas,:root[data-mode="night"] footer.f,:root[data-mode="night"] .menu{--ink:#0a0a09}
:root[data-mode="night"] header.top .lg img{filter:invert(1)}
.tg{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;background:none;border:0;color:var(--ink)}
.tg svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tg .sun{display:none}
:root[data-mode="night"] .tg .sun{display:block}:root[data-mode="night"] .tg .moon{display:none}
@media(min-width:1000px){.tg{color:var(--cream)}header.top.stuck .tg{color:var(--ink)}}
:root[data-mode="night"] header.top .hb,:root[data-mode="night"] header.top .tg{color:var(--ink)}
body,#hero,#hero .hl,#estudio,.est .m,.sec,footer.f{transition:background-color .45s,color .45s}
@media(prefers-reduced-motion:reduce){body,#hero,#hero .hl,#estudio,.est .m,.sec,footer.f{transition:none}}

/* equipo: las tarjetas cruzan el borde hacia trabajos; la foto vertical del estudio cruza hacia equipo */
#equipo{overflow:visible;z-index:3;padding-bottom:clamp(24px,3vw,48px)}
.cards{transform:translateY(clamp(60px,8vw,120px))}
#trabajos{padding-top:calc(clamp(84px,11vw,150px) + clamp(60px,8vw,120px))}
@media(max-width:999px){#equipo{padding-top:calc(clamp(84px,11vw,150px) + 48px)}}
/* degradados de unión entre superficies */
#servicios,#experiencias,#ubicacion{position:relative}
#servicios .wrap,#experiencias .wrap,#ubicacion .wrap{position:relative;z-index:1}
#servicios::before,#experiencias::before,#reservas::before,#ubicacion::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(140px,16vw,240px);pointer-events:none;z-index:0}
#servicios::before{background:linear-gradient(var(--cream-t),transparent)}
#experiencias::before{background:linear-gradient(var(--cement-t),transparent)}
#reservas::before{background:linear-gradient(var(--cream-t),transparent)}
#ubicacion::before{background:linear-gradient(var(--dk-t),transparent)}
/* ubicación: el bloque de fachada y mapa cruza hacia el pie */
#ubicacion{z-index:2;padding-bottom:clamp(24px,3vw,48px)}
.umedia{transform:translateY(clamp(70px,8vw,120px))}
footer.f{padding-top:calc(56px + clamp(70px,8vw,120px))}
.ufac .fill img{object-position:50% 35%}
@media(max-width:999px){
  .umedia{gap:0}
  .ufac{min-height:0;aspect-ratio:4/3;width:86%}
  .umedia .mapslot{min-height:400px;width:94%;margin:-52px 0 0 auto;z-index:2;box-shadow:0 18px 40px rgba(0,0,0,.3)}
}

/* ---------- ajustes: menos aire muerto, botones claros sobre fondo oscuro, ubicación ordenada ---------- */
.sec{padding:clamp(56px,7vw,104px) var(--pr) clamp(56px,7vw,104px) var(--pl)}
#equipo{padding-bottom:clamp(24px,3vw,44px)}
#equipo .wrap{gap:32px}
.cards{transform:translateY(clamp(48px,6vw,90px))}
#trabajos{padding-top:calc(clamp(56px,7vw,104px) + clamp(48px,6vw,90px));padding-bottom:clamp(56px,7vw,100px)}
.strip{margin-top:clamp(28px,3.4vw,48px);padding-bottom:8px}
.srv{margin-top:32px}.srv button{padding:22px 0}
.rev{margin-top:clamp(28px,3.4vw,44px)}
.vsb{margin-top:28px}
#ubicacion{padding-bottom:clamp(20px,2.4vw,36px)}
#ubicacion .wrap{gap:clamp(28px,3.4vw,44px)}
.umedia{transform:translateY(clamp(48px,6vw,90px))}
footer.f{padding-top:calc(48px + clamp(48px,6vw,90px));padding-bottom:104px}
#servicios::before,#experiencias::before{display:none}
#reservas::before,#ubicacion::before{height:clamp(100px,12vw,180px)}
@media(max-width:999px){#equipo{padding-top:calc(clamp(56px,7vw,104px) + 44px)}}

/* botones del motor de reservas: claros para que no se pierdan en el fondo negro */
.opt{background:#F1EEE8;color:#111;border:1px solid #F1EEE8}
.opt:hover{background:#fff;border-color:#fff}
.opt[aria-pressed="true"]{background:#0a0a09;color:#F1EEE8;border-color:#F1EEE8;box-shadow:inset 0 0 0 2px #F1EEE8}
.opt[disabled]{opacity:.38}
.opt small{opacity:.7}
.fld input{background:#F1EEE8;color:#111;border-color:#F1EEE8}
.fld input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fld label{color:#F1EEE8}

/* ubicación: horarios como panel, contacto como botones (sin renglones ni dirección repetida) */
.uinfo{display:grid;gap:20px}
.uh{margin:0 0 18px;font:600 .74rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--tx4)}
.hrs{background:var(--ink);color:var(--cream);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}.hrs .uh{margin:0}
.hrs .uh{color:#bdb8ae}
.hr3{display:grid;gap:22px}
.hr3 small{display:block;margin-bottom:8px;font:600 .72rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#bdb8ae}
.hr3 b{display:block;white-space:nowrap;font:500 clamp(1.3rem,2.1vw,1.9rem)/1.15 var(--sans);letter-spacing:.01em}
.hr3 .off b{color:#bdb8ae}
.ctl{display:grid;gap:10px;margin-bottom:22px}
.ct{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:16px 20px;border:1px solid var(--ink);text-decoration:none;color:var(--ink);transition:background .25s,color .25s}
a.ct:hover{background:var(--ink);color:var(--cream)}
.ct small{grid-column:1;font:600 .7rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx4)}
a.ct:hover small{color:inherit}
.ct b{grid-column:1;font:500 1.15rem/1.3 var(--sans)}
.ct i{grid-column:2;grid-row:1/3;font-style:normal;font-size:1.2rem}
.ct.pend{border-style:dashed;opacity:.75}
@media(min-width:760px){.hr3{grid-template-columns:repeat(3,1fr);gap:0}.hr3>div{padding:0 22px;border-left:1px solid rgba(241,238,232,.22)}.hr3>div:first-child{padding-left:0;border-left:0}}
@media(min-width:1000px){.uinfo{grid-template-columns:7fr 5fr;gap:16px;align-items:stretch}}
.uinfo .btn{width:100%}
/* celular: solo el mapa, que continúa directo al pie */
@media(max-width:999px){
  .ufac{display:none}
  .umedia{display:block}
  .umedia .mapslot{width:100%;margin:0;min-height:400px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
  /* estudio: el panel de texto monta sobre la foto, como en pantalla grande */
  .est .m{margin:-64px var(--pr) 0 var(--pl);padding:38px 24px 42px;position:relative;z-index:3;background:var(--cream)}
  .est .inset{bottom:64px}
  .est .pb{margin-top:20px}
}
/* texto sobre fotos: siempre claro, también en modo noche */
#hero .tagr{color:#F1EEE8}

/* ---------- v15 ---------- */
#reservas::before,#ubicacion::before{display:none}
/* mapa: estilo Google, claro de día y oscuro de noche */
.mapslot{--mb:#f7f6f6;--mr:#d9e1e7;--mm:#cbd6df;--mz:#f6ecd9;--ml:#5b6066;--mt:#111;--mdot:#F1EEE8;background:var(--mb)}
:root[data-mode="night"] .mapslot{--mb:#232321;--mr:#3a3a37;--mm:#484844;--mz:#2a2927;--ml:#a39f95;--mt:#F1EEE8;--mdot:#111}
.msvg .bg{fill:var(--mb)}.msvg .zn{fill:var(--mz)}.msvg .rd{fill:var(--mr)}.msvg .mj{fill:var(--mm)}
.msvg .sl{font:500 12.5px/1 var(--sans);letter-spacing:.02em;fill:var(--ml);paint-order:stroke;stroke:var(--mb);stroke-width:4px;stroke-linejoin:round}
.msvg .pn{fill:var(--mt)}.msvg .pdt{fill:var(--mdot)}
.msvg .pt{font:700 14px/1 var(--sans);fill:var(--mt);paint-order:stroke;stroke:var(--mb);stroke-width:5px;stroke-linejoin:round}
.msvg .pr{fill:none;stroke:var(--mt);stroke-width:1.5;opacity:.5;transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite}
.mgo{background:var(--mt);color:var(--mdot);border-color:var(--mt)}
.mgo:hover,.mgo:focus-visible{background:var(--mdot);color:var(--mt)}
/* equipo: tarjetas flotantes; en celular se deslizan hacia el costado */
.swipe{display:none}
@media(min-width:700px){
  @keyframes bob{50%{translate:0 -9px}}
  .card{box-shadow:0 22px 44px rgba(0,0,0,.5);animation:bob 7s ease-in-out infinite}
  .card:nth-child(2){animation-delay:-2.3s}.card:nth-child(3){animation-delay:-4.6s}
  .card:hover{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){.card{animation:none!important}}
@media(max-width:699px){
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(-1*var(--pr));padding-right:var(--pr);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 min(72vw,300px);width:auto;scroll-snap-align:start}
  .swipe{display:inline-flex;margin-top:22px;gap:10px;font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#bdb8ae}
}

/* ---------- v16: rieles (trabajos, reseñas) con foco, progreso, flechas y arrastre ---------- */
.railwrap{position:relative}
.rail{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:10px calc(50% - var(--cw)/2);scroll-padding-inline:calc(50% - var(--cw)/2);cursor:grab;outline-offset:-2px;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail.drag *{pointer-events:none}
.rc{--cw:clamp(240px,26vw,340px);flex:0 0 var(--cw);width:var(--cw);aspect-ratio:3/4;position:relative;overflow:hidden;margin:0;scroll-snap-align:center;background:var(--graphite);transform:scale(calc(1 - var(--d,0)*.07));opacity:calc(1 - var(--d,0)*.5);will-change:transform,opacity}
#rt{--cw:clamp(240px,26vw,340px)}
.rc img{position:absolute;top:0;left:-9%;width:118%;height:100%;max-width:none;object-fit:cover;transform:translateX(calc(var(--s,0)*-6%));will-change:transform;user-select:none;-webkit-user-drag:none}
.rc.more{display:flex;flex-direction:column;justify-content:space-between;padding:28px;background:var(--ink);color:var(--cream);text-decoration:none;font:500 clamp(1.2rem,2vw,1.6rem)/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.rc.more i{font-style:normal;font-size:2rem}
.rctl{display:flex;align-items:center;gap:16px;max-width:1240px;margin:clamp(22px,2.6vw,34px) auto 0;padding:0 var(--pr) 0 var(--pl)}
.rbar{flex:1;height:2px;background:var(--line2);position:relative;overflow:hidden}
.rbar i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(.15);transition:transform .25s var(--ease)}
.rcnt{font:600 .74rem/1 var(--sans);letter-spacing:.2em;color:var(--tx4);min-width:5.5em;text-align:right}
.rbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.rbtn:hover:not(:disabled){background:var(--ink);color:var(--cream)}
.rbtn:disabled{opacity:.3;cursor:default}
/* reseñas */
.rev.rail{padding-inline:calc(50% - min(38vw,170px));--cw:min(76vw,340px);margin:0}
.rev.rail blockquote{flex:0 0 var(--cw);width:var(--cw);scroll-snap-align:center;margin:0;min-height:300px;transform:scale(calc(1 - var(--d,0)*.06));opacity:calc(1 - var(--d,0)*.55)}
.revwrap{margin-top:clamp(24px,3vw,40px)}
@media(min-width:900px){
  .rev.rail{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 28px;overflow:visible;padding:0;cursor:auto;scroll-snap-type:none}
  .rev.rail blockquote{width:auto;transform:none;opacity:1}
  .revwrap .rctl{display:none}
}
@media(prefers-reduced-motion:reduce){.rc,.rev.rail blockquote{transform:none!important;opacity:1!important}.rc img{transform:none!important}}

/* ---------- v17 ---------- */
/* servicios: jerarquía */
.srv{border:0;margin-top:clamp(28px,3.4vw,48px);display:grid;gap:14px}
.srv button{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ix p" "n n" "tg tg" "m m";gap:6px 18px;padding:24px;border:1px solid var(--ink);background:transparent;position:relative;overflow:hidden;transition:background .3s var(--ease),color .3s var(--ease),transform .35s var(--ease)}
.srv button:hover,.srv button:focus-visible{padding:24px;transform:translateY(-3px)}
.srv .ix{grid-area:ix;font:600 .74rem/1 var(--sans);letter-spacing:.24em;color:var(--tx4)}
.srv .n{grid-area:n}.srv .p{grid-area:p}.srv .m{grid-area:m;margin-top:14px;padding-top:14px;border-top:1px solid currentColor;border-top-color:rgba(127,127,127,.35)}
.srv .tg{grid-area:tg;font:600 .7rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tx4)}
.srv .m u{text-decoration:none;font-weight:700}.srv .m u b{display:inline-block;transition:transform .3s var(--ease)}
.srv button:hover .m u b{transform:translateX(6px)}
.srv button.big{background:var(--ink);color:var(--cream);padding:clamp(26px,3vw,40px)}
.srv button.big .ix,.srv button.big .m{color:#bdb8ae}
.srv button.big .n{font-size:clamp(1.9rem,5.6vw,3.4rem);margin-top:clamp(22px,6vw,70px)}
.srv button.big .p{font-size:clamp(1.5rem,4vw,2.6rem);color:var(--cream)}
.srv button.sm{border-style:dashed;border-color:var(--tx4)}
.srv button.sm .p{color:var(--tx4)}
.srv button.sm:hover{background:var(--ink);color:var(--cream);border-style:solid}
.srv button.sm:hover .ix,.srv button.sm:hover .tg,.srv button.sm:hover .p{color:#bdb8ae}
@media(min-width:900px){
  .srv{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr}
  .srv button.big{grid-row:1/3;grid-template-rows:auto 1fr auto auto}
  .srv button.big .n{align-self:end}
}
/* opciones del booking */
.srv .tg{justify-self:start;text-align:left}.srv .m u{white-space:nowrap}.srv .m{gap:12px;letter-spacing:.14em}
.opt .on{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.opt .on b{font:500 1rem/1.25 var(--sans)}
.opt .on i{font:500 .68rem/1.3 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.opt .op{font:600 1.05rem/1 var(--sans);white-space:nowrap}
.vsb-list .opt{min-height:68px}
/* estudio: más arriba, sin botón */
.est .m{padding-bottom:34px}
@media(max-width:999px){.est .pb{margin-top:10px}.est .m{padding:30px 24px 32px}}
/* hero: imagen con entrada + más presencia en celular */
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
#hero .hr2 .slot img{animation:kb 2.8s var(--ease) both;transform-origin:60% 40%}
@media(max-width:899px){#hero .hr2{min-height:74svh}}
@media(prefers-reduced-motion:reduce){#hero .hr2 .slot img{animation:none}}
/* barberos / rieles: sin parallax interno (evita el salto al entrar) */
.card .slot .fill{animation:none!important;inset:0}
.cards{scroll-padding-left:0;overscroll-behavior-x:contain}
/* indicador de rieles: segmentos */
.rctl{justify-content:center;gap:0;padding:0}
.rdots{display:flex;gap:4px;align-items:center}
.rdots button{border:0;background:none;padding:14px 3px;cursor:pointer;display:block}
.rdots button i{display:block;width:14px;height:2px;background:var(--line2);transition:width .45s var(--ease),background .3s}
.rdots button.on i{width:44px;background:var(--ink)}
.rdots button:hover i{background:var(--tx4)}
.rdots button.on:hover i{background:var(--ink)}
/* horarios */
.hrs{justify-content:flex-start;gap:clamp(20px,2.4vw,32px)}
.st{display:flex;align-items:center;gap:12px;font:600 .8rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.st i{width:9px;height:9px;border-radius:50%;background:#7fbf8a;box-shadow:0 0 0 0 rgba(127,191,138,.6);animation:ping 2.2s ease-out infinite}
.st.off i{background:#a9a59d;animation:none}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px rgba(127,191,138,0)}}
.st small{display:block;margin-top:6px;font:500 .78rem/1.4 var(--sans);letter-spacing:.06em;text-transform:none;color:#bdb8ae}
.hr3,.hr3>div{display:block}
.hr3{display:grid;grid-template-columns:1fr!important;gap:0!important}
.hr3>div{display:flex!important;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0!important;border-left:0!important;border-top:1px solid rgba(241,238,232,.2)}
.hr3 small{margin:0}
.hr3 b{font-size:clamp(1.1rem,1.7vw,1.5rem)}
@media(prefers-reduced-motion:reduce){.st i{animation:none}}

/* ---------- v18 ---------- */
#hero .hr2::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(10,10,9,.78),rgba(10,10,9,.38) 55%,transparent);z-index:2;pointer-events:none}
#hero .tagr{max-width:none;z-index:3;text-align:left;left:var(--pr);right:auto;bottom:clamp(26px,4vw,48px)}
#hero .tagr p{margin:0;font:500 clamp(1.15rem,4.6vw,1.6rem)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.45)}
#hero .tagr hr{width:56px;margin:18px 0 14px;border-top:1px solid rgba(241,238,232,.85)}
#hero .tagr span{font:600 .74rem/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;opacity:.9}
@media(min-width:900px){#hero .tagr{left:auto;right:5%;bottom:11%;text-align:left}#hero .tagr p{font-size:clamp(1.3rem,1.9vw,2rem)}}
#hero .cta .btn.line{background:transparent}
/* riel de cortes: arranca pegado a la izquierda */
#rt .rail{padding-left:calc(max(0px,(100vw - 1240px)/2) + var(--pl));padding-right:calc(50% - var(--cw)/2);scroll-padding-inline:calc(max(0px,(100vw - 1240px)/2) + var(--pl)) calc(50% - var(--cw)/2)}
#rt .rc:first-child{scroll-snap-align:start}
/* reseñas interactivas */
.rev blockquote{transition:background .4s var(--ease),color .4s var(--ease),border-color .4s,transform .45s var(--ease)}
.rev blockquote p,.rev blockquote cite,.rev blockquote small,.rev .stars{transition:color .4s var(--ease)}
@media(hover:hover){.rev blockquote:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-6px)}
  .rev blockquote:hover p,.rev blockquote:hover cite,.rev blockquote:hover .stars{color:var(--cream)}
  .rev blockquote:hover small{color:#bdb8ae}}
.rev blockquote:active{background:var(--ink);border-color:var(--ink)}
.rev blockquote:active p,.rev blockquote:active cite,.rev blockquote:active .stars{color:var(--cream)}
.rev blockquote:active small{color:#bdb8ae}

/* v19: la foto de la silla ya no invade el equipo */
.est .pb{margin-bottom:0!important}
@media(min-width:1000px){.est .pb{margin:1.4% 0 0 0!important}}

/* v20: barberos en línea, sin movimiento constante; crecen al pasar */
@media(min-width:700px){
  .cards .card:nth-child(2){margin-top:0}
  .card{animation:none!important;box-shadow:0 22px 44px rgba(0,0,0,.5);transition:transform .55s var(--ease),filter .45s var(--ease),box-shadow .55s var(--ease)}
  .cards:hover .card{filter:brightness(.6)}
  .cards .card:hover,.cards .card:focus-visible{filter:none;transform:scale(1.07);z-index:5;box-shadow:0 34px 64px rgba(0,0,0,.65)}
}
/* hexágonos: halo detrás de las tarjetas, sin bordes duros */
#equipo .hexc{-webkit-mask-image:radial-gradient(ellipse 52% 62% at 68% 56%,#000 0,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 52% 62% at 68% 56%,#000 0,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%)}
@media(max-width:699px){#equipo .hexc{-webkit-mask-image:radial-gradient(ellipse 90% 45% at 60% 62%,#000 0,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 90% 45% at 60% 62%,#000 0,rgba(0,0,0,0) 100%)}}

/* v21: mapa con calles reales (OpenStreetMap) */
.mapslot{--mb:#eceae5;--mr:#fff;--mc:#d8d4cb;--mm:#fff;--mmc:#c9c4b8;--mk:#dfe6d3}
:root[data-mode="night"] .mapslot{--mb:#1b1b19;--mr:#2d2d2a;--mc:#3b3b37;--mm:#383835;--mmc:#4a4a45;--mk:#20231e}
.msvg .pk{fill:var(--mk)}
.msvg .rg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.msvg .rg.mn path{stroke:var(--mr);stroke-width:9;paint-order:stroke}
.msvg .rg.pd path{stroke:var(--mr);stroke-width:6}
.msvg .rg.mj path{stroke:var(--mm);stroke-width:15}
.msvg .rg.cas path{stroke:var(--mc);stroke-width:17}
.msvg .sl{font:500 11px/1 var(--sans);letter-spacing:.04em;fill:var(--ml);paint-order:stroke;stroke:none}
.msvg .sl.mj-l{font-size:12.5px;font-weight:600;fill:#4a4f55}
:root[data-mode="night"] .msvg .sl.mj-l{fill:#c5c1b7}
:root[data-mode="night"] .msvg .sl{fill:#8f8b82}
.msvg .pt{stroke:var(--mb)}
.mapslot .osm{position:absolute;right:8px;bottom:6px;z-index:3;font:500 .62rem/1 var(--sans);letter-spacing:.04em;color:var(--ml);opacity:.8;text-decoration:none}

/* ===== proyecto: piezas nuevas ===== */
[hidden]{display:none!important}
.srv.n1{grid-template-columns:1fr}.srv.n1 button.big{grid-row:auto}
@media(min-width:900px){.srv.n2{grid-template-rows:auto}.srv.n2 button.big{grid-row:auto}}
.fgrid{display:grid;gap:0 14px}@media(min-width:560px){.fgrid{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.er.big{margin:14px 0 0;font:600 .86rem/1.4 var(--sans);color:#ffb4a8}
.vsb-alt{margin:14px 0 0;font:500 .78rem/1.6 var(--sans);letter-spacing:.04em;color:#bdb8ae}
.vsb-alt a{color:var(--cream);text-underline-offset:4px}
.lead2{margin:0 0 18px;font:400 1.05rem/1.6 var(--sans)}
.done-actions{display:flex;flex-wrap:wrap;gap:10px}
.vsb .done-actions .btn{min-height:50px;padding:0 22px}
.vsb a.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(244,244,242,.5)}
.vsb a.btn.ghost:hover{background:var(--cream);color:var(--ink)}
/* hoja del barbero */
.sheet{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden}
.sheet.open{pointer-events:auto;visibility:visible}
.sheet-bg{position:absolute;inset:0;background:rgba(10,10,9,.55);opacity:0;transition:opacity .35s var(--ease);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet.open .sheet-bg{opacity:1}
.sheet-p{position:absolute;background:var(--cream);color:var(--ink);overflow:auto;transition:transform .5s var(--ease);box-shadow:0 -20px 60px rgba(0,0,0,.35);
  left:0;right:0;bottom:0;max-height:88svh;border-top:3px solid var(--ink);transform:translateY(102%);padding:26px max(22px,env(safe-area-inset-left)) max(30px,env(safe-area-inset-bottom))}
.sheet.open .sheet-p{transform:none}
@media(min-width:760px){.sheet-p{left:auto;top:0;bottom:0;right:0;width:min(480px,100%);max-height:none;border-top:0;border-left:3px solid var(--ink);transform:translateX(102%);padding:44px 40px 40px}}
.sheet-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border:1px solid var(--ink);background:transparent;border-radius:50%;font-size:.95rem}
.sheet-x:hover{background:var(--ink);color:var(--cream)}
.sh-head{display:flex;align-items:center;gap:18px;margin:0 0 26px;padding-right:50px}
.sh-ph{flex:0 0 72px;height:72px;border-radius:50%;background:var(--graphite) center/cover}
.sh-k{margin:0 0 4px;font:600 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--tx4)}
.sh-head h3{margin:0;font:500 1.7rem/1.1 var(--serif);letter-spacing:.07em;text-transform:uppercase}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.sh-chip{padding:10px 14px;border:1px solid var(--ink);background:transparent;font:600 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.sh-chip[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.sh-days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:none}
.sh-days::-webkit-scrollbar{display:none}
.sh-day{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0;border:1px solid var(--line2);background:transparent;scroll-snap-align:start;transition:background .25s,color .25s,border-color .25s}
.sh-day small{font:600 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.7}.sh-day b{font:600 1.25rem/1 var(--sans)}
.sh-day:hover:not(:disabled){border-color:var(--ink)}
.sh-day[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.sh-day:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.sh-sub{margin:10px 0 14px;font:600 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tx4)}
.sh-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sh-slot{min-height:50px;border:1px solid var(--ink);background:transparent;font:600 .95rem/1 var(--sans);letter-spacing:.04em;transition:background .2s,color .2s,transform .2s var(--ease)}
.sh-slot:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.sh-msg{margin:22px 0;font:500 .95rem/1.6 var(--sans);color:var(--tx3)}
.sh-wa{display:inline-block;margin-top:28px;font:600 .74rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);text-underline-offset:5px}
@media(prefers-reduced-motion:reduce){.sheet-p,.sheet-bg{transition:none}}

.sh-bio{margin:-8px 0 22px;font:400 .95rem/1.55 var(--sans);color:var(--tx3,#625E57)}

/* sin arrastre lateral en celular (iOS Safari ignora overflow-x solo en body) */
html{overflow-x:hidden;overscroll-behavior-x:none;max-width:100%}
body{max-width:100%;overscroll-behavior-x:none}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* ---------- correcciones de reserva (móvil, foco, toques) ---------- */
#reservas,.vsb{scroll-margin-top:calc(var(--hdh,76px) + 12px)}
.vsb h3,.vsb .fld input{scroll-margin-top:calc(var(--hdh,76px) + 16px);scroll-margin-bottom:96px}
.vsb-sumline{margin:-6px 0 18px;font:600 .74rem/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#bdb8ae}
.fld input[aria-invalid="true"]{border-color:#ff9d8f;box-shadow:inset 0 0 0 1px #ff9d8f}
.sh-chip[data-retry]{margin-top:10px}
.rdots button{position:relative;padding:20px 4px;min-height:44px}
.rdots button::before{content:"";position:absolute;inset:0 -2px}
@media(min-width:1000px){header.top:not(.stuck) .hb,header.top:not(.stuck) .tg{filter:drop-shadow(0 0 1px rgba(0,0,0,.75)) drop-shadow(0 1px 5px rgba(0,0,0,.5))}}