/* =========================================================================
   NORWAY · BASE DIGITAL — folha de estilo da página
   -------------------------------------------------------------------------
   CSS escrito à mão, sem framework e sem build. As cores e a escala vêm de
   tokens.css — nunca escreva um hex aqui, use a variável.

   Organização, de cima para baixo:
     1. Fontes
     2. Base e acessibilidade
     3. Peças de layout   (.envoltorio, .secao, .medida, .fluxo)
     4. Tipografia        (.t1 .t2 .t3, .corpo, .rotulo, .elo)
     5. Componentes       (.marca, .botao, .linha-de-base, .cartao…)
     6. Faixa, cabeçalho e rodapé
     7. Movimento
   ========================================================================= */

/* =========================================================================
   1. FONTES
   Self-hosted, subset latino. Não trocar por <link> do Google Fonts: custa
   uma conexão externa antes do primeiro texto aparecer, que é justamente o
   que esta página não pode fazer — ela vende sites rápidos.

   Só os quatro cortes que a página realmente pinta estão aqui. Ao usar um
   peso novo, copie o .woff2 correspondente para /fontes e declare abaixo,
   senão o navegador simula o peso e a marca fica errada.
   ========================================================================= */

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fontes/chivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fontes/chivo-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fontes/chivo-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fontes/hanken-400.woff2') format('woff2');
}

/* =========================================================================
   2. BASE
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo quando o usuário pula pela âncora. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

/* Foco de teclado sempre visível — em qualquer fundo. */
:focus-visible {
  outline: 2px solid var(--latao-texto);
  outline-offset: 3px;
  border-radius: 2px;
}
.sobre-tinta :focus-visible {
  outline-color: var(--latao);
}

::selection {
  background-color: var(--latao-texto);
  color: var(--papel);
}

/* Pular para o conteúdo — só aparece no foco de teclado. */
.pular {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background-color: var(--tinta);
  color: var(--papel);
  padding: 0.75rem 1.25rem;
  font-family: var(--fonte-mono);
  font-size: var(--texto-rotulo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.pular:focus {
  top: 1rem;
}

/* =========================================================================
   3. PEÇAS DE LAYOUT
   ========================================================================= */

/* Faixa central de toda seção. */
.envoltorio {
  max-width: var(--largura-pagina);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 640px) {
  .envoltorio {
    padding-inline: 2rem;
  }
}

.secao {
  padding-block: var(--espaco-secao);
}

/* O herói fecha com a linha de base, então respira menos embaixo. */
.secao--heroi {
  padding-bottom: var(--espaco-bloco);
}

.secao--papel {
  background-color: var(--papel);
}
.secao--osso {
  background-color: var(--osso);
}
.secao--tinta {
  background-color: var(--tinta);
  color: var(--osso);
}

/* Limite de medida de leitura. */
.medida {
  max-width: var(--largura-leitura);
}

/* Ritmo vertical por herança: em vez de marcar margem em cada parágrafo,
   o container espaça os próprios filhos. Ajuste o intervalo com --fluxo. */
.fluxo > * + * {
  margin-top: var(--fluxo, 1.25rem);
}

.espaco-bloco {
  margin-top: var(--espaco-bloco);
}

/* =========================================================================
   4. TIPOGRAFIA
   ========================================================================= */

.t1,
.t2,
.t3 {
  font-family: var(--fonte-titulo);
  color: var(--tinta-texto);
  text-wrap: balance;
}

.t1 {
  font-size: var(--texto-t1);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.t2 {
  font-size: var(--texto-t2);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.t3 {
  font-size: var(--texto-t3);
  font-weight: 700;
  line-height: 1.3;
}

.secao--tinta .t1,
.secao--tinta .t2,
.secao--tinta .t3 {
  color: var(--papel);
}

/* TEXTO CORRIDO SOBRE TINTA.
   Sem estas três regras a seção 04 sairia com texto quase invisível: .corpo
   e .corpo-g são --grafite (#232A30), que sobre tinta (#0B1116) dá 1.5:1 —
   cinza-escuro sobre preto. O osso resolve com folga (14.4:1 medido).
   Qualquer seção nova de fundo escuro depende disto. */
.secao--tinta .corpo,
.secao--tinta .corpo-g,
.secao--tinta .miudo {
  color: var(--osso);
}

/* .forte destaca escurecendo — sobre tinta o destaque é o contrário,
   clarear até o branco do papel. */
.secao--tinta .forte {
  color: var(--papel);
}

.corpo {
  font-size: var(--texto-corpo);
  color: var(--grafite);
}

.corpo-g {
  font-size: var(--texto-corpo-g);
  line-height: 1.55;
  color: var(--grafite);
}

/* Para o parágrafo que precisa pesar mais que o texto ao redor. */
.forte {
  color: var(--tinta-texto);
}

.miudo {
  font-size: var(--texto-miudo);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   RÓTULO — o texto em Chivo Mono que aparece em toda seção.
   É onde o contraste é mais fácil de errar: 12px é texto pequeno, então
   exige 4,5:1, e nem o latão claro nem a pedra-fria chegam lá sobre
   papel/osso. Por isso a cor mora aqui e não em cada uso.
   Ver a tabela de medição em tokens.css.
   ------------------------------------------------------------------------- */

.rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-rotulo);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* A numeração dentro do rótulo — o único latão em texto pequeno. */
.rotulo__numero {
  color: var(--latao-rotulo);
}

/* Mesmo rótulo sobre fundo tinta, onde a escala de cor se inverte. */
.rotulo--escuro {
  color: rgb(227 224 217 / 0.75);
}
.rotulo--escuro .rotulo__numero {
  color: var(--latao);
}

/* Link em texto de corpo sobre fundo claro. Mesma armadilha de tamanho. */
.elo {
  color: var(--latao-rotulo);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================================================
   5. COMPONENTES
   ========================================================================= */

/* -------------------------------------------------------------------------
   MARCA — lockup NORWAY + BASE DIGITAL.
   O tamanho é controlado por --altura-selo, definido no uso.
   ------------------------------------------------------------------------- */

.marca {
  --altura-selo: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--altura-selo) * 0.4);
  /* Área de reserva ao redor da marca. */
  padding: calc(var(--altura-selo) / 4);
  text-decoration: none;
}

.marca__selo {
  flex: none;
  width: var(--altura-selo);
  height: var(--altura-selo);
  overflow: visible;
}

.marca__montanha {
  stroke: var(--tinta-texto);
}
.marca__agua,
.marca__reflexo {
  stroke: var(--latao-texto);
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1;
  /* O lockup é uma unidade: "BASE DIGITAL" quebrando em duas linhas
     descaracteriza a marca. Em tela apertada quem cede é o resto da barra,
     nunca a marca. */
  white-space: nowrap;
}

.marca {
  flex: none;
}

.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: calc(var(--altura-selo) * 0.58);
  color: var(--tinta-texto);
}

.marca__descritor {
  font-family: var(--fonte-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: max(9px, calc(var(--altura-selo) * 0.23));
  margin-top: calc(var(--altura-selo) * 0.16);
  color: var(--latao-rotulo);
}

/* Sobre fundo tinta a tinta e o latão trocam de papel. */
.marca--escura .marca__montanha {
  stroke: var(--papel);
}
.marca--escura .marca__agua,
.marca--escura .marca__reflexo,
.marca--escura .marca__descritor {
  stroke: var(--latao);
  color: var(--latao);
}
.marca--escura .marca__nome {
  color: var(--papel);
}

/* -------------------------------------------------------------------------
   BOTÃO
   min-height 44px não é enfeite: é o alvo de toque mínimo.
   ------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  /* 44px nos dois eixos. A largura importa quando o botão fica só com o
     ícone: com o texto escondido ele mediu 43px, um pixel abaixo do alvo. */
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}

.botao svg {
  flex: none;
}

.botao--solido {
  background-color: var(--tinta);
  color: var(--papel);
}
.botao--solido:hover {
  background-color: var(--grafite);
}

.botao--contorno {
  border: 1px solid var(--borda);
  color: var(--tinta-texto);
}
.botao--contorno:hover {
  border-color: var(--latao-texto);
  color: var(--latao-texto);
}

/* Para usar SOBRE FUNDO TINTA — painel do celular. O botão sólido é tinta e
   sumiria ali, sobrando só o texto solto sem forma de botão. */
.botao--claro {
  background-color: var(--latao);
  color: var(--tinta);
}
.botao--claro:hover {
  background-color: var(--osso);
}

/* O do cabeçalho é um pouco menor, para a barra não engordar. */
.botao--compacto {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
}

/* Abaixo de 480px o cabeçalho tem marca + botão + três traços, e os três não
   cabem em 360px: o botão de três traços era empurrado para fora da tela.
   Aqui o botão do cabeçalho fica só com o ícone — o nome continua no
   aria-label, e o texto por extenso segue no painel e na chamada final. */
@media (max-width: 479px) {
  .botao--compacto {
    padding: 0.75rem;
  }
  .botao--compacto .botao__texto {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   BOTÃO FLUTUANTE — canto inferior direito, entra aos 30% de rolagem.
   O filete de latão em volta não é decoração: o rodapé é fundo tinta, e sem
   a borda o botão (que também é tinta) desapareceria nele — sobraria o
   ícone solto, sem forma de botão. Borda, e não sombra, porque sombra
   difusa está fora da linguagem da marca.
   ------------------------------------------------------------------------- */

.zap-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgb(184 150 90 / 0.45);
  border-radius: 50%;
  background-color: var(--tinta);
  color: var(--latao);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 300ms var(--curva), transform 300ms var(--curva);
}

.zap-flutuante:hover {
  background-color: var(--grafite);
}

.zap-flutuante.visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------
   LINHA DE BASE — elemento de assinatura da Base Digital.
   Filete de 1px em latão no rodapé de cada seção, com rótulo em Chivo Mono
   ancorado à esquerda. A linha desenha da esquerda para a direita quando a
   seção entra em tela.

   É o ÚNICO elemento decorativo permitido na página. Nada de gradiente,
   sombra difusa, glassmorphism ou ícone genérico.
   ------------------------------------------------------------------------- */

.linha-de-base {
  margin-top: var(--espaco-bloco);
}

.linha-de-base__filete {
  height: 1px;
  width: 100%;
  transform-origin: left;
  background-color: var(--latao-filete);
}

.secao--tinta .linha-de-base__filete {
  background-color: var(--latao-filete-escuro);
}

.linha-de-base__rotulo {
  margin-top: 0.75rem;
}

/* =========================================================================
   BLOCOS DE CONTEÚDO
   ========================================================================= */

/* Grades das seções 02 e 04. */
.grade {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .grade--tres {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grade--etapas {
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .grade--etapas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Duas colunas para blocos de texto mais longos que as etapas — as
   competências da seção 05. Quebra em 768px como a de etapas, mas com folga
   maior entre as colunas: são dois parágrafos corridos lado a lado, e com
   2,5rem eles leem como um texto só em duas colunas de jornal. */
.grade--dois {
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .grade--dois {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.5rem;
  }
}

/* Item que abre com filete horizontal em cima. */
.item-filete {
  border-top: 1px solid var(--borda);
  padding-top: 1.5rem;
}

.secao--tinta .item-filete {
  border-top-color: var(--borda-escura);
}

/* -------------------------------------------------------------------------
   SEÇÃO 03 — o site é o carro-chefe.
   Ele ocupa a coluna maior e ganha cartão próprio; as redes vêm ao lado com
   peso menor. A hierarquia é intencional e é o que o cliente pediu.
   ------------------------------------------------------------------------- */

.servicos {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .servicos {
    grid-template-columns: 7fr 5fr;
    column-gap: 3rem;
  }
  /* Alinha o topo do texto das redes com o texto dentro do cartão. */
  .servicos__redes {
    padding-top: 2.25rem;
  }
}

.cartao {
  border-top: 2px solid var(--latao-texto);
  background-color: var(--osso);
  padding: 1.75rem;
}

@media (min-width: 640px) {
  .cartao {
    padding: 2.25rem;
  }
}

/* Lista com traço de latão no lugar de marcador. */
.lista-tracos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lista-tracos li {
  display: flex;
  gap: 0.75rem;
  font-size: var(--texto-corpo);
  color: var(--tinta-texto);
}

.lista-tracos li::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1px;
  margin-top: 0.7em;
  background-color: var(--latao-texto);
}

/* O argumento comercial dentro do cartão, separado por filete. */
.nota-mensalidade {
  margin-top: 2rem;
  border-top: 1px solid var(--borda);
  padding-top: 1.5rem;
  font-size: var(--texto-corpo);
  color: var(--tinta-texto);
}

/* -------------------------------------------------------------------------
   NOTAS — os limites do serviço, no pé de "Como funciona".
   Peso visual deliberadamente baixo: já foram uma seção de fundo tinta e
   roubavam a atenção da oferta. Aqui informam sem competir. Filete fino em
   cima, letra miúda, nada de cartão nem de fundo próprio.
   ------------------------------------------------------------------------- */

.notas {
  border-top: 1px solid var(--borda);
  padding-top: 1.5rem;
}

.notas__lista {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.notas__lista li {
  display: flex;
  gap: 0.75rem;
  font-size: var(--texto-miudo);
  line-height: 1.55;
  color: var(--grafite);
}

/* Mesmo traço de latão da .lista-tracos, um pouco menor: as duas listas
   pertencem ao mesmo sistema, e a nota é a versão discreta dele. */
.notas__lista li::before {
  content: '';
  flex: none;
  width: 0.75rem;
  height: 1px;
  margin-top: 0.75em;
  background-color: var(--latao-texto);
}

.notas__fecho {
  margin-top: 1.25rem;
  font-size: var(--texto-miudo);
  line-height: 1.55;
  color: var(--grafite);
}

/* Camada adicional: anúncios pagos. Separada de propósito — não é item do
   pacote, e o filete vertical à esquerda existe para dizer isso sem texto. */
.camada {
  margin-top: var(--espaco-bloco);
  max-width: 34rem;
  border-left: 2px solid var(--latao-texto);
  padding: 0.25rem 0 0.25rem 1.5rem;
}

/* -------------------------------------------------------------------------
   FORMULÁRIO DE CONTATO
   Vive em dois lugares com o mesmo visual: dentro do modal e na página
   /contato.php. Um conjunto de regras só, por isso.
   ------------------------------------------------------------------------- */

/* Esconde do olho sem esconder do robô — é o campo-armadilha. `display:
   none` não serviria: robô que se preza pula campo com display none, e a
   armadilha ficaria vazia sempre. Ver o comentário em partes/formulario.php. */
.fora-da-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.campo__rotulo {
  color: var(--grafite);
}

.campo__entrada {
  width: 100%;
  /* 48px: um pouco acima do alvo mínimo, porque errar um campo de texto
     custa mais que errar um botão — a pessoa perde o que digitou. */
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borda);
  /* Canto reto é a linguagem da marca. O reset é explícito porque o iOS
     arredonda input por conta própria. */
  border-radius: 0;
  background-color: var(--papel);
  color: var(--tinta-texto);
  font-family: var(--fonte-corpo);
  /* 16px CRAVADO, sem clamp. Abaixo disso o Safari do iPhone dá zoom
     sozinho ao focar o campo e a página fica torta no meio do
     preenchimento — que é exatamente onde não se pode perder ninguém. */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 200ms;
}

.campo__entrada::placeholder {
  color: var(--pedra-fria);
}

.campo__entrada:focus {
  border-color: var(--latao-texto);
}

/* Erro sinalizado por DOIS canais: a borda muda de cor e uma frase aparece
   embaixo. Cor sozinha não chega em quem não distingue vermelho de marrom. */
.campo__entrada[aria-invalid='true'] {
  border-color: var(--erro);
}

.campo__erro {
  font-size: var(--texto-miudo);
  line-height: 1.4;
  color: var(--erro);
}

.campo__erro[hidden] {
  display: none;
}

.campo__erro--geral {
  border-left: 2px solid var(--erro);
  padding-left: 0.875rem;
}

.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--texto-miudo);
  line-height: 1.5;
  color: var(--grafite);
  cursor: pointer;
}

.consentimento input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  /* Alinha o quadrado com a primeira linha do texto, não com o topo da
     caixa: a diferença aparece quando a frase quebra em três linhas. */
  margin: 0.15em 0 0;
  accent-color: var(--latao-texto);
}

.formulario__enviar {
  margin-top: 0.25rem;
  /* No celular ocupa a largura toda: é o único destino da tela e não há
     motivo para deixar alvo de toque na mesa. */
  align-self: stretch;
}

@media (min-width: 640px) {
  .formulario__enviar {
    align-self: flex-start;
  }
}

.formulario__aviso {
  color: var(--grafite);
}

/* -------------------------------------------------------------------------
   MODAL DE CONTATO
   <dialog> nativo. A trava de foco, o fundo inerte e o Esc vêm do navegador
   — aqui só entra aparência.
   ------------------------------------------------------------------------- */

.modal {
  width: min(34rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background-color: rgb(11 17 22 / 0.72);
}

.modal__caixa {
  position: relative;
  /* dvh e não vh: no celular a barra de endereço entra e sai, e com vh o
     botão de enviar fica embaixo dela na hora de tocar. */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 2px solid var(--latao-texto);
  background-color: var(--osso);
  padding: 1.75rem 1.5rem 2rem;
}

@media (min-width: 640px) {
  .modal__caixa {
    padding: 2.25rem;
  }
}

/* Navegador sem dvh (Safari < 15.4) cai no vh, que é pior mas não quebra. */
@supports not (height: 100dvh) {
  .modal__caixa {
    max-height: calc(100vh - 2rem);
  }
}

.modal__fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grafite);
  cursor: pointer;
  transition: color 200ms;
}

.modal__fechar:hover {
  color: var(--tinta-texto);
}

/* O rótulo do topo passa por baixo do botão de fechar sem isso. */
.modal__caixa > .rotulo {
  padding-right: 2.75rem;
}

.modal__sucesso[hidden] {
  display: none;
}

/* Foco programático em bloco que não é interativo — a caixa ao abrir, o
   aviso ao enviar. O contorno em volta do bloco inteiro não comunica nada e
   assusta; o que orienta é o título, que o leitor de tela anuncia. O foco de
   teclado de verdade, nos campos e botões, continua com o contorno da regra
   :focus-visible lá em cima. */
.modal__caixa:focus,
.modal__sucesso:focus {
  outline: none;
}

/* =========================================================================
   6. FAIXA DE CONTATO, CABEÇALHO E RODAPÉ
   ========================================================================= */

/* Faixa de contato: rola junto, não é fixa. O telefone precisa estar
   visível na chegada; quem já rolou está lendo, e o botão flutuante cobre o
   resto do caminho. */
.faixa {
  background-color: var(--tinta);
}

.faixa__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  text-align: center;
}

.faixa a {
  display: inline-flex;
  align-items: center;
  /* Alvo de toque de verdade. É isso que define a altura da faixa. */
  min-height: 44px;
  text-decoration: none;
}

.faixa a:hover {
  color: var(--latao);
}

.faixa__contatos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.5rem;
}

/* No celular sobra só o telefone: duas linhas empilhadas empurravam o herói
   para fora da primeira tela, e o e-mail continua no rodapé e na chamada
   final.

   O seletor é `.faixa .faixa__email` e não `.faixa__email` solto por causa
   da regra `.faixa a` acima: ela tem especificidade 0,1,1 e venceria um
   `.faixa__email` de 0,1,0, deixando o e-mail visível no celular mesmo com
   o display:none escrito aqui. */
.faixa .faixa__email {
  display: none;
}

@media (min-width: 640px) {
  .faixa__interno {
    flex-direction: row;
    text-align: left;
    /* Sem a frase de posicionamento sobrou um filho só, e o space-between
       o jogaria para a esquerda, em cima da marca. À direita ele fica
       alinhado com o botão de WhatsApp do cabeçalho, logo abaixo. */
    justify-content: flex-end;
  }
  .faixa .faixa__email {
    display: inline-flex;
  }
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--borda);
  background-color: rgb(245 244 241 / 0.92);
  backdrop-filter: blur(2px);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* -------------------------------------------------------------------------
   MENU DE DESKTOP
   Em Chivo Mono, como os rótulos da linha de base: assim ele lê como parte
   do mesmo sistema, e não como um elemento estranho colado no topo.
   Some abaixo de 1024px — daí em diante é o botão de três traços.
   ------------------------------------------------------------------------- */

.menu {
  display: none;
}

.menu ul {
  display: flex;
  align-items: center;
  /* 2,25rem, contra 1,5rem do original: os rótulos estavam perto demais e o
     clique errava de item. O espaço para abrir veio de encurtar o tracking
     das letras logo abaixo — a barra não tem folga para simplesmente
     afastar.

     Chegou a cair para 2rem quando o menu teve seis itens; com a volta aos
     cinco, cabe de novo. O teto é estreito: medir em 1200px antes de
     acrescentar qualquer item ao MENU. */
  gap: 2.25rem;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  /* Alvo de toque, mesmo no desktop: o mouse também erra. */
  min-height: 44px;
  /* Rótulo de menu nunca quebra no meio: "ONDE A MAIORIA / ESTÁ" em duas
     linhas engorda o cabeçalho e vira ruído. */
  white-space: nowrap;
  /* Menos que os 0,16em do .rotulo padrão. Aqui o tracking largo trabalhava
     CONTRA a legibilidade: espalhava as letras de cada item até quase
     encostar no item vizinho, e o olho lia a barra como um bloco só de
     texto em vez de cinco alvos separados. Apertar a letra e afastar o
     item faz o contrário — cada rótulo vira uma palavra compacta, com ar
     em volta. É o único lugar onde o .rotulo foge do tracking do sistema,
     e é por isso. */
  letter-spacing: 0.09em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}

.menu__link:hover {
  color: var(--latao-rotulo);
  border-bottom-color: var(--latao-rotulo);
}

/* 1200px, medido — não estimado. Com os cinco rótulos por extenso, a marca e
   o botão de WhatsApp, a barra precisa de ~1160px. Abaixo disso — o que
   inclui tablet em pé — vale o botão de três traços.

   ARMADILHA REGISTRADA, porque já custou tempo aqui: subir este número NÃO
   cria espaço para a barra. O .envoltorio tem max-width de 74rem (1184px),
   então o cabeçalho para de crescer aí — em janela de 1200, 1440 ou 2560 a
   largura útil é a mesma. Quando o menu teve seis itens e estourou, mexer
   no breakpoint não resolveu nada e por um tempo pareceu ter resolvido.
   Se um dia faltar espaço de novo, o caminho é encurtar rótulo ou alargar
   a caixa do cabeçalho — nunca o breakpoint sozinho. */
@media (min-width: 1200px) {
  .menu {
    display: block;
  }
}

/* -------------------------------------------------------------------------
   BOTÃO DE TRÊS TRAÇOS
   Só existe quando há JS (a classe .js vem do script no <head>) e só abaixo
   de 1024px, onde o menu de desktop não cabe.
   ------------------------------------------------------------------------- */

.tres-tracos {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-texto);
  cursor: pointer;
}

.js .tres-tracos {
  display: grid;
  place-items: center;
}

/* Espelha o limite do .menu logo acima. Se um mudar e o outro não, ou os
   dois aparecem juntos ou some a navegação inteira numa faixa de largura. */
@media (min-width: 1200px) {
  .js .tres-tracos {
    display: none;
  }
}

.tres-tracos__caixa {
  display: grid;
  gap: 5px;
  width: 22px;
}

.tres-tracos__caixa span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  transition: transform 220ms var(--curva), opacity 160ms var(--curva);
}

/* Aberto: os traços de cima e de baixo viram um X, o do meio some. */
.tres-tracos[aria-expanded='true'] .tres-tracos__caixa span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tres-tracos[aria-expanded='true'] .tres-tracos__caixa span:nth-child(2) {
  opacity: 0;
}
.tres-tracos[aria-expanded='true'] .tres-tracos__caixa span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   PAINEL DO CELULAR
   Fundo tinta, ocupando a tela inteira. Fica ABAIXO do cabeçalho no
   empilhamento (z-index 25 contra 30), de propósito: a marca e o botão de
   fechar continuam visíveis e clicáveis com o painel aberto.
   ------------------------------------------------------------------------- */

.painel {
  position: fixed;
  inset: 0;
  z-index: 25;
  background-color: var(--tinta);
  color: var(--osso);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.painel[hidden] {
  display: none;
}

.painel__interno {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding-block: 6rem 3rem;
}

.painel__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  /* Generoso de propósito: é o alvo de toque principal do celular. */
  padding-block: 0.875rem;
  text-decoration: none;
  color: var(--osso);
  transition: color 200ms;
}

.painel__link:hover,
.painel__link:focus-visible {
  color: var(--latao);
}

.painel__link .t3 {
  color: inherit;
}

.painel__numero {
  color: var(--latao);
  flex: none;
}

.painel__contato {
  margin-top: var(--espaco-bloco);
  border-top: 1px solid var(--borda-escura);
  padding-top: var(--espaco-bloco);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.painel__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgb(227 224 217 / 0.75);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.painel__email:hover {
  color: var(--latao);
}

/* NÃO trave a rolagem com `overflow: hidden` no <html> aqui.
 *
 * Parece a solução óbvia para o fundo não rolar, e quebra o cabeçalho: ao
 * tirar o <html> do papel de contêiner de rolagem, o `position: sticky` da
 * barra deixa de valer e ela vai para a posição natural no documento — ou
 * seja, para fora da tela, se a página já estiver rolada. Como o botão de
 * fechar mora nessa barra, o painel ficava sem saída visível para quem
 * abrisse o menu depois de rolar (medido: top de -2822px).
 *
 * Quem segura o fundo é o `overscroll-behavior: contain` do próprio painel,
 * logo acima: o arrasto para no fim do painel em vez de vazar para a página.
 */

/* Compensa o padding interno da marca, para ela alinhar com a coluna. */
.cabecalho .marca,
.rodape .marca {
  margin-left: -0.5rem;
}

.rodape {
  background-color: var(--tinta);
  color: var(--osso);
  padding-block: var(--espaco-secao);
}

.rodape__topo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-bloco);
}

.rodape__contatos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rodape__contatos a {
  min-height: 44px;
  padding-block: 0.5rem;
  font-size: var(--texto-corpo);
  text-decoration: none;
}

.rodape__contatos a:hover {
  color: var(--latao);
}

@media (min-width: 768px) {
  .rodape__topo {
    flex-direction: row;
    justify-content: space-between;
  }
  .rodape__contatos {
    align-items: flex-end;
  }
}

.rodape__base {
  margin-top: var(--espaco-bloco);
  border-top: 1px solid var(--borda-escura);
  padding-top: 1.5rem;
  color: var(--pedra-fria);
}

.rodape__base > div {
  display: flex;
  flex-direction: column;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
}

/* padding + line-height leva o alvo de toque a 44px sem engordar o rodapé. */
.rodape__base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: rgb(139 145 152 / 0.5);
  text-underline-offset: 4px;
}

.rodape__base a:hover {
  color: var(--osso);
}

.rodape__base p {
  padding-block: 0.75rem;
}

@media (min-width: 640px) {
  .rodape__base > div {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================================
   7. MOVIMENTO
   Revelação por scroll: fade + 12px. Uma vez, sem repetir.
   O estado inicial só é aplicado quando o JS confirma que vai observar —
   sem JS, o conteúdo aparece normalmente (nada some).
   ========================================================================= */

.js-revela [data-revela] {
  opacity: 0;
  transform: translateY(12px);
}

.js-revela [data-revela].revelado {
  opacity: 1;
  transform: none;
  transition: opacity var(--duracao-revelacao) var(--curva),
    transform var(--duracao-revelacao) var(--curva);
}

/* Escalonamento curto entre irmãos, para o bloco não piscar todo junto. */
.js-revela [data-atraso='1'].revelado {
  transition-delay: 90ms;
}
.js-revela [data-atraso='2'].revelado {
  transition-delay: 180ms;
}
.js-revela [data-atraso='3'].revelado {
  transition-delay: 270ms;
}

/* A linha de base desenha da esquerda para a direita quando entra em tela. */
.js-revela .linha-de-base__filete {
  transform: scaleX(0);
}
.js-revela .linha-de-base__filete.revelado {
  transform: scaleX(1);
  transition: transform var(--duracao-filete) var(--curva);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-revela [data-revela],
  .js-revela [data-revela].revelado,
  .js-revela .linha-de-base__filete,
  .js-revela .linha-de-base__filete.revelado {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .zap-flutuante,
  .tres-tracos__caixa span {
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}