/* ==========================================================================
   buttons.css — Botones reutilizables (.btn)
   Componente compartido por header, hero y secciones de CTA.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
    box-shadow var(--transition), color var(--transition);
}

.btn:active {
  transform: translateY(1px);
}

/* Primario: índigo de marca, relleno */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-cream);
  box-shadow: 0 8px 24px rgba(82, 51, 254, 0.4);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 10px 30px rgba(82, 51, 254, 0.55);
}

/* Outline: borde crema sobre fondo oscuro (botón DOWNLOAD del header) */
.btn--outline {
  background-color: transparent;
  color: var(--color-cream);
  box-shadow: inset 0 0 0 1.5px var(--color-border);
}

.btn--outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-cream);
  background-color: rgba(255, 252, 239, 0.06);
}

/* Ghost: transparente con texto crema, mínimo (CTA secundario del hero) */
.btn--ghost {
  background-color: transparent;
  color: var(--color-cream);
  box-shadow: inset 0 0 0 1.5px rgba(255, 252, 239, 0.28);
}

.btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-cream);
}

/* Light: píldora crema con texto oscuro (CTA sobre fondo negro) */
.btn--light {
  background-color: var(--color-cream);
  color: #0b0710;
  box-shadow: 0 10px 30px rgba(255, 252, 239, 0.12);
}

.btn--light:hover {
  background-color: #ffffff;
}

.btn--lg {
  padding: 0.95rem 2rem;
  font-size: var(--fs-lg);
}