Files
IDE-Demo-B/index.html
T
2026-09-09 04:00:47 -03:00

719 lines
36 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="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="hero-wrapper section-padding">
<div class="container">
<div class="hero-grid">
<div>
<span class="eyebrow">TODO ESTÁ CONECTADO</span>
<h1 style="margin-bottom: 1.25rem; line-height: 1.15;">
Mejorar una parte no siempre mejora el todo.
</h1>
<p class="lead-text" style="margin-bottom: 2rem;">
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>
<!-- 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 desafío</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" style="gap: 3rem;">
<canvas id="ripple-canvas"></canvas>
<div class="incomodidad-content">
<div class="tension-box" style="margin-bottom: 8rem;">
<div style="max-width: 800px; margin: 0 auto; text-align: center;">
<span class="eyebrow">LA INCOMODIDAD PRODUCTIVA</span>
<h2 style="margin-bottom: 1.5rem;">
Soluciones aisladas para problemas que nunca estuvieron realmente aislados.
</h2>
<p style="font-size: 1.1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.5rem;">
Las organizaciones ya tienen procesos, herramientas, personas y tecnología. Sin embargo, algunos desafíos persisten. ¿Por qué? Porque sumar soluciones inconexas no genera transformación. Una mejora en un área puede crear tensiones en otra si no se comprende el sistema completo.
</p>
<div 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 produjo esa 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);">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="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: 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>
</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. Una misma mirada.</h2>
<p class="lead-text">
No son unidades separadas compitiendo por vender. Son capacidades complementarias que se activan según la necesidad real.
</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">
<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, 21001), 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-primary);">Explorar Excellence →</a>
</div>
<!-- Project -->
<div class="ecosystem-card">
<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-accent);">Explorar Project →</a>
</div>
<!-- Academy -->
<div class="ecosystem-card">
<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 para que los equipos adopten los cambios y sostengan la transformación en el tiempo.
</p>
</div>
<a href="ide-academy.html" style="font-size: 0.88rem; font-weight: 700; color: #D97706;">Explorar Academy →</a>
</div>
<!-- Digital -->
<div class="ecosystem-card">
<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: #6366F1;">Explorar Digital →</a>
</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;">Acompañamos la transformación en contextos complejos</h2>
<p style="font-size: 0.95rem; color: var(--text-muted); max-width: 65ch; margin: 0.5rem auto 0 auto;">
Nuestra metodología se adapta a las particularidades y normativas de múltiples industrias en la región.
</p>
</div>
<div class="grid-4" style="text-align: center;">
<div class="card-agro">
<svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
<use href="./assets/iconos/agro_color.svg" fill="currentColor"></use>
</svg>
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Agro & Alimentos</h4>
<p style="font-size: 0.82rem;">Trazabilidad, normas de inocuidad y profesionalización de operaciones.</p>
</div>
<div class="card-fabrica" style="padding: 1.5rem 1rem;" text-align: center;">
<svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
<use href="./assets/iconos/fabrica_color.svg" fill="currentColor"></use>
</svg>
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Industria & Manufactura</h4>
<p style="font-size: 0.82rem;">Eficiencia operativa, seguridad (ISO 45001) y calidad sostenida.</p>
</div>
<div class="card-salud" style="padding: 1.5rem 1rem;" text-align: center;">
<svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
<use href="./assets/iconos/nurse_color.svg" fill="currentColor"></use>
</svg>
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Salud & Servicios</h4>
<p style="font-size: 0.82rem;">Gestión por procesos críticos, experiencia del paciente y cumplimiento.</p>
</div>
<div class="card-educacion" style="padding: 1.5rem 1rem;">
<svg class="icono" width="2.5rem" height="2.5rem" style="margin-bottom: 0.5rem; display: block; margin-left: auto; margin-right: auto;">
<use href="./assets/iconos/escuela_color.svg" fill="currentColor"></use>
</svg>
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Educación & Gobierno</h4>
<p style="font-size: 0.82rem;">Norma ISO 21001, transformación de planes y gestión institucional.</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) 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;">
No necesitás tener la solución predefinida para empezar. Empecemos por entender el contexto de tu organización.
</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/ripple.js"></script>
</body>
</html>