{"product_id":"juego","title":"JUEGO","description":"\u003cbody\u003e\n\n\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eEXPEDITION — Viaje al centro de ti\u003c\/title\u003e\n  \u003cstyle\u003e\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;700;900\u0026family=Inter:wght@300;400;500;600\u0026display=swap');\n\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n    :root {\n      --bg: #080810;\n      --gold: #D4A853;\n      --gold-light: #F0C87A;\n      --text: #EDE8DC;\n      --text-dim: #9A9080;\n      --selva: #1a4a2e;\n      --selva-light: #2d7a4e;\n      --oceano: #0d2a4a;\n      --oceano-light: #1a5a8a;\n      --montana: #2a1a3e;\n      --montana-light: #5a3a8a;\n      --ciudad: #3a2a0a;\n      --ciudad-light: #9a7a2a;\n    }\n\n    html, body {\n      height: 100%;\n      font-family: 'Inter', sans-serif;\n      background: var(--bg);\n      color: var(--text);\n      overflow: hidden;\n    }\n\n    \/* ===== STARS BACKGROUND ===== *\/\n    #stars-canvas {\n      position: fixed;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n      z-index: 0;\n      pointer-events: none;\n    }\n\n    \/* ===== GAME WRAPPER ===== *\/\n    #game {\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      height: 100vh;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    \/* ===== PROGRESS BAR ===== *\/\n    #progress-bar {\n      position: fixed;\n      top: 0; left: 0;\n      width: 100%;\n      height: 3px;\n      background: rgba(255,255,255,0.1);\n      z-index: 100;\n      display: none;\n    }\n    #progress-fill {\n      height: 100%;\n      background: linear-gradient(90deg, var(--gold), var(--gold-light));\n      transition: width 0.6s ease;\n      width: 0%;\n    }\n\n    \/* ===== ZONE INDICATOR ===== *\/\n    #zone-indicator {\n      position: fixed;\n      top: 16px; left: 50%;\n      transform: translateX(-50%);\n      z-index: 100;\n      display: none;\n      align-items: center;\n      gap: 8px;\n      background: rgba(255,255,255,0.06);\n      backdrop-filter: blur(10px);\n      border: 1px solid rgba(255,255,255,0.1);\n      border-radius: 100px;\n      padding: 6px 16px;\n      font-size: 12px;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--text-dim);\n    }\n    #zone-indicator .zone-dot {\n      width: 6px; height: 6px;\n      border-radius: 50%;\n      background: var(--gold);\n    }\n\n    \/* ===== SCREENS ===== *\/\n    .screen {\n      display: none;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      max-width: 680px;\n      min-height: 100vh;\n      padding: 80px 20px 40px;\n      animation: fadeUp 0.7s ease forwards;\n    }\n    .screen.active { display: flex; }\n\n    @keyframes fadeUp {\n      from { opacity: 0; transform: translateY(30px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n\n    \/* ===== INTRO SCREEN ===== *\/\n    #screen-intro {\n      text-align: center;\n      gap: 0;\n    }\n    .intro-label {\n      font-size: 11px;\n      letter-spacing: 0.25em;\n      text-transform: uppercase;\n      color: var(--gold);\n      margin-bottom: 24px;\n      animation: fadeIn 1s ease 0.3s both;\n    }\n    .intro-title {\n      font-family: 'Playfair Display', serif;\n      font-size: clamp(52px, 10vw, 96px);\n      font-weight: 900;\n      line-height: 0.9;\n      letter-spacing: -0.02em;\n      background: linear-gradient(180deg, #fff 0%, var(--gold-light) 100%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n      margin-bottom: 16px;\n      animation: fadeIn 1s ease 0.5s both;\n    }\n    .intro-sub {\n      font-family: 'Playfair Display', serif;\n      font-size: clamp(16px, 3vw, 22px);\n      font-style: italic;\n      color: var(--text-dim);\n      margin-bottom: 48px;\n      animation: fadeIn 1s ease 0.7s both;\n    }\n    .intro-divider {\n      width: 60px;\n      height: 1px;\n      background: var(--gold);\n      margin: 0 auto 32px;\n      animation: fadeIn 1s ease 0.9s both;\n    }\n    .intro-desc {\n      font-size: 15px;\n      line-height: 1.8;\n      color: var(--text-dim);\n      max-width: 400px;\n      margin: 0 auto 48px;\n      animation: fadeIn 1s ease 1.1s both;\n    }\n    .intro-meta {\n      display: flex;\n      gap: 32px;\n      justify-content: center;\n      margin-bottom: 48px;\n      animation: fadeIn 1s ease 1.3s both;\n    }\n    .intro-meta-item {\n      text-align: center;\n    }\n    .intro-meta-item strong {\n      display: block;\n      font-size: 20px;\n      color: var(--gold);\n      font-family: 'Playfair Display', serif;\n    }\n    .intro-meta-item span {\n      font-size: 11px;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      color: var(--text-dim);\n    }\n    .btn-primary {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      background: linear-gradient(135deg, var(--gold), var(--gold-light));\n      color: #1a1206;\n      font-weight: 700;\n      font-size: 15px;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n      padding: 18px 40px;\n      border-radius: 100px;\n      border: none;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s;\n      box-shadow: 0 0 40px rgba(212, 168, 83, 0.3);\n      animation: fadeIn 1s ease 1.5s both;\n      text-decoration: none;\n    }\n    .btn-primary:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 0 60px rgba(212, 168, 83, 0.5);\n    }\n    .btn-primary:active { transform: translateY(0); }\n    .btn-arrow { font-size: 18px; }\n\n    \/* ===== ZONE TRANSITION ===== *\/\n    #screen-zone-intro {\n      text-align: center;\n      gap: 24px;\n    }\n    .zone-big-emoji {\n      font-size: 80px;\n      animation: pulse 2s ease infinite;\n    }\n    @keyframes pulse {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.05); }\n    }\n    .zone-intro-number {\n      font-size: 11px;\n      letter-spacing: 0.25em;\n      text-transform: uppercase;\n      color: var(--gold);\n    }\n    .zone-intro-title {\n      font-family: 'Playfair Display', serif;\n      font-size: clamp(36px, 7vw, 64px);\n      font-weight: 700;\n    }\n    .zone-intro-desc {\n      font-size: 16px;\n      color: var(--text-dim);\n      max-width: 360px;\n      line-height: 1.7;\n    }\n    .zone-intro-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      background: rgba(255,255,255,0.08);\n      border: 1px solid rgba(255,255,255,0.15);\n      color: var(--text);\n      font-size: 14px;\n      font-weight: 500;\n      padding: 14px 28px;\n      border-radius: 100px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .zone-intro-btn:hover {\n      background: rgba(255,255,255,0.12);\n      border-color: var(--gold);\n      color: var(--gold);\n    }\n\n    \/* ===== QUESTION SCREEN ===== *\/\n    #screen-question {\n      gap: 32px;\n      width: 100%;\n      max-width: 680px;\n    }\n    .q-zone-tag {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n      color: var(--text-dim);\n      align-self: flex-start;\n    }\n    .q-zone-emoji { font-size: 16px; }\n    .q-counter {\n      margin-left: auto;\n      background: rgba(255,255,255,0.06);\n      border-radius: 100px;\n      padding: 4px 12px;\n      font-size: 11px;\n      color: var(--text-dim);\n    }\n    .q-text {\n      font-family: 'Playfair Display', serif;\n      font-size: clamp(20px, 4vw, 30px);\n      font-weight: 700;\n      line-height: 1.3;\n      text-align: left;\n    }\n    .q-options {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px;\n      width: 100%;\n    }\n    .q-option {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      background: rgba(255,255,255,0.04);\n      border: 1px solid rgba(255,255,255,0.08);\n      border-radius: 20px;\n      padding: 20px;\n      cursor: pointer;\n      transition: all 0.25s;\n      text-align: left;\n      position: relative;\n      overflow: hidden;\n    }\n    .q-option::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(135deg, var(--gold), transparent);\n      opacity: 0;\n      transition: opacity 0.25s;\n    }\n    .q-option:hover {\n      border-color: rgba(212, 168, 83, 0.4);\n      transform: translateY(-2px);\n      background: rgba(255,255,255,0.07);\n    }\n    .q-option:hover::before { opacity: 0.05; }\n    .q-option.selected {\n      border-color: var(--gold);\n      background: rgba(212, 168, 83, 0.1);\n      transform: translateY(-2px);\n    }\n    .q-option-emoji {\n      font-size: 32px;\n    }\n    .q-option-text {\n      font-size: 13px;\n      line-height: 1.5;\n      color: var(--text);\n      font-weight: 400;\n    }\n\n    \/* ===== RESULT SCREEN ===== *\/\n    #screen-result {\n      text-align: center;\n      gap: 0;\n    }\n    .result-label {\n      font-size: 11px;\n      letter-spacing: 0.25em;\n      text-transform: uppercase;\n      color: var(--gold);\n      margin-bottom: 20px;\n    }\n    .result-emoji {\n      font-size: 80px;\n      margin-bottom: 16px;\n      display: block;\n      animation: floatEmoji 3s ease infinite;\n    }\n    @keyframes floatEmoji {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-10px); }\n    }\n    .result-archetype {\n      font-family: 'Playfair Display', serif;\n      font-size: clamp(32px, 6vw, 54px);\n      font-weight: 900;\n      margin-bottom: 8px;\n      background: linear-gradient(135deg, #fff, var(--gold-light));\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n    }\n    .result-tagline {\n      font-family: 'Playfair Display', serif;\n      font-style: italic;\n      font-size: clamp(16px, 3vw, 20px);\n      color: var(--gold);\n      margin-bottom: 40px;\n    }\n    .result-divider {\n      width: 60px; height: 1px;\n      background: rgba(255,255,255,0.15);\n      margin: 0 auto 32px;\n    }\n    .result-preview-box {\n      background: rgba(255,255,255,0.04);\n      border: 1px solid rgba(255,255,255,0.1);\n      border-radius: 24px;\n      padding: 28px;\n      margin-bottom: 32px;\n      text-align: left;\n      position: relative;\n      overflow: hidden;\n    }\n    .result-preview-box::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 0; right: 0;\n      height: 80px;\n      background: linear-gradient(transparent, rgba(8,8,16,0.95));\n    }\n    .result-preview-title {\n      font-size: 11px;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n      color: var(--gold);\n      margin-bottom: 12px;\n    }\n    .result-preview-text {\n      font-size: 15px;\n      line-height: 1.8;\n      color: var(--text-dim);\n    }\n    .result-preview-blur {\n      filter: blur(4px);\n      opacity: 0.5;\n      user-select: none;\n    }\n    .result-unlock-label {\n      font-size: 13px;\n      color: var(--text-dim);\n      margin-bottom: 20px;\n    }\n    .result-unlock-label strong {\n      color: var(--text);\n    }\n    .result-what-you-get {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      margin-bottom: 32px;\n      text-align: left;\n      width: 100%;\n    }\n    .result-get-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 14px;\n      color: var(--text-dim);\n    }\n    .result-get-item .check {\n      width: 22px; height: 22px;\n      border-radius: 50%;\n      background: rgba(212, 168, 83, 0.15);\n      border: 1px solid var(--gold);\n      display: flex; align-items: center; justify-content: center;\n      font-size: 11px;\n      color: var(--gold);\n      flex-shrink: 0;\n    }\n    .btn-buy {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      background: linear-gradient(135deg, var(--gold), var(--gold-light));\n      color: #1a1206;\n      font-weight: 700;\n      font-size: 16px;\n      padding: 20px 48px;\n      border-radius: 100px;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 0 50px rgba(212, 168, 83, 0.4);\n      text-decoration: none;\n      width: 100%;\n      max-width: 380px;\n    }\n    .btn-buy span {\n      font-size: 12px;\n      font-weight: 400;\n      opacity: 0.7;\n    }\n    .btn-buy:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 0 70px rgba(212, 168, 83, 0.6);\n    }\n    .result-footer {\n      margin-top: 20px;\n      font-size: 12px;\n      color: var(--text-dim);\n    }\n    .result-restart {\n      background: none;\n      border: none;\n      color: var(--text-dim);\n      font-size: 12px;\n      cursor: pointer;\n      text-decoration: underline;\n      margin-top: 16px;\n    }\n    .result-restart:hover { color: var(--text); }\n\n    \/* ===== ZONE GLOW ===== *\/\n    .zone-glow {\n      position: fixed;\n      width: 600px; height: 600px;\n      border-radius: 50%;\n      filter: blur(120px);\n      pointer-events: none;\n      z-index: 0;\n      opacity: 0;\n      transition: opacity 1s ease, background 1s ease;\n      top: 50%; left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    \/* ===== RESPONSIVE ===== *\/\n    @media (max-width: 600px) {\n      .q-options {\n        grid-template-columns: 1fr;\n      }\n      .q-option {\n        flex-direction: row;\n        align-items: center;\n        padding: 16px;\n      }\n      .q-option-emoji {\n        font-size: 28px;\n        flex-shrink: 0;\n      }\n      .intro-meta { gap: 20px; }\n      .screen { padding: 70px 16px 40px; }\n    }\n\n    @media (max-width: 380px) {\n      .intro-meta-item strong { font-size: 16px; }\n      .btn-primary { padding: 16px 28px; font-size: 13px; }\n    }\n\n    \/* ===== LOADING DOT ANIMATION ===== *\/\n    @keyframes dotPulse {\n      0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }\n      40% { transform: scale(1); opacity: 1; }\n    }\n  \u003c\/style\u003e\n\n\n\n\u003ccanvas id=\"stars-canvas\"\u003e\u003c\/canvas\u003e\n\u003cdiv class=\"zone-glow\" id=\"zone-glow\"\u003e\u003c\/div\u003e\n\n\u003cdiv id=\"progress-bar\"\u003e\u003cdiv id=\"progress-fill\"\u003e\u003c\/div\u003e\u003c\/div\u003e\n\u003cdiv id=\"zone-indicator\"\u003e\n  \u003cdiv class=\"zone-dot\"\u003e\u003c\/div\u003e\n  \u003cspan id=\"zone-name-label\"\u003eLa Selva\u003c\/span\u003e\n\u003c\/div\u003e\n\n\u003cdiv id=\"game\"\u003e\n\n  \u003c!-- INTRO --\u003e\n  \u003cdiv class=\"screen active\" id=\"screen-intro\"\u003e\n    \u003cdiv class=\"intro-label\"\u003e✦ Una experiencia de autoconocimiento ✦\u003c\/div\u003e\n    \u003cdiv class=\"intro-title\"\u003eEXPEDITION\u003c\/div\u003e\n    \u003cdiv class=\"intro-sub\"\u003eViaje al centro de ti\u003c\/div\u003e\n    \u003cdiv class=\"intro-divider\"\u003e\u003c\/div\u003e\n    \u003cdiv class=\"intro-desc\"\u003e\n      Toda expedición empieza con una pregunta.\u003cbr\u003e\n      La tuya es: \u003cem\u003e¿quién eres realmente?\u003c\/em\u003e\u003cbr\u003e\u003cbr\u003e\n      No hay respuestas correctas ni incorrectas.\u003cbr\u003e\n      Solo las tuyas.\n    \u003c\/div\u003e\n    \u003cdiv class=\"intro-meta\"\u003e\n      \u003cdiv class=\"intro-meta-item\"\u003e\n        \u003cstrong\u003e12\u003c\/strong\u003e\n        \u003cspan\u003eRetos\u003c\/span\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"intro-meta-item\"\u003e\n        \u003cstrong\u003e4\u003c\/strong\u003e\n        \u003cspan\u003eZonas\u003c\/span\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"intro-meta-item\"\u003e\n        \u003cstrong\u003e~15'\u003c\/strong\u003e\n        \u003cspan\u003eMinutos\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cbutton class=\"btn-primary\" onclick=\"startGame()\"\u003e\n      Comenzar la expedición \u003cspan class=\"btn-arrow\"\u003e→\u003c\/span\u003e\n    \u003c\/button\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- ZONE INTRO --\u003e\n  \u003cdiv class=\"screen\" id=\"screen-zone-intro\"\u003e\n    \u003cdiv class=\"zone-intro-number\" id=\"zi-number\"\u003eZona 1 de 4\u003c\/div\u003e\n    \u003cdiv class=\"zone-big-emoji\" id=\"zi-emoji\"\u003e🌿\u003c\/div\u003e\n    \u003cdiv class=\"zone-intro-title\" id=\"zi-title\"\u003eLa Selva\u003c\/div\u003e\n    \u003cdiv class=\"zone-intro-desc\" id=\"zi-desc\"\u003eAdentrarte en la selva significa conocer tu identidad real. ¿Quién eres cuando nadie te mira?\u003c\/div\u003e\n    \u003cbutton class=\"zone-intro-btn\" onclick=\"startZone()\"\u003e\n      Entrar \u003cspan\u003e→\u003c\/span\u003e\n    \u003c\/button\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- QUESTION --\u003e\n  \u003cdiv class=\"screen\" id=\"screen-question\"\u003e\n    \u003cdiv class=\"q-zone-tag\"\u003e\n      \u003cspan class=\"q-zone-emoji\" id=\"q-zone-emoji\"\u003e🌿\u003c\/span\u003e\n      \u003cspan id=\"q-zone-name\"\u003eLa Selva\u003c\/span\u003e\n      \u003cspan class=\"q-counter\" id=\"q-counter\"\u003e1 \/ 12\u003c\/span\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"q-text\" id=\"q-text\"\u003ePregunta aquí\u003c\/div\u003e\n    \u003cdiv class=\"q-options\" id=\"q-options\"\u003e\u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- RESULT --\u003e\n  \u003cdiv class=\"screen\" id=\"screen-result\"\u003e\n    \u003cdiv class=\"result-label\"\u003e✦ Tu expedición ha terminado ✦\u003c\/div\u003e\n    \u003cspan class=\"result-emoji\" id=\"r-emoji\"\u003e🦅\u003c\/span\u003e\n    \u003cdiv class=\"result-archetype\" id=\"r-archetype\"\u003eEl Visionario\u003c\/div\u003e\n    \u003cdiv class=\"result-tagline\" id=\"r-tagline\"\u003eVes el mundo como todavía no existe.\u003c\/div\u003e\n    \u003cdiv class=\"result-divider\"\u003e\u003c\/div\u003e\n    \u003cdiv class=\"result-preview-box\"\u003e\n      \u003cdiv class=\"result-preview-title\"\u003eUn adelanto de tu informe\u003c\/div\u003e\n      \u003cdiv class=\"result-preview-text\" id=\"r-preview\"\u003e\u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"result-unlock-label\"\u003eTu informe completo incluye \u003cstrong\u003etodo lo que el mapa ha descubierto sobre ti.\u003c\/strong\u003e\n\u003c\/div\u003e\n    \u003cdiv class=\"result-what-you-get\"\u003e\n      \u003cdiv class=\"result-get-item\"\u003e\n\u003cdiv class=\"check\"\u003e✓\u003c\/div\u003e Tu perfil completo como explorador\u003c\/div\u003e\n      \u003cdiv class=\"result-get-item\"\u003e\n\u003cdiv class=\"check\"\u003e✓\u003c\/div\u003e Tus fortalezas ocultas y cómo activarlas\u003c\/div\u003e\n      \u003cdiv class=\"result-get-item\"\u003e\n\u003cdiv class=\"check\"\u003e✓\u003c\/div\u003e Los 3 bloqueos raíz de tu patrón personal\u003c\/div\u003e\n      \u003cdiv class=\"result-get-item\"\u003e\n\u003cdiv class=\"check\"\u003e✓\u003c\/div\u003e Tu hoja de ruta de 90 días paso a paso\u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003ca class=\"btn-buy\" id=\"r-buy-btn\" href=\"https:\/\/patriciagilterron.com\/products\/mi-mapa-interior-informe-completo\" target=\"_blank\"\u003e\n      Quiero mi informe completo — 5€\n      \u003cspan\u003ePDF en tu email · Al instante\u003c\/span\u003e\n    \u003c\/a\u003e\n    \u003cdiv class=\"result-footer\"\u003eUna decisión pequeña. Un cambio real.\u003c\/div\u003e\n    \u003cbutton class=\"result-restart\" onclick=\"restartGame()\"\u003eVolver a empezar\u003c\/button\u003e\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003cscript\u003e\n  \/\/ ===== STARS =====\n  const canvas = document.getElementById('stars-canvas');\n  const ctx = canvas.getContext('2d');\n  let stars = [];\n\n  function resizeCanvas() {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n  }\n\n  function initStars() {\n    stars = [];\n    for (let i = 0; i \u003c 180; i++) {\n      stars.push({\n        x: Math.random() * canvas.width,\n        y: Math.random() * canvas.height,\n        r: Math.random() * 1.2 + 0.2,\n        alpha: Math.random(),\n        speed: Math.random() * 0.3 + 0.05,\n        dir: Math.random() * Math.PI * 2\n      });\n    }\n  }\n\n  function drawStars() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    stars.forEach(s =\u003e {\n      s.alpha += (Math.random() - 0.5) * 0.02;\n      s.alpha = Math.max(0.1, Math.min(0.8, s.alpha));\n      ctx.beginPath();\n      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);\n      ctx.fillStyle = `rgba(255,255,255,${s.alpha})`;\n      ctx.fill();\n    });\n    requestAnimationFrame(drawStars);\n  }\n\n  resizeCanvas();\n  initStars();\n  drawStars();\n  window.addEventListener('resize', () =\u003e { resizeCanvas(); initStars(); });\n\n  \/\/ ===== DATA =====\n  const zones = [\n    {\n      number: 1,\n      name: \"La Selva\",\n      emoji: \"🌿\",\n      desc: \"Adentrarte en la selva significa conocer tu identidad real. ¿Quién eres cuando nadie te mira?\",\n      glow: \"#1a5a3a\"\n    },\n    {\n      number: 2,\n      name: \"El Océano\",\n      emoji: \"🌊\",\n      desc: \"El océano habla de tus vínculos y de cómo navegas con los demás. ¿Qué tipo de compañero de viaje eres?\",\n      glow: \"#0d3a6a\"\n    },\n    {\n      number: 3,\n      name: \"La Montaña\",\n      emoji: \"⛰️\",\n      desc: \"La montaña es la zona más honesta. Aquí aparecen tus miedos, tus bloqueos y tu fuerza real.\",\n      glow: \"#3a1a5a\"\n    },\n    {\n      number: 4,\n      name: \"La Ciudad de Luz\",\n      emoji: \"🌟\",\n      desc: \"Has llegado al final del mapa. Aquí encontramos tu propósito y la vida que tu parte más profunda desea.\",\n      glow: \"#5a3a0a\"\n    }\n  ];\n\n  const questions = [\n    \/\/ ZONA 1 — LA SELVA\n    {\n      zone: 0,\n      text: \"Tu barco naufraga. Solo puedes salvar UNA cosa. ¿Cuál eliges?\",\n      options: [\n        { emoji: \"🗺️\", text: \"El mapa con el plan del viaje\", archetype: \"visionario\" },\n        { emoji: \"⚒️\", text: \"Las herramientas de supervivencia\", archetype: \"constructor\" },\n        { emoji: \"👥\", text: \"Al tripulante más vulnerable\", archetype: \"guardian\" },\n        { emoji: \"📖\", text: \"El diario secreto del capitán\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 0,\n      text: \"Llegas a una aldea desconocida. ¿Qué haces lo primero?\",\n      options: [\n        { emoji: \"🔭\", text: \"Exploro los alrededores para entender el terreno\", archetype: \"visionario\" },\n        { emoji: \"🏗️\", text: \"Busco un lugar seguro donde establecer la base\", archetype: \"constructor\" },\n        { emoji: \"🤝\", text: \"Me presento y escucho las historias de la gente\", archetype: \"guardian\" },\n        { emoji: \"🎨\", text: \"Observo sus rituales y trato de entender su mundo\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 0,\n      text: \"Ante ti hay tres caminos en la selva. Eliges el que...\",\n      options: [\n        { emoji: \"🌅\", text: \"Parece ir más lejos, aunque nadie lo ha recorrido\", archetype: \"visionario\" },\n        { emoji: \"📏\", text: \"Está mejor trazado y resulta más seguro\", archetype: \"constructor\" },\n        { emoji: \"🌸\", text: \"Pasa por donde vive la gente local\", archetype: \"guardian\" },\n        { emoji: \"🌀\", text: \"Es el más misterioso e impredecible\", archetype: \"alquimista\" }\n      ]\n    },\n    \/\/ ZONA 2 — EL OCÉANO\n    {\n      zone: 1,\n      text: \"Hay una tormenta en el barco. ¿Cuál es tu papel natural?\",\n      options: [\n        { emoji: \"🧭\", text: \"Marco el rumbo y digo hacia dónde ir\", archetype: \"visionario\" },\n        { emoji: \"⚓\", text: \"Me aseguro de que todo esté en su sitio y funcione\", archetype: \"constructor\" },\n        { emoji: \"🛡️\", text: \"Protejo a los que tienen más miedo\", archetype: \"guardian\" },\n        { emoji: \"🌊\", text: \"Busco la forma creativa de aprovechar la tormenta\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 1,\n      text: \"Un compañero de expedición está perdido. Tú...\",\n      options: [\n        { emoji: \"📡\", text: \"Coordinas el plan de rescate para todo el grupo\", archetype: \"visionario\" },\n        { emoji: \"🔦\", text: \"Preparas el equipo y sales a buscarlo sin dudar\", archetype: \"constructor\" },\n        { emoji: \"💙\", text: \"No puedes descansar hasta que esté a salvo\", archetype: \"guardian\" },\n        { emoji: \"🗣️\", text: \"Piensas de forma diferente a todos para encontrarlo\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 1,\n      text: \"Encuentras un cofre del tesoro. ¿Qué haces?\",\n      options: [\n        { emoji: \"🌍\", text: \"Imaginas todo lo que podrás hacer con ese tesoro\", archetype: \"visionario\" },\n        { emoji: \"📋\", text: \"Lo inventarías, lo aseguras y planeas bien su uso\", archetype: \"constructor\" },\n        { emoji: \"🤲\", text: \"Piensas en quién más podría necesitarlo\", archetype: \"guardian\" },\n        { emoji: \"🔮\", text: \"Te preguntas qué historia esconde ese cofre\", archetype: \"alquimista\" }\n      ]\n    },\n    \/\/ ZONA 3 — LA MONTAÑA\n    {\n      zone: 2,\n      text: \"Llegas a un callejón sin salida en la montaña. Tu reacción natural es...\",\n      options: [\n        { emoji: \"🚀\", text: \"Reimaginar la ruta — esto tiene que tener solución\", archetype: \"visionario\" },\n        { emoji: \"🔄\", text: \"Volver atrás, analizar y replantear paso a paso\", archetype: \"constructor\" },\n        { emoji: \"💬\", text: \"Pedir ayuda al grupo — juntos encontramos la salida\", archetype: \"guardian\" },\n        { emoji: \"🌱\", text: \"Preguntarme qué me enseña este obstáculo sobre mí\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 2,\n      text: \"Lo más difícil del ascenso para ti es...\",\n      options: [\n        { emoji: \"😤\", text: \"Ir al ritmo de los demás cuando tú ves más rápido\", archetype: \"visionario\" },\n        { emoji: \"🌫️\", text: \"Cuando el camino es incierto y cambia sin avisar\", archetype: \"constructor\" },\n        { emoji: \"💔\", text: \"Ver que alguien del grupo se queda atrás\", archetype: \"guardian\" },\n        { emoji: \"🔒\", text: \"Sentir que estás siguiendo un camino que no es tuyo\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 2,\n      text: \"En el momento más duro, ¿qué te hace seguir adelante?\",\n      options: [\n        { emoji: \"🏁\", text: \"La visión de lo que hay al otro lado de la cima\", archetype: \"visionario\" },\n        { emoji: \"📊\", text: \"Saber que has preparado esto al detalle y puedes\", archetype: \"constructor\" },\n        { emoji: \"❤️\", text: \"Las personas que te esperan o que dependen de ti\", archetype: \"guardian\" },\n        { emoji: \"✨\", text: \"El significado profundo de por qué empezaste\", archetype: \"alquimista\" }\n      ]\n    },\n    \/\/ ZONA 4 — LA CIUDAD DE LUZ\n    {\n      zone: 3,\n      text: \"Has llegado. Puedes construir algo en esta ciudad. ¿Qué construyes?\",\n      options: [\n        { emoji: \"🔭\", text: \"Un observatorio para ver más allá del horizonte\", archetype: \"visionario\" },\n        { emoji: \"🏛️\", text: \"Una biblioteca con todo el saber de la expedición\", archetype: \"constructor\" },\n        { emoji: \"🏡\", text: \"Un lugar de encuentro donde todos tengan cabida\", archetype: \"guardian\" },\n        { emoji: \"🎭\", text: \"Un espacio de creación donde nada esté prohibido\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 3,\n      text: \"Tu expedición será recordada por...\",\n      options: [\n        { emoji: \"🗺️\", text: \"Haber abierto territorios que nadie antes había soñado\", archetype: \"visionario\" },\n        { emoji: \"🏗️\", text: \"Haber construido algo que durará generaciones\", archetype: \"constructor\" },\n        { emoji: \"👐\", text: \"Haber cambiado la vida de las personas que encontró\", archetype: \"guardian\" },\n        { emoji: \"💫\", text: \"Haber transformado la forma en que el mundo se ve a sí mismo\", archetype: \"alquimista\" }\n      ]\n    },\n    {\n      zone: 3,\n      text: \"Si tu vida fuera exactamente como quieres, ¿qué sería lo más importante en ella?\",\n      options: [\n        { emoji: \"🌅\", text: \"Libertad para crear e ir siempre hacia lo nuevo\", archetype: \"visionario\" },\n        { emoji: \"🎯\", text: \"Saber que lo que hago tiene impacto real y duradero\", archetype: \"constructor\" },\n        { emoji: \"🌺\", text: \"Relaciones profundas y sentirte parte de algo\", archetype: \"guardian\" },\n        { emoji: \"🔑\", text: \"Vivir con plena conciencia del sentido de todo\", archetype: \"alquimista\" }\n      ]\n    }\n  ];\n\n  const archetypes = {\n    visionario: {\n      name: \"El Visionario\",\n      emoji: \"🦅\",\n      tagline: \"Ves el mundo como todavía no existe.\",\n      preview: `Tu mente vive en el futuro. Ves posibilidades donde otros ven obstáculos, y tu mayor don es inspirar a otros a creer en lo que aún no existe.\\n\\nHay una energía en ti que mueve cosas, que abre caminos. La gente a tu alrededor lo nota aunque tú a veces no lo veas.\\n\\nPero hay algo que te frena sin que te des cuenta. Un patrón que aparece justo cuando estás a punto de dar el siguiente paso. En tu informe completo encontrarás exactamente qué es y cómo trabajarlo.`\n    },\n    constructor: {\n      name: \"El Constructor\",\n      emoji: \"🏛️\",\n      tagline: \"Todo lo que tocas se convierte en algo sólido.\",\n      preview: `Eres la persona que convierte los sueños en realidad. Donde otros ven caos, tú ves estructura. Tu mayor fortaleza es crear cosas que duran — relaciones, proyectos, confianza.\\n\\nHay una fiabilidad en ti que la gente valora profundamente, aunque quizás nadie te lo diga con esas palabras.\\n\\nPero existe un patrón que te cuesta mucho ver desde dentro. Una forma de frenarte justo cuando más libertad necesitas. Tu informe completo lo analiza en detalle.`\n    },\n    guardian: {\n      name: \"El Guardián\",\n      emoji: \"🌿\",\n      tagline: \"Tu presencia hace que otros se sientan a salvo.\",\n      preview: `Tienes un don extraordinario para crear vínculos y hacer que las personas se sientan vistas. Eres el corazón de cualquier grupo, la persona a la que todos acuden.\\n\\nEso es un regalo enorme. Y también es, a veces, tu mayor desafío.\\n\\nHay una zona de tu vida que llevas tiempo sin explorar. Un espacio que es solo tuyo y que quizás has ido dejando de lado. En tu informe completo encontrarás el mapa para volver a ti.`\n    },\n    alquimista: {\n      name: \"El Alquimista\",\n      emoji: \"🔥\",\n      tagline: \"Conviertes el dolor en sabiduría y el caos en arte.\",\n      preview: `Vives en las capas profundas de la experiencia. Donde otros ven una crisis, tú encuentras una transformación. Eres raro, en el mejor sentido de la palabra.\\n\\nHay algo en tu forma de ver el mundo que muy poca gente comprende del todo. Y eso puede ser solitario.\\n\\nTambién hay algo que el mundo necesita de ti y que todavía no has dado del todo. Tu informe completo te muestra exactamente qué es y cómo desbloquearlo.`\n    }\n  };\n\n  \/\/ ===== STATE =====\n  let currentQ = 0;\n  let answers = [];\n  let selectedOption = null;\n  let currentZone = -1;\n\n  \/\/ ===== GAME LOGIC =====\n  function showScreen(id) {\n    document.querySelectorAll('.screen').forEach(s =\u003e s.classList.remove('active'));\n    const el = document.getElementById('screen-' + id);\n    el.classList.add('active');\n    \/\/ re-trigger animation\n    el.style.animation = 'none';\n    el.offsetHeight;\n    el.style.animation = '';\n  }\n\n  function setZoneGlow(zoneIdx) {\n    const glow = document.getElementById('zone-glow');\n    if (zoneIdx \u003c 0) {\n      glow.style.opacity = '0';\n      return;\n    }\n    glow.style.background = `radial-gradient(circle, ${zones[zoneIdx].glow} 0%, transparent 70%)`;\n    glow.style.opacity = '0.6';\n  }\n\n  function updateProgress() {\n    const bar = document.getElementById('progress-bar');\n    const fill = document.getElementById('progress-fill');\n    bar.style.display = 'block';\n    const pct = (currentQ \/ questions.length) * 100;\n    fill.style.width = pct + '%';\n  }\n\n  function showZoneIndicator(zoneIdx) {\n    const el = document.getElementById('zone-indicator');\n    el.style.display = 'flex';\n    document.getElementById('zone-name-label').textContent = zones[zoneIdx].name + ' · ' + zones[zoneIdx].emoji;\n  }\n\n  function startGame() {\n    currentQ = 0;\n    answers = [];\n    currentZone = -1;\n    document.getElementById('progress-bar').style.display = 'block';\n    showNextZoneOrQuestion();\n  }\n\n  function showNextZoneOrQuestion() {\n    if (currentQ \u003e= questions.length) {\n      showResult();\n      return;\n    }\n    const q = questions[currentQ];\n    if (q.zone !== currentZone) {\n      currentZone = q.zone;\n      showZoneIntro(currentZone);\n    } else {\n      showQuestion();\n    }\n  }\n\n  function showZoneIntro(zoneIdx) {\n    const z = zones[zoneIdx];\n    document.getElementById('zi-number').textContent = `Zona ${z.number} de 4`;\n    document.getElementById('zi-emoji').textContent = z.emoji;\n    document.getElementById('zi-title').textContent = z.name;\n    document.getElementById('zi-desc').textContent = z.desc;\n    setZoneGlow(zoneIdx);\n    showZoneIndicator(zoneIdx);\n    updateProgress();\n    showScreen('zone-intro');\n  }\n\n  function startZone() {\n    showQuestion();\n  }\n\n  function showQuestion() {\n    const q = questions[currentQ];\n    selectedOption = null;\n    document.getElementById('q-zone-emoji').textContent = zones[q.zone].emoji;\n    document.getElementById('q-zone-name').textContent = zones[q.zone].name;\n    document.getElementById('q-counter').textContent = `${currentQ + 1} \/ ${questions.length}`;\n    document.getElementById('q-text').textContent = q.text;\n    const optionsEl = document.getElementById('q-options');\n    optionsEl.innerHTML = '';\n    q.options.forEach((opt, i) =\u003e {\n      const div = document.createElement('div');\n      div.className = 'q-option';\n      div.innerHTML = `\u003cdiv class=\"q-option-emoji\"\u003e${opt.emoji}\u003c\/div\u003e\u003cdiv class=\"q-option-text\"\u003e${opt.text}\u003c\/div\u003e`;\n      div.addEventListener('click', () =\u003e selectOption(div, opt.archetype, i));\n      optionsEl.appendChild(div);\n    });\n    updateProgress();\n    showScreen('question');\n  }\n\n  function selectOption(el, archetype, idx) {\n    if (selectedOption !== null) return;\n    selectedOption = idx;\n    el.classList.add('selected');\n    answers.push(archetype);\n    setTimeout(() =\u003e {\n      currentQ++;\n      showNextZoneOrQuestion();\n    }, 500);\n  }\n\n  function getWinningArchetype() {\n    const counts = { visionario: 0, constructor: 0, guardian: 0, alquimista: 0 };\n    answers.forEach(a =\u003e counts[a]++);\n    return Object.entries(counts).sort((a, b) =\u003e b[1] - a[1])[0][0];\n  }\n\n  function showResult() {\n    const winner = getWinningArchetype();\n    const arch = archetypes[winner];\n    document.getElementById('r-emoji').textContent = arch.emoji;\n    document.getElementById('r-archetype').textContent = arch.name;\n    document.getElementById('r-tagline').textContent = arch.tagline;\n\n    \/\/ Preview with blur on last paragraph\n    const paragraphs = arch.preview.split('\\n\\n');\n    const previewEl = document.getElementById('r-preview');\n    previewEl.innerHTML = paragraphs.map((p, i) =\u003e\n      `\u003cp style=\"margin-bottom:${i \u003c paragraphs.length-1 ? '16px' : '0'};${i === paragraphs.length-1 ? 'filter:blur(5px);opacity:0.4;user-select:none' : ''}\"\u003e${p}\u003c\/p\u003e`\n    ).join('');\n\n    document.getElementById('progress-bar').style.display = 'none';\n    document.getElementById('zone-indicator').style.display = 'none';\n    setZoneGlow(-1);\n    showScreen('result');\n  }\n\n  function restartGame() {\n    currentQ = 0;\n    answers = [];\n    currentZone = -1;\n    document.getElementById('progress-bar').style.display = 'none';\n    document.getElementById('zone-indicator').style.display = 'none';\n    setZoneGlow(-1);\n    showScreen('intro');\n  }\n\u003c\/script\u003e\n\n\u003c\/body\u003e","brand":"Patricia Gil-Terrón | Coach, Formadora y Escritora","offers":[{"title":"Default Title","offer_id":54215091487047,"sku":null,"price":5.0,"currency_code":"EUR","in_stock":false}],"url":"https:\/\/patriciagilterron.com\/products\/juego","provider":"Patricia Gil-Terrón | Coach, Formadora y Escritora","version":"1.0","type":"link"}