/* ==========================================================================
   Menu do topo de vidro (Parte 4). Todas as páginas.
   Vidro translúcido com desfoque, sempre na frente. O tom (claro/escuro) vem da SEÇÃO que passa por trás
   (data-tone no <header class="nx-navigation">, calculado em site-navigation.tsx). Troca suave de ~0,45s.
   ========================================================================== */
.nx-navigation{--nav-fg:#16233D;--nav-fg2:#2c4054;--nav-bg:rgba(245,243,236,.62);--nav-border:rgba(255,255,255,.6);--nav-hi:rgba(255,255,255,.95);--nav-glide:rgba(22,35,61,.08);--nav-shadow:0 8px 26px rgba(22,35,61,.08)}
.nx-navigation[data-tone="dark"]{--nav-fg:#F5F3EC;--nav-fg2:#DCEAE5;--nav-bg:rgba(22,35,61,.42);--nav-border:rgba(220,234,229,.24);--nav-hi:rgba(255,255,255,.3);--nav-glide:rgba(220,234,229,.14);--nav-shadow:0 8px 26px rgba(0,0,0,.2)}
/* painel aberto: o menu fica no tom claro e quase sólido, como antes */
.nx-navigation[data-open="true"]{--nav-fg:#16233D;--nav-fg2:#2c4054;--nav-bg:rgba(245,243,236,.96);--nav-border:#ccdcd3;--nav-hi:rgba(255,255,255,.95);--nav-glide:rgba(22,35,61,.08)}

html body .nx-navigation{z-index:1000}
/* o desfoque fica só no ::before; no próprio .nx-nav-bar ele viraria uma "raiz" e o vidro não enxergaria o que passa por trás */
html body .nx-navigation[data-tone] .nx-nav-bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important;border:1px solid var(--nav-border)!important;
  box-shadow:inset 0 1px 0 var(--nav-hi),var(--nav-shadow)!important;
  transition:border-color .45s ease,box-shadow .45s ease,min-height .3s ease,padding .3s ease!important}
html body .nx-navigation[data-tone] .nx-nav-bar::before{background:var(--nav-bg)!important;-webkit-backdrop-filter:blur(18px) saturate(160%)!important;backdrop-filter:blur(18px) saturate(160%)!important;transition:background-color .45s ease!important}

/* vidro escuro: escurece também o que passa por trás, para o texto claro manter contraste mínimo de 4,5:1 mesmo sobre as bordas claras da página */
html body .nx-navigation[data-tone="dark"]:not([data-open="true"]) .nx-nav-bar::before{-webkit-backdrop-filter:blur(18px) saturate(160%) brightness(.46)!important;backdrop-filter:blur(18px) saturate(160%) brightness(.46)!important}

/* ao rolar mais de 40px: um pouco mais fino e com sombra leve */
html body .nx-navigation[data-scrolled="true"] .nx-nav-bar{min-height:62px;padding-top:7px;padding-bottom:7px;
  box-shadow:inset 0 1px 0 var(--nav-hi),0 10px 28px rgba(22,35,61,.18)!important}
html body .nx-navigation[data-scrolled="true"][data-tone="dark"] .nx-nav-bar{box-shadow:inset 0 1px 0 var(--nav-hi),0 10px 28px rgba(0,0,0,.34)!important}
.nx-navigation[data-scrolled="true"] .nx-nav-brand>svg{width:34px;height:34px}
.nx-nav-brand>svg{transition:width .3s ease,height .3s ease}

/* cores que seguem o tom */
html body .nx-navigation .nx-nav-brand{color:var(--nav-fg);transition:color .45s ease}
html body .nx-navigation .nx-nav-desktop>:is(a,button){color:var(--nav-fg2);transition:color .45s ease}
html body .nx-navigation .nx-nav-desktop>:is(a,button):hover,
html body .nx-navigation .nx-nav-desktop>button[aria-expanded="true"],
html body .nx-navigation .nx-nav-desktop>[data-current]{color:var(--nav-fg);background:transparent}
html body .nx-navigation .nx-nav-client{color:var(--nav-fg);transition:color .45s ease}
html body .nx-navigation .nx-nav-glide{background:var(--nav-glide)}
html body .nx-navigation .nx-nav-mobile-toggle{color:var(--nav-fg);background:transparent!important;border:1px solid var(--nav-border)!important;transition:color .45s ease,border-color .45s ease}
html body .nx-navigation .nx-nav-bar :is(a,button,summary):focus-visible{outline:2px solid #0E6B58;outline-offset:3px}
html body .nx-navigation[data-tone="dark"]:not([data-open="true"]) .nx-nav-bar :is(a,button):focus-visible{outline-color:#DCEAE5}

/* seção atual: traço laranja embaixo (o mesmo do hover) e texto na cor principal */
html body .nx-navigation .nx-nav-desktop>[data-current]::after{transform:scaleX(1)}
html body .nx-navigation .nx-nav-desktop>[data-current]{font-weight:600}

/* "Pedir proposta": navy no vidro claro; papel no vidro escuro */
html body .nx-navigation .nx-nav-proposal{background-color:#16233D!important;color:#F5F3EC!important;border:1px solid #16233D!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 48%,rgba(0,0,0,.12) 100%)!important;background-size:100% 100%!important;background-position:0 0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 2px rgba(22,35,61,.32),0 4px 10px -4px rgba(22,35,61,.4)!important;
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,transform .14s ease,box-shadow .14s ease!important}
html body .nx-navigation .nx-nav-proposal:hover{background-color:#1f3254!important;transform:none}
html body .nx-navigation[data-tone="dark"]:not([data-open="true"]) .nx-nav-proposal{background-color:#F5F3EC!important;color:#16233D!important;border-color:#F5F3EC!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 52%,rgba(22,35,61,.06) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.28),0 4px 10px -4px rgba(0,0,0,.4)!important}
html body .nx-navigation[data-tone="dark"]:not([data-open="true"]) .nx-nav-proposal:hover{background-color:#fbfaf6!important}
html body .nx-navigation .nx-nav-proposal:active{transform:translateY(1px) scale(.985)}

/* navegador sem desfoque: fundo quase sólido */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nx-navigation{--nav-bg:rgba(245,243,236,.96)}
  .nx-navigation[data-tone="dark"]{--nav-bg:rgba(22,35,61,.94)}
  .nx-navigation[data-open="true"]{--nav-bg:rgba(245,243,236,.96)}
}
@media (prefers-reduced-motion:reduce){
  html body .nx-navigation *,html body .nx-navigation .nx-nav-bar,html body .nx-navigation .nx-nav-bar::before{transition:none!important}
}

/* Banner até o topo (26/10): com o banner azul de ponta a ponta atrás do menu (hero-lift.ts marca o <html>),
   no topo da página o menu perde a caixa e a borda e fica só logo, links e botão sobre o azul.
   Ao rolar (data-scrolled), volta o vidro com borda. */
html[data-hero-lift] body .nx-navigation[data-tone][data-scrolled="false"]:not([data-open="true"]) .nx-nav-bar{border-color:transparent!important;box-shadow:none!important;transition:border-color .35s ease,box-shadow .35s ease!important}
html[data-hero-lift] body .nx-navigation[data-tone][data-scrolled="false"]:not([data-open="true"]) .nx-nav-bar::before{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Menu (26/10): sem o traço laranja embaixo do item (nem na página atual, nem ao passar o mouse).
   A página atual fica só com o texto em destaque (cor principal e negrito), até definirmos outro indicador. */
html body .nx-navigation .nx-nav-desktop>:is(a,button)::after,html body .nx-navigation .nx-nav-glide::after{display:none!important}
/* Página atual (26/10, opção A aprovada): texto no verde da marca e em negrito mais marcado.
   Sobre o azul: verde-claro; no menu claro (ou com o painel aberto): verde escuro da marca. */
html body .nx-navigation .nx-nav-desktop>[data-current]{color:#8FD3BE!important;font-weight:700!important}
html body .nx-navigation:is([data-tone="light"],[data-open="true"]) .nx-nav-desktop>[data-current]{color:#0E6B58!important}