/* ==========================================================================
   Navegação fixa + menu próprio do celular
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  color: var(--fg);
  transition: color .45s var(--ease-out);
}
.nav::before {
  /* Fundo que só aparece depois da Hero, na cor da seção corrente */
  content: "";
  position: absolute; inset: 0;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
  transform: translateY(-101%);
  transition: transform .6s var(--ease-out), background-color .45s var(--ease-out);
}
.nav.is-scrolled::before { transform: none; }
.nav.is-menu-open::before { transform: translateY(-101%); }

.nav__inner {
  position: relative;
  height: 100%;
  max-width: calc(var(--max) + 2 * var(--margin));
  margin: 0 auto;
  padding: 0 var(--margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Marca: wordmark + etiqueta, como no mockup */
.nav__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 0;
  line-height: 1;
}
.wm--nav { font-size: 30px; }
.nav__tag {
  font-size: 9.5px;
  font-weight: 640;
  font-variation-settings: "wdth" 112;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__links { position: relative; margin-left: auto; margin-right: clamp(24px, 3vw, 48px); }
.nav__links ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.nav__links a {
  position: relative;
  display: block;
  padding: 18px 0;
  font-size: 12.5px;
  font-weight: 620;
  font-variation-settings: "wdth" 108;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}
.nav__links a:hover,
.nav__links a[aria-current="true"] { color: var(--fg); }
.nav__marker {
  position: absolute;
  left: 0; bottom: 10px;
  width: 6px; height: 6px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

/* Botão em pílula à direita */
.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: 12px;
  font-weight: 660;
  font-variation-settings: "wdth" 108;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s;
}
.nav__cta::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--fg);
  border-radius: inherit;
  transform: scale(0.2);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.nav__cta:hover, .nav__cta:focus-visible { color: var(--bg); }
.nav__cta:hover::before, .nav__cta:focus-visible::before { transform: none; opacity: 1; }

/* Botão do menu (só no celular/tablet) */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 2px 0 10px;
  margin-right: -2px;
  font-size: 15px;
  font-weight: 600;
  font-variation-settings: "wdth" 104;
}
.nav__toggle-text { display: grid; overflow: hidden; height: 1.3em; line-height: 1.3; }
.nav__toggle-text > span { grid-area: 1 / 1; transition: transform .55s var(--ease-io); }
.nav__toggle-text [data-close] { transform: translateY(110%); }
.nav__toggle[aria-expanded="true"] [data-open] { transform: translateY(-110%); }
.nav__toggle[aria-expanded="true"] [data-close] { transform: none; }

.nav__toggle-icon { position: relative; width: 26px; height: 26px; }
.nav__toggle-icon i {
  position: absolute; left: 3px; right: 3px;
  height: 2px; background: currentColor;
  transition: transform .6s var(--ease-io);
}
.nav__toggle-icon i:first-child { top: 9px; }
.nav__toggle-icon i:last-child { top: 15px; right: 9px; }
.nav__toggle[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); right: 3px; }

@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .wm--nav { font-size: 25px; }
  .nav__tag { font-size: 8.5px; }
}

/* ---------- Menu do celular ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  color: var(--paper);
}
.menu__bg {
  position: absolute; inset: 0;
  background: var(--ink);
}
.menu__nav {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 6vh) var(--margin) calc(28px + env(safe-area-inset-bottom));
}
.menu__list li { border-top: 1px solid rgba(245, 243, 237, .14); }
.menu__list li:last-child { border-bottom: 1px solid rgba(245, 243, 237, .14); }
.menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
  font-size: clamp(44px, 13.5vw, 96px);
  font-weight: 860;
  font-variation-settings: "wdth" 70;
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.menu__mask { display: block; overflow: hidden; padding: .3em 0 .04em; margin-top: -.3em; }
.menu__word { display: block; transition: font-variation-settings .5s var(--ease-out), color .3s; }
.menu__list a:hover .menu__word,
.menu__list a:focus-visible .menu__word { font-variation-settings: "wdth" 96; }
.menu__list a[aria-current="true"] .menu__word { color: var(--blue-on-ink); }

.menu__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: var(--t-small);
  color: var(--muted-on-ink);
}
.menu__pw { width: 56px; height: 56px; color: var(--paper); }

body.menu-open { overflow: hidden; }