/*
Theme Name: Mentira
Theme URI: https://mentira.com.br
Author: Mentira.com.br
Description: Tema do portal de sátira jornalística Mentira — notícias que competem com a realidade do brasileiro.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: mentira
*/

/* =====================================================
   PORTAL MENTIRA
   Identidade visual e tipografia
   ===================================================== */

/* -----------------------------------------------------
   1. FONTES E VARIÁVEIS
   ----------------------------------------------------- */

:root {
    --font-titulos: 'Roboto', 'Roboto Fallback', sans-serif;
    --font-textos: 'Inter', 'Inter Fallback', sans-serif;
    --font-editorial: 'Merriweather', 'Merriweather Fallback', serif;

    --cor-principal: #e3131b;
    --cor-principal-escura: #b70d13;
    --cor-texto: #111111;
    --cor-secundaria: #555a60;
    --cor-suave: #8a8f96;
    --cor-borda: #e7e7e9;
    --cor-fundo: #ffffff;
    /*--cor-fundo-suave-hero: #f9f9fa;*/
    --cor-fundo-suave-hero: #f6f6f7;
    --cor-fundo-suave: #f5f5f6;
    --cor-rodape: #111111;

    --raio: 6px;
    --container: 1300px;
}

/* -----------------------------------------------------
   2. CONFIGURAÇÕES GERAIS
   ----------------------------------------------------- */

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--font-textos);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

body.gaveta-aberta {
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--cor-principal);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulos);
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 0;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.pular-link:focus {
    clip: auto;
    width: auto;
    height: auto;
    z-index: 200;
    top: 8px;
    left: 8px;
    background: #fff;
    padding: 8px 14px;
    border-radius: var(--raio);
}

.icone {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Botões */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--raio);
    font-family: var(--font-textos);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-vermelho {
    background: var(--cor-principal);
    color: #ffffff;
}

.btn-vermelho:hover {
    background: var(--cor-principal-escura);
    color: #ffffff;
}

.btn-branco {
    background: #ffffff;
    color: var(--cor-principal);
}

.btn-branco:hover {
    background: #ffecec;
    color: var(--cor-principal-escura);
}

.btn-bloco {
    width: 100%;
}

.btn-icone {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cor-fundo-suave);
    color: var(--cor-texto);
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-icone:hover {
    background: #e9e9eb;
}

/* -----------------------------------------------------
   3. HEADER / CABEÇALHO
   ----------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* A borda só aparece depois que a página rola (classe aplicada pelo main.js) */
.site-header.rolou {
    border-bottom-color: var(--cor-borda);
}

.admin-bar .site-header {
    top: 32px;
}

.header-inner {
    /* O jornalzinho em cima da logo puxa o centro dela para cima. Menu, botões e links descem
       --desvio-logo para ficarem centralizados na palavra MENTIRA (ela ocupa de 54,6% a 97,1%
       da altura da logo; centro em 75,85%; diferença para o meio = 25,85% de altura = 9,67% da largura).
       Para ajustar o alinhamento, mude o 0.0967. */
    --logo-largura: 150px;
    --desvio-logo: calc(var(--logo-largura) * 0.0967);
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 6px;
    padding-bottom: 12px; /* respiro entre o cabeçalho e o conteúdo */
}

.header-logo .btn-menu,
.header-inner .header-acoes,
.header-inner .nav-principal {
    position: relative;
    top: var(--desvio-logo);
}

/* Logo */

.logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    color: var(--cor-texto);
}

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

.logo-img {
    display: block;
    width: var(--logo-largura, 150px);
    height: auto;
}

/* Slogan em texto embaixo do logo (menu lateral e rodapé), no estilo da marca:
   centralizado, em duas linhas da largura do logo, Montserrat em negrito.
   O tamanho da letra acompanha a largura do logo (--logo-largura). */
.logo--com-slogan {
    align-items: center;
    gap: calc(var(--logo-largura, 150px) * 0.04);
}

.logo-slogan {
    display: block;
    width: var(--logo-largura, 150px);
    color: var(--cor-texto);
    font-family: 'Montserrat', 'Montserrat Fallback', var(--font-titulos);
    font-size: calc(var(--logo-largura, 150px) * 0.064);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: center;
    text-wrap: balance;
}

.site-footer .logo--com-slogan {
    --logo-largura: 240px;
}

.site-footer .logo-slogan {
    color: #ffffff;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-menu {
    border-radius: var(--raio);
}

.header-logo .custom-logo {
    max-height: 52px;
    width: auto;
}

/* Menu */

.nav-principal {
    flex: 1;
    min-width: 0;
}

.nav-principal ul {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-principal a {
    position: relative;
    display: block;
    padding: 18px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #222222;
    white-space: nowrap;
}

.nav-principal a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px; /* o menu desce --desvio-logo; o sublinhado sobe para não encostar no conteúdo */
    height: 2px;
    background: var(--cor-principal);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.nav-principal a:hover::after,
.nav-principal .current-menu-item > a::after {
    transform: scaleX(1);
}

.nav-principal .current-menu-item > a {
    font-weight: 700;
    color: var(--cor-principal);
}

/* Ações */

.header-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.btn-topo-todas {
    padding: 11px 22px;
    border-radius: 999px;
}

/* Formulário de busca padrão (get_search_form) */

.search-form {
    display: flex;
    gap: 8px;
}

.search-form label {
    flex: 1;
}

.search-field,
.newsletter-form input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 14px;
}

.search-submit {
    padding: 10px 18px;
    border: 0;
    border-radius: var(--raio);
    background: var(--cor-principal);
    color: #ffffff;
}

/* Menu lateral */

.menu-gaveta {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.menu-gaveta-fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.menu-gaveta-painel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(280px, 86vw);
    padding: 20px 16px 0;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    animation: gaveta-entrar 0.22s ease-out;
}

@keyframes gaveta-entrar {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .menu-gaveta-painel {
        animation: none;
    }
}

/* Logo centralizada; botão de fechar na borda de dentro do painel */
.menu-gaveta-topo {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
}

.menu-gaveta-topo .logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.menu-gaveta-topo .logo {
    --logo-largura: 190px;
}

.btn-gaveta-fechar {
    grid-column: 3;
    grid-row: 1;
    width: 32px;
    height: 32px;
    border: 1px solid var(--cor-borda);
    background: #ffffff;
    font-size: 16px;
}

.btn-aleatoria {
    gap: 8px;
    padding: 11px 14px;
    font-size: 14px;
}

.btn-aleatoria .icone {
    font-size: 17px;
}

.menu-gaveta-lista {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-gaveta-lista a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--raio);
    font-size: 14px;
    color: var(--cor-texto);
    transition: background 0.2s, color 0.2s;
}

.menu-gaveta-lista a:hover {
    background: var(--cor-fundo-suave);
    color: var(--cor-texto);
}

.menu-gaveta-lista .icone {
    font-size: 20px;
}

.menu-gaveta-lista .current-menu-item > a {
    background: #fde8e9;
    color: var(--cor-principal);
    font-weight: 600;
}

.menu-gaveta-secundario {
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}

/* Mascote opcional (assets/img/mascote-menu.png), encostado no rodapé do menu */
.menu-gaveta-mascote {
    width: 170px;
    margin-top: auto;
}

.menu-gaveta-secundario:last-child {
    padding-bottom: 24px;
}

/* Lado do menu lateral (Personalizar > "Mentira: opções"). Padrão: esquerda.
   .gaveta-direita = sempre à direita; .gaveta-direita-mobile = à direita só até 1024 px */

/* À direita, redondo como o botão de busca ao lado */
.btn-menu--direita {
    display: none;
    border-radius: 50%;
}

@keyframes gaveta-entrar-direita {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.gaveta-direita .btn-menu--esquerda {
    display: none;
}

.gaveta-direita .btn-menu--direita {
    display: inline-grid;
}

.gaveta-direita .menu-gaveta-painel {
    left: auto;
    right: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    animation-name: gaveta-entrar-direita;
}

.gaveta-direita .btn-gaveta-fechar {
    grid-column: 1;
}

.gaveta-direita .btn-gaveta-fechar .icone {
    transform: scaleX(-1);
}

@media (max-width: 1024px) {

    .gaveta-direita-mobile .btn-menu--esquerda {
        display: none;
    }

    .gaveta-direita-mobile .btn-menu--direita {
        display: inline-grid;
    }

    .gaveta-direita-mobile .menu-gaveta-painel {
        left: auto;
        right: 0;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
        animation-name: gaveta-entrar-direita;
    }

    .gaveta-direita-mobile .btn-gaveta-fechar {
        grid-column: 1;
    }

    .gaveta-direita-mobile .btn-gaveta-fechar .icone {
        transform: scaleX(-1);
    }
}

/* -----------------------------------------------------
   4. ESTRUTURA DA HOME
   ----------------------------------------------------- */

/* overflow-x: clip: o que "sai" de um bloco (repórter, pessoa do aviso) nunca cria rolagem lateral */
.site-main {
    padding: 4px 0 40px;
    overflow-x: clip;
}

.home-bloco {
    margin-bottom: 28px;
}

.grade {
    display: grid;
    gap: 14px;
}

.grade-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grade-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grade-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lista {
    display: flex;
    flex-direction: column;
}

/* Títulos de seção */

.secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.secao-titulo {
    margin: 0;
    padding-left: 10px;
    border-left: 4px solid var(--cor-principal);
    font-size: 20px;
    line-height: 1.1;
}

.secao-titulo--simples {
    padding-left: 0;
    border-left: 0;
}

.secao-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cor-principal);
    white-space: nowrap;
}

.secao-link:hover {
    color: var(--cor-principal-escura);
}

/* Etiquetas de categoria */

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--cor-principal);
    color: #ffffff;
    font-family: var(--font-textos);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* "AD" amarelo grudado na etiqueta da categoria (posts com a tag "ads") */
.badge-ad {
    display: inline-block;
    margin: -4px -8px -4px 7px;
    padding: 4px 6px;
    border-radius: 0 3px 3px 0;
    background: #f2b705;
    color: #3d2c00;
}

.badge--suave .badge-ad {
    margin-right: -6px;
}

.badge--base {
    top: auto;
    bottom: -3px;
    left: 10px;
    border-radius: 3px 3px;
}

.badge--bottom {
    top: auto;
    bottom: 10px;
    left: 10px;
    border-radius: 3px 3px;
}

.badge--estatico {
    position: static;
    align-self: flex-start;
    margin-bottom: 8px;
}

.chapeu {
    font-size: 13px;
    font-weight: 800;
    color: var(--cor-principal);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Data, compartilhamentos */

.metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.metas--separadas {
    justify-content: space-between;
}

.meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--cor-suave);
}

/* Publicidade */

.anuncio-rotulo {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    line-height: 1.2;
    color: #9a9ea4;
}

.anuncio img {
    width: 100%;
    border-radius: var(--raio);
}

.anuncio-topo {
    margin-bottom: 20px;
}

/* -----------------------------------------------------
   5. CARDS E LISTAS
   ----------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
}

.card-midia {
    position: relative;
    display: block;
}

.card-midia img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.card-corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
}

.card-corpo .metas {
    margin-top: auto;
}

.card-titulo {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
}

.card .card-resumo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-titulo--grande {
    font-size: 19px;
}

.card-resumo {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--cor-secundaria);
}

.card--compacto {
    border: 0;
}

.card--compacto .card-corpo {
    padding: 8px 0 0;
}

.card--compacto .card-midia img {
    aspect-ratio: 8 / 3;
    border-radius: var(--raio);
}

.card--compacto .card-titulo {
    font-size: 13.5px;
}

/* Item de lista com miniatura */

.item-lista {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--cor-borda);
}

.item-lista:last-child,
.ultimas .item-lista {
    border-bottom: 0;
}

.item-lista-midia img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 4px;
}

.item-lista-titulo {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* -----------------------------------------------------
   6. TOPO: MANCHETE + ÚLTIMAS MENTIRAS
   ----------------------------------------------------- */

.home-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

.topo-principal,
.topo-lateral {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Manchete */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
    gap: 0;
}

.hero-midia {
    position: relative;
    display: block;
}

.hero-midia img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raio) 0 0 var(--raio);
}

.hero-texto {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border-radius: 0 var(--raio) var(--raio) 0;
    background: var(--cor-fundo-suave-hero);
}

.hero-titulo {
    margin: 6px 0 12px;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

h1.hero-titulo {
    font-weight: 800;
}


.hero-resumo {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--cor-secundaria);
}

.hero-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

/* Aviso sobre notícias falsas (no lugar da publicidade abaixo da manchete).
   --altura: altura do bloco; a imagem da pessoa escala a partir dela para o corte da camiseta
   ficar na borda de baixo e a cabeça sair por cima. */

.aviso-checagem {
    --altura: 104px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--altura);
    margin: 4px 0 12px;
    padding: 10px calc(var(--altura) * 1.9) 10px 20px;
    border-radius: 12px;
    background: #131b24;
    color: #ffffff;
    isolation: isolate;
}

/* Listras vermelhas nos cantos (esquerdo em cima, direito atrás da pessoa) */
.aviso-checagem::before,
.aviso-checagem::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 190px;
    background: repeating-linear-gradient(-55deg, rgba(227, 19, 27, 0.9) 0 7px, transparent 7px 20px);
    pointer-events: none;
}

.aviso-checagem::before {
    left: 0;
    border-radius: 12px 0 0 12px;
    -webkit-mask-image: linear-gradient(135deg, #000 0, rgba(0, 0, 0, 0.35) 22%, transparent 42%);
    mask-image: linear-gradient(135deg, #000 0, rgba(0, 0, 0, 0.35) 22%, transparent 42%);
}

.aviso-checagem::after {
    right: 0;
    width: 300px;
    border-radius: 0 12px 12px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.25) 30%, #000 75%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.25) 30%, #000 75%);
}

.aviso-icone {
    flex: none;
    width: 50px;
    height: 50px;
}

.aviso-chamada {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-right: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.aviso-selo {
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.aviso-titulo {
    max-width: 230px;
    margin: 0;
    font-family: var(--font-titulos);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.aviso-titulo em {
    font-style: normal;
    color: #ff2a32;
}

/* Texto em cima e botão logo abaixo (lado a lado o texto ficava espremido) */
.aviso-acao {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.aviso-texto {
    max-width: 300px;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}

.aviso-botao {
    position: relative;
    z-index: 2;
    flex: none;
    padding: 10px 16px;
    font-size: 13.5px;
}

/* A pessoa: o corte da camiseta coincide com a borda de baixo (42 de 516 px abaixo dela, na imagem) */
.aviso-pessoa {
    position: absolute;
    right: calc(var(--altura) * -0.03);
    bottom: calc(var(--altura) * -0.1135);
    z-index: 1;
    width: auto;
    max-width: none;
    height: calc(var(--altura) * 1.3946);
    pointer-events: none;
}

@media (max-width: 1180px) {

    /* Coluna mais estreita: título em cima; texto e botão lado a lado embaixo */
    .aviso-checagem {
        --altura: 118px;
        flex-wrap: wrap;
        align-content: center;
        gap: 12px 16px;
        padding-left: 22px;
    }

    .aviso-icone {
        display: none;
    }

    .aviso-chamada {
        flex: 1 1 100%;
        min-width: 0;
        padding-right: 0;
        border-right: 0;
    }

    .aviso-titulo {
        max-width: none;
        font-size: 19px;
    }

    /* Texto e botão lado a lado quando cabem; senão o botão desce para baixo do texto
       (tablet: a coluna fica estreita e o texto era espremido ao lado do botão) */
    .aviso-acao {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
    }

    .aviso-texto {
        flex: 1 1 200px;
        max-width: 260px;
        font-size: 13px;
    }
}

@media (max-width: 782px) {

    /* Celular: título na largura toda; texto e botão numa coluna à esquerda;
       a pessoa, menor, no canto de baixo à direita (a cabeça sai por cima da coluna do texto) */
    .aviso-checagem {
        --altura: 100px;
        gap: 10px;
        margin-top: 24px;
        padding: 16px;
    }

    .aviso-titulo {
        font-size: 21px;
    }

    .aviso-acao {
        flex: 0 1 185px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .aviso-texto {
        flex: none; /* em coluna, o "flex: 1 1 200px" do tablet virava 200px de altura */
        max-width: none;
        font-size: 13px;
    }

    .aviso-botao {
        padding: 10px 12px;
        font-size: 13px;
    }

    .aviso-pessoa {
        right: -6px;
    }

    .aviso-checagem::after {
        width: 150px;
    }
}

/* Últimas Mentiras */

/* Botão no fim de "Últimas Mentiras": a busca sem termo, das mais recentes */
.ultimas-ver-todas {
    margin-top: 12px;
    padding: 10px 16px;
}

.caixa {
    padding: 14px 16px 16px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
}

.caixa .secao-cabecalho {
    margin-bottom: 4px;
}

.caixa-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 18px;
}

.caixa-titulo .icone {
    font-size: 1.25em;
    color: var(--cor-principal);
}

/* -----------------------------------------------------
   7. CATEGORIAS, ENVIE SUA NOTÍCIA E NEWSLETTER
   ----------------------------------------------------- */

.home-engaja {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* Os cards de categoria ficam sempre embaixo, alinhados com a base dos outros dois blocos */
.categorias {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 2 linhas de 4 colunas iguais, ícone ao lado do nome */
.categorias-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.categoria-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 44px;
    padding: 7px 6px 7px 12px;
    border-radius: 8px;
    background: var(--cor-fundo-suave);
    color: var(--cor-texto);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: background 0.2s, color 0.2s;
}

.categoria-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.categoria-item:hover {
    background: #ececee;
    color: var(--cor-principal);
}

.categoria-item .icone {
    flex: none;
    font-size: 22px;
}

/* Card vermelho: mesma formatação da newsletter ao lado (ícone, título e texto; botão embaixo) */
.cta-absurda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--raio);
    background: var(--cor-principal);
    color: #ffffff;
}

.cta-topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.cta-icone {
    font-size: 30px;
}

.cta-titulo {
    margin: 0 0 2px;
    font-size: 14px;
    color: #ffffff;
}

.cta-topo p {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.92;
}

.newsletter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--raio);
    background: var(--cor-fundo-suave);
}

.newsletter-topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.newsletter-icone {
    font-size: 30px;
}

.newsletter-titulo {
    margin: 0 0 2px;
    font-size: 14px;
}

.newsletter-topo p {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--cor-secundaria);
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form input {
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
}

/* -----------------------------------------------------
   8. MAIS LIDAS DA SEMANA
   ----------------------------------------------------- */

.ranking .card-midia img {
    aspect-ratio: 3 / 1;
}

.ranking .card-titulo {
    font-size: 16px;
}

.ranking-num {
    position: absolute;
    top: 8px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: var(--cor-principal);
    color: #ffffff;
    font-family: var(--font-titulos);
    font-size: 17px;
    font-weight: 800;
}

/* -----------------------------------------------------
   9. BRASIL, DO JEITO QUE NÃO É
   ----------------------------------------------------- */

.home-com-lateral {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

/* Fundo cinza da seção Brasil: vai até a borda esquerda da tela e termina um pouco depois da
   coluna, antes do quadro lateral (o .site-main corta o excesso com overflow-x: clip).
   Sem quadro lateral (brasil--larga) e no celular, vai de uma borda à outra. */
.brasil {
    position: relative;
    isolation: isolate;
}

.brasil::before {
    content: "";
    position: absolute;
    top: -12px;
    right: -14px;
    bottom: -12px;
    left: -100vw;
    z-index: -1;
    border-radius: 0 14px 14px 0;
    background: var(--cor-fundo-suave);
    pointer-events: none;
}

.brasil--larga::before {
    right: -100vw;
    border-radius: 0;
}

/* Espaço para o fundo cinza (ele passa 12px acima e abaixo da seção) */
.home-bloco:has(> .brasil) {
    margin-top: 36px;
    margin-bottom: 40px;
}

/* Quadro "Apoie o jornalismo" ao lado de "Brasil" (coluna um pouco mais larga que a da publicidade) */
.home-com-apoio {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: center;
}

.apoio {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 188px;
    margin: 0;
    padding: 16px 0 16px 22px;
    border-radius: 16px;
    background: #131b24;
    color: #ffffff;
    isolation: isolate;
}

/* Listras vermelhas: canto de cima à esquerda e embaixo, no meio */
.apoio::before,
.apoio::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: repeating-linear-gradient(-50deg, rgba(227, 19, 27, 0.92) 0 6px, transparent 6px 18px);
    pointer-events: none;
}

.apoio::before {
    top: 0;
    left: 0;
    width: 120px;
    height: 110px;
    border-top-left-radius: 16px;
    -webkit-mask-image: linear-gradient(135deg, #000 0, rgba(0, 0, 0, 0.5) 30%, transparent 55%);
    mask-image: linear-gradient(135deg, #000 0, rgba(0, 0, 0, 0.5) 30%, transparent 55%);
}

.apoio::after {
    bottom: 0;
    left: 18%;
    width: 200px;
    height: 90px;
    /* some aos poucos para cima e para os lados (sem borda reta) */
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}

.apoio-texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 47%;
}

.apoio-titulo {
    margin: 0;
    font-family: var(--font-titulos);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.apoio-titulo em {
    font-style: normal;
    color: #ff2a32;
}

.apoio-descricao {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
}

.apoio-botao {
    margin-top: 2px;
    padding: 9px 14px;
    font-size: 12.5px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(227, 19, 27, 0.35);
}

@media (max-width: 1180px) {

    /* Tablet e celular: o quadro ocupa a largura toda, abaixo de "Brasil" */
    .home-com-lateral.home-com-apoio {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sem coluna ao lado: o fundo cinza do Brasil vai de uma borda à outra */
    .home-com-apoio .brasil::before {
        right: -100vw;
        border-radius: 0;
    }

    .apoio {
        min-height: 172px;
        margin: 52px 0 0;
        padding-left: 18px;
    }

    .apoio-texto {
        width: 50%;
    }

    .apoio-titulo {
        font-size: 21px;
    }

    .apoio-descricao {
        font-size: 12px;
    }

    .apoio .apoio-reporter {
        right: -10px;
        height: 210px;
    }

}

/* O repórter: corte reto do corpo na borda de baixo (81 de 1192 px abaixo dela, na imagem);
   passa por cima e pela direita do quadro */
.apoio-reporter {
    position: absolute;
    right: -14px;
    bottom: 0;
    z-index: 1;
    width: auto;
    max-width: none;
    height: 238px;
    transform: translateY(6.8%);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
    pointer-events: none;
}


/* O card grande estica até a altura da lista ao lado: a foto cresce junto e a data do card
   fica alinhada com o fim da lista, formando um bloco retangular */
.brasil-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

/* Sem matérias nos filtros do Brasil: o card grande ocupa a largura toda */
.brasil--sem-lista .brasil-conteudo {
    grid-template-columns: minmax(0, 1fr);
}

.brasil-destaque {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.brasil-midia {
    position: relative;
    display: block;
    /* A foto acompanha a altura do texto ao lado (base alinhada com a data);
       15:8 é a altura mínima. A imagem preenche o quadro e é cortada, sem distorcer. */
    align-self: stretch;
    width: 100%; /* sem isso a proporção alarga a foto por cima do texto */
    aspect-ratio: 15 / 8;
}

.brasil-midia img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--raio);
}

.brasil-texto {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brasil-texto .metas {
    margin-top: auto;
}

/* Linha leve separando o card grande da lista */
.brasil-lista {
    padding-left: 18px;
    border-left: 1px solid var(--cor-borda);
}

.brasil-lista .item-lista:first-child {
    padding-top: 0;
}

/* Leituras no canto direito dos itens menores */
.brasil-lista .meta-engajamento {
    margin-left: auto;
}

/* Sem a publicidade ao lado: largura toda e a lista em 2 colunas de 3 */
.brasil--larga .brasil-conteudo {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
}

.brasil--larga .brasil-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 24px;
}

.brasil--larga .brasil-lista .item-lista:nth-child(3) {
    border-bottom: 0;
}

.brasil--larga .brasil-lista .item-lista:nth-child(4) {
    padding-top: 0;
}

/* -----------------------------------------------------
   10. CIÊNCIA + ESPORTES
   ----------------------------------------------------- */

/* Mundo: a mais recente grande no centro, itens de lista dos dois lados */
.mundo-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "esquerda centro direita";
    gap: 24px;
    align-items: stretch;
}

.mundo-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A data fica sempre no pé do card, alinhada com a base das listas ao lado */
.mundo-card .metas {
    margin-top: auto;
}

.mundo-lista {
    align-self: start;
}

/* Notícias pequenas: a data no pé, alinhada com a base da miniatura (mesmo com título de 1 linha) */
.mundo-lista .item-lista {
    align-items: stretch;
}

.mundo-lista .item-lista-corpo {
    display: flex;
    flex-direction: column;
}

.mundo-lista .item-lista-corpo .metas {
    margin-top: auto;
}

.mundo-card--centro {
    grid-area: centro;
}

.mundo-lista--esquerda {
    grid-area: esquerda;
}

.mundo-lista--direita {
    grid-area: direita;
}

.mundo-lista .item-lista:first-child {
    padding-top: 0;
}

/* A primeira notícia de cada lado vira card (formato dos de Esportes) no desktop;
   a versão em item de lista só aparece no celular */
.mundo-lado-item {
    display: none;
}

.mundo-lado-card {
    margin-bottom: 4px;
}

.mundo-lado-card + .mundo-lado-item + .item-lista {
    border-top: 1px solid var(--cor-borda);
}

.mundo-midia {
    position: relative;
    display: block;
    margin-bottom: 6px;
}

.mundo-midia img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--raio);
}

.mundo-card--centro .mundo-midia img {
    aspect-ratio: 7 / 3;
}

.mundo-titulo {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.mundo-card--centro .mundo-titulo {
    font-size: 21px;
}

/* Resumo inteiro; corta em 3 linhas só se não couber */
.mundo-resumo {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--cor-secundaria);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Ciência | Tecnologia | Variedades: uma coluna com borda por editoria.
   Sempre 3 colunas de largura: se uma editoria não tiver matérias, sobra o espaço dela,
   mas as outras mantêm o tamanho do layout. */
.home-colunas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.coluna-editoria {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 6px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
}

.coluna-editoria .secao-cabecalho {
    align-items: center;
}

.coluna-editoria .secao-titulo {
    font-size: 17px;
}

.coluna-editoria .secao-link {
    font-size: 11.5px;
}

.coluna-destaque {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cor-borda);
}

.coluna-midia {
    display: block;
    margin-bottom: 4px;
}

.coluna-midia img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--raio);
}

.coluna-titulo {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
}

/* Resumo inteiro; corta em 3 linhas só se não couber */
.coluna-resumo {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--cor-secundaria);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.coluna-lista .item-lista {
    grid-template-columns: 72px minmax(0, 1fr);
}

/* Esportes: 4 colunas iguais. "Esportes improváveis" ocupa 3 (um card em cada, via subgrid)
   e "Futebol" ocupa a última, com o fundo suave do Brasil saindo pela direita.
   Todos os cards têm a mesma altura e as datas ficam no pé. */
.esportes-conteudo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    align-items: stretch;
}

.esportes-geral {
    display: grid;
    grid-column: 1 / span 3;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
}

.esportes-geral .secao-cabecalho {
    grid-column: 1 / -1;
}

/* Os cards entram direto no subgrid (uma coluna cada) */
.esportes-geral .esportes-cards {
    display: contents;
}

.esportes-futebol {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    grid-column: 4;
}

.esportes-futebol .card {
    flex: 1;
}

/* Só o Futebol (sem outros esportes): ele ocupa a linha toda */
.esportes-conteudo--so-futebol {
    grid-template-columns: minmax(0, 1fr);
}

.esportes-conteudo--so-futebol .esportes-futebol {
    grid-column: 1;
}

/* Fundo suave do Brasil, espelhado: envolve o título e o card do Futebol e sai pela
   borda direita da tela (o .site-main corta o excesso com overflow-x: clip) */
.esportes-futebol::before {
    content: "";
    position: absolute;
    top: -12px;
    right: -100vw;
    bottom: -12px;
    left: -14px;
    z-index: -1;
    border-radius: 14px 0 0 14px;
    background: var(--cor-fundo-suave);
    pointer-events: none;
}

.esportes-conteudo--so-futebol .esportes-futebol::before {
    left: -100vw;
    border-radius: 0;
}

/* Espaço para o fundo do Futebol (ele passa 12px acima e abaixo da coluna), como no Brasil */
.home-bloco.esportes {
    margin-top: 36px;
    margin-bottom: 40px;
}

/* Card do Futebol sem o fundo branco, direto sobre o cinza */
.esportes-futebol .card {
    background: transparent;
}

/* -----------------------------------------------------
   11. CITAÇÕES
   ----------------------------------------------------- */

/* Citações (página inicial e página da editoria): quadros lado a lado, no visual do bloco
   de citação das matérias (mentira_citacao_markup), maiores. Sem link: não há página do post. */
.citacoes-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Página da editoria Citações: uma citação embaixo da outra (na página inicial seguem 2 lado a lado) */
.categoria-citacoes.citacoes-grade {
    grid-template-columns: minmax(0, 1fr);
}

/* Âncora #citacao-ID: o link de uma citação leva direto ao quadro dela, destacado */
.citacoes-item {
    position: relative;
    scroll-margin-top: 90px;
}

/* Botão só de quem edita: gera o card da citação para o Instagram (assets/js/card-instagram.js) */
.citacao-card-ig {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px dashed var(--cor-principal);
    border-radius: 50%;
    background: #ffffff;
    font-size: 17px;
    color: var(--cor-principal);
    cursor: pointer;
}

.citacao-card-ig:hover {
    background: #fde8e9;
}

.citacao-card-ig.gerando {
    opacity: 0.5;
    cursor: progress;
}

/* "Ver no Instagram": aparece no canto de baixo do quadro quando a citação foi postada
   (link salvo pela janela do card ou no campo "Postagem no Instagram" da citação) */
.citacao-instagram {
    position: absolute;
    right: 18px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 4px;
    border: 1px solid #f3c6c8;
    border-radius: 999px;
    background: #ffffff;
    color: var(--cor-texto);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s;
}

.citacao-instagram:hover {
    color: var(--cor-texto);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 36, 159, 0.2);
}

.citacao-instagram-icone {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    color: #ffffff;
}

.citacao-instagram-icone .icone {
    width: 15px;
    height: 15px;
}

/* Espaço para o botão não ficar por cima do autor */
.citacoes-item:has(.citacao-instagram) .post-citacao figcaption {
    padding-right: 150px;
}

@media (max-width: 600px) {
    .citacao-instagram {
        padding: 4px;
        font-size: 0; /* no celular, só o ícone */
    }

    .citacao-instagram-icone {
        width: 30px;
        height: 30px;
    }

    .citacoes-item:has(.citacao-instagram) .post-citacao figcaption {
        padding-right: 44px;
    }
}

.citacoes-item:target .post-citacao {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px rgba(227, 19, 27, 0.15);
}

.citacoes .post-citacao {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 20px 24px;
    border: 1.5px solid #f3a5a8;
    border-radius: var(--raio);
    background: #fff5f5;
    transition: border-color 0.2s;
}

.citacoes .post-citacao blockquote {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-textos);
    font-style: italic;
}

.citacoes .post-citacao blockquote p {
    margin: 0;
    font-size: 19px;
    font-weight: 300;
    line-height: 1.25;
    color: var(--cor-texto);
}

/* Autor e cargo no pé do quadro */
.citacoes .post-citacao figcaption {
    margin-top: auto;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--cor-suave);
}

.anuncio-rodape {
    margin-top: 8px;
}

/* -----------------------------------------------------
   12. RODAPÉ
   ----------------------------------------------------- */

.site-footer {
    padding: 36px 0 20px;
    background: var(--cor-rodape);
    color: #cfcfd2;
    font-size: 12.5px;
}

.rodape-grid {
    display: grid;
    grid-template-columns: 1.7fr 1.3fr 1fr 1fr 1fr 1fr;
    gap: 24px;
}

.site-footer .logo,
.site-footer .logo:hover {
    color: #ffffff;
}

.site-footer .logo-img {
    width: var(--logo-largura, 190px);
}

.rodape-titulo {
    margin: 0 0 8px;
    font-size: 13px;
    color: #ffffff;
    letter-spacing: 0;
}

.rodape-coluna .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.rodape-secoes .menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.site-footer a:hover {
    color: #ffffff;
}

.redes {
    display: flex;
    gap: 14px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: 22px;
    color: #ffffff;
}

.rodape-base {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #2a2a2d;
    font-size: 11px;
    color: #9a9aa0;
}

.rodape-base p {
    margin: 0;
}

/* -----------------------------------------------------
   13. PÁGINA DO POST (MATÉRIA)
   ----------------------------------------------------- */

.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
    padding-top: 10px;
}

.post-principal,
.post-lateral {
    min-width: 0;
}

/* Aviso de sátira (ou de publicidade) dentro da grade: linha inteira, embaixo das duas colunas */
.post-layout > .aviso-satira {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* Breadcrumb */

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 12.5px;
    color: var(--cor-secundaria);
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb .icone {
    color: var(--cor-suave);
}

/* Cabeçalho da matéria */

.badge--post {
    padding: 5px 9px;
    font-size: 13px;
}

/* Categoria e, em posts com a tag "ads", o selo amarelo "Publicidade" lado a lado */
.post-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.post-selos .badge--estatico {
    margin-bottom: 0;
}

.badge--publicidade {
    background: #f2b705;
    color: #3d2c00;
}

.post-titulo {
    margin: 4px 0 10px;
    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.post-subtitulo {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.25;
    color: var(--cor-secundaria);
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 14px;
}

.post-meta .meta {
    font-size: 12.5px;
}

.post-autor {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--cor-secundaria);
}

.post-autor strong {
    color: var(--cor-texto);
}

.post-autor-foto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Compartilhar */

.compartilhar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}

.compartilhar a,
.compartilhar button {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.2s;
}

.compartilhar .icone {
    width: 18px;
    height: 18px;
}

.compartilhar-x .icone {
    width: 15px;
    height: 15px;
}

.compartilhar a:hover,
.compartilhar button:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    filter: brightness(1.06);
}

.compartilhar a:focus-visible,
.compartilhar button:focus-visible {
    outline: 3px solid rgba(227, 19, 27, 0.35);
    outline-offset: 2px;
}

.compartilhar-whatsapp { background: #25d366; }
.compartilhar-facebook { background: #1877f2; }
.compartilhar-x { background: #111111; }
.compartilhar-linkedin { background: #0a66c2; }
.compartilhar .compartilhar-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* Botão só de quem edita: gera o card para o Instagram */
.compartilhar .compartilhar-card {
    border: 1.5px dashed var(--cor-principal);
    background: var(--cor-fundo-suave);
    color: var(--cor-principal);
}
.compartilhar .compartilhar-card:hover { background: #fde8e9; }
.compartilhar .compartilhar-card.gerando { opacity: 0.5; cursor: progress; }

/* Janela do card para o Instagram (assets/js/card-instagram.js) */

.card-ig {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(17, 17, 17, 0.75);
}

.card-ig-caixa {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(440px, 100%);
    max-height: 100%;
    padding: 18px;
    overflow: auto;
    border-radius: var(--raio);
    background: var(--cor-fundo);
    font-family: var(--font-textos);
}

.card-ig-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-ig-topo strong {
    font-family: var(--font-titulos);
    font-size: 17px;
    color: var(--cor-texto);
}

.card-ig-fechar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cor-fundo-suave);
    font-size: 18px;
    color: var(--cor-secundaria);
    cursor: pointer;
}

.card-ig-caixa img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
}

.card-ig-dica {
    margin: 0;
    font-size: 13px;
    color: var(--cor-secundaria);
}

.card-ig-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card-ig-botoes button,
.card-ig-botoes a {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--cor-principal);
    border-radius: 4px;
    background: var(--cor-principal);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.card-ig-botoes .card-ig-secundario {
    background: #ffffff;
    color: var(--cor-principal);
}

/* Link da postagem no Instagram, salvo direto da janela */
.card-ig-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}

.card-ig-link label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-texto);
}

.card-ig-link div {
    display: flex;
    gap: 8px;
}

.card-ig-link input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
}

.card-ig-link button {
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: var(--cor-texto);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
}

.card-ig-link small {
    font-size: 12.5px;
    color: var(--cor-secundaria);
}

/* Copiar link: troca o ícone por um "check" e mostra "Link copiado!" por 2 s (assets/js/main.js) */
.compartilhar .compartilhar-link {
    background: var(--cor-fundo-suave);
    color: var(--cor-secundaria);
    box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.compartilhar .compartilhar-link:hover {
    background: #e9e9eb;
    color: var(--cor-texto);
    box-shadow: inset 0 0 0 1px var(--cor-borda), 0 6px 14px rgba(0, 0, 0, 0.1);
}

.compartilhar .compartilhar-link .compartilhar-icone-ok,
.compartilhar .compartilhar-link.copiado .compartilhar-icone-link {
    display: none;
}

.compartilhar .compartilhar-link.copiado .compartilhar-icone-ok {
    display: block;
    stroke-width: 3;
}

.compartilhar .compartilhar-link.copiado {
    background: #16a34a;
    color: #ffffff;
    box-shadow: none;
}

.compartilhar-aviso {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 5px 9px;
    border-radius: 5px;
    background: var(--cor-texto);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.18s, transform 0.18s;
}

.compartilhar-aviso::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: var(--cor-texto);
    transform: translateX(-50%);
}

.compartilhar-link.copiado .compartilhar-aviso {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Imagem destacada */

.post-capa {
    margin: 0 0 16px;
}

.post-capa-midia {
    position: relative;
}

.post-capa-midia picture {
    display: block;
}

.post-capa-midia img {
    width: 100%;
    aspect-ratio: 8 / 3;
    object-fit: cover;
    border-radius: var(--raio);
}

.post-capa-midia .badge {
    top: 14px;
    left: 14px;
    padding: 5px 9px;
    font-size: 13px;
}

.post-capa figcaption,
.post-imagem-lateral figcaption {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--cor-suave);
}

/* Texto da matéria. O .post-corpo segura os elementos flutuantes (citação e imagem) */

.post-corpo {
    display: flow-root;
    margin-bottom: 28px;
}

.single-post .entry-content {
    font-size: 15.5px;
    line-height: 1.45;
    color: #292929;
}

.single-post .entry-content p {
    margin: 0 0 14px;
}

.single-post .entry-content h2 {
    margin: 26px 0 8px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Intertítulos da matéria: sempre com o traço vermelho à esquerda (o rótulo das fontes de inspiração fica de fora) */
.single-post .entry-content h2:not(.post-inspiracao-rotulo) {
    padding-left: 12px;
    border-left: 4px solid var(--cor-principal, #e3131b);
}

/* Bloco Título com o estilo "Marcador vermelho" (igual aos títulos de seção) */
.entry-content .is-style-marcador,
.editor-styles-wrapper .is-style-marcador {
    padding-left: 12px;
    border-left: 4px solid var(--cor-principal, #e3131b);
    line-height: 1.15;
}

.single-post .entry-content h3 {
    margin: 22px 0 8px;
    font-size: 20px;
    font-weight: 800;
}

.single-post .entry-content strong {
    font-weight: 700;
    color: var(--cor-texto);
}

.single-post .entry-content blockquote {
    margin: 22px 0;
    padding: 14px 20px;
    border-left: 4px solid var(--cor-principal);
    background: #fff5f5;
    font-family: var(--font-editorial);
    font-size: 16px;
    font-style: italic;
    line-height: 1.5;
    color: #333333;
}

.single-post .entry-content ul,
.single-post .entry-content ol {
    margin: 0 0 14px;
}

.single-post .entry-content a {
    color: var(--cor-principal);
    font-weight: 600;
    text-decoration: underline;
}

.single-post .entry-content figcaption,
.single-post .wp-caption-text {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--cor-suave);
}

/* Citação em destaque (opcional) */

.single-post .entry-content .post-citacao {
    float: right;
    width: min(250px, 38%);
    margin: 4px 0 16px 24px;
    padding: 18px 20px;
    border: 1.5px solid #f3a5a8;
    border-radius: var(--raio);
    background: #fff5f5;
}

.post-citacao-icone {
    margin-bottom: 6px;
    font-size: 26px;
    color: var(--cor-principal);
}

.single-post .entry-content .post-citacao blockquote {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-textos);
    font-style: italic;
}

.single-post .entry-content .post-citacao blockquote p {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--cor-texto);
}

.post-citacao figcaption strong {
    display: block;
    font-size: 12.5px;
}

.single-post .entry-content .post-citacao figcaption {
    font-size: 11px;
}

/* Bloco "Citação MENTIRA": posição escolhida no editor */
.single-post .entry-content .post-citacao--esquerda {
    float: left;
    margin: 4px 24px 16px 0;
}

.single-post .entry-content .post-citacao--larga {
    float: none;
    width: auto;
    margin: 22px 0;
}

/* Imagem ao lado do texto (opcional) */

.single-post .entry-content .post-imagem-lateral {
    float: right;
    width: min(280px, 40%);
    margin: 4px 0 16px 24px;
}

.post-imagem-lateral img {
    width: 100%;
    border-radius: var(--raio);
}

/* Ao lado do texto: recorte 4:3. Na largura toda e no centro a imagem aparece inteira, na proporção
   dela (vinda dos atributos width/height; não sobrescrever o aspect-ratio, senão a imagem com
   sizes="auto" do WordPress fica com 1500px de altura) */
.post-imagem-lateral:not(.post-imagem-lateral--larga):not(.post-imagem-lateral--centro) img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Bloco "Imagem ao lado do texto": posição escolhida no editor */
.single-post .entry-content .post-imagem-lateral--esquerda {
    float: left;
    margin: 4px 24px 16px 0;
}

.single-post .entry-content .post-imagem-lateral--larga {
    float: none;
    width: auto;
    margin: 22px 0;
}

.post-imagem-lateral--larga img {
    height: auto;
}

/* "No centro, menor": imagem inteira e centralizada, para prints de tela (posts, mensagens) */
.single-post .entry-content .post-imagem-lateral--centro {
    float: none;
    width: min(560px, 100%);
    margin: 24px auto;
}

.post-imagem-lateral--centro img {
    height: auto;
    border: 1px solid var(--cor-borda, #e7e7e9);
}

.post-imagem-lateral--centro figcaption {
    text-align: center;
}

/* Nota em destaque (opcional) */

.post-nota {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 14px;
    padding: 14px 18px;
    border-radius: var(--raio);
    background: var(--cor-fundo-suave);
    overflow: hidden;
}

.post-nota-icone {
    font-size: 24px;
    color: var(--cor-principal);
}

.single-post .entry-content .post-nota p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Fontes de inspiração (opcional): verde = fato real, roxo = não validado */

.post-inspiracao {
    --laco-claro: #3fc463;
    --laco: #1fa346;
    --laco-escuro: #0c7a2c;
    --inspiracao-borda: #b5e2c2;
    --inspiracao-fundo: #f5fbf7;
    --inspiracao-faixa: #ebf6ee;
    --inspiracao-rotulo: #13833a;
    /* Começa abaixo da imagem flutuante do texto e ocupa a largura toda, como as tags */
    clear: both;
    position: relative;
    margin: 28px 0 14px;
    border: 1px solid var(--inspiracao-borda);
    border-radius: var(--raio);
    background: var(--inspiracao-fundo);
}

.post-inspiracao--opiniao {
    --laco-claro: #c99af5;
    --laco: #9b4fe0;
    --laco-escuro: #5e2399;
    --inspiracao-borda: #d9c3f2;
    --inspiracao-fundo: #faf7fe;
    --inspiracao-faixa: #f2eafc;
    --inspiracao-rotulo: #6f2bb3;
}

.post-inspiracao + .post-inspiracao {
    margin-top: 12px;
}

/* Cabeçalho (botão que abre/fecha): Fontes de inspiração (2) [i] ........ > */

.single-post .post-inspiracao-rotulo {
    margin: 0;
    font-family: var(--font-textos);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.post-inspiracao-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    border-radius: var(--raio);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--inspiracao-rotulo);
    cursor: pointer;
}

.post-inspiracao-cabecalho:hover {
    background: var(--inspiracao-faixa);
}

/* Laço 42x42, centralizado na vertical e na horizontal (a imagem já vem recortada e centrada) */
.post-inspiracao-laco {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
}

.post-inspiracao-laco .laco {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.post-inspiracao-info {
    font-size: 17px;
}

.post-inspiracao-seta {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.2s;
}

.post-inspiracao-cabecalho[aria-expanded="true"] .post-inspiracao-seta {
    transform: rotate(90deg);
}

/* Conteúdo aberto: aviso sobre os veículos + lista */

.post-inspiracao-conteudo {
    margin: 0 16px;
    border-top: 1px solid var(--inspiracao-borda);
}

.single-post .post-inspiracao-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--inspiracao-borda);
    font-size: 12px;
    line-height: 1.4;
    color: var(--cor-secundaria);
}

.post-inspiracao-aviso .icone {
    font-size: 15px;
    color: var(--inspiracao-rotulo);
}

/* Linhas: [doc] [título…] [veículo | data] [link] */

.post-inspiracao-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-inspiracao-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    font-size: 13px;
    line-height: 1.4;
}

.post-inspiracao-item + .post-inspiracao-item {
    border-top: 1px solid var(--inspiracao-borda);
}

.post-inspiracao-doc {
    font-size: 18px;
    color: var(--inspiracao-rotulo);
}

.post-inspiracao-corpo {
    display: flex;
    align-items: center;
    gap: 6px 24px;
    flex: 1;
    min-width: 0;
}

/* O título encolhe (com "…") antes de empurrar o veículo e a data */
.post-inspiracao-titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--cor-texto);
}

a.post-inspiracao-titulo:hover {
    color: var(--inspiracao-rotulo);
    text-decoration: underline;
}

.post-inspiracao-meta {
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    color: var(--cor-suave);
}

.post-inspiracao-meta > * + *::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 9px;
    vertical-align: -1px;
    background: var(--inspiracao-borda);
}

.post-inspiracao-externo {
    display: flex;
    font-size: 19px;
    color: #1a73e8;
}

.post-inspiracao-externo:hover {
    color: #0b57d0;
}

/* Tags */

.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.post-tags-rotulo {
    font-size: 13px;
    font-weight: 700;
}

.post-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-tags a {
    display: block;
    padding: 5px 13px;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--cor-secundaria);
    transition: border-color 0.2s, color 0.2s;
}

.post-tags a:hover {
    border-color: var(--cor-principal);
    color: var(--cor-principal);
}

/* Comentários */

.comentarios {
    clear: both;
}

.comentarios-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 12px;
}

.comentarios-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 0 0;
    font-size: 18px;
}

.comentarios-titulo .icone {
    font-size: 1.3em;
}

.comentarios-total {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cor-secundaria);
}

.comentarios-ordem select {
    padding: 6px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 12.5px;
    color: var(--cor-secundaria);
}

/* Campo de comentário e botão na mesma linha; nome e e-mail (visitantes) lado a lado, logo abaixo */
.comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px 14px;
}

.comment-form > * {
    grid-column: 1 / -1;
    margin: 0;
}

.comment-form .comment-form-comment {
    grid-column: 1 / 3;
    grid-row: 1;
}

.comment-form .form-submit {
    grid-column: 3;
    grid-row: 1;
}

.comment-form .comment-form-author {
    grid-column: 1;
}

.comment-form .comment-form-email {
    grid-column: 2 / 4;
}

.comment-form .form-submit .btn {
    height: 100%;
    min-height: 42px;
    padding: 0 30px;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 13.5px;
}

.comment-form textarea {
    display: block;
    min-height: 42px;
    resize: vertical;
}

.comment-form label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
}

.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comment-form .comment-form-cookies-consent label {
    margin: 0;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--cor-suave);
}

.logged-in-as,
.comment-notes {
    font-size: 12px;
    color: var(--cor-suave);
}

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

.comentarios-lista {
    margin-top: 20px;
}

.comentarios-lista .children {
    padding-left: 46px;
}

.comentarios-lista .comment-body {
    padding: 14px 0;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 14px;
}

.comentarios-lista .comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.comentarios-lista .avatar {
    border-radius: 50%;
}

.comentarios-lista .says {
    display: none;
}

.comentarios-lista .comment-metadata,
.comentarios-lista .reply {
    font-size: 11.5px;
    color: var(--cor-suave);
}

.comentarios-lista .comment-metadata {
    margin: 2px 0 0 46px;
}

.comentarios-lista .comment-content,
.comentarios-lista .reply {
    margin-left: 46px;
}

.comentarios-lista .comment-content p {
    margin: 6px 0;
}

.comentarios-lista .comment-reply-link {
    font-weight: 700;
    color: var(--cor-principal);
}

/* Aviso de sátira */

.aviso-satira {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 12px 18px;
    border-radius: var(--raio);
    background: #fde8e9;
}

.aviso-satira-icone {
    font-size: 28px;
    color: var(--cor-principal);
}

.aviso-satira strong {
    display: block;
    font-size: 13px;
    color: var(--cor-principal);
}

.aviso-satira p {
    margin: 0;
    font-size: 12px;
    color: var(--cor-secundaria);
}

/* Conteúdo patrocinado (tag "ads"): barra amarela */
.aviso-satira--patrocinado {
    border-left: 4px solid #f2b705;
    background: #fff6d6;
}

.aviso-satira--patrocinado .aviso-satira-icone {
    color: #c48a00;
}

.aviso-satira--patrocinado strong {
    color: #5c4300;
}

.aviso-satira--patrocinado strong a {
    color: #a0330b;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aviso-satira--patrocinado strong a:hover {
    color: var(--cor-principal);
}

.aviso-satira--patrocinado p {
    color: #6b5a2e;
}

/* Barra lateral da matéria */

.post-lateral {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mais-mentiras .lista {
    margin-bottom: 14px;
}

.item-lista--grande {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
}

.item-lista--grande .item-lista-midia img {
    aspect-ratio: 15 / 8;
    border-radius: var(--raio);
}

.item-lista--grande .item-lista-titulo {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.2;
}

.item-lista--grande .metas {
    gap: 6px 12px;
}

/* Data alinhada à direita do card */
.mais-mentiras .metas .meta {
    margin-left: auto;
}

.badge--suave {
    margin: 0;
    padding: 4px 6px;
    background: #fde8e9;
    color: var(--cor-principal);
    font-size: 9.5px;
}

.btn-contorno {
    border: 1px solid var(--cor-borda);
    background: #ffffff;
    color: var(--cor-texto);
}

.btn-contorno:hover {
    border-color: var(--cor-texto);
    color: var(--cor-texto);
}

.mais-mentiras .btn {
    padding: 11px 16px;
}

.newsletter-aviso {
    margin: 0;
    font-size: 11px;
    color: var(--cor-suave);
}

/* Resposta da inscrição (inc/newsletter.php e assets/js/main.js) */
.newsletter-status {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--raio);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.newsletter-status--ok {
    background: #e9f7ee;
    color: #146c34;
}

.newsletter-status--erro {
    background: #fdecec;
    color: var(--cor-principal-escura);
}

.newsletter-form.enviando {
    opacity: 0.6;
    pointer-events: none;
}

/* Campo escondido para pegar robôs */
.newsletter-armadilha {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.post-lateral .newsletter {
    padding: 18px 20px;
}

.post-lateral .newsletter-titulo {
    font-size: 17px;
}

.post-lateral .newsletter-topo p {
    font-size: 13px;
}

.post-lateral .newsletter-icone {
    font-size: 40px;
}

.post-lateral .newsletter-form input {
    padding: 10px 14px;
}

.post-lateral .newsletter-form .btn {
    padding: 0 28px;
}

.relacionados-titulo {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.card--mini .card-midia img {
    aspect-ratio: 15 / 8;
}

.card--mini .badge--base {
    bottom: -8px;
    left: 0;
    font-size: 9px;
}

.card--mini .card-corpo {
    padding-top: 14px;
}

.card--mini .card-titulo {
    font-size: 12px;
    line-height: 1.25;
}

/* -----------------------------------------------------
   14. INDEX / LISTAGEM DE NOTÍCIAS
   ----------------------------------------------------- */

.lista-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.lista-noticias article {
    background: #ffffff;
    padding: 15px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
}

.lista-noticias h3 {
    font-size: 19px;
    line-height: 1.3;
}

.lista-noticias .entry-content {
    font-size: 14px;
    line-height: 1.45;
    color: #555555;
}

/* -----------------------------------------------------
   14.1 PÁGINA DE CATEGORIA
   ----------------------------------------------------- */

/* Topo da editoria: ícone, nome, descrição e arte à direita (que passa um pouco da borda de cima) */

.categoria-topo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 144px;
    margin: 30px 0 26px;
    padding: 18px 26px;
    border-radius: 14px;
    background: #eff1f4;
}

.categoria-topo-icone {
    position: relative;
    z-index: 2;
    display: grid;
    flex: none;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--cor-principal);
    box-shadow: inset 0 0 0 4px var(--cor-principal), inset 0 0 0 6px #ffffff;
    color: #ffffff;
    font-size: 40px;
}

/* Ícones com detalhes brancos (bola) ficam vermelhos sobre o círculo */
.categoria-topo-icone .icone [fill="#fff"] {
    fill: var(--cor-principal);
}

.categoria-topo-texto {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* O texto para antes do mascote */
.categoria-topo--arte .categoria-topo-texto {
    max-width: 52%;
}

.categoria-topo-rotulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--cor-principal);
}

.categoria-topo-titulo {
    margin: 0 0 4px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.categoria-topo-descricao {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #33373c;
}

/* Com arte, o banner é a própria imagem (1062 x 150 + 20px acima, onde o mascote "sai" pela borda de cima).
   Se o texto precisar de mais altura, a imagem cobre o banner e corta o lado esquerdo. */
.categoria-topo--arte {
    aspect-ratio: 1062 / 150;
    background: transparent;
}

.categoria-topo-arte {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 113.34%;
    object-fit: cover;
    object-position: right bottom;
    pointer-events: none;
}

/* Névoa à esquerda: as ilustrações continuam aparecendo, mas o texto fica legível */
.categoria-topo--arte::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(239, 241, 244, 0.94) 0, rgba(239, 241, 244, 0.84) 36%, rgba(239, 241, 244, 0) 62%);
    pointer-events: none;
}

/* Conteúdo + barra lateral */

.categoria-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.categoria-principal,
.categoria-lateral {
    min-width: 0;
}

/* Destaques: 1 grande + 3 em lista */

.categoria-destaques {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.categoria-destaque {
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
}

.categoria-destaque .card-midia img {
    aspect-ratio: 5 / 2;
}

.categoria-destaque .card-corpo {
    gap: 8px;
    padding: 14px 16px 14px;
}

.categoria-destaque .card-titulo--grande {
    font-size: 23px;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.categoria-destaque .card-resumo {
    font-size: 14px;
}

.categoria-destaques-lista {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 14px;
}

.categoria-destaques-lista .item-lista {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0;
}

.categoria-destaques-lista .item-lista-midia img {
    aspect-ratio: 3 / 2;
    border-radius: var(--raio);
}

.categoria-destaques-lista .item-lista-titulo {
    margin-bottom: 8px;
    font-size: 14px;
}

.categoria-destaques-lista .metas {
    justify-content: space-between;
}

/* Filtros e ordem */

.categoria-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cor-borda);
    scroll-margin-top: 90px;
}

.categoria-noticias {
    scroll-margin-top: 90px;
}

.categoria-filtros-grupo {
    min-width: 0;
}

.categoria-filtros-titulo {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filtro {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}

.filtro:hover {
    border-color: var(--cor-texto);
    color: var(--cor-texto);
}

.filtro--ativo,
.filtro--ativo:hover {
    border-color: var(--cor-principal);
    background: var(--cor-principal);
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
}

.categoria-ordem {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
    border-left: 1px solid var(--cor-borda);
}

.categoria-ordem label {
    font-size: 12px;
    color: var(--cor-secundaria);
}

.categoria-ordem select {
    padding: 7px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-texto);
}

/* Grade com 8 notícias */

.categoria-grade .card {
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
}

.categoria-grade .card-midia img {
    aspect-ratio: 16 / 9;
}

.categoria-grade .card-corpo {
    padding-top: 12px;
}

.categoria-grade .card-titulo {
    font-size: 15px;
}

.categoria-grade .card-resumo {
    font-size: 12px;
}

.categoria-vazia {
    padding: 40px 0;
    text-align: center;
    color: var(--cor-secundaria);
}

/* Paginação */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.paginacao .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: border-color 0.2s;
}

.paginacao a.page-numbers:hover {
    border-color: var(--cor-texto);
    color: var(--cor-texto);
}

.paginacao .page-numbers.current {
    border-color: var(--cor-principal);
    background: var(--cor-principal);
    color: #ffffff;
}

.paginacao .page-numbers.dots {
    min-width: 0;
    border: 0;
    background: none;
}

.paginacao .prev,
.paginacao .next {
    padding: 0 16px;
}

.paginacao .next {
    margin-left: 14px;
}

.paginacao .prev {
    margin-right: 14px;
}

/* Barra lateral: mais lidas e newsletter */

.categoria-lateral {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.caixa--suave {
    border-color: transparent;
    background: var(--cor-fundo-suave);
}

.categoria-mais-lidas .caixa-titulo {
    font-size: 19px;
}

.categoria-mais-lidas .lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.categoria-mais-lidas .item-lista {
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    padding: 10px 0;
}

.categoria-mais-lidas .item-lista-midia {
    position: relative;
}

.categoria-mais-lidas .item-lista-midia img {
    aspect-ratio: 4 / 3;
}

.categoria-mais-lidas .ranking-num {
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    font-size: 13px;
}

.categoria-mais-lidas .item-lista-titulo {
    margin: 0;
    font-size: 13px;
}

.newsletter--lateral {
    gap: 14px;
    overflow: hidden;
    padding: 20px 20px 0;
    background: #f3f4f5;
}

.newsletter--lateral .newsletter-icone {
    font-size: 40px;
}

.newsletter--lateral .newsletter-titulo {
    font-size: 19px;
}

.newsletter--lateral .newsletter-topo p {
    font-size: 13.5px;
}

.newsletter--lateral .newsletter-form {
    flex-direction: column;
    gap: 10px;
}

.newsletter--lateral .newsletter-form .btn {
    padding: 11px 16px;
    font-size: 15px;
}

/* Sem ilustração, a caixa precisa do espaçamento de baixo */
.newsletter--lateral > :last-child:not(.newsletter-ilustracao) {
    margin-bottom: 20px;
}

.newsletter-ilustracao {
    display: block;
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 -20px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
    mask-image: linear-gradient(180deg, transparent, #000 30%);
}

/* Arte acima do rodapé: as ondas (ondas.svg) se repetem na largura toda da tela;
   os ícones da editoria (fundo transparente) ficam na largura do container, apoiados nas ondas */
.categoria-rodape-arte {
    margin-top: -12px;
    background: url("assets/img/categorias/ondas.svg") repeat-x left bottom / 1200px 56px;
}

.categoria-rodape-arte img {
    display: block;
    width: calc(100% - 40px);
    max-width: calc(var(--container) - 40px);
    height: auto;
    margin: 0 auto;
}

@media (max-width: 1180px) {

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

    .categoria-lateral {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (max-width: 960px) {

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

    .categoria-topo-titulo {
        font-size: 36px;
    }

    .categoria-topo--arte .categoria-topo-texto {
        max-width: 60%;
    }
}

@media (max-width: 782px) {

    .categoria-topo {
        gap: 14px;
        min-height: 0;
        margin-top: 16px;
        padding: 16px;
    }

    .categoria-topo-icone {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .categoria-topo-titulo {
        font-size: 30px;
    }

    .categoria-topo-descricao {
        font-size: 13px;
    }

    /* No celular a arte sai e o texto ocupa o banner todo */
    .categoria-topo--arte {
        aspect-ratio: auto;
        background: #eff1f4;
    }

    .categoria-topo-arte,
    .categoria-topo--arte::before {
        display: none;
    }

    .categoria-topo--arte .categoria-topo-texto {
        max-width: none;
    }

    .categoria-ordem {
        padding-left: 0;
        border-left: 0;
    }

    .filtros {
        flex-wrap: nowrap;
        margin-right: -20px;
        padding-right: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .categoria-filtros-grupo {
        width: 100%;
    }

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

    .paginacao .prev span,
    .paginacao .next span {
        display: none;
    }

    .paginacao .prev,
    .paginacao .next {
        margin: 0;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {

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

/* -----------------------------------------------------
   14.2 RESULTADOS DA BUSCA
   (usa o topo, os filtros, a paginação e a barra lateral da página de categoria)
   ----------------------------------------------------- */

.busca-topo .categoria-topo-titulo {
    overflow-wrap: anywhere;
}

/* Enquanto o main.js carrega outro filtro/ordem/página */
[data-busca-parte="resultados"] {
    transition: opacity 0.2s;
}

.busca-carregando [data-busca-parte="resultados"] {
    opacity: 0.45;
    pointer-events: none;
}

.busca-carregando {
    cursor: progress;
}

/* Filtros e ordem numa linha só, acima da lista e da barra lateral */
.busca-filtros {
    align-items: center;
    padding-bottom: 16px;
}

.busca-filtros .categoria-filtros-grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
}

.busca-filtros .categoria-filtros-titulo {
    margin: 0;
}


.busca-filtros .categoria-ordem {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.busca-filtros .categoria-ordem select {
    min-width: 200px;
    padding: 9px 12px;
    border-color: transparent;
    background-color: var(--cor-fundo-suave);
    font-size: 14px;
}

/* Campo de busca dentro do topo */
.busca-topo .categoria-topo-texto {
    flex: 1;
}

.busca-topo-form {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 640px;
    margin-top: 14px;
    padding: 4px;
    border: 1px solid #d9dbe0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
}

.busca-topo-campo {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 14px;
    font-size: 20px;
    color: var(--cor-secundaria);
}

.busca-topo-campo input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    font-family: var(--font-textos);
    font-size: 15px;
    color: var(--cor-texto);
    outline: 0;
}

.busca-topo-form:focus-within {
    border-color: var(--cor-principal);
}

.busca-topo-form .btn {
    padding: 11px 26px;
    border-radius: 999px;
    font-size: 14px;
}

/* Celular: o ícone sobe para o lado de "Todas as mentiras" e o campo de busca usa a largura toda.
   O bloco de texto some do layout (display: contents) para os filhos entrarem na grade do topo. */
@media (max-width: 782px) {
    .busca-topo {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-content: center;
        align-items: center;
        gap: 0 10px; /* sem espaço entre as linhas: o "gap: 14px" do topo virava espaço entre rótulo e descrição */
    }

    .busca-topo .categoria-topo-texto {
        display: contents;
    }

    .busca-topo .categoria-topo-icone {
        grid-column: 1;
        grid-row: 1 / 4;
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .busca-topo .categoria-topo-rotulo,
    .busca-topo .categoria-topo-titulo,
    .busca-topo .categoria-topo-descricao {
        grid-column: 2;
    }

    .busca-topo .busca-topo-form {
        grid-column: 1 / -1;
        max-width: none;
    }
}

/* Dropdowns dos filtros (tipo, categorias, tags e período) */
.busca-filtros {
    position: relative;
}

.filtros-drop {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filtro-drop {
    position: relative;
}

.filtro-drop-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cor-texto);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.filtro-drop-botao .icone {
    font-size: 16px;
}

.filtro-drop-botao:hover {
    border-color: var(--cor-texto);
}

.filtro-drop-seta {
    margin-left: 2px;
    font-size: 14px !important;
    transform: rotate(90deg);
    transition: transform 0.2s;
}

.filtro-drop-botao[aria-expanded="true"] {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 1px var(--cor-principal);
}

.filtro-drop-botao[aria-expanded="true"] .filtro-drop-seta {
    transform: rotate(-90deg);
}

/* Com algo escolhido: texto vermelho e a quantidade */
.filtro-drop--ativo .filtro-drop-botao {
    border-color: var(--cor-principal);
    color: var(--cor-principal);
}

.filtro-drop-qtd {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cor-principal);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
}

.filtro-drop-painel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 320px;
    padding: 16px;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.14);
    animation: drop-entrar 0.16s ease-out;
}

.filtro-drop-painel--estreito {
    width: 240px;
}

.filtro-drop-painel--periodo {
    width: 400px;
}

@keyframes drop-entrar {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .filtro-drop-painel {
        animation: none;
    }
}

.filtro-drop-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.filtro-drop-titulo--grande {
    font-size: 18px;
}

.filtro-drop-busca {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    font-family: var(--font-textos);
    font-size: 13px;
}

.filtro-drop-busca:focus {
    border-color: var(--cor-principal);
    outline: 0;
}

.filtro-drop-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filtro-drop-lista--rolagem {
    max-height: 280px;
    margin-right: -8px;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filtro-drop-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--raio);
    font-size: 14px;
    cursor: pointer;
}

.filtro-drop-opcao:hover {
    background: var(--cor-fundo-suave);
}

.filtro-drop-opcao input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--cor-principal);
    cursor: pointer;
}

.filtro-drop-opcao span {
    flex: 1;
    min-width: 0;
}

.filtro-drop-opcao small {
    font-size: 12px;
    color: var(--cor-suave);
}

/* Editoria em negrito; os filtros dela, recuados */
.filtro-drop-nivel-0 .filtro-drop-opcao {
    font-weight: 700;
}

.filtro-drop-nivel-1 .filtro-drop-opcao {
    padding-left: 32px;
}

.filtro-drop-acoes {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--cor-borda);
}

.filtro-drop-acoes .btn {
    padding: 10px 18px;
    font-size: 14px;
}

.filtro-drop-acoes .btn-vermelho {
    min-width: 130px;
}

.btn-claro {
    background: var(--cor-fundo-suave);
    color: var(--cor-secundaria);
}

.btn-claro:hover {
    background: #e9e9eb;
    color: var(--cor-texto);
}

/* Período: atalhos, datas e calendário */
.periodo-atalhos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.periodo-atalho {
    padding: 8px 4px;
    white-space: nowrap;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-texto);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.periodo-atalho:hover {
    border-color: var(--cor-texto);
}

.periodo-atalho--ativo,
.periodo-atalho--ativo:hover {
    border-color: var(--cor-principal);
    background: #fdecec;
    color: var(--cor-principal);
}

.periodo-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.periodo-campos label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.periodo-campo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #d9dbe0;
    border-radius: var(--raio);
    font-size: 16px;
    color: var(--cor-secundaria);
}

.periodo-campo:focus-within {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 1px var(--cor-principal);
}

.periodo-campo input {
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-family: var(--font-textos);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
    outline: 0;
}

.periodo-calendario {
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
}

.cal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cal-titulo {
    font-size: 15px;
    font-weight: 700;
}

.cal-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 18px;
    color: var(--cor-texto);
    cursor: pointer;
}

.cal-nav:hover {
    background: var(--cor-fundo-suave);
}

.cal-grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    text-align: center;
}

.cal-semana {
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-secundaria);
}

.cal-dia {
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--raio);
    background: transparent;
    font-family: var(--font-textos);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
    cursor: pointer;
}

.cal-dia:hover {
    background: var(--cor-fundo-suave);
}

.cal-dia--hoje {
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.cal-dia--meio,
.cal-dia--meio:hover {
    background: #fdecec;
}

.cal-dia--ponta,
.cal-dia--ponta:hover {
    background: var(--cor-principal);
    font-weight: 700;
    color: #ffffff;
}

/* Filtros ativos (esquerda) e resultados por página (direita) */
.busca-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: -6px 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cor-borda);
}

.busca-por-pagina {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--cor-secundaria);
}

.busca-por-pagina select {
    min-width: 76px;
    padding: 8px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-texto);
}

.busca-ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.busca-ativos-titulo {
    font-size: 14px;
    font-weight: 600;
}

.busca-ativos ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.busca-ativo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fdecec;
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-principal);
    transition: background 0.2s;
}

.busca-ativo:hover {
    background: #fbd9da;
    color: var(--cor-principal-escura);
}

.busca-ativo-remover {
    font-size: 14px;
}

.busca-ativos-limpar {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-principal);
}

.busca-ativos-limpar:hover {
    text-decoration: underline;
}

/* Resultados: grade de 2 colunas; em cada card, imagem à esquerda e texto à direita */
.busca-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

/* Contagem, paginação e resultados por página */
.busca-rodape {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.busca-contagem {
    margin: 0;
    font-size: 14px;
    color: var(--cor-secundaria);
}

.busca-rodape .paginacao {
    grid-column: 2;
    margin: 0;
}

.busca-rodape .busca-por-pagina {
    grid-column: 3;
    justify-self: end;
}

.paginacao--busca {
    gap: 6px;
}

.paginacao--busca .page-seta {
    min-width: 36px;
    padding: 0;
    font-size: 16px;
    color: var(--cor-texto);
}

.paginacao--busca span.page-seta {
    color: var(--cor-suave);
    opacity: 0.6;
}

.resultado-busca {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
    transition: box-shadow 0.2s;
}

.resultado-busca:hover {
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
}

.resultado-busca .card-midia {
    margin: 8px 0 8px 8px;
    overflow: hidden;
    border-radius: var(--raio);
}

.resultado-busca .card-midia img {
    height: 100%;
    min-height: 124px;
    aspect-ratio: 16 / 9;
}


.resultado-busca .card-corpo {
    gap: 6px;
    justify-content: center;
    padding: 12px 16px;
}

.resultado-busca .card-titulo {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.resultado-busca .card-resumo {
    -webkit-line-clamp: 2;
    font-size: 13px;
}

.resultado-busca .metas {
    gap: 6px 18px;
    margin-top: 4px;
}

.resultado-busca .meta {
    font-size: 12.5px;
    color: var(--cor-secundaria);
}

.resultado-busca-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 0.2s, color 0.2s;
}

.resultado-busca-tag:hover {
    border-color: var(--cor-principal);
    color: var(--cor-principal);
}

/* Sem resultados */
.busca-vazia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 28px;
    border: 1px dashed var(--cor-borda);
    border-radius: var(--raio);
}

.busca-vazia p {
    margin: 0;
    color: var(--cor-secundaria);
}

.busca-vazia .search-form {
    width: 100%;
    max-width: 520px;
}

@media (max-width: 782px) {

    .filtro-drop {
        position: static;
    }

    .filtro-drop-painel,
    .filtro-drop-painel--estreito,
    .filtro-drop-painel--periodo {
        top: auto;
        right: 0;
        width: auto;
        max-width: 420px;
        margin-top: 8px;
    }

    .busca-topo-form .btn {
        padding: 10px 18px;
    }

    .periodo-atalho {
        font-size: 12px;
    }

    /* Filtros em grade 2x2, botões da mesma largura (texto à esquerda, seta à direita) */
    .busca-filtros .categoria-filtros-grupo {
        display: block;
        width: 100%;
    }

    .busca-filtros .categoria-filtros-titulo {
        margin-bottom: 10px;
    }

    .busca-filtros .filtros-drop {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .busca-filtros .filtro-drop-botao {
        width: 100%;
        min-height: 42px;
    }

    .busca-filtros .filtro-drop-botao > span:not(.filtro-drop-qtd) {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
    }

    .busca-filtros .categoria-ordem {
        width: 100%;
        gap: 10px;
    }

    .busca-filtros .categoria-ordem label {
        flex: none;
        font-size: 13px;
    }

    .busca-filtros .categoria-ordem select {
        flex: 1;
        min-width: 0;
        min-height: 42px;
        border-color: var(--cor-borda);
        background-color: #ffffff;
        font-weight: 600;
    }

    .busca-rodape {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .busca-rodape .paginacao,
    .busca-rodape .busca-por-pagina {
        grid-column: auto;
        justify-self: center;
    }

    .busca-rodape .busca-por-pagina {
        margin-left: 0;
    }
}

@media (max-width: 960px) {

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

@media (max-width: 600px) {

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

    .resultado-busca .card-midia {
        margin: 0;
        border-radius: 0;
    }

    .resultado-busca .card-midia img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .resultado-busca .card-corpo {
        padding: 12px 14px 14px;
    }
}

/* -----------------------------------------------------
   15. RESPONSIVIDADE - DESKTOP PEQUENO / TABLET PAISAGEM
   ----------------------------------------------------- */

@media (max-width: 1180px) {

    .header-inner {
        gap: 24px;
    }

    .nav-principal ul {
        gap: 18px;
    }

    .nav-principal a {
        font-size: 12.5px;
    }

    .home-topo,
    .home-com-lateral {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .post-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .item-lista--grande {
        grid-template-columns: 130px minmax(0, 1fr);
    }

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

    .categorias {
        grid-column: 1 / -1;
    }

    .grade-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* "Em destaque" no tablet: 4 cards numa linha (o 5º fica oculto, como no celular) */
    .area-destaques .grade-5 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .area-destaques .grade-5 > :nth-child(n + 5) {
        display: none;
    }

    .brasil-conteudo,
    .brasil--larga .brasil-conteudo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Tablet: o card grande continua com a foto ao lado do texto (com a foto em cima, na largura
       toda, ela passava de 500px de altura). Só no celular (782px) a foto vai para cima. */

    /* Lista embaixo do card grande: a linha separadora passa para cima */
    .brasil-lista {
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid var(--cor-borda);
    }

    .rodape-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* -----------------------------------------------------
   16. RESPONSIVIDADE - TABLETS
   ----------------------------------------------------- */

/* Cabeçalho: logo + ações; menu em pílulas com rolagem na linha de baixo */
@media (max-width: 1024px) {

    .header-inner {
        flex-wrap: wrap;
        gap: 0;
        padding-top: 8px;
        padding-bottom: 0;
    }

    .header-acoes {
        gap: 8px;
    }

    /* O menu vira a faixa de baixo: não desce junto com os botões */
    .header-inner .nav-principal {
        top: 0;
    }

    .nav-principal {
        order: 3;
        flex-basis: 100%;
        margin: 0 -20px;
        padding: 8px 20px 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-principal::-webkit-scrollbar {
        display: none;
    }

    .nav-principal ul {
        gap: 8px;
    }

    .nav-principal a {
        padding: 7px 14px;
        border: 1px solid var(--cor-borda);
        border-radius: 999px;
        font-size: 13px;
    }

    .nav-principal a::after {
        display: none;
    }

    .nav-principal .current-menu-item > a {
        border-color: var(--cor-principal);
        background: var(--cor-principal);
        color: #ffffff;
    }
}

@media (max-width: 960px) {

    .btn-topo-todas {
        padding: 10px 16px;
        font-size: 12px;
    }

    .hero-titulo {
        font-size: 24px;
    }

    .hero-resumo {
        font-size: 13.5px;
    }

    .grade-4,
    .grade-5,
    .area-destaques .grade-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Em 2 colunas, "Em destaque" mostra só 4 (o 5º ficaria sozinho na última linha) */
    .area-destaques .grade-5 > :nth-child(n + 5) {
        display: none;
    }

    .mais-lidas .grade {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Mais lidas vira lista: imagem à esquerda */
    .ranking {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .ranking .card-midia img {
        height: 100%;
        aspect-ratio: 16 / 10;
    }

    /* Esportes em uma coluna: os 3 cards em cima, o Futebol embaixo */
    .esportes-conteudo {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .esportes-geral {
        display: block;
        grid-column: 1;
    }

    .esportes-geral .esportes-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* O fundo do Futebol vai de uma borda à outra, como no Brasil */
    .esportes-futebol::before {
        left: -100vw;
        border-radius: 0;
    }

    /* Mundo em uma coluna: a grande no topo, depois as duas listas emendadas numa só
       (sem o espaço entre elas, com a linha divisória entre a última da esquerda e a primeira da direita) */
    .mundo-conteudo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "centro" "esquerda" "direita";
        row-gap: 0;
    }

    .mundo-card--centro {
        margin-bottom: 16px;
    }

    .mundo-lado-card {
        display: none;
    }

    .mundo-lado-item {
        display: block;
    }

    /* Ela é a última dentro do invólucro: devolve a linha divisória para a próxima */
    .mundo-lado-item .item-lista {
        border-bottom: 1px solid var(--cor-borda);
    }

    .mundo-lado-item .item-lista:first-child {
        padding-top: 9px;
    }

    .mundo-lista--esquerda .mundo-lado-item .item-lista:first-child {
        padding-top: 0;
    }

    .mundo-lado-card + .mundo-lado-item + .item-lista {
        border-top: 0;
    }

    .mundo-lista--esquerda .item-lista:last-child {
        border-bottom: 1px solid var(--cor-borda);
    }

    .mundo-lista--direita .item-lista:first-child {
        padding-top: 9px;
    }

    /* Ciência, Tecnologia e Variedades uma embaixo da outra */
    .home-colunas {
        grid-template-columns: minmax(0, 1fr);
    }

    .esportes-futebol {
        grid-column: 1;
    }

    /* Matéria: barra lateral vai para baixo do texto, e o aviso de sátira fica entre os dois */
    .post-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-layout > .post-principal {
        order: 1;
    }

    .post-layout > .aviso-satira {
        order: 2;
    }

    .post-layout > .post-lateral {
        order: 3;
    }
}

/* -----------------------------------------------------
   17. RESPONSIVIDADE - CELULARES
   ----------------------------------------------------- */

@media (max-width: 782px) {

    /* Brasil sem publicidade: lista volta a ter 1 coluna */
    .brasil--larga .brasil-lista {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .brasil--larga .brasil-lista .item-lista:nth-child(3) {
        border-bottom: 1px solid var(--cor-borda);
    }

    .brasil--larga .brasil-lista .item-lista:nth-child(4) {
        padding-top: 9px;
    }

    /* Fontes de inspiração: veículo e data embaixo do título */
    .post-inspiracao-corpo {
        flex-direction: column;
        align-items: stretch;
    }

    .post-inspiracao-titulo {
        flex: none;
    }

    .post-inspiracao-meta {
        margin-left: 0;
        text-align: left;
        font-size: 12px;
    }

    .single-post .post-inspiracao-aviso {
        align-items: flex-start;
    }

    .admin-bar .site-header {
        top: 46px;
    }

    .header-inner {
        --logo-largura: 132px;
    }


    /* Celular: "Todas as Mentiras" compacto, ao lado do menu */
    .header-acoes .btn-topo-todas {
        gap: 5px;
        height: 36px;
        padding: 0 12px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    .header-acoes .btn-topo-todas .icone {
        font-size: 13px;
    }

    .btn-icone {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .nav-principal {
        margin: 0 -20px;
        padding: 14px 20px;
    }

    .site-main {
        padding-top: 4px;
    }

    /* Topo em coluna única, na ordem do layout mobile */
    .home-topo {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    .topo-principal,
    .topo-lateral {
        display: contents;
    }

    .area-hero { order: 1; }
    .area-ultimas { order: 2; }
    .area-anuncio-lateral { order: 3; }
    .area-destaques { order: 4; }
    .area-anuncio-hero { order: 5; }
    .area-aviso { order: 1; }

    .home-topo .area-destaques.home-bloco {
        margin-bottom: 0;
    }

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

    .hero-midia img {
        border-radius: var(--raio);
    }

    .hero-texto {
        padding: 14px 0 0;
        background: none;
    }

    .hero-titulo {
        font-size: 26px;
    }

    .hero-resumo {
        font-size: 15px;
    }

    .ultimas {
        padding: 0;
        border: 0;
    }

    .ultimas .item-lista {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .ultimas .item-lista-titulo {
        font-size: 14px;
    }

    .card-resumo {
        display: none;
    }

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

    /* Categorias: 2 linhas com rolagem horizontal */
    .categorias-lista {
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .categoria-item {
        min-height: 44px;
        padding: 10px 14px 10px 12px;
    }

    /* "Acredite se quiser" no celular: o botão ocupa a largura do quadro, alinhado com a
       linha do e-mail + "Inscrever" da newsletter logo abaixo */
    .cta-absurda {
        align-items: stretch;
    }

    .cta-absurda .btn {
        justify-content: center;
    }

    /* Ícone centralizado na altura do título + texto */
    .cta-topo {
        align-items: center;
    }

    /* Ciência, Tecnologia e Variedades no celular: sem o contorno do card, alinhadas com os
       demais blocos (o contorno fica só no tablet e no desktop). O conteúdo não muda. */
    .home-colunas {
        row-gap: 28px;
    }

    .coluna-editoria {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    /* Foto um pouco mais larga (como nos cards de Esportes), sem o selo da categoria */
    .ranking {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .ranking .badge--base {
        display: none;
    }

    /* Esportes no celular: os cards de "Esportes improváveis" viram lista horizontal, no formato
       de "Mais lidas", com foto de 140 px para o selo caber. O card de Futebol fica como está. */
    .esportes-geral .esportes-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .esportes-geral .card {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        border: 1px solid var(--cor-borda);
        border-radius: var(--raio);
        background: #ffffff;
    }

    .esportes-geral .card .card-midia img {
        height: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 0;
    }

    .esportes-geral .card .card-corpo {
        padding: 10px 12px 12px;
    }

    .esportes-geral .card .card-resumo {
        display: -webkit-box;
    }

    .home-com-lateral {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Uma coluna só: o fundo cinza do Brasil vai de uma borda à outra */
    .brasil::before {
        right: -100vw;
        border-radius: 0;
    }

    /* Celular: card grande como os "Em destaque", foto em cima e título/texto logo abaixo */
    .brasil-destaque {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .brasil-texto .metas {
        margin-top: 0;
    }

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

    .rodape-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .rodape-base {
        flex-direction: column;
        gap: 8px;
    }

    .single-post .entry-content {
        font-size: 16px;
    }

    .single-post .entry-content h2 {
        font-size: 22px;
    }

    /* Matéria: citação e imagem lateral deixam de flutuar */
    .post-titulo {
        font-size: 30px;
    }

    .post-subtitulo {
        font-size: 16px;
    }

    .compartilhar {
        margin-left: 0;
    }

    .post-capa-midia img {
        aspect-ratio: 16 / 9;
    }

    .single-post .entry-content .post-citacao,
    .single-post .entry-content .post-imagem-lateral {
        float: none;
        width: auto;
        margin: 18px 0;
    }

    .post-lateral .grade-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .item-lista--grande {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .item-lista--grande .item-lista-titulo {
        font-size: 14px;
    }

    .comentarios-total {
        order: 3;
    }
}

/* -----------------------------------------------------
   18. CELULARES PEQUENOS
   ----------------------------------------------------- */

@media (max-width: 480px) {

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nav-principal {
        margin: 0 -16px;
        padding: 14px 16px;
    }

    .header-inner {
        --logo-largura: 120px;
    }

    .hero-titulo {
        font-size: 24px;
    }

    .hero-rodape .btn {
        flex: 1;
    }

    .grade {
        gap: 10px;
    }

    .card-titulo {
        font-size: 13.5px;
    }

    .secao-titulo {
        font-size: 18px;
    }

    .lista-noticias {
        grid-template-columns: 1fr;
    }

    .post-lateral .grade-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .comment-form .comment-form-comment,
    .comment-form .comment-form-author,
    .comment-form .comment-form-email,
    .comment-form .form-submit {
        grid-column: 1;
        grid-row: auto;
    }

    .comment-form .form-submit {
        order: 10;
    }

    .comment-form .form-submit .btn {
        width: 100%;
    }
}

/* Telefones estreitos: o botão "Todas as Mentiras" do topo vira só "Todas" para caber ao lado do logo e do menu */
@media (max-width: 380px) {
    .btn-topo-todas-resto {
        display: none;
    }
}

/* -----------------------------------------------------
   PÁGINA "SOBRE A MENTIRA" (page-sobre.php)
   ----------------------------------------------------- */

.sobre {
    padding-bottom: 48px;
}

.sobre mark {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--cor-principal);
    color: #ffffff;
    font-weight: 700;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.sobre mark.sobre-texto-vermelho {
    padding: 0;
    background: none;
    color: var(--cor-principal);
}

/* Topo: texto à esquerda, ilustração sangrando até a borda direita */
.sobre-hero {
    overflow: hidden;
    border-bottom: 1px solid var(--cor-borda);
}

.sobre-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}

.sobre-hero-texto {
    position: relative;
    z-index: 1;
    padding: 34px 0 36px;
    font-size: 15.5px;
    line-height: 1.55;
}

.sobre-hero-texto p {
    margin: 0 0 12px;
}

.sobre-hero-texto .sobre-kicker {
    margin: 0 0 2px;
    color: var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 22px;
    font-weight: 800;
}

.sobre-titulo {
    position: relative;
    display: inline-block;
    margin: 0 0 18px;
    padding-right: 48px;
    font-family: var(--font-titulos);
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Tracinhos vermelhos de "destaque" ao lado do título */
.sobre-tracos {
    position: absolute;
    width: 34px;
    height: 34px;
    background:
        linear-gradient(var(--cor-principal), var(--cor-principal)) 0 0 / 6px 18px no-repeat,
        linear-gradient(var(--cor-principal), var(--cor-principal)) 13px 3px / 6px 18px no-repeat,
        linear-gradient(var(--cor-principal), var(--cor-principal)) 26px 10px / 6px 16px no-repeat;
    top: -10px;
    right: 0;
    transform: rotate(30deg);
}

.sobre-destaque {
    margin: 18px 0 0;
    padding: 4px 0 4px 16px;
    border-left: 5px solid var(--cor-principal);
}

.sobre-destaque p {
    margin: 0;
    font-family: var(--font-titulos);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.sobre-hero-arte {
    align-self: center;
    margin: 0 calc((100vw - min(100vw, var(--container))) / -2 - 20px) 0 0;
}

.sobre-hero-arte img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}

/* Missão, visão, valores e aviso */
.sobre-pilares {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
    align-items: start;
}

.sobre-pilar {
    padding: 0 26px;
    border-left: 1px solid var(--cor-borda);
}

.sobre-pilar:first-child {
    padding-left: 0;
    border-left: 0;
}

.sobre-pilares h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--font-titulos);
    font-size: 24px;
    font-weight: 800;
}

.sobre-pilares h2 .icone {
    width: 30px;
    height: 30px;
    color: var(--cor-principal);
}

.sobre-pilares p {
    margin: 0 0 8px;
    line-height: 1.55;
}

.sobre-pilares .sobre-pilar-frase {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 4px solid var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 17px;
    font-weight: 800;
    font-style: italic;
    line-height: 1.3;
}

.sobre-pilar:last-child {
    padding-right: 0;
}

.sobre-valores {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.75;
}

.sobre-valores li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sobre-valores .icone {
    margin-top: 0.4em;
    color: var(--cor-principal);
    stroke-width: 3;
}

/* O que você encontra por aqui */
.sobre-encontra {
    margin-top: 40px;
}

.sobre-secao-titulo {
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 6px solid var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.sobre-encontra-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sobre-encontra-item {
    padding: 18px 16px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.sobre-encontra-item:hover {
    transform: translateY(-2px);
    background: #fff1f1;
    box-shadow: 0 8px 18px rgba(227, 19, 27, 0.1);
}

.sobre-encontra-item .icone {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    color: var(--cor-principal);
}

.sobre-encontra-item h3 {
    margin: 0 0 6px;
    font-family: var(--font-titulos);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.sobre-encontra-item p {
    margin: 0;
    color: var(--cor-secundaria);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Convite final */
.sobre-convite {
    margin-top: 40px;
}

.sobre-convite-caixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--cor-principal), var(--cor-principal-escura));
    color: #ffffff;
}

.sobre-convite h2 {
    margin: 0 0 4px;
    color: #ffffff;
    font-family: var(--font-titulos);
    font-size: 24px;
    font-weight: 900;
}

.sobre-convite p {
    margin: 0;
    opacity: 0.92;
}

.sobre-convite-botoes {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.sobre-convite .btn {
    padding: 11px 18px;
    font-size: 14px;
}

.sobre-btn-contorno {
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

.sobre-btn-contorno:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

@media (max-width: 1180px) {
    .sobre-encontra-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .sobre-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sobre-hero-arte {
        order: -1;
        margin: 0 -20px;
    }

    .sobre-hero-arte img {
        -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 16%);
        mask-image: linear-gradient(0deg, transparent 0, #000 16%);
    }

    .sobre-hero-texto {
        padding-top: 4px;
    }

    .sobre-convite-caixa {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 782px) {
    .sobre-pilares {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sobre-pilar,
    .sobre-pilar:first-child {
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid var(--cor-borda);
    }

    .sobre-pilar:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .sobre-encontra-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sobre-encontra-item {
        padding: 14px;
    }

    .sobre-hero-texto {
        font-size: 15px;
    }

    .sobre-destaque p {
        font-size: 17px;
    }

    .sobre-convite-caixa {
        padding: 22px 20px;
    }

    .sobre-convite-botoes {
        flex-direction: column;
        width: 100%;
    }

    .sobre-convite .btn {
        width: 100%;
    }
}

/* -----------------------------------------------------
   PÁGINA "EQUIPE (QUE NÃO EXISTE)" (page-equipe.php)
   Reaproveita o topo da página Sobre (.sobre-hero)
   ----------------------------------------------------- */

@media (min-width: 961px) {
    .equipe-hero-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    }
}

.equipe .sobre-titulo {
    font-size: clamp(32px, 3.5vw, 46px);
}

.sobre-hero-texto .equipe-kicker {
    padding-left: 12px;
    border-left: 6px solid var(--cor-principal);
    line-height: 1.1;
}

.equipe-quadro {
    margin-top: 32px;
}

.equipe-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 56px 14px; /* espaço em cima para as cabeças que saem do card */
    margin: 0;
    padding: 48px 0 0;
    list-style: none;
}

/* Card em pé: foto no topo (busto recortado, 1:1,22, numa área quadrada) e cargo e texto embaixo */
.equipe-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #f6d4d5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}

.equipe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(227, 19, 27, 0.12);
}

/* Efeito 3D "saindo do card": o personagem (recortado, fundo transparente) fica preso na base
   da área da foto e a cabeça passa por cima da borda de cima do card */
.equipe-foto {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 9px 9px 0 0;
    background: #ffffff;
}

.equipe-foto img {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    /* Largura exata da área da foto: os cortes retos dos lados do corpo coincidem com as bordas do card */
    width: 100%;
    height: auto;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
    clip-path: inset(-60% 0 0 0 round 0); /* só a cabeça passa da borda de cima; lados e base ficam no card */
    transition: transform 0.25s ease;
}

.equipe-card:hover .equipe-foto img {
    transform: translateX(-50%) translateY(-4px);
}

/* Vaga em aberto: silhueta tracejada de pessoa, saindo do card como os outros funcionários */
.equipe-silhueta {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: auto;
    height: 112%;
    overflow: visible;
    transform: translateX(-50%);
    transition: transform 0.25s ease;
}

.equipe-card:hover .equipe-silhueta {
    transform: translateX(-50%) translateY(-4px);
}

.equipe-silhueta path {
    fill: #f1f1f2;
    stroke: #111111;
    stroke-width: 2.6;
    stroke-dasharray: 7 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.equipe-silhueta text {
    fill: #111111;
    font-family: var(--font-titulos);
    font-size: 66px;
    font-weight: 900;
}

.equipe-info {
    position: relative;
    flex: 1;
    padding: 0 16px 16px;
    border-top: 1px solid #f6d4d5;
    background: #ffffff;
    border-radius: 0 0 9px 9px;
}

.equipe-cargo {
    display: inline-block;
    margin: 14px 0 10px;
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--cor-principal);
    box-shadow: 0 3px 8px rgba(227, 19, 27, 0.25);
    color: #ffffff;
    font-family: var(--font-titulos);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}

.equipe-info p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Quer trabalhar com a gente? */
.equipe-vagas {
    margin-top: 32px;
}

.equipe-vagas-caixa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: 20px 32px;
    border-radius: 12px;
    background: #fdecec;
}

.equipe-vagas-caixa h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding-right: 32px;
    border-right: 2px solid var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
}

.equipe-vagas-caixa h2 .icone {
    width: 46px;
    height: 46px;
    color: var(--cor-principal);
}

.equipe-vagas-caixa p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
}

.equipe-aviso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
    color: var(--cor-secundaria);
    font-size: 13.5px;
    font-style: italic;
    text-align: center;
}

.equipe-aviso .icone {
    width: 18px;
    height: 18px;
    color: #6b6f75;
}


/* Tablet: os 5 lado a lado, com cargo e texto menores */
@media (min-width: 783px) and (max-width: 1180px) {
    .equipe-grid {
        gap: 48px 10px;
        padding-top: 36px;
    }

    .equipe-info {
        padding: 0 10px 12px;
    }

    .equipe-cargo {
        margin: 10px 0 8px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .equipe-info p {
        font-size: 12.5px;
        line-height: 1.4;
    }
}

/* Tablet pequeno: 3 em cima e os 2 restantes centralizados embaixo (sem buraco na grade) */
@media (min-width: 601px) and (max-width: 782px) {
    .equipe-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 12px;
    }

    .equipe-card {
        flex: 0 0 calc((100% - 24px) / 3);
    }
}

@media (max-width: 960px) {

    .equipe-vagas-caixa {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .equipe-vagas-caixa h2 {
        padding: 0;
        border: 0;
    }
}

@media (max-width: 600px) {
    .equipe-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* No celular, um por linha: foto à esquerda em 4:5, texto à direita */
    .equipe-card {
        flex-direction: row;
    }

    .equipe-foto {
        flex: 0 0 120px;
        min-height: 130px;
        aspect-ratio: auto;
        border-radius: 9px 0 0 9px;
    }

    .equipe-foto img {
        width: 100%;
        height: auto;
    }

    .equipe-grid {
        gap: 40px;
        padding-top: 32px;
    }

    .equipe-info {
        padding: 14px 14px 14px 12px;
        border-top: 0;
        border-left: 1px solid #f6d4d5;
        border-radius: 0 9px 9px 0;
    }

    .equipe-cargo {
        margin-top: 0;
        box-shadow: none;
    }

    .equipe-silhueta {
        height: auto;
        width: 82%;
    }

    .equipe-vagas-caixa {
        padding: 20px;
    }

    .equipe-vagas-caixa h2 {
        font-size: 22px;
    }

    .equipe-vagas-caixa h2 .icone {
        width: 36px;
        height: 36px;
    }

    .equipe-aviso {
        align-items: flex-start;
        text-align: left;
    }

    .equipe-aviso .icone {
        margin-top: 2px;
    }
}

/* -----------------------------------------------------
   PÁGINA "FALE COM A GENTE" (page-fale-com-a-gente.php)
   Reaproveita o topo da página Sobre (.sobre-hero) e o aviso da Equipe
   ----------------------------------------------------- */

.contato-hero {
    background:
        radial-gradient(circle at 92% 30%, rgba(227, 19, 27, 0.08), transparent 38%),
        var(--cor-fundo-suave-hero);
}

.contato-hero-texto {
    max-width: 780px;
}

/* Títulos que quebram em várias linhas: os traços ficam presos à última palavra
   (e não ao canto da caixa do título), em qualquer largura de tela */
.sobre-titulo--tracos-no-fim {
    display: block;
    padding-right: 50px; /* espaço para os traços não saírem da tela */
}

.sobre-titulo-fim {
    position: relative;
    white-space: nowrap;
}

.sobre-titulo-fim .sobre-tracos {
    top: 0.2em;
    right: -46px;
}

@media (max-width: 600px) {
    .sobre-titulo--tracos-no-fim {
        padding-right: 42px;
    }

    .sobre-titulo-fim .sobre-tracos {
        top: 0.1em;
        right: -42px;
        transform: rotate(30deg) scale(0.75);
    }
}

.contato .sobre-titulo {
    font-size: clamp(32px, 3.6vw, 48px);
}

.contato-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin-top: 32px;
}

.contato-assuntos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contato-assuntos-grid li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.contato-assunto {
    display: block;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    color: var(--cor-texto);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.contato-assunto:hover,
.contato-assunto:focus-visible,
.contato-assunto.is-ativo {
    transform: translateY(-2px);
    border-color: #f6d4d5;
    background: #fff1f1;
    box-shadow: 0 8px 18px rgba(227, 19, 27, 0.1);
    color: var(--cor-texto);
}

.contato-assunto.is-ativo {
    border-color: var(--cor-principal);
}

.contato-assunto .icone {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    color: var(--cor-principal);
}

.contato-assunto h3 {
    margin: 0 0 4px;
    font-family: var(--font-titulos);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.contato-assunto p {
    margin: 0;
    color: var(--cor-secundaria);
    font-size: 13.5px;
    line-height: 1.45;
}

.contato-perguntas {
    margin-top: 28px;
}

.contato-perguntas dl {
    margin: 0;
}

.contato-perguntas dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 2px;
    font-family: var(--font-titulos);
    font-size: 16px;
    font-weight: 800;
}

.contato-perguntas dt:first-child {
    margin-top: 0;
}

.contato-perguntas dt .icone {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--cor-principal);
}

.contato-perguntas dd {
    margin: 0 0 0 28px;
    color: var(--cor-secundaria);
    line-height: 1.5;
}

/* Formulário */
.contato-form-caixa {
    scroll-margin-top: 100px; /* cabeçalho fixo */
    padding: 26px 28px;
    border: 1px solid #f6d4d5;
    border-top: 5px solid var(--cor-principal);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.contato-form-caixa h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-family: var(--font-titulos);
    font-size: 24px;
    font-weight: 900;
}

.contato-form-caixa h2 .icone {
    width: 30px;
    height: 30px;
    color: var(--cor-principal);
}

.contato-campos-duplos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.contato-campo {
    margin: 0 0 14px;
}

.contato-campo label {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
}

.contato-campo input,
.contato-campo select,
.contato-campo textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9dc;
    border-radius: var(--raio);
    background: #ffffff;
    color: var(--cor-texto);
    font-family: var(--font-textos);
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contato-campo textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.5;
}

.contato-campo input:focus,
.contato-campo select:focus,
.contato-campo textarea:focus {
    border-color: var(--cor-principal);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(227, 19, 27, 0.15);
}

/* Campo escondido para pegar robôs */
.contato-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contato-enviar {
    padding: 12px 22px;
    font-size: 15px;
}

.contato-privacidade {
    margin: 10px 0 0;
    color: var(--cor-suave);
    font-size: 12.5px;
}

.contato-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--raio);
    font-size: 14px;
    line-height: 1.45;
}

.contato-status .icone {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.contato-status-ok {
    background: #e9f7ee;
    color: #146c34;
}

.contato-status-erro {
    background: #fdecec;
    color: var(--cor-principal-escura);
}

.contato .equipe-aviso {
    margin-top: 28px;
}

@media (max-width: 960px) {
    .contato-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .contato-hero-texto {
        padding-top: 28px;
    }
}

@media (max-width: 600px) {
    .contato-assuntos-grid,
    .contato-campos-duplos {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .contato-campos-duplos {
        gap: 0;
    }

    .contato-form-caixa {
        padding: 20px 16px;
    }

    .contato-form-caixa h2 {
        font-size: 21px;
    }

    .contato-enviar {
        width: 100%;
    }
}

/* -----------------------------------------------------
   PÁGINA "ANUNCIE (POR QUE NÃO?)" (page-anuncie.php)
   Reaproveita o topo e os cards da página Sobre e as perguntas do Fale com a gente
   ----------------------------------------------------- */

.anuncie-hero {
    background:
        radial-gradient(circle at 85% 40%, rgba(227, 19, 27, 0.08), transparent 40%),
        var(--cor-fundo-suave-hero);
}

.anuncie .sobre-titulo {
    font-size: clamp(32px, 3.6vw, 48px);
}

.anuncie-hero-grid {
    align-items: center;
}

.anuncie-hero-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.anuncie-hero-botoes .btn {
    padding: 12px 20px;
    font-size: 15px;
}

.anuncie-btn-contorno {
    border: 2px solid var(--cor-texto);
    color: var(--cor-texto);
}

.anuncie-btn-contorno:hover {
    background: var(--cor-texto);
    color: #ffffff;
}

/* Prévia de matéria patrocinada, feita em HTML */
.anuncie-previa {
    position: relative;
    margin: 34px 0;
    padding: 24px 26px 20px;
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
    transform: rotate(1.2deg);
}

.anuncie-previa-selos {
    margin-bottom: 12px;
}

.anuncie-previa-titulo {
    margin: 0 0 10px;
    font-family: var(--font-titulos);
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.anuncie-previa-titulo span {
    color: var(--cor-principal);
}

.anuncie-previa-sub {
    margin: 0 0 16px;
    color: var(--cor-secundaria);
    font-size: 14.5px;
    line-height: 1.45;
}

.anuncie-previa-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.anuncie-previa-dados div {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--cor-fundo-suave);
}

.anuncie-previa-dados strong {
    display: block;
    color: var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}

.anuncie-previa-dados span {
    color: var(--cor-secundaria);
    font-size: 12.5px;
}

/* Mesma barra amarela do fim da matéria patrocinada, em tamanho menor */
.anuncie-previa-aviso {
    gap: 10px;
    margin-top: 0;
    padding: 10px 12px;
}

.anuncie-previa-aviso .aviso-satira-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.anuncie-previa-aviso strong {
    font-size: 12px;
    line-height: 1.35;
}

.anuncie-previa-aviso p {
    font-size: 11px;
    line-height: 1.35;
}

.anuncie-previa-aviso a {
    pointer-events: none;
}

.anuncie-previa-nota {
    position: absolute;
    top: -12px;
    right: 18px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--cor-texto);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    transform: rotate(-3deg);
}

.anuncie-secao {
    margin-top: 40px;
}

/* Como funciona: 4 passos numerados */
.anuncie-passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.anuncie-passo {
    position: relative;
    padding: 20px 18px 18px;
    border: 1px solid #f6d4d5;
    border-radius: 10px;
    background: #ffffff;
    counter-increment: passo;
}

.anuncie-passo::before {
    content: counter(passo);
    position: absolute;
    top: 14px;
    right: 16px;
    color: #fbd5d6;
    font-family: var(--font-titulos);
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
}

.anuncie-passo .icone {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    color: var(--cor-principal);
}

.anuncie-passo h3 {
    margin: 0 0 6px;
    font-family: var(--font-titulos);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

.anuncie-passo p {
    margin: 0;
    color: var(--cor-secundaria);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Regras da casa e perguntas, lado a lado */
.anuncie-dupla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    align-items: start;
}

.anuncie-regras ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.anuncie-regras li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.anuncie-regras li .icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--cor-principal);
}

.anuncie-regras strong {
    display: block;
    font-family: var(--font-titulos);
    font-size: 16px;
    font-weight: 800;
}

.anuncie-regras p {
    margin: 2px 0 0;
    color: var(--cor-secundaria);
    line-height: 1.5;
}

.anuncie-dupla .anuncie-perguntas {
    margin-top: 0;
}

.anuncie-exemplos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.anuncie .sobre-convite .equipe-aviso {
    margin-top: 16px;
}

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

@media (max-width: 960px) {
    .anuncie-hero-grid .sobre-hero-texto {
        padding-top: 28px;
        padding-bottom: 8px;
    }

    .anuncie-previa {
        margin: 8px 0 36px;
        transform: none;
    }

    .anuncie-dupla {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 782px) {
    .anuncie-exemplos {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .anuncie-passos {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .anuncie-previa {
        padding: 22px 16px 16px;
    }

    .anuncie-hero-botoes .btn {
        width: 100%;
    }
}

/* -----------------------------------------------------
   PÁGINAS LEGAIS (template-parts/pagina-legal.php)
   Política de sátira, Termos de uso, Política de privacidade e Política de cookies
   ----------------------------------------------------- */

.legal-hero {
    background:
        radial-gradient(circle at 90% 30%, rgba(227, 19, 27, 0.06), transparent 38%),
        var(--cor-fundo-suave-hero);
}

.legal-hero-texto {
    max-width: 820px;
    padding-bottom: 28px;
}

.legal .sobre-titulo {
    margin-bottom: 10px;
    font-size: clamp(32px, 3.6vw, 48px);
}

.legal-hero-texto .legal-atualizacao {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--cor-secundaria);
    font-size: 14px;
}

.legal-atualizacao .icone {
    width: 16px;
    height: 16px;
}

.legal-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 32px;
}

/* Menu lateral: documentos e índice da página, fixo ao rolar */
.legal-lateral {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.legal-nav-titulo {
    margin: 0 0 8px;
    color: var(--cor-suave);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legal-nav ul,
.legal-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--cor-texto);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.legal-nav a .icone {
    width: 18px;
    height: 18px;
    color: var(--cor-suave);
}

.legal-nav a:hover {
    background: var(--cor-fundo-suave);
}

.legal-nav a.is-ativo {
    background: #fdecec;
    color: var(--cor-principal-escura);
}

.legal-nav a.is-ativo .icone {
    color: var(--cor-principal);
}

.legal-indice ol {
    border-left: 2px solid var(--cor-borda);
}

.legal-indice a {
    display: block;
    margin-left: -2px;
    padding: 5px 0 5px 14px;
    border-left: 2px solid transparent;
    color: var(--cor-secundaria);
    font-size: 13.5px;
    line-height: 1.35;
    text-decoration: none;
}

.legal-indice a:hover {
    border-left-color: var(--cor-principal);
    color: var(--cor-texto);
}

/* Texto */
.legal-texto {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.7;
}

.legal-resumo {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border-left: 5px solid var(--cor-principal);
    border-radius: 10px;
    background: #fdecec;
}

.legal-resumo .icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    color: var(--cor-principal);
}

.legal-resumo p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
}

.legal-texto .legal-abertura {
    font-size: 17px;
}

.legal-texto h2 {
    scroll-margin-top: 100px;
    margin: 36px 0 10px;
    padding-left: 12px;
    border-left: 5px solid var(--cor-principal);
    font-family: var(--font-titulos);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.legal-texto h3 {
    margin: 22px 0 6px;
    font-family: var(--font-titulos);
    font-size: 17px;
    font-weight: 800;
}

.legal-texto p {
    margin: 0 0 14px;
}

.legal-texto ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.legal-texto li {
    margin-bottom: 6px;
}

.legal-texto li::marker {
    color: var(--cor-principal);
}

.legal-texto a {
    color: var(--cor-principal-escura);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-texto a.btn {
    color: #ffffff;
    text-decoration: none;
}

.legal-texto code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cor-fundo-suave);
    font-size: 13px;
    white-space: nowrap;
}

.legal-tabela-rolagem {
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
}

.legal-tabela {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}

.legal-tabela th,
.legal-tabela td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    vertical-align: top;
}

.legal-tabela th {
    background: var(--cor-fundo-suave);
    font-weight: 700;
}

.legal-tabela tr:last-child td {
    border-bottom: 0;
}

.legal-duvidas {
    margin-top: 40px;
    padding: 22px 24px;
    border-radius: 12px;
    background: var(--cor-fundo-suave);
}

.legal-texto .legal-duvidas h2 {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    font-size: 21px;
}

.legal-duvidas p {
    color: var(--cor-secundaria);
}

@media (max-width: 960px) {
    .legal-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .legal-lateral {
        position: static;
    }

    /* No celular: documentos em "pílulas" com rolagem; o índice fica escondido */
    .legal-nav ul {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .legal-nav a {
        border: 1px solid var(--cor-borda);
        border-radius: 999px;
        white-space: nowrap;
    }

    .legal-indice {
        display: none;
    }

    .legal-texto {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .legal-texto {
        font-size: 15.5px;
    }

    .legal-texto h2 {
        font-size: 20px;
    }

    .legal-duvidas .btn {
        width: 100%;
    }
}

/* -----------------------------------------------------
   PÁGINA NÃO ENCONTRADA (404.php)
   Reaproveita o topo da página Sobre e os cards do site
   ----------------------------------------------------- */

.erro-hero {
    background:
        radial-gradient(circle at 82% 45%, rgba(227, 19, 27, 0.09), transparent 42%),
        var(--cor-fundo-suave-hero);
}

.erro-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 32px;
    align-items: center;
}

.pagina-404 .sobre-titulo {
    font-size: clamp(32px, 3.6vw, 48px);
}

.pagina-404 .sobre-hero-texto {
    padding-bottom: 40px;
}

/* "404" grande, com o 0 vermelho e inclinado (o "i" da marca) */
.erro-numero {
    margin: 0;
    color: var(--cor-texto);
    font-family: var(--font-titulos);
    font-size: clamp(110px, 15vw, 220px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    user-select: none;
}

.erro-numero span {
    display: inline-block;
    color: var(--cor-principal);
    transform: rotate(-12deg) translateY(-4%);
}

.erro-busca {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin-top: 22px;
}

.erro-busca-campo {
    position: relative;
    flex: 1;
}

.erro-busca-campo .icone {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--cor-suave);
    transform: translateY(-50%);
    pointer-events: none;
}

.erro-busca-campo input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid #d9d9dc;
    border-radius: var(--raio);
    background: #ffffff;
    font-family: var(--font-textos);
    font-size: 15px;
}

.erro-busca-campo input:focus {
    border-color: var(--cor-principal);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(227, 19, 27, 0.15);
}

.erro-busca .btn {
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
}

.erro-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.erro-btn-contorno {
    padding: 10px 16px;
    border: 1.5px solid var(--cor-borda);
    background: #ffffff;
    color: var(--cor-texto);
    font-size: 14px;
}

.erro-btn-contorno .icone {
    color: var(--cor-principal);
}

.erro-btn-contorno:hover {
    border-color: var(--cor-principal);
    color: var(--cor-texto);
}

.erro-secao {
    margin-top: 36px;
}

/* Editorias em "pílulas" com o ícone de cada uma */
.erro-editorias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.erro-editorias a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    background: #ffffff;
    color: var(--cor-texto);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.erro-editorias a .icone {
    width: 18px;
    height: 18px;
    color: var(--cor-principal);
}

.erro-editorias a:hover {
    border-color: #f6d4d5;
    background: #fff1f1;
}

@media (max-width: 960px) {
    .erro-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .erro-numero {
        order: -1;
        padding-top: 24px;
        font-size: 110px;
        text-align: left;
    }

    .pagina-404 .sobre-hero-texto {
        padding-top: 8px;
    }
}

@media (max-width: 600px) {
    .erro-busca {
        flex-direction: column;
    }

    .erro-botoes .btn {
        flex: 1 1 100%;
    }
}