fanfuso/IDE-Demo-B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ecosistema finish

Browse Source
This commit is contained in:
fanfuso
2026-09-10 16:25:29 -03:00
parent 8c778471d1
commit 13fdc4ab2a
16 changed files with 1291 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ecosistema.html
+77 -67
View File
@@ -7,7 +7,8 @@
<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>
@@ -17,66 +18,85 @@
<main>
<!-- Header Ecosistema -->
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
<div class="container container-narrow text-center">
<span class="eyebrow">LA PROPUESTA DE VALOR</span>
<h1 style="margin-bottom: 1.25rem;">Una mirada. <br> Múltiples capacidades. <br> Un mismo propósito.</h1>
<p class="lead-text" style="margin: 0 auto 2rem auto;">
<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/Video header Ide3.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-soft); border-left: 4px solid var(--ide-accent); padding: 1.25rem 1.5rem; text-align: left; border-radius: var(--radius-sm); max-width: 760px; margin: 0 auto;">
<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>
<!-- Gráfico Visual de Conectividad del Ecosistema -->
<section class="section-padding-sm bg-subtle-section">
<div class="container text-center">
<div style="max-width: 860px; margin: 0 auto; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem;">
<!-- 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 style="font-size: 1.8rem; margin-bottom: 1.5rem;">El Modelo de Red Sistémica</h2>
<div class="grid-4" style="margin-top: 2rem; text-align: center;">
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: var(--ide-primary); margin-bottom: 0.25rem;">📊</div> -->
<strong style="color: var(--ide-primary);">EXCELLENCE</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Procesos & Calidad</p>
</div>
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: var(--ide-accent); margin-bottom: 0.25rem;">🎯</div> -->
<strong style="color: var(--ide-accent);">PROJECT</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Dirección & PMO</p>
</div>
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: #D97706; margin-bottom: 0.25rem;">🎓</div> -->
<strong style="color: #ed8d01;">ACADEMY</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Capacidades & Personas</p>
</div>
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
<!-- <div style="font-size: 1.75rem; color: #6366F1; margin-bottom: 0.25rem;">⚡</div> -->
<strong style="color: #2c69ab;">DIGITAL</strong>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">IA & Automatización</p>
</div>
</div>
<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">MÓDULOS</span>
<h2>Conocé el detalle de Nuestro Ecosistema</h2>
</div>
<!-- 1. IDE Excellence -->
<div id="excellence" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
<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>
<h2 style="color: var(--ide-primary); font-size: 2rem; margin-bottom: 1rem;">IDE Excellence</h2>
<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>
@@ -88,26 +108,19 @@
</ul>
</div>
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">📋</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Excellence</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" style="margin-bottom: 2.5rem; padding: 2.5rem;">
<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>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">🎯</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Project</div>
</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>
<h2 style="color: var(--ide-accent); font-size: 2rem; margin-bottom: 1rem;">IDE Project</h2>
<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>
@@ -122,13 +135,12 @@
</div>
<!-- 3. IDE Academy -->
<div id="academy" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
<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>
<h2 style="color: #ed8d01; font-size: 2rem; margin-bottom: 1rem;">IDE Academy</h2>
<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.
<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>
@@ -138,26 +150,19 @@
<a href="ide-academy.html" class="btn btn-outline btn-sm">Ver Catálogo de Cursos →</a>
</div>
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">🎓</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Academy</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" style="padding: 2.5rem;">
<div id="digital" class="card card-digital" style="padding: 2.5rem;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">⚡</div> -->
<div class="img-placeholder-label">Espacio Gráfico IDE Digital</div>
</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>
<h2 style="color: #2c69ab; font-size: 2rem; margin-bottom: 1rem;">IDE Digital</h2>
<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>
@@ -174,6 +179,8 @@
</div>
</section>
<!-- Ejemplos Concretos de Integración -->
<section class="section-padding bg-subtle-section">
<div class="container">
@@ -213,22 +220,25 @@
</section>
<!-- CTA Final -->
<section class="section-padding">
<div class="container text-center">
<h2 style="font-size: 2rem; margin-bottom: 1rem;">¿Qué combinación de capacidades necesita tu organización?</h2>
<p class="lead-text" style="margin: 0 auto 2rem auto;">
<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 btn-lg">HABLEMOS</a>
<a href="desafios.html" class="btn btn-outline btn-lg">Explorar por Desafíos</a>
<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>