/*
  Site público - mesma paleta e linguagem visual do painel admin (Skydash):
  primária #4B49AC, cartões com borda + raio de 20px (sem sombra pesada),
  fonte do sistema, cores de badge idênticas às do vertical-layout-light/style.css.
*/
:root {
  --cor-primaria: #4B49AC;
  --cor-primaria-hover: #3f3e91;
  --cor-primaria-active: #3b3a88;
  --cor-sucesso: #57B657;
  --cor-alerta: #FFC100;
  --cor-perigo: #FF4747;
  --cor-borda: #e3e3e3;
  /* Mesma pilha de fontes do site de referência (LabEduc/Marajó, labeducmarajo.ufpa.br):
     Rawline (fonte oficial do gov.br Design System, auto-hospedada — ver @font-face
     abaixo) com Raleway (Google Fonts, carregada em includes_publico/header.php) como
     fallback, igual lá. Usada só no título/subtítulo/menu/submenu do cabeçalho e do
     menu lateral — o resto do site continua com a fonte do sistema (ver `body` abaixo),
     não foi pedido trocar tudo. */
  --fonte-marca: Rawline, Raleway, sans-serif;
}

@font-face {
  font-family: Rawline;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rawline'), url('../fonts/rawline-400.woff') format('woff');
}

@font-face {
  font-family: Rawline;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Rawline'), url('../fonts/rawline-500.woff') format('woff');
}

@font-face {
  font-family: Rawline;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Rawline'), url('../fonts/rawline-600.woff') format('woff');
}

@font-face {
  font-family: Rawline;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Rawline'), url('../fonts/rawline-700.woff') format('woff');
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1F1F1F;
  background: #f4f4f8;
}

a {
  color: var(--cor-primaria);
}

a:hover {
  color: var(--cor-primaria-active);
}

/* Cabeçalho novo (2026-10): barra fina fixa no topo (sticky, não fixed — por isso sem
   padding-top de compensação) com botão de menu + logo/nome/subtítulo, abrindo um menu
   lateral (offcanvas) com os itens em acordeão + redes sociais, no estilo do site de
   referência (LabEduc/Marajó, ver memória do projeto). Substitui o navbar horizontal
   com dropdowns que existia antes. */
.site-header-novo {
  background: #fff;
  border-bottom: 1px solid var(--cor-borda);
  /* `fixed`, não `sticky`: o template compartilhado (vertical-layout-light/style.css,
     carregado também no site público pros estilos base do Bootstrap) tem `overflow-x:
     hidden` no `html`/`body` — isso quebra `position:sticky` em vários navegadores
     (vira ancestral com scroll próprio, o sticky perde a referência do viewport).
     `fixed` não sofre desse problema. Como ela sai do fluxo normal, o `<main>`
     (ver includes_publico/header.php) ganha um padding-top equivalente à altura da
     barra, pra não ficar escondido atrás dela. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  overflow: visible;
}

.site-header-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  /* Altura FIXA de propósito (não cresce com o conteúdo) — o tamanho do ícone na barra
     é uma escolha independente do admin (painel "Configurações do Site"), mas a barra
     em si (fina, fixa no topo) nunca deve mudar de altura por causa disso. Um ícone
     maior que a barra simplesmente "vaza" pra fora dela (ver overflow:visible abaixo),
     em vez de esticar a barra verticalmente. */
  height: 64px;
}

.btn-abrir-menu-site {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #333;
  padding: 6px 8px;
  flex-shrink: 0;
}

.btn-abrir-menu-site:hover {
  color: var(--cor-primaria);
}

.site-header-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.site-header-marca:hover {
  text-decoration: none;
  color: inherit;
}

/* Caixa fixa (altura E largura) com object-fit:contain — qualquer imagem enviada
   (grande, pequena, bem larga ou bem alta) encolhe/ajusta dentro desse espaço sem
   distorcer e sem nunca estourar o layout do cabeçalho. Só limitar a altura (como
   era antes) não bastava: uma imagem bem larga ficava enorme em largura mesmo com
   42px de altura, empurrando o nome/subtítulo pra fora. */
.site-header-logo {
  height: 42px;
  width: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-header-textos {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.site-header-nome {
  font-family: var(--fonte-marca);
  font-weight: 600;
  font-size: 1.05rem;
  color: #2b2b2b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header-subtitulo {
  font-family: var(--fonte-marca);
  font-size: 0.8rem;
  color: var(--cor-primaria);
}

/* Ícones de redes sociais à direita da barra do topo (só aparece se pelo menos um link
   estiver preenchido — mesma condição `$temRedeSocial` já usada no menu lateral).
   `margin-left: auto` empurra pro canto direito dentro do `.site-header-barra`, que já
   é flex. */
.site-header-redes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding-left: 14px;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.site-header-redes a {
  color: #555;
}

.site-header-redes a:hover {
  color: var(--cor-primaria);
}

@media (max-width: 576px) {
  /* Em telas estreitas, o nome do site deixa de cortar com "..." e passa a quebrar em
     várias linhas (igual ao site de referência, LabEduc/Marajó) — senão um nome longo
     fica ilegível numa tela de celular. A barra, que normalmente tem altura FIXA
     (configurável no Dashboard, ver `site_barra_altura`), vira `height: auto` só aqui
     pra acompanhar quantas linhas o texto precisar, sem cortar nada; o `!important` é
     necessário porque a altura fixa vem de um `style="height:Xpx"` inline (PHP), que
     normalmente venceria uma regra de media query comum. */
  .site-header-nome {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .site-header-barra {
    height: auto !important;
    padding: 10px 16px;
  }

  /* Logo escondida só na barra do topo (não no menu lateral, que tem espaço de sobra)
     — numa tela estreita ela disputa espaço com o nome/subtítulo, que já precisam de
     várias linhas pra caber o texto completo. As regras de tamanho configurado no
     Dashboard (`.site-header-logo.site-marca-icone-tam-*`) só mexem em height/width,
     nunca em display, então não há conflito de especificidade a vencer aqui. */
  .site-header-logo {
    display: none;
  }

  /* Menu lateral preenche a tela inteira no mobile, em vez de ficar limitado aos
     200-500px configuráveis no Dashboard (`site_menu_largura`) + o teto de 85vw —
     numa tela de celular, 85% da largura ainda deixa uma faixa fina sobrando ao lado.
     Os DOIS precisam de `!important`: `width` porque a largura configurada vem de um
     `style="width:Xpx"` inline (PHP); `max-width` porque a regra-base `.menu-lateral-
     -site { max-width: 85vw }` (mais abaixo no arquivo) tem a mesma especificidade e
     vem DEPOIS no CSS — sem `!important` ela venceria mesmo dentro da media query,
     já que estar numa media query não dá prioridade extra por si só, só aplica a
     regra condicionalmente; quem decide empate de especificidade é a ordem no arquivo. */
  .menu-lateral-site {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Subtítulo escondido + título sem negrito só no CABEÇALHO DO MENU LATERAL (não na
     barra do topo) — as regras-base (`.menu-lateral-nome`/`.menu-lateral-subtitulo`,
     mais abaixo no arquivo) têm a mesma especificidade e vêm DEPOIS, então precisam de
     `!important` aqui, mesmo motivo do `.menu-lateral-site` logo acima. */
  .menu-lateral-nome {
    font-weight: normal !important;
  }

  .menu-lateral-subtitulo {
    display: none !important;
  }
}

.menu-lateral-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1040;
}

.menu-lateral-overlay.visivel {
  opacity: 1;
  pointer-events: auto;
}

.menu-lateral-site {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: #fff;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.menu-lateral-site.aberto {
  transform: translateX(0);
}

.menu-lateral-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.menu-lateral-logo {
  height: 38px;
  width: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-lateral-textos {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.25;
  min-width: 0;
}

.menu-lateral-nome {
  font-family: var(--fonte-marca);
  font-weight: 600;
  font-size: 0.95rem;
  color: #2b2b2b;
}

.menu-lateral-subtitulo {
  font-family: var(--fonte-marca);
  font-size: 0.75rem;
  color: #888;
}

/* Tamanhos do ícone/título/subtítulo (configuráveis no Dashboard, painel
   "Configurações do Site") — mesmo padrão já usado pros tamanhos de banner
   (hero-tamanho-* / titulo-tamanho-* / subtitulo-tamanho-*).
   O ícone tem 2 campos TOTALMENTE independentes (barra do topo / menu lateral, cada
   um com sua própria chave salva em `site_icone_tamanho_barra`/`site_icone_tamanho_menu`)
   — cada um usa a MESMA escala de pixels abaixo, mas escolhida sem nenhuma relação
   entre si; antes a barra do topo tinha um teto artificial mais baixo que o menu, o
   que fazia parecer que o tamanho "não aplicava" quando na real só o menu mudava. */
.site-header-logo.site-marca-icone-tam-minusculo,
.menu-lateral-logo.menu-lateral-marca-icone-tam-minusculo { height: 24px; width: 24px; }
.site-header-logo.site-marca-icone-tam-pequeno,
.menu-lateral-logo.menu-lateral-marca-icone-tam-pequeno { height: 32px; width: 32px; }
.site-header-logo.site-marca-icone-tam-medio,
.menu-lateral-logo.menu-lateral-marca-icone-tam-medio { height: 42px; width: 42px; }
.site-header-logo.site-marca-icone-tam-grande,
.menu-lateral-logo.menu-lateral-marca-icone-tam-grande { height: 54px; width: 54px; }
.site-header-logo.site-marca-icone-tam-muito-grande,
.menu-lateral-logo.menu-lateral-marca-icone-tam-muito-grande { height: 68px; width: 68px; }
.site-header-logo.site-marca-icone-tam-enorme,
.menu-lateral-logo.menu-lateral-marca-icone-tam-enorme { height: 88px; width: 88px; }
.site-header-logo.site-marca-icone-tam-gigante,
.menu-lateral-logo.menu-lateral-marca-icone-tam-gigante { height: 110px; width: 110px; }
.site-header-logo.site-marca-icone-tam-extra-gigante,
.menu-lateral-logo.menu-lateral-marca-icone-tam-extra-gigante { height: 140px; width: 140px; }
.site-header-logo.site-marca-icone-tam-maximo,
.menu-lateral-logo.menu-lateral-marca-icone-tam-maximo { height: 180px; width: 180px; }

.site-header-nome.site-marca-titulo-tam-minusculo { font-size: 0.8rem; }
.site-header-nome.site-marca-titulo-tam-pequeno { font-size: 0.92rem; }
.site-header-nome.site-marca-titulo-tam-medio { font-size: 1.05rem; }
.site-header-nome.site-marca-titulo-tam-grande { font-size: 1.25rem; }
.site-header-nome.site-marca-titulo-tam-muito-grande { font-size: 1.5rem; }
.site-header-nome.site-marca-titulo-tam-enorme { font-size: 1.85rem; }

.menu-lateral-nome.menu-lateral-marca-titulo-tam-minusculo { font-size: 0.72rem; }
.menu-lateral-nome.menu-lateral-marca-titulo-tam-pequeno { font-size: 0.84rem; }
.menu-lateral-nome.menu-lateral-marca-titulo-tam-medio { font-size: 0.95rem; }
.menu-lateral-nome.menu-lateral-marca-titulo-tam-grande { font-size: 1.12rem; }
.menu-lateral-nome.menu-lateral-marca-titulo-tam-muito-grande { font-size: 1.35rem; }
.menu-lateral-nome.menu-lateral-marca-titulo-tam-enorme { font-size: 1.65rem; }

.site-header-subtitulo.site-marca-subtitulo-tam-minusculo { font-size: 0.62rem; }
.site-header-subtitulo.site-marca-subtitulo-tam-pequeno { font-size: 0.7rem; }
.site-header-subtitulo.site-marca-subtitulo-tam-medio { font-size: 0.8rem; }
.site-header-subtitulo.site-marca-subtitulo-tam-grande { font-size: 0.92rem; }
.site-header-subtitulo.site-marca-subtitulo-tam-muito-grande { font-size: 1.05rem; }
.site-header-subtitulo.site-marca-subtitulo-tam-enorme { font-size: 1.25rem; }

.menu-lateral-subtitulo.menu-lateral-marca-subtitulo-tam-minusculo { font-size: 0.58rem; }
.menu-lateral-subtitulo.menu-lateral-marca-subtitulo-tam-pequeno { font-size: 0.66rem; }
.menu-lateral-subtitulo.menu-lateral-marca-subtitulo-tam-medio { font-size: 0.75rem; }
.menu-lateral-subtitulo.menu-lateral-marca-subtitulo-tam-grande { font-size: 0.86rem; }
.menu-lateral-subtitulo.menu-lateral-marca-subtitulo-tam-muito-grande { font-size: 0.98rem; }
.menu-lateral-subtitulo.menu-lateral-marca-subtitulo-tam-enorme { font-size: 1.15rem; }

.menu-lateral-fechar {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cor-perigo);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-lateral-itens {
  padding: 8px 0;
  flex: 1;
}

.menu-lateral-item,
.menu-lateral-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 13px 18px;
  font-family: var(--fonte-marca);
  font-size: 0.95rem;
  color: #333 !important;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f5;
  cursor: pointer;
}

.menu-lateral-item:hover,
.menu-lateral-toggle:hover {
  background: #f8f8fb;
  color: var(--cor-primaria) !important;
  text-decoration: none;
}

.menu-lateral-item.active {
  color: var(--cor-primaria) !important;
  font-weight: 600;
}

.menu-lateral-seta {
  transition: transform 0.2s ease;
  font-size: 0.7rem;
  margin-left: 8px;
}

.menu-lateral-toggle.aberto .menu-lateral-seta {
  transform: rotate(180deg);
}

.menu-lateral-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  /* Contraste forte contra os itens de nível 1 (fundo branco) — mesmo espírito do
     site de referência (LabEduc/Marajó): o grupo aberto vira um bloco de cor sólida,
     deixando claro visualmente que esses itens pertencem a ele. */
  background: var(--cor-primaria);
}

.menu-lateral-submenu.mostrar {
  max-height: 600px;
}

.menu-lateral-subitem {
  display: block;
  padding: 10px 18px 10px 32px;
  font-family: var(--fonte-marca);
  font-size: 0.88rem;
  color: #fff !important;
  text-decoration: none;
}

.menu-lateral-subitem:hover {
  background: var(--cor-primaria-hover);
  color: #fff !important;
  text-decoration: none;
}

.menu-lateral-item-estatico {
  cursor: default;
  color: #999 !important;
}

.menu-lateral-redes {
  padding: 16px 18px;
  border-top: 1px solid var(--cor-borda);
}

.menu-lateral-redes-titulo {
  font-size: 0.78rem;
  color: #999;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.menu-lateral-redes-icones {
  display: flex;
  gap: 16px;
  font-size: 1.25rem;
}

.menu-lateral-redes-icones a {
  color: #555;
}

.menu-lateral-redes-icones a:hover {
  color: var(--cor-primaria);
}

/* Botões alinhados ao .btn-primary/.btn-outline-primary do admin */
.btn-primary {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-active);
}

.btn-outline-primary {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.btn-outline-primary:hover {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

/* Banner + barra de links institucionais contidos juntos (não em largura cheia) — só a
   página Início usa, ver views_publicas/inicio.php (os dois ficam dentro do MESMO
   wrapper, pra sempre terem a mesma largura e não ter espaço entre eles). Sem
   margin-top nem padding lateral de propósito: a imagem do banner precisa continuar
   colada na barra do topo (sem vão) e esticar até as bordas da própria caixa — cada
   elemento interno (banner e barra de links) já cuida do próprio respiro horizontal
   via `.container`. As demais páginas que chamam renderizarBanner() continuam de
   borda a borda (sem este wrapper), então essa regra nunca afeta o banner delas. */
.hero-contido {
  max-width: 1140px;
  margin: 0 auto;
}

/* Hero em degradê usando os mesmos tons dos stat cards do dashboard admin (card-tale -> card-dark-blue) */
.hero {
  background: linear-gradient(135deg, #7DA0FA, #4747A1);
  color: #fff;
  padding: 70px 0;
}

/* Com link (banner_link de uma página individual), o `<section>` vira `<a>` — reseta
   o estilo padrão de link do navegador pra continuar parecendo a mesma faixa de sempre,
   mesma ideia já usada no `.hero-carrossel-slide` quando o item tem link. */
a.hero {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.hero:hover {
  color: inherit;
  text-decoration: none;
}

.hero-titulo {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-subtitulo {
  font-weight: 400;
}

/* 2 camadas: a imagem (1ª, por cima) em "contain" pra nunca cortar nada, e o degradê
   (2ª, por baixo, montado por PHP a partir da cor+opacidade escolhidas no admin, ver
   gradienteCorFundo() em includes_publico/banner.php) preenchendo só o espaço que
   sobra ao redor dela (bordas, quando a proporção da imagem não enche a faixa toda),
   nunca por cima. */
.hero.hero-com-imagem {
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
}

.hero.hero-com-imagem .hero-titulo,
.hero.hero-com-imagem .hero-subtitulo {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Tamanho do banner (espaçamento/altura da faixa) — `min-height` garante que a imagem
   de fundo realmente ocupe a altura escolhida mesmo sem título/subtítulo preenchido
   (sem isso, "Pequeno"/"Médio" ficavam do tamanho só do padding, bem menor que a
   imagem enviada pelo admin, que é cortada pelo `background-size: cover`). */
.hero.hero-tamanho-pequeno {
  padding: 32px 0;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.hero-tamanho-medio {
  padding: 70px 0;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.hero-tamanho-grande {
  padding: 130px 0;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.hero-tamanho-muito-grande {
  padding: 170px 0;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.hero-tamanho-enorme {
  padding: 210px 0;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.hero-tamanho-extra-enorme {
  padding: 250px 0;
  min-height: 820px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tamanho do título, independente do tamanho do banner */
.titulo-tamanho-pequeno { font-size: 1.75rem; }
.titulo-tamanho-medio { font-size: 2.5rem; }
.titulo-tamanho-grande { font-size: 3.5rem; }

/* Tamanho do subtítulo, independente do tamanho do banner */
.subtitulo-tamanho-pequeno { font-size: 1rem; }
.subtitulo-tamanho-medio { font-size: 1.25rem; }
.subtitulo-tamanho-grande { font-size: 1.6rem; }

@media (max-width: 576px) {
  .hero.hero-tamanho-pequeno {
    padding: 24px 0;
    min-height: 160px;
  }

  .hero.hero-tamanho-medio {
    padding: 45px 0;
    min-height: 240px;
  }

  .hero.hero-tamanho-grande {
    padding: 70px 0;
    min-height: 320px;
  }

  .hero.hero-tamanho-muito-grande {
    padding: 90px 0;
    min-height: 400px;
  }

  .hero.hero-tamanho-enorme {
    padding: 110px 0;
    min-height: 480px;
  }

  .hero.hero-tamanho-extra-enorme {
    padding: 130px 0;
    min-height: 560px;
  }

  .titulo-tamanho-pequeno { font-size: 1.4rem; }
  .titulo-tamanho-medio { font-size: 1.8rem; }
  .titulo-tamanho-grande { font-size: 2.2rem; }

  .subtitulo-tamanho-pequeno { font-size: 0.9rem; }
  .subtitulo-tamanho-medio { font-size: 1rem; }
  .subtitulo-tamanho-grande { font-size: 1.15rem; }
}

/* Modelo de banner "Carrossel" — vários slides empilhados no MESMO espaço (todos
   presentes o tempo todo, um por cima do outro via position:absolute), trocando via JS
   vanilla (ver includes_publico/banner.php, renderizarBannerCarrossel()) só alternando
   a classe `.ativo`, que controla a opacidade — a transição suave (crossfade) vem só
   do `transition: opacity` abaixo, sem precisar de nenhuma lógica nova no JS. Reaproveita
   .hero-tamanho-* / .titulo-tamanho-* / .subtitulo-tamanho-* já existentes pra altura/fonte,
   igual ao modelo único. */
/* Wrapper fora do `.hero-carrossel` (que tem overflow:hidden, por causa dos slides) —
   as setas de navegação viraram filhas DESTE wrapper (não mais do `.hero-carrossel`
   em si), só pra não ficarem cortadas pelo overflow:hidden dele perto da borda. Ficam
   DENTRO da imagem (perto das bordas dela), não na margem da página ao redor do banner
   contido — já foi tentado fazer elas saírem pra fora (truque de "quebrar pra 100vw"),
   mas não bateu com a referência do usuário nem funcionou de forma confiável, revertido. */
.hero-carrossel-wrapper {
  position: relative;
}

.hero-carrossel {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hero-carrossel-trilho {
  position: relative;
}

.hero-carrossel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #7DA0FA, #4747A1);
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  padding: 70px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
  color: inherit;
  text-decoration: none;
}

/* Quando o item tem link, o slide inteiro vira um <a> (ver renderizarBannerCarrossel())
   em vez do antigo botão "Saiba mais" isolado — precisa repetir o reset de cor/sublinhado
   no hover porque o estado `:hover` de link tem precedência sobre a cor herdada. */
.hero-carrossel-slide:hover {
  color: inherit;
  text-decoration: none;
}

.hero-carrossel-slide.ativo {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hero-carrossel-slide .hero-titulo,
.hero-carrossel-slide .hero-subtitulo {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Como os slides agora são position:absolute (sem altura própria), quem precisa do
   min-height por tamanho é a trilha (o "chão" onde eles flutuam por cima). O MESMO
   valor também é aplicado direto no `.hero-carrossel-wrapper` (que tem a classe
   `hero-tamanho-X` duplicada, ver renderizarBannerCarrossel()) — sem isso, a altura do
   wrapper dependia de "herdar" a altura do `.hero-carrossel` lá dentro (que por sua vez
   depende da trilha, mais um nível), e as setas (filhas do wrapper) ficavam
   descentralizadas porque essa altura "herdada" não batia com a esperada. Com os dois
   lendo o MESMO número fixo, não sobra ambiguidade nenhuma. */
.hero-carrossel.hero-tamanho-pequeno .hero-carrossel-trilho { min-height: 220px; }
.hero-carrossel.hero-tamanho-medio .hero-carrossel-trilho { min-height: 340px; }
.hero-carrossel.hero-tamanho-grande .hero-carrossel-trilho { min-height: 460px; }
.hero-carrossel.hero-tamanho-muito-grande .hero-carrossel-trilho { min-height: 580px; }
.hero-carrossel.hero-tamanho-enorme .hero-carrossel-trilho { min-height: 700px; }
.hero-carrossel.hero-tamanho-extra-enorme .hero-carrossel-trilho { min-height: 820px; }

/* `height` EXPLÍCITO (não `min-height`) de propósito — essa é a causa raiz real do
   desalinhamento vertical das setas: confirmado via DevTools (getBoundingClientRect)
   que `top:50%` numa seta posicionada dentro de um `.hero-carrossel-wrapper` que só
   tinha `min-height` resolvia a porcentagem contra uma altura BEM diferente da altura
   real renderizada do wrapper (o navegador não trata um `min-height` como uma altura
   "definida" pra fins de resolver `top`/`bottom` em porcentagem num filho absolute,
   mesmo quando o conteúdo acaba tendo exatamente essa altura) — com `height` fixo, a
   porcentagem passa a resolver contra o número certo, sem ambiguidade. */
.hero-carrossel-wrapper.hero-tamanho-pequeno { height: 220px; }
.hero-carrossel-wrapper.hero-tamanho-medio { height: 340px; }
.hero-carrossel-wrapper.hero-tamanho-grande { height: 460px; }
.hero-carrossel-wrapper.hero-tamanho-muito-grande { height: 580px; }
.hero-carrossel-wrapper.hero-tamanho-enorme { height: 700px; }
.hero-carrossel-wrapper.hero-tamanho-extra-enorme { height: 820px; }

.hero-carrossel-seta {
  position: absolute;
  /* Centralização vertical simples (top:50%/translateY) agora é confiável porque
     `.hero-carrossel-wrapper` tem a MESMA `min-height` explícita (por tamanho) que a
     trilha da imagem, em vez de depender de "herdar" essa altura através de 2 níveis
     de elementos — ver as regras `.hero-carrossel-wrapper.hero-tamanho-*` acima. */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  width: 50px;
  height: 70px;
  padding: 0;
  font-size: 2.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.hero-carrossel-seta:hover {
  opacity: 1;
}

/* Setas por dentro da caixa do banner (`.hero-carrossel-wrapper`), numa posição
   intermediária entre a borda externa da caixa e a borda da imagem visível (que não
   enche a caixa toda por causa do `background-size:contain` + opacidade baixa da cor
   de fundo) — percentual de propósito (não px fixo), resolvido contra a LARGURA do
   wrapper (que é sempre definida, ao contrário da altura). */
.hero-carrossel-seta-esq { left: 12%; }
.hero-carrossel-seta-dir { right: 12%; }

.hero-carrossel-bolinhas {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.hero-carrossel-bolinha {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}

.hero-carrossel-bolinha.ativa {
  background: #fff;
}

/* Modelo de banner "Grade de Destaques" — vários cards lado a lado (imagem de fundo +
   título/subtítulo sobrepostos), sem rotação automática. */
.hero-grade {
  padding: 50px 0;
  background: #f4f4f8;
}

.hero-grade-titulo {
  font-weight: 700;
  color: #1F1F1F;
  text-align: center;
  margin-bottom: 0.5rem;
}

.hero-grade-subtitulo {
  text-align: center;
  color: #6c6c6c;
  margin-bottom: 2rem;
}

.hero-grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.hero-grade-card {
  position: relative;
  display: block;
  min-height: 220px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7DA0FA, #4747A1);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease;
}

a.hero-grade-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
}

.hero-grade-card-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  color: #fff;
}

.hero-grade-card-texto h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.hero-grade-card-texto p {
  font-size: 0.9rem;
  margin-bottom: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width: 576px) {
  .hero-carrossel.hero-tamanho-pequeno .hero-carrossel-trilho { min-height: 160px; }
  .hero-carrossel.hero-tamanho-medio .hero-carrossel-trilho { min-height: 240px; }
  .hero-carrossel.hero-tamanho-grande .hero-carrossel-trilho { min-height: 320px; }
  .hero-carrossel.hero-tamanho-muito-grande .hero-carrossel-trilho { min-height: 400px; }
  .hero-carrossel.hero-tamanho-enorme .hero-carrossel-trilho { min-height: 480px; }
  .hero-carrossel.hero-tamanho-extra-enorme .hero-carrossel-trilho { min-height: 560px; }
  .hero-carrossel-wrapper.hero-tamanho-pequeno { height: 160px; }
  .hero-carrossel-wrapper.hero-tamanho-medio { height: 240px; }
  .hero-carrossel-wrapper.hero-tamanho-grande { height: 320px; }
  .hero-carrossel-wrapper.hero-tamanho-muito-grande { height: 400px; }
  .hero-carrossel-wrapper.hero-tamanho-enorme { height: 480px; }
  .hero-carrossel-wrapper.hero-tamanho-extra-enorme { height: 560px; }
  .hero-carrossel-seta { width: 34px; height: 48px; font-size: 1.8rem; }

  .hero-grade-cards {
    grid-template-columns: 1fr;
  }
}

/* Barra de links institucionais (ex: "UFPA | Núcleo X | Programa Y"), logo abaixo do
   banner da página inicial — ver includes_publico/links_institucionais.php. */
.barra-links-institucionais {
  background: var(--cor-primaria-active);
}

.barra-links-institucionais-itens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
}

.barra-links-institucionais-itens a {
  color: #fff;
  font-size: 0.95rem;
}

.barra-links-institucionais-itens a:hover {
  color: #fff;
  text-decoration: underline;
}

.barra-links-institucionais-separador {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 576px) {
  .barra-links-institucionais-itens {
    gap: 6px;
    padding: 10px 16px;
  }

  .barra-links-institucionais-itens a {
    font-size: 0.85rem;
  }
}

.section {
  padding: 60px 0;
}

.section-title {
  font-weight: 700;
  margin-bottom: 2rem;
  color: #2b2b2b;
}

/* "Olho" da categoria acima do título de uma página individual (ex: "ÚLTIMAS
   NOTÍCIAS") — link pra categoria, mas estilizado como etiqueta, não como "← Voltar". */
.pagina-categoria-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--cor-primaria) !important;
  text-decoration: none !important;
}

.pagina-categoria-eyebrow:hover {
  text-decoration: underline !important;
}

.pagina-meta-datas {
  margin-top: 6px;
  line-height: 1.7;
}

/* Menos espaço entre a barra do topo e o início do conteúdo (olho da categoria/título)
   numa página individual sem banner — o `.section` padrão (60px em cima) é pensado pra
   separar blocos NO MEIO da página, não pro primeiro bloco logo após o cabeçalho. */
.pagina-secao {
  padding-top: 24px;
}

/* Título da página individual — o <h1> padrão do tema vem em 2.5rem (pensado pra
   título de seção/hero), grande demais pro título de um artigo dentro do conteúdo. */
.pagina-titulo {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 576px) {
  .pagina-titulo {
    font-size: 1.4rem;
  }
}

/* Cartões: mesma borda + raio de 20px usados em .card no painel admin */
.card-item {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-item:hover {
  box-shadow: 0 10px 24px rgba(75, 73, 172, 0.12);
  transform: translateY(-2px);
}

.card-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #e9ecef;
}

.card-item .card-body {
  padding: 1.25rem;
}

/* Título e resumo justificados — mesmo padrão aplicado em .listagem-lista-titulo/
   -resumo (formato "lista"), pra título/resumo ficarem com o mesmo alinhamento nos
   dois formatos de listagem (card e lista). Classes PRÓPRIAS (não um seletor genérico
   .card-item h5/p) porque .card-item também é reaproveitado no Banco de Dados pra
   cards de categoria centralizados (ver views_publicas/banco_dados.php) — um seletor
   genérico aqui desalinharia esses cards também. */
.listagem-card-titulo,
.listagem-card-resumo {
  text-align: justify;
}

/* Rodapé do card: "Ver mais" à esquerda, data/hora embaixo à direita — mesmo dado já
   mostrado em .listagem-lista-data (formato lista), só que reposicionado porque o card
   empilha tudo verticalmente e não tem a coluna lateral da lista pra encaixar um bloco
   vertical de data. */
.listagem-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0.25rem;
}

.listagem-card-data {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.78rem;
  color: #8a8a8a;
  text-align: right;
}

.listagem-card-data i {
  color: var(--cor-primaria);
  margin-right: 3px;
}

.badge-tipo {
  background: var(--cor-primaria);
  color: #fff;
}

.badge-success {
  background-color: var(--cor-sucesso);
  color: #fff;
}

.badge-warning {
  background-color: var(--cor-alerta);
  color: #212529;
}

.badge-secondary {
  background-color: #9091a4;
  color: #fff;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.conteudo-imagem-completa {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.galeria-municipio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.galeria-municipio a {
  display: block;
}

.galeria-municipio-imagem {
  width: 100%;
  height: auto;
  border: 1px solid var(--cor-borda);
}

/* Entrelinhas 2 (dupla) por padrão em todo conteúdo rico — mesmo valor usado dentro do
   editor (content_style em admin/assets/js/editor-rico.js), pra já publicar exatamente
   como foi editado. Um parágrafo específico pode sobrescrever via o botão "Espaçamento"
   do editor (aplica line-height inline, que sempre vence esta regra). */
.conteudo-rico {
  line-height: 2;
}

.conteudo-rico img {
  max-width: 100%;
  height: auto;
}

.conteudo-rico table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.conteudo-rico table td,
.conteudo-rico table th {
  border: 1px solid var(--cor-borda);
  padding: 0.5rem;
}

/* Botão "Recuar 1º parágrafo" do editor de texto rico (ver admin/assets/js/editor-rico.js)
   — mesma classe aplicada também DENTRO do iframe do editor (content_style), pra ficar
   igual durante a edição e na exibição real no site. */
.conteudo-rico .paragrafo-recuado {
  text-indent: 2em;
}

/* Prévia de texto nos cards do Resumo por Município (busca por filtros) — trunca pra
   não deixar um card gigante quando o texto completo é muito longo; o link "Ver
   conteúdo completo" leva pra página cheia. */
.conteudo-rico-resumo {
  max-height: 160px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.filtro-banco-dados {
  background: #f4f4f8;
  border-radius: 10px;
  padding: 1rem 1rem 0.25rem;
}

/* Bootstrap .form-row usa um gutter bem apertado (5px) — pouco pra essa barra de
   filtros, já que o campo Indicador cresce com as etiquetas escolhidas e podia
   parecer colado no campo Município ao lado. Aumenta o respiro entre as colunas. */
.filtro-banco-dados .form-row {
  margin-left: -12px;
  margin-right: -12px;
}

.filtro-banco-dados .form-row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
  /* .form-row é flex, e um item flex tem min-width:auto por padrão — se o conteúdo
     de dentro (uma etiqueta com nome de indicador/município bem comprido) não pode
     quebrar linha, o item flex recusa encolher abaixo desse tamanho e a coluna
     ultrapassa sua largura, colando na coluna vizinha. min-width:0 libera o encolhimento. */
  min-width: 0;
}

.filtro-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.65em;
  font-weight: 500;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.filtro-chip .chip-remover {
  font-weight: 700;
  opacity: 0.85;
}

.filtro-chip .chip-remover:hover {
  opacity: 1;
}

/* Módulo "Últimas notícias" da página inicial — lista simples (título + data) em vez
   de cards com imagem, inspirado no formato de referência do usuário. Visual elevado
   (sombra suave + cantos arredondados de 20px, no mesmo espírito do .card-item) em vez
   da caixa com borda reta que tinha antes. */
.noticias-lista-painel {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(43, 42, 90, 0.07);
}

.noticias-lista-cabecalho {
  background: linear-gradient(135deg, #f5f5fc, #ebeafc);
  padding: 1.35rem 1.75rem;
  position: relative;
}

.noticias-lista-cabecalho::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cor-primaria), #7DA0FA);
}

.noticias-lista-titulo {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cor-primaria);
}

.noticias-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.noticias-lista li {
  padding: 1.15rem 1.75rem;
  border-bottom: 1px solid #eef0f5;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.noticias-lista li:last-child {
  border-bottom: none;
}

.noticias-lista li:hover {
  background-color: #f8f8fc;
  padding-left: 2.1rem;
}

.noticias-lista a {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  color: #2b2b2b;
  transition: color 0.15s ease;
}

.noticias-lista li:hover a {
  color: var(--cor-primaria);
}

.noticias-lista-data {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #9a9aa8;
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.noticias-lista-data::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-primaria);
  flex-shrink: 0;
}

.noticias-lista-rodape {
  background: #f8f8fc;
  border-top: 1px solid #eef0f5;
  padding: 1rem 1.75rem;
  text-align: right;
}

.noticias-lista-rodape .btn {
  border-radius: 50px;
  padding: 0.5rem 1.4rem;
  font-weight: 600;
}

/* Formato "lista" das páginas de listagem pública (Projetos/Atividades/Notícias/Bolsas),
   alternativa ao grid de cards — mesmo visual elevado do painel acima, generalizado pra
   qualquer seção. */
.listagem-lista-painel {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(43, 42, 90, 0.07);
}

.listagem-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listagem-lista-item {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid #eef0f5;
  position: relative;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}

/* Item inteiro clicável (data/imagem/título/resumo todos dentro do mesmo <a>) — em vez
   de só o título ser link + um botão "Ver mais" à parte, como era antes. */
.listagem-lista-link {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-decoration: none !important;
  color: inherit;
}

.listagem-lista-data {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 70px;
  padding-right: 16px;
  border-right: 1px solid #eef0f5;
  font-size: 0.78rem;
  color: #8a8a8a;
}

.listagem-lista-data i {
  color: var(--cor-primaria);
  margin-right: 3px;
}

.listagem-lista-imagem-wrapper {
  flex-shrink: 0;
  width: 100px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f8;
}

.listagem-lista-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listagem-lista-conteudo {
  flex: 1;
  min-width: 0;
}

.listagem-lista-resumo {
  display: block;
  color: #6c6c6c;
  font-size: 0.88rem;
  margin-top: 2px;
  text-align: justify;
}

@media (max-width: 576px) {
  .listagem-lista-imagem-wrapper {
    display: none;
  }

  .listagem-lista-data {
    min-width: 58px;
    font-size: 0.72rem;
  }
}

.listagem-lista-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 3px;
  border-radius: 3px;
  background: var(--cor-primaria);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.listagem-lista-item:hover {
  background-color: #f8f8fc;
  padding-left: 2.1rem;
}

.listagem-lista-item:hover::before {
  opacity: 1;
}

.listagem-lista-item:last-child {
  border-bottom: none;
}

.listagem-lista-titulo {
  font-weight: 700;
  font-size: 1.05rem;
  color: #2b2b2b;
  margin-bottom: 0.3rem;
  display: block;
  text-align: justify;
  transition: color 0.15s ease;
}

.listagem-lista-item:hover .listagem-lista-titulo {
  color: var(--cor-primaria);
}

.resultado-clicavel {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.resultado-clicavel:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.doc-list-item {
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.doc-list-item-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.doc-list-item-link:hover {
  color: inherit;
  box-shadow: 0 6px 16px rgba(75, 73, 172, 0.12);
  border-color: var(--cor-primaria);
}

/* Listas de indicadores/municípios do Banco de Dados: botões do tamanho do próprio
   texto, flutuando pela esquerda e quebrando linha conforme o espaço disponível. */
.lista-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 16px;
  column-gap: 10px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.item-botao {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 10px;
  font-weight: 500;
}

/* Imagem de cabeçalho do indicador (Banco de Dados), configurável por tamanho/posição.
   Só `max-width`/`max-height` (sem `width`/`height` fixos) faz a CAIXA se ajustar à
   proporção real da imagem original — encolhe se for maior que o tamanho escolhido,
   nunca corta e nunca estica além do tamanho natural. */
.indicador-imagem-topo {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.indicador-imagem-topo.indicador-imagem-tam-muito_pequeno { max-height: 90px; }
.indicador-imagem-topo.indicador-imagem-tam-pequeno { max-height: 150px; }
.indicador-imagem-topo.indicador-imagem-tam-medio { max-height: 280px; }
.indicador-imagem-topo.indicador-imagem-tam-grande { max-height: 420px; }
.indicador-imagem-topo.indicador-imagem-tam-muito_grande { max-height: 560px; }

.indicador-cabecalho-lateral {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.indicador-cabecalho-lateral-invertido {
  flex-direction: row-reverse;
}

.indicador-imagem-lateral {
  border: 1px solid #e3e3e3;
  flex-shrink: 0;
  display: block;
}

.indicador-imagem-lateral.indicador-imagem-tam-muito_pequeno { max-width: 80px; max-height: 80px; }
.indicador-imagem-lateral.indicador-imagem-tam-pequeno { max-width: 120px; max-height: 120px; }
.indicador-imagem-lateral.indicador-imagem-tam-medio { max-width: 200px; max-height: 200px; }
.indicador-imagem-lateral.indicador-imagem-tam-grande { max-width: 300px; max-height: 300px; }
.indicador-imagem-lateral.indicador-imagem-tam-muito_grande { max-width: 420px; max-height: 420px; }

.indicador-cabecalho-texto {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 576px) {
  .indicador-imagem-lateral.indicador-imagem-tam-medio,
  .indicador-imagem-lateral.indicador-imagem-tam-grande,
  .indicador-imagem-lateral.indicador-imagem-tam-muito_grande {
    max-width: 100%;
    max-height: 220px;
  }
}

/* Rodapé "alto", em colunas (nome do site/navegação/redes sociais/acesso), no mesmo
   espírito de um rodapé institucional maior — pedido explícito do usuário com imagem
   de referência. Duas faixas de cor (igual à referência): a área principal na cor
   primária do site, uma faixa mais escura por baixo só pro copyright. */
.site-footer-novo {
  margin-top: 60px;
  color: #fff;
}

.site-footer-topo {
  background: #f4f4f8;
  border-top: 1px solid var(--cor-borda);
  padding: 14px 0;
}

.site-footer-topo-link {
  color: #6c6c6c !important;
  font-size: 0.9rem;
  text-decoration: none !important;
}

.site-footer-topo-link:hover {
  color: var(--cor-primaria) !important;
}

.site-footer-colunas {
  background: var(--cor-primaria);
  padding: 50px 0 30px;
}

/* Espaçamento maior entre as colunas do rodapé (padrão Bootstrap de 15px por lado
   deixava um e-mail/telefone mais longo encostar — e às vezes sobrepor visualmente —
   o texto da coluna vizinha, já que o conteúdo não quebra linha sozinho). */
.site-footer-colunas [class^="col-"],
.site-footer-colunas [class*=" col-"] {
  padding-left: 25px;
  padding-right: 25px;
}

.site-footer-colunas h5 {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.site-footer-descricao {
  color: #d7d6f5;
  font-size: 0.9rem;
}

.site-footer-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer-lista li {
  margin-bottom: 10px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.site-footer-lista a {
  color: #d7d6f5 !important;
  font-size: 0.9rem;
  text-decoration: none !important;
}

.site-footer-lista a:hover {
  color: #fff !important;
}

.site-footer-copyright {
  background: var(--cor-primaria-active);
  padding: 16px 0;
}

.site-footer-copyright span {
  color: #d7d6f5;
  font-size: 0.85rem;
}