{"id":37,"date":"2026-06-07T06:04:04","date_gmt":"2026-06-07T06:04:04","guid":{"rendered":"https:\/\/cancheros.com.mx\/?page_id=37"},"modified":"2026-06-07T06:12:50","modified_gmt":"2026-06-07T06:12:50","slug":"test-analista","status":"publish","type":"page","link":"https:\/\/cancheros.com.mx\/index.php\/test-analista\/","title":{"rendered":"Test del Pseudo-Analista"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u00bfQu\u00e9 personaje del f\u00fatbol mexicano eres? \u2014 Cancheros M\u00e9xico<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,700;1,700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u2500\u2500 TOKENS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n:root {\r\n --b: #5170ff; --p: #ff66c4;\r\n --ink: #0c0c12; --ink2: #14141f; --ink3: #1e1e2e;\r\n --wire: rgba(255,255,255,.08);\r\n --muted: #7b7b9a; --soft: #b0afc8;\r\n --grad: linear-gradient(130deg, #5170ff 0%, #b44bff 55%, #ff66c4 100%);\r\n --r: 14px; --r2: 20px;\r\n --f-d: 'Bebas Neue', sans-serif;\r\n --f-s: 'Playfair Display', serif;\r\n --f-b: 'Instrument Sans', sans-serif;\r\n}\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; }\r\nbody {\r\n font-family: var(--f-b); background: var(--ink);\r\n color: #e2e1f0; overflow-x: hidden; min-height: 100vh;\r\n background-image:\r\n radial-gradient(ellipse 70% 60% at 10% 20%, rgba(81,112,255,.10) 0%, transparent 55%),\r\n radial-gradient(ellipse 60% 50% at 90% 80%, rgba(255,102,196,.08) 0%, transparent 55%);\r\n}\r\na { color: inherit; text-decoration: none; }\r\n\r\n\/* grain *\/\r\nbody::after {\r\n content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.03'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n.grad-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n\/* \u2500\u2500 NAVBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.nav {\r\n height: 64px; display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 32px; background: rgba(12,12,18,.9); backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--wire); position: sticky; top: 0; z-index: 100;\r\n}\r\n.nav-brand { font-family: var(--f-d); font-size: 1.45rem; letter-spacing: .07em; }\r\n.nav-tag { font-size: .7rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }\r\n\r\n\/* \u2500\u2500 LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.wrap { max-width: 780px; margin: 0 auto; padding: 0 24px; }\r\n\r\n\/* \u2500\u2500 HERO DEL QUIZ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.quiz-hero {\r\n text-align: center; padding: 64px 24px 52px;\r\n position: relative;\r\n}\r\n.quiz-hero::before {\r\n content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);\r\n width: 600px; height: 300px;\r\n background: radial-gradient(ellipse at center, rgba(81,112,255,.14) 0%, transparent 70%);\r\n pointer-events: none;\r\n}\r\n.quiz-eyebrow {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: rgba(255,102,196,.1); border: 1px solid rgba(255,102,196,.25);\r\n border-radius: 30px; padding: 5px 14px;\r\n font-size: .68rem; font-weight: 600; letter-spacing: .12em;\r\n text-transform: uppercase; color: #ff66c4; margin-bottom: 22px;\r\n}\r\n.quiz-hero h1 {\r\n font-family: var(--f-d); font-size: clamp(2.8rem, 7vw, 5rem);\r\n letter-spacing: .03em; line-height: .95; margin-bottom: 16px;\r\n}\r\n.quiz-hero .subtitle {\r\n font-family: var(--f-s); font-style: italic; font-size: 1.15rem;\r\n color: var(--soft); margin-bottom: 28px; line-height: 1.5;\r\n}\r\n.quiz-meta {\r\n display: flex; align-items: center; justify-content: center; gap: 20px;\r\n font-size: .78rem; color: var(--muted);\r\n}\r\n.quiz-meta span { display: flex; align-items: center; gap: 5px; }\r\n.quiz-divider {\r\n width: 80px; height: 2px; background: var(--grad);\r\n margin: 28px auto 0; border-radius: 2px;\r\n}\r\n\r\n\/* \u2500\u2500 BARRA DE PROGRESO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.progress-wrap {\r\n padding: 20px 0 8px; position: sticky; top: 64px; z-index: 50;\r\n background: rgba(12,12,18,.95); backdrop-filter: blur(16px);\r\n border-bottom: 1px solid var(--wire);\r\n}\r\n.progress-bar-label {\r\n display: flex; justify-content: space-between;\r\n font-size: .72rem; color: var(--muted); margin-bottom: 8px;\r\n padding: 0 24px;\r\n}\r\n.progress-bar-label span:last-child { color: #e2e1f0; font-weight: 600; }\r\n.progress-track {\r\n height: 3px; background: rgba(255,255,255,.07);\r\n margin: 0 24px; border-radius: 3px; overflow: hidden;\r\n}\r\n.progress-fill {\r\n height: 100%; background: var(--grad); border-radius: 3px;\r\n transition: width .5s cubic-bezier(.4,0,.2,1);\r\n width: 0%;\r\n}\r\n\r\n\/* \u2500\u2500 PREGUNTA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#quiz-container { padding: 40px 0 80px; }\r\n\r\n.question-block {\r\n display: none; animation: fadeSlide .45s cubic-bezier(.4,0,.2,1);\r\n}\r\n.question-block.active { display: block; }\r\n\r\n@keyframes fadeSlide {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.q-number {\r\n font-size: .68rem; font-weight: 600; letter-spacing: .15em;\r\n text-transform: uppercase; color: var(--muted); margin-bottom: 12px;\r\n display: flex; align-items: center; gap: 10px;\r\n}\r\n.q-number::after { content: ''; flex: 1; height: 1px; background: var(--wire); }\r\n\r\n.q-text {\r\n font-family: var(--f-s); font-size: clamp(1.3rem, 3.5vw, 1.8rem);\r\n line-height: 1.3; margin-bottom: 32px; font-weight: 700;\r\n}\r\n\r\n\/* \u2500\u2500 OPCIONES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.options-grid {\r\n display: grid; gap: 12px;\r\n}\r\n.options-grid.two-col { grid-template-columns: 1fr 1fr; }\r\n.options-grid.one-col { grid-template-columns: 1fr; }\r\n\r\n.option-btn {\r\n background: var(--ink2); border: 1.5px solid var(--wire);\r\n border-radius: var(--r); padding: 16px 20px;\r\n cursor: pointer; text-align: left; color: #e2e1f0;\r\n font-family: var(--f-b); font-size: .95rem; font-weight: 500;\r\n transition: all .22s cubic-bezier(.4,0,.2,1);\r\n display: flex; align-items: center; gap: 14px;\r\n position: relative; overflow: hidden;\r\n}\r\n.option-btn::before {\r\n content: ''; position: absolute; inset: 0;\r\n background: var(--grad); opacity: 0; transition: opacity .22s;\r\n}\r\n.option-btn:hover {\r\n border-color: rgba(81,112,255,.5);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(81,112,255,.15);\r\n}\r\n.option-btn:hover::before { opacity: .06; }\r\n.option-btn.selected {\r\n border-color: var(--b);\r\n background: rgba(81,112,255,.12);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(81,112,255,.2);\r\n}\r\n.option-btn.selected::before { opacity: .08; }\r\n\r\n.opt-letter {\r\n width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;\r\n background: rgba(255,255,255,.06); border: 1px solid var(--wire);\r\n display: grid; place-items: center;\r\n font-size: .78rem; font-weight: 700; letter-spacing: .04em;\r\n color: var(--muted); transition: all .22s; z-index: 1; position: relative;\r\n}\r\n.option-btn:hover .opt-letter,\r\n.option-btn.selected .opt-letter {\r\n background: var(--b); border-color: var(--b); color: #fff;\r\n}\r\n.opt-text { z-index: 1; position: relative; line-height: 1.35; }\r\n\r\n\/* emoji decorativo en algunas opciones *\/\r\n.opt-emoji { font-size: 1.3rem; z-index: 1; position: relative; }\r\n\r\n\/* \u2500\u2500 NAV BOTONES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.q-nav {\r\n display: flex; align-items: center; justify-content: space-between;\r\n margin-top: 32px; gap: 12px;\r\n}\r\n.btn-prev {\r\n padding: 12px 24px; border-radius: 10px; font-size: .88rem;\r\n font-weight: 600; border: 1.5px solid var(--wire); color: var(--soft);\r\n background: transparent; cursor: pointer; font-family: var(--f-b);\r\n transition: all .2s;\r\n}\r\n.btn-prev:hover { border-color: var(--b); color: #fff; }\r\n.btn-prev:disabled { opacity: .3; pointer-events: none; }\r\n\r\n.btn-next {\r\n padding: 12px 32px; border-radius: 10px; font-size: .88rem;\r\n font-weight: 600; background: var(--grad); color: #fff;\r\n border: none; cursor: pointer; font-family: var(--f-b);\r\n transition: transform .2s, box-shadow .2s, opacity .2s;\r\n box-shadow: 0 4px 20px rgba(81,112,255,.25);\r\n}\r\n.btn-next:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(81,112,255,.4); }\r\n.btn-next:disabled { opacity: .35; pointer-events: none; box-shadow: none; }\r\n\r\n\/* \u2500\u2500 PANTALLA DE RESULTADO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#result-screen {\r\n display: none; text-align: center; padding: 60px 24px 80px;\r\n animation: fadeSlide .6s ease both;\r\n}\r\n.result-confetti {\r\n font-size: 3.5rem; margin-bottom: 8px;\r\n animation: bounce .6s cubic-bezier(.36,.07,.19,.97) .3s both;\r\n}\r\n@keyframes bounce {\r\n 0%,100%{transform:scale(1)}\r\n 40%{transform:scale(1.3) rotate(-5deg)}\r\n 60%{transform:scale(.95) rotate(3deg)}\r\n}\r\n.result-congrats {\r\n font-size: .75rem; font-weight: 600; letter-spacing: .15em;\r\n text-transform: uppercase; color: var(--muted); margin-bottom: 12px;\r\n}\r\n.result-name {\r\n font-family: var(--f-d); font-size: clamp(3rem, 9vw, 6rem);\r\n letter-spacing: .04em; line-height: .95; margin-bottom: 20px;\r\n}\r\n.result-quote {\r\n font-family: var(--f-s); font-style: italic;\r\n font-size: 1.15rem; color: var(--soft); max-width: 500px;\r\n margin: 0 auto 36px; line-height: 1.6;\r\n}\r\n.result-card {\r\n background: var(--ink2); border: 1px solid var(--wire);\r\n border-radius: var(--r2); padding: 28px 32px;\r\n max-width: 520px; margin: 0 auto 36px; text-align: left;\r\n}\r\n.result-card h3 {\r\n font-size: .68rem; font-weight: 700; letter-spacing: .12em;\r\n text-transform: uppercase; color: var(--muted); margin-bottom: 14px;\r\n}\r\n.result-traits {\r\n display: flex; flex-wrap: wrap; gap: 8px;\r\n}\r\n.trait-pill {\r\n padding: 5px 13px; border-radius: 30px;\r\n background: rgba(81,112,255,.12); border: 1px solid rgba(81,112,255,.25);\r\n font-size: .78rem; font-weight: 600; color: #8fa4ff;\r\n}\r\n.btn-retry {\r\n padding: 14px 36px; border-radius: 11px; font-size: .95rem;\r\n font-weight: 600; background: var(--grad); color: #fff;\r\n border: none; cursor: pointer; font-family: var(--f-b);\r\n transition: transform .2s, box-shadow .2s;\r\n box-shadow: 0 4px 24px rgba(81,112,255,.3);\r\n}\r\n.btn-retry:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(81,112,255,.45); }\r\n\r\n.result-share {\r\n margin-top: 20px; display: flex; align-items: center;\r\n justify-content: center; gap: 10px; flex-wrap: wrap;\r\n}\r\n.btn-share {\r\n padding: 10px 20px; border-radius: 9px; font-size: .82rem;\r\n font-weight: 600; cursor: pointer; font-family: var(--f-b);\r\n border: 1.5px solid var(--wire); background: transparent;\r\n color: var(--soft); transition: all .2s;\r\n}\r\n.btn-share:hover { border-color: var(--p); color: #fff; }\r\n\r\n\/* scoreboard debug (hidden by default) *\/\r\n.scoreboard { display: none; }\r\n\r\n\/* \u2500\u2500 FOOTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.quiz-footer {\r\n text-align: center; padding: 28px;\r\n border-top: 1px solid var(--wire); font-size: .75rem; color: var(--muted);\r\n}\r\n.quiz-footer strong { color: var(--soft); }\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media (max-width: 600px) {\r\n .options-grid.two-col { grid-template-columns: 1fr; }\r\n .nav { padding: 0 16px; }\r\n .wrap { padding: 0 16px; }\r\n .q-nav { flex-direction: column-reverse; }\r\n .btn-prev, .btn-next { width: 100%; text-align: center; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAVBAR -->\r\n<header class=\"nav\">\r\n <div class=\"nav-brand grad-text\">CANCHEROS M\u00c9XICO<\/div>\r\n <span class=\"nav-tag\">\ud83e\udde0 Quiz<\/span>\r\n<\/header>\r\n\r\n<!-- HERO -->\r\n<div class=\"wrap\">\r\n <div class=\"quiz-hero\">\r\n <div class=\"quiz-eyebrow\">\ud83c\udf99\ufe0f Quiz de F\u00fatbol Mexicano<\/div>\r\n <h1>\u00bfQu\u00e9 <span class=\"grad-text\">personaje<\/span><br>del f\u00fatbol eres?<\/h1>\r\n <p class=\"subtitle\">Responde 11 preguntas y descubre<br>qu\u00e9 voz del f\u00fatbol mexicano llevas dentro<\/p>\r\n <div class=\"quiz-meta\">\r\n <span>\ud83d\udd50 3 minutos<\/span>\r\n <span>\u2753 11 preguntas<\/span>\r\n <span>\ud83c\udfc6 24 personajes<\/span>\r\n <\/div>\r\n <div class=\"quiz-divider\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- PROGRESS -->\r\n<div class=\"progress-wrap\" id=\"progress-wrap\">\r\n <div class=\"progress-bar-label\">\r\n <span>Progreso<\/span>\r\n <span id=\"progress-label\">Pregunta 1 de 11<\/span>\r\n <\/div>\r\n <div class=\"progress-track\">\r\n <div class=\"progress-fill\" id=\"progress-fill\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- QUIZ -->\r\n<div class=\"wrap\">\r\n <div id=\"quiz-container\">\r\n\r\n <!-- Q1 -->\r\n <div class=\"question-block active\" data-q=\"0\">\r\n <div class=\"q-number\">Pregunta 01<\/div>\r\n <div class=\"q-text\">\u00bfA qu\u00e9 equipo apoyas?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"1,3,10,11,14,15,16,19,23\">\r\n <span class=\"opt-emoji\">\ud83e\udd85<\/span>\r\n <span class=\"opt-text\">Am\u00e9rica<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"2,11,22\">\r\n <span class=\"opt-emoji\">\u2b21<\/span>\r\n <span class=\"opt-text\">Chivas<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"6,11,19,23\">\r\n <span class=\"opt-emoji\">\u2699\ufe0f<\/span>\r\n <span class=\"opt-text\">Cruz Azul<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"8,13,18,20,24\">\r\n <span class=\"opt-emoji\">\ud83d\udc3e<\/span>\r\n <span class=\"opt-text\">Pumas<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"7\">\r\n <span class=\"opt-emoji\">\ud83d\udd34<\/span>\r\n <span class=\"opt-text\">Toluca<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"9,17\">\r\n <span class=\"opt-emoji\">\ud83d\udd36<\/span>\r\n <span class=\"opt-text\">Atlas<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"4,21\">\r\n <span class=\"opt-emoji\">\ud83d\udc2f<\/span>\r\n <span class=\"opt-text\">Tigres<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"12\">\r\n <span class=\"opt-emoji\">\u26aa<\/span>\r\n <span class=\"opt-text\">Monterrey<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"20\">\r\n <span class=\"opt-emoji\">\ud83c\udf89<\/span>\r\n <span class=\"opt-text\">Otro<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\" disabled>\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q2 -->\r\n <div class=\"question-block\" data-q=\"1\">\r\n <div class=\"q-number\">Pregunta 02<\/div>\r\n <div class=\"q-text\">\u00bfPrefieres ver el juego en la tele o en el estadio?<\/div>\r\n <div class=\"options-grid one-col\">\r\n <button class=\"option-btn\" data-points=\"1,2,3,4,5,7,8,14,16,17,19,20,22,23\">\r\n <span class=\"opt-emoji\">\ud83d\udcfa<\/span>\r\n <span class=\"opt-text\">En la tele, desde mi sill\u00f3n y con toda la comodidad<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"6,9,10,11,12,13,15,18,21,24\">\r\n <span class=\"opt-emoji\">\ud83c\udfdf\ufe0f<\/span>\r\n <span class=\"opt-text\">En el estadio, nada como sentir la adrenalina en vivo<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q3 -->\r\n <div class=\"question-block\" data-q=\"2\">\r\n <div class=\"q-number\">Pregunta 03<\/div>\r\n <div class=\"q-text\">\u00bfD\u00f3nde prefieres ver un juego de la Selecci\u00f3n Mexicana?<\/div>\r\n <div class=\"options-grid one-col\">\r\n <button class=\"option-btn\" data-points=\"1,2,3,4,5,6,14,15,16,18,19,21,22,23\">\r\n <span class=\"opt-emoji\">\ud83d\udce1<\/span>\r\n <span class=\"opt-text\">Televisa \u2014 ah\u00ed est\u00e1 la magia del f\u00fatbol mexicano<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"7,8,9,10,11,13,17,20,24\">\r\n <span class=\"opt-emoji\">\ud83d\udcfb<\/span>\r\n <span class=\"opt-text\">TV Azteca \u2014 mejor producci\u00f3n y m\u00e1s emoci\u00f3n<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"12\">\r\n <span class=\"opt-emoji\">\ud83d\ude34<\/span>\r\n <span class=\"opt-text\">No veo los juegos de la Selecci\u00f3n<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q4 -->\r\n <div class=\"question-block\" data-q=\"3\">\r\n <div class=\"q-number\">Pregunta 04<\/div>\r\n <div class=\"q-text\">\u00bfHasta qu\u00e9 instancia crees que llegar\u00e1 M\u00e9xico en el pr\u00f3ximo campeonato?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"1,5,7,20\">\r\n <span class=\"opt-emoji\">\ud83d\ude2c<\/span>\r\n <span class=\"opt-text\">Fase de Grupos<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"2,3,4,5,6,8,9\">\r\n <span class=\"opt-emoji\">\ud83d\ude10<\/span>\r\n <span class=\"opt-text\">Dieciseisavos<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"10,11,12,17,19,22,23\">\r\n <span class=\"opt-emoji\">\ud83d\ude42<\/span>\r\n <span class=\"opt-text\">Octavos de Final<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"21,18,14,15,16\">\r\n <span class=\"opt-emoji\">\ud83d\udd25<\/span>\r\n <span class=\"opt-text\">Cuartos de Final<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"13,14,18,24\">\r\n <span class=\"opt-emoji\">\ud83d\ude80<\/span>\r\n <span class=\"opt-text\">Semifinal<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"13,14,18,24\">\r\n <span class=\"opt-emoji\">\ud83c\udfc6<\/span>\r\n <span class=\"opt-text\">\u00a1Campe\u00f3n del Mundo!<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q5 -->\r\n <div class=\"question-block\" data-q=\"4\">\r\n <div class=\"q-number\">Pregunta 05<\/div>\r\n <div class=\"q-text\">\u00bfCu\u00e1l es tu FIFA favorito?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"3,4,6,14,16,17\">\r\n <span class=\"opt-emoji\">\ud83c\udfae<\/span>\r\n <span class=\"opt-text\">FIFA 06<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"1,2,12,13\">\r\n <span class=\"opt-emoji\">\ud83c\udfae<\/span>\r\n <span class=\"opt-text\">FIFA 11<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"18\">\r\n <span class=\"opt-emoji\">\ud83c\udfae<\/span>\r\n <span class=\"opt-text\">FIFA 13<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"17,15\">\r\n <span class=\"opt-emoji\">\ud83c\udfae<\/span>\r\n <span class=\"opt-text\">FIFA 15<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"15\">\r\n <span class=\"opt-emoji\">\ud83c\udfae<\/span>\r\n <span class=\"opt-text\">FIFA 16<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"15\">\r\n <span class=\"opt-emoji\">\ud83c\udfae<\/span>\r\n <span class=\"opt-text\">FIFA 17<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"20,5,24,18,7,8,9,10,11\">\r\n <span class=\"opt-emoji\">\ud83d\udc51<\/span>\r\n <span class=\"opt-text\">\u00bfFIFA? \u00a1PES 6 es el mejor!<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q6 -->\r\n <div class=\"question-block\" data-q=\"5\">\r\n <div class=\"q-number\">Pregunta 06<\/div>\r\n <div class=\"q-text\">\u00bfCrees que Juli\u00e1n Qui\u00f1ones merece ser parte de la Selecci\u00f3n Mexicana?<\/div>\r\n <div class=\"options-grid one-col\">\r\n <button class=\"option-btn\" data-points=\"15,16,17,19\">\r\n <span class=\"opt-emoji\">\u2705<\/span>\r\n <span class=\"opt-text\">S\u00ed \u2014 se lo gan\u00f3 dentro de la cancha y hay que darle oportunidad<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"4,18,20\">\r\n <span class=\"opt-emoji\">\u274c<\/span>\r\n <span class=\"opt-text\">No \u2014 tiene que gan\u00e1rselo de otra manera<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q7 -->\r\n <div class=\"question-block\" data-q=\"6\">\r\n <div class=\"q-number\">Pregunta 07<\/div>\r\n <div class=\"q-text\">\u00bfQu\u00e9 posici\u00f3n juegas en la reta?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"5,1,12,13,14,16,20\">\r\n <span class=\"opt-emoji\">\ud83e\udde4<\/span>\r\n <span class=\"opt-text\">Portero<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"2,6,7,9,21\">\r\n <span class=\"opt-emoji\">\ud83d\udee1\ufe0f<\/span>\r\n <span class=\"opt-text\">Defensa<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"4,11,17,19,22,23,24\">\r\n <span class=\"opt-emoji\">\u2699\ufe0f<\/span>\r\n <span class=\"opt-text\">Mediocampista<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"3,8,10,18\">\r\n <span class=\"opt-emoji\">\u26a1<\/span>\r\n <span class=\"opt-text\">Delantero<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q8 -->\r\n <div class=\"question-block\" data-q=\"7\">\r\n <div class=\"q-number\">Pregunta 08<\/div>\r\n <div class=\"q-text\">\u00bfCon qu\u00e9 equipo le entras al FIFA para jugar contra tu compa?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"12,16,23\">\r\n <span class=\"opt-emoji\">\ud83d\udd35\ud83d\udd34<\/span>\r\n <span class=\"opt-text\">PSG<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"12,16,23\">\r\n <span class=\"opt-emoji\">\ud83d\udd35\u26aa<\/span>\r\n <span class=\"opt-text\">Manchester City<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"18,6,24,13\">\r\n <span class=\"opt-emoji\">\u26aa<\/span>\r\n <span class=\"opt-text\">Real Madrid<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"1,2,3,5,7,8,9,10,11,14,19,21,22,23\">\r\n <span class=\"opt-emoji\">\ud83d\udd35\ud83d\udd34<\/span>\r\n <span class=\"opt-text\">Barcelona<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"4,20\">\r\n <span class=\"opt-emoji\">\ud83d\udd34\u26aa<\/span>\r\n <span class=\"opt-text\">Bayern M\u00fanich<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q9 -->\r\n <div class=\"question-block\" data-q=\"8\">\r\n <div class=\"q-number\">Pregunta 09<\/div>\r\n <div class=\"q-text\">\u00bfQui\u00e9n es el mejor futbolista de la historia?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"22,23,19,16,15,14,11,10,9,8,7,5,4,3,2,1\">\r\n <span class=\"opt-emoji\">\ud83d\udc10<\/span>\r\n <span class=\"opt-text\">Messi \u2014 el mejor de todos los tiempos<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"24,21,16,15,13,6\">\r\n <span class=\"opt-emoji\">\ud83c\udfc5<\/span>\r\n <span class=\"opt-text\">Cristiano Ronaldo \u2014 \u00e9l es el verdadero CR7<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"20\">\r\n <span class=\"opt-emoji\">\u26bd<\/span>\r\n <span class=\"opt-text\">Pel\u00e9 \u2014 el rey eterno del f\u00fatbol<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"12\">\r\n <span class=\"opt-emoji\">\u270b<\/span>\r\n <span class=\"opt-text\">Maradona \u2014 la mano de Dios<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"18\">\r\n <span class=\"opt-emoji\">\ud83c\uddf2\ud83c\uddfd<\/span>\r\n <span class=\"opt-text\">Hugo S\u00e1nchez \u2014 el mejor mexicano de la historia<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Q10 -->\r\n <div class=\"question-block\" data-q=\"9\">\r\n <div class=\"q-number\">Pregunta 10<\/div>\r\n <div class=\"q-text\">\u00bfQu\u00e9 cenar\u00edas para ver un partido?<\/div>\r\n <div class=\"options-grid two-col\">\r\n <button class=\"option-btn\" data-points=\"1,2,3,4,6,7,8,9,10,11,13,14,15,17,18,19,20,22,23\">\r\n <span class=\"opt-emoji\">\ud83c\udf2e<\/span>\r\n <span class=\"opt-text\">Tacos \u2014 lo de siempre y lo mejor<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"5,16\">\r\n <span class=\"opt-emoji\">\ud83c\udf54<\/span>\r\n <span class=\"opt-text\">Hamburguesas<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"5,16\">\r\n <span class=\"opt-emoji\">\ud83c\udf55<\/span>\r\n <span class=\"opt-text\">Pizza<\/span>\r\n <\/button>\r\n <button class=\"option-btn\" data-points=\"4,6,12,21,24\">\r\n <span class=\"opt-emoji\">\ud83e\udd69<\/span>\r\n <span class=\"opt-text\">Carne Asada \u2014 \u00a1puras brasas!<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn-prev\">\u2190 Anterior<\/button>\r\n <button class=\"btn-next\" disabled>Siguiente \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/quiz-container -->\r\n\r\n <!-- RESULTADO -->\r\n <div id=\"result-screen\">\r\n <div class=\"result-confetti\" id=\"result-emoji\">\ud83c\udf99\ufe0f<\/div>\r\n <div class=\"result-congrats\">\u00a1Felicidades! Eres\u2026<\/div>\r\n <div class=\"result-name grad-text\" id=\"result-name\">\u2014<\/div>\r\n <p class=\"result-quote\" id=\"result-quote\"><\/p>\r\n <div class=\"result-card\">\r\n <h3>Tu perfil de canchero<\/h3>\r\n <div class=\"result-traits\" id=\"result-traits\"><\/div>\r\n <\/div>\r\n <button class=\"btn-retry\" onclick=\"resetQuiz()\">\ud83d\udd04 Intentar de nuevo<\/button>\r\n <div class=\"result-share\">\r\n <button class=\"btn-share\" onclick=\"shareResult()\">\ud83d\udce4 Compartir resultado<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div><!-- \/wrap -->\r\n\r\n<footer class=\"quiz-footer\">\r\n <strong>Cancheros M\u00e9xico<\/strong> \u00b7 Quiz de F\u00fatbol \u00b7 2026\r\n<\/footer>\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n L\u00d3GICA DEL QUIZ\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\nconst TOTAL_Q = 10;\r\n\r\n\/\/ Personajes indexados del 1 al 24\r\nconst PERSONAJES = {\r\n 1: { nombre: \"Javier Alarc\u00f3n\", emoji: \"\ud83c\udf99\ufe0f\", quote: \"Anal\u00edtico, elegante y con mucha historia en el periodismo deportivo. Ves el f\u00fatbol con profundidad y perspectiva.\", traits: [\"Periodista cl\u00e1sico\",\"F\u00fatbol con clase\",\"Am\u00e9rica en el coraz\u00f3n\",\"Tele > estadio\"] },\r\n 2: { nombre: \"Jorge Pietrasanta\", emoji: \"\ud83d\udcfa\", quote: \"Narrador nato, siempre cercano al aficionado. Eres de los que disfrutan el f\u00fatbol con toda la familia.\", traits: [\"Narrador\", \"F\u00fatbol familiar\", \"Chivas fan\", \"Televisivo\"] },\r\n 3: { nombre: \"Ricardo Pelaez\", emoji: \"\ud83e\uddd1\u200d\ud83d\udcbc\", quote: \"Directo, frontal y con mucho car\u00e1cter. Sabes lo que quieres y no te andas por las ramas.\", traits: [\"Directivo nato\",\"F\u00fatbol practico\",\"Am\u00e9rica o Barcelona\",\"Tacos y punto\"] },\r\n 4: { nombre: \"Roberto Gomez Junco\", emoji: \"\ud83d\udc2f\", quote: \"Apasionado, fuerte y con opini\u00f3n sobre todo. Tigres es tu vida y no hay quien te baje de eso.\", traits: [\"Tigres fan\",\"T\u00e9cnico t\u00e1ctico\",\"Gana o gana\",\"PES > FIFA\"] },\r\n 5: { nombre: \"David Faitelson\", emoji: \"\ud83d\udd25\", quote: \"Pol\u00e9mico, intenso y con ganas de debatir. Donde hay controversia, ah\u00ed est\u00e1s t\u00fa. No te callas.\", traits: [\"Rey de la pol\u00e9mica\",\"Debate 24\/7\",\"Cr\u00edtico del f\u00fatbol\",\"Hamburguesas al estadio\"] },\r\n 6: { nombre: \"Alberto Lati\", emoji: \"\ud83c\udf0d\", quote: \"Cosmopolita, viajero y con el f\u00fatbol internacional en la sangre. Prefieres la Champions que el Cl\u00e1sico.\", traits: [\"F\u00fatbol europeo\",\"Cruz Azul\",\"Estadio s\u00ed\",\"Carne asada en Europa\"] },\r\n 7: { nombre: \"Martinoli\", emoji: \"\ud83c\udfa4\", quote: \"El m\u00e1s querido y creativo de la narraci\u00f3n. Inventas palabras, pones apodos y haces que el f\u00fatbol sea una fiesta.\", traits: [\"Narrador legendario\",\"Toluca fan\",\"TV Azteca\",\"PES forever\"] },\r\n 8: { nombre: \"Luis Garcia\", emoji: \"\ud83d\udc54\", quote: \"Elegante, anal\u00edtico y con mucha experiencia dentro y fuera de la cancha. Pumas es tu casa.\", traits: [\"Ex jugador\",\"Pumas fan\",\"An\u00e1lisis profundo\",\"PES 6\"] },\r\n 9: { nombre: \"David Medrano\", emoji: \"\ud83d\udcf0\", quote: \"Periodista de fondo, investigador nato y siempre con la nota exclusiva antes que nadie.\", traits: [\"Periodismo de cancha\",\"Atlas en la mente\",\"Investigador\",\"TV Azteca\"] },\r\n 10: { nombre: \"Zague\", emoji: \"\u26bd\", quote: \"Goleador de coraz\u00f3n, siempre positivo y con el Am\u00e9rica tatuado. Crees que M\u00e9xico puede llegar lejos.\", traits: [\"Am\u00e9rica legend\",\"Goleador\",\"Estadio s\u00ed\",\"PES 6\"] },\r\n 11: { nombre: \"El Warrior\", emoji: \"\ud83e\udd4a\", quote: \"Intenso, directo y con mucha pasi\u00f3n. No te importa caerle bien a todos; t\u00fa dices lo que piensas.\", traits: [\"Sin filtros\",\"Am\u00e9rica y Cruz Azul\",\"PES 6\",\"El m\u00e1s intenso\"] },\r\n 12: { nombre: \"Willie Gonzalez\", emoji: \"\u26aa\", quote: \"Monterrey es tu identidad y Maradona tu dios. Eres de los que prefieren la carne asada a cualquier otra cosa.\", traits: [\"Rayado de coraz\u00f3n\",\"Maradona fan\",\"Carne asada\",\"Estadio > tele\"] },\r\n 13: { nombre: \"Jorge Campos\", emoji: \"\ud83e\udde4\", quote: \"Portero legendario, colorido y \u00fanico. Rompes todos los esquemas y lo haces con estilo propio.\", traits: [\"Portero ic\u00f3nico\",\"Pumas origen\",\"Jugador completo\",\"Estadio s\u00ed\"] },\r\n 14: { nombre: \"Mauricio Ymay\", emoji: \"\ud83c\udf99\ufe0f\", quote: \"Positivo, creyente en M\u00e9xico y siempre con el optimismo en el rostro. Am\u00e9rica es tu bandera.\", traits: [\"Optimista\",\"Am\u00e9rica\",\"Selecci\u00f3n creyente\",\"Tele y estadio\"] },\r\n 15: { nombre: \"Andr\u00e9s Vaca\", emoji: \"\ud83d\udcf1\", quote: \"Moderno, digital y con el f\u00fatbol en todas las pantallas. Eres del nuevo periodismo deportivo.\", traits: [\"Periodismo digital\",\"Am\u00e9rica\",\"FIFA 16\/17\",\"Messi > todos\"] },\r\n 16: { nombre: \"Alvaro Morales\", emoji: \"\ud83d\udde3\ufe0f\", quote: \"Controvertido, explosivo y con una opini\u00f3n para cada cosa. Nadie se queda callado cuando hablas t\u00fa.\", traits: [\"Pol\u00e9mico\",\"Am\u00e9rica fan\",\"Messi o CR7\",\"Hamburguesas\"] },\r\n 17: { nombre: \"Hector Huerta\", emoji: \"\ud83d\udce1\", quote: \"Reportero comprometido, en el campo siempre. Atlas en el alma y la verdad en la pluma.\", traits: [\"Reportero\",\"Atlas fan\",\"FIFA 15\",\"TV Azteca\"] },\r\n 18: { nombre: \"Hugo S\u00e1nchez\", emoji: \"\ud83e\udd45\", quote: \"El mejor de M\u00e9xico, sin discusi\u00f3n. Siempre seguro de ti mismo y con est\u00e1ndares alt\u00edsimos.\", traits: [\"Leyenda viva\",\"Pumas y selecci\u00f3n\",\"Pentapichichi\",\"Hugo S\u00e1nchez > todos\"] },\r\n 19: { nombre: \"Paco Gabriel de Anda\", emoji: \"\ud83c\udfc5\", quote: \"Formado en las grandes ligas del periodismo. Am\u00e9rica y el f\u00fatbol bien hecho son tu marca personal.\", traits: [\"Am\u00e9rica fan\",\"Periodismo serio\",\"Messi\",\"Tacos siempre\"] },\r\n 20: { nombre: \"Jos\u00e9 Ram\u00f3n Fern\u00e1ndez\", emoji: \"\ud83d\udc74\", quote: \"El decano del periodismo deportivo. Dices verdades inc\u00f3modas y no te importa qui\u00e9n se moleste.\", traits: [\"El decano\",\"Pel\u00e9 es el mejor\",\"PES > FIFA\",\"Cr\u00edtico eterno\"] },\r\n 21: { nombre: \"Sergio Dipp\", emoji: \"\ud83c\udf1f\", quote: \"Carism\u00e1tico, emocionante y con el don de la frase memorable. Tigres y el estadio son tu h\u00e1bitat.\", traits: [\"Carism\u00e1tico\",\"Tigres\",\"Estadio siempre\",\"CR7 fan\"] },\r\n 22: { nombre: \"Ciro Procuna\", emoji: \"\ud83c\udfb6\", quote: \"Narrador musical, po\u00e9tico y con el f\u00fatbol en el alma. Chivas y Messi son tu combinaci\u00f3n perfecta.\", traits: [\"Narrador po\u00e9tico\",\"Chivas\",\"Messi\",\"Tele\"] },\r\n 23: { nombre: \"Ricardo Puig\", emoji: \"\ud83d\udd8a\ufe0f\", quote: \"Anal\u00edtico, detallista y siempre con los datos a la mano. Am\u00e9rica y el PSG hacen tu universo futbol\u00edstico.\", traits: [\"Anal\u00edtico\",\"Am\u00e9rica y PSG\",\"Messi\",\"Tele\"] },\r\n 24: { nombre: \"Mario Carrillo\", emoji: \"\ud83e\udde0\", quote: \"T\u00e9cnico de raza, t\u00e1ctico y con mucho car\u00e1cter. Pumas es tu ra\u00edz y el PES tu juego.\", traits: [\"Ex t\u00e9cnico\",\"Pumas\",\"T\u00e1ctica pura\",\"PES 6\"] },\r\n};\r\n\r\n\/\/ Estado del quiz\r\nlet scores = {};\r\nlet currentQ = 0;\r\nlet answers = {};\r\n\r\nfunction init() {\r\n for (let i = 1; i <= 24; i++) scores[i] = 0;\r\n currentQ = 0;\r\n answers = {};\r\n updateProgress();\r\n attachListeners();\r\n}\r\n\r\nfunction attachListeners() {\r\n document.querySelectorAll('.question-block').forEach((block, qi) => {\r\n const opts = block.querySelectorAll('.option-btn');\r\n const btnNext = block.querySelector('.btn-next');\r\n const btnPrev = block.querySelector('.btn-prev');\r\n\r\n opts.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n \/\/ deselect all\r\n opts.forEach(b => b.classList.remove('selected'));\r\n btn.classList.add('selected');\r\n answers[qi] = btn.dataset.points;\r\n btnNext.disabled = false;\r\n\r\n \/\/ auto-avance en m\u00f3vil despu\u00e9s de 300ms\r\n if (window.innerWidth < 600) {\r\n setTimeout(() => btnNext.click(), 380);\r\n }\r\n });\r\n });\r\n\r\n btnNext && btnNext.addEventListener('click', () => {\r\n if (!answers[qi]) return;\r\n applyPoints(answers[qi]);\r\n\r\n if (qi === TOTAL_Q - 1) {\r\n showResult();\r\n } else {\r\n goTo(qi + 1);\r\n }\r\n });\r\n\r\n btnPrev && btnPrev.addEventListener('click', () => {\r\n \/\/ quitar puntos de la respuesta actual si ya existe\r\n if (answers[qi]) {\r\n removePoints(answers[qi]);\r\n \/\/ ya no es v\u00e1lida; quitar selecci\u00f3n visual\r\n opts.forEach(b => b.classList.remove('selected'));\r\n btnNext.disabled = true;\r\n delete answers[qi];\r\n }\r\n goTo(qi - 1);\r\n });\r\n });\r\n}\r\n\r\nfunction applyPoints(pointsStr) {\r\n if (!pointsStr) return;\r\n pointsStr.split(',').map(Number).forEach(id => {\r\n if (id >= 1 && id <= 24) scores[id]++;\r\n });\r\n}\r\n\r\nfunction removePoints(pointsStr) {\r\n if (!pointsStr) return;\r\n pointsStr.split(',').map(Number).forEach(id => {\r\n if (id >= 1 && id <= 24) scores[id] = Math.max(0, scores[id] - 1);\r\n });\r\n}\r\n\r\nfunction goTo(index) {\r\n document.querySelectorAll('.question-block').forEach((b, i) => {\r\n b.classList.toggle('active', i === index);\r\n });\r\n currentQ = index;\r\n updateProgress();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n\r\n \/\/ restaurar selecci\u00f3n visual si hay respuesta guardada\r\n const block = document.querySelectorAll('.question-block')[index];\r\n if (answers[index]) {\r\n const opts = block.querySelectorAll('.option-btn');\r\n opts.forEach(btn => {\r\n btn.classList.toggle('selected', btn.dataset.points === answers[index]);\r\n });\r\n block.querySelector('.btn-next').disabled = false;\r\n }\r\n}\r\n\r\nfunction updateProgress() {\r\n const pct = Math.round((currentQ \/ TOTAL_Q) * 100);\r\n document.getElementById('progress-fill').style.width = pct + '%';\r\n document.getElementById('progress-label').textContent =\r\n `Pregunta ${currentQ + 1} de ${TOTAL_Q}`;\r\n}\r\n\r\nfunction showResult() {\r\n \/\/ calcular ganador\r\n const maxScore = Math.max(...Object.values(scores));\r\n const winners = Object.keys(scores)\r\n .map(Number)\r\n .filter(id => scores[id] === maxScore);\r\n\r\n \/\/ si hay empate: elegir al azar\r\n const winnerId = winners[Math.floor(Math.random() * winners.length)];\r\n const p = PERSONAJES[winnerId];\r\n\r\n \/\/ mostrar resultado\r\n document.getElementById('quiz-container').style.display = 'none';\r\n document.getElementById('result-screen').style.display = 'block';\r\n document.getElementById('progress-wrap').style.display = 'none';\r\n\r\n document.getElementById('result-emoji').textContent = p.emoji;\r\n document.getElementById('result-name').textContent = p.nombre;\r\n document.getElementById('result-quote').textContent = p.quote;\r\n\r\n const traitsEl = document.getElementById('result-traits');\r\n traitsEl.innerHTML = '';\r\n p.traits.forEach(t => {\r\n const pill = document.createElement('span');\r\n pill.className = 'trait-pill';\r\n pill.textContent = t;\r\n traitsEl.appendChild(pill);\r\n });\r\n\r\n window.currentResult = p.nombre;\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\nfunction resetQuiz() {\r\n \/\/ reset scores\r\n for (let i = 1; i <= 24; i++) scores[i] = 0;\r\n answers = {};\r\n currentQ = 0;\r\n\r\n document.querySelectorAll('.option-btn').forEach(b => b.classList.remove('selected'));\r\n document.querySelectorAll('.btn-next').forEach(b => b.disabled = true);\r\n\r\n document.getElementById('result-screen').style.display = 'none';\r\n document.getElementById('quiz-container').style.display = 'block';\r\n document.getElementById('progress-wrap').style.display = 'block';\r\n\r\n goTo(0);\r\n document.querySelectorAll('.question-block')[0].querySelector('.btn-next').disabled = true;\r\n}\r\n\r\nfunction shareResult() {\r\n const name = window.currentResult || 'alguien \u00e9pico';\r\n const text = `\u00a1Hice el quiz de Cancheros M\u00e9xico y soy ${name}! \ud83c\udf99\ufe0f\u26bd \u00bfY t\u00fa? Desc\u00fabrelo en cancherosmx.com`;\r\n if (navigator.share) {\r\n navigator.share({ title: 'Cancheros M\u00e9xico Quiz', text });\r\n } else {\r\n navigator.clipboard.writeText(text).then(() => {\r\n alert('\u00a1Resultado copiado! P\u00e9galo donde quieras \ud83c\udf89');\r\n });\r\n }\r\n}\r\n\r\n\/\/ INICIO\r\ninit();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>\u00bfQu\u00e9 personaje del f\u00fatbol mexicano eres? \u2014 Cancheros M\u00e9xico CANCHEROS M\u00c9XICO \ud83e\udde0 Quiz \ud83c\udf99\ufe0f Quiz de F\u00fatbol Mexicano \u00bfQu\u00e9 personajedel f\u00fatbol eres? Responde 11 preguntas y descubrequ\u00e9 voz del f\u00fatbol mexicano llevas dentro \ud83d\udd50 3 minutos \u2753 11 preguntas \ud83c\udfc6 24 personajes Progreso Pregunta 1 de 11 Pregunta 01 \u00bfA qu\u00e9 equipo apoyas? \ud83e\udd85 Am\u00e9rica […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":11,"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/pages\/37\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/cancheros.com.mx\/index.php\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}