<nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
  <div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
    <a href="#" class="flex items-center gap-3 group">
      <img src="/assets/images/calabaza.svg" class="group-hover:scale-110" alt="calabaza" style="width: 32px; height: 32px; animation: softBounce 3s ease-in-out infinite;">
      <span class="font-['Press_Start_2P'] text-sm gradient-text"><%= appName %></span>
    </a>
    <div class="hidden md:flex items-center gap-8">
      <a href="#primeros-pasos" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Guía</a>
      <a href="#minijuegos" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Minijuegos</a>
      <a href="#economia" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Economía</a>
      <a href="#faq" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">FAQ</a>
    </div>
    <button id="toggle-nav" class="md:hidden" 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>

