Quiz \u2022 Descubra Seu Perfil<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --red: #e50914;\n --red-dim: #8b0000;\n --gold: #c9a84c;\n --bg: #0a0a0f;\n --surface: #111118;\n --surface2: #1a1a24;\n --border: rgba(255,255,255,0.07);\n --text: #f0eee8;\n --muted: #7a7a8c;\n --font-display: 'Bebas Neue', sans-serif;\n --font-body: 'DM Sans', sans-serif;\n }\n\n html, body {\n min-height: 100%;\n background: var(--bg);\n color: var(--text);\n font-family: var(--font-body);\n -webkit-font-smoothing: antialiased;\n }\n\n \/* ── BG EFFECT ── *\/\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 50% -10%, rgba(229,9,20,0.18) 0%, transparent 65%),\n radial-gradient(ellipse 50% 40% at 80% 110%, rgba(201,168,76,0.08) 0%, transparent 60%);\n pointer-events: none;\n z-index: 0;\n }\n\n \/* grain overlay *\/\n body::after {\n content: '';\n position: fixed;\n inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'\/%3E%3C\/svg%3E\");\n background-size: 200px;\n pointer-events: none;\n z-index: 0;\n opacity: 0.5;\n }\n\n \/* ── LAYOUT ── *\/\n .quiz-shell {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 24px 16px;\n }\n\n \/* ── HEADER ── *\/\n .quiz-brand {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 48px;\n animation: fadeDown 0.6s ease both;\n }\n\n .quiz-brand-icon {\n width: 36px;\n height: 36px;\n background: var(--red);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .quiz-brand-icon svg { display: block; }\n\n .quiz-brand-name {\n font-family: var(--font-display);\n font-size: 1.6rem;\n letter-spacing: 0.12em;\n color: var(--text);\n }\n\n .quiz-brand-tag {\n font-size: 0.65rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--muted);\n font-weight: 300;\n }\n\n \/* ── CARD ── *\/\n .quiz-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n width: 100%;\n max-width: 520px;\n overflow: hidden;\n box-shadow:\n 0 0 0 1px rgba(255,255,255,0.03),\n 0 32px 64px rgba(0,0,0,0.6),\n 0 0 80px rgba(229,9,20,0.05);\n }\n\n \/* ── PROGRESS BAR ── *\/\n .quiz-progress-track {\n height: 3px;\n background: var(--surface2);\n position: relative;\n }\n\n .quiz-progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--red-dim), var(--red));\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n }\n\n .quiz-progress-fill::after {\n content: '';\n position: absolute;\n right: 0;\n top: -2px;\n width: 8px;\n height: 8px;\n background: var(--red);\n border-radius: 50%;\n box-shadow: 0 0 8px var(--red);\n }\n\n \/* ── BODY ── *\/\n .quiz-body {\n padding: 40px 40px 36px;\n }\n\n \/* ── STEP META ── *\/\n .quiz-step-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 28px;\n }\n\n .quiz-step-count {\n font-family: var(--font-display);\n font-size: 0.75rem;\n letter-spacing: 0.25em;\n color: var(--red);\n }\n\n .quiz-step-divider {\n width: 24px;\n height: 1px;\n background: var(--border);\n }\n\n .quiz-step-label {\n font-size: 0.7rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--muted);\n font-weight: 300;\n }\n\n \/* ── QUESTION ── *\/\n .quiz-question {\n font-family: var(--font-display);\n font-size: 2rem;\n line-height: 1.1;\n letter-spacing: 0.02em;\n color: var(--text);\n margin-bottom: 32px;\n }\n\n \/* ── OPTIONS ── *\/\n .quiz-options {\n display: grid;\n gap: 10px;\n }\n\n .quiz-options.cols-2 { grid-template-columns: 1fr 1fr; }\n .quiz-options.cols-1 { grid-template-columns: 1fr; }\n\n .quiz-opt {\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px 20px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 12px;\n transition: border-color 0.2s, background 0.2s, transform 0.15s;\n font-family: var(--font-body);\n font-size: 0.95rem;\n font-weight: 400;\n color: var(--text);\n position: relative;\n overflow: hidden;\n }\n\n .quiz-opt::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(229,9,20,0.06) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .quiz-opt:hover { border-color: rgba(229,9,20,0.5); transform: translateY(-1px); }\n .quiz-opt:hover::before { opacity: 1; }\n .quiz-opt:active { transform: translateY(0) scale(0.98); }\n\n .quiz-opt-dot {\n width: 18px;\n height: 18px;\n border: 1.5px solid var(--muted);\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s, background 0.2s;\n }\n\n .quiz-opt:hover .quiz-opt-dot {\n border-color: var(--red);\n background: rgba(229,9,20,0.15);\n }\n\n .quiz-opt-icon {\n font-size: 1.2rem;\n flex-shrink: 0;\n }\n\n \/* ── FINAL STEP ── *\/\n .quiz-final {\n text-align: center;\n padding: 48px 40px 40px;\n }\n\n .quiz-final-check {\n width: 64px;\n height: 64px;\n background: rgba(229,9,20,0.12);\n border: 1px solid rgba(229,9,20,0.3);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 24px;\n animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n }\n\n .quiz-final-title {\n font-family: var(--font-display);\n font-size: 2.4rem;\n letter-spacing: 0.03em;\n margin-bottom: 12px;\n }\n\n .quiz-final-sub {\n font-size: 0.9rem;\n color: var(--muted);\n font-weight: 300;\n line-height: 1.6;\n margin-bottom: 32px;\n }\n\n .quiz-cta {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--red);\n color: #fff;\n font-family: var(--font-body);\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n text-decoration: none;\n padding: 16px 36px;\n border-radius: 100px;\n transition: background 0.2s, box-shadow 0.2s, transform 0.15s;\n box-shadow: 0 8px 32px rgba(229,9,20,0.35);\n }\n\n .quiz-cta:hover {\n background: #ff0a15;\n box-shadow: 0 12px 40px rgba(229,9,20,0.55);\n transform: translateY(-2px);\n }\n\n .quiz-cta:active { transform: translateY(0); }\n\n \/* ── FOOTER ── *\/\n .quiz-footer {\n padding: 0 40px 28px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .quiz-footer-dots {\n display: flex;\n gap: 6px;\n }\n\n .quiz-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--border);\n transition: background 0.3s, transform 0.3s;\n }\n\n .quiz-dot.active {\n background: var(--red);\n transform: scale(1.3);\n }\n\n .quiz-footer-skip {\n all: unset;\n cursor: pointer;\n font-size: 0.75rem;\n letter-spacing: 0.1em;\n color: var(--muted);\n text-transform: uppercase;\n font-weight: 300;\n transition: color 0.2s;\n }\n\n .quiz-footer-skip:hover { color: var(--text); }\n\n \/* ── ANIMATIONS ── *\/\n @keyframes fadeDown {\n from { opacity: 0; transform: translateY(-12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes popIn {\n from { opacity: 0; transform: scale(0.5); }\n to { opacity: 1; transform: scale(1); }\n }\n\n .quiz-enter {\n animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;\n }\n\n \/* ── RESPONSIVE ── *\/\n @media (max-width: 480px) {\n .quiz-body, .quiz-footer { padding-left: 24px; padding-right: 24px; }\n .quiz-final { padding-left: 24px; padding-right: 24px; }\n .quiz-question { font-size: 1.6rem; }\n .quiz-options.cols-2 { grid-template-columns: 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"quiz-shell\">\n\n \n <div class=\"quiz-brand\">\n <div class=\"quiz-brand-icon\">\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\">\n <polygon points=\"6,3 16,10 6,17\" fill=\"white\"><\/polygon>\n <\/svg>\n <\/div>\n <div>\n <div class=\"quiz-brand-name\">SCREENIQ<\/div>\n <div class=\"quiz-brand-tag\">Descubra seu perfil<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-card\">\n\n \n <div class=\"quiz-progress-track\">\n <div class=\"quiz-progress-fill\" id=\"progressFill\" style=\"width: 0%\"><\/div>\n <\/div>\n\n \n <div id=\"stepsContainer\"><\/div>\n\n \n <div class=\"quiz-footer\" id=\"quizFooter\">\n <div class=\"quiz-footer-dots\" id=\"dotsContainer\"><\/div>\n <button class=\"quiz-footer-skip\" id=\"skipBtn\" onclick=\"qzSkip()\">Pular \u2192<\/button>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n const STEPS = [\n {\n label: \"Preferência\",\n question: \"Você gosta mais de filmes ou séries?\",\n cols: 2,\n options: [\n { icon: \"🎬\", text: \"Filmes\" },\n { icon: \"📺\", text: \"Séries\" },\n ]\n },\n {\n label: \"Gênero\",\n question: \"Qual gênero você costuma assistir?\",\n cols: 2,\n options: [\n { icon: \"💥\", text: \"Ação\" },\n { icon: \"😂\", text: \"Comédia\" },\n { icon: \"🔍\", text: \"Suspense\" },\n { icon: \"👻\", text: \"Terror\" },\n { icon: \"💕\", text: \"Romance\" },\n { icon: \"🎭\", text: \"Outros\" },\n ]\n },\n {\n label: \"Dispositivo\",\n question: \"Onde você costuma assistir?\",\n cols: 2,\n options: [\n { icon: \"📱\", text: \"Celular\" },\n { icon: \"📺\", text: \"Televisão\" },\n { icon: \"💻\", text: \"Computador\" },\n { icon: \"🎮\", text: \"Console\" },\n ]\n },\n {\n label: \"Assinatura\",\n question: \"Você já possui algum streaming por assinatura?\",\n cols: 1,\n options: [\n { icon: \"✅\", text: \"Sim, tenho uma assinatura\" },\n { icon: \"🔄\", text: \"Sim, tenho mais de uma\" },\n { icon: \"❌\", text: \"Não, não assino nenhum\" },\n ]\n },\n ];\n\n const TOTAL = STEPS.length;\n let current = 0;\n\n const container = document.getElementById('stepsContainer');\n const progressFill = document.getElementById('progressFill');\n const dotsContainer = document.getElementById('dotsContainer');\n const quizFooter = document.getElementById('quizFooter');\n const skipBtn = document.getElementById('skipBtn');\n\n \/\/ Build dots\n for (let i = 0; i < TOTAL; i++) {\n const d = document.createElement('div');\n d.className = 'quiz-dot' + (i === 0 ? ' active' : '');\n d.id = `dot-${i}`;\n dotsContainer.appendChild(d);\n }\n\n function renderStep(index) {\n container.innerHTML = '';\n\n if (index >= TOTAL) {\n renderFinal();\n return;\n }\n\n const step = STEPS[index];\n progressFill.style.width = `${((index) \/ TOTAL) * 100}%`;\n\n \/\/ Update dots\n document.querySelectorAll('.quiz-dot').forEach((d, i) => {\n d.classList.toggle('active', i === index);\n });\n\n const div = document.createElement('div');\n div.className = 'quiz-body quiz-enter';\n div.innerHTML = `\n <div class=\"quiz-step-meta\">\n <span class=\"quiz-step-count\">ETAPA ${index + 1} DE ${TOTAL}<\/span>\n <span class=\"quiz-step-divider\"><\/span>\n <span class=\"quiz-step-label\">${step.label}<\/span>\n <\/div>\n <h2 class=\"quiz-question\">${step.question}<\/h2>\n <div class=\"quiz-options ${step.cols === 2 ? 'cols-2' : 'cols-1'}\">\n ${step.options.map(opt => `\n <button class=\"quiz-opt\" onclick=\"qzChoose()\">\n <span class=\"quiz-opt-dot\"><\/span>\n <span class=\"quiz-opt-icon\">${opt.icon}<\/span>\n <span>${opt.text}<\/span>\n <\/button>\n `).join('')}\n <\/div>\n `;\n\n container.appendChild(div);\n quizFooter.style.display = 'flex';\n }\n\n function renderFinal() {\n progressFill.style.width = '100%';\n quizFooter.style.display = 'none';\n\n const div = document.createElement('div');\n div.className = 'quiz-final quiz-enter';\n div.innerHTML = `\n <div class=\"quiz-final-check\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\n <path d=\"M6 14l6 6L22 8\" stroke=\"#e50914\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"quiz-final-title\">Perfil Identificado!<\/h2>\n <p class=\"quiz-final-sub\">Com base nas suas respostas, encontramos as melhores recomendações personalizadas para você.<\/p>\n <a href=\"https:\/\/SEU-SITE-AQUI.com\" class=\"quiz-cta\">\n Ver Recomendações\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a>\n `;\n container.appendChild(div);\n }\n\n function qzChoose() {\n current++;\n renderStep(current);\n }\n\n function qzSkip() {\n current++;\n renderStep(current);\n }\n\n \/\/ Init\n renderStep(0);\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Quiz \u2022 Descubra Seu Perfil SCREENIQ Descubra seu perfil Pular \u2192<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-514","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":5,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages\/514\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages\/514\/revisions\/519"}],"wp:attachment":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/media?parent=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":514,"date":"2026-03-09T15:18:47","date_gmt":"2026-03-09T15:18:47","guid":{"rendered":"http:\/\/5.78.210.107\/?page_id=514"},"modified":"2026-03-10T03:45:46","modified_gmt":"2026-03-10T03:45:46","slug":"514-2","status":"publish","type":"page","link":"https:\/\/apps.solutidigital.com\/id\/514-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\nQuiz \u2022 Descubra Seu Perfil<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --red: #e50914;\n --red-dim: #8b0000;\n --gold: #c9a84c;\n --bg: #0a0a0f;\n --surface: #111118;\n --surface2: #1a1a24;\n --border: rgba(255,255,255,0.07);\n --text: #f0eee8;\n --muted: #7a7a8c;\n --font-display: 'Bebas Neue', sans-serif;\n --font-body: 'DM Sans', sans-serif;\n }\n\n html, body {\n min-height: 100%;\n background: var(--bg);\n color: var(--text);\n font-family: var(--font-body);\n -webkit-font-smoothing: antialiased;\n }\n\n \/* ── BG EFFECT ── *\/\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 50% -10%, rgba(229,9,20,0.18) 0%, transparent 65%),\n radial-gradient(ellipse 50% 40% at 80% 110%, rgba(201,168,76,0.08) 0%, transparent 60%);\n pointer-events: none;\n z-index: 0;\n }\n\n \/* grain overlay *\/\n body::after {\n content: '';\n position: fixed;\n inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'\/%3E%3C\/svg%3E\");\n background-size: 200px;\n pointer-events: none;\n z-index: 0;\n opacity: 0.5;\n }\n\n \/* ── LAYOUT ── *\/\n .quiz-shell {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 24px 16px;\n }\n\n \/* ── HEADER ── *\/\n .quiz-brand {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 48px;\n animation: fadeDown 0.6s ease both;\n }\n\n .quiz-brand-icon {\n width: 36px;\n height: 36px;\n background: var(--red);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .quiz-brand-icon svg { display: block; }\n\n .quiz-brand-name {\n font-family: var(--font-display);\n font-size: 1.6rem;\n letter-spacing: 0.12em;\n color: var(--text);\n }\n\n .quiz-brand-tag {\n font-size: 0.65rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--muted);\n font-weight: 300;\n }\n\n \/* ── CARD ── *\/\n .quiz-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n width: 100%;\n max-width: 520px;\n overflow: hidden;\n box-shadow:\n 0 0 0 1px rgba(255,255,255,0.03),\n 0 32px 64px rgba(0,0,0,0.6),\n 0 0 80px rgba(229,9,20,0.05);\n }\n\n \/* ── PROGRESS BAR ── *\/\n .quiz-progress-track {\n height: 3px;\n background: var(--surface2);\n position: relative;\n }\n\n .quiz-progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--red-dim), var(--red));\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n }\n\n .quiz-progress-fill::after {\n content: '';\n position: absolute;\n right: 0;\n top: -2px;\n width: 8px;\n height: 8px;\n background: var(--red);\n border-radius: 50%;\n box-shadow: 0 0 8px var(--red);\n }\n\n \/* ── BODY ── *\/\n .quiz-body {\n padding: 40px 40px 36px;\n }\n\n \/* ── STEP META ── *\/\n .quiz-step-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 28px;\n }\n\n .quiz-step-count {\n font-family: var(--font-display);\n font-size: 0.75rem;\n letter-spacing: 0.25em;\n color: var(--red);\n }\n\n .quiz-step-divider {\n width: 24px;\n height: 1px;\n background: var(--border);\n }\n\n .quiz-step-label {\n font-size: 0.7rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--muted);\n font-weight: 300;\n }\n\n \/* ── QUESTION ── *\/\n .quiz-question {\n font-family: var(--font-display);\n font-size: 2rem;\n line-height: 1.1;\n letter-spacing: 0.02em;\n color: var(--text);\n margin-bottom: 32px;\n }\n\n \/* ── OPTIONS ── *\/\n .quiz-options {\n display: grid;\n gap: 10px;\n }\n\n .quiz-options.cols-2 { grid-template-columns: 1fr 1fr; }\n .quiz-options.cols-1 { grid-template-columns: 1fr; }\n\n .quiz-opt {\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px 20px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 12px;\n transition: border-color 0.2s, background 0.2s, transform 0.15s;\n font-family: var(--font-body);\n font-size: 0.95rem;\n font-weight: 400;\n color: var(--text);\n position: relative;\n overflow: hidden;\n }\n\n .quiz-opt::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(229,9,20,0.06) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .quiz-opt:hover { border-color: rgba(229,9,20,0.5); transform: translateY(-1px); }\n .quiz-opt:hover::before { opacity: 1; }\n .quiz-opt:active { transform: translateY(0) scale(0.98); }\n\n .quiz-opt-dot {\n width: 18px;\n height: 18px;\n border: 1.5px solid var(--muted);\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s, background 0.2s;\n }\n\n .quiz-opt:hover .quiz-opt-dot {\n border-color: var(--red);\n background: rgba(229,9,20,0.15);\n }\n\n .quiz-opt-icon {\n font-size: 1.2rem;\n flex-shrink: 0;\n }\n\n \/* ── FINAL STEP ── *\/\n .quiz-final {\n text-align: center;\n padding: 48px 40px 40px;\n }\n\n .quiz-final-check {\n width: 64px;\n height: 64px;\n background: rgba(229,9,20,0.12);\n border: 1px solid rgba(229,9,20,0.3);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 24px;\n animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n }\n\n .quiz-final-title {\n font-family: var(--font-display);\n font-size: 2.4rem;\n letter-spacing: 0.03em;\n margin-bottom: 12px;\n }\n\n .quiz-final-sub {\n font-size: 0.9rem;\n color: var(--muted);\n font-weight: 300;\n line-height: 1.6;\n margin-bottom: 32px;\n }\n\n .quiz-cta {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--red);\n color: #fff;\n font-family: var(--font-body);\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n text-decoration: none;\n padding: 16px 36px;\n border-radius: 100px;\n transition: background 0.2s, box-shadow 0.2s, transform 0.15s;\n box-shadow: 0 8px 32px rgba(229,9,20,0.35);\n }\n\n .quiz-cta:hover {\n background: #ff0a15;\n box-shadow: 0 12px 40px rgba(229,9,20,0.55);\n transform: translateY(-2px);\n }\n\n .quiz-cta:active { transform: translateY(0); }\n\n \/* ── FOOTER ── *\/\n .quiz-footer {\n padding: 0 40px 28px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .quiz-footer-dots {\n display: flex;\n gap: 6px;\n }\n\n .quiz-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--border);\n transition: background 0.3s, transform 0.3s;\n }\n\n .quiz-dot.active {\n background: var(--red);\n transform: scale(1.3);\n }\n\n .quiz-footer-skip {\n all: unset;\n cursor: pointer;\n font-size: 0.75rem;\n letter-spacing: 0.1em;\n color: var(--muted);\n text-transform: uppercase;\n font-weight: 300;\n transition: color 0.2s;\n }\n\n .quiz-footer-skip:hover { color: var(--text); }\n\n \/* ── ANIMATIONS ── *\/\n @keyframes fadeDown {\n from { opacity: 0; transform: translateY(-12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes popIn {\n from { opacity: 0; transform: scale(0.5); }\n to { opacity: 1; transform: scale(1); }\n }\n\n .quiz-enter {\n animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;\n }\n\n \/* ── RESPONSIVE ── *\/\n @media (max-width: 480px) {\n .quiz-body, .quiz-footer { padding-left: 24px; padding-right: 24px; }\n .quiz-final { padding-left: 24px; padding-right: 24px; }\n .quiz-question { font-size: 1.6rem; }\n .quiz-options.cols-2 { grid-template-columns: 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"quiz-shell\">\n\n \n <div class=\"quiz-brand\">\n <div class=\"quiz-brand-icon\">\n <svg width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\">\n <polygon points=\"6,3 16,10 6,17\" fill=\"white\"><\/polygon>\n <\/svg>\n <\/div>\n <div>\n <div class=\"quiz-brand-name\">SCREENIQ<\/div>\n <div class=\"quiz-brand-tag\">Descubra seu perfil<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-card\">\n\n \n <div class=\"quiz-progress-track\">\n <div class=\"quiz-progress-fill\" id=\"progressFill\" style=\"width: 0%\"><\/div>\n <\/div>\n\n \n <div id=\"stepsContainer\"><\/div>\n\n \n <div class=\"quiz-footer\" id=\"quizFooter\">\n <div class=\"quiz-footer-dots\" id=\"dotsContainer\"><\/div>\n <button class=\"quiz-footer-skip\" id=\"skipBtn\" onclick=\"qzSkip()\">Pular \u2192<\/button>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n const STEPS = [\n {\n label: \"Preferência\",\n question: \"Você gosta mais de filmes ou séries?\",\n cols: 2,\n options: [\n { icon: \"🎬\", text: \"Filmes\" },\n { icon: \"📺\", text: \"Séries\" },\n ]\n },\n {\n label: \"Gênero\",\n question: \"Qual gênero você costuma assistir?\",\n cols: 2,\n options: [\n { icon: \"💥\", text: \"Ação\" },\n { icon: \"😂\", text: \"Comédia\" },\n { icon: \"🔍\", text: \"Suspense\" },\n { icon: \"👻\", text: \"Terror\" },\n { icon: \"💕\", text: \"Romance\" },\n { icon: \"🎭\", text: \"Outros\" },\n ]\n },\n {\n label: \"Dispositivo\",\n question: \"Onde você costuma assistir?\",\n cols: 2,\n options: [\n { icon: \"📱\", text: \"Celular\" },\n { icon: \"📺\", text: \"Televisão\" },\n { icon: \"💻\", text: \"Computador\" },\n { icon: \"🎮\", text: \"Console\" },\n ]\n },\n {\n label: \"Assinatura\",\n question: \"Você já possui algum streaming por assinatura?\",\n cols: 1,\n options: [\n { icon: \"✅\", text: \"Sim, tenho uma assinatura\" },\n { icon: \"🔄\", text: \"Sim, tenho mais de uma\" },\n { icon: \"❌\", text: \"Não, não assino nenhum\" },\n ]\n },\n ];\n\n const TOTAL = STEPS.length;\n let current = 0;\n\n const container = document.getElementById('stepsContainer');\n const progressFill = document.getElementById('progressFill');\n const dotsContainer = document.getElementById('dotsContainer');\n const quizFooter = document.getElementById('quizFooter');\n const skipBtn = document.getElementById('skipBtn');\n\n \/\/ Build dots\n for (let i = 0; i < TOTAL; i++) {\n const d = document.createElement('div');\n d.className = 'quiz-dot' + (i === 0 ? ' active' : '');\n d.id = `dot-${i}`;\n dotsContainer.appendChild(d);\n }\n\n function renderStep(index) {\n container.innerHTML = '';\n\n if (index >= TOTAL) {\n renderFinal();\n return;\n }\n\n const step = STEPS[index];\n progressFill.style.width = `${((index) \/ TOTAL) * 100}%`;\n\n \/\/ Update dots\n document.querySelectorAll('.quiz-dot').forEach((d, i) => {\n d.classList.toggle('active', i === index);\n });\n\n const div = document.createElement('div');\n div.className = 'quiz-body quiz-enter';\n div.innerHTML = `\n <div class=\"quiz-step-meta\">\n <span class=\"quiz-step-count\">ETAPA ${index + 1} DE ${TOTAL}<\/span>\n <span class=\"quiz-step-divider\"><\/span>\n <span class=\"quiz-step-label\">${step.label}<\/span>\n <\/div>\n <h2 class=\"quiz-question\">${step.question}<\/h2>\n <div class=\"quiz-options ${step.cols === 2 ? 'cols-2' : 'cols-1'}\">\n ${step.options.map(opt => `\n <button class=\"quiz-opt\" onclick=\"qzChoose()\">\n <span class=\"quiz-opt-dot\"><\/span>\n <span class=\"quiz-opt-icon\">${opt.icon}<\/span>\n <span>${opt.text}<\/span>\n <\/button>\n `).join('')}\n <\/div>\n `;\n\n container.appendChild(div);\n quizFooter.style.display = 'flex';\n }\n\n function renderFinal() {\n progressFill.style.width = '100%';\n quizFooter.style.display = 'none';\n\n const div = document.createElement('div');\n div.className = 'quiz-final quiz-enter';\n div.innerHTML = `\n <div class=\"quiz-final-check\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\n <path d=\"M6 14l6 6L22 8\" stroke=\"#e50914\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"quiz-final-title\">Perfil Identificado!<\/h2>\n <p class=\"quiz-final-sub\">Com base nas suas respostas, encontramos as melhores recomendações personalizadas para você.<\/p>\n <a href=\"https:\/\/SEU-SITE-AQUI.com\" class=\"quiz-cta\">\n Ver Recomendações\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a>\n `;\n container.appendChild(div);\n }\n\n function qzChoose() {\n current++;\n renderStep(current);\n }\n\n function qzSkip() {\n current++;\n renderStep(current);\n }\n\n \/\/ Init\n renderStep(0);\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Quiz \u2022 Descubra Seu Perfil SCREENIQ Descubra seu perfil Pular \u2192<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-514","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":5,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages\/514\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/pages\/514\/revisions\/519"}],"wp:attachment":[{"href":"https:\/\/apps.solutidigital.com\/id\/wp-json\/wp\/v2\/media?parent=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}