Files
IDE-Demo-B/index.html
T
2026-09-26 10:56:43 -03:00

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">
<div class="container">
<div class="hero-grid">
<div>
<span class="eyebrow">CONECTAMOS EL TODO</span>
<h1 style="margin-bottom: 0.5rem; 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: 8rem;">
<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;">
No todos los desafíos 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" 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">
No todas las organizaciones necesitan 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 bg-subtle-section">
<div class="container">
<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>
</section>
<!-- 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-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>