{"id":18761,"date":"2025-11-30T11:36:26","date_gmt":"2025-11-30T11:36:26","guid":{"rendered":"https:\/\/webmediarebels.com\/?page_id=18761"},"modified":"2025-11-30T12:30:56","modified_gmt":"2025-11-30T12:30:56","slug":"vecna-stranger-things","status":"publish","type":"page","link":"https:\/\/webmediarebels.com\/en\/vecna-stranger-things\/","title":{"rendered":"Que tipo de Cliente voce seria?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18761\" class=\"elementor elementor-18761\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-f19590b e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"f19590b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dafb2e3 elementor-widget elementor-widget-html\" data-id=\"dafb2e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================\n  QUIZ: QUE TIPO DE CLIENTE VOC\u00ca SERIA?\n  ESTILO STRANGER THINGS \u2022 WEBMEDIA REBELS\n================================================= -->\n\n<div id=\"cliente-quiz\">\n  <div class=\"cq-bg\"><\/div>\n\n  <div class=\"cq-wrapper\">\n    <div class=\"cq-card\">\n\n      <div class=\"cq-logo\">WEBMEDIA REBELS<\/div>\n\n      <!-- TELA INICIAL -->\n      <div class=\"cq-screen cq-screen-active\" id=\"cq-start\">\n        <h1 class=\"cq-title\">Que tipo de cliente voc\u00ea seria?<\/h1>\n        <p class=\"cq-sub\">\n          Descubra qual personagem de Stranger Things parece com o seu jeito de pedir um site\n          e como voc\u00ea lidaria com a Webmedia Rebels.\n        <\/p>\n\n        <div class=\"cq-upload-box\">\n          <label class=\"cq-upload-label\">\n            <input type=\"file\" id=\"cq-photo-input\" accept=\"image\/*\">\n            Enviar foto\n          <\/label>\n          <p class=\"cq-upload-hint\">Opcional, mas deixa o resultado com mais cara de Hawkins.<\/p>\n        <\/div>\n\n        <button class=\"cq-btn cq-btn-main\" id=\"cq-start-btn\">\n          Come\u00e7ar\n        <\/button>\n      <\/div>\n\n      <!-- TELA PERGUNTAS -->\n      <div class=\"cq-screen\" id=\"cq-questions\">\n        <h2 class=\"cq-question-title\">\n          Pergunta <span id=\"cq-q-number\">1<\/span> de <span id=\"cq-q-total\">5<\/span>\n        <\/h2>\n        <p class=\"cq-question-text\" id=\"cq-q-text\"><\/p>\n\n        <div class=\"cq-options\" id=\"cq-options\"><\/div>\n\n        <button class=\"cq-btn cq-btn-secondary\" id=\"cq-next-btn\">\n          Pr\u00f3xima\n        <\/button>\n      <\/div>\n\n      <!-- TELA RESULTADO -->\n      <div class=\"cq-screen\" id=\"cq-result\">\n        <div id=\"cq-result-card\">\n          <p class=\"cq-result-label\">Voc\u00ea seria...<\/p>\n\n          <div class=\"cq-photo-frame\">\n            <img decoding=\"async\" id=\"cq-result-photo\" src=\"\" alt=\"Foto do cliente\">\n            <span id=\"cq-photo-placeholder\">WR<\/span>\n          <\/div>\n\n          <h3 class=\"cq-result-name\" id=\"cq-result-name\"><\/h3>\n          <p class=\"cq-result-desc\" id=\"cq-result-desc\"><\/p>\n        <\/div>\n\n        <div class=\"cq-actions\">\n          <button class=\"cq-btn cq-btn-secondary\" id=\"cq-restart-btn\">\n            Refazer\n          <\/button>\n          <button class=\"cq-btn cq-btn-outline\" id=\"cq-download-btn\">\n            Baixar card\n          <\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- html2canvas para gerar o card em imagem -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\n\n<style>\n  \/* RESET LOCAL *\/\n  #cliente-quiz, #cliente-quiz * {\n    box-sizing: border-box;\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  }\n\n  #cliente-quiz {\n    position: relative;\n    width: 100%;\n    min-height: 100vh;\n    padding: 3.5rem 1.5rem;\n    background: radial-gradient(circle at top, #3c0210 0%, #05020a 55%, #000000 100%);\n    color: #ffffff;\n    overflow: hidden;\n  }\n\n  .cq-bg {\n    position: absolute;\n    inset: -20%;\n    background-image:\n      radial-gradient(circle at 10% 20%, rgba(255, 0, 80, 0.25) 0, transparent 60%),\n      radial-gradient(circle at 80% 0%, rgba(130, 0, 40, 0.5) 0, transparent 55%),\n      radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.08) 0, transparent 70%);\n    filter: blur(4px);\n    opacity: 0.9;\n    animation: cqBgDrift 10s infinite alternate ease-in-out;\n    pointer-events: none;\n  }\n\n  @keyframes cqBgDrift {\n    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }\n    100% { transform: translate3d(-16px, 8px, 0) scale(1.03); opacity: 1; }\n  }\n\n  .cq-wrapper {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n  .cq-card {\n    position: relative;\n    width: 100%;\n    max-width: 460px;\n    background: radial-gradient(circle at top, rgba(120, 0, 40, 0.7), rgba(5, 0, 10, 0.97));\n    border-radius: 1.8rem;\n    padding: 2.4rem 1.8rem 2.1rem;\n    border: 1px solid rgba(255, 0, 70, 0.75);\n    box-shadow:\n      0 0 40px rgba(255, 0, 70, 0.6),\n      0 0 120px rgba(0, 0, 0, 0.95);\n    backdrop-filter: blur(14px);\n    overflow: hidden;\n  }\n\n  .cq-card::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    background: repeating-linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.4),\n      rgba(0, 0, 0, 0.4) 2px,\n      rgba(0, 0, 0, 0.75) 4px\n    );\n    mix-blend-mode: soft-light;\n    opacity: 0.7;\n    pointer-events: none;\n  }\n\n  .cq-card::after {\n    content: \"\";\n    position: absolute;\n    inset: -40%;\n    background:\n      radial-gradient(circle at 10% 0, rgba(255, 0, 90, 0.35), transparent 55%),\n      radial-gradient(circle at 85% 100%, rgba(255, 180, 200, 0.25), transparent 70%);\n    mix-blend-mode: screen;\n    opacity: 0.35;\n    pointer-events: none;\n  }\n\n  .cq-card > * {\n    position: relative;\n    z-index: 2;\n  }\n\n  .cq-logo {\n    text-align: center;\n    font-size: 0.78rem;\n    letter-spacing: 0.26em;\n    text-transform: uppercase;\n    color: #ffb5c6;\n    margin-bottom: 1.7rem;\n  }\n\n  .cq-screen { display: none; }\n  .cq-screen-active { display: block; }\n\n  .cq-title {\n    text-align: center;\n    font-size: 2rem;\n    line-height: 1.15;\n    text-transform: uppercase;\n    color: #ffffff;\n    margin: 0 0 1rem 0;\n    text-shadow: 0 0 14px rgba(255, 0, 60, 0.9);\n  }\n\n  .cq-sub {\n    text-align: center;\n    font-size: 0.95rem;\n    color: #ffd1de;\n    margin-bottom: 1.9rem;\n  }\n\n  .cq-upload-box {\n    text-align: center;\n    margin-bottom: 1.7rem;\n  }\n\n  .cq-upload-label {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.7rem 1.4rem;\n    border-radius: 999px;\n    background: transparent;\n    border: 1px solid rgba(255, 160, 190, 0.9);\n    color: #ffd5e2;\n    font-size: 0.9rem;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n  }\n\n  .cq-upload-label input {\n    display: none;\n  }\n\n  .cq-upload-hint {\n    font-size: 0.8rem;\n    color: #ffbfd0;\n    margin-top: 0.6rem;\n  }\n\n  .cq-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 999px;\n    padding: 0.85rem 1.7rem;\n    font-size: 0.9rem;\n    border: none;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.14em;\n    font-weight: 600;\n    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;\n    white-space: nowrap;\n  }\n\n  .cq-btn-main {\n    width: 100%;\n    background: linear-gradient(120deg, #ff002a, #ff4b5b);\n    color: #ffffff;\n    box-shadow:\n      0 0 16px rgba(255, 0, 60, 0.9),\n      0 0 30px rgba(255, 0, 40, 0.7);\n  }\n\n  .cq-btn-main:hover {\n    transform: translateY(-1px) scale(1.01);\n  }\n\n  .cq-btn-secondary {\n    width: 100%;\n    margin-top: 1.6rem;\n    background: #ffffff;\n    color: #1a0207;\n  }\n\n  .cq-btn-secondary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);\n  }\n\n  .cq-btn-outline {\n    background: transparent;\n    color: #ffd6e2;\n    border: 1px solid rgba(255, 160, 200, 0.9);\n  }\n\n  .cq-btn-outline:hover {\n    background: rgba(255, 255, 255, 0.04);\n    transform: translateY(-1px);\n  }\n\n  \/* PERGUNTAS *\/\n  .cq-question-title {\n    font-size: 0.9rem;\n    text-transform: uppercase;\n    letter-spacing: 0.16em;\n    color: #ff9eb3;\n    margin-bottom: 0.9rem;\n  }\n\n  .cq-question-text {\n    font-size: 1.05rem;\n    line-height: 1.5;\n    color: #ffffff;\n    margin-bottom: 1.4rem;\n  }\n\n  .cq-options {\n    display: grid;\n    gap: 0.7rem;\n  }\n\n  .cq-option-btn {\n    width: 100%;\n    padding: 0.8rem 0.9rem;\n    border-radius: 0.9rem;\n    border: 1px solid rgba(255, 110, 140, 0.85);\n    background: rgba(15, 0, 6, 0.7);\n    color: #ffe2ec;\n    font-size: 0.9rem;\n    text-align: left;\n    cursor: pointer;\n    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;\n  }\n\n  .cq-option-btn:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 0 14px rgba(255, 0, 70, 0.6);\n  }\n\n  .cq-option-btn.cq-option-selected {\n    background: linear-gradient(120deg, #ff0030, #ff4b6a);\n    border-color: rgba(255, 255, 255, 0.9);\n    color: #ffffff;\n  }\n\n  \/* RESULTADO *\/\n  #cq-result-card {\n    margin-top: 0.4rem;\n    padding: 1.6rem 1.1rem 1.5rem;\n    border-radius: 1.4rem;\n    border: 1px solid rgba(255, 0, 70, 0.8);\n    background: radial-gradient(circle at top, rgba(0, 0, 0, 0.85), rgba(10, 0, 4, 0.98));\n    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.8);\n    text-align: center;\n  }\n\n  .cq-result-label {\n    font-size: 0.85rem;\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    color: #ff9fb4;\n    margin-bottom: 0.9rem;\n  }\n\n  .cq-photo-frame {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    margin: 0 auto 1.2rem;\n    border-radius: 50%;\n    background:\n      radial-gradient(circle, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 40%, transparent 75%),\n      radial-gradient(circle, rgba(255, 0, 80, 0.9) 0, rgba(80, 0, 30, 0.95) 55%, transparent 80%);\n    box-shadow:\n      0 0 26px rgba(255, 0, 80, 0.9),\n      0 0 80px rgba(0, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  .cq-photo-frame img {\n    position: absolute;\n    inset: 14%;\n    width: 72%;\n    height: 72%;\n    border-radius: 50%;\n    object-fit: cover;\n    display: none;\n  }\n\n  .cq-photo-frame span {\n    position: absolute;\n    inset: 28%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.85);\n    color: #ffccd9;\n    font-weight: 700;\n    font-size: 1.3rem;\n    letter-spacing: 0.16em;\n  }\n\n  .cq-result-name {\n    font-size: 1.4rem;\n    margin: 0 0 0.7rem 0;\n    color: #ffffff;\n    text-shadow: 0 0 12px rgba(255, 0, 70, 0.9);\n  }\n\n  .cq-result-desc {\n    font-size: 0.95rem;\n    line-height: 1.6;\n    color: #ffd4df;\n  }\n\n  .cq-actions {\n    margin-top: 1.5rem;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.7rem;\n    justify-content: center;\n  }\n\n  .cq-actions .cq-btn {\n    flex: 1 1 150px;\n  }\n\n  \/* RESPONSIVO *\/\n  @media (max-width: 520px) {\n    #cliente-quiz {\n      padding: 3rem 1.1rem;\n    }\n    .cq-card {\n      padding: 2.1rem 1.4rem 2rem;\n    }\n    .cq-title {\n      font-size: 1.7rem;\n    }\n    .cq-photo-frame {\n      width: 135px;\n      height: 135px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const screenStart = document.getElementById(\"cq-start\");\n    const screenQuestions = document.getElementById(\"cq-questions\");\n    const screenResult = document.getElementById(\"cq-result\");\n\n    const startBtn = document.getElementById(\"cq-start-btn\");\n    const nextBtn = document.getElementById(\"cq-next-btn\");\n    const restartBtn = document.getElementById(\"cq-restart-btn\");\n    const downloadBtn = document.getElementById(\"cq-download-btn\");\n\n    const qNumberEl = document.getElementById(\"cq-q-number\");\n    const qTotalEl = document.getElementById(\"cq-q-total\");\n    const qTextEl = document.getElementById(\"cq-q-text\");\n    const optionsEl = document.getElementById(\"cq-options\");\n\n    const photoInput = document.getElementById(\"cq-photo-input\");\n    const resultPhoto = document.getElementById(\"cq-result-photo\");\n    const photoPlaceholder = document.getElementById(\"cq-photo-placeholder\");\n\n    const resultNameEl = document.getElementById(\"cq-result-name\");\n    const resultDescEl = document.getElementById(\"cq-result-desc\");\n    const resultCardEl = document.getElementById(\"cq-result-card\");\n\n    let uploadedPhotoData = null;\n\n    photoInput.addEventListener(\"change\", function (e) {\n      const file = e.target.files && e.target.files[0];\n      if (!file) return;\n\n      const reader = new FileReader();\n      reader.onload = function (ev) {\n        uploadedPhotoData = ev.target.result;\n      };\n      reader.readAsDataURL(file);\n    });\n\n    const characters = {\n      eleven: {\n        title: \"Cliente Eleven\",\n        desc: \"Voc\u00ea sente tudo com muita intensidade, quer um site que mude sua vida e confia na intui\u00e7\u00e3o na hora do briefing. Fala pouco, sente muito e manda um ok curto que vale por um contrato completo.\"\n      },\n      mike: {\n        title: \"Cliente Mike Wheeler\",\n        desc: \"Voc\u00ea se apega ao projeto como se fosse um relacionamento. Quer participar de cada detalhe, \u00e9 fiel ao time, mas \u00e0s vezes leva tudo para o lado pessoal quando uma ideia n\u00e3o entra na vers\u00e3o final.\"\n      },\n      will: {\n        title: \"Cliente Will Byers\",\n        desc: \"Voc\u00ea percebe tudo nos bastidores. Sente que algo est\u00e1 fora do lugar antes de todo mundo, quieto, sens\u00edvel aos detalhes e sempre com aquela sensa\u00e7\u00e3o de que o layout ainda n\u00e3o est\u00e1 totalmente no seu lugar.\"\n      },\n      max: {\n        title: \"Cliente Max Mayfield\",\n        desc: \"Voc\u00ea entra decidido, parece frio, mas tem um cora\u00e7\u00e3o gigante e opini\u00f5es fortes. Se apaixona por um visual, luta por ele at\u00e9 o fim e n\u00e3o tem medo de dizer que algo n\u00e3o combina com voc\u00ea.\"\n      },\n      lucas: {\n        title: \"Cliente Lucas Sinclair\",\n        desc: \"Voc\u00ea \u00e9 o cliente que questiona tudo. Pede l\u00f3gica, quer entender cada passo, pensa em custo, risco, retorno e s\u00f3 descansa quando sente que est\u00e1 fazendo a escolha certa.\"\n      },\n      dustin: {\n        title: \"Cliente Dustin Henderson\",\n        desc: \"Voc\u00ea chega animado, cheio de ideias, manda \u00e1udio rindo, se empolga com qualquer anima\u00e7\u00e3o e vira praticamente parte da equipe. Ama o processo tanto quanto o resultado.\"\n      },\n      steve: {\n        title: \"Cliente Steve Harrington\",\n        desc: \"Voc\u00ea come\u00e7a dizendo que o site \u00e9 simples, quase nada, rapidinho. Aos poucos aparecem dez p\u00e1ginas, blog, loja, \u00e1rea de membros e ainda assim voc\u00ea continua dizendo que \u00e9 algo b\u00e1sico.\"\n      },\n      jonathan: {\n        title: \"Cliente Jonathan Byers\",\n        desc: \"Voc\u00ea liga mais para conte\u00fado que para brilho. Foto boa, texto profundo, mensagem verdadeira. O site precisa ter sentimento e hist\u00f3ria, mesmo que ningu\u00e9m veja os bastidores que voc\u00ea cuidou.\"\n      },\n      nancy: {\n        title: \"Cliente Nancy Wheeler\",\n        desc: \"Voc\u00ea investiga tudo. Estuda concorr\u00eancia, traz refer\u00eancias, organiza documentos, planilhas, textos e volta com revis\u00e3o em tr\u00eas cores diferentes. Perfeito para sites estrat\u00e9gicos e cheios de informa\u00e7\u00e3o.\"\n      },\n      robin: {\n        title: \"Cliente Robin Buckley\",\n        desc: \"Voc\u00ea pensa r\u00e1pido, fala muito, tem mil ideias na mesma frase e precisa de algu\u00e9m para organizar o fluxo. Quando o site ganha estrutura, voc\u00ea voa e transforma o projeto em algo \u00fanico.\"\n      },\n      eddie: {\n        title: \"Cliente Eddie Munson\",\n        desc: \"Voc\u00ea chega com caos criativo e brilho no olho. Gosta do diferente, quer um site fora do padr\u00e3o, aceita risco e ama quando o projeto parece uma banda tocando alto em plena internet.\"\n      }\n    };\n\n    const questions = [\n      {\n        text: \"Quando voc\u00ea pensa no seu site ideal, o que vem primeiro na sua cabe\u00e7a?\",\n        options: [\n          { text: \"Quero algo forte, intenso e diferente de tudo que j\u00e1 vi.\", char: \"eleven\" },\n          { text: \"Quero contar minha hist\u00f3ria, passo a passo, quase como um di\u00e1rio.\", char: \"will\" },\n          { text: \"Quero algo que represente meu neg\u00f3cio com estrat\u00e9gia e estrutura.\", char: \"nancy\" },\n          { text: \"Quero um site que grite quem eu sou, mesmo que fuja do padr\u00e3o.\", char: \"eddie\" }\n        ]\n      },\n      {\n        text: \"Como seria seu jeito de mandar briefing para a ag\u00eancia?\",\n        options: [\n          { text: \"Mensagem curta dizendo que confia e que sente quando estiver certo.\", char: \"eleven\" },\n          { text: \"Um text\u00e3o cheio de \u00e1udios, ideias soltas e piadas no meio.\", char: \"dustin\" },\n          { text: \"Um documento completo com t\u00f3picos, prioridades e observa\u00e7\u00f5es.\", char: \"nancy\" },\n          { text: \"Uma conversa longa para alinhar vis\u00e3o, emo\u00e7\u00e3o e futuro do projeto.\", char: \"mike\" }\n        ]\n      },\n      {\n        text: \"Depois que recebe a primeira proposta de layout, qual \u00e9 a sua rea\u00e7\u00e3o mais prov\u00e1vel?\",\n        options: [\n          { text: \"Acha bonito, mas come\u00e7a a procurar tudo que pode melhorar em sil\u00eancio.\", char: \"will\" },\n          { text: \"Olha cada detalhe, faz perguntas e quer entender todas as escolhas.\", char: \"lucas\" },\n          { text: \"Se empolga, manda para amigos, pede mais movimento, mais cor, mais tudo.\", char: \"dustin\" },\n          { text: \"Curte a ideia, mas j\u00e1 imagina um caminho ainda mais ousado.\", char: \"eddie\" }\n        ]\n      },\n      {\n        text: \"Seu maior medo em rela\u00e7\u00e3o ao site \u00e9:\",\n        options: [\n          { text: \"Ficar sem personalidade, parecendo igual a qualquer outro.\", char: \"max\" },\n          { text: \"N\u00e3o transmitir a profundidade do que voc\u00ea faz.\", char: \"jonathan\" },\n          { text: \"N\u00e3o converter, n\u00e3o trazer resultado e ficar s\u00f3 bonito.\", char: \"lucas\" },\n          { text: \"Ficar complexo demais para voc\u00ea conseguir cuidar depois.\", char: \"steve\" }\n        ]\n      },\n      {\n        text: \"Na hora de aprovar a vers\u00e3o final, voc\u00ea \u00e9 o tipo de pessoa que:\",\n        options: [\n          { text: \"Analisa tudo com carinho, pensa nos detalhes e sente se \u00e9 isso mesmo.\", char: \"will\" },\n          { text: \"Muda coisas em cima da hora porque teve uma ideia melhor.\", char: \"max\" },\n          { text: \"Fica revisando textos, bot\u00f5es e ordem das sess\u00f5es at\u00e9 o \u00faltimo minuto.\", char: \"nancy\" },\n          { text: \"J\u00e1 quer gravar v\u00eddeo, divulgar e experimentar todo o potencial do site.\", char: \"robin\" }\n        ]\n      }\n    ];\n\n    qTotalEl.textContent = questions.length.toString();\n\n    let currentIndex = 0;\n    let scores = {};\n    Object.keys(characters).forEach(key => scores[key] = 0);\n    let selectedOption = null;\n\n    function showScreen(screen) {\n      [screenStart, screenQuestions, screenResult].forEach(s => s.classList.remove(\"cq-screen-active\"));\n      screen.classList.add(\"cq-screen-active\");\n    }\n\n    function renderQuestion() {\n      const q = questions[currentIndex];\n      qNumberEl.textContent = (currentIndex + 1).toString();\n      qTextEl.textContent = q.text;\n      optionsEl.innerHTML = \"\";\n      selectedOption = null;\n\n      q.options.forEach((opt, index) => {\n        const btn = document.createElement(\"button\");\n        btn.type = \"button\";\n        btn.className = \"cq-option-btn\";\n        btn.textContent = opt.text;\n        btn.dataset.char = opt.char;\n        btn.dataset.index = index.toString();\n\n        btn.addEventListener(\"click\", () => {\n          document.querySelectorAll(\".cq-option-btn\").forEach(el => el.classList.remove(\"cq-option-selected\"));\n          btn.classList.add(\"cq-option-selected\");\n          selectedOption = opt;\n        });\n\n        optionsEl.appendChild(btn);\n      });\n    }\n\n    function calculateResult() {\n      let bestKey = null;\n      let bestScore = -Infinity;\n      for (const key in scores) {\n        if (scores[key] > bestScore) {\n          bestScore = scores[key];\n          bestKey = key;\n        }\n      }\n\n      if (!bestKey) {\n        const allKeys = Object.keys(characters);\n        bestKey = allKeys[Math.floor(Math.random() * allKeys.length)];\n      }\n\n      const profile = characters[bestKey];\n      resultNameEl.textContent = profile.title;\n      resultDescEl.textContent = profile.desc;\n\n      if (uploadedPhotoData) {\n        resultPhoto.src = uploadedPhotoData;\n        resultPhoto.style.display = \"block\";\n        photoPlaceholder.style.display = \"none\";\n      } else {\n        resultPhoto.style.display = \"none\";\n        photoPlaceholder.style.display = \"flex\";\n      }\n\n      showScreen(screenResult);\n    }\n\n    startBtn.addEventListener(\"click\", () => {\n      currentIndex = 0;\n      Object.keys(scores).forEach(key => scores[key] = 0);\n      renderQuestion();\n      showScreen(screenQuestions);\n    });\n\n    nextBtn.addEventListener(\"click\", () => {\n      if (!selectedOption) {\n        alert(\"Escolha uma op\u00e7\u00e3o para continuar.\");\n        return;\n      }\n\n      const key = selectedOption.char;\n      if (scores.hasOwnProperty(key)) {\n        scores[key] += 1;\n      }\n\n      currentIndex += 1;\n      if (currentIndex >= questions.length) {\n        calculateResult();\n      } else {\n        renderQuestion();\n      }\n    });\n\n    restartBtn.addEventListener(\"click\", () => {\n      currentIndex = 0;\n      Object.keys(scores).forEach(key => scores[key] = 0);\n      selectedOption = null;\n      renderQuestion();\n      showScreen(screenQuestions);\n    });\n\n    downloadBtn.addEventListener(\"click\", () => {\n      if (!window.html2canvas) {\n        alert(\"Fun\u00e7\u00e3o de download n\u00e3o est\u00e1 dispon\u00edvel neste dispositivo.\");\n        return;\n      }\n      downloadBtn.disabled = true;\n      const originalText = downloadBtn.textContent;\n      downloadBtn.textContent = \"Gerando\";\n\n      html2canvas(resultCardEl, {\n        backgroundColor: \"#050308\",\n        scale: window.devicePixelRatio > 2 ? 2 : window.devicePixelRatio\n      }).then(canvas => {\n        const link = document.createElement(\"a\");\n        link.download = \"webmedia-rebels-cliente-hawkins.png\";\n        link.href = canvas.toDataURL(\"image\/png\");\n        link.click();\n        downloadBtn.disabled = false;\n        downloadBtn.textContent = originalText;\n      }).catch(() => {\n        downloadBtn.disabled = false;\n        downloadBtn.textContent = originalText;\n        alert(\"Algo deu errado ao gerar o card. Tente de novo.\");\n      });\n    });\n  })();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WEBMEDIA REBELS Que tipo de cliente voc\u00ea seria? Descubra qual personagem de Stranger Things parece com o seu jeito de&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-18761","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/pages\/18761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/comments?post=18761"}],"version-history":[{"count":0,"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/pages\/18761\/revisions"}],"wp:attachment":[{"href":"https:\/\/webmediarebels.com\/en\/wp-json\/wp\/v2\/media?parent=18761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}