/* =======================================================================
   PAGINAS INTERNAS  —  medido do LandingPage-Notcias.pdf
   -----------------------------------------------------------------------
   A pagina do layout tem 1440 de largura, entao 1pt do PDF = 1px aqui.

   Os corpos de fonte NAO foram estimados: saem da altura de MAIUSCULA
   medida no render, dividida por 0,714 (a proporcao cap-height/em da Noto
   Sans). Exemplo: o titulo do destaque mede 34px de maiuscula no PDF,
   logo 34 / 0,714 = 48px.

   Arquivo separado do site.css de proposito: a home nao usa nada daqui, e
   nao deve pagar o download.
   ======================================================================= */

:root {
    --lima-escuro: #91BC19;      /* borda do "Carregar mais", barra da trilha */
    --cinza-azulado: #6D7994;    /* a data dos cartoes e o icone de calendario */
    --faixa-clara: #E1E9D4;      /* trilha e newsletter -- medido no PDF */

    /**
     * O verde institucional com transparencia -- para texto de apoio que
     * precisa se destacar sem competir com o titulo.
     *
     * ⚠️ O `c2` no fim e o CANAL ALFA (76%), e nao um sexto digito de cor.
     * E notacao de 8 digitos (#RRGGBBAA), que todo navegador atual entende.
     * Escrever `#214138c2` num campo que espera 6 digitos faria a regra ser
     * DESCARTADA em silencio, e a cor cairia no herdado.
     */
    --verde-suave: #214138c2;    /* pedido do Jonh em 26/08 */

    --largura-conteudo: 1170px;  /* x = 135 .. 1305 */
    --vao-colunas: 30px;         /* entre as duas colunas de 570 */
}

/* a interna ROLA -- ao contrario da home, que cabe numa tela */
body.interna {
    display: block;
    height: auto;
    min-height: 100vh;
    background: #fff;
}

body.interna main { display: block; }

/**
 * 🔴 INVOLUCRO COMUM -- e aqui que estava o erro corrigido em 11/08/2026.
 *
 * Antes era "max-width: 1170px; padding-inline: 24px", o que dava 1170 de
 * CAIXA e apenas 1122 de conteudo: a coluna comecava em 159 em vez de 135, e
 * cada cartao ficava com 546 em vez de 570 -- por tabela, a foto perdia 11px
 * de altura, porque a proporcao e fixa. Um erro so, dois sintomas.
 *
 * min(100% - 48px, 1170px) da exatamente 1170 de CONTEUDO quando cabe, e
 * 24px de respiro de cada lado quando nao cabe.
 */
.trilha__interno,
.destaque__interno,
.recentes__interno,
.newsletter__interno,
.rodapao__interno,
.rodapao__barra {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

/* ================== CABECALHO DAS INTERNAS: O MENU =================== */
/* na home o menu fica na coluna da direita; aqui ele sobe para o cabecalho */

.menu-topo { flex: 1 1 auto; min-width: 0; }

.menu-topo__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-topo__link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.menu-topo__link:hover { color: var(--lima); }
.menu-topo__link:focus-visible { outline: 2px solid var(--lima); outline-offset: 4px; }

/**
 * Sinal de que o menu tem mais itens para o lado.
 *
 * Quem liga e desliga estas classes e o /assets/js/menu-rolagem.js, que sabe
 * quanto sobrou de cada lado. Sem JavaScript nao aparece desvanecido nenhum e
 * o menu continua rolando igual -- o sinal e um acrescimo, nao a navegacao.
 *
 * O desvanecido vale para os dois lados: so a direita, quem ja rolou nao teria
 * como saber que ha item escondido atras do comeco.
 */
.menu-topo--mais-esq,
.menu-topo--mais-dir {
    --mt-fade: 44px;
}

.menu-topo--mais-dir {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--mt-fade)), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--mt-fade)), transparent);
}

.menu-topo--mais-esq {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mt-fade));
            mask-image: linear-gradient(to right, transparent, #000 var(--mt-fade));
}

.menu-topo--mais-esq.menu-topo--mais-dir {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mt-fade),
                        #000 calc(100% - var(--mt-fade)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--mt-fade),
                        #000 calc(100% - var(--mt-fade)), transparent);
}

/* ============================== TRILHA ================================ */
/* faixa de 1440 x 64 em #E1E9D4, logo abaixo do cabecalho de 88 */

/**
 * ⚠️ `padding-block` E `min-height` juntos, de propósito.
 *
 * A faixa nasceu com 64px e a busca ocupava 42 -- sobrava folga. Com a dica
 * das aspas embaixo do campo (26/08), a coluna da direita passou a medir
 * ~66px e o texto encostava na borda de baixo. O `min-height` segura a
 * altura do PDF quando a página não tem busca; o `padding` garante o respiro
 * quando tem.
 */
.trilha {
    background: var(--faixa-clara);
    min-height: 64px;
    padding-block: 10px;
    display: flex;
    align-items: center;
}

/* trilha a esquerda, busca a direita -- as duas na mesma faixa de 64 */
.trilha__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.trilha__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.2;
}

/* ================= A BUSCA DENTRO DA FAIXA DA TRILHA ================= */
/**
 * Reaproveita as classes .busca do site.css (mesmo formulario da home), e so
 * troca as cores: no cabecalho o fundo e verde escuro, aqui e a faixa clara.
 */
.busca--trilha {
    width: 100%;
    height: 42px;
    background: #fff;
    border: 1px solid rgba(33, 65, 56, .18);
}

/**
 * O invólucro da busca da trilha: a pílula em cima, a dica embaixo.
 *
 * ⚠️ O `flex: 0 1 420px` MUDOU DE DONO -- saiu do `.busca--trilha` e veio
 * para cá. Deixar os dois com `flex` faria o form disputar espaço com o
 * próprio invólucro, e a pílula encolheria abaixo dos 420px.
 */
.busca-caixa {
    flex: 0 1 420px;
    min-width: 0;
}

/* a dica das aspas -- discreta, é ajuda e não aviso */
.busca__dica-campo {
    margin: 6px 2px 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cinza-azulado);
}
.busca__dica-campo strong { color: var(--verde-suave); }
.busca__dica-campo em     { font-style: normal; font-weight: 700; color: var(--verde-suave); }

.busca--trilha .busca__campo { color: var(--verde-escuro); font-size: 15px; }
.busca--trilha .busca__campo::placeholder { color: var(--verde-escuro); opacity: .6; }
.busca--trilha .busca__botao { color: var(--verde-escuro); }

.trilha__item { display: flex; align-items: center; gap: .5rem; }

/**
 * A barra separadora e DECORATIVA: entra por ::before, fora do texto, para o
 * leitor de tela nao anunciar "barra" entre cada item. A cor e o lima escuro
 * do PDF (#91BC19), e nao o lima do cabecalho.
 */
.trilha__item::before {
    content: "/";
    color: var(--lima-escuro);
    font-weight: 700;
}

.trilha__link  { color: var(--verde-escuro); text-decoration: none; font-weight: 400; }
.trilha__link:hover { text-decoration: underline; }
.trilha__atual { color: var(--verde-escuro); font-weight: 700; }

/* ========================== NOTICIA DESTAQUE ========================== */
/* bloco de 1170 x 500 em #214138, dividido em 720 de texto / 450 de foto */

.destaque { padding-block: 33px 0; }   /* respiro entre a trilha e o cartao */

.destaque__interno {
    display: grid;
    grid-template-columns: 1fr 450px;
    min-height: 500px;
    background: var(--verde-escuro);
    padding: 0;              /* aqui o padding e interno, nao do invólucro */
    overflow: hidden;
}

.destaque__texto {
    /* 86 do topo e 90 da esquerda: e onde o selo comeca no layout */
    padding: 86px 40px 60px 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.destaque__marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin: 0 0 24px;
}

/* selo de 169 x 40 em lima, com texto escuro -- medido */
.destaque__selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 169px;
    height: 40px;
    padding-inline: 14px;
    background: var(--lima);
    color: var(--verde-escuro);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .01em;
}

.destaque__tempo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lima);
    font-size: 20px;
    font-weight: 700;
}

.destaque__tempo i { font-size: 1.1em; }

/* 34px de maiuscula medidos -> 34 / 0,714 = 48px */
.destaque__titulo {
    margin: 0 0 22px;
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.06;
    /* o layout tem 3 linhas; alem disso a altura do cartao estoura */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.destaque__descricao {
    margin: 0 0 36px;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    max-width: 62ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* botao de 214 x 60, borda de 4 em lima -- medido nos retangulos do PDF */
.destaque__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    min-width: 214px;
    min-height: 60px;
    padding-inline: 26px;
    border: 4px solid var(--lima);
    border-radius: 6px;
    color: var(--lima);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.destaque__botao:hover { background: var(--lima); color: var(--verde-escuro); }
.destaque__botao:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.destaque__foto { position: relative; overflow: hidden; }

/**
 * cover, e nao contain: aqui o quadro tem tamanho fixo (450 x 500) e a foto
 * vem do acervo, sem proporcao garantida. No slideshow da home a escolha foi a
 * oposta -- la a arte inteira precisa aparecer; aqui o que importa e preencher
 * o quadro sem tarja.
 */
.destaque__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* raio 4 -- lido do caminho de recorte do PDF, nao estimado */
    border-radius: 4px;
}

/* ========================== NOTICIAS RECENTES ========================= */

.recentes { padding-block: 70px 90px; }

/* 33px de maiuscula medidos -> 46px */
.recentes__titulo {
    margin: 0 0 48px;
    color: var(--verde-escuro);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.1;
}

/* o ponto final e lima no layout */
.recentes__ponto { color: var(--lima-escuro); }

.recentes__vazio { color: var(--cinza-azulado); font-size: 20px; }

/*
 * A GRADE TEM DUAS FORMAS, e a diferença é a intenção de quem está lendo.
 *
 *   `.cartoes`          — a CAPA de Notícias. Duas colunas, como o PDF desenha.
 *                         Cartão grande, título de 31px: é vitrine.
 *   `.cartoes--densa`   — o ARQUIVO (com filtro) e a BUSCA. Três colunas.
 *                         Quem chegou aqui já disse o que quer e vai VARRER uma
 *                         lista; cabe mais na tela e a rolagem cai por um terço.
 *
 * Decidido pelo Jonh em 26/08/2026, depois de ver as duas no ar.
 */
/**
 * 🔴 `minmax(0, 1fr)`, E NAO `1fr`. Esta linha conserta um defeito visível.
 *
 * `1fr` é atalho de `minmax(auto, 1fr)`, e esse `auto` é a **largura mínima de
 * conteúdo do item**. Quando um título traz uma palavra comprida que não quebra,
 * aquela coluna cresce além da parte igual — e as outras encolhem.
 *
 * Foi exatamente o que aconteceu em 26/08/2026 no Arquivo de 2026: a terceira
 * notícia ("ABMES celebra 44 anos com homenagem a personalidades…") ficou com a
 * coluna mais larga que as outras duas. Como a foto tem proporção fixa, uma
 * coluna mais larga vira uma foto mais ALTA — e aí o selo, o título e a data
 * daquele cartão descem, e o título passa a quebrar em três linhas.
 *
 * O `0` no mínimo diz "pode encolher abaixo do conteúdo", e as colunas voltam a
 * ser exatamente iguais. É a mesma causa do transbordo de 57px que apareceu a
 * 320px enquanto a grade de 3 colunas era a base.
 */
.cartoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px var(--vao-colunas);
    list-style: none;
    margin: 0 0 56px;
    padding: 0;
}

/* ------------------------- a grade densa -------------------------- */

.cartoes--densa {
    /* minmax(0, 1fr) pelo mesmo motivo da grade base, logo acima */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px var(--vao-colunas);
}

/**
 * 🔴 TODO CARTÃO COM A MESMA ALTURA, e a miniatura sempre do mesmo tamanho.
 *
 * Num bloco de 3 x 3 a irregularidade salta aos olhos: título de uma linha ao
 * lado de título de três, e as datas em alturas diferentes. Três regras
 * resolvem, e as três precisam andar juntas:
 *
 *   1. o cartão vira coluna flexível
 *   2. o título ocupa SEMPRE 3 linhas de altura (`min-height`), tenha 1 ou 3
 *   3. a data é empurrada para o rodapé do cartão (`margin-top: auto`)
 *
 * ⚠️ Só o `-webkit-line-clamp` não bastaria: ele corta o que passa de 3 linhas,
 * mas deixa o título de uma linha ocupando uma linha só — e é exatamente aí que
 * a fileira fica torta.
 *
 * A foto já é uniforme por construção: `width: 100%` dentro de colunas `1fr`
 * iguais, com `aspect-ratio` fixo e `object-fit: cover`. Todas saem com a mesma
 * largura e a mesma altura, qualquer que seja o arquivo de origem.
 */
.cartoes--densa .cartao {
    display: flex;
    flex-direction: column;
}

/**
 * 🔴 `align-self: flex-start` — sem isto o selo vira uma FAIXA de ponta a ponta.
 *
 * O `.selo` é `display: inline-block`, e sozinho ele encolhe até o texto. Mas
 * filho de flex é **blocificado**: dentro do `.cartao` que virou coluna
 * flexível, o `inline-block` passa a valer `block`, e o `align-items: stretch`
 * (o padrão) o estica na largura inteira do cartão.
 *
 * Ou seja: quem quebrou o selo foi a própria regra que uniformizou a altura dos
 * cartões, logo acima. Mexer no `align-items` do cartão não serve — a foto e o
 * título PRECISAM ocupar a largura toda. Quem se ajusta é o selo, e só ele.
 *
 * O padrão de referência é o cartão da página de Notícias: pastilha do tamanho
 * do texto, colada à esquerda.
 */
.cartoes--densa .selo {
    align-self: flex-start;
    font-size: 15px;
}

.cartoes--densa .cartao__titulo {
    margin: 10px 0 14px;
    font-size: 23px;
    line-height: 1.3;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* 3 linhas de 1,3 -- a altura não depende do tamanho do título */
    min-height: 3.9em;
}

.cartoes--densa .cartao__data {
    margin-top: auto;
    font-size: 17px;
}
/**
 * A area clicavel e SO a foto e o titulo -- nao o cartao inteiro.
 * Ver o porque na propria view (o selo tem link proprio, e <a> dentro de <a>
 * nao existe em HTML).
 */
.cartao__foto-link { display: block; margin-bottom: 20px; }

/* foto de 570 x 250, raio 4 -- ambos lidos do recorte do PDF */
.cartao__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 250;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    background: var(--faixa-clara);
}

/**
 * Retrato de "Quem é Quem" na busca (09/09/2026) -- a foto nasce 2:3, não
 * 2,28:1. MESMA proporção que `.qq-cartao__foto` usa na própria página de
 * Quem é Quem: com a moldura batendo com a origem, `object-fit: cover` não
 * tem excesso pra cortar (antes cortava topo/queixo do rosto).
 */
.cartao__foto--retrato {
    aspect-ratio: 2 / 3;
}

.cartao__titulo-link {
    color: inherit;
    text-decoration: none;
}

.cartao__titulo-link:hover { text-decoration: underline; }

.cartao__foto-link:focus-visible,
.cartao__titulo-link:focus-visible {
    outline: 3px solid var(--lima-escuro);
    outline-offset: 4px;
}

/* 22px de maiuscula medidos -> 31px */
.cartao__titulo {
    margin: 12px 0 16px;
    color: var(--verde-escuro);
    font-size: 31px;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao__data {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--cinza-azulado);
    font-size: 21px;
    font-weight: 600;
}

/**
 * Selo de categoria: escuro com texto branco. E um LINK -- leva para a
 * listagem daquela categoria. Raio 4, igual ao das fotos.
 */
.selo {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--verde-escuro);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .18s ease;
}

.selo:hover { background: #163029; color: #fff; }
.selo:focus-visible { outline: 3px solid var(--lima-escuro); outline-offset: 3px; }

.selo--internacional { background: #2f5d8a; }
.selo--internacional:hover { background: #26496c; }
.selo--regional { background: #6b4f8a; }
.selo--regional:hover { background: #563f6f; }

/* ===================== CARREGAR MAIS NOTICIAS ======================== */
/* 1162 x 64, borda de 2 em #91BC19 */

.carregar { margin: 0; }

/**
 * 🔴 É UM <a>, E NÃO UM <button> — e por isso precisa de `text-decoration`.
 *
 * Sem JavaScript ele navega para `/noticias?ate=N` e a página volta com mais
 * cartões; com JavaScript o script cancela a navegação e cola só o lote novo.
 * Um <button> não teria endereço nenhum para o Google seguir, e o arquivo de
 * 827 notícias ficaria invisível para a busca.
 */
.carregar__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding-inline: 24px;
    border: 2px solid var(--lima-escuro);
    border-radius: 4px;
    background: transparent;
    color: var(--lima-escuro);
    font-family: inherit;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.carregar__botao:hover { background: var(--lima-escuro); color: #fff; text-decoration: none; }
.carregar__botao:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/* enquanto o lote não chega: fica claro que o clique foi ouvido */
.carregar__botao--ocupado { opacity: .6; cursor: progress; }
.carregar__botao--ocupado .bi { animation: carregar-gira 1s linear infinite; }

@keyframes carregar-gira { to { transform: rotate(360deg); } }

/**
 * O aviso do "Carregar mais" — "5 notícias carregadas. Mostrando 9 de 827."
 *
 * ⚠️ ALINHADO À ESQUERDA, com o resto do texto da página (pedido do Jonh em
 * 25/08/2026). Antes ele herdava o `text-align: center` do parágrafo do botão,
 * e era o único texto centralizado da seção.
 *
 * Nasce vazio: o script escreve nele. Sem script ele nunca recebe texto e não
 * ocupa espaço nenhum.
 */
.carregar__aviso {
    display: block;
    margin: 14px 0 0;
    font-size: 15px;
    text-align: left;
    color: var(--cinza-azulado);
}
.carregar__aviso:empty { margin: 0; }
.carregar__aviso:focus { outline: none; }
.carregar__aviso:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/* ================== FILTRO DE PERIODO DE /noticias =================== */
/*
 * Mês e ano, e nada mais. As pastilhas são as mesmas de /publicacoes
 * (`.pub-filtro` + o `.pub-combo` que o combo.js monta): a folha de Publicações
 * virou, na prática, a folha dos componentes de filtro do portal.
 */

/**
 * ⚠️ A MARGEM DE BAIXO MORA AQUI, e não no título.
 *
 * O `.recentes__titulo` tinha `margin-bottom: 48px`, que zerou ao entrar
 * neste cabeçalho (senão o filtro ao lado ficaria desalinhado). Como a linha
 * de contagem só existe no Arquivo, quem repõe o vão é o modificador
 * `--sozinha`: sem ele, na capa o título encostaria na primeira foto.
 */
.recentes__cabeca {
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.recentes__cabeca .recentes__titulo { margin-bottom: 0; }

/* sem a linha de contagem embaixo (a capa de Notícias), o vão volta a ser o do título */
.recentes__cabeca--sozinha { margin-bottom: 48px; }

.filtro-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/**
 * ⚠️ SOME QUANDO HÁ JAVASCRIPT, e essa é a única razão de a regra existir: com
 * script, escolher no <select> já envia o formulário, e um botão "Filtrar" ao
 * lado viraria um passo a mais que não faz nada de novo. Sem script ele é o
 * ÚNICO jeito de enviar — por isso a regra é `.com-js`, e não `display:none`.
 */
.com-js .filtro-periodo__enviar { display: none; }

.filtro-periodo__enviar {
    min-height: 44px;
    padding-inline: 20px;
    border: 2px solid var(--lima-escuro);
    border-radius: 6px;
    background: transparent;
    color: var(--lima-escuro);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.filtro-periodo__enviar:hover { background: var(--lima-escuro); color: #fff; }

/* "827 notícias" · "5 notícias em Agosto de 2026" + o "limpar filtro" */
.recentes__contagem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    /**
     * ⚠️ A MARGEM DE BAIXO REPÕE O VÃO QUE ERA DO TÍTULO. O .recentes__titulo
     * tinha `margin-bottom: 48px`, e dentro do .recentes__cabeca ele passou a
     * zero (senão o filtro ao lado ficaria desalinhado). Sem esta linha, a
     * contagem encosta na primeira foto da grade.
     */
    margin: 0 0 34px;
    font-size: 16px;
    text-align: left;
    color: var(--cinza-azulado);
}

.recentes__limpar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lima-escuro);
    font-weight: 700;
    text-decoration: none;
}
.recentes__limpar:hover { text-decoration: underline; }
.recentes__limpar .bi { font-size: 12px; }
/* ======================== RESULTADO DA BUSCA ========================= */
/*
 * Mesmo desenho do Arquivo de Notícias: mesma grade, mesmos cartões, mesmo
 * botão. O que existe só aqui é o texto em volta -- o que a busca entendeu,
 * e a tela de "nada encontrado".
 */

.busca__vazia {
    margin: 20px 0 0;
    font-size: 20px;
    color: var(--cinza-azulado);
}

/*
 * "Procurei por olivia, moraes; deixei de fora notícia, sobre, de."
 *
 * 🔴 Discreto, mas nunca escondido. É a única pista que a pessoa tem de POR QUE
 * o resultado veio assim -- e, quando a busca leu uma data da consulta, é o
 * aviso de que existe um filtro em ação que ela não escolheu.
 */
.busca__entendi {
    margin: -22px 0 34px;
    padding: 10px 14px;
    border-left: 3px solid var(--lima);
    background: var(--faixa-clara);
    border-radius: 0 4px 4px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--verde-escuro);
}
.busca__entendi strong { font-weight: 700; }
.busca__entendi a { color: var(--lima-escuro); font-weight: 700; }

/*
 * A oferta de ampliar a busca para o texto das notícias.
 *
 * Fica logo abaixo da contagem, discreta, mas com o NÚMERO na frente: é o
 * que diz à pessoa se vale a pena clicar.
 */
.busca__ampliar {
    margin: -22px 0 34px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cinza-azulado);
}
.busca__ampliar strong { color: var(--verde-escuro); }
.busca__ampliar a { color: var(--lima-escuro); font-weight: 700; }

/* quando a ampliação está LIGADA, a faixa fica marcada -- o resultado mudou de regra */
.busca__ampliar--ligado {
    padding: 10px 14px;
    border-left: 3px solid var(--lima);
    background: var(--faixa-clara);
    border-radius: 0 4px 4px 0;
}

/*
 * A dica das aspas.
 *
 * Discreta de propósito: é ajuda, não aviso. Fica na mesma família visual da
 * oferta de ampliar, logo acima dos cartões.
 */
/**
 * 🔴 NADA DE `display: flex` AQUI -- e a segunda vez que isto me pega.
 *
 * Numa caixa flex, CADA trecho de texto solto entre duas tags vira um item
 * proprio, e o `gap` entra entre todos eles. O resultado sai assim:
 *
 *     o termo  exatos , use aspas.  Exemplo:  "44 anos"
 *
 * com espaco antes da virgula e depois dos dois-pontos. Foi o mesmo defeito
 * do "Escrito por" na pagina de detalhe, em 25/08. Frase corrida se resolve
 * com bloco normal; quem precisa de alinhamento e o icone, e `vertical-align`
 * da conta dele.
 */
.busca__dica {
    margin: -22px 0 34px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cinza-azulado);
}
.busca__dica strong { color: var(--verde-suave); }
.busca__dica em     { font-style: normal; font-weight: 700; color: var(--verde-suave); }
.busca__dica .bi    { font-size: 14px; color: var(--lima-escuro); margin-right: 4px; vertical-align: baseline; }

/* na tela vazia não há contagem acima, então a margem negativa não cabe */
.busca__vazia + .busca__dica { margin-top: 16px; }

/* quando a dica e a oferta aparecem juntas, só a última segura o vão */
.busca__dica + .busca__ampliar { margin-top: -22px; }

.busca__nada { max-width: 640px; margin-top: 8px; }

.busca__nada-titulo {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.busca__dicas {
    margin: 0 0 30px;
    padding-left: 20px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--cinza-azulado);
}
.busca__dicas em { font-style: normal; font-weight: 700; color: var(--verde-escuro); }
.busca__dicas a  { color: var(--lima-escuro); font-weight: 700; }

/* na tela de "nada encontrado" o botão não é uma faixa de ponta a ponta */
.carregar__botao--estreito {
    display: inline-flex;
    width: auto;
    min-width: 260px;
}
/* ============================= NEWSLETTER ============================= */
/* faixa de 1440 x 209 em #E1E9D4 */

.newsletter { background: var(--faixa-clara); padding-block: 46px; }

/**
 * Alinhamento medido no PDF, dentro do grid de 1170 (x = 135 .. 1305):
 *
 *   texto     135 .. 583
 *   campo     618 .. 1060   (442 de largura)
 *   botao    1095 .. 1305   (210 de largura)
 *
 * Com "1fr 442px 210px" e vao de 35, as tres colunas caem exatamente nesses
 * pontos: 1170 - 442 - 210 - 70 = 448 para a primeira.
 */
.newsletter__interno {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 35px;
    min-height: 117px;
}

.newsletter__titulo {
    margin: 0 0 10px;
    color: var(--verde-escuro);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
}

.newsletter__apoio {
    margin: 0;
    color: var(--verde-escuro);
    font-size: 18px;
    line-height: 1.35;
}

/**
 * O formulario tem grid proprio: campo de 442 e botao de 210, com vao de 35.
 *
 * 🔴 NAO usa "display: contents" no <form>. Seria mais curto, mas display:
 * contents ja tirou elementos da arvore de acessibilidade em navegadores mais
 * antigos -- e WCAG pleno e exigencia do Planejamento Estrategico, nao desejo.
 * Com grid proprio o resultado visual e o mesmo e o formulario continua sendo
 * um formulario para o leitor de tela.
 *
 * A conta fecha: 442 + 35 + 210 = 687 para o form, e 1170 - 687 - 35 = 448
 * para o texto. Logo o texto vai de 135 a 583, o campo de 618 a 1060 e o botao
 * de 1095 a 1305 -- exatamente os pontos medidos no PDF.
 */
.newsletter__forma {
    display: grid;
    grid-template-columns: 442px 210px;
    gap: 35px;
    align-items: center;
}

/*
 * 🔴 POSIÇÃO FIXADA POR CLASSE, NÃO PELA ORDEM NO DOM (08/09/2026) -- rede
 * de segurança para o grid. O bug real (dois itens empilhados na coluna 1
 * em vez de lado a lado) era o `#bricks-component-...` do RD Station vindo
 * com `display: block !important` -- um `!important` de fora ganha de um
 * `style` inline comum, então o `display: contents` que `newsletter.phtml`
 * aplicava no meio da cadeia era ignorado (ver o comentário lá, e
 * `achatarAteAlvo`, que agora usa `setProperty(..., 'important')`). Esta
 * regra aqui é só um reforço -- dizer explicitamente qual coluna cada um
 * ocupa continua certo mesmo que uma versão futura do widget tenha outro
 * `!important` parecido em outro envolucro.
 */
.newsletter__campo { grid-column: 1; grid-row: 1; }
.newsletter__botao { grid-column: 2; grid-row: 1; }

/*
 * 🔴 `!important` NAS PROPRIEDADES VISUAIS -- o RD Station tem uma folha
 * própria (`#rd-form-kioml8gy .bricks-form__input { border-color: #c8c8c8;
 * background-color: #ffffff; ... }`, mesmo padrão em `#rd-button-...` para
 * o botão) usando um seletor com ID -- mais específico que uma classe
 * sozinha, então SEM `!important` essas regras venciam silenciosamente as
 * daqui (confirmado por captura de tela: borda cinza #c8c8c8 e botão verde
 * #009642 da RD Station, não o verde institucional do site). Escopo restrito
 * a estas duas classes -- elas existem só para vestir este widget.
 */

/* campo de 442 x 64, so contorno -- medido */
.newsletter__campo {
    width: 100%;
    height: 64px !important;
    padding-inline: 26px;
    border: 2px solid var(--verde-escuro) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--verde-escuro) !important;
    font-family: inherit !important;
    font-size: 19px !important;
}

.newsletter__campo::placeholder { color: var(--verde-escuro) !important; opacity: .75; }
.newsletter__campo:focus-visible { outline: 3px solid var(--lima-escuro); outline-offset: 2px; }

.newsletter__botao {
    width: 100%;
    height: 64px !important;
    padding-inline: 24px;
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--verde-escuro) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 19px !important;
    font-weight: 700;
    cursor: pointer;
}

.newsletter__botao[disabled] { opacity: .55; cursor: not-allowed; }

/**
 * Com o form em "display: contents", o aviso vira item do grid. Fica na
 * segunda linha, abaixo do campo e do botao -- e nao absoluto, que perderia a
 * referencia agora que o form nao e mais um bloco.
 */
/* ocupa a linha inteira do form, abaixo do campo e do botao */
.newsletter__aviso {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 14px;
    color: var(--verde-escuro);
    opacity: .8;
}

/**
 * 🔴 AVISO PRÓPRIO DO SITE, NO LUGAR DO `alert()` NATIVO (08/09/2026) -- ver
 * o cabeçalho de `parciais/newsletter.phtml`. O RD Station só sabe mostrar
 * confirmação/erro com o alerta feio e sem marca do navegador; isto aqui é
 * o mesmo cartão de aviso para qualquer `alert()` desta página.
 */
.aviso-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 29, 10, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.aviso-modal[hidden] { display: none; }

.aviso-modal__caixa {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    animation: aviso-modal-entrar .18s ease-out;
}

@keyframes aviso-modal-entrar {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.aviso-modal__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 18px;
}

.aviso-modal__icone--sucesso { background: var(--lima); color: var(--verde-escuro); }
.aviso-modal__icone--aviso   { background: #FBE7B4; color: #8A5A00; }

.aviso-modal__titulo {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    color: var(--verde-escuro);
}

.aviso-modal__texto {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.aviso-modal__botao {
    width: 100%;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-modal__caixa { animation: none; }
}

/**
 * 🔴 O VESTUÁRIO DO WIDGET RD STATION NÃO É CSS -- É JAVASCRIPT (08/09/2026)
 * ---------------------------------------------------------------------------
 * Ver o cabeçalho de `parciais/newsletter.phtml` (tem a história completa,
 * incluindo uma segunda tentativa que quebrou o envio sem parecer quebrada).
 * O script em `newsletter.phtml` dá as classes `.newsletter__campo`/
 * `.newsletter__botao` (algumas linhas acima) direto no `<input>`/`<button>`
 * de verdade, sem mover nenhum dos dois de lugar, e "achata" via JS
 * (`style.display = 'contents'` por referência ao nó, não por seletor CSS)
 * cada envolucro do RD Station entre eles e o `.newsletter__forma` -- por
 * isso não existe aqui nenhuma regra `.rd-section`/`.bricks-form__*`.
 */

/* ========================== RODAPE COMPLETO ========================== */
/* 1440 x 400 em #214138, com divisoria branca de 1pt antes da barra legal */

.rodapao { background: var(--verde-escuro); color: #fff; }

/**
 * Disposicao medida no PDF, dentro do grid de 1170:
 *   bloco da marca   135 .. 735   (600)
 *   Institucional    735
 *   Conteudos        945
 *   Suporte         1113
 *
 * Com "600px repeat(3, 1fr)" e vao zero, as colunas caem em 735, 925 e 1115 --
 * a do meio fica 20px a esquerda do PDF, diferenca invisivel na tela e que nao
 * compensa engessar com largura fixa.
 */
.rodapao__interno {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 0;
    padding-block: 54px 40px;
}

.rodapao__marca img { height: 54px; width: auto; margin-bottom: 26px; }

.rodapao__marca p {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

/**
 * O <nav> ocupa a segunda coluna do rodape (570 de largura) e se divide em
 * tres. Assim as colunas caem em 735, 925 e 1115 -- os pontos medidos no PDF
 * sao 735, 945 e 1113, ou seja 20px de diferenca na do meio, invisivel.
 *
 * 🔴 Aqui tambem NAO se usa display: contents, pelo mesmo motivo do
 * formulario da newsletter: e um <nav>, e ele precisa continuar sendo
 * anunciado como navegacao.
 */
.rodapao__colunas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.rodapao__titulo {
    margin: 0 0 20px;
    color: var(--lima);
    font-size: 21px;
    font-weight: 800;
}

.rodapao__coluna ul { list-style: none; margin: 0; padding: 0; }
.rodapao__coluna li { margin-bottom: 14px; }

.rodapao__coluna a {
    color: #fff;
    text-decoration: none;
    font-size: 19px;
}

.rodapao__coluna a:hover { color: var(--lima); text-decoration: underline; }

.rodapao__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 22px 34px;
    border-top: 1px solid rgba(255, 255, 255, .55);   /* a divisoria do layout */
}

.rodapao__legais { display: flex; flex-wrap: wrap; gap: 22px; }
.rodapao__legais a { color: #fff; text-decoration: none; font-size: 17px; }
.rodapao__legais a:hover { color: var(--lima); }

.rodapao__direitos { margin: 0; font-size: 17px; }

.rodapao__redes {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * Circulo VERDE com o icone BRANCO -- e o que esta no layout.
 *
 * 📌 Eu tinha feito o contrario (circulo branco, icone escuro) por causa do meu
 * proprio render: o renderizador preenche contornos, e o circulo saiu como uma
 * bolha branca solida porque o glifo de dentro nao foi desenhado. O layout
 * verdadeiro tem o inverso.
 *
 * O tom e um verde um pouco mais claro que o fundo, para o circulo se destacar
 * sem virar um bloco branco.
 */
.rodapao__redes a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #33544A;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.rodapao__redes a:hover { background: var(--lima); color: var(--verde-escuro); }
.rodapao__redes a:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/* ============================= RESPONSIVO ============================ */

@media (max-width: 1319.98px) {
    /* o menu do topo aperta antes de tudo: 7 itens em uma linha so */
    .menu-topo__lista { gap: 18px; }
    .menu-topo__link  { font-size: 14px; }
}

@media (max-width: 1199.98px) {
    .destaque__interno { grid-template-columns: 1fr 38%; }
    .destaque__texto   { padding: 56px 32px 48px 48px; }
    .destaque__titulo  { font-size: 40px; }
    .recentes__titulo  { font-size: 38px; }
    .cartao__titulo    { font-size: 26px; }

    .busca--trilha    { flex-basis: 300px; }
    .rodapao__interno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    /* a foto vai para cima do texto: coluna de 450 nao cabe mais */
    .destaque__interno { grid-template-columns: 1fr; min-height: 0; }
    .destaque__foto    { order: -1; aspect-ratio: 16 / 9; height: auto; }
    .destaque__texto   { padding: 36px 28px 40px; }
    .destaque__titulo  { font-size: 34px; -webkit-line-clamp: 4; }
    .destaque__descricao { font-size: 18px; }
    .destaque__botao   { margin-top: 8px; }

    .recentes         { padding-block: 48px 64px; }
    .recentes__titulo { font-size: 32px; margin-bottom: 32px; }
    .cartoes          { gap: 44px var(--vao-colunas); }
    /* no tablet a terceira coluna deixaria o título com 4 palavras por linha */
    .cartoes--densa   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartao__titulo   { font-size: 24px; }
    .cartao__data     { font-size: 18px; }

    /**
     * O menu de 7 itens nao cabe mais no cabecalho. Ele passa para uma faixa
     * propria, logo abaixo, com rolagem horizontal -- assim continua inteiro e
     * alcancavel, sem virar um "hamburguer" que esconde a navegacao.
     */
    .cabecalho--interno .cabecalho__interno { flex-wrap: wrap; row-gap: 10px; }
    .menu-topo {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* a barra de rolagem some, mas a rolagem continua -- o desvanecido das
           pontas e que faz o papel dela, e ocupa 0 de altura */
        scrollbar-width: none;
    }
    .menu-topo::-webkit-scrollbar { display: none; }
    .menu-topo__lista { justify-content: flex-start; flex-wrap: nowrap; padding-bottom: 0; }

    /* 19px de texto nao se acerta com o dedo: o link vira bloco de 40 */
    .menu-topo__link { display: block; padding-block: 10px; }

    /* mesma razao na trilha, que aqui e a segunda navegacao da pagina */
    .trilha__link,
    .trilha__atual { display: inline-block; padding-block: 10px; }
    .cabecalho--interno { height: auto; padding-block: 12px; }

    /* trilha e busca em duas linhas */
    .trilha__interno { flex-wrap: wrap; row-gap: 10px; padding-block: 12px; }
    .trilha__lista   { font-size: 17px; }
    .busca--trilha   { flex: 1 1 100%; }
    .trilha          { min-height: 0; }

    .newsletter__interno { grid-template-columns: 1fr; gap: 24px; }
    .newsletter__titulo  { font-size: 27px; }

    .rodapao__interno { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 767.98px) {
    .cartoes { grid-template-columns: 1fr; gap: 40px; }

    .destaque__selo,
    .destaque__tempo  { font-size: 16px; }
    .destaque__selo   { min-width: 0; height: 34px; }
    .destaque__titulo { font-size: 28px; }
    .destaque__botao  { width: 100%; min-height: 52px; font-size: 17px; border-width: 3px; }

    .recentes__titulo { font-size: 27px; }
    .cartao__titulo   { font-size: 21px; }
    .cartao__data     { font-size: 16px; }
    .selo             { font-size: 14px; }

    .carregar__botao { font-size: 17px; min-height: 56px; }
    .recentes__cabeca { align-items: flex-start; }
    /* no celular o filtro ocupa a linha inteira: duas pastilhas lado a lado ficariam com 6 letras cada */
    .filtro-periodo { width: 100%; }
    .filtro-periodo .pub-filtro,
    .filtro-periodo .pub-combo { flex: 1 1 calc(50% - 5px); }

    /* o campo e o botao ocupam a linha inteira, para caber o toque */
    .newsletter__forma { grid-template-columns: 1fr; gap: 14px; }
    /* só 1 coluna aqui -- sem isto os dois herdariam a coluna 2/1 do desktop e ficariam lado a lado */
    .newsletter__campo { grid-column: 1; grid-row: 1; }
    .newsletter__botao { grid-column: 1; grid-row: 2; }
    .newsletter__campo,
    .newsletter__botao { height: 54px; }

    .rodapao__colunas { grid-template-columns: 1fr 1fr; gap: 26px; }
    .rodapao__barra   { flex-direction: column; align-items: flex-start; }
}

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

/* ========================= ALVO DE TOQUE ============================= *

   🔴 A CONDICAO E "OU", e de proposito: `(max-width: 991.98px), (pointer:
   coarse)`.

   So por largura, o tablet em pe (768..991) ficava com o rodape de 26px --
   dedo igual ao do celular, alvo de desktop. E `pointer: coarse` sozinho nao
   basta: navegador antigo ignora a consulta, e o celular voltaria ao alvo
   pequeno calado. Uma condicao cobre o buraco da outra.

   O minimo do projeto e 40px (a WCAG 2.5.8 AA pede 24). Link dentro de titulo
   fica de fora: ele e texto corrido, tem area larga e a WCAG isenta.
   ===================================================================== */

@media (max-width: 991.98px), (pointer: coarse) {
    /**
     * O rodape tem 12 links empilhados: em 26px, errar o vizinho e facil.
     * Viram blocos de 40, e o `margin-bottom` da linha sai na mesma medida --
     * a lista fica com a mesma altura de antes, so que agora o espaco esta
     * DENTRO do alvo, e nao entre os alvos.
     */
    .rodapao__coluna a,
    .rodapao__legais a { display: inline-block; padding-block: 7px; }
    .rodapao__coluna li { margin-bottom: 0; }

    /* o selo de categoria e link, entao tambem precisa de altura */
    .selo { padding-block: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .destaque__botao,
    .carregar__botao { transition: none; }
    /* a seta girando enquanto o lote chega e movimento -- quem pediu menos movimento nao ve */
    .carregar__botao--ocupado .bi { animation: none; }
}