/* ============================================================
   site-menu.css — Menu mobile (hambúrguer) para o header ".top"
   das páginas dark (home, blog, artigos, clientes).
   O JS (site-menu.js) injeta o botão .nav-burger e alterna
   header.top.menu-open. Sem libs.
   ============================================================ */
.nav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.nav-burger:hover{background:rgba(255,255,255,.10)}
.nav-burger svg{width:22px;height:22px;display:block}
.nav-burger .x{display:none}

@media(max-width:820px){
  .nav-burger{display:inline-flex}
  /* o .top-right vira um painel suspenso, ancorado no header (sticky) */
  header.top .top-right{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(3,6,14,.98);
    -webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
    border-bottom:1px solid rgba(255,255,255,.10);
    padding:8px 22px 18px;
    box-shadow:0 24px 44px -22px rgba(0,0,0,.75);
  }
  header.top.menu-open .top-right{display:flex}
  header.top .top-right .top-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
  header.top .top-right .top-nav a{padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:1.05rem}
  header.top .top-right .enter{padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:1.05rem}
  header.top .top-right .nav-cta{display:inline-flex;width:100%;margin-top:14px;padding:14px;font-size:1rem}
  header.top.menu-open .nav-burger .bars{display:none}
  header.top.menu-open .nav-burger .x{display:block}
}