/* ==========================================================================
   NAV — menu fixo que ganha fundo de vidro no scroll
   Prefixo: nav-
   Tokens usados: --fg --fg-muted --rule --accent --dark --dark-rgb --light-2
                  --display --nav-h --radius-pill --ease

   A nav carrega o próprio escopo de tom (.sec-dark) porque vive fora de
   qualquer <section>: sem isso --fg e --rule não resolvem.
   ========================================================================== */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .45s,border-color .45s,backdrop-filter .45s;
}
/* Enquanto está no topo, o menu é invisível: só o conteúdo flutua sobre a
   foto do hero. O vidro entra depois dos primeiros 30px de rolagem. */
.nav.is-scrolled{
  background:rgba(var(--dark-rgb),.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--rule);
}

.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--nav-h)}

.nav-logo{flex:0 0 auto;line-height:0;display:block}
.nav-logo img{height:22px;width:auto;display:block}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);min-width:0}
.nav-links a{
  font-size:12.5px;letter-spacing:.04em;color:var(--fg-muted);
  position:relative;padding:4px 0;white-space:nowrap;transition:color .25s;
}
.nav-links a:hover{color:var(--fg)}
/* Sublinhado que cresce da esquerda. transform em vez de width para animar
   no compositor e não relayout a cada frame. */
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--dark);
  border-radius:var(--radius-pill);padding:12px 22px;
  white-space:nowrap;flex:0 0 auto;transition:background .3s;
}
.nav-cta:hover{background:var(--light-2)}

.nav-burger{display:none;background:none;border:none;color:var(--fg);padding:6px;line-height:0}

/* 1000px e não 900: o menu tem 5 links longos mais um CTA. Abaixo disso os
   links começam a se atropelar antes de o layout "parecer" mobile. */
@media(max-width:1000px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:block}
}
@media(max-width:560px){
  .nav-logo img{height:17px}
}