:root {
    /* cores da marca: aparecem só na logo, na etiqueta do banner e no destaque "É dinheiro público" */
    --verde: #009c3b;
    --verde-escuro: #006b29;
    --amarelo: #ffdf00;
    --marinho: #00133f;
    --marinho-claro: #0a2a7a;
    --menta: #7be495;
    /* o azul da marca é a única cor de ação: links, botões, item de menu e aba ativa */
    --acao: #1c43b8;
    --sobre-acao: #ffffff;
    --etiqueta: #006b29;
    /* fundo claro neutro e cartões brancos */
    --fundo: #f6f5f1;
    --superficie: #ffffff;
    --texto: #1c2430;
    --texto-suave: #566070;
    --borda: #e2e0d8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --acao: #8fb2ff;
        --sobre-acao: #0b1530;
        --etiqueta: #7be495;
        --fundo: #0e131b;
        --superficie: #161d28;
        --texto: #e6ebf2;
        --texto-suave: #a2aec0;
        --borda: #2a3443;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

a { color: var(--acao); }

.conteudo {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 16px;
}

main.conteudo { padding-top: 1.5rem; padding-bottom: 2rem; flex: 1 0 auto; width: 100%; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 0.75rem; }

.topo {
    background: var(--marinho);
    border-bottom: 4px solid var(--amarelo);
    color: #fff;
}

.topo__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.marca {
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.marca__destaque { color: var(--menta); }

.marca { display: inline-flex; align-items: center; gap: 0.6rem; }
.marca__logo {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.35));
    transition: transform 0.25s ease;
}
.marca:hover .marca__logo, .marca:focus-visible .marca__logo { transform: rotate(-12deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .marca__logo { transition: none; } }

.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.menu a, .menu-recolhivel a { color: #fff; text-decoration: none; font-weight: 600; }
.menu a:hover, .menu a:focus-visible, .menu-recolhivel a:hover, .menu-recolhivel a:focus-visible { text-decoration: underline; }

.menu-recolhivel { display: none; position: relative; }

.menu-recolhivel summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--menta);
    border-radius: 6px;
    color: #fff;
}

.menu-recolhivel summary::-webkit-details-marker { display: none; }

.menu-recolhivel nav {
    position: absolute;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 15rem;
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--marinho-claro);
    border: 1px solid var(--menta);
    border-radius: 8px;
}

@media (max-width: 640px) {
    .menu--barra { display: none; }
    .menu-recolhivel { display: block; }
}
.rodape {
    background: #002776;
    border-top: 4px solid var(--amarelo);
    color: #e8eefc;
    padding: 1.25rem 0;
    font-size: 0.9rem;
}

.rodape a { color: #fff; }
.rodape .atualizado-em { color: #e8eefc; }

.rodape p { margin: 0; }

.aviso {
    background: color-mix(in srgb, var(--acao) 7%, var(--superficie));
    border: 1px solid color-mix(in srgb, var(--acao) 22%, var(--borda));
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin: 0 0 1rem;
}

.aviso p { margin: 0; }

.atualizado-em { list-style: none; color: var(--texto-suave); font-size: 0.9rem; margin: 0.5rem 0 0; padding: 0; }

.nota, .estornos { color: var(--texto-suave); font-size: 0.9rem; margin: 0.25rem 0 1rem; }

.erro, .vazio { padding: 1rem 1.15rem; background: var(--superficie); border: 1px dashed var(--borda); border-radius: 12px; }

.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.filtros label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--texto-suave); gap: 0.2rem; }

.filtros select, .filtros input[type="search"] {
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 4px;
    background: var(--superficie);
    color: var(--texto);
    min-width: 8rem;
}

.botao, .filtros button {
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 4px;
    background: var(--acao);
    color: var(--sobre-acao);
    cursor: pointer;
    text-decoration: none;
}

.botao-secundario {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--borda);
    border-radius: 4px;
    background: var(--superficie);
    text-decoration: none;
    font-weight: 600;
}

.tabela-rolagem { overflow-x: auto; margin: 0 0 1rem; }

table { border-collapse: collapse; width: 100%; background: var(--superficie); }
th, td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
th { font-size: 0.85rem; color: var(--texto-suave); white-space: nowrap; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.termometro {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.termometro__barra {
    display: inline-block;
    width: 3.5rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--borda);
    overflow: hidden;
}

.termometro__barra > span { display: block; height: 100%; border-radius: 999px; }
.termometro { color: var(--texto); }
.termometro__barra > span { background: var(--acao); }
.termometro--baixo .termometro__barra > span { width: 33%; opacity: 0.45; }
.termometro--medio .termometro__barra > span { width: 66%; opacity: 0.72; }
.termometro--alto .termometro__barra > span { width: 100%; }

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin: 0 0 1rem;
}

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 0.5rem 0; border-bottom: 1px solid var(--borda); }

.abas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.abas a { padding: 0.4rem 0.9rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease; }
.abas a:hover, .abas a:focus-visible { border-color: var(--acao); color: var(--acao); }
.abas a[aria-current="page"] { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }

:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }

/* ---- Visual: painel de destaque, passo a passo, etiquetas e cartões ---- */

.destaque {
    position: relative;
    /* ocupa a largura inteira da tela, de uma ponta a outra, e alinha o texto com o resto do conteúdo */
    margin: -1.5rem calc(50% - 50vw) 1.5rem;
    padding: 2.75rem max(16px, calc((100vw - 64rem) / 2 + 16px));
    color: var(--texto);
    background: linear-gradient(180deg, color-mix(in srgb, var(--acao) 8%, var(--fundo)) 0%, var(--fundo) 100%);
    border-bottom: 1px solid var(--borda);
}

.destaque h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.4rem, 4.5vw, 2.1rem);
    line-height: 1.2;
}

.destaque p { margin: 0; max-width: 40rem; color: var(--texto-suave); }
.destaque__verde { color: var(--acao); }

.passos {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.passos li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.passos li div { display: flex; flex-direction: column; }
.passos li span:last-child { color: var(--texto-suave); font-size: 0.9rem; }

.passos__numero {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--acao) 12%, var(--superficie));
    color: var(--acao);
    font-weight: 800;
}

@media (max-width: 640px) {
    .passos { grid-template-columns: 1fr; }
    .destaque { padding-top: 2rem; padding-bottom: 2rem; }
}

.etiqueta {
    display: inline-block;
    padding: 0.05rem 0.65rem;
    margin: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acao) 12%, var(--superficie));
    color: var(--acao);
    font-size: 0.8rem;
    font-weight: 700;
}

.cartao {
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.aviso { border-radius: 12px; }
.botao-secundario { border-radius: 999px; color: var(--texto); transition: border-color 0.15s ease, color 0.15s ease; }
.botao-secundario:hover, .botao-secundario:focus-visible { border-color: var(--acao); color: var(--acao); }
.tabela-rolagem { border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); }

/* ---- Seletores e campo de busca com a aparência do site ---- */

.filtros select,
.filtros input[type="search"] {
    border-radius: 10px;
    border: 1px solid var(--borda);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filtros select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    font-weight: 600;
    cursor: pointer;
    /* a seta é desenhada com dois degradês da cor do texto, então acompanha o tema claro e o escuro */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
        linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
    background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%;
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
}

.filtros select option {
    background: var(--superficie);
    color: var(--texto);
}

.filtros select:hover,
.filtros input[type="search"]:hover {
    border-color: var(--acao);
}

.filtros select:focus-visible,
.filtros input[type="search"]:focus-visible {
    outline: none;
    border-color: var(--acao);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 30%, transparent);
}

.filtros button { border-radius: 10px; }

/* ---- Busca em destaque (página inicial) ---- */

.filtros {
    padding: 1.25rem;
    gap: 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.filtros label { font-size: 0.95rem; font-weight: 600; }
.filtros label:first-child { flex: 1 1 20rem; }

.filtros select, .filtros input[type="search"] {
    font-size: 1.1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    min-width: 12rem;
}

.filtros input[type="search"] { width: 100%; padding-left: 1rem; }
.filtros select { padding-left: 1rem; }

.filtros button {
    font-size: 1.1rem;
    padding: 0.8rem 2rem;
}

.filtros button:hover { background: color-mix(in srgb, var(--acao) 82%, var(--texto)); }

/* formulário de período: colunas de largura igual, para o layout não mudar conforme o valor escolhido */
.filtros--grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    align-items: end;
}

.filtros--grade label:first-child { flex: none; }
.filtros--grade select { width: 100%; min-width: 0; }
@media (min-width: 40rem) { .filtros--grade label:first-child { grid-column: span 2; } }

/* lista de opções do seletor: onde o navegador permite estilizá-la (Chrome/Edge recentes), senão fica a lista padrão */
@supports (appearance: base-select) {
    .filtros select,
    .filtros select::picker(select) { appearance: base-select; }

    .filtros select::picker-icon { display: none; }

    .filtros select::picker(select) {
        margin-top: 0.35rem;
        padding: 0.4rem;
        border: 1px solid var(--borda);
        border-radius: 12px;
        background: var(--superficie);
        box-shadow: 0 8px 24px rgb(0 19 63 / 0.18);
    }

    .filtros select option {
        padding: 0.65rem 0.9rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
    }

    .filtros select option:hover,
    .filtros select option:focus-visible {
        background: color-mix(in srgb, var(--acao) 12%, var(--superficie));
        outline: none;
    }

    .filtros select option:checked {
        background: var(--acao);
        color: var(--sobre-acao);
    }

    .filtros select option::checkmark { display: none; }
}

/* ---- Resultados da busca: linhas em cartões, com colunas alinhadas ---- */

.resultados { display: grid; gap: 0.6rem; margin: 0 0 1rem; }

.resultados li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 6.5rem 8.5rem 4.5rem 1.25rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.resultados li:hover,
.resultados li:focus-within {
    border-color: var(--acao);
    box-shadow: 0 4px 12px rgb(16 24 40 / 0.12);
    transform: translateY(-1px);
}

.resultados li::after {
    content: "›";
    color: var(--texto-suave);
    font-size: 1.5rem;
    line-height: 1;
    text-align: right;
}

.resultados li a {
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.resultados li a:hover, .resultados li a:focus-visible { text-decoration: underline; }

.resultados .etiqueta { margin: 0; justify-self: start; }

.resultados .nota {
    margin: 0;
    justify-self: start;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .resultados li { grid-template-columns: 44px auto auto minmax(0, 1fr) 1.25rem; row-gap: 0.4rem; }
    .resultados li .foto { grid-column: 1; grid-row: 1 / span 2; }
    .resultados li a { grid-column: 2 / span 3; }
    .resultados li::after { grid-column: 5; grid-row: 1 / span 2; }
    .resultados .etiqueta, .resultados .nota { grid-row: 2; }
    .resultados .etiqueta { grid-column: 2; }
    .resultados .nota:nth-of-type(3) { grid-column: 3; }
    .resultados .nota:nth-of-type(4) { grid-column: 4; }
}

/* ---- Cabeçalho ordenável da lista de resultados ---- */

.resultados__cabecalho {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 6.5rem 8.5rem 4.5rem 1.25rem;
    gap: 0.75rem;
    padding: 0 1rem;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}

.resultados__cabecalho a {
    justify-self: start;
    color: var(--texto-suave);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.resultados__cabecalho a span { margin-left: 0.3rem; opacity: 0.5; }
.resultados__cabecalho a.ativo { color: var(--texto); }
.resultados__cabecalho a.ativo span { opacity: 1; color: var(--acao); }
.resultados__cabecalho a:hover, .resultados__cabecalho a:focus-visible { color: var(--acao); }

@media (max-width: 640px) {
    .resultados__cabecalho { grid-template-columns: repeat(4, auto); justify-content: space-between; }
    .resultados__espaco { display: none; }
}

/* ---- Cor da etiqueta por casa: Câmara em verde, Senado em azul ---- */

.etiqueta--camara { background: color-mix(in srgb, var(--acao) 12%, var(--superficie)); color: var(--acao); }
.etiqueta--senado { background: color-mix(in srgb, var(--texto-suave) 16%, var(--superficie)); color: var(--texto); }

/* ---- Abas de mês: meses sem gasto ficam esmaecidos, mas continuam clicáveis ---- */

.abas--meses { gap: 0.4rem; }
.abas--meses a { padding: 0.35rem 0.8rem; }
.abas a.abas__vazia { color: var(--texto-suave); font-weight: 500; opacity: 0.7; }
.abas a.abas__vazia[aria-current="page"] { color: var(--sobre-acao); opacity: 1; }

/* ---- Ranking de parlamentares: barra de resumo e grade com mais acabamento ---- */

.ranking-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
}

.ranking-barra p { margin: 0; }
.ranking-barra .abas { margin: 0; align-items: center; }
.abas--compacta, .abas--paginas { gap: 0.4rem; }
.abas--compacta a { padding: 0.25rem 0.7rem; }
.abas--paginas { justify-content: center; margin-top: 1rem; }
.abas__rotulo { color: var(--texto-suave); font-size: 0.9rem; }

.tabela-rolagem:has(.ranking) { box-shadow: 0 1px 2px rgb(16 24 40 / 0.05); }

table.ranking { border-collapse: separate; border-spacing: 0; }

table.ranking thead th {
    background: color-mix(in srgb, var(--borda) 35%, var(--superficie));
    color: var(--texto-suave);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--borda);
}

table.ranking tbody td { padding: 0.7rem 0.9rem; }
table.ranking tbody tr:nth-child(even) { background: color-mix(in srgb, var(--borda) 25%, transparent); }
table.ranking tbody tr { transition: background 0.12s ease; }
table.ranking tbody tr:hover { background: color-mix(in srgb, var(--acao) 8%, var(--superficie)); }
table.ranking tbody tr:last-child td { border-bottom: 0; }

.posicao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acao) 12%, var(--superficie));
    color: var(--acao);
    font-weight: 800;
    font-size: 0.85rem;
}

.ranking__nome { font-weight: 700; text-decoration: none; }
.ranking__nome:hover, .ranking__nome:focus-visible { text-decoration: underline; }
.ranking__total { font-weight: 800; font-size: 1.02rem; }
table.ranking .etiqueta { margin: 0; }

.pilula {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Foto do parlamentar: círculo com as iniciais por trás e a imagem por cima ---- */

.foto {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--acao) 12%, var(--superficie));
    color: var(--acao);
    font-weight: 800;
    vertical-align: middle;
}

.foto--pequena { width: 44px; height: 44px; font-size: 0.9rem; }
.foto--grande { width: 128px; height: 128px; font-size: 2.4rem; border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda); }
.foto::before { content: attr(data-iniciais); }
/* aproxima no rosto: a imagem é maior que o círculo e ancorada no alto, onde fica a cabeça nas fotos oficiais */
.foto img { position: absolute; left: -17%; top: -3%; width: 134%; height: 134%; object-fit: cover; object-position: 50% 8%; }

.perfil { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.perfil h1 { margin: 0 0 0.25rem; }
.perfil .nota { margin: 0 0 0.6rem; }

.ranking__pessoa { display: inline-flex; align-items: center; gap: 0.6rem; }

/* ---- Destaques da home: um cartão por casa ---- */

.destaques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }

.destaque-casa {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.destaque-casa h2 { margin: 0; font-size: 1.15rem; }
.destaque-casa .nota { margin: 0; }
.destaque-casa .vazio { margin: 0; }

.destaque-casa__numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.destaque-casa__numeros dt { font-size: 0.85rem; color: var(--texto-suave); }
.destaque-casa__numeros dd { margin: 0; font-size: 1.35rem; font-weight: 800; }

.destaque-casa__primeiro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.75rem;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--acao) 7%, var(--superficie));
    border-radius: 10px;
}

.destaque-casa__rotulo { flex-basis: 100%; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); }
.destaque-casa .botao-secundario { align-self: flex-start; }

@media (max-width: 640px) {
    .destaques { grid-template-columns: 1fr; }
}

/* ---- Página "Entenda a cota": seções em cartões, texto legível ---- */

.explicacao { display: grid; gap: 1rem; max-width: 46rem; }

.explicacao section {
    padding: 1rem 1.2rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
}

.explicacao h2 { margin: 0 0 0.5rem; }
.explicacao p:last-child, .explicacao ul:last-child { margin-bottom: 0; }

/* ---- Comparar dois parlamentares ---- */

.comparar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }

.comparar__cartao,
.comparar__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem;
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.comparar__vazio { justify-content: center; min-height: 10rem; border-style: dashed; color: var(--texto-suave); font-weight: 600; box-shadow: none; }
.comparar__cartao h2 { margin: 0; font-size: 1.2rem; }
.comparar__cartao .nota { margin: 0; }

.comparar__resultados { display: grid; gap: 0.5rem; margin: 0 0 1rem; }

.comparar__resultados li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
}

.comparar__resultados li a { font-weight: 700; text-decoration: none; flex: 1; }
.comparar__resultados li a:hover, .comparar__resultados li a:focus-visible { text-decoration: underline; }
.filtros--busca { margin: 0 0 1rem; }

@media (max-width: 640px) {
    .comparar { grid-template-columns: 1fr; }
}

.comparar__numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; width: 100%; }
.comparar__numeros dt { font-size: 0.8rem; color: var(--texto-suave); }
.comparar__numeros dd { margin: 0; font-size: 1.2rem; font-weight: 800; }
.comparar__cartao .vazio { margin: 0; }
.comparar__tabela td.maior { font-weight: 800; background: color-mix(in srgb, var(--acao) 12%, var(--superficie)); }
.comparar__tabela td:first-child { overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .comparar__tabela { font-size: 0.82rem; }
    .comparar__tabela thead th, .comparar__tabela tbody td { padding: 0.5rem 0.45rem; }
    .comparar__tabela thead th { white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
}

.destaque-texto { padding: 0.7rem 0.9rem; background: color-mix(in srgb, var(--amarelo) 22%, var(--superficie)); border-left: 4px solid var(--amarelo); border-radius: 8px; }

/* ---- Banner da home: busca dentro do banner e números do período ---- */

.destaque__etiqueta {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.2rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--etiqueta) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--etiqueta) 10%, transparent);
    color: var(--etiqueta);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.destaque--busca { padding-bottom: 2rem; }
.destaque--busca h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); }
.destaque--busca p { max-width: 44rem; }

.filtros--hero {
    margin: 1.4rem 0 0;
    max-width: 56rem;
    box-shadow: 0 8px 24px rgb(16 24 40 / 0.08);
}
.filtros--hero label:first-child { flex: 1 1 14rem; }
.filtros--hero select { min-width: 10rem; }
.filtros--hero button { align-self: flex-end; }

.numeros {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.4rem 0 0;
    padding: 0;
    max-width: 56rem;
}

.numeros li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

.numeros strong { font-size: clamp(1.25rem, 3.2vw, 1.8rem); font-weight: 800; color: var(--acao); line-height: 1.15; }
.numeros span { font-size: 0.85rem; color: var(--texto-suave); }
.destaque .numeros__periodo { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--texto-suave); }

@media (max-width: 640px) {
    .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rodape__links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.5rem 0 0; }

.filtros--grade .filtros__linha-toda { grid-column: 1 / -1; }
.filtros--grade label { min-width: 0; }
.filtros--grade select { text-overflow: ellipsis; }