/* =====================================================================
   MODELO VISUAL: NOTURNO — o Amplo em modo escuro.

   Como o tema inteiro do site é escrito em cima das variáveis do portal
   (--cor-texto-1, --cor-texto-2, --cor-background), o jeito limpo de escurecer
   é REDEFINIR essas variáveis dentro do conteúdo, em vez de caçar seletor por
   seletor. As cores da marca (--cor-primaria / --cor-secundaria) continuam
   intactas e viram o acento sobre o escuro.

   O cabeçalho e o rodapé também escurecem (ver o fim do arquivo) — o modelo é
   escuro de ponta a ponta, e não só no miolo.

   Tudo escopado em `body.tpl-noturno`.
   ===================================================================== */

body.tpl-noturno{ background:#0e0d0e; }

/* ---------------------------------------------------- SUPERFÍCIES ESCURAS */
body.tpl-noturno section,
body.tpl-noturno .cal-seo-section{
  --cor-texto-1:#f4f2ef;
  --cor-texto-2:#b0aca7;
  --cor-background:rgba(14,13,14,.92);
  background:#0e0d0e;
  color:#f4f2ef;
}
body.tpl-noturno section a{ color:inherit; }

/* Blocos que declaram fundo claro no tema base */
body.tpl-noturno .noticias_horizontal,
body.tpl-noturno .colunas-showcase,
body.tpl-noturno .cal-seo-wrapper,
body.tpl-noturno .cal-tab-pane,
body.tpl-noturno .eventos_pagina,
body.tpl-noturno .hot{
  background:#161314 !important; border-color:#2d2a2b !important;
}
body.tpl-noturno .coluna-card,
body.tpl-noturno .cal-event-list li,
body.tpl-noturno .cal-event-list li a{
  background:#161314 !important; border-color:#2d2a2b !important; color:#f4f2ef !important;
}
body.tpl-noturno .cal-event-list li a:hover{ background:#1f1b1d !important; }
body.tpl-noturno .cal-tabs-nav li{ color:#b0aca7; }
body.tpl-noturno .cal-tabs-nav li.active{ color:#f4f2ef; }

/* ------------------------------------------------------------ CONTAINER
   Mesma medida do Amplo — o Noturno é ele em outra pele. */
body.tpl-noturno .util,
body.tpl-noturno .util3{
  width:100% !important; max-width:1560px; box-sizing:border-box;
  padding-left:40px; padding-right:40px;
}
body.tpl-noturno .coluna-direita{ display:none !important; }

/* ---------------------------------------------------- HOME: grade de cards */
body.tpl-noturno .noticias,
body.tpl-noturno .noticias_final,
body.tpl-noturno .noticias_cat{ width:100% !important; min-height:0 !important; margin-right:0 !important; }
body.tpl-noturno .noticias ul,
body.tpl-noturno .noticias_final ul{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px; text-align:left !important;
}
body.tpl-noturno .noticias ul li,
body.tpl-noturno .noticias_final ul li{ width:100% !important; margin:0 !important; overflow:visible !important; }
body.tpl-noturno .noticias ul li img,
body.tpl-noturno .noticias_final ul li img{
  width:100% !important; height:240px !important; float:none !important; display:block;
  /* leve rebaixamento do brilho: foto estourada num fundo preto incomoda */
  filter:brightness(.94);
}
body.tpl-noturno .noticias ul li:hover img,
body.tpl-noturno .noticias_final ul li:hover img{ filter:brightness(1); }
body.tpl-noturno .noticias ul li .infos,
body.tpl-noturno .noticias_final ul li .infos{
  position:static !important; width:100% !important; transform:none !important;
  right:auto !important; top:auto !important; padding:15px 2px 0 !important;
}
body.tpl-noturno .noticias ul li:hover .infos,
body.tpl-noturno .noticias_final ul li:hover .infos{ right:auto !important; }
body.tpl-noturno .noticias ul li .infos h2,
body.tpl-noturno .noticias_final ul li .infos h2{ font-size:21px !important; line-height:1.25 !important; }

body.tpl-noturno .noticias_horizontal ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px; }
body.tpl-noturno .noticias_horizontal ul li{ width:100% !important; margin:0 !important; }
body.tpl-noturno .noticias_horizontal ul li img{ width:100% !important; height:190px !important; float:none !important; }
body.tpl-noturno .noticias_horizontal ul li .infos{
  position:static !important; width:100% !important; transform:none !important;
  right:auto !important; top:auto !important; padding:12px 2px 0 !important;
}
body.tpl-noturno .noticias_horizontal ul li:hover .infos{ right:auto !important; }

body.tpl-noturno .colunas-grid{ grid-template-columns:repeat(4,1fr) !important; }

/* --------------------------------------------------------- DIVISÕES/LINHAS
   No claro as divisórias são cinza-claro; no escuro precisam ser mais suaves
   que o texto, senão viram grade. */
body.tpl-noturno .titulo_padrao{ border-color:#2d2a2b !important; }
body.tpl-noturno hr,
body.tpl-noturno .conteudo-home .coluna-esquerda ol li{ border-color:#2d2a2b !important; }

/* ------------------------------------------------------ PÁGINA DA COLUNA */
body.tpl-noturno .coluna-hero{ padding:86px 0; }
body.tpl-noturno .coluna-hero h1{ font-size:2.6rem; }
body.tpl-noturno .coluna-cards{ grid-template-columns:repeat(4,1fr); gap:30px 24px; }
body.tpl-noturno .coluna-card-img img{ height:230px; }
body.tpl-noturno .coluna-card-img{ background:#1f1b1d; }
body.tpl-noturno .coluna-cats a{ background:#1f1b1d; color:#d8d4ce; }
body.tpl-noturno .coluna-cats a.ativa{ background:#f4f2ef; color:#0e0d0e; border-color:#f4f2ef; }

/* --------------------------------------------------------------- MATÉRIA */
body.tpl-noturno .util_post{ width:100% !important; display:block !important; }
body.tpl-noturno .util_post img{ filter:brightness(.94); }

/* ------------------------------------------- LISTAGENS INTERNAS */
body.tpl-noturno .conteudo-home .coluna-esquerda{ width:100% !important; }
body.tpl-noturno .conteudo-home .coluna-esquerda ol{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 24px; }
body.tpl-noturno .conteudo-home .coluna-esquerda ol li{ margin:0 !important; }

@media(max-width:1280px){
  body.tpl-noturno .noticias ul,
  body.tpl-noturno .noticias_final ul{ grid-template-columns:repeat(2,1fr); }
  body.tpl-noturno .noticias_horizontal ul,
  body.tpl-noturno .coluna-cards,
  body.tpl-noturno .colunas-grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media(max-width:900px){
  body.tpl-noturno .util, body.tpl-noturno .util3{ padding-left:20px; padding-right:20px; }
  body.tpl-noturno .coluna-cards, body.tpl-noturno .colunas-grid,
  body.tpl-noturno .noticias_horizontal ul,
  body.tpl-noturno .conteudo-home .coluna-esquerda ol{ grid-template-columns:repeat(2,1fr) !important; }
  body.tpl-noturno .coluna-hero{ padding:52px 0; }
  body.tpl-noturno .coluna-hero h1{ font-size:1.9rem; }
}
@media(max-width:640px){
  body.tpl-noturno .noticias ul,
  body.tpl-noturno .noticias_final ul,
  body.tpl-noturno .noticias_horizontal ul,
  body.tpl-noturno .coluna-cards,
  body.tpl-noturno .colunas-grid,
  body.tpl-noturno .conteudo-home .coluna-esquerda ol{ grid-template-columns:1fr !important; }
}

/* ===================================================================== TOPO E RODAPÉ ESCUROS
   Vêm depois do tema do portal no <head>, e os ajustes da Identidade Visual
   usam !important — por isso estas regras também usam, com especificidade
   maior (body.tpl-noturno vence o seletor solto). Ou seja: neste modelo o topo
   é escuro mesmo que haja cor preenchida no "Ajuste fino por seção". Para um
   topo claro com o miolo escuro, o caminho é outro modelo.
   ===================================================================== */
body.tpl-noturno header,
body.tpl-noturno header.blur{
  background-color:#0e0d0e !important; border-bottom:1px solid #2d2a2b;
}
body.tpl-noturno header .menu_acoes nav ul li span,
body.tpl-noturno header .menu_acoes nav ul li a,
body.tpl-noturno header .colunas_nav .coluna_link,
body.tpl-noturno header .busca_topo span,
body.tpl-noturno header .translate .translate_ativo span{
  color:#f4f2ef !important;
}
/* submenu / mega menu */
body.tpl-noturno header .menu_acoes nav ul li .menu_especial,
body.tpl-noturno header .menu_acoes nav ul li .menu_especial .demais_canais,
body.tpl-noturno header .menu_acoes nav ul li .submenus{
  background-color:#161314 !important; border:1px solid #2d2a2b;
}
body.tpl-noturno header .menu_acoes nav ul li .menu_especial a,
body.tpl-noturno header .menu_acoes nav ul li .menu_especial li,
body.tpl-noturno header .menu_acoes nav ul li .menu_especial ol li a,
body.tpl-noturno header .menu_acoes nav ul li .submenus a{ color:#d8d4ce !important; }

/* A LOGO: a do portal costuma ser feita para fundo claro e sumiria no preto.
   brightness(0) invert(1) achata qualquer logo em branco sólido — resolve o
   caso comum (logo monocromática) sem exigir upload de uma versão clara.

   ATENÇÃO ao alvo: aqui havia um `header > .util img[alt]`, que pegava TODA
   imagem dentro do topo — inclusive as miniaturas das matérias no mega menu,
   que viravam blocos brancos sólidos. Inverter só o que é logo. */
body.tpl-noturno header .logomarca img,
body.tpl-noturno header .coluna_logo,
body.tpl-noturno header .cmega_logo{ filter:brightness(0) invert(1); }

/* Rodapé */
body.tpl-noturno footer,
body.tpl-noturno footer.blur{ background-color:#0e0d0e !important; border-top:1px solid #2d2a2b; }
body.tpl-noturno footer,
body.tpl-noturno footer a,
body.tpl-noturno footer li,
body.tpl-noturno footer .mapa_site ol a,
body.tpl-noturno footer .contatos .submenu li{ color:#d8d4ce !important; }
body.tpl-noturno footer img{ filter:brightness(0) invert(1); }

/* Busca flutuante sobre o topo escuro */
body.tpl-noturno .busca_flutuante{ background-color:rgba(14,13,14,.96) !important; }
body.tpl-noturno .busca_flutuante form input[type=text]{ background:#161314 !important; color:#f4f2ef !important; border-color:#2d2a2b !important; }

/* Textos do calendário com cor cravada no tema base (não usam as variáveis),
   por isso precisam ser ditos aqui — foram os únicos que sobraram escuros
   numa varredura de contraste da página inteira. */
body.tpl-noturno .cal-seo-header h2{ color:#f4f2ef !important; }
body.tpl-noturno .cal-seo-header p{ color:#b0aca7 !important; }
body.tpl-noturno .cal-event-list .loc,
body.tpl-noturno .cal-event-list .cal-dist,
body.tpl-noturno .cal-event-list h3{ color:#d8d4ce !important; }
/* Sobras da varredura: nome da coluna no mega menu e o "siga" do rodapé. */
body.tpl-noturno header .cmega_nome,
body.tpl-noturno header .cmega_autor,
body.tpl-noturno footer .siga{ color:#d8d4ce !important; }

/* ------------------------------------------------- MEGA MENU DAS COLUNAS
   Ele é estilizado por um <style> inline dentro do header.php (com #fff e
   cinzas cravados), e não pelas classes .menu_especial do tema — por isso
   continuava branco no escuro mesmo com as regras de submenu acima. */
body.tpl-noturno .coluna_mega{ background:#161314 !important; box-shadow:0 30px 60px -22px rgba(0,0,0,.65) !important; }
body.tpl-noturno .cmega_head{ border-bottom-color:#2d2a2b !important; }
body.tpl-noturno .cmega_nome{ color:#f4f2ef !important; }
body.tpl-noturno .cmega_autor,
body.tpl-noturno .cmega_desc,
body.tpl-noturno .cmega_h,
body.tpl-noturno .cmega_vazio{ color:#b0aca7 !important; }
body.tpl-noturno .cmega_cats a{ color:#e8e5e0 !important; border-bottom-color:#2d2a2b !important; }
body.tpl-noturno .cmega_post span{ color:#e8e5e0 !important; }
body.tpl-noturno .cmega_post img{ filter:brightness(.94); }
/* Hover em BRANCO, e não na cor da marca: --cor-primaria pode ser escura (no
   Guia da Corrida é #030303) e o título sumia no fundo preto ao passar o mouse.
   Branco é legível sobre o escuro em qualquer paleta de tenant. */
body.tpl-noturno .cmega_cats a:hover,
body.tpl-noturno .cmega_post:hover span,
body.tpl-noturno .cmega_ver{ color:#ffffff !important; }

/* O hover do MENU PRINCIPAL desenha uma pílula branca atrás do link
   (config.css: `li:hover a{background-color:rgba(255,255,255)}`). Com o texto
   claro do modelo escuro, virava branco no branco. Aqui a pílula é um véu
   claro sobre o topo preto. */
body.tpl-noturno header .menu_acoes nav ul li:hover a{
  /* Sem pilula: qualquer fundo claro aqui vira uma segunda cor dentro do topo
     preto. O destaque fica no texto e num tracinho embaixo. */
  background-color:transparent !important; color:#ffffff !important;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.85);
}
body.tpl-noturno header .menu_acoes nav ul li:hover a.chama_externo span{ background:rgba(255,255,255,.16) !important; color:#ffffff !important; }
body.tpl-noturno header .menu_acoes nav ul li:hover span{ color:#ffffff !important; }

/* Ícones do topo (busca/tradução): o tema os posiciona com `position:absolute;
   right:0` em relação ao <header>, então eles ignoram o respiro do container e
   colam na borda da tela. Nos modelos de largura cheia isso fica evidente —
   aqui eles acompanham o mesmo recuo do conteúdo. */
body.tpl-noturno header .busca_topo{ right:40px !important; }
body.tpl-noturno header .translate{ right:78px !important; }
@media(max-width:900px){
  body.tpl-noturno header .busca_topo{ right:20px !important; }
  body.tpl-noturno header .translate{ right:58px !important; }
}

/* Mega menu num container largo: a proporção 1fr/2fr do tema deixava a coluna
   de categorias com espaço vazio demais. Largura fixa para as categorias e o
   resto para as matérias, que são o conteúdo útil. */
body.tpl-noturno .cmega_body{ grid-template-columns:240px 1fr !important; gap:40px !important; }
body.tpl-noturno .cmega_posts_grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; }
@media(max-width:900px){
  body.tpl-noturno .cmega_body{ grid-template-columns:1fr !important; gap:18px !important; }
}

/* ------------------------------------------------------ SELETOR DE IDIOMA
   O tema pinta a caixa de idiomas de branco (`translate_opcoes{background:#fff}`)
   e dá uma pílula branca no ícone ao passar o mouse — no topo preto viravam
   duas manchas claras. Aqui a caixa é escura e o ícone só muda de tom. */
body.tpl-noturno header .translate .translate_opcoes{
  background:#161314 !important; border:1px solid #2d2a2b;
  box-shadow:0 18px 34px rgba(0,0,0,.55) !important;
}
body.tpl-noturno header .translate .translate_opcoes .translate_opcao{ color:#e8e5e0 !important; }
body.tpl-noturno header .translate .translate_opcoes .translate_opcao:hover{ color:#ffffff !important; }
body.tpl-noturno header .translate:hover .translate_ativo span{
  background-color:rgba(255,255,255,.12) !important; color:#ffffff !important;
}
/* Mesmo tratamento no ícone da busca (o tema também usa branco no hover) */
body.tpl-noturno header .busca_topo:hover span{ background-color:rgba(255,255,255,.12) !important; color:#ffffff !important; }

/* Botões do topo (CTA externo e ícones): o tema os pinta com
   rgba(255,255,255,.4) — 40% de branco. Sobre o amarelo do tema claro isso é
   um leve realce; sobre o preto vira uma placa cinza, uma segunda cor dentro
   do topo. Aqui viram um véu discreto, e o realce fica no hover. */
body.tpl-noturno header .menu_acoes nav ul li a.chama_externo span,
body.tpl-noturno header .busca_topo span,
body.tpl-noturno header .translate .translate_ativo span{
  background-color:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14);
  color:#f4f2ef !important;
}
body.tpl-noturno header .menu_acoes nav ul li:hover a.chama_externo span{
  background-color:rgba(255,255,255,.18) !important; color:#ffffff !important;
}

/* =====================================================================
   PÁGINA DA MATÉRIA (/post/…)
   O css/materia.css escreve o corpo do texto em preto cravado (rgb(0,0,0)),
   sem passar pelas variáveis do tema — por isso a leitura ficava impossível
   no escuro. Aqui o texto é dito explicitamente, com um cinza claro em vez de
   branco puro: no fundo preto, branco 100% em texto corrido cansa a vista.
   ===================================================================== */
body.tpl-noturno .util_post,
body.tpl-noturno article,
body.tpl-noturno article .infos,
body.tpl-noturno .breadcrumb{ color:#e8e5e0 !important; }

body.tpl-noturno article .infos section p,
body.tpl-noturno article .infos section li,
body.tpl-noturno article .infos section span,
body.tpl-noturno article .infos section strong,
body.tpl-noturno article .infos section b,
body.tpl-noturno article .infos section em,
body.tpl-noturno article .infos section td,
body.tpl-noturno article .infos section th,
body.tpl-noturno article .infos section div{ color:#dedad4 !important; }

body.tpl-noturno article .infos section h1,
body.tpl-noturno article .infos section h2,
body.tpl-noturno article .infos section h3,
body.tpl-noturno article .infos section h4{ color:#ffffff !important; }

/* Conforto de leitura no escuro: linha um pouco mais alta e texto mais aberto. */
body.tpl-noturno article .infos section p,
body.tpl-noturno article .infos section li{ line-height:1.8 !important; }

/* Link no meio do texto: sublinhado, para não depender só da cor (a primária
   do tenant pode ser escura demais para o fundo preto). */
body.tpl-noturno article .infos section a{
  color:#ffffff !important; text-decoration:underline !important; text-underline-offset:3px;
}

body.tpl-noturno article .infos section blockquote{
  background:#161314 !important; color:#e8e5e0 !important;
  border-left-color:var(--cor-secundaria, #f4f2ef) !important;
}
body.tpl-noturno article .infos section hr,
body.tpl-noturno article .infos section table,
body.tpl-noturno article .infos section td,
body.tpl-noturno article .infos section th{ border-color:#2d2a2b !important; }

/* Caixas que o tema desenha em branco */
body.tpl-noturno .mais_materias,
body.tpl-noturno .relacionados,
body.tpl-noturno article aside,
body.tpl-noturno article aside .imagem{
  background:#161314 !important; border-color:#2d2a2b !important; color:#e8e5e0 !important;
}
body.tpl-noturno .relacionados ul li .infor h2,
body.tpl-noturno .mais_materias ul li .infor h2{ color:#f4f2ef !important; }
body.tpl-noturno .relacionados ul li .infor .leia_mais,
body.tpl-noturno .mais_materias ul li .infor .leia_mais,
body.tpl-noturno .legenda_foto,
body.tpl-noturno .hora_post,
body.tpl-noturno .fonte{ color:#b0aca7 !important; }
body.tpl-noturno .relacionados .tag{ background:#1f1b1d !important; color:#e8e5e0 !important; }

/* Trilha (breadcrumb) */
body.tpl-noturno .breadcrumb ul li{ color:#b0aca7 !important; }
body.tpl-noturno .breadcrumb ul li a{ color:#d8d4ce !important; }

/* Aviso: era amarelo puro (#ff0) chapado — vira faixa escura com barra da marca */
body.tpl-noturno .aviso{
  background:#1f1b1d !important; color:#f4f2ef !important;
  border-left:3px solid var(--cor-secundaria, #f4f2ef) !important;
}

/* Título e manchete ficam FORA da <section> interna (são filhos diretos de
   .infos), então não pegavam as regras acima — e uma varredura limitada a
   `section *` não os enxergava. Aqui o alvo é o bloco da matéria inteiro. */
body.tpl-noturno .util_post h1,
body.tpl-noturno article .infos > h1{ color:#ffffff !important; }
body.tpl-noturno .util_post > article > .infos > h2,
body.tpl-noturno article .infos > h2,
body.tpl-noturno article .infos > h3{ color:#c9c5be !important; }
body.tpl-noturno .util_post .autor,
body.tpl-noturno .util_post .data,
body.tpl-noturno .util_post .tempo_leitura{ color:#b0aca7 !important; }

/* Linha de data / tempo de leitura e legendas de imagem — também escritas em
   preto no tema. As pílulas de categoria (.categoria_post) ficam de fora:
   elas têm fundo próprio e o texto escuro nelas está certo. */
body.tpl-noturno .util_post .data_redes time,
body.tpl-noturno .util_post .data_redes .quando,
body.tpl-noturno .util_post .data_redes .quando p,
body.tpl-noturno .util_post figcaption,
body.tpl-noturno .util_post figcaption *,
body.tpl-noturno .util_post .legenda,
body.tpl-noturno .util_post small{ color:#b0aca7 !important; }
/* Rótulo do bloco "mais matérias" (titulo_global > tag_global) */
body.tpl-noturno .titulo_global .tag_global .label_global,
body.tpl-noturno .titulo_global .tag_global .label_global span{ color:#e8e5e0 !important; }

/* ===================================================== MATÉRIA EM DUAS COLUNAS
   Num corpo largo, a foto principal sozinha vira um painel gigante e empurra o
   texto para baixo da dobra. Aqui o cabeçalho e a foto dividem a primeira tela
   (texto à esquerda, imagem à direita, com altura limitada) e o corpo continua
   numa medida de leitura confortável — largura cheia em texto corrido cansa. */
/* UMA coluna de conteúdo só: o bloco da matéria acompanha o mesmo container
   do topo e da home, então trilha, título e texto compartilham a MESMA margem
   esquerda. Antes eram três larguras empilhadas (container, .util_post e o
   corpo), cada uma com um recuo diferente. */
body.tpl-noturno .util_post{ max-width:none !important; margin:0 !important; }
body.tpl-noturno .post-topo{
  display:grid !important;
  /* a foto tem teto próprio e termina na borda direita do container */
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
  column-gap:40px; align-items:start; margin-bottom:26px;
}
body.tpl-noturno .post-topo > h1,
body.tpl-noturno .post-topo > h2,
body.tpl-noturno .post-topo > .data_redes,
body.tpl-noturno .post-topo > .byline-coluna{ grid-column:1; }
body.tpl-noturno .post-topo > a.fancybox,
body.tpl-noturno .post-topo > figure{
  grid-column:2; grid-row:1 / span 6; margin:0 !important; align-self:start;
}
body.tpl-noturno .post-topo > a.fancybox figure{ margin:0 !important; }
body.tpl-noturno .post-topo img.principal{
  width:100% !important; height:auto; max-height:430px; object-fit:cover; display:block;
}
/* corpo do texto: medida de leitura, mesmo com o container largo */
body.tpl-noturno article .infos > section{ max-width:820px; margin-right:auto; }

@media(max-width:900px){
  body.tpl-noturno .post-topo{ display:block !important; }
  body.tpl-noturno .post-topo img.principal{ max-height:none; }
}

/* O invólucro .post-topo passou a existir entre .infos e o cabeçalho, então os
   seletores de filho direto acima deixaram de casar com a manchete. E a caixa
   da byline da coluna também escrevia em cor escura. */
body.tpl-noturno .post-topo > h2,
body.tpl-noturno .post-topo > h3{ color:#c9c5be !important; }
body.tpl-noturno .byline-coluna,
body.tpl-noturno .byline-coluna *{ color:#d8d4ce !important; }
body.tpl-noturno .byline-coluna .byline-nome,
body.tpl-noturno .byline-coluna .byline-coluna-nome{ color:#ffffff !important; }

/* A byline virou linha de credito (sem cartao) — aqui ela nao pode ganhar
   fundo, senao vira uma faixa escura solta no meio do cabecalho. */
body.tpl-noturno article .infos .byline-coluna{ background:transparent !important; border:0 !important; }

/* ===================================================== MATÉRIA EM DUAS COLUNAS
   Desenho: em cima, cabeçalho e foto lado a lado; embaixo, corpo do texto com a
   barra lateral (Mais lidas) à direita. Duas colunas em cima, duas embaixo.

   O detalhe difícil: no HTML a lateral é IRMÃ do bloco da matéria, então ela
   naturalmente começaria lá no topo — foi o que deixou três colunas na primeira
   tentativa. Aqui os invólucros (.util_post, article, .infos) viram
   `display:contents`: eles somem para o layout e todas as peças passam a ser
   itens da MESMA grade. A ordem de colocação é dada por `order`, que é o que
   permite a lateral cair na mesma linha do corpo mesmo vindo depois das tags
   no HTML.

   A foto do cabeçalho usa a mesma medida da lateral, então ela fica exatamente
   por cima da coluna do "Mais lidas". */
body.tpl-noturno .util:has(> .util_post){
  display:grid !important;
  grid-template-columns:minmax(0,900px) minmax(300px,420px);
  justify-content:space-between; align-items:start; column-gap:56px;
}
body.tpl-noturno .util:has(> .util_post) > .util_post,
body.tpl-noturno .util:has(> .util_post) .util_post > article,
body.tpl-noturno .util:has(> .util_post) .util_post > article > .infos{ display:contents !important; }

/* linha 1-3: largura inteira */
body.tpl-noturno .util:has(> .util_post) .breadcrumb{ order:1; grid-column:1 / -1; }
body.tpl-noturno .util:has(> .util_post) .aviso{ order:2; grid-column:1 / -1; }
body.tpl-noturno .util:has(> .util_post) .post-topo{
  order:3; grid-column:1 / -1;
  grid-template-columns:minmax(0,900px) minmax(300px,420px) !important;
  justify-content:space-between; column-gap:56px !important;
}
/* linha do conteúdo: corpo à esquerda, lateral à direita */
body.tpl-noturno .util:has(> .util_post) .infos > section{ order:4; grid-column:1; max-width:none; }
body.tpl-noturno .util:has(> .util_post) > .coluna-direita{
  order:5; grid-column:2; display:block !important;
  width:100% !important; margin:0 !important; float:none !important;
}
/* o que vem depois do corpo (tags etc.) segue na coluna do texto */
body.tpl-noturno .util:has(> .util_post) .infos > *:not(.post-topo):not(section){ order:6; grid-column:1; }
body.tpl-noturno .util:has(> .util_post) > .clearfix,
body.tpl-noturno .util:has(> .util_post) > .util{ order:9; grid-column:1 / -1; }

@media(max-width:1200px){
  body.tpl-noturno .util:has(> .util_post){ display:block !important; }
  body.tpl-noturno .util:has(> .util_post) > .util_post,
  body.tpl-noturno .util:has(> .util_post) .util_post > article,
  body.tpl-noturno .util:has(> .util_post) .util_post > article > .infos{ display:block !important; }
  body.tpl-noturno .util:has(> .util_post) > .coluna-direita{ display:none !important; }
  body.tpl-noturno .post-topo{ display:block !important; }
}

/* ------------------------------------------------ CAPA DA COLUNA NO ESCURO
   A capa base usa a cor da marca com um véu preto por cima. Num tema claro isso
   dá uma faixa de marca; no escuro, o amarelo escurecido virava uma placa
   oliva gigante, destoando de tudo. Aqui a superfície é escura como o resto e a
   marca aparece como ACENTO (o rótulo "Coluna" e um filete no topo).
   Quando há foto de capa, ela continua valendo — o véu escuro só aumenta. */
body.tpl-noturno .coluna-hero{
  background-color:#161314 !important;
  border-top:2px solid var(--cor-secundaria, #f4f2ef);
  border-bottom:1px solid #2d2a2b;
  padding:60px 0 !important;
}
body.tpl-noturno .coluna-hero::before{
  background:linear-gradient(90deg, rgba(14,13,14,.92), rgba(14,13,14,.55)) !important;
}
body.tpl-noturno .coluna-eyebrow{ color:var(--cor-secundaria, #f4f2ef); opacity:1; }
body.tpl-noturno .coluna-hero h1{ font-size:2.3rem; }
body.tpl-noturno .coluna-desc{ color:#c9c5be; }
body.tpl-noturno .coluna-autor{ color:#b0aca7; }
body.tpl-noturno .coluna-autor strong{ color:#f4f2ef; }

/* Etiquetas de categoria: o fundo delas vem da COR DA CATEGORIA (tema do
   portal), que é sempre um tom vivo — o texto foi desenhado escuro por cima.
   Ao redefinir --cor-texto-1 para claro, elas viraram claro sobre claro.
   Aqui o texto volta a ser escuro, como o desenho original supõe. */
body.tpl-noturno .coluna-cat,
body.tpl-noturno .noticias ul li .categoria,
body.tpl-noturno .noticias_final ul li .categoria,
body.tpl-noturno .noticias_horizontal ul li .categoria,
body.tpl-noturno .categoria_post{ color:#0e0d0e !important; }

/* A lateral tem 420px, mas os blocos DENTRO dela são fixos em 280px no tema
   (.cates, banners). Ficavam mais estreitos que a foto logo acima, desalinhados
   à direita. Aqui eles acompanham a coluna — mesma medida da imagem. */
body.tpl-noturno .util:has(> .util_post) > .coluna-direita > *,
body.tpl-noturno .util:has(> .util_post) > .coluna-direita .cates,
body.tpl-noturno .util:has(> .util_post) > .coluna-direita .banner-menor,
body.tpl-noturno .util:has(> .util_post) > .coluna-direita .banner-vertical,
body.tpl-noturno .util:has(> .util_post) > .coluna-direita .publicidade{
  width:100% !important; max-width:100% !important;
}

/* --------------------------------------------- LATERAL DA MATÉRIA NO ESCURO
   Os cartões de "Mais lidas" vinham com fundo quase branco (#f4f6f8) e texto
   preto — no fundo escuro era a coisa mais clara da tela. O selo do número
   mantém o fundo da marca com texto escuro, que é o desenho original. */
body.tpl-noturno .coluna-direita .cates ul li{
  background:#161314 !important; border:1px solid #2d2a2b !important; color:#e8e5e0 !important;
}
body.tpl-noturno .coluna-direita .cates ul li:hover{ background:#1f1b1d !important; }
body.tpl-noturno .coluna-direita .cates ul li a{ color:#e8e5e0 !important; }
body.tpl-noturno .coluna-direita .cates ul li span{ color:#0e0d0e !important; }
body.tpl-noturno .coluna-direita .top,
body.tpl-noturno .coluna-direita .label_global,
body.tpl-noturno .coluna-direita .label_global span,
body.tpl-noturno .coluna-direita .titulo_global{ color:#f4f2ef !important; }
body.tpl-noturno .coluna-direita .linha{ background-color:var(--cor-secundaria, #f4f2ef) !important; }
body.tpl-noturno .coluna-direita .alerta_publicidade{ color:#8a8598 !important; }

/* Contador do "Mais lidas" e byline: chip neutro derivado da superfície escura */
body.tpl-noturno .coluna-direita .cates ul li span{
  background-color:rgba(255,255,255,.12) !important; color:#f4f2ef !important;
}
body.tpl-noturno article .infos .byline-coluna{
  background:rgba(255,255,255,.07) !important; border-color:#2d2a2b !important;
}
body.tpl-noturno article .infos .byline-coluna .byline-nome{ color:#f4f2ef !important; }