cambio efecto

styles.css

@@ -34,21 +34,59 @@ body {
 
 /* ===== CANVAS FLUIDO ===== */
 #fluidCanvas {
-  display: block;
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  pointer-events: auto;
-  background: var(--oscuro);
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    pointer-events: none; /* ✅ No interfiere con clicks */
+    background: transparent;
 }
 
-/* Asegurar que el contenido esté por encima */
+/* ===== CONTENIDO SOBRE EL CANVAS ===== */
 .hero, section {
-  position: relative;
-  z-index: 1;
+    position: relative;
+    z-index: 1;
+    background: transparent; /* ✅ Transparente para ver el humo */
+}
+
+/* Si necesitas fondos en secciones específicas, usa semi-transparente */
+.hero {
+    background: rgba(17, 9, 22, 0.3); /* Semi-transparente */
+}
+
+section {
+    background: rgba(17, 9, 22, 0.5); /* Semi-transparente */
+}
+
+/* Header siempre por encima */
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background: linear-gradient(180deg, rgba(17,9,22,.9) 0%, rgba(17,9,22,0) 100%);
+    pointer-events: auto; /* ✅ Header sí recibe clicks */
+}
+
+/* Botones y elementos interactivos siempre por encima */
+.btn, .menu-btn, .plan-cta, .tab, .acc-head, .faq-head, 
+.filter-tag, input, textarea, button, a {
+    position: relative;
+    z-index: 2;
+    pointer-events: auto; /* ✅ Todos los elementos interactivos funcionan */
+}
+
+/* Overlay y Sheet por encima de todo */
+.overlay {
+    z-index: 90;
+}
+
+.sheet {
+    z-index: 100;
 }
 
 /* ===== HEADER ===== */