/* ==========================================================================
   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) — GRADE DE LOGOS EM P&B
   ==========================================================================
   ⚠️ NÃO EXISTE filter: grayscale() AQUI, E ISSO É DE PROPÓSITO.
   As logos já saem P&B do tools/baixa-logos.js (matte de tinta branca sobre
   transparente, croma zero). Um grayscale() no CSS seria filtro sobre filtro:
   zero pixel mudaria de cor e ainda criaria camada de composição em 35 imagens.
   O ÚNICO ajuste de tom aqui é `opacity`, e ele está calibrado abaixo.

   --------------------------------------------------------------------------
   CALIBRAGEM DE CONTRASTE — MEDIDA, não chutada (script em scratchpad).
   Todos os valores são sobre a cama da seção (--navy #081020):

     CTA laranja #F06008 ............ 5,77:1   ← O TETO. Nada nesta seção pode
                                                 passar disso, senão a grade
                                                 grita mais alto que o botão
                                                 que a página existe para
                                                 fazer a pessoa apertar.
     wordmark ANTIGO (alfa .62) ..... 7,62:1   ← 🔴 ERA O DEFEITO: a lista
                                                 provisória estava 32% MAIS
                                                 contrastada que o próprio CTA.
     logo (alfa .42) ................ 4,05:1   ✅ 70% do CTA. Acima do piso de
                                                 3:1 (perceptível), abaixo do
                                                 teto (não compete).
     wordmark (alfa .48) ............ 4,90:1   ✅ ver a nota em .marcas__wordmark
     rótulo da categoria (.55) ...... 6,20:1   ✅ texto 12px: AA exige 4,5:1
     nota de rodapé (.58) ........... 6,79:1   ✅ disclaimer TEM que ler
     abertura (.82) ................. 12,80:1  ✅

   Por que 35 logos a 4,05:1 não somam mais que 1 CTA a 5,77:1: o laranja é a
   única cor da página (o resto é branco sobre navy), e o SDD manda usá-la uma
   vez só — no CTA. A grade não tem cor nenhuma. Peso visual = área × contraste
   × cor, e a grade só disputa em área.
   ========================================================================== */
.marcas {
  background: var(--navy);
  padding: clamp(48px, 7vw, 80px) var(--gutter);
}

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

.marcas__abertura {
  max-width: 46ch;
  margin-bottom: clamp(32px, 4vw, 44px);
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);   /* 12,80:1 */
}

/* Um bloco por categoria. */
.marcas__grupos {
  display: grid;
  gap: clamp(30px, 4vw, 44px);
}

/* Rótulo da categoria.
   Branco a 55%, NÃO laranja: o SDD §5 manda "uma cor de destaque só, usada
   uma vez: no CTA". Nove rótulos laranja espalhariam o acento da página por
   toda a seção e o botão deixaria de ser o único ponto quente.
   Filete abaixo: separa a categoria da grade sem pedir mais um tom. */
.marcas__categoria {
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);   /* 6,20:1 — AA de sobra p/ 12px */
}

/* 4 POR LINHA no desktop (pedido do Marcio). */
.marcas__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* A caixa. Quase invisível de propósito: 1,087:1 de fundo e 1,28:1 de borda
   só materializam a célula e alinham logos de proporções muito diferentes
   (Würth é 320×37; LuK é 127×96). Caixa com presença viraria 39 retângulos
   disputando atenção com o CTA — que é exatamente o que não pode. */
.marcas__caixa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}

/* A logo.
   `max-width` + `max-height` juntos = COMPENSAÇÃO ÓPTICA, não só contenção.
   O gerador normalizou tudo para 96px de altura, o que faz wordmark comprido
   (Würth, Continental) parecer gigante ao lado de marca compacta (LuK, Gates).
   Limitando também a LARGURA, o wordmark comprido é freado pela largura e
   perde altura sozinho — que é como o olho equaliza logo de proporção
   diferente. Sem isso, a Würth vira o dobro da LuK na mesma linha. */
.marcas__logo {
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 32px;
  object-fit: contain;
  opacity: 0.42;   /* 4,05:1 sobre a caixa — 70% do CTA */
}

/* --------------------------------------------------------------------------
   CORREÇÃO DE TINTA — 3 arquivos que saíram do gerador com o matte FRACO.
   --------------------------------------------------------------------------
   Medi a tinta de cada um dos 35 arquivos (alfa do percentil 95 = o traço mais
   forte da logo). 32 chegam a alfa 255 e portanto rendem os 4,05:1 projetados.
   Estes três NÃO chegam — o alfa satura antes, então a mesma opacity: .42
   entrega menos contraste e a logo aparece lavada ao lado das vizinhas:

     visconde ... alfa 167 → 2,47:1  🔴 ABAIXO do piso de 3:1 (some no navy)
     sampel ..... alfa 214 → 3,24:1  🟠
     wega ....... alfa 219 → 3,33:1  🟠

   A conta do ajuste é direta: opacity = 0.42 × 255 / alfa_real. Isso iguala o
   TRAÇO MAIS FORTE de cada uma aos mesmos ~4,05:1 das outras 32.
   ⚠️ O número da opacity sobe, o resultado na tela NÃO: continua 4,05:1, ou
   seja continua abaixo do CTA (5,77:1). Opacity alta aqui não é logo mais
   gritante — é compensação de arquivo fraco.

   ⚠️ ISTO É REMENDO NO CSS. O conserto certo é no matte, em
   tools/baixa-logos.js (normalizar o alfa para 255 na exportação) — mas
   tools/ e assets/ não são meus. Ver relatório. Quando o arquivo for
   regerado com tinta cheia, ESTE BLOCO TEM QUE SAIR, senão as três ficam
   contrastadas DEMAIS e passam o CTA (visconde iria a ~6,7:1).
   -------------------------------------------------------------------------- */
.marcas__logo[src$="visconde.webp"] { opacity: 0.64; }   /* 167 → ~4,05:1 */
.marcas__logo[src$="sampel.webp"]   { opacity: 0.50; }   /* 214 → ~4,05:1 */
.marcas__logo[src$="wega.webp"]     { opacity: 0.49; }   /* 219 → ~4,05:1 */

/* Wordmark = marca cuja logo oficial NÃO foi encontrada (Axios, KS, INA,
   MG Mangueiras). O nome escrito não afirma nada além do nome; logo parecida
   ou logo da holding afirmaria a marca errada. Ver os comentários no HTML.

   ⚠️ Alfa .48 (4,90:1) e não .42 como as logos, por DOIS motivos que apontam
   pro mesmo lugar:
     1. A11y: isto é TEXTO, então vale a WCAG 1.4.3 — mínimo 4,5:1. Logo é
        imagem de logotipo, que é isenta. A .42 (4,05:1) o texto reprovaria.
     2. Óptica: haste de fonte é mais fina que traço de logo, então o mesmo
        alfa lê MAIS CLARO em texto. Subir para .48 iguala o peso aparente.
   Ou seja: o número sobe, a aparência empata. E 4,90:1 < 5,77:1 do CTA. */
.marcas__wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.48);   /* 4,90:1 */
}

/* Nota de rodapé da seção. 13px a 6,79:1 — legível, e isso é regra:
   o SDD §5.2.1 é explícito de que "disclaimer cinza 8px no rodapé não cura
   nada" (o CONAR pega engano por omissão). Se a grade insinua algo que a
   nota corrige, a nota tem que ser lida de verdade. */
.marcas__nota {
  margin-top: clamp(30px, 4vw, 40px);
  max-width: 76ch;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);   /* 6,79:1 */
}

/* ==========================================================================
   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);
}

/* A prosa da história em DUAS COLUNAS no desktop — só aqui, só acima de 1024px.
   POR QUÊ: o texto novo do cliente (17/07) são 5 parágrafos, não as 4 linhas
   curtas de antes. Com .prosa em 46ch (medida certa pra leitura, mantida), uma
   coluna só virava uma fita estreita de ~1400px de altura colada na esquerda,
   com metade da tela vazia — o ar que parecia proposital com texto curto vira
   desequilíbrio com texto longo.
   Duas colunas enchem os 940px do painel, mantêm ~45ch por coluna e derrubam a
   altura pela metade, então a história inteira cabe numa tela sem rolar.
   break-inside: avoid impede que um parágrafo seja partido no meio entre as
   colunas — sem isso o leitor perde a linha na virada.
   NO CELULAR NADA MUDA: lá o texto já preenche a largura e lê bem; duas colunas
   numa tela de 390px seriam ilegíveis. Por isso a media query, e não column-count
   solto com breakpoint implícito. */
@media (min-width: 1024px) {
  .painel--historia .prosa {
    max-width: none;
    column-count: 2;
    column-gap: 56px;
  }
  .painel--historia .prosa p { break-inside: avoid; }
  /* p+p ganha margem do .prosa; no topo de cada coluna ela sobraria e
     desalinharia as duas cabeças. */
  .painel--historia .prosa p:first-child { margin-top: 0; }
}

/* 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);
}

/* ==========================================================================
   12.1 DEPOIMENTOS — avaliações reais do Google
   ==========================================================================
   Entra entre História e Retrato: é a prova de terceiro encostada na
   afirmação que ela sustenta ("Isso não é sorte. É atendimento.").

   SUPERFÍCIE: --navy-alto, não --navy. A História é navy com brilho laranja;
   se os depoimentos fossem navy também, os dois blocos escuros colariam num
   bloco só e a citação pareceria continuação da prosa da loja — justamente o
   contrário do que a seção faz, que é MUDAR DE VOZ (a loja para o cliente).
   1,168:1 de separação é o mesmo degrau que o rodapé já usa.

   CONTRASTES MEDIDOS (sobre o cartão = branco .05 sobre --navy-alto):
     citação (branco puro) ...... 14,17:1
     nome do autor (.92) ........ 12,11:1
     fonte/data (.64) ........... 6,41:1   ✅ AA (precisa 4,5:1)
     lastro (.64 s/ navy-alto) .. 7,36:1
     link "Ver todas" (laranja) . 4,94:1   ✅ AA
   ========================================================================== */
.depoimentos {
  background: var(--navy-alto);
  padding: clamp(52px, 7vw, 84px) var(--gutter);
}

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

.depoimentos__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Cartão sóbrio: sem estrela desenhada, sem aspas gigantes de enfeite, sem
   foto de avatar. Numa página cujo argumento é "aqui ninguém te engana",
   decoração de prova social é contraproducente — quem precisa desenhar cinco
   estrelinhas está pedindo para o leitor duvidar. A prova é o texto ser de
   gente real, com nome, e a fonte estar linkada no rodapé da seção. */
.depoimento {
  display: flex;
  padding: clamp(20px, 2.6vw, 26px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.depoimento figure {
  display: flex;
  flex-direction: column;
  /* Empurra a assinatura para a base: com citações de tamanhos diferentes,
     os nomes alinham na mesma linha em vez de flutuar cada um numa altura. */
  justify-content: space-between;
  gap: 18px;
  height: 100%;
}

/* A citação. Peso 300 e corpo grande: é fala, não bloco de texto.
   As aspas curvas (“ ”) estão no HTML, não em ::before — elas fazem parte da
   citação, e conteúdo gerado por CSS some quando o CSS não carrega. */
.depoimento__texto p {
  font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--white);   /* 14,17:1 */
}

.depoimento__autor {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.depoimento__nome {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);   /* 12,11:1 */
}
/* "avaliação no Google · há tanto tempo". 12px a 6,41:1 — é o lastro da
   citação e tem que ser lido, mesma disciplina do "Nota do Google em jul/2026"
   que sustenta o 4,8 da faixa (SDD §5.1). Prova sem fonte não é prova. */
.depoimento__fonte {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.64);   /* 6,41:1 */
}

.depoimentos__lastro {
  margin-top: clamp(24px, 3vw, 32px);
  max-width: 82ch;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);   /* 7,36:1 */
}
.depoimentos__link {
  color: var(--orange);   /* 4,94:1 sobre --navy-alto — AA */
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao) ease;
}
.depoimentos__link:hover { border-bottom-color: var(--orange); }

/* ==========================================================================
   13. RETRATO (SDD §5.3)
   ========================================================================== */
/* REMOVIDO em 17/07 junto com a §8 RETRATO (a foto da Thaís saiu a pedido do
   Marcio). Eram as regras .painel--retrato, .painel__conteudo--canto e
   .retrato__estrofe — todas com ZERO uso no HTML depois da remoção (conferido
   classe por classe). CSS órfão não quebra nada, mas ninguém depois consegue
   saber se pode mexer.
   Se a foto nova aparecer um dia, o bloco inteiro (markup + estas regras) está
   no histórico do git. */

/* ==========================================================================
   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); }

/* --------------------------------------------------------------------------
   MAPA — cartão estático clicável (substitui o antigo link "Ver no mapa").
   --------------------------------------------------------------------------
   O Marcio pediu iframe do Google Maps; a justificativa completa de por que
   não está no index.html (resumo: o embed só funcionaria hoje porque a CSP do
   domínio está caída por regressão, e quebraria sozinho quando ela voltar).

   Este cartão faz o mesmo trabalho útil do embed — mostrar onde é e abrir o
   Maps — sem iframe, sem JS de terceiro e sem rastreamento.

   Fundo próprio (navy a 55% + blur): o cartão pousa sobre a FOTO da fachada,
   que é textura viva; sem cama, o texto brigaria com o telhado. Contrastes
   medidos com o navy como base (pior caso, já escurecido pelo scrim):
     rótulo (branco .92) ... 16,06:1
     ação (laranja) ........ 5,77:1
   -------------------------------------------------------------------------- */
/* Cartão de mapa: coluna (mapa em cima, endereço embaixo), não mais a pílula
   horizontal com ícone de pino ao lado. PEQUENO de propósito (pedido do Marcio,
   17/07) — 340px é o bastante para reconhecer o miolo de Pará de Minas e a
   avenida, sem competir com a foto da fachada, que é a dona desta seção.
   overflow:hidden faz a imagem respeitar o border-radius do cartão. */
/* flex (bloco), não inline-flex: sendo inline, o "Conheça nossa loja ↓" que vem
   logo depois se encaixava NA MESMA LINHA, boiando ao lado do cartão. Com a
   pílula antiga (54px de altura) isso passava despercebido; com o mapa (150px)
   ficava torto. O comentário do bloco no index.html sempre disse a intenção —
   "fica DEPOIS do mapa" — e agora o CSS obedece. */
.mapa-cartao {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 340px;
  margin-top: 22px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(var(--navy-rgb), 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  transition: border-color var(--transicao) ease,
              background var(--transicao) ease;
}
.mapa-cartao:hover,
.mapa-cartao:focus-visible {
  background: rgba(var(--navy-rgb), 0.72);
  border-color: var(--orange);
}

/* O mapa. width/height REAIS no <img> (960x420) reservam o espaço antes de
   baixar — zero layout shift; aqui ele é exibido a ~338px, ou seja quase 3x
   menos que a fonte: sobra resolução, nada estica.
   O pino não é mais ícone: está desenhado na imagem, na coordenada real que o
   tools/gera-mapa.js geocodificou. */
.mapa-cartao__mapa {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* O padding morava no .mapa-cartao, mas agora a imagem sangra até a borda do
   cartão — então o respiro do texto passou a ser daqui. */
.mapa-cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
}
.mapa-cartao__rotulo {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);   /* 16,06:1 */
}
.mapa-cartao__acao {
  font-size: 13px;
  font-weight: 500;
  color: var(--orange);   /* 5,77:1 */
}

/* ==========================================================================
   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;
}

/* EMPILHADO, não em colunas — é o formato que o cliente mandou no print.
   Saiu o `grid-template-columns: repeat(auto-fit, minmax(230px, 1fr))`, que
   espalhava os blocos em 3 colunas no desktop. O print mostra os 3 blocos um
   embaixo do outro, todos alinhados à esquerda, e é o que está aqui.
   `max-width` na medida de prosa: empilhado sem limite, a tagline atravessaria
   1400px de tela e viraria uma linha de 120 caracteres. */
.rodape__grade {
  display: grid;
  gap: clamp(30px, 4vw, 40px);
  justify-items: start;
  max-width: 60ch;
  padding-bottom: clamp(36px, 5vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* .rodape__marca removida em 17/07 junto com o <p> que ela pintava: era o nome
   "Pactual Auto Peças" em laranja, caixa alta, repetindo em texto o que a logo
   logo acima já mostra. Ver a nota no index.html, no bloco do rodapé.
   O respiro não se perdeu: a .rodape__tagline tem margin-top próprio. */

/* Corpo do bloco da marca. 0.72 = 8,94:1 sobre o rodapé — "cinza claro" como
   o print pede, e com folga sobre o mínimo AA de 4,5:1.
   ⚠️ Era 0.55 (5,78:1): passava, mas o print do cliente mostra a tagline com
   o MESMO peso visual da cidade, e 0.55 a deixava mais apagada que o resto. */
.rodape__tagline {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);   /* 8,94:1 ✅ AA */
}

.rodape__cidade {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);   /* 8,94:1 ✅ AA */
}

/* HORÁRIO / CONTATO: laranja, caixa alta, menores que a marca — o print.
   ⚠️ Passaram de branco 0.52 para laranja: 4,94:1 sobre #141F3C. Passa AA
   (4,5:1) mas por MARGEM CURTA — 12px/600 não é "texto grande" para o WCAG
   (grande = 18,66px bold ou 24px), então o alvo é 4,5 mesmo, e não 3:1.
   Não escurecer o rodapé nem clarear o laranja sem re-aferir: a folga aqui
   é de 0,44 e some rápido. */
.rodape__titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);   /* 4,94:1 ✅ AA — margem curta, ver nota */
  margin-bottom: 14px;
}

.rodape__linha {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);   /* 8,94:1 ✅ AA */
}
.rodape__linha + .rodape__linha { margin-top: 8px; }
.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); }

/* O link do WhatsApp é o único CTA do rodapé, então ganha o sublinhado mais
   firme — mas continua sendo texto, não botão: botão verde aqui brigaria com
   o CTA da Promessa (§5.4), que é o que fatura.
   Seletor com o <a> junto (a.rodape__zap, não só .rodape__zap) para empatar
   em especificidade com `.rodape__linha a` (0,1,1) e ganhar na ordem, que é
   a de origem — sem precisar de !important. */
a.rodape__zap { border-bottom-color: rgba(255, 255, 255, 0.5); }

.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); }

/* ==========================================================================
   16.1 ÁLBUM "Conheça nossa loja" + FOTO AMPLIADA (:target)
   --------------------------------------------------------------------------
   POR QUE :target E NÃO JAVASCRIPT — a escolha, e o que ela custa.

   Restrição real: o SDD §8 exige CSP-safe (zero script inline, zero
   biblioteca externa) e o js/app.js NÃO é deste dono. Sobraram três saídas:

     1. <a href="foto-full.webp" target="_blank">  → simples, mas joga o
        visitante para FORA da página, numa aba com um .webp cru e fundo
        branco. Numa página cujo CTA é a conversa, tirar a pessoa da página
        para ver uma foto do estoque é pagar caro por pouco.
     2. checkbox-hack → o gatilho vira <label>, que não é focável por
        teclado; para consertar precisaria de tabindex + role="button" à mão,
        e ainda assim o "voltar" do celular não fecha.
     3. :target → ESCOLHIDA. O gatilho já é <a href="#id">: focável, anunciado
        e operável por teclado DE GRAÇA, sem um atributo de remendo. E o
        botão "voltar" do navegador/celular fecha a foto, que é exatamente o
        gesto que todo mundo já tenta.

   O QUE ESTA ESCOLHA NÃO ENTREGA (dito às claras, não escondido):
     · Esc não fecha — não existe tecla sem JS. Mitigado: "Fechar" visível,
       fundo inteiro clicável e o "voltar" do navegador funcionando.
     · Não há focus trap: com a foto aberta, o Tab continua andando pela
       página atrás. É a limitação honesta do CSS puro; por isso o quadro é
       role="dialog" SEM aria-modal="true" — mentir que é modal para o leitor
       de tela seria pior que não ser modal.
     · Cada abertura empilha uma entrada no histórico.
   Se um dia o dono do js/ quiser, dá para progressivamente melhorar (Esc +
   trap) SEM tocar neste CSS — o markup já está pronto para isso.
   ========================================================================== */
.album {
  background: var(--navy);
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(56px, 7vw, 88px);
}

.album__intro {
  max-width: var(--max-prosa);
  margin-bottom: clamp(26px, 3vw, 34px);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);   /* 7,61:1 sobre o navy ✅ AA */
}

/* 3 colunas fixas = 3x3 exato, porque são 9 fotos. Pedido do Marcio, e ele tem
   razão: o auto-fill que estava aqui deixava a grade escolher as colunas pelo
   espaço, e num monitor de 1920 cabiam OITO faixas de 190px — as 9 fotos saíam
   como 8 + 1 sozinha na segunda linha. Com 9 fotos, 3x3 é a única disposição que
   fecha; e é a mesma leitura de grade que todo mundo já tem do Instagram,
   inclusive no celular. Sem media query: 3 em qualquer largura, de propósito. */
.album__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.album__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  /* O fundo evita o buraco branco enquanto a thumb (lazy) não chega. */
  background: var(--navy-alto);
}

/* aspect-ratio 1:1 + object-fit: cover — mantidos como rede de segurança, mas
   hoje eles não recortam mais nada: as thumbs JÁ são 600x600 no disco
   (tools/quadra-album.js). Antes elas eram 600xN, e num cover quem manda é o
   LADO CURTO — as três fotos de paisagem (600x338) entregavam só 338px para o
   quadrado. Passava despercebido enquanto a grade abria 8 colunas (212px por
   foto); em 3x3 cada foto vai a ~585px e 338 esticado 1,7x apareceria. O
   recorte agora é feito uma vez, na build, com o MESMO enquadramento central
   que o cover fazia — a foto é a mesma, só deixou de ser esticada.
   O <img> mantém width/height REAIS (600x600, medidos no disco, não copiados do
   album.json — lá o w/h é o da foto CHEIA) para o navegador reservar o espaço
   antes de baixar: zero layout shift. */
.album__thumb {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--transicao) ease, opacity var(--transicao) ease;
}
.album__link:hover .album__thumb,
.album__link:focus-visible .album__thumb { transform: scale(1.04); opacity: 0.82; }

/* Lupa: dá o affordance de "isto amplia". aria-hidden — quem usa leitor de
   tela já recebe o alt real da foto no <img>, e "lupa" não acrescenta nada. */
.album__lupa {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--scrim-rgb), 0.72);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--transicao) ease;
}
.album__lupa svg { width: 16px; height: 16px; }
.album__link:hover .album__lupa,
.album__link:focus-visible .album__lupa { opacity: 1; }

/* CTA "Conheça nossa loja" dentro do painel A loja (§10). */
.loja__album-cta {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 3px;
}
.loja__album-cta:hover { border-bottom-color: var(--white); }

/* ---------- A foto ampliada ---------- */
/* ⚠️ FLEX-COLUNA COM ALTURA DEFINIDA — e isso é correção de bug, não gosto.
   A 1ª versão era `display:grid; place-items:center`, que dimensiona o item
   pelo CONTEÚDO. Como a foto grande é background-image, ela NÃO TEM conteúdo
   nem tamanho intrínseco: o .lightbox__foto (flex:1 dentro de um quadro
   auto-sized) resolvia para ALTURA 0. Ou seja, a foto ampliada abria
   mostrando só a legenda — sem foto. Medido no navegador a 360px:
   foto = {w:335, h:0}. Aqui o .lightbox é flex-coluna de altura fixa (inset:0)
   e o quadro leva flex:1, então a altura chega definida lá embaixo e o
   flex:1 da foto tem de onde crescer.
   O padding-top maior abre a faixa onde mora o "Fechar". */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(54px, 8vh, 74px) clamp(12px, 3vw, 28px) clamp(16px, 3vw, 28px);
}
/* Só existe quando chamada pelo #hash. display:none é o que segura o peso:
   ver a nota do .lightbox__foto. */
.lightbox:target { display: flex; }

/* Fundo clicável = fechar. tabindex="-1" no HTML: ele NÃO deve ser uma
   parada de Tab (seria uma parada invisível e sem rótulo útil); quem navega
   por teclado fecha pelo botão "Fechar", que é um <a> de verdade. */
.lightbox__fundo {
  position: absolute;
  inset: 0;
  background: rgba(var(--scrim-rgb), 0.94);
}

/* flex:1 + min-height:0 = "ocupe toda a altura que sobrou, e pode encolher".
   É este flex:1 que dá altura DEFINIDA para o flex:1 da foto lá dentro.
   Sem o min-height:0 o conteúdo empurraria o quadro para fora da tela. */
.lightbox__quadro {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  width: min(1100px, 100%);
  min-height: 0;
  margin: 0;
}

/* ⚠️ A FOTO GRANDE É BACKGROUND-IMAGE, NÃO <img> — e isto é o que segura o
   peso da página, não preferência de estilo.
   Um <img loading="lazy"> dentro de um lightbox escondido tem comportamento
   QUE VARIA ENTRE NAVEGADORES: parte deles baixa mesmo assim, e aí a página
   carregaria os 9 arquivos "-full" (~2,2 MB) que ninguém pediu — mais que a
   página inteira, que hoje tem 1,7 MB (SDD §6), e adeus Lighthouse ≥90 do
   §10.4. Já background-image de elemento com display:none NÃO é baixado por
   navegador nenhum: é regra estável. Cada foto cheia só é buscada no clique
   que a abre.
   O custo: background não tem alt. Por isso o <div> leva role="img" +
   aria-label com o MESMO alt do album.json, e a legenda visível repete o
   texto embaixo. As URLs de cada foto ficam no fim deste bloco.
   Os caminhos são relativos a css/ — daí o "../". */
.lightbox__foto {
  flex: 1;
  min-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;   /* contain, nunca cover: recortar a foto do
                                 estoque na ampliação é esconder justamente o
                                 que a pessoa clicou para ver. */
}

.lightbox__legenda {
  flex: none;
  max-width: var(--max-prosa);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);   /* sobre o scrim quase opaco: >9:1 ✅ */
}
.lightbox__contagem {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.lightbox__fechar,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--white);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  transition: background var(--transicao) ease;
}
.lightbox__fechar:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }

/* Afastado da borda: `top:0; right:0` colava o botão no canto exato da tela
   (medido: y=0 e borda direita em 360px, sem respiro) — e em celular com
   canto arredondado/notch é onde o dedo não alcança bem. */
.lightbox__fechar {
  top: clamp(12px, 2.4vh, 20px);
  right: clamp(12px, 3vw, 28px);
  gap: 6px;
  grid-auto-flow: column;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* 44px = alvo de toque mínimo. */
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 20px;
}
.lightbox__nav--ant  { left: clamp(6px, 1.5vw, 18px); }
.lightbox__nav--prox { right: clamp(6px, 1.5vw, 18px); }

/* No celular as setas em cima da foto virariam obstáculo: descem para a base.
   O padding-bottom do .lightbox abre a faixa onde elas ficam, senão cobririam
   a legenda. */
@media (max-width: 640px) {
  .lightbox { padding-bottom: 68px; }
  .lightbox__nav { top: auto; bottom: 14px; transform: none; }
}

/* Movimento: o :focus-visible global (linha ~169) já dá o anel amarelo nos
   links do álbum e do lightbox, então não há foco a redefinir aqui.
   prefers-reduced-motion também já é tratado globalmente (§ no fim do
   arquivo), que zera transition-duration de tudo — inclusive do zoom da
   thumb e do fade da lupa. Não repito a regra aqui para não haver duas
   fontes da verdade. A ABERTURA da foto não é animada de propósito: é troca
   de :target, aparece instantânea, e isso é bom para quem pediu menos
   movimento. */

/* URLs das fotos cheias — GERADO a partir de assets/loja/album.json
   (scratchpad/gera-album.js). Se o álbum mudar, regerar; não editar à mão. */
.lightbox__foto--fachada-movimento { background-image: url("../assets/loja/fachada-movimento-full.webp"); }
.lightbox__foto--balcao { background-image: url("../assets/loja/balcao-full.webp"); }
.lightbox__foto--palhetas { background-image: url("../assets/loja/palhetas-full.webp"); }
.lightbox__foto--oleos { background-image: url("../assets/loja/oleos-full.webp"); }
.lightbox__foto--amortecedores { background-image: url("../assets/loja/amortecedores-full.webp"); }
.lightbox__foto--gavetas-a { background-image: url("../assets/loja/gavetas-a-full.webp"); }
.lightbox__foto--pecas-pequenas { background-image: url("../assets/loja/pecas-pequenas-full.webp"); }
.lightbox__foto--gavetas-m { background-image: url("../assets/loja/gavetas-m-full.webp"); }
.lightbox__foto--caixas-estoque { background-image: url("../assets/loja/caixas-estoque-full.webp"); }

/* ==========================================================================
   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; }

  /* ---- MARCAS: 4/linha vira 2/linha (pedido do Marcio) ----
     A 390px, 4 colunas dariam ~78px úteis por caixa e a Würth (8,6:1 de
     proporção) ficaria com ~7px de altura — ilegível. Com 2 colunas sobra
     ~160px e a mesma Würth lê. Logo que não lê não é logo, é sujeira. */
  .marcas__grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .marcas__caixa { min-height: 64px; padding: 10px; }
  .marcas__logo { max-height: 28px; max-width: 86%; }
  .marcas__wordmark { font-size: 14px; }

  /* ---- DEPOIMENTOS: 2 colunas viram 1 ----
     Citação em coluna de ~170px quebraria em 2 palavras por linha. */
  .depoimentos__lista { grid-template-columns: 1fr; }
  .depoimento figure { gap: 14px; }

  /* ---- MAPA: o cartão ocupa a largura toda ----
     inline-flex encolhido no celular vira um alvo de toque estreito demais;
     esticando, o alvo passa dos 44px em toda a linha. */
  .mapa-cartao { display: flex; width: 100%; }
}

/* --------------------------------------------------------------------------
   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); }

  /* A regra antiga daqui era `.marcas__lista { gap: 16px 22px }` — a lista
     tipográfica não existe mais (virou grade de logos). O aperto equivalente
     agora é na grade. Mantidas 2 colunas: a 360px, 1 coluna faria a seção ter
     20 telas de altura, e o SDD manda cortar bloco inteiro antes de deixar a
     página virar rolagem infinita no celular. */
  .marcas__grade { gap: 8px; }
  .marcas__caixa { min-height: 58px; padding: 8px; }
  .marcas__logo { max-height: 24px; max-width: 88%; }
  .marcas__wordmark { font-size: 13px; }
}

/* ==========================================================================
   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; }
}