/* =========================================================================
   HEADER.CSS — Barra de navegación fija superior
   ========================================================================= */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--navy);
  display: flex; align-items: center;
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(20, 44, 70, .28); background: var(--navy-deep); }

.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Logo en el cabezal (versión blanca sobre azul) */
.brand { display: flex; align-items: center; }
.brand img { height: 40px; width: auto; }

/* Navegación */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav a {
  color: var(--text-on-navy-soft); font-weight: 600; font-size: .95rem;
  position: relative; padding: .35rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--blue-soft); transition: width .25s ease;
}
.nav a:hover, .nav a.active { color: #fff; }
.nav a:hover::after, .nav a.active::after { width: 100%; }

/* Icono de Instagram en la navegación */
.nav a.nav-ig { display: inline-flex; align-items: center; padding: .35rem .1rem; }
.nav a.nav-ig::after { display: none; }
.nav a.nav-ig svg { transition: transform .2s ease; }
.nav a.nav-ig:hover svg { transform: scale(1.12); }

.header-cta { display: flex; align-items: center; gap: .7rem; }

/* Botón hamburguesa (solo móvil) */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; border-radius: 8px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }