/* =========================
   MENU MOBILE (LIMPO / FINAL)
   ========================= */

/* botão hambúrguer (desktop escondido) */
.menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor: pointer;

  /* ✅ IMPORTANTE: empilha as barras (hambúrguer padrão) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 0;
  -webkit-tap-highlight-color: transparent;

  /* segurança contra ícones/ conteúdos estranhos */
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  appearance: none;
  -webkit-appearance: none;

  /* impede pseudo-elementos antigos desenharem coisa */
  position: relative;
  overflow: hidden;
}

/* mata QUALQUER pseudo-elemento/ícone fantasma no botão */
.menu-toggle::before,
.menu-toggle::after{
  content: none !important;
  display: none !important;
}

/* as 3 linhas do hambúrguer (única fonte do ícone) */
.menu-toggle .bar{
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;

  /* sem sombra pra não parecer “linha extra” */
  box-shadow: none;

  /* ✅ garante que não vira “---” por margens */
  margin: 0;
}

/* overlay (fundo escuro) */
.menu-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 9998;
}

/* botão X (só mobile) */
.menu-close{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;

  /* garante clique no iOS */
  pointer-events: auto;
  position: relative;
  z-index: 10000;
  touch-action: manipulation;
}

/* ===== MOBILE ===== */
@media (max-width: 900px){

  /* mostra o hambúrguer */
  .menu-toggle{
    display: inline-flex;
  }

  /* menu vira painel */
  .top-menu{
    display: flex;               /* mantém existindo */
    position: fixed;
    left: 14px;
    right: 14px;
    top: 78px;                   /* abaixo do topo */
    z-index: 9999;

    flex-direction: column;
    gap: 12px;

    padding: 14px;
    border-radius: 18px;

    background: rgba(6,10,24,.92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 90px rgba(0,0,0,.55);

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: .18s ease;
  }

  /* links como pílula */
  .top-menu a{
    display: flex;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }

  .top-menu a:hover{
    background: rgba(255,255,255,.10);
  }

  /* mostra o X dentro do menu */
  .menu-close{
    display: inline-flex;
    align-self: flex-end;
  }

  /* quando abre (compatível com seu JS) */
  .topbar.menu-open .top-menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .topbar.menu-open .menu-overlay{
    display: block;
  }

  /* trava scroll */
  body.menu-open{
    overflow: hidden;
  }
}