/* ==========================================================================
   BARBEARIA IMPERIAL · ESTILOS (redesign editorial)
   --------------------------------------------------------------------------
   Paleta, tipografia e espaçamento vivem nas variáveis do :root.
   Trocar a cor de destaque = mudar --acento.

   Regras da linguagem visual:
   · raio 2px em botões e chips, 0 em cartões, imagens e tabelas;
   · sombra praticamente ausente (só o botão flutuante e vinhetas internas);
   · transições de .2s a .25s em background, color, border-color e transform.
   ========================================================================== */

:root{
  /* Superfícies claras (papel) */
  --papel:#F4F0E8;
  --papel-2:#EAE4D8;
  --cartao:#FFFDF8;

  /* Superfícies escuras */
  --tinta:#16140F;
  --preto:#0E0C09;
  --escuro:#15120D;
  --escuro-2:#1C1913;

  /* Texto */
  --corpo:#3A342B;
  --sec:#5A5449;
  --sec-2:#6B6459;
  --fraco:#8C8578;
  --fraco-2:#A9A296;

  /* Acento (terracota) */
  --acento:#8C3A24;
  --acento-claro:#D9A38A;
  --acento-claro-2:#C98A6E;
  --sobre-acento:#FBEFE8;

  /* Estados */
  --ok:#2E6A4F;
  --ok-fundo:rgba(46,106,79,.12);
  --erro:#9A5A52;
  --erro-fundo:rgba(154,90,82,.12);

  /* Linhas */
  --linha:rgba(22,20,15,.12);
  --linha-forte:rgba(22,20,15,.16);
  --linha-esc:rgba(244,240,232,.10);
  --linha-esc-2:rgba(244,240,232,.14);

  /* Tipografia */
  --display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ui:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Medidas */
  --wrap:1240px;
  --secao-y:clamp(70px,9vw,130px);
  --r:2px;
}

/* ============================================================== BASE ==== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--papel);color:var(--corpo);
  font-family:var(--ui);font-size:16px;font-weight:400;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(140,58,36,.15);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.1;color:var(--tinta)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:600}

/* O design usa muito botão sem fundo: o foco precisa aparecer sempre. */
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--r)}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.secao{padding:var(--secao-y) 0;position:relative}
.secao--clara{background:var(--papel-2)}
section[id]{scroll-margin-top:84px}

/* Pular para o conteúdo (teclado) */
.pular{
  position:absolute;left:14px;top:-70px;z-index:200;
  background:var(--acento);color:var(--sobre-acento);padding:12px 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:top .2s;
}
.pular:focus{top:0}

/* ========================================================= TIPOGRAFIA ==== */

/* Rótulo de seção: 01 SERVICOS .... */
.rotulo{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--acento);
}
.rotulo::before{content:attr(data-num);color:var(--fraco-2);font-variant-numeric:tabular-nums}
.rotulo::after{content:"";height:1px;flex:1;max-width:70px;background:var(--linha-forte)}
.rotulo--claro{color:var(--acento-claro)}
.rotulo--claro::before{color:rgba(244,240,232,.4)}
.rotulo--claro::after{background:var(--linha-esc-2)}
.rotulo--sem-linha::after{display:none}

.titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.02em;
  color:var(--tinta);text-wrap:balance;
}
.titulo--menor{font-size:clamp(34px,4.2vw,54px);line-height:1.04}
.titulo em{font-style:italic;color:var(--acento)}
.titulo--claro{color:var(--papel)}
.titulo--claro em{color:var(--acento-claro)}

.sub{max-width:52ch;margin-top:22px;font-size:17px;color:var(--sec);text-wrap:pretty}
.sub--claro{color:rgba(244,240,232,.72)}

/* Cabeçalho de seção com o texto de apoio à direita */
.cabeca{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;
  gap:28px;margin-bottom:50px;
}
.cabeca__apoio{margin:0;max-width:36ch;font-size:15px;color:var(--sec-2)}
.cabeca__apoio--claro{color:rgba(244,240,232,.62)}

/* ============================================================= BOTÕES ==== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border:1px solid transparent;border-radius:var(--r);
  font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  cursor:pointer;background:none;text-align:center;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn svg{width:15px;height:15px;fill:currentColor;flex:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* escuro sobre papel */
.btn--escuro{background:var(--tinta);color:var(--papel)}
.btn--escuro:hover{background:var(--acento)}

/* claro sobre fundo escuro */
.btn--claro{background:var(--papel);color:var(--tinta)}
.btn--claro:hover{background:var(--acento-claro)}

/* contorno, herda a cor do contexto */
.btn--linha{border-color:var(--linha-forte);color:var(--tinta);font-weight:400}
.btn--linha:hover{border-color:var(--acento);color:var(--acento)}
.btn--linha-clara{border-color:rgba(244,240,232,.32);color:var(--papel);font-weight:400}
.btn--linha-clara:hover{border-color:var(--acento-claro);color:var(--acento-claro)}

.btn--acento{background:var(--acento);color:var(--sobre-acento)}
.btn--acento:hover{background:var(--tinta);color:var(--papel)}

.btn--bloco{width:100%}
.btn--miudo{padding:12px 22px;font-size:11.5px;font-weight:500}

/* ================================================ ÁREAS DE IMAGEM ======= */
/* Enquanto não há foto do cliente, o lugar da imagem é um fundo gerado por
   CSS (gradiente + trama + vinheta) com a legenda do que entra ali.
   Quando existe foto, o <img> cobre o fundo. */

.ph{position:relative;overflow:hidden;background:var(--papel-2)}
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none}

/* trama diagonal fina, usada nos blocos escuros */
.ph--trama::after{
  background-image:repeating-linear-gradient(115deg,rgba(244,240,232,.05) 0 1px,transparent 1px 16px);
}
/* grade larga, usada nas faixas panorâmicas */
.ph--grade::after{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 92px);
}

/* Legendas de demonstração sobre as imagens */
.legenda{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 9px;
}
.legenda--claro{color:var(--sec);background:rgba(255,253,248,.86)}
.legenda--escuro{color:rgba(244,240,232,.8);background:rgba(14,12,9,.6)}

/* ==================================================== DEMONSTRAÇÃO ====== */

/* Barra terracota do topo (criada pelo script) */
.demo-barra{
  background:var(--acento);color:var(--sobre-acento);
}
.demo-barra__linha{
  width:min(var(--wrap),92vw);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 0;
}
.demo-barra__txt{display:flex;align-items:center;gap:14px;min-width:0}
.demo-barra__selo{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid rgba(251,239,232,.45);padding:5px 9px;white-space:nowrap;
}
.demo-barra p{font-size:13.5px;line-height:1.45;margin:0;min-width:0}
.demo-barra button{
  cursor:pointer;background:var(--sobre-acento);color:var(--acento);border:none;
  padding:9px 16px;border-radius:var(--r);
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s;
}
.demo-barra button:hover{background:var(--tinta);color:var(--sobre-acento)}

/* Nota numerada antes de cada seção */
.nota{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  background:var(--cartao);border:1px solid rgba(140,58,36,.3);padding:20px 24px;
  margin-bottom:40px;
}
.nota__selo{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento);border:1px solid rgba(140,58,36,.35);padding:5px 9px;white-space:nowrap;
}
.nota b{display:block;font-size:15px;font-weight:600;color:var(--tinta)}
.nota span{font-size:14.5px;color:var(--sec)}

/* Nota dentro de seção escura */
.nota--escura{background:rgba(217,163,138,.09);border-color:rgba(217,163,138,.32)}
.nota--escura .nota__selo{color:var(--acento-claro);border-color:rgba(217,163,138,.42)}
.nota--escura b{color:var(--papel)}
.nota--escura span{color:rgba(244,240,232,.72)}

/* Botão fixo que liga e desliga as explicações.
   Fica à ESQUERDA de propósito: à direita ele cobria o botão de confirmar
   agendamento, que é a ação mais importante da página. */
.demo-botao{
  position:fixed;left:20px;bottom:20px;z-index:80;cursor:pointer;
  background:var(--acento);color:var(--sobre-acento);border:1px solid rgba(251,239,232,.35);
  padding:13px 20px;border-radius:var(--r);
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(22,20,15,.18);
  transition:background .2s,color .2s,border-color .2s,opacity .2s;
}
.demo-botao:hover{background:var(--tinta);border-color:rgba(244,240,232,.3)}
/* No celular a tela é estreita e ele atrapalha a leitura. Fica discreto
   até o dedo encostar. */
@media (max-width:720px){
  /* NO CELULAR ELE SAI DE CENA.
  
     Este botao flutua fixo no canto, e numa tela de 390px isso significa
     estar SEMPRE em cima de alguma coisa. Vendo as capturas, ele cobria
     os numeros do hero, os dois primeiros dias do calendario e a linha
     de duracao do resumo. Cobrir o calendario e o pior: o visitante nao
     conseguia tocar nos primeiros dias.
     
     A barra do topo tem o mesmo botao e continua ali. No celular, subir
     ate o topo e um gesto; nao conseguir marcar horario e uma venda
     perdida. */
  .demo-botao{display:none}
  /* No celular o selo ao lado do texto espremia o paragrafo numa coluna
     estreita. Empilhado, o recado do topo fica legivel. */
  .demo-barra__txt{display:grid;gap:10px;justify-items:start}
  .demo-barra__linha{gap:12px;padding:14px 0}
}

/* Fora do modo demo, ou com as explicações ocultas, tudo isso some.
   Nada de nota, legenda ou seção de venda pode vazar na versão do cliente. */
.nota,.legenda,.so-demo{display:none}
body.tem-demo .nota{display:grid}
body.tem-demo .legenda{display:block}
body.tem-demo .so-demo{display:block}
body.tem-demo .so-demo--grade{display:grid}

body.demo-oculto .nota,
body.demo-oculto .legenda,
body.demo-oculto .so-demo,
body.demo-oculto .demo-barra__txt{display:none}
body.demo-oculto .demo-barra__linha{justify-content:flex-end}
body.demo-oculto .demo-botao{
  background:var(--cartao);color:var(--acento);border-color:rgba(140,58,36,.4);
}
body.demo-oculto .demo-botao:hover{background:var(--acento);color:var(--sobre-acento)}

/* ========================================================= CABEÇALHO ==== */

.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(244,240,232,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(22,20,15,.1);
}
.topo__linha{
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;
}
.marca{display:flex;align-items:baseline;gap:10px;color:var(--tinta);min-width:0}
.marca__nome{
  font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.01em;
  white-space:nowrap;
}
.marca__sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);white-space:nowrap;
}

.nav{display:flex;gap:26px}
.nav a{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec-2);
  transition:color .2s;
}
.nav a:hover{color:var(--tinta)}

.menu-btn{
  display:none;background:none;border:1px solid var(--linha-forte);border-radius:var(--r);
  color:var(--tinta);padding:11px 18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:border-color .2s,color .2s;
}
.menu-btn:hover{border-color:var(--acento);color:var(--acento)}

.gaveta{display:none;border-top:1px solid var(--linha);padding:6px 0 18px}
.gaveta.aberta{display:block}
.gaveta a{
  display:block;padding:15px 2px;border-bottom:1px solid var(--linha);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec-2);
}
.gaveta a:hover{color:var(--tinta)}
.gaveta .btn{margin-top:18px;width:100%}

/* ============================================================== HERO ==== */

.hero{
  position:relative;overflow:hidden;color:var(--papel);
  background:
    radial-gradient(120% 80% at 18% 8%,rgba(217,163,138,.18),transparent 58%),
    radial-gradient(90% 70% at 88% 92%,rgba(140,58,36,.26),transparent 62%),
    linear-gradient(165deg,#241F18 0%,#15120D 62%,#0E0C09 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(244,240,232,.04) 0 1px,transparent 1px 14px);
}
.hero__wrap{
  position:relative;width:min(var(--wrap),92vw);margin-inline:auto;
  padding:clamp(70px,10vh,120px) 0 0;display:grid;gap:52px;
}
.hero__alto{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:end;
}
.hero__local{
  margin:0 0 26px;font-family:var(--mono);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--acento-claro-2);
}
.hero__titulo{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(52px,8.4vw,124px);line-height:.9;letter-spacing:-.025em;
  color:var(--papel);text-wrap:balance;
}
.hero__titulo em{font-style:italic;color:var(--acento-claro)}
.hero__lado{display:grid;gap:28px;padding-bottom:14px}
.hero__lead{
  margin:0;font-size:17px;line-height:1.7;color:rgba(244,240,232,.72);max-width:34ch;
}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px}

.hero__dados{display:flex;gap:clamp(20px,4vw,44px);border-top:1px solid var(--linha-esc-2)}
.dado{padding-top:16px}
.dado b{
  display:block;font-family:var(--display);font-size:34px;font-weight:400;
  color:var(--papel);line-height:1;
}
.dado span{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,240,232,.5);
}

/* Faixa panorâmica: é o lugar da foto real do salão */
.hero__faixa{
  aspect-ratio:16/7;
  background:
    radial-gradient(70% 120% at 22% 0%,rgba(255,226,196,.34),transparent 60%),
    radial-gradient(50% 90% at 78% 110%,rgba(140,58,36,.42),transparent 65%),
    linear-gradient(155deg,#2C251C 0%,#191510 55%,#0F0D09 100%);
  box-shadow:inset 0 0 140px rgba(0,0,0,.65);
}
.hero__faixa::before{
  content:"";position:absolute;left:-10%;top:-30%;width:38%;height:160%;
  transform:rotate(14deg);filter:blur(18px);
  background:linear-gradient(90deg,transparent,rgba(255,232,205,.14),transparent);
}
/* Sem `display` aqui de propósito: quem liga e desliga a legenda é o par
   `body.tem-demo` / `body.demo-oculto`. Declarar display nesta regra
   (que vem depois) reacenderia a legenda na versão final do cliente. */
.legenda--centro{
  position:absolute;inset:0;z-index:2;
  place-items:center;padding:0 24px;background:none;
}
body.tem-demo:not(.demo-oculto) .legenda--centro{display:grid}
.legenda--centro > span{display:grid;gap:8px;justify-items:center;text-align:center}
.legenda__selo{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--acento-claro);border:1px solid rgba(217,163,138,.5);padding:6px 12px;
}
.legenda__nome{
  font-family:var(--display);font-size:clamp(20px,2.4vw,30px);color:rgba(244,240,232,.86);
  letter-spacing:0;text-transform:none;
}
.legenda__medida{font-family:var(--mono);font-size:11px;color:rgba(244,240,232,.45);letter-spacing:0;text-transform:none}

/* ============================================================== FITA ==== */

.fita{
  background:var(--preto);color:var(--acento-claro);
  border-top:1px solid var(--linha-esc);overflow:hidden;padding:14px 0;
}
.fita__trilho{display:flex;width:max-content;animation:desliza 34s linear infinite}
.fita__grupo{
  display:flex;gap:44px;padding-right:44px;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;
}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================= SOBRE ==== */

.sobre__grade{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,6vw,86px);align-items:start;
}
.sobre__midia{display:grid;gap:14px}
.sobre__par{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.ph--sobre-a{
  aspect-ratio:4/3;
  background:
    radial-gradient(80% 70% at 25% 15%,#FFFBF2,transparent 62%),
    linear-gradient(150deg,#E9E1D2 0%,#D6CBB6 55%,#C6B9A1 100%);
  box-shadow:inset 0 0 70px rgba(22,20,15,.14);
}
.ph--sobre-a::after{background-image:repeating-linear-gradient(0deg,rgba(22,20,15,.05) 0 1px,transparent 1px 40px)}
.ph--sobre-b{
  aspect-ratio:1;
  background:
    radial-gradient(80% 70% at 70% 20%,#FFFBF2,transparent 60%),
    linear-gradient(160deg,#E3DACA,#CDC1AB);
  box-shadow:inset 0 0 50px rgba(22,20,15,.14);
}
.ph--sobre-c{
  aspect-ratio:1;
  background:
    radial-gradient(70% 80% at 30% 80%,rgba(217,163,138,.5),transparent 60%),
    linear-gradient(150deg,#2A241C,#141109);
  box-shadow:inset 0 0 50px rgba(0,0,0,.5);
}

/* Lista I / II / III */
.pilares{display:grid;margin-top:42px;border-top:1px solid var(--linha)}
.pilar{
  display:grid;grid-template-columns:auto 1fr;gap:22px;padding:22px 0;
  border-bottom:1px solid var(--linha);
}
.pilar__num{font-family:var(--mono);font-size:11px;color:var(--acento);letter-spacing:.1em}
.pilar b{display:block;color:var(--tinta);font-weight:600;font-size:15px}
.pilar span{color:var(--sec-2);font-size:15px}

/* ========================================================== SERVIÇOS ==== */

.tabela{display:grid;border-top:1px solid var(--linha-forte)}
.servico{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr) 78px 96px auto;
  gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--linha-forte);
}
.servico--destaque{background:rgba(140,58,36,.05)}
.servico__num{font-family:var(--mono);font-size:11px;color:var(--fraco-2)}
.servico--destaque .servico__num{color:var(--acento)}
.servico__nome{
  font-family:var(--display);font-weight:400;font-size:27px;color:var(--tinta);line-height:1.1;
}
.servico__desc{font-size:14.5px;color:var(--sec-2)}
.servico__tempo{font-family:var(--mono);font-size:12px;color:var(--sec-2)}
.servico__preco{
  font-family:var(--display);font-size:26px;color:var(--acento);text-align:right;
}
.etiqueta{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--papel);background:var(--acento);padding:4px 8px;
}

/* =========================================================== EQUIPE ===== */

.time{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:50px;
}
/* Coluna flexivel para as etiquetas de especialidade fecharem todas na
   mesma linha. Sem isto, quem tem descricao de tres linhas empurra as
   etiquetas para baixo e a fileira de cartoes fica desalinhada. */
.barbeiro{display:flex;flex-direction:column;gap:18px}
.barbeiro__txt{display:flex;flex-direction:column;flex:1}
.barbeiro__txt .tags{margin-top:auto}
.ph--retrato{
  aspect-ratio:3/4;
  background:
    radial-gradient(65% 55% at 50% 28%,rgba(217,163,138,.42),transparent 62%),
    linear-gradient(165deg,#2E2720 0%,#191510 60%,#100D0A 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.barbeiro:nth-child(2) .ph--retrato{
  background:
    radial-gradient(65% 55% at 50% 28%,rgba(217,163,138,.3),transparent 62%),
    linear-gradient(165deg,#2A241D 0%,#171309 60%,#0F0C08 100%);
}
.barbeiro:nth-child(3) .ph--retrato{
  background:
    radial-gradient(65% 55% at 50% 28%,rgba(217,163,138,.36),transparent 62%),
    linear-gradient(165deg,#312A21 0%,#1B160F 60%,#110E0A 100%);
}
.barbeiro:nth-child(4) .ph--retrato{
  background:
    radial-gradient(65% 55% at 50% 28%,rgba(217,163,138,.26),transparent 62%),
    linear-gradient(165deg,#282219 0%,#161209 60%,#0E0B07 100%);
}
.barbeiro__nome{
  display:block;font-family:var(--display);font-weight:400;font-size:26px;
  color:var(--tinta);line-height:1.15;
}
.barbeiro__cargo{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento);
}
.barbeiro__desc{margin:12px 0 14px;font-size:14.5px;color:var(--sec-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{border:1px solid rgba(22,20,15,.18);padding:5px 10px;font-size:11px;color:var(--sec)}

/* ========================================================== GALERIA ===== */

.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.foto{margin:0}
.foto--larga{grid-column:span 2;aspect-ratio:16/10}
.foto--alta{aspect-ratio:4/5}

.foto:nth-child(1){
  background:
    radial-gradient(60% 100% at 20% 0%,rgba(255,226,196,.3),transparent 60%),
    linear-gradient(150deg,#2B241B,#141009);
  box-shadow:inset 0 0 80px rgba(0,0,0,.6);
}
.foto:nth-child(2){
  background:
    radial-gradient(70% 60% at 60% 25%,#FFFBF2,transparent 62%),
    linear-gradient(160deg,#E7DFD0,#CFC4AE);
  box-shadow:inset 0 0 50px rgba(22,20,15,.14);
}
.foto:nth-child(3){
  background:
    radial-gradient(70% 60% at 30% 75%,rgba(217,163,138,.35),transparent 62%),
    linear-gradient(160deg,#E4DCCC,#C9BDA6);
  box-shadow:inset 0 0 50px rgba(22,20,15,.14);
}
.foto:nth-child(4){
  background:
    radial-gradient(60% 60% at 50% 30%,rgba(217,163,138,.4),transparent 62%),
    linear-gradient(160deg,#2A231A,#13100B);
  box-shadow:inset 0 0 50px rgba(0,0,0,.5);
}
.foto:nth-child(5){
  background:
    radial-gradient(70% 60% at 50% 20%,#FFFBF2,transparent 62%),
    linear-gradient(160deg,#EAE2D3,#D2C7B1);
  box-shadow:inset 0 0 50px rgba(22,20,15,.14);
}
.foto:nth-child(6){
  background:
    radial-gradient(60% 100% at 80% 10%,rgba(255,226,196,.26),transparent 60%),
    linear-gradient(150deg,#251F17,#110E0A);
  box-shadow:inset 0 0 80px rgba(0,0,0,.6);
}
.foto--larga::after{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 70px)}

/* ======================================================= AGENDAMENTO ==== */

.agendar{
  background:linear-gradient(180deg,var(--escuro),var(--preto));
  color:var(--papel);padding:clamp(70px,9vw,120px) 0;
}
.agendar .titulo{color:var(--papel)}
.agendar .titulo em{color:var(--acento-claro)}

.agenda__grade{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(20px,3vw,34px);align-items:start;
}
.agenda__painel{
  border:1px solid var(--linha-esc-2);background:var(--escuro-2);
  padding:clamp(22px,3vw,38px);display:grid;gap:34px;
}
/* Sem isto a tira de dias (que é bem mais larga que a tela) estica o grid
   inteiro e a página ganha rolagem horizontal. */
.agenda__grade > *,.agenda__painel > *{min-width:0}
.bloco__rot{
  margin:0 0 16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(244,240,232,.5);
}
.bloco__pe{
  margin:14px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:rgba(244,240,232,.38);
}

/* Chips selecionáveis */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  cursor:pointer;border-radius:var(--r);
  background:transparent;border:1px solid rgba(244,240,232,.2);color:rgba(244,240,232,.8);
  font-family:var(--ui);font-size:13px;letter-spacing:.04em;padding:12px 18px;
  transition:background .2s,border-color .2s,color .2s;
}
/* :not(.marcado) é obrigatório: sem ele o hover clareia o texto do chip
   já selecionado, que tem fundo claro, e some com a leitura. */
.chip:hover:not([disabled]):not(.marcado){border-color:var(--acento-claro);color:var(--papel)}
.chip.marcado{
  background:var(--acento-claro);border-color:var(--acento-claro);
  color:var(--tinta);font-weight:600;
}
.chip.marcado:hover{background:var(--acento-claro-2)}
.chip[disabled]{
  cursor:not-allowed;border-color:rgba(244,240,232,.08);color:rgba(244,240,232,.22);
}

/* Tira de dias */
.dias__topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;
}
.dias__mes{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,240,232,.6);
}
.dias__nav{display:flex;gap:6px}
.dias__nav button{
  cursor:pointer;background:none;border:1px solid rgba(244,240,232,.2);border-radius:var(--r);
  color:rgba(244,240,232,.8);width:32px;height:32px;display:grid;place-items:center;
  transition:border-color .2s,color .2s;
}
.dias__nav button:hover:not([disabled]){border-color:var(--acento-claro);color:var(--acento-claro)}
.dias__nav button[disabled]{opacity:.3;cursor:not-allowed}
.dias__nav svg{width:14px;height:14px;fill:currentColor}

.dias{
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
  margin-bottom:16px;padding-bottom:4px;scrollbar-width:thin;
  scrollbar-color:rgba(244,240,232,.2) transparent;
}
.dias::-webkit-scrollbar{height:4px}
.dias::-webkit-scrollbar-thumb{background:rgba(244,240,232,.2)}
.dia{flex:1 0 auto;min-width:64px;padding:10px 6px;text-align:center}
.dia__semana{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.6;
}
.dia__num{display:block;font-family:var(--display);font-size:24px;line-height:1.3}

/* Grade de horários */
.horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.hora{font-family:var(--mono);font-size:13px;text-align:center;padding:12px 8px}
.hora[disabled]{text-decoration:line-through}
.horas__aviso{
  grid-column:1/-1;font-size:14px;color:rgba(244,240,232,.55);
  border:1px dashed rgba(244,240,232,.16);padding:18px 20px;text-align:center;
}

/* Formulário */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:grid;gap:8px}
.campo--largo{grid-column:1/-1}
.campo label{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,240,232,.5);
}
.campo label span{text-transform:none;letter-spacing:0;font-family:var(--ui)}
.campo input,.campo textarea{
  background:transparent;border:1px solid rgba(244,240,232,.2);border-radius:var(--r);
  color:var(--papel);padding:13px 14px;font-size:15px;width:100%;
  transition:border-color .2s;
}
.campo textarea{min-height:84px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(244,240,232,.3)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--acento-claro)}
/* A MENSAGEM DE ERRO NAO PODE EMPURRAR O QUE ESTA EMBAIXO.

   Com `display:none`, ela ocupava zero e, ao aparecer ou sumir, empurrava
   21px de conteudo. No celular isso quebrava o agendamento de um jeito
   dificil de enxergar:

     a pessoa digita o telefone errado, o erro aparece
     ela corrige e toca em CONFIRMAR
     o toque tira o foco do campo, a validacao limpa o erro
     a mensagem some, tudo abaixo sobe 29px
     o botao sai de debaixo do dedo ANTES do dedo soltar
     nenhum clique acontece

   Medido: o botao ia de 396px para 367px em 120ms, sem a pagina rolar. O
   navegador registrava pointerdown e mousedown, e nunca mouseup nem
   click. Para a pessoa, o botao simplesmente nao funcionava.

   Agora o espaco fica SEMPRE reservado: a mensagem existe no fluxo o
   tempo todo e so troca de opacidade. Aparecer ou sumir nao move um
   pixel. */
.campo__erro{
  display:block;
  font-size:12.5px;color:var(--acento-claro);
  min-height:1.35em;
  opacity:0;
  transition:opacity .18s ease;
}
.campo.ruim input,.campo.ruim textarea{border-color:var(--erro)}
.campo.ruim .campo__erro{opacity:1}

/* Resumo fixo, papel sobre escuro */
.resumo{
  border:1px solid var(--linha-esc-2);background:var(--papel);color:var(--tinta);
  padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:18px;
  position:sticky;top:96px;
}
.resumo__rot{
  margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--acento);
}
.resumo__corpo{display:grid;border-top:1px solid var(--linha)}
.resumo__linha{
  display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid rgba(22,20,15,.1);
}
.resumo__linha span{font-size:13.5px;color:var(--sec-2)}
.resumo__linha b{font-size:14px;font-weight:600;color:var(--tinta);text-align:right}
.resumo__linha b.vazio{color:var(--fraco-2);font-weight:400}
.resumo__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0 6px;border:0;
}
.resumo__total span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sec-2);
}
.resumo__total b{font-family:var(--display);font-weight:400;font-size:36px;color:var(--acento)}
.resumo__pe{margin:0;font-size:12.5px;color:var(--sec-2)}

/* Alertas */
.alerta{
  display:none;align-items:flex-start;gap:12px;
  border:1px solid rgba(217,163,138,.4);background:rgba(217,163,138,.1);
  padding:14px 18px;font-size:14px;color:var(--papel);
}
.alerta.visivel{display:flex}
.alerta svg{width:17px;height:17px;fill:var(--acento-claro);flex:none;margin-top:3px}
.alerta code{font-family:var(--mono);font-size:12.5px}

/* Confirmação */
.sucesso{
  border:1px solid rgba(217,163,138,.32);background:var(--escuro-2);
  padding:clamp(26px,4vw,46px);display:grid;gap:20px;justify-items:start;
}
.sucesso__selo{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--acento-claro);color:var(--acento-claro);
}
.sucesso__selo svg{width:22px;height:22px;fill:currentColor}
.sucesso h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);color:var(--papel)}
.sucesso p{font-size:15.5px;color:rgba(244,240,232,.7);max-width:52ch}
.sucesso .resumo{width:min(420px,100%);position:static}
.sucesso__acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ====================================================== LOCALIZAÇÃO ===== */

.local__grade{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,70px);align-items:start;
}
.info{display:grid;margin-top:34px;border-top:1px solid var(--linha)}
.info__item{padding:18px 0;border-bottom:1px solid var(--linha)}
.info__item b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento);margin-bottom:6px;font-weight:400;
}
.info__item span,.info__item a{color:var(--corpo)}
.info__item a{transition:color .2s}
.info__item a:hover{color:var(--acento)}

.expediente{display:grid;gap:8px}
.expediente__linha{
  display:flex;justify-content:space-between;gap:20px;color:var(--corpo);font-size:15px;
}
.expediente__linha b{font-family:var(--mono);font-size:13px;font-weight:400}
.expediente__linha.fechado{color:var(--fraco-2)}
.expediente__linha.hoje b{color:var(--acento)}
.expediente__pe{font-size:13px;color:var(--sec-2);margin-top:4px}

.agora{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 10px;
}
.agora i{width:7px;height:7px;border-radius:999px;background:currentColor}
.agora.aberto{color:var(--ok);background:var(--ok-fundo)}
.agora.fechado{color:var(--erro);background:var(--erro-fundo)}

.mapa{position:relative;aspect-ratio:4/3;border:1px solid var(--linha);overflow:hidden}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ph--mapa{background:linear-gradient(160deg,#EFE9DC,#DCD3C1)}
.ph--mapa::after{
  background-image:
    repeating-linear-gradient(0deg,rgba(22,20,15,.07) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(22,20,15,.07) 0 1px,transparent 1px 46px);
}

/* ============================================================ DÚVIDAS === */

.duvidas__grade{
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);
  gap:clamp(32px,5vw,70px);align-items:start;
}
.faq{display:grid;border-top:1px solid var(--linha-forte)}
.duvida{border-bottom:1px solid var(--linha-forte)}
.duvida summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;
  font-family:var(--display);font-size:23px;color:var(--tinta);
  list-style:none;cursor:pointer;
}
.duvida summary::-webkit-details-marker{display:none}
.duvida__mais{
  flex:none;font-family:var(--ui);font-size:20px;color:var(--acento);
  transition:transform .25s;
}
.duvida[open] .duvida__mais{transform:rotate(45deg)}
.duvida p{margin:0 0 24px;max-width:66ch;font-size:15.5px;color:var(--sec)}

/* Nota das dúvidas: empilhada, sob o título da coluna da esquerda.
   Não redeclarar display aqui. Quem manda é o par tem-demo / demo-oculto. */
.nota--faq{margin:26px 0 0;grid-template-columns:1fr;gap:6px;padding:18px 20px}
.nota--faq .nota__selo{justify-self:start;border:0;padding:0}

/* ================================================= O QUE VOCÊ RECEBE ==== */

.oferta{background:var(--acento);color:var(--sobre-acento);padding:clamp(60px,7vw,96px) 0}
.oferta__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,70px);align-items:center;
}
.oferta__rot{
  margin:0 0 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(251,239,232,.72);
}
.oferta h2{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.4vw,56px);line-height:1.03;color:var(--sobre-acento);
}
.oferta h2 em{font-style:italic}
.oferta__lead{margin:20px 0 0;max-width:44ch;font-size:15.5px;color:rgba(251,239,232,.82)}
.oferta__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.oferta .btn--claro{background:var(--sobre-acento);color:var(--acento)}
.oferta .btn--claro:hover{background:var(--tinta);color:var(--sobre-acento)}
.oferta .btn--linha-clara{border-color:rgba(251,239,232,.45);color:var(--sobre-acento)}
.oferta .btn--linha-clara:hover{border-color:var(--sobre-acento);background:rgba(251,239,232,.12);color:var(--sobre-acento)}
.oferta__lista{display:grid;border-top:1px solid rgba(251,239,232,.28)}
.oferta__item{
  display:grid;grid-template-columns:auto 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid rgba(251,239,232,.28);font-size:15px;
}
.oferta__item:last-child{border-bottom:0}
.oferta__item i{font-family:var(--mono);font-size:11px;font-style:normal;color:rgba(251,239,232,.7)}

/* ============================================================ CONTATO === */

.contato{background:var(--tinta);color:var(--papel);padding:clamp(64px,8vw,110px) 0;text-align:center}
.contato__wrap{width:min(760px,92vw);margin-inline:auto;display:grid;gap:24px;justify-items:center}
.contato h2{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(36px,5.4vw,64px);line-height:1;letter-spacing:-.02em;color:var(--papel);
}
.contato h2 em{font-style:italic;color:var(--acento-claro)}
.contato p{margin:0;max-width:46ch;font-size:16px;color:rgba(244,240,232,.66)}
.contato__acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ============================================================= RODAPÉ === */

.rodape{
  background:var(--preto);color:rgba(244,240,232,.6);
  border-top:1px solid rgba(244,240,232,.12);padding:52px 0 34px;
}
.rodape__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:36px}
.rodape__marca{
  display:block;font-family:var(--display);font-size:24px;color:var(--papel);margin-bottom:8px;
}
.rodape__est{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento-claro);
}
.rodape h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--papel);font-weight:400;margin-bottom:10px;
}
.rodape ul{display:grid;gap:10px;font-size:14px}
.rodape a{transition:color .2s}
.rodape a:hover{color:var(--acento-claro)}
.rodape__fim{
  width:min(var(--wrap),92vw);margin:34px auto 0;padding-top:20px;
  border-top:1px solid rgba(244,240,232,.1);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}

/* ====================================================== REVELAR AO ROLAR */

.rev{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.rev.dentro{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .fita__trilho{animation:none}
  .dias{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* =========================================================== RESPONSIVO = */

@media (max-width:1100px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  /* SO na barra do cabecalho, e NAO na gaveta.

     A gaveta tambem mora dentro de `.topo`, entao `.topo .btn--escuro`
     escondia junto o "Agendar horario" de dentro do menu. Resultado: no
     celular, quem abria o menu para marcar horario nao encontrava o
     botao de marcar horario. A acao principal do site, invisivel
     exatamente onde a pessoa foi procurar.

     `.topo__linha` e so a linha de cima, onde o hamburguer ja assume. */
  .topo__linha .btn--escuro{display:none}
}

@media (max-width:980px){
  .hero__alto{grid-template-columns:1fr;gap:38px;align-items:start}
  .hero__lado{padding-bottom:0}
  .sobre__grade,.local__grade,.duvidas__grade,.oferta__grade{grid-template-columns:1fr}
  .agenda__grade{grid-template-columns:1fr}
  .resumo{position:static}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .foto--larga{grid-column:span 2}
}

@media (max-width:760px){
  .servico{
    grid-template-columns:36px minmax(0,1fr) 96px;
    grid-template-areas:
      "num nome preco"
      ".   desc desc"
      ".   tempo tempo"
      ".   cta cta";
    gap:6px 16px;align-items:start;
  }
  .servico__num{grid-area:num}
  .servico__nome{grid-area:nome;font-size:24px}
  .servico__desc{grid-area:desc}
  .servico__tempo{grid-area:tempo;margin-top:6px}
  .servico__preco{grid-area:preco;font-size:24px}
  /* Sem `grid-area`, o botão caía na primeira célula livre da grade e
     pousava em cima da descrição. Com áreas nomeadas, todo item novo
     precisa de nome: quem fica de fora é posicionado no automático, e o
     automático não sabe do desenho. */
  /* Só a área. O alinhamento à direita vem da regra base, no fim do
     arquivo, e é o certo aqui: o botão fica embaixo do preço, na mesma
     borda. Tentei `justify-self:start` antes e a regra base venceu por
     ordem de declaração, o que deixaria o código dizendo uma coisa e a
     tela mostrando outra. */
  .servico__cta{grid-area:cta;margin-top:10px}
  .campos{grid-template-columns:1fr}
  .rodape__fim{justify-content:flex-start}
}

@media (max-width:620px){
  /* A etiqueta da nota vira uma linha própria: em duas colunas o texto
     fica espremido num corredor de 20 caracteres. */
  .nota{grid-template-columns:1fr;gap:12px}
  .nota__selo{justify-self:start}
}

@media (max-width:520px){
  .marca__nome{font-size:21px}
  .marca__sub{display:none}
  .hero__dados{gap:18px}
  .dado b{font-size:28px}
  .galeria{grid-template-columns:1fr}
  .foto--larga,.foto--alta{grid-column:span 1;aspect-ratio:4/3}
  /* O .demo-botao no celular esta ajustado la em cima, junto da regra dele.
     Nao repita `right` aqui: com o `left` novo o botao esticava a tela toda. */
}

/* ==========================================================================
   TOQUE E LEITURA NO CELULAR

   Este bloco fica no FIM do arquivo de proposito.

   Na primeira tentativa eu o escrevi no meio, junto das outras media
   queries, e ele nao funcionou: `.tag`, `.dias__nav button` e
   `.campo input` sao declarados DEPOIS, com a mesma especificidade, e no
   CSS quem vem por ultimo ganha. As regras existiam e nao valiam nada.

   Nada aqui muda o desktop: tudo esta dentro de media query.

   O criterio de 44px vem da recomendacao de alvo de toque do WCAG 2.5.5.
   Os 16px nos campos resolvem outra coisa: abaixo disso o Safari do
   iPhone da zoom sozinho ao focar, a tela pula, e o usuario precisa
   pincar de volta. Nao e preferencia, e comportamento do sistema.
   ========================================================================== */
@media (max-width:720px){
  /* Campos do agendamento */
  input,select,textarea{font-size:16px}
  .campo input,.campo textarea,.campo select{font-size:16px;min-height:48px}
  .campo textarea{min-height:96px}

  /* Setas de trocar a semana no seletor de dias: tinham 32x32, que e
     mira de mouse, e sao dos controles mais usados do agendamento. */
  .dias__nav button{width:44px;height:44px}

  /* Especialidade do barbeiro a 11px. Em rotulo mono maiusculo passaria,
     mas isto e palavra corrida e fica apertado no celular. */
  .tag{font-size:12.5px;padding:6px 11px}

  /* Chip de servico, profissional e hora: sao a interface inteira do
     agendamento no celular. */
  .chip{min-height:44px}

  /* "(opcional)" ao lado do rotulo do campo estava a 10px. */
  .campo label span,.campo > span{font-size:13px}
}

/* --------------------------------------------------------------------------
   ALVO DE TOQUE POR TIPO DE PONTEIRO, NAO POR LARGURA

   `pointer:coarse` quer dizer "quem aponta aqui e um dedo". Isso pega
   celular, tablet e notebook com tela sensivel, e NAO pega desktop com
   mouse, independente da largura da janela.

   Usar largura falhava justamente no tablet: um iPad de 768px e dedo, mas
   ficava de fora de qualquer `max-width:720px`. Foi o que a auditoria
   mostrou, com os links do rodape passando so em 768 e 1024.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .rodape a,.rodape__links a,.rodape__fim a,
  .info__item a,.contato a,.local a,
  .nav a,.marca{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .demo-barra button,.demo-botao{min-height:44px}
  .dias__nav button{width:44px;height:44px}
  .tag{font-size:12.5px;padding:6px 11px}
  .chip{min-height:44px}
  input,select,textarea{font-size:16px}
  .campo input,.campo textarea,.campo select{font-size:16px;min-height:48px}

  /* "(opcional)" ao lado do rotulo do campo estava a 10px. Nao e rotulo
     mono maiusculo, e palavra corrida entre parenteses. */
  .campo label span,.campo > span{font-size:13px}
}


/* [hidden] precisa vencer o display de qualquer regra nossa.

   Nasceu por causa da antiga seção 3D, e continua aqui porque vale para
   a página inteira: qualquer regra nossa com `display` anula o
   display:none que o navegador dá a [hidden], e o elemento fica
   invisível mas AINDA capturando cliques. */
[hidden]{display:none!important}


/* ==========================================================================
   ATALHOS DE AGENDAMENTO NAS LISTAS

   Quem leu a carta de preços e decidiu, ou leu o perfil de um barbeiro e
   se identificou, já escolheu. Antes essa pessoa precisava rolar até a
   agenda e reencontrar a mesma opção numa lista de seis serviços ou
   quatro barbeiros. Dois cliques a mais, e a chance de escolher errado.

   O `script.js` já escutava `data-agendar-servico` e `data-agendar-prof`
   no documento inteiro: o ouvinte existia, faltavam os botões.

   Discretos de propósito. Cada linha da carta é conteúdo editorial, e um
   botão sólido em cada uma viraria uma coluna de blocos escuros brigando
   com os preços.
   ========================================================================== */

.servico__cta{
  justify-self:end;align-self:center;
  background:none;border:1px solid var(--linha-forte);border-radius:var(--r);
  padding:9px 16px;cursor:pointer;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sec);
  transition:background .2s,border-color .2s,color .2s;
}
.servico__cta:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.servico--destaque .servico__cta{border-color:rgba(140,58,36,.35);color:var(--acento)}
.servico--destaque .servico__cta:hover{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}

.barbeiro__cta{
  margin-top:16px;align-self:flex-start;
  background:none;border:1px solid var(--linha-forte);border-radius:var(--r);
  padding:11px 18px;cursor:pointer;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);
  transition:background .2s,border-color .2s,color .2s;
}
.barbeiro__cta:hover{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}

/* A linha de serviço já vira lista empilhada no celular. O botão fecha a
   linha, ocupando a largura toda: ali ele é o próximo passo óbvio. */
@media (pointer:coarse){
  .servico__cta,.barbeiro__cta{min-height:44px}
}


/* ==========================================================================
   REVELAÇÃO RADIAL

   A cor do hover entra como um círculo que nasce onde o ponteiro tocou a
   borda e cresce até cobrir o botão.

   --------------------------------------------------------------------------
   O BUG QUE ESTA ESTRUTURA EXISTE PARA IMPEDIR

   A primeira versão deixava as regras de `:hover` valendo para todo
   mundo, e separava só o comportamento do círculo no toque. Isso quebrou
   o site no iPhone de um jeito que parecia impossível:

     o dedo toca o botão
     o iOS PRENDE o estado :hover, e ele não sai mais
     a regra de hover troca a cor do texto para o creme claro,
       que só faz sentido DEPOIS do círculo terracota preencher
     mas no toque o círculo estava desligado, e continuava em 0%
     resultado: texto creme sobre fundo creme

   O botão continuava lá, com fundo e borda, e o texto sumia. Medido:
   texto rgb(251,239,232) sobre fundo rgb(244,240,232).

   A LIÇÃO: `:hover` não é "quando o mouse está em cima". No iOS é "desde
   o último toque, para sempre". Qualquer regra de hover que mude COR
   precisa estar atrás de uma consulta que pergunte se existe mouse.

   Por isso, aqui, TODO efeito de hover mora dentro de
   `@media (hover:hover) and (pointer:fine)`. No toque não existe hover
   nenhum: existe `:active`, que dura o tempo do dedo encostado.
   ========================================================================== */

.btn--radial{
  position:relative;
  isolation:isolate;
  /* Onde o círculo nasce. O JavaScript reescreve nos eventos de ponteiro;
     50% é o neutro para teclado e para o primeiro quadro. */
  --rx:50%;
  --ry:50%;
}

.btn--radial::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  z-index:-1;
  background:var(--radial-cor, var(--acento));
  clip-path:circle(0% at var(--rx) var(--ry));
  transition:clip-path .52s cubic-bezier(.22,.7,.3,1);
}

/* O conteúdo fica SEMPRE acima do preenchimento e SEMPRE visível.
   Nenhuma regra abaixo pode apagá-lo. */
.btn--radial > span{
  position:relative;
  z-index:1;
  opacity:1;
  visibility:visible;
  transition:color .3s ease;
}

.btn__seta{
  display:inline-block;
  transition:transform .34s cubic-bezier(.22,.7,.3,1);
}

/* --------------------------------------------------------------- CORES */
.btn--claro.btn--radial{--radial-cor:var(--acento);--radial-texto:var(--sobre-acento)}
.btn--escuro.btn--radial{--radial-cor:var(--acento);--radial-texto:var(--sobre-acento)}
.btn--linha-clara.btn--radial{--radial-cor:var(--papel);--radial-texto:var(--tinta)}

/* ============================================ SÓ COM MOUSE DE VERDADE

   `hover:hover` pergunta se o aparelho consegue pairar, e `pointer:fine`
   se o apontador é preciso. Um celular responde não às duas, e nada
   daqui se aplica, nem quando o iOS prende o :hover depois do toque. */
@media (hover:hover) and (pointer:fine){

  /* 150% e não 100%: nascendo numa quina, o raio precisa alcançar o canto
     oposto. Com 100% sobraria um triângulo sem cor. */
  .btn--radial:hover::before{clip-path:circle(150% at var(--rx) var(--ry))}

  /* A cor do texto muda JUNTO com o preenchimento, e só aqui. É essa
     dupla que precisa andar sempre junta: cor nova exige fundo novo. */
  .btn--radial:hover{color:var(--radial-texto, var(--papel));transform:translateY(-1px)}
  .btn--radial:active{transform:translateY(0)}

  .btn--radial:hover .btn__seta{transform:translateX(4px)}

  /* Estes botões trocam de cor pelo preenchimento. A regra antiga de
     `background` no hover brigaria com ele, pintando o fundo inteiro
     antes do círculo chegar. */
  .btn--claro.btn--radial:hover{background:var(--papel)}
  .btn--escuro.btn--radial:hover{background:var(--tinta)}
  .btn--linha-clara.btn--radial:hover{background:none;border-color:var(--papel)}
}

/* ============================================ TECLADO, EM QUALQUER LUGAR

   Foco por teclado vale em qualquer aparelho, e aqui é seguro: o círculo
   E a cor mudam juntos, então o contraste continua certo. */
.btn--radial:focus-visible::before{clip-path:circle(150% at var(--rx) var(--ry))}
.btn--radial:focus-visible{color:var(--radial-texto, var(--papel))}
.btn--radial:focus-visible .btn__seta{transform:translateX(4px)}

/* ================================================================ TOQUE

   Nenhuma troca de cor, nenhum estado que fique preso. Só o afundamento
   enquanto o dedo está encostado, que é o retorno que o celular já
   entende, e que some sozinho quando o dedo sai. */
@media (hover:none) and (pointer:coarse){
  .btn--radial:active{transform:scale(.985)}
  .btn--radial:active::before{clip-path:circle(150% at 50% 50%)}
  .btn--radial:active{color:var(--radial-texto, var(--papel))}
}

/* ------------------------------------------------------ MENOS MOVIMENTO */
@media (prefers-reduced-motion:reduce){
  .btn--radial::before{transition:none}
  .btn--radial:focus-visible::before{clip-path:circle(150% at 50% 50%)}
  .btn--radial{transform:none!important}
  .btn__seta{transition:none}
}


/* ==========================================================================
   DESTAQUE POR PALAVRA

   A frase começa apagada e acende palavra a palavra conforme a rolagem.

   A CONTA, QUE MORA AQUI E NÃO NO JAVASCRIPT

   O JavaScript escreve um número só: `--p`, de 0 a 1, o quanto da seção
   já passou. Cada palavra sabe o próprio índice em `--i`, e o total está
   em `--n`. A opacidade sai de:

       (p × n) − i

   Quando o avanço ultrapassa o índice da palavra, ela acende. O ×2.2
   alarga a transição de cada palavra, para acenderem em cascata suave em
   vez de uma de cada vez, em degrau.

   Uma escrita de variável por quadro, para a frase inteira.
   ========================================================================== */

.destaque{
  /* Espaçamento generoso, mas UMA seção, não duas telas vazias.

     Sem curso de rolagem não existe progressão: numa janela de 900px uma
     seção de 660px aparece inteira de uma vez, e o acendimento vira um
     piscar. Com este espaçamento a seção fica em torno de uma tela, que
     é a medida de uma seção editorial comum, e dá o percurso que o
     efeito precisa. O componente original pedia DUAS telas vazias, o que
     seria dois rolos de nada num site que quer levar ao agendamento. */
  padding:clamp(96px,17vh,200px) 0;
  background:var(--tinta);
}

.destaque__txt{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px,4.6vw,64px);
  line-height:1.18;
  letter-spacing:-.015em;
  max-width:19ch;
  color:var(--papel);
  text-wrap:balance;
}

.destaque__p{
  /* 0.16 apagado: some no fundo escuro sem sumir de vez. Abaixo disso o
     texto fica ilegível para quem entra no fim da seção. */
  --min:.16;
  opacity:clamp(var(--min), calc((var(--p, 0) * var(--n, 1) - var(--i)) * 2.2), 1);
  transition:opacity .12s linear;
  /* A palavra em foco ganha um toque de cor quente, não só brilho. */
  color:var(--papel);
}

/* A última frase acende em terracota: é onde está o benefício, e o olho
   pousa nela. Marcada no HTML, não calculada. */
.destaque__p--acento{
  color:color-mix(in srgb, var(--acento-claro) calc(var(--p, 0) * 100%), var(--papel));
}

.destaque__pe{
  margin-top:clamp(28px,4vh,44px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.destaque__apoio{
  font-size:14px;color:rgba(244,240,232,.55);max-width:34ch;line-height:1.55;
}

@media (max-width:760px){
  .destaque{padding:clamp(56px,9vh,90px) 0}
  .destaque__txt{max-width:none}
  .destaque__pe .btn{width:100%}
}

/* --------------------------------------------------------- MENOS MOVIMENTO
   A frase inteira acesa. O texto é o conteúdo; acender é enfeite, e
   enfeite é o que sai. O botão troca de cor sem o círculo. */
@media (prefers-reduced-motion:reduce){
  .destaque__p{opacity:1;transition:none}
  .destaque__p--acento{color:var(--acento-claro)}
  .btn--radial::before{transition:none}
  .btn--radial:hover::before,
  .btn--radial:focus-visible::before{clip-path:circle(150% at 50% 50%)}
  .btn--radial:hover{transform:none}
  .btn__seta{transition:none}
  .btn--radial:hover .btn__seta{transform:none}
}

.hero__fone{
  margin-top:18px;font-size:13.5px;color:rgba(244,240,232,.55);
}
.hero__fone a{
  display:inline-flex;align-items:center;
  color:var(--papel);border-bottom:1px solid rgba(244,240,232,.28);
  padding-bottom:1px;transition:border-color .2s,color .2s;
}

/* Alvo de toque no telefone.

   Ao virar link de texto, ele ficou com 17px de altura. Num dedo isso é
   quase impossível de acertar, e é o toque que mais importa numa
   barbearia: quem prefere ligar, liga.

   O padding cresce a área clicável sem engordar o texto, e a margem
   negativa devolve o espaço, para o link não empurrar o que vem
   embaixo. A aparência não muda; só a área que responde ao dedo. */
@media (pointer:coarse){
  .hero__fone a{
    min-height:44px;padding:12px 4px 12px 0;margin:-12px 0;
    border-bottom:none;
    text-decoration:underline;text-underline-offset:5px;
    text-decoration-color:rgba(244,240,232,.4);
  }
}
.hero__fone a:hover{color:var(--acento-claro);border-color:var(--acento-claro)}