diff --git a/docs/graficos/presos.html b/docs/graficos/presos.html
index a1448e9..012521b 100644
--- a/docs/graficos/presos.html
+++ b/docs/graficos/presos.html
@@ -1,10 +1,31 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
-    <script src="presos.js"></script>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <!-- 1 -->
+     <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
+
+     <!-- 2 -->
+     <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
+
+     <div id='timeline-embed' style="width: 100%; height: 500px"></div>
+
+     <!-- 3 -->
+     <script type="text/javascript">
+       // The TL.Timeline constructor takes at least two arguments:
+       // the id of the Timeline container (no '#'), and
+       // the URL to your JSON data file or Google spreadsheet.
+       // the id must refer to an element "above" this code,
+       // and the element must have CSS styling to give it width and height
+       // optionally, a third argument with configuration options can be passed.
+       // See below for more about options.
+       var additionalOptions = {
+              start_at_end: false,
+              default_bg_color: {r:255, g:255, b:255},
+              timenav_height: 150
+            }
+       timeline = new TL.Timeline('timeline-embed',
+         'https://docs.google.com/spreadsheets/d/1VLDzqJzMt7yB29pRsdO_HfDVbCXrdIHXP9R2LNDSE9c/pubhtml',additionalOptions);
+     </script>
   <style> body {padding: 0; margin: 0;} </style>
   </head>
   <body>
