/* ==========================================================================
   components/boton.css — Botón
   Primitivo sin marcador propio: se usa dentro de hero, cta, formularios, 404…
   Estados: hover (color, instantáneo), active (se hunde con transform),
   focus-visible (global, base.css), disabled / [aria-busy] (envío en curso).
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tactil);
  padding: var(--space-3) var(--space-5);
  border: var(--borde-medio) solid transparent;
  border-radius: var(--radio-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-cambio);
}
.btn:active { transform: scale(var(--escala-pulsado)); }
.btn:disabled { cursor: progress; opacity: .75; }
.btn:disabled:active { transform: none; }

.btn--primario { background: var(--c-agua); color: var(--c-abismo); }
.btn--primario:hover { background: var(--c-agua-claro); }
.btn--contorno-claro { border-color: var(--borde-inverso-fuerte); color: var(--c-blanco); }
.btn--contorno-claro:hover { background: var(--superficie-inversa-hover); border-color: var(--c-blanco); }
.btn--contorno { border-color: var(--c-laguna); color: var(--c-laguna); }
.btn--contorno:hover { background: var(--c-laguna); color: var(--c-blanco); }

/* Indicador de carga: lo inserta formularios.js mientras se envía */
.btn__spinner {
  width: var(--icono-sm); height: var(--icono-sm);
  border: var(--borde-medio) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-circulo);
  animation: btn-girar var(--dur-contador) linear infinite;
}
@keyframes btn-girar { to { transform: rotate(1turn); } }
/* Con movimiento reducido el giro se detiene: queda un anillo estático + el texto "Enviando…" */

.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--space-3); }