/* =========================================================================
   Tema do app (Brand ODE) — claro + escuro via [data-theme];
   sidebar recolhível via [data-sidebar]. Tudo dirigido por variáveis.
   ========================================================================= */
:root,:root[data-theme="dark"]{
  --bg:#041f29; --panel:#0a3340; --panel-2:#0c3a48; --line:#16404f;
  --txt:#eaf3f4; --muted:#8aa6ad; --heading:#ffffff; --kpi-val:#ffffff;
  --input-bg:#06222c; --menu-bg:#0c3a48;
  --side-bg:#062a36; --side-txt:#cfe0e3; --side-hover:#0a3340;
  --accent:#4fd1c5; --accent-2:#7c9cff; --gold:#C19A3A; --green:#5A8D6A;
  --scroll-thumb:#1d4a5a;
}
:root[data-theme="light"]{
  --bg:#F5F7F9; --panel:#ffffff; --panel-2:#ffffff; --line:#D4DADF;
  --txt:#0F1419; --muted:#6B7684; --heading:#052630; --kpi-val:#094454;
  --input-bg:#ffffff; --menu-bg:#ffffff;
  --side-bg:#ffffff; --side-txt:#1f2933; --side-hover:#eef3f2;
  --scroll-thumb:#c3ccd3;
}

/* ---------- Scrollbars (toda a aplicação) ---------- */
*{scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;}
*::-webkit-scrollbar{width:8px; height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--accent);
  border:2px solid transparent; background-clip:padding-box;}
*::-webkit-scrollbar-corner{background:transparent;}
*{box-sizing:border-box;}
html,body{margin:0;}
/* âncoras (#paineis) param abaixo da navbar fixa de 60px */
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:76px;}
body{font-family:var(--font-sans,'Sora',sans-serif); background:var(--bg);
  color:var(--txt); font-size:15px;}
a{text-decoration:none; color:inherit;}

/* ---------- Navbar (mantém-se escura nos dois temas) ---------- */
.navbar{height:60px; display:flex; align-items:center; gap:24px; padding:0 22px;
  background:linear-gradient(90deg,#06222c,#0a3340);
  border-bottom:1px solid #16404f; position:sticky; top:0; z-index:1000;}
.navbar-brand{display:flex; align-items:center; gap:12px; min-width:230px;}
/* logo + nome clicáveis (vão para a home) */
.brand-link{display:flex; align-items:center; gap:12px; cursor:pointer;}
.brand-link:hover .brand-word{color:var(--accent);}
.brand-logo{height:36px; width:auto; display:block;}
.brand-word{color:#fff; font-weight:800; font-size:19px; letter-spacing:.14em;}
.brand-ufpb{color:var(--accent);}
/* ---------- Links de seção (FLAG NAV_NA_NAVBAR em config.py) ----------
   Sem ícones: em 7 itens eles viravam textura. Ícone só nas AÇÕES.       */
.navbar-links{display:flex; align-items:center; gap:2px; flex:1; min-width:0;
  overflow:visible;}
.nav-link{position:relative; display:flex; align-items:center; gap:6px;
  padding:8px 14px; background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:500; color:#eaf3f4;
  white-space:nowrap; border-radius:8px;
  transition:color .15s ease, background .15s ease;}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.07);}
/* página atual: accent + linha inferior (orientação clara) */
.nav-link--atual{color:var(--accent); font-weight:600;}
.nav-link--atual::after{content:""; position:absolute; left:14px; right:14px;
  bottom:-19px; height:2px; background:var(--accent); border-radius:2px;}

/* menu suspenso (Extensionistas / usuário) — CSS puro, sem JS */
.nav-menu{position:relative;}
.nav-caret{width:13px; height:13px; margin-left:4px; opacity:.8;
  transition:transform .15s ease;}
.nav-menu:hover .nav-caret,
.nav-menu:focus-within .nav-caret{transform:rotate(180deg);}
.nav-menu-lista{position:absolute; top:calc(100% + 14px); left:0; z-index:1200;
  min-width:200px; padding:6px; border-radius:12px;
  background:var(--menu-bg); border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;}
.nav-menu-lista--dir{left:auto; right:0;}
.nav-menu:hover .nav-menu-lista,
.nav-menu:focus-within .nav-menu-lista{opacity:1; visibility:visible;
  transform:translateY(0);}
.nav-menu-item{display:block; padding:9px 12px; border-radius:8px;
  color:var(--txt); font-size:14px; white-space:nowrap;}
.nav-menu-item:hover{background:var(--side-hover); color:var(--accent);}
.nav-menu-item--atual{color:var(--accent); font-weight:600;}
.nav-menu-item--sair{color:#fb7185;}
.nav-menu-item--sair:hover{background:rgba(251,113,133,.12); color:#fb7185;}
/* cabeçalho do menu do usuário */
.nav-menu-cabecalho{padding:10px 12px 8px; border-bottom:1px solid var(--line);
  margin-bottom:6px;}
.nav-menu-nome{color:var(--heading); font-size:14px; font-weight:600;}
.nav-menu-papel{color:var(--accent); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; margin-top:2px;}
/* gatilho do menu do usuário: avatar + seta */
.nav-user-botao{display:flex; align-items:center; gap:4px; padding:2px 6px 2px 2px;
  background:transparent; border:none; border-radius:9999px; cursor:pointer;
  color:#eaf3f4; transition:background .15s ease;}
.nav-user-botao:hover{background:rgba(255,255,255,.08);}

/* ---------- Ações (geometria uniforme: círculos de 36px) ---------- */
.navbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.nav-acao{width:36px; height:36px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:#eaf3f4; cursor:pointer; padding:0;
  transition:color .15s ease, border-color .15s ease, background .15s ease;}
.nav-acao:hover{color:var(--accent); border-color:var(--accent);
  background:rgba(79,209,197,.10);}
.nav-acao--atual{color:var(--accent); border-color:var(--accent);}
/* a pílula é EXCLUSIVA do Entrar => lê-se como ação principal */
.nav-entrar{padding:8px 18px; border-radius:9999px; font-size:14px;
  font-weight:600; color:#062a36; background:var(--accent);
  white-space:nowrap; transition:filter .15s ease;}
.nav-entrar:hover{filter:brightness(1.08);}

.nav-avatar{width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:#04222b; background:#4fd1c5; flex:none;}

/* ---------- Hambúrguer (mobile) ----------
   o botão alterna data-nav no <html> (padrão do tema/sidebar)          */
.nav-hamburguer{display:none;}

/* ---------- Shell + sidebar recolhível ---------- */
.shell{display:flex; align-items:flex-start; min-height:calc(100vh - 60px);}
.sidebar{width:230px; flex:0 0 230px; background:var(--side-bg);
  border-right:1px solid var(--line); padding:0px 12px; display:flex;
  flex-direction:column; justify-content:space-between;
  position:sticky; top:60px;                 /* <<< fixa abaixo da navbar (60px) */
  height:calc(100vh - 60px);                  /* <<< altura cheia da tela */
  overflow-y:auto;                            /* <<< rola sozinha se o menu crescer */
  transition:width .18s ease, flex-basis .18s ease;}
/* recolhida: some e libera a largura para o conteúdo */
:root[data-sidebar="collapsed"] .sidebar{width:0; flex-basis:0;
  padding-left:0; padding-right:0; overflow:hidden; border-right:none;}
.side-section{color:var(--muted); font-size:11px; font-weight:700;
  letter-spacing:1px; margin:18px 10px 8px; white-space:nowrap;}
.side-link{display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:8px; color:var(--side-txt); font-size:14px; font-weight:500;
  margin:2px 0; white-space:nowrap;}
.side-link:hover{background:var(--side-hover);}
.side-link.side-link--disabled{opacity:.45; cursor:not-allowed;}
.side-link.side-link--disabled:hover{background:transparent;}
.side-ico{width:20px; text-align:center; font-size:15px;}
.side-foot{padding:12px 0px; border-top:1px solid var(--line); white-space:nowrap;}
.side-foot-title{font-size:11px; font-weight:600; color:var(--txt);}
.side-foot-sub{font-size:11px; color:var(--muted);}

.content{flex:1; min-width:0; padding:24px 28px;}

/* ---------- Cabeçalho de página ---------- */
.page-head h2{margin:0 0 4px; color:var(--heading); font-size:26px;}
.lead{color:var(--muted); font-size:14px; margin:4px 0 0;}

/* =========================================================================
   HOME (landing institucional)
   ========================================================================= */
.btn{display:inline-block; padding:12px 22px; border-radius:8px; font-weight:700;
  cursor:pointer; border:none; font-size:14px;}
.btn-accent{background:var(--accent); color:#04222b;}
.btn-accent:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- Superfície de vidro (linguagem do material de divulgação) ----
   painéis translúcidos com blur e borda accent: leves, não "caixas".     */
.vidro{background:rgba(9,68,84,.34); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(79,209,197,.20); border-radius:18px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
:root[data-theme="light"] .vidro{background:rgba(255,255,255,.72);
  border-color:rgba(9,68,84,.12);
  box-shadow:0 6px 24px rgba(9,68,84,.06);}
.vidro:hover{border-color:rgba(79,209,197,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.22);}

/* texto com gradiente (assinatura tipográfica da marca) */
.texto-gradiente{background:linear-gradient(90deg,var(--accent),#ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Hero: foto + padrão de circuito + constelação de dados (canvas).
   O hero REDEFINE as variáveis de tema localmente: é sempre escuro, em
   qualquer tema, porque vive sobre a foto. Tudo que usa var() dentro
   dele herda automaticamente — sem precisar de exceção item a item. */
.hero{--panel:rgba(9,68,84,.34); --panel-2:rgba(9,68,84,.44);
  --txt:#eaf3f4; --heading:#ffffff; --muted:#aecbd0; --kpi-val:#ffffff;
  --line:rgba(79,209,197,.22);
  position:relative; overflow:hidden;
  margin:-24px -28px 28px;                 /* full-bleed sobre o .content */
  min-height:600px; display:flex; flex-direction:column;
  justify-content:center;
  background-color:#052630;
  background-image:
    linear-gradient(90deg, rgba(5,38,48,.96) 0%, rgba(5,38,48,.80) 46%, rgba(5,38,48,.42) 100%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fd1c5' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url('/assets/img/hero.webp');
  background-size:cover, 60px 60px, cover;
  background-position:center, center, center;
  background-repeat:no-repeat, repeat, no-repeat;}
/* constelação animada — assets/constelacao.js */
.hero-canvas{position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;}
/* o vidro dentro do hero ignora o tema (a regra light não o alcança) */
:root[data-theme="light"] .hero .vidro{background:rgba(5,38,48,.52);
  border-color:rgba(79,209,197,.28); box-shadow:none;}
:root[data-theme="light"] .hero .vidro:hover{
  border-color:rgba(79,209,197,.6);}
.hero-inner{position:relative; z-index:1;
  width:calc(100% - 56px); max-width:1180px; margin:0 auto;
  padding:56px 0 0; text-align:left;}
.hero-inner > *{max-width:640px;}
/* tipografia institucional: Sora em todo o site (a mono ficou só no
   material de recrutamento, onde o público era técnico) */
.hero-eyebrow{display:inline-block; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;}
.hero h1{color:#fff; font-size:clamp(42px,5.4vw,72px); line-height:.94;
  letter-spacing:-.03em; margin:0 0 20px; font-weight:800;}
.hero-sub{color:#cfe2e6; font-size:18px; line-height:1.55; max-width:540px;
  margin:0 0 30px !important; text-align:left;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero .btn{padding:14px 26px; font-size:15px; border-radius:9999px;}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45);}
.hero .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
/* cartão de destaque flutuante (canto inferior direito) */
/* right alinhado à coluna de conteúdo (1180px); bottom acima da faixa de
   números, que invade o hero em -44px */
.hero-card{position:absolute;
  right:max(40px, calc((100% - 1180px) / 2)); bottom:64px; z-index:1;
  background:rgba(6,34,44,.82); backdrop-filter:blur(4px);
  border:1px solid rgba(79,209,197,.4); border-radius:14px; padding:18px 22px; min-width:210px;}
.hero-card-eyebrow{display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.hero-card-value{display:block; font-size:32px; font-weight:700; color:#fff; line-height:1;}
.hero-card-label{display:block; font-size:12px; color:#aecbd0; margin-top:6px; max-width:170px;}

/* Cabeçalho de seção */
.sec-head{margin:0 0 22px;}
.sec-eyebrow{display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;}
.sec-head h2{color:var(--heading); font-size:30px; margin:0; font-weight:800;
  letter-spacing:-.02em;}
.sec-sub{color:var(--muted); font-size:14px; line-height:1.55; margin:8px 0 0; max-width:640px;}

/* Números de impacto — em vidro, dentro do hero (sem faixa rígida) */
.stats-band{position:relative; z-index:1;
  width:calc(100% - 56px); max-width:1180px; margin:56px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.stat{padding:18px 22px; border-left:3px solid var(--accent);}
.stat:hover{transform:translateY(-4px);}
.stat-value{display:block; font-size:30px; font-weight:800; color:#fff;
  line-height:1.05; letter-spacing:-.02em;}
.stat-label{display:block; font-size:11px; font-weight:700;
  color:var(--accent); text-transform:uppercase; letter-spacing:.1em;
  margin-top:6px;}
/* selo de atualização */
.stats-atualizacao{margin:14px 4px 40px; text-align:right; font-size:12px;
  color:var(--muted);}
/* Seções */
.home-section{margin:0 0 56px;}
.sobre-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:center;}
.sobre-texto{color:var(--txt); font-size:16px; line-height:1.75; margin:0;}
.sobre-texto abbr{text-decoration:none; border-bottom:1px dotted var(--muted);}
.sobre-aside{padding:26px;}
.sobre-aside .painel-ico{width:30px; height:30px; color:var(--accent);}
.sobre-aside h3{color:var(--heading); font-size:16px; margin:12px 0 6px;}
.sobre-aside p{color:var(--muted); font-size:13px; line-height:1.6; margin:0;}

/* Painéis em BENTO: o tamanho comunica a importância (nada de 6 cards
   idênticos). Linha 1: Ações (hub) + PDI; linha 2: os quatro vínculos. */
.paineis-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.painel-card{padding:24px; display:flex; flex-direction:column; cursor:pointer;
  position:relative; overflow:hidden;}
.painel-card:hover{transform:translateY(-5px);}
.painel-card--destaque{grid-column:span 2; padding:30px;
  border-color:rgba(79,209,197,.45);
  background:linear-gradient(135deg, rgba(79,209,197,.16),
                             rgba(9,68,84,.34) 55%);}
.painel-card--largo{grid-column:span 2; padding:30px;}
.painel-card--destaque .painel-titulo,
.painel-card--largo .painel-titulo{font-size:26px;}
.painel-card--destaque .painel-desc,
.painel-card--largo .painel-desc{font-size:14px; max-width:46ch;}
.painel-badge{width:46px; height:46px; border-radius:14px; display:flex;
  align-items:center; justify-content:center;
  background:rgba(79,209,197,.14); margin-bottom:16px;}
.painel-ico{width:24px; height:24px; color:var(--accent);}
.painel-titulo{color:var(--heading); font-size:19px; margin:0 0 8px;
  font-weight:700; letter-spacing:-.01em;}
.painel-desc{color:var(--muted); font-size:13px; line-height:1.55;
  margin:0 0 18px; flex:1;}
.painel-cta{display:inline-flex; align-items:center; gap:6px; font-size:13px;
  font-weight:700; color:var(--accent);}
.painel-cta .icon{width:16px; height:16px;}
.badge-breve{display:inline-block; font-size:11px; font-weight:700; color:var(--gold);
  background:rgba(193,154,58,.14); border:1px solid rgba(193,154,58,.4);
  padding:3px 10px; border-radius:9999px;}

/* Em breve */
.breve-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom: 20px;}
.breve-card{background:var(--panel); border:1px dashed var(--line); border-radius:14px; padding:20px;}
.breve-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.breve-card .painel-ico{width:24px; height:24px; color:var(--muted);}

/* Faixa de CTA (vidro + brilho accent) */
.cta-band{display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:36px 40px; margin:0 0 44px;
  background:linear-gradient(120deg, rgba(79,209,197,.14),
                             rgba(9,68,84,.34) 60%);}
.cta-band .btn{border-radius:9999px;}
.cta-text h2{color:var(--heading); font-size:26px; margin:0 0 6px;
  font-weight:800; letter-spacing:-.02em;}
.cta-text p{color:#bcd6da; font-size:15px; margin:0; max-width:520px;}
.cta-band .btn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.cta-band .btn .icon{width:18px; height:18px;}

/* Parceiros */
/* 3 colunas iguais — cards proporcionais em qualquer conteúdo */
.parceiros-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px; align-items:stretch;}
.parceiro-logo{background:#062a36; border-radius:14px; padding:24px 16px; display:flex;
  align-items:center; justify-content:center; min-width:160px; height:200px;
  border:1px solid var(--line); transition:transform .15s, box-shadow .15s;}
.parceiro-logo:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.parceiro-img{max-width:170px; width:auto; object-fit:contain;}

/* Rodapé */
.home-footer{border-top:1px solid var(--line); margin-top:0px; padding:5px 0px;
  color:var(--muted); font-size:13px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content: center; }
.home-footer a{color:var(--accent);}
.home-footer .dot{color:var(--line);}

/* mais largo primeiro; o mais estreito vem depois para poder sobrescrever */
@media (max-width:1000px){
  .stats-band{grid-template-columns:repeat(2,1fr); margin-top:36px;}
  .paineis-grid{grid-template-columns:repeat(2,1fr);}
  .painel-card--destaque,.painel-card--largo{grid-column:span 2;}
  .breve-grid{grid-template-columns:1fr 1fr;}
  .parceiros-grid{grid-template-columns:1fr;}
  .sobre-grid{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  .hero{min-height:520px;}
  .hero-inner{padding:40px 24px 0;}
  .hero-card{display:none;}
}
@media (max-width:760px){
  .paineis-grid{grid-template-columns:1fr;}
  .painel-card--destaque,.painel-card--largo{grid-column:span 1; padding:24px;}
  .painel-card--destaque .painel-titulo,
  .painel-card--largo .painel-titulo{font-size:20px;}
  .stats-band{width:calc(100% - 32px);}
  .hero{min-height:460px;}
}

/* ---------- Barra de filtros (grid firme) ---------- */
.filtros-barra{display:grid; grid-template-columns:120px repeat(4,minmax(0,1fr));
  gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin:18px 0;}
.filtro-grupo{min-width:0;}
.filtro-grupo label{display:block; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;}

/* ---------- KPIs ---------- */
/* auto-fit: cada painel decide quantos cards tem (4, 5, 6…) */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:6px 0 22px;}
.kpi-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; border-left:4px solid var(--accent);}
.kpi-card:nth-child(2){border-left-color:#34d399;}
.kpi-card:nth-child(3){border-left-color:var(--accent-2);}
.kpi-card:nth-child(4){border-left-color:#34d399;}
.kpi-card:nth-child(5){border-left-color:var(--gold);}
.kpi-card:nth-child(6){border-left-color:var(--green);}
.kpi-title{display:block; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;}
.kpi-value{display:block; font-size:26px; font-weight:700; color:var(--kpi-val);
  line-height:1.2; margin-top:4px;}
/* linha de crescimento dentro do card: "▲ 12,3% vs 2025" */
.kpi-sub{display:block; font-size:12px; font-weight:600; color:var(--muted);
  margin-top:4px; white-space:nowrap;}

/* ---------- Cards de gráfico ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.grid-1{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; min-width:0;}
.card-title{font-size:15px; font-weight:600; color:var(--heading); display:block; margin-bottom:10px;}
.card-title-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.card-title-row .card-title{margin-bottom:0; white-space:nowrap;}
/* corpo de card com rolagem: a figura define a própria altura */
.card-scroll{max-height:320px; overflow-y:auto; overflow-x:hidden;}

/* ---------- Página Sobre ---------- */
/* linha como pseudo-elemento do <ol>, pontos centrados nela (x = 7px) */
.timeline{list-style:none; margin:0; padding:0; position:relative;}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px;
  width:2px; background:var(--line);}
.tl-item{display:flex; gap:18px; padding:0 0 26px 30px; position:relative;}
.tl-item::before{content:""; position:absolute; left:-1px; top:5px;
  width:12px; height:12px; border-radius:50%; background:var(--accent);
  border:2px solid var(--bg); box-sizing:content-box;}
.tl-ano{flex:0 0 56px; font-weight:700; color:var(--accent); font-size:17px;}
.tl-titulo{margin:0 0 4px; color:var(--heading); font-size:16px;}
.tl-texto{margin:0; color:var(--muted); font-size:14px; line-height:1.55;}

.passos-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;}
.passo-card{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:18px;}

.equipe-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;}
.pessoa-card{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:22px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;}
.pessoa-foto{width:108px; height:108px; border-radius:50%; object-fit:cover;
  border:3px solid var(--accent); margin-bottom:6px;}
.pessoa-funcao{font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;}
.pessoa-nome{margin:0; font-size:15px; color:var(--heading); line-height:1.3;}
.btn-lattes{margin-top:8px; padding:6px 18px; font-size:13px;}

/* parceiros como cards com papel no projeto */
.parceiro-card{padding:20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;}
.parceiro-card:hover{transform:translateY(-4px);}
/* logos são BRANCAS: chip escuro fixo garante contraste nos dois temas */
.parceiro-card .parceiro-img{width:100%; max-width:none; height:120px;
  object-fit:contain; background:#07303d; border:1px solid #16404f;
  border-radius:12px; padding:18px;}
.parceiro-nome{margin:0; font-size:16px; color:var(--heading);}
.parceiro-papel{margin:0; font-size:13px; color:var(--muted); line-height:1.5;}

/* ---------- Navbar: usuário e sessão ---------- */
.nav-user{display:flex; align-items:center; gap:9px; white-space:nowrap;
  margin-left:4px;}
.nav-identidade{display:flex; flex-direction:column; line-height:1.15;}
.nav-nome{color:#fff; font-size:13px; font-weight:600;}
.nav-papel{color:var(--accent); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;}
.nav-sair{color:#aecbd0; font-size:13px; font-weight:600; white-space:nowrap;}
.nav-sair:hover{color:#fb7185;}

/* ---------- Navbar responsiva ---------- */
@media (max-width:1100px){
  .navbar-brand{min-width:auto;}
}
@media (max-width:900px){
  .navbar{gap:10px; padding:0 14px;}
  .nav-hamburguer{display:flex; order:-1;}   /* antes da marca */
  /* links viram gaveta abaixo da navbar */
  .navbar-links{display:none; position:absolute; top:60px; left:0; right:0;
    z-index:1100; flex-direction:column; align-items:stretch; gap:2px;
    padding:10px; background:var(--menu-bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 32px rgba(0,0,0,.35);}
  :root[data-nav="aberto"] .navbar-links{display:flex;}
  .navbar-links .nav-link{color:var(--txt); justify-content:flex-start;}
  .nav-link--atual::after{display:none;}
  /* grupo Extensionistas: lista sempre aberta dentro da gaveta */
  .nav-menu-botao{pointer-events:none; opacity:.65; font-size:11px;
    text-transform:uppercase; letter-spacing:.5px; padding-bottom:2px;}
  .nav-menu-botao .nav-caret{display:none;}
  .navbar-links .nav-menu-lista{position:static; opacity:1; visibility:visible;
    transform:none; box-shadow:none; border:none; background:transparent;
    padding:0 0 0 10px; min-width:0;}
  /* usuário: só o avatar (o menu continua clicável) */
  .nav-menu-cabecalho{display:block;}
}

/* ---------- Autenticação (MVP local) ---------- */
.login-page{max-width:520px;}
.login-form{display:flex; flex-direction:column; gap:6px; padding:22px;}
.login-form label{font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px; margin-top:8px;}
.login-form .btn{margin-top:16px; align-self:flex-start; cursor:pointer;}
.login-erro{background:rgba(251,113,133,.12); border:1px solid #fb7185;
  color:#fb7185; border-radius:8px; padding:10px 14px; font-size:13px;
  margin-top:10px;}
.login-aviso{font-size:12px; color:var(--muted); margin:12px 0 0;
  line-height:1.5;}
.admin-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.admin-form .busca-input{max-width:280px; margin:0;}
.admin-form .filtro--inline{margin-left:0; min-width:180px;}

/* ---------- Buscador de ações ---------- */
/* coluna de leitura centralizada (max-width sozinho ancorava à esquerda) */
.busca-page{max-width:920px; margin-inline:auto;}
.busca-head{margin-bottom:14px;}
.busca-head h2{font-size:26px;}

/* barra: campo (protagonista) + filtro de intenção */
.busca-barra{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.busca-input{flex:1; min-width:280px; padding:15px 22px; font-size:16px;
  font-family:inherit; background:var(--input-bg); color:var(--txt);
  border:1px solid var(--line); border-radius:9999px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;}
.busca-input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,209,197,.18);}
.busca-input::placeholder{color:var(--muted);}
.busca-toggle{padding:14px 20px; border-radius:9999px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; white-space:nowrap;
  background:transparent; color:var(--muted);
  border:1px solid var(--line);
  transition:color .15s ease, border-color .15s ease, background .15s ease;}
.busca-toggle:hover{color:var(--accent); border-color:var(--accent);}
.busca-toggle--on{background:var(--accent); border-color:var(--accent);
  color:#04222b;}
.busca-ajuda{font-size:12px; color:var(--muted); margin:10px 4px 16px;}

/* chips de tema — a ponte para quem não sabe o que digitar */
.busca-temas-linha{display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:22px;}
.busca-temas-rotulo{font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;}
.busca-temas{display:flex; flex-wrap:wrap; gap:8px;}
.busca-tema{padding:7px 15px; border-radius:9999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  background:rgba(79,209,197,.10); color:var(--accent);
  border:1px solid rgba(79,209,197,.30);
  transition:background .15s ease, transform .15s ease;}
.busca-tema:hover{background:rgba(79,209,197,.22); transform:translateY(-1px);}

.busca-contagem{font-size:13px; color:var(--muted); margin:0 2px 14px;}
.busca-lista{display:flex; flex-direction:column; gap:12px;}
.busca-card{display:block; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid transparent;
  border-radius:14px; padding:18px 22px;
  transition:border-color .15s ease, transform .15s ease,
             box-shadow .15s ease;}
.busca-card:hover{border-color:var(--accent); border-left-color:var(--accent);
  transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.14);}
/* hierarquia: selos decisivos > título > trecho > contexto */
.busca-selos{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.busca-chip{font-size:11px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:9999px; padding:3px 10px;
  background:var(--panel-2); text-transform:uppercase; letter-spacing:.04em;}
.busca-chip--cat{color:var(--accent); border-color:var(--accent);
  background:rgba(79,209,197,.10);}
.busca-chip--ativa{color:#34d399; border-color:#34d399;
  background:rgba(52,211,153,.10);}
.busca-titulo{margin:0 0 8px; font-size:17px; color:var(--heading);
  line-height:1.4; font-weight:700;}
/* trecho do resumo: explica POR QUE o resultado apareceu */
.busca-trecho{margin:0 0 10px; font-size:13px; line-height:1.6;
  color:var(--muted);}
.busca-marca{background:rgba(79,209,197,.22); color:var(--accent);
  font-weight:700; border-radius:4px; padding:0 3px;}
.busca-rodape{display:flex; flex-wrap:wrap; gap:6px 14px;}
.busca-meta{font-size:12px; color:var(--muted); position:relative;}
.busca-meta:not(:last-child)::after{content:"·"; margin-left:14px;
  opacity:.5;}
.busca-ico{width:14px; height:14px;}
.busca-vazio{color:var(--muted); font-size:14px; margin:8px 2px;}
.busca-mais{display:flex; justify-content:center; margin:22px 0 8px;}
.busca-mais .btn{cursor:pointer;}

/* ---------- Página da ação (/acao/<codigo>) ---------- */
.acao-page{max-width:920px; margin-inline:auto;}
/* trilha (orienta quem chegou por link compartilhado) */
.trilha{display:flex; gap:8px; align-items:center; font-size:12px;
  color:var(--muted); margin-bottom:14px;}
.trilha a:hover{color:var(--accent);}
.trilha-sep{opacity:.5;}
.trilha-atual{color:var(--txt);}
.acao-titulo{font-size:28px; line-height:1.25; margin:10px 0 0;
  letter-spacing:-.01em;}

/* ficha rápida: decide o interesse em 3 segundos */
.ficha-grade{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin:20px 0 18px;}
.ficha-item{background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:10px; padding:12px 14px;}
.ficha-rotulo{display:block; font-size:10px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.ficha-valor{display:block; font-size:15px; font-weight:700;
  color:var(--heading); margin-top:4px; line-height:1.3;}

.acao-municipios{display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--txt); margin:0 2px 22px;}

/* equipe */
.acao-equipe{padding:18px 22px; margin-top:18px;}
.equipe-grade{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px;
  margin-top:10px;}
.equipe-item{text-align:center;}
.equipe-num{display:block; font-size:22px; font-weight:800;
  color:var(--accent); line-height:1.1;}
.equipe-rotulo{display:block; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  margin-top:2px;}

/* chamada para ação: o caminho para participar */
.acao-cta{margin-top:18px; padding:24px;
  background:linear-gradient(120deg, rgba(79,209,197,.12),
                             var(--panel) 60%);
  border-color:rgba(79,209,197,.35);}
.cta-titulo{margin:0 0 10px; font-size:19px; color:var(--heading);
  font-weight:700;}
.cta-linha{margin:0 0 6px; font-size:14px; color:var(--txt);}
.cta-nota{margin:6px 0 16px; font-size:12px; color:var(--muted);
  line-height:1.6; max-width:60ch;}
.cta-acoes{display:flex; gap:10px; flex-wrap:wrap;}
.cta-acoes .btn{cursor:pointer; border-radius:9999px;}
.cta-copiado{display:inline-block; margin-top:10px; font-size:12px;
  color:var(--accent); font-weight:600;}

/* posts do Instagram (seção "Nas redes") */
.acao-midias{margin-top:18px; padding:18px 22px;}
/* grade compacta: 2–3 posts lado a lado em telas largas */
.midia-grade{display:grid; gap:14px; margin-top:12px;}
.midia-grade--iframe{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.midia-grade--card{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.midia-item{display:flex; flex-direction:column; gap:6px;}
.midia-frame{width:100%; height:400px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel-2); display:block;}

/* card na identidade do ODE (modo "card") */
.midia-card{display:flex; flex-direction:column; padding:0; overflow:hidden;
  height:100%;}
.midia-capa-wrap{position:relative; width:100%; aspect-ratio:1/1;
  background:var(--panel-2); overflow:hidden;}
.midia-capa{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease;}
.midia-card:hover .midia-capa{transform:scale(1.04);}
.midia-sem-capa{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:12px; color:var(--muted);}
.midia-topo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 14px 0;}
.midia-selo{font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(79,209,197,.4); border-radius:9999px;
  padding:2px 8px;}
.midia-autor{font-size:12px; color:var(--muted); font-weight:600;}
.midia-legenda{margin:8px 14px 0; font-size:12px; line-height:1.55;
  color:var(--txt); display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;}
.midia-card .painel-cta{margin:12px 14px 14px; font-size:12px;}
.midia-manual{margin-top:10px;}
.midia-manual summary{font-size:13px; padding:10px 14px;}
.midia-manual .midia-form{padding:0 14px 14px;}
/* ações fora do iframe (antes cobriam o cabeçalho do post) */
.midia-acoes{display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 2px;}
.midia-link{font-size:12px; color:var(--accent); font-weight:600;}
.midia-remover{cursor:pointer; background:transparent; color:#fb7185;
  border:1px solid rgba(251,113,133,.45); border-radius:9999px;
  padding:4px 12px; font-size:12px; font-weight:600; font-family:inherit;
  transition:background .15s ease;}
.midia-remover:hover{background:rgba(251,113,133,.14);}
.midia-nota{margin:12px 0 0; font-size:11px; color:var(--muted);}
.midia-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:14px;}
.midia-form .busca-input{max-width:420px; margin:0; padding:11px 18px;
  font-size:14px;}
.midia-form .btn{cursor:pointer;}

/* relacionadas: mantém a descoberta viva */
.acao-relacionadas{margin-top:26px;}
.rel-grade{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
  margin-top:10px;}
.rel-card{display:block; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:border-color .15s ease, transform .15s ease;}
.rel-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.rel-titulo{margin:8px 0 6px; font-size:14px; line-height:1.4;
  color:var(--heading); font-weight:600;}
.acao-secoes{display:flex; flex-direction:column; gap:10px;}
.acao-secao{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:0; overflow:hidden;}
.acao-secao summary{cursor:pointer; padding:14px 20px; font-size:15px;
  font-weight:600; color:var(--heading); list-style:none;
  display:flex; align-items:center; gap:10px;}
/* seta em SVG (mesmo chevron dos menus), via máscara CSS */
.acao-secao summary::before{content:""; width:15px; height:15px; flex:none;
  background-color:var(--accent);
  -webkit-mask:url(/assets/icons/chevron-down.svg) no-repeat center/contain;
  mask:url(/assets/icons/chevron-down.svg) no-repeat center/contain;
  transform:rotate(-90deg); transition:transform .18s ease;}
.acao-secao[open] summary::before{transform:rotate(0deg);}
.acao-secao summary:hover{color:var(--accent);}
.acao-secao summary::-webkit-details-marker{display:none;}
.acao-secao summary::marker{content:"";}
.acao-secao-corpo{padding:0 20px 18px;}
/* coluna de leitura confortável (~70 caracteres por linha) */
.acao-secao-corpo p{margin:0 0 12px; font-size:15px; line-height:1.75;
  color:var(--txt); max-width:70ch;}

/* ---------- Painel PDI ---------- */
/* placar executivo: "X de N metas atingidas" + chips por indicador */
.pdi-placar{display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:16px 22px; margin:6px 0 26px;}
.pdi-placar-resumo{display:flex; align-items:baseline; gap:10px;}
.pdi-placar-num{font-size:30px; font-weight:700; color:var(--kpi-val);}
.pdi-placar-txt{font-size:14px; color:var(--muted); font-weight:600;}
.pdi-placar-chips{display:flex; gap:8px; flex-wrap:wrap;}
.pdi-chip{font-size:12px; font-weight:600; color:var(--txt);
  border:1px solid var(--line); border-radius:9999px; padding:5px 12px;
  background:var(--panel-2); white-space:nowrap;}

.pdi-grupo-head{margin:26px 0 12px;}
.pdi-grupo-head .lead{margin-top:2px;}

.kpi-sub--parcial{color:var(--muted); font-weight:500; font-style:italic;}

.btn-mini{margin-left:auto; padding:7px 16px; font-size:13px; cursor:pointer;
  border:none; border-radius:9999px;}

.pdi-cod{font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--accent);}
.pdi-metas{margin:8px 0 0; font-size:12px; color:var(--txt);}
.pdi-fonte{margin:4px 0 0; font-size:11px; color:var(--muted);}
.pdi-secao{color:var(--heading); font-size:20px; margin:26px 0 4px;}
.pdi-indisponiveis{margin-top:10px;}
.pdi-nota{margin:22px 2px 8px; font-size:12px; color:var(--muted);
  line-height:1.6; border-left:3px solid var(--gold); padding-left:12px;}

/* ---------- Tabela de ações (painel Mapa) ---------- */
.tabela-acoes{width:100%; border-collapse:collapse; font-size:13px;}
.tabela-acoes th{position:sticky; top:0; background:var(--panel-2);
  color:var(--muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.4px; text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--line);}
.tabela-acoes td{padding:8px 10px; border-bottom:1px solid var(--line);
  color:var(--txt);}
.tabela-acoes td:not(:first-child),.tabela-acoes th:not(:first-child){
  text-align:center; white-space:nowrap;}
.tabela-acoes tbody tr:hover{background:var(--side-hover);}
.tabela-vazia{color:var(--muted); font-size:13px; margin:6px 2px;}
/* dropdown interno do gráfico: largura legível, empurrado p/ a direita */
.filtro--inline{margin-left:auto; min-width:210px; flex:0 0 210px;}

/* =========================================================================
   DROPDOWNS (dcc.Dropdown) — variáveis (claro/escuro)
   ========================================================================= */
.filtro .Select-control,.filtro .Select-control:hover{
  background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  box-shadow:none; min-height:38px;}
.filtro.is-focused:not(.is-open) > .Select-control{
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,209,197,.25);}
.filtro .Select-placeholder{color:var(--muted);}
.filtro .Select--single > .Select-control .Select-value .Select-value-label,
.filtro .Select-value-label{color:var(--txt) !important;}
.filtro .Select-input > input{color:var(--txt);}
.filtro .Select-arrow{border-color:var(--muted) transparent transparent;}
.filtro.is-open .Select-arrow{border-color:transparent transparent var(--accent);}
.filtro .Select--multi .Select-value{background:rgba(79,209,197,.14);
  border:1px solid rgba(79,209,197,.45); color:var(--txt); border-radius:6px;}
.filtro .Select--multi .Select-value-icon{border-right:1px solid rgba(79,209,197,.45); color:var(--accent);}
.filtro .Select--multi .Select-value-icon:hover{background:rgba(79,209,197,.25);}
.filtro .Select-menu-outer{background:var(--menu-bg); border:1px solid var(--line);
  border-radius:0 0 8px 8px; z-index:1200;}
.filtro .Select-option{background:var(--menu-bg); color:var(--txt); font-size:14px;}
.filtro .Select-option.is-focused{background:rgba(79,209,197,.18);}
.filtro .Select-option.is-selected{background:rgba(124,156,255,.18);}
.filtro .Select-noresults{color:var(--muted);}

/* =========================================================================
   ÍCONES SVG (máscara CSS) — herdam a cor do texto (currentColor)
   ========================================================================= */
.icon{display:inline-block; width:20px; height:20px; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; vertical-align:middle; flex:none;}
.icon-menu{-webkit-mask-image:url(/assets/icons/menu.svg); mask-image:url(/assets/icons/menu.svg);}
.icon-settings{-webkit-mask-image:url(/assets/icons/settings.svg); mask-image:url(/assets/icons/settings.svg);}
.icon-mail{-webkit-mask-image:url(/assets/icons/mail.svg); mask-image:url(/assets/icons/mail.svg);}
.icon-search{-webkit-mask-image:url(/assets/icons/search.svg); mask-image:url(/assets/icons/search.svg);}
.icon-home{-webkit-mask-image:url(/assets/icons/home.svg); mask-image:url(/assets/icons/home.svg);}
.icon-students{-webkit-mask-image:url(/assets/icons/students.svg); mask-image:url(/assets/icons/students.svg);}
.icon-teacher{-webkit-mask-image:url(/assets/icons/teacher.svg); mask-image:url(/assets/icons/teacher.svg);}
.icon-clipboard{-webkit-mask-image:url(/assets/icons/clipboard.svg); mask-image:url(/assets/icons/clipboard.svg);}
.icon-map{-webkit-mask-image:url(/assets/icons/map.svg); mask-image:url(/assets/icons/map.svg);}
.icon-building{-webkit-mask-image:url(/assets/icons/building.svg); mask-image:url(/assets/icons/building.svg);}
.icon-star{-webkit-mask-image:url(/assets/icons/star.svg); mask-image:url(/assets/icons/star.svg);}
.icon-users{-webkit-mask-image:url(/assets/icons/users.svg); mask-image:url(/assets/icons/users.svg);}
.icon-award{-webkit-mask-image:url(/assets/icons/award.svg); mask-image:url(/assets/icons/award.svg);}
.icon-book{-webkit-mask-image:url(/assets/icons/book.svg); mask-image:url(/assets/icons/book.svg);}
.icon-calendar{-webkit-mask-image:url(/assets/icons/calendar.svg); mask-image:url(/assets/icons/calendar.svg);}
.icon-arrow-right{-webkit-mask-image:url(/assets/icons/arrow-right.svg); mask-image:url(/assets/icons/arrow-right.svg);}
.icon-chevron-down{-webkit-mask-image:url(/assets/icons/chevron-down.svg); mask-image:url(/assets/icons/chevron-down.svg);}
.icon-chart-bar{-webkit-mask-image:url(/assets/icons/chart-bar.svg); mask-image:url(/assets/icons/chart-bar.svg);}
/* tema: lua no escuro, sol no claro */
.icon-theme{-webkit-mask-image:url(/assets/icons/sun.svg); mask-image:url(/assets/icons/sun.svg);}
:root[data-theme="light"] .icon-theme{-webkit-mask-image:url(/assets/icons/moon.svg); mask-image:url(/assets/icons/moon.svg);}
.nav-search-ico{color:#8aa6ad; margin-right:8px; width:18px; height:18px;}
.side-ico{width:18px; height:18px;}

/* =========================================================================
   NAVBAR transparente sobre o hero — apenas na home e no topo da página
   ========================================================================= */
.navbar{transition:background .25s ease, border-color .25s ease;}
:root[data-page="home"] .content{padding-top:0;}
:root[data-page="home"] .hero{margin-top:-60px; padding-top:60px;}
/* transparente sobre o hero, mas com véu escuro no topo: os links brancos
   ficam legíveis independentemente do trecho da foto que estiver atrás.
   Sem borda inferior — ela cortava a imagem com uma linha dura. */
:root[data-page="home"]:not([data-scrolled]) .navbar{
  background:linear-gradient(180deg, rgba(4,28,37,.55) 0%,
                             rgba(4,28,37,.28) 60%, rgba(4,28,37,0) 100%);
  border-bottom:none;}
:root[data-page="home"]:not([data-scrolled]) .nav-acao{
  border-color:rgba(255,255,255,.30);}

/* =========================================================================
   Largura máxima do conteúdo da home — o hero continua full-bleed
   ========================================================================= */
.stats-band,
.stats-atualizacao,
.home-section,
.cta-band,
.home-footer{
  max-width:1180px; margin-left:auto; margin-right:auto;
}

.sobre-logo{height:48px; width:auto; display:block; margin-bottom:14px;}