rf-v4.11-ecosistema listo
This commit is contained in:
+68
-142
@@ -34,7 +34,7 @@
|
||||
|
||||
<!-- 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"
|
||||
<a href="#ecosistema-ide" class="btn btn-primary btn-cta-unificado"
|
||||
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
|
||||
Conocé el Ecosistema
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
@@ -63,8 +63,14 @@
|
||||
</section>
|
||||
|
||||
<!-- Seccion 2: Ecosistema IDE -->
|
||||
<section id="ecosistema-ide" class="section-padding bg2 ecosistema-section" aria-labelledby="ecosistema-title">
|
||||
<section id="ecosistema-ide" class="section-padding contact-parallax-section ecosistema-section" aria-labelledby="ecosistema-title">
|
||||
<div class="parallax-wrapper" aria-hidden="true">
|
||||
<div id="contact-parallax-bg" class="parallax-bg-layer3"></div>
|
||||
<div class="parallax-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- ============ ESTADO 1: ECOSISTEMA (4 tarjetas) ============ -->
|
||||
<div class="eco-state eco-state--ecosystem" data-eco-state="ecosystem">
|
||||
<header class="eco-header">
|
||||
@@ -85,7 +91,7 @@
|
||||
<i class="fa-solid fa-award eco-card__icon"></i>
|
||||
</span>
|
||||
<span class="eco-card__badge">IDE EXCELLENCE</span>
|
||||
<h3 class="eco-card__title">Excelencia operacional y sistemas de gestión</h3>
|
||||
<h3 class="eco-card__title">Excelencia operacional y <br>sistemas de gestión</h3>
|
||||
<p class="eco-card__text">Procesos, ISO, riesgos y mejora continua para sostener el desempeño.</p>
|
||||
<span class="eco-card__cta">
|
||||
Explorar unidad <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
@@ -146,14 +152,13 @@
|
||||
<!-- ============ ESTADO 2: UNIDAD EXPANDIDA ============ -->
|
||||
<div class="eco-state eco-state--unit" data-eco-state="unit" hidden>
|
||||
|
||||
<!-- Botón volver -->
|
||||
<!-- Botón volver + pills -->
|
||||
<div class="eco-unit__topbar">
|
||||
<button type="button" class="eco-unit__back" data-eco-close>
|
||||
<i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
|
||||
<span>Volver al ecosistema</span>
|
||||
</button>
|
||||
|
||||
<!-- Pills de navegación entre unidades -->
|
||||
<nav class="eco-unit__nav" aria-label="Cambiar de unidad">
|
||||
<button type="button" class="eco-pill eco-pill--excellence" data-eco-open="excellence">Excellence</button>
|
||||
<button type="button" class="eco-pill eco-pill--projects" data-eco-open="projects">Projects</button>
|
||||
@@ -162,28 +167,26 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Paneles de unidad -->
|
||||
<div class="eco-panels">
|
||||
|
||||
<!-- ============ PANEL: EXCELLENCE ============ -->
|
||||
<article class="eco-panel eco-panel--excellence" id="eco-panel-excellence" data-eco-panel="excellence" hidden>
|
||||
<div class="eco-panel__bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M-100,500 C200,300 400,650 700,400 C900,250 1100,450 1300,300" />
|
||||
<path d="M-100,200 C150,50 400,300 650,150 C900,0 1100,250 1300,100" />
|
||||
</svg>
|
||||
|
||||
<!-- Imagen de fondo -->
|
||||
<div class="eco-panel__media" aria-hidden="true">
|
||||
<img src="assets/img/ecosistema/excellence.jpg" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<!-- Overlay con gradiente del color de la unidad -->
|
||||
<div class="eco-panel__overlay" aria-hidden="true"></div>
|
||||
|
||||
<div class="eco-panel__grid">
|
||||
<div class="eco-panel__main">
|
||||
<span class="eco-panel__brand">IDE EXCELLENCE</span>
|
||||
<h2 class="eco-panel__title">Fortalecer la gestión para mejorar el desempeño.</h2>
|
||||
<p class="eco-panel__lead">
|
||||
Ayudamos a las organizaciones a comprender cómo funcionan sus procesos, ordenar su gestión y desarrollar sistemas capaces de sostener la mejora en el tiempo.
|
||||
Ayudamos a las organizaciones a comprender cómo funcionan sus procesos, ordenar su gestión y desarrollar sistemas capaces de sostener la mejora en el tiempo. Combinamos excelencia operacional, gestión por procesos, sistemas de gestión, análisis de riesgos e información para transformar requisitos y oportunidades de mejora en mejores formas de gestionar.
|
||||
</p>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado eco-panel__cta">
|
||||
HABLEMOS <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<aside class="eco-panel__side" aria-label="Capacidades de IDE Excellence">
|
||||
@@ -234,6 +237,13 @@
|
||||
|
||||
<!-- ============ PANEL: PROJECTS ============ -->
|
||||
<article class="eco-panel eco-panel--projects" id="eco-panel-projects" data-eco-panel="projects" hidden>
|
||||
|
||||
<div class="eco-panel__media" aria-hidden="true">
|
||||
<img src="assets/img/ecosistema/projects.png" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="eco-panel__overlay" aria-hidden="true"></div>
|
||||
|
||||
<div class="eco-panel__bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M-100,450 C200,250 400,600 700,350 C900,200 1100,400 1300,250" />
|
||||
@@ -246,11 +256,8 @@
|
||||
<span class="eco-panel__brand">IDE PROJECTS</span>
|
||||
<h2 class="eco-panel__title">Convertir iniciativas en resultados.</h2>
|
||||
<p class="eco-panel__lead">
|
||||
Fortalecemos la capacidad de seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando iniciativas con la estrategia y los recursos.
|
||||
Ayudamos a las organizaciones a fortalecer su capacidad para seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando las iniciativas con los objetivos estratégicos y los recursos disponibles. Integramos metodologías, gobernanza, información y capacidades de gestión para acompañar todo el ciclo de vida de los proyectos y mejorar su contribución a los resultados de la organización.
|
||||
</p>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado eco-panel__cta">
|
||||
HABLEMOS <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<aside class="eco-panel__side" aria-label="Capacidades de IDE Projects">
|
||||
@@ -301,6 +308,13 @@
|
||||
|
||||
<!-- ============ PANEL: DIGITAL ============ -->
|
||||
<article class="eco-panel eco-panel--digital" id="eco-panel-digital" data-eco-panel="digital" hidden>
|
||||
|
||||
<div class="eco-panel__media" aria-hidden="true">
|
||||
<img src="assets/img/ecosistema/digital.jpg" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="eco-panel__overlay" aria-hidden="true"></div>
|
||||
|
||||
<div class="eco-panel__bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M-100,520 C200,320 400,670 700,420 C900,270 1100,470 1300,320" />
|
||||
@@ -313,11 +327,9 @@
|
||||
<span class="eco-panel__brand">IDE DIGITAL</span>
|
||||
<h2 class="eco-panel__title">Tecnología con sentido.</h2>
|
||||
<p class="eco-panel__lead">
|
||||
Identificamos dónde la tecnología genera valor y transformamos esas oportunidades en soluciones digitales aplicables a la realidad de cada organización.
|
||||
Ayudamos a las organizaciones a identificar dónde la tecnología puede generar valor y a transformar esas oportunidades en soluciones digitales aplicables a su realidad. Integramos procesos, datos, automatización e inteligencia artificial para simplificar la gestión, mejorar el acceso a la información y fortalecer la toma de decisiones, priorizando soluciones útiles, escalables y sostenibles.
|
||||
</p>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado eco-panel__cta">
|
||||
HABLEMOS <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<aside class="eco-panel__side" aria-label="Capacidades de IDE Digital">
|
||||
@@ -372,115 +384,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profundización de las 4 Capacidades -->
|
||||
<section class="section-padding-sm" >
|
||||
<div class="container">
|
||||
<div class="seccion-servicios-tarjetas">
|
||||
<span class="eyebrow">CAPACIDADES</span>
|
||||
<h2>Conocé Nuestro Ecosistema en detalle</h2>
|
||||
</div>
|
||||
<!-- 1. IDE Excellence -->
|
||||
<div id="excellence" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-excellence); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Excellence</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para fortalecer la gestión y mejorar el desempeño</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Integramos procesos, sistemas de gestión, mejora continua y sostenibilidad para ayudar a las organizaciones a gestionar mejor, optimizar su desempeño y generar valor sostenible.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Procesos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Sistemas de gestión</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Mejora continua</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Desempeño</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Riesgos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Sostenibilidad</span>
|
||||
</div>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-excellence); border-color: var(--ide-excellence);">HABLEMOS →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/excellence.png" alt="IDE Excellence" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. IDE Project -->
|
||||
<div id="project" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<img src="assets/img/projects.png" alt="IDE Project" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-projects); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Project</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para convertir iniciativas en resultados</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Proyectos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">PMO</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Portafolios</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Gobernanza</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Metodologías</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Resultados</span>
|
||||
</div>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-projects); border-color: var(--ide-projects);">HABLEMOS →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. IDE Digital -->
|
||||
<div id="digital" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-digital); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Digital</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Tecnología con sentido</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Conectamos gestión, procesos, datos e inteligencia artificial para identificar dónde la tecnología puede simplificar, automatizar y potenciar la forma en que las organizaciones trabajan y toman decisiones.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Digitalización</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Automatización</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Datos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Inteligencia Artificial</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Integración</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Decisiones</span>
|
||||
</div>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-digital); border-color: var(--ide-digital);">HABLEMOS →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/digital.png" alt="IDE Digital" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. IDE Academy -->
|
||||
<div id="academy" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<img src="assets/img/academy.png" alt="IDE Academy" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-academy); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Academy</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para desarrollar capacidades</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para gestionar, liderar y transformar.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Formación Ejecutiva</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">In-Company</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Programas</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Talleres</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Rutas de aprendizaje</span>
|
||||
</div>
|
||||
<a href="ide-academy.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-academy); border-color: var(--ide-academy);">EXPLORAR ACADEMY →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PREGUNTAS FRECUENTES-->
|
||||
<!-- Seccion 3: Preguntas Frecuentes -->
|
||||
<section class="section-padding bg-subtle-section">
|
||||
<div class="container">
|
||||
|
||||
@@ -581,16 +485,38 @@
|
||||
</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">
|
||||
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">¿Dónde podemos generar mayor impacto en tu organización?</h2>
|
||||
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
|
||||
Conversemos para comprender tu desafío e identificar qué capacidades pueden aportar mayor valor.
|
||||
</p>
|
||||
<div style="display: flex; justify-content: left; 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 Punto de Partida</a>
|
||||
<!-- 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;">
|
||||
Una única solución no siempre <br>encaja para todos los desafíos.
|
||||
</h2>
|
||||
<p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
|
||||
Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
|
||||
</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: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user