diff --git a/workloads/ecommerce/index.html b/workloads/ecommerce/index.html
index f3ce57d..cbec29b 100644
--- a/workloads/ecommerce/index.html
+++ b/workloads/ecommerce/index.html
@@ -1,61 +1,87 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="es">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ari Shoping Shop</title>
-    <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; background-color: #f2f8fd; color: #333; }
-        .header { background-color: #0071dc; padding: 15px 30px; display: flex; align-items: center; justify-content: space-between; color: white; }
-        .logo { font-size: 24px; font-weight: bold; letter-spacing: 1px; }
-        .search-bar { flex: 1; margin: 0 40px; padding: 12px 20px; border: none; border-radius: 24px; font-size: 16px; outline: none; }
-        .container { max-width: 1200px; margin: 40px auto; display: flex; gap: 30px; padding: 0 20px; }
-        .product-gallery { flex: 1; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: center; }
-        .product-gallery img { max-width: 100%; height: auto; max-height: 400px; }
-        .product-info { flex: 1; display: flex; flex-direction: column; }
-        .brand { color: #0071dc; font-weight: 600; text-decoration: underline; cursor: pointer; margin-bottom: 8px; display: inline-block; }
-        .title { font-size: 28px; font-weight: 400; margin: 0 0 15px 0; line-height: 1.3; }
-        .price { font-size: 42px; font-weight: 700; color: #b12704; margin: 0 0 20px 0; display: flex; align-items: flex-start; }
-        .price span { font-size: 20px; margin-top: 5px; margin-right: 4px; }
-        .stock-status { color: #008a00; font-weight: bold; font-size: 18px; margin-bottom: 20px; }
-        .buy-box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e3e4e6; }
-        .btn { width: 100%; padding: 15px; border-radius: 24px; font-size: 16px; font-weight: bold; cursor: pointer; border: none; margin-bottom: 12px; transition: background-color 0.2s; }
-        .btn-cart { background-color: #ffd814; color: #0f1111; }
-        .btn-cart:hover { background-color: #f7ca00; }
-        .btn-buy { background-color: #ffa41c; color: #0f1111; }
-        .btn-buy:hover { background-color: #fa8900; }
-        .features { margin-top: 30px; font-size: 15px; line-height: 1.6; }
-        .features li { margin-bottom: 8px; }
-    </style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="Ari Shopping: juguetes, minifiguras, bolsos y regalos en un solo lugar.">
+  <meta name="theme-color" content="#121318">
+  <title>Ari Shopping | Tu tienda online</title>
+  <style>
+    :root{--ink:#17181d;--muted:#6c6e75;--line:#e9e6e1;--soft:#f7f5f2;--brand:#cc2b63;--brand2:#a31f4c;--gold:#f3b33f;--ok:#168252;--shadow:0 18px 55px rgba(20,20,24,.12);--r:22px;--max:1220px}
+    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff}button,input{font:inherit}a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}.wrap{width:min(calc(100% - 32px),var(--max));margin:auto}
+    .top{padding:9px 15px;color:#fff;background:var(--ink);font-size:.85rem;text-align:center}.top b{color:#ffd582}
+    header{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(233,230,225,.9);background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
+    .head{min-height:76px;display:grid;grid-template-columns:auto minmax(250px,1fr) auto;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.logo{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#111 20%,var(--brand));font:italic 700 1.2rem Georgia;box-shadow:0 8px 22px rgba(204,43,99,.25)}.brand strong{display:block}.brand small{display:block;color:var(--muted)}
+    .search{position:relative}.search span{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--muted)}.search input{width:100%;height:48px;padding:0 18px 0 46px;border:1px solid var(--line);border-radius:999px;outline:none;background:var(--soft)}.search input:focus{border-color:#dc86a6;box-shadow:0 0 0 4px rgba(204,43,99,.1);background:#fff}
+    .actions{display:flex;gap:9px}.btn,.icon{border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.btn{height:44px;padding:0 18px}.btn.primary{border-color:var(--brand);color:#fff;background:var(--brand)}.icon{position:relative;width:44px;height:44px;display:grid;place-items:center}.count{position:absolute;right:-3px;top:-5px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border:2px solid #fff;border-radius:99px;color:#fff;background:var(--brand);font-size:.67rem}
+    nav{border-top:1px solid var(--line)}.nav{min-height:46px;display:flex;align-items:center;gap:7px;overflow:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{padding:8px 14px;border:0;border-radius:999px;color:#555861;background:transparent;white-space:nowrap;cursor:pointer;font-weight:700}.nav button:hover,.nav button.active{color:var(--brand2);background:#fff0f5}
+    .hero{padding:42px 0 18px}.heroGrid{min-height:510px;display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,#fff7fa,#f0dbe4);box-shadow:var(--shadow)}.heroCopy{align-self:center;padding:clamp(34px,6vw,72px)}.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(204,43,99,.2);border-radius:999px;color:var(--brand2);background:rgba(255,255,255,.7);font-size:.78rem;font-weight:850;text-transform:uppercase}.dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}h1{max-width:680px;margin:22px 0 0;font-size:clamp(2.7rem,5.2vw,5rem);line-height:.97;letter-spacing:-.065em}h1 em{color:var(--brand);font-family:Georgia;font-weight:500}.hero p{max-width:590px;margin:23px 0 29px;color:#555861;font-size:1.08rem;line-height:1.65}.heroActions{display:flex;flex-wrap:wrap;gap:11px}.cta{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(23,24,29,.12);border-radius:999px;background:rgba(255,255,255,.78);font-weight:850}.cta.primary{border-color:var(--brand);color:#fff;background:var(--brand);box-shadow:0 12px 28px rgba(204,43,99,.24)}.heroMedia{position:relative;min-height:480px}.heroMedia img{height:100%;min-height:480px}.heroMedia:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#efdfe5 0%,transparent 25%)}.float{position:absolute;right:24px;bottom:24px;z-index:2;max-width:250px;padding:18px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.91);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.float strong{display:block;margin-bottom:5px}.float span{color:var(--muted);font-size:.85rem;line-height:1.45}
+    .trust{padding:18px 0 24px}.trustGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.trustCard{padding:18px;display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:15px}.trustIcon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--brand2);background:#fff0f5;font-size:1.2rem}.trustCard strong{display:block;font-size:.93rem}.trustCard small{color:var(--muted)}
+    section.block{padding:72px 0}.soft{background:var(--soft)}.heading{margin-bottom:28px;display:flex;align-items:end;justify-content:space-between;gap:20px}.heading h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em}.heading p{max-width:520px;margin:8px 0 0;color:var(--muted);line-height:1.55}.link{color:var(--brand2);font-weight:850;white-space:nowrap}
+    .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cat{position:relative;min-height:300px;overflow:hidden;border-radius:var(--r);cursor:pointer;box-shadow:0 8px 28px rgba(20,20,24,.07)}.cat img{height:100%;min-height:300px;transition:.35s}.cat:hover img{transform:scale(1.045)}.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,9,11,.82))}.catText{position:absolute;left:20px;right:20px;bottom:19px;z-index:2;color:#fff}.catText strong{display:block;font-size:1.2rem}.catText small{color:rgba(255,255,255,.78)}
+    .filters{margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px}.filter{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-weight:750}.filter.active{border-color:var(--ink);color:#fff;background:var(--ink)}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.pic{position:relative;aspect-ratio:1/1.05;overflow:hidden;background:#eee}.pic img{height:100%;transition:.32s}.card:hover .pic img{transform:scale(1.035)}.badge{position:absolute;left:13px;top:13px;padding:7px 10px;border-radius:99px;color:#fff;background:var(--ink);font-size:.7rem;font-weight:850}.badge.sale{background:var(--brand)}.body{padding:16px}.kicker{color:var(--brand2);font-size:.72rem;font-weight:850;text-transform:uppercase}.body h3{min-height:47px;margin:8px 0 10px;font-size:1rem;line-height:1.4}.rating{margin-bottom:12px;color:#e29a1a;font-size:.82rem}.rating span{color:var(--muted)}.foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.price{font-size:1.15rem;font-weight:900}.price del{display:block;color:#9a9ba0;font-size:.75rem;font-weight:600}.add{width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:var(--brand);cursor:pointer;font-size:1.3rem}.empty{grid-column:1/-1;padding:50px;text-align:center;color:var(--muted);border:1px dashed #d4d0ca;border-radius:var(--r);background:#fff}
+    .insta{padding:80px 0;color:#fff;background:radial-gradient(circle at 15% 0%,rgba(204,43,99,.6),transparent 36%),linear-gradient(135deg,#15161b,#28262d)}.instaGrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}.insta h2{margin:20px 0 16px;font-size:clamp(2.3rem,4.5vw,4.1rem);line-height:1;letter-spacing:-.055em}.insta p{max-width:520px;margin:0 0 25px;color:rgba(255,255,255,.75);line-height:1.65}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tile{aspect-ratio:1;overflow:hidden;border-radius:16px}.tile img{height:100%;transition:.3s}.tile:hover img{transform:scale(1.05)}
+    footer{padding:50px 0 24px;color:rgba(255,255,255,.74);background:#121318}.footerGrid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:35px}.footerGrid h3{margin:0 0 15px;color:#fff;font-size:.95rem}.links{display:grid;gap:10px;font-size:.87rem}.about{max-width:350px;line-height:1.6}.bottom{margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem}
+    .overlay{position:fixed;inset:0;z-index:80;opacity:0;visibility:hidden;background:rgba(8,9,11,.55);transition:.2s}.overlay.open{opacity:1;visibility:visible}.drawer{position:fixed;right:0;top:0;z-index:90;width:min(430px,100%);height:100%;padding:24px;display:flex;flex-direction:column;transform:translateX(100%);background:#fff;box-shadow:-20px 0 60px rgba(0,0,0,.2);transition:.24s}.drawer.open{transform:none}.drawerHead{padding-bottom:17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.drawerHead h2{margin:0}.close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:1.2rem}.cartList{flex:1;overflow:auto}.cartEmpty{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center}.cartItem{padding:14px 0;display:grid;grid-template-columns:68px 1fr auto;gap:11px;align-items:center;border-bottom:1px solid var(--line)}.cartItem img{width:68px;height:68px;border-radius:11px}.cartItem strong{display:block;font-size:.88rem}.cartItem small{color:var(--brand2);font-weight:800}.remove{border:0;color:#9f2929;background:none;cursor:pointer}.drawerFoot{padding-top:16px;border-top:1px solid var(--line)}.total{margin-bottom:14px;display:flex;justify-content:space-between;font-weight:900}.drawerFoot .cta{width:100%}.toast{position:fixed;left:50%;bottom:24px;z-index:100;padding:12px 17px;opacity:0;transform:translate(-50%,15px);border-radius:99px;color:#fff;background:var(--ink);box-shadow:var(--shadow);transition:.18s;pointer-events:none;font-weight:750}.toast.show{opacity:1;transform:translate(-50%,0)}
+    @media(max-width:1000px){.head{grid-template-columns:auto 1fr auto;gap:13px}.brandText{display:none}.actions .btn{display:none}.heroGrid,.instaGrid{grid-template-columns:1fr}.heroMedia,.heroMedia img{min-height:380px}.heroMedia:after{background:linear-gradient(180deg,#efdfe5 0%,transparent 22%)}.cats,.products{grid-template-columns:repeat(2,1fr)}.footerGrid{grid-template-columns:repeat(2,1fr)}}
+    @media(max-width:680px){.wrap{width:min(calc(100% - 20px),var(--max))}.head{padding:11px 0}.logo{width:41px;height:41px}.search input{height:42px;font-size:.85rem}.hero{padding-top:20px}.heroCopy{padding:34px 23px}.heroMedia,.heroMedia img{min-height:315px}.float{left:15px;right:15px;bottom:15px;max-width:none}.trustGrid{grid-template-columns:1fr}section.block{padding:52px 0}.heading{align-items:flex-start;flex-direction:column}.cats{display:flex;overflow:auto;scroll-snap-type:x mandatory}.cat{min-width:78vw;scroll-snap-align:start}.products{gap:12px}.body{padding:13px}.body h3{min-height:58px;font-size:.92rem}.footerGrid{grid-template-columns:1fr}.bottom{flex-direction:column}}
+    @media(max-width:430px){.products{grid-template-columns:1fr}.body h3{min-height:0}.heroActions .cta{width:100%}}
+  </style>
 </head>
 <body>
-    <header class="header">
-        <div class="logo">CruzCloud Shop</div>
-        <input type="text" class="search-bar" placeholder="Busca servidores, networking y más...">
-        <div class="account">Hola, Cristian</div>
-    </header>
-    <main class="container">
-        <div class="product-gallery">
-            <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&q=80&w=1000" alt="Servidor de alto rendimiento">
-        </div>
-        <div class="product-info">
-            <span class="brand">Visita la tienda de Infraestructura</span>
-            <h1 class="title">Servidor ZimaBoard 832 - Single Board Server para k3d y Docker (8GB RAM, 32GB eMMC)</h1>
-            <div class="price"><span>$</span>199<span>00</span></div>
-            
-            <div class="buy-box">
-                <div class="stock-status">Disponible.</div>
-                <button class="btn btn-cart">Agregar al carrito</button>
-                <button class="btn btn-buy">Comprar ahora</button>
-            </div>
+  <div class="top"><b>Envíos seguros</b> · Pagos fáciles · Atención personalizada</div>
+  <header>
+    <div class="wrap head">
+      <a class="brand" href="#inicio"><span class="logo">ARI</span><span class="brandText"><strong>Ari Shopping</strong><small>Detalles que te encantan</small></span></a>
+      <label class="search"><span>⌕</span><input id="search" type="search" placeholder="Buscar juguetes, bolsos, regalos..."></label>
+      <div class="actions"><a class="btn primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Escríbenos</a><button id="cartBtn" class="icon" aria-label="Abrir carrito">🛒<span id="count" class="count">0</span></button></div>
+    </div>
+    <nav><div class="wrap nav" id="nav"></div></nav>
+  </header>
 
-            <ul class="features">
-                <li><strong>Procesador:</strong> Intel Celeron N3450 Quad-Core.</li>
-                <li><strong>Memoria:</strong> 8GB LPDDR4.</li>
-                <li><strong>Conectividad:</strong> Dual Gigabit Ethernet.</li>
-                <li><strong>Ideal para:</strong> Self-hosting, edge computing y laboratorios GitOps.</li>
-            </ul>
-        </div>
-    </main>
+  <main id="inicio">
+    <section class="hero"><div class="wrap"><div class="heroGrid">
+      <div class="heroCopy"><span class="tag"><span class="dot"></span>Nueva colección</span><h1>Encuentra ese detalle que hace el día más <em>especial.</em></h1><p>Juguetes, minifiguras, bolsos y regalos seleccionados para sorprender. Compra fácil y recibe atención personalizada.</p><div class="heroActions"><a class="cta primary" href="#productos">Explorar productos</a><a class="cta" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Ver Instagram</a></div></div>
+      <div class="heroMedia"><img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=1200&q=85" alt="Juguetes coloridos"><div class="float"><strong>Compra con acompañamiento</strong><span>Te ayudamos a elegir, confirmar disponibilidad y coordinar tu envío.</span></div></div>
+    </div></div></section>
+
+    <section class="trust"><div class="wrap trustGrid"><article class="trustCard"><span class="trustIcon">🚚</span><div><strong>Envíos seguros</strong><small>Coordinación y seguimiento.</small></div></article><article class="trustCard"><span class="trustIcon">💳</span><div><strong>Pagos fáciles</strong><small>Opciones claras para comprar.</small></div></article><article class="trustCard"><span class="trustIcon">💗</span><div><strong>Atención cercana</strong><small>Antes y después de tu compra.</small></div></article></div></section>
+
+    <section class="block"><div class="wrap"><div class="heading"><div><h2>Compra por categoría</h2><p>Encuentra rápido el regalo, juguete o accesorio ideal.</p></div><a class="link" href="#productos">Ver todo →</a></div><div class="cats">
+      <article class="cat" data-cat="juguetes"><img src="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82" alt="Juguetes"><div class="catText"><strong>Juguetes</strong><small>Diversión para todas las edades</small></div></article>
+      <article class="cat" data-cat="minifiguras"><img src="https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82" alt="Minifiguras"><div class="catText"><strong>Minifiguras</strong><small>Personajes para coleccionar</small></div></article>
+      <article class="cat" data-cat="bolsos"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82" alt="Mochilas"><div class="catText"><strong>Bolsos y mochilas</strong><small>Estilo para cada aventura</small></div></article>
+      <article class="cat" data-cat="regalos"><img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82" alt="Regalos"><div class="catText"><strong>Regalos</strong><small>Detalles que emocionan</small></div></article>
+    </div></div></section>
+
+    <section id="productos" class="block soft"><div class="wrap"><div class="heading"><div><h2>Productos destacados</h2><p>Catálogo demostrativo listo para conectarse después con el microservicio de productos.</p></div><a class="link" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Consultar disponibilidad →</a></div><div id="filters" class="filters"></div><div id="products" class="products"></div></div></section>
+
+    <section class="insta"><div class="wrap instaGrid"><div><span class="tag"><span class="dot"></span>@ari_shopping1</span><h2>Descubre novedades todos los días.</h2><p>Sigue la cuenta para conocer productos recién llegados, promociones y disponibilidad. La tienda online transformará esa comunidad en una experiencia de compra completa.</p><a class="cta primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Seguir en Instagram</a></div><div class="tiles"><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=500&q=80" alt="Producto"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=500&q=80" alt="Juguetes"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=500&q=80" alt="Mochila"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=500&q=80" alt="Regalo"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=500&q=80" alt="Juguetes"></a><a class="tile" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/"><img src="https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=500&q=80" alt="Regalos"></a></div></div></section>
+  </main>
+
+  <footer><div class="wrap"><div class="footerGrid"><div><a class="brand" href="#inicio"><span class="logo">ARI</span><span><strong style="color:#fff">Ari Shopping</strong><small style="display:block;color:#aaa">Tu tienda virtual</small></span></a><p class="about">Variedad de productos y marcas en un solo lugar, con atención personalizada y una experiencia de compra cada vez más completa.</p></div><div><h3>Comprar</h3><div class="links"><a href="#productos">Productos</a><a href="#productos">Novedades</a><a href="#productos">Ofertas</a></div></div><div><h3>Ayuda</h3><div class="links"><a target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Contacto</a><a href="#">Envíos</a><a href="#">Cambios y devoluciones</a></div></div><div><h3>Síguenos</h3><div class="links"><a target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Instagram @ari_shopping1</a><a href="#">WhatsApp próximamente</a></div></div></div><div class="bottom"><span>© <span id="year"></span> Ari Shopping.</span><span>Front MVP listo para evolución a microservicios.</span></div></div></footer>
+
+  <div id="overlay" class="overlay"></div><aside id="drawer" class="drawer" aria-hidden="true"><div class="drawerHead"><h2>Tu carrito</h2><button id="close" class="close">×</button></div><div id="cartList" class="cartList"></div><div class="drawerFoot"><div class="total"><span>Total estimado</span><span id="total">$0</span></div><a class="cta primary" target="_blank" rel="noopener" href="https://www.instagram.com/ari_shopping1/">Finalizar por Instagram</a></div></aside><div id="toast" class="toast"></div>
+
+  <script>
+    const data=[
+      {id:1,n:'Figura coleccionable edición especial',c:'minifiguras',tag:'Nuevo',p:79000,old:0,img:'https://images.unsplash.com/photo-1560961911-ba7ef651a56c?auto=format&fit=crop&w=800&q=82'},
+      {id:2,n:'Set creativo de bloques y personajes',c:'juguetes',tag:'Favorito',p:119000,old:139000,img:'https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?auto=format&fit=crop&w=800&q=82'},
+      {id:3,n:'Mochila urbana compacta',c:'bolsos',tag:'Nuevo',p:89000,old:0,img:'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=82'},
+      {id:4,n:'Caja sorpresa para regalo',c:'regalos',tag:'Oferta',p:59000,old:69000,img:'https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=800&q=82'},
+      {id:5,n:'Vehículo de juguete colección',c:'juguetes',tag:'Nuevo',p:69000,old:0,img:'https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&w=800&q=82'},
+      {id:6,n:'Kit de arte y creatividad',c:'regalos',tag:'Favorito',p:74000,old:0,img:'https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=800&q=82'},
+      {id:7,n:'Figura decorativa de colección',c:'minifiguras',tag:'Oferta',p:65000,old:79000,img:'https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&w=800&q=82'},
+      {id:8,n:'Bolso casual de uso diario',c:'bolsos',tag:'Nuevo',p:99000,old:0,img:'https://images.unsplash.com/photo-1559563458-527698bf5295?auto=format&fit=crop&w=800&q=82'}
+    ];
+    const labels={todos:'Todos',nuevo:'Lo nuevo',juguetes:'Juguetes',minifiguras:'Minifiguras',bolsos:'Bolsos',regalos:'Regalos',ofertas:'Ofertas'},state={f:'todos',q:'',cart:[]},money=new Intl.NumberFormat('es-CO',{style:'currency',currency:'COP',maximumFractionDigits:0});
+    const $=s=>document.querySelector(s), nav=$('#nav'),filters=$('#filters'),grid=$('#products'),search=$('#search'),drawer=$('#drawer'),overlay=$('#overlay'),cartList=$('#cartList');
+    function match(x,f){return f==='todos'||f==='nuevo'&&x.tag==='Nuevo'||f==='ofertas'&&x.old||x.c===f}function renderNav(){nav.innerHTML=Object.entries(labels).map(([k,v])=>`<button data-filter="${k}" class="${state.f===k?'active':''}">${v}</button>`).join('');filters.innerHTML=Object.entries(labels).map(([k,v])=>`<button data-filter="${k}" class="filter ${state.f===k?'active':''}">${v}</button>`).join('')}
+    function render(){renderNav();const q=state.q.trim().toLowerCase(),rows=data.filter(x=>match(x,state.f)&&(!q||(x.n+' '+x.c).toLowerCase().includes(q)));grid.innerHTML=rows.length?rows.map(x=>`<article class="card"><div class="pic"><img loading="lazy" src="${x.img}" alt="${x.n}"><span class="badge ${x.old?'sale':''}">${x.tag}</span></div><div class="body"><span class="kicker">${labels[x.c]}</span><h3>${x.n}</h3><div class="rating">★★★★★ <span>4.8</span></div><div class="foot"><div class="price">${money.format(x.p)}${x.old?`<del>${money.format(x.old)}</del>`:''}</div><button class="add" data-add="${x.id}" aria-label="Agregar">+</button></div></div></article>`).join(''):'<div class="empty"><strong>No encontramos productos.</strong><br>Prueba otra búsqueda o categoría.</div>'}
+    function toast(t){const el=$('#toast');el.textContent=t;el.classList.add('show');clearTimeout(toast.t);toast.t=setTimeout(()=>el.classList.remove('show'),2000)}function add(id){const x=data.find(p=>p.id===id),e=state.cart.find(p=>p.id===id);e?e.qty++:state.cart.push({...x,qty:1});renderCart();toast('Producto agregado al carrito')}function remove(id){state.cart=state.cart.filter(x=>x.id!==id);renderCart()}
+    function renderCart(){const n=state.cart.reduce((s,x)=>s+x.qty,0),t=state.cart.reduce((s,x)=>s+x.p*x.qty,0);$('#count').textContent=n;$('#total').textContent=money.format(t);cartList.innerHTML=state.cart.length?state.cart.map(x=>`<div class="cartItem"><img src="${x.img}" alt="${x.n}"><div><strong>${x.n}</strong><small>${money.format(x.p)} · Cant. ${x.qty}</small></div><button class="remove" data-remove="${x.id}">Eliminar</button></div>`).join(''):'<div class="cartEmpty"><div><strong>Tu carrito está vacío</strong><br><small>Agrega productos para comenzar.</small></div></div>'}
+    function openCart(){drawer.classList.add('open');overlay.classList.add('open');drawer.setAttribute('aria-hidden','false')}function closeCart(){drawer.classList.remove('open');overlay.classList.remove('open');drawer.setAttribute('aria-hidden','true')}
+    document.addEventListener('click',e=>{const f=e.target.closest('[data-filter]'),cat=e.target.closest('[data-cat]'),a=e.target.closest('[data-add]'),r=e.target.closest('[data-remove]');if(f||cat){state.f=(f?.dataset.filter||cat.dataset.cat);render();$('#productos').scrollIntoView({behavior:'smooth'})}if(a)add(+a.dataset.add);if(r)remove(+r.dataset.remove)});search.addEventListener('input',e=>{state.q=e.target.value;render()});$('#cartBtn').onclick=openCart;$('#close').onclick=closeCart;overlay.onclick=closeCart;document.addEventListener('keydown',e=>{if(e.key==='Escape')closeCart()});$('#year').textContent=new Date().getFullYear();render();renderCart();
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
