.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding:18px var(--pad);display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:clamp(18px,3vw,48px);mix-blend-mode:normal;transition:transform .5s cubic-bezier(.7,0,.2,1),background .4s}
.nav.scrolled{background:linear-gradient(to bottom,rgba(7,7,7,.75),rgba(7,7,7,0))}
.nav.hide{transform:translateY(-110%)}
.nav .side{display:flex;gap:clamp(16px,2.2vw,34px)}
.nav .side.l{justify-content:flex-end}
.nav .side a{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;position:relative;padding-bottom:3px}
.nav .side a::after,.foot .cols a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.nav .side a:hover::after,.foot .cols a:hover::after{transform:scaleX(1);transform-origin:left}
.foot .cols a{position:relative;padding-bottom:2px}
.nav .side a.on::before{content:'';position:absolute;left:-12px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
.nav .logo{display:block;width:clamp(44px,4vw,58px)}
.nav .logo img{width:100%;height:auto}
.nav .meta{display:flex;align-items:center;gap:10px;color:var(--mute)}
.nav .meta .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}
.nav .end{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:3px;backdrop-filter:blur(10px);background:rgba(7,7,7,.35)}
.lang button{font-family:var(--mono);font-size:11px;padding:6px 9px;border-radius:99px;color:var(--mute);transition:.3s}
.lang button.on{background:var(--fg);color:var(--bg)}
.burger{display:none;width:44px;height:44px;position:relative;border-radius:50%}
.burger i{position:absolute;left:10px;right:10px;height:1.6px;background:currentColor;transition:transform .5s cubic-bezier(.7,0,.2,1),top .5s}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:26px}
body.menu-open .burger i:nth-child(1){top:21.5px;transform:rotate(45deg)}
body.menu-open .burger i:nth-child(2){top:21.5px;transform:rotate(-45deg)}
.nav.onlight{color:#0a0a0a}.nav.onlight .logo img{filter:invert(1)}.nav.onlight.scrolled{background:linear-gradient(to bottom,rgba(242,240,235,.8),rgba(242,240,235,0))}.nav.onlight .lang{background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.15)}.nav.onlight .lang button.on{background:#0a0a0a;color:#fff}
body.menu-open .nav{color:var(--fg)}body.menu-open .nav .logo img{filter:none}
.foot .lang button.on{background:#0a0a0a;color:#fff}
.mmenu{position:fixed;inset:0;z-index:45;background:var(--bg);clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--pad) 34px}
body.menu-open .mmenu{clip-path:inset(0 0 0 0)}
.mmenu ul{list-style:none}
.mmenu li{overflow:hidden;border-bottom:1px solid var(--line)}
.mmenu li a{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:clamp(40px,12vw,72px);font-weight:800;font-variation-settings:'wdth' 72;text-transform:uppercase;line-height:1;transform:translateY(110%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.mmenu li a small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--mute)}
body.menu-open .mmenu li a{transform:none}
.mmenu li:nth-child(2) a{transition-delay:.05s}.mmenu li:nth-child(3) a{transition-delay:.1s}.mmenu li:nth-child(4) a{transition-delay:.15s}.mmenu li:nth-child(5) a{transition-delay:.2s}.mmenu li:nth-child(6) a{transition-delay:.25s}
.mmenu .mfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:1000px){
.nav{grid-template-columns:1fr auto 1fr}
.nav .side,.nav .meta{display:none}
.nav .end{grid-column:3}
.nav .logo{grid-column:2}
.burger{display:block}
}
@media (max-width:560px){
.lang button{padding:5px 7px}
.nav .langwrap{display:none}
}
/* --- antes injetado pelo app.js --- */
.nav::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(100% + 34px);z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;background:linear-gradient(to bottom,rgba(6,7,14,.55),rgba(6,7,14,.18) 70%,rgba(6,7,14,0));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.nav.scrolled::before{opacity:1}
.nav.scrolled,.nav.onlight.scrolled{background:none}
.nav.onlight::before{background:linear-gradient(to bottom,rgba(242,240,235,.6),rgba(242,240,235,.2) 70%,rgba(242,240,235,0))}
body.menu-open .nav::before{opacity:0}
.scrollhint{position:fixed;left:50%;bottom:18px;z-index:46;margin-left:-22px;width:44px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:opacity .45s;animation:shfloat 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.scrollhint .ms{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.85);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.scrollhint .ms i{width:2.5px;height:7px;border-radius:2px;background:#fff;animation:shdot 1.7s cubic-bezier(.6,0,.4,1) infinite}
.scrollhint svg{width:12px;height:12px;opacity:.85;animation:sharr 1.7s ease-in-out infinite}
.scrollhint.off{opacity:0;pointer-events:none}
body.drawer-open .scrollhint,body.menu-open .scrollhint{opacity:0;pointer-events:none}
@keyframes shdot{0%{transform:translateY(0);opacity:0}20%{opacity:1}75%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@keyframes sharr{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(4px);opacity:.9}}
@keyframes shfloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (max-width:700px){.scrollhint{bottom:14px}}
/* --- acessibilidade: área de toque maior nos idiomas (sem mudar o visual) e foco de teclado visível --- */
#nav .lang button,#mmenu .lang button{position:relative}
@media (pointer:coarse){#nav .lang button::before,#mmenu .lang button::before{content:'';position:absolute;inset:-10px -3px}}
.burger:focus-visible,.lang button:focus-visible,.scrollhint:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.scrollhint:focus-visible{border-radius:14px}