473 lines
22 KiB
HTML
473 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>IDE Consultores – Inicio</title>
|
||
<link rel="stylesheet" href="/styles/styles.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div id="navbar-slot"></div>
|
||
|
||
<main>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero hero--centered section">
|
||
<div class="container">
|
||
<p class="eyebrow">Todo está conectado</p>
|
||
<h1>Mejorar una parte no siempre mejora el todo.</h1>
|
||
<div class="divider divider--center"></div>
|
||
<p style="font-size:1.05rem; max-width:54ch;">En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema.</p>
|
||
|
||
<div class="hero__entry-cards mt-2">
|
||
<a href="desafios.html" class="entry-card">
|
||
<div class="label">Tengo un desafío</div>
|
||
<p>Algo no funciona como debería, pero no sé exactamente qué necesito.</p>
|
||
</a>
|
||
<a href="soluciones.html" class="entry-card">
|
||
<div class="label">Busco una solución</div>
|
||
<p>Necesito ISO, una PMO, formación o transformación digital.</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CUESTIONARIO DE ORIENTACIÓN -->
|
||
<!-- ============================================================
|
||
BLOQUE QUIZ · también disponible en quiz-block.html
|
||
Estilos y scripts están embebidos en ese archivo para revisión.
|
||
En producción, mover CSS a styles.css y JS a scripts.js.
|
||
============================================================ -->
|
||
|
||
<section class="quiz-section">
|
||
<div class="container">
|
||
|
||
<div class="quiz-intro fade-in">
|
||
<p class="eyebrow">Encontrá tu camino</p>
|
||
<h2>¿Por dónde empezamos?</h2>
|
||
<p>Cuatro preguntas para entender tu situación y orientarte hacia lo que realmente necesitás.</p>
|
||
</div>
|
||
|
||
<div class="quiz-wrapper fade-in">
|
||
|
||
<!-- BARRA DE PROGRESO -->
|
||
<div class="quiz-progress">
|
||
<div class="quiz-progress__bar">
|
||
<div class="quiz-progress__fill" id="quizProgressFill"></div>
|
||
</div>
|
||
<span class="quiz-progress__label" id="quizProgressLabel">Pregunta 1 de 4</span>
|
||
</div>
|
||
|
||
<!-- PASO 1 -->
|
||
<div class="quiz-step active" id="step-1">
|
||
<p class="quiz-question">¿Qué describe mejor tu situación hoy?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-opt" data-step="1" data-val="desafio">
|
||
<span class="quiz-opt__icon">🔍</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Algo no está funcionando</strong>
|
||
<span>Tengo un problema, pero no sé bien qué solución necesito.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="1" data-val="objetivo">
|
||
<span class="quiz-opt__icon">🎯</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Sé qué quiero lograr</strong>
|
||
<span>Tengo un objetivo claro, pero no sé cómo alcanzarlo.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="1" data-val="solucion">
|
||
<span class="quiz-opt__icon">⚙️</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Sé exactamente qué necesito</strong>
|
||
<span>Busco ISO, PMO, transformación digital u otra solución concreta.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="1" data-val="conocimiento">
|
||
<span class="quiz-opt__icon">📚</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Quiero aprender o formarme</strong>
|
||
<span>Busco formación, capacitación o conocimiento especializado.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PASO 2A · desafío -->
|
||
<div class="quiz-step" id="step-2a">
|
||
<p class="quiz-question">¿En qué área sentís que algo no funciona como debería?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-opt" data-step="2a" data-val="gestion">
|
||
<span class="quiz-opt__icon">📊</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Gestión y procesos</strong>
|
||
<span>Los procesos no son eficientes o no están claros.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2a" data-val="proyectos">
|
||
<span class="quiz-opt__icon">📌</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Proyectos y resultados</strong>
|
||
<span>Los proyectos no llegan a destino o se desvían.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2a" data-val="personas">
|
||
<span class="quiz-opt__icon">👥</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Personas y capacidades</strong>
|
||
<span>El equipo necesita desarrollar nuevas habilidades.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2a" data-val="tecnologia">
|
||
<span class="quiz-opt__icon">🤖</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Tecnología e innovación</strong>
|
||
<span>La organización necesita digitalizarse o incorporar IA.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2a" data-val="nosabe">
|
||
<span class="quiz-opt__icon">🌐</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>No sé bien dónde está el problema</strong>
|
||
<span>Algo no funciona, pero es difícil de identificar.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||
</div>
|
||
|
||
<!-- PASO 2B · objetivo -->
|
||
<div class="quiz-step" id="step-2b">
|
||
<p class="quiz-question">¿Qué querés lograr?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-opt" data-step="2b" data-val="mejorar-gestion">
|
||
<span class="quiz-opt__icon">📈</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Mejorar la gestión y los procesos</strong>
|
||
<span>Ordenar, optimizar y hacer más eficiente la operación.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2b" data-val="profesionalizar-proyectos">
|
||
<span class="quiz-opt__icon">🏗️</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Profesionalizar la gestión de proyectos</strong>
|
||
<span>Que los proyectos se entreguen en tiempo y con los resultados esperados.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2b" data-val="desarrollar-equipo">
|
||
<span class="quiz-opt__icon">🌱</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Desarrollar las capacidades del equipo</strong>
|
||
<span>Que las personas estén preparadas para los desafíos que vienen.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2b" data-val="transformar-digital">
|
||
<span class="quiz-opt__icon">⚡</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Transformar digitalmente la organización</strong>
|
||
<span>Integrar tecnología e IA de manera estratégica y sostenible.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||
</div>
|
||
|
||
<!-- PASO 2C · solución concreta -->
|
||
<div class="quiz-step" id="step-2c">
|
||
<p class="quiz-question">¿Qué solución estás buscando?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-opt" data-step="2c" data-val="iso">
|
||
<span class="quiz-opt__icon">✅</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>ISO o sistema de gestión</strong>
|
||
<span>ISO 9001, 14001, 45001 u otra norma de gestión.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2c" data-val="pmo">
|
||
<span class="quiz-opt__icon">📐</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>PMO o gestión de proyectos</strong>
|
||
<span>Implementar una oficina de proyectos o mejorar su gestión.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2c" data-val="formacion">
|
||
<span class="quiz-opt__icon">🎓</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Formación para mi organización</strong>
|
||
<span>Capacitación in company o programas de desarrollo.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2c" data-val="ia-digital">
|
||
<span class="quiz-opt__icon">🤖</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Transformación digital e IA</strong>
|
||
<span>Digitalización de procesos, automatización o IA aplicada.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||
</div>
|
||
|
||
<!-- PASO 2D · conocimiento -->
|
||
<div class="quiz-step" id="step-2d">
|
||
<p class="quiz-question">¿Qué tipo de formación o conocimiento buscás?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-opt" data-step="2d" data-val="iso-form">
|
||
<span class="quiz-opt__icon">📋</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Normas ISO y sistemas de gestión</strong>
|
||
<span>Auditoría interna, implementación de normas, mejora continua.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2d" data-val="pm-form">
|
||
<span class="quiz-opt__icon">📌</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Gestión de proyectos</strong>
|
||
<span>Herramientas, metodologías, PMP, ágil, híbrido.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2d" data-val="liderazgo-form">
|
||
<span class="quiz-opt__icon">🧭</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Liderazgo y cambio organizacional</strong>
|
||
<span>Desarrollo de líderes y gestión del cambio.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt" data-step="2d" data-val="ia-form">
|
||
<span class="quiz-opt__icon">🤖</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Inteligencia artificial y tecnología</strong>
|
||
<span>IA aplicada, transformación digital para equipos no técnicos.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||
</div>
|
||
|
||
<!-- PASO 3 · urgencia -->
|
||
<div class="quiz-step" id="step-3">
|
||
<p class="quiz-question">¿Cómo describirías el momento en que está tu organización?</p>
|
||
<div class="quiz-options quiz-options--2col">
|
||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="explorando">
|
||
<span class="quiz-opt__icon">🔭</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Estoy explorando</strong>
|
||
<span>Todavía en etapa de análisis, sin decisiones tomadas.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="evaluando">
|
||
<span class="quiz-opt__icon">⚖️</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Estamos evaluando opciones</strong>
|
||
<span>Comparando enfoques o proveedores antes de avanzar.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="listo">
|
||
<span class="quiz-opt__icon">🚀</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Queremos avanzar pronto</strong>
|
||
<span>La decisión está tomada, necesitamos un socio para ejecutar.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt quiz-opt--compact" data-step="3" data-val="requisito">
|
||
<span class="quiz-opt__icon">📅</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Tenemos un requisito o plazo</strong>
|
||
<span>Una certificación, licitación o cliente lo exige.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||
</div>
|
||
|
||
<!-- PASO 4 · rol -->
|
||
<div class="quiz-step" id="step-4">
|
||
<p class="quiz-question">¿Cuál es tu rol en la organización?</p>
|
||
<div class="quiz-options quiz-options--2col">
|
||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="direccion">
|
||
<span class="quiz-opt__icon">🏢</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Dirección o Gerencia</strong>
|
||
<span>CEO, director, gerente general.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="responsable">
|
||
<span class="quiz-opt__icon">📂</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Responsable de área</strong>
|
||
<span>Jefe, coordinador, líder de proceso o proyecto.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="rrhh">
|
||
<span class="quiz-opt__icon">👥</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Recursos Humanos</strong>
|
||
<span>Gestión de personas, formación y desarrollo.</span>
|
||
</span>
|
||
</button>
|
||
<button class="quiz-opt quiz-opt--compact" data-step="4" data-val="otro">
|
||
<span class="quiz-opt__icon">💼</span>
|
||
<span class="quiz-opt__body">
|
||
<strong>Otro rol</strong>
|
||
<span>Consultor, proveedor, investigador, estudiante.</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<button class="quiz-back" onclick="goBack()">← Volver</button>
|
||
</div>
|
||
|
||
<!-- RESULTADO -->
|
||
<div class="quiz-step quiz-result" id="step-result">
|
||
<div class="quiz-result__icon" id="resultIcon"></div>
|
||
<p class="quiz-result__profile" id="resultProfile"></p>
|
||
<h3 class="quiz-result__title" id="resultTitle"></h3>
|
||
<p class="quiz-result__body" id="resultBody"></p>
|
||
<div class="quiz-result__chips" id="resultChips"></div>
|
||
<div class="quiz-result__actions">
|
||
<a id="resultCTA" href="#" class="btn btn--primary">Ver contenido recomendado</a>
|
||
<a href="contacto.html" class="btn btn--outline">Hablemos directamente</a>
|
||
</div>
|
||
<button class="quiz-restart" onclick="restartQuiz()">Volver a empezar</button>
|
||
</div>
|
||
|
||
</div><!-- /.quiz-wrapper -->
|
||
</div><!-- /.container -->
|
||
</section>
|
||
|
||
<!-- LA TENSIÓN -->
|
||
<section class="section section--surface">
|
||
<div class="container">
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
|
||
<div class="fade-in">
|
||
<p class="eyebrow">El problema real</p>
|
||
<h2>Soluciones aisladas para problemas que nunca estuvieron realmente aislados.</h2>
|
||
<div class="divider"></div>
|
||
<p>Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. La raíz rara vez está donde parece.</p>
|
||
</div>
|
||
<!-- Gráfico minimalista SVG -->
|
||
<div class="fade-in" style="display:flex; justify-content:center;">
|
||
<svg width="260" height="200" viewBox="0 0 260 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Nodos desconectados (problema) -->
|
||
<circle cx="50" cy="60" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||
<circle cx="130" cy="40" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||
<circle cx="210" cy="60" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||
<!-- Nodos conectados (IDE) -->
|
||
<circle cx="50" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
|
||
<circle cx="130" cy="128" r="18" fill="#1B5E6E" opacity="0.9"/>
|
||
<circle cx="210" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
|
||
<line x1="50" y1="148" x2="130" y2="128" stroke="#29B99A" stroke-width="2.5"/>
|
||
<line x1="130" y1="128" x2="210" y2="148" stroke="#29B99A" stroke-width="2.5"/>
|
||
<line x1="50" y1="148" x2="210" y2="148" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||
<!-- Labels -->
|
||
<text x="130" y="190" text-anchor="middle" font-size="10" fill="#29B99A" font-family="Inter,sans-serif">Sistema conectado</text>
|
||
<text x="130" y="22" text-anchor="middle" font-size="10" fill="#9E9E9E" font-family="Inter,sans-serif">Partes aisladas</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- METODOLOGÍA -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="text-center mb-3 fade-in">
|
||
<p class="eyebrow">Principio IDE</p>
|
||
<h2>Comprender el todo para saber dónde intervenir.</h2>
|
||
</div>
|
||
<div class="process-steps fade-in">
|
||
<div class="step">
|
||
<div class="step__num">01</div>
|
||
<div class="step__text">
|
||
<h3>Comprender</h3>
|
||
<p>Mapeo sistémico de la organización y su contexto.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step__num">02</div>
|
||
<div class="step__text">
|
||
<h3>Focalizar</h3>
|
||
<p>Identificar dónde intervenir genera mayor impacto.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step__num">03</div>
|
||
<div class="step__text">
|
||
<h3>Integrar</h3>
|
||
<p>Conectar capacidades del ecosistema IDE con precisión.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step__num">04</div>
|
||
<div class="step__text">
|
||
<h3>Transformar</h3>
|
||
<p>Resultados sostenibles que fortalecen el sistema.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ECOSISTEMA -->
|
||
<section class="section section--surface">
|
||
<div class="container">
|
||
<div class="text-center mb-3 fade-in">
|
||
<p class="eyebrow">Ecosistema IDE</p>
|
||
<h2>No se trata de sumar soluciones. Se trata de conectar capacidades.</h2>
|
||
</div>
|
||
<div class="grid-4 fade-in">
|
||
<a href="ecosistema.html" class="eco-card">
|
||
<div class="eco-card__name">Excellence</div>
|
||
<div class="eco-card__sub">Sistemas de gestión y mejora continua.</div>
|
||
</a>
|
||
<a href="ecosistema.html" class="eco-card">
|
||
<div class="eco-card__name">Project</div>
|
||
<div class="eco-card__sub">Gestión de proyectos y PMO.</div>
|
||
</a>
|
||
<a href="academy.html" class="eco-card">
|
||
<div class="eco-card__name">Academy</div>
|
||
<div class="eco-card__sub">Desarrollo de capacidades organizacionales.</div>
|
||
</a>
|
||
<a href="ecosistema.html" class="eco-card">
|
||
<div class="eco-card__name">Digital</div>
|
||
<div class="eco-card__sub">Transformación digital e inteligencia artificial.</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTORES -->
|
||
<section class="section">
|
||
<div class="container fade-in">
|
||
<p class="eyebrow">Sectores</p>
|
||
<h2 class="mb-2">Acompañamos la transformación en contextos complejos.</h2>
|
||
<div class="sectors">
|
||
<div class="sector-pill">🌾 Agro</div>
|
||
<div class="sector-pill">🏥 Salud</div>
|
||
<div class="sector-pill">🎓 Educación</div>
|
||
<div class="sector-pill">🏭 Industria</div>
|
||
<div class="sector-pill">🏗️ Infraestructura</div>
|
||
<div class="sector-pill">⚡ Energía</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA FINAL -->
|
||
<section class="section section--dark text-center">
|
||
<div class="container fade-in">
|
||
<p class="eyebrow">¿Empezamos?</p>
|
||
<h2>¿Qué desafío querés transformar?</h2>
|
||
<p style="margin:1rem auto 2rem; max-width:42ch;">Empecemos por entenderlo.</p>
|
||
<a href="contacto.html" class="btn btn--white">Hablemos</a>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<div id="footer-slot"></div>
|
||
|
||
<script src="scripts/layout.js"></script>
|
||
<script src="scripts/scripts.js"></script>
|
||
|
||
</body>
|
||
</html> |