721 lines
37 KiB
HTML
721 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IDE Consultores | Todo está conectado</title>
|
|
<!-- SEO Meta Tags -->
|
|
<!-- Favicon -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
|
|
<meta name="description" content="Comprender el todo para saber dónde intervenir. Ecosistema de gestión, proyectos, formación y transformación digital.">
|
|
<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">
|
|
|
|
|
|
<!-- Estilos Centralizados -->
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header Modular (Inyectado dinámicamente por JS) -->
|
|
<header id="site-header"></header>
|
|
|
|
<main>
|
|
|
|
<!-- BLOQUE 1: HERO - LA DOBLE VÍA DE ENTRADA -->
|
|
<section class="section-padding-sm bg2">
|
|
<div class="container">
|
|
<div class="hero-grid">
|
|
<div>
|
|
<span class="eyebrow">CONECTAMOS EL TODO</span>
|
|
<h1 style="margin-bottom: 0.8rem; line-height: 1;">
|
|
¿Qué pasa cuando dejamos de mirar los problemas por separado?
|
|
</h1>
|
|
<p class="lead-text" style="margin-bottom: 2rem;">
|
|
Estrategia, proyectos, personas, procesos, calidad y tecnología están cada vez más conectados. Sin embargo, seguimos intentando resolverlos por separado.
|
|
<br>En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades necesarias y generar valor en el conjunto.
|
|
</p>
|
|
|
|
<!-- Doble Entrada Estratégica -->
|
|
<div class="hero-doble-entrada">
|
|
<!-- Camino A: Por Desafío -->
|
|
<a href="desafios.html" class="btn btn-outline btn-sm" id="hero-entry-desafios">Tengo un problema</a>
|
|
|
|
<!-- Camino B: Por Solución Concreta -->
|
|
<a href="soluciones.html" class="btn btn-outline btn-sm" id="hero-entry-soluciones">Busco una solución</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hero-3d-container" style="width: 100%; height: 500px; position: relative;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BLOQUE 2: LA TENSIÓN Y EL QUIEBRE -->
|
|
<section class="incomodidad-section snowball-bg" style="gap: 3rem;">
|
|
<!--<canvas id="ripple-canvas"></canvas>-->
|
|
<div class="incomodidad-content">
|
|
<div class="tension-box" style="margin-bottom: 4rem;">
|
|
<div style="max-width: 700px; margin: 0 auto; text-align: center;">
|
|
<span class="eyebrow">LA INCOMODIDAD PRODUCTIVA</span>
|
|
<h2 style="margin-bottom: 1.5rem;">
|
|
Cuando los desafíos están conectados,<br> las soluciones también deberían estarlo.
|
|
</h2>
|
|
<p style="font-size: 1.1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.5rem;">
|
|
Una mejora en un proceso, una nueva tecnología, un sistema de gestión o el desarrollo de capacidades puede resolver una necesidad puntual. <br>Pero si no comprendemos cómo esa intervención impacta en el resto, podemos mejorar una parte y generar nuevas tensiones en el conjunto.
|
|
<br>La pregunta que nos hacemos en IDE:
|
|
</p>
|
|
<div id="brujula" style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--text-primary); font-size: 0.95rem;">
|
|
¿Qué impacto tendrá esta mejora en el conjunto?
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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);">Brújula IDE</span>
|
|
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">Encontrá dónde podemos generar impacto</h2>
|
|
<p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0;">
|
|
Todos los desafíos no necesitan la misma estrategia. Respondé 4 preguntas breves y descubrí qué capacidades de IDE pueden aportar mayor valor a tu contexto.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: flex-end; padding-top: 0.5rem; margin-top: 0.25rem;">
|
|
<span id="quiz-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent); white-space: nowrap;">Paso 1 de 4</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BARRA DE PROGRESO (estilo Opción A) -->
|
|
<div class="quiz-progress-bar">
|
|
<div id="quiz-progress-fill" class="quiz-progress-fill"></div>
|
|
</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">
|
|
<svg class="icono">
|
|
<use href="./assets/iconos/lupa_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Algo no está funcionando</span>
|
|
</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="quiz-option-card" data-step="1" data-val="objetivo">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono">
|
|
<use href="./assets/iconos/binocular_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Sé qué quiero lograr</span>
|
|
</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="quiz-option-card" data-step="1" data-val="solucion">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono">
|
|
<use href="./assets/iconos/engranage_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Sé exactamente qué necesito</span>
|
|
</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="quiz-option-card" data-step="1" data-val="conocimiento">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono">
|
|
<use href="./assets/iconos/book_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Quiero aprender o formarme</span>
|
|
</strong>
|
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Busco formación, capacitación o conocimiento especializado.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==========================================================
|
|
PASO 2A: Desafío (¿Qué área no funciona?)
|
|
========================================================== -->
|
|
<div class="quiz-step" id="step-2a">
|
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿En qué área sentís que algo no funciona como debería?</h3>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos el área crítica:</p>
|
|
|
|
<div class="quiz-options-grid">
|
|
<div class="quiz-option-card" data-step="2a" data-val="gestion">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/proceso_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Gestión y procesos</span>
|
|
</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="quiz-option-card" data-step="2a" data-val="proyectos">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/pin_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Proyectos y resultados</span>
|
|
</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="quiz-option-card" data-step="2a" data-val="personas">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/team_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Personas y capacidades</span>
|
|
</strong>
|
|
<span style="font-size: 0.84rem; color: var(--text-muted);">El equipo necesita desarrollar nuevas habilidades.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quiz-option-card" data-step="2a" data-val="tecnologia">
|
|
<div>
|
|
<strong class="opt-title">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/bot_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Tecnología e innovación</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/globo_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>No sé bien dónde está el problema</span>
|
|
</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-start; margin-top: 1.5rem;">
|
|
<button class="quiz-back-btn" onclick="goBack()">← Volver</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==========================================================
|
|
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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/proceso_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Mejorar la gestión y los procesos</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/project_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Profesionalizar la gestión de proyectos</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/seed_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Desarrollar las capacidades del equipo</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/transform_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span></span>Transformar digitalmente la organización</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/list-ok_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Normas ISO y sistemas de gestión</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/plan_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span></span>PMO o gestión de proyectos</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/gorro_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Formación para mi organización</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/bot-2_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Transformación digital e IA</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/list-ok_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Normas ISO y sistemas de gestión</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/pin_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Gestión de proyectos</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/brujula_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Liderazgo y cambio organizacional</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/bot_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Inteligencia artificial y tecnología</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/telescopio_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Estoy explorando</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/balanza_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Estamos evaluando opciones</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/cohete_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Queremos avanzar pronto</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/calendar_color.svg" fill="currentColor"></use>
|
|
</svg>
|
|
<span>Tenemos un requisito o plazo</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/edificio_color.svg" fill="currentColor"></use>
|
|
<span>Dirección o Gerencia</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/boss_color.svg" fill="currentColor"></use>
|
|
<span>Responsable de área</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/team_color.svg" fill="currentColor"></use>
|
|
<span>Recursos Humanos</span>
|
|
</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">
|
|
<svg class="icono" >
|
|
<use href="./assets/iconos/portafolio_color.svg" fill="currentColor"></use>
|
|
<span>Otro rol</span>
|
|
</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">
|
|
|
|
<h3 id="resultTitle" style="font-size: 1.4rem; color: var(--ide-primary-ligth); margin-bottom: 0.75rem;">
|
|
No necesitás tener la respuesta para empezar.
|
|
</h3>
|
|
<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 id="resultChips" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: center;"></div>
|
|
|
|
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; width:100%;">
|
|
<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>
|
|
</section>
|
|
|
|
|
|
<!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
|
|
<section class="section-padding bg2" style="background-color: var(--bg-subtle);">
|
|
<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>
|
|
<span class="eyebrow">ECOSISTEMA INTEGRADO</span>
|
|
<h2>Cuatro capacidades. <br>Un mismo propósito: generar impacto.</h2>
|
|
<p class="lead-text" style="margin-top: 1rem;">
|
|
Las organizaciones no necesitan siempre lo mismo. Integramos las capacidades necesarias para responder a cada desafío sin perder de vista el conjunto.
|
|
<br>En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades necesarias y generar valor en el conjunto.
|
|
</p>
|
|
</div>
|
|
<a href="ecosistema.html" class="btn btn-outline btn-sm">Ver Ecosistema Completo →</a>
|
|
</div>
|
|
|
|
<div class="ecosystem-grid">
|
|
|
|
<!-- Excellence -->
|
|
<div class="ecosystem-card card-excellence">
|
|
<div class="ecosystem-bg-vector"></div>
|
|
<div class="card-content">
|
|
<div>
|
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para fortalecer la gestión</h3>
|
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
|
Sistemas de gestión, normas ISO (9001, 14001, 45001, 50001, 22000, 27001, 28000, 39001, 21001 y 29993), gestión por procesos, calidad y mejora continua con sentido de negocio.
|
|
</p>
|
|
</div>
|
|
<a href="ecosistema.html#excellence" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-excellence);">Explorar Excellence →</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Project -->
|
|
<div class="ecosystem-card card-project">
|
|
<div class="ecosystem-bg-vector"></div>
|
|
<div class="card-content">
|
|
<div>
|
|
<span class="ecosystem-badge badge-project">IDE Project</span>
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para convertir proyectos en resultados</h3>
|
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
|
Dirección estratégica de proyectos, implementación de PMO, metodologías ágiles/híbridas y control de cumplimiento.
|
|
</p>
|
|
</div>
|
|
<a href="ecosistema.html#project" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-projects);">Explorar Project →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Academy -->
|
|
<div class="ecosystem-card card-academy">
|
|
<div class="ecosystem-bg-vector"></div>
|
|
<div class="card-content">
|
|
<div>
|
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para desarrollar capacidades</h3>
|
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
|
Formación ejecutiva e In-Company que conecta conocimiento, práctica y contexto para desarrollar capacidades y sostener la transformación.
|
|
</p>
|
|
</div>
|
|
<a href="ide-academy.html" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-academy);">Explorar Academy →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Digital -->
|
|
<div class="ecosystem-card card-digital">
|
|
<div class="ecosystem-bg-vector"></div>
|
|
<div class="card-content">
|
|
<div>
|
|
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para integrar tecnología con propósito</h3>
|
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
|
Inteligencia artificial aplicada, automatización de flujos de procesos, tableros de datos y transformación digital sensata.
|
|
</p>
|
|
</div>
|
|
<a href="ecosistema.html#digital" style="font-size: 0.88rem; font-weight: 700; color: var( --ide-digital);">Explorar Digital →</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BLOQUE 5: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
|
<section class="section-padding-sm bg1" style="background-color: var(--bg-subtle);">
|
|
<div class="container" style="margin-bottom: 4rem;">
|
|
<div style="text-align: center; margin-bottom: 2.5rem;">
|
|
<span class="eyebrow">ÁMBITOS DE EXPERIENCIA</span>
|
|
<h2 style="font-size: 1.8rem;">El contexto también transforma la solución.</h2>
|
|
<p style="font-size: 0.95rem; color: var(--text-muted); max-width: 65ch; margin: 0.5rem auto 0 auto;">
|
|
Nuestra experiencia en distintos sectores nos permite comprender sus particularidades, requisitos y desafíos para adaptar la intervención sin perder de vista el conjunto.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid-4" style="text-align: center;">
|
|
<div class="card-agro" width="30" height="30" viewBox="0 0 24 24">
|
|
<span class="icono-agro"></span>
|
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Agro & Alimentos</h4>
|
|
<p style="font-size: 0.82rem;">Trazabilidad, inocuidad, buenas prácticas y gestión responsable para fortalecer operaciones y generar valor sostenible.</p>
|
|
</div>
|
|
|
|
<div class="card-fabrica" style="padding: 1.5rem 1rem;" text-align: center;">
|
|
<span class="icono-fabrica"></span>
|
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Industria & Servicios</h4>
|
|
<p style="font-size: 0.82rem;">Procesos, calidad, proyectos y transformación digital para mejorar la gestión, la eficiencia y la capacidad de adaptación.</p>
|
|
</div>
|
|
|
|
<div class="card-salud" style="padding: 1.5rem 1rem;" text-align: center;">
|
|
<span class="icono-salud"></span>
|
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Sector Salud</h4>
|
|
<p style="font-size: 0.82rem;">Procesos críticos, experiencia del paciente y cumplimiento para fortalecer la calidad, la seguridad y la mejora continua.</p>
|
|
</div>
|
|
|
|
<div class="card-educacion" style="padding: 1.5rem 1rem;">
|
|
<span class="icono-educacion"></span>
|
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Educación & Gobierno</h4>
|
|
<p style="font-size: 0.82rem;">Gestión, calidad, proyectos y desarrollo de capacidades para fortalecer organizaciones, servicios y resultados.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--CTA-->
|
|
<div class="container">
|
|
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary-light2) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
|
|
<span class="eyebrow" style="color: var(--ide-accent);">CONVERSACIÓN INICIAL</span>
|
|
<h2 style="color: #FFFFFF; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem;">
|
|
¿Qué desafío querés transformar?
|
|
</h2>
|
|
<p style="color: #E2E8F0; font-size: 1.15rem; max-width: 60ch; margin: 0 auto 2.5rem auto; line-height: 1.6;">
|
|
Empecemos comprendiendo el contexto de tu organización, identificando dónde podemos generar mayor impacto y conectando las capacidades necesarias para transformar el desafío.
|
|
</p>
|
|
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
|
<a href="contacto.html" class="btn btn-accent btn-lg">HABLEMOS</a>
|
|
<a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-lg" style="border-color: rgba(255,255,255,0.4); color: #FFFFFF;">
|
|
Escribir por WhatsApp
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
<!-- Footer Modular (Inyectado dinámicamente por JS) -->
|
|
<footer id="site-footer"></footer>
|
|
<!-- Scripts Centralizados -->
|
|
<script src="js/main.js"></script>
|
|
<!-- Scripts particulas -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="js/particles.js"></script>
|
|
<script src="js/snowball-particles.js"></script>
|
|
</body>
|
|
</html>
|