pack de iconos
This commit is contained in:
@@ -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>
|
||||||
+195
@@ -55,6 +55,7 @@
|
|||||||
--bg-subtle: #24333E;
|
--bg-subtle: #24333E;
|
||||||
--border-color: #2D3D4A;
|
--border-color: #2D3D4A;
|
||||||
--border-subtle: #1F2C36;
|
--border-subtle: #1F2C36;
|
||||||
|
--ide-primary-light: #40ab8e;
|
||||||
--ide-excellence: #4fb389;
|
--ide-excellence: #4fb389;
|
||||||
--ide-projects: #ed8d01;
|
--ide-projects: #ed8d01;
|
||||||
--ide-academy: #a83c41;
|
--ide-academy: #a83c41;
|
||||||
@@ -168,6 +169,18 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
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 {
|
.lead-text {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
@@ -647,7 +660,189 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
margin-bottom: 0.25rem;
|
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
|
/* --- 9. Bloque 2: La Tensión y El Quiebre
|
||||||
.tension-box {
|
.tension-box {
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
|
|||||||
+316
-124
@@ -11,9 +11,11 @@
|
|||||||
<meta property="og:title" content="IDE Consultores | Todo está conectado">
|
<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: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">
|
<meta property="og:type" content="website">
|
||||||
|
<svg style="display:none;"><use href="assets/iconos/iconos.svg"></use></svg>
|
||||||
|
|
||||||
<!-- Estilos Centralizados -->
|
<!-- Estilos Centralizados -->
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -111,186 +113,376 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- BLOQUE 3: LA BRÚJULA IDE (DIAGNÓSTICO INTERACTIVO DE 3 PASOS) -->
|
<!-- BLOQUE 3: QUIZ INTERACTIVO -->
|
||||||
<section class="section-padding-sm" id="brujula">
|
<section class="section-padding-sm" id="quiz-refactorizado">
|
||||||
<div class="container">
|
<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>
|
<div class="quiz-header" style="position: relative; display: flex; flex-direction: column; gap: 0.5rem;">
|
||||||
<span class="eyebrow" style="color: var(--ide-accent);">HERRAMIENTA DE CONSULTORÍA INTERACTIVA</span>
|
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
||||||
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">La Brújula IDE: Diagnóstico Rápido de Conectividad</h2>
|
<div>
|
||||||
<p style="font-size: 0.95rem; color: var(--text-muted);">
|
<span class="eyebrow" style="color: var(--ide-accent);">ENCONTRÁ TU CAMINO</span>
|
||||||
¿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.
|
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">¿Por dónde empezamos?</h2>
|
||||||
</p>
|
<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>
|
</div>
|
||||||
<div style="text-align: right;">
|
<div style="display: flex; justify-content: flex-end; padding-top: 0.5rem; margin-top: 0.25rem;">
|
||||||
<span id="brujula-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent);">Paso 1 de 3</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Barra de Progreso -->
|
<!-- BARRA DE PROGRESO (estilo Opción A) -->
|
||||||
<div class="brujula-progress-bar">
|
<div class="quiz-progress-bar">
|
||||||
<div id="brujula-progress-fill" class="brujula-progress-fill"></div>
|
<div id="quiz-progress-fill" class="quiz-progress-fill"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- PASO 1: EL FOCO / PRIORIDAD -->
|
<!-- ==========================================================
|
||||||
<div class="brujula-step active" id="brujula-step-1">
|
PASO 1: Situación actual
|
||||||
<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>
|
<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>
|
||||||
<div class="brujula-options-grid">
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente tu contexto:</p>
|
||||||
<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>
|
<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>
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">
|
||||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar procesos, certificar ISO 9001/14001/45001 y elevar la calidad.</span>
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<div class="brujula-option-card brujula-opt-step1" data-val="proyectos" id="opt-foco-proyectos">
|
<div class="quiz-option-card" data-step="1" data-val="objetivo">
|
||||||
<div class="brujula-radio-bullet"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Ejecutar proyectos con resultados garantizados</strong>
|
<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);">Profesionalizar la gestión, crear una PMO y evitar desvíos en plazos.</span>
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Tengo un objetivo claro, pero no sé cómo alcanzarlo.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="brujula-option-card brujula-opt-step1" data-val="equipo" id="opt-foco-equipo">
|
<div class="quiz-option-card" data-step="1" data-val="solucion">
|
||||||
<div class="brujula-radio-bullet"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Desarrollar las capacidades de mi equipo</strong>
|
<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);">Capacitación In-Company, liderazgo, pensamiento de procesos y cultura.</span>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="brujula-option-card brujula-opt-step1" data-val="tecnologia" id="opt-foco-tecnologia">
|
<div class="quiz-option-card" data-step="1" data-val="conocimiento">
|
||||||
<div class="brujula-radio-bullet"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Integrar tecnología, automatización o IA</strong>
|
<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);">Transformar digitalmente las tareas rutinarias y aprovechar datos.</span>
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Busco formación, capacitación o conocimiento especializado.</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<!-- PASO 2: EL DOLOR / OBSTÁCULO -->
|
<!-- ==========================================================
|
||||||
<div class="brujula-step" id="brujula-step-2">
|
PASO 2A: Desafío (¿Qué área no funciona?)
|
||||||
<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="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>
|
||||||
<div class="brujula-options-grid">
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos el área crítica:</p>
|
||||||
<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>
|
<div>
|
||||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Falta de claridad en los procesos</strong>
|
<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);">Las áreas trabajan en silos y la información no fluye adecuadamente.</span>
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Los procesos no son eficientes o no están claros.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="brujula-option-card brujula-opt-step2" data-val="desvios" id="opt-dolor-desvios">
|
<div class="quiz-option-card" data-step="2a" data-val="proyectos">
|
||||||
<div class="brujula-radio-bullet"></div>
|
|
||||||
<div>
|
<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>
|
<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);">Cuesta concretar las iniciativas estratégicas en tiempo y forma.</span>
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Los proyectos no llegan a destino o se desvían.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="brujula-option-card brujula-opt-step2" data-val="adopcion" id="opt-dolor-adopcion">
|
<div class="quiz-option-card" data-step="2a" data-val="personas">
|
||||||
<div class="brujula-radio-bullet"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">El equipo no adopta los cambios</strong>
|
<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);">Hay resistencia cultural o falta de capacitación para sostener las mejoras.</span>
|
<span style="font-size: 0.84rem; color: var(--text-muted);">El equipo necesita desarrollar nuevas habilidades.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="brujula-option-card brujula-opt-step2" data-val="herramientas" id="opt-dolor-herramientas">
|
<div class="quiz-option-card" data-step="2a" data-val="tecnologia">
|
||||||
<div class="brujula-radio-bullet"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Tenemos herramientas, pero no las aprovechamos</strong>
|
<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);">Se incorporó software o tecnología pero no se integró con la operación diaria.</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; justify-content: flex-end; margin-top: 2rem;">
|
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||||
<button id="brujula-btn-next2" class="btn btn-accent" disabled>Obtener Orientación Personalizada →</button>
|
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- PASO 3: EL RESULTADO DINÁMICO -->
|
<!-- ==========================================================
|
||||||
<div class="brujula-step" id="brujula-step-3">
|
PASO 2B: Objetivo (¿Qué querés lograr?)
|
||||||
<div class="brujula-result-box">
|
========================================================== -->
|
||||||
|
<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;">
|
<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>
|
</div>
|
||||||
<h3 id="brujula-result-capacidades" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||||
IDE Excellence + IDE Academy
|
<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>
|
</h3>
|
||||||
<p id="brujula-result-desc" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
|
<p id="resultBody" 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.
|
Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
<div id="resultChips" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;"></div>
|
||||||
<a id="brujula-result-cta" href="contacto.html" class="btn btn-primary">
|
|
||||||
Conversar con un especialista sobre este diagnóstico →
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: space-between;">
|
||||||
</a>
|
<div style="display: flex; flex-direction: row; gap: 0.5rem;">
|
||||||
<button id="brujula-btn-restart" class="btn btn-outline btn-sm">
|
<a id="resultCTA" href="desafios.html" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
|
||||||
Reiniciar Diagnóstico
|
Explorar por desafío →
|
||||||
</button>
|
</a>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- BLOQUE 4: EL MÉTODO IDE (4 PASOS) -->
|
<!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
|
||||||
<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) -->
|
|
||||||
<section class="section-padding">
|
<section class="section-padding">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- BLOQUE 6: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
<!-- BLOQUE 5: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
||||||
<section class="section-padding-sm bg-subtle-section">
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div style="text-align: center; margin-bottom: 2.5rem;">
|
<div style="text-align: center; margin-bottom: 2.5rem;">
|
||||||
@@ -397,7 +589,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- BLOQUE 7: CTA FINAL DE CONVERSIÓN -->
|
<!-- BLOQUE 6: CTA FINAL DE CONVERSIÓN -->
|
||||||
<section class="section-padding">
|
<section class="section-padding">
|
||||||
<div class="container">
|
<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;">
|
<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;">
|
||||||
|
|||||||
+252
-124
@@ -241,139 +241,267 @@ function closeModal(modalId) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ================================================================
|
||||||
5. Bloque 3: La Brújula IDE (Diagnóstico en 3 Pasos)
|
JS QUIZ
|
||||||
========================================================================== */
|
================================================================ */
|
||||||
const brujulaState = {
|
|
||||||
foco: null,
|
|
||||||
focoTexto: '',
|
|
||||||
dolor: null,
|
|
||||||
dolorTexto: '',
|
|
||||||
recomendacion: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
function initBrujulaIDE() {
|
(function () {
|
||||||
const container = document.getElementById('brujula-interactive-app');
|
// ----- 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;
|
if (!container) return;
|
||||||
|
|
||||||
const step1Options = container.querySelectorAll('.brujula-opt-step1');
|
// ----- FUNCIONES -----
|
||||||
const step2Options = container.querySelectorAll('.brujula-opt-step2');
|
function showStep(id) {
|
||||||
const btnNext1 = document.getElementById('brujula-btn-next1');
|
const steps = container.querySelectorAll('.quiz-step');
|
||||||
const btnNext2 = document.getElementById('brujula-btn-next2');
|
steps.forEach(s => s.classList.remove('active'));
|
||||||
const btnRestart = document.getElementById('brujula-btn-restart');
|
|
||||||
|
|
||||||
// Selección paso 1
|
const el = document.getElementById('step-' + id);
|
||||||
step1Options.forEach(opt => {
|
if (el) el.classList.add('active');
|
||||||
opt.addEventListener('click', () => {
|
|
||||||
step1Options.forEach(o => o.classList.remove('selected'));
|
updateProgress(id);
|
||||||
opt.classList.add('selected');
|
updateIndicator(id);
|
||||||
brujulaState.foco = opt.getAttribute('data-val');
|
}
|
||||||
brujulaState.focoTexto = opt.querySelector('.opt-title').innerText;
|
|
||||||
if (btnNext1) btnNext1.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 (btnNext1) {
|
showStep(1);
|
||||||
btnNext1.addEventListener('click', () => {
|
|
||||||
if (!brujulaState.foco) return;
|
|
||||||
showBrujulaStep(2);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Selección paso 2
|
// Ejecutar al cargar el DOM
|
||||||
step2Options.forEach(opt => {
|
if (document.readyState === 'loading') {
|
||||||
opt.addEventListener('click', () => {
|
document.addEventListener('DOMContentLoaded', initQuiz);
|
||||||
step2Options.forEach(o => o.classList.remove('selected'));
|
} else {
|
||||||
opt.classList.add('selected');
|
initQuiz();
|
||||||
brujulaState.dolor = opt.getAttribute('data-val');
|
|
||||||
brujulaState.dolorTexto = opt.querySelector('.opt-title').innerText;
|
|
||||||
if (btnNext2) btnNext2.removeAttribute('disabled');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (btnNext2) {
|
|
||||||
btnNext2.addEventListener('click', () => {
|
|
||||||
if (!brujulaState.dolor) return;
|
|
||||||
calculateBrujulaResult();
|
|
||||||
showBrujulaStep(3);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
})();
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
6. Carga Dinámica de Cursos en IDE Academy (cursos.json)
|
||||||
|
|||||||
Reference in New Issue
Block a user