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

js/jquery.flip.min.js

@@ -0,0 +1,6 @@
+/*! flip - v1.0.11 - 2015-07-13
+* https://github.com/nnattawat/flip
+* Copyright (c) 2015 Nattawat Nonsung; Licensed MIT */
+
+!function(a){var b=function(a){a.data("flipped",!0);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+(a.data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}),a.find(a.data("back")).css({transform:b+"(0deg)","z-index":"1"})},c=function(a){a.data("flipped",!1);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+"(0deg)","z-index":"1"}),a.find(a.data("back")).css({transform:b+(a.data("reverse")?"(180deg)":"(-180deg)"),"z-index":"0"})},d=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]};a.fn.flip=function(f,g){return"function"==typeof f&&(g=f),this.each(function(){var h=a(this);if(void 0===f||"boolean"!=typeof f&&"string"!=typeof f)if(h.data("initiated"))void 0!==f.axis&&e.call(this,f.axis,g);else{h.data("initiated",!0);var i=a.extend({axis:"y",reverse:!1,trigger:"click",speed:500,forceHeight:!1,forceWidth:!1,autoSize:!0,front:"auto",back:"auto"},f);"auto"==i.front?i.front=h.find(".front").length>0?".front":"div:first-child":"autostrict"==i.front&&(i.front="div:first-child"),"auto"==i.back?i.back=h.find(".back").length>0?".back":"div:first-child + div":"autostrict"==i.back&&(i.back="div:first-child + div"),h.data("reverse",i.reverse),h.data("axis",i.axis),h.data("front",i.front),h.data("back",i.back);var j="rotate"+("x"==i.axis.toLowerCase()?"x":"y"),k=2*h["outer"+("rotatex"==j?"Height":"Width")]();h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")"}),h.css({perspective:k,position:"relative"});var l=i.speed/1e3||.5,m=h.find(i.front).add(i.back,h);if(i.forceHeight?m.outerHeight(h.height()):i.autoSize&&m.css({height:"100%"}),i.forceWidth?m.outerWidth(h.width()):i.autoSize&&m.css({width:"100%"}),m.css({"backface-visibility":"hidden","transform-style":"preserve-3d",position:"absolute","z-index":"1"}),h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){m.css({transition:"all "+l+"s ease-out"}),void 0!==g&&g.call(this)},20),"click"==i.trigger.toLowerCase())h.on(a.fn.tap?"tap":"click",function(){h.find(a(event.target).closest('button, a, input[type="submit"]')).length||(h.data("flipped")?c(h):b(h))});else if("hover"==i.trigger.toLowerCase()){var n=function(){h.unbind("mouseleave",o),b(h),setTimeout(function(){h.bind("mouseleave",o),h.is(":hover")||c(h)},i.speed+150)},o=function(){c(h)};h.mouseenter(n),h.mouseleave(o)}}else"toggle"==f&&(f=!h.data("flipped")),f?b(h):c(h),void 0!==g&&a(this).one(d(),function(){g.call(this)})}),this};var e=function(b,c){if(a(this).data("axis")!=b.toLowerCase()){var d=a(this).find(a(this).data("front")).add(a(this).data("back"),a(this)),e=d.css("transition");d.css({transition:"none"}),b=b.toLowerCase(),a(this).data("axis",b);var f="rotate"+b;a(this).data("flipped")?a(this).find(a(this).data("front")).css({transform:f+(a(this).data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}):a(this).find(a(this).data("back")).css({transform:f+"("+(a(this).data("reverse")?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){d.css({transition:e}),void 0!==c&&c.call(this)},0)}else void 0!==c&&setTimeout(c.bind(this),0)}}(jQuery);
+//# sourceMappingURL=jquery.flip.min.js.map