/* Menu com efeito vidro, barra de largura total: só aparece quando a página é rolada para cima */
.site-menu { display: none; }
html.menu-on .site-menu {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; width: 100%;
  padding: 14px 24px;
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 8px 32px rgba(15, 23, 42, .08), inset 0 -1px 0 rgba(15, 23, 42, .05);
  color: #0a0a0a;
  transform: translateY(-105%); opacity: 0; visibility: hidden;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease, visibility 0s linear .9s;
}
/* alinha o conteúdo do menu com o conteúdo do site (largura máxima 1280 px + margem lateral) */
@media (min-width: 768px) { html.menu-on .site-menu { padding: 14px max(48px, calc((100% - 1280px) / 2 + 48px)); } }
html.menu-on .site-menu.is-visible, html.menu-on .site-menu:focus-within {
  transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s;
}
.site-menu a { color: inherit; text-decoration: none; }
.site-menu .brand { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.site-menu ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-menu li a { display: block; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(10, 10, 10, .72); transition: background-color .5s ease, color .5s ease; }
.site-menu li a:hover { background: rgba(255, 255, 255, .6); color: #0a0a0a; }
.site-menu li a.cta { background: #0a0a0a; color: #fff; }
.site-menu li a.cta:hover { background: #333; color: #fff; }
.site-menu a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 640px) {
  html.menu-on .site-menu { padding: 10px 16px; gap: 8px; }
  .site-menu .brand { font-size: 15px; }
  .site-menu li a { padding: 8px 11px; font-size: 13px; }
  .site-menu li.hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* sem deslizar: só aparece e some com fade */
  html.menu-on .site-menu, html.menu-on .site-menu.is-visible, html.menu-on .site-menu:focus-within { transform: none; transition: opacity .6s ease, visibility 0s linear .6s; }
  html.menu-on .site-menu.is-visible, html.menu-on .site-menu:focus-within { transition-delay: 0s; }
}
/* âncoras não ficam escondidas atrás do menu */
[id] { scroll-margin-top: 84px; }
