/* Botões laranja: ao passar o rato, uma cor entra pela direita, desliza para a esquerda e preenche o botão;
   ao tirar o rato, continua para a esquerda e sai (nunca volta para trás). fx.js põe as classes .fx-in / .fx-out.
   Azul por defeito; em fundo azul (faixa final) fica amarelo. */
.btn, a.cta:not(.alt), .offer-btn { position: relative; isolation: isolate; overflow: hidden; --fx: #001F5B; --fx-ink: #fff; }
.btn::before, a.cta:not(.alt)::before, .offer-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fx);
  transform: translateX(101%);
}

/* a cor do botão fica quieta (só o preenchimento muda) */
.btn:hover { background: var(--orange); }
a.cta:not(.alt):hover { filter: none; }
.btn.fx-in, a.cta:not(.alt).fx-in, .offer-btn.fx-in { color: var(--fx-ink); }

/* fundo azul: preenche com amarelo e o texto passa a azul */
section.cta .btn, .final a.cta { --fx: #F7C84B; --fx-ink: #001F5B; }