*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#000000;
  --ink2:#0e0e0e;
  --ink3:#181818;
  --olive:#5b604d;
  --olive2:#7a8066;
  --olive3:#3d4135;
  --cream:#fefdfa;
  --cream2:#c2bfb6;
  --silver:#ced1d3;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --commerce:00f4e162-6802-425a-b498-a42947b2ec0a;
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;overflow-x:hidden}

/* cursor */
#cur{position:fixed;width:7px;height:7px;background:var(--olive2);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference}
#curR{position:fixed;width:32px;height:32px;border:1px solid rgba(91,96,77,.35);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:1.8rem 4rem;transition:padding .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.stuck{padding:1rem 4rem;background:rgba(0,0,0,.95);backdrop-filter:blur(20px);border-color:rgba(91,96,77,.15)}
.nav-logo svg{display:block}
.nav-links{display:flex;gap:3rem;list-style:none}
.nav-links a{font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cream2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-cta{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--cream);border:none;padding:.65rem 1.7rem;cursor:pointer;text-decoration:none;transition:background .2s;display:inline-block;font-family:var(--sans)}
.nav-cta:hover{background:var(--silver)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--cream)}

/* HERO */
#hero{height:100vh;min-height:700px;position:relative;display:flex;align-items:flex-end;padding:0 4rem 7rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('../img/hero.webp?v=3.1.0') center/cover;filter:brightness(.35) saturate(.65)}
.hero-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.98) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.5) 100%)}
.hero-inner{position:relative;z-index:1;width:100%;max-width:1380px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:flex-end;gap:3rem}
.hero-left{opacity:0;transform:translateY(28px);animation:up .9s .2s forwards}
.hero-tag{font-size:.6rem;letter-spacing:.45em;text-transform:uppercase;color:var(--olive2);margin-bottom:2rem;display:flex;align-items:center;gap:1rem}
.hero-tag::before{content:'';display:block;width:32px;height:1px;background:var(--olive)}

.hero-sub{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.5rem);font-weight:300;line-height:1.1;color:var(--cream)}
.hero-sub i{font-style:italic;color:var(--silver);display:block}
.hero-right{text-align:right;opacity:0;animation:up .9s .5s forwards}
.hero-quote{font-family:var(--serif);font-size:clamp(.9rem,1.8vw,1.25rem);font-weight:300;font-style:italic;color:var(--silver);line-height:1.6;max-width:320px;margin:0 0 2rem auto}
.hero-badge{display:inline-flex;align-items:center;gap:.8rem;font-size:.7rem;letter-spacing:.15em;color:var(--cream2);margin-bottom:2rem}
.stars{color:var(--cream);letter-spacing:.1em}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:1;opacity:.4}
.hero-scroll span{font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;color:var(--cream2)}
.scr{width:1px;height:44px;background:linear-gradient(var(--olive),transparent);animation:scroll 1.8s infinite}
@keyframes scroll{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* STRIP */
.strip{background:var(--olive);padding:1.1rem 4rem;display:flex;justify-content:center;gap:5rem;flex-wrap:wrap}
.strip-item{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(254,253,250,.7);display:flex;align-items:center;gap:.8rem}
.strip-n{font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--cream);line-height:1}

/* SECTIONS */
.sec{padding:9rem 4rem}
.si{max-width:1380px;margin:0 auto}
.sec-tag{font-size:.58rem;letter-spacing:.45em;text-transform:uppercase;color:var(--olive2);margin-bottom:1.2rem;display:block}
.sec-h2{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.5rem);font-weight:300;line-height:1.05;color:var(--cream);margin-bottom:3.5rem}
.sec-h2 i{font-style:italic;color:var(--silver)}


/* BOOKING WIDGET */
#reservas{background:var(--ink);padding:0}
.bk-outer{display:grid;grid-template-columns:340px 1fr}
.bk-panel{background:var(--olive);padding:4rem 3rem;display:flex;flex-direction:column}
.bk-panel .sec-tag{color:rgba(254,253,250,.6)}
.bk-panel .sec-h2{color:var(--cream);font-size:clamp(1.8rem,3vw,3rem);margin-bottom:1.5rem}
.bk-panel p{font-size:.8rem;color:rgba(254,253,250,.75);line-height:1.85;margin-bottom:2rem}
.bk-hours{margin-top:auto;border-top:1px solid rgba(254,253,250,.18);padding-top:1.8rem}
.bh{display:flex;justify-content:space-between;font-size:.75rem;padding:.45rem 0;border-bottom:1px solid rgba(254,253,250,.08)}
.bh .d{color:rgba(254,253,250,.6)}.bh .t{color:var(--cream);font-weight:400}.bh.off .t{opacity:.3}
.bk-widget{background:var(--ink2);display:flex;flex-direction:column;min-height:600px}

/* Widget steps */
.step{display:none;flex-direction:column;padding:3rem;flex:1}
.step.active{display:flex}
.step-title{font-family:var(--serif);font-size:1.6rem;font-weight:300;color:var(--cream);margin-bottom:.5rem}
.step-sub{font-size:.72rem;color:var(--cream2);letter-spacing:.15em;text-transform:uppercase;margin-bottom:2.5rem}
.step-progress{display:flex;gap:.5rem;margin-bottom:3rem}
.sp{height:2px;flex:1;background:rgba(91,96,77,.2);transition:background .3s}
.sp.done{background:var(--olive)}
.sp.active{background:var(--cream)}

/* Service cards */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(91,96,77,.1);margin-bottom:2rem}
.svc-item{background:var(--ink3);padding:1.5rem;cursor:pointer;transition:background .25s;border:2px solid transparent}
.svc-item:hover{background:#1c1c1a}
.svc-item.sel{border-color:var(--olive);background:#1c1c1a}
.svc-item-name{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--cream);margin-bottom:.3rem}
.svc-item-price{font-size:.78rem;color:var(--olive2);letter-spacing:.1em}
.svc-item-dur{font-size:.68rem;color:var(--cream2);letter-spacing:.08em;margin-top:.2rem}

/* Barber cards */
.barber-list{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.barber-card{background:var(--ink3);padding:1.2rem 1.5rem;cursor:pointer;transition:background .25s;border:2px solid transparent;text-align:center;flex:1;min-width:120px}
.barber-card:hover{background:#1c1c1a}
.barber-card.sel{border-color:var(--olive)}
.barber-avatar{width:50px;height:50px;border-radius:50%;background:var(--olive3);margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--cream2)}
.barber-name{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--cream)}

/* Date picker */
.date-nav{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.date-nav button{background:none;border:1px solid rgba(91,96,77,.3);color:var(--cream2);width:36px;height:36px;cursor:pointer;font-size:1rem;transition:border-color .2s}
.date-nav button:hover{border-color:var(--olive);color:var(--cream)}
.date-nav span{font-family:var(--serif);font-size:1.2rem;font-weight:300;color:var(--cream);text-transform:capitalize;flex:1;text-align:center}
.days-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:2rem}
.day-btn{background:var(--ink3);border:1px solid transparent;color:var(--cream2);padding:.6rem .3rem;cursor:pointer;font-family:var(--sans);font-size:.72rem;text-align:center;transition:all .2s}
.day-btn:hover:not(:disabled){border-color:var(--olive);color:var(--cream)}
.day-btn.sel{background:var(--olive);color:var(--cream);border-color:var(--olive)}
.day-btn:disabled{opacity:.25;cursor:default}
.day-label{font-size:.58rem;letter-spacing:.1em;color:var(--cream2);text-transform:uppercase;text-align:center;padding:.3rem .1rem}

/* Time slots */
.slots-loading{font-size:.8rem;color:var(--cream2);letter-spacing:.15em;text-transform:uppercase;padding:2rem 0}
.slots-wrap{margin-bottom:2rem}
.slots-section{margin-bottom:1.5rem}
.slots-section-title{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--olive2);margin-bottom:.8rem}
.slots-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.slot-btn{background:var(--ink3);border:1px solid rgba(91,96,77,.2);color:var(--cream2);padding:.55rem 1rem;cursor:pointer;font-size:.78rem;font-family:var(--sans);transition:all .2s;letter-spacing:.05em}
.slot-btn:hover{border-color:var(--olive);color:var(--cream)}
.slot-btn.sel{background:var(--olive);color:var(--cream);border-color:var(--olive)}

/* Summary */
.summary-card{background:var(--ink3);border:1px solid rgba(91,96,77,.15);padding:2rem;margin-bottom:2rem}
.sum-row{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.82rem}
.sum-row .k{color:var(--cream2);letter-spacing:.08em}.sum-row .v{color:var(--cream);font-family:var(--serif);font-size:1rem}
.sum-note{font-size:.72rem;color:var(--cream2);line-height:1.7;margin-top:1.5rem;padding:1rem;border:1px solid rgba(91,96,77,.2)}
.sum-note strong{color:var(--cream)}

/* Buttons */
.btn-next{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--cream);border:none;padding:.85rem 2.2rem;cursor:pointer;transition:background .2s;display:inline-block;margin-top:auto}
.btn-next:hover{background:var(--silver)}
.btn-next:disabled{opacity:.3;cursor:default}
.btn-back{background:none;border:1px solid rgba(91,96,77,.3);color:var(--cream2);font-family:var(--sans);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;padding:.7rem 1.5rem;cursor:pointer;transition:all .2s}
.btn-back:hover{border-color:var(--olive);color:var(--cream)}
.step-actions{display:flex;gap:1rem;align-items:center;margin-top:auto;padding-top:2rem}
.btn-confirm{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--olive);border:none;padding:.85rem 2.2rem;cursor:pointer;transition:background .2s}
.btn-confirm:hover{background:var(--olive2)}
.slots-empty{font-size:.8rem;color:var(--cream2);padding:1.5rem 0;font-style:italic}

/* GALLERY */
#galeria{padding:0;background:var(--ink2)}
.gal-head{padding:8rem 4rem 3.5rem;max-width:1380px;margin:0 auto}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:340px 240px}
.gi{overflow:hidden}
.gi:nth-child(1){grid-column:span 2;grid-row:span 2}
.gi img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) saturate(.55);transition:transform .7s ease,filter .4s}
.gi:hover img{transform:scale(1.07);filter:brightness(.85) saturate(.7)}

/* QUOTE */
#quote{background:var(--olive3);padding:6rem 4rem;text-align:center}
.qt{font-family:var(--serif);font-size:clamp(1.8rem,4.5vw,3.8rem);font-weight:300;font-style:italic;color:var(--cream);line-height:1.2;max-width:900px;margin:0 auto 1.5rem}
.qt-sub{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(254,253,250,.4)}

/* INFO */
#info{background:var(--ink3)}
.info-2{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start;max-width:1380px;margin:0 auto}
.ib-t{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--cream);padding-bottom:1.5rem;border-bottom:1px solid rgba(91,96,77,.2);margin-bottom:2rem}
.hr{display:flex;justify-content:space-between;padding:.55rem 0;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.04)}
.hr .d{color:var(--cream2)}.hr .t{color:var(--cream)}.hr.off .t{color:var(--olive2);opacity:.6}
.ci{display:flex;gap:1.2rem;margin-bottom:1.8rem}
.ci-dot{width:4px;height:4px;border-radius:50%;background:var(--olive);margin-top:.65rem;flex-shrink:0}
.ci-b{font-size:.82rem;color:var(--cream2);line-height:1.75}
.ci-b a{color:var(--cream);text-decoration:none;transition:color .2s}.ci-b a:hover{color:var(--silver)}
.map-btn{display:inline-flex;align-items:center;gap:.8rem;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--olive2);text-decoration:none;margin-top:2rem;border:1px solid rgba(91,96,77,.3);padding:.75rem 1.4rem;transition:all .2s}
.map-btn:hover{border-color:var(--olive2);color:var(--cream)}

/* FOOTER */
footer{border-top:1px solid rgba(91,96,77,.12);padding:3rem 4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.f-logo svg{display:block}
.f-nav{display:flex;gap:2.5rem;list-style:none}
.f-nav a{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream2);text-decoration:none;transition:color .2s}
.f-nav a:hover{color:var(--cream)}
.f-copy{width:100%;text-align:center;font-size:.6rem;color:#252520;letter-spacing:.12em;margin-top:.5rem}

/* FLOAT */
.float-btn{position:fixed;bottom:2rem;right:2rem;z-index:400;font-family:var(--sans);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--cream);padding:.9rem 1.6rem;text-decoration:none;box-shadow:0 12px 40px rgba(0,0,0,.8);transition:background .2s,transform .15s;display:flex;align-items:center;gap:.7rem;opacity:0;animation:up .6s 1.3s forwards}
.float-btn:hover{background:var(--silver);transform:translateY(-2px)}
.f-dot{width:5px;height:5px;border-radius:50%;background:var(--olive);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* MOB NAV */
.mob-nav{display:none;position:fixed;inset:0;background:var(--ink);z-index:499;flex-direction:column;align-items:center;justify-content:center;gap:3rem}
.mob-nav.open{display:flex}
.mob-nav a{font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--cream);text-decoration:none;letter-spacing:.04em;transition:color .2s}
.mob-nav a:hover{color:var(--silver)}

/* ANIM */
@keyframes up{to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}
.reveal.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* RESPONSIVE */
@media(max-width:960px){
  nav,nav.stuck{padding:1.2rem 1.5rem}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  #hero{padding:0 1.5rem 5rem}
  .hero-inner{grid-template-columns:1fr}
  .hero-right{display:none}
  .sec{padding:5rem 1.5rem}
  .strip{gap:2rem;padding:1.1rem 1.5rem}
  .srv-wrap,.bk-outer,.info-2{grid-template-columns:1fr}
  .srv-grid,.svc-list{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gi:nth-child(1){grid-column:span 2;height:280px}
  .gi{height:200px}
  .gal-head{padding:5rem 1.5rem 2rem}
  #quote{padding:4rem 1.5rem}
  footer{flex-direction:column;text-align:center;padding:2rem 1.5rem}
  .float-btn{bottom:1rem;right:1rem}
  .step{padding:2rem 1.5rem}
  .barber-list{gap:.5rem}
}


/* ─── Añadidos v3: estados reales de disponibilidad ─── */
.day-btn{position:relative}
.day-btn.full{opacity:.4}
.day-btn.free::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--olive2)}
.day-btn.sel::after{background:var(--cream)}
.day-btn.checking{opacity:.5}

.notice{border:1px solid rgba(91,96,77,.28);background:var(--ink3);padding:1.4rem 1.5rem;margin:.5rem 0 1.5rem}
.notice-t{font-family:var(--serif);font-size:1.05rem;color:var(--cream);margin-bottom:.5rem}
.notice-b{font-size:.78rem;color:var(--cream2);line-height:1.75;margin-bottom:1.1rem}
.notice-b strong{color:var(--cream);font-weight:400}
.link-btn{background:none;border:1px solid rgba(91,96,77,.4);color:var(--cream2);font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:.7rem 1.3rem;cursor:pointer;transition:all .2s}
.link-btn:hover{border-color:var(--olive2);color:var(--cream)}

.slots-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.2rem;gap:1rem;flex-wrap:wrap}
.slots-date{font-family:var(--serif);font-size:1.15rem;color:var(--cream);text-transform:capitalize}
.slots-count{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive2)}

.wait-note{font-size:.72rem;color:var(--cream2);line-height:1.7;border-left:1px solid var(--olive);padding-left:1rem;margin-top:1.2rem}

.svc-item:focus-visible,.barber-card:focus-visible,.day-btn:focus-visible,.slot-btn:focus-visible,.link-btn:focus-visible,.btn-next:focus-visible,.btn-back:focus-visible,.btn-confirm:focus-visible,.nav-cta:focus-visible,a:focus-visible{outline:2px solid var(--olive2);outline-offset:2px}

.svc-item,.barber-card{-webkit-tap-highlight-color:transparent}
.step-error{font-size:.75rem;color:var(--cream2);line-height:1.75}
.step-error a{color:var(--cream)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-left,.hero-right,.float-btn{opacity:1;animation:none}
}

/* Tarjetas convertidas a <button> reales (accesibilidad) — reset visual */
.svc-item,.barber-card{display:block;width:100%;text-align:left;font-family:var(--sans);appearance:none}
.svc-item span,.barber-card span{display:block}
.barber-card{text-align:center}
.svc-item-name{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--cream);margin-bottom:.3rem}
.svc-item-price{font-size:.78rem;color:var(--olive2);letter-spacing:.1em}
.svc-item-dur{font-size:.68rem;color:var(--cream2);letter-spacing:.08em;margin-top:.2rem}
.barber-avatar{width:50px;height:50px;border-radius:50%;background:var(--olive3);margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--cream2)}
.barber-name{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--cream)}
.burger{background:none;border:none}
.day-label{display:block}
.day-btn.closed{opacity:.18;text-decoration:line-through}
.day-btn.closed::after{display:none}

@media(max-width:960px){
  .day-btn{min-height:44px;font-size:.8rem}
  .slot-btn{min-height:44px;padding:.7rem 1.1rem}
  .link-btn{min-height:44px}
  .btn-next,.btn-back,.btn-confirm{min-height:44px}
  .slots-head{gap:.3rem}
}