/* Botones con esquina cortada (no píldoras). */
.btn {
  --cut: 12px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 30px; border: 0; cursor: pointer; clip-path: var(--chamfer);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1.05rem; line-height: 1;
  transition: background .3s, color .3s, filter .3s;
}
.btn--lg { padding: 19px 36px; font-size: 1.15rem; }
.btn--sm { padding: 11px 20px; font-size: .95rem; --cut: 9px; }
.btn--gold { background: var(--gold-solid); color: #140f03; }
.btn--gold:hover { background: var(--gold-hi); color: #140f03; }
.btn--dark { background: var(--black); color: var(--gold-hi); }
.btn--dark:hover { background: #1c180f; color: #fff; }
/* Contorno: el borde se dibuja con un marco interior recortado igual. */
.btn--ghost { background: var(--gold-lo); color: var(--gold-hi); }
.btn--ghost::before { content: ''; position: absolute; inset: 1.5px; background: var(--black); clip-path: var(--chamfer); transition: background .3s; z-index: 0; }
.btn--ghost > * { position: relative; z-index: 1; }
.btn--ghost:hover { background: var(--gold); color: var(--gold-hi); }
.btn--ghost:hover::before { background: #17130a; }
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn[data-magnetic] { transition: background .3s, color .3s; }