/* Header em pílula de vidro flutuante: centralizada no eixo do container, fundo translúcido com desfoque,
   borda clara e sombra leve. Dentro: símbolo NS (logo completa não cabe nos 120 px mínimos do manual),
   navegação e CTA. Sobre seção escura (.ns-dark) o vidro escurece e o símbolo vira negativo. */

.ns-header {
  position: fixed; inset-inline: 0; inset-block-start: 0.875rem; z-index: var(--ns-z-header);
  pointer-events: none; /* só a pílula recebe clique; o resto da faixa não bloqueia a página */
}
.admin-bar .ns-header { inset-block-start: calc(32px + 0.875rem); }
@media (max-width: 782px) { .admin-bar .ns-header { inset-block-start: calc(46px + 0.75rem); } }
@media (max-width: 767px) { .ns-header { inset-block-start: 0.75rem; } }

.ns-header__bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ns-s-6);
  block-size: 4rem; padding-inline: 0.5rem 0.5rem; padding-inline-start: 1.25rem;
  border-radius: var(--ns-r-pill);
  color: var(--ns-text);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -12px rgba(10, 30, 61, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(10, 30, 61, 0.06);
  transition: background-color var(--ns-dur-ui) var(--ns-ease), border-color var(--ns-dur-ui) var(--ns-ease), color var(--ns-dur-micro) var(--ns-ease), box-shadow var(--ns-dur-ui) var(--ns-ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ns-header__bar {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
  }
}
.ns-header.is-scrolled .ns-header__bar { box-shadow: 0 16px 40px -14px rgba(10, 30, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(10, 30, 61, 0.07); }

/* Vidro escuro sobre seções escuras */
.ns-header[data-mode="dark"] .ns-header__bar {
  color: var(--ns-text-on-dark);
  background: rgba(10, 30, 61, 0.62);
  border-color: rgba(238, 242, 247, 0.16);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(238, 242, 247, 0.08);
}

/* Marca: símbolo cor ↔ negativo no mesmo slot */
.ns-header__brand { position: relative; display: grid; align-items: center; flex: none; padding-block: 0.25rem; border-radius: var(--ns-r-pill); }
.ns-logo { grid-area: 1 / 1; display: block; block-size: auto; inline-size: 3.5rem; transition: opacity var(--ns-dur-ui) var(--ns-ease); }
.ns-logo--on-dark { opacity: 0; }
.ns-header[data-mode="dark"] .ns-logo--on-light { opacity: 0; }
.ns-header[data-mode="dark"] .ns-logo--on-dark { opacity: 1; }

/* Navegação */
.ns-header__nav { display: flex; align-items: center; gap: var(--ns-s-6); }
.ns-header__list { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.ns-header__link {
  display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;
  font-size: 0.9375rem; font-weight: 500; color: inherit; text-decoration: none; border-radius: var(--ns-r-pill);
  transition: background-color var(--ns-dur-micro) var(--ns-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ns-header__link:hover { background: rgba(1, 65, 165, 0.08); }
  .ns-header[data-mode="dark"] .ns-header__link:hover { background: rgba(238, 242, 247, 0.1); }
}
.ns-header__cta { min-block-size: 3rem; padding-inline: 1.375rem; font-size: 0.9375rem; border-radius: var(--ns-r-pill); }
.ns-header[data-mode="dark"] .ns-header__cta { background: var(--ns-green); color: var(--ns-night); }
.ns-header :focus-visible { outline-offset: 2px; }

/* Botão do menu (celular) */
.ns-header__toggle {
  display: none; position: relative; inline-size: 3rem; block-size: 3rem; flex: none;
  background: none; border: 0; color: inherit; cursor: pointer; border-radius: 50%;
}
.ns-header__burger, .ns-header__burger::before, .ns-header__burger::after {
  position: absolute; inset-inline-start: 50%; inline-size: 1.25rem; block-size: 2px; margin-inline-start: -0.625rem;
  background: currentColor; border-radius: 2px; transition: transform var(--ns-dur-ui) var(--ns-ease), opacity var(--ns-dur-micro);
}
.ns-header__burger { inset-block-start: 50%; margin-block-start: -1px; }
.ns-header__burger::before, .ns-header__burger::after { content: ""; inset-inline-start: 0; margin: 0; }
.ns-header__burger::before { transform: translateY(-6px); }
.ns-header__burger::after { transform: translateY(6px); }
.ns-header.is-open .ns-header__burger { background: transparent; }
.ns-header.is-open .ns-header__burger::before { transform: rotate(45deg); }
.ns-header.is-open .ns-header__burger::after { transform: rotate(-45deg); }

@media (max-width: 899px) {
  .ns-header__bar { block-size: 3.75rem; padding-inline-start: 1.125rem; padding-inline-end: 0.375rem; }
  .ns-header__toggle { display: block; }
  /* Menu: cartão de vidro que desce logo abaixo da pílula. */
  .ns-header__nav {
    position: absolute; inset-inline: 0; inset-block-start: calc(100% + 0.5rem);
    flex-direction: column; align-items: stretch; gap: var(--ns-s-4);
    padding: 0.75rem 0.75rem 0.875rem; border-radius: var(--ns-r-lg);
    color: var(--ns-text); background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 50px -20px rgba(10, 30, 61, 0.35), 0 0 0 1px rgba(10, 30, 61, 0.06);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity var(--ns-dur-ui) var(--ns-ease), transform var(--ns-dur-ui) var(--ns-ease), visibility 0s linear var(--ns-dur-ui);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .ns-header__nav { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
  }
  .ns-header.is-open .ns-header__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .ns-header__list { flex-direction: column; gap: 0; }
  .ns-header__list li + li { border-block-start: 1px solid var(--ns-line); }
  .ns-header__link { inline-size: 100%; min-block-size: 3.25rem; border-radius: var(--ns-r-sm); font-family: var(--ns-font-display); font-size: 1.25rem; }
  .ns-header__cta, .ns-header[data-mode="dark"] .ns-header__cta { min-block-size: 3.25rem; background: var(--ns-blue); color: #fff; }
}