{"id":19,"date":"2026-10-02T20:38:09","date_gmt":"2026-10-02T20:38:09","guid":{"rendered":"https:\/\/algoritmodelalma.com\/?page_id=19"},"modified":"2026-10-13T15:49:59","modified_gmt":"2026-10-13T15:49:59","slug":"que-tipo-de-arquetipo-eres","status":"publish","type":"page","link":"https:\/\/algoritmodelalma.com\/?page_id=19","title":{"rendered":"Que tipo de Arquetipo Eres"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Qu\u00e9 tipo de arquetipo eres &#8211; Test Interactivo<\/title>\n  <style>\n    :root {\n      --bg-cream: #F7F1EA;\n      --card-white: #FFFFFF;\n      --brown-soft: #5C4033;\n      --beige-soft: #E8DED2;\n      --old-rose: #C27D7D;\n      --lilac-soft: #C4B5FD;\n      --terracotta-soft: #B86B4B;\n      --text-dark: #1F1B16;\n      --text-muted: #6B7280;\n      --border-color: #E2D7CB;\n      --shadow-sm: 0 2px 8px rgba(92, 64, 51, 0.05);\n      --shadow-md: 0 4px 20px rgba(92, 64, 51, 0.08);\n      --shadow-lg: 0 10px 30px rgba(92, 64, 51, 0.12);\n      --radius-sm: 8px;\n      --radius-md: 14px;\n      --radius-lg: 22px;\n      --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    body {\n      background-color: var(--bg-cream);\n      color: var(--text-dark);\n      line-height: 1.6;\n      padding: 16px;\n      min-height: 100vh;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .app-container {\n      width: 100%;\n      max-width: 860px;\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .notice-banner {\n      background-color: #FFF5F5;\n      border: 1px solid #F87171;\n      border-left: 5px solid #EF4444;\n      border-radius: var(--radius-md);\n      padding: 14px 18px;\n      font-size: 0.9rem;\n      color: #7F1D1D;\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      box-shadow: var(--shadow-sm);\n    }\n\n    .notice-icon {\n      font-size: 1.2rem;\n      flex-shrink: 0;\n      margin-top: 2px;\n    }\n\n    .notice-text {\n      flex: 1;\n    }\n\n    header {\n      background: var(--card-white);\n      border-radius: var(--radius-lg);\n      padding: 28px 24px;\n      text-align: center;\n      border: 1px solid var(--border-color);\n      box-shadow: var(--shadow-md);\n      position: relative;\n      overflow: hidden;\n    }\n\n    header::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 6px;\n      background: linear-gradient(90deg, var(--terracotta-soft), var(--old-rose), var(--lilac-soft));\n    }\n\n    .app-title {\n      font-size: 2rem;\n      font-weight: 700;\n      color: var(--brown-soft);\n      letter-spacing: -0.02em;\n      margin-bottom: 6px;\n    }\n\n    .app-subtitle {\n      font-size: 1.05rem;\n      color: var(--text-muted);\n      font-weight: 400;\n    }\n\n    nav {\n      display: flex;\n      gap: 8px;\n      background: rgba(232, 222, 210, 0.5);\n      padding: 6px;\n      border-radius: var(--radius-md);\n      border: 1px solid var(--border-color);\n      overflow-x: auto;\n    }\n\n    .nav-btn {\n      flex: 1;\n      min-width: 120px;\n      padding: 10px 14px;\n      border: none;\n      background: transparent;\n      border-radius: var(--radius-sm);\n      color: var(--brown-soft);\n      font-size: 0.9rem;\n      font-weight: 600;\n      cursor: pointer;\n      transition: var(--transition);\n      white-space: nowrap;\n      text-align: center;\n    }\n\n    .nav-btn.active {\n      background: var(--card-white);\n      color: var(--brown-soft);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .view-card {\n      background: var(--card-white);\n      border-radius: var(--radius-lg);\n      padding: 28px;\n      border: 1px solid var(--border-color);\n      box-shadow: var(--shadow-md);\n      display: none;\n    }\n\n    .view-card.active {\n      display: block;\n      animation: fadeIn 0.3s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(8px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    .welcome-box {\n      text-align: center;\n      padding: 20px 10px;\n    }\n\n    .welcome-hero {\n      width: 100px;\n      height: 100px;\n      background: var(--bg-cream);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto 20px;\n      font-size: 3rem;\n      border: 2px solid var(--border-color);\n    }\n\n    .welcome-text {\n      font-size: 1.05rem;\n      color: var(--text-dark);\n      margin-bottom: 24px;\n      max-width: 600px;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .archetypes-preview {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 12px;\n      margin: 24px 0 32px;\n    }\n\n    .archetype-chip {\n      background: var(--bg-cream);\n      padding: 14px;\n      border-radius: var(--radius-md);\n      border: 1px solid var(--border-color);\n      text-align: center;\n      font-weight: 600;\n      color: var(--brown-soft);\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .archetype-chip span {\n      font-size: 0.8rem;\n      font-weight: normal;\n      color: var(--text-muted);\n    }\n\n    .progress-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n      font-size: 0.9rem;\n      font-weight: 600;\n      color: var(--brown-soft);\n    }\n\n    .progress-bar-bg {\n      width: 100%;\n      height: 10px;\n      background: var(--bg-cream);\n      border-radius: 20px;\n      overflow: hidden;\n      margin-bottom: 24px;\n      border: 1px solid var(--border-color);\n    }\n\n    .progress-bar-fill {\n      height: 100%;\n      background: linear-gradient(90deg, var(--terracotta-soft), var(--old-rose));\n      width: 0%;\n      transition: width 0.3s ease;\n      border-radius: 20px;\n    }\n\n    .question-title {\n      font-size: 1.25rem;\n      color: var(--brown-soft);\n      margin-bottom: 20px;\n      font-weight: 700;\n      line-height: 1.4;\n    }\n\n    .options-grid {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      margin-bottom: 28px;\n    }\n\n    .option-card {\n      border: 1.5px solid var(--border-color);\n      background: var(--card-white);\n      padding: 16px 20px;\n      border-radius: var(--radius-md);\n      cursor: pointer;\n      transition: var(--transition);\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      text-align: left;\n    }\n\n    .option-card:hover {\n      border-color: var(--terracotta-soft);\n      background: #FAF6F0;\n    }\n\n    .option-card.selected {\n      border-color: var(--terracotta-soft);\n      background: #FDF7F3;\n      box-shadow: 0 0 0 2px rgba(184, 107, 75, 0.2);\n    }\n\n    .option-radio {\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      border: 2px solid var(--border-color);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      transition: var(--transition);\n    }\n\n    .option-card.selected .option-radio {\n      border-color: var(--terracotta-soft);\n      background: var(--terracotta-soft);\n    }\n\n    .option-card.selected .option-radio::after {\n      content: '';\n      width: 8px;\n      height: 8px;\n      background: white;\n      border-radius: 50%;\n    }\n\n    .option-letter {\n      font-weight: 700;\n      color: var(--brown-soft);\n      margin-right: 4px;\n    }\n\n    .option-text {\n      color: var(--text-dark);\n      font-size: 0.98rem;\n    }\n\n    .quiz-actions {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 12px;\n      border-top: 1px solid var(--border-color);\n      padding-top: 20px;\n    }\n\n    .btn {\n      padding: 12px 24px;\n      border-radius: var(--radius-md);\n      font-size: 0.95rem;\n      font-weight: 600;\n      cursor: pointer;\n      border: none;\n      transition: var(--transition);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      text-decoration: none;\n    }\n\n    .btn-primary {\n      background: var(--terracotta-soft);\n      color: white;\n    }\n\n    .btn-primary:hover {\n      background: #A0593B;\n      transform: translateY(-1px);\n    }\n\n    .btn-secondary {\n      background: var(--bg-cream);\n      color: var(--brown-soft);\n      border: 1px solid var(--border-color);\n    }\n\n    .btn-secondary:hover {\n      background: var(--beige-soft);\n    }\n\n    .btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none !important;\n    }\n\n    .result-hero {\n      text-align: center;\n      padding: 24px;\n      background: linear-gradient(135deg, #FAF4EE 0%, #F5EAE0 100%);\n      border-radius: var(--radius-md);\n      border: 1px solid var(--border-color);\n      margin-bottom: 28px;\n    }\n\n    .result-tag {\n      display: inline-block;\n      padding: 4px 14px;\n      background: var(--old-rose);\n      color: white;\n      border-radius: 20px;\n      font-size: 0.85rem;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: 10px;\n    }\n\n    .dominant-name {\n      font-size: 2.2rem;\n      color: var(--brown-soft);\n      font-weight: 800;\n      margin-bottom: 8px;\n    }\n\n    .dominant-subtitle {\n      font-size: 1.1rem;\n      color: var(--terracotta-soft);\n      font-weight: 600;\n      margin-bottom: 16px;\n    }\n\n    .dominant-summary {\n      font-size: 1rem;\n      color: var(--text-dark);\n      max-width: 650px;\n      margin: 0 auto;\n    }\n\n    .section-heading {\n      font-size: 1.3rem;\n      color: var(--brown-soft);\n      margin: 32px 0 16px;\n      font-weight: 700;\n      border-bottom: 2px solid var(--beige-soft);\n      padding-bottom: 8px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .scores-grid {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n      margin-bottom: 32px;\n    }\n\n    .score-item {\n      background: var(--bg-cream);\n      padding: 16px;\n      border-radius: var(--radius-md);\n      border: 1px solid var(--border-color);\n    }\n\n    .score-info {\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: 8px;\n      font-weight: 600;\n    }\n\n    .score-name {\n      color: var(--brown-soft);\n    }\n\n    .score-value {\n      color: var(--terracotta-soft);\n    }\n\n    .score-bar-bg {\n      height: 10px;\n      background: #E5DDD3;\n      border-radius: 10px;\n      overflow: hidden;\n    }\n\n    .score-bar-fill {\n      height: 100%;\n      border-radius: 10px;\n      transition: width 0.6s ease;\n    }\n\n    .bg-guerrero { background-color: var(--terracotta-soft); }\n    .bg-sabio { background-color: var(--brown-soft); }\n    .bg-amante { background-color: var(--old-rose); }\n    .bg-mago { background-color: #8B5CF6; }\n\n    .table-container {\n      overflow-x: auto;\n      margin-bottom: 32px;\n      border-radius: var(--radius-md);\n      border: 1px solid var(--border-color);\n    }\n\n    .answers-table {\n      width: 100%;\n      border-collapse: collapse;\n      background: white;\n      font-size: 0.9rem;\n      text-align: center;\n    }\n\n    .answers-table th {\n      background: var(--beige-soft);\n      color: var(--brown-soft);\n      padding: 12px 10px;\n      font-weight: 700;\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .answers-table td {\n      padding: 10px;\n      border-bottom: 1px solid var(--bg-cream);\n      color: var(--text-dark);\n    }\n\n    .answers-table tr:nth-child(even) {\n      background: #FAF7F2;\n    }\n\n    .cell-highlight {\n      font-weight: 700;\n      color: var(--terracotta-soft);\n    }\n\n    .edu-card {\n      background: #FAF7F2;\n      border: 1px solid var(--border-color);\n      border-radius: var(--radius-md);\n      padding: 20px;\n      margin-bottom: 16px;\n    }\n\n    .edu-title {\n      font-size: 1.1rem;\n      color: var(--brown-soft);\n      font-weight: 700;\n      margin-bottom: 8px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .edu-list {\n      list-style-type: none;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .edu-list li {\n      position: relative;\n      padding-left: 20px;\n    }\n\n    .edu-list li::before {\n      content: '\u2022';\n      position: absolute;\n      left: 6px;\n      color: var(--terracotta-soft);\n      font-weight: bold;\n    }\n\n    .tips-box {\n      background: #F3EBE1;\n      border-left: 4px solid var(--brown-soft);\n      padding: 16px 20px;\n      border-radius: var(--radius-sm);\n      margin-top: 16px;\n    }\n\n    .tips-box h4 {\n      color: var(--brown-soft);\n      margin-bottom: 8px;\n      font-size: 1rem;\n    }\n\n    .history-item {\n      background: var(--bg-cream);\n      border: 1px solid var(--border-color);\n      border-radius: var(--radius-md);\n      padding: 18px;\n      margin-bottom: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .history-date {\n      font-size: 0.85rem;\n      color: var(--text-muted);\n    }\n\n    .history-archetype {\n      font-size: 1.1rem;\n      font-weight: 700;\n      color: var(--brown-soft);\n    }\n\n    .no-history {\n      text-align: center;\n      padding: 40px 20px;\n      color: var(--text-muted);\n    }\n\n    .actions-bar {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n      justify-content: center;\n      margin-top: 24px;\n    }\n\n    @media (max-width: 640px) {\n      body { padding: 10px; }\n      header { padding: 20px 16px; }\n      .app-title { font-size: 1.5rem; }\n      .app-subtitle { font-size: 0.95rem; }\n      .view-card { padding: 18px 14px; }\n      .dominant-name { font-size: 1.75rem; }\n      .quiz-actions { flex-direction: column-reverse; }\n      .quiz-actions .btn { width: 100%; }\n      .history-item { flex-direction: column; align-items: flex-start; }\n    }\n\n    @media print {\n      body { background: white; color: black; padding: 0; }\n      .notice-banner, nav, .quiz-actions, .actions-bar, .no-print { display: none !important; }\n      .view-card { border: none; box-shadow: none; padding: 0; }\n      .app-container { max-width: 100%; }\n      header { border: none; box-shadow: none; }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"app-container\">\n\n    <!-- AVISO IMPORTANTE EXIGIDO -->\n    <div class=\"notice-banner\" id=\"disclaimerBanner\">\n      <div class=\"notice-icon\">\u26a0\ufe0f\ufe0f<\/div>\n      <div class=\"notice-text\">\n        <strong>Aviso Importante:<\/strong> Esta app es una herramienta de bienestar y autocuidado. No reemplaza atenci\u00f3n psicol\u00f3gica, m\u00e9dica ni tratamiento profesional. Si sientes que puedes hacerte da\u00f1o o est\u00e1s en peligro, busca ayuda inmediata.\n      <\/div>\n    <\/div>\n\n    <header>\n      <h1 class=\"app-title\">Qu\u00e9 tipo de arquetipo eres<\/h1>\n      <p class=\"app-subtitle\">Descubre qu\u00e9 tipo de arquetipo eres y c\u00f3mo trabajar con ello<\/p>\n    <\/header>\n\n    <!-- Navigation Bar -->\n    <nav class=\"no-print\">\n      <button class=\"nav-btn active\" onclick=\"switchTab('welcome')\">Inicio<\/button>\n      <button class=\"nav-btn\" onclick=\"switchTab('quiz')\" id=\"navQuizBtn\">Test<\/button>\n      <button class=\"nav-btn\" onclick=\"switchTab('results')\" id=\"navResultsBtn\" disabled>Resultados<\/button>\n      <button class=\"nav-btn\" onclick=\"switchTab('history')\">Historial<\/button>\n      <button class=\"nav-btn\" onclick=\"switchTab('guide')\">Arquetipos<\/button>\n    <\/nav>\n\n    <main id=\"welcomeView\" class=\"view-card active\">\n      <div class=\"welcome-box\">\n        <div class=\"welcome-hero\">\ud83d\udcdc<\/div>\n        <h2 style=\"color: var(--brown-soft); margin-bottom: 12px;\">Cuestionario de 20 Preguntas<\/h2>\n        <p class=\"welcome-text\">\n          Este test te guiar\u00e1 a trav\u00e9s de 20 situaciones cotidianas y estilos de comunicaci\u00f3n. Selecciona la opci\u00f3n que responda con la mayor sinceridad y la que m\u00e1s resuene contigo en tu momento actual.\n        <\/p>\n\n        <div class=\"archetypes-preview\">\n          <div class=\"archetype-chip\">\n            \ud83d\udee1\ufe0f El Guerrero\n            <span>Acci\u00f3n, Control, Resultados<\/span>\n          <\/div>\n          <div class=\"archetype-chip\">\n            \ud83d\udc51 El Sabio Rey\n            <span>Orden, Calidad, Estructura<\/span>\n          <\/div>\n          <div class=\"archetype-chip\">\n            \u2764\ufe0f El Amante\n            <span>Empat\u00eda, Relaciones, Armon\u00eda<\/span>\n          <\/div>\n          <div class=\"archetype-chip\">\n            \u2728 El Mago\n            <span>Visi\u00f3n, Creatividad, Cambio<\/span>\n          <\/div>\n        <\/div>\n\n        <button class=\"btn btn-primary\" style=\"padding: 14px 36px; font-size: 1.1rem;\" onclick=\"startQuiz()\">\n          Comenzar el Test\n        <\/button>\n      <\/div>\n    <\/main>\n\n    <section id=\"quizView\" class=\"view-card\">\n      <div class=\"progress-header\">\n        <span id=\"questionCounter\">Pregunta 1 de 20<\/span>\n        <span id=\"progressPercent\">5%<\/span>\n      <\/div>\n      <div class=\"progress-bar-bg\">\n        <div class=\"progress-bar-fill\" id=\"progressBar\"><\/div>\n      <\/div>\n\n      <div class=\"question-title\" id=\"questionText\">Cargando pregunta&#8230;<\/div>\n\n      <div class=\"options-grid\" id=\"optionsContainer\">\n        <!-- Options generated dynamically -->\n      <\/div>\n\n      <div class=\"quiz-actions\">\n        <button class=\"btn btn-secondary\" id=\"prevBtn\" onclick=\"prevQuestion()\" disabled>\n          \u2190 Anterior\n        <\/button>\n        <span style=\"font-size: 0.85rem; color: var(--text-muted);\" id=\"saveStatus\">Guardado autom\u00e1tico activo<\/span>\n        <button class=\"btn btn-primary\" id=\"nextBtn\" onclick=\"nextQuestion()\" disabled>\n          Siguiente \u2192\n        <\/button>\n      <\/div>\n    <\/section>\n\n    <section id=\"resultsView\" class=\"view-card\">\n      <div class=\"result-hero\">\n        <span class=\"result-tag\">Tu Arquetipo Principal<\/span>\n        <h2 class=\"dominant-name\" id=\"dominantTitle\">El Guerrero<\/h2>\n        <p class=\"dominant-subtitle\" id=\"dominantSubtitle\">Orientado a la Acci\u00f3n y los Resultados<\/p>\n        <p class=\"dominant-summary\" id=\"dominantSummary\"><\/p>\n      <\/div>\n\n      <h3 class=\"section-heading\">\ud83d\udcca Distribuci\u00f3n de tus Arquetipos<\/h3>\n      <div class=\"scores-grid\" id=\"scoresBarsContainer\">\n        <!-- Filled by JS -->\n      <\/div>\n\n      <h3 class=\"section-heading\">\ud83d\udd0d Diagn\u00f3stico y Gu\u00eda Pr\u00e1ctica<\/h3>\n      <div id=\"archetypeEducationalContent\">\n        <!-- Filled by JS -->\n      <\/div>\n\n      <h3 class=\"section-heading\">\ud83d\udccb Desglose Detallado de Respuestas (Puntuaci\u00f3n Oficial)<\/h3>\n      <p style=\"font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px;\">\n        Esta tabla refleja la matriz exacta de evaluaci\u00f3n de las 20 preguntas del cuestionario:\n      <\/p>\n      <div class=\"table-container\">\n        <table class=\"answers-table\">\n          <thead>\n            <tr>\n              <th>Pregunta<\/th>\n              <th>Opci\u00f3n A<\/th>\n              <th>Opci\u00f3n B<\/th>\n              <th>Opci\u00f3n C<\/th>\n              <th>Opci\u00f3n D<\/th>\n              <th>Tu Selecci\u00f3n<\/th>\n              <th>Arquetipo Otorgado<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody id=\"breakdownTableBody\">\n            <!-- Table rows populated via JS -->\n          <\/tbody>\n        <\/table>\n      <\/div>\n\n      <div class=\"actions-bar no-print\">\n        <button class=\"btn btn-primary\" onclick=\"resetQuiz()\">\ud83d\udd04 Repetir el Test<\/button>\n\n        <button class=\"btn btn-secondary\" onclick=\"exportResults()\">\ud83d\udccb Copiar Resumen<\/button>\n      <\/div>\n    <\/section>\n\n    <section id=\"historyView\" class=\"view-card\">\n      <h3 class=\"section-heading\" style=\"margin-top: 0;\">\ud83d\udcdc Historial de Evaluaciones Guardadas<\/h3>\n      <p style=\"font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px;\">\n        Tus resultados se guardan autom\u00e1ticamente en tu navegador (localStorage).\n      <\/p>\n\n      <div id=\"historyList\">\n        <!-- Rendered via JS -->\n      <\/div>\n\n      <div class=\"actions-bar\" style=\"margin-top: 24px;\" id=\"historyActions\">\n        <button class=\"btn btn-secondary\" onclick=\"clearHistory()\">\ud83d\uddd1\ufe0f Borrar Historial<\/button>\n      <\/div>\n    <\/section>\n\n    <section id=\"guideView\" class=\"view-card\">\n      <h3 class=\"section-heading\" style=\"margin-top: 0;\">\ud83d\udcda Gu\u00eda Completa de los 4 Arquetipos<\/h3>\n      <p style=\"margin-bottom: 24px; color: var(--text-dark);\">\n        Cada arquetipo representa un modo caracter\u00edstico de percibir, comunicarse, actuar y resolver conflictos. Ninguno es \u00abmejor\u00bb o \u00abpeor\u00bb; lo ideal es reconocer nuestras fortalezas y desarrollar la flexibilidad para tomar lo mejor de cada uno.\n      <\/p>\n\n      <div id=\"guideCatalog\">\n        <!-- Rendered via JS -->\n      <\/div>\n    <\/section>\n\n  <\/div>\n\n  <script>\n    \/\/ Database of questions matching PDF text exactly\n    const QUESTIONS_DATA = [\n      {\n        id: 1,\n        text: \"1. Cuando Te diriges a las personas, utilizas palabras...\",\n        options: [\n          { letter: \"a\", text: \"Impositivas, acusadoras, de reclamo\", archetype: \"Guerrero\" },\n          { letter: \"b\", text: \"De cortes\u00eda, educadas, simp\u00e1ticas, neutras\", archetype: \"Amante\" },\n          { letter: \"c\", text: \"Escogidas, abstractas, complicadas, utilizas oraciones largas\", archetype: \"Sabio Rey\" },\n          { letter: \"d\", text: \"Jocosas, confiadas. A veces sin sentido o relaci\u00f3n\", archetype: \"Mago\" }\n        ]\n      },\n      {\n        id: 2,\n        text: \"2. Con cu\u00e1l de estas palabras te identificas m\u00e1s...\",\n        options: [\n          { letter: \"a\", text: \"Independiente\", archetype: \"Guerrero\" },\n          { letter: \"b\", text: \"Disciplinado\", archetype: \"Sabio Rey\" },\n          { letter: \"c\", text: \"Pac\u00edfico\", archetype: \"Amante\" },\n          { letter: \"d\", text: \"Divertido\", archetype: \"Mago\" }\n        ]\n      },\n      {\n        id: 3,\n        text: \"3. Los contenidos m\u00e1s comunes en tus temas de conversaci\u00f3n son:\",\n        options: [\n          { letter: \"a\", text: \"An\u00e9cdotas, historias familiares, amistad.\", archetype: \"Amante\" },\n          { letter: \"b\", text: \"Estad\u00edsticas, aspectos t\u00e9cnicos, tecnolog\u00eda, detalles y curiosidades\", archetype: \"Sabio Rey\" },\n          { letter: \"c\", text: \"De chistes, actividades amenas, lo que ser\u00e1s en el futuro, las cosas que sabes hacer\", archetype: \"Mago\" },\n          { letter: \"d\", text: \"De poder, influencia, control\", archetype: \"Guerrero\" }\n        ]\n      },\n      {\n        id: 4,\n        text: \"4. Cuando entablas una relaci\u00f3n interpersonal tu comunicaci\u00f3n tiene un estilo.\",\n        options: [\n          { letter: \"a\", text: \"Concreto y especializado, cuidadoso del estilo y confiabilidad de la informaci\u00f3n\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"A veces vago, original, ocurrente. Orientado a ser el centro de atenci\u00f3n.\", archetype: \"Mago\" },\n          { letter: \"c\", text: \"Directo, concreto y orientado hacia el control. Las cosas son blancas o negras.\", archetype: \"Guerrero\" },\n          { letter: \"d\", text: \"A ratos poco concreto, muy explicativo y cuidadoso, orientado a no da\u00f1ar al otro.\", archetype: \"Amante\" }\n        ]\n      },\n      {\n        id: 5,\n        text: \"5. Te caracterizas por ser una persona..\",\n        options: [\n          { letter: \"a\", text: \"Mucho movimiento, gesticulaciones y expresi\u00f3n facial abundante\", archetype: \"Mago\" },\n          { letter: \"b\", text: \"Erguida, r\u00e1pida y tensa, a veces r\u00edgida corporalmente.\", archetype: \"Guerrero\" },\n          { letter: \"c\", text: \"Movimientos lentos y poca gesticulaci\u00f3n, el cuerpo protege a la persona\", archetype: \"Amante\" },\n          { letter: \"d\", text: \"Controlas tus movimientos, quieres que sean perfectos y equilibrados. Extrema rigidez.\", archetype: \"Sabio Rey\" }\n        ]\n      },\n      {\n        id: 6,\n        text: \"6. Con cu\u00e1l de estas descripciones te identificas m\u00e1s:\",\n        options: [\n          { letter: \"a\", text: \"Perfeccionista\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"Comprensivo-Comprensiva\", archetype: \"Amante\" },\n          { letter: \"c\", text: \"Simp\u00e1tico-Simp\u00e1tica\", archetype: \"Mago\" },\n          { letter: \"d\", text: \"Osado-Osada\", archetype: \"Guerrero\" }\n        ]\n      },\n      {\n        id: 7,\n        text: \"7. En las conversaciones tu tono de voz es...\",\n        options: [\n          { letter: \"a\", text: \"Bajo y mon\u00f3tono (poca modulaci\u00f3n).\", archetype: \"Amante\" },\n          { letter: \"b\", text: \"Lineal con tendencia a la pronunciaci\u00f3n acentuada y seca.\", archetype: \"Sabio Rey\" },\n          { letter: \"c\", text: \"Alto con modulaciones variadas. Tu \u00e1nimo la influyen a menudo.\", archetype: \"Mago\" },\n          { letter: \"d\", text: \"Alto, intenso avasallante a veces, duro y tenso. Algunos dicen que eres grit\u00f3n.\", archetype: \"Guerrero\" }\n        ]\n      },\n      {\n        id: 8,\n        text: \"8. Tu velocidad al hablar es...\",\n        options: [\n          { letter: \"a\", text: \"Moderada, pausada\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"R\u00e1pida\", archetype: \"Mago\" },\n          { letter: \"c\", text: \"R\u00e1pida y tajante\", archetype: \"Guerrero\" },\n          { letter: \"d\", text: \"Lenta con ritmo caracter\u00edstico.\", archetype: \"Amante\" }\n        ]\n      },\n      {\n        id: 9,\n        text: \"9. Tu expresi\u00f3n facial m\u00e1s com\u00fan es...\",\n        options: [\n          { letter: \"a\", text: \"Relajada, sonriente, muchas muecas y buen contacto visual.\", archetype: \"Mago\" },\n          { letter: \"b\", text: \"Dura y seria, entrecejo fruncido, a veces dientes apretados y mirada fija\", archetype: \"Guerrero\" },\n          { letter: \"c\", text: \"Relajada y sonriente, muchas expresiones de empat\u00eda, cari\u00f1o, etc.\", archetype: \"Amante\" },\n          { letter: \"d\", text: \"Calmada, fija y sin expresiones evidentes. Imperturbable a veces.\", archetype: \"Sabio Rey\" }\n        ]\n      },\n      {\n        id: 10,\n        text: \"10. En el Ciclo de Ventas, su mayor fortaleza es:\",\n        options: [\n          { letter: \"a\", text: \"Preparar la estrategia para lograr la reuni\u00f3n, la venta o la negociaci\u00f3n\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"Desarrollar relaciones, caerle bien al cliente\", archetype: \"Amante\" },\n          { letter: \"c\", text: \"La acci\u00f3n: visitar clientes, llamadas telef\u00f3nicas, cerrar el negocio\", archetype: \"Guerrero\" },\n          { letter: \"d\", text: \"Descubrir nuevas formas de lograr m\u00e1s ventas, visualizar las metas, mantener una actitud positiva.\", archetype: \"Mago\" }\n        ]\n      },\n      {\n        id: 11,\n        text: \"11. En actividades cotidianas te caracterizas por...\",\n        options: [\n          { letter: \"a\", text: \"Ser m\u00e1s bien lento, no funcionas con precisi\u00f3n o te cuesta concentrarte.\", archetype: \"Amante\" },\n          { letter: \"b\", text: \"Ser mas bien met\u00f3dico, calmado y muy ordenado.\", archetype: \"Sabio Rey\" },\n          { letter: \"c\", text: \"Ser ansioso, muy r\u00e1pido, poco ordenado y te aburres con facilidad.\", archetype: \"Mago\" },\n          { letter: \"d\", text: \"Querer todo a la vez.\", archetype: \"Guerrero\" }\n        ]\n      },\n      {\n        id: 12,\n        text: \"12. Qu\u00e9 actitud asumes frente a los errores de los otros?\",\n        options: [\n          { letter: \"a\", text: \"Corriges, sufres mucho, piensas que es falta de precisi\u00f3n.\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"Haces frecuentemente caso omiso y tomas en cuenta a la persona y su esfuerzo personal.\", archetype: \"Mago\" },\n          { letter: \"c\", text: \"Poco tolerante, acusas inmediatamente. Los hechos son los hechos\", archetype: \"Guerrero\" },\n          { letter: \"d\", text: \"Corriges evitando hacerlo sentir mal. Te involucras aunque tengas que hacer sacrificios.\", archetype: \"Amante\" }\n        ]\n      },\n      {\n        id: 13,\n        text: \"13. De tu participaci\u00f3n en un grupo, por lo general te interesa obtener...\",\n        options: [\n          { letter: \"a\", text: \"Ser conocido, reconocimiento a tus m\u00e9ritos. Proyectarte.\", archetype: \"Mago\" },\n          { letter: \"b\", text: \"Influencias, contactos importantes. Hay objetivos detr\u00e1s de las cosas que haces.\", archetype: \"Guerrero\" },\n          { letter: \"c\", text: \"Amistades y sinceridad.\", archetype: \"Amante\" },\n          { letter: \"d\", text: \"Conocimiento y sabidur\u00eda.\", archetype: \"Sabio Rey\" }\n        ]\n      },\n      {\n        id: 14,\n        text: \"14. Por lo general tu estado de \u00e1nimo es...\",\n        options: [\n          { letter: \"a\", text: \"Explosivo, ansioso, tenso, invasivo.\", archetype: \"Guerrero\" },\n          { letter: \"b\", text: \"Calmado, buena disposici\u00f3n.\", archetype: \"Amante\" },\n          { letter: \"c\", text: \"Calmado, tenso, imperturbable, prefieres estar s\u00f3lo.\", archetype: \"Sabio Rey\" },\n          { letter: \"d\", text: \"Impulsivo, explosivo, alegre, irrelevante.\", archetype: \"Mago\" }\n        ]\n      },\n      {\n        id: 15,\n        text: \"15. En tu casa o en la oficina eres...\",\n        options: [\n          { letter: \"a\", text: \"Poco ordenado, aunque puedes mejorarlo, siempre ser\u00e1s despreocupado.\", archetype: \"Amante\" },\n          { letter: \"b\", text: \"Eres extremadamente met\u00f3dico, ordenado, detallista y cuidadoso\", archetype: \"Sabio Rey\" },\n          { letter: \"c\", text: \"Poco ordenado, creativo, te gusta pasar de un tema a otro cuando deja de ser novedoso.\", archetype: \"Mago\" },\n          { letter: \"d\", text: \"Organizado, r\u00e1pido, no te gusta perder el tiempo.\", archetype: \"Guerrero\" }\n        ]\n      },\n      {\n        id: 16,\n        text: \"16. Tu energ\u00eda la orientas fundamentalmente en la vida a ...\",\n        options: [\n          { letter: \"a\", text: \"En tu lograr tus metas principalmente en el campo del conocimiento y perfecci\u00f3n.\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"Quedar bien ante la gente, lograr ser reconocido y admirado.\", archetype: \"Mago\" },\n          { letter: \"c\", text: \"Logras tus metas, lo que te has propuesto. Alcanzar el poder.\", archetype: \"Guerrero\" },\n          { letter: \"d\", text: \"En ser feliz, aceptado y querido.\", archetype: \"Amante\" }\n        ]\n      },\n      {\n        id: 17,\n        text: \"17. Qu\u00e9 actitudes asumes en situaciones de conflicto...\",\n        options: [\n          { letter: \"a\", text: \"Puedes estallar y por lo general te vas por la tangente, sin embargo, eres bueno escuchando cuando te lo propones y puedes negociar.\", archetype: \"Mago\" },\n          { letter: \"b\", text: \"Explosivo, atacas y defiendes apasionadamente tus opiniones. Te cuesta admitir equivocaciones. Frecuentemente no dejas hablar y a veces no escuchas.\", archetype: \"Guerrero\" },\n          { letter: \"c\", text: \"Evitas las confrontaciones y las situaciones tensas. Sabes ceder y quedar amigo.\", archetype: \"Amante\" },\n          { letter: \"d\", text: \"Eres racional y calculador, escondes y manejas tus emociones. Inflexible con tus reglas.\", archetype: \"Sabio Rey\" }\n        ]\n      },\n      {\n        id: 18,\n        text: \"18. En la negociaci\u00f3n...\",\n        options: [\n          { letter: \"a\", text: \"Presionas.\", archetype: \"Guerrero\" },\n          { letter: \"b\", text: \"Concilias.\", archetype: \"Amante\" },\n          { letter: \"c\", text: \"Analizas.\", archetype: \"Sabio Rey\" },\n          { letter: \"d\", text: \"Enfr\u00edas situaciones.\", archetype: \"Mago\" }\n        ]\n      },\n      {\n        id: 19,\n        text: \"19. Cuando tomas decisiones te motiva...\",\n        options: [\n          { letter: \"a\", text: \"La amistad, el sentimiento.\", archetype: \"Amante\" },\n          { letter: \"b\", text: \"La informaci\u00f3n que posees.\", archetype: \"Sabio Rey\" },\n          { letter: \"c\", text: \"Tu olfato\/intuici\u00f3n.\", archetype: \"Mago\" },\n          { letter: \"d\", text: \"Lograr tus metas.\", archetype: \"Guerrero\" }\n        ]\n      },\n      {\n        id: 20,\n        text: \"20. En la negociaci\u00f3n...\",\n        options: [\n          { letter: \"a\", text: \"Te gusta demostrar que tienes la raz\u00f3n.\", archetype: \"Sabio Rey\" },\n          { letter: \"b\", text: \"Te gusta sobresalir.\", archetype: \"Mago\" },\n          { letter: \"c\", text: \"Te gusta tener el control.\", archetype: \"Guerrero\" },\n          { letter: \"d\", text: \"Te gusta sentirte bien.\", archetype: \"Amante\" }\n        ]\n      }\n    ];\n\n    const ARCHETYPES_INFO = {\n      \"Guerrero\": {\n        name: \"El Guerrero\",\n        subtitle: \"Orientado al Logro, la Acci\u00f3n y el Control\",\n        icon: \"\ud83d\udee1\ufe0f\",\n        colorClass: \"bg-guerrero\",\n        colorHex: \"#B86B4B\",\n        summary: \"Eres una persona orientada a la acci\u00f3n, directa y enfocada en resultados. Tienes una fuerte determinaci\u00f3n para superar obst\u00e1culos, alcanzar poder e influir en tu entorno.\",\n        strengths: [\n          \"Gran capacidad de empuje, velocidad en toma de decisiones y cierre de metas.\",\n          \"Estilo directo, claro y orientado a la eficiencia sin rodeos.\",\n          \"Valiente ante desaf\u00edos, asume riesgos y mantiene el foco bajo presi\u00f3n.\",\n          \"Capacidad natural de liderazgo en momentos de crisis que exigen acci\u00f3n inmediata.\"\n        ],\n        shadows: [\n          \"Impaciencia con procesos lentos o personas m\u00e1s pausadas.\",\n          \"Tendencia a la rigidez, frialdad o agresividad cuando se siente bajo tensi\u00f3n.\",\n          \"Dificultad para escuchar argumentos ajenos o reconocer errores propios.\",\n          \"Riesgo de abrumar a otros e imponer puntos de vista sin medir el costo relacional.\"\n        ],\n        tips: [\n          \" Practica la pausa consciente de 5 segundos antes de responder en situaciones tensas.\",\n          \" Cultiva la escucha activa: no interrumpas a los dem\u00e1s mientras explican su visi\u00f3n.\",\n          \" Recuerda que la firmeza no requiere dureza; puedes exigir resultados cuidando a las personas.\",\n          \" Aprende a delegar sin estar fiscalizando agresivamente cada movimiento.\"\n        ]\n      },\n      \"Sabio Rey\": {\n        name: \"El Sabio Rey\",\n        subtitle: \"Orientado al Orden, el An\u00e1lisis y la Perfecci\u00f3n\",\n        icon: \"\ud83d\udc51\",\n        colorClass: \"bg-sabio\",\n        colorHex: \"#5C4033\",\n        summary: \"Destacas por tu pensamiento estructurado, tu b\u00fasqueda de la excelencia y el respeto por los datos y las reglas. Eres anal\u00edtico, prudente y met\u00f3dico.\",\n        strengths: [\n          \"Excepcional precisi\u00f3n, meticulosidad y rigor t\u00e9cnico en la planificaci\u00f3n.\",\n          \"Manejo objetivo de la informaci\u00f3n y toma de decisiones basadas en datos.\",\n          \"Elevados est\u00e1ndares de calidad, disciplina y sentido del deber.\",\n          \"Capacidad para estructurar el caos y crear procedimientos eficientes.\"\n        ],\n        shadows: [\n          \"Perfeccionismo paralizante ('par\u00e1lisis por an\u00e1lisis').\",\n          \"Tendencia a la hipercr\u00edtica y severidad ante los errores propios y de los dem\u00e1s.\",\n          \"Distanciamiento emocional, rigidez postural y rechazo a lo imprevisto.\",\n          \"Dificultad para adaptarse r\u00e1pido cuando las reglas o escenarios cambian.\"\n        ],\n        tips: [\n          \" Integra la regla del 80\/20: a veces lo 'suficientemente bueno' es mejor que retrasar entregas.\",\n          \" Valora el esfuerzo humano adem\u00e1s de la precisi\u00f3n de los resultados.\",\n          \" Dedica tiempo a actividades expresivas o recreativas sin meta de rendimiento.\",\n          \" Expresa tus sentimientos de forma abierta sin sentir que perder\u00e1s el control.\"\n        ]\n      },\n      \"Amante\": {\n        name: \"El Amante\",\n        subtitle: \"Orientado a las Relaciones, la Empat\u00eda y la Armon\u00eda\",\n        icon: \"\u2764\ufe0f\",\n        colorClass: \"bg-amante\",\n        colorHex: \"#C27D7D\",\n        summary: \"Tu prioridad fundamental es la conexi\u00f3n humana, la calidez y el bienestar relacional. Buscas conciliar, cuidar la autoestima ajena y construir entornos pac\u00edficos.\",\n        strengths: [\n          \"Elevada empat\u00eda, gran capacidad de escucha activa y calidez humana.\",\n          \"Facilidad para conciliar conflictos y crear puentes entre partes opuestas.\",\n          \"Sensibilidad para detectar las necesidades emocionales del entorno.\",\n          \"Fidelidad, amabilidad y verdadero esp\u00edritu de cooperaci\u00f3n comunitaria.\"\n        ],\n        shadows: [\n          \"Dificultad para decir 'No' o fijar l\u00edmites personales por miedo al rechazo.\",\n          \"Evitaci\u00f3n sistem\u00e1tica del conflicto sano, postergando conversaciones necesarias.\",\n          \"Tendencia a autopostergarse y descuidar sus propias metas profesionales o de vida.\",\n          \"Lentitud para tomar decisiones firmes cuando hay personas involucradas.\"\n        ],\n        tips: [\n          \" Entrena la asertividad: decir 'No' a otros suele ser decir 'S\u00ed' a tus prioridades.\",\n          \" Comprende que el conflicto constructivo es indispensable para el crecimiento.\",\n          \" Revisa peri\u00f3dicamente si est\u00e1s trabajando por tus metas o s\u00f3lo por agradar.\",\n          \" No asumas la responsabilidad de reparar las emociones de los dem\u00e1s.\"\n        ]\n      },\n      \"Mago\": {\n        name: \"El Mago\",\n        subtitle: \"Orientado a la Visi\u00f3n, la Creatividad y el Carisma\",\n        icon: \"\u2728\",\n        colorClass: \"bg-mago\",\n        colorHex: \"#8B5CF6\",\n        summary: \"Eres una persona entusiasta, imaginativa y carism\u00e1tica. Te mueve el cambio, la innovaci\u00f3n, las posibilidades futuras y la capacidad de inspirar e influir.\",\n        strengths: [\n          \"Gran intuici\u00f3n, pensamiento lateral y visi\u00f3n estrat\u00e9gica de futuro.\",\n          \"Comunicaci\u00f3n fluida, carism\u00e1tica, capaz de motivar e involucrar a otros.\",\n          \"Alta adaptabilidad, flexibilidad y rapidez mental frente a la novedad.\",\n          \"Capacidad para encontrar soluciones creativas e inusuales a problemas complejos.\"\n        ],\n        shadows: [\n          \"Dispersi\u00f3n y falta de disciplina para dar seguimiento y cerrar proyectos.\",\n          \"B\u00fasqueda excesiva de figurar o ser el centro de atenci\u00f3n.\",\n          \"Tendencia a aburrirse r\u00e1pido de la rutina o tareas administrativas.\",\n          \"Impulsividad y cambio constante de prioridades.\"\n        ],\n        tips: [\n          \" Adopta h\u00e1bitos de organizaci\u00f3n simples (listas diarias de 3 prioridades).\",\n          \" Comprom\u00e9tete a terminar una tarea importante antes de iniciar una nueva idea.\",\n          \" Ap\u00f3yate en personas met\u00f3dicas (Sabio Rey) para aterrizar tu visi\u00f3n a pasos concretos.\",\n          \" Practica el silencio y la reflexi\u00f3n profunda para templar la impulsividad.\"\n        ]\n      }\n    };\n\n    let currentQuestionIndex = 0;\n    let userAnswers = new Array(20).fill(null); \/\/ stores option letter ('a','b','c','d')\n    const LOCAL_STORAGE_KEY_DRAFT = \"arquetipos_quiz_draft\";\n    const LOCAL_STORAGE_KEY_HISTORY = \"arquetipos_quiz_history\";\n\n    \/\/ Initialize application on page load\n    window.onload = function() {\n      loadDraft();\n      renderCatalog();\n      renderHistory();\n    };\n\n    function saveDraft() {\n      try {\n        const draft = {\n          currentIndex: currentQuestionIndex,\n          answers: userAnswers,\n          timestamp: new Date().toISOString()\n        };\n        localStorage.setItem(LOCAL_STORAGE_KEY_DRAFT, JSON.stringify(draft));\n      } catch (e) {\n        console.warn(\"localStorage error\", e);\n      }\n    }\n\n    function loadDraft() {\n      try {\n        const raw = localStorage.getItem(LOCAL_STORAGE_KEY_DRAFT);\n        if (raw) {\n          const draft = JSON.parse(raw);\n          if (draft && Array.isArray(draft.answers) && draft.answers.length === 20) {\n            userAnswers = draft.answers;\n            currentQuestionIndex = draft.currentIndex || 0;\n          }\n        }\n      } catch (e) {\n        console.warn(\"Could not load draft\", e);\n      }\n    }\n\n    function switchTab(tabName) {\n      document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));\n      document.querySelectorAll('.view-card').forEach(view => view.classList.remove('active'));\n\n      if (tabName === 'welcome') {\n        document.querySelector(\"button[onclick=\\\"switchTab('welcome')\\\"]\").classList.add('active');\n        document.getElementById('welcomeView').classList.add('active');\n      } else if (tabName === 'quiz') {\n        document.getElementById('navQuizBtn').classList.add('active');\n        document.getElementById('quizView').classList.add('active');\n        renderQuestion();\n      } else if (tabName === 'results') {\n        document.getElementById('navResultsBtn').classList.add('active');\n        document.getElementById('resultsView').classList.add('active');\n      } else if (tabName === 'history') {\n        document.querySelector(\"button[onclick=\\\"switchTab('history')\\\"]\").classList.add('active');\n        document.getElementById('historyView').classList.add('active');\n        renderHistory();\n      } else if (tabName === 'guide') {\n        document.querySelector(\"button[onclick=\\\"switchTab('guide')\\\"]\").classList.add('active');\n        document.getElementById('guideView').classList.add('active');\n      }\n\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n\n    function startQuiz() {\n      switchTab('quiz');\n    }\n\n    function renderQuestion() {\n      const q = QUESTIONS_DATA[currentQuestionIndex];\n      const total = QUESTIONS_DATA.length;\n\n      document.getElementById('questionCounter').textContent = `Pregunta ${currentQuestionIndex + 1} de ${total}`;\n      const percent = Math.round(((currentQuestionIndex + 1) \/ total) * 100);\n      document.getElementById('progressPercent').textContent = `${percent}%`;\n      document.getElementById('progressBar').style.width = `${percent}%`;\n\n      document.getElementById('questionText').textContent = q.text;\n\n      const container = document.getElementById('optionsContainer');\n      container.innerHTML = '';\n\n      const currentSelected = userAnswers[currentQuestionIndex];\n\n      q.options.forEach(opt => {\n        const isSelected = currentSelected === opt.letter;\n        const optEl = document.createElement('div');\n        optEl.className = `option-card ${isSelected ? 'selected' : ''}`;\n        optEl.onclick = () => selectOption(opt.letter);\n\n        optEl.innerHTML = `\n          <div class=\"option-radio\"><\/div>\n          <div>\n            <span class=\"option-letter\">${opt.letter.toUpperCase()})<\/span>\n            <span class=\"option-text\">${opt.text}<\/span>\n          <\/div>\n        `;\n        container.appendChild(optEl);\n      });\n\n      \/\/ Update Navigation Buttons\n      document.getElementById('prevBtn').disabled = currentQuestionIndex === 0;\n      const nextBtn = document.getElementById('nextBtn');\n      if (currentQuestionIndex === total - 1) {\n        nextBtn.textContent = 'Ver Resultados \ud83c\udfaf';\n      } else {\n        nextBtn.textContent = 'Siguiente \u2192';\n      }\n      nextBtn.disabled = !userAnswers[currentQuestionIndex];\n    }\n\n    function selectOption(letter) {\n      userAnswers[currentQuestionIndex] = letter;\n      saveDraft();\n      renderQuestion();\n    }\n\n    function prevQuestion() {\n      if (currentQuestionIndex > 0) {\n        currentQuestionIndex--;\n        renderQuestion();\n      }\n    }\n\n    function nextQuestion() {\n      if (!userAnswers[currentQuestionIndex]) return;\n\n      if (currentQuestionIndex < QUESTIONS_DATA.length - 1) {\n        currentQuestionIndex++;\n        renderQuestion();\n      } else {\n        \/\/ Quiz completed -> calculate results\n        calculateAndDisplayResults();\n      }\n    }\n\n    function calculateAndDisplayResults() {\n      \/\/ Tally archetypes\n      const scores = {\n        \"Guerrero\": 0,\n        \"Sabio Rey\": 0,\n        \"Amante\": 0,\n        \"Mago\": 0\n      };\n\n      const breakdownRows = [];\n\n      userAnswers.forEach((letter, idx) => {\n        const q = QUESTIONS_DATA[idx];\n        const selectedOpt = q.options.find(o => o.letter === letter);\n        const awardedArchetype = selectedOpt ? selectedOpt.archetype : \"No respondido\";\n\n        if (awardedArchetype && scores[awardedArchetype] !== undefined) {\n          scores[awardedArchetype]++;\n        }\n\n        breakdownRows.push({\n          qNum: idx + 1,\n          opts: q.options,\n          selectedLetter: letter,\n          awarded: awardedArchetype\n        });\n      });\n\n      \/\/ Find Dominant Archetype\n      let maxScore = -1;\n      let dominant = \"Guerrero\";\n      Object.keys(scores).forEach(key => {\n        if (scores[key] > maxScore) {\n          maxScore = scores[key];\n          dominant = key;\n        }\n      });\n\n      \/\/ Save to localStorage history\n      saveToHistory(dominant, scores);\n\n      \/\/ Render Results Page UI\n      renderResultsUI(dominant, scores, breakdownRows);\n\n      \/\/ Enable Results tab in navigation\n      const resBtn = document.getElementById('navResultsBtn');\n      resBtn.disabled = false;\n\n      switchTab('results');\n    }\n\n    function renderResultsUI(dominantKey, scores, breakdownRows) {\n      const domInfo = ARCHETYPES_INFO[dominantKey];\n\n      document.getElementById('dominantTitle').textContent = `${domInfo.icon} ${domInfo.name}`;\n      document.getElementById('dominantSubtitle').textContent = domInfo.subtitle;\n      document.getElementById('dominantSummary').textContent = domInfo.summary;\n\n      \/\/ Render Score Progress Bars\n      const barsContainer = document.getElementById('scoresBarsContainer');\n      barsContainer.innerHTML = '';\n\n      const totalQuestions = 20;\n\n      Object.keys(scores).forEach(archKey => {\n        const score = scores[archKey];\n        const pct = Math.round((score \/ totalQuestions) * 100);\n        const info = ARCHETYPES_INFO[archKey];\n\n        const item = document.createElement('div');\n        item.className = 'score-item';\n        item.innerHTML = `\n          <div class=\"score-info\">\n            <span class=\"score-name\">${info.icon} ${info.name}<\/span>\n            <span class=\"score-value\">${score} \/ 20 pts (${pct}%)<\/span>\n          <\/div>\n          <div class=\"score-bar-bg\">\n            <div class=\"score-bar-fill ${info.colorClass}\" style=\"width: ${pct}%\"><\/div>\n          <\/div>\n        `;\n        barsContainer.appendChild(item);\n      });\n\n      \/\/ Render Educational Sections for Dominant Archetype\n      const eduContainer = document.getElementById('archetypeEducationalContent');\n      eduContainer.innerHTML = `\n        <div class=\"edu-card\">\n          <div class=\"edu-title\" style=\"color: ${domInfo.colorHex};\">\n            \ud83c\udf1f Principales Fortalezas\n          <\/div>\n          <ul class=\"edu-list\">\n            ${domInfo.strengths.map(s => `<li>${s}<\/li>`).join('')}\n          <\/ul>\n        <\/div>\n\n        <div class=\"edu-card\">\n          <div class=\"edu-title\" style=\"color: #991B1B;\">\n            \u26a0\ufe0f \u00c1reas de Desaf\u00edo y Puntos Ciegos\n          <\/div>\n          <ul class=\"edu-list\">\n            ${domInfo.shadows.map(s => `<li>${s}<\/li>`).join('')}\n          <\/ul>\n        <\/div>\n\n        <div class=\"tips-box\">\n          <h4>\ud83d\udca1 Recomendaciones de Desarrollo Personal (${domInfo.name}):<\/h4>\n          <ul class=\"edu-list\" style=\"margin-top: 8px;\">\n            ${domInfo.tips.map(t => `<li>${t}<\/li>`).join('')}\n          <\/ul>\n        <\/div>\n      `;\n\n      \/\/ Render Breakdown Table (Page 5 PDF equivalent)\n      const tableBody = document.getElementById('breakdownTableBody');\n      tableBody.innerHTML = '';\n\n      breakdownRows.forEach(row => {\n        const tr = document.createElement('tr');\n\n        const optA = row.opts.find(o => o.letter === 'a');\n        const optB = row.opts.find(o => o.letter === 'b');\n        const optC = row.opts.find(o => o.letter === 'c');\n        const optD = row.opts.find(o => o.letter === 'd');\n\n        tr.innerHTML = `\n          <td><strong>#${row.qNum}<\/strong><\/td>\n          <td>${optA ? optA.archetype : ''}<\/td>\n          <td>${optB ? optB.archetype : ''}<\/td>\n          <td>${optC ? optC.archetype : ''}<\/td>\n          <td>${optD ? optD.archetype : ''}<\/td>\n          <td class=\"cell-highlight\">${row.selectedLetter ? row.selectedLetter.toUpperCase() : '-'}<\/td>\n          <td style=\"font-weight: 600;\">${row.awarded}<\/td>\n        `;\n        tableBody.appendChild(tr);\n      });\n    }\n\n    function saveToHistory(dominant, scores) {\n      try {\n        const historyRaw = localStorage.getItem(LOCAL_STORAGE_KEY_HISTORY);\n        let history = historyRaw ? JSON.parse(historyRaw) : [];\n\n        const entry = {\n          id: Date.now(),\n          date: new Date().toLocaleDateString('es-ES', {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit'\n          }),\n          dominant: dominant,\n          scores: scores,\n          userAnswers: [...userAnswers]\n        };\n\n        history.unshift(entry);\n        \/\/ keep max 15 entries\n        if (history.length > 15) history = history.slice(0, 15);\n\n        localStorage.setItem(LOCAL_STORAGE_KEY_HISTORY, JSON.stringify(history));\n      } catch (e) {\n        console.warn(\"Failed saving history\", e);\n      }\n    }\n\n    function renderHistory() {\n      const container = document.getElementById('historyList');\n      try {\n        const historyRaw = localStorage.getItem(LOCAL_STORAGE_KEY_HISTORY);\n        const history = historyRaw ? JSON.parse(historyRaw) : [];\n\n        if (!history || history.length === 0) {\n          container.innerHTML = `\n            <div class=\"no-history\">\n              <p>No tienes evaluaciones guardadas a\u00fan.<\/p>\n              <button class=\"btn btn-primary\" style=\"margin-top: 12px;\" onclick=\"startQuiz()\">Realizar el Test Ahora<\/button>\n            <\/div>\n          `;\n          document.getElementById('historyActions').style.display = 'none';\n          return;\n        }\n\n        document.getElementById('historyActions').style.display = 'flex';\n        container.innerHTML = '';\n\n        history.forEach(item => {\n          const info = ARCHETYPES_INFO[item.dominant] || ARCHETYPES_INFO[\"Guerrero\"];\n          const el = document.createElement('div');\n          el.className = 'history-item';\n          el.innerHTML = `\n            <div>\n              <div class=\"history-archetype\">${info.icon} ${item.dominant}<\/div>\n              <div class=\"history-date\">Realizado el ${item.date}<\/div>\n              <div style=\"font-size: 0.85rem; color: var(--text-dark); margin-top: 4px;\">\n                Guerrero: ${item.scores.Guerrero} | Sabio Rey: ${item.scores['Sabio Rey']} | Amante: ${item.scores.Amante} | Mago: ${item.scores.Mago}\n              <\/div>\n            <\/div>\n            <button class=\"btn btn-secondary\" onclick=\"loadHistoryEntry(${item.id})\">Ver Resultado<\/button>\n          `;\n          container.appendChild(el);\n        });\n      } catch (e) {\n        container.innerHTML = '<p class=\"no-history\">Error al cargar historial.<\/p>';\n      }\n    }\n\n    function loadHistoryEntry(entryId) {\n      try {\n        const historyRaw = localStorage.getItem(LOCAL_STORAGE_KEY_HISTORY);\n        const history = historyRaw ? JSON.parse(historyRaw) : [];\n        const entry = history.find(h => h.id === entryId);\n\n        if (entry) {\n          userAnswers = entry.userAnswers;\n          calculateAndDisplayResults();\n        }\n      } catch (e) {\n        console.error(e);\n      }\n    }\n\n    function clearHistory() {\n      if (confirm(\"\u00bfEst\u00e1s seguro de borrar el historial de test guardados?\")) {\n        localStorage.removeItem(LOCAL_STORAGE_KEY_HISTORY);\n        renderHistory();\n      }\n    }\n\n    function renderCatalog() {\n      const container = document.getElementById('guideCatalog');\n      container.innerHTML = '';\n\n      Object.keys(ARCHETYPES_INFO).forEach(key => {\n        const info = ARCHETYPES_INFO[key];\n        const card = document.createElement('div');\n        card.style.cssText = \"background: var(--bg-cream); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 22px; margin-bottom: 20px;\";\n\n        card.innerHTML = `\n          <h3 style=\"color: ${info.colorHex}; font-size: 1.4rem; font-weight: 800; margin-bottom: 6px;\">\n            ${info.icon} ${info.name}\n          <\/h3>\n          <p style=\"font-weight: 600; color: var(--brown-soft); margin-bottom: 12px;\">${info.subtitle}<\/p>\n          <p style=\"margin-bottom: 16px;\">${info.summary}<\/p>\n\n          <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px;\">\n            <div>\n              <strong style=\"color: var(--brown-soft);\">Fortalezas clave:<\/strong>\n              <ul class=\"edu-list\" style=\"margin-top: 6px;\">\n                ${info.strengths.map(s => `<li>${s}<\/li>`).join('')}\n              <\/ul>\n            <\/div>\n            <div>\n              <strong style=\"color: #991B1B;\">\u00c1reas a equilibrar:<\/strong>\n              <ul class=\"edu-list\" style=\"margin-top: 6px;\">\n                ${info.shadows.map(s => `<li>${s}<\/li>`).join('')}\n              <\/ul>\n            <\/div>\n          <\/div>\n\n          <div style=\"background: white; padding: 14px; border-radius: var(--radius-sm); border-left: 3px solid ${info.colorHex};\">\n            <strong style=\"color: var(--brown-soft);\">Consejo de Autocuidado y Trabajo Personal:<\/strong>\n            <p style=\"font-size: 0.92rem; margin-top: 4px;\">${info.tips[0]}<\/p>\n          <\/div>\n        `;\n        container.appendChild(card);\n      });\n    }\n\n    function resetQuiz() {\n      userAnswers = new Array(20).fill(null);\n      currentQuestionIndex = 0;\n      localStorage.removeItem(LOCAL_STORAGE_KEY_DRAFT);\n      switchTab('quiz');\n    }\n\n    function exportResults() {\n      \/\/ Find dominant archetype\n      const scores = { \"Guerrero\": 0, \"Sabio Rey\": 0, \"Amante\": 0, \"Mago\": 0 };\n      userAnswers.forEach((letter, idx) => {\n        const q = QUESTIONS_DATA[idx];\n        const opt = q.options.find(o => o.letter === letter);\n        if (opt && scores[opt.archetype] !== undefined) scores[opt.archetype]++;\n      });\n\n      let dominant = \"Guerrero\";\n      let maxS = -1;\n      Object.keys(scores).forEach(k => {\n        if (scores[k] > maxS) {\n          maxS = scores[k];\n          dominant = k;\n        }\n      });\n\n      const summaryText = `--- RESULTADOS DEL CUESTIONARIO DE ARQUETIPOS ---\nArquetipo Dominante: ${dominant} (${ARCHETYPES_INFO[dominant].subtitle})\n\nPuntuaci\u00f3n:\n\u2022 Guerrero: ${scores.Guerrero}\/20 pts\n\u2022 Sabio Rey: ${scores['Sabio Rey']}\/20 pts\n\u2022 Amante: ${scores.Amante}\/20 pts\n\u2022 Mago: ${scores.Mago}\/20 pts\n\nApp: \"Qu\u00e9 tipo de arquetipo eres\" - Herramienta de Bienestar y Autocuidado.`;\n\n      \/\/ Copy to clipboard fallback for iframe context\n      const dummy = document.createElement(\"textarea\");\n      document.body.appendChild(dummy);\n      dummy.value = summaryText;\n      dummy.select();\n      document.execCommand(\"copy\");\n      document.body.removeChild(dummy);\n\n      alert(\"\u00a1Resumen de resultados copiado al portapapeles con \u00e9xito!\");\n    }\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 tipo de arquetipo eres &#8211; Test Interactivo \u26a0\ufe0f\ufe0f Aviso Importante: Esta app es una herramienta de bienestar y autocuidado. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":2,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}