/* Ross Hair Studio · estilos */
[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:#86663A;
  --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; gap:var(--s-3)}
.nav a{
  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{color:var(--ink); border-bottom-color:var(--gold)}
.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)}
.mobile-nav{border-top:1px solid var(--line); padding-block:var(--s-1) var(--s-3)}
.mobile-nav > a{
  display:block; text-decoration:none; font-family:var(--f-display); font-size:1.6rem; padding-block:.6rem;
  border-bottom:1px solid var(--line);
}
.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: tarjetas con foto. Extensiones como especialidad destacada */
.services{background:var(--surface); border-block:1px solid var(--line)}
.svc-feature{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.svc-media{position:relative; overflow:hidden; background:var(--nude); margin:0}
.svc-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .svc-feature:hover .svc-media img, .svc-card:hover .svc-media img{transform:scale(1.04)} }
.svc-feature .svc-media{min-height:420px}
.svc-feature .svc-media img{position:absolute; inset:0; object-position:50% 30%}
.svc-badge{
  position:absolute; left:var(--s-2); top:var(--s-2);
  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-body{display:grid; gap:var(--s-2); align-content:start; padding:var(--s-4); min-width:0}
.svc-body h3{font-size:clamp(1.9rem,3vw,2.5rem)}
.svc-body > p{color:var(--muted); max-width:34em}
.tech{list-style:none; margin:var(--s-1) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2) var(--s-3)}
.tech li{display:grid; gap:.15rem; align-content:start; padding-top:.8rem; border-top:1px solid var(--line); min-width:0}
.tech b, .svc-list b{font-weight:500; font-size:.98rem}
.tech span, .svc-list span{color:var(--muted); font-size:.92rem; font-weight:300; line-height:1.5}
.svc-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-3); margin-top: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;
}
.svc-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); margin-top:var(--s-3)}
.svc-card{display:grid; grid-template-rows:auto 1fr; background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden; min-width:0}
.svc-card .svc-media{aspect-ratio:16/9; max-width:100%}
.svc-card .svc-body{display:flex; flex-direction:column; padding:var(--s-3) var(--s-4) var(--s-4)}
.svc-card .svc-actions{margin-top:auto; padding-top:var(--s-1)}
.svc-card .svc-body h3{font-size:clamp(1.7rem,2.4vw,2.1rem)}
.svc-list{list-style:none; margin:0; padding:0; display:grid}
.svc-list li{display:grid; gap:.1rem; padding-block:.75rem; border-top:1px solid var(--line)}
.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}

/* 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}

/* 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)}
.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-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}
  .svc-feature, .svc-pair{grid-template-columns:minmax(0,1fr)}
  .svc-feature .svc-media{min-height:0; aspect-ratio:16/10}
  .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)}
  .wall-layout{gap:var(--s-3)}
  .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 */
  .tech{grid-template-columns:minmax(0,1fr); gap:0}
  .tech li{padding-block:.75rem}
  .tech span, .svc-list span{font-weight:400}
  .svc-body, .svc-card .svc-body{padding:var(--s-3) 1.25rem}
  .svc-feature .svc-media{aspect-ratio:4/3}
  .svc-badge{left:.75rem; top:.75rem}
  .svc-actions{gap:var(--s-2)}
  .svc-feature .svc-actions .btn, .svc-foot .btn{width:100%; text-align:center}
  .svc-pair{gap:var(--s-2); margin-top:var(--s-2)}
  .svc-foot{margin-top:var(--s-3)}

  /* 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, .veil, .wall-tag, .tone-zoom i, .spot .peek, .svc-media img, .float-wa, .float-wa-label, .menu-btn path{transition:none}
  .status i{animation:none}
}