pack de iconos

2026-09-06 17:30:26 -03:00
parent 0c6ab596b4
commit 6fe731fd0d
5 changed files with 934 additions and 248 deletions
@@ -0,0 +1,129 @@
+# AGENTS.md - Directrices para el Agente
+
+## Preferencias de Comportamiento
+
+- **Idioma**: Responder siempre en español.
+- **Commits**: Redactar en inglés, usando `feat:`, `fix:`, `docs:`, `style:`, `refactor:`, `test:`, `chore:`
+- **Seguridad**: Nunca modificar archivos sin confirmación previa
+- **Proactividad**: Sugerir mejoras durante análisis del código
+
+## Stack Tecnológico Habitual (Backend)
+
+- **Lenguaje**: Python 3.10+
+- **Framework (POR DEFECTO)**: Django
+- **Alternativa**: FastAPI (solo si solicitado)
+- **Base de datos**: MySQL/InnoDB (PostgreSQL solo si solicitado)
+- **ORM**: Django ORM (SQLAlchemy para FastAPI)
+- **Migraciones**: Django nativo (`makemigrations`/`migrate`, Alembic si es FastAPI)
+
+## Stack Tecnológico Habitual (Frontend y Estilos)
+
+- **Lenguaje**: TypeScript (siempre que haya cliente separada con React/Vue/Angular)
+- **Estilos**: Tailwind CSS (utility-first) sobre CSS puro
+
+## Convenciones de Desarrollo
+
+- **Variables de entorno**: Usar `.env` + `python-dotenv`/`django-environ`, nunca hardcodear credenciales
+- **Dependencias**: Mantener actualizado `requirements.txt` o `pyproject.toml`
+- **Estructura**: Separación clara (configuración, modelos, servicios, utilidades)
+- **Pruebas**: Usar `pytest`/`unittest`, verificar que pasen antes de completar
+- **Manejo de errores**: Middleware personalizado o vistas de error en Django
+
+## Flujo de Trabajo Típico
+
+1. Análisis (leer y entender contexto)
+2. Planificación (proposición paso a paso si es complejo)
+3. Implementación (siguiendo PEP 8/ESLint)
+4. Documentación (actualizar README.md si hay nuevos commandos)
+5. Control de versiones (commits atómicos, ramas `feature/` o `fix/`)
+
+## Instrucciones Específicas para este Repositorio
+
+### Arquitectura General
+
+- **Estructura**: Sitio web estático con HTML/CSS/JS puro (sin frameworks ni build tools)
+- **Componentes Modulares**: Header y footer cargados dinámicamente via `fetch()` (js/main.js:25-60)
+  - **Header**: Incluye botón 'HABLEMOS' y toggle de tema (includes/header.html)
+  - **Footer**: Información de contacto e identificación fiscal (includes/footer.html)
+- **Temas**: Dark/light mode con persistencia usando localStorage (js/main.js:143-183)
+  - Variables CSS en `css/styles.css`:
+    ```css
+    --bg-primary
+    --text-body
+    --ide-primary
+    --ide-dark
+    ```
+  - Toggle actualiza atributo `data-theme` y cambia íconos de logo (js/main.js:150-183)
+
+### Implementación Clave
+
+**Theme Switcher (js/main.js)**:
+```javascript
+// Inicialización (ejecutado al cargar DOM)
+function initTheme() {
+  const savedTheme = localStorage.getItem('ide_theme') || 'light';
+  document.documentElement.setAttribute('data-theme', savedTheme);
+  updateThemeIcon(savedTheme);
+  toggleLogoTheme(savedTheme);
+}
+
+// Toggle (event handler)
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', newTheme);
+  localStorage.setItem('ide_theme', newTheme);
+  updateThemeIcon(newTheme);
+  toggleLogoTheme(newTheme);
+}
+```
+
+**Navegación Móvil**: sistema de drawer con:
+- Botón hamburguesa (abre)
+- Overlay (cierra al hacer clic)
+- Cierre con ESC
+- Enlaces que cierran automáticamente
+- Atributos ARIA para accesibilidad (js/main.js:94-133)
+
+**Cursos Dinámicos**:
+- cargados desde `/data/cursos.json`
+- Fallback con datos mock en `getFallbackCourses()` (js/main.js:608-625)
+- Modales dinámicos para detalles de cursos
+
+### Estructura de directorios clave
+
+```
+project/
+├── includes/
+│   ├── header.html        # Header modular
+│   └── footer.html        # Footer modular
+├── css/
+│   └── styles.css        # Estilos principales (variables `--ide-primary`, `--ide-dark`)
+├── js/
+│   └── main.js           # JavaScript principal (890 líneas)
+├── images/               # Imágenes y logos
+└── data/
+    └── cursos.json       # Datos de cursos
+```
+
+### Páginas principales
+
+- `index.html` - Página inicial con hero y Brújula IDE
+- `soluciones.html` - Soluciones con filtrado dinámico (js/main.js:630-654)
+- `academy.html` - Cursos y formación
+- `desafios.html` - Quiz interactivo (JS embedded)
+- `contacto.html` - Formulario de contacto con AJAX (js/main.js:798-841)
+
+### Funcionalidades destacadas
+
+1. **Sistema de modales**: Pop-ups con cierre por clic externo y tecla ESC (js/main.js:188-243)
+2. **Formularios AJAX**: envío a `/php/send-mail.php` con mensajería de suceso/falla (js/main.js:798-890)
+3. **Feed Insights**: WordPress REST API + fallback de artículos (js/main.js:659-754)
+
+### Notes importantes para el desarrollo
+
+1. **Path corregido**: Usar & y Desarrollo (no Development) en todos los paths
+2. **Sin frameworks**: No hay React, Vue, ni herramientas de build - todo es Vanilla JS
+3. **Fallbacks implementados**: Siempre verificar fallbacks para API y datos remotos
+4. **Persistencia**: El tema se guarda en localStorage (`ide_theme`)
+5. **Testing visual**: Revisar temas dark/light en navegadores moderno
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
+  <!-- balanza -->
+  <symbol id="balanza" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1.46 1.17" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path fill-opacity="0.501961" d="M0.91 0.22c0.06,0 0.15,0 0.21,0 0.04,0 0.07,0.01 0.1,-0.02 0.04,-0.03 0.03,-0.11 -0.03,-0.13 -0.02,0 -0.26,0 -0.31,0 -0.04,-0.05 -0.15,-0.1 -0.23,-0.05 -0.08,0.04 -0.03,0.05 -0.11,0.05 -0.06,0 -0.11,0 -0.16,0 -0.05,0 -0.11,-0.01 -0.14,0.02 -0.03,0.04 -0.03,0.09 0.01,0.12 0.03,0.02 0.22,0.01 0.3,0.01 0.02,0.04 0.02,0.05 0.04,0.08 0.04,0.04 0.05,0.04 0.07,0.05l0 0.67c-0.06,0.02 -0.36,-0.01 -0.41,0.01 -0.05,0.03 -0.04,0.11 0.01,0.14 0.03,0.01 0.79,0 0.89,0 0.05,0 0.07,0 0.09,-0.04 0.02,-0.05 -0.01,-0.08 -0.03,-0.1 -0.05,-0.02 -0.32,0.01 -0.4,-0.01l0 -0.67c0.01,-0.01 0.02,-0.01 0.03,-0.02 0.04,-0.02 0.06,-0.06 0.07,-0.11z"/><path d="M0.13 0.73c0,-0.01 0.15,-0.27 0.16,-0.27 0.01,0.01 0.16,0.26 0.16,0.27l-0.32 0zm-0.13 0.04c0.02,0.08 0.09,0.13 0.16,0.16 0.17,0.06 0.38,-0.01 0.42,-0.15 0.01,-0.05 -0.02,-0.08 -0.04,-0.12l-0.17 -0.29c-0.02,-0.04 -0.03,-0.08 -0.08,-0.08 -0.05,0 -0.06,0.04 -0.08,0.08 -0.04,0.06 -0.08,0.12 -0.11,0.19 -0.04,0.07 -0.11,0.16 -0.1,0.21z"/><path d="M1.01 0.73c0,-0.02 0.07,-0.12 0.08,-0.14 0.01,-0.02 0.07,-0.13 0.08,-0.13 0.01,0.01 0.04,0.05 0.04,0.06 0.02,0.04 0.12,0.19 0.12,0.21l-0.32 0zm-0.13 0.04c0,0.03 0.04,0.08 0.06,0.1 0.14,0.13 0.45,0.1 0.52,-0.09 0.01,-0.04 -0.01,-0.08 -0.03,-0.11l-0.17 -0.3c-0.02,-0.03 -0.04,-0.07 -0.08,-0.08 -0.05,0 -0.07,0.04 -0.09,0.07l-0.17 0.29c-0.02,0.04 -0.04,0.07 -0.04,0.12z"/></svg>
+  </symbol>
+
+  <!-- binocular -->
+  <symbol id="binocular" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1.28 1.12" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.72 0.56l0.08 0c0,0.06 0,0.33 0,0.42 0,0.05 -0.01,0.08 0.02,0.11 0.02,0.02 0.02,0.02 0.05,0.03l0.21 0c0.09,0 0.19,0.02 0.19,-0.09 0.01,-0.09 0.01,-0.18 -0.01,-0.26 -0.02,-0.08 -0.06,-0.13 -0.09,-0.2 -0.07,-0.19 0.01,-0.41 -0.13,-0.41l-0.24 0 -0.08 0c-0.01,0.04 -0.01,0.37 0,0.4z"/><path d="M0.56 0.56c0.01,-0.03 0,-0.16 0,-0.2 0,-0.04 0,-0.07 0,-0.11 0,-0.03 0.01,-0.07 -0.01,-0.09l-0.07 0 -0.24 0c-0.14,-0.01 -0.06,0.23 -0.14,0.42 -0.03,0.07 -0.06,0.11 -0.09,0.19 -0.01,0.08 -0.01,0.18 -0.01,0.27 0,0.1 0.11,0.08 0.2,0.08 0.07,0 0.22,0.01 0.26,-0.03 0.03,-0.03 0.02,-0.07 0.02,-0.12 0,-0.09 -0.01,-0.35 0,-0.41 0.02,-0.01 0.05,0 0.08,0z"/><path fill-opacity="0.501961" d="M0.56 0.56l0.16 0c-0.01,-0.03 -0.01,-0.36 0,-0.4l-0.17 0c0.02,0.02 0.01,0.06 0.01,0.09 0,0.04 0,0.07 0,0.11 0,0.04 0.01,0.17 0,0.2z"/><path fill-opacity="0.501961" d="M0.24 0.16l0.24 0c0,-0.12 0.01,-0.16 -0.12,-0.16 -0.13,0 -0.12,0.05 -0.12,0.16z"/><path fill-opacity="0.501961" d="M0.8 0.16l0.24 0c0,-0.12 0,-0.16 -0.13,-0.16 -0.12,0 -0.11,0.05 -0.11,0.16z"/></svg>
+  </symbol>
+
+  <!-- book -->
+  <symbol id="book" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.87 0.99" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.71 0.78c0.01,0.02 0,0.06 0,0.09 0,0.04 0.01,0.03 -0.06,0.03l-0.37 0c-0.04,0 -0.14,0.01 -0.16,-0.02 -0.04,-0.03 -0.02,-0.1 0.04,-0.1 0.04,-0.01 0.54,-0.01 0.55,0zm-0.61 -0.09l0 -0.51c0,-0.05 0.03,-0.09 0.08,-0.09l0.54 0c0.04,0 0.06,0.02 0.06,0.06l0 0.47c0,0.08 -0.07,0.06 -0.13,0.06l-0.47 0c-0.05,0 -0.07,0.01 -0.08,0.01zm0.71 0.06c0.07,-0.04 0.06,-0.11 0.06,-0.17 0,-0.08 0,-0.16 0,-0.23 0,-0.14 0.04,-0.32 -0.11,-0.35 -0.04,0 -0.39,0 -0.46,0 -0.07,0 -0.16,-0.01 -0.21,0.02 -0.04,0.03 -0.09,0.08 -0.09,0.15 0,0.15 0,0.31 0,0.46 0,0.15 -0.03,0.31 0.11,0.35 0.04,0.02 0.57,0.01 0.68,0.01 0.04,0 0.07,0 0.08,-0.04 0,-0.02 -0.01,-0.03 -0.01,-0.04 -0.02,-0.01 -0.03,-0.01 -0.05,-0.01 0,-0.02 0,-0.12 0,-0.15z"/><path fill-opacity="0.501961" d="M0.29 0.44c0.02,-0.01 0.22,-0.01 0.26,-0.01 0.03,0 0.09,0 0.12,0.01 0.03,0.03 0.02,0.07 -0.02,0.09 -0.03,0 -0.22,0 -0.26,0 -0.04,0 -0.15,0.02 -0.14,-0.06 0.01,-0.02 0.02,-0.03 0.04,-0.03zm-0.01 -0.19c0.03,0 0.22,0 0.26,0 0.03,0 0.11,-0.01 0.12,0.01 0.04,0.02 0.03,0.07 -0.01,0.08 -0.02,0.01 -0.21,0 -0.26,0 -0.03,0 -0.1,0.01 -0.12,-0.01 -0.03,-0.02 -0.02,-0.07 0.01,-0.08zm-0.18 0.44c0.01,0 0.03,-0.01 0.08,-0.01l0.47 0c0.06,0 0.13,0.02 0.13,-0.06l0 -0.47c0,-0.04 -0.02,-0.06 -0.06,-0.06l-0.54 0c-0.05,0 -0.08,0.04 -0.08,0.09l0 0.51z"/><path d="M0.29 0.44c-0.02,0 -0.03,0.01 -0.04,0.03 -0.01,0.08 0.1,0.06 0.14,0.06 0.04,0 0.23,0 0.26,0 0.04,-0.02 0.05,-0.06 0.02,-0.09 -0.03,-0.01 -0.09,-0.01 -0.12,-0.01 -0.04,0 -0.24,0 -0.26,0.01z"/><path d="M0.28 0.25c-0.03,0.01 -0.04,0.06 -0.01,0.08 0.02,0.02 0.09,0.01 0.12,0.01 0.05,0 0.24,0.01 0.26,0 0.04,-0.01 0.05,-0.06 0.01,-0.08 -0.01,-0.02 -0.09,-0.01 -0.12,-0.01 -0.04,0 -0.23,0 -0.26,0z"/></svg>
+  </symbol>
+
+  <!-- dart -->
+  <symbol id="dart" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1.15 1.15" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.5 0.15c0.13,-0.02 0.24,0.02 0.34,0.09 0.06,0.04 0.14,0.15 0.16,0.26 0.04,0.25 -0.14,0.46 -0.35,0.5 -0.26,0.04 -0.46,-0.14 -0.5,-0.35 -0.02,-0.13 0.02,-0.26 0.08,-0.34 0.08,-0.09 0.16,-0.13 0.27,-0.16zm0.01 -0.14c-0.11,0.01 -0.22,0.05 -0.3,0.12l-0.07 0.07c-0.08,0.09 -0.16,0.27 -0.14,0.44 0.05,0.32 0.31,0.54 0.64,0.51 0.19,-0.02 0.35,-0.15 0.43,-0.29 0.02,-0.03 0.03,-0.06 0.05,-0.09 0.14,-0.43 -0.23,-0.82 -0.61,-0.76z"/><path fill-opacity="0.501961" d="M0.57 0.4c0.09,-0.01 0.18,0.07 0.18,0.16 0.01,0.11 -0.07,0.18 -0.16,0.19 -0.1,0.01 -0.19,-0.07 -0.19,-0.16 -0.01,-0.11 0.07,-0.18 0.17,-0.19zm-0.02 -0.15c-0.1,0.01 -0.17,0.06 -0.22,0.11 -0.02,0.03 -0.04,0.05 -0.06,0.1 -0.01,0.04 -0.02,0.09 -0.02,0.14 0.01,0.05 0.02,0.08 0.04,0.12 0.09,0.19 0.35,0.25 0.52,0.07 0.05,-0.05 0.1,-0.14 0.09,-0.24 -0.02,-0.18 -0.17,-0.31 -0.35,-0.3z"/><path d="M0.55 0.51c-0.09,0.03 -0.04,0.17 0.05,0.13 0.09,-0.03 0.04,-0.17 -0.05,-0.13z"/></svg>
+  </symbol>
+
+  <!-- engine -->
+  <symbol id="engine" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.95 1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.1 0.35c0.01,-0.02 0.05,-0.08 0.06,-0.1 0.07,0.01 0.07,0.06 0.18,0 0.08,-0.04 0.05,-0.12 0.08,-0.14 0.01,-0.01 0.09,-0.01 0.11,0 0.02,0.04 0,0.1 0.08,0.14 0.02,0.02 0.05,0.03 0.09,0.03 0.03,-0.01 0.07,-0.03 0.09,-0.03 0.01,0.01 0.05,0.08 0.05,0.1 0,0.03 -0.09,0.05 -0.09,0.15 0,0.04 0.01,0.06 0.03,0.08 0.02,0.03 0.04,0.04 0.06,0.06 0,0.02 -0.04,0.09 -0.06,0.1 -0.08,-0.01 -0.08,-0.05 -0.17,0 -0.07,0.04 -0.05,0.07 -0.08,0.15 -0.02,0.01 -0.09,0.01 -0.12,0 -0.01,-0.02 0.01,-0.1 -0.07,-0.15 -0.1,-0.05 -0.1,0 -0.18,0 -0.01,-0.01 -0.06,-0.08 -0.05,-0.09 0,-0.01 0.06,-0.06 0.07,-0.09 0.02,-0.03 0.03,-0.09 0,-0.13l-0.05 -0.06c-0.01,0 -0.02,-0.01 -0.03,-0.02zm-0.1 0.02c0.01,0.04 0.04,0.06 0.06,0.08 0.01,0.01 0.03,0.03 0.04,0.04 0.01,0.02 -0.01,0.03 -0.02,0.04 -0.06,0.06 -0.11,0.07 -0.06,0.19 0.02,0.03 0.04,0.06 0.06,0.08 0.07,0.1 0.15,0.01 0.2,0.03 0.02,0.01 0.02,0.02 0.03,0.04 0,0.02 0,0.04 0.01,0.06 0.03,0.08 0.12,0.07 0.21,0.06 0.12,0 0.1,-0.13 0.12,-0.15 0.03,-0.03 0.07,0 0.11,0.01 0.04,0.01 0.08,-0.01 0.1,-0.04 0.03,-0.04 0.1,-0.13 0.08,-0.19 0,-0.02 -0.01,-0.04 -0.02,-0.05 -0.07,-0.07 -0.1,-0.06 -0.04,-0.11 0.07,-0.07 0.09,-0.09 0.04,-0.18 -0.12,-0.24 -0.19,-0.07 -0.26,-0.11 -0.04,-0.03 0,-0.15 -0.11,-0.17 -0.05,0 -0.09,0 -0.14,0 -0.13,0.02 -0.08,0.13 -0.12,0.16 -0.03,0.03 -0.07,0 -0.1,-0.01 -0.09,-0.02 -0.12,0.05 -0.16,0.12 -0.01,0.02 -0.04,0.06 -0.03,0.1z"/><path fill-opacity="0.501961" d="M0.44 0.35c0.09,-0.02 0.17,0.04 0.18,0.11 0.03,0.23 -0.26,0.24 -0.29,0.08 -0.02,-0.09 0.02,-0.17 0.11,-0.19zm-0.34 0c0.01,0.01 0.02,0.02 0.03,0.02l0.05 0.06c0.03,0.04 0.02,0.1 0,0.13 -0.01,0.03 -0.07,0.08 -0.07,0.09 -0.01,0.01 0.04,0.08 0.05,0.09 0.08,0 0.08,-0.05 0.18,0 0.08,0.05 0.06,0.13 0.07,0.15 0.03,0.01 0.1,0.01 0.12,0 0.03,-0.08 0.01,-0.11 0.08,-0.15 0.09,-0.05 0.09,-0.01 0.17,0 0.02,-0.01 0.06,-0.08 0.06,-0.1 -0.02,-0.02 -0.04,-0.03 -0.06,-0.06 -0.02,-0.02 -0.03,-0.04 -0.03,-0.08 0,-0.1 0.09,-0.12 0.09,-0.15 0,-0.02 -0.04,-0.09 -0.05,-0.1 -0.02,0 -0.06,0.02 -0.09,0.03 -0.04,0 -0.07,-0.01 -0.09,-0.03 -0.08,-0.04 -0.06,-0.1 -0.08,-0.14 -0.02,-0.01 -0.1,-0.01 -0.11,0 -0.03,0.02 0,0.1 -0.08,0.14 -0.11,0.06 -0.11,0.01 -0.18,0 -0.01,0.02 -0.05,0.08 -0.06,0.1z"/><path d="M0.46 0.45c0.07,-0.02 0.08,0.08 0.03,0.1 -0.07,0.01 -0.09,-0.08 -0.03,-0.1zm-0.02 -0.1c-0.09,0.02 -0.13,0.1 -0.11,0.19 0.03,0.16 0.32,0.15 0.29,-0.08 -0.01,-0.07 -0.09,-0.13 -0.18,-0.11z"/></svg>
+  </symbol>
+
+  <!-- search-1 -->
+  <symbol id="search-1" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1.03 1.03" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.3 0.11c0.07,-0.02 0.16,0 0.21,0.04 0.15,0.09 0.16,0.42 -0.09,0.46 -0.14,0.03 -0.29,-0.03 -0.31,-0.19 -0.02,-0.16 0.04,-0.28 0.19,-0.31zm0.24 0.57l0.02 -0.01c0.04,-0.03 0.08,-0.06 0.1,-0.1l0.01 -0.02c0.01,0 0,0 0.01,0 0,-0.03 0.03,-0.06 0.04,-0.13 0,-0.05 0,-0.1 -0.01,-0.15 -0.02,-0.09 -0.07,-0.16 -0.13,-0.2 -0.2,-0.15 -0.57,-0.06 -0.58,0.26 -0.01,0.27 0.17,0.42 0.42,0.39 0.06,-0.01 0.08,-0.02 0.12,-0.04z"/><path d="M0.75 0.58c0,0.01 0,0 0,0 0,0.01 0,0.01 -0.01,0.01 0,0 0,0 0,0 -0.03,0.05 -0.01,0.07 0.03,0.09 0.03,0.03 0.13,0.09 0.14,0.13 0.05,0.08 -0.08,0.17 -0.15,0.07l-0.06 -0.08c-0.04,-0.07 -0.06,-0.08 -0.11,-0.06 0,0.01 0,0 -0.01,0l0 0.01c0,0.01 0,0 0,0 -0.01,0.04 -0.01,0.05 0.01,0.07 0.03,0.05 0.09,0.13 0.12,0.16 0.07,0.07 0.19,0.06 0.26,-0.01 0.07,-0.07 0.08,-0.18 0,-0.26 -0.02,-0.03 -0.11,-0.09 -0.15,-0.12 -0.03,-0.02 -0.04,-0.02 -0.07,-0.01z"/><path fill-opacity="0.501961" d="M0.54 0.68c0.01,0.01 0.05,0.05 0.05,0.06 -0.01,0 -0.01,0 -0.01,0 0,0 0,0 0,0.01l0 0c0,0 0,0.01 0,0l0 -0.01c0.01,0 0.01,0.01 0.01,0 0.05,-0.02 0.07,-0.01 0.11,0.06l0.06 0.08c0.07,0.1 0.2,0.01 0.15,-0.07 -0.01,-0.04 -0.11,-0.1 -0.14,-0.13 -0.04,-0.02 -0.06,-0.04 -0.03,-0.09 0,0 0,0 0,0 0.01,0 0.01,0 0.01,-0.01 0,0 0,0.01 0,0l0 0c-0.01,0 -0.01,0 -0.01,0.01 0,0 0,0 0,0 -0.02,-0.01 -0.02,-0.01 -0.03,-0.02 -0.02,-0.01 -0.02,-0.01 -0.03,-0.02 -0.01,0 0,0 -0.01,0l-0.01 0.02c-0.02,0.04 -0.06,0.07 -0.1,0.1l-0.02 0.01z"/><path d="M0.33 0.21c-0.13,0.02 -0.14,0.15 -0.12,0.18 0.02,0.02 0.05,0.03 0.07,0.02 0.04,-0.03 0.02,-0.05 0.04,-0.08 0.01,-0.03 0.04,-0.01 0.07,-0.03 0.04,-0.03 0.03,-0.11 -0.06,-0.09z"/></svg>
+  </symbol>
+
+  <!-- transform -->
+  <symbol id="transform" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.82 1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.65 0.99c-0.12,0.01 -0.31,0 -0.45,0.01 -0.03,0 -0.03,-0.01 -0.03,-0.04 0,-0.11 0,-0.43 0,-0.51 0.02,-0.01 0.44,-0.01 0.48,0 0,0.03 0,0.53 0,0.54zm-0.65 -0.55c0.02,0.01 0.05,0 0.07,0.01 0,0.07 0,0.43 0,0.53 0,0.03 -0.01,0.01 -0.07,0.02l0 0.09 0.82 0.01c0.01,-0.04 0,-0.07 0,-0.1 -0.06,-0.01 -0.06,0.01 -0.06,-0.02 0,-0.16 -0.01,-0.39 0,-0.53l0.06 0c0.01,-0.04 0,-0.07 0,-0.11l-0.82 0 0 0.1z"/><path fill-opacity="0.501961" d="M0.24 0.72c0,-0.02 0.02,-0.04 0.05,-0.06 0.01,-0.01 0.01,-0.02 0.02,-0.03l0.09 -0.07c0.05,-0.05 0.05,-0.05 0.1,-0.05 -0.01,0.05 -0.05,0.14 -0.05,0.18l0.13 0 0 0.05 -0.17 0.16c-0.03,0.03 -0.03,0.03 -0.08,0.03 0.01,-0.05 0.04,-0.13 0.04,-0.17 -0.14,0 -0.13,0.01 -0.13,-0.04zm0.41 0.27c0,-0.01 0,-0.51 0,-0.54 -0.04,-0.01 -0.46,-0.01 -0.48,0 0,0.08 0,0.4 0,0.51 0,0.03 0,0.04 0.03,0.04 0.14,-0.01 0.33,0 0.45,-0.01z"/><path d="M0.24 0.72c0,0.05 -0.01,0.04 0.13,0.04 0,0.04 -0.03,0.12 -0.04,0.17 0.05,0 0.05,0 0.08,-0.03l0.17 -0.16 0 -0.05 -0.13 0c0,-0.04 0.04,-0.13 0.05,-0.18 -0.05,0 -0.05,0 -0.1,0.05l-0.09 0.07c-0.01,0.01 -0.01,0.02 -0.02,0.03 -0.03,0.02 -0.05,0.04 -0.05,0.06z"/><path d="M0.19 0.06c-0.02,0.01 -0.07,0 -0.08,0.01 -0.01,0.01 -0.01,0.05 -0.01,0.06 0.01,0.01 0.12,0.01 0.14,0.01 0.03,0 0.12,0.01 0.13,-0.01 0.01,-0.01 0.01,-0.05 0,-0.06 -0.01,-0.01 -0.05,0 -0.08,0l0 -0.07 -0.1 0 0 0.06z"/><path d="M0.53 0.06c-0.05,0.02 -0.1,-0.03 -0.08,0.08 0.02,0 0.25,0 0.27,0 0,-0.02 0,-0.05 0,-0.06 -0.01,-0.03 -0.05,0 -0.08,-0.01l-0.01 -0.07 -0.1 0 0 0.06z"/><path d="M0.1 0.23l0 0.04c0.04,0.01 0.23,0.01 0.28,0 0,-0.07 0,-0.06 -0.03,-0.06l-0.23 0c-0.02,0 -0.02,0 -0.02,0.02z"/><path d="M0.45 0.23l0 0.04c0.04,0.01 0.22,0.01 0.27,0l0 -0.04c0,-0.03 0,-0.02 -0.02,-0.02l-0.23 0c-0.03,0 -0.02,0 -0.02,0.02z"/></svg>
+  </symbol>
+
+  <!-- truck -->
+  <symbol id="truck" viewBox="0 0 24 24">
+    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!--Creator: CorelDRAW--><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1.27 0.95" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" fill="currentColor"><metadata id="CorelCorpID_0Corel-Layer"/><path d="M0.89 0.78c0,-0.1 0.16,-0.1 0.16,0 0,0.1 -0.16,0.11 -0.16,0zm-0.48 -0.08c0.05,-0.01 0.09,0.03 0.1,0.06 0.01,0.05 -0.03,0.09 -0.06,0.1 -0.1,0.02 -0.14,-0.13 -0.04,-0.16zm0.76 -0.16l0 0.15c0,0.02 0,0.04 -0.03,0.04 -0.01,-0.01 -0.02,-0.04 -0.03,-0.05 -0.06,-0.08 -0.11,-0.07 -0.15,-0.08 -0.01,-0.01 -0.01,-0.05 0,-0.06l0.21 0zm-0.21 -0.25c0.02,-0.01 0.06,0 0.08,0 0.04,0 0.05,0.01 0.06,0.03 0.07,0.06 0.08,0.05 0.07,0.13l-0.22 0 0.01 -0.16zm-0.83 -0.13c0.02,0 0.07,0.01 0.09,0 0.01,-0.03 0,-0.06 0.03,-0.06l0.43 0c0.21,0 0.18,-0.03 0.18,0.17l0 0.35c0,0.04 -0.02,0.03 -0.03,0.06 -0.02,0.02 -0.03,0.05 -0.03,0.05l-0.2 0c0,0 0,0 0,-0.01 -0.02,-0.02 -0.02,-0.04 -0.06,-0.08 -0.03,-0.02 -0.07,-0.04 -0.11,-0.04 -0.13,0.01 -0.16,0.11 -0.17,0.13 -0.05,0 -0.04,-0.03 -0.04,-0.08 0,-0.02 0,-0.09 0.01,-0.11 0.03,0 0.06,0.01 0.08,-0.01 0.01,-0.02 0.01,-0.05 -0.01,-0.07 -0.02,-0.02 -0.13,-0.01 -0.17,-0.01 -0.06,-0.01 -0.13,-0.01 -0.13,0.04 0,0.07 0.07,0.05 0.12,0.05 0.02,0.05 0,0.15 0.01,0.2 0.01,0.03 0.03,0.05 0.05,0.06 0.03,0.03 0.04,0.02 0.08,0.03 0.03,0.07 0.07,0.12 0.17,0.12 0.09,0 0.14,-0.05 0.17,-0.12l0.2 0c0.01,0.01 0.01,0.03 0.02,0.05 0.07,0.09 0.19,0.09 0.26,0.04 0.04,-0.03 0.03,-0.05 0.06,-0.09 0.09,-0.01 0.13,-0.05 0.13,-0.14 0,-0.09 0,-0.18 0,-0.27 0,-0.05 -0.01,-0.08 -0.03,-0.11 -0.03,-0.02 -0.05,-0.04 -0.07,-0.06 -0.09,-0.1 -0.13,-0.04 -0.22,-0.06 0,-0.04 0.02,-0.16 -0.1,-0.19 -0.03,0 -0.56,0 -0.59,0 -0.05,0 -0.09,0.02 -0.1,0.05 -0.03,0.03 -0.03,0.06 -0.03,0.11z"/><path fill-opacity="0.501961" d="M0.13 0.16l0 0.09c-0.02,0 -0.08,0 -0.09,0.01 0.05,-0.01 0.23,0 0.31,0 0.03,0 0.07,-0.01 0.08,0.01 0.02,0.03 0.02,0.06 -0.01,0.07 -0.02,0.02 -0.26,0.01 -0.29,0.01l0 0.1c0.04,0 0.15,-0.01 0.17,0.01 0.02,0.02 0.02,0.05 0.01,0.07 -0.02,0.02 -0.05,0.01 -0.08,0.01 -0.01,0.02 -0.01,0.09 -0.01,0.11 0,0.05 -0.01,0.08 0.04,0.08 0.01,-0.02 0.04,-0.12 0.17,-0.13 0.04,0 0.08,0.02 0.11,0.04 0.04,0.04 0.04,0.06 0.06,0.08 0,0.01 0,0.01 0,0.01l0.2 0c0,0 0.01,-0.03 0.03,-0.05 0.01,-0.03 0.03,-0.02 0.03,-0.06l0 -0.35c0,-0.2 0.03,-0.17 -0.18,-0.17l-0.43 0c-0.03,0 -0.02,0.03 -0.03,0.06 -0.02,0.01 -0.07,0 -0.09,0z"/><path d="M0.13 0.35c0.03,0 0.27,0.01 0.29,-0.01 0.03,-0.01 0.03,-0.04 0.01,-0.07 -0.01,-0.02 -0.05,-0.01 -0.08,-0.01 -0.08,0 -0.26,-0.01 -0.31,0 -0.04,0 -0.05,0.05 -0.03,0.08 0.02,0.02 0.08,0.01 0.12,0.01z"/><path fill-opacity="0.501961" d="M0.96 0.54c-0.01,0.01 -0.01,0.05 0,0.06 0.04,0.01 0.09,0 0.15,0.08 0.01,0.01 0.02,0.04 0.03,0.05 0.03,0 0.03,-0.02 0.03,-0.04l0 -0.15 -0.21 0z"/></svg>
+  </symbol>
+
+</svg>
@@ -55,6 +55,7 @@
  --bg-subtle: #24333E;
  --border-color: #2D3D4A;
  --border-subtle: #1F2C36;
+  --ide-primary-light: #40ab8e;
  --ide-excellence: #4fb389;
  --ide-projects: #ed8d01;
  --ide-academy: #a83c41; 
@@ -168,6 +169,18 @@ p, li, .lead-text, .text-body, .text-muted {
  font-family: 'Plus Jakarta Sans', sans-serif;
 }

+.icono {
+  width: 24px;
+  height: 24px;
+  color: var(--ide-primary);  /* ← Funciona con currentColor */
+  transition: color 0.3s;
+  vertical-align: middle;
+}
+
+.icono:hover {
+  fill: #ff6b6b;
+}
+
 .lead-text {
  font-size: 1.15rem;
  color: var(--text-muted);
@@ -647,7 +660,189 @@ p, li, .lead-text, .text-body, .text-muted {
  color: var(--text-main);
  margin-bottom: 0.25rem;
 }
+/* ================================================================
+   ESTILOS QUIZ REFACTORIZADO
+   ================================================================ */

+/* ---- Contenedor principal (estilo Opción A) ---- */
+.quiz-container {
+  background: var(--bg-card, #ffffff);
+  border-radius: 1.25rem;
+  padding: 2.5rem 2.75rem;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
+  max-width: 860px;
+  margin: 0 auto;
+  transition: all 0.25s ease;
+}
+
+.quiz-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 1.5rem;
+}
+
+/* ---- Barra de progreso (estilo Opción A) ---- */
+.quiz-progress-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--bg-muted, #e9ecef);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
+
+.quiz-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--ide-accent, #0066cc);
+  border-radius: 8px;
+  transition: width 0.45s ease;
+}
+
+/* ---- Steps ---- */
+.quiz-step {
+  display: none;
+  animation: fadeUp 0.35s ease;
+}
+
+.quiz-step.active {
+  display: block;
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ---- Grid de opciones (estilo Opción A) ---- */
+.quiz-options-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.85rem;
+  margin-top: 1rem;
+}
+
+.quiz-options-grid--2col {
+  grid-template-columns: 1fr 1fr;
+}
+
+/* ---- Cards de opción (estilo Opción A) ---- */
+.quiz-option-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  background: var(--bg-body);
+  border: 2px solid transparent;
+  border-radius: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.quiz-option-card:hover {
+  background: var(--bg-hover, #f1f3f5);
+  border-color: var(--border-hover, #dee2e6);
+}
+
+.quiz-option-card.selected {
+  background: var(--ide-primary-light, #e6f0ff);
+  border-color: var(--ide-primary, #0066cc);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
+}
+
+.quiz-radio-bullet {
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--border-color, #ced4da);
+  background: #fff;
+  margin-top: 2px;
+  transition: all 0.2s ease;
+}
+
+.quiz-option-card.selected .quiz-radio-bullet {
+  border-color: var(--ide-primary, #0066cc);
+  background: var(--ide-primary, #0066cc);
+  box-shadow: inset 0 0 0 4px #fff, 0 0 0 2px var(--ide-primary, #0066cc);
+}
+
+/* ---- Botón volver ---- */
+.quiz-back-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #6c757d);
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 0.4rem 0.8rem;
+  border-radius: 0.4rem;
+  transition: all 0.2s ease;
+}
+
+.quiz-back-btn:hover {
+  color: var(--text-body, #212529);
+  background: var(--bg-hover, #f1f3f5);
+}
+
+/* ---- Resultado---- */
+.quiz-result-box {
+  background: var(--bg-card-alt, #f8faff);
+  border-radius: 1.25rem;
+  padding: 2rem 2.25rem;
+  border: 1px solid var(--border-light, #e9ecef);
+}
+
+.quiz-result-box .result-chip {
+  display: inline-block;
+  border: 1px solid var(--ide-primary-light);
+  color: var(--ide-primary-light);
+  padding: 0.25rem 0.85rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+/* ---- Badge ---- */
+.ecosystem-badge {
+  display: inline-block;
+  padding: 0.2rem 0.85rem;
+  border-radius: 20px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+}
+
+.badge-project {
+  background: var(--ide-accent-light, #e6f0ff);
+  color: var(--ide-accent, #0066cc);
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 640px) {
+  .quiz-container {
+    padding: 1.5rem;
+  }
+
+  .quiz-options-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .quiz-options-grid--2col {
+    grid-template-columns: 1fr;
+  }
+
+  .quiz-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .quiz-header > div:last-child {
+    text-align: left !important;
+    align-self: flex-start;
+  }
+}
 /* --- 9. Bloque 2: La Tensión y El Quiebre 
 .tension-box {
  background-color: var(--bg-surface);
@@ -11,9 +11,11 @@
  <meta property="og:title" content="IDE Consultores | Todo está conectado">
  <meta property="og:description" content="En una organización, cada decisión genera efectos más allá del lugar donde interviene. Ecosistema de capacidades integradas.">
  <meta property="og:type" content="website">
+  <svg style="display:none;"><use href="assets/iconos/iconos.svg"></use></svg>

  <!-- Estilos Centralizados -->
  <link rel="stylesheet" href="css/styles.css">
+  
 </head>
 <body>

@@ -111,138 +113,367 @@
      </div>
    </section>

-    <!-- BLOQUE 3: LA BRÚJULA IDE (DIAGNÓSTICO INTERACTIVO DE 3 PASOS) -->
-    <section class="section-padding-sm" id="brujula">
+    <!-- BLOQUE 3: QUIZ INTERACTIVO -->
+    <section class="section-padding-sm" id="quiz-refactorizado">
      <div class="container">
-        <div class="brujula-container" id="brujula-interactive-app">
+        <div class="quiz-container" id="quiz-interactive-app">

-          <div class="brujula-header">
+          <!-- HEADER -->
+          <div class="quiz-header" style="position: relative; display: flex; flex-direction: column; gap: 0.5rem;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start;">
              <div>
-              <span class="eyebrow" style="color: var(--ide-accent);">HERRAMIENTA DE CONSULTORÍA INTERACTIVA</span>
-              <h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">La Brújula IDE: Diagnóstico Rápido de Conectividad</h2>
-              <p style="font-size: 0.95rem; color: var(--text-muted);">
-                ¿No estás seguro de por dónde empezar? Respondé 2 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
+                <span class="eyebrow" style="color: var(--ide-accent);">ENCONTRÁ TU CAMINO</span>
+                <h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">¿Por dónde empezamos?</h2>
+                <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0;">
+                  Respondé 4 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
                </p>
              </div>
-            <div style="text-align: right;">
-              <span id="brujula-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent);">Paso 1 de 3</span>
+            </div>
+            <div style="display: flex; justify-content: flex-end; padding-top: 0.5rem; margin-top: 0.25rem;">
+              <span id="quiz-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent); white-space: nowrap;">Paso 1 de 4</span>
            </div>
          </div>

-          <!-- Barra de Progreso -->
-          <div class="brujula-progress-bar">
-            <div id="brujula-progress-fill" class="brujula-progress-fill"></div>
+          <!-- BARRA DE PROGRESO (estilo Opción A) -->
+          <div class="quiz-progress-bar">
+            <div id="quiz-progress-fill" class="quiz-progress-fill"></div>
          </div>

-          <!-- PASO 1: EL FOCO / PRIORIDAD -->
-          <div class="brujula-step active" id="brujula-step-1">
-            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">1. ¿Cuál es tu prioridad u objetivo principal hoy?</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente lo que buscan impulsar:</p>
+          <!-- ==========================================================
+              PASO 1: Situación actual
+              ========================================================== -->
+          <div class="quiz-step active" id="step-1">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué describe mejor tu situación hoy?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente tu contexto:</p>

-            <div class="brujula-options-grid">
-              <div class="brujula-option-card brujula-opt-step1" data-val="iso" id="opt-foco-iso">
-                <div class="brujula-radio-bullet"></div>
+            <div class="quiz-options-grid">
+              <div class="quiz-option-card" data-step="1" data-val="desafio">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Mejorar la gestión y cumplir normas (ISO)</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar procesos, certificar ISO 9001/14001/45001 y elevar la calidad.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">
+                    <!-- Icono CORREGIDO -->
+                    <svg class="icono" width="24" height="24">
+                      <use href="assets/iconos/iconos.svg#search-1"></use>
+                    </svg>
+                    Algo no está funcionando
+                  </strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">
+                    Tengo un problema, pero no sé bien qué solución necesito.
+                  </span>
                </div>
              </div>

-              <div class="brujula-option-card brujula-opt-step1" data-val="proyectos" id="opt-foco-proyectos">
-                <div class="brujula-radio-bullet"></div>
+              <div class="quiz-option-card" data-step="1" data-val="objetivo">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Ejecutar proyectos con resultados garantizados</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Profesionalizar la gestión, crear una PMO y evitar desvíos en plazos.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🎯 Sé qué quiero lograr</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Tengo un objetivo claro, pero no sé cómo alcanzarlo.</span>
                </div>
              </div>

-              <div class="brujula-option-card brujula-opt-step1" data-val="equipo" id="opt-foco-equipo">
-                <div class="brujula-radio-bullet"></div>
+              <div class="quiz-option-card" data-step="1" data-val="solucion">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Desarrollar las capacidades de mi equipo</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación In-Company, liderazgo, pensamiento de procesos y cultura.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">⚙️ Sé exactamente qué necesito</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Busco ISO, PMO, transformación digital u otra solución concreta.</span>
                </div>
              </div>

-              <div class="brujula-option-card brujula-opt-step1" data-val="tecnologia" id="opt-foco-tecnologia">
-                <div class="brujula-radio-bullet"></div>
+              <div class="quiz-option-card" data-step="1" data-val="conocimiento">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Integrar tecnología, automatización o IA</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Transformar digitalmente las tareas rutinarias y aprovechar datos.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📚 Quiero aprender o formarme</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Busco formación, capacitación o conocimiento especializado.</span>
+                </div>
              </div>
            </div>
          </div>

-            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; flex-wrap: wrap; gap: 1rem;">
-              <a href="soluciones.html" class="btn btn-ghost btn-sm">Ya sé lo que necesito, ir directo a Soluciones →</a>
-              <button id="brujula-btn-next1" class="btn btn-primary" disabled>Continuar al Paso 2 →</button>
-            </div>
-          </div>
+          <!-- ==========================================================
+              PASO 2A: Desafío (¿Qué área no funciona?)
+              ========================================================== -->
+          <div class="quiz-step" id="step-2a">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿En qué área sentís que algo no funciona como debería?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos el área crítica:</p>

-          <!-- PASO 2: EL DOLOR / OBSTÁCULO -->
-          <div class="brujula-step" id="brujula-step-2">
-            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">2. ¿Qué es lo que más dificulta avanzar en este momento?</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos la raíz que suele frenar los resultados:</p>
-            
-            <div class="brujula-options-grid">
-              <div class="brujula-option-card brujula-opt-step2" data-val="procesos" id="opt-dolor-procesos">
-                <div class="brujula-radio-bullet"></div>
+            <div class="quiz-options-grid">
+              <div class="quiz-option-card" data-step="2a" data-val="gestion">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Falta de claridad en los procesos</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Las áreas trabajan en silos y la información no fluye adecuadamente.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📊 Gestión y procesos</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Los procesos no son eficientes o no están claros.</span>
                </div>
              </div>

-              <div class="brujula-option-card brujula-opt-step2" data-val="desvios" id="opt-dolor-desvios">
-                <div class="brujula-radio-bullet"></div>
+              <div class="quiz-option-card" data-step="2a" data-val="proyectos">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Los proyectos se retrasan o se desvían</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Cuesta concretar las iniciativas estratégicas en tiempo y forma.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📌 Proyectos y resultados</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Los proyectos no llegan a destino o se desvían.</span>
                </div>
              </div>

-              <div class="brujula-option-card brujula-opt-step2" data-val="adopcion" id="opt-dolor-adopcion">
-                <div class="brujula-radio-bullet"></div>
+              <div class="quiz-option-card" data-step="2a" data-val="personas">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">El equipo no adopta los cambios</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Hay resistencia cultural o falta de capacitación para sostener las mejoras.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">👥 Personas y capacidades</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">El equipo necesita desarrollar nuevas habilidades.</span>
                </div>
              </div>

-              <div class="brujula-option-card brujula-opt-step2" data-val="herramientas" id="opt-dolor-herramientas">
-                <div class="brujula-radio-bullet"></div>
+              <div class="quiz-option-card" data-step="2a" data-val="tecnologia">
                <div>
-                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Tenemos herramientas, pero no las aprovechamos</strong>
-                  <span style="font-size: 0.84rem; color: var(--text-muted);">Se incorporó software o tecnología pero no se integró con la operación diaria.</span>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🤖 Tecnología e innovación</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">La organización necesita digitalizarse o incorporar IA.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2a" data-val="nosabe">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🌐 No sé bien dónde está el problema</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Algo no funciona, pero es difícil de identificar.</span>
                </div>
              </div>
            </div>

-            <div style="display: flex; justify-content: flex-end; margin-top: 2rem;">
-              <button id="brujula-btn-next2" class="btn btn-accent" disabled>Obtener Orientación Personalizada →</button>
+            <div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
+              <button class="quiz-back-btn" onclick="goBack()">← Volver</button>
            </div>
          </div>

-          <!-- PASO 3: EL RESULTADO DINÁMICO -->
-          <div class="brujula-step" id="brujula-step-3">
-            <div class="brujula-result-box">
+          <!-- ==========================================================
+              PASO 2B: Objetivo (¿Qué querés lograr?)
+              ========================================================== -->
+          <div class="quiz-step" id="step-2b">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué querés lograr?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Definí tu objetivo principal:</p>
+
+            <div class="quiz-options-grid">
+              <div class="quiz-option-card" data-step="2b" data-val="mejorar-gestion">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📈 Mejorar la gestión y los procesos</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar, optimizar y hacer más eficiente la operación.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2b" data-val="profesionalizar-proyectos">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🏗️ Profesionalizar la gestión de proyectos</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Que los proyectos se entreguen en tiempo y con los resultados esperados.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2b" data-val="desarrollar-equipo">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🌱 Desarrollar las capacidades del equipo</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Que las personas estén preparadas para los desafíos que vienen.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2b" data-val="transformar-digital">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">⚡ Transformar digitalmente la organización</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Integrar tecnología e IA de manera estratégica y sostenible.</span>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
+              <button class="quiz-back-btn" onclick="goBack()">← Volver</button>
+            </div>
+          </div>
+
+          <!-- ==========================================================
+              PASO 2C: Solución concreta (¿Qué solución buscás?)
+              ========================================================== -->
+          <div class="quiz-step" id="step-2c">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué solución estás buscando?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor se ajuste:</p>
+
+            <div class="quiz-options-grid">
+              <div class="quiz-option-card" data-step="2c" data-val="iso">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">✅ ISO o sistema de gestión</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">ISO 9001, 14001, 45001 u otra norma de gestión.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2c" data-val="pmo">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📐 PMO o gestión de proyectos</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Implementar una oficina de proyectos o mejorar su gestión.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2c" data-val="formacion">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🎓 Formación para mi organización</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación in company o programas de desarrollo.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2c" data-val="ia-digital">
+               <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🤖 Transformación digital e IA</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Digitalización de procesos, automatización o IA aplicada.</span>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
+              <button class="quiz-back-btn" onclick="goBack()">← Volver</button>
+            </div>
+          </div>
+
+          <!-- ==========================================================
+              PASO 2D: Conocimiento (¿Qué formación buscás?)
+              ========================================================== -->
+          <div class="quiz-step" id="step-2d">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué tipo de formación o conocimiento buscás?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná el área de interés:</p>
+
+            <div class="quiz-options-grid">
+              <div class="quiz-option-card" data-step="2d" data-val="iso-form">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📋 Normas ISO y sistemas de gestión</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Auditoría interna, implementación de normas, mejora continua.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2d" data-val="pm-form">
+               <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📌 Gestión de proyectos</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Herramientas, metodologías, PMP, ágil, híbrido.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2d" data-val="liderazgo-form">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🧭 Liderazgo y cambio organizacional</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Desarrollo de líderes y gestión del cambio.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="2d" data-val="ia-form">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🤖 Inteligencia artificial y tecnología</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">IA aplicada, transformación digital para equipos no técnicos.</span>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
+              <button class="quiz-back-btn" onclick="goBack()">← Volver</button>
+            </div>
+          </div>
+
+          <!-- ==========================================================
+              PASO 3: Momento de la organización
+              ========================================================== -->
+          <div class="quiz-step" id="step-3">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Cómo describirías el momento en que está tu organización?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor refleje tu situación:</p>
+
+            <div class="quiz-options-grid quiz-options-grid--2col">
+              <div class="quiz-option-card" data-step="3" data-val="explorando">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🔭 Estoy explorando</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Todavía en etapa de análisis, sin decisiones tomadas.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="3" data-val="evaluando">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">⚖️ Estamos evaluando opciones</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Comparando enfoques o proveedores antes de avanzar.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="3" data-val="listo">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🚀 Queremos avanzar pronto</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">La decisión está tomada, necesitamos un socio para ejecutar.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="3" data-val="requisito">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📅 Tenemos un requisito o plazo</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Una certificación, licitación o cliente lo exige.</span>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
+              <button class="quiz-back-btn" onclick="goBack()">← Volver</button>
+            </div>
+          </div>
+
+          <!-- ==========================================================
+              PASO 4: Rol
+              ========================================================== -->
+          <div class="quiz-step" id="step-4">
+            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Cuál es tu rol en la organización?</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná tu rol para una orientación más precisa:</p>
+
+            <div class="quiz-options-grid quiz-options-grid--2col">
+              <div class="quiz-option-card" data-step="4" data-val="direccion">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🏢 Dirección o Gerencia</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">CEO, director, gerente general.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="4" data-val="responsable">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📂 Responsable de área</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Jefe, coordinador, líder de proceso o proyecto.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="4" data-val="rrhh">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">👥 Recursos Humanos</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Gestión de personas, formación y desarrollo.</span>
+                </div>
+              </div>
+
+              <div class="quiz-option-card" data-step="4" data-val="otro">
+                <div>
+                  <strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">💼 Otro rol</strong>
+                  <span style="font-size: 0.84rem; color: var(--text-muted);">Consultor, proveedor, investigador, estudiante.</span>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
+              <button class="quiz-back-btn" onclick="goBack()">← Volver</button>
+            </div>
+          </div>
+
+          <!-- ==========================================================
+              RESULTADO 
+              ========================================================== -->
+          <div class="quiz-step" id="step-result">
+            <div class="quiz-result-box">
              <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
-                <span class="ecosystem-badge badge-project" style="font-size: 0.85rem;">Combinación Sugerida de Capacidades</span>
+                <span class="ecosystem-badge badge-project" style="font-size: 0.85rem;" id="resultBadge">Perfil Recomendado</span>
              </div>
-              <h3 id="brujula-result-capacidades" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
-                IDE Excellence + IDE Academy
+              <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+                <span id="resultIcon" style="font-size: 2rem;">🔍</span>
+                <span id="resultProfile" style="font-size: 0.9rem; color: var(--text-muted);">Perfil · Diagnóstico</span>
+              </div>
+              <h3 id="resultTitle" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
+                No necesitás tener la respuesta para empezar.
              </h3>
-              <p id="brujula-result-desc" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
-                La implementación de procesos y normas es el primer paso. Para que sea sostenible, suele ser clave trabajar también en el desarrollo de capacidades de las personas.
+              <p id="resultBody" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
+                Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada.
              </p>

-              <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
-                <a id="brujula-result-cta" href="contacto.html" class="btn btn-primary">
-                  Conversar con un especialista sobre este diagnóstico →
+              <div id="resultChips" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;"></div>
+
+              <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: space-between;">
+                <div style="display: flex; flex-direction: row; gap: 0.5rem;">
+                  <a id="resultCTA" href="desafios.html" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
+                    Explorar por desafío →
                  </a>
-                <button id="brujula-btn-restart" class="btn btn-outline btn-sm">
-                  Reiniciar Diagnóstico
-                </button>
+                  <a href="contacto.html" class="btn btn-ghost btn-sm" style="font-size: 0.8rem; padding: 0.3rem 0.8rem;">Hablemos directamente</a>
+                  <button class="btn btn-outline btn-sm" onclick="restartQuiz()" style="font-size: 0.8rem; padding: 0.3rem 0.8rem;">Reiniciar</button>
+                </div>
+              </div>
            </div>
          </div>
          </div>
@@ -251,46 +482,7 @@
      </div>
    </section>

-    <!-- BLOQUE 4: EL MÉTODO IDE (4 PASOS) -->
-    <section class="section-padding bg-subtle-section">
-      <div class="container">
-        <div style="text-align: center; max-width: 760px; margin: 0 auto 3.5rem auto;">
-          <span class="eyebrow">LA NUEVA FORMA DE MIRAR</span>
-          <h2>Comprender el todo para saber dónde intervenir</h2>
-          <p class="lead-text" style="margin: 0 auto;">
-            No se trata de intervenir en todo ni de aplicar fórmulas estandarizadas. Guiamos cada intervención bajo un criterio metodológico riguroso:
-          </p>
-        </div>
-
-        <div class="method-steps-grid">
-          <div class="method-step-card">
-            <div class="method-num">01</div>
-            <h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Comprender el Todo</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted);">Para identificar las verdaderas relaciones y causas raíz detrás de cada desafío.</p>
-          </div>
-
-          <div class="method-step-card">
-            <div class="method-num">02</div>
-            <h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Focalizar la Intervención</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted);">Para actuar estratégicamente donde se genera el mayor impacto y valor agregado.</p>
-          </div>
-
-          <div class="method-step-card">
-            <div class="method-num">03</div>
-            <h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Integrar Capacidades</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted);">Para que la transformación no quede limitada a una única solución aislada.</p>
-          </div>
-
-          <div class="method-step-card">
-            <div class="method-num">04</div>
-            <h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Resultados Sostenibles</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted);">Porque una verdadera mejora no debería solucionar un problema creando otro.</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- BLOQUE 5: EL ECOSISTEMA (4 CAPACIDADES) -->
+    <!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
    <section class="section-padding">
      <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
@@ -358,7 +550,7 @@
      </div>
    </section>

-    <!-- BLOQUE 6: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
+    <!-- BLOQUE 5: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
    <section class="section-padding-sm bg-subtle-section">
      <div class="container">
        <div style="text-align: center; margin-bottom: 2.5rem;">
@@ -397,7 +589,7 @@
      </div>
    </section>

-    <!-- BLOQUE 7: CTA FINAL DE CONVERSIÓN -->
+    <!-- BLOQUE 6: CTA FINAL DE CONVERSIÓN -->
    <section class="section-padding">
      <div class="container">
        <div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
@@ -241,139 +241,267 @@ function closeModal(modalId) {
  }
 }

-/* ==========================================================================
-   5. Bloque 3: La Brújula IDE (Diagnóstico en 3 Pasos)
-   ========================================================================== */
-const brujulaState = {
-  foco: null,
-  focoTexto: '',
-  dolor: null,
-  dolorTexto: '',
-  recomendacion: ''
-};
+/* ================================================================
+   JS QUIZ 
+   ================================================================ */

-function initBrujulaIDE() {
-  const container = document.getElementById('brujula-interactive-app');
+(function () {
+  // ----- FLUJO DE NAVEGACIÓN (Opción B) -----
+  const FLOW = {
+    1:    { desafio: '2a', objetivo: '2b', solucion: '2c', conocimiento: '2d' },
+    '2a': 3, '2b': 3, '2c': 3, '2d': 3,
+    3: 4,
+    4: 'result'
+  };
+
+  // ----- MAPEO DE RESULTADOS (Opción B) -----
+  function buildResult(answers) {
+    const p1 = answers[1];
+    const p2 = answers['2a'] || answers['2b'] || answers['2c'] || answers['2d'];
+    const p3 = answers[3];
+
+    // Perfil 4 · Requisito exigido
+    if (p3 === 'requisito' || p2 === 'iso' || p2 === 'iso-form') {
+      return {
+        icon: '📋',
+        profile: 'Perfil · Requisito o certificación',
+        title: 'La certificación puede ser el punto de partida.',
+        body: 'Comprendemos que tenés un requisito externo. En IDE no trabajamos para cumplir auditorías: trabajamos para que el sistema refleje cómo funciona tu organización y contribuya a gestionarla mejor.',
+        chips: ['IDE Excellence', 'ISO 9001 / 14001 / 45001', 'Sistemas de gestión'],
+        cta: 'Ver soluciones Excellence',
+        url: 'soluciones.html'
+      };
+    }
+
+    // Perfil 5 · Conocimiento o formación
+    if (p1 === 'conocimiento') {
+      const map = {
+        'iso-form':       { chips: ['Auditoría interna', 'ISO 9001', 'Mejora continua'], extra: 'IDE Excellence' },
+        'pm-form':        { chips: ['Gestión de proyectos', 'Metodologías ágiles', 'PMP'], extra: 'IDE Project' },
+        'liderazgo-form': { chips: ['Liderazgo', 'Cambio organizacional', 'Cultura'], extra: 'IDE Academy' },
+        'ia-form':        { chips: ['IA aplicada', 'Transformación digital', 'Automatización'], extra: 'IDE Digital' }
+      };
+      const m = map[p2] || { chips: ['Formación', 'Desarrollo', 'Academy'], extra: 'IDE Academy' };
+      return {
+        icon: '🎓',
+        profile: 'Perfil · Formación y conocimiento',
+        title: 'Desarrollamos las capacidades que hacen posible la transformación.',
+        body: 'IDE Academy diseña programas de formación alineados con los desafíos reales de las organizaciones. No dictamos cursos estándar: trabajamos desde el contexto de cada equipo.',
+        chips: [...m.chips, m.extra],
+        cta: 'Conocer IDE Academy',
+        url: 'academy.html'
+      };
+    }
+
+    // Perfil 3 · Sabe exactamente qué necesita
+    if (p1 === 'solucion') {
+      const map = {
+        iso: {
+          title: 'Respuesta concreta. Y algo más.',
+          chips: ['ISO 9001', 'ISO 14001', 'IDE Excellence'],
+          cta: 'Ver soluciones ISO',
+          url: 'soluciones.html',
+          body: 'Sí, implementamos y acompañamos certificaciones ISO. Y creemos que un sistema de gestión debe reflejar cómo funciona tu organización, no solo superar una auditoría.'
+        },
+        pmo: {
+          title: 'Proyectos que llegan a destino.',
+          chips: ['PMO', 'Gestión de proyectos', 'IDE Project'],
+          cta: 'Ver soluciones Project',
+          url: 'soluciones.html',
+          body: 'Diseñamos PMOs y acompañamos la dirección de proyectos para que se entreguen en tiempo, costo y con los resultados esperados.'
+        },
+        formacion: {
+          title: 'Formación desde el contexto real.',
+          chips: ['In Company', 'Capacitación', 'IDE Academy'],
+          cta: 'Ver IDE Academy',
+          url: 'academy.html',
+          body: 'Programas de formación diseñados para tu organización, sus desafíos y las capacidades que necesita desarrollar.'
+        },
+        'ia-digital': {
+          title: 'Tecnología con propósito.',
+          chips: ['Transformación digital', 'IA aplicada', 'IDE Digital'],
+          cta: 'Ver soluciones Digital',
+          url: 'soluciones.html',
+          body: 'Te ayudamos a identificar dónde la IA y la digitalización generan valor real, y acompañamos su implementación de principio a fin.'
+        }
+      };
+      const m = map[p2] || {
+        title: 'Encontramos lo que buscás.',
+        chips: ['Soluciones concretas', 'Ecosistema IDE'],
+        cta: 'Ver soluciones',
+        url: 'soluciones.html',
+        body: 'Tenemos la respuesta concreta que buscás. Y una mirada que asegura que esa solución genere valor en el conjunto de tu organización.'
+      };
+      return { icon: '⚙️', profile: 'Perfil · Solución concreta', ...m };
+    }
+
+    // Perfil 2 · Sabe qué quiere lograr
+    if (p1 === 'objetivo') {
+      const map = {
+        'mejorar-gestion':          { chips: ['IDE Excellence', 'Mejora de procesos'], body: 'Entendemos dónde querés llegar. Antes de proponer una solución, comprendemos tu operación para intervenir donde hay mayor impacto.' },
+        'profesionalizar-proyectos':{ chips: ['IDE Project', 'PMO'], body: 'Traducimos tu objetivo en una estructura de gestión de proyectos adecuada a tu contexto, sin sobreingeniería.' },
+        'desarrollar-equipo':       { chips: ['IDE Academy', 'Formación In Company'], body: 'Desarrollamos capacidades alineadas con los desafíos reales de tu organización. La formación parte del contexto, no de un catálogo estándar.' },
+        'transformar-digital':      { chips: ['IDE Digital', 'IA aplicada'], body: 'Empezamos por entender tu organización para identificar dónde la tecnología realmente agrega valor, y avanzamos desde ahí.' }
+      };
+      const m = map[p2] || { chips: ['Ecosistema IDE'], body: 'Entendemos dónde querés llegar. Comprendemos el sistema para ayudarte a lograrlo.' };
+      return {
+        icon: '🎯',
+        profile: 'Perfil · Objetivo claro',
+        title: 'Entendemos dónde querés llegar. Te ayudamos a definir cómo.',
+        body: m.body,
+        chips: m.chips,
+        cta: 'Explorar por desafío',
+        url: 'desafios.html'
+      };
+    }
+
+    // Perfil 1 · Desafío sin solución definida
+    const mapD = {
+      gestion:    { chips: ['Procesos', 'Gestión', 'IDE Excellence'] },
+      proyectos:  { chips: ['Proyectos', 'PMO', 'IDE Project'] },
+      personas:   { chips: ['Capacidades', 'Equipo', 'IDE Academy'] },
+      tecnologia: { chips: ['IA', 'Digital', 'IDE Digital'] },
+      nosabe:     { chips: ['Diagnóstico sistémico', 'Ecosistema IDE'] }
+    };
+    const md = mapD[p2] || mapD.nosabe;
+    return {
+      icon: '🔍',
+      profile: 'Perfil · Desafío sin solución definida',
+      title: 'No necesitás tener la respuesta para empezar.',
+      body: 'Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada. Eso diferencia una intervención puntual de una transformación real.',
+      chips: md.chips,
+      cta: 'Explorar desafíos',
+      url: 'desafios.html'
+    };
+  }
+
+  // ----- ESTADO -----
+  let currentStep = 1;
+  let stepHistory = [];
+  let answers = {};
+  const TOTAL = 4;
+
+  const container = document.getElementById('quiz-interactive-app');
  if (!container) return;

-  const step1Options = container.querySelectorAll('.brujula-opt-step1');
-  const step2Options = container.querySelectorAll('.brujula-opt-step2');
-  const btnNext1 = document.getElementById('brujula-btn-next1');
-  const btnNext2 = document.getElementById('brujula-btn-next2');
-  const btnRestart = document.getElementById('brujula-btn-restart');
+  // ----- FUNCIONES -----
+  function showStep(id) {
+    const steps = container.querySelectorAll('.quiz-step');
+    steps.forEach(s => s.classList.remove('active'));

-  // Selección paso 1
-  step1Options.forEach(opt => {
-    opt.addEventListener('click', () => {
-      step1Options.forEach(o => o.classList.remove('selected'));
-      opt.classList.add('selected');
-      brujulaState.foco = opt.getAttribute('data-val');
-      brujulaState.focoTexto = opt.querySelector('.opt-title').innerText;
-      if (btnNext1) btnNext1.removeAttribute('disabled');
-    });
-  });
+    const el = document.getElementById('step-' + id);
+    if (el) el.classList.add('active');

-  if (btnNext1) {
-    btnNext1.addEventListener('click', () => {
-      if (!brujulaState.foco) return;
-      showBrujulaStep(2);
-    });
+    updateProgress(id);
+    updateIndicator(id);
  }

-  // Selección paso 2
-  step2Options.forEach(opt => {
-    opt.addEventListener('click', () => {
-      step2Options.forEach(o => o.classList.remove('selected'));
-      opt.classList.add('selected');
-      brujulaState.dolor = opt.getAttribute('data-val');
-      brujulaState.dolorTexto = opt.querySelector('.opt-title').innerText;
-      if (btnNext2) btnNext2.removeAttribute('disabled');
+  function updateProgress(id) {
+    const fill = document.getElementById('quiz-progress-fill');
+    if (!fill) return;
+
+    let n = 1;
+    if (id === 'result') n = 4;
+    else if (['2a', '2b', '2c', '2d'].includes(String(id))) n = 2;
+    else n = parseInt(id) || 1;
+
+    fill.style.width = (n / TOTAL * 100) + '%';
+  }
+
+  function updateIndicator(id) {
+    const label = document.getElementById('quiz-step-indicator');
+    if (!label) return;
+
+    let text = '';
+    if (id === 'result') text = '¡Orientación lista!';
+    else if (['2a', '2b', '2c', '2d'].includes(String(id))) text = 'Paso 2 de 4';
+    else text = 'Paso ' + id + ' de 4';
+
+    label.textContent = text;
+  }
+
+  function renderResult(ans) {
+    const r = buildResult(ans);
+
+    document.getElementById('resultIcon').textContent = r.icon;
+    document.getElementById('resultProfile').textContent = r.profile;
+    document.getElementById('resultTitle').textContent = r.title;
+    document.getElementById('resultBody').textContent = r.body;
+
+    const chipsContainer = document.getElementById('resultChips');
+    chipsContainer.innerHTML = r.chips.map(c =>
+      `<span class="result-chip">${c}</span>`
+    ).join('');
+
+    const cta = document.getElementById('resultCTA');
+    cta.textContent = r.cta;
+    cta.href = r.url;
+
+    showStep('result');
+  }
+
+  function handleOption(btn) {
+    const step = btn.dataset.step;
+    const val = btn.dataset.val;
+
+    // Deseleccionar otras opciones del mismo paso
+    const parent = btn.closest('.quiz-options-grid');
+    if (parent) {
+      parent.querySelectorAll('.quiz-option-card').forEach(b => b.classList.remove('selected'));
+    }
+    btn.classList.add('selected');
+
+    answers[step] = val;
+    stepHistory.push(step);
+
+    const next = FLOW[step];
+    if (!next) return;
+
+    if (next === 'result') {
+      renderResult(answers);
+      return;
+    }
+
+    const nextId = typeof next === 'object' ? (next[val] || '2a') : next;
+    showStep(nextId);
+  }
+
+  // ----- FUNCIONES GLOBALES (para onclick en HTML) -----
+  window.goBack = function () {
+    if (!stepHistory.length) return;
+    const prev = stepHistory.pop();
+    delete answers[prev];
+
+    const last = stepHistory[stepHistory.length - 1] || 1;
+    showStep(last);
+  };
+
+  window.restartQuiz = function () {
+    answers = {};
+    stepHistory = [];
+    container.querySelectorAll('.quiz-option-card').forEach(b => b.classList.remove('selected'));
+    showStep(1);
+  };
+
+  // ----- INIT -----
+  function initQuiz() {
+    // Eventos en las cards de opción
+    container.querySelectorAll('.quiz-option-card').forEach(btn => {
+      btn.addEventListener('click', function () {
+        handleOption(this);
      });
    });

-  if (btnNext2) {
-    btnNext2.addEventListener('click', () => {
-      if (!brujulaState.dolor) return;
-      calculateBrujulaResult();
-      showBrujulaStep(3);
-    });
+    showStep(1);
  }

-  if (btnRestart) {
-    btnRestart.addEventListener('click', () => {
-      brujulaState.foco = null;
-      brujulaState.dolor = null;
-      step1Options.forEach(o => o.classList.remove('selected'));
-      step2Options.forEach(o => o.classList.remove('selected'));
-      if (btnNext1) btnNext1.setAttribute('disabled', 'true');
-      if (btnNext2) btnNext2.setAttribute('disabled', 'true');
-      showBrujulaStep(1);
-    });
+  // Ejecutar al cargar el DOM
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initQuiz);
+  } else {
+    initQuiz();
  }
-}
-
-function showBrujulaStep(stepNumber) {
-  const steps = document.querySelectorAll('.brujula-step');
-  const fill = document.getElementById('brujula-progress-fill');
-  const stepLabel = document.getElementById('brujula-step-indicator');
-
-  steps.forEach(step => step.classList.remove('active'));
-  const activeStep = document.getElementById(`brujula-step-${stepNumber}`);
-  if (activeStep) activeStep.classList.add('active');
-
-  if (fill) {
-    fill.style.width = stepNumber === 1 ? '33.33%' : stepNumber === 2 ? '66.66%' : '100%';
-  }
-  if (stepLabel) {
-    stepLabel.innerText = stepNumber <= 2 ? `Paso ${stepNumber} de 3` : 'Orientación recomendada';
-  }
-}
-
-function calculateBrujulaResult() {
-  const resultTitle = document.getElementById('brujula-result-capacidades');
-  const resultText = document.getElementById('brujula-result-desc');
-  const resultCta = document.getElementById('brujula-result-cta');
-
-  let caps = 'IDE Excellence + IDE Academy';
-  let desc = 'La implementación de procesos y normas es el primer paso. Para que sea sostenible, es clave trabajar en el desarrollo de capacidades de tu equipo.';
-  let dropdownValue = 'Implementar o certificar una norma';
-
-  // Lógica de cruce sistémico
-  if (brujulaState.foco === 'iso' && brujulaState.dolor === 'adopcion') {
-    caps = 'IDE Excellence + IDE Academy';
-    desc = 'Implementar normas como ISO 9001 sólo genera valor si las personas comprenden y adoptan el sistema. Recomendamos unir la consultoría de procesos con formación In-Company.';
-    dropdownValue = 'Implementar o certificar una norma';
-  } else if (brujulaState.foco === 'proyectos' || brujulaState.dolor === 'desvios') {
-    caps = 'IDE Project + IDE Excellence';
-    desc = 'Tus desafíos requieren profesionalizar la dirección de proyectos y alinear los flujos operativos con la estrategia de la organización.';
-    dropdownValue = 'Gestionar o impulsar un proyecto';
-  } else if (brujulaState.foco === 'tecnologia' || brujulaState.dolor === 'herramientas') {
-    caps = 'IDE Digital + IDE Excellence';
-    desc = 'La tecnología y la IA deben estar al servicio de procesos claros. Recomendamos mapear primero las oportunidades antes de sumar herramientas aisladas.';
-    dropdownValue = 'Transformación digital / IA';
-  } else if (brujulaState.foco === 'equipo' || brujulaState.dolor === 'procesos') {
-    caps = 'IDE Academy + IDE Excellence';
-    desc = 'Fortalecer el criterio y las competencias del equipo permite que los procesos organizacionales fluyan con menor fricción y mayor autonomía.';
-    dropdownValue = 'Formación para mi organización';
-  }
-
-  brujulaState.recomendacion = `${caps}: ${desc}`;
-
-  if (resultTitle) resultTitle.innerText = caps;
-  if (resultText) resultText.innerText = desc;
-
-  if (resultCta) {
-    // Generar enlace pre-cargado para Contacto
-    const params = new URLSearchParams({
-      origen: 'Brujula_IDE',
-      busqueda: dropdownValue,
-      foco: brujulaState.focoTexto,
-      dolor: brujulaState.dolorTexto,
-      recomendacion: caps
-    });
-    resultCta.setAttribute('href', `contacto.html?${params.toString()}`);
-  }
-}
+})();

 /* ==========================================================================
   6. Carga Dinámica de Cursos en IDE Academy (cursos.json)