/* boton.css — un solo botón ámbar por pantalla: el que lleva al formulario. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-3) var(--esp-6);
  border-radius: var(--radio-md);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--txt-sm);
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva), background-color var(--mov-rapido) var(--curva);
}
.boton:active { transform: translateY(1px); }
.boton:focus-visible { border-radius: var(--radio-md); }

/* Ámbar: siempre con tinta encima. Con blanco da 2.45:1. */
.boton--ambar { background: var(--kv-ambar); color: var(--kv-tinta); box-shadow: var(--sombra-1); }
.boton--ambar:hover { background: var(--kv-ambar-profundo); color: var(--kv-tinta); box-shadow: var(--sombra-2); }

/* Lavanda profunda: la única lavanda que admite letra blanca (6.4:1) */
.boton--lavanda { background: var(--kv-lavanda-profunda); color: var(--kv-nube); }
.boton--lavanda:hover { color: var(--kv-nube); box-shadow: var(--sombra-2); }

.boton--borde { border-color: var(--kv-perla); background: var(--kv-nube); color: var(--kv-tinta); }
.boton--borde:hover { border-color: var(--kv-lavanda); color: var(--kv-tinta); }

.boton--texto { color: var(--kv-tinta-suave); padding-inline: var(--esp-3); }
.boton--texto:hover { color: var(--kv-tinta); }

.boton--grande { min-height: 56px; padding: var(--esp-4) var(--esp-7); font-size: var(--txt-base); }
.boton--bloque { width: 100%; }

.boton:disabled { opacity: .65; cursor: progress; transform: none; }

/* Indicador de envío: gira dentro del botón mientras se manda el formulario */
.boton__indicador {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: boton-giro calc(var(--mov-lento) * 1.6) linear infinite;
}
@keyframes boton-giro { to { transform: rotate(1turn); } }