/**
 * Cabeçalho do site institucional — faixa de utilidades + navegação + submenu
 * + menu sanduíche do celular. ARQUIVO ÚNICO: mexeu aqui, muda nas 12 páginas
 * (inicio, instituto, diretoria, noticia(s), galeria(s) e os 5 eixos).
 *
 * Vem junto de header.php (HTML) e js/cabecalho.js (comportamento).
 * Carregado ANTES do <style> de cada página, de propósito: assim uma página
 * ainda consegue ajustar algo do cabeçalho sem precisar de !important.
 *
 * As páginas 40anos/ e equilibrista/ têm cabeçalho próprio e não usam este.
 */
/* ── Header (duas faixas: utilidades + navegação) ── */
.header{position:fixed;inset:0 0 auto 0;z-index:50}
.brand{display:flex;align-items:center;gap:12px;color:#fff;flex-shrink:0}
.brand img{width:38px;height:38px;object-fit:contain}
.brand-txt strong{display:block;font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.08em;line-height:1.1}
.brand-txt span{display:block;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:3px}

.header-top{max-height:92px;overflow:hidden;background:var(--navy-950);border-bottom:1px solid rgba(232,182,76,.18);transition:max-height .3s ease, opacity .3s ease}
.top-wrap{max-width:1320px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 24px}
.header-top .brand img{width:68px;height:68px}
.header-top .brand-txt span{white-space:nowrap;letter-spacing:.09em;font-size:9px}
.top-utils{display:flex;align-items:center;gap:18px}
.util-divider{width:1px;height:26px;background:rgba(255,255,255,.15)}
.util-item{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85)}
.util-item:hover{color:#fff}
.util-ico{width:30px;height:30px;border:1px solid rgba(232,182,76,.4);border-radius:50%;display:grid;place-items:center;color:var(--gold);flex-shrink:0}
.util-ico svg{width:14px;height:14px}
.util-cta .util-ico{background:rgba(232,182,76,.12)}
.util-txt{line-height:1.3}
.util-txt strong{display:block;font-size:11.5px;font-weight:700;color:#fff}
.util-txt small{display:block;font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.03em;margin-top:1px}

.header-nav{background:rgba(6,26,48,.97);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.06);transition:box-shadow .3s}
.header.scrolled .header-top{max-height:0;opacity:0;border-bottom-color:transparent}
.header.scrolled .header-nav{box-shadow:0 10px 24px -12px rgba(4,13,25,.65)}
.nav-wrap{max-width:1320px;display:flex;align-items:stretch;padding:0 24px;position:relative}
.brand-compact{display:none;align-items:center;margin-right:16px}
.brand-compact img{width:30px;height:30px;object-fit:contain}
.nav{display:flex;flex:1}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:15px 8px;border-right:1px solid rgba(255,255,255,.07);transition:background .2s}
.nav a:last-child{border-right:0}
.nav a strong{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.nav a small{font-size:9px;color:rgba(255,255,255,.42);letter-spacing:.02em}
.nav a:hover{background:rgba(255,255,255,.045)}
.nav a:hover strong{color:var(--gold)}
.nav a.nav-cta strong{color:var(--gold)}
.nav a.nav-cta:hover{background:rgba(232,182,76,.09)}
.burger{display:none;align-self:center;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.burger svg{width:24px;height:24px}
.nav-mobile{display:none}

/* ── Submenu (faixa de ponta a ponta; só o grupo de links se desloca para ficar embaixo do botão) ── */
.submenu{max-height:0;opacity:0;overflow:hidden;background:rgba(238,242,246,.96);backdrop-filter:blur(8px);transition:max-height .22s ease, opacity .18s ease}
.submenu.open{max-height:56px;opacity:1}
.submenu-wrap{max-width:1320px;display:flex;align-items:center;padding:15px 24px}
.submenu-links{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.submenu-wrap a{font-size:12.5px;font-weight:600;color:var(--navy-800);transition:color .2s}
.submenu-wrap a:hover{color:var(--gold-600)}
.submenu-wrap .sep{color:#aab4bf;font-size:12px}

/* ── Celular/tablet: esconde a faixa de cima, troca o menu pelo sanduíche ── */
@media (max-width:1080px){
  .header-top{max-height:0;opacity:0;border-bottom-color:transparent}
  .brand-compact{display:flex}
  .nav{display:none}
  .burger{display:block}
  .submenu{display:none}
  .header.open .header-nav{background:var(--navy-900)}
  .header.open .nav{display:flex;flex-direction:column;width:100%;position:absolute;left:0;right:0;top:100%;background:var(--navy-900);box-shadow:0 14px 24px -12px rgba(4,13,25,.5)}
  .header.open .nav a{flex-direction:row;justify-content:space-between;text-align:left;padding:13px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  /* Logo maior no celular + menu sanduíche por grupos (monta em JS a partir do subData) */
  .brand-compact{padding:7px 0}
  .brand-compact img{width:46px;height:46px}
  .header.open .nav{display:none}
  .header.open .nav-mobile{display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 70px);overflow-y:auto;background:var(--navy-900);box-shadow:0 14px 24px -12px rgba(4,13,25,.5)}
  .nav-mobile-topo{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font:inherit;text-align:left;cursor:pointer}
  .nav-mobile-topo strong{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .nav-mobile-topo small{display:block;font-size:10px;color:rgba(255,255,255,.45);margin-top:2px}
  .nav-mobile-topo svg{flex:none;width:12px;height:12px;color:var(--gold);transition:transform .25s}
  .nav-mobile-grupo.aberto .nav-mobile-topo svg{transform:rotate(180deg)}
  .nav-mobile-grupo.cta .nav-mobile-topo strong{color:var(--gold)}
  .nav-mobile-lista{display:none;padding:6px 0;background:rgba(4,13,25,.45);border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-mobile-grupo.aberto .nav-mobile-lista{display:block}
  .nav-mobile-lista a{display:block;padding:11px 20px 11px 32px;font-size:13.5px;color:rgba(255,255,255,.85);border-left:2px solid transparent}
  .nav-mobile-lista a:hover,.nav-mobile-lista a:focus-visible{color:var(--gold);border-left-color:var(--gold)}
}