/* ================================================
   PERF.CSS — Otimizações de Performance (mobile-first)
   Não altera design, apenas melhora velocidade
   ================================================ */

/* ── content-visibility: auto nas seções abaixo da dobra
   Reduz work de renderização inicial; browser renderiza
   só o que está visível (≈ 30-50% faster paint)        */
.certified-students,
.objections,
.members-area,
.nail-types,
.revenue,
.teacher,
.social-proof,
.guarantee-section,
.faq,
.final-cta,
footer {
  content-visibility: auto;
  /* contain-intrinsic-size: estimativa da altura para evitar saltos */
  contain-intrinsic-size: auto 400px;
}

/* ── Previne CLS preservando proporções sem quebrar imagens de altura fixa */
img:not(.type-card img) {
  height: auto;
}

/* ── Nitidez de renderização em telas de alta densidade (Retina/AMOLED) */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* ── will-change apenas em elementos realmente animados */
.marquee-track {
  will-change: transform;
}

/* ── Swiper pagination: reserva altura fixa para evitar CLS */
.swiper-pagination {
  height: 24px;
}

/* ── Exit popup: renderizado fora da tela até ser chamado */
.exit-popup-overlay:not(.show) {
  display: none !important;
}

/* ── Cursor pointer e touch-action para melhor INP em mobile */
button, [role="button"], .btn, .faq-question {
  cursor: pointer;
  touch-action: manipulation;
}
.swiper {
  touch-action: pan-y;
}

/* ── Animação de scroll via classe CSS (sem inline style = sem CLS/FOUC) */
.anim-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .anim-hidden { opacity: 1; transform: none; transition: none; }
}