/* Enzo Barbershop. Paleta muestreada de las fotos del local (ver comentario del HTML). */
:root{
  --bg:#1b1c1e; --panel:#26282b; --panel2:#2f3236; --wood:#8c806e; --y:#cdb97e; --red:#8a3c39;
  --tx:#ece7da; --mut:#aaa595; --line:rgba(236,231,218,.14);
  --f-d:"Barlow Condensed","Arial Narrow",Impact,sans-serif; --f-b:"Barlow",system-ui,sans-serif;
  --top-h:104px; --nav-alto:76px; --rail:0px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 12px)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--f-b);overflow-x:clip;
  padding-bottom:calc(var(--nav-alto) + 24px + env(safe-area-inset-bottom));
  background-image:radial-gradient(900px 500px at 85% -5%,rgba(205,185,126,.10),transparent 60%),radial-gradient(700px 600px at -10% 40%,rgba(140,128,110,.08),transparent 60%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-d);font-weight:800;text-transform:uppercase;margin:0;text-wrap:balance}
h2{font-size:clamp(2.4rem,7vw,4.6rem);line-height:.95;letter-spacing:-.005em}
h3{font-size:1.5rem;line-height:1}
p{margin:0 0 1em;text-wrap:pretty}
.kicker{font:600 .82rem/1 var(--f-b);letter-spacing:.2em;text-transform:uppercase;color:var(--y);margin:0 0 .9rem}
.skip{position:absolute;left:-999px;top:0;background:var(--y);color:#1b1c1e;padding:.8rem 1rem;z-index:100}.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--y);outline-offset:3px}
section{position:relative;z-index:1}

/* header (movil: barra arriba con chips; escritorio: carril lateral) */
.top{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(27,28,30,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;align-items:center;padding:6px 14px 0;column-gap:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.7rem/1 var(--f-d);letter-spacing:.06em;min-height:44px}
.brand small{display:block;font:600 .6rem/1 var(--f-b);letter-spacing:.34em;color:var(--y);margin-top:3px}
.brand-led{width:5px;height:30px;background:linear-gradient(var(--y),#fff6d6);box-shadow:0 0 10px 1px rgba(205,185,126,.7);border-radius:3px}
.lang{position:relative;display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{position:relative;z-index:1;text-decoration:none;font:600 .8rem/1 var(--f-b);letter-spacing:.12em;padding:12px 14px;min-width:44px;text-align:center;color:var(--mut)}
.lang a[aria-current]{color:#1b1c1e}
.lang .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--y);transition:transform .45s var(--ease)}
html[lang=es] .lang .thumb{transform:translateX(100%)}
.rail{grid-column:1/-1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px 6px}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:none;text-decoration:none;font:600 .8rem/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;padding:14px 12px;position:relative;color:var(--mut);min-height:44px;display:flex;align-items:center}
.rail a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:var(--y);box-shadow:0 0 8px rgba(205,185,126,.8);transform:scaleX(0);transition:transform .4s var(--ease)}
.rail a[aria-current]{color:var(--tx)}.rail a[aria-current]::after{transform:scaleX(1)}
.rail-call{display:none}

/* botones */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:56px;padding:12px 22px;border-radius:6px;font:600 1rem/1.15 var(--f-b);transition:transform .25s var(--ease),background .25s,box-shadow .25s;position:relative}
.btn svg{flex:none}
.btn small{display:block;font:600 .68rem/1 var(--f-b);letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.btn.call{background:var(--y);color:#1b1c1e;font:800 1.7rem/1 var(--f-d);letter-spacing:.03em;padding:12px 26px;box-shadow:0 0 0 0 rgba(205,185,126,.5)}
.btn.call small{font-family:var(--f-b)}
.btn.ghost{border:1.5px solid var(--y);color:var(--y)}
.btn:hover{transform:translateY(-2px)}.btn.call:hover{box-shadow:0 8px 28px -8px rgba(205,185,126,.6)}.btn.ghost:hover{background:rgba(205,185,126,.12)}
.btn.small{font-size:1.4rem}

/* hero */
.hero{display:grid;gap:28px;padding:calc(var(--top-h) + 22px) 18px 40px;min-height:100svh;align-content:center}
.hero h1{font-size:clamp(3rem,13.5vw,6.6rem);line-height:.9;letter-spacing:-.01em;margin-bottom:.35em}
.lede{font-size:1.1rem;color:var(--mut);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:1.4rem 0 1rem}
.cta .btn.call{flex:1 1 100%}
.meta{font-size:.95rem;color:var(--mut)}.stars{color:var(--y);letter-spacing:.1em}
.live{display:inline-block;font:600 .72rem/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line);margin-left:8px;vertical-align:middle}
.live:empty{display:none}.live.on{color:var(--y);border-color:rgba(205,185,126,.5)}.live.off{color:#d6908c;border-color:rgba(138,60,57,.7)}
.mirror{position:relative;padding:34px 30px 8px;max-width:520px;width:100%;justify-self:center;isolation:isolate}
.frame{background:#0e0f10;border:7px solid #0e0f10;border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -20px #000}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:35% 35%;height:auto}
.led{position:absolute;top:34px;bottom:8px;width:8px;border-radius:5px;background:linear-gradient(#fff9e0,var(--y));box-shadow:0 0 14px 2px rgba(205,185,126,.75),0 0 40px 6px rgba(205,185,126,.25);transform-origin:top;z-index:2}
.l1{left:6px}.l2{right:6px}
.ring{position:absolute;left:50%;top:-6px;width:min(78%,360px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(circle,transparent 58%,rgba(255,244,214,.95) 59% 66%,transparent 67%),radial-gradient(circle,rgba(205,185,126,.28),transparent 70%);filter:blur(.3px)}
.js .led{animation:ledon .9s var(--ease) both}.js .l2{animation-delay:.18s}
.js .ring{animation:ringon 1.6s .4s both}
@keyframes ledon{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}
@keyframes ringon{0%{opacity:0}18%{opacity:.9}26%{opacity:.25}38%{opacity:1}100%{opacity:1}}

/* precios: indice fijo + lista */
.prices{padding:70px 18px 40px;display:grid;gap:30px;border-top:1px solid var(--line)}
.p-note{color:var(--mut);font-size:.95rem;margin:1rem 0 1.2rem;max-width:30em}
.sticky .btn.call{width:100%;justify-content:flex-start}
.p-list{display:grid;gap:34px}
.grp h3{color:var(--y);font-size:1.15rem;letter-spacing:.18em;margin-bottom:.4rem;font-weight:600}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.row dt{font:600 1.05rem/1.25 var(--f-b);margin:0}.row dt small{display:block;font-weight:400;color:var(--mut);font-size:.88rem;margin-top:3px}
.row dd{margin:0;display:flex;align-items:baseline;gap:16px;flex:none}
.dur{color:var(--mut);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr{font:800 1.9rem/1 var(--f-d);color:var(--tx);font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}
.grp dl{margin:0}

/* resenas */
.reviews{padding:80px 18px 50px;border-top:1px solid var(--line)}
.rv-head{display:grid;gap:14px;margin-bottom:38px;align-items:end}
.big-n{font:800 clamp(7rem,38vw,15rem)/.8 var(--f-d);color:var(--y);margin:0;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sub{color:var(--mut);margin:1rem 0 .6rem}
.lnk{color:var(--y);text-decoration:none;font-weight:600;border-bottom:1.5px solid rgba(205,185,126,.5);padding:10px 0;display:inline-block}
.rev-grid{display:grid;gap:16px}
.rev{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px 22px;display:flex;flex-direction:column;gap:16px}
.rev blockquote{margin:0}.rev blockquote p{margin:0 0 .7em;font-size:1rem}
.r0 blockquote p:first-child{font:600 1.35rem/1.35 var(--f-b)}
.rev figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.rev figcaption b{font:800 1.25rem/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase}
.rev figcaption span{color:var(--y);font-size:.82rem;letter-spacing:.06em}
.tr{background:var(--panel2);border-radius:4px;padding:14px 16px;color:#cfc9ba}.tr p{margin:0 0 .6em;font-size:.95rem}.trl{display:inline-block;font:700 .66rem/1 var(--f-b);letter-spacing:.2em;color:var(--y);margin-bottom:8px}

/* galeria */
.gallery{padding:80px 0 50px;border-top:1px solid var(--line)}
.g-head{padding:0 18px;margin-bottom:26px;position:relative}
.hint{position:absolute;right:18px;bottom:6px;font:600 .75rem/1 var(--f-b);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.strip{list-style:none;margin:0;padding:0 18px 12px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--wood) transparent}
.strip li{flex:none;scroll-snap-align:start;background:#0e0f10;border-radius:4px;overflow:hidden;width:min(82vw,520px);aspect-ratio:16/10}
.strip li.tall{width:min(64vw,340px);aspect-ratio:4/5}
.strip img{width:100%;height:100%;object-fit:cover}

/* about */
.about{padding:80px 18px 60px;border-top:1px solid var(--line);display:grid;gap:30px;align-items:center}
.a-photo{border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -30px #000}
.a-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lit{font:600 clamp(1.6rem,6.4vw,2.9rem)/1.12 var(--f-d);text-transform:uppercase;letter-spacing:.005em;margin:0 0 1rem}
.lit span{transition:opacity .2s}
.a-small{color:var(--mut);font-size:.9rem}

/* contacto: el cartel de la puerta */
.visit{padding:80px 18px 60px;border-top:1px solid var(--line);overflow:clip;background:#16171a}
.stripes{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.stripes::before{content:"";position:absolute;inset:-60% -10%;background:repeating-linear-gradient(135deg,#1f2124 0 34px,#18191c 34px 68px);animation:stripes 24s linear infinite;will-change:transform}
@keyframes stripes{to{transform:translate3d(96px,0,0)}}
.v-inner{position:relative;z-index:1;max-width:1100px}
.bignum{display:block;font:800 clamp(2.2rem,12.4vw,8.5rem)/.95 var(--f-d);white-space:nowrap;color:var(--y);text-decoration:none;letter-spacing:-.01em;margin:.5rem 0 1.4rem;font-variant-numeric:tabular-nums;padding:6px 0}
.v-btns{display:grid;gap:12px;margin-bottom:40px}
.v-btns .btn{width:100%;justify-content:flex-start}
.v-grid{display:grid;gap:22px}
.v-card{background:rgba(38,40,43,.92);border:1px solid var(--line);border-radius:6px;padding:24px 22px}
.addr{font-size:1.2rem;margin:0 0 .5rem}.find{color:var(--mut);font-size:.95rem}
.v-card h3{margin:1.4rem 0 .6rem;color:var(--y);font-size:1.15rem;letter-spacing:.18em;font-weight:600}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:.97rem}
.hours li.today{background:rgba(205,185,126,.14);color:var(--tx);font-weight:600;border-radius:3px}
.soc-t{margin:1.4rem 0 .5rem;font:600 .75rem/1 var(--f-b);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.soc{display:flex;gap:10px;flex-wrap:wrap}.soc a{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-size:.92rem}
.v-photo{border-radius:4px;overflow:hidden;max-height:560px}.v-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* faq y blog */
.faq,.blog{padding:80px 18px 30px;border-top:1px solid var(--line)}
.faq-list{margin-top:26px;max-width:820px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font:600 1.1rem/1.3 var(--f-b);padding:18px 40px 18px 0;position:relative;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 1.8rem/1 var(--f-b);color:var(--y);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mut);padding:0 0 18px;margin:0;max-width:40em}
.notes{display:grid;gap:16px;margin-top:26px;max-width:980px}
.note{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px 22px}
.note h3{margin-bottom:.7rem;color:var(--y)}.note p{margin:0;color:#cfc9ba}
.blog{padding-bottom:60px}

.foot{padding:50px 18px 30px;border-top:1px solid var(--line);color:var(--mut);font-size:.9rem;position:relative;z-index:1;overflow:hidden}
.bigtype{font:800 clamp(6rem,38vw,22rem)/.8 var(--f-d);color:#242629;margin:0 0 20px;letter-spacing:-.02em}
.foot a{color:var(--y)}.f2{font-size:.8rem}

/* barra inferior (movil) = el suelo de lo fijo */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(22,23,26,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);height:calc(var(--nav-alto) + env(safe-area-inset-bottom))}
.bar a{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:6px;min-height:56px}
.b-call{flex:1;background:var(--y);color:#1b1c1e;font:800 clamp(1.1rem,5.2vw,1.45rem)/1 var(--f-d);letter-spacing:.02em;white-space:nowrap}
.b-s{width:58px;border:1.5px solid var(--y);color:var(--y)}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media(min-width:640px){
  .v-btns{grid-template-columns:repeat(3,auto);justify-content:start}.v-btns .btn.call{display:none}
  .cta .btn.call{flex:0 0 auto}
  .rev-grid{grid-template-columns:repeat(2,1fr);align-items:start}.r0{grid-column:1/-1}
  .notes{grid-template-columns:1fr 1fr}
}
@media(min-width:1000px){
  :root{--rail:220px;--top-h:0px}
  body{padding-bottom:0;padding-left:var(--rail)}
  html{scroll-padding-top:20px}
  .top{inset:0 auto 0 0;width:var(--rail);height:100vh;display:flex;flex-direction:column;align-items:flex-start;padding:26px 20px;border-right:1px solid var(--line);border-bottom:0;gap:26px}
  .rail{flex-direction:column;overflow:visible;margin:0;padding:0;gap:0;width:100%;grid-column:auto;order:3}
  .rail a{width:100%;padding:14px 0;font-size:.85rem}.rail a::after{left:-20px;right:auto;bottom:auto;top:12px;bottom:12px;width:4px;height:auto;transform:scaleY(0)}
  .rail a[aria-current]::after{transform:scaleY(1)}
  .lang{order:2}
  .rail-call{display:flex;order:4;margin-top:auto;align-items:center;gap:10px;text-decoration:none;color:#1b1c1e;background:var(--y);padding:14px 16px;border-radius:6px;font:800 1.2rem/1 var(--f-d);width:100%;white-space:nowrap}
  .bar{display:none}
  .hero{grid-template-columns:1.15fr .85fr;align-items:center;padding:60px 56px;gap:40px}
  .mirror{max-width:none}
  .prices{grid-template-columns:minmax(260px,.8fr) 1.6fr;padding:110px 56px 60px;gap:60px}
  .sticky{position:sticky;top:40px}
  .reviews,.faq,.blog{padding-inline:56px}.reviews{padding-top:110px}
  .rv-head{grid-template-columns:auto 1fr;gap:40px}
  .rev-grid{grid-template-columns:repeat(6,1fr)}.r0{grid-column:1/5;grid-row:span 2}.r1{grid-column:5/7}.r2{grid-column:5/7}.r3{grid-column:1/4}.r4{grid-column:4/7}
  .gallery{padding-top:110px}.g-head,.strip{padding-inline:56px}
  .strip li{width:520px}.strip li.tall{width:340px}.hint{right:56px}
  .about{grid-template-columns:.9fr 1.1fr;padding:110px 56px;gap:70px}
  .visit{padding:120px 56px 100px}
  .v-grid{grid-template-columns:1.3fr .7fr;align-items:start}
  .faq,.blog{padding-top:110px}
  .foot{padding-inline:56px;display:grid;grid-template-columns:1fr auto;column-gap:60px;align-items:end}
  .bigtype{grid-row:1/5;margin:0}.foot>p:not(.bigtype){grid-column:2;text-align:right;margin:0 0 .6em}
  .faq,.blog{display:grid;grid-template-columns:minmax(280px,.8fr) 1.6fr;column-gap:60px;align-items:start}
  .faq .kicker,.blog .kicker{grid-column:1;grid-row:1}.faq h2,.blog h2{grid-column:1;grid-row:2}
  .faq-list,.notes{grid-column:2;grid-row:1/4;margin-top:0;max-width:none}
  .faq-list{max-width:none}details p{max-width:none}
  .v-inner{max-width:none}
}
@media(min-width:1500px){summary{font-size:1.3rem}details p{font-size:1.1rem}.note p{font-size:1.1rem}.note h3{font-size:1.8rem}.bigtype{font-size:clamp(14rem,22vw,34rem)}.foot{font-size:1.05rem}.addr{font-size:1.5rem}.hours li{font-size:1.1rem}.hero{padding-inline:90px}.prices,.about,.visit,.reviews,.faq,.blog,.g-head,.strip,.foot{padding-inline:90px}.hint{right:90px}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}.lit span{opacity:1!important}
}
@media(min-width:1900px){.faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}summary{font-size:1.45rem}details p{font-size:1.2rem}}
@media(min-width:1000px){
  .rev-grid{display:block;column-count:2;column-gap:20px}
  .rev-grid .rev{break-inside:avoid;margin:0 0 16px;grid-column:auto;grid-row:auto}
  .r0 blockquote p:first-child{font-size:1.15rem}
}