/* ==========================================================================
   PONTO CERTO v5 — reset, grade, HUD, cursor, grade-overlay
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--line); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  background: var(--b-fundo);
}

body {
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--l1);
  background: var(--b1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--espeto);
  outline-offset: 3px;
  border-radius: var(--raio);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.85rem 1.25rem;
  background: var(--espeto);
  color: #17110e;
  font: 600 var(--t-xs)/1 var(--f-corpo);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.pular-para-conteudo:focus { left: 0.75rem; top: 0.75rem; }

.so-leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- container e grade de 12 ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--pad-container);
}

.grade {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--gap);
}

/* --- rótulo mono (assinatura haoqi) --------------------------------------- */
.mono {
  /* Oswald no lugar da mono de sistema (25/08). O site inteiro passou a ter
     UM sistema tipografico self-hosted: Anton no display, Oswald em rotulo e
     botao, Bitter no texto de destaque, Inter no corpo. A mono de sistema
     saiu porque renderizava diferente em cada aparelho E porque dava ao site
     cara de painel de tecnologia, que nao e a linguagem de uma churrascaria.
     O peso sobe pra 500 e o tracking cai um pouco: a Oswald e mais estreita
     e mais leve que uma monoespacada no mesmo tamanho. */
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* mantidos do .mono original: sem eles os 72 elementos desta classe
     perderiam a cor e o alinhamento de numero de uma vez. */
  font-variant-numeric: tabular-nums;
  color: var(--l3);
}
.mono--forte { color: var(--l2); }
.mono--brasa { color: var(--brasa-viva); }

/* --- ruído de filme ------------------------------------------------------- */
.ruido {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- cursor: negativo NEUTRO -----------------------------------------------
   Era mix-blend-mode: difference, herdado do Volt. Difference inverte canal a
   canal, entao sobre o laranja da marca ele devolvia AZUL — cor que nao existe
   no sistema. Trocado por backdrop-filter grayscale + invert, que e a operacao
   que a gente realmente quer: primeiro tira a cor, depois inverte a luz. Onde o
   fundo e escuro a bolinha fica clara, onde e claro fica escura, e nunca
   aparece matiz nenhum. Fallback abaixo pra quem nao tem backdrop-filter.      */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid rgba(243, 236, 224, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  backdrop-filter: grayscale(1) invert(1);
  -webkit-backdrop-filter: grayscale(1) invert(1);
  opacity: 0;
  transition: width var(--dur-media) var(--cubic-66),
              height var(--dur-media) var(--cubic-66),
              margin var(--dur-media) var(--cubic-66),
              opacity var(--dur-media) var(--cubic-66);
  will-change: transform;
}
.cursor.esta-ativo { opacity: 1; }
.cursor.esta-sobre-alvo {
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  /* sem fundo solido: ele taparia o negativo. O que cresce e a lente. */
}

/* navegador sem backdrop-filter (Firefox antigo): volta pro contorno simples,
   que e feio porem honesto — nunca deixa cor estranha na tela. */
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .cursor { border-color: var(--creme); background: rgba(243, 236, 224, 0.14); }
  .cursor.esta-sobre-alvo { background: rgba(243, 236, 224, 0.22); }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* --- grade-overlay de diagnóstico, Alt+G (Volt) --------------------------- */
#grade-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-grade);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-media) var(--cubic-66);
}
#grade-overlay.esta-visivel { opacity: 1; }
#grade-overlay .container,
#grade-overlay .grade { height: 100%; }
.coluna-diag {
  height: 100%;
  border-left: 1px solid rgba(226, 113, 47, 0.28);
  border-right: 1px solid rgba(226, 113, 47, 0.28);
  background: rgba(226, 113, 47, 0.05);
  position: relative;
}
.coluna-diag span {
  position: absolute;
  top: 6px; left: 5px;
  font: var(--t-micro)/1 var(--f-cond);
  color: var(--brasa-viva);
}

/* --- cruzetas da grade de fundo (haoqi) ----------------------------------- */
/* .cruzetas REMOVIDO em 2026-08-25 a pedido do Thiago. Era uma grade de
   linhas finas que aparecia em tres dobras (rodizio, visita e perguntas).
   Sobre foto de fundo ela lia como interferencia, nao como sistema. */

/* ===================== MENU (espelhado do voltlites.com) ==================
   O contrato medido na referencia: botao em caixa com borda no topo-direito,
   mono, caixa alta, ~12px, raio 3px; ao abrir, uma BARRA na cor de acento
   desce logo abaixo do topo, ocupando a largura util, com titulos de grupo em
   display grande e subitens em mono, tudo em texto ESCURO sobre o acento.
   Aqui o verde deles vira o laranja da marca.
   ⚠️ Contraste medido: #17110e sobre #ff8d00 da 8.07. Creme daria 1.97 e
   branco 2.32 — os dois reprovam. Texto sobre laranja e sempre escuro.     */
.menu__botao {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.2rem;
  min-width: 8.75rem;
  padding: 0.62rem 0.9rem;
  /* mesma familia dos demais botoes do site: a condensada da casa, e nao a
     mono de sistema. Ver o racional completo no `.botao` do secoes.css. */
  font-family: var(--f-cond);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--l1);
  background: rgba(10, 7, 6, 0.55);
  border: 1px solid rgba(243, 236, 224, 0.42);
  border-radius: 3px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.menu__botao:hover { border-color: var(--brasa-viva); }
.menu__botao:focus-visible { outline: 2px solid var(--brasa-viva); outline-offset: 3px; }

/* --- tempos e curvas do menu, TODOS medidos no voltlites rodando (25/08) --
   Refeitos depois que o Thiago apontou que nao estava igual, e ele tinha
   razao: a versao anterior usava a curva do gsap.defaults GLOBAL deles, que
   nao e a curva do menu. Estes vieram de gravar o menu deles frame a frame.
   Cortina e conteudo NAO compartilham curva nem duracao, e e isso que da a
   profundidade. */
:root {
  --menu-dur: 0.5s;                                  /* cortina, simbolo, rolo */
  --menu-dur-conteudo: 0.3s;                         /* o texto dos grupos */
  --menu-ease-cortina: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
  --menu-ease-conteudo: cubic-bezier(0, 0, 0.2, 1);  /* sai rapido, freia */
  --menu-ease-rolo: cubic-bezier(0.66, 0, 0.34, 1);  /* o rotulo em rolo */
}

/* --- a fumaça do botão do menu ------------------------------------------
   ⚠️ O BLUR É O QUE TRANSFORMA BOLHA EM FUMAÇA. Sem ele cada partícula lê
   como um círculo com contorno e o conjunto parece bolinha de neve subindo,
   que foi exatamente o que o Thiago apontou na primeira versão. Com 5px as
   manchas se fundem numa massa contínua: fumaça não tem borda.
   Vai no CSS e não no `ctx.filter` porque no canvas o filtro é reaplicado a
   cada `fill` e fica caro; aqui é uma composição só.
   O botão precisa de `overflow: hidden` pra fumaça não vazar pelas quinas. */
.menu__botao { position: relative; overflow: hidden; isolation: isolate; }
.menu__botao > *:not(.menu__fumo) { position: relative; z-index: 2; }
.menu__fumo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  filter: blur(5px) contrast(1.05);
  transition: opacity 0.45s ease;
}
.menu__botao:hover .menu__fumo,
.menu__botao:focus-visible .menu__fumo { opacity: 1; }

/* o + vira x, desenhado em CSS */
.menu__sinal { position: relative; width: 12px; height: 12px; flex: none; }
.menu__sinal::before, .menu__sinal::after {
  content: "";
  position: absolute; inset: 50% 0 auto 0;
  height: 1.4px; background: currentColor;
  transform: translateY(-50%);
}
.menu__sinal::after { transform: translateY(-50%) rotate(90deg); }
/* O SIMBOLO INTEIRO gira 135 graus, em vez de cada risco girar 45 pro seu
   lado. Medido: a matriz do SVG deles fecha em -0.707/0.707, que e 135
   exatos, em 500ms. Le diferente: roda como um objeto so, e nao como duas
   pecas se ajustando uma na outra. */
.menu__sinal { transition: transform var(--menu-dur) var(--menu-ease-conteudo); }
[aria-expanded="true"] .menu__sinal { transform: rotate(135deg); }

/* o rotulo em ROLO: janela de uma linha com as duas palavras empilhadas.
   Abrir sobe o rolo. E o gesto do .button-menu strong span deles. */
.menu__rotulo { display: block; overflow: hidden; height: 1em; line-height: 1; }
.menu__rolo { display: block; transition: transform var(--menu-dur) var(--menu-ease-rolo); }
.menu__rolo > span { display: block; height: 1em; line-height: 1; }
/* ⚠️ -1em, e NAO -100%. O rolo tem DOIS itens empilhados, entao ele mede 2em
   de altura e -100% o move 2em pra cima: a palavra "Fechar" passava direto e
   o botao ficava so com o simbolo, sem texto. O Volt usa -100% porque la o
   rolo tem um item so dentro do <strong>; a estrutura e outra.
   Em `em` e nao em `%` pra nao depender da quantidade de itens. */
[aria-expanded="true"] .menu__rolo { transform: translateY(-1em); }

.menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-nav) - 1);
  padding-top: clamp(4.2rem, 8vh, 5.6rem);
  pointer-events: none;
}
.menu[hidden] { display: none; }

/* ⚠️ O PAINEL SO RECEBE PONTEIRO QUANDO ESTA ABERTO.
   Bug real, achado em 25/08 e introduzido nesta mesma sessao: ao trocar o
   [hidden] por classe (pra viabilizar a transicao de CSS), o painel passou a
   ficar SEMPRE no DOM. Ele e `position: fixed` cobrindo a tela e o container
   dele tinha `pointer-events: auto` fixo, entao com o menu FECHADO sobrava um
   retangulo invisivel comendo todo toque na metade de cima da pagina.
   Medido no celular: `elementFromPoint` no meio de uma pergunta do FAQ
   devolvia `div.container` de dentro do #menu-painel, e nao o <summary>.
   O sintoma aparecia como "o FAQ nao abre no celular", mas atingia qualquer
   coisa clicavel naquela faixa.
   Licao: elemento fixo que deixa de ser removido do DOM precisa perder o
   ponteiro junto, senao ele vira uma parede invisivel. */
.menu .container { pointer-events: none; }
.menu--aberto .container { pointer-events: auto; }
.menu__grade {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.9rem, 3.5vw, 2.8rem);
  background: var(--brasa-viva);
  color: #17110e;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.85);
  /* --- A CORTINA ------------------------------------------------------
     Medido no menu do voltlites abrindo:
       clip-path inset(0 0 100% 0) -> inset(0 0 0% 0), 500ms,
       cubic-bezier(.4,0,.2,1)
     A progressao gravada foi 97.4 / 80.2 / 22.5 / 7.9 / 0.56 / 0 por frame,
     assinatura dessa curva: quase parada no comeco, disparada no meio,
     freando longo no fim.
     CSS puro de proposito: o menu DELES nao usa GSAP nenhum, so troca um
     atributo no <body>. Assim o nosso tambem anima se o GSAP falhar. */
  /* ⚠️ A CAMADA QUE FALTAVA, e e ela que da o efeito que se ve na tela.
     Medi o .main-nav do voltlites durante a abertura:
       scale 0.500 -> 0.543 -> 0.729 -> 0.969 -> 1.000
       largura  720 ->  781 -> 1049 -> 1396 -> 1440
     Ou seja: o painel nasce em METADE do tamanho e cresce ate 1, com o
     transform-origin no CENTRO-TOPO. E por isso que ele parece abrir do meio
     para as pontas. Antes eu tinha portado so o clip-path, que abre de cima
     para baixo: sozinho ele desce como persiana, mas nao EXPANDE.
     As duas camadas rodam juntas, na mesma curva e na mesma duracao. */
  transform-origin: top center;
  transform: scale(0.5);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--menu-dur) var(--menu-ease-cortina),
              transform var(--menu-dur) var(--menu-ease-cortina);
}
.menu--aberto .menu__grade {
  clip-path: inset(0 0 0% 0);
  transform: scale(1);
}

/* o veu que escurece a pagina atras do menu. No Volt e o .nav-overlay, e ele
   sobe de 0 a 1 junto com a cortina (medi: 0 / 0.31 / 0.84 / 1). Sem ele o
   menu abre sobre a pagina em brilho cheio e perde presenca. */
.menu::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(6, 4, 3, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--menu-dur) var(--menu-ease-cortina);
}
.menu--aberto::before { opacity: 1; }

/* --- O CONTEUDO, EM CAMADA PROPRIA ----------------------------------
   Este e o achado que faltava na nossa versao: no Volt o conteudo NAO
   acompanha a cortina. Duracao menor (300ms contra 500) e curva diferente
   (sai rapido e freia, contra a ease-in-out da cortina). Duas camadas
   correndo em tempos distintos e o que produz profundidade; uma camada so,
   por melhor que seja a curva, le como bloco unico se movendo. */
.menu__grupo {
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--menu-dur-conteudo) var(--menu-ease-conteudo),
              transform var(--menu-dur-conteudo) var(--menu-ease-conteudo);
  transition-delay: 0s;  /* ao FECHAR nao ha degrau: o texto some junto */
}
.menu--aberto .menu__grupo { opacity: 1; transform: translateY(0); }
/* degrau de 40ms entre os 5 grupos, so na ABERTURA */
.menu--aberto .menu__grupo:nth-child(1) { transition-delay: .06s }
.menu--aberto .menu__grupo:nth-child(2) { transition-delay: .10s }
.menu--aberto .menu__grupo:nth-child(3) { transition-delay: .14s }
.menu--aberto .menu__grupo:nth-child(4) { transition-delay: .18s }
.menu--aberto .menu__grupo:nth-child(5) { transition-delay: .22s }
@media (min-width: 860px) {
  .menu__grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Quem pediu menos movimento nao ganha percurso nenhum: aparece e some.
   ⚠️ O clip-path fechado NAO pode entrar aqui, senao o menu fica invisivel
   pra quem usa reduced-motion. So as transicoes saem. */
@media (prefers-reduced-motion: reduce) {
  .menu__grade, .menu__grupo, .menu__sinal, .menu__rolo { transition: none !important; }
}

.menu__titulo {
  display: block;
  /* Anton e branco, a pedido do Thiago em 25/08: a mesma fonte da headline do
     hero ("CHURRASCO DE VERDADE, NA ESQUINA DO MORINGAO"). Antes era Oswald
     em #17110e, que era a tipografia herdada do template.
     ⚠️ MEDIDO: branco sobre o laranja #ff8d00 da 2.32:1 e o piso WCAG e 3:1
     mesmo em texto grande, entao isto REPROVA em contraste. E a mesma conta
     da headline da dobra laranja, e a mesma decisao: se o branco fica, quem
     precisa mudar e o laranja da superficie, nao o texto. */
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.menu__titulo:hover { opacity: 0.62; }
.menu__subs { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.menu__sub {
  font-family: var(--f-cond);
  /* 600 e nao o 400 herdado: sem peso declarado a Oswald cai no regular, e em
     11px com tracking largo o subitem sumia ao lado do titulo em Anton. O
     Thiago apontou que estava "muito fino" em 25/08.
     O tamanho tambem sobe pra 0.78rem e a tinta fica mais cheia (0.86 contra
     0.72): sao tres alavancas pequenas em vez de uma grande, entao o subitem
     ganha presenca sem competir com o titulo. */
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(23, 17, 14, 0.86);
  text-decoration: none;
  transition: color 0.25s ease;
}
.menu__sub:hover { color: #17110e; }

/* o menu ABERTO ja e superficie clara: o difference do topo tem que sair */
body.menu-aberto .nav { mix-blend-mode: normal; }
body.menu-aberto .menu__botao { color: var(--l1); }

/* O BRASAO SAI DE CENA com o menu aberto, em QUALQUER largura. No Volt o logo
   cai a zero (medi: 1.00 / 0.91 / 0.41 / 0.02 / 0 em ~320ms), e e isso que
   deixa o menu assumir a tela. Antes so valia no celular, e no desktop o
   brasao ficava disputando atencao com a barra aberta. */
/* ⚠️ `visibility` NAO INTERPOLA: ela troca de estado, e por padrao troca no
   comeco da transicao. Medido: aos 80ms de abrir o menu o brasao ja estava
   `hidden` com opacidade ainda em 1, ou seja, ele sumia de vez e o fade
   acontecia invisivel.
   O conserto e o padrao para esse par: `visibility` com duracao ZERO e um
   ATRASO igual ao do fade na saida (espera o fade terminar pra esconder), e
   atraso zero na volta (aparece na hora pra poder acender). */
#marca-wrapper {
  transition: opacity 0.32s var(--menu-ease-conteudo),
              visibility 0s linear 0s;
}
body.menu-aberto #marca-wrapper {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--menu-ease-conteudo),
              visibility 0s linear 0.32s;
}

/* No celular o brasao e MAIOR que a faixa do topo e ficava por cima do painel,
   escondendo o primeiro grupo. Com o menu aberto ele sai de cena — o menu
   assume a tela, que e o comportamento da referencia. */
@media (max-width: 859px) {
  #marca-wrapper {
    transition: opacity 0.3s var(--cubic-66), visibility 0.3s;
  }
  /* a regra geral (acima) ja tira o brasao; aqui fica so o ajuste de vao */
  /* e o painel comeca logo abaixo da faixa, sem o vao que existia pro brasao */
  .menu { padding-top: clamp(3.6rem, 7vh, 4.6rem); }
  .menu__grade { gap: 1.15rem; }
}

/* --- HUD inferior (haoqi: hora local, status, coordenada) ----------------- */
.hud {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-hud);
  pointer-events: none;
  padding-block: clamp(0.6rem, 1.2vw, 1rem);
  mix-blend-mode: difference;
}
.hud__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
/* 0,55 vinha de quando o HUD so passava por cima de foto escura. Sob
   `mix-blend-mode: difference`, 55% de creme compoe CINZA MEDIO (medido:
   rgb(127,124,118)) e o contraste caia pra 2,67:1 sobre dobra clara. Com o
   veu do `body::after` garantindo fundo escuro embaixo, da pra subir sem
   risco de estourar. */
.hud .mono { color: rgba(243, 236, 224, 0.82); }
.hud__meio { display: none; }
@media (min-width: 900px) { .hud__meio { display: block; } }

.ponto-status {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: 1px;
  background: var(--l3);
}
.ponto-status[data-aberto="true"] {
  background: #6dbe45;
  box-shadow: 0 0 0 3px rgba(109, 190, 69, 0.22);
}
.ponto-status[data-aberto="false"] { background: var(--brasa); }

/* --- barra de navegação ---------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
  mix-blend-mode: difference;
  /* ⚠️ A BARRA E UMA FAIXA VAZIA DE LARGURA TOTAL: sem isto ela come todo
     clique no topo da tela. O brasao encolhido vive exatamente ali, e por
     isso boa parte dele nao clicava depois que a pessoa rolava.
     Medido numa grade de 144 pontos sobre o brasao ja encolhido: 84 mortos,
     quase todos devolvendo `nav`. No topo da pagina, onde a barra ainda nao
     cobria o brasao, eram 0.
     Quem precisa de clique aqui e so o botao do menu, e ele reativa por
     conta propria (`pointer-events: auto` no .menu__botao).
     Mesma familia do bug do painel do menu nesta sessao: elemento fixo de
     tela cheia sem `pointer-events: none` vira parede invisivel. */
  pointer-events: none;
}
.nav__linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.nav__link {
  font-family: var(--f-cond);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.62);
  transition: color var(--dur-rapida) var(--ease-saida);
  pointer-events: auto;
}
.nav__link:hover, .nav__link:focus-visible { color: #fff; }

/* Sobre dobra de superficie clara (a de avaliacoes e a laranja do FAQ) a
   mistura sai de cena e o texto vira escuro na mao. Medido: #17110e da 8.07
   sobre o laranja #ff8d00 e 15.9 sobre o creme. */
.nav--sobre-claro { mix-blend-mode: normal; }
.nav--sobre-claro .nav__link { color: rgba(23, 17, 14, 0.72); }
.nav--sobre-claro .nav__link:hover,
.nav--sobre-claro .nav__link:focus-visible { color: #17110e; }
.nav--sobre-claro .nav__link--acao {
  color: #17110e;
  border-color: rgba(23, 17, 14, 0.45);
}
.nav--sobre-claro .nav__link--acao:hover { background: rgba(23, 17, 14, 0.10); }
.nav__link--acao {
  color: #fff;
  border: 1px solid rgba(243, 236, 224, 0.4);
  padding: 0.6em 1.1em;
  border-radius: 999px;
}
.nav__link--acao:hover { background: rgba(243, 236, 224, 0.12); }
@media (max-width: 720px) {
  .nav__link:not(.nav__link--acao) { display: none; }
}

/* ==========================================================================
   Barra de rolagem no laranja do brasão (#FF8D00, amostrado do próprio PNG).
   É o indicador de onde a pessoa está na página, então carrega a marca.
   ========================================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--laranja-logo) var(--b-fundo);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--b-fundo); }
::-webkit-scrollbar-thumb {
  background: var(--laranja-logo);
  border-radius: 999px;
  border: 3px solid var(--b-fundo);
}
::-webkit-scrollbar-thumb:hover { background: var(--brasa-viva); }
::-webkit-scrollbar-corner { background: var(--b-fundo); }


/* ========================= ABERTURA DO BRASÃO ============================
   O brasão se monta peça por peça sobre uma tela cheia, e só então some.
   As 6 imagens são 742x750, exportadas na mesma tela, então empilhadas em
   inset:0 reconstroem o brasão sem reposicionar nada.
   Roda UMA VEZ POR ABA (sessionStorage): efeito de abertura que se repete a
   cada navegação deixa de ser recepção e vira pedágio.                    */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  /* near-black QUENTE, o mesmo do site-v2. Preto puro lê como tela
     desligada; este tem terra dentro e pertence à paleta da casa. */
  background: #0E0A08;
  /* nasce invisível: quem acende é o JS, depois de confirmar que rodou */
  opacity: 0;
  visibility: hidden;
}
/* ⚠️ A ENTRADA E INSTANTANEA, a saida e que tem fade.
   Na primeira versao a capa fazia fade-in de 0.7s enquanto o brasao ja
   montava por baixo: medido, aos 400ms a opacidade era 0.53 e as pecas ja
   estavam no lugar. A pessoa via a tela surgir com o brasao PRONTO, que e
   exatamente perder o efeito. Agora ela aparece de uma vez e a montagem
   acontece inteira na frente de quem olha. */
.abertura[data-ligada] {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.abertura[data-fim] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s var(--cubic-66), visibility 0.7s;
}

.abertura__brasao {
  position: relative;
  width: min(52vw, 290px);
  aspect-ratio: 742 / 750;
}
.abertura__peca { position: absolute; inset: 0; overflow: hidden; display: block; }
.abertura__peca > i {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* 108% e nao 100%: com 100% a borda de cima da peca ja nasce encostada no
     limite da mascara e um subpixel dela aparece antes da hora. */
  transform: translateY(108%);
  will-change: transform;
}
.abertura__peca[data-p="moldura"] > i { background-image: url("../img/brasao/moldura.png"); }
.abertura__peca[data-p="ponto"]   > i { background-image: url("../img/brasao/ponto.png"); }
.abertura__peca[data-p="certo"]   > i { background-image: url("../img/brasao/certo.png"); }
.abertura__peca[data-p="linha"]   > i { background-image: url("../img/brasao/linha.png"); }
.abertura__peca[data-p="estrela"] > i { background-image: url("../img/brasao/estrela.png"); }
.abertura__peca[data-p="esquina"] > i { background-image: url("../img/brasao/esquina.png"); }

/* o fio de brasa que corre por baixo enquanto o brasão monta */
.abertura__fio {
  position: absolute;
  left: 50%;
  bottom: -9%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 141, 0, 0) 0%, var(--brasa-viva) 50%, rgba(255, 141, 0, 0) 100%);
}

/* quem pediu menos movimento entra direto na página */
@media (prefers-reduced-motion: reduce) {
  .abertura[data-ligada] { opacity: 0; visibility: hidden; }
}


/* ================= ANTI-FOUC DA HERO (25/08) =============================
   Escondido ANTES do primeiro paint pelo script inline do <head>, que carimba
   `pre-motion`. Sem isto o navegador pinta a hero no lugar final, o JS roda
   depois e esconde tudo pra animar: o resultado e um PISCA visivel a cada F5,
   que foi o que o Thiago viu.
   So a HERO entra aqui. As outras dobras nascem abaixo da viewport, entao o
   estado inicial delas nunca chega a ser pintado e nao ha flash.
   A classe some sozinha em 2,5s se o motor nao assumir: pagina escondida pra
   sempre e pior que pagina que pisca.                                      */
.pre-motion .hero__promessa h1,
.pre-motion .hero__promessa > p,
.pre-motion .hero__cta,
.pre-motion .hero__assinatura,
.pre-motion .hero__tracos,
.pre-motion .hero__rolagem {
  opacity: 0;
}
/* as pecas do brasao ja nascem embaixo da mascara, prontas pra SUBIR.
   Aqui o 108% pode ser em % porque o CSS resolve isso uma vez, na pintura, e
   nao reavalia como um tween faria. Quem anima e o GSAP, e la o valor vai em
   pixel fixo (ver `entradaDaHero` no site.js). */
.pre-motion .marca-peca > i {
  transform: translateY(108%);
}