/* public/comparacoes.css — CSS só de página das telas de /comparar (hub + página de dupla).
   O que se repete com o resto do app já está em app.css (vendorado) e estilo.css (dono:
   agente FRONTEND). Regra de sempre: nenhuma cor literal, só var(--token) do tema "garagem"
   (public/tema.css). Dono: agente COMPARAÇÕES (comparacoes/**). */

/* ── o desempate com public/app.js ───────────────────────────────────────────────────────
   app.js não conhece /comparar: no boot ele sempre esconde #ssr e decide entre #viewHome e
   #viewModelo pela URL, caindo em mostrarHome() pra qualquer caminho que não comece com
   /carros. Sem isto, a home apareceria por cima da comparação assim que o JS carregasse. Um
   seletor por #id tem mais especificidade que o `[hidden]{display:none!important}` de
   estilo.css (também !important). comparacoes/casca.mjs marca `body.pagina-comparacoes`
   nas páginas desta trilha (mesmo truque de public/analises.css). */
body.pagina-comparacoes #ssr{display:block!important}
body.pagina-comparacoes #viewHome{display:none!important}
body.pagina-comparacoes #viewModelo{display:none!important}

.avcomparar{max-width:var(--maxw);margin:0 auto;padding:22px 18px 40px;display:flex;
  flex-direction:column;gap:18px}

/* ── cabeçalho ────────────────────────────────────────────────────────────────────────── */
.avcomparar-trilha{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.avcomparar-trilha a{color:var(--muted);text-decoration:none}
.avcomparar-trilha a:hover{color:var(--accent)}
.avcomparar-cabecalho h1{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 6px}
.avcomparar-fonte{font-size:13.5px;color:var(--text2);margin:0}

/* ── cartões de seção (reaproveita .cartao/.cartao-head de app.css) ─────────────────────── */
.avcomparar-cartao .dica{font-size:13px;color:var(--muted);margin:8px 0 0}

/* ── placar: tabela de 2 colunas, uma linha por métrica ──────────────────────────────────
   Reaproveita .tabela/.tabela-rolo de app.css; só ajusta a 1ª coluna (rótulo da métrica,
   nunca numérica) e centraliza o cabeçalho dos dois modelos. */
.avcomparar-placar th:first-child,.avcomparar-placar td:first-child{text-align:left;
  color:var(--text2);font-weight:600;white-space:normal}
.avcomparar-placar th.num{text-align:center}
.avcomparar-placar td.num{text-align:center}
/* os cabeçalhos das tabelas de comparação levam o nome INTEIRO do modelo (às vezes 3-4
   palavras): o placar e a tabela de preço por ano. Sem isto o cabeçalho forçava a tabela a
   estourar 360px de largura e cortava a coluna do segundo modelo fora da tela (achado ao
   olhar a screenshot mobile-s, 08/09). app.css deixa th em nowrap por padrão; aqui ele quebra
   em até 2 linhas e a coluna ganha um teto de largura. */
.avcomparar .tabela th.num{white-space:normal;line-height:1.25;max-width:130px}

/* ── gráfico de dispersão sobreposto (docs/COMPARACOES.md §3) ────────────────────────────
   Cor por token: A em --accent, B em --warn, opacidade 0,7 (os dois precisam ser
   distinguíveis sem depender só da legenda — pedido do Bruno). Linha tracejada na mediana de
   cada modelo, na cor do próprio modelo. */
.grafico-comparacoes-svg{width:100%;height:auto;display:block;overflow:visible}
.grafico-comparacoes-svg .malha{stroke:var(--line);stroke-width:1}
.grafico-comparacoes-svg .eixo-rot{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.grafico-comparacoes-svg .eixo-titulo{font-size:10.5px;fill:var(--muted);font-weight:600}
.grafico-comparacoes-svg .ponto-a{fill:var(--accent);opacity:.7}
.grafico-comparacoes-svg .ponto-b{fill:var(--warn);opacity:.7}
.grafico-comparacoes-svg .linha-mediana-a{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4}
.grafico-comparacoes-svg .linha-mediana-b{stroke:var(--warn);stroke-width:1.5;stroke-dasharray:5 4}

/* ── texto gerado do dado ────────────────────────────────────────────────────────────────── */
.avcomparar-texto{max-width:70ch}
.avcomparar-texto p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 12px}

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────── */
.avcomparar-faq h2{font-size:16px;font-weight:800;color:var(--accent);margin:0 0 12px}
.avcomparar-faq-item{margin:0 0 16px}
.avcomparar-faq-p{font-size:14.5px;font-weight:700;color:var(--text);margin:0 0 4px}
.avcomparar-faq-r{font-size:14px;color:var(--text2);line-height:1.55;margin:0;max-width:70ch}

/* ── metodologia (rodapé fixo, mesmo texto das análises) ─────────────────────────────────── */
.avcomparar-metodologia{background:var(--surface2);border-radius:var(--radius);padding:16px 18px}
.avcomparar-metodologia h2{font-size:13px;font-weight:800;color:var(--text2);margin:0 0 8px;
  text-transform:uppercase;letter-spacing:.04em}
.avcomparar-metodologia p{font-size:13px;line-height:1.6;color:var(--text2);margin:0 0 10px;max-width:76ch}
.avcomparar-metodologia p:last-child{margin-bottom:0}

/* ── CTA final: dois botões preenchidos (ver anúncios de A / de B) + alerta ─────────────── */
.avcomparar-cta{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:8px 0 4px}
.avcomparar-cta-botoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.avcomparar-cta-botoes .btn{max-width:320px;flex:1 1 220px;text-decoration:none;text-align:center}
.avcomparar-cta .btn.fantasma{max-width:420px}

/* ── hub (/comparar), agrupado por carroceria ─────────────────────────────────────────────── */
.avcomparar-hub-grupo{display:flex;flex-direction:column;gap:12px}
.avcomparar-hub-grupo h2{font-size:13px;font-weight:800;color:var(--muted);margin:0;
  text-transform:uppercase;letter-spacing:.05em}
.avcomparar-hub-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.avcomparar-hub-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:15px 16px;display:flex;flex-direction:column;gap:8px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
.avcomparar-hub-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.avcomparar-hub-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avcomparar-hub-card h3{margin:0;font-size:15.5px;font-weight:800;color:var(--text);line-height:1.35}
.avcomparar-hub-vs{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase}
.avcomparar-hub-meta{font-size:12.5px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
/* affordance de clique: o cartão inteiro já é um <a>, mas a chamada fica sempre visível, cor
   de ação, com a seta reagindo ao hover do cartão inteiro (mesma lição de public/analises.css,
   bronca do Bruno 08/09: "não sei onde clicar"). */
.avcomparar-hub-ver{margin:auto 0 0;padding-top:8px;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:5px}
.avcomparar-hub-ver span{transition:transform .15s}
.avcomparar-hub-card:hover .avcomparar-hub-ver span{transform:translateX(3px)}

@media (max-width:640px){
  .avcomparar{padding:18px 16px 32px}
  .avcomparar-hub-grade{grid-template-columns:1fr 1fr}
  .avcomparar-cta-botoes{flex-direction:column}
  .avcomparar-cta-botoes .btn{max-width:none}
}
@media (max-width:420px){
  .avcomparar-hub-grade{grid-template-columns:1fr}
}