Update index.html

index.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>MIGUEL - Pitch Deck</title>
+    
+    <!-- LIBRERÍAS PARA PDF -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+
     <style>
         @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Manrope:wght@200;300;400;500;600;700&display=swap');
 
@@ -42,114 +47,43 @@
             from { opacity: 0; transform: translateY(30px); }
             to { opacity: 1; transform: translateY(0); }
         }
-
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         @keyframes slideInLeft {
             from { opacity: 0; transform: translateX(-40px); }
             to { opacity: 1; transform: translateX(0); }
         }
-
         @keyframes scaleIn {
             from { opacity: 0; transform: scale(0.95); }
             to { opacity: 1; transform: scale(1); }
         }
-
-        @keyframes slowZoom {
-            from { transform: scale(1); }
-            to { transform: scale(1.05); }
-        }
-
         @keyframes fadeInOverlay {
             from { opacity: 0; }
             to { opacity: 1; }
         }
-
-        /* === TIMINGS: 1.5s de imagen limpia antes de cualquier animación === */
-        
-        .animate-overlay {
-            animation: fadeInOverlay 1.5s ease-out forwards;
-            animation-delay: 1.5s;
-        }
-
-        .animate-title {
-            opacity: 0;
-            animation: fadeInUp 1s ease-out forwards;
-            animation-delay: 1.8s;
-        }
-
-        .animate-tagline {
-            opacity: 0;
-            animation: fadeIn 1.2s ease-out forwards;
-            animation-delay: 1.6s;
-        }
-
-        .animate-credits {
-            opacity: 0;
-            animation: fadeInUp 1s ease-out forwards;
-            animation-delay: 2.2s;
-        }
-
-        .animate-genre {
-            opacity: 0;
-            animation: fadeIn 1s ease-out forwards;
-            animation-delay: 2.6s;
-        }
-
-        .animate-text {
-            opacity: 0;
-            animation: slideInLeft 1s ease-out forwards;
-            animation-delay: 1.8s;
-        }
-
-        .animate-title-slide {
-            opacity: 0;
-            animation: fadeInUp 0.8s ease-out forwards;
-            animation-delay: 1.6s;
-        }
-
-        .animate-table {
-            opacity: 0;
-            animation: fadeIn 1.2s ease-out forwards;
-            animation-delay: 1.8s;
-        }
-
-        .animate-notes {
-            opacity: 0;
-            animation: fadeInUp 1s ease-out forwards;
-            animation-delay: 2.5s;
-        }
-
-        .animate-contact {
-            opacity: 0;
-            animation: slideInLeft 0.8s ease-out forwards;
-            animation-delay: 1.6s;
-        }
-
-        .animate-contact-item {
-            opacity: 0;
-            animation: fadeInUp 0.6s ease-out forwards;
-        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* === TIMINGS: 1.5s de imagen limpia === */
+        .animate-overlay { animation: fadeInOverlay 1.5s ease-out forwards; animation-delay: 1.5s; }
+        .animate-title { opacity: 0; animation: fadeInUp 1s ease-out forwards; animation-delay: 1.8s; }
+        .animate-tagline { opacity: 0; animation: fadeIn 1.2s ease-out forwards; animation-delay: 1.6s; }
+        .animate-credits { opacity: 0; animation: fadeInUp 1s ease-out forwards; animation-delay: 2.2s; }
+        .animate-genre { opacity: 0; animation: fadeIn 1s ease-out forwards; animation-delay: 2.6s; }
+        .animate-text { opacity: 0; animation: slideInLeft 1s ease-out forwards; animation-delay: 1.8s; }
+        .animate-title-slide { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; animation-delay: 1.6s; }
+        .animate-table { opacity: 0; animation: fadeIn 1.2s ease-out forwards; animation-delay: 1.8s; }
+        .animate-notes { opacity: 0; animation: fadeInUp 1s ease-out forwards; animation-delay: 2.5s; }
+        .animate-contact { opacity: 0; animation: slideInLeft 0.8s ease-out forwards; animation-delay: 1.6s; }
+        .animate-contact-item { opacity: 0; animation: fadeInUp 0.6s ease-out forwards; }
         .animate-contact-item:nth-child(1) { animation-delay: 2.0s; }
         .animate-contact-item:nth-child(2) { animation-delay: 2.2s; }
         .animate-contact-item:nth-child(3) { animation-delay: 2.4s; }
-
-        .animate-miembro {
-            opacity: 0;
-            animation: scaleIn 0.8s ease-out forwards;
-        }
+        .animate-miembro { opacity: 0; animation: scaleIn 0.8s ease-out forwards; }
         .animate-miembro:nth-child(1) { animation-delay: 1.8s; }
         .animate-miembro:nth-child(2) { animation-delay: 2.0s; }
         .animate-miembro:nth-child(3) { animation-delay: 2.2s; }
-
-        .animate-highlight {
-            opacity: 0;
-            animation: fadeInUp 0.8s ease-out forwards;
-            animation-delay: 1.8s;
-        }
+        .animate-highlight { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; animation-delay: 1.8s; }
 
         /* ===================== ESTILOS GENERALES ===================== */
         .tagline-top {
@@ -163,24 +97,14 @@
             letter-spacing: 25px; margin-top: 80px; margin-bottom: 20px;
             text-shadow: 0 5px 25px rgba(0,0,0,0.8);
         }
-        .credits-bottom {
-            margin-top: 180px; width: 80%; margin-left: auto; margin-right: auto;
-        }
+        .credits-bottom { margin-top: 180px; width: 80%; margin-left: auto; margin-right: auto; }
         .credits {
             font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 500; 
             letter-spacing: 1px; line-height: 2; text-shadow: 0 2px 15px rgba(0,0,0,1); margin-bottom: 30px;
         }
         .credits span { display: block; white-space: nowrap; }
-        .credits a {
-            color: #fff;
-            text-decoration: none;
-            border-bottom: 1px solid rgba(255,255,255,0.3);
-            transition: all 0.3s;
-        }
-        .credits a:hover {
-            color: #4ade80;
-            border-bottom-color: #4ade80;
-        }
+        .credits a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); transition: all 0.3s; }
+        .credits a:hover { color: #4ade80; border-bottom-color: #4ade80; }
         .genre {
             font-family: 'Manrope', sans-serif; font-size: 1rem; letter-spacing: 6px;
             border-top: 1px solid rgba(255,255,255,0.6); display: inline-block;
@@ -188,12 +112,8 @@
             text-shadow: 0 2px 10px rgba(0,0,0,1);
         }
 
-        .overlay-slide2 {
-            background: linear-gradient(to bottom, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.0) 100%);
-        }
-        .content-slide2 {
-            position: absolute; top: 35px; left: 5%; width: 85%; z-index: 10; text-align: left;
-        }
+        .overlay-slide2 { background: linear-gradient(to bottom, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.0) 100%); }
+        .content-slide2 { position: absolute; top: 35px; left: 5%; width: 85%; z-index: 10; text-align: left; }
         .titulo-slide2 {
             font-family: 'EB Garamond', serif; font-size: 4.8rem; margin-bottom: 15px; 
             font-weight: 600; letter-spacing: 2px; text-shadow: 0 4px 10px rgba(0,0,0,0.9); line-height: 1;
@@ -221,26 +141,16 @@
             margin-bottom: 10px; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.3); 
             padding-bottom: 12px; display: block;
         }
-        .miembro-nombre a {
-            color: #fff;
-            text-decoration: none;
-            transition: all 0.3s;
-        }
-        .miembro-nombre a:hover {
-            color: #4ade80;
-        }
+        .miembro-nombre a { color: #fff; text-decoration: none; transition: all 0.3s; }
+        .miembro-nombre a:hover { color: #4ade80; }
         .miembro-rol {
             font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px;
             opacity: 0.8; margin-bottom: 15px; display: block; font-weight: 400; color: #fff;
         }
         .miembro-bio { font-size: 1rem; line-height: 1.7; font-weight: 300; opacity: 0.95; }
 
-        .overlay-slide4 {
-            background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.0) 100%);
-        }
-        .content-slide4 {
-            position: absolute; top: 20px; left: 5%; width: 60%; z-index: 10;
-        }
+        .overlay-slide4 { background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.0) 100%); }
+        .content-slide4 { position: absolute; top: 20px; left: 5%; width: 60%; z-index: 10; }
         .titulo-slide4 {
             font-family: 'EB Garamond', serif; font-size: 3.2rem; font-weight: 600;
             letter-spacing: 2px; margin-bottom: 0px; text-shadow: 0 4px 10px rgba(0,0,0,0.9);
@@ -249,203 +159,78 @@
             font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 400;
             letter-spacing: 3px; text-transform: uppercase; opacity: 0.8; margin-bottom: 20px;
         }
-        .highlight-row {
-            display: flex; align-items: flex-start; gap: 20px; margin-bottom: 25px; flex-wrap: wrap;
-        }
+        .highlight-row { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 25px; flex-wrap: wrap; }
         .highlight-box {
             background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
             padding: 15px 20px; display: inline-flex; align-items: baseline; gap: 15px;
             border-radius: 4px; flex-shrink: 0;
         }
-        .highlight-number {
-            font-family: 'Manrope', sans-serif; font-size: 2.8rem; font-weight: 700;
-            color: #fff; line-height: 1;
-        }
-        .highlight-text {
-            font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 500;
-            letter-spacing: 2px; text-transform: uppercase; color: #ccc;
-        }
-        .sources-box {
-            font-size: 0.8rem; color: #bbb; line-height: 1.5; max-width: 400px; padding-top: 5px;
-        }
+        .highlight-number { font-family: 'Manrope', sans-serif; font-size: 2.8rem; font-weight: 700; color: #fff; line-height: 1; }
+        .highlight-text { font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #ccc; }
+        .sources-box { font-size: 0.8rem; color: #bbb; line-height: 1.5; max-width: 400px; padding-top: 5px; }
         .table-container { display: grid; gap: 6px; }
         .table-row {
             display: grid; grid-template-columns: 2.2fr 0.8fr 0.8fr; padding: 8px 0;
             border-bottom: 1px solid rgba(255,255,255,0.1); align-items: start;
         }
         .col-movie-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
-        .col-movie-header strong {
-            font-family: 'EB Garamond', serif; font-size: 1.05rem; font-weight: 600; color: #fff;
-        }
+        .col-movie-header strong { font-family: 'EB Garamond', serif; font-size: 1.05rem; font-weight: 600; color: #fff; }
         .col-movie-header span.year { font-size: 0.85rem; color: #888; }
-        .col-movie-header span.country {
-            font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
-            color: #999; letter-spacing: 1px;
-        }
+        .col-movie-header span.country { font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; color: #999; letter-spacing: 1px; }
         .col-movie-desc { font-size: 0.75rem; line-height: 1.4; color: #aaa; display: block; margin-top: 2px; }
-        .col-budget, .col-roi {
-            font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 700;
-            text-align: right; padding-top: 2px;
-        }
-        .roi-excellent { color: #4ade80; }
-        .roi-good { color: #22c55e; }
-        .roi-ok { color: #fbbf24; }
-        .roi-risk { color: #fb923c; }
-        .roi-low { color: #f87171; }
+        .col-budget, .col-roi { font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 700; text-align: right; padding-top: 2px; }
+        .roi-excellent { color: #4ade80; } .roi-good { color: #22c55e; } .roi-ok { color: #fbbf24; } .roi-risk { color: #fb923c; } .roi-low { color: #f87171; }
 
-        .overlay-slide5 {
-            background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.0) 100%);
-        }
-        .content-slide5 {
-            position: absolute; top: 40px; left: 5%; width: 65%; z-index: 10;
-        }
+        .overlay-slide5 { background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.0) 100%); }
+        .content-slide5 { position: absolute; top: 40px; left: 5%; width: 65%; z-index: 10; }
         .titulo-slide5 {
             font-family: 'EB Garamond', serif; font-size: 3.5rem; font-weight: 600;
             letter-spacing: 2px; margin-bottom: 25px; text-shadow: 0 4px 15px rgba(0,0,0,0.9);
         }
-        
-        .cascada-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-bottom: 20px; 
-            font-size: 0.95rem;
-        }
-        .cascada-table th {
-            text-align: left;
-            padding: 12px 15px;
-            border-bottom: 2px solid rgba(255,255,255,0.3);
-            font-family: 'Manrope', sans-serif;
-            font-weight: 600;
-            font-size: 0.85rem;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-            color: #ccc;
-        }
-        .cascada-table td {
-            padding: 12px 15px;
-            border-bottom: 1px solid rgba(255,255,255,0.1);
-            vertical-align: top;
-        }
+        .cascada-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.95rem; }
+        .cascada-table th { text-align: left; padding: 12px 15px; border-bottom: 2px solid rgba(255,255,255,0.3); font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: #ccc; }
+        .cascada-table td { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); vertical-align: top; }
         .cascada-table .col-etapa { width: 20%; font-weight: 700; color: #fff; }
         .cascada-table .col-concepto { width: 50%; color: #ddd; }
-        .cascada-table .col-monto {
-            width: 30%; text-align: right; font-weight: 700; color: #4ade80; font-size: 1.05rem;
-        }
+        .cascada-table .col-monto { width: 30%; text-align: right; font-weight: 700; color: #4ade80; font-size: 1.05rem; }
         .cascada-table .total-row { background: rgba(255,255,255,0.08); }
         .cascada-table .total-row td { border-bottom: 2px solid rgba(255,255,255,0.4); font-weight: 700; }
         .cascada-table .total-row .col-monto { color: #fbbf24; font-size: 1.15rem; }
         .cascada-table .fase3-row .col-monto { color: #fbbf24; }
-
         .notas-tecnicas {
-            background: rgba(0,0,0,0.8);
-            border-left: 3px solid rgba(255,255,255,0.3);
-            padding: 20px;
-            margin-top: 110px; 
-            backdrop-filter: blur(5px);
-        }
-        .notas-tecnicas h3 {
-            font-family: 'EB Garamond', serif;
-            font-size: 1.3rem;
-            margin-bottom: 15px;
-            color: #fff;
-            font-weight: 600;
-        }
-        .nota-item {
-            margin-bottom: 15px;
-            font-size: 0.85rem;
-            line-height: 1.6;
-            color: #ccc;
-        }
-        .nota-item strong {
-            color: #fff;
-            display: block;
-            margin-bottom: 5px;
-            font-weight: 600;
-        }
-
-        .overlay-slide6 {
-            background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.0) 100%);
-        }
-        .content-slide6 {
-            position: absolute; top: 50%; left: 5%;
-            transform: translateY(-50%);
-            width: 50%;
-            z-index: 10;
-        }
-        .gracias-title {
-            font-family: 'EB Garamond', serif;
-            font-size: 4.5rem;
-            font-weight: 600;
-            margin-bottom: 50px;
-            letter-spacing: 3px;
-            text-shadow: 0 4px 20px rgba(0,0,0,0.9);
-        }
-        .contacto-nombre {
-            font-family: 'EB Garamond', serif;
-            font-size: 2rem;
-            font-weight: 600;
-            margin-bottom: 30px;
-            color: #fff;
-            letter-spacing: 2px;
-        }
-        .contacto-item {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            margin-bottom: 20px;
-            font-size: 1.1rem;
-            color: #ddd;
-        }
-        .contacto-item a {
-            color: #fff;
-            text-decoration: none;
-            transition: color 0.3s;
-        }
-        .contacto-item a:hover {
-            color: #4ade80;
-        }
-        .whatsapp-icon {
-            width: 24px;
-            height: 24px;
-            fill: #25D366;
-        }
-        
+            background: rgba(0,0,0,0.8); border-left: 3px solid rgba(255,255,255,0.3);
+            padding: 20px; margin-top: 110px; backdrop-filter: blur(5px);
+        }
+        .notas-tecnicas h3 { font-family: 'EB Garamond', serif; font-size: 1.3rem; margin-bottom: 15px; color: #fff; font-weight: 600; }
+        .nota-item { margin-bottom: 15px; font-size: 0.85rem; line-height: 1.6; color: #ccc; }
+        .nota-item strong { color: #fff; display: block; margin-bottom: 5px; font-weight: 600; }
+
+        .overlay-slide6 { background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.0) 100%); }
+        .content-slide6 { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 50%; z-index: 10; }
+        .gracias-title { font-family: 'EB Garamond', serif; font-size: 4.5rem; font-weight: 600; margin-bottom: 50px; letter-spacing: 3px; text-shadow: 0 4px 20px rgba(0,0,0,0.9); }
+        .contacto-nombre { font-family: 'EB Garamond', serif; font-size: 2rem; font-weight: 600; margin-bottom: 30px; color: #fff; letter-spacing: 2px; }
+        .contacto-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-size: 1.1rem; color: #ddd; }
+        .contacto-item a { color: #fff; text-decoration: none; transition: color 0.3s; }
+        .contacto-item a:hover { color: #4ade80; }
+        .whatsapp-icon { width: 24px; height: 24px; fill: #25D366; }
         .talishte-credit {
-            position: absolute;
-            bottom: 85px;
-            right: 5%;
-            font-size: 0.9rem;
-            font-weight: 700;
-            color: #1a1a1a;
-            z-index: 5;
-            text-shadow: 0 0 10px rgba(255,255,255,0.6);
-        }
-        .talishte-credit a {
-            color: #000;
-            text-decoration: none;
-            font-weight: 700;
-            border-bottom: 2px solid #000;
-            transition: color 0.3s;
-        }
-        .talishte-credit a:hover {
-            color: #333;
-            border-bottom-color: #333;
-        }
-
-        /* ===================== NAVEGACIÓN ===================== */
-        .nav {
-            position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: flex; gap: 10px;
-        }
-        .nav button {
-            background: rgba(0,0,0,0.7);
-            border: 2px solid rgba(255,255,255,0.5);
+            position: absolute; bottom: 85px; right: 5%; font-size: 0.9rem; font-weight: 700;
+            color: #1a1a1a; z-index: 5; text-shadow: 0 0 10px rgba(255,255,255,0.6);
+        }
+        .talishte-credit a { color: #000; text-decoration: none; font-weight: 700; border-bottom: 2px solid #000; transition: color 0.3s; }
+        .talishte-credit a:hover { color: #333; border-bottom-color: #333; }
+
+        /* ===================== NAVEGACI��N & BOTÓN PDF ===================== */
+        .nav { position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: flex; gap: 10px; }
+        .nav button, #btn-pdf {
+            background: rgba(0,0,0,0.7); border: 2px solid rgba(255,255,255,0.5);
             color: white; padding: 12px 20px; cursor: pointer;
             font-family: 'Manrope', sans-serif; font-size: 0.85rem; letter-spacing: 2px; 
             transition: 0.3s; border-radius: 5px; backdrop-filter: blur(5px);
         }
-        .nav button:hover { background: rgba(0,0,0,0.9); border-color: white; }
-        .nav button:active { transform: scale(0.95); }
-        .nav button:disabled { opacity: 0.3; cursor: not-allowed; }
+        .nav button:hover, #btn-pdf:hover { background: rgba(0,0,0,0.9); border-color: white; }
+        .nav button:active, #btn-pdf:active { transform: scale(0.95); }
+        .nav button:disabled, #btn-pdf:disabled { opacity: 0.3; cursor: not-allowed; }
         
         .slide-counter {
             position: fixed; bottom: 30px; left: 30px; z-index: 1000;
@@ -453,6 +238,43 @@
             background: rgba(0,0,0,0.6); padding: 8px 15px; border-radius: 5px; backdrop-filter: blur(5px);
         }
 
+        /* BOTÓN PDF: ARRIBA DERECHA FIJO */
+        #btn-pdf {
+            position: fixed;
+            top: 30px;
+            right: 30px;
+            z-index: 1001;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* LOADING OVERLAY */
+        #pdf-loading {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.9);
+            z-index: 2000;
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            backdrop-filter: blur(5px);
+        }
+        .spinner {
+            width: 50px; height: 50px;
+            border: 4px solid rgba(255,255,255,0.2);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        #pdf-loading p {
+            font-family: 'Manrope', sans-serif;
+            font-size: 1.2rem;
+            color: #fff;
+            letter-spacing: 1px;
+        }
+
         /* ===================== RESPONSIVE + SCROLL FIX ===================== */
         @media (max-width: 1024px) {
             .titulo-main { font-size: 6rem; letter-spacing: 15px; }
@@ -481,8 +303,7 @@
             }
             .content-slide4, .content-slide5 { 
                 width: 90%; left: 5%; 
-                /* SCROLL FIX: Permitir scroll vertical en móvil */
-                max-height: calc(100vh - 140px); /* Dejar espacio para navegación */
+                max-height: calc(100vh - 140px); 
                 overflow-y: auto;
                 padding-bottom: 20px;
             }
@@ -500,17 +321,10 @@
             .nav { bottom: 15px; right: 15px; }
             .nav button { padding: 12px 18px; font-size: 0.8rem; background: rgba(0,0,0,0.8); }
             .slide-counter { bottom: 15px; left: 15px; font-size: 0.8rem; background: rgba(0,0,0,0.8); padding: 10px 15px; }
+            #btn-pdf { top: 15px; right: 15px; padding: 10px 15px; font-size: 0.8rem; }
             
-            /* Scrollbar sutil para móvil */
-            .content-slide4::-webkit-scrollbar,
-            .content-slide5::-webkit-scrollbar {
-                width: 4px;
-            }
-            .content-slide4::-webkit-scrollbar-thumb,
-            .content-slide5::-webkit-scrollbar-thumb {
-                background: rgba(255,255,255,0.3);
-                border-radius: 2px;
-            }
+            .content-slide4::-webkit-scrollbar, .content-slide5::-webkit-scrollbar { width: 4px; }
+            .content-slide4::-webkit-scrollbar-thumb, .content-slide5::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
         }
 
         @media (max-width: 480px) {
@@ -537,6 +351,7 @@
             .nav { bottom: 10px; right: 10px; gap: 8px; }
             .nav button { padding: 10px 15px; font-size: 0.75rem; background: rgba(0,0,0,0.85); border: 2px solid rgba(255,255,255,0.6); }
             .slide-counter { bottom: 10px; left: 10px; font-size: 0.75rem; background: rgba(0,0,0,0.85); padding: 8px 12px; }
+            #btn-pdf { top: 10px; right: 10px; padding: 8px 12px; font-size: 0.75rem; }
         }
 
         @media (max-height: 500px) and (orientation: landscape) {
@@ -759,6 +574,15 @@
         <button id="btn-next" onclick="changeSlide(1)">NEXT</button>
     </div>
 
+    <!-- BOTÓN PDF (ARRIBA DERECHA) -->
+    <button id="btn-pdf" onclick="generatePDF()">📥 PDF</button>
+
+    <!-- OVERLAY DE CARGA -->
+    <div id="pdf-loading">
+        <div class="spinner"></div>
+        <p>El PDF se está generando...</p>
+    </div>
+
     <script>
         let currentSlide = 1;
         const totalSlides = 6;
@@ -788,6 +612,76 @@
             if (e.key === 'ArrowLeft') changeSlide(-1);
         });
 
+        // ===================== GENERADOR DE PDF =====================
+        async function generatePDF() {
+            const loadingOverlay = document.getElementById('pdf-loading');
+            const btnPdf = document.getElementById('btn-pdf');
+            
+            loadingOverlay.style.display = 'flex';
+            btnPdf.disabled = true;
+
+            try {
+                const { jsPDF } = window.jspdf;
+                // Formato horizontal 16:9 en px para máxima calidad en pantalla
+                const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [1920, 1080] });
+                
+                const slides = document.querySelectorAll('.slide');
+                const tempContainer = document.createElement('div');
+                tempContainer.style.cssText = 'position: absolute; left: -9999px; top: 0; width: 1920px; height: 1080px; z-index: -1;';
+                document.body.appendChild(tempContainer);
+
+                for (let i = 0; i < slides.length; i++) {
+                    const clone = slides[i].cloneNode(true);
+                    clone.style.display = 'flex';
+                    clone.style.width = '1920px';
+                    clone.style.height = '1080px';
+                    
+                    // Forzar estado final de animaciones
+                    const animatedElements = clone.querySelectorAll('[class*="animate-"]');
+                    animatedElements.forEach(el => {
+                        el.style.animation = 'none';
+                        el.style.opacity = '1';
+                        el.style.transform = 'none';
+                    });
+                    
+                    // Forzar overlays visibles
+                    const overlays = clone.querySelectorAll('.overlay, .overlay-slide2, .overlay-slide4, .overlay-slide5, .overlay-slide6');
+                    overlays.forEach(el => el.style.opacity = '1');
+
+                    tempContainer.innerHTML = '';
+                    tempContainer.appendChild(clone);
+
+                    // Esperar renderizado
+                    await new Promise(res => setTimeout(res, 600));
+
+                    const canvas = await html2canvas(clone, {
+                        scale: 2,
+                        useCORS: true,
+                        allowTaint: true,
+                        backgroundColor: '#050505',
+                        width: 1920,
+                        height: 1080
+                    });
+
+                    const imgData = canvas.toDataURL('image/png');
+                    pdf.addImage(imgData, 'PNG', 0, 0, 1920, 1080);
+
+                    if (i < slides.length - 1) {
+                        pdf.addPage();
+                    }
+                }
+
+                document.body.removeChild(tempContainer);
+                pdf.save('MIGUEL_PitchDeck.pdf');
+            } catch (err) {
+                console.error('Error generando PDF:', err);
+                alert('Hubo un error al generar el PDF. Por favor intenta de nuevo.');
+            } finally {
+                loadingOverlay.style.display = 'none';
+                btnPdf.disabled = false;
+            }
+        }
+
         changeSlide(0);
     </script>
 </body>