245 lines
13 KiB
HTML
245 lines
13 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>El Ecosistema IDE | Cuatro Capacidades Conectadas - IDE Consultores</title>
|
|
<meta name="description" content="Conocé cómo se articulan IDE Excellence, IDE Project, IDE Academy e IDE Digital para generar valor integral y sostenible en las organizaciones.">
|
|
<meta property="og:title" content="El Ecosistema IDE | Cuatro Capacidades Conectadas">
|
|
<meta property="og:description" content="No se trata de sumar soluciones. Se trata de conectar las capacidades necesarias para una transformación real.">
|
|
<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">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header id="site-header"></header>
|
|
|
|
<main>
|
|
|
|
<!-- Header Ecosistema -->
|
|
<section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
|
|
|
|
<!-- Video de fondo -->
|
|
<video autoplay muted loop playsinline style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.15;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
">
|
|
<source src="/assets/video/header_ide_loop3.mp4" type="video/mp4">
|
|
Tu navegador no soporta videos.
|
|
</video>
|
|
|
|
<!-- Overlay oscuro opcional para mejor contraste -->
|
|
<div style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(19, 167, 138, 0.5);
|
|
z-index: 1;
|
|
"></div>
|
|
|
|
<!-- Contenido -->
|
|
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
|
|
<div class="container container-narrow text-center">
|
|
<span class="eyebrow" style="color: var(--text-main);">LA PROPUESTA DE VALOR</span>
|
|
<h1 style="margin-bottom: 1.25rem;color:var(--text-main);">Una mirada. <br> Múltiples capacidades. <br> Un mismo propósito.</h1>
|
|
<p class="lead-text" style="margin: 0 auto 2rem auto;color:var(--text-main);">
|
|
No se trata de sumar soluciones aisladas. Se trata de conectar las capacidades necesarias para generar una transformación real que perdure en el conjunto de la organización.
|
|
</p>
|
|
|
|
<!-- Principio Destacado en Caja -->
|
|
<div style="background-color: var(--ide-accent); border-left: 4px solid var(--text-main); padding: 1.25rem 1.5rem; text-align: left; border-radius: var(--radius-sm); max-width: 760px; margin: 0 auto;">
|
|
<p style="font-size: 0.98rem; color: var(--text-main); font-weight: 600; margin: 0;">
|
|
<em>“No todos los desafíos necesitan todo el Ecosistema. Pero todos pueden beneficiarse de una mirada capaz de comprender el conjunto.”</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECCIÓN WEB DEDICADA PARA EL ESQUEMA -->
|
|
<section class="netschema-section">
|
|
<div class="netschema-wrapper">
|
|
<div style="text-align: center; margin-bottom: 3rem;">
|
|
<span class="eyebrow">ARQUITECTURA DE INTEGRACIÓN</span>
|
|
<h2>El Modelo de Red Sistémica</h2>
|
|
</div>
|
|
<!-- Canvas de alta resolución -->
|
|
<canvas id="networkCanvas" width="1200" height="520"></canvas>
|
|
|
|
<!-- Tooltip / Leyenda emergente en hover -->
|
|
<div id="tooltip" class="network-tooltip hidden">
|
|
<div id="tooltip-title" class="tooltip-title"></div>
|
|
<div id="tooltip-desc" class="tooltip-desc"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Profundización de las 4 Capacidades -->
|
|
<section class="section-padding">
|
|
<div class="container">
|
|
<div style="text-align: center; margin-bottom: 3rem;">
|
|
<span class="eyebrow">CAPACIDADES</span>
|
|
<h2>Conocé Nuestro Ecosistema en detalle</h2>
|
|
</div>
|
|
<!-- 1. IDE Excellence -->
|
|
<div id="excellence" class="card card-excellence" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
|
<div>
|
|
<span class="ecosystem-badge badge-excellence">GESTIÓN Y PROCESOS</span>
|
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
|
<strong>Para fortalecer la gestión:</strong> Diseñamos y optimizamos la arquitectura de procesos organizacionales, sistemas de gestión de calidad y cumplimiento normativo internacional.
|
|
</p>
|
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
|
<li>• Normas ISO 9001, 14001, 45001, 21001, 27001.</li>
|
|
<li>• Mapeo, rediseño y optimización de cadenas de valor.</li>
|
|
<li>• Indicadores de desempeño (KPIs) y tableros de control de gestión.</li>
|
|
<li>• Auditorías internas con enfoque de riesgo y madurez.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<img src="assets/img/excellence.png" alt="IDE Excellence" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. IDE Project -->
|
|
<div id="project" class="card card-projects" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
|
<div>
|
|
<img src="assets/img/projects.png" alt="IDE Project" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
|
</div>
|
|
<div>
|
|
<span class="ecosystem-badge badge-project">DIRECCIÓN Y RESULTADOS</span>
|
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
|
<strong>Para convertir desafíos en proyectos y proyectos en resultados:</strong> Estructuramos la metodología y el control para que las iniciativas estratégicas se cumplan en tiempo, costo y alcance.
|
|
</p>
|
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
|
<li>• Oficinas de Gestión de Proyectos (PMO) estratégicas y operativas.</li>
|
|
<li>• Gestión de portafolios, priorización e inversiones.</li>
|
|
<li>• Metodologías híbridas: PMBOK® + marcos ágiles (Scrum, Kanban).</li>
|
|
<li>• Rescate y reestructuración de proyectos con desvíos críticos.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. IDE Academy -->
|
|
<div id="academy" class="card card-academy" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
|
<div>
|
|
<span class="ecosystem-badge badge-academy">DESARROLLO HUMANO</span>
|
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
|
<strong>Para desarrollar las capacidades que hacen posible la transformación:</strong>Formación ejecutiva e In-Company diseñada para que los equipos comprendan, apliquen y sostengan los cambios.
|
|
</p>
|
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.25rem;">
|
|
<li>• Capacitación In-Company sobre casos y procesos reales.</li>
|
|
<li>• Programas de liderazgo de equipos y gestión del cambio.</li>
|
|
<li>• Formación de auditores internos y dueños de procesos.</li>
|
|
</ul>
|
|
<a href="ide-academy.html" class="btn btn-outline btn-sm">Ver Catálogo de Cursos →</a>
|
|
</div>
|
|
<div>
|
|
<img src="assets/img/academy.png" alt="IDE Academy" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. IDE Digital -->
|
|
<div id="digital" class="card card-digital" style="padding: 2.5rem;">
|
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
|
<div>
|
|
<img src="assets/img/digital.png" alt="IDE Digital" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
|
</div>
|
|
<div>
|
|
<span class="ecosystem-badge badge-digital">TECNOLOGÍA CON SENTIDO</span>
|
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
|
<strong>Para integrar tecnología, datos e IA con propósito:</strong> No sumamos herramientas por moda; automatizamos procesos clave y potenciamos la toma de decisiones con analítica de datos.
|
|
</p>
|
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
|
<li>• Implementación práctica de Inteligencia Artificial en flujos operativos.</li>
|
|
<li>• Automatización No-Code / Low-Code de tareas repetitivas.</li>
|
|
<li>• Tableros de Business Intelligence (BI) y visualización de KPIs.</li>
|
|
<li>• Diagnósticos de madurez digital y ciberseguridad básica.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Ejemplos Concretos de Integración -->
|
|
<section class="section-padding bg-subtle-section">
|
|
<div class="container">
|
|
<div style="text-align: center; margin-bottom: 3rem;">
|
|
<span class="eyebrow">CASOS DE INTEGRACIÓN</span>
|
|
<h2>Cómo se conectan las capacidades en la práctica</h2>
|
|
</div>
|
|
|
|
<div class="grid-3">
|
|
|
|
<div class="card">
|
|
<span class="ecosystem-badge badge-excellence">Excellence</span> + <span class="ecosystem-badge badge-academy">Academy</span>
|
|
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">Certificación ISO con Adopción Real</h4>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
|
IDE Excellence diseña el Sistema de Gestión de Calidad, mientras que IDE Academy capacita a los líderes de proceso para que el sistema viva en la cultura diaria.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span class="ecosystem-badge badge-project">Project</span> + <span class="ecosystem-badge badge-digital">Digital</span>
|
|
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">PMO con Tableros Inteligentes</h4>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
|
IDE Project estructura la gobernanza del portafolio, e IDE Digital implementa asistentes automáticos de seguimiento y tableros en tiempo real para el directorio.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span class="ecosystem-badge badge-excellence">Excellence</span> + <span class="ecosystem-badge badge-digital">Digital</span>
|
|
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">Reingeniería de Procesos con IA</h4>
|
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
|
IDE Excellence mapea y simplifica los flujos de trabajo, e IDE Digital automatiza la ingesta y clasificación de documentación con agentes de IA.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Final -->
|
|
<section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
|
|
<div class="container container-narrow text-center">
|
|
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">¿Qué combinación de capacidades necesita tu organización?</h2>
|
|
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
|
|
Conversemos para diseñar una propuesta a medida de tu realidad.
|
|
</p>
|
|
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
|
<a href="contacto.html" class="btn btn-primary-cta btn-sm">HABLEMOS</a>
|
|
<a href="desafios.html" class="btn btn-outline-cta btn-sm">Explorar por Desafíos</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
<footer id="site-footer"></footer>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/netschema.js"></script>
|
|
</body>
|
|
</html>
|