/* =====================================================================
   PORTAL IDR — Sistema de Identidade Visual (design system)
   Instituto Municipal de Informação e Pesquisa Darcy Ribeiro — Maricá/RJ

   Paleta e tipografia conforme o manual de marca:
     primária  #0A2342 (azul institucional)
     acento    #E21D2D (vermelho cereja)
     tipografia de destaque: Montserrat
     tipografia de apoio:    Source Sans 3

   Os tokens legados (--navy, --blue, --red, --line, --card, --muted…)
   são mantidos como ALIASES das variáveis institucionais, para que os
   estilos inline já existentes nas páginas continuem funcionando.
   ===================================================================== */

:root{
  /* ---- Cores institucionais (manual) ---- */
  --color-primary:#0A2342;
  --color-accent:#E21D2D;
  --color-gray-light:#E6E6E6;
  --color-white:#FFFFFF;
  --color-gray-dark:#333333;

  /* ---- Tons derivados (variação controlada da marca) ---- */
  --color-primary-900:#061629;
  --color-primary-800:#0A2342;
  --color-primary-700:#14365b;
  --color-primary-600:#1d4570;
  --color-primary-100:#e9eef5;
  --color-accent-hover:#bf1623;
  --color-blue:#1b6cb3;        /* azul interativo (ícones/links) — derivado, presente na referência */
  --color-blue-deep:#13568a;
  --color-blue-soft:#e8f1f9;
  --color-surface:#ffffff;
  --color-surface-soft:#f4f6fa;
  --color-surface-soft-2:#eaeff5;
  --color-border:#e2e7ef;
  --color-border-strong:#cfd8e4;
  --color-text:#1f2a37;
  --color-text-muted:#5b6b7e;
  --color-on-primary:#ffffff;

  /* ---- Sombras ---- */
  --shadow-xs:0 1px 2px rgba(10,35,66,.06);
  --shadow-sm:0 1px 2px rgba(10,35,66,.05),0 4px 12px rgba(10,35,66,.06);
  --shadow:0 1px 2px rgba(10,35,66,.05),0 12px 28px rgba(10,35,66,.09);
  --shadow-lg:0 20px 48px rgba(10,35,66,.16);

  /* ---- Tipografia ---- */
  --font-display:"Montserrat",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-label:"Montserrat",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,Segoe UI,Arial,sans-serif;

  /* escala fluida */
  --fs-h1:clamp(2rem,1.25rem + 2.9vw,3.5rem);     /* 32 → 56 */
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.5rem);  /* 28 → 40 */
  --fs-h3:clamp(1.375rem,1.2rem + 0.7vw,1.75rem); /* 22 → 28 */
  --fs-lead:clamp(1.125rem,1.06rem + 0.3vw,1.25rem);
  --fs-body:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  --fs-meta:0.9rem;

  /* ---- Layout ---- */
  --maxw:1240px;
  --pad-x:clamp(20px,4vw,48px);
  --sec-y:clamp(56px,7vw,104px);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:18px;
  --header-h:90px;
  --header-h-shrink:78px;

  /* ---- Aliases legados (NÃO remover — usados nos <style> inline das páginas) ---- */
  --navy:var(--color-primary);
  --navy-2:var(--color-primary-700);
  --blue:var(--color-blue);
  --blue-deep:var(--color-blue-deep);
  --blue-soft:var(--color-blue-soft);
  --red:var(--color-accent);
  --red-deep:var(--color-accent-hover);
  --red-soft:#fbe7e8;
  --paper:var(--color-surface-soft);
  --paper-2:var(--color-surface-soft-2);
  --card:var(--color-surface);
  --line:var(--color-border);
  --ink:var(--color-text);
  --muted:var(--color-text-muted);
  --charcoal:var(--color-primary-900);
  --charcoal-2:var(--color-primary-900);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-surface-soft); color:var(--color-text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0; line-height:1.14; font-weight:700; color:var(--color-primary); }
p{ margin:0 0 1em; }
a{ color:var(--color-blue-deep); }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--color-blue); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ---------- Utilitário: somente leitor de tela ---------- */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:2000;
  background:var(--color-accent); color:#fff; padding:12px 18px; border-radius:8px;
  font-family:var(--font-label); font-weight:600; text-decoration:none; transition:top .18s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Container ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); width:100%; }

/* =====================================================================
   HEADER / NAVEGAÇÃO  (renderizado por /js/portal.js)
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:1000; width:100%;
  min-height:var(--header-h);                 /* reserva de espaço — evita CLS na injeção via JS */
  background:var(--color-primary);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .25s ease, box-shadow .25s ease;
}
/* Variante "overlay" — header transparente sobre o hero (home) */
.site-header.is-overlay{
  position:absolute; min-height:0; background:transparent; border-bottom-color:transparent;
}
.site-header.is-overlay.is-stuck{ position:fixed; }
.site-header.is-stuck{
  background:var(--color-primary); box-shadow:0 6px 22px rgba(6,18,38,.34);
  border-bottom-color:rgba(255,255,255,.10);
}
.site-header__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  min-height:var(--header-h); display:flex; align-items:center; gap:8px;
  transition:min-height .25s ease;
}
.site-header.is-stuck .site-header__inner{ min-height:var(--header-h-shrink); }

/* Marca IDR no header: símbolo "IDR" (recortado) + texto "Instituto / Darcy Ribeiro" legível ao lado. */
.site-brand{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; text-decoration:none; }
.brand-mark{ height:30px; width:auto; object-fit:contain; transition:height .25s ease; flex:0 0 auto; }
.site-header.is-stuck .brand-mark{ height:27px; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.06; font-family:var(--font-display); white-space:nowrap; }
.brand-text .bt-1{ font-weight:600; font-size:.76rem; color:#aebfd6; letter-spacing:.2px; }
.brand-text .bt-2{ font-weight:800; font-size:.9rem; color:#fff; letter-spacing:.1px; }
.site-header.is-stuck .brand-text .bt-1{ font-size:.72rem; }
.site-header.is-stuck .brand-text .bt-2{ font-size:.84rem; }

/* Logo da Prefeitura de Maricá — lado direito do header */
.site-brand-marica{ display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.site-brand-marica img{
  height:74px; width:auto; object-fit:contain; transition:height .25s ease;
}
.site-header.is-stuck .site-brand-marica img{ height:62px; }

.site-nav{ display:flex; align-items:center; gap:0; margin-left:auto; flex-wrap:nowrap; }
.site-nav a{
  position:relative; font-family:var(--font-label); font-weight:600;
  font-size:.85rem; letter-spacing:.1px; color:#cdd8e8; text-decoration:none;
  padding:8px 4px; border-radius:8px; white-space:nowrap; transition:color .18s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:4px; right:4px; bottom:4px; height:2.5px;
  border-radius:2px; background:var(--color-accent); transform:scaleX(0);
  transform-origin:center; transition:transform .2s ease;
}
.site-nav a:hover, .site-nav a:focus-visible{ color:#fff; }
.site-nav a:hover::after, .site-nav a:focus-visible::after{ transform:scaleX(.55); }
.site-nav a[aria-current="page"]{ color:#fff; }
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-nav a .ext-ic{ width:13px; height:13px; margin-left:5px; vertical-align:-1px; opacity:.85; }

/* Ícones das redes no canto superior direito — pequenos e discretos */
.site-social{ display:flex; align-items:center; gap:1px; flex:0 0 auto; margin-left:6px; padding-left:8px; border-left:1px solid rgba(255,255,255,.14); }
.site-social a{
  width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  color:#aebfd6; transition:.18s ease;
}
.site-social a:hover, .site-social a:focus-visible{ color:#fff; background:rgba(255,255,255,.12); }
.site-social a svg{ width:16px; height:16px; }

/* Badge "em breve" das abas em construção (Cursos/Vídeos) */
.nav-soon{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  font-family:var(--font-label); font-weight:700; font-size:.6rem; letter-spacing:.03em;
  text-transform:uppercase; vertical-align:2px;
  background:var(--color-accent); color:#fff; opacity:.92;
}
/* Aviso flutuante "em construção" (mostrado ao clicar em Cursos/Vídeos) */
.idr-chrome-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:4000;
  display:flex; align-items:center; gap:10px; max-width:92vw;
  background:#0f1f3a; color:#eaf1fb; border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:13px 18px; font-size:14.5px; font-weight:500;
  box-shadow:0 16px 44px rgba(6,18,38,.5); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.idr-chrome-toast.show{ opacity:1; transform:translate(-50%,0); }
.idr-chrome-toast .cone{ font-size:18px; flex:0 0 auto; }

.nav-toggle{
  display:none; margin-left:auto; width:46px; height:46px; border-radius:10px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; place-items:center;
}
.nav-toggle svg{ width:26px; height:26px; }

/* ----- Drawer mobile ----- */
.nav-backdrop{
  position:fixed; inset:0; z-index:1100; background:rgba(6,18,38,.55);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.nav-backdrop.open{ opacity:1; visibility:visible; }
.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1200; width:min(86vw,360px);
  background:var(--color-primary); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:18px 20px 26px;
  box-shadow:-12px 0 40px rgba(6,18,38,.4);
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.nav-drawer__top img{ height:44px; width:auto; }
.nav-drawer__close{
  width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; cursor:pointer; display:grid; place-items:center;
}
.nav-drawer__close svg{ width:24px; height:24px; }
.nav-drawer nav{ display:flex; flex-direction:column; margin-top:10px; }
.nav-drawer nav a{
  font-family:var(--font-label); font-weight:600; font-size:1.05rem; color:#dbe4f0;
  text-decoration:none; padding:14px 12px; border-radius:10px; border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:8px;
}
.nav-drawer nav a:hover, .nav-drawer nav a:focus-visible{ background:rgba(255,255,255,.08); color:#fff; }
.nav-drawer nav a[aria-current="page"]{ color:#fff; box-shadow:inset 3px 0 0 var(--color-accent); }
.nav-drawer__social{ margin-top:auto; padding-top:20px; display:flex; gap:10px; }
.nav-drawer__social a{
  width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#dbe4f0;
}
.nav-drawer__social a:hover, .nav-drawer__social a:focus-visible{ background:rgba(255,255,255,.16); color:#fff; }
.nav-drawer__social svg{ width:20px; height:20px; }
body.nav-open{ overflow:hidden; }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-label); font-weight:600; font-size:.9375rem; letter-spacing:.2px;
  padding:14px 24px; border-radius:10px; cursor:pointer; border:1.5px solid transparent;
  text-decoration:none; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  line-height:1.1;
}
.btn svg{ width:18px; height:18px; flex:0 0 auto; transition:transform .18s ease; }
.btn:hover svg.arrow{ transform:translateX(4px); }

.btn-primary{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); box-shadow:0 10px 24px rgba(226,29,45,.26); }
.btn-primary:hover{ background:var(--color-accent-hover); border-color:var(--color-accent-hover); transform:translateY(-2px); }

.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-outline-light:hover{ background:#fff; color:var(--color-primary); border-color:#fff; transform:translateY(-2px); }

.btn-outline{ background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-outline:hover{ background:var(--color-primary); color:#fff; transform:translateY(-2px); }

.btn-blue{ background:var(--color-blue); color:#fff; border-color:var(--color-blue); }
.btn-blue:hover{ background:var(--color-blue-deep); border-color:var(--color-blue-deep); transform:translateY(-2px); }

/* compat com botões antigos */
.btn-red{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn-red:hover{ background:var(--color-accent-hover); transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ background:rgba(255,255,255,.2); }

/* =====================================================================
   SEÇÕES / CABEÇALHOS
   ===================================================================== */
section{ padding:var(--sec-y) 0; }
.sec-head{ max-width:62ch; margin-bottom:clamp(28px,4vw,46px); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.kicker{
  font-family:var(--font-label); font-weight:600; font-size:.8125rem; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--color-blue); margin:0 0 10px; display:inline-block;
}
.sec-head h2{ font-size:var(--fs-h2); color:var(--color-primary); }
.sec-head h2 em{ font-style:normal; color:var(--color-blue); }
.sec-head p{ margin:14px 0 0; color:var(--color-text-muted); font-size:var(--fs-lead); }

/* traço editorial vermelho */
.rule-accent{ width:54px; height:4px; border-radius:3px; background:var(--color-accent); margin:0 0 18px; border:0; }
.center .rule-accent, .rule-accent.center{ margin-left:auto; margin-right:auto; }

/* =====================================================================
   PAGE-HERO (interno) + BREADCRUMBS
   ===================================================================== */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,var(--color-primary-900),var(--color-primary) 62%,var(--color-primary-700));
  padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,58px);
}
/* ★ Logo institucional (ilustração do Darcy Ribeiro) decorando a área escura à
   direita do hero. mix-blend-mode:screen funde o fundo azul da logo no hero e
   realça a arte branca; a máscara radial suaviza as bordas (sem retângulo). */
.page-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:clamp(-24px, 2vw, 40px); top:50%; transform:translateY(-50%);
  width:min(33vw, 380px); height:116%;
  background:url('/assets/idr-logo-darcy-sf.png') no-repeat center right / contain;
  opacity:.55;
  /* fade suave: dissolve a borda esquerda da ilustração no fundo do hero */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
/* Em telas estreitas o texto do hero ocupa toda a largura → some/encolhe a logo. */
@media (max-width:760px){
  .page-hero::after{ width:52vw; opacity:.28; right:-10vw; }
}
@media (max-width:520px){
  .page-hero::after{ display:none; }
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .eyebrow{
  font-family:var(--font-label); font-weight:600; font-size:.8125rem; letter-spacing:1.8px;
  text-transform:uppercase; color:#8fb6e6; margin:0 0 12px; display:inline-block;
}
.page-hero h1{ font-size:var(--fs-h1); color:#fff; max-width:20ch; }
.page-hero p{ color:#cdd9ea; max-width:62ch; margin:14px 0 0; font-size:var(--fs-lead); }

.breadcrumbs{ background:var(--color-primary-900); }
.breadcrumbs ol{
  max-width:var(--maxw); margin:0 auto; padding:11px var(--pad-x); list-style:none;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.85rem;
}
.breadcrumbs li{ display:flex; align-items:center; gap:8px; color:#9fb1c9; }
.breadcrumbs a{ color:#bcccdf; text-decoration:none; }
.breadcrumbs a:hover{ color:#fff; text-decoration:underline; }
.breadcrumbs li[aria-current="page"]{ color:#fff; }
.breadcrumbs .sep{ color:#5e7290; opacity:.7; display:inline-flex; }
.breadcrumbs svg{ width:14px; height:14px; color:#5e7290; }

/* =====================================================================
   CARDS reutilizáveis
   ===================================================================== */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }

/* =====================================================================
   ESTADOS (loading / vazio / erro)
   ===================================================================== */
.state{ text-align:center; padding:clamp(36px,6vw,64px) 20px; color:var(--color-text-muted); }
.state svg{ width:40px; height:40px; color:var(--color-border-strong); margin:0 auto 14px; }
.state h3{ color:var(--color-primary); font-size:1.25rem; margin:0 0 6px; }
.state p{ margin:0 auto; max-width:46ch; }
.state .btn{ margin-top:18px; }
.is-loading-row{ color:var(--color-text-muted); font-size:.95rem; padding:20px 0; }

/* skeleton */
.skeleton{ position:relative; overflow:hidden; background:var(--color-surface-soft-2); border-radius:8px; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:skeleton 1.3s ease-in-out infinite;
}
@keyframes skeleton{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .skeleton::after{ animation:none; } }

/* =====================================================================
   FAIXA DE PARCEIROS (acima do rodapé)
   ===================================================================== */
.partners-strip{ background:#fff; border-top:1px solid var(--color-border); padding:26px 0; }
.partners-strip .row{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4.5vw,52px);
}
.partners-strip a{ display:inline-flex; align-items:center; }
.partners-strip img{ height:46px; width:auto; max-width:158px; object-fit:contain; opacity:.88; transition:.2s ease; }
.partners-strip a:hover img, .partners-strip a:focus-visible img{ opacity:1; transform:translateY(-2px); }
/* Logo claro (ex.: CAGED branco) sobre chip azul para ficar visível na faixa branca */
.partners-strip a.is-dark{ background:var(--color-primary); border-radius:8px; padding:8px 16px; }
.partners-strip a.is-dark img{ height:32px; opacity:1; }
@media (max-width:560px){ .partners-strip a.is-dark img{ height:26px; } }
@media (max-width:560px){ .partners-strip img{ height:36px; } }

/* =====================================================================
   FOOTER institucional (navy + dobra gráfica)
   ===================================================================== */
.site-footer{ position:relative; overflow:hidden; background:var(--color-primary); color:#c4d2e4; }
.site-footer__fold{
  position:absolute; right:0; bottom:0; width:min(46%,520px); height:100%;
  pointer-events:none; z-index:0; opacity:.9;
}
.site-footer__inner{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,5vw,64px) var(--pad-x) clamp(28px,4vw,40px);
  display:grid; grid-template-columns:1.5fr 1.2fr 1fr 1fr; gap:clamp(28px,4vw,48px);
}
.site-footer h4{
  font-family:var(--font-label); font-weight:700; font-size:.8125rem; letter-spacing:1.4px;
  text-transform:uppercase; color:#fff; margin:0 0 16px;
}
/* Logo do IDR no rodapé com um leve "fade" (marca d'água), realça no hover */
.footer-brand img{ height:64px; width:auto; margin-bottom:14px; opacity:.7; transition:opacity .3s ease; }
.footer-brand img:hover{ opacity:1; }
.footer-brand p{ color:#9fb1c9; font-size:.85rem; line-height:1.55; max-width:34ch; margin:0; }
.footer-contact ul, .footer-links ul{ list-style:none; margin:0; padding:0; }
.footer-contact li{ display:flex; gap:11px; margin-bottom:14px; line-height:1.5; font-size:.95rem; }
.footer-contact li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:#7f97b6; }
.footer-contact a, .footer-links a{ color:#c4d2e4; text-decoration:none; }
.footer-contact a:hover, .footer-links a:hover{ color:#fff; text-decoration:underline; }
.footer-links li{ margin-bottom:11px; }
.footer-links a{ font-size:.95rem; display:inline-flex; align-items:center; gap:7px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#c4d2e4; transition:.18s ease;
}
.footer-social a:hover, .footer-social a:focus-visible{ background:rgba(255,255,255,.15); color:#fff; transform:translateY(-2px); }
.footer-social svg{ width:19px; height:19px; }
.footer-cnpj{ margin-top:14px; font-size:.82rem; color:#7f97b6; }

.site-footer__bar{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); }
.site-footer__bar .row{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--pad-x);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between;
  font-size:.82rem; color:#9fb1c9;
}
.site-footer__bar .row > span{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.site-footer__bar a{ color:#7f97b6; text-decoration:none; }
.site-footer__bar a:hover{ color:#c4d2e4; text-decoration:underline; }
.team-access{ display:inline-flex; align-items:center; gap:6px; }
.team-access svg{ width:13px; height:13px; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:1080px){
  .site-footer__inner{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer-social-col{ grid-column:1 / -1; }
}
/* Nav horizontal completa só onde cabe (2 logos grandes + 10 itens). Abaixo, menu lateral. */
@media (max-width:1240px){
  .site-nav, .site-social{ display:none; }
  .nav-toggle{ display:grid; }
}
@media (max-width:920px){
  .site-brand-marica{ display:none; }
  :root{ --header-h:68px; --header-h-shrink:60px; }
  .brand-mark, .site-header.is-stuck .brand-mark{ height:28px; }
  .brand-text .bt-1{ font-size:.74rem; }
  .brand-text .bt-2{ font-size:.88rem; }
}
@media (max-width:760px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .site-footer__fold{ width:62%; opacity:.5; }
}
@media (max-width:520px){
  .site-footer__inner{ grid-template-columns:1fr; }
  .site-footer__bar .row{ justify-content:flex-start; }
  .site-footer__fold{ display:none; }
}

/* =====================================================================
   COMPAT — Markup antigo (.topbar/.bar-top/.brand/.navbar + footer.portal)
   Várias páginas (inicio, instituto, projetos, noticias, transparencia,
   publicacoes, fale-conosco, ipcb, socioeconomico) usam esse markup.
   Sem essas regras, os SVGs renderizam gigantescos (sem width/height).
   ===================================================================== */
header.portal-topbar, header.topbar {
  background:#0f2440; color:#fff; position:relative; z-index:1000;
}
header.portal-topbar .bar-top, header.topbar .bar-top {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 24px 10px; max-width:1180px; margin:0 auto;
}
header.portal-topbar .brand, header.topbar .brand {
  display:flex; align-items:center; color:#fff; text-decoration:none;
}
header.portal-topbar .brand img, header.topbar .brand img {
  height:92px; width:auto; object-fit:contain; filter:drop-shadow(0 5px 14px rgba(0,0,0,.4));
}
header.portal-topbar .social, header.topbar .social {
  display:flex; align-items:center; gap:8px;
}
header.portal-topbar .social a, header.topbar .social a {
  width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  color:#9fb6d6; border:1px solid rgba(255,255,255,.14); transition:.18s; text-decoration:none;
}
header.portal-topbar .social a:hover, header.topbar .social a:hover {
  color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3);
}
header.portal-topbar .social a svg, header.topbar .social a svg {
  width:17px !important; height:17px !important;
}
header.portal-topbar .menu-btn, header.topbar .menu-btn {
  display:none; background:rgba(255,255,255,.12); border:0; color:#fff;
  width:42px; height:42px; border-radius:10px; cursor:pointer;
}
header.portal-topbar .menu-btn svg, header.topbar .menu-btn svg {
  width:24px !important; height:24px !important;
}
header.portal-topbar .navbar, header.topbar .navbar {
  display:flex; justify-content:center; flex-wrap:wrap; gap:2px;
  padding:6px 16px 9px; background:rgba(0,0,0,.18); border-top:1px solid rgba(255,255,255,.07);
}
header.portal-topbar .navbar a, header.topbar .navbar a {
  position:relative; font-family:"Montserrat",system-ui,Arial,sans-serif;
  font-weight:700; font-size:14px; letter-spacing:.6px; text-transform:uppercase;
  color:#cfdcec; text-decoration:none; padding:10px 16px; border-radius:8px;
  transition:color .18s; white-space:nowrap;
}
header.portal-topbar .navbar a:hover,
header.portal-topbar .navbar a.atual,
header.topbar .navbar a:hover,
header.topbar .navbar a.atual { color:#fff; }
header.portal-topbar .navbar a::after, header.topbar .navbar a::after {
  content:""; position:absolute; left:16px; right:16px; bottom:4px;
  height:2px; border-radius:2px; background:#fff; transform:scaleX(0); transition:transform .2s;
}
header.portal-topbar .navbar a:hover::after,
header.portal-topbar .navbar a.atual::after,
header.topbar .navbar a:hover::after,
header.topbar .navbar a.atual::after { transform:scaleX(1); }

/* ---------- Footer institucional (charcoal) ---------- */
footer.portal {
  background:#2f2f2f; color:#cfcfcf; font-family:"Open Sans",system-ui,Arial,sans-serif;
  margin-top:0;
}
footer.portal .finner {
  max-width:1180px; margin:0 auto; padding:38px 22px 30px;
  display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:30px; align-items:start;
}
footer.portal .fcol-mid { text-align:center; }
footer.portal .fcol-right { text-align:right; }
footer.portal .frow {
  display:flex; align-items:flex-start; gap:10px; margin-bottom:9px;
  line-height:1.5; font-size:14px;
}
footer.portal .fcol-right .frow { justify-content:flex-end; }
footer.portal .frow svg {
  width:16px !important; height:16px !important; flex-shrink:0; margin-top:3px; color:#9a9a9a;
}
footer.portal a { color:#cfcfcf; text-decoration:none; }
footer.portal a:hover { color:#fff; }
footer.portal .finst {
  font-family:"Montserrat",system-ui,Arial,sans-serif; font-weight:600; letter-spacing:.4px;
  color:#9a9a9a; text-transform:uppercase; font-size:12px; margin:14px 0 6px; line-height:1.5;
}
footer.portal .fcnpj { font-size:13px; color:#9a9a9a; }
footer.portal .flogo { height:78px; width:auto; margin:0 auto 12px; }
footer.portal .fsocial {
  display:flex; justify-content:center; gap:13px; margin-top:4px;
}
footer.portal .fsocial a {
  width:42px !important; height:42px !important; border-radius:50%; background:#1f1f1f;
  display:grid; place-items:center; color:#fff; transition:.18s;
}
footer.portal .fsocial a:hover { background:#000; }
footer.portal .fsocial a svg {
  width:19px !important; height:19px !important;
}
footer.portal .fbar { border-top:1px solid rgba(255,255,255,.09); }
footer.portal .fbar .finner2 {
  max-width:1180px; margin:0 auto; padding:12px 22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12px; color:#888;
}
footer.portal .fbar a { color:#888; }
footer.portal .fbar a:hover { color:#cfcfcf; }
@media (max-width:880px) {
  header.portal-topbar .navbar, header.topbar .navbar { display:none; }
  header.portal-topbar .menu-btn, header.topbar .menu-btn { display:grid; place-items:center; }
  header.portal-topbar.open .navbar, header.topbar.open .navbar {
    display:flex; flex-direction:column; align-items:stretch;
    background:#0f2440; padding:10px 16px 16px;
  }
}
@media (max-width:820px) {
  footer.portal .finner {
    grid-template-columns:1fr; text-align:center; gap:24px;
  }
  footer.portal .fcol-right, footer.portal .fcol-right .frow {
    text-align:center; justify-content:center;
  }
  footer.portal .frow { justify-content:center; }
}