/* =============================================================
   BOTÕES
   Decisão do cliente: botão chapado, sem gradiente nem brilho.
   O laranja é reservado para ação (orçamento/pedido); azul para
   navegação secundária; ghost/outline para fundo escuro/claro.
   ============================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: .98rem;
  padding: .82rem 1.55rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn svg { width: 18px; height: 18px; }
.btn--lg { padding: .92rem 1.8rem; font-size: 1rem; }

.btn--cta { background: var(--c-orange); color: #fff; }
.btn--cta:hover { background: var(--c-orange-dark); transform: translateY(-2px); }

.btn--primary { background: var(--c-blue-600); color: #fff; }
.btn--primary:hover { background: var(--c-blue-700); transform: translateY(-2px); }

.btn--ghost {
  background: rgba(255,255,255,.10); color: #fff;
  border: 1.5px solid rgba(255,255,255,.38);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.20); transform: translateY(-2px); }

.btn--outline { background: rgba(255,255,255,.9); color: var(--c-blue-700); border: 1.5px solid var(--c-blue-200); }
.btn--outline:hover { border-color: var(--c-blue-400); transform: translateY(-2px); }

/* CTA que leva pro WhatsApp: laranja chapado, SEM o verde e SEM o ícone —
   o cliente achava que ficava "cara de propaganda". O balão flutuante
   (.wa-float, no rodapé) continua verde de propósito: ali o verde é o
   símbolo que todo mundo reconhece. */
.btn--wa { background: var(--c-orange); color: #fff; }
.btn--wa:hover { background: var(--c-orange-dark); transform: translateY(-2px); }
.btn--wa svg { display: none; }