/**
 * Landing page pública da Semulher.
 *
 * Complementa `landing-base.css`, que traz o reset, a grade e os componentes de
 * formulário, botão e tabela usados pela página. O tema administrativo do sistema
 * (`style.css`, `style-preset.css`) NÃO é carregado aqui.
 *
 * Organização do arquivo:
 *   1. Tokens de design (paleta, espaçamento, raio, sombra, transição)
 *   2. Base e utilidades de acessibilidade
 *   3. Cabeçalho
 *   4. Apresentação e chamada do 180
 *   5. Títulos e descrições de seção
 *   6. Cartões (indicadores, gráficos, fontes, serviços)
 *   7. Filtros
 *   8. Estados de interface (carregando, vazio, erro)
 *   9. Metodologia, limitações, serviços e canais
 *  10. Rodapé
 *  11. Responsividade, movimento reduzido e impressão
 */

/* 1. Tokens de design ------------------------------------------------------- */
.landing-publica {
    /* Paleta institucional (roxo, alinhado à identidade visual da Semulher). */
    --landing-primaria: #6f42c1;
    --landing-primaria-escura: #5a34a0;
    --landing-primaria-profunda: #4b2a8a;
    --landing-primaria-borda: #c7b3e6;
    --landing-primaria-media: #e3d6f7;
    --landing-primaria-clara: #f3edfb;
    --landing-primaria-suave: #f8f5fc;

    /* Neutros. */
    --landing-tinta: #1d2630;
    --landing-texto: #3e4853;
    --landing-texto-suave: #5b6b79;
    --landing-borda: var(--bs-border-color, #dbe0e5);
    --landing-fundo-suave: #f8f9fb;

    /* Alerta (âmbar) — avisos e limitações. */
    --landing-alerta-borda: #b26a00;
    --landing-alerta-fundo: #fff6e5;
    --landing-alerta-texto: #6b3f00;

    /* Emergência (vinho) — canais de proteção. */
    --landing-emergencia: #a3123a;
    --landing-emergencia-fundo: #fdf1f4;
    --landing-emergencia-texto: #5c0a20;

    /* Erro. */
    --landing-erro-borda: #e0b4b4;
    --landing-erro-fundo: #fdf5f5;

    /* Escala de espaçamento. */
    --landing-espaco-1: 0.25rem;
    --landing-espaco-2: 0.5rem;
    --landing-espaco-3: 0.75rem;
    --landing-espaco-4: 1rem;
    --landing-espaco-5: 1.5rem;
    --landing-espaco-6: 2rem;
    --landing-espaco-7: 3rem;
    --landing-espaco-8: 4rem;

    /* Raios, sombras e transições. */
    --landing-raio-sm: 8px;
    --landing-raio-md: 12px;
    --landing-raio-lg: 16px;
    --landing-raio-pill: 999px;
    --landing-sombra-sm: 0 1px 2px rgba(29, 38, 48, 0.05), 0 1px 3px rgba(29, 38, 48, 0.06);
    --landing-sombra-md: 0 8px 22px -8px rgba(29, 38, 48, 0.14);
    --landing-sombra-roxa: 0 10px 28px -14px rgba(75, 42, 138, 0.35);
    --landing-transicao: 180ms ease;

    /**
     * Altura aproximada do cabeçalho fixo. Serve de base para o `scroll-margin-top`
     * das seções, para que os links do menu não parem atrás do cabeçalho.
     */
    --landing-topo-altura: 92px;

    background: var(--bs-body-bg);
    color: var(--landing-texto);
}

.landing-publica ::selection {
    background: var(--landing-primaria-media);
    color: var(--landing-tinta);
}

/* 2. Base e utilidades de acessibilidade ------------------------------------ */

/* Link de pular para o conteúdo. */
.landing-pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1200;
    padding: 12px 20px;
    background: #fff;
    border: 2px solid var(--landing-primaria);
    border-radius: 0 0 var(--landing-raio-sm) 0;
    color: var(--landing-primaria-profunda);
    font-weight: 600;
    box-shadow: var(--landing-sombra-md);
}

.landing-pular:focus {
    left: 0;
}

/* Foco visível em toda a página. */
.landing-publica a:focus-visible,
.landing-publica button:focus-visible,
.landing-publica select:focus-visible,
.landing-publica summary:focus-visible,
.landing-publica [tabindex]:focus-visible {
    outline: 3px solid var(--landing-primaria-profunda);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Conteúdo visível apenas para leitores de tela. */
.landing-somente-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.landing-publica main[id],
.landing-publica main [id] {
    scroll-margin-top: calc(var(--landing-topo-altura) + 16px);
}

/* Botões do Bootstrap com a cor institucional, apenas dentro da landing. */
.landing-publica .btn-primary {
    --bs-btn-bg: var(--landing-primaria);
    --bs-btn-border-color: var(--landing-primaria);
    --bs-btn-hover-bg: var(--landing-primaria-escura);
    --bs-btn-hover-border-color: var(--landing-primaria-escura);
    --bs-btn-active-bg: var(--landing-primaria-profunda);
    --bs-btn-active-border-color: var(--landing-primaria-profunda);
    --bs-btn-disabled-bg: var(--landing-primaria);
    --bs-btn-disabled-border-color: var(--landing-primaria);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
}

.landing-publica .btn-outline-primary {
    --bs-btn-color: var(--landing-primaria-escura);
    --bs-btn-border-color: var(--landing-primaria-borda);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--landing-primaria);
    --bs-btn-hover-border-color: var(--landing-primaria);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--landing-primaria-profunda);
    --bs-btn-active-border-color: var(--landing-primaria-profunda);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
}

.landing-publica .btn {
    font-weight: 600;
    transition: background-color var(--landing-transicao), border-color var(--landing-transicao),
        color var(--landing-transicao), box-shadow var(--landing-transicao);
}

/* Campos de formulário com foco na cor institucional. */
.landing-publica .form-select:focus {
    border-color: var(--landing-primaria);
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.15);
}

/* 3. Cabeçalho --------------------------------------------------------------- */
.landing-topo {
    position: sticky;
    top: 0;
    /* Abaixo de `.landing-pular` (1200), acima do conteúdo da página. */
    z-index: 1030;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--landing-borda);
    box-shadow: 0 4px 16px -12px rgba(29, 38, 48, 0.25);
}

@supports (backdrop-filter: blur(6px)) {
    .landing-topo {
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(6px);
    }
}

/**
 * Em telas muito baixas (celular deitado) o cabeçalho ocuparia parte grande
 * demais da área visível, então o deslocamento de rolagem é zerado.
 */
@media (max-height: 480px) {
    .landing-publica {
        --landing-topo-altura: 0px;
    }
}

.landing-topo .landing-marca {
    display: flex;
    align-items: center;
    gap: var(--landing-espaco-3);
    text-decoration: none;
    color: inherit;
    border-radius: var(--landing-raio-sm);
}

.landing-topo .landing-marca img {
    height: 44px;
    width: auto;
}

.landing-topo .landing-marca-nome {
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.15;
    color: var(--landing-tinta);
}

.landing-topo .landing-marca-descricao {
    font-size: 0.8125rem;
    color: var(--landing-texto-suave);
}

.landing-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-menu a {
    display: inline-block;
    padding: 8px 12px;
    color: var(--landing-texto);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--landing-raio-sm);
    border-bottom: 2px solid transparent;
    transition: color var(--landing-transicao), background-color var(--landing-transicao);
}

.landing-menu a:hover,
.landing-menu a:focus {
    color: var(--landing-primaria-profunda);
    background: var(--landing-primaria-clara);
}

/* 4. Apresentação ------------------------------------------------------------ */
/**
 * Primeira tela: prosa institucional à esquerda e a chamada do 180 à direita,
 * com o mesmo peso visual dos indicadores — padrão das referências indicadas
 * pela Semulher (contrato de front-end, seção 4-A).
 */
.landing-apresentacao {
    position: relative;
    background:
        radial-gradient(42rem 24rem at 88% -4rem, rgba(111, 66, 193, 0.12), transparent 70%),
        radial-gradient(30rem 20rem at -6rem 110%, rgba(163, 18, 58, 0.05), transparent 70%),
        linear-gradient(180deg, #f6f2fb 0%, var(--bs-body-bg) 100%);
    border-bottom: 1px solid var(--landing-borda);
    padding: var(--landing-espaco-8) 0;
}

.landing-apresentacao-grade {
    display: grid;
    gap: var(--landing-espaco-7);
    align-items: start;
}

@media (min-width: 992px) {
    .landing-apresentacao-grade {
        grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
        gap: var(--landing-espaco-8);
    }
}

.landing-apresentacao h1 {
    font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.14;
    color: var(--landing-tinta);
    max-width: 20ch;
    margin-bottom: var(--landing-espaco-4);
}

.landing-apresentacao-apoio {
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--landing-primaria-profunda);
    max-width: 60ch;
    margin-bottom: var(--landing-espaco-5);
}

/* Largura de linha confortável: prosa em coluna larga cansa a leitura. */
.landing-apresentacao-texto p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--landing-texto);
    max-width: 68ch;
    margin-bottom: var(--landing-espaco-4);
}

.landing-apresentacao-texto p:last-child {
    margin-bottom: 0;
}

/* Chamada do 180: elemento de maior destaque da seção. */
.landing-chamada {
    background: linear-gradient(180deg, #ffffff 0%, var(--landing-emergencia-fundo) 100%);
    border: 1px solid #ecc3cf;
    border-top: 5px solid var(--landing-emergencia);
    border-radius: var(--landing-raio-lg);
    padding: var(--landing-espaco-6);
    box-shadow: var(--landing-sombra-md);
}

.landing-chamada-titulo {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--landing-emergencia-texto);
    margin-bottom: var(--landing-espaco-3);
}

.landing-chamada-texto {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--landing-emergencia-texto);
    margin-bottom: var(--landing-espaco-3);
}

.landing-chamada-numero {
    display: inline-flex;
    align-items: center;
    gap: var(--landing-espaco-3);
    min-height: 56px;
    padding: 8px 24px 8px 20px;
    border-radius: var(--landing-raio-pill);
    background: var(--landing-emergencia);
    color: #fff;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    box-shadow: 0 10px 24px -14px rgba(163, 18, 58, 0.8);
    transition: background-color var(--landing-transicao), transform var(--landing-transicao);
}

.landing-chamada-numero .landing-icone {
    width: 0.7em;
    height: 0.7em;
    stroke-width: 2.2;
}

.landing-chamada-numero:hover,
.landing-chamada-numero:focus-visible {
    background: var(--landing-emergencia-texto);
    color: #fff;
    text-decoration: none;
}

.landing-chamada-detalhe {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--landing-emergencia-texto);
    margin: var(--landing-espaco-4) 0 0;
}

/* Bloco de metadados (período, atualização, periodicidade). */
.landing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--landing-espaco-2) var(--landing-espaco-5);
    margin: 0;
    padding: 0;
}

.landing-meta > div {
    min-width: 0;
}

.landing-meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--landing-texto-suave);
    font-weight: 600;
    margin: 0 0 2px;
}

.landing-meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--landing-tinta);
    overflow-wrap: anywhere;
}

/**
 * Procedência dos dados: período, atualização, periodicidade e fonte. Sempre
 * visível, como exige o contrato, mas em peso discreto — não compete com os
 * indicadores.
 */
.landing-procedencia {
    display: flex;
    flex-wrap: wrap;
    gap: var(--landing-espaco-3) var(--landing-espaco-6);
    margin: var(--landing-espaco-6) 0 0;
    padding: var(--landing-espaco-4) 0 0;
    border-top: 1px solid var(--landing-borda);
}

.landing-procedencia dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--landing-texto-suave);
    margin: 0 0 2px;
}

.landing-procedencia dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--landing-texto);
    overflow-wrap: anywhere;
}

.landing-nota-demonstracao {
    margin-top: var(--landing-espaco-4);
    border-style: solid;
    border-color: #ecd9b0;
    background: var(--landing-alerta-fundo);
    color: var(--landing-alerta-texto);
    font-size: 0.8125rem;
}

/* 5. Títulos e descrições de seção ------------------------------------------ */
/* Respiro vertical entre seções: espaço em branco também é conteúdo. */
.landing-secao {
    padding: var(--landing-espaco-8) 0;
}

.landing-secao-suave {
    background: var(--landing-fundo-suave);
    border-top: 1px solid var(--landing-borda);
    border-bottom: 1px solid var(--landing-borda);
}

.landing-subsecao-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--landing-tinta);
    margin: var(--landing-espaco-7) 0 var(--landing-espaco-4);
}

.landing-secao-titulo {
    font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--landing-tinta);
    margin-bottom: var(--landing-espaco-3);
}

.landing-secao-titulo::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: var(--landing-espaco-2);
    border-radius: var(--landing-raio-pill);
    background: linear-gradient(90deg, var(--landing-primaria), var(--landing-primaria-borda));
}

.landing-secao-descricao {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--landing-texto-suave);
    max-width: 68ch;
}

.landing-publica main h3.h5 {
    font-weight: 700;
    color: var(--landing-tinta);
}

/* Notas informativas (sem mapa, contatos pendentes etc.). */
.landing-nota {
    display: flex;
    align-items: flex-start;
    gap: var(--landing-espaco-2);
    background: var(--landing-fundo-suave);
    border: 1px dashed var(--landing-borda);
    border-radius: var(--landing-raio-sm);
    padding: 10px 14px;
    max-width: none;
}

.landing-nota > i {
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--landing-texto-suave);
    flex-shrink: 0;
}

/**
 * Blocos temáticos com revelação progressiva. Só o primeiro começa aberto:
 * cinco gráficos simultâneos eram o principal fator de poluição visual.
 */
.landing-blocos {
    display: grid;
    gap: var(--landing-espaco-4);
    margin-top: var(--landing-espaco-6);
}

.landing-bloco-titulo {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--landing-tinta);
    margin: 0 0 var(--landing-espaco-2);
}

.landing-bloco {
    background: #fff;
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-lg);
    box-shadow: var(--landing-sombra-sm);
}

.landing-bloco-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--landing-espaco-3);
    min-height: 52px;
    padding: var(--landing-espaco-3) var(--landing-espaco-5);
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--landing-primaria-escura);
    border-radius: var(--landing-raio-lg);
}

.landing-bloco-resumo::-webkit-details-marker {
    display: none;
}

.landing-bloco-resumo:hover {
    color: var(--landing-primaria-profunda);
    background: var(--landing-primaria-suave);
}

.landing-bloco[open] > .landing-bloco-resumo {
    border-bottom: 1px solid var(--landing-borda);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.landing-bloco-seta {
    transition: transform var(--landing-transicao);
}

.landing-bloco[open] > .landing-bloco-resumo .landing-bloco-seta,
.landing-filtros[open] > .landing-filtros-resumo-botao .landing-bloco-seta {
    transform: rotate(180deg);
}

.landing-bloco-corpo {
    padding: var(--landing-espaco-5);
}

.landing-bloco-descricao {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--landing-texto-suave);
    max-width: 68ch;
    margin-bottom: var(--landing-espaco-4);
}

.landing-bloco-simples {
    margin-top: var(--landing-espaco-3);
}

.landing-lista-simples {
    color: var(--landing-texto-suave);
    line-height: 1.7;
    max-width: 68ch;
}

/* 6. Cartões ----------------------------------------------------------------- */
.landing-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr));
    gap: var(--landing-espaco-5);
}

/* Gráficos precisam de mais largura por coluna do que os cartões de número. */
.landing-grade-dupla {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}

/**
 * Três indicadores em destaque na primeira tela e os demais em bloco
 * secundário, com peso visual menor (contrato de front-end, seção 4-B).
 */
.landing-grade-destaque {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--landing-espaco-5);
    margin-top: var(--landing-espaco-6);
}

.landing-grade-secundaria {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--landing-espaco-4);
}

.landing-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-lg);
    padding: var(--landing-espaco-5);
    box-shadow: var(--landing-sombra-sm);
    transition: border-color var(--landing-transicao), box-shadow var(--landing-transicao),
        transform var(--landing-transicao);
}

.landing-card:hover,
.landing-card:focus-within {
    border-color: var(--landing-primaria-borda);
    box-shadow: var(--landing-sombra-md);
}

@media (prefers-reduced-motion: no-preference) {
    article.landing-card:hover,
    article.landing-card:focus-within {
        transform: translateY(-2px);
    }
}

.landing-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--landing-texto);
    margin-bottom: var(--landing-espaco-2);
}

/* Cartão de indicador: o número é o protagonista. */
article[data-landing-indicador] {
    border-top: 3px solid var(--landing-primaria);
}

.landing-valor {
    font-size: clamp(2rem, 1.7rem + 1vw, 2.625rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--landing-tinta);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.landing-unidade {
    font-size: 0.9375rem;
    color: var(--landing-texto-suave);
}

/**
 * Hierarquia dentro do cartão: o valor domina, o título vem em seguida e a
 * procedência fica discreta no rodapé. Limitações e supressão só aparecem no
 * painel de ajuda, sob demanda.
 */
.landing-indicador-titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--landing-texto);
}

.landing-indicador-procedencia {
    margin-top: var(--landing-espaco-4);
    padding-top: var(--landing-espaco-3);
    border-top: 1px solid var(--landing-borda);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--landing-texto-suave);
}

.landing-indicador-separador {
    margin: 0 4px;
}

/* Destaque: número maior e faixa superior mais marcada. */
.landing-indicador-destaque {
    padding: var(--landing-espaco-6);
    border-top-width: 4px;
}

.landing-indicador-destaque .landing-valor {
    font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem);
}

.landing-indicador-destaque .landing-indicador-titulo {
    font-size: 1.0625rem;
}

/* Secundário: mesma informação, peso visual menor. */
.landing-indicador-secundario {
    background: transparent;
    border-color: var(--landing-borda);
    border-top-color: var(--landing-primaria-borda);
    box-shadow: none;
}

.landing-indicador-secundario .landing-valor {
    font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
}

.landing-indicador-secundario .landing-unidade,
.landing-indicador-secundario .landing-indicador-titulo {
    font-size: 0.8125rem;
}

.landing-ajuda-limitacoes {
    margin-top: var(--landing-espaco-3);
}

.landing-ajuda-limitacoes ul {
    margin: 0;
    padding-left: 1.1rem;
}

.landing-ajuda-rotulo {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--landing-texto-suave);
    margin: 0 0 4px;
}

.landing-ajuda-rodape {
    margin: var(--landing-espaco-3) 0 0;
    padding-top: var(--landing-espaco-2);
    border-top: 1px dashed var(--landing-primaria-borda);
    font-size: 0.75rem;
}

/* Cabeçalho do cartão de indicador: título e botão de ajuda lado a lado. */
.landing-indicador-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--landing-espaco-2);
    margin-bottom: var(--landing-espaco-2);
}

.landing-indicador-cabecalho h3 {
    margin-bottom: 0;
}

/* Botão de ajuda: alvo de toque de 44 px, exigência A9. */
.landing-ajuda-botao {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--landing-primaria-escura);
    cursor: pointer;
}

.landing-ajuda-botao > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--landing-primaria-borda);
    border-radius: 50%;
    background: var(--landing-primaria-clara);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.landing-ajuda-botao:hover > span,
.landing-ajuda-botao[aria-expanded="true"] > span {
    background: var(--landing-primaria-media);
}

.landing-ajuda {
    background: var(--landing-primaria-suave);
    border: 1px solid var(--landing-primaria-media);
    border-radius: var(--landing-raio-md);
    padding: var(--landing-espaco-3);
    margin-bottom: var(--landing-espaco-3);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--landing-texto);
}

/* Aviso obrigatório do cartão: visível, não apenas no texto de ajuda. */
.landing-aviso-cartao,
.landing-aviso-grafico {
    display: block;
    background: var(--landing-alerta-fundo);
    border-left: 4px solid var(--landing-alerta-borda);
    border-radius: var(--landing-raio-sm);
    padding: var(--landing-espaco-3);
    margin-bottom: var(--landing-espaco-3);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--landing-alerta-texto);
}

/* Nota sobre supressão de pequenos valores. */
.landing-supressao {
    font-size: 0.78125rem;
    line-height: 1.5;
    color: var(--landing-texto-suave);
    border-left: 3px dashed var(--landing-borda);
    padding-left: var(--landing-espaco-3);
    margin-bottom: var(--landing-espaco-3);
}

.landing-valor-suprimido {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    color: var(--landing-texto-suave);
}

.landing-card-descricao,
.landing-card-definicao {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--landing-texto-suave);
}

.landing-card-fonte {
    font-size: 0.8125rem;
    color: var(--landing-texto-suave);
}

.landing-card-definicao summary,
.landing-grafico-detalhes summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--landing-primaria-escura);
    padding: 6px 0;
    border-radius: 4px;
    transition: color var(--landing-transicao);
}

.landing-card-definicao summary:hover,
.landing-grafico-detalhes summary:hover {
    color: var(--landing-primaria-profunda);
    text-decoration: underline;
}

/* Cartão de gráfico. */
figure.landing-grafico,
figure.landing-territorio {
    margin: 0;
}

.landing-grafico-cabecalho {
    display: block;
    margin-bottom: var(--landing-espaco-3);
}

.landing-grafico-area {
    min-height: 280px;
}

/* Destaque numérico (taxa de conclusão). O valor está em texto, nunca só em cor. */
.landing-destaque {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--landing-espaco-2);
    background: var(--landing-primaria-suave);
    border: 1px solid var(--landing-primaria-media);
    border-radius: var(--landing-raio-md);
    padding: var(--landing-espaco-3) var(--landing-espaco-4);
    margin-bottom: var(--landing-espaco-4);
}

.landing-destaque-rotulo {
    font-size: 0.8125rem;
    color: var(--landing-texto-suave);
}

.landing-destaque-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--landing-primaria-profunda);
    font-variant-numeric: tabular-nums;
}

/* Legenda textual sempre visível: a cor nunca é o único diferenciador. */
.landing-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--landing-espaco-2) var(--landing-espaco-4);
    margin: var(--landing-espaco-3) 0 0;
    font-size: 0.8125rem;
    color: var(--landing-texto);
}

.landing-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: var(--landing-espaco-2);
}

.landing-legenda-marca {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid rgba(29, 38, 48, 0.15);
}

.landing-legenda-marca-1 { background: #5a34a0; }
.landing-legenda-marca-2 { background: #b02a5b; }
.landing-legenda-marca-3 { background: #1f6f57; }
.landing-legenda-marca-4 { background: #8a5a1d; }

/* Valor suprimido: hachura, para diferenciar sem depender de cor. */
.landing-legenda-marca-suprimida {
    background: repeating-linear-gradient(
        45deg,
        #6b7280,
        #6b7280 3px,
        #ffffff 3px,
        #ffffff 6px
    );
}

.landing-grafico-detalhes {
    margin-top: var(--landing-espaco-4);
    border-top: 1px dashed var(--landing-borda);
    padding-top: var(--landing-espaco-2);
}

.landing-tabela-envoltorio {
    overflow-x: auto;
    margin-top: var(--landing-espaco-3);
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-sm);
}

.landing-tabela-envoltorio table {
    margin-bottom: 0;
}

.landing-tabela-envoltorio thead th {
    background: var(--landing-fundo-suave);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--landing-texto-suave);
    white-space: nowrap;
}

.landing-tabela-envoltorio td,
.landing-tabela-envoltorio tbody th {
    font-variant-numeric: tabular-nums;
}

/* Cobertura territorial: mapa dos municípios e tabela ordenável equivalente. */
/**
 * O envoltório é a referência de posicionamento do balão de informação. O mapa
 * e o aviso de indisponibilidade são irmãos: esconder um não afeta o outro.
 */
.landing-mapa-envoltorio {
    position: relative;
    margin-bottom: var(--landing-espaco-4);
}

.landing-mapa {
    display: block;
    padding: var(--landing-espaco-3);
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-md);
}

/* Quadro de espera, exibido quando a malha não está disponível. */
.landing-mapa-indisponivel {
    display: flex;
    align-items: flex-start;
    gap: var(--landing-espaco-3);
    min-height: 120px;
    margin: 0;
    padding: var(--landing-espaco-5);
    background: var(--landing-fundo-suave);
    border: 1px dashed var(--landing-borda);
    border-radius: var(--landing-raio-md);
}

.landing-mapa-svg {
    display: block;
    width: 100%;
    height: auto;
}

.landing-mapa-area {
    stroke: #fff;
    stroke-width: 0.75;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill-opacity 120ms ease-out, stroke 120ms ease-out,
        stroke-width 120ms ease-out;
}

/*
 * As faixas da escala vêm de `landing-escala-*`, que definem `background`.
 * Em SVG o preenchimento é `fill`, então cada faixa é repetida aqui com os
 * mesmos valores — legenda, tabela e mapa ficam com a mesma leitura de cor.
 */
.landing-mapa-area.landing-escala-1 { fill: #ede7f6; }
.landing-mapa-area.landing-escala-2 { fill: #c3b0e2; }
.landing-mapa-area.landing-escala-3 { fill: #8560c0; }
.landing-mapa-area.landing-escala-4 { fill: #4b2a8a; }

/* Município sem registro: hachura, para não depender só de cor. */
.landing-mapa-area-sem-registro {
    fill: #f2f2f4;
    stroke: var(--landing-borda);
    stroke-dasharray: 2 2;
}

/**
 * Município sob o cursor ou com o foco. O realce é de CONTORNO, não de opacidade:
 * clarear o preenchimento confundiria com outra faixa da escala. Vale para
 * cursor e teclado, com a mesma aparência.
 */
.landing-mapa-area:hover,
.landing-mapa-area-ativa {
    stroke: var(--landing-tinta);
    stroke-width: 2.4;
    fill-opacity: 0.85;
}

/*
 * `:focus`, não só `:focus-visible`: em SVG, `:focus-visible` não chega a
 * corresponder neste `<path>` em todos os navegadores, então o anel padrão
 * do user-agent (`:focus { outline: -webkit-focus-ring-color auto }`) nunca
 * é superado por uma regra escrita só em `:focus-visible`. Uma regra de
 * autor em `:focus` sempre vence o `:focus` do user-agent, pela origem —
 * antes mesmo de entrar a especificidade.
 *
 * Sem `outline` aqui: o CSS de contorno desenha um retângulo ao redor da
 * caixa delimitadora do `<path>`, não do formato irregular do município. O
 * realce de foco já vem do bloco acima — `landing-mapa-area-ativa`, ligado ao
 * evento `focus` em `ligarInteracao()` (territorio.js) — que segue o contorno
 * real do município.
 */
.landing-mapa-area:focus {
    outline: none;
}

/* Balão de informação: nome do município e valor, junto ao ponteiro ou ao foco. */
.landing-mapa-dica {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 16rem;
    padding: 8px 12px;
    transform: translate(-50%, calc(-100% - 14px));
    border-radius: var(--landing-raio-sm);
    background: var(--landing-tinta);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.35;
    box-shadow: var(--landing-sombra-md);
    pointer-events: none;
}

.landing-mapa-dica::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
}

.landing-mapa-dica-nome {
    font-weight: 700;
}

.landing-mapa-dica-valor {
    color: #d9d2ea;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .landing-mapa-area {
        transition: none;
    }
}

/**
 * Painel de programas: revelado ao ativar (clique, Enter ou Espaço) um
 * município com cobertura, no mapa OU na tabela ordenável — as duas levam ao
 * mesmo painel, exigência de paridade entre a apresentação principal e a sua
 * alternativa acessível. Some entre as duas representações no fluxo do
 * cartão; recebe o foco ao abrir, por isso o próprio `id` ganha o mesmo
 * `scroll-margin-top` do restante da página (regra de `main [id]`).
 */
.landing-mapa-programas {
    margin-bottom: var(--landing-espaco-4);
    padding: var(--landing-espaco-4);
    background: var(--landing-primaria-suave);
    border: 1px solid var(--landing-primaria-media);
    border-radius: var(--landing-raio-md);
}

.landing-mapa-programas:focus-visible {
    outline: 3px solid var(--landing-primaria-escura);
    outline-offset: 2px;
}

.landing-mapa-programas-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--landing-espaco-3);
    margin-bottom: var(--landing-espaco-2);
}

.landing-mapa-programas-titulo {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--landing-texto);
}

/* Alvo de toque de 44 px, como o botão de ajuda dos cartões (exigência A9). */
.landing-mapa-programas-fechar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--landing-primaria-escura);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--landing-transicao);
}

.landing-mapa-programas-fechar:hover {
    background: var(--landing-primaria-media);
}

.landing-mapa-programas-lista {
    display: flex;
    flex-direction: column;
    gap: var(--landing-espaco-2);
}

.landing-mapa-programas-item {
    padding: var(--landing-espaco-2) var(--landing-espaco-3);
    background: #fff;
    border: 1px solid var(--landing-primaria-borda);
    border-radius: var(--landing-raio-sm);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--landing-texto);
}

.landing-mapa-icone {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--landing-texto-suave);
    flex-shrink: 0;
}

.landing-tabela-ordenavel thead th {
    padding: 0;
}

.landing-ordenar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--landing-espaco-2);
    width: 100%;
    min-height: 44px;
    padding: var(--landing-espaco-2) var(--landing-espaco-3);
    background: transparent;
    border: 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}

.landing-ordenar:hover {
    color: var(--landing-primaria-profunda);
    text-decoration: underline;
}

.landing-ordenar-icone {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.landing-territorio-valor {
    display: flex;
    align-items: center;
    gap: var(--landing-espaco-2);
}

/* Linha com cobertura publicada: mesma ativação do município no mapa. */
.landing-tabela-ordenavel tbody tr.landing-territorio-linha-programas {
    cursor: pointer;
}

.landing-tabela-ordenavel tbody tr.landing-territorio-linha-programas:hover {
    background: var(--landing-primaria-suave);
}

/**
 * Escala sequencial de cobertura. A variação é de luminosidade, e não de matiz,
 * para que a leitura funcione em monocromia e para daltonismo.
 */
.landing-escala {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid rgba(29, 38, 48, 0.2);
}

.landing-escala-1 { background: #ede7f6; }
.landing-escala-2 { background: #c3b0e2; }
.landing-escala-3 { background: #8560c0; }
.landing-escala-4 { background: #4b2a8a; }

.landing-tabela-ordenavel tbody tr:focus-visible {
    outline: 3px solid var(--landing-primaria);
    outline-offset: -3px;
}

/* 7. Filtros ----------------------------------------------------------------- */
.landing-filtros {
    background: #fff;
    border: 1px solid var(--landing-borda);
    border-top: 4px solid var(--landing-primaria);
    border-radius: var(--landing-raio-lg);
    padding: var(--landing-espaco-6);
    box-shadow: var(--landing-sombra-sm);
}

/**
 * Painel recolhido: o resumo é a única coisa visível até que a pessoa decida
 * filtrar. `<details>` nativo — teclado e leitor de tela já funcionam.
 */
.landing-filtros-envoltorio {
    margin: var(--landing-espaco-6) 0 var(--landing-espaco-7);
}

.landing-filtros-resumo-botao {
    display: flex;
    align-items: center;
    gap: var(--landing-espaco-3);
    padding: var(--landing-espaco-4) var(--landing-espaco-5);
    margin: calc(-1 * var(--landing-espaco-6));
    list-style: none;
    cursor: pointer;
    border-radius: var(--landing-raio-lg);
}

.landing-filtros-resumo-botao::-webkit-details-marker {
    display: none;
}

.landing-filtros[open] .landing-filtros-resumo-botao {
    margin-bottom: var(--landing-espaco-2);
    border-bottom: 1px solid var(--landing-borda);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.landing-filtros-rotulo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.landing-filtros-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--landing-tinta);
}

.landing-filtros-estado {
    font-size: 0.8125rem;
    color: var(--landing-texto-suave);
}

.landing-filtros-estado-ativo {
    color: var(--landing-primaria-profunda);
    font-weight: 600;
}

.landing-filtros-corpo {
    padding-top: var(--landing-espaco-4);
}

.landing-filtros-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: var(--landing-espaco-3);
    margin-bottom: var(--landing-espaco-4);
}

.landing-filtros-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--landing-raio-md);
    background: var(--landing-primaria-clara);
    color: var(--landing-primaria-profunda);
    font-size: 1.375rem;
}

.landing-filtros .form-label {
    color: var(--landing-tinta);
    margin-bottom: 4px;
}

.landing-filtros .form-text {
    color: var(--landing-texto-suave);
}

/**
 * Período com valor único: o controle continua visível e desabilitado, com o
 * rótulo do período em texto ao lado, conforme a seção 6 do contrato.
 */
.landing-filtros select:disabled {
    background-color: var(--landing-fundo-suave);
    color: var(--landing-texto-suave);
    cursor: not-allowed;
}

.landing-filtro-fixo {
    margin-top: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--landing-primaria-profunda);
}

/* Controle segmentado (canal de acesso): rádios com aparência de botões. */
.landing-segmentado legend {
    float: none;
    width: auto;
    font-size: 1rem;
}

.landing-segmentado-trilha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--landing-espaco-2);
}

.landing-segmentado-item {
    flex: 1 1 auto;
}

.landing-segmentado-entrada {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.landing-segmentado-rotulo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    height: 100%;
    padding: 6px 14px;
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-pill);
    background: #fff;
    color: var(--landing-texto);
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--landing-transicao), border-color var(--landing-transicao);
}

.landing-segmentado-entrada:checked + .landing-segmentado-rotulo {
    background: var(--landing-primaria-profunda);
    border-color: var(--landing-primaria-profunda);
    color: #fff;
    font-weight: 600;
}

.landing-segmentado-entrada:focus-visible + .landing-segmentado-rotulo {
    outline: 3px solid var(--landing-primaria);
    outline-offset: 2px;
}

.landing-filtros-acoes {
    border-top: 1px solid var(--landing-borda);
    padding-top: var(--landing-espaco-4);
}

/* Resumo dos filtros aplicados. */
.landing-filtros-resumo {
    background: var(--landing-primaria-suave);
    border: 1px dashed var(--landing-primaria-borda);
    border-radius: var(--landing-raio-md);
    padding: var(--landing-espaco-3) var(--landing-espaco-4);
}

.landing-chips {
    margin: 0;
    padding: 0;
}

.landing-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px 5px 14px;
    border: 1px solid var(--landing-primaria-borda);
    background: #fff;
    color: #3d2166;
    border-radius: var(--landing-raio-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--landing-sombra-sm);
}

.landing-chip > span {
    overflow-wrap: anywhere;
}

.landing-chip-remover {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.0625rem;
    line-height: 1;
    padding: 2px 7px;
    border-radius: var(--landing-raio-pill);
    cursor: pointer;
    transition: background-color var(--landing-transicao);
}

.landing-chip-remover:hover {
    background: var(--landing-primaria-media);
}

/* 8. Estados de interface ----------------------------------------------------- */
.landing-estado {
    border: 1.5px dashed #cfd6dd;
    border-radius: var(--landing-raio-lg);
    padding: var(--landing-espaco-6) var(--landing-espaco-5);
    background: var(--landing-fundo-suave);
    text-align: center;
    grid-column: 1 / -1;
}

.landing-estado-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--landing-primaria-clara);
    color: var(--landing-primaria-profunda);
    font-size: 1.5rem;
    margin-bottom: var(--landing-espaco-3);
}

.landing-estado h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--landing-tinta);
    margin-bottom: 6px;
}

.landing-estado p {
    color: var(--landing-texto-suave);
    max-width: 46ch;
    margin: 0 auto var(--landing-espaco-3);
}

.landing-estado-erro {
    border-style: solid;
    border-color: var(--landing-erro-borda);
    background: var(--landing-erro-fundo);
}

.landing-estado-erro .landing-estado-icone {
    background: #f8e2e6;
    color: var(--landing-emergencia);
}

/* Esqueleto de carregamento com brilho deslizante. */
.landing-esqueleto {
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-lg);
    padding: var(--landing-espaco-5);
    background: #fff;
}

.landing-esqueleto-barra {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(100deg, #edf0f3 40%, #e2e7ec 50%, #edf0f3 60%);
    background-size: 200% 100%;
    margin-bottom: var(--landing-espaco-3);
    animation: landing-brilho 1.6s linear infinite;
}

.landing-esqueleto-barra:last-child {
    margin-bottom: 0;
}

.landing-esqueleto-barra-larga {
    height: 34px;
    width: 60%;
}

.landing-esqueleto-barra-curta {
    width: 40%;
}

/* Variante que espelha o cartão de indicador. */
.landing-esqueleto-indicador {
    border-top: 3px solid var(--landing-primaria-media);
}

.landing-esqueleto-rotulo {
    width: 55%;
    height: 12px;
}

.landing-esqueleto-numero {
    height: 44px;
    width: 45%;
    border-radius: 10px;
}

.landing-esqueleto-pastilha {
    height: 24px;
    width: 62%;
    border-radius: var(--landing-raio-pill);
}

/* Variante que espelha o cartão de gráfico: colunas fantasma. */
.landing-esqueleto-area {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 190px;
    margin: var(--landing-espaco-4) 0;
}

.landing-esqueleto-area span {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(100deg, #edf0f3 40%, #e2e7ec 50%, #edf0f3 60%);
    background-size: 200% 100%;
    animation: landing-brilho 1.6s linear infinite;
}

.landing-esqueleto-area span:nth-child(1) { height: 38%; }
.landing-esqueleto-area span:nth-child(2) { height: 64%; }
.landing-esqueleto-area span:nth-child(3) { height: 50%; }
.landing-esqueleto-area span:nth-child(4) { height: 86%; }
.landing-esqueleto-area span:nth-child(5) { height: 46%; }
.landing-esqueleto-area span:nth-child(6) { height: 70%; }
.landing-esqueleto-area span:nth-child(7) { height: 58%; }

.landing-esqueleto-legenda {
    width: 30%;
    height: 10px;
}

@keyframes landing-brilho {
    to {
        background-position: -200% 0;
    }
}

/* 9. Metodologia, limitações, serviços e canais ------------------------------- */
.landing-lista-etapas {
    list-style: none;
    counter-reset: landing-etapa;
    margin: 0 0 var(--landing-espaco-4);
    padding: 0;
    display: grid;
    gap: var(--landing-espaco-3);
}

.landing-lista-etapas li {
    counter-increment: landing-etapa;
    position: relative;
    padding-left: 42px;
    min-height: 30px;
}

.landing-lista-etapas li::before {
    content: counter(landing-etapa);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--landing-primaria-clara);
    border: 1px solid var(--landing-primaria-media);
    color: var(--landing-primaria-profunda);
    font-weight: 700;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.landing-lista-estudos {
    padding-left: 1.1rem;
}

.landing-lista-estudos a {
    color: var(--landing-primaria-escura);
}

.landing-limitacoes {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: var(--landing-espaco-3);
}

.landing-limitacao {
    border: 1px solid #ecdfc4;
    border-left: 4px solid var(--landing-alerta-borda);
    border-radius: var(--landing-raio-sm);
    background: #fffdf7;
    padding: var(--landing-espaco-3) var(--landing-espaco-4);
}

/* A gravidade também aparece em texto: a espessura da borda não é o único sinal. */
.landing-limitacao-alta {
    border-left-width: 6px;
}

.landing-limitacao-baixa {
    border-left-color: var(--landing-borda);
}

.landing-limitacao-gravidade {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--landing-alerta-texto);
}

.landing-pendencia {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--landing-alerta-texto);
    background: var(--landing-alerta-fundo);
    border: 1px solid #ecd9b0;
    border-radius: var(--landing-raio-sm);
    padding: 2px 10px;
}

.landing-canais {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--landing-espaco-3);
}

.landing-canal {
    display: flex;
    align-items: flex-start;
    gap: var(--landing-espaco-3);
    border: 1px solid var(--landing-borda);
    border-radius: var(--landing-raio-md);
    padding: var(--landing-espaco-4);
    background: #fff;
    box-shadow: var(--landing-sombra-sm);
    transition: border-color var(--landing-transicao), box-shadow var(--landing-transicao);
}

.landing-canal-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--landing-primaria-clara);
    color: var(--landing-primaria-profunda);
    font-size: 1.25rem;
}

.landing-canal-destaque .landing-canal-icone {
    background: var(--landing-emergencia);
    color: #fff;
}

.landing-canal-corpo {
    min-width: 0;
}

.landing-canal:hover {
    border-color: var(--landing-primaria-borda);
    box-shadow: var(--landing-sombra-md);
}

.landing-canal-rotulo {
    display: block;
    font-weight: 700;
    color: var(--landing-tinta);
    margin-bottom: 2px;
}

.landing-canal-valor {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--landing-tinta);
    font-variant-numeric: tabular-nums;
}

a.landing-canal-valor {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.landing-canal-abrangencia {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--landing-texto-suave);
    margin-top: 2px;
}

.landing-canal-destaque {
    border-color: #ecc3cf;
    border-left: 5px solid var(--landing-emergencia);
    background: var(--landing-emergencia-fundo);
}

.landing-canal-destaque:hover {
    border-color: var(--landing-emergencia);
    border-left-color: var(--landing-emergencia);
}

.landing-canal-destaque .landing-canal-rotulo,
.landing-canal-destaque .landing-canal-valor {
    color: var(--landing-emergencia-texto);
}

/* Cartão de serviço. */
.landing-servico {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.landing-servico-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--landing-raio-md);
    background: linear-gradient(135deg, var(--landing-primaria-clara), var(--landing-primaria-media));
    color: var(--landing-primaria-profunda);
    font-size: 1.5rem;
    margin-bottom: var(--landing-espaco-3);
}

h3.landing-servico-titulo {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--landing-tinta);
}

.landing-servico-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--landing-espaco-2);
}

.landing-servico .btn {
    margin-top: auto;
}

/* Tooltip do ApexCharts alinhado ao restante da página. */
.landing-publica .apexcharts-tooltip {
    font-family: inherit;
    border: 1px solid var(--landing-borda) !important;
    border-radius: var(--landing-raio-sm);
    box-shadow: var(--landing-sombra-md);
}

.landing-publica .apexcharts-tooltip-title {
    background: var(--landing-fundo-suave) !important;
    border-bottom: 1px solid var(--landing-borda) !important;
    font-family: inherit !important;
    font-weight: 600;
    color: var(--landing-tinta);
}

.landing-publica .apexcharts-xaxistooltip {
    border-radius: var(--landing-raio-sm);
    border-color: var(--landing-borda);
    background: #fff;
    color: var(--landing-texto);
}

/* 10. Rodapé ------------------------------------------------------------------ */
.landing-rodape {
    background: #241b38;
    border-top: 4px solid var(--landing-primaria);
    color: #e9e4f2;
    padding: var(--landing-espaco-7) 0;
    margin-top: var(--landing-espaco-6);
}

.landing-rodape .small {
    color: #bdb2d4;
}

.landing-rodape a {
    color: #d3c4f0;
}

.landing-rodape a:focus-visible {
    outline-color: #d3c4f0;
}

/* 11. Responsividade, movimento reduzido e impressão -------------------------- */
@media (max-width: 991.98px) {
    .landing-apresentacao,
    .landing-secao {
        padding: var(--landing-espaco-7) 0;
    }
}

@media (max-width: 575.98px) {
    .landing-apresentacao,
    .landing-secao {
        padding: var(--landing-espaco-6) 0;
    }

    .landing-chamada {
        padding: var(--landing-espaco-5);
    }

    .landing-chamada-numero {
        width: 100%;
        justify-content: center;
        font-size: 2rem;
    }

    .landing-bloco-corpo {
        padding: var(--landing-espaco-4);
    }

    .landing-indicador-destaque {
        padding: var(--landing-espaco-5);
    }

    .landing-card,
    .landing-filtros,
    .landing-esqueleto {
        padding: var(--landing-espaco-4);
    }

    .landing-grade {
        gap: var(--landing-espaco-4);
    }

    .landing-valor {
        font-size: 1.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-publica *,
    .landing-publica *::before,
    .landing-publica *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .landing-topo,
    .landing-filtros,
    .landing-rodape {
        display: none;
    }

    .landing-card {
        box-shadow: none;
        break-inside: avoid;
    }
}