/*
 * Capa - secoes exclusivas da home
 * Carrega em: so a capa (ver inc/assets.php).
 */

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

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

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

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

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

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

/* Na capa sao so 4 empresas: 2 colunas x 2 linhas, com mais respiro (as
   paginas de arquivo do Guia seguem em 3 colunas). */
.ct-guia-comum-wrap .ct-guia-grid-comum {
    grid-template-columns: repeat(2, 1fr);
}

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

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

/* (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: var(--ct-img-radius);
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bcb-main-post:hover img {
    filter: var(--ct-img-hover-filtro);
}

.bcb-main-post h4 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    color: #111;
    margin: 0;
    line-height: 120%;
    letter-spacing: -.04rem;
}

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

@media (max-width: 991px) {
    .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;
    }

    .bopea-category-blocks {
        grid-template-columns: 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;
    }
}

/* 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: 1px 0 1px;
}

/* Central do Cidadão: silhueta da cidade (assets/img/cidade.svg) no pé do
   fundo, como um horizonte. Entra como máscara, não como imagem: a cor vem
   daqui (--ct-cidade-cor), então dá pra trocar por tom neutro, o verde do
   arquivo ou a cor do portal sem editar o SVG. Fica atrás do conteúdo e
   não recebe clique. */
.ct-zona-civica--cidade {
    --ct-cidade-cor: #cbd5e1;
    --ct-cidade-altura: 300px;
    position: relative;
    isolation: isolate;
}

.ct-zona-civica--cidade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ct-cidade-altura);
    z-index: -1;
    pointer-events: none;
    opacity: .25;
    background: var(--ct-cidade-cor);
    -webkit-mask: url("../img/cidade.svg") repeat-x center bottom / auto 100%;
    mask: url("../img/cidade.svg") repeat-x center bottom / auto 100%;
}

@media (max-width: 768px) {
    .ct-zona-civica--cidade {
        --ct-cidade-altura: 90px;
    }
}

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

/* Responsividade do Bloco */
@media (max-width: 900px) {
    .bopea-category-blocks {
        flex-direction: column;
    }

    .bcb-main-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .bcb-main-row {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================================
   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: var(--ct-img-radius);
    transition: filter var(--ct-img-hover-duracao) ease;
}

.ct-colunista-card:hover .ct-colunista-avatar img {
    filter: var(--ct-img-hover-filtro);
}

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

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

/* ============================================================
   BLOCOS DE CATEGORIA (BCB-*)
   ============================================================ */
.bcb-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter var(--ct-img-hover-duracao) ease;
}

.bcb-main-post:hover .bcb-thumb-wrap img {
    filter: var(--ct-img-hover-filtro);
}

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

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

/* ============================================================
   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: var(--ct-img-radius);
    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: filter var(--ct-img-hover-duracao) ease;
}

.ct-classificado-card:hover .ct-classificado-thumb img {

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

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

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

/* ============================================================
   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ó.
   ============================================================ */
/* ============================================================
   BANNER "PARTICIPE DO NOSSO CANAL" (topo da sidebar, 300x200)
   Preenchimento sólido de verdade (verde do WhatsApp), não borda/faixa
   colorida num card branco — é uma chamada pra ação de marca, mesmo
   principio do .ct-footer-zap-pill que já existe no rodapé.
   ============================================================ */
.ct-canal-banner-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 200px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    text-decoration: none;
}

.ct-canal-banner-link:hover {
    color: #ffffff;
}

.ct-canal-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.ct-canal-banner-titulo {
    font-family: var(--font-heading, "Montserrat", sans-serif);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #ffffff;
}

.ct-canal-banner-texto {
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.92);
}

.ct-canal-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #ffffff;
    color: #128c7e;
    padding: 8px 18px;
    border-radius: 100px;
}

.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: -33px -11px -40px 0;
    text-align: right;
    font-family: var(--font-serif);
    font-size: 92px;
    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).
   ============================================================ */
/* Blocos de editoria da coluna principal da capa (Segurança, Saúde,
   Educação, Esportes, Economia/Social/Cultura, Colunistas). Cada um tinha
   um margin-bottom diferente escrito no HTML — 15px, 20px, 50px ou nenhum.
   Agora todos respiram igual ao Placar (.ct-dash-row). */
.ct-home-bloco {
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .ct-home-bloco {
        margin-bottom: 36px;
    }
}

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

/* As duas colunas do painel raramente têm a mesma quantidade de conteúdo
   (o Placar cresce com o tamanho da rodada), e sem igualar a altura os dois
   cartões terminavam em pontos diferentes, deixando a linha torta.
   Quem iguala é o flex, não `height: 100%`: a coluna tem o cabeçalho ACIMA
   do cartão, então 100% da coluna dava ao cartão a altura da coluna inteira
   começando abaixo do cabeçalho — ele estourava ~58px pra fora da linha e
   encostava no título da seção seguinte. Com flex, o cartão ocupa só o que
   sobra depois do cabeçalho. */
.ct-dash-row .ct-dash-col {
    display: flex;
    flex-direction: column;
}

.ct-dash-row .ct-dash-col-body {
    flex: 1;
}

/* Placar sozinho na linha, na largura toda da coluna (o Horóscopo desceu
   pra baixo do banner que fecha o bloco de Educação). */
.ct-dash-row--placar {
    grid-template-columns: minmax(0, 1fr);
}

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

/* Sem corte de 3 linhas: o card mostra a previsão inteira, não uma
   chamada pra abrir o resto. */
.ct-signo-preview-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: #334155;
    margin: 0 0 14px;
}

/* ---------- Horóscopo na largura toda (abaixo do banner de Educação) ----------
   Previsão à esquerda, detalhes e botões à direita, os 12 signos numa
   fileira só embaixo. Em card estreito (celular) volta a empilhar como antes
   — a troca é pela largura do próprio card (container query). */
.ct-horoscopo-secao {
    margin-bottom: 30px;
}

.ct-horoscopo-secao .ct-dash-col-body {
    container-type: inline-size;
}

@container (min-width: 640px) {
    .ct-horoscopo-largo {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        column-gap: 28px;
        align-items: stretch;
    }
    /* Detalhes em cima, botões encostados embaixo: as duas colunas terminam
       na mesma linha, em vez de os botões boiarem no meio do lado direito. */
    .ct-horoscopo-extras {
        display: flex;
        flex-direction: column;
        padding-left: 28px;
        border-left: 1px solid #eef0f2;
    }
    /* Botões um embaixo do outro, na largura da coluna: lado a lado, com
       ~150px cada, "Salvar como meu Signo" quebrava em duas linhas. */
    .ct-horoscopo-extras .ct-signo-actions-bar {
        margin-top: auto;
        flex-direction: column;
    }
    .ct-horoscopo-extras .ct-signo-actions-bar > * {
        flex: none;
    }
    .ct-horoscopo-largo .ct-signos-switch-row {
        grid-column: 1 / -1;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        margin-top: 4px;
    }
}

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

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

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

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

/* Âmbar escuro, não o dourado #fbbf24: o dourado vinha do painel de fundo
   escuro e, na caixa clara, os números da sorte ficavam quase ilegíveis. */
.ct-signo-detail-value--gold {
    color: #b45309;
    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: #fef6e7;
    color: #b45309;
    border: 1px solid #f5d99b;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 8px;
    text-transform: uppercase;
}

/* Borda cinza-clara: era branca translúcida, herdada de quando este painel
   tinha fundo escuro — em cima do cartão branco não aparecia nada. */
.ct-signo-actions-bar {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef0f2;
}

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

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

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

.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: 0;
    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: opacity var(--ct-img-hover-duracao) ease;
}

.ct-tv-main-card:hover .ct-tv-main-thumb img {

    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: var(--ct-img-radius);
    overflow: hidden;
    background: #000;
}

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

.ct-tv-side-card:hover .ct-tv-side-thumb img {
    opacity: 1;

}

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

/* ============================================================
   SECTION SPACING
   ============================================================ */
.ct-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

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

@media (max-width: 768px) {
    .ct-grid-2-cols {
        grid-template-columns: 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;
    /* Altura da foto do destaque (so a manchete fica sobre ela; o bloco de baixo
       com as 3 chamadas fica fora da foto). */
    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: 72%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: filter var(--ct-img-hover-duracao) ease;
}

.ct-hero-showcase-cover:hover img {
    filter: var(--ct-img-hover-filtro);
}

/* O degradê que se funde com o fundo preto do container (concentrado na base) */
.ct-hero-showcase-overlay {
    position: absolute;
    inset: 0;
    /* Sempre preto, na cor do bloco (#0d0f12), qualquer que seja a categoria do
       destaque: assim a foto se funde com o fundo e com as 3 chamadas de baixo. */
    /* Degrade em varias paradas (curva suave): fica 100% opaco ate 30% da base,
       que e onde a foto termina (72% da altura), e some devagar para cima. Com
       poucas paradas e a ultima ainda em 95%, a borda inferior da foto aparecia. */
    background: linear-gradient(to top,
        #0d0f12 0%,
        #0d0f12 30%,
        rgba(13, 15, 18, 0.93) 36%,
        rgba(13, 15, 18, 0.80) 43%,
        rgba(13, 15, 18, 0.62) 50%,
        rgba(13, 15, 18, 0.42) 58%,
        rgba(13, 15, 18, 0.24) 66%,
        rgba(13, 15, 18, 0.10) 76%,
        rgba(13, 15, 18, 0) 90%);
    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: none;
}

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

.ct-hero-sub-img-wrap {
    aspect-ratio: 16/10;
    border-radius: var(--ct-img-radius);
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 12px;
}

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

.ct-hero-sub-card:hover .ct-hero-sub-img-wrap img {
    filter: var(--ct-img-hover-filtro);
}

.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-title {
    color: var(--cat-cor, var(--cor-primaria, #2271b1));
}

/* Coluna 3: Feed Últimas Notícias (regras em base.css e no fim deste arquivo) */

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

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

/* Câmbio e preço médio, no desenho da Previsão do Tempo: um cartão só, faixa clara no alto com os valores grandes
   em serifada e uma linha pequena de fonte e data embaixo. */
.ct-duo {
    margin-bottom: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.ct-duo-topo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #f6f9fc;
}
.ct-duo-celula {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 14px;
}
.ct-duo-celula:nth-child(even) {
    border-left: 1px solid #e6edf5;
}
.ct-duo-celula:nth-child(n+3) {
    border-top: 1px solid #e6edf5;
}
.ct-duo-nome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    line-height: 1.25;
}
.ct-duo-bandeira {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ct-duo-valor {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: var(--cor-primaria, #0a0000);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ct-duo-moeda {
    margin-right: 4px;
    font-family: var(--font-primary, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: #8c9ba5;
}
.ct-duo-detalhe {
    font-size: 10px;
    line-height: 1.3;
    color: #8c9ba5;
}
.ct-duo-rodape {
    margin: 0;
    padding: 6px 14px 8px;
    font-size: 10px;
    line-height: 1.4;
    color: #8c9ba5;
    text-align: right;
}
.ct-duo-rodape--sozinho {
    padding: 10px 14px;
    text-align: left;
}

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

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

.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: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lot-color, #209869);
    color: #ffffff;
    font-size: 17.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: 36px;
    height: 36px;
    font-size: 17.5px;
}

.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
   Cartão de memória, em tom de santinho: foto à esquerda; nome, ★ nascimento
   e ✝ falecimento ao lado — só isso. Velório, sepultamento e o texto da
   família ficam na página da nota (single-obituario.php). Papel claro e
   borda fina uniforme, no vocabulário do .ct-aviso-pago: nada de faixa
   colorida.
   ============================================================ */
.ct-obituario-widget {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.ct-obituario-card {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease;
    margin-bottom: 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}

a.ct-obituario-card:hover {
    border-color: #cfcac0;
}

/* Quadrada com cantos arredondados (o raio padrão das imagens do portal,
   --ct-img-radius), exceção pedida às fotos de pessoa redondas; em preto e
   branco, com o anel branco que a descola do papel. */
.ct-obituario-foto {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--ct-img-radius, 8px);
    background: #e7e5e0;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d6d3cc;
    color: #a8a29e;
    font-size: 22px;
}

.ct-obituario-foto img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 25%;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

a.ct-obituario-card:hover .ct-obituario-foto img {
    filter: grayscale(20%);
}

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

/* Nome na serifada das manchetes: é uma pessoa, não uma linha de lista. */
.ct-obituario-name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    text-wrap: balance;
}

a.ct-obituario-card:hover .ct-obituario-name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Uma data por linha, com os símbolos numa coluna fixa para os números
   ficarem alinhados. */
.ct-obituario-datas {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #57534e;
    font-variant-numeric: tabular-nums;
}

.ct-obituario-datas i {
    width: 12px;
    margin-right: 6px;
    font-size: 10px;
    text-align: center;
    color: #8a8478;
}

.ct-obituario-vazio {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #57534e;
}

/* Ler a nota / Enviar nota: dois links numa linha, sem botão — o cartão já
   é o elemento de peso do bloco. */
.ct-obituario-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
}

.ct-obituario-acoes a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    text-decoration: none;
}

.ct-obituario-acoes a:hover {
    color: #0f172a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ct-obituario-acoes .fa-arrow-right {
    font-size: 11px;
}

.ct-obituario-enviar {
    margin-left: auto;
}

.ct-obituario-enviar i {
    font-size: 14px;
    color: #475569;
}

/* ============================================================
   SEÇÃO: BOCA NO TROMBONE • CANAL DO LEITOR (ESTILO ABERTO & DESCOMPLICADO)
   ============================================================ */
.ct-trombone-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.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: var(--ct-img-radius);
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 10px;
}

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

.ct-trombone-card:hover .ct-trombone-thumb-wrap img {
    filter: var(--ct-img-hover-filtro);
}

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

/* Convite de espaço vazio: o mesmo cartão na Boca no Trombone, no Guia
   Comercial e nos Classificados. Diz o que é o espaço e como participar, em
   vez de deixar a seção em branco ou com uma frase solta. */
.ct-convite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 28px 30px;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
}

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

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

.ct-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-convite-link:hover {
    text-decoration: underline;
}

.ct-convite-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 6px;
}

.ct-convite-acoes .ct-convite-link {
    align-self: auto;
}

.ct-convite-zap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    background: #16a34a;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.ct-convite-zap:hover {
    background: #15803d;
    color: #ffffff;
}

.ct-convite-zap i {
    font-size: 16px;
}

/* Versão para coluna estreita (Enquete sem votação aberta). */
.ct-convite--compacto {
    padding: 20px 22px;
}

.ct-convite--compacto h4 {
    font-size: 16px;
}

.ct-convite--compacto p {
    font-size: 13.5px;
}

/* Dentro das grades, o convite ocupa a largura toda. No Guia ele fica no
   lugar das empresas, ao lado do banner de 300px — a mesma composição da
   Boca no Trombone (convite + cartaz). */
.ct-guia-grid-comum > .ct-convite {
    grid-column: 1 / -1;
}

.ct-classificados-grid > .ct-convite {
    flex-basis: 100%;
}

/* Âncoras do menu do rodapé (/#guia-comercial, /#classificados...): sem
   isto o título da seção parava escondido embaixo do cabeçalho fixo. */
#guia-comercial,
#classificados,
#loterias,
#tv-portal {
    scroll-margin-top: 100px;
}

/* 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-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: var(--ct-img-radius);
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

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

.bcb-main-link:hover .bcb-thumb-wrap img {
    filter: var(--ct-img-hover-filtro);
}

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

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

/* 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;
    filter: 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: 8px 14px 10px;
    margin-bottom: 18px;
    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;
}

/* Previsão do tempo, desenho compacto: um cartão só (mesma borda do câmbio), cidade e temperatura na mesma linha,
   indicadores numa faixa única e o aviso só quando existe um alerta. Vale depois das regras acima. */
.ct-clima-widget {
    margin-bottom: 0;
    overflow: hidden;
}
.ct-clima-top {
    margin: 0;
    padding: 9px 14px;
    border: 0;
    border-radius: 0;
}
.ct-clima-top:not(.ct-clima-top--noite) {
    background: #f6f9fc;
}
.ct-clima-top::before {
    display: none;
}
.ct-clima-city-info {
    gap: 3px;
}
.ct-clima-temp {
    font-size: 28px;
}
.ct-clima-icon {
    font-size: 22px;
}
.ct-clima-alerta {
    margin: 8px 14px 0;
}
.ct-clima-details-grid {
    margin: 0;
    padding: 8px 14px 4px;
}
.ct-clima-stat {
    padding: 0 2px;
}
.ct-clima-stat-label {
    margin-bottom: 2px;
}
.ct-clima-footer {
    justify-content: flex-end;
    margin: 0;
    padding: 0 14px 8px;
}
.ct-clima-footer::before {
    display: none;
}

/* Loterias Caixa, desenho compacto: abas mais baixas, bolas menores, o prêmio estimado numa linha só (sem o quadro
   tracejado) e o rodapé sem folga. Mesmas informações, bem menos altura na coluna. */
.ct-hero-side-col .ct-loterias-tabs {
    margin-bottom: 8px;
}
.ct-hero-side-col .ct-loteria-tab-btn {
    padding: 4px 2px;
}
.ct-hero-side-col .ct-loteria-meta {
    margin-bottom: 6px;
}
.ct-hero-side-col .ct-loteria-balls-grid {
    margin-bottom: 8px;
}
.ct-hero-side-col .ct-loteria-ball {
    width: 32px;
    height: 32px;
    font-size: 15px;
}
.ct-hero-side-col .ct-loteria-premio {
    padding: 0;
    margin-bottom: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.ct-hero-side-col .ct-loterias-footer {
    margin-top: 6px;
    padding-top: 0;
}

/* Fecho da coluna: o último bloco não precisa de folga embaixo, e os títulos ficam um pouco mais perto do conteúdo. */
.ct-hero-side-col > .ct-loterias-widget {
    margin-bottom: 0;
}
.ct-hero-side-col .ct-section-heading {
    margin-bottom: 10px;
}
.ct-hero-side-col .ct-loteria-balls--lotofacil {
    gap: 3px;
}
.ct-hero-side-col .ct-loteria-balls--lotofacil .ct-loteria-ball {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

/* ============================================================
   TV DO PORTAL, VERSAO LEVE (out/2026)
   A secao so aparece na home com 2 ou mais videos (front-page.php e
   capa-nova.php). Em vez do bloco escuro de 545 px, fundo claro e fio
   fino, no mesmo tom das demais faixas da home.
   ============================================================ */
.ct-tv-section {
    background: #f8fafc;
    padding: 34px 0 40px;
    color: #111;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.ct-tv-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.ct-tv-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    color: #111;
}

.ct-tv-btn-yt {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #111;
}

.ct-tv-btn-yt:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}

.ct-tv-layout {
    gap: 20px;
}

.ct-tv-main-thumb {
    min-height: 280px;
}

.ct-tv-side-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111;
}

.ct-tv-side-card:hover {
    background: #fff;
    border-color: #cbd5e1;
}

.ct-tv-side-title {
    color: #111;
}

.ct-tv-side-card:hover .ct-tv-side-title {
    color: var(--cor-primaria, #111);
}

.ct-tv-chapeu {
    font-size: 10.5px;
}

/* ============================================================
   DESTAQUE UNIFICADO: foto principal + 3 chamadas com foto, no mesmo bloco
   escuro (out/2026). As "relacionadas" sobre a foto sairam; as 3 chamadas que
   ficavam soltas embaixo entraram no bloco, separadas por um fio fino.
   ============================================================ */
.ct-hero-showcase {
    border: 0;
}

.ct-hero-showcase-cover {
    /* So manchete sobre a foto agora: pode ser mais baixa que antes. */
    aspect-ratio: 16/11.5;
}

.ct-hero-showcase .ct-hero-sub-grid {
    margin-top: 0;
    padding: 18px 22px 22px;
    gap: 22px;
    border-top: 0;
    background: #0d0f12;
}

/* Barra fina e curta acima dos 3 destaques de baixo. */
.ct-hero-showcase .ct-hero-sub-grid::before {
    content: "";
    grid-column: 1 / -1;
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--cor-secundaria, #008a20);
    margin-bottom: 2px;
}

.ct-hero-showcase .ct-hero-sub-card + .ct-hero-sub-card::before {
    left: -11px;
    background: rgba(255, 255, 255, .14);
}

.ct-hero-showcase .ct-hero-sub-img-wrap {
    border-radius: 8px;
    margin-bottom: 10px;
    background: #1e2329;
}

.ct-hero-showcase .ct-hero-sub-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: #ffffff;
}

.ct-hero-showcase .ct-hero-sub-card:hover .ct-hero-sub-title {
    color: #cbd5e1;
    text-decoration: none;
}

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


/* Hover nas 3 chamadas do destaque: nada se mexe, so a cor muda. Havia uma regra
   de hover que trocava a margem da foto (12px no lugar de 10px) e fazia o texto
   descer; foi removida, e a regra abaixo garante que nao volte. */
.ct-hero-showcase .ct-hero-sub-card:hover .ct-hero-sub-img-wrap {
    margin-bottom: 10px;
}

/* ============================================================
   ULTIMAS NOTICIAS (home): chapeu sobre a foto + hora abaixo do titulo
   Pilula solida com a cor da categoria, recuada da borda da miniatura
   (nao encosta nas bordas), como o padrao de chapeu sobre foto do portal.
   ============================================================ */
.ct-hero-side-col .ct-side-feed-thumb {
    position: relative;
    width: 100px;
    height: 100px;
}

.ct-side-feed-pilula {
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--chapeu-cor, #1e5ba8);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* Destaque maior de "Ultimas Noticias": foto cheia, degrade escuro embaixo e
   chapeu, titulo e hora por cima; as outras duas ficam em lista abaixo. */
.ct-side-destaque {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: var(--ct-img-radius, 8px);
    background: #111;
    color: #fff;
    text-decoration: none;
}

.ct-side-destaque > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter var(--ct-img-hover-duracao, .25s) ease;
}

.ct-side-destaque:hover > img {
    filter: var(--ct-img-hover-filtro, brightness(.92));
}

.ct-side-destaque::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
}

.ct-side-destaque-texto {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: block;
}

.ct-side-destaque .ct-side-feed-pilula {
    position: static;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 8px;
    font-size: 10px;
    padding: 4px 8px;
}

.ct-side-destaque-titulo {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02rem;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-side-destaque .ct-side-feed-hora {
    margin-top: 0;
    color: rgba(255, 255, 255, .8);
}

.ct-side-feed-hora {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #64748b;
}

/* Etiqueta "Região" e nota rápida (Plantão) nas Últimas notícias */
.ct-side-feed-origem {
    display: inline-block;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}
.ct-side-destaque .ct-side-feed-origem { color: rgba(255, 255, 255, .85); }

@media (max-width: 768px) {
    .ct-hero-side-col .ct-side-feed-thumb {
        width: 140px;
        height: 112px;
    }
}

/* ============================================================
   PRIMEIRA DOBRA: coluna da esquerda mais estreita (previsao, transito e
   coluna) e faixa "mercado e sorteios" (cambio, preco medio, loterias).
   ============================================================ */
.ct-hero-magazine-grid {
    grid-template-columns: 250px 1fr 300px;
}

/* Previsao: proximos dias e nascer/por do sol */
.ct-clima-dias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px 10px 4px;
    border-top: 1px solid #eef1f5;
}

.ct-clima-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.ct-clima-dia-nome {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.ct-clima-dia i {
    font-size: 18px;
    color: #475569;
}

.ct-clima-dia-temp {
    font-size: 14px;
    color: #111;
}

.ct-clima-dia-temp small {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.ct-clima-dia-chuva {
    font-size: 10.5px;
    color: #0e7490;
}

.ct-clima-sol {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    color: #64748b;
    border-top: 1px solid #eef1f5;
}

.ct-clima-sol i {
    margin-right: 4px;
    color: #d2a000;
}

.ct-clima-sol span + span i {
    color: #5b6bb0;
}

/* Transito */
.ct-esq-transito {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 22px;
}

.ct-transito-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Varias ocorrencias: uma por vez, trocando sozinho (o script marca .is-slide). */
.ct-esq-transito.is-slide .ct-transito-card {
    display: none;
}

.ct-esq-transito.is-slide .ct-transito-card.is-ativo {
    display: block;
    animation: ct-transito-entra .35s ease;
}

@keyframes ct-transito-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ct-transito-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-transito-ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
}

.ct-transito-ponto.is-ativo {
    background: #b91c1c;
}

.ct-transito-contagem {
    margin-left: auto;
    font-size: 11.5px;
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .ct-esq-transito.is-slide .ct-transito-card.is-ativo { animation: none; }
}

.ct-transito-img {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--ct-img-radius, 8px);
    background: #f1f5f9;
}

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

.ct-transito-img--icone {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #c2410c;
    font-size: 34px;
}

.ct-transito-card.is-alerta .ct-transito-img--icone {
    background: #fefce8;
    color: #a16207;
}

.ct-transito-card--programada .ct-transito-img--icone {
    background: #f1f5f9;
    color: #475569;
}

.ct-transito-selo {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 7px;
    border-radius: 4px;
    background: #b91c1c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.ct-transito-card.is-alerta .ct-transito-selo {
    background: #a16207;
}

.ct-transito-card--programada .ct-transito-selo {
    background: #475569;
}

.ct-transito-corpo {
    display: block;
    padding-top: 8px;
}

.ct-transito-titulo {
    display: block;
    font-family: var(--font-serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.22;
    color: #111;
}

.ct-transito-card:hover .ct-transito-titulo {
    color: var(--cor-primaria, #111);
}

.ct-transito-quando {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.ct-esq-ver-todas {
    font-size: 12.5px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
}

.ct-esq-ver-todas i {
    font-size: 10px;
    margin-left: 3px;
}

/* Coluna (um colunista so) */
.ct-esq-coluna {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
}

.ct-esq-coluna-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    background: #f0f0f0;
}

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

.ct-esq-coluna-corpo {
    flex: 1;
    min-width: 0;
}

.ct-esq-coluna-nome {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cor-primaria, #475569);
}

.ct-esq-coluna-titulo {
    display: block;
    font-family: var(--font-serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.22;
    color: #111;
}

.ct-esq-coluna:hover .ct-esq-coluna-titulo {
    color: var(--cor-primaria, #111);
}

/* Faixa: cambio, preco medio e loterias, em colunas iguais */
.ct-mercado-faixa {
    margin-top: 6px;
    margin-bottom: 30px;
}

.ct-mercado-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
    padding: 20px 0 6px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 22px;
}

.ct-mercado-col > .ct-section-heading:first-child {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .ct-hero-magazine-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Previsao na coluna estreita (250px): indicadores em 2 x 2, sem apertar. */
.ct-hero-magazine-grid .ct-clima-details-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
    padding: 10px 12px 8px;
}

.ct-hero-magazine-grid .ct-clima-stat {
    padding: 0;
}

/* ============================================================
   FAIXA DE MERCADO: previsao sem quebrar o nome da cidade, cambio com
   grafico real (PTAX, Banco Central) e abas de loterias com icone.
   ============================================================ */

/* Previsao: cidade numa linha so; condicao e temperatura na linha de baixo. */
.ct-hero-magazine-grid .ct-clima-top {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
}

.ct-hero-magazine-grid .ct-clima-city-info {
    display: contents;
}

.ct-hero-magazine-grid .ct-clima-city {
    flex: 1 1 100%;
    white-space: nowrap;
}

.ct-hero-magazine-grid .ct-clima-cond {
    flex: 1 1 0;
    min-width: 0;
}

.ct-hero-magazine-grid .ct-clima-current {
    margin-left: auto;
}

/* Cambio: dolar e euro lado a lado (como antes), bandeira maior e grafico pequeno */
.ct-duo-bandeira--g {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-cambio-celula {
    min-width: 0;
}

.ct-cambio-var {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ct-cambio-var small {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

.ct-cambio-var i {
    font-size: 10px;
}

.ct-cambio-var.is-sobe { color: #b91c1c; }
.ct-cambio-var.is-desce { color: #15803d; }

.ct-cambio-area {
    position: relative;
    height: 40px;
    margin-top: 8px;
    cursor: crosshair;
}

.ct-cambio-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ct-cambio-preenche {
    fill: color-mix(in srgb, var(--cor-linha, #15803d) 12%, transparent);
}

.ct-cambio-linha {
    fill: none;
    stroke: var(--cor-linha, #15803d);
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ct-cambio-ponto {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #111;
    pointer-events: none;
}

.ct-cambio-dica {
    position: absolute;
    top: -4px;
    padding: 3px 7px;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-100%);
    z-index: 2;
}

/* Loterias: icone na aba */
.ct-loteria-tab-btn i {
    margin-right: 5px;
    font-size: 12px;
}

/* Faixa de mercado: cartoes da mesma altura (cambio com grafico e loterias). */
.ct-mercado-grade {
    align-items: stretch;
}

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

.ct-mercado-col .ct-cambio-graf,
.ct-mercado-col .ct-loterias-widget {
    flex: 1;
}

.ct-mercado-col .ct-loterias-widget {
    padding: 10px 14px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

/* Cambio lado a lado: mesma altura do cartao de loterias. */
.ct-mercado-col .ct-duo--grafico {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Loterias: o conteudo se distribui na altura do cartao (sem sobra embaixo). */
.ct-mercado-col .ct-loterias-widget {
    display: flex;
    flex-direction: column;
}

.ct-mercado-col .ct-loteria-panel.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
}

.ct-mercado-col .ct-loteria-balls-grid {
    margin: 4px 0;
}

.ct-mercado-col .ct-loteria-ball {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.ct-mercado-col .ct-loterias-footer {
    margin-top: 0;
}

.ct-mercado-col .ct-duo--grafico,
.ct-mercado-col .ct-loterias-widget {
    margin-bottom: 0;
}

/* Cambio, celula nova: bandeira a esquerda; nome e valor na frente dela; grafico
   ao lado do valor; a variacao "desde a data" embaixo, comecando na bandeira.
   A divisoria vertical entre dolar e euro e a da regra .ct-duo-celula. */
.ct-cambio-celula {
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(44px, 1fr);
    grid-template-areas:
        "icone nome  grafico"
        "icone valor grafico"
        "var   var   var";
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
}

.ct-cambio-bandeira {
    grid-area: icone;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.ct-cambio-nome {
    grid-area: nome;
    align-self: end;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
}

.ct-cambio-celula .ct-duo-valor {
    grid-area: valor;
    align-self: start;
    white-space: nowrap;
}

.ct-cambio-celula .ct-cambio-area {
    grid-area: grafico;
    height: 44px;
    margin-top: 0;
    align-self: center;
}

.ct-cambio-celula .ct-cambio-var {
    grid-area: var;
    margin-top: 6px;
}

/* O conteudo da celula fica centrado na altura do cartao (igual ao de loterias). */
.ct-duo--grafico .ct-duo-topo {
    flex: 1;
}

.ct-duo--grafico .ct-cambio-celula {
    align-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
}

.ct-cambio-celula .ct-cambio-area {
    height: 52px;
}

/* Loterias compacta: menos espaco entre as partes, para a altura acompanhar a do cambio. */
.ct-mercado-col .ct-loterias-widget {
    padding: 8px 12px 6px;
}

.ct-mercado-col .ct-loterias-tabs {
    margin-bottom: 6px;
}

.ct-mercado-col .ct-loteria-panel.active {
    gap: 6px;
    padding-top: 2px;
}

.ct-mercado-col .ct-loteria-balls-grid {
    margin: 0;
    gap: 6px;
}

.ct-mercado-col .ct-loteria-ball {
    width: 34px;
    height: 34px;
    font-size: 13.5px;
}

.ct-mercado-col .ct-loteria-premio {
    margin: 0;
    padding: 6px 10px;
}

.ct-mercado-col .ct-loterias-footer {
    padding-top: 4px;
    margin-top: 0;
}

.ct-duo--grafico .ct-cambio-celula {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ct-cambio-celula .ct-cambio-area {
    height: 46px;
}

/* Com os tres cartoes na faixa (preco medio cadastrado), o cartao do cambio fica
   estreito: o grafico desce para uma linha propria, embaixo do nome e do valor. */
.ct-duo--grafico {
    container-type: inline-size;
}

@container (max-width: 430px) {
    .ct-cambio-celula {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icone nome"
            "icone valor"
            "grafico grafico"
            "var var";
    }

    .ct-cambio-celula .ct-cambio-area {
        height: 36px;
        margin-top: 6px;
    }

    .ct-cambio-bandeira {
        width: 34px;
        height: 34px;
    }
}

/* Abas das loterias: titulo em caixa alta e italico, com o trevo de coracoes
   (quatro petalas em coracao) desenhado em SVG proprio, na cor da aba. */
.ct-loteria-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .03em;
}

.ct-loteria-tab-btn .ct-trevo {
    flex: none;
    fill: var(--tab-color, currentColor);
}

.ct-loteria-tab-btn.active .ct-trevo {
    fill: #fff;
}

/* ============================================================
   CARTAZ "SOU REPORTER LOCAL" do transito (coluna da esquerda, 250 px):
   o mesmo cartaz do Boca no Trombone, em tamanho de coluna.
   ============================================================ */
.ct-poster-card-wrap--lateral {
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px;
    padding: 12px 12px 12px;
}

.ct-poster-card-wrap--lateral .ct-poster-curve {
    width: 100px;
    height: 100px;
}

.ct-poster-transito-icone {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #15803d;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 0 0 3px #ecfdf5;
}

.ct-poster-card-wrap--lateral .ct-poster-title {
    font-size: 16px;
}

.ct-poster-card-wrap--lateral .ct-poster-desc {
    max-width: 100%;
    font-size: 11.5px;
}

.ct-poster-card-wrap--lateral .ct-poster-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-poster-card-wrap--lateral .ct-poster-mascot {
    align-self: flex-end;
    width: 88px;
    height: 148px;
    margin-bottom: -4px;
}

.ct-poster-card-wrap--lateral .ct-poster-action-wrap {
    width: 100%;
}

.ct-poster-card-wrap--lateral .ct-poster-btn-zap {
    width: 100%;
    justify-content: center;
}

/* O mascote fica no canto direito: o texto de apoio nao passa por baixo dele. */
.ct-poster-card-wrap--lateral .ct-poster-desc {
    max-width: 62%;
    font-size: 11px;
}

.ct-poster-card-wrap--lateral .ct-poster-bottom {
    margin-top: -34px;
}

/* Mascote ao lado do texto de apoio, acima do botao (sem cobrir o texto). */
.ct-poster-card-wrap--lateral .ct-poster-bottom {
    margin-top: 0;
    min-height: 0;
}

.ct-poster-card-wrap--lateral .ct-poster-mascot {
    position: absolute;
    right: 0;
    bottom: 40px;
    width: 76px;
    height: 128px;
    margin: 0;
}

.ct-poster-card-wrap--lateral .ct-poster-main {
    padding-bottom: 46px;
}

/* O cartaz do transito fica escondido (atributo hidden) enquanto ha ocorrencia ativa. */
.ct-poster-card-wrap[hidden] {
    display: none;
}

/* Celular: o bloco de destaques nao pode ser mais largo que a tela. A coluna do
   grid (1fr) crescia ate o conteudo e cortava o texto das 3 chamadas. */
@media (max-width: 768px) {
    .ct-hero-magazine-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-hero-magazine-grid > * {
        min-width: 0;
    }

    .ct-hero-showcase .ct-hero-sub-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 6px 16px 14px;
    }

    .ct-hero-showcase .ct-hero-sub-card {
        flex-direction: row;
        gap: 12px;
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .ct-hero-showcase .ct-hero-sub-card:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .ct-hero-showcase .ct-hero-sub-img-wrap {
        width: 112px;
        height: 90px;
        margin-bottom: 0;
    }

    .ct-hero-showcase .ct-hero-sub-info {
        min-width: 0;
        flex: 1;
    }

    .ct-hero-showcase .ct-hero-sub-title {
        font-size: 16px;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   PREVISAO DO TEMPO (home): temperatura e icone em destaque, sem fundo
   colorido (nem de dia, nem a noite). O resto do cartao fica como estava.
   ============================================================ */
.ct-hero-magazine-grid .ct-clima-top,
.ct-hero-magazine-grid .ct-clima-top:not(.ct-clima-top--noite),
.ct-hero-magazine-grid .ct-clima-top--noite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "cidade cidade"
        "temp   icone"
        "cond   cond";
    align-items: center;
    row-gap: 2px;
    padding: 14px 14px 12px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef1f5;
}

.ct-hero-magazine-grid .ct-clima-top::before,
.ct-hero-magazine-grid .ct-clima-top--noite::before {
    display: none;
}

.ct-hero-magazine-grid .ct-clima-city-info,
.ct-hero-magazine-grid .ct-clima-current {
    display: contents;
}

.ct-hero-magazine-grid .ct-clima-city,
.ct-hero-magazine-grid .ct-clima-top--noite .ct-clima-city {
    grid-area: cidade;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.ct-hero-magazine-grid .ct-clima-top--noite .ct-clima-city i {
    color: inherit;
}

.ct-hero-magazine-grid .ct-clima-temp,
.ct-hero-magazine-grid .ct-clima-top--noite .ct-clima-temp {
    grid-area: temp;
    display: flex;
    align-items: flex-start;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 60px;
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.03em;
    color: #111;
}

.ct-hero-magazine-grid .ct-clima-temp sup {
    margin: 4px 0 0 2px;
    font-family: var(--font-primary, sans-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    color: #64748b;
}

.ct-hero-magazine-grid .ct-clima-icon {
    grid-area: icone;
    font-size: 58px;
    line-height: 1;
    filter: drop-shadow(0 4px 5px rgba(15, 23, 42, .14));
}

.ct-hero-magazine-grid .ct-clima-cond,
.ct-hero-magazine-grid .ct-clima-top--noite .ct-clima-cond {
    grid-area: cond;
    margin-top: 6px;
    color: #475569;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
}

/* ============================================================
   PREVISAO DO TEMPO, formato "cidade, icone grande e temperatura, frase,
   indices e proximos dias" (out/2026). Sem fundo colorido: cartao branco
   com contorno fino; a cor fica so nos icones e nos indices.
   ============================================================ */
.ct-clima-widget--moderno {
}

.ct-clima-cidade {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    color: #111;
}

.ct-clima-cab-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0;
}

.ct-clima-dia-semana {
    font-size: 10px;
    color: #64748b;
}

.ct-clima-sol-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.ct-clima-sol-mini i {
    font-size: 11px;
    color: #d2a000;
}

.ct-clima-sol-mini i + i,
.ct-clima-sol-mini i:nth-of-type(2) {
    margin-left: 4px;
    color: #5b6bb0;
}

.ct-clima-principal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
}

.ct-clima-icone-grande {
    display: inline-flex;
    font-size: 40px;
    line-height: 1;
}

.ct-clima-temps {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    text-align: right;
}

.ct-clima-agora {
    display: flex;
    align-items: flex-start;
    font-size: 34px;
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.03em;
    color: #111;
}

.ct-clima-agora sup {
    margin: 4px 0 0 2px;
    font-family: var(--font-primary, sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: #64748b;
}

.ct-clima-faixa {
    font-size: 12px;
    color: #64748b;
}

.ct-clima-faixa b {
    color: #111;
}

.ct-clima-frase {
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f5;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}

/* ------------------------------------------------------------
   Fundo do topo da previsao (estilo app de clima do celular).
   Fase do dia (.ct-clima-fase--*) escolhe o degrade; a condicao
   (.ct-clima-cond--*) coloca uma "vela" cinza/escura por cima e,
   na chuva, riscos de gota. O fundo termina esmaecendo para o
   branco, por isso o topo tem folga embaixo da frase.
   ------------------------------------------------------------ */
.ct-clima-topo {
    --c1: #2f7fd8;
    --c2: #6fb6f2;
    --vela: transparent;
    position: relative;
    margin: 0 0 4px;
    padding: 12px 14px 34px;
    border-radius: 12px 12px 0 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #fff 100%),
        linear-gradient(var(--vela), var(--vela)),
        linear-gradient(180deg, var(--c1), var(--c2));
}

.ct-clima-fase--madrugada  { --c1: #0b1026; --c2: #1f2f66; }
.ct-clima-fase--amanhecer  { --c1: #4a5a9c; --c2: #f0a27c; }
.ct-clima-fase--dia        { --c1: #2f7fd8; --c2: #6fb6f2; }
.ct-clima-fase--entardecer { --c1: #3d3a7a; --c2: #f08a5d; }
.ct-clima-fase--noite      { --c1: #0f1a3d; --c2: #2a4686; }

.ct-clima-cond--nublado    { --vela: rgba(100, 112, 130, .38); }
.ct-clima-cond--neblina    { --vela: rgba(176, 184, 194, .62); }
.ct-clima-cond--neve       { --vela: rgba(200, 210, 226, .5); }
.ct-clima-cond--chuva      { --vela: rgba(46, 58, 80, .6); }
.ct-clima-cond--tempestade { --vela: rgba(20, 24, 38, .74); }

/* ---- Efeitos animados (estrelas, nuvens, chuva, raio) ----
   Camada decorativa atras do texto, cortada antes da base esmaecida.
   Cada efeito so aparece na fase / condicao em que faz sentido. */
.ct-clima-fx {
    position: absolute;
    inset: 0 0 18% 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    /* os efeitos somem aos poucos no fim, sem linha de corte */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.ct-clima-topo > *:not(.ct-clima-fx) {
    position: relative;
    z-index: 1;
}

.ct-clima-fx > * {
    display: none;
    position: absolute;
}

/* Estrelas: de noite e de madrugada (some com chuva, tempestade, neblina e neve). */
.ct-clima-fase--noite:is(.ct-clima-cond--limpo, .ct-clima-cond--nublado) .fx-estrela,
.ct-clima-fase--madrugada:is(.ct-clima-cond--limpo, .ct-clima-cond--nublado) .fx-estrela {
    display: block;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, .75);
    animation: ct-fx-brilha 3s ease-in-out infinite;
}

.ct-clima-fase--noite:is(.ct-clima-cond--limpo, .ct-clima-cond--nublado) .fx-estrela--g,
.ct-clima-fase--madrugada:is(.ct-clima-cond--limpo, .ct-clima-cond--nublado) .fx-estrela--g {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, .8);
}

@keyframes ct-fx-brilha {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Nuvens: duas camadas de volume (corpo + dois "montes") que vagam devagar. */
.ct-clima-cond--nublado .fx-nuvem,
.ct-clima-cond--chuva .fx-nuvem,
.ct-clima-cond--tempestade .fx-nuvem,
.ct-clima-cond--neblina .fx-nuvem {
    display: block;
    width: 120px;
    height: 46px;
    opacity: var(--n-op, .62);
    filter: blur(.7px);
    /* quatro "montes" claros em cima de uma base achatada mais fria: volume de nuvem */
    background:
        radial-gradient(circle 15px at 34px 22px, var(--n-topo, #fff) 96%, transparent 100%),
        radial-gradient(circle 21px at 62px 17px, var(--n-topo, #fff) 96%, transparent 100%),
        radial-gradient(circle 16px at 88px 24px, var(--n-topo, #fff) 96%, transparent 100%),
        radial-gradient(ellipse 54px 15px at 60px 31px, var(--n-base, #d9e3f2) 96%, transparent 100%);
    animation: ct-fx-vaga 28s ease-in-out infinite alternate;
}

.fx-nuvem--1 { top: 14%; left: -4%; }
.fx-nuvem--2 { top: 42%; left: 40%; transform: scale(1.2); --n-op: .5; animation-duration: 38s; animation-direction: alternate-reverse; }
.fx-nuvem--3 { top: -6%; left: 52%; transform: scale(.8); --n-op: .45; animation-duration: 32s; }

.ct-clima-cond--chuva .fx-nuvem,
.ct-clima-cond--tempestade .fx-nuvem {
    --n-topo: #4a5469;
    --n-base: #2c3446;
    --n-op: .8;
}

.ct-clima-cond--tempestade .fx-nuvem {
    --n-topo: #3a4256;
    --n-base: #1f2535;
}

.ct-clima-cond--neblina .fx-nuvem {
    --n-op: .4;
    filter: blur(4px);
}

@keyframes ct-fx-vaga {
    from { margin-left: -14px; }
    to   { margin-left: 34px; }
}

/* Chuva: gotas finas caindo na diagonal, em ritmos diferentes. */
.ct-clima-cond--chuva .fx-gota,
.ct-clima-cond--tempestade .fx-gota {
    display: block;
    top: -14px;
    width: 1.5px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(220, 235, 255, .85));
    transform: rotate(12deg);
    animation: ct-fx-cai .9s linear infinite;
}

@keyframes ct-fx-cai {
    from { transform: translate(0, 0) rotate(12deg); }
    to   { transform: translate(-14px, 120px) rotate(12deg); }
}

/* Raio e clarao: so na tempestade, em dois relampagos a cada 6 segundos. */
.ct-clima-cond--tempestade .fx-raio {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #fffbd0;
    stroke: #fffbd0;
    filter: drop-shadow(0 0 5px rgba(255, 244, 170, 1)) drop-shadow(0 0 12px rgba(190, 210, 255, .9));
}

.fx-raio-a,
.fx-raio-b {
    opacity: 0;
}

.ct-clima-cond--tempestade .fx-raio-a { animation: ct-fx-raio 7s linear infinite; }
.ct-clima-cond--tempestade .fx-raio-b { animation: ct-fx-raio 7s linear infinite 3.4s; }

/* O clarao ilumina o ceu inteiro e some, junto de cada relampago. */
.ct-clima-cond--tempestade .fx-clarao {
    display: block;
    inset: 0;
    background: radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, .85), rgba(200, 215, 255, .35) 60%, transparent 100%);
    opacity: 0;
    animation: ct-fx-clarao 3.5s linear infinite;
}

@keyframes ct-fx-raio {
    0%, 12%, 100% { opacity: 0; }
    13%           { opacity: 1; }
    16%           { opacity: .2; }
    18%           { opacity: 1; }
    24%           { opacity: 0; }
}

@keyframes ct-fx-clarao {
    0%, 22%, 100% { opacity: 0; }
    23%           { opacity: .7; }
    28%           { opacity: .15; }
    31%           { opacity: .55; }
    42%           { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-clima-fx * { animation: none !important; }
    .ct-clima-cond--tempestade .fx-raio,
    .ct-clima-cond--tempestade .fx-clarao { display: none; }
}

.ct-clima-topo .ct-clima-cidade,
.ct-clima-topo .ct-clima-agora,
.ct-clima-topo .ct-clima-faixa b,
.ct-clima-topo .ct-clima-frase,
.ct-clima-topo .ct-clima-sol-mini {
    color: #fff;
}

.ct-clima-topo .ct-clima-dia-semana,
.ct-clima-topo .ct-clima-faixa,
.ct-clima-topo .ct-clima-agora sup {
    color: rgba(255, 255, 255, .82);
}

.ct-clima-topo .ct-clima-frase {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Icones: o sol continua amarelo e a lua clara; o resto branco com leve sombra. */
.ct-clima-topo .ct-clima-icone-grande i {
    color: #f8fafc !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.ct-clima-topo .ct-clima-icone-grande .fa-sun,
.ct-clima-topo .ct-clima-icone-grande .fa-cloud-sun {
    color: #ffd54a !important;
}

.ct-clima-topo .ct-clima-icone-grande .fa-moon,
.ct-clima-topo .ct-clima-icone-grande .fa-cloud-moon,
.ct-clima-topo .ct-clima-icone-grande .fa-cloud-moon-rain {
    color: #e3e8ff !important;
}

.ct-clima-topo .ct-clima-sol-mini i {
    color: #ffd54a;
}

.ct-clima-topo .ct-clima-sol-mini i + i,
.ct-clima-topo .ct-clima-sol-mini i:nth-of-type(2) {
    color: #c7d2fe;
}

.ct-clima-widget--moderno .ct-clima-alerta {
    margin: 0 0 10px;
}

.ct-clima-indices {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: -16px 12px 12px;
    padding: 0;
    list-style: none;
    z-index: 1000;
    position: relative;
}

.ct-clima-indices li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}

.ct-clima-losango {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    transform: rotate(45deg) scale(.82);
    border-radius: 3px;
    background: var(--cor-ind, #ca8a04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-clima-losango b {
    transform: rotate(-45deg);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

.ct-clima-gota {
    flex: 0 0 22px;
    text-align: center;
    font-size: 15px;
    color: #475569;
}

.ct-clima-ind-nome {
    font-weight: 700;
    color: #111;
}

.ct-clima-ind-val {
    margin-left: auto;
    color: #475569;
    text-align: right;
}

.ct-clima-dias--cartoes {
    gap: 6px;
    padding: 0;
    border-top: 0;
}

.ct-clima-dias--cartoes .ct-clima-dia {
    padding: 8px 4px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.ct-clima-dias--cartoes .ct-clima-dia i {
    font-size: 20px;
}

.ct-clima-widget--moderno .ct-clima-footer {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
}

/* Proximos dias: fileira que se arrasta de lado (ate 6 dias), com a barra fina
   visivel e um esmaecido na borda direita para mostrar que ha mais. */
.ct-clima-dias--cartoes {
    display: flex;
    gap: 6px;
    padding: 0 0 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}

.ct-clima-dias--cartoes::-webkit-scrollbar {
    height: 5px;
}

.ct-clima-dias--cartoes::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #cbd5e1;
}

.ct-clima-dias--cartoes .ct-clima-dia {
    flex: 0 0 72px;
    scroll-snap-align: start;
}

.ct-clima-dia-nome small {
    font-size: inherit;
    font-weight: 500;
    color: #94a3b8;
}

/* Fileira da capa: um destaque por categoria fora do menu (inc/capa-categorias.php) */
.ct-capa-cats { margin-top: 26px; margin-bottom: 8px; }
.ct-capa-cats-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ct-capa-cats-cartao { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.ct-capa-cats-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #eef1f5; }
.ct-capa-cats-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-capa-cats-chapeu { align-self: flex-start; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cat-cor, #008a20); background: color-mix(in srgb, var(--cat-cor, #008a20) 12%, #fff); }
.ct-capa-cats-titulo { font-family: var(--font-serif, Georgia, serif); font-size: 17px; font-weight: 700; line-height: 120%; color: #17191d; letter-spacing: -.02em;}
.ct-capa-cats-cartao:hover .ct-capa-cats-titulo { color: #4a5260; text-decoration: none; }
@media (max-width: 900px) { .ct-capa-cats-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ct-capa-cats-grade { gap: 16px 12px; } .ct-capa-cats-titulo { font-size: 15px; } }

/* Nome da editoria acima de cada destaque (mesmo desenho dos títulos de coluna) */
.ct-capa-cats--editorias .ct-capa-cats-cartao { gap: 10px; }
.ct-capa-cats-secao { position: relative; display: block; padding-bottom: 9px; border-bottom: 1px solid #e2e5ea; font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; color: #17191d; }
.ct-capa-cats-secao::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 40px; height: 3px; background: var(--cat-cor, #008a20); }
/* Fileira das editorias em 5 colunas (a mesma grade do topo) */
@media (min-width: 1101px) {
    .ct-capa-cats--editorias .ct-capa-cats-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Central do Cidadão: convite para enviar conteúdo, no fim de cada lista (Vagas, Agenda, Achados) */
.ct-c-convite { margin: 6px 0 0; font-size: 12.5px; }
.ct-c-convite a { font-weight: 700; color: var(--cor-primaria, #e11d48); text-decoration: none; }
.ct-c-convite a:hover { text-decoration: underline; }

/* ---------- Três colunas por editoria (inc/capa-categorias.php): nome, um destaque com foto e três manchetes em lista ---------- */
.ct-cols3 { margin-top: 34px; margin-bottom: 14px; }
.ct-cols3-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.ct-cols3-col { min-width: 0; }
.ct-cols3-cab { position: relative; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e2e5ea; }
.ct-cols3-nome { margin: 0; font-family: var(--font-primary, sans-serif); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ct-cols3-cab::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: var(--cat-cor, #c0261c); }
.ct-cols3-nome a { color: #17191d; text-decoration: none; }
.ct-cols3-nome a:hover { color: var(--cat-cor, #c0261c); text-decoration: none; }
.ct-cols3-desc { margin: 5px 0 0; min-height: 2.8em; font-size: 13.5px; line-height: 1.4; color: #5b6472; }
@media (max-width: 700px) { .ct-cols3-desc { min-height: 0; } }
.ct-cols3-destaque { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.ct-cols3-foto { display: block; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 8px; background: #eef1f5; }
.ct-cols3-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-cols3-chapeu { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cat-cor, #c0261c); }
.ct-cols3-titulo { font-family: var(--font-serif, Georgia, serif); font-size: 26px; font-weight: 700; line-height: 1.17; letter-spacing: -.02em; color: #17191d; }
.ct-cols3-destaque:hover .ct-cols3-titulo { color: #4a5260; }
.ct-cols3-lista { margin: 14px 0 0; padding: 0; list-style: none; }
.ct-cols3-lista li { border-top: 1px solid #e2e5ea; }
.ct-cols3-lista a { display: block; padding: 11px 0; font-family: var(--font-serif, Georgia, serif); font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #17191d; text-decoration: none; }
.ct-cols3-lista a:hover { color: #4a5260; text-decoration: none; }
@media (max-width: 900px) {
    .ct-cols3-grade { grid-template-columns: 1fr; gap: 34px 0; }
}
@media (max-width: 700px) {
    .ct-cols3-grade { gap: 26px 0; }
    .ct-cols3-cab { margin-bottom: 12px; }
    .ct-cols3-destaque { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 4px 14px; align-items: start; }
    .ct-cols3-foto { grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
    .ct-cols3-chapeu { grid-column: 2; }
    .ct-cols3-titulo { grid-column: 2; }
    .ct-cols3-lista { margin-top: 10px; }
    .ct-cols3-lista a { padding: 10px 0; font-size: 16px; }
}
/* Celular: a foto continua em 16/8, agora na largura toda, acima do título (a versão com miniatura quadrada saiu) */
@media (max-width: 700px) {
    .ct-cols3-destaque { display: flex; flex-direction: column; gap: 10px; }
    .ct-cols3-foto { grid-row: auto; aspect-ratio: 16 / 8; }
    .ct-cols3-nome { font-size: 26px; }
}