{"product_id":"par-direccionales-rgb-flecha-zxd153","title":"Par De Direccionales Rgb Tum11","description":"\u003c!-- Landingpage para Shopify: Direccionales universales LED RGB - Código HTML + CSS + JS\nInstrucciones:\n1) Sube las imágenes del producto a Shopify y reemplaza los valores de `data-img` o `src` con las URLs de las imágenes.\n2) Pega este código en la descripción del producto (editor HTML) o en un bloque `custom liquid` si tu theme lo permite.\n3) Si usas Liquid, puedes reemplazar los campos estáticos por variables como {{ product.title }} donde desees.\n\nSe diseñó pensando en conversión: hero claro, beneficios, características técnicas, demo visual, FAQ y CTA persistente.\n--\u003e\n\n\u003cdiv id=\"led-directional-landing\" class=\"led-landing\"\u003e\n  \u003cstyle\u003e\n    \/* Reset sencillo y tipografía *\/\n    .led-landing {font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial; color:#222;}\n    .led-container {max-width:1200px;margin:0 auto;padding:28px;}\n    .hero {display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 6px 30px rgba(10,10,20,0.06)}\n    .hero-left {flex:1 1 420px}\n    .hero-right {flex:0 1 420px;text-align:center}\n    h1{font-size:28px;margin:0 0 8px;line-height:1.05}\n    .subtitle{color:#666;margin-bottom:12px}\n    .price-row{display:flex;align-items:center;gap:12px;margin:14px 0}\n    .price{font-size:22px;color:#e85b00;font-weight:700}\n    .old-price{color:#999;text-decoration:line-through;font-size:14px}\n    .cta{display:inline-block;padding:12px 20px;background:#ff8c00;color:#fff;border-radius:10px;font-weight:700;text-decoration:none}\n\n    \/* Gallery *\/\n    .gallery{display:flex;gap:12px;align-items:center}\n    .main-img{width:260px;height:150px;border-radius:12px;object-fit:cover;box-shadow:0 10px 30px rgba(250,120,0,0.08)}\n    .thumbs{display:flex;flex-direction:column;gap:8px}\n    .thumb{width:64px;height:44px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.9}\n\n    \/* Features *\/\n    .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}\n    .feature{background:#fff;border-radius:10px;padding:12px;box-shadow:0 4px 20px rgba(16,16,24,0.04);display:flex;gap:12px;align-items:center}\n    .feature .icon{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff6ef,#fff0e0);font-weight:700;color:#d96b00}\n    .feature h4{margin:0;font-size:15px}\n\n    \/* Projection demo *\/\n    .demo-wrap{margin-top:20px;display:flex;gap:16px;align-items:flex-start}\n    .proj-stage{flex:1;background:#0f0f10;color:#fff;border-radius:12px; padding:18px;position:relative;overflow:hidden}\n    .proj-stage .ground{height:160px;background:linear-gradient(180deg,#1b1b1d,#0f0f10);border-radius:10px;display:flex;align-items:center;justify-content:center}\n    .arrow-proj{width:140px;height:80px;filter:blur(0.6px);opacity:0.95}\n\n    \/* Controls *\/\n    .controls{display:flex;flex-direction:column;gap:10px;width:320px}\n    .modes-list{display:flex;flex-wrap:wrap;gap:8px}\n    .mode-btn{padding:8px 10px;border-radius:8px;border:1px solid #eee;background:#fff;cursor:pointer}\n\n    \/* Specs \u0026 installation *\/\n    .specs{margin-top:20px;padding:18px;background:linear-gradient(180deg,#fff,#fbfbfb);border-radius:12px}\n    .specs table{width:100%;border-collapse:collapse}\n    .specs td{padding:8px;border-bottom:1px dashed #eee}\n\n    \/* FAQ *\/\n    .faq{margin-top:18px}\n    .faq-item{margin-bottom:10px}\n    .faq-item summary{cursor:pointer;font-weight:600}\n\n    \/* Sticky buy *\/\n    .sticky-buy{position:fixed;right:18px;bottom:18px;background:linear-gradient(90deg,#ff7b00,#ffb85c);padding:12px 16px;border-radius:14px;color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(255,120,0,0.18);display:flex;gap:12px;align-items:center}\n\n    \/* Responsive *\/\n    @media (max-width:860px){.hero{flex-direction:column}.features-grid{grid-template-columns:repeat(2,1fr)}.controls{width:100%}.gallery{justify-content:center}}\n    @media (max-width:520px){.features-grid{grid-template-columns:1fr}}\n  \u003c\/style\u003e\n\n  \u003cdiv class=\"led-container\"\u003e\n    \u003c!-- HERO --\u003e\n    \u003cdiv class=\"hero\"\u003e\n      \u003cdiv class=\"hero-left\"\u003e\n        \u003ch1\u003eDireccionales LED RGB Universales para Moto — Proyección de Flecha\u003c\/h1\u003e\n        \u003cp class=\"subtitle\"\u003e27 modos RGB, proyección en pavimento, instalación universal (rojo-negro-amarillo). Resistente al agua. Giro, stop y posición en un solo producto.\u003c\/p\u003e\n\n        \u003cdiv class=\"price-row\"\u003e\n          \u003cdiv class=\"price\"\u003e$39.990 COP\u003c\/div\u003e\n          \u003cdiv class=\"old-price\"\u003e$59.990 COP\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003ca href=\"#comprar\" class=\"cta\"\u003eComprar ahora\u003c\/a\u003e\n\n        \u003cdiv class=\"features-grid\" style=\"margin-top:18px\"\u003e\n          \u003cdiv class=\"feature\"\u003e\n\u003cdiv class=\"icon\"\u003e⚡\u003c\/div\u003e\n\u003cdiv\u003e\n\u003ch4\u003e27 modos RGB\u003c\/h4\u003e\n\u003cdiv style=\"font-size:13px;color:#666\"\u003eControl magnético, efectos dinámicos\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"feature\"\u003e\n\u003cdiv class=\"icon\"\u003e🛡️\u003c\/div\u003e\n\u003cdiv\u003e\n\u003ch4\u003eResistente al agua\u003c\/h4\u003e\n\u003cdiv style=\"font-size:13px;color:#666\"\u003eIP65 - uso lluvia y ciudad\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"feature\"\u003e\n\u003cdiv class=\"icon\"\u003e🔧\u003c\/div\u003e\n\u003cdiv\u003e\n\u003ch4\u003eInstalación rápida\u003c\/h4\u003e\n\u003cdiv style=\"font-size:13px;color:#666\"\u003eCableado universal: rojo, negro, amarillo\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"hero-right\"\u003e\n        \u003c!-- Gallery: reemplazar data-img con URLs reales --\u003e\n        \u003cdiv class=\"gallery\"\u003e\n          \u003cimg id=\"mainImg\" class=\"main-img\" src=\"https:\/\/via.placeholder.com\/520x320?text=Direccional+LED\" alt=\"Direccional LED\" data-img=\"REPLACE_MAIN_IMG_URL\"\u003e\n          \u003cdiv class=\"thumbs\"\u003e\n            \u003cimg class=\"thumb\" src=\"https:\/\/via.placeholder.com\/120x80?text=1\" data-src=\"REPLACE_IMG_1\" alt=\"thumb1\"\u003e\n            \u003cimg class=\"thumb\" src=\"https:\/\/via.placeholder.com\/120x80?text=2\" data-src=\"REPLACE_IMG_2\" alt=\"thumb2\"\u003e\n            \u003cimg class=\"thumb\" src=\"https:\/\/via.placeholder.com\/120x80?text=3\" data-src=\"REPLACE_IMG_3\" alt=\"thumb3\"\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv style=\"margin-top:12px;font-size:13px;color:#666\"\u003eEnvío 24-72h • Garantía 30 días • Stock limitado\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- DEMO y CONTROLES --\u003e\n    \u003cdiv class=\"demo-wrap\"\u003e\n      \u003cdiv class=\"proj-stage\" aria-hidden=\"false\"\u003e\n        \u003ch3 style=\"margin:0 0 8px;color:#fff\"\u003eDemo de Proyección\u003c\/h3\u003e\n        \u003cdiv class=\"ground\" id=\"ground\"\u003e\n          \u003c!-- SVG arrow proyectada --\u003e\n          \u003csvg id=\"arrowProj\" class=\"arrow-proj\" viewbox=\"0 0 200 120\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n            \u003cg fill=\"url(#g)\"\u003e\n              \u003cdefs\u003e\n                \u003clineargradient id=\"g\" x1=\"0\" x2=\"1\"\u003e\n                  \u003cstop offset=\"0%\" stop-color=\"#ffd07a\" stop-opacity=\"0.95\"\u003e\u003c\/stop\u003e\n                  \u003cstop offset=\"100%\" stop-color=\"#ff9b00\" stop-opacity=\"0.9\"\u003e\u003c\/stop\u003e\n                \u003c\/lineargradient\u003e\n              \u003c\/defs\u003e\n              \u003cpath id=\"arrowPath\" d=\"M12 60 L72 12 L72 36 L188 36 L188 84 L72 84 L72 108 Z\"\u003e\u003c\/path\u003e\n            \u003c\/g\u003e\n          \u003c\/svg\u003e\n        \u003c\/div\u003e\n        \u003cdiv style=\"padding-top:12px;color:#ddd;font-size:13px\"\u003eUsa los modos para ver variaciones de color y brillo. El efecto es solo demostrativo; la proyección real depende del montaje y superficie.\u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"controls\"\u003e\n        \u003cdiv style=\"font-weight:700\"\u003eControles de demo\u003c\/div\u003e\n        \u003cdiv style=\"font-size:13px;color:#666\"\u003eModo actual: \u003cspan id=\"modeLabel\"\u003eEstático - Amarillo\u003c\/span\u003e\n\u003c\/div\u003e\n        \u003cdiv class=\"modes-list\" id=\"modesList\"\u003e\u003c\/div\u003e\n\n        \u003cdiv style=\"margin-top:8px\"\u003e\n          \u003clabel style=\"font-weight:600\"\u003eDirección proyectada\u003c\/label\u003e\n          \u003cdiv style=\"display:flex;gap:8px;margin-top:8px\"\u003e\n            \u003cbutton class=\"mode-btn\" onclick=\"setDirection('left')\"\u003eIzquierda\u003c\/button\u003e\n            \u003cbutton class=\"mode-btn\" onclick=\"setDirection('right')\"\u003eDerecha\u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv style=\"margin-top:12px\"\u003e\n          \u003clabel style=\"font-weight:600\"\u003eInstalación rápida\u003c\/label\u003e\n          \u003cul style=\"margin:8px 0 0 18px;color:#444;font-size:14px\"\u003e\n            \u003cli\u003e\n\u003cstrong\u003eRojo\u003c\/strong\u003e: Giro\/stop (positivo)\u003c\/li\u003e\n            \u003cli\u003e\n\u003cstrong\u003eNegro\u003c\/strong\u003e: Masa \/ negativo\u003c\/li\u003e\n            \u003cli\u003e\n\u003cstrong\u003eAmarillo\u003c\/strong\u003e: Luz de posición \/ señal\u003c\/li\u003e\n          \u003c\/ul\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Specs --\u003e\n    \u003cdiv class=\"specs\"\u003e\n      \u003ch3 style=\"margin-top:0\"\u003eEspecificaciones técnicas\u003c\/h3\u003e\n      \u003ctable\u003e\n        \u003ctr\u003e\n\u003ctd style=\"width:45%\"\u003eFunciones\u003c\/td\u003e\n\u003ctd\u003eGiro, Stop, Posición\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003ctr\u003e\n\u003ctd\u003eModos\u003c\/td\u003e\n\u003ctd\u003e27 tipos de iluminación RGB (control magnético)\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003ctr\u003e\n\u003ctd\u003eProyección\u003c\/td\u003e\n\u003ctd\u003eFlecha luminosa en pavimento\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003ctr\u003e\n\u003ctd\u003eMaterial\u003c\/td\u003e\n\u003ctd\u003eCarcasa resistente al agua (IP65 aprox.)\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003ctr\u003e\n\u003ctd\u003ePeso del paquete\u003c\/td\u003e\n\u003ctd\u003e≤ 1 kg\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003ctr\u003e\n\u003ctd\u003eTamaño de la caja\u003c\/td\u003e\n\u003ctd\u003e~12 x 8 x 5 cm\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003ctr\u003e\n\u003ctd\u003eLongitud del cable\u003c\/td\u003e\n\u003ctd\u003e23 cm aprox.\u003c\/td\u003e\n\u003c\/tr\u003e\n      \u003c\/table\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- FAQ --\u003e\n    \u003cdiv class=\"faq\"\u003e\n      \u003ch3\u003ePreguntas frecuentes\u003c\/h3\u003e\n      \u003cdetails class=\"faq-item\"\u003e\u003csummary\u003e¿Es compatible con mi moto?\u003c\/summary\u003e\u003cdiv style=\"padding:8px 0;color:#444\"\u003eSí: su cableado universal (rojo\/negro\/amarillo) permite conexión en la mayoría de motos. Si tu modelo usa conectores específicos, puedes adaptar con conectores rápidos.\u003c\/div\u003e\u003c\/details\u003e\n      \u003cdetails class=\"faq-item\"\u003e\u003csummary\u003e¿Cómo se seleccionan los modos?\u003c\/summary\u003e\u003cdiv style=\"padding:8px 0;color:#444\"\u003eUsa el imán incluido en la zona magnética del pulsador para cambiar entre los 27 modos. Mantén pulsado para apagar\/encender.\u003c\/div\u003e\u003c\/details\u003e\n      \u003cdetails class=\"faq-item\"\u003e\u003csummary\u003e¿Proyecta la flecha con luces diurnas?\u003c\/summary\u003e\u003cdiv style=\"padding:8px 0;color:#444\"\u003eLa proyección es más evidente de noche o con superficies reflectantes. A plena luz del día la visibilidad disminuye.\u003c\/div\u003e\u003c\/details\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- CTA final y compra --\u003e\n    \u003cdiv id=\"comprar\" style=\"margin-top:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap\"\u003e\n      \u003ca class=\"cta\" href=\"#\" style=\"background:#ff7b00\"\u003eAgregar al carrito\u003c\/a\u003e\n      \u003cdiv style=\"color:#666\"\u003ePago seguro • Envío 24-72h • Garantía 30 días\u003c\/div\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n  \u003c!-- Sticky buy --\u003e\n  \u003ca href=\"#comprar\" class=\"sticky-buy\"\u003eComprar • $39.990\u003c\/a\u003e\n\n  \u003c!-- Scripts (auto-generate 12 demos que simulan parte de los 27 modos) --\u003e\n  \u003cscript\u003e\n    (function(){\n      const modes = [\n        {name:'Amarillo estático',color1:'#ffd07a',color2:'#ff9b00'},\n        {name:'Naranja cálido',color1:'#ffb36b',color2:'#ff7b00'},\n        {name:'Rojo intermitente',color1:'#ff7b7b',color2:'#ff3b3b',blink:true},\n        {name:'Verde',color1:'#9fe39f',color2:'#3ccf3c'},\n        {name:'Azul',color1:'#9fcfff',color2:'#2b9eff'},\n        {name:'RGB ciclo',cycle:true},\n        {name:'Blanco frío',color1:'#ffffff',color2:'#f1f1f1'},\n        {name:'Magenta',color1:'#ff9bd6',color2:'#ff57b1'},\n        {name:'Ámbar suave',color1:'#ffd89b',color2:'#ffb66b'}\n      ];\n\n      const modesList = document.getElementById('modesList');\n      const modeLabel = document.getElementById('modeLabel');\n      const arrow = document.getElementById('arrowProj');\n      const ground = document.getElementById('ground');\n\n      function applyMode(m){\n        modeLabel.textContent = m.name;\n        if(m.cycle){\n          let t=0; clearInterval(applyMode._int);\n          applyMode._int=setInterval(()=\u003e{\n            const h=(t%360); ground.style.background = `linear-gradient(180deg,hsl(${h} 60% 10%), #0f0f10)`;\n            arrow.style.filter = `drop-shadow(0 12px rgba(0,0,0,0.6))`;\n            arrow.querySelector('stop').setAttribute('stop-color', `hsl(${h} 85% 65%)`);\n            t+=6;\n          },120);\n        } else {\n          clearInterval(applyMode._int);\n          const c1 = m.color1 || '#ffd07a';\n          const c2 = m.color2 || m.color1 || '#ff9b00';\n          \/\/ update gradient stops inside svg\n          const stops = arrow.querySelectorAll('stop');\n          if(stops.length\u003e=2){stops[0].setAttribute('stop-color',c1);stops[1].setAttribute('stop-color',c2)}\n          \/\/ glow\n          arrow.style.filter = m.blink? 'drop-shadow(0 14px rgba(255,120,0,0.4))': 'drop-shadow(0 18px rgba(0,0,0,0.45))';\n          ground.style.background = 'linear-gradient(180deg,#1b1b1d,#0f0f10)';\n        }\n      }\n\n      \/\/ crear botones\n      modes.forEach((m,idx)=\u003e{\n        const b = document.createElement('button'); b.className='mode-btn'; b.textContent = m.name; b.onclick=()=\u003eapplyMode(m);\n        modesList.appendChild(b);\n        if(idx===0) applyMode(m);\n      });\n\n      \/\/ direccion\n      window.setDirection = function(dir){\n        if(dir==='left') arrow.style.transform='scaleX(-1)'; else arrow.style.transform='scaleX(1)';\n      }\n\n      \/\/ thumbs swap\n      document.querySelectorAll('.thumb').forEach(t=\u003et.addEventListener('click',function(){\n        const src = this.getAttribute('data-src'); if(!src) return; document.getElementById('mainImg').src = src;\n      }));\n\n    })();\n  \u003c\/script\u003e\n\u003c\/div\u003e\n","brand":"E-Komprar","offers":[{"title":"Default Title","offer_id":42171033616466,"sku":"ZXD153","price":79900.0,"currency_code":"COP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0567\/7917\/8066\/files\/ImagendeWhatsApp2025-10-03alas18.53.42_3c408028.jpg?v=1759815551","url":"https:\/\/ekomprar.myshopify.com\/products\/par-direccionales-rgb-flecha-zxd153","provider":"E-Komprar","version":"1.0","type":"link"}