/* =========================================================
   MAESTRO BARBER CO.
   Paleta: negro carbón #121212, cobre envejecido #B5764A,
   crema hueso #EDE3D3
   Tipografía: Roboto Slab (títulos, autoridad) + Inter (cuerpo)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --black:#121212;
  --black-2:#1C1712;
  --copper:#B5764A;
  --copper-dim:#8F5D39;
  --cream:#EDE3D3;
  --cream-dim:#bfb6a6;

  --font-title:'Roboto Slab', serif;
  --font-body:'Inter', sans-serif;

  --ease:cubic-bezier(.16,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader img{
  width:52px;
  animation:preloaderPulse 1.3s ease-in-out infinite;
}
.preloader.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@keyframes preloaderPulse{
  0%,100%{opacity:.45;transform:scale(.9);}
  50%{opacity:1;transform:scale(1);}
}

.eyebrow{
  font-family:var(--font-title);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--copper);
}

h1,h2,h3{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:.005em;
  color:var(--cream);
}

.section-title{
  font-size:clamp(1.9rem,3.4vw,2.8rem);
  margin:.8rem 0 1.1rem;
}

.section-sub{
  color:var(--cream-dim);
  font-weight:300;
  max-width:48ch;
  margin-bottom:2.6rem;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 6vw;
}

section{
  padding:clamp(4rem,9vw,7.5rem) 0;
}

/* ---------- reveal on scroll (replays each time) ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > * {
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-stagger.in-view > *{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.17s;}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.29s;}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.41s;}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.53s;}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 6vw;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(18,18,18,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:1rem 6vw;
  border-bottom:1px solid rgba(181,118,74,.22);
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.nav-logo img{width:28px;height:28px;}
.nav-logo span{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:.14em;
  font-size:.92rem;
  color:var(--cream);
  line-height:1.2;
}
.nav-logo span em{
  font-style:normal;
  display:block;
  font-size:.62em;
  letter-spacing:.18em;
  color:var(--copper);
  font-weight:600;
}
.nav-links{
  display:flex;
  gap:2.2rem;
  align-items:center;
}
.nav-links a{
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--cream-dim);
  transition:color .3s;
}
.nav-links a:hover{color:var(--copper);}
.nav-links a.nav-cta{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--black);
  background:var(--copper);
  padding:.65rem 1.5rem;
  border-radius:999px;
  transition:background .3s, transform .3s;
}
.nav-links a.nav-cta:hover{background:var(--cream);color:var(--black);transform:translateY(-1px);}
.nav-burger{display:none;background:none;border:0;color:var(--cream);font-size:1.5rem;cursor:pointer;}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  position:relative;
  padding:0 6vw;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.75) brightness(.55);
  transform:scale(1.15);
  will-change:transform;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(18,18,18,.96) 0%, rgba(18,18,18,.82) 42%, rgba(18,18,18,.55) 100%),
    linear-gradient(0deg, rgba(18,18,18,.5), transparent 40%);
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:640px;
  padding-top:4rem;
}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,4.4rem);
  letter-spacing:.01em;
  line-height:1.04;
  margin-top:1rem;
}
.hero h1 span{display:inline-block;}
.hero-line-1{transition-delay:.1s;}
.hero-line-2{transition-delay:.28s;}
.hero-line-3{transition-delay:.46s;}
.hero-line-4{transition-delay:.64s;}
.hero p{
  margin:1.6rem 0 0;
  max-width:42ch;
  color:var(--cream-dim);
  font-size:1.04rem;
  font-weight:300;
}
.hero-actions{
  margin-top:2.6rem;
  display:flex;
  gap:1.1rem;
  flex-wrap:wrap;
}
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  padding:.95rem 2.1rem;
  border-radius:999px;
  border:1px solid var(--copper);
  transition:background .35s, color .35s, transform .35s;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.btn-primary{
  background:var(--copper);
  color:var(--black);
}
.btn-primary:hover{background:var(--cream);transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  color:var(--cream);
  border-color:rgba(237,227,211,.4);
}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-2px);}
.hero-scroll{
  position:absolute;
  bottom:2.4rem;
  left:6vw;
  z-index:1;
  width:1px;
  height:52px;
  background:linear-gradient(180deg, var(--copper), transparent);
  overflow:hidden;
}
.hero-scroll::after{
  content:'';
  position:absolute;
  top:-52px;left:0;
  width:1px;height:52px;
  background:var(--cream);
  animation:scrollLine 2.6s infinite ease-in-out;
}
@keyframes scrollLine{
  0%{top:-52px;}
  60%{top:52px;}
  100%{top:52px;}
}

/* ---------- oficio (cierre) ---------- */
.oficio{
  position:relative;
  overflow:hidden;
  background:var(--black-2);
}
.oficio-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.oficio-bg img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.4) brightness(.24) saturate(1.1);
}
.oficio-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(181,118,74,.14), transparent 60%),
    linear-gradient(180deg, var(--black-2) 0%, rgba(28,23,18,.85) 40%, var(--black-2) 100%);
}
.oficio .container{position:relative;z-index:1;}
.oficio-quote{
  font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1.18;
  max-width:17ch;
  margin-bottom:1.3rem;
}
.oficio-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  text-align:center;
  border-top:1px solid rgba(181,118,74,.2);
  border-bottom:1px solid rgba(181,118,74,.2);
  padding:2.6rem 0;
  margin:3rem 0 3rem;
}
.oficio-item{
  position:relative;
  padding:0 .8rem;
  transition:transform .3s var(--ease);
}
.oficio-item:not(:last-child)::after{
  content:'';
  position:absolute;
  top:50%;right:0;
  transform:translateY(-50%);
  width:1px;height:34px;
  background:rgba(181,118,74,.2);
}
.oficio-item:hover{transform:translateY(-6px);}
.oficio-item svg{
  width:36px;height:36px;
  stroke:var(--copper);
  color:var(--copper);
  margin:0 auto 1rem;
  transition:transform .3s var(--ease);
}
.oficio-item:hover svg{transform:scale(1.12);}
.oficio-item span{
  font-family:var(--font-title);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
}
.oficio-cta{margin-top:.5rem;}

/* ---------- galeria ---------- */
.galeria{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(181,118,74,.14), transparent 65%),
    var(--black-2);
  border-top:1px solid rgba(181,118,74,.1);
  padding-top:4rem;
  padding-bottom:3rem;
}
.galeria-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
  gap:.6rem;
}
.galeria-grid div{
  border-radius:18px;
  position:relative;
  overflow:hidden;
  background:var(--black);
}
.galeria-grid div:nth-child(1){grid-column:span 2;grid-row:span 2;}
.galeria-grid div:nth-child(4){grid-column:span 2;}
.galeria-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.85) brightness(.85);
  transition:transform 1.1s var(--ease), filter .5s;
}
.galeria-grid div::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,18,18,0) 45%, rgba(18,18,18,.6) 100%);
  pointer-events:none;
}
.galeria-grid div:hover img{
  transform:scale(1.06);
  filter:saturate(.95) brightness(.92);
}

/* ---------- reservas ---------- */
.reservas{
  background:var(--black);
  padding-top:3rem;
}
.booking{
  position:relative;
  overflow:hidden;
  background:rgba(28,23,18,.55);
  border:1px solid rgba(181,118,74,.25);
  border-radius:24px;
  padding:clamp(1.6rem,4vw,3rem);
}
.booking-intro{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black-2);
  opacity:0;
  pointer-events:none;
}
.booking-intro img{
  width:64px;height:64px;
  opacity:.92;
}
.booking.in-view .booking-intro{
  animation:bookingIntro 1.9s var(--ease) forwards;
}
@keyframes bookingIntro{
  0%{opacity:0;}
  18%{opacity:1;}
  55%{opacity:1;}
  100%{opacity:0;}
}
.booking-perks{
  text-align:center;
  margin-top:1.6rem;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--cream-dim);
}
.booking-steps{
  display:flex;
  gap:1.6rem;
  margin-bottom:2.4rem;
  flex-wrap:wrap;
}
.booking-step{
  font-family:var(--font-title);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream-dim);
  display:flex;
  align-items:center;
  gap:.5rem;
  cursor:default;
  transition:color .25s, transform .25s var(--ease);
}
.booking-step.active{color:var(--copper);}
.booking-step.reachable{cursor:pointer;}
.booking-step.reachable:hover{color:var(--cream);transform:translateY(-1px);}
.booking-step.reachable.active:hover{color:var(--copper);}
.booking-step .dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(181,118,74,.35);
  transition:background .25s;
}
.booking-step.active .dot{background:var(--copper);}
.booking-step.reachable .dot{background:rgba(181,118,74,.6);}

.booking-panel{display:none;}
.booking-panel.active{display:block;animation:panelFade .55s var(--ease);}
@keyframes panelFade{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.option-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.2rem;
  max-width:680px;
}
.option-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(181,118,74,.3);
  padding:1.9rem 1.7rem;
  border-radius:20px;
  cursor:pointer;
  transition:transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
  background:transparent;
  text-align:left;
  color:var(--cream);
  font-family:var(--font-body);
}
.option-card:hover{border-color:var(--copper);transform:translateY(-6px);box-shadow:0 18px 36px -20px rgba(0,0,0,.6);}
.option-card.selected{
  border-color:var(--copper);
  background:rgba(181,118,74,.1);
}
.option-card .oc-title{
  font-family:var(--font-title);
  font-weight:600;
  font-size:1.2rem;
  margin-bottom:.45rem;
}
.option-card .oc-meta{
  font-size:.85rem;
  color:var(--cream-dim);
}

/* ---------- barbero (paso 2) ---------- */
.barbero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1rem;
}
.barbero-card{
  position:relative;
  border:1px solid rgba(181,118,74,.3);
  border-radius:20px;
  cursor:pointer;
  transition:transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
  background:transparent;
  text-align:left;
  color:var(--cream);
  font-family:var(--font-body);
  overflow:hidden;
}
.barbero-card:hover{border-color:var(--copper);transform:translateY(-6px);box-shadow:0 18px 36px -20px rgba(0,0,0,.6);}
.barbero-card.selected{border-color:var(--copper);background:rgba(181,118,74,.1);}

/* cursor spotlight (posición fijada por JS via --mx/--my) */
.option-card::after,
.barbero-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(181,118,74,.22), transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.option-card:hover::after,
.barbero-card:hover::after{opacity:1;}
.barbero-card .bc-photo{
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--black-2);
}
.barbero-card .bc-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.92);
}
.barbero-card .bc-body{padding:1rem 1.1rem 1.2rem;}
.barbero-card .bc-name{
  font-family:var(--font-title);
  font-weight:600;
  font-size:1rem;
  margin-bottom:.25rem;
}
.barbero-card .bc-role{
  font-size:.78rem;
  color:var(--cream-dim);
}

.fecha-hora-grid{
  display:flex;
  gap:3rem;
  flex-wrap:wrap;
}
.fecha-col{flex:0 0 auto;}
.hora-col{
  flex:1;
  min-width:220px;
  padding-top:2.7rem;
}
.hora-hint{
  color:var(--cream-dim);
  font-size:.85rem;
  transition:opacity .3s;
}
.hora-hint.hidden{display:none;}

.calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.35rem;
  max-width:400px;
}
.calendar .dow{
  text-align:center;
  font-family:var(--font-title);
  font-weight:600;
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--cream-dim);
  padding-bottom:.3rem;
}
.day{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(181,118,74,.2);
  border-radius:50%;
  font-size:.74rem;
  cursor:pointer;
  transition:all .25s;
  color:var(--cream-dim);
}
.day.empty{border:none;cursor:default;}
.day.available:hover{border-color:var(--copper);color:var(--cream);}
.day.selected{background:var(--copper);color:var(--black);border-color:var(--copper);font-weight:600;transform:scale(1.08);}
.day.disabled{
  color:rgba(181,118,74,.25);
  cursor:not-allowed;
  text-decoration:line-through;
}

.time-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:.7rem;
  max-width:640px;
  opacity:0;
  transition:opacity .4s var(--ease);
}
.time-grid.visible{opacity:1;}
.time-slot{
  padding:.7rem .5rem;
  text-align:center;
  border:1px solid rgba(181,118,74,.3);
  border-radius:999px;
  font-size:.84rem;
  cursor:pointer;
  transition:transform .25s var(--ease), border-color .25s, color .25s;
  color:var(--cream-dim);
}
.time-slot:hover{border-color:var(--copper);color:var(--cream);transform:translateY(-3px);}
.time-slot.selected{background:var(--copper);color:var(--black);border-color:var(--copper);}
.time-slot.blocked{
  opacity:.3;
  cursor:not-allowed;
  text-decoration:line-through;
}

.booking-nav{
  display:flex;
  justify-content:space-between;
  margin-top:2.6rem;
  gap:1rem;
}

.confirm-lead{
  font-family:var(--font-title);
  font-weight:600;
  font-size:1.15rem;
  color:var(--cream);
  margin-bottom:1.4rem;
}

/* ---------- boleto de confirmación ---------- */
.summary{
  border:1px solid rgba(181,118,74,.35);
  border-radius:20px;
  padding:0;
  margin-bottom:1.8rem;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(181,118,74,.07), transparent 45%);
  box-shadow:0 25px 60px -30px rgba(0,0,0,.7);
  animation:ticketPop .5s var(--ease);
}
@keyframes ticketPop{
  from{opacity:0;transform:translateY(10px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.ticket-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:1.1rem 1.6rem;
  border-bottom:1px solid rgba(181,118,74,.2);
}
.ticket-brand img{width:20px;height:20px;}
.ticket-brand span{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.68rem;
  color:var(--copper);
}
.ticket-barber{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.6rem;
}
.ticket-barber img{
  width:52px;height:52px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 0 0 2px rgba(181,118,74,.4);
}
.ticket-barber-name{
  font-family:var(--font-title);
  font-weight:700;
  font-size:1.05rem;
}
.ticket-service{
  font-size:.85rem;
  color:var(--cream-dim);
  margin-top:.15rem;
}
.ticket-divider{
  border-top:1px dashed rgba(181,118,74,.32);
  margin:0 1.6rem;
}
.ticket-row{
  display:flex;
  justify-content:space-between;
  padding:.8rem 1.6rem;
  font-size:.9rem;
}
.ticket-row span:first-child{color:var(--cream-dim);}
.ticket-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1.3rem 1.6rem 1.5rem;
  background:rgba(181,118,74,.09);
}
.ticket-total span:first-child{
  font-family:var(--font-title);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--cream-dim);
  align-self:center;
}
.ticket-total span:last-child{
  font-family:var(--font-title);
  font-weight:800;
  font-size:1.7rem;
  color:var(--copper);
}
.ticket-total small{
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--cream-dim);
  margin-left:.25rem;
}

.field{
  margin-bottom:1.2rem;
}
.field label{
  display:block;
  font-family:var(--font-title);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:.5rem;
}
.field input,.field textarea{
  width:100%;
  background:transparent;
  border:1px solid rgba(181,118,74,.4);
  border-radius:12px;
  padding:.8rem 1rem;
  color:var(--cream);
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:300;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--copper);}

.confirm-check{
  text-align:center;
  padding:2rem 0;
}
.confirm-logo{
  width:72px;
  padding:16px;
  border-radius:50%;
  background:var(--black);
  box-shadow:0 0 0 1px rgba(181,118,74,.4), 0 15px 40px rgba(0,0,0,.5);
  margin:0 auto 1.5rem;
  animation:confirmPop .6s var(--ease);
}
@keyframes confirmPop{
  from{opacity:0;transform:scale(.7);}
  to{opacity:1;transform:scale(1);}
}

/* ---------- footer ---------- */
footer{
  background:var(--black);
  border-top:1px solid rgba(181,118,74,.18);
  padding:3.5rem 0 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:2.5rem;
}
.footer-brand span{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:.1em;
  font-size:1rem;
}
.footer-brand span em{
  font-style:normal;
  display:block;
  font-size:.62em;
  letter-spacing:.16em;
  color:var(--copper);
  font-weight:600;
}
.footer-brand p{
  color:var(--cream-dim);
  font-size:.85rem;
  margin-top:1rem;
  max-width:32ch;
}
.footer-col h4{
  font-family:var(--font-title);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--copper);
  margin-bottom:1rem;
}
.footer-col a,.footer-col p{
  display:block;
  color:var(--cream-dim);
  font-size:.86rem;
  margin-bottom:.6rem;
}
.footer-col a:hover{color:var(--copper);}
.footer-bottom{
  border-top:1px solid rgba(181,118,74,.12);
  padding-top:1.6rem;
  font-size:.75rem;
  color:rgba(237,227,211,.4);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
}
.credit-link{
  color:rgba(181,118,74,.75);
  transition:color .25s;
}
.credit-link:hover{color:var(--copper);}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed;
  bottom:1.8rem;
  right:1.8rem;
  z-index:200;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;fill:#fff;}

/* ---------- admin ---------- */
.admin-body{background:var(--black);min-height:100vh;}
.admin-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-login form{
  width:min(360px,90vw);
  border:1px solid rgba(181,118,74,.3);
  padding:2.6rem;
  border-radius:24px;
  text-align:center;
}
.admin-login .admin-logo{width:56px;margin:0 auto 1.4rem;}
.admin-login h2{font-size:1.3rem;margin-bottom:.4rem;}
.admin-login p{color:var(--cream-dim);font-size:.85rem;margin-bottom:1.8rem;}
.admin-login .field{text-align:left;}
.admin-note{
  margin-top:1.4rem;
  font-size:.72rem;
  color:var(--cream-dim);
  line-height:1.5;
}

.admin-shell{display:none;}
.admin-shell.active{display:block;}
.admin-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.4rem 6vw;
  border-bottom:1px solid rgba(181,118,74,.2);
}
.admin-topbar .nav-logo span{font-size:.85rem;}
.admin-main{
  padding:2.6rem 6vw 5rem;
  max-width:1180px;
  margin:0 auto;
}
.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:1.2rem;
  margin-bottom:2.2rem;
}
.admin-legend{
  display:flex;
  gap:1.4rem;
  font-size:.78rem;
  color:var(--cream-dim);
  flex-wrap:wrap;
}
.legend-dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:2px;
  margin-right:.4rem;
}
.admin-tabs{
  display:inline-flex;
  gap:.25rem;
  padding:.3rem;
  border:1px solid rgba(181,118,74,.28);
  border-radius:30px;
  margin-bottom:1.6rem;
  flex-wrap:wrap;
}
.admin-tabs .tab{
  font-family:var(--font-title);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream-dim);
  background:transparent;
  border:none;
  padding:.5rem 1.1rem;
  border-radius:20px;
  cursor:pointer;
  transition:all .3s;
}
.admin-tabs .tab.active,.admin-tabs .tab:hover{
  color:var(--black);
  background:var(--copper);
}
.admin-section{
  margin-top:3rem;
}
.admin-section h3{font-size:1.05rem;margin-bottom:1rem;font-weight:600;}

.week-nav{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.4rem;
}
.week-nav button{
  background:transparent;
  border:1px solid rgba(181,118,74,.3);
  color:var(--cream);
  width:34px;height:34px;
  border-radius:50%;
  cursor:pointer;
  font-family:var(--font-title);
  transition:transform .25s var(--ease), border-color .25s;
}
.week-nav button:hover{transform:translateY(-2px);}
.week-nav button:hover{border-color:var(--copper);color:var(--copper);}
.week-nav span{font-family:var(--font-title);font-weight:600;font-size:.85rem;letter-spacing:.03em;}

.admin-schedule{
  display:grid;
  grid-template-columns:80px repeat(7,1fr);
  gap:.35rem;
  overflow-x:auto;
}
.sched-head{
  text-align:center;
  font-family:var(--font-title);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--cream-dim);
  padding-bottom:.5rem;
}
.sched-time{
  font-size:.72rem;
  color:var(--cream-dim);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:.5rem;
}
.slot{
  min-height:34px;
  border-radius:6px;
  cursor:pointer;
  border:1px solid rgba(181,118,74,.14);
  transition:all .2s;
}
.slot.open{background:rgba(181,118,74,.28);}
.slot.blocked{background:rgba(181,118,74,.06);}
.slot.booked{background:var(--copper);cursor:default;}
.slot:hover:not(.booked){outline:1px solid var(--copper);}

.barber-manage-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.2rem;
  border:1px solid rgba(181,118,74,.2);
  border-radius:16px;
  margin-bottom:.8rem;
  flex-wrap:wrap;
  transition:border-color .3s, transform .3s var(--ease);
}
.barber-manage-row:hover{border-color:rgba(181,118,74,.4);}
.barber-manage-row .bm-photo{
  width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;
}
.barber-manage-row .bm-photo img{width:100%;height:100%;object-fit:cover;}
.barber-manage-row .bm-info{flex:1;min-width:180px;}
.barber-manage-row .bm-info strong{font-family:var(--font-title);font-size:.95rem;display:block;}
.barber-manage-row .bm-info span{font-size:.78rem;color:var(--cream-dim);}
.barber-manage-row input[type="text"]{
  background:transparent;
  border:1px solid rgba(181,118,74,.3);
  border-radius:10px;
  padding:.5rem .7rem;
  color:var(--cream);
  font-family:var(--font-body);
  font-size:.82rem;
  width:200px;
}
.bm-toggle{
  font-family:var(--font-title);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.5rem 1rem;
  border-radius:20px;
  border:1px solid rgba(181,118,74,.35);
  background:transparent;
  color:var(--cream-dim);
  cursor:pointer;
  transition:all .25s;
}
.bm-toggle.active{background:var(--copper);color:var(--black);border-color:var(--copper);}

.day-list{
  margin-top:2.5rem;
}
.day-list h3{font-size:1.05rem;margin-bottom:1rem;font-weight:600;}
.dl-row{
  display:flex;
  justify-content:space-between;
  padding:.9rem 0;
  border-bottom:1px solid rgba(181,118,74,.14);
  font-size:.87rem;
  flex-wrap:wrap;
  gap:.3rem;
}
.dl-row span:first-child{color:var(--copper);font-family:var(--font-title);font-weight:600;width:70px;}
.dl-row span.tag{
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .option-grid{grid-template-columns:1fr;max-width:none;}
  .nav-links{
    position:fixed;
    top:0;right:-100%;
    height:100vh;
    width:min(320px,80vw);
    background:rgba(18,18,18,.98);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:2rem 3rem;
    gap:2rem;
    transition:right .45s var(--ease);
    backdrop-filter:blur(20px);
  }
  .nav-links.open{right:0;}
  .nav-burger{display:block;}
  .hero-content{padding-top:6rem;}
  .oficio-grid{grid-template-columns:repeat(2,1fr);gap:2.2rem;border:none;padding:0;}
  .oficio-item::after{display:none;}
  .oficio-quote{max-width:none;}
  .galeria-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;}
  .footer-grid{grid-template-columns:1fr;}
  .admin-schedule{grid-template-columns:60px repeat(7,minmax(70px,1fr));}
}