/* =========================================================
   NAVALHA & CIA — hero com wipe de maquina de cortar
   A capa solida e cortada da esquerda para a direita enquanto
   a maquina atravessa a tela. Sem video, sem imagem externa.
   ========================================================= */

:root{
  /* ---- cor ---- */
  --preto:      #0E0D0C;
  --grafite:    #161412;
  --carvao:     #211E1B;
  --latao:      #C9A227;
  --latao-claro:#E4C158;
  --creme:      #F2EAD9;
  --creme-fraco:#B9B0A2;
  --sangue:     #A63232;

  /* ---- motion (tokens, nada de valor solto pelo arquivo) ---- */
  --d-instant: 80ms;
  --d-fast:    180ms;
  --d-normal:  350ms;
  --d-slow:    600ms;
  --e-smooth:  cubic-bezier(.22,1,.36,1);
  --e-sharp:   cubic-bezier(.4,0,.2,1);

  /* ---- o corte: 0 = capa inteira | 100 = revelado ---- */
  --corte: 0%;

  /* ---- forma ---- */
  --r-btn: 10px;
  --r-card: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  background:var(--preto);
  color:var(--creme);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}

/* imagens ganham contorno neutro para nao se dissolverem no fundo */
img{ max-width:100%; outline:1px solid rgba(255,255,255,.08); outline-offset:-1px; }

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

.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(201,162,39,.16) 0%, rgba(201,162,39,0) 55%),
    radial-gradient(90% 70% at 10% 90%, rgba(166,50,50,.12) 0%, rgba(166,50,50,0) 60%),
    linear-gradient(180deg, var(--grafite) 0%, var(--preto) 100%);
}

/* textura sutil de barbearia: listras diagonais quase invisiveis */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.014) 0 2px,
    rgba(255,255,255,0) 2px 9px);
  pointer-events:none;
}

.hero__inner{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,2.4vw,30px) clamp(20px,5vw,72px) clamp(28px,4vw,56px);
}

/* ================= NAVBAR ================= */

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.marca{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--creme);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(19px,1.7vw,25px);
  letter-spacing:.06em;
  text-decoration:none;
  transition-property:color;
  transition-duration:var(--d-fast);
  transition-timing-function:var(--e-smooth);
}
.marca:hover{ color:var(--latao-claro); }
.marca__icone{ width:1.15em; height:1.15em; color:var(--latao); }
.marca__amp{ color:var(--latao); margin:0 .12em; }

.nav__links{
  display:flex;
  gap:clamp(16px,2vw,34px);
}
.nav__links a{
  position:relative;
  color:var(--creme-fraco);
  font-size:14px;
  font-weight:400;
  text-decoration:none;
  /* area de toque confortavel sem inchar o layout */
  padding:10px 2px;
  transition-property:color;
  transition-duration:var(--d-fast);
  transition-timing-function:var(--e-smooth);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:6px;
  height:1px;
  background:var(--latao);
  transition:right var(--d-normal) var(--e-smooth);
}
.nav__links a:hover{ color:var(--creme); }
.nav__links a:hover::after{ right:0; }

/* ================= TEXTO DO HERO ================= */

.hero__texto{
  margin-top:auto;
  /* respiro garantido depois do cabecalho: com margin-top:auto sozinho,
     em tela baixa o titulo encosta no menu */
  padding-top:clamp(28px,5vh,72px);
  max-width:min(760px,92%);
}

.olho{
  display:inline-block;
  margin-bottom:clamp(14px,1.6vw,20px);
  padding:7px 14px;
  border:1px solid rgba(201,162,39,.36);
  border-radius:999px;
  color:var(--latao-claro);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.titulo{
  margin:0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(52px,10vw,148px);
  line-height:.88;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-wrap:balance;
}
.titulo__l{ display:block; }
.titulo__l--destaque{
  position:relative;
  display:inline-block;

  /* brilho que atravessa a palavra da esquerda para a direita.
     A faixa clara e estreita: e um reflexo passando no latao,
     nao a palavra inteira mudando de cor. */
  background-image:linear-gradient(
    100deg,
    var(--latao)       0%,
    var(--latao)      34%,
    var(--latao-claro) 44%,
    #FFF3D2           50%,
    var(--latao-claro) 56%,
    var(--latao)      66%,
    var(--latao)     100%);
  background-size:280% 100%;
  background-position:180% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:brilho 3.6s var(--e-smooth) 2.1s infinite;
}
/* o risco recebe o mesmo reflexo, no mesmo compasso */
.titulo__l--destaque::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.1em;
  height:.055em;
  border-radius:.03em;
  background-image:linear-gradient(
    100deg,
    var(--latao)       0%,
    var(--latao)      34%,
    var(--latao-claro) 44%,
    #FFF3D2           50%,
    var(--latao-claro) 56%,
    var(--sangue)     78%,
    var(--sangue)    100%);
  background-size:280% 100%;
  background-position:180% 0;
  transform:scaleX(0);
  transform-origin:left center;
  animation:
    risca  var(--d-slow) var(--e-smooth) 1.55s forwards,
    brilho 3.6s var(--e-smooth) 2.1s infinite;
}

.sub{
  margin:clamp(16px,2vw,26px) 0 0;
  max-width:52ch;
  font-size:clamp(14px,1.15vw,17px);
  font-weight:300;
  line-height:1.62;
  color:var(--creme-fraco);
  text-wrap:pretty;
}

/* ================= BOTOES ================= */

.acoes{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(22px,2.6vw,34px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;              /* area de toque */
  padding:13px 22px;
  border-radius:var(--r-btn);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  /* propriedades explicitas: transition:all repinta o que nao mudou */
  transition-property:transform, background-color, border-color, color, box-shadow;
  transition-duration:var(--d-fast);
  transition-timing-function:var(--e-smooth);
}
.btn svg{ width:17px; height:17px; }
.btn:active{ transform:scale(.97); }

.btn--cheio{
  background:var(--latao);
  color:#17140D;
  border:1px solid var(--latao);
  box-shadow:0 6px 20px rgba(201,162,39,.22), 0 1px 2px rgba(0,0,0,.3);
}
.btn--cheio:hover{
  background:var(--latao-claro);
  border-color:var(--latao-claro);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(201,162,39,.3), 0 2px 4px rgba(0,0,0,.34);
}
.btn--cheio svg{ transition:transform var(--d-fast) var(--e-smooth); }
.btn--cheio:hover svg{ transform:translateX(3px); }

.btn--ghost{
  background:transparent;
  color:var(--creme);
  border:1px solid rgba(242,234,217,.26);
}
.btn--ghost:hover{
  border-color:var(--latao);
  color:var(--latao-claro);
  transform:translateY(-2px);
}

.nav__cta{ padding:10px 18px; min-height:40px; font-size:13px; }

/* ================= FATOS ================= */

.fatos{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,3vw,52px);
  margin:clamp(28px,3.4vw,46px) 0 0;
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid rgba(242,234,217,.1);
}
.fato dt{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--latao);
}
.fato dd{
  margin:5px 0 0;
  font-size:14px;
  font-weight:400;
  color:var(--creme);
  /* numeros de horario nao dancam ao mudar */
  font-variant-numeric:tabular-nums;
}

/* ================= POSTE DE BARBEIRO ================= */

.poste{
  position:absolute;
  right:clamp(20px,4vw,64px);
  top:22vh;
  width:clamp(16px,1.5vw,22px);
  height:clamp(110px,14vh,190px);
  border-radius:999px;
  overflow:hidden;
  background:var(--carvao);
  border:1px solid rgba(242,234,217,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.5);
}
/* O laco tem de andar exatamente um periodo da listra, senao a fita
   volta ao inicio num salto e aparece a barra preta do fundo.
   A faixa repete a cada 48px ao longo do eixo do gradiente; inclinada
   -55deg, isso da 48 / cos(55deg) = 83.68px na vertical. E por isso
   que o passo aqui e um numero quebrado em px, e nao uma % da altura:
   a listra e medida em px e nao acompanha o tamanho do poste. */
.poste__fita{
  position:absolute;
  inset:-100% 0;
  background:repeating-linear-gradient(
    -55deg,
    var(--sangue) 0 12px,
    var(--creme) 12px 24px,
    #2C5F8A 24px 36px,
    var(--creme) 36px 48px);
  animation:poste 3.4s linear infinite;
  opacity:.85;
}

/* ================= A CAPA QUE E CORTADA ================= */

.capa{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  background:
    radial-gradient(80% 60% at 50% 44%, #232020 0%, #131110 62%, #0B0A09 100%);
  /* o corte anda da esquerda para a direita */
  clip-path:inset(0 0 0 var(--corte));
  will-change:clip-path;
}
.capa::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.02) 0 2px,
    rgba(255,255,255,0) 2px 10px);
}
.capa__marca{
  display:flex;
  align-items:center;
  gap:16px;
  color:rgba(242,234,217,.58);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(38px,5.6vw,76px);
  letter-spacing:.1em;
}
.capa__marca svg{ width:1.1em; height:1.1em; color:var(--latao); opacity:.75; }

/* fio de luz exatamente na linha do corte */
.fio{
  position:absolute;
  top:0; bottom:0;
  left:var(--corte);
  width:2px;
  z-index:4;
  background:linear-gradient(180deg,
    rgba(228,193,88,0) 0%,
    rgba(228,193,88,.9) 18%,
    rgba(255,244,214,1) 50%,
    rgba(228,193,88,.9) 82%,
    rgba(228,193,88,0) 100%);
  box-shadow:0 0 18px 3px rgba(228,193,88,.5);
  opacity:0;
  will-change:left;
}

/* A maquina nao mora mais aqui: ela e o modelo 3D, desenhada no canvas
   do maquina3d.css. Era um SVG que so imitava a foto. */

/* ================= FIAPOS DE CABELO ================= */

.fiapos{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}
.fiapo{
  position:absolute;
  width:1.5px;
  height:11px;
  border-radius:1px;
  background:linear-gradient(180deg, rgba(242,234,217,.75), rgba(242,234,217,0));
  animation:cair var(--dur) linear forwards;
}

/* ================= BOTAO REPETIR ================= */

.repetir{
  position:absolute;
  right:clamp(16px,2.4vw,32px);
  bottom:clamp(16px,2.4vw,28px);
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(22,20,18,.7);
  border:1px solid rgba(242,234,217,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--creme-fraco);
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
  opacity:0;
  transition-property:opacity, color, border-color, transform;
  transition-duration:var(--d-fast);
  transition-timing-function:var(--e-smooth);
}
.repetir.is-visivel{ opacity:1; }
.repetir:hover{ color:var(--creme); border-color:var(--latao); }
.repetir:active{ transform:scale(.96); }
.repetir svg{ width:14px; height:14px; }

/* ================= ENTRADAS DO CONTEUDO ================= */

/* o conteudo ja esta na pagina; a capa e que o esconde.
   Estes deslocamentos sao so o assentamento depois do corte. */
.nav, .olho, .titulo__l, .sub, .acoes, .fatos, .poste{
  opacity:0;
  transform:translateY(14px);
  animation:sobe var(--d-slow) var(--e-smooth) forwards;
}
.nav      { animation-delay:1.15s; }
.olho     { animation-delay:1.25s; }
.titulo__l:nth-of-type(1){ animation-delay:1.32s; }
.titulo__l:nth-of-type(2){ animation-delay:1.40s; }
.titulo__l:nth-of-type(3){ animation-delay:1.48s; }
.sub      { animation-delay:1.60s; }
.acoes    { animation-delay:1.70s; }
.fatos    { animation-delay:1.80s; }
.poste    { animation-delay:1.30s; }

/* ================= KEYFRAMES ================= */

@keyframes sobe{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes risca{
  to{ transform:scaleX(1); }
}
/* o reflexo entra por um lado e sai pelo outro, com pausa entre passadas */
@keyframes brilho{
  0%   { background-position:180% 0; }
  55%  { background-position:-80% 0; }
  100% { background-position:-80% 0; }
}
@keyframes poste{
  to{ transform:translateY(83.68px); }
}
@keyframes cair{
  0%   { transform:translateY(0) rotate(var(--rot)); opacity:.9; }
  100% { transform:translateY(var(--queda)) rotate(calc(var(--rot) + 220deg)); opacity:0; }
}
@keyframes vibra{
  0%,100%{ transform:translateY(-.6px); }
  50%    { transform:translateY(.6px); }
}

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

@media (max-width:820px){
  /* as secoes voltam no celular, numa linha propria: some-las escondia
     metade do site de quem chega pelo telefone */
  .nav{ flex-wrap:wrap; row-gap:12px; }
  .nav__links{
    order:3;
    width:100%;
    justify-content:space-between;
    gap:8px;
    padding-top:4px;
    border-top:1px solid rgba(242,234,217,.09);
  }
  .nav__links a{ font-size:13px; padding:8px 0; }

  .hero__texto{ max-width:100%; }
  .poste{ top:auto; bottom:clamp(70px,12vh,120px); right:clamp(14px,4vw,26px); height:clamp(80px,11vh,120px); }
}

@media (max-width:420px){
  .nav__links a{ font-size:12.5px; }
}

/* ================= MOVIMENTO REDUZIDO =================
   Regra que manda em tudo: sem transform, so opacidade curta. */
@media (prefers-reduced-motion:reduce){
  .capa, .fio, .cena3d, .fiapos{ display:none !important; }
  .nav, .olho, .titulo__l, .sub, .acoes, .fatos, .poste{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .titulo__l--destaque{
    animation:none;
    background-image:none;
    color:var(--latao);
    -webkit-text-fill-color:var(--latao);
  }
  .titulo__l--destaque::after{
    transform:scaleX(1);
    animation:none;
    background-image:linear-gradient(90deg,var(--latao),var(--sangue));
  }
  .poste__fita{ animation:none; }
  *,*::before,*::after{
    transition-duration:var(--d-instant) !important;
    animation-duration:var(--d-instant) !important;
    animation-iteration-count:1 !important;
  }
}


/* =========================================================
   FAIXA DE CORTES — cards passando sem parar
   ========================================================= */

.faixa{
  position:relative;
  /* anula o padding lateral do hero para tocar as duas bordas da tela */
  margin:clamp(24px,3vw,38px) calc(clamp(20px,5vw,72px) * -1) 0;
  width:calc(100% + clamp(20px,5vw,72px) * 2);
  overflow:hidden;
  /* as pontas dissolvem: sem isso os cards aparecem e somem no talho */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  opacity:0;
  animation:sobe var(--d-slow) var(--e-smooth) 1.95s forwards;
}

.faixa__trilho{
  display:flex;
  gap:clamp(10px,1.1vw,18px);
  width:max-content;
  padding:14px clamp(10px,1.1vw,18px);
  animation:desfila 46s linear infinite;
  will-change:transform;
}
/* parar quando o visitante olha de perto e quer ler */
.faixa:hover .faixa__trilho{ animation-play-state:paused; }

.corte{
  position:relative;
  flex:none;
  width:clamp(112px,11vw,168px);
  aspect-ratio:3/4;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--carvao);
  border:1px solid rgba(242,234,217,.1);
  box-shadow:0 12px 26px rgba(0,0,0,.42), 0 2px 5px rgba(0,0,0,.3);
  /* inclinacao alternada, como fotos jogadas na bancada */
  transform:rotate(var(--giro)) translateZ(0);
  transition-property:transform, box-shadow, border-color;
  transition-duration:var(--d-normal);
  transition-timing-function:var(--e-smooth);
}
.corte:hover{
  transform:rotate(0deg) scale(1.06);
  border-color:rgba(201,162,39,.5);
  box-shadow:0 20px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,39,.25);
  z-index:2;
}

.corte img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  outline:none;                       /* aqui a borda ja e do card */
  transition:transform var(--d-slow) var(--e-smooth), filter var(--d-normal) var(--e-smooth);
  filter:saturate(.85) contrast(1.05);
}
.corte:hover img{ transform:scale(1.08); filter:saturate(1) contrast(1.08); }

/* selo de latao no canto, so no hover */
.corte::after{
  content:"";
  position:absolute;
  inset:auto 8px 8px auto;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--latao);
  opacity:0;
  transition:opacity var(--d-fast) var(--e-smooth);
}
.corte:hover::after{ opacity:1; }

@keyframes desfila{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }   /* metade = uma volta exata */
}

@media (max-width:820px){
  .faixa{
    margin-left:calc(clamp(20px,5vw,72px) * -1);
    margin-right:calc(clamp(20px,5vw,72px) * -1);
  }
  .corte{ width:clamp(96px,26vw,130px); }
  .faixa__trilho{ animation-duration:34s; }
}

@media (prefers-reduced-motion:reduce){
  .faixa{ opacity:1 !important; animation:none !important; }
  .faixa__trilho{ animation:none !important; }
  .faixa{ overflow-x:auto; }           /* vira rolagem manual */
}

/* =========================================================
   CORRECAO — o brilho da palavra precisa vir DEPOIS da regra
   de entrada do titulo, senao aquela sobrescreve esta e a
   palavra fica sem o reflexo (o risco funcionava porque e ::after)
   ========================================================= */
.titulo .titulo__l--destaque{
  animation:
    sobe   var(--d-slow) var(--e-smooth) 1.40s both,
    brilho 3.6s var(--e-smooth) 2.1s infinite;
}
@media (prefers-reduced-motion:reduce){
  .titulo .titulo__l--destaque{ animation:none; }
}


/* =========================================================
   FOTO DO FUNDO — a casa aparecendo por tras do texto.

   No lugar do gradiente animado: eram dois lacos de WebGL na
   mesma pagina, e um fundo liso demais. A foto nao pode competir
   com o texto, entao entra desfocada, com pouca opacidade, e com
   as quatro bordas apagando no preto da pagina. O pe dissolve por
   completo — senao a emenda com a proxima secao vira uma linha
   reta atravessando a tela.
   ========================================================= */

.foto{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

/* A imagem. O inset negativo compensa o desfoque: sem ele o blur
   puxa transparencia para dentro e sobra uma moldura clara. */
.foto::before{
  content:"";
  position:absolute;
  inset:-5%;
  background:url("assets/barbearia.webp") center 40% / cover no-repeat;
  filter:blur(4px) saturate(.82) contrast(1.06) brightness(.92);
  opacity:.30;
}

/* O sombreado das bordas, por cima e sem desfoque — se estivesse no
   mesmo elemento da imagem, o filtro borraria o proprio degrade. */
.foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(125% 92% at 50% 38%,
      rgba(14,13,12,0)   26%,
      rgba(14,13,12,.5)  60%,
      rgba(14,13,12,.94) 92%),
    linear-gradient(180deg,
      rgba(14,13,12,.55) 0%,
      rgba(14,13,12,.10) 18%,
      rgba(14,13,12,.30) 56%,
      rgba(14,13,12,.88) 86%,
      var(--preto)      100%);
}

/* ---------- GRAO ----------
   O gradiente sozinho fica liso demais e denuncia que e uma tela.
   Uma camada de ruido fino quebra as faixas de cor e da textura de
   filme. E um SVG inline: nao baixa imagem nenhuma. */
.grao{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* sem mix-blend-mode: ele obriga o navegador a compor a tela inteira
     numa camada separada a cada quadro em que o canvas atras repinta.
     Opacidade pura da quase o mesmo grao e nao custa nada. */
  opacity:.22;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23r)' opacity='.42'/></svg>");
  background-size:180px 180px;
}

/* ---------- CHUVA DE FIOS ----------
   O mesmo cabelo que voa da lamina na abertura, agora caindo devagar
   pelo hero inteiro. E detalhe de ambiente: fica ATRAS do texto, de
   proposito, porque nada aqui pode disputar leitura com o titulo.

   Tudo em transform e opacity, que a GPU resolve sozinha: o navegador
   nao repinta nada a cada quadro. Os fios sao montados uma vez pelo
   script e depois so o CSS trabalha. */

.chuva{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  /* somem antes do pe do hero, no mesmo ponto em que a foto some */
  -webkit-mask-image:linear-gradient(180deg,#000 0 58%,transparent 90%);
  mask-image:linear-gradient(180deg,#000 0 58%,transparent 90%);
}

.chuva__fio{
  position:absolute;
  top:-40px;
  left:var(--x);
  animation:cai var(--dur) linear var(--atraso) infinite;
  will-change:transform;
}

/* O fio: um arco fino, nao um risco reto. Cabelo cortado cai
   encurvado, e e a curva que faz o olho reconhecer o que e. */
.chuva__fio i{
  display:block;
  width:var(--c);
  height:calc(var(--c) * .6);
  border-top:1.3px solid rgba(242,234,217,.66);
  border-radius:50%;
  animation:baila var(--balanco) ease-in-out var(--atraso) infinite alternate;
}

@keyframes cai{
  0%   { transform:translate3d(0,0,0);             opacity:0; }
  7%   { opacity:var(--op); }
  86%  { opacity:var(--op); }
  100% { transform:translate3d(0,var(--altura),0); opacity:0; }
}

/* o bamboleio de lado, separado da queda: sao dois ritmos diferentes,
   e e a diferenca entre eles que tira a cara de coisa programada */
@keyframes baila{
  from{ transform:translateX(-9px) rotate(var(--giro1)); }
  to  { transform:translateX(9px)  rotate(var(--giro2)); }
}

/* fora da tela nao anima */
.chuva.is-parada .chuva__fio,
.chuva.is-parada .chuva__fio i{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .grao{ opacity:.16; }
  .chuva{ display:none; }
}

/* em tela pequena a foto pesa mais e ajuda menos: menos desfoque
   (que e area para o navegador rasterizar) e menos presenca */
@media (max-width:600px){
  .foto::before{ filter:blur(3px) saturate(.82) brightness(.88); opacity:.24; }
}


/* =========================================================
   MOBILE — revisao de ponta a ponta
   ========================================================= */

@media (max-width:820px){
  .hero__inner{
    padding:clamp(16px,4vw,24px) clamp(18px,5vw,28px) clamp(22px,5vw,34px);
  }

  /* o titulo domina a tela pequena; o resto respira em volta */
  .titulo{ font-size:clamp(44px,13.5vw,88px); line-height:.9; }
  .sub{ font-size:15px; line-height:1.6; }
  .olho{ font-size:10px; padding:6px 12px; }

  /* o que fica na altura da maquina para antes dela. Quem manda no
     recuo e --mq-espaco, definido no maquina3d.css junto com a
     posicao dela — os dois numeros andam juntos. */
  .titulo, .sub{ max-width:calc(100% - var(--mq-espaco)); }

  /* os fatos viram duas colunas em vez de fila apertada */
  .fatos{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 20px;
    margin-top:clamp(20px,5vw,30px);
    padding-top:16px;
  }
  .fato dd{ font-size:13px; }
  /* dois em cima e o terceiro sozinho no canto ficava torto: ele ocupa
     a linha inteira, centrado sob os outros dois */
  .fato--local{ grid-column:1 / -1; text-align:center; }

  /* a marca da capa nao pode encostar nas bordas */
  .capa__marca{ font-size:clamp(30px,10vw,52px); padding:0 20px; text-align:center; }

  .repetir{ right:12px; bottom:12px; font-size:11px; padding:9px 13px; }
}

@media (max-width:520px){
  /* o poste sai: em tela estreita ele briga com o texto */
  .poste{ display:none; }

  .titulo{ font-size:clamp(40px,12vw,72px); }
  .sub{ font-size:14.5px; }

  .acoes{ flex-direction:column; align-items:stretch; gap:10px; }
  /* so os botoes do hero esticam: sem o escopo, o Agendar do menu
     tentava 100% e caia para uma linha propria */
  .acoes .btn{ width:100%; min-height:50px; }   /* alvo de toque generoso */
  .nav__cta{ width:auto; flex:none; }

  .faixa__trilho{ animation-duration:30s; gap:9px; padding:10px 9px; }
  .corte{ width:clamp(104px,32vw,140px); }

  .fatos{ gap:14px 16px; }
  .fato dt{ font-size:9.5px; }
  .fato dd{ font-size:12.5px; }
}

/* telas baixas e deitadas: o hero nao pode empurrar tudo para fora */
@media (max-height:520px) and (orientation:landscape){
  .hero__inner{ min-height:auto; padding-block:14px 18px; }
  .titulo{ font-size:clamp(34px,7vw,54px); }
  .fatos{ display:none; }
  .faixa{ display:none; }
}

/* aparelho sem hover: o card nao pode depender de passar o mouse */
@media (hover:none){
  .corte:hover{ transform:rotate(var(--giro)); }
  .corte:active{ transform:rotate(0deg) scale(1.05); border-color:rgba(201,162,39,.5); }
  .faixa:hover .faixa__trilho{ animation-play-state:running; }
}


/* =========================================================
   SECOES — servicos, equipe, horarios e contato.

   Mesmo sistema do hero: os tokens de cor e de tempo la de cima,
   Bebas nos titulos e Inter no texto. Nada de card branco: a
   pagina inteira e a barbearia a noite, e o latao e a unica cor
   que chama atencao — por isso ele so aparece em numero, preco e
   estado ativo, nunca em bloco grande.
   ========================================================= */

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

.secao{
  position:relative;
  /* o link do menu nao pode parar com o titulo colado no topo */
  scroll-margin-top:24px;
  padding:clamp(64px,9vw,132px) clamp(20px,5vw,72px);
  max-width:1240px;
  margin-inline:auto;
}

/* uma secao sim, outra nao, sobre um fundo um tom acima: e o que
   separa os blocos sem precisar de linha divisoria */
.secao--faixa{
  /* o fundo vai de borda a borda, mas o conteudo continua na mesma
     coluna das outras secoes. Centrar cada filho no lugar disso
     desalinhava o titulo dos cards. */
  max-width:none;
  padding-inline:max(clamp(20px,5vw,72px), calc((100% - 1240px) / 2));
  background:linear-gradient(180deg, rgba(33,30,27,0) 0%, rgba(33,30,27,.55) 12%, rgba(33,30,27,.55) 88%, rgba(33,30,27,0) 100%);
}

/* ---------- cabecalho de secao ---------- */

.secao__topo{ max-width:62ch; }

.secao__num{
  display:inline-block;
  margin-bottom:14px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:14px;
  letter-spacing:.28em;
  color:var(--latao);
}
.secao__num::after{
  content:"";
  display:inline-block;
  width:clamp(28px,4vw,56px);
  height:1px;
  margin-left:14px;
  vertical-align:.32em;
  background:linear-gradient(90deg, var(--latao), rgba(201,162,39,0));
}

.secao__titulo{
  margin:0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(34px,5.2vw,68px);
  line-height:.94;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--creme);
  text-wrap:balance;
}

.secao__lead{
  margin:clamp(14px,1.6vw,20px) 0 0;
  font-size:clamp(14px,1.1vw,16.5px);
  font-weight:300;
  line-height:1.66;
  color:var(--creme-fraco);
  text-wrap:pretty;
}

/* ---------- 01 · SERVICOS ---------- */

.servicos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin:clamp(34px,4vw,58px) 0 0;
  padding:0;
  list-style:none;
}

.servico{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(20px,2.2vw,30px);
  border-radius:var(--r-card);
  background:rgba(33,30,27,.62);
  border:1px solid rgba(242,234,217,.09);
  transition-property:transform, border-color, background-color;
  transition-duration:var(--d-normal);
  transition-timing-function:var(--e-smooth);
}
.servico:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,39,.42);
  background:rgba(33,30,27,.82);
}

.servico__cab{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}
.servico__nome{
  margin:0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(21px,2vw,27px);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--creme);
}
.servico__preco{
  flex:none;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(20px,1.9vw,26px);
  letter-spacing:.02em;
  color:var(--latao-claro);
  font-variant-numeric:tabular-nums;
}
.servico__texto{
  margin:0;
  font-size:14px;
  font-weight:300;
  line-height:1.6;
  color:var(--creme-fraco);
  text-wrap:pretty;
}
.servico__tempo{
  margin-top:auto;      /* cola no pe, para os cards ficarem alinhados */
  padding-top:12px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(242,234,217,.42);
  font-variant-numeric:tabular-nums;
}

/* o mais pedido ganha borda de latao e um selo, nao um card inteiro
   dourado: dourado em area grande vira ruido, nao destaque */
.servico--destaque{
  border-color:rgba(201,162,39,.38);
  background:rgba(33,30,27,.85);
}
.servico__selo{
  position:absolute;
  top:-9px; left:clamp(20px,2.2vw,30px);
  padding:3px 10px;
  border-radius:999px;
  background:var(--latao);
  color:#17140D;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- 02 · EQUIPE ---------- */

.equipe{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin:clamp(34px,4vw,58px) 0 0;
  padding:0;
  list-style:none;
}

.barbeiro{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(22px,2.4vw,32px);
  border-radius:var(--r-card);
  background:rgba(14,13,12,.5);
  border:1px solid rgba(242,234,217,.09);
  transition-property:transform, border-color;
  transition-duration:var(--d-normal);
  transition-timing-function:var(--e-smooth);
}
.barbeiro:hover{ transform:translateY(-3px); border-color:rgba(201,162,39,.35); }

/* iniciais no lugar de foto de banco de imagem: a barbearia poe a
   foto real da equipe dela quando o site for dela */
.barbeiro__inicial{
  display:grid;
  place-items:center;
  width:60px; height:60px;
  margin-bottom:8px;
  border-radius:50%;
  border:1px solid rgba(201,162,39,.4);
  background:radial-gradient(circle at 34% 28%, rgba(201,162,39,.22), rgba(201,162,39,.04));
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:22px;
  letter-spacing:.08em;
  color:var(--latao-claro);
}

.barbeiro__nome{
  margin:0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(22px,2.1vw,28px);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--creme);
}
.barbeiro__papel{
  margin:0;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--latao);
}
.barbeiro__texto{
  margin:6px 0 0;
  font-size:14px;
  font-weight:300;
  line-height:1.6;
  color:var(--creme-fraco);
  text-wrap:pretty;
}

.barbeiro__fatos{
  display:flex;
  gap:28px;
  margin:auto 0 0;
  padding-top:18px;
}
.barbeiro__fatos dt{
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(242,234,217,.4);
}
.barbeiro__fatos dd{
  margin:4px 0 0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:19px;
  letter-spacing:.03em;
  color:var(--creme);
  font-variant-numeric:tabular-nums;
}

/* ---------- 03 · HORARIOS ---------- */

.horarios__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
.horarios__cta{ margin-top:clamp(22px,2.6vw,32px); }

.agenda{
  margin:0;
  padding:0;
  list-style:none;
}
.agenda__linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:clamp(12px,1.3vw,17px) 4px;
  border-bottom:1px solid rgba(242,234,217,.08);
}
.agenda__linha:first-child{ border-top:1px solid rgba(242,234,217,.08); }

.agenda__dia{
  font-size:14.5px;
  font-weight:400;
  color:var(--creme);
}
.agenda__hora{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:19px;
  letter-spacing:.05em;
  color:var(--creme);
  font-variant-numeric:tabular-nums;
}
.agenda__hora--fechado{
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(242,234,217,.34);
}

/* o script marca o dia de hoje: e a informacao que a pessoa veio
   buscar, entao ela nao devia precisar procurar na lista */
.agenda__linha.is-hoje{
  margin-inline:-14px;
  padding-inline:18px;
  border-radius:10px;
  background:rgba(201,162,39,.09);
  border-bottom-color:transparent;
}
.agenda__linha.is-hoje .agenda__dia{ color:var(--latao-claro); font-weight:500; }
.agenda__linha.is-hoje .agenda__dia::after{
  content:" · hoje";
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--latao);
}
.agenda__linha.is-hoje .agenda__hora{ color:var(--latao-claro); }

/* ---------- 04 · CONTATO ---------- */

.contato{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,3.4vw,54px);
  margin-top:clamp(34px,4vw,54px);
  align-items:start;
}

.contato__lista{ margin:0; padding:0; list-style:none; }
.contato__item{
  padding:clamp(14px,1.5vw,20px) 0;
  border-bottom:1px solid rgba(242,234,217,.08);
}
.contato__item:first-child{ padding-top:0; }
.contato__rotulo{
  display:block;
  margin-bottom:7px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--latao);
}
.contato__valor{
  display:inline-block;
  font-size:15.5px;
  line-height:1.5;
  color:var(--creme);
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.32);
  transition-property:color, border-color;
  transition-duration:var(--d-fast);
  transition-timing-function:var(--e-smooth);
}
.contato__valor:hover{ color:var(--latao-claro); border-color:var(--latao); }
/* o que nao e link nao pode parecer link */
.contato__valor--simples{
  border-bottom:0;
  color:var(--creme-fraco);
  font-weight:300;
}

.chamada{
  padding:clamp(24px,2.8vw,38px);
  border-radius:var(--r-card);
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(201,162,39,.16) 0%, rgba(201,162,39,0) 58%),
    rgba(33,30,27,.75);
  border:1px solid rgba(201,162,39,.28);
}
.chamada__titulo{
  margin:0;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(24px,2.4vw,32px);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--creme);
}
.chamada__texto{
  margin:12px 0 0;
  font-size:14.5px;
  font-weight:300;
  line-height:1.62;
  color:var(--creme-fraco);
  text-wrap:pretty;
}
.chamada__botao{ margin-top:clamp(18px,2vw,24px); }
.chamada__nota{
  margin:14px 0 0;
  font-size:11.5px;
  letter-spacing:.06em;
  color:rgba(242,234,217,.42);
}

/* ---------- RODAPE ---------- */

.rodape{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1240px;
  margin-inline:auto;
  padding:clamp(28px,3vw,40px) clamp(20px,5vw,72px) clamp(34px,4vw,52px);
  border-top:1px solid rgba(242,234,217,.08);
}
.marca--rodape{ font-size:clamp(17px,1.5vw,21px); }
.rodape__links{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,30px); }
.rodape__links a{
  color:var(--creme-fraco);
  font-size:13px;
  text-decoration:none;
  transition:color var(--d-fast) var(--e-smooth);
}
.rodape__links a:hover{ color:var(--latao-claro); }
.rodape__nota{
  margin:0;
  width:100%;
  padding-top:6px;
  font-size:11.5px;
  color:rgba(242,234,217,.34);
}

/* ---------- entrada ao rolar ----------
   Um deslocamento curto, uma vez so. O conteudo ja esta no HTML: se o
   script nao rodar, .revela nunca fica invisivel — por isso o estado
   escondido so entra quando o script marca a pagina. */
.js-revela .revela{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--d-slow) var(--e-smooth), transform var(--d-slow) var(--e-smooth);
}
.js-revela .revela.is-dentro{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js-revela .revela{ opacity:1; transform:none; transition:none; }
}

/* ---------- secoes no celular ---------- */

@media (max-width:860px){
  .horarios__grade{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,4vw,38px); }
  .contato{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:520px){
  .secao{ padding-inline:18px; }
  .secao--faixa{ padding-inline:18px; }
  .servico{ padding:20px; }
  .barbeiro{ padding:22px; }
  .rodape{ padding-inline:18px; }
  .agenda__linha.is-hoje{ margin-inline:-10px; padding-inline:14px; }
}