/* ============================================================
   BOTÕES — .btn, .btn--primary, .btn--ghost, .btn--wa, .link-arrow
   Pílula (--radius-pill, docs/21 P2), seta à direita.
   Marcação:
   <a class="btn btn--primary" href="#">Texto
     <svg class="icon btn__arrow" aria-hidden="true">…</svg></a>
============================================================ */
/* docs/21 P2 + docs/22 L2: todo .btn em pílula (--radius-pill).
   Hover: sobe 1px + sombra suave + preenchimento entrando da esquerda
   (::before scaleX 0→1) + seta 4px; ao sair, recolhe para a direita.
   O preenchimento (--btn-fill) é sempre a cor do próprio botão aprofundada
   (nunca outra cor). Active: scale(.98). Só transform/box-shadow animam
   (mais a cor do texto, 200 ms). */
.btn {
  --btn-fill: var(--btn-dark-bg-hover);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem; /* 15px — spec docs/02 */
  line-height: 1.2;
  text-align: center;
  text-wrap: balance; /* em telas estreitas o rótulo quebra em vez de vazar */
  max-width: 100%;
  transition:
    transform var(--dur-btn) var(--ease-btn),
    box-shadow var(--dur-btn) var(--ease-btn),
    color var(--dur-color) var(--ease-btn);
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1px; /* cobre também a borda: sem anel da cor normal no hover */
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right; /* saída: recolhe para a direita */
  transition: transform var(--dur-btn) var(--ease-btn);
}
/* Só com mouse: no toque o :hover fica "grudado" depois do tap e mexia na
   geometria dos botões (docs/23 MB5, ex.: "Peça um orçamento" na pílula) */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn); }
  .btn:hover::before { transform: scaleX(1); transform-origin: left; /* entrada: da esquerda */ }
}
.btn .icon { transition: color var(--dur-color) var(--ease-btn); }
.btn:active { transform: scale(.98); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn__arrow { transition: transform var(--dur-btn) var(--ease-btn); }
@media (hover: hover) {
  .btn:hover .btn__arrow { transform: translateX(4px); }
}
.btn:focus-visible .btn__arrow { transform: translateX(4px); }
/* docs/25 M13: no toque o hover vira feedback de :active — scale(.98) (acima)
   + o preenchimento entra rápido, na cor do próprio botão */
@media (hover: none) {
  .btn:active::before { transform: scaleX(1); transform-origin: left; transition-duration: 120ms; }
  .btn--ghost:active { color: var(--color-bg); }
  .section--dark .btn--ghost:active { color: var(--color-ink); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sem deslocamentos: só a cor muda (o preenchimento entra direto) */
  .btn:hover,
  .btn:active { transform: none; }
  .btn::before { transition: none; }
  .btn:hover .btn__arrow,
  .btn:focus-visible .btn__arrow { transform: none; }
}

/* Preto (sólido): preto suave → preto 100% */
.btn--primary,
.btn--wa {
  --btn-fill: var(--btn-dark-bg-hover);
  background: var(--btn-dark-bg);
  border-color: var(--btn-dark-bg);
  color: var(--color-on-dark);
}

/* Marrom (sólido): marrom claro → marrom escuro; texto mantém a tinta */
.btn--brown {
  --btn-fill: var(--btn-brown-bg-hover);
  background: var(--btn-brown-bg);
  border-color: var(--btn-brown-bg);
  color: var(--color-ink);
}

/* Contorno: hover preenche na cor da borda e o texto inverte para a cor do fundo */
.btn--ghost {
  --btn-fill: var(--color-ink);
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
@media (hover: hover) { .btn--ghost:hover { color: var(--color-bg); } }

/* WhatsApp: igual ao primário, ícone monocromático à esquerda (sem verde) */
.btn--wa .btn__wa-icon { order: -1; }

/* Variações em fundo escuro */
.section--dark .btn--primary,
.section--dark .btn--wa,
.btn--light {
  /* Claro: creme → creme aprofundado (antes entrava o marrom claro) */
  --btn-fill: var(--btn-light-bg-hover);
  background: var(--btn-light-bg);
  border-color: var(--btn-light-bg);
  color: var(--color-ink);
}
.section--dark .btn--ghost {
  --btn-fill: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}
@media (hover: hover) { .section--dark .btn--ghost:hover {
  color: var(--color-ink);
} }

/* Rótulo curto no celular (docs/23 MB1): em pílula, 2 linhas pesam.
   O rótulo longo continua no desktop e no aria-label do link. */
.btn__label-short { display: none; }
@media (max-width: 479px) {
  .btn:has(.btn__label-short) { white-space: nowrap; }
  .btn__label { display: none; }
  .btn__label-short { display: inline; }
}

/* Compacto (header) */
.btn--sm {
  min-height: var(--tap-min); /* ≥ 44px (docs/19 M4, docs/21 P2) */
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
}

/* Só ícone (header mobile) */
.btn--icon {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-3);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* docs/25 M1: no celular, um botão só (a ação principal, de largura total);
   o contorno ao lado sai (hero, CTA final, sucesso do orçamento) */
@media (max-width: 767.98px) {
  .btn-row { justify-self: stretch; width: 100%; }
  .btn-row > .btn--ghost { display: none; }
  .btn-row > .btn--wa { width: 100%; justify-content: center; }
}

/* ---------- Link com seta ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  /* Área de toque ≥ --tap-min sem mudar o visual: padding vertical e sublinhado
     preso ao texto (background no content-box) — docs/19 M4 */
  padding-block: max(2px, calc((var(--tap-min) - 1lh) / 2));
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-origin: content-box;
  background-position: 0 calc(100% + 2px);
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease);
}
.link-arrow:hover,
.link-arrow:focus-visible { background-size: 100% 1px; }
.link-arrow .icon { transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }