Update index.html

index.html

@@ -222,7 +222,7 @@
             background: rgba(0,0,0,0.6); padding: 8px 15px; border-radius: 5px; backdrop-filter: blur(5px);
         }
 
-        /* BOTÓN PDF: ARRIBA DERECHA FIJO */
+        /* BOTÓN PDF: ARRIBA DERECHA FIJO (DESKTOP) */
         #btn-pdf {
             position: fixed;
             top: 30px;
@@ -233,8 +233,8 @@
         /* LOADING OVERLAY - NEGRO SÓLIDO Y CAPA SUPERIOR ABSOLUTA */
         #pdf-loading {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: #000000; /* Sin transparencia, bloquea todo */
-            z-index: 99999; /* Por encima de cualquier elemento */
+            background: #000000;
+            z-index: 99999;
             display: none;
             flex-direction: column;
             justify-content: center;
@@ -309,10 +309,27 @@
             .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; }
+            
+            /* MÓVIL: Botón PDF abajo, junto a navegación */
+            #btn-pdf { 
+                top: auto; 
+                bottom: 15px; 
+                right: 160px; 
+                padding: 10px 15px; 
+                font-size: 0.8rem; 
+            }
             
             .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; }
+            
+            /* MÓVIL: Subir crédito de talishte.io para no taparlo */
+            .talishte-credit { 
+                bottom: 130px; 
+                right: 5%; 
+                left: 5%; 
+                text-align: center; 
+                font-size: 0.8rem; 
+            }
         }
 
         @media (max-width: 480px) {
@@ -335,11 +352,26 @@
             .cascada-table { font-size: 0.75rem; }
             .notas-tecnicas h3 { font-size: 1.1rem; }
             .nota-item { font-size: 0.75rem; }
-            .talishte-credit { font-size: 0.7rem; bottom: 90px; right: 5%; left: 5%; text-align: center; }
+            
             .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; }
+            
+            /* MÓVIL PEQUEÑO: Ajustar posición botón PDF y crédito */
+            #btn-pdf { 
+                bottom: 10px; 
+                right: 140px; 
+                padding: 8px 12px; 
+                font-size: 0.75rem; 
+            }
+            
+            .talishte-credit { 
+                bottom: 110px; 
+                right: 5%; 
+                left: 5%; 
+                text-align: center; 
+                font-size: 0.7rem; 
+            }
         }
 
         @media (max-height: 500px) and (orientation: landscape) {
@@ -350,6 +382,7 @@
             .nav { bottom: 10px; right: 10px; }
             .nav button { padding: 8px 12px; font-size: 0.7rem; }
             .slide-counter { bottom: 10px; left: 10px; font-size: 0.7rem; }
+            #btn-pdf { top: 10px; right: 10px; padding: 8px 12px; font-size: 0.75rem; bottom: auto; }
         }
 
         /* ===================== MODO CAPTURA PDF ===================== */
@@ -358,7 +391,7 @@
             opacity: 1 !important;
             position: fixed !important;
             top: 0 !important; left: 0 !important;
-            z-index: 1 !important; /* Siempre debajo del overlay */
+            z-index: 1 !important;
             width: 1920px !important;
             height: 1080px !important;
             transform: none !important;
@@ -558,7 +591,7 @@
             <div class="contacto-nombre animate-contact" style="animation-delay: 1.8s;">Contacto</div>
             
             <div class="contacto-item animate-contact-item">
-                <span>📞</span>
+                <span></span>
                 <a href="tel:+50248332934">+502 4833 2934</a>
             </div>
             
@@ -587,7 +620,7 @@
         <button id="btn-next" onclick="changeSlide(1)">NEXT</button>
     </div>
 
-    <!-- BOTÓN PDF (ARRIBA DERECHA) -->
+    <!-- BOTÓN PDF (ARRIBA DERECHA EN DESKTOP, ABAJO EN MÓVIL) -->
     <button id="btn-pdf" onclick="generatePDF()">Descargar en PDF</button>
 
     <!-- OVERLAY DE CARGA -->
@@ -634,15 +667,11 @@
             const slides = document.querySelectorAll('.slide');
             const originalSlide = currentSlide - 1;
 
-            // 1. Mostrar overlay INMEDIATAMENTE
             loadingOverlay.style.display = 'flex';
             btnPdf.disabled = true;
             progressText.textContent = 'Inicializando...';
 
-            // 2. Ocultar TODAS las slides para que NO se vean detrás
             slides.forEach(s => s.style.display = 'none');
-
-            // 3. Forzar repaint del navegador ANTES de procesar
             await new Promise(resolve => setTimeout(resolve, 200));
 
             try {
@@ -652,15 +681,12 @@
                 for (let i = 0; i < slides.length; i++) {
                     const slide = slides[i];
                     
-                    // Actualizar progreso y permitir repaint
                     progressText.textContent = `Procesando diapositiva ${i + 1} de ${slides.length}...`;
                     await new Promise(resolve => setTimeout(resolve, 50));
 
-                    // Activar modo captura
                     slide.classList.add('capture-mode');
                     slide.style.display = 'flex';
 
-                    // Forzar animaciones a estado final
                     const animatedElements = slide.querySelectorAll('[class*="animate-"]');
                     animatedElements.forEach(el => {
                         el.style.animation = 'none';
@@ -669,7 +695,6 @@
                         void el.offsetWidth;
                     });
 
-                    // Recolectar links
                     const links = [];
                     slide.querySelectorAll('a[href]').forEach(link => {
                         const rect = link.getBoundingClientRect();
@@ -679,10 +704,8 @@
                         }
                     });
 
-                    // Esperar renderizado
                     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]) {
@@ -698,7 +721,6 @@
                         } 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,
@@ -708,12 +730,10 @@
                     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 });
                     });
 
-                    // Ocultar slide inmediatamente después de capturar
                     slide.classList.remove('capture-mode');
                     slide.style.display = 'none';
                 }
@@ -722,7 +742,6 @@
                 await new Promise(resolve => setTimeout(resolve, 500));
                 pdf.save('MIGUEL_PitchDeck.pdf');
 
-                // Restaurar slide original
                 slides.forEach((s, idx) => {
                     s.style.display = idx === originalSlide ? 'flex' : 'none';
                 });