/* === SECCIÓN: BUTTONS — estilos extendidos === */

/* Los estilos base .btn, .btn--primary, .btn--ghost, .btn--outline
   están definidos en global.css. Este archivo extiende con variantes
   adicionales específicas de componentes. */

/* === BOTÓN CON ÍCONO === */
.btn--icon {
  gap: var(--space-2);
}

.btn--icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.btn--icon:hover svg {
  transform: translateX(3px);
}

/* === BOTÓN WHATSAPP (inline, no flotante) === */
.btn--whatsapp {
  background-color: #25D366;
  color: var(--color-white);
  border-color: #25D366;
}

.btn--whatsapp:hover {
  background-color: #1ebe5c;
  border-color: #1ebe5c;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.30);
}

.btn--whatsapp svg {
  width: 18px;
  height: 18px;
}

/* === BOTÓN FULL WIDTH === */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* === GRUPO DE BOTONES === */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn-group--center {
  justify-content: center;
}

.btn-group--stack {
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 480px) {
  .btn-group--stack {
    flex-direction: row;
    align-items: center;
  }
}