Update index.html

index.html

@@ -166,32 +166,46 @@
         .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; }
+        /* Ajustes clave para SCROLL y TAMAÑO */
+        .content-slide5 { 
+            position: absolute; 
+            top: 20px; 
+            left: 5%; 
+            width: 65%; 
+            z-index: 10; 
+            max-height: 85vh; /* Permite scroll si es necesario */
+            overflow-y: auto; /* Activa scroll vertical */
+            padding-bottom: 50px; /* Espacio al final del scroll */
+        }
         .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);
+            font-family: 'EB Garamond', serif; 
+            font-size: 2.2rem; /* REDUCIDO: de 3.5rem a 2.2rem */
+            font-weight: 600;
+            letter-spacing: 1px; 
+            margin-bottom: 15px; /* Menor margen inferior */
+            text-shadow: 0 4px 15px rgba(0,0,0,0.9);
         }
         .slide5-desc {
-            font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.6;
-            margin-bottom: 25px; color: #ddd; opacity: 0.9;
+            font-family: 'Manrope', sans-serif; font-size: 0.95rem; line-height: 1.6;
+            margin-bottom: 20px; color: #ddd; opacity: 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.9rem; }
+        .cascada-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid rgba(255,255,255,0.3); font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: #ccc; }
+        .cascada-table td { padding: 10px 12px; 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: 1rem; }
         .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 .total-row .col-monto { color: #fbbf24; font-size: 1.05rem; }
         .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);
+            padding: 15px; margin-top: 20px; /* Menor margen superior */
         }
-        .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; }
+        .notas-tecnicas h3 { font-family: 'EB Garamond', serif; font-size: 1.2rem; margin-bottom: 10px; color: #fff; font-weight: 600; }
+        .nota-item { margin-bottom: 12px; font-size: 0.8rem; line-height: 1.5; color: #ccc; }
+        .nota-item strong { color: #fff; display: block; margin-bottom: 4px; 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; }
@@ -213,7 +227,7 @@
             position: fixed;
             bottom: 0; left: 0; width: 100%;
             z-index: 1000;
-            pointer-events: none; /* Permite clicks a través de los huecos */
+            pointer-events: none;
         }
         .bottom-controls > * { pointer-events: auto; }
 
@@ -283,7 +297,7 @@
             .titulo-main { font-size: 6rem; letter-spacing: 15px; }
             .titulo-slide2 { font-size: 3.5rem; }
             .titulo-slide4 { font-size: 2.5rem; }
-            .titulo-slide5 { font-size: 2.8rem; }
+            .titulo-slide5 { font-size: 2rem; } /* Más pequeño en tablet */
             .gracias-title { font-size: 3.5rem; }
             .equipo-container { grid-template-columns: 1fr 1fr; gap: 20px; }
             .table-row { grid-template-columns: 1.8fr 0.8fr 0.7fr; }
@@ -312,7 +326,7 @@
             }
             .content-slide6 { width: 90%; left: 5%; }
             .titulo-slide4 { font-size: 1.8rem; }
-            .titulo-slide5 { font-size: 2rem; }
+            .titulo-slide5 { font-size: 1.6rem; } /* Más pequeño en móvil */
             .gracias-title { font-size: 2.5rem; margin-bottom: 30px; }
             .contacto-nombre { font-size: 1.4rem; }
             .table-row { grid-template-columns: 1fr; gap: 5px; padding: 10px 0; }
@@ -320,7 +334,7 @@
             .col-movie-desc { font-size: 0.7rem; }
             .cascada-table { font-size: 0.85rem; }
             .cascada-table th, .cascada-table td { padding: 8px 10px; }
-            .notas-tecnicas { margin-top: 60px; padding: 15px; }
+            .notas-tecnicas { margin-top: 15px; padding: 12px; }
             
             /* MÓVIL: BARRA INFERIOR FLEX UNIFICADA */
             .bottom-controls {
@@ -375,7 +389,7 @@
             .titulo-slide-top-right { font-size: 1.4rem; }
             .miembro-nombre { font-size: 1.2rem; }
             .miembro-bio { font-size: 0.85rem; }
-            .titulo-slide4, .titulo-slide5 { font-size: 1.6rem; }
+            .titulo-slide4, .titulo-slide5 { font-size: 1.5rem; }
             .highlight-number { font-size: 1.8rem; }
             .highlight-text { font-size: 0.7rem; }
             .gracias-title { font-size: 2rem; letter-spacing: 2px; }
@@ -383,8 +397,8 @@
             .whatsapp-icon { width: 20px; height: 20px; }
             .table-row { font-size: 0.8rem; }
             .cascada-table { font-size: 0.75rem; }
-            .notas-tecnicas h3 { font-size: 1.1rem; }
-            .nota-item { font-size: 0.75rem; }
+            .notas-tecnicas h3 { font-size: 1rem; }
+            .nota-item { font-size: 0.7rem; }
             
             .bottom-controls { bottom: 10px; padding: 0 10px; }
             .slide-counter { padding: 5px 8px; font-size: 0.7rem; }
@@ -682,7 +696,7 @@
             if (e.key === 'ArrowLeft') changeSlide(-1);
         });
 
-        // ===================== GENERADOR DE PDF - UX OPTIMIZADA =====================
+        // ===================== GENERADOR DE PDF - CON MANEJO DE SCROLL =====================
         async function generatePDF() {
             const loadingOverlay = document.getElementById('pdf-loading');
             const progressText = document.getElementById('progress-text');
@@ -710,6 +724,20 @@
                     slide.classList.add('capture-mode');
                     slide.style.display = 'flex';
 
+                    // TRUCO PARA SLIDE 5: Expandir altura para capturar todo el texto
+                    const contentSlide5 = slide.querySelector('.content-slide5');
+                    let originalMaxHeight = '';
+                    let originalOverflow = '';
+                    
+                    if (contentSlide5) {
+                        originalMaxHeight = contentSlide5.style.maxHeight;
+                        originalOverflow = contentSlide5.style.overflow;
+                        // Expande el contenedor al 100% del contenido para que html2canvas lo vea todo
+                        contentSlide5.style.maxHeight = 'none';
+                        contentSlide5.style.overflow = 'visible';
+                    }
+
+                    // Forzar animaciones a estado final
                     const animatedElements = slide.querySelectorAll('[class*="animate-"]');
                     animatedElements.forEach(el => {
                         el.style.animation = 'none';
@@ -718,6 +746,7 @@
                         void el.offsetWidth;
                     });
 
+                    // Recolectar links
                     const links = [];
                     slide.querySelectorAll('a[href]').forEach(link => {
                         const rect = link.getBoundingClientRect();
@@ -727,8 +756,10 @@
                         }
                     });
 
+                    // Esperar renderizado (un poco más para asegurar carga de fuentes expandidas)
                     await new Promise(resolve => setTimeout(resolve, 1500));
 
+                    // Convertir bg a base64
                     const bgStyle = window.getComputedStyle(slide).backgroundImage;
                     const urlMatch = bgStyle.match(/url\(["']?(.*?)["']?\)/);
                     if (urlMatch && urlMatch[1]) {
@@ -744,15 +775,23 @@
                         } catch (e) { console.warn("BG conversion failed:", e); }
                     }
 
+                    // Capturar
                     const canvas = await html2canvas(slide, {
                         scale: 1, useCORS: false, allowTaint: false, backgroundColor: '#050505',
                         logging: false, width: 1920, height: 1080, windowWidth: 1920, windowHeight: 1080,
                         scrollX: 0, scrollY: 0, x: 0, y: 0, foreignObjectRendering: true, removeContainer: true
                     });
 
+                    // Restaurar estilos de scroll inmediatamente después de capturar
+                    if (contentSlide5) {
+                        contentSlide5.style.maxHeight = originalMaxHeight;
+                        contentSlide5.style.overflow = originalOverflow;
+                    }
+
                     if (i > 0) pdf.addPage();
                     pdf.addImage(canvas.toDataURL('image/jpeg', 0.95), 'JPEG', 0, 0, 1920, 1080, undefined, 'FAST');
 
+                    // Agregar links
                     links.forEach(link => {
                         pdf.link(link.x, link.y, link.width, link.height, { url: link.url });
                     });