/* ==========================================================================
   Estilos del header y navegación
   Contiene: header sticky, borde al scrollear (solo visual), estados .scrolled/.hidden,
             marca y lista de navegación, y responsive del header.
   Lógica relacionada: ver assets/js/header.js
   ========================================================================== */


/* Header y navegación */
header{
  position:sticky;top:0;z-index:2000;background:#000;border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: transform;
}
header.scrolled{border-bottom-color:var(--line)}
header.hidden{transform:translateY(-100%)}

.nav{display:flex;align-items:center;justify-content:center;gap:22px;min-height:64px;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#fff}
.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,var(--accent),#9b6bff)}
.brand svg{width:14px;height:14px}
.nav-list{list-style:none;display:flex;gap:20px;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.nav-link{padding:6px 8px;color:#fff;font-weight:900}
.nav-link:hover{opacity:.9}

/* Responsive header */
@media (max-width:900px){
  .nav{gap:14px}
  .nav-list{gap:14px}
}
@media (max-width:700px){
  .nav{justify-content:center; padding:10px 16px}
  .nav-list{display:none !important;}
}