<nav class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/70 backdrop-blur">
  <div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
    <a href="#" class="text-white font-bold tracking-wide"><%= appName %></a>
    <div class="hidden md:flex items-center gap-4 text-sm">
      <a href="#primeros-pasos" class="text-slate-300 hover:text-white">Guía</a>
      <a href="#minijuegos" class="text-slate-300 hover:text-white">Minijuegos</a>
      <a href="#economia" class="text-slate-300 hover:text-white">Economía</a>
      <a href="#faq" class="text-slate-300 hover:text-white">FAQ</a>
    </div>
    <button id="toggle-nav" class="md:hidden text-slate-300 hover:text-white" aria-label="Abrir navegación">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>
</nav>
