/* =====================================================
   CENTEA · MENU SUPERIOR COMPARTILHADO
   Dois itens fixos (Cursos técnicos · Graduação & Pós) que abrem
   submenus. Estrutura vem de CENTEA.menu (data/cursos.js); o HTML é
   montado por ui/menu.js dentro de <div id="menuTopo">.
   Depende das variáveis --navy, --navy-deep, --amarelo, --branco,
   --display, --body, --shell, --wa definidas na página.
   ===================================================== */
.topo{
  position:sticky;top:0;z-index:100;
  background:rgba(3,6,46,.88);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--branco);
}
/* o desfoque fica num pseudo-elemento: backdrop-filter no próprio header
   viraria "containing block" e prenderia o painel fixo do celular */
.topo::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topo__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.topo__logo img{height:40px;width:auto;display:block}

/* ----- itens principais ----- */
.topo__itens{display:flex;align-items:center;gap:.4rem;margin:0;padding:0;list-style:none}
.topo__item{position:relative;z-index:2} /* acima do véu */
/* ponte invisível entre o botão e o painel: cruzar o vão não fecha o submenu */
.topo__item.is-open::after{content:"";position:absolute;left:-1rem;right:-1rem;top:100%;height:1rem}
.topo__btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font:inherit;font-weight:700;font-size:1rem;color:rgba(255,255,255,.9);
  background:none;border:0;cursor:pointer;
  padding:.6rem .95rem;border-radius:999px;
  transition:background .18s ease, color .18s ease;
}
.topo__btn:hover, .topo__item.is-open .topo__btn{background:rgba(255,255,255,.1);color:var(--branco)}
.topo__item.is-here .topo__btn{color:var(--amarelo)}
.topo__btn svg{width:14px;height:14px;transition:transform .2s ease}
.topo__item.is-open .topo__btn svg{transform:rotate(180deg)}

/* ----- painel do submenu (desktop) ----- */
.topo__painel{
  position:absolute;left:50%;top:calc(100% + .7rem);transform:translateX(-50%) translateY(-6px);
  min-width:min(790px, 94vw);
  background:var(--branco);color:var(--navy);
  border-radius:20px;padding:1.4rem 1.4rem 1.2rem;
  box-shadow:0 30px 70px rgba(0,6,40,.45);
  display:grid;grid-template-columns:repeat(var(--cols, 2), minmax(0,1fr)) 15rem;gap:1.4rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:3;
}
.topo__painel::before{ /* seta */
  content:"";position:absolute;left:50%;top:-8px;width:16px;height:16px;background:var(--branco);
  transform:translateX(-50%) rotate(45deg);border-radius:3px;
}
.topo__item.is-open .topo__painel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);transition-delay:0s}
.topo__grupo h3{margin:0 0 .5rem;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5a618a}
.topo__grupo ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.topo__link{
  display:grid;gap:.05rem;padding:.55rem .7rem;border-radius:12px;
  color:var(--navy);text-decoration:none;
  transition:background .15s ease;
}
.topo__link:hover, .topo__link:focus-visible{background:#eef1fb}
.topo__link b{font-size:.98rem;font-weight:700;display:flex;align-items:center;gap:.4rem}
.topo__link b svg{width:13px;height:13px;opacity:.55}
.topo__link small{font-size:.8rem;font-weight:500;color:#5a618a}

/* redes sociais dentro do painel */
.topo__redes{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(0,14,96,.1)}
.topo__redes h3{margin:0 0 .5rem;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5a618a}
.topo__redes > div{display:flex;gap:.5rem;flex-wrap:wrap}
.topo__rede{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .85rem .45rem .55rem;border-radius:999px;
  border:1.5px solid rgba(0,14,96,.15);color:var(--navy);text-decoration:none;
  font-size:.86rem;font-weight:700;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.topo__rede svg{width:20px;height:20px}
.topo__rede:hover, .topo__rede:focus-visible{background:var(--amarelo);border-color:var(--amarelo);transform:translateY(-1px)}

/* cartão de destaque à direita do painel (CTA do submenu) */
.topo__destaque{
  display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
  background:var(--navy);color:var(--branco);border-radius:16px;padding:1.2rem 1.2rem 1.1rem;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.topo__destaque:hover{transform:translateY(-2px);background:#001080}
.topo__destaque b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.45rem;line-height:1}
.topo__destaque small{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.75)}
.topo__destaque .pill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--amarelo);color:var(--navy);font-weight:800;font-size:.85rem;
  padding:.5rem .95rem;border-radius:999px;white-space:nowrap;
}
.topo__destaque .pill svg{width:16px;height:16px}

/* ----- CTA fixo à direita ----- */
.topo__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--amarelo);color:var(--navy);font-weight:800;font-size:.92rem;
  padding:.65rem 1.3rem;border-radius:999px;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 28px rgba(255,187,0,.32);
  transition:transform .18s ease, background .18s ease;
}
.topo__cta:hover{transform:translateY(-2px);background:#ffd042}

/* ----- hambúrguer (só no celular) ----- */
.topo__burger{display:none}

/* véu que fecha o submenu ao clicar fora (desktop) */
.topo__veu{position:fixed;inset:0;z-index:1;display:none} /* abaixo dos itens (z-index 2), acima do resto */
.topo.has-open .topo__veu{display:block}

/* =====================================================
   CELULAR: painel de tela cheia com os dois grupos abertos
   ===================================================== */
@media (max-width: 900px){
  .topo__cta{display:none}
  .topo__burger{
    display:inline-flex;flex-direction:column;gap:5px;padding:.6rem;
    background:none;border:0;cursor:pointer;z-index:120;position:relative;
  }
  .topo__burger span{width:26px;height:3px;background:var(--branco);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
  .topo__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .topo__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .topo__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .topo__nav{
    position:fixed;inset:0;z-index:110;overflow:auto;
    background:var(--navy-deep);padding:5.2rem 6vw 2.5rem;
    transform:translateY(-100%);visibility:hidden;transition:transform .3s ease, visibility 0s linear .3s;
  }
  .topo.is-open-mobile .topo__nav{transform:none;visibility:visible;transition-delay:0s}
  .topo__itens{flex-direction:column;align-items:stretch;gap:1.6rem}
  .topo__btn{
    width:100%;justify-content:space-between;padding:0 0 .6rem;border-radius:0;
    border-bottom:2px solid var(--amarelo);
    font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.7rem;letter-spacing:.02em;color:var(--branco);
    cursor:default;
  }
  .topo__btn:hover{background:none}
  .topo__btn svg{display:none}
  .topo__painel{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;background:none;color:var(--branco);box-shadow:none;padding:.9rem 0 0;
    grid-template-columns:1fr;gap:1rem;transition:none;
  }
  .topo__painel::before{display:none}
  .topo__grupo h3{color:rgba(255,255,255,.55)}
  .topo__link{color:var(--branco);padding:.5rem .2rem}
  .topo__link:hover, .topo__link:focus-visible{background:rgba(255,255,255,.08)}
  .topo__link small{color:rgba(255,255,255,.6)}
  .topo__destaque{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
  .topo__redes{border-top-color:rgba(255,255,255,.14)}
  .topo__redes h3{color:rgba(255,255,255,.55)}
  .topo__rede{color:var(--branco);border-color:rgba(255,255,255,.25)}
  .topo__rede:hover, .topo__rede:focus-visible{color:var(--navy)}
  .topo__veu{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  .topo *, .topo *::before{transition:none !important}
}