/* ==========================================================================
   HEADER — barra fixa, navegação, botão hambúrguer e menu mobile (drawer)
   Estados controlados por JS:
     .hdr.stuck   página rolou > 40px (fundo claro, logo escuro)
     .nav a.here  link da seção visível (scroll-spy)
     body.open    menu mobile aberto
   ========================================================================== */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:background var(--t-slow) var(--e-out)}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;transition:background var(--t-slow)}
.hdr.stuck{background:rgba(244,245,248,.9);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}
.hdr.stuck::after{background:var(--border)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}

/* logo: branco (.l-l) no topo, escuro (.l-d) com header "stuck" */
.brand img{height:16px;width:auto}
.brand .l-d{display:none}
.hdr.stuck .brand .l-l{display:none}
.hdr.stuck .brand .l-d{display:block}

/* ---------- navegação desktop ---------- */
.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;font-size:var(--f-14);font-weight:500;color:rgba(255,255,255,.7);padding:8px 13px;border-radius:7px;transition:color var(--t-base),background var(--t-base)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1.5px;border-radius:1px;background:currentColor;transform:scaleX(0);opacity:0;transition:transform var(--t-base) var(--e-out),opacity var(--t-base)}
.nav a:hover,.nav a.here{color:#fff}
.nav a.here::after{transform:scaleX(1);opacity:.9}
.hdr.stuck .nav a{color:var(--text-2)}
.hdr.stuck .nav a:hover{color:var(--text-1);background:rgba(12,23,16,.05)}
.hdr.stuck .nav a.here{color:var(--interactive)}

/* ---------- CTA do header ---------- */
.hdr .btn{padding:10px 18px;font-size:var(--f-14);--bg:rgba(255,255,255,.12);--bd:rgba(255,255,255,.24);--fg:#fff;box-shadow:none}
.hdr .btn:hover{--bg:#fff;--fg:var(--bg-dark);--bd:#fff}
.hdr.stuck .btn{--bg:var(--interactive);--bd:var(--interactive);--fg:#fff}
.hdr.stuck .btn:hover{--bg:var(--interactive-hover);--bd:var(--interactive-hover)}

/* ---------- hambúrguer ---------- */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px}
.burger i{display:block;width:19px;height:1.6px;background:#fff;position:relative;transition:background var(--t-fast)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:1.6px;background:inherit;transition:transform var(--t-base) var(--e-out),top var(--t-base) var(--e-out)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.hdr.stuck .burger i{background:var(--text-1)}
body.open .burger i{background:transparent!important}
body.open .burger i::before{top:0;transform:rotate(45deg);background:#fff}
body.open .burger i::after{top:0;transform:rotate(-45deg);background:#fff}

/* ---------- drawer (menu mobile em tela cheia) ---------- */
.drawer{position:fixed;inset:0;z-index:55;background:var(--bg-dark);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity var(--t-slow) var(--e-out),visibility var(--t-slow)}
body.open .drawer{opacity:1;visibility:visible}
body.open{overflow:hidden}
.drawer a{display:flex;justify-content:space-between;align-items:baseline;font-family:Archivo;font-stretch:110%;font-size:clamp(1.9rem,8.5vw,2.6rem);font-weight:800;letter-spacing:-.035em;color:#fff;padding:14px 0;border-bottom:1px solid var(--border-dark);opacity:0;transform:translateY(14px)}
body.open .drawer a{animation:dIn 500ms var(--e-out) forwards;animation-delay:calc(60ms + var(--i) * 52ms)}
.drawer a span{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);color:var(--on-dark-3)}
.drawer .btn{margin-top:32px;align-self:flex-start;border-bottom:none}

@media (max-width:820px){
  .nav,.hdr>.wrap>.btn{display:none}
  .burger{display:flex}
}