refactorizacion v4.8 index

css/index.css

@@ -0,0 +1,534 @@
+
+/* =========================================================
+   ECOSISTEMA - CARRUSEL
+   Variables nuevas + estilos del bloque refactorizado
+   ========================================================= */
+
+:root {
+  /* Color inactivo de los botones (rojo del esquema) */
+  --eco-tab-inactive: var(--ide-grey);
+  --eco-tab-inactive-text: #ffffff;
+
+  /* Color de fondo inactivo de la tarjeta (naranja del esquema) */
+  --eco-card-bg: #e88a0a;
+
+  /* Texto sobre la zona oscura de la tarjeta */
+  --eco-text-dark: #0a0a0a;
+  --eco-text-muted-dark: #2a2a2a;
+
+  /* Transiciones */
+  --eco-fade-duration: 600ms;
+  --eco-tab-duration: 250ms;
+}
+
+.herobg-1{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.6) 0%,
+      rgba(0, 0, 0, 0.3) 20%,
+      rgba(0, 0, 0, 0.15) 70%,
+      rgba(0, 0, 0, 0.0) 100%
+    ),
+    url('../assets/img/hero/hero_003.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-2{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(44,109,140, 1) 0%,
+      rgba(44,109,140, 0.5) 40%,
+      rgba(44,109,140, 0.2) 70%,
+      rgba(44,109,140, 0.05) 100%
+    ),
+    url('../assets/img/hero/hero_017.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+
+/* ---------- TABS / BOTONES ---------- */
+.ecosystem-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.eco-tab {
+  appearance: none;
+  border: 2px solid var(--eco-tab-inactive);
+  background: var(--eco-tab-inactive);
+  color: var(--eco-tab-inactive-text);
+  font-weight: 700;
+  font-size: 0.95rem;
+  padding: 0.4rem 1.4rem;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background-color var(--eco-tab-duration) ease,
+    color var(--eco-tab-duration) ease,
+    border-color var(--eco-tab-duration) ease,
+    transform var(--eco-tab-duration) ease;
+}
+
+.eco-tab:hover {
+  transform: translateY(-2px);
+  filter: brightness(1.08);
+}
+
+.eco-tab:focus-visible {
+  outline: 3px solid rgba(255, 255, 255, 0.6);
+  outline-offset: 2px;
+}
+
+/* Estado activo: el color lo inyecta el JS vía data-color */
+.eco-tab.is-active {
+  color: #ffffff;
+  border-color: transparent;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+}
+
+/* ---------- CARRUSEL (contenedor) ---------- */
+.ecosystem-carousel {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  max-height: 450px;
+  min-height: 360px;
+  border-radius: var(--radius-md, 12px);
+  overflow: hidden;
+  background: var(--eco-card-bg);
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
+}
+
+/* ---------- SLIDE ---------- */
+.eco-slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--eco-fade-duration) ease,
+    visibility var(--eco-fade-duration) ease;
+}
+
+.eco-slide.is-active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Imagen de fondo (placeholder) */
+.eco-slide__bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* Degradado de derecha a izquierda:
+   transparente a la izquierda → color sólido a la derecha
+   para resaltar el contenido (logo + texto) */
+.eco-slide__overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to left,
+    var(--eco-slide-color) 0%,
+    var(--eco-slide-color) 45%,
+    rgba(0, 0, 0, 0.15) 70%,
+    transparent 100%
+  );
+}
+
+/* ---------- CONTENIDO (logo + texto) ---------- */
+.eco-slide__content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 2.5rem 3rem;
+  color: var(--eco-text-dark);
+}
+
+/* Logo (PNG) - controlado por clase específica */
+.eco-slide__logo {
+  align-self: flex-end;
+  width: 210px;
+  height: 90px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+/* Texto */
+.eco-slide__text {
+  max-width: 35%;
+  margin-left: auto; /* empuja el bloque a la derecha */
+  text-align: right;
+}
+
+.eco-slide__text h3 {
+  font-size: 1.6rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  margin: 0 0 0.75rem 0;
+  color: var(--eco-text-dark);
+  line-height: 1.2;
+}
+
+.eco-slide__text p {
+  font-size: 1.2rem;
+  line-height: 1.55;
+  color: var(--eco-text-muted-dark);
+  margin: 0 0 1.25rem 0;
+}
+
+.eco-slide__link {
+  display: inline-block;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--eco-text-dark);
+  text-decoration: none;
+  border-bottom: 2px solid currentColor;
+  padding-bottom: 2px;
+  transition: opacity 200ms ease;
+}
+
+.eco-slide__link:hover {
+  opacity: 0.7;
+}
+/* =========================================================
+   BRÚJULA - MARCA DE AGUA
+   ========================================================= */
+.brujula-section {
+  position: relative;
+  overflow: hidden;
+}
+
+.brujula-watermark {
+  position: absolute;
+  right: -5%;
+  top: 50%;
+  transform: translateY(-50%) rotate(15deg);
+  width: 600px;
+  height: 600px;
+  opacity: 0.7;
+  pointer-events: none;
+  z-index: 0;
+  color: var(--ide-accent-soft);
+}
+
+.brujula-watermark svg {
+  width: 100%;
+  height: 100%;
+}
+
+
+/* =========================================================
+   BRÚJULA - BOTÓN VOLVER (reposicionado)
+   ========================================================= */
+.quiz-container {
+  position: relative;
+  z-index: 1;
+}
+
+.quiz-back-btn {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  z-index: 10;
+  background: transparent;
+  border: 1px solid var(--text-muted, #888);
+  color: var(--text-muted, #888);
+  font-size: 0.85rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 200ms ease;
+}
+
+.quiz-back-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: #ffffff;
+  border-color: #ffffff;
+}
+
+/* =========================================================
+   BRÚJULA - HEADER DE PASO (para alinear título y botón)
+   ========================================================= */
+.quiz-step-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  padding-right: 100px; /* Espacio para el botón volver */
+}
+
+/* =========================================================
+   RESPONSIVE
+   ========================================================= */
+@media (max-width: 768px) {
+  .brujula-watermark {
+    width: 400px;
+    height: 400px;
+    right: -20%;
+    opacity: 0.03;
+  }
+
+  .quiz-back-btn {
+    top: 1rem;
+    right: 1rem;
+    font-size: 0.8rem;
+    padding: 0.35rem 0.75rem;
+  }
+
+  .quiz-step-header {
+    padding-right: 80px;
+  }
+}
+
+/* =========================================================
+   COLORES ESPECÍFICOS POR CAPACIDAD
+   ========================================================= */
+.eco-slide--excellence { --eco-slide-color: var(--ide-excellence); }
+.eco-slide--project    { --eco-slide-color: var(--ide-projects); }
+.eco-slide--digital    { --eco-slide-color: var(--ide-digital); }
+.eco-slide--academy    { --eco-slide-color: var(--ide-academy); }
+
+/* =========================================================
+   PLACEHOLDERS DE LOGOS
+   Reemplaza las URLs por tus assets reales.
+   Ajusta width/height aquí para controlar el tamaño.
+   ========================================================= */
+.logo-excellence { background-image: url('../assets/img/slide/ide1.png'); }
+.logo-project    { background-image: url('../assets/img/slide/ide2.png'); }
+.logo-digital    { background-image: url('../assets/img/slide/ide3.png'); }
+.logo-academy    { background-image: url('../assets/img/slide/ide4.png'); }
+
+/* =========================================================
+   PLACEHOLDERS DE IMÁGENES DE FONDO
+   ========================================================= */
+.eco-slide--excellence .eco-slide__bg { background-image: url('../assets/img/slide/slide-excellence.png'); }
+.eco-slide--project    .eco-slide__bg { background-image: url('../assets/img/slide/slide-projects.png'); }
+.eco-slide--digital    .eco-slide__bg { background-image: url('../assets/img/slide/slide-digital.png'); }
+.eco-slide--academy    .eco-slide__bg { background-image: url('../assets/img/slide/slide-academy.png'); }
+
+/* =========================================================
+   ÁMBITOS DE EXPERIENCIA - TARJETAS CON HOVER REVEAL
+   ========================================================= */
+
+/* --- TARJETA BASE --- */
+.ambito-card {
+  position: relative;
+  min-height: 240px;
+  border-radius: var(--radius-md, 12px);
+  overflow: hidden;
+  cursor: pointer;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.ambito-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  transform: translateY(-4px);
+}
+
+/* --- OVERLAY (Degradado para legibilidad) --- */
+/* Un degradado de abajo hacia arriba asegura que el texto se lea 
+   sin tapar completamente la imagen de fondo */
+.ambito-card .overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
+  transition: background 0.4s ease;
+  z-index: 1;
+}
+
+.ambito-card:hover .overlay {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.1) 100%);
+}
+
+/* --- CONTENIDO --- */
+.ambito-card .content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end; /* Alinea el contenido abajo para mejor revelación */
+  height: 100%;
+  padding: 1rem 1rem;
+  text-align: left;
+}
+
+/* --- TÍTULO --- */
+.ambito-card h4 {
+  color: #ffffff;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.3;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), font-size 0.4s ease;
+}
+
+/* --- TEXTO A REVELAR --- */
+.ambito-card .reveal-text {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.85rem;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0;
+  
+  /* Estado inicial: oculto */
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(10px);
+  overflow: hidden;
+  
+  /* Transición suave */
+  transition: 
+    opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    margin-top 0.4s ease;
+}
+
+/* =========================================================
+   ESTADOS HOVER (La magia)
+   ========================================================= */
+
+/* 1. El título sube un poco y se achica ligeramente para hacer espacio */
+.ambito-card:hover h4 {
+  transform: translateY(-8px);
+  font-size: 1rem;
+}
+
+/* 2. El texto aparece, gana altura y se posiciona */
+.ambito-card:hover .reveal-text {
+  opacity: 1;
+  max-height: 100px; /* Suficiente para 2-3 líneas de texto */
+  transform: translateY(0);
+  margin-top: 0.5rem;
+}
+
+/* =========================================================
+   IMÁGENES DE FONDO POR TARJETA
+   (Nota: Los espacios en los nombres de archivo se codifican como %20)
+   ========================================================= */
+.cardi-agro      { background-image: url('../assets//img/cards/agro.png'); }
+.cardi-industria { background-image: url('../assets//img/cards/indu.png'); }
+.cardi-telecom   { background-image: url('../assets/img/cards/teco.png'); }
+.cardi-salud     { background-image: url('../assets/img/cards/salud.png'); }
+.cardi-educacion { background-image: url('../assets/img/cards/edu.png'); }
+
+/* =========================================================
+   RESPONSIVE
+   ========================================================= */
+
+@media (max-width: 768px) {
+  .ambitos-grid {
+    grid-template-columns: 1fr !important; /* Apila el encabezado y las tarjetas */
+    text-align: center;
+  }
+    
+  .ambito-card {
+    min-height: 200px;
+  }
+  
+  .ambito-card h4 {
+    font-size: 1rem;
+  }
+}
+
+/* =========================================================
+   RESPONSIVE
+   ========================================================= */
+@media (max-width: 900px) {
+  .ecosystem-carousel {
+    aspect-ratio: 4 / 3;
+  }
+
+  .eco-slide__content {
+    padding: 1.75rem 2rem;
+  }
+
+  .eco-slide__logo {
+    width: 140px;
+    height: 55px;
+  }
+
+  .eco-slide__text {
+    max-width: 70%;
+  }
+
+  .eco-slide__text h3 {
+    font-size: 1.3rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .ecosystem-tabs {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.6rem;
+  }
+
+  .eco-tab {
+    font-size: 0.85rem;
+    padding: 0.55rem 1rem;
+  }
+
+  .ecosystem-carousel {
+    aspect-ratio: 3 / 4;
+    min-height: 420px;
+  }
+
+  .eco-slide__content {
+    padding: 1.25rem 1.25rem 1.5rem;
+    justify-content: flex-end;
+  }
+
+  .eco-slide__logo {
+    align-self: flex-end;
+    width: 120px;
+    height: 50px;
+    margin-bottom: 1rem;
+  }
+
+  .eco-slide__text {
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .eco-slide__text h3 {
+    font-size: 1.15rem;
+  }
+
+  .eco-slide__text p {
+    font-size: 0.9rem;
+  }
+
+  /* En móvil el degradado cubre más para garantizar legibilidad */
+  .eco-slide__overlay {
+    background: linear-gradient(
+      to top,
+      var(--eco-slide-color) 0%,
+      var(--eco-slide-color) 55%,
+      rgba(0, 0, 0, 0.1) 85%,
+      transparent 100%
+    );
+  }
+}

css/styles.css

@@ -245,7 +245,7 @@ p, li, .lead-text, .text-body, .text-muted {
 /* --- 4. Layout & Contenedores --- */
 .container {
   width: 100%;
-  max-width: 1200px;
+  max-width: 1360px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 1.5rem;
@@ -324,6 +324,8 @@ p, li, .lead-text, .text-body, .text-muted {
   align-items: center;
   gap: 1.8rem;
   list-style: none;
+  flex-shrink: 1;
+  min-width: 0;
 }
 
 .nav-link {
@@ -357,6 +359,7 @@ p, li, .lead-text, .text-body, .text-muted {
   display: flex;
   align-items: center;
   gap: 1rem;
+  flex-shrink: 0;
 }
 .nav-item.dropdown {
   position: relative;
@@ -593,7 +596,7 @@ p, li, .lead-text, .text-body, .text-muted {
   gap: 0.6rem;
   font-family: 'Barlow Condensed', sans-serif;
   font-weight: 500;
-  font-size: 2.9rem;
+  font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.09em;
   padding: 0.75rem 1.6rem;
@@ -690,15 +693,45 @@ p, li, .lead-text, .text-body, .text-muted {
   padding: 0.45rem 1rem;
   font-size: 0.85rem;
 }
-/*==============================*/
+
-/*efecto ruido*/
+/* --- Botón CTA Unificado --- */
-.incomodidad-section {
+.btn-cta-unificado {
-  position: relative;
+  padding: 0.75rem 2rem;
-  width: 100%;
+  border-radius: 50px; /* Estilo píldora */
-  padding: 100px 24px;
+  background-color: var(--ide-primary);
-  overflow: hidden; /* Evita que las ondas ensanchen la pantalla */
+  color: #FFFFFF;
+  font-family: 'Barlow Condensed', sans-serif;
+  font-weight: 600;
+  font-size: 1.1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 2px solid transparent;
+  transition: all var(--transition-fast);
 }
 
+.btn-cta-unificado:hover {
+  background-color: var(--ide-primary-dark);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+.btn-cta-unificado svg {
+  transition: transform var(--transition-fast);
+}
+.btn-cta-unificado:hover svg {
+  transform: translateX(4px);
+}
+
+.nav-actions .btn-cta-unificado {
+  flex-shrink: 0;
+  font-size: 0.95rem;
+  padding: 0.5rem 1.25rem;
+}
+
+/*==============================*/
+
 /* Canvas como fondo absoluto */
 #ripple-canvas {
   position: absolute;
@@ -749,6 +782,7 @@ p, li, .lead-text, .text-body, .text-muted {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
+
 /*tarjetas especiales*/
 /*Agro*/
 .card-agro {
@@ -765,28 +799,6 @@ p, li, .lead-text, .text-body, .text-muted {
   align-items: center;
   text-align: center;
 }
-
-.icono-agro {
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  margin-bottom: 0.5rem;
-  background-color: var(--text-body);
-  -webkit-mask-image: url('../assets/iconos/agro_color.svg');
-  mask-image: url('../assets/iconos/agro_color.svg');
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  flex-shrink: 0;
-}
-
-.card-agro:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
 /*Fabrica*/
 .card-fabrica {
   background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/fabrica3.jpg');
@@ -1126,6 +1138,7 @@ p, li, .lead-text, .text-body, .text-muted {
   max-width: 860px;
   margin: 0 auto;
   transition: all 0.25s ease;
+  position: relative;
 }
 
 .quiz-header {
@@ -1171,21 +1184,21 @@ p, li, .lead-text, .text-body, .text-muted {
 /* ---- Grid de opciones (estilo Opción A) ---- */
 .quiz-options-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 0.85rem;
   margin-top: 1rem;
 }
 
 .quiz-options-grid--2col {
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 /* ---- Cards de opción (estilo Opción A) ---- */
 .quiz-option-card {
   display: flex;
   align-items: flex-start;
-  gap: 0.75rem;
+  gap: 0.5rem;
-  padding: 1rem 1.25rem;
+  padding: 0.75rem 1rem;
   background: var(--bg-body);
   border: 2px solid transparent;
   border-radius: 0.85rem;
@@ -1239,21 +1252,20 @@ p, li, .lead-text, .text-body, .text-muted {
 /* ---- Estilos para títulos con iconos SVG en las tarjetas del quiz ---- */
 .quiz-option-card .opt-title {
   font-family: 'Barlow Condensed', sans-serif;
-  font-weight: 600;
+  font-weight: 500;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   font-size: 1.1rem;
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.15rem;
   color: var(--text-primary, #094b63);
 }
 
-.quiz-option-card .opt-title .icono {
+.quiz-option-card .opt-title i {
-  width: 24px;
+  width: 18px;
-  height: 24px;
+  height: 18px;
   flex-shrink: 0;
   color: inherit;
-
 }
 
 .quiz-option-card .opt-title .opt-text {
@@ -2501,154 +2513,213 @@ canvas {
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
 }
 
-/* --- 17. Footer --- */
+/* =========================================================
+   FOOTER MODULAR - ESTILOS
+   ========================================================= */
 #site-footer {
   position: relative;
   overflow: hidden;
   background-color: var(--bg-surface);
   border-top: 1px solid var(--border-color);
-  padding-top: 4.5rem;
+  /*padding-top: 4.5rem;
-  padding-bottom: 2.5rem;
+  padding-bottom: 2.5rem;*/
   margin-top: auto;
   transition: background-color var(--transition-normal);
 }
 
-/* Logo de fondo - NO debe interferir con los links */
+/* --- FILA SUPERIOR --- */
-.footer-bg {
+.footer-top {
-  position: absolute;
-  transform: translate(0%, -17%);
-  height: auto;
-  pointer-events: none; /* ¡CLAVE! Evita que la imagen capture eventos */
-
-}
-
-/* El SVG dentro del contenedor */
-.footer-bg img {
-  display: block;
-  width: 100%;
-  height: auto;
-  pointer-events: none; /* Hereda o se asegura */
-}
-
-/* Contenido del footer - POR ENCIMA del fondo */
-.footer-grid {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
-  gap: 2.5rem;
-  margin-bottom: 3.5rem;
-}
-
-.footer-logo-wrap {
-  margin-bottom: 1rem;
-}
-
-.footer-links {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-links li {
-  margin-bottom: 0.35rem;
-}
-
-.footer-link {
-  color: var(--text-muted);
-  text-decoration: none;
-  transition: color 0.3s ease;
-  position: relative;
-  z-index: 2; /* Asegura que estén por encima */
-}
-
-.footer-link:hover { 
-  color: var(--ide-accent); 
-}
-
-/* Links del ecosistema en la columna 1 */
-.footer-link2 {
-  color: var(--text-muted);
-  text-decoration: none;
-  transition: color 0.3s ease;
-  position: relative;
-  z-index: 2;
-}
-
-.footer-link2:nth-child(1):hover { color: var(--ide-excellence); } /* Excellence */
-.footer-link2:nth-child(2):hover { color: var(--ide-projects); } /* Project */
-.footer-link2:nth-child(3):hover { color: var(--ide-academy); } /* Academy */
-.footer-link2:nth-child(4):hover { color: var(--ide-digital); } /* Digital */
-
-/* Footer bottom - también por encima */
-.footer-bottom {
-  position: relative;
-  z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-family: 'Plus Jakarta Sans', sans-serif;
+  flex-wrap: wrap;
-  font-size: 0.85rem;
+  gap: 2rem;
-  color: var(--text-muted);
+  margin-bottom: 2.5rem;
-  border-top: 1px solid var(--border-color);
-  padding-top: 1.5rem;
 }
 
-.footer-bottom a {
+.footer-brand {
-  position: relative;
-  z-index: 2;
-}
-
-.footer-socials {
   display: flex;
-  gap: 0.75rem;
+  flex-direction: row; /* CAMBIADO: de column a row */
+  align-items: flex-start; /* Alinea arriba ambos elementos */
+  gap: 1rem; /* Espacio entre logo y slogan */
+  max-width: 400px; /* Aumentado para que quepa el slogan */
+}
+
+.footer-logo {
+  height: 45px;
+  width: auto;
+  object-fit: contain;
+  flex-shrink: 0; /* Evita que el logo se encoja */
+}
+
+.footer-slogan {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-muted, #6c757d);
+  line-height: 1.5;
+  margin: 0;
+  text-align: left; /* Asegura que el texto quede alineado a la izquierda */
+}
+
+/* Navegación horizontal */
+.footer-links-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.25rem 1.75rem; /* gap vertical | gap horizontal */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-link {
+  font-size: 0.95rem;
+  color: var(--text-body, #333);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.footer-link:hover {
+  color: var(--ide-primary, #0066cc); /* Ajusta a tu color primario */
+}
+
+/* Botón CTA */
+.footer-cta-btn {
+  border-radius: 50px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.35rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.footer-cta-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* --- DIVISOR --- */
+.footer-divider {
+  border: none;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+  margin: 0 0 1.5rem 0;
+}
+
+/* --- FILA INFERIOR --- */
+.footer-bottom {
+  display: flex;
+  justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.footer-legal-list {
+  display: flex;
+  gap: 1.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-link-small {
+  font-size: 0.85rem;
+  color: var(--text-muted, #6c757d);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer-link-small:hover {
+  color: var(--text-body, #333);
+  text-decoration: underline;
+}
+
+/* Redes Sociales */
+.footer-socials {
+  display: flex;
+  gap: 1.25rem;
 }
 
 .footer-social-link {
-  display: inline-flex;
+  color: var(--text-muted, #6c757d);
+  font-size: 1.15rem;
+  text-decoration: none;
+  transition: color 0.2s ease, transform 0.2s ease;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
+  width: 32px;
-  height: 40px;
+  height: 32px;
-  border-radius: 50%;
-  color: var(--text-muted);
-  background: var(--bg-subtle, rgba(255,255,255,0.05));
-  transition: all 0.3s ease;
-  text-decoration: none;
-  font-size: 1rem;
 }
 
 .footer-social-link:hover {
-  color: var(--ide-accent, #3fff4f);
+  color: var(--ide-primary, #0066cc); /* Ajusta a tu color primario */
-  transform: translateY(-3px);
+  transform: translateY(-2px);
 }
 
+/* Copyright */
+.footer-copyright {
+  color: var(--text-muted, #6c757d);
+  font-size: 0.8rem;
+  text-align: right;
+}
 
-/* Responsive */
+.footer-credit {
-@media (max-width: 768px) {
+  color: var(--text-muted, #6c757d);
-  .footer-bg {
+  font-weight: 600;
-    width: 40%;
+  text-decoration: none;
-    max-width: 300px;
+  transition: color 0.2s ease;
-    opacity: 0.04;
+}
-  }
 
-  .footer-grid {
+.footer-credit:hover {
-    grid-template-columns: 1fr 1fr;
+  color: var(--text-body, #333);
+}
+
+/* =========================================================
+   RESPONSIVE (Móviles y Tablets)
+   ========================================================= */
+@media (max-width: 992px) {
+  .footer-top {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
     gap: 2rem;
   }
-}
 
-@media (max-width: 480px) {
+  .footer-brand {
-  .footer-bg {
+    max-width: 100%;
-    width: 30%;
+    align-items: center;
-    max-width: 200px;
-    opacity: 0.03;
   }
 
-  .footer-grid {
+  .footer-links-horizontal {
-    grid-template-columns: 1fr;
+    justify-content: center;
-    gap: 1.5rem;
   }
 }
+
+@media (max-width: 768px) {
+  .footer-bottom {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1.25rem;
+  }
+
+  .footer-legal-list {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .footer-copyright {
+    text-align: center;
+  }
+}
+
+
+
+
+
+

desafios.html

@@ -18,43 +18,21 @@
   <main>
 
     <!-- Header Desafíos -->
-    <section class="section-padding hero-video-desafio">
+    <section class="section-padding" style="background: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
-      
+      <div class="container">
-      <!-- Video de fondo -->
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
-      <video autoplay muted loop playsinline style="
+          <div>
-        position: absolute;
+            <h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1;">
-        top: 0;
+              ¿Qué está pasando<br>en tu organización?
-        left: 0;
+            </h1>
-        width: 100%;
+            <p class="lead-text" style="color:var(--text-body)">
-        height: 100%;
+              A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir.
-        object-fit: cover;
+            </p>
-        opacity: 0.15;
+          </div>
-        z-index: 0;
+          <div style="display: flex; justify-content: center;">
-        pointer-events: none;
+            <img src="assets/img/placeholder-infinito.png" alt="Estrategia, Procesos, Tecnología, Personas y Resultados" style="max-width: 100%; height: auto;">
-      ">
+          </div>
-        <source src="./assets/video/header_ide_loop.mp4" type="video/mp4">
+        </div>
-        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;">
-        <span class="eyebrow" style="color: var(--text-main)">COMENCEMOS POR entender</span>
-        <h1 style="margin-bottom: 1.25rem; color:var(--text-main);">¿Qué está pasando en tu organización?</h1>
-        <p class="lead-text" style="color:var(--text-main)">
-          A veces el problema es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad que todavía no sabemos cómo abordar. Empecemos por comprender qué está pasando e identificar dónde puede estar el verdadero punto de intervención. <br><br> ¿Qué pasaría si transformamos el "problema" en un desafío?
-
-        </p>
       </div>
     </section>
 
@@ -62,83 +40,53 @@
     <section class="section-padding bg3">
       <div class="container">
         
-        <div class="grid-3">
+        <div class="grid-3" style="gap: 2rem;">
           
           <!-- Desafío 1 -->
-          <div class="card dfcard1">
+          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-1">
-            <div>
+            <h3 style="font-size: 1.3rem; margin-bottom: 2rem;">La organización creció y necesitamos ordenar los procesos.</h3>
-              <h3>Crecimos y necesitamos ordenar la gestión</h3>
+            <div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
-              <p>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                Lo que antes funcionaba de manera informal empieza a generar descoordinación, retrabajos, falta de claridad o dependencia de personas clave.
-              </p>
             </div>
-            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-1">
-              Ver cómo abordamos este desafío →
-            </button>
           </div>
 
           <!-- Desafío 2 -->
-          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-2">
-            <div>
+            <h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Necesitamos mejorar la eficiencia y los resultados.</h3>
-              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Tenemos muchas iniciativas, pero cuesta convertirlas en resultados</h3>
+            <div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
-              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                Los proyectos avanzan con dificultades, compiten por recursos o pierden foco, y necesitamos mejorar la forma de priorizar, coordinar y ejecutar.
-              </p>
             </div>
-            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-2">
-              Ver cómo abordamos este desafío →
-            </button>
           </div>
 
           <!-- Desafío 3 -->
-          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-3">
-            <div>
+            <h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Queremos desarrollar a nuestras personas y fortalecer equipos.</h3>
-              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Estamos impulsando cambios, pero cuesta llevarlos a la práctica</h3>
+            <div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
-              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                Nuevos procesos, herramientas o formas de trabajar no siempre logran integrarse a la dinámica cotidiana de la organización.
-              </p>
             </div>
-            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-3">
-              Ver cómo abordamos este desafío →
-            </button>
           </div>
 
           <!-- Desafío 4 -->
-          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-4">
-            <div>
+            <h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Buscamos incorporar tecnología o avanzar en la transformación digital.</h3>
-              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Queremos aprovechar la tecnología y la IA con sentido</h3>
+            <div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
-              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                Vemos oportunidades para automatizar, sistematizar o mejorar decisiones, pero necesitamos identificar dónde la tecnología puede generar valor real.
-              </p>
             </div>
-            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-4">
-              Ver cómo abordamos este desafío →
-            </button>
           </div>
 
           <!-- Desafío 5 -->
-          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card dfcard1" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; cursor: pointer; transition: all 0.3s ease;" data-open-modal="modal-desafio-5">
-            <div>
+            <h3 style="font-size: 1.3rem; margin-bottom: 2rem;">Necesitamos fortalecer la calidad, el cumplimiento o la gestión de riesgos.</h3>
-              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Necesitamos cumplir nuevos requisitos sin sumar burocracia</h3>
+            <div style="align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--ide-primary);">
-              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                Una norma, certificación, cliente o regulación exige cambios. Buscamos integrarlos a la gestión para que, además de cumplir, ayuden a mejorar.
-              </p>
             </div>
-            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-5">
-              Ver cómo abordamos este desafío →
-            </button>
           </div>
 
           <!-- Desafío 6 -->
-          <div class="card dfcard2">
+          <div class="card dfcard2" style="display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; background: var(--bg-subtle); border: 1px dashed var(--ide-accent);">
-            <div>
+            <h3 style="font-size: 1.3rem; margin-bottom: 2rem; color: var(--text-muted);">No sé exactamente qué necesito.</h3>
-              <h3>Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar</h3>
+            <a href="index.html#brujula" class="btn btn-primary btn-sm" style="align-self: flex-start; text-transform: uppercase;">
-              <p>
+              INICIAR BRÚJULA IDE →
-                Los resultados, los procesos o la dinámica de la organización muestran señales que necesitamos comprender antes de decidir dónde intervenir.
-              </p>
-            </div>
-            <a href="index.html#brujula" class="btn btn-primary btn-sm" style="width: 100%;">
-              Orientarme con la Brújula IDE →
             </a>
           </div>
 
@@ -148,187 +96,151 @@
     </section>
 
     <!--CTA-->
-    <section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
+    <section class="section-padding" style="background-color: var(--bg-surface); border-top: 1px solid var(--border-color);">
-      <div class="container container-narrow text-center">
+      <div class="container text-center">
-        <h2 style="color: var(--text-inverse); margin-bottom: 1rem;">Cada organización tiene su propio punto de partida</h2>
+        <div class="cta-module" style="background: var(--bg-primary); border-radius: var(--radius-md); padding: 4rem; text-align: center; box-shadow: var(--shadow-sm);">
-        <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
+          <h2 style="font-size: 2.2rem; color: #fff; margin-bottom: 2rem;">¿Tu situación es diferente? Conversemos...</h2>
-          Si no encontraste tu situación entre estos ejemplos, empecemos por comprenderla juntos.
+          <a href="contacto.html" class="btn btn-primary-cta btn-cta-unificado" style="border-radius: 50px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; font-size: 1.1rem; border: 1px solid rgba(255,255,255,0.2);">
-        </p>
+            HABLEMOS
-        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">HABLEMOS →</a>
+            <svg width="20" height="20" 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>
     </section>
     <!-- MODALES DE DETALLE DE CADA DESAFÍO -->
 
     <!-- Modal Desafío 1 -->
     <div id="modal-desafio-1" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window">
+      <div class="modal-window" style="padding: 3rem;">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <span class="eyebrow">DESAFÍO: CRECIMIENTO Y PROCESOS</span>
+        <h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">La organización creció y necesitamos ordenar los procesos</h3>
-        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">La organización creció y necesitamos ordenar los procesos</h3>
         
-        <div style="margin-bottom: 1.25rem;">
+        <div style="margin-bottom: 2rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
-          <p style="font-size: 0.9rem; color: var(--text-body);">
+          <ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
-            Cuando una empresa escala rápidamente, las estructuras que antes funcionaban comienzan a crujir. Aparece la duplicación de tareas, falta de indicadores de gestión y una sobrecarga en los líderes.
-          </p>
-        </div>
-
-        <div style="margin-bottom: 1.25rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Preguntas Clave</h4>
-          <ul style="padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-body); line-height: 1.5;">
             <li>¿Los procesos están formalizados o dependen de la memoria individual?</li>
             <li>¿Existen cuellos de botella claros entre departamentos?</li>
             <li>¿Contamos con indicadores que midan el desempeño en tiempo real?</li>
           </ul>
         </div>
 
-        <div style="margin-bottom: 1.5rem;">
+        <div style="margin-bottom: 2.5rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
           <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span class="ecosystem-badge badge-excellence">IDE Excellence (Mapeo & SGC)</span>
+            <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
-            <span class="ecosystem-badge badge-academy">IDE Academy (Cultura de Procesos)</span>
+            <span class="ecosystem-badge badge-academy">IDE Academy</span>
           </div>
         </div>
 
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+        <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
       </div>
     </div>
 
     <!-- Modal Desafío 2 -->
     <div id="modal-desafio-2" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window">
+      <div class="modal-window" style="padding: 3rem;">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <span class="eyebrow">DESAFÍO: GESTIÓN DE PROYECTOS</span>
+        <h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Necesitamos mejorar la eficiencia y los resultados</h3>
-        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Los proyectos estratégicos se retrasan o no logran el resultado</h3>
         
-        <div style="margin-bottom: 1.25rem;">
+        <div style="margin-bottom: 2rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
-          <p style="font-size: 0.9rem; color: var(--text-body);">
+          <ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
-            Muchas iniciativas bien intencionadas fracasan por falta de una metodología estructurada de seguimiento, asignación difusa de roles o gestión deficiente de riesgos e interesados.
-          </p>
-        </div>
-
-        <div style="margin-bottom: 1.25rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Preguntas Clave</h4>
-          <ul style="padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-body); line-height: 1.5;">
             <li>¿Se define con claridad el alcance antes de iniciar la ejecución?</li>
-            <li>¿Hay un responsable visible (Project Manager) con autoridad de gestión?</li>
+            <li>¿Hay un responsable visible con autoridad de gestión?</li>
             <li>¿Se aplican marcos ágiles o híbridos adecuados a la complejidad del proyecto?</li>
           </ul>
         </div>
 
-        <div style="margin-bottom: 1.5rem;">
+        <div style="margin-bottom: 2.5rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
           <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span class="ecosystem-badge badge-project">IDE Project (PMO & Dirección)</span>
+            <span class="ecosystem-badge badge-project">IDE Projects</span>
-            <span class="ecosystem-badge badge-academy">IDE Academy (Formación en Proyectos)</span>
+            <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
           </div>
         </div>
 
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+        <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Gestionar%20o%20impulsar%20un%20proyecto&origen=Desafio_PMO" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
       </div>
     </div>
 
     <!-- Modal Desafío 3 -->
     <div id="modal-desafio-3" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window">
+      <div class="modal-window" style="padding: 3rem;">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <span class="eyebrow">DESAFÍO: PERSONAS Y CAMBIO</span>
+        <h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Queremos desarrollar a nuestras personas y fortalecer equipos</h3>
-        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">El equipo no adopta los cambios y persiste la resistencia</h3>
         
-        <div style="margin-bottom: 1.25rem;">
+        <div style="margin-bottom: 2rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
-          <p style="font-size: 0.9rem; color: var(--text-body);">
+          <ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
-            La resistencia no es un problema de mala voluntad, sino una consecuencia natural cuando las personas no comprenden el sentido del cambio ni reciben las herramientas formativas para desempeñarse con seguridad.
+            <li>¿El equipo adopta los cambios o persiste la resistencia?</li>
-          </p>
+            <li>¿Comprenden el sentido del cambio que se quiere implementar?</li>
+            <li>¿Cuentan con las herramientas formativas para desempeñarse con seguridad?</li>
+          </ul>
         </div>
 
-        <div style="margin-bottom: 1.5rem;">
+        <div style="margin-bottom: 2.5rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
           <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span class="ecosystem-badge badge-academy">IDE Academy (Capacitación In-Company)</span>
+            <span class="ecosystem-badge badge-academy">IDE Academy</span>
-            <span class="ecosystem-badge badge-excellence">IDE Excellence (Alineación Organizacional)</span>
+            <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
           </div>
         </div>
 
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+        <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Desafio_Equipo" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
       </div>
     </div>
 
     <!-- Modal Desafío 4 -->
     <div id="modal-desafio-4" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window">
+      <div class="modal-window" style="padding: 3rem;">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <span class="eyebrow">DESAFÍO: TECNOLOGÍA & IA</span>
+        <h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Buscamos incorporar tecnología o avanzar en la transformación digital</h3>
-        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Queremos incorporar Inteligencia Artificial con sentido</h3>
         
-        <div style="margin-bottom: 1.25rem;">
+        <div style="margin-bottom: 2rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
-          <p style="font-size: 0.9rem; color: var(--text-body);">
+          <ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
-            Incorporar IA sin comprender los procesos sólo automatiza el desorden. Diagnosticamos qué tareas repetitivas y análisis de datos pueden optimizarse para que el equipo gane tiempo de alto valor.
+            <li>¿Tenemos claro dónde la tecnología puede generar valor real?</li>
-          </p>
+            <li>¿Estamos automatizando el desorden o mejorando el proceso base?</li>
+            <li>¿El equipo está preparado para esta adopción tecnológica?</li>
+          </ul>
         </div>
 
-        <div style="margin-bottom: 1.5rem;">
+        <div style="margin-bottom: 2.5rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
           <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span class="ecosystem-badge badge-digital">IDE Digital (IA & Automatización)</span>
+            <span class="ecosystem-badge badge-digital">IDE Digital</span>
-            <span class="ecosystem-badge badge-excellence">IDE Excellence (Rediseño de Procesos)</span>
+            <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
           </div>
         </div>
 
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+        <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Desafio_IA" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
       </div>
     </div>
 
     <!-- Modal Desafío 5 -->
     <div id="modal-desafio-5" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window">
+      <div class="modal-window" style="padding: 3rem;">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <span class="eyebrow">DESAFÍO: NORMAS Y CERTIFICACIONES</span>
+        <h3 style="font-size: 1.6rem; margin-bottom: 1.5rem; color: var(--text-main);">Necesitamos fortalecer la calidad, el cumplimiento o la gestión de riesgos</h3>
-        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Certificar una norma (ISO) y que genere valor real</h3>
         
-        <div style="margin-bottom: 1.25rem;">
+        <div style="margin-bottom: 2rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Preguntas disparadoras:</strong></p>
-          <p style="font-size: 0.9rem; color: var(--text-body);">
+          <ul style="padding-left: 1.2rem; font-size: 1rem; color: var(--text-body); line-height: 1.6;">
-            Transformamos el requisito normativo en una oportunidad de mejora. No preparamos la empresa para una auditoría de un día: diseñamos un sistema que ayuda a la dirección a gestionar mejor los 365 días del año.
+            <li>¿El cumplimiento normativo está sumando burocracia sin aportar valor?</li>
-          </p>
+            <li>¿Se gestiona solo para aprobar auditorías o se mejora continuamente?</li>
+            <li>¿Está integrado el sistema de gestión a las decisiones del negocio?</li>
+          </ul>
         </div>
 
-        <div style="margin-bottom: 1.5rem;">
+        <div style="margin-bottom: 2.5rem;">
-          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
+          <p style="font-size: 1.05rem; color: var(--text-body); margin-bottom: 1rem;"><strong>Capacidades que intervienen:</strong></p>
           <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-            <span class="ecosystem-badge badge-excellence">IDE Excellence (ISO 9001/14001/45001)</span>
+            <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
-            <span class="ecosystem-badge badge-academy">IDE Academy (Auditores Internos)</span>
+            <span class="ecosystem-badge badge-academy">IDE Academy</span>
           </div>
         </div>
 
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+        <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="width: 100%; justify-content: center; padding: 1rem;">HABLEMOS</a>
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Desafio_ISO" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
       </div>
     </div>
 

ecosistema-PatriPad.html

@@ -0,0 +1,609 @@
+<!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">
+  <link rel="stylesheet" href="css/modal.css">
+  <link rel="stylesheet" href="css/faq.css">
+</head>
+<body>
+
+  <header id="site-header"></header>
+
+  <main>
+
+    <!-- Header Ecosistema -->
+    <section class="section-padding-npb hero-solucion">
+      <!-- Contenido -->
+      <div class="container container-narrow">
+        <div class="container container-narrow">
+          <span class="eyebrow">PROPUESTA DE VALOR</span>
+          <h1>Diferentes capacidades.<br> Una visión compartida del conjunto.</h1>
+          <p class="lead-text" style="margin-top: 1rem;">
+            Cada desafío activa la parte del Ecosistema que necesita. <br>La clave está en comprender el conjunto para saber dónde intervenir.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- SECCIÓN WEB DEDICADA PARA EL ESQUEMA -->
+    <section class="netschema-section">
+      <div class="netschema-wrapper">
+        <canvas id="networkCanvas" width="1200" height="520"></canvas>
+        
+        <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-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" class="card card-excellence card-ecosistema">
+          <div class="grid-2 eco">
+            <div>
+              <span class="ecosystem-badge badge-excellence">Operational Excellence & Sustainability</span>
+              <p>
+                <strong>Para fortalecer la gestión y mejorar el desempeño:</strong> 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>
+
+              <!-- Lista en formato píldoras -->
+              <div class="pills-list">
+                <span class="pill-item">Procesos</span>
+                <span class="pill-item">Sistemas de gestión</span>
+                <span class="pill-item">Mejora continua</span>
+                <span class="pill-item">Desempeño</span>
+                <span class="pill-item">Riesgos</span>
+                <span class="pill-item">Sostenibilidad</span>
+              </div>
+
+              <a class="btn btn-outline btn-sm" data-modal-target="modal-ide-excellence">CONOCER MÁS →</a>
+            </div>
+            <div>
+              <img src="assets/img/excellence.png" alt="IDE Excellence">
+            </div>
+          </div>
+        </div>
+
+        <!-- 2. IDE Project -->
+        <div id="project" class="card card-project card-ecosistema">
+          <div class="grid-2 eco">
+            <div>
+              <img src="assets/img/projects.png" alt="IDE Project">
+            </div>
+            <div>
+              <span class="ecosystem-badge badge-project">PMO & Project Services</span>
+              <p>
+                <strong>Para convertir iniciativas en resultados:</strong> Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
+              </p>
+              <!-- Lista en formato píldoras -->
+              <div class="pills-list">
+                <span class="pill-item">Proyectos</span>
+                <span class="pill-item">PMO</span>
+                <span class="pill-item">Portafolios</span>
+                <span class="pill-item">Gobernanza</span>
+                <span class="pill-item">Metodologías</span>
+                <span class="pill-item">Resultados</span>
+              </div>
+              <a class="btn btn-outline btn-sm" data-modal-target="modal-ide-project">CONOCER MÁS →</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- 3. IDE Digital -->
+        <div id="digital" class="card card-digital card-ecosistema">
+          <div class="grid-2 eco">
+            <div>
+              <span class="ecosystem-badge badge-digital">Business Digital Solutions</span>
+              <p>
+                <strong>Tecnología con sentido: </strong> 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>
+              <!-- Lista en formato píldoras -->
+              <div class="pills-list">
+                <span class="pill-item">Digitalización</span>
+                <span class="pill-item">Automatización</span>
+                <span class="pill-item">Datos</span>
+                <span class="pill-item">Inteligencia Artificial</span>
+                <span class="pill-item">Integración</span>
+                <span class="pill-item">Decisiones</span>
+              </div>
+              <a class="btn btn-outline btn-sm" data-modal-target="modal-ide-digital">CONOCER MÁS →</a>
+            </div>
+            <div>
+              <img src="assets/img/digital.png" alt="IDE Digital">
+            </div>
+          </div>
+        </div>
+
+        <!-- 4. IDE Academy -->
+        <div id="academy" class="card card-academy card-ecosistema">
+          <div class="grid-2 eco">
+            <div>
+              <img src="assets/img/academy.png" alt="IDE Academy">
+            </div>
+            <div>
+              <span class="ecosystem-badge badge-academy">Executive Learning & Capability Development</span>
+              <p>
+                <strong>Para desarrollar capacidades: </strong>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>
+              <!-- Lista en formato píldoras -->
+              <div class="pills-list">
+                <span class="pill-item">Formación Ejecutiva</span>
+                <span class="pill-item">In-Company</span>
+                <span class="pill-item">Programas</span>
+                <span class="pill-item">Talleres</span>
+                <span class="pill-item">Rutas de aprendizaje</span>
+              </div>
+              <a href="ide-academy.html" class="btn btn-outline btn-sm">EXPLORAR IDE ACADEMY →</a>
+            </div>
+            
+          </div>
+        </div>
+       </div>
+    </section>
+
+    <!-- PREGUNTAS FRECUENTES-->
+    <section class="section-padding bg-subtle-section">
+      <div class="container">
+        
+        <div style="text-align: center; margin-bottom: 3rem;">
+          <span class="eyebrow">PREGUNTAS FRECUENTES</span>
+          <h2>¿Cómo funciona el Ecosistema IDE en la práctica?</h2>
+        </div>
+
+        <!-- Contenedor centrado del acordeón -->
+        <div class="faq-accordion-container">
+          
+          <!-- FAQ 1 -->
+          <details class="faq-item" name="faq-group">
+            <summary class="faq-header">
+              <span class="faq-question">¿Necesito contratar las cuatro capacidades del Ecosistema?</span>
+              <span class="faq-icon" aria-hidden="true">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </span>
+            </summary>
+            <div class="faq-content">
+              <p>
+                <strong>No.</strong> Cada intervención se diseña a partir del desafío y del contexto de la organización. Podemos trabajar desde una única capacidad o integrar varias cuando su combinación permite generar mayor valor.
+              </p>
+            </div>
+          </details>
+
+          <!-- FAQ 2 -->
+          <details class="faq-item" name="faq-group">
+            <summary class="faq-header">
+              <span class="faq-question">¿IDE trabaja con soluciones prediseñadas o desarrolla propuestas a medida?</span>
+              <span class="faq-icon" aria-hidden="true">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </span>
+            </summary>
+            <div class="faq-content">
+              <p>
+                <strong>Ambas posibilidades pueden convivir.</strong> Contamos con soluciones y metodologías que sirven como punto de partida, pero definimos el alcance de cada intervención según los objetivos, necesidades y contexto de la organización.
+              </p>
+            </div>
+          </details>
+
+          <!-- FAQ 3 -->
+          <details class="faq-item" name="faq-group">
+            <summary class="faq-header">
+              <span class="faq-question">¿Qué pasa si no sé qué capacidad necesito?</span>
+              <span class="faq-icon" aria-hidden="true">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </span>
+            </summary>
+            <div class="faq-content">
+              <p>
+                <strong>No hace falta definirlo de antemano.</strong> Empezamos por comprender qué está pasando, identificar dónde puede estar el punto de intervención y, a partir de allí, determinar qué capacidades pueden aportar valor.
+              </p>
+            </div>
+          </details>
+
+          <!-- FAQ 4 -->
+          <details class="faq-item" name="faq-group">
+            <summary class="faq-header">
+              <span class="faq-question">¿Puedo trabajar con IDE para una necesidad puntual?</span>
+              <span class="faq-icon" aria-hidden="true">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </span>
+            </summary>
+            <div class="faq-content">
+              <p>
+                <strong>Sí.</strong> La mirada sistémica no implica intervenir en toda la organización. Podemos abordar una necesidad específica manteniendo en perspectiva sus relaciones e impactos sobre el conjunto.
+              </p>
+            </div>
+          </details>
+
+          <!-- FAQ 5 -->
+          <details class="faq-item" name="faq-group">
+            <summary class="faq-header">
+              <span class="faq-question">¿Cómo sé por dónde empezar?</span>
+              <span class="faq-icon" aria-hidden="true">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </span>
+            </summary>
+            <div class="faq-content">
+              <p>
+                <strong>Si ya identificaste qué necesitás, podés explorar nuestras soluciones.</strong> Si todavía estás tratando de comprender el desafío, la Brújula IDE puede ayudarte a encontrar un primer punto de orientación.
+              </p>
+            </div>
+          </details>
+
+        </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">
+        <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>
+        </div>
+      </div>
+    </section>
+
+    <!-- MODAL: IDE EXCELLENCE -->
+    <div id="modal-ide-excellence" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
+      <div class="ide-modal-container excellence">
+        
+        <!-- Botón Cerrar (X) -->
+        <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+
+        <!-- Envoltorio del contenido con scroll interno -->
+        <div class="ide-modal-body-wrapper">
+          <div class="ide-modal-scroll" id="modalScrollArea">
+            
+            <!-- Encabezado -->
+            <header class="ide-modal-header">
+              <div class="ide-modal-pill">IDE EXCELLENCE</div>
+              <h2 id="modal-projects-title" class="ide-modal-title">Operational Excellence & Management Systems</h2>
+              <p class="ide-modal-tagline">Fortalecer la gestión para mejorar el desempeño.</p>
+            </header>
+
+            <!-- Introducción -->
+            <div class="ide-modal-lead">
+              <p>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.</p>
+              <p>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>
+            </div>
+
+            <!-- Capacidades -->
+            <section class="ide-modal-section">
+              <h3 class="ide-section-title">Nuestras capacidades</h3>
+              <div class="ide-grid-cards"> 
+                <div class="ide-feature-card">
+                  <h4>Excelencia operacional</h4>
+                  <p>Procesos · cadenas de valor · eficiencia · desempeño · mejora continua · indicadores.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Sistemas de gestión</h4>
+                  <p>ISO 9001 · ISO 14001 · ISO 45001 · ISO 29001 · ISO 39001 · ISO 22000 · ISO 21001 · ISO 29993 · ISO 30401 · sistemas integrados · referenciales sectoriales.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Sostenibilidad</h4>
+                  <p>Integración de criterios ambientales, sociales y de gobernanza en la gestión · ODS · identificación de impactos · objetivos e indicadores de sostenibilidad · buenas prácticas.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Riesgos, desempeño y mejora</h4>
+                  <p>Riesgos y oportunidades · KPIs · tableros · auditorías · evaluación de madurez · mejora continua.</p>
+                </div>
+
+                <div class="ide-feature-card ide-card-full">
+                  <h4>Gestión del conocimiento</h4>
+                  <p>Conocimiento crítico · transferencia · lecciones aprendidas · continuidad · aprendizaje organizacional.</p>
+                </div>
+
+              </div>
+            </section>
+
+            <!-- Propuesta de Valor -->
+            <section class="ide-modal-callout">
+              <blockquote class="ide-quote-highlight">
+                “Mejorar el desempeño sin perder de vista el impacto.”
+              </blockquote>
+              <p>Sistemas y procesos que no existan solamente para cumplir un requisito, sino que ayuden a ordenar, decidir, mejorar y sostener resultados.</p>
+            </section>
+
+            <!-- Sinergia del Ecosistema -->
+            <section class="ide-modal-synergy">
+              <h4>Cuando el desafío requiere más</h4>
+              <p>
+                IDE Excellence puede integrarse con <strong>IDE Project</strong> , <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para abordar proyectos de transformación, desarrollar capacidades o incorporar tecnología y automatización.
+              </p>
+            </section>
+
+          </div>
+        </div>
+
+        <!-- Barra Inferior Fija (Footer) -->
+        <footer class="ide-modal-footer-fixed">
+          <span class="ide-scroll-hint" id="scrollHint">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
+            </svg>
+            Desliza para leer más
+          </span>
+          <a href="contacto.html" class="ide-btn-cta">
+            <span>HABLEMOS</span>
+            <span class="ide-btn-arrow">→</span>
+          </a>
+        </footer>
+
+      </div>
+    </div>
+
+    <!-- MODAL: IDE PROJECTS -->
+    <div id="modal-ide-project" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
+      <div class="ide-modal-container projects">
+        
+        <!-- Botón Cerrar (X) -->
+        <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+
+        <!-- Envoltorio del contenido con scroll interno -->
+        <div class="ide-modal-body-wrapper">
+          <div class="ide-modal-scroll project" id="modalScrollArea">
+            
+            <!-- Encabezado -->
+            <header class="ide-modal-header">
+              <div class="ide-modal-pill">IDE PROJECTS</div>
+              <h2 id="modal-projects-title" class="ide-modal-title">PMO & Project Services</h2>
+              <p class="ide-modal-tagline">Convertir iniciativas en resultados.</p>
+            </header>
+
+            <!-- Introducción -->
+            <div class="ide-modal-lead">
+              <p>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.</p>
+              <p>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>
+            </div>
+
+            <!-- Capacidades -->
+            <section class="ide-modal-section">
+              <h3 class="ide-section-title">Nuestras capacidades</h3>
+              <div class="ide-grid-cards"> 
+                <div class="ide-feature-card">
+                  <h4>Gestión de proyectos</h4>
+                  <p>Planificación, organización, seguimiento y acompañamiento de proyectos para gestionar alcance, plazos, costos, recursos, riesgos, stakeholders y resultados.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>PMO — Oficinas de Gestión de Proyectos</h4>
+                  <p>Diseño, implementación y fortalecimiento de PMO adaptadas al nivel de madurez, estrategia y necesidades de cada organización.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Programas y portafolios</h4>
+                  <p>Priorización y coordinación de iniciativas para mejorar la asignación de recursos, gestionar interdependencias y mantener alineadas las inversiones con los objetivos organizacionales.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Gobernanza y metodologías</h4>
+                  <p>Diseño de modelos de gobernanza, procesos, roles, indicadores y metodologías predictivas, ágiles o híbridas adaptadas al contexto de cada organización.</p>
+                </div>
+
+                <div class="ide-feature-card ide-card-full">
+                  <h4>Diagnóstico y recuperación de proyectos</h4>
+                  <p>Evaluación de proyectos con dificultades o desvíos para identificar causas, redefinir prioridades y establecer planes de recuperación y seguimiento.</p>
+                </div>
+
+              </div>
+            </section>
+
+            <!-- Metodologías -->
+            <section class="ide-modal-section">
+              <h3 class="ide-section-title">Cómo trabajamos</h3>
+              <div class="ide-tags-wrapper">
+                <span class="ide-method-tag">Predictivo</span>
+                <span class="ide-dot">·</span>
+                <span class="ide-method-tag">Ágil</span>
+                <span class="ide-dot">·</span>
+                <span class="ide-method-tag">Híbrido</span>
+              </div>
+              <p class="ide-text-block">No partimos de una metodología predeterminada. Seleccionamos y combinamos prácticas de gestión según el tipo de proyecto, su complejidad, el contexto y las capacidades de la organización.</p>
+            </section>
+
+            <!-- Propuesta de Valor -->
+            <section class="ide-modal-callout">
+              <blockquote class="ide-quote-highlight">
+                “No se trata de gestionar más proyectos. Se trata de gestionar mejor las iniciativas que importan.”
+              </blockquote>
+              <p>Fortalecemos la capacidad de transformar prioridades estratégicas en iniciativas ejecutables, generar información para decidir y mantener el foco en los resultados.</p>
+            </section>
+
+            <!-- Sinergia del Ecosistema -->
+            <section class="ide-modal-synergy">
+              <h4>Cuando el desafío requiere más</h4>
+              <p>
+                IDE Projects puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para rediseñar procesos, desarrollar capacidades, implementar sistemas o incorporar tecnología que fortalezca la gestión y ejecución de proyectos.
+              </p>
+            </section>
+
+          </div>
+        </div>
+
+        <!-- Barra Inferior Fija (Footer) -->
+        <footer class="ide-modal-footer-fixed">
+          <span class="ide-scroll-hint" id="scrollHint">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
+            </svg>
+            Desliza para leer más
+          </span>
+          <a href="contacto.html" class="ide-btn-cta">
+            <span>HABLEMOS</span>
+            <span class="ide-btn-arrow">→</span>
+          </a>
+        </footer>
+
+      </div>
+    </div>
+
+    <!-- MODAL: IDE   DIGITAL -->
+    <div id="modal-ide-digital" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
+      <div class="ide-modal-container digital">
+        
+        <!-- Botón Cerrar (X) -->
+        <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+
+        <!-- Envoltorio del contenido con scroll interno -->
+        <div class="ide-modal-body-wrapper">
+          <div class="ide-modal-scroll" id="modalScrollArea">
+            
+            <!-- Encabezado -->
+            <header class="ide-modal-header">
+              <div class="ide-modal-pill">IDE DIGITAL</div>
+              <h2 id="modal-projects-title" class="ide-modal-title">Business Digital Solutions</h2>
+              <p class="ide-modal-tagline">Tecnología con sentido.</p>
+            </header>
+
+            <!-- Introducción -->
+            <div class="ide-modal-lead">
+              <p>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.</p>
+              <p>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>
+            </div>
+
+            <!-- Capacidades -->
+            <section class="ide-modal-section">
+              <h3 class="ide-section-title">Nuestras capacidades</h3>
+              <div class="ide-grid-cards"> 
+                <div class="ide-feature-card">
+                  <h4>Digitalización y sistematización de procesos</h4>
+                  <p>Analizamos procesos y flujos de información para identificar oportunidades de digitalización, reducir tareas manuales y mejorar la trazabilidad y disponibilidad de la información.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Automatización e integración</h4>
+                  <p>Diseñamos automatizaciones e integraciones entre procesos, datos y herramientas para reducir tareas repetitivas, errores y puntos de fricción.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Inteligencia Artificial aplicada</h4>
+                  <p>Identificamos y desarrollamos casos de uso de IA vinculados con necesidades concretas de gestión, operación, análisis y conocimiento organizacional.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Datos e inteligencia de negocio</h4>
+                  <p>Diseñamos indicadores, tableros y soluciones de Business Intelligence para transformar datos dispersos en información accesible y útil para la toma de decisiones.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Diagnóstico y hoja de ruta digital</h4>
+                  <p>Evaluamos procesos, herramientas, información y capacidades para identificar oportunidades, establecer prioridades y construir una hoja de ruta de transformación digital.</p>
+                </div>
+
+                <div class="ide-feature-card">
+                  <h4>Adopción y capacidades digitales</h4>
+                  <p>Acompañamos la incorporación de nuevas soluciones trabajando sobre procesos, prácticas y capacidades para integrarlas efectivamente a la dinámica de la organización.</p>
+                </div>
+
+              </div>
+            </section>
+
+            <!-- Metodologías -->
+            <section class="ide-modal-section">
+              <h3 class="ide-section-title">Cómo trabajamos</h3>
+              <div class="ide-tags-wrapper">
+                <span class="ide-method-tag">Necesidad</span>
+                <span class="ide-dot">&rArr;</span>
+                <span class="ide-method-tag">Proceso</span>
+                <span class="ide-dot">&rArr;</span>
+                <span class="ide-method-tag">Solución</span>
+                <span class="ide-dot">&rArr;</span>
+                <span class="ide-method-tag">Integración</span>
+              </div>
+              <p class="ide-text-block">No partimos de una tecnología predeterminada. Primero comprendemos la necesidad y el proceso; luego identificamos qué solución digital puede generar valor y cómo integrarla al funcionamiento de la organización.</p>
+            </section>
+
+            <!-- Propuesta de Valor -->
+            <section class="ide-modal-callout">
+              <blockquote class="ide-quote-highlight">
+                “No digitalizar por digitalizar. Transformar donde tenga sentido.”
+              </blockquote>
+              <p>La tecnología genera valor cuando simplifica la gestión, mejora las decisiones o habilita nuevas capacidades sin agregar complejidad innecesaria.</p>
+            </section>
+
+            <!-- Sinergia del Ecosistema -->
+            <section class="ide-modal-synergy">
+              <h4>Cuando el desafío requiere más</h4>
+              <p>
+                <strong>IDE Digital</strong> puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Projects</strong> e <strong>IDE Academy</strong> para rediseñar procesos, gestionar proyectos de transformación y desarrollar las capacidades necesarias para incorporar nuevas formas de trabajar.
+              </p>
+            </section>
+
+          </div>
+        </div>
+
+        <!-- Barra Inferior Fija (Footer) -->
+        <footer class="ide-modal-footer-fixed">
+          <span class="ide-scroll-hint" id="scrollHint">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
+            </svg>
+            Desliza para leer más
+          </span>
+          <a href="contacto.html" class="ide-btn-cta">
+            <span>HABLEMOS</span>
+            <span class="ide-btn-arrow">→</span>
+          </a>
+        </footer>
+
+      </div>
+    </div>
+
+    
+
+
+
+  </main>
+
+  <footer id="site-footer"></footer>
+  <script src="js/main.js"></script>
+  <script src="js/netschema.js"></script>
+  <script src="js/modal.js"></script>
+</body>
+</html>

ecosistema.html

@@ -10,7 +10,6 @@
   <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">
-  <link rel="stylesheet" href="css/modal.css">
   <link rel="stylesheet" href="css/faq.css">
 </head>
 <body>
@@ -33,17 +32,7 @@
       </div>
     </section>
 
-    <!-- SECCIÓN WEB DEDICADA PARA EL ESQUEMA -->
-    <section class="netschema-section">
-      <div class="netschema-wrapper">
-        <canvas id="networkCanvas" width="1200" height="520"></canvas>
 
-        <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-sm">
@@ -53,104 +42,101 @@
           <h2>Conocé Nuestro Ecosistema en detalle</h2>
         </div>
         <!-- 1. IDE Excellence -->
-        <div id="excellence" class="card card-excellence card-ecosistema">
+        <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 eco">
+          <div class="grid-2" style="align-items: center; gap: 3rem;">
             <div>
-              <span class="ecosystem-badge badge-excellence">Operational Excellence & Sustainability</span>
+              <h3 style="font-size: 2rem; color: var(--ide-excellence); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Excellence</h3>
-              <p>
+              <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>
-                <strong>Para fortalecer la gestión y mejorar el desempeño:</strong> 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 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;">
-              <!-- Lista en formato píldoras -->
+                <span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Procesos</span>
-              <div class="pills-list">
+                <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">Procesos</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">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;">Desempeño</span>
-                <span class="pill-item">Mejora continua</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">Desempeño</span>
+                <span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Sostenibilidad</span>
-                <span class="pill-item">Riesgos</span>
-                <span class="pill-item">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>
-              <a class="btn btn-outline btn-sm" data-modal-target="modal-ide-excellence">CONOCER MÁS →</a>
             </div>
             <div>
-              <img src="assets/img/excellence.png" alt="IDE Excellence">
+              <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" class="card card-project card-ecosistema">
+        <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 eco">
+          <div class="grid-2" style="align-items: center; gap: 3rem;">
             <div>
-              <img src="assets/img/projects.png" alt="IDE Project">
+              <img src="assets/img/projects.png" alt="IDE Project" style="width: 100%; border-radius: var(--radius-md);">
             </div>
             <div>
-              <span class="ecosystem-badge badge-project">PMO & Project Services</span>
+              <h3 style="font-size: 2rem; color: var(--ide-projects); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Project</h3>
-              <p>
+              <p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para convertir iniciativas en resultados</p>
-                <strong>Para convertir iniciativas en resultados:</strong> Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
+              <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>
-              <!-- Lista en formato píldoras -->
+              <div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
-              <div class="pills-list">
+                <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">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">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">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">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">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>
-                <span class="pill-item">Resultados</span>
               </div>
-              <a class="btn btn-outline btn-sm" data-modal-target="modal-ide-project">CONOCER MÁS →</a>
+              <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" class="card card-digital card-ecosistema">
+        <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 eco">
+          <div class="grid-2" style="align-items: center; gap: 3rem;">
             <div>
-              <span class="ecosystem-badge badge-digital">Business Digital Solutions</span>
+              <h3 style="font-size: 2rem; color: var(--ide-digital); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Digital</h3>
-              <p>
+              <p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Tecnología con sentido</p>
-                <strong>Tecnología con sentido: </strong> 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 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>
-              <!-- Lista en formato píldoras -->
+              <div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
-              <div class="pills-list">
+                <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">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">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">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">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">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>
-                <span class="pill-item">Decisiones</span>
               </div>
-              <a class="btn btn-outline btn-sm" data-modal-target="modal-ide-digital">CONOCER MÁS →</a>
+              <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">
+              <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" class="card card-academy card-ecosistema">
+        <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 eco">
+          <div class="grid-2" style="align-items: center; gap: 3rem;">
             <div>
-              <img src="assets/img/academy.png" alt="IDE Academy">
+              <img src="assets/img/academy.png" alt="IDE Academy" style="width: 100%; border-radius: var(--radius-md);">
             </div>
             <div>
-              <span class="ecosystem-badge badge-academy">Executive Learning & Capability Development</span>
+              <h3 style="font-size: 2rem; color: var(--ide-academy); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Academy</h3>
-              <p>
+              <p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para desarrollar capacidades</p>
-                <strong>Para desarrollar capacidades: </strong>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 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>
-              <!-- Lista en formato píldoras -->
+              <div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
-              <div class="pills-list">
+                <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">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">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">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">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>
-                <span class="pill-item">Rutas de aprendizaje</span>
               </div>
-              <a href="ide-academy.html" class="btn btn-outline btn-sm">EXPLORAR IDE ACADEMY →</a>
+              <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>
@@ -271,339 +257,9 @@
       </div>
     </section>
 
-    <!-- MODAL: IDE EXCELLENCE -->
-    <div id="modal-ide-excellence" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
-      <div class="ide-modal-container excellence">
-        
-        <!-- Botón Cerrar (X) -->
-        <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-
-        <!-- Envoltorio del contenido con scroll interno -->
-        <div class="ide-modal-body-wrapper">
-          <div class="ide-modal-scroll" id="modalScrollArea">
-            
-            <!-- Encabezado -->
-            <header class="ide-modal-header">
-              <div class="ide-modal-pill">IDE EXCELLENCE</div>
-              <h2 id="modal-projects-title" class="ide-modal-title">Operational Excellence & Management Systems</h2>
-              <p class="ide-modal-tagline">Fortalecer la gestión para mejorar el desempeño.</p>
-            </header>
-
-            <!-- Introducción -->
-            <div class="ide-modal-lead">
-              <p>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.</p>
-              <p>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>
-            </div>
-
-            <!-- Capacidades -->
-            <section class="ide-modal-section">
-              <h3 class="ide-section-title">Nuestras capacidades</h3>
-              <div class="ide-grid-cards"> 
-                <div class="ide-feature-card">
-                  <h4>Excelencia operacional</h4>
-                  <p>Procesos · cadenas de valor · eficiencia · desempeño · mejora continua · indicadores.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Sistemas de gestión</h4>
-                  <p>ISO 9001 · ISO 14001 · ISO 45001 · ISO 29001 · ISO 39001 · ISO 22000 · ISO 21001 · ISO 29993 · ISO 30401 · sistemas integrados · referenciales sectoriales.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Sostenibilidad</h4>
-                  <p>Integración de criterios ambientales, sociales y de gobernanza en la gestión · ODS · identificación de impactos · objetivos e indicadores de sostenibilidad · buenas prácticas.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Riesgos, desempeño y mejora</h4>
-                  <p>Riesgos y oportunidades · KPIs · tableros · auditorías · evaluación de madurez · mejora continua.</p>
-                </div>
-
-                <div class="ide-feature-card ide-card-full">
-                  <h4>Gestión del conocimiento</h4>
-                  <p>Conocimiento crítico · transferencia · lecciones aprendidas · continuidad · aprendizaje organizacional.</p>
-                </div>
-
-              </div>
-            </section>
-
-            <!-- Propuesta de Valor -->
-            <section class="ide-modal-callout">
-              <blockquote class="ide-quote-highlight">
-                “Mejorar el desempeño sin perder de vista el impacto.”
-              </blockquote>
-              <p>Sistemas y procesos que no existan solamente para cumplir un requisito, sino que ayuden a ordenar, decidir, mejorar y sostener resultados.</p>
-            </section>
-
-            <!-- Sinergia del Ecosistema -->
-            <section class="ide-modal-synergy">
-              <h4>Cuando el desafío requiere más</h4>
-              <p>
-                IDE Excellence puede integrarse con <strong>IDE Project</strong> , <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para abordar proyectos de transformación, desarrollar capacidades o incorporar tecnología y automatización.
-              </p>
-            </section>
-
-          </div>
-        </div>
-
-        <!-- Barra Inferior Fija (Footer) -->
-        <footer class="ide-modal-footer-fixed">
-          <span class="ide-scroll-hint" id="scrollHint">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
-            </svg>
-            Desliza para leer más
-          </span>
-          <a href="contacto.html" class="ide-btn-cta">
-            <span>HABLEMOS</span>
-            <span class="ide-btn-arrow">→</span>
-          </a>
-        </footer>
-
-      </div>
-    </div>
-
-    <!-- MODAL: IDE PROJECTS -->
-    <div id="modal-ide-project" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
-      <div class="ide-modal-container projects">
-        
-        <!-- Botón Cerrar (X) -->
-        <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-
-        <!-- Envoltorio del contenido con scroll interno -->
-        <div class="ide-modal-body-wrapper">
-          <div class="ide-modal-scroll project" id="modalScrollArea">
-            
-            <!-- Encabezado -->
-            <header class="ide-modal-header">
-              <div class="ide-modal-pill">IDE PROJECTS</div>
-              <h2 id="modal-projects-title" class="ide-modal-title">PMO & Project Services</h2>
-              <p class="ide-modal-tagline">Convertir iniciativas en resultados.</p>
-            </header>
-
-            <!-- Introducción -->
-            <div class="ide-modal-lead">
-              <p>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.</p>
-              <p>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>
-            </div>
-
-            <!-- Capacidades -->
-            <section class="ide-modal-section">
-              <h3 class="ide-section-title">Nuestras capacidades</h3>
-              <div class="ide-grid-cards"> 
-                <div class="ide-feature-card">
-                  <h4>Gestión de proyectos</h4>
-                  <p>Planificación, organización, seguimiento y acompañamiento de proyectos para gestionar alcance, plazos, costos, recursos, riesgos, stakeholders y resultados.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>PMO — Oficinas de Gestión de Proyectos</h4>
-                  <p>Diseño, implementación y fortalecimiento de PMO adaptadas al nivel de madurez, estrategia y necesidades de cada organización.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Programas y portafolios</h4>
-                  <p>Priorización y coordinación de iniciativas para mejorar la asignación de recursos, gestionar interdependencias y mantener alineadas las inversiones con los objetivos organizacionales.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Gobernanza y metodologías</h4>
-                  <p>Diseño de modelos de gobernanza, procesos, roles, indicadores y metodologías predictivas, ágiles o híbridas adaptadas al contexto de cada organización.</p>
-                </div>
-
-                <div class="ide-feature-card ide-card-full">
-                  <h4>Diagnóstico y recuperación de proyectos</h4>
-                  <p>Evaluación de proyectos con dificultades o desvíos para identificar causas, redefinir prioridades y establecer planes de recuperación y seguimiento.</p>
-                </div>
-
-              </div>
-            </section>
-
-            <!-- Metodologías -->
-            <section class="ide-modal-section">
-              <h3 class="ide-section-title">Cómo trabajamos</h3>
-              <div class="ide-tags-wrapper">
-                <span class="ide-method-tag">Predictivo</span>
-                <span class="ide-dot">·</span>
-                <span class="ide-method-tag">Ágil</span>
-                <span class="ide-dot">·</span>
-                <span class="ide-method-tag">Híbrido</span>
-              </div>
-              <p class="ide-text-block">No partimos de una metodología predeterminada. Seleccionamos y combinamos prácticas de gestión según el tipo de proyecto, su complejidad, el contexto y las capacidades de la organización.</p>
-            </section>
-
-            <!-- Propuesta de Valor -->
-            <section class="ide-modal-callout">
-              <blockquote class="ide-quote-highlight">
-                “No se trata de gestionar más proyectos. Se trata de gestionar mejor las iniciativas que importan.”
-              </blockquote>
-              <p>Fortalecemos la capacidad de transformar prioridades estratégicas en iniciativas ejecutables, generar información para decidir y mantener el foco en los resultados.</p>
-            </section>
-
-            <!-- Sinergia del Ecosistema -->
-            <section class="ide-modal-synergy">
-              <h4>Cuando el desafío requiere más</h4>
-              <p>
-                IDE Projects puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para rediseñar procesos, desarrollar capacidades, implementar sistemas o incorporar tecnología que fortalezca la gestión y ejecución de proyectos.
-              </p>
-            </section>
-
-          </div>
-        </div>
-
-        <!-- Barra Inferior Fija (Footer) -->
-        <footer class="ide-modal-footer-fixed">
-          <span class="ide-scroll-hint" id="scrollHint">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
-            </svg>
-            Desliza para leer más
-          </span>
-          <a href="contacto.html" class="ide-btn-cta">
-            <span>HABLEMOS</span>
-            <span class="ide-btn-arrow">→</span>
-          </a>
-        </footer>
-
-      </div>
-    </div>
-
-    <!-- MODAL: IDE   DIGITAL -->
-    <div id="modal-ide-digital" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
-      <div class="ide-modal-container digital">
-        
-        <!-- Botón Cerrar (X) -->
-        <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-
-        <!-- Envoltorio del contenido con scroll interno -->
-        <div class="ide-modal-body-wrapper">
-          <div class="ide-modal-scroll" id="modalScrollArea">
-            
-            <!-- Encabezado -->
-            <header class="ide-modal-header">
-              <div class="ide-modal-pill">IDE DIGITAL</div>
-              <h2 id="modal-projects-title" class="ide-modal-title">Business Digital Solutions</h2>
-              <p class="ide-modal-tagline">Tecnología con sentido.</p>
-            </header>
-
-            <!-- Introducción -->
-            <div class="ide-modal-lead">
-              <p>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.</p>
-              <p>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>
-            </div>
-
-            <!-- Capacidades -->
-            <section class="ide-modal-section">
-              <h3 class="ide-section-title">Nuestras capacidades</h3>
-              <div class="ide-grid-cards"> 
-                <div class="ide-feature-card">
-                  <h4>Digitalización y sistematización de procesos</h4>
-                  <p>Analizamos procesos y flujos de información para identificar oportunidades de digitalización, reducir tareas manuales y mejorar la trazabilidad y disponibilidad de la información.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Automatización e integración</h4>
-                  <p>Diseñamos automatizaciones e integraciones entre procesos, datos y herramientas para reducir tareas repetitivas, errores y puntos de fricción.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Inteligencia Artificial aplicada</h4>
-                  <p>Identificamos y desarrollamos casos de uso de IA vinculados con necesidades concretas de gestión, operación, análisis y conocimiento organizacional.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Datos e inteligencia de negocio</h4>
-                  <p>Diseñamos indicadores, tableros y soluciones de Business Intelligence para transformar datos dispersos en información accesible y útil para la toma de decisiones.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Diagnóstico y hoja de ruta digital</h4>
-                  <p>Evaluamos procesos, herramientas, información y capacidades para identificar oportunidades, establecer prioridades y construir una hoja de ruta de transformación digital.</p>
-                </div>
-
-                <div class="ide-feature-card">
-                  <h4>Adopción y capacidades digitales</h4>
-                  <p>Acompañamos la incorporación de nuevas soluciones trabajando sobre procesos, prácticas y capacidades para integrarlas efectivamente a la dinámica de la organización.</p>
-                </div>
-
-              </div>
-            </section>
-
-            <!-- Metodologías -->
-            <section class="ide-modal-section">
-              <h3 class="ide-section-title">Cómo trabajamos</h3>
-              <div class="ide-tags-wrapper">
-                <span class="ide-method-tag">Necesidad</span>
-                <span class="ide-dot">&rArr;</span>
-                <span class="ide-method-tag">Proceso</span>
-                <span class="ide-dot">&rArr;</span>
-                <span class="ide-method-tag">Solución</span>
-                <span class="ide-dot">&rArr;</span>
-                <span class="ide-method-tag">Integración</span>
-              </div>
-              <p class="ide-text-block">No partimos de una tecnología predeterminada. Primero comprendemos la necesidad y el proceso; luego identificamos qué solución digital puede generar valor y cómo integrarla al funcionamiento de la organización.</p>
-            </section>
-
-            <!-- Propuesta de Valor -->
-            <section class="ide-modal-callout">
-              <blockquote class="ide-quote-highlight">
-                “No digitalizar por digitalizar. Transformar donde tenga sentido.”
-              </blockquote>
-              <p>La tecnología genera valor cuando simplifica la gestión, mejora las decisiones o habilita nuevas capacidades sin agregar complejidad innecesaria.</p>
-            </section>
-
-            <!-- Sinergia del Ecosistema -->
-            <section class="ide-modal-synergy">
-              <h4>Cuando el desafío requiere más</h4>
-              <p>
-                <strong>IDE Digital</strong> puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Projects</strong> e <strong>IDE Academy</strong> para rediseñar procesos, gestionar proyectos de transformación y desarrollar las capacidades necesarias para incorporar nuevas formas de trabajar.
-              </p>
-            </section>
-
-          </div>
-        </div>
-
-        <!-- Barra Inferior Fija (Footer) -->
-        <footer class="ide-modal-footer-fixed">
-          <span class="ide-scroll-hint" id="scrollHint">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
-            </svg>
-            Desliza para leer más
-          </span>
-          <a href="contacto.html" class="ide-btn-cta">
-            <span>HABLEMOS</span>
-            <span class="ide-btn-arrow">→</span>
-          </a>
-        </footer>
-
-      </div>
-    </div>
-
-    
-
-
-
   </main>
 
   <footer id="site-footer"></footer>
   <script src="js/main.js"></script>
-  <script src="js/netschema.js"></script>
-  <script src="js/modal.js"></script>
 </body>
 </html>

includes/footer.html

@@ -1,114 +1,84 @@
 <!-- ==========================================================================
      FOOTER MODULAR - IDE CONSULTORES
-     Edición centralizada de enlaces, datos de contacto, isotipo institucional y talento.
      ========================================================================== -->
+<footer class="site-footer" style="background-color: var(--bg-subtle, #f8f9fa); padding: 3rem 0 1.5rem;">
+  <div class="container">
     
-<div class="container">
+    <!-- FILA SUPERIOR: Horizontal (Logo + Slogan | Navegación | CTA) -->
-  <div class="footer-bg">
+    <div class="footer-top">
-    <img src="assets/img/ide.svg" alt="" 
-       style="display: block; width: 100%; height: auto; opacity: 0.06;">
-  </div>
-  <div class="footer-grid">
       
-    <!-- Columna 1: Marca, Filosofía e Isotipo -->
+      <!-- 1. Marca y Slogan -->
-    <div>
+      <div class="footer-brand">
-      <div class="footer-logo-wrap">
+        <img src="assets/img/logo_verde.png" alt="IDE Consultores" class="footer-logo">
-
+        <p class="footer-slogan">
-        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+          Convertimos la gestión en <br>una ventaja competitiva.
-          <img src="assets/img/logo_verde.png" alt="Isotipo IDE Consultores" style="height: 50px; width: auto;">
+        </p>
-          
-        </div>
       </div>
-      <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem;">
-        Conectamos el Todo.<br> Comprendemos las organizaciones como sistemas para intervenir estratégicamente donde se genera mayor impacto y valor sostenible.
-      </p>
-      <!-- Ecosistema resumido (solo nombres) -->
-      <div style="font-size: 0.78rem; color: var(--text-muted);">
-        <span style="font-weight: 600; color: var(--text-primary);">Ecosistema IDE:</span>
-        <span style="display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.25rem;">
-          <a href="ecosistema.html#excellence" class="footer-link2">Excellence</a>
-          <a href="ecosistema.html#project" class="footer-link2">Project</a>
-          <a href="ecosistema.html#academy" class="footer-link2">Academy</a>
-          <a href="ecosistema.html#digital" class="footer-link2">Digital</a>
-        </span>
-      </div>
-    </div>
 
-    <!-- Columna 2: Ecosistema de Capacidades -->
+      <!-- 2. Navegación -->
-    <div>
+      <nav class="footer-nav">
-      <h4 class="footer-heading" style="padding-bottom: 5px;">Explorar</h4>
+        <ul class="footer-links-horizontal">
-      <ul class="footer-links">
+          <li><a href="index.html" class="footer-link">Inicio</a></li>
-        <li><a href="desafios.html" class="footer-link">Tengo un Problema</a></li>
+          <li><a href="desafios.html" class="footer-link">Punto de partida</a></li>
-        <li><a href="soluciones.html" class="footer-link">Busco una Solución</a></li>
+          <li><a href="soluciones.html" class="footer-link">Soluciones</a></li>
-        <li><a href="somos-ide.html" class="footer-link">Somos IDE</a></li>
+          <li><a href="ecosistema.html" class="footer-link">Ecosistema</a></li>
-        <li><a href="insights.html" class="footer-link">Insights & Blog</a></li>
+          <li><a href="insights.html" class="footer-link">Insights</a></li>
-        <li><a href="index.html#brujula" class="footer-link">Brújula IDE</a></li>
+          <li><a href="somos-ide.html" class="footer-link">Nosotros</a></li>
-      </ul>
+        </ul>
-    </div>
+      </nav>
 
-    <!-- Columna 3: Exploración -->
+      <!-- 3. CTA -->
-    <div>
+      <div class="footer-cta">
-      <h4 class="footer-heading" style="padding-bottom: 5px;">Navegación</h4>
+        <a href="contacto.html" class="btn btn-primary footer-cta-btn">
-      <ul class="footer-links">
+          HABLEMOS
-        <li><a href="index.html#brujula" class="footer-link">Brújula IDE</a></li>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <li><a href="ide-academy.html" class="footer-link">Academy</a></li>
+            <circle cx="12" cy="12" r="10"></circle>
-        <li><a href="somos-ide.html" class="footer-link">Nosotros</a></li>
+            <polyline points="12 16 16 12 12 8"></polyline>
-        <li><a href="insights.html" class="footer-link">Insights</a></li>
+            <line x1="8" y1="12" x2="16" y2="12"></line>
-        <li><a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="footer-link">Blog</a></li>
+          </svg>
-        <li><a href="politicas-de-privacidad.html" class="footer-link">Política de Privacidad</a></li>
-        <li><a href="politicas-de-cookies.html" class="footer-link">Cookies</a></li>
-      </ul>
-    </div>
-
-    <!-- Columna 4: Contacto Institucional & Talento -->
-    <div>
-      <h4 class="footer-heading" style="padding-bottom: 5px;">Contacto</h4>
-      <ul class="footer-links" style="margin-bottom: 1.5rem;">
-        <li style="font-size: 0.9rem; color: var(--text-muted);">
-          <strong>Sedes:</strong> Salta y Jujuy, Argentina
-        </li>
-        <li style="font-size: 0.9rem; color: var(--text-muted);">
-          <strong>Email:</strong> <a href="mailto:info@ideconsultores.com.ar" class="footer-link">info@ideconsultores.com.ar</a>
-        </li>
-        <li style="font-size: 0.9rem; color: var(--text-muted);">
-          <strong>WhatsApp:</strong> <a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="footer-link" style="color: var(--ide-accent);">+54 9 11 2345-6789</a>
-        </li>
-      </ul>
-      <!-- REDES SOCIALES -->
-      <div style="margin-bottom: 1.25rem;">
-        <h4 class="footer-heading" style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;">Seguinos</h4>
-        <div class="footer-socials">
-          <a href="https://www.linkedin.com/company/ide-consultores" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer-social-link">
-            <i class="fab fa-linkedin-in"></i>
-          </a>
-          <a href="https://web.facebook.com/ConsultoresIDE" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="footer-social-link">
-            <i class="fab fa-facebook"></i>
-          </a>
-          <a href="https://www.instagram.com/ide.consultores/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="footer-social-link">
-            <i class="fab fa-instagram"></i>
-          </a>
-
-        </div>
-      </div>
-      <!-- Enlace a Trabaja con Nosotros exclusivo en Footer según UX spec -->
-      <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
-        <a href="trabaja-con-nosotros.html" class="btn btn-outline btn-sm" style="width: 100%; text-align: center;">
-          Trabaja con nosotros
         </a>
       </div>
     </div>
 
-  </div>
+    <!-- DIVISOR SUTIL -->
+    <hr class="footer-divider">
+
+    <!-- FILA INFERIOR: Legal | Redes Sociales | Copyright -->
+    <div class="footer-bottom">
+      
+      <!-- 1. Links Legales -->
+      <div class="footer-legal">
+        <ul class="footer-legal-list">
+          <li><a href="politicas-de-privacidad.html" class="footer-link-small">Política de privacidad</a></li>
+          <li><a href="terminos-y-condiciones.html" class="footer-link-small">Términos y condiciones</a></li>
+        </ul>
+      </div>
+      
+      <!-- 2. Redes Sociales (Agregados Mail y WhatsApp) -->
+      <!-- NOTA: Reemplaza el href de mailto: y wa.me con tus datos reales -->
+      <div class="footer-socials">
+        <a href="mailto:info@ideconsultores.com" aria-label="Correo electrónico" class="footer-social-link">
+          <i class="fas fa-envelope"></i>
+        </a>
+        <a href="https://wa.me/5491100000000" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" class="footer-social-link">
+          <i class="fab fa-whatsapp"></i>
+        </a>
+        <a href="https://www.linkedin.com/company/ide-consultores" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer-social-link">
+          <i class="fab fa-linkedin-in"></i>
+        </a>
+        <a href="https://www.facebook.com/ConsultoresIDE" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="footer-social-link">
+          <i class="fab fa-facebook-f"></i>
+        </a>
+        <a href="https://www.instagram.com/ide.consultores/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="footer-social-link">
+          <i class="fab fa-instagram"></i>
+        </a>
+      </div>
+      
+      <!-- 3. Copyright -->
+      <div class="footer-copyright">
+        © 2026 IDE Consultores | Sitio creado por <a href="https://www.amoryroma.com.ar" target="_blank" class="footer-credit"> A&R</a>
+      </div>
 
-  <!-- Barra Inferior -->
-  <div class="footer-bottom">
-    <div>
-      © 2026 IDE Consultores | Todos los derechos reservados.
-    </div>
-    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
-      <span style="color: var(--text-muted); font-size: 0.8rem; opacity: 0.6;">
-        Sitio diseñado por <a href="https://www.amoryroma.com.ar" target="_blank" style="color: var(--text-muted); text-decoration: none; font-weight: 500;">Amor & Roma</a>
-      </span>
     </div>
   </div>
-</div>
+</footer>

includes/header.html

@@ -65,7 +65,10 @@
         </svg>
       </button>
 
-      <a href="contacto.html" class="btn btn-primary btn-sm">HABLEMOS</a>
+      <a href="contacto.html" class="btn btn-primary btn-cta-unificado">
+        HABLEMOS
+        <svg width="16" height="16" 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>
 
       <!-- Botón Menú Móvil Hamburguesa -->
       <button 

js/index-carrousel.js

@@ -0,0 +1,114 @@
+/**
+ * ECOSISTEMA - CARRUSEL
+ * Auto-play con fade, control por tabs, pausa al interactuar,
+ * reanudación al salir completamente del viewport.
+ */
+(function () {
+  'use strict';
+
+  const INTERVAL_MS = 5000;
+  const FADE_MS = 600; // debe coincidir con --eco-fade-duration
+
+  const section = document.querySelector('.ecosystem-section');
+  if (!section) return;
+
+  const tabs = Array.from(section.querySelectorAll('.eco-tab'));
+  const slides = Array.from(section.querySelectorAll('.eco-slide'));
+
+  let currentIndex = 0;
+  let timer = null;
+  let userInteracted = false; // true después de un clic manual
+
+  // ---------- Utilidades ----------
+  function goTo(index) {
+    if (index < 0) index = slides.length - 1;
+    if (index >= slides.length) index = 0;
+
+    // Actualizar slides
+    slides.forEach((slide, i) => {
+      if (i === index) {
+        slide.classList.add('is-active');
+        slide.removeAttribute('hidden');
+      } else {
+        slide.classList.remove('is-active');
+        // Esperamos la transición para ocultar (accesibilidad + rendimiento)
+        setTimeout(() => {
+          if (!slide.classList.contains('is-active')) {
+            slide.setAttribute('hidden', '');
+          }
+        }, FADE_MS);
+      }
+    });
+
+    // Actualizar tabs
+    tabs.forEach((tab, i) => {
+      if (i === index) {
+        tab.classList.add('is-active');
+        tab.setAttribute('aria-selected', 'true');
+        // Color activo específico de la capacidad
+        tab.style.backgroundColor = tab.dataset.color;
+        tab.style.borderColor = tab.dataset.color;
+      } else {
+        tab.classList.remove('is-active');
+        tab.setAttribute('aria-selected', 'false');
+        // Reset a color inactivo estándar
+        tab.style.backgroundColor = '';
+        tab.style.borderColor = '';
+      }
+    });
+
+    currentIndex = index;
+  }
+
+  function next() {
+    goTo(currentIndex + 1);
+  }
+
+  function startAutoPlay() {
+    stopAutoPlay();
+    timer = setInterval(next, INTERVAL_MS);
+  }
+
+  function stopAutoPlay() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  // ---------- Eventos de tabs ----------
+  tabs.forEach((tab, i) => {
+    tab.addEventListener('click', () => {
+      userInteracted = true;
+      stopAutoPlay();
+      goTo(i);
+    });
+  });
+
+  // ---------- IntersectionObserver: reanudar al salir del viewport ----------
+  // "Salir completamente" = cuando la sección ya no intersecta en absoluto.
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) {
+          // Salió completamente del viewport
+          userInteracted = false;
+          startAutoPlay();
+        } else {
+          // Entró al viewport: si el usuario interactuó, mantenemos pausa;
+          // si no, arrancamos el auto-play.
+          if (!userInteracted) {
+            startAutoPlay();
+          }
+        }
+      });
+    },
+    { threshold: 0 } // se dispara cuando la visibilidad cambia de 0 a >0 o viceversa
+  );
+
+  observer.observe(section);
+
+  // ---------- Init ----------
+  goTo(0);
+  startAutoPlay();
+})();

js/main.js

@@ -398,6 +398,15 @@ function closeModal(modalId) {
     const el = document.getElementById('step-' + id);
     if (el) el.classList.add('active');
 
+    const backBtn = document.getElementById('global-quiz-back-btn');
+    if (backBtn) {
+      if (id == 1 || id === '1' || id === 'result') {
+        backBtn.style.display = 'none';
+      } else {
+        backBtn.style.display = 'block';
+      }
+    }
+
     updateProgress(id);
     updateIndicator(id);
   }
@@ -415,15 +424,7 @@ function closeModal(modalId) {
   }
 
   function updateIndicator(id) {
-    const label = document.getElementById('quiz-step-indicator');
+    // El indicador de pasos (Paso X de 4) fue removido del HTML a petición del usuario.
-    if (!label) return;
-
-    let text = '';
-    if (id === 'result') text = '¡Orientación lista!';
-    else if (['2a', '2b', '2c', '2d'].includes(String(id))) text = 'Paso 2 de 4';
-    else text = 'Paso ' + id + ' de 4';
-
-    label.textContent = text;
   }
 
   function renderResult(ans) {

soluciones-PatriPad.html

@@ -0,0 +1,519 @@
+<!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>Soluciones Concretas | IDE Consultores</title>
+  <meta name="description" content="Servicios específicos de consultoría: Certificación ISO 9001/14001/45001/21001, PMO, Capacitación In-Company e Inteligencia Artificial en Procesos.">
+  <meta property="og:title" content="Soluciones Concretas | IDE Consultores">
+  <meta property="og:description" content="Encontrá respuestas concretas a requerimientos específicos: ISO, gestión de proyectos, formación y tecnología.">
+  <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 Soluciones -->
+    <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_loop2.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(227, 235, 233, 0.25);
+        z-index: 1;
+      "></div>
+
+      <!-- Contenido -->
+      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
+        <span class="eyebrow" style="color: var(--text-main)">IDENTIFIQUEMOS SOLUCIONES</span>
+        <h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Soluciones Concretas: <br>Respuestas Específicas</h1>
+        <p class="lead-text" style="color:var(--text-main)">
+        Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización.        </p>
+      </div>
+    </section>
+
+    <!-- Barra de Filtros y Catálogo de Soluciones -->
+    <section class="section-padding">
+      <div class="container">
+        
+        <!-- Filtros Rápidos 
+        <div class="filters-bar" style="justify-content: center; margin-bottom: 3rem;">
+          <button class="filter-btn soluciones-filter-btn active" data-filter="all">Todas las Soluciones</button>
+          <button class="filter-btn soluciones-filter-btn" data-filter="iso">Sistemas de Gestión & ISO</button>
+          <button class="filter-btn soluciones-filter-btn" data-filter="pmo">PMO & Gestión de Proyectos</button>
+          <button class="filter-btn soluciones-filter-btn" data-filter="formacion">Formación & Desarrollo</button>
+          <button class="filter-btn soluciones-filter-btn" data-filter="digital">Transformación Digital & IA</button>
+        </div> -->
+
+        <!-- Grilla de Soluciones -->
+        <div class="grid-2" id="soluciones-grid">
+          
+          <!-- Solución 1 -->
+          <div class="card solution-card">
+            <div>
+              <h3>SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
+              <p><strong>Para convertir requisitos en herramientas de gestión.</strong></p>
+              <div class="solution-body">
+                <p>Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar burocracia innecesaria.</p>
+              </div>
+            </div>
+
+            <div>
+              <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i> <em>¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo <strong>IDE Academy</strong> complementa esta implementación.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-1">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>
+
+          <!-- Solución 2 -->
+          <div class="card solution-card">
+            <div>
+              <h3>DESARROLLO DE CAPACIDADES</h3>
+              <p><strong>Para transformar conocimiento en capacidad de acción.</strong></p>
+              <div class="solution-body">
+                <p>Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para desarrollar las capacidades que personas y equipos necesitan para gestionar, liderar y transformar.</p>
+              </div>
+            </div>
+
+            <div>
+              <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i> <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-2">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>
+
+          <!-- Solución 3 -->
+          <div class="card solution-card">
+            <div>
+              <h3>PROCESOS Y MEJORA ORGANIZACIONAL</h3>
+              <p><strong>Para transformar la forma en que la organización funciona.</strong></p>
+              <div class="solution-body">
+                <p>Analizamos procesos, información, roles e indicadores para identificar oportunidades de mejora, reducir ineficiencias y fortalecer la capacidad de gestión y toma de decisiones.</p>
+              </div>
+            </div>
+
+            <div>
+             <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i> <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-3">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>
+
+          <!-- Solución 4 -->
+          <div class="card solution-card">
+            <div>
+              <h3>PROYECTOS Y PMO</h3>
+              <p><strong>Para convertir iniciativas en resultados.</strong></p>
+              <div class="solution-body">
+                <p>Diseñamos y fortalecemos la gestión de proyectos, programas y portafolios para mejorar la priorización, coordinación, gobernanza y ejecución de iniciativas estratégicas.</p>
+              </div>
+            </div>
+
+            <div>
+              <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i> <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-4">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>
+
+          <!-- Solución 5 -->
+          <div class="card solution-card" data-category="formacion">
+            <div>
+              <h3>TRANSFORMACIÓN DIGITAL E INTELIGENCIA ARTIFICIAL</h3>
+              <p><strong>Para poner la tecnología al servicio de la gestión.</strong></p>
+              <div class="solution-body">
+                 <p> Identificamos dónde la digitalización, la automatización y la inteligencia artificial pueden simplificar procesos, mejorar decisiones y generar valor real para la organización.</p>
+              </div>
+            </div>
+
+            <div>
+              <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i> <em>Conocé los programas abiertos y temarios en nuestra página de <strong>IDE Academy</strong>.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-5">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>
+
+          <!-- Solución 6   -->
+          <div class="card solution-card" data-category="digital">
+            <div>
+              <h3>SOLUCIONES SECTORIALES</h3>
+              <p><strong>Para responder a desafíos que requieren conocimiento del contexto.</strong></p>
+              <div class="solution-body">
+                <p>Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.</p>
+              </div>
+            </div>
+            <div>
+              <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i><em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-6">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>
+          <!-- Solución 7  -->
+          <div class="card solution-card" data-category="digital">
+            <div>
+              <h3>EDUCACIÓN & GOBIERNO</h3>
+              <p><strong>Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.</strong></p>
+              <div class="solution-body">
+                <p>Integramos sistemas de gestión, procesos, proyectos, gestión del conocimiento, indicadores, desarrollo de capacidades y tecnología para fortalecer organizaciones educativas, organismos públicos e instituciones que brindan servicios de formación.</p>
+              </div>
+            </div>
+            <div>
+              <div class="solution-ligth">
+                <i class="fa-regular fa-lightbulb"></i><em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
+              </div>
+              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-7">
+                Explorar soluciones →
+              </a>
+            </div>
+          </div>        
+        </div>
+      </div>
+    </section>
+
+    <!-- Banner de Cierre -->
+    <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;">Una única solución no siempre encaja para todos los desafíos.</h2>
+        <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
+          Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
+        </p>
+        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">HABLEMOS →</a>
+      </div>
+    </section>
+    <!-- Modal Solución 1 -->
+    <div id="modal-solucion-1" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 9001 | Gestión de Calidad</h4>
+          <p style="font-size: 0.8rem;">Sistemas de gestión orientados a fortalecer procesos, satisfacción del cliente, desempeño y mejora continua.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 14001 | Gestión Ambiental</h4>
+          <p style="font-size: 0.8rem;">Gestión de aspectos e impactos ambientales integrada a los procesos y decisiones de la organización.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 45001 | Seguridad y Salud en el Trabajo</h4>
+          <p style="font-size: 0.8rem;">Gestión sistemática de riesgos de SST, prevención y mejora del desempeño.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 21001 | Organizaciones Educativas</h4>
+          <p style="font-size: 0.8rem;">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos y responder a las necesidades de estudiantes y otras partes interesadas.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 29993 | Servicios de Aprendizaje</h4>
+          <p style="font-size: 0.8rem;">Requisitos para fortalecer la calidad, diseño, prestación y evaluación de servicios de aprendizaje fuera de la educación formal.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Sistemas Integrados de Gestión</h4>
+          <p style="font-size: 0.8rem;">Integración de diferentes normas y referenciales bajo una arquitectura común para reducir duplicaciones y gestionar el conjunto.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Auditorías y preparación para la certificación</h4>
+          <p style="font-size: 0.8rem;">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar, mantener o ampliar sistemas y certificaciones.</p>
+        </div>
+
+
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Modal Solución 3 -->
+    <div id="modal-solucion-3" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">PROCESOS Y MEJORA ORGANIZACIONAL</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión por procesos</h4>
+          <p style="font-size: 0.8rem;">Identificación, diseño y mejora de procesos para comprender cómo fluye el trabajo y cómo cada proceso contribuye a los resultados.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Optimización y mejora continua</h4>
+          <p style="font-size: 0.8rem;">5S, Lean mangement, Análisis de oportunidades, desperdicios, retrabajos y puntos críticos para diseñar mejoras sostenibles.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Indicadores y tableros de gestión</h4>
+          <p style="font-size: 0.8rem;">Diseño de indicadores y sistemas de seguimiento que transforman datos en información útil para decidir.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de riesgos y oportunidades</h4>
+          <p style="font-size: 0.8rem;">Identificación, evaluación y tratamiento de riesgos y oportunidades vinculados con objetivos, procesos y decisiones.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diseño organizacional y roles</h4>
+          <p style="font-size: 0.8rem;">Clarificación de responsabilidades, autoridades e interfaces para mejorar coordinación y funcionamiento.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de información y conocimiento</h4>
+          <p style="font-size: 0.8rem;">Organización de información, documentación y conocimiento crítico para reducir dependencia de personas y facilitar continuidad y aprendizaje.</p>
+        </div>
+
+
+
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Modal Solución 5 -->
+    <div id="modal-solucion-5" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">TRANSFORMACIÓN DIGITAL E IA</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diagnóstico de oportunidades digitales</h4>
+          <p style="font-size: 0.8rem;">Identificación y priorización de procesos y necesidades donde la tecnología puede aportar mayor valor.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Digitalización y sistematización de procesos</h4>
+          <p style="font-size: 0.8rem;">Transformación de tareas y flujos de información para mejorar trazabilidad, disponibilidad y eficiencia.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Automatización de procesos</h4>
+          <p style="font-size: 0.8rem;">Identificación y automatización de tareas repetitivas o de bajo valor para liberar capacidad y reducir errores.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Inteligencia Artificial aplicada</h4>
+          <p style="font-size: 0.8rem;">Identificación y desarrollo de casos de uso de IA vinculados con necesidades concretas de gestión y operación.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Datos e información para la gestión</h4>
+          <p style="font-size: 0.8rem;">Estructuración, integración y visualización de información para fortalecer seguimiento y toma de decisiones.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Adopción y desarrollo de capacidades digitales</h4>
+          <p style="font-size: 0.8rem;">Acompañamiento a personas y equipos para incorporar nuevas herramientas y formas de trabajo.</p>
+        </div>
+        
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Modal Solución 4 -->
+    <div id="modal-solucion-4" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">PROYECTOS Y PMO</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de Proyectos</h4>
+          <p style="font-size: 0.8rem;">Diseño y acompañamiento de proyectos desde la definición de objetivos y alcance hasta su ejecución, seguimiento y cierre.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diseño e implementación de PMO</h4>
+          <p style="font-size: 0.8rem;">Creación o fortalecimiento de oficinas de gestión de proyectos adaptadas al nivel de madurez y necesidades de cada organización.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diagnóstico de madurez en gestión de proyectos</h4>
+          <p style="font-size: 0.8rem;">Evaluación de prácticas, capacidades y gobernanza para identificar brechas y definir una hoja de ruta de mejora.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de portafolios y priorización</h4>
+          <p style="font-size: 0.8rem;">Criterios y herramientas para seleccionar, priorizar y monitorear iniciativas según estrategia, recursos y valor esperado.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Recuperación de proyectos</h4>
+          <p style="font-size: 0.8rem;">Análisis de proyectos con desvíos para redefinir prioridades, gobernanza, planificación y mecanismos de seguimiento.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Metodologías y herramientas de gestión</h4>
+          <p style="font-size: 0.8rem;">Diseño de marcos de trabajo predictivos, ágiles o híbridos adaptados al contexto de cada organización.</p>
+        </div>
+       
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Modal Solución 2 -->
+    <div id="modal-solucion-2" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">DESARROLLO DE CAPACIDADES</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Formación In-Company</h4>
+          <p style="font-size: 0.8rem;">Programas diseñados a partir de las necesidades, desafíos y realidad de cada organización.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Formación Ejecutiva</h4>
+          <p style="font-size: 0.8rem;">Programas para profesionales, mandos medios y líderes orientados al desarrollo de capacidades de gestión y toma de decisiones.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de Proyectos</h4>
+          <p style="font-size: 0.8rem;">Formación aplicada en planificación, ejecución, seguimiento, liderazgo y metodologías de proyectos.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión, Calidad y Mejora Continua</h4>
+          <p style="font-size: 0.8rem;">Desarrollo de competencias para gestionar procesos, sistemas, indicadores, riesgos y mejora.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Liderazgo y Powerful Skills</h4>
+          <p style="font-size: 0.8rem;">Comunicación, liderazgo, trabajo colaborativo, negociación, toma de decisiones y otras capacidades profesionales transversales.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Transformación Digital e IA</h4>
+          <p style="font-size: 0.8rem;">Formación para comprender, adoptar y aplicar tecnologías e inteligencia artificial con criterio y orientación a resultados.</p>
+        </div>
+       
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Modal Solución 6 -->
+    <div id="modal-solucion-6" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">SOLUCIONES SECTORIALES</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Agro & Alimentos</h4>
+          <p style="font-size: 0.8rem;">Trazabilidad, inocuidad, buenas prácticas, sistemas de gestión, procesos y sostenibilidad para fortalecer organizaciones de la cadena agroalimentaria.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Minería & Cadena de Valor</h4>
+          <p style="font-size: 0.8rem;">Gestión, procesos, calidad, seguridad, proyectos y desarrollo de proveedores para organizaciones que operan o prestan servicios dentro del ecosistema minero.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Movilidad, Transporte & Logística</h4>
+          <p style="font-size: 0.8rem;">Gestión de procesos, seguridad vial, buenas prácticas, flotas e integración de requisitos para organizaciones vinculadas con movilidad, transporte y logística.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Metalmecánica & Industria</h4>
+          <p style="font-size: 0.8rem;">Procesos, calidad, seguridad, proyectos y mejora continua para fortalecer productividad, confiabilidad y capacidad de respuesta.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Salud</h4>
+          <p style="font-size: 0.8rem;">Gestión por procesos críticos, experiencia del paciente, calidad, seguridad y cumplimiento para fortalecer organizaciones de salud.</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Educación & Gobierno</h4>
+          <p style="font-size: 0.8rem;">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados a organizaciones educativas y del sector público.</p>
+        </div>
+        
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Modal Solución 7 -->
+    <div id="modal-solucion-7" class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal-window-sol">
+        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
+        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">EDUCACIÓN & GOBIERNO</h3>
+
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Sistemas de gestión y calidad</h4>
+          <p style="font-size: 0.8rem;">Implementación, integración y mejora de sistemas de gestión orientados a fortalecer procesos, resultados y servicios.
+ISO 21001 · ISO 29993 · ISO 9001 · Sistemas Integrados · Auditorías internas · Preparación para certificación</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión del conocimiento</h4>
+          <p style="font-size: 0.8rem;">Identificación, sistematización, transferencia y preservación del conocimiento crítico para reducir dependencias, favorecer el aprendizaje organizacional y fortalecer la continuidad.
+ISO 30401 · Gestión del conocimiento · Buenas prácticas · Lecciones aprendidas · Repositorios y transferencia de conocimiento
+</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Procesos e indicadores</h4>
+          <p style="font-size: 0.8rem;">Diseño y mejora de procesos académicos, administrativos y de servicios, acompañados por indicadores que permitan transformar información en decisiones.
+Gestión por procesos · Indicadores · Tableros de gestión · Riesgos y oportunidades · Mejora continua
+</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Proyectos y transformación</h4>
+          <p style="font-size: 0.8rem;">Diseño, planificación y gestión de iniciativas de mejora y transformación para convertir objetivos institucionales en resultados.
+Gestión de proyectos · PMO · Portafolios · Gobernanza · Seguimiento de iniciativas</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Desarrollo de capacidades</h4>
+          <p style="font-size: 0.8rem;">Formación y desarrollo de personas y equipos para fortalecer capacidades de gestión, liderazgo, calidad, proyectos y transformación.
+Formación ejecutiva · In-Company · Liderazgo · Gestión · Powerful Skills · Programas a medida
+</p>
+        </div>
+        <div style="margin-bottom: 0.9rem;">
+          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Transformación digital e IA</h4>
+          <p style="font-size: 0.8rem;">Digitalización, automatización y aplicación de inteligencia artificial para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.
+Digitalización · Automatización · IA aplicada · Sistematización de procesos · Datos para la gestión</p>
+        
+        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
+          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
+          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
+            Hablemos de este desafío
+          </a>
+        </div>
+      </div>
+    </div>
+
+  </main>
+
+  <footer id="site-footer"></footer>
+  <script src="js/main.js"></script>
+</body>
+</html>

soluciones.html

@@ -18,498 +18,143 @@
   <main>
 
     <!-- Header Soluciones -->
-    <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;">
+    <section class="section-padding" style="background-color: var(--bg-subtle); border-bottom: 1px solid var(--border-color);">
-      
+      <div class="container container-narrow text-center">
-      <!-- Video de fondo -->
+        <span class="eyebrow">IDENTIFIQUEMOS SOLUCIONES</span>
-      <video autoplay muted loop playsinline style="
+        <h1 style="margin-bottom: 1.25rem; font-size: 3rem;">Soluciones Concretas</h1>
-        position: absolute;
+        <p class="lead-text" style="margin: 0 auto; max-width: 700px;">
-        top: 0;
+          Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización.
-        left: 0;
+        </p>
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0.15;
-        z-index: 0;
-        pointer-events: none;
-      ">
-        <source src="./assets/video/header_ide_loop2.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(227, 235, 233, 0.25);
-        z-index: 1;
-      "></div>
-
-      <!-- Contenido -->
-      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
-        <span class="eyebrow" style="color: var(--text-main)">IDENTIFIQUEMOS SOLUCIONES</span>
-        <h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Soluciones Concretas: <br>Respuestas Específicas</h1>
-        <p class="lead-text" style="color:var(--text-main)">
-        Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización.        </p>
       </div>
     </section>
 
     <!-- Barra de Filtros y Catálogo de Soluciones -->
     <section class="section-padding">
-      <div class="container">
+      <div class="containe        <!-- Grilla de Soluciones -->
-        
+        <div class="grid-2" style="gap: 2rem;">
-        <!-- Filtros Rápidos 
-        <div class="filters-bar" style="justify-content: center; margin-bottom: 3rem;">
-          <button class="filter-btn soluciones-filter-btn active" data-filter="all">Todas las Soluciones</button>
-          <button class="filter-btn soluciones-filter-btn" data-filter="iso">Sistemas de Gestión & ISO</button>
-          <button class="filter-btn soluciones-filter-btn" data-filter="pmo">PMO & Gestión de Proyectos</button>
-          <button class="filter-btn soluciones-filter-btn" data-filter="formacion">Formación & Desarrollo</button>
-          <button class="filter-btn soluciones-filter-btn" data-filter="digital">Transformación Digital & IA</button>
-        </div> -->
-
-        <!-- Grilla de Soluciones -->
-        <div class="grid-2" id="soluciones-grid">
           
           <!-- Solución 1 -->
-          <div class="card solution-card">
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
+              <h3 style="margin-bottom: 0.5rem;">SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
-              <p><strong>Para convertir requisitos en herramientas de gestión.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para convertir requisitos en herramientas de gestión.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar burocracia innecesaria.</p>
-                <p>Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar burocracia innecesaria.</p>
-              </div>
-            </div>
-
-            <div>
-              <div class="solution-ligth">
-                <i class="fa-regular fa-lightbulb"></i> <em>¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo <strong>IDE Academy</strong> complementa esta implementación.</em>
-              </div>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-1">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
 
           <!-- Solución 2 -->
-          <div class="card solution-card">
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>DESARROLLO DE CAPACIDADES</h3>
+              <h3 style="margin-bottom: 0.5rem;">DESARROLLO DE CAPACIDADES</h3>
-              <p><strong>Para transformar conocimiento en capacidad de acción.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para transformar conocimiento en capacidad de acción.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para desarrollar las capacidades que personas y equipos necesitan para gestionar, liderar y transformar.</p>
-                <p>Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para desarrollar las capacidades que personas y equipos necesitan para gestionar, liderar y transformar.</p>
-              </div>
-            </div>
-
-            <div>
-              <div class="solution-ligth">
-                <i class="fa-regular fa-lightbulb"></i> <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
-              </div>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-2">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
 
           <!-- Solución 3 -->
-          <div class="card solution-card">
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>PROCESOS Y MEJORA ORGANIZACIONAL</h3>
+              <h3 style="margin-bottom: 0.5rem;">PROCESOS Y MEJORA ORGANIZACIONAL</h3>
-              <p><strong>Para transformar la forma en que la organización funciona.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para transformar la forma en que la organización funciona.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Analizamos procesos, información, roles e indicadores para identificar oportunidades de mejora, reducir ineficiencias y fortalecer la capacidad de gestión y toma de decisiones.</p>
-                <p>Analizamos procesos, información, roles e indicadores para identificar oportunidades de mejora, reducir ineficiencias y fortalecer la capacidad de gestión y toma de decisiones.</p>
-              </div>
-            </div>
-
-            <div>
-             <div class="solution-ligth">
-                <i class="fa-regular fa-lightbulb"></i> <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
-              </div>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-3">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
 
           <!-- Solución 4 -->
-          <div class="card solution-card">
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>PROYECTOS Y PMO</h3>
+              <h3 style="margin-bottom: 0.5rem;">PROYECTOS Y PMO</h3>
-              <p><strong>Para convertir iniciativas en resultados.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para convertir iniciativas en resultados.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Diseñamos y fortalecemos la gestión de proyectos, programas y portafolios para mejorar la priorización, coordinación, gobernanza y ejecución de iniciativas estratégicas.</p>
-                <p>Diseñamos y fortalecemos la gestión de proyectos, programas y portafolios para mejorar la priorización, coordinación, gobernanza y ejecución de iniciativas estratégicas.</p>
-              </div>
-            </div>
-
-            <div>
-              <div class="solution-ligth">
-                <i class="fa-regular fa-lightbulb"></i> <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
-              </div>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-4">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
 
           <!-- Solución 5 -->
-          <div class="card solution-card" data-category="formacion">
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>TRANSFORMACIÓN DIGITAL E INTELIGENCIA ARTIFICIAL</h3>
+              <h3 style="margin-bottom: 0.5rem;">TRANSFORMACIÓN DIGITAL E IA</h3>
-              <p><strong>Para poner la tecnología al servicio de la gestión.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para poner la tecnología al servicio de la gestión.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Identificamos dónde la digitalización, la automatización y la inteligencia artificial pueden simplificar procesos, mejorar decisiones y generar valor real para la organización.</p>
-                 <p> Identificamos dónde la digitalización, la automatización y la inteligencia artificial pueden simplificar procesos, mejorar decisiones y generar valor real para la organización.</p>
-              </div>
-            </div>
-
-            <div>
-              <div class="solution-ligth">
-                <i class="fa-regular fa-lightbulb"></i> <em>Conocé los programas abiertos y temarios en nuestra página de <strong>IDE Academy</strong>.</em>
-              </div>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-5">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
 
-          <!-- Solución 6   -->
+          <!-- Solución 6 -->
-          <div class="card solution-card" data-category="digital">
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>SOLUCIONES SECTORIALES</h3>
+              <h3 style="margin-bottom: 0.5rem;">ESTRATEGIA E INNOVACIÓN</h3>
-              <p><strong>Para responder a desafíos que requieren conocimiento del contexto.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para anticipar y liderar el cambio.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Acompañamos a la dirección en el diseño y despliegue de la estrategia, integrando innovación en modelos de negocio y desarrollo organizacional continuo.</p>
-                <p>Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.</p>
-              </div>
-            </div>
-            <div>
-              <div class="solution-ligth">
-                <i class="fa-regular fa-lightbulb"></i><em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
-              </div>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-6">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
-          <!-- Solución 7  -->
+
-          <div class="card solution-card" data-category="digital">
+          <!-- Solución 7 -->
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <h3>EDUCACIÓN & GOBIERNO</h3>
+              <h3 style="margin-bottom: 0.5rem;">SOLUCIONES SECTORIALES</h3>
-              <p><strong>Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.</strong></p>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para responder a desafíos que requieren conocimiento del contexto.</p>
-              <div class="solution-body">
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.</p>
-                <p>Integramos sistemas de gestión, procesos, proyectos, gestión del conocimiento, indicadores, desarrollo de capacidades y tecnología para fortalecer organizaciones educativas, organismos públicos e instituciones que brindan servicios de formación.</p>
-              </div>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
+          </div>
+
+          <!-- Solución 8 -->
+          <div class="card solution-card" style="display: flex; flex-direction: column; justify-content: space-between;">
             <div>
-              <div class="solution-ligth">
+              <h3 style="margin-bottom: 0.5rem;">EDUCACIÓN & GOBIERNO</h3>
-                <i class="fa-regular fa-lightbulb"></i><em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
+              <p style="color: var(--ide-primary); font-weight: 600; margin-bottom: 1rem;">Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.</p>
-              </div>
+              <p style="color: var(--text-body); margin-bottom: 1.5rem;">Integramos sistemas de gestión, procesos, proyectos, gestión del conocimiento, indicadores, desarrollo de capacidades y tecnología para fortalecer organizaciones educativas y públicas.</p>
-              <a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-7">
-                Explorar soluciones →
-              </a>
             </div>
+            <a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="align-self: flex-start; text-transform: uppercase;">
+              HABLEMOS
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Banner de Cierre -->
-    <section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
+    <section class="section-padding" style="background-color: var(--bg-surface); border-top: 1px solid var(--border-color);">
-      <div class="container container-narrow text-center">
+      <div class="container text-center">
-        <h2 style="color: var(--text-inverse); margin-bottom: 1rem;">Una única solución no siempre encaja para todos los desafíos.</h2>
+        <div class="cta-module" style="background: var(--bg-primary); border-radius: var(--radius-md); padding: 4rem; text-align: center; box-shadow: var(--shadow-sm);">
-        <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
+          <h2 style="font-size: 2.2rem; color: #fff; margin-bottom: 2rem;">Una única solución no siempre encaja para todos los desafíos.</h2>
-          Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
+          <p class="lead-text-cta" style="margin-bottom: 2rem; margin-left: auto; margin-right: auto;">
-        </p>
+            Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
-        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">HABLEMOS →</a>
+          </p>
+          <a href="contacto.html" class="btn btn-primary-cta btn-cta-unificado" style="border-radius: 50px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; font-size: 1.1rem; border: 1px solid rgba(255,255,255,0.2);">
+            HABLEMOS
+            <svg width="20" height="20" 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>
     </section>
-    <!-- Modal Solución 1 -->
-    <div id="modal-solucion-1" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 9001 | Gestión de Calidad</h4>
-          <p style="font-size: 0.8rem;">Sistemas de gestión orientados a fortalecer procesos, satisfacción del cliente, desempeño y mejora continua.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 14001 | Gestión Ambiental</h4>
-          <p style="font-size: 0.8rem;">Gestión de aspectos e impactos ambientales integrada a los procesos y decisiones de la organización.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 45001 | Seguridad y Salud en el Trabajo</h4>
-          <p style="font-size: 0.8rem;">Gestión sistemática de riesgos de SST, prevención y mejora del desempeño.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 21001 | Organizaciones Educativas</h4>
-          <p style="font-size: 0.8rem;">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos y responder a las necesidades de estudiantes y otras partes interesadas.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 29993 | Servicios de Aprendizaje</h4>
-          <p style="font-size: 0.8rem;">Requisitos para fortalecer la calidad, diseño, prestación y evaluación de servicios de aprendizaje fuera de la educación formal.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Sistemas Integrados de Gestión</h4>
-          <p style="font-size: 0.8rem;">Integración de diferentes normas y referenciales bajo una arquitectura común para reducir duplicaciones y gestionar el conjunto.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Auditorías y preparación para la certificación</h4>
-          <p style="font-size: 0.8rem;">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar, mantener o ampliar sistemas y certificaciones.</p>
-        </div>
-
-
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- Modal Solución 3 -->
-    <div id="modal-solucion-3" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">PROCESOS Y MEJORA ORGANIZACIONAL</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión por procesos</h4>
-          <p style="font-size: 0.8rem;">Identificación, diseño y mejora de procesos para comprender cómo fluye el trabajo y cómo cada proceso contribuye a los resultados.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Optimización y mejora continua</h4>
-          <p style="font-size: 0.8rem;">5S, Lean mangement, Análisis de oportunidades, desperdicios, retrabajos y puntos críticos para diseñar mejoras sostenibles.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Indicadores y tableros de gestión</h4>
-          <p style="font-size: 0.8rem;">Diseño de indicadores y sistemas de seguimiento que transforman datos en información útil para decidir.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de riesgos y oportunidades</h4>
-          <p style="font-size: 0.8rem;">Identificación, evaluación y tratamiento de riesgos y oportunidades vinculados con objetivos, procesos y decisiones.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diseño organizacional y roles</h4>
-          <p style="font-size: 0.8rem;">Clarificación de responsabilidades, autoridades e interfaces para mejorar coordinación y funcionamiento.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de información y conocimiento</h4>
-          <p style="font-size: 0.8rem;">Organización de información, documentación y conocimiento crítico para reducir dependencia de personas y facilitar continuidad y aprendizaje.</p>
-        </div>
-
-
-
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- Modal Solución 5 -->
-    <div id="modal-solucion-5" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">TRANSFORMACIÓN DIGITAL E IA</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diagnóstico de oportunidades digitales</h4>
-          <p style="font-size: 0.8rem;">Identificación y priorización de procesos y necesidades donde la tecnología puede aportar mayor valor.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Digitalización y sistematización de procesos</h4>
-          <p style="font-size: 0.8rem;">Transformación de tareas y flujos de información para mejorar trazabilidad, disponibilidad y eficiencia.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Automatización de procesos</h4>
-          <p style="font-size: 0.8rem;">Identificación y automatización de tareas repetitivas o de bajo valor para liberar capacidad y reducir errores.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Inteligencia Artificial aplicada</h4>
-          <p style="font-size: 0.8rem;">Identificación y desarrollo de casos de uso de IA vinculados con necesidades concretas de gestión y operación.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Datos e información para la gestión</h4>
-          <p style="font-size: 0.8rem;">Estructuración, integración y visualización de información para fortalecer seguimiento y toma de decisiones.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Adopción y desarrollo de capacidades digitales</h4>
-          <p style="font-size: 0.8rem;">Acompañamiento a personas y equipos para incorporar nuevas herramientas y formas de trabajo.</p>
-        </div>
-        
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- Modal Solución 4 -->
-    <div id="modal-solucion-4" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">PROYECTOS Y PMO</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de Proyectos</h4>
-          <p style="font-size: 0.8rem;">Diseño y acompañamiento de proyectos desde la definición de objetivos y alcance hasta su ejecución, seguimiento y cierre.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diseño e implementación de PMO</h4>
-          <p style="font-size: 0.8rem;">Creación o fortalecimiento de oficinas de gestión de proyectos adaptadas al nivel de madurez y necesidades de cada organización.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diagnóstico de madurez en gestión de proyectos</h4>
-          <p style="font-size: 0.8rem;">Evaluación de prácticas, capacidades y gobernanza para identificar brechas y definir una hoja de ruta de mejora.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de portafolios y priorización</h4>
-          <p style="font-size: 0.8rem;">Criterios y herramientas para seleccionar, priorizar y monitorear iniciativas según estrategia, recursos y valor esperado.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Recuperación de proyectos</h4>
-          <p style="font-size: 0.8rem;">Análisis de proyectos con desvíos para redefinir prioridades, gobernanza, planificación y mecanismos de seguimiento.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Metodologías y herramientas de gestión</h4>
-          <p style="font-size: 0.8rem;">Diseño de marcos de trabajo predictivos, ágiles o híbridos adaptados al contexto de cada organización.</p>
-        </div>
-       
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- Modal Solución 2 -->
-    <div id="modal-solucion-2" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">DESARROLLO DE CAPACIDADES</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Formación In-Company</h4>
-          <p style="font-size: 0.8rem;">Programas diseñados a partir de las necesidades, desafíos y realidad de cada organización.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Formación Ejecutiva</h4>
-          <p style="font-size: 0.8rem;">Programas para profesionales, mandos medios y líderes orientados al desarrollo de capacidades de gestión y toma de decisiones.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de Proyectos</h4>
-          <p style="font-size: 0.8rem;">Formación aplicada en planificación, ejecución, seguimiento, liderazgo y metodologías de proyectos.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión, Calidad y Mejora Continua</h4>
-          <p style="font-size: 0.8rem;">Desarrollo de competencias para gestionar procesos, sistemas, indicadores, riesgos y mejora.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Liderazgo y Powerful Skills</h4>
-          <p style="font-size: 0.8rem;">Comunicación, liderazgo, trabajo colaborativo, negociación, toma de decisiones y otras capacidades profesionales transversales.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Transformación Digital e IA</h4>
-          <p style="font-size: 0.8rem;">Formación para comprender, adoptar y aplicar tecnologías e inteligencia artificial con criterio y orientación a resultados.</p>
-        </div>
-       
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- Modal Solución 6 -->
-    <div id="modal-solucion-6" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">SOLUCIONES SECTORIALES</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Agro & Alimentos</h4>
-          <p style="font-size: 0.8rem;">Trazabilidad, inocuidad, buenas prácticas, sistemas de gestión, procesos y sostenibilidad para fortalecer organizaciones de la cadena agroalimentaria.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Minería & Cadena de Valor</h4>
-          <p style="font-size: 0.8rem;">Gestión, procesos, calidad, seguridad, proyectos y desarrollo de proveedores para organizaciones que operan o prestan servicios dentro del ecosistema minero.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Movilidad, Transporte & Logística</h4>
-          <p style="font-size: 0.8rem;">Gestión de procesos, seguridad vial, buenas prácticas, flotas e integración de requisitos para organizaciones vinculadas con movilidad, transporte y logística.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Metalmecánica & Industria</h4>
-          <p style="font-size: 0.8rem;">Procesos, calidad, seguridad, proyectos y mejora continua para fortalecer productividad, confiabilidad y capacidad de respuesta.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Salud</h4>
-          <p style="font-size: 0.8rem;">Gestión por procesos críticos, experiencia del paciente, calidad, seguridad y cumplimiento para fortalecer organizaciones de salud.</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Educación & Gobierno</h4>
-          <p style="font-size: 0.8rem;">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados a organizaciones educativas y del sector público.</p>
-        </div>
-        
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- Modal Solución 7 -->
-    <div id="modal-solucion-7" class="modal-backdrop" role="dialog" aria-modal="true">
-      <div class="modal-window-sol">
-        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
-        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">EDUCACIÓN & GOBIERNO</h3>
-
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Sistemas de gestión y calidad</h4>
-          <p style="font-size: 0.8rem;">Implementación, integración y mejora de sistemas de gestión orientados a fortalecer procesos, resultados y servicios.
-ISO 21001 · ISO 29993 · ISO 9001 · Sistemas Integrados · Auditorías internas · Preparación para certificación</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión del conocimiento</h4>
-          <p style="font-size: 0.8rem;">Identificación, sistematización, transferencia y preservación del conocimiento crítico para reducir dependencias, favorecer el aprendizaje organizacional y fortalecer la continuidad.
-ISO 30401 · Gestión del conocimiento · Buenas prácticas · Lecciones aprendidas · Repositorios y transferencia de conocimiento
-</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Procesos e indicadores</h4>
-          <p style="font-size: 0.8rem;">Diseño y mejora de procesos académicos, administrativos y de servicios, acompañados por indicadores que permitan transformar información en decisiones.
-Gestión por procesos · Indicadores · Tableros de gestión · Riesgos y oportunidades · Mejora continua
-</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Proyectos y transformación</h4>
-          <p style="font-size: 0.8rem;">Diseño, planificación y gestión de iniciativas de mejora y transformación para convertir objetivos institucionales en resultados.
-Gestión de proyectos · PMO · Portafolios · Gobernanza · Seguimiento de iniciativas</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Desarrollo de capacidades</h4>
-          <p style="font-size: 0.8rem;">Formación y desarrollo de personas y equipos para fortalecer capacidades de gestión, liderazgo, calidad, proyectos y transformación.
-Formación ejecutiva · In-Company · Liderazgo · Gestión · Powerful Skills · Programas a medida
-</p>
-        </div>
-        <div style="margin-bottom: 0.9rem;">
-          <h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Transformación digital e IA</h4>
-          <p style="font-size: 0.8rem;">Digitalización, automatización y aplicación de inteligencia artificial para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.
-Digitalización · Automatización · IA aplicada · Sistematización de procesos · Datos para la gestión</p>
-        
-        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
-          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
-          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
-            Hablemos de este desafío
-          </a>
-        </div>
-      </div>
-    </div>
 
   </main>