diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..f799f9e
--- /dev/null
+++ b/AGENTS.md
@@ -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
diff --git a/assets/iconos/iconos.svg b/assets/iconos/iconos.svg
new file mode 100644
index 0000000..2930182
--- /dev/null
+++ b/assets/iconos/iconos.svg
@@ -0,0 +1,42 @@
+
diff --git a/css/styles.css b/css/styles.css
index 4e3dc07..b862492 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -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);
diff --git a/index.html b/index.html
index 300a919..363cd67 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,11 @@
+
+
@@ -111,186 +113,376 @@
-
-
+
+
-
-
-
-
- HERRAMIENTA DE CONSULTORÍA INTERACTIVA
-
La Brújula IDE: Diagnóstico Rápido de Conectividad
-
- ¿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.
-
+
+
+
+
+
+
+ ENCONTRÁ TU CAMINO
+
¿Por dónde empezamos?
+
+ Respondé 4 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
+
+
-
- Paso 1 de 3
+
+ Paso 1 de 4
-
-
-
+
+
+
-
-
-
1. ¿Cuál es tu prioridad u objetivo principal hoy?
-
Seleccioná la opción que mejor represente lo que buscan impulsar:
-
-
-
-
+
+
+
¿Qué describe mejor tu situación hoy?
+
Seleccioná la opción que mejor represente tu contexto:
+
+
+
- Mejorar la gestión y cumplir normas (ISO)
- Ordenar procesos, certificar ISO 9001/14001/45001 y elevar la calidad.
+
+
+
+ Algo no está funcionando
+
+
+ Tengo un problema, pero no sé bien qué solución necesito.
+
-
-
+
- Ejecutar proyectos con resultados garantizados
- Profesionalizar la gestión, crear una PMO y evitar desvíos en plazos.
+ 🎯 Sé qué quiero lograr
+ Tengo un objetivo claro, pero no sé cómo alcanzarlo.
-
-
+
- Desarrollar las capacidades de mi equipo
- Capacitación In-Company, liderazgo, pensamiento de procesos y cultura.
+ ⚙️ Sé exactamente qué necesito
+ Busco ISO, PMO, transformación digital u otra solución concreta.
-
-
+
- Integrar tecnología, automatización o IA
- Transformar digitalmente las tareas rutinarias y aprovechar datos.
+ 📚 Quiero aprender o formarme
+ Busco formación, capacitación o conocimiento especializado.
2. ¿Qué es lo que más dificulta avanzar en este momento?
-
Identifiquemos la raíz que suele frenar los resultados:
-
-
-
-
+
+
+
¿En qué área sentís que algo no funciona como debería?
+
Identifiquemos el área crítica:
+
+
+
- Falta de claridad en los procesos
- Las áreas trabajan en silos y la información no fluye adecuadamente.
+ 📊 Gestión y procesos
+ Los procesos no son eficientes o no están claros.
-
-
+
- Los proyectos se retrasan o se desvían
- Cuesta concretar las iniciativas estratégicas en tiempo y forma.
+ 📌 Proyectos y resultados
+ Los proyectos no llegan a destino o se desvían.
-
-
+
- El equipo no adopta los cambios
- Hay resistencia cultural o falta de capacitación para sostener las mejoras.
+ 👥 Personas y capacidades
+ El equipo necesita desarrollar nuevas habilidades.
-
-
+
- Tenemos herramientas, pero no las aprovechamos
- Se incorporó software o tecnología pero no se integró con la operación diaria.
+ 🤖 Tecnología e innovación
+ La organización necesita digitalizarse o incorporar IA.
+
+
+
+
+
+ 🌐 No sé bien dónde está el problema
+ Algo no funciona, pero es difícil de identificar.
-
-
+
+
-
-
-
+
+
+
¿Qué querés lograr?
+
Definí tu objetivo principal:
+
+
+
+
+ 📈 Mejorar la gestión y los procesos
+ Ordenar, optimizar y hacer más eficiente la operación.
+
+
+
+
+
+ 🏗️ Profesionalizar la gestión de proyectos
+ Que los proyectos se entreguen en tiempo y con los resultados esperados.
+
+
+
+
+
+ 🌱 Desarrollar las capacidades del equipo
+ Que las personas estén preparadas para los desafíos que vienen.
+
+
+
+
+
+ ⚡ Transformar digitalmente la organización
+ Integrar tecnología e IA de manera estratégica y sostenible.
+
+
+
+
+
+
+
+
+
+
+
+
¿Qué solución estás buscando?
+
Seleccioná la opción que mejor se ajuste:
+
+
+
+
+ ✅ ISO o sistema de gestión
+ ISO 9001, 14001, 45001 u otra norma de gestión.
+
+
+
+
+
+ 📐 PMO o gestión de proyectos
+ Implementar una oficina de proyectos o mejorar su gestión.
+
+
+
+
+
+ 🎓 Formación para mi organización
+ Capacitación in company o programas de desarrollo.
+
+
+
+
+
+ 🤖 Transformación digital e IA
+ Digitalización de procesos, automatización o IA aplicada.
+
+
+
+
+
+
+
+
+
+
+
+
¿Qué tipo de formación o conocimiento buscás?
+
Seleccioná el área de interés:
+
+
+
+
+ 📋 Normas ISO y sistemas de gestión
+ Auditoría interna, implementación de normas, mejora continua.
+
+ 📂 Responsable de área
+ Jefe, coordinador, líder de proceso o proyecto.
+
+
+
+
+
+ 👥 Recursos Humanos
+ Gestión de personas, formación y desarrollo.
+
+
+
+
+
+ 💼 Otro rol
+ Consultor, proveedor, investigador, estudiante.
+
+
+
+
+
+
+
+
+
+
+
+
- Combinación Sugerida de Capacidades
+ Perfil Recomendado
-
- IDE Excellence + IDE Academy
+
+ 🔍
+ Perfil · Diagnóstico
+
+
+ No necesitás tener la respuesta para empezar.
-
- 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.