/* ==========================================================================
   NAV + FOOTER — extraído 1:1 de assets/css/styles.css (produção real,
   www.loomty.com), 11/09/2026. Substitui a aproximação anterior.
   Variáveis --ink/--paper/--orange/--green/--text-grey/--gutter foram
   resolvidas para o valor literal de produção (evita colidir com os tokens
   --tinta/--fundo do loomty.css, que têm outro propósito aqui). --sans e
   --mono ficaram como var() porque já existem em loomty.css com o MESMO
   valor. A fonte de ícone usa o tabler-icons.woff2 COMPLETO (não o subset),
   porque o footer real usa glifos (LinkedIn, Instagram, TikTok, contato)
   que o subset da variante empilhada não continha.
   ========================================================================== */

@font-face {
  font-family: 'tabler-icons';
  src: url('../fonts/tabler-icons.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.ti {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-variant: normal;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 73px;
  padding: 0 12px 0 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: transparent;
  /* `backdrop-filter` SAIU da lista: filtro não interpola para `none` —
     ele segura o valor antigo por toda a transição e salta no fim. */
  transition: background-color .35s, box-shadow .35s;
}

.nav.scrolled {
  background: rgba(251, 251, 249, .92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 #d4d4d4;
}

.nav-logo {
  position: relative;
  z-index: 3;
  flex: 0 0 160px;
  width: 160px;
  height: 32px;
  display: flex;
  align-items: center;
  color: #fafafa;
}

.nav-logo-full {
  display: block;
  width: 160px;
  max-width: 160px;
  height: 32px;
  object-fit: contain;
}

.nav-logo-full-dark { display: none; }

.nav.scrolled .nav-logo-full-light { display: none; }

.nav.scrolled .nav-logo-full-dark { display: block; }

.nav-logo-icon { display: none; }

.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.nav-link {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
  transition: color .25s, background .25s;
}

.nav-link:hover { color: #fafafa; }

.nav-link.is-active { color: #F2007E; font-weight: 900; }

.nav.scrolled .nav-link { color: #6b6b6b; }

.nav.scrolled .nav-link:hover { color: #0c0c0c; }

.nav.scrolled .nav-link.is-active { color: #F2007E; font-weight: 900; }

.nav-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  height: 44px;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.nav-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 64px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  transition: color .25s, background .25s;
}

.nav-login:hover { color: #fafafa; }

.nav.scrolled .nav-login { color: #6b6b6b; }

.nav-login[data-logado] {
  width: auto;
  min-width: 64px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 5px 14px;
}

.nav-login-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
  /* nome completo cabe até certo ponto: passando disso, reticências — sem
     isto um nome longo empurrava a topbar no celular */
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-login-role {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.nav.scrolled .nav-login-role { color: rgba(0, 0, 0, .38); }

.nav-account { position: relative; display: flex; }

.nav-account-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .22), 0 1px 0 rgba(0, 0, 0, .04);
  padding: 20px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}

.nav-account-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.nav-account-menu * { box-sizing: border-box; }

.nav-account-menu .ti { line-height: 1; }

.nav-account-menu__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.nav-account-menu__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #6b6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.nav-account-menu__id { flex: 1 1 auto; min-width: 0; padding-top: 2px; }

.nav-account-menu__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #090909;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-account-menu__role {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #a1a1a1;
}

.nav-account-menu__cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #dff3fb;
  color: #0a6a8a;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter .15s ease;
}

.nav-account-menu__cta:hover { filter: brightness(.96); }

.nav-account-menu__cta .ti { font-size: 15px; }

.nav-account-menu__cta--admin { background: #fbead0; color: #8a5a06; }

.nav-account-menu__credits { margin-top: 18px; }

.nav-account-menu__credits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-account-menu__credits-head > span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #a1a1a1;
}

.nav-account-menu__refresh {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 2px;
  font-family: var(--sans);
  font-size: 12px;
  color: #6b6b6b;
  cursor: pointer;
}

.nav-account-menu__refresh:hover { color: #090909; }

.nav-account-menu__refresh .ti { font-size: 13px; }

.nav-account-menu__credits-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.nav-account-menu__credits-count {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #090909;
}

.nav-account-menu__percent {
  flex: none;
  font-size: 12px;
  color: #6b6b6b;
}

.nav-account-menu__bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: #f2f2f2;
  overflow: hidden;
}

.nav-account-menu__bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: #007a40;
  border-radius: inherit;
  transition: width .3s ease;
}

.nav-account-menu__row2 {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.nav-account-menu__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(12, 12, 10, .14);
  font-size: 13px;
  font-weight: 700;
  color: #090909;
  transition: background .15s ease;
}

.nav-account-menu__btn:hover { background: #f5f5f5; }

.nav-account-menu__btn .ti { font-size: 15px; }

.nav-account-menu__btn--dark {
  border-color: #0c0c0c;
  background: #0c0c0c;
  color: #fafafa;
}

.nav-account-menu__btn--dark:hover { background: #000000; }

.nav-account-menu__list {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(12, 12, 10, .08);
}

.nav-account-menu__list a,
.nav-account-menu__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 4px;
  border: 0;
  background: transparent;
  color: #090909;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}

.nav-account-menu__list a .ti,
.nav-account-menu__logout .ti { font-size: 16px; color: #6b6b6b; }

.nav-account-menu__list a:hover,
.nav-account-menu__logout:hover { background: #f5f5f5; }

.nav-account-menu__logout {
  margin-top: 8px;
  padding-top: 17px;
  border-top: 1px solid rgba(12, 12, 10, .08);
  border-radius: 0 0 6px 6px;
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: #fafafa;
  color: #0c0c0c;
  /* 12/1,2 — os números de loomty.com. Eram 12,384 e 1,2384: a medida do
     Figma multiplicada por 1,032, que é a escala de uma exportação, não uma
     decisão de tipografia. A diferença é de meio pixel e mesmo assim aparecia,
     porque o CTA fica ao lado de rótulos de 11px que já estavam redondos. */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s, color .25s, transform .2s;
}

.nav-cta:hover { background: #cc3300; color: #fafafa; transform: translateY(-2px); }

.nav.scrolled .nav-cta { background: #0c0c0c; color: #fafafa; }

.nav.scrolled .nav-cta:hover { background: #cc3300; }

.nav-ai {
  position: relative;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid #2e2e2e;
  border-radius: 8px;
  background: transparent;
  color: #fafafa;
  cursor: pointer;
  appearance: none;
  transition: background .25s, color .25s, border-color .25s;
}

.nav-ai svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-ai:hover { background: #fafafa; border-color: #fafafa; color: #0c0c0c; }

.nav.scrolled .nav-ai { border-color: rgba(0, 0, 0, .22); color: #0c0c0c; }

.nav.scrolled .nav-ai:hover { background: #0c0c0c; border-color: #0c0c0c; color: #fafafa; }

/* 44 × 44, COMO OS VIZINHOS (12/09/2026) — pedido do Márcio.
   Esta folha foi extraída da nav de loomty.com com os 38 × 34 originais do
   `.nav-toggle`, mas SEM o bloco de alvo de toque que lá (responsive.css,
   seção "ALVOS DE TOQUE") sobe `.nav-toggle` e `.nav-ai` para os 44px da
   WCAG 2.5.8. Resultado: no site antigo os três controles da barra medem
   44 de altura e aqui o hambúrguer ficava 38 × 34 — menor que o botão da
   Iara ao lado e que o "Jogar", e abaixo do alvo mínimo de toque.

   O raio também subiu de 6px para 8px, o do `.nav-cta` e o do `.nav-ai`.
   Os 6px vinham do site antigo, mas ali eram sobra de quando o hambúrguer
   tinha outro tamanho: com os três botões agora do mesmo lado e da mesma
   altura, um raio diferente lê como botão de outra família. O site antigo
   recebeu a mesma correção, em styles.css. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid #2e2e2e;
  border-radius: 8px;
  background: transparent;
  color: #fafafa;
  cursor: pointer;
  appearance: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav.scrolled .nav-toggle { border-color: rgba(0, 0, 0, .22); color: #0c0c0c; }

.footer {
  background: #0c0c0c;
  color: #fafafa;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 80px 40px 32px;
}

.foot-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  max-width: 1180px;
  margin: 0 auto 64px;
}

.foot-logo {
  display: block;
  margin: 0 0 18px;
  width: 116px;   /* o tipo sozinho é mais largo que alto; a altura sai da proporção */
}

.foot-logo img { display: block; width: 100%; height: auto; }

.foot-tag {
  max-width: 320px;
  font-size: 14px;
  line-height: 23.8px;
  color: rgba(255, 255, 255, .68);
}

.foot-col h4 {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.foot-col a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  text-transform: none;
  color: rgba(255, 255, 255, .7);
  transition: color .2s;
}

.foot-col a:hover { color: #fafafa; }

.foot-col a.is-active { color: #F2007E; font-weight: 700; }

.foot-col a .brand-iara,
.foot-col a .brand-iara .iara-i { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }

.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.foot-social { display: flex; align-items: center; gap: 18px; }

.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .35);
  transition: color .2s ease;
}

.foot-social a:hover,
.foot-social a:focus-visible { color: #fafafa; }

.foot-social .ti { font-size: 20px; line-height: 1; }

@media (max-width: 1024px) {
.nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    transform: none;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 28px;
    background: rgba(5, 5, 5, .98);
    /* SEM `backdrop-filter`: a 98% de opacidade ele não tem o que mostrar, e
       compor um desfoque de fundo a cada quadro é das coisas mais caras que
       existem no celular — era parte do engasgo na entrada do menu. */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  }
.nav.open .nav-links { display: grid; }
  /* .is-fechando é o estado de SAÍDA (ver nav-a11y.js): a classe .open já
     foi removida por quem fechou, mas o painel precisa continuar desenhado
     enquanto a animação roda. Ele não recebe toque nesse intervalo — um
     clique a caminho do fim da animação acertaria um link que já está indo
     embora. */
.nav.is-fechando .nav-links { display: grid; pointer-events: none; }
.nav.open .nav-links .nav-link,
.nav.is-fechando .nav-links .nav-link {
    display: flex;
    align-items: center;
    padding: 13px 0;
    color: rgba(255, 255, 255, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }
.nav.open .nav-links .nav-link:last-child,
.nav.is-fechando .nav-links .nav-link:last-child { border-bottom: 0; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- BARRA, VÉU E PAINEL: UM SÓ RELÓGIO --------------------------------
     A primeira versão disto tinha três donos de tempo — a barra trocava de
     cor por `transition` do CSS, o véu por outra `transition`, e o painel
     por GSAP. Três curvas, três inícios, e o olho lia três estágios: muda a
     barra, abre o menu, escurece o fundo.

     Agora existe UMA variável, `--menu-fase`, de 0 a 1, e as três coisas são
     função dela. Quem move a variável é o GSAP, numa curva só: tudo parte do
     mesmo quadro e chega junto. Não há o que dessincronizar.

     · a barra ganha a tinta do painel como CAMADA (background-image sobre o
       background-color), para não brigar com o `.scrolled`, que continua
       pintando por baixo;
     · o véu mora no `body`, não na `.nav` — dentro dela, o `backdrop-filter`
       do estado `.scrolled` a tornava bloco de contenção de `position:fixed`
       e prendia o véu nos 73px da barra. Era essa a terceira "etapa": o véu
       só se soltava quando o filtro terminava de sair.

     Sem GSAP (as páginas legais e a spec não o carregam) ou com
     `prefers-reduced-motion`, a classe `nav-travado` põe a fase em 1 de uma
     vez — que é o comportamento correto nos dois casos. */
  /* `.nav.scrolled` pinta com o ATALHO `background:`, e atalho zera o que ele
     não menciona — inclusive `background-image`. Por isso a camada precisa
     ser declarada também para o estado rolado, e depois dele no arquivo:
     mesma especificidade, ganha quem vem por último. Sem isto a barra rolada
     continuava papel com o menu aberto. */
  .nav,
  .nav.scrolled {
    background-image:
      linear-gradient(rgba(5, 5, 5, calc(var(--menu-fase, 0) * .98)),
                      rgba(5, 5, 5, calc(var(--menu-fase, 0) * .98)));
  }
  /* o fio claro de 1px da `.scrolled` viraria uma linha acesa exatamente na
     junta entre a barra e o painel */
  .nav.open,
  .nav.is-fechando { box-shadow: none; }

  /* o resto da barra volta para a paleta de superfície escura: com
     `.scrolled` posta, marca, botões e contornos estavam pintados para papel
     e ficavam ilegíveis sobre a tinta do painel */
  /* A MARCA TEM DOIS PARES, E QUAL DELES EXISTE DEPENDE DA LARGURA: até 768px
     a barra troca o logotipo por extenso pelo ÍCONE. Virar o par errado
     acende os dois ao mesmo tempo — o ícone aparecia gigante ao lado do
     logotipo entre 769 e 1024px. Cada troca fica na faixa onde o seu par é
     o que está em cena. */
  @media (min-width: 769px) {
    .nav.scrolled.open .nav-logo-full-dark,
    .nav.scrolled.is-fechando .nav-logo-full-dark { display: none; }
    .nav.scrolled.open .nav-logo-full-light,
    .nav.scrolled.is-fechando .nav-logo-full-light { display: block; }
  }
  @media (max-width: 768px) {
    .nav.scrolled.open .nav-logo-icon-dark,
    .nav.scrolled.is-fechando .nav-logo-icon-dark { display: none; }
    .nav.scrolled.open .nav-logo-icon-light,
    .nav.scrolled.is-fechando .nav-logo-icon-light { display: block; }
  }
  .nav.scrolled.open .nav-cta,
  .nav.scrolled.is-fechando .nav-cta { background: #fafafa; color: #0c0c0c; }
  .nav.scrolled.open .nav-toggle,
  .nav.scrolled.is-fechando .nav-toggle,
  .nav.scrolled.open .nav-ai,
  .nav.scrolled.is-fechando .nav-ai { border-color: rgba(255, 255, 255, .22); color: #fafafa; }
  .nav.scrolled.open .nav-login,
  .nav.scrolled.is-fechando .nav-login { color: rgba(255, 255, 255, .6); }

  /* quem pediu menos movimento recebe a troca sem travessia */
  @media (prefers-reduced-motion: reduce) {
    .nav::after { transition: none; }
  }
}

@media (max-width: 1360px) {
.foot-wrap { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.foot-tag { max-width: 100%; }
}

@media (max-width: 1024px) {
.footer { padding: 64px 40px 32px; }
@media (max-width: 1024px) { .footer { padding: 64px 28px 32px; } }
@media (max-width: 768px)  { .footer { padding: 64px 20px 32px; } }
.foot-wrap { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
.nav { padding: 0 12px 0 16px; }
.nav-login { display: none; }

/* A barra é o ponto mais apertado do site: marca (160px fixos) + "Jogar" +
   hambúrguer + atalho da Iara passavam de 375px, e o que sobrava para fora
   era justamente a ponta do atalho da Iara — cortada pela borda da tela.

   Esta folha foi extraída da nav de loomty.com mas veio sem a troca que lá
   resolve o aperto: abaixo de 768px sai o lockup inteiro e fica só o
   símbolo. Encolher a marca completa não serve — numa faixa estreita ela
   fica ilegível de qualquer jeito. Os quatro <img> já estão no HTML; aqui
   só se inverte qual par aparece.

   Os dois seletores de `.nav.scrolled` são repetidos um a um porque
   `.nav.scrolled .nav-logo-full-dark { display: block }` tem 0,2,0 e
   venceria a regra de 0,1,0 acima mesmo vindo antes na cascata. */
.nav-logo-full { display: none; }
.nav.scrolled .nav-logo-full-light,
.nav.scrolled .nav-logo-full-dark { display: none; }
.nav-logo-icon { display: block; width: 32px; height: 32px; }
.nav-logo-icon-dark { display: none; }
.nav.scrolled .nav-logo-icon-light { display: none; }
.nav.scrolled .nav-logo-icon-dark { display: block; }

/* a caixa vira quadrada: os 160px fixos eram a medida do lockup horizontal,
   que não existe mais nesta faixa */
.nav-logo { flex: 0 0 44px; width: 44px; height: 44px; justify-content: center; }

.foot-wrap { grid-template-columns: 1fr; gap: 36px; }
.foot-bot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* na faixa mais estreita o respiro entre os três controles também aperta,
   como em loomty.com */
@media (max-width: 380px) {
.nav-actions { gap: 4px; }
}

/* ---- O VÉU DO MENU ------------------------------------------------------
   Mora no body de propósito: dentro da `.nav` o `backdrop-filter` do estado
   `.scrolled` a torna bloco de contenção dos descendentes `position: fixed`,
   e o véu ficava preso nos 73px da barra até o filtro terminar de sair — era
   isso que o fazia aparecer por último, como um estágio separado.

   A opacidade é função de `--menu-fase`, a mesma variável que pinta a barra e
   que o GSAP move junto com o recorte do painel: um relógio só.

   `z-index: 90` fica abaixo da `.nav` (100) e acima da página. `pointer-events:
   none` é deliberado — o toque atravessa e chega ao documento, que é quem o
   nav-a11y.js escuta para fechar o menu. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000000;
  opacity: calc(var(--menu-fase, 0) * .8);
  pointer-events: none;
}
/* sem GSAP ou com movimento reduzido, a fase é ligada de uma vez pela classe
   que o nav-a11y.js já põe na raiz ao abrir */
html.nav-travado { --menu-fase: 1; }