/* Nav partilhada por todas as páginas (medidas da referência: 508×56 expandida,
   229×56 encolhida, bg #0F0F0FE6). Precisa dos tokens --accent do :root da página. */
.nav{position:fixed;top:16px;left:50%;z-index:8;transform:translateX(-50%);
  transition:opacity .28s ease,transform .28s ease;
  display:flex;align-items:center;gap:0;height:56px;
  background:#0F0F0FE6;backdrop-filter:blur(8px);   /* E6 = ~90%, levemente transparente */
  border-radius:999px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.nav.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-10px) scale(.95)}
/* entrada: abre do centro para os lados, como BUSINESS / ANALYST na página inicial
   (fill backwards: no fim não fica clip-path nenhum, senão cortava a sombra) */
.nav.nasce{animation:nasce 1.1s cubic-bezier(.215,.61,.355,1) backwards}
@keyframes nasce{from{clip-path:inset(0 50% round 999px)}to{clip-path:inset(0 0 round 999px)}}
@media (prefers-reduced-motion:reduce){.nav.nasce{animation:none}}
.nav>img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.live{width:9px;height:9px;flex:none;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
/* o slot anima a LARGURA de 1fr→0fr: encolhe suave sem precisar de px fixo */
.nav-slot{display:grid;grid-template-columns:1fr;
  transition:grid-template-columns .38s ease,opacity .22s ease}
.nav-slot>.nav-inner{overflow:hidden;min-width:0;white-space:nowrap;
  display:flex;align-items:center;gap:20px;padding-left:16px}
.nav-mini>.nav-inner{padding-right:10px;font-family:'Inter',sans-serif;font-size:16px;color:#fff}
.nav.mini .nav-full{grid-template-columns:0fr;opacity:0}
.nav:not(.mini) .nav-mini{grid-template-columns:0fr;opacity:0}
.nav-links{display:flex;gap:20px}
.nav-links a{font-family:'Inter',sans-serif;font-size:16px;font-weight:400;color:#fff;
  text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--accent)}
.nav-cta{display:flex;align-items:center;height:40px;padding:3px 30px 4px;border-radius:999px;
  background:#fff;color:#0b0b0f;text-decoration:none;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:400;transition:filter .2s}
.nav-cta:hover{filter:brightness(.92)}
/* hambúrguer: só existe abaixo de 1200px (círculo lima 40×40, como na referência) */
.nav-burger{display:none;width:40px;height:40px;flex:none;margin-left:10px;
  border:0;border-radius:50%;background:var(--accent);color:#0b0b0f;cursor:pointer;
  place-items:center;font-size:18px;line-height:1}
/* painel: mesma pele da nav, 300px como no modelo */
.nav-menu{position:fixed;top:80px;left:50%;z-index:8;width:min(300px,calc(100vw - 24px));
  transform:translateX(-50%) translateY(-8px);opacity:0;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;padding:10px 10px 20px;
  background:#0F0F0FE6;backdrop-filter:blur(8px);border-radius:28px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:opacity .25s ease,transform .25s ease}
.nav-menu.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-menu a{font-family:'Inter',sans-serif;font-size:17px;color:#fff;text-decoration:none;
  padding:14px;border-radius:18px;text-align:center;transition:background .2s}
.nav-menu a:hover{background:#ffffff14}
.nav-menu a[aria-current]{color:var(--accent)}
/* .nav-menu a venceria .nav-cta (mais específico) e deixaria o texto branco no branco */
.nav-menu .nav-cta{color:#0b0b0f;justify-content:center;margin-top:8px}
@media (max-width:1199px){
  /* left:50% só daria metade do ecrã à largura automática; max-content usa a do conteúdo */
  .nav{width:max-content;max-width:calc(100vw - 24px)}       /* nunca sangra pra fora da tela */
  .nav-burger{display:grid}
  .nav .nav-full{display:none}                                   /* links inline somem */
  .nav:not(.mini) .nav-mini{grid-template-columns:1fr;opacity:1}  /* status fica sempre visível */
  .nav-mini>.nav-inner{padding-right:4px}
  .nav-mini .nav-inner span{overflow:hidden;text-overflow:ellipsis}
}
/* tela estreita: o texto continua, só aperta (gap e fonte) pra caber */
@media (max-width:480px){
  .nav>img{width:36px;height:36px}
  .nav-mini>.nav-inner{gap:8px;padding-left:10px;padding-right:0}
  .nav-mini .nav-inner span{font-size:14px}
  .nav-burger{margin-left:8px}
}
@media (min-width:1200px){.nav-menu{display:none}}

/* botão de idioma: fixo em baixo ao centro, como o claro/escuro da referência.
   Esquerda = PT, direita = EN; a bolinha lima fica por baixo do idioma ativo. */
.lang{position:fixed;bottom:16px;left:50%;z-index:8;transform:translateX(-50%);
  display:grid;grid-template-columns:1fr 1fr;width:84px;height:34px;padding:3px;border-radius:999px;
  background:#0F0F0FE6;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:400;letter-spacing:.04em;text-decoration:none}
.lang::before{content:"";position:absolute;top:3px;left:3px;width:39px;height:28px;border-radius:999px;
  background:var(--accent);transition:transform .25s ease}
.lang.en::before,.lang.vai.pt::before{transform:translateX(39px)}
.lang.vai.en::before{transform:none}
.lang span{position:relative;display:grid;place-items:center;color:#fff;transition:color .25s}
.lang.pt span:first-child,.lang.en span:last-child{color:#0b0b0f}
.lang.vai span{color:#fff}
.lang.vai.pt span:last-child,.lang.vai.en span:first-child{color:#0b0b0f}

/* ponto verde que segue o rato (criado em nav.js) */
.ponto{position:fixed;top:-6px;left:-6px;z-index:99;width:12px;height:12px;border-radius:50%;background:var(--accent,#c6f24e);
  pointer-events:none;opacity:0;transition:transform .12s ease-out,opacity .2s}
.ponto.on{opacity:1}