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

rf-v4.12-somos finish

Browse Source
This commit is contained in:
fanfuso
2026-10-09 22:17:59 -03:00
parent 34a251efb9
commit 38c85162c2
35 changed files with 1622 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
somos-ide.html
+223 -101
View File
@@ -17,74 +17,186 @@
<main>
<!-- Hero / Origen y Propósito -->
<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">PROPÓSITO & IDENTIDAD</span>
<h1 style="margin-bottom: 1.5rem;">Vemos organizaciones. <br>Entendemos sistemas. <br>Conectamos el todo. </h1>
<p class="lead-text" style="margin: 0 auto 2rem auto;">
IDE nace de una forma compartida de entender la gestión: ninguna decisión ocurre de manera aislada.
<br>Personas, procesos, proyectos, conocimiento y tecnología se conectan y se afectan mutuamente. Por eso, antes de proponer una solución buscamos comprender esas relaciones, identificar dónde podemos generar mayor impacto y conectar las capacidades necesarias para hacerlo posible.
</p>
<div class="card-somos">
<!-- Seccion 1: Hero -->
<section class="section-padding-md herobg-7">
<div class="container container-wide">
<div class="hero-grid">
<div>
<span class="eyebrow" style="text-transform: uppercase;">PROPÓSITO & IDENTIDAD</span>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
Vemos organizaciones. Entendemos sistemas. Conectamos el todo.
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem;">
IDE nace de una visión integral de la gestión: personas, procesos, proyectos, conocimiento y tecnología se conectan e influyen mutuamente. Por eso, comprendemos sus relaciones para identificar oportunidades de impacto y articular las capacidades necesarias.
</p>
<!-- Hero Actions -->
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
</div>
</div>
</section>
<!-- Cómo Pensamos: La Mirada Sistémica -->
<!-- Seccion 2: Filosofía de Trabajo -->
<section class="section-padding">
<div class="container">
<div class="grid-2" style="align-items: center; gap: 3rem;">
<!-- Bloque superior: título + texto -->
<div class="filosofia-intro">
<div>
<span class="eyebrow">FILOSOFÍA DE TRABAJO</span>
<h2>No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.</h2>
<p style="font-size: 1.05rem; color: var(--text-body); margin-top: 1rem; line-height: 1.7;">
Cada organización tiene su propia realidad. Por eso, antes de proponer una solución buscamos comprender su contexto, sus relaciones y aquello que está detrás de los desafíos visibles.
<br>A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas de la organización para generar mejoras que puedan sostenerse en el tiempo.
</p>
<p style="font-size: 1rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.6;">
</p>
<h2 class="filosofia-intro__title">
No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.
</h2>
</div>
<div>
<div class="card" style="padding: 2.25rem;">
<h3 style="font-size: 1.3rem; margin-bottom: 1rem; color: var(--ide-primary);">Nuestros Principios Guía</h3>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem;">
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Mirada Sistémica: </strong> Cada intervención considera sus relaciones e impactos sobre el conjunto.</span>
</li>
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Rigor con sentido práctico: </strong> Integramos metodologías, normas y buenas prácticas adaptándolas al contexto y no al revés.</span>
</li>
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Personas como parte del Sistema: </strong> Las personas no son destinatarias pasivas del cambio: participan, aportan conocimiento y hacen posible su evolución.</span>
</li>
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Capacidades que permanecen: </strong> Buscamos que cada intervención deje conocimiento, herramientas y capacidades que la organización pueda seguir desarrollando.</span>
</li>
</ul>
</div>
<p class="filosofia-intro__lead" style="font-style: italic;">
Cada organización tiene su propia realidad. Antes de proponer una solución, comprendemos su contexto, sus relaciones y lo que está detrás de los desafíos visibles.<br> A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas para generar mejoras sostenibles.
</p>
</div>
</div>
<!-- Cinta inferior: pilares en tarjetas cuadradas -->
<div class="filosofia-pilares">
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-diagram-project"></i>
</div>
<h3 class="pilar-card__title">Mirada Sistémica</h3>
<p class="pilar-card__desc">
Cada intervención considera sus relaciones e impactos sobre el conjunto.
</p>
</article>
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-gears"></i>
</div>
<h3 class="pilar-card__title">Rigor con sentido práctico</h3>
<p class="pilar-card__desc">
Adaptamos metodologías y normas al contexto, no al revés.
</p>
</article>
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-users"></i>
</div>
<h3 class="pilar-card__title">Personas como parte del sistema</h3>
<p class="pilar-card__desc">
Participan, aportan conocimiento y hacen posible la evolución.
</p>
</article>
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-seedling"></i>
</div>
<h3 class="pilar-card__title">Capacidades que permanecen</h3>
<p class="pilar-card__desc">
Cada intervención deja conocimiento y herramientas para seguir creciendo.
</p>
</article>
</div>
</div>
</section>
<!-- Sección 3: Experiencia -->
<section class="section-padding bg6">
<div class="container">
<div class="triple-section">
<!-- Col 1 (35%): Texto -->
<div class="triple-section__intro">
<span class="eyebrow">TU EYEBROW ACÁ</span>
<h2 class="triple-section__title">
Tu título principal acá, puede ir en una o dos líneas.
</h2>
<p class="triple-section__lead">
Tu texto descriptivo acá. Mantenelo breve para que respire y no compita con la imagen central. Idealmente 2 o 3 líneas máximo.
</p>
</div>
<!-- Col 2 (40%): Imagen PNG -->
<div class="triple-section__visual">
<img src="assets/img/somos/mapa2.png"
alt="Descripción de la imagen"
loading="lazy">
</div>
<!-- Col 3 (25%): 4 ítems con icono -->
<div class="triple-section__features">
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-check"></i>
</div>
<p class="triple-feature__text">Texto del primer punto.</p>
</div>
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-rocket"></i>
</div>
<p class="triple-feature__text">Texto del segundo punto.</p>
</div>
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-users"></i>
</div>
<p class="triple-feature__text">Texto del tercer punto.</p>
</div>
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-chart-line"></i>
</div>
<p class="triple-feature__text">Texto del cuarto punto.</p>
</div>
</div>
</div>
</div>
</section>
<!-- El Equipo y Perfiles -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div style="text-align: center; max-width: 700px; margin: 0 auto 3rem auto;">
<span class="eyebrow">QUIÉNES HACEMOS IDE</span>
<h2>Experiencias que se complementan</h2>
<p class="lead-text" style="margin-top: 1rem;">
IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional. <br>Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
</p>
<!-- Bloque superior: título + texto -->
<div class="filosofia-intro">
<div>
<span class="eyebrow">QUIÉNES HACEMOS IDE</span>
<h2 class="filosofia-intro__title">
Experiencias que se complementan
</h2>
</div>
<div>
<p class="filosofia-intro__lead">
IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional.
Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
</p>
</div>
</div>
<div class="grid-4">
<div class="grid-5">
<!-- Miembro 1 -->
<div class="card somos m1">
@@ -93,8 +205,11 @@
</div>
<h3>Claudia Raquel ANDRÉS</h3>
<div class="somos-title">Directora General | Líder de IDE Projects</div>
<p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
<!--<p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>-->
<a href="https://www.linkedin.com/in/claudia-raquel-andres/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 2 -->
@@ -104,10 +219,13 @@
</div>
<h3>José PUGLIESE</h3>
<div class="somos-title">Líder de IDE Digital</div>
<p>
<!--<p>
Especialista en digitalización, Inteligencia Artificial y sistematización de procesos, con más de 10 años de experiencia en liderazgo de equipos e implementación de soluciones tecnológicas orientadas a optimizar la gestión.
</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
</p>-->
<a href="https://www.linkedin.com/in/ing-jos%C3%A9-pugliese-706445413/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 3 -->
@@ -117,10 +235,13 @@
</div>
<h3>Miguel Ángel ROJAS</h3>
<div class="somos-title">Líder de IDE Excellence</div>
<p>
<!--<p>
Especialista en gestión y optimización de procesos fisicoquímicos, mejora continua y sistemas de calidad, con más de 15 años de experiencia impulsando la eficiencia operativa y el desempeño sostenible.
</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
</p>-->
<a href="https://www.linkedin.com/in/ingenieromiguelrojas/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 4 -->
@@ -128,60 +249,61 @@
<div class="card-portrait">
<img src="./assets/img/VUB.png" alt="Retrato de Carlos Garcia" loading="lazy">
</div>
<h3>Víctor Ulises BARRIONUEVO</h3>
<h3>Víctor BARRIONUEVO</h3>
<div class="somos-title">Projects & Digital</div>
<p>
<!--<p>
Especialista en gestión y ejecución de proyectos de infraestructura y telecomunicaciones, con amplia experiencia en planificación, operaciones y coordinación de equipos multidisciplinarios.
</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
</p>-->
<a href="https://www.linkedin.com/in/victor-ulises-barrionuevo/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 5 -->
<div class="card somos m5">
<div class="card-portrait">
<img src="./assets/img/somos/logo.png" alt="Retrato de Carlos Garcia" loading="lazy">
</div>
<h3>Especialistas IDE</h3>
<div class="somos-title">Red de Consultores</div>
<a href="trabaja-con-nosotros.html" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-solid fa-plus"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Marcos de Referencia y Metodologías -->
<section class="section-padding">
<div class="container">
<div style="text-align: center; margin-bottom: 3rem;">
<span class="eyebrow">ESTÁNDARES GLOBALES</span>
<h2>Marcos y metodologías en los que nos basamos</h2>
<!-- Sección 4: CTA -->
<section class="section-padding-xs herobg-5">
<div class="container container-wide">
<div class="hero-grid">
<div>
<h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white; margin-bottom: 1.5rem;">
Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor
</h2>
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
</div>
<div class="grid-4" style="text-align: center;">
<div class="card card-feature">
<span class="card-icon" data-icon="iso" aria-hidden="true"></span>
<h4 style="color: var(--ide-excellence); margin-bottom: 0.5rem;">Normas ISO</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">ISO 9001, 14001, 45001, 21001, 27001 con enfoque de valor y gobernanza.</p>
</div>
<div class="card card-feature">
<span class="card-icon" data-icon="pmi" aria-hidden="true"></span>
<h4 style="color: var(--ide-projects); margin-bottom: 0.5rem;">PMI &amp; Agile</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">PMBOK®, Scrum, Kanban y marcos híbridos adaptados a proyectos complejos.</p>
</div>
<div class="card card-feature">
<span class="card-icon" data-icon="academy" aria-hidden="true"></span>
<h4 style="color: var(--ide-academy); margin-bottom: 0.5rem;">Adult Learning</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Diseño instruccional para adultos, casos prácticos y aprendizaje experiencial.</p>
</div>
<div class="card card-feature">
<span class="card-icon" data-icon="ia" aria-hidden="true"></span>
<h4 style="color: var(--ide-digital); margin-bottom: 0.5rem;">IA &amp; Automatización</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Integración ética de IA, análisis de datos y reingeniería de flujos de trabajo.</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;">Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor</h2>
</p>
<a href="contacto.html" class="btn btn-outline-cta btn-sm" ">Hablemos</a>
</div>
</section>