.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.btn:focus-visible {
  outline: 3px solid var(--co);
  outline-offset: 3px;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Variantes ─────────── */
.btn--primary { background: var(--co); color: #fff; border-color: var(--co); }
.btn--primary:hover:not(:disabled) { background: var(--cod); border-color: var(--cod); }

.btn--gold { background: var(--cg); color: var(--cgd); border-color: var(--cg); }
.btn--gold:hover:not(:disabled) { background: var(--cgd); color: #fff; border-color: var(--cgd); }

.btn--outline { background: transparent; color: var(--gray-700); border-color: var(--gray-300); }
.btn--outline:hover:not(:disabled) { border-color: var(--co); color: var(--co); }

.btn--ghost { background: transparent; color: var(--co); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--col); }

.btn--dark { background: var(--cn); color: #fff; border-color: var(--cn); }
.btn--dark:hover:not(:disabled) { background: #0f1c2e; border-color: #0f1c2e; }

.btn--danger { background: transparent; color: #c0392b; border-color: #e57373; }
.btn--danger:hover:not(:disabled) { background: #fdf2f2; border-color: #c0392b; }

/* ─── Tamaños ───────────── */
.btn--sm  { padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
.btn--lg  { padding: var(--sp-4) var(--sp-8); font-size: var(--text-lg); }
.btn--xl  { padding: var(--sp-5) var(--sp-10); font-size: var(--text-xl); }
.btn--block { width: 100%; }