/*
Theme Name: Correio Santamariense
Theme URI: https://cidadetrevo.com
Author: Antigravity
Author URI: https://cidadetrevo.com
Description: Tema do Portal Correio Santamariense, jornal digital de Santa Maria do Pará — matérias, colunistas, classificados, guia comercial, agenda, obituário, enquetes e assinatura de leitor num único portal completo. Construído sobre o motor Cidade Trevo (a mesma base de código, clonável por cidade/franquia). Estilo editorial de jornal (magazine), otimizado, veloz, sem dependências externas de front-end.
Version: 1.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: Todos os direitos reservados
License URI: https://cidadetrevo.com/licenca
Text Domain: cidadetrevo
Tags: noticias, jornal, editorial, portal-municipal, magazine
*/

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

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: 12px;
}

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 0.3s ease, opacity 0.3s ease;
}

.bopea-list-thumb:hover img {
    filter: brightness(1.12);
}

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

/* CTA do grupo/canal de WhatsApp em Minha Conta — mesma cor/estilo já
   usado nos botões de WhatsApp de classificado/vaga/pet em single.php,
   só que como classe (reaproveitável) em vez de style inline repetido. */
.ct-conta-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: #25d366;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    padding: 13px 0;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 16px;
}

.ct-conta-whatsapp-btn i {
    font-size: 18px;
}

.ct-conta-whatsapp-btn:hover {
    background: #1ebe5a;
    color: #fff;
}

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

/* ---------- Placar de Jogos (Copa Rural e outros torneios) ---------- */
.ct-jogos-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-jogo-card {
    padding: 0;
}

.ct-jogo-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 10px;
}

.ct-jogo-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.ct-jogo-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.ct-jogo-status--agendado {
    background: #fef9e7;
    color: #92400e;
}

.ct-jogo-status--encerrado {
    background: #edfaef;
    color: #166534;
}

/* Cartao "Proximo Jogo" em destaque — sem borda colorida lateral (evitado
   de proposito neste site); o destaque vem do tamanho maior, do fundo
   levemente diferenciado e do rotulo acima, nao de cor de acento na borda. */
.ct-jogo-card--destaque {
    background: #f8fafc;
    padding: 22px 24px;
}

.ct-jogo-card--destaque .ct-jogo-time-nome {
    font-size: 16px;
}

.ct-jogo-card--destaque .ct-jogo-placar {
    font-size: 26px;
}

/* Coluna estreita (widget do Placar de Jogos, hoje 1 de 3 colunas do painel
   da home, ~280px): o destaque de 64px/16px/26px foi pensado pra largura do
   conteudo principal. Lado a lado (brasao + nome), o nome sobrava so uns
   30px de largura — pouco pra "Santa Rita EC" mesmo quebrando linha, o
   texto cortava letra por letra ("Sant" / "a Rita" / "EC"). Empilhado
   (brasao em cima, nome embaixo, centralizado) o nome usa a coluna inteira
   (~80px) em vez de menos da metade dela. */
.ct-copa-widget .ct-jogo-card--destaque {
    padding: 0;
}
.ct-copa-widget .ct-jogo-card--destaque .ct-jogo-time {
    flex-direction: column !important;
    text-align: center;
    gap: 6px;
}
.ct-copa-widget .ct-jogo-confronto .ct-jogo-time:last-child {
    flex-direction: column !important;
}
.ct-copa-widget .ct-jogo-card--destaque .ct-jogo-brasao,
.ct-copa-widget .ct-jogo-card--destaque .ct-jogo-brasao-reserva {
    width: 60px !important;
    height: 60px !important;
}
.ct-copa-widget .ct-jogo-card--destaque .ct-jogo-time-nome {
    font-size: 12.5px;
    white-space: normal;
    line-height: 120%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.ct-copa-widget .ct-jogo-card--destaque .ct-jogo-placar {
    font-size: 18px;
}
.ct-copa-widget .ct-jogo-confronto {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 20px 0;
}
.ct-copa-widget .ct-jogo-rodape {
    flex-direction: row;
    gap: 4px;
    display: flex;
    align-items: normal;
    justify-content: space-evenly;
}

.ct-jogo-eyebrow {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cor-primaria, #1a1a1a);
    margin-bottom: 10px;
}

.ct-jogo-brasao-reserva {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f1f5f9;
    color: #cbd5e1;
    flex-shrink: 0;
}

.ct-jogo-brasao-reserva i,
.ct-jogo-brasao-reserva svg {
    width: 60%;
    height: 60%;
    font-size: 60%;
}

.ct-jogo-confronto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.ct-jogo-time {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ct-jogo-confronto .ct-jogo-time:last-child {
    flex-direction: row-reverse;
    text-align: right;
}

.ct-jogo-brasao {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.ct-jogo-time-nome {
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-jogo-placar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading, sans-serif);
    font-size: 19px;
    color: #1a1a1a;
    padding: 0 6px;
    margin-top: -16px;
}

/* Os NUMEROS sao o dado que mais importa no card — ficam bem maiores e
   mais pesados que o resto; o "x" entre eles (span solto, estilo abaixo)
   continua pequeno e apagado de proposito, pra nao competir com o placar. */
.ct-jogo-placar strong {
    font-size: 1.7em;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: #f1f5f9;
    color: #0f172a;
    padding: 3px 12px;
    border-radius: 6px;
}

.ct-jogo-placar span {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
}

.ct-jogo-vs {
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
}

.ct-jogo-rodape {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef0f2;
    font-size: 12px;
    color: #64748b;
}

.ct-jogo-rodape i {
    margin-right: 4px;
    color: #94a3b8;
}

@media (max-width: 480px) {
    .ct-jogo-time-nome {
        font-size: 12.5px;
    }
    .ct-jogo-brasao {
        width: 32px;
        height: 32px;
    }
    .ct-jogo-rodape {
        flex-direction: column;
        gap: 4px;
    }
}

/* ============================================================
   RESULTADO (jogo já encerrado) — card compacto de uma linha só,
   diferente do card grande do "Próximo Jogo": aqui o brasão fica do lado
   de dentro (perto do placar) e o nome do time do lado de fora, e a
   chamada pra ação é o "Ver jogos da rodada", não uma caixa de placar.
   ============================================================ */
.ct-jogo-resultado {
    text-align: center;
    padding: 0;
}
.ct-jogo-resultado-torneio-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    text-align: left;
}
.ct-jogo-resultado-torneio,
.ct-jogo-resultado-rodada {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ct-jogo-resultado-torneio {
    color: var(--cor-primaria, #1a1a1a);
}
.ct-jogo-resultado-rodada {
    color: #94a3b8;
}
.ct-jogo-resultado-data {
    font-size: 11.5px;
    font-weight: 400;
    color: #94a3b8;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 10px;
}
.ct-jogo-resultado-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
/* Lado a lado (brasão + nome) por padrão — cabe de sobra no calendário
   completo e no widget da categoria Esportes (500px+ de largura). O
   brasão do visitante fica espelhado (row-reverse) só pra ele ficar na
   borda de fora e o nome perto do placar, dos dois lados. */
.ct-jogo-resultado-time {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.ct-jogo-resultado-time--visitante {
    flex-direction: row-reverse;
}
.ct-jogo-resultado-time .ct-jogo-time-nome {
    text-align: left;
}
.ct-jogo-resultado-time--visitante .ct-jogo-time-nome {
    text-align: right;
}
/* Empilhado (brasão em cima, nome embaixo, centralizado) só na coluna
   estreita do painel da home (~240px de largura): lado a lado ali não
   sobra espaço nenhum pro nome se o brasão dividir a linha com ele —
   testado e confirmado, "São Sebastião EC" ficava com ~35px de largura e
   quebrava letra por letra. Empilhado, o nome usa a coluna inteira. */
.ct-copa-widget .ct-jogo-resultado-time,
.ct-copa-widget .ct-jogo-resultado-time--visitante {
    flex-direction: column;
}
.ct-copa-widget .ct-jogo-resultado-time .ct-jogo-time-nome {
    text-align: center;
}
.ct-jogo-resultado-linha .ct-jogo-time-nome {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}
/* O placar e o "vs" dividem a mesma "pilula" cinza — mesma largura/altura
   nos dois estados, pra o card não mudar de forma dependendo se o jogo já
   tem resultado ou não. */
.ct-jogo-resultado-linha .ct-jogo-placar {
    gap: 4px;
    padding: 5px 9px;
    background: #f1f5f9;
    border-radius: 8px;
    justify-content: center;
    flex-shrink: 0;
}
.ct-jogo-resultado-linha .ct-jogo-placar strong {
    background: none;
    padding: 0;
    font-size: 19px;
    font-weight: 900;
    color: #0f172a;
}
.ct-jogo-resultado-linha .ct-jogo-placar span {
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 800;
}
.ct-jogo-resultado-x {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ct-jogo-eyebrow--centro {
    justify-content: center;
    margin-bottom: 10px;
}
.ct-jogo-resultado-cta {
    display: inline-block;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.04em;
    padding: 0;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ct-jogo-resultado-cta:hover {
    color: #ffffff;
    transform: translateY(-1px);
}
/* Verde: resultado já saiu, "saiba como foi" (mesma cor semantica de
   "Encerrado" usada no badge de status em outras telas do site).
   Azul: jogo ainda não aconteceu, "fique por dentro" — cor informativa,
   não de alerta (não é a mesma cor de "Agendado" nos badges porque aqui é
   uma chamada pra ação, não um rótulo de status). */
.ct-jogo-resultado-cta--ok {
    color: #16a34a;
}
.ct-jogo-resultado-cta--ok:hover {
    color: #15803d;
}
.ct-jogo-resultado-cta--info {
    color: #2563eb;
}
.ct-jogo-resultado-cta--info:hover {
    color: #1d4ed8;
}

/* ---------- Desafio da Cidade (quiz) ---------- */
.ct-quiz-progresso-barra {
    height: 8px;
    background: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
}

.ct-quiz-progresso-fill {
    height: 100%;
    background: var(--cor-primaria, #1a1a1a);
    border-radius: 100px;
    transition: width .3s ease;
}

.ct-quiz-modos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ct-quiz-modo-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 24px 20px;
    text-align: center;
}

.ct-quiz-modo-card i {
    font-size: 22px;
    color: var(--cor-primaria, #1a1a1a);
    margin-bottom: 10px;
}

.ct-quiz-modo-card h4 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #111;
}

.ct-quiz-modo-card p {
    font-size: 13.5px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}

.ct-quiz-modo-card .ct-btn-pay {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    cursor: pointer;
}

.ct-quiz-timer-barra {
    height: 6px;
    background: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
}

.ct-quiz-timer-fill {
    height: 100%;
    width: 100%;
    background: #f59e0b;
    border-radius: 100px;
}

.ct-quiz-alternativas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.ct-quiz-alt {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ct-quiz-alt:hover:not(:disabled) {
    border-color: var(--cor-primaria, #1a1a1a);
    background: #fff;
}

.ct-quiz-alt:disabled {
    cursor: default;
}

.ct-quiz-alt--correta {
    background: #edfaef;
    border-color: #b8e6c2;
    color: #166534;
}

.ct-quiz-alt--errada {
    background: #fbeaea;
    border-color: #f5c6c6;
    color: #991b1b;
}

.ct-quiz-curiosidade {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #333;
}

.ct-quiz-curiosidade:empty {
    display: none;
}

.ct-quiz-curiosidade::before {
    content: "Você sabia?";
    display: block;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    font-family: var(--font-heading, sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #64748b;
}

.ct-quiz-ranking-lista {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.ct-quiz-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.ct-quiz-ranking-item:last-child {
    border-bottom: none;
}

.ct-quiz-ranking-item--eu {
    background: #fef9e7;
    margin: 0 -8px;
    padding: 10px 8px;
    border-radius: 4px;
}

.ct-quiz-ranking-pos {
    font-weight: 800;
    color: #999;
    width: 28px;
    flex-shrink: 0;
}

.ct-quiz-ranking-nome {
    flex: 1;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-quiz-ranking-pontos {
    font-weight: 700;
    color: #666;
    font-variant-numeric: tabular-nums;
}

/* Página Minha Conta — campo de trocar foto e lista de benefícios */
.ct-perfil-foto-campo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ct-conta-beneficios p:first-child {
    margin-top: 0;
}

.ct-conta-beneficios p:last-child {
    margin-bottom: 0;
}

.ct-conta-beneficios ul {
    margin: 0;
    padding-left: 20px;
}

.ct-conta-beneficios li {
    margin-bottom: 6px;
}

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

/* Paywall de materia exclusiva (single.php, _cidadetrevo_exclusivo) —
   reaproveita .ct-btn-pay do dropdown de assinatura pra manter o mesmo
   botao em todo o site. */
.ct-paywall-teaser {
    position: relative;
    max-height: 220px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.ct-paywall-cta {
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 28px 20px;
    margin-top: -12px;
}

.ct-paywall-cta p {
    font-weight: 700;
    color: #334155;
    margin-bottom: 14px;
}

.ct-paywall-cta .ct-btn-pay {
    display: inline-block;
    max-width: 320px;
    margin: 0 auto;
    cursor: pointer;
}

/* Popup de assinatura (estilo grandes jornais — O Globo, Folha): some
   sozinho depois de alguns segundos de leitura numa matéria bloqueada
   (materia.js), fundo desfocado e sem rolagem, até assinar ou sair da
   página — de propósito sem botão de fechar, mesma lógica do teaser+CTA
   que já existe atrás dele (.ct-paywall-teaser/.ct-paywall-cta): aqui é a
   interrupção, não uma segunda forma de dispensar. */
.ct-paywall-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.ct-paywall-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
}

.ct-paywall-modal {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
    transform: translateY(14px);
    transition: transform .35s ease;
}

.ct-paywall-modal-overlay.active .ct-paywall-modal {
    transform: translateY(0);
}

.ct-paywall-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.ct-paywall-modal-close:hover {
    background: #e2e8f0;
    color: #1a1a1a;
}

.ct-paywall-modal-cancele {
    font-size: 12px;
    color: #94a3b8;
    margin: 10px 0 0;
}

.ct-paywall-modal-entrar {
    display: block;
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.ct-paywall-modal-entrar strong {
    color: var(--cor-primaria, #2271b1);
}

/* Marca do portal no topo do popup — mesmo componente do cabeçalho
   (cidadetrevo_render_brand_logo(), inc/marca.php), só menor: reforça de
   quem é a assinatura antes até do título, em vez do popup parecer um
   formulário genérico solto na página. */
.ct-paywall-modal-marca {
    --marca-corpo: 32px;
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.ct-paywall-modal-marca img {
    max-height: 42px;
    width: auto;
}

.ct-paywall-modal-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a1a1a;
    color: #fbbf24;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 5px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
}

.ct-paywall-modal-titulo {
    font-family: var(--font-serif, serif);
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.25;
}

/* Maquete "leia em qualquer lugar" (navegador + celular): CSS puro, sem
   imagem/estoque nenhuma — o retângulo do "cabeçalho" de cada tela usa a
   cor da própria marca do portal (--cor-primaria), o resto é escala de
   cinza representando foto/texto genéricos. */
.ct-paywall-modal-mockup {
    position: relative;
    height: 118px;
    margin: 18px auto 22px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ct-mockup-browser {
    width: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
    overflow: hidden;
    transform: rotate(-4deg);
}

.ct-mockup-browser-bar {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #f1f5f9;
}

.ct-mockup-browser-bar span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cbd5e1;
}

.ct-mockup-browser-body {
    padding: 9px 10px 11px;
}

.ct-mockup-masthead {
    width: 40%;
    height: 6px;
    background: var(--cor-primaria, #b32619);
    border-radius: 2px;
    margin-bottom: 7px;
}

.ct-mockup-photo {
    width: 100%;
    height: 32px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-bottom: 7px;
}

.ct-mockup-line {
    height: 5px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 4px;
}

.ct-mockup-line--title {
    height: 7px;
    width: 90%;
    background: #cbd5e1;
}

.ct-mockup-line--short {
    width: 55%;
}

.ct-mockup-phone {
    width: 62px;
    background: #1a1a1a;
    border-radius: 11px;
    padding: 7px 4px 9px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .2);
    position: absolute;
    right: 36px;
    bottom: -12px;
    transform: rotate(6deg);
}

.ct-mockup-phone-notch {
    width: 20px;
    height: 4px;
    background: #333;
    border-radius: 3px;
    margin: 0 auto 6px;
}

.ct-mockup-phone-body {
    background: #fff;
    border-radius: 4px;
    padding: 6px 5px 7px;
}

.ct-mockup-phone .ct-mockup-masthead {
    width: 55%;
    height: 5px;
    margin-bottom: 5px;
}

.ct-mockup-phone .ct-mockup-photo {
    height: 22px;
    margin-bottom: 5px;
}

.ct-mockup-phone .ct-mockup-line {
    height: 4px;
    margin-bottom: 3px;
}

.ct-paywall-modal-preco {
    font-size: 32px;
    font-weight: 800;
    color: var(--cor-primaria, #2271b1);
    margin: 0 0 18px;
}

.ct-paywall-modal-preco span {
    font-size: 14px;
    font-weight: 600;
    color: #777;
}

.ct-paywall-modal-beneficios {
    text-align: left;
    font-size: 13.5px;
    color: #444;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 22px;
}

.ct-paywall-modal-beneficios p:first-child {
    margin-top: 0;
}

.ct-paywall-modal-beneficios p:last-child {
    margin-bottom: 0;
}

body.ct-paywall-scroll-lock {
    overflow: hidden;
}

@media (max-width: 480px) {
    .ct-paywall-modal {
        padding: 26px 20px;
    }
    .ct-paywall-modal-titulo {
        font-size: 19px;
    }
    .ct-paywall-modal-preco {
        font-size: 26px;
    }
}

/* 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: 8px;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bopea-main-feature:hover .bmf-image img {
    filter: brightness(1.12);
}

.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: 8px;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bmr-post:hover .bmr-image-wrap img {
    filter: brightness(1.12);
}

.bmr-cat {
    position: absolute;
    bottom: 0;
    left: 0;
    bottom: 0;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: var(--cor-primaria);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-heading);
    top: auto;
    line-height: 17px;
    font-size: 13px;
    padding: 5px 10px;
}


.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: 8px;
}

.bsh-top img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bsh-top:hover img {
    filter: brightness(1.12);
}

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

/* 15. CABEÇALHO DO GUIA COMERCIAL */
.ct-guia-header-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 30px;
}

.cgh-left {
    font-size: 22px;
    font-family: var(--font-primary);
    font-weight: 400;
    color: #111;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: -.8px;
}

.cgh-left:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 3px;
    background: var(--cor-secao, #e3262e);
}

/* Nas 4 colunas da Central do Cidadao o titulo e h4 de 16px, bem menor que o
   h3 de 24px para o qual a barra de 40x3 foi desenhada — proporcional ali,
   grossa demais aqui. */
.ct-comunidade-col .cgh-left:after {
    width: 22px;
    height: 2px;
}

.cgh-left h3 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #111;
    line-height: 120%;
    letter-spacing: -.04rem;
}

.cgh-left p {
    font-size: 14px;
    color: #777;
    margin: 0;
}

.cgh-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cgh-right span {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}

.cgh-dropdown-form {
    display: flex;
    align-items: center;
}

.cgh-select {
    padding: 8px 12px;
    /* 16px pelo mesmo motivo do .ct-nsearch-input acima — select tambem
       aciona o zoom automatico do iOS abaixo disso. */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px 0 0 4px;
    outline: none;
    background: #fff;
    min-width: 200px;
    height: 38px;
}

.cgh-btn-search {
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    padding: 0 15px;
    height: 38px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: 0.2s;
}

.cgh-btn-search:hover {
    background: #111;
}

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

/* ============================================================
   GUIA COMERCIAL: CARDS PREMIUM MODERNOS (ESTILO REFERÊNCIA)
   ============================================================ */
.ct-guia-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.ct-guia-card-premium-modern {
    display: flex;
    flex-direction: column;
    background: transparent;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.cgc-thumb-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin-bottom: 12px;
}

.cgc-thumb-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #1e293b;
}

.cgc-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.ct-guia-card-premium-modern:hover .cgc-thumb-link img {
    filter: brightness(1.12);
}

/* Topo Esquerdo: Chapéu / Tag de Categoria */
.cgc-badge-chapeu {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}



/* Topo Direito (Oposto): Botão WhatsApp */
.cgc-btn-zap-float {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cgc-btn-zap-float:hover {
    transform: scale(1.12);
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);
}

/* Em Cima da Foto: Status Aberto/Fechado em Tempo Real */
.cgc-status-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cgc-status-badge.status-open {
    background: rgba(15, 23, 42, 0.82);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.cgc-status-badge.status-closed {
    background: rgba(15, 23, 42, 0.82);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.cgc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.status-open .cgc-status-dot {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.status-closed .cgc-status-dot {
    background: #ef4444;
}

/* Entre a Foto e o Nome: Logo Circular Sobreposta */
.cgc-logo-avatar {
    position: absolute;
    right: 18px;
    bottom: -18px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: #ffffff;
    overflow: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cgc-logo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cgc-logo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Informações da Empresa Abaixo da Foto */
.cgc-info-box {
    padding: 2px 2px 0 2px;
}

.cgc-empresa-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 120%;
    margin: 0 0 5px 0;
    color: #555555;
    letter-spacing: -.04rem;
}

.cgc-empresa-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ct-guia-card-premium-modern:hover .cgc-empresa-title a {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}

.cgc-empresa-meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

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

.cgc-endereco {
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px;
    line-height: 1.35;
}

.cgc-endereco i {
    color: #94a3b8;
    font-size: 11.5px;
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .ct-guia-grid-premium {
        grid-template-columns: repeat(2, 1fr);
    }
    .ct-container {
        padding: 0 16px;
    }
}
@media (max-width: 580px) {
    .ct-guia-grid-premium {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   GUIA COMERCIAL: EMPRESAS COMUNS (3 COLUNAS x 2 LINHAS + BANNER)
   ============================================================ */
.ct-guia-comum-wrap {
    display: flex;
    gap: 25px;
    align-items: stretch;
}

.ct-guia-grid-comum {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 22px;
    align-content: start;
}

.ct-guia-grid-comum .ct-side-feed-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
}

.ct-guia-grid-comum .ct-side-feed-thumb {
    width: 140px;
    height: 112px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ct-guia-grid-comum .ct-side-feed-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ct-guia-grid-comum .ct-side-feed-chapeu {
    margin-bottom: 4px;
    align-self: flex-start;
}

.ct-guia-grid-comum .ct-side-feed-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    margin: 0 0 4px 0;
    color: #555555;
    letter-spacing: -.04rem;
}

.ct-guia-banner-lateral {
    width: 300px;
    flex-shrink: 0;
    display: flex;
}

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

@media (max-width: 1200px) {
    .ct-guia-grid-comum {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ct-guia-comum-wrap {
        flex-direction: column;
    }
    .ct-guia-banner-lateral {
        width: 100%;
    }
}

@media (max-width: 580px) {
    .ct-guia-grid-comum {
        grid-template-columns: 1fr;
    }
}

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

/* (Removido estilos legados duplicados do Guia Comercial) */

/* 16. BLOCOS DE CATEGORIA INFERIORES */

.bcb-col {
    min-width: 0;
}



.bcb-main-post a {
    text-decoration: none;
    position: relative;
    display: block;
}

.bcb-main-post img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-bottom: 15px;
    border-radius: 8px;
    transition: 0.3s;
}

.bcb-main-post:hover img {
    opacity: 0.85;
}

.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-main-post h4 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin: 0;
    line-height: 120%;
    letter-spacing: -.04rem;
}

.bcb-main-post:hover h4 {
    color: var(--cat-cor, var(--cor-primaria));
}

.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: 8px;
    transition: transform 0.3s;
}

.bcb-list-item:hover img {
    opacity: 0.85;
}

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

.ct-cat-page-title {
    font-size: 36px;
    color: #333333;
    font-weight: 400;
    margin-bottom: 10px;
    font-family: var(--font-primary);
}

.ct-cat-page-title span {
    font-weight: 800;
    color: var(--cor-primaria);
}

.ct-cat-top-section {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: stretch;
}

.ct-cat-feat-img {
    width: 60%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}

.ct-cat-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.ct-cat-feat-content {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ct-cat-tag {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 15px;
    align-self: flex-start;
}

.ct-cat-feat-content h2 {
    font-size: 29px;
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 15px;
    font-family: var(--font-serif);
    letter-spacing: -.01em;
}

.ct-cat-feat-content h2 a {
    color: #333333;
}

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

.ct-cat-feat-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

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

.ct-cat-grid-item .ccgi-img-wrap {
    display: block;
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 8px;
}

.ct-cat-grid-item .ccgi-img-wrap img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 8px;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.ct-cat-grid-item:hover .ccgi-img-wrap img {
    filter: brightness(1.12);
}

.ct-cat-tag-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
}

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

/* Classificado em destaque (pago) — canto livre oposto aos outros dois
   selos (categoria embaixo à esquerda, exclusivo em cima à direita). */
.ct-selo-destaque-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 9px;
    border-radius: 3px;
}

.ct-cat-grid-item h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.28;
    font-family: var(--font-serif);
    margin: 0;
}

.ct-cat-grid-item h3 a {
    color: #333333;
}

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

.ct-pagination {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ct-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid var(--color-border);
    color: #333;
    font-weight: 700;
    transition: 0.2s;
    border-radius: 8px;
}

.ct-pagination .page-numbers.current,
.ct-pagination .page-numbers:hover {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cat-cor, var(--cor-primaria));
}

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

    .ct-guia-comum-wrap {
        flex-direction: column;
    }

    .ct-guia-banner-lateral {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ct-guia-grid-premium {
        grid-template-columns: 1fr;
    }

    .ct-guia-grid-comum {
        grid-template-columns: 1fr 1fr;
    }

    .bopea-category-blocks {
        grid-template-columns: 1fr;
    }

    .ct-cat-top-section {
        flex-direction: column;
    }

    .ct-cat-feat-img,
    .ct-cat-feat-content {
        width: 100%;
    }

    .ct-cat-grid-section {
        grid-template-columns: 1fr 1fr;
    }

    .ct-guia-header-simple {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        border-bottom: none;
    }

    .cgh-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
    }

    .cgh-dropdown-form {
        width: 100%;
    }

    .cgh-select {
        flex-grow: 1;
    }
}

@media (max-width: 600px) {
    .ct-cat-grid-section {
        grid-template-columns: 1fr;
    }

    .ct-guia-grid-comum {
        grid-template-columns: 1fr;
    }

    .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-header {
    margin-bottom: 20px;
}

/* Substitui o antigo bloco solido .bmf-cat: aqui a cor vem da editoria do
   post (--cat-cor, publicado por cidadetrevo_cor_categoria_attr() no
   header), com fallback pra cor primaria do site se o post nao tiver
   categoria colorida. */
.ct-single-chapeu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--font-primary, sans-serif);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cat-cor, var(--cor-primaria));
}

.ct-single-chapeu::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--cat-cor, var(--cor-primaria));
    flex-shrink: 0;
}

.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-excerpt {
    font-size: 18px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 25px;
    font-style: italic;
}

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

.ct-single-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.cst-left {
    font-size: 12px;
    color: #777;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cst-center {
    display: flex;
    gap: 10px;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: 0.2s;
    font-size: 16px;
}

.share-wa {
    background: #25D366;
}

.share-wa:hover {
    background: #1ebe5d;
}

.share-fb {
    background: #1877F2;
}

.share-fb:hover {
    background: #166fe5;
}

.share-tw {
    background: #000000;
}

.share-tw:hover {
    background: #333;
}

.cst-right {
    display: flex;
    gap: 10px;
}

.cst-btn {
    background: #f4f5f7;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-weight: 700;
    transition: 0.2s;
    font-size: 14px;
}

.cst-btn:hover {
    background: #e0e0e0;
}

.ct-single-thumb {
    margin-bottom: 30px;
    text-align: center;
}

.ct-single-thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.ct-thumb-caption {
    font-size: 12px;
    color: #777;
    margin-top: 8px;
    text-align: right;
    font-style: italic;
}

.ct-post-content {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

/*
 * !important de proposito: o editor classico nao limpa todo colar de Word ou
 * Google Docs, so o padrao especifico do Word — um paragrafo colado de outro
 * lugar pode chegar com "style=font-family:..." dentro do texto, e isso tem
 * especificidade mais alta que qualquer selector de classe daqui. Sem isto, a
 * materia mistura a fonte do portal com a fonte de onde o texto foi copiado,
 * paragrafo a paragrafo — exatamente a mistura de familia que nao queremos.
 */
.ct-post-content,
.ct-post-content * {
    font-family: var(--font-primary, "Google Sans", sans-serif) !important;
}

/*
 * Excecao para a regra acima: icone do Font Awesome NAO e texto, e uma fonte
 * com glifo proprio. O `*` com !important pegava tambem os <i> e trocava a
 * familia deles pela do portal — o glifo nao existe nessa fonte, entao cada
 * icone virava um quadradinho vazio. Como o infografico eleitoral entra pelo
 * the_content, TODOS os icones dele apareciam quebrados na materia.
 */
.ct-post-content .fa,
.ct-post-content .fas,
.ct-post-content .far,
.ct-post-content .fal,
.ct-post-content .fa-solid,
.ct-post-content .fa-regular,
.ct-post-content .fa-light {
    font-family: "Font Awesome 6 Free" !important;
}

.ct-post-content .fab,
.ct-post-content .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}

.ct-post-content p {
    margin-bottom: 20px;
}

.ct-post-content h2,
.ct-post-content h3 {
    /* !important pra vencer a regra de cima, que ja precisa vencer o que
       vier colado no texto — mesma razao, escopo mais especifico.
       Serifada: intertitulo e manchete de bloco, entao segue a voz das
       manchetes, e nao a do corpo do texto. */
    font-family: var(--font-serif) !important;
    color: #111;
    margin: 30px 0 15px 0;
}

.ct-post-content blockquote {
    border-left: 4px solid var(--cor-primaria);
    padding-left: 20px;
    font-style: italic;
    color: #555;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin: 30px 0;
    font-size: 20px;
}

.ct-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.ct-post-footer-meta {
    margin-top: 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ct-single-tags {
    border-top: 1px solid #eee;
    /* Era "display: ruby" — o modo de layout de anotacao ruby do
       leste-asiatico, nao um valor de flex/block "generico". Nenhuma tag
       tinha sido cadastrada ainda pra isto aparecer quebrado na tela; o filho
       aqui embaixo (strong + br + div com seus proprios tags) e conteudo
       comum, precisa so do bloco padrao. */
    display: block;
    font-size: 14px;
    color: #555;
}

.ct-single-tags a {
    padding: 5px 12px;
    color: #555;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

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

.ct-single-tags-badge {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    padding: 5px 12px;
    border-radius: 8px;
    color: rgb(85, 85, 85);
    text-decoration: none;
    transition: 0.2s;
    font-size: 13px;
}

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

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

    .ct-single-toolbar {
        flex-direction: column;
        gap: 15px;
    }
}



/* COMENTARIOS */
.ct-comments-area {
    margin-top: 30px;
    font-family: var(--font-primary);
}

.ct-comments-title {
    font-size: 22px;
    font-weight: 800;
    color: #333;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 10px;
    display: inline-block;
}

.ct-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* Respostas encadeadas: antes nao tinham recuo nem nenhum sinal visual —
   uma resposta ficava na mesma coluna de um comentario novo, indistinguivel
   dele. O traco a esquerda liga a resposta ao comentario-pai. */
.ct-comment-list .children {
    list-style: none;
    margin: 15px 0 0;
    padding: 0 0 0 30px;
    border-left: 2px solid #e5e7eb;
}

.ct-comment-list .children .ct-comment-item {
    margin-bottom: 15px;
}

.ct-comment-list .children .ct-comment-item:last-child {
    margin-bottom: 0;
}

.ct-comment-list .children .ct-comment-body {
    padding: 15px;
    background: #f8fafc;
}

.ct-comment-list .children .ct-comment-avatar img {
    width: 38px;
    height: 38px;
}

.no-comments {
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    padding: 15px 20px;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 20px;
}

/* FORMULARIO DE COMENTARIO (estilo chat: avatar + campo + botao redondo) */
.comment-form-cookies-consent {
    display: none !important;
}

.ct-comment-form {
    position: relative;
    padding: 25px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    margin-top: 30px;
    display: block;
}

.ct-comment-reply-heading {
    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;
    display: inline-block;
}

.ct-comment-reply-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 3px;
    background: #e3262e;
}

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

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

.ct-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    margin-top: 15px;
}

.ct-chat-avatar,
.ct-chat-avatar-guest {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

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

.ct-chat-avatar-guest {
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.ct-chat-textarea {
    flex: 1;
    margin: 0;
}

.ct-comment-form textarea {
    width: 100%;
    resize: none;
    border-radius: 8px;
    padding: 15px 25px;
    min-height: 55px;
    /* 16px — mesma razao do .ct-nsearch-input (zoom automatico do iOS em
       campo de texto abaixo de 16px, que depois fica "preso" ampliado). */
    font-size: 16px;
    border: 1px solid #ddd;
    background: #fff;
    line-height: 1.5;
    outline: none;
    font-family: var(--font-primary);
    transition: .3s;
}

.ct-comment-form textarea:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.1);
}

.ct-chat-submit {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(30, 115, 190, 0.3);
    background: var(--cor-primaria);
    color: #fff;
    cursor: pointer;
    border: none;
    padding-right: 4px;
    transition: 0.3s;
}

.ct-chat-submit:hover {
    transform: scale(1.05);
}


/* LETRA CAPITULAR (DROP CAP) NA MATERIA */
.ct-post-content>p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 4em;
    float: left;
    margin: 0 0.05em 0 0;
    line-height: 0.8;
    font-weight: 900;
    text-transform: uppercase;
}


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


/* ==========================================================================
   GUIA COMERCIAL (SINGLE EMPRESA)
   ========================================================================== */

.ct-empresa-header {
    position: relative;
    margin-bottom: 30px;
}

.ct-empresa-cover {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 0;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ct-empresa-cover-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
}

.ct-empresa-header-content {
    position: relative;
    padding: 0 30px;
    display: flex;
    align-items: flex-end;
    margin-top: -60px;
    z-index: 10;
}

.ct-empresa-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.ct-empresa-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-empresa-title-wrapper {
    margin-left: 20px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ct-empresa-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.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-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    z-index: 5;
}

.ct-empresa-ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background-color: #f39c12;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
    left: -15px;
    top: 30px;
    transform: rotate(45deg);
}

.ct-empresa-ribbon span i {
    margin-right: 5px;
}

.ct-empresa-title {
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    line-height: 26px;
    margin: 0;
    letter-spacing: -.8px;
}

.ct-empresa-body {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

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

.ct-empresa-info-box {}

.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-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.ct-empresa-info-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ct-empresa-info-icon {
    color: var(--cor-primaria);
    margin-top: 4px;
    width: 15px;
    text-align: center;
}

.ct-empresa-info-address,
.ct-empresa-info-hours,

.ct-empresa-info-phone {
    padding: 12px;
    background: #f4f5f7;
    margin-bottom: 10px;
    display: flex;
    border-radius: 8px;
    align-items: center;
}
.ct-phone-number {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    display: block;
    margin-top: 2px;
}

.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-map {
    margin-top: 25px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eaeaea;
}

/* Perfil de Vereador (Câmara Municipal) */

.ct-vereador-wrap {
    padding: 30px 0 50px;
}

.ct-vereador-profile {
    padding: 10px 0 0;
}

.ct-vereador-header {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
}

.ct-vereador-foto {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f5f7;
}

.ct-vereador-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-vereador-profile--memoria .ct-vereador-foto img {
    filter: grayscale(100%);
}

.ct-vereador-foto-vazia {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #c2c5cb;
}

.ct-vereador-info {
    flex: 1;
    min-width: 220px;
}

.ct-vereador-info .ct-empresa-cat-badge {
    margin-bottom: 10px;
}

.ct-vereador-nome {
    font-size: 28px;
    font-weight: 800;
    color: #333333;
    letter-spacing: -.6px;
    margin: 0 0 6px;
}

.ct-vereador-meta {
    font-size: 15px;
    color: #666;
    margin: 0;
}

.ct-vereador-datas {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
}

.ct-vereador-badge-memoria {
    background: #6b7280;
    margin-right: 6px;
}

.ct-vereador-contato {
    max-width: 320px;
    margin-bottom: 30px;
}

.ct-vereador-email {
    font-size: 14px;
    color: #444;
    margin: 12px 0 0;
}

.ct-vereador-email a {
    color: #444;
    text-decoration: underline;
}

.ct-vereador-bio h2 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #333333;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 10px;
    display: inline-block;
}

.ct-vereador-bio {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

@media (max-width: 600px) {
    .ct-vereador-header {
        flex-direction: column;
        text-align: center;
    }

    .ct-vereador-contato {
        max-width: none;
    }
}

.ct-vereador-projetos {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #eaeaea;
}

/* "Mural" do arquivo de vereadores: retrato circular, não o card de foto
   retangular das outras listagens — ver comentário em archive-vereador.php */

.ct-vereador-mural-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 24px;
    margin-bottom: 20px;
}

/*
 * Sem card (sem fundo, borda ou sombra): o espaco em branco entre os
 * retratos e que separa um vereador do outro, nao uma caixa. Retrato em
 * tom de cinza por padrao, cor so ao passar o mouse — sinaliza que da pra
 * clicar sem recorrer a sombra ou a card subindo.
 */
.ct-vereador-mural-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.ct-vereador-mural-foto {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f5f7;
    margin-bottom: 16px;
}

.ct-vereador-mural-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.25s ease;
}

.ct-vereador-mural-card:hover .ct-vereador-mural-foto img {
    filter: grayscale(0%);
}

.ct-vereador-mural-cargo {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.ct-vereador-mural-nome {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 4px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.ct-vereador-mural-card:hover .ct-vereador-mural-nome {
    color: var(--cor-primaria);
}

.ct-vereador-mural-partido {
    font-size: 13px;
    color: #777;
}

.ct-vereador-mural-anos {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* "Em Memória": mesmo mural, mas o retrato fica em tom de cinza sempre — a
   cor no hover, no mural principal, sinaliza "em exercício", e daria a
   entender engano aqui. Sem selo de cargo colorido pelo mesmo motivo. */

.ct-vereador-memoria {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
}

.ct-vereador-memoria-titulo {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #333;
}

.ct-vereador-memoria-desc {
    font-size: 14px;
    color: #777;
    margin-bottom: 25px;
}

.ct-vereador-mural-card--memoria:hover .ct-vereador-mural-foto img {
    filter: grayscale(100%);
}

.ct-vereador-mural-card--memoria:hover .ct-vereador-mural-nome {
    color: #333;
}

/* Texto institucional (história da Câmara) abaixo do mural */

.ct-arq-institucional {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
}

.ct-arq-institucional-titulo {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #333;
}

.ct-arq-institucional-texto {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* Capa de Memória da Cidade (foto de fundação + histórico, antes dos registros) */

.ct-memoria-capa {
    margin-bottom: 40px;
}

.ct-memoria-capa-foto {
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f5f7;
    margin-bottom: 20px;
}

.ct-memoria-capa-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-memoria-capa-texto h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #333;
}

.ct-memoria-capa-texto {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
}

@media (max-width: 900px) {
    .ct-vereador-mural-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ct-vereador-mural-grid {
        grid-template-columns: 1fr;
    }
}

/* Memória da Cidade (fotos antigas & história) */

.ct-memoria-wrap {
    padding: 30px 0 50px;
}

.ct-memoria-profile {
    padding: 10px 0 0;
}

.ct-memoria-foto {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f5f7;
    margin-bottom: 25px;
}

.ct-memoria-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-memoria-foto-vazia {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #c2c5cb;
}

.ct-memoria-header {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
}

.ct-memoria-header .ct-empresa-cat-badge {
    margin-bottom: 10px;
}

.ct-memoria-titulo {
    font-size: 28px;
    font-weight: 800;
    color: #333333;
    letter-spacing: -.6px;
    margin: 0 0 8px;
}

.ct-memoria-local {
    font-size: 15px;
    color: #666;
    margin: 0 0 4px;
}

.ct-memoria-local i {
    color: var(--cor-primaria);
    margin-right: 4px;
}

.ct-memoria-fonte {
    font-size: 13px;
    color: #999;
    font-style: italic;
    margin: 0;
}

.ct-memoria-historia h2 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #333333;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 10px;
    display: inline-block;
}

.ct-memoria-historia {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* Zona Cívica: fundo compartilhado por Central do Cidadão + Câmara Municipal
   + Memória da Cidade, pra ler como um bloco só em vez de três seções soltas
   no mesmo branco do resto da página. */
.ct-zona-civica {
    background: #f8fafc;
    padding: 50px 0 45px;
}

/* Bloco de destaque "Câmara Municipal" (vereadores) na home — mesmo retrato
   circular do mural do arquivo, card menor porque é só uma prévia de 4 */

.ct-vereador-home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
}

.ct-vereador-home-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.ct-vereador-home-foto {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f5f7;
    margin-bottom: 12px;
}

.ct-vereador-home-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.25s ease;
}

.ct-vereador-home-card:hover .ct-vereador-home-foto img {
    filter: grayscale(0%);
}

.ct-vereador-home-cargo {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.ct-vereador-home-nome {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.ct-vereador-home-card:hover .ct-vereador-home-nome {
    color: var(--cor-primaria);
}

@media (max-width: 900px) {
    .ct-vereador-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ct-vereador-home-grid {
        grid-template-columns: 1fr;
    }
}

/* Bloco de destaque "Memória da Cidade" na home */

.ct-memoria-home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ct-memoria-home-card {
    display: block;
    text-decoration: none;
}

.ct-memoria-home-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f5f7;
}

.ct-memoria-home-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-memoria-home-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 100%);
}

.ct-memoria-home-ano {
    align-self: flex-start;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.ct-memoria-home-titulo {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.ct-memoria-home-card:hover .ct-memoria-home-titulo {
    text-decoration-color: currentColor;
}

@media (max-width: 900px) {
    .ct-memoria-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ct-memoria-home-grid {
        grid-template-columns: 1fr;
    }
}

.ct-empresa-main-content {
    flex: 2;
    min-width: 300px;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.ct-empresa-section-title {
    font-size: 22px;
    font-weight: 800;
    color: #333333;
    margin-bottom: 20px;
}

/* Vitrine de Produtos */
.ct-empresa-vitrine-wrapper {
    margin-bottom: 50px;
}

.ct-empresa-vitrine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}

.ct-empresa-vitrine-title {
    font-size: 24px;
    font-weight: 800;
    color: #333333;
    margin: 0;
}

.ct-empresa-vitrine-title i {
    color: var(--cor-primaria);
    margin-right: 10px;
}

/* =========================================================
   ESTILO LISTA: Alimentação / Produtos (Estilo iFood - Sem bordas redondas)
   ========================================================= */
.ct-vitrine-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 20px;
}
@media (min-width: 768px) {
    .ct-vitrine-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ct-produto-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;
    transition: background 0.2s;
    cursor: pointer;
}

.ct-produto-list-item:hover {
    background: #fcfcfc;
}

.ct-produto-list-info {
    flex: 1;
    padding-right: 20px;
}

.ct-produto-list-nome {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px 0;
}

.ct-produto-list-desc {
    font-size: 14px;
    color: #777;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-produto-list-preco {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.ct-produto-list-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    /* sem cantos arredondados */
    border-radius: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.ct-produto-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   ESTILO CARDS VERTICAIS: Acomodações / Hotéis
   ========================================================= */
.ct-vitrine-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 576px) {
    .ct-vitrine-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .ct-vitrine-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ct-acomodacao-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
}

.ct-acomodacao-card > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.ct-acomodacao-card:hover > img {
    filter: brightness(1.12);
}

.ct-acomodacao-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.ct-acomodacao-top-icons {
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
}

.ct-acomodacao-pin {
    background: rgba(255,255,255,0.25);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.ct-acomodacao-gallery-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4ab39b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.ct-acomodacao-content {
    position: relative;
    z-index: 3;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.ct-acomodacao-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.ct-acomodacao-subtitle {
    color: #e0e0e0;
    font-size: 14px;
    margin: 0 0 15px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-acomodacao-btn {
    background: #4ab39b;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 13px;
    transition: background 0.3s;
    width: 100%;
}

.ct-acomodacao-card:hover .ct-acomodacao-btn {
    background: #39917d;
}

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

@media (max-width: 768px) {
    .ct-empresa-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 15px;
        margin-top: -80px;
    }

    .ct-empresa-title-wrapper {
        margin-left: 0;
        align-items: center;
        padding-top: 15px;
    }
}

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

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

.ct-empresa-info-box-sidebar {
    margin: 0;
}

.ct-widget-ad {
    text-align: center;
    padding: 10px;
}

.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: 8px;
    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: transform 0.4s ease;
}

.ct-galeria-img:hover img {
    transform: scale(1.08);
}

/* =========================================================
   GALERIA DE FOTOS EXCLUSIVA (matéria — single.php)
   Reaproveita .ct-galeria-grid/.ct-galeria-img acima (mesmo grid, mesmo
   hover da galeria da empresa) — só os elementos próprios desta versão
   (patrocínio, baixar, contagem, proteção) ganham regra nova.
   ========================================================= */
.ct-galeria-wrap {
    margin: 30px 0;
    padding: 22px 24px;
    background: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 10px;
}

.ct-galeria-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
}

.ct-galeria-title i {
    color: var(--cor-primaria, #e11d48);
}

.ct-galeria-contagem {
    font-size: 12px;
    font-weight: 600;
    color: #777;
}

.ct-galeria-item {
    position: relative;
}

.ct-galeria-item .ct-galeria-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 55%);
    opacity: 0;
    transition: opacity .25s ease;
}

.ct-galeria-item:hover .ct-galeria-img::after {
    opacity: 1;
}

.ct-galeria-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.ct-galeria-item:hover .ct-galeria-zoom {
    opacity: 1;
}

.ct-galeria-patrocinio {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-height: 20px;
    max-width: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, .9);
    border-radius: 4px;
    padding: 3px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.ct-galeria-download {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    text-decoration: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background .2s ease, transform .2s ease;
}

.ct-galeria-download:hover {
    background: var(--cor-primaria, #e11d48);
    color: #fff;
    transform: scale(1.08);
}

/* Sem permissao de download (metabox): tira o gesto mais facil de salvar a
   foto. Nao impede print/devtools — nenhuma protecao client-side impede —
   so desencoraja o clique direito e o arrastar comuns. */
.ct-galeria-protegida img {
    user-select: none;
    -webkit-user-drag: none;
}

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

/* =========================================================
   MODAL DE PRODUTO / ACOMODAÇÃO (Estilo iFood)
   ========================================================= */
.ct-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
}
.ct-modal.show { opacity: 1; }

.ct-modal-content {
    background: #fff;
    width: 95%; max-width: 850px;
    border-radius: 8px;
    position: relative;
    transform: translateY(-20px) scale(0.98);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ct-modal.show .ct-modal-content { 
    transform: translateY(0) scale(1); 
}

/* Header (Título e Fechar) */
.ct-modal-header {
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}
.ct-modal-title { 
    font-size: 24px; 
    margin: 0; 
    color: #333; 
    font-weight: 700; 
    font-family: var(--font-heading);
    line-height: 1.2;
}
.ct-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: color 0.2s ease;
    color: #777;
    line-height: 1;
}



/* Responsividade do Bloco */
@media (max-width: 900px) {
    .bopea-category-blocks {
        flex-direction: column;
    }
    .bcb-main-row {
        grid-template-columns: 1fr 1fr;
    }
    .bcb-list {
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .bcb-main-row {
        grid-template-columns: 1fr !important;
    }
    .bcb-list-item img {
        width: 75px;
        height: 75px;
    }
    .bcb-list-text h5 {
        font-size: 14px;
    }
}
.ct-modal-close:hover {
    color: #111;
}

/* Corpo do Modal */
.ct-modal-body {
    padding: 10px 20px;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
}

/* Coluna Imagem */
.ct-modal-img-container {
    width: 100%;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}
.ct-modal-img {
    width: 100%; height: auto;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
}
.ct-modal-img img {
    width: 100%; height: auto; max-height: 350px; object-fit: cover; display: block;
}

/* Miniaturas Galeria */
.ct-modal-gallery-thumbs {
    display: flex; gap: 10px; padding: 15px 0; overflow-x: auto;
}
.ct-modal-thumb {
    width: 50px; height: 50px; border-radius: 8px; cursor: pointer;
    object-fit: cover; border: 2px solid transparent; transition: all 0.2s; opacity: 0.6;
}
.ct-modal-thumb:hover, .ct-modal-thumb.active { opacity: 1; border-color: var(--cor-secundaria, #e3262e); }
.ct-modal-gallery-thumbs::-webkit-scrollbar { height: 4px; }
.ct-modal-gallery-thumbs::-webkit-scrollbar-thumb { background: #bbb; border-radius: 8px; }

/* Coluna Info */
.ct-modal-info { 
    padding: 0; 
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ct-modal-price {
    font-size: 22px; 
    font-weight: 700; 
    color: #111;
    margin-bottom: 20px;
}
.ct-modal-scrollable-desc {
    flex: 1;
    margin-bottom: 25px;
}
.ct-modal-desc { 
    color: #666; 
    line-height: 1.6; 
    font-size: 15px; 
    margin:0;
}
.ct-modal-desc p { margin: 0 0 10px; }

/* Rodapé / Botão */
.ct-modal-footer {
    padding: 0;
    text-align: center;
    margin-top: auto;
    padding-top: 25px;
    display: flex;
    justify-content: flex-end;
}
.ct-modal-btn-comprar {
    background: #f1f1f1;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
    border: none;
}
.ct-modal-btn-comprar:hover {
    background: #e0e0e0;
}
.ct-produto-clickable { cursor: pointer; }

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

/* Layout Desktop */
@media (min-width: 768px) {
    .ct-modal-body { 
        flex-direction: row; 
        overflow: hidden; 
        align-items: flex-start;
    }
    .ct-modal-img-container { 
        width: 50%; 
        position: sticky; top: 0;
        padding-bottom: 30px;
    }
    .ct-modal-img img { max-height: none; aspect-ratio: 1/1; }
    .ct-modal-info { 
        width: 50%; 
        padding-left: 20px;
        max-height: 70vh; 
        overflow-y: auto;
    }
    /* Scroll interno para direita */
    .ct-modal-info::-webkit-scrollbar { width: 6px; }
    .ct-modal-info::-webkit-scrollbar-track { background: transparent; }
    .ct-modal-info::-webkit-scrollbar-thumb { background: #ddd; border-radius: 8px; }
}

/* =========================================================================
   18. CLASSIFICADOS (HOME E ARQUIVO)
   ========================================================================= */

@media (max-width: 900px) {
    .ct-classificados-grid {
        gap: 20px;
    }
    /* Na pratica a regra de 992px logo abaixo, mais ampla, ja decide 1 por
       linha nesta largura — mantido para nao mudar o que ja se via aqui. */
    .ct-classificado-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 600px) {
    .ct-classificado-card {
        flex-basis: 100%;
    }
}

/* =========================================================================
   19. COLUNISTAS & UTILITÁRIOS
   ========================================================================= */



.ct-colunista-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: 0.3s;
}

.ct-colunista-card:hover .ct-colunista-avatar img {
    opacity: 0.85;
}



.ct-colunista-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--cor-primaria);
}

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

@media (max-width: 900px) {
    .ct-colunistas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .ct-3-cols-categories {
        grid-template-columns: 1fr;
    }
    .ct-inf-col {
        padding: 0 0 10px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 30px;
    }
    .ct-inf-col:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0 !important;
    }
    /* Mesmo motivo do bloco de 992px mais abaixo: sem isto o divisor vertical
       decorativo (::after, right:-20px) vaza pra fora da tela quando as
       colunas empilham. */
    .ct-inf-col:not(:last-child)::after {
        content: none;
    }
}

@media (max-width: 600px) {
    .ct-colunistas-grid, .ct-classificados-grid.ct-grid-2-cols, .ct-classificados-grid.ct-grid-3-cols {
        grid-template-columns: 1fr !important;
    }
    .ct-colunista-avatar {
        width: 100px;
        height: 100px;
    }
}
/* ============================================================
   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-header .ct-see-all {
    color: var(--cor-primaria);
    font-weight: 700;
    text-decoration: none;
}
.ct-section-header .ct-see-all:hover {
    text-decoration: underline;
}
.ct-section-icon {
    color: var(--cor-primaria);
    margin-right: 8px;
}

/* ============================================================
   BLOCOS DE CATEGORIA (BCB-*)
   ============================================================ */
.bcb-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.bcb-main-post:hover .bcb-thumb-wrap img {
    filter: brightness(1.12);
}
.bcb-main-post:hover .bcb-post-title {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}

/* 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: 992px) {
    .bopea-category-blocks {
        flex-direction: column;
    }
    .bcb-main-row {
        grid-template-columns: 1fr;
    }
}
@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;
    }
}

/* ============================================================
   CLASSIFICADOS
   ============================================================ */
/* Flex, nao grid: com "repeat(3, 1fr)" um unico anuncio esticava para ocupar
   a linha inteira, e com poucos anuncios sobrava vao vazio reservado nas
   colunas que a grade sempre desenha, exista conteudo ou nao. Em flex, o
   card reivindica no maximo 1/3 da linha (a mesma largura de sempre) e o
   resto simplesmente nao existe quando nao ha o que preencher. */
.ct-classificados-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.ct-classificado-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    box-sizing: border-box;
    background: #0f172a;
    flex: 0 1 calc((100% - 3 * 18px) / 4);
}

.ct-classificado-thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ct-classificado-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.ct-classificado-card:hover .ct-classificado-thumb img {
    transform: scale(1.06);
    filter: brightness(1.08);
}

.ct-classificado-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.88) 100%);
    z-index: 1;
    pointer-events: none;
}

.ct-classificado-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ct-classificado-badge-cond {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
}

.ct-badge-novo {
    background: #16a34a;
}

.ct-badge-usado {
    background: #d97706;
}

.ct-classificado-badge-cat {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ct-classificado-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.ct-classificado-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 6px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ct-classificado-price {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: #fef08a;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ct-classificado-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--cor-primaria, #e11d48);
    color: #ffffff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.15s ease;
    text-shadow: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    align-self: flex-start;
}

.ct-classificado-card:hover .ct-classificado-btn {
    background: #be123c;
    transform: translateX(2px);
}

/* ============================================================
   GRIDS REUTILIZÁVEIS
   ============================================================ */
.ct-grid-3-cols {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid;
    gap: 20px;
}
.ct-grid-2-cols {
    /* Sem !important: essa marca so eh usada nos Colunistas, e o !important
       aqui vencia sozinho o empilhamento de mobile la embaixo (mesma
       especificidade + !important + vem depois no arquivo = ganha sempre,
       media query ou nao). Sem ele, a regra de @media(max-width:600px) do
       .ct-colunistas-grid (que tem !important) volta a valer no celular. */
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 20px;
}

/* ============================================================
   3 COLUNAS DE CATEGORIAS / NOTÍCIAS (.ct-3-cols-categories & .ct-inf-col)
   ============================================================ */
.ct-inf-mini-link {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ct-inf-mini-link:hover {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}


/* ============================================================
   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: 12px;
    background: #f1f5f9;
}

.bmr-image-wrap img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bmr-post:hover .bmr-image-wrap img {
    filter: brightness(1.1);
}

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

/* ============================================================
   COLUNISTAS GRID (2 Colunas)
   ============================================================ */
.ct-colunistas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ct-colunista-card {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid #eaeaea;
    color: inherit;
}

.ct-colunista-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--cor-primaria, #008a20);
    background: #f1f5f9;
}

.ct-colunista-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-colunista-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.ct-colunista-name {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--cor-primaria, #008a20);
    text-transform: uppercase;
    margin-bottom: 4px;
    position: relative;
    padding-bottom: 4px;
    letter-spacing: 0.3px;
    text-decoration: none;
}

.ct-colunista-name:hover {
    text-decoration: underline;
}

.ct-colunista-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    color: #333333;
    line-height: 1.35;
    margin: 0;
    transition: color 0.2s ease;
}

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

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

/* ============================================================
   TOP 5 MAIS LIDAS (SIDEBAR)
   Numeral grande e apagado ao fundo, com chapéu e manchete avançando por
   cima da parte direita dele. Quem ancora o número agora é o próprio texto
   sobreposto: sem a miniatura que fazia esse papel na primeira versão, o
   numeral gigante ficava solto ao lado da manchete — encostado e coberto
   em parte por ela, número e texto viram um bloco só.
   ============================================================ */
.ct-top-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fio só entre itens, simétrico. Antes o gap do flex (12px) somava com o
   padding (12px) e o fio ficava a 12px do texto de cima e 24px do de baixo —
   parecia colado na matéria anterior. */
.ct-top-feed-list > li + li {
    border-top: 1px solid var(--color-border, #eaeaea);
}

.ct-top-feed-item {
    display: flex;
    align-items: flex-start;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
}

.ct-top-feed-list > li:first-child .ct-top-feed-item {
    padding-top: 0;
}

.ct-top-feed-list > li:last-child .ct-top-feed-item {
    padding-bottom: 0;
}

/* Caixa de largura fixa com o algarismo alinhado à direita, em figuras
   proporcionais: a borda direita de todos os números cai no mesmo x, então
   o texto cobre a mesma fatia de cada um, do "1" estreito ao "4" largo.
   Com algarismos tabulares o "1" ficaria centrado na célula e escaparia da
   sobreposição. O margin-right negativo é a sobreposição em si; o
   line-height .78 deixa a caixa do tamanho do algarismo, pro topo dele
   bater com o do chapéu.
   A cor é a primária da franquia bem clareada, não um cinza fixo: aqui sai
   um cinza quente (a primária é quase preta), numa franquia azul sai um
   azul-claro. O #d2d0d0 antes é reserva pra navegador sem color-mix(). */
.ct-top-rank {
    flex: 0 0 52px;
    margin: -36px -9px -31px 0;
    text-align: right;
    font-family: var(--font-serif);
    font-size: 110px;
    font-weight: 900;
    line-height: 120%;
    letter-spacing: -.02em;
    font-variant-numeric: lining-nums proportional-nums;
    color: #d2d0d0;
    color: color-mix(in srgb, var(--cor-primaria, #111111) 18%, #ffffff);
    user-select: none;
    transition: color 0.25s ease;
    text-align: center;
}

.ct-top-feed-item:hover .ct-top-rank {
    color: color-mix(in srgb, var(--cat-cor, var(--cor-primaria, #111111)) 22%, #ffffff);
}

/* O texto tem que pintar por cima do número na faixa sobreposta —
   z-index explícito em vez de depender da ordem do HTML. */
.ct-top-feed-info {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.ct-top-feed-meta {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: 0px;
}

.ct-top-feed-meta .ct-side-feed-chapeu {
    margin: 0;
}

.ct-top-feed-meta .ct-selo-exclusivo {
    font-size: 10px;
}

/* Manchete inteira, todas no mesmo corpo e na mesma tinta. O corte em 2
   linhas terminava título no meio da palavra ("em Santa Mar…"), e o cinza
   #444 nas posições 2 a 5 as fazia parecer desabilitadas. As 4 linhas de
   teto são só rede de segurança pra título anormalmente longo — mesmo teto
   do .ct-side-feed-title. */
.ct-top-feed-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -.04rem;
    color: #1a1a1a;
    margin: 0;
    text-wrap: pretty;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ============================================================
   PAINEL 2 COLUNAS: PLACAR DE JOGOS E HORÓSCOPO DO DIA
   Antes eram widgets soltos na sidebar contínua — viraram um bloco
   proprio na largura toda da pagina, no estilo "mini-dashboard" (titulo
   colorido com risco embaixo + card branco), cada coluna com sua cor pra
   diferenciar visualmente sem usar borda colorida no card (o cartao em si
   continua neutro, so o titulo acima dele e que ganha cor — mesmo
   principio do .ct-editorial-box, so que com titulo fora da caixa).
   ============================================================ */
.ct-dash-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-bottom: 50px;
}
.ct-dash-col-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    position: relative;
    border-bottom: 1px solid #eaeaea;
}
.ct-dash-col-head-row::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 46px;
    height: 3px;
    background: var(--dash-cor, #111);
    border-radius: 2px;
}
.ct-dash-col-head {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--dash-cor, #111);
    margin: 0;
}
.ct-dash-col-head-link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 2px;
}
.ct-dash-col-head-link:hover {
    color: var(--dash-cor, #111);
}
.ct-dash-col-body {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 10px rgba(15, 23, 42, 0.035);
}
@media (max-width: 900px) {
    .ct-dash-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HORÓSCOPO — PRÉVIA COMPACTA (vista padrão, já com o signo do
   periodo atual, sem exigir clique — estilo cartão claro, nao o
   dark/dourado do painel completo logo abaixo)
   ============================================================ */
.ct-signo-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}
.ct-signo-preview-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 20px;
    font-weight: 800;
    color: #503085;
    margin: 0 0 4px;
    letter-spacing: -.3px;
}
.ct-signo-preview-periodo {
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 600;
}
.ct-signo-preview-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #503085;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-signo-preview-icon svg {
    width: 28px;
    height: 28px;
}
.ct-signo-preview-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: #334155;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-signo-preview-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: #503085;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-family: inherit;
}
.ct-signo-preview-link:hover {
    text-decoration: underline;
}
.ct-signos-switch-row {
    display: grid;
    grid-template-columns: repeat(6, 5fr);
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid #eef0f2;
}
.ct-signo-switch-item {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1;
    transition: background 0.2s ease;
}
.ct-signo-switch-icone {
    display: flex;
    color: #503085;
    transition: color 0.2s ease;
}
.ct-signo-switch-icone svg {
    width: 32px;
    height: 32px;
}
.ct-signo-switch-item:hover {
    background: #f2f0f5;
}
.ct-signo-switch-item.active {
    background: #ebe5f5;
}
.ct-signo-switch-item.active .ct-signo-switch-icone {
    color: #503085;
}

/* O painel completo (aspectos, cor do dia, numeros, salvar/compartilhar)
   continua no visual dark/dourado original — .ct-signo-result sozinho
   ja perderia pro .ct-horoscopo-widget na cascata (ordem no arquivo);
   como aqui as duas classes sempre andam juntas no mesmo elemento, um
   seletor composto de mais especificidade resolve isso sem repetir CSS. */


/* ============================================================
   ENQUETE DA SEMANA (INTERATIVA & MODERNA)
   ============================================================ */
.ct-enquete-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.ct-enquete-badge-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ct-enquete-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff1f2;
    color: var(--cor-primaria, #e11d48);
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
}

/* Selo da enquete restrita a assinante (_enquete_permissao === 'pagantes')
   — mesma cor do selo de conteúdo exclusivo (.ct-selo-exclusivo), pra
   reforçar visualmente que é o mesmo tipo de benefício. */
.ct-enquete-pill-vip {
    background: #1a1a1a;
    color: #fbbf24;
    border-color: #1a1a1a;
}

.ct-enquete-total-badge {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
}

/* Estado bloqueado: enquete VIP pra quem ainda não é assinante — mesma
   ideia do teaser de matéria bloqueada, só que compacto pro card da
   enquete. */
.ct-enquete-bloqueada {
    text-align: center;
    padding: 18px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ct-enquete-bloqueada i {
    font-size: 20px;
    color: #94a3b8;
    margin-bottom: 8px;
    display: block;
}

.ct-enquete-bloqueada p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.4;
}

.ct-enquete-bloqueada .ct-btn-pay {
    display: inline-block;
    padding-left: 24px;
    padding-right: 24px;
}

.ct-enquete-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 14.5px;
    font-weight: 800;
    color: #333333;
    line-height: 1.35;
    margin: 0 0 14px 0;
    letter-spacing: -0.2px;
}

.ct-enquete-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.ct-enquete-option-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.ct-enquete-option-card:hover {
    border-color: #e2e8f0;
    background: #fff5f6;
}

.ct-enquete-option-card:has(input:checked),
.ct-enquete-option-card.selected {
    border-color: var(--cor-primaria, #e11d48);
    background: #fff1f2;
    box-shadow: 0 0 0 1px var(--cor-primaria, #e11d48);
}

.ct-enquete-radio {
    display: none;
}

.ct-enquete-custom-radio {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: #ffffff;
}

.ct-enquete-option-card:hover .ct-enquete-custom-radio {
    border-color: var(--cat-cor, var(--cor-primaria, #e11d48));
}

.ct-enquete-option-card input:checked + .ct-enquete-custom-radio,
.ct-enquete-option-card.selected .ct-enquete-custom-radio {
    border-color: var(--cor-primaria, #e11d48);
    background: var(--cor-primaria, #e11d48);
}

.ct-enquete-option-card input:checked + .ct-enquete-custom-radio::after,
.ct-enquete-option-card.selected .ct-enquete-custom-radio::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.ct-enquete-option-text {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    line-height: 1.3;
}

.ct-enquete-option-card input:checked ~ .ct-enquete-option-text,
.ct-enquete-option-card.selected .ct-enquete-option-text {
    color: #0f172a;
}

.ct-enquete-btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--cor-primaria, #e11d48) 0%, #be123c 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(225, 29, 72, 0.3);
    transition: all 0.2s ease;
}

.ct-enquete-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(225, 29, 72, 0.4);
}

.ct-enquete-form-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.ct-enquete-toggle-results,
.ct-enquete-toggle-form {
    background: none;
    border: none;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
    padding: 4px 8px;
}

.ct-enquete-toggle-results:hover,
.ct-enquete-toggle-form:hover {
    color: var(--cat-cor, var(--cor-primaria, #e11d48));
}

/* Resultados em Barras */
.ct-enquete-results-wrap {
    animation: fadeInEnquete 0.3s ease;
}

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

.ct-enquete-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.ct-enquete-res-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-enquete-res-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
}

.ct-enquete-res-text {
    font-weight: 700;
    color: #1e293b;
}

.ct-enquete-res-percent {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-weight: 800;
    color: var(--cor-primaria, #e11d48);
    font-size: 13px;
}

.ct-enquete-res-bar-bg {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.ct-enquete-res-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, var(--cor-primaria, #e11d48));
    border-radius: 8px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ct-enquete-res-votes {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    align-self: flex-end;
}

.ct-enquete-results-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
    font-size: 11.5px;
}

.ct-enquete-status-msg {
    color: #10b981;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   PODCAST CIDADE TREVO CAST (HORIZONTAL COM PROGRESSO)
   ============================================================ */
.ct-podcast-card-horizontal {
    background: linear-gradient(145deg, #090d16 0%, #151c2e 50%, #1e293b 100%);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
}

.ct-podcast-thumb-square {
    width: 82px;
    height: 82px;
    min-width: 82px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    background: #020617;
}

.ct-podcast-thumb-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-podcast-thumb-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #f43f5e;
    font-size: 10px;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ct-podcast-body-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ct-podcast-show-name {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #38bdf8;
    margin-bottom: 3px;
}

.ct-podcast-title-h {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.ct-podcast-title-h a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ct-podcast-title-h a:hover {
    color: #f43f5e;
}

/* Player do episódio: <audio controls> nativo (funcional de verdade — o
   player desenhado à mão que existia aqui antes era decoração fixa, sem
   nenhum arquivo por trás) dentro do mesmo cartão escuro que já existia. */
.ct-podcast-player-inline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 8px;
}

.ct-podcast-audio {
    display: block;
    width: 100%;
    height: 32px;
}

/* ============================================================
   3 COLUNAS INFERIORES (com divisores)
   ============================================================ */
.ct-3-cols-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}
/* Antes cada coluna tinha padding: 0 20px, com first/last perdendo o lado de
   fora — a do meio ficava pagando os dois lados (40px) contra 20px das
   pontas, então a imagem dela, que estica a 100% da coluna, sempre saía
   visivelmente menor. Trocado por gap simétrico entre as três; o divisor
   agora é uma linha desenhada no meio do gap, não mais padding assimétrico. */
.ct-inf-col {
    position: relative;
    min-width: 0;
    width: 100%;
}
.ct-inf-col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    width: 1px;
    background: #eee;
}

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

/* ============================================================
   HORÓSCOPO WIDGET (Místico & Moderno)
   ============================================================ */
.ct-horoscopo-widget {
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

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

/* Painel de Previsão Ativo */
.ct-signo-result {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeInSigno 0.3s ease;
}

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

.ct-signo-result-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ct-signo-result-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-signo-icon-big {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #503085;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-signo-icon-big svg {
    width: 32px;
    height: 32px;
}

.ct-signo-result-title {
    margin: 0;
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: #503085;
    line-height: 1.2;
}

.ct-signo-result-periodo {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 400;
}

.ct-signo-result-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: #334155;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-signo-aspects {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 14px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.ct-signo-aspect-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #503085;
    line-height: 120%;
}

.ct-signo-aspect-item i {
    font-size: 12px;
    margin-top: 2px;
}

.ct-signo-aspect-item strong {
    color: #334155;
    margin-right: 4px;
}

.ct-signo-details {
    display: flex;
    gap: 8px;
}

.ct-signo-detail-box {
    flex: 1;
    background: rgb(248 245 253);
    border: 1px solid rgb(242 236 253);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
}

.ct-signo-detail-label {
    display: block;
    font-size: 9.5px;
    color: #503085;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

.ct-signo-detail-value {
    font-size: 15.5px;
    color: #503085;
    font-weight: 500;
}

.ct-signo-detail-value--gold {
    color: #fbbf24;
    font-weight: 800;
}

/* Botões de Ação Inteligente do Horóscopo */
.ct-signo-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 8px;
    text-transform: uppercase;
}

.ct-signo-actions-bar {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

.ct-signo-btn-action {
    flex: 1;
    background: rgb(80 48 133);
    border: 1px solid rgb(80 48 133);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ct-signo-btn-action:hover {
    background: rgb(248 245 253);
    border-color: #f2ecfd;
    color: #503085;
    transform: translateY(-1px);
}

.ct-signo-btn-action.saved {
    background: rgba(251, 191, 36, 0.25);
    border-color: #fbbf24;
    color: #fbbf24;
}

.ct-signo-btn-zap {
    flex: 1;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    transition: all 0.2s ease;
}

.ct-signo-btn-zap:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    color: #ffffff;
}

.ct-signo-btn-voltar {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ct-signo-btn-voltar:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    color: #fbbf24;
    transform: translateX(-2px);
}

/* ============================================================
   CENTRAL DO CIDADÃO & UTILIDADE PÚBLICA (PADRÃO EDITORIAL)
   ============================================================ */
.ct-comunidade-section {
    margin: 45px 0 35px 0;
}

.ct-comunidade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.ct-comunidade-col {
    display: flex;
    flex-direction: column;
}

/* Farmácia & SOS Card */
.ct-plantao-card {
    padding: 14px 0 14px 14px;
    margin-bottom: 12px;
    border-left: 3px solid var(--cor-primaria, #e11d48);
}

.ct-plantao-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ct-plantao-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 7px;
    border-radius: 8px;
}

.ct-plantao-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    display: inline-block;
    animation: plantaoPulse 1.5s infinite;
}

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

.ct-plantao-time {
    font-size: 10.5px;
    color: #666;
    font-weight: 600;
}

.ct-plantao-nome {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.ct-plantao-end {
    font-size: 11.5px;
    color: #555;
    margin: 0 0 10px 0;
}

.ct-plantao-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cor-primaria, #e11d48);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ct-plantao-btn:hover {
    background: #be123c;
    color: #ffffff;
}

/* Telefones Úteis saiu daqui — virou dropdown no rodape (footer.php), que
   carrega todo mundo e nao so a home. */

/* Listas Comunitárias Editoriais (Vagas, Agenda, Achados) */
.ct-comunidade-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ct-c-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.ct-c-item:last-child {
    border-bottom: none;
}

.ct-c-item-body {
    flex: 1;
    min-width: 0;
}

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

.ct-c-chapeu {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.ct-c-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 3px 0;
}

.ct-c-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ct-c-title a:hover {
    color: var(--cat-cor, var(--cor-primaria, #e11d48));
}

.ct-c-sub {
    display: block;
    font-size: 11px;
    color: #777;
    line-height: 1.3;
}

.ct-c-sub i {
    color: var(--cor-primaria, #e11d48);
    margin-right: 3px;
}

.ct-c-sub + .ct-c-sub {
    margin-top: 2px;
}

.ct-c-tag {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    margin-left: 8px;
    white-space: nowrap;
}

.ct-c-tag--primary {
    background: #fee2e2;
    color: #b91c1c;
}

.ct-c-tag--alert {
    background: #fef3c7;
    color: #92400e;
}

/* Eventos da Agenda com Data Quadrada */
.ct-c-event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.ct-c-event-item:last-child {
    border-bottom: none;
}

.ct-c-event-date {
    background: var(--cor-primaria, #e11d48);
    color: #ffffff;
    border-radius: 8px;
    padding: 4px 6px;
    text-align: center;
    min-width: 42px;
    flex-shrink: 0;
}

.ct-c-event-day {
    display: block;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.ct-c-event-hour {
    display: block;
    font-size: 8.5px;
    font-weight: 700;
    opacity: 0.9;
    margin-top: 2px;
}

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

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

/* ============================================================
   TV PORTAL
   ============================================================ */
/* ============================================================
   TV CIDADE TREVO (DARK MAGAZINE VIDEO HUB)
   ============================================================ */
.ct-tv-section {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    padding: 50px 0 60px 0;
    margin-top: 50px;
    margin-bottom: 0;
    color: #ffffff;
    border-top: 3px solid var(--cor-primaria, #e11d48);
}

.ct-tv-header {
    margin-bottom: 28px;
    padding-bottom: 12px;
}

.ct-tv-btn-yt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ct-tv-btn-yt:hover {
    background: #ff0000;
    border-color: #ff0000;
    color: #ffffff;
}

.ct-tv-btn-yt:hover i {
    color: #ffffff !important;
}

.ct-tv-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 25px;
    align-items: stretch;
}

/* Estado vazio: sem video publicado nem no CPT nem na categoria de fallback. */
.ct-tv-vazio {
    text-align: center;
    padding: 55px 20px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.ct-tv-vazio-icon {
    font-size: 30px;
    color: var(--cor-primaria, #2271b1);
    margin-bottom: 14px;
}

.ct-tv-vazio h4 {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.ct-tv-vazio p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.65);
    max-width: 46ch;
    margin: 0 auto;
    line-height: 1.55;
}

/* Card Principal (Texto Sobreposto na Imagem) */
.ct-tv-main-col {
    display: flex;
    height: 100%;
}

.ct-tv-main-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #ffffff;
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.ct-tv-main-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 320px;
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ct-tv-main-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.82;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.ct-tv-main-card:hover .ct-tv-main-thumb img {
    transform: scale(1.04);
    opacity: 0.92;
}

.ct-tv-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.92) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Botão Play Central */
.ct-tv-play-btn {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cor-primaria, #e11d48);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(225, 29, 72, 0.5);
    transition: all 0.25s ease;
    z-index: 3;
}

.ct-tv-play-btn--lg {
    width: 58px;
    height: 58px;
    font-size: 20px;
}

.ct-tv-play-btn--lg i {
    margin-left: 4px;
}

.ct-tv-main-card:hover .ct-tv-play-btn--lg {
    transform: translate(-50%, -50%) scale(1.15);
    background: #ffffff;
    color: var(--cat-cor, var(--cor-primaria, #e11d48));
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.4);
}

.ct-tv-top-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
}

.ct-tv-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(225, 29, 72, 0.9);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

.ct-tv-badge-live i {
    font-size: 7px;
    color: #ffffff;
    animation: plantaoPulse 1.5s infinite;
}

.ct-tv-duration {
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.ct-tv-duration--sm {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 9px;
    padding: 1px 5px;
}

/* Conteúdo Sobreposto no Rodapé da Imagem */
.ct-tv-main-overlay-content {
    position: relative;
    z-index: 4;
    padding: 20px 22px;
}

.ct-tv-chapeu-badge {
    display: inline-block;
    background: var(--cor-primaria, #e11d48);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ct-tv-chapeu {
    color: var(--cor-primaria, #e11d48);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: inline-block;
}

.ct-tv-main-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 18.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    transition: color 0.2s ease;
}

.ct-tv-main-card:hover .ct-tv-main-title {
    /* A cor primaria pura da 3,83 de contraste sobre o degrade quase preto do
       rodape da foto — abaixo do minimo de 4,5. Uma versao clareada com
       branco (80/20) da 5,57, ainda reconhecivel como a cor do site. */
    color: #4e8dc1;
    color: color-mix(in srgb, var(--cor-primaria, #2271b1) 80%, white 20%);
}

/* Coluna Lateral de Vídeos */
.ct-tv-side-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 12px;
}

.ct-tv-side-card {
    display: flex;
    gap: 14px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 10px;
    transition: background 0.2s ease;
    align-items: center;
    flex: 1;
}

.ct-tv-side-card:hover {
    background: rgba(255, 255, 255, 0.07);
}

.ct-tv-side-thumb {
    position: relative;
    width: 140px;
    min-width: 140px;
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.ct-tv-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.ct-tv-side-card:hover .ct-tv-side-thumb img {
    opacity: 1;
    transform: scale(1.06);
}

.ct-tv-play-btn--sm {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.ct-tv-play-btn--sm i {
    margin-left: 2px;
}

.ct-tv-side-card:hover .ct-tv-play-btn--sm {
    transform: translate(-50%, -50%) scale(1.15);
    background: #ffffff;
    color: var(--cat-cor, var(--cor-primaria, #e11d48));
}

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

.ct-tv-side-title {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.ct-tv-side-card:hover .ct-tv-side-title {
    color: #4e8dc1;
    color: color-mix(in srgb, var(--cor-primaria, #2271b1) 80%, white 20%);
}

@media (max-width: 992px) {
    .ct-tv-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .ct-tv-side-card {
        flex-direction: column;
        align-items: stretch;
    }
    .ct-tv-side-thumb {
        width: 100%;
        min-width: 100%;
        aspect-ratio: 16/9;
    }
}

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

/* ============================================================
   SECTION SPACING
   ============================================================ */
.ct-section {
    margin-top: 50px;
    margin-bottom: 50px;
}
.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;
    }
    /* .ct-classificados-grid virou flex — a mesma pilha de 1 por linha entra
       via flex-basis no card, nao em grid-template-columns. */
    .ct-classificado-card {
        flex-basis: 100%;
    }
    .ct-inf-col {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 0 0 20px 0;
        margin-bottom: 0px;
    }
    .ct-inf-col:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    /* A linha divisoria vertical (::after, right:-20px) so faz sentido entre
       colunas lado a lado — no mobile as colunas empilham (1fr acima) e
       viram uma por linha, cada uma ocupando 100% da largura. Sem desligar
       aqui, esse ::after continuava ativo e vazava 20px pra fora da tela,
       criando um scroll horizontal fantasma de alguns pixels (a pagina
       "balançava" ao arrastar o dedo). O border-bottom acima ja cobre o
       papel de separador nesse layout empilhado. */
    .ct-inf-col:not(:last-child)::after {
        content: none;
    }
    .bopea-category-blocks {
        flex-direction: column;
    }
    .ct-guia-grid-premium {
        grid-template-columns: 1fr;
    }
    .ct-guia-grid-comum {
        grid-template-columns: repeat(2, 1fr);
    }
    .bopea-middle-row {
        grid-template-columns: 1fr;
    }
    .bopea-bottom-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (max-width: 480px) {
    .ct-guia-grid-comum {
        grid-template-columns: 1fr;
    }
    .bopea-bottom-row {
        grid-template-columns: 1fr;
    }
    .ct-signos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   HERO MAGAZINE GRID (INSPIRAÇÃO EDITORIAL BAND / NYT / R7)
   ============================================================ */
.ct-hero-magazine-grid {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 22px;
    align-items: start;
    margin-bottom: 30px;
}

/* ============================================================
   PADRÃO EDITORIAL DE TÍTULOS DE SEÇÃO (CT-SECTION-HEADING)
   ============================================================ */
.ct-section-heading {
    position: relative;
    display: block;
    /* Regua padrao do titulo de secao. Hoje todo .ct-section-heading do site
       vive dentro de .ct-hero-side-col, que troca esta borda por um ::after
       em flex — a linha fica ao lado do titulo, nao embaixo dele. Esta
       declaracao e a reserva para uso fora daquela coluna. */
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
    padding-bottom: 0;
    text-align: left;
}

.ct-section-heading-title {
    position: relative;
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4rem;
    color: #17191d;
    margin: 0;
    padding-bottom: 0;
    margin-bottom: 6px;
    text-align: left;
    vertical-align: bottom;
}

/* Linha mais grossa colada logo ABAIXO da barra fina, no tamanho exato do título */
.ct-section-heading-title::after {
    content: "";
    position: absolute;
    top: 100%; /* Fica exatamente ABAIXO da barra fina */
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--header-accent-color, var(--cor-primaria));
    border-radius: 0 0 2px 2px;
}

/* Coluna 2: Super Destaque Central */
.ct-hero-main-col {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
}

/* ============================================================
   SUPER DESTAQUE EDITORIAL UNIFICADO (DARK SHOWCASE)
   ============================================================ */
.ct-hero-showcase {
    background: #0d0f12;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
}

.ct-hero-showcase-cover {
    position: relative;
    display: block;
    /* Mais alta que 16/10 porque o overlay carrega manchete E as duas
       relacionadas. Em 16/11 o conjunto cobria 65% da foto e sobrava pouca
       imagem; em 16/13 o mesmo conteudo cobre pouco mais da metade. */
    aspect-ratio: 16/13;
    overflow: hidden;
}
.ct-hero-showcase-principal {
    display: block;
    text-decoration: none;
    color: inherit;
}
.ct-hero-showcase-cover img {
    width: 100%;
    height: 70%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: filter 0.4s ease, opacity 0.4s ease;
}
.ct-hero-showcase-cover:hover img {
    filter: brightness(1.1);
}

/* O degradê que se funde com o fundo preto do container (concentrado na base) */
.ct-hero-showcase-overlay {
    position: absolute;
    inset: 0;
    /* Sobe mais alto que antes: o degrade agora precisa dar contraste para
       a manchete E para as duas relacionadas, que sairam do bloco preto
       separado e vieram para cima da foto. */
    /* Fallback para navegador sem color-mix: o degrade neutro de sempre. */
    background: linear-gradient(to top, #0b0d10 0%, rgba(11, 13, 16, 0.95) 34%, rgba(11, 13, 16, 0.72) 56%, rgba(11, 13, 16, 0.18) 78%, rgba(0,0,0,0) 100%);
    background: linear-gradient(to top,
        var(--cat-escuro, #0b0d10) 0%,
        color-mix(in srgb, var(--cat-escuro, #0b0d10) 95%, transparent) 34%,
        color-mix(in srgb, var(--cat-escuro, #0b0d10) 72%, transparent) 56%,
        color-mix(in srgb, var(--cat-escuro, #0b0d10) 18%, transparent) 78%,
        transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 22px 22px 18px;
    z-index: 2;
}

.ct-hero-showcase-chapeu {
    margin-bottom: 8px;
}

.ct-hero-showcase-title {
    font-family: var(--font-serif);
    font-size: 33px;
    font-weight: 700;
    line-height: 1.14;
    /* Texto grande e pesado precisa de espacamento negativo para nao parecer
       frouxo; o inverso vale para texto pequeno. Na serifada o aperto e
       menor: o -.025em da sans fechava as serifas umas nas outras. */
    letter-spacing: -.012em;
    color: #ffffff;
    margin: 8px 0 0;
    transition: color 0.2s ease;
    /* Tres linhas. Com o teto de 85 caracteres, uma manchete dentro da regra
       cabe em tres — testado com 70, 80 e 85. Enquanto o teto era 95 isso
       exigia quatro linhas, e a manchete ocupava a foto inteira. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-hero-showcase-principal:hover .ct-hero-showcase-title {
    color: #e2e8f0;
    text-decoration: underline;
}

/* Notícias Relacionadas no Fundo Escuro */
.ct-hero-showcase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ct-hero-showcase-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}
.ct-hero-showcase-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a32a;
    flex-shrink: 0;
    margin-top: 6px;
}
.ct-hero-showcase-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}
.ct-hero-showcase-item a:hover {
    color: #cbd5e1;
    text-decoration: underline;
}

/* 3 Destaques Inferiores */
/* Sem borda: a separacao do bloco de cima vem do espaco, e a separacao
   entre os tres vem da meia barra entre as colunas. */
.ct-hero-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 22px;
    padding-top: 0;
    border-top: 0;
}
.ct-hero-sub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
/* A "meia barra": um risco de meia altura no meio do vao, no lugar de
   borda cheia. Separa sem fechar cada chamada numa caixa. */
.ct-hero-sub-card + .ct-hero-sub-card::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 52%;
    background: #e2e8f0;
}
/* ==========================================================================
   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;
}

/* Variante sobre foto: pilula solida, para o contraste nao depender da
   imagem que estiver por tras. */
.ct-hero-showcase-chapeu,
.cgc-badge-chapeu span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    background: var(--chapeu-cor, var(--cor-secundaria, #008a20));
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 8px;
    box-shadow: none;
}
.ct-hero-sub-img-wrap {
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 12px;
}
.ct-hero-sub-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.ct-hero-sub-card:hover .ct-hero-sub-img-wrap img {
    filter: brightness(1.12);
}
.ct-hero-sub-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -.04em;
    margin: 0;
    color: #333333;
    transition: color 0.2s ease;
}
.ct-hero-sub-card:hover .ct-hero-sub-img-wrap {
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 12px;
}
.ct-hero-sub-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.ct-hero-sub-card:hover .ct-hero-sub-img-wrap img {
    filter: brightness(1.12);
}
.ct-hero-sub-card:hover .ct-hero-sub-title {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}


/* Coluna 3: Feed Últimas Notícias (Estilo Imagem Anexa) */
.ct-hero-side-col {
}
.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: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}
.ct-side-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.ct-side-feed-item:hover .ct-side-feed-thumb img {
    filter: brightness(1.12);
}
.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));
}

/* Responsivo do Hero */
@media (max-width: 1100px) {
    .ct-hero-magazine-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ct-hero-main-col {
        grid-column: 1 / -1;
        order: -1;
    }
}
@media (max-width: 768px) {
    .ct-hero-magazine-grid {
        grid-template-columns: 1fr;
    }
    /* Retrato no celular. Na tela estreita a manchete quebra em mais linhas,
       entao o overlay cobria 80% da foto e sobrava so uma faixa de imagem —
       bem pior que os 55% do desktop. Mais altura devolve a foto. */
    .ct-hero-showcase-cover {
        aspect-ratio: 4/5;
    }
    .ct-hero-showcase-title {
        font-size: 22px;
        /* No desktop o teto de 85 caracteres cabe em 3 linhas (medido em
           500px/32px). No mobile a caixa e mais estreita e a fonte nao
           encolheu na mesma proporcao, entao a mesma manchete de 85
           caracteres so cabe em 4 linhas aqui — testado com um titulo real
           de 78 caracteres, que cortava com "..." faltando 1 linha inteira.
           Ha espaco de sobra na foto (aspect-ratio 4/5) pra essa 4a linha. */
        -webkit-line-clamp: 4;
    }
    /* No desktop os 3 destaques sao cards grandes lado a lado (foto em
       cima, texto embaixo) — empilhados assim no mobile, cada card sozinho
       vira uma foto enorme, e os 3 juntos tomam a tela toda de rolagem so
       pra chegar no resto da capa. Vira lista compacta (miniatura + texto
       lado a lado), no mesmo estilo do bloco "Ultimas Noticias" ao lado —
       cabe muito mais gente na mesma altura de tela. */
    .ct-hero-sub-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .ct-hero-sub-card {
        flex-direction: row;
        gap: 12px;
        align-items: flex-start;
        padding: 13px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .ct-hero-sub-card:first-child {
        padding-top: 0;
    }
    .ct-hero-sub-card:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    /* A "meia barra" entre cards era pensada pro layout em coluna (foto
       grande empilhada) — na lista compacta cada item ja tem seu proprio
       border-bottom, entao ela so duplicaria o separador. */
    .ct-hero-sub-card + .ct-hero-sub-card::before {
        content: none;
    }
    .ct-hero-sub-img-wrap {
        width: 140px;
        height: 112px;
        aspect-ratio: auto;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .ct-hero-sub-info {
        flex: 1;
        min-width: 0;
    }
    .ct-hero-sub-title {
        font-size: 17.5px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ct-side-feed-thumb {
        width: 140px;
        height: 112px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f0f0f0;
    }
    .ct-side-feed-title {
        font-size: 17.5px;
    }
}

/* ============================================================
   WIDGET DE CÂMBIO (ESTILO BANCO CENTRAL / BANDEIRAS CIRCULARES)
   ============================================================ */
.ct-cambio-widget {
    margin-bottom: 11px;
}
.ct-cambio-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ct-cambio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ct-cambio-flag {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.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;
}
.ct-cambio-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ct-cambio-name {
    font-size: 13px;
    font-weight: 700;
    color: #6b778c;
    margin-bottom: 2px;
    line-height: 1.2;
}
.ct-cambio-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ct-cambio-var {
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.ct-cambio-var i {
    font-size: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ct-cambio-up {
    color: #00875a;
}
.ct-cambio-up i {
    background: #00875a;
}
.ct-cambio-down {
    color: #de350b;
}
.ct-cambio-down i {
    background: #de350b;
}
.ct-cambio-val {
    font-size: 14.5px;
    font-weight: 800;
    color: #333333;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
}
.ct-cambio-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #8c9ba5;
    margin-top: 10px;
    padding-top: 4px;
    font-weight: 500;
}
.ct-cambio-footer::before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaeaea;
}

/* ============================================================
   WIDGET DE CLIMA COMPLETO DO DIA (ESTILO LIMPO & SEM BOXES)
   ============================================================ */
.ct-clima-widget {
    margin-bottom: 22px;
}
.ct-clima-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef6ff 0%, #f7fbff 60%, #ffffff 100%);
    border: 1px solid #e6f0fb;
    position: relative;
    overflow: hidden;
}
.ct-clima-top::before {
    content: "";
    position: absolute;
    top: -34px;
    right: -34px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .10), transparent 70%);
    pointer-events: none;
}

/* Card muda pra um degradê de céu noturno quando is_day=0 (Open-Meteo) —
   sem isso, o cartão continuava com fundo de "dia" (azul claro) mesmo
   mostrando lua/"Noite Limpa" no ícone e no texto, uma contradição visual. */
.ct-clima-top--noite {
    background: linear-gradient(135deg, #0b1224 0%, #1a2440 55%, #2a3660 100%);
    border-color: #23305a;
}
.ct-clima-top--noite::before {
    background: radial-gradient(circle, rgba(148, 163, 255, .22), transparent 70%);
}
.ct-clima-top--noite .ct-clima-city {
    color: #f1f5f9;
}
.ct-clima-top--noite .ct-clima-city i {
    color: #a5b4ff;
}
.ct-clima-top--noite .ct-clima-cond {
    color: #cbd5e1;
}
.ct-clima-top--noite .ct-clima-temp {
    color: #f8fafc;
}
.ct-clima-city-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
}
.ct-clima-city {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -.01em;
}
.ct-clima-city i {
    color: var(--cor-primaria, #e3262e);
    font-size: 12px;
}
.ct-clima-cond {
    font-size: 9.5px;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    /* background: #fff; */
    /* border: 1px solid #e2e8f0; */
    display: inline-flex;
    width: fit-content;
    /* padding: 3px 9px; */
    /* border-radius: 20px;*/
}
.ct-clima-current {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.ct-clima-icon {
    font-size: 25px;
    /* width: 46px; */
    /* height: 46px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #fff; */
    /* border-radius: 50%; */
    /* box-shadow: 0 3px 10px rgba(15, 23, 42, .09); */
    flex-shrink: 0;
}
.ct-clima-temp {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    font-family: var(--font-heading, "Figtree", sans-serif);
    letter-spacing: -.02em;
    white-space: nowrap;
}

/* Alerta da Defesa Civil - Linha Limpa sem Box */
.ct-clima-alerta {
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
    background: transparent;
    border: none;
    padding: 0;
}
.ct-clima-alerta--normal {
    color: #007a22;
}
.ct-clima-alerta--aviso {
    color: #b7791f;
}
.ct-clima-alerta--perigo {
    color: #c53030;
    font-weight: 700;
    animation: pulseAlert 2s infinite ease-in-out;
}

/* 4 Indicadores - Grade Limpa e Aberta com Divisores Sutis */
.ct-clima-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 4px;
}
.ct-clima-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px;
    border-right: 1px solid #f1f5f9;
}
.ct-clima-stat:first-child {
    padding-left: 0;
}
.ct-clima-stat:last-child {
    border-right: none;
    padding-right: 0;
}
.ct-clima-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #8c9ba5;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.ct-clima-stat-label i {
    font-size: 9px;
}
.ct-clima-stat-val {
    font-size: 10.5px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.2px;
}
.ct-clima-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #8c9ba5;
    margin-top: 10px;
    padding-top: 4px;
    font-weight: 500;
}
.ct-clima-footer::before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaeaea;
}

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

/* ============================================================
   WIDGET DE LOTERIAS CAIXA (ESTILO EDITORIAL ABERTO & MODERNO)
   ============================================================ */
.ct-loterias-widget {
    margin-bottom: 22px;
}
.ct-loterias-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.ct-loteria-tab-btn {
    flex: 1;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 2px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.ct-loteria-tab-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.ct-loteria-tab-btn.active {
    background: var(--tab-color, #209869);
    border-color: var(--tab-color, #209869);
    color: #ffffff;
}
.ct-loteria-panel {
    display: none;
}
.ct-loteria-panel.active {
    display: block;
    animation: ctFadeIn 0.25s ease-in-out;
}
@keyframes ctFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}
.ct-loteria-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 10px;
}
.ct-loteria-conc {
    color: #64748b;
}
.ct-loteria-conc strong {
    color: #0f172a;
}
.ct-loteria-status {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}
.ct-loteria-acumulou {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.ct-loteria-premiou {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.ct-loteria-balls-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.ct-loteria-ball {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lot-color, #209869);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ct-loteria-balls--lotofacil {
    gap: 4px;
}
.ct-loteria-balls--lotofacil .ct-loteria-ball {
    width: 24px;
    height: 24px;
    font-size: 10px;
}
.ct-loteria-premio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
}
.ct-loteria-premio-lbl {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}
.ct-loteria-premio-val {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--lot-color, #209869);
}
.ct-loterias-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #8c9ba5;
    margin-top: 10px;
    padding-top: 4px;
    font-weight: 500;
}
.ct-loterias-footer::before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaeaea;
}

/* ============================================================
   WIDGET DE OBITUÁRIO / NOTAS DE PESAR & MEMÓRIA (ESTILO ELEGANTE)
   ============================================================ */
.ct-obituario-widget {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
}
.ct-obituario-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    margin-bottom: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.ct-obituario-thumb-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #cbd5e1;
    background: #0f172a;
}
.ct-obituario-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
}
.ct-obituario-item:hover .ct-obituario-thumb-wrap img {
    filter: grayscale(20%);
}
.ct-obituario-candle {
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 13px;
    background: rgba(15, 23, 42, 0.75);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-obituario-info {
    flex: 1;
    min-width: 0;
}
.ct-obituario-tag-wrap {
    margin-bottom: 4px;
}
.ct-obituario-tag {
    display: inline-block;
    background: #e2e8f0;
    color: #475569;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 8px;
    line-height: 1.2;
}
.ct-obituario-name {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #333333;
    line-height: 1.25;
    transition: color 0.2s ease;
}
.ct-obituario-item:hover .ct-obituario-name {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}
.ct-obituario-meta {
    font-size: 11.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Idade+velório numa linha, sepultamento+data noutra — sem isto as duas
   colavam sem espaço, viravam um bloco só de texto. */
.ct-obituario-meta + .ct-obituario-meta {
    margin-top: 3px;
}
.ct-obituario-empty-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
}
.ct-obituario-empty-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.ct-obituario-empty-text {
    display: flex;
    flex-direction: column;
}
.ct-obituario-empty-text strong {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}
.ct-obituario-empty-text p {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}
.ct-obituario-cta {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    text-align: center;
    padding: 9px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ct-obituario-cta:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
}
.ct-obituario-cta i {
    color: #64748b;
    font-size: 13px;
}

/* Efeito global de iluminação suave em imagens com link no hover */
a img {
    transition: filter 0.3s ease, opacity 0.3s ease;
}
a:hover img {
    filter: brightness(1.12);
}

/* ============================================================
   SEÇÃO: BOCA NO TROMBONE • CANAL DO LEITOR (ESTILO ABERTO & DESCOMPLICADO)
   ============================================================ */
.ct-trombone-section {
    margin-top: 20px;
    margin-bottom: 20px;
}
.ct-trombone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
    gap: 20px;
    align-items: stretch;
}
.ct-trombone-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    transition: transform 0.2s ease;
}
.ct-trombone-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 10px;
}
.ct-trombone-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.ct-trombone-card:hover .ct-trombone-thumb-wrap img {
    filter: brightness(1.12);
}
.ct-trombone-chapeu {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    margin-bottom: 6px;
}
.ct-trombone-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #333333;
    margin: 0 0 6px 0;
    transition: color 0.2s ease;
}
.ct-trombone-card:hover .ct-trombone-title {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}
.ct-trombone-date {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

/* ============================================================
   CARTAZ PUBLICITÁRIO: SOU REPÓRTER LOCAL (IDÊNTICO À REFERÊNCIA)
   ============================================================ */
.ct-poster-card-wrap {
    width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1.5px solid #d1fae5;
    border-radius: 8px;
    padding: 15px 13px 13px 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Elementos de Fundo Decorativos */
.ct-poster-dots {
position: absolute;
    top: 8px;
    right: 8px;
    width: 70px;
    height: 86px;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 7px 7px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.ct-poster-curve {
position: absolute;
    bottom: -35px;
    left: -35px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(135deg, #008a20 0%, #065f46 100%);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Topo do Cartaz */
.ct-poster-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
}
.ct-poster-logo {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ct-poster-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #008a20;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 138, 32, 0.3);
}
.ct-poster-logo-icon i {
    transform: rotate(45deg);
    font-size: 12px;
}
.ct-poster-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.ct-poster-logo-text span {
    font-size: 8.5px;
    font-weight: 800;
    color: #065f46;
    letter-spacing: 0.4px;
}
.ct-poster-logo-text strong {
    font-size: 10px;
    font-weight: 900;
    color: #008a20;
    letter-spacing: 0.2px;
}

/* Pin de Localização com Foto */
.ct-poster-pin-badge {
    position: relative;
    width: 117px;
    height: 10px;
}
.ct-poster-pin-photo {
width: 110px;
    height: 110px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    overflow: hidden;
    border: 4.5px solid #008a20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    background: #0f172a;
}
.ct-poster-pin-photo img {
    width: 142%;
    height: 142%;
    transform: rotate(45deg) translate(-15%, -15%);
    object-fit: cover;
    display: block;
}
.ct-poster-pin-icon {
position: absolute;
    bottom: -41px;
    right: -11px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: .5px solid #008a20;
    color: #008a20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Conteúdo Principal */
.ct-poster-main {
    position: relative;
    z-index: 2;
    margin-bottom: 6px;
}
.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;
}
.ct-poster-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 18.5px;
    font-weight: 900;
    color: #333333;
    line-height: 1.18;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.2px;
}
.ct-poster-title span {
    color: #008a20;
}
.ct-poster-dash {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #008a20;
    border-radius: 8px;
    margin: 6px 0;
}
.ct-poster-desc {
    font-size: 12px;
    line-height: 1.35;
    color: #4b5563;
    margin: 0;
    max-width: 80%;
}

/* Rodapé: Mascote 3D + Selo + Botão */
.ct-poster-bottom {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 6px;
}
.ct-poster-mascot {
position: absolute;
    right: -27px;
    bottom: 10px;
    width: 115px;
    height: 193px;
    pointer-events: none;
    z-index: 1;
}
.ct-poster-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
    display: block;
}
.ct-poster-action-wrap {
    position: relative;
    z-index: 2;
}
.ct-poster-micro-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 138, 32, 0.08);
    border: 1px solid rgba(0, 138, 32, 0.18);
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 8px;
    color: #065f46;
    margin-bottom: 8px;
    max-width: 60%;
    line-height: 1.2;
}
.ct-poster-micro-badge i {
    font-size: 8.5px;
    color: #008a20;
    flex-shrink: 0;
}
.ct-poster-btn-zap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 800;
    padding: 8px 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;
    text-align: center;
    width: 100%;
}
.ct-poster-btn-zap:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(37, 211, 102, 0.5);
    color: #ffffff;
}

@media (max-width: 992px) {
    .ct-trombone-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ct-poster-card-wrap {
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width: 580px) {
    .ct-trombone-grid {
        grid-template-columns: 1fr;
    }
}

/* Boca no Trombone sem denuncia cadastrada.
   Tres colunas vazias ao lado do cartaz anunciariam um canal que ninguem usa —
   e foi justamente para nao mostrar isso que a capa exibia noticia alheia sob a
   chamada de "denuncias da nossa comunidade". O convite ocupa o espaco e diz a
   verdade: o canal existe e espera a primeira. */
.ct-trombone-grid--convite {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.ct-trombone-convite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 28px 30px;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
}

.ct-trombone-convite h4 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #333333;
    margin: 0;
}

.ct-trombone-convite p {
    font-size: 14px;
    line-height: 1.55;
    color: #555555;
    margin: 0;
    max-width: 62ch;
}

.ct-trombone-convite-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-primaria);
    text-decoration: none;
}

.ct-trombone-convite-link:hover {
    text-decoration: underline;
}

/* Local da denuncia no card: reaproveita a linha que ja se cola no rodape do
   card pelo margin-top auto, entao cards de alturas diferentes alinham embaixo. */
.ct-trombone-date i {
    color: #ef4444;
}

@media (max-width: 992px) {
    .ct-trombone-grid--convite {
        grid-template-columns: 1fr;
    }
    .ct-trombone-convite {
        padding: 22px 20px;
    }
}

/* ============================================================
   BLOCO DE CATEGORIA PRINCIPAL DA HOME (bopea-category-blocks)
   ============================================================ */
.bopea-category-blocks {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    margin-top: 25px;
    align-items: flex-start;
}

.bcb-col-left {
    flex: 1;
    min-width: 0;
}

.bcb-main-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.bcb-main-post {
    display: flex;
    flex-direction: column;
}

.bcb-main-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.bcb-thumb-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

.bcb-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.bcb-main-link:hover .bcb-thumb-wrap img {
    transform: scale(1.04);
}

.bcb-post-title {
    font-family: var(--font-serif, "Georgia", serif);
    font-size: 17.5px;
    font-weight: 800;
    line-height: 1.32;
    color: #333333;
    margin: 4px 0 0 0;
    transition: color 0.2s ease;
}

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

.bcb-banner {
    margin-top: 25px;
    width: 100%;
}

/* Coluna Lateral Direita: Máximo de 300px */
.bcb-col-right {
    flex: 0 0 300px;
    min-width: 0;
    width: 300px;
    max-width: 300px;
}

@media (max-width: 992px) {
    .bopea-category-blocks {
        flex-direction: column;
    }
    .bcb-col-right {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }
    .bcb-main-row {
        grid-template-columns: 1fr;
    }
}

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


/* Titulo do resultado de busca. A cor era style inline no <a>, o que vence
   qualquer :hover vindo da folha — o link nunca acendia na cor da
   editoria. Como classe, o hover volta a valer. */
.ct-search-title {
    margin: 0 0 6px 0;
    font-family: var(--font-serif);
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.32;
}

.ct-search-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

/* Linha do resultado de busca. O layout era style inline no <article>, mas o
   elemento passou a publicar --cat-cor e HTML nao aceita dois style: o
   segundo e descartado em silencio e a linha perderia o flex. Mora aqui. */
.ct-search-item {
    display: flex;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    align-items: flex-start;
}

/* Miniatura do resultado de busca: era style inline no <img>, virou classe
   quando a renderizacao passou a ser responsiva pelo cidadetrevo_a_imagem(). */
.ct-search-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Cards 16:10 da capa (categoria dinamica e bloco de 3 colunas): o style
   estava inline no <img> e saiu quando a imagem passou a ser responsiva. */
.ct-img-16-10 {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    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;
}

/* ==========================================================================
   LISTAGENS (archive.php)
   ========================================================================== */
.ct-arq-header {
    padding: 0 0 18px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--cor-primaria, #2271b1);
}
.ct-arq-titulo {
    font-size: 30px;
    font-weight: 800;
    color: #333333;
    line-height: 1.2;
    margin: 0;
}
.ct-arq-descricao {
    margin: -14px 0 30px 0;
    font-size: 15px;
    color: #64748b;
    line-height: 1.5;
    max-width: 85ch;
    text-align: justify;
}
.ct-arq-contagem {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
}
.ct-arq-item-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}
.ct-cat-inline-banner {
    grid-column: 1 / -1;
    margin: 20px 0 35px;
}
.ct-arq-vazio {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.ct-arq-vazio i {
    font-size: 34px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 14px;
}
.ct-arq-vazio p {
    font-size: 17px;
    margin: 0 0 16px;
}
.ct-arq-vazio-link {
    display: inline-block;
    padding: 9px 20px;
    background: var(--cor-primaria, #2271b1);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
@media (max-width: 640px) {
    .ct-arq-titulo { font-size: 23px; }
}

/* Perfil de Colunista (taxonomy-colunista.php) */

.ct-colunista-perfil-header {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ct-colunista-perfil-avatar {
    width: 90px;
    height: 90px;
    min-width: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #c2c5cb;
}

.ct-colunista-perfil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .ct-colunista-perfil-header {
        flex-direction: column;
        text-align: center;
    }
}

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

/* Boca no Trombone: mapa acima da lista. */
.ct-trombone-mapa {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px 18px 12px;
    margin-bottom: 28px;
}
.ct-trombone-mapa-legenda {
    margin: 6px 0 0;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ct-trombone-tem-local {
    margin-left: 8px;
    color: #ef4444;
    font-weight: 700;
}

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

/* O CSS dos banners (espaco livre animado e banner do anunciante) mudou
   para o plugin: cidadetrevo-core/assets/css/banners.css — o motor de
   anuncios e do plugin, e o preview do admin precisa das mesmas regras. */

/* ==========================================================================
   HERO DA CAPA — refinamento
   Sem sombra e sem hover que levanta, por pedido. A separação vem de borda,
   espaçamento e tipografia; a hierarquia vem do peso e do tamanho da fonte.
   Número é o conteúdo desta coluna, então todos usam tabular-nums: sem isso
   os dígitos têm larguras diferentes e as colunas dançam a cada atualização.
   ========================================================================== */


/* O hover do destaque some: o card inteiro já é um link, e o zoom da foto
   competia com a leitura do título sobreposto. */
.ct-hero-showcase-cover img {
    transition: none;
}
.ct-hero-showcase-cover:hover img {
    transform: none;
}

/* Cabeçalho de seção da coluna: régua fina em vez de caixa */
.ct-hero-side-col .ct-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 0;
}
.ct-hero-side-col .ct-section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.ct-hero-side-col .ct-section-heading-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.04em;
    color: #17191d;
}

/* Widgets da coluna: um bloco, uma borda, sem elevação */
.ct-hero-side-col .ct-cambio-widget {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
    background: #fff;
}
.ct-hero-side-col .ct-cambio-item {
    padding: 6px 0;
}
.ct-hero-side-col .ct-cambio-grid > .ct-cambio-item + .ct-cambio-item {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}
.ct-hero-side-col .ct-cambio-footer {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    color: #94a3b8;
    text-align: left;
}
/* Ú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%;
    }
}