description = "Site header — navigation"
==
<nav class="navbar navbar-expand-lg bg-white border-bottom sticky-top" style="border-color:#e2e8f0;">
  <div class="container">
    <a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="{{ '/'|page }}" style="color:var(--vp-brand);">
      <span style="background:var(--vp-brand);color:#fff;width:32px;height:32px;border-radius:.4rem;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;">V</span>
      VivesPOS
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
        <li class="nav-item"><a class="nav-link" href="{{ '/'|page }}">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="#features">Caracteristicas</a></li>
        <li class="nav-item"><a class="nav-link" href="#modos">Offline vs Nube</a></li>
        <li class="nav-item"><a class="nav-link" href="#screens">Galeria</a></li>
        <li class="nav-item"><a class="nav-link" href="#precios">Precios</a></li>
        <li class="nav-item"><a class="nav-link" href="#comparativa">Comparativa</a></li>
        <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
        <li class="nav-item"><a class="nav-link" href="{{ '/blog'|page }}">Blog</a></li>
        <li class="nav-item ms-lg-2">
          <a href="https://wa.me/523317025248?text=Hola%2C%20quiero%20mas%20info%20de%20VivesPOS" class="btn btn-brand-cta btn-sm px-3" target="_blank" rel="noopener">
            <i class="bi-whatsapp me-1"></i>Contactar
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>