/* ── Fontes embutidas (woff2, subconjunto latino) ────────────────
   Não dependem de internet nem de CDN: renderizam igual em
   qualquer navegador, offline inclusive.
   Alfa Slab One e Karla — licença SIL Open Font License 1.1     */
@font-face{
  font-family:'Alfa Slab One'; font-style:normal; font-weight:400;
  font-display:block;
  src:url(../assets/fonts/alfa-slab-one.woff2) format('woff2');
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:200 800;
  font-display:block;
  src:url(../assets/fonts/karla.woff2) format('woff2');
}

/* ═══════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════ */
:root{
  /* o site tem paleta própria: o navegador não deve reinterpretar
     as cores no modo escuro do sistema */
  color-scheme:dark only;
  /* paleta: o poste de barbeiro, desmontado */
  --base:      #13171E;   /* quase-preto azulado — fundo principal */
  --painel:    #1C222D;
  --poste-grafico:#232D3E;   /* poste decorativo do herói */   /* painéis e cartões, um degrau acima do fundo */
  --fundo:     #0D1016;   /* o mais escuro: rodapé */
  --vermelho:  #E4544A;   /* vermelho do poste, clareado p/ ler no escuro */
  --azul:      #2F5FB3;   /* azul do poste, p/ ícones e detalhes */
  --azul-fundo:#1A3566;   /* azul profundo do bloco da agenda */
  --tinta:     #EDF1F6;   /* texto */
  --branco:    #FFFFFF;

  /* versões claras — usar SEMPRE que a cor cair sobre fundo escuro.
     As de cima somem no escuro; estas mantêm contraste legível. */
  --azul-claro:     #8FB4EC;
  --vermelho-claro: #F79289;
  --linha:     rgba(255,255,255,.13);
  --sombra:    0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.4);

  --display: 'Alfa Slab One', Georgia, serif;
  --sans: 'Karla', system-ui, -apple-system, sans-serif;

  /* largura de CONTEÚDO: títulos, tabela de preços, agenda, contato.
     largura AMPLA: só onde mais espaço ajuda (cards de serviço, fotos do herói).
     largura de LEITURA: parágrafos corridos — texto largo demais fica ilegível. */
  --largura: 1140px;
  --largura-ampla: 1140px;
  --leitura: 70ch;
  --gutter: clamp(20px, 5vw, 48px);
  --rail: 12px;
  --padding-secao: clamp(64px, 9vw, 112px);

  /* quanto a faixa ampla ganha além da faixa de conteúdo, para cada lado —
     usado para "vazar" cards/fotos pra direita sem mover a borda esquerda */
  --extra-ampla: calc((var(--largura-ampla) - var(--largura)) / 2);

  /* bigode usado no lugar do tracinho dos títulos */
  --bigode: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2026%22%3E%3Cpath%20d%3D%22M40%208%20C33%208%2025%2010%2018%2014%20C13%2016.8%208%2016.5%207%2013%20C6.2%2010.2%208.5%208%2011.5%208.6%20C7%205.5%201.5%208.5%201.5%2014%20C1.5%2020%208%2024%2015%2022.5%20C24%2020.6%2032%2014%2040%2014%20C48%2014%2056%2020.6%2065%2022.5%20C72%2024%2078.5%2020%2078.5%2014%20C78.5%208.5%2073%205.5%2068.5%208.6%20C71.5%208%2073.8%2010.2%2073%2013%20C72%2016.5%2067%2016.8%2062%2014%20C55%2010%2047%208%2040%208%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

/* ═══════════════════════════════════════════════
   TOKENS — desktop grande (390/820 abaixo daqui ficam intocados)
   ═══════════════════════════════════════════════ */
@media (min-width:1280px){
  :root{
    --largura: 1210px;
    --largura-ampla: 1290px;
    --gutter: 48px;
    --padding-secao: clamp(72px, 8vw, 128px);
  }
}
@media (min-width:1600px){
  :root{
    --largura: 1470px;
    --largura-ampla: 1560px;
    --gutter: 56px;
    --padding-secao: clamp(88px, 7.5vw, 152px);
  }
}
@media (min-width:1920px){
  :root{
    --largura: 1730px;
    --largura-ampla: 1830px;
    --gutter: 64px;
    --padding-secao: clamp(104px, 7vw, 176px);
  }
}
@media (min-width:2560px){
  :root{
    --largura: 2050px;
    --largura-ampla: 2360px;
    --gutter: 80px;
    --padding-secao: clamp(120px, 6vw, 200px);
  }
}