# Header (Navegación Global)

La barra de navegación superior (Header) es un componente estructural propietario de Lexy que provee identidad de marca, anclaje y acciones globales (búsqueda, perfil). Al ser un componente altamente ligado al layout, se construye a la medida (no se importa de Fluent ni de Geist).

```tsx
import { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";

export function Header() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 0);
    // Revisar posición inicial
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 flex h-[64px] items-center justify-between px-lexy-24 transition-colors duration-200 ${
        scrolled 
          ? "bg-lexy-crema/90 backdrop-blur-md border-b border-lexy-input-border" 
          : "bg-lexy-crema border-b border-transparent"
      }`}
    >
      <Link href="/" className="flex items-center hover:opacity-80 transition-opacity">
        <Image 
          src="/lexy-design-system/logos/lexy-dark-horizontal.svg" 
          alt="Ir al inicio - Lexy" 
          width={120} 
          height={32} 
        />
      </Link>
      
      <div className="flex items-center gap-lexy-8">
        {/* Acciones globales como SiteSearch o Avatar */}
      </div>
    </header>
  );
}
```

## Anatomía y Estructura

El Header consta de las siguientes propiedades inquebrantables:
- **Altura**: Fija a `64px` (`h-[64px]`).
- **Posicionamiento**: `fixed top-0 z-50` para mantenerse siempre sobre la vista.
- **Scroll Behavior**: Cambia su borde inferior (`border-b`) y añade un fondo traslúcido (`backdrop-blur`) al hacer scroll, creando un efecto de elevación (glassmorphism) sobre el contenido inferior.
- **Padding Lateral**: Suele ser de `24px` a `32px` dependiendo de la grilla elegida en el Layout.

### Zonas del Header
1. **Región Izquierda**: Identidad de marca (Logo). Siempre actúa como enlace al inicio.
2. **Región Central (Opcional)**: Enlaces de navegación de alto nivel (TopNav). Solo usado en sitios corporativos sin menú lateral.
3. **Región Derecha**: Utilidades globales (Buscador, Notificaciones, Avatar de Perfil, Botón de Login).

## Modificadores y Contexto

- **Transparencia inicial**: En páginas tipo "Landing" con imágenes de portada, el Header debe iniciar con `bg-transparent`. Al hacer scroll hacia abajo, debe volver a `bg-lexy-crema`.
- **Tema Oscuro**: Si el Header reposa permanentemente sobre una sección oscura, se debe usar `bg-lexy-indigo-deep` y cambiar el archivo de logo por `lexy-light-horizontal.svg`.

## Accesibilidad (A11y)

- Asegúrate de que toda la estructura esté contenida en un tag semántico `<header>`.
- Si el header incluye enlaces internos a distintas páginas, envuélvelos en `<nav aria-label="Navegación principal">`.
- El Logo de la marca debe contar con un `alt="Inicio de Lexy"` y estar dentro de un `<Link>` interactuable.