.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Fundo global leve e suave */
html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  min-height: 100%;
  background: linear-gradient(120deg, #ffe6f0 0%, #ffd1ec 25%, #ff80c0 55%, #80f7f2 85%);
  background-size: 200% 200%;
  animation: gpt5-lightmove 20s ease infinite; /* mais lento e suave */
  background-attachment: fixed;
  color: #222; /* texto escuro para contraste */
}

/* Animação bem leve */
@keyframes gpt5-lightmove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Acessibilidade: sem animação se usuário preferir */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}
.chapter-columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.chapter-columns > div {
  width: 100%;
}

.chapter-columns iframe {
  border-radius: 8px;
  width: 100%;
  height: 300px;
}

@media (min-width: 768px) {
  .chapter-columns {
    flex-direction: row;
    justify-content: space-between;
  }
  .chapter-columns > div {
    width: 48%;
  }
}
<!-- FONTES E ESTILOS -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
  .quiz-container {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    max-width: 700px;
    margin: 40px auto;
    padding: 30px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
  }
  .quiz-step {
    display: none;
  }
  .quiz-step.active {
    display: block;
  }
  .quiz-title {
    font-size: 1.4rem;
    margin-bottom: 25px;
    color: #333;
  }
  .quiz-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
  }
  .quiz-button {
    background: linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 45px;
    margin: 12px 0;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s ease;
    display: inline-block;
    min-width: 180px;
    font-weight: 600;
    user-select: none;
  }
  .quiz-button:hover {
    opacity: 0.9;
  }
  input[type="text"], input[type="email"] {
    padding: 14px 16px;
    font-size: 1rem;
    width: 80%;
    max-width: 360px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 25px;
    font-weight: 400;
    box-sizing: border-box;
  }
  .final-message {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2d3436;
    margin-top: 40px;
    line-height: 1.4;
  }
  .progress-wrapper {
    width: 100%;
    margin-bottom: 20px;
    display: none;
  }
  .progress-text {
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #000;
    margin-bottom: 6px;
  }
  .progress-bar-wrapper {
    width: 100%;
    height: 18px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
  }
  .progress-bar {
    height: 100%;
    width: 0%;
    background-color: #25D366;
    transition: width 0.4s ease;
    border-radius: 12px;
  }
  .green {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
  }
  .chapter-toggle {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .chapter-content {
    display: none;
    padding: 15px 20px;
    background: #f8f8f8;
    border-left: 4px solid #28a745;
    margin-bottom: 25px;
    border-radius: 6px;
  }
</style>

<!-- HTML DO QUIZ -->
<div class="quiz-container">
  <div class="progress-wrapper" id="progress-wrapper">
    <div class="progress-text" id="progress-text">0%</div>
    <div class="progress-bar-wrapper">
      <div class="progress-bar" id="progress-bar"></div>
    </div>
  </div>

  <!-- Passo 0 -->
  <section class="quiz-step active" id="step-0">
    <h2 class="quiz-title">Vamos conversar... Me fala um pouco sobre você!</h2>
    <input type="text" id="user-name" placeholder="Seu primeiro nome" required>
    <br>
    <input type="email" id="user-email" placeholder="Seu e-mail" required>
    <br>
    <button class="quiz-button" onclick="startQuiz()">Começar</button>
  </section>

  <!-- Container para perguntas -->
  <div id="quiz-steps"></div>

  <!-- Passo final -->
  <section class="quiz-step" id="step-final">
    <p class="final-message">Obrigado! Suas respostas vão me ajudar a criar mais conteúdo relevante para você.</p>
    <button class="quiz-button green" onclick="mostrarCapitulos()">📘 Acesse o eBook</button>
  </section>

  <!-- Capítulos -->
  <div id="capitulos-container" style="display: none; margin-top: 40px;"></div>
</div>

<!-- SCRIPT -->
<script>
  const questions = [
    {
      img: 'https://via.placeholder.com/600x200?text=1',
      title: 'Como você se sente ao acordar?',
      options: ['Motivado(a)', 'Cansado(a)', 'Ansioso(a)']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=2',
      title: 'Você pratica exercícios com que frequência?',
      options: ['Todos os dias', '2 a 3 vezes/semana', 'Nunca']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=3',
      title: 'Como está sua alimentação?',
      options: ['Equilibrada', 'Desorganizada', 'Não penso nisso']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=4',
      title: 'Quanto tempo você dedica a si mesmo(a)?',
      options: ['Mais de 1h/dia', '30min', 'Quase nada']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=5',
      title: 'Você se considera uma pessoa focada?',
      options: ['Muito focado(a)', 'Mais ou menos', 'Nada focado(a)']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=6',
      title: 'Qual sua maior distração?',
      options: ['Redes sociais', 'TV/séries', 'Preocupações']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=7',
      title: 'O que mais te atrapalha no dia a dia?',
      options: ['Falta de tempo', 'Desorganização', 'Procrastinação']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=8',
      title: 'Você se sente bem com sua rotina?',
      options: ['Sim, bastante', 'Mais ou menos', 'Nada satisfeito(a)']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=9',
      title: 'Qual sua prioridade hoje?',
      options: ['Saúde física', 'Bem-estar mental', 'Ambos']
    },
    {
      img: 'https://via.placeholder.com/600x200?text=10',
      title: 'O que te motiva a continuar?',
      options: ['Meu propósito', 'Minha família', 'Quero me transformar']
    }
  ];

  const capitulos = [
    {
      titulo: "Capítulo 1: Mentalidade de Crescimento",
      video: "https://www.youtube.com/embed/ID1",
      planilha: "https://docs.google.com/spreadsheets/d/LINK1/export?format=xlsx"
    },
    {
      titulo: "Capítulo 2: Hábitos Saudáveis",
      video: "https://www.youtube.com/embed/ID2",
      planilha: "https://docs.google.com/spreadsheets/d/LINK2/export?format=xlsx"
    },
    {
      titulo: "Capítulo 3: Autodisciplina",
      video: "https://www.youtube.com/embed/ID3",
      planilha: "https://docs.google.com/spreadsheets/d/LINK3/export?format=xlsx"
    },
    {
      titulo: "Capítulo 4: Metas Inteligentes",
      video: "https://www.youtube.com/embed/ID4",
      planilha: "https://docs.google.com/spreadsheets/d/LINK4/export?format=xlsx"
    },
    {
      titulo: "Capítulo 5: Alimentação e Energia",
      video: "https://www.youtube.com/embed/ID5",
      planilha: "https://docs.google.com/spreadsheets/d/LINK5/export?format=xlsx"
    },
    {
      titulo: "Capítulo 6: Sono e Recuperação",
      video: "https://www.youtube.com/embed/ID6",
      planilha: "https://docs.google.com/spreadsheets/d/LINK6/export?format=xlsx"
    },
    {
      titulo: "Capítulo 7: Rotina Produtiva",
      video: "https://www.youtube.com/embed/ID7",
      planilha: "https://docs.google.com/spreadsheets/d/LINK7/export?format=xlsx"
    },
    {
      titulo: "Capítulo 8: Mentalidade Positiva",
      video: "https://www.youtube.com/embed/ID8",
      planilha: "https://docs.google.com/spreadsheets/d/LINK8/export?format=xlsx"
    },
    {
      titulo: "Capítulo 9: Foco e Clareza",
      video: "https://www.youtube.com/embed/ID9",
      planilha: "https://docs.google.com/spreadsheets/d/LINK9/export?format=xlsx"
    },
    {
      titulo: "Capítulo 10: Compromisso com Resultados",
      video: "https://www.youtube.com/embed/ID10",
      planilha: "https://docs.google.com/spreadsheets/d/LINK10/export?format=xlsx"
    }
  ];

  let userResponses = [];
  let userName = '';

  function startQuiz() {
    const name = document.getElementById('user-name').value.trim();
    const email = document.getElementById('user-email').value.trim();
    if (!name || !email) return alert('Preencha seu nome e e-mail.');
    userName = name;
    userResponses = [{ nome: name, email: email }]; // Reset array ao iniciar quiz
    generateQuestions();
    goToStep(1);
    showProgressBar();
    updateProgress(1);
  }

  function generateQuestions() {
    const quizSteps = document.getElementById('quiz-steps');
    quizSteps.innerHTML = '';
    questions.forEach((q, i) => {
      const step = document.createElement('section');
      step.className = 'quiz-step';
      step.id = 'step-' + (i + 1);
      step.innerHTML = `
        <img src="${q.img}" class="quiz-img" alt="Imagem ${i + 1}">
        <h3 class="quiz-title">${userName}, ${q.title}</h3>
        ${q.options.map(opt => `<button class="quiz-button" onclick="saveAnswer(${i}, '${opt.replace(/'/g,"\\'")}')">${opt}</button>`).join('')}
      `;
      quizSteps.appendChild(step);
    });
  }

  function goToStep(step) {
    document.querySelectorAll('.quiz-step').forEach(el => el.classList.remove('active'));
    document.getElementById('step-' + step)?.classList.add('active');
  }

  function saveAnswer(index, answer) {
    userResponses.push({ pergunta: questions[index].title, resposta: answer });
    const nextStep = index + 2;
    if (nextStep <= questions.length) {
      goToStep(nextStep);
      updateProgress(nextStep);
    } else {
      finishQuiz();
    }
  }

  function updateProgress(step) {
    const percent = Math.min(100, Math.round((step / questions.length) * 100));
    document.getElementById('progress-bar').style.width = percent + '%';
    document.getElementById('progress-text').textContent = percent + '%';
  }

  function showProgressBar() {
    document.getElementById('progress-wrapper').style.display = 'block';
  }

  function finishQuiz() {
    goToStep('final');
    updateProgress(questions.length);
    console.log("Respostas:", userResponses);
  }

  function mostrarCapitulos() {
    const container = document.getElementById('capitulos-container');
    container.style.display = 'block';
    container.innerHTML = '';
    capitulos.forEach((cap, i) => {
      const btn = document.createElement('button');
      btn.className = 'chapter-toggle';
      btn.textContent = cap.titulo;
      btn.onclick = () => toggleCapitulo(i);
      const content = document.createElement('div');
      content.className = 'chapter-content';
      content.id = 'chapter-' + i;
      content.innerHTML = `
        <p><strong>📊 Planilha:</strong> <a href="${cap.planilha}" target="_blank" download>Clique aqui para baixar</a></p>
        <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
          <iframe src="${cap.video}" frameborder="0" allowfullscreen style="position:absolute;width:100%;height:100%;top:0;left:0;"></iframe>
        </div>
      `;
      container.appendChild(btn);
      container.appendChild(content);
    });
  }

  function toggleCapitulo(index) {
    document.querySelectorAll('.chapter-content').forEach(el => el.style.display = 'none');
    const el = document.getElementById('chapter-' + index);
    el.style.display = 'block';
  }
</script>/* End custom CSS */