INSTRUCCIONES PARA LA IA (leelas completas antes de responder)
Tu trabajo: armar una landing de producto (formato AIDA) para pegar en la DESCRIPCIÓN de un producto de Tiendanube.
Abajo de todo hay una PLANTILLA de código ya probada en tiendas reales. Vos NO programás nada: copiás la plantilla tal cual y SOLO cambiás los textos y colores del bloque "DATOS".
Al final de este mensaje la persona pegó: el LINK DEL PRODUCTO, los LINKS DE LAS IMÁGENES y (opcional) NOTAS.
======================================================================
PASO 1 — ENTENDÉ EL PRODUCTO
======================================================================
1. Abrí el LINK DEL PRODUCTO. Leé el TÍTULO, la DESCRIPCIÓN (si tiene) y el nombre de la TIENDA o MARCA.
2. Mirá las imágenes (las de la página y las de los links). Fijate qué es, para quién es y cómo se usa.
3. Si NO podés abrir el link (algunas IA no navegan): NO inventes el producto. Respondé solo: "No puedo abrir el link. Pegame el título y la descripción del producto." y esperá.
4. Si las NOTAS dicen algo distinto a la página, mandan las NOTAS.
======================================================================
PASO 2 — LOS COLORES
======================================================================
Si en las NOTAS ya están los colores (color de marca, fondo blanco o negro, color de contraste), usalos y pasá directo al PASO 3.
Si NO están, hacé SOLO estas 3 preguntas, juntas en un mensaje, y esperá la respuesta:
1. ¿Cuál es el COLOR DE TU MARCA? (código o nombre). Si no sabés: a) Verde #0E3A32 · b) Azul noche #1F2A44 · c) Bordó #5C1F2B · d) Negro #141210 · e) Terracota #A0492D · f) Rojo #C62828
2. ¿El FONDO lo querés BLANCO o NEGRO?
3. ¿Qué COLOR DE CONTRASTE para botones y detalles? Si no sabés: a) Dorado #C9A24A · b) Verde #1FA37A · c) Naranja #E8743B · d) Celeste #3BA7E8 · e) Negro #141210 · f) Blanco #FFFFFF
======================================================================
PASO 3 — COMPLETÁ EL BLOQUE "DATOS" (es lo único que cambiás)
======================================================================
- colorMarca y colorContraste: siempre en formato #xxxxxx. fondo: "blanco" o "negro".
- tienda: nombre de la marca en MAYÚSCULAS (va arriba de la columna de la comparativa). Si no lo encontrás: "NOSOTROS".
- producto: el título del producto, corto.
- imagenArriba: el PRIMER link de imagen que pegó la persona. imagenAbajo: el SEGUNDO. Si falta alguno, dejalo "" (vacío): la plantilla se acomoda sola. Usá SOLO los links que pegó la persona (no busques otras fotos).
- atencion: ["renglón fino","renglón en negrita"] con la promesa principal del producto (el resultado o la emoción, no la ficha técnica).
- interes: kicker "Qué estás comprando", titulo [fino, negrita] y texto de 3 o 4 líneas: para quién es y qué le resuelve.
- ficha: entre 5 y 8 pares ["ETIQUETA","dato"] sacados de la descripción, la página o las notas (material, medidas, qué incluye, uso…).
- deseo: kicker y titulo [fino, negrita].
- beneficios: EXACTAMENTE 3 pares ["título","frase"].
- comparaContra: contra quién se compara (ej. "Genérico").
- comparativa: EXACTAMENTE 6 ventajas cortas (máximo 6 palabras cada una).
- comoLlega: kicker, titulo [fino, negrita], texto, 2 pasos ["título","frase"] y un aviso final.
- whatsapp: solo si la persona lo pasó, con código de país y solo números (ej. "5493511234567"). Si no, "" (el botón no aparece).
- cierre: kicker, titulo [fino, negrita], boton ("Elegir y comprar") y una nota corta separada con " · ".
REGLAS DEL TEXTO (no negociables):
- Segunda persona, frases cortas, voseo rioplatense (vos, tenés, elegí).
- NO INVENTES nada que no esté en la página o en las notas: ni precios, ni porcentajes, ni cuotas, ni "envío gratis", ni plazos, ni reseñas, ni cantidad de clientes, ni años. Si un dato no está, escribí algo general que no prometa nada (ej. "Atención personalizada", "Compra segura").
- No copies precios de la página: cambian y la landing quedaría vieja.
- Nunca dejes corchetes, "completar", "XXX" ni textos de ejemplo de otra marca.
- Si un texto lleva comillas dobles adentro, escribilas como \" para no romper el código.
- Los acentos y la ñ se escriben normal.
======================================================================
PASO 4 — ENTREGA (muy importante)
======================================================================
- Respondé SOLO con el código, dentro de UN bloque de código (```html … ```), para que aparezca el botón "Copiar".
- Nada antes y nada después del bloque: ni saludo, ni "acá tenés", ni "colores definidos", ni explicaciones.
- El código empieza con <div id="pxl-root"></div> y termina con </script></p>.
- Copiá la PLANTILLA ENTERA, letra por letra: no la resumas, no la acortes, no saques líneas del CSS ni del JavaScript, no cambies nombres. Solo cambia lo que está entre las dos líneas de ==== del bloque DATOS.
- Antes de enviar, verificá que la anteúltima línea sea /* FIN-PLANTILLA-PXL */. Si no está, la copiaste incompleta: volvé a copiarla entera.
- Si tu respuesta se corta por largo, la persona va a escribir "seguí" y vos continuás EXACTAMENTE desde donde quedó, sin repetir ni explicar.
======================================================================
PLANTILLA (el ejemplo cargado es la landing de Cellphie para el Haylou Solar 5: reemplazá sus datos)
======================================================================
<div id="pxl-root"></div>
<p><script>
(function(){
/* ======================= DATOS (lo unico que se cambia) ======================= */
var D={
colorMarca:"#0E3A32",
colorContraste:"#1A7A62",
fondo:"blanco",
tienda:"CELLPHIE",
producto:"Haylou Solar 5 + 2 mallas",
imagenArriba:"https://acdn-us.mitiendanube.com/stores/001/395/398/products/fotos-web-870f4fd5d25621826917721453689621-1024-1024.webp",
imagenAbajo:"https://cdn.jsdelivr.net/gh/mateoquirogav/praxis-media@main/cellphie/haylou-malla-metalica.webp",
atencion:["Pantalla AMOLED, llamadas y 15 días de batería.","Y viene con dos mallas."],
interes:{kicker:"Qué estás comprando",titulo:["Un smartwatch completo","sin pagar lo que sale un Apple Watch."],texto:"Atiende llamadas por Bluetooth, mide lo que importa las 24 horas y aguanta dos semanas sin cargador. Viene con dos mallas, acero inoxidable y silicona negra, así que sirve para la oficina y para entrenar sin comprar nada aparte."},
ficha:[["Pantalla","AMOLED 1,58 pulgadas circular, 480 x 480 px a 60 Hz"],["Batería","360 mAh, hasta 15 días de uso típico"],["Llamadas","Bluetooth 5.3: hablás desde el reloj"],["Salud","Ritmo cardíaco, SpO2, sueño y estrés, 24/7"],["Deporte","Más de 100 modos, con sincronización a Strava"],["Resistencia","IP68, cuerpo de aleación y corona giratoria"],["En la caja","Malla de acero inoxidable y malla de silicona"]],
deseo:{kicker:"Por qué comprarlo acá",titulo:["Lo que no se ve en la foto","es lo que hace la diferencia."]},
beneficios:[["Dos mallas, un solo precio","La de acero para todos los días y la de silicona para entrenar. Vienen las dos."],["15 días sin buscar el cargador","Lo cargás cuando te acordás, no todas las noches. Carga magnética por atrás."],["Service propio","Si algo falla, lo vemos nosotros. No hay 0800 ni esperas."]],
comparaContra:"Marketplace",
comparativa:["6 meses de garantía escrita","Service propio, no un 0800","Dos locales a la calle","10% OFF por transferencia","Entrega en 0 a 2 días en Funes y Rosario","Te atiende quien te lo vendió"],
comoLlega:{kicker:"Cómo te llega",titulo:["Te lo llevamos","o pasás y te lo dan en la mano."],texto:"En Funes, Rosario y Roldán tenemos cadetería propia: llega entre 0 y 2 días hábiles. Al resto del país por Andreani o Correo Argentino.",pasos:[["Comprás y lo despachamos","Transferencia, tarjeta o cuotas, según lo que tengas a mano."],["O lo retirás en el local","Esperá el aviso de que está listo antes de venir."]],aviso:"¿Dudas con este modelo? Escribinos y te contestamos hoy."},
whatsapp:"5493413865533",
cierre:{kicker:"Llevátelo",titulo:["Llevatelo con las dos mallas","y con 6 meses de garantía."],boton:"Elegir y comprar",nota:"6 meses de garantía · service propio · 10% OFF por transferencia"}
};
/* ============================================================================== */
var M=D.colorMarca,K=D.colorContraste,N=(D.fondo||"").toLowerCase().indexOf("negro")>-1;
var BG=N?"#0E0E0E":"#FFFFFF",CARD=N?"#1A1A1A":"#F6F5F2",LN=N?"#2A2A2A":"#E6E2DC",TX=N?"#FFFFFF":"#1C1917",T2=N?"#B5B0A8":"#57534E",CRZ=N?"#D2694B":"#9C4A2F";
var KC="rgba(255,255,255,.8)";
function e(s){return String(s==null?"":s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");}
function tit(k,t){return '<p class="pxl-kick">'+e(k)+'</p><h2 class="pxl-t1">'+e(t[0])+'</h2><p class="pxl-t2">'+e(t[1]||"")+'</p>';}
var css=`
.pxl{box-sizing:border-box;width:100%;max-width:100%;background:${BG};color:${TX};font-family:Inter,Helvetica,Arial,sans-serif;line-height:1.6;text-align:left;padding:16px;margin:0 0 8px;border-radius:12px}
.pxl *{box-sizing:border-box}
:where(.pxl) :where(div,section,p,h2,h3,ul,li,a,img){margin:0!important;float:none!important}
.pxl img{max-width:100%;display:block}
.pxl h2,.pxl h3,.pxl p,.pxl ul,.pxl li{margin:0;padding:0;list-style:none;text-transform:none}
.pxl h2,.pxl h3{font-family:Poppins,Inter,sans-serif;letter-spacing:-.02em;color:inherit}
.pxl-kick{font-size:10px!important;font-weight:700;letter-spacing:.2em!important;text-transform:uppercase!important;color:${K}!important;margin:0 0 9px!important}
.pxl-t1{font-size:25px!important;font-weight:400!important;line-height:1.12!important;color:${TX}!important}
.pxl-t2{font-family:Poppins,Inter,sans-serif;font-size:25px!important;font-weight:700!important;line-height:1.12!important;letter-spacing:-.02em;color:${TX}!important;margin:0 0 4px!important}
.pxl-p{font-size:14.5px;line-height:1.68;color:${T2};margin:14px 0 0!important}
.pxl-a{position:relative;background:${M};overflow:hidden;border-radius:10px}
.pxl-a img{width:100%;height:330px;object-fit:cover;object-position:center 42%}
.pxl-cap{position:absolute;left:0;right:0;bottom:0;padding:80px 22px 22px;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,${M} 75%,transparent) 46%,${M} 100%)}
.pxl-plana .pxl-cap{position:relative;padding:34px 22px 28px;background:${M}}
.pxl-a .pxl-kick,.pxl-cta .pxl-kick{color:${KC}!important}
.pxl-a .pxl-t1,.pxl-a .pxl-t2,.pxl-cta .pxl-t1,.pxl-cta .pxl-t2{color:#fff!important}
.pxl-i,.pxl-d{padding:30px 2px 4px}
.pxl-dupla{margin-top:20px!important}
.pxl-dupla img{width:100%;border:1px solid ${LN};border-radius:10px;margin-bottom:16px!important;background:#fff}
.pxl-ficha{border-top:1px solid ${LN}}
.pxl-ficha li{padding:11px 0;border-bottom:1px solid ${LN}}
.pxl-ficha h3{font-family:Inter,sans-serif;font-size:10px!important;font-weight:700;letter-spacing:.11em;text-transform:uppercase!important;color:${K}!important;margin:0 0 3px!important}
.pxl-ficha p{font-size:14px;color:${TX};line-height:1.45}
.pxl-bens{margin:20px 0 0!important;display:grid;grid-template-columns:1fr;gap:12px}
.pxl-bens li{background:${CARD};border:1px solid ${LN};border-radius:10px;padding:15px 15px 16px}
.pxl-bens h3{font-size:15.5px!important;font-weight:700;color:${TX}!important}
.pxl-bens p{font-size:13px;line-height:1.5;color:${T2};margin-top:6px!important}
.pxl-vs{margin:26px 0 4px!important}
.pxl-vsin{position:relative;display:grid;grid-template-columns:1fr 132px 132px;background:${N?"#141414":"#fff"};border:1px solid ${LN};border-radius:22px;box-shadow:0 12px 34px rgba(0,0,0,${N?".4":".07"})}
.pxl-pilar{position:absolute;top:10px;right:142px;width:132px;height:calc(100% - 20px);background:${M};border-radius:18px;z-index:0}
.pxl-cel{position:relative;z-index:1;min-height:78px;display:flex;align-items:center;justify-content:center;padding:14px 10px;border-bottom:1px solid ${N?"#202020":"#F3F1EC"}}
.pxl-lbl{justify-content:flex-start;padding:16px 22px}
.pxl-lbl p{font-size:14.5px;font-weight:700;color:${TX};line-height:1.3}
.pxl-fin{border-bottom:0}
.pxl-h{min-height:88px}
.pxl-h p{font-family:Poppins,Inter,sans-serif;font-size:15px;font-weight:700;color:${TX};text-align:center}
.pxl-mine p{color:#fff}
.pxl-tic,.pxl-cruz{width:30px;height:30px;border-radius:50%;display:block;position:relative;flex:none}
.pxl-tic{background:#fff;box-shadow:0 0 0 1px ${LN}}
.pxl-tic:after{content:"";position:absolute;left:10px;top:7px;width:8px;height:14px;border-right:2.8px solid ${M};border-bottom:2.8px solid ${M};transform:rotate(42deg)}
.pxl-cruz{background:${CARD}}
.pxl-cruz:before,.pxl-cruz:after{content:"";position:absolute;left:8px;top:14px;width:14px;height:2.4px;background:${CRZ};border-radius:2px;transform:rotate(45deg)}
.pxl-cruz:after{transform:rotate(-45deg)}
.pxl-c{padding:30px 20px 28px;margin:28px 0 0!important;background:${CARD};border-top:1px solid ${LN};border-bottom:1px solid ${LN};border-radius:10px;counter-reset:pxp}
.pxl-pasos{margin:20px 0 0!important}
.pxl-pasos li{padding:14px 0 14px 34px;border-bottom:1px solid ${LN};counter-increment:pxp;position:relative}
.pxl-pasos li:before{content:"0" counter(pxp);position:absolute;left:0;top:15px;font-family:Poppins,Inter,sans-serif;font-size:17px;color:${K}}
.pxl-pasos li.pxl-aviso{padding-left:0;border-bottom:0}
.pxl-pasos li.pxl-aviso:before{content:none}
.pxl-pasos h3{font-size:15px!important;font-weight:700;color:${TX}!important}
.pxl-pasos p{font-size:13px;line-height:1.55;color:${T2};margin-top:5px!important}
.pxl-pasos .pxl-aviso p{font-size:14px;color:${TX};font-weight:600}
a.pxl-wa,a.pxl-btn{display:block!important;width:100%;border-radius:99px;padding:15px 18px;font-family:Poppins,Inter,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important;text-align:center;-webkit-text-fill-color:currentColor}
a.pxl-wa{margin-top:20px!important;background:${M}!important;color:#fff!important}
.pxl-piewa{margin:9px 0 0!important;text-align:center;font-size:12px;color:${T2}}
.pxl-cta{margin:28px 0 0!important;background:${M};padding:28px 22px 30px;border-radius:10px}
.pxl-cta .pxl-t2{margin-bottom:18px!important}
a.pxl-btn{background:${K}!important;color:${K.toLowerCase()=="#ffffff"||K.toLowerCase()=="#fff"?M:"#fff"}!important;padding:16px 18px}
.pxl-nota{margin:16px 0 0!important;font-size:12.5px;line-height:1.55;color:${KC}}
.pxl.pxl-w{padding:24px}
.pxl.pxl-w .pxl-t1,.pxl.pxl-w .pxl-t2{font-size:30px!important}
.pxl.pxl-w .pxl-a img{height:400px}
.pxl.pxl-w .pxl-cap{padding:100px 30px 28px}
.pxl.pxl-w .pxl-dupla{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.pxl.pxl-w .pxl-dupla img{margin-bottom:0!important}
.pxl.pxl-w .pxl-bens{grid-template-columns:repeat(3,1fr);gap:14px}
.pxl.pxl-w .pxl-c{padding:36px 30px 34px}
.pxl.pxl-w .pxl-cta{padding:32px 30px 34px}
.pxl.pxl-n .pxl-vsin{grid-template-columns:1fr 88px 88px}
.pxl.pxl-n .pxl-pilar{right:96px;width:88px;top:8px;height:calc(100% - 16px);border-radius:14px}
.pxl.pxl-n .pxl-lbl{padding:14px}
.pxl.pxl-n .pxl-lbl p{font-size:13px}
.pxl.pxl-n .pxl-cel{min-height:70px;padding:12px 6px}
.pxl.pxl-n .pxl-h{min-height:78px}
.pxl.pxl-n .pxl-h p{font-size:11px}
.pxl.pxl-n .pxl-tic,.pxl.pxl-n .pxl-cruz{width:26px;height:26px}
.pxl.pxl-n .pxl-tic:after{left:9px;top:6px;width:7px;height:12px}
.pxl.pxl-n .pxl-cruz:before,.pxl.pxl-n .pxl-cruz:after{left:7px;top:12px;width:12px}
.pxl-anim .pxl-sec{opacity:0;transform:translateY(16px)}
.pxl-anim .pxl-sec.pxl-in{animation:pxlUp .7s ease-out both}
@keyframes pxlUp{to{opacity:1;transform:none}}
.pxl-anim .pxl-bens li{opacity:0;transform:scale(.9)}
.pxl-anim .pxl-go .pxl-bens li{animation:pxlPop .8s cubic-bezier(.2,1.4,.4,1) both}
.pxl-anim .pxl-go .pxl-bens li:nth-child(2){animation-delay:.18s}
.pxl-anim .pxl-go .pxl-bens li:nth-child(3){animation-delay:.36s}
@keyframes pxlPop{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
.pxl-anim .pxl-pilar{clip-path:inset(0 0 100% 0)}
.pxl-anim .pxl-vsgo .pxl-pilar{animation:pxlBaja 6s cubic-bezier(.4,.05,.3,1) both}
@keyframes pxlBaja{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.pxl-anim .pxl-tic,.pxl-anim .pxl-cruz{opacity:0;transform:scale(.5)}
.pxl-anim .pxl-vsgo .pxl-tic,.pxl-anim .pxl-vsgo .pxl-cruz{animation:pxlMarca .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pxlMarca{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.pxl-pulso{animation:pxlPulso 1.3s ease-out 2}
@keyframes pxlPulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,${K} 60%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pxl-anim *{animation:none!important;opacity:1!important;transform:none!important}.pxl-anim .pxl-pilar{clip-path:none!important}}
`;
if(!document.getElementById("pxl-css")){var st=document.createElement("style");st.id="pxl-css";st.textContent=css;document.head.appendChild(st);}
/* ---- arma la landing en CADA copia de la descripcion (el tema repite una para PC y otra para celular) ---- */
function armar(root){
/* ---- HTML ---- */
var h='<div class="pxl">';
if(D.imagenArriba){h+='<section class="pxl-a pxl-sec"><img src="'+e(D.imagenArriba)+'" alt="'+e(D.producto)+'"><div class="pxl-cap">'+tit(D.producto,D.atencion)+'</div></section>';}
else{h+='<section class="pxl-a pxl-plana pxl-sec"><div class="pxl-cap">'+tit(D.producto,D.atencion)+'</div></section>';}
h+='<section class="pxl-i pxl-sec">'+tit(D.interes.kicker,D.interes.titulo)+'<p class="pxl-p">'+e(D.interes.texto)+'</p><div class="pxl-dupla"'+(D.imagenAbajo?'':' style="display:block"')+'>';
if(D.imagenAbajo)h+='<img loading="lazy" src="'+e(D.imagenAbajo)+'" alt="'+e(D.producto)+'">';
h+='<ul class="pxl-ficha">';D.ficha.forEach(function(f){h+='<li><h3>'+e(f[0])+'</h3><p>'+e(f[1])+'</p></li>';});h+='</ul></div></section>';
h+='<section class="pxl-d pxl-sec">'+tit(D.deseo.kicker,D.deseo.titulo)+'<ul class="pxl-bens">';
D.beneficios.forEach(function(b){h+='<li><h3>'+e(b[0])+'</h3><p>'+e(b[1])+'</p></li>';});
h+='</ul><div class="pxl-vs"><div class="pxl-vsin"><div class="pxl-pilar"></div><div class="pxl-cel pxl-h"></div><div class="pxl-cel pxl-h pxl-mine"><p>'+e(D.tienda||"Nosotros")+'</p></div><div class="pxl-cel pxl-h"><p>'+e(D.comparaContra||"Genérico")+'</p></div>';
var F=D.comparativa,n=F.length;
F.forEach(function(r,i){var fin=i==n-1?' pxl-fin':'';h+='<div class="pxl-cel pxl-lbl'+fin+'"><p>'+e(r)+'</p></div><div class="pxl-cel'+fin+'"><p class="pxl-tic"></p></div><div class="pxl-cel'+fin+'"><p class="pxl-cruz"></p></div>';});
h+='</div></div></section>';
var C=D.comoLlega;
h+='<section class="pxl-c pxl-sec">'+tit(C.kicker,C.titulo)+(C.texto?'<p class="pxl-p">'+e(C.texto)+'</p>':'')+'<ul class="pxl-pasos">';
C.pasos.forEach(function(s){h+='<li><h3>'+e(s[0])+'</h3><p>'+e(s[1])+'</p></li>';});
if(C.aviso)h+='<li class="pxl-aviso"><p>'+e(C.aviso)+'</p></li>';
h+='</ul>';
var wa=String(D.whatsapp||"").replace(/\D/g,"");
if(wa)h+='<a class="pxl-wa" target="_blank" rel="noopener" href="https://wa.me/'+wa+'?text='+encodeURIComponent("Hola! Quiero consultar por "+D.producto)+'">Consultar por WhatsApp</a><p class="pxl-piewa">Te respondemos por stock, plazos o compatibilidad.</p>';
h+='</section>';
var Z=D.cierre;
h+='<section class="pxl-cta pxl-sec">'+tit(Z.kicker,Z.titulo)+'<a class="pxl-btn" href="#product_form">'+e(Z.boton||"Elegir y comprar")+'</a>'+(Z.nota?'<p class="pxl-nota">'+e(Z.nota)+'</p>':'')+'</section>';
h+='</div>';
root.innerHTML=h;
/* ---- tiempos de la comparativa: el tilde aparece cuando el pilar le pasa ---- */
var paso=.92,arr=.5;
[].forEach.call(root.querySelectorAll(".pxl-tic"),function(t,i){t.style.animationDelay=(arr+paso*i)+"s";});
[].forEach.call(root.querySelectorAll(".pxl-cruz"),function(t,i){t.style.animationDelay=(arr+paso*(i+.45))+"s";});
/* ---- boton final: baja al boton de compra y lo marca ---- */
var btn=root.querySelector(".pxl-btn");
btn.addEventListener("click",function(ev){
var f=document.querySelector("#product_form")||document.querySelector("form[action*='cart']");
if(!f)return;ev.preventDefault();
f.scrollIntoView({behavior:"smooth",block:"center"});
var b=f.querySelector("[type=submit],.js-addtocart");
if(b){b.classList.remove("pxl-pulso");void b.offsetWidth;b.classList.add("pxl-pulso");}
});
/* ---- animaciones al entrar en pantalla (revisa en cada scroll; no depende de IntersectionObserver) ---- */
var P=root.querySelector(".pxl");
P.classList.add("pxl-anim");
}
var PX=window.__pxlRev||(window.__pxlRev={});
function revisar(){
var H=window.innerHeight||document.documentElement.clientHeight;
[].forEach.call(document.querySelectorAll(".pxl"),function(P){var w=P.clientWidth;if(!w)return;P.classList.toggle("pxl-w",w>=700);P.classList.toggle("pxl-n",w<=520);});
[].forEach.call(document.querySelectorAll(".pxl-anim"),function(P){
if(!P.offsetParent&&P.getClientRects().length==0)return;
[].forEach.call(P.querySelectorAll(".pxl-sec:not(.pxl-in)"),function(s){if(s.getBoundingClientRect().top<H*.88)s.classList.add("pxl-in");});
var b=P.querySelector(".pxl-bens"),d=P.querySelector(".pxl-d");if(b&&d&&b.getBoundingClientRect().top<H*.85)d.classList.add("pxl-go");
var v=P.querySelector(".pxl-vs");if(v&&v.getBoundingClientRect().top<H*.75)v.classList.add("pxl-vsgo");
});
}
if(!PX.on){PX.on=1;var raf=0;
var tick=function(){if(raf)return;raf=requestAnimationFrame(function(){raf=0;revisar();});};
document.addEventListener("scroll",tick,{passive:true,capture:true});window.addEventListener("resize",tick);window.addEventListener("load",revisar);
var n=0,iv=setInterval(function(){revisar();if(++n>60)clearInterval(iv);},500);
setTimeout(revisar,50);
}
function todas(){[].forEach.call(document.querySelectorAll('[id="pxl-root"]'),function(r){if(r.getAttribute("data-ok"))return;r.setAttribute("data-ok","1");armar(r);});}
todas();revisar();
if(document.readyState=="loading")document.addEventListener("DOMContentLoaded",todas);
})();
/* FIN-PLANTILLA-PXL */
</script></p>
======================================================================
LO QUE PEGA LA PERSONA (debajo de esta línea)
======================================================================
LINK DEL PRODUCTO:
LINKS DE LAS IMÁGENES (el primero va arriba, el segundo abajo):
NOTAS (opcional: colores, WhatsApp, datos del producto, envío, garantía, lo que quieras):
PRAXIS · diseño de tiendas Tiendanube