/* buttons.css */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 20px; /* Unificado */
  border-radius: var(--radius-sm); /* Consistente con tus tokens */
  cursor: pointer;
  font-weight: 200;
  line-height: 1;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
  text-decoration: none;
}

.btn:hover {
  background: var(--surface-2);
  border-color: var(--muted);
  color: var(--text);
  text-decoration: none;
}

/* Botón principal: esmeralda */
.btn--primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #09090D !important;
}

.btn--primary:hover {
  background: var(--primary) !important;
  opacity: .88;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Botón externo: ámbar — para links a sitios oficiales externos */
.btn--external {
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .4);
  color: #FBD040;
}

.btn--external:hover {
  background: rgba(251, 191, 36, .22);
  border-color: rgba(251, 191, 36, .7);
  color: #FBD040;
}