/* ==========================================================================
   BOTONES — .btn y sus variantes (primario, ghost, WhatsApp, bloque)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.7rem;
  font-family: var(--f-display);
  font-size: .86rem; font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--radio);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
  text-align: center;
  max-width: 100%;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primario {
  background: var(--primario);
  color: #fff;
  box-shadow: var(--sombra);
}
.btn--primario:hover { background: var(--primario-osc); transform: translateY(-2px); box-shadow: var(--sombra-alta); }

.btn--ghost {
  border: 1.5px solid var(--linea);
  color: var(--tinta);
  background: var(--blanco);
}
.btn--ghost:hover { border-color: var(--primario); color: var(--primario); }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-osc); transform: translateY(-2px); box-shadow: var(--sombra-alta); }

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