/* nav.css · navegação Liquid Glass.
   Computador (>= 980px): pílula de vidro no alto, centralizada. Rolou para baixo, encolhe
   (some a lista de links; ficam marca e botão). Rolou para cima, abre.
   Celular: barra de vidro embaixo, na zona do polegar (safe-area), com menu e "Comprar o ebook". */

.nav { position: relative; z-index: 60; }

/* A navegação passa por cima de tudo, inclusive de telas claras (a do Amigo Divino): vidro com
   fumaça, para o texto branco ler (≥ 4,5:1 mesmo sobre branco) sem deixar de ser vidro. */
.nav__pilula, .nav-barra {
  --vidro-fundo: rgb(28 28 32 / .5);
  --vidro-filtro: blur(22px) saturate(170%) brightness(.8);
}

/* ---------- Computador: pílula ---------- */
.nav__pilula { display: none; }

@media (min-width: 980px) {
  .nav__pilula {
    --vidro-raio: 30px;
    --vidro-recuo: 6px;
    --vidro-sombra: 0 18px 40px -18px rgb(0 0 0 / .8);
    position: fixed; top: 14px; left: 0; right: 0;
    width: max-content; max-width: calc(100% - 32px);
    margin-inline: auto;
    display: flex; align-items: center;
    height: 60px;
    padding: 6px 6px 6px 24px;
    transition: transform .6s var(--expo), opacity .6s var(--expo), padding .6s var(--expo);
  }
  .nav__pilula .marca { font-size: .9375rem; margin-right: 6px; }

  /* A gaveta encolhe a coluna de 1fr para 0fr (largura anima sem medir) */
  .nav__gaveta {
    display: grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns .7s var(--expo), opacity .45s var(--expo), visibility 0s;
  }
  .nav__links {
    min-width: 0; overflow: hidden;
    display: flex; align-items: center; gap: 2px;
    padding: 0 12px 0 14px;
    list-style: none;
  }
  .nav__links a {
    display: block;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: .875rem; font-weight: 450; letter-spacing: -.005em;
    color: rgb(var(--gelo-rgb) / .74);
    white-space: nowrap;
    transition: color .2s, background-color .2s;
  }
  .nav__links a:hover { color: var(--gelo); background: rgb(255 255 255 / .07); }
  .nav__links a[aria-current="true"] { color: var(--gelo); }

  /* botão dentro da pílula: altura 48 = 60 − 2×6 (raio concêntrico 24) */
  .nav__comprar { --botao-alto: 48px; padding: 0 22px; font-size: .9375rem; }

  .nav--condensada .nav__gaveta {
    grid-template-columns: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-columns .7s var(--expo), opacity .3s var(--suave), visibility 0s .7s;
  }
  .nav--condensada .nav__pilula { padding-left: 20px; }
  /* teclado dentro da pílula: abre de novo */
  .nav__pilula:focus-within .nav__gaveta { grid-template-columns: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
}

/* ---------- Celular: barra embaixo ---------- */
.nav-barra {
  --vidro-raio: 32px;
  --vidro-recuo: 8px;
  --vidro-sombra: 0 16px 40px -10px rgb(0 0 0 / .85);
  position: fixed; z-index: 61;
  left: 50%; bottom: calc(12px + var(--seguro-baixo));
  width: min(100% - 24px, 520px);
  height: var(--barra-alto);
  padding: 8px;
  display: flex; align-items: center; gap: 8px;
  transform: translateX(-50%);
  transition: transform .7s var(--expo), opacity .5s var(--expo);
}
.nav-barra__menu {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / .1);
  color: var(--gelo);
  transition: background-color .2s, transform .4s var(--expo);
}
.nav-barra__menu:active { transform: scale(.94); }
.nav-barra__menu .icone { width: 22px; height: 22px; }
.nav-barra__marca { flex: 1; justify-content: center; font-size: .875rem; min-width: 0; }
/* altura 48 = 64 − 2×8 (raio 24 = 32 − 8) */
.nav-barra__comprar { --botao-alto: 48px; flex: none; padding: 0 20px; font-size: 1rem; }

@media (max-width: 359px) {
  .nav-barra__marca { visibility: hidden; }
}
/* sem JavaScript o menu não abre: o botão sai (ficam a marca e o "Comprar o ebook") */
.sem-js .nav-barra__menu { display: none; }
.sem-js .nav-barra { padding-left: 20px; }
@media (min-width: 980px) {
  .nav-barra, .folha, .folha-fundo { display: none !important; }
}

/* ---------- Folha do menu (celular) ---------- */
.folha-fundo {
  position: fixed; inset: 0; z-index: 58;
  background: rgb(0 0 0 / .5);
  opacity: 0;
  transition: opacity .35s var(--suave);
}
.folha {
  --vidro-raio: 30px;
  --vidro-recuo: 10px;
  --vidro-fundo: rgb(30 30 34 / .55);
  position: fixed; z-index: 59;
  left: 50%; bottom: calc(12px + var(--barra-alto) + 10px + var(--seguro-baixo));
  width: min(100% - 24px, 520px);
  max-height: calc(100svh - var(--barra-alto) - 48px - var(--seguro-baixo) - var(--seguro-topo));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  transform: translateX(-50%) translateY(16px) scale(.97);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform .5s var(--expo), opacity .3s var(--suave);
}
.folha__lista { list-style: none; padding: 0; display: grid; }
.folha__lista a {
  display: flex; align-items: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 20px;              /* 30 − 10 */
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em;
  color: var(--gelo);
  transition: background-color .2s;
}
.folha__lista a:active, .folha__lista a:hover { background: rgb(255 255 255 / .08); }
.folha__lista a[aria-current="true"] { background: rgb(255 255 255 / .1); }

.menu-aberto .folha-fundo { opacity: 1; }
.menu-aberto .folha { opacity: 1; transform: translateX(-50%); }
.menu-aberto .nav-barra__menu { background: rgb(255 255 255 / .18); }

/* ---------- Abertura: a navegação chega no fim da sequência ---------- */
.abertura .nav__pilula { opacity: 0; transform: translateY(-12px); }
.abertura .nav-barra { opacity: 0; transform: translateX(-50%) translateY(20px); }
.revelando .nav__pilula, .revelando .nav-barra { transition-delay: .4s; }