Update templates/index.html

templates/index.html

@@ -117,15 +117,29 @@
         <div id="sankey-graph">
             {% if sankey_graph %}
               <h2>Gráfico de Sankey</h2>
-              <div style="position: relative; display: inline-block; text-align: center;">
+              
+              <!-- Contenedor para la descripción y las flechas -->
+              <div style="text-align: center; margin-bottom: 20px;">
+                  <!-- Texto descriptivo -->
+                  <p style="font-size: 16px; color: #e0e0e0; max-width: 80%; margin: auto;">
+                      Este gráfico muestra cómo los datos se agrupan y se combinan. 
+                      En el lado izquierdo, están los grupos más pequeños y específicos, 
+                      formados con datos que están muy relacionados entre sí. 
+                      A medida que avanzamos hacia la derecha, los grupos se hacen más grandes y generales, 
+                      combinando varios de los grupos más pequeños en categorías amplias.
+                  </p>
+                  
+                  <!-- Imagen de flechas bidireccionales -->
                   <img src="{{ url_for('static', filename='bidirectional_arrows.png') }}" 
                        alt="Flechas Bidireccionales" 
-                       style="position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 30%; max-width: 400px; z-index: 1;">
-                  <div style="position: relative; z-index: 0;">
-                      {{ sankey_graph | safe }}
-                  </div>
+                       style="width: 70%; max-width: 600px;">
               </div>
-            {% endif %}
+              
+              <!-- Gráfico de Sankey -->
+              <div>
+                  {{ sankey_graph | safe }}
+              </div>
+          {% endif %}
         </div>
     </div>
 </body>