fix some sections

index.html

@@ -41,62 +41,24 @@
             <!-- Doble Entrada Estratégica -->
             <div class="hero-doble-entrada">
               <!-- Camino A: Por Desafío -->
-              <a href="desafios.html" class="hero-card-entry" id="hero-entry-desafios">
-                <div>
-                  <!-- <div class="entry-icon">🎯</div> -->
-                  <h3>Tengo un desafío</h3>
-                  <p>Sé que algo no funciona o quiero mejorar un área, pero no tengo claro qué solución necesito.</p>
-                </div>
-                <div class="entry-link-text">
-                  Explorar por Desafíos <span>→</span>
-                </div>
-              </a>
+              <a href="desafios.html" class="btn btn-outline btn-sm" id="hero-entry-desafios">Tengo un desafío</a>
 
               <!-- Camino B: Por Solución Concreta -->
-              <a href="soluciones.html" class="hero-card-entry" id="hero-entry-soluciones">
-                <div>
-                  <!-- <div class="entry-icon">⚡</div> -->
-                  <h3>Busco una solución</h3>
-                  <p>Busco una implementación puntual (ISO 9001, PMO, Capacitación In-Company, IA en Procesos).</p>
-                </div>
-                <div class="entry-link-text">
-                  Ir a Soluciones Concretas <span>→</span>
-                </div>
-              </a>
+              <a href="soluciones.html" class="btn btn-outline btn-sm" id="hero-entry-soluciones">Busco una solución</a>
             </div>
           </div>
 
-          <!-- Visual Conceptual de Nodos / Infinito + Camino 
-          <div class="hero-visual-graphic">
-            <div class="infinito-camino-box">
-              <svg viewBox="0 0 280 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; max-width: 240px; margin-bottom: 1.25rem;">
-                <path d="M70 100 C20 40, 20 160, 70 100 C120 40, 160 160, 210 100 C260 40, 260 160, 210 100" stroke="var(--ide-primary)" stroke-width="6" stroke-linecap="round" stroke-dasharray="2 1" opacity="0.3"/>
-                <path d="M50 100 C50 65 80 65 110 100 C140 135 170 135 200 100 C230 65 260 65 260 100 C260 135 230 135 200 100 C170 65 140 65 110 100 C80 135 50 135 50 100 Z" stroke="var(--ide-accent)" stroke-width="4" fill="none" stroke-linecap="round"/>
-                
-                <circle cx="50" cy="100" r="7" fill="var(--ide-primary)"/>
-                <circle cx="110" cy="100" r="7" fill="var(--ide-accent)"/>
-                <circle cx="200" cy="100" r="7" fill="var(--ide-primary-dark)"/>
-                <circle cx="260" cy="100" r="7" fill="var(--ide-accent-hover)"/>
-
-                <line x1="50" y1="100" x2="260" y2="100" stroke="var(--ide-gray)" stroke-width="1.5" stroke-dasharray="4 4"/>
-              </svg>
-              <div class="font-bebas" style="font-size: 1.3rem; color: var(--text-main); letter-spacing: 0.08em; margin-bottom: 0.25rem;">
-                CONECTIVIDAD SISTÉMICA
-              </div>
-              <p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4;">
-                Procesos • Personas • Proyectos • Tecnología funcionando en conjunto.
-              </p>
-            </div>
-          </div> -->
+          <div id="hero-3d-container" style="width: 100%; height: 500px; position: relative;"></div>
 
         </div>
       </div>
     </section>
 
     <!-- BLOQUE 2: LA TENSIÓN Y EL QUIEBRE -->
-    <section class="section-padding">
-      <div class="container">
-        <div class="tension-box">
+    <section class="incomodidad-section" style="gap: 3rem;">
+      <canvas id="ripple-canvas"></canvas>
+      <div class="incomodidad-content">
+        <div class="tension-box" style="margin-bottom: 8rem;">
           <div style="max-width: 800px; margin: 0 auto; text-align: center;">
             <span class="eyebrow">LA INCOMODIDAD PRODUCTIVA</span>
             <h2 style="margin-bottom: 1.5rem;">
@@ -110,12 +72,6 @@
             </div>
           </div>
         </div>
-      </div>
-    </section>
-
-    <!-- BLOQUE 3: QUIZ INTERACTIVO -->
-    <section class="section-padding-sm" id="quiz-refactorizado">
-      <div class="container">
         <div class="quiz-container" id="quiz-interactive-app">
 
           <!-- HEADER -->
@@ -606,13 +562,12 @@
             </div>
           </div>
           </div>
-
-        </div>
       </div>
     </section>
 
+
     <!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
-    <section class="section-padding">
+    <section class="section-padding" style="background-color: var(--bg-subtle);">
       <div class="container">
         <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
           <div>
@@ -751,10 +706,13 @@
 
   <!-- Footer Modular (Inyectado dinámicamente por JS) -->
   <footer id="site-footer"></footer>
-
   <!-- Scripts Centralizados -->
   <script src="js/main.js"></script>
-  <!-- Carga el SVG con JavaScript -->
+  <!-- Scripts particulas -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script src="js/particles.js"></script>
+  <script src="js/ripple.js"></script>
+
 
 </body>
 </html>