/* Barra sobre fundo claro: vira vidro claro com texto escuro (padrão Apple).
   O /assets/nav/nav-tom.js lê a cor do que está passando por baixo da barra e liga .nav--light.
   Compartilhado por TODAS as páginas com a barra (blog, home, cursos, loja, coleções): mudou aqui, muda em todas.
   Fica em public/ de propósito — fora do build, como o nav-vidro.css.
   A cor do hover sobre o claro é por página: --nav-hover-claro (padrão: o rosa escuro do blog). */
.nav { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.nav .logo, .nav .links a, .nav-dock .nav .member, .nav-dock .nav .menu-btn { transition: color .35s ease, border-color .35s ease; }
.nav-dock .nav.nav--light { background: rgba(251,251,253,0.72); border-color: rgba(20,12,30,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 30px -14px rgba(20,12,30,0.28); }
.nav-dock .nav.nav--light .logo { color: #1d1d1f; border-right-color: rgba(20,12,30,0.10); }
.nav-dock .nav.nav--light .links a { color: #6e6e73; }
.nav-dock .nav.nav--light .links a.active { color: #1d1d1f; }
.nav-dock .nav.nav--light .links a:hover:not(.active) { color: var(--nav-hover-claro, #D62457); }
.nav-dock .nav.nav--light .links .pill { background: rgba(20,12,30,0.06); box-shadow: inset 0 0 0 1px rgba(20,12,30,0.05); }
.nav-dock .nav.nav--light .member { color: #6e6e73; border-left-color: rgba(20,12,30,0.10); }
.nav-dock .nav.nav--light .member:hover { color: var(--nav-hover-claro, #D62457); }
.nav-dock .nav.nav--light .menu-btn { color: #1d1d1f; }
@media (prefers-reduced-transparency: reduce) { .nav-dock .nav { background: rgba(14,10,18,0.96); } .nav-dock .nav.nav--light { background: rgba(251,251,253,0.97); } }