/* ==========================================================================
   Caçador Online — protótipo do novo portal
   Mantém a identidade do site atual (Roboto / Roboto Condensed, barras escuras,
   etiquetas azuis) com código novo e sem Bootstrap.
   v3: menu grafite, mais respiro entre os blocos, fontes das notícias maiores.
   ========================================================================== */

:root {
  --ink: #2f2f2f;          /* títulos, barra do topo, rodapé */
  --text: #3b5265;         /* texto corrido (igual ao atual) */
  --muted: #7c8c99;        /* linha fina / datas */
  --line: #e6e9ec;
  --bg: #ffffff;
  --bg-soft: #f5f7f9;
  --black: #1f1f1f;
  --tag: #3ba4ff;          /* etiqueta (cartola): o azul da seção Geral */
  --link-hover: #0386c3;

  /* cores usadas nos títulos de bloco */
  --c-noticias: #0386c3;
  --c-colunas: #da4f49;
  --c-obituario: #424242;
  --c-utilidades: #0cb4ae;

  /* menu — tema "Branco" (padrão). Os outros temas estão mais abaixo. */
  --nav-bg: #ffffff;
  --nav-fg: #2f2f2f;
  --nav-hover: #f2f4f6;
  --nav-accent: #e2412b;          /* sublinhado da editoria atual (vermelho do logo) */
  --nav-border: #e3e7ea;
  --nav-btn-bg: #e2412b;
  --nav-btn-fg: #ffffff;
  --nav-logo-filter: none;

  --container: 1350px;     /* igual ao site atual (1350px a partir de 1366px de tela) */
  --sidebar: 336px;
  --gap: 40px;             /* entre conteúdo e lateral / colunas grandes */
  --space: 28px;           /* entre colunas lado a lado (horizontal) */
  --bloco: 36px;           /* ESPAÇO VERTICAL PADRÃO entre blocos e banners (32px no celular) */
  --tag-gap: 10px;         /* etiqueta (cartola) → título: igual em todo o site */
  --fonte-extra: 0px;      /* somado a TODOS os tamanhos de fonte (1px no celular) */
  --radius: 2px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Roboto Condensed", "Roboto", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* rede de segurança: nada (ex.: anúncio maior que o espaço) cria rolagem lateral na página.
     clip e não hidden: hidden quebraria o position: sticky do cabeçalho e do menu */
  overflow-x: clip;
  font: 400 calc(16px + var(--fonte-extra))/1.55 var(--font);
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ink); margin: 0; line-height: 1.18; font-weight: 700; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 15px; }  /* recuo igual ao Bootstrap do site atual */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.topbar { background: var(--ink); color: #fff; font-size: calc(12px + var(--fonte-extra)); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: 16px; }
.topbar__links { display: flex; gap: 20px; flex-wrap: wrap; font-weight: 500; }
.topbar__links a:hover, .topbar__right a:hover { color: #ffd23f; }
.topbar__right { display: flex; align-items: center; gap: 18px; }
.topbar__right svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.topbar__contato { display: flex; align-items: center; gap: 6px; font-size: calc(13px + var(--fonte-extra)); font-weight: 500; }

.masthead { background: #fff; border-bottom: 1px solid var(--line); }   /* linha entre o logo e o primeiro banner */
.masthead .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 46px; gap: 16px; }   /* desktop: 46px, igual ao menu */
.masthead__logo img { height: 32px; width: auto; }  /* 176x32, igual ao site atual */
h1.masthead__logo { line-height: 0; }                 /* na home o logo é o <h1>: mesma altura do link */
h1.masthead__logo a { display: inline-block; }
.masthead__date { font-size: calc(12px + var(--fonte-extra)); color: var(--muted); text-align: center; }
.masthead__burger { display: none; background: none; border: 0; padding: 8px; margin-left: -8px; color: var(--ink); }
.masthead__burger svg { width: 24px; height: 24px; display: block; }
.masthead__contato { display: none; justify-self: end; padding: 8px; margin-right: -8px; color: var(--ink); }
.masthead__contato svg { width: 24px; height: 24px; display: block; }

/* faixa do super banner do topo */
/* Desktop: 6px + os 9px vazios que o cabeçalho deixa abaixo do logo = 15px até o banner. */
.ad-band { background: #fff; padding: 24px 0; }   /* 1º banner: um pouco menos que o --bloco dos outros banners (desktop, tablet e celular) */
.ad-band .ad { margin: 0 auto; }

/* --------------------------------------------------------------------------
   Menu principal: editorias expostas, "Mais" agrupando o restante e
   botão Anuncie. No celular vira uma faixa rolável.
   As cores vêm das variáveis --nav-* definidas no :root.
   -------------------------------------------------------------------------- */
.nav {
  background: var(--nav-bg); color: var(--nav-fg); position: sticky; top: 0; z-index: 50;
  border-top: 1px solid var(--nav-border); border-bottom: 1px solid var(--nav-border);
}
.nav.is-stuck { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.nav__bar { display: flex; align-items: stretch; height: 46px; }

/* logo pequeno: aparece só quando o menu gruda no topo */
.nav__brand { display: flex; align-items: center; width: 0; overflow: hidden; opacity: 0; transition: width .2s ease, opacity .2s ease, margin .2s ease; }
.nav__brand img { height: 22px; width: auto; filter: var(--nav-logo-filter); }
.nav.is-stuck .nav__brand { width: 118px; opacity: 1; margin-right: 14px; }
/* menu preso no topo: o logo já leva para a capa, então a casinha some.
   Logo → "Geral" fica com o mesmo espaço que "Geral" → "Política" (14px + 14px de padding). */
.nav.is-stuck .nav__item--home { display: none; }
.nav.is-stuck .nav__list { margin-left: 0; }

.nav__list { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.nav__item { position: relative; display: flex; }
.nav__item > a, .nav__item > button {
  display: flex; align-items: center; gap: 5px; padding: 0 14px; background: none; border: 0; color: var(--nav-fg);
  font: 700 calc(13px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent; transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
/* hover e editoria atual: linha embaixo na cor da editoria (paleta do site atual) */
.nav__item > a:hover, .nav__item > button:hover, .nav__item.is-open > button,
.nav__item.is-current > a, .nav__item.is-current > button { background: none; color: var(--nav-fg); box-shadow: inset 0 -4px 0 var(--c, #a2a9ae); }
.nav__list { margin-left: -14px; }  /* casinha alinhada com a borda do conteúdo */
.nav__item--home > a { padding: 0 14px; justify-content: center; }
.nav__item--home svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.nav__item--drop svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nav__item--drop.is-open svg { transform: rotate(180deg); }

/* painéis dos menus suspensos ("Caçador - SC" e "Mais") */
.nav__panel {
  /* sobe 4px para cobrir a linha do botão e não mostrar duas linhas */
  position: absolute; right: 0; top: calc(100% - 4px); z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 12px 36px;
  padding: 28px 32px; background: #fff; color: var(--ink); box-shadow: 0 14px 34px rgba(0,0,0,.18); border-top: 3px solid var(--nav-accent);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s ease;
}
.nav__item--drop.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
/* "Caçador - SC": lista simples, abre alinhada à esquerda do botão, na cor da editoria */
.nav__panel--lista { left: 0; right: auto; display: block; min-width: 220px; padding: 14px 22px; border-top-color: var(--c); }
/* "Mais": borda do painel na mesma cor do botão (definida no --c do item) */
.nav__item--mais .nav__panel { border-top-color: var(--c, var(--nav-accent)); }
.nav__group h3 { font: 700 calc(11px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.nav__group a { display: block; padding: 7px 0; font-size: calc(15px + var(--fonte-extra)); font-weight: 500; }
.nav__group a:hover { color: var(--link-hover); }

.nav__actions { display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.nav__anuncie {
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 3px;
  background: var(--nav-btn-bg); color: var(--nav-btn-fg); font: 700 calc(12px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .05em;
}
.nav__anuncie:hover { filter: brightness(1.08); color: var(--nav-btn-fg); }


/* gaveta do celular */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); background: #fff; z-index: 80; overflow-y: auto;
  transform: translateX(-100%); transition: transform .25s ease; padding-bottom: 24px;
}
.drawer.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
/* cabeçalho da gaveta com a mesma altura do cabeçalho do logo no celular (50px + a linha de baixo) */
.drawer__head { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; height: 51px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.drawer__head img { height: 28px; width: auto; }
.drawer__head button { background: none; border: 0; font-size: calc(30px + var(--fonte-extra)); line-height: 1; padding: 0 6px; color: var(--ink); }
.drawer__group { padding: 6px 20px 12px; }
.drawer__group h3 { line-height: 1; padding: 16px 0 8px; }   /* o título é a etiqueta colorida do rodapé (.footer__tag) */
.drawer__group a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: calc(17px + var(--fonte-extra)); font-weight: 500; color: var(--ink); }
.drawer__social { display: flex; gap: 12px; padding: 20px; }
.drawer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-soft); color: var(--ink); }
.drawer__social svg { width: 16px; height: 16px; fill: currentColor; }
.nav-backdrop { display: none; }
.nav-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; }

/* --------------------------------------------------------------------------
   Estrutura: conteúdo + barra lateral
   -------------------------------------------------------------------------- */
.page { padding: var(--bloco) 0 12px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: var(--gap); align-items: start; }
.sidebar { display: flex; flex-direction: column; align-items: center; gap: var(--bloco); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--bloco) 0; }

/* --------------------------------------------------------------------------
   Etiquetas, títulos e cartões de notícia
   -------------------------------------------------------------------------- */
.tag {
  /* bloco próprio (display: table) para não somar a altura da linha de texto em volta */
  display: table; align-self: flex-start; background: var(--tag); color: #fff;
  font: 400 calc(12px + var(--fonte-extra))/1 var(--font-title); text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 9px 5px; border-radius: var(--radius);
}
.date { font-size: calc(13px + var(--fonte-extra)); color: var(--muted); }
.sub { color: var(--muted); font: 400 calc(17px + var(--fonte-extra))/1.4 var(--font-title); }

.section-title {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font: 700 calc(16px + var(--fonte-extra))/1 var(--font-title); text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
}
.section-title::before { content: ""; width: 4px; height: 18px; background: var(--c, var(--c-noticias)); }   /* só a barrinha colorida, sem linha ao lado */
/* título que é link (ex.: Tempo em Caçador → /previsao-do-tempo): mesma cor do título; no hover, a cor do bloco */
.section-title a { color: inherit; }
.section-title a:hover { color: var(--c, var(--link-hover)); }

.thumb { position: relative; overflow: hidden; background: var(--bg-soft); aspect-ratio: 16 / 10; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.card { display: flex; flex-direction: column; }
.card > .thumb { margin-bottom: 12px; }
.card h3 { font-size: calc(20px + var(--fonte-extra)); line-height: 1.22; }
.card h3 a:hover { color: var(--link-hover); }
.card--sm h3 { font-size: calc(17px + var(--fonte-extra)); }

/* manchete sem foto (como o bloco principal atual) */
/* o subtítulo termina ~6px acima da sua caixa (descendente + entrelinha): o padding
   desconta esses 6px para o vão visível até a linha ser igual ao de baixo (até a foto). */
.manchete { padding-bottom: calc(var(--bloco) - 6px); border-bottom: 1px solid var(--line); margin-bottom: var(--bloco); }
.manchete h2 { font-size: calc(33px + var(--fonte-extra)); line-height: 1.12; margin: 12px 0 10px; }
.manchete h2 a:hover { color: var(--link-hover); }
.manchete .sub { font-size: calc(18px + var(--fonte-extra)); }

/* destaque com foto e título sobre a imagem */
.overlay { position: relative; display: block; overflow: hidden; }
.overlay .thumb { aspect-ratio: 16 / 10; }
/* Degradê escuro alto e firme atrás do texto + sombra nas letras:
   garante leitura mesmo quando a foto é clara (céu, parede branca etc.). */
.overlay__caption {
  position: absolute; inset: auto 0 0 0; padding: 130px 28px 30px;
  /* esmaece aos poucos (vários pontos, sem "degrau"): bem escuro só atrás do texto */
  background: linear-gradient(to top,
    rgba(0,0,0,.86) 0%, rgba(0,0,0,.74) 22%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.3) 68%, rgba(0,0,0,.1) 86%, rgba(0,0,0,0) 100%);
}
.overlay__caption h2 { color: #fff; font-size: calc(34px + var(--fonte-extra)); line-height: 1.15; margin-top: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* mouse em cima do título (não da foto toda): lilás claro, que aparece bem sobre o fundo escuro da foto.
   width: fit-content para a área do hover ser só o texto, não a largura toda da foto */
.overlay__caption h2 { width: fit-content; }
.overlay__caption h2:hover { color: #d2d5fb; }

.dest { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--bloco) var(--space); }
.dest__side { display: flex; flex-direction: column; gap: var(--bloco); }
.dest__side .card + .card { padding-top: var(--bloco); border-top: 1px solid var(--line); }
.dest__side h3 { font-size: calc(20px + var(--fonte-extra)); line-height: 1.2; }
/* NovoSuperCentral dentro do .dest: linha inteira abaixo das 2 colunas; o vão de cima é o gap do grid */
.dest > .ad { grid-column: 1 / -1; margin-top: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bloco) var(--space); }
/* 2 notícias abaixo da foto principal: mesma distância em cima que até os Duplos embaixo */
.dest-textos { margin-top: var(--bloco); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bloco) var(--space); }
.textline { display: flex; flex-direction: column; }
.textline h3 { font-size: calc(20px + var(--fonte-extra)); }

/* item horizontal: miniatura + texto */
.hitem { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: start; }
.hitem .thumb { aspect-ratio: 4 / 3; }
.hitem h3 { font-size: calc(18px + var(--fonte-extra)); margin: 8px 0 6px; }
.hitems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bloco) var(--space); }
/* lugar de um banner que muda de lugar no celular ([data-slot-celular]): escondido até o site.js
   colocar o banner nele. Dentro de uma grade ocupa a linha toda; fora dela, --bloco acima. */
.slot-celular { display: none; grid-column: 1 / -1; }
.slot-celular.is-on { display: block; }
.slot-celular .ad { margin: 0 auto; }
/* banner que só existe no celular (no computador fica escondido e o anuncios.js nem pede o anúncio) */
.ad.ad--so-celular { display: none; }
.dest + .slot-celular.is-on { margin-top: var(--bloco); }
/* seções: banner entre a notícia de destaque e a lista, com --bloco acima e abaixo e linha embaixo como os itens
   (o margin-top junta com os 8px do destaque: fica --bloco, não soma) */
.feed-lead + .slot-celular.is-on { margin-top: var(--bloco); padding-bottom: var(--bloco); border-bottom: 1px solid var(--line); }

/* listas */
.list { display: flex; flex-direction: column; }
.list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.list li:first-child { padding-top: 0; }
.list h4 { font-size: calc(18px + var(--fonte-extra)); margin: 6px 0 5px; }
.list h4 a:hover { color: var(--link-hover); }
.list--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.list--2col li:nth-child(2) { padding-top: 0; }
/* Últimas notícias (capa): sem linhas, 12px de cada lado de cada notícia (igual às Mais lidas) */
.list--ultimas li { border-bottom: 0; padding: 12px 0; }
/* data em bloco com altura fixa: o vão até a próxima notícia não depende da altura de linha do texto da página
   (que muda no celular); os 6px igualam o vão ao das Mais lidas -> mesmo vão nos dois blocos */
.list--ultimas .date { display: block; line-height: 1; margin-bottom: 6px; }
/* Últimas notícias | Foto do Dia em 2 colunas do mesmo tamanho (como no site atual: 4/12 + 4/12 da linha).
   A foto é a versão pequena (300px de largura): fica centralizada na coluna, sem ampliar. */
.ultimas-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.foto-dia__img { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
/* tamanho real do arquivo, no máximo 300 de largura e 290 de altura (fotos em pé não ficam enormes) */
.foto-dia__img img { display: block; width: auto; height: auto; max-width: min(300px, 100%); max-height: 290px; }
.foto-dia__autor { margin-top: 10px; font-size: calc(13px + var(--fonte-extra)); line-height: 1; color: var(--muted); text-align: center; }   /* line-height 1: o --bloco até a linha conta do texto */
.ranked { counter-reset: r; }
.list.ranked li { padding: 12px 0; border-bottom: 0; }   /* Mais lidas: sem linhas, 12px de cada lado de cada notícia (igual às Últimas notícias) */
.list.ranked li:first-child { padding-top: 0; }
/* última notícia de cada coluna sem espaço embaixo: o --bloco seguinte conta a partir do texto */
.list.ranked li:last-child { padding-bottom: 0; }
.list.ranked li:last-child h4 { margin-bottom: -.3em; }
/* Mais lidas em 3 colunas: 1–3 | banner quadrado (Novo-Retangulo-Medio-Lateral-2) | 4–6, com as notícias
   alinhadas por linha (subgrid). A 4ª linha (1fr) absorve a altura do banner quando ele é mais alto que as
   notícias, sem esticar as linhas das notícias. */
.mais-lidas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: repeat(3, auto) 1fr; column-gap: var(--gap); }
.mais-lidas > .list { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; align-self: start; }
.mais-lidas > .ad { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin: 0; justify-self: center; }
.ranked li { display: grid; grid-template-columns: 32px 1fr; gap: 6px; counter-increment: r; }   /* número mais perto da etiqueta e do título */
.ranked li::before { content: counter(r); font: 700 calc(34px + var(--fonte-extra))/1 var(--font-title); color: #d5dce2; }

.stack { display: flex; flex-direction: column; gap: var(--bloco); }
.stack > .divider { margin: 0; }   /* o gap da pilha já dá o --bloco acima e abaixo da linha */

/* faixas inferiores da home */
.band { padding: var(--bloco) 0; }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: var(--gap); align-items: start; }
/* anúncio na coluna da direita da faixa: centralizado, alinhado com os da lateral acima */
.band__grid > .ad { margin: 0 auto; }

/* Tempo em Caçador (embaixo da Foto do Dia): 2 cartões pequenos, lado a lado e centralizados — Hoje e Amanhã */
.tempo-mini { margin-top: var(--bloco); padding-top: var(--bloco); border-top: 1px solid var(--line); }   /* linha cinza entre a Foto do Dia e o Tempo (--bloco acima e abaixo) */
.tempo-2dias { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; gap: 12px; }
.tempo-dia { border: 1px solid var(--line); padding: 11px 12px 10px; text-align: center; }
.tempo-dia__quando { font-size: calc(13px + var(--fonte-extra)); color: var(--muted); line-height: 1; }
.tempo-dia__quando strong { font: 700 calc(13px + var(--fonte-extra))/1 var(--font-title); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-right: 4px; }
.tempo-dia__linha { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 9px 0 8px; }
.tempo-dia__ico { font-size: calc(28px + var(--fonte-extra)); line-height: 1; }
.tempo-dia__temp { display: flex; flex-direction: column; gap: 3px; font: 700 calc(17px + var(--fonte-extra))/1 var(--font-title); }
.tempo-dia__desc { font-size: calc(12px + var(--fonte-extra)); line-height: 1.3; color: var(--muted); }
.tempo-dia__umidade { margin-top: 5px; font-size: calc(12px + var(--fonte-extra)); line-height: 1.2; color: var(--text); }
.tempo-mini .tempo__fonte { text-align: center; }
.tempo__max { color: #e2543b; font-weight: 700; }
.tempo__min { color: var(--c-noticias); font-weight: 700; }
.tempo__fonte { font-size: calc(12px + var(--fonte-extra)); color: var(--muted); margin-top: 10px; }

.obito__nome { font: 700 calc(15px + var(--fonte-extra))/1.25 var(--font-title); color: var(--ink); text-transform: uppercase; }
.obito__idade { font-size: calc(14px + var(--fonte-extra)); color: var(--muted); white-space: nowrap; }
/* block + fit-content: como inline-block sobrava ~6px de linha vazia embaixo; e o
   margin -2px desconta o espaço sob as maiúsculas, para o vão até o que vem depois
   (ex.: AdSense da capa) ser medido a partir do texto. */
.more-link { display: block; width: fit-content; margin: 16px 0 -2px auto; font: 700 calc(13px + var(--fonte-extra))/1 var(--font-title); text-transform: uppercase; letter-spacing: .05em; color: var(--c, var(--c-noticias)); }

/* --------------------------------------------------------------------------
   Página de notícia
   -------------------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: calc(12px + var(--fonte-extra)); color: var(--muted); margin-bottom: 18px; text-transform: uppercase; letter-spacing: .04em; }
.breadcrumb a:hover { color: var(--c-noticias); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

/* cabeçalho da matéria */
.article h1 { font-size: calc(40px + var(--fonte-extra)); line-height: 1.12; margin: 14px 0 14px; letter-spacing: -.005em; }
.article .sub { font-size: calc(21px + var(--fonte-extra)); line-height: 1.35; }

.meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.meta__info { display: flex; flex-direction: column; gap: 3px; font-size: calc(14px + var(--fonte-extra)); color: var(--muted); }
.meta__autor { color: var(--ink); font-weight: 500; }
.meta__datas { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.share { display: flex; gap: 8px; }
.share a, .share button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff;
  transition: transform .15s ease, filter .15s ease;
}
.share a:hover, .share button:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.share svg { width: 17px; height: 17px; fill: currentColor; }
.share .wa { background: #25d366; } .share .fb { background: #1877f2; } .share .x { background: #111; } .share .cp { background: #8d99a3; }
.share .cp.is-done { background: #2e9d57; }

/* fotos */
.figure { margin: 0 0 30px; }
.figure img { width: 100%; }
.figure figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: calc(13px + var(--fonte-extra)); line-height: 1.4; color: var(--muted); padding: 10px 0; border-bottom: 1px solid var(--line); }
.figure figcaption span:last-child { white-space: nowrap; font-style: italic; }

/* texto */
.body-text { font-size: calc(19px + var(--fonte-extra)); line-height: 1.7; color: #26323d; }
.body-text p { margin: 0 0 1.2em; }
.body-text a { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.body-text h2 { font-size: calc(25px + var(--fonte-extra)); margin: 1.6em 0 .6em; }
.body-text h3 { font-size: calc(21px + var(--fonte-extra)); margin: 1.4em 0 .5em; }
.body-text ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.2em; }
.body-text li { margin-bottom: .4em; }
.body-text .figure { margin: 1.8em 0; }
.body-text blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--c, var(--c-noticias));
  font: 400 calc(23px + var(--fonte-extra))/1.45 var(--font-title); color: var(--ink);
}
.body-text blockquote footer { margin-top: 10px; font: 500 calc(14px + var(--fonte-extra))/1.3 var(--font); color: var(--muted); }
.body-text blockquote footer::before { content: "— "; }

/* "Leia também" no meio do texto */
.leia { margin: 1.6em 0; padding: 18px 20px; background: var(--bg-soft); border-left: 4px solid var(--c, var(--c-noticias)); }
.leia__titulo { font: 700 calc(12px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.leia ul { list-style: none; padding: 0; margin: 0; }
.leia li { margin: 0; padding: 6px 0; font: 700 calc(17px + var(--fonte-extra))/1.3 var(--font-title); }
.leia li + li { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.leia a { color: var(--ink); text-decoration: none; }
.leia a:hover { color: var(--link-hover); }

/* vídeo (NoticiasVideos → YouTube) */
.video { position: relative; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; margin: 1.8em 0 0; }
.video__play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.65); display: grid; place-items: center; color: #fff;
}
.video__play:hover { background: #e2412b; }
.video__play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 4px; }
.video + figcaption { font-size: calc(13px + var(--fonte-extra)); color: var(--muted); padding: 10px 0 0; margin-bottom: 1.8em; }

.fonte { font-size: calc(14px + var(--fonte-extra)); color: var(--muted); margin-top: 8px; }

/* foto dentro do texto (igual ao site atual): pequena, centralizada, clique amplia.
   O admin gera a versão pequena (300px) e a grande (_g); todas as fotos do texto
   formam uma galeria em tela cheia. */
.body-text .foto-p { text-align: center; margin: 1.4em 0; }
.foto-texto { position: relative; display: inline-block; vertical-align: top; cursor: zoom-in; text-decoration: none !important; }
.foto-texto img { display: block; width: 300px; max-width: 100%; height: auto; transition: filter .2s ease; }
.foto-texto::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: .85; transition: opacity .2s ease, background-color .2s ease;
}
.foto-texto:hover img { filter: brightness(.92); }
.foto-texto:hover::after { opacity: 1; background-color: rgba(0,0,0,.8); }

/* galeria em tela cheia */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,10,.94); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 120px); width: auto; }
.lightbox__legenda { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: #cfd6dc; font-size: calc(14px + var(--fonte-extra)); }
.lightbox button { position: absolute; border: 0; background: rgba(255,255,255,.1); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: calc(26px + var(--fonte-extra)); line-height: 1; }
.lightbox button:hover { background: rgba(255,255,255,.22); }
.lightbox__fechar { top: 18px; right: 18px; }
.lightbox__ant { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__prox { right: 20px; top: 50%; transform: translateY(-50%); }

/* compartilhar no fim da matéria */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: var(--bloco) 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.share-bar__label { font: 700 calc(13px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-right: 4px; }
.share-bar a, .share-bar button {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 20px;
  font: 500 calc(14px + var(--fonte-extra))/1 var(--font); color: #fff;
}
.share-bar svg { width: 16px; height: 16px; fill: currentColor; }
.share-bar .wa { background: #25d366; } .share-bar .fb { background: #1877f2; } .share-bar .x { background: #111; }
.share-bar .cp { background: var(--bg-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.share-bar .cp.is-done { background: #2e9d57; color: #fff; box-shadow: none; }
.share-bar a:hover { color: #fff; filter: brightness(1.08); }

/* mais notícias no fim da página */
.mais-noticias { margin-top: 8px; }
.mais-noticias .grid-3 { row-gap: var(--bloco); }
.mais-noticias .card h3 { font-size: calc(18px + var(--fonte-extra)); }

/* --------------------------------------------------------------------------
   Lista de seção
   -------------------------------------------------------------------------- */
/* cabeçalho da seção: nome grande + descrição, linha na cor da editoria (a mesma do menu) */
.section-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: var(--bloco); border-bottom: 3px solid var(--c, var(--c-noticias)); }
.section-head h1 { font-size: calc(34px + var(--fonte-extra)); line-height: 1.1; text-transform: uppercase; }
.section-head span, .section-head p { color: var(--muted); font: 400 calc(16px + var(--fonte-extra))/1.4 var(--font-title); }

/* primeira notícia da seção em destaque */
.feed-lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.feed-lead h2 { font-size: calc(30px + var(--fonte-extra)); line-height: 1.12; }
.feed-lead h2 a:hover { color: var(--link-hover); }
.feed-lead .sub { font-size: calc(18px + var(--fonte-extra)); margin: 12px 0; }

/* lista */
.feed { display: flex; flex-direction: column; }
.feed__item { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.feed__item .thumb { aspect-ratio: 16 / 9; }
.feed__item h2 { font-size: calc(22px + var(--fonte-extra)); line-height: 1.18; }
.feed__item h2 a:hover { color: var(--link-hover); }
.feed__item .sub { font-size: calc(16px + var(--fonte-extra)); margin: 8px 0; }
.feed .ad { margin: var(--bloco) auto; }
/* item sem linha fina: data logo abaixo do título, com 8px de espaço */
.feed__item h2 + .date, .feed-lead h2 + .date { display: block; margin-top: 8px; }

/* item sem foto (comum em Publicações Legais: editais, atas, comunicados):
   quadro claro na cor da editoria com ícone de documento, para a lista continuar alinhada */
.thumb--doc { display: grid; place-items: center; background: #eef5e6; color: var(--c, var(--c-legais, #6faa12)); }
.thumb--doc svg { width: 26px; height: 26px; }

/* Publicações Legais: todas do mesmo tamanho (sem destaque) e com imagem menor (160x90) */
.feed--legais .feed__item { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
.feed--legais .feed__item:first-child { padding-top: 0; }
.feed--legais .tag { background: var(--c, #6faa12); }   /* etiqueta verde de Publicações Legais */

/* --------------------------------------------------------------------------
   Páginas de conteúdo (Caçador - SC): menu interno entre as páginas da área
   -------------------------------------------------------------------------- */
/* etiqueta da área na cor dela (amarelo), com texto escuro para dar leitura */
.tag--area { background: var(--c, #e0c436); color: var(--ink); }

/* as páginas da área numa faixa cinza clara; a atual em branco (sem linhas) */
.pagina-nav { display: flex; gap: 4px; padding: 4px; margin: 24px 0 32px; background: var(--bg-soft); overflow-x: auto; scrollbar-width: none; }
.pagina-nav::-webkit-scrollbar { display: none; }
.pagina-nav a { flex: none; padding: 11px 16px; font: 500 calc(14px + var(--fonte-extra))/1 var(--font); color: var(--muted); white-space: nowrap; }
.pagina-nav a:hover { color: var(--ink); }
.pagina-nav a[aria-current] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.body-text .img-centro { display: block; margin: 1.4em auto; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Anuncie conosco
   -------------------------------------------------------------------------- */
.tag--anuncie { background: #e2412b; }
.anuncie-texto { margin-top: 18px; }

/* por que anunciar: 3 pontos */
/* texto → quadros: --bloco a partir do fim das letras (o último parágrafo perde a margem
   e a entrelinha alta do texto, ~0,5em abaixo da linha de base, é descontada) */
.anuncie-texto p:last-child { margin-bottom: -.5em; }
.anuncie-pontos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: var(--bloco) 0 8px; }
.anuncie-ponto { padding: 20px; background: var(--bg-soft); }
.anuncie-ponto strong { display: block; font: 700 calc(22px + var(--fonte-extra))/1.15 var(--font-title); color: var(--ink); margin-bottom: 6px; }
.anuncie-ponto span { font-size: calc(14px + var(--fonte-extra)); line-height: 1.5; color: var(--muted); }

/* --------------------------------------------------------------------------
   Contato: um quadro por área (mesmo cinza dos quadros do Anuncie)
   -------------------------------------------------------------------------- */
.contatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 24px; }
.contato { padding: 22px; background: var(--bg-soft); }
.contato__area { font: 500 calc(12px + var(--fonte-extra))/1.2 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.contato__link { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: calc(17px + var(--fonte-extra)); font-weight: 500; color: var(--ink); word-break: break-word; }
.contato__link:hover { color: var(--link-hover); }
.contato__link svg { width: 18px; height: 18px; flex: none; fill: currentColor; color: var(--muted); }
.contato__link:hover svg { color: inherit; }
.contato-nota { font-size: calc(16px + var(--fonte-extra)); color: var(--text); }
.contato-nota a { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Eventos (agenda e página do evento). Cor laranja de Eventos do site atual.
   -------------------------------------------------------------------------- */
.tag--evento { background: #faa020; color: var(--ink); }
.agenda-topo { display: flex; justify-content: flex-end; margin: -16px 0 20px; }
.agenda-topo a { font-size: calc(14px + var(--fonte-extra)); font-weight: 500; color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* mês: mesma faixa cinza clara do obituário */
.agenda-mes { margin-bottom: 24px; }
.agenda-mes__head { padding: 10px 14px; background: var(--bg-soft); font: 500 calc(12px + var(--fonte-extra))/1.2 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.agenda-vazio { padding: 14px; font-size: calc(15px + var(--fonte-extra)); color: var(--muted); }

/* evento na agenda: dia em destaque + título + local/horário/cidade */
.evento-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; }
.evento-row__dia { text-align: center; line-height: 1; }
.evento-row__dia strong { display: block; font: 700 calc(30px + var(--fonte-extra))/1 var(--font-title); color: var(--ink); }
.evento-row__dia span { display: block; margin-top: 4px; font: 500 calc(11px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.evento-row h2 { font-size: calc(19px + var(--fonte-extra)); line-height: 1.25; }
.evento-row h2 a:hover { color: var(--link-hover); }
.evento-row__meta { margin-top: 6px; font-size: calc(14px + var(--fonte-extra)); color: var(--muted); }

/* página do evento: quadro com data, horário, local e cidade */
.evento-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 24px 0 28px; padding: 20px 22px; background: var(--bg-soft); }
.evento-info dt { font: 500 calc(12px + var(--fonte-extra))/1.2 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.evento-info dd { margin: 0; font-size: calc(17px + var(--fonte-extra)); font-weight: 500; color: var(--ink); }
.nota-prototipo { font-size: calc(14px + var(--fonte-extra)); color: var(--muted); margin-top: 8px; }

/* lista de textos de coluna: igual à da seção, mas com a foto do colunista no tamanho real (90x80) */
.feed--colunas .feed__item { grid-template-columns: 90px minmax(0, 1fr); }
.feed--colunas .feed__item .thumb { aspect-ratio: 9 / 8; }
.feed--colunas .feed__item:first-child { padding-top: 0; }
.feed--colunas .tag { background: var(--c, var(--c-colunas)); }   /* etiqueta vermelha das colunas */
.feed--colunas .date { display: block; margin-top: 8px; }

/* paginação (endereço próprio: ?pagina=N) */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: var(--bloco) 0 8px; }
.pager a, .pager span { min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 14px; font-weight: 500; }
.pager a { border: 1px solid var(--line); }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager a.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .pager__gap { color: var(--muted); min-width: 24px; padding: 0; }
.pager .is-disabled { color: #b8c1c8; border: 1px solid var(--line); pointer-events: none; }
.pager-info { text-align: center; font-size: calc(13px + var(--fonte-extra)); color: var(--muted); }

/* --------------------------------------------------------------------------
   Colunas
   -------------------------------------------------------------------------- */
/* As fotos dos colunistas são pequenas (90x80): nunca mostrar maior que isso. */
.avatar { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bg-soft); }

/* autor no topo, junto da data (como "Por Fulano" na notícia) */
.meta--autor .meta__info { flex-direction: row; align-items: center; gap: 12px; }
.meta--autor .avatar { width: 44px; height: 44px; flex: none; }
.meta--autor .meta__info > div { display: flex; flex-direction: column; gap: 3px; }

/* quadro do autor no fim do texto (como no site atual) */
.autor-box { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: var(--bloco); padding: 24px; background: var(--bg-soft); }
.autor-box__foto { width: 90px; height: 80px; object-fit: cover; object-position: top; display: block; }
.autor-box__rotulo { font: 500 calc(12px + var(--fonte-extra))/1.2 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.autor-box__nome { font: 700 calc(22px + var(--fonte-extra))/1.2 var(--font-title); color: var(--ink); margin: 6px 0 2px; }
.autor-box__coluna { font-size: calc(14px + var(--fonte-extra)); color: var(--muted); margin-bottom: 10px; }
.autor-box__bio { font-size: calc(15px + var(--fonte-extra)); line-height: 1.6; color: var(--text); }
.autor-box__email { display: inline-block; margin-top: 10px; font-size: calc(14px + var(--fonte-extra)); color: var(--link-hover); }

/* "Mais colunas": últimos textos de todos os colunistas */
.colunas-lista li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.colunas-lista li:first-child { padding-top: 0; }
.colunas-lista h3 { font-size: calc(18px + var(--fonte-extra)); line-height: 1.25; }
.colunas-lista h3 a:hover { color: var(--link-hover); }
.colunas-lista .date { display: block; margin-top: 6px; }

/* --------------------------------------------------------------------------
   Obituário (página)
   -------------------------------------------------------------------------- */
/* O cadastro tem só nome, data e idade (tabela obituario: nmObito, dtObito, nrIdade).
   A página lista os últimos 30 dias, agrupados por dia, sem link e sem detalhe. */
/* Dia em uma faixa cinza clara; nomes sem linhas entre eles (menos linhas na página) */
.obit-day { margin-bottom: 24px; }
.obit-day__head { padding: 10px 14px; background: var(--bg-soft); }
/* o dia é um rótulo (menor, cinza, espaçado) para não competir com o nome da pessoa */
.obit-day__date { font: 500 calc(12px + var(--fonte-extra))/1.2 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.obit-day__date span { font-weight: 400; margin-left: 8px; }
.obit-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 14px; }
.obit-row__nome { font: 700 calc(17px + var(--fonte-extra))/1.3 var(--font-title); color: var(--ink); text-transform: uppercase; letter-spacing: .01em; }
.obit-row__idade { font-size: calc(15px + var(--fonte-extra)); color: var(--muted); white-space: nowrap; }
.obit-nota { font-size: calc(14px + var(--fonte-extra)); color: var(--muted); margin-top: 8px; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: #d5dbe0; margin-top: var(--bloco); }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 28px; padding: 48px 15px 12px; }
.footer h2 { margin-bottom: 16px; }
/* etiqueta colorida no título do grupo (como o cat-btn do rodapé atual) */
.footer__tag {
  display: inline-block; background: var(--c); color: #fff; border-radius: var(--radius);
  font: 700 calc(12px + var(--fonte-extra))/1 var(--font-title); text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 9px 5px; white-space: nowrap;
}
/* sem efeito no hover: a etiqueta fica igual (anula o a:hover geral) */
a.footer__tag:hover { color: #fff; }
.footer__tag--escuro, a.footer__tag--escuro:hover { color: var(--ink); }
.footer li { margin-bottom: 10px; font-size: calc(14px + var(--fonte-extra)); }
.footer li a { transition: color .15s ease; }
.footer li a:hover { color: var(--h, #fff); text-decoration: underline; text-underline-offset: 3px; }
.footer__noticias ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.footer__portal h2 { margin-bottom: 12px; }

/* logo e frase à esquerda, redes sociais à direita */
.footer__brand { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid rgba(255,255,255,.08); }
.footer__marca img { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 8px; }
.footer__marca p { font-size: calc(13px + var(--fonte-extra)); line-height: 1.5; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .15s ease, filter .15s ease; }
.footer__social a:hover { transform: translateY(-2px); filter: brightness(1.1); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__social .fb { background: #1877f2; }
.footer__social .x { background: #000; }
.footer__social .rss { background: #f26522; }
.footer__social .mail { background: #e2412b; }
.footer__bottom { background: var(--black); color: #8d97a0; font-size: calc(12px + var(--fonte-extra)); text-transform: uppercase; letter-spacing: .05em; }
.footer__bottom .container { min-height: 58px; display: flex; align-items: center; justify-content: center; text-align: center; }
.footer__bottom p { margin: 0; }

/* ==========================================================================
   ANÚNCIOS
   Os espaços reservam exatamente o tamanho que o DFP entrega em cada
   largura de tela (sizeMapping atual), para o layout não "pular".
   Sem o rótulo "Publicidade".
   ========================================================================== */
.ad { display: flex; flex-direction: column; align-items: center; margin: var(--bloco) auto; width: 100%; }
.ad__slot {
  position: relative; display: grid; place-items: center; text-align: center; max-width: 100%;
  background: repeating-linear-gradient(135deg, #f1f4f7 0 10px, #e9eef2 10px 20px);
  outline: 1px dashed #b8c4ce; outline-offset: -1px; color: #5f7282;
}
.ad__slot > span { font: 500 calc(11px + var(--fonte-extra))/1.35 var(--font); padding: 4px 8px; }
.ad__slot > span b { display: block; font-size: calc(12px + var(--fonte-extra)); color: #34495a; }
.ad__slot > span i { font-style: normal; }
.ad__slot--gpt   { --kind: "DFP"; }
.ad__slot--ads   { --kind: "AdSense"; background: repeating-linear-gradient(135deg, #fff8e8 0 10px, #fdf0d2 10px 20px); outline-color: #e6c77b; }
.ad__slot--own   { --kind: "Próprio"; background: repeating-linear-gradient(135deg, #eef7ee 0 10px, #e2f1e2 10px 20px); outline-color: #93c793; }
.ad__slot::before {
  content: var(--kind); position: absolute; top: 4px; left: 4px;
  font: 700 calc(9px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 5px; background: rgba(255,255,255,.85); color: #5f7282;
}

/* tamanhos fixos */
.s-300x250 { width: 300px; height: 250px; }
/* moldura do site atual (.div-pub-quadrado): 11px de #eff3f6 → 300x250 vira 322x272 e 300x600 vira 322x622 */
.ad.ad--moldura { width: fit-content; max-width: 100%; box-sizing: border-box; padding: 11px; background: #eff3f6; }
.s-300x600 { width: 300px; height: 600px; }
.s-320x100 { width: 320px; height: 100px; }

/* mapLeader: 0–479 → 320x100 · 480–767 → 468x60 · 768+ → 728x90 */
.s-leader { width: 320px; height: 100px; }
.s-leader .sz::after { content: "320×100"; }
@media (min-width: 480px) { .s-leader { width: 468px; height: 60px; } .s-leader .sz::after { content: "468×60"; } }
@media (min-width: 768px) { .s-leader { width: 728px; height: 90px; } .s-leader .sz::after { content: "728×90"; } }

/* mapLeaderLitle (duplo): sempre 320x100 */
.s-duplo { width: 320px; height: 100px; }
.s-duplo .sz::after { content: "320×100"; }
/* celular (tela abaixo de 480px): o Duplo pede só 320x50 (ver anuncios.js), o espaço acompanha */
@media (max-width: 479px) { .s-duplo { height: 50px; } .s-duplo .sz::after { content: "320×50"; } }

/* AdSense responsivo: ocupa a largura disponível */
.s-fluid-90  { width: 100%; height: 90px; }
.s-fluid-280 { width: 100%; height: 280px; }
.s-fluid-280 .sz::after, .s-fluid-90 .sz::after { content: "responsivo"; }
@media (max-width: 767px) { .s-fluid-280 { height: 250px; } }

.ad-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--bloco) 20px; justify-items: center; margin: var(--bloco) 0; }
.ad-duplo .ad { margin: 0; }
/* Banners da capa com linha cinza embaixo (NovoSuperCentral e Duplos):
   bloco de cima → --bloco → banner → --bloco → linha → --bloco → bloco de baixo. */
.ad.ad--linha-abaixo { margin-bottom: 0; padding-bottom: var(--bloco); border-bottom: 1px solid var(--line); }
.ad-duplo.ad--linha-abaixo { padding-bottom: var(--bloco); border-bottom: 1px solid var(--line); }  /* o margin-bottom do .ad-duplo dá o vão depois da linha */
/* Banner com linha embaixo, solto na coluna (Novo-Super-Central da capa):
   bloco de cima → --bloco → banner → --bloco → linha → --bloco → bloco de baixo. */
.ad.ad--linha-depois { padding-bottom: var(--bloco); border-bottom: 1px solid var(--line); }

/* banners próprios da barra lateral: 7 no desktop, 5 no celular (regra atual) */
.own-list { display: flex; flex-direction: column; align-items: center; gap: 24px; }   /* era 16px */
.own-list .ad { margin: 0; }

/* ==========================================================================
   Barra do protótipo (navegar entre as páginas; não vai para produção).
   × oculta a barra e deixa só o botão "Páginas" no canto.
   ========================================================================== */
.proto {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(31,31,31,.94); color: #fff; font-size: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
  max-width: calc(100vw - 16px); overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.proto::-webkit-scrollbar { display: none; }
.proto a, .proto button { padding: 7px 12px; border-radius: 999px; color: #d6dde3; background: none; border: 0; font-size: 12px; }
.proto a:hover, .proto button:hover { background: rgba(255,255,255,.1); color: #fff; }
.proto a.is-on { background: #fff; color: var(--ink); font-weight: 500; }
.proto__sep { width: 1px; height: 18px; background: rgba(255,255,255,.2); margin: 0 4px; flex: none; }
.proto__url { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #9fd3ff; padding: 0 10px; }
/* × fica fixo na ponta direita mesmo quando a barra rola para o lado (celular) */
.proto .proto__fechar { flex: none; font-size: 18px; line-height: 1; padding: 4px 11px 6px; position: sticky; right: 0; background: rgba(31,31,31,.98); }
.proto-abrir {
  display: none; position: fixed; right: 12px; bottom: 14px; z-index: 100; padding: 8px 14px; border: 0; border-radius: 999px;
  background: rgba(31,31,31,.94); color: #fff; font-size: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
body.proto-oculto .proto { display: none; }
body.proto-oculto .proto-abrir { display: block; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1199px) {
  :root { --gap: 32px; --space: 24px; }
  .nav__item > a, .nav__item > button { padding: 0 9px; font-size: calc(12px + var(--fonte-extra)); letter-spacing: .01em; }
  .nav__item--home > a { padding: 0 10px; }
  .nav__list { margin-left: -10px; }
  .nav__anuncie { padding: 0 12px; }
  .nav.is-stuck .nav__brand { width: 0; opacity: 0; margin: 0; }
  .nav.is-stuck .nav__item--home { display: flex; }  /* sem logo no menu nessa largura: a casinha fica */
  .nav.is-stuck .nav__list { margin-left: -10px; }
}

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__noticias { grid-column: 1 / -1; }
  /* Anuncie, Obituário, Publicações Legais e Contato numa linha só, depois dos grupos */
  .footer__portal { grid-column: 1 / -1; order: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .footer__portal h2 { margin: 0; }
  .footer__noticias ul { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  /* Mais lidas no tablet: as 2 listas lado a lado (alinhadas por linha), banner quadrado embaixo */
  .mais-lidas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto) auto; }
  .mais-lidas > .ad { grid-column: 1 / -1; grid-row: 4; margin-top: var(--bloco); }
  .layout, .band__grid { grid-template-columns: minmax(0, 1fr); }
  /* lateral embaixo do conteúdo, separada por uma linha: --bloco antes e depois dela */
  .layout, .band__grid { row-gap: var(--bloco); }
  .sidebar { padding-top: var(--bloco); border-top: 1px solid var(--line); }
  .band__grid > [data-gpt] { justify-self: center; }

  /* menu: faixa de editorias rolável + gaveta pelo botão ☰ */
  /* laterais com a mesma largura: o logo fica sempre no centro */
  .masthead .container { grid-template-columns: 56px 1fr 56px; min-height: 50px; }
  .masthead__burger, .masthead__contato { display: block; }
  .masthead__logo { justify-self: center; }
  .masthead__date { display: none; }
  /* celular: ao rolar, fica preso no topo o cabeçalho com ☰ + logo (e não a faixa de editorias) */
  .masthead { position: sticky; top: 0; z-index: 60; transition: box-shadow .2s ease; }
  .masthead.is-stuck { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  .nav { position: static; }
  .nav__bar { height: 50px; padding: 0; }   /* celular e tablet: 50px, igual à faixa do logo */
  .nav__brand, .nav__item--drop, .nav__actions { display: none; }
  /* margin -12px: a casinha (com 12px de cada lado) fica alinhada com o conteúdo */
  .nav__list, .nav.is-stuck .nav__list { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 12px 0 0; margin-left: -12px; }
  .nav__list::-webkit-scrollbar { display: none; }
  .nav__item > a { padding: 0 12px; font-size: calc(12px + var(--fonte-extra)); }
  .nav__item, .nav__item svg { flex-shrink: 0; }   /* na faixa rolável nada encolhe (o iPhone cortava a casinha) */
  /* casinha sempre visível no canto esquerdo: as editorias rolam por baixo dela */
  .nav__item--home, .nav.is-stuck .nav__item--home { display: flex; position: sticky; left: 0; z-index: 1; background: var(--nav-bg); }
  .nav__item--home > a { padding: 0 12px; }   /* sublinhado da página atual centralizado embaixo da casinha */
}

@media (max-width: 767px) {
  :root { --bloco: 32px; --fonte-extra: 1px; }   /* espaço vertical padrão e fontes 1px maiores no celular */
  .container { padding: 0 16px; }
  .topbar { display: none; }
  .dest { grid-template-columns: minmax(0, 1fr); }
  /* ordem no celular: manchete → foto principal → Novo-Retangulo-Medio-1 → 2 notícias */
  .dest > .ad, .dest > .slot-celular { order: 1; }   /* banner logo após a foto principal (hoje o Novo-Retangulo-Medio-1) */
  .ad.ad--so-celular { display: flex; }
  .ad.ad--so-desktop { display: none; }   /* escondido no celular: o anuncios.js nem pede o anúncio */
  .dest__side { order: 2; }
  .dest__side .card + .card { padding-top: 0; border-top: 0; }     /* sem linha entre as notícias com foto */
  /* as 2 notícias: uma embaixo da outra, iguais à foto principal (etiqueta e título
     brancos dentro da foto, sobre o degradê escuro). Tudo na mesma célula do grid:
     a foto ocupa as 3 linhas; etiqueta e título ficam nas 2 de baixo. */
  .dest__side .card { display: grid; grid-template-rows: 1fr auto auto; position: relative; }
  .dest__side .card > .thumb { grid-area: 1 / 1 / -1 / 2; margin-bottom: 0; }
  .dest__side .card::after {
    content: ""; grid-area: 1 / 1 / -1 / 2; pointer-events: none;
    position: relative;   /* a .thumb é position: relative; sem isso a foto ficaria por cima do degradê */
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 40%, rgba(0,0,0,.45) 70%, rgba(0,0,0,0) 100%);
  }
  .dest__side .card > .tag { grid-area: 2 / 1; justify-self: start; margin: 0 18px; position: relative; z-index: 1; }
  .dest__side .card h3:last-child { grid-area: 3 / 1; margin: var(--tag-gap) 18px 26px; position: relative; z-index: 1;
    font-size: calc(21px + var(--fonte-extra)); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .dest__side .card h3 a, .dest__side .card h3 a:hover { color: #fff; }
  .manchete h2 { font-size: calc(29px + var(--fonte-extra)); }
  .overlay__caption { padding: 90px 18px 26px; }
  .overlay__caption h2 { font-size: calc(21px + var(--fonte-extra)); }
  .grid-2, .grid-3, .hitems, .list--2col { grid-template-columns: minmax(0, 1fr); }
  .list--2col li:nth-child(2) { padding-top: 16px; }
  /* celular: Últimas notícias e, embaixo, a Foto do Dia */
  .ultimas-foto { grid-template-columns: minmax(0, 1fr); row-gap: var(--bloco); }
  /* Mais lidas no celular: 1–3, banner, 4–6, um embaixo do outro (--bloco entre eles) */
  .mais-lidas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--bloco); }
  .mais-lidas > .list { grid-row: auto; display: flex; }
  .mais-lidas > .ad { grid-column: auto; grid-row: auto; margin-top: 0; }
  .grid-3 .card { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
  .grid-3 .card > .thumb { margin-bottom: 0; }
  .card h3 { font-size: calc(18px + var(--fonte-extra)); }
  .hitem { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .ad-duplo { grid-template-columns: 1fr; }
  /* celular: sem linha embaixo dos banners da capa (NovoSuperCentral, Duplos, Novo-Super-Central);
     fica só o --bloco entre o banner e o bloco seguinte */
  .ad.ad--linha-abaixo, .ad.ad--linha-depois, .ad-duplo.ad--linha-abaixo { padding-bottom: 0; border-bottom: 0; }
  /* celular: lateral (que cai para baixo do conteúdo) sem a linha em cima, em todas as páginas;
     fica só o --bloco (row-gap do .layout) entre o fim do conteúdo e o 1º item da lateral */
  .sidebar { padding-top: 0; border-top: 0; }
  .article h1 { font-size: calc(29px + var(--fonte-extra)); }
  .article .sub { font-size: calc(18px + var(--fonte-extra)); }
  .body-text { font-size: calc(18px + var(--fonte-extra)); }
  .body-text blockquote { font-size: calc(20px + var(--fonte-extra)); padding-left: 18px; }
  .meta { align-items: flex-start; }
  .figure figcaption { flex-direction: column; gap: 4px; }
  .lightbox img { max-width: 100vw; max-height: calc(100vh - 140px); }
  .lightbox__ant, .lightbox__prox { top: auto; bottom: 56px; transform: none; }
  .share-bar { gap: 8px; }
  .share-bar__label { width: 100%; margin-bottom: 4px; }
  .share-bar a, .share-bar button { padding: 0 14px; }
  .feed__item { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .feed__item h2 { font-size: calc(18px + var(--fonte-extra)); margin: 8px 0 0; }
  .feed__item .sub { display: none; }
  .feed-lead { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
  .feed--legais .feed__item { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .anuncie-pontos, .contatos { grid-template-columns: minmax(0, 1fr); }
  .evento-info { grid-template-columns: minmax(0, 1fr); }
  .agenda-topo { justify-content: flex-start; margin-top: -8px; }
  .feed-lead h2 { font-size: calc(24px + var(--fonte-extra)); }
  .feed-lead .sub { font-size: calc(16px + var(--fonte-extra)); }
  .section-head h1 { font-size: calc(28px + var(--fonte-extra)); }
  .pager .pager__num--far { display: none; }
  .own-list .ad:nth-child(n+6) { display: none; }
  .proto__url { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; padding: 44px 16px 4px; }
  .footer__noticias ul { grid-template-columns: 1fr 1fr; }
  .footer__brand { padding: 24px 16px 28px; flex-direction: column; text-align: center; }   /* logo, frase e redes centralizados no celular */
  /* etiquetas do rodapé no celular: Publicações Legais · Contato · Anuncie na 1ª linha, Obituário na 2ª
     (Obituário embaixo das Publicações Legais). O ::before é uma quebra de linha (flex-basis 100%);
     o espaço entre as linhas vem do margin das etiquetas. Ordem no HTML: Obituário, Publicações Legais, Contato, Anuncie. */
  .footer__portal { row-gap: 0; margin-bottom: 12px; }
  .footer__portal h2 { margin-bottom: 8px; }
  .footer__portal::before { content: ""; flex-basis: 100%; height: 0; order: 4; }
  .footer__portal h2:nth-child(2) { order: 1; }   /* Publicações Legais */
  .footer__portal h2:nth-child(3) { order: 2; }   /* Contato */
  .footer__portal h2:nth-child(4) { order: 3; }   /* Anuncie */
  .footer__portal h2:nth-child(1) { order: 5; }   /* Obituário */
  .footer__sep { display: none; }                   /* "www.cacador.net" na linha de baixo */
  .footer__site { display: block; margin-top: 4px; }
  .footer__bottom .container { padding-top: 14px; padding-bottom: 14px; }
  .autor-box { gap: 16px; padding: 18px; }
  .meta--autor .meta__info { align-items: flex-start; }
}

/* ==========================================================================
   Espaço padrão entre a etiqueta (cartola) e o título, em todos os blocos.
   Fica no fim do arquivo para valer sobre as margens de cada componente.
   ========================================================================== */
.tag + h1, .tag + h2, .tag + h3, .tag + h4 { margin-top: var(--tag-gap); }

/* ==========================================================================
   Fim do bloco = fim das letras. Um título termina ~0,25em acima da sua caixa
   (descendente + entrelinha) e a data da lista tinha ainda a linha vazia embaixo.
   Encolhendo a caixa até a linha de base, qualquer --bloco depois deles (outra
   notícia, banner, linha da lateral) fica visualmente exato, sem ajuste caso a caso.
   Quando a foto é mais alta que o texto, ela define o fim do bloco e nada muda.
   ========================================================================== */
.card h3:last-child { margin-bottom: -.3em; }       /* entrelinha 1.22 */
.textline h3:last-child { margin-bottom: -.25em; }  /* entrelinha 1.18 */
.hitem .date { display: block; line-height: 1; margin-bottom: -2px; }

/* ==========================================================================
   Banners 728x90 dentro da coluna de notícias: o tamanho segue a largura
   da coluna (não da tela). Entre 992 e 1100px de tela a coluna tem ~610px,
   então entra o 468x60 em vez de um 728x90 que passaria da borda.
   Em produção: o tamanho do slot é escolhido medindo o espaço antes de
   chamar o googletag.defineSlot.
   ========================================================================== */
.main { container-type: inline-size; }
@container (max-width: 727px) {
  .s-leader { width: 468px; height: 60px; }
  .s-leader .sz::after { content: "468×60"; }
}
@container (max-width: 467px) {
  .s-leader { width: 320px; height: 100px; }
  .s-leader .sz::after { content: "320×100"; }
}

/* ==========================================================================
   Celulares muito estreitos (até 359px, ex.: 320px): anúncios têm largura fixa
   (320/300px) e não podem encolher. Margem lateral menor, anúncios de borda a
   borda e sem a moldura cinza, para nada passar da tela.
   ========================================================================== */
@media (max-width: 359px) {
  .container { padding: 0 10px; }
  .ad, .own-list { width: auto; margin-left: -10px; margin-right: -10px; }
  .ad.ad--moldura { padding: 0; background: none; }
  .ad-duplo { margin-left: -10px; margin-right: -10px; }
}

/* ==========================================================================
   ESPAÇAMENTO PADRÃO DOS ANÚNCIOS: tudo usa --bloco (36px desktop / 32px celular)
   - No meio do conteúdo: --bloco acima e abaixo — margem do .ad.
   - Entre faixas / antes do rodapé (.ad-faixa: AdSense da capa e NovoSuperRodape):
     --bloco acima e abaixo; a margem do anúncio não soma com o espaço das faixas.
   - Lateral: --bloco entre os itens; o 1º anúncio fica alinhado com o topo do conteúdo.
   - Topo (NovoSuper1): espaço equilibrado entre o logo e o menu.
   ========================================================================== */
.ad-faixa { padding-top: calc(var(--bloco) - 12px); }   /* + 12px do fim da página = --bloco */
.ad-faixa .ad { margin-top: 0; margin-bottom: 0; }
.band:has(+ .ad-faixa) { padding-bottom: var(--bloco); }
.band + .ad-faixa { padding-top: 0; }
/* -3px: a faixa seguinte começa num .section-title, cujas maiúsculas ficam ~3px abaixo
   do topo da caixa (barra de 18px centrada no texto de 16px) — vão visível = --bloco. */
.ad-faixa + .band { padding-top: calc(var(--bloco) - 3px); }
/* AdSense da capa no computador: mais espaço acima e abaixo (24px além do --bloco) */
@media (min-width: 992px) { .ad-faixa--adsense .ad { margin-top: 24px; margin-bottom: 24px; } }

.sidebar .ad { margin-top: 0; margin-bottom: 0; }


/* ==========================================================================
   Portal.Web (produção): o que não existia no protótipo
   ========================================================================== */

/* Faixa "Urgente" (PaginaInicial2), logo abaixo do menu */
.urgente { background: #c62828; color: #fff; }
.urgente__in { display: flex; align-items: center; gap: 14px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.urgente__tipo {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: 700 calc(12px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .08em;
  background: #fff; color: #c62828; padding: 6px 10px; border-radius: var(--radius);
}
.urgente__tipo svg { width: 14px; height: 14px; fill: currentColor; }
.urgente__titulo { font: 700 calc(17px + var(--fonte-extra))/1.3 var(--font-title); }
.urgente__titulo p { margin: 0; }
.urgente__titulo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.urgente__titulo a:hover { color: #ffe08a; }
@media (max-width: 767px) {
  .urgente__in { gap: 10px; align-items: flex-start; }
  .urgente__titulo { font-size: calc(16px + var(--fonte-extra)); }
}

/* Anúncio real do Google: só reserva o tamanho (as classes s-* definem largura e altura).
   O Ad Manager às vezes entrega um criativo maior que o tamanho pedido (ex.: 728x90 no espaço
   de 320x100 do celular): o que passar da largura do espaço é cortado, sem empurrar a página. */
.ad { max-width: 100%; min-width: 0; }
.ad__gpt { max-width: 100%; overflow: hidden; }
.ad__gpt iframe { display: block; }

/* Banners próprios da lateral */
.banner-proprio { width: 320px; max-width: 100%; height: auto; }

/* Vídeo do YouTube dentro do texto (capa clicável → player) */
.video-fig { margin: 1.8em 0; }
.video-fig .video { margin: 0; cursor: pointer; }
.video.is-playing { background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fig figcaption { font-size: calc(13px + var(--fonte-extra)); color: var(--muted); padding: 10px 0 0; }
.body-text iframe:not(.video iframe) { max-width: 100%; }

/* Galeria com uma foto só: sem setas */
.lightbox--uma .lightbox__ant, .lightbox--uma .lightbox__prox { display: none; }

/* Página de erro (404 na própria URL) */
.erro { padding: 60px 15px 80px; text-align: center; max-width: 640px; }
.erro__codigo { font: 700 calc(72px + var(--fonte-extra))/1 var(--font-title); color: var(--line); margin-bottom: 8px; }
.erro h1 { font-size: calc(34px + var(--fonte-extra)); margin-bottom: 14px; }
.erro p { margin-bottom: 18px; }
.erro__voltar { display: inline-block; margin: 6px; padding: 10px 18px; background: var(--nav-btn-bg); color: #fff; font-weight: 500; border-radius: var(--radius); }
.erro__voltar:hover { color: #fff; filter: brightness(1.08); }
.erro__voltar--sec { background: var(--bg-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.erro__voltar--sec:hover { color: var(--ink); }

/* Zoom na galeria (site.js initZoom) */
.lightbox { overflow: hidden; touch-action: none; }
.lightbox img { cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .2s ease; transform-origin: center; will-change: transform; }
.lightbox.is-zoom img { cursor: grab; }
.lightbox.is-arrastando img { cursor: grabbing; }
.lightbox.is-zoom .lightbox__ant, .lightbox.is-zoom .lightbox__prox, .lightbox.is-zoom .lightbox__legenda { opacity: 0; pointer-events: none; }

/* Seção: notícia sem foto (comum nas antigas) ocupa a linha toda */
.feed__item--sem-foto { grid-template-columns: minmax(0, 1fr) !important; }
.feed-lead--sem-foto { grid-template-columns: minmax(0, 1fr); }

/* paginação no celular: só as setas, para caber numa linha */
.pager .pager__txt { display: contents; }
@media (max-width: 479px) { .pager .pager__txt { display: none; } }

/* Evento que já aconteceu / voltar para a agenda */
.evento-passado { margin: 16px 0 0; padding: 12px 14px; background: #fff6e5; border-left: 4px solid #faa020; font-size: calc(15px + var(--fonte-extra)); color: var(--ink); }
.evento-passado a { color: var(--link-hover); text-decoration: underline; }
.evento-voltar { margin-top: var(--bloco); font-size: calc(15px + var(--fonte-extra)); }
.evento-voltar a { color: var(--link-hover); font-weight: 500; }

/* Tabelas dentro do texto (ex.: Telefones úteis): ocupam a largura da coluna e quebram a linha no celular */
.body-text table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: calc(17px + var(--fonte-extra)); }
.body-text td, .body-text th { padding: 7px 12px 7px 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.body-text td:last-child, .body-text th:last-child { padding-right: 0; }
.body-text td.tel { white-space: nowrap; }   /* telefone curto não quebra no meio (marcado pelo TextoNoticia) */
.body-text .tabela { max-width: 100%; overflow-x: auto; margin: 0 0 1.2em; }
.body-text .tabela table { margin: 0; }
@media (max-width: 767px) { .body-text table { font-size: calc(15px + var(--fonte-extra)); } }

/* garantia: palavra ou endereço muito longo no texto quebra em vez de passar da tela */
.body-text { overflow-wrap: break-word; }

/* ==========================================================================
   Foto do Dia e Charges (galerias): destaque + grade; clique abre a galeria com zoom
   ========================================================================== */
.galeria-destaque { margin: 0 0 var(--bloco); }
.galeria-destaque .foto-texto { display: block; text-align: center; background: var(--bg-soft); }
.galeria-destaque .foto-texto img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; }
.galeria-destaque figcaption { padding: 14px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.galeria-destaque__texto { font-size: calc(17px + var(--fonte-extra)); line-height: 1.55; color: var(--ink); }
.galeria-destaque__texto p { margin: 0 0 .6em; }
.galeria-destaque__meta { margin-top: 6px; font-size: calc(13px + var(--fonte-extra)); color: var(--muted); }

.galeria-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.galeria-grade .foto-texto { display: block; aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; }
.galeria-grade .foto-texto img { width: 100%; height: 100%; object-fit: cover; }
.galeria-grade__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: calc(13px + var(--fonte-extra)); color: var(--muted); }
.galeria-grade__meta span { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991px) { .galeria-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .galeria-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }

/* ==========================================================================
   Previsão do tempo (5 dias, INMET)
   ========================================================================== */
.previsao { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.previsao-dia { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.previsao-dia__topo h2 { font-size: calc(18px + var(--fonte-extra)); }
.previsao-dia__topo span { font: 400 calc(14px + var(--fonte-extra))/1 var(--font); color: var(--muted); margin-left: 6px; }
.previsao-dia__principal { display: flex; align-items: center; gap: 14px; }
.previsao-dia__ico { font-size: 44px; line-height: 1; }
.previsao-dia__temp { display: flex; flex-direction: column; font: 700 calc(24px + var(--fonte-extra))/1.1 var(--font-title); }
.previsao-dia__resumo { font-size: calc(15px + var(--fonte-extra)); color: var(--ink); min-height: 2.6em; }
.previsao-periodos { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.previsao-periodos li { display: grid; grid-template-columns: 52px 24px minmax(0, 1fr); align-items: center; font-size: calc(14px + var(--fonte-extra)); }
.previsao-periodos li span:first-child { color: var(--muted); font-weight: 500; }
.previsao-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.previsao-dados dt { font: 500 calc(11px + var(--fonte-extra))/1.2 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.previsao-dados dd { margin: 2px 0 0; font-size: calc(14px + var(--fonte-extra)); color: var(--ink); }

/* alinhamento escolhido no editor (ou vindo do conteúdo antigo), convertido em classe pelo TextoNoticia */
.body-text .texto-centro { text-align: center; }
.body-text .texto-direita { text-align: right; }

/* sublinhado do editor: na cor do texto, linha fina e afastada (link é azul, não se confunde) */
.body-text u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: #8d99a3; }
.body-text a u { text-decoration: none; }

/* Foto no texto com crédito (botão "Inserir foto" do admin): <figure><img><figcaption>crédito</figcaption></figure> */
.body-text figure:not(.video-fig) { margin: 1.4em 0; text-align: center; }
.body-text figure:not(.video-fig) img { margin-left: auto; margin-right: auto; }
.body-text figure:not(.video-fig) figcaption { margin-top: 8px; font-size: calc(13px + var(--fonte-extra)); line-height: 1.4; color: var(--muted); }

/* Crédito na linha de baixo da foto, no mesmo parágrafo (<p>foto<br>crédito</p>) */
.body-text .foto-credito { display: inline-block; margin-top: 6px; font-size: calc(13px + var(--fonte-extra)); line-height: 1.4; color: var(--muted); }

/* Páginas de seção, colunas e agenda: as etiquetas com a cor da área (Esporte verde-água, Política e Colunas vermelhas, Eventos laranja...) */
.main--secao .tag { background: var(--c); color: var(--c-texto, #fff); }

/* Capa e página da notícia: cor do hover dos títulos (e dos links do texto da notícia). Os títulos brancos sobre a foto continuam brancos. */
.page--capa, .page--noticia { --link-hover: #046dc7; }
/* "Leia também" da notícia: barra no azul das etiquetas (antes pegava a cor da seção) */
.page--noticia .leia { border-left-color: var(--tag); }
/* Listas de colunas (página do colunista e "Mais colunas" no fim do texto): hover na cor das colunas */
.feed--colunas, .colunas-lista { --link-hover: var(--c-colunas); }
/* Anúncio "layer" da capa (ligado no admin). Computador: 500x350 por cima da capa, perto do topo, com botão
   fechar (como o site antigo). Celular (< 992px): o layer some e entra o banner 242x80 dentro da página. */
.s-500x350 { width: 500px; height: 350px; }
.s-242x80 { width: 242px; height: 80px; }
.page--capa { position: relative; }
.layer { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 50; background: #fff;
  border: 1px solid #2f2f2f; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.layer .ad { margin: 0; }
.layer__fechar { position: absolute; right: -1px; bottom: 100%; display: flex; align-items: center; gap: 6px;
  background: #2f2f2f; color: #fff; border: 0; border-radius: 4px 4px 0 0; padding: 6px 12px;
  font: 700 calc(12px + var(--fonte-extra))/1 var(--font); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.layer__fechar span { font-size: 18px; line-height: 0; }
.layer__fechar:hover { background: #000; }
.layer-mobile { display: none; }
@media (max-width: 991px) {
  .layer { display: none; }
  .layer-mobile { display: flex; margin: var(--bloco) auto; }
}
/* Voltar ao topo (todas as páginas): aba no canto de baixo à direita, como o #scrollUp do site antigo.
   Cinza; no hover fica no vermelho do logo e um pouco mais alta. Aparece depois de rolar. */
.topo-btn {
  position: fixed; right: 20px; bottom: 0; z-index: 40; width: 46px; height: 32px; display: grid; place-items: center;
  background: #cfd4d8; color: #4f5257; border: 0; border-radius: 8px 8px 0 0; box-shadow: 0 0 10px rgba(0,0,0,.08);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(100%);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, height .2s ease, background-color .2s ease, color .2s ease;
}
.topo-btn.is-visivel { opacity: 1; visibility: visible; transform: none; }
.topo-btn svg { width: 22px; height: 22px; transform: rotate(180deg); }
.topo-btn:hover, .topo-btn:focus-visible { background: var(--nav-accent); color: #fff; height: 40px; }
@media (max-width: 767px) { .topo-btn { right: 12px; } }
@media print { .topo-btn { display: none; } }
/* destaque com foto: título menor no tablet (no celular continua 21px) */
@media (max-width: 991px) { .overlay__caption h2 { font-size: calc(28px + var(--fonte-extra)); } }
@media (max-width: 767px) { .overlay__caption h2 { font-size: calc(21px + var(--fonte-extra)); } }