/*
 * 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;
}

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

/* 3. Top Bar Municipal */
.ct-top-bar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    color: #64748b;
    height: 38px;
    display: flex;
    align-items: center;
}

.ct-top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ct-top-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 11.5px;
    color: #475569;
}

.ct-top-date i,
.ct-top-city i {
    color: var(--cor-primaria, #008a20);
    margin-right: 3px;
}

.ct-top-sep {
    color: #cbd5e1;
}

.ct-top-util-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-top-util-link {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.ct-top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 1. Redes Sociais: Cada uma dentro de um círculo */
.ct-top-social-circles {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-social-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 11px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ct-social-circle:hover {
    background: var(--cor-primaria, #008a20);
    border-color: var(--cat-cor, var(--cor-primaria, #008a20));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 138, 32, 0.25);
}

/* 2 e 3. Links Limpos sem Badge (Anuncie & Painel/Entrar) */
.ct-top-clean-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    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));
}

/* Master Header (Logo à Esquerda + Super Banner 728x90 à Direita) */
/* ==========================================================================
   HEADER
   Marca, navegacao e busca numa faixa so. Antes eram duas faixas empilhadas
   (logo + banner numa, menu noutra) que somavam 179px no desktop; com a faixa
   de servico e o ticker, o cromo comia 257px — 29% da dobra — antes da
   primeira manchete.
   ========================================================================== */

.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;
    }
}

.ct-header-row {
    display: flex;
    align-items: center;
    gap: 26px;
    /*
     * 94px, e nao 78: a marca em duas linhas (nome + assinatura) mede ~49px, e
     * a 78 sobravam 14px de folga em cima e embaixo — apertado para um masthead
     * de jornal, que precisa de ar para nao parecer colado na borda.
     * O custo sao 16px da primeira dobra, pagos de proposito.
     */
    height: 94px;
    transition: height .22s ease;
}

/*
 * Grid 1fr/auto/1fr, e nao flex: com flex a marca escorregaria para o lado do
 * menu mais curto, porque cada nav ocuparia a largura do proprio conteudo. No
 * grid as duas colunas laterais valem o mesmo, entao a marca fica no centro
 * OTICO da faixa mesmo com 4 itens de um lado e 5 do outro.
 */
@media (min-width: 993px) {
    .ct-header-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
}

.ct-header-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ct-header-nav {
    display: flex;
    min-width: 0;
}

/*
 * O alinhamento vai na LISTA, e nao na <nav>: o <ul> estica ate a largura da
 * coluna do grid, entao justify-content na <nav> nao movia nada — os itens
 * empacotavam no inicio do proprio <ul> e sobravam 122px de vao antes da
 * marca, contra 26px do outro lado.
 */
.ct-header-nav--esq .ct-main-menu { justify-content: flex-end; }

.ct-header-nav--dir .ct-main-menu { justify-content: flex-start; }

/* Marca centralizada: sem isto ela herdaria o alinhamento a esquerda. */
.ct-header-brand { justify-content: center; }

/* Busca na barra de cima, ao lado das redes. */
.ct-top-busca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    opacity: .85;
    transition: opacity .2s ease;
}

.ct-top-busca:hover { opacity: 1; }

/* 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: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 0;
}

/*
 * O formato oficial do banner do topo e 1170px (banner-positions.php) —
 * exatamente a largura util do .ct-container (1200 de max-width menos os
 * 15px de respiro de cada lado), a mesma que o resto da pagina usa. Por
 * isso NAO ha mais override de padding aqui: antes o criativo era vendido
 * em 1200 "de verdade" e essa regra tirava o respiro so nesta faixa pra
 * caber — só que aí o banner ficava 30px mais largo que a grade de
 * noticias logo abaixo, 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 a marca fica no meio, entre o menu e a busca. */
    .ct-header-brand {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
    /* O banner do topo era ct-desktop-only na estrutura antiga. Mantido assim:
       no celular o bloco ocupa 155px, um terço da dobra, antes da primeira
       manchete. Se um dia entrar criativo mobile proprio (320x100), e so
       trocar este display por um bloco com altura fixa. */
    .ct-header-banner {
        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;
}

@media (max-width: 992px) {
    /* Mesmo ponto de quebra do .ct-desktop-only, para nao haver faixa de
       largura em que a barra some mas o resto ainda se acha desktop. */
    .ct-top-bar {
        display: none;
    }
}

/* 4. Barra de Navegação Horizontal */




.ct-main-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.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: 14px;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    padding: 0 4px;
    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));
}

/* 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: 3px;
    background: var(--cor-primaria, #4f7c25);
    border-radius: 8px 2px 0 0;
}

/* Dropdown Submenu */
.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);
    transition: all 0.2s ease;
    z-index: 1001;
}

.ct-main-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.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;
}

.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;
}

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

/* 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;
}

.ct-nsearch-icon {
    font-size: 18px;
    color: var(--cor-primaria, #4f7c25);
    flex-shrink: 0;
}

.ct-nsearch-input {
    flex: 1;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 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 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cor-primaria, #4f7c25);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.ct-nsearch-submit:hover {
    background: #3e621d;
    transform: translateY(-1px);
}

.ct-nsearch-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.ct-nsearch-close:hover {
    color: #0f172a;
}

@media (max-width: 768px) {
    .ct-nav-center {
        display: none;
    }
    .ct-nsearch-submit span {
        display: none;
    }
    .ct-nsearch-submit {
        padding: 10px 14px;
    }
}

/* 5. Ticker (Top News & Breadcrumbs) */
.ct-ticker-wrap {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0;
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ct-ticker-content {
    display: flex;
    align-items: center;
    font-size: 13px;
    width: 100%;
}

.ct-ticker-label {
    background: var(--cor-primaria);
    color: #ffffff;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-right: 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ct-ticker-title {
    color: #333333;
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font-heading, "Google Sans", sans-serif);
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.2s;
}

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

/* 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;
}

/* 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;
}

.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 */
.ct-offcanvas {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #111;
    z-index: 10000;
    transition: left 0.3s ease, box-shadow 0.3s ease;
    overflow-y: auto;
}

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

.ct-offcanvas-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.ct-offcanvas-content {
    padding: 60px 20px 20px;
    color: #fff;
}

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

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

.ct-offcanvas-content .menu a {
    display: block;
    padding: 15px 0;
    color: #ccc;
    font-family: var(--font-heading);
    font-weight: bold;
    text-transform: uppercase;
}

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

.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;
    }
}

.ct-comment-item {
    margin-bottom: 18px;
}

.ct-comment-body {
    display: flex;
    gap: 15px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.ct-comment-avatar img {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
    display: block;
}

.ct-comment-content {
    flex: 1;
    min-width: 0;
}

.ct-comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.ct-comment-author {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    font-family: var(--font-heading);
}

.ct-comment-date {
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
    white-space: nowrap;
}

.ct-comment-text {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}

.ct-comment-text p:last-child {
    margin-bottom: 0;
}

.ct-comment-awaiting {
    display: inline-block;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ct-comment-reply {
    margin-top: 10px;
}

.ct-comment-reply a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 700;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    transition: .2s;
}

.ct-comment-reply a:hover {
    background: var(--cor-primaria);
    color: #fff;
}

#cancel-comment-reply-link {
    display: inline-block;
    margin-left: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #ef4444;
    text-decoration: none;
}

#cancel-comment-reply-link:hover {
    text-decoration: underline;
}

/* FORMULARIO DE COMENTARIO (estilo chat: avatar + campo + botao redondo) */
.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. */
body:has(.ct-header:not(.is-oculta)) .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: 700;
    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: 0;
}

.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: 16px;
    font-weight: 600;
    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; }
}

/*
 * O menu principal precisa de mais fôlego do que o resto do que usa
 * .ct-desktop-only/.ct-mobile-only: nove itens, dois deles com duas
 * palavras ("Economia Local", "Cultura & Lazer"), pedem uns 800px numa
 * linha só sem quebrar. Entre 993px e ~1150px o header só sobra uns
 * 590-750px depois do logo e da busca — o menu ficava quebrado ali
 * (as duas etiquetas de duas palavras iam para uma segunda linha,
 * desalinhadas do resto) ou, sem quebra, vazava da tela.
 *
 * Regras mais específicas que as genéricas acima vencem por
 * especificidade, então a nav e o hamburguer têm sua própria régua —
 * o hamburguer aguenta essa faixa a mais em vez do menu completo.
 */
@media (max-width: 1199px) {
    nav.ct-header-nav.ct-desktop-only {
        display: none !important;
    }
    button.ct-hamburger.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: era style inline, e a option vazia gerava src="". */
.ct-offcanvas-logo {
    margin-bottom: 30px;
    filter: brightness(0) invert(1);
    max-height: 40px;
}

.ct-offcanvas-nome {
    display: block;
    margin-bottom: 30px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

/* Trilho de últimas: as manchetes correm em fila contínua em vez de aparecer
   uma por vez com setas de anterior/próximo. O <div> interno é o que anda; o
   pai é a janela que recorta. */
.ct-ticker-items {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ct-ticker-track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    will-change: transform;
}

.ct-ticker-items .ct-ticker-title {
    flex-shrink: 0;
}

/* Sem animação (prefers-reduced-motion): vira fila que se rola com o dedo. */
.ct-ticker-items--estatico {
    overflow-x: auto;
    scrollbar-width: none;
    transform: none !important;
}

.ct-ticker-items--estatico::-webkit-scrollbar {
    display: none;
}

@media (max-width: 992px) {
    .ct-ticker-wrap {
        height: 36px;
    }
    .ct-ticker-label {
        font-size: 10px;
        padding: 3px 8px;
        margin-right: 10px;
    }
    .ct-ticker-title {
        font-size: 12.5px;
    }
}

/* 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: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .14);
}

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

.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: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}

.ct-offcanvas-data {
    font-size: 12.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .6);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 16px;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   NEWSLETTER — captura de e-mail (cidadetrevo_newsletter_form, plugin)
   Card ao final da matéria, mesma linguagem visual do resto do site
   (cantos arredondados, borda leve, acento na cor da franquia).
   ========================================================================== */
.ct-newsletter-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 26px 28px;
    margin: 28px 0;
    text-align: center;
}

/* Icone ao lado do titulo/descricao, nao sozinho empilhado em cima — um
   circulo isolado flutuando acima do texto ficava sem relacao visual com
   nada. */
.ct-newsletter-header {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    max-width: 480px;
    margin: 0 auto 18px;
}

.ct-newsletter-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cor-primaria, #2271b1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ct-newsletter-txt h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
}

.ct-newsletter-txt p {
    margin: 0;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.45;
}

.ct-newsletter-form {
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .ct-newsletter-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}

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

.ct-newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    /* 16px — mesma razao do .ct-nsearch-input. */
    font-size: 16px;
    background: #ffffff;
}

.ct-newsletter-btn {
    flex-shrink: 0;
    background: var(--cor-primaria, #2271b1);
    color: #ffffff;
    border: none;
    padding: 12px 22px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease;
}

.ct-newsletter-btn:hover {
    filter: brightness(1.1);
}

.ct-newsletter-consent {
    display: block;
    margin-top: 12px;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.5;
}

.ct-newsletter-consent input {
    margin-right: 5px;
    vertical-align: middle;
}

.ct-newsletter-consent a {
    color: #64748b;
    text-decoration: underline;
}

.ct-newsletter-notice {
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ct-newsletter-notice--ok {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.ct-newsletter-notice--erro {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@media (max-width: 600px) {
    .ct-newsletter-row {
        flex-direction: column;
    }
    .ct-newsletter-btn {
        width: 100%;
    }
}