fix some sections

css/styles.css

@@ -28,6 +28,7 @@
   --bg-subtle: #EDF3F5;
   --bg-card: #FFFFFF;
   --bg-card-alt: #f8faff;
+  --ripple-color:#dbdfe2;
   --bg-muted: #e9ecef;
   --border-color: #E2E8F0;
   --border-subtle: #EEF2F6;
@@ -54,11 +55,13 @@
 
 /* Tema Oscuro (Elegante mate, sin negros puros #000 ni neón estridente) */
 [data-theme="dark"] {
+  --ide-primary:#40ab8e;
   --bg-body: #11181D;
   --bg-surface: #18222A;
   --bg-surface-elevated: #202D37;
   --bg-subtle: #24333E;
   --bg-card: #18222A;
+  --ripple-color:#18222A;
   --bg-card-alt: var(--bg-muted);
   --card-overlay: rgba(4, 36, 29, 0.85);
   --bg-muted: #24333E;
@@ -444,6 +447,65 @@ p, li, .lead-text, .text-body, .text-muted {
   font-weight: 600;
   text-transform: uppercase;
 }
+/*====================================*/
+/*     Estilos para efecto en Hero    */
+/*====================================*/
+.hero-visual-graphic {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  background: transparent !important;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+#network-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  background: transparent !important;
+}
+
+/* Canvas con fondo transparente */
+#network-container canvas {
+  display: block !important;
+  width: 100% !important;
+  height: 100% !important;
+  background: transparent !important;
+}
+
+/* Degradado sutil para profundidad */
+.hero-visual-graphic::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2;
+  border-radius: 16px;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 60%,
+    rgba(0, 0, 0, 0.05) 100%
+  );
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero-visual-graphic {
+    min-height: 240px;
+  }
+  #network-container {
+    min-height: 240px;
+  }
+}
+/*============================*/
 
 /* --- 6. Botones --- */
 .btn {
@@ -524,6 +586,35 @@ p, li, .lead-text, .text-body, .text-muted {
   padding: 0.45rem 1rem;
   font-size: 0.85rem;
 }
+/*==============================*/
+/*efecto ruido*/
+.incomodidad-section {
+  position: relative;
+  width: 100%;
+  padding: 100px 24px;
+  overflow: hidden; /* Evita que las ondas ensanchen la pantalla */
+}
+
+/* Canvas como fondo absoluto */
+#ripple-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none; /* Traspasa cualquier clic al contenido */
+}
+
+/* Asegurar que el contenido esté un nivel por encima */
+.incomodidad-content {
+  position: relative;
+  z-index: 1;
+  max-width: 900px;
+  margin: 0 auto;
+  text-align: center;
+}
+/*==============================*/
 
 /* --- 7. Tarjetas y Grillas --- */
 .card {