Update index.html

index.html

@@ -29,11 +29,11 @@
 
         .slide.active { display: flex; align-items: center; justify-content: center; }
 
-        /* OVERLAYS: Ahora empiezan invisibles */
+        /* OVERLAYS: Empiezan invisibles */
         .overlay, .overlay-slide2, .overlay-slide4, .overlay-slide5, .overlay-slide6 {
             position: absolute; top: 0; left: 0; width: 100%; height: 100%;
             z-index: 1;
-            opacity: 0; /* Invisible al cargar */
+            opacity: 0;
             pointer-events: none;
         }
 
@@ -63,97 +63,95 @@
             to { transform: scale(1.05); }
         }
 
-        /* Animación para el SOMBREADO (Overlay) */
         @keyframes fadeInOverlay {
             from { opacity: 0; }
             to { opacity: 1; }
         }
 
-        /* Clases de animación para elementos */
+        /* === TIMINGS: 1.5s de imagen limpia antes de cualquier animación === */
+        
         .animate-overlay {
             animation: fadeInOverlay 1.5s ease-out forwards;
-            animation-delay: 0.5s; /* Pequeña pausa para ver la imagen limpia */
+            animation-delay: 1.5s; /* IMAGEN LIMPIA DURANTE 1.5 SEGUNDOS */
         }
 
         .animate-title {
             opacity: 0;
             animation: fadeInUp 1s ease-out forwards;
-            animation-delay: 0.8s;
+            animation-delay: 1.8s;
         }
 
         .animate-tagline {
             opacity: 0;
             animation: fadeIn 1.2s ease-out forwards;
-            animation-delay: 0.6s;
+            animation-delay: 1.6s;
         }
 
         .animate-credits {
             opacity: 0;
             animation: fadeInUp 1s ease-out forwards;
-            animation-delay: 1.2s;
+            animation-delay: 2.2s;
         }
 
         .animate-genre {
             opacity: 0;
             animation: fadeIn 1s ease-out forwards;
-            animation-delay: 1.6s;
+            animation-delay: 2.6s;
         }
 
         .animate-text {
             opacity: 0;
             animation: slideInLeft 1s ease-out forwards;
-            animation-delay: 0.8s;
+            animation-delay: 1.8s;
         }
 
         .animate-title-slide {
             opacity: 0;
             animation: fadeInUp 0.8s ease-out forwards;
-            animation-delay: 0.6s;
+            animation-delay: 1.6s;
         }
 
         .animate-table {
             opacity: 0;
             animation: fadeIn 1.2s ease-out forwards;
-            animation-delay: 0.8s;
+            animation-delay: 1.8s;
         }
 
         .animate-notes {
             opacity: 0;
             animation: fadeInUp 1s ease-out forwards;
-            animation-delay: 1.5s;
+            animation-delay: 2.5s;
         }
 
         .animate-contact {
             opacity: 0;
             animation: slideInLeft 0.8s ease-out forwards;
-            animation-delay: 0.6s;
+            animation-delay: 1.6s;
         }
 
         .animate-contact-item {
             opacity: 0;
             animation: fadeInUp 0.6s ease-out forwards;
         }
-        .animate-contact-item:nth-child(1) { animation-delay: 1s; }
-        .animate-contact-item:nth-child(2) { animation-delay: 1.2s; }
-        .animate-contact-item:nth-child(3) { animation-delay: 1.4s; }
+        .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:nth-child(1) { animation-delay: 0.8s; }
-        .animate-miembro:nth-child(2) { animation-delay: 1s; }
-        .animate-miembro:nth-child(3) { animation-delay: 1.2s; }
+        .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: 0.8s;
+            animation-delay: 1.8s;
         }
 
         /* ===================== ESTILOS GENERALES ===================== */
-        
-        /* Slide 1 */
         .tagline-top {
             position: absolute; top: 25px; width: 100%; text-align: center;
             font-family: 'EB Garamond', serif; font-style: italic; font-size: 2rem; 
@@ -180,7 +178,6 @@
             text-shadow: 0 2px 10px rgba(0,0,0,1);
         }
 
-        /* Slide 2 */
         .overlay-slide2 {
             background: linear-gradient(to bottom, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.0) 100%);
         }
@@ -196,7 +193,6 @@
             text-align: justify; font-weight: 300; color: #f5f5f5; text-shadow: 0 2px 5px rgba(0,0,0,0.8);
         }
 
-        /* Slide 3 */
         .titulo-slide-top-right {
             font-family: 'EB Garamond', serif; font-size: 3.2rem; font-weight: 400;
             letter-spacing: 1px; text-align: right; position: absolute;
@@ -221,7 +217,6 @@
         }
         .miembro-bio { font-size: 1rem; line-height: 1.7; font-weight: 300; opacity: 0.95; }
 
-        /* Slide 4 */
         .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%);
         }
@@ -280,7 +275,6 @@
         .roi-risk { color: #fb923c; }
         .roi-low { color: #f87171; }
 
-        /* Slide 5 */
         .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%);
         }
@@ -351,7 +345,6 @@
             font-weight: 600;
         }
 
-        /* Slide 6 */
         .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%);
         }
@@ -546,7 +539,7 @@
         <div class="overlay-slide2 animate-overlay"></div>
         <div class="content-slide2">
             <h2 class="titulo-slide2 animate-text">Guatemala, 1946</h2>
-            <div class="texto-slide2 animate-text" style="animation-delay: 1s;">
+            <div class="texto-slide2 animate-text" style="animation-delay: 2.0s;">
                 El nuevo gobierno revolucionario se enfrenta a una inesperada crisis: un asesino en serie está abusando y asesinando niños de entre 10 y 15 años. Es como un fantasma: nadie le ha visto, no hay testigos. Parece algo sobrenatural. En la urgencia por detener la ola de violentos crímenes, las autoridades ofrecen al comisario Miguel un indulto por todos sus delitos durante el régimen anterior a cambio de capturar al asesino. En un sistema corrupto, la búsqueda de justicia exige las mismas manos manchadas que pretende limpiar.
             </div>
         </div>
@@ -580,7 +573,7 @@
         <div class="overlay-slide4 animate-overlay"></div>
         <div class="content-slide4">
             <h2 class="titulo-slide4 animate-title-slide">Comparables de mercado</h2>
-            <p class="subtitulo-slide4 animate-title-slide" style="animation-delay: 0.8s;">Por temática y presupuesto</p>
+            <p class="subtitulo-slide4 animate-title-slide" style="animation-delay: 1.8s;">Por temática y presupuesto</p>
             <div class="highlight-row animate-highlight">
                 <div class="highlight-box">
                     <span class="highlight-number">2.60x</span>
@@ -693,7 +686,7 @@
         <div class="content-slide6">
             <h1 class="gracias-title animate-contact">Muchas gracias</h1>
             
-            <div class="contacto-nombre animate-contact" style="animation-delay: 0.8s;">Contacto</div>
+            <div class="contacto-nombre animate-contact" style="animation-delay: 1.8s;">Contacto</div>
             
             <div class="contacto-item animate-contact-item">
                 <span>📞</span>
@@ -732,11 +725,10 @@
         function changeSlide(dir) {
             const currentEl = document.querySelector('.slide.active');
             if (currentEl) {
-                // Resetear todas las animaciones al cambiar de slide
                 const animatedElements = currentEl.querySelectorAll('.animate-overlay, .animate-title, .animate-tagline, .animate-credits, .animate-genre, .animate-text, .animate-title-slide, .animate-table, .animate-notes, .animate-contact, .animate-contact-item, .animate-miembro, .animate-highlight');
                 animatedElements.forEach(el => {
                     el.style.animation = 'none';
-                    el.offsetHeight; // Trigger reflow
+                    el.offsetHeight;
                     el.style.animation = '';
                 });
             }