{"id":2540,"date":"2026-05-10T18:58:12","date_gmt":"2026-05-10T16:58:12","guid":{"rendered":"https:\/\/agora.xtec.cat\/ifeb\/?p=2540"},"modified":"2026-06-16T20:09:59","modified_gmt":"2026-06-16T18:09:59","slug":"pimes-amb-veu-el-joc","status":"publish","type":"post","link":"https:\/\/agora.xtec.cat\/ifeb\/general\/pimes-amb-veu-el-joc\/","title":{"rendered":"PIMES amb veu: el joc"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1588\" height=\"470\" src=\"https:\/\/agora.xtec.cat\/ifeb\/wp-content\/uploads\/usu3035\/2026\/06\/PAV-banner-estret-v34.png\" alt=\"\" class=\"wp-image-2572\" srcset=\"https:\/\/agora.xtec.cat\/ifeb\/wp-content\/uploads\/usu3035\/2026\/06\/PAV-banner-estret-v34.png 1588w, https:\/\/agora.xtec.cat\/ifeb\/wp-content\/uploads\/usu3035\/2026\/06\/PAV-banner-estret-v34-300x89.png 300w, https:\/\/agora.xtec.cat\/ifeb\/wp-content\/uploads\/usu3035\/2026\/06\/PAV-banner-estret-v34-768x227.png 768w, https:\/\/agora.xtec.cat\/ifeb\/wp-content\/uploads\/usu3035\/2026\/06\/PAV-banner-estret-v34-1536x455.png 1536w\" sizes=\"auto, (max-width: 1588px) 100vw, 1588px\" \/><\/figure>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ca\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Sinergia Inclusiva: Simulador per a Pimes<\/title>\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n    \n    <style>\n        body {\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            background-color: #F8F9FA;\n            color: #1A1A1A;\n            transition: background-color 0.3s, color 0.3s;\n            overflow-x: hidden;\n        }\n        \n        \/* Paleta de colors i variables *\/\n        :root {\n            --orange-main: #FB8B23;\n            --yellow-main: #FFBD59;\n        }\n\n        \/* Animacions personalitzades *\/\n        @keyframes fadeInUp {\n            0% { opacity: 0; transform: translateY(20px); }\n            100% { opacity: 1; transform: translateY(0); }\n        }\n        .animate-fade-in {\n            animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        }\n        .delay-100 { animation-delay: 100ms; }\n        .delay-200 { animation-delay: 200ms; }\n        \n        @keyframes pulseSoft {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.02); }\n        }\n        .animate-pulse-soft { animation: pulseSoft 2s infinite ease-in-out; }\n\n        \/* Mode d'alt contrast *\/\n        .high-contrast {\n            background-color: #000000 !important;\n            color: #FFFFFF !important;\n        }\n        .high-contrast .bg-card, .high-contrast section {\n            background-color: #121212 !important;\n            border: 2px solid #FFFFFF !important;\n        }\n        .high-contrast button {\n            background-color: #FFFFFF !important;\n            color: #000000 !important;\n            border: 2px solid #000000 !important;\n            font-weight: bold !important;\n        }\n\n        \/* Simulaci\u00f3 visual *\/\n        @keyframes floatDistraction {\n            0% { transform: translateY(0px) translateX(0px); opacity: 0; }\n            10% { opacity: 0.9; }\n            90% { opacity: 0.9; }\n            100% { transform: translateY(-100px) translateX(30px); opacity: 0; }\n        }\n        .distraction-element {\n            position: absolute;\n            pointer-events: none;\n            font-size: 0.9rem;\n            font-weight: 700;\n            color: #E63946;\n            background: rgba(255, 255, 255, 0.9);\n            padding: 4px 10px;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n            animation: floatDistraction 3.5s infinite ease-in;\n            z-index: 50;\n        }\n        @keyframes flicker {\n            0%, 100% { opacity: 1; filter: contrast(1); }\n            50% { opacity: 0.85; filter: contrast(1.3) saturate(1.2); }\n        }\n        .sensory-overload-active {\n            animation: flicker 0.4s infinite alternate;\n        }\n        \n        \/* Utilitats *\/\n        .hidden-screen { display: none !important; }\n        .glass-panel {\n            background: rgba(255, 255, 255, 0.8);\n            backdrop-filter: blur(10px);\n            border: 1px solid rgba(255, 255, 255, 0.3);\n        }\n    <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col justify-between selection:bg-[#FFBD59]\">\n\n    <!-- CAP\u00c7ALERA -->\n    <header class=\"bg-white\/90 backdrop-blur-md border-b border-gray-200 px-6 py-4 flex justify-between items-center shadow-sm sticky top-0 z-50\">\n        <div class=\"flex items-center space-x-3\">\n            <div class=\"w-10 h-10 rounded-xl bg-gradient-to-br from-[#FB8B23] to-[#FFBD59] flex items-center justify-center text-white font-bold text-xl shadow-md\">i<\/div>\n            <div>\n                <h1 class=\"font-bold text-xl tracking-tight leading-none\">Sinergia<span class=\"text-[#FB8B23]\">Inclusiva<\/span><\/h1>\n                <span class=\"text-[10px] uppercase tracking-widest text-gray-500 font-semibold\">Simulador Pimes<\/span>\n            <\/div>\n        <\/div>\n        \n        <div class=\"flex items-center space-x-3\">\n            <button onclick=\"toggleHighContrast()\" class=\"text-sm bg-gray-50 border border-gray-200 px-3 py-2 rounded-lg hover:bg-gray-100 font-medium transition flex items-center space-x-2 cursor-pointer shadow-sm\">\n                <span>\ud83d\udc41\ufe0f Contrast<\/span>\n            <\/button>\n            <button onclick=\"toggleFontSize()\" class=\"text-sm bg-gray-50 border border-gray-200 px-3 py-2 rounded-lg hover:bg-gray-100 font-medium transition flex items-center space-x-2 cursor-pointer shadow-sm\">\n                <span>A+ Mida<\/span>\n            <\/button>\n        <\/div>\n    <\/header>\n\n    <!-- CONTENIDOR PRINCIPAL -->\n    <main class=\"flex-grow p-4 md:p-8 max-w-5xl w-full mx-auto relative flex flex-col items-center justify-center\">\n        \n        <!-- ============================================== -->\n        <!-- PANTALLA 1: INICI                              -->\n        <!-- ============================================== -->\n        <section id=\"screen-welcome\" class=\"w-full max-w-4xl bg-white p-10 md:p-14 rounded-[2rem] shadow-2xl border border-gray-100 text-center animate-fade-in relative overflow-hidden\">\n            <!-- Decoraci\u00f3 de fons -->\n            <div class=\"absolute top-[-50px] right-[-50px] w-40 h-40 bg-orange-100 rounded-full blur-3xl opacity-50\"><\/div>\n            <div class=\"absolute bottom-[-50px] left-[-50px] w-40 h-40 bg-yellow-100 rounded-full blur-3xl opacity-50\"><\/div>\n            \n            <span class=\"inline-block text-xs font-bold uppercase tracking-widest text-[#FB8B23] bg-orange-50 px-4 py-1.5 rounded-full mb-6 border border-orange-100 relative z-10\">Formaci\u00f3 Immersiva<\/span>\n            \n            <h2 class=\"text-4xl md:text-5xl font-extrabold mb-6 leading-tight text-gray-900 relative z-10\">\n                La neuroinclusi\u00f3 \u00e9s el <br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#FB8B23] to-[#FFBD59]\">motor del talent<\/span>\n            <\/h2>\n            \n            <p class=\"text-gray-600 text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed relative z-10\">\n                Assumeix el rol d&#8217;<strong>Assessor\/a de Comunicaci\u00f3<\/strong>. Observa, analitza la barrera cognitiva i pren la decisi\u00f3 adequada per millorar el benestar i la productivitat de l&#8217;equip.\n            <\/p>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 text-left mb-10 relative z-10\">\n                <div class=\"p-6 bg-gray-50 rounded-2xl border border-gray-100 hover:shadow-md transition\">\n                    <div class=\"text-3xl mb-3\">\ud83e\uddd1\u200d\ud83d\udcbc<\/div>\n                    <div class=\"font-bold text-gray-900 text-lg\">Coneix l&#8217;equip<\/div>\n                    <div class=\"text-sm text-gray-500 mt-2 leading-relaxed\">Descobreix perfils realistes i els seus estils de processament.<\/div>\n                <\/div>\n                <div class=\"p-6 bg-gray-50 rounded-2xl border border-gray-100 hover:shadow-md transition\">\n                    <div class=\"text-3xl mb-3\">\ud83d\udd0d<\/div>\n                    <div class=\"font-bold text-gray-900 text-lg\">Simula la barrera<\/div>\n                    <div class=\"text-sm text-gray-500 mt-2 leading-relaxed\">Experimenta l&#8217;entorn visualment per crear empatia.<\/div>\n                <\/div>\n                <div class=\"p-6 bg-gray-50 rounded-2xl border border-gray-100 hover:shadow-md transition\">\n                    <div class=\"text-3xl mb-3\">\ud83d\udcc8<\/div>\n                    <div class=\"font-bold text-gray-900 text-lg\">Tria la soluci\u00f3<\/div>\n                    <div class=\"text-sm text-gray-500 mt-2 leading-relaxed\">Implementa ajustos reals i mesura&#8217;n l&#8217;impacte a la Pime.<\/div>\n                <\/div>\n            <\/div>\n\n            <button onclick=\"initGame()\" class=\"relative z-10 bg-gray-900 hover:bg-gray-800 text-white px-10 py-4 rounded-2xl font-bold text-lg shadow-xl shadow-gray-900\/20 transition transform hover:-translate-y-1 cursor-pointer animate-pulse-soft\">\n                Comen\u00e7ar la Simulaci\u00f3\n            <\/button>\n        <\/section>\n\n        <!-- ============================================== -->\n        <!-- PANTALLA 2: PERFIL DE L'EMPLEAT (PAS 1)        -->\n        <!-- ============================================== -->\n        <section id=\"screen-profile\" class=\"hidden-screen w-full max-w-3xl animate-fade-in\">\n            <div class=\"text-center mb-8\">\n                <span class=\"text-sm font-bold text-[#FB8B23] uppercase tracking-widest\" id=\"step-indicator-1\">Cas 1 de 4<\/span>\n                <h2 class=\"text-3xl font-extrabold text-gray-900 mt-2\">1. Coneix el membre de l&#8217;equip<\/h2>\n                <p class=\"text-gray-500 mt-2\">Analitza els seus punts forts i les seves necessitats comunicatives abans d&#8217;assignar-li tasques.<\/p>\n            <\/div>\n\n            <div class=\"bg-white rounded-[2rem] shadow-xl border border-gray-100 overflow-hidden bg-card\">\n                <!-- Cap\u00e7alera del perfil amb avatar -->\n                <div class=\"bg-gradient-to-r from-orange-50 to-amber-50 p-8 flex flex-col sm:flex-row items-center sm:items-start gap-6 border-b border-orange-100\">\n                    <div class=\"relative\">\n                        <div class=\"w-32 h-32 rounded-full border-4 border-white shadow-lg bg-white overflow-hidden flex-shrink-0\">\n                            <img decoding=\"async\" id=\"char-avatar-img\" src=\"\" alt=\"Avatar\" class=\"w-full h-full object-cover\">\n                        <\/div>\n                        <div class=\"absolute -bottom-2 -right-2 bg-white p-2 rounded-full shadow-md\">\n                            <span class=\"text-xl\" id=\"char-icon\">\ud83e\udde0<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"text-center sm:text-left pt-2\">\n                        <h3 id=\"char-name\" class=\"text-3xl font-extrabold text-gray-900\">Nom<\/h3>\n                        <p id=\"char-role\" class=\"text-lg font-medium text-[#FB8B23] mt-1\">C\u00e0rrec<\/p>\n                        <span id=\"char-neuro-badge\" class=\"inline-block mt-3 bg-white px-3 py-1.5 rounded-lg text-sm font-bold text-gray-700 shadow-sm border border-gray-200\">\n                            Perfil Neurodivergent\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Dades estructurades -->\n                <div class=\"p-8 grid grid-cols-1 md:grid-cols-2 gap-6\">\n                    <div class=\"bg-gray-50 p-5 rounded-2xl\">\n                        <div class=\"flex items-center space-x-2 mb-2\">\n                            <span class=\"text-xl\">\u2b50<\/span>\n                            <h4 class=\"font-bold text-gray-900\">Estil i Punts Forts<\/h4>\n                        <\/div>\n                        <p id=\"char-style\" class=\"text-gray-600 text-sm leading-relaxed\"><\/p>\n                    <\/div>\n                    <div class=\"bg-gray-50 p-5 rounded-2xl\">\n                        <div class=\"flex items-center space-x-2 mb-2\">\n                            <span class=\"text-xl\">\u2699\ufe0f<\/span>\n                            <h4 class=\"font-bold text-gray-900\">Processament<\/h4>\n                        <\/div>\n                        <p id=\"char-processing\" class=\"text-gray-600 text-sm leading-relaxed\"><\/p>\n                    <\/div>\n                    <div class=\"bg-gray-50 p-5 rounded-2xl md:col-span-2\">\n                        <div class=\"flex items-center space-x-2 mb-2\">\n                            <span class=\"text-xl\">\ud83c\udfa7<\/span>\n                            <h4 class=\"font-bold text-gray-900\">Sensibilitat a l&#8217;Entorn<\/h4>\n                        <\/div>\n                        <p id=\"char-sensory\" class=\"text-gray-600 text-sm leading-relaxed\"><\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"mt-8 text-center animate-fade-in delay-200\">\n                <button onclick=\"goToScenario()\" class=\"bg-gray-900 hover:bg-gray-800 text-white px-8 py-4 rounded-xl font-bold shadow-lg transition transform hover:-translate-y-1 cursor-pointer flex items-center justify-center mx-auto space-x-2\">\n                    <span>Avan\u00e7ar a la situaci\u00f3 laboral<\/span>\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- ============================================== -->\n        <!-- PANTALLA 3: SITUACI\u00d3 I DECISI\u00d3 (PAS 2)         -->\n        <!-- ============================================== -->\n        <section id=\"screen-scenario\" class=\"hidden-screen w-full max-w-4xl animate-fade-in\">\n            <div class=\"flex justify-between items-end mb-6\">\n                <div>\n                    <span class=\"text-sm font-bold text-[#FB8B23] uppercase tracking-widest\">2. Situaci\u00f3 i Diagn\u00f2stic<\/span>\n                    <h2 class=\"text-3xl font-extrabold text-gray-900 mt-2\" id=\"scenario-title\">T\u00edtol del cas<\/h2>\n                <\/div>\n                <div class=\"hidden md:flex items-center space-x-3 bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-100\">\n                    <img decoding=\"async\" id=\"scenario-avatar-mini\" src=\"\" class=\"w-10 h-10 rounded-full border border-gray-200\">\n                    <div>\n                        <p class=\"text-xs text-gray-400 font-bold uppercase\">Afectat\/da<\/p>\n                        <p id=\"scenario-name-mini\" class=\"text-sm font-bold text-gray-900\"><\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 lg:grid-cols-5 gap-6\">\n                <!-- Columna Esquerra: El context i la simulaci\u00f3 -->\n                <div class=\"lg:col-span-3 space-y-6\">\n                    <div class=\"bg-white p-6 md:p-8 rounded-[2rem] shadow-xl border border-gray-100 bg-card relative overflow-hidden\" id=\"simulation-container\">\n                        <p id=\"scenario-desc\" class=\"text-gray-600 mb-5 leading-relaxed text-lg\"><\/p>\n                        \n                        <!-- Finestra que emula el text real -->\n                        <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200 font-mono text-sm text-slate-800 shadow-inner relative z-10\" id=\"workspace-text-container\">\n                            <div class=\"text-xs text-slate-400 mb-3 border-b border-slate-200 pb-2 flex justify-between font-sans font-medium uppercase tracking-wider\">\n                                <span>B\u00fastia d&#8217;entrada interna<\/span>\n                                <span>10:42 AM<\/span>\n                            <\/div>\n                            <p id=\"workspace-text-body\" class=\"leading-relaxed whitespace-pre-line text-base\"><\/p>\n                        <\/div>\n                        \n                        <!-- Bot\u00f3 Simulaci\u00f3 -->\n                        <div class=\"mt-6 flex justify-between items-center bg-blue-50 p-4 rounded-xl border border-blue-100\">\n                            <div class=\"flex-1 mr-4 text-sm text-blue-800 font-medium\">\n                                \ud83d\udc49 Fes clic per entendre com processa aquesta informaci\u00f3 aquest perfil en moments d&#8217;estr\u00e8s:\n                            <\/div>\n                            <button onclick=\"toggleSimulationEffect()\" id=\"btn-toggle-sim\" class=\"bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-md hover:bg-blue-700 transition flex-shrink-0 cursor-pointer\">\n                                Activar Immersi\u00f3\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Columna Dreta: Decisions -->\n                <div class=\"lg:col-span-2 space-y-4\">\n                    <div class=\"bg-gray-900 p-5 rounded-2xl text-white shadow-lg\">\n                        <p class=\"font-bold flex items-center mb-1\">\n                            <span class=\"text-xl mr-2\">\ud83c\udfaf<\/span> Quina mesura aplicar\u00e0s?\n                        <\/p>\n                        <p class=\"text-gray-400 text-sm\">Tria l&#8217;opci\u00f3 que fomenti millor l&#8217;accessibilitat cognitiva.<\/p>\n                    <\/div>\n\n                    <div id=\"options-container\" class=\"space-y-4\">\n                        <!-- Botons de decisi\u00f3 din\u00e0mics -->\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"mt-6 text-left\">\n                <button onclick=\"showScreen('screen-profile')\" class=\"text-gray-500 hover:text-gray-800 font-bold transition flex items-center space-x-1 cursor-pointer\">\n                    <span>\u2190 Tornar al perfil<\/span>\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- ============================================== -->\n        <!-- PANTALLA 4: FEEDBACK (PAS 3)                   -->\n        <!-- ============================================== -->\n        <section id=\"screen-feedback\" class=\"hidden-screen w-full max-w-2xl bg-white p-10 rounded-[2rem] shadow-2xl border border-gray-100 text-center animate-fade-in mx-auto\">\n            \n            <div id=\"feedback-icon\" class=\"text-6xl mb-4\"><\/div>\n            <span id=\"feedback-badge\" class=\"px-4 py-1.5 rounded-full text-sm font-extrabold uppercase tracking-widest inline-block mb-4\"><\/span>\n            \n            <h2 id=\"feedback-title\" class=\"text-3xl font-extrabold text-gray-900 mb-6\">Resultat de la teva decisi\u00f3<\/h2>\n            \n            <p id=\"feedback-text\" class=\"text-gray-700 text-lg leading-relaxed mb-8 bg-gray-50 p-6 rounded-2xl border border-gray-100 text-left\"><\/p>\n            \n            <div class=\"bg-amber-50 p-6 rounded-2xl border border-amber-200 text-left mb-8 flex items-start space-x-4\">\n                <span class=\"text-3xl\">\ud83d\udca1<\/span>\n                <div>\n                    <h4 class=\"font-bold text-amber-900 mb-1\">Clau de Gesti\u00f3 Pime:<\/h4>\n                    <p id=\"feedback-tip\" class=\"text-amber-800 text-sm leading-relaxed\"><\/p>\n                <\/div>\n            <\/div>\n\n            <button onclick=\"goToProgress()\" class=\"bg-gray-900 hover:bg-gray-800 text-white w-full px-8 py-4 rounded-xl font-bold text-lg shadow-lg transition transform hover:-translate-y-1 cursor-pointer\">\n                Veure Impacte a l&#8217;Empresa\n            <\/button>\n        <\/section>\n\n        <!-- ============================================== -->\n        <!-- PANTALLA 5: PROGR\u00c9S I M\u00c8TRIQUES (PAS 4)        -->\n        <!-- ============================================== -->\n        <section id=\"screen-progress\" class=\"hidden-screen w-full max-w-4xl animate-fade-in\">\n            <div class=\"text-center mb-8\">\n                <span class=\"text-sm font-bold text-[#FB8B23] uppercase tracking-widest\">Panell de Gesti\u00f3<\/span>\n                <h2 class=\"text-3xl font-extrabold text-gray-900 mt-2\">Impacte Organitzatiu<\/h2>\n                <p class=\"text-gray-500 mt-2\">Aix\u00ed evolucionen les m\u00e8triques de la teva empresa segons les decisions preses.<\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 bg-white p-8 rounded-[2rem] shadow-xl border border-gray-100 bg-card mb-8\">\n                \n                <!-- M\u00e8trica 1 -->\n                <div class=\"p-4 bg-gray-50 rounded-2xl\">\n                    <div class=\"flex justify-between items-end mb-2\">\n                        <div class=\"flex items-center space-x-2\">\n                            <span class=\"text-2xl\">\ud83e\udd1d<\/span>\n                            <span class=\"text-sm font-bold text-gray-700 uppercase\">Inclusi\u00f3 Global<\/span>\n                        <\/div>\n                        <span id=\"val-inclusion\" class=\"text-2xl font-black text-emerald-600\">50%<\/span>\n                    <\/div>\n                    <div class=\"w-full bg-gray-200 h-3 rounded-full overflow-hidden\">\n                        <div id=\"bar-inclusion\" class=\"bg-emerald-500 h-full transition-all duration-1000 ease-out\" style=\"width: 0%;\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- M\u00e8trica 2 -->\n                <div class=\"p-4 bg-gray-50 rounded-2xl\">\n                    <div class=\"flex justify-between items-end mb-2\">\n                        <div class=\"flex items-center space-x-2\">\n                            <span class=\"text-2xl\">\ud83d\udcd6<\/span>\n                            <span class=\"text-sm font-bold text-gray-700 uppercase\">Claredat de Tasques<\/span>\n                        <\/div>\n                        <span id=\"val-clarity\" class=\"text-2xl font-black text-blue-600\">45%<\/span>\n                    <\/div>\n                    <div class=\"w-full bg-gray-200 h-3 rounded-full overflow-hidden\">\n                        <div id=\"bar-clarity\" class=\"bg-blue-500 h-full transition-all duration-1000 ease-out delay-100\" style=\"width: 0%;\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- M\u00e8trica 3 -->\n                <div class=\"p-4 bg-gray-50 rounded-2xl\">\n                    <div class=\"flex justify-between items-end mb-2\">\n                        <div class=\"flex items-center space-x-2\">\n                            <span class=\"text-2xl\">\ud83d\ude0a<\/span>\n                            <span class=\"text-sm font-bold text-gray-700 uppercase\">Benestar de l&#8217;Equip<\/span>\n                        <\/div>\n                        <span id=\"val-wellbeing\" class=\"text-2xl font-black text-[#FB8B23]\">55%<\/span>\n                    <\/div>\n                    <div class=\"w-full bg-gray-200 h-3 rounded-full overflow-hidden\">\n                        <div id=\"bar-wellbeing\" class=\"bg-gradient-to-r from-[#FB8B23] to-[#FFBD59] h-full transition-all duration-1000 ease-out delay-200\" style=\"width: 0%;\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- M\u00e8trica 4 -->\n                <div class=\"p-4 bg-gray-50 rounded-2xl\">\n                    <div class=\"flex justify-between items-end mb-2\">\n                        <div class=\"flex items-center space-x-2\">\n                            <span class=\"text-2xl\">\ud83d\udcc8<\/span>\n                            <span class=\"text-sm font-bold text-gray-700 uppercase\">Efici\u00e8ncia Operativa<\/span>\n                        <\/div>\n                        <span id=\"val-productivity\" class=\"text-2xl font-black text-purple-600\">60%<\/span>\n                    <\/div>\n                    <div class=\"w-full bg-gray-200 h-3 rounded-full overflow-hidden\">\n                        <div id=\"bar-productivity\" class=\"bg-purple-500 h-full transition-all duration-1000 ease-out delay-300\" style=\"width: 0%;\"><\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Punts globals -->\n                <div class=\"md:col-span-2 mt-4 pt-6 border-t border-gray-200 flex justify-between items-center px-4\">\n                    <span class=\"text-gray-500 font-bold uppercase tracking-wider text-sm\">Puntuaci\u00f3 Acumulada<\/span>\n                    <span id=\"score-display\" class=\"text-3xl font-black text-gray-900\">0 <span class=\"text-base text-gray-400 font-bold\">pts<\/span><\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"text-center\">\n                <button onclick=\"advanceLevel()\" id=\"btn-progress-next\" class=\"bg-[#FB8B23] hover:bg-[#e07516] text-white px-10 py-4 rounded-xl font-bold text-lg shadow-lg shadow-orange-500\/30 transition transform hover:-translate-y-1 cursor-pointer inline-flex items-center space-x-2\">\n                    <span id=\"text-progress-next\">Preparar seg\u00fcent cas<\/span>\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 5l7 7-7 7M5 5l7 7-7 7\"><\/path><\/svg>\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- ============================================== -->\n        <!-- PANTALLA 6: RESULTATS FINALS                   -->\n        <!-- ============================================== -->\n        <section id=\"screen-results\" class=\"hidden-screen w-full max-w-3xl bg-white p-12 rounded-[2rem] shadow-2xl border border-gray-100 text-center animate-fade-in mx-auto relative overflow-hidden\">\n            <div class=\"absolute top-0 left-0 w-full h-3 bg-gradient-to-r from-emerald-400 to-blue-500\"><\/div>\n            \n            <span class=\"text-6xl block mb-6\">\ud83c\udfc6<\/span>\n            <h2 class=\"text-4xl font-extrabold mb-4 text-gray-900\">Formaci\u00f3 Completada<\/h2>\n            <p class=\"text-gray-500 mb-10 text-lg\">Has demostrat lideratge inclusiu aplicant estrat\u00e8gies estructurals reals. Aquests s\u00f3n els teus resultats globals:<\/p>\n            \n            <div class=\"grid grid-cols-2 gap-4 mb-10 text-left\">\n                <div class=\"p-6 bg-gray-50 rounded-2xl border border-gray-100 flex items-center space-x-4\">\n                    <div class=\"w-14 h-14 rounded-full bg-emerald-100 flex items-center justify-center text-2xl\">\ud83e\udd1d<\/div>\n                    <div>\n                        <span class=\"text-xs text-gray-400 font-bold block uppercase\">Inclusi\u00f3 Final<\/span>\n                        <span id=\"res-inclusion\" class=\"text-3xl font-black text-emerald-600 block\">&#8211;<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"p-6 bg-gray-50 rounded-2xl border border-gray-100 flex items-center space-x-4\">\n                    <div class=\"w-14 h-14 rounded-full bg-[#FB8B23]\/20 flex items-center justify-center text-2xl\">\ud83d\ude0a<\/div>\n                    <div>\n                        <span class=\"text-xs text-gray-400 font-bold block uppercase\">Benestar Global<\/span>\n                        <span id=\"res-wellbeing\" class=\"text-3xl font-black text-[#FB8B23] block\">&#8211;<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"bg-slate-50 p-8 rounded-2xl border border-slate-200 text-left mb-10 relative\">\n                <span class=\"absolute top-[-15px] left-8 bg-slate-800 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider\">Conclusi\u00f3 Corporativa<\/span>\n                <p class=\"text-slate-700 leading-relaxed font-medium\">\n                    L&#8217;accessibilitat cognitiva no beneficia nom\u00e9s un perfil concret, sin\u00f3 que optimitza tota la Pime. En reduir les ambig\u00fcitats i fragmentar objectius s&#8217;elimina la frustraci\u00f3, es redueix la baixa per estr\u00e8s i es fidelitza el talent. <strong>Una comunicaci\u00f3 clara \u00e9s rendibilitat.<\/strong>\n                <\/p>\n            <\/div>\n\n            <button onclick=\"location.reload()\" class=\"bg-gray-900 hover:bg-gray-800 text-white px-10 py-4 rounded-xl font-bold text-lg shadow-xl transition transform hover:-translate-y-1 cursor-pointer\">\n                Reiniciar Simulador\n            <\/button>\n        <\/section>\n\n    <\/main>\n\n    <!-- ENGINE (JAVASCRIPT) -->\n    <script>\n        \/\/ --- BASE DE DADES (Pools) ---\n        const NAMES_POOL = [\"Marc\", \"Laia\", \"Jordi\", \"Mireia\", \"Pol\", \"Anna\", \"Xavier\", \"S\u00edlvia\", \"Pau\", \"Clara\"];\n        \n        const ROLES_POOL = [\n            { title: \"Desenvolupador\/a\", dept: \"Tecnologia\" },\n            { title: \"T\u00e8cnic\/a de Gesti\u00f3\", dept: \"Administraci\u00f3\" },\n            { title: \"Especialista M\u00e0rqueting\", dept: \"Comercial\" },\n            { title: \"Dissenyador\/a UX\", dept: \"Creatiu\" },\n            { title: \"Coordinador\/a\", dept: \"Operacions\" }\n        ];\n\n        const NEURO_PROFILES = [\n            {\n                type: \"Disl\u00e8xia\", icon: \"\ud83d\udcd6\",\n                style: \"Pensament altament visual, excel\u00b7lent resoluci\u00f3 de problemes complexos i visi\u00f3 de conjunt.\",\n                processing: \"Necessita m\u00e9s temps per descodificar estructures de text denses o tipografies complexes i amuntegades.\",\n                sensory: \"Est\u00e0ndard, per\u00f2 la fatiga lectora incrementa r\u00e0pidament el nivell de frustraci\u00f3 general si no hi ha ordre visual.\",\n                simulationType: \"dyslexia\"\n            },\n            {\n                type: \"TDAH\", icon: \"\u26a1\",\n                style: \"Gran dinamisme, creativitat desbordant i capacitat d'hiperfocus quan el tema motiva profundament.\",\n                processing: \"Presenta dificultats per iniciar tasques mon\u00f2tones o instruccions llargues sense fites interm\u00e8dies a curt termini.\",\n                sensory: \"Alta sensibilitat a les distraccions ambientals (notificacions, sorolls creuats, interrupcions).\",\n                simulationType: \"adhd\"\n            },\n            {\n                type: \"Autisme (TEA)\", icon: \"\ud83e\udde9\",\n                style: \"Precisi\u00f3 t\u00e8cnica molt alta, honestedat professional, rigor i capacitat de sistematitzaci\u00f3 l\u00f2gica.\",\n                processing: \"Processa la informaci\u00f3 de manera literal. Requereix claredat expl\u00edcita sense dobles sentits, ironies o ambig\u00fcitats.\",\n                sensory: \"Hipersensibilitat sensorial. La sobrec\u00e0rrega de dades o sorolls col\u00b7lapsa la seva energia r\u00e0pidament.\",\n                simulationType: \"sensory_overload\"\n            }\n        ];\n\n        const SCENARIO_TEMPLATES = [\n            {\n                title: \"Instruccions ambig\u00fces urgents\",\n                desc: \"La direcci\u00f3 envia una ordre de treball per correu. El text no t\u00e9 salts de l\u00ednia, ni terminis exactes, ni ordre de prioritats per a {name}.\",\n                rawText: \"Hola equip, cal revisar l'entrega de la setmana que ve com m\u00e9s aviat millor perqu\u00e8 el client est\u00e0 una mica nervi\u00f3s. Canvieu all\u00f2 de la interf\u00edcie que vam parlar l'altre dia a la cuina i mireu si les dades quadren amb el que vol l'\u00c0lex. Envieu-m'ho quan estigui llest, gr\u00e0cies!\",\n                options: [\n                    {\n                        text: \"Fragmentar el correu en una llista de control de tasques ordenades amb dates clares.\",\n                        points: 25, inclusion: 20, clarity: 30, wellbeing: 15, productivity: 25, status: \"success\",\n                        feedback: \"Has convertit el caos en estructura. Una llista de pas a pas elimina l'estr\u00e8s de la interpretaci\u00f3 de dobles sentits i permet enfocar-se en l'execuci\u00f3.\",\n                        tip: \"Converteix sempre els acords de 'passad\u00eds o cuina' en formats escrits estructurats.\"\n                    },\n                    {\n                        text: \"Fer una videotrucada sorpresa amb tothom per explicar-ho de viva veu.\",\n                        points: 10, inclusion: -10, clarity: 5, wellbeing: -15, productivity: -5, status: \"warning\",\n                        feedback: \"Una reuni\u00f3 imprevista sense documentaci\u00f3 pr\u00e8via afegeix pressi\u00f3 i sobrec\u00e0rrega auditiva a perfils que necessiten predictibilitat temporal.\",\n                        tip: \"Evita les reunions improvisades excepte si \u00e9s una emerg\u00e8ncia cr\u00edtica real.\"\n                    },\n                    {\n                        text: \"Demanar a la persona que comenci per on cregui i que pregunti si es bloqueja.\",\n                        points: 5, inclusion: -5, clarity: -10, wellbeing: -10, productivity: -10, status: \"danger\",\n                        feedback: \"Delegar la interpretaci\u00f3 d'una tasca ambigua \u00e9s descarregar la teva responsabilitat directiva en l'empleat, augmentant la seva fatiga cognitiva.\",\n                        tip: \"La claredat \u00e9s responsabilitat de qui emet el missatge.\"\n                    }\n                ]\n            },\n            {\n                title: \"Canvi imprevist de programari\",\n                desc: \"S'ha modificat l'eina CRM d'un dia per l'altre sense preav\u00eds i s'ha enviat a {name} un manual dens.\",\n                rawText: \"\u26a0\ufe0f ATENCI\u00d3: Des d'avui ja no es fa servir l'antiga plataforma. Teniu el nou programari activat. Adjuntem el manual d'\u00fas adjunt de 60 p\u00e0gines. Si us plau, reviseu-lo durant el mat\u00ed per no aturar el ritme.\",\n                options: [\n                    {\n                        text: \"Crear una mini-guia visual d'un sol full amb els 4 passos essencials i donar un marge d'adaptaci\u00f3.\",\n                        points: 25, inclusion: 25, clarity: 25, wellbeing: 20, productivity: 20, status: \"success\",\n                        feedback: \"L'accessibilitat cognitiva significa reduir el soroll. Una guia visual directa alleuja l'ansietat davant dels canvis i millora r\u00e0pidament l'adopci\u00f3 tecnol\u00f2gica.\",\n                        tip: \"Davant d'un canvi sist\u00e8mic estructural, sintetitza visualment la informaci\u00f3.\"\n                    },\n                    {\n                        text: \"Obrir un xat grupal no moderat perqu\u00e8 tothom posi els seus dubtes lliurement.\",\n                        points: 10, inclusion: 5, clarity: -5, wellbeing: -10, productivity: 5, status: \"warning\",\n                        feedback: \"Els canals de xat massius generen dispersi\u00f3 d'est\u00edmuls, notificacions constants i dificulten trobar la informaci\u00f3 rellevant.\",\n                        tip: \"Estableix un \u00fanic lloc centralitzat (tipus FAQ) per als dubtes recurrents.\"\n                    },\n                    {\n                        text: \"Exigir lectura individual del manual i mesurar qui triga m\u00e9s en adaptar-se.\",\n                        points: 0, inclusion: -20, clarity: -15, wellbeing: -25, productivity: -15, status: \"danger\",\n                        feedback: \"Obligar a pair grans volums de text sota pressi\u00f3 de temps penalitza brutalment les persones amb disl\u00e8xia o TEA.\",\n                        tip: \"No facis de la comprensi\u00f3 lectora sota estr\u00e8s un filtre excloent.\"\n                    }\n                ]\n            }\n        ];\n\n        \/\/ --- ESTAT DEL JOC ---\n        let state = {\n            level: 1,\n            maxLevels: 2, \/\/ Ajustat a 2 pels exemples\n            score: 0,\n            metrics: { inclusion: 50, clarity: 45, wellbeing: 55, productivity: 60 },\n            char: null,\n            scenario: null,\n            simActive: false,\n            simInterval: null,\n            fontSizeLarge: false\n        };\n\n        \/\/ --- SISTEMA DE NAVEGACI\u00d3 (Single Page) ---\n        function showScreen(id) {\n            document.querySelectorAll('section').forEach(sec => sec.classList.add('hidden-screen'));\n            \n            const screen = document.getElementById(id);\n            screen.classList.remove('hidden-screen');\n            \n            \/\/ Forcem el reinici de l'animaci\u00f3 traient i posant la classe\n            screen.classList.remove('animate-fade-in');\n            void screen.offsetWidth; \/\/ truca al reflow\n            screen.classList.add('animate-fade-in');\n        }\n\n        \/\/ --- ACCESSIBILITAT UI ---\n        function toggleHighContrast() { document.body.classList.toggle('high-contrast'); }\n        function toggleFontSize() {\n            state.fontSizeLarge = !state.fontSizeLarge;\n            document.getElementById('workspace-text-body').style.fontSize = state.fontSizeLarge ? '1.25rem' : '1rem';\n        }\n\n        \/\/ --- L\u00d2GICA PRINCIPAL ---\n        function initGame() {\n            state.level = 1;\n            state.score = 0;\n            state.metrics = { inclusion: 50, clarity: 45, wellbeing: 55, productivity: 60 };\n            loadLevel();\n        }\n\n        function loadLevel() {\n            stopSimulation();\n\n            \/\/ 1. Generar Dades\n            const name = NAMES_POOL[Math.floor(Math.random() * NAMES_POOL.length)];\n            const role = ROLES_POOL[Math.floor(Math.random() * ROLES_POOL.length)];\n            const prof = NEURO_PROFILES[Math.floor(Math.random() * NEURO_PROFILES.length)];\n\n            \/\/ Generem un Avatar maco i hum\u00e0 amb DiceBear (estil 'micah')\n            const seed = Math.random().toString(36).substring(7);\n            const avatarUrl = `https:\/\/api.dicebear.com\/8.x\/micah\/svg?seed=${name}${seed}&backgroundColor=transparent`;\n\n            state.char = { name, role: `${role.title} (${role.dept})`, avatarUrl, ...prof };\n\n            const rawScen = SCENARIO_TEMPLATES[(state.level - 1) % SCENARIO_TEMPLATES.length];\n            state.scenario = JSON.parse(JSON.stringify(rawScen));\n            state.scenario.desc = state.scenario.desc.replace(\"{name}\", name);\n\n            \/\/ 2. Poblar Pantalla: Perfil\n            document.getElementById('step-indicator-1').innerText = `Cas ${state.level} de ${state.maxLevels}`;\n            document.getElementById('char-avatar-img').src = avatarUrl;\n            document.getElementById('char-name').innerText = name;\n            document.getElementById('char-role').innerText = state.char.role;\n            document.getElementById('char-neuro-badge').innerText = prof.type;\n            document.getElementById('char-icon').innerText = prof.icon;\n            document.getElementById('char-style').innerText = prof.style;\n            document.getElementById('char-processing').innerText = prof.processing;\n            document.getElementById('char-sensory').innerText = prof.sensory;\n\n            \/\/ 3. Poblar Pantalla: Situaci\u00f3\n            document.getElementById('scenario-avatar-mini').src = avatarUrl;\n            document.getElementById('scenario-name-mini').innerText = name;\n            document.getElementById('scenario-title').innerText = state.scenario.title;\n            document.getElementById('scenario-desc').innerText = state.scenario.desc;\n            document.getElementById('workspace-text-body').innerText = state.scenario.rawText;\n\n            \/\/ Botons de decisi\u00f3 aleatoris\n            const optsContainer = document.getElementById('options-container');\n            optsContainer.innerHTML = \"\";\n            const shuffledOpts = [...state.scenario.options].sort(() => Math.random() - 0.5);\n            \n            shuffledOpts.forEach((opt) => {\n                const btn = document.createElement('button');\n                btn.className = \"w-full text-left p-5 rounded-2xl border-2 border-transparent bg-white hover:border-[#FFBD59] hover:shadow-lg transition duration-200 text-sm font-medium text-gray-800 flex items-start space-x-4 cursor-pointer shadow-sm\";\n                btn.innerHTML = `<div class=\"mt-0.5 w-5 h-5 rounded-full border-2 border-gray-300 flex-shrink-0\"><\/div><span class=\"text-base leading-snug\">${opt.text}<\/span>`;\n                btn.onclick = () => processDecision(opt);\n                optsContainer.appendChild(btn);\n            });\n\n            \/\/ Anar a la primera pantalla\n            showScreen('screen-profile');\n        }\n\n        function goToScenario() {\n            showScreen('screen-scenario');\n        }\n\n        \/\/ --- SIMULACI\u00d3 VISUAL ---\n        function toggleSimulationEffect() {\n            if (state.simActive) stopSimulation();\n            else startSimulation();\n        }\n\n        function startSimulation() {\n            state.simActive = true;\n            const btn = document.getElementById('btn-toggle-sim');\n            btn.innerText = \"\ud83d\uded1 Desactivar Immersi\u00f3\";\n            btn.classList.replace('bg-blue-600', 'bg-rose-600');\n            btn.classList.replace('hover:bg-blue-700', 'hover:bg-rose-700');\n\n            const textEl = document.getElementById('workspace-text-body');\n            const cont = document.getElementById('workspace-text-container');\n            const type = state.char.simulationType;\n            const origText = state.scenario.rawText;\n\n            if (type === \"dyslexia\") {\n                state.simInterval = setInterval(() => {\n                    let words = origText.split(\" \");\n                    textEl.innerText = words.map(w => {\n                        if (w.length > 4 && Math.random() > 0.5) {\n                            let chars = w.split(\"\");\n                            let idx = 1 + Math.floor(Math.random() * (chars.length - 3));\n                            [chars[idx], chars[idx+1]] = [chars[idx+1], chars[idx]];\n                            return chars.join(\"\");\n                        }\n                        return w;\n                    }).join(\" \");\n                }, 400);\n            } \n            else if (type === \"adhd\") {\n                cont.classList.add('sensory-overload-active');\n                const words = [\"Notificaci\u00f3 Slack\", \"Mail Urgent\", \"Reuni\u00f3 en 5m\", \"Soroll Obres\", \"M\u00f2bil vibrant\"];\n                state.simInterval = setInterval(() => {\n                    const el = document.createElement('div');\n                    el.className = \"distraction-element\";\n                    el.innerText = `\u26a0\ufe0f ${words[Math.floor(Math.random() * words.length)]}`;\n                    el.style.left = `${10 + Math.random() * 70}%`;\n                    el.style.top = `${10 + Math.random() * 80}%`;\n                    cont.appendChild(el);\n                    setTimeout(() => el.remove(), 3500);\n                }, 800);\n            } \n            else if (type === \"sensory_overload\") {\n                cont.classList.add('sensory-overload-active');\n                textEl.style.fontWeight = \"bold\";\n                textEl.style.letterSpacing = \"-0.5px\";\n                state.simInterval = setInterval(() => {\n                    textEl.style.opacity = textEl.style.opacity === \"0.8\" ? \"1\" : \"0.8\";\n                }, 300);\n            }\n        }\n\n        function stopSimulation() {\n            state.simActive = false;\n            if (state.simInterval) clearInterval(state.simInterval);\n            \n            const btn = document.getElementById('btn-toggle-sim');\n            if(btn) {\n                btn.innerText = \"Activar Immersi\u00f3\";\n                btn.classList.replace('bg-rose-600', 'bg-blue-600');\n                btn.classList.replace('hover:bg-rose-700', 'hover:bg-blue-700');\n            }\n\n            const cont = document.getElementById('workspace-text-container');\n            const textEl = document.getElementById('workspace-text-body');\n            if(cont) cont.classList.remove('sensory-overload-active');\n            if(textEl) {\n                textEl.innerText = state.scenario ? state.scenario.rawText : \"\";\n                textEl.style.fontWeight = \"normal\";\n                textEl.style.letterSpacing = \"normal\";\n                textEl.style.opacity = \"1\";\n            }\n            document.querySelectorAll('.distraction-element').forEach(e => e.remove());\n        }\n\n        \/\/ --- PROCESSAMENT DE LA DECISI\u00d3 ---\n        function processDecision(opt) {\n            stopSimulation();\n\n            \/\/ Actualitzar estat\n            state.score += opt.points;\n            ['inclusion', 'clarity', 'wellbeing', 'productivity'].forEach(m => {\n                state.metrics[m] = Math.max(0, Math.min(100, state.metrics[m] + opt[m]));\n            });\n\n            \/\/ Preparar Feedback (Pas 3)\n            const badge = document.getElementById('feedback-badge');\n            const icon = document.getElementById('feedback-icon');\n            \n            if (opt.status === \"success\") {\n                badge.innerText = \"Estrat\u00e8gia Excel\u00b7lent\";\n                badge.className = \"px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-emerald-100 text-emerald-800\";\n                icon.innerText = \"\ud83c\udf1f\";\n            } else if (opt.status === \"warning\") {\n                badge.innerText = \"Soluci\u00f3 Incompleta\";\n                badge.className = \"px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-100 text-amber-800\";\n                icon.innerText = \"\u26a0\ufe0f\";\n            } else {\n                badge.innerText = \"Barrera Generada\";\n                badge.className = \"px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-rose-100 text-rose-800\";\n                icon.innerText = \"\u274c\";\n            }\n\n            document.getElementById('feedback-text').innerText = opt.feedback;\n            document.getElementById('feedback-tip').innerText = opt.tip;\n\n            showScreen('screen-feedback');\n        }\n\n        function goToProgress() {\n            \/\/ Preparar Progr\u00e9s (Pas 4)\n            document.getElementById('val-inclusion').innerText = `${state.metrics.inclusion}%`;\n            document.getElementById('val-clarity').innerText = `${state.metrics.clarity}%`;\n            document.getElementById('val-wellbeing').innerText = `${state.metrics.wellbeing}%`;\n            document.getElementById('val-productivity').innerText = `${state.metrics.productivity}%`;\n            document.getElementById('score-display').innerHTML = `${state.score} <span class=\"text-base text-gray-400 font-bold\">pts<\/span>`;\n\n            \/\/ Text del bot\u00f3\n            const btnText = document.getElementById('text-progress-next');\n            if (state.level >= state.maxLevels) {\n                btnText.innerText = \"Veure Informe Final\";\n            } else {\n                btnText.innerText = \"Preparar seg\u00fcent cas\";\n            }\n\n            showScreen('screen-progress');\n            \n            \/\/ Animar barres amb un petit delay perqu\u00e8 es vegi el canvi\n            setTimeout(() => {\n                document.getElementById('bar-inclusion').style.width = `${state.metrics.inclusion}%`;\n                document.getElementById('bar-clarity').style.width = `${state.metrics.clarity}%`;\n                document.getElementById('bar-wellbeing').style.width = `${state.metrics.wellbeing}%`;\n                document.getElementById('bar-productivity').style.width = `${state.metrics.productivity}%`;\n            }, 300);\n        }\n\n        function advanceLevel() {\n            \/\/ Netejar amples de barres per a la propera animaci\u00f3\n            ['inclusion', 'clarity', 'wellbeing', 'productivity'].forEach(m => {\n                document.getElementById(`bar-${m}`).style.width = \"0%\";\n            });\n\n            if (state.level >= state.maxLevels) {\n                document.getElementById('res-inclusion').innerText = `${state.metrics.inclusion}%`;\n                document.getElementById('res-wellbeing').innerText = `${state.metrics.wellbeing}%`;\n                showScreen('screen-results');\n            } else {\n                state.level++;\n                loadLevel();\n            }\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Creat per Camila Luna, alumna del M\u00e0ster de redacci\u00f3 en continguts digital de l&#8217;IFEB<\/mark>. &nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-center\">Finan\u00e7at pel Ministerio de Educaci\u00f3n, Formaci\u00f3n Profesional y Deportes i cofinan\u00e7at per la Uni\u00f3 Europea.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sinergia Inclusiva: Simulador per a Pimes i SinergiaInclusiva Simulador Pimes \ud83d\udc41\ufe0f Contrast A+ Mida Formaci\u00f3 Immersiva La neuroinclusi\u00f3 \u00e9s el motor del talent Assumeix el rol d&#8217;Assessor\/a de Comunicaci\u00f3. Observa, analitza la barrera cognitiva i pren la decisi\u00f3 adequada per millorar el benestar i la productivitat de l&#8217;equip. \ud83e\uddd1\u200d\ud83d\udcbc Coneix l&#8217;equip Descobreix perfils realistes i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2563,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/posts\/2540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/comments?post=2540"}],"version-history":[{"count":6,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/posts\/2540\/revisions"}],"predecessor-version":[{"id":2574,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/posts\/2540\/revisions\/2574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/media\/2563"}],"wp:attachment":[{"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/media?parent=2540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/categories?post=2540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ifeb\/wp-json\/wp\/v2\/tags?post=2540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}