Descubre tu apego<\/title>\n <style>\n \/* CORRECCI\u00d3N PARA WORDPRESS Y SUPERPOSICI\u00d3N DE CABECERA *\/\n \/* Empuja el contenido hacia abajo para que la barra 'Home' de WordPress no lo tape *\/\n main {\n margin-top: 120px !important;\n }\n\n \/* Oculta secciones de t\u00edtulo\/hero del tema de WordPress si interfieren *\/\n .page-header, \n .entry-header, \n .hero-section, \n .header-image,\n .entry-title {\n display: none !important;\n }\n\n \/* Variables de Paleta y Estilos Base *\/\n :root {\n --bg-crema: #F7F1EA;\n --blanco: #FFFFFF;\n --marron-suave: #5C4033;\n --beige: #E8DED2;\n --verde-calma: #9CAF88;\n --azul-respiracion: #A7C7E7;\n --lila-suave: #C4B5FD;\n --terracota-suave: #B86B4B;\n --texto-oscuro: #1F1B16;\n --gris: #6B7280;\n --border-radius: 18px;\n --shadow: 0 10px 25px -5px rgba(92, 64, 51, 0.08), 0 8px 10px -6px rgba(92, 64, 51, 0.04);\n --transition: all 0.3s 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: -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-crema);\n color: var(--texto-oscuro);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n line-height: 1.6;\n padding: 0;\n margin: 0;\n }\n\n \/* Header interno de la app (posici\u00f3n relativa para que no quede flotando en medio) *\/\n header.app-header {\n background-color: var(--blanco);\n border-bottom: 1px solid var(--beige);\n padding: 1rem 1.5rem;\n position: relative !important; \/* Desactivado el sticky para evitar interrupci\u00f3n *\/\n z-index: 10;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);\n border-radius: 12px;\n margin-bottom: 1rem;\n }\n\n .header-content {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n text-decoration: none;\n color: var(--marron-suave);\n font-weight: 700;\n font-size: 1.25rem;\n }\n\n .logo-icon {\n width: 38px;\n height: 38px;\n background-color: var(--verde-calma);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--blanco);\n }\n\n \/* Contenedor Principal *\/\n main {\n max-width: 800px;\n width: 100%;\n margin: 0 auto;\n padding: 1rem;\n flex-grow: 1;\n }\n\n \/* Tarjetas *\/\n .card {\n background-color: var(--blanco);\n border-radius: var(--border-radius);\n padding: 2rem;\n box-shadow: var(--shadow);\n border: 1px solid var(--beige);\n margin-bottom: 1.5rem;\n animation: fadeIn 0.4s ease-out;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* T\u00edtulos y Subt\u00edtulos *\/\n .app-title {\n font-size: 2.2rem;\n color: var(--marron-suave);\n font-weight: 800;\n text-align: center;\n margin-bottom: 0.25rem;\n letter-spacing: -0.5px;\n }\n\n .app-subtitle {\n font-size: 1.05rem;\n color: var(--gris);\n text-align: center;\n margin-bottom: 1.5rem;\n font-weight: 400;\n }\n\n \/* Aviso Importante *\/\n .disclaimer-box {\n background-color: #FFF8F6;\n border-left: 4px solid var(--terracota-suave);\n border-radius: 12px;\n padding: 1rem 1.25rem;\n margin-bottom: 2rem;\n font-size: 0.875rem;\n color: #7A3E26;\n line-height: 1.5;\n }\n\n .disclaimer-title {\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.25rem;\n text-transform: uppercase;\n font-size: 0.75rem;\n letter-spacing: 0.5px;\n }\n\n \/* Formularios e Inputs *\/\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-label {\n display: block;\n font-size: 0.95rem;\n font-weight: 600;\n color: var(--texto-oscuro);\n margin-bottom: 0.5rem;\n }\n\n .form-input {\n width: 100%;\n padding: 0.85rem 1rem;\n border: 1.5px solid var(--beige);\n border-radius: 12px;\n font-size: 1rem;\n color: var(--texto-oscuro);\n background-color: var(--bg-crema);\n transition: var(--transition);\n outline: none;\n }\n\n .form-input:focus {\n border-color: var(--verde-calma);\n background-color: var(--blanco);\n box-shadow: 0 0 0 4px rgba(156, 175, 136, 0.15);\n }\n\n \/* Opciones de G\u00e9nero *\/\n .gender-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n gap: 0.75rem;\n }\n\n .gender-card {\n border: 1.5px solid var(--beige);\n background-color: var(--bg-crema);\n border-radius: 12px;\n padding: 0.85rem;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n user-select: none;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.35rem;\n }\n\n .gender-card:hover {\n border-color: var(--verde-calma);\n }\n\n .gender-card.selected {\n border-color: var(--verde-calma);\n background-color: #F0F4EC;\n color: var(--marron-suave);\n font-weight: 600;\n }\n\n .gender-card input[type=\"radio\"] {\n display: none;\n }\n\n \/* Botones *\/\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 1rem 1.5rem;\n background-color: var(--verde-calma);\n color: var(--blanco);\n border: none;\n border-radius: 14px;\n font-size: 1.05rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n box-shadow: 0 4px 12px rgba(156, 175, 136, 0.3);\n gap: 0.5rem;\n text-decoration: none;\n }\n\n .btn:hover {\n background-color: #8A9E75;\n transform: translateY(-1px);\n }\n\n .btn:active {\n transform: translateY(0);\n }\n\n .btn-secondary {\n background-color: var(--blanco);\n color: var(--marron-suave);\n border: 1.5px solid var(--beige);\n box-shadow: none;\n }\n\n .btn-secondary:hover {\n background-color: var(--bg-crema);\n border-color: var(--verde-calma);\n }\n\n .btn-group {\n display: flex;\n gap: 1rem;\n margin-top: 1.5rem;\n }\n\n \/* Barra de Progreso *\/\n .progress-wrapper {\n margin-bottom: 1.5rem;\n }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n font-size: 0.85rem;\n color: var(--gris);\n margin-bottom: 0.5rem;\n font-weight: 600;\n }\n\n .progress-bar-bg {\n height: 10px;\n background-color: var(--beige);\n border-radius: 20px;\n overflow: hidden;\n }\n\n .progress-bar-fill {\n height: 100%;\n background-color: var(--verde-calma);\n width: 0%;\n transition: width 0.3s ease;\n border-radius: 20px;\n }\n\n \/* Preguntas *\/\n .question-title {\n font-size: 1.25rem;\n color: var(--texto-oscuro);\n font-weight: 600;\n margin-bottom: 1.5rem;\n min-height: 3.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n line-height: 1.4;\n }\n\n \/* Escala Likert 1-7 *\/\n .likert-scale {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 0.4rem;\n margin-bottom: 1.5rem;\n }\n\n .likert-btn {\n background-color: var(--bg-crema);\n border: 1.5px solid var(--beige);\n border-radius: 12px;\n padding: 1rem 0;\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--marron-suave);\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .likert-btn:hover {\n border-color: var(--verde-calma);\n background-color: var(--blanco);\n }\n\n .likert-btn.selected {\n background-color: var(--verde-calma);\n color: var(--blanco);\n border-color: var(--verde-calma);\n transform: scale(1.05);\n box-shadow: 0 4px 10px rgba(156, 175, 136, 0.4);\n }\n\n .likert-labels {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--gris);\n font-weight: 500;\n padding: 0 0.25rem;\n }\n\n \/* Pantalla de Resultados *\/\n .result-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n background-color: #F0F4EC;\n color: var(--verde-calma);\n font-weight: 700;\n border-radius: 30px;\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 0.75rem;\n }\n\n .result-title {\n font-size: 2rem;\n color: var(--marron-suave);\n font-weight: 800;\n margin-bottom: 1rem;\n text-align: center;\n }\n\n .result-description {\n color: var(--texto-oscuro);\n font-size: 1rem;\n line-height: 1.6;\n margin-bottom: 2rem;\n text-align: center;\n }\n\n \/* Dimensiones *\/\n .scores-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n\n .score-card {\n background-color: var(--bg-crema);\n border-radius: 14px;\n padding: 1.25rem;\n text-align: center;\n border: 1px solid var(--beige);\n }\n\n .score-value {\n font-size: 1.8rem;\n font-weight: 800;\n color: var(--marron-suave);\n }\n\n .score-label {\n font-size: 0.8rem;\n color: var(--gris);\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n\n .score-level {\n font-size: 0.75rem;\n font-weight: 700;\n margin-top: 0.25rem;\n padding: 0.15rem 0.6rem;\n border-radius: 10px;\n display: inline-block;\n }\n\n .level-high { background-color: #FEE2E2; color: #991B1B; }\n .level-low { background-color: #D1FAE5; color: #065F46; }\n\n \/* Lienzo Canvas para Matriz de Apego *\/\n .canvas-container {\n position: relative;\n width: 100%;\n max-width: 380px;\n margin: 0 auto 2rem auto;\n aspect-ratio: 1 \/ 1;\n }\n\n canvas {\n width: 100%;\n height: 100%;\n border-radius: 16px;\n background-color: var(--blanco);\n border: 1px solid var(--beige);\n box-shadow: 0 4px 12px rgba(0,0,0,0.03);\n }\n\n \/* Tips y Consejos *\/\n .tips-section {\n background-color: #FAF6F0;\n border-radius: 16px;\n padding: 1.5rem;\n border: 1px solid var(--beige);\n margin-bottom: 2rem;\n }\n\n .tips-header {\n font-size: 1.2rem;\n font-weight: 700;\n color: var(--marron-suave);\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .tip-item {\n display: flex;\n gap: 0.85rem;\n margin-bottom: 1rem;\n align-items: flex-start;\n }\n\n .tip-item:last-child {\n margin-bottom: 0;\n }\n\n .tip-number {\n background-color: var(--verde-calma);\n color: var(--blanco);\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.8rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n .tip-content h4 {\n font-size: 0.95rem;\n color: var(--texto-oscuro);\n font-weight: 700;\n margin-bottom: 0.2rem;\n }\n\n .tip-content p {\n font-size: 0.875rem;\n color: var(--gris);\n line-height: 1.5;\n }\n\n \/* Ocultar Elementos *\/\n .hidden {\n display: none !important;\n }\n\n \/* Historial en LocalStorage *\/\n .history-item {\n padding: 1rem;\n border-bottom: 1px solid var(--beige);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .history-item:last-child { border-bottom: none; }\n\n \/* Footer *\/\n footer {\n text-align: center;\n padding: 1.5rem;\n color: var(--gris);\n font-size: 0.8rem;\n border-top: 1px solid var(--beige);\n background-color: var(--blanco);\n margin-top: auto;\n }\n\n \/* Responsividad para m\u00f3viles *\/\n @media (max-width: 600px) {\n main {\n margin-top: 100px !important; \/* Ajuste para pantalla m\u00f3vil *\/\n padding: 0.5rem;\n }\n .card {\n padding: 1.25rem;\n border-radius: 14px;\n }\n .app-title {\n font-size: 1.75rem;\n }\n .question-title {\n font-size: 1.1rem;\n min-height: 4rem;\n }\n .likert-scale {\n gap: 0.25rem;\n }\n .likert-btn {\n padding: 0.75rem 0;\n font-size: 1rem;\n border-radius: 8px;\n }\n .scores-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <main>\n\n \n <header class=\"app-header\">\n <div class=\"header-content\">\n <a href=\"#\" class=\"logo\" onclick=\"resetToHome()\">\n <div class=\"logo-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><\/svg>\n <\/div>\n <span>Descubre tu apego<\/span>\n <\/a>\n <button id=\"btn-history\" class=\"btn-secondary\" style=\"padding: 0.4rem 0.8rem; font-size: 0.8rem; width: auto;\" onclick=\"showHistoryModal()\">\n Historial\n <\/button>\n <\/div>\n <\/header>\n \n \n <div id=\"screen-welcome\" class=\"card\">\n <h1 class=\"app-title\">Descubre tu apego<\/h1>\n <p class=\"app-subtitle\">Descubre qu\u00e9 tipo de apego tienes para que puedas trabajarlo y superarlo.<\/p>\n\n \n <div class=\"disclaimer-box\">\n <div class=\"disclaimer-title\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n Aviso Importante\n <\/div>\n 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\n <form id=\"form-user\" onsubmit=\"handleStartTest(event)\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"user-name\">\u00bfC\u00f3mo te llamas? (Opcional)<\/label>\n <input type=\"text\" id=\"user-name\" class=\"form-input\" placeholder=\"Ej. Alex\" maxlength=\"30\">\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">\u00bfCu\u00e1l es tu g\u00e9nero?<\/label>\n <div class=\"gender-options\">\n <label class=\"gender-card\" id=\"gender-femenino\">\n <input type=\"radio\" name=\"gender\" value=\"femenino\" required onchange=\"selectGender('femenino')\">\n <span>Femenino<\/span>\n <\/label>\n <label class=\"gender-card\" id=\"gender-masculino\">\n <input type=\"radio\" name=\"gender\" value=\"masculino\" onchange=\"selectGender('masculino')\">\n <span>Masculino<\/span>\n <\/label>\n <label class=\"gender-card\" id=\"gender-nobinario\">\n <input type=\"radio\" name=\"gender\" value=\"nobinario\" onchange=\"selectGender('nobinario')\">\n <span>No bisiesto \/ Otro<\/span>\n <\/label>\n <label class=\"gender-card\" id=\"gender-privado\">\n <input type=\"radio\" name=\"gender\" value=\"privado\" onchange=\"selectGender('privado')\">\n <span>Prefiero no decir<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <button type=\"submit\" class=\"btn\">\n <span>Iniciar Cuestionario (36 preguntas)<\/span>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/button>\n <\/form>\n <\/div>\n\n \n <div id=\"screen-quiz\" class=\"card hidden\">\n <div class=\"progress-wrapper\">\n <div class=\"progress-info\">\n <span id=\"progress-text\">Pregunta 1 de 36<\/span>\n <span id=\"progress-percent\">3%<\/span>\n <\/div>\n <div class=\"progress-bar-bg\">\n <div id=\"progress-bar\" class=\"progress-bar-fill\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"question-title\" id=\"question-text\">\n Cargando pregunta…\n <\/div>\n\n \n <div class=\"likert-scale\">\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(1)\">1<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(2)\">2<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(3)\">3<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(4)\">4<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(5)\">5<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(6)\">6<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(7)\">7<\/button>\n <\/div>\n\n <div class=\"likert-labels\">\n <span>1 = Totalmente en desacuerdo<\/span>\n <span>4 = Neutral<\/span>\n <span>7 = Totalmente de acuerdo<\/span>\n <\/div>\n\n <div class=\"btn-group\">\n <button type=\"button\" id=\"btn-prev-q\" class=\"btn btn-secondary\" onclick=\"prevQuestion()\" disabled style=\"opacity:0.5;\">\n ← Anterior\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"screen-results\" class=\"card hidden\">\n <div style=\"text-align: center;\">\n <span class=\"result-badge\">Tu Estilo de Apego<\/span>\n <h2 id=\"result-title\" class=\"result-title\">Calculando…<\/h2>\n <\/div>\n\n <p id=\"result-description\" class=\"result-description\">\n Cargando an\u00e1lisis de resultados…\n <\/p>\n\n \n <div class=\"scores-grid\">\n <div class=\"score-card\">\n <div class=\"score-label\">Subescala Ansiedad<\/div>\n <div id=\"score-ansiedad-val\" class=\"score-value\">0.0<\/div>\n <div id=\"score-ansiedad-lvl\" class=\"score-level level-low\">Baja<\/div>\n <\/div>\n <div class=\"score-card\">\n <div class=\"score-label\">Subescala Evitaci\u00f3n<\/div>\n <div id=\"score-evitacion-val\" class=\"score-value\">0.0<\/div>\n <div id=\"score-evitacion-lvl\" class=\"score-level level-low\">Baja<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"canvas-container\">\n <canvas id=\"attachment-canvas\" width=\"380\" height=\"380\"><\/canvas>\n <\/div>\n\n \n <div class=\"tips-section\">\n <div class=\"tips-header\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"color: var(--terracota-suave);\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>\n <span>Consejos Pr\u00e1cticos para Arreglarlo y Trabajarlo<\/span>\n <\/div>\n <div id=\"tips-list\">\n \n <\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button type=\"button\" class=\"btn\" onclick=\"resetToHome()\">\n Realizar Test Nuevamente\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"modal-history\" class=\"card hidden\" style=\"position: fixed; inset: 0; margin: auto; max-width: 500px; max-height: 80vh; z-index: 100; overflow-y: auto;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;\">\n <h3 style=\"color: var(--marron-suave);\">Historial de Tests<\/h3>\n <button onclick=\"closeHistoryModal()\" class=\"btn-secondary\" style=\"width: auto; padding: 0.3rem 0.6rem;\">× Cerrar<\/button>\n <\/div>\n <div id=\"history-content\">\n \n <\/div>\n <\/div>\n\n <\/main>\n\n \n <footer>\n Basado en el Cuestionario de Experiencias en Relaciones Cercanas Revisado (ECR-R). <br>\n Herramienta interactiva de autocuidado personal.\n <\/footer>\n\n \n <script>\n \/* BASE DE DATOS Y PREGUNTAS DEL ECR-R (36 \u00edtems) *\/\n const questionsECRR = [\n \"1. Me preocupa que los dem\u00e1s no me valoren tanto como yo a ellos.\",\n \"2. Prefiero no mostrar a mi pareja c\u00f3mo me siento en lo m\u00e1s profundo.\",\n \"3. Me preocupa que mis parejas me dejen.\",\n \"4. Me siento inc\u00f3modo\/a cuando estoy cerca de mi pareja.\",\n \"5. A menudo me preocupa que mi pareja no quiera estar conmigo.\",\n \"6. Me incomoda que los dem\u00e1s se acerquen demasiado a m\u00ed emocionalmente.\",\n \"7. Me preocupa que mi pareja se canse de m\u00ed.\",\n \"8. Me resulta dif\u00edcil confiar plenamente en mi pareja.\",\n \"9. Rara vez me preocupa que me abandonen.\",\n \"10. Me resulta f\u00e1cil depender de mi pareja.\",\n \"11. Deseo tener una relaci\u00f3n muy cercana, pero eso a veces asusta a la gente.\",\n \"12. Me cuesta mucho abrirme del todo con mi pareja.\",\n \"13. Me preocupa que, si mi pareja me conoce bien, no le guste c\u00f3mo soy.\",\n \"14. No me gusta que la gente se apoye demasiado en m\u00ed emocionalmente.\",\n \"15. Cuando no estoy en una relaci\u00f3n, me siento un poco incompleto\/a.\",\n \"16. Es muy f\u00e1cil para m\u00ed mostrar afecto a mi pareja.\",\n \"17. Mi deseo de cercan\u00eda a veces asusta o aleja a las personas.\",\n \"18. Me resulta relativamente f\u00e1cil depender de los dem\u00e1s.\",\n \"19. Necesito que mi pareja me confirme constantemente que me ama.\",\n \"20. Me incomoda depender de los dem\u00e1s.\",\n \"21. A veces siento que presiono a mis parejas para que muestren m\u00e1s compromiso.\",\n \"22. No me preocupa que los dem\u00e1s me dejen solo\/a.\",\n \"23. Prefiero no depender de nadie.\",\n \"24. Me asusta la idea de que mi pareja me deje.\",\n \"25. Hablo abiertamente de mis sentimientos con mi pareja.\",\n \"26. Me preocupa que no le importe a mi pareja tanto como ella me importa a m\u00ed.\",\n \"27. Me pongo nervioso\/a cuando mi pareja se vuelve demasiado \u00edntima o cercana.\",\n \"28. Si mi pareja se aleja, me da miedo que empiece a perder inter\u00e9s en m\u00ed.\",\n \"29. Siento que las parejas se alejan cuando yo quiero acercarme.\",\n \"30. Le cuento casi todo a mi pareja.\",\n \"31. Me afecta mucho cuando mi pareja est\u00e1 distante.\",\n \"32. Me resulta f\u00e1cil confiar en los dem\u00e1s.\",\n \"33. Cuando le muestro mis sentimientos a mi pareja, tengo miedo de que no sienta lo mismo.\",\n \"34. No suelo hablar de mis problemas personales con mi pareja.\",\n \"35. Cuando mi pareja me desaprueba, me siento mal conmigo mismo\/a.\",\n \"36. Mi pareja me conoce muy bien.\"\n ];\n\n \/\/ \u00cdtems con puntuaci\u00f3n invertida\n const reverseItems = [9, 10, 16, 18, 22, 25, 30, 32, 36];\n\n \/\/ Subescalas\n const anxietyItems = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 22, 24, 26, 28, 29, 31, 33, 35];\n const avoidanceItems = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 23, 25, 27, 30, 32, 34, 36];\n\n \/* ESTADO DE LA APLICACI\u00d3N *\/\n let state = {\n userName: '',\n gender: 'privado',\n currentQuestion: 0,\n answers: new Array(36).fill(null),\n history: []\n };\n\n \/* INICIALIZACI\u00d3N Y LOCALSTORAGE *\/\n window.addEventListener('DOMContentLoaded', () => {\n loadFromLocalStorage();\n renderGenderSelection();\n });\n\n function saveToLocalStorage() {\n localStorage.setItem('descubre_tu_apego_data', JSON.stringify({\n userName: state.userName,\n gender: state.gender,\n answers: state.answers,\n currentQuestion: state.currentQuestion,\n history: state.history\n }));\n }\n\n function loadFromLocalStorage() {\n const saved = localStorage.getItem('descubre_tu_apego_data');\n if (saved) {\n try {\n const parsed = JSON.parse(saved);\n state.userName = parsed.userName || '';\n state.gender = parsed.gender || 'privado';\n state.answers = parsed.answers || new Array(36).fill(null);\n state.currentQuestion = parsed.currentQuestion || 0;\n state.history = parsed.history || [];\n\n document.getElementById('user-name').value = state.userName;\n } catch (e) {\n console.error(\"Error al cargar datos de localStorage\", e);\n }\n }\n }\n\n \/* MANEJO DE G\u00c9NERO *\/\n function selectGender(val) {\n state.gender = val;\n renderGenderSelection();\n saveToLocalStorage();\n }\n\n function renderGenderSelection() {\n document.querySelectorAll('.gender-card').forEach(card => card.classList.remove('selected'));\n const selectedCard = document.getElementById(`gender-${state.gender}`);\n if (selectedCard) {\n selectedCard.classList.add('selected');\n const radio = selectedCard.querySelector('input[type=\"radio\"]');\n if (radio) radio.checked = true;\n }\n }\n\n \/* INICIO DEL TEST *\/\n function handleStartTest(e) {\n e.preventDefault();\n state.userName = document.getElementById('user-name').value.trim();\n saveToLocalStorage();\n\n document.getElementById('screen-welcome').classList.add('hidden');\n document.getElementById('screen-quiz').classList.remove('hidden');\n\n renderQuestion();\n }\n\n \/* RENDERIZADO DE PREGUNTAS *\/\n function renderQuestion() {\n const index = state.currentQuestion;\n document.getElementById('question-text').innerText = questionsECRR[index];\n document.getElementById('progress-text').innerText = `Pregunta ${index + 1} de 36`;\n \n const progressPct = Math.round(((index + 1) \/ 36) * 100);\n document.getElementById('progress-percent').innerText = `${progressPct}%`;\n document.getElementById('progress-bar').style.width = `${progressPct}%`;\n\n \/\/ Bot\u00f3n anterior\n const btnPrev = document.getElementById('btn-prev-q');\n if (index > 0) {\n btnPrev.disabled = false;\n btnPrev.style.opacity = \"1\";\n } else {\n btnPrev.disabled = true;\n btnPrev.style.opacity = \"0.5\";\n }\n\n \/\/ Marcar respuesta previamente elegida si existe\n const currentAns = state.answers[index];\n document.querySelectorAll('.likert-btn').forEach((btn, idx) => {\n if (currentAns === (idx + 1)) {\n btn.classList.add('selected');\n } else {\n btn.classList.remove('selected');\n }\n });\n }\n\n function answerQuestion(val) {\n state.answers[state.currentQuestion] = val;\n saveToLocalStorage();\n\n if (state.currentQuestion < 35) {\n state.currentQuestion++;\n renderQuestion();\n } else {\n calculateResults();\n }\n }\n\n function prevQuestion() {\n if (state.currentQuestion > 0) {\n state.currentQuestion--;\n renderQuestion();\n }\n }\n\n \/* C\u00c1LCULO DE RESULTADOS Y DIAGN\u00d3STICO ECR-R *\/\n function calculateResults() {\n \/\/ 1. Invertir puntuaciones requeridas: 8 - valor_original\n const processedAnswers = state.answers.map((score, idx) => {\n const itemNum = idx + 1;\n return reverseItems.includes(itemNum) ? (8 - score) : score;\n });\n\n \/\/ 2. Sumar y promediar Subescala Ansiedad\n let totalAnsiedad = 0;\n anxietyItems.forEach(itemNum => {\n totalAnsiedad += processedAnswers[itemNum - 1];\n });\n const avgAnsiedad = totalAnsiedad \/ 18;\n\n \/\/ 3. Sumar y promediar Subescala Evitaci\u00f3n\n let totalEvitacion = 0;\n avoidanceItems.forEach(itemNum => {\n totalEvitacion += processedAnswers[itemNum - 1];\n });\n const avgEvitacion = totalEvitacion \/ 18;\n\n \/\/ 4. Determinar Cuadrante (Umbral en 4.0)\n const isHighAnsiedad = avgAnsiedad >= 4.0;\n const isHighEvitacion = avgEvitacion >= 4.0;\n\n let styleType = '';\n let description = '';\n let tips = [];\n\n const nameStr = state.userName ? `${state.userName}, tu` : 'Tu';\n\n if (!isHighAnsiedad && !isHighEvitacion) {\n styleType = 'Apego Seguro';\n description = `${nameStr} perfil refleja un Apego Seguro. Muestras una capacidad equilibrada para la intimidad emocional y la autonom\u00eda. Conf\u00edas en tus relaciones, no le temes al abandono de forma desmedida y puedes expresar tus vulnerabilidades de forma saludable.`;\n tips = getTipsForSeguro();\n } else if (isHighAnsiedad && !isHighEvitacion) {\n styleType = 'Apego Ansioso-Preocupado';\n description = `${nameStr} perfil refleja un Apego Ansioso-Preocupado. Tiendes a anhelar altos niveles de intimidad, pero te preocupa constantemente que los dem\u00e1s no te valoren tanto como t\u00fa a ellos o que puedan abandonarte. Buscas reaseguramiento constante.`;\n tips = getTipsForAnsioso();\n } else if (!isHighAnsiedad && isHighEvitacion) {\n styleType = 'Apego Evitativo-Alejado';\n description = `${nameStr} perfil refleja un Apego Evitativo-Alejado. Prefieres mantener una estricta independencia emocional. Te resulta inc\u00f3modo depender de otros o que se acerquen demasiado, optando por suprimir tus emociones o resolver todo en soledad.`;\n tips = getTipsForEvitativo();\n } else {\n styleType = 'Apego Temeroso-Desorganizado';\n description = `${nameStr} perfil refleja un Apego Temeroso-Desorganizado. Deseas profundamente tener relaciones cercanas y afectuosas, pero al mismo tiempo sientes un fuerte miedo a ser herido\/a o rechazado\/a. Esto puede generar una din\u00e1mica de acercarte y luego alejarte.`;\n tips = getTipsForDesorganizado();\n }\n\n \/\/ Guardar en Historial\n const resultRecord = {\n date: new Date().toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' }),\n style: styleType,\n ansiedad: avgAnsiedad.toFixed(2),\n evitacion: avgEvitacion.toFixed(2)\n };\n state.history.unshift(resultRecord);\n saveToLocalStorage();\n\n \/\/ Mostrar Pantalla de Resultados\n document.getElementById('screen-quiz').classList.add('hidden');\n document.getElementById('screen-results').classList.remove('hidden');\n\n document.getElementById('result-title').innerText = styleType;\n document.getElementById('result-description').innerText = description;\n\n document.getElementById('score-ansiedad-val').innerText = avgAnsiedad.toFixed(2);\n document.getElementById('score-evitacion-val').innerText = avgEvitacion.toFixed(2);\n\n \/\/ Niveles\n const lvlAns = document.getElementById('score-ansiedad-lvl');\n lvlAns.innerText = isHighAnsiedad ? 'Alta' : 'Baja';\n lvlAns.className = `score-level ${isHighAnsiedad ? 'level-high' : 'level-low'}`;\n\n const lvlEvi = document.getElementById('score-evitacion-lvl');\n lvlEvi.innerText = isHighEvitacion ? 'Alta' : 'Baja';\n lvlEvi.className = `score-level ${isHighEvitacion ? 'level-high' : 'level-low'}`;\n\n \/\/ Dibujar Canvas\n drawCanvasMatrix(avgAnsiedad, avgEvitacion);\n\n \/\/ Renderizar Tips\n renderTips(tips);\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n \/* RENDERING DYNAMIC TIPS SEG\u00daN ESTILO Y G\u00c9NERO *\/\n function getTipsForSeguro() {\n return [\n {\n title: \"Comunica tus l\u00edmites con empat\u00eda\",\n body: \"Aprovecha tu capacidad de estar c\u00f3modo\/a en la intimidad para mantener conversaciones abiertas sobre las necesidades de espacio o cercan\u00eda de tu pareja.\"\n },\n {\n title: \"Apoya el crecimiento de tu pareja\",\n body: \"Si te relacionas con alguien con apego ansioso o evitativo, s\u00e9 un puerto seguro ofreciendo validaci\u00f3n constante sin perder tu propia autonom\u00eda.\"\n },\n {\n title: \"Cultiva tu espacio personal\",\n body: \"Contin\u00faa manteniendo tus propios pasatiempos, metas y amistades independientes de tu vida de pareja.\"\n }\n ];\n }\n\n function getTipsForAnsioso() {\n const pronoun = state.gender === 'femenino' ? 'segura y valiosa' : (state.gender === 'masculino' ? 'seguro y valioso' : 'una persona valiosa');\n return [\n {\n title: \"Pr\u00e1ctica el 'Auto-sosegado' (Self-soothing)\",\n body: `Cuando sientas angustia por una supuesta distancia, recuerda que eres ${pronoun} por ti mismo\/a. Haz pausas de respiraci\u00f3n profunda antes de reaccionar e impulsar reclamos.`\n },\n {\n title: \"Reconoce la diferencia entre hechos e interpretaciones\",\n body: \"Si tu pareja tarda en responder un mensaje, no asumas desinter\u00e9s. Escribe tus pensamientos en una libreta antes de dar por sentado el peor escenario.\"\n },\n {\n title: \"Expresa necesidades de forma asertiva\",\n body: \"En lugar de decir 'nunca est\u00e1s para m\u00ed', prueba con: 'Me har\u00eda sentir m\u00e1s tranquilo\/a si acordamos un momento para hablar hoy'.\"\n },\n {\n title: \"Diversifica tus fuentes de bienestar\",\n body: \"No pongas la responsabilidad de tu felicidad completa en tu pareja. Fortalece redes de apoyo con amigos, pasatiempos y metas propias.\"\n }\n ];\n }\n\n function getTipsForEvitativo() {\n return [\n {\n title: \"Practica la micro-vulnerabilidad\",\n body: \"Empieza a compartir peque\u00f1os sentimientos o preocupaciones personales de forma gradual con personas de confianza. La vulnerabilidad es valent\u00eda, no debilidad.\"\n },\n {\n title: \"Comunica tu necesidad de espacio con claridad\",\n body: \"Si te sientes abrumado\/a, en lugar de distanciarte en silencio, di: 'Necesito un par de horas para m\u00ed para procesar esto, pero luego volvemos a hablar'.\"\n },\n {\n title: \"Aprende a pausar la desactivaci\u00f3n emocional\",\n body: \"Detecta cuando est\u00e9s minimizando tus emociones o las de tu pareja como mecanismo de defensa para no sentirte expuesto\/a.\"\n },\n {\n title: \"Reconoce la interdependencia saludable\",\n body: \"Depender de alguien de forma equilibrada no significa perder tu libertad ni tu identidad individual.\"\n }\n ];\n }\n\n function getTipsForDesorganizado() {\n return [\n {\n title: \"Identifica tus detonantes (Triggers)\",\n body: \"Lleva un registro de los momentos en que sientes el impulso violento de huir o de aferrarte. Comprender el origen de tus miedos reduce su poder sobre ti.\"\n },\n {\n title: \"Regula tu sistema nervioso\",\n body: \"Utiliza t\u00e9cnicas som\u00e1ticas (como caminar, tocar tierra o respirar en tiempos 4-7-8) cuando percibas que entras en un estado de amenaza dentro de tu relaci\u00f3n.\"\n },\n {\n title: \"Establece un ritmo pausado en tus relaciones\",\n body: \"Evita acelerar excesivamente el v\u00ednculo o cortar de forma tajante ante el primer conflicto. Perm\u00edtete evaluar la confianza paso a paso.\"\n },\n {\n title: \"Busca un espacio terap\u00e9utico\",\n body: \"Dado que el apego desorganizado suele vincularse a herida de trauma temprano, el acompa\u00f1amiento psicol\u00f3gico brinda un marco ideal para reparar la seguridad interna.\"\n }\n ];\n }\n\n function renderTips(tips) {\n const container = document.getElementById('tips-list');\n container.innerHTML = '';\n\n tips.forEach((tip, idx) => {\n const item = document.createElement('div');\n item.className = 'tip-item';\n item.innerHTML = `\n <div class=\"tip-number\">${idx + 1}<\/div>\n <div class=\"tip-content\">\n <h4>${tip.title}<\/h4>\n <p>${tip.body}<\/p>\n <\/div>\n `;\n container.appendChild(item);\n });\n }\n\n \/* DIBUJO DE LA MATRIZ DE CUADRANTES CON HTML5 CANVAS *\/\n function drawCanvasMatrix(ansiedadVal, evitacionVal) {\n const canvas = document.getElementById('attachment-canvas');\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n const w = canvas.width;\n const h = canvas.height;\n\n \/\/ Limpiar lienzo\n ctx.clearRect(0, 0, w, h);\n\n \/\/ Rellenar Cuadrantes con tonos suaves\n const halfW = w \/ 2;\n const halfH = h \/ 2;\n\n \/\/ Superior Izquierdo: Ansioso\n ctx.fillStyle = '#FFF5F2';\n ctx.fillRect(0, 0, halfW, halfH);\n\n \/\/ Superior Derecho: Temeroso \/ Desorganizado\n ctx.fillStyle = '#FDF2F2';\n ctx.fillRect(halfW, 0, halfW, halfH);\n\n \/\/ Inferior Izquierdo: Seguro\n ctx.fillStyle = '#F0F7EE';\n ctx.fillRect(0, halfH, halfW, halfH);\n\n \/\/ Inferior Derecho: Evitativo\n ctx.fillStyle = '#F2F6FA';\n ctx.fillRect(halfW, halfH, halfW, halfH);\n\n \/\/ Dibujar Ejes Centrales\n ctx.strokeStyle = '#D1C7BD';\n ctx.lineWidth = 2;\n ctx.setLineDash([4, 4]);\n\n \/\/ Eje Vertical\n ctx.beginPath();\n ctx.moveTo(halfW, 0);\n ctx.lineTo(halfW, h);\n ctx.stroke();\n\n \/\/ Eje Horizontal\n ctx.beginPath();\n ctx.moveTo(0, halfH);\n ctx.lineTo(w, halfH);\n ctx.stroke();\n\n ctx.setLineDash([]); \/\/ Reset linea continua\n\n \/\/ Etiquetas de los Cuadrantes\n ctx.font = 'bold 11px sans-serif';\n ctx.textAlign = 'center';\n\n ctx.fillStyle = '#B86B4B';\n ctx.fillText('ANSIOSO - PREOCUPADO', halfW \/ 2, 25);\n\n ctx.fillStyle = '#991B1B';\n ctx.fillText('TEMEROSO \/ DESORGANIZADO', halfW + (halfW \/ 2), 25);\n\n ctx.fillStyle = '#4D7C0F';\n ctx.fillText('APEGO SEGURO', halfW \/ 2, h - 15);\n\n ctx.fillStyle = '#1E40AF';\n ctx.fillText('EVITATIVO - ALEJADO', halfW + (halfW \/ 2), h - 15);\n\n \/\/ Mapear Valores a Pixeles\n const posX = ((evitacionVal - 1) \/ 6) * w;\n const posY = h - (((ansiedadVal - 1) \/ 6) * h);\n\n \/\/ Dibujar Punto del Usuario\n ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';\n ctx.shadowBlur = 8;\n \n ctx.fillStyle = '#5C4033';\n ctx.beginPath();\n ctx.arc(posX, posY, 10, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.strokeStyle = '#FFFFFF';\n ctx.lineWidth = 3;\n ctx.stroke();\n\n ctx.shadowBlur = 0; \/\/ Reset sombra\n }\n\n \/* HISTORIAL *\/\n function showHistoryModal() {\n const modal = document.getElementById('modal-history');\n const content = document.getElementById('history-content');\n \n if (state.history.length === 0) {\n content.innerHTML = '<p style=\"color: var(--gris); text-align: center; padding: 1rem;\">No tienes ning\u00fan test guardado a\u00fan.<\/p>';\n } else {\n content.innerHTML = state.history.map(item => `\n <div class=\"history-item\">\n <div>\n <strong style=\"color: var(--marron-suave);\">${item.style}<\/strong>\n <div style=\"font-size: 0.75rem; color: var(--gris);\">${item.date}<\/div>\n <\/div>\n <div style=\"font-size: 0.8rem; text-align: right;\">\n <div>Ansiedad: <strong>${item.ansiedad}<\/strong><\/div>\n <div>Evitaci\u00f3n: <strong>${item.evitacion}<\/strong><\/div>\n <\/div>\n <\/div>\n `).join('');\n }\n\n modal.classList.remove('hidden');\n }\n\n function closeHistoryModal() {\n document.getElementById('modal-history').classList.add('hidden');\n }\n\n \/* REINICIAR Y VOLVER AL INICIO *\/\n function resetToHome() {\n state.currentQuestion = 0;\n state.answers = new Array(36).fill(null);\n saveToLocalStorage();\n\n document.getElementById('screen-results').classList.add('hidden');\n document.getElementById('screen-quiz').classList.add('hidden');\n document.getElementById('screen-welcome').classList.remove('hidden');\n closeHistoryModal();\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Descubre tu apego Descubre tu apego Historial Descubre tu apego Descubre qu\u00e9 tipo de apego tienes para que puedas trabajarlo y superarlo. Aviso Importante 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. \u00bfC\u00f3mo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/6","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=6"}],"version-history":[{"count":1,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2026-08-18T20:26:18","date_gmt":"2026-08-18T20:26:18","guid":{"rendered":"https:\/\/algoritmodelalma.com\/?page_id=6"},"modified":"2026-08-18T20:26:18","modified_gmt":"2026-08-18T20:26:18","slug":"descubre-tu-apego","status":"publish","type":"page","link":"https:\/\/algoritmodelalma.com\/","title":{"rendered":"Descubre tu apego"},"content":{"rendered":"\n\n\n\n \n \n Descubre tu apego<\/title>\n <style>\n \/* CORRECCI\u00d3N PARA WORDPRESS Y SUPERPOSICI\u00d3N DE CABECERA *\/\n \/* Empuja el contenido hacia abajo para que la barra 'Home' de WordPress no lo tape *\/\n main {\n margin-top: 120px !important;\n }\n\n \/* Oculta secciones de t\u00edtulo\/hero del tema de WordPress si interfieren *\/\n .page-header, \n .entry-header, \n .hero-section, \n .header-image,\n .entry-title {\n display: none !important;\n }\n\n \/* Variables de Paleta y Estilos Base *\/\n :root {\n --bg-crema: #F7F1EA;\n --blanco: #FFFFFF;\n --marron-suave: #5C4033;\n --beige: #E8DED2;\n --verde-calma: #9CAF88;\n --azul-respiracion: #A7C7E7;\n --lila-suave: #C4B5FD;\n --terracota-suave: #B86B4B;\n --texto-oscuro: #1F1B16;\n --gris: #6B7280;\n --border-radius: 18px;\n --shadow: 0 10px 25px -5px rgba(92, 64, 51, 0.08), 0 8px 10px -6px rgba(92, 64, 51, 0.04);\n --transition: all 0.3s 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: -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-crema);\n color: var(--texto-oscuro);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n line-height: 1.6;\n padding: 0;\n margin: 0;\n }\n\n \/* Header interno de la app (posici\u00f3n relativa para que no quede flotando en medio) *\/\n header.app-header {\n background-color: var(--blanco);\n border-bottom: 1px solid var(--beige);\n padding: 1rem 1.5rem;\n position: relative !important; \/* Desactivado el sticky para evitar interrupci\u00f3n *\/\n z-index: 10;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);\n border-radius: 12px;\n margin-bottom: 1rem;\n }\n\n .header-content {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n text-decoration: none;\n color: var(--marron-suave);\n font-weight: 700;\n font-size: 1.25rem;\n }\n\n .logo-icon {\n width: 38px;\n height: 38px;\n background-color: var(--verde-calma);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--blanco);\n }\n\n \/* Contenedor Principal *\/\n main {\n max-width: 800px;\n width: 100%;\n margin: 0 auto;\n padding: 1rem;\n flex-grow: 1;\n }\n\n \/* Tarjetas *\/\n .card {\n background-color: var(--blanco);\n border-radius: var(--border-radius);\n padding: 2rem;\n box-shadow: var(--shadow);\n border: 1px solid var(--beige);\n margin-bottom: 1.5rem;\n animation: fadeIn 0.4s ease-out;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* T\u00edtulos y Subt\u00edtulos *\/\n .app-title {\n font-size: 2.2rem;\n color: var(--marron-suave);\n font-weight: 800;\n text-align: center;\n margin-bottom: 0.25rem;\n letter-spacing: -0.5px;\n }\n\n .app-subtitle {\n font-size: 1.05rem;\n color: var(--gris);\n text-align: center;\n margin-bottom: 1.5rem;\n font-weight: 400;\n }\n\n \/* Aviso Importante *\/\n .disclaimer-box {\n background-color: #FFF8F6;\n border-left: 4px solid var(--terracota-suave);\n border-radius: 12px;\n padding: 1rem 1.25rem;\n margin-bottom: 2rem;\n font-size: 0.875rem;\n color: #7A3E26;\n line-height: 1.5;\n }\n\n .disclaimer-title {\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.25rem;\n text-transform: uppercase;\n font-size: 0.75rem;\n letter-spacing: 0.5px;\n }\n\n \/* Formularios e Inputs *\/\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-label {\n display: block;\n font-size: 0.95rem;\n font-weight: 600;\n color: var(--texto-oscuro);\n margin-bottom: 0.5rem;\n }\n\n .form-input {\n width: 100%;\n padding: 0.85rem 1rem;\n border: 1.5px solid var(--beige);\n border-radius: 12px;\n font-size: 1rem;\n color: var(--texto-oscuro);\n background-color: var(--bg-crema);\n transition: var(--transition);\n outline: none;\n }\n\n .form-input:focus {\n border-color: var(--verde-calma);\n background-color: var(--blanco);\n box-shadow: 0 0 0 4px rgba(156, 175, 136, 0.15);\n }\n\n \/* Opciones de G\u00e9nero *\/\n .gender-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n gap: 0.75rem;\n }\n\n .gender-card {\n border: 1.5px solid var(--beige);\n background-color: var(--bg-crema);\n border-radius: 12px;\n padding: 0.85rem;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n user-select: none;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.35rem;\n }\n\n .gender-card:hover {\n border-color: var(--verde-calma);\n }\n\n .gender-card.selected {\n border-color: var(--verde-calma);\n background-color: #F0F4EC;\n color: var(--marron-suave);\n font-weight: 600;\n }\n\n .gender-card input[type=\"radio\"] {\n display: none;\n }\n\n \/* Botones *\/\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 1rem 1.5rem;\n background-color: var(--verde-calma);\n color: var(--blanco);\n border: none;\n border-radius: 14px;\n font-size: 1.05rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n box-shadow: 0 4px 12px rgba(156, 175, 136, 0.3);\n gap: 0.5rem;\n text-decoration: none;\n }\n\n .btn:hover {\n background-color: #8A9E75;\n transform: translateY(-1px);\n }\n\n .btn:active {\n transform: translateY(0);\n }\n\n .btn-secondary {\n background-color: var(--blanco);\n color: var(--marron-suave);\n border: 1.5px solid var(--beige);\n box-shadow: none;\n }\n\n .btn-secondary:hover {\n background-color: var(--bg-crema);\n border-color: var(--verde-calma);\n }\n\n .btn-group {\n display: flex;\n gap: 1rem;\n margin-top: 1.5rem;\n }\n\n \/* Barra de Progreso *\/\n .progress-wrapper {\n margin-bottom: 1.5rem;\n }\n\n .progress-info {\n display: flex;\n justify-content: space-between;\n font-size: 0.85rem;\n color: var(--gris);\n margin-bottom: 0.5rem;\n font-weight: 600;\n }\n\n .progress-bar-bg {\n height: 10px;\n background-color: var(--beige);\n border-radius: 20px;\n overflow: hidden;\n }\n\n .progress-bar-fill {\n height: 100%;\n background-color: var(--verde-calma);\n width: 0%;\n transition: width 0.3s ease;\n border-radius: 20px;\n }\n\n \/* Preguntas *\/\n .question-title {\n font-size: 1.25rem;\n color: var(--texto-oscuro);\n font-weight: 600;\n margin-bottom: 1.5rem;\n min-height: 3.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n line-height: 1.4;\n }\n\n \/* Escala Likert 1-7 *\/\n .likert-scale {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 0.4rem;\n margin-bottom: 1.5rem;\n }\n\n .likert-btn {\n background-color: var(--bg-crema);\n border: 1.5px solid var(--beige);\n border-radius: 12px;\n padding: 1rem 0;\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--marron-suave);\n cursor: pointer;\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .likert-btn:hover {\n border-color: var(--verde-calma);\n background-color: var(--blanco);\n }\n\n .likert-btn.selected {\n background-color: var(--verde-calma);\n color: var(--blanco);\n border-color: var(--verde-calma);\n transform: scale(1.05);\n box-shadow: 0 4px 10px rgba(156, 175, 136, 0.4);\n }\n\n .likert-labels {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--gris);\n font-weight: 500;\n padding: 0 0.25rem;\n }\n\n \/* Pantalla de Resultados *\/\n .result-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n background-color: #F0F4EC;\n color: var(--verde-calma);\n font-weight: 700;\n border-radius: 30px;\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 0.75rem;\n }\n\n .result-title {\n font-size: 2rem;\n color: var(--marron-suave);\n font-weight: 800;\n margin-bottom: 1rem;\n text-align: center;\n }\n\n .result-description {\n color: var(--texto-oscuro);\n font-size: 1rem;\n line-height: 1.6;\n margin-bottom: 2rem;\n text-align: center;\n }\n\n \/* Dimensiones *\/\n .scores-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 2rem;\n }\n\n .score-card {\n background-color: var(--bg-crema);\n border-radius: 14px;\n padding: 1.25rem;\n text-align: center;\n border: 1px solid var(--beige);\n }\n\n .score-value {\n font-size: 1.8rem;\n font-weight: 800;\n color: var(--marron-suave);\n }\n\n .score-label {\n font-size: 0.8rem;\n color: var(--gris);\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n\n .score-level {\n font-size: 0.75rem;\n font-weight: 700;\n margin-top: 0.25rem;\n padding: 0.15rem 0.6rem;\n border-radius: 10px;\n display: inline-block;\n }\n\n .level-high { background-color: #FEE2E2; color: #991B1B; }\n .level-low { background-color: #D1FAE5; color: #065F46; }\n\n \/* Lienzo Canvas para Matriz de Apego *\/\n .canvas-container {\n position: relative;\n width: 100%;\n max-width: 380px;\n margin: 0 auto 2rem auto;\n aspect-ratio: 1 \/ 1;\n }\n\n canvas {\n width: 100%;\n height: 100%;\n border-radius: 16px;\n background-color: var(--blanco);\n border: 1px solid var(--beige);\n box-shadow: 0 4px 12px rgba(0,0,0,0.03);\n }\n\n \/* Tips y Consejos *\/\n .tips-section {\n background-color: #FAF6F0;\n border-radius: 16px;\n padding: 1.5rem;\n border: 1px solid var(--beige);\n margin-bottom: 2rem;\n }\n\n .tips-header {\n font-size: 1.2rem;\n font-weight: 700;\n color: var(--marron-suave);\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .tip-item {\n display: flex;\n gap: 0.85rem;\n margin-bottom: 1rem;\n align-items: flex-start;\n }\n\n .tip-item:last-child {\n margin-bottom: 0;\n }\n\n .tip-number {\n background-color: var(--verde-calma);\n color: var(--blanco);\n width: 26px;\n height: 26px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.8rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n .tip-content h4 {\n font-size: 0.95rem;\n color: var(--texto-oscuro);\n font-weight: 700;\n margin-bottom: 0.2rem;\n }\n\n .tip-content p {\n font-size: 0.875rem;\n color: var(--gris);\n line-height: 1.5;\n }\n\n \/* Ocultar Elementos *\/\n .hidden {\n display: none !important;\n }\n\n \/* Historial en LocalStorage *\/\n .history-item {\n padding: 1rem;\n border-bottom: 1px solid var(--beige);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .history-item:last-child { border-bottom: none; }\n\n \/* Footer *\/\n footer {\n text-align: center;\n padding: 1.5rem;\n color: var(--gris);\n font-size: 0.8rem;\n border-top: 1px solid var(--beige);\n background-color: var(--blanco);\n margin-top: auto;\n }\n\n \/* Responsividad para m\u00f3viles *\/\n @media (max-width: 600px) {\n main {\n margin-top: 100px !important; \/* Ajuste para pantalla m\u00f3vil *\/\n padding: 0.5rem;\n }\n .card {\n padding: 1.25rem;\n border-radius: 14px;\n }\n .app-title {\n font-size: 1.75rem;\n }\n .question-title {\n font-size: 1.1rem;\n min-height: 4rem;\n }\n .likert-scale {\n gap: 0.25rem;\n }\n .likert-btn {\n padding: 0.75rem 0;\n font-size: 1rem;\n border-radius: 8px;\n }\n .scores-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <main>\n\n \n <header class=\"app-header\">\n <div class=\"header-content\">\n <a href=\"#\" class=\"logo\" onclick=\"resetToHome()\">\n <div class=\"logo-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><\/svg>\n <\/div>\n <span>Descubre tu apego<\/span>\n <\/a>\n <button id=\"btn-history\" class=\"btn-secondary\" style=\"padding: 0.4rem 0.8rem; font-size: 0.8rem; width: auto;\" onclick=\"showHistoryModal()\">\n Historial\n <\/button>\n <\/div>\n <\/header>\n \n \n <div id=\"screen-welcome\" class=\"card\">\n <h1 class=\"app-title\">Descubre tu apego<\/h1>\n <p class=\"app-subtitle\">Descubre qu\u00e9 tipo de apego tienes para que puedas trabajarlo y superarlo.<\/p>\n\n \n <div class=\"disclaimer-box\">\n <div class=\"disclaimer-title\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n Aviso Importante\n <\/div>\n 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\n <form id=\"form-user\" onsubmit=\"handleStartTest(event)\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"user-name\">\u00bfC\u00f3mo te llamas? (Opcional)<\/label>\n <input type=\"text\" id=\"user-name\" class=\"form-input\" placeholder=\"Ej. Alex\" maxlength=\"30\">\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">\u00bfCu\u00e1l es tu g\u00e9nero?<\/label>\n <div class=\"gender-options\">\n <label class=\"gender-card\" id=\"gender-femenino\">\n <input type=\"radio\" name=\"gender\" value=\"femenino\" required onchange=\"selectGender('femenino')\">\n <span>Femenino<\/span>\n <\/label>\n <label class=\"gender-card\" id=\"gender-masculino\">\n <input type=\"radio\" name=\"gender\" value=\"masculino\" onchange=\"selectGender('masculino')\">\n <span>Masculino<\/span>\n <\/label>\n <label class=\"gender-card\" id=\"gender-nobinario\">\n <input type=\"radio\" name=\"gender\" value=\"nobinario\" onchange=\"selectGender('nobinario')\">\n <span>No bisiesto \/ Otro<\/span>\n <\/label>\n <label class=\"gender-card\" id=\"gender-privado\">\n <input type=\"radio\" name=\"gender\" value=\"privado\" onchange=\"selectGender('privado')\">\n <span>Prefiero no decir<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <button type=\"submit\" class=\"btn\">\n <span>Iniciar Cuestionario (36 preguntas)<\/span>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/button>\n <\/form>\n <\/div>\n\n \n <div id=\"screen-quiz\" class=\"card hidden\">\n <div class=\"progress-wrapper\">\n <div class=\"progress-info\">\n <span id=\"progress-text\">Pregunta 1 de 36<\/span>\n <span id=\"progress-percent\">3%<\/span>\n <\/div>\n <div class=\"progress-bar-bg\">\n <div id=\"progress-bar\" class=\"progress-bar-fill\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"question-title\" id=\"question-text\">\n Cargando pregunta…\n <\/div>\n\n \n <div class=\"likert-scale\">\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(1)\">1<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(2)\">2<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(3)\">3<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(4)\">4<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(5)\">5<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(6)\">6<\/button>\n <button type=\"button\" class=\"likert-btn\" onclick=\"answerQuestion(7)\">7<\/button>\n <\/div>\n\n <div class=\"likert-labels\">\n <span>1 = Totalmente en desacuerdo<\/span>\n <span>4 = Neutral<\/span>\n <span>7 = Totalmente de acuerdo<\/span>\n <\/div>\n\n <div class=\"btn-group\">\n <button type=\"button\" id=\"btn-prev-q\" class=\"btn btn-secondary\" onclick=\"prevQuestion()\" disabled style=\"opacity:0.5;\">\n ← Anterior\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"screen-results\" class=\"card hidden\">\n <div style=\"text-align: center;\">\n <span class=\"result-badge\">Tu Estilo de Apego<\/span>\n <h2 id=\"result-title\" class=\"result-title\">Calculando…<\/h2>\n <\/div>\n\n <p id=\"result-description\" class=\"result-description\">\n Cargando an\u00e1lisis de resultados…\n <\/p>\n\n \n <div class=\"scores-grid\">\n <div class=\"score-card\">\n <div class=\"score-label\">Subescala Ansiedad<\/div>\n <div id=\"score-ansiedad-val\" class=\"score-value\">0.0<\/div>\n <div id=\"score-ansiedad-lvl\" class=\"score-level level-low\">Baja<\/div>\n <\/div>\n <div class=\"score-card\">\n <div class=\"score-label\">Subescala Evitaci\u00f3n<\/div>\n <div id=\"score-evitacion-val\" class=\"score-value\">0.0<\/div>\n <div id=\"score-evitacion-lvl\" class=\"score-level level-low\">Baja<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"canvas-container\">\n <canvas id=\"attachment-canvas\" width=\"380\" height=\"380\"><\/canvas>\n <\/div>\n\n \n <div class=\"tips-section\">\n <div class=\"tips-header\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"color: var(--terracota-suave);\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>\n <span>Consejos Pr\u00e1cticos para Arreglarlo y Trabajarlo<\/span>\n <\/div>\n <div id=\"tips-list\">\n \n <\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button type=\"button\" class=\"btn\" onclick=\"resetToHome()\">\n Realizar Test Nuevamente\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"modal-history\" class=\"card hidden\" style=\"position: fixed; inset: 0; margin: auto; max-width: 500px; max-height: 80vh; z-index: 100; overflow-y: auto;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;\">\n <h3 style=\"color: var(--marron-suave);\">Historial de Tests<\/h3>\n <button onclick=\"closeHistoryModal()\" class=\"btn-secondary\" style=\"width: auto; padding: 0.3rem 0.6rem;\">× Cerrar<\/button>\n <\/div>\n <div id=\"history-content\">\n \n <\/div>\n <\/div>\n\n <\/main>\n\n \n <footer>\n Basado en el Cuestionario de Experiencias en Relaciones Cercanas Revisado (ECR-R). <br>\n Herramienta interactiva de autocuidado personal.\n <\/footer>\n\n \n <script>\n \/* BASE DE DATOS Y PREGUNTAS DEL ECR-R (36 \u00edtems) *\/\n const questionsECRR = [\n \"1. Me preocupa que los dem\u00e1s no me valoren tanto como yo a ellos.\",\n \"2. Prefiero no mostrar a mi pareja c\u00f3mo me siento en lo m\u00e1s profundo.\",\n \"3. Me preocupa que mis parejas me dejen.\",\n \"4. Me siento inc\u00f3modo\/a cuando estoy cerca de mi pareja.\",\n \"5. A menudo me preocupa que mi pareja no quiera estar conmigo.\",\n \"6. Me incomoda que los dem\u00e1s se acerquen demasiado a m\u00ed emocionalmente.\",\n \"7. Me preocupa que mi pareja se canse de m\u00ed.\",\n \"8. Me resulta dif\u00edcil confiar plenamente en mi pareja.\",\n \"9. Rara vez me preocupa que me abandonen.\",\n \"10. Me resulta f\u00e1cil depender de mi pareja.\",\n \"11. Deseo tener una relaci\u00f3n muy cercana, pero eso a veces asusta a la gente.\",\n \"12. Me cuesta mucho abrirme del todo con mi pareja.\",\n \"13. Me preocupa que, si mi pareja me conoce bien, no le guste c\u00f3mo soy.\",\n \"14. No me gusta que la gente se apoye demasiado en m\u00ed emocionalmente.\",\n \"15. Cuando no estoy en una relaci\u00f3n, me siento un poco incompleto\/a.\",\n \"16. Es muy f\u00e1cil para m\u00ed mostrar afecto a mi pareja.\",\n \"17. Mi deseo de cercan\u00eda a veces asusta o aleja a las personas.\",\n \"18. Me resulta relativamente f\u00e1cil depender de los dem\u00e1s.\",\n \"19. Necesito que mi pareja me confirme constantemente que me ama.\",\n \"20. Me incomoda depender de los dem\u00e1s.\",\n \"21. A veces siento que presiono a mis parejas para que muestren m\u00e1s compromiso.\",\n \"22. No me preocupa que los dem\u00e1s me dejen solo\/a.\",\n \"23. Prefiero no depender de nadie.\",\n \"24. Me asusta la idea de que mi pareja me deje.\",\n \"25. Hablo abiertamente de mis sentimientos con mi pareja.\",\n \"26. Me preocupa que no le importe a mi pareja tanto como ella me importa a m\u00ed.\",\n \"27. Me pongo nervioso\/a cuando mi pareja se vuelve demasiado \u00edntima o cercana.\",\n \"28. Si mi pareja se aleja, me da miedo que empiece a perder inter\u00e9s en m\u00ed.\",\n \"29. Siento que las parejas se alejan cuando yo quiero acercarme.\",\n \"30. Le cuento casi todo a mi pareja.\",\n \"31. Me afecta mucho cuando mi pareja est\u00e1 distante.\",\n \"32. Me resulta f\u00e1cil confiar en los dem\u00e1s.\",\n \"33. Cuando le muestro mis sentimientos a mi pareja, tengo miedo de que no sienta lo mismo.\",\n \"34. No suelo hablar de mis problemas personales con mi pareja.\",\n \"35. Cuando mi pareja me desaprueba, me siento mal conmigo mismo\/a.\",\n \"36. Mi pareja me conoce muy bien.\"\n ];\n\n \/\/ \u00cdtems con puntuaci\u00f3n invertida\n const reverseItems = [9, 10, 16, 18, 22, 25, 30, 32, 36];\n\n \/\/ Subescalas\n const anxietyItems = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 22, 24, 26, 28, 29, 31, 33, 35];\n const avoidanceItems = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 23, 25, 27, 30, 32, 34, 36];\n\n \/* ESTADO DE LA APLICACI\u00d3N *\/\n let state = {\n userName: '',\n gender: 'privado',\n currentQuestion: 0,\n answers: new Array(36).fill(null),\n history: []\n };\n\n \/* INICIALIZACI\u00d3N Y LOCALSTORAGE *\/\n window.addEventListener('DOMContentLoaded', () => {\n loadFromLocalStorage();\n renderGenderSelection();\n });\n\n function saveToLocalStorage() {\n localStorage.setItem('descubre_tu_apego_data', JSON.stringify({\n userName: state.userName,\n gender: state.gender,\n answers: state.answers,\n currentQuestion: state.currentQuestion,\n history: state.history\n }));\n }\n\n function loadFromLocalStorage() {\n const saved = localStorage.getItem('descubre_tu_apego_data');\n if (saved) {\n try {\n const parsed = JSON.parse(saved);\n state.userName = parsed.userName || '';\n state.gender = parsed.gender || 'privado';\n state.answers = parsed.answers || new Array(36).fill(null);\n state.currentQuestion = parsed.currentQuestion || 0;\n state.history = parsed.history || [];\n\n document.getElementById('user-name').value = state.userName;\n } catch (e) {\n console.error(\"Error al cargar datos de localStorage\", e);\n }\n }\n }\n\n \/* MANEJO DE G\u00c9NERO *\/\n function selectGender(val) {\n state.gender = val;\n renderGenderSelection();\n saveToLocalStorage();\n }\n\n function renderGenderSelection() {\n document.querySelectorAll('.gender-card').forEach(card => card.classList.remove('selected'));\n const selectedCard = document.getElementById(`gender-${state.gender}`);\n if (selectedCard) {\n selectedCard.classList.add('selected');\n const radio = selectedCard.querySelector('input[type=\"radio\"]');\n if (radio) radio.checked = true;\n }\n }\n\n \/* INICIO DEL TEST *\/\n function handleStartTest(e) {\n e.preventDefault();\n state.userName = document.getElementById('user-name').value.trim();\n saveToLocalStorage();\n\n document.getElementById('screen-welcome').classList.add('hidden');\n document.getElementById('screen-quiz').classList.remove('hidden');\n\n renderQuestion();\n }\n\n \/* RENDERIZADO DE PREGUNTAS *\/\n function renderQuestion() {\n const index = state.currentQuestion;\n document.getElementById('question-text').innerText = questionsECRR[index];\n document.getElementById('progress-text').innerText = `Pregunta ${index + 1} de 36`;\n \n const progressPct = Math.round(((index + 1) \/ 36) * 100);\n document.getElementById('progress-percent').innerText = `${progressPct}%`;\n document.getElementById('progress-bar').style.width = `${progressPct}%`;\n\n \/\/ Bot\u00f3n anterior\n const btnPrev = document.getElementById('btn-prev-q');\n if (index > 0) {\n btnPrev.disabled = false;\n btnPrev.style.opacity = \"1\";\n } else {\n btnPrev.disabled = true;\n btnPrev.style.opacity = \"0.5\";\n }\n\n \/\/ Marcar respuesta previamente elegida si existe\n const currentAns = state.answers[index];\n document.querySelectorAll('.likert-btn').forEach((btn, idx) => {\n if (currentAns === (idx + 1)) {\n btn.classList.add('selected');\n } else {\n btn.classList.remove('selected');\n }\n });\n }\n\n function answerQuestion(val) {\n state.answers[state.currentQuestion] = val;\n saveToLocalStorage();\n\n if (state.currentQuestion < 35) {\n state.currentQuestion++;\n renderQuestion();\n } else {\n calculateResults();\n }\n }\n\n function prevQuestion() {\n if (state.currentQuestion > 0) {\n state.currentQuestion--;\n renderQuestion();\n }\n }\n\n \/* C\u00c1LCULO DE RESULTADOS Y DIAGN\u00d3STICO ECR-R *\/\n function calculateResults() {\n \/\/ 1. Invertir puntuaciones requeridas: 8 - valor_original\n const processedAnswers = state.answers.map((score, idx) => {\n const itemNum = idx + 1;\n return reverseItems.includes(itemNum) ? (8 - score) : score;\n });\n\n \/\/ 2. Sumar y promediar Subescala Ansiedad\n let totalAnsiedad = 0;\n anxietyItems.forEach(itemNum => {\n totalAnsiedad += processedAnswers[itemNum - 1];\n });\n const avgAnsiedad = totalAnsiedad \/ 18;\n\n \/\/ 3. Sumar y promediar Subescala Evitaci\u00f3n\n let totalEvitacion = 0;\n avoidanceItems.forEach(itemNum => {\n totalEvitacion += processedAnswers[itemNum - 1];\n });\n const avgEvitacion = totalEvitacion \/ 18;\n\n \/\/ 4. Determinar Cuadrante (Umbral en 4.0)\n const isHighAnsiedad = avgAnsiedad >= 4.0;\n const isHighEvitacion = avgEvitacion >= 4.0;\n\n let styleType = '';\n let description = '';\n let tips = [];\n\n const nameStr = state.userName ? `${state.userName}, tu` : 'Tu';\n\n if (!isHighAnsiedad && !isHighEvitacion) {\n styleType = 'Apego Seguro';\n description = `${nameStr} perfil refleja un Apego Seguro. Muestras una capacidad equilibrada para la intimidad emocional y la autonom\u00eda. Conf\u00edas en tus relaciones, no le temes al abandono de forma desmedida y puedes expresar tus vulnerabilidades de forma saludable.`;\n tips = getTipsForSeguro();\n } else if (isHighAnsiedad && !isHighEvitacion) {\n styleType = 'Apego Ansioso-Preocupado';\n description = `${nameStr} perfil refleja un Apego Ansioso-Preocupado. Tiendes a anhelar altos niveles de intimidad, pero te preocupa constantemente que los dem\u00e1s no te valoren tanto como t\u00fa a ellos o que puedan abandonarte. Buscas reaseguramiento constante.`;\n tips = getTipsForAnsioso();\n } else if (!isHighAnsiedad && isHighEvitacion) {\n styleType = 'Apego Evitativo-Alejado';\n description = `${nameStr} perfil refleja un Apego Evitativo-Alejado. Prefieres mantener una estricta independencia emocional. Te resulta inc\u00f3modo depender de otros o que se acerquen demasiado, optando por suprimir tus emociones o resolver todo en soledad.`;\n tips = getTipsForEvitativo();\n } else {\n styleType = 'Apego Temeroso-Desorganizado';\n description = `${nameStr} perfil refleja un Apego Temeroso-Desorganizado. Deseas profundamente tener relaciones cercanas y afectuosas, pero al mismo tiempo sientes un fuerte miedo a ser herido\/a o rechazado\/a. Esto puede generar una din\u00e1mica de acercarte y luego alejarte.`;\n tips = getTipsForDesorganizado();\n }\n\n \/\/ Guardar en Historial\n const resultRecord = {\n date: new Date().toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' }),\n style: styleType,\n ansiedad: avgAnsiedad.toFixed(2),\n evitacion: avgEvitacion.toFixed(2)\n };\n state.history.unshift(resultRecord);\n saveToLocalStorage();\n\n \/\/ Mostrar Pantalla de Resultados\n document.getElementById('screen-quiz').classList.add('hidden');\n document.getElementById('screen-results').classList.remove('hidden');\n\n document.getElementById('result-title').innerText = styleType;\n document.getElementById('result-description').innerText = description;\n\n document.getElementById('score-ansiedad-val').innerText = avgAnsiedad.toFixed(2);\n document.getElementById('score-evitacion-val').innerText = avgEvitacion.toFixed(2);\n\n \/\/ Niveles\n const lvlAns = document.getElementById('score-ansiedad-lvl');\n lvlAns.innerText = isHighAnsiedad ? 'Alta' : 'Baja';\n lvlAns.className = `score-level ${isHighAnsiedad ? 'level-high' : 'level-low'}`;\n\n const lvlEvi = document.getElementById('score-evitacion-lvl');\n lvlEvi.innerText = isHighEvitacion ? 'Alta' : 'Baja';\n lvlEvi.className = `score-level ${isHighEvitacion ? 'level-high' : 'level-low'}`;\n\n \/\/ Dibujar Canvas\n drawCanvasMatrix(avgAnsiedad, avgEvitacion);\n\n \/\/ Renderizar Tips\n renderTips(tips);\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n \/* RENDERING DYNAMIC TIPS SEG\u00daN ESTILO Y G\u00c9NERO *\/\n function getTipsForSeguro() {\n return [\n {\n title: \"Comunica tus l\u00edmites con empat\u00eda\",\n body: \"Aprovecha tu capacidad de estar c\u00f3modo\/a en la intimidad para mantener conversaciones abiertas sobre las necesidades de espacio o cercan\u00eda de tu pareja.\"\n },\n {\n title: \"Apoya el crecimiento de tu pareja\",\n body: \"Si te relacionas con alguien con apego ansioso o evitativo, s\u00e9 un puerto seguro ofreciendo validaci\u00f3n constante sin perder tu propia autonom\u00eda.\"\n },\n {\n title: \"Cultiva tu espacio personal\",\n body: \"Contin\u00faa manteniendo tus propios pasatiempos, metas y amistades independientes de tu vida de pareja.\"\n }\n ];\n }\n\n function getTipsForAnsioso() {\n const pronoun = state.gender === 'femenino' ? 'segura y valiosa' : (state.gender === 'masculino' ? 'seguro y valioso' : 'una persona valiosa');\n return [\n {\n title: \"Pr\u00e1ctica el 'Auto-sosegado' (Self-soothing)\",\n body: `Cuando sientas angustia por una supuesta distancia, recuerda que eres ${pronoun} por ti mismo\/a. Haz pausas de respiraci\u00f3n profunda antes de reaccionar e impulsar reclamos.`\n },\n {\n title: \"Reconoce la diferencia entre hechos e interpretaciones\",\n body: \"Si tu pareja tarda en responder un mensaje, no asumas desinter\u00e9s. Escribe tus pensamientos en una libreta antes de dar por sentado el peor escenario.\"\n },\n {\n title: \"Expresa necesidades de forma asertiva\",\n body: \"En lugar de decir 'nunca est\u00e1s para m\u00ed', prueba con: 'Me har\u00eda sentir m\u00e1s tranquilo\/a si acordamos un momento para hablar hoy'.\"\n },\n {\n title: \"Diversifica tus fuentes de bienestar\",\n body: \"No pongas la responsabilidad de tu felicidad completa en tu pareja. Fortalece redes de apoyo con amigos, pasatiempos y metas propias.\"\n }\n ];\n }\n\n function getTipsForEvitativo() {\n return [\n {\n title: \"Practica la micro-vulnerabilidad\",\n body: \"Empieza a compartir peque\u00f1os sentimientos o preocupaciones personales de forma gradual con personas de confianza. La vulnerabilidad es valent\u00eda, no debilidad.\"\n },\n {\n title: \"Comunica tu necesidad de espacio con claridad\",\n body: \"Si te sientes abrumado\/a, en lugar de distanciarte en silencio, di: 'Necesito un par de horas para m\u00ed para procesar esto, pero luego volvemos a hablar'.\"\n },\n {\n title: \"Aprende a pausar la desactivaci\u00f3n emocional\",\n body: \"Detecta cuando est\u00e9s minimizando tus emociones o las de tu pareja como mecanismo de defensa para no sentirte expuesto\/a.\"\n },\n {\n title: \"Reconoce la interdependencia saludable\",\n body: \"Depender de alguien de forma equilibrada no significa perder tu libertad ni tu identidad individual.\"\n }\n ];\n }\n\n function getTipsForDesorganizado() {\n return [\n {\n title: \"Identifica tus detonantes (Triggers)\",\n body: \"Lleva un registro de los momentos en que sientes el impulso violento de huir o de aferrarte. Comprender el origen de tus miedos reduce su poder sobre ti.\"\n },\n {\n title: \"Regula tu sistema nervioso\",\n body: \"Utiliza t\u00e9cnicas som\u00e1ticas (como caminar, tocar tierra o respirar en tiempos 4-7-8) cuando percibas que entras en un estado de amenaza dentro de tu relaci\u00f3n.\"\n },\n {\n title: \"Establece un ritmo pausado en tus relaciones\",\n body: \"Evita acelerar excesivamente el v\u00ednculo o cortar de forma tajante ante el primer conflicto. Perm\u00edtete evaluar la confianza paso a paso.\"\n },\n {\n title: \"Busca un espacio terap\u00e9utico\",\n body: \"Dado que el apego desorganizado suele vincularse a herida de trauma temprano, el acompa\u00f1amiento psicol\u00f3gico brinda un marco ideal para reparar la seguridad interna.\"\n }\n ];\n }\n\n function renderTips(tips) {\n const container = document.getElementById('tips-list');\n container.innerHTML = '';\n\n tips.forEach((tip, idx) => {\n const item = document.createElement('div');\n item.className = 'tip-item';\n item.innerHTML = `\n <div class=\"tip-number\">${idx + 1}<\/div>\n <div class=\"tip-content\">\n <h4>${tip.title}<\/h4>\n <p>${tip.body}<\/p>\n <\/div>\n `;\n container.appendChild(item);\n });\n }\n\n \/* DIBUJO DE LA MATRIZ DE CUADRANTES CON HTML5 CANVAS *\/\n function drawCanvasMatrix(ansiedadVal, evitacionVal) {\n const canvas = document.getElementById('attachment-canvas');\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n const w = canvas.width;\n const h = canvas.height;\n\n \/\/ Limpiar lienzo\n ctx.clearRect(0, 0, w, h);\n\n \/\/ Rellenar Cuadrantes con tonos suaves\n const halfW = w \/ 2;\n const halfH = h \/ 2;\n\n \/\/ Superior Izquierdo: Ansioso\n ctx.fillStyle = '#FFF5F2';\n ctx.fillRect(0, 0, halfW, halfH);\n\n \/\/ Superior Derecho: Temeroso \/ Desorganizado\n ctx.fillStyle = '#FDF2F2';\n ctx.fillRect(halfW, 0, halfW, halfH);\n\n \/\/ Inferior Izquierdo: Seguro\n ctx.fillStyle = '#F0F7EE';\n ctx.fillRect(0, halfH, halfW, halfH);\n\n \/\/ Inferior Derecho: Evitativo\n ctx.fillStyle = '#F2F6FA';\n ctx.fillRect(halfW, halfH, halfW, halfH);\n\n \/\/ Dibujar Ejes Centrales\n ctx.strokeStyle = '#D1C7BD';\n ctx.lineWidth = 2;\n ctx.setLineDash([4, 4]);\n\n \/\/ Eje Vertical\n ctx.beginPath();\n ctx.moveTo(halfW, 0);\n ctx.lineTo(halfW, h);\n ctx.stroke();\n\n \/\/ Eje Horizontal\n ctx.beginPath();\n ctx.moveTo(0, halfH);\n ctx.lineTo(w, halfH);\n ctx.stroke();\n\n ctx.setLineDash([]); \/\/ Reset linea continua\n\n \/\/ Etiquetas de los Cuadrantes\n ctx.font = 'bold 11px sans-serif';\n ctx.textAlign = 'center';\n\n ctx.fillStyle = '#B86B4B';\n ctx.fillText('ANSIOSO - PREOCUPADO', halfW \/ 2, 25);\n\n ctx.fillStyle = '#991B1B';\n ctx.fillText('TEMEROSO \/ DESORGANIZADO', halfW + (halfW \/ 2), 25);\n\n ctx.fillStyle = '#4D7C0F';\n ctx.fillText('APEGO SEGURO', halfW \/ 2, h - 15);\n\n ctx.fillStyle = '#1E40AF';\n ctx.fillText('EVITATIVO - ALEJADO', halfW + (halfW \/ 2), h - 15);\n\n \/\/ Mapear Valores a Pixeles\n const posX = ((evitacionVal - 1) \/ 6) * w;\n const posY = h - (((ansiedadVal - 1) \/ 6) * h);\n\n \/\/ Dibujar Punto del Usuario\n ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';\n ctx.shadowBlur = 8;\n \n ctx.fillStyle = '#5C4033';\n ctx.beginPath();\n ctx.arc(posX, posY, 10, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.strokeStyle = '#FFFFFF';\n ctx.lineWidth = 3;\n ctx.stroke();\n\n ctx.shadowBlur = 0; \/\/ Reset sombra\n }\n\n \/* HISTORIAL *\/\n function showHistoryModal() {\n const modal = document.getElementById('modal-history');\n const content = document.getElementById('history-content');\n \n if (state.history.length === 0) {\n content.innerHTML = '<p style=\"color: var(--gris); text-align: center; padding: 1rem;\">No tienes ning\u00fan test guardado a\u00fan.<\/p>';\n } else {\n content.innerHTML = state.history.map(item => `\n <div class=\"history-item\">\n <div>\n <strong style=\"color: var(--marron-suave);\">${item.style}<\/strong>\n <div style=\"font-size: 0.75rem; color: var(--gris);\">${item.date}<\/div>\n <\/div>\n <div style=\"font-size: 0.8rem; text-align: right;\">\n <div>Ansiedad: <strong>${item.ansiedad}<\/strong><\/div>\n <div>Evitaci\u00f3n: <strong>${item.evitacion}<\/strong><\/div>\n <\/div>\n <\/div>\n `).join('');\n }\n\n modal.classList.remove('hidden');\n }\n\n function closeHistoryModal() {\n document.getElementById('modal-history').classList.add('hidden');\n }\n\n \/* REINICIAR Y VOLVER AL INICIO *\/\n function resetToHome() {\n state.currentQuestion = 0;\n state.answers = new Array(36).fill(null);\n saveToLocalStorage();\n\n document.getElementById('screen-results').classList.add('hidden');\n document.getElementById('screen-quiz').classList.add('hidden');\n document.getElementById('screen-welcome').classList.remove('hidden');\n closeHistoryModal();\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Descubre tu apego Descubre tu apego Historial Descubre tu apego Descubre qu\u00e9 tipo de apego tienes para que puedas trabajarlo y superarlo. Aviso Importante 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. \u00bfC\u00f3mo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/6","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=6"}],"version-history":[{"count":1,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/algoritmodelalma.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}