<!doctype html>
<html lang="es" class="scroll-smooth"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="krono-catalog-api" content="https://api.kronostudiove.com/api/v1">
<meta name="description" content="Krono Studio · Relojería, streetwear WGT y accesorios. Catálogo y pedidos en Tucupita, Delta Amacuro.">
<title>KRONO. | Timepieces & WGT Streetwear</title>
<link rel="stylesheet" href="assets/tailwind.css?v=529f36031cb30264"><link rel="stylesheet" href="assets/storefront.css?v=389d095a35ee1cdb"><link rel="stylesheet" href="assets/catalog-live.css?v=40c3a7d71584942e">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script defer src="js/storefront.js?v=b48e59dd5c699876"></script><script defer src="js/site-client.js?v=d218e6a5db94fa79"></script><script defer src="js/receipt-client.js?v=2be72fe8914a3168"></script><script defer src="js/order-client.js?v=fc9645599972f909"></script><script defer src="js/quote-client.js?v=941a0415aa8022dd"></script><script defer src="js/catalog-client.js?v=f1675050712604d6"></script>
</head><body data-prototype-layout class="antialiased selection:bg-black selection:text-[#F2EFE9] min-h-screen flex flex-col justify-between">


    <!-- BARRA SUPERIOR DE TASA BCV & AVISOS -->
    <div class="store-topline bg-[#EAE6DF] border-b border-[#D6D1C7] text-[11px] font-medium px-4 sm:px-8 py-2 flex flex-wrap justify-between items-center text-zinc-700 gap-2">
        <div class="flex items-center gap-2">
            <span class="inline-block w-2 h-2 rounded-full bg-emerald-600 animate-pulse"></span>
            <span class="uppercase tracking-widest font-extrabold text-[#0D0D0D]">KRONO STUDIO</span>
            <span class="text-zinc-400">·</span>
            <span id="live-location-banner" class="hidden sm:inline text-zinc-600">TUCUPITA · DELTA AMACURO</span>
        </div>
        <div class="flex items-center gap-4">
            <p class="text-[10px] font-bold">Tasa oficial: <span id="live-rate">Consultando…</span></p>
            <!-- Toggle de Moneda USD / Bs -->
            <div class="flex items-center bg-[#D6D1C7]/60 p-0.5 rounded-lg text-[10px] font-bold">
                <span id="btn-currency-usd" class="font-bold">Precios en USD · Pago en USD o Bs (BCV)</span>
                
            </div>
        </div>
    </div>

    <!-- HEADER STICKY -->
    <header class="store-header sticky top-0 z-40 bg-[#F2EFE9]/95 backdrop-blur-md border-b border-[#D6D1C7]">
        <div class="max-w-[1400px] mx-auto px-4 sm:px-8 h-16 flex items-center justify-between gap-4">
            
            <a href="#" class="flex flex-col">
                <span class="font-display text-2xl sm:text-3xl font-black tracking-tighter uppercase leading-none">KRONO<span class="text-zinc-500">.</span></span>
                <span class="text-[9px] tracking-widest uppercase font-bold text-zinc-500 hidden sm:block">TIMEPIECES & WGT STREETWEAR</span>
            </a>

            <div class="hidden lg:flex items-center gap-2">
                <button data-scroll="arma-tu-pedido" class="bg-[#0D0D0D] text-white text-[11px] font-bold uppercase tracking-wider px-4 py-2.5 rounded-xl flex items-center gap-2 hover:bg-zinc-800 transition cursor-pointer shadow-sm">
                    VER CATÁLOGO 
                    <svg class="ui-arrow" viewBox="0 0 24 24"><path d="M5 19 19 5M6 5h13v13"/></svg>
                </button>
                <button data-category="Relojes" class="border border-[#D6D1C7] bg-[#EAE6DF] text-[#0D0D0D] text-[11px] font-bold uppercase tracking-wider px-3.5 py-2.5 rounded-xl hover:border-black transition cursor-pointer">
                    RELOJERÍA
                </button>
                <button data-category="Franelas" class="border border-[#D6D1C7] bg-[#EAE6DF] text-[#0D0D0D] text-[11px] font-bold uppercase tracking-wider px-3.5 py-2.5 rounded-xl hover:border-black transition cursor-pointer">
                    OVERSIZE WGT
                </button>
                <button data-scroll="catalogo-grid" class="border border-[#0D0D0D] text-[#0D0D0D] text-[11px] font-bold uppercase tracking-wider px-4 py-2.5 rounded-xl flex items-center gap-2 hover:bg-[#0D0D0D] hover:text-white transition cursor-pointer shadow-sm">
                    ARMA TU COMBO
                    <svg class="ui-arrow" viewBox="0 0 24 24"><path d="M5 19 19 5M6 5h13v13"/></svg>
                </button>
                <button data-guide class="text-zinc-600 hover:text-black text-[11px] font-bold uppercase tracking-wider px-3 py-2 cursor-pointer transition">
                    GUÍA DE TALLAS
                </button>
            </div>

            <div class="flex items-center gap-2">
                <button data-scroll="panel-pedido" class="border border-[#0D0D0D] bg-[#F2EFE9] text-[#0D0D0D] px-4 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 hover:bg-[#0D0D0D] hover:text-white transition cursor-pointer shadow-sm">
                    <span>🛍️ Tu pedido</span>
                    <span id="header-count" class="bg-[#0D0D0D] text-white text-[10px] px-2 py-0.5 rounded-full font-extrabold">0</span>
                </button>
            </div>
        </div>
    </header>

    <!-- HERO SECTION CON CARRUSEL FLUIDO -->
    <section class="store-hero hero-grid text-white relative overflow-hidden border-b border-zinc-800">
        <div class="max-w-[1400px] mx-auto px-4 sm:px-8 pt-10 pb-14 lg:py-20 relative">
            
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
                
                <!-- Columna Izquierda: Textos y Promos -->
                <div class="lg:col-span-6 z-10">
                    <span id="live-hero-badge" class="inline-block text-[11px] font-bold uppercase tracking-widest text-emerald-400 bg-emerald-950/80 px-3 py-1.5 rounded-full border border-emerald-800/50 mb-4">
                        TIMEPIECES & WGT STREETWEAR
                    </span>
                    <h1 class="font-display text-5xl sm:text-7xl lg:text-[80px] font-black uppercase leading-[0.92] tracking-tighter mb-6">
                        IMPÓN TU<br>ESTILO.
                    </h1>
                    <p id="live-hero-description" class="text-zinc-300 text-sm sm:text-base max-w-lg mb-8 leading-relaxed font-normal">Relojería de alto impacto, franelas Oversize WGT y accesorios para completar tu estilo. Explora las fichas publicadas y cotiza tu selección con los precios de la tienda.</p>
                    <div class="flex flex-wrap gap-3">
                        <button data-scroll="catalogo-grid" class="bg-[#F2EFE9] text-[#0D0D0D] px-6 py-3.5 rounded-xl text-xs font-black uppercase tracking-wider hover:bg-white transition cursor-pointer shadow-lg flex items-center gap-2">
                            <span>Explorar Catálogo</span>
                            <svg class="ui-arrow" viewBox="0 0 24 24"><path d="M5 19 19 5M6 5h13v13"/></svg>
                        </button>
                        <button data-scroll="catalogo-grid" class="border border-zinc-700 bg-zinc-900/60 text-white px-6 py-3.5 rounded-xl text-xs font-black uppercase tracking-wider hover:bg-zinc-800 transition cursor-pointer flex items-center gap-2">
                            <span>Armar Combo</span>
                            <svg class="ui-arrow" viewBox="0 0 24 24"><path d="M5 19 19 5M6 5h13v13"/></svg>
                        </button>
                    </div>
                </div>

                <!-- Columna Derecha: Carrusel Fluido de Looks -->
                <div class="lg:col-span-6 relative flex justify-center">
                    <div class="relative w-full max-w-lg aspect-square rounded-3xl overflow-hidden border border-zinc-800 shadow-2xl bg-zinc-900">
                        <div id="carousel-container" data-editorial-carousel aria-label="Selección visual de las líneas del catálogo" class="w-full h-full relative">
                            <img src="https://wgtve.com/catalog-media/1698de02f2e41bcf052c921650e4f7d66cbf61e3ebd84456d5bf02a805d5d3b6.png.v1-640.webp" class="carousel-slide absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 opacity-100" alt="WGT Streetwear Take The Risk">
                            <img src="https://poedagar.store/wp-content/uploads/2025/05/%E7%99%BD%E5%BA%95-6-700x700.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 opacity-0" alt="Reloj Poedagar 613 Luxury">
                            <img src="https://bsmartccs.com/wp-content/uploads/2026/02/Reloj-Skmei-1426BKBK-Negro-Negro.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 opacity-0" alt="Reloj SKMEI 1426 Digital Minimal Sport">
                            <img src="https://mettgorras.com/venezuela/wp-content/uploads/2024/10/Planas-06-05-24_Mesa-de-trabajo-1-1024x1024.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 opacity-0" alt="Gorra Mett Caracas Snapback Pro">
                        </div>
                        
                        <!-- Controles de Carrusel -->
                        <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-2 z-10">
                            <button data-slide="0" class="dot w-3 h-3 rounded-full bg-white transition-all cursor-pointer" aria-label="Slide 1"></button>
                            <button data-slide="1" class="dot w-3 h-3 rounded-full bg-white/40 transition-all cursor-pointer" aria-label="Slide 2"></button>
                            <button data-slide="2" class="dot w-3 h-3 rounded-full bg-white/40 transition-all cursor-pointer" aria-label="Slide 3"></button>
                            <button data-slide="3" class="dot w-3 h-3 rounded-full bg-white/40 transition-all cursor-pointer" aria-label="Slide 4"></button>
                        </div>
                    </div>
                </div>

            </div>

            <div class="mt-12 pt-6 border-t border-zinc-800/80 flex flex-wrap justify-between items-center text-[11px] text-zinc-400 font-medium gap-2">
                <span id="live-hero-caption">Selección visual de nuestras líneas · Consulta disponibilidad en el catálogo</span>
                <span class="font-extrabold text-white">KRONO STUDIO · VENEZUELA</span>
            </div>
        </div>

        <!-- 3 Puntos Clave Estilo WGT -->
        <div id="prototype-commercial-strip" class="bg-[#F2EFE9] text-[#0D0D0D] border-t border-[#D6D1C7]">
            <div class="max-w-[1400px] mx-auto px-4 sm:px-8 py-3.5 grid grid-cols-1 md:grid-cols-3 gap-4 text-xs font-extrabold uppercase tracking-wider">
                <div class="flex items-center gap-2"><span class="text-zinc-500 font-black">01</span> EXPLORA RELOJES, FRANELAS Y ACCESORIOS</div>
                <div class="flex items-center gap-2"><span class="text-zinc-500 font-black">02</span> REVISA TU BOLSA EN LÍNEA</div>
                <div class="flex items-center gap-2"><span class="text-zinc-500 font-black">03</span> PEDIDOS CON SEGUIMIENTO PRIVADO</div>
            </div>
        </div>
    </section>

    <!-- TARJETAS COMUNIDAD WHATSAPP & ATENCIÓN DIRECTA -->


    <!-- CABECERA DE COMPRA Y FILTROS -->
    <section id="arma-tu-pedido" class="max-w-[1400px] mx-auto px-4 sm:px-8 pt-10 pb-4">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
            <div>
                <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-1">ELIGE TUS PRENDAS Y RELOJES</p>
                <h2 class="font-display text-4xl sm:text-5xl font-black uppercase tracking-tighter">CATÁLOGO.</h2>
                <p class="text-xs text-zinc-600 mt-1 max-w-xl">Elige tus artículos, consulta variantes y cotiza tu selección. Los descuentos y la disponibilidad se verifican al cotizar.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <button data-guide class="border border-[#0D0D0D] bg-white text-[#0D0D0D] text-[11px] font-bold uppercase tracking-wider px-3.5 py-2.5 rounded-xl flex items-center gap-1.5 hover:bg-zinc-100 transition cursor-pointer shadow-sm">
                    <span>📏 Guía de Tallas & Medidas</span>
                </button>
                <button data-scroll="panel-pedido" class="bg-[#0D0D0D] text-white text-[11px] font-bold uppercase tracking-wider px-4 py-2.5 rounded-xl flex items-center gap-2 hover:bg-zinc-800 transition cursor-pointer shadow-sm">
                    REVISAR PEDIDO 
                    <svg class="ui-arrow" viewBox="0 0 24 24"><path d="M5 19 19 5M6 5h13v13"/></svg>
                </button>
            </div>
        </div>

        <!-- TARJETAS DE LÍNEAS DESTACADAS -->
        <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-2.5">EXPLORA POR LÍNEA</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
            <button data-category="Relojes" class="bg-[#0D0D0D] text-white p-6 rounded-2xl text-left flex justify-between items-start hover:bg-zinc-900 transition group cursor-pointer shadow-sm border border-zinc-800">
                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-zinc-400">01 / RELOJERÍA ORIGINAL</span>
                    <h4 class="font-display text-2xl font-black tracking-tight mt-1">Poedagar & SKMEI.</h4>
                    <p class="text-xs text-zinc-400 mt-1">Poedagar 613 y 930 Day-Date + línea SKMEI táctica y sumergible.</p>
                </div>
                <span class="text-xl group-hover:translate-x-1 group-hover:-translate-y-1 transition text-white">↗</span>
            </button>
            <button data-category="Franelas" class="bg-[#EAE6DF] border border-[#D6D1C7] text-[#0D0D0D] p-6 rounded-2xl text-left flex justify-between items-start hover:bg-[#e2ddd4] transition group cursor-pointer shadow-sm">
                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-zinc-600">02 / STREETWEAR WGT</span>
                    <h4 class="font-display text-2xl font-black tracking-tight mt-1">Franelas Oversize Heavyweight.</h4>
                    <p class="text-xs text-zinc-600 mt-1">Diseños estampados y básicos esenciales de la línea Oversize WGT. Consulta las fichas publicadas.</p>
                </div>
                <span class="text-xl group-hover:translate-x-1 group-hover:-translate-y-1 transition text-black">↗</span>
            </button>
        </div>

        <!-- BARRA DE FILTROS & BÚSQUEDA -->
        <div id="catalogo-grid" class="flex flex-wrap items-center justify-between gap-4 pb-4 border-b border-[#D6D1C7] scroll-mt-20">
            <div>
                <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-2">FILTRAR POR CATEGORÍA</p>
                <div class="flex flex-wrap gap-2"></div>
            </div>

            <!-- Buscador Rápido -->
            <div class="w-full sm:w-64">
                <div class="relative">
                    <input type="text" id="search-input" aria-label="Buscar producto" maxlength="60" placeholder="Buscar modelo o código..." class="w-full bg-white border border-[#D6D1C7] rounded-xl pl-8 pr-3 py-2 text-xs focus:outline-none focus:border-black">
                    <span class="absolute left-2.5 top-2.5 text-zinc-400 text-xs">🔍</span>
                </div>
            </div>
        </div>
    </section>

    <!-- SECCIÓN PRINCIPAL: CATÁLOGO (8 COLS) + ASÍ VA TU PEDIDO (4 COLS) -->
    <main class="store-section store-catalog max-w-[1400px] mx-auto px-4 sm:px-8 pb-16">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <!-- COLUMNA IZQUIERDA: CATÁLOGO DE PRODUCTOS -->
            <div class="lg:col-span-8">
                <div class="flex justify-between items-center border-b border-[#D6D1C7] pb-3 mb-6">
                    <h3 id="category-title" class="font-display text-lg font-black uppercase tracking-tight">TODOS LOS ARTÍCULOS.</h3>
                    <span id="models-count" class="text-xs text-zinc-500 font-bold">Consultando catálogo…</span>
                </div>

                <div id="products-container" class="krono-products-grid"></div>
            </div>

            <!-- COLUMNA DERECHA: PANEL FIJO "ASÍ VA TU PEDIDO." -->
            <aside class="lg:col-span-4 lg:sticky lg:top-24">
 <div id="panel-pedido" class="bg-[#EAE6DF] border border-[#D6D1C7] p-5 sm:p-6 rounded-2xl shadow-sm scroll-mt-24"><h3 class="font-display text-xl font-black uppercase">Tu Bolsa de Compra</h3><p class="text-xs mt-3">Selecciona tus artículos para calcular el envío y total al instante.</p></div>
</aside>

        </div>
    </main>

    <section id="live-store-info" class="max-w-[1400px] mx-auto px-4 sm:px-8 py-10 border-b border-[#D6D1C7]" aria-label="Información de la tienda" hidden></section>

    <!-- BANNER ARMA TU COMBO -->
    <section id="prototype-combo" class="bg-[#0B0B0B] text-white py-16 px-4 sm:px-8 border-t border-b border-zinc-800">
        <div class="max-w-[1400px] mx-auto">
            <span class="text-[10px] font-bold uppercase tracking-widest text-emerald-400 bg-emerald-950 px-3 py-1 rounded-full border border-emerald-800/40 mb-3 inline-block">
                TRES LÍNEAS. TU PROPIO ESTILO.
            </span>
            <h2 class="font-display text-4xl sm:text-6xl font-black uppercase tracking-tighter mb-4">
                ARMA TU COMBO<br>KRONO & WGT.
            </h2>
            <p class="text-sm text-zinc-300 max-w-lg mb-6 leading-relaxed">Combina un reloj, una franela y un accesorio. Las promociones vigentes y sus condiciones se calculan al cotizar tu selección.</p>
            <button data-scroll="catalogo-grid" class="inline-flex items-center gap-3 bg-[#F2EFE9] text-[#0D0D0D] px-6 py-3.5 rounded-xl text-xs font-black uppercase tracking-wider hover:bg-white transition cursor-pointer shadow-lg">
                <span>Armar mi Combo Ahora</span>
                <svg class="ui-arrow" viewBox="0 0 24 24"><path d="M5 19 19 5M6 5h13v13"/></svg>
            </button>
        </div>
    </section>

    <!-- CÓMO FUNCIONA ESTILO EDITORIAL -->
    <section id="prototype-checkout-howto" class="max-w-[1400px] mx-auto px-4 sm:px-8 py-16">
        <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-1">PROCESO TRANSPARENTE</p>
        <h2 class="font-display text-3xl sm:text-4xl font-black uppercase tracking-tighter mb-10">ASÍ DE FÁCIL.</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="border-t border-[#D6D1C7] pt-4">
                <span class="text-xs text-zinc-400 font-black">01 /</span>
                <h4 class="font-display text-lg font-black mt-1 mb-2">Elige Talla y Color.</h4>
                <p class="text-xs text-zinc-600 leading-relaxed">Abre una ficha, revisa sus medidas y añade una variante disponible a tu selección.</p>
            </div>
            <div class="border-t border-[#D6D1C7] pt-4">
                <span class="text-xs text-zinc-400 font-black">02 /</span>
                <h4 class="font-display text-lg font-black mt-1 mb-2">Revisa tu Bolsa.</h4>
                <p class="text-xs text-zinc-600 leading-relaxed">Consulta el precio final y las promociones vigentes antes de confirmar. Cotizar todavía no reserva las unidades.</p>
            </div>
            <div class="border-t border-[#D6D1C7] pt-4">
                <span class="text-xs text-zinc-400 font-black">03 /</span>
                <h4 class="font-display text-lg font-black mt-1 mb-2">Confirma y da Seguimiento.</h4>
                <p class="text-xs text-zinc-600 leading-relaxed">Completa tus datos para crear el pedido, conserva tu código privado y descarga la constancia. Los pagos electrónicos requieren revisión de la tienda.</p>
            </div>
        </div>
    </section>



    <!-- FOOTER GIGANTE EDITORIAL -->
    <footer class="bg-[#0B0B0B] text-white pt-12 pb-8 px-4 sm:px-8 border-t border-zinc-800">
        <div class="max-w-[1400px] mx-auto">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center text-xs font-bold uppercase tracking-widest text-zinc-400 pb-10 border-b border-zinc-900 gap-4">
                <div>
                    <span class="text-white text-2xl font-black tracking-tighter font-display block">KRONO STUDIO<span class="text-zinc-600">.</span></span>
                    <span class="text-[10px] text-zinc-400">TIMEPIECES & WGT STREETWEAR</span>
                </div>
                <span id="live-footer-location">TUCUPITA · DELTA AMACURO</span>
            </div>

            <div class="py-12">
                <h2 class="font-display text-4xl sm:text-7xl lg:text-[84px] font-black uppercase leading-[0.92] tracking-tighter text-white">
                    NOSOTROS TE<br>HACEMOS DESTACAR.
                </h2>
            </div>

            <div class="pt-6 border-t border-zinc-900 flex flex-col sm:flex-row justify-between items-center text-[11px] text-zinc-500 gap-3">
                <span id="live-footer-note">Krono Studio · Tucupita, Delta Amacuro</span>
                <div class="flex items-center gap-4">
                    <button data-guide class="text-zinc-400 hover:text-white uppercase font-bold">Guía de Tallas</button>
                    <a href="#" class="text-zinc-400 hover:text-white uppercase font-bold">Volver arriba ↑</a>
                </div>
            </div>
        </div>
    </footer>
<noscript>Activa JavaScript para consultar el catálogo y crear un pedido.</noscript>
<div id="mobile-sticky-cart" class="krono-sticky-cart" hidden aria-label="Resumen de tu bolsa"></div>
</body></html>
