/* ============================================
   INTERACOES.CSS — micro-interações aditivas
   Template Academia (cartão de plano)
   Não muda cores, fontes nem estrutura — só
   comportamento no hover e no scroll.
   ============================================ */

/* Transição suave em botões e no cartão de plano */
a, button, .btn, .btn-cta, .btn-whatsapp, .btn-add-item, input[type="submit"],
.cartao-plano, .cartao-plano-foto, .galeria-item img {
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, background .3s ease;
}

/* Botões: sobe levemente e ganha sombra ao passar o mouse */
button:hover, .btn:hover, .btn-cta:hover, .btn-whatsapp:hover, .btn-add-item:hover,
input[type="submit"]:hover, a.button:hover, a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
}

/* Cartão de plano: sobe e ganha sombra */
.cartao-plano:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(91, 42, 69, 0.24);
}

/* Foto do plano: zoom suave */
.cartao-plano-foto { overflow: hidden; }
.cartao-plano:hover .cartao-plano-foto { transform: scale(1.06); }

/* Galeria: zoom suave */
.galeria-item:hover img {
  transform: scale(1.06);
}

/* Links de texto: sublinhado animado (classe opcional link-anim) */
a.link-anim {
  position: relative;
  text-decoration: none;
}
a.link-anim::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
a.link-anim:hover::after { width: 100%; }

/* Botão flutuante do WhatsApp: pulso leve */
[class*="whatsapp"], [class*="whats-float"], [id*="whatsapp"] {
  transition: transform .3s ease;
}
[class*="whatsapp"]:hover, [class*="whats-float"]:hover, [id*="whatsapp"]:hover {
  transform: scale(1.08);
}

/* Reveal suave ao rolar a página (o JS adiciona a classe "visible") */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-on-scroll.visible {
  opacity: 1;
  transform: none;
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}