.elementor-kit-8{--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-8 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);}@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 */<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Capilar Interativo</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .quiz-container {
            background-color: #15819;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            padding: 20px;
            box-sizing: border-box;
        }

        h2 {
            text-align: center;
            color: #333;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .question {
            display: none;
            margin-bottom: 20px;
        }

        .question.active {
            display: block;
        }

        label {
            display: block;
            margin: 10px 0;
            font-size: 16px;
            cursor: pointer;
        }

        input[type="radio"], input[type="checkbox"] {
            margin-right: 10px;
        }

        button {
            background-color: #ff5722;
            color: #fff;
            border: none;
            padding: 15px 25px;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            display: none;
        }

        button:hover {
            background-color: #e64a19;
        }

        .footer {
            text-align: center;
            font-size: 14px;
            margin-top: 20px;
            color: #777;
        }
    </style>
</head>
<body>

<div class="quiz-container">
    <h2>Quiz de Queda de Cabelo</h2>

    <form id="quizForm">
        <!-- Perguntas -->
        <div class="question active">
            <label>Qual é a sua faixa de idade?</label>
            <label><input type="radio" name="idade" value="18-22"> 18–22</label>
            <label><input type="radio" name="idade" value="23-29"> 23–29</label>
            <label><input type="radio" name="idade" value="30-39"> 30–39</label>
            <label><input type="radio" name="idade" value="40-50"> 40–50</label>
            <label><input type="radio" name="idade" value="50+"> 50+</label>
        </div>

        <div class="question">
            <label>Você já notou mais fios de cabelo caindo no banho, travesseiro ou roupas?</label>
            <label><input type="radio" name="queda1" value="Sim"> Sim</label>
            <label><input type="radio" name="queda1" value="Um pouco"> Um pouco</label>
            <label><input type="radio" name="queda1" value="Não"> Não</label>
            <label><input type="radio" name="queda1" value="Nem tanto"> Nem tanto</label>
        </div>

        <!-- Mais perguntas aqui -->

        <button type="submit">Enviar Quiz</button>
    </form>

    <div class="footer">
        <p>© 2025 Protocolo Anticalvíce 30D</p>
    </div>
</div>

<script>
    const questions = document.querySelectorAll('.question');
    let current = 0;

    questions.forEach(q => {
        const inputs = q.querySelectorAll('input[type="radio"], input[type="checkbox"]');
        inputs.forEach(input => {
            input.addEventListener('change', () => {
                if (current < questions.length - 1) {
                    questions[current].classList.remove('active');
                    current++;
                    questions[current].classList.add('active');
                } else {
                    document.querySelector('button[type="submit"]').style.display = 'block';
                }
            });
        });
    });

    document.getElementById('quizForm').addEventListener('submit', function(e) {
        e.preventDefault();
        alert("Quiz enviado! Obrigado por responder.");
    });
</script>

</body>
</html>/* End custom CSS */