/* public/analises.css — CSS só de página das telas de /analises (hub + página de modelo).
   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 ANÁLISES (analises/**).

   Layout novo (09/09/2026, redesenho pedido pelo Bruno): 3 colunas no desktop — menu lateral
   sticky (índice das seções, inspirado no relatório de diagnóstico do Farol) + conteúdo
   central (máx. ~760px, padrão /bairros do COI: H2-pergunta, resposta direta antes da
   tabela/gráfico) + coluna direita reservada (vazia por enquanto, `.analise-lateral`). No
   mobile o menu vira barra horizontal rolável no topo e a coluna direita some. */

/* ── o desempate com public/app.js ───────────────────────────────────────────────────────
   app.js não conhece /analises: 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 análise assim que o JS carregasse. Um
   seletor por #id tem mais especificidade que o `[hidden]{display:none!important}` de
   estilo.css (também !important), e por especificidade que dá empate por número, não por
   ordem no arquivo — então isto vence de qualquer jeito, mesmo carregando antes de
   estilo.css. analises/casca.mjs marca `body.pagina-analise` nas páginas desta trilha. */
body.pagina-analise #ssr{display:block!important}
body.pagina-analise #viewHome{display:none!important}
body.pagina-analise #viewModelo{display:none!important}

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

/* ── layout: casca de 2 colunas, índice, CTA, FAQ, leia também e nota de fonte moram em
   public/conteudo.css (conteudo/blocos.mjs) desde 11/09/2026. Aqui fica só o que é da análise. */
.avanalise-conteudo{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ── cabeçalho / hero ─────────────────────────────────────────────────────────────────── */
.avanalise-trilha{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.avanalise-trilha a{color:var(--muted);text-decoration:none}
.avanalise-trilha a:hover{color:var(--accent)}
/* H1: o peso 800 com entrelinha 1,15 fazia duas linhas coladas, um bloco escuro no topo bem
   mais pesado que o do protótipo (portão lado a lado, 15/09/2026). Peso 700, um ponto menor no
   teto e entrelinha 1,2: continua sendo a maior coisa da página, sem virar parede. */
.avanalise-cabecalho h1{font-size:clamp(22px,3.3vw,29px);font-weight:700;letter-spacing:-.02em;
  line-height:1.2;color:var(--text);margin:0 0 10px;max-width:38ch}
/* resposta direta em 1-2 frases, logo abaixo do H1 (padrão /bairros do COI e alvo do
   `speakable` no JSON-LD — a frase sozinha tem que responder a pergunta do H1). */
.avanalise-resumo{font-size:15.5px;line-height:1.6;color:var(--text);font-weight:600;
  margin:0 0 10px;max-width:66ch}
.avanalise-fonte{font-size:13px;color:var(--muted);margin:0}
.avanalise-aviso{background:var(--warn-soft);border-radius:var(--radius-sm);padding:10px 13px;
  margin-top:10px}
.avanalise-aviso p{margin:0;font-size:13px;color:var(--warn);line-height:1.5}
.avanalise-aviso-amostra{background:var(--info-soft)}
.avanalise-aviso-amostra p{color:var(--info)}

/* ── resposta direta de cada seção, antes da tabela/gráfico (AEO: cada H2 é pergunta, esta
   frase é a resposta) ────────────────────────────────────────────────────────────────────── */
.avanalise-resposta{font-size:13.5px;color:var(--text2);line-height:1.55;margin:0 0 12px;
  max-width:66ch}

/* ── seções sem cartão (visão geral: os tiles já são cartão sozinhos) ───────────────────── */
.avanalise-secao h2{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.01em;
  margin:0 0 4px}

/* ── cartões de seção (reaproveita .cartao/.cartao-head de app.css); H2 aqui é pergunta
   inteira, não eyebrow curto — desliga o uppercase/tamanho pequeno herdado do componente
   genérico e usa o mesmo peso visual do restante da página. ─────────────────────────────── */
.avanalise-cartao .cartao-head h2{font-size:16px;font-weight:800;color:var(--text);
  text-transform:none;letter-spacing:-.01em}
.avanalise-cartao .dica{font-size:13px;color:var(--muted);margin:8px 0 0}

/* ── kpis: UM bloco 3×2 com filete interno, não seis cartões soltos ──────────────────────
   Portão lado a lado com o protótipo (15/09/2026): seis cartões com sombra, borda e uma
   legenda de duas linhas em cada um ocupavam o dobro da altura do protótipo para os mesmos
   seis números, e empurravam o resumo do mês para fora da primeira tela. Aqui o cartão é o
   bloco inteiro; cada célula perde borda, sombra e raio próprios e ganha só o filete que a
   separa da vizinha. Valor primeiro e maior, rótulo embaixo e discreto. */
.avanalise-kpis{grid-template-columns:repeat(3,1fr);gap:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.avanalise-kpis .kpi{background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:13px 16px 14px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
/* primeira coluna e primeira linha não levam filete: ele encostaria na borda do bloco */
.avanalise-kpis .kpi:nth-child(3n+1){border-left:0}
.avanalise-kpis .kpi:nth-child(-n+3){border-top:0}
.avanalise-kpis .kpi .valor-linha{margin-top:0}
/* tabular-nums porque a grade é uma coluna de números que a pessoa compara de cima a baixo */
.avanalise-kpis .kpi .valor{font-size:clamp(23px,2.1vw,27px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.avanalise-kpis .kpi .valor small{font-size:13px}
.avanalise-kpis .kpi .rotulo{margin-top:3px;font-size:12px;font-weight:600;color:var(--muted)}
/* as definições que eram legenda por célula, numa linha só sob o bloco (no celular ninguém
   passa o mouse para ler um `title`) */
.avanalise-kpis-nota{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted);
  max-width:72ch}
@media (max-width:640px){
  .avanalise-kpis{grid-template-columns:repeat(2,1fr)}
  .avanalise-kpis .kpi{padding:11px 13px 12px}
  .avanalise-kpis .kpi:nth-child(3n+1){border-left:1px solid var(--line)}
  .avanalise-kpis .kpi:nth-child(-n+3){border-top:1px solid var(--line)}
  .avanalise-kpis .kpi:nth-child(odd){border-left:0}
  .avanalise-kpis .kpi:nth-child(-n+2){border-top:0}
}

/* ── pele editorial das páginas vivas ───────────────────────────────────────
   O Radar continua com seu tema de garagem no app. Conteúdo vivo usa uma
   linguagem própria, inspirada na anatomia editorial de bairros e prédios:
   hero verde, papel claro, índice lateral e dados em instrumentos brancos. */
body.pagina-analise{
  --ed-verde:#0f3d2e;
  --ed-verde-2:#1a5c44;
  --ed-dourado:#c8a75b;
  --ed-dourado-claro:#e2c98a;
  --ed-papel:#f6f4ee;
  --ed-papel-2:#ede9df;
  --ed-tinta:#1a1a18;
  --ed-suave:#5a5a52;
  --ed-linha:rgba(15,61,46,.14);
  background:var(--ed-papel);
  color:var(--ed-tinta);
}
body.pagina-analise .app{background:var(--ed-papel);color:var(--ed-tinta)}
body.pagina-analise .topo{background:rgba(246,244,238,.97);border-bottom:1px solid var(--ed-linha);color:var(--ed-verde);box-shadow:0 1px 8px rgba(15,61,46,.05)}
body.pagina-analise .marca{color:var(--ed-verde);font-weight:800}
body.pagina-analise .marca b{color:var(--ed-verde-2)}
body.pagina-analise .topo-nav a{color:var(--ed-suave);border-color:transparent}
body.pagina-analise .topo-nav a:hover,body.pagina-analise .topo-nav a.ativo{color:var(--ed-verde);background:rgba(200,167,91,.18);border-color:var(--ed-dourado-claro)}
body.pagina-analise #ssr{background:var(--ed-papel)}
body.pagina-analise .avanalise{max-width:none;padding:0;margin:0}
body.pagina-analise .cv-layout{max-width:1080px;grid-template-columns:210px minmax(0,1fr);gap:0;padding:0 24px 72px;margin:0 auto;background:var(--ed-papel)}
body.pagina-analise .cv-conteudo{min-width:0;gap:0}
body.pagina-analise .cv-lado{top:104px;padding:30px 14px 24px 0;background:transparent}
body.pagina-analise .cv-indice{padding:0 0 0 13px;border:0;border-left:1px solid var(--ed-linha);border-radius:0;background:transparent;box-shadow:none}
body.pagina-analise .cv-indice-titulo{margin:0 0 13px;color:var(--ed-suave);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
body.pagina-analise .cv-indice ul{gap:2px}
body.pagina-analise .cv-indice a{border-left:2px solid transparent;border-radius:0;padding:8px 10px;color:var(--ed-suave);font-size:12.5px;font-weight:650}
body.pagina-analise .cv-indice a:hover{color:var(--ed-verde);background:rgba(200,167,91,.1)}
body.pagina-analise .cv-indice a.on{border-left-color:var(--ed-dourado);background:rgba(200,167,91,.18);color:var(--ed-verde)}
body.pagina-analise .cv-indice-cta{margin:20px 10px 0 0!important;padding:12px 0!important;border-top:1px solid var(--ed-linha);color:var(--ed-verde)!important;font-size:12px!important}
body.pagina-analise .cv-seta{color:var(--ed-dourado);font-weight:800}
body.pagina-analise .avanalise-cabecalho{background:var(--ed-verde);color:var(--ed-papel);margin:0 -24px;padding:42px 38px 36px;border-bottom:4px solid var(--ed-dourado);box-shadow:0 8px 20px rgba(15,61,46,.12)}
body.pagina-analise .avanalise-cabecalho .avanalise-trilha{color:var(--ed-dourado-claro);margin:0 0 18px;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
body.pagina-analise .avanalise-cabecalho .avanalise-trilha a{color:var(--ed-dourado-claro)}
body.pagina-analise .avanalise-cabecalho h1{max-width:18ch;color:var(--ed-papel);font:700 clamp(30px,4vw,48px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:0 0 14px}
body.pagina-analise .avanalise-cabecalho .avanalise-resumo{max-width:68ch;color:rgba(246,244,238,.86);font-size:15px;line-height:1.65;font-weight:500;margin:0}
body.pagina-analise .avanalise-cabecalho .avanalise-fonte{color:rgba(246,244,238,.7)}
body.pagina-analise .avanalise-prova{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:26px;padding-top:17px;border-top:1px solid rgba(226,201,138,.38);color:rgba(246,244,238,.72);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
body.pagina-analise .avanalise-prova b{display:block;color:var(--ed-papel);font:700 20px/1 Georgia,'Times New Roman',serif;letter-spacing:0;text-transform:none;margin-bottom:3px}
body.pagina-analise .hero-miolo{max-width:none;padding:0}
body.pagina-analise .avanalise-cartao,body.pagina-analise .avanalise-secao,body.pagina-analise .avanalise-texto{border:0;border-bottom:1px solid var(--ed-linha);border-radius:0;background:transparent;box-shadow:none;padding:44px 38px;margin:0;min-height:0}
body.pagina-analise .avanalise-cartao:nth-of-type(odd){background:var(--ed-papel-2)}
body.pagina-analise .avanalise-cartao h2,body.pagina-analise .avanalise-secao h2,body.pagina-analise .avanalise-texto h2,body.pagina-analise .cv-faq h2,body.pagina-analise .cv-relacionados h2{color:var(--ed-verde);font:700 clamp(24px,3vw,34px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.025em;margin:0 0 12px}
body.pagina-analise .avanalise-cartao .cartao-head{margin:0 0 12px}
body.pagina-analise .avanalise-cartao .cartao-head h2{font:700 clamp(24px,3vw,34px)/1.1 Georgia,'Times New Roman',serif;color:var(--ed-verde);letter-spacing:-.025em}
body.pagina-analise .avanalise-resposta,body.pagina-analise .avanalise-texto p,body.pagina-analise .avanalise-cartao>p{max-width:70ch;color:var(--ed-suave);font-size:15px;line-height:1.65}
body.pagina-analise .avanalise-cartao a,body.pagina-analise .avanalise-texto a,body.pagina-analise .cv-faq a,body.pagina-analise .cv-relacionados a{color:var(--ed-verde-2);font-weight:750}
body.pagina-analise .avanalise-kpis{background:#fff;border-color:var(--ed-linha);border-radius:8px;box-shadow:0 5px 18px rgba(15,61,46,.06)}
body.pagina-analise .avanalise-kpis .kpi{border-color:var(--ed-linha);color:var(--ed-tinta)}
body.pagina-analise .avanalise-kpis .kpi .valor{color:var(--ed-verde);font-family:Georgia,'Times New Roman',serif}
body.pagina-analise .avanalise-kpis .kpi .rotulo,body.pagina-analise .avanalise-kpis-nota{color:var(--ed-suave)}
body.pagina-analise .grafico-caixa,body.pagina-analise .tabela-rolo{background:#fff;border:1px solid var(--ed-linha);border-radius:9px;box-shadow:0 5px 18px rgba(15,61,46,.06);padding:18px;margin-top:20px}
body.pagina-analise .grafico-caixa{overflow:hidden}
body.pagina-analise .tabela-rolo{overflow-x:auto;padding:0;margin-top:18px}
body.pagina-analise .tabela{color:var(--ed-tinta);background:#fff}
body.pagina-analise .tabela thead th{background:var(--ed-verde);color:var(--ed-papel);border-color:var(--ed-verde-2);padding:11px 10px}
body.pagina-analise .tabela tbody td,body.pagina-analise .tabela tbody th{border-color:var(--ed-linha);padding:12px 10px}
body.pagina-analise .tabela tbody tr:nth-child(even){background:rgba(237,233,223,.55)}
body.pagina-analise .tabela tbody tr:hover{background:rgba(226,201,138,.2)}
body.pagina-analise .legenda-fipe-historico{color:var(--ed-suave);max-height:100px;padding:10px 2px 0;margin:0}
body.pagina-analise .legenda-fipe-historico i{box-shadow:0 0 0 2px rgba(15,61,46,.1)}
body.pagina-analise .lista-leia-tambem{gap:0;margin:18px 0 22px;max-width:760px}
body.pagina-analise .lista-leia-tambem li{padding:13px 0;border-bottom:1px solid var(--ed-linha);justify-content:space-between}
body.pagina-analise .lista-leia-tambem li a{font-size:15px}
body.pagina-analise .lista-leia-tambem li span{color:var(--ed-suave);font-size:12px;text-align:right}
body.pagina-analise .fipe-comparador-form select{background:#fff;border-color:var(--ed-linha);border-radius:7px;color:var(--ed-tinta)}
body.pagina-analise .fipe-comparador-form label{color:var(--ed-verde);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
body.pagina-analise .btn{background:var(--ed-verde);border-color:var(--ed-verde);color:var(--ed-papel);border-radius:5px;font-weight:750}
body.pagina-analise .btn:hover{background:var(--ed-verde-2);border-color:var(--ed-verde-2)}
body.pagina-analise .cv-cta-final{margin:0 -24px;padding:42px 38px;background:var(--ed-verde);border:0;border-top:4px solid var(--ed-dourado);border-radius:0;color:var(--ed-papel)}
body.pagina-analise .cv-cta-final h2{color:var(--ed-papel);font:700 30px/1.08 Georgia,'Times New Roman',serif}
body.pagina-analise .cv-cta-final-apoio{color:rgba(246,244,238,.78)}
body.pagina-analise .cv-cta-final .btn{background:var(--ed-dourado);border-color:var(--ed-dourado);color:var(--ed-verde)}
body.pagina-analise .cv-faq,body.pagina-analise .cv-relacionados{padding:38px;background:var(--ed-papel-2);margin:0;border-bottom:1px solid var(--ed-linha)}
body.pagina-analise .cv-faq-lista,body.pagina-analise .cv-relacionados a{background:#fff;border-color:var(--ed-linha)}
body.pagina-analise .cv-faq-item summary{color:var(--ed-verde)}
body.pagina-analise .cv-nota{margin:0;padding:24px 38px;color:var(--ed-suave);border-top:0;background:var(--ed-papel)}
body.pagina-analise .cv-nota summary::after{color:var(--ed-verde-2)}
body.pagina-analise .cv-nota-titulo{color:var(--ed-verde)}
body.pagina-analise .dica{color:var(--ed-suave)}

@media (max-width:1024px){
  body.pagina-analise .cv-layout{grid-template-columns:minmax(0,1fr);max-width:820px;padding-top:0}
  body.pagina-analise .cv-lado{top:var(--altura-topo);z-index:30;margin:0 -18px 18px;padding:0;background:var(--ed-papel);border-bottom:1px solid var(--ed-linha)}
  body.pagina-analise .cv-indice{border:0;padding:0;background:transparent}
  body.pagina-analise .cv-indice-titulo,body.pagina-analise .cv-indice-cta{display:none!important}
  body.pagina-analise .cv-indice ul{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding:9px 18px;scrollbar-width:none}
  body.pagina-analise .cv-indice ul::-webkit-scrollbar{display:none}
  body.pagina-analise .cv-indice a{white-space:nowrap;border-left:0;border-radius:999px;padding:6px 13px;background:var(--ed-papel-2);font-size:13px}
  body.pagina-analise .cv-indice a.on{border-left:0;background:var(--ed-verde);color:var(--ed-papel)}
  body.pagina-analise .cv-layout{padding-left:18px;padding-right:18px}
  body.pagina-analise .avanalise-cabecalho{margin-left:-18px;margin-right:-18px}
  body.pagina-analise .avanalise-cartao,body.pagina-analise .avanalise-secao,body.pagina-analise .avanalise-texto{padding-left:24px;padding-right:24px}
  body.pagina-analise .cv-cta-final{margin-left:-18px;margin-right:-18px;padding-left:24px;padding-right:24px}
  body.pagina-analise .cv-faq,body.pagina-analise .cv-relacionados{padding-left:24px;padding-right:24px}
  body.pagina-analise .cv-nota{padding-left:24px;padding-right:24px}
}
body.pagina-analise .app .topo{background:rgba(246,244,238,.97);border-bottom-color:var(--ed-linha);color:var(--ed-verde)}
body.pagina-analise .app .topo-nav a{color:var(--ed-suave)}
body.pagina-analise .app .topo-nav a:hover,body.pagina-analise .app .topo-nav a.ativo{color:var(--ed-verde);background:rgba(200,167,91,.18);border-color:var(--ed-dourado-claro)}
@media (max-width:640px){
  body.pagina-analise .avanalise-cabecalho{padding:30px 22px 28px}
  body.pagina-analise .avanalise-cabecalho h1{font-size:34px}
  body.pagina-analise .avanalise-prova{gap:14px 20px}
  body.pagina-analise .avanalise-cartao,body.pagina-analise .avanalise-secao,body.pagina-analise .avanalise-texto{padding:32px 20px}
  body.pagina-analise .avanalise-cartao h2,body.pagina-analise .avanalise-secao h2,body.pagina-analise .avanalise-texto h2{font-size:27px}
  body.pagina-analise .grafico-caixa{padding:10px 6px}
  body.pagina-analise .lista-leia-tambem li{display:block}
  body.pagina-analise .lista-leia-tambem li span{display:block;margin-top:4px;text-align:left}
}

/* A referência externa define a anatomia, não a identidade. As páginas vivas
   continuam usando os tokens e a tipografia do Radar. */
body.pagina-analise{
  --ed-verde:var(--surface2);
  --ed-verde-2:var(--accent);
  --ed-dourado:var(--accent);
  --ed-dourado-claro:var(--accent);
  --ed-papel:var(--bg);
  --ed-papel-2:var(--surface2);
  --ed-tinta:var(--text);
  --ed-suave:var(--text2);
  --ed-linha:var(--line);
}
body.pagina-analise .avanalise-cabecalho h1{font-family:inherit;font-size:clamp(22px,3.3vw,29px);line-height:1.2;letter-spacing:-.02em}
body.pagina-analise .avanalise-cabecalho h1{color:var(--text)}
body.pagina-analise .avanalise-cabecalho .avanalise-trilha,
body.pagina-analise .avanalise-cabecalho .avanalise-trilha a{color:var(--accent)}
body.pagina-analise .avanalise-cabecalho .avanalise-resumo{color:var(--text2)}
body.pagina-analise .avanalise-cartao h2,
body.pagina-analise .avanalise-secao h2,
body.pagina-analise .avanalise-texto h2,
body.pagina-analise .cv-faq h2,
body.pagina-analise .cv-relacionados h2,
body.pagina-analise .avanalise-cartao .cartao-head h2,
body.pagina-analise .cv-cta-final h2{font-family:inherit;font-size:16px;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
body.pagina-analise .avanalise-cartao h2,
body.pagina-analise .avanalise-secao h2,
body.pagina-analise .avanalise-texto h2,
body.pagina-analise .cv-faq h2,
body.pagina-analise .cv-relacionados h2,
body.pagina-analise .avanalise-cartao .cartao-head h2{color:var(--accent)}
body.pagina-analise .avanalise-prova b{font-family:inherit;font-size:20px}

/* ── gráfico da série mensal ──────────────────────────────────────────────────────────────
   Cor por token: --accent (entraram), --muted (saíram do ar, neutro de propósito: sair do
   feed não é bom nem ruim), --warn (linha da mediana de preço, bem distante do azul de
   --accent pra não confundir bar × linha). */
.grafico-analise-svg{width:100%;height:auto;display:block;overflow:visible}
.grafico-analise-svg .malha{stroke:var(--line);stroke-width:1}
/* As regras de cor valem pros dois SVGs do gráfico (o cheio E a mini-barra de início de
   série, analises/grafico.mjs::svgInicioSerie) — reaproveitam as MESMAS classes de marca, e
   escopar só em `.grafico-analise-svg` deixava a mini-barra sem nenhuma regra de fill,
   caindo no preto padrão do SVG (achado ao olhar a tela real em 8341, 08/09). */
.grafico-analise-svg .barra-entraram,.grafico-inicio-svg .barra-entraram{fill:var(--accent)}
.grafico-analise-svg .barra-sairam,.grafico-inicio-svg .barra-sairam{fill:var(--muted)}
.grafico-analise-svg .hachura-mes-parcial,.grafico-inicio-svg .hachura-mes-parcial{opacity:.9}
.grafico-analise-svg .hachura-linha,.grafico-inicio-svg .hachura-linha{stroke:var(--surface);stroke-width:1.6}
.grafico-analise-svg .traco-sem-dado{stroke:var(--line2);stroke-width:2;stroke-dasharray:3 3}
.grafico-analise-svg .linha-mediana{stroke:var(--warn);stroke-width:2}
.grafico-analise-svg .ponto-mediana{fill:var(--warn);stroke:var(--surface);stroke-width:1.5}
/* rótulo de mês e número de eixo: fonte do sistema (herdada), não monoespaçada — mono é só
   pra código no Design System. tabular-nums já resolve o alinhamento dos números sozinho. */
.grafico-analise-svg .eixo-rot,.grafico-inicio-svg .eixo-rot{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.legenda-fontes i.anel{background:var(--surface);border:2px dashed var(--line2)}

/* ── evolução mensal da FIPE por versão (pedido F3, 15/09/2026, analises/grafico.mjs::
   svgSerieFipeVersoes) — até 5 linhas, uma cor por versão. NUNCA cor literal: as 5 classes
   mapeiam para os 5 tokens de estado do design system (public/tema.css), o teto de cor
   categórica que o sistema oferece hoje; a 6ª versão em diante reusa a cor da 1ª (a tabela ao
   lado, sempre visível, nomeia todas por extenso — o gráfico é apoio, não a única leitura). */
.grafico-fipe-svg{width:100%;height:auto;display:block;overflow:visible}
.grafico-fipe-svg .malha{stroke:var(--line);stroke-width:1}
.grafico-fipe-svg .eixo-rot{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.grafico-fipe-svg .fipe-linha{stroke-width:2;fill:none}
.grafico-fipe-svg .fipe-ponto{stroke:var(--surface);stroke-width:1.5}
.fipe-serie-1{background:var(--accent)} .grafico-fipe-svg .fipe-serie-1{stroke:var(--accent);fill:var(--accent)}
.fipe-serie-2{background:var(--good)} .grafico-fipe-svg .fipe-serie-2{stroke:var(--good);fill:var(--good)}
.fipe-serie-3{background:var(--info)} .grafico-fipe-svg .fipe-serie-3{stroke:var(--info);fill:var(--info)}
.fipe-serie-4{background:var(--warn)} .grafico-fipe-svg .fipe-serie-4{stroke:var(--warn);fill:var(--warn)}
.fipe-serie-5{background:var(--bad)} .grafico-fipe-svg .fipe-serie-5{stroke:var(--bad);fill:var(--bad)}
.legenda-fipe-historico{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:112px;overflow:auto;align-content:flex-start;padding-right:4px;margin-bottom:10px}
.legenda-fipe-historico span{min-width:0;line-height:1.35}
.hero-miolo{max-width:72ch;padding:10px 0 2px}
.hero-miolo h1{font-size:clamp(25px,3.3vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--text);margin:0 0 12px}
.hero-miolo p:not(.avanalise-trilha){font-size:15px;line-height:1.6;color:var(--text2);margin:0}
.avanalise-cartao>h2{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.01em;margin:0}
.lista-leia-tambem{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.lista-leia-tambem li{display:flex;align-items:baseline;gap:10px;min-width:0;line-height:1.4}
.lista-leia-tambem li a{font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.lista-leia-tambem li span{font-size:12.5px;color:var(--muted)}
.fipe-historico-tabela{min-width:860px}
.fipe-historico-tabela th,.fipe-historico-tabela td{white-space:nowrap}
.fipe-historico-tabela th:first-child,.fipe-historico-tabela td:first-child{white-space:normal;min-width:220px}

.fipe-comparador-form{display:grid;gap:8px;margin:4px 0 16px;max-width:34rem}
.fipe-comparador-form label{font-size:12px;font-weight:700;color:var(--text2)}
.fipe-comparador-form select{width:100%;min-height:112px;padding:7px 9px;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit}
.fipe-comparador-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.fipe-comparador-form .btn{justify-self:start}

/* ── início de série (menos de 2 meses com dado): texto curto + 1 barra pequena ao lado ──── */
.avanalise-serie-inicio{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.avanalise-serie-inicio p{flex:1;min-width:200px;font-size:14px;color:var(--text2);
  line-height:1.55;margin:0;max-width:52ch}
.avanalise-serie-inicio-grafico{flex:none;width:96px;max-height:160px}
.grafico-inicio-svg{width:96px;height:160px;display:block}

/* ── tempo no ar: faixas (reaproveita .barra-linha/.trilho de app.css). São DUAS seções com
   o mesmo desenho e grandezas diferentes: #tempo-anunciado (há quanto tempo os anúncios
   ativos estão no ar) e #tempo-no-ar (quanto tempo os que sumiram ficaram). ─────────────── */
.avanalise-cartao .barra-linha{margin:9px 0 4px}
.avanalise-cartao .trilho{margin-bottom:2px}

/* ── <caption> visível (só a tabela por versão usa; as outras usam .sr-only). Aqui o ano de
   referência e o mínimo de anúncios são a régua da tabela, e a régua não pode ficar escondida:
   sem ela a tabela parece falar do modelo inteiro, que é justamente a leitura errada. Fica
   dentro da moldura de .tabela-rolo, acima do cabeçalho, no tom de texto secundário. ────── */
.avanalise-caption{caption-side:top;text-align:left;font-size:12.5px;line-height:1.5;
  color:var(--muted);padding:10px 9px;background:var(--surface);border-bottom:1px solid var(--line);
  /* mesma medida de leitura do resto da página: a legenda não acompanha a largura da tabela */
  max-width:72ch}
/* QA de celular 15/09: no celular a tabela por versão fica com 526px dentro de um .tabela-rolo
   de 292px, e a <caption> herdava a largura da TABELA (medido: 485px de texto, terminando em
   520px). Resultado: a frase que é a régua da tabela ("…com pelo menos N anúncios…") saía
   cortada na borda e só dava para ler rolando a tabela de lado — exatamente a leitura errada
   que o comentário acima quer evitar. Presa à largura visível, ela quebra em linhas e se lê
   inteira sem rolar. Os 68px são a moldura da página no celular (18px de cada lado da coluna
   + 16px de cada lado do cartão). */
@media (max-width:1024px){
  .avanalise-caption{max-width:calc(100vw - 68px)}
}

/* ── tabela por versão: o nome da versão vem em caixa alta da origem e é longo ("2.0 HURRICANE
   4 TURBO GASOLINA BLACKHAWK AT9"). Sem piso de largura ele quebrava em seis linhas no celular
   e a linha da tabela virava um bloco. Com o piso, quebra em duas e a tabela rola dentro de
   .tabela-rolo, que é o que as outras tabelas desta página já fazem. Número nunca quebra.
   O piso é moderado de propósito: mais largo que isto e o preço mediano, que é a resposta da
   seção, sai da primeira tela no celular. */
.avanalise-tabela-versao td:first-child,.avanalise-tabela-versao th:first-child{min-width:8.5rem}
.avanalise-tabela-versao td.num,.avanalise-tabela-versao th.num{white-space:nowrap}

/* ── "ver todos os estados" (details/summary, sem JS obrigatório — crawler lê tudo mesmo
   fechado) ───────────────────────────────────────────────────────────────────────────────── */
.avanalise-detalhes{margin-top:10px}
.avanalise-detalhes summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent);
  padding:8px 2px;list-style:none}
.avanalise-detalhes summary::-webkit-details-marker{display:none}
.avanalise-detalhes summary::before{content:'+ ';font-weight:800}
.avanalise-detalhes[open] summary::before{content:'\2212 '}
.avanalise-detalhes .tabela-rolo{margin-top:8px}

/* ── texto gerado do dado ────────────────────────────────────────────────────────────────── */
.avanalise-texto h2{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.01em;
  margin:0 0 10px}
.avanalise-texto{max-width:70ch}
.avanalise-texto p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 12px}

/* ── hub (/analises) — continua em coluna única, família visual da home ─────────────────── */
.avanalise-hub-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.avanalise-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}
.avanalise-hub-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.avanalise-hub-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avanalise-hub-card h3{margin:0;font-size:16px;font-weight:800;color:var(--text)}
.avanalise-hub-mes{font-size:12px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
.avanalise-hub-kpis{display:flex;gap:14px;margin:2px 0}
.avanalise-hub-kpis div{display:flex;flex-direction:column}
.avanalise-hub-kpis .valor{font-size:19px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.avanalise-hub-kpis small{font-size:11px;color:var(--muted)}
.avanalise-hub-preco{font-size:14.5px;font-weight:700;color:var(--text);margin:0;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avanalise-hub-fipe{margin:0}
.avanalise-hub-amostra{font-size:11.5px;color:var(--info);margin:0;font-weight:700}
/* affordance de clique: o cartão inteiro já é um <a>, mas sem isto ninguém sabia onde clicar
   (bronca do Bruno, 08/09) — a chamada fica sempre visível, cor de ação, com a seta reagindo
   ao hover do cartão inteiro (não precisa passar o mouse em cima da chamada especificamente). */
.avanalise-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}
.avanalise-hub-ver span{transition:transform .15s}
.avanalise-hub-card:hover .avanalise-hub-ver span{transform:translateX(3px)}

@media (max-width:640px){
  .avanalise{padding:18px 16px 32px}
  .avanalise-hub-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .avanalise-hub-grade{grid-template-columns:1fr}
}