/* =====================================================================
   PORTAL NOTÍCIA 2.0 — TEMPLATE DE PORTAL DE NOTÍCIAS
   Arquivo: style.css
   Organização: Reset > Variáveis > Base > Topbar > Header > Menu >
                Destaque > Cards > Categorias > Sidebar > Anúncios >
                Footer > Utilitários > Responsivo
   ===================================================================== */


/* =====================================================================
   1. RESET BÁSICO
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* Garante que o atributo "hidden" sempre oculte o elemento, mesmo quando
   uma classe (ex: display:flex/grid) tem a mesma especificidade da regra
   padrão do navegador para [hidden]. Sem esta regra global, componentes
   controlados via JS (lightbox, modal do Flipbook, mensagens de erro/
   carregando, estados "sem resultados" etc.) podem ficar sempre visíveis
   mesmo com hidden="true". */
[hidden] { display: none !important; }


/* =====================================================================
   2. VARIÁVEIS DE PERSONALIZAÇÃO (:root)
   ---------------------------------------------------------------------
   ESTA É A SEÇÃO MAIS IMPORTANTE PARA ADAPTAR O TEMPLATE A CADA CLIENTE.
   Basta alterar os valores hexadecimais abaixo — nenhuma outra parte
   do CSS precisa ser tocada.

   GUIA RÁPIDO POR IDENTIDADE VISUAL:

   Cliente com logo VERMELHA  → --cor-principal: #c0272d; --cor-menu: #c0272d;
   Cliente com logo AZUL      → --cor-principal: #1657a8; --cor-menu: #1657a8;
   Cliente com logo VERDE     → --cor-principal: #1f7a4d; --cor-menu: #1f7a4d;
   Cliente com logo AMARELA   → --cor-principal: #b8860b; --cor-menu: #b8860b;
                                 (evite amarelo puro no texto/menu — contraste baixo)
   Cliente com logo LARANJA   → --cor-principal: #c15a1f; --cor-menu: #c15a1f;
   Cliente com logo ROXA      → --cor-principal: #5b3a8a; --cor-menu: #5b3a8a;

   Dica: --cor-principal é usada em tags de categoria, links ativos,
   botões e detalhes de destaque. --cor-menu é o fundo do menu principal.
   Se preferir um menu neutro (cinza/preto) e cor só nos detalhes,
   basta deixar --cor-menu diferente de --cor-principal.
   ===================================================================== */
:root {

  /* --- Cores de marca (as que mais mudam entre clientes) --- */
  --cor-principal:      #1a4d8f;  /* cor de destaque: tags, links, botões, bordas ativas */
  --cor-principal-escura:#123762; /* tom mais escuro da cor principal, usado em hover */
  --cor-secundaria:      #16202b; /* cor de apoio: usada em elementos escuros (rodapé, textos fortes) */
  --cor-menu:            #16202b; /* fundo da barra de menu principal */
  --cor-menu-texto:      #f2f4f6; /* cor do texto dentro do menu principal */

  /* --- Tipografia e textos --- */
  --cor-titulo:          #12181f; /* cor dos títulos de notícias */
  --cor-texto:           #3a4249; /* cor do texto corrido / resumos */
  --cor-texto-claro:     #6b7580; /* cor de metadados (autor, data, "há 2 horas") */

  /* --- Fundos e bordas --- */
  --cor-fundo:           #ffffff; /* fundo geral do site */
  --cor-fundo-alt:       #f4f6f8; /* fundo alternativo (sidebar, seções pares) */
  --cor-fundo-card:      #ffffff; /* fundo dos cards de notícia */
  --cor-borda:           #e2e6ea; /* bordas sutis entre blocos e cards */

  /* --- Cor fixa de aviso publicitário (não recomendado alterar) --- */
  --cor-anuncio-fundo:   #eef1f4;
  --cor-anuncio-texto:   #8993a0;

  /* --- Tipografia --- */
  --fonte-titulo: "Source Serif 4", Georgia, serif;
  --fonte-texto: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  /* --- Espaçamentos e formas (base do sistema, raramente precisa mudar) --- */
  --raio-borda: 8px;
  --raio-borda-pequeno: 4px;
  --sombra-card: 0 1px 3px rgba(18, 24, 31, 0.08);
  --sombra-card-hover: 0 8px 20px rgba(18, 24, 31, 0.12);
  --largura-maxima: 1240px;
}


/* =====================================================================
   3. BASE
   ===================================================================== */
body {
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--cor-titulo); line-height: 1.2; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Foco visível para acessibilidade em navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--cor-principal);
  outline-offset: 2px;
}


/* =====================================================================
   4. TOPBAR (barra utilitária superior)
   ===================================================================== */
.topbar {
  background: var(--cor-secundaria);
  color: #cfd6dc;
  font-size: 0.8rem;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
}
.topbar__links { display: flex; gap: 18px; }
.topbar__links a { color: #cfd6dc; transition: color .15s; }
.topbar__links a:hover { color: #ffffff; }


/* =====================================================================
   5. CABEÇALHO + LOGO + BUSCA
   ===================================================================== */
.header {
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* --- LOGO: para trocar por logo do cliente, substitua o <span class="logo__mark">
   por uma <img src="logo-cliente.svg" alt="Nome do cliente"> mantendo a classe .logo --- */
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--raio-borda-pequeno);
  background: var(--cor-principal);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.1rem;
}
.logo__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  color: var(--cor-titulo);
  letter-spacing: -0.02em;
}
.logo__nome strong { color: var(--cor-principal); font-weight: 700; }

/* Redes sociais do header — coluna central da grade do cabeçalho */
.header__redes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: 0;
}
.header__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--cor-secundaria);
  background: var(--cor-fundo-alt);
  transition: background .15s, color .15s;
}
.header__redes a:hover { background: var(--cor-principal); color: #fff; }

.header__direita {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.header__busca { width: 320px; max-width: 100%; margin-left: 0; }
.header__busca form {
  display: flex;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
}
.header__busca input {
  flex: 1;
  border: none;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo-alt);
}
.header__busca input:focus { outline: none; background: #fff; }
.header__busca button {
  border: none;
  background: var(--cor-principal);
  color: #fff;
  padding: 0 16px;
  font-size: 0.95rem;
}
.header__busca button:hover { background: var(--cor-principal-escura); }

.menu__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
}
.menu__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--cor-titulo);
}


/* =====================================================================
   6. MENU PRINCIPAL
   ===================================================================== */
.menu { background: var(--cor-menu); }
.menu__lista {
  display: flex;
  gap: 4px;
}
.menu__lista a {
  display: block;
  padding: 13px 16px;
  color: var(--cor-menu-texto);
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: border-color .15s, opacity .15s;
}
.menu__lista a:hover { opacity: 0.85; }
.menu__lista a.ativo { border-bottom-color: var(--cor-principal); }

/* =====================================================================
   SUBMENU DO MENU PRINCIPAL (dropdown)
   ---------------------------------------------------------------------
   Reutilizável para qualquer item do menu: basta repetir a estrutura
   "menu__item menu__item--submenu" (div "menu__item-cabecalho" com o
   link principal + botão de abrir/fechar, e a <ul class="submenu">)
   usada no item "Notícias".
   No desktop, abre como um popover ao passar o mouse, focar com o
   teclado ou clicar no botão. No celular, funciona como um acordeão
   dentro do próprio menu vertical (sem depender de hover).
   ===================================================================== */
.menu__item--submenu {
  position: relative;
  display: flex;      /* fallback: mesmo que a <div class="menu__item-cabecalho">
                          não esteja presente no HTML, o próprio item já vira
                          uma linha flex, então o botão nunca fica "solto" */
  align-items: stretch;
}

/* Agrupa o link "Notícias" e o botão da seta na mesma linha — a seta
   fica sempre colada ao texto, tanto no desktop quanto no celular. */
.menu__item-cabecalho { display: flex; align-items: stretch; }

/* Blindagem: o link nunca deve esticar e "empurrar" o botão para longe.
   A regra geral ".menu__lista a" define display:block (para preencher
   bem a área clicável nos itens comuns do menu); dentro do item com
   submenu isso precisa ser sobrescrito, senão o link em bloco tenta
   ocupar todo o espaço livre do item flex. */
.menu__item--submenu .menu__link-principal,
.menu__item-cabecalho .menu__link-principal {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.menu__submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px; /* bem enxuto no desktop — o mobile sobrescreve com width fixo mais abaixo */
  border: none;
  background: transparent;
  color: var(--cor-menu-texto);
  opacity: 0.85;
  flex: 0 0 auto;
}
.menu__submenu-toggle:hover { opacity: 1; }
.menu__submenu-toggle svg { transition: transform .2s ease; }

.submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  box-shadow: var(--sombra-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
}
.submenu a {
  display: block;
  padding: 9px 18px;
  color: var(--cor-titulo);
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: none !important; /* sobrescreve o sublinhado ativo do menu principal */
}
.submenu a:hover { background: var(--cor-fundo-alt); color: var(--cor-principal); opacity: 1; }

.menu__item--submenu:hover .submenu,
.menu__item--submenu:focus-within .submenu,
.menu__item--submenu.aberto .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 769px) {
  .menu__submenu-toggle { padding-left: 0; margin-left: -10px; } /* margin negativo: puxa a seta ainda mais pro texto (padding não aceita valor negativo) */
  .menu__link-principal { padding-right: 0; } /* só desktop: seta colada ao texto */
  .menu__submenu-toggle svg { transform: rotate(0deg); }
  .menu__item--submenu:hover .menu__submenu-toggle svg,
  .menu__item--submenu.aberto .menu__submenu-toggle svg { transform: rotate(180deg); }
}


/* =====================================================================
   7. ÁREA DE DESTAQUE (notícia principal + secundárias)
   ===================================================================== */
.principal { padding-top: 28px; padding-bottom: 40px; }

.destaque {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.destaque__figura { position: relative; border-radius: var(--raio-borda); overflow: hidden; background: var(--cor-fundo-alt); }
.destaque__figura img { width: 100%; height: auto; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--cor-principal);
  padding: 4px 10px;
  border-radius: var(--raio-borda-pequeno);
}
.tag--categoria { position: absolute; top: 14px; left: 14px; }
.tag--pequena { margin-bottom: 6px; }

.destaque__texto { padding-top: 16px; }
.destaque__titulo {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  transition: color .15s;
}
.destaque__link:hover .destaque__titulo { color: var(--cor-principal); }
.destaque__resumo { color: var(--cor-texto); margin-bottom: 12px; font-size: 1rem; }

.meta { font-size: 0.8rem; color: var(--cor-texto-claro); display: flex; gap: 8px; }

.destaque__secundarias {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* =====================================================================
   8. CARDS DE NOTÍCIA (usados em destaques secundários e categorias)
   ---------------------------------------------------------------------
   COMO DUPLICAR UM CARD:
   Basta copiar um bloco <article class="card">...</article> completo
   (do HTML) e colar dentro da .grade-cards da categoria desejada,
   trocando imagem, título, categoria e data. A grade se ajusta
   automaticamente ao número de cards.
   ===================================================================== */
.card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }
.card__link { display: block; height: 100%; }
.card__figura img { aspect-ratio: 16/10; object-fit: cover; }
.card__texto { padding: 14px 16px; }
.card__titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cor-titulo);
  margin-bottom: 8px;
  transition: color .15s;
}
.card__link:hover .card__titulo { color: var(--cor-principal); }

/* Card horizontal (usado nas notícias secundárias do destaque) */
.card--horizontal .card__link { display: flex; gap: 12px; }
.card--horizontal .card__figura { flex-shrink: 0; width: 110px; background: var(--cor-fundo-alt); border-radius: var(--raio-borda-pequeno); overflow: hidden; }
.card--horizontal .card__figura img { width: 100%; height: auto; }
.card--horizontal .card__texto { padding: 4px 12px 4px 0; flex: 1; }
.card--horizontal .card__titulo { font-size: 0.92rem; margin-bottom: 4px; }


/* =====================================================================
   9. CATEGORIAS (grade de cards por seção)
   ===================================================================== */
.categoria { margin-bottom: 44px; }
.categoria__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--cor-principal);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.categoria__titulo { font-size: 1.4rem; font-weight: 700; }
.categoria__vertudo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-principal);
}
.categoria__vertudo:hover { text-decoration: underline; }

.grade-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


/* =====================================================================
   10. LAYOUT: CONTEÚDO + SIDEBAR
   ===================================================================== */
.conteudo-com-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.sidebar { display: flex; flex-direction: column; gap: 28px; }
.sidebar__bloco {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 18px;
}
.sidebar__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cor-borda);
}
.sidebar__texto { font-size: 0.88rem; margin-bottom: 12px; }

.lista-maislidas { display: flex; flex-direction: column; gap: 12px; }
.lista-maislidas a { display: flex; gap: 10px; align-items: flex-start; }
.lista-maislidas a:hover .lista-maislidas__num ~ span,
.lista-maislidas a:hover span:last-child { color: var(--cor-principal); }
.lista-maislidas__num {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--cor-principal);
  min-width: 20px;
}
.lista-maislidas span:last-child { font-size: 0.88rem; color: var(--cor-titulo); line-height: 1.35; }

.form-newsletter { display: flex; flex-direction: column; gap: 10px; }
.form-newsletter input {
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  font-family: var(--fonte-texto);
  font-size: 0.88rem;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: var(--raio-borda-pequeno);
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  transition: background .15s;
}
.btn--principal { background: var(--cor-principal); color: #fff; }
.btn--principal:hover { background: var(--cor-principal-escura); }


/* =====================================================================
   11. ESPAÇOS PUBLICITÁRIOS
   ===================================================================== */
.anuncio {
  background: var(--cor-anuncio-fundo);
  border: 1px dashed #c7cdd3;
  border-radius: var(--raio-borda);
  color: var(--cor-anuncio-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anuncio--topo { height: 90px; margin-bottom: 36px; }
.anuncio--meio { height: 90px; margin: 36px 0; }
.anuncio--sidebar { height: 250px; }


/* =====================================================================
   12. RODAPÉ
   ===================================================================== */
.footer { background: var(--cor-secundaria); color: #b9c2ca; margin-top: 20px; }
.footer__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 20px 36px;
}
.footer__coluna--marca .logo__nome { color: #fff; }

/* Lista de redes sociais (ícone + nome) — para adicionar/remover uma rede,
   basta duplicar ou apagar um <li> no HTML, mantendo o padrão svg + span */
.footer__lista-redes { display: flex; flex-direction: column; gap: 12px; }
.footer__lista-redes a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #b9c2ca;
  transition: color .15s;
}
.footer__lista-redes a:hover { color: #fff; }
.footer__lista-redes svg { flex-shrink: 0; }

.footer__titulo {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 16px;
  font-family: var(--fonte-texto);
}
.footer__coluna ul { display: flex; flex-direction: column; gap: 10px; }
.footer__coluna a { font-size: 0.85rem; color: #b9c2ca; transition: color .15s; }
.footer__coluna a:hover { color: #fff; }

/* Barra inferior: mesma cor de fundo do rodapé principal, separada apenas
   por uma linha fina cinza. Para mudar a cor do rodapé inteiro, basta
   alterar --cor-secundaria no :root — nenhuma cor extra é usada aqui. */
.footer__base { background: var(--cor-secundaria); border-top: 1px solid #3a434b; }
.footer__base-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 20px;
  font-size: 0.78rem;
  text-align: center;
}
.footer__base-inner a { color: #fff; text-decoration: underline; }
.footer__base-inner a:hover { color: var(--cor-principal); }


/* =====================================================================
   13. RESPONSIVO — TABLET (≤ 1024px)
   ===================================================================== */
@media (max-width: 1024px) {
  .conteudo-com-sidebar { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; overflow-x: auto; }
  .sidebar__bloco, .anuncio--sidebar { min-width: 260px; }
  .grade-cards { grid-template-columns: repeat(2, 1fr); }
  .destaque { grid-template-columns: 1fr; }
}


/* =====================================================================
   14. RESPONSIVO — MOBILE (≤ 768px)
   ===================================================================== */
@media (max-width: 768px) {
  .topbar__links a:nth-child(3) { display: none; } /* esconde "Newsletter" na topbar em telas pequenas */

  .header__inner { display: flex; flex-wrap: wrap; align-items: center; }

  /* Redes sociais: no mobile ficam na mesma linha da logo, alinhadas à direita */
  .header__redes { display: flex; order: 2; margin-left: auto; gap: 6px; }
  .header__redes a { width: 28px; height: 28px; }
  .header__redes a svg { width: 15px; height: 15px; }

  /* Linha da busca + botão de menu: passa para uma linha própria abaixo da logo */
  .header__direita { order: 3; flex-basis: 100%; width: 100%; margin-left: 0; margin-top: 10px; }
  .header__busca { order: 2; flex: 1; width: auto; margin-top: 0; }
  .menu__toggle { display: flex; order: 1; }

  .menu__lista {
    display: none;
    flex-direction: column;
  }
  .menu.aberto .menu__lista { display: flex; }
  .menu__lista a { border-bottom: 1px solid rgba(255,255,255,0.08); border-left: 3px solid transparent; }
  .menu__lista a.ativo { border-left-color: var(--cor-principal); border-bottom-color: rgba(255,255,255,0.08); }

  /* ---- Mobile: submenu em acordeão, dentro do próprio menu vertical ----
     Mesmo padrão comprovado do menu principal acima: display:none/block
     em vez de max-height, evitando qualquer sobra visual ou cálculo de
     altura — muito mais previsível entre navegadores. */
  .menu__item--submenu { flex-direction: column; align-items: stretch; } /* empilha: cabeçalho em cima, submenu embaixo */
  .menu__item-cabecalho { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .menu__item--submenu .menu__link-principal,
  .menu__item-cabecalho .menu__link-principal { flex: 1; border-bottom: none; }
  .menu__submenu-toggle { width: 46px; padding: 0; border-left: 1px solid rgba(255,255,255,0.08); }

  .submenu {
    position: static;
    display: none;           /* fechado por padrão — nada de max-height/overflow */
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: rgba(0,0,0,0.15);
  }
  .menu__item--submenu.aberto .submenu { display: block; }
  .menu__item--submenu.aberto .menu__submenu-toggle svg { transform: rotate(180deg); }
  .submenu a {
    padding: 12px 16px 12px 32px;
    font-size: 0.86rem;
    color: var(--cor-menu-texto); /* no popover desktop o fundo é claro (texto escuro);
                                      aqui o fundo é escuro, então o texto precisa ser claro */
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .submenu a:hover { background: rgba(255,255,255,0.06); color: #fff; }

  .destaque__titulo { font-size: 1.5rem; }
  .card--horizontal .card__figura { width: 90px; }

  .grade-cards { grid-template-columns: 1fr; }
  .sidebar { flex-direction: column; }
  .sidebar__bloco, .anuncio--sidebar { min-width: 0; }

  .footer__grade { grid-template-columns: 1fr; }
  .footer__base-inner { flex-direction: column; gap: 10px; text-align: center; }
}


/* =====================================================================
   15. RESPONSIVO — MOBILE PEQUENO (≤ 420px)
   ===================================================================== */
@media (max-width: 420px) {
  .logo__nome { font-size: 1.15rem; }
  .destaque__titulo { font-size: 1.3rem; }
  .anuncio--topo, .anuncio--meio { height: 70px; }
}


/* =====================================================================
   16. PÁGINA DE CONTATO
   ---------------------------------------------------------------------
   Reutiliza as classes .container, .principal, .conteudo-com-sidebar,
   .coluna-principal, .sidebar e .anuncio já usadas na index.html.
   Os estilos abaixo cobrem apenas os componentes exclusivos desta
   página: cabeçalho interno, formulário de contato e lista de
   informações de contato.
   ===================================================================== */

/* Cabeçalho simples de página interna (título + descrição) */
.pagina-cabecalho { margin-bottom: 28px; }
.pagina-cabecalho__titulo { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.pagina-cabecalho__texto { color: var(--cor-texto); font-size: 1rem; max-width: 640px; }

/* Bloco que envolve o formulário, com o mesmo padrão visual dos cards do portal */
.bloco-formulario {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 28px;
}
.bloco-formulario__titulo { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.bloco-formulario__legenda { font-size: 0.85rem; color: var(--cor-texto-claro); margin-bottom: 24px; }

.obrigatorio { color: var(--cor-principal); font-weight: 700; }
.opcional { color: var(--cor-texto-claro); font-weight: 400; font-size: 0.85em; }

/* Formulário */
.form-contato { display: flex; flex-direction: column; gap: 18px; }
.form-contato__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-contato__campo { display: flex; flex-direction: column; gap: 6px; }
.form-contato__campo--curto { max-width: 320px; }

.form-contato label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cor-titulo);
}

.form-contato input,
.form-contato select,
.form-contato textarea {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  padding: 11px 14px;
  font-family: var(--fonte-texto);
  font-size: 0.92rem;
  color: var(--cor-texto);
  background: var(--cor-fundo-alt);
}
.form-contato input:focus,
.form-contato select:focus,
.form-contato textarea:focus {
  outline: none;
  border-color: var(--cor-principal);
  background: #fff;
}
.form-contato textarea { resize: vertical; min-height: 140px; }

.btn--grande { padding: 13px 28px; font-size: 0.95rem; align-self: flex-start; }

/* Lista de informações do portal (endereço, telefone, whatsapp, e-mail, horário) */
.lista-info-contato { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.lista-info-contato li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--cor-texto);
}
.lista-info-contato svg { flex-shrink: 0; color: var(--cor-principal); margin-top: 1px; }

.sidebar__subtitulo {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cor-titulo);
  padding-top: 16px;
  margin-bottom: 12px;
  border-top: 1px solid var(--cor-borda);
}

/* Lista de redes sociais dentro do bloco "Informações do Portal" */
.lista-redes-contato { display: flex; flex-direction: column; gap: 10px; }
.lista-redes-contato a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--cor-texto);
  transition: color .15s;
}
.lista-redes-contato a:hover { color: var(--cor-principal); }
.lista-redes-contato svg { flex-shrink: 0; }

/* Placeholder de publicidade da página de contato: texto centralizado dentro do bloco */
.conteudo-com-sidebar--contato .anuncio--sidebar { padding: 0 16px; text-align: center; }

/* Tablet: campos Nome/E-mail voltam a empilhar para não ficarem apertados */
@media (max-width: 1024px) {
  .form-contato__linha { grid-template-columns: 1fr; }
}

/* Mobile: botão de envio ocupa a largura toda, como os demais botões do portal */
@media (max-width: 768px) {
  .bloco-formulario { padding: 20px; }
  .btn--grande { align-self: stretch; text-align: center; }
}


/* =====================================================================
   17. PÁGINA DE CADASTRO DE CONTA
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .bloco-formulario, .form-contato,
   .form-contato__campo, .btn e .sidebar já criados para a página
   de Contato. Os estilos abaixo cobrem apenas os componentes
   exclusivos do cadastro: botão Google, separador, campo de senha,
   checkbox de termos e mensagens de validação.
   ===================================================================== */

.cadastro-google { margin-bottom: 24px; }

/* Botão "Continuar com Google" — mesmo raio de borda e altura dos
   demais botões do portal, mas em estilo neutro (outline) por ser
   uma ação secundária/alternativa ao cadastro tradicional */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  background: #fff;
  color: var(--cor-titulo);
  font-family: var(--fonte-texto);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
.btn-google:hover { background: var(--cor-fundo-alt); border-color: #c7cdd3; }

/* Separador "ou cadastre-se com seus dados" */
.separador {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  color: var(--cor-texto-claro);
  font-size: 0.8rem;
}
.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cor-borda);
}

.form-cadastro { margin-top: 4px; }

/* Campo de senha com botão de mostrar/ocultar */
.campo-senha { position: relative; }
.campo-senha input { width: 100%; padding-right: 42px; }
.campo-senha__toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--cor-texto-claro);
  border-radius: var(--raio-borda-pequeno);
}
.campo-senha__toggle:hover { color: var(--cor-principal); }
.campo-senha__toggle--ativo { color: var(--cor-principal); }

/* Dica discreta de critérios de senha */
.dica-campo { font-size: 0.78rem; color: var(--cor-texto-claro); }

/* Checkbox de aceite dos Termos de Uso / Política de Privacidade */
.form-contato__campo--check { gap: 0; }
.check-termos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cor-texto);
  cursor: pointer;
}
.check-termos input[type="checkbox"] {
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--cor-principal);
  flex-shrink: 0;
}
.check-termos a { color: var(--cor-principal); text-decoration: underline; }

/* Link "Já possui uma conta? Entrar" */
.form-cadastro__login {
  text-align: center;
  font-size: 0.85rem;
  color: var(--cor-texto-claro);
  margin-top: 4px;
}
.form-cadastro__login a { color: var(--cor-principal); font-weight: 600; }
.form-cadastro__login a:hover { text-decoration: underline; }

/* Mensagens de validação — ocultas por padrão, exibidas apenas quando
   o campo pai recebe a classe .form-contato__campo--erro */
.mensagem-erro {
  display: none;
  font-size: 0.78rem;
  color: #b3261e;
}
.form-contato__campo--erro input,
.form-contato__campo--erro select {
  border-color: #b3261e;
  background: #fdf1f0;
}
.form-contato__campo--erro .mensagem-erro { display: block; }

@media (max-width: 768px) {
  .btn-google { padding: 13px 16px; }
}


/* =====================================================================
   18. PÁGINA DE ACESSO (LOGIN)
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .bloco-formulario, .form-contato,
   .cadastro-google, .separador, .campo-senha, .check-termos,
   .mensagem-erro e .sidebar já criados para Contato/Cadastro.
   Os estilos abaixo cobrem apenas os componentes exclusivos do
   acesso: área de alerta, opção "manter conectado" e links auxiliares.
   ===================================================================== */

/* Área de alerta (erro ou sucesso) acima do formulário de acesso */
.alerta-acesso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--raio-borda-pequeno);
  font-size: 0.85rem;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.alerta-acesso--erro { background: #fdf1f0; color: #b3261e; border-color: #f2c6c2; }
.alerta-acesso--sucesso { background: #eef8f1; color: #1f7a4d; border-color: #bfe3cc; }

/* Opção "Manter-me conectado" */
.acesso-opcoes { margin: -4px 0 4px; }

/* Links "Faça seu cadastro" / "Esqueci minha senha" abaixo do botão Acessar */
.acesso-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  margin-top: 4px;
}
.acesso-links a { color: var(--cor-principal); font-weight: 600; }
.acesso-links a:hover { text-decoration: underline; }
.acesso-links__separador { color: var(--cor-borda); }

/* Mobile: links de cadastro/recuperação empilham verticalmente quando
   não há espaço suficiente na mesma linha */
@media (max-width: 480px) {
  .acesso-links { flex-direction: column; gap: 6px; }
  .acesso-links__separador { display: none; }
}


/* =====================================================================
   19. PÁGINA DE RECUPERAÇÃO DE SENHA
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .bloco-formulario, .form-contato,
   .mensagem-erro, .alerta-acesso e .sidebar já criados para as
   páginas de Contato/Cadastro/Acesso. Os estilos abaixo cobrem
   apenas o botão secundário e a linha de botões desta página.
   ===================================================================== */

/* Botão secundário: mesmo formato/tamanho do botão principal,
   porém em estilo outline — usado para ações como "Voltar" */
.btn--secundario {
  background: transparent;
  color: var(--cor-titulo);
  border: 1px solid var(--cor-borda);
}
.btn--secundario:hover { background: var(--cor-fundo-alt); border-color: #c7cdd3; }

.form-recuperar__botoes { display: flex; gap: 14px; }
.form-recuperar__botoes .btn { flex: 1; text-align: center; }

/* Mobile: botões empilham verticalmente quando não há espaço suficiente */
@media (max-width: 480px) {
  .form-recuperar__botoes { flex-direction: column; }
}


/* =====================================================================
   20. PÁGINAS INSTITUCIONAIS (Quem Somos, Termos de Uso,
       Política de Privacidade, Política de Cookies)
   ---------------------------------------------------------------------
   Reutiliza .container e a mesma largura/espaçamento da index.html.
   Não possui coluna lateral: o conteúdo ocupa a largura do container,
   mas o texto em si é limitado a uma largura confortável de leitura.
   ===================================================================== */

.institutional-page { padding-top: 32px; padding-bottom: 56px; }

.institutional-page__artigo {
  max-width: none; /* modelo de página institucional: texto ocupa toda a largura do container, sem coluna estreita */
}

.institutional-page__cabecalho {
  border-bottom: 2px solid var(--cor-principal); /* mesma linha de destaque usada em .categoria__cabecalho */
  padding-bottom: 14px;
  margin-bottom: 8px;
}
.institutional-page__titulo {
  font-size: 2rem;
  font-weight: 700;
}

.institutional-page__atualizacao {
  font-size: 0.82rem;
  color: var(--cor-texto-claro);
  margin: 14px 0 8px;
}

.institutional-page__artigo section { margin-top: 30px; }
.institutional-page__artigo h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.institutional-page__artigo p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cor-texto);
  margin-bottom: 16px;
  text-align: left; /* nunca justificado, para não gerar espaços irregulares */
}
.institutional-page__artigo p:last-child { margin-bottom: 0; }
.institutional-page__artigo a { color: var(--cor-principal); text-decoration: underline; }
.institutional-page__artigo strong { color: var(--cor-titulo); }

@media (max-width: 768px) {
  .institutional-page { padding-top: 24px; padding-bottom: 40px; }
  .institutional-page__titulo { font-size: 1.6rem; }
  .institutional-page__artigo h2 { font-size: 1.1rem; }
  .institutional-page__artigo section { margin-top: 24px; }
}


/* =====================================================================
   21. PÁGINA DE ENQUETES
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .bloco-formulario, .alerta-acesso,
   .btn, .categoria__cabecalho e .sidebar já criados nas demais
   páginas internas. Os estilos abaixo cobrem apenas os componentes
   exclusivos de enquetes: opções de voto, barras de progresso,
   listagem de enquetes anteriores e paginação.
   ===================================================================== */

.poll-sem-ativa { color: var(--cor-texto); font-size: 0.95rem; }

.poll-pergunta {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-bottom: 18px;
}

/* Opções de resposta (radio) */
.poll-opcoes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.poll-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  font-size: 0.92rem;
  color: var(--cor-texto);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.poll-opcao:hover { border-color: var(--cor-principal); background: var(--cor-fundo-alt); }
.poll-opcao input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--cor-principal);
  flex-shrink: 0;
}
/* Destaca visualmente a opção selecionada, sem depender apenas da cor */
.poll-opcao:has(input:checked) {
  border-color: var(--cor-principal);
  background: var(--cor-fundo-alt);
  font-weight: 600;
}

.poll-botoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* Resultado da enquete (percentuais + barra de progresso) */
.poll-resultado-lista { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.poll-resultado-item__cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--cor-titulo);
  margin-bottom: 6px;
}
.poll-resultado-item__cabecalho span:last-child { color: var(--cor-texto-claro); font-size: 0.85rem; }

.poll-progresso {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  overflow: hidden;
}
.poll-progresso__barra {
  height: 100%;
  background: var(--cor-principal);
  border-radius: 999px;
}

.poll-total { font-size: 0.9rem; color: var(--cor-texto); margin-bottom: 6px; }
.poll-agradecimento { font-size: 0.95rem; font-weight: 600; color: var(--cor-principal); }

/* Enquetes anteriores */
.poll-history { margin-top: 44px; }
.poll-history__lista { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }

.poll-history__item {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 18px 20px;
}
.poll-history__info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.poll-history__pergunta { font-size: 1rem; font-weight: 700; color: var(--cor-titulo); }
.poll-history__meta { font-size: 0.82rem; color: var(--cor-texto-claro); }
.poll-status { font-weight: 600; color: var(--cor-texto); }

.poll-history__botao { display: inline-flex; }
.poll-history__resultado {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cor-borda);
}

/* Paginação (apenas visual) */
.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.paginacao__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  font-size: 0.85rem;
  color: var(--cor-texto);
}
.paginacao__item:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.paginacao__item--ativo { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; font-weight: 600; }
.paginacao__item--desabilitado { opacity: 0.5; pointer-events: none; }

/* Mobile: opções fáceis de tocar, botões e cards ocupando a largura disponível */
@media (max-width: 768px) {
  .poll-botoes { flex-direction: column; }
  .poll-botoes .btn { width: 100%; text-align: center; }
  .poll-opcao { padding: 14px; }
  .poll-history__item { padding: 16px; }
  .poll-history__botao { width: 100%; text-align: center; justify-content: center; }
  .poll-resultado-item__cabecalho { flex-direction: column; gap: 2px; }
}


/* =====================================================================
   22. PÁGINA DE GALERIA DE IMAGENS
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .btn, .tag, .anuncio e .paginacao
   já criados nas demais páginas internas. Não possui sidebar: os
   filtros e a grade de álbuns ocupam a largura total do container
   principal, como pedido para esta página.
   ===================================================================== */

/* Área de pesquisa e filtros */
.gallery-filters { margin: 8px 0 32px; }
.gallery-filters__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 16px;
}
.gallery-filters__campo--busca { flex: 2 1 260px; }
.gallery-filters__campo { flex: 1 1 160px; }
.gallery-filters__campo--acao { flex: 0 0 auto; }

.gallery-filters__form input,
.gallery-filters__form select {
  width: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  padding: 10px 12px;
  font-family: var(--fonte-texto);
  font-size: 0.88rem;
  color: var(--cor-texto);
  background: #fff;
}
.gallery-filters__form input:focus,
.gallery-filters__form select:focus { outline: none; border-color: var(--cor-principal); }

/* Mensagem de "nenhum álbum encontrado" */
.gallery-sem-resultados {
  text-align: center;
  padding: 48px 20px;
  color: var(--cor-texto);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-borda);
  margin-bottom: 32px;
}
.gallery-sem-resultados p { margin-bottom: 16px; font-size: 1rem; }

/* Grade de álbuns: 4 colunas no desktop, ajustando por breakpoint */
.gallery-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 32px;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow .2s, transform .2s;
}
.gallery-card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }

.gallery-card__link { display: block; }
.gallery-card__capa { position: relative; }
.gallery-card__capa img {
  width: 100%;
  aspect-ratio: 4 / 3; /* proporção padronizada: todas as capas com o mesmo tamanho */
  object-fit: cover;
}
.gallery-card__tag { position: absolute; top: 12px; left: 12px; }

.gallery-card__corpo { padding: 14px 16px 6px; flex: 1; }
.gallery-card__titulo {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-bottom: 8px;
  line-height: 1.35;
}
.gallery-card__link:hover .gallery-card__titulo { color: var(--cor-principal); }
.gallery-card__info {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--cor-texto-claro);
}

.gallery-card__botao {
  margin: 12px 16px 16px;
  text-align: center;
}

/* Paginação: reticências entre os números, seguindo o mesmo padrão de .paginacao__item */
.paginacao__reticencias { color: var(--cor-texto-claro); padding: 0 2px; }

.gallery-pagination { margin-bottom: 28px; }

/* Banner de publicidade horizontal, responsivo, abaixo da paginação */
.anuncio--galeria { height: 120px; }

/* =====================================================================
   RESPONSIVO DA GALERIA
   Desktop: 4 colunas · Notebook: 3 · Tablet: 2 · Celular: 1
   ===================================================================== */
@media (max-width: 1180px) {
  .gallery-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .gallery-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  /* Filtros: no tablet, pesquisa ocupa a linha toda e os selects se ajustam */
  .gallery-filters__campo--busca { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .gallery-list { grid-template-columns: 1fr; }
  .gallery-filters__form { flex-direction: column; align-items: stretch; }
  .gallery-filters__campo,
  .gallery-filters__campo--busca,
  .gallery-filters__campo--acao { flex-basis: auto; }
  .gallery-filters__campo--acao .btn { width: 100%; }
  .anuncio--galeria { height: 90px; }
}


/* =====================================================================
   23. PÁGINA INTERNA DO ÁLBUM DA GALERIA
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .btn, .tag, .categoria__cabecalho,
   .gallery-card (da página de Galeria) e demais componentes já
   existentes. Não possui sidebar de publicidade, conforme pedido.
   ===================================================================== */

.gallery-detail-page { padding-top: 20px; padding-bottom: 48px; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--cor-texto-claro);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--cor-principal); }
.breadcrumb a:hover { text-decoration: underline; }

/* Álbum não encontrado */
.album-nao-encontrado {
  text-align: center;
  padding: 64px 20px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-borda);
}
.album-nao-encontrado p { margin-bottom: 18px; color: var(--cor-texto); font-size: 1rem; }

/* Cabeçalho do álbum */
.album-header { margin-bottom: 16px; }
.album-header__titulo { font-size: 1.9rem; font-weight: 700; margin-bottom: 10px; }
.album-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--cor-texto-claro);
}
.album-header__meta a { color: var(--cor-principal); }
.album-header__meta a:hover { text-decoration: underline; }

/* Compartilhamento */
.album-sharing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.album-sharing__label { font-size: 0.85rem; font-weight: 600; color: var(--cor-titulo); }
.album-sharing__botoes { display: flex; gap: 8px; }
.album-sharing__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--cor-fundo-alt);
  color: var(--cor-secundaria);
  transition: background .15s, color .15s;
}
.album-sharing__botao:hover { background: var(--cor-principal); color: #fff; }
.album-sharing__confirmacao { font-size: 0.82rem; color: #1f7a4d; font-weight: 600; }

/* Mensagem: álbum sem fotografias */
.album-sem-fotos {
  text-align: center;
  padding: 40px 20px;
  color: var(--cor-texto);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-borda);
  margin-bottom: 24px;
}

/* Visualizador principal */
.main-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-photo__area {
  position: relative;
  flex: 1;
  height: 520px;
  background: var(--cor-secundaria); /* fundo escuro neutro ao redor da imagem */
  border-radius: var(--raio-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.main-photo__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* preserva a proporção original, sem distorcer */
  transition: opacity .2s;
  cursor: zoom-in;
}
.main-photo__carregando {
  position: absolute;
  width: 34px; height: 34px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.main-photo__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  color: var(--cor-titulo);
  transition: background .15s, color .15s;
}
.main-photo__nav:hover { background: var(--cor-principal); color: #fff; border-color: var(--cor-principal); }

.main-photo__controles {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}
.main-photo__controle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  transition: background .15s;
}
.main-photo__controle:hover { background: rgba(0,0,0,0.7); }

.main-photo__contador {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.78rem;
}

.main-photo__legenda {
  font-size: 0.85rem;
  color: var(--cor-texto-claro);
  margin: 10px 0 0;
}

/* Miniaturas */
.photo-thumbnails {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 40px;
}
.photo-thumbnails__faixa {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  flex: 1;
  min-width: 0; /* impede que a faixa estoure a largura da página */
}
.photo-thumbnails__item {
  flex-shrink: 0;
  width: 80px; height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--raio-borda-pequeno);
  overflow: hidden;
  background: var(--cor-fundo-alt);
  cursor: pointer;
}
.photo-thumbnails__item img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumbnails__item--ativo {
  border-color: var(--cor-principal);
  outline: 2px solid var(--cor-principal);
  outline-offset: 1px;
}
.photo-thumbnails__seta {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  color: var(--cor-titulo);
  font-size: 1.1rem;
  line-height: 1;
}
.photo-thumbnails__seta:hover { border-color: var(--cor-principal); color: var(--cor-principal); }

/* Descrição + informações do álbum */
.album-details {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.album-description__titulo { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
.album-description p { font-size: 0.95rem; line-height: 1.7; color: var(--cor-texto); margin-bottom: 14px; }
.album-description p:last-child { margin-bottom: 0; }

.album-information {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 20px;
  align-self: start;
}
.album-information__titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.album-information__lista { display: flex; flex-direction: column; gap: 10px; }
.album-information__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cor-borda);
}
.album-information__item:last-child { border-bottom: none; padding-bottom: 0; }
.album-information__item dt { color: var(--cor-texto-claro); }
.album-information__item dd { color: var(--cor-titulo); font-weight: 600; text-align: right; }
.album-information__item dd a { color: var(--cor-principal); font-weight: 600; }

/* Outras galerias */
.related-galleries { margin-bottom: 8px; }
.related-galleries__faixa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.related-galleries__card { height: 100%; }

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 12, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Garante que o atributo "hidden" realmente oculte o lightbox — sem esta
   regra, a classe .lightbox (display: flex) teria a mesma especificidade
   da regra padrão do navegador para [hidden] e venceria por ordem de
   cascata, deixando o lightbox sempre visível mesmo com hidden="true". */
.lightbox[hidden] { display: none; }
body.lightbox-aberto { overflow: hidden; } /* impede rolagem do fundo enquanto o lightbox está aberto */

.lightbox__fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.lightbox__fechar:hover { background: rgba(255,255,255,0.2); }

.lightbox__nav {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.2); }

.lightbox__area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 82vw;
  max-height: 88vh;
}
.lightbox__img {
  max-width: 82vw;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__legenda { color: #d8dce0; font-size: 0.85rem; text-align: center; }
.lightbox__contador { color: #aab1b8; font-size: 0.78rem; }

/* =====================================================================
   RESPONSIVO DA PÁGINA DE ÁLBUM
   ===================================================================== */
@media (max-width: 1024px) {
  .main-photo__area { height: 420px; }
  .album-details { grid-template-columns: 1fr; }
  .related-galleries__faixa { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .gallery-detail-page { padding-top: 16px; padding-bottom: 32px; }
  .album-header__titulo { font-size: 1.5rem; }
  .main-photo__area { height: 300px; }
  .main-photo__nav { width: 38px; height: 38px; }
  .album-information__item { flex-direction: column; gap: 2px; }
  .album-information__item dd { text-align: left; }
  .related-galleries__faixa {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 4px;
  }
  .lightbox__nav { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .main-photo__area { height: 240px; }
  .album-sharing { gap: 8px; }
}


/* =====================================================================
   24. PÁGINA DE VÍDEOS
   ---------------------------------------------------------------------
   Reutiliza integralmente os componentes já criados para a página de
   Galeria de Imagens: .gallery-filters, .gallery-list, .gallery-card,
   .gallery-sem-resultados, .paginacao e .anuncio. Os estilos abaixo
   cobrem apenas os elementos exclusivos de vídeo: ícone de play,
   selo de duração, vídeo em destaque e resumo com reticências.
   ===================================================================== */

/* Grade de vídeos: 3 colunas no desktop/notebook (diferente da Galeria,
   que usa 4), conforme pedido especificamente para esta página */
.video-list { grid-template-columns: repeat(3, 1fr); }

/* Categoria do vídeo: exibida ACIMA da miniatura (fora da área de
   reprodução), diferente da Galeria de Imagens, onde a tag fica
   sobreposta à capa */
.video-card__categoria { margin: 14px 16px 12px; align-self: flex-start; }
.video-card__link { display: flex; flex-direction: column; flex: 1; }

/* Miniatura do vídeo: mesma base do .gallery-card__capa, com proporção
   16:9 (padrão de vídeo) em vez de 4:3 */
.video-card__capa img { aspect-ratio: 16 / 9; }

.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  transition: background .15s, transform .15s;
}
.video-card__link:hover .video-card__play { background: var(--cor-principal); transform: translate(-50%, -50%) scale(1.08); }

.video-card__duracao {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: var(--raio-borda-pequeno);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Resumo do vídeo: limitado a duas linhas, com reticências quando maior */
.video-card__resumo {
  font-size: 0.85rem;
  color: var(--cor-texto);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vídeo em destaque */
.featured-video { margin: 8px 0 32px; }
.featured-video__card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}
.featured-video__capa { position: relative; display: block; }
.featured-video__capa img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; }
.featured-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  transition: background .15s;
}
.featured-video__capa:hover .featured-video__play { background: var(--cor-principal); }

/* Wrapper da mídia: agrupa a tag (acima, fora da miniatura) e a capa
   clicável, mantendo o grid do card com apenas 2 colunas (mídia | texto) */
.featured-video__media { display: flex; flex-direction: column; }
.featured-video__tag { align-self: flex-start; margin: 16px 0 10px 16px; }

.featured-video__texto { padding: 20px 24px 20px 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.featured-video__titulo { font-size: 1.3rem; font-weight: 700; }
.featured-video__titulo a:hover { color: var(--cor-principal); }
.featured-video__resumo { font-size: 0.92rem; color: var(--cor-texto); line-height: 1.6; }
.featured-video__texto .btn { align-self: flex-start; }

/* =====================================================================
   RESPONSIVO DA PÁGINA DE VÍDEOS
   Desktop/Notebook: 3 colunas · Tablet: 2 · Celular: 1
   ===================================================================== */
@media (max-width: 1180px) {
  .video-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .video-list { grid-template-columns: repeat(2, 1fr); }
  .featured-video__card { grid-template-columns: 1fr; }
  .featured-video__texto { padding: 20px; }
}
@media (max-width: 640px) {
  .video-list { grid-template-columns: 1fr; }
}


/* =====================================================================
   25. PÁGINA JORNAL EM PDF
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .gallery-filters, .gallery-sem-resultados,
   .paginacao, .conteudo-com-sidebar/.sidebar (mesma divisão de área
   principal + lateral da página de Contato) e .anuncio. Os estilos
   abaixo cobrem apenas os cards de edição e o visualizador Flipbook.
   ===================================================================== */

.newspaper-header__icone { vertical-align: -4px; margin-right: 6px; color: var(--cor-principal); }

.newspaper-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }

/* Card horizontal de cada edição */
.newspaper-card {
  display: flex;
  gap: 20px;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 18px;
  transition: box-shadow .2s;
}
.newspaper-card:hover { box-shadow: var(--sombra-card-hover); }

.newspaper-card__capa { flex-shrink: 0; display: block; width: 120px; }
.newspaper-card__capa img {
  width: 120px;
  height: 170px; /* proporção próxima à de uma folha A4, sem distorcer (object-fit) */
  object-fit: cover;
  border-radius: var(--raio-borda-pequeno);
  border: 1px solid var(--cor-borda);
}

.newspaper-card__corpo { flex: 1; display: flex; flex-direction: column; }
.newspaper-card__data { font-size: 0.8rem; color: var(--cor-texto-claro); margin-bottom: 2px; }
.newspaper-card__edicao { font-size: 1.1rem; font-weight: 700; color: var(--cor-titulo); margin-bottom: 8px; }
.newspaper-card__descricao {
  font-size: 0.9rem;
  color: var(--cor-texto);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newspaper-card__info { font-size: 0.78rem; color: var(--cor-texto-claro); margin-bottom: 12px; }

.newspaper-card__botoes { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.newspaper-card__download { font-size: 0.85rem; color: var(--cor-principal); font-weight: 600; }
.newspaper-card__download:hover { text-decoration: underline; }

/* =====================================================================
   VISUALIZADOR FLIPBOOK (modal)
   ===================================================================== */
.flipbook-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #15181c;
  display: flex;
  flex-direction: column;
}
.flipbook-modal[hidden] { display: none; }

.flipbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #1c2126;
  color: #fff;
  flex-shrink: 0;
}
.flipbook-header__titulo { font-size: 0.92rem; font-weight: 600; }
.flipbook-header__acoes { display: flex; gap: 8px; }

.flipbook-controle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: background .15s;
}
.flipbook-controle:hover { background: rgba(255,255,255,0.18); }
.flipbook-controle--fechar:hover { background: #b3261e; }

.flipbook-viewer {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.flipbook-carregando,
.flipbook-erro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #d8dce0;
  text-align: center;
  max-width: 360px;
}
.flipbook-carregando__spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
.flipbook-erro__acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Os botões secundário/principal padrão do portal foram pensados para fundo
   claro; aqui, sobre o fundo escuro do Flipbook, o botão secundário precisa
   de cores próprias para não ficar "invisível" (texto escuro sobre fundo
   escuro) fora do hover. */
.flipbook-erro__acoes .btn--secundario {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.flipbook-erro__acoes .btn--secundario:hover { background: rgba(255,255,255,0.18); }

.flipbook-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: opacity .18s, transform .18s;
}
/* Efeito de "virar página": leve encolhimento/opacidade durante a troca,
   simulando a transição do flipbook antes de renderizar a nova página */
.flipbook-paginas--virando { opacity: 0.15; transform: scale(0.97); }

.flipbook-pagina {
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
}
.flipbook-pagina canvas { display: block; max-width: 100%; max-height: 100%; }
#flipbookPaginaEsquerda { border-radius: 4px 0 0 4px; }
#flipbookPaginaDireita { border-radius: 0 4px 4px 0; }

.flipbook-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.flipbook-nav:hover { background: rgba(255,255,255,0.22); }
.flipbook-nav--primeira { left: 8px; }
.flipbook-nav--anterior { left: 56px; }
.flipbook-nav--proxima { right: 56px; }
.flipbook-nav--ultima { right: 8px; }

.flipbook-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #1c2126;
  color: #d8dce0;
  font-size: 0.82rem;
}

/* =====================================================================
   RESPONSIVO DA PÁGINA E DO FLIPBOOK
   ===================================================================== */
@media (max-width: 1024px) {
  .newspaper-card__capa img { width: 100px; height: 142px; }
  .newspaper-card__capa { width: 100px; }
}

@media (max-width: 768px) {
  .newspaper-card { flex-direction: column; }
  .newspaper-card__capa { width: 140px; }
  .newspaper-card__capa img { width: 140px; height: 198px; }
  .newspaper-card__botoes { flex-wrap: wrap; }
  .newspaper-card__botoes .btn { flex: 1; text-align: center; }

  .flipbook-header__titulo { font-size: 0.8rem; }
  .flipbook-nav { width: 36px; height: 36px; }
  .flipbook-nav--anterior { left: 8px; }
  .flipbook-nav--proxima { right: 8px; }
  .flipbook-nav--primeira, .flipbook-nav--ultima { display: none; } /* mantém apenas anterior/próxima no celular, mais fáceis de tocar */
}


/* =====================================================================
   26. PÁGINA DE COLUNISTAS
   ---------------------------------------------------------------------
   Reutiliza .pagina-cabecalho, .categoria__cabecalho, .gallery-filters,
   .gallery-sem-resultados, .gallery-list/.gallery-card, .paginacao,
   .conteudo-com-sidebar/.sidebar e .anuncio já criados nas demais
   páginas internas. Os estilos abaixo cobrem apenas o carrossel de
   colunistas e os elementos exclusivos do card de coluna.
   ===================================================================== */

.columnists-showcase { margin-bottom: 44px; }

/* Colunistas exibidos em grade: 3 por linha no desktop, quebrando para
   novas linhas — sem rolagem horizontal nem setas de navegação */
.columnists-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.columnist-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 22px 18px;
}
.columnist-card__foto {
  display: block;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 12px;
  border: 3px solid var(--cor-fundo-alt);
}
.columnist-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.columnist-card__nome { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.columnist-card__nome a:hover { color: var(--cor-principal); }
.columnist-card__especialidade { margin-bottom: 10px; }
.columnist-card__descricao { font-size: 0.85rem; color: var(--cor-texto); line-height: 1.5; margin-bottom: 16px; }
.columnist-card__botao { width: 100%; }

/* Grade de colunas: 3 colunas no desktop, reaproveitando a mesma base de
   .gallery-list (breakpoints em 1180/900/640 já definidos para 3/2/1) */
.columns-grid { grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
.columns-filters { margin-bottom: 24px; }

/* Identificação do autor dentro do card de coluna */
.column-card__corpo { display: flex; flex-direction: column; }
.column-card__autor { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.column-card__autor img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.column-card__autor span { font-size: 0.8rem; font-weight: 600; color: var(--cor-titulo); }

.column-card__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.column-card__resumo {
  font-size: 0.85rem;
  color: var(--cor-texto);
  margin: 4px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   RESPONSIVO DA PÁGINA DE COLUNISTAS
   ===================================================================== */
@media (max-width: 1180px) {
  .columns-grid { grid-template-columns: repeat(2, 1fr); }
  .columnists-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .columns-grid { grid-template-columns: 1fr; }
  .columnists-grade { grid-template-columns: 1fr; }
}


/* =====================================================================
   27. PÁGINA INTERNA DO COLUNISTA
   ---------------------------------------------------------------------
   Reutiliza .breadcrumb, .album-nao-encontrado (mensagem de "não
   encontrado"), .tag, .newspaper-card (cards das matérias),
   .gallery-sem-resultados, .paginacao, .conteudo-com-sidebar/.sidebar,
   .anuncio, .bloco-formulario e .lista-redes-contato já criados nas
   demais páginas internas. Os estilos abaixo cobrem apenas o banner
   de apresentação e as abas Artigos / Sobre o Colunista.
   ===================================================================== */

.columnist-detail-page { padding-top: 20px; padding-bottom: 48px; }

/* Banner do colunista */
.columnist-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  background: var(--cor-secundaria);
  border-radius: var(--raio-borda);
  padding: 32px;
  margin-bottom: 32px;
  overflow: hidden;
  position: relative;
}

.columnist-hero__foto {
  flex-shrink: 0;
  width: 150px; height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.15);
}
.columnist-hero__foto img { width: 100%; height: 100%; object-fit: cover; }

.columnist-hero__perfil { color: #fff; max-width: 560px; }
.columnist-hero__selo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b9c2ca;
  margin-bottom: 6px;
}
.columnist-hero__nome { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.columnist-hero__especialidade { margin-bottom: 14px; }
.columnist-hero__bio { font-size: 0.92rem; line-height: 1.6; color: #cfd6dc; margin-bottom: 18px; }

.columnist-hero__redes { display: flex; gap: 10px; }
.columnist-hero__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  transition: background .15s;
}
.columnist-hero__redes a:hover { background: var(--cor-principal); }

/* Elemento visual decorativo à direita (composição discreta, sem foto real) */
.columnist-hero__visual {
  display: block;
  width: 140px; height: 140px;
  color: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* Abas: Artigos / Sobre o Colunista */
.columnist-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--cor-borda);
  margin-bottom: 24px;
}
.columnist-tabs__item {
  padding: 10px 4px;
  margin-right: 20px;
  border: none;
  background: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cor-texto-claro);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.columnist-tabs__item:hover { color: var(--cor-titulo); }
.columnist-tabs__item--ativo { color: var(--cor-principal); border-bottom-color: var(--cor-principal); }

.columnist-articles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.columnist-articles-header__titulo { font-size: 1.25rem; font-weight: 700; }
.columnist-articles-header__ordenacao select {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  padding: 8px 12px;
  font-family: var(--fonte-texto);
  font-size: 0.85rem;
  color: var(--cor-texto);
  background: var(--cor-fundo-alt);
}

.columnist-articles-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.columnist-article-card__titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.columnist-article-card__titulo a:hover { color: var(--cor-principal); }

/* "Sobre o Colunista": reaproveita .bloco-formulario como moldura do texto */
.columnist-sobre p { font-size: 0.95rem; line-height: 1.7; color: var(--cor-texto); margin-bottom: 16px; }
.columnist-sobre__subtitulo { font-size: 1rem; font-weight: 700; color: var(--cor-titulo); margin: 22px 0 10px; }
.columnist-sobre .lista-redes-contato { margin-top: 4px; }

/* =====================================================================
   RESPONSIVO DA PÁGINA DO COLUNISTA
   ===================================================================== */
@media (max-width: 1024px) {
  .columnist-hero { grid-template-columns: auto 1fr; }
  .columnist-hero__visual { display: none; }
}

@media (max-width: 768px) {
  .columnist-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 26px 20px;
  }
  .columnist-hero__perfil { max-width: 100%; }
  .columnist-hero__redes { justify-content: center; }
  .columnist-article-card .newspaper-card__capa { width: 120px; }
  .columnist-article-card .newspaper-card__capa img { width: 120px; height: 90px; }
  .columnist-articles-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .columnist-hero__foto { width: 110px; height: 110px; }
  .columnist-hero__nome { font-size: 1.4rem; }
}


/* =====================================================================
   28. PÁGINA INTERNA DA COLUNA / MATÉRIA (noticia.html)
   ---------------------------------------------------------------------
   Reutiliza .breadcrumb, .tag, .album-sharing (compartilhar + copiar
   link), .conteudo-com-sidebar/.sidebar, .anuncio, .btn e
   .columnist-hero__redes já criados nas demais páginas internas. Os
   estilos abaixo cobrem apenas o cabeçalho do artigo, o corpo de
   texto, tags, navegação entre artigos, card do colunista e a lista
   de "últimas colunas" da lateral.
   ===================================================================== */

.article-page { padding-top: 20px; padding-bottom: 48px; }

/* Cabeçalho do artigo */
.article-header { margin-bottom: 24px; }
.article-header__categoria { margin-bottom: 12px; }
.article-header__titulo { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
.article-header__subtitulo { font-size: 1.05rem; color: var(--cor-texto); line-height: 1.6; margin-bottom: 20px; }

.article-header__meta-compartilhar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.article-header__autor { display: flex; align-items: center; gap: 10px; }
.article-header__autor-foto { display: block; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.article-header__autor-foto img { width: 100%; height: 100%; object-fit: cover; }
.article-header__autor-info p { font-size: 0.88rem; margin: 0; }
.article-header__autor-info p a { color: var(--cor-principal); font-weight: 600; }
.article-header__autor-info p a:hover { text-decoration: underline; }
.article-header__autor-data { color: var(--cor-texto-claro); font-size: 0.8rem !important; margin-top: 2px !important; }

/* Compartilhamento reaproveita .album-sharing; aqui só ajustamos a margem
   para não repetir o "margin-bottom" pensado para a página de álbum */
.article-header__compartilhar { margin-bottom: 0; }

/* Imagem principal com legenda e crédito */
.article-imagem { margin-bottom: 28px; }
.article-imagem img {
  width: 100%;
  aspect-ratio: 16/9.2;
  object-fit: cover;
  border-radius: var(--raio-borda);
}
.article-imagem figcaption {
  font-size: 0.8rem;
  color: var(--cor-texto-claro);
  margin-top: 8px;
}
.article-imagem__credito { color: var(--cor-texto-claro); }
.article-imagem__credito::before { content: "— "; }

/* Corpo do texto */
.article-body { font-size: 1.02rem; line-height: 1.8; color: var(--cor-texto); margin-bottom: 28px; }
.article-body h2 { font-size: 1.35rem; font-weight: 700; color: var(--cor-titulo); margin: 32px 0 14px; }
.article-body p { margin-bottom: 18px; }
.article-body ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--cor-titulo); }

.article-citacao {
  border-left: 4px solid var(--cor-principal);
  background: var(--cor-fundo-alt);
  padding: 18px 22px;
  margin: 26px 0;
  border-radius: 0 var(--raio-borda-pequeno) var(--raio-borda-pequeno) 0;
}
.article-citacao p {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--cor-titulo);
  margin-bottom: 8px;
}
.article-citacao cite { font-size: 0.85rem; font-style: normal; color: var(--cor-texto-claro); }

/* Tags */
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tag-link {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  font-size: 0.8rem;
}
.tag-link:hover { border-color: var(--cor-principal); color: var(--cor-principal); }

/* Navegação entre artigos */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  background: var(--cor-fundo-card);
  transition: border-color .15s;
}
.article-nav__item:hover { border-color: var(--cor-principal); }
.article-nav__item--proximo { text-align: right; align-items: flex-end; }
.article-nav__label { font-size: 0.78rem; font-weight: 700; color: var(--cor-principal); text-transform: uppercase; letter-spacing: 0.03em; }
.article-nav__titulo { font-size: 0.92rem; font-weight: 600; color: var(--cor-titulo); }

/* Card do colunista, ao final do artigo */
.columnist-card-mini {
  display: flex;
  gap: 18px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 22px;
  margin-bottom: 28px;
}
.columnist-card-mini__foto { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.columnist-card-mini__nome { font-size: 1.05rem; font-weight: 700; color: var(--cor-titulo); margin-bottom: 6px; }
.columnist-card-mini__especialidade { margin-bottom: 10px; }
.columnist-card-mini__bio { font-size: 0.88rem; color: var(--cor-texto); line-height: 1.55; margin-bottom: 14px; }
.columnist-card-mini__acoes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.columnist-card-mini__redes a { background: #fff; color: var(--cor-secundaria); width: 30px; height: 30px; }
.columnist-card-mini__redes a:hover { background: var(--cor-principal); color: #fff; }

/* Comentários (placeholder) */
.article-comentarios {
  border-top: 1px solid var(--cor-borda);
  padding-top: 24px;
}
.article-comentarios__titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
.article-comentarios__placeholder {
  font-size: 0.9rem;
  color: var(--cor-texto-claro);
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-borda);
}

/* Lista "Últimas Colunas de [Nome]" na lateral */
.columnist-latest__lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.columnist-latest__lista a { display: flex; align-items: center; gap: 10px; }
.columnist-latest__lista img { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--raio-borda-pequeno); object-fit: cover; }
.columnist-latest__texto { display: flex; flex-direction: column; gap: 2px; }
.columnist-latest__titulo { font-size: 0.82rem; font-weight: 600; color: var(--cor-titulo); line-height: 1.3; }
.columnist-latest__lista a:hover .columnist-latest__titulo { color: var(--cor-principal); }
.columnist-latest__data { font-size: 0.72rem; color: var(--cor-texto-claro); }
.columnist-latest__botao { width: 100%; text-align: center; }

/* =====================================================================
   RESPONSIVO DA PÁGINA DE MATÉRIA
   ===================================================================== */
@media (max-width: 768px) {
  .article-header__titulo { font-size: 1.5rem; }
  .article-header__meta-compartilhar { flex-direction: column; align-items: flex-start; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__item--proximo { text-align: left; align-items: flex-start; }
  .columnist-card-mini { flex-direction: column; align-items: flex-start; }
  .columnist-card-mini__acoes { width: 100%; }
}


/* =====================================================================
   29. ÁREA DO USUÁRIO LOGADO (minha-conta.html)
   ---------------------------------------------------------------------
   Reutiliza .tag, .btn, .bloco-formulario, .form-contato, .campo-senha,
   .check-termos, .alerta-acesso, .gallery-list/.gallery-card,
   .gallery-sem-resultados, .categoria__cabecalho e .newspaper-card já
   criados nas demais páginas internas. Não possui sidebar de
   publicidade — o espaço é todo dedicado à conta do usuário.
   ===================================================================== */

.account-page { padding-top: 24px; padding-bottom: 48px; }

.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

/* ---- Menu lateral do usuário ---- */
.account-sidebar {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
}
.account-sidebar__toggle { display: none; } /* visível apenas no mobile */

.account-user-summary {
  text-align: center;
  padding: 24px 18px;
  border-bottom: 1px solid var(--cor-borda);
}
.account-user-summary__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cor-principal);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.account-user-summary__nome { font-size: 0.98rem; font-weight: 700; color: var(--cor-titulo); }
.account-user-summary__email { font-size: 0.8rem; color: var(--cor-texto-claro); margin-bottom: 8px; word-break: break-all; }

.account-navigation { display: flex; flex-direction: column; padding: 10px; }
.account-navigation__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--raio-borda-pequeno);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cor-texto);
  text-align: left;
}
.account-navigation__item svg { flex-shrink: 0; color: var(--cor-texto-claro); }
.account-navigation__item:hover { background: var(--cor-fundo-alt); }
.account-navigation__item--ativo { background: var(--cor-fundo-alt); color: var(--cor-principal); }
.account-navigation__item--ativo svg { color: var(--cor-principal); }

.account-sidebar__sair { border-top: 1px solid var(--cor-borda); padding: 10px; }
.account-navigation__item--sair { color: #b3261e; }
.account-navigation__item--sair svg { color: #b3261e; }
.account-navigation__item--sair:hover { background: #fdf1f0; }

/* ---- Conteúdo principal da conta ---- */
.account-mensagem { margin-bottom: 20px; }

.account-section__saudacao { font-size: 1.7rem; font-weight: 700; margin-bottom: 6px; }
.account-section__titulo { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.account-section__subtexto { font-size: 0.95rem; color: var(--cor-texto-claro); margin-bottom: 24px; }
.account-section__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Cards de resumo do painel inicial */
.account-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.account-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.account-card__titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.account-card__status { margin-bottom: 10px; align-self: flex-start; background: var(--cor-texto-claro); }
.account-card__status--ativo { background: #1f7a4d; }
.account-card__numero { font-family: var(--fonte-titulo); font-size: 1.4rem; font-weight: 700; color: var(--cor-titulo); margin-bottom: 8px; }
.account-card__texto { font-size: 0.85rem; color: var(--cor-texto); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.account-card .btn { align-self: flex-start; }

.account-recomendados { grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }
.account-recomendado-card .gallery-card__capa { position: relative; }
.account-favoritar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
}
.account-favoritar:hover { background: var(--cor-principal); }
.account-favoritar[aria-pressed="true"] { color: #ff6b6b; }

/* Blocos de formulário empilhados ("Meus dados") */
.account-bloco { margin-bottom: 24px; }

/* Filtros de favoritos (reaproveita o padrão de "abas") */
.account-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.account-filtros__item {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto);
}
.account-filtros__item:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.account-filtros__item--ativo { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }

.account-favoritos-grid { grid-template-columns: repeat(3, 1fr); }
.account-remover-favorito { margin: 0 16px 16px; width: calc(100% - 32px); }

/* Histórico de leitura */
.account-historico-lista { display: flex; flex-direction: column; gap: 12px; }
.account-historico-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 16px 18px;
}
.account-historico-item__titulo { font-size: 0.95rem; font-weight: 700; color: var(--cor-titulo); margin: 6px 0 4px; }
.account-historico-item__datas { font-size: 0.78rem; color: var(--cor-texto-claro); }
.account-historico-item__acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.account-remover-historico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto-claro);
}
.account-remover-historico:hover { border-color: #b3261e; color: #b3261e; }

/* Alertas e notificações */
.account-assuntos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 4px; }
.account-preferencias { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }

.account-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 0.9rem; color: var(--cor-texto); }
.account-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.account-toggle__trilho {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--cor-borda);
  transition: background .15s;
}
.account-toggle__trilho::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.account-toggle input:checked + .account-toggle__trilho { background: var(--cor-principal); }
.account-toggle input:checked + .account-toggle__trilho::after { transform: translateX(18px); }
.account-toggle input:focus-visible + .account-toggle__trilho { outline: 2px solid var(--cor-principal); outline-offset: 2px; }

/* Jornais em PDF dentro da conta */
.account-jornal-bloqueado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--cor-texto-claro);
  margin-bottom: 12px;
}
.newspaper-card__botoes .btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Modal "Sair da conta" (demonstrativo) */
.account-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10,12,15,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.account-modal__caixa {
  background: #fff;
  border-radius: var(--raio-borda);
  padding: 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sombra-card-hover);
}
.account-modal__texto { font-size: 1rem; font-weight: 600; color: var(--cor-titulo); margin-bottom: 20px; }
.account-modal__botoes { display: flex; gap: 12px; justify-content: center; }

/* =====================================================================
   RESPONSIVO DA ÁREA DO USUÁRIO
   ===================================================================== */
@media (max-width: 1180px) {
  .account-recomendados { grid-template-columns: repeat(2, 1fr); }
  .account-favoritos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }

  /* Menu lateral vira um botão recolhível no celular/tablet estreito */
  .account-sidebar__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: var(--cor-fundo-card);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cor-titulo);
  }
  .account-sidebar__toggle svg { margin-left: auto; }
  .account-sidebar__toggle-avatar { width: 30px; height: 30px; font-size: 0.8rem; margin: 0; }

  .account-sidebar__conteudo {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .account-sidebar__conteudo--aberto { max-height: 700px; }

  .account-cards { grid-template-columns: 1fr; }
  .account-assuntos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .account-recomendados,
  .account-favoritos-grid { grid-template-columns: 1fr; }
  .account-historico-item { flex-direction: column; align-items: flex-start; }
  .account-historico-item__acoes { width: 100%; justify-content: space-between; }
  .account-section__cabecalho { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .account-assuntos { grid-template-columns: 1fr 1fr; }
}


/* =====================================================================
   30. PÁGINA GENÉRICA DE CATEGORIA (categoria.html)
   ---------------------------------------------------------------------
   Reutiliza .breadcrumb, .tag, .btn, .anuncio, .paginacao,
   .album-nao-encontrado (mensagem "não encontrado"/"sem resultados") e
   .account-favoritar (botão de favoritar) já criados nas demais
   páginas internas. Os estilos abaixo cobrem apenas o cabeçalho da
   categoria, o menu de subcategorias, os cards de notícia (layout
   horizontal) e o bloco de vídeos relacionados da lateral.
   ===================================================================== */

.category-page { padding-top: 20px; padding-bottom: 48px; }

.category-header { margin-bottom: 18px; }
.category-header__nome { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.category-header__descricao { font-size: 1rem; color: var(--cor-texto); max-width: 720px; }

/* Menu horizontal de subcategorias */
.category-submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
}
.category-submenu__item {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto);
}
.category-submenu__item:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.category-submenu__item--ativo { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }

/* Pesquisa contextual da categoria */
.category-search { margin-bottom: 28px; }
.category-search form { display: flex; max-width: 420px; border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); overflow: hidden; }
.category-search input {
  flex: 1;
  border: none;
  padding: 11px 14px;
  font-family: var(--fonte-texto);
  font-size: 0.9rem;
  color: var(--cor-texto);
  background: var(--cor-fundo-alt);
}
.category-search input:focus { outline: none; background: #fff; }
.category-search button { border: none; background: var(--cor-principal); color: #fff; padding: 0 16px; font-size: 0.95rem; }
.category-search button:hover { background: var(--cor-principal-escura); }

/* Layout de duas colunas ~70/30 (proporção específica pedida para esta
   página, por isso não reaproveita .conteudo-com-sidebar diretamente) */
.category-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

/* Cards de notícia (layout horizontal) */
.category-news-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }

.category-news-card {
  display: flex;
  gap: 18px;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 16px;
  transition: box-shadow .2s;
}
.category-news-card:hover { box-shadow: var(--sombra-card-hover); }

.category-news-card__capa { flex-shrink: 0; display: block; width: 200px; }
.category-news-card__capa img {
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--raio-borda-pequeno);
}

.category-news-card__corpo { flex: 1; display: flex; flex-direction: column; }
.category-news-card__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.category-news-card__favoritar {
  position: static; /* sobrescreve o position:absolute herdado de .account-favoritar,
                        já que aqui o botão fica dentro do cabeçalho flex do card,
                        não sobreposto a uma imagem */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto-claro);
}
.category-news-card__favoritar:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.category-news-card__favoritar[aria-pressed="true"] { color: #ff6b6b; border-color: #ff6b6b; }

.category-news-card__titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.category-news-card__titulo a:hover { color: var(--cor-principal); }
.category-news-card__resumo {
  font-size: 0.88rem;
  color: var(--cor-texto);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-news-card__info { font-size: 0.78rem; color: var(--cor-texto-claro); margin-bottom: 12px; }
.category-news-card__corpo .btn { align-self: flex-start; margin-top: auto; }

.category-pagination { margin-top: 8px; }

/* Bloco "Vídeos" da lateral */
.sidebar__titulo-linha { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sidebar__titulo-linha .sidebar__titulo { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.related-videos__destaque { display: block; margin-bottom: 16px; }
.related-videos__thumb { position: relative; display: block; border-radius: var(--raio-borda-pequeno); overflow: hidden; }
.related-videos__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.related-videos__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
}
.related-videos__destaque:hover .related-videos__play { background: var(--cor-principal); }
.related-videos__titulo { display: block; font-size: 0.88rem; font-weight: 700; color: var(--cor-titulo); margin-top: 8px; }
.related-videos__destaque:hover .related-videos__titulo { color: var(--cor-principal); }
.related-videos__data { display: block; font-size: 0.76rem; color: var(--cor-texto-claro); margin-top: 2px; }

.related-videos__item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.related-videos__thumb--pequena { flex-shrink: 0; width: 84px; }
.related-videos__play--pequeno { width: 26px; height: 26px; }
.related-videos__texto { display: flex; flex-direction: column; min-width: 0; }
.related-videos__titulo--pequeno { font-size: 0.8rem; margin-top: 0; }
.related-videos__item:hover .related-videos__titulo--pequeno { color: var(--cor-principal); }

/* =====================================================================
   RESPONSIVO DA PÁGINA DE CATEGORIA
   ===================================================================== */
@media (max-width: 1024px) {
  .category-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .category-header__nome { font-size: 1.6rem; }
  .category-news-card { flex-direction: column; }
  .category-news-card__capa { width: 100%; }
  .category-news-card__capa img { width: 100%; height: 190px; }
  .category-search form { max-width: none; }
}


/* =====================================================================
   31. PÁGINA ÚLTIMAS NOTÍCIAS (ultimas-noticias.html)
   ---------------------------------------------------------------------
   Reutiliza integralmente os componentes da página de Categoria:
   .category-header, .category-news-card, .category-layout, .anuncio,
   .paginacao, .gallery-filters e .album-nao-encontrado. Os estilos
   abaixo cobrem apenas os elementos exclusivos desta página: contador
   de resultados, categoria+subcategoria no card, selo de "recente" e
   o skeleton de carregamento.
   ===================================================================== */

.results-summary {
  font-size: 0.85rem;
  color: var(--cor-texto-claro);
  margin-bottom: 16px;
}

/* Categoria + subcategoria acima do título, com selo de recente */
.latest-news-card__categorias {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
}
.latest-news-card__categorias .tag { padding: 4px 10px; }
.latest-news-card__subcategoria { color: var(--cor-texto-claro); font-weight: 600; }
.latest-news-card__subcategoria:hover { color: var(--cor-principal); }
.latest-news-card__selo {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Anúncio maior (300x600) da lateral */
.anuncio--sidebar-grande { height: 500px; }

/* Mensagem "sem resultados": botões lado a lado */
.latest-news-sem-resultados__botoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Skeleton de carregamento */
.latest-news-skeleton { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }
.category-news-card--skeleton { pointer-events: none; }
.skeleton-bloco,
.skeleton-linha {
  background: linear-gradient(90deg, var(--cor-fundo-alt) 25%, var(--cor-borda) 50%, var(--cor-fundo-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulso 1.3s ease-in-out infinite;
  border-radius: var(--raio-borda-pequeno);
}
@keyframes skeleton-pulso {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-bloco--capa { flex-shrink: 0; width: 200px; height: 130px; }
.skeleton-bloco--corpo { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.skeleton-linha { height: 12px; width: 100%; }
.skeleton-linha--curta { width: 40%; }
.skeleton-linha--titulo { height: 16px; width: 80%; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 768px) {
  .skeleton-bloco--capa { width: 100%; height: 160px; }
  .category-news-card--skeleton { flex-direction: column; }
}


/* =====================================================================
   32. TRÊS MODELOS DA SEÇÃO "DESTAQUE" DA PÁGINA INICIAL
   ---------------------------------------------------------------------
   Usado em index-modelo-1.html, index-modelo-2.html e index-modelo-3.html.
   O cabeçalho da seção (aba + linha) reaproveita .categoria__cabecalho,
   já existente. As classes abaixo cobrem apenas os cards de notícia
   ("highlight-card") e a organização específica de cada modelo.
   ===================================================================== */

/* ---- Card base, compartilhado pelos três modelos ---- */
.highlight-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow .2s, transform .2s;
}
.highlight-card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }
.highlight-card__link { display: block; height: 100%; }

.highlight-card__categoria {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-principal);
}
.highlight-card__imagem { background: var(--cor-fundo-alt); }
.highlight-card__imagem img { width: 100%; height: auto; display: block; }
.highlight-card__titulo {
  font-weight: 700;
  color: var(--cor-titulo);
  transition: color .15s;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.highlight-card__link:hover .highlight-card__titulo { color: var(--cor-principal); }
.highlight-card__resumo {
  color: var(--cor-texto);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   MODELO 1 — Grade com notícias iguais (3 por linha no desktop)
   ===================================================================== */
.highlight-grid--model-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.highlight-grid--model-1 .highlight-card__categoria { padding: 16px 16px 0; }
.highlight-grid--model-1 .highlight-card__imagem img { margin-top: 8px; }
.highlight-grid--model-1 .highlight-card__titulo {
  font-size: 1.02rem;
  margin: 12px 16px 8px;
  -webkit-line-clamp: 2;
}
.highlight-grid--model-1 .highlight-card__resumo {
  font-size: 0.88rem;
  margin: 0 16px 16px;
  -webkit-line-clamp: 3;
}

@media (max-width: 1024px) {
  .highlight-grid--model-1 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .highlight-grid--model-1 { grid-template-columns: 1fr; }
}

/* =====================================================================
   MODELO 2 — Duas notícias principais + quatro secundárias
   ===================================================================== */
.highlight-principais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.highlight-card--principal .highlight-card__categoria { padding: 18px 18px 0; }
.highlight-card--principal .highlight-card__imagem img { margin-top: 8px; }
.highlight-card--principal .highlight-card__titulo {
  font-size: 1.35rem;
  margin: 14px 18px 10px;
  -webkit-line-clamp: 2;
}
.highlight-card--principal .highlight-card__resumo {
  font-size: 0.92rem;
  margin: 0 18px 18px;
  -webkit-line-clamp: 3;
}

.highlight-secundarias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.highlight-card--secundaria .highlight-card__categoria { padding: 12px 12px 0; }
.highlight-card--secundaria .highlight-card__imagem img { margin-top: 6px; }
.highlight-card--secundaria .highlight-card__titulo {
  font-size: 0.9rem;
  margin: 10px 12px 14px;
  -webkit-line-clamp: 3;
}

@media (max-width: 1024px) {
  .highlight-secundarias { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .highlight-principais { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .highlight-secundarias { grid-template-columns: 1fr; }
}

/* =====================================================================
   MODELO 3 — Lista vertical, imagem à esquerda + texto à direita
   ===================================================================== */
.highlight-lista { display: flex; flex-direction: column; }
.highlight-card--lista {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--cor-borda);
}
.highlight-card--lista:last-child { border-bottom: none; }
.highlight-card--lista:hover { transform: none; box-shadow: none; }
.highlight-card--lista .highlight-card__link {
  display: flex;
  gap: 20px;
  padding: 18px 4px;
}
.highlight-card--lista .highlight-card__imagem {
  flex-shrink: 0;
  width: 200px;
  border-radius: var(--raio-borda-pequeno);
  overflow: hidden;
}
.highlight-card--lista .highlight-card__imagem img { width: 100%; }
.highlight-card--lista .highlight-card__conteudo { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.highlight-card--lista .highlight-card__titulo {
  font-size: 1.1rem;
  margin: 6px 0 8px;
  -webkit-line-clamp: 2;
}
.highlight-card--lista .highlight-card__resumo {
  font-size: 0.9rem;
  -webkit-line-clamp: 2;
}

@media (max-width: 640px) {
  .highlight-card--lista .highlight-card__link { flex-direction: column; padding: 16px 4px; }
  .highlight-card--lista .highlight-card__imagem { width: 100%; }
}


/* =====================================================================
   33. DOIS MODELOS DA SEÇÃO "MAIS LIDAS" DA PÁGINA INICIAL
   ---------------------------------------------------------------------
   Usado em index-mais-lidas-modelo-1.html (carrossel) e
   index-mais-lidas-modelo-2.html (grade fixa). O cabeçalho da seção
   reaproveita .categoria__cabecalho, já existente. As classes abaixo
   cobrem apenas o card "most-read-card" (compartilhado pelos dois
   modelos) e a organização específica de cada um.
   ===================================================================== */

/* ---- Card base, compartilhado pelos dois modelos ---- */
.most-read-category {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-principal);
  margin-bottom: 8px;
}
.most-read-image-link { display: block; border-radius: var(--raio-borda-pequeno); overflow: hidden; background: var(--cor-fundo-alt); }
.most-read-image-link img { width: 100%; height: auto; display: block; }
.most-read-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.most-read-title a:hover { color: var(--cor-principal); }
.most-read-card:hover .most-read-image-link img { opacity: 0.94; }

/* =====================================================================
   MODELO 1 — Carrossel (duas notícias por vez, navegação de 2 em 2)
   ===================================================================== */
.most-read-carousel {
  display: flex;
  align-items: center;
  gap: 10px;
}
.most-read-carousel__viewport { flex: 1; min-width: 0; overflow: hidden; }

.most-read-track {
  display: flex;
  transition: transform .35s ease;
}
.most-read-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.most-read-seta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  color: var(--cor-titulo);
}
.most-read-seta:hover:not(:disabled) { border-color: var(--cor-principal); color: var(--cor-principal); }
.most-read-seta:disabled { opacity: 0.35; cursor: not-allowed; }

.most-read-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.most-read-dots__item {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--cor-borda);
  padding: 0;
}
.most-read-dots__item:hover { background: var(--cor-texto-claro); }
.most-read-dots__item--ativo { background: var(--cor-principal); width: 22px; border-radius: 999px; }

@media (max-width: 640px) {
  .most-read-slide { grid-template-columns: 1fr; }
  .most-read-seta { display: none; } /* no celular, navegação só por arraste/bolinhas */
}

/* =====================================================================
   MODELO 2 — Grade fixa (quatro notícias visíveis, sem navegação)
   ===================================================================== */
.most-read-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.most-read-card--overlay .most-read-category { margin-bottom: 10px; }
.most-read-card--overlay .most-read-image-link {
  position: relative;
  border-radius: var(--raio-borda);
}

.most-read-card__sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 75%);
  pointer-events: none;
}

.most-read-title--overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  color: #fff;
  font-size: 1.05rem;
  margin-top: 0;
  -webkit-line-clamp: 3;
}

@media (max-width: 640px) {
  .most-read-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   34. SEÇÃO "VÍDEOS" NA PÁGINA INICIAL (home-videos)
   ---------------------------------------------------------------------
   Reutiliza .categoria__titulo (título com a mesma aba de destaque das
   demais seções), .btn/.btn--secundario e .tag já existentes. As
   classes abaixo cobrem apenas o cabeçalho específico (título +
   descrição + botão alinhados) e os cards de vídeo da grade.
   ===================================================================== */

.home-videos { margin-bottom: 44px; }

.home-videos-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--cor-principal);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.home-videos-heading__titulo { margin-bottom: 6px; padding-bottom: 0; border-bottom: none; }
.home-videos-heading__descricao { font-size: 0.9rem; color: var(--cor-texto-claro); }
.home-videos-all { flex-shrink: 0; margin-top: 2px; }

.home-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.home-video-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow .2s, transform .2s;
}
.home-video-card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }

.home-video-thumbnail { position: relative; display: block; }
.home-video-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

.home-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  transition: background .15s, transform .15s;
}
.home-video-thumbnail:hover .home-video-play { background: var(--cor-principal); transform: translate(-50%, -50%) scale(1.08); }

.home-video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: var(--raio-borda-pequeno);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.home-video-content { padding: 14px 16px 16px; }
.home-video-category { margin-bottom: 10px; }
.home-video-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-video-title a:hover { color: var(--cor-principal); }
.home-video-date { font-size: 0.78rem; color: var(--cor-texto-claro); }

/* =====================================================================
   RESPONSIVO DA SEÇÃO DE VÍDEOS
   Desktop/Notebook: 3 colunas · Tablet: 2 · Celular: 1
   ===================================================================== */
@media (max-width: 1024px) {
  .home-videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-videos-header { flex-direction: column; align-items: flex-start; }
  .home-videos-all { align-self: stretch; text-align: center; }
}
@media (max-width: 640px) {
  .home-videos-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   35. SEÇÃO "JORNAL EM PDF" NA PÁGINA INICIAL (home-newspaper)
   ---------------------------------------------------------------------
   Reutiliza .categoria__titulo, .btn/.btn--principal/.btn--secundario
   e .tag já existentes. As classes abaixo cobrem apenas o cabeçalho
   específico da seção, o card de edição ("newspaper-edition-card") e
   o bloco de chamada para o arquivo completo.
   ===================================================================== */

.home-newspaper { margin-bottom: 44px; }

.home-newspaper-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--cor-principal);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.home-newspaper-heading__titulo { margin-bottom: 6px; padding-bottom: 0; border-bottom: none; }
.home-newspaper-heading__descricao { font-size: 0.9rem; color: var(--cor-texto-claro); }
.home-newspaper-all { flex-shrink: 0; margin-top: 2px; }

.home-newspaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 28px;
}

/* Card de edição */
.newspaper-edition-card {
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow .2s, transform .2s;
}
.newspaper-edition-card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }

/* Cabeçalho estilo "capa de jornal" */
.newspaper-edition-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
}
.newspaper-edition-header__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--cor-titulo);
}
.newspaper-edition-header__dados {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--cor-texto-claro);
  text-align: right;
}

.newspaper-edition-content { padding: 16px 16px 0; }
.newspaper-edition-category { margin-bottom: 10px; }
.newspaper-edition-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newspaper-edition-title a:hover { color: var(--cor-principal); }
.newspaper-edition-summary {
  font-size: 0.85rem;
  color: var(--cor-texto);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.newspaper-edition-image { display: block; }
.newspaper-edition-image img { width: 100%; aspect-ratio: 16/9.2; object-fit: cover; display: block; }

.newspaper-edition-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.78rem;
  color: var(--cor-texto-claro);
  border-top: 1px solid var(--cor-borda);
}
.newspaper-edition-meta svg { flex-shrink: 0; color: var(--cor-principal); }

.newspaper-edition-view { margin: 14px 16px 16px; text-align: center; }

/* Bloco inferior: chamada para o arquivo completo */
.home-newspaper-archive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 22px 26px;
}
.home-newspaper-archive-info { display: flex; align-items: center; gap: 16px; }
.home-newspaper-archive-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cor-principal);
  color: #fff;
}
.home-newspaper-archive-info__titulo { font-size: 1.05rem; font-weight: 700; color: var(--cor-titulo); margin-bottom: 4px; }
.home-newspaper-archive-info__texto { font-size: 0.88rem; color: var(--cor-texto); }
.home-newspaper-archive-link { flex-shrink: 0; }

/* =====================================================================
   RESPONSIVO DA SEÇÃO JORNAL EM PDF (HOME)
   ===================================================================== */
@media (max-width: 1024px) {
  .home-newspaper-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-newspaper-header { flex-direction: column; align-items: flex-start; }
  .home-newspaper-all { align-self: stretch; text-align: center; }
  .home-newspaper-archive { flex-direction: column; align-items: flex-start; }
  .home-newspaper-archive-link { align-self: stretch; text-align: center; }
}
@media (max-width: 640px) {
  .home-newspaper-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   DESTAQUE TEMPORÁRIO AO ACESSAR UMA EDIÇÃO VIA ÂNCORA (jornal.html)
   ===================================================================== */
.newspaper-card--destacada {
  outline: 2px solid var(--cor-principal);
  outline-offset: 2px;
  box-shadow: var(--sombra-card-hover);
  transition: outline-color .3s, box-shadow .3s;
}


/* =====================================================================
   36. SEÇÃO "GALERIA DE IMAGENS" NA PÁGINA INICIAL (home-gallery)
   ---------------------------------------------------------------------
   Reutiliza .categoria__titulo, .btn/.btn--principal/.btn--secundario
   e .tag já existentes. As classes abaixo cobrem apenas o cabeçalho
   específico da seção, o card de álbum ("home-gallery-card" — com
   UMA ÚNICA imagem de capa, sem mosaico) e o bloco de chamada final.
   ===================================================================== */

.home-gallery { margin-bottom: 44px; }

.home-gallery-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--cor-principal);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.home-gallery-heading__titulo { margin-bottom: 6px; padding-bottom: 0; border-bottom: none; }
.home-gallery-heading__descricao { font-size: 0.9rem; color: var(--cor-texto-claro); }
.home-gallery-all { flex-shrink: 0; margin-top: 2px; }

.home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 28px;
}

/* Card de álbum: uma única imagem de capa, sem mosaico/colagem */
.home-gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow .2s, transform .2s;
}
.home-gallery-card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }

.home-gallery-cover { position: relative; display: block; }
.home-gallery-cover img { width: 100%; height: auto; display: block; }

.home-gallery-photo-count {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.home-gallery-content { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.home-gallery-category { margin-bottom: 10px; align-self: flex-start; }
.home-gallery-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-gallery-title a:hover { color: var(--cor-principal); }
.home-gallery-summary {
  font-size: 0.88rem;
  color: var(--cor-texto);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-gallery-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--cor-texto-claro);
  margin-bottom: 16px;
}
.home-gallery-view { margin-top: auto; text-align: center; }

/* Bloco inferior: chamada para o arquivo completo de álbuns */
.home-gallery-archive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 22px 26px;
}
.home-gallery-archive-info { display: flex; align-items: center; gap: 16px; }
.home-gallery-archive-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cor-principal);
  color: #fff;
}
.home-gallery-archive-info__titulo { font-size: 1.05rem; font-weight: 700; color: var(--cor-titulo); margin-bottom: 4px; }
.home-gallery-archive-info__texto { font-size: 0.88rem; color: var(--cor-texto); }
.home-gallery-archive-link { flex-shrink: 0; }

/* =====================================================================
   RESPONSIVO DA SEÇÃO GALERIA DE IMAGENS (HOME)
   ===================================================================== */
@media (max-width: 1024px) {
  .home-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-gallery-header { flex-direction: column; align-items: flex-start; }
  .home-gallery-all { align-self: stretch; text-align: center; }
  .home-gallery-archive { flex-direction: column; align-items: flex-start; }
  .home-gallery-archive-link { align-self: stretch; text-align: center; }
}
@media (max-width: 640px) {
  .home-gallery-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   37. ENQUETE NA COLUNA LATERAL (sidebar-poll)
   ---------------------------------------------------------------------
   Reutiliza .sidebar__bloco / .sidebar__titulo (mesmo card com fundo,
   borda e espaçamento interno já usados nos outros blocos laterais),
   .btn/.btn--principal/.btn--secundario e .gallery-sem-resultados
   (para o estado "sem enquete ativa"). As classes abaixo cobrem
   apenas as opções de resposta, a barra de progresso e as mensagens.
   ===================================================================== */

.sidebar-poll-pergunta {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cor-titulo);
  line-height: 1.4;
  margin-bottom: 14px;
  padding: 0;
  border: none;
}

.sidebar-poll-options { border: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }

.sidebar-poll-option {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sidebar-poll-option:hover { border-color: var(--cor-principal); background: var(--cor-fundo-alt); }
.sidebar-poll-option--escolhida { border-color: var(--cor-principal); background: var(--cor-fundo-alt); }

.sidebar-poll-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--cor-texto);
  margin-bottom: 8px;
}
.sidebar-poll-option-header strong { color: var(--cor-titulo); font-size: 0.85rem; flex-shrink: 0; }

.sidebar-poll-choice { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar-poll-choice input[type="radio"] { width: 16px; height: 16px; accent-color: var(--cor-principal); flex-shrink: 0; }
.sidebar-poll-choice span { overflow-wrap: anywhere; }

.sidebar-poll-progress {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  overflow: hidden;
}
.sidebar-poll-progress__barra { display: block; height: 100%; background: var(--cor-principal); border-radius: 999px; }

.sidebar-poll-total {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--cor-texto-claro);
  margin-bottom: 14px;
}

.sidebar-poll-message {
  font-size: 0.82rem;
  padding: 10px 12px;
  border-radius: var(--raio-borda-pequeno);
  margin-bottom: 14px;
}
.sidebar-poll-message--erro { background: #fdf1f0; color: #b3261e; }
.sidebar-poll-message--sucesso { background: #eef8f1; color: #1f7a4d; }

.sidebar-poll-submit { width: 100%; margin-bottom: 10px; }
.sidebar-poll-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.sidebar-poll-all { display: block; width: 100%; text-align: center; }

.sidebar-poll__sem-ativa { text-align: center; }
.sidebar-poll__sem-ativa p { font-size: 0.88rem; color: var(--cor-texto); margin-bottom: 14px; }


/* =====================================================================
   38. MODELOS 2, 3 E 4 DA ÁREA "NOTÍCIAS PRINCIPAIS"
   ---------------------------------------------------------------------
   Usado em index-modelo-2.html, index-modelo-3.html e
   index-modelo-4.html. O Modelo 1 (index-modelo-1.html) preserva o
   CSS/HTML da área .destaque já existente e NÃO é afetado por nada
   desta seção. Conforme pedido, as classes novas começam a partir do
   número 2 para não conflitar com o que já existe.
   ===================================================================== */

/* ---- Card compartilhado pelos Modelos 2, 3 e 4 ---- */
.main-news-card { display: block; }
.main-news-card__category {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: var(--cor-principal);
  padding: 5px 12px;
  border-radius: var(--raio-borda-pequeno);
  margin-bottom: 12px;
}
.main-news-card__image { display: block; border-radius: var(--raio-borda); overflow: hidden; margin-bottom: 12px; }
.main-news-card__image img { width: 100%; height: auto; display: block; }
.main-news-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-titulo);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-news-card__title a:hover { color: var(--cor-principal); }
.main-news-card__summary {
  font-size: 0.9rem;
  color: var(--cor-texto);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Controles de carrossel, compartilhados pelos Modelos 2 e 3 ---- */
.main-news-model-2__carousel,
.main-news-model-3__carousel {
  display: flex;
  align-items: center;
  gap: 12px;
}
.main-news-model-2__viewport,
.main-news-model-3__viewport { flex: 1; min-width: 0; overflow: hidden; }

.main-news-model-2__track,
.main-news-model-3__track {
  display: flex;
  transition: transform .4s ease;
}
.main-news-carousel__slide { flex: 0 0 100%; min-width: 0; }

.main-news-model-2__previous,
.main-news-model-2__next,
.main-news-model-3__previous,
.main-news-model-3__next {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-card);
  color: var(--cor-titulo);
}
.main-news-model-2__previous:hover,
.main-news-model-2__next:hover,
.main-news-model-3__previous:hover,
.main-news-model-3__next:hover { border-color: var(--cor-principal); color: var(--cor-principal); }

.main-news-model-2__indicators,
.main-news-model-3__indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.main-news-carousel__indicador {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--cor-borda);
  padding: 0;
}
.main-news-carousel__indicador:hover { background: var(--cor-texto-claro); }
.main-news-carousel__indicador--ativo { background: var(--cor-principal); width: 22px; border-radius: 999px; }

/* Respeita prefers-reduced-motion: remove a transição de deslizamento */
@media (prefers-reduced-motion: reduce) {
  .main-news-model-2__track,
  .main-news-model-3__track { transition: none; }
}

/* =====================================================================
   MODELO 2 — Carrossel com 2 notícias por vez (1 no celular)
   ===================================================================== */
.main-news-model-2 { margin-bottom: 40px; }
.main-news-model-2 .main-news-carousel__slide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.main-news-model-2 .main-news-card__image { background: var(--cor-fundo-alt); }


@media (max-width: 768px) {
  .main-news-model-2 .main-news-carousel__slide { grid-template-columns: 1fr; }
}

/* =====================================================================
   MODELO 3 — Carrossel grande com 1 notícia por vez (todas as telas)
   ===================================================================== */
.main-news-model-3 { margin-bottom: 40px; }
.main-news-model-3 .main-news-carousel__slide { max-width: 100%; }
.main-news-model-3 .main-news-card__title { font-size: 1.6rem; }
.main-news-model-3 .main-news-card__summary { font-size: 1rem; max-width: 760px; }

@media (max-width: 768px) {
  .main-news-model-3 .main-news-card__title { font-size: 1.25rem; }
}

/* =====================================================================
   MODELO 4 — Grade fixa com 3 notícias (sem carrossel)
   ===================================================================== */
.main-news-model-4 { margin-bottom: 40px; }
.main-news-model-4__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.main-news-model-4 .main-news-card__image { background: var(--cor-fundo-alt); }


@media (max-width: 1024px) {
  .main-news-model-4__grid { grid-template-columns: repeat(2, 1fr); }
  .main-news-model-4__grid .main-news-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .main-news-model-4__grid { grid-template-columns: 1fr; }
  .main-news-model-4__grid .main-news-card:nth-child(3) { grid-column: auto; }
}