/* ============================================================
   COMPONENTES REUTILIZABLES
   ============================================================ */

/* --- Header fijo --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) clamp(20px, 3vw, 40px);
  pointer-events: none; /* el header en sí no bloquea, solo sus hijos */
}

.site-header > * {
  pointer-events: auto;
}


/* --- Logo adaptativo ---
   El logo es un SVG inline con fill="currentColor".
   El color del wrapper se hereda. Cambia con la clase .is-scrolled
   que el JS agrega al .site-header cuando el Hero deja de estar visible. */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  /* Estado inicial: claro, porque el header arranca sobre el Hero */
  color: var(--color-bone);
  transition: color var(--transition-base);
}

.site-header__logo svg {
  height: clamp(40px, 4vw, 68px);
  width: auto;
  display: block;
}

/* Cuando el header dejó atrás el Hero: el logo se vuelve oscuro */
.site-header.is-scrolled .site-header__logo {
  color: var(--color-ink);
}


/* --- Panel contenedor del menú ---
   En desktop es transparente (solo agrupa).
   En mobile se transforma en drawer lateral. */
.nav-panel {
  display: contents; /* no introduce caja en desktop */
}


/* --- Navegación tipo píldora (desktop) --- */
.nav-pill {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: clamp(0.75rem, 1.25vw, 1.25rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.nav-pill__link {
  display: inline-block;
  font-family: var(--font-family);
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: font-weight var(--transition-base);
  position: relative;
}

/* Truco para evitar layout shift al cambiar peso de semibold a bold */
.nav-pill__link::before {
  content: attr(data-text);
  display: block;
  font-weight: var(--weight-bold);
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.nav-pill__link:hover,
.nav-pill__link:focus-visible,
.nav-pill__link.is-active {
  font-weight: var(--weight-bold);
}


/* --- Burger button (oculto en desktop, visible en mobile) --- */
.nav-burger {
  display: none;
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: calc(var(--z-header) + 1);
}

.nav-burger__icon {
  position: relative;
  width: 20px;
  height: 14px;
}

.nav-burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: 
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.2s ease,
    top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-burger__line:nth-child(1) { top: 0; }
.nav-burger__line:nth-child(2) { top: 6px; }
.nav-burger__line:nth-child(3) { top: 12px; }

/* Estado abierto: burger -> X */
.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded="true"] .nav-burger__line:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}


/* --- Botón pill primario (CTA) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.25vw, 1.25rem) clamp(1.5rem, 2.5vw, 2.5rem);
  font-family: var(--font-family);
  font-size: var(--font-button);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: 
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-rust);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--full-width {
  width: 100%;
}


/* --- Título de sección (reutilizable) --- */
.section-title h2 {
  font-family: var(--font-family);
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink);
}