/*
 * Base - cabecalho, rodape, barra lateral e componentes usados em varias telas
 * Carrega em: todas as paginas (ver inc/assets.php).
 */

/* 1. Reset & Base Variables */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /*
     * --font-primary: corpo de texto.
     * --font-heading: interface e rotulos (menu, chapeu, botao, tabela de
     *   dados) — apesar do nome, e a sans, e e assim que o site usa.
     * --font-serif: MANCHETE. E a unica serifada do portal; e o contraste
     *   entre ela e a sans que faz o conjunto ler como jornal em vez de
     *   interface de produto.
     */
    --font-primary: "Google Sans", sans-serif;
    --font-heading: "Google Sans", sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    /*
     * Cor da marca. Token proprio, e nao --cor-primaria: aquele e o acento da
     * interface, que a franquia troca por praca. A logo e identidade — se ela
     * seguisse o acento, mudar a cor dos botoes repintaria a marca do jornal.
     */
    --marca-acento: #c0261c;
    --color-text: #444;
    --color-bg: #ffffff;
    --color-border: #eaeaea;

    /*
     * Padrao visual de imagem: aplicado nas thumbs de noticia, guia
     * comercial, videos e fotos de conteudo em geral. Fotos de pessoa
     * (vereador, colunista, obituario) continuam redondas e fora deste
     * padrao; luto e a revelacao de cor do vereador tambem ficam com o
     * proprio efeito, de proposito.
     */
    --ct-img-radius: 8px;
    --ct-img-hover-filtro: brightness(1.08);
    --ct-img-hover-duracao: .6s;
}

body, button, input, select, textarea {
    font-family: "Google Sans", sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: var(--cor-primaria, #2271b1);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cor-secundaria, #d63638);
}

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

/* Imagens em Destaque & Post Thumbnails Globais (Index, Single, Pages) */
.wp-post-image,
.attachment-post-thumbnail,
.attachment-large,
.attachment-medium_large,
.attachment-medium,
.attachment-thumbnail,
.ct-single-thumb img,
.ct-post-content img,
.ct-cat-feat-img,
.ct-cat-feat-img img,
.ccgi-img-wrap,
.ccgi-img-wrap img,
.bmf-image,
.bmf-image img,
.bmr-image-wrap,
.bmr-image-wrap img,
.bsh-top,
.bsh-top img,
.cgc-img,
.cgc-img img,
.cgc-img-horiz,
.cgc-img-horiz img,
.bcb-main-post img,
.bcb-list-item img,
.ct-acomodacao-card,
.ct-acomodacao-card img,
.ct-video-thumb,
.ct-video-thumb img,
.ct-colunista-avatar img {
    border-radius: var(--ct-img-radius);
}

ul {
    list-style: none;
}

/* Texto so para leitor de tela e buscadores (ex.: <h1> da capa). */
.ct-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 2. Wrapper & Utilities */
.ct-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 36px;
}

/* Links da faixa de categorias (ct-header-nav-utils, header.php): Anuncie e Entrar/Painel.
   A antiga faixa de servico (.ct-top-bar) e a lista de utilidades ao lado do Anuncie foram removidas;
   o menu do topo e a barra fina (inc/barra-topo.php) se montam em Aparencia > Menus. */
/* Links Limpos sem Badge (Anuncie & Painel/Entrar) */
.ct-top-clean-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    transition: color 0.2s ease;
}

.ct-top-clean-link i {
    font-size: 12px;
    color: #64748b;
    transition: color 0.2s ease;
}

.ct-top-clean-link:hover {
    color: var(--cat-cor, var(--cor-primaria, #008a20));
}

.ct-top-clean-link:hover i {
    color: var(--cat-cor, var(--cor-primaria, #008a20));
}

/* "Redação" (header.php, só administrador): menu que abre ao passar o mouse ou ao focar pelo teclado */
.ct-redacao-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ct-redacao-wrap .ct-redacao-seta {
    font-size: 8px;
    margin-left: 1px;
}
.ct-redacao-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 208px;
    padding: 6px;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1001;
}
/* Ponte invisível: o mouse não "cai no vazio" entre o link e o menu */
.ct-redacao-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.ct-redacao-wrap:hover .ct-redacao-menu,
.ct-redacao-wrap:focus-within .ct-redacao-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ct-redacao-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    white-space: nowrap;
}
.ct-redacao-menu a i {
    width: 16px;
    text-align: center;
    color: #64748b;
}
.ct-redacao-menu a:hover,
.ct-redacao-menu a:focus-visible {
    background: #f1f5f9;
    color: var(--cat-cor, var(--cor-primaria, #008a20));
}
.ct-redacao-menu a:hover i,
.ct-redacao-menu a:focus-visible i {
    color: var(--cat-cor, var(--cor-primaria, #008a20));
}

/* ==========================================================================
   HEADER
   Marca, navegacao e busca numa faixa so. A faixa de servico separada
   (data/cidade/redes/Entrar, empilhada acima desta) foi removida — o que
   tinha funcao de verdade se mudou pra dentro da faixa de categorias
   (ct-header-nav-utils), o resto ja vive no rodape.
   ========================================================================== */

.ct-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    transition: box-shadow .22s ease, transform .28s ease;
}

/* Esconde a faixa ao descer a leitura, devolve ao primeiro sinal de subida
   (igual ao header do globo.com) — sticky continua ativo, só desliza pra
   fora da tela em vez de sumir/aparecer sem transição. */
.ct-header.is-oculta {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    /* Some a transicao E o proprio esconder: um header que some/aparece na
       marra é o tipo de movimento brusco que esta preferencia pede pra
       evitar, nao so a suavidade do deslize. Fica sticky e visivel, como
       era antes desta funcionalidade existir. */
    .ct-header {
        transition: box-shadow .22s ease;
    }
    .ct-header.is-oculta {
        transform: none;
    }
}

/*
 * Hamburguer (gaveta de utilidades) de um lado, busca + convite pro canal
 * do outro, sempre flanqueando a logo. Grid 1fr/auto/1fr, e nao flex: o
 * lado direito cresceu (busca + pill "Participe") e ficou bem mais largo
 * que o hamburguer sozinho a esquerda — com flex simples a marca centralizava
 * dentro do espaco QUE SOBRAVA entre os dois grupos, e como os grupos sao
 * desiguais isso empurrava a marca pro lado mais leve (o esquerdo) em vez
 * de centralizar no container inteiro. No grid as duas colunas laterais
 * valem o mesmo (a mais larga das duas), entao a marca fica no centro
 * OTICO da faixa nos dois casos.
 */
.ct-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: 94px;
    transition: height .22s ease;
}

.ct-header-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Título do evento ao lado da logo (LOGO | Eleições 2026), separado por uma barra fina.
   Só existe nas páginas do evento (inc/selo-cabecalho.php no plugin).

   Fala com a mesma voz da marca ("Correio", .ct-marca): a serifada das manchetes em
   peso 800, tracking apertado, a mesma tinta. O ano ou a idade faz o papel do
   "Santamariense": caixa-alta espaçada, no canto inferior do título, no vermelho da
   marca, com um fio fino puxando do título até ele. --selo-corpo é o corpo do título;
   o resto é proporcional, como na marca. */
.ct-header-selo {
    --selo-corpo: 40px;

    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin-left: 22px;
    padding-left: 22px;
    color: #17191d;
    line-height: 1;
    text-decoration: none;
}
/* Títulos longos ("Santa Maria do Pará") encolhem para não empurrar a logo. */
.ct-header-selo--medio { --selo-corpo: 30px; }
.ct-header-selo--longo { --selo-corpo: 24px; }

/* A barra fina que separa da logo, na altura do conjunto. */
.ct-header-selo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: calc(var(--selo-corpo) * 1.5);
    transform: translateY(-50%);
    background: #cfd4da;
}
.ct-header-selo-titulo {
    display: block;
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--selo-corpo);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: .92;
    white-space: nowrap;
    color: #17191d;
    transition: color .15s ease;
}
.ct-header-selo-complemento {
    display: flex;
    align-items: center;
    gap: 10px;
    /* o espaçamento depois da última letra empurrava o ano para dentro: compensa para alinhar na borda do título */
    margin: calc(var(--selo-corpo) * .14) -.34em 0 0;
    font-family: var(--font-primary, sans-serif);
    font-size: max(9px, calc(var(--selo-corpo) * .27));
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--marca-acento, #c0261c);
    white-space: nowrap;
}
/* O fio que puxa até o ano é uma barra com as cores da bandeira do Brasil (verde, amarelo e azul). */
.ct-header-selo-complemento::before {
    content: "";
    flex: 1 1 auto;
    height: 3px;
    background: linear-gradient(90deg,
        #009c3b 0 33.34%,
        #ffdf00 33.34% 66.67%,
        #002776 66.67% 100%);
}
.ct-header-selo:hover .ct-header-selo-titulo,
.ct-header-selo:focus-visible .ct-header-selo-titulo { color: var(--marca-acento, #c0261c); }
.ct-header-selo:focus-visible {
    outline: 2px solid var(--marca-acento, #c0261c);
    outline-offset: 4px;
}

/* Tablet: a marca ainda é grande e a faixa estreita. */
@media (max-width: 992px) {
    .ct-header-selo { --selo-corpo: 30px; margin-left: 16px; padding-left: 16px; }
    .ct-header-selo--medio { --selo-corpo: 24px; }
    .ct-header-selo--longo { --selo-corpo: 20px; }
}

/* Celular: a faixa da marca já está cheia (menu, logo, Participe, busca): o título desce
   para uma linha própria, abaixo da logo, centralizado, e o ano ou a idade vai numa
   linha só dele, também centralizada, entre dois fios finos. */
@media (max-width: 640px) {
    .ct-header-brand:has(.ct-header-selo) {
        flex-direction: column;
        gap: 3px;
    }
    /* A fileira tem altura fixa; com a linha do título ela cresce o que precisar. */
    .ct-header-row:has(.ct-header-selo),
    .ct-header.is-condensada .ct-header-row:has(.ct-header-selo) {
        height: auto;
        min-height: 56px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .ct-header-selo,
    .ct-header-selo--medio,
    .ct-header-selo--longo {
        --selo-corpo: 19px;
        align-items: center;
        gap: 4px;
        margin-left: 0;
        padding-left: 0;
    }
    .ct-header-selo--longo { --selo-corpo: 16px; }
    .ct-header-selo::before { display: none; }
    .ct-header-selo-titulo { text-align: center; }
    .ct-header-selo-complemento {
        justify-content: center;
        gap: 8px;
        margin: 0;
        font-size: 9px;
        letter-spacing: .24em;
    }
    .ct-header-selo-complemento::before,
    .ct-header-selo-complemento::after {
        content: "";
        flex: 0 0 22px;
        height: 3px;
        background: linear-gradient(90deg, #009c3b 0 33.34%, #ffdf00 33.34% 66.67%, #002776 66.67% 100%);
    }
}

/* Busca + convite pro canal, agrupados do lado direito da marca — gap menor
   entre os dois do que o resto da fileira, pra ler como um par. Fica na
   PONTA direita da coluna (justify-self), nao no meio dela. */
.ct-header-acoes {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    flex-shrink: 0;
}

/* Estado condensado: ao rolar, a faixa encolhe e a marca encolhe junto, em
   vez de a identidade do portal sumir da tela. */
.ct-header.is-condensada {
    box-shadow: 0 2px 14px rgba(15, 23, 42, .09);
}

/* Rolando, a faixa encolhe — mas 56px espremiam a marca reduzida contra as
   bordas; 64 mantem a folga proporcional sem devolver a altura toda. */
.ct-header.is-condensada .ct-header-row {
    height: 64px;
}

/* Banner do topo: fora da faixa da marca, onde custava 90px na regiao que
   agora gruda. Largura total rende mais que o formato espremido ao lado da
   logo. */
.ct-header-banner {
    background: transparent;
    border-bottom: 0;
    padding: 32px 0 10px 0;
}

/*
 * O formato oficial do banner do topo tem a largura util do .ct-container
 * (1320px de max-width menos 36px de respiro de cada lado = 1248px,
 * banner-positions.php), a mesma que o resto da pagina usa. Por isso NAO ha
 * override de padding aqui: um criativo mais largo que a grade de noticias
 * logo abaixo deixaria uma emenda visivel entre as duas faixas.
 */
.ct-header-banner:empty {
    display: none;
}

.ct-header-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Trilha de navegacao das paginas internas */
.ct-breadcrumb-wrap {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ct-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    height: 38px;
    font-size: 13px;
    color: #64748b;
}

.ct-breadcrumb a {
    color: var(--cor-primaria, #2271b1);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ct-breadcrumb a:hover {
    text-decoration: underline;
}

.ct-bc-sep {
    margin: 0 8px;
    color: #cbd5e1;
}

.ct-bc-atual {
    font-weight: 700;
    color: #0f172a;
}

/* 992px e o breakpoint que o tema ja usa em .ct-desktop-only / .ct-mobile-only.
   Usar outro numero aqui deixava a faixa em modo desktop entre 768 e 992,
   justamente onde o menu ja tinha sido escondido e o hamburguer aparecido. */
@media (max-width: 992px) {
    .ct-header-row {
        height: 56px;
        gap: 12px;
    }
    .ct-header.is-condensada .ct-header-row {
        height: 56px;
    }
    /* No celular o topo so aparece quando ha anunciante (criativo proprio de
       360x80): o espaco livre ("Anuncie aqui") custaria um pedaco da dobra,
       antes da primeira manchete, sem render nada. */
    .ct-header-banner:has(.ct-ad-vazio) {
        display: none;
    }
}

.ct-logo img {
    max-height: 62px;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

.ct-logo img:hover {
    transform: scale(1.02);
}

.ct-logo h1 {
    margin: 0;
    line-height: 1.1;
}

.ct-logo h1 a {
    color: #0f172a;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-size: 32px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   MARCA — Portal Correio Santamariense

   "Portal" mora no vao que as letras baixas (o-r-r-e) deixam entre o "C" e o
   "i" de Correio. O espaco ja estava vazio; agora trabalha, e a palavra nao
   gasta uma linha propria.

   AJUSTE DO ENCAIXE: sao dois numeros, em --encaixe-x e --encaixe-y logo
   abaixo. Estao em "em", entao seguem o corpo do nome — a marca encolhe no
   cabecalho e cresce no rodape sem desalinhar. Em px, cada tamanho pediria um
   acerto na mao.
   ========================================================================== */
.ct-marca {
    --encaixe-x: .70;     /* multiplicador do corpo: onde termina o "C"    */
    --encaixe-y: .14;     /* multiplicador do corpo: altura dentro do vao   */
    --marca-corpo: 52px;  /* corpo do nome; tudo mais e proporcional a ele  */

    display: inline-flex;
    flex-direction: column;
    align-items: center;   /* nome e assinatura centralizados um sobre o outro */
    line-height: 1;
    text-decoration: none;
}

.ct-marca-nome {
    position: relative;   /* o palco do encaixe */
    display: block;
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--marca-corpo);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: .92;
    color: #17191d;
}

.ct-marca-portal {
    position: absolute;
    /*
     * calc sobre --marca-corpo, e nao "em" direto: em resolve contra a fonte
     * do PROPRIO elemento, que aqui e minuscula (.135em) — o "Portal" acabava
     * a 3px da borda, em cima do "C", em vez de depois dele.
     */
    left: calc(var(--marca-corpo) * var(--encaixe-x));
    top: calc(var(--marca-corpo) * var(--encaixe-y));
    font-family: var(--font-primary, sans-serif);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .34em;
    line-height: 1;
    color: var(--marca-acento, #c0261c);
    white-space: nowrap;
}

.ct-marca-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    width: 100%;   /* = largura do bloco mais largo da marca */
    margin-top: 7px;
}

/*
 * Um circulo em cada ponta. Nao sao enfeite: com justify-content:space-between
 * eles ancoram nas duas extremidades e fecham a largura da assinatura na
 * largura do nome — e o que trava o alinhamento das duas linhas, em vez de
 * deixar uma flutuando sobre a outra.
 */
.ct-marca-linha::before,
.ct-marca-linha::after {
    content: "";
    width: var(--marca-ponto, 4px);
    height: var(--marca-ponto, 4px);
    border-radius: 50%;
    background: var(--marca-acento, #c0261c);
    flex-shrink: 0;
    margin-top: -7px;
}

.ct-marca-gentilico {
    font-family: var(--font-primary, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: #666e78;
    white-space: nowrap;
    margin: -6px -5px 0 -5px;
}

/* Rodape escuro: nome inverte, vermelho clareia para nao sumir no quase preto. */
.ct-marca--escura .ct-marca-nome { color: #ffffff; }

.ct-marca--escura .ct-marca-gentilico { color: #9aa3ad; }

.ct-marca--escura .ct-marca-portal { color: #f2604f; }

.ct-marca--escura .ct-marca-linha::before,
.ct-marca--escura .ct-marca-linha::after { background: #f2604f; }

@media (max-width: 640px) {
    /*
     * "Correio" encolhia mais que "Santamariense" nesta faixa (52px -> 24px,
     * 46% do tamanho; o gentílico só ia a 68%) — com tanto letter-spacing
     * no gentílico, ele chegava a ficar MAIS LARGO que o nome (94px contra
     * 80px, medido no celular), invertendo qual palavra domina a marca.
     */
    .ct-marca { --marca-corpo: 30px; }
    .ct-marca-gentilico { font-size: 10px; letter-spacing: .14em; }
    .ct-marca-linha { margin-top: 5px; }
    .ct-marca { --marca-ponto: 4px; }
    .ct-marca-portal{top: 3px; left: 30px;}
    .ct-marca-nome{font-size: 40px;}
}

.ct-brand-slogan {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    margin-top: 6px;
    letter-spacing: -0.2px;
}

/* 4. Barra de Navegação Horizontal
   Faixa de categorias abaixo da marca — linha unica centralizada no PC,
   rolagem lateral no celular (>= 992px muda o comportamento, mesmo corte que
   o tema ja usa em .ct-desktop-only/.ct-mobile-only). */
.ct-header-nav-strip {
    position: relative;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
}

.ct-header-nav-strip-inner {
    display: flex;
    align-items: center;
}

/* A rolagem lateral fica so no miolo do menu (abaixo), nao nesta faixa
   inteira — assim "Anuncie"/"Entrar" nunca saem da tela, e o dropdown
   "Entrar" (que abre pra baixo, ultrapassando a faixa) nao fica cortado por
   um overflow:auto que corta em y por tabela junto com o x. */
.ct-header-nav-menu-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ct-header-nav-menu-scroll::-webkit-scrollbar {
    display: none;
}

/* Utilidades que antes viviam na faixa de servico separada (.ct-top-bar,
   removida): links de utilidades, Anuncie e Entrar, encostados na ponta
   direita da faixa de categorias. So no desktop — no celular a faixa de
   categorias ja e estreita (rolagem lateral) e isso tudo mora na gaveta. */
.ct-header-nav-utils {
    display: none;
}

@media (min-width: 993px) {
    .ct-header-nav-utils {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-left: 20px;
        flex-shrink: 0;
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    /* No celular os links do topo ficam na gaveta, mas o painel de conta
       (aberto por "Entrar" da gaveta ou pelos CTAs de paywall/cupom) continua
       dentro desta faixa: ela vira um contêiner sem altura e o painel aparece
       como uma folha fixa, sob o cabeçalho. */
    .ct-header-nav-utils {
        display: block;
        height: 0;
        margin: 0;
        overflow: visible;
    }
    .ct-header-nav-utils > a,
    .ct-header-nav-utils .ct-redacao-wrap,
    .ct-header-nav-utils .ct-conta-wrap > a {
        display: none;
    }
    .ct-header-nav-utils .ct-conta-wrap {
        position: static;
    }
    .ct-header-nav-utils .ct-conta-dropdown {
        position: fixed;
        top: 72px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sinaliza que a faixa continua pra direita — sem isto nada indica que
       da pra arrastar, e os ultimos itens (Cultura & Lazer, Social) ficam
       escondidos sem nenhuma pista. */
    .ct-header-nav-strip::after {
        content: '';
        position: absolute;
        top: 1px;
        right: 0;
        bottom: 0;
        width: 28px;
        background: linear-gradient(to right, transparent, #ffffff);
        pointer-events: none;
    }

    /* Seta clicavel na ponta direita: rola o menu pra esquerda (mostra os
       proximos itens). Some sozinha quando chega ao fim (atributo hidden). */
    .ct-nav-seta {
        position: absolute;
        top: 1px;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 40px;
        border: 0;
        cursor: pointer;
        color: #334155;
        font-size: 14px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 45%);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 10px 0 0;
    }
    .ct-nav-seta[hidden] {
        display: none;
    }
    .ct-header-nav-strip:has(.ct-nav-seta:not([hidden]))::after {
        display: none;
    }
}

@media (min-width: 993px) {
    .ct-nav-seta {
        display: none;
    }
}

/*
 * Encostado a esquerda, nao centralizado: desde que a faixa passou a dividir
 * espaco com o ct-header-nav-utils (a direita), centralizar so dentro da
 * fatia que sobra pro menu descentralizava ele em relacao a pagina — parecia
 * torto, nao centralizado de verdade. Mesmo alinhamento que o mobile ja usava.
 */
.ct-main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    height: 46px;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: max-content;
}

/* Menu cheio (10 itens ou mais): no computador o espaço entre os itens encolhe com a largura da tela,
   para o último item não ficar cortado. Com menos itens nada muda. */
@media (min-width: 993px) {
    .ct-main-menu:has(> li:nth-child(10)) {
        gap: clamp(10px, 0.95vw, 20px);
    }
    /* Letra e seta um pouco menores: 11 itens com submenus precisam caber sem cortar o último. */
    .ct-main-menu:has(> li:nth-child(10)) > li > a {
        font-size: 13.5px;
    }
    .ct-main-menu:has(> li:nth-child(10)) .ct-menu-toggle {
        padding: 4px 0 4px 4px;
        margin-left: -3px;
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    .ct-main-menu {
        gap: 20px;
        height: 42px;
        padding: 0 16px;
    }
}

.ct-main-menu > li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    /* Sem isto o flex encolhia os itens de dois nomes ("Economia Local",
       "Cultura & Lazer") ate a palavra quebrar — os de um nome so nao
       tinham onde quebrar e ficavam do tamanho normal, entao so esses dois
       ganhavam uma segunda linha e saiam mais baixos que o resto do menu. */
    flex-shrink: 0;
}

.ct-main-menu > li > a {
    display: flex;
    align-items: center;
    color: #1e293b;
    font-weight: 700;
    font-size: 14.5px;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    padding: 0 2px;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
    height: 100%;
    white-space: nowrap;
}

.ct-main-menu > li > a:hover {
    color: var(--cat-cor, var(--cor-primaria, #4f7c25));
}

/* Sem bolinha separando os itens: o espaco (gap) ja separa, e a bolinha disputava a atencao com a
   seta dos itens que tem submenu (.ct-menu-toggle, abaixo). */

/* Item Ativo */
.ct-main-menu li.current-menu-item > a,
.ct-main-menu li.current-post-ancestor > a {
    color: var(--cor-primaria, #4f7c25);
}

.ct-main-menu li.current-menu-item::after,
.ct-main-menu li.current-post-ancestor::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--cor-primaria, #4f7c25);
}

/* Botao que abre o dropdown — separado do link, que continua indo direto
   pra categoria. Sem isto, clicar no nome do item e abrir o submenu seriam
   a mesma acao, e uma delas perderia o sentido. */
.ct-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px 2px 4px 6px;
    margin-left: -2px;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.ct-menu-toggle i {
    transition: transform 0.2s ease;
}

.ct-menu-toggle:hover {
    color: var(--cor-primaria, #4f7c25);
}

.ct-tem-submenu.ct-submenu-aberto .ct-menu-toggle {
    color: var(--cor-primaria, #4f7c25);
}

.ct-tem-submenu.ct-submenu-aberto .ct-menu-toggle i {
    transform: rotate(180deg);
}

/* Dropdown Submenu — abre ao CLICAR no .ct-menu-toggle (geral.js), nao ao
   passar o mouse: hover nao existe em tela de toque. */
.ct-main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 200px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* So opacidade e deslocamento: com "all" o top/left que o JS poe ao abrir tambem animavam, e na
       primeira abertura o dropdown vinha do canto da tela (0,0) ate o lugar. */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
}

.ct-tem-submenu.ct-submenu-aberto > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Computador: a faixa do menu rola de lado (overflow) e CORTAVA o dropdown ancorado no item (a seta
   girava e a lista nao aparecia). Fixo na tela escapa do corte; geral.js poe o top e o left ao abrir. */
@media (min-width: 993px) {
    .ct-main-menu .sub-menu {
        position: fixed;
        top: 0;
        left: 0;
    }
    /* Ponte invisivel acima da lista: o ponteiro que desce do item para a lista passa por aqui sem
       "sair" do item (a lista e filha do item), entao o submenu nao fecha no meio do caminho. */
    .ct-main-menu .sub-menu::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }
}

@media (max-width: 992px) {
    /* No celular a faixa rola de lado: um dropdown ancorado no item some pra
       fora da tela se o item estiver perto da borda. Vira painel de largura
       total, preso na faixa (.ct-header-nav-strip, position:relative) em vez
       do item — por isso o <li> perde o position:relative aqui, senao o
       .sub-menu absolute continuaria ancorando nele. */
    .ct-main-menu > li.ct-tem-submenu {
        position: static;
    }
    .ct-main-menu .sub-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        min-width: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.ct-main-menu .sub-menu li {
    display: block;
    width: 100%;
}

.ct-main-menu .sub-menu li a {
    display: block;
    padding: 8px 16px;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ct-main-menu .sub-menu li a:hover {
    background: #f8fafc;
    color: var(--cat-cor, var(--cor-primaria, #4f7c25));
}

.ct-hamburger {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #0f172a;
    padding: 6px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    flex-shrink: 0;
    /* Ponta esquerda da coluna do grid, nao esticado pra largura toda dela
       (a coluna agora vale o mesmo que a direita, mais larga por causa do
       pill "Participe" + busca). */
    justify-self: start;
}

.ct-hamburger:hover {
    color: var(--cat-cor, var(--cor-primaria, #4f7c25));
}

.ct-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    cursor: pointer;
    color: #334155;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ct-icon-btn:hover {
    color: #ffffff;
    background: var(--cor-primaria, #4f7c25);
    border-color: var(--cat-cor, var(--cor-primaria, #4f7c25));
}

/* Convite pro canal/grupo — banner pequeno (icone + texto), nao um botao de
   icone igual aos outros: e a unica acao de crescimento no meio de botoes
   utilitarios (busca, menu), entao pede um pouco mais de destaque e um
   texto que diga o que faz, em vez de so um icone generico. Verde do
   WhatsApp/Telegram de proposito, nao a cor da franquia — sinaliza de
   longe que e uma acao daquele app especifico. */
.ct-header-canal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.ct-header-canal i {
    font-size: 15px;
}

.ct-header-canal:hover {
    background: #1da851;
    color: #ffffff;
}

@media (max-width: 480px) {
    /* Gaveta, logo, banner e busca, todos numa fileira so — o rotulo some
       primeiro que tudo, sobrando so o icone dentro do pill verde. */
    .ct-header-canal span {
        display: none;
    }
    .ct-header-canal {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
}

/* 4.1 Dropdown de Busca Suave (Header Slide-Down) */
.ct-nav-search-dropdown {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.35s ease;
}

.ct-nav-search-dropdown.active {
    max-height: 80px;
    opacity: 1;
    overflow: visible;
    border-bottom: 2px solid var(--cor-primaria, #4f7c25);
}

.ct-nav-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
}

/* Campo e botao de enviar num so bloco: o botao fica encaixado dentro do
   campo, em vez de um icone decorativo repetindo o mesmo desenho do botao
   ao lado — eram duas lupas na mesma linha e, no celular, cortavam o
   placeholder no meio da palavra. */
.ct-nsearch-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.ct-nsearch-input {
    width: 100%;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 130px 10px 16px;
    /* 16px, nao 14.5 — abaixo disso o iOS/Safari da zoom automatico ao
       tocar no campo (deixar o texto legivel) e às vezes nao volta sozinho
       ao normal depois, deixando a pagina toda "presa" no zoom (o menu, que
       e fixo, parece continuar normal, so o conteudo abaixo fica grande —
       exatamente o sintoma relatado). */
    font-size: 16px;
    font-family: var(--font-primary, "Google Sans", sans-serif);
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.ct-nsearch-input:focus {
    border-color: var(--cor-primaria, #4f7c25);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 124, 37, 0.15);
}

.ct-nsearch-submit {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cor-primaria, #4f7c25);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.ct-nsearch-submit:hover {
    background: #3e621d;
}

@media (max-width: 768px) {
    .ct-nav-center {
        display: none;
    }
    .ct-nsearch-submit span {
        display: none;
    }
    .ct-nsearch-submit {
        padding: 0;
        width: 34px;
        justify-content: center;
    }
    .ct-nsearch-input {
        padding-right: 46px;
    }
}

/* 6. Layout Grid (Corpo do Site) */
.ct-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: start;
    background: transparent;
    margin-top: 23px;
    box-shadow: none;
}

.ct-main-grid > main {
    min-width: 0;
    width: 100%;
}

@media (max-width: 992px) {
    .ct-main-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    /* O override de largura da .ct-sidebar mora la embaixo, perto da regra
       "STICKY SIDEBAR" (widht:300px) — colocado ali de proposito: como as
       duas tem a mesma especificidade (uma classe so), quem vem DEPOIS no
       arquivo ganha, media query ou nao. Aqui em cima ela seria sempre
       derrubada pela regra de 300px que vem centenas de linhas abaixo. */
}

/* ==========================================================================
   Detalhes do Segmento (Single Empresa)
   ========================================================================== */


/* 7. Section Titles (Bopea Signature) */
.bopea-section-title {
    position: relative;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 800;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 30px;
    padding-bottom: 0;
    font-family: var(--font-heading);
    color: #333333;
}

.bopea-section-title span {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 10px 18px;
    margin-bottom: -2px;
}

/* 9. Listagem de Posts (Recentes) */
.bopea-list-post {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}

.bopea-list-post:last-child {
    border-bottom: none;
}

.bopea-list-thumb {
    width: 40%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.bopea-list-thumb img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bopea-list-thumb:hover img {
    filter: var(--ct-img-hover-filtro);
}

.bopea-list-thumb .bopea-cat-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
}

.bopea-list-info {
    width: 60%;
}

.bopea-list-title {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-serif);
    line-height: 1.26;
    margin-bottom: 12px;
}

.bopea-list-title a {
    color: #333333;
}

.bopea-list-title a:hover {
    color: var(--cat-cor, var(--cor-primaria));
}

.bopea-list-excerpt {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .bopea-list-post {
        flex-direction: column;
    }

    .bopea-list-thumb,
    .bopea-list-info {
        width: 100%;
    }
}

/* 10. Sidebar Widgets */

.ct-widget-inner {
    background: #fdfdfd;
    padding: 25px;
    border: 1px solid var(--color-border);
}

.ct-widget-inner form {
    margin-top: 15px;
}

/* Footer */
.ct-footer {
    background: #111;
    color: #aaa;
    padding: 60px 0 30px;
    margin-top: 50px;
    border-top: 4px solid var(--cor-primaria);
}

body.home .ct-footer {
    margin-top: 0;
    background: #020617;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .ct-footer-grid {
        grid-template-columns: 1fr;
    }
}

.ct-footer h3 {
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.ct-footer-bottom {
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 20px;
    font-size: 12px;
    color: #666;
}

/* 11. Dropdown de Conta/Assinatura (Paywall) — ancorado no botao do
   cabecalho fixo (.ct-header), ver cidadetrevo_render_conta_header() em
   assinatura-leitor.php e o toggle em geral.js. */
.ct-conta-wrap {
    position: relative;
}

.ct-conta-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
    border: 1px solid #e2e8f0;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: 0.2s ease;
    z-index: 1001;
}

.ct-conta-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ct-conta-dropdown-titulo {
    font-family: var(--font-heading);
    font-size: 17px;
    color: #111;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
}

.ct-conta-dropdown-ok p {
    font-weight: 700;
    color: #166534;
    margin: 0 0 12px;
}

/* Teaser do "fluxo de login progressivo" (opção em teste, ver
   cidadetrevo_render_conta_dropdown_teaser em assinatura-leitor.php) —
   sem formulário nenhum aqui, só um convite pro wp-login. */
.ct-conta-teaser {
    text-align: center;
    padding: 6px 0 2px;
}

/* Marca do portal no topo do teaser — mesmo componente do cabeçalho
   (cidadetrevo_render_brand_logo(), inc/marca.php), só menor: reforça de
   quem é o convite antes até do título. */
.ct-conta-teaser-marca {
    --marca-corpo: 26px;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.ct-conta-teaser-marca img {
    max-height: 34px;
    width: auto;
}

.ct-conta-teaser-titulo {
    font-family: var(--font-heading);
    font-size: 17px;
    color: #111;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 8px;
}

.ct-conta-teaser-copy {
    margin-bottom: 18px;
}

.ct-conta-teaser-texto {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

/* Preço em linha própria, com destaque de verdade — é o número que mais
   importa pra quem está decidindo assinar, não deveria disputar espaço
   dentro de uma frase corrida nem quebrar no meio do valor. */
.ct-conta-teaser-preco {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--cor-primaria, #1a1a1a);
    white-space: nowrap;
    margin: 2px 0;
}

.ct-conta-teaser-preco span {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.ct-conta-teaser-btn {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Beneficios em lista, alinhados a esquerda de proposito — dentro de um
   card centralizado, uma lista de check-marks le melhor em coluna reta do
   que centralizada (cada linha com tamanho diferente vira um ziguezague). */
.ct-conta-teaser-beneficios {
    list-style: none;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: left;
}

.ct-conta-teaser-beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #334155;
}

.ct-conta-teaser-beneficios li + li {
    margin-top: 7px;
}

.ct-conta-teaser-beneficios i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 11px;
    color: var(--cor-primaria, #4f7c25);
}

/* Segunda via, discreta — quem ja assina nao deveria competir com o botao
   principal, que e pra quem ainda esta decidindo. */
.ct-conta-teaser-login {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
}

.ct-conta-teaser-login:hover {
    color: var(--cor-primaria, #4f7c25);
    text-decoration: underline;
}

/* Gatilho do cabeçalho quando logado: foto + primeiro nome no lugar do
   ícone de cadeado + "Entrar". */
.ct-conta-avatar-mini {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ct-conta-trigger-logado span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Resumo do assinante dentro do dropdown */
.ct-conta-perfil-resumo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ct-conta-avatar-grande {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-conta-perfil-dados {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ct-conta-perfil-dados strong {
    font-size: 14.5px;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-conta-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #166534;
}

/* Caixa editorial neutra — jornal, não SaaS: borda fina uniforme (nunca
   grossa/colorida de um lado só) e título em versalete com regra fina
   embaixo, no mesmo espírito do chapéu da matéria (.ct-single-chapeu) em vez
   de um bloco de cor semântica por tipo de conteúdo. */
.ct-editorial-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px 22px;
    margin-bottom: 20px;
}

.ct-editorial-box-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    font-family: var(--font-primary, sans-serif);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1a1a1a;
}

.ct-editorial-box-titulo i {
    color: #64748b;
    font-size: 13px;
}

@keyframes ct-placar-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* .button/.button-secondary: classes do wp-admin (sem CSS nenhum no
   frontend) reaproveitadas no dropdown de conta e na página Minha Conta —
   sem esta regra, "Meu Perfil"/"Sair" saiam como link azul cru. */
.button {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.button-secondary {
    background: #f8fafc;
    color: #1a1a1a;
    border: 1px solid #e2e8f0;
}

.button-secondary:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1a1a1a;
}

/* CTA de assinatura — era um verde genérico "de SaaS" (#46b450, cor de
   sucesso típica de wp-admin) e ignorava a cor de marca real do portal
   (--cor-primaria, configurável em Config. do Portal). Trocado pra usar a
   marca de verdade — aqui vira preto/quase-preto, que combina com o resto
   da identidade editorial (mesmo tom dos botões do wp-login) — e o brilho
   no hover usa filter:brightness() em vez de um tom fixo, pra continuar
   certo em qualquer cor que outra franquia configure. */
.ct-btn-pay {
    display: block;
    background: var(--cor-primaria, #1a1a1a);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    padding: 14px;
    border-radius: 6px;
    text-transform: uppercase;
    text-align: center;
    transition: 0.2s ease;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.ct-btn-pay:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.ct-modal-safe {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Formulario de assinar/entrar dentro do dropdown #ctContaDropdown (header.php). */
.ct-assinatura-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.ct-assinatura-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    /* 16px — mesma razao do .ct-nsearch-input (zoom automatico do iOS). */
    font-size: 16px;
}

/* Tela de pagamento (page-finalizar-pagamento.php): campos do cartao sao
   div vazias ate o SDK da Mercado Pago montar um iframe dentro — sem altura
   minima, a tela "pula" quando o iframe chega. */
.ct-checkout-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1d2327;
    margin-bottom: 6px;
}
.ct-mp-field {
    min-height: 20px;
    box-sizing: border-box;
    /* O SDK injeta um <iframe> sem altura definida — sem isto, o navegador
       usa a altura padrão de iframe (~150px), gigante pra um campo de uma
       linha só. !important porque o SDK também escreve style inline no
       proprio iframe. */
    overflow: hidden;
}
.ct-mp-field iframe {
    display: block !important;
    width: 100% !important;
    height: 20px !important;
    border: none !important;
}

.ct-assinatura-entrar {
    margin-bottom: 14px;
    font-size: 13px;
    color: #555;
}

.ct-assinatura-entrar summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cor-primaria, #2271b1);
    margin-bottom: 10px;
}

.ct-modal-aviso {
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 600;
}

.ct-modal-aviso--ok {
    background: #f0fdf4;
    color: #166534;
}

.ct-modal-aviso--erro {
    background: #fef2f2;
    color: #b91c1c;
}

/* 12. Offcanvas Mobile Menu
   So utilidade agora (conta, anuncie, redes, institucional) — as categorias
   saíram pra faixa fixa abaixo da marca. Fundo claro, e nao mais o preto de
   antes: era a unica superficie escura do portal, destoando do resto (branco,
   bordas finas neutras, sotaque verde). */
.ct-offcanvas {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #ffffff;
    z-index: 10000;
    transition: left 0.3s ease, box-shadow 0.3s ease;
    border-right: 1px solid #e2e8f0;
    /* Cabecalho (marca + fechar) fixo, so o corpo abaixo rola — antes a
       gaveta inteira era uma unica area de scroll com o botao de fechar
       flutuando por cima, sem relacao visual com a marca. */
    display: flex;
    flex-direction: column;
}

.ct-offcanvas.active {
    left: 0;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.12);
}

.ct-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.ct-offcanvas-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-offcanvas-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 20px 24px;
    color: #0f172a;
    /* "Se tiver scroll, que seja uma faixa preta" — barra fina escura em vez
       do scrollbar cinza padrao do sistema. */
    scrollbar-width: thin;
    scrollbar-color: #111827 #f1f5f9;
}

.ct-offcanvas-content::-webkit-scrollbar {
    width: 6px;
}

.ct-offcanvas-content::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.ct-offcanvas-content::-webkit-scrollbar-thumb {
    background: #111827;
    border-radius: 3px;
}

.ct-offcanvas-content .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ct-offcanvas-content .menu li {
    border-bottom: 1px solid #f1f5f9;
}

.ct-offcanvas-content .menu a {
    display: block;
    padding: 13px 0;
    color: #1e293b;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
}

.ct-offcanvas-content .menu a:hover {
    color: var(--cat-cor, var(--cor-primaria));
}

/* Gaveta montada no painel (Aparência > Menus > "Gaveta"): os filhos aparecem recuados, sempre abertos,
   com um fio fino neutro; um item sem link (como "Serviços") vira só um rótulo em caixa-alta. */
.ct-offcanvas-content .menu .sub-menu {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    border-left: 1px solid #e2e8f0;
}
.ct-offcanvas-content .menu .sub-menu li { border-bottom: 0; }
.ct-offcanvas-content .menu .sub-menu a {
    padding: 9px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #475569;
}
.ct-offcanvas-content .menu .ct-menu-rotulo {
    display: block;
    padding: 13px 0 6px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #64748b;
}
/* Destaque leve para um item do menu do topo (classe "ct-menu-destaque" no item, em Aparência > Menus):
   fundo creme da identidade, sem borda de acento. */
.ct-main-menu > li.ct-menu-destaque > a {
    background: #f6f2ea;
    border-radius: 4px;
}

.ct-offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.ct-offcanvas-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 13. Search Overlay */
.ct-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

.ct-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ct-search-close {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: #111;
    transition: 0.2s;
}

.ct-search-close:hover {
    color: var(--cat-cor, var(--cor-primaria));
    transform: scale(1.1);
}

.ct-search-form {
    width: 100%;
    max-width: 600px;
    position: relative;
    padding: 0 20px;
}

.ct-search-form input {
    width: 100%;
    border: none;
    border-bottom: 4px solid #111;
    background: transparent;
    font-size: 42px;
    padding: 15px 0;
    outline: none;
    font-family: var(--font-heading);
    font-weight: 800;
    color: #111;
}

/* 14. LAYOUT CLÁSSICO BRANCO (Bopea) - Substitui Hero */
/* Main Feature (Top Left) */
.bopea-main-feature {
    display: flex;
    margin-bottom: 30px;
    padding-bottom: 30px;
    background: #fff;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
}

.bmf-content {
    width: 45%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bmf-image {
    width: 55%;
    overflow: hidden;
    border-radius: 8px;
}

.bmf-image a {
    display: block;
    height: 100%;
    width: 100%;
}

.bmf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ct-img-radius);
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bopea-main-feature:hover .bmf-image img {
    filter: var(--ct-img-hover-filtro);
}

.bmf-cat {
    background: var(--cor-primaria);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    line-height: 17px;
}

.bmf-title {
    font-size: 32px;
    line-height: 35px;
    font-family: var(--font-serif);
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -.5px;
}

.bmf-title a {
    color: #333333;
}

.bmf-title a:hover {
    color: var(--cat-cor, var(--cor-primaria));
}

.bmf-excerpt {
    font-size: 16px;
    color: #555;
    margin-bottom: 25px;
    line-height: 18px;
    font-weight: 400;
}

/* Middle Row (3 cols) */
.bopea-middle-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 30px;
}

.bmr-image-wrap img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--ct-img-radius);
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bmr-post:hover .bmr-image-wrap img {
    filter: var(--ct-img-hover-filtro);
}

.bmr-title a {
    color: #333333;
}

.bmr-title a:hover {
    color: var(--cat-cor, var(--cor-primaria));
}

/* Bottom Row (4 cols) */
.bopea-bottom-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bbr-post {
    border-right: 1px solid var(--color-border);
    padding-right: 20px;
}

.bbr-post:last-child {
    border-right: none;
    padding-right: 0;
}

.bbr-title {
    font-size: 17px;
    font-family: var(--font-serif);
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 20px;
}

.bbr-title a {
    color: #333333;
}

.bbr-title a:hover {
    color: var(--cat-cor, var(--cor-primaria));
}

.bbr-excerpt {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
    line-height: 18px;
    font-weight: 400;
}

/* Sidebar Highlights */
.bopea-sidebar-title {
    font-size: 22px;
    font-family: var(--font-primary);
    font-weight: 700;
    margin-bottom: 20px;
    color: #333333;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    padding-bottom: 10px;
    letter-spacing: -.8px;
}

.bopea-sidebar-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 3px;
    background: #e3262e;
}

.bsh-top {
    position: relative;
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: var(--ct-img-radius);
}

.bsh-top img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--ct-img-radius);
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bsh-top:hover img {
    filter: var(--ct-img-hover-filtro);
}

.bsh-top-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: #fff;
    border-radius: 0 0 6px 6px;
}

.bsh-top-title {
    font-size: 20px;
    font-family: var(--font-serif);
    font-weight: 700;
    margin: 10px 0;
    color: #fff;
    line-height: 24px;
    letter-spacing: -.8px;
}

.ct-guia-cat-item span {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

.cgc-meta-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cgc-rating {
    font-weight: 800;
    color: #d97706;
    display: flex;
    align-items: center;
    gap: 3px;
}

.cgc-rating i {
    font-size: 11px;
    color: #f59e0b;
}

.cgc-status-open {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cgc-dot {
    color: #cbd5e1;
    font-weight: 900;
}

@media (max-width: 992px) {
    .ct-container {
        padding: 0 16px;
    }
}

/* ============================================================
   FLYER PADRÃO DE ANÚNCIO (GUIA COMERCIAL)
   ============================================================ */
.ct-ad-flyer-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 195px;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    color: #ffffff;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ct-ad-flyer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.ct-ad-flyer-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(225, 29, 72, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Badge que revela "Publicidade" no Hover */
.ct-ad-badge-hover {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #cbd5e1;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 8px;
    cursor: default;
    transition: all 0.25s ease;
    z-index: 3;
}

.ct-ad-badge-hover span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.25s ease, opacity 0.25s ease;
}

.ct-ad-badge-hover:hover,
.ct-ad-flyer-card:hover .ct-ad-badge-hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 3px 8px;
}

.ct-ad-badge-hover:hover span,
.ct-ad-flyer-card:hover .ct-ad-badge-hover span {
    max-width: 80px;
    opacity: 1;
    margin-left: 3px;
}

/* Conteúdo do Flyer */
.ct-ad-flyer-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.ct-ad-flyer-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f43f5e;
    margin-bottom: 3px;
}

.ct-ad-flyer-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 3px 0;
    line-height: 1.2;
}

.ct-ad-flyer-size {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    padding: 2px 7px;
    border-radius: 8px;
    margin-bottom: 6px;
    align-self: flex-start;
}

.ct-ad-flyer-size strong {
    color: #fef08a;
    font-weight: 800;
}

.ct-ad-flyer-desc {
    font-size: 11px;
    line-height: 1.35;
    color: #cbd5e1;
    margin: 0 0 10px 0;
}

.ct-ad-flyer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #25d366 0%, #16a34a 100%);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(37, 211, 102, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    margin-top: auto;
}

.ct-ad-flyer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(37, 211, 102, 0.5);
    color: #ffffff;
}

/* BANNER PADRÃO ANIMADO */

.ct-ad-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: linear-gradient(45deg, var(--cor-primaria) 25%, transparent 25%, transparent 50%, var(--cor-primaria) 50%, var(--cor-primaria) 75%, transparent 75%, transparent);
    background-size: 30px 30px;
    opacity: 0.08;
    animation: moveAdBg 2s linear infinite;
    z-index: 1;
}

@keyframes moveAdBg {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 30px 30px;
    }
}

.ct-ad-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ct-ad-content i {
    font-size: 32px;
    color: var(--cor-primaria);
    animation: pulseAd 1.5s infinite;
}

.ct-ad-content span {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

.ct-ad-content small {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 10px;
    border-radius: 8px;
    color: #aaa;
    font-weight: 600;
    letter-spacing: 1px;
}

@keyframes pulseAd {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.bcb-cat-label {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--cor-secundaria, #e3262e);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 8px;
    z-index: 2;
}

.bcb-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.bcb-list-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
}

.bcb-list-item:first-child {
    padding-top: 0;
}

.bcb-list-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.bcb-list-item img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--ct-img-radius);
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bcb-list-item:hover img {
    filter: var(--ct-img-hover-filtro);
}

.bcb-list-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bcb-list-cat {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 4px;
}

.bcb-list-cat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #5a9e22;
}

.bcb-list-text h5 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin: 0 0 8px 0;
    line-height: 1.3;
    transition: 0.2s;
}

.bcb-list-item:hover .bcb-list-text h5 {
    color: var(--cat-cor, var(--cor-primaria));
}

.bcb-list-text time {
    font-size: 12px;
    color: #888;
}

/* 17. PÁGINA DE CATEGORIA */
.ct-category-page {
    padding: 40px 15px;
}

/* BREADCRUMBS */
.ct-breadcrumbs {
    font-size: 13px;
    color: #666;
    margin: 20px 0 30px;
    font-weight: 500;
}

.ct-breadcrumbs a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.ct-breadcrumbs a:hover {
    color: var(--cat-cor, var(--cor-primaria));
}

.ct-breadcrumbs .separator {
    margin: 0 10px;
    font-size: 11px;
    color: #aaa;
}

.ct-breadcrumbs .current {
    color: #111;
    font-weight: 700;
}

/* Selo "Exclusivo" (cidadetrevo_selo_exclusivo(), inc/conteudo.php) — mesma
   identificação em qualquer card e na própria matéria, pro leitor não
   assinante saber ANTES de clicar, e pro assinante reconhecer o benefício.
   Só a estrela dourada — sem pílula/texto — lê como selo editorial de
   jornal (igual a maioria dos grandes portais marca conteúdo premium), não
   como badge colorido de SaaS. */
.ct-selo-exclusivo {
    color: #fbbf24;
    font-size: 13px;
    vertical-align: middle;
}

/* Sobreposto no canto oposto ao rótulo de categoria (.ct-cat-tag-overlay,
   embaixo à esquerda) — quem chama envolve o retorno de
   cidadetrevo_selo_exclusivo() com esta classe dentro de um wrap já
   position:relative (.ccgi-img-wrap e equivalentes). Chip circular escuro
   por trás da estrela: sem ele, a estrela sozinha some contra foto clara. */
.ct-selo-exclusivo-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ct-selo-exclusivo-overlay .ct-selo-exclusivo {
    font-size: 12px;
}

@media (max-width: 991px) {
    .bopea-main-feature {
        flex-direction: column-reverse;
    }

    .bmf-content,
    .bmf-image {
        width: 100%;
    }

    .bmf-image {
        height: 300px;
    }

    .bmf-image img {
        position: relative;
    }

    .bopea-middle-row {
        grid-template-columns: 1fr;
    }

    .bopea-bottom-row {
        grid-template-columns: 1fr;
    }

    .bbr-post {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .ct-guia-card-horizontal {
        flex-direction: column;
    }

    .cgc-img-horiz,
    .cgc-info-horiz {
        width: 100%;
    }

    .cgc-img-horiz {
        border-radius: 8px 8px 0 0;
    }

    .cgc-info-horiz {
        padding: 15px;
    }
}

/* ========================================= */
/* SINGLE POST (NOTÍCIAS)                    */
/* ========================================= */
.ct-single-article {
    background: #fff;
    padding: 0;
    border-radius: 8px;
    margin-bottom: 10px;
}

.ct-single-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.12;
    margin: 0px 0 30px 0;
    /* Serifada tem contraforma mais aberta que a sans: o -.8px que servia
       para a sans aqui fecha demais e embola as hastes. */
    letter-spacing: -.015em;
}

.ct-single-audio {
    background: #f4f5f7;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--cor-secundaria);
}

.ct-audio-label {
    font-weight: 700;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .ct-single-article {
        padding: 0;
    }

    .ct-single-title {
        font-size: 28px;
    }
}

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

/* Comentarios: o visual fica em materia.css */
.comment-form-cookies-consent {
    display: none !important;
}

.logged-in-as {
    font-size: 13px;
    color: #777;
    margin-bottom: 20px;
}

.logged-in-as a {
    color: var(--cor-primaria);
    font-weight: 600;
}

/* STICKY SIDEBAR */
.ct-sidebar {
    width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: sticky;
    top: 40px;
    align-self: flex-start;
    height: max-content;
    z-index: 10;
}

/* Os 40px acima so valem com o cabecalho escondido (.is-oculta, ao rolar
   pra baixo — geral.js). Rolando pra cima ele volta com 66px e cobria o
   topo da sidebar: o titulo do primeiro widget (Mais Lidas na capa,
   Destaques nas internas) sumia inteiro por baixo dele. Com o cabecalho
   visivel a sidebar desce pra baixo dele, no mesmo ritmo da animacao dele. */
html:not(.ct-cab-oculto) .ct-sidebar {
    top: 90px;
}

@media (prefers-reduced-motion: no-preference) {
    .ct-sidebar {
        transition: top .28s ease;
    }
}

@media (max-width: 992px) {
    .ct-sidebar {
        width: 100%;
        max-width: 100%;
        position: static;
    }
}

.ct-empresa-cat-badge {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 8px;
}

.ct-empresa-sidebar-info {
    flex: 1;
    min-width: 250px;
}

.ct-empresa-info-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #333333;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 10px;
    display: inline-block;
}

.ct-empresa-btn-whatsapp {
    display: block;
    width: 100%;
    text-align: center;
    background: #25D366;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 15px 0;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 25px;
    transition: transform 0.3s;
}

.ct-empresa-btn-whatsapp:hover {
    transform: scale(1.03);
    color: #fff;
}

.ct-empresa-btn-whatsapp i {
    font-size: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

.ct-empresa-btn-detalhes {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.2s;
}

.ct-empresa-btn-detalhes:hover {
    background: #f7f7f7;
    color: #111;
    border-color: #ccc;
}

/* Sidebar Empresa */
.ct-sidebar-empresa {
    /* Herda de ct-sidebar */
}

.ct-widget-empresa-info {
    padding: 0;
    border: none;
    background: transparent;
}

.ct-ad-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
}

.ct-ad-box {
    margin-top: 10px;
}

.ct-ad-img-link {
    display: block;
}

.ct-default-ad-square {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 300/250;
}

.ct-ad-icon-lg {
    font-size: 24px;
    margin-bottom: 10px;
}

.ct-ad-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.ct-ad-subtitle {
    display: block;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.8;
}

.ct-single-wrap {
    min-width: 0;
}

/* =========================================================
   GALERIA DE FOTOS (Single Empresa)
   ========================================================= */
.ct-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.ct-galeria-img {
    display: block;
    position: relative;
    border-radius: var(--ct-img-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.ct-galeria-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter var(--ct-img-hover-duracao) ease;
}

.ct-galeria-img:hover img {
    filter: var(--ct-img-hover-filtro);
}

@media (max-width: 640px) {
    .ct-galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 900px) {
    .bcb-list {
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .bcb-list-item img {
        width: 75px;
        height: 75px;
    }

    .bcb-list-text h5 {
        font-size: 14px;
    }
}

/* Corrige Lightbox */
.fancybox__container { z-index: 9999999 !important; }

.ct-colunista-date {
    font-size: 12px;
    color: #999;
}

/* ============================================================
   GRIDS REUTILIZÁVEIS
   ============================================================ */

/* ============================================================
   SECTION HEADERS (Padrão reutilizável)
   ============================================================ */
.ct-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.ct-section-header .bopea-section-title {
    border: none;
    margin: 0;
    padding: 0;
}

.ct-section-icon {
    color: var(--cor-primaria);
    margin-right: 8px;
}

/* Flyer Horizontal 740x140 */
.ct-ad-flyer-horizontal {
    position: relative;
    width: 100%;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px 22px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    color: #ffffff;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ct-ad-flyer-horizontal:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.ct-ad-flyer-horizontal::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(225, 29, 72, 0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ct-ad-flyer-h-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ct-ad-flyer-h-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ct-ad-flyer-h-right {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right;
}

@media (max-width: 768px) {
    .ct-ad-flyer-h-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .ct-ad-flyer-h-right {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ============================================================
   GRIDS REUTILIZÁVEIS
   ============================================================ */
.ct-grid-3-cols {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid;
    gap: 20px;
}

/* ============================================================
   BLOCOS DE CATEGORIAS (bmr-post & bmr-image-wrap)
   ============================================================ */
.bmr-post {
    display: flex;
    flex-direction: column;
}

.bmr-image-wrap {
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: var(--ct-img-radius);
    background: #f1f5f9;
}

.bmr-image-wrap img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bmr-post:hover .bmr-image-wrap img {
    filter: var(--ct-img-hover-filtro);
}

.bmr-title {
    font-size: 18px;
    font-family: var(--font-serif);
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 120%;
    letter-spacing: -.04rem;
    margin: 0 0 6px 0;
    color: #333333;
    transition: color 0.2s ease;
}

.bmr-title a {
    color: inherit;
    text-decoration: none;
}

.bmr-post:hover .bmr-title a {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}

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

/* ============================================================
   WIDGETS GENÉRICOS
   ============================================================ */
.ct-widget {
    margin-bottom: 25px;
}

.ct-widget-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

/* ============================================================
   ECONOMIA WIDGET
   ============================================================ */
.ct-economia-widget {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.ct-economia-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ct-economia-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
}

.ct-economia-value {
    font-size: 18px;
    color: #111;
    font-weight: 700;
}

.ct-economia-arrow-up {
    font-size: 12px;
    color: #5a9e22;
}

.ct-economia-arrow-down {
    font-size: 12px;
    color: #d63638;
}

.ct-impostometro {
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 8px;
}

.ct-impostometro-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 5px;
}

.ct-impostometro-value {
    font-size: 22px;
    color: var(--cor-secundaria);
    font-family: var(--font-heading);
    font-weight: 700;
}

.ct-impostometro-desc {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
}

.ct-economia-info {
    font-size: 12px;
    line-height: 1.4;
    color: #555;
}

.ct-horoscopo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.ct-horoscopo-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    margin-bottom: 6px;
}

.ct-horoscopo-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 2px 0;
    letter-spacing: -0.3px;
}

.ct-horoscopo-sub {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0;
}

.ct-horoscopo-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 16px;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

.ct-signos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 18px;
}

.ct-signo-item {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 2px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #cbd5e1;
    font-family: inherit;
    outline: none;
}

.ct-signo-item:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
}

.ct-signo-item.active {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(217, 119, 6, 0.25) 100%);
    border-color: #fbbf24;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}

.ct-signo-icone {
    display: block;
    font-size: 20px;
    color: #fbbf24;
    margin-bottom: 2px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ct-signo-item:hover .ct-signo-icone,
.ct-signo-item.active .ct-signo-icone {
    transform: scale(1.15);
}

.ct-signo-nome {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}

@keyframes plantaoPulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.4); }
    100% { opacity: 1; transform: scale(1); }
}

/* Estado vazio das 4 colunas: mesma paleta do .ct-arq-vazio (arquivo sem
   post), so que compacta o bastante para caber numa coluna estreita de
   4 lado a lado. Cada CPT comunitario comeca vazio numa franquia nova, e
   card fabricado com telefone e link "#" inventados vira problema de
   confianca, nao so estetico — era um numero de WhatsApp que nao existe. */
.ct-c-vazio {
    padding: 22px 14px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ct-c-vazio i {
    font-size: 22px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 8px;
}

.ct-c-vazio p {
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0;
}

/* ============================================================
   WEATHER BADGE (Header)
   ============================================================ */
.ct-weather-badge {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.ct-weather-icon {
    font-size: 18px;
    margin-right: 8px;
}

/* ============================================================
   DEFAULT AD PLACEHOLDER
   ============================================================ */
.ct-default-ad {
    position: relative;
    background: #f9f9f9;
    color: #999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    border: 1px dashed #ccc;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.ct-default-ad i {
    font-size: 24px;
    margin-bottom: 5px;
}

.ct-default-ad-title {
    font-size: 18px;
    font-weight: 800;
    color: #333333;
}

.ct-section-sm {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* ============================================================
   RESPONSIVO - GRIDS
   ============================================================ */
@media (max-width: 992px) {
    .ct-grid-3-cols,
    .ct-videos-grid,
    .ct-3-cols-categories {
        grid-template-columns: 1fr;
    }

    .bopea-middle-row {
        grid-template-columns: 1fr;
    }

    .bopea-bottom-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bopea-bottom-row {
        grid-template-columns: 1fr;
    }

    .ct-signos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   CHAPEU — sistema de duas variantes
   Uma medida so (10,5px / 800 / .04em) e dois tratamentos, escolhidos por
   necessidade e nao por gosto: sobre fundo claro o texto colorido basta;
   sobre foto ele sumiria, entao vira pilula solida com texto branco.
   ========================================================================== */
.ct-side-feed-chapeu,
.ct-hero-sub-chapeu,
.ct-hero-showcase-chapeu,
.cgc-badge-chapeu span {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}

/* Variante clara: sobre fundo branco. */
.ct-side-feed-chapeu,
.ct-hero-sub-chapeu {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    background: none;
    padding: 0;
    border-radius: 0;
    color: var(--chapeu-cor, #1e5ba8);
    margin-bottom: 6px;
}

.ct-side-feed-chapeu::before,
.ct-hero-sub-chapeu::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ct-side-feed-list {
    display: flex;
    flex-direction: column;
}

.ct-side-feed-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
}

.ct-side-feed-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ct-side-feed-item:first-child {
    padding-top: 0;
}

.ct-side-feed-item:first-child {
    padding-top: 0;
}

.ct-side-feed-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ct-side-feed-thumb {
    width: 90px;
    height: 90px;
    border-radius: var(--ct-img-radius);
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}

.ct-side-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter var(--ct-img-hover-duracao) ease;
}

.ct-side-feed-item:hover .ct-side-feed-thumb img {
    filter: var(--ct-img-hover-filtro);
}

.ct-side-feed-info {
    flex: 1;
    min-width: 0;
}

/* flex, e nao inline-flex: como caixa de linha o chapeu herdava a entrelinha
   do texto ao redor e descia 9px, desalinhando do topo da miniatura. */
.ct-side-feed-chapeu {
    margin-top: 1px;
    margin-bottom: 4px;
}

.ct-side-feed-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -.02rem;
    margin: 0 0 5px;
    color: #333333;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-side-feed-item:hover .ct-side-feed-title {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}

@media (max-width: 768px) {
    .ct-side-feed-thumb {
        width: 140px;
        height: 112px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f0f0f0;
    }

    .ct-side-feed-title {
        font-size: 17.5px;
    }
}

.ct-imposto-flag-default {
    background: linear-gradient(135deg, #00875a, #0052cc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 8px;
    width: 44px;
    height: 44px;
}

/* ============================================================
   BANNER DE ANÚNCIO / VOCÊ NO TREVO (ESQUERDA)
   ============================================================ */
.ct-banner-anuncio-wrap {
    margin-top: 24px;
    margin-bottom: 24px;
    position: relative;
}

.ct-banner-anuncio-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9ca3af;
    text-align: right;
    margin-bottom: 5px;
}

.ct-banner-anuncio-card {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: linear-gradient(145deg, #0b2e1b 0%, #051a0f 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    padding: 20px 16px;
    color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ct-banner-anuncio-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(11, 46, 27, 0.35);
    border-color: rgba(34, 197, 94, 0.6);
}

.ct-banner-anuncio-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ct-banner-anuncio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ct-banner-anuncio-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.ct-banner-anuncio-desc {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.45;
    margin: 0 0 16px 0;
}

.ct-banner-anuncio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #22c55e;
    color: #052e16;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.3);
}

.ct-banner-anuncio-card:hover .ct-banner-anuncio-btn {
    background: #16a34a;
    color: #ffffff;
    transform: scale(1.02);
}

.ct-banner-anuncio-sigilo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    color: #94a3b8;
    margin-top: 10px;
}

.ct-banner-comercial-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}

.ct-banner-comercial-link:hover {
    transform: translateY(-2px);
}

.ct-banner-comercial-img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes ctFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efeito global de iluminação suave em imagens com link no hover */
a img {
    transition: filter var(--ct-img-hover-duracao) ease;
}

a:hover img {
    filter: var(--ct-img-hover-filtro);
}

.ct-poster-pill {
    display: inline-block;
    background: #008a20;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 8px;
    margin-bottom: 6px;
}

/* Utility Classes */
.ct-desktop-only { display: block; }

.ct-mobile-only { display: none; }

@media (max-width: 992px) {
  .ct-desktop-only { display: none !important; }
  .ct-mobile-only { display: block !important; }
}

/* ============================================================
   INFOGRÁFICO ELEITORAL / MAPA REGIONAL DE LOCALIDADES
   ============================================================ */
.ct-electoral-infographic-wrap {
    background: #ffffff;
    border: 1px solid #d8dee6;
    border-radius: 4px;
    margin: 35px 0;
    overflow: hidden;
    font-family: var(--font-primary, "Google Sans", sans-serif);
}

/* Tarja escura de cabecalho: e o que separa "peca de apuracao" de "mais uma
   secao do texto". Titulo claro sobre fundo escuro, status a direita. */
.ct-ei-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    background: #0f172a;
    padding: 16px 22px;
}

/*
 * Dois seletores de classe de proposito: o titulo e um <h3> e cai dentro de
 * .ct-post-content h3, que fixa color:#111 e margin:30px. Na tarja escura
 * isso deixava o titulo preto no preto — invisivel — e jogado pra baixo.
 * Duas classes vencem "classe + elemento" na especificidade.
 */
.ct-ei-masthead .ct-ei-title {
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin: 0;
}

.ct-ei-subtitle {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 4px 0 0;
    line-height: 1.4;
}

.ct-ei-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #34d399;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

.ct-ei-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

.ct-ei-corpo {
    padding: 22px;
}

/* Placar de Candidatos: leaderboard, nao cards iguais — o 1o colocado tem
   que saltar aos olhos, os demais ficam em segundo plano. */
.ct-ei-placar {
    display: flex;
    flex-direction: column;
    margin-bottom: 26px;
}

.ct-ei-placar-linha {
    padding: 14px 0;
}

.ct-ei-placar-linha:first-child {
    padding-top: 0;
}

.ct-ei-placar-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 9px;
}

.ct-ei-placar-info {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Quadradinho da cor do candidato: amarra nome e barra sem depender de
   contraste de texto sobre cor escolhida no admin. */
.ct-ei-placar-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: center;
}

.ct-ei-placar-selo {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    background: #15803d;
    padding: 3px 7px;
    border-radius: 2px;
}

.ct-ei-placar-nome {
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    letter-spacing: -.01em;
}

.ct-ei-placar-linha--lider .ct-ei-placar-nome {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
}

.ct-ei-placar-partido {
    font-size: 11px;
    font-weight: 700;
    color: #8a97a8;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ct-ei-placar-nums {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-shrink: 0;
}

.ct-ei-placar-votos {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ct-ei-placar-pct {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
}

.ct-ei-placar-linha--lider .ct-ei-placar-pct {
    font-size: 30px;
    font-weight: 900;
}

.ct-ei-placar-trilho {
    height: 9px;
    background: #eef2f6;
    border-radius: 2px;
    overflow: hidden;
}

.ct-ei-placar-linha--lider .ct-ei-placar-trilho {
    height: 12px;
}

.ct-ei-placar-preenche {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Bloco Regional & Localidades */
.ct-ei-regional-block {
    border-top: 2px solid #f1f5f9;
    padding-top: 22px;
    margin-bottom: 20px;
}

.ct-ei-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: #8a97a8;
    border-top: 1px solid #eef2f6;
    padding-top: 12px;
}

.ct-ei-meta-source strong {
    color: #475569;
    font-weight: 700;
}

.ct-ei-meta-seal {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

@media (max-width: 768px) {
    .ct-ei-masthead {
        padding: 14px 16px;
    }
    .ct-ei-corpo {
        padding: 16px;
    }
}

/*
 * Em tela estreita nome e numeros disputavam a mesma linha: o nome quebrava
 * no meio ("Cesar do / Asfalto") com o percentual pendurado do lado. Em
 * coluna, a linha 1 e a identificacao e a linha 2 e o resultado — votos na
 * esquerda, percentual na direita, que e como um placar se le.
 */
@media (max-width: 600px) {
    .ct-ei-placar-topo {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }
    .ct-ei-placar-nums {
        width: 100%;
        justify-content: space-between;
        align-items: baseline;
    }
    .ct-ei-placar-linha--lider .ct-ei-placar-nome {
        font-size: 17px;
    }
    .ct-ei-placar-linha--lider .ct-ei-placar-pct {
        font-size: 26px;
    }
}

/* Capa do podcast na sidebar inferior: era style inline no <img>. */
.ct-podcast-cover {
    width: 100%;
    height: auto;
    display: block;
}

/* Marca no menu lateral — mesmo componente do cabecalho (.ct-marca), so que
   com --marca-corpo fixo: a media query de .ct-marca reage a LARGURA DA TELA
   (640px), nao a largura da gaveta (300px sempre, mesmo no desktop), entao
   sem isto a marca saia grande demais pro espaco quando a gaveta abre numa
   tela larga. */
.ct-offcanvas-marca .ct-marca {
    --marca-corpo: 30px;
}

.ct-offcanvas-marca img {
    max-height: 34px;
    width: auto;
    display: block;
}

/* Gaveta do celular: acessos que vivem na barra de serviço do desktop, que é
   display:none no mobile. Sem isto, "Anuncie" e "Entrar" não existiam no
   telefone. */
.ct-offcanvas-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 26px 0 20px;
}

.ct-oc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fafc;
    color: #1e293b;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid #e2e8f0;
}

.ct-oc-btn--destaque {
    background: var(--cor-primaria, #2271b1);
    border-color: transparent;
    color: #fff;
}

/* "Redação" (administrador) na gaveta: botão que abre as três ações logo abaixo */
button.ct-oc-btn {
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ct-oc-redacao-seta {
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.2s ease;
}
.ct-oc-redacao-btn[aria-expanded="true"] .ct-oc-redacao-seta {
    transform: rotate(180deg);
}
.ct-oc-redacao-sub {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -4px;
    padding: 6px 0 2px 14px;
    border-left: 2px solid #e2e8f0;
}
.ct-oc-redacao-sub[hidden] {
    display: none;
}
.ct-oc-redacao-sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.ct-oc-redacao-sub a i {
    width: 16px;
    text-align: center;
    color: #64748b;
}

.ct-offcanvas-redes {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.ct-offcanvas-redes a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    text-decoration: none;
}

.ct-offcanvas-legal {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.ct-offcanvas-legal a {
    color: #64748b;
    text-decoration: none;
}

.ct-offcanvas-legal a:hover {
    color: var(--cor-primaria, #4f7c25);
}

.ct-offcanvas-data {
    font-size: 12.5px;
    line-height: 1.9;
    color: #64748b;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}

/* Faixa do canal do WhatsApp (cidadetrevo_canal_whatsapp_banner, inc/marca.php):
   no fim das matérias e na gaveta do menu. Padrão editorial do portal: caixa
   de borda fina neutra, título na serifada das manchetes, botão preto como os
   demais chamados do site. A cor da franquia aparece só no selo "Canal no
   WhatsApp"; o único link é o botão. */
.ct-canal-faixa {
    container-type: inline-size;
    margin: 28px 0;
    padding: 20px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.ct-canal-faixa-in {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ct-canal-faixa-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 22px;
    border-right: 1px solid #e2e8f0;
}

.ct-canal-faixa-logo img {
    display: block;
    max-width: 130px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* zoom (e nao transform): encolhe tambem o espaco que a marca ocupa. */
.ct-canal-faixa-logo .ct-marca {
    zoom: .62;
    white-space: nowrap;
}

.ct-canal-faixa-texto {
    flex: 1;
    min-width: 0;
}

.ct-canal-faixa-selo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cor-primaria, #1a1a1a);
}

.ct-canal-faixa-selo i {
    font-size: 14px;
}

.ct-canal-faixa-texto strong {
    display: block;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: #111;
}

.ct-canal-faixa-texto > span:last-child {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #64748b;
}

.ct-canal-faixa-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 6px;
    background: #111;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    transition: background .15s ease;
}

.ct-canal-faixa-botoes {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ct-canal-faixa-btn:hover {
    background: var(--cor-primaria, #333);
}

.ct-canal-faixa-btn:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

.ct-canal-faixa-btn i {
    font-size: 17px;
}

/* Empilha pela largura da PROPRIA faixa (a coluna da materia e mais estreita
   que a tela), nao pela largura da janela. */
@container (max-width: 700px) {
    .ct-canal-faixa-in {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }
    .ct-canal-faixa-logo {
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
        width: 100%;
    }
    .ct-canal-faixa-selo {
        justify-content: center;
    }
    .ct-canal-faixa-btn {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
}

/* Na gaveta do menu: sempre empilhada, mais compacta. */
.ct-canal-faixa--gaveta {
    margin: 22px 0;
    padding: 18px 16px;
}

.ct-canal-faixa--gaveta .ct-canal-faixa-in {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.ct-canal-faixa--gaveta .ct-canal-faixa-logo {
    width: 100%;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
}

.ct-canal-faixa--gaveta .ct-canal-faixa-selo {
    justify-content: center;
}

.ct-canal-faixa--gaveta .ct-canal-faixa-texto strong {
    font-size: 17px;
}

.ct-canal-faixa--gaveta .ct-canal-faixa-texto > span:last-child {
    font-size: 13px;
}

.ct-canal-faixa--gaveta .ct-canal-faixa-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 12px 16px;
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .ct-canal-faixa-btn {
        transition: none;
    }
}

/* ==========================================================================
   MAPA DO MUNICÍPIO
   Contorno oficial da malha do IBGE, desenhado como SVG inline (~1 KB). Sem
   biblioteca, sem tiles e sem requisição a terceiro na hora da leitura.
   ========================================================================== */
.ct-mapa {
    margin: 0;
}

/* Mapa Leaflet (tiles do OpenStreetMap + contorno oficial do IBGE) — ver
   cidadetrevo_mapa_leaflet() em mapa-municipio.php e assets/js/leaflet-mapa.js */
.ct-leaflet-mapa {
    width: 100%;
    border-radius: 8px;
    /* Cria um novo contexto de empilhamento: os controles internos do
       Leaflet (zoom, atribuicao) tem z-index proprio que, sem isto,
       conseguiria aparecer por cima do cabecalho fixo do site ao rolar. */
    position: relative;
    z-index: 0;
}

.ct-leaflet-rotulo {
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: rgba(255, 255, 255, .92);
    border: none;
    box-shadow: none;
    padding: 2px 6px;
}

.ct-leaflet-rotulo::before {
    display: none;
}

.ct-leaflet-popup-link {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    color: var(--cor-primaria, #2271b1);
    text-decoration: none;
}

/* Link para o Google Maps abrir a rota a partir de onde o leitor está
   (single-empresa.php). O mapa do portal mostra onde fica; a rota em si é
   trabalho do app de mapas do celular. */
.ct-mapa-rota {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.ct-mapa-rota:hover,
.ct-mapa-rota:focus {
    border-color: #0f172a;
    background: #f8fafc;
    color: #0f172a;
}

.ct-mapa-fonte {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 992px) {
    .ct-leaflet-mapa { height: 300px !important; }
}

/* Com 4-5 localidades os rotulos permanentes cabem bem numa tela larga, mas
   se amontoam num mapa de 375px de largura — o toque no ponto ja abre o
   popup com o mesmo nome, entao esconder o rotulo fixo aqui nao tira
   informacao, so tira poluicao visual. */
@media (max-width: 600px) {
    .ct-leaflet-rotulo { display: none; }
}

/* ==========================================================================
   INFOGRÁFICO — RESULTADO POR LOCALIDADE
   Barras em eixo compartilhado no lugar dos cards. Card não compara, e
   comparar é o trabalho aqui. A barra cinza de peso existe porque percentual
   sozinho engana: 62% em 980 votos parecia mais que 54,5% em 3.820.
   ========================================================================== */
.ct-ei-regional-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.ct-ei-regional-titulo {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .09em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-ei-regional-titulo i {
    color: #94a3b8;
    font-size: 11px;
}

.ct-ei-legenda {
    display: flex;
    gap: 16px;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}

.ct-ei-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Escala sequencial (boletim de saude): a cor diz "pouco x muito", nao
   "time A x time B" — por isso degrade, e nao duas bolinhas categoricas. */
.ct-ei-legenda-escala {
    gap: 6px;
    align-items: center;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: #94a3b8;
}

.ct-ei-escala-passo {
    width: 20px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
}

/* Zona vira texto quando a cor ja esta ocupada pela gravidade. */
.ct-ei-linha-zona {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    flex-shrink: 0;
}

.ct-ei-bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ct-ei-mapa {
    margin-bottom: 20px;
}

.ct-ei-barras {
    display: flex;
    flex-direction: column;
}

/* Cabecalho de colunas: e o que faz o bloco ler como tabela de apuracao e
   nao como lista de widgets. A regra escura embaixo e a mesma convencao de
   tabela de jornal impresso. */
.ct-ei-tabela-cab {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) 2fr minmax(96px, .8fr);
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #0f172a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
}

.ct-ei-tabela-cab span:last-child {
    text-align: right;
}

.ct-ei-linha {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) 2fr minmax(96px, .8fr);
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.ct-ei-linha:first-child {
    padding-top: 4px;
}

.ct-ei-linha:last-child {
    padding-bottom: 4px;
}

.ct-ei-linha-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    min-width: 0;
}

.ct-ei-linha-nome span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-ei-linha-info {
    font-size: 11px;
    color: #94a3b8;
    flex-shrink: 0;
}

.ct-ei-linha-detalhe {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #64748b;
    padding: 0 0 8px 22px;
    margin-top: -4px;
}

.ct-ei-linha-barra {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-ei-trilho {
    flex: 1;
    height: 14px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.ct-ei-preenche {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.ct-ei-linha-pct {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    min-width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ct-ei-linha-peso {
    text-align: right;
}

.ct-ei-peso-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.ct-ei-peso-trilho {
    display: block;
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    margin-top: 4px;
    margin-left: auto;
    max-width: 88px;
    overflow: hidden;
}

.ct-ei-peso-fill {
    display: block;
    height: 100%;
    background: #cbd5e1;
    border-radius: 2px;
}

.ct-ei-barras-nota {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #94a3b8;
}

@media (max-width: 640px) {
    .ct-ei-linha {
        grid-template-columns: 1fr auto;
        grid-template-areas: "nome peso" "barra barra";
        gap: 6px 12px;
    }
    .ct-ei-linha-nome { grid-area: nome; }
    .ct-ei-linha-peso { grid-area: peso; }
    .ct-ei-linha-barra { grid-area: barra; }
    .ct-ei-peso-trilho { display: none; }
    .ct-ei-mapa .ct-leaflet-mapa { height: 260px !important; }
}

/* Últimas notícias: linha divisória em vez de card por item */
.ct-side-news-item {
    border-bottom: 1px solid #f1f5f9;
}

.ct-side-news-item:last-child {
    border-bottom: 0;
}

/* Honeypot anti-spam: fora da tela (nao display:none, que alguns bots
   detectam e ignoram) e fora da ordem de tab. */
.ct-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   RODAPÉ — estilos do rodapé e do pill de WhatsApp.
   Viviam num <style> impresso no footer.php: iam no HTML de TODA página (9 KB) e
   nunca cacheavam. Aqui o navegador baixa uma vez e reaproveita.
   ========================================================================== */
.ct-footer {
    background: #0f172a;
    color: #94a3b8;
    padding-top: 55px;
    font-family: var(--font-primary, "Google Sans", sans-serif);
    border-top: 4px solid var(--cor-primaria, #0284c7);
    margin-top: 50px;
}

/* Cinco colunas: marca e redes | Notícias | A Cidade | Institucional |
   Fale com a Redação. */
.ct-footer-main-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr 1.25fr;
    gap: 32px;
    padding-bottom: 45px;
}

/* Mídia Kit: único link com cor própria no rodapé (era style inline). */
.ct-footer-nav-list li a.ct-footer-link-destaque {
    color: #fb923c;
    font-weight: 700;
}

.ct-footer-nav-list--dinamica li a.ct-footer-link-destaque::before {
    color: #ea580c;
}

.ct-footer-logo-img {
    max-height: 52px;
    width: auto;
    margin-bottom: 16px;
    display: block;
}

.ct-footer-brand-title {
    margin: 0 0 14px 0;
    font-size: 22px;
    font-weight: 800;
}

.ct-footer-brand-title a {
    color: #ffffff;
    text-decoration: none;
}

.ct-footer-brand-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 18px 0;
}

.ct-footer-trust-badges {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 600;
}

.ct-footer-trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
}

.ct-footer-google-preferido {
    margin-top: 18px;
}

.ct-footer-heading {
    margin: 0 0 18px 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ct-footer-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--cor-primaria, #0284c7);
}

.ct-footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-footer-nav-list li a {
    color: #94a3b8;
    font-size: 13.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Seta antes do texto via ::before (nao mais um <i> literal no HTML) —
   assim funciona tanto na lista fixa de reserva quanto no menu de
   verdade gerado por wp_nav_menu(), que nao tem esse <i> pra estilizar.
   Escopado só na coluna "Editorias & Serviços" (.--dinamica) — a coluna
   "Institucional" ainda tem o <i> literal no HTML, então usar o
   seletor genérico aqui duplicaria a seta nela. */
.ct-footer-nav-list--dinamica li a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105";
    font-size: 10px;
    color: #64748b;
    transition: color 0.2s ease, transform 0.2s ease;
}

.ct-footer-nav-list li a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.ct-footer-nav-list--dinamica li a:hover::before {
    color: var(--cor-primaria, #0284c7);
}

/* Mesma seta, mas via <i> literal — só a coluna "Institucional", que
   ainda não foi convertida pra menu editável, continua com esse
   marcador no HTML. */
.ct-footer-nav-list:not(.ct-footer-nav-list--dinamica) li a i {
    font-size: 10px;
    color: #64748b;
    transition: transform 0.2s;
}

.ct-footer-nav-list:not(.ct-footer-nav-list--dinamica) li a:hover i {
    color: var(--cor-primaria, #0284c7);
}

.ct-footer-contacts {
    margin-bottom: 18px;
}

.ct-footer-zap-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(22, 163, 74, 0.15);
    border: 1px solid rgba(22, 163, 74, 0.35);
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 12px;
    transition: background 0.2s, transform 0.2s;
}

.ct-footer-zap-pill:hover {
    background: rgba(22, 163, 74, 0.25);
    transform: translateY(-1px);
}

.ct-footer-zap-pill i {
    font-size: 22px;
    color: #22c55e;
}

.ct-footer-zap-pill small {
    display: block;
    font-size: 11px;
    color: #86efac;
    text-transform: uppercase;
    font-weight: 700;
}

.ct-footer-zap-pill strong {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

.ct-footer-email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
}

.ct-footer-email-row a {
    color: #cbd5e1;
    text-decoration: none;
}

.ct-footer-email-row a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Telefones Úteis: <details> nativo, sem JS. O <summary> reaproveita a
   mesma linguagem do .ct-footer-heading (maiusculo, barra vermelha),
   so que clicavel — marcador padrao do navegador removido nas duas
   engines pra sobrar so a seta que a gente desenha. */
.ct-footer-tel-drop {
    margin-bottom: 18px;
}

.ct-footer-tel-drop-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none;
}

.ct-footer-tel-drop-toggle::-webkit-details-marker {
    display: none;
}

.ct-footer-tel-drop-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ct-footer-tel-drop-toggle i:first-child {
    color: var(--cor-primaria, #0284c7);
    font-size: 12px;
}

.ct-footer-tel-drop-seta {
    font-size: 11px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.ct-footer-tel-drop[open] .ct-footer-tel-drop-seta {
    transform: rotate(180deg);
}

.ct-footer-tel-drop-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-footer-tel-drop-list a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #94a3b8;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ct-footer-tel-drop-list a i {
    font-size: 10px;
    color: #64748b;
    transition: color 0.2s ease;
}

.ct-footer-tel-drop-list a:hover {
    color: #ffffff;
}

.ct-footer-tel-drop-list a:hover i {
    color: var(--cor-primaria, #0284c7);
}

.ct-footer-tel-num {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ct-footer-social-wrap {
    margin-top: 15px;
}

.ct-footer-social-label {
    display: block;
    font-size: 11.5px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.ct-footer-social-icons {
    display: flex;
    gap: 8px;
}

.ct-f-soc {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ct-f-soc:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.ct-f-soc--fb:hover { background: #1877f2; border-color: #1877f2; }
.ct-f-soc--ig:hover { background: #e1306c; border-color: #e1306c; }
.ct-f-soc--yt:hover { background: #ff0000; border-color: #ff0000; }
.ct-f-soc--tg:hover { background: #229ed9; border-color: #229ed9; }
.ct-f-soc--tw:hover { background: #000000; border-color: #ffffff; }
.ct-f-soc--tk:hover { background: #000000; border-color: #25f4ee; }

.ct-footer-col--brand .ct-footer-social-wrap {
    margin-top: 22px;
}

/* Faixa Urgente (Seções → Faixa Urgente): texto curto no topo de todas as páginas, com link opcional */
.ct-faixa-urgente { background: var(--marca-acento, #c0261c); color: #fff; }
.ct-faixa-urgente-in { display: flex; align-items: center; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
.ct-faixa-urgente-selo { flex: none; padding: 2px 9px; border-radius: 4px; background: #fff; color: var(--marca-acento, #c0261c); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ct-faixa-urgente-texto { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; }
a.ct-faixa-urgente-texto:hover { text-decoration: underline; }

/* Texto do rodapé (Identidade → Rodapé), na coluna da marca */
.ct-footer-sobre {
    margin: 14px 0 0;
    max-width: 36ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8;
}

/* Bandeira ou brasão da cidade (Identidade → Marca), ao lado do nome da cidade */
.ct-bandeira-mini {
    height: 18px;
    width: auto;
    margin-right: 6px;
    vertical-align: -3px;
    border-radius: 2px;
}

/* Dados institucionais (razão social, CNPJ, endereço, telefone), logo acima da barra de copyright */
.ct-f-inst {
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12.5px;
    line-height: 1.6;
    color: #94a3b8;
    text-align: center;
}
.ct-f-inst + .ct-footer-bottom-bar { border-top: 0; padding-top: 12px; }

/* Barra de Copyright */
.ct-footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #64748b;
}

.ct-f-copy-text strong {
    color: #cbd5e1;
}

.ct-f-copy-legal {
    display: flex;
    gap: 18px;
}

.ct-f-copy-legal a {
    color: #94a3b8;
    text-decoration: none;
}

.ct-f-copy-legal a:hover {
    color: #ffffff;
}

.ct-f-copy-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
}

/* Responsividade */
@media (max-width: 1100px) {
    .ct-footer-main-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* A marca ocupa a linha de cima inteira; as 4 listas vêm embaixo. */
    .ct-footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .ct-footer-main-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 580px) {
    .ct-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ct-footer-bottom-bar {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* ==========================================================================
   FAIXA "TRÂNSITO AGORA" (inc/transito.php) — interdições em andamento ou
   nas próximas 24h, logo abaixo do cabeçalho, em todas as páginas.
   Fundo âmbar claro de aviso; o rótulo escuro diz do que se trata.
   ========================================================================== */
.ct-transito {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}

.ct-transito-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ct-transito-rotulo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1a1a1a;
    color: #fbbf24;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 4px;
    text-decoration: none;
}

.ct-transito-rotulo span {
    color: #ffffff;
}

.ct-transito-lista {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ct-transito-lista::-webkit-scrollbar {
    display: none;
}

.ct-transito-lista li {
    flex-shrink: 0;
    max-width: 100%;
}

.ct-transito-lista li + li {
    padding-left: 22px;
    border-left: 1px solid #fde68a;
}

.ct-transito-lista a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
    white-space: nowrap;
}

.ct-transito-lista a:hover strong {
    text-decoration: underline;
}

.ct-transito-lista span {
    color: #78350f;
    margin-left: 6px;
}

.ct-transito-todas {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #78350f;
    text-decoration: none;
}

.ct-transito-todas:hover {
    text-decoration: underline;
}

/* No celular a faixa ficava em 2 blocos (rotulo numa linha, lista com texto
   quebrado em 2 linhas por item embaixo) — chegava a 124px de altura, mais
   que o dobro da faixa da marca. Vira ticker de 1 linha só, igual ao
   desktop: esconde o "motivo · período" (a matéria por trás do link ainda
   tem o detalhe) e o "Ver todas" (o próprio rótulo já linka pro arquivo). */
@media (max-width: 768px) {
    .ct-transito-lista span {
        display: none;
    }
    .ct-transito-todas {
        display: none;
    }
}

/* ==========================================================================
   BARRA FINA DO TOPO (inc/barra-topo.php): data, cidade, temperatura e paginas.
   So no computador; fica antes do cabecalho fixo e rola com a pagina.
   ========================================================================== */
.ct-barra-topo { display: none; }
@media (min-width: 993px) {
    .ct-barra-topo {
        display: block;
        background: #17191d;
        border-bottom: 1px solid #000;
        font-size: 12px;
        line-height: 1;
        color: #cbd5e1;
    }
    .ct-barra-topo-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 32px; }
    .ct-barra-topo-info { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
    .ct-barra-topo-info time { font-weight: 600; color: #fff; }
    .ct-barra-topo-info strong { margin-left: 2px; color: #fff; }
    .ct-barra-topo-sep { color: #5b6470; }
    .ct-barra-topo-links { display: flex; align-items: center; gap: 18px; }
    .ct-barra-topo-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #cbd5e1; text-decoration: none; white-space: nowrap; }
    .ct-barra-topo-links a:hover { color: #fff; text-decoration: underline; }
    .ct-barra-topo-links a.is-ao-vivo { color: var(--marca-acento, #c0261c); }
    .ct-barra-topo-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--marca-acento, #c0261c); animation: ct-barra-pulso 1.8s ease-in-out infinite; }
}
@keyframes ct-barra-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ct-barra-topo-ponto { animation: none; } }

/* ==========================================================================
   TOPO DE ESPECIAL (inc/selo-cabecalho.php): faixa escura com o título grande do especial
   (ELEIÇÕES 2026, CÍRIO 2026, 65 ANOS) no começo da categoria, da apuração e dos candidatos.
   Palavra pequena e espaçada com a linha tricolor, ano grande, texto e atalhos.
   ========================================================================== */
.ct-topo-especial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    margin: 0 0 28px;
    padding: 38px 44px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #12306b;
    background-image: radial-gradient(120% 140% at 100% 0%, #1d4a9a 0%, rgba(29, 74, 154, 0) 60%);
    color: #fff;
    border-radius: 6px;
}
/* O fundo de eleição: a foto da urna (assets/img/eleicao.jpg, já em tom azul) aparece do lado direito e se
   dilui no azul da faixa à esquerda, onde fica o texto. */
.ct-topo-especial::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(90deg, #12306b 0%, #12306b 30%, rgba(18, 48, 107, .72) 52%, rgba(18, 48, 107, 0) 85%),
        url("../img/eleicao.jpg");
    background-size: cover, cover;
    background-position: center, right center;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Mesmo desenho do título do cabeçalho: a palavra grande na serifada da marca e, embaixo, o ano pequeno e
   espaçado com a barra nas cores do Brasil puxando até ele (o último trecho é branco: o azul sumiria no fundo). */
.ct-topo-especial-marca {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    line-height: 1;
    color: #fff;
}
.ct-topo-especial-palavra {
    display: block;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 77px;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: .92;
    white-space: nowrap;
    color: #fff;
}
.ct-topo-especial-ano {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px -.34em 0 0;
    font-family: var(--font-primary, sans-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}
.ct-topo-especial-ano::before {
    content: "";
    flex: 1 1 auto;
    height: 4px;
    background: linear-gradient(90deg, #009c3b 0 33.34%, #ffdf00 33.34% 66.67%, #fff 66.67% 100%);
}
.ct-topo-especial-titulo {
    margin: 22px 0 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: #fff;
}
.ct-topo-especial-texto {
    max-width: 62ch;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: #dbe5f7;
}
.ct-topo-especial-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.ct-topo-especial-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}
.ct-topo-especial-links a:hover { background: #fff; color: #12306b; }
.ct-topo-especial-links a.is-ao-vivo { border-color: var(--marca-acento, #c0261c); background: var(--marca-acento, #c0261c); }
.ct-topo-especial-links a.is-ao-vivo .ct-barra-topo-ponto { background: #fff; }
.ct-topo-especial-links a.is-ao-vivo:hover { background: #fff; color: var(--marca-acento, #c0261c); }
.ct-topo-especial-links a.is-ao-vivo:hover .ct-barra-topo-ponto { background: var(--marca-acento, #c0261c); }

/* A ilustração fica num painel creme, para manter as cores dela. */
.ct-topo-especial-arte {
    width: 230px;
    padding: 12px;
    background: #f6f2ea;
    border-radius: 8px;
}
.ct-topo-especial-arte .ct-arte { width: 100%; height: auto; }

@media (max-width: 860px) {
    .ct-topo-especial { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
    .ct-topo-especial::before {
        background-image:
            linear-gradient(180deg, rgba(18, 48, 107, .9) 0%, rgba(18, 48, 107, .78) 100%),
            url("../img/eleicao.jpg");
    }
    .ct-topo-especial-arte { display: none; }
    .ct-topo-especial-palavra { font-size: 50px; }
    .ct-topo-especial-ano { font-size: 16px; margin-top: 10px; }
    .ct-topo-especial-ano::before { height: 3px; }
    .ct-topo-especial-titulo { font-size: 22px; margin-top: 16px; }
    .ct-topo-especial-texto { font-size: 15px; }
}

/* Página sem barra lateral (ex.: apuração): o conteúdo ocupa toda a largura */
.ct-main-grid.ct-main-grid--cheio { grid-template-columns: minmax(0, 1fr); }

.ct-apuracao-justica { display: block; width: 100%; max-width: 280px; height: auto; margin-inline: auto; }
.ct-topo-especial-arte .ct-apuracao-justica { max-width: 100%; }

/* Cabeçalho da apuração: logo da Justiça Eleitoral | Eleições 2026 | título */
.ct-apuracao-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 26px; padding: 4px 0 22px; border-bottom: 1px solid #e2e5ea; }
.ct-apuracao-cabeca-logo { height: auto; width: 190px; max-width: 100%; }
.ct-apuracao-cabeca-marca { display: flex; flex-direction: column; margin: 0; }
.ct-apuracao-cabeca-palavra { font-family: var(--font-serif, Georgia, serif); font-size: 52px; font-weight: 800; letter-spacing: -.022em; line-height: 1; color: #17191d; }
.ct-apuracao-cabeca-ano { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: .3em; color: #17191d; }
.ct-apuracao-cabeca-ano::before { content: ""; flex: 0 0 120px; height: 4px; background: linear-gradient(90deg, #009c3b 0 33.34%, #ffdf00 33.34% 66.67%, #002776 66.67% 100%); }
.ct-apuracao-cabeca-titulo { flex: 1 1 280px; margin: 0; padding-left: 28px; border-left: 1px solid #d5d9e0; font-family: var(--font-serif, Georgia, serif); font-size: 26px; font-weight: 800; line-height: 1.2; color: #17191d; }
@media (max-width: 700px) {
    .ct-apuracao-cabeca-palavra { font-size: 40px; }
    .ct-apuracao-cabeca-titulo { padding-left: 0; border-left: 0; font-size: 21px; }
}

/* Cabeçalho limpo dos especiais (categoria do Círio, aniversário etc.): mesma linguagem da apuração */
.ct-especial-cabeca-arte { flex: 0 0 auto; width: 150px; }
.ct-especial-cabeca-arte svg, .ct-especial-cabeca-arte img { display: block; width: 100%; height: auto; }
.ct-especial-cabeca-lado { flex: 1 1 300px; padding-left: 28px; border-left: 1px solid #d5d9e0; }
.ct-especial-cabeca-titulo { margin: 0 0 6px; font-family: var(--font-serif, Georgia, serif); font-size: 26px; font-weight: 800; line-height: 1.2; color: #17191d; }
.ct-especial-cabeca-texto { margin: 0; font-size: 16px; line-height: 1.5; color: #4a5260; }
.ct-especial-cabeca-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ct-especial-cabeca-links a { padding: 7px 14px; border: 1px solid #c9ced6; border-radius: 999px; font-size: 13px; font-weight: 600; color: #17191d; text-decoration: none; }
.ct-especial-cabeca-links a:hover { background: #17191d; border-color: #17191d; color: #fff; }
.ct-especial-cabeca-links a.is-ao-vivo { background: var(--marca-acento, #c0261c); border-color: var(--marca-acento, #c0261c); color: #fff; }
@media (max-width: 700px) {
    .ct-especial-cabeca-lado { padding-left: 0; border-left: 0; }
    .ct-especial-cabeca-titulo { font-size: 21px; }
}
.ct-especial-cabeca-arte { width: 190px; }
.ct-apuracao-semturno { margin: 0 0 16px; }

/* Cabeçalho limpo dos especiais de Festividades (Círio, festas, romarias) */
.ct-rel-cabeca { margin-top: 18px; }
.ct-rel-cabeca-arte { flex: 0 0 auto; width: 96px; color: var(--fest-cor, #7a2d52); }
.ct-rel-cabeca-arte svg, .ct-rel-cabeca-arte img { display: block; width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.ct-rel-cabeca-marca { flex: 0 1 auto; display: flex; flex-direction: column; max-width: 460px; }
.ct-rel-cabeca-sobre { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5b6472; }
.ct-rel-cabeca-titulo { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #17191d; }
.ct-rel-cabeca-barra { display: block; width: 140px; height: 4px; margin-top: 12px; background: linear-gradient(90deg, var(--fest-cor, #7a2d52) 0 50%, color-mix(in srgb, var(--fest-cor, #7a2d52) 40%, #fff) 50% 100%); }
.ct-rel-cabeca-tema { font-style: italic; margin-bottom: 6px; }
.ct-rel-cabeca-data { margin: 8px 0 0; font-size: 14px; color: #17191d; }
.ct-rel-cabeca-data strong { color: var(--fest-cor, #7a2d52); }
@media (max-width: 700px) {
    .ct-rel-cabeca-arte { width: 72px; }
    .ct-rel-cabeca-titulo { font-size: 27px; }
}

/* Clima e câmbio no cabeçalho (inc/header-info.php) */
.ct-header-esq { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ct-header-clima { display: inline-flex; align-items: center; gap: 9px; min-width: 0; line-height: 1.15; color: #17191d; }
.ct-header-clima-icone { font-size: 26px; color: #d2a000; flex: 0 0 auto; }
.ct-header-clima-txt { display: flex; flex-direction: column; min-width: 0; }
.ct-header-clima-cidade { font-size: 12px; font-weight: 600; color: #5b6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-header-clima-temps { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ct-header-clima-temps b { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.ct-header-clima-temps .ct-t-min { color: #0b5ea8; }
.ct-header-clima-temps .ct-t-max { color: #c0261c; }
.ct-header-clima-temps i { font-size: 11px; }
.ct-header-clima-chuva { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #0b7aa8; white-space: nowrap; }
.ct-header-clima-chuva i { font-size: 10px; }
.ct-header-clima-alerta { font-style: normal; padding: 2px 7px; border-radius: 4px; background: #c0261c; color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ct-header-cambio { display: inline-flex; align-items: center; gap: 16px; margin-right: 6px; line-height: 1.15; }
.ct-header-cambio-item { display: flex; flex-direction: column; align-items: flex-end; }
.ct-header-cambio-item small { font-size: 11px; font-weight: 600; color: #5b6472; }
.ct-header-cambio-item b { font-size: 14px; font-weight: 800; color: #17191d; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .ct-header-cambio { display: none; }
    .ct-header-clima-cidade, .ct-header-clima-chuva { display: none; }
}
@media (max-width: 520px) { .ct-header-clima-temps { font-size: 13px; gap: 6px; } .ct-header-clima-icone { font-size: 22px; } }
.ct-header-cambio-item { flex-direction: row; align-items: center; gap: 8px; }
.ct-header-cambio-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); flex: 0 0 auto; }
.ct-header-cambio-txt { display: flex; flex-direction: column; align-items: flex-start; }

/* Celular: o clima do cabeçalho cabe ao lado do menu sem encostar na logo (só o ícone e a máxima do dia) */
@media (max-width: 520px) {
    .ct-header-esq { gap: 8px; min-width: 0; overflow: hidden; }
    .ct-header-clima { gap: 5px; }
    .ct-header-clima-icone { font-size: 18px; }
    .ct-header-clima-cidade, .ct-header-clima-temps .ct-t-min, .ct-header-clima-chuva, .ct-header-clima-alerta { display: none; }
    .ct-header-clima-temps { font-size: 13px; }
    .ct-header-clima-temps .ct-t-max { color: #17191d; }
    .ct-header-clima-temps .ct-t-max i { display: none; }
}

/* Celular estreito: a coluna do hambúrguer + clima nunca pode passar do espaço ao lado da logo. */
@media (max-width: 520px) {
    .ct-header-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
    .ct-header-esq { max-width: 100%; }
    .ct-header-clima { position: relative; z-index: 2; background: #fff; }
}
@media (max-width: 420px) {
    .ct-header-esq { gap: 6px; }
    .ct-header-clima-icone { font-size: 15px; }
    .ct-header-clima-temps { font-size: 12px; }
    .ct-header-brand .ct-logo img, .ct-header-brand .ct-logo svg { max-width: 118px; height: auto; }
}
@media (max-width: 350px) {
    .ct-header-clima-icone { display: none; }
}

/* Clima no celular: faixa fina própria acima do cabeçalho (o chip ao lado do menu some, para nunca ficar sob a logo) */
.ct-clima-faixa-mobile { display: none; }
@media (max-width: 700px) {
    .ct-clima-faixa-mobile {
        display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px;
        padding: 6px 12px; background: #f4f6f9; border-bottom: 1px solid #e6e9ee;
        font-size: 12.5px; line-height: 1.2; color: #17191d;
    }
    .ct-clima-faixa-mobile > i { font-size: 15px; color: #d2a000; }
    .ct-clima-faixa-mobile strong { font-weight: 800; }
    .ct-clima-faixa-mobile .ct-cfm-min { color: #0b5ea8; font-weight: 700; }
    .ct-clima-faixa-mobile .ct-cfm-max { color: #c0261c; font-weight: 700; }
    .ct-clima-faixa-mobile .ct-cfm-chuva { color: #0b7aa8; font-weight: 700; }
    .ct-clima-faixa-mobile i { margin-right: 2px; font-size: 11px; }
    .ct-clima-faixa-mobile > i:first-child { font-size: 15px; margin-right: 0; }
    .ct-header-esq .ct-header-clima { display: none; }
}

/* Celular: sem clima no cabeçalho (o próprio aparelho já mostra). Vale a faixa fina e o chip ao lado do menu. */
@media (max-width: 700px) {
    .ct-clima-faixa-mobile,
    .ct-header-esq .ct-header-clima { display: none !important; }
}

/* Selos de segurança do rodapé: ícone em círculo + rótulo pequeno e destaque */
.ct-footer-trust-badges { gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ct-footer-trust-badges .ct-selo-conf { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.ct-selo-conf > i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; }
.ct-selo-conf--ssl > i { background: rgba(16,185,129,.16); color: #34d399; }
.ct-selo-conf--lgpd > i { background: rgba(96,165,250,.16); color: #93c5fd; }
.ct-selo-conf-txt { display: flex; flex-direction: column; line-height: 1.15; }
.ct-selo-conf-txt small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.ct-selo-conf-txt strong { font-size: 13px; font-weight: 700; color: #f1f5f9; }


/* Selos do rodapé: sem caixa (o span interno herdava o fundo e a borda e virava um card dentro do outro) */
.ct-footer-trust-badges .ct-selo-conf,
.ct-footer-trust-badges .ct-selo-conf .ct-selo-conf-txt { background: none; border: 0; padding: 0; border-radius: 0; }
.ct-footer-trust-badges { gap: 22px; }
.ct-footer-trust-badges { flex-wrap: nowrap; gap: 16px; }
.ct-footer-trust-badges .ct-selo-conf { gap: 8px; white-space: nowrap; }

/* Coluna da marca no rodapé: ritmo de espaçamento único (24px entre grupos), tudo alinhado à esquerda */
.ct-footer-col--brand { text-align: left; }
.ct-footer-col--brand .ct-marca { margin-bottom: 24px; }
.ct-footer-col--brand .ct-footer-trust-badges { margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); gap: 22px; align-items: center; }
.ct-footer-col--brand .ct-selo-conf { gap: 10px; }
.ct-footer-col--brand .ct-selo-conf > i { width: 32px; height: 32px; font-size: 13px; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ct-footer-col--brand .ct-selo-conf-txt { text-align: left; align-items: flex-start; gap: 2px; }
.ct-footer-col--brand .ct-selo-conf-txt small { font-size: 9.5px; letter-spacing: .08em; }
.ct-footer-col--brand .ct-selo-conf-txt strong { font-size: 13px; }
.ct-footer-col--brand .ct-footer-social-wrap { margin-top: 0; }
.ct-footer-col--brand .ct-footer-social-label { margin-bottom: 12px; }
/* Texto do rodapé (Identidade → Rodapé): junto da logo e com respiro antes dos selos */
.ct-footer-col--brand .ct-footer-sobre { margin: 0 0 24px; }
.ct-footer-col--brand .ct-marca:has(+ .ct-footer-sobre) { margin-bottom: 12px; }
.ct-footer-col--brand a:has(+ .ct-footer-sobre) .ct-footer-logo-img { margin-bottom: 10px; }

/* Rodapé — acabamento:
   1) barra sob os títulos das colunas em branco (antes usava a cor primária, quase preta no fundo escuro);
   2) os dois cartões de WhatsApp (Redação e Canal) com o mesmo ícone, texto e efeito;
   3) ícones que sumiam no fundo escuro (telefones úteis, comarca). */
.ct-footer-heading::after { background: #ffffff; }
.ct-footer-zap-pill { margin-bottom: 0; }
.ct-footer-contacts .ct-footer-zap-pill { margin-bottom: 14px; }
.ct-footer-zap-pill i { flex: 0 0 auto; font-size: 26px; line-height: 1; color: #25d366; }
.ct-footer-zap-pill small { margin-bottom: 2px; font-size: 10.5px; letter-spacing: .06em; line-height: 1.2; }
.ct-footer-zap-pill strong { font-size: 14.5px; line-height: 1.25; }
.ct-footer-col--brand .ct-footer-zap-pill--canal { margin-top: 22px; }
.ct-footer-tel-drop-toggle i:first-child,
.ct-footer-tel-drop-list a i { color: #94a3b8; }
.ct-f-copy-location i { color: #94a3b8; }
.ct-footer-contacts .ct-footer-zap-pill { min-height: 73px; box-sizing: border-box; }

/* Rodapé: textos brancos menores (cartões de WhatsApp e selos) */
.ct-footer-zap-pill strong { font-size: 13px; font-weight: 700; }
.ct-footer-zap-pill small { font-size: 9.5px; }
.ct-footer-zap-pill i { font-size: 24px; }
.ct-footer-contacts .ct-footer-zap-pill { min-height: 64px; }
.ct-footer-col--brand .ct-selo-conf-txt strong { font-size: 12px; }
.ct-footer-col--brand .ct-selo-conf-txt small { font-size: 9px; }
.ct-footer-contacts .ct-footer-zap-pill { min-height: 68px; }

/* Câmara: bloco "Na Câmara" (página dos vereadores) e "Vereadores citados" (fim da matéria) */
.ct-na-camara { margin-bottom: 26px; }
.ct-na-camara .ct-editorial-box-titulo { position: relative; }
.ct-na-camara-todas { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #4a5260; text-decoration: none; }
.ct-na-camara-todas:hover { color: #17191d; text-decoration: underline; }
.ct-na-camara-lista { list-style: none; margin: 0; padding: 0; }
.ct-na-camara-lista li + li { border-top: 1px solid #eef1f5; }
.ct-na-camara-lista a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; text-decoration: none; color: inherit; }
.ct-na-camara-titulo { font-family: var(--font-serif, Georgia, serif); font-size: 18px; font-weight: 700; line-height: 1.25; color: #17191d; }
.ct-na-camara-lista a:hover .ct-na-camara-titulo { color: #4a5260; text-decoration: underline; }
.ct-na-camara-lista time { font-size: 12px; color: #8b93a0; white-space: nowrap; }

.ct-citados { margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid #e2e8f0; }
.ct-citados-titulo { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.ct-citados-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ct-citados-lista a { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border: 1px solid #e2e8f0; border-radius: var(--ct-img-radius, 8px); text-decoration: none; color: inherit; }
.ct-citados-lista a:hover { border-color: #cbd5e1; }
.ct-citados-foto { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #eef1f5; }
.ct-citados-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-citados-nome { font-size: 14px; font-weight: 700; color: #17191d; line-height: 1.2; }
.ct-citados-partido { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #64748b; }