/* estilo.css — CSS de página do Radar de Carros. Só o que NÃO se repete entre produtos: o
   que se repete já está em app.css (vendorado). Veste o tema "garagem" (tema.css). Regra de
   sempre: nenhuma cor literal — só var(--token). */

:root{
  --serif-num:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* altura do .topo fixo (medida no Playwright em 11/09/2026: 63px no desktop, 67px com o botão
     de menu do celular). Coluna sticky e âncora de seção somam isto, senão o topo cobre o
     começo delas. */
  --altura-topo:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0}
.app{min-height:100vh;display:flex;flex-direction:column}

/* ── topo ─────────────────────────────────────────────────────────────────── */
/* Fixo ao rolar (pedido do Bruno 11/09/2026: "o menu superior precisa ficar fixo quando
   desce", reparado em /analises e /comparar). z-index 50: acima do conteúdo normal e do
   dropdown de autocomplete (20), abaixo do modal de alerta (60) e da folha de menu mobile
   (70) — nunca por cima deles. `.indice-lateral`/`.avanalise-nav` (comparacoes.css,
   oportunidades.css, analises.css) somam a altura do topo ao próprio `top` sticky, senão o
   header por cima escondia o começo da coluna quando ela gruda no topo da viewport. */
.topo{border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:50}
.topo-linha{max-width:var(--maxw);margin:0 auto;padding:12px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:10px 16px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);
  font-weight:800;font-size:17px;letter-spacing:-.01em}
.marca:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.marca svg{flex:none;width:26px;height:26px}
.marca b{color:var(--accent)}
/* Menu do v8 (15/09/2026): quatro pílulas. O item ativo é a pílula "acesa" (fundo da cor do
   texto), que muda forma e contraste juntos, não só o tom. */
.topo-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.topo-nav a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:99px;border:1px solid transparent;white-space:nowrap;
  transition:color .15s,border-color .15s}
.topo-nav a:hover{color:var(--text);border-color:var(--line)}
.topo-nav a:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.topo-nav a.nav-ativo{color:var(--bg);background:var(--text);border-color:var(--text)}
.topo-fonte{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}

.topo-menu-btn{display:none;appearance:none;border:1.5px solid var(--line2);background:var(--surface);
  color:var(--text);width:38px;height:38px;border-radius:var(--radius-sm);cursor:pointer;
  align-items:center;justify-content:center}
.topo-menu-btn svg{width:19px;height:19px}
.topo-menu-btn:hover{border-color:var(--accent);color:var(--accent)}
.topo-menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── folha de menu (mobile) ───────────────────────────────────────────────── */
.folha-menu{position:fixed;inset:0;z-index:70}
.folha-menu[hidden]{display:none}
.folha-menu-fundo{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent)}
.folha-menu-caixa{position:absolute;top:0;right:0;bottom:0;width:min(78vw,320px);
  background:var(--surface);box-shadow:var(--shadow);padding:22px 20px;
  display:flex;flex-direction:column;gap:4px}
.folha-menu-fechar{align-self:flex-end;width:32px;height:32px;border-radius:50%;border:0;
  background:var(--surface2);color:var(--text2);cursor:pointer;font-size:17px;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.folha-menu-fechar:hover{background:var(--line2)}
.folha-menu-nav{display:flex;flex-direction:column;gap:2px}
.folha-menu-nav a{color:var(--text);text-decoration:none;font-size:16px;font-weight:700;
  padding:13px 8px;border-radius:var(--radius-sm);border-bottom:1px solid var(--line)}
.folha-menu-nav a:hover{background:var(--surface2)}
.folha-menu-nav a.nav-ativo{color:var(--accent)}

main{flex:1}

/* ── botão primário de página (a biblioteca não traz CTA; nasce aqui) ──────── */
.btn{appearance:none;border:1.5px solid transparent;border-radius:var(--radius-sm);
  font:inherit;font-weight:800;font-size:14px;padding:11px 18px;cursor:pointer;
  /* <a class="btn"> herdava o sublinhado de link (achado do Bruno no CTA da análise, 11/09) */
  text-decoration:none;line-height:1.3;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);transition:filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn.fantasma{background:transparent;color:var(--accent);border-color:var(--line2)}
.btn.fantasma:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn.pequeno{padding:8px 13px;font-size:13px}
.btn.largo{width:100%}

/* ── hero de busca ────────────────────────────────────────────────────────── */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero-miolo{max-width:720px;margin:0 auto;padding:48px 18px 40px;text-align:left}
.hero h1{font-size:clamp(26px,4.4vw,38px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;margin:0 0 10px;color:var(--text)}
.hero p.sub{font-size:15.5px;color:var(--text2);margin:0 0 24px;max-width:56ch;line-height:1.5}

.busca-caixa{position:relative}
.busca-linha{display:flex;align-items:flex-end;gap:8px;background:var(--surface);
  border:2px solid var(--line2);border-radius:16px;padding:10px 10px 10px 16px;
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.busca-linha:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.busca-campo{flex:1;border:0;background:transparent;resize:none;outline:none;
  font:inherit;font-size:16.5px;line-height:1.4;color:var(--text);padding:8px 0;
  max-height:140px;min-height:28px;font-family:inherit}
.busca-campo::placeholder{color:var(--muted)}
.btn-mic{flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line2);
  background:var(--surface2);color:var(--text2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-mic:hover{border-color:var(--accent);color:var(--accent)}
.btn-mic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-mic svg{width:19px;height:19px}
.btn-mic.ouvindo{background:var(--bad);border-color:var(--bad);color:var(--accent-ink);
  animation:pulso-mic 1.4s ease-in-out infinite}
.btn-mic[hidden]{display:none}
.btn-buscar{flex:none}
@keyframes pulso-mic{0%,100%{box-shadow:0 0 0 0 var(--bad-soft)}50%{box-shadow:0 0 0 8px transparent}}

.ouvindo-aviso{margin-top:9px;font-size:12.5px;color:var(--bad);font-weight:700;
  display:flex;align-items:center;gap:6px}
.ouvindo-aviso i{width:7px;height:7px;border-radius:50%;background:var(--bad);
  animation:pisca 1s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}

.autocomplete{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  z-index:20;max-height:320px;overflow-y:auto;padding:6px}
.autocomplete[hidden]{display:none}
.autocomplete-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.autocomplete-item .n{color:var(--muted);font-size:12px;font-family:var(--serif-num)}
.autocomplete-item:hover,.autocomplete-item[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}

.exemplos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.exemplo{appearance:none;border:1.5px solid var(--line2);background:var(--surface);
  color:var(--text2);border-radius:99px;padding:7px 13px 7px 11px;font-size:12.5px;font-weight:600;
  cursor:pointer;font:inherit;transition:border-color .15s,color .15s;
  display:inline-flex;align-items:center;gap:6px}
.exemplo svg{width:13px;height:13px;flex:none;opacity:.65}
.exemplo:hover{border-color:var(--accent);color:var(--accent)}
.exemplo:hover svg{opacity:1}
.exemplo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── sugestões ────────────────────────────────────────────────────────────── */
.bloco{max-width:var(--maxw);margin:0 auto;padding:26px 18px}
.bloco h2{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 3px}
.bloco .resposta-ia{font-size:14px;color:var(--text2);margin:0 0 16px;max-width:66ch;line-height:1.55}
/* Home inteira usa a mesma coluna estreita do hero (720px): sem isto, "Como funciona"
   e blocos de texto abriam na largura cheia de --maxw (1180px) e pareciam desalinhados
   à esquerda embaixo de um hero centralizado e estreito. `.bloco-largo` (grade de cartões:
   Modelos no radar, Abaixo da FIPE hoje) usa a largura cheia de propósito. */
#viewHome .bloco{max-width:720px}
#viewHome .bloco.bloco-largo{max-width:var(--maxw)}
.bloco-cabecalho{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* QA de celular 15/09: "ver todos" media 79×20px — abaixo do alvo de toque de 24px do WCAG
   2.5.8, e é link solto num cabeçalho de seção, não link no meio de uma frase (que seria a
   exceção da regra). O texto não muda de tamanho; cresce a área que recebe o dedo. */
.ver-todos{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;
  color:var(--accent);text-decoration:none;min-height:24px;padding:2px 0}
.ver-todos svg{width:13px;height:13px;transition:transform .15s}
.ver-todos:hover svg{transform:translateX(3px)}
.sugestoes-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.sugestao{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px 15px;display:flex;flex-direction:column;gap:8px}
.sugestao h3{margin:0;font-size:15.5px;font-weight:800;color:var(--text)}
.sugestao .motivo{font-size:13px;color:var(--text2);line-height:1.4;flex:1}
.sugestao .meta{font-size:12px;color:var(--muted);font-family:var(--serif-num)}
.sugestao .btn{margin-top:2px}
.carregando{font-size:13.5px;color:var(--muted);padding:6px 0}

/* ── faixa viva: 4 KPIs logo abaixo do hero (decisão do Bruno 09/09) — reaproveita
   .kpis/.kpi de app.css (mesmo componente da página de modelo). Mesma largura do
   hero-miolo, pra ler como continuação dele, não como um bloco novo. ─────────────── */
#faixaViva{max-width:720px}
/* 4 colunas explícitas, não `auto-fit`. O `.kpis` de app.css pede 170px de mínimo por tile e,
   dentro dos 720px do hero (684px úteis, menos 36px de gap), só cabiam TRÊS: o quarto tile
   caía sozinho numa segunda linha, com um vão largo ao lado (visto na home de 10/09/2026).
   Aqui os quatro números são curtos, então a coluna estreita não aperta nada. Abaixo de 640px
   viram 2×2, que é o par mais legível no celular. */
.kpis-viva{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis-viva .valor{font-size:28px}
.kpis-viva .chip-delta{margin-left:2px}
@media (max-width:640px){ .kpis-viva{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── destaques de hoje: os 3 melhores anúncios do dia (decisão do Bruno 09/09) ──────── */
.destaques-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.destaque{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,border-color .15s,transform .15s}
.destaque:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.destaque-selo-parceiro{position:absolute;top:10px;left:10px;z-index:1}
.destaque-foto{aspect-ratio:16/10;object-fit:cover;width:100%;display:block;background:var(--surface2)}
.destaque-foto-vazia{aspect-ratio:16/10;background:var(--surface2)}
/* Linhas alinhadas entre os três cartões (10/09/2026): o nome do modelo ocupa 1 ou 2 linhas
   conforme o tamanho da versão ("250 Tsi 1.4" x "R-Line 350 Tsi 2.0 4x4"), e sem reservar a
   altura das duas o preço de um cartão ficava na altura da ficha do vizinho. Grade de linhas
   fixas resolve sem cortar texto: o título ganha as duas linhas sempre, o resto desce igual. */
.destaque-corpo{padding:13px 14px 14px;display:grid;grid-template-rows:auto auto auto auto;gap:8px;align-content:start}
/* `line-height` explícito é o que faz o `min-height` casar: herdando o 1.5 do corpo, uma linha
   media 22,5px e duas 45px, enquanto o piso de 2,6em dava 39px — sobrava 6px de desencontro
   entre um cartão de título curto e um de título longo. Com 1.3, duas linhas = 39px = o piso. */
.destaque-titulo{font-size:15px;font-weight:800;color:var(--text);line-height:1.3;min-height:2.6em}
.destaque-versao{font-weight:600;color:var(--text2);font-size:13px}
.destaque-preco-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.destaque-preco{font-size:20px;font-weight:800;letter-spacing:-.02em;font-family:var(--serif-num);color:var(--text)}
.destaque-ficha{display:flex;gap:10px;font-size:12.5px;color:var(--text2);font-family:var(--serif-num)}
.destaque-corpo .ver-portal{align-self:flex-start;margin-top:2px}

/* ── modelos no radar: cartão enxuto (decisão do Bruno 09/09, versão III) — foto pequena
   à esquerda (some no mobile), nome, contagem, faixa de preço por extenso, chips curtos.
   docs/CONTRATO.md §"Modelos no radar" — a MESMA marcação (lib.js::construirCardModelo)
   nasce no SSR da home e no render do cliente. Grade de 4 colunas no desktop. ────────── */
.modelos-busca{margin-bottom:12px}
.modelos-busca input{width:100%;max-width:420px;border:1.5px solid var(--line2);border-radius:var(--radius-sm);
  padding:10px 13px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);outline:none;
  transition:border-color .15s}
.modelos-busca input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.modelos-grade-rica{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.modelo-rico{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:row;align-items:stretch;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:box-shadow .15s,border-color .15s,transform .15s}
.modelo-rico[hidden]{display:none}
.modelo-rico:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.modelo-rico:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modelo-capa{flex:none;width:76px;background:var(--surface2)}
.modelo-foto{width:100%;height:100%;object-fit:cover;display:block}
.modelo-foto-vazia{width:100%;height:100%;background:
    linear-gradient(135deg,var(--surface2) 25%,transparent 25%) -8px 0/16px 16px,
    linear-gradient(135deg,transparent 75%,var(--surface2) 75%) -8px 0/16px 16px,var(--surface)}
.modelo-corpo{padding:10px 12px 11px;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.modelo-nome-card{margin:0;font-size:13.5px;font-weight:800;color:var(--text);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modelo-ativos{margin:0;font-size:11.5px;color:var(--muted);font-family:var(--serif-num)}
.faixa-preco{display:flex;flex-direction:column;gap:1px}
/* sem nowrap/ellipsis de propósito: o Bruno pediu os TRÊS valores (mín·mediana·máx)
   sempre visíveis — no cartão de 4 colunas cortar o terceiro valor com "…" escondia
   justamente o dado mais importante (o máx). Quebra em 2 linhas quando não cabe. */
.faixa-preco-valores{margin:0;font-size:11px;font-weight:700;color:var(--text2);
  font-family:var(--serif-num);line-height:1.35}
.faixa-preco-legenda-txt{margin:0;font-size:10px;color:var(--muted)}
.modelo-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.modelo-chips .tag{font-size:9.5px;padding:2px 7px}

/* ── "Abaixo da FIPE hoje" na home: reaproveita .grade-anuncios/.anuncio da página de
   modelo (docs/CONTRATO.md item 4) — só uma fileira mais curta. ──────────────────── */
.grade-anuncios-home{max-width:none;padding:0;margin:0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ── como funciona: 3 passos com ícone (docs/CONTRATO.md item 6) ──────────────────── */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:14px 0 18px}
.passo{display:flex;flex-direction:column;gap:8px}
.passo-icone{width:30px;height:30px;color:var(--accent)}
.passo h3{margin:0;font-size:14.5px;font-weight:800;color:var(--text)}
.passo p{margin:0;font-size:13px;color:var(--text2);line-height:1.5}

/* ── modelo: cabeçalho ────────────────────────────────────────────────────── */
.modelo-topo{max-width:var(--maxw);margin:0 auto;padding:22px 18px 0}
.voltar{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text2);
  text-decoration:none;font-weight:600;margin-bottom:10px}
.voltar:hover{color:var(--accent)}
/* C17a (15/09/2026): deitado, o mesmo raciocínio do celular em pé (o link some porque o nome
   do carro já abre a troca), agora porque a altura é o recurso caro e a legenda tem de caber
   na primeira tela (A4). A faixa é a mesma de painel.css: paisagem baixa e tablet deitado. */
@media (orientation:landscape) and (max-height:540px) and (min-width:620px),
       (orientation:landscape) and (min-width:1000px) and (max-width:1200px){
  .modelo-topo{padding-top:10px}
  .voltar{display:none}
  /* mesma troca de ordem do celular em pé, pelo mesmo motivo (A4): a legenda sobe para logo
     abaixo do mapa e a placa de leitura vai depois dela. Medido a 844×390, a placa no meio
     jogava a legenda 111px para fora da primeira tela. public/app.js lê esta mesma faixa em
     FAIXA_DEITADO para medir a dobra pela legenda, e não pelo par placa+legenda. */
  #rpAbaixoMapa > .rp-legenda{order:1}
  #rpAbaixoMapa > .placa-leitura{order:2;margin-top:12px}
}
.modelo-nome{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 4px}
.modelo-sub{font-size:13.5px;color:var(--muted);margin:0 0 10px}

/* Orçamento da primeira dobra no celular (regra do Bruno: em todo aparelho a primeira tela
   termina na legenda do mapa). A 360x640 sobram 640px para topo + título + console + mapa +
   legenda; cada linha aqui foi medida antes de ser cortada. */
@media (max-width:620px){
  .modelo-topo{padding-top:8px}
  /* A4: a primeira tela do celular termina na legenda do mapa. O menu passou a ocupar duas
     linhas (quatro pílulas sempre à vista), e o link "buscar outro carro" ficou redundante:
     o próprio nome do carro no cabeçalho abre a troca (C5). Some, e a legenda cabe de novo. */
  .voltar{display:none}
  .modelo-nome{margin-bottom:2px}
  .modelo-sub{margin-bottom:6px}
  .stat-linha{margin:4px 0 6px;font-size:13px}
}

/* ── ação principal do rodapé da lista ─────────────────────────────────────────────── */
.btn-alerta-principal{margin-top:14px}
.btn-alerta-principal svg{width:17px;height:17px;flex:none}

/* 14/09/2026 — o painel de chips (Versão · Ano · Estado) dentro de um <details>, o SVG do
   gráfico e o rótulo da zona de garimpo desenhado DENTRO dele saíram daqui: viraram o
   console e o mapa em canvas de public/painel.css + public/painel.js. Morreram com eles
   três reprovações do portão visual de 14/09: o rótulo a 4,8px de altura no celular (o SVG
   tinha viewBox fixo e a fonte encolhia junto), a caixa de fundo do rótulo dimensionada por
   contagem de caractere (vazava em 100% dos estados medidos) e a barra de chips de 511px de
   altura numa tela de 640. `.grafico-caixa`, `.malha`, `.eixo-rot` e `.eixo-titulo` FICAM:
   /comparar e /analises desenham SVG server-side e usam essas classes. */
.grafico-caixa{position:relative}
.malha{stroke:var(--line);stroke-width:1}
/* fonte do sistema, não a monoespaçada de dado de código (regra do Design System:
   mono é só pra código) — tabular-nums já alinha o dígito sem precisar de fonte de grade. */
.eixo-rot{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.eixo-titulo{font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
/* .legenda-fontes continua aqui porque /comparar e /analises a usam (o gráfico SVG
   server-side daquelas páginas). Na página de modelo quem legenda agora é .rp-legenda. */
.legenda-fontes{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--text2)}
.legenda-fontes span{display:inline-flex;align-items:center;gap:5px}
.legenda-fontes i{width:10px;height:10px;border-radius:50%;display:inline-block}
.legenda-fontes i.anel{background:var(--surface);border:2px solid var(--text)}

.dica-flutuante{position:fixed;z-index:40;pointer-events:none;background:var(--text);
  color:var(--bg);border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.5;
  box-shadow:var(--shadow);opacity:0;transition:opacity .12s;max-width:220px;
  display:flex;flex-direction:column;gap:1px}
.dica-flutuante b{font-size:14px;font-family:var(--serif-num)}
.dica-flutuante span{opacity:.85}
.dica-flutuante.mostra{opacity:1}
/* mobile (sem hover): o toque FIXA o tooltip com um link de verdade dentro — precisa
   receber clique, ao contrário do tooltip de hover do desktop (que só acompanha o mouse). */
.dica-flutuante.interativa{pointer-events:auto}
.dica-flutuante-link{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-size:12.5px;font-weight:800;color:var(--bg);text-decoration:none;
  background:var(--accent);border-radius:99px;padding:6px 11px;width:fit-content}
.dica-flutuante-link svg{width:11px;height:11px}
.dica-flutuante-x{display:none}

/* QA de celular de 15/09/2026. No toque o balão era estacionado no canto de cima do mapa: um
   cartão CLARO (a inversão `background:var(--text)` vira quase branco no tema escuro do v8)
   de 136px de altura sobre um mapa de 197px — cobria 54% do gráfico, medido, e escondia o
   ponto que a pessoa tinha acabado de tocar. Vira faixa no pé da tela, na cor do app, com ×
   de fechar: o mapa inteiro fica à vista enquanto ela lê o anúncio. Só no toque
   (`.interativa`); o tooltip que acompanha o mouse no computador não entra aqui. */
@media (hover:none){
  .dica-flutuante.interativa{
    left:0;right:0;top:auto;bottom:0;max-width:none;width:auto;
    border-radius:14px 14px 0 0;border:1px solid var(--line);border-bottom:0;
    background:var(--surface);color:var(--text);
    padding:14px 52px 16px 18px;font-size:13px;gap:2px}
  .dica-flutuante.interativa b{font-size:20px;color:var(--text)}
  .dica-flutuante.interativa span{color:var(--text2);opacity:1}
  .dica-flutuante.interativa .dica-flutuante-link{margin-top:10px;padding:10px 16px;font-size:13px;
    color:var(--accent-ink)}
  .dica-flutuante-x{display:flex;align-items:center;justify-content:center;position:absolute;
    top:8px;right:8px;width:38px;height:38px;border:0;border-radius:50%;
    background:var(--surface2);color:var(--text2);font-size:24px;line-height:1;cursor:pointer;
    font-family:inherit;padding:0}
  .dica-flutuante-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

/* ── linha compacta de estatísticas do modelo (decisão do Bruno 09/09: eram 4 cartões
   grandes de KPI antes do gráfico — "ocupa quase a tela toda antes do que importa") ── */
.stat-linha{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 8px;font-size:13.5px;color:var(--text2)}
.stat-item b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}

/* ── ordenação (C11e, 15/09/2026): as cinco pílulas abertas viraram um menu. O botão diz a
   ordem atual; a lista abre por cima, ancorada nele. ── */
.ordenar-menu{position:relative;margin-left:auto}
.ordenar-btn{display:inline-flex;align-items:center;gap:6px}
.ordenar-btn b{font-weight:700;color:var(--text)}
.ordenar-btn svg{width:13px;height:13px;opacity:.7}
.ordenacao{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;
  gap:2px;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:5px;
  box-shadow:var(--shadow);min-width:200px}
.ordenacao[hidden]{display:none}
.segmento{appearance:none;border:0;background:transparent;color:var(--text2);text-align:left;
  font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border-radius:7px;
  cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.segmento:hover{background:var(--surface2);color:var(--text)}
.segmento[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.segmento:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ── placa de leitura colada no gráfico (opção C) e a dupla de botões (C11d) ── */
#rpAbaixoMapa{display:flex;flex-direction:column}
.placa-leitura{max-width:var(--maxw);width:100%;margin:10px auto 0;padding:0 18px}
.placa-n{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.placa-n > b{font-family:var(--serif-num);font-size:clamp(26px,4vw,34px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--text)}
.placa-frase{font-size:14.5px;color:var(--text2);line-height:1.4}
.placa-frase b{color:var(--text);font-weight:650}
.placa-ctx{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.placa-ctx b{color:var(--text2);font-weight:700;font-variant-numeric:tabular-nums}
/* C11d: dois botões lado a lado. C17 (15/09, celular, Bruno: "bug horrível"): era `display:flex`
   com `flex:1 1 220px` nos botões e, abaixo de 620px, `flex-direction:column`. Em coluna o eixo
   principal é o VERTICAL, então o `flex-basis:220px` virou ALTURA: dois botões de 220px empilhados
   comiam a tela inteira entre o gráfico e a lista. Virou grade: `auto-fit` põe os dois lado a lado
   enquanto couberem 210px para cada um e desce para uma coluna sozinho, sem media query e sem
   nenhum comprimento no eixo vertical — a altura é sempre a do conteúdo do botão. */
.acoes-radar{max-width:var(--maxw);margin:14px auto 0;padding:0 18px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;align-items:start}
.acoes-radar .btn{min-height:44px;height:auto}
.acoes-radar svg{width:16px;height:16px;flex:none}

/* ── letra miúda no fim da página (C11c) ── */
.letra-miuda{max-width:var(--maxw);margin:26px auto 0;padding:16px 18px 34px;border-top:1px solid var(--line)}
.letra-miuda .fonte-dados{margin:0 0 6px}

@media (max-width:620px){
  .acoes-radar{gap:8px}
  /* A4: no celular a legenda sobe para logo abaixo do mapa e a placa vai depois dela — é o que
     faz a primeira tela terminar na legenda com o mapa no piso de 190px (medido a 360x640). */
  #rpAbaixoMapa > .rp-legenda{order:1}
  #rpAbaixoMapa > .placa-leitura{order:2;margin-top:12px}
  .placa-n{gap:8px}
  .placa-n > b{font-size:24px}
  .placa-frase{font-size:13.5px}
  .placa-ctx{font-size:12px}
  /* a % da FIPE típica e o "desenhados no mapa" saem da linha de contexto: no celular ela
     quebrava em três linhas e os dois números que o Bruno pediu (C10) é que importam ali */
  .placa-ctx .ctx-extra{display:none}
}

/* C18 (15/09/2026): a faixa "FIPE <mês>" com as pílulas por ano ("2025 · R$ 68 mil*") e a nota
   do asterisco saíram do radar individual inteiro — celular e computador. As regras
   .fipe-linha / .fipe-linha-rot / .fipe-pilulas / .fipe-pilula / .fipe-nota vieram junto: não
   sobrou nenhum elemento com essas classes na casca. A tabela por ano é da Análise 360 agora. */

/* ── lista de anúncios ────────────────────────────────────────────────────── */
.grade-anuncios{max-width:var(--maxw);margin:0 auto;padding:6px 18px 10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
/* lista pagina no cliente (60 por vez): modelo com milhares de ativos (ex.: 600 vindos
   do teto da API) travava 30s+ pra montar o DOM inteiro de uma vez (portão responsivo
   deu timeout no Jeep Commander). O gráfico continua com TODOS os pontos. */
.lista-mais-wrap{max-width:var(--maxw);margin:0 auto;padding:4px 18px 18px;text-align:center}
.anuncio{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,border-color .15s,outline-color .15s;scroll-margin-top:90px}
.anuncio:hover{box-shadow:var(--shadow);border-color:var(--accent)}
.anuncio.em-destaque{outline:3px solid var(--accent);outline-offset:1px}
.anuncio-foto{aspect-ratio:16/10;background:var(--surface2);object-fit:cover;width:100%;display:block}
.anuncio-sem-foto{aspect-ratio:16/10;background:var(--surface2);display:grid;place-items:center;
  color:var(--muted);font-size:12px;text-align:center;padding:0 12px}
.anuncio-corpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.anuncio-linha1{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.anuncio-preco{font-size:22px;font-weight:800;letter-spacing:-.02em;font-family:var(--serif-num);color:var(--text)}
.anuncio-preco s{font-size:13px;color:var(--muted);font-weight:500;margin-left:8px}
.anuncio-titulo{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.anuncio-versao{font-size:12.5px;color:var(--text2);line-height:1.3;margin-top:-4px}
.anuncio-ficha{display:flex;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--text2);
  font-family:var(--serif-num)}
.anuncio-onde{font-size:13px;color:var(--text2)}
.anuncio-onde b{font-weight:700;color:var(--text)}
.anuncio-quando{font-size:12px;color:var(--muted);font-family:var(--serif-num)}
.anuncio-selos{display:flex;gap:6px;flex-wrap:wrap}
.anuncio-rodape{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.anuncio-fonte{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.anuncio-fonte b{font-weight:800;letter-spacing:.02em}
.ver-portal{font-size:12.5px;font-weight:800;color:var(--accent-ink);background:var(--accent);
  text-decoration:none;white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:99px;transition:filter .15s}
.ver-portal svg{width:12px;height:12px}
.ver-portal:hover{filter:brightness(1.08)}
.ver-portal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.aviso-afiliado{max-width:var(--maxw);margin:0 auto;padding:0 18px 10px}
.aviso-afiliado p{font-size:12.5px;color:var(--muted);background:var(--surface2);
  border-radius:var(--radius-sm);padding:10px 13px;margin:0;line-height:1.5}

/* ── fonte dos dados + ressalvas, junto do cabeçalho do gráfico (item mais visitado da
   página de modelo — é onde essas três garantias de docs/ESCRITA.md precisam aparecer). ── */
.fonte-dados{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 10px}

.rodape-secao{max-width:var(--maxw);margin:0 auto;padding:6px 18px 34px;text-align:center}

/* ── rodapé em 3 colunas (docs/CONTRATO.md item 7): Explorar · Sobre · Legal ─────────── */
.rodape{border-top:1px solid var(--line);background:var(--surface2)}
/* rodapé compacto (11/09/2026): marca + aviso à esquerda, links à direita, tudo numa faixa */
.rodape-miolo{max-width:var(--maxw);margin:0 auto;padding:26px 18px 30px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px 40px;align-items:start}
.rodape-marca .marca{font-size:15px}
.rodape-marca .marca svg{width:22px;height:22px}
.rodape-marca p{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted);max-width:44ch}
.rodape-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rodape-coluna{display:flex;flex-direction:column;gap:0}
.rodape-titulo{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.rodape-coluna a{color:var(--text2);text-decoration:none;font-size:13px;padding:4px 0}
.rodape-coluna a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.rodape-coluna a:hover{color:var(--accent)}

.vazio-fora{margin:0 auto;max-width:560px}
.vazio-fora .btn{margin-top:14px}

/* ── modal de alerta ──────────────────────────────────────────────────────── */
.modal-fundo{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);display:flex;
  align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-fundo[hidden]{display:none}
.modal-caixa{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  max-width:420px;width:100%;padding:22px 22px 20px;position:relative}
.modal-fechar{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:0;background:var(--surface2);color:var(--text2);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center}
.modal-fechar:hover{background:var(--line2)}
.modal-fechar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-passo-rot{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);margin:0 0 6px}
.modal-titulo{font-size:18px;font-weight:800;color:var(--text);margin:0 0 14px;line-height:1.3}
.modal-passo[hidden]{display:none}
.campo-rot{display:block;font-size:12.5px;font-weight:700;color:var(--text2);margin:0 0 6px}
.campo{width:100%;border:1.5px solid var(--line2);border-radius:var(--radius-sm);
  padding:11px 13px;font:inherit;font-size:15px;background:var(--surface);color:var(--text);
  outline:none;transition:border-color .15s}
.campo:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.campo.invalido{border-color:var(--bad)}
.erro-campo{color:var(--bad);font-size:12.5px;margin:6px 0 0;min-height:16px}
.canal-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px}
.canal-btn{border:1.5px solid var(--line2);background:var(--surface);border-radius:var(--radius-sm);
  padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;font:inherit;color:var(--text2);font-size:13px;font-weight:700}
.canal-btn:hover{border-color:var(--accent);color:var(--accent)}
.canal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.canal-btn svg{width:22px;height:22px}
.consentimento{display:flex;gap:9px;align-items:flex-start;margin:14px 0 16px;font-size:12.5px;
  color:var(--text2);line-height:1.45}
.consentimento input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.consentimento a{color:var(--info);font-weight:600}
/* segunda caixa (repasse a parceiro): opcional e não bloqueante, mesma estrutura, cor
   um tom mais discreta pra não competir com a caixa obrigatória acima dela. */
.consentimento-parceiros{color:var(--muted);margin:0 0 14px}
.modal-acoes{display:flex;gap:9px}
.modal-voltar{background:transparent;border:0;color:var(--text2);font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;padding:11px 6px}
.sucesso-caixa{text-align:center;padding:8px 0}
.sucesso-caixa .icone-ok{width:46px;height:46px;border-radius:50%;background:var(--good-soft);
  color:var(--good);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sucesso-caixa p{font-size:14.5px;color:var(--text);line-height:1.5}
.ja-tem-alerta{text-align:center;padding:6px 0}
.ja-tem-alerta p{font-size:14px;color:var(--text2);margin:0 0 16px;line-height:1.5}

/* ── páginas de prosa (termos, privacidade) ─────────────────────────────────── */
.prosa-pagina{max-width:720px;margin:0 auto;padding:32px 18px 60px}
.prosa-pagina h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:var(--text)}
.prosa-pagina .versao{font-size:12.5px;color:var(--muted);font-family:var(--serif-num);margin:0 0 26px}
.prosa-pagina h2{font-size:16px;font-weight:800;color:var(--accent);margin:30px 0 10px}
.prosa-pagina p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 14px;max-width:74ch}
.prosa-pagina ul{margin:0 0 14px;padding-left:20px}
.prosa-pagina li{font-size:14.5px;line-height:1.6;color:var(--text2);margin-bottom:6px}
.prosa-pagina strong{color:var(--text)}
.prosa-pagina a{color:var(--info);font-weight:600}

[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

@media (max-width:1024px){
  /* grade de "Modelos no radar": 4 colunas é largura de desktop; 2 já cabe bem num tablet
     sem espremer o cartão horizontal (foto + nome + faixa de preço + chips). */
  .modelos-grade-rica{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* 5 links de menu + marca não cabem lado a lado numa tela de celular/tablet pequeno —
     vira a folha (docs/CONTRATO.md item 1). */
  /* No celular as quatro pílulas descem para uma segunda linha, sempre à vista (v8). Se não
     couberem numa linha, rolam de lado em vez de quebrar em duas. */
  .topo-linha{flex-wrap:wrap;padding:10px 14px 8px;gap:6px 10px}
  /* UMA linha com os quatro itens inteiros. Duas linhas (como o protótipo) custam 39px, e a
     regra A4 — primeira tela terminando na legenda do mapa — não paga esse preço a 390x844
     nem a 360x640. As pílulas encolhem até os quatro caberem sem corte; se um aparelho ainda
     mais estreito apertar, a faixa rola de lado em vez de cortar palavra. */
  .topo-nav{order:3;width:100%;flex-wrap:nowrap;gap:3px;margin:0 -3px;
    overflow-x:auto;scrollbar-width:none}
  .topo-nav::-webkit-scrollbar{display:none}
  .topo-nav a{padding:6px 9px;font-size:12px}
  .topo-nav a{padding:6px 10px;font-size:12.5px}
  .topo-fonte{font-size:11px}
  .marca{font-size:15px}
  .marca svg{width:22px;height:22px}
  :root{--altura-topo:92px}
}
@media (max-width:640px){
  .hero-miolo{padding:32px 16px 30px}
  .canal-opcoes{grid-template-columns:1fr}
  .grade-anuncios{grid-template-columns:1fr 1fr}
  .rodape-miolo{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 18px 26px}
  .modelos-grade-rica{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}
}
@media (max-width:480px){
  /* campo de busca ganha a linha inteira; mic + Buscar descem para não espremer o
     placeholder (link 27 caracteres não cabia ao lado dos dois botões em 360px).
     ESCOPO em `.busca-linha` (15/09/2026): a home do v8 usa `.hm-busca`, e o
     `.busca-campo{order:1}` solto jogava o botão Buscar para ANTES do campo lá. */
  .busca-linha{flex-wrap:wrap}
  .busca-linha .busca-campo{flex-basis:100%;order:1}
  .busca-linha .btn-mic{order:2;margin-left:auto}
  .btn-buscar{order:3}
  /* cartão de modelo sem foto no mobile (decisão do Bruno 09/09): a coluna é estreita
     demais pra uma foto pequena valer o espaço que tira do nome/faixa de preço. */
  .modelo-capa{display:none}
}
@media (max-width:420px){
  /* Orçamento da primeira dobra a 360x640 (A4), medido em 15/09/2026: topo 117 + cabeçalho 122
     + console 154 + mapa 190 (o piso de painel.js) + legenda 74 estourava a janela em 42px.
     Duas economias, as duas desta folha: o menu volta a UMA linha que rola de lado (-34px) e a
     linha "fio: mediana de cada versão" sai da legenda (-14px) — desde a opção C a mediana está
     rotulada na própria linha do gráfico, então a legenda repetia o que o mapa já diz. */
  /* a 360px os quatro itens só cabem inteiros com a pílula no mínimo e a casca mais estreita */
  .topo-linha{padding-left:10px;padding-right:10px}
  .topo-nav{gap:2px;margin:0 -2px}
  .topo-nav a{padding:5px 7px;font-size:11px}
  .rp-legenda .leg-fio{display:none}
  .grade-anuncios{grid-template-columns:1fr}
  .rodape-links{gap:10px}
  .rodape-coluna a{font-size:12.5px}
}

/* ═══ C17b (15/09/2026) — DEITADO: o topo volta para UMA linha, ao lado da logo ═════════════
   Reprovado pelo Bruno a 667×375: o menu descia para uma segunda linha (regra de `max-width:760px`,
   feita pensando em celular EM PÉ, onde sobra altura e falta largura) e o topo media 80px. Deitado
   é o contrário: sobra largura e falta altura. Medido: as quatro pílulas com 12px cabem ao lado da
   marca com folga em 640px de largura. Este bloco tem de vir DEPOIS do de 760px para vencer, e por
   isso mora aqui no fim da folha, e não junto do resto do deitado.
   `--altura-topo` acompanha: ele é o deslocamento do que gruda no topo e das âncoras de seção. */
@media (orientation:landscape) and (max-height:540px) and (min-width:620px),
       (orientation:landscape) and (min-width:1000px) and (max-width:1200px){
  :root{--altura-topo:48px}
  .topo-linha{flex-wrap:nowrap;padding:6px 14px;gap:8px}
  .topo-nav{order:0;width:auto;flex-wrap:nowrap;margin:0;overflow-x:visible}
  .topo-nav a{padding:5px 9px;font-size:12px}
  .marca{font-size:14px}
  .marca svg{width:20px;height:20px}
  .topo-fonte{display:none}
  /* A legenda cabe em UMA linha: o fio da mediana sai (desde a opção C ela está rotulada na
     própria linha do gráfico, então a legenda repetia o mapa — mesmo argumento já usado abaixo
     de 420px) e a explicação da zona de garimpo vira duas palavras, com o texto inteiro no
     `title` que public/app.js escreve. Devolve ~33px ao retângulo de gráfico + filtros. */
  .rp-legenda .leg-fio{display:none}
  .rp-legenda .rp-zona-txt > span{display:none}
  .rp-legenda .rp-zona-txt::after{content:'zona de garimpo'}
}

/* Compare com: duplas X vs Y publicadas para este modelo (docs/COMPARACOES.md) */
.compare-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.compare-rot{font-size:12.5px;font-weight:700;color:var(--text2)}
.compare-links{display:flex;gap:8px;flex-wrap:wrap}
.compare-links a{font-size:13px;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 12px;text-decoration:none}
.compare-links a:hover{border-color:var(--accent)}
.compare-links a small{color:var(--muted);font-weight:500;margin-left:4px}
/* C13: "Compare com" desceu para depois da lista, fora do .modelo-topo */
#viewModelo > .compare-linha{max-width:var(--maxw);margin:10px auto 0;padding:0 18px}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   HOME v8 (15/09/2026, item B3a): a estrutura de radardecarros-prototipos/comparar/v8/home.html
   com os tokens do tema (tema-v8.css escurece). Medidas copiadas do painel.css do protótipo.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.hm-casca{max-width:var(--maxw);margin:0 auto;padding:24px 22px 64px}
.hm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:44px;
  align-items:center;padding:6px 0 30px}
.hm-titulo{margin:0 0 12px;font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-.015em;
  font-weight:700;color:var(--text);text-wrap:balance}
.hm-sub{margin:0 0 20px;font-size:16px;line-height:1.55;color:var(--muted);max-width:46ch}

.hm-busca{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:10px;
  padding:0 6px 0 13px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.hm-busca:focus-within{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.hm-busca-lupa{width:17px;height:17px;color:var(--muted);flex:none}
.hm-busca .busca-campo{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);
  font:inherit;font-size:16px;padding:15px 0;max-height:none;min-height:0;appearance:none}
.hm-busca .busca-campo::placeholder{color:var(--muted)}
.hm-busca .busca-campo::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hm-busca .btn-mic{width:36px;height:36px;background:transparent;border-color:transparent}
.hm-buscar{flex:none;appearance:none;border:1px solid var(--line2);border-radius:7px;background:var(--surface2);
  color:var(--text);font:inherit;font-size:13.5px;font-weight:600;padding:8px 13px;cursor:pointer;
  transition:border-color .15s}
.hm-buscar:hover{border-color:var(--text)}
.hm-buscar:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.hm-buscar:disabled{opacity:.6;cursor:progress}
.hm-hero .exemplos{gap:7px;margin-top:10px}
.hm-hero .exemplo{border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:99px;padding:6px 12px;font-size:13px;font-weight:500}
.hm-hero .exemplo:hover{color:var(--text);border-color:var(--muted)}
.hm-hero .exemplo:focus-visible{outline:2px solid var(--text)}

/* O berço do radar: mesmo círculo, mesmo tamanho e mesmo fundo do canvas do protótipo. Os
   anéis vazios só aparecem enquanto painel.js::criarRadar não montou (.hm-tela-viva). */
/* O tamanho do radar é dado por `--rp-radar-max`, e não por `max-width` aqui: quando
   painel.js::criarRadar monta, ELE marca este mesmo elemento com a classe `.rp-radar`
   (painel.css: `max-width:var(--rp-radar-max,100%)`), que vence um `max-width` de classe
   desta folha por ordem de carregamento. A variável é o contrato do componente. */
.hm-tela{--rp-radar-max:480px;position:relative;aspect-ratio:1;width:100%;max-width:var(--rp-radar-max);margin:0 auto}
.hm-tela > canvas{width:100%;height:100%;display:block}
.hm-tela-berco{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 50%,var(--surface) 0%,var(--bg) 72%)}
.hm-tela-berco::before,.hm-tela-berco::after,.hm-tela-berco i{content:'';position:absolute;
  border-radius:50%;border:1px solid var(--line)}
.hm-tela-berco::before{inset:12%}
.hm-tela-berco::after{inset:30%}
.hm-tela-berco i{inset:46%;background:var(--line)}

.hm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:24px 0 0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line)}
.hm-kpi{background:var(--surface);padding:14px 16px}
.hm-kpi-v{font-family:var(--serif-num);font-size:clamp(19px,2.4vw,25px);line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--text)}
.hm-kpi-r{font-size:12px;color:var(--muted);margin-top:3px}
.hm-kpi-viva .hm-kpi-v{color:var(--accent)}

.hm-faixa{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:30px 0 12px}
.hm-faixa h2{margin:0;font-size:18px;font-weight:650;letter-spacing:.005em;color:var(--text)}
.hm-quanto{font-size:12.5px;color:var(--muted)}
.hm-faixa .ver-todos{margin-left:auto}
.hm-secao{scroll-margin-top:calc(var(--altura-topo) + 12px)}
.hm-secao .resposta-ia{font-size:14px;color:var(--text2);margin:0 0 16px;max-width:66ch;line-height:1.55}

.hm-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.hm-modelo{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.hm-modelo:hover,.hm-modelo:focus-visible{border-color:var(--text);transform:translateY(-2px);outline:none}
.hm-modelo-foto{width:76px;height:58px;object-fit:cover;border-radius:6px;background:var(--line);flex:none;display:block}
.hm-sem-foto{border:1px dashed var(--line2);
  background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px)}
.hm-modelo-txt{display:flex;flex-direction:column;min-width:0}
.hm-modelo-n{font-size:14.5px;font-weight:650;line-height:1.2;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-modelo-f{font-family:var(--serif-num);font-size:12.5px;font-variant-numeric:tabular-nums}
.hm-modelo-m{font-size:11.5px;color:var(--muted);margin-top:2px}
.hm-modelo-m b{color:var(--accent);font-weight:600}
.hm-mais{text-align:center;margin-top:14px}
.hm-aviso{font-size:12.5px;color:var(--muted);margin:18px 0 0;max-width:80ch;line-height:1.5}

@media (max-width:960px){
  .hm-hero{grid-template-columns:minmax(0,1fr);gap:20px;padding-bottom:20px}
  /* o radar sobe para antes do texto (v8/NOTAS.md §Encaixe): senão não cabia inteiro */
  .hm-tela{order:-1;--rp-radar-max:min(320px,calc(100vh - 300px))}
  .hm-titulo{font-size:clamp(24px,7vw,30px)}
  .hm-sub{font-size:14.5px;margin-bottom:14px}
  .hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hm-casca{padding:18px 16px 52px}
  .hm-faixa{margin-top:26px}
}
@media (max-width:420px){
  .hm-casca{padding:14px 14px 48px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   RADAR INDIVIDUAL — cabeçalho do carro (fallback de painel.js::montarCabecalhoCarro) e o
   botão de aviso na cor de ação do v8 (âmbar = --warn no tema-v8).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cabecalho-carro{margin:0 0 10px}
.cc-linha{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.cc-linha .modelo-nome{margin:0}
.cc-versao{appearance:none;display:inline-flex;align-items:center;gap:8px;max-width:100%;
  border:1px solid var(--line2);background:var(--surface);color:var(--text);border-radius:99px;
  padding:6px 11px 6px 14px;font:inherit;cursor:pointer;transition:border-color .15s}
.cc-versao:hover{border-color:var(--text)}
.cc-versao:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.cc-versao-rot{font-size:11.5px;color:var(--muted)}
.cc-versao-v{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.cc-versao svg{width:15px;height:15px;color:var(--muted);flex:none}
.cc-versao.on{border-color:var(--accent);background:var(--accent-soft)}
.cc-versao.on .cc-versao-v{color:var(--accent)}

.btn.btn-aviso{background:var(--warn);color:var(--accent-ink);border-color:transparent}
.btn.btn-aviso:focus-visible{outline-color:var(--warn)}
.btn-aviso svg{width:16px;height:16px;flex:none}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   MODAL DE ALERTA (D4, D5 — 15/09/2026). Assinatura: o "sinal" — o mesmo radar da marca (dois
   anéis e o ponto âmbar) marca o carro que a pessoa quer, no cartão, no resumo e no sucesso.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.modal-caixa.al-caixa{max-width:460px;padding:24px 24px 20px;border:1px solid var(--line);
  max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
.al-gratis{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--good);background:var(--good-soft);border-radius:99px;padding:4px 10px 4px 9px;margin:0 0 10px}
.al-gratis::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.al-titulo{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--text);
  margin:0 0 6px;padding-right:34px;text-wrap:balance}
.al-lead{font-size:14px;color:var(--muted);margin:0 0 16px;line-height:1.5}

.al-sinal{position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line2);background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.al-sinal::before{content:'';position:absolute;inset:10px;border-radius:50%;border:1px solid var(--line2)}
.al-sinal::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:var(--warn);
  top:9px;right:10px;box-shadow:0 0 0 4px var(--warn-soft)}

.al-cartao{border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden;margin:0 0 18px}
.al-cartao-cabeca{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.al-cartao-id{min-width:0}
.al-cartao-nome{margin:0;font-size:17px;font-weight:700;color:var(--text);line-height:1.2}
.al-cartao-versao{margin:3px 0 0;font-size:13.5px;font-weight:600;color:var(--accent);line-height:1.3}
.al-cartao-versao.todas{color:var(--muted);font-weight:500}
.al-criterios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--line)}
.al-crit{background:var(--bg);padding:10px 16px 11px}
.al-crit dt{font-size:11.5px;color:var(--muted);margin:0}
.al-crit dd{margin:2px 0 0;font-size:14.5px;font-weight:500;color:var(--text2);font-variant-numeric:tabular-nums}
.al-crit.on dd{color:var(--text);font-weight:650}
.al-ajustar{display:block;margin:4px auto 0}

.al-resumo{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);margin:0 0 14px;font-size:13px;line-height:1.4;color:var(--muted)}
.al-resumo b{color:var(--text);font-weight:600}
.al-resumo .al-sinal{width:30px;height:30px}
.al-resumo .al-sinal::before{inset:7px}
.al-resumo .al-sinal::after{width:6px;height:6px;top:6px;right:6px;box-shadow:0 0 0 3px var(--warn-soft)}

.al-caixa .campo-rot{margin-top:6px}
.al-canais{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.al-canal{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 10px;
  border:1px solid var(--line2);border-radius:10px;background:transparent;color:var(--text2);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s}
.al-canal svg{width:19px;height:19px;flex:none}
.al-canal:hover{border-color:var(--text);color:var(--text)}
.al-canal:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.al-canal[aria-checked="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}

.al-ok{text-align:center;padding:4px 0 0}
.al-ok .al-titulo{padding:0 20px}
.al-ok-sinal{position:relative;width:92px;height:92px;margin:6px auto 16px;display:grid;place-items:center;color:var(--good)}
.al-ok-sinal i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--good);opacity:.25}
.al-ok-sinal i + i{inset:16px;opacity:.5}
.al-ok-sinal i:first-child{animation:al-onda 1.6s ease-out 2}
.al-ok-sinal svg{position:relative;width:30px;height:30px;padding:9px;box-sizing:content-box;
  border-radius:50%;background:var(--good-soft)}
@keyframes al-onda{from{transform:scale(.55);opacity:.7}to{transform:scale(1.18);opacity:0}}
.al-ok-frase{font-size:15.5px;line-height:1.5;color:var(--text2);margin:0 auto 16px;max-width:38ch}
.al-ok-frase b{color:var(--text)}
.al-cartao-ok{text-align:left;margin-bottom:12px}
.al-ok-nota{font-size:12.5px;color:var(--muted);margin:0 0 14px;overflow-wrap:anywhere}

@media (max-width:620px){
  .modal-fundo{padding:0;align-items:flex-end}
  .modal-caixa.al-caixa{max-width:none;border-radius:16px 16px 0 0;border-bottom:0;
    max-height:92vh;padding:20px 16px 18px}
  .al-titulo{font-size:19px}
}