/* =========================================================
   Header — barra promocional + navegación principal
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: var(--color-brand-deep);
  box-shadow: var(--shadow-header);
}

/* Contenedor compartido por los dos niveles del header */
.promo-bar__inner,
.navbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ---------------------------------------------------------
   1. Barra promocional (carrusel de 2 slides)
   --------------------------------------------------------- */
.promo-bar {
  background-image: var(--gradient-promo);
  color: var(--color-white);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
}

.promo-carousel {
  position: relative;
  overflow: hidden;
}

.promo-carousel__track {
  display: flex;
  align-items: stretch;
  transition: transform var(--promo-slide-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cada slide ocupa el ancho completo del contenedor */
.promo-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--promo-height);
}

/* Los enlaces del slide inactivo quedan fuera del recorrido de tabulación */
.promo-carousel__slide[aria-hidden="true"] a {
  pointer-events: none;
}

.promo-bar__sep {
  opacity: 0.45;
}

.promo-bar__message strong {
  font-weight: var(--fw-bold);
}

.promo-bar__brand {
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
}

.promo-bar__message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.promo-bar__star {
  color: var(--color-yellow-light);
}

.promo-bar__code {
  padding: 2px var(--space-xs);
  background-image: var(--gradient-yellow);
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
}

/* Va dentro del mensaje, justo después de la cápsula del código */
.promo-bar__link {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2xs);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------
   2. Barra principal de navegación
   --------------------------------------------------------- */
.navbar {
  background-color: var(--color-brand-deep);
  border-top: 1px solid var(--divider-header);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--navbar-height);
}

/* ---------- Logo ---------- */
.navbar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}

.navbar__logo:hover {
  opacity: 0.88;
}

.navbar__logo img {
  width: auto;
  height: var(--logo-height);
  /* Tope de seguridad: el logo nunca puede estirar la barra */
  max-height: calc(var(--navbar-height) - 8px);
}

/* ---------- Panel (menú + acciones) ---------- */
.navbar__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: var(--space-lg);
}

/* ---------- Menú ---------- */
.navbar__nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.navbar__link {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-nav-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar__link:hover {
  color: var(--color-white);
  background-color: var(--surface-ghost);
}

.navbar__link:focus-visible {
  color: var(--color-white);
}

/* ---------- Acciones ---------- */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   Botones reutilizables
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  height: var(--control-height);
  padding-inline: var(--space-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast),
    filter var(--transition-fast);
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Secundario — WhatsApp */
.btn--ghost {
  background-color: var(--surface-ghost);
  border: 1px solid var(--border-ghost);
  color: var(--color-white);
}

.btn--ghost .btn__icon {
  color: var(--color-whatsapp);
}

.btn--ghost:hover {
  background-color: var(--surface-ghost-hover);
  border-color: var(--border-ghost-strong);
  transform: translateY(-1px);
}

/* Principal — Obtener Firma */
.btn--primary {
  background-image: var(--gradient-yellow);
  color: var(--color-ink);
  border: 1px solid transparent;
  box-shadow: var(--shadow-yellow);
}

.btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-yellow-hover);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* ---------------------------------------------------------
   Insignia "-20%" dentro del CTA (promoción activa)
   La inyecta promo-config.js; con el descuento apagado no
   existe en el HTML y el botón vuelve a su estado normal.
   --------------------------------------------------------- */
.btn__promo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px var(--space-2xs);
  background-color: #d61f1f;
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);

  /* Sólo parpadea la insignia; el texto del botón queda quieto. */
  animation: promo-parpadeo 1.8s ease-in-out infinite;
}

/* Parpadeo sutil: nunca llega a desaparecer, así no distrae ni
   provoca el efecto de "texto que se pierde". */
@keyframes promo-parpadeo {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Si el usuario pidió menos animación, la insignia se queda fija. */
@media (prefers-reduced-motion: reduce) {
  .btn__promo {
    animation: none;
  }
}

/* CTA compacto: solo existe en tablet y móvil, fuera del panel plegable */
.navbar__cta-compact {
  display: none;
  margin-left: auto;
}

/* ---------------------------------------------------------
   Botón hamburguesa
   --------------------------------------------------------- */
.navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  flex-shrink: 0;
  background-color: var(--surface-ghost);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.navbar__toggle:hover {
  background-color: var(--surface-ghost-hover);
  border-color: var(--border-ghost-strong);
}

/* Icono de 3 barras que se transforma en "X" */
.navbar__toggle-bars {
  position: relative;
}

.navbar__toggle-bars,
.navbar__toggle-bars::before,
.navbar__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), background-color var(--transition-fast);
}

.navbar__toggle-bars::before,
.navbar__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

.navbar__toggle-bars::before {
  transform: translateY(-6px);
}

.navbar__toggle-bars::after {
  transform: translateY(6px);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bars {
  background-color: transparent;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bars::before {
  transform: translateY(0) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bars::after {
  transform: translateY(0) rotate(-45deg);
}

/* Scrim del menú móvil */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--overlay-scrim);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-overlay.is-visible {
  opacity: 1;
}

/* =========================================================
   Responsive
   ========================================================= */

/* --- Escritorio intermedio: menú un poco más compacto --- */
@media (max-width: 1100px) {
  .navbar__link {
    padding-inline: var(--space-xs);
  }

  .navbar__panel,
  .navbar__inner {
    gap: var(--space-md);
  }
}

/* --- Tablet y móvil: menú desplegable --- */
@media (max-width: 960px) {
  .navbar__toggle {
    display: inline-flex;
  }

  .navbar__inner {
    justify-content: space-between;
    gap: var(--space-xs);
  }

  /* "Obtener Firma" siempre a la vista, junto a la hamburguesa */
  .navbar__cta-compact {
    display: inline-flex;
    width: auto;
    height: var(--control-height);
    padding-inline: var(--space-sm);
  }

  /* Evita el duplicado dentro del panel desplegable */
  .navbar__cta-panel {
    display: none;
  }

  .navbar__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-header);

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);

    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: var(--space-md) var(--container-padding) var(--space-lg);

    background-color: var(--color-brand-deep);
    border-top: 1px solid var(--divider-header);
    box-shadow: var(--shadow-panel);

    /* Estado cerrado — sin saltos de contenido */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition-base), transform var(--transition-base),
      visibility var(--transition-base);
  }

  .navbar__panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .navbar__nav {
    justify-content: stretch;
  }

  .navbar__menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3xs);
  }

  .navbar__link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-md);
  }

  .navbar__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--divider-header);
  }

  /* Solo los botones que viven dentro del panel ocupan todo el ancho */
  .navbar__panel .btn {
    width: 100%;
    height: 44px;
  }
}

/* --- Móvil estrecho: el CTA se compacta para no romper la barra --- */
@media (max-width: 480px) {
  .promo-bar__inner,
  .navbar__inner {
    padding-inline: var(--space-md);
  }

  .navbar__inner {
    gap: var(--space-2xs);
  }

  .navbar__logo img {
    height: 46px;
  }

  .navbar__cta-compact {
    padding-inline: var(--space-xs);
    font-size: var(--fs-sm);
  }
}

/* --- Móvil: barra promocional reorganizada --- */
@media (max-width: 640px) {
  /* El contenido envuelve sin desbordarse: "Aplicar →" queda junto al
     mensaje o pasa a la línea siguiente según el ancho disponible. */
  .promo-carousel__slide {
    padding-block: var(--space-2xs);
  }
}

@media (max-width: 380px) {
  .navbar__logo img {
    height: 44px;
  }

  .promo-bar {
    font-size: 0.6875rem; /* 11px */
  }

  .promo-bar__inner {
    padding-inline: var(--space-md);
  }
}