{"id":498,"date":"2025-09-26T16:28:37","date_gmt":"2025-09-26T16:28:37","guid":{"rendered":"https:\/\/mododigital.net.gt\/?page_id=498"},"modified":"2025-09-26T17:36:59","modified_gmt":"2025-09-26T17:36:59","slug":"carrera-de-cohetes","status":"publish","type":"page","link":"https:\/\/mododigital.net.gt\/?page_id=498","title":{"rendered":"carrera de cohetes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"498\" class=\"elementor elementor-498\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75372b9 e-flex e-con-boxed e-con e-parent\" data-id=\"75372b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42843c3 elementor-widget elementor-widget-spacer\" data-id=\"42843c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb5a57d e-flex e-con-boxed e-con e-parent\" data-id=\"bb5a57d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8260bc elementor-widget elementor-widget-html\" data-id=\"d8260bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"rocket-game-block\">\r\n  <h2 class=\"game-title\">Carrera de Cohetes<\/h2>\r\n  \r\n  <div class=\"game-instructions\">\r\n    <strong>Instrucciones:<\/strong> \u00a1Maneja el cohete con Lila y Rodri! Gu\u00edalos de manera segura y evita que choquen con otros cohetes.\r\n  <\/div>\r\n\r\n  <div class=\"game-container\" id=\"gameContainer\">\r\n    <div class=\"responsive-iframe\" id=\"iframeContainer\">\r\n      <iframe \r\n        src=\"https:\/\/mododigital.net.gt\/juegos\/UNI-06-CARRERA_COHETES\/UNI-06-CARRERA_COHETES.html\" \r\n        frameborder=\"0\" \r\n        allowfullscreen \r\n        allow=\"fullscreen; autoplay; encrypted-media\"  <!-- \u2705 CLAVE: ESTO ES LO QUE FALTABA -->\r\n        title=\"Juego Tablero Interactivo\"\r\n        sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\r\n        id=\"gameIframe\"\r\n      ><\/iframe>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .rocket-game-block {\r\n    text-align: center;\r\n    max-width: 1000px;\r\n    margin: 40px auto;\r\n    padding: 25px 15px;\r\n    background-color: #f8f9ff;\r\n    border-radius: 20px;\r\n    box-shadow: 0 8px 30px rgba(32, 100, 172, 0.1);\r\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n  }\r\n\r\n  .game-title {\r\n    color: #2064AC;\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    margin-bottom: 15px;\r\n    letter-spacing: -0.5px;\r\n  }\r\n\r\n  .game-instructions {\r\n    background-color: #e6f0ff;\r\n    color: #2064AC;\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    padding: 15px 20px;\r\n    border-radius: 12px;\r\n    margin-bottom: 25px;\r\n    line-height: 1.5;\r\n    border-left: 5px solid #FFD700;\r\n  }\r\n\r\n  .game-container {\r\n    width: 100%;\r\n    margin: 0 auto;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .responsive-iframe {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 0;\r\n    padding-bottom: 100%; \/* \u2705 1:1 \u2014 perfecto para tu tablero cuadrado *\/\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    border-radius: 12px;\r\n    box-shadow: 0 6px 20px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  .responsive-iframe iframe {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: none;\r\n    object-fit: contain;\r\n    background-color: #fff;\r\n  }\r\n\r\n  .responsive-iframe.fullscreen {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    z-index: 9999;\r\n    padding-bottom: 0 !important;\r\n    margin: 0;\r\n    border-radius: 0;\r\n    background-color: #000;\r\n  }\r\n\r\n  .responsive-iframe.fullscreen iframe {\r\n    width: 100vw !important;\r\n    height: 100vh !important;\r\n    object-fit: contain;\r\n  }\r\n\r\n  body.fullscreen {\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .game-title {\r\n      font-size: 24px;\r\n    }\r\n    .game-instructions {\r\n      font-size: 15px;\r\n      padding: 14px 18px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .rocket-game-block {\r\n      padding: 20px 10px;\r\n      margin: 20px 5px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const iframeContainer = document.getElementById('iframeContainer');\r\n    const iframe = document.getElementById('gameIframe');\r\n    const body = document.body;\r\n\r\n    iframeContainer.addEventListener('click', function() {\r\n      if (!document.fullscreenElement) {\r\n        iframeContainer.classList.add('fullscreen');\r\n        body.classList.add('fullscreen');\r\n        \r\n        \/\/ \u2705 AHORA S\u00cd FUNCIONA EN MOBIL \u2014 PORQUE TENEMOS allow=\"fullscreen\"\r\n        if (iframeContainer.requestFullscreen) {\r\n          iframeContainer.requestFullscreen();\r\n        } else if (iframeContainer.webkitRequestFullscreen) {\r\n          iframeContainer.webkitRequestFullscreen();\r\n        } else if (iframeContainer.msRequestFullscreen) {\r\n          iframeContainer.msRequestFullscreen();\r\n        }\r\n      } else {\r\n        if (document.exitFullscreen) {\r\n          document.exitFullscreen();\r\n        } else if (document.webkitExitFullscreen) {\r\n          document.webkitExitFullscreen();\r\n        } else if (document.msExitFullscreen) {\r\n          document.msExitFullscreen();\r\n        }\r\n        iframeContainer.classList.remove('fullscreen');\r\n        body.classList.remove('fullscreen');\r\n      }\r\n    });\r\n\r\n    document.addEventListener('fullscreenchange', () => {\r\n      if (!document.fullscreenElement) {\r\n        iframeContainer.classList.remove('fullscreen');\r\n        body.classList.remove('fullscreen');\r\n      }\r\n    });\r\n    document.addEventListener('webkitfullscreenchange', () => {\r\n      if (!document.webkitFullscreenElement) {\r\n        iframeContainer.classList.remove('fullscreen');\r\n        body.classList.remove('fullscreen');\r\n      }\r\n    });\r\n    document.addEventListener('MSFullscreenChange', () => {\r\n      if (!document.msFullscreenElement) {\r\n        iframeContainer.classList.remove('fullscreen');\r\n        body.classList.remove('fullscreen');\r\n      }\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Carrera de Cohetes Instrucciones: \u00a1Maneja el cohete con Lila y Rodri! Gu\u00edalos de manera segura y evita que choquen con otros cohetes.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-498","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=498"}],"version-history":[{"count":34,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages\/498\/revisions"}],"predecessor-version":[{"id":595,"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=\/wp\/v2\/pages\/498\/revisions\/595"}],"wp:attachment":[{"href":"https:\/\/mododigital.net.gt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}