/* ============================================================
   custom_css.css — Estilos personalizados da Landing Page
   Personal Trainer
   ============================================================ */

/* Scroll Reveal
   Usado em conjunto com IntersectionObserver em js/custom.js
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Background Images
   ============================================================ */

/* Hero Section
   ---------------------------------------------------------- */
.hero-bg {
  background-image: url("../images/hero/lp_personal_v1.png");
  background-size: cover;
  background-position: 70% center; /* athlete on right side stays visible */
  background-repeat: no-repeat;
  min-height: 600px;
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-bg {
    background-position: 65% center;
    min-height: 540px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .hero-bg {
    background-position: 75% top;
    min-height: 480px;
  }
}

/* Parceria / Nutricionismo Section
   ---------------------------------------------------------- */
.parceria-bg {
  background-image: url("../images/parceria_nutricionismo/lp_personal_v2.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 220px; /* ensures image shows even when content is short */
}

/* Tablet */
@media (max-width: 1024px) {
  .parceria-bg {
    background-position: center center;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .parceria-bg {
    background-position: center 30%;
    min-height: 260px; /* taller on mobile so image breathes */
  }
}

/* CTA Final Section
   ---------------------------------------------------------- */
.cta-bg {
  background-image: url("../images/cta/lp_personal_v3.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 520px;
}

/* Tablet */
@media (max-width: 1024px) {
  .cta-bg {
    background-position: center center;
    min-height: 480px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .cta-bg {
    background-position: center top;
    min-height: 440px;
  }
}