Main Header

<div class="flex h-20 max-w-7xl mx-auto px-6 items-center justify-between">
    <!-- Logo -->
    <a href="/" class="block group relative z-50">
        <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20"
                viewBox="0 0 24 24" data-icon="lucide:hexagon" data-width="20" class="edit-mode-selected-multi">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16">
                </path>
            </svg>
            <span class="font-serif text-xl tracking-[0.3em] text-white edit-mode-selected-multi">
                VIONYX
                </span>
        </div>
    </a>

    <!-- Desktop nav -->
    <div class="hidden md:flex items-center gap-10">
        <a href="#el-sistema"
            class="nav-link-underline text-[10px] hover:text-vionyx-bronze transition-colors uppercase text-neutral-400 tracking-[0.2em] edit-mode-selected-multi">
            El sistema
        </a>
        <a href="#ciencia"
            class="nav-link-underline text-[10px] hover:text-vionyx-bronze transition-colors uppercase text-neutral-400 tracking-[0.2em] edit-mode-selected-multi">
            Ciencia
        </a>
        <a href="#resultados"
            class="nav-link-underline text-[10px] tracking-[0.2em] text-neutral-400 hover:text-vionyx-bronze transition-colors uppercase edit-mode-selected-multi">
            Resultados
        </a>
    </div>

    <!-- Desktop CTA -->
    <a href="/test-biologico"
        class="hidden md:inline-flex relative group overflow-hidden border border-white/10 px-6 py-2 rounded-full transition-all duration-500 hover:border-vionyx-bronze/60 shadow-[0_0_0_rgba(198,169,140,0)] hover:shadow-[0_0_26px_rgba(198,169,140,0.55)] bg-black/20 edit-mode-selected-multi">
        <span class="relative text-[10px] tracking-[0.2em] uppercase text-white group-hover:text-vionyx-bronze transition-colors">
                Test biológico
            </span>
    </a>

    <!-- Mobile toggle -->
    <button id="mobile-nav-toggle" class="md:hidden inline-flex items-center justify-center w-9 h-9 rounded-full border border-white/10 bg-black/50 backdrop-blur-sm group" type="button" aria-label="Abrir menú" aria-expanded="false">
            <span class="sr-only">Abrir menú</span>
            <div class="flex flex-col gap-1">
                <span class="block w-4 h-px bg-white transition-transform duration-200 group-aria-expanded:rotate-45 group-aria-expanded:translate-y-1"></span>
                <span class="block w-4 h-px bg-white transition-transform duration-200 group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-0.5"></span>
            </div>
            </button>
</div>