/* =====================================================================
   Noticiário IA — Estilos do site público
   Portal editorial sobre inteligência artificial: papel claro e tinta
   escura (tema do sistema por padrão, com modo escuro), títulos serifados
   para leitura, interface em sans e metadados em mono, azul-cobalto para
   ação e verde-lima só como sinal da marca. A capa usa mosaico de
   manchetes com o título sobre a imagem e cabeçalhos de secção em aba
   sobre o filete, como nos portais de notícia de referência. Espaços de
   anúncio com altura reservada (sem saltos de layout).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens (claro por padrão; escuro via [data-tema="escuro"])
   --------------------------------------------------------------------- */
:root {
    --fundo: #f6f5f1;
    --fundo-alt: #eeece5;
    --superficie: #ffffff;
    --superficie-2: #f1efe8;
    --linha: #dedbd1;
    --linha-forte: #c3beb0;
    --regra: #16181d;              /* fio forte dos cabeçalhos de secção */
    --texto: #16181d;
    --texto-suave: #464a53;
    --texto-fraco: #646870;        /* 4,9:1 sobre o fundo */
    --acento: #2743d6;             /* botões: texto branco 7,5:1 */
    --acento-hover: #1d34b0;
    --acento-texto: #2239c2;       /* links: 8:1 */
    --no-acento: #ffffff;
    --sinal: #c8f169;              /* verde-lima da marca: só decorativo, com texto escuro */
    --no-sinal: #16181d;
    --primaria: #0f6b4a;
    --rumor: #8f4600;
    --sombra: 0 1px 2px rgba(22, 24, 29, 0.06), 0 10px 28px rgba(22, 24, 29, 0.08);
    --marca-fundo: #16181d;
    --marca-traco: #c8f169;
    --rodape-fundo: #16181d;
    --rodape-texto: #d4d6da;
    --rodape-fraco: #9da2aa;

    --cat-modelos: #2f45c7;
    --cat-agentes: #7338b0;
    --cat-ferramentas: #0a6b63;
    --cat-hardware: #875000;
    --cat-pesquisa: #1d6a3b;
    --cat-mercado: #a1361a;
    --cat-seguranca-e-regulacao: #8e2a59;

    --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
    --fonte-texto: "Newsreader", Georgia, "Times New Roman", serif;
    --fonte-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --largura: 1240px;
    --largura-texto: 700px;
    --raio: 6px;
    --raio-grande: 10px;
    --transicao: 0.18s ease;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0e1013;
        --fundo-alt: #13161a;
        --superficie: #171a1f;
        --superficie-2: #1e2228;
        --linha: #2a2f37;
        --linha-forte: #3d434d;
        --regra: #eceef1;
        --texto: #eceef1;
        --texto-suave: #b6bcc5;
        --texto-fraco: #9098a2;
        --acento: #8ea5ff;             /* botões com texto escuro: 8:1 */
        --acento-hover: #aabbff;
        --acento-texto: #a3b6ff;
        --no-acento: #0e1013;
        --primaria: #74d8a8;
        --rumor: #f2b46b;
        --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
        --marca-fundo: #c8f169;
        --marca-traco: #0e1013;
        --rodape-fundo: #090b0d;
        --rodape-texto: #cfd3d9;
        --rodape-fraco: #949aa3;

        --cat-modelos: #a3b6ff;
        --cat-agentes: #cfa8ff;
        --cat-ferramentas: #62d3c4;
        --cat-hardware: #f2b45c;
        --cat-pesquisa: #86d9a0;
        --cat-mercado: #ffa184;
        --cat-seguranca-e-regulacao: #f59ac2;

        color-scheme: dark;
    }

    .secao-categoria .secao-titulo {
        color: #16181d;
    }

    .vitrine .chip {
        color: #16181d;
    }
}

[data-tema="escuro"] {
    --fundo: #0e1013;
    --fundo-alt: #13161a;
    --superficie: #171a1f;
    --superficie-2: #1e2228;
    --linha: #2a2f37;
    --linha-forte: #3d434d;
    --regra: #eceef1;
    --texto: #eceef1;
    --texto-suave: #b6bcc5;
    --texto-fraco: #9098a2;
    --acento: #8ea5ff;             /* botões com texto escuro: 8:1 */
    --acento-hover: #aabbff;
    --acento-texto: #a3b6ff;
    --no-acento: #0e1013;
    --primaria: #74d8a8;
    --rumor: #f2b46b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
    --marca-fundo: #c8f169;
    --marca-traco: #0e1013;
    --rodape-fundo: #090b0d;
    --rodape-texto: #cfd3d9;
    --rodape-fraco: #949aa3;

    --cat-modelos: #a3b6ff;
    --cat-agentes: #cfa8ff;
    --cat-ferramentas: #62d3c4;
    --cat-hardware: #f2b45c;
    --cat-pesquisa: #86d9a0;
    --cat-mercado: #ffa184;
    --cat-seguranca-e-regulacao: #f59ac2;

    color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-ui);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--acento-texto);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--transicao), background-color var(--transicao), border-color var(--transicao);
}

a:hover {
    color: var(--texto);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--sinal);
    color: var(--no-sinal);
}

[hidden] {
    display: none !important;
}

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

main:focus {
    outline: none;
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pular-conteudo {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: var(--raio);
    background: var(--acento);
    color: var(--no-acento);
    font-weight: 600;
}

.pular-conteudo:focus {
    top: 1rem;
    color: var(--no-acento);
}

.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .container {
        padding-inline: 28px;
    }
}

.icone {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   3. Botões, etiquetas e formulários
   --------------------------------------------------------------------- */
.botao,
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--acento);
    border-radius: var(--raio);
    background: var(--acento);
    color: var(--no-acento);
    font-family: var(--fonte-ui);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.botao:hover,
button[type="submit"]:hover {
    background: var(--acento-hover);
    border-color: var(--acento-hover);
    color: var(--no-acento);
}

button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.botao-secundario {
    background: transparent;
    border-color: var(--linha-forte);
    color: var(--texto);
}

.botao-secundario:hover {
    background: var(--superficie-2);
    border-color: var(--texto-fraco);
    color: var(--texto);
}

.botao-largo {
    width: 100%;
}

.botao-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.botao-icone:hover {
    background: var(--superficie-2);
    color: var(--texto);
}

/* Chapéu: categoria e formato */
.chapeu {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.chip {
    --cor-cat: var(--acento-texto);
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cor-cat);
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
}

.chip::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background: var(--cor-cat);
}

.chip:hover {
    color: var(--texto);
    text-decoration: underline;
}

[data-cat="modelos"] { --cor-cat: var(--cat-modelos); }
[data-cat="agentes"] { --cor-cat: var(--cat-agentes); }
[data-cat="ferramentas"] { --cor-cat: var(--cat-ferramentas); }
[data-cat="hardware"] { --cor-cat: var(--cat-hardware); }
[data-cat="pesquisa"] { --cor-cat: var(--cat-pesquisa); }
[data-cat="mercado"] { --cor-cat: var(--cat-mercado); }
[data-cat="seguranca-e-regulacao"] { --cor-cat: var(--cat-seguranca-e-regulacao); }

.formato {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--linha-forte);
    border-radius: 3px;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.formato[data-formato="rumor"] {
    border-color: currentColor;
    color: var(--rumor);
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--texto-suave);
    font-family: var(--fonte-ui);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: help;
}

.selo-primaria {
    color: var(--primaria);
}

input[type="search"],
input[type="email"],
input[type="text"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

input:focus,
textarea:focus {
    border-color: var(--acento-texto);
}

input::placeholder,
textarea::placeholder {
    color: var(--texto-fraco);
    opacity: 1;
}

.form-busca {
    display: flex;
    gap: 0.5rem;
}

.form-busca-grande {
    max-width: 640px;
    margin-block: 1rem 0.5rem;
}

.aviso {
    padding: 0.85rem 1rem;
    border: 1px solid var(--linha);
    border-left: 4px solid var(--acento);
    border-radius: var(--raio);
    background: var(--superficie);
}

.aviso-sucesso {
    border-left-color: var(--primaria);
}

.aviso-erro {
    border-left-color: var(--cat-mercado);
}

/* ---------------------------------------------------------------------
   4. Cabeçalho
   --------------------------------------------------------------------- */
.topo {
    background: var(--fundo);
}

.topo-faixa {
    border-bottom: 1px solid var(--linha);
    background: var(--fundo-alt);
    font-size: 0.8rem;
}

.topo-faixa-conteudo {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 36px;
    overflow: hidden;
}

.data-hoje {
    margin: 0;
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rotulo-tendencias {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0 0.25rem;
    color: var(--texto);
    font-weight: 600;
    white-space: nowrap;
}

.rotulo-tendencias::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sinal);
    box-shadow: 0 0 0 1px var(--texto);
}

.lista-tendencias {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.lista-tendencias::-webkit-scrollbar {
    display: none;
}

.lista-tendencias a,
.topo-faixa-links a {
    color: var(--texto-suave);
    text-decoration: none;
}

.lista-tendencias a:hover,
.topo-faixa-links a:hover {
    color: var(--texto);
    text-decoration: underline;
}

.topo-faixa-links {
    display: flex;
    gap: 1rem;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .data-hoje,
    .topo-faixa-links {
        display: none;
    }
}

.topo-principal {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 76px;
    padding-block: 0.6rem;
}

/* Marca */
.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: var(--texto);
    text-decoration: none;
}

.marca:hover {
    color: var(--texto);
}

.marca-simbolo {
    flex-shrink: 0;
    border-radius: 10px;
}

.marca-simbolo .marca-simbolo-fundo {
    fill: var(--marca-fundo);
}

.marca-simbolo .marca-simbolo-traco {
    stroke: var(--marca-traco);
}

.marca-simbolo .marca-simbolo-origem {
    fill: var(--marca-traco);
}

.marca-texto {
    display: grid;
    min-width: 0;
}

.marca-nome {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--fonte-titulo);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.marca-sufixo {
    position: relative;
    top: -0.2em;
    padding: 0.12rem 0.3rem 0.08rem;
    border-radius: 3px;
    background: var(--sinal);
    color: var(--no-sinal);
    font-family: var(--fonte-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.marca-assinatura {
    margin-top: 0.3rem;
    color: var(--texto-fraco);
    font-size: 0.74rem;
    white-space: nowrap;
}

@media (max-width: 479px) {
    .marca-assinatura {
        display: none;
    }

    .marca-nome {
        font-size: 1.5rem;
    }
}

.busca-topo {
    display: none;
    position: relative;
    flex: 1;
    max-width: 440px;
    margin-left: auto;
}

.busca-topo input {
    padding-right: 3rem;
    border-radius: 999px;
    background: var(--superficie);
}

.busca-topo .botao-busca {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-height: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 999px;
}

.topo-acoes {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
}

@media (min-width: 900px) {
    .busca-topo {
        display: block;
    }

    .topo-acoes {
        margin-left: 0;
    }

    .botao-busca-movel {
        display: none;
    }
}

/* Menu: faixa com rolagem horizontal no celular, linha única no desktop */
.menu {
    border-top: 1px solid var(--linha);
    border-bottom: 2px solid var(--regra);
    background: var(--fundo);
}

@media (min-width: 1024px) {
    .menu {
        position: sticky;
        top: 0;
        z-index: 40;
        background: color-mix(in srgb, var(--fundo) 94%, transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

.menu-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.menu-lista {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0 -0.6rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
    /* Sombra à direita enquanto houver mais seções fora da tela */
    background:
        linear-gradient(to right, var(--fundo) 40%, transparent) left / 2.5rem 100% no-repeat,
        linear-gradient(to left, var(--fundo) 40%, transparent) right / 2.5rem 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left / 0.9rem 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right / 0.9rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Painel "Seções": abre sem JavaScript (details/summary), só onde a faixa rola */
.menu-secoes {
    position: relative;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .menu-secoes {
        display: none;
    }
}

.menu-secoes > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    color: var(--texto);
    font-size: 0.8rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

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

.menu-secoes > summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.menu-secoes[open] > summary {
    background: var(--fundo-alt);
}

.menu-secoes-painel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.45rem);
    left: 0;
    width: min(20rem, calc(100vw - 32px));
    padding: 0.85rem 1rem 1rem;
    background: var(--fundo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-grande);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.menu-secoes-titulo {
    margin: 0 0 0.4rem;
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.menu-secoes-painel ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.6rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.menu-secoes-painel ul:last-child {
    margin-bottom: 0;
}

.menu-secoes-painel a {
    display: block;
    padding: 0.4rem 0.2rem;
    color: var(--texto);
    font-size: 0.86rem;
    text-decoration: none;
}

.menu-secoes-painel a[aria-current="page"] {
    font-weight: 700;
    color: var(--acento);
}

.menu-lista::-webkit-scrollbar {
    display: none;
}

.menu a {
    position: relative;
    display: inline-block;
    padding: 0.75rem 0.6rem;
    color: var(--texto-suave);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.menu a:hover {
    color: var(--texto);
}

.menu a[aria-current="page"] {
    color: var(--texto);
    font-weight: 600;
}

.menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 0.6rem;
    bottom: -2px;
    left: 0.6rem;
    height: 3px;
    background: var(--cor-cat, var(--acento));
}

.menu-separador {
    width: 1px;
    height: 1.1rem;
    margin-inline: 0.5rem;
    background: var(--linha-forte);
}

.menu-assunto a {
    color: var(--texto-fraco);
    font-size: 0.84rem;
}

/* Desktop: nada fica escondido numa rolagem sem barra (o painel "Seções" não
   existe aqui). Quando as seções não cabem numa linha, quebram para a seguinte
   sempre inteiras e a altura do menu acompanha — vale para qualquer número de
   categorias, nome longo ou idioma. Um nome maior que a linha inteira quebra
   entre palavras, nunca dentro delas. Os assuntos em foco ficam no rodapé e na
   faixa do celular. */
@media (min-width: 1024px) {
    .menu-lista {
        flex: 1;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-inline: -0.5rem;
        overflow: visible;
        white-space: normal;
        background: none;
    }

    /* As 7 seções padrão cabem numa linha a partir de 1200px (0,85rem até 1279px) */
    .menu-lista a {
        padding-inline: 0.5rem;
    }

    .menu-lista a[aria-current="page"]::after {
        right: 0.5rem;
        left: 0.5rem;
    }

    .menu-assunto,
    .menu-separador {
        display: none;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .menu-lista a {
        font-size: 0.85rem;
    }
}

.busca-cabecalho {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--linha);
    background: var(--fundo-alt);
}

/* ---------------------------------------------------------------------
   5. Estrutura e secções
   --------------------------------------------------------------------- */
.conteudo-principal {
    padding-block: 1.5rem 0;
}

.layout-lateral {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 2.25rem;
}

@media (min-width: 1024px) {
    .layout-lateral {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 3rem;
    }
}

.coluna-principal {
    min-width: 0;
}

@media (min-width: 1024px) {
    /* A coluna principal abre com a aba de uma secção ("Últimas notícias"): o filete
       do primeiro bloco lateral ("Mais lidas") desce para a mesma linha do filete da
       aba. A altura é a da .secao-titulo (padding + 1 linha de 1.05rem × 1.25). */
    .layout-lateral:has(> .coluna-principal > .secao:first-child > .secao-cabecalho:first-child) > .barra-lateral > .bloco:first-child {
        margin-top: calc(0.42rem + 0.34rem + 1.05rem * 1.25);
    }

    /* Artigo: título e linha fina ocupam uma faixa própria; a barra lateral começa
       na faixa seguinte, cujo topo é o filete de cima da .artigo-meta (autor). Assim
       o filete do "Mais lidas" fica na mesma altura desse filete. Com subgrid, as duas
       faixas são linhas da grelha geral. */
    @supports (grid-template-rows: subgrid) {
        .layout-artigo {
            grid-template-rows: auto auto;
            row-gap: 0;
        }

        .layout-artigo > .artigo {
            display: grid;
            grid-row: 1 / span 2;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: subgrid;
        }

        .layout-artigo > .barra-lateral {
            grid-column: 2;
            grid-row: 2;
        }
    }
}

/* Portal com poucos artigos: sem coluna principal, os blocos laterais ocupam a largura */
.layout-sem-principal {
    grid-template-columns: minmax(0, 1fr);
}

.layout-sem-principal .barra-lateral {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
}

.secao {
    margin-bottom: 3rem;
}

/* Cabeçalho de secção: aba cheia sobre o filete (estilo portal de notícias) */
.secao-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--regra);
}

.secao-titulo {
    margin: 0;
    padding: 0.42rem 0.9rem 0.34rem;
    border-radius: 5px 5px 0 0;
    background: var(--regra);
    color: var(--fundo);
    font-family: var(--fonte-ui);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.015em;
}

.secao-categoria .secao-cabecalho {
    border-bottom-color: var(--cor-cat, var(--regra));
}

.secao-categoria .secao-titulo {
    background: var(--cor-cat, var(--regra));
    color: #fff;
}

[data-tema="escuro"] .secao-categoria .secao-titulo {
    color: #16181d;
}

.secao-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 0.45rem;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.secao-link:hover {
    color: var(--acento-texto);
}

.cabecalho-pagina {
    padding-block: 0.25rem 1.6rem;
    border-bottom: 2px solid var(--regra);
}

.rotulo-pagina {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    color: var(--cor-cat, var(--texto-suave));
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.titulo-pagina {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.linha-fina {
    color: var(--texto-suave);
    font-family: var(--fonte-texto);
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
}

.estado-vazio {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 3rem 1.25rem;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-grande);
    color: var(--texto-suave);
    text-align: center;
}

.estado-vazio p {
    margin: 0;
}

.estado-vazio h2 {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    color: var(--texto);
}

.estado-vazio .icone {
    color: var(--texto-fraco);
}

/* ---------------------------------------------------------------------
   6. Cartões
   --------------------------------------------------------------------- */
.cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* O link do título cobre o cartão inteiro */
.cartao-titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cartao-titulo a {
    color: var(--texto);
    text-decoration: none;
}

.cartao:hover .cartao-titulo a {
    color: var(--acento-texto);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.cartao-titulo a:focus-visible {
    outline: none;
}

.cartao:has(.cartao-titulo a:focus-visible) {
    outline: 3px solid var(--acento-texto);
    outline-offset: 4px;
    border-radius: var(--raio);
}

.cartao-midia {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio);
    background: var(--superficie-2);
}

.cartao-midia img,
.artigo-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cartao-midia img {
    transition: transform 0.4s ease;
}

.cartao:hover .cartao-midia img {
    transform: scale(1.045);
}

.imagem-vazia {
    --cor-cat: var(--texto-fraco);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    background-color: var(--superficie-2);
    background-image:
        linear-gradient(var(--linha) 1px, transparent 1px),
        linear-gradient(90deg, var(--linha) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
    color: var(--cor-cat);
    text-align: center;
}

.imagem-vazia span {
    padding: 0 0.75rem;
    color: var(--texto-suave);
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cartao-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding-top: 0.8rem;
}

.cartao-titulo {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.22;
}

.cartao-resumo {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao-meta {
    margin: 0;
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* Manchete (a composição sobre a imagem fica na secção 7 — Página inicial) */
.cartao-destaque .cartao-titulo {
    font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.45rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.cartao-destaque .cartao-resumo {
    font-size: 1.05rem;
    -webkit-line-clamp: 3;
}

.cartao-destaque .cartao-corpo {
    gap: 0.55rem;
}

/* Lista: texto e miniatura lado a lado */
.lista-noticias {
    display: grid;
}

.lista-noticias > .cartao-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 1rem;
    align-items: start;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--linha);
}

.lista-noticias > .cartao-lista:first-child {
    padding-top: 0;
}

.cartao-lista .cartao-midia {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 1;
    border-radius: var(--raio);
}

.cartao-lista .cartao-corpo {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
    gap: 0.35rem;
}

.cartao-lista .cartao-titulo {
    font-size: 1.12rem;
}

.cartao-lista .cartao-resumo {
    display: none;
}

.cartao-lista .imagem-vazia span {
    display: none;
}

@media (min-width: 600px) {
    .lista-noticias > .cartao-lista {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 1.5rem;
    }

    .cartao-lista .cartao-midia {
        aspect-ratio: 16 / 10;
    }

    .cartao-lista .cartao-titulo {
        font-size: 1.35rem;
    }

    .cartao-lista .cartao-resumo {
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }
}

/* Compacto: só chapéu, título e hora (a faixa de destaques) */
.cartao-compacto .cartao-midia {
    display: none;
}

.cartao-compacto .cartao-corpo {
    padding-top: 0;
}

.cartao-compacto .cartao-titulo {
    font-size: 1.05rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.75rem 1.5rem;
}

@media (min-width: 1024px) {
    .grade-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cartao-texto {
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--linha);
}

.cartao-texto .cartao-corpo {
    padding: 0;
}

/* ---------------------------------------------------------------------
   7. Página inicial
   --------------------------------------------------------------------- */
/* Vitrine: mosaico de manchetes com o texto sobre a imagem (gradiente
   escuro no pé, como nas capas dos portais de referência) */
.vitrine {
    display: grid;
    gap: 1.25rem;
}

.vitrine .cartao {
    display: flex;
    overflow: hidden;
    border-radius: var(--raio-grande);
    background: #14161b;
}

.vitrine .cartao-midia {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

.vitrine .cartao-midia::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 12, 16, 0.9) 0%, rgba(10, 12, 16, 0.42) 42%, rgba(10, 12, 16, 0.04) 70%);
}

.vitrine .cartao-corpo {
    position: relative;
    z-index: 2;
    margin-top: auto;
    width: 100%;
    padding: 1.1rem 1.25rem 1rem;
}

.vitrine .cartao-titulo a,
.vitrine .cartao:hover .cartao-titulo a {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.vitrine .cartao:hover .cartao-titulo a {
    text-decoration-color: rgba(255, 255, 255, 0.9);
}

.vitrine .cartao-meta {
    color: rgba(255, 255, 255, 0.72);
}

.vitrine .cartao-resumo {
    color: rgba(255, 255, 255, 0.85);
}

/* Chapéu sobre a imagem: a categoria vira etiqueta sólida da sua cor */
.vitrine .chip {
    padding: 0.24rem 0.55rem 0.2rem;
    border-radius: 4px;
    background: var(--cor-cat);
    color: #fff;
}

.vitrine .chip::before {
    content: none;
}

.vitrine .chip:hover {
    color: #fff;
    text-decoration: underline;
}

.vitrine .formato {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(10, 12, 16, 0.55);
    color: rgba(255, 255, 255, 0.92);
}

[data-tema="escuro"] .vitrine .chip {
    color: #16181d;
}

/* Manchete principal */
.vitrine-principal .cartao-destaque {
    min-height: 24rem;
}

.vitrine-principal .cartao-destaque .cartao-titulo {
    font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem);
    line-height: 1.08;
}

.vitrine-principal .cartao-destaque .cartao-resumo {
    font-family: var(--fonte-ui);
    -webkit-line-clamp: 2;
}

/* Cartões laterais da vitrine */
.vitrine-lateral {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.vitrine-lateral .cartao {
    min-height: 13rem;
}

.vitrine-lateral [data-vitrine-slot] { min-width: 0; }
.vitrine-lateral [data-vitrine-slot] > .cartao { height: 100%; }

.vitrine-lateral .cartao-titulo {
    font-size: 1.18rem;
    font-weight: 700;
}

.vitrine-lateral .cartao-resumo {
    display: none;
}

@media (min-width: 600px) and (max-width: 899px) {
    .vitrine-lateral {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .vitrine {
        grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
        gap: 1.5rem;
    }

    .vitrine-unica {
        grid-template-columns: minmax(0, 1fr);
    }

    .vitrine-unica .vitrine-principal .cartao-destaque {
        min-height: 26rem;
    }

    .vitrine-lateral {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .vitrine-lateral .cartao {
        min-height: 0;
    }
}

/* Faixa de destaques: cartões com imagem sob o cabeçalho "Mais destaques" */
.secao-faixa {
    margin-top: 2.5rem;
}

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

.faixa-destaques .cartao-titulo {
    font-size: 1.08rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 600px) {
    .faixa-destaques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .faixa-destaques {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------
   8. Barra lateral
   --------------------------------------------------------------------- */
.barra-lateral {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

.bloco {
    border-top: 2px solid var(--regra);
}

/* Aba pendurada no filete do bloco */
.bloco-titulo {
    display: inline-block;
    margin: -2px 0 1.1rem;
    padding: 0.36rem 0.75rem 0.3rem;
    border-radius: 0 0 5px 5px;
    background: var(--regra);
    color: var(--fundo);
    font-family: var(--fonte-ui);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lista-numerada {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lidas;
}

.lista-numerada li {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: 0.6rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--linha);
    counter-increment: lidas;
}

.lista-numerada li:first-child {
    padding-top: 0;
}

.lista-numerada li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lista-numerada li::before {
    content: counter(lidas);
    grid-row: span 2;
    color: var(--acento-texto);
    font-family: var(--fonte-titulo);
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1.05;
}

.lista-numerada li > a {
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.lista-numerada li > a:hover {
    color: var(--acento-texto);
    text-decoration: underline;
}

.lista-numerada .cartao-meta {
    margin-top: 0.3rem;
}

.lista-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-tags a,
.lista-tags span {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: 0.85rem;
    text-decoration: none;
}

.lista-tags a:hover {
    border-color: var(--texto);
    background: var(--superficie);
    color: var(--texto);
}

.bloco-newsletter {
    padding: 1.1rem 1.15rem 1.2rem;
    border-top: 0;
    border-radius: var(--raio-grande);
    background: var(--superficie);
    box-shadow: inset 0 3px 0 var(--sinal), 0 0 0 1px var(--linha);
}

/* A newsletter é encaixotada: o título não usa a aba pendurada */
.bloco-newsletter .bloco-titulo {
    margin: 0 0 0.9rem;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--texto);
}

.bloco-newsletter p,
.bloco-metodo p {
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.bloco-metodo p:last-child {
    margin: 0;
}

.form-newsletter {
    display: grid;
    gap: 0.65rem;
}

.campo-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.consentimento-caixa {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--texto-suave);
    font-size: 0.82rem;
    line-height: 1.4;
}

.consentimento-caixa input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
    accent-color: var(--acento);
}

@media (min-width: 1024px) {
    .lateral-fixa {
        position: sticky;
        top: 72px;
    }
}

/* ---------------------------------------------------------------------
   9. Artigo
   --------------------------------------------------------------------- */
.artigo {
    min-width: 0;
}

.artigo-cabecalho {
    max-width: 820px;
    margin-bottom: 1.75rem;
}

/* Título e linha fina (faixa de cima) separados da abertura (autor): ver .layout-artigo */
.artigo-topo .artigo-cabecalho {
    margin-bottom: 0;
}

.artigo-principal {
    min-width: 0;
}

.artigo-abertura {
    max-width: 820px;
    margin-bottom: 1.75rem;
}

.artigo-rotulos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.artigo-titulo {
    font-size: clamp(2.05rem, 1.3rem + 2.8vw, 3.3rem);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.artigo-linha-fina {
    margin: 0 0 1.4rem;
    color: var(--texto-suave);
    font-family: var(--fonte-texto);
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.38rem);
    line-height: 1.45;
}

.artigo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}

.autor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.autor-avatar {
    display: inline-flex;
    flex-shrink: 0;
}

.autor-nome {
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
}

.autor-data {
    margin: 0;
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
}

.autor-data .icone {
    vertical-align: -2px;
}

.artigo-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.botao-ferramenta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.6rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao-ferramenta:hover,
.botao-ferramenta[aria-pressed="true"] {
    border-color: var(--texto);
    background: var(--texto);
    color: var(--fundo);
}

.partilha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.botao-partilha {
    border-color: var(--linha-forte);
}

.botao-partilha:hover {
    border-color: var(--texto);
    background: var(--texto);
    color: var(--fundo);
}

.artigo-imagem {
    margin: 0 0 2rem;
}

.artigo-imagem img,
.artigo-imagem .imagem-vazia {
    aspect-ratio: 16 / 9;
    border-radius: var(--raio);
    background: var(--superficie-2);
}

.artigo-imagem figcaption {
    padding-top: 0.55rem;
    color: var(--texto-fraco);
    font-size: 0.8rem;
}

.artigo-imagem .credito,
.artigo-imagem .credito a {
    color: var(--texto-fraco);
}

.artigo-corpo {
    max-width: var(--largura-texto);
}

.resumo-rapido {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: inset 3px 0 0 var(--acento);
}

.resumo-rapido h2,
.fontes-metodo h2,
.artigo-video h2,
.galeria-artigo h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resumo-rapido ul {
    margin: 0;
    padding-left: 1.15rem;
}

.resumo-rapido li {
    margin-bottom: 0.45rem;
    font-family: var(--fonte-texto);
    font-size: 1.08rem;
    line-height: 1.45;
}

.resumo-rapido li::marker {
    color: var(--acento-texto);
}

.contexto-editorial {
    margin-bottom: 2rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--fundo-alt);
}

.contexto-editorial summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.15rem;
    font-weight: 600;
    cursor: pointer;
}

.contexto-editorial p {
    margin: 0;
    padding: 0 1.15rem 1.05rem;
    color: var(--texto-suave);
    font-family: var(--fonte-texto);
    font-size: 1.05rem;
    line-height: 1.55;
}

.texto {
    font-family: var(--fonte-texto);
    font-size: 1.22rem;
    line-height: 1.72;
}

.texto p {
    margin: 0 0 1.25em;
}

.texto h2 {
    margin: 2.2rem 0 0.7rem;
    font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem);
    line-height: 1.2;
}

.texto h3 {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.35rem;
}

.texto a {
    color: var(--acento-texto);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.texto a:hover {
    color: var(--texto);
    text-decoration-thickness: 2px;
}

.texto ul,
.texto ol {
    margin: 0 0 1.25em;
    padding-left: 1.4rem;
}

.texto li {
    margin-bottom: 0.45em;
}

.texto blockquote {
    margin: 2rem 0;
    padding: 0.2rem 0 0.2rem 1.25rem;
    border-left: 3px solid var(--acento);
    color: var(--texto);
    font-size: 1.28rem;
    font-style: italic;
}

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

/* Fontes e método */
.fontes-metodo {
    margin: 2.25rem 0 1.5rem;
    padding: 1.1rem 1.25rem 1rem;
    border: 1px solid var(--linha);
    border-top: 2px solid var(--regra);
    border-radius: 0 0 var(--raio) var(--raio);
    background: var(--superficie);
    font-size: 0.92rem;
}

.fontes-metodo p {
    color: var(--texto-suave);
}

.fontes-metodo p:last-child {
    margin-bottom: 0;
}

.lista-fontes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.lista-fontes a::after {
    content: " ↗";
    font-weight: 400;
}

/* Vídeo de origem (player carregado só ao clicar) e galeria */
.artigo-video,
.galeria-artigo {
    margin: 2.2rem 0;
}

.video-incorporado,
.galeria-artigo figure {
    margin: 0;
}

.video-capa,
.video-player {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 0;
    border-radius: var(--raio);
    background: #000;
}

.video-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: opacity var(--transicao);
}

.video-botao {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 3rem;
    border-radius: 0.8rem;
    background: rgba(14, 16, 19, 0.85);
    color: #fff;
    transform: translate(-50%, -50%);
    transition: background-color var(--transicao);
}

.video-capa:hover img,
.video-capa:focus-visible img {
    opacity: 1;
}

.video-capa:hover .video-botao,
.video-capa:focus-visible .video-botao {
    background: #2743d6;
}

.video-capa:focus-visible {
    outline: 3px solid var(--acento-texto);
    outline-offset: 3px;
}

.video-incorporado figcaption,
.galeria-artigo figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    padding-top: 0.55rem;
    color: var(--texto-suave);
    font-size: 0.85rem;
    line-height: 1.45;
}

.video-incorporado .credito,
.galeria-artigo .credito,
.video-trecho {
    color: var(--texto-fraco);
}

.galeria-grade {
    display: grid;
    gap: 1.25rem;
}

.galeria-artigo img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--raio);
    background: var(--superficie-2);
}

@media (min-width: 700px) {
    .galeria-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.artigo-tags {
    margin: 1.5rem 0;
}

.artigo-partilha-final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-block: 1rem;
    border-top: 1px solid var(--linha);
}

.artigo-partilha-final p {
    margin: 0;
    font-weight: 600;
}

.relacionados {
    margin-top: 1.5rem;
}

/* Comentários e respostas */
.comentarios {
    margin-top: 2.5rem;
}

.comentarios > h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding-top: 0.7rem;
    border-top: 2px solid var(--regra);
    font-size: 1.55rem;
}

.comentarios-total {
    display: inline-grid;
    place-items: center;
    min-width: 1.8rem;
    height: 1.8rem;
    padding-inline: 0.45rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto);
    font-family: var(--fonte-mono);
    font-size: 0.8rem;
}

.comentarios .aviso {
    margin: 0 0 1rem;
}

.form-comentario {
    display: grid;
    gap: 0.75rem;
    padding: 1.1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    background: var(--superficie);
}

.form-comentario textarea {
    width: 100%;
    min-height: 6.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    line-height: 1.55;
    resize: vertical;
}

.form-comentario-campos {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 600px) {
    .form-comentario-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-comentario-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.form-comentario-regras,
.comentarios-fechados,
.comentarios-vazio {
    margin: 0;
    color: var(--texto-fraco);
    font-size: 0.85rem;
}

.comentarios-vazio {
    padding-block: 1.25rem 0.5rem;
    font-size: 0.95rem;
}

.form-comentario-resposta {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.9rem;
}

.form-comentario-resposta a,
.comentario-contexto a {
    color: var(--acento-texto);
    font-weight: 600;
}

.form-comentario-status {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-comentario-status[data-tipo="erro"] {
    color: var(--cat-mercado);
}

.form-comentario-status[data-tipo="sucesso"] {
    color: var(--primaria);
}

.lista-comentarios,
.respostas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-comentarios {
    margin-top: 1.25rem;
}

.conversa {
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--linha);
}

.conversa:last-child {
    border-bottom: 0;
}

.respostas {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    margin-left: 1.15rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--linha);
}

.conversa > .form-comentario,
.respostas .form-comentario {
    margin-top: 0.9rem;
}

.comentario {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.75rem;
    scroll-margin-top: 6rem;
}

.comentario:target .comentario-corpo {
    outline: 2px solid var(--acento-texto);
    outline-offset: 6px;
    border-radius: 2px;
}

.comentario-avatar {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--superficie-2);
    color: var(--texto);
    font-weight: 600;
}

.comentario-redacao .comentario-avatar {
    background: var(--marca-fundo);
    color: var(--marca-traco);
    font-family: var(--fonte-titulo);
}

.comentario-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.comentario-nome {
    overflow-wrap: anywhere;
}

.comentario-selo {
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    background: var(--sinal);
    color: var(--no-sinal);
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.comentario-data {
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    text-decoration: none;
}

.comentario-data:hover {
    text-decoration: underline;
}

.comentario-contexto {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.15rem 0 0;
    color: var(--texto-fraco);
    font-size: 0.82rem;
}

.comentario-texto {
    margin-top: 0.35rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.comentario-texto p {
    margin: 0 0 0.6rem;
}

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

.comentario-responder {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    margin-top: 0.3rem;
    color: var(--texto-suave);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.comentario-responder:hover,
.comentario-responder:focus-visible {
    color: var(--acento-texto);
}

/* Modo leitura: apenas o texto */
.modo-leitura .topo-faixa,
.modo-leitura .menu,
.modo-leitura .busca-topo,
.modo-leitura .breadcrumbs,
.modo-leitura .artigo-imagem,
.modo-leitura .artigo-video,
.modo-leitura .galeria-artigo,
.modo-leitura .barra-lateral,
.modo-leitura .artigo-partilha-final,
.modo-leitura .comentarios,
.modo-leitura .relacionados,
.modo-leitura .rodape,
.modo-leitura .voltar-topo,
.modo-leitura .anuncio {
    display: none !important;
}

.modo-leitura .layout-lateral {
    grid-template-columns: minmax(0, 1fr);
}

.modo-leitura .artigo {
    max-width: 720px;
    margin-inline: auto;
}

.modo-leitura .texto {
    font-size: 1.3rem;
    line-height: 1.8;
}

/* ---------------------------------------------------------------------
   10. Navegação secundária
   --------------------------------------------------------------------- */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.4rem;
    color: var(--linha-forte);
}

.breadcrumbs a {
    color: var(--texto-suave);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--acento-texto);
    text-decoration: underline;
}

.breadcrumbs [aria-current] {
    display: inline-block;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.paginacao ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.paginacao a,
.paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    color: var(--texto);
    font-weight: 500;
    text-decoration: none;
}

.paginacao a:hover {
    border-color: var(--texto);
    background: var(--superficie);
}

.paginacao [aria-current] {
    border-color: var(--texto);
    background: var(--texto);
    color: var(--fundo);
}

.paginacao .reticencias {
    align-self: center;
}

.resultado-contagem {
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   11. Páginas estáticas, erros e arquivo
   --------------------------------------------------------------------- */
.pagina-estatica {
    max-width: var(--largura-texto);
    margin: 0 auto 3rem;
}

/* Com o espaço vertical da Adsterra: texto na coluna principal e barra lateral reduzida */
.layout-institucional {
    margin-top: 0;
}

@media (min-width: 1024px) {
    .layout-institucional > .coluna-principal > .pagina-estatica {
        margin-inline: 0;
    }
}

.pagina-estatica > p,
.pagina-estatica > ul,
.pagina-estatica > ol {
    font-size: 1.05rem;
}

.pagina-estatica h2 {
    margin-top: 2.4rem;
    padding-top: 0.6rem;
    border-top: 2px solid var(--regra);
    font-size: 1.6rem;
}

.pagina-estatica li {
    margin-bottom: 0.5rem;
}

.sumario ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.sumario a {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: 0.88rem;
    text-decoration: none;
}

.sumario a:hover {
    border-color: var(--texto);
    color: var(--texto);
}

.grade-politica {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (min-width: 720px) {
    .grade-politica {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.caixa-politica {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: inset 0 3px 0 var(--primaria);
}

.caixa-politica-fora {
    box-shadow: inset 0 3px 0 var(--cat-mercado);
}

.caixa-politica h3 {
    margin: 0.2rem 0 0.7rem;
    font-size: 1.2rem;
}

.caixa-politica ul {
    margin: 0 0 0.6rem;
    padding-left: 1.1rem;
    font-size: 0.95rem;
}

.caixa-politica p {
    margin: 0.85rem 0 0;
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.5;
}

.pagina-erro {
    padding-block: 2rem;
    text-align: center;
}

.pagina-erro .form-busca {
    margin: 1.5rem auto;
}

.pagina-erro .botao {
    margin: 0.25rem;
}

.pagina-erro .codigo-erro {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding-bottom: 0.1rem;
    border-bottom: 6px solid var(--sinal);
    color: var(--texto);
    font-family: var(--fonte-mono);
    font-size: clamp(3.5rem, 2rem + 8vw, 6.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

.pagina-newsletter .form-newsletter {
    max-width: 480px;
    margin-block: 1.5rem;
}

.arquivo-meses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arquivo-meses li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
}

.arquivo-meses a {
    color: var(--texto);
    font-weight: 600;
    text-decoration: none;
}

.arquivo-meses a:hover {
    text-decoration: underline;
}

.arquivo-meses .contagem {
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
}

/* ---------------------------------------------------------------------
   12. Anúncios (altura reservada para não empurrar o conteúdo)
   --------------------------------------------------------------------- */
.anuncio {
    clear: both;
    margin: 2rem auto;
    text-align: center;
}

.anuncio-rotulo {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--texto-fraco);
    font-family: var(--fonte-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.anuncio ins.adsbygoogle {
    display: block;
    width: 100%;
}

.anuncio-topo {
    margin-top: 0;
}

.anuncio-topo ins,
.anuncio-rodape ins {
    min-height: 100px;
}

.anuncio-lateral {
    margin: 0;
}

.anuncio-lateral ins,
.anuncio-feed ins,
.anuncio-no-texto ins,
.anuncio-fim-artigo ins {
    min-height: 250px;
}

.anuncio-lateral-fixo ins {
    min-height: 600px;
}

.anuncio-multiplex ins {
    min-height: 320px;
}

.lista-noticias > .anuncio {
    margin-block: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linha);
}

/* Blocos que o Google não preencheu não deixam espaço vazio */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.anuncio:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* Adsterra (banners de tamanho fixo com o código oficial direto, até três espaços por página): o
   espaço aparece enquanto o carregador prepara ou executa (data-adsterra no <html>, sem
   relação com escolhas do leitor): "preparando" vem do <head>, antes da pintura, e "ativo"
   do adsterra.js. Sem JavaScript, sem o carregador ("indisponivel"), com falha ou sem formato
   que caiba, não fica bloco vazio. O adsterra.js escolhe o formato que cabe na coluna e
   reserva as dimensões dele (--adsterra-largura e --adsterra-altura; até lá vale a do
   primeiro formato, enviada pelo servidor). O banner fica centrado, sem escala nem corte, e
   pode avançar até 16px sobre cada margem da coluna (a margem do conteúdo no celular),
   nunca além da janela. */
.anuncio-adsterra {
    display: none;
}

/* Só o banner fica fixo, sem faixa de fundo, borda ou preenchimento externo.
   O fechamento flutua imediatamente acima da peça, fora da área do anunciante. */
html[data-adsterra] .anuncio-adsterra.anuncio-adsterra-rodape_fixo {
    display: none;
}
html[data-adsterra="ativo"][data-adsterra-faixa="visivel"] .anuncio-adsterra-rodape_fixo {
    display: block;
    position: fixed;
    z-index: 65;
    inset: auto 0 env(safe-area-inset-bottom, 0px);
    width: min(var(--adsterra-largura, 728px), calc(100% - 20px));
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    --adsterra-altura-maxima: 90;
}
.anuncio-adsterra-rodape_fixo > .anuncio-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.adsterra-faixa-fechar {
    position: absolute;
    bottom: 100%;
    right: 0;
    padding: 2px 10px;
    border: 1px solid #888;
    border-radius: 4px;
    background: #fff;
    color: #151515;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 20px;
}
@media (max-height: 499px) {
    html[data-adsterra="ativo"][data-adsterra-faixa="visivel"] .anuncio-adsterra-rodape_fixo {
        --adsterra-altura-maxima: 50;
    }
}
html[data-adsterra="ativo"][data-adsterra-faixa="visivel"] body {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
html[data-adsterra-faixa="visivel"] .voltar-topo {
    bottom: calc(134px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767px) {
    html[data-adsterra="ativo"][data-adsterra-faixa="visivel"] body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    html[data-adsterra-faixa="visivel"] .voltar-topo {
        bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    }
}

html[data-adsterra="preparando"] .anuncio-adsterra,
html[data-adsterra="ativo"] .anuncio-adsterra {
    display: block;
    /* Ocupa a coluna (inclusive nas listas em grid); o banner fica centrado nela */
    margin-inline: 0;
}

/* Quarto espaço: só ocupa a faixa lateral do título em computador com subgrid.
   Em telas pequenas e navegadores sem esse layout, não aparece nem é solicitado. */
html[data-adsterra] .anuncio-adsterra-topo_artigo {
    display: none;
}

@supports (grid-template-rows: subgrid) {
    @media (min-width: 1024px) {
        html[data-adsterra="preparando"] .layout-artigo > .anuncio-adsterra-topo_artigo,
        html[data-adsterra="ativo"] .layout-artigo > .anuncio-adsterra-topo_artigo {
            display: block;
            grid-column: 2;
            grid-row: 1;
            align-self: start;
            margin: 0 0 1.5rem;
        }
    }
}

html[data-adsterra] .anuncio-adsterra[data-adsterra-estado="falhou"],
html[data-adsterra] .anuncio-adsterra[data-adsterra-estado="sem-espaco"],
html[data-adsterra] .anuncio-adsterra[data-adsterra-estado="oculto"] {
    display: none;
}

.anuncio-adsterra-espaco {
    --adsterra-largura-util: min(var(--adsterra-largura, 300px), 100% + 32px);
    width: var(--adsterra-largura-util);
    height: var(--adsterra-altura, 250px);
    /* Centrado também quando é mais largo do que a coluna (margens negativas simétricas) */
    margin-inline: calc((100% - var(--adsterra-largura-util)) / 2);
}

.anuncio-adsterra-espaco > iframe {
    display: block;
    width: var(--adsterra-largura, 300px);
    /* Nunca encolhido pelas regras gerais de iframes no celular: o formato já cabe */
    max-width: none;
    height: var(--adsterra-altura, 250px);
    border: 0;
}

/* Vertical: abaixo de "Como trabalhamos", até 600px de altura ao lado do conteúdo */
.anuncio-adsterra-lateral {
    --adsterra-altura-maxima: 600;
}

/* Segundo espaço, separado do vertical e integralmente dentro da coluna. */
.anuncio-adsterra-lateral_extra {
    --adsterra-altura-maxima: 600;
}
html[data-adsterra="preparando"] .anuncio-adsterra-lateral_extra,
html[data-adsterra="ativo"] .anuncio-adsterra-lateral_extra {
    margin-block: 2rem;
}

html[data-adsterra="preparando"] .anuncio-adsterra-lateral,
html[data-adsterra="ativo"] .anuncio-adsterra-lateral {
    margin: 0;
}

@media (max-width: 1023px) {
    /* A barra lateral desce para depois do conteúdo: o vertical abre-a (logo depois do
       conteúdo, longe do horizontal inferior) e usa um formato baixo (160x300 ou 300x250) */
    .anuncio-adsterra-lateral {
        --adsterra-altura-maxima: 300;
        order: -1;
    }
    .anuncio-adsterra-lateral_extra {
        --adsterra-altura-maxima: 300;
        order: -1;
    }
}

/* Modo de demonstração (painel → Anúncios) */
.anuncio-marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 1rem;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--superficie-2) 10px 20px);
    color: var(--texto-fraco);
    font-size: 0.85rem;
}

.anuncio-demonstracao.anuncio-topo .anuncio-marcador,
.anuncio-demonstracao.anuncio-rodape .anuncio-marcador {
    max-width: 970px;
    margin-inline: auto;
}

.anuncio-demonstracao.anuncio-lateral .anuncio-marcador,
.anuncio-demonstracao.anuncio-feed .anuncio-marcador,
.anuncio-demonstracao.anuncio-no-texto .anuncio-marcador,
.anuncio-demonstracao.anuncio-fim-artigo .anuncio-marcador {
    min-height: 250px;
}

.anuncio-demonstracao.anuncio-lateral-fixo .anuncio-marcador {
    min-height: 600px;
}

.anuncio-demonstracao.anuncio-multiplex .anuncio-marcador {
    min-height: 320px;
}

/* ---------------------------------------------------------------------
   13. Rodapé e "voltar ao topo"
   --------------------------------------------------------------------- */
.rodape {
    --marca-fundo: #c8f169;
    --marca-traco: #16181d;
    margin-top: 4rem;
    border-top: 4px solid var(--sinal);
    background: var(--rodape-fundo);
    color: var(--rodape-texto);
    font-size: 0.92rem;
}

.rodape .marca,
.rodape .marca:hover {
    color: #fff;
}

.rodape .marca-assinatura {
    color: var(--rodape-fraco);
}

.rodape-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    padding-block: 3rem 2rem;
}

.rodape-marca {
    grid-column: 1 / -1;
}

.rodape-marca p {
    max-width: 44ch;
    margin: 1rem 0;
    color: var(--rodape-fraco);
}

@media (min-width: 900px) {
    .rodape-grade {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .rodape-marca {
        grid-column: auto;
    }
}

.rodape-coluna h2 {
    margin: 0 0 0.9rem;
    color: #fff;
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rodape-coluna ul,
.rodape-redes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape-coluna li {
    margin-bottom: 0.5rem;
}

.rodape a,
.rodape .botao-link {
    color: var(--rodape-texto);
    text-decoration: none;
}

.rodape a:hover,
.rodape .botao-link:hover {
    color: #fff;
    text-decoration: underline;
}

.rodape :focus-visible {
    outline-color: #c8f169;
}

.rodape-redes {
    display: flex;
    gap: 0.4rem;
}

.rodape-redes .botao-icone {
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--rodape-texto);
}

.rodape-redes .botao-icone:hover {
    background: rgba(255, 255, 255, 0.08);
}

.rodape-base {
    display: grid;
    gap: 0.3rem;
    padding-block: 1.1rem 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rodape-fraco);
    font-size: 0.8rem;
}

.rodape-base p {
    margin: 0;
}

.rodape-base a {
    color: var(--rodape-texto);
    text-decoration: underline;
}

.voltar-topo {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 50%;
    background: var(--texto);
    color: var(--fundo);
    box-shadow: var(--sombra);
    cursor: pointer;
    transition: background-color var(--transicao);
}

.voltar-topo:hover {
    background: var(--acento);
    color: var(--no-acento);
}

.anuncio-leitor {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 95;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: var(--texto);
    color: var(--fundo);
    font-size: 0.88rem;
    font-weight: 600;
    transform: translateX(-50%);
}

/* ---------------------------------------------------------------------
   14. Preferências de movimento e impressão
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    .topo-faixa,
    .menu,
    .busca-topo,
    .topo-acoes,
    .barra-lateral,
    .artigo-ferramentas,
    .artigo-partilha-final,
    .comentarios,
    .relacionados,
    .rodape,
    .voltar-topo,
    .anuncio,
    .form-newsletter {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .layout-lateral {
        display: block;
    }

    .texto a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* Referências para conferência, notas de correção e revisão registrada (governança editorial) */
.referencias-artigo {
    margin: 2.25rem 0 1.5rem;
    padding: 1.1rem 1.25rem 1rem;
    border: 1px solid var(--linha);
    border-top: 2px solid var(--regra);
    border-radius: 0 0 var(--raio) var(--raio);
    background: var(--superficie);
    font-size: 0.92rem;
}

.referencias-artigo h2 {
    margin: 0 0 0.7rem;
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.referencias-artigo ul {
    margin: 0 0 0.6rem;
    padding-left: 1.15rem;
}

.referencias-artigo li {
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.referencia-tipo,
.referencia-sustenta,
.referencias-nota {
    color: var(--texto-suave);
}

.referencias-nota {
    margin: 0;
    font-size: 0.85rem;
}

.notas-correcao {
    margin-bottom: 1.25rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: inset 3px 0 0 var(--rumor);
    font-size: 0.95rem;
}

.notas-correcao p {
    margin: 0 0 0.4rem;
}

.notas-correcao p:last-child {
    margin-bottom: 0;
}

.autor-revisao {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.perfil-editorial h3 {
    margin-bottom: 0.2rem;
}

/* A caixa informa carregamento automático; personalização em diálogo nativo. */
.publicidade-aviso, .publicidade-dialogo {
    background: var(--cor-fundo, #fff); color: var(--cor-texto, #222);
    border: 1px solid #888; border-radius: 8px; padding: 16px;
    box-shadow: 0 4px 20px #0003; font-size: 14px;
}
.publicidade-aviso { position: fixed; bottom: 12px; left: 12px; width: min(390px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; z-index: 80; box-sizing: border-box; }
.publicidade-aviso[hidden] { display: none; }
.publicidade-dialogo { max-width: min(520px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; box-sizing: border-box; }
.publicidade-dialogo::backdrop { background: #0008; }
.publicidade-aviso button, .publicidade-dialogo button { margin: 5px 8px 0 0; padding: 8px 10px; cursor: pointer; }
.publicidade-reabrir { position: static; padding: 0; font: inherit; color: inherit; text-align: left; }