/* ============================================================
   BARRA DE MENU + LOGO ANIMADA — landing v7 (carrega depois do v4.css)
   Logo "traço autoral" centralizada e maior na barra; menu dividido
   em dois pills (esquerda / direita); logo grande animada no rodapé.
   ============================================================ */
#nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
#nav .nav-l{grid-column:1;grid-row:1;justify-self:start}
#nav .brand{grid-column:2;grid-row:1;justify-self:center}
#nav .nav-act{grid-column:3;grid-row:1;justify-self:end}
.nav-act .nav-links{margin-right:4px}

/* logo: MP4 com a cor em cima e o alpha embaixo, montado num canvas WebGL
   (o vídeo fica invisível — só fonte de quadros; evita o fundo preto do celular
   e anima também no Safari); imagem do quadro final como fallback */
.lg{position:relative;display:block;aspect-ratio:1810/720}
.lg canvas,.lg video,.lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.lg video{opacity:0;pointer-events:none}
.lg img{opacity:0;transition:opacity .25s}
.lg canvas{transition:opacity .25s}
.lg.static canvas,.lg.static video{display:none}.lg.static img{opacity:1}
.lg.done img{opacity:1}.lg.done canvas{opacity:0}
.nav-links a{white-space:nowrap}
.nav-act .nav-links{flex-shrink:0}

.brand{display:block;padding:4px 12px;margin:0;border-radius:18px}
.brand .lg{height:72px;transition:height .45s var(--ease)}
#nav.solid .brand .lg{height:56px}
#nav.solid .brand{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--glass-line),0 10px 30px -18px rgba(var(--shadow),.35)}
.brand img{height:auto;width:100%}
#nav.solid .brand img{height:auto}

/* rodapé: placa clara com a logo grande que se desenha ao entrar na tela */
.ft-logo{background:var(--paper);border-radius:24px;padding:clamp(26px,4.5vw,60px) clamp(20px,5vw,64px) clamp(16px,2.6vw,26px);display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vw,20px);box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.ft-logo .lg{width:min(860px,100%)}
.ft-logo .mono{color:var(--ink-3);font-size:10.5px;text-align:center}

@media (max-width:1280px){
  .nav-search span,.nav-search kbd{display:none}
  .nav-search{width:42px;padding:0;justify-content:center}
  .brand .lg{height:64px}#nav.solid .brand .lg{height:52px}
}
@media (max-width:860px){
  .brand{padding:3px 8px}
  .brand .lg{height:54px}#nav.solid .brand .lg{height:46px}
  .ft-logo{border-radius:20px}
}