rf-v4.9-desafios+soluciones

css/styles.css

@@ -266,6 +266,10 @@ p, li, .lead-text, .text-body, .text-muted {
   position: relative;
   overflow: hidden;
 }
+.section-padding-md {
+  padding-top: clamp(2.5rem, 4vw, 4.5rem);
+  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
+}
 
 .section-padding-sm {
   padding-top: clamp(1rem, 2vw, 3.5rem);
@@ -284,6 +288,63 @@ p, li, .lead-text, .text-body, .text-muted {
 .bg3{
   background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body);
 }
+.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;
+}
+.herobg-3{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(56,128,89, 1) 0%,
+      rgba(56,128,89, 0.5) 40%,
+      rgba(56,128,89, 0.2) 70%,
+      rgba(56,128,89, 0.05) 100%
+    ),
+    url('../assets/img/hero/hero-desafios.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-4{
+    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-soluciones.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 
 
 /* --- 5. Componentes: Header & Navbar --- */
@@ -1031,6 +1092,11 @@ p, li, .lead-text, .text-body, .text-muted {
   grid-template-columns: repeat(5, 1fr);
   gap: 1.25rem;
 }
+.grid-6 {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.7rem;
+}
 
 /* --- 8. Hero: La Doble Entrada (Home) --- */
 
@@ -2490,7 +2556,26 @@ canvas {
   filter: grayscale(100%);
   opacity: 0.1;
 }
-
+.parallax-bg-layer2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  
+  /* Imagen de fondo */
+  background-image: url('../assets/img/34.png');
+  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;