{"product_id":"tren-con-humo-luces-sonido","title":"TREN CON HUMO, LUCES, SONIDO","description":"\u003cbody\u003e\n\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"\u003e\n  \u003cmeta name=\"theme-color\" content=\"#000000\"\u003e\n\n  \u003ctitle\u003eTren Navideño Eléctrico - Preventa Especial\u003c\/title\u003e\n\n  \u003cscript src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"\u003e\u003c\/script\u003e\n  \u003cscript src=\"\/_sdk\/element_sdk.js\"\u003e\u003c\/script\u003e\n\n  \u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue\u0026amp;family=DM+Sans:wght@400;500;700\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\n\n  \u003cstyle\u003e\n    * {\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n      -webkit-user-select: none;\n      user-select: none;\n    }\n\n    @keyframes slideInRight {\n      from {\n        transform: translateX(120%);\n        opacity: 0;\n      }\n\n      to {\n        transform: translateX(0);\n        opacity: 1;\n      }\n    }\n\n    @keyframes slideOutRight {\n      from {\n        transform: translateX(0);\n        opacity: 1;\n      }\n\n      to {\n        transform: translateX(120%);\n        opacity: 0;\n      }\n    }\n\n    @keyframes pulse {\n      0%,\n      100% {\n        opacity: 1;\n      }\n\n      50% {\n        opacity: 0.7;\n      }\n    }\n\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n        transform: translateY(10px);\n      }\n\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .trigger-enter {\n      animation: slideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n    }\n\n    .trigger-exit {\n      animation: slideOutRight 0.5s ease-in forwards;\n    }\n\n    .timer-pulse {\n      animation: pulse 1s infinite;\n    }\n\n    .fade-in {\n      animation: fadeIn 0.6s ease-out forwards;\n    }\n\n    img {\n      display: block;\n      max-width: 100%;\n      height: auto;\n      -webkit-touch-callout: none;\n    }\n\n    body {\n      box-sizing: border-box;\n    }\n  \u003c\/style\u003e\n\n  \u003cscript src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\" type=\"text\/javascript\"\u003e\u003c\/script\u003e\n\n  \u003cscript src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"\u003e\u003c\/script\u003e\n\n\n  \u003c!-- ========================================= --\u003e\n  \u003c!-- NOTIFICACIÓN FLOTANTE DE NUEVA COMPRA --\u003e\n  \u003c!-- ========================================= --\u003e\n\n  \u003cdiv id=\"purchase-trigger\" class=\"fixed right-0 top-1\/2 transform -translate-y-1\/2 z-50\" style=\"pointer-events: none;\"\u003e\n\n    \u003cdiv id=\"buyer-info\" class=\"bg-gradient-to-r from-red-600 to-red-500 text-white rounded-l-lg shadow-2xl hidden\" style=\"padding: 16px 20px; pointer-events: auto;\"\u003e\n\n      \u003cp class=\"text-xs font-semibold opacity-75 m-0\" style=\"margin: 0 0 4px 0;\"\u003e\n        ✓ NUEVA COMPRA\n      \u003c\/p\u003e\n\n      \u003cp id=\"buyer-display-name\" class=\"text-lg font-bold m-0\" style=\"margin: 0 0 4px 0;\"\u003e\n        Nombre\n      \u003c\/p\u003e\n\n      \u003cp id=\"buyer-display-city\" class=\"text-sm opacity-90 m-0\" style=\"margin: 0;\"\u003e\n        Ciudad\n      \u003c\/p\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\n  \u003c!-- ========================================= --\u003e\n  \u003c!-- CONTENIDO PRINCIPAL --\u003e\n  \u003c!-- ========================================= --\u003e\n\n  \u003cdiv id=\"app-wrapper\" class=\"w-full h-full flex flex-col overflow-y-auto overflow-x-hidden\" style=\"background-color: #ffffff;\"\u003e\n\n\n    \u003c!-- ========================================= --\u003e\n    \u003c!-- BARRA DE URGENCIA --\u003e\n    \u003c!-- ========================================= --\u003e\n\n    \u003cdiv class=\"w-full text-white py-4 px-4 sticky top-0 z-40\" style=\"background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\"\u003e\n\n      \u003cdiv class=\"flex items-center justify-center gap-3 mb-2\"\u003e\n\n        \u003cspan class=\"text-3xl font-bold timer-pulse leading-none\" id=\"timer-display\" style=\"\n            font-family: 'Bebas Neue', sans-serif;\n            letter-spacing: 2px;\n          \"\u003e\n          30:00\n        \u003c\/span\u003e\n\n        \u003cspan class=\"text-sm font-bold\" style=\"letter-spacing: 1px;\"\u003e\n          ⏰ PREVENTA NAVIDEÑA POR TIEMPO LIMITADO\n        \u003c\/span\u003e\n\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"w-full bg-red-900 rounded-full h-2 overflow-hidden\"\u003e\n\n        \u003cdiv id=\"timer-progress\" class=\"bg-yellow-300 h-full rounded-full\" style=\"\n            width: 100%;\n            transition: width 0.1s linear;\n            box-shadow: 0 0 8px rgba(253, 224, 71, 0.6);\n          \"\u003e\u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- ========================================= --\u003e\n    \u003c!-- IMÁGENES LANDING --\u003e\n    \u003c!-- ========================================= --\u003e\n\n    \u003cdiv class=\"w-full flex-1\"\u003e\n\n\n      \u003c!-- IMAGEN 1 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/63d5e173-2932-472f-82a8-df2a7a610aaa.png?v=1787092980\" alt=\"Tren Navideño Eléctrico - Preventa Navideña\" loading=\"eager\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 1 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n\n      \u003c!-- IMAGEN 2 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/9d37d01c-65a2-42d8-9e4a-093572d68382.png?v=1787092591\" alt=\"Tren Navideño Eléctrico - Características\" loading=\"lazy\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 2 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n\n      \u003c!-- IMAGEN 3 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/cec6b673-9127-428d-9391-dc8368ce9d55.png?v=1787092591\" alt=\"Tren Navideño Eléctrico - Experiencia Navideña\" loading=\"lazy\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 3 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n\n      \u003c!-- IMAGEN 4 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/1763475358TREN_TRAIN.jpg?v=1787092586\" alt=\"Tren Merry Christmas Eléctrico\" loading=\"lazy\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 4 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n\n      \u003c!-- IMAGEN 5 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/c83144ee-033a-41c4-aec4-bc41b95cf27b.png?v=1787092591\" alt=\"Tren Navideño Eléctrico - Beneficios\" loading=\"lazy\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 5 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n\n      \u003c!-- IMAGEN 6 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/f1031474-a2d7-4584-8b45-d205a57278bd.png?v=1787092590\" alt=\"Tren Navideño Eléctrico - Comparación\" loading=\"lazy\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 6 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n\n      \u003c!-- IMAGEN 7 --\u003e\n\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/7d7e7027-6db8-4c03-be95-4332149bf0e9.png?v=1787092590\" alt=\"Tren Navideño Eléctrico - Preguntas Frecuentes\" loading=\"lazy\" class=\"w-full h-auto block fade-in\" onerror=\"console.error('Image 7 failed:', this.src); this.style.background='#1a1a1a';\"\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\n  \u003cscript\u003e\n\n    const defaultConfig = {\n      main_title: 'TREN NAVIDEÑO',\n      background_color: '#ffffff',\n      accent_color: '#dc2626',\n      text_color: '#ffffff',\n      font_family: 'Bebas Neue',\n      font_size: 16\n    };\n\n\n    \/\/ =========================================\n    \/\/ INICIALIZAR APLICACIÓN\n    \/\/ =========================================\n\n    if (document.readyState !== 'loading') {\n      initializeApp();\n    } else {\n      document.addEventListener('DOMContentLoaded', initializeApp);\n    }\n\n\n    function initializeApp() {\n      startTimer();\n      setupBuyerNotifications();\n      setupSDK();\n    }\n\n\n    \/\/ =========================================\n    \/\/ TEMPORIZADOR\n    \/\/ =========================================\n\n    let timeRemaining = 30 * 60;\n\n    const totalTime = 30 * 60;\n\n\n    function formatTime(seconds) {\n\n      const mins = Math.floor(seconds \/ 60);\n\n      const secs = seconds % 60;\n\n      return `${mins.toString().padStart(2, '0')}:${secs\n        .toString()\n        .padStart(2, '0')}`;\n\n    }\n\n\n    function startTimer() {\n\n      function updateTimer() {\n\n        const timerDisplay =\n          document.getElementById('timer-display');\n\n        const timerProgress =\n          document.getElementById('timer-progress');\n\n\n        if (timerDisplay) {\n\n          timerDisplay.textContent =\n            formatTime(timeRemaining);\n\n        }\n\n\n        if (timerProgress) {\n\n          const progressPercent =\n            (timeRemaining \/ totalTime) * 100;\n\n          timerProgress.style.width =\n            progressPercent + '%';\n\n        }\n\n\n        if (timeRemaining \u003e 0) {\n\n          timeRemaining--;\n\n        }\n\n      }\n\n\n      updateTimer();\n\n      setInterval(updateTimer, 1000);\n\n    }\n\n\n    \/\/ =========================================\n    \/\/ NOTIFICACIONES DE COMPRADORES\n    \/\/ =========================================\n\n    function setupBuyerNotifications() {\n\n      const buyerInfo =\n        document.getElementById('buyer-info');\n\n      const buyerDisplayName =\n        document.getElementById('buyer-display-name');\n\n      const buyerDisplayCity =\n        document.getElementById('buyer-display-city');\n\n\n      let autoHideTimeout;\n\n\n      const testNames = [\n        'Juan García',\n        'María López',\n        'Carlos Rodríguez',\n        'Ana Martínez',\n        'Pedro Sánchez',\n        'Laura Díaz',\n        'Roberto Ortiz',\n        'Sofía Ruiz'\n      ];\n\n\n      const testCities = [\n        'Bogotá',\n        'Medellín',\n        'Cali',\n        'Barranquilla',\n        'Cartagena',\n        'Santa Marta',\n        'Bucaramanga',\n        'Cúcuta'\n      ];\n\n\n      function showBuyerNotification(name, city) {\n\n        if (!buyerInfo) return;\n\n\n        buyerDisplayName.textContent = name;\n\n        buyerDisplayCity.textContent = city;\n\n\n        buyerInfo.classList.remove(\n          'hidden',\n          'trigger-exit'\n        );\n\n\n        buyerInfo.classList.add(\n          'trigger-enter'\n        );\n\n\n        clearTimeout(autoHideTimeout);\n\n\n        autoHideTimeout = setTimeout(() =\u003e {\n\n          hideBuyerNotification();\n\n        }, 5000);\n\n      }\n\n\n      function hideBuyerNotification() {\n\n        if (!buyerInfo) return;\n\n\n        buyerInfo.classList.remove(\n          'trigger-enter'\n        );\n\n\n        buyerInfo.classList.add(\n          'trigger-exit'\n        );\n\n\n        setTimeout(() =\u003e {\n\n          buyerInfo.classList.add(\n            'hidden'\n          );\n\n        }, 500);\n\n      }\n\n\n      \/\/ Primera notificación\n\n      setTimeout(() =\u003e {\n\n        showBuyerNotification(\n          'Andrés Pérez',\n          'Bogotá'\n        );\n\n      }, 2000);\n\n\n      \/\/ Nuevas notificaciones cada 15 segundos\n\n      setInterval(() =\u003e {\n\n        const randomName =\n          testNames[\n            Math.floor(\n              Math.random() * testNames.length\n            )\n          ];\n\n\n        const randomCity =\n          testCities[\n            Math.floor(\n              Math.random() * testCities.length\n            )\n          ];\n\n\n        showBuyerNotification(\n          randomName,\n          randomCity\n        );\n\n      }, 15000);\n\n    }\n\n\n    \/\/ =========================================\n    \/\/ ELEMENT SDK\n    \/\/ =========================================\n\n    function setupSDK() {\n\n      if (!window.elementSdk) return;\n\n\n      window.elementSdk.init({\n\n        defaultConfig,\n\n\n        onConfigChange: async (config) =\u003e {\n\n          const wrapper =\n            document.getElementById(\n              'app-wrapper'\n            );\n\n\n          if (wrapper) {\n\n            wrapper.style.backgroundColor =\n              config.background_color ||\n              defaultConfig.background_color;\n\n          }\n\n        },\n\n\n        mapToCapabilities: (config) =\u003e ({\n\n          recolorables: [\n\n            {\n\n              get: () =\u003e\n                config.background_color ||\n                defaultConfig.background_color,\n\n\n              set: (v) =\u003e {\n\n                config.background_color = v;\n\n\n                window.elementSdk.setConfig({\n\n                  background_color: v\n\n                });\n\n              }\n\n            },\n\n\n            {\n\n              get: () =\u003e\n                config.accent_color ||\n                defaultConfig.accent_color,\n\n\n              set: (v) =\u003e {\n\n                config.accent_color = v;\n\n\n                window.elementSdk.setConfig({\n\n                  accent_color: v\n\n                });\n\n              }\n\n            }\n\n          ],\n\n\n          borderables: [],\n\n\n          fontEditable: {\n\n            get: () =\u003e\n              config.font_family ||\n              defaultConfig.font_family,\n\n\n            set: (v) =\u003e {\n\n              config.font_family = v;\n\n\n              window.elementSdk.setConfig({\n\n                font_family: v\n\n              });\n\n            }\n\n          },\n\n\n          fontSizeable: {\n\n            get: () =\u003e\n              config.font_size ||\n              defaultConfig.font_size,\n\n\n            set: (v) =\u003e {\n\n              config.font_size = v;\n\n\n              window.elementSdk.setConfig({\n\n                font_size: v\n\n              });\n\n            }\n\n          }\n\n        }),\n\n\n        mapToEditPanelValues: (config) =\u003e\n          new Map([\n\n            [\n              'main_title',\n              config.main_title ||\n              defaultConfig.main_title\n            ]\n\n          ])\n\n      });\n\n    }\n\n  \u003c\/script\u003e\n\n\u003c\/body\u003e","brand":"Ama store","offers":[{"title":"Default Title","offer_id":48346614366466,"sku":"2294","price":164900.0,"currency_code":"COP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0781\/2228\/7362\/files\/77a5dbe9-644d-48d4-bea2-4eb863b85c96_ebc6a880-8c21-40a0-8fdc-5e3126f73961.png?v=1787093506","url":"https:\/\/amacompra.com\/products\/tren-con-humo-luces-sonido","provider":"Ama store","version":"1.0","type":"link"}