/**
 * V5.3-MASTER-FIX.CSS
 * Correções definitivas — gerado após diagnóstico profundo
 *
 * PROBLEMAS RESOLVIDOS:
 * 1. 3 scrollbars: sticky + overflow-y:auto criavam contextos de scroll independentes
 * 2. Site "mexendo sozinho": parallax JS sem controle + will-change em excesso
 * 3. Contraste: especificidade insuficiente contra legibility-final.css
 * 4. Vídeo: garantir que o iframe seja o único elemento de vídeo
 */

/* ============================================================
   1. RESET GLOBAL DE SCROLL — UMA ÚNICA SCROLLBAR
   ============================================================ */

/* Apenas html/body controlam o scroll da página */
html {
  overflow: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  height: auto;
}

body {
  overflow: visible;
  overflow-x: hidden;
  min-height: 100%;
  height: auto;
}

/* Remover overflow-y: auto do body que cria scrollbar extra */
body,
html {
  /* Garantir que não haja overflow-y: auto/scroll no nível raiz */
  overflow-y: visible !important;
}

/* Exceção: body pode ter scroll, mas apenas 1 scrollbar */
body {
  overflow-y: auto !important;
}

/* ============================================================
   2. URGENCY BANNER — POSIÇÃO ESTÁTICA (sem sticky)
   ============================================================ */

/* sticky dentro de body com overflow cria scrollbar própria.
   Usar position:relative/static para evitar isso. */
#urgency-banner,
.urgency-banner {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
}

/* ============================================================
   3. HEADER — STICKY SEM CRIAR SCROLLBAR EXTRA
   ============================================================ */

/* O header pode ser sticky, mas precisa estar no fluxo normal do documento.
   Remover margin-top que cria espaço fantasma. */
.header {
  position: sticky !important;
  top: 0 !important;
  margin-top: 0 !important;
  z-index: 999 !important;
  overflow: visible !important;
}

/* ============================================================
   4. SEÇÕES — SEM overflow:hidden (causa scroll travado)
   ============================================================ */

.section {
  overflow: visible !important;
  overflow-x: clip !important; /* clip não cria contexto de scroll */
}

/* Manter hidden apenas onde necessário para clips visuais */
.hero {
  overflow: hidden !important;
}

.transformation-card,
.testimonial-card,
.form-progress,
.progress-bar-container {
  overflow: hidden !important;
}

/* ============================================================
   5. PARALLAX — DESATIVAR COMPLETAMENTE
   ============================================================ */

/* O parallax JS causa o "site se mexendo sozinho".
   Desativar via CSS garante que o JS não consiga aplicar transform. */
[data-parallax],
.parallax-bg {
  transform: none !important;
  will-change: auto !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ============================================================
   6. CONTRASTE — ESPECIFICIDADE MÁXIMA (supera legibility-final)
   ============================================================ */

/* Seção "A Transformação que deu origem ao Método" */
body .section-video .section-title,
body .section-video .section-text,
body .section-video h2,
body .section-video p,
body .video-section-header h2,
body .video-section-header p,
body .video-section-header .section-title {
  color: #1a1a1a !important;
}

/* Seção "Conheça a Dra. Lari Falchi Reis" */
body .section-about .section-title,
body .section-about h2,
body .section-about p,
body .section-about .about-credentials,
body .about-text h2,
body .about-text p,
body .about-credentials {
  color: #1a1a1a !important;
}

/* Seção "Como funciona a avaliação" */
body .section-how-it-works .section-title,
body .section-how-it-works h2,
body .section-how-it-works p,
body .section-how-it-works .how-step-title,
body .section-how-it-works .how-step-text,
body .section-how-it-works .how-step-number,
body .how-step-title,
body .how-step-text,
body .how-step-number {
  color: #1a1a1a !important;
}

/* Seção "O que está incluso" */
body .section-incluso .section-title,
body .section-incluso h2,
body .section-incluso h3,
body .section-incluso p,
body .incluso-card h3,
body .incluso-card p,
body .incluso-card-title,
body .incluso-card-text {
  color: #1a1a1a !important;
}

/* Tela final (popup qualificado) */
body .section-final .final-title,
body .section-final .final-text,
body .section-final h2,
body .section-final p,
body #final .final-title,
body #final .final-text,
body #final h2,
body #final p {
  color: #1a1a1a !important;
}

/* ============================================================
   7. FORMULÁRIO MOBILE — COMPACTO E SEM OVERFLOW
   ============================================================ */

@media (max-width: 768px) {
  .section-form {
    padding: 1.5rem 0 !important;
  }

  .section-form .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .form-progressive {
    padding: 1.25rem 1rem !important;
    margin: 0 !important;
    border-radius: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-intro {
    margin-bottom: 1rem !important;
  }

  .form-intro .section-title {
    font-size: 1.2rem !important;
    margin-bottom: 0.4rem !important;
  }

  .form-intro .section-text {
    font-size: 0.875rem !important;
    margin-bottom: 0 !important;
  }

  .form-step-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.6rem !important;
    line-height: 1.35 !important;
  }

  .form-step-intro {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
  }

  .form-option,
  .form-checkbox {
    padding: 0.65rem 0.875rem !important;
    min-height: 44px !important;
  }

  .form-options,
  .form-checkboxes {
    gap: 0.45rem !important;
  }

  .form-navigation {
    margin-top: 0.875rem !important;
    gap: 0.5rem !important;
  }

  #btn-next,
  #btn-prev {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  .form-progress {
    margin-bottom: 0.875rem !important;
  }

  .form-steps-dots {
    margin-bottom: 0.6rem !important;
  }
}

@media (max-width: 390px) {
  .form-progressive {
    padding: 1rem 0.75rem !important;
  }

  .form-step-title {
    font-size: 0.975rem !important;
  }
}

/* ============================================================
   8. MOBILE CTA FIXO — SEM CRIAR SCROLLBAR
   ============================================================ */

.mobile-cta-fixed {
  /* position:fixed não cria scrollbar, mas precisa de overflow:hidden no pai */
  overflow: hidden !important;
}

/* ============================================================
   9. IMAGENS E IFRAMES — SEM OVERFLOW HORIZONTAL
   ============================================================ */

img,
iframe,
video {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   10. CORREÇÃO DO CURSOR CUSTOMIZADO (não deve causar overflow)
   ============================================================ */

#custom-cursor {
  pointer-events: none !important;
  overflow: hidden !important;
}