rf-v4.11-ecosistema listo

css/ecosistema.css

@@ -1,92 +1,86 @@
-.animacion-infinito {
-            width: 80%;
-            min-width: 600px;
-            max-width: 1000px;
-            aspect-ratio: 2 / 1;
-            position: relative;
-            background-color: transparent;
-        }
-
-        .capa-svg-lineas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            /* Fuerza al navegador a usar la Tarjeta Gráfica (GPU) */
-            transform: translateZ(0); 
-        }
-
-        .capa-html-nodos {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 10; 
-            pointer-events: none;
-        }
-
-        .nodo-circulo {
-            position: absolute;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), inset 0 -4px 10px rgba(0,0,0,0.1);
-            transform: translate(-50%, -50%);
-            pointer-events: auto;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            overflow: hidden;
-            background-color: #fff; /* Fondo por si usas logos PNG transparentes */
-        }
-
-        .nodo-circulo:hover {
-            transform: translate(-50%, -55%) scale(1.05); 
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-        }
-
-        /* Estilos para insertar logos como pediste */
-        .nodo-contenido {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .nodo-contenido img {
-            width: 70%; /* Ajusta el tamaño de tu logo aquí */
-            height: 70%;
-            object-fit: contain;
-        }
-
-        /* Estilos de las líneas base SVG */
-        .linea-base {
-            fill: none;
-            stroke-width: 1.5;
-            opacity: 0.5; 
-        }
-
-        /* Estilo de los Pulsos */
-        .linea-pulso {
-            fill: none;
-            stroke: #ffffff; 
-            stroke-width: 6; 
-            stroke-linecap: round; 
-            stroke-dasharray: 0 2000; 
-            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
-            opacity: 1;
-            /* Le avisa al navegador que esto es lo único que se va a animar */
-            will-change: stroke-dashoffset; 
-        }
-
 /* ==========================================================================
    ECOSISTEMA IDE — Sección con 4 tarjetas y paneles expandibles in-place
+   Con imagen de fondo + overlay + aside glass + texto al 40%
    ========================================================================== */
 
+.animacion-infinito {
+  width: 80%;
+  min-width: 600px;
+  max-width: 1000px;
+  aspect-ratio: 2 / 1;
+  position: relative;
+  background-color: transparent;
+}
+
+.capa-svg-lineas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  transform: translateZ(0);
+}
+
+.capa-html-nodos {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.nodo-circulo {
+  position: absolute;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), inset 0 -4px 10px rgba(0,0,0,0.1);
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.nodo-circulo:hover {
+  transform: translate(-50%, -55%) scale(1.05);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+.nodo-contenido {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nodo-contenido img {
+  width: 70%;
+  height: 70%;
+  object-fit: contain;
+}
+
+.linea-base {
+  fill: none;
+  stroke-width: 1.5;
+  opacity: 0.5;
+}
+
+.linea-pulso {
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-dasharray: 0 2000;
+  opacity: 1;
+}
+
 /* ---------- Variables locales por unidad ---------- */
 .ecosistema-section {
   --unit: var(--ide-primary);
@@ -96,19 +90,35 @@
 
 .eco-panel--excellence,
 .eco-card--excellence,
-.eco-pill--excellence { --unit: var(--ide-excellence); --unit-dark: var(--ide-excellence-dark); --unit-soft: rgba(0, 158, 143, 0.10); }
+.eco-pill--excellence {
+  --unit: var(--ide-excellence);
+  --unit-dark: var(--ide-excellence-dark);
+  --unit-soft: rgba(0, 158, 143, 0.10);
+}
 
 .eco-panel--projects,
 .eco-card--projects,
-.eco-pill--projects   { --unit: var(--ide-projects);   --unit-dark: var(--ide-projects-dark);   --unit-soft: rgba(242, 140, 43, 0.10); }
+.eco-pill--projects {
+  --unit: var(--ide-projects);
+  --unit-dark: var(--ide-projects-dark);
+  --unit-soft: rgba(242, 140, 43, 0.10);
+}
 
 .eco-panel--digital,
 .eco-card--digital,
-.eco-pill--digital    { --unit: var(--ide-digital);    --unit-dark: var(--ide-digital-dark);    --unit-soft: rgba(29, 113, 184, 0.10); }
+.eco-pill--digital {
+  --unit: var(--ide-digital);
+  --unit-dark: var(--ide-digital-dark);
+  --unit-soft: rgba(29, 113, 184, 0.10);
+}
 
 .eco-panel--academy,
 .eco-card--academy,
-.eco-pill--academy    { --unit: var(--ide-academy);    --unit-dark: var(--ide-academy-dark);    --unit-soft: rgba(200, 16, 46, 0.10); }
+.eco-pill--academy {
+  --unit: var(--ide-academy);
+  --unit-dark: var(--ide-academy-dark);
+  --unit-soft: rgba(200, 16, 46, 0.10);
+}
 
 /* ---------- Header del ecosistema ---------- */
 .eco-header {
@@ -125,7 +135,7 @@
 /* ---------- Grid de 4 tarjetas ---------- */
 .eco-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1.5rem;
 }
 
@@ -133,6 +143,7 @@
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
+  min-width: 0;
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
@@ -146,16 +157,20 @@
 
 .eco-card__btn {
   all: unset;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: .85rem;
   padding: 2rem 1.6rem 1.75rem;
   width: 100%;
+  min-width: 0;
   height: 100%;
   cursor: pointer;
   position: relative;
   z-index: 1;
+  font: inherit;
+  color: inherit;
 }
 
 .eco-card__btn:focus-visible {
@@ -164,7 +179,6 @@
   border-radius: var(--radius-lg);
 }
 
-/* Ícono circular */
 .eco-card__icon-wrap {
   width: 64px;
   height: 64px;
@@ -199,6 +213,8 @@
   line-height: 1.2;
   color: var(--text-main);
   margin: 0;
+  hyphens: auto;
+  min-width: 0;
 }
 
 .eco-card__text {
@@ -206,6 +222,8 @@
   color: var(--text-muted);
   line-height: 1.55;
   margin: 0 0 auto;
+  overflow-wrap: break-word;
+  min-width: 0;
 }
 
 .eco-card__cta {
@@ -224,7 +242,6 @@
 .eco-card__cta i { transition: transform .3s ease; }
 .eco-card:hover .eco-card__cta i { transform: translateX(5px); }
 
-/* Curva decorativa inferior por tarjeta */
 .eco-card::after {
   content: "";
   position: absolute;
@@ -318,25 +335,79 @@
   color: #fff;
 }
 
-/* ---------- Panel de unidad ---------- */
+/* ==========================================================================
+   PANEL DE UNIDAD — Imagen + overlay + glass aside + texto 40%
+   ========================================================================== */
+
 .eco-panel {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
-  padding: clamp(2rem, 4vw, 3rem);
   isolation: isolate;
+  /* Sin padding general: el grid interno y la strip manejan sus espacios */
 }
 
-/* Fondo con curvas SVG teñidas por el color de la unidad */
+/* ---------- Capa 0: imagen de fondo ---------- */
-.eco-panel__bg {
+.eco-panel__media {
   position: absolute;
   inset: 0;
   z-index: 0;
+  margin: 0;
+  overflow: hidden;
   pointer-events: none;
-  color: var(--unit);
+}
-  opacity: .12;
+
+.eco-panel__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center right;
+  display: block;
+  filter: saturate(.85) contrast(1.02);
+  transform: scale(1.01);
+}
+
+/* ---------- Capa 1: overlay con gradiente horizontal ---------- */
+.eco-panel__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  /* Color de unidad a la izquierda → transparente a la derecha */
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--unit) 92%, black 8%) 0%,
+      color-mix(in srgb, var(--unit) 78%, black 22%) 28%,
+      color-mix(in srgb, var(--unit) 40%, transparent) 55%,
+      transparent 80%
+    );
+}
+
+/* Velo inferior para fundir con la strip */
+.eco-panel__overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    transparent 72%,
+    color-mix(in srgb, var(--bg-surface) 60%, transparent) 100%
+  );
+}
+
+/* ---------- Capa 2: curvas SVG fundidas con el gradiente ---------- */
+.eco-panel__bg {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  color: #ffffff;
+  opacity: .16;
+  mix-blend-mode: overlay;
 }
 
 .eco-panel__bg svg {
@@ -354,15 +425,25 @@
 .eco-panel__bg path:nth-child(1) { opacity: .9; }
 .eco-panel__bg path:nth-child(2) { opacity: .5; }
 
-/* Grid principal del panel */
+/* ---------- Capa 3: contenido (texto 40% | aside glass al borde derecho) ---------- */
 .eco-panel__grid {
   position: relative;
-  z-index: 1;
+  z-index: 3;
   display: grid;
-  grid-template-columns: 1.1fr 1fr;
+  grid-template-columns: minmax(0, 40%) 1fr;
-  gap: 2.5rem;
+  gap: 2rem;
-  align-items: start;
+  align-items: stretch;
-  margin-bottom: 2.5rem;
+  padding: clamp(2rem, 3.5vw, 3rem);
+  min-height: 440px;
+}
+
+/* Columna principal: texto limitado al 40% */
+.eco-panel__main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: .9rem;
+  color: #ffffff;
 }
 
 .eco-panel__brand {
@@ -370,41 +451,60 @@
   font-family: 'Bebas Neue', sans-serif;
   letter-spacing: .32em;
   font-size: 1rem;
-  color: var(--unit);
+  color: #ffffff;
-  margin-bottom: .75rem;
+  opacity: .92;
+  margin-bottom: .25rem;
 }
 
 .eco-panel__title {
   font-family: 'Barlow Semi Condensed', sans-serif;
   font-size: clamp(1.8rem, 3vw, 2.4rem);
   line-height: 1.15;
-  color: var(--text-main);
+  color: #ffffff;
-  margin-bottom: 1rem;
+  margin: 0;
 }
 
 .eco-panel__lead {
-  font-size: 1.02rem;
+  font-size: 1rem;
-  color: var(--text-body);
+  line-height: 1.6;
-  line-height: 1.65;
+  color: rgba(255, 255, 255, 0.9);
-  margin-bottom: 1.5rem;
+  margin: 0;
-  max-width: 52ch;
 }
 
+/* CTA invertido para máximo contraste sobre el color de la unidad */
 .eco-panel__cta {
-  background-color: var(--unit);
+  align-self: flex-start;
-  border-color: var(--unit);
+  background-color: #ffffff;
-}
+  border-color: #ffffff;
-.eco-panel__cta:hover {
+  color: var(--unit-dark);
-  background-color: var(--unit-dark);
+  margin-top: .5rem;
-  border-color: var(--unit-dark);
 }
 
-/* Lista lateral de capacidades */
+.eco-panel__cta:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(255, 255, 255, 0.9);
+  color: var(--unit-dark);
+}
+
+/* ---------- Aside glass pegado al borde derecho ---------- */
 .eco-panel__side {
-  background: color-mix(in srgb, var(--unit) 5%, var(--bg-surface));
+  align-self: center;
-  border: 1px solid color-mix(in srgb, var(--unit) 22%, var(--border-color));
+  justify-self: end;
+  width: min(380px, 100%);
+  padding: 1.5rem 1.5rem 1.35rem;
   border-radius: var(--radius-md);
-  padding: 1.5rem 1.4rem;
+
+  background: color-mix(in srgb, var(--unit) 50%, transparent);
+  border: 1px solid color-mix(in srgb, #ffffff 32%, transparent);
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  box-shadow:
+    0 18px 40px -20px rgba(0, 0, 0, .35),
+    inset 0 1px 0 rgba(255, 255, 255, .18);
+
+  color: #ffffff;
+  /* Sangrado hacia el borde derecho para “tocar” el borde del panel */
+  margin-right: clamp(-2.5rem, -2vw, -1rem);
 }
 
 .eco-panel__side-title {
@@ -413,64 +513,69 @@
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: .95rem;
-  color: var(--unit);
+  color: #ffffff;
+  opacity: .92;
   margin-bottom: 1rem;
 }
 
 .eco-panel__list {
   list-style: none;
   display: grid;
-  gap: .9rem;
+  gap: .85rem;
   margin: 0;
   padding: 0;
 }
 
 .eco-panel__list li {
   display: flex;
-  gap: .75rem;
+  gap: .7rem;
   align-items: flex-start;
 }
 
 .eco-panel__li-icon {
   flex-shrink: 0;
-  width: 34px;
+  width: 32px;
-  height: 34px;
+  height: 32px;
   border-radius: 50%;
   display: grid;
   place-items: center;
-  background: var(--unit-soft);
+  background: rgba(255, 255, 255, .16);
-  color: var(--unit);
+  border: 1px solid rgba(255, 255, 255, .25);
-  font-size: .85rem;
+  color: #ffffff;
+  font-size: .8rem;
 }
 
 .eco-panel__list strong {
   display: block;
   font-family: 'Barlow Condensed', sans-serif;
   font-weight: 700;
-  font-size: 1rem;
+  font-size: .98rem;
-  color: var(--text-main);
+  color: #ffffff;
   letter-spacing: .02em;
 }
 
 .eco-panel__list p {
-  font-size: .85rem;
+  font-size: .82rem;
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, .85);
   line-height: 1.45;
   margin: .1rem 0 0;
 }
 
-/* Franja inferior con minicards */
+/* ---------- Franja inferior: fondo sólido, corta la imagen ---------- */
 .eco-panel__strip {
   position: relative;
-  z-index: 1;
+  z-index: 3;
-  border-top: 1px solid color-mix(in srgb, var(--unit) 20%, var(--border-color));
+  /*background: var(--bg-surface);*/
-  padding-top: 1.75rem;
+  bottom: 0;
+
+  padding: 0rem clamp(2rem, 3.5vw, 3rem) clamp(1rem, 1vw, 1rem);
+  /*border-top: 1px solid color-mix(in srgb, var(--unit) 22%, var(--border-color));*/
 }
 
 .eco-panel__strip-title {
   font-family: 'Barlow Semi Condensed', sans-serif;
   font-size: 1.1rem;
-  color: var(--text-main);
+  color: var(--text-inverse);
   margin-bottom: 1rem;
 }
 
@@ -511,15 +616,48 @@
    ========================================================================== */
 
 @media (max-width: 1100px) {
-  .eco-grid { grid-template-columns: repeat(2, 1fr); }
+  .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .eco-panel__grid { grid-template-columns: 1fr; gap: 1.75rem; }
+
+  .eco-panel__grid {
+    grid-template-columns: 1fr;
+    gap: 1.75rem;
+    min-height: 0;
+    padding: 1.75rem;
+  }
+
+  .eco-panel__side {
+    justify-self: stretch;
+    width: 100%;
+    margin-right: 0;
+  }
+
+  .eco-panel__media img {
+    object-position: center;
+  }
+
   .eco-panel__strip-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 @media (max-width: 640px) {
-  .eco-grid { grid-template-columns: 1fr; }
+  .eco-grid { grid-template-columns: minmax(0, 1fr); }
-  .eco-panel { padding: 1.5rem; }
+
+  .eco-panel__grid {
+    padding: 1.5rem;
+  }
+
+  /* En mobile el gradiente pasa a vertical porque el texto ya no está a la izquierda */
+  .eco-panel__overlay {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--unit) 92%, black 8%) 0%,
+        color-mix(in srgb, var(--unit) 60%, transparent) 60%,
+        transparent 100%
+      );
+  }
+
   .eco-panel__strip-grid { grid-template-columns: 1fr; }
+
   .eco-unit__topbar { flex-direction: column; align-items: stretch; }
   .eco-unit__nav { justify-content: flex-start; }
 }
@@ -529,7 +667,11 @@
 [data-theme="dark"] .eco-panel {
   background: var(--bg-surface);
 }
-[data-theme="dark"] .eco-panel__side,
+
+[data-theme="dark"] .eco-panel__media img {
+  filter: saturate(.8) brightness(.88) contrast(1.02);
+}
+
 [data-theme="dark"] .eco-mini {
   background: color-mix(in srgb, var(--unit) 10%, var(--bg-surface));
 }
@@ -541,7 +683,8 @@
   .eco-card__cta i,
   .eco-mini,
   .eco-unit__back,
-  .eco-state--unit {
+  .eco-state--unit,
+  .eco-panel__media img {
     transition: none !important;
     animation: none !important;
   }

css/styles.css

@@ -308,6 +308,10 @@ p, li, .lead-text, .text-body, .text-muted {
 .section-padding-npb {
   padding-top: clamp(1rem, 2vw, 3.5rem);
 }
+.section-padding-xs {
+  padding-top: clamp(0.5rem, 1vw, 1.5rem);
+  padding-bottom: clamp(1rem, 2vw, 1.5rem);
+}
 
 .bg1{
   background: radial-gradient(circle at 20% 80%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
@@ -374,6 +378,20 @@ p, li, .lead-text, .text-body, .text-muted {
   background-position: center;
   background-repeat: no-repeat;
 }
+.herobg-5{
+    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/CTA2.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
 
 
 
@@ -2606,6 +2624,26 @@ canvas {
   filter: grayscale(100%);
   opacity: 0.1;
 }
+.parallax-bg-layer3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  
+  /* Imagen de fondo */
+  background-image: url('../assets/img/hero/curvas.jpg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  
+  /* CLAVE: Deja la imagen fija en el viewport mientras el sitio scrollea */
+  background-attachment: fixed;
+  
+  /* Estética sobria IDE */
+  filter: grayscale(100%);
+  opacity: 0.1;
+}
 /* Cortina suave en bordes superior e inferior para fundir con el header/footer */
 .parallax-overlay {
   position: absolute;

desafios.html

@@ -46,11 +46,8 @@
     </section>
 
     <!-- Grilla de Desafíos con Modales -->
-    <section class="section-padding contact-parallax-section">
+    <section class="section-padding bg1">
-      <div class="parallax-wrapper" aria-hidden="true">
+
-        <div id="contact-parallax-bg" class="parallax-bg-layer2"></div>
-        <div class="parallax-overlay"></div>
-      </div>
       <div class="container">
         
         <div class="grid-3 desafios-grid" style="gap: 1.5rem;">

ecosistema.html

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

index.html

@@ -123,7 +123,7 @@
               <div class="eco-slide__text">
                 <h3>Fortalecer la gestión</h3>
                 <p>Sistemas de gestión, normas ISO (9001, 14001, 45001, 50001, 22000, 27001, 28000, 39001, 21001 y 29993), gestión por procesos, calidad y mejora continua con sentido de negocio.</p>
-                <a href="ecosistema.html#excellence" class="eco-slide__link">Explorar Excellence →</a>
+                <a href="ecosistema.html#eco-excellence" class="eco-slide__link">Explorar Excellence →</a>
               </div>
             </div>
           </div>

js/ecosistema.js

@@ -1,5 +1,6 @@
 /* ==========================================================================
-   ECOSISTEMA IDE — Cambio in-place entre tarjetas y paneles de unidad
+   ECOSISTEMA IDE — Cambio in-place + deep link por hash
+   URLs válidas: #eco-excellence | #eco-projects | #eco-digital | #ecosistema
    ========================================================================== */
 (function () {
   'use strict';
@@ -14,117 +15,173 @@
   const backBtn        = section.querySelector('[data-eco-close]');
   const pills          = Array.from(section.querySelectorAll('.eco-pill'));
 
-  let lastFocusedTrigger = null;
+  const VALID_UNITS    = ['excellence', 'projects', 'digital'];
+  const HASH_PREFIX    = '#eco-';
+  const HASH_ECOSYSTEM = '#ecosistema';
 
-  /* --- Mostrar panel de una unidad --- */
+  let lastFocusedTrigger = null;
-  function openUnit(id) {
+  let currentUnit = null; // null = ecosistema
+
+  /* ---------- Utilidades de URL ---------- */
+  function unitFromHash() {
+    const h = window.location.hash;
+    if (h === HASH_ECOSYSTEM) return null;
+    if (h.startsWith(HASH_PREFIX)) {
+      const id = h.slice(HASH_PREFIX.length);
+      return VALID_UNITS.includes(id) ? id : null;
+    }
+    return null;
+  }
+
+  function hashForUnit(id) {
+    return id ? HASH_PREFIX + id : HASH_ECOSYSTEM;
+  }
+
+  /* ---------- Render (no toca la URL) ---------- */
+  function renderUnit(id) {
     const panel = panels.find(p => p.dataset.ecoPanel === id);
     if (!panel) return;
 
-    // Guardamos el trigger que originó el cambio (para devolver foco)
     const origin = triggers.find(t => t.dataset.ecoOpen === id);
     if (origin) lastFocusedTrigger = origin;
 
-    // Ocultar ecosistema, mostrar estado unidad
     stateEcosystem.hidden = true;
     stateUnit.hidden = false;
 
-    // Alternar paneles
     panels.forEach(p => {
       const isActive = p.dataset.ecoPanel === id;
       p.hidden = !isActive;
       if (isActive) {
-        // Re-trigger de la animación de entrada
         p.style.animation = 'none';
-        // Forzar reflow
+        void p.offsetWidth; // reflow para reiniciar animación
-        void p.offsetWidth;
         p.style.animation = '';
       }
     });
 
-    // Aria expandido en tarjetas
     triggers.forEach(t => {
-      const isThis = t.dataset.ecoOpen === id;
+      t.setAttribute('aria-expanded', t.dataset.ecoOpen === id ? 'true' : 'false');
-      t.setAttribute('aria-expanded', isThis ? 'true' : 'false');
     });
 
-    // Pills activas
     pills.forEach(pill => {
       pill.classList.toggle('is-active', pill.dataset.ecoOpen === id);
     });
 
-    // Foco accesible al título del panel
     const title = panel.querySelector('.eco-panel__title');
     if (title) {
       title.setAttribute('tabindex', '-1');
-      // Pequeño timeout para asegurar visibilidad tras el cambio de estado
       requestAnimationFrame(() => title.focus({ preventScroll: false }));
     }
 
-    // Scroll suave al inicio de la sección (solo si quedó fuera de vista)
+    currentUnit = id;
-    const rect = section.getBoundingClientRect();
-    if (rect.top < -80) {
-      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
   }
 
-  /* --- Volver al estado ecosistema --- */
+  function renderEcosystem({ restoreFocus = true } = {}) {
-  function closeUnit() {
     stateUnit.hidden = true;
     stateEcosystem.hidden = false;
 
     triggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
     pills.forEach(p => p.classList.remove('is-active'));
 
-    // Devolver foco a la tarjeta origen
+    if (restoreFocus) {
-    if (lastFocusedTrigger && typeof lastFocusedTrigger.focus === 'function') {
+      if (lastFocusedTrigger && typeof lastFocusedTrigger.focus === 'function') {
-      lastFocusedTrigger.focus({ preventScroll: false });
+        lastFocusedTrigger.focus({ preventScroll: false });
-    } else {
+      } else if (triggers[0]) {
-      // Fallback: primer botón del grid
+        triggers[0].focus({ preventScroll: false });
-      const first = triggers[0];
+      }
-      if (first) first.focus({ preventScroll: false });
+    }
+
+    currentUnit = null;
+  }
+
+  /* ---------- API con URL ---------- */
+  function openUnit(id, { push = true, scroll = true } = {}) {
+    if (!VALID_UNITS.includes(id)) return;
+    renderUnit(id);
+
+    if (push) {
+      const url = window.location.pathname + window.location.search + hashForUnit(id);
+      history.pushState({ eco: id }, '', url);
+    }
+
+    if (scroll) {
+      const rect = section.getBoundingClientRect();
+      if (rect.top < -80 || rect.top > 200) {
+        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
     }
   }
 
-  /* --- Listeners --- */
+  function closeUnit({ push = true, scroll = false } = {}) {
+    renderEcosystem();
+    if (push) {
+      const url = window.location.pathname + window.location.search + HASH_ECOSYSTEM;
+      history.pushState({ eco: null }, '', url);
+    }
+    if (scroll) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+
+  /* ---------- Listeners de UI ---------- */
   triggers.forEach(trigger => {
     trigger.addEventListener('click', (e) => {
       const id = trigger.dataset.ecoOpen;
       if (!id) return;
-      // Si es un <a> real (academy), dejamos que navegue
+      // Academy es <a href="academy.html">: dejamos navegar
       if (trigger.tagName === 'A' && trigger.getAttribute('href')) return;
       e.preventDefault();
       openUnit(id);
     });
 
-    // Soporte teclado para tarjetas no-button (por si acaso)
     trigger.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
-        const id = trigger.dataset.ecoOpen;
+      const id = trigger.dataset.ecoOpen;
-        if (!id) return;
+      if (!id) return;
-        if (trigger.tagName === 'A') return;
+      if (trigger.tagName === 'A') return;
-        e.preventDefault();
+      e.preventDefault();
-        openUnit(id);
+      openUnit(id);
-      }
     });
   });
 
-  if (backBtn) backBtn.addEventListener('click', closeUnit);
+  if (backBtn) backBtn.addEventListener('click', () => closeUnit({ scroll: true }));
 
-  // Escape cierra el panel expandido
   section.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && !stateUnit.hidden) {
+    if (e.key === 'Escape' && !stateUnit.hidden) closeUnit();
-      closeUnit();
-    }
   });
 
-  /* --- Deep link opcional por hash (#eco-projects) sin recargar --- */
+  /* ---------- Sincronización con la URL ---------- */
-  function readHash() {
+  function syncFromLocation() {
-    const hash = window.location.hash.replace('#eco-', '');
+    const id = unitFromHash();
-    if (['excellence', 'projects', 'digital'].includes(hash)) {
+    if (id && id !== currentUnit) {
-      openUnit(hash);
+      renderUnit(id);
+    } else if (!id && currentUnit !== null) {
+      renderEcosystem({ restoreFocus: false });
     }
   }
-  window.addEventListener('hashchange', readHash);
+
-  readHash();
+  // Carga inicial: si el hash trae unidad, abrir + scroll
+  (function initFromUrl() {
+    const id = unitFromHash();
+    if (id) {
+      renderUnit(id);
+      requestAnimationFrame(() => {
+        section.scrollIntoView({ behavior: 'auto', block: 'start' });
+      });
+    } else {
+      renderEcosystem({ restoreFocus: false });
+    }
+  })();
+
+  // Cambios manuales del hash (pegar link, editar barra, links compartidos)
+  window.addEventListener('hashchange', syncFromLocation);
+
+  // Atrás/adelante del navegador
+  window.addEventListener('popstate', syncFromLocation);
+
+  /* ---------- API pública opcional ---------- */
+  window.EcoIDE = {
+    open: openUnit,
+    close: closeUnit,
+    current: () => currentUnit,
+  };
 })();

js/netschema.js

@@ -116,7 +116,7 @@ const nodosData = [
 
             // Crear pulsos
             conn.pulsos = [];
-            const cantPulsos = 10; 
+            const cantPulsos = 6; 
             
             for (let i = 0; i < cantPulsos; i++) {
                 const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -149,24 +149,54 @@ const nodosData = [
             });
         }, 1200);
 
-        // 4. Motor de Animación Ultraligero
+// 4. Motor de Animación Ultraligero
-        function animarFrame() {
+let animando = false;
-            conexiones.forEach(conn => {
+let rafId = null;
-                conn.pulsos.forEach(p => {
-                    p.dash -= p.speed; 
-                    
-                    // OPTIMIZACIÓN EXTREMA: Solo interactuamos con el DOM si el pulso saltó de carril
-                    if (p.needsPathUpdate) {
-                        p.el.setAttribute('d', conn.rutasCache[p.currentOffset]);
-                        p.needsPathUpdate = false;
-                    }
-                    
-                    // Lo único que se actualiza contínuamente es el desplazamiento
-                    p.el.style.strokeDashoffset = p.dash;
-                });
-            });
 
-            requestAnimationFrame(animarFrame);
+function animarFrame() {
-        }
+  if (!animando) return; // corta el loop cuando no es visible
+  conexiones.forEach(conn => {
+    conn.pulsos.forEach(p => {
+      p.dash -= p.speed;
+      if (p.needsPathUpdate) {
+        p.el.setAttribute('d', conn.rutasCache[p.currentOffset]);
+        p.needsPathUpdate = false;
+      }
+      p.el.style.strokeDashoffset = p.dash;
+    });
+  });
+  rafId = requestAnimationFrame(animarFrame);
+}
 
-        animarFrame();
+function iniciarAnimacion() {
+  if (animando) return;
+  animando = true;
+  rafId = requestAnimationFrame(animarFrame);
+}
+
+function detenerAnimacion() {
+  animando = false;
+  if (rafId) cancelAnimationFrame(rafId);
+}
+
+// Detectar visibilidad de la sección del header
+const heroVisual = document.querySelector('.hero-visual');
+if (heroVisual && 'IntersectionObserver' in window) {
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) iniciarAnimacion();
+      else detenerAnimacion();
+    });
+  }, { threshold: 0.05 });
+  io.observe(heroVisual);
+} else {
+  iniciarAnimacion(); // fallback
+}
+
+// Pausar también cuando la pestaña queda oculta
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) detenerAnimacion();
+  else if (heroVisual && heroVisual.getBoundingClientRect().top < window.innerHeight) {
+    iniciarAnimacion();
+  }
+});

soluciones.html

@@ -46,7 +46,11 @@
     </section>
 
     <!-- Seccion 2: Soluciones -->
-    <section class="section-padding">
+    <section class="section-padding contact-parallax-section">
+      <div class="parallax-wrapper" aria-hidden="true">
+        <div id="contact-parallax-bg" class="parallax-bg-layer2"></div>
+        <div class="parallax-overlay"></div>
+      </div>
       <div class="container">
         <div class="grid-4">