update

js/config.js

@@ -167,52 +167,37 @@ function animateOnScroll(selector, animationClass, options = {}) {
   return observer;
 }
 
-/**
- * Ajusta el contenido del curso para ocupar el máximo de pantalla.
- * @function scaleWrapCourseContent
- */
 function scaleWrapCourseContent() {
   const content = document.querySelector('.wrap-course-content');
-  const mainContent = document.querySelector('#coursenav-main-content');
   if (!content) return;
 
-  const header = document.querySelector('header');
-  const footer = document.querySelector('footer');
-  const headerHeight = header ? header.offsetHeight : 0;
-  const footerHeight = footer ? footer.offsetHeight : 0;
-  
   const ww = window.innerWidth;
-  const wh = window.innerHeight - headerHeight;
+  const wh = window.innerHeight;
 
-  if (ww < 1366) {
-    const scale = Math.min(ww / 1366, wh / 768);
-    content.style.transform = `scale(${scale})`;
-    content.style.transformOrigin = 'top left';
-    content.style.width = '1366px';
-    content.style.height = '768px';
-    content.style.position = 'absolute';
-    content.style.left = (ww - 1366 * scale) / 2 + 'px';
-    content.style.top = headerHeight + (wh - 768 * scale) / 2 + 'px';
-    content.style.overflow = 'hidden';
-    
-    if (mainContent) {
-      const availableHeight = 768 - 80;
-      mainContent.style.height = availableHeight + 'px';
-    }
+  // Breakpoint a 1500px
+  let baseWidth, baseHeight;
+
+  if (ww < 1500) {
+    // Menor a 1500px: usar 1366x768
+    baseWidth = 1366;
+    baseHeight = 768;
   } else {
-    content.style.transform = '';
-    content.style.transformOrigin = '';
-    content.style.width = '100%';
-    content.style.height = '100vh';
-    content.style.position = 'relative';
-    content.style.left = '';
-    content.style.top = '';
-    content.style.overflow = 'hidden';
-    
-    if (mainContent) {
-      mainContent.style.height = `calc(100vh - ${headerHeight + footerHeight}px)`;
-    }
+    // 1500px o más: usar 1920x1080
+    baseWidth = 1920;
+    baseHeight = 1080;
   }
+
+  // Escala simple
+  const scale = Math.min(ww / baseWidth, wh / baseHeight);
+
+  content.style.transform = `scale(${scale})`;
+  content.style.transformOrigin = 'top left';
+  content.style.width = baseWidth + 'px';
+  content.style.height = baseHeight + 'px';
+  content.style.position = 'absolute';
+  content.style.left = (ww - baseWidth * scale) / 2 + 'px';
+  content.style.top = (wh - baseHeight * scale) / 2 + 'px';
+  content.style.overflow = 'hidden';
   content.style.zIndex = '1';
 }
 
@@ -300,10 +285,29 @@ function gotoFirstMenuToolSlide() {
  * @event DOMContentLoaded
  */
 document.addEventListener('DOMContentLoaded', () => {
-  // Ajustar contenido al cargar y redimensionar
+  // Escalado inicial y continuo
+  scaleWrapCourseContent();
   setTimeout(scaleWrapCourseContent, 100);
-  window.addEventListener('resize', () => setTimeout(scaleWrapCourseContent, 100));
-  
+
+  // Escalado en redimensionamiento con debounce
+  let resizeTimeout;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(scaleWrapCourseContent, 50);
+  });
+
+  // Escalado en cambio de orientación (móviles/tablets)
+  window.addEventListener('orientationchange', () => {
+    setTimeout(scaleWrapCourseContent, 200);
+  });
+
+  // Escalado cuando cambia la visibilidad (cambio de pestaña)
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden) {
+      setTimeout(scaleWrapCourseContent, 100);
+    }
+  });
+
   /**
    * Evento antes de cambiar de slide.
    * @event beforeSlideChange