/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

/* .btn siempre define su propio "display", así que gana por sobre la regla
   nativa [hidden] { display: none } del navegador (misma especificidad,
   pero la del navegador es de más baja prioridad) — sin esto, un botón
   oculto por JS vía el atributo hidden queda igual de visible. */
.btn[hidden] {
  display: none;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

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

.btn--dark:hover {
  background: var(--color-primary-dark);
}

.btn--outline-dark {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn--outline-dark:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn[aria-disabled="true"]:hover {
  transform: none;
}

.btn--whatsapp {
  background: #25d366;
  color: var(--color-white);
}

.btn--whatsapp:hover {
  background: #1ebc59;
}

.btn--sm {
  padding: 0.6rem 1.25rem;
  font-size: var(--fs-xs);
}

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