/* 05-navegacao: Barra do topo e menu do celular. */

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  background:var(--ink);color:var(--white);
  border-bottom:1px solid var(--line-on-dark);
  padding-top:env(safe-area-inset-top,0px);
  transition:transform .6s var(--ease-inout);
}
.nav.is-hidden{transform:translateY(-100%);}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:2px;text-decoration:none;color:var(--white);}
.brand svg{height:34px;width:auto;overflow:visible;}
.brand-word{font-weight:800;font-stretch:118%;font-size:1.25rem;letter-spacing:.14em;line-height:1;margin-left:2px;}
.nav-links{display:flex;gap:clamp(18px,2.4vw,36px);}
.nav-links a{
  position:relative;
  color:var(--muted-on-dark);text-decoration:none;font-size:var(--t-small);font-weight:600;
  padding:12px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-inout);
}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--white);}
.nav-links a[aria-current="true"]::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:12px;}
/* link discreto do teste ao lado do botão, como o par de CTAs das seções */
.nav .link-quiet{color:#9b9b9b;text-decoration-color:rgb(155 155 155 / .45);margin-left:18px;white-space:nowrap;}
.nav .link-quiet:hover{color:var(--white);text-decoration-color:currentColor;}
@media (max-width:1080px){.nav .nav-quiz{display:none;}}
.nav .btn{min-height:44px;font-size:var(--t-small);padding:0 18px;}
.menu-btn{
  display:none;
  min-height:44px;padding:0 4px 0 14px;
  background:none;border:0;color:var(--white);font-weight:700;cursor:pointer;
  align-items:center;gap:10px;
}
.menu-btn .bars{display:grid;gap:5px;width:22px;}
.menu-btn .bars span{display:block;height:2px;background:currentColor;transition:transform .45s var(--ease-inout);}
.menu-btn[aria-expanded="true"] .bars span:first-child{transform:translateY(3.5px) rotate(45deg);}
.menu-btn[aria-expanded="true"] .bars span:last-child{transform:translateY(-3.5px) rotate(-45deg);}
@media (max-width:860px){
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
}
@media (max-width:420px){
  .nav .btn-red{display:none;}
}

.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--ink);color:var(--white);
  padding:calc(var(--nav-h) + 32px + env(safe-area-inset-top,0px)) var(--gutter) 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .7s var(--ease-inout), visibility 0s linear .7s;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease-inout), visibility 0s;}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.menu a:not(.btn){
  display:block;padding:6px 0;
  font-size:clamp(2.25rem, 9vw, 3.5rem);font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:1.05;
  text-decoration:none;
}
.menu a:not(.btn):hover{color:var(--red);}
.menu .cta-pair{align-self:flex-start;}
.nav-open .nav{background:var(--ink);}