/* Ross Hair Studio · estilos */
/* Fuentes de la marca servidas desde el propio dominio (variables: un fichero por familia y estilo, solo latín) */
@font-face{font-family:"Cinzel"; src:url("../fonts/cinzel.woff2") format("woff2"); font-weight:500 600; font-style:normal; font-display:swap}
@font-face{font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight:500 600; font-style:normal; font-display:swap}
@font-face{font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap}
@font-face{font-family:"Jost"; src:url("../fonts/jost.woff2") format("woff2"); font-weight:300 500; font-style:normal; font-display:swap}
[hidden]{display:none !important}
/* Layout: el local de día — paredes blancas, microcemento claro, madera y dorado solo como acentos (como el mostrador y el muro) */
:root{
  color-scheme:light;
  --bg:#FCFAF7;
  --surface:#FFFFFF;
  --nude:#F2EBE3;
  --ok-bg:#E4EEDF; --ok-line:#BCD3B3; --ok-ink:#2D5A29; --ok-dot:#4C8C45;
  --no-bg:#F6E2DB; --no-line:#E6BFB2; --no-ink:#86372A; --no-dot:#C05238;
  --appt-bg:#F5E9D2; --appt-line:#E3CB9C; --appt-ink:#6E4E1B;
  --line:#E7DED4;
  --ink:#2A211B;
  --muted:#74665B;
  --gold:#BC9862;
  --gold-ink:#806137;
  --walnut:#6A4733;
  --walnut-deep:#4A3223;
  --slat-gap:#3A271C;
  --on-dark:#F3E9DC;
  --on-dark-muted:#CDB9A5;
  --btn-bg:#4A3223;
  --btn-fg:#FBF5EC;
  --header-bg:rgba(252,250,247,.9);
  --shadow:0 18px 40px -26px rgba(74,50,35,.35);

  --f-mark:"Cinzel","Trajan Pro",Georgia,serif;
  --f-display:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
  --f-body:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  --s-1:.75rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.25rem; --s-5:3.5rem; --s-6:5.5rem;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:400; font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.kicker{
  font-family:var(--f-body); font-size:.78rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-ink); margin:0;
}
h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.05; margin:0; text-wrap:balance; letter-spacing:-.005em}
h2{font-size:clamp(2.1rem,4.4vw,3.3rem)}
h3{font-size:1.65rem}
p{margin:0}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted); max-width:34em; font-weight:300}
.section{padding-block:var(--s-6)}
[id]{scroll-margin-top:84px}
.section-head{display:grid; gap:var(--s-2); margin-bottom:var(--s-5); max-width:40rem}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  font-family:var(--f-body); font-size:.86rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:1rem 1.6rem; border-radius:999px; border:1px solid transparent;
  transition:transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn svg{width:1.1em; height:1.1em; flex:none}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg)}
@media (hover:hover){ .btn-primary:hover{transform:translateY(-2px)} }
.btn-ghost{border-color:var(--gold); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--nude)}

/* Cabecera */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex; align-items:center; gap:var(--s-3); padding-block:.8rem}
.brand{display:flex; align-items:center; gap:.85rem; text-decoration:none; margin-right:auto}
.badge{
  width:48px; height:48px; border-radius:50%; flex:none;
  background:#1B1714; display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px #1B1714, inset 0 0 0 3px #B48F5A;
}
.badge span{font-family:var(--f-mark); font-size:.72rem; letter-spacing:.08em; color:#E3C995; font-weight:600}
.wordmark{display:grid; line-height:1}
.wordmark b{font-family:var(--f-mark); font-weight:600; font-size:1.45rem; letter-spacing:.14em}
.wordmark small{font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); margin-top:.3rem}
.nav{display:flex; align-items:center; gap:var(--s-3)}
.nav > a, .nav-link{
  text-decoration:none; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-block:.3rem; border-bottom:1px solid transparent;
}
.nav > a:hover, .nav-link:hover{color:var(--ink); border-bottom-color:var(--gold)}

/* Megamenú de servicios (escritorio): se abre al pasar el ratón o con el botón de la flecha */
.has-mega{display:flex; align-items:center; gap:.15rem}
.mega-toggle{
  display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--muted); cursor:pointer; transition:color .2s ease, background-color .2s ease;
}
.mega-toggle svg{width:15px; height:15px; transition:transform .25s ease}
.mega-toggle:hover{color:var(--ink); background:var(--nude)}
.mega{
  position:absolute; left:0; right:0; top:100%; z-index:25;
  background:var(--surface); border-block:1px solid var(--line); box-shadow:0 30px 50px -34px rgba(74,50,35,.45);
  visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mega::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:1.4rem} /* puente: no se cierra al bajar el ratón */
.has-mega.is-open .mega{visibility:visible; opacity:1; transform:none; pointer-events:auto; transition-delay:0s}
.has-mega.is-open .mega-toggle svg{transform:rotate(180deg)}
.has-mega.is-open .nav-link{color:var(--ink); border-bottom-color:var(--gold)}
@media (hover:hover){
  .has-mega:hover .mega{visibility:visible; opacity:1; transform:none; pointer-events:auto; transition:opacity .18s ease .06s, transform .18s ease .06s, visibility 0s linear .06s}
  .has-mega:hover .mega-toggle svg{transform:rotate(180deg)}
  .has-mega:hover .nav-link{color:var(--ink); border-bottom-color:var(--gold)}
}
.mega-inner{display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:var(--s-4); padding-block:var(--s-4)}
.mega-cols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s-3)}
.mega-col{display:grid; gap:.8rem; align-content:start; min-width:0}
.mega-col + .mega-col{border-left:1px solid var(--line); padding-left:var(--s-3)}
.mega-group{display:grid; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--f-display); font-size:1.3rem; font-weight:600; line-height:1.15}
.mega-group svg{width:30px; height:30px; color:var(--gold-ink)}
.mega-group:hover span{color:var(--gold-ink)}
.mega-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
.mega-col li a{
  display:inline-block; padding-block:.3rem; text-decoration:none; color:var(--muted); font-size:.93rem;
  border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.mega-col li a:hover{color:var(--ink); border-bottom-color:var(--gold)}
.mega-aside{display:grid; gap:var(--s-2); align-content:start}
.mega-guide{
  display:grid; gap:.5rem; padding:var(--s-3); border-radius:6px; background:var(--nude); border:1px solid var(--line);
  text-decoration:none; color:var(--ink); transition:border-color .2s ease;
}
.mega-guide b{font-family:var(--f-display); font-size:1.35rem; font-weight:600; line-height:1.15}
.mega-guide span:last-child{color:var(--muted); font-size:.88rem; line-height:1.5}
.mega-guide:hover{border-color:var(--gold)}
.mega-aside .btn{width:100%; padding-inline:1rem; font-size:.76rem; letter-spacing:.12em; white-space:nowrap}
.header-cta{padding:.75rem 1.2rem; font-size:.76rem}
.menu-btn{
  display:none; background:none; border:1px solid var(--line); border-radius:999px; width:44px; height:44px;
  color:var(--ink); cursor:pointer; place-items:center;
}
.menu-btn svg{width:20px; height:20px; overflow:visible}
.menu-btn path{transform-origin:12px 12px; transition:transform .25s ease}
.menu-btn[aria-expanded="true"] path:first-child{transform:rotate(45deg) translateY(4px)}
.menu-btn[aria-expanded="true"] path:last-child{transform:rotate(-45deg) translateY(-4px)}
/* Menú móvil: panel superpuesto bajo la cabecera (no empuja el contenido) con capa oscura detrás */
.mobile-nav{
  position:absolute; top:100%; left:0; right:0; z-index:2;
  background:var(--bg); border-top:1px solid var(--line); box-shadow:0 24px 40px -24px rgba(42,33,27,.45);
  padding-block:var(--s-1) var(--s-3);
  max-height:calc(100dvh - 70px); overflow-y:auto; overscroll-behavior:contain;
  animation:menu-in .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes menu-in{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.menu-backdrop{position:absolute; top:100%; left:0; right:0; height:100dvh; z-index:1; background:rgba(42,33,27,.38); animation:fade-in .22s ease}
@keyframes fade-in{from{opacity:0}}
html.menu-lock{overflow:hidden}
html.menu-lock .float-wa{opacity:0; pointer-events:none}
.mobile-nav > a, .m-sub > summary{
  display:block; text-decoration:none; font-family:var(--f-display); font-size:1.6rem; padding-block:.6rem;
  border-bottom:1px solid var(--line);
}
.m-sub > summary{display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none}
.m-sub > summary::-webkit-details-marker{display:none}
.m-sub > summary::after{
  content:""; width:10px; height:10px; margin-right:.4rem; border-right:1.5px solid var(--gold-ink); border-bottom:1.5px solid var(--gold-ink);
  transform:translateY(-3px) rotate(45deg); transition:transform .25s ease;
}
.m-sub[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.m-sub-body{display:grid; gap:var(--s-2); padding:var(--s-2) 0 var(--s-3); border-bottom:1px solid var(--line)}
.m-group{display:grid; gap:.55rem}
.m-group-title{font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); text-decoration:none}
.m-group ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.m-group li a{
  display:inline-block; padding:.45rem .85rem; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  text-decoration:none; color:var(--ink); font-size:.9rem;
}
.m-sub-links{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-3); padding-top:.3rem}
.mobile-nav-cta{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-1); margin-top:var(--s-3)}
.mobile-nav-cta .btn{padding-inline:1rem}

/* Hero: foto del local a sangre, velo crema a la izquierda que tapa la calle y deja limpio el texto */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(560px, 76vh, 780px); display:flex; align-items:center;
  padding-block:var(--s-6);
}
.hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:64% 50%}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(252,250,247,.97) 0%, rgba(252,250,247,.93) 28%, rgba(252,250,247,.62) 46%, rgba(252,250,247,0) 64%),
    linear-gradient(0deg, rgba(252,250,247,.35), rgba(252,250,247,0) 22%);
}
.hero-inner{width:100%}
.hero-copy{display:grid; gap:var(--s-3); max-width:34rem; min-width:0}
.hero h1{font-size:clamp(2.9rem,6.2vw,5.2rem); line-height:.98}
.hero h1 em{font-style:italic; font-weight:500; color:var(--gold-ink); display:block}
.hero .lead{color:var(--ink); opacity:.78}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s-1)}
.hero .btn-ghost{background:var(--surface)}
.hero .btn-ghost:hover{background:var(--nude)}
.rating{display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--muted)}
.stars{color:var(--gold); letter-spacing:.12em; font-size:1rem}
.rating strong{color:var(--ink); font-weight:500}

/* Franja de horario */
.hours-band{border-block:1px solid var(--line); background:var(--nude)}
.hours-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); padding-block:var(--s-3)}
.hour-item{display:flex; align-items:center; gap:.8rem; min-width:0}
.hour-item svg{width:30px; height:30px; flex:none; color:var(--gold-ink)}
.hour-item b{display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500}
.hour-item span{font-family:var(--f-display); font-size:1.3rem; font-variant-numeric:tabular-nums}
.status{
  margin-left:auto; display:inline-flex; align-items:center; gap:.6rem;
  font-size:.9rem; font-weight:500; padding:.65rem 1.15rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.status i{width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none}
.status.is-open{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink)}
.status.is-open i{background:var(--ok-dot); animation:pulse 2s ease-out infinite}
.status.is-closed{background:var(--no-bg); border-color:var(--no-line); color:var(--no-ink)}
.status.is-closed i{background:var(--no-dot)}
.status.is-appt{background:var(--appt-bg); border-color:var(--appt-line); color:var(--appt-ink)}
.status.is-appt i{background:var(--gold)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,140,69,.5)} 70%{box-shadow:0 0 0 8px rgba(76,140,69,0)} 100%{box-shadow:0 0 0 0 rgba(76,140,69,0)}}

/* Pared de extensiones: la foto real con zonas pulsables por mechón */
.wall-layout{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--s-5); align-items:center}
.wall{
  position:relative; overflow:hidden; aspect-ratio:1000/991; max-width:100%;
  border-radius:3px; background:var(--nude); box-shadow:var(--shadow);
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.wall > img{position:absolute; inset:0; width:100%; height:100%; display:block}
.veil{
  position:absolute; z-index:1; pointer-events:none;
  border-radius:999px 999px 14px 14px;
  box-shadow:0 0 30px 2000px rgba(46,32,22,.3);
  transition:left .5s cubic-bezier(.45,0,.2,1), top .5s cubic-bezier(.45,0,.2,1), width .5s cubic-bezier(.45,0,.2,1), height .5s cubic-bezier(.45,0,.2,1);
}
.spot{
  position:absolute; z-index:2; margin:0; padding:0; border:0; background:none;
  cursor:pointer; overflow:hidden; border-radius:2px;
}
.spot .peek{
  position:absolute; background-image:var(--wall-img); background-size:100% 100%;
  opacity:0; transition:opacity .25s ease;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 46%, #000 55%, transparent 100%);
}
.spot:hover .peek, .spot:focus-visible .peek{opacity:.92}
.spot.is-on .peek{opacity:0}
.spot:focus-visible{outline:2px solid var(--gold); outline-offset:-3px}
.wall-tag{
  position:absolute; z-index:4; pointer-events:none; white-space:nowrap;
  transform:translate(-50%, 8px);
  background:var(--surface); color:var(--ink); border:1px solid var(--gold); border-radius:999px;
  font-size:.72rem; letter-spacing:.1em; padding:.28rem .7rem; box-shadow:0 6px 16px -8px rgba(32,23,17,.5);
  transition:left .5s cubic-bezier(.45,0,.2,1), top .5s cubic-bezier(.45,0,.2,1);
}
.wall-tag b{font-weight:500; color:var(--gold-ink); margin-right:.35rem; font-variant-numeric:tabular-nums}
.wall-hint{font-size:.85rem; color:var(--muted); margin-top:var(--s-1)}

.tone-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:var(--s-3);
  display:grid; grid-template-columns:140px minmax(0,1fr); gap:var(--s-3); align-items:start; min-width:0;
}
.tone-zoom{
  position:relative; width:140px; height:330px; overflow:hidden; background:var(--surface);
  border:1px solid var(--gold); border-radius:999px 999px 6px 6px;
}
.tone-zoom i{
  position:absolute; inset:0; background-image:var(--wall-img); background-repeat:no-repeat;
  transition:background-position .5s cubic-bezier(.45,0,.2,1), background-size .5s cubic-bezier(.45,0,.2,1);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.tone-info{display:grid; gap:.7rem; min-width:0; padding-top:.4rem}
.tone-ref{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); font-weight:500}
.tone-title{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.tone-tex{
  justify-self:start; font-size:.78rem; letter-spacing:.08em; padding:.25rem .7rem;
  border-radius:999px; background:var(--nude); color:var(--ink);
}
.tone-desc{color:var(--muted); font-size:.98rem}
.tone-link{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  text-decoration:none; color:var(--ink); border-bottom:1px solid var(--gold); justify-self:start; padding-bottom:.2rem;
}
.tone-nav{display:flex; align-items:center; gap:.8rem; margin-top:.4rem}
.tone-nav button{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); cursor:pointer; display:grid; place-items:center; font:inherit; font-size:1.2rem; line-height:1;
}
.tone-nav button:hover{border-color:var(--gold)}
.tone-nav span{font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.06em}
.note{font-size:.88rem; color:var(--muted); margin-top:var(--s-3); max-width:40em}

/* Servicios · portada: una card por grupo (la primera, destacada y a doble ancho) */
.services{background:var(--surface); border-block:1px solid var(--line)}
.gcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3)}
.gcard{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  transition:border-color .25s ease, box-shadow .3s ease;
}
.gcard-media{position:relative; margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--nude)}
.gcard-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gcard-body{display:flex; flex-direction:column; gap:.75rem; flex:1; padding:var(--s-3); min-width:0}
.gcard h3{font-size:clamp(1.6rem,2.2vw,2rem)}
.gcard h3 a{color:inherit; text-decoration:none; outline:none}
.gcard h3 a::after{content:""; position:absolute; inset:0; z-index:1; border-radius:6px} /* toda la card es el enlace */
.gcard h3 a:focus-visible::after{outline:2px solid var(--gold); outline-offset:-2px}
.gcard-desc{color:var(--muted); font-size:.97rem}
.gcard-tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.gcard-tags a{
  position:relative; z-index:2; display:inline-block; text-decoration:none; color:var(--ink);
  font-size:.82rem; padding:.32rem .75rem; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  transition:border-color .2s ease, background-color .2s ease;
}
.gcard-more{
  margin-top:auto; padding-top:.35rem; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);
}
.gcard-more::after{content:"→"; transition:transform .25s ease}
.gcard--feature{grid-column:span 2; flex-direction:row}
.gcard--feature .gcard-media{flex:0 0 46%; aspect-ratio:auto}
.gcard--feature .gcard-media img{position:absolute; inset:0; object-position:50% 30%}
.gcard--feature .gcard-body{padding:var(--s-4); justify-content:center}
.gcard--feature h3{font-size:clamp(2rem,3vw,2.6rem)}
.gcard--feature .checks{margin-top:.4rem; padding-top:var(--s-2); border-top:1px solid var(--line); gap:.45rem}
.gcard--feature .checks li{font-size:.9rem}
.gcard--feature .gcard-more{margin-top:var(--s-1)}
@media (hover:hover){
  .gcard:hover{border-color:var(--gold); box-shadow:var(--shadow)}
  .gcard:hover .gcard-media img{transform:scale(1.04)}
  .gcard:hover .gcard-more::after{transform:translateX(4px)}
  .gcard-tags a:hover{border-color:var(--gold); background:var(--nude)}
}
.svc-badge{
  position:absolute; left:var(--s-2); top:var(--s-2); z-index:1;
  background:var(--surface); color:var(--gold-ink); border:1px solid var(--gold); border-radius:999px;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; padding:.4rem .8rem;
}
.svc-foot{margin-top:var(--s-4); display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; justify-content:space-between}
.svc-foot p{color:var(--muted); max-width:36em}
.svc-foot-actions{display:flex; flex-wrap:wrap; gap:var(--s-1)}
.svc-more{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; text-decoration:none;
  color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:.2rem;
}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.checks li{display:flex; align-items:flex-start; gap:.65rem; font-size:.97rem; line-height:1.45; min-width:0}
.checks li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:.12rem; border-radius:50%;
  background:var(--btn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FBF5EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Servicios · índice de grupos con iconos (como el folleto) */
.svc-index{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:var(--s-3) 0 0; border-block:1px solid var(--line)}
.svc-index a{
  display:grid; justify-items:center; align-content:start; gap:.7rem; padding:var(--s-3) var(--s-1);
  text-align:center; text-decoration:none; color:var(--ink); line-height:1.4;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.svc-index a + a{border-left:1px solid var(--line)}
.svc-index svg{width:34px; height:34px; color:var(--gold-ink)}
@media (hover:hover){ .svc-index a:hover{background:var(--nude)} }

/* Páginas interiores: cabecera con migas */
.nav-link[aria-current="page"]{color:var(--ink); border-bottom-color:var(--gold)}
/* Cabecera de las páginas interiores: texto y botones a la izquierda, foto enmarcada a la derecha */
.photo-hero{background:var(--bg); padding-block:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); overflow:hidden}
.photo-hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,6vw,5.5rem); align-items:center}
.photo-hero-copy{display:grid; gap:var(--s-2); max-width:36rem; min-width:0}
.photo-hero h1{font-size:clamp(2.6rem,4.6vw,4rem); line-height:1}
.photo-hero .lead{color:var(--muted)}
.photo-hero .hero-actions{margin-top:.4rem}
.photo-frame.photo-hero-media{max-width:440px; margin:0; justify-self:center}
.photo-hero-media img{aspect-ratio:4/5}
.trust{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; font-size:.9rem; color:var(--muted)}
.trust strong{color:var(--ink); font-weight:500}
.trust > span:nth-child(n+3)::before{content:"·"; margin-right:.8rem; color:var(--gold)}
.index-band{padding-top:var(--s-3); background:var(--bg)}
.index-band .svc-index{margin:0}

/* Ficha: «¿Qué es…?» con la foto del proceso al lado */
.svc-intro{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.photo-frame.svc-intro-media{position:sticky; top:110px; max-width:none; justify-self:stretch; margin:0}
.photo-frame.svc-intro-media img{aspect-ratio:4/5}
.svc-intro-body{display:grid; gap:var(--s-3); min-width:0}
.svc-intro-body .facts{margin:0}
.svc-intro-body .facts-note{margin-top:calc(-1 * var(--s-2))}
.crumbs{list-style:none; margin:0 0 var(--s-1); padding:0; display:flex; flex-wrap:wrap; gap:.3rem .5rem; font-size:.8rem; color:var(--muted)}
.crumbs li{display:flex; align-items:center; gap:.5rem}
.crumbs li + li::before{content:"›"; color:var(--gold)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.facts{list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.facts li{font-size:.86rem; padding:.45rem .9rem; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.facts b{font-weight:500; color:var(--gold-ink); margin-right:.2rem}
.facts-note{font-size:.8rem; color:var(--muted)}

/* Página de servicios: un bloque por grupo */
.group{padding-block:var(--s-5); background:var(--bg); border-top:1px solid var(--line)}
.group--alt{background:var(--surface)}
.group--alt .stile{background:var(--bg)}
.group-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.group-intro{display:grid; gap:var(--s-2); min-width:0}
.group-desc{color:var(--muted)}
.group-media{margin:.5rem 0 0; aspect-ratio:3/2; border-radius:6px; overflow:hidden; background:var(--nude); box-shadow:var(--shadow)}
.group-media img{width:100%; height:100%; object-fit:cover}
.price-note{padding-block:var(--s-4)}
.price-note p{color:var(--muted); max-width:40em; font-size:.95rem}

/* Tarjeta de servicio (lista de la página de servicios y «más servicios» de cada ficha) */
.stiles{display:grid; gap:var(--s-2); min-width:0; align-content:start}
.stiles--grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr))}
.stile{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.35rem var(--s-2); align-items:center;
  padding:var(--s-3); background:var(--surface); border:1px solid var(--line); border-radius:6px;
  text-decoration:none; color:var(--ink); transition:border-color .25s ease, box-shadow .3s ease;
}
.stile h3{font-size:clamp(1.45rem,2vw,1.75rem)}
.stile p{grid-column:1; color:var(--muted); font-size:.95rem}
.stile-arrow{
  grid-column:2; grid-row:1 / span 2; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center; color:var(--gold-ink);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.stile-arrow svg{width:18px; height:18px}
@media (hover:hover){
  .stile:hover{border-color:var(--gold); box-shadow:var(--shadow)}
  .stile:hover .stile-arrow{background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg)}
}

/* Ficha de servicio */
.svc-about{background:var(--surface)}
.tint{background:var(--nude); border-block:1px solid var(--line)}
.svc-detail{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.prose{display:grid; gap:var(--s-2); min-width:0; align-content:start}
.prose > p{color:var(--muted); max-width:38em}
.prose h2, .related h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.side-card{background:var(--nude); border:1px solid var(--line); border-radius:6px; padding:var(--s-3); display:grid; gap:var(--s-2)}
.side-title{font-size:1.6rem}
.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); padding-block:1rem;
  cursor:pointer; list-style:none; font-family:var(--f-display); font-size:1.3rem; font-weight:600; line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font-family:var(--f-body); font-weight:300; font-size:1.6rem; line-height:1; color:var(--gold-ink); transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted); padding-bottom:1rem; max-width:40em}
.related-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-3)}

/* Enlaces dentro del texto */
.prose p a, .faq p a, .tip p a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
.prose p a:hover, .faq p a:hover, .tip p a:hover{color:var(--gold-ink)}
.side-card .svc-more{justify-self:start; margin-top:.3rem}

/* Guía: tabla comparativa y consejos */
.compare{width:100%; border-collapse:collapse; font-size:.95rem; background:var(--bg); border:1px solid var(--line)}
.compare th, .compare td{padding:.9rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.compare thead th{font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); background:var(--nude)}
.compare tbody th{font-family:var(--f-display); font-size:1.3rem; font-weight:600; line-height:1.2; white-space:nowrap}
.compare tbody th a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold)}
.compare tbody th a:hover{color:var(--gold-ink)}
.compare-tec{display:grid; gap:.6rem; justify-items:start}
.compare-tec img{width:88px; height:88px; object-fit:cover; border-radius:6px; border:1px solid var(--line)}
.compare td{color:var(--muted); line-height:1.45}
.compare td:nth-child(5){white-space:nowrap} /* columna «Cita»: que no parta «2–4 h» */
.compare tbody tr:last-child > *{border-bottom:0}
.compare + .facts-note{margin-top:var(--s-1)}
.tips{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2)}
.tip{display:grid; gap:.6rem; align-content:start; padding:var(--s-3); background:var(--surface); border:1px solid var(--line); border-radius:6px}
.tip h3{font-size:1.45rem}
.tip p{color:var(--muted); font-size:.97rem}
.guide-close{margin-top:var(--s-3); max-width:44em; color:var(--muted)}

/* Portada: preguntas frecuentes */
.home-faq{background:var(--surface); border-bottom:1px solid var(--line)}
.home-faq .section-head{margin-bottom:0}
.steps-more{margin-top:var(--s-4)}

/* Franja final de cita */
.cta-band{background:var(--walnut-deep); color:var(--on-dark); padding-block:var(--s-5)}
.cta-band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3)}
.cta-copy{display:grid; gap:.6rem; max-width:34rem}
.cta-band h2{color:var(--on-dark)}
.cta-band p{color:var(--on-dark-muted)}
.cta-band .cta-addr{font-size:.85rem; letter-spacing:.04em}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--s-1)}
.cta-band .btn-primary{background:var(--btn-fg); color:var(--btn-bg)}
.cta-band .btn-ghost{color:var(--on-dark); border-color:var(--gold)}
.cta-band .btn-ghost:hover{background:rgba(252,250,247,.08)}

/* Primera cita */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-4); position:relative}
.steps::before{content:""; position:absolute; top:1.6rem; left:2.4rem; right:2.4rem; height:1px; background:var(--gold); opacity:.5}
.step{display:grid; gap:.7rem; min-width:0; position:relative}
.step-n{
  width:3.2rem; height:3.2rem; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--gold);
  font-family:var(--f-display); font-size:1.5rem; color:var(--gold-ink); font-variant-numeric:lining-nums;
}
.step h3{font-size:1.45rem}
.step p{color:var(--muted); font-size:.97rem; font-weight:300}

/* El estudio */
.studio{background:var(--nude); border-block:1px solid var(--line)}
.tones{background:var(--nude); border-bottom:1px solid var(--line)}
.steps-sec{background:var(--surface)}
.studio-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,5.5rem); align-items:center}
.photo-frame{position:relative; isolation:isolate; max-width:380px; width:100%; justify-self:center}
.photo-frame img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:45% 50%; border-radius:4px; box-shadow:var(--shadow)}
.photo-frame::after{content:""; position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--gold); border-radius:4px; z-index:-1}
.studio-copy{display:grid; gap:var(--s-3); min-width:0}
.quote{font-family:var(--f-display); font-style:italic; font-weight:500; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.05}
.quote::before{content:"\201C"; color:var(--gold); margin-right:.05em}
.quote::after{content:"\201D"; color:var(--gold); margin-left:.05em}
.studio-copy p{color:var(--muted); max-width:36em}
.google{display:grid; grid-template-columns:auto 1fr; gap:var(--s-1) var(--s-3); align-items:center; padding-top:var(--s-3); border-top:1px solid var(--line)}
.google-score{font-family:var(--f-display); font-size:3.4rem; line-height:1; font-variant-numeric:tabular-nums}
.google-meta{display:grid; gap:.2rem}
.google-meta small{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.themes{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none}
.themes li{font-size:.88rem; padding:.4rem .85rem; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.google a{grid-column:1/-1; justify-self:start}

/* Galería del estudio: rejilla escalonada en escritorio, carrusel deslizable en móvil */
.gallery-block{margin-top:var(--s-6)}
.gallery-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s-1) var(--s-3); margin-bottom:var(--s-4)}
.gallery-head .section-head{margin-bottom:0}
.gallery-hint{font-size:.85rem; color:var(--muted)}
.gallery{list-style:none; margin:0; padding:0 0 var(--s-4); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3)}
.gallery li{min-width:0}
.gallery li:nth-child(even){transform:translateY(var(--s-4))}
.g-item{
  position:relative; display:block; width:100%; padding:0; margin:0; border:0; background:var(--surface);
  aspect-ratio:3/4; overflow:hidden; border-radius:4px; cursor:zoom-in; box-shadow:var(--shadow);
  -webkit-tap-highlight-color:transparent;
}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.g-item::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(42,33,27,.55), rgba(42,33,27,0) 38%)}
.g-cap{
  position:absolute; left:var(--s-2); bottom:var(--s-2); z-index:1; color:#FBF5EC;
  font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}
.g-cap::before{content:""; display:inline-block; width:1.4rem; height:1px; background:var(--gold); vertical-align:middle; margin-right:.6rem}
@media (hover:hover){ .g-item:hover img{transform:scale(1.04)} }
.g-item:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.lightbox{
  width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:clamp(16px,4vw,48px);
  border:0; background:transparent; color:var(--on-dark); overflow:hidden;
}
.lightbox[open]{display:grid; place-items:center; animation:lb-in .25s ease}
.lightbox::backdrop{background:rgba(27,20,15,.92); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-figure{margin:0; display:grid; gap:.8rem; justify-items:center; max-width:100%; max-height:100%; min-height:0}
.lb-figure img{
  max-width:min(100%, 1100px); max-height:calc(100dvh - 2*clamp(16px,4vw,48px) - 2.6rem); width:auto; height:auto;
  border-radius:4px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); object-fit:contain;
}
.lb-figure figcaption{display:flex; gap:var(--s-2); align-items:baseline; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase}
.lb-count{color:var(--on-dark-muted); font-variant-numeric:tabular-nums; letter-spacing:.08em}
.lb-btn{
  position:absolute; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(252,250,247,.08); border:1px solid rgba(188,152,98,.6); color:var(--on-dark);
  font:inherit; font-size:1.6rem; line-height:1; cursor:pointer; transition:background-color .2s ease;
}
.lb-btn:hover{background:rgba(252,250,247,.18)}
.lb-btn svg{width:22px; height:22px}
.lb-close{top:clamp(12px,2.5vw,28px); right:clamp(12px,2.5vw,28px)}
.lb-prev, .lb-next{top:50%; transform:translateY(-50%)}
.lb-prev{left:clamp(12px,2.5vw,28px)}
.lb-next{right:clamp(12px,2.5vw,28px)}
html.lb-lock{overflow:hidden}

/* Contacto */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.contact-copy{display:grid; gap:var(--s-3); min-width:0}
.addr{font-family:var(--f-display); font-size:1.7rem; line-height:1.2}
.addr small{display:block; font-family:var(--f-body); font-size:.95rem; color:var(--muted); margin-top:.3rem}
.phone{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem}
.phone-num{font-family:var(--f-display); font-size:2.1rem; font-variant-numeric:tabular-nums; text-decoration:none; color:var(--ink)}
.phone-num:hover{color:var(--gold-ink)}
.copy-btn{
  font:inherit; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  background:none; border:1px solid var(--line); color:var(--muted); padding:.45rem .8rem; border-radius:999px; cursor:pointer;
}
.copy-btn:hover{border-color:var(--gold); color:var(--ink)}
.appt-note{font-size:.92rem; color:var(--muted); margin-top:.5rem; max-width:30em}
.links{display:flex; flex-wrap:wrap; gap:var(--s-1)}
.hours-table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.hours-table caption{text-align:left; margin-bottom:var(--s-2)}
.hours-table th,.hours-table td{padding:1rem .2rem; border-bottom:1px solid var(--line); text-align:left; font-weight:400}
.hours-table th{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500}
.hours-table td{text-align:right; font-family:var(--f-display); font-size:1.35rem}
.hours-table tr.today th,.hours-table tr.today td{color:var(--gold-ink)}
.hours-table tr.today th::after{content:"Hoy"; margin-left:.7rem; font-size:.66rem; letter-spacing:.14em; padding:.15rem .5rem; border:1px solid var(--gold); border-radius:999px; vertical-align:middle}

/* Pie */
.site-footer{
  color:var(--ink); background:var(--nude);
  padding-block:0 var(--s-4); text-align:center; border-top:1px solid var(--line);
}
.foot-slats{
  height:18px; margin-bottom:var(--s-5);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, var(--walnut) 0 14px, var(--slat-gap) 14px 17px);
}
.foot-mark{
  font-family:var(--f-mark); font-weight:600; font-size:clamp(3.4rem,10vw,6.5rem); letter-spacing:.12em; line-height:1;
  background:linear-gradient(180deg,#D9B97F 0%,#B08A52 50%,#7E5F33 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot-sub{letter-spacing:.5em; text-transform:uppercase; font-size:.8rem; margin-top:.6rem}
.foot-tri{letter-spacing:.32em; text-transform:uppercase; font-size:.7rem; color:var(--muted); margin-top:var(--s-2)}
.foot-thanks{font-family:var(--f-display); font-style:italic; font-size:1.6rem; margin-top:var(--s-4); color:var(--gold-ink)}
.foot-nav{margin-top:var(--s-4); display:grid; justify-items:center; gap:var(--s-2)}
.foot-nav .kicker{text-decoration:none}
.foot-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.4rem; max-width:52rem}
.foot-nav ul a{font-size:.88rem; color:var(--muted); text-decoration:none}
.foot-nav ul a:hover{color:var(--ink); text-decoration:underline}
.foot-legal{margin-top:var(--s-5); padding-top:var(--s-3); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.6rem var(--s-3); justify-content:center; font-size:.82rem; color:var(--muted)}
.foot-legal a{color:var(--muted)}

/* WhatsApp flotante */
.float-wa{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:30;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  background:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--shadow); text-decoration:none;
}
.float-wa svg{width:26px; height:26px}
.float-wa.is-visible{opacity:1; transform:none; pointer-events:auto}
.float-wa-label{
  position:absolute; right:calc(100% + 12px); top:50%; white-space:nowrap;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:.55rem 1rem;
  box-shadow:var(--shadow); opacity:0; transform:translate(6px,-50%); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
@media (hover:hover){
  .float-wa:hover{transform:translateY(-2px)}
  .float-wa:hover .float-wa-label, .float-wa:focus-visible .float-wa-label{opacity:1; transform:translate(0,-50%)}
}
@media (min-width: 961px){
  .float-wa{right:28px; bottom:28px; width:60px; height:60px}
}

/* Responsive */
@media (max-width: 960px){
  .nav, .header-cta{display:none}
  .menu-btn{display:grid}
  .wall-layout, .studio-grid, .contact-grid{grid-template-columns:minmax(0,1fr)}
  .photo-frame{max-width:320px}
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcard--feature{grid-column:1/-1}
  .svc-intro, .svc-detail, .group-grid{grid-template-columns:minmax(0,1fr)}
  .photo-frame.svc-intro-media{position:relative; top:auto; max-width:560px; justify-self:start}
  .photo-frame.svc-intro-media img{aspect-ratio:4/3}
  .tips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .group-media{max-width:560px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps::before{display:none}
  .status{margin-left:0}
}
@media (max-width: 760px){
  .hero{display:block; min-height:0; padding-block:0}
  .hero::before{display:none}
  .hero-bg{position:static; display:block; height:auto; aspect-ratio:4/3.1; object-position:60% 50%}
  .hero-inner{padding-block:var(--s-4) var(--s-5)}
  .hero .lead{opacity:1; color:var(--muted)}
  .photo-hero{padding-block:0 var(--s-4)}
  .photo-hero-grid{grid-template-columns:minmax(0,1fr); gap:var(--s-3)}
  .photo-frame.photo-hero-media{order:-1; width:auto; max-width:none; justify-self:stretch; margin-inline:calc(-1 * clamp(16px,4vw,40px))}
  .photo-hero-media::after{display:none}
  .photo-hero-media img{aspect-ratio:16/10; border-radius:0; box-shadow:none; object-position:50% 30%}
  .wall-layout{gap:var(--s-3)}

  /* Servicios: índice en fila deslizable; cards en una columna (las pequeñas, en horizontal) */
  .svc-index{
    display:flex; gap:.6rem; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    scroll-snap-type:x mandatory; scroll-padding-inline:clamp(16px,4vw,40px);
    margin-inline:calc(-1 * clamp(16px,4vw,40px)); padding:0 clamp(16px,4vw,40px) .25rem; border:0;
  }
  .svc-index::-webkit-scrollbar{display:none}
  .svc-index a, .svc-index a + a{
    flex:0 0 auto; width:8.5rem; scroll-snap-align:start; padding:var(--s-2) .6rem;
    border:1px solid var(--line); border-radius:6px; background:var(--bg);
    font-size:.66rem; letter-spacing:.12em;
  }
  .svc-index svg{width:28px; height:28px}
  .gcards{grid-template-columns:minmax(0,1fr); gap:var(--s-2)}
  .tips{grid-template-columns:minmax(0,1fr)}
  /* Tabla comparativa: cada técnica pasa a ser una tarjeta con sus datos en filas */
  .compare, .compare tbody, .compare tr, .compare th, .compare td{display:block}
  .compare thead{display:none}
  .compare tr{padding:var(--s-2) 1.25rem; border-bottom:1px solid var(--line)}
  .compare tbody tr:last-child{border-bottom:0}
  .compare tbody th{padding:0 0 .6rem; border:0; white-space:normal}
  .compare-tec{grid-template-columns:64px minmax(0,1fr); align-items:center; gap:var(--s-2)}
  .compare-tec img{width:64px; height:64px}
  .compare td{display:grid; grid-template-columns:8rem minmax(0,1fr); gap:var(--s-1); padding:.35rem 0; border:0}
  .compare td::before{content:attr(data-label); font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); padding-top:.2rem}
  .gcard--feature{flex-direction:column}
  .gcard--feature .gcard-media{flex:none; aspect-ratio:16/10}
  .gcard--feature .gcard-body{padding:var(--s-3)}
  .gcard--feature .checks{grid-template-columns:minmax(0,1fr)}
  .gcard:not(.gcard--feature){flex-direction:row}
  .gcard:not(.gcard--feature) .gcard-media{flex:0 0 34%; aspect-ratio:auto}
  .gcard:not(.gcard--feature) .gcard-media img{position:absolute; inset:0}
  .gcard:not(.gcard--feature) .gcard-desc{display:none}
  .gcard:not(.gcard--feature) .gcard-body{padding:var(--s-2); gap:.6rem}
  .gcard:not(.gcard--feature) h3{font-size:1.45rem}

  /* Galería: carrusel con scroll-snap, a sangre hasta el borde de la pantalla */
  .gallery-block{margin-top:var(--s-5); padding-inline:0}
  .gallery-head{padding-inline:clamp(16px,4vw,40px); margin-bottom:var(--s-3)}
  .gallery{
    display:flex; gap:var(--s-2); overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:clamp(16px,4vw,40px);
    padding:0 clamp(16px,4vw,40px) var(--s-2); scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery li{flex:0 0 72%; max-width:320px; scroll-snap-align:start}
  .gallery li:nth-child(even){transform:none}
  .lb-prev, .lb-next{top:auto; bottom:clamp(12px,2.5vw,28px); transform:none}
  .lb-figure img{max-height:calc(100dvh - 2*clamp(16px,4vw,48px) - 7rem)}
  .site-footer{padding-bottom:calc(var(--s-4) + 72px + env(safe-area-inset-bottom,0px))}
}
@media (max-width: 560px){
  body{font-size:1rem}
  [id]{scroll-margin-top:72px}
  .section{padding-block:var(--s-5)}
  .section-head{margin-bottom:var(--s-4)}
  .kicker{letter-spacing:.18em}
  .lead{font-weight:400}

  /* Cabecera */
  .header-row{padding-block:.6rem}
  .badge{width:42px; height:42px}
  .wordmark b{font-size:1.3rem}

  /* Portada */
  .hero-bg{aspect-ratio:4/3}
  .hero-inner{padding-block:var(--s-3) var(--s-4)}
  .hero-copy{gap:var(--s-2)}
  .hero h1{font-size:clamp(2.6rem,12vw,3.2rem)}
  .hero-actions{margin-top:.25rem}
  .hero-actions .btn{width:100%}
  .btn{padding-inline:1.1rem; letter-spacing:.1em}

  /* Franja de horario */
  .hours-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2); padding-block:var(--s-3)}
  .hour-item:nth-child(3){grid-column:1/-1}
  .hour-item svg{width:26px; height:26px}
  .hour-item b{font-size:.66rem; letter-spacing:.14em}
  .hour-item span{font-size:1.2rem}
  .status{grid-column:1/-1; justify-content:center; text-align:center}

  /* Servicios */
  .svc-badge{left:.75rem; top:.75rem}
  .gcard-tags a{font-size:.78rem; padding:.3rem .65rem}
  .svc-foot{margin-top:var(--s-3)}
  .svc-foot-actions, .svc-foot .btn{width:100%; text-align:center}

  /* Páginas interiores */
  .photo-hero-copy{gap:.85rem}
  .photo-hero h1{font-size:clamp(2.2rem,10vw,2.8rem)}
  /* Primera vista en móviles pequeños: que el botón de WhatsApp quepa sin hacer scroll */
  .photo-hero-media img{aspect-ratio:2/1}
  .photo-hero-grid{gap:var(--s-2)}
  .photo-hero .crumbs{margin-bottom:0}
  .photo-hero .crumbs li:not(:nth-last-child(2)){display:none} /* solo «‹ grupo» */
  .photo-hero .crumbs li::before{content:"‹"; color:var(--gold)}
  .photo-hero .lead{font-size:1rem; line-height:1.55}
  .trust{font-size:.84rem}
  .trust > span:last-child{display:none} /* «Patraix, València» ya está en el H1; así cabe en una línea */
  .photo-frame.svc-intro-media{max-width:none; justify-self:stretch}
  .svc-intro-media::after{inset:10px -10px -10px 10px}
  .facts li{font-size:.82rem; padding:.4rem .8rem}
  .group{padding-block:var(--s-4)}
  .stile{padding:var(--s-2) 1.25rem}
  .stile-arrow{width:40px; height:40px}
  .side-card{padding:var(--s-3) 1.25rem}
  .faq summary{font-size:1.2rem}
  .related-head{margin-bottom:var(--s-2)}
  .cta-actions, .cta-actions .btn{width:100%}
  .foot-nav ul{gap:.2rem 1.1rem}
  .foot-nav ul a{display:inline-block; padding-block:.3rem}

  /* Pared de tonos */
  .wall-tag{font-size:.66rem; padding:.22rem .6rem}
  .tone-card{grid-template-columns:96px minmax(0,1fr); padding:var(--s-2); gap:var(--s-2)}
  .tone-zoom{width:96px; height:230px}
  .tone-info{gap:.55rem; padding-top:0}
  .tone-title{font-size:1.6rem}
  .tone-desc{font-size:.92rem}
  .tone-link{font-size:.74rem; letter-spacing:.1em}
  .tone-nav button{width:44px; height:44px}

  /* Primera cita: línea de tiempo vertical */
  .steps{grid-template-columns:minmax(0,1fr); gap:var(--s-3)}
  .step:not(:last-child)::after{content:""; position:absolute; left:1.3rem; top:2.6rem; bottom:calc(-1 * var(--s-3)); width:1px; background:var(--gold); opacity:.5}
  .step{grid-template-columns:2.6rem minmax(0,1fr); gap:.2rem var(--s-2); align-items:start}
  .step-n{width:2.6rem; height:2.6rem; font-size:1.25rem; grid-row:span 2}
  .step h3{font-size:1.35rem; padding-top:.45rem}
  .step p{font-weight:400}

  /* El estudio */
  .photo-frame{max-width:280px}
  .photo-frame::after{inset:12px -12px -12px 12px}
  .studio-copy{gap:var(--s-2)}
  .google{gap:var(--s-1) var(--s-2)}
  .google-score{font-size:3rem}
  .themes li{font-size:.84rem}

  /* Contacto */
  .addr{font-size:1.55rem}
  .phone-num{font-size:2rem}
  .copy-btn{padding:.6rem .9rem}
  .links{display:grid; grid-template-columns:minmax(0,1fr)}
  .hours-table th, .hours-table td{padding:.8rem .1rem}
  .hours-table th{font-size:.74rem; letter-spacing:.12em}
  .hours-table td{font-size:1.2rem}

  /* Pie */
  .foot-slats{margin-bottom:var(--s-4)}
  .foot-sub{letter-spacing:.4em}
  .foot-tri{letter-spacing:.2em}
  .foot-legal{flex-direction:column; align-items:center; gap:.35rem}
  .foot-legal a{padding-block:.35rem}
  .float-wa{right:14px; width:56px; height:56px}
}
@media (max-width: 340px){
  .mobile-nav-cta{grid-template-columns:minmax(0,1fr)}
  .tone-card{grid-template-columns:minmax(0,1fr)}
  .tone-zoom{width:100%; height:180px; border-radius:6px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, .mega, .mega-toggle svg, .m-sub > summary::after, .svc-index a, .gcard, .gcard-media img, .gcard-more::after, .stile, .stile-arrow, .faq summary::after, .veil, .wall-tag, .tone-zoom i, .spot .peek, .float-wa, .float-wa-label, .menu-btn path, .g-item img{transition:none}
  .lightbox[open], .mobile-nav, .menu-backdrop{animation:none}
  .status i{animation:none}
}