/* Navalha Carioca — barbearia clássica de bairro. Papel e tinta, com o vermelho do poste de barbeiro como único acento.
   Assinatura: faixa de piso xadrez. Títulos em slab pesada, texto em sans condensada de placa. */
:root{
  --bg:oklch(96.5% .015 85);--surface:oklch(99% .008 85);--ink:oklch(21% .012 60);--muted:oklch(41% .02 60);
  --line:oklch(88% .02 80);--line-strong:oklch(73% .03 75);
  --accent:oklch(48% .17 27);--accent-hover:oklch(41% .16 27);--accent-ink:oklch(98.5% .008 85);--accent-text:oklch(46% .17 27);--accent-soft:oklch(93% .03 65);
  --dark:oklch(21% .012 60);
  --serif:'Rokkitt',Georgia,serif;--sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:4px;--field-radius:4px;--btn-radius:3px;--img-radius:2px;--hw:800;--focus:oklch(48% .17 27)
}
body{font-size:17px}
h1,h2,h3{letter-spacing:-.01em;line-height:1.02}
h1{font-size:clamp(52px,7.4vw,108px);line-height:.96}
h2{font-size:clamp(40px,5vw,72px)}
h3{font-size:clamp(26px,2.4vw,34px)}
.brand{font-size:30px;letter-spacing:.03em;text-transform:uppercase}
.btn{text-transform:uppercase;letter-spacing:.06em;font-size:14.5px}
.svc-name,.choice-text strong{font-size:clamp(24px,2.2vw,30px)}
.choice-text strong{font-size:24px}
.step legend{font-size:clamp(28px,2.6vw,34px)}
.book-summary dd,#done-details dd{font-size:24px}

/* Faixas escuras: a tinta é a identidade */
.drench{background:var(--dark);color:var(--accent-ink);--bg:var(--dark);--ink:var(--accent-ink);--surface:oklch(27% .012 60);--muted:oklch(80% .02 80);--line:oklch(36% .015 60);--line-strong:oklch(48% .02 60);--accent-text:oklch(74% .14 30);--btn-bg:oklch(52% .18 27);--btn-ink:oklch(99% .005 85);--btn-hover:oklch(58% .18 27);--ghost-hover-bg:var(--accent-ink);--ghost-hover-ink:oklch(21% .012 60);--focus:oklch(80% .12 35)}
.drench em{color:var(--accent-text)}
em{font-style:italic}

/* Assinatura: piso xadrez */
.checker{height:24px;background:conic-gradient(oklch(21% .012 60) 25%,oklch(98% .008 85) 0 50%,oklch(21% .012 60) 0 75%,oklch(98% .008 85) 0) 0 0/24px 24px;border-block:1px solid oklch(21% .012 60)}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:min(80svh,700px)}
.hero-copy{padding:clamp(32px,4vw,56px) clamp(24px,5vw,72px) clamp(32px,4vw,56px) max(var(--gutter),calc((100vw - 1200px)/2));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px}
.kicker{font:600 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.18em;color:var(--accent-text)}
.hero .lead{color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{font-size:15px;color:var(--muted);max-width:46ch}
.hero-photo{position:relative;margin:0;min-height:420px;overflow:hidden;border-bottom:10px solid var(--btn-bg)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}

.proof{padding-block:20px;border-bottom:1px solid var(--line)}
.proof ul{display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;font:500 16px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.proof li{display:flex;gap:12px;align-items:center}
.proof li::before{content:'';width:9px;height:9px;background:var(--accent)}

.svc-meta .price{font-size:17px;color:var(--ink)}
.svc:hover .svc-name{color:var(--accent-text)}

.crew{background:var(--accent-soft)}
#barbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.barber{display:grid;gap:16px;align-content:start}
.barber img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--img-radius);border-bottom:6px solid var(--accent)}
.barber h3{margin-bottom:4px}
.barber p{color:var(--muted)}
.barber .barber-days{font:600 14px var(--sans);text-transform:uppercase;letter-spacing:.1em;margin:6px 0 6px;color:var(--ink)}
.barber .barber-next{font:500 15px var(--sans);margin:0 0 14px;color:var(--muted)}
.barber .barber-next b{color:var(--ink)}

.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,104px);align-items:center}
.about-photos{position:relative;padding-bottom:18%}
.about-photos img{border-radius:var(--img-radius)}
.about-photos .a{width:78%;height:auto;aspect-ratio:4/5;object-fit:cover}
.about-photos .b{position:absolute;right:0;bottom:0;width:48%;height:auto;aspect-ratio:1;object-fit:cover;border:6px solid var(--bg)}
.about h2{margin-bottom:24px}
.about p+p{margin-top:16px}
.about p{color:var(--muted);max-width:54ch}
.about-list{margin-top:28px;display:grid;gap:12px}
.about-list li{padding-left:28px;position:relative}
.about-list li::before{content:'';position:absolute;left:0;top:.62em;width:14px;height:3px;background:var(--accent)}

.contact{padding-block:clamp(72px,9vw,128px)}
.contact .lead{color:var(--muted)}

/* Agendamento: escolha do barbeiro */
.choice-barber{gap:14px}
.avatar{width:48px;height:48px;flex:none;object-fit:cover;border-radius:var(--field-radius);color:var(--ink)}
.choice-barber .choice-text{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.choice-barber .choice-text small{white-space:normal}

@media(max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:40px var(--gutter) 36px}
  .hero-photo{min-height:0;aspect-ratio:4/3.2}
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .proof ul{flex-direction:column}
  #barbers{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:2px var(--gutter) 10px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #barbers::-webkit-scrollbar{display:none}
  .barber{flex:0 0 74%;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.hero-copy>*{animation:none}}

/* Movimento: a casa abre. Tudo nasce visível; a animação só realça. */
.hero-copy>*{animation:arrive .9s cubic-bezier(.16,1,.3,1) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.18s}
.hero-copy>:nth-child(4){animation-delay:.28s}
.hero-copy>:nth-child(5){animation-delay:.36s}
.hero-photo img{animation:settle 1.8s cubic-bezier(.16,1,.3,1) both}
@keyframes settle{from{transform:scale(1.1);opacity:0}}
.svc-meta b span{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.svc:hover .svc-meta b span{transform:translateX(6px)}
.svc-name{transition:color .25s}

@media(max-width:860px){.svc-card-img{aspect-ratio:5/4}}

/* Celular: resumo fixo em 2x2, para caber os quatro campos sem estourar a largura */
@media(max-width:860px){
  .book-summary dl{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:6px 14px}
  .book-summary dl>div{min-width:0}
  .book-summary dd{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
  .book-summary dd::first-letter{text-transform:uppercase}
  .book-grid{padding-bottom:150px}
}