Hugging Face's logo

Spaces:
Malaji71
/
miguelpitchdeck
Running

App Files Community
Malaji71 commited on
Commit
1ee7d32
·
verified ·
1 Parent(s): 8e4dc2c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +81 -98
index.html CHANGED
@@ -1,5 +1,5 @@
1
  <!DOCTYPE html>
2
- <html lang="es">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -180,7 +180,7 @@
180
  }
181
  .titulo-slide5 {
182
  font-family: 'EB Garamond', serif;
183
- font-size: 2.2rem; /* Compacto para pantalla */
184
  font-weight: 600;
185
  letter-spacing: 1px;
186
  margin-bottom: 12px;
@@ -260,7 +260,7 @@
260
  z-index: 1001;
261
  }
262
 
263
- /* LOADING OVERLAY - NEGRO SÓLIDO Y CAPA SUPERIOR ABSOLUTA */
264
  #pdf-loading {
265
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
266
  background: #000000;
@@ -429,14 +429,13 @@
429
  height: 1080px !important;
430
  }
431
 
432
- /* Forzar Slide 5 grande en PDF */
433
  body.generating-pdf .content-slide5 {
434
  max-height: none !important;
435
  overflow: visible !important;
436
  padding-bottom: 0 !important;
437
  }
438
  body.generating-pdf .titulo-slide5 {
439
- font-size: 3.2rem !important; /* Vuelve a ser grande para el PDF */
440
  margin-bottom: 15px !important;
441
  }
442
  body.generating-pdf .slide5-desc {
@@ -447,7 +446,6 @@
447
  margin-top: 45px !important;
448
  }
449
 
450
- /* Anular Mobile Styles durante captura */
451
  body.generating-pdf .bottom-controls,
452
  body.generating-pdf .slide-counter,
453
  body.generating-pdf .nav,
@@ -459,7 +457,7 @@
459
  body.generating-pdf .content-slide6 {
460
  max-height: none !important;
461
  overflow: visible !important;
462
- width: 65% !important; /* Desktop width */
463
  top: 40px !important;
464
  left: 5% !important;
465
  transform: none !important;
@@ -499,8 +497,6 @@
499
  }
500
 
501
  /* ===================== FIX ESPECÍFICO S5 Y S6 PARA PDF ===================== */
502
- /* Selectores ultra-específicos DESPUÉS de media queries para ganar cascada */
503
-
504
  body.generating-pdf .slide:nth-child(5) .titulo-slide5,
505
  body.generating-pdf .slide:nth-child(5) .content-slide5 .titulo-slide5 {
506
  font-size: 3.2rem !important;
@@ -545,7 +541,6 @@
545
  line-height: 1.6 !important;
546
  }
547
 
548
- /* === SLIDE 6 === */
549
  body.generating-pdf .slide:nth-child(6) .content-slide6 {
550
  width: 55% !important;
551
  top: 50% !important;
@@ -580,7 +575,6 @@
580
  bottom: 85px !important;
581
  }
582
 
583
- /* === OVERLAYS S5/S6 === */
584
  body.generating-pdf .overlay-slide5,
585
  body.generating-pdf .overlay-slide6 {
586
  opacity: 1 !important;
@@ -590,19 +584,19 @@
590
  </head>
591
  <body>
592
 
593
- <!-- ==================== SLIDE 1: PORTADA ==================== -->
594
  <div class="slide active" style="background-image: url('imagenes/portada.png');">
595
  <div class="overlay animate-overlay"></div>
596
- <div class="tagline-top animate-tagline">Sólo un monstruo puede cazar a otro</div>
597
  <div class="content">
598
  <h1 class="titulo-main animate-title">MIGUEL</h1>
599
  <div class="credits-bottom">
600
  <div class="credits animate-credits">
601
- <span>Una película dirigida por Jorge Gurvich</span>
602
- <span>Sobre una idea original de Juan Diego Rodríguez</span>
603
- <span>Escrita por Angel E. Pariente</span>
604
  </div>
605
- <div class="genre animate-genre">Thriller &bull; Época &bull; Hechos Reales</div>
606
  </div>
607
  </div>
608
  </div>
@@ -613,36 +607,36 @@
613
  <div class="content-slide2">
614
  <h2 class="titulo-slide2 animate-text">Guatemala, 1946</h2>
615
  <div class="texto-slide2 animate-text" style="animation-delay: 2.0s;">
616
- 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.
617
  </div>
618
  </div>
619
  </div>
620
 
621
- <!-- ==================== SLIDE 3: EQUIPO ==================== -->
622
  <div class="slide" style="background-image: url('imagenes/slide3.png');">
623
  <div class="overlay animate-overlay"></div>
624
- <h2 class="titulo-slide-top-right animate-title-slide">El talento detrás de la visión</h2>
625
  <div class="equipo-container">
626
  <div class="miembro animate-miembro">
627
  <span class="miembro-nombre">
628
- <a href="https://www.imdb.com/name/nm4602685/" target="_blank">Juan Diego Rodriguez</a>
629
  </span>
630
- <span class="miembro-rol">Idea Original y protagonista (GT)</span>
631
- <p class="miembro-bio">Con más de treinta años de experiencia profesional como actor y productor, Juan Diego es una de las caras más conocidas del panorama teatral y cinematográfico guatemalteco.</p>
632
  </div>
633
  <div class="miembro animate-miembro">
634
  <span class="miembro-nombre">
635
  <a href="https://www.imdb.com/name/nm0348791/" target="_blank">Jorge Gurvich</a>
636
  </span>
637
- <span class="miembro-rol">Director (AR)</span>
638
- <p class="miembro-bio">Con más de 30 títulos como director ("Back to Maracanã"), productor ("Mrs. Moskowitz and the Cats") y director de fotografía ("The Shower"), Jorge tiene una larga experiencia y un sólido conocimiento de las condiciones de rodaje en América Latina.</p>
639
  </div>
640
  <div class="miembro animate-miembro">
641
  <span class="miembro-nombre">
642
  <a href="https://www.imdb.com/name/nm1041140/" target="_blank">Angel E. Pariente</a>
643
  </span>
644
- <span class="miembro-rol">Guionista (ES)</span>
645
- <p class="miembro-bio">Premio Goya con una larga trayectoria profesional en cine y televisión que incluye grandes producciones como "El Cid" de Amazon Prime.</p>
646
  </div>
647
  </div>
648
  </div>
@@ -651,124 +645,124 @@
651
  <div class="slide" style="background-image: url('imagenes/slide4.png');">
652
  <div class="overlay-slide4 animate-overlay"></div>
653
  <div class="content-slide4">
654
- <h2 class="titulo-slide4 animate-title-slide">Comparables de mercado</h2>
655
- <p class="subtitulo-slide4 animate-title-slide" style="animation-delay: 1.8s;">Por temática y presupuesto</p>
656
  <div class="highlight-row animate-highlight">
657
  <div class="highlight-box">
658
  <span class="highlight-number">2.60x</span>
659
- <span class="highlight-text">ROI MEDIANO SEGMENTO</span>
660
  </div>
661
  <div class="sources-box">
662
- Fuentes: Stephen Follows, Box Office Mojo, IMDb, The Numbers, Variety, The Hollywood Reporter, PwC y Deloitte.
663
  </div>
664
  </div>
665
  <div class="table-container animate-table">
666
  <div class="table-row">
667
- <div><div class="col-movie-header"><strong>"La isla mínima"</strong> <span class="year">(2014).</span> <span class="country">ES</span></div><span class="col-movie-desc">Aborda la corrupción y la violencia en un contexto de crimen organizado.</span></div>
668
- <div class="col-budget">$3,5 M</div><div class="col-roi roi-ok">8,5x</div>
669
  </div>
670
  <div class="table-row">
671
- <div><div class="col-movie-header"><strong>"Relatos salvajes"</strong> <span class="year">(2014).</span> <span class="country">AR</span></div><span class="col-movie-desc">Explora la violencia y la corrupción en una sociedad en crisis.</span></div>
672
- <div class="col-budget">$3,5 M</div><div class="col-roi roi-good">10,5x</div>
673
  </div>
674
  <div class="table-row">
675
- <div><div class="col-movie-header"><strong>"El secreto de sus ojos"</strong> <span class="year">(2009).</span> <span class="country">AR</span></div><span class="col-movie-desc">Explora la corrupción y la justicia en un contexto de violencia política.</span></div>
676
- <div class="col-budget">$2,5 M</div><div class="col-roi roi-excellent">12,5x</div>
677
  </div>
678
  <div class="table-row">
679
- <div><div class="col-movie-header"><strong>"La jaula de oro"</strong> <span class="year">(2013).</span> <span class="country">MX</span></div><span class="col-movie-desc">Aborda la migración y la violencia en un contexto de crimen organizado.</span></div>
680
- <div class="col-budget">$2,5 M</div><div class="col-roi roi-good">9,5x</div>
681
  </div>
682
  <div class="table-row">
683
- <div><div class="col-movie-header"><strong>"Heli"</strong> <span class="year">(2013).</span> <span class="country">MX</span></div><span class="col-movie-desc">Explora la violencia y la corrupción en un contexto de crimen organizado.</span></div>
684
- <div class="col-budget">$2,5 M</div><div class="col-roi roi-risk">8x</div>
685
  </div>
686
  <div class="table-row">
687
- <div><div class="col-movie-header"><strong>"El pasajero"</strong> <span class="year">(2011).</span> <span class="country">AR</span></div><span class="col-movie-desc">Explora la corrupción y la violencia en un contexto de crimen organizado.</span></div>
688
- <div class="col-budget">$2 M</div><div class="col-roi roi-risk">7x</div>
689
  </div>
690
  <div class="table-row">
691
- <div><div class="col-movie-header"><strong>"La sombra del caminante"</strong> <span class="year">(2011).</span> <span class="country">CO</span></div><span class="col-movie-desc">Aborda la violencia y la corrupción en un contexto de conflicto armado.</span></div>
692
- <div class="col-budget">$1,5 M</div><div class="col-roi roi-low">6,5x</div>
693
  </div>
694
  <div class="table-row">
695
- <div><div class="col-movie-header"><strong>"La mujer sin cabeza"</strong> <span class="year">(2008).</span> <span class="country">AR</span></div><span class="col-movie-desc">Aborda la corrupción y la violencia en una sociedad en crisis.</span></div>
696
- <div class="col-budget">$1,5 M</div><div class="col-roi roi-low">5,5x</div>
697
  </div>
698
  <div class="table-row">
699
- <div><div class="col-movie-header"><strong style="color:#fff;">"Miguel"</strong> <span class="year">(2027).</span> <span class="country" style="color: #d4af37;">GT</span></div><span class="col-movie-desc">Película guatemalteca que aborda la corrupción en una trama de capturar a un asesino en serie.</span></div>
700
  <div class="col-budget" style="color:#fff;">$990K</div><div class="col-roi roi-excellent">12.5x <small style="font-weight:400; opacity:0.7; font-size:0.75rem;">(Est.)</small></div>
701
  </div>
702
  </div>
703
  </div>
704
  </div>
705
 
706
- <!-- ==================== SLIDE 5: ESTRUCTURA DE DISTRIBUCIÓN (WATERFALL) ==================== -->
707
  <div class="slide" style="background-image: url('imagenes/slide5.png');">
708
  <div class="overlay-slide5 animate-overlay"></div>
709
  <div class="content-slide5">
710
- <h2 class="titulo-slide5 animate-title-slide">ESTRUCTURA DE DISTRIBUCIÓN DE INGRESOS (WATERFALL)</h2>
711
  <p class="slide5-desc animate-title-slide" style="animation-delay: 1.8s;">
712
- Recuperación total del capital invertido + 15% de retorno preferente, con prioridad sobre cualquier participación de productores, seguida de una participación perpetua del 50% en beneficios netos.
713
  </p>
714
 
715
  <table class="cascada-table animate-table">
716
  <thead>
717
  <tr>
718
- <th>Nivel</th>
719
- <th>Descripción</th>
720
- <th style="text-align: right;">Escenario A</th>
721
  </tr>
722
  </thead>
723
  <tbody>
724
  <tr>
725
- <td class="col-etapa">Nivel 1</td>
726
- <td class="col-concepto">Recuperación del capital invertido (100% para inversores)</td>
727
  <td class="col-monto">$990,000</td>
728
  </tr>
729
  <tr>
730
- <td class="col-etapa">Nivel 2</td>
731
- <td class="col-concepto">Retorno preferente del 15%</td>
732
  <td class="col-monto">$148,500</td>
733
  </tr>
734
  <tr class="total-row">
735
- <td class="col-etapa">TOTAL RECUPERACIÓN</td>
736
- <td class="col-concepto">Antes de participación en beneficios netos</td>
737
  <td class="col-monto">$1,138,500</td>
738
  </tr>
739
  <tr class="fase3-row">
740
- <td class="col-etapa">Nivel 3</td>
741
- <td class="col-concepto">Participación en beneficios netos</td>
742
- <td class="col-monto">50% de los beneficios netos</td>
743
  </tr>
744
  </tbody>
745
  </table>
746
 
747
  <div class="notas-tecnicas animate-notes">
748
- <h3>Notas técnicas</h3>
749
  <div class="nota-item">
750
- <strong>Nivel 1 — Prioridad de pago</strong>
751
- Los inversores ocupan la primera posición en la estructura de distribución de ingresos (después de impuestos y comisiones de agentes de ventas), recibiendo la devolución íntegra del capital invertido antes de cualquier pago diferido a productores.
752
  </div>
753
  <div class="nota-item">
754
- <strong>Nivel 2 — Retorno preferente del 15%</strong>
755
- Se abona un retorno preferente del 15% sobre el capital invertido una vez que la película genere ingresos suficientes.
756
  </div>
757
  <div class="nota-item">
758
- <strong>Nivel 3 — Participación en beneficios netos</strong>
759
- A partir de este punto, el grupo de inversores retiene, de forma perpetua, el derecho al 50% de todos los ingresos adicionales generados por la producción. Esta participación se distribuye de forma proporcional entre los inversores según su aportación al presupuesto total. El 50% restante (beneficio neto de productores) queda reservado para la productora, el talento y los participantes creativos.
760
  </div>
761
  </div>
762
  </div>
763
  </div>
764
 
765
- <!-- ==================== SLIDE 6: CIERRE/CONTACTO ==================== -->
766
  <div class="slide" style="background-image: url('imagenes/slide6.png');">
767
  <div class="overlay-slide6 animate-overlay"></div>
768
  <div class="content-slide6">
769
- <h1 class="gracias-title animate-contact">Muchas gracias</h1>
770
 
771
- <div class="contacto-nombre animate-contact" style="animation-delay: 1.8s;">Contacto</div>
772
 
773
  <div class="contacto-item animate-contact-item">
774
  <span></span>
@@ -783,20 +777,20 @@
783
  </div>
784
 
785
  <div class="contacto-item animate-contact-item">
786
- <span>️</span>
787
  <a href="mailto:info@talishte.io">info@talishte.io</a>
788
  </div>
789
  </div>
790
 
791
  <div class="talishte-credit">
792
- Este pitch deck ha sido desarrollado íntegramente por <a href="https://talishte.io" target="_blank">talishte.io</a>
793
  </div>
794
  </div>
795
 
796
  <!-- BARRA INFERIOR UNIFICADA -->
797
  <div class="bottom-controls">
798
  <div class="slide-counter"><span id="current">1</span> / 6</div>
799
- <button id="btn-pdf" onclick="generatePDF()">Descargar en PDF</button>
800
  <div class="nav">
801
  <button id="btn-prev" onclick="changeSlide(-1)">PREV</button>
802
  <button id="btn-next" onclick="changeSlide(1)">NEXT</button>
@@ -806,8 +800,8 @@
806
  <!-- OVERLAY DE CARGA -->
807
  <div id="pdf-loading">
808
  <div class="spinner"></div>
809
- <p>Generando PDF...</p>
810
- <div class="progress-text" id="progress-text">Preparando diapositivas</div>
811
  </div>
812
 
813
  <script>
@@ -839,7 +833,7 @@
839
  if (e.key === 'ArrowLeft') changeSlide(-1);
840
  });
841
 
842
- // ===================== GENERADOR DE PDF - FORZADO DESKTOP =====================
843
  async function generatePDF() {
844
  const loadingOverlay = document.getElementById('pdf-loading');
845
  const progressText = document.getElementById('progress-text');
@@ -849,15 +843,10 @@
849
 
850
  loadingOverlay.style.display = 'flex';
851
  btnPdf.disabled = true;
852
- progressText.textContent = 'Inicializando...';
853
 
854
- // 1. ACTIVAR MODO GHOST (Fuerza estilos desktop y tamaño de fuente)
855
  document.body.classList.add('generating-pdf');
856
-
857
- // Esperar a que el CSS tome efecto antes de ocultar
858
  await new Promise(resolve => setTimeout(resolve, 500));
859
-
860
- // 2. Ocultar slides
861
  slides.forEach(s => s.style.display = 'none');
862
  await new Promise(resolve => setTimeout(resolve, 200));
863
 
@@ -867,14 +856,12 @@
867
 
868
  for (let i = 0; i < slides.length; i++) {
869
  const slide = slides[i];
870
-
871
- progressText.textContent = `Procesando diapositiva ${i + 1} de ${slides.length}...`;
872
  await new Promise(resolve => setTimeout(resolve, 50));
873
 
874
  slide.classList.add('capture-mode');
875
  slide.style.display = 'flex';
876
 
877
- // Forzar animaciones a estado final
878
  const animatedElements = slide.querySelectorAll('[class*="animate-"]');
879
  animatedElements.forEach(el => {
880
  el.style.animation = 'none';
@@ -883,7 +870,6 @@
883
  void el.offsetWidth;
884
  });
885
 
886
- // Recolectar links
887
  const links = [];
888
  slide.querySelectorAll('a[href]').forEach(link => {
889
  const rect = link.getBoundingClientRect();
@@ -895,7 +881,7 @@
895
 
896
  await new Promise(resolve => setTimeout(resolve, 1500));
897
 
898
- // === FIX VIEWPORT: Forzar meta viewport para evitar media queries móviles ===
899
  const originalMetaViewport = document.querySelector('meta[name="viewport"]');
900
  const tempMeta = document.createElement('meta');
901
  tempMeta.name = 'viewport';
@@ -906,7 +892,6 @@
906
  document.head.appendChild(tempMeta);
907
  }
908
 
909
- // Convertir bg a base64
910
  const bgStyle = window.getComputedStyle(slide).backgroundImage;
911
  const urlMatch = bgStyle.match(/url\(["']?(.*?)["']?\)/);
912
  if (urlMatch && urlMatch[1]) {
@@ -922,7 +907,6 @@
922
  } catch (e) { console.warn("BG conversion failed:", e); }
923
  }
924
 
925
- // Capturar
926
  const canvas = await html2canvas(slide, {
927
  scale: 1,
928
  useCORS: false,
@@ -931,7 +915,7 @@
931
  logging: false,
932
  width: 1920,
933
  height: 1080,
934
- windowWidth: 1920, // Fuerza ancho de ventana para evitar media queries de móvil
935
  windowHeight: 1080,
936
  scrollX: 0,
937
  scrollY: 0,
@@ -941,7 +925,7 @@
941
  removeContainer: true
942
  });
943
 
944
- // === RESTAURAR viewport original DESPUÉS de capturar ===
945
  await new Promise(resolve => setTimeout(resolve, 100));
946
  if (originalMetaViewport) {
947
  if (tempMeta.parentNode) {
@@ -964,21 +948,20 @@
964
  slide.style.display = 'none';
965
  }
966
 
967
- progressText.textContent = 'Finalizando y descargando...';
968
  await new Promise(resolve => setTimeout(resolve, 500));
969
- pdf.save('MIGUEL_PitchDeck.pdf');
970
 
971
  slides.forEach((s, idx) => {
972
  s.style.display = idx === originalSlide ? 'flex' : 'none';
973
  });
974
 
975
- // Desactivar modo ghost
976
  document.body.classList.remove('generating-pdf');
977
  setTimeout(() => location.reload(), 1000);
978
 
979
  } catch (err) {
980
  console.error('Error:', err);
981
- alert('Error al generar PDF: ' + err.message);
982
  } finally {
983
  loadingOverlay.style.display = 'none';
984
  btnPdf.disabled = false;
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
180
  }
181
  .titulo-slide5 {
182
  font-family: 'EB Garamond', serif;
183
+ font-size: 2.2rem;
184
  font-weight: 600;
185
  letter-spacing: 1px;
186
  margin-bottom: 12px;
 
260
  z-index: 1001;
261
  }
262
 
263
+ /* LOADING OVERLAY */
264
  #pdf-loading {
265
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
266
  background: #000000;
 
429
  height: 1080px !important;
430
  }
431
 
 
432
  body.generating-pdf .content-slide5 {
433
  max-height: none !important;
434
  overflow: visible !important;
435
  padding-bottom: 0 !important;
436
  }
437
  body.generating-pdf .titulo-slide5 {
438
+ font-size: 3.2rem !important;
439
  margin-bottom: 15px !important;
440
  }
441
  body.generating-pdf .slide5-desc {
 
446
  margin-top: 45px !important;
447
  }
448
 
 
449
  body.generating-pdf .bottom-controls,
450
  body.generating-pdf .slide-counter,
451
  body.generating-pdf .nav,
 
457
  body.generating-pdf .content-slide6 {
458
  max-height: none !important;
459
  overflow: visible !important;
460
+ width: 65% !important;
461
  top: 40px !important;
462
  left: 5% !important;
463
  transform: none !important;
 
497
  }
498
 
499
  /* ===================== FIX ESPECÍFICO S5 Y S6 PARA PDF ===================== */
 
 
500
  body.generating-pdf .slide:nth-child(5) .titulo-slide5,
501
  body.generating-pdf .slide:nth-child(5) .content-slide5 .titulo-slide5 {
502
  font-size: 3.2rem !important;
 
541
  line-height: 1.6 !important;
542
  }
543
 
 
544
  body.generating-pdf .slide:nth-child(6) .content-slide6 {
545
  width: 55% !important;
546
  top: 50% !important;
 
575
  bottom: 85px !important;
576
  }
577
 
 
578
  body.generating-pdf .overlay-slide5,
579
  body.generating-pdf .overlay-slide6 {
580
  opacity: 1 !important;
 
584
  </head>
585
  <body>
586
 
587
+ <!-- ==================== SLIDE 1: HOME ==================== -->
588
  <div class="slide active" style="background-image: url('imagenes/portada.png');">
589
  <div class="overlay animate-overlay"></div>
590
+ <div class="tagline-top animate-tagline">Only a monster can hunt another.</div>
591
  <div class="content">
592
  <h1 class="titulo-main animate-title">MIGUEL</h1>
593
  <div class="credits-bottom">
594
  <div class="credits animate-credits">
595
+ <span>A film directed by Jorge Gurvich</span>
596
+ <span>Based on an original concept by Juan Diego Rodríguez</span>
597
+ <span>Written by Angel E. Pariente</span>
598
  </div>
599
+ <div class="genre animate-genre">THRILLER • PERIOD PIECE • BASED ON TRUE EVENTS</div>
600
  </div>
601
  </div>
602
  </div>
 
607
  <div class="content-slide2">
608
  <h2 class="titulo-slide2 animate-text">Guatemala, 1946</h2>
609
  <div class="texto-slide2 animate-text" style="animation-delay: 2.0s;">
610
+ The newly formed revolutionary government is facing an unexpected crisis: a serial killer is abusing and murdering children between the ages of 10 and 15. He is a ghost. No one has seen him, there are no witnesses. It feels almost unexplainable. In a desperate attempt to stop the killings, the authorities offer Commissioner Miguel a full pardon for all crimes committed under the previous regime in exchange for capturing the killer. In a corrupt system, the pursuit of justice demands the same stained hands it seeks to cleanse.
611
  </div>
612
  </div>
613
  </div>
614
 
615
+ <!-- ==================== SLIDE 3: TEAM ==================== -->
616
  <div class="slide" style="background-image: url('imagenes/slide3.png');">
617
  <div class="overlay animate-overlay"></div>
618
+ <h2 class="titulo-slide-top-right animate-title-slide">The Talent behind the Vision</h2>
619
  <div class="equipo-container">
620
  <div class="miembro animate-miembro">
621
  <span class="miembro-nombre">
622
+ <a href="https://www.imdb.com/name/nm4602685/" target="_blank">Juan Diego Rodríguez</a>
623
  </span>
624
+ <span class="miembro-rol">ORIGINAL CONCEPT & LEAD ACTOR (GT)</span>
625
+ <p class="miembro-bio">With over thirty years of experience as an actor and producer, Juan Diego is one of the most recognized names in Guatemalan theater and cinema.</p>
626
  </div>
627
  <div class="miembro animate-miembro">
628
  <span class="miembro-nombre">
629
  <a href="https://www.imdb.com/name/nm0348791/" target="_blank">Jorge Gurvich</a>
630
  </span>
631
+ <span class="miembro-rol">DIRECTOR (AR)</span>
632
+ <p class="miembro-bio">With more than 30 credits as director (Back to Maracanã), producer (Mrs. Moskowitz and the Cats), and cinematographer (The Shower), Jorge brings extensive experience and a strong command of production across Latin America's production landscape.</p>
633
  </div>
634
  <div class="miembro animate-miembro">
635
  <span class="miembro-nombre">
636
  <a href="https://www.imdb.com/name/nm1041140/" target="_blank">Angel E. Pariente</a>
637
  </span>
638
+ <span class="miembro-rol">SCREENWRITER (ES)</span>
639
+ <p class="miembro-bio">Goya Award–winning writer with an extensive career in film and television, including major productions such as El Cid.</p>
640
  </div>
641
  </div>
642
  </div>
 
645
  <div class="slide" style="background-image: url('imagenes/slide4.png');">
646
  <div class="overlay-slide4 animate-overlay"></div>
647
  <div class="content-slide4">
648
+ <h2 class="titulo-slide4 animate-title-slide">Market Comparables</h2>
649
+ <p class="subtitulo-slide4 animate-title-slide" style="animation-delay: 1.8s;">BY THEME AND BUDGET</p>
650
  <div class="highlight-row animate-highlight">
651
  <div class="highlight-box">
652
  <span class="highlight-number">2.60x</span>
653
+ <span class="highlight-text">MEDIAN ROI. COMPARABLE SEGMENT</span>
654
  </div>
655
  <div class="sources-box">
656
+ Sources: Stephen Follows, Box Office Mojo, IMDb, The Numbers, Variety, The Hollywood Reporter, PwC, and Deloitte.
657
  </div>
658
  </div>
659
  <div class="table-container animate-table">
660
  <div class="table-row">
661
+ <div><div class="col-movie-header"><strong>"Marshland"</strong> <span class="year">(2014).</span> <span class="country">ES</span></div><span class="col-movie-desc">Corruption and violence within an organized crime setting.</span></div>
662
+ <div class="col-budget">$3.5M</div><div class="col-roi roi-ok">8.5x</div>
663
  </div>
664
  <div class="table-row">
665
+ <div><div class="col-movie-header"><strong>"Wild Tales"</strong> <span class="year">(2014).</span> <span class="country">AR</span></div><span class="col-movie-desc">Violence and corruption in a society under pressure.</span></div>
666
+ <div class="col-budget">$3.5M</div><div class="col-roi roi-good">10.5x</div>
667
  </div>
668
  <div class="table-row">
669
+ <div><div class="col-movie-header"><strong>"The Secret in Their Eyes"</strong> <span class="year">(2009).</span> <span class="country">AR</span></div><span class="col-movie-desc">Corruption and justice against a backdrop of political violence.</span></div>
670
+ <div class="col-budget">$2.5M</div><div class="col-roi roi-excellent">12.5x</div>
671
  </div>
672
  <div class="table-row">
673
+ <div><div class="col-movie-header"><strong>"The Golden Dream"</strong> <span class="year">(2013).</span> <span class="country">MX</span></div><span class="col-movie-desc">Migration and violence within an organized crime context.</span></div>
674
+ <div class="col-budget">$2.5M</div><div class="col-roi roi-good">9.5x</div>
675
  </div>
676
  <div class="table-row">
677
+ <div><div class="col-movie-header"><strong>"Heli"</strong> <span class="year">(2013).</span> <span class="country">MX</span></div><span class="col-movie-desc">Violence and corruption within organized crime.</span></div>
678
+ <div class="col-budget">$2.5M</div><div class="col-roi roi-risk">8.0x</div>
679
  </div>
680
  <div class="table-row">
681
+ <div><div class="col-movie-header"><strong>"The Passenger"</strong> <span class="year">(2011).</span> <span class="country">AR</span></div><span class="col-movie-desc">Corruption and violence within an organized crime context.</span></div>
682
+ <div class="col-budget">$2.0M</div><div class="col-roi roi-risk">7.0x</div>
683
  </div>
684
  <div class="table-row">
685
+ <div><div class="col-movie-header"><strong>"The Shadow of the Walker"</strong> <span class="year">(2011).</span> <span class="country">CO</span></div><span class="col-movie-desc">Violence and corruption in the context of armed conflict.</span></div>
686
+ <div class="col-budget">$1.5M</div><div class="col-roi roi-low">6.5x</div>
687
  </div>
688
  <div class="table-row">
689
+ <div><div class="col-movie-header"><strong>"The Headless Woman"</strong> <span class="year">(2008).</span> <span class="country">AR</span></div><span class="col-movie-desc">Corruption and violence in a society in crisis.</span></div>
690
+ <div class="col-budget">$1.5M</div><div class="col-roi roi-low">5.5x</div>
691
  </div>
692
  <div class="table-row">
693
+ <div><div class="col-movie-header"><strong style="color:#fff;">"MIGUEL"</strong> <span class="year">(2027).</span> <span class="country" style="color: #d4af37;">GT</span></div><span class="col-movie-desc">Guatemalan thriller centered on corruption and the hunt for a serial killer.</span></div>
694
  <div class="col-budget" style="color:#fff;">$990K</div><div class="col-roi roi-excellent">12.5x <small style="font-weight:400; opacity:0.7; font-size:0.75rem;">(Est.)</small></div>
695
  </div>
696
  </div>
697
  </div>
698
  </div>
699
 
700
+ <!-- ==================== SLIDE 5: WATERFALL ==================== -->
701
  <div class="slide" style="background-image: url('imagenes/slide5.png');">
702
  <div class="overlay-slide5 animate-overlay"></div>
703
  <div class="content-slide5">
704
+ <h2 class="titulo-slide5 animate-title-slide">INVESTOR RETURN WATERFALL</h2>
705
  <p class="slide5-desc animate-title-slide" style="animation-delay: 1.8s;">
706
+ Full principal recoupment + 15% preferred return prior to producer participation, followed by perpetual 50% back-end participation.
707
  </p>
708
 
709
  <table class="cascada-table animate-table">
710
  <thead>
711
  <tr>
712
+ <th>WATERFALL STAGE</th>
713
+ <th>DESCRIPTION</th>
714
+ <th style="text-align: right;">SCENARIO A</th>
715
  </tr>
716
  </thead>
717
  <tbody>
718
  <tr>
719
+ <td class="col-etapa">Tier 1</td>
720
+ <td class="col-concepto">Return of Invested Capital (100% to Investors)</td>
721
  <td class="col-monto">$990,000</td>
722
  </tr>
723
  <tr>
724
+ <td class="col-etapa">Tier 2</td>
725
+ <td class="col-concepto">15% Preferred Return</td>
726
  <td class="col-monto">$148,500</td>
727
  </tr>
728
  <tr class="total-row">
729
+ <td class="col-etapa">TOTAL RECOUPMENT</td>
730
+ <td class="col-concepto">Total Before Net Profit Participation</td>
731
  <td class="col-monto">$1,138,500</td>
732
  </tr>
733
  <tr class="fase3-row">
734
+ <td class="col-etapa">Tier 3</td>
735
+ <td class="col-concepto">Net Profit Participation</td>
736
+ <td class="col-monto">50% of Net Profits</td>
737
  </tr>
738
  </tbody>
739
  </table>
740
 
741
  <div class="notas-tecnicas animate-notes">
742
+ <h3>Technical Notes</h3>
743
  <div class="nota-item">
744
+ <strong>Tier 1 — Payment Priority</strong>
745
+ Investors hold first position in the recoupment waterfall (following taxes and sales agent commissions), receiving a full return of invested capital before any deferred producer fees are paid.
746
  </div>
747
  <div class="nota-item">
748
+ <strong>Tier 2 — 15% Preferred Return</strong>
749
+ A 15% preferred return is payable on invested capital once the picture generates sufficient revenues.
750
  </div>
751
  <div class="nota-item">
752
+ <strong>Tier 3 — Back-End Profit Participation</strong>
753
+ At this stage, the Investor Pool shall retain, in perpetuity, the right to 50% of every additional dollar received by the production. This participation shall be distributed pro rata among Pool members, based on each investor's percentage contribution to the total production budget. The remaining 50% (Producer Net Profits) shall be reserved for the production company, talent, and creative participants.
754
  </div>
755
  </div>
756
  </div>
757
  </div>
758
 
759
+ <!-- ==================== SLIDE 6: THANK YOU ==================== -->
760
  <div class="slide" style="background-image: url('imagenes/slide6.png');">
761
  <div class="overlay-slide6 animate-overlay"></div>
762
  <div class="content-slide6">
763
+ <h1 class="gracias-title animate-contact">Thank you</h1>
764
 
765
+ <div class="contacto-nombre animate-contact" style="animation-delay: 1.8s;">Contact</div>
766
 
767
  <div class="contacto-item animate-contact-item">
768
  <span></span>
 
777
  </div>
778
 
779
  <div class="contacto-item animate-contact-item">
780
+ <span>✉️</span>
781
  <a href="mailto:info@talishte.io">info@talishte.io</a>
782
  </div>
783
  </div>
784
 
785
  <div class="talishte-credit">
786
+ This pitch deck has been fully developed by <a href="https://talishte.io" target="_blank">talishte.io</a>
787
  </div>
788
  </div>
789
 
790
  <!-- BARRA INFERIOR UNIFICADA -->
791
  <div class="bottom-controls">
792
  <div class="slide-counter"><span id="current">1</span> / 6</div>
793
+ <button id="btn-pdf" onclick="generatePDF()">Download PDF</button>
794
  <div class="nav">
795
  <button id="btn-prev" onclick="changeSlide(-1)">PREV</button>
796
  <button id="btn-next" onclick="changeSlide(1)">NEXT</button>
 
800
  <!-- OVERLAY DE CARGA -->
801
  <div id="pdf-loading">
802
  <div class="spinner"></div>
803
+ <p>Generating PDF...</p>
804
+ <div class="progress-text" id="progress-text">Preparing slides</div>
805
  </div>
806
 
807
  <script>
 
833
  if (e.key === 'ArrowLeft') changeSlide(-1);
834
  });
835
 
836
+ // ===================== PDF GENERATOR - DESKTOP FORCED =====================
837
  async function generatePDF() {
838
  const loadingOverlay = document.getElementById('pdf-loading');
839
  const progressText = document.getElementById('progress-text');
 
843
 
844
  loadingOverlay.style.display = 'flex';
845
  btnPdf.disabled = true;
846
+ progressText.textContent = 'Initializing...';
847
 
 
848
  document.body.classList.add('generating-pdf');
 
 
849
  await new Promise(resolve => setTimeout(resolve, 500));
 
 
850
  slides.forEach(s => s.style.display = 'none');
851
  await new Promise(resolve => setTimeout(resolve, 200));
852
 
 
856
 
857
  for (let i = 0; i < slides.length; i++) {
858
  const slide = slides[i];
859
+ progressText.textContent = `Processing slide ${i + 1} of ${slides.length}...`;
 
860
  await new Promise(resolve => setTimeout(resolve, 50));
861
 
862
  slide.classList.add('capture-mode');
863
  slide.style.display = 'flex';
864
 
 
865
  const animatedElements = slide.querySelectorAll('[class*="animate-"]');
866
  animatedElements.forEach(el => {
867
  el.style.animation = 'none';
 
870
  void el.offsetWidth;
871
  });
872
 
 
873
  const links = [];
874
  slide.querySelectorAll('a[href]').forEach(link => {
875
  const rect = link.getBoundingClientRect();
 
881
 
882
  await new Promise(resolve => setTimeout(resolve, 1500));
883
 
884
+ // === FIX VIEWPORT: Force desktop viewport during capture ===
885
  const originalMetaViewport = document.querySelector('meta[name="viewport"]');
886
  const tempMeta = document.createElement('meta');
887
  tempMeta.name = 'viewport';
 
892
  document.head.appendChild(tempMeta);
893
  }
894
 
 
895
  const bgStyle = window.getComputedStyle(slide).backgroundImage;
896
  const urlMatch = bgStyle.match(/url\(["']?(.*?)["']?\)/);
897
  if (urlMatch && urlMatch[1]) {
 
907
  } catch (e) { console.warn("BG conversion failed:", e); }
908
  }
909
 
 
910
  const canvas = await html2canvas(slide, {
911
  scale: 1,
912
  useCORS: false,
 
915
  logging: false,
916
  width: 1920,
917
  height: 1080,
918
+ windowWidth: 1920,
919
  windowHeight: 1080,
920
  scrollX: 0,
921
  scrollY: 0,
 
925
  removeContainer: true
926
  });
927
 
928
+ // === RESTORE original viewport ===
929
  await new Promise(resolve => setTimeout(resolve, 100));
930
  if (originalMetaViewport) {
931
  if (tempMeta.parentNode) {
 
948
  slide.style.display = 'none';
949
  }
950
 
951
+ progressText.textContent = 'Finalizing and downloading...';
952
  await new Promise(resolve => setTimeout(resolve, 500));
953
+ pdf.save('MIGUEL_PitchDeck_EN.pdf');
954
 
955
  slides.forEach((s, idx) => {
956
  s.style.display = idx === originalSlide ? 'flex' : 'none';
957
  });
958
 
 
959
  document.body.classList.remove('generating-pdf');
960
  setTimeout(() => location.reload(), 1000);
961
 
962
  } catch (err) {
963
  console.error('Error:', err);
964
+ alert('Error generating PDF: ' + err.message);
965
  } finally {
966
  loadingOverlay.style.display = 'none';
967
  btnPdf.disabled = false;