{"product_id":"body-halloween","title":"body halloween","description":"\u003c!-- ============================================\n     CARRUSEL DE 2 VIDEOS - LAZY LOAD REAL\n     SHOPIFY PRODUCT PAGE\n     ============================================ --\u003e\n\n\u003cdiv class=\"ecom-video-section\"\u003e\n\n  \u003cdiv class=\"ecom-video-title\"\u003e\n    TOCA ▶ PARA VER EL VIDEO\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"ecom-video-carousel\"\u003e\n\n\n    \u003c!-- ========================================\n         VIDEO 1\n         ======================================== --\u003e\n\n    \u003cdiv class=\"ecom-video-card\"\u003e\n\n      \u003cdiv class=\"ecom-video-wrapper\"\u003e\n\n        \u003cdiv class=\"ecom-video-poster\"\u003e\n\n          \u003cimg src=\"ACA_VA_LA_URL_DE_LA_PORTADA_1\" alt=\"Video producto\" loading=\"lazy\" width=\"500\" height=\"889\"\u003e\n\n          \u003cbutton class=\"ecom-play-button\" type=\"button\" aria-label=\"Reproducir video\"\u003e\n            \u003cspan\u003e\u003c\/span\u003e\n          \u003c\/button\u003e\n\n        \u003c\/div\u003e\n\n        \u003cvideo class=\"ecom-video\" data-src=\"ACA_VA_LA_URL_DEL_VIDEO_1\" playsinline webkit-playsinline preload=\"none\"\u003e\u003c\/video\u003e\n\n        \u003cbutton class=\"ecom-sound-button\" type=\"button\" aria-label=\"Activar o desactivar sonido\" hidden\u003e\n          🔊\n        \u003c\/button\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- ========================================\n         VIDEO 2\n         ======================================== --\u003e\n\n    \u003cdiv class=\"ecom-video-card\"\u003e\n\n      \u003cdiv class=\"ecom-video-wrapper\"\u003e\n\n        \u003cdiv class=\"ecom-video-poster\"\u003e\n\n          \u003cimg src=\"ACA_VA_LA_URL_DE_LA_PORTADA_2\" alt=\"Video producto\" loading=\"lazy\" width=\"500\" height=\"889\"\u003e\n\n          \u003cbutton class=\"ecom-play-button\" type=\"button\" aria-label=\"Reproducir video\"\u003e\n            \u003cspan\u003e\u003c\/span\u003e\n          \u003c\/button\u003e\n\n        \u003c\/div\u003e\n\n        \u003cvideo class=\"ecom-video\" data-src=\"ACA_VA_LA_URL_DEL_VIDEO_2\" playsinline webkit-playsinline preload=\"none\"\u003e\u003c\/video\u003e\n\n        \u003cbutton class=\"ecom-sound-button\" type=\"button\" aria-label=\"Activar o desactivar sonido\" hidden\u003e\n          🔊\n        \u003c\/button\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\n\u003cstyle\u003e\n\n\/* ==========================================\n   SECCIÓN\n   ========================================== *\/\n\n.ecom-video-section {\n  width: 100%;\n  overflow: hidden;\n\n  \/* SECCIÓN COMPACTA *\/\n  padding: 6px 0 6px;\n  margin: 0;\n\n  background: transparent;\n}\n\n\n\/* ==========================================\n   ÚNICO TÍTULO\n   ========================================== *\/\n\n.ecom-video-title {\n  text-align: center;\n\n  margin: 0 0 7px;\n  padding: 0 12px;\n\n  color: #111;\n\n  font-size: 13px;\n  line-height: 1.2;\n\n  font-weight: 800;\n  letter-spacing: .02em;\n}\n\n\n\/* ==========================================\n   CARRUSEL\n   ========================================== *\/\n\n.ecom-video-carousel {\n\n  display: flex;\n\n  gap: 8px;\n\n  width: 100%;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  padding: 0 12px 2px;\n\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n\n  -webkit-overflow-scrolling: touch;\n\n  scrollbar-width: none;\n}\n\n.ecom-video-carousel::-webkit-scrollbar {\n  display: none;\n}\n\n\n\/* ==========================================\n   TARJETAS\n   ========================================== *\/\n\n.ecom-video-card {\n\n  flex: 0 0 72vw;\n\n  max-width: 310px;\n\n  min-width: 0;\n\n  scroll-snap-align: start;\n}\n\n\n\/* ==========================================\n   CONTENEDOR 9:16\n   ========================================== *\/\n\n.ecom-video-wrapper {\n\n  position: relative;\n\n  width: 100%;\n\n  aspect-ratio: 9 \/ 16;\n\n  overflow: hidden;\n\n  background: #080808;\n\n  border-radius: 12px;\n\n  transform: translateZ(0);\n}\n\n\n\/* ==========================================\n   PORTADA\n   ========================================== *\/\n\n.ecom-video-poster {\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 3;\n\n  background: #111;\n\n  transition:\n    opacity .22s ease,\n    visibility .22s ease;\n}\n\n.ecom-video-poster.is-hidden {\n\n  opacity: 0;\n\n  visibility: hidden;\n\n  pointer-events: none;\n}\n\n.ecom-video-poster img {\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n}\n\n\n\/* Ligero sombreado *\/\n\n.ecom-video-poster::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.01) 0%,\n      rgba(0,0,0,.03) 55%,\n      rgba(0,0,0,.16) 100%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* ==========================================\n   BOTÓN PLAY\n   ========================================== *\/\n\n.ecom-play-button {\n\n  position: absolute;\n\n  z-index: 5;\n\n  left: 50%;\n  top: 50%;\n\n  transform: translate(-50%, -50%);\n\n  width: 64px;\n  height: 64px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  padding: 0;\n\n  border-radius: 50%;\n\n  border: 2px solid rgba(255,255,255,.92);\n\n  background: rgba(227,6,19,.96);\n\n  box-shadow:\n    0 7px 25px rgba(0,0,0,.35),\n    0 0 0 7px rgba(255,255,255,.10);\n\n  cursor: pointer;\n\n  -webkit-tap-highlight-color: transparent;\n\n  transition: transform .15s ease;\n}\n\n.ecom-play-button:active {\n\n  transform:\n    translate(-50%, -50%)\n    scale(.91);\n}\n\n\n\/* TRIÁNGULO *\/\n\n.ecom-play-button span {\n\n  width: 0;\n  height: 0;\n\n  margin-left: 5px;\n\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n\n  border-left: 16px solid #fff;\n}\n\n\n\/* ==========================================\n   VIDEO REAL\n   ========================================== *\/\n\n.ecom-video {\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 2;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  background: #000;\n}\n\n\n\/* ==========================================\n   BOTÓN SONIDO\n   ========================================== *\/\n\n.ecom-sound-button {\n\n  position: absolute;\n\n  z-index: 7;\n\n  right: 9px;\n  bottom: 9px;\n\n  width: 38px;\n  height: 38px;\n\n  padding: 0;\n\n  border: 0;\n  border-radius: 50%;\n\n  background: rgba(0,0,0,.68);\n\n  color: #fff;\n\n  font-size: 17px;\n\n  cursor: pointer;\n\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n\n\n\/* ==========================================\n   DESKTOP\n   ========================================== *\/\n\n@media screen and (min-width: 750px) {\n\n  .ecom-video-carousel {\n\n    justify-content: center;\n\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n\n  .ecom-video-card {\n\n    flex: 0 0 300px;\n\n    max-width: 300px;\n  }\n\n}\n\n\n\/* ==========================================\n   REDUCIR MOVIMIENTO\n   ========================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .ecom-video-carousel {\n    scroll-behavior: auto;\n  }\n\n  .ecom-video-poster,\n  .ecom-play-button {\n    transition: none;\n  }\n\n}\n\n\u003c\/style\u003e\n\n\n\u003cscript\u003e\n\n(function () {\n\n  const sections =\n    document.querySelectorAll('.ecom-video-section');\n\n\n  sections.forEach(function(section) {\n\n    if (section.dataset.ecomInitialized === 'true') {\n      return;\n    }\n\n    section.dataset.ecomInitialized = 'true';\n\n\n    const videos =\n      section.querySelectorAll('.ecom-video');\n\n    const playButtons =\n      section.querySelectorAll('.ecom-play-button');\n\n    const soundButtons =\n      section.querySelectorAll('.ecom-sound-button');\n\n\n    \/* ======================================\n       PAUSAR EL OTRO VIDEO\n       ====================================== *\/\n\n    function pauseOtherVideos(currentVideo) {\n\n      videos.forEach(function(video) {\n\n        if (\n          video !== currentVideo \u0026\u0026\n          !video.paused\n        ) {\n\n          video.pause();\n\n        }\n\n      });\n\n    }\n\n\n    \/* ======================================\n       PLAY + CARGA DEL MP4 SOLO AL CLIC\n       ====================================== *\/\n\n    playButtons.forEach(function(button) {\n\n      button.addEventListener(\n        'click',\n        function() {\n\n          const wrapper =\n            button.closest('.ecom-video-wrapper');\n\n          if (!wrapper) return;\n\n\n          const video =\n            wrapper.querySelector('.ecom-video');\n\n          const poster =\n            wrapper.querySelector('.ecom-video-poster');\n\n          const soundButton =\n            wrapper.querySelector('.ecom-sound-button');\n\n\n          if (!video) return;\n\n\n          pauseOtherVideos(video);\n\n\n          \/* ==================================\n             LAZY LOAD REAL\n\n             El MP4 NO tiene SRC hasta que\n             el usuario pulsa PLAY.\n             ================================== *\/\n\n          if (video.dataset.loaded !== 'true') {\n\n            const videoUrl =\n              video.dataset.src;\n\n\n            if (!videoUrl) {\n\n              console.warn(\n                'Falta la URL del video.'\n              );\n\n              return;\n\n            }\n\n\n            const source =\n              document.createElement('source');\n\n\n            source.src = videoUrl;\n\n            source.type = 'video\/mp4';\n\n\n            video.appendChild(source);\n\n\n            video.dataset.loaded = 'true';\n\n\n            \/*\n             * AQUÍ comienza realmente\n             * la carga del MP4.\n             *\/\n\n            video.load();\n\n          }\n\n\n          \/*\n           * Intentar reproducir con sonido\n           * porque existe interacción manual.\n           *\/\n\n          video.muted = false;\n\n\n          const playPromise =\n            video.play();\n\n\n          if (playPromise !== undefined) {\n\n            playPromise\n\n              .then(function() {\n\n                if (poster) {\n\n                  poster.classList.add(\n                    'is-hidden'\n                  );\n\n                }\n\n\n                if (soundButton) {\n\n                  soundButton.hidden = false;\n\n                  soundButton.textContent = '🔊';\n\n                }\n\n              })\n\n\n              .catch(function() {\n\n                \/*\n                 * Fallback para navegadores\n                 * que exijan reproducción muted.\n                 *\/\n\n                video.muted = true;\n\n\n                video.play()\n\n                  .then(function() {\n\n                    if (poster) {\n\n                      poster.classList.add(\n                        'is-hidden'\n                      );\n\n                    }\n\n\n                    if (soundButton) {\n\n                      soundButton.hidden = false;\n\n                      soundButton.textContent = '🔇';\n\n                    }\n\n                  })\n\n                  .catch(function(error) {\n\n                    console.warn(\n                      'No se pudo reproducir el video.',\n                      error\n                    );\n\n                  });\n\n              });\n\n          }\n\n        }\n      );\n\n    });\n\n\n    \/* ======================================\n       SONIDO\n       ====================================== *\/\n\n    soundButtons.forEach(function(button) {\n\n      button.addEventListener(\n        'click',\n        function(event) {\n\n          event.stopPropagation();\n\n\n          const wrapper =\n            button.closest('.ecom-video-wrapper');\n\n\n          if (!wrapper) return;\n\n\n          const video =\n            wrapper.querySelector('.ecom-video');\n\n\n          if (!video) return;\n\n\n          video.muted = !video.muted;\n\n\n          button.textContent =\n            video.muted ? '🔇' : '🔊';\n\n        }\n      );\n\n    });\n\n\n    \/* ======================================\n       PAUSAR VIDEO FUERA DE PANTALLA\n       ====================================== *\/\n\n    if ('IntersectionObserver' in window) {\n\n      const observer =\n        new IntersectionObserver(\n\n          function(entries) {\n\n            entries.forEach(function(entry) {\n\n              const video =\n                entry.target.querySelector(\n                  '.ecom-video'\n                );\n\n\n              if (!video) return;\n\n\n              \/*\n               * No carga ningún MP4.\n               * Solo pausa uno que ya haya\n               * sido abierto por el usuario.\n               *\/\n\n              if (\n                !entry.isIntersecting \u0026\u0026\n                video.dataset.loaded === 'true'\n              ) {\n\n                video.pause();\n\n              }\n\n            });\n\n          },\n\n          {\n            threshold: 0.15\n          }\n\n        );\n\n\n      section\n        .querySelectorAll('.ecom-video-card')\n        .forEach(function(card) {\n\n          observer.observe(card);\n\n        });\n\n    }\n\n  });\n\n})();\n\n\u003c\/script\u003e\n\n\n\n\n\n\u003cstyle\u003e\n  product-form {\n    display: none !important;\n  }\n  \n  img {\n    border-radius: 0px !important;\n    width: 100vw;\n  }\n\n\u003c\/style\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_pon-estas-5-modelos-en-un_huKOHcJvqL.jpg?v=1788400727\" style=\"margin-top: -10px; margin-bottom: -5px; float: none;\"\u003e\u003c\/div\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_crea-una-sola-pieza-publi_p8fjo0Cehw.jpg?v=1788400727\" alt=\"\" style=\"margin-bottom: -05px; float: none;\"\u003e\u003c\/div\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_crea-una-imagen-publicita_yizo368PW9.jpg?v=1788400727\" style=\"margin-bottom: -05px; float: none;\"\u003e\u003c\/div\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_crea-una-pieza-publicitar_Ifqwa8otvE.jpg?v=1788400727\" style=\"margin-bottom: -05px; float: none;\"\u003e\u003c\/div\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_crea-una-pieza-publicitar_3zVaG4XREY.jpg?v=1788400727\" style=\"margin-bottom: -05px; float: none;\"\u003e\u003c\/div\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_usa-img1-como-referencia-_Cqx9HmlEEy.jpg?v=1788400727\" style=\"margin-bottom: -05px; float: none;\"\u003e\u003c\/div\u003e\n\u003cdiv style=\"text-align: left;\"\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0934\/3100\/5471\/files\/magnific_crea-una-grafica-vertical_1lOnsqir4r.jpg?v=1788400727\" style=\"margin-bottom: -05px; float: none;\"\u003e\u003c\/div\u003e","brand":"facebook","offers":[{"title":"S \/ MARIO BROS","offer_id":52844186960159,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"S \/ HOMBRE ARAÑA","offer_id":52844186992927,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"S \/ BATMAN","offer_id":52844187025695,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"S \/ SUPER INCREIBLES","offer_id":52844187058463,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"M \/ MARIO BROS","offer_id":52844187091231,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"M \/ HOMBRE ARAÑA","offer_id":52844187123999,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"M \/ BATMAN","offer_id":52844187156767,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"M \/ SUPER INCREIBLES","offer_id":52844187189535,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"L \/ MARIO BROS","offer_id":52844187222303,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"L \/ HOMBRE ARAÑA","offer_id":52844187255071,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"L \/ BATMAN","offer_id":52844187287839,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"L \/ SUPER INCREIBLES","offer_id":52844187320607,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"XL \/ MARIO BROS","offer_id":52844187353375,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"XL \/ HOMBRE ARAÑA","offer_id":52844187386143,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"XL \/ BATMAN","offer_id":52844187418911,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"XL \/ SUPER INCREIBLES","offer_id":52844187451679,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"2XL \/ MARIO BROS","offer_id":52844187484447,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"2XL \/ HOMBRE ARAÑA","offer_id":52844187517215,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"2XL \/ BATMAN","offer_id":52844187549983,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true},{"title":"2XL \/ SUPER INCREIBLES","offer_id":52844187582751,"sku":null,"price":69900.0,"currency_code":"COP","in_stock":true}],"url":"https:\/\/r5kkdb-kr.myshopify.com\/products\/body-halloween","provider":"facebook","version":"1.0","type":"link"}