/* 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} } /* ── diagramação editorial das páginas vivas (/analises, /fipe) ───────────────────────────── A referência do Clube dos Imóveis entra só como ANATOMIA: índice lateral de seções, cabeçalho em faixa, blocos em bandas alternadas com respiro largo, instrumentos (KPI, gráfico, tabela) em superfície própria e faixa de decisão no fim. Cor, tipografia e tokens são os do Radar (tema-v8.css), decisão do Bruno de 17/09/2026. Revisão V1 de 28/09/2026 (prévia de motos reprovada: "superbugado as cores, elementos, confuso"). A pele antiga declarava uma paleta paralela (--ed-verde, --ed-papel, --ed-dourado…) com valores do Clube e cores literais (#fff, rgba creme e dourado) e depois remapeava essa paleta para os tokens do Radar. O remapeamento trocou os PAPÉIS: --ed-verde, que era o fundo escuro do hero, virou texto em cima do fundo escuro (índice ativo, CTA do índice, rótulo do seletor, "de onde vêm os números"); --ed-papel, que era texto claro, virou texto escuro no botão; e os literais seguiram claros (topo creme, FAQ e "Leia também" brancos, seletor branco). Agora não existe paleta paralela: cada papel lê direto o token do Radar. fundo da página --bg texto --text (15,0:1 sobre --bg) banda alternada --cv-faixa texto de apoio --text2 (9,6:1 sobre a banda) instrumento/cartão --surface texto discreto --muted (6,1:1 sobre --surface) cabeçalho de tabela --surface2 ação (botão/link) --accent com --accent-ink (11,3:1) borda de separação --line borda de campo --line2 (3,5:1 sobre --surface) foco --accent (contorno de 2px) --cv-faixa é o único tom derivado (metade do caminho entre --bg e --surface): separa as bandas sem competir com o instrumento, que continua em --surface. */ body.pagina-analise{--cv-faixa:color-mix(in srgb,var(--surface) 55%,var(--bg)); /* Recuo único: cabeçalho, CTA do topo, bandas, FAQ e nota começam na MESMA vertical (antes eram três, a 14px, 0 e 38px da coluna). Quem sangra para fora da coluna (-sangria) soma a sangria ao recuo. No desktop sangram o cabeçalho e a faixa de decisão; no celular, todas as bandas. */ --cv-recuo:34px;--cv-sangria:24px} body.pagina-analise #ssr{background:var(--bg)} 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 var(--cv-sangria) 72px;margin:0 auto} body.pagina-analise .cv-conteudo{min-width:0;gap:0} body.pagina-analise .hero-miolo{max-width:none;padding:0} /* índice: fio vertical em vez de cartão; cores continuam as de conteudo.css (texto de apoio, ativo em --accent sobre --accent-soft com o fio lateral aceso) */ body.pagina-analise .cv-lado{top:calc(var(--altura-topo) + 16px);padding:30px 14px 24px 0} body.pagina-analise .cv-indice{padding:0 0 0 13px;border:0;border-left:1px solid var(--line); border-radius:0;background:transparent;box-shadow:none} body.pagina-analise .cv-indice-titulo{margin:0 0 13px} body.pagina-analise .cv-indice ul{gap:2px} body.pagina-analise .cv-indice a{border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:8px 10px} body.pagina-analise .cv-indice-cta{margin:20px 10px 0 0!important;padding:12px 0!important;font-size:12.5px!important} /* cabeçalho em faixa: é o começo da leitura, não a peça que grita (essa é a faixa de decisão) */ body.pagina-analise .avanalise-cabecalho{background:var(--surface);margin:0 calc(-1 * var(--cv-sangria)); padding:40px calc(var(--cv-recuo) + var(--cv-sangria)) 34px;border-bottom:1px solid var(--line)} body.pagina-analise .avanalise-cabecalho h1{max-width:30ch;margin:0 0 12px;color:var(--text); font-size:clamp(24px,3.3vw,32px);line-height:1.18;letter-spacing:-.02em} body.pagina-analise .avanalise-cabecalho .avanalise-trilha{margin:0 0 14px} body.pagina-analise .avanalise-cabecalho .avanalise-resumo{max-width:66ch;color:var(--text2); font-size:15.5px;line-height:1.6;font-weight:500;margin:0} body.pagina-analise .avanalise-prova{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px; padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px} body.pagina-analise .avanalise-prova b{display:block;margin-bottom:3px;color:var(--text); font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums} body.pagina-analise .cv-cta-topo{margin:0;padding:24px var(--cv-recuo) 12px} /* bandas: seções sem cartão próprio, separadas por fio e alternando --bg / --cv-faixa */ body.pagina-analise .avanalise-cartao,body.pagina-analise .avanalise-secao,body.pagina-analise .avanalise-texto{ border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none; padding:44px var(--cv-recuo);margin:0;min-height:0;max-width:none} body.pagina-analise .avanalise-cartao:nth-of-type(odd){background:var(--cv-faixa)} /* H2 é a pergunta da seção: cor de texto, não de ação. --accent fica só para o que se clica. */ body.pagina-analise .avanalise-cartao h2,body.pagina-analise .avanalise-secao h2, body.pagina-analise .avanalise-texto h2,body.pagina-analise .avanalise-cartao .cartao-head h2, body.pagina-analise .cv-faq h2,body.pagina-analise .cv-relacionados h2{margin:0 0 10px;color:var(--text); font-size:clamp(19px,2.1vw,22px);font-weight:750;line-height:1.25;letter-spacing:-.015em;text-transform:none} body.pagina-analise .avanalise-cartao .cartao-head{margin:0 0 10px} body.pagina-analise .avanalise-resposta,body.pagina-analise .avanalise-texto p, body.pagina-analise .avanalise-cartao>p{max-width:70ch;color:var(--text2);font-size:15px;line-height:1.65} body.pagina-analise .avanalise-cartao a:not(.btn),body.pagina-analise .avanalise-texto a:not(.btn){color:var(--accent);font-weight:700} /* instrumentos: KPI, gráfico e tabela em --surface com borda --line */ body.pagina-analise .avanalise-kpis{background:var(--surface);border-color:var(--line);box-shadow:none} body.pagina-analise .avanalise-kpis .kpi{border-color:var(--line)} body.pagina-analise .avanalise-kpis .kpi .valor{color:var(--text)} body.pagina-analise .grafico-caixa,body.pagina-analise .tabela-rolo{background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;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(--text);background:var(--surface)} body.pagina-analise .tabela thead th{background:var(--surface2);color:var(--text2);border-color:var(--line);padding:11px 10px} body.pagina-analise .tabela tbody td,body.pagina-analise .tabela tbody th{border-color:var(--line);padding:12px 10px} /* cabeçalho de linha (nome da versão na tabela da FIPE): sem isto o navegador centralizava e engrossava o , e a coluna de nomes virava um bloco centrado ao lado de números à direita */ body.pagina-analise .tabela tbody th{text-align:left;font-size:13.5px;font-weight:600;line-height:1.4; color:var(--text);border-bottom:1px solid var(--line);vertical-align:middle} /* zebra a meio caminho de --surface2: com --surface2 cheio a etiqueta neutra (--muted sobre --neutral-soft) caía para 4,3:1 nas linhas pares */ body.pagina-analise .tabela tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface2) 50%,var(--surface))} body.pagina-analise .tabela tbody tr:hover{background:var(--accent-soft)} body.pagina-analise .legenda-fipe-historico{color:var(--text2);padding:10px 2px 0;margin:0} /* "leia também" dentro da análise: lista com fio, sem cartão */ 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(--line);justify-content:space-between} body.pagina-analise .lista-leia-tambem li a{font-size:15px} body.pagina-analise .lista-leia-tambem li span{font-size:12.5px;text-align:right} /* bloco do fim: FAQ e leia também em banda, faixa de decisão sangrando até a borda */ body.pagina-analise .cv-faq,body.pagina-analise .cv-relacionados{padding:38px var(--cv-recuo);margin:0; background:var(--cv-faixa);border-bottom:1px solid var(--line)} body.pagina-analise .cv-cta-final{margin:0 calc(-1 * var(--cv-sangria));border:0;border-top:4px solid var(--accent); padding:42px calc(var(--cv-recuo) + var(--cv-sangria));border-radius:0;box-shadow:none} body.pagina-analise .cv-cta-final h2{font-size:clamp(21px,2.6vw,26px);margin:0 0 10px} body.pagina-analise .cv-nota{margin:0;padding:24px var(--cv-recuo);border-top:0} /* todas as bandas sangram até a borda do cabeçalho: sem isto a banda em --cv-faixa ficava 24px mais estreita que o cabeçalho logo acima dela e a página ganhava um degrau dos dois lados */ body.pagina-analise .avanalise-cartao,body.pagina-analise .avanalise-secao,body.pagina-analise .avanalise-texto, body.pagina-analise .cv-faq,body.pagina-analise .cv-relacionados,body.pagina-analise .cv-nota{ margin-left:calc(-1 * var(--cv-sangria));margin-right:calc(-1 * var(--cv-sangria)); padding-left:calc(var(--cv-recuo) + var(--cv-sangria));padding-right:calc(var(--cv-recuo) + var(--cv-sangria))} /* hub /analises: sem a casca de duas colunas, a página ficava sem margem nenhuma (texto colado na borda da tela no celular). Mesma sangria e mesmo recuo das páginas de modelo. */ body.pagina-analise .avanalise-hub{max-width:var(--maxw);margin:0 auto;padding:0 var(--cv-sangria) 56px} body.pagina-analise .avanalise-hub .avanalise-hub-grade{padding:28px var(--cv-recuo) 0} @media (max-width:1024px){ body.pagina-analise{--cv-sangria:18px;--cv-recuo:6px} body.pagina-analise .cv-layout{grid-template-columns:minmax(0,1fr);max-width:820px;padding-bottom:56px} /* faixa de seções do celular: fundo e pílulas vêm de conteudo.css (ativa em --accent com --accent-ink) */ body.pagina-analise .cv-lado{top:var(--altura-topo);margin:0 calc(-1 * var(--cv-sangria));padding:0} body.pagina-analise .cv-indice{border:0;padding:0} body.pagina-analise .cv-indice a{border-radius:999px} } @media (max-width:640px){ body.pagina-analise{--cv-sangria:16px;--cv-recuo:4px} body.pagina-analise .avanalise-cabecalho{padding-top:28px;padding-bottom:26px} body.pagina-analise .avanalise-cabecalho h1{font-size:26px} body.pagina-analise .avanalise-prova{gap:14px 20px} body.pagina-analise .avanalise-cartao,body.pagina-analise .avanalise-secao,body.pagina-analise .avanalise-texto, body.pagina-analise .cv-faq,body.pagina-analise .cv-relacionados{padding-top:30px;padding-bottom:30px} body.pagina-analise .cv-cta-final{padding-top:30px;padding-bottom:30px} 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} } /* ── 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:11px;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 e comparador de modelos (analises/grafico.mjs:: svgLinhasMensais) — até 5 linhas coloridas, o resto em cinza de contexto. Cor categórica é identidade, não estado: as 5 classes leem --serie-1..5 (tema-v8.css), nunca --good/--warn/--bad (reservados a estado) nem --accent (ação). Da 6ª série em diante, .fipe-serie-outras em --muted (a transparência vem do próprio gráfico). A tabela ao lado nomeia todas por extenso. */ .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:11px;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(--serie-1)} .grafico-fipe-svg .fipe-serie-1{stroke:var(--serie-1);fill:var(--serie-1)} .fipe-serie-2{background:var(--serie-2)} .grafico-fipe-svg .fipe-serie-2{stroke:var(--serie-2);fill:var(--serie-2)} .fipe-serie-3{background:var(--serie-3)} .grafico-fipe-svg .fipe-serie-3{stroke:var(--serie-3);fill:var(--serie-3)} .fipe-serie-4{background:var(--serie-4)} .grafico-fipe-svg .fipe-serie-4{stroke:var(--serie-4);fill:var(--serie-4)} .fipe-serie-5{background:var(--serie-5)} .grafico-fipe-svg .fipe-serie-5{stroke:var(--serie-5);fill:var(--serie-5)} .fipe-serie-outras{background:var(--muted)} .grafico-fipe-svg .fipe-serie-outras{stroke:var(--muted);fill:var(--muted)} /* legenda inteira, sem teto de altura nem rolagem própria: no celular a rolagem interna escondia metade das versões. A chave é um traço curto (o gráfico é de LINHA), não bolinha. */ .legenda-fipe-historico{display:flex;flex-wrap:wrap;gap:6px 16px;align-content:flex-start;margin-bottom:10px} .legenda-fipe-historico span{min-width:0;line-height:1.35} .legenda-fipe-historico i{width:14px;height:3px;border-radius:2px;flex:none} .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} /* lista múltipla: sem isto o Chrome pinta a opção marcada no azul do sistema, fora do tema. O degradê de uma cor só é o jeito que o Chrome aceita de trocar o fundo da opção marcada. */ .fipe-comparador-form option{padding:4px 6px;color:var(--text);background:var(--surface)} .fipe-comparador-form option:checked{color:var(--text);font-weight:700; background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)} .fipe-comparador-form .btn{justify-self:start} /* V4 (28/09/2026): caixas de marcar no lugar do