/* ==========================================================================
   style.css — Pactual Auto Peças · Landing
   --------------------------------------------------------------------------
   Modelo BYD (SDD §2): painéis full-bleed empilhados, tipografia grande e
   leve, botão fantasma (só contorno), chrome mínimo.
   CSP-safe (SDD §8): nenhum @import, nenhuma fonte de CDN, nenhum recurso
   externo. Tudo que a página carrega sai do próprio diretório.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS (SDD §3)
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------
     Identidade da marca — PALETA DA ARTE DO HERO.
     ------------------------------------------------------------------
     Estes dois valores foram AMOSTRADOS pixel a pixel de
     assets/img/fonte/hero-base.png (a arte pronta que o cliente aprovou),
     não estimados a olho. A página inteira passa a falar a língua da arte:
     antes o CSS pintava #302E46/#F58634 enquanto o hero pintava
     #081020/#F06008, e a emenda aparecia na dobra entre o hero e a faixa.

     Não há conflito com a logo porque a variante usada é a MONOCROMÁTICA
     BRANCA (SDD §3) — ela não carrega cor própria para brigar.

     ⚠️ O SDD §3 ainda documenta a paleta velha, e tools/gera-hero.js e
     tools/gera-hero-img.js ainda geram arte com ela. Ver relatório: são
     arquivos de outro dono, mas ficam divergentes a partir daqui. */
  --navy-rgb:   8, 16, 32;      /* #081020 — fundo dominante, blocos */
  --orange-rgb: 240, 96, 8;     /* #F06008 — marca, CTA primário, destaques */
  --navy:   rgb(var(--navy-rgb));
  --orange: rgb(var(--orange-rgb));
  --yellow: #FFC81E;   /* acento herdado dos posts — aqui: anel de foco */
  --white:  #FFFFFF;   /* texto sobre escuro */

  /* ------------------------------------------------------------------
     Derivados.
     ------------------------------------------------------------------
     ⚠️ --navy-escuro VIROU --navy-alto, e a inversão é ARITMÉTICA, não
     gosto. O par velho (#232134 sobre #302E46) separava o rodapé do corpo
     por 1,20:1 indo para BAIXO. Com o navy novo em #081020 (L=0,0053, quase
     preto) esse caminho ACABOU: mesmo o preto puro #000000 só entrega
     1,10:1 contra ele. Não existe hex que reproduza a separação antiga
     descendo — o piso chegou.

     Então a superfície elevada passa a SUBIR: #141F3C dá 1,17:1 contra o
     navy, que é praticamente a separação de antes, e mantém o mesmo H/S
     (220°/60%) só com L maior. É a convenção normal de tema escuro
     (elevação = mais claro), e aqui ela deixou de ser preferência: é a
     única direção com espaço. Todo o texto do rodapé foi re-aferido sobre
     ela (ver §16) e passa. */
  --navy-alto-rgb: 20, 31, 60;   /* #141F3C — nav sólida, rodapé */
  --navy-alto: rgb(var(--navy-alto-rgb));

  /* Cor dos scrims = o navy escurecido pela metade exata (8,16,32 → 4,8,16).
     Vive como lista r,g,b para poder variar só o alfa em rgba(). Antes era
     rgba(20,19,31) repetido à mão em 6 lugares — cada um uma chance de a
     paleta se desencontrar na próxima troca. */
  --scrim-rgb: 4, 8, 16;

  --creme:       #F4F2EE;  /* fundo das seções claras (mockups #01/#03) */
  --tinta:       #2A2A2A;  /* texto sobre fundo claro */
  --zap:         #0F7B6C;  /* verde do botão da Ficha — escurecido para AA
                              (branco sobre ele = 5.16:1 em qualquer tamanho) */
  --zap-escuro:  #0B6053;

  /* Ritmo vertical e medidas. */
  --gutter: clamp(20px, 5vw, 72px);
  --max-texto: 20ch;   /* títulos de painel: linha curta, ao gosto BYD */
  --max-prosa: 46ch;

  /* Anel de foco por contexto (A11y: precisa de 3:1 contra o adjacente).
     Amarelo brilha sobre navy; sobre fundo claro ele sumiria, então lá
     o anel vira navy. Ver .ficha / .categorias mais abaixo. */
  --foco: var(--yellow);

  /* TODO(tipografia, SDD §8): trocar por fonte SELF-HOSTED (@font-face com
     .woff2 em assets/font/). Nunca CDN — quebraria a CSP do AX41.
     Por enquanto, font stack de sistema. */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ------------------------------------------------------------------
     Fonte do HERO — condensada pesada, para o <h1> do padrão do modelo.
     ------------------------------------------------------------------
     Sem CDN (CSP do AX41, SDD §8): só o que já existe na máquina de quem
     visita. A ordem é medida, não chutada:

       "Roboto Condensed"  → Android (a maior fatia do público desta página).
                             Tem Bold e Itálico REAIS.
       "Archivo Narrow" / "Liberation Sans Narrow" / "DejaVu Sans Condensed"
                           → Linux.
       Impact              → Windows e macOS. CONFERIDO num Windows 11 limpo:
                             "Arial Narrow" NÃO está instalada (é da Office,
                             não do Windows) — eu ia apostar nela e a máquina
                             desmentiu. Impact está, e é a única condensada
                             pesada de fábrica. Fica DEPOIS das reais e ANTES
                             da Arial Narrow porque é a que mais se parece com
                             o modelo: preta e estreita.
       "Arial Narrow"      → onde a Office instalou.
       var(--fonte)        → último recurso: perde o condensado, mantém a
                             ideia (pesada + itálica + caixa alta).

     TODO(tipografia, SDD §8): isto é paliativo. A fonte da marca tem que ser
     self-hosted em assets/font/ (.woff2 + @font-face) — aí o hero fica igual
     em toda máquina e este malabarismo sai. */
  --fonte-titulo: "Roboto Condensed", "Archivo Narrow", "Liberation Sans Narrow",
                  "DejaVu Sans Condensed", Impact, Haettenschweiler,
                  "Arial Narrow", var(--fonte);

  /* Duração base das animações; zerada em prefers-reduced-motion. */
  --transicao: 220ms;
}

/* ==========================================================================
   2. RESET ENXUTO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* O CTA do hero rola até a Ficha: suavizar e descontar a nav fixa. */
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  /* Trava horizontal: nada nesta página pode gerar rolagem lateral. */
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }

/* O `display: block` acima é regra de AUTOR, e regra de autor vence a do
   navegador SEJA QUAL FOR a especificidade — então o `[hidden] { display:
   none }` embutido no browser deixaria de valer para <img> e <svg>, e o
   atributo hidden viraria enfeite justo neles. Restaurar explicitamente.
   (É o que mantém o ícone do WhatsApp escondido no modo sem-WhatsApp.) */
[hidden] { display: none !important; }

button, input { font: inherit; color: inherit; }

/* ==========================================================================
   3. UTILITÁRIOS / A11y
   ========================================================================== */

/* Texto só para leitor de tela (landmarks e títulos que o layout não mostra). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco SEMPRE visível (SDD §9). Nunca remover sem substituir. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Link "pular para o conteúdo": só aparece no teclado. */
.pular {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 12px 18px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: top var(--transicao) ease;
}
.pular:focus { top: 12px; }

/* Sobrancelha (eyebrow) — SDD §5.2. */
.sobrancelha {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}

/* ==========================================================================
   4. BOTÃO FANTASMA (BYD: só contorno)
   --------------------------------------------------------------------------
   Regra BYD do SDD §5: uma cor de destaque só, usada uma vez — no CTA.
   Por isso o laranja aparece no contorno, e em mais nada dentro do painel.
   ========================================================================== */
.botao {
  display: inline-block;
  padding: 16px 34px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color var(--transicao) ease,
              color var(--transicao) ease;
}

.botao--fantasma {
  color: var(--white);              /* 19:1 sobre o navy novo — AA folgado */
  border: 1px solid var(--orange);  /* 5,77:1 sobre navy — passa o 3:1 de UI */
  background: transparent;
}
.botao--fantasma:hover,
.botao--fantasma:focus-visible {
  background: var(--orange);
  color: var(--navy);               /* invertido: navy sobre laranja = 5,77:1 */
}

/* --------------------------------------------------------------------------
   Botão SÓLIDO — o CTA do hero, no peso visual do modelo.
   --------------------------------------------------------------------------
   ⚠️ O TEXTO É ESCURO, E ISSO NÃO É ESCOLHA ESTÉTICA:
     branco sobre #F06008 = 3,29:1  → REPROVA (o mínimo é 4,5:1)
     #081020 sobre #F06008 = 5,77:1 → passa com folga
   Laranja saturado é uma cor CLARA (L=0,269): ele pede tinta escura, não
   branca. É a mesma conta que já obriga o .ficha__cabecalho a levar título
   navy, e a mesma que o modelo respeita no botão dele.
   Isto vale para QUALQUER botão laranja que apareça aqui no futuro: se o
   texto for branco, ele reprova — não tem alfa nem sombra que conserte.

   Convive com a regra BYD do SDD §5 ("uma cor de destaque só, usada uma vez:
   no CTA"): o laranja continua sendo a única cor de destaque e continua
   aparecendo uma vez por painel. O hero segue o modelo (decisão do Marcio);
   os painéis de baixo seguem o BYD e continuam com o .botao--fantasma. */
.botao--solido {
  background: var(--orange);
  color: var(--navy);      /* 5,77:1 — AA em qualquer tamanho */
  border: 1px solid var(--orange);
  font-weight: 700;

  /* O ANEL ESCURO NÃO É ENFEITE — é o que garante a SILHUETA do botão.
     O texto do botão é navy sobre laranja e lê a 5,77:1 sobre qualquer fundo,
     porque o botão é opaco. O que NÃO é garantido é o botão ter contorno: ele
     é laranja, e a arte também tem laranja (e um disco de freio cinza cuja
     luminância é quase idêntica à do laranja). Aferido no hero mobile:
       botão sobre o laranja da arte ..... 2,2:1
       botão sobre o disco de freio ...... 1,00:1  ← o botão evapora
     1,00:1 é coincidência de luminância: quem enxerga bem separa pela hue,
     quem tem baixa visão não separa nada. E este é o botão mais importante
     da página.
     O anel escuro dá contorno garantido em qualquer fundo, sem depender de onde
     o corte da arte cair. Sobre a cama navy ele é escuro sobre escuro: some, e
     lá quem delimita o botão é o próprio laranja contra o navy (5,8:1). Custa
     nada no caso bom, salva no ruim.
     0.78 e não 0.62: a 0.62 o pior pixel da faixa de transição da arte mobile
     dava 2,99:1 — passar raspando em 0,01 não é passar, é sorte. */
  box-shadow: 0 0 0 1.5px rgba(var(--scrim-rgb), 0.78);
}
.botao--solido:hover,
.botao--solido:focus-visible {
  /* Escurece no hover: o texto navy fica AINDA mais legível, nunca menos. */
  background: #D45303;     /* navy sobre ele = 7,26:1 */
  border-color: #D45303;
}

/* ==========================================================================
   5. NAV (chrome mínimo)
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: transparent;
  transition: background-color var(--transicao) ease,
              backdrop-filter var(--transicao) ease;
}

/* Escurece ao rolar (classe posta pelo app.js).
   Usa a superfície ELEVADA (--navy-alto), não o navy do corpo: sobre os
   painéis navy a barra precisa se destacar do fundo, e com o navy novo quase
   preto a única direção com espaço é para cima (ver a nota no :root). */
.nav--solida {
  background: rgba(var(--navy-alto-rgb), 0.92);
  backdrop-filter: blur(10px);
}

.nav__logo { display: block; line-height: 0; }
.nav__logo img {
  /* Proporção 2.59:1 travada — nunca esticar (SDD §3). */
  width: auto;
  height: 38px;
}

.nav__acoes {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
}

.nav__link {
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity var(--transicao) ease;
}
.nav__link:hover, .nav__link:focus-visible { opacity: 1; }

.nav__cta {
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background-color var(--transicao) ease,
              color var(--transicao) ease,
              border-color var(--transicao) ease;
}
.nav__cta:hover, .nav__cta:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}

/* ==========================================================================
   6. PAINEL FULL-BLEED (o esqueleto BYD)
   ========================================================================== */
.painel {
  position: relative;
  /* 100dvh: no mobile o dvh acompanha a barra do navegador sumindo. */
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;   /* texto na base, padrão BYD */
  overflow: hidden;
  background: var(--navy);
}

/* <picture> é só um seletor de fonte, não um elemento de layout: sem isto ela
   viraria um item flex de 0px dentro do .painel. `display: contents` faz a
   caixa dela sumir e deixa a <img> (que é absoluta) mandar sozinha. */
.painel > picture { display: contents; }

/* Foto de fundo do painel: cobre sem esticar (SDD §10.7).
   O navy por baixo é o que aparece enquanto a foto não chega. */
.painel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--navy);
}

/* Scrims: é o que garante AA do texto sobre a foto. */
.scrim {
  position: absolute;
  left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
}
.scrim--topo {
  top: 0;
  /* 34% (era 30%): tem que ENCOSTAR no scrim de base, que agora sobe até 28%. */
  height: 34%;
  background: linear-gradient(to bottom,
              rgba(var(--scrim-rgb), 0.75), rgba(var(--scrim-rgb), 0));
}
.scrim--base {
  bottom: 0;
  /* 72% (era 68%) → começa em 28% do topo. O de cima morre em 34%, então os
     dois se cruzam entre 28% e 34%. Antes o de cima acabava em 30% e o de
     baixo só começava em 32% com alfa 0: sobrava uma faixa sem scrim nenhum
     (a "zona morta" do auditor). Agora não existe mais ponto de alfa zero. */
  height: 72%;
  background: linear-gradient(to top,
              rgba(var(--scrim-rgb), 0.92) 0%,
              rgba(var(--scrim-rgb), 0.72) 38%,
              rgba(var(--scrim-rgb), 0) 100%);
}

/* Piso: escurecimento uniforme sobre a foto inteira. Só o hero usa — ver §7. */
.scrim--piso {
  inset: 0;
  background: rgba(var(--scrim-rgb), 0.10);
}

/* Cama: o scrim que protege o bloco de texto do HERO. Só o hero usa — ver §7.
   HORIZONTAL, porque no desktop o texto mora na metade ESQUERDA (o padrão do
   modelo), não na base. É a diferença que impede de sujar o painel laranja e
   as peças, que são o assunto da arte. Vira vertical no mobile (ver §18). */
.scrim--cama {
  inset: 0;
  background: linear-gradient(to right,
              rgba(var(--scrim-rgb), 0.58) 0%,
              rgba(var(--scrim-rgb), 0.50) 30%,
              rgba(var(--scrim-rgb), 0.22) 46%,
              rgba(var(--scrim-rgb), 0) 58%);
}

.painel__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--gutter);
  padding-bottom: clamp(48px, 9vh, 96px);
}

/* Título de painel: grande e LEVE (peso 300) — a assinatura tipográfica BYD. */
.painel__titulo {
  font-size: clamp(34px, 6.4vw, 76px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: var(--max-texto);
  text-wrap: balance;
}

/* Corpo curto dos painéis. */
/* Remate da História (SDD §5.2): "É dedicação no atendimento."
   Fica ABAIXO do título e em corpo bem menor de propósito — se tivesse o mesmo peso,
   voltaria a ser a frase única que explica a própria piada.
   Laranja sobre navy = 5,77:1 (a mesma medida do resto da paleta nova), passa AA.
   Peso 600 em vez do 300 do título: o contraste é de PESO, não de tamanho só, senão
   em telas pequenas as duas linhas viram uma coisa só. */
.painel__remate {
  margin-top: 14px;
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--orange);
  max-width: var(--max-prosa);
}

.prosa {
  max-width: var(--max-prosa);
  margin-top: 26px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
.prosa p + p { margin-top: 14px; }

/* ==========================================================================
   7. HERO — arte pronta + cama de texto à esquerda (padrão do modelo)
   --------------------------------------------------------------------------
   O hero deixou de ser "foto qualquer com texto na base" e passou a ser a
   ARTE APROVADA (assets/img/fonte/hero-base.png): painel navy à esquerda —
   que é a cama do texto — e painel laranja à direita com as peças.
   Por isso o texto agora mora à ESQUERDA e centrado na vertical, e não mais
   colado na base: a base da arte é laranja.

   A GEOMETRIA DA CAMA — MEDIDA, NÃO ESTIMADA
   Varri a arte pixel a pixel (sharp) em vez de olhar e chutar:
     · a cama navy é sólida de x=0 a x=50%, de y=14% a y=80%;
     · em y≈81% existe uma LASCA laranja de 4px (um filete da arte) atravessando
       a esquerda — invisível de olho, fatal para uma medição feita "por cima";
     · a partir de y≈87% o canto inferior esquerdo é LARANJA de verdade.
   Por isso o bloco de texto fica travado em x 3–46% e y 16–78%. Não é margem
   de gosto: é onde a arte é navy.

   POR QUE ISSO IMPORTA: a linha 2 do <h1> é LARANJA. Laranja sobre a cama navy
   dá 5,03:1 (passa). Laranja sobre a lasca/faixa laranja dá 3,20:1 — some. Foi
   exatamente o que a varredura pegou quando testei a caixa frouxa (y até 84%):
   o pior pixel caía em (5%,81%), em cima da lasca. A caixa travada resolve.

   CONTRASTES AFERIDOS no composto REAL (arte + piso + cama + topo, como o
   navegador pinta — medir a arte crua daria falso negativo), pior pixel da
   caixa x 3–46% / y 16–78%:
     <h1> linha 1, branco .............. 16,55:1  (precisa 3:1, é texto grande)
     <h1> linha 2, laranja #F06008 ......  5,03:1  (passa até como texto normal)
     subtítulo, branco .82 ............. 11,20:1
     chip, texto branco .94 ............ 14,63:1
     chip, moldura laranja .............  5,03:1  (precisa 3:1)
     lastro 11px, branco .62 ...........  6,71:1
     CTA, navy sobre laranja ...........  5,77:1  (não depende da foto)

   ⚠️ MUDANÇA DE REGIME, E ELA É DELIBERADA: o hero antigo garantia AA pela
   ESTRUTURA (scrim pesado o bastante para segurar até uma foto 100% branca),
   porque a imagem era gerada por IA e ninguém sabia o que ia sair. Agora a arte
   é FIXA e aprovada, então a garantia é por MEDIÇÃO. É o que permite o scrim
   ser leve e a arte aparecer — que é o ponto de ter arte. O preço: se a arte do
   hero for trocada, ESTES NÚMEROS CADUCAM e têm que ser re-aferidos. Está
   registrado no relatório como a dívida que essa escolha cria.
   ========================================================================== */
.hero {
  /* Modelo: o bloco vive no meio da cama, não na base. */
  align-items: center;
}

/* A arte já entrega navy atrás da nav (a forma angular navy atravessa o topo
   inteiro), então aqui o scrim do topo é só seguro contra um corte diferente.
   Curto e leve DE PROPÓSITO: o 0.75/34% que os outros painéis usam ainda
   pintaria ~0.31 de alfa a 20% da altura, e a 20% da altura já é o painel
   LARANJA da arte — viraria lama justo no assunto do quadro. */
.hero .scrim--topo {
  height: 22%;
  background: linear-gradient(to bottom,
              rgba(var(--scrim-rgb), 0.45) 0%,
              rgba(var(--scrim-rgb), 0.28) 45%,
              rgba(var(--scrim-rgb), 0) 100%);
}

.hero__conteudo {
  /* 52%, e o número tem conta atrás.
     A cama navy é sólida até x=50% na PIOR altura (y=80%), mas na altura em
     que o <h1> realmente cai (y≈25–45%) ela vai até 56–60% — medido. 52% é o
     teto que cabe na cama em toda a faixa que o bloco ocupa.
     E ele é conservador de graça: como o object-fit:cover recorta CENTRADO, o
     centro da imagem é sempre o centro da tela, então a viewport em 52% cai
     sempre em ≤51% da arte, qualquer que seja a proporção do monitor.
     Era 46% e o <h1> quebrava em 4 linhas (aferido em 1024–1440) — o modelo
     pede 2. Ver a conta do font-size logo abaixo. */
  max-width: 52%;
  padding-right: 0;
  padding-block: clamp(88px, 14vh, 140px);
}

/* --------------------------------------------------------------------------
   <h1> — duas linhas, condensada pesada, itálica, caixa alta (o modelo).
   Continua sendo o único <h1> da página e texto REAL (nunca dentro da arte).
   -------------------------------------------------------------------------- */
.hero__titulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 800;
  /* Só morde em fonte VARIÁVEL (Roboto novo do Android, Bahnschrift); nas
     estáticas é ignorado sem efeito colateral. É o "com parcimônia": ninguém
     está esticando glifo à força — quem não tem eixo de largura só ignora. */
  font-stretch: 87.5%;

  /* ⚠️ ISTO É O QUE SALVA A IMPACT.
     A Impact tem UM peso só. Pedir 800 dela faz o navegador ENGROSSAR na
     marra (bold sintético) e o resultado a 60px é um borrão de tinta.
     Desligar a síntese de PESO faz a Impact renderizar como ela é — que já é
     preta — e não atrapalha quem tem peso real: a Roboto Condensed tem a face
     Bold de verdade, então ela é ESCOLHIDA (seleção de face não é síntese).
     A síntese de ESTILO fica LIGADA de propósito: é ela que dá a oblíqua da
     Impact/Bahnschrift, que é justamente o efeito do modelo.
     `font-synthesis: style` é o legado (cobre Safari/Firefox antigos);
     `font-synthesis-weight` é o moderno. Navegador que não entender nenhum
     dos dois volta ao bold sintético — feio, não quebrado. */
  font-synthesis: style;
  font-synthesis-weight: none;

  /* 3,4vw NÃO é chute — é o resultado de medir e resolver.
     Medi a largura NATURAL (sem quebra) das duas linhas na fonte que o
     navegador de fato usa, em vez de estimar por "largura média de
     caractere": a linha mais longa ("o atendimento que você merece.") pede
     13,13em. Minha regra de bolso dizia 12,2em — errava 7%, o suficiente para
     quebrar a linha.
       cabe em 1 linha  ⟺  font-size ≤ (52vw − gutter) / 13,13em
     que dá o teto de 3,58vw em toda a faixa de desktop (abaixo de 1440 o
     gutter é 5vw, então a proporção se mantém). 3,4vw fica abaixo disso com
     folga em 768–1920px, e o teto de 66px respeita o limite de 71px a 1920.
     Foi assim que as 4 linhas viraram 2.

     ⚠️ A garantia das 2 linhas vale para a IMPACT (Windows/macOS, a maioria
     do desktop). Numa máquina que caia na Liberation/DejaVu (Linux) ou no
     fallback não-condensado, a linha é mais larga e quebra — por isso os
     <span> têm text-wrap: balance: quando quebra, quebra bonito. Consertar de
     verdade é a fonte self-hosted do TODO acima, não mais um vw. */
  /* Piso 27px e não 30: entre 761px (onde as regras de mobile acabam) e ~790px
     o layout ainda é o de desktop, com o texto confinado a meia tela. A 768px
     um piso de 30px estourava a linha por 7px e ela quebrava. 27px fecha essa
     faixa. Aferido, não estimado. */
  font-size: clamp(27px, 3.4vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  /* Caixa alta no CSS, não no HTML: leitor de tela não soletra (mesma regra
     do .cartao__titulo). O texto no markup é a tagline do SDD §3, literal. */
  text-transform: uppercase;
}

.hero__linha {
  display: block;
  text-wrap: balance;   /* se precisar quebrar, quebra bonito */
}
/* Linha 2 em laranja — 5,03:1 sobre a cama, aferido no composto real. */
.hero__linha--destaque { color: var(--orange); }

/* --------------------------------------------------------------------------
   Subtítulo
   -------------------------------------------------------------------------- */
.hero__sub {
  margin-top: clamp(16px, 2vh, 24px);
  max-width: 34ch;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);   /* 11,20:1 no pior pixel da cama */
}

/* --------------------------------------------------------------------------
   CHIPS de fato — os 3 números COM LASTRO (SDD §5.1).
   --------------------------------------------------------------------------
   O modelo traz "Peças de qualidade / As melhores marcas / Entrega rápida":
   nenhum dos três entrou, e não por diagramação.
     · "as melhores marcas" é SUPERLATIVO com universo comparável — a mesma
       estrutura que o SDD §5.1 já derrubou uma vez (art. 38 do CDC joga o
       ônus da prova na loja);
     · "entrega rápida" afirma prazo, e prazo não confirmado é o item nº1 da
       lista de perguntas ao cliente (SDD §11);
     · "peças de qualidade" é adjetivo que todo concorrente também assina.
   No lugar vão os três fatos que um terceiro confere. É a regra da faixa
   (SDD §5.1) aplicada ao hero: um número mole ao lado de números duros
   envenena os três — e numa página cujo argumento é "aqui ninguém te engana",
   isso é autocontradição cara.
   -------------------------------------------------------------------------- */
.hero__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(20px, 3vh, 32px);
}

.hero__fato {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 15ch;
}

/* A moldura do ícone: quadrado arredondado com contorno laranja, como no
   modelo. Laranja sobre a cama = 5,03:1, folgado para os 3:1 de elemento
   gráfico. (O chip é texto ESTÁTICO, não controle: o 1.4.11 nem se aplica —
   mas passar de qualquer jeito é de graça aqui.) */
.hero__fato__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--orange);
  border-radius: 9px;
  color: var(--orange);
}
.hero__fato__marca svg { width: 19px; height: 19px; }

.hero__fato__texto {
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.94);   /* 14,63:1 */
}

/* O LASTRO do 4,8 (SDD §5.1). O 4,8 subiu para o hero, então a data sobe
   junto — a nota é o que sustenta o número, e número sem lastro nesta página
   é justamente o que o SDD proíbe. Texto vem do config.js (data-cfg), o mesmo
   que alimenta a nota da faixa: uma fonte, dois lugares.

   .72 e não .4: a 11px, 0.4 daria 3,4:1 e reprovaria — é o mesmo defeito que
   a .faixa__nota já teve de corrigir. Texto de lastro ilegível é pior do que
   não ter lastro: a página promete "aqui ninguém te engana" e esconde a data
   da prova.

   O max-width tem motivo AFERIDO: sem ele o <p> é bloco e a CAIXA dele ia até
   52%, encostando na hairline laranja que a arte tem no meio do painel — e a
   0.62 o pior pixel dava 4,50:1, empatado no mínimo, sem margem nenhuma. A
   tinta real nem chega lá (a frase tem ~11% de largura), mas depender disso
   seria depender do texto que está no config.js hoje. Travar a caixa + subir
   para .72 tira a dependência. */
.hero__lastro {
  margin-top: clamp(14px, 2vh, 20px);
  max-width: 34ch;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.hero__conteudo .botao { margin-top: clamp(20px, 3vh, 30px); }

/* ==========================================================================
   8. FAIXA DE ESTATÍSTICAS (SDD §5.1)
   --------------------------------------------------------------------------
   Sem cards e sem ícones. 3 itens em LINHA ÚNICA até 360px — é por isso que
   o glifo herói tem ≤ 3 caracteres e a unidade desce pro rótulo.
   ========================================================================== */
.faixa {
  background: var(--navy);
  padding: clamp(56px, 9vw, 104px) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faixa__titulo {
  font-size: clamp(19px, 2.6vw, 28px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin-bottom: clamp(36px, 5vw, 56px);
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

.faixa__lista {
  display: grid;
  /* Três colunas SEMPRE — nunca vira 2x2 (destruiria a ordem de leitura). */
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.faixa__item {
  padding: 0 clamp(8px, 2vw, 24px);
  text-align: left;
}
.faixa__item:first-child { padding-left: 0; }

/* Separador: filete vertical 1px a 12% de opacidade. */
.faixa__item + .faixa__item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.faixa__num {
  display: block;
  font-size: clamp(40px, 12vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Números de larguras iguais: as bases dos 3 itens alinham. */
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.faixa__rotulo {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
  /* Altura fixa de 2 linhas nos três: sem isso as bases desalinham. */
  min-height: calc(13px * 1.35 * 2);
}

/* Rodapé da faixa: "Nota do Google em jul/2026" — é o LASTRO da faixa inteira
   (SDD §5.1). Texto de lastro ilegível é pior do que não ter lastro nenhum:
   a página promete "aqui ninguém te engana" e esconde a data da prova.

   ⚠️ DIVERGE DO SDD §5.1, que pede literalmente "11px, opacidade 0.4".
   Aferido: 0.4 de branco sobre navy compõe #83829 0 = 3,45:1 — reprova o AA
   (4,5:1) exigido pelo próprio SDD §9. A spec é incumprível como está; ficou
   0.52 = 4,75:1, o menor valor com margem real. Corrigir o SDD.

   Não compete com os números: 4,75:1 a 11px contra 5,78:1 a 13px (rótulo) e
   13,08:1 a 40-64px (número herói). A escada continua subindo na ordem certa. */
.faixa__nota {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 11px;
  opacity: 0.52;   /* era 0.4 → 3,45:1 (reprovava) · agora 4,75:1 (AA) */
  letter-spacing: 0.02em;
}

/* ==========================================================================
   9. CATEGORIAS (mockup #03) — seção clara
   ========================================================================== */
.categorias {
  /* Fundo claro: o anel de foco amarelo sumiria aqui. Vira navy. */
  --foco: var(--navy);
  background: var(--creme);
  color: var(--tinta);
  padding: clamp(56px, 9vw, 112px) var(--gutter);
}

.categorias__abertura {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: clamp(36px, 5vw, 56px);
  color: var(--navy);
  text-wrap: balance;
}

.grade {
  display: grid;
  /* São 8 cards: só 4 e 2 colunas dividem sem deixar órfão na última linha.
     (auto-fit resolveria 5 colunas a 1280px → linha de 5 + linha de 3.)
     Desktop = 4x2, mobile = 2x4, como no mockup #03. */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}

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

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 24px;
  background: var(--white);
  border: 1px solid rgba(var(--navy-rgb), 0.1);
  border-radius: 10px;
  transition: transform var(--transicao) ease,
              box-shadow var(--transicao) ease;
}
.cartao:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(var(--navy-rgb), 0.13);
}

/* Card "Outra peça": contorno laranja, como no mockup.
   ⚠️ Aferido: #F06008 sobre o creme dá 2,94:1 — 2% abaixo dos 3:1. Melhorou
   (a paleta velha dava 2,25:1) mas não fecha, e não fecha por escolha: o
   laranja precisaria ir para ~#EC5D06 e aí já não é mais a cor da arte.
   Fica porque a borda NÃO é o que identifica o card: quem identifica é o
   <h3> "Outra peça" (19:1) e o texto do link. O 1.4.11 pede contraste do que
   é NECESSÁRIO para identificar o componente — esta borda é decoração, e
   nenhuma informação existe só nela. Registrado no relatório, não escondido. */
.cartao--destaque { border-color: var(--orange); }

/* Aqui a paleta nova CONSERTA um defeito que estava de pé: o ícone laranja
   sobre o branco do card dava 2,52:1 com o #F58634 e reprovava os 3:1 de
   elemento gráfico. Com o #F06008 são 3,29:1 — passa. */
.cartao__icone {
  width: 30px;
  height: 30px;
  color: var(--orange);
  margin-bottom: 6px;
}

.cartao__titulo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Uppercase no CSS, não no HTML: leitor de tela não soletra. */
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.2;
}

.cartao__link {
  margin-top: auto;
  color: var(--zap);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

/* Área de clique = o card inteiro (o link cobre tudo). */
.cartao__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

.cartao__seta {
  display: inline-block;
  transition: transform var(--transicao) ease;
}
.cartao:hover .cartao__seta { transform: translateX(4px); }

/* Com o link esticado, o foco tem que desenhar no CARD, não no texto. */
.cartao__link:focus-visible { outline: none; }
.cartao:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

/* ==========================================================================
   10. FICHA DE ORÇAMENTO (mockup #01) — seção clara
   ========================================================================== */
.ficha {
  --foco: var(--navy);
  background: var(--creme);
  color: var(--tinta);
  padding: 0 var(--gutter) clamp(64px, 9vw, 112px);
}

.ficha__cartao {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(var(--navy-rgb), 0.12);
}

/* Cabeçalho laranja do mockup. */
.ficha__cabecalho {
  background: var(--orange);
  padding: 22px clamp(20px, 4vw, 32px);
}

.ficha__titulo {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* Navy sobre laranja = 5.2:1 — AA. */
  color: var(--navy);
}

.ficha__corpo { padding: clamp(22px, 4vw, 32px); }

.campo { margin-bottom: 20px; }

.campo__rotulo {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #56534B;   /* 6.4:1 sobre branco — AA */
}

.campo__entrada {
  width: 100%;
  padding: 15px 16px;
  background: #F7F6F3;
  border: 1px solid #DCD8D0;
  border-radius: 8px;
  color: var(--tinta);
  font-size: 16px;   /* 16px evita o zoom automático do iOS no foco */
  transition: border-color var(--transicao) ease,
              background-color var(--transicao) ease;
}
/* Placeholder é TEXTO — o WCAG 1.4.3 vale para ele igual. O #9A958C anterior
   media 2,76:1 sobre o #F7F6F3 do campo (o comentário antigo dizia "3.1:1",
   que também reprovava). #6E6A63 = 4,98:1 aqui e 5,38:1 no branco do foco.
   Continua sendo o cinza mais claro do formulário e não se confunde com valor
   digitado: o valor é #2A2A2A, a 14,35:1 — quase 3x mais contraste. */
.campo__entrada::placeholder { color: #6E6A63; }  /* era #9A958C → 2,76:1 · agora 4,98:1 (AA) */
.campo__entrada:focus {
  background: var(--white);
  border-color: var(--navy);
}

/* Estado de erro: cor + texto (nunca só cor). */
.campo__entrada[aria-invalid="true"] { border-color: #C0392B; }

.campo__erro {
  margin-top: 7px;
  font-size: 13px;
  color: #A93226;   /* 5.4:1 sobre branco — AA */
}

/* Botão verde do WhatsApp (mockup #01). */
.botao-zap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  margin-top: 4px;
  padding: 17px 20px;
  background: var(--zap);
  color: var(--white);   /* 5.16:1 — AA em qualquer tamanho */
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transicao) ease;
}
.botao-zap:hover { background: var(--zap-escuro); }
.botao-zap__icone { width: 22px; height: 22px; flex: none; }

/* Status da Ficha. O texto é que carrega o significado — a cor só reforça
   (nunca só cor). Por isso a base é neutra e os modificadores são opcionais.
   Todos aferidos sobre o branco do .ficha__cartao. */
.ficha__status {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #56534B;   /* 7,68:1 — neutro */
  text-align: center;
}
.ficha__status:empty { margin-top: 0; }

/* Erro de validação: culpa é do preenchimento, e vermelho comunica isso. */
.ficha__status--erro  { color: #A93226; }        /* 6,62:1 */
/* "A ficha não foi enviada": não é erro da pessoa nem sucesso — é um aviso
   sério. Navy, no maior contraste do formulário, para ninguém pular. */
.ficha__status--aviso { color: var(--navy); font-weight: 500; }   /* 13,08:1 */
/* Abrimos o WhatsApp. Verde do canal, mas o texto nunca diz "enviado". */
.ficha__status--ok    { color: var(--zap); }     /* 5,16:1 */

/* ==========================================================================
   10.1 PLANO B DA FICHA — o orçamento nunca é descartado em silêncio
   --------------------------------------------------------------------------
   Nasce oculto (hidden no HTML); o app.js revela no submit. Vive dentro do
   cartão branco da Ficha, então o fundo aqui é o mesmo #F7F6F3 dos campos:
   lê como "área de trabalho do formulário", não como um card novo.
   ========================================================================== */
.plano-b {
  margin-top: 18px;
  padding: 18px;
  background: #F7F6F3;
  border: 1px solid #DCD8D0;
  border-radius: 10px;
}

.plano-b__titulo {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);   /* 12,11:1 sobre #F7F6F3 */
}

.plano-b__texto {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #56534B;   /* 7,11:1 sobre #F7F6F3 */
}

/* A ficha montada, visível — a prova de que os dados não sumiram.
   <pre> nasce monoespaçado e sem quebra: as duas coisas são desfeitas aqui.
   `pre-wrap` preserva os \n da mensagem E quebra a linha comprida. */
.plano-b__ficha {
  margin: 14px 0 0;
  padding: 14px;
  background: var(--white);
  border: 1px solid #DCD8D0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta);   /* 14,35:1 sobre branco */
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* "peça" comprida não estoura a caixa */
}

.plano-b__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.plano-b__copiar {
  padding: 12px 18px;
  background: var(--navy);
  color: var(--white);   /* 13,08:1 */
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color var(--transicao) ease;
}
/* Hover CLAREIA (--navy-alto), não escurece: com o navy novo quase preto,
   escurecer não daria mudança perceptível — o hover viraria um botão morto. */
.plano-b__copiar:hover { background: var(--navy-alto); }

/* Só aparece quando existe WhatsApp (caso de pop-up bloqueado). */
.plano-b__link {
  padding: 12px 18px;
  background: var(--zap);
  color: var(--white);   /* 5,16:1 */
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background-color var(--transicao) ease;
}
.plano-b__link:hover { background: var(--zap-escuro); }

.plano-b__telefone {
  margin-top: 12px;
  font-size: 13.5px;
  color: #56534B;   /* 7,11:1 sobre #F7F6F3 */
}
.plano-b__telefone a { color: var(--zap); }   /* 4,77:1 sobre #F7F6F3 */

.ficha__aviso {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: #6B675F;   /* 4.9:1 sobre branco — AA */
}
.ficha__aviso a { color: var(--zap); }

/* ==========================================================================
   11. MARCAS (SDD §5, item 6)
   ========================================================================== */
.marcas {
  background: var(--navy);
  padding: clamp(48px, 7vw, 80px) var(--gutter);
}

.marcas .sobrancelha { margin-bottom: 26px; }

.marcas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
}

/* Wordmark tipográfico (provisório — ver TODO no index.html). */
.marcas__item {
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

/* ==========================================================================
   12. HISTÓRIA (SDD §5.2)
   ========================================================================== */
/* O brilho laranja subiu de 0.14 para 0.18: o navy novo é bem mais escuro,
   então o mesmo alfa que dava um halo visível sobre #302E46 quase some sobre
   #081020. Não é "mais cor" — é a mesma presença, recalibrada para o fundo. */
.painel--historia {
  align-items: center;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(var(--orange-rgb), 0.18), transparent 62%),
    var(--navy);
}
.painel--historia .painel__conteudo {
  max-width: 940px;
  padding-block: clamp(80px, 12vh, 140px);
}

/* Selo do prêmio (SDD §5.2.1). Só existe se o dossiê chegar.
   As duas linhas no MESMO campo visual e com legibilidade comparável.
   Contorno de 1px uniforme, discreto: o SDD manda que o layout NÃO sugira
   prêmio oficial/governamental (é portal privado), e diz que o prêmio é
   "enfeite, não pilar". Nada de tarja lateral grossa nem cara de brasão. */
.selo {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  max-width: 52ch;
}
.selo__titulo {
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}
/* Âncora obrigatória (evento + escopo + fonte + edições).
   14px e 78% de opacidade: legibilidade COMPARÁVEL ao título — nunca um
   disclaimer cinza de 8px, que não cura nada (CONAR pega engano por omissão). */
.selo__ancora {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   13. RETRATO (SDD §5.3)
   ========================================================================== */
/* Ela pequena no quadro, letreiro legível, texto ocupando o ar.
   Sem moldura, sem filtro, sem overlay colorido — só o escurecimento
   mínimo para contraste AA (o scrim já faz isso). */
.painel--retrato { align-items: flex-end; }

/* No celular a foto 4:5 ainda é mais larga que a tela, então o cover corta as
   laterais. Puxar o corte para 25% (em vez do 50% do centro) segura no quadro
   o pedaço do letreiro laranja que existe, sem jogar o rosto dela contra a
   borda — que é o que acontece em 0%.
   ⚠️ Isto ameniza, não cumpre o §5.3: a placa não lê "PACTUAL" em corte nenhum,
   porque a foto-fonte não tem esses pixels. Ver relatório. */
@media (max-width: 760px) {
  .painel--retrato .painel__foto { object-position: 25% center; }
}

.painel__conteudo--canto { max-width: 640px; }

.retrato__estrofe {
  font-size: clamp(21px, 3.1vw, 34px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--white);
}
.retrato__estrofe + .retrato__estrofe { margin-top: 1.32em; }

/* ==========================================================================
   14. PROMESSA (SDD §5.4) — colada no CTA
   ========================================================================== */
.painel--promessa {
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(var(--orange-rgb), 0.22), transparent 68%),
    var(--navy);
}
.painel--promessa .painel__conteudo {
  max-width: 900px;
  margin: 0 auto;
  padding-block: clamp(80px, 12vh, 140px);
}
.painel--promessa .painel__titulo {
  max-width: 18ch;
  margin: 0 auto;
}
.prosa--centro { margin-inline: auto; text-align: center; }
.painel--promessa .botao { margin-top: clamp(34px, 5vh, 52px); }

/* ==========================================================================
   15. A LOJA
   ========================================================================== */
.painel--loja .painel__titulo { margin-bottom: 24px; }

.loja__dados {
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.loja__dados p + p { margin-top: 6px; }
.loja__telefones a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.loja__telefones a:hover { border-bottom-color: var(--white); }

.loja__mapa {
  display: inline-block;
  margin-top: 22px;
  color: var(--orange);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao) ease;
}
.loja__mapa:hover { border-bottom-color: var(--orange); }

/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
/* Superfície ELEVADA, não "escura" — ver a nota do :root. Com o navy do corpo
   quase preto, descer não separa (nem o preto puro separa) e subir sim: os
   #141F3C dão 1,17:1 contra o corpo, ~a mesma separação do par velho. */
.rodape {
  background: var(--navy-alto);
  padding: clamp(52px, 7vw, 80px) var(--gutter) 28px;
}

.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rodape__logo { width: auto; height: 44px; }

.rodape__tagline {
  margin-top: 18px;
  max-width: 30ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

/* 12px w600: peso 600 NÃO é "bold" para o WCAG (bold = 700) e 12px não é
   texto grande — então o alvo é 4,5:1, não 3:1. */
.rodape__titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);   /* 5,26:1 no rodapé velho → 5,48:1 no novo */
  margin-bottom: 16px;
}

.rodape__linha {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.rodape__linha + .rodape__linha { margin-top: 10px; }
.rodape__linha a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.rodape__linha a:hover { border-bottom-color: var(--white); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
}

/* Razão social + CNPJ + crédito: é o texto mais quieto da página, mas quieto
   não pode virar ilegível — CNPJ é justamente o dado que alguém vai querer
   conferir. */
.rodape__legal, .rodape__credito {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.52);   /* 5,26:1 no rodapé velho → 5,48:1 no novo */
}
.rodape__credito a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.rodape__credito a:hover { color: var(--white); }

/* ==========================================================================
   17. REVEAL AO ROLAR (app.js liga via IntersectionObserver)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal--visivel {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   18. RESPONSIVO — até 360px (SDD §10.6)
   ========================================================================== */
/* --------------------------------------------------------------------------
   HERO no mobile — o texto vai para CIMA (a arte 9:16 põe a cama no topo e as
   peças embaixo). Corta em 760px para casar com o media do <source> do
   <picture>: se divergirem, o layout troca num ponto e a foto noutro.
   -------------------------------------------------------------------------- */
/* ⚠️ O ORÇAMENTO VERTICAL DO MOBILE É APERTADO, E O NÚMERO É MEDIDO.
   O hero-mobile.webp (1080x1920) já existe, então dá para medir em vez de supor:
   a cama navy dele acaba em y=52,8% — e não em 87% como no desktop. Abaixo
   disso vem o laranja e, a partir de ~59%, o DISCO DE FREIO.

   O bloco de texto ocupava y=14–63% e invadia tudo isso. O que a medição pegou
   (e o olho não pegaria):
     · lastro branco .72 sobre o laranja ....... 4,38:1  REPROVA (mínimo 4,5)
     · moldura laranja do 3º chip .............. 2,80:1  REPROVA (mínimo 3)
     · CTA laranja contra o disco cinza ........ 1,00:1  o botão SOME de contorno
   O 1,00:1 é o pior: laranja e o cinza do disco têm luminância quase idêntica.
   A hue salva quem enxerga bem; para baixa visão o botão evapora — e é o botão
   mais importante da página.

   A correção certa NÃO é escurecer a arte até tudo passar (isso mataria as
   peças, que são o assunto). É COMPRIMIR o bloco para dentro da cama navy, que
   é onde a arte foi desenhada para ele viver. É o que as regras abaixo fazem:
   bloco em y≈11–48%, todo dentro dos 52,8% de navy, com folga.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero { align-items: flex-start; }

  .hero__conteudo {
    max-width: 100%;
    padding-right: var(--gutter);
    /* Abaixo da nav fixa (~58px) + respiro, e nem um pixel a mais: cada pixel
       aqui empurra o CTA para cima do disco de freio. */
    padding-top: clamp(70px, 11vh, 96px);
    padding-bottom: clamp(24px, 4vh, 40px);
  }

  /* A cama vira VERTICAL (o texto está em cima) e morre em 68%, ANTES do disco
     de freio: escurecer o disco seria estragar a arte para resolver um problema
     que a compressão do bloco já resolveu. Sobre a cama navy ela é
     imperceptível — navy sobre navy.

     O degrau de 0.46@56% → 0.12@62% existe por um motivo aferido: a faixa de
     TRANSIÇÃO da arte (53–59%) é um marrom-médio, e no iPhone SE a base do CTA
     encosta nela. Ali o gargalo não é o anel do botão (naquele fundo ele não se
     separa) e sim o LARANJA do botão contra o marrom: dava 2,99:1. Como o
     laranja é uma cor clara, a única alavanca é escurecer a faixa.
     Varri 4 perfis de scrim: este entrega 3,78:1 de silhueta custando 14% de
     luz nas peças, contra 12% do perfil anterior — 2 pontos a mais para o CTA
     deixar de sumir. Os perfis mais fortes chegavam a 4,7:1, mas a 17% de luz:
     não vale, as peças são o assunto da arte. */
  .scrim--cama {
    background: linear-gradient(to bottom,
                rgba(var(--scrim-rgb), 0.74) 0%,
                rgba(var(--scrim-rgb), 0.68) 44%,
                rgba(var(--scrim-rgb), 0.46) 56%,
                rgba(var(--scrim-rgb), 0.12) 62%,
                rgba(var(--scrim-rgb), 0) 68%);
  }

  /* 6,2vw: a 390px dá ~24px, e a 24px a linha mais longa (13,13em na Impact)
     ocupa 318px dos 350px úteis — ou seja, o <h1> fica em DUAS linhas também no
     celular, como o modelo. A 7,2vw ele ia a 28px e a 2ª linha quebrava, o que
     custava 28px de altura que o orçamento vertical não tem.
     Se a máquina cair numa condensada mais larga (Roboto Condensed no Android),
     a 2ª linha quebra e o bloco cresce ~24px — ainda dentro da cama navy. */
  .hero__titulo { font-size: clamp(22px, 6.2vw, 38px); }

  .hero__sub {
    max-width: 40ch;
    font-size: 14px;
    margin-top: 12px;
  }

  /* Chips mais enxutos: 34px em vez de 38 e respiro menor. São 3 linhas
     empilhadas no celular, então cada pixel economizado aqui vale 3x. */
  .hero__fatos { gap: 8px 18px; margin-top: 16px; }
  .hero__fato  { max-width: none; }
  .hero__fato__marca { width: 34px; height: 34px; border-radius: 8px; }
  .hero__fato__marca svg { width: 17px; height: 17px; }

  .hero__lastro { margin-top: 10px; }
  .hero__conteudo .botao { margin-top: 16px; padding: 14px 28px; }
}

/* --------------------------------------------------------------------------
   Celular BAIXO (iPhone SE e Androids antigos: 375x667).
   --------------------------------------------------------------------------
   Aqui a conta é de ALTURA, não de largura — por isso o media query pergunta
   pela altura. O bloco tem altura quase fixa (é px), mas a cama navy da arte é
   uma FRAÇÃO da tela (52,8%): num aparelho de 667px ela vale 352px, contra
   445px num de 844. Aferido: sem esta regra o CTA descia até 60,3% e caía no
   laranja da arte — o único aparelho da lista que estourava.
   Comprimir aqui devolve o bloco para dentro da cama. O anel do .botao--solido
   continua sendo a rede se algum aparelho ainda mais baixo aparecer.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (max-height: 700px) {
  .hero__conteudo { padding-top: 62px; padding-bottom: 20px; }
  .hero__titulo { font-size: 21px; }
  .hero__sub { font-size: 13px; margin-top: 8px; }
  .hero__fatos { gap: 6px 14px; margin-top: 12px; }
  .hero__fato__marca { width: 30px; height: 30px; border-radius: 7px; }
  .hero__fato__marca svg { width: 15px; height: 15px; }
  .hero__fato__texto { font-size: 12px; }
  .hero__lastro { margin-top: 8px; }
  .hero__conteudo .botao { margin-top: 12px; padding: 12px 24px; font-size: 14px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 70px; }

  .nav { padding: 10px var(--gutter); }
  .nav__logo img { height: 30px; }
  .nav__link { display: none; }   /* chrome mínimo: no mobile sobra o CTA */

  /* Painéis de foto: no retrato, ancorar o texto na base com mais respiro.
     O hero está fora: lá o conteúdo vai para o topo (ver acima). */
  .painel:not(.hero) .painel__conteudo { padding-bottom: clamp(40px, 8vh, 72px); }

  /* A faixa continua em 3 colunas — nunca 2x2 (SDD §5.1). */
  .faixa__item { padding: 0 8px; }
  .faixa__rotulo { font-size: 12px; min-height: calc(12px * 1.35 * 2); }

  /* 2 colunas a 360px pedem card mais enxuto. */
  .cartao { padding: 20px 16px 18px; }
  .cartao__titulo { font-size: 15px; }
  .cartao__link { font-size: 13px; }

  .rodape__base { flex-direction: column; }
}

@media (max-width: 380px) {
  /* A 360px o rótulo "no Google · 52 avaliações" precisa de 3 linhas. */
  .faixa__rotulo { min-height: calc(12px * 1.35 * 3); }
  .marcas__lista { gap: 16px 22px; }
}

/* ==========================================================================
   19. MOVIMENTO REDUZIDO (SDD §9)
   --------------------------------------------------------------------------
   Com o hero virando foto, não há mais vídeo para impedir de tocar: sobrou o
   movimento de interface (reveal, hover, scroll suave), que zeramos aqui.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Sem movimento, o reveal não pode esconder conteúdo. */
  .reveal { opacity: 1; transform: none; }
  .cartao:hover { transform: none; }
  .cartao:hover .cartao__seta { transform: none; }
}