{"id":1287,"date":"2026-11-01T00:30:47","date_gmt":"2026-11-01T00:30:47","guid":{"rendered":"https:\/\/elprofebernardo.cl\/?page_id=1287"},"modified":"2026-11-01T01:41:53","modified_gmt":"2026-11-01T01:41:53","slug":"modulo-liderazgo-transformacional","status":"publish","type":"page","link":"https:\/\/elprofebernardo.cl\/?page_id=1287","title":{"rendered":"M\u00f3dulo Liderazgo transformacional"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Liderazgo Transformacional L\u00fadico | elprofebernardo.cl<\/title>\n    <!-- Tailwind CSS CDN -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- Google Fonts: Inter & Fredoka for playful touch -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700&#038;family=Inter:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- FontAwesome for icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    \n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['Inter', 'sans-serif'],\n                        playful: ['Fredoka', 'sans-serif'],\n                    },\n                    colors: {\n                        brand: {\n                            yellow: '#FFDE59',\n                            orange: '#FF914D',\n                            pink: '#FF5757',\n                            purple: '#9B51E0',\n                            teal: '#00D26A',\n                            dark: '#1E1E2F'\n                        }\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        .bounce-slow {\n            animation: bounce 3s infinite;\n        }\n        @keyframes float {\n            0%, 100% { transform: translateY(0px); }\n            50% { transform: translateY(-10px); }\n        }\n        .animate-float {\n            animation: float 4s ease-in-out infinite;\n        }\n        \/* Style for smooth custom scrollbars *\/\n        ::-webkit-scrollbar {\n            width: 8px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #f1f5f9;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: #FF914D;\n            border-radius: 4px;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 font-sans antialiased selection:bg-brand-yellow selection:text-brand-dark\">\n\n    <!-- Header \/ Navbar -->\n    <header class=\"sticky top-0 z-50 bg-white\/90 backdrop-blur-md shadow-sm border-b border-slate-100\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between\">\n            <div class=\"flex items-center space-x-3\">\n                <div class=\"w-12 h-12 bg-gradient-to-tr from-brand-orange to-brand-pink rounded-2xl flex items-center justify-center text-white text-2xl shadow-md font-playful transform rotate-3\">\n                    \ud83c\udfae\n                <\/div>\n                <div>\n                    <span class=\"font-playful font-bold text-xl tracking-tight text-brand-dark block\">elprofebernardo<span class=\"text-brand-pink\">.cl<\/span><\/span>\n                    <span class=\"text-xs text-slate-500 font-medium\">Liderazgo Transformacional L\u00fadico<\/span>\n                <\/div>\n            <\/div>\n            <nav class=\"hidden md:flex items-center space-x-8 font-medium text-sm text-slate-600\">\n                <a href=\"#filosofia\" class=\"hover:text-brand-pink transition\">Filosof\u00eda<\/a>\n                <a href=\"#modulos\" class=\"hover:text-brand-pink transition\">M\u00f3dulos SimReo<\/a>\n                <a href=\"#test-section\" class=\"hover:text-brand-pink transition\">Test Psicom\u00e9trico<\/a>\n                <a href=\"#contacto\" class=\"px-5 py-2.5 bg-brand-pink text-white font-semibold rounded-full shadow-lg shadow-brand-pink\/30 hover:bg-rose-600 transition transform hover:-translate-y-0.5\">Participa Ya<\/a>\n            <\/nav>\n        <\/div>\n    <\/header>\n\n    <!-- Hero Section -->\n    <section class=\"relative overflow-hidden bg-gradient-to-b from-amber-50\/60 via-purple-50\/40 to-white pt-16 pb-24 lg:pt-24 lg:pb-32\">\n        <div class=\"absolute top-10 left-10 w-72 h-72 bg-brand-yellow\/20 rounded-full blur-3xl pointer-events-none\"><\/div>\n        <div class=\"absolute bottom-10 right-10 w-96 h-96 bg-brand-pink\/15 rounded-full blur-3xl pointer-events-none\"><\/div>\n        \n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\n                <div class=\"lg:col-span-7 space-y-6 text-center lg:text-left\">\n                    <span class=\"inline-flex items-center px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-brand-yellow\/30 text-amber-900 border border-amber-200\">\n                        \u2728 Educaci\u00f3n Desescolarizada y Vivencial\n                    <\/span>\n                    <h1 class=\"font-playful text-4xl sm:text-5xl lg:text-6xl font-bold text-brand-dark leading-tight\">\n                        Liderazgo <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-pink to-brand-orange\">Transformacional<\/span> a trav\u00e9s del Juego\n                    <\/h1>\n                    <p class=\"text-lg text-slate-600 max-w-2xl mx-auto lg:mx-0\">\n                        Desaprende las estructuras r\u00edgidas del aula tradicional. Vive experiencias inmersivas, juegos de simulaci\u00f3n estrat\u00e9gica (SimReo) y descubre tu verdadero potencial de liderazgo inspirador.\n                    <\/p>\n                    <div class=\"flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4\">\n                        <a href=\"#test-section\" class=\"w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-pink to-brand-orange text-white font-playful font-semibold rounded-2xl shadow-xl shadow-brand-pink\/25 hover:opacity-95 transition transform hover:-translate-y-1 text-center\">\n                            \ud83d\ude80 Tomar Test de Liderazgo\n                        <\/a>\n                        <a href=\"#modulos\" class=\"w-full sm:w-auto px-8 py-4 bg-white text-brand-dark font-playful font-semibold rounded-2xl border-2 border-slate-200 hover:border-brand-purple hover:text-brand-purple transition text-center shadow-sm\">\n                            Explorar Metodolog\u00eda\n                        <\/a>\n                    <\/div>\n                <\/div>\n                <div class=\"lg:col-span-5 flex justify-center\">\n                    <div class=\"relative w-full max-w-md animate-float\">\n                        <div class=\"absolute -inset-1 bg-gradient-to-r from-brand-yellow via-brand-pink to-brand-purple rounded-3xl blur opacity-30\"><\/div>\n                        <div class=\"relative bg-white p-8 rounded-3xl shadow-2xl border border-slate-100 text-center space-y-6\">\n                            <div class=\"w-20 h-20 bg-brand-yellow\/30 rounded-2xl mx-auto flex items-center justify-center text-4xl shadow-inner\">\n                                \ud83c\udfb2\n                            <\/div>\n                            <h3 class=\"font-playful text-2xl font-bold text-brand-dark\">\u00bfQu\u00e9 tipo de l\u00edder eres?<\/h3>\n                            <p class=\"text-sm text-slate-600\">\n                                Pon a prueba tus instintos en situaciones de simulaci\u00f3n l\u00fadica y obt\u00e9n tu perfil de liderazgo transformacional con gr\u00e1fico Canvas en tiempo real.\n                            <\/p>\n                            <div class=\"grid grid-cols-3 gap-2 text-xs font-bold text-slate-500\">\n                                <div class=\"bg-amber-50 p-2 rounded-xl border border-amber-100\">\ud83c\udfaf Estrategia<\/div>\n                                <div class=\"bg-rose-50 p-2 rounded-xl border border-rose-100\">\ud83d\udca1 Creatividad<\/div>\n                                <div class=\"bg-purple-50 p-2 rounded-xl border border-purple-100\">\ud83e\udd1d Empat\u00eda<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Filosof\u00eda Desescolarizada -->\n    <section id=\"filosofia\" class=\"py-20 bg-white\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"text-center max-w-3xl mx-auto mb-16 space-y-4\">\n                <span class=\"text-brand-purple font-bold tracking-widest text-xs uppercase bg-purple-50 px-3 py-1 rounded-full\">Nueva Era Educativa<\/span>\n                <h2 class=\"font-playful text-3xl sm:text-4xl font-bold text-brand-dark\">\u00bfPor qu\u00e9 un Liderazgo L\u00fadico y Desescolarizado?<\/h2>\n                <p class=\"text-slate-600\">El liderazgo real no nace en los escritorios ni memorizando manuales, sino experimentando, colaborando y resolviendo retos en comunidad.<\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n                <!-- Card 1 -->\n                <div class=\"bg-gradient-to-b from-amber-50\/50 to-white p-8 rounded-3xl border border-amber-100 shadow-sm hover:shadow-md transition group\">\n                    <div class=\"w-14 h-14 bg-brand-yellow text-brand-dark rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-md group-hover:scale-110 transition\">\n                        \ud83e\udde0\n                    <\/div>\n                    <h3 class=\"font-playful text-xl font-bold text-brand-dark mb-3\">Desaprender para Crecer<\/h3>\n                    <p class=\"text-slate-600 text-sm leading-relaxed\">\n                        Liberamos al participante de las calificaciones y la rigidez tradicional para estimular la curiosidad innata y el pensamiento cr\u00edtico libre.\n                    <\/p>\n                <\/div>\n                <!-- Card 2 -->\n                <div class=\"bg-gradient-to-b from-rose-50\/50 to-white p-8 rounded-3xl border border-rose-100 shadow-sm hover:shadow-md transition group\">\n                    <div class=\"w-14 h-14 bg-brand-pink text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-md group-hover:scale-110 transition\">\n                        \ud83c\udfad\n                    <\/div>\n                    <h3 class=\"font-playful text-xl font-bold text-brand-dark mb-3\">Juegos SimReo Vivenciales<\/h3>\n                    <p class=\"text-slate-600 text-sm leading-relaxed\">\n                        Simulacros de roles y retos de alta inmersi\u00f3n donde las decisiones tienen impacto inmediato en el equipo y la estrategia colectiva.\n                    <\/p>\n                <\/div>\n                <!-- Card 3 -->\n                <div class=\"bg-gradient-to-b from-purple-50\/50 to-white p-8 rounded-3xl border border-purple-100 shadow-sm hover:shadow-md transition group\">\n                    <div class=\"w-14 h-14 bg-brand-purple text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-md group-hover:scale-110 transition\">\n                        \u26a1\n                    <\/div>\n                    <h3 class=\"font-playful text-xl font-bold text-brand-dark mb-3\">Impacto Transformacional<\/h3>\n                    <p class=\"text-slate-600 text-sm leading-relaxed\">\n                        Pasamos del jefe que ordena al l\u00edder que inspira, cultiva talentos y gu\u00eda procesos de cambio positivo y sostenible en su entorno.\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- M\u00f3dulos SimReo -->\n    <section id=\"modulos\" class=\"py-20 bg-slate-50 border-y border-slate-200\/60\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"text-center max-w-3xl mx-auto mb-16 space-y-4\">\n                <span class=\"text-brand-orange font-bold tracking-widest text-xs uppercase bg-orange-50 px-3 py-1 rounded-full\">Ruta de Aprendizaje<\/span>\n                <h2 class=\"font-playful text-3xl sm:text-4xl font-bold text-brand-dark\">M\u00f3dulos del Curso<\/h2>\n                <p class=\"text-slate-600\">Un recorrido experiencial dise\u00f1ado paso a paso para potenciar tus habilidades de liderazgo.<\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n                <!-- Mod 1 -->\n                <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between\">\n                    <div>\n                        <span class=\"text-xs font-bold text-brand-orange bg-orange-50 px-2.5 py-1 rounded-lg\">M\u00f3dulo 01<\/span>\n                        <h3 class=\"font-playful text-lg font-bold text-brand-dark mt-3 mb-2\">El Ecosistema Desconocido<\/h3>\n                        <p class=\"text-slate-600 text-xs leading-relaxed\">Din\u00e1mica de civilizaci\u00f3n limitada y reglas cambiantes para evaluar adaptabilidad y toma de decisiones.<\/p>\n                    <\/div>\n                    <div class=\"mt-6 pt-4 border-t border-slate-100 text-xs font-semibold text-slate-400 flex items-center justify-between\">\n                        <span>SimReo #1<\/span>\n                        <i class=\"fa-solid fa-arrow-right text-brand-orange\"><\/i>\n                    <\/div>\n                <\/div>\n                <!-- Mod 2 -->\n                <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between\">\n                    <div>\n                        <span class=\"text-xs font-bold text-brand-pink bg-rose-50 px-2.5 py-1 rounded-lg\">M\u00f3dulo 02<\/span>\n                        <h3 class=\"font-playful text-lg font-bold text-brand-dark mt-3 mb-2\">El Puente Inconcluso<\/h3>\n                        <p class=\"text-slate-600 text-xs leading-relaxed\">Circuitos a ciegas y comunicaci\u00f3n anal\u00f3gica para construir confianza absoluta sin jerarqu\u00edas formales.<\/p>\n                    <\/div>\n                    <div class=\"mt-6 pt-4 border-t border-slate-100 text-xs font-semibold text-slate-400 flex items-center justify-between\">\n                        <span>SimReo #2<\/span>\n                        <i class=\"fa-solid fa-arrow-right text-brand-pink\"><\/i>\n                    <\/div>\n                <\/div>\n                <!-- Mod 3 -->\n                <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between\">\n                    <div>\n                        <span class=\"text-xs font-bold text-brand-purple bg-purple-50 px-2.5 py-1 rounded-lg\">M\u00f3dulo 03<\/span>\n                        <h3 class=\"font-playful text-lg font-bold text-brand-dark mt-3 mb-2\">La Crisis del Refugio<\/h3>\n                        <p class=\"text-slate-600 text-xs leading-relaxed\">Simulaci\u00f3n de contingencia compleja donde la innovaci\u00f3n disruptiva es la \u00fanica salida al conflicto.<\/p>\n                    <\/div>\n                    <div class=\"mt-6 pt-4 border-t border-slate-100 text-xs font-semibold text-slate-400 flex items-center justify-between\">\n                        <span>SimReo #3<\/span>\n                        <i class=\"fa-solid fa-arrow-right text-brand-purple\"><\/i>\n                    <\/div>\n                <\/div>\n                <!-- Mod 4 -->\n                <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between\">\n                    <div>\n                        <span class=\"text-xs font-bold text-brand-teal bg-emerald-50 px-2.5 py-1 rounded-lg\">M\u00f3dulo 04<\/span>\n                        <h3 class=\"font-playful text-lg font-bold text-brand-dark mt-3 mb-2\">El Espejo Transformador<\/h3>\n                        <p class=\"text-slate-600 text-xs leading-relaxed\">Feedback horizontal, mentor\u00eda mutua y consolidaci\u00f3n del estilo transformacional definitivo.<\/p>\n                    <\/div>\n                    <div class=\"mt-6 pt-4 border-t border-slate-100 text-xs font-semibold text-slate-400 flex items-center justify-between\">\n                        <span>SimReo #4<\/span>\n                        <i class=\"fa-solid fa-arrow-right text-brand-teal\"><\/i>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Test Psicom\u00e9trico Interactivo (SimReo) -->\n    <section id=\"test-section\" class=\"py-24 bg-gradient-to-b from-white via-amber-50\/30 to-slate-50\">\n        <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"text-center mb-12 space-y-3\">\n                <span class=\"text-brand-pink font-bold tracking-widest text-xs uppercase bg-rose-50 px-3 py-1 rounded-full\">Evaluaci\u00f3n Psicom\u00e9trica Interactiva<\/span>\n                <h2 class=\"font-playful text-3xl sm:text-4xl font-bold text-brand-dark\">Test de Arquetipo de Liderazgo (SimReo-TLT)<\/h2>\n                <p class=\"text-slate-600 max-w-2xl mx-auto\">Responde a las situaciones clave de simulaci\u00f3n y observa c\u00f3mo se mapea tu perfil psicom\u00e9trico en el gr\u00e1fico canvas interactivo.<\/p>\n            <\/div>\n\n            <!-- Test Grid Container -->\n            <div class=\"bg-white rounded-3xl shadow-xl border border-slate-100 p-6 sm:p-10 relative overflow-hidden\">\n                \n                <!-- Tab Controls -->\n                <div class=\"flex flex-wrap justify-center gap-3 mb-8 border-b border-slate-100 pb-4\">\n                    <button id=\"tab-quiz-btn\" onclick=\"switchTab('quiz')\" class=\"px-5 py-2.5 rounded-xl font-playful font-bold text-sm bg-brand-pink text-white shadow-md transition\">\n                        \ud83e\uddea Cuestionario Interactivo\n                    <\/button>\n                    <button id=\"tab-gform-btn\" onclick=\"switchTab('gform')\" class=\"px-5 py-2.5 rounded-xl font-playful font-bold text-sm bg-slate-100 text-slate-600 hover:bg-slate-200 transition\">\n                        \ud83d\udccb Formulario Google Forms Integrado\n                    <\/button>\n                <\/div>\n\n                <!-- Google Forms View (Hidden by default) -->\n                <div id=\"gform-view\" class=\"hidden space-y-6\">\n                    <div class=\"bg-amber-50 border border-amber-200 p-4 rounded-2xl text-xs text-amber-900 flex items-start space-x-3\">\n                        <i class=\"fa-solid fa-circle-info text-amber-600 text-base mt-0.5\"><\/i>\n                        <div>\n                            <span class=\"font-bold\">Formulario Integrado Google Forms:<\/span> Completa la evaluaci\u00f3n estandarizada a continuaci\u00f3n. Tambi\u00e9n puedes pulsar el bot\u00f3n de simulaci\u00f3n directa para pre-llenar tus datos en el Canvas interactivo.\n                        <\/div>\n                    <\/div>\n                    <div class=\"w-full bg-slate-50 border border-slate-200 rounded-2xl overflow-hidden shadow-inner flex flex-col items-center justify-center p-8 text-center min-h-[400px]\">\n                        <div class=\"w-16 h-16 bg-purple-100 text-brand-purple rounded-2xl flex items-center justify-center text-3xl mb-4\">\n                            <i class=\"fa-solid fa-file-lines\"><\/i>\n                        <\/div>\n                        <h4 class=\"font-playful text-xl font-bold text-brand-dark mb-2\">Instrumento Psicom\u00e9trico Google Forms<\/h4>\n                        <p class=\"text-sm text-slate-500 max-w-md mb-6\">Evaluaci\u00f3n de Competencias de Liderazgo Transformacional L\u00fadico (SimReo 2026)<\/p>\n                        \n                        <div class=\"flex flex-wrap justify-center gap-4\">\n                            <button onclick=\"simulateGoogleFormSubmission()\" class=\"px-6 py-3 bg-brand-purple text-white font-semibold text-sm rounded-xl shadow-lg hover:bg-purple-700 transition flex items-center space-x-2\">\n                                <i class=\"fa-solid fa-bolt\"><\/i>\n                                <span>Simular Respuestas de Google Forms<\/span>\n                            <\/button>\n                            <a href=\"https:\/\/docs.google.com\/forms\" target=\"_blank\" class=\"px-6 py-3 bg-slate-200 text-slate-700 font-semibold text-sm rounded-xl hover:bg-slate-300 transition flex items-center space-x-2\">\n                                <i class=\"fa-solid fa-external-link\"><\/i>\n                                <span>Abrir Formulario Original<\/span>\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Interactive Quiz View -->\n                <div id=\"quiz-view\" class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\n                    \n                    <!-- Left Column: Quiz \/ Intro \/ Results Form -->\n                    <div class=\"lg:col-span-7 space-y-6\">\n                        \n                        <!-- Intro State -->\n                        <div id=\"test-intro\" class=\"text-center space-y-6 py-8\">\n                            <div class=\"w-20 h-20 bg-brand-yellow\/30 rounded-3xl mx-auto flex items-center justify-center text-3xl\">\n                                \ud83c\udfaf\n                            <\/div>\n                            <h3 class=\"font-playful text-2xl font-bold text-brand-dark\">\u00bfEst\u00e1s listo para descubrir tu perfil?<\/h3>\n                            <p class=\"text-slate-600 max-w-md mx-auto text-sm\">\n                                El test eval\u00faa 4 dimensiones clave: Directivo, Cohesivo, Visionario y Transformacional. Al responder, ver\u00e1s actualizarse tu radar psicom\u00e9trico al instante.\n                            <\/p>\n                            <button onclick=\"startTest()\" class=\"px-8 py-4 bg-brand-dark text-white font-playful font-semibold rounded-2xl shadow-lg hover:bg-slate-800 transition\">\n                                Comenzar Test Ahora\n                            <\/button>\n                        <\/div>\n\n                        <!-- Quiz Questions Form -->\n                        <div id=\"quiz-container\" class=\"hidden space-y-6\">\n                            <!-- Progress bar -->\n                            <div class=\"w-full bg-slate-100 h-2.5 rounded-full overflow-hidden\">\n                                <div id=\"progress-bar\" class=\"bg-gradient-to-r from-brand-orange to-brand-pink h-2.5 w-1\/4 transition-all duration-300\"><\/div>\n                            <\/div>\n                            <div class=\"flex justify-between text-xs font-semibold text-slate-400\">\n                                <span id=\"question-step\">Pregunta 1 de 4<\/span>\n                                <span id=\"question-progress-pct\">25%<\/span>\n                            <\/div>\n\n                            <!-- Question Box -->\n                            <div id=\"question-box\" class=\"space-y-4\">\n                                <!-- Filled by JS -->\n                            <\/div>\n\n                            <div class=\"flex justify-between pt-4 border-t border-slate-100\">\n                                <button id=\"prev-btn\" onclick=\"prevQuestion()\" class=\"px-5 py-2.5 rounded-xl border border-slate-200 text-slate-600 font-semibold text-sm hover:bg-slate-50 transition hidden\">\n                                    <i class=\"fa-solid fa-arrow-left mr-2\"><\/i> Anterior\n                                <\/button>\n                                <div class=\"ml-auto\">\n                                    <button id=\"next-btn\" onclick=\"nextQuestion()\" class=\"px-6 py-2.5 bg-brand-pink text-white font-semibold rounded-xl text-sm shadow-md hover:bg-rose-600 transition disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n                                        Siguiente <i class=\"fa-solid fa-arrow-right ml-2\"><\/i>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Results & Contact Form Container -->\n                        <div id=\"results-container\" class=\"hidden space-y-6\">\n                            <div class=\"text-center space-y-3 bg-gradient-to-tr from-amber-50 to-purple-50 p-6 rounded-2xl border border-amber-100\">\n                                <span class=\"text-xs font-bold uppercase tracking-wider text-amber-900 bg-brand-yellow\/40 px-3 py-1 rounded-full\">Tu Arquetipo Principal<\/span>\n                                <h3 id=\"result-title\" class=\"font-playful text-3xl font-bold text-brand-dark\">L\u00edder Transformacional Equilibrado<\/h3>\n                                <p id=\"result-description\" class=\"text-slate-600 text-sm max-w-lg mx-auto leading-relaxed\">\n                                    Tienes una gran capacidad para integrar la visi\u00f3n estrat\u00e9gica, la empat\u00eda y la ejecuci\u00f3n pr\u00e1ctica en equipo.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Contact Form for Submission -->\n                            <div class=\"space-y-4 pt-4 border-t border-slate-100\">\n                                <h4 class=\"font-playful text-xl font-bold text-brand-dark\">Enviar mis resultados al Profe Bernardo<\/h4>\n                                <p class=\"text-xs text-slate-500\">Registra tus datos para enviar tu diagn\u00f3stico psicom\u00e9trico completo a <span class=\"font-semibold text-slate-700\">contacto@elprofebernardo.cl<\/span> y <span class=\"font-semibold text-slate-700\">bernardo.jara@gmail.com<\/span> o directamente a WhatsApp.<\/p>\n                                \n                                <form id=\"contact-form\" onsubmit=\"submitForm(event)\" class=\"space-y-4\">\n                                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                                        <div>\n                                            <label class=\"block text-xs font-bold text-slate-600 mb-1\">Nombre Completo *<\/label>\n                                            <input type=\"text\" id=\"user-name\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-pink transition\" placeholder=\"Ej. Camila Soto\">\n                                        <\/div>\n                                        <div>\n                                            <label class=\"block text-xs font-bold text-slate-600 mb-1\">Correo Electr\u00f3nico *<\/label>\n                                            <input type=\"email\" id=\"user-email\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-pink transition\" placeholder=\"tucorreo@ejemplo.com\">\n                                        <\/div>\n                                    <\/div>\n                                    <div>\n                                        <label class=\"block text-xs font-bold text-slate-600 mb-1\">Tel\u00e9fono \/ WhatsApp *<\/label>\n                                        <input type=\"tel\" id=\"user-phone\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-pink transition\" placeholder=\"+56 9 1234 5678\">\n                                    <\/div>\n\n                                    <div class=\"pt-2 flex flex-col sm:flex-row gap-3\">\n                                        <button type=\"submit\" class=\"flex-1 py-4 bg-emerald-600 hover:bg-emerald-700 text-white font-playful font-semibold rounded-xl shadow-lg transition flex items-center justify-center space-x-2\">\n                                            <i class=\"fa-brands fa-whatsapp text-xl\"><\/i>\n                                            <span>Enviar por WhatsApp (+56944345371)<\/span>\n                                        <\/button>\n                                        <button type=\"button\" onclick=\"copySummary()\" class=\"px-6 py-4 bg-slate-100 hover:bg-slate-200 text-slate-700 font-playful font-semibold rounded-xl transition flex items-center justify-center space-x-2\">\n                                            <i class=\"fa-solid fa-copy\"><\/i>\n                                            <span>Copiar Resumen para Correo<\/span>\n                                        <\/button>\n                                    <\/div>\n                                    <div id=\"copy-feedback\" class=\"text-center text-xs text-emerald-600 font-semibold hidden\">\n                                        \u2713 \u00a1Resumen copiado al portapapeles! Listo para enviar por correo.\n                                    <\/div>\n                                <\/form>\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- Right Column: Canvas Chart Visualization -->\n                    <div class=\"lg:col-span-5 bg-slate-50 p-6 rounded-3xl border border-slate-200\/80 flex flex-col items-center justify-center\">\n                        <div class=\"w-full text-center mb-4\">\n                            <span class=\"text-xs font-bold uppercase tracking-wider text-slate-400\">Visualizaci\u00f3n en Vivo<\/span>\n                            <h4 class=\"font-playful text-lg font-bold text-brand-dark\">Gr\u00e1fico Psicom\u00e9trico Canvas<\/h4>\n                        <\/div>\n                        \n                        <div class=\"relative w-full aspect-square max-w-[320px] mx-auto flex items-center justify-center\">\n                            <canvas id=\"radarCanvas\" class=\"w-full h-full\"><\/canvas>\n                        <\/div>\n\n                        <!-- Legend & Indicators -->\n                        <div class=\"w-full grid grid-cols-2 gap-2 mt-6 text-xs\">\n                            <div class=\"flex items-center space-x-2 bg-white p-2.5 rounded-xl border border-slate-100 shadow-sm\">\n                                <span class=\"w-3 h-3 rounded-full bg-[#FF5757]\"><\/span>\n                                <span class=\"font-semibold text-slate-700\">Directivo: <b id=\"score-directivo\" class=\"text-brand-pink\">0<\/b><\/span>\n                            <\/div>\n                            <div class=\"flex items-center space-x-2 bg-white p-2.5 rounded-xl border border-slate-100 shadow-sm\">\n                                <span class=\"w-3 h-3 rounded-full bg-[#00D26A]\"><\/span>\n                                <span class=\"font-semibold text-slate-700\">Cohesivo: <b id=\"score-cohesivo\" class=\"text-brand-teal\">0<\/b><\/span>\n                            <\/div>\n                            <div class=\"flex items-center space-x-2 bg-white p-2.5 rounded-xl border border-slate-100 shadow-sm\">\n                                <span class=\"w-3 h-3 rounded-full bg-[#FF914D]\"><\/span>\n                                <span class=\"font-semibold text-slate-700\">Visionario: <b id=\"score-visionario\" class=\"text-brand-orange\">0<\/b><\/span>\n                            <\/div>\n                            <div class=\"flex items-center space-x-2 bg-white p-2.5 rounded-xl border border-slate-100 shadow-sm\">\n                                <span class=\"w-3 h-3 rounded-full bg-[#9B51E0]\"><\/span>\n                                <span class=\"font-semibold text-slate-700\">Transform.: <b id=\"score-transformacional\" class=\"text-brand-purple\">0<\/b><\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Footer -->\n    <footer id=\"contacto\" class=\"bg-brand-dark text-white py-16\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-12 mb-12\">\n                <div class=\"space-y-4\">\n                    <div class=\"flex items-center space-x-3\">\n                        <div class=\"w-10 h-10 bg-brand-pink rounded-xl flex items-center justify-center text-white text-xl font-playful\">\n                            \ud83c\udfae\n                        <\/div>\n                        <span class=\"font-playful font-bold text-xl text-white\">elprofebernardo<span class=\"text-brand-pink\">.cl<\/span><\/span>\n                    <\/div>\n                    <p class=\"text-slate-400 text-sm leading-relaxed\">\n                        Transformando la educaci\u00f3n y el liderazgo a trav\u00e9s del juego, la simulaci\u00f3n vivencial y el aprendizaje libre en Chile y el mundo.\n                    <\/p>\n                <\/div>\n                <div>\n                    <h4 class=\"font-playful font-bold text-lg mb-4 text-white\">Contacto Directo<\/h4>\n                    <ul class=\"space-y-3 text-sm text-slate-400\">\n                        <li><i class=\"fa-solid fa-envelope mr-2 text-brand-pink\"><\/i> contacto@elprofebernardo.cl<\/li>\n                        <li><i class=\"fa-solid fa-envelope mr-2 text-brand-pink\"><\/i> bernardo.jara@gmail.com<\/li>\n                        <li><i class=\"fa-brands fa-whatsapp mr-2 text-brand-teal\"><\/i> <a href=\"https:\/\/wa.me\/56944345371\" target=\"_blank\" class=\"hover:text-white transition\">+56 9 4434 5371<\/a><\/li>\n                    <\/ul>\n                <\/div>\n                <div>\n                    <h4 class=\"font-playful font-bold text-lg mb-4 text-white\">Metodolog\u00eda<\/h4>\n                    <p class=\"text-slate-400 text-sm leading-relaxed\">\n                        Dise\u00f1ado bajo principios de educaci\u00f3n desescolarizada, andragog\u00eda l\u00fadica y simulaci\u00f3n de roles (SimReo).\n                    <\/p>\n                <\/div>\n            <\/div>\n            <div class=\"border-t border-slate-800 pt-8 text-center text-xs text-slate-500\">\n                &copy; 2026 elprofebernardo.cl &#8211; Todos los derechos reservados. Liderazgo Transformacional L\u00fadico.\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <!-- JavaScript Application Logic -->\n    <script>\n        const questions = [\n            {\n                question: \"1. En medio de un desaf\u00edo de simulaci\u00f3n donde las reglas cambian repentinamente, tu primera reacci\u00f3n es:\",\n                options: [\n                    { text: \"Dise\u00f1ar r\u00e1pidamente un nuevo plan de acci\u00f3n y asignar tareas precisas.\", type: \"Directivo\" },\n                    { text: \"Recomponer el \u00e1nimo del equipo y asegurar que nadie se sienta frustrado.\", type: \"Cohesivo\" },\n                    { text: \"Imaginar nuevas oportunidades creativas que el cambio permite explorar.\", type: \"Visionario\" },\n                    { text: \"Facilitar un di\u00e1logo breve para construir la estrategia en conjunto.\", type: \"Transformacional\" }\n                ]\n            },\n            {\n                question: \"2. Cuando un integrante del grupo comete un error clave en la din\u00e1mica de juego:\",\n                options: [\n                    { text: \"Corriges la acci\u00f3n de inmediato para no perder tiempo en el objetivo.\", type: \"Directivo\" },\n                    { text: \"Le ofreces apoyo emocional c\u00e1lido y amortiguas el impacto en el grupo.\", type: \"Cohesivo\" },\n                    { text: \"Utilizas el error como pretexto para redefinir el objetivo de forma innovadora.\", type: \"Visionario\" },\n                    { text: \"Le ayudas a reflexionar sobre lo aprendido para incrementar su confianza.\", type: \"Transformacional\" }\n                ]\n            },\n            {\n                question: \"3. Tu principal motivaci\u00f3n al liderar una actividad o taller es:\",\n                options: [\n                    { text: \"Lograr la meta y cumplir el objetivo asignado al 100%.\", type: \"Directivo\" },\n                    { text: \"Garantizar que todos se sientan integrados y disfruten la experiencia.\", type: \"Cohesivo\" },\n                    { text: \"Inspirar a otros a pensar de forma diferente y disruptiva.\", type: \"Visionario\" },\n                    { text: \"Desarrollar el potencial latente y el liderazgo de cada participante.\", type: \"Transformacional\" }\n                ]\n            },\n            {\n                question: \"4. Ante un conflicto de opiniones encendido en el equipo durante el SimReo:\",\n                options: [\n                    { text: \"Tomas la decisi\u00f3n final como autoridad para destrabar el proceso.\", type: \"Directivo\" },\n                    { text: \"Buscas un punto medio arm\u00f3nico donde todos queden conformes.\", type: \"Cohesivo\" },\n                    { text: \"Propones una tercera v\u00eda totalmente disruptiva y original.\", type: \"Visionario\" },\n                    { text: \"Promueves que las partes expongan sus argumentos y construyan juntos una soluci\u00f3n superior.\", type: \"Transformacional\" }\n                ]\n            }\n        ];\n\n        let currentQuestionIndex = 0;\n        let userAnswers = [];\n\n        \/\/ Dimension scores\n        let scores = {\n            Directivo: 0,\n            Cohesivo: 0,\n            Visionario: 0,\n            Transformacional: 0\n        };\n\n        const profiles = {\n            \"Directivo\": {\n                title: \"L\u00edder Directivo \/ Ejecutor\",\n                desc: \"Te destacas por tu rapidez de acci\u00f3n, enfoque en resultados claros y capacidad de estructurar operaciones con eficacia inmediata.\"\n            },\n            \"Cohesivo\": {\n                title: \"L\u00edder Emp\u00e1tico \/ Cohesivo\",\n                desc: \"Tienes una gran sensibilidad hacia el clima emocional del equipo, asegurando la integraci\u00f3n, el bienestar y la contenci\u00f3n de todos.\"\n            },\n            \"Visionario\": {\n                title: \"L\u00edder Visionario Creativo\",\n                desc: \"Aportas una perspectiva innovadora y disruptiva, encontrando oportunidades donde otros s\u00f3lo ven obst\u00e1culos o reglas r\u00edgidas.\"\n            },\n            \"Transformacional\": {\n                title: \"L\u00edder Transformacional Estelar\",\n                desc: \"Integras de forma magistral la visi\u00f3n, la empat\u00eda y el desarrollo del talento, empoderando a cada miembro para ser agente de cambio.\"\n            }\n        };\n\n        \/\/ Window load initialization\n        window.onload = function() {\n            initCanvas();\n            drawRadarChart();\n        };\n\n        function switchTab(tab) {\n            const quizBtn = document.getElementById('tab-quiz-btn');\n            const gformBtn = document.getElementById('tab-gform-btn');\n            const quizView = document.getElementById('quiz-view');\n            const gformView = document.getElementById('gform-view');\n\n            if (tab === 'quiz') {\n                quizBtn.className = \"px-5 py-2.5 rounded-xl font-playful font-bold text-sm bg-brand-pink text-white shadow-md transition\";\n                gformBtn.className = \"px-5 py-2.5 rounded-xl font-playful font-bold text-sm bg-slate-100 text-slate-600 hover:bg-slate-200 transition\";\n                quizView.classList.remove('hidden');\n                gformView.classList.add('hidden');\n            } else {\n                gformBtn.className = \"px-5 py-2.5 rounded-xl font-playful font-bold text-sm bg-brand-purple text-white shadow-md transition\";\n                quizBtn.className = \"px-5 py-2.5 rounded-xl font-playful font-bold text-sm bg-slate-100 text-slate-600 hover:bg-slate-200 transition\";\n                gformView.classList.remove('hidden');\n                quizView.classList.add('hidden');\n            }\n        }\n\n        function startTest() {\n            document.getElementById('test-intro').classList.add('hidden');\n            document.getElementById('quiz-container').classList.remove('hidden');\n            renderQuestion();\n        }\n\n        function renderQuestion() {\n            const q = questions[currentQuestionIndex];\n            const qBox = document.getElementById('question-box');\n            \n            let html = `<h4 class=\"font-playful text-xl font-bold text-brand-dark mb-4\">${q.question}<\/h4>`;\n            html += `<div class=\"space-y-3\">`;\n            \n            q.options.forEach((opt, idx) => {\n                const isSelected = userAnswers[currentQuestionIndex] === opt.type ? 'border-brand-pink bg-rose-50\/50 shadow-sm' : 'border-slate-200 hover:border-slate-300';\n                html += `\n                    <label onclick=\"selectOption('${opt.type}')\" class=\"flex items-start p-4 rounded-2xl border-2 ${isSelected} cursor-pointer transition\">\n                        <input type=\"radio\" name=\"q${currentQuestionIndex}\" value=\"${opt.type}\" ${userAnswers[currentQuestionIndex] === opt.type ? 'checked' : ''} class=\"mt-1 mr-3 text-brand-pink focus:ring-brand-pink\">\n                        <span class=\"text-sm text-slate-700 font-medium\">${opt.text}<\/span>\n                    <\/label>\n                `;\n            });\n            html += `<\/div>`;\n            qBox.innerHTML = html;\n\n            \/\/ Progress updates\n            const progressPct = ((currentQuestionIndex + 1) \/ questions.length) * 100;\n            document.getElementById('progress-bar').style.width = progressPct + '%';\n            document.getElementById('question-step').innerText = `Pregunta ${currentQuestionIndex + 1} de ${questions.length}`;\n            document.getElementById('question-progress-pct').innerText = Math.round(progressPct) + '%';\n\n            \/\/ Buttons\n            const prevBtn = document.getElementById('prev-btn');\n            if (currentQuestionIndex > 0) {\n                prevBtn.classList.remove('hidden');\n            } else {\n                prevBtn.classList.add('hidden');\n            }\n\n            const nextBtn = document.getElementById('next-btn');\n            nextBtn.disabled = !userAnswers[currentQuestionIndex];\n        }\n\n        function selectOption(type) {\n            userAnswers[currentQuestionIndex] = type;\n            recalculateScores();\n            renderQuestion();\n        }\n\n        function recalculateScores() {\n            scores = { Directivo: 0, Cohesivo: 0, Visionario: 0, Transformacional: 0 };\n            userAnswers.forEach(ans => {\n                if (ans && scores.hasOwnProperty(ans)) {\n                    scores[ans] += 25; \/\/ 4 questions max -> 100%\n                }\n            });\n\n            document.getElementById('score-directivo').innerText = scores.Directivo + '%';\n            document.getElementById('score-cohesivo').innerText = scores.Cohesivo + '%';\n            document.getElementById('score-visionario').innerText = scores.Visionario + '%';\n            document.getElementById('score-transformacional').innerText = scores.Transformacional + '%';\n\n            drawRadarChart();\n        }\n\n        function prevQuestion() {\n            if (currentQuestionIndex > 0) {\n                currentQuestionIndex--;\n                renderQuestion();\n            }\n        }\n\n        function nextQuestion() {\n            if (currentQuestionIndex < questions.length - 1) {\n                currentQuestionIndex++;\n                renderQuestion();\n            } else {\n                finishQuiz();\n            }\n        }\n\n        function finishQuiz() {\n            document.getElementById('quiz-container').classList.add('hidden');\n            document.getElementById('results-container').classList.remove('hidden');\n\n            \/\/ Find dominant profile\n            let maxType = \"Transformacional\";\n            let maxScore = -1;\n            for (const [key, val] of Object.entries(scores)) {\n                if (val > maxScore) {\n                    maxScore = val;\n                    maxType = key;\n                }\n            }\n\n            const prof = profiles[maxType] || profiles[\"Transformacional\"];\n            document.getElementById('result-title').innerText = prof.title;\n            document.getElementById('result-description').innerText = prof.desc;\n        }\n\n        function simulateGoogleFormSubmission() {\n            scores = {\n                Directivo: 50,\n                Cohesivo: 75,\n                Visionario: 100,\n                Transformacional: 75\n            };\n            document.getElementById('score-directivo').innerText = '50%';\n            document.getElementById('score-cohesivo').innerText = '75%';\n            document.getElementById('score-visionario').innerText = '100%';\n            document.getElementById('score-transformacional').innerText = '75%';\n\n            drawRadarChart();\n            switchTab('quiz');\n\n            document.getElementById('test-intro').classList.add('hidden');\n            document.getElementById('quiz-container').classList.add('hidden');\n            document.getElementById('results-container').classList.remove('hidden');\n\n            document.getElementById('result-title').innerText = profiles[\"Visionario\"].title;\n            document.getElementById('result-description').innerText = profiles[\"Visionario\"].desc + \" (Simulaci\u00f3n desde Google Forms).\";\n        }\n\n        \/\/ Native Canvas Radar Chart Implementation\n        let canvas, ctx;\n        function initCanvas() {\n            canvas = document.getElementById('radarCanvas');\n            const dpr = window.devicePixelRatio || 1;\n            const rect = canvas.getBoundingClientRect();\n            canvas.width = (rect.width || 300) * dpr;\n            canvas.height = (rect.height || 300) * dpr;\n            ctx = canvas.getContext('2d');\n            ctx.scale(dpr, dpr);\n        }\n\n        function drawRadarChart() {\n            if (!ctx) initCanvas();\n            const width = canvas.width \/ (window.devicePixelRatio || 1);\n            const height = canvas.height \/ (window.devicePixelRatio || 1);\n            const centerX = width \/ 2;\n            const centerY = height \/ 2;\n            const radius = Math.min(centerX, centerY) - 40;\n\n            ctx.clearRect(0, 0, width, height);\n\n            const axes = [\"Directivo\", \"Cohesivo\", \"Visionario\", \"Transformacional\"];\n            const colors = [\"#FF5757\", \"#00D26A\", \"#FF914D\", \"#9B51E0\"];\n            const totalAxes = axes.length;\n\n            \/\/ Draw concentric web rings\n            const rings = 4;\n            for (let r = 1; r <= rings; r++) {\n                const ringRadius = (radius \/ rings) * r;\n                ctx.beginPath();\n                for (let i = 0; i < totalAxes; i++) {\n                    const angle = (Math.PI * 2 \/ totalAxes) * i - Math.PI \/ 2;\n                    const x = centerX + ringRadius * Math.cos(angle);\n                    const y = centerY + ringRadius * Math.sin(angle);\n                    if (i === 0) ctx.moveTo(x, y);\n                    else ctx.lineTo(x, y);\n                }\n                ctx.closePath();\n                ctx.strokeStyle = \"rgba(203, 213, 225, 0.6)\";\n                ctx.lineWidth = 1;\n                ctx.stroke();\n            }\n\n            \/\/ Draw axis lines and labels\n            for (let i = 0; i < totalAxes; i++) {\n                const angle = (Math.PI * 2 \/ totalAxes) * i - Math.PI \/ 2;\n                const ax = centerX + radius * Math.cos(angle);\n                const ay = centerY + radius * Math.sin(angle);\n\n                ctx.beginPath();\n                ctx.moveTo(centerX, centerY);\n                ctx.lineTo(ax, ay);\n                ctx.strokeStyle = \"rgba(148, 163, 184, 0.4)\";\n                ctx.lineWidth = 1.5;\n                ctx.stroke();\n\n                \/\/ Axis label\n                const lx = centerX + (radius + 20) * Math.cos(angle);\n                const ly = centerY + (radius + 15) * Math.sin(angle);\n                ctx.font = \"bold 11px Inter, sans-serif\";\n                ctx.fillStyle = colors[i];\n                ctx.textAlign = \"center\";\n                ctx.textBaseline = \"middle\";\n                ctx.fillText(axes[i], lx, ly);\n            }\n\n            \/\/ Draw score polygon\n            ctx.beginPath();\n            axes.forEach((axis, i) => {\n                const val = scores[axis] || 10; \/\/ minimum visible padding\n                const currentRadius = (radius * Math.max(val, 10)) \/ 100;\n                const angle = (Math.PI * 2 \/ totalAxes) * i - Math.PI \/ 2;\n                const x = centerX + currentRadius * Math.cos(angle);\n                const y = centerY + currentRadius * Math.sin(angle);\n\n                if (i === 0) ctx.moveTo(x, y);\n                else ctx.lineTo(x, y);\n            });\n            ctx.closePath();\n\n            \/\/ Fill polygon with dynamic gradient\n            const gradient = ctx.createRadialGradient(centerX, centerY, 10, centerX, centerY, radius);\n            gradient.addColorStop(0, 'rgba(255, 87, 87, 0.35)');\n            gradient.addColorStop(0.5, 'rgba(255, 145, 77, 0.35)');\n            gradient.addColorStop(1, 'rgba(155, 81, 224, 0.35)');\n            ctx.fillStyle = gradient;\n            ctx.fill();\n\n            ctx.strokeStyle = '#9B51E0';\n            ctx.lineWidth = 2.5;\n            ctx.stroke();\n\n            \/\/ Draw data point dots\n            axes.forEach((axis, i) => {\n                const val = scores[axis] || 10;\n                const currentRadius = (radius * Math.max(val, 10)) \/ 100;\n                const angle = (Math.PI * 2 \/ totalAxes) * i - Math.PI \/ 2;\n                const x = centerX + currentRadius * Math.cos(angle);\n                const y = centerY + currentRadius * Math.sin(angle);\n\n                ctx.beginPath();\n                ctx.arc(x, y, 5, 0, Math.PI * 2);\n                ctx.fillStyle = colors[i];\n                ctx.fill();\n                ctx.strokeStyle = '#FFFFFF';\n                ctx.lineWidth = 2;\n                ctx.stroke();\n            });\n        }\n\n        window.addEventListener('resize', () => {\n            initCanvas();\n            drawRadarChart();\n        });\n\n        function submitForm(e) {\n            e.preventDefault();\n            const name = document.getElementById('user-name').value;\n            const email = document.getElementById('user-email').value;\n            const phone = document.getElementById('user-phone').value;\n            const title = document.getElementById('result-title').innerText;\n\n            const message = `\u00a1Hola Profe Bernardo! Mi nombre es ${name} (${email}, Tel: ${phone}).\\n\\nHe realizado el Test de Liderazgo Transformacional L\u00fadico (SimReo-TLT).\\nMi Arquetipo Principal: *${title}*\\n\\nResultados Psicom\u00e9tricos:\\n- Directivo: ${scores.Directivo}%\\n- Cohesivo: ${scores.Cohesivo}%\\n- Visionario: ${scores.Visionario}%\\n- Transformacional: ${scores.Transformacional}%\\n\\n\u00a1Me gustar\u00eda participar en el curso!`;\n\n            const encoded = encodeURIComponent(message);\n            window.open(`https:\/\/wa.me\/56944345371?text=${encoded}`, '_blank');\n        }\n\n        function copySummary() {\n            const name = document.getElementById('user-name').value || \"Participante\";\n            const email = document.getElementById('user-email').value || \"correo@ejemplo.com\";\n            const phone = document.getElementById('user-phone').value || \"No especificado\";\n            const title = document.getElementById('result-title').innerText;\n\n            const text = `REGISTRO TEST DE LIDERAZGO SIMREO - ELPROFEBERNARDO.CL\\n-----------------------------------------------\\nNombre: ${name}\\nCorreo: ${email}\\nTel\u00e9fono: ${phone}\\n\\nArquetipo: ${title}\\nResultados:\\n- Directivo: ${scores.Directivo}%\\n- Cohesivo: ${scores.Cohesivo}%\\n- Visionario: ${scores.Visionario}%\\n- Transformacional: ${scores.Transformacional}%\\n-----------------------------------------------\\nEnviar a: contacto@elprofebernardo.cl y bernardo.jara@gmail.com`;\n\n            \/\/ Standard fallback clipboard copy mechanism\n            const textArea = document.createElement(\"textarea\");\n            textArea.value = text;\n            document.body.appendChild(textArea);\n            textArea.select();\n            try {\n                document.execCommand('copy');\n                const feedback = document.getElementById('copy-feedback');\n                feedback.classList.remove('hidden');\n                setTimeout(() => feedback.classList.add('hidden'), 4000);\n            } catch (err) {\n                console.error(\"Error al copiar text\", err);\n            }\n            document.body.removeChild(textArea);\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Liderazgo Transformacional L\u00fadico | elprofebernardo.cl \ud83c\udfae elprofebernardo.cl Liderazgo Transformacional L\u00fadico Filosof\u00eda M\u00f3dulos SimReo Test Psicom\u00e9trico Participa Ya \u2728 Educaci\u00f3n Desescolarizada y Vivencial Liderazgo Transformacional a trav\u00e9s del Juego Desaprende las estructuras r\u00edgidas del aula tradicional. Vive experiencias inmersivas, juegos de simulaci\u00f3n estrat\u00e9gica (SimReo) y descubre tu verdadero potencial de liderazgo inspirador. \ud83d\ude80 Tomar Test de Liderazgo Explorar Metodolog\u00eda \ud83c\udfb2 \u00bfQu\u00e9 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-1287","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=\/wp\/v2\/pages\/1287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1287"}],"version-history":[{"count":4,"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=\/wp\/v2\/pages\/1287\/revisions"}],"predecessor-version":[{"id":1299,"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=\/wp\/v2\/pages\/1287\/revisions\/1299"}],"wp:attachment":[{"href":"https:\/\/elprofebernardo.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}