rf-v4.11-ecosistema listo

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;