pack de iconos
This commit is contained in:
+316
-124
@@ -11,9 +11,11 @@
|
||||
<meta property="og:title" content="IDE Consultores | Todo está conectado">
|
||||
<meta property="og:description" content="En una organización, cada decisión genera efectos más allá del lugar donde interviene. Ecosistema de capacidades integradas.">
|
||||
<meta property="og:type" content="website">
|
||||
<svg style="display:none;"><use href="assets/iconos/iconos.svg"></use></svg>
|
||||
|
||||
<!-- Estilos Centralizados -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -111,186 +113,376 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 3: LA BRÚJULA IDE (DIAGNÓSTICO INTERACTIVO DE 3 PASOS) -->
|
||||
<section class="section-padding-sm" id="brujula">
|
||||
<!-- BLOQUE 3: QUIZ INTERACTIVO -->
|
||||
<section class="section-padding-sm" id="quiz-refactorizado">
|
||||
<div class="container">
|
||||
<div class="brujula-container" id="brujula-interactive-app">
|
||||
|
||||
<div class="brujula-header">
|
||||
<div>
|
||||
<span class="eyebrow" style="color: var(--ide-accent);">HERRAMIENTA DE CONSULTORÍA INTERACTIVA</span>
|
||||
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">La Brújula IDE: Diagnóstico Rápido de Conectividad</h2>
|
||||
<p style="font-size: 0.95rem; color: var(--text-muted);">
|
||||
¿No estás seguro de por dónde empezar? Respondé 2 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
|
||||
</p>
|
||||
<div class="quiz-container" id="quiz-interactive-app">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="quiz-header" style="position: relative; display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
||||
<div>
|
||||
<span class="eyebrow" style="color: var(--ide-accent);">ENCONTRÁ TU CAMINO</span>
|
||||
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">¿Por dónde empezamos?</h2>
|
||||
<p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0;">
|
||||
Respondé 4 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<span id="brujula-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent);">Paso 1 de 3</span>
|
||||
<div style="display: flex; justify-content: flex-end; padding-top: 0.5rem; margin-top: 0.25rem;">
|
||||
<span id="quiz-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent); white-space: nowrap;">Paso 1 de 4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Progreso -->
|
||||
<div class="brujula-progress-bar">
|
||||
<div id="brujula-progress-fill" class="brujula-progress-fill"></div>
|
||||
<!-- BARRA DE PROGRESO (estilo Opción A) -->
|
||||
<div class="quiz-progress-bar">
|
||||
<div id="quiz-progress-fill" class="quiz-progress-fill"></div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 1: EL FOCO / PRIORIDAD -->
|
||||
<div class="brujula-step active" id="brujula-step-1">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">1. ¿Cuál es tu prioridad u objetivo principal hoy?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente lo que buscan impulsar:</p>
|
||||
|
||||
<div class="brujula-options-grid">
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="iso" id="opt-foco-iso">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<!-- ==========================================================
|
||||
PASO 1: Situación actual
|
||||
========================================================== -->
|
||||
<div class="quiz-step active" id="step-1">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué describe mejor tu situación hoy?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente tu contexto:</p>
|
||||
|
||||
<div class="quiz-options-grid">
|
||||
<div class="quiz-option-card" data-step="1" data-val="desafio">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Mejorar la gestión y cumplir normas (ISO)</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar procesos, certificar ISO 9001/14001/45001 y elevar la calidad.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">
|
||||
<!-- Icono CORREGIDO -->
|
||||
<svg class="icono" width="24" height="24">
|
||||
<use href="assets/iconos/iconos.svg#search-1"></use>
|
||||
</svg>
|
||||
Algo no está funcionando
|
||||
</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">
|
||||
Tengo un problema, pero no sé bien qué solución necesito.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="proyectos" id="opt-foco-proyectos">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div class="quiz-option-card" data-step="1" data-val="objetivo">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Ejecutar proyectos con resultados garantizados</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Profesionalizar la gestión, crear una PMO y evitar desvíos en plazos.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🎯 Sé qué quiero lograr</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Tengo un objetivo claro, pero no sé cómo alcanzarlo.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="equipo" id="opt-foco-equipo">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div class="quiz-option-card" data-step="1" data-val="solucion">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Desarrollar las capacidades de mi equipo</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación In-Company, liderazgo, pensamiento de procesos y cultura.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">⚙️ Sé exactamente qué necesito</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Busco ISO, PMO, transformación digital u otra solución concreta.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="tecnologia" id="opt-foco-tecnologia">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div class="quiz-option-card" data-step="1" data-val="conocimiento">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Integrar tecnología, automatización o IA</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Transformar digitalmente las tareas rutinarias y aprovechar datos.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📚 Quiero aprender o formarme</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Busco formación, capacitación o conocimiento especializado.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; flex-wrap: wrap; gap: 1rem;">
|
||||
<a href="soluciones.html" class="btn btn-ghost btn-sm">Ya sé lo que necesito, ir directo a Soluciones →</a>
|
||||
<button id="brujula-btn-next1" class="btn btn-primary" disabled>Continuar al Paso 2 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 2: EL DOLOR / OBSTÁCULO -->
|
||||
<div class="brujula-step" id="brujula-step-2">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">2. ¿Qué es lo que más dificulta avanzar en este momento?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos la raíz que suele frenar los resultados:</p>
|
||||
|
||||
<div class="brujula-options-grid">
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="procesos" id="opt-dolor-procesos">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<!-- ==========================================================
|
||||
PASO 2A: Desafío (¿Qué área no funciona?)
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-2a">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿En qué área sentís que algo no funciona como debería?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos el área crítica:</p>
|
||||
|
||||
<div class="quiz-options-grid">
|
||||
<div class="quiz-option-card" data-step="2a" data-val="gestion">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Falta de claridad en los procesos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Las áreas trabajan en silos y la información no fluye adecuadamente.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📊 Gestión y procesos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Los procesos no son eficientes o no están claros.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="desvios" id="opt-dolor-desvios">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div class="quiz-option-card" data-step="2a" data-val="proyectos">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Los proyectos se retrasan o se desvían</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Cuesta concretar las iniciativas estratégicas en tiempo y forma.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📌 Proyectos y resultados</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Los proyectos no llegan a destino o se desvían.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="adopcion" id="opt-dolor-adopcion">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div class="quiz-option-card" data-step="2a" data-val="personas">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">El equipo no adopta los cambios</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Hay resistencia cultural o falta de capacitación para sostener las mejoras.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">👥 Personas y capacidades</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">El equipo necesita desarrollar nuevas habilidades.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="herramientas" id="opt-dolor-herramientas">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div class="quiz-option-card" data-step="2a" data-val="tecnologia">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Tenemos herramientas, pero no las aprovechamos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Se incorporó software o tecnología pero no se integró con la operación diaria.</span>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🤖 Tecnología e innovación</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">La organización necesita digitalizarse o incorporar IA.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2a" data-val="nosabe">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🌐 No sé bien dónde está el problema</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Algo no funciona, pero es difícil de identificar.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 2rem;">
|
||||
<button id="brujula-btn-next2" class="btn btn-accent" disabled>Obtener Orientación Personalizada →</button>
|
||||
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 3: EL RESULTADO DINÁMICO -->
|
||||
<div class="brujula-step" id="brujula-step-3">
|
||||
<div class="brujula-result-box">
|
||||
<!-- ==========================================================
|
||||
PASO 2B: Objetivo (¿Qué querés lograr?)
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-2b">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué querés lograr?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Definí tu objetivo principal:</p>
|
||||
|
||||
<div class="quiz-options-grid">
|
||||
<div class="quiz-option-card" data-step="2b" data-val="mejorar-gestion">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📈 Mejorar la gestión y los procesos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar, optimizar y hacer más eficiente la operación.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2b" data-val="profesionalizar-proyectos">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🏗️ Profesionalizar la gestión de proyectos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Que los proyectos se entreguen en tiempo y con los resultados esperados.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2b" data-val="desarrollar-equipo">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🌱 Desarrollar las capacidades del equipo</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Que las personas estén preparadas para los desafíos que vienen.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2b" data-val="transformar-digital">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">⚡ Transformar digitalmente la organización</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Integrar tecnología e IA de manera estratégica y sostenible.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================================
|
||||
PASO 2C: Solución concreta (¿Qué solución buscás?)
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-2c">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué solución estás buscando?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor se ajuste:</p>
|
||||
|
||||
<div class="quiz-options-grid">
|
||||
<div class="quiz-option-card" data-step="2c" data-val="iso">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">✅ ISO o sistema de gestión</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">ISO 9001, 14001, 45001 u otra norma de gestión.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2c" data-val="pmo">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📐 PMO o gestión de proyectos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Implementar una oficina de proyectos o mejorar su gestión.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2c" data-val="formacion">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🎓 Formación para mi organización</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación in company o programas de desarrollo.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2c" data-val="ia-digital">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🤖 Transformación digital e IA</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Digitalización de procesos, automatización o IA aplicada.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================================
|
||||
PASO 2D: Conocimiento (¿Qué formación buscás?)
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-2d">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué tipo de formación o conocimiento buscás?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná el área de interés:</p>
|
||||
|
||||
<div class="quiz-options-grid">
|
||||
<div class="quiz-option-card" data-step="2d" data-val="iso-form">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📋 Normas ISO y sistemas de gestión</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Auditoría interna, implementación de normas, mejora continua.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2d" data-val="pm-form">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📌 Gestión de proyectos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Herramientas, metodologías, PMP, ágil, híbrido.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2d" data-val="liderazgo-form">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🧭 Liderazgo y cambio organizacional</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Desarrollo de líderes y gestión del cambio.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="2d" data-val="ia-form">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🤖 Inteligencia artificial y tecnología</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">IA aplicada, transformación digital para equipos no técnicos.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================================
|
||||
PASO 3: Momento de la organización
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-3">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Cómo describirías el momento en que está tu organización?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor refleje tu situación:</p>
|
||||
|
||||
<div class="quiz-options-grid quiz-options-grid--2col">
|
||||
<div class="quiz-option-card" data-step="3" data-val="explorando">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🔭 Estoy explorando</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Todavía en etapa de análisis, sin decisiones tomadas.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="3" data-val="evaluando">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">⚖️ Estamos evaluando opciones</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Comparando enfoques o proveedores antes de avanzar.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="3" data-val="listo">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🚀 Queremos avanzar pronto</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">La decisión está tomada, necesitamos un socio para ejecutar.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="3" data-val="requisito">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📅 Tenemos un requisito o plazo</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Una certificación, licitación o cliente lo exige.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================================
|
||||
PASO 4: Rol
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-4">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Cuál es tu rol en la organización?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná tu rol para una orientación más precisa:</p>
|
||||
|
||||
<div class="quiz-options-grid quiz-options-grid--2col">
|
||||
<div class="quiz-option-card" data-step="4" data-val="direccion">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">🏢 Dirección o Gerencia</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">CEO, director, gerente general.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="4" data-val="responsable">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">📂 Responsable de área</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Jefe, coordinador, líder de proceso o proyecto.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="4" data-val="rrhh">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">👥 Recursos Humanos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Gestión de personas, formación y desarrollo.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quiz-option-card" data-step="4" data-val="otro">
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">💼 Otro rol</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Consultor, proveedor, investigador, estudiante.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-start; margin-top: 1.5rem;">
|
||||
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================================
|
||||
RESULTADO
|
||||
========================================================== -->
|
||||
<div class="quiz-step" id="step-result">
|
||||
<div class="quiz-result-box">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
|
||||
<span class="ecosystem-badge badge-project" style="font-size: 0.85rem;">Combinación Sugerida de Capacidades</span>
|
||||
<span class="ecosystem-badge badge-project" style="font-size: 0.85rem;" id="resultBadge">Perfil Recomendado</span>
|
||||
</div>
|
||||
<h3 id="brujula-result-capacidades" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
|
||||
IDE Excellence + IDE Academy
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<span id="resultIcon" style="font-size: 2rem;">🔍</span>
|
||||
<span id="resultProfile" style="font-size: 0.9rem; color: var(--text-muted);">Perfil · Diagnóstico</span>
|
||||
</div>
|
||||
<h3 id="resultTitle" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
|
||||
No necesitás tener la respuesta para empezar.
|
||||
</h3>
|
||||
<p id="brujula-result-desc" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
|
||||
La implementación de procesos y normas es el primer paso. Para que sea sostenible, suele ser clave trabajar también en el desarrollo de capacidades de las personas.
|
||||
<p id="resultBody" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
|
||||
Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
||||
<a id="brujula-result-cta" href="contacto.html" class="btn btn-primary">
|
||||
Conversar con un especialista sobre este diagnóstico →
|
||||
</a>
|
||||
<button id="brujula-btn-restart" class="btn btn-outline btn-sm">
|
||||
Reiniciar Diagnóstico
|
||||
</button>
|
||||
<div id="resultChips" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;"></div>
|
||||
|
||||
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: space-between;">
|
||||
<div style="display: flex; flex-direction: row; gap: 0.5rem;">
|
||||
<a id="resultCTA" href="desafios.html" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
|
||||
Explorar por desafío →
|
||||
</a>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 4: EL MÉTODO IDE (4 PASOS) -->
|
||||
<section class="section-padding bg-subtle-section">
|
||||
<div class="container">
|
||||
<div style="text-align: center; max-width: 760px; margin: 0 auto 3.5rem auto;">
|
||||
<span class="eyebrow">LA NUEVA FORMA DE MIRAR</span>
|
||||
<h2>Comprender el todo para saber dónde intervenir</h2>
|
||||
<p class="lead-text" style="margin: 0 auto;">
|
||||
No se trata de intervenir en todo ni de aplicar fórmulas estandarizadas. Guiamos cada intervención bajo un criterio metodológico riguroso:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="method-steps-grid">
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">01</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Comprender el Todo</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Para identificar las verdaderas relaciones y causas raíz detrás de cada desafío.</p>
|
||||
</div>
|
||||
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">02</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Focalizar la Intervención</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Para actuar estratégicamente donde se genera el mayor impacto y valor agregado.</p>
|
||||
</div>
|
||||
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">03</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Integrar Capacidades</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Para que la transformación no quede limitada a una única solución aislada.</p>
|
||||
</div>
|
||||
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">04</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Resultados Sostenibles</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Porque una verdadera mejora no debería solucionar un problema creando otro.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 5: EL ECOSISTEMA (4 CAPACIDADES) -->
|
||||
<!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
|
||||
<section class="section-padding">
|
||||
<div class="container">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
|
||||
@@ -358,7 +550,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 6: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
||||
<!-- BLOQUE 5: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
||||
<section class="section-padding-sm bg-subtle-section">
|
||||
<div class="container">
|
||||
<div style="text-align: center; margin-bottom: 2.5rem;">
|
||||
@@ -397,7 +589,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 7: CTA FINAL DE CONVERSIÓN -->
|
||||
<!-- BLOQUE 6: CTA FINAL DE CONVERSIÓN -->
|
||||
<section class="section-padding">
|
||||
<div class="container">
|
||||
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
|
||||
|
||||
Reference in New Issue
Block a user