/* Movimento discreto da /familias: pensado primeiro para o celular.
   Só opacity e transform. Os elementos só ficam escondidos depois que js/movimento.js
   marca o <html> com .mv-on (sem JS ou com "reduzir movimento", tudo aparece normal). */
:root {
  --mv-curva: cubic-bezier(0.22, 1, 0.36, 1);
}
.mv-on .mv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--mv-curva),
    transform 0.5s var(--mv-curva);
  transition-delay: calc(var(--mv-i, 0) * 70ms);
}
.mv-on .mv.mv-vis {
  opacity: 1;
  transform: none;
}
/* Depois de aparecer, devolve o controle da transição ao próprio elemento (hover etc.). */
.mv-on .mv.mv-fim {
  transition-delay: 0s;
}

/* Toque: botões afundam um pouco ao pressionar (sensação de resposta imediata). */
.btn-primary,
.btn-outline,
.btn-submit,
.btn-card-acao,
.nv-btn-todas {
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active,
.btn-outline:active,
.btn-submit:active,
.btn-card-acao:active,
.nv-btn-todas:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* No celular o :hover "gruda" depois do toque; só levanta com mouse de verdade. */
@media (hover: none) {
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-card-acao:hover {
    transform: none;
  }
  .btn-submit:hover {
    transform: none;
    background-color: var(--lilas);
  }
}

/* Foto com zoom bem lento só no mouse. */
.como-funciona-img img {
  transition: transform 1.2s var(--mv-curva);
}
@media (hover: hover) {
  .como-funciona-img:hover img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-on .mv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* WhatsApp flutuante discreto: só aparece depois de rolar e sai do caminho do formulário e do rodapé.
   js/movimento.js liga .mv-wpp no <html>; sem JS o botão fica como sempre foi. */
.mv-wpp .btn-wpp {
  width: 54px;
  height: 54px;
  font-size: 28px;
  border-radius: 18px;
  bottom: 20px;
  right: 16px;
  animation: none;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s var(--mv-curva);
}
.mv-wpp .btn-wpp.mv-wpp-vis {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mv-wpp .btn-wpp:active {
  transform: scale(0.94);
}
@media (hover: hover) {
  .mv-wpp .btn-wpp.mv-wpp-vis:hover {
    transform: scale(1.08);
  }
}