/* ==========================================================================
   PONTO CERTO v5 — seções
   Hero: mosaico sticky que encolhe (portado do voltlites.com)
   ========================================================================== */

/* ============================== 01 · HERO ================================= */
#hero-wrapper {
  position: relative;
  background: #000;
}
@media (min-width: 768px) {
  #hero-wrapper { min-height: 300vh; }
}

#hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
}
/* baixa o brilho no canto onde o brasão vive; é seguro sobre qualquer slide */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 48% 56% at 15% 72%,
    rgba(8, 6, 5, 0.7) 0%,
    rgba(8, 6, 5, 0.34) 46%,
    rgba(8, 6, 5, 0) 72%
  );
}

/* o palco que escala de 1 para 0.5, revelando as peças ao redor */
.hero__palco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.hero__ladrilho {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  background: #000;
  clip-path: inset(0px);
  overflow: hidden;
}
.hero__ladrilho img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  transform: scale(1.25);
}
/* as oito peças em volta do centro */
.hero__ladrilho[data-pos="cima-esq"]    { transform: translate(-100%, -100%); }
.hero__ladrilho[data-pos="cima"]        { transform: translate(0, -100%); }
.hero__ladrilho[data-pos="cima-dir"]    { transform: translate(100%, -100%); }
.hero__ladrilho[data-pos="esq"]         { transform: translate(-100%, 0); }
.hero__ladrilho[data-pos="dir"]         { transform: translate(100%, 0); }
.hero__ladrilho[data-pos="baixo-esq"]   { transform: translate(-100%, 100%); }
.hero__ladrilho[data-pos="baixo"]       { transform: translate(0, 100%); }
.hero__ladrilho[data-pos="baixo-dir"]   { transform: translate(100%, 100%); }

@media (max-width: 767px) {
  .hero__ladrilho:not([data-pos="centro"]) { display: none; }
}

.hero__centro {
  position: relative;
  width: 100vw;
  height: 100svh;
  clip-path: inset(0px);
  overflow: hidden;
}

/* --- slideshow do centro, portado do hero do v1 -------------------------- */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* 900ms com a ease material do v1 */
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* As 3 fotos reais são de dia e claras (brilho medido 85 a 115), e o slide 1 é
   escuro e cinematográfico (93, mas com pretos profundos). Sem correção o hero
   PISCA de escuro pra estourado a cada troca e derruba a marca, o menu e o HUD,
   que são mix-blend-difference e não têm véu próprio. Traz as três pro mesmo
   registro do slide 1. */
.hero__slide--real img {
  filter: brightness(0.66) saturate(0.92) contrast(1.06);
}

/* Véu geral sobre a pilha, equivalente ao .hero__scrim do v1, que eu não tinha
   portado. É ele que garante que QUALQUER slide sustente a marca por cima. */
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 9, 7, 0.62) 0%, rgba(12, 9, 7, 0.12) 34%, rgba(12, 9, 7, 0.55) 100%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(12, 9, 7, 0) 32%, rgba(12, 9, 7, 0.5) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
.hero__veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Este veu vive DENTRO do ladrilho central. Quando o mosaico encolhe na
       rolagem, o centro fica escuro e o ladrilho vizinho nao — a fronteira
       aparecia como um retangulo. As rampas agora chegam em zero nas quatro
       bordas do proprio ladrilho, entao a emenda com o vizinho e continua. */
    linear-gradient(to left,
      rgba(18, 13, 11, 0) 0%,
      rgba(18, 13, 11, 0.62) 4%,
      rgba(18, 13, 11, 0.8) 9%,
      rgba(18, 13, 11, 0.3) 40%,
      rgba(18, 13, 11, 0) 64%),
    linear-gradient(to top,
      rgba(18, 13, 11, 0) 0%,
      rgba(18, 13, 11, 0.92) 5%,
      rgba(18, 13, 11, 0.25) 44%,
      rgba(18, 13, 11, 0.5) 95%,
      rgba(18, 13, 11, 0) 100%);
}
/* .hero__escurecedor REMOVIDO em 2026-08-25.
   Era uma camada preta que subia ate 0.82 conforme a hero saia. Dois motivos
   pra sair: vivia dentro do ladrilho central, entao escurecia so o centro e
   criava uma parede vertical contra os ladrilhos vizinhos; e, uma vez movida
   pra cobrir a hero inteira, virou redundante — as fotos ja carregam o proprio
   veu (.hero__veu) e o mosaico ja entra escuro. Decisao do Thiago: nao
   escurecer mais na saida. */

/* --- wordmark gigante que encolhe pra marca do topo ----------------------- */
#marca-wrapper {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  height: 100svh;
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
  pointer-events: none;
  /* ⚠️ A transicao do brasao mora TODA no base.css, junto das regras do menu,
     porque e o menu quem a dispara. Aqui ficava uma segunda declaracao de
     `transition: opacity` que competia com aquela: as duas funcionavam por
     acidente de especificidade (a do menu vence ao abrir, esta vence ao
     fechar), e duas regras competindo pelo mesmo efeito e bug esperando
     acontecer. Removida em 25/08. */
}
#marca-wrapper.esta-oculta { opacity: 0; }
#marca-crescedor { flex-grow: 1; }
#marca-container {
  /* o brasão é quase quadrado, então a largura aqui manda na altura toda */
  width: min(44vw, 250px);
}
@media (min-width: 768px) {
  #marca-container { width: min(34vw, 460px); }
}
#marca-container a {
  pointer-events: auto;
  display: block;
  position: relative;
  /* a compensação da margem das peças (a arte útil ocupa 83% do arquivo)
     mora AQUI, pra que o link e o desenho tenham exatamente a mesma caixa.
     1/0.83 = 1.205, e metade da sobra recuada de cada lado mantém o centro. */
  width: 120.5%;
  margin-left: -10.25%;
  margin-top: -10.25%;
  margin-bottom: -10.25%;
}
.marca-brasao {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  /* --- O BRASÃO EM 6 PEÇAS (25/08) -------------------------------------
     Substitui o <img> único pelas fatias do LOGO.psd, pra que ele possa se
     MONTAR peça por peça na entrada, como o logo do voltlites.
     ⚠️ COMPENSAÇÃO DE ESCALA: as peças são 742x750 e a arte útil dentro
     delas ocupa só 83% da largura (medido: bbox 64..679). O PNG inteiro que
     estava aqui não tinha essa margem. Sem compensar, o brasão apareceria
     ~17% menor que antes. Por isso a caixa cresce 1/0.83 e recua metade da
     diferença de cada lado, mantendo o centro no mesmo lugar.
     A proporção da arte é IDÊNTICA nos dois (0.949), então o desenho não
     distorce: muda só a moldura de ar em volta. */
  aspect-ratio: 742 / 750;
  /* ⚠️ A compensação de escala foi movida pro <a> (regra logo abaixo), e não
     fica mais aqui. Enquanto ela vivia neste elemento, o brasão media 554px
     dentro de um link de 460px: ele TRANSBORDAVA o próprio botão, e a faixa
     que sobrava à direita não clicava. Medido numa grade de 121 pontos sobre
     o brasão: 11 mortos, todos na coluna da borda direita.
     Com a compensação no link, os dois crescem juntos e a área clicável
     acompanha o desenho. */
  width: 100%;
  /* Halo que acompanha o CONTORNO do brasão (drop-shadow lê o canal alfa), em
     vez de uma placa retangular atrás dele, que leria como adesivo e mataria a
     imponência. Três camadas: uma justa pra cravar a borda, uma média pra dar
     corpo e uma larga e suave pra descolar de qualquer fundo.
     Medido em 24/08: atrás do brasão o fundo chega a rgb(170,162,157), e contra
     isso o laranja dava 1.08 e o contorno branco 2.51. */
  /* Os DOIS ligados (pedido do Thiago em 24/08): o véu radial do canto
     (#hero::before) baixa o brilho do quadrante, e este halo age colado na
     borda, que é onde o véu não alcança. O drop-shadow lê o canal alfa, então
     acompanha o recorte do brasão em vez de virar placa. */
  filter:
    drop-shadow(0 0 2px rgba(8, 6, 5, 0.95))
    drop-shadow(0 3px 12px rgba(8, 6, 5, 0.85))
    drop-shadow(0 8px 34px rgba(8, 6, 5, 0.65));
}
/* véu que só acende quando a marca já assentou no topo: ela atravessa faixa
   clara (os cartões de brasa) e o laranja do brasão sumiria em cima do laranja */
.marca-scrim {
  position: absolute;
  inset: -14%;
  z-index: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(18, 13, 11, 0.6) 42%, rgba(18, 13, 11, 0) 78%);
  transition: opacity var(--dur-media) var(--cubic-66);
}
#marca-wrapper.marca-parada .marca-scrim { opacity: 1; }

#marca-wrapper a { pointer-events: auto; display: block; }

/* --- promessa do hero, à direita ------------------------------------------ */
.hero__promessa::before {
  content: "";
  position: absolute;
  inset: -26% -40% -30% -34%;
  z-index: -1;
  pointer-events: none;
  background:
    /* dissolve nas DUAS pontas. Antes so a esquerda dissolvia: a direita era um
       corte seco de 0.72, escondido enquanto o bloco colava na borda da tela.
       Quando ele recuou em ultra-wide, a aresta apareceu no meio da foto.
       O inset estende 40% alem da direita e 34% alem da esquerda, entao a borda
       direita do TEXTO cai a ~23% da largura do veu: e ate ali que ele sobe. */
    linear-gradient(to left,
      rgba(8, 6, 5, 0) 0%,
      rgba(8, 6, 5, 0.34) 9%,
      rgba(8, 6, 5, 0.66) 17%,
      rgba(8, 6, 5, 0.72) 23%,
      rgba(8, 6, 5, 0.7) 62%,
      rgba(8, 6, 5, 0.53) 82%,
      rgba(8, 6, 5, 0) 100%),
    linear-gradient(to top,
      rgba(10, 7, 6, 0.36) 0%,
      rgba(10, 7, 6, 0) 30%);
  /* esfuma a borda de cima: sem isso o retângulo do véu marca um degrau
     horizontal em cima da foto */
  /* esfuma em CIMA e EMBAIXO. So o topo era esfumado; a base cortava seco, e
     isso so aparecia quando a hero encolhe na rolagem e o veu passa a flutuar
     sobre os ladrilhos do mosaico. A sobra de baixo (-30%) e onde a rampa cabe:
     o veu segue cheio ate ~80%, que e o pe do bloco de texto. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 80%, rgba(0,0,0,0.35) 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 80%, rgba(0,0,0,0.35) 93%, transparent 100%);
}
.hero__promessa {
  position: absolute;
  right: var(--pad-container);
  bottom: clamp(4.4rem, 9.5vh, 7rem);
  z-index: 4;
  max-width: min(62vw, 820px);
  text-align: right;
  pointer-events: none;
}
/* ULTRA-WIDE: o site inteiro tem coluna de conteudo de --largura-max (1680px)
   centralizada, mas a promessa da hero e absoluta e cola em --pad-container,
   que satura em 56px. Numa tela de 2560 a coluna do site acaba a 440px da
   borda e a headline continuava a 56px — 384px fora do alinhamento de tudo o
   mais. Acima de 1700px ela passa a respeitar a MESMA goteira do resto.
   Abaixo disso nada muda: e por isso que no notebook estava certo. */
@media (min-width: 1700px) {
  .hero__promessa {
    right: calc((100vw - var(--largura-max)) / 2 + var(--pad-container));
  }
}

.hero__promessa h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 4.1vw, 3.6rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--creme);
}
/* cada verso é uma linha fechada: "CHURRASCO DE VERDADE" não quebra */
.hero__promessa h1 span {
  display: block;
  white-space: nowrap;
}
.hero__promessa h1 em {
  font-style: normal;
  color: var(--espeto);
}
.hero__promessa p {
  margin-top: 0.9rem;
  font-size: var(--t-sm);
  color: rgba(243, 236, 224, 0.72);
}
@media (max-width: 767px) {
  /* MOBILE, refeito em 2026-08-25 na logica da referencia (voltlites):
     marca pequena no TOPO, conteudo alinhado a ESQUERDA e o respiro
     distribuido na vertical. Antes a marca ocupava a base e a promessa ficava
     empurrada pra 33vh do fundo: sobrava um buraco em cima e tudo se
     amontoava embaixo. */
  .hero__promessa {
    right: var(--pad-container);
    left: var(--pad-container);
    max-width: none;
    bottom: clamp(4.5rem, 13vh, 7.5rem);
    text-align: left;
  }
  /* no celular o bloco ocupa a largura toda, então o véu tem que ser VERTICAL:
     o gradiente lateral do desktop não cobriria nada aqui */
  .hero__promessa::before {
    inset: -18% -12% -40% -12%;
    background: linear-gradient(to top,
      rgba(8, 6, 5, 0.97) 0%,
      rgba(8, 6, 5, 0.95) 62%,
      rgba(8, 6, 5, 0.72) 84%,
      rgba(8, 6, 5, 0) 100%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* NADA de white-space: nowrap aqui — era isso que cortava "LONDRINA/PR"
     na borda. Se nao couber, quebra; texto cortado e pior que texto em duas
     linhas. */
  .hero__assinatura { letter-spacing: 0.08em; font-size: 0.62rem; }
  .hero__promessa h1 { font-size: clamp(1.35rem, 7.4vw, 2.3rem); }
}

.hero__rolagem {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(2.6rem, 6vh, 4rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.hero__rolagem .traco {
  width: 46px; height: 1px;
  background: rgba(243, 236, 224, 0.4);
  position: relative;
  overflow: hidden;
}
.hero__rolagem .traco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brasa-viva);
  transform: translateX(-100%);
  animation: desliza 2.4s var(--cubic-66) infinite;
}
@keyframes desliza {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@media (max-width: 767px) { .hero__rolagem { display: none; } }

/* --- FASE 2 da hero: o convite que nasce no centro ------------------------
   Entra quando a promessa (h1 + botoes) sai, por volta de 1/4 da rolagem
   presa. O PAI so centraliza, por flex e nunca por transform: quem recebe o
   tween do GSAP e a caixa filha, e transform em pai animado por GSAP e
   sobrescrito (licao de 21/08). Fora do .hero__palco de proposito — assim a
   frase NAO encolhe junto com o mosaico e vira a camada por cima dele.       */
.hero__convite {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero__convite-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.8rem, 5vw, 4rem);
  opacity: 0;               /* o GSAP acende; sem JS ele nunca aparece */
}
/* scrim proprio: o centro do mosaico e foto cheia, e texto sobre foto sem
   escurecedor nao passa em contraste */
.hero__convite-caixa::before {
  content: "";
  position: absolute;
  inset: -30% -18%;
  z-index: -1;
  /* 20% MAIS CLARO (Thiago, 26/08): cada parada escalada por 0,80, mantendo a
     curva — 0,82 -> 0,66 e 0,58 -> 0,46. A elipse cresceu de 52%x58% pra
     60%x64% pra compensar: com menos densidade, o que sustenta a legibilidade
     passa a ser a AREA coberta, não a força no centro. */
  background: radial-gradient(ellipse 60% 64% at 50% 50%,
    rgba(8, 6, 5, 0.66) 0%,
    rgba(8, 6, 5, 0.46) 48%,
    rgba(8, 6, 5, 0) 82%);
}
.hero__convite-titulo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  /* MESMO TAMANHO da h1 do hero ("CHURRASCO DE VERDADE, NA ESQUINA DO
     MORINGAO"), decisao do Thiago em 26/08. As duas sao a mesma voz falando
     em momentos diferentes da MESMA tela: tamanhos diferentes leriam como uma
     hierarquia que nao existe entre elas.
     ⚠️ O valor e COPIADO da regra da h1, nao aproximado. Se aquela mudar,
     esta tem que acompanhar na mao. */
  font-size: clamp(1.55rem, 4.1vw, 3.6rem);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  /* a linha mais longa e "VOCE CHEGOU NA ESQUINA", 22 caracteres. Menos que
     isso e ela quebra sozinha e viram 4 linhas em vez das 3 desenhadas. */
  max-width: 23ch;
  color: var(--creme);
}
.hero__convite-titulo em { font-style: normal; color: var(--espeto); }
@media (max-width: 767px) {
  /* idem no celular: o mesmo clamp da h1 do hero */
  .hero__convite-titulo { font-size: clamp(1.35rem, 7.4vw, 2.3rem); }
}

/* --- a mascara do split, portada do voltlites ----------------------------
   Contrato deles, verificado no scripts-compiled_125n56.js e no
   styles_10hmdi.css: quebram o texto em "lines,words", poem overflow:hidden
   na LINHA (.split-scrub-line{overflow:hidden}) e sobem as palavras de
   yPercent 110 ate 0 com stagger. A mascara e o efeito: sem o overflow na
   linha isso vira um fade comum, e nao a palavra nascendo do nada.
   As classes .convite-linha / .convite-palavra sao criadas pelo SplitText
   em tempo de execucao (linesClass/wordsClass no site.js).                 */
.hero__convite-titulo .convite-linha {
  display: block;
  /* ⚠️ SEM overflow:hidden. A mascara existia pra cortar as palavras que
     subiam; agora elas nao se movem, so acendem, e recortar a linha nao
     serve pra nada alem de arriscar decepar a descida das letras. */
}
.hero__convite-titulo .convite-palavra {
  display: inline-block;
  will-change: transform;
}
/* sem JS o SplitText nunca roda: o titulo tem que continuar legivel inteiro,
   e quem o esconde e o opacity da caixa, nao um transform preso aqui. */
.hero__convite-sub {
  margin: clamp(0.9rem, 1.8vh, 1.4rem) 0 0;
  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);
}

/* a linha vertical: mesmo vocabulario da .hero__rolagem horizontal, virado
   90 graus. Um filete creme com uma brasa laranja descendo dentro dele, e o
   chevron marcando o fim do curso. */
/* --- o trilho de rolagem: linha + seta -----------------------------------
   Reescrito em 25/08. A versao anterior punha a seta DENTRO da linha e por
   isso a linha precisava de overflow:visible; sem o recorte, a brasa escapava
   pra fora do filete e ficava boiando embaixo dele. Agora a linha recorta de
   verdade e a seta e irma, com respiro proprio.

   O movimento tambem mudou de ideia: em vez de um objeto CORRENDO (que le
   como barra de carregamento), e um clarao que percorre o filete e some. A
   linha e a peca; a brasa e luz passando por ela.                          */
.hero__convite-trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.1rem, 2.4vh, 1.8rem);
  color: var(--brasa-viva);
}
.hero__convite-linha {
  position: relative;
  display: block;
  width: 2px;
  height: clamp(60px, 9.5vh, 96px);
  /* o filete nao e chapado: ele nasce e morre em transparencia, entao nao
     tem ponta dura em cima nem embaixo */
  background: linear-gradient(to bottom,
    rgba(243, 236, 224, 0) 0%,
    rgba(243, 236, 224, 0.26) 22%,
    rgba(243, 236, 224, 0.26) 78%,
    rgba(243, 236, 224, 0) 100%);
  overflow: hidden;   /* ⚠️ e isto que impede a brasa de vazar */
}
.hero__convite-brasa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 46%;
  background: linear-gradient(to bottom,
    rgba(255, 141, 0, 0) 0%,
    rgba(255, 141, 0, 0.85) 55%,
    var(--brasa-viva) 100%);
  box-shadow: 0 0 12px 1px rgba(255, 141, 0, 0.5);
  /* 2.24s = 20% mais rapido que os 2.8s originais (pedido do Thiago,
     26/08). A seta acompanha no MESMO tempo: se as duas correrem em
     ciclos diferentes, o encontro entre a brasa e a seta se desfaz e o
     movimento perde o destino. */
  animation: correBrasa 2.24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* percorre de fora a fora. O pai recorta, entao o que se ve e o clarao
   atravessando o filete e sumindo, sem objeto entrando e saindo de cena. */
@keyframes correBrasa {
  0%        { transform: translateY(-115%); }
  62%, 100% { transform: translateY(230%); }
}
.hero__convite-seta {
  display: block;
  animation: respiraSeta 2.24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* acende quando a brasa chega na base do filete, e nao em ciclo proprio: a
   seta e o destino do movimento, nao um enfeite piscando ao lado dele. */
@keyframes respiraSeta {
  0%, 26%   { opacity: 0.28; transform: translateY(0); }
  46%       { opacity: 1;    transform: translateY(2px); }
  70%, 100% { opacity: 0.28; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__convite-brasa { animation: none; opacity: 0.7; transform: translateY(60%); }
  .hero__convite-seta  { animation: none; opacity: 0.7; }
}

/* No celular o mosaico nao encolhe (data-breakpoint=768) e a hero e UMA tela
   estatica: nao existe a rolagem presa em que a fase 2 acontece. */
@media (max-width: 767px) { .hero__convite { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__convite { display: none; } }

/* No celular o encolhimento não roda (data-breakpoint="768"), então a marca
   ficaria GRANDE e FIXA por cima da página inteira. Aqui ela deixa de ser fixa
   e rola junto com o hero, como qualquer conteúdo da primeira tela. */
@media (max-width: 767px) {
  #marca-wrapper { position: absolute; height: 100svh; }
  /* o crescedor e um flex-grow que empurra a marca pro PE da tela. No celular
     isso jogava o brasao gigante em cima da barra de rodape e cortado na
     borda. Sem ele, a marca nasce no TOPO — que e onde a referencia poe, e
     onde ela nao disputa espaco com a copy. */
  #marca-crescedor { display: none; }
  #marca-container { width: min(30vw, 128px); }
  .marca-scrim { display: none; }
}

/* ============================== seção base ================================ */
.secao {
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 10rem);
  background: var(--b1);
}
/* Sem o recuo da esquerda, o título nasce na margem do container e passaria por
   baixo do brasão fixo. A base dele é ~121px e NÃO muda com a altura da tela,
   então o piso aqui é em px: só vh deixaria colidir em tela baixa.
   Abaixo de 768px o brasão não é fixo (rola com o hero), então não precisa. */
@media (min-width: 768px) {
  .secao { padding-top: max(8.5rem, 11vh); }
}
.secao--fundo { background: var(--b-fundo); }
.secao--elevada { background: var(--b-elevado); }

/* ---- seção com foto de fundo (a dobra do passo a passo do rodízio) --------
   Mesmo contrato das faixas: a caixa e inset:0 com overflow hidden, e quem
   ganha folga pro parallax e a IMAGEM. O texto aqui ocupa a largura toda, entao
   o veu e uniforme e mais forte que o das faixas, em vez de direcional.       */
.secao--com-fundo {
  position: relative;
  isolation: isolate;
}
.secao__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.secao__fundo img {
  width: 100%;
  height: 118%;
  margin-top: -9%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  will-change: transform;
}

/* ---- fundo TRAVADO (o conteudo rola por cima, a foto fica parada) ---------
   background-attachment: fixed e o unico jeito de travar de verdade sem JS.
   Limitacao conhecida e assumida: iOS Safari IGNORA fixed e trata como scroll,
   entao no iPhone a foto acompanha a rolagem. Nao quebra nada, so nao tem o
   efeito. Em touch a gente ja desliga na mao, pra ser previsivel em vez de
   depender do bug do navegador.                                              */
.secao__fundo--travado {
  background-image: var(--fundo-url);
  background-size: cover;
  background-position: var(--foco, 50% 50%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (hover: none), (pointer: coarse) {
  .secao__fundo--travado { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .secao__fundo--travado { background-attachment: scroll; }
}
/* véu: escurece o suficiente pra copy e cards continuarem legiveis, com
   dissolvencia no topo e na base pra seção não virar um retângulo colado */
.secao--com-fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* UMA camada só. Antes eram duas empilhadas (degradê + chapado 0.42), que
     somavam ~0.8 no miolo e matavam a foto. A dissolvência nas pontas e longa
     de proposito: e ela que evita o corte brusco em tela ultra-wide, onde a
     seção e baixa e larga. */
  background: linear-gradient(180deg,
      rgba(14, 10, 8, 0.98) 0%,
      rgba(14, 10, 8, 0.82) 8%,
      rgba(14, 10, 8, 0.58) 22%,
      rgba(14, 10, 8, 0.52) 50%,
      rgba(14, 10, 8, 0.58) 78%,
      rgba(14, 10, 8, 0.82) 92%,
      rgba(14, 10, 8, 0.98) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .secao__fundo img { height: 100%; margin-top: 0; transform: none !important; }
}

.secao__cabeca {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 900px) {
  .secao__cabeca {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2.5rem;
  }
}
/* o rótulo vem primeiro na leitura e some do canto superior esquerdo,
   que é onde a marca fixa mora */
.secao__cabeca .mono { align-self: end; }

/* --- nota do Google na coluna DIREITA da cabeça (27/08) --------------------
   Mora aqui, e não num bloco solto acima da parede, por dois motivos MEDIDOS:
   (1) bloco solto empurrava os depoimentos pra longe da headline; (2) a classe
   .casa__texto que eu tinha usado é de seção ESCURA, então o texto saía branco
   sobre o creme: contraste 1,43, reprova em tudo. Aqui a cor vem sempre dos
   tokens --claro-*, que medem 13,08 / 5,44 / 5,19 contra o #e5d6bd (todos AA).
   Fallback pros tokens escuros caso o bloco seja reusado fora da seção clara. */
.nota-g { display: grid; gap: 0.45rem; }
.secao__cabeca .nota-g { align-self: end; }
.nota-g p { margin: 0; max-width: 30ch; }
.nota-g__nota {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  line-height: 1.3;
  color: var(--claro-tinta, var(--l1));
}
.nota-g__nota strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.45em;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--claro-acento, var(--brasa-viva));
}
/* no desktop encosta na direita, acompanhando o fim do filete; no celular a
   cabeça vira 1 coluna e o bloco assenta embaixo da headline, alinhado à
   esquerda como o resto da leitura. */
@media (min-width: 900px) {
  .nota-g { justify-items: end; text-align: right; }
}
.secao__titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--l1);
  max-width: 27ch;
  text-wrap: balance;
}
.secao__titulo em {
  font-style: normal;
  color: var(--espeto);
}

/* --- revelação por máscara (Volt: item-holder / item-mask) ---------------- */
[data-revelar] { overflow: hidden; }
[data-revelar-mascara] { clip-path: inset(0 0 100% 0); }

/* ========================== 02 · A CASA (números) ========================== */
.casa__texto p {
  font-family: var(--f-titulo);
  /* ⚠️ ERA `--t-xl` (clamp 24→32px), que e um tamanho de TITULO usado como
     corpo. Efeito medido em 26/08: o paragrafo da dobra do rodizio saia a
     31,7px no desktop contra 17px do texto equivalente das faixas de
     momentos — quase o DOBRO, pro mesmo papel na pagina.
     `--t-lg` (20px) e o degrau de LEAD que ja existia na escala e nunca tinha
     sido usado: maior que o corpo, sem competir com a headline.
     A entrelinha sobe junto (1.42 -> 1.55): texto menor precisa de mais ar
     entre linhas pra manter a mesma facilidade de leitura. */
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--l2);
  /* ⚠️ `ch` MENTE EM SERIFA. O `ch` e a largura do glifo "0", e na Bitter ele e
     bem mais largo que a letra minuscula media: `78ch` resolvia para 1000px,
     que na pratica cabe ~100 caracteres, nao 78. Medido em 26/08.
     Por isso o teto aqui e calibrado pela MEDICAO (50ch = ~640px = ~67
     caracteres a 20px), nao pelo numero que a unidade sugere. */
  max-width: 50ch;
  text-wrap: pretty;
}
.casa__texto p + p { margin-top: 1.1rem; }
/* Texto largo: usa a coluna inteira em vez de um teto de leitura curto.
   O 66ch quebrava esse paragrafo em QUATRO linhas. Aqui ele vai ate a margem
   da coluna do site, com o `min` garantindo que nunca vaze em tela estreita.
   ⚠️ Linha longa custa legibilidade: so usar onde o texto for curto e a
   decisao for de composicao, como aqui. O padrao do site segue em 66ch. */
/* ⚠️ 104ch era demais mesmo antes: media 84 caracteres por linha no desktop,
   contra a faixa confortavel de 45 a 75. Com o corpo menor a linha ficaria
   AINDA mais longa (a caixa e limitada pelo container, nao pelo `ch`), entao o
   teto tinha que cair junto. 78ch mantem a intencao de "texto largo" sem
   estourar a leitura. */
.casa__texto--largo p { max-width: min(58ch, 100%); }
.casa__texto strong { color: var(--l1); font-weight: 600; }

/* O parágrafo desta dobra caiu sobre FOTO depois que ela ganhou fundo, e o
   --l2 e um nivel fraco de creme calibrado pra fundo chapado. Aqui vai creme
   cheio, com uma sombra curta pra segurar a leitura sobre a parte clara da
   pizza. Escopo restrito ao #rodizio de proposito: os outros .casa__texto do
   site seguem sobre fundo solido e nao precisam disso.
   Creme e nao branco puro: branco sobre ambar/terracota le frio e sai da
   paleta; o creme e o token de texto do DNA. */
#rodizio .casa__texto p {
  color: var(--creme);
  text-shadow: 0 1px 12px rgba(10, 7, 6, 0.55);
}

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.numero {
  background: var(--b1);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.numero__valor {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1;
  color: var(--brasa-viva);
  font-variant-numeric: tabular-nums;
}
.numero__rotulo { margin-top: 0.5rem; display: block; }

/* ---- selo de preço do rodízio -------------------------------------------
   O preço é o argumento mais forte da dobra, então ganha escala (o dobro do
   que era) e uma moldura. NÃO usei textura de madeira de propósito: o DNA diz
   que cor de marca é tempero e não fundo de bloco, e fundo texturizado atrás
   de preço é o gesto de panfleto que a marca abandonou. Aqui a moldura é um
   fio de brasa sobre chapa escura — o peso vem do tamanho, não do enfeite.  */
.selo-preco {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.35rem, 2.8vw, 2.25rem);
  /* Vidro, sem contorno colorido. A borda laranja saiu: ela competia com o
     numero, que ja e laranja, e contorno colorido e tique de peca barata.
     O que da o "esta elevado" agora e SOMBRA, em tres camadas — contato curto,
     corpo medio e um halo largo e difuso que assenta a chapa sobre a foto. A
     unica linha que sobrou e um fio de creme quase invisivel no topo, que e o
     brilho da quina do vidro; sem ele a chapa le como retangulo chapado.     */
  background:
    linear-gradient(180deg, rgba(243, 236, 224, 0.07) 0%, rgba(243, 236, 224, 0) 55%),
    rgba(10, 7, 6, 0.52);
  border: 1px solid rgba(243, 236, 224, 0.10);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(243, 236, 224, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.40),
    0 16px 34px rgba(0, 0, 0, 0.52),
    0 44px 80px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}
.selo-preco__chapeu {
  color: var(--brasa-viva);
  letter-spacing: 0.14em;
}
.selo-preco__valor {
  font-family: var(--f-display);
  font-weight: 600;
  /* o dobro do tamanho anterior (era clamp(1.9rem, 3.4vw, 2.75rem)) */
  font-size: clamp(3.8rem, 6.8vw, 5.5rem);
  line-height: 0.92;
  color: var(--brasa-viva);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(199, 91, 39, 0.28);
}
.selo-preco__rotulo { display: block; opacity: 0.82; }

/* ================== 03 · CARDÁPIO — as três portas ========================
   Substitui a lista de pratos com foto no cursor. O conteudo agora mora em
   tres paginas proprias (cardapio-comidas/bebidas/caldos.html), portadas do
   v1 pro design system daqui. Titulo em Oswald, nao na serifa do v1.        */
.portas {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .portas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.porta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: clamp(17rem, 26vw, 23rem);
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.35s ease, transform 0.45s var(--cubic-66, cubic-bezier(.22,1,.36,1));
}
.porta__fundo { position: absolute; inset: 0; z-index: -2; }
.porta__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.7s var(--cubic-66, cubic-bezier(.22,1,.36,1));
}
/* o veu e mais dendo no pe, onde o texto vive, e quase limpo no topo */
.porta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(18, 13, 11, 0.28) 0%,
    rgba(18, 13, 11, 0.55) 46%,
    rgba(18, 13, 11, 0.92) 100%);
  transition: opacity 0.35s ease;
}
.porta:hover { border-color: var(--brasa-viva); transform: translateY(-3px); }
.porta:hover .porta__fundo img { transform: scale(1.10); }
.porta:focus-visible { outline: 2px solid var(--brasa-viva); outline-offset: 3px; }

.porta__titulo {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--l1);
  margin: 0;
}
.porta__desc {
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: rgba(243, 236, 224, 0.82);
  max-width: 26ch;
}
.porta__cta {
  margin-top: 0.6rem;
  color: var(--brasa-viva);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.porta__seta { transition: transform 0.35s ease; }
.porta:hover .porta__seta { transform: translateX(4px); }

/* ===================== 03 · CARDÁPIO com foto no hover ==================== */
/* Volt: imagem segue o cursor no eixo Y, entra com blur 10px→0 e escala 1.1→1 */
.cardapio { position: relative; }
.cardapio__lista { border-top: 1px solid var(--line); }

.prato {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--dur-media) var(--cubic-66);
}
.prato::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--pad-container) * -0.4);
  background: var(--brasa);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--dur-media) var(--cubic-66);
}
.prato__indice { color: var(--l3); transition: color var(--dur-media) var(--cubic-66); }
.prato__nome {
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--l2);
  transition: color var(--dur-media) var(--cubic-66),
              transform var(--dur-lenta) var(--cubic-66);
}
.prato__nota {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-xs);
  color: var(--l3);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-corpo);
  font-weight: 400;
}
.prato__preco {
  font-family: var(--f-cond);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--l3);
  white-space: nowrap;
  transition: color var(--dur-media) var(--cubic-66);
}
@media (hover: hover) and (pointer: fine) {
  .prato:hover .prato__nome { color: var(--l1); transform: translateX(clamp(6px, 1vw, 18px)); }
  .prato:hover .prato__indice,
  .prato:hover .prato__preco { color: var(--espeto); }
}

/* a foto que segue o cursor */
#revelador {
  position: absolute;
  top: 0;
  left: 54%;
  width: clamp(200px, 22vw, 340px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--dur-media) var(--cubic-66);
  will-change: transform;
}
#revelador.esta-ativo { opacity: 1; }
#revelador img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: filter, opacity, transform;
}
@media (max-width: 1100px), (hover: none) { #revelador { display: none; } }

/* ======================= 04 · CARTÕES (rampa de brasa) ==================== */
/* estrutura portada dos cartões de Services do Volt */
.tira-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line);
}
.servico {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.22);
  overflow: hidden;
  isolation: isolate;
  background: var(--b-elevado);
}
.servico:last-child { border-right: 0; }

/* A rampa de brasa vive SÓ na etiqueta de baixo. Antes ela era o fundo do
   cartão inteiro e a foto entrava por cima em opacidade 0.3, o que virava um
   véu laranja em cima de tudo e achatava as quatro fotos numa cor só. */
.servico:nth-child(1) .servico__pe { background: var(--rampa-1); }
.servico:nth-child(2) .servico__pe { background: var(--rampa-2); }
.servico:nth-child(3) .servico__pe { background: var(--rampa-3); }
.servico:nth-child(4) .servico__pe { background: var(--rampa-4); }
.servico:nth-child(5) .servico__pe { background: var(--rampa-5); }

.servico__indice {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
/* Passou de ~248px pra 133 e ficou pequena demais. Aqui é o meio-termo: dá
   presença pra foto e a tira inteira ainda cabe na tela sem rolar. */
.servico__figura {
  flex: none;
  height: clamp(185px, 26vh, 265px);
  position: relative;
  overflow: hidden;
}
.servico__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform var(--dur-lenta) var(--cubic-66);
}
.servico:hover .servico__figura img { transform: scale(1); }
.servico__pe {
  padding: clamp(0.7rem, 1.3vw, 1rem);
}
.servico__nome {
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff7f0;
}
/* Contraste medido degrau a degrau: nos dois primeiros o creme cai pra 2.19 e
   3.01, então lá o texto é escuro. Do terceiro em diante o creme volta a
   passar (4.55, 7.79, 12.91). */
.servico:nth-child(1) .servico__pe,
.servico:nth-child(2) .servico__pe { color: var(--sobre-laranja); }
.servico:nth-child(1) .servico__nome,
.servico:nth-child(2) .servico__nome { color: var(--sobre-laranja); }
.servico:nth-child(1) .servico__quando,
.servico:nth-child(2) .servico__quando { color: rgba(23, 17, 14, 0.78); }
.servico__quando {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--f-cond);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: rgba(255, 247, 240, 0.88);
  /* As quatro legendas tem quebra forcada em <br class="quebra"> pra sempre
     cairem em duas linhas. Esta altura minima e o cinto de seguranca: se numa
     largura intermediaria a primeira parte quebrar sozinha e virar 3 linhas em
     um card so, os outros tres nao encolhem e o rodape dos boxes continua
     alinhado. line-height 1.45 x 2 linhas.                                   */
  line-height: 1.45;
  min-height: calc(var(--t-micro) * 1.45 * 2);
}
/* A quebra forcada so ajuda enquanto o card e largo o bastante pra primeira
   parte caber numa linha. Medido: em 1440 e acima da 2 linhas certinhas nos
   quatro; de 1200 pra baixo a primeira parte comeca a quebrar sozinha e o card
   mais longo ("Voce busca na churrasqueira, cortada") ia pra 4 linhas,
   desalinhando a fileira. Abaixo desse ponto o texto flui sozinho e a altura
   minima de 2 linhas segura o alinhamento. */
@media (max-width: 1200px) {
  .quebra { display: none; }
}

/* --- dobra CLARA (a parede de avaliações) ---------------------------------
   Único respiro claro do site: quebra o ritmo escuro e faz a prova social
   parecer papel, não tela. Inverte os níveis de texto dentro do escopo.
   ⚠️ Contraste: o `--brasa-viva` (#ff8d00) REPROVA em WCAG sobre fundo claro,
   e o tokens.css registra isso. Aqui o acento é o laranja escuro da marca
   (#a8410f), que passa em texto. O brasa vivo fica só nas estrelas, que são
   ícone decorativo com rótulo textual, não informação por cor.              */
.secao--clara {
  /* creme mais fundo e mais quente. O #f3ece0 e o creme de TEXTO da marca:
     usado como superficie grande ele lava e le como branco. Aqui a superficie
     desce dois pontos e o card fica so um degrau acima dela, nunca branco. */
  --claro-fundo: #e5d6bd;
  --claro-card: #f2e8d8;
  --claro-tinta: #17110e;
  --claro-tinta-2: rgba(23, 17, 14, 0.66);
  --claro-acento: #8f3609;
  --claro-linha: rgba(23, 17, 14, 0.12);
  background: var(--claro-fundo);
  color: var(--claro-tinta);
}
/* pattern de ferramentas atras da parede de avaliações. Fica na propria dobra
   via ::after, e nao numa div nova, pra nao mexer no markup. z-index 0 com os
   filhos em 1: o padrao passa por baixo do conteudo inteiro.
   Ladrilho de 900px espelhado, entao ele fecha; ver output-imagem/patterns.  */
.secao--clara { position: relative; isolation: isolate; overflow: hidden; }
.secao--clara::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/pattern-ferramenta-ponto-certo.webp");
  background-repeat: repeat;
  background-size: 460px auto;
  /* FIXO no viewport, a pedido do Thiago em 25/08: a dobra rola por cima e o
     padrao fica parado atras, como se a secao fosse uma janela passando sobre
     uma parede. E o mesmo recurso da dobra do rodizio.
     ⚠️ LIMITE CONHECIDO: iOS ignora `fixed` e trata como `scroll`. La o
     pattern rola junto, que e uma degradacao silenciosa e aceitavel: perde o
     efeito, nao quebra o layout. */
  background-attachment: fixed;
  /* 3%: praticamente um sussurro. Nesse ponto o pattern nao e mais elemento
     visual, e textura de papel — voce so percebe que a superficie nao e lisa. */
  opacity: 0.05;
}
.secao--clara > * { position: relative; z-index: 1; }

/* SEM dissolvência nenhuma: as DUAS emendas da dobra clara são secas (27/08).
   O degradê do TOPO saiu em 25/08; o da BASE saiu agora, por decisão do Thiago
   ("deixa ele mudando para a dobra de baixo, seco assim mesmo"). **Substitui**
   a regra `.secao--clara::before`, que rampava o último ~14% da dobra até o
   `--b-fundo`. Motivo dele: a rampa lavava a base da dobra e apagava o link de
   avaliações e o pé da parede. Efeito colateral aceito de propósito: o card da
   parede não se apaga mais ao sair, ele corta. A aresta agora é a linguagem da
   dobra, em cima e embaixo. */
/* SEM fio na borda: sobre as dobras escuras vizinhas, um traco de brasa a 30%
   le como uma linha clara atravessada no topo. A virada quem faz e a
   dissolvencia, nao uma regua. */
.secao--clara .secao__titulo { color: var(--claro-tinta); }
.secao--clara .secao__titulo em { color: var(--claro-acento); }
.secao--clara .secao__cabeca { border-bottom-color: var(--claro-linha); }
.secao--clara .mono { color: var(--claro-tinta-2); }
.secao--clara .parede__resumo { color: var(--claro-tinta-2); }
.secao--clara .parede__resumo strong { color: var(--claro-acento); }
.secao--clara .parede__link { color: var(--claro-acento); }
.secao--clara .parede__link:hover { color: var(--claro-tinta); }

.secao--clara .parecer {
  background: var(--claro-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(23, 17, 14, 0.10),
    0 16px 34px -18px rgba(23, 17, 14, 0.32);
}
.secao--clara .parecer__texto { color: var(--claro-tinta); }
.secao--clara .parecer__nome  { color: var(--claro-tinta); }
.secao--clara .parecer__fonte { color: var(--claro-tinta-2); }
.secao--clara .parecer__estrelas { color: #e08a12; }

/* ============ 06 · VOZES — parede de avaliações que sobe =================
   Portado do v1 (Prova.astro) para os tokens daqui. Três colunas subindo em
   velocidades diferentes, cada uma com sua permutação das 5 avaliações, e cada
   avaliação com respiro diferente em cada coluna — é isso que desalinha as
   linhas horizontais e faz parecer fluxo, não lista.
   A MÁSCARA é o efeito: em vez de pintar duas faixas escuras por cima, a
   dissolvência apaga o pixel de verdade. Não depende da cor do fundo e o card
   parece passar por trás da própria dobra.                                  */
.parede {
  --gap: clamp(14px, 1.5vw, 22px);
  position: relative;
  height: clamp(540px, 78vh, 980px);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  /* a parede sangra de borda a borda, mas o CONTEUDO respeita a mesma
     goteira do resto do site: sem isso os cards encostam no vidro da tela */
  padding-inline: var(--pad-container);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 6%, #000 17%, #000 83%, rgba(0,0,0,.35) 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 6%, #000 17%, #000 83%, rgba(0,0,0,.35) 94%, transparent 100%);
}
.parede__inner {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: start;
}
.parede__col { display: flex; flex-direction: column; gap: var(--gap); will-change: transform; }
.parede__seq { display: flex; flex-direction: column; gap: var(--gap); }

.parede__resumo {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  line-height: 1.42;
  color: var(--l2);
  max-width: 52ch;
  margin: 0;
}
.parede__resumo strong { color: var(--brasa-viva); font-weight: 600; }
.parede__link {
  display: inline-block;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--brasa-viva);
  text-decoration: none;
}
.parede__link:hover { color: var(--brasa-hover); }

/* card sem borda: peso por superfície, sombra e um verniz de luz no topo */
.parecer {
  --pad: clamp(20px, 2.1vw, 30px);
  --esc: 1;
  margin: 0;
  padding: var(--pad);
  background: var(--b1);
  background: linear-gradient(180deg, rgba(243,236,224,0.045) 0%, rgba(243,236,224,0) 62%), var(--b1);
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--esc));
  box-shadow:
    inset 0 1px 0 rgba(243, 236, 224, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 18px 40px -18px rgba(0, 0, 0, 0.85);
}
.parecer--solto { --pad: clamp(28px, 3vw, 44px); --esc: 1.1; }
.parecer--seco  { --pad: clamp(16px, 1.6vw, 22px); --esc: 0.94; }

.parecer__estrelas { display: flex; gap: 3px; color: var(--espeto); }
.parecer__texto {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: calc(clamp(1rem, 1.15vw, 1.16rem) * var(--esc));
  line-height: 1.55;
  color: var(--l1);
  text-wrap: pretty;
}
.parecer__autor { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.parecer__nome { font-family: var(--f-cond); font-weight: 500; font-size: var(--t-sm); color: rgba(243,236,224,0.88); }
.parecer__fonte { color: var(--l2); }

@media (max-width: 900px) {
  .parede { height: clamp(500px, 74vh, 780px); }
  .parede__inner { grid-template-columns: repeat(2, 1fr); }
  .parede__col:nth-child(3) { display: none; }
}
@media (max-width: 580px) {
  .parede { height: clamp(440px, 68vh, 620px); }
  .parede__inner { grid-template-columns: 1fr; }
  .parede__col:nth-child(2) { display: none; }
}

/* Quem pediu menos animação recebe uma GRADE ESTÁTICA legível: a parede para,
   a máscara some, e o eco (as colunas extra e a segunda cópia, que repetem as
   mesmas 5 avaliações) sai de cena. Sobra a sequência real, uma vez só. */
@media (prefers-reduced-motion: reduce) {
  .parede { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .parede__inner { display: block; }
  .parede__col { display: block; transform: none !important; }
  .parede__col:nth-child(n + 2), .parede__seq:nth-child(2) { display: none; }
  .parede__seq { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
  .parecer { --pad: clamp(20px, 2.1vw, 30px); --esc: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .parede__seq { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 580px) {
  .parede__seq { grid-template-columns: 1fr; }
}

/* ========================== 05 · A NOITE (samba) ========================== */
.noite {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}
.noite__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.noite__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.noite__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(18, 13, 11, 0.92) 0%, rgba(18, 13, 11, 0.45) 45%, rgba(18, 13, 11, 0.1) 75%),
    linear-gradient(to top, rgba(18, 13, 11, 0.95), rgba(18, 13, 11, 0.12) 68%);
}
.noite__conteudo {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vh, 6rem) clamp(4.5rem, 10vh, 7rem);
}
.noite__titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--creme);
}
.noite__titulo em {
  display: block;
  font-style: normal;
  color: var(--espeto);
}

/* ======================= 06 · VOZES (avaliações) ========================== */
.vozes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.voz {
  background: var(--b1);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.voz__estrelas { color: var(--espeto); letter-spacing: 0.15em; font-size: var(--t-sm); }
.voz__texto {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--l2);
  text-wrap: pretty;
}
.voz__autor { margin-top: auto; }

/* ============================= 07 · VISITA =============================== */
/* dados à esquerda, mapa à direita. O mapa e QUADRADO e ganha coluna propria,
   entao a linha de info perde o teto de 70ch dentro desta dobra — senao
   sobraria um rio de espaco vazio entre o valor e a borda da coluna. */
.visita { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  /* stretch, nao start: a coluna do mapa acompanha a altura da coluna de
     dados, entao a base do mapa alinha com o pe do botao sozinha, em qualquer
     tela, sem numero chutado. */
  .visita { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); align-items: stretch; }
}
.visita__dados .info-linha { max-width: none; }
.visita__dados .info-linha:first-child { padding-top: 0; }
.visita__acao { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.visita__mapa { display: flex; }
.info-linha {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 70ch;
  padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.info-linha__valor {
  font-family: var(--f-titulo);
  font-size: var(--t-base);
  color: var(--l1);
}
.info-linha__valor a { border-bottom: 1px solid var(--l4); transition: border-color var(--dur-rapida) var(--ease-saida); }
.info-linha__valor a:hover { border-color: var(--espeto); }

/* --- BOTÕES: uma forma só, três pesos (25/08) ---------------------------
   **Substitui:** o pill `border-radius: 999px` em Oswald, que valia desde a
   fundação do v5, **porque** o site tinha DOIS vocabulários de botão ao mesmo
   tempo: o do menu era retangular, mono e de canto reto, e os CTAs eram pill
   arredondado. Decisão do Thiago em 25/08.

   O que ficou igual em todos: raio de 3px, mono em caixa alta, mesmo
   tracking, mesma altura, `justify-content: space-between` com a seta no
   canto (é o gesto do botão do menu).

   O que NÃO foi padronizado, de propósito: o PESO. O CTA primário segue
   sendo chapa de brasa cheia, porque ele é o elemento de maior contraste da
   tela e é onde mora a conversão. Padronizar a forma é sistema; padronizar o
   peso seria entregar a hierarquia junto.                                  */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.2rem;
  min-width: 11rem;
  /* padding em rem e nao em em: com o tipo em mono (menor que o Oswald), o
     `em` encolhia o botao inteiro e ele deixava de bater com o do menu */
  padding: 0.95rem 1.1rem;
  background: var(--brasa);
  /* BRANCO na chapa de brasa, decisao do Thiago em 25/08 (texto e seta).
     ⚠️ MEDIDO: branco sobre #ff8d00 da 2.32:1. O piso WCAG e 4.5:1 pra texto
     deste tamanho, entao REPROVA; o `--sobre-laranja` que estava aqui dava
     8.07 e passava. Esta e a terceira superficie laranja do site a receber
     texto branco por decisao de marca (as outras sao a headline da dobra
     laranja e os titulos do menu), entao o conserto certo nao e voltar o
     texto: e escurecer o laranja. Proposta registrada no _estado.md. */
  color: #ffffff;
  /* --- OSWALD, e nao a mono (25/08) ------------------------------------
     **Substitui:** o `--f-mono` que valeu por algumas horas nesta mesma
     sessao, por DOIS motivos:
     1. Marca: mono le como painel de tecnologia. O Thiago apontou que ficou
        "com cara de tech", e ele tem razao. A condensada em caixa alta e o
        vocabulario de PLACA DE ACOUGUE, que e a linguagem certa aqui, e o
        DNA ja a define como a tipografia de headline da casa.
     2. Tecnico: o `--f-mono` do site e fonte de SISTEMA (ui-monospace,
        SFMono, Consolas). Enquanto era rotulo pequeno, tudo bem; como
        tipografia do CTA principal, o botao renderizaria diferente em cada
        aparelho, e ninguem saberia dizer por que "nao bate". A Oswald e
        self-hosted em `assets/fonts/`, que e a regra da casa.
     O peso sobe pra 600: a Oswald e estreita, e no tamanho de botao o 500
     ficava leve demais contra a chapa de brasa.                          */
  font-family: var(--f-cond);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--brasa);
  border-radius: 3px;
  transition: background var(--dur-media) var(--cubic-66),
              border-color var(--dur-media) var(--cubic-66),
              color var(--dur-media) var(--cubic-66),
              transform var(--dur-media) var(--cubic-66);
}
.botao:hover {
  background: var(--brasa-hover);
  border-color: var(--brasa-hover);
  transform: translateY(-2px);
}
.botao--vazado {
  background: rgba(10, 7, 6, 0.55);
  border-color: var(--line-forte);
  color: var(--l1);
  /* o mesmo vidro do botao do menu: sobre foto, borda sozinha nao segura */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.botao--vazado:hover {
  background: rgba(243, 236, 224, 0.07);
  border-color: var(--espeto);
  color: var(--l1);
}

/* ============================== 08 · RODAPÉ ============================== */
/* ---- mapa da dobra de visita ---------------------------------------------
   Cantos quase retos (2px), nao o arredondado do v1: o sistema daqui e de
   quina viva, e um raio grande brigaria com o resto da pagina.
   O iframe do Google so entra no CLIQUE — o embed puxa centenas de KB e cria
   cookie de terceiro antes de o visitante demonstrar qualquer interesse.    */
.visita__acao { display: flex; gap: 1rem; flex-wrap: wrap; }
.mapa {
  position: relative;
  flex: 1;
  min-height: 20rem;
  border: 1px solid var(--line-forte);
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(199, 91, 39, 0.10), transparent 60%),
    var(--b1);
  box-shadow: 0 26px 70px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 900px) { .mapa { aspect-ratio: 4 / 3; flex: none; min-height: 0; } }
/* O cartao e so o placeholder que aparece ate o iframe chegar. Nao e mais
   botao: o mapa entra sozinho quando a dobra se aproxima. */
.mapa__cartao {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  pointer-events: none;
}
.mapa__pino {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  color: var(--brasa-viva);
  background: rgba(199, 91, 39, 0.12);
  border: 1px solid rgba(199, 91, 39, 0.4);
  border-radius: 50%;
}
.mapa__texto { display: flex; flex-direction: column; gap: 0.25rem; }
.mapa__texto strong {
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--t-xl);
  color: var(--l1);
}
.mapa__texto .mono { color: var(--l2); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.18) contrast(1.05); }

/* ===================== dobra LARANJA (o FAQ) =============================
   Inversao total: o laranja do logo vira SUPERFICIE e o texto vira escuro.
   ⚠️ A regra que decide tudo aqui, e ela esta medida no tokens.css: creme
   sobre #ff8d00 da 1.97 e branco da 2.32 — os dois REPROVAM. Texto sobre
   laranja e obrigatoriamente escuro. Medido: #17110e da 8.07.
   O painel lateral inverte de novo (chapa escura com creme) pra ancorar a
   dobra e dar onde o botao de acao respirar.                              */
.secao--laranja {
  --lar-fundo: #ff8d00;
  --lar-tinta: #17110e;
  --lar-tinta-2: #58340a;   /* 4.74 sobre o laranja */
  --lar-acento: #5c1f00;    /* 5.49 sobre o laranja */
  --lar-linha: rgba(23, 17, 14, 0.22);
  background: var(--lar-fundo);
  color: var(--lar-tinta);
}
.secao--laranja .secao__titulo { color: #ffffff; }
.secao--laranja .secao__titulo em {
  /* INVERTIDO em 25/08, decisao do Thiago: o CORPO da headline vai em branco e
     o ACENTO volta pro marrom escuro. Antes era o contrario.
     ⚠️ MEDIDO, e a conta nao mudou: branco sobre #ff8d00 da 2.32:1 e o piso
     WCAG e 3:1 mesmo em texto grande, entao agora quem reprova e a maior parte
     do texto. O marrom --lar-acento da 5.49 e passa. Se o branco ficar, o
     caminho honesto e escurecer o laranja da dobra pra sustentar ele. */
  color: var(--lar-acento);
}
.secao--laranja .secao__cabeca { border-bottom-color: var(--lar-linha); }
.secao--laranja .mono { color: var(--lar-tinta-2); }

.secao--laranja .faq__lista { border-top-color: var(--lar-linha); }
.secao--laranja .pergunta { border-bottom-color: var(--lar-linha); }
.secao--laranja .pergunta__titulo { color: var(--lar-tinta); }
.secao--laranja .pergunta__titulo:hover,
.secao--laranja .pergunta[open] .pergunta__titulo { color: var(--lar-acento); }
.secao--laranja .pergunta__indice { color: var(--lar-tinta-2); }
.secao--laranja .pergunta__corpo p { color: var(--lar-tinta-2); }

/* o painel lateral inverte: chapa escura sobre o laranja */
.secao--laranja .faq__lado {
  background: var(--lar-tinta);
  border-color: rgba(23, 17, 14, 0.5);
  box-shadow: 0 18px 44px -22px rgba(23, 17, 14, 0.6);
}
.secao--laranja .faq__chamada { color: var(--creme); }
.secao--laranja .faq__lado .mono { color: rgba(243, 236, 224, 0.7); }
/* dentro da chapa escura o botao volta a ser laranja */
/* Este e o TERCEIRO lugar que define a cor deste botao (os outros sao
   `.botao` e `.botao--brasa`), e o mais especifico dos tres. Achado medindo
   em producao: o CTA da hero ja tinha ficado branco e este continuava
   escuro. Texto e seta em branco, igual aos demais botoes laranja. */
.secao--laranja .faq__lado .botao--brasa {
  background: var(--lar-fundo);
  color: #ffffff;
  border-color: var(--lar-fundo);
}
.secao--laranja .faq__lado .botao--brasa .botao__seta { color: #ffffff; }

/* ========================= 08 · PERGUNTAS (FAQ) ==========================
   <details name="faq"> nativo: acordeao acessivel por teclado e leitor de tela
   sem uma linha de JS, e o atributo `name` fecha as outras ao abrir uma (so
   uma resposta na tela por vez). Onde o navegador nao suportar `name`, o
   acordeao vira multi-aberto — degrada bem, nao quebra.                    */
.faq {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 960px) {
  .faq { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
}
.faq__lista { border-top: 1px solid var(--line); }

.pergunta { border-bottom: 1px solid var(--line); }
.pergunta__titulo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(0.85rem, 2vw, 1.6rem);
  padding-block: clamp(1.15rem, 2.4vw, 1.75rem);
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--l1);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--cubic-66);
}
.pergunta__titulo::-webkit-details-marker { display: none; }
.pergunta__titulo:hover { color: var(--brasa-viva); }
.pergunta:focus-within .pergunta__titulo { color: var(--brasa-viva); }
.pergunta__indice { color: var(--l2); align-self: center; }

/* o sinal e um + que vira − ao abrir, desenhado em CSS pra nao pesar um SVG */
.pergunta__sinal {
  position: relative;
  width: 15px; height: 15px;
  align-self: center;
  flex: none;
}
.pergunta__sinal::before,
.pergunta__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.4s var(--cubic-66), opacity 0.3s ease;
}
.pergunta__sinal::after { transform: translateY(-50%) rotate(90deg); }
.pergunta__sinal::before, .pergunta__sinal::after { transition-duration: 0.42s; }
.pergunta[open] .pergunta__sinal::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.pergunta[open] .pergunta__titulo { color: var(--brasa-viva); }

.pergunta__corpo { padding-bottom: clamp(1.25rem, 2.6vw, 1.9rem); }
.pergunta__corpo p {
  margin: 0;
  max-width: 62ch;
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--l2);
  text-wrap: pretty;
}
/* A animacao de abrir mora no JS (Web Animations API), porque <details>
   nativo nao anima altura. Aqui fica so o que o JS precisa: nada de
   `animation` em CSS, que brigaria com ele. */

.faq__lado {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-forte);
  background: var(--b1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.faq__chamada {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  line-height: 1.35;
  color: var(--l1);
}
.faq__nota { margin: 0; color: var(--l2); }

/* ---- pé do rodapé: crédito da casa e assinatura da agência -------------- */
.rodape__pe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.rodape__copy { color: var(--l2); }
/* --- A ASSINATURA DA AGENCIA -------------------------------------------
   Esta e a UNICA parte do site que fala pela ALQUIM_IA.LAB, e nao pelo Ponto
   Certo. Por isso ela usa a tipografia da NOSSA marca, e nao a do cliente:
   Satoshi no texto e Cinzel no wordmark. Self-hosted, copiadas de
   marca/fonts/web/.
   ⚠️ A Satoshi NAO tem `ª` nem `º`: se algum dia entrar "1ª" aqui, o
   caractere sai de outra fonte e aparece torto. Registrado no README da
   pasta de fontes da marca.                                               */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.rodape__assinatura {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: "Satoshi", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  /* MINÚSCULA (decisão do Thiago, 26/08): o site é em caixa baixa, e a
     assinatura estava em caixa alta destoando de tudo. Vale no celular E no
     desktop. `lowercase` e não `none`: no HTML o "Site por" tem inicial
     maiúscula, então `none` deixaria o S grande. */
  text-transform: lowercase;
  color: var(--l2);
  text-decoration: none;
  /* o respiro que vira a moldura do retangulo branco no hover */
  padding: 0.5em 0.75em;
  margin: -0.5em -0.75em;
  isolation: isolate;
  transition: color 0.42s var(--cubic-66);
}

/* --- O NEGATIVO --------------------------------------------------------
   Em vez de acender no laranja, a assinatura INVERTE: uma chapa branca se
   abre atras dela e o texto vira preto. E o gesto mais caro que existe pra
   uma peca pequena, porque nao usa cor nenhuma da paleta: usa a AUSENCIA
   delas, o que faz o olho ler como "isto e outra marca".
   A chapa entra por clip-path (nao por scaleX) pra que a borda do retangulo
   nasca reta e nao esticada, e ela abre do centro pras pontas, que e o mesmo
   vocabulario do painel do menu.                                          */
.rodape__assinatura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.42s var(--cubic-66);
}
.rodape__assinatura:hover::before,
.rodape__assinatura:focus-visible::before { clip-path: inset(0 0 0 0); }
.rodape__assinatura:hover,
.rodape__assinatura:focus-visible { color: #0b0807; }
.rodape__assinatura:focus-visible { outline: none; }

/* ⚠️ 26/08: NO TOQUE A CHAPA FICA FECHADA. Antes ela nascia ABERTA no
   celular, com o argumento de que "no toque não existe hover". O efeito
   colateral é que o gesto de hover virava estado permanente: o rodapé do
   celular exibia um retângulo branco parado, que lê como botão e não como
   assinatura. A chapa é o gesto de INTERAÇÃO; sem interação, ela não aparece.
   O bloco continua existindo só pra deixar isso explícito. */
@media (hover: none), (pointer: coarse) {
  .rodape__assinatura::before { clip-path: inset(0 50% 0 50%); }
  .rodape__assinatura { color: var(--l2); }
}

@media (prefers-reduced-motion: reduce) {
  .rodape__assinatura, .rodape__assinatura::before { transition: none; }
}
/* A assinatura da ALQUIM_IA.LAB usa o wordmark DA NOSSA marca, nao a
   tipografia do cliente: Cinzel variavel, `ALQUIM_IA.` em 900 e `LAB` em 400.
   E a unica aparicao da Cinzel no site inteiro — nunca em texto corrido.
   Fonte self-hosted, regra da casa: nada de CDN. */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
.rodape__wordmark {
  /* O WORDMARK É NOSSO E FICA COMO É: Cinzel, CAIXA ALTA, `ALQUIM_IA.` em 900
     e `LAB` em 400. É a única aparição da Cinzel no site inteiro, nunca em
     texto corrido. Fonte self-hosted, regra da casa.
     ⚠️ O pai (`.rodape__assinatura`) é `text-transform: lowercase`, porque o
     "site por" é minúsculo em Satoshi. Por isso aqui precisa de `uppercase`
     EXPLÍCITO pra vencer a herança — `none` faria sair como está no HTML, o
     que por acaso funciona hoje mas quebraria se alguém reescrevesse a linha.
     **Substitui:** o `lowercase` decidido em 25/08 e a troca pra Satoshi que
     eu apliquei por engano em 26/08, **porque** a minúscula em Satoshi vale só
     para o "site por"; a marca da agência não muda com o rodapé do cliente. */
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--l1);
}

.rodape__wordmark b { font-weight: 900; }
/* o wordmark acompanha a inversao: herda a tinta do pai em vez de ter cor
   propria, senao ele ficaria claro sobre a chapa branca e sumiria. */
.rodape__assinatura:hover .rodape__wordmark,
.rodape__assinatura:focus-visible .rodape__wordmark { color: inherit; }
@media (hover: none), (pointer: coarse) {
  .rodape__wordmark { color: inherit; }
}

.rodape {
  padding-block: clamp(3rem, 7vh, 6rem) clamp(4.5rem, 9vh, 7rem);
  background: var(--b-fundo);
  border-top: 1px solid var(--line);
}
.rodape__marca {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 12vw, 11rem);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--l4);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  /* o wordmark acende no laranja do logo ao passar o mouse. Transicao longa
     porque e uma peca enorme: em tipo desse tamanho, troca rapida de cor le
     como piscada, nao como resposta. */
  transition: color 0.55s var(--cubic-66);
  cursor: default;
}
.rodape__marca:hover { color: var(--brasa-viva); }

/* CELULAR E TABLET: o laranja ja nasce ACESO.
   Ali nao existe hover, entao a peca ficaria eternamente no estado apagado e
   ninguem veria a cor da marca no fecho do site. `hover: none` pega o celular
   e `pointer: coarse` pega o tablet e o hibrido com tela de toque; junto com
   a virgula, basta UMA das duas ser verdadeira.
   Decisao do Thiago em 25/08: "deixa ele ativo, aquele laranjao bonito, mas
   so no celular e no tablet". No desktop segue sendo recompensa de hover. */
@media (hover: none), (pointer: coarse) {
  .rodape__marca { color: var(--brasa-viva); }
}

@media (prefers-reduced-motion: reduce) {
  .rodape__marca { transition-duration: 0.01ms; }
}
.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.rodape__grupo p, .rodape__grupo a { font-size: var(--t-sm); color: var(--l2); }
.rodape__grupo a:hover { color: var(--l1); }
.rodape__grupo li + li { margin-top: 0.4rem; }
.rodape__titulo { margin-bottom: 0.85rem; display: block; }

/* ==========================================================================
   Movimento reduzido: sem scrub, a marca gigante nunca encolheria e ficaria
   por cima da página inteira. Aqui ela já nasce no estado final.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #marca-crescedor { display: none; }
  #marca-container { width: 94px !important; }
  @media (min-width: 768px) { #marca-container { width: 94px !important; } }
  .marca-scrim { opacity: 1; }

  #hero-wrapper { min-height: 100svh; }
  #hero { position: relative; }

  .hero__ladrilho:not([data-pos="centro"]) { display: none; }
  .hero__rolagem .traco::after { animation: none; transform: none; }

  [data-revelar-mascara] { clip-path: none; }
}


/* ==========================================================================
   HERO · chamadas, assinatura e os traços do slideshow (contrato do v1)
   ========================================================================== */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  margin-top: clamp(1.35rem, 3vh, 2.2rem);
  pointer-events: auto;
}
/* ⚠️ Esta regra vem DEPOIS do `.botao` e sobrescreve a cor dele. Os CTAs
   laranja usam `.botao .botao--brasa`, entao pintar so o `.botao` de branco
   nao surtia efeito nenhum: foi o que aconteceu no deploy anterior, e so
   apareceu porque a verificacao foi feita EM PRODUCAO e nao no arquivo.
   Texto e seta em branco, decisao do Thiago em 25/08. */
.botao--brasa { background: var(--brasa); color: #ffffff; }
.botao--brasa .botao__seta { color: #ffffff; }
.botao--brasa:hover { background: var(--brasa-hover); }
.botao__seta {
  display: inline-block;
  transition: transform var(--dur-media) var(--cubic-66);
}
.botao:hover .botao__seta { transform: translateX(4px); }

/* assinatura: mesmo papel do .tag do v1 (Oswald, caixa alta, tracking largo) */
.hero__assinatura {
  margin-top: clamp(1.1rem, 2.4vh, 1.75rem);
  font-family: var(--f-cond);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brasa-viva);
}
.hero__estrela { color: var(--espeto); margin-right: 0.35em; }

/* os traços: 4px de altura, 34px que viram 54px e acendem em brasa no ativo.
   A área clicável tem 24px de altura (WCAG 2.5.8); o traço segue com 4px. */
.hero__tracos {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: clamp(1.1rem, 2.4vh, 1.6rem);
  pointer-events: auto;
}
.hero__traco {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 34px;
  height: 24px;
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__traco span {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: rgba(243, 236, 224, 0.4);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__traco:hover span { background: rgba(243, 236, 224, 0.85); }
.hero__traco.esta-ativo { width: 54px; }
.hero__traco.esta-ativo span { background: var(--brasa); }
.hero__traco:focus-visible { outline: 2px solid var(--espeto); outline-offset: 4px; }

@media (max-width: 767px) {
  .hero__cta, .hero__tracos { justify-content: flex-start; }
  /* nao esticar de borda a borda: botao compacto a esquerda, como na
     referencia. `min-height` garante area de toque confortavel. */
  .hero__cta { gap: 0.6rem; }
  .hero__cta .botao { flex: 0 1 auto; min-height: 3rem; padding-inline: 1.4rem; }
}

/* ==========================================================================
   02 · MOMENTOS — as quatro faixas ultra wide do site v1
   A foto É a seção: full-bleed atrás, e a ALTURA sai do conteúdo. Não existe
   100vh aqui: a copy manda e a faixa acompanha (fica entre 21:9 e 32:9).
   Rola junto com a página, sem fixo e sem parallax (decisão do Thiago, 20/08).
   ========================================================================== */
.momentos { position: relative; background: var(--b-fundo); }

.momentos__cabeca {
  padding-block: clamp(4.5rem, 11vh, 9.5rem) clamp(2rem, 5vh, 3.5rem);
}
/* mesmo piso em px das outras seções: o brasão fixo tem base em ~121px */
@media (min-width: 768px) {
  .momentos__cabeca { padding-top: max(8.5rem, 11vh);
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.momentos__titulo { padding-left: 0 !important; max-width: 20ch; }
/* Flush na margem do container, igual ao resto do site (decisão do Thiago,
   24/08). Tinha um recuo aqui pra fugir do brasão fixo; ele preferiu o
   alinhamento à esquerda mantido, e o brasão passa por cima só de passagem. */
.momentos__lead {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  color: var(--l2);
  /* 46ch quebrava a frase (66 caracteres) e deixava "samba." orfao na segunda
     linha. Aqui o teto acompanha o texto, e o `min` garante que em tela
     estreita ele volte a quebrar sozinho em vez de vazar. */
  max-width: min(70ch, 100%);
  text-wrap: pretty;
}
}  /* <- FECHA o @media (min-width: 768px) aberto na linha 1651.
      Sem ele TODO o resto da folha (.faixa, cardapio, avaliacoes, FAQ,
      visita, rodape) ficava aninhado dentro do media e simplesmente NAO
      EXISTIA abaixo de 768px. Era isso que deixava a dobra de momentos sem
      padding, sem marcador de lista, sem CTA e com a tipografia de fallback
      no celular. Achado por medicao em 25/08. */

.faixa {
  position: relative;
  isolation: isolate;
  background: var(--b-fundo);
}
.faixa__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.faixa__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}
/* parallax do fundo: a caixa sangra em cima e embaixo pra sobrar curso pro
   translate, senao o movimento revelaria borda. Nao usamos background-attachment:
   fixed de proposito (quebra no iOS e repinta pesado); quem move e o ScrollTrigger,
   que ja respeita prefers-reduced-motion no motor do site. */
/* A folga do parallax fica na IMAGEM, nunca na caixa.
   Erro anterior: a sangria estava em .faixa__fundo (inset: -9% 0). A caixa e
   absolute dentro da secao, e a secao nao corta o que transborda — entao a
   imagem vazava pra fora da dobra e aparecia como faixa clara em cima e
   embaixo. Em monitor ultra-wide, onde a dobra e baixa, ficava obvio.
   Aqui a caixa volta a inset:0 (ela ja tem overflow:hidden) e quem cresce e o
   <img>: 118% de altura, puxado 9% pra cima. Sobra curso pro translate de 8%
   nos dois sentidos e nada escapa. */
.faixa__fundo--parallax { inset: 0; }
.faixa__fundo--parallax img {
  /* ATENCAO: margem em % resolve contra a LARGURA do contêiner, nunca a
     altura. Em dobra larga e baixa isso dava um deslocamento enorme e a
     imagem descolava da borda. Em elemento ABSOLUTO, `top` em % resolve
     contra a ALTURA, que e o que a gente quer.
     Folga: percurso de 26% + escala de 12% + margem => 150% de altura,
     centrada com top de -25%. */
  position: absolute;
  left: 0;
  top: -25%;
  width: 100%;
  height: 150%;
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .faixa__fundo--parallax img {
    position: static;
    height: 100%;
    top: 0;
    transform: none !important;
  }
}

/* a altura da faixa é ESTA caixa, e ela é só copy mais respiro */
.faixa__conteudo {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

/* dissolvência de topo e base: é o que separa uma faixa da outra, no lugar de borda */
.faixa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(14, 10, 8, 1) 0%,
      rgba(14, 10, 8, 0.5) 12%,
      rgba(14, 10, 8, 0) 30%,
      rgba(14, 10, 8, 0) 70%,
      rgba(14, 10, 8, 0.5) 88%,
      rgba(14, 10, 8, 1) 100%),
    linear-gradient(0deg, rgba(6, 4, 3, 0.34), rgba(6, 4, 3, 0.18));
}
/* scrim direcional: escurece o lado do texto e deixa o respiro limpo do outro */
.faixa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.faixa--direita::after {
  background: linear-gradient(90deg,
    rgba(6, 4, 3, 0) 0%,
    rgba(6, 4, 3, calc(var(--scrim) * 0.16)) 26%,
    rgba(6, 4, 3, calc(var(--scrim) * 0.62)) 44%,
    rgba(6, 4, 3, var(--scrim)) 60%,
    rgba(6, 4, 3, var(--scrim)) 100%);
}
.faixa--esquerda::after {
  background: linear-gradient(270deg,
    rgba(6, 4, 3, 0) 0%,
    rgba(6, 4, 3, calc(var(--scrim) * 0.16)) 26%,
    rgba(6, 4, 3, calc(var(--scrim) * 0.62)) 44%,
    rgba(6, 4, 3, var(--scrim)) 60%,
    rgba(6, 4, 3, var(--scrim)) 100%);
}

.faixa__bloco { width: min(100%, 46%); max-width: 40rem; }
.faixa--direita .faixa__bloco { margin-left: auto; }

.faixa__kicker { display: block; margin-bottom: 0.9rem; }
.faixa__titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--creme);
  margin-bottom: 0.85rem;
}
.faixa__texto {
  font-family: var(--f-titulo);
  font-size: var(--t-base);
  line-height: 1.5;
  color: rgba(243, 236, 224, 0.82);
}
.faixa__lista {
  margin-top: 1.15rem;
  display: grid;
  gap: 0.5rem;
}
.faixa__lista li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--t-sm);
  color: rgba(243, 236, 224, 0.74);
}
.faixa__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brasa-viva);
}
.faixa__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.5rem;
  font-family: var(--f-cond);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--espeto);
  border-bottom: 1px solid rgba(224, 165, 46, 0.35);
  padding-bottom: 0.3em;
  transition: color var(--dur-media) var(--cubic-66),
              border-color var(--dur-media) var(--cubic-66);
}
.faixa__cta:hover { color: var(--creme); border-color: var(--creme); }
.faixa__cta span { transition: transform var(--dur-media) var(--cubic-66); }
.faixa__cta:hover span { transform: translateX(4px); }

/* ==========================================================================
   FAIXAS NO CELULAR — reescrito em 25/08 por medição a 390x844.
   O que estava errado, medido: alvo de toque do CTA com 30,6px (piso 44),
   respiro entre faixas de 0px (as quatro liam como um bloco só) e um véu de
   escurecimento de 0,80 de opacidade cobrindo a foto INTEIRA, o que apagava
   a comida, que é o argumento de venda da casa.

   A virada de composição: no desktop a foto é grande e o texto mora numa
   coluna lateral, então dá pra escurecer só um lado. No retrato não existe
   lado: ou escurece tudo, ou o texto some. A saída é parar de escurecer a
   dobra e passar a escurecer só a CAIXA DA COPY. A foto volta a aparecer
   limpa em duas faixas de respiro (acima e abaixo do cartão), e o contraste
   do texto passa a ser garantido pela placa, não pelo véu.
   ========================================================================== */
@media (max-width: 899px) {
  /* na vertical o cover passa a cortar na HORIZONTAL, então quem manda vira o X */
  .faixa__fundo img { object-position: var(--foco-mob, 50% 50%); }
  .faixa__bloco { width: 100%; }
  .faixa--direita .faixa__bloco { margin-left: 0; }

  /* 1 · RESPIRO ENTRE FAIXAS
     As <section> são irmãs coladas, então o respiro tem que nascer aqui.
     A margem descola a faixa da anterior e o que aparece no vão é o fundo da
     seção "momentos", o que dá a leitura de capítulo fechado. O filete de
     brasa em cima é a marca do começo do capítulo seguinte, no lugar de uma
     borda cinza. Só em `.faixa + .faixa` pra não abrir buraco antes da
     primeira, que já vem colada no cabeçalho da dobra. */
  .faixa + .faixa {
    margin-top: 1.25rem;
    border-top: 2px solid rgba(255, 141, 0, 0.5);
  }

  /* 2 · A FOTO VOLTA A RESPIRAR
     O véu antigo era `--scrim + 0.22` = 0,80 no topo, sobre a foto inteira.
     Aqui ele vira uma fração do scrim (0,30 a 0,62 do valor declarado no
     HTML), o que a 0,58 dá 0,17 no topo e 0,36 na base: a foto aparece de
     verdade na banda de cima e escurece só descendo, onde o cartão vai
     assentar. Quem sustenta a legibilidade agora é a placa do bloco. */
  .faixa--direita::after,
  .faixa--esquerda::after {
    /* ⚠️ 3a versão, 26/08. Histórico curto porque o racional importa:
       v1 = véu de 0,80 sobre a foto inteira -> apagava a comida.
       v2 = rampa VERTICAL fraca + uma PLACA atrás da copy -> a placa lia como
            "caixa preta colada na foto, começando do nada no filete laranja"
            (palavras do Thiago), e a foto continuava sem se explicar.
       v3 = ESTE. Sem caixa. O escurecimento é da SEÇÃO, nasce na borda
            esquerda da tela e atravessa a imagem inteira dissolvendo pra
            direita. É o mesmo gesto que o desktop sempre usou (`90deg`); o
            celular é que tinha perdido.
       Densa até 46% (onde a copy vive), abre de 62% em diante. A camada
       vertical fraca por cima só assenta topo e base. */
    background:
      linear-gradient(90deg,
        /* ✅ APROVADO 26/08: cada parada escalada por 0,80 sobre a versão
           densa, o que faz a esquerda COMEÇAR em 0,75 em vez de 0,94. Testado
           isolado no 4º momento primeiro, aprovado pelo Thiago e replicado nas
           quatro. É escala, não redesenho: a curva é a mesma.
           Custo medido: contraste do pior caso 5,70 -> 4,89:1 (piso 4,5).
           ⚠️ Não escalar de novo. Outro 0,80 por cima leva a ~3,9 e REPROVA. */
        rgba(6, 4, 3, 0.75) 0%,
        rgba(6, 4, 3, 0.72) 44%,
        rgba(6, 4, 3, 0.56) 60%,
        rgba(6, 4, 3, 0.26) 79%,
        rgba(6, 4, 3, 0.03) 100%),
      linear-gradient(180deg,
        rgba(6, 4, 3, 0.13) 0%,
        rgba(6, 4, 3, 0.02) 34%,
        rgba(6, 4, 3, 0.02) 66%,
        rgba(6, 4, 3, 0.16) 100%);
  }
  /* a dissolvência de topo/base também precisava afinar: ela apagava
     justamente a banda de foto que a gente acabou de liberar. Mantive o preto
     cheio no fio exato da borda (é ele que costura a faixa com o vão), mas o
     desvanecimento fecha em 18% em vez de 30%. */
  .faixa::before {
    background:
      linear-gradient(180deg,
        rgba(14, 10, 8, 0.92) 0%,
        rgba(14, 10, 8, 0.35) 7%,
        rgba(14, 10, 8, 0) 18%,
        rgba(14, 10, 8, 0) 82%,
        rgba(14, 10, 8, 0.35) 93%,
        rgba(14, 10, 8, 0.92) 100%),
      linear-gradient(0deg, rgba(6, 4, 3, 0.16), rgba(6, 4, 3, 0.06));
  }

  /* 3 · A PLACA DA COPY
     O cartão é o que devolve hierarquia: a copy vira um objeto com começo e
     fim, em vez de texto boiando na foto. O filete de brasa no topo repete o
     mesmo gesto do separador entre faixas, então a peça toda fala a mesma
     língua. Raio 2px porque é o raio de painel da casa (o 999px fica só pra
     pill), e a sombra existe pra descolar o cartão da foto sem precisar de
     mais escurecimento.
     A conta de contraste, no pior cenário possível (foto branca estourada
     atrás): a placa a 0,86 sobre branco compõe rgb(44,42,40), luminância
     0,0234. O corpo em creme a 0,88 dá 8,7:1. O kicker em brasa #ff8d00 dá
     6,5:1. Os dois passam AA com folga, e o corpo passa AAA. */
  .faixa__conteudo { padding-block: clamp(2.75rem, 9vw, 3.5rem); }
  .faixa__bloco {
    /* A CAIXA DEIXOU DE EXISTIR (26/08). Fundo, sombra, raio e o filete
       vertical laranja saíram juntos: eram eles que faziam a copy ler como um
       cartão sobreposto em vez de texto assentado na cena. Quem sustenta a
       legibilidade agora é o véu da seção, que é contínuo e vem da borda.
       O recuo à esquerda passa a ser o do `.container`, igual ao resto do
       site — o texto alinha com tudo, em vez de ter goteira própria. */
    background: none;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* 4 · RITMO VERTICAL DENTRO DO CARTÃO
     Antes os espaços eram quase todos iguais (14 / 14 / 18 / 24px), e espaço
     igual não hierarquiza nada: o olho não sabe onde um grupo acaba. Aqui a
     escada é declarada: colado no que pertence ao mesmo grupo (kicker e
     título), aberto onde troca de função (lista e CTA). */
  .faixa__kicker {
    /* 12px é o piso de acessibilidade e o mono da casa fica exatamente nele.
       13px tira do limite sem virar outra escala. */
    font-size: 0.8125rem;
    margin-bottom: 0.55rem;
  }
  .faixa__titulo {
    /* o clamp entregava 29,6px aqui; 32px firma a diferença pro corpo de
       17px e faz o título carregar a dobra sozinho, como no desktop. */
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  .faixa__texto {
    /* 0,82 de alpha era o mínimo aceitável sobre o véu pesado. Com a placa
       dá pra subir pra 0,90 sem estourar, e o texto ganha corpo. */
    color: rgba(243, 236, 224, 0.90);
    line-height: 1.55;
  }
  /* Com a rampa horizontal, a metade direita do cartão fica clara de
     propósito. O texto tem que PARAR antes dela, senão o fim de cada linha
     cai na janela de foto e o contraste some. 30ch é onde a linha já quebra
     naturalmente; isto é um teto, não uma mudança de ritmo. */
  .faixa__kicker, .faixa__titulo, .faixa__texto, .faixa__lista { max-width: 30ch; }
  /* o kicker e o unico que quebra em duas linhas, e em caixa alta com tracking
     largo ele estoura antes dos outros. 26ch o segura na zona densa da rampa. */
  .faixa__kicker { max-width: 26ch; }
  .faixa__lista {
    margin-top: 1.25rem;
    gap: 0.7rem;
    /* um fio separando a lista do parágrafo: é o que faz ela ler como
       "os três motivos" em vez de continuação do texto corrido. */
    padding-top: 1.15rem;
    border-top: 1px solid rgba(243, 236, 224, 0.14);
  }
  .faixa__lista li {
    font-size: 1rem;
    line-height: 1.35;
    color: rgba(243, 236, 224, 0.86);
    padding-left: 1.5rem;
  }
  .faixa__lista li::before {
    /* o marcador desce junto com a linha maior; sem isso ele descola do
       texto e fica flutuando acima da primeira letra. */
    top: 0.55em;
  }

  /* 5 · O CTA VIRA ALVO DE TOQUE
     Era um link sublinhado de 30,6px de altura, abaixo do piso de 44px, e no
     celular link sublinhado sobre foto some. Aqui vira pill cheia de brasa
     com o texto no fundo madeira-fumaça: 8,8:1 de contraste (brasa #ff8d00
     tem luminância 0,4292, fundo #120d0b tem 0,0044), o maior contraste da
     dobra inteira, que é exatamente o que a ação principal merece.
     `min-height` em 48px dá 4px de folga sobre o piso, e o padding lateral
     garante que o alvo não encolha com um rótulo curto. */
  .faixa__cta {
    display: inline-flex;
    justify-content: center;
    min-height: 48px;
    margin-top: 1.75rem;
    padding: 0.5rem 1.4rem;
    border: 0;
    /* ⚠️ RAIO 3px, e não `999px` (Thiago, 26/08). O padrão vigente da casa é
       "uma forma só: raio 3px", que é o que a hero, o menu, as abas e os
       botões do cardápio usam. Este era o último pill de AÇÃO do site e
       destoava de todos eles. O 999px fica reservado pro que é de fato
       arredondado por natureza: os traços do slideshow e a barra de rolagem.
       Peso 600 junto, também pra bater com o `.botao`. */
    border-radius: 3px;
    background: var(--brasa-viva);
    /* BRANCO no texto E na seta (Thiago, 26/08), igual à hero.
       **Substitui:** o `--b-fundo` escuro que estava aqui, **porque** branco
       sobre o laranja `#ff8d00` é DECISÃO DE MARCA já tomada, e este CTA é o
       quarto lugar onde ela vale: os outros três são a headline da dobra
       laranja, os títulos do menu e os CTAs da hero.
       A seta é um `<span>` dentro do link, então herda daqui: uma propriedade
       resolve as duas coisas.
       ⚠️ O contraste cai de 8,8:1 para 2,32:1. Isso é sabido, está registrado
       no `_estado.md` como decisão consciente, e a regra de lá é explícita:
       **não levantar de novo a cada peça.** Se um dia quiser resolver sem
       perder o branco, `#b35f00` passa nos dois sentidos. */
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    /* o texto do CTA pode ficar longo ("Reservar mesa pro samba"); sem isso
       ele estoura a largura do cartão em tela de 360px. */
    max-width: 100%;
    text-align: center;
  }
  .faixa__cta:hover,
  .faixa__cta:focus-visible {
    background: var(--creme);
    color: var(--b-fundo);
    border-color: transparent;
  }
}


/* ====================== ESTADOS INICIAIS DE MOTION =======================
   Tudo aqui e escopado em `html.tem-motion`, classe que o motor carimba
   quando confirma que rodou. Sem JS, sem GSAP ou com `prefers-reduced-motion`
   a classe nunca entra e NADA disto se aplica: a pagina abre inteira e
   parada. Conteudo nunca depende de script pra existir.
   ========================================================================= */

/* --- CARDÁPIO: as 3 portas entram em cortina --------------------------- */
.tem-motion .portas > .porta {
  clip-path: inset(0 0 100% 0);
}
/* a foto interna faz contra-zoom enquanto a porta abre: e o gesto do
   hero-mosaico do Volt aplicado em pequeno, e o que da profundidade em vez
   de a porta so aparecer. */
.tem-motion .portas > .porta .porta__fundo img {
  transform: scale(1.14);
  transition: transform 1.1s var(--cubic-66);
}
/* quem liga o contra-zoom e o `data-classe` do motor, que carimba
   `.portas-abertas` no proprio container quando o gatilho entra. Assim nao
   preciso de JS novo nem de um data-anima por imagem. */
.tem-motion .portas.portas-abertas > .porta .porta__fundo img { transform: scale(1); }

/* ⚠️ VISITA e FAQ saíram daqui: passaram a usar `data-entra="filhos"`, que
   aplica o estado inicial pelo PRÓPRIO GSAP em vez de por CSS. É mais seguro
   (script que não roda não esconde nada) e usa o mesmo vocabulário de entrada
   do resto do site. O CSS que existia aqui virou código morto e foi removido
   no mesmo passo, pra não sobrar regra escondendo elemento sem dono. */


/* --- as peças do brasão -------------------------------------------------- */
.marca-pecas { position: relative; }
.marca-peca {
  position: absolute;
  inset: 0;
  display: block;
  /* a máscara é o que faz a peça NASCER de dentro do nada em vez de só
     acender. Sem o overflow aqui, o efeito vira um fade qualquer. */
  overflow: hidden;
}
.marca-peca > i {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  will-change: transform;
}
.marca-peca[data-p="moldura"] > i { background-image: url("../img/brasao/moldura.png"); }
.marca-peca[data-p="ponto"]   > i { background-image: url("../img/brasao/ponto.png"); }
.marca-peca[data-p="certo"]   > i { background-image: url("../img/brasao/certo.png"); }
.marca-peca[data-p="linha"]   > i { background-image: url("../img/brasao/linha.png"); }
.marca-peca[data-p="estrela"] > i { background-image: url("../img/brasao/estrela.png"); }
.marca-peca[data-p="esquina"] > i { background-image: url("../img/brasao/esquina.png"); }

/* ==========================================================================
   HERO NO CELULAR — caprichada de 2026-08-26
   ⚠️ POR QUE A REGRA MOBILE DA ASSINATURA ESTAVA MORTA (medido, não deduzido):
   o `@media (max-width: 767px)` da linha ~332 pede `.hero__assinatura` em
   0.62rem, e o celular renderizava 15px. A causa NÃO é ordem: a assinatura é
   um `<p>` dentro da promessa, e `.hero__promessa p` (0,1,1) da linha ~327
   ganha de `.hero__assinatura` (0,1,0) por ESPECIFICIDADE, em qualquer ordem.
   Por isso aqui embaixo o seletor é `.hero__promessa .hero__assinatura`
   (0,2,0): é o que de fato vence. O `letter-spacing` funcionava porque
   `.hero__promessa p` não declara letter-spacing, então não havia disputa —
   e foi isso que mascarou o problema.
   Regra que fica: quando metade das propriedades de uma regra pega e a outra
   metade não, o suspeito é ESPECIFICIDADE por propriedade, não ordem.
   ========================================================================== */
@media (max-width: 767px) {

  /* 1 · o bloco desce: sobravam 110px de folga abaixo dos traços e o conteúdo
     flutuava no meio da tela em vez de assentar na base */
  .hero__promessa { bottom: clamp(2.9rem, 7.2vh, 4.4rem); }

  /* 2 · os dois CTAs lado a lado. O que estourava era o `min-width: 11rem`
     (176px cada, 361,6px somados numa faixa útil de 353px: erravam por 8,6px).
     A FONTE NÃO MUDA — encolhe a largura, que é o que sobrava: o `gap` interno
     de 35,2px entre rótulo e seta era folga pura no celular. */
  .hero__cta { flex-wrap: nowrap; }
  .hero__cta .botao {
    min-width: 0;
    gap: 0.85rem;
    padding-inline: 1.15rem;
  }

  /* 4 · ENQUADRAMENTO — a fonte é 16:9 e a caixa é quase retrato, então o
     `cover` mostra só 26% DA LARGURA. Era o zoom gigante.
     ⚠️ TENTATIVA DESCARTADA (26/08): encurtar a imagem pra 60% da altura subia
     pra 43,3% de largura visível, mas deixava uma FAIXA PRETA CHAPADA embaixo,
     porque abaixo da foto não havia foto nenhuma. O Thiago pegou na hora.
     Lição: escuro pra sustentar copy é OVERLAY POR CIMA da imagem, nunca
     ausência de imagem. A foto vai de borda a borda; quem escurece é o véu.
     O conserto real é FONTE 9:16 pro celular (ver `hero__slide` no HTML), não
     CSS: nenhum recorte de um 16:9 cabe numa tela retrato sem perder contexto.
     Enquanto as verticais não entram, fica full-bleed, que é o menor mal. */

  /* 3 · a assinatura em UMA linha. Sobe pra 12px (era 9,9px na regra morta e
     15px na prática) e o tracking cai de 3,3px pra 1,2px: é o tracking que
     estourava a linha, não o corpo. 12px é o piso do confortável no celular. */
  .hero__promessa .hero__assinatura {
    /* 12,5px: acima do piso de 12 e o suficiente pra caber em UMA linha até
       320px de largura. Aos 15px herdados cabia em 360 com 7px de folga e
       quebrava em 320 — medido nas cinco larguras (430/390/375/360/320). */
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   TELA EM PÉ — o degradê vai SOBRE A IMAGEM (2026-08-26)
   Pedido do Thiago, e conserta o erro do dia: o escuro que sustenta a copy
   tem que ser OVERLAY por cima da foto, nunca ausência de foto.
   O gate é `max-aspect-ratio`, o mesmo do <picture> e do JS dos fundos:
   celular e tablet EM PÉ recebem a foto 9:16 e este véu; deitado, nada muda.
   ========================================================================== */
@media (max-aspect-ratio: 0.85) {

  /* o véu mora no CENTRO da hero, não no bloco de texto: assim ele vale igual
     pros 5 slides e não anda quando a copy muda de tamanho. */
  .hero__centro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    /* todas as paradas são a MESMA cor variando só o alfa: parada clara no
       meio de uma rampa cria véu esbranquiçado (armadilha já medida na casa) */
    background: linear-gradient(to top,
      rgba(8, 6, 5, 0.96) 0%,
      rgba(8, 6, 5, 0.90) 22%,
      rgba(8, 6, 5, 0.62) 38%,
      rgba(8, 6, 5, 0.26) 54%,
      rgba(8, 6, 5, 0.06) 72%,
      rgba(8, 6, 5, 0) 100%);
  }

  /* o véu preso ao bloco de texto sai: com o de cima, escureceria DUAS vezes
     e a foto viraria uma mancha. */
  .hero__promessa::before { display: none; }
}

/* ==========================================================================
   BRASÃO FIXO NA HEADER DO CELULAR (2026-08-26, pedido do Thiago)
   Antes ele era `position: absolute` e ROLAVA embora: medido, em scrollY 900
   ele estava em y=-886, fora da tela, enquanto o botão MENU seguia fixo em
   y=14. No desktop isso nunca aconteceu porque lá o brasão encolhe de 460px
   pra 94px e POUSA em y=22, alinhado com o menu.

   ⚠️ O ESTADO PADRÃO É O PEQUENO, e isso é proposital: se o JS morrer, o pior
   caso é um brasão discreto no topo, nunca um brasão gigante fixo cobrindo a
   página (que foi exatamente o motivo de ele ter virado `absolute` um dia).
   O grande só existe com `pre-motion` (carimbado inline ANTES do primeiro
   paint, então não há pulo no carregamento) ou com o motor vivo dentro da
   hero. A rede de 2,5s do `pre-motion` devolve o pequeno se o GSAP falhar.
   ========================================================================== */
@media (max-width: 767px) {
  #marca-wrapper {
    position: fixed;
    height: auto;
    inset: 0 0 auto 0;
  }
  #marca-container {
    width: 62px;
    transition: width 420ms var(--cubic-66);
  }
  /* grande enquanto a hero manda: antes do primeiro paint (pre-motion) e
     depois, com o motor vivo, até o marcador dizer que a hero saiu */
  .pre-motion #marca-container,
  .tem-motion:not(.fora-da-hero) #marca-container { width: min(30vw, 128px); }

  /* O HALO ATRÁS DO BRASÃO, SEMPRE (26/08, pedido do Thiago: "podia ter um
     overlay também, uma sombra ficando atrás do brasão para dar mais destaque").
     Ele já existia no site (`.marca-scrim`), mas estava `display:none` no
     celular e só acendia fora da hero. Agora vale nas duas situações: dentro
     da hero ele descola o brasão do salão cheio, e fora dela impede que suma
     sobre foto clara. Radial de closest-side, dissolvendo numa cor só variando
     alfa — mesma disciplina dos outros véus da casa. */
  .marca-scrim {
    display: block;
    opacity: 1;
    inset: -26%;
    background: radial-gradient(closest-side,
      rgba(8, 6, 5, 0.72) 30%,
      rgba(8, 6, 5, 0.44) 58%,
      rgba(8, 6, 5, 0.16) 78%,
      rgba(8, 6, 5, 0) 100%);
  }
}

/* --- a faixa que faz o header fixo do celular NÃO colidir com o conteúdo ----
   Ao fixar o brasão eu invalidei um racional antigo do arquivo, que dizia
   "abaixo de 768px o brasão não é fixo, então não precisa" de recuo. Passou a
   precisar: o brasão de 62px cobria a primeira palavra dos títulos de dobra.
   A correção certa não é encolher mais o brasão (continuaria cobrindo), é dar
   ao header uma FAIXA própria, como todo header fixo tem. O conteúdo passa por
   baixo esmaecendo, em vez de colidir.
   Dissolve numa cor só variando alfa — parada clara no meio faria véu branco. */
@media (max-width: 767px) {
  .fora-da-hero #marca-wrapper::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    /* ⚠️ MESMA CURVA DA FAIXA DE BAIXO (26/08). A primeira versão tinha
       4 paradas, pico 0,94 e 104px, que é exatamente a configuração que fazia
       o véu do rodapé ler como TARJA sobre a dobra laranja: acabava de um
       jeito brusco. Aqui a rampa é a mesma do `body::after`, só invertida
       (`to bottom`): pico 0,72, altura maior e 9 paradas em curva de saída.
       O que denuncia um véu não é a opacidade, é a taxa de variação perto da
       ponta — as duas faixas do site agora dissolvem igual. */
    height: clamp(104px, 14vh, 150px);
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(8, 6, 5, 0.72) 0%,
      rgba(8, 6, 5, 0.68) 12%,
      rgba(8, 6, 5, 0.58) 26%,
      rgba(8, 6, 5, 0.45) 40%,
      rgba(8, 6, 5, 0.31) 54%,
      rgba(8, 6, 5, 0.19) 68%,
      rgba(8, 6, 5, 0.09) 80%,
      rgba(8, 6, 5, 0.03) 90%,
      rgba(8, 6, 5, 0) 100%);
  }
}

/* ==========================================================================
   VÉU ATRÁS DO HUD INFERIOR (2026-08-26)
   O HUD (hora local · endereço · status) é `position: fixed` na base e usa
   `mix-blend-mode: difference` pra se virar sobre qualquer fundo. Funciona
   sobre foto escura, e falha quando passa por cima de dobra clara ou de texto
   claro: o resultado é cinza sobre cinza, e foi o que o Thiago viu ("Quatro
   momentos, uma esquina" colidindo com "LONDRINA · 10:37").

   ⚠️ O VÉU NÃO PODE MORAR DENTRO DO `.hud`: `mix-blend-mode` aplica ao
   elemento INTEIRO, então um `::before` ali seria misturado junto e não
   escureceria nada. Ele precisa de um elemento FORA do contexto de mistura —
   daí o `body::after`, que estava livre em toda a folha (conferido).
   z-index 1 abaixo do HUD: escurece o fundo sem tocar no texto, e a mistura
   do HUD passa a acontecer contra um preto previsível em vez de contra o
   conteúdo. Dissolve numa cor só variando alfa, como todos os véus da casa.
   `pointer-events: none` porque cobre área clicável e não é interativo.
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ⚠️ ESTES VALORES VALEM NO CELULAR TAMBEM desde 26/08. A versao densa
     (pico 0,95 em ~104px, 5 paradas) virava uma TARJA sobre a dobra clara e
     principalmente sobre a LARANJA, onde o laranja era esmagado até o preto
     numa borda dura. Mesma correção que o desktop recebeu: pico mais baixo,
     altura maior e mais paradas. O que denuncia um véu não é a opacidade, é a
     taxa de variação perto do topo. */
  height: clamp(104px, 14vh, 150px);
  z-index: calc(var(--z-hud) - 1);
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(6, 4, 3, 0.72) 0%,
    rgba(6, 4, 3, 0.68) 12%,
    rgba(6, 4, 3, 0.58) 26%,
    rgba(6, 4, 3, 0.45) 40%,
    rgba(6, 4, 3, 0.31) 54%,
    rgba(6, 4, 3, 0.19) 68%,
    rgba(6, 4, 3, 0.09) 80%,
    rgba(6, 4, 3, 0.03) 90%,
    rgba(6, 4, 3, 0) 100%);
}


/* --- o véu do HUD só existe DEPOIS da hero, no desktop ----------------------
   No desktop o brasão da hero é gigante e desce até a base da tela: o véu do
   HUD caía por cima da parte de baixo dele. No celular isso não acontece (lá
   o brasão é pequeno e mora no topo), então o celular NÃO muda.

   O gatilho não é novo: reusa `fora-da-hero`, a classe que o marcador
   invisível já carimba no <html> quando o topo sai da tela — ou seja, exatamente
   ao chegar na segunda dobra. Entra em fade de 700ms, que é o que faz a coisa
   aparecer em vez de piscar.

   ⚠️ As páginas de cardápio não têm hero e por isso NUNCA recebem
   `fora-da-hero`; sem a terceira regra o véu não apareceria lá nunca. Como não
   há brasão gigante pra proteger, nelas ele fica sempre ligado.
   ========================================================================== */
@media (min-width: 768px) {
  body::after {
    opacity: 0;
    transition: opacity 700ms var(--cubic-66);
    /* MAIS ALTO E MAIS CLARO no desktop (26/08). Sobre a dobra CLARA a versão
       densa lia como uma tarja preta com borda de cima perceptível — sobre
       fundo creme qualquer faixa escura salta.
       Duas mudanças, e as duas importam:
       · o PICO cai de 0,95 pra 0,72 (é o "começar mais claro");
       · a ALTURA sobe de ~104px pra 170px e a rampa ganha 9 paradas em curva
         de saída, em vez de 5. O que denuncia um véu não é a opacidade, é a
         TAXA DE VARIAÇÃO perto do topo: dissolvendo devagar por uma distância
         maior, o olho lê vinheta e não faixa.
       Isso só é seguro porque o texto do HUD subiu pra 0,82 de alpha antes.
       ⚠️ Contraste do HUD medido no desktop DEPOIS desta mudança — ver o
       número no `_estado.md`. Clarear mais que isto derruba abaixo do piso. */
    /* a rampa agora e herdada da regra base; aqui so a ALTURA cresce, porque
       a tela e maior e o mesmo gradiente precisa de mais distancia pra ler
       como vinheta em vez de faixa. */
    height: clamp(140px, 17vh, 190px);
  }
  .fora-da-hero body::after { opacity: 1; }
  body.pagina-cardapio::after { opacity: 1; }
}

/* --- o HUD larga o `difference` onde o véu já resolve (desktop, 26/08) ------
   MEDIDO, e o número é o argumento: com o véu denso (pico 0,95) o HUD dava
   8,24:1; com o véu claro (0,72) despencou pra **2,23:1, reprovando 24 de 78**.

   A causa não é "menos véu, menos contraste" — é MUDANÇA DE REGIME.
   `mix-blend-mode: difference` devolve |fundo − texto|: contra fundo ESCURO dá
   texto claro (ótimo), mas contra fundo MÉDIO dá CINZA sobre CINZA (péssimo).
   O véu a 0,72 sobre a dobra creme produz exatamente um fundo médio, ~(87,82,76).

   O `difference` existia pra o HUD "se virar sobre qualquer fundo". Onde o véu
   está ligado, ele já garante o fundo — a mistura virou redundante E nociva.
   Então: véu ligado (fora da hero) → tinta normal; véu desligado (na hero) →
   `difference` segue fazendo o trabalho dele.
   ⚠️ O CELULAR NÃO ENTRA AQUI: lá o véu continua em 0,95, o fundo fica escuro
   de verdade e o `difference` segue sendo a melhor solução (8,24:1 medido).
   ========================================================================== */
@media (min-width: 768px) {
  .fora-da-hero .hud,
  .pagina-cardapio .hud { mix-blend-mode: normal; }
  .fora-da-hero .hud .mono,
  .pagina-cardapio .hud .mono { color: rgba(243, 236, 224, 0.88); }
}
/* No CELULAR o véu está sempre ligado (não existe o estado "hero sem véu",
   porque lá o brasão é pequeno e mora no topo). Então a mistura pode sair
   SEMPRE: o véu já garante o fundo, e com pico 0,72 o `difference` cairia no
   mesmo cinza-sobre-cinza que quebrou o desktop. */
@media (max-width: 767px) {
  .hud { mix-blend-mode: normal; }
  .hud .mono { color: rgba(243, 236, 224, 0.88); }
}

/* --- o botão do menu no celular: mesmo respiro, menos ar (26/08) ------------
   MEDIDO a 390x844: o botão tinha 140px, mas o conteúdo real ocupa ~88px
   (rótulo "MENU" 48px + a cruz + 28,8px de padding). Sobravam ~52px de ar
   puro, vindos do `gap: 2.2rem` e do `min-width: 8.75rem` — números pensados
   pro desktop, onde a barra é larga e o botão precisa de presença.
   No celular isso lia como um botão grande demais pra palavra que carrega.

   ⚠️ A FONTE NÃO MUDA, e isso é a mesma decisão dos CTAs da hero: o que sobra
   é ESPAÇAMENTO, não tipo. Encolher a letra deixaria o rótulo frágil; encolher
   o ar deixa o botão justo.
   ⚠️ Mora aqui no fim do `secoes.css` e não junto da regra no `base.css`
   porque os dois seletores são `.menu__botao` (0,1,0): empatam em
   especificidade, e quem vence é a ordem de carregamento. O `secoes.css` entra
   depois do `base.css` nas quatro páginas.
   O DESKTOP não muda: nada aqui vaza do media query.
   ========================================================================== */
@media (max-width: 767px) {
  .menu__botao {
    gap: 1.15rem;
    min-width: 0;
    padding-inline: 0.85rem;
  }
}