/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-hover-bg: var(--bg);
  --btn-hover-fg: var(--fg);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--fg);
  border-radius: var(--r-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  background: var(--btn-hover-bg);
  clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%);
  transition: clip-path var(--t-med) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { color: var(--btn-hover-fg); }
  .btn:hover::before { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
}
.btn:focus-visible { color: var(--btn-hover-fg); }
.btn:focus-visible::before { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
.btn:active { transform: scale(0.97); }
.btn > span, .btn > svg { position: relative; }

.btn-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-hover-bg: var(--fg);
  --btn-hover-fg: var(--bg);
  border-color: var(--fg);
}
.btn-invert { /* em fundos escuros o primário já inverte; alias explícito */ }
.btn-sm { min-height: 44px; padding: 0 16px; }
.btn-lg { min-height: 56px; padding: 0 24px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }


.btn .arrow { flex: none; transition: transform var(--t-fast) var(--ease-out); }
.btn:is(:hover, :focus-visible) .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn .arrow { transition: none; }
  .btn:active, .btn:is(:hover, :focus-visible) .arrow { transform: none; }
}