/* =========================================================
   NAVBAR: faixa de vidro fosco, fixa, com o selo JS "vazando" para baixo.
   Fica em <header class="site-header">, FORA do hero: assim nenhum
   transform aplicado ao hero (portão, parallax) pode quebrar o position:fixed.
   ========================================================= */
@layer components {
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex; align-items: center; justify-content: flex-end;
    padding-inline: calc(var(--gutter) + var(--brand-size) + 28px) var(--gutter);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition: background var(--dur-base) ease, height var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
  }
  .nav.is-scrolled { height: var(--nav-h-scrolled); background: var(--glass-bg-solid); }

  /* ---------- Selo da logo ---------- */
  .brand {
    position: absolute; left: var(--gutter); top: 8px;
    display: grid; place-items: center;
    width: var(--brand-size); height: var(--brand-size); border-radius: 50%;
    color: var(--c-cream-soft);
    background: radial-gradient(circle at 50% 35%, rgba(52, 95, 75, .78), rgba(28, 52, 40, .70));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(240, 234, 220, .22);
    box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out),
                height var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
  }
  .brand:hover { transform: translateY(-2px); }
  .brand__mark { height: 64%; width: auto; }
  .nav.is-scrolled .brand { width: var(--brand-size-scrolled); height: var(--brand-size-scrolled); top: 5px; }

  /* ---------- Links (desktop) ---------- */
  .menu { display: flex; align-items: center; gap: clamp(34px, 3.4vw, 68px); list-style: none; }
  .menu a,
  .drawer__list a {
    position: relative; display: inline-block;
    font-family: var(--ff-sans); font-weight: 500;            /* Manrope, a fonte padrão do site (pedido do Victor, 2026-09-30) */
    text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
  }
  .menu a {
    font-size: clamp(12px, .8vw, 13.5px);
    color: rgba(255, 255, 255, .9);
    padding: 8px 0; margin-right: -.14em;   /* compensa o tracking da última letra */
    transition: color var(--dur-fast) ease;
  }
  .menu a::after {
    content: ""; position: absolute; left: 0; right: .14em; bottom: 0; height: 1px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease-soft);
  }
  .menu a:hover, .menu a[aria-current] { color: var(--c-white); }
  .menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }

  /* ---------- Botão MENU (mobile) ---------- */
  .menu-btn { display: none; }

  @media (max-width: 760px), (max-aspect-ratio: 4/5) {
    .menu { display: none; }
    .nav { padding-inline: calc(18px + var(--brand-size) + 16px) 20px; }
    .brand { left: 18px; top: 6px; }
    .nav.is-scrolled .brand { top: 6px; }
    .menu-btn {
      display: inline-block; color: var(--c-white);
      font-family: var(--ff-sans); font-weight: 500; font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
      padding: 10px 4px 10px 12px; margin-right: -.24em;
      min-height: 44px;                    /* alvo de toque mínimo */
    }
  }
}