<!DOCTYPE html>
<html lang="es" class="scroll-smooth w-full overflow-x-hidden">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Lyz Market | Tu Tienda De Confianza</title>
    
    <!-- Meta SEO Básico para profesionalismo -->
    <meta name="description" content="Recarga Diamantes, UC, Robux y CP al instante. La plataforma más segura y rápida de habla hispana. 100% Legal vía ID.">

    <!-- ========================================== -->
    <!-- 🚀 OPTIMIZACIÓN DE CACHÉ PARA EVITAR LAG -->
    <!-- ========================================== -->
    <meta http-equiv="Cache-Control" content="max-age=86400, public">
    <meta http-equiv="Pragma" content="cache">

    <!-- Fuentes Premium -->
    <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=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@500;700;900&display=swap" rel="stylesheet">

    <!-- Iconos (FontAwesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Tailwind CSS (CDN) -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- ⚙️ Configuración de Tailwind (Extraída para limpieza) -->
    <script src="https://lyz-market.web.app/css/js/tailwind-config.js"></script>

    <!-- Importar Componentes Globales -->
    <script src="https://lyz-market.web.app/css/js/component.js" defer></script>
    
    <!-- 🎨 Archivos CSS -->
    <link rel="stylesheet" href="https://lyz-market.web.app/css/css/custom.css">
    <!-- Estilos exclusivos del Index (Animaciones, scrollbar, backgrounds) -->
    <link rel="stylesheet" href="https://lyz-market.web.app/css/css/index-styles.css">
    
    <!-- 🧠 Lógica y Autenticación -->
    <!-- NUEVO: Agregado api.js para conexión con backend Express -->
    <script src="https://lyz-market.web.app/css/js/api.js"></script>
    <script src="https://lyz-market.web.app/css/js/main.js" defer></script>
    <script type="module" src="https://lyz-market.web.app/css/js/auth.js"></script>
    
    <!-- 🤖 Lógica Global de Conexión con el Bot y Proxy Inverso -->
    <script src="https://lyz-market.web.app/css/js/lyz-status.js" defer></script>

    <!-- 🖼️ Script del Hero Slider -->
    <script src="https://lyz-market.web.app/css/js/hero-slider.js" defer></script>
    
    <!-- 🛡️ Protecciones de la página contra inspección y copias -->
    <script src="https://lyz-market.web.app/css/js/protections.js" defer></script>
    
    <script src="https://lyz-market.web.app/css/js/modal-bienvenida.js" defer></script>

    <style>
        /* ========================================== */
        /* 🛡️ PROTECCIÓN VISUAL Y ANTI-LAG EXTREMO 🛡️ */
        /* ========================================== */
        
        /* Bloqueo total de selección y toques fantasmas */
        body { 
            -webkit-user-select: none; 
            -moz-user-select: none; 
            -ms-user-select: none; 
            user-select: none;
            -webkit-tap-highlight-color: transparent; 
        }
        
        /* Bloquear arrastre de imágenes para evitar descargas fáciles */
        img { pointer-events: none; }

        /* MAGIA ANTI-LAG: Evita que el celular procese lo que no está en pantalla */
        .render-opt { 
            content-visibility: auto; 
            contain-intrinsic-size: 500px; /* Tamaño estimado de reserva */
            will-change: transform, opacity;
        }

        /* Ocultar barra de scroll en contenedores específicos */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
</head>
<body class="font-sans antialiased selection:bg-bYellow selection:text-black w-full m-0 p-0" ondragstart="return false;" ondrop="return false;">

    <script>
        // ================= PROTECCIONES DE SEGURIDAD EXTREMAS (BLINDADAS) =================
        
        // 1. Deshabilitar click derecho
        document.addEventListener('contextmenu', event => event.preventDefault());
        
        // 2. Deshabilitar atajos de teclado de desarrollador
        document.addEventListener('keydown', (e) => {
            if (e.key === 'F12' || e.keyCode === 123 || 
               (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 67 || e.key === 'I' || e.key === 'J' || e.key === 'C')) ||
               (e.ctrlKey && (e.keyCode === 85 || e.key === 'U')) || 
               (e.ctrlKey && (e.keyCode === 83 || e.key === 'S'))) {
                e.preventDefault();
                return false;
            }
        });

        // 3. Debugger Trap Activo (Congela el navegador si abren DevTools)
        setInterval(() => {
            const before = new Date().getTime();
            debugger;
            const after = new Date().getTime();
            if (after - before > 100) {
                // Destruir el DOM y bloquear acceso
                document.body.innerHTML = '<div style="width:100vw;height:100vh;background:#030303;color:#d6ff00;display:flex;justify-content:center;align-items:center;font-family:sans-serif;font-weight:900;"><h1>⚠️ ACCESO DENEGADO ⚠️</h1></div>';
                window.location.replace("about:blank");
            }
        }, 2000);
    </script>
<script>
        if (window.location.search.includes('debug')) {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/eruda';
            document.head.appendChild(script);
            script.onload = function () {
                eruda.init();
            };
        }
    </script>    
    <!-- Componente Navbar -->
    <global-navbar></global-navbar>

    <!-- ================= TICKER DE COMPRAS RECIENTES ================= -->
    <div class="w-full bg-[#050505] border-b border-white/5 py-1.5 md:py-2.5 overflow-hidden ticker-container mt-[60px] md:mt-[98px] flex shadow-[0_4px_20px_rgba(0,0,0,0.5)] transform-gpu">
        <div id="ticker-data" class="flex whitespace-nowrap animate-ticker gap-6 md:gap-10 px-3 md:px-4 items-center"></div>
    </div>

    <!-- ================= HERO SECTION (SLIDER AUTOMÁTICO) ================= -->
    <section class="relative w-full px-3 md:px-8 lg:px-12 xl:px-20 mt-4 md:mt-8">
        <div id="hero-carousel" class="w-full h-[180px] md:h-[450px] bg-dark-card rounded-[1.2rem] md:rounded-[2rem] border border-white/10 overflow-hidden relative shadow-2xl transform-gpu">
            
            <div id="hero-slider-container" class="absolute inset-0">
                <!-- Slide 1 -->
                <div class="hero-slide absolute inset-0 transition-opacity duration-1000 opacity-100 z-20">
                    <div class="absolute inset-0 bg-gradient-to-r from-[#030303] via-[#030303]/70 to-transparent z-10"></div>
                    <div class="absolute inset-0 bg-gradient-to-t from-[#030303]/90 via-transparent to-transparent z-10"></div>
                    <img fetchpriority="high" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/ccdd1330-b808-4aa0-b710-7928ed5019b2.webp" class="absolute inset-0 w-full h-full object-cover transform-gpu" alt="Banner 1">
                    <div class="absolute inset-0 z-20 flex flex-col justify-center px-6 md:px-20">
                        <!-- Ajuste de texto en móvil: text-[7px] a text-[10px] -->
                        <span class="text-bYellow font-bold tracking-widest uppercase text-[10px] md:text-xs mb-1.5 md:mb-3 flex items-center gap-1.5 md:gap-2"><i class="fa-solid fa-bolt"></i> Recargas Instantáneas</span>
                        <!-- Ajuste de texto en móvil: text-xl a text-2xl -->
                        <h1 class="text-2xl md:text-7xl font-black tracking-tight mb-1.5 md:mb-5 drop-shadow-2xl leading-tight font-display text-white">
                            Desata tu Poder,<br>
                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-bYellow to-yellow-200 ">Sin Límites</span>
                        </h1>
                        <!-- Ajuste de texto en móvil: text-[9px] a text-xs -->
                        <p class="text-gray-300 text-xs md:text-base max-w-[220px] md:max-w-lg mb-3 md:mb-8 hidden md:block leading-relaxed font-medium">
                            Adquiere Diamantes, UC, Robux y CP al instante. La única tienda premium donde tu seguridad, rapidez y el trato VIP son la ley.
                        </p>
                        <div class="hidden md:flex gap-4">
                            <!-- Ajuste de texto en móvil: text-[10px] a text-xs -->
                            <a href="custom.css#tienda" class="bg-bYellow text-black px-4 py-2 md:px-6 md:py-3 rounded-full font-bold text-xs md:text-sm hover:scale-105 transition-transform shadow-[0_0_20px_rgba(214,255,0,0.3)]">Recargar Ahora</a>
                        </div>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="hero-slide absolute inset-0 transition-opacity duration-1000 opacity-0 z-10">
                    <div class="absolute inset-0 bg-gradient-to-r from-[#030303] via-[#030303]/70 to-transparent z-10"></div>
                    <div class="absolute inset-0 bg-gradient-to-t from-[#030303]/90 via-transparent to-transparent z-10"></div>
                    <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/bd1d3ad1-e04a-4c68-9d9d-ac895b26603e.webp" class="absolute inset-0 w-full h-full object-cover transform-gpu" alt="Banner 2">
                    <div class="absolute inset-0 z-20 flex flex-col justify-center px-6 md:px-20">
                        <span class="text-cyan-400 font-bold tracking-widest uppercase text-[10px] md:text-xs mb-1.5 md:mb-3 flex items-center gap-1.5 md:gap-2"><i class="fa-solid fa-fire-flame-curved"></i> Nuevo Contenido</span>
                        <h1 class="text-2xl md:text-7xl font-black tracking-tight mb-1.5 md:mb-5 drop-shadow-2xl leading-tight font-display text-white">
                            Domina esta <br>
                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 ">Temporada</span>
                        </h1>
                        <p class="text-gray-300 text-xs md:text-base max-w-[220px] md:max-w-lg mb-3 md:mb-8 hidden md:block leading-relaxed font-medium">
                            Descubre las mejores ofertas en pases de batalla premium y contenido exclusivo para arrasar en tus juegos favoritos.
                        </p>
                        <div class="hidden md:flex gap-4">
                            <a href="custom.css#tienda" class="bg-cyan-500 text-white px-4 py-2 md:px-6 md:py-3 rounded-full font-bold text-xs md:text-sm hover:scale-105 transition-transform shadow-[0_0_20px_rgba(34,211,238,0.3)]">Ver Pases de Batalla</a>
                        </div>
                    </div>
                </div>

                <!-- Slide 3 -->
                <div class="hero-slide absolute inset-0 transition-opacity duration-1000 opacity-0 z-10">
                    <div class="absolute inset-0 bg-gradient-to-r from-[#030303] via-[#030303]/70 to-transparent z-10"></div>
                    <div class="absolute inset-0 bg-gradient-to-t from-[#030303]/90 via-transparent to-transparent z-10"></div>
                    <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/3aadac12-40d2-4963-8ff9-3bc3a208a714.webp" class="absolute inset-0 w-full h-full object-cover transform-gpu" alt="Banner 3">
                    <div class="absolute inset-0 z-20 flex flex-col justify-center px-6 md:px-20">
                        <span class="text-purple-400 font-bold tracking-widest uppercase text-[10px] md:text-xs mb-1.5 md:mb-3 flex items-center gap-1.5 md:gap-2"><i class="fa-solid fa-trophy"></i> eSports & Arena</span>
                        <h1 class="text-2xl md:text-7xl font-black tracking-tight mb-1.5 md:mb-5 drop-shadow-2xl leading-tight font-display text-white">
                            Compite y <br>
                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 ">Gana</span>
                        </h1>
                        <p class="text-gray-300 text-xs md:text-base max-w-[220px] md:max-w-lg mb-3 md:mb-8 hidden md:block leading-relaxed font-medium">
                            Únete a los torneos semanales, demuestra tu verdadera habilidad y gana saldo directo para tu cuenta.
                        </p>
                        <div class="hidden md:flex gap-4">
                            <a href="custom.css#torneos" class="bg-purple-500 text-white px-4 py-2 md:px-6 md:py-3 rounded-full font-bold text-xs md:text-sm hover:scale-105 transition-transform shadow-[0_0_20px_rgba(168,85,247,0.3)]">Inscribirme Hoy</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Controles del carrusel -->
            <div id="hero-indicators" class="absolute bottom-2 md:bottom-8 left-1/2 -translate-x-1/2 z-30 flex gap-1.5 md:gap-3">
                <div class="slide-indicator w-6 md:w-10 h-1 md:h-1.5 rounded-full bg-bYellow shadow-[0_0_12px_rgba(214,255,0,0.6)] cursor-pointer transition-all duration-300"></div>
                <div class="slide-indicator w-2 md:w-3 h-1 md:h-1.5 rounded-full bg-white/20 hover:bg-white/50 cursor-pointer transition-all duration-300"></div>
                <div class="slide-indicator w-2 md:w-3 h-1 md:h-1.5 rounded-full bg-white/20 hover:bg-white/50 cursor-pointer transition-all duration-300"></div>
            </div>
        </div>
    </section>

    <!-- ================= BARRA DE ACCESOS PREMIUM ================= -->
    <section class="w-full px-3 md:px-12 lg:px-32 xl:px-64 py-4 md:py-8 relative md:-mt-16 z-30 transform-gpu mx-auto render-opt">
        <!-- Contenedor Glassmorphism Premium -->
        <div class="glass-panel border border-white/10 rounded-[1.2rem] md:rounded-[2rem] p-3 md:p-8 shadow-2xl flex justify-between md:justify-around items-center gap-1 md:gap-2">
            
            <!-- Compra -->
            <a href="https://lyz-market.web.app/css/tienda.html" class="flex flex-col items-center gap-1.5 md:gap-4 group cursor-pointer w-1/3">
                <div class="relative w-10 h-10 md:w-20 md:h-20 rounded-[0.7rem] md:rounded-2xl bg-gradient-to-br from-[#1a1a1e] to-[#0a0a0c] flex items-center justify-center border border-white/5 group-hover:border-bYellow transition-all duration-500 shadow-[inset_0_1px_10px_rgba(255,255,255,0.02)] group-hover:shadow-[0_0_25px_rgba(214,255,0,0.2)] group-hover:-translate-y-1.5 transform-gpu">
                    <div class="absolute inset-0 bg-bYellow/5 rounded-[0.7rem] md:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <i class="fa-solid fa-cart-shopping text-base md:text-3xl text-gray-500 group-hover:text-bYellow transition-colors relative z-10"></i>
                </div>
                <!-- Ajuste de texto: text-[8px] a text-[10px] -->
                <span class="text-[10px] md:text-sm font-black text-gray-400 group-hover:text-white transition-colors text-center uppercase tracking-[0.2em]">Tienda</span>
            </a>
            
            <!-- Separador -->
            <div class="w-px h-8 md:h-20 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
            
            <!-- Temporada de Torres -->
            <a href="https://lyz-market.web.app/css/torres.html" class="flex flex-col items-center gap-1.5 md:gap-4 group cursor-pointer w-1/3">
                <div class="relative w-10 h-10 md:w-20 md:h-20 rounded-[0.7rem] md:rounded-2xl bg-gradient-to-br from-[#1a1a1e] to-[#0a0a0c] flex items-center justify-center border border-white/5 group-hover:border-cyan-400 transition-all duration-500 shadow-[inset_0_1px_10px_rgba(255,255,255,0.02)] group-hover:shadow-[0_0_25px_rgba(34,211,238,0.2)] group-hover:-translate-y-1.5 transform-gpu">
                    <div class="absolute inset-0 bg-cyan-400/5 rounded-[0.7rem] md:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <i class="fa-brands fa-fort-awesome text-base md:text-3xl text-gray-500 group-hover:text-cyan-400 transition-colors relative z-10"></i>
                </div>
                <span class="text-[10px] md:text-sm font-black text-gray-400 group-hover:text-white transition-colors text-center uppercase tracking-[0.2em]">Temporada</span>
            </a>
            
            <!-- Separador -->
            <div class="w-px h-8 md:h-20 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
            
            <!-- Competitivo -->
            <a href="https://lyz-market.web.app/css/competitivo.html" class="flex flex-col items-center gap-1.5 md:gap-4 group cursor-pointer w-1/3">
                <div class="relative w-10 h-10 md:w-20 md:h-20 rounded-[0.7rem] md:rounded-2xl bg-gradient-to-br from-[#1a1a1e] to-[#0a0a0c] flex items-center justify-center border border-white/5 group-hover:border-purple-500 transition-all duration-500 shadow-[inset_0_1px_10px_rgba(255,255,255,0.02)] group-hover:shadow-[0_0_25px_rgba(168,85,247,0.2)] group-hover:-translate-y-1.5 transform-gpu">
                    <div class="absolute inset-0 bg-purple-500/5 rounded-[0.7rem] md:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <i class="fa-solid fa-trophy text-base md:text-3xl text-gray-500 group-hover:text-purple-500 transition-colors relative z-10"></i>
                </div>
                <span class="text-[10px] md:text-sm font-black text-gray-400 group-hover:text-white transition-colors text-center uppercase tracking-[0.2em]">Competitivo</span>
            </a>
        </div>
    </section>

    <!-- ================= SECCIÓN PRINCIPAL: TIENDA DE PRODUCTOS ================= -->
    <!-- RENDER-OPT añadido aquí para cancelar su cómputo hasta hacer scroll -->
    <section class="w-full px-3 md:px-8 lg:px-12 xl:px-20 py-5 md:py-8 render-opt" id="tienda">
        
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-4 md:mb-8 gap-2 md:gap-4">
            <div>
                <!-- Ajuste texto: text-[9px] a text-[10px] -->
                <p class="text-bYellow font-bold text-[10px] md:text-xs tracking-widest uppercase mb-0.5 md:mb-1">Catálogo Oficial</p>
                <!-- Ajuste texto: text-xl a text-2xl -->
                <h2 class="text-2xl md:text-4xl font-black text-white font-display flex items-center gap-2 md:gap-3">
                    Store <span class="text-transparent bg-clip-text bg-gradient-to-r from-bYellow to-cyan-400">Premium</span>
                </h2>
            </div>
            <!-- Ajuste texto: text-[10px] a text-xs -->
            <p class="text-gray-400 text-xs md:text-sm max-w-sm font-medium">Recargas 100% seguras y al instante mediante ID. No requerimos contraseñas.</p>
        </div>
        
        <!-- Contenedor Principal Dark Glass -->
        <div class="bg-gradient-to-b from-[#0a0a0c] to-[#030303] border border-white/10 rounded-[1.2rem] md:rounded-[2rem] p-3 md:p-10 shadow-xl">
            
            <!-- LINEA 1: RECOMENDADOS (GRANDE / VIP) -->
            <div class="flex items-center justify-between mb-3 md:mb-6">
                <!-- Ajuste texto: text-[10px] a text-xs -->
                <h3 class="text-xs md:text-base font-black text-white uppercase tracking-[0.15em] flex items-center gap-1.5 md:gap-3"><i class="fa-solid fa-star text-bYellow "></i> Selección VIP</h3>
            </div>
            
            <div id="seleccion-vip-container" class="flex gap-3 md:gap-5 overflow-x-auto hide-scrollbar snap-x pb-4 md:pb-8 mb-2 md:mb-4">
                

                <!-- Mobile Legends -->
                <a href="https://lyz-market.web.app/css/catalogo/mlbb.html" class="snap-start min-w-[200px] md:min-w-[360px] card-hover relative h-[125px] md:h-[220px] rounded-[1rem] md:rounded-3xl overflow-hidden border border-white/10 flex-shrink-0 group transform-gpu bg-[#0a0a0f]">
                    <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-black/20 to-transparent z-10 group-hover:from-blue-900/60 transition-colors duration-500"></div>
                    <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/f0cf39ad-1d70-47d3-93b1-8ea84edf2324.webp" alt="Mobile Legends" class="absolute inset-0 h-full w-full object-contain opacity-100 group-hover:scale-110 transition-transform duration-700 transform-gpu">
                    <div class="absolute top-2 right-2 md:top-4 md:right-4 z-20 bg-blue-900/80 border border-blue-400/30 px-2 py-0.5 md:px-3 md:py-1 rounded-full flex items-center gap-1 md:gap-2">
                        <div class="w-1 h-1 md:w-1.5 md:h-1.5 rounded-full bg-blue-400 animate-pulse"></div>
                        <!-- Ajuste texto: text-[7px] a text-[9px] -->
                        <span class="text-[9px] md:text-[9px] font-bold text-blue-100 uppercase tracking-wider">Top Ventas</span>
                    </div>
                    <div class="relative w-full h-full p-2.5 md:p-5 z-20 flex flex-col justify-end">
                        <h4 class="text-sm md:text-xl font-black text-white uppercase tracking-widest drop-shadow-lg font-display">Mobile Legends</h4>
                        <!-- Ajuste texto: text-[8px] a text-[10px] -->
                        <p class="text-blue-300 text-[10px] md:text-xs font-bold mt-0.5 md:mt-1">Diamantes • Pases Semanales</p>
                    </div>
                </a>

               <!-- Free Fire -->
                <a href="https://lyz-market.web.app/css/catalogo/freefire.html" class="snap-start min-w-[200px] md:min-w-[360px] card-hover relative h-[125px] md:h-[220px] rounded-[1rem] md:rounded-3xl overflow-hidden border border-white/10 flex-shrink-0 group transform-gpu bg-[#140808]">
                    <div class="absolute inset-0 bg-gradient-to-t from-[#140808] via-black/20 to-transparent z-10 group-hover:from-orange-900/60 transition-colors duration-500"></div>
                    <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/17a8934a-fcf7-4297-bbd4-bd4dfc0c7421.webp" alt="Free Fire" class="absolute inset-0 h-full w-full object-contain opacity-100 group-hover:scale-110 transition-transform duration-700 transform-gpu">
                    <div class="absolute top-2 right-2 md:top-4 md:right-4 z-20 bg-orange-900/80 border border-orange-400/30 px-2 py-0.5 md:px-3 md:py-1 rounded-full flex items-center gap-1 md:gap-2">
                        <div class="w-1 h-1 md:w-1.5 md:h-1.5 rounded-full bg-orange-400 animate-pulse"></div>
                        <span class="text-[9px] md:text-[9px] font-bold text-orange-100 uppercase tracking-wider">Hot Ofertas</span>
                    </div>
                    <div class="relative w-full h-full p-2.5 md:p-5 z-20 flex flex-col justify-end">
                        <h4 class="text-sm md:text-xl font-black text-white uppercase tracking-widest drop-shadow-lg font-display">Free Fire</h4>
                        <p class="text-orange-300 text-[10px] md:text-xs font-bold mt-0.5 md:mt-1">Diamantes • Tarjetas Semanales</p>
                    </div>
                </a>

                <!-- Valorant -->
                <a href="https://lyz-market.web.app/css/catalogo/valorant.html" class="snap-start min-w-[200px] md:min-w-[360px] card-hover relative h-[125px] md:h-[220px] rounded-[1rem] md:rounded-3xl overflow-hidden border border-white/10 flex-shrink-0 group transform-gpu bg-[#1a0508]">
                    <div class="absolute inset-0 bg-gradient-to-t from-[#1a0508] via-black/20 to-transparent z-10 group-hover:from-[#ff4655]/70 transition-colors duration-500"></div>
                    <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/c301bafa-7a83-4113-86ac-0e70448a027e.webp" alt="Valorant" class="absolute inset-0 h-full w-full object-contain opacity-100 group-hover:scale-110 transition-transform duration-700 transform-gpu">
                    <div class="absolute top-2 right-2 md:top-4 md:right-4 z-20 bg-red-900/80 border border-red-400/30 px-2 py-0.5 md:px-3 md:py-1 rounded-full flex items-center gap-1 md:gap-2">
                        <div class="w-1 h-1 md:w-1.5 md:h-1.5 rounded-full bg-[#ff4655] animate-pulse"></div>
                        <span class="text-[9px] md:text-[9px] font-bold text-red-100 uppercase tracking-wider">Temporada Nueva</span>
                    </div>
                    <div class="relative w-full h-full p-2.5 md:p-5 z-20 flex flex-col justify-end">
                        <h4 class="text-sm md:text-xl font-black text-white uppercase tracking-widest drop-shadow-lg font-display">Valorant</h4>
                        <p class="text-red-300 text-[10px] md:text-xs font-bold mt-0.5 md:mt-1">Valorant Points • Radianite</p>
                    </div>
                </a>
            </div>

            <!-- LINEA 2: POPULARES (COMPACTA / MÁS PEQUEÑA) -->
            <div class="flex items-center justify-between mb-3 md:mb-6 mt-2 md:mt-4">
                <h3 class="text-xs md:text-base font-black text-white uppercase tracking-[0.15em] flex items-center gap-1.5 md:gap-3"><i class="fa-solid fa-fire-flame-curved text-orange-500 "></i> Populares en la Tienda</h3>
            </div>
            
            <!-- ANCHOS Y ALTOS DE TARJETAS MANTENIDOS INTACTOS -->
            <div id="populares-container" class="flex gap-2.5 md:gap-4 overflow-x-auto hide-scrollbar snap-x mb-4 md:mb-10 pb-3 md:pb-4">
                
                <!-- Blood Strike -->
                <a href="https://lyz-market.web.app/css/catalogo/bloodstrike.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/567c7f90-d8a4-4d0e-954a-4d88b5eaccad.webp" alt="Blood Strike" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <!-- Ajuste texto: text-[7px] a text-[10px] -->
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">Blood Strike</h4>
                        <!-- Ajuste texto: text-[5px] a text-[9px] -->
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">Oro • Pases</p>
                    </div>
                </a>

                <!-- League of Legends -->
                <a href="https://lyz-market.web.app/css/catalogo/lol.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/9403ac97-31c2-471f-afea-5b92f33d6ae5.webp" alt="League of Legends" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">League of Legends</h4>
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">Riot Points</p>
                    </div>
                </a>

                <!-- Roblox -->
                <a href="https://lyz-market.web.app/css/catalogo/roblox.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/1cffcc23-2531-4c50-a287-30aeeaf1cee8.jpg" alt="Roblox" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">Roblox</h4>
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">Robux • Premium</p>
                    </div>
                </a>

                <!-- Delta Force -->
                <a href="https://lyz-market.web.app/css/catalogo/deltaforce.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/5c6e1988-4f59-44d4-a106-c7e7c857ca19.jpg" alt="Delta Force" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">Delta Force</h4>
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">Delta Coins</p>
                    </div>
                </a>

                <!-- PUBG Mobile -->
                <a href="https://lyz-market.web.app/css/catalogo/pubg.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/a5b9d358-ab79-4ea6-a0a2-f27a9aa3b330.jpg" alt="PUBG Mobile" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">PUBG Mobile</h4>
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">UC • Royal Pass</p>
                    </div>
                </a>

                <!-- Call of Duty Mobile -->
                <a href="https://lyz-market.web.app/css/catalogo/codm.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/2378c4bd-7707-413c-9bb1-9f1b80469ef2.jpg" alt="CoD Mobile" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">CoD Mobile</h4>
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">CP • Pases</p>
                    </div>
                </a>
                
                <!-- Genshin Impact -->
                <a href="https://lyz-market.web.app/css/catalogo/genshin.html" class="snap-start w-[75px] min-w-[75px] md:w-[130px] md:min-w-[130px] bg-gradient-to-b from-[#121214] to-[#050505] border border-white/5 rounded-xl md:rounded-2xl overflow-hidden card-hover group shadow-lg flex flex-col flex-shrink-0 relative transform-gpu">
                    <div class="aspect-[4/5] relative overflow-hidden z-10 p-1 md:p-1.5 pb-0 bg-black/40">
                        <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/004ccae3-50a7-4d87-99f4-cfaea5e5dbc3.jpg" alt="Genshin Impact" class="w-full h-full object-cover rounded-lg md:rounded-xl group-hover:scale-105 transition-transform duration-700 opacity-100 transform-gpu">
                    </div>
                    <div class="p-1 md:p-2 text-center z-20 relative">
                        <h4 class="text-[10px] md:text-[11px] font-bold text-white uppercase tracking-wider font-display truncate">Genshin</h4>
                        <p class="text-[9px] md:text-[9px] text-gray-500 mt-0.5 truncate">Cristales • Bendición</p>
                    </div>
                </a>

            </div>

            <!-- Botón Ver Tienda Completa -->
            <div class="flex justify-center mt-1 md:mt-4">
                <a href="https://lyz-market.web.app/css/tienda.html" class="px-5 py-2 md:px-10 md:py-4 bg-[#0a0a0c] border border-bYellow/40 text-bYellow text-[11px] md:text-sm font-black rounded-full hover:bg-bYellow hover:text-black transition-all duration-300 uppercase tracking-[0.2em] shadow-[0_0_20px_rgba(214,255,0,0.1)] hover:shadow-[0_0_35px_rgba(214,255,0,0.4)] hover:scale-105 flex items-center gap-1.5 md:gap-3">
                    Explorar Catálogo <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
            
        </div>
    </section>

    <!-- ================= SECCIÓN: TORNEOS ================= -->
    <!-- RENDER-OPT añadido -->
    <section class="w-full px-3 md:px-8 lg:px-12 xl:px-20 py-6 md:py-16 render-opt" id="torneos">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-4 md:mb-8 gap-2 md:gap-4">
            <div>
                <!-- Ajuste de texto -->
                <p class="text-cyan-400 font-bold text-[11px] md:text-xs tracking-widest uppercase mb-0.5 md:mb-1">Compite y Gana</p>
                <h2 class="text-2xl md:text-4xl font-black text-white font-display">
                    Torneos <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">eSports</span>
                </h2>
            </div>
            <a href="https://lyz-market.web.app/css/torneos.html" class="px-3 py-1.5 md:px-6 md:py-2 border border-cyan-400/30 text-cyan-400 rounded-full text-[11px] md:text-xs font-bold hover:bg-cyan-400/10 transition-colors flex items-center gap-1.5 md:gap-2 w-max">
                Calendario Completo <i class="fa-solid fa-calendar-days"></i>
            </a>
        </div>

        <div class="flex gap-3 md:gap-6 overflow-x-auto hide-scrollbar snap-x pb-4 md:pb-8">
            <!-- Torneo 1 -->
            <a href="custom.css#" class="snap-start min-w-[200px] md:min-w-[360px] aspect-video relative rounded-2xl md:rounded-3xl overflow-hidden card-hover group border border-white/5 shadow-lg bg-black">
                <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-[#030303]/40 to-transparent z-10 group-hover:via-[#030303]/20 transition-colors"></div>
                <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/4353644c-1817-4306-9e5d-2e2abb85f649.webp" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-100">
                
                <div class="absolute top-2 left-2 md:top-4 md:left-4 z-20 bg-black/90 border border-white/10 px-2 py-0.5 md:px-3 md:py-1 rounded-lg">
                    <span class="text-[9px] md:text-[10px] font-bold text-green-400 uppercase">Proximamente</span>
                </div>

                <div class="absolute bottom-3 md:bottom-6 left-0 w-full px-3 md:px-5 z-20 text-center">
                    <h3 class="font-black text-base md:text-3xl uppercase tracking-widest text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] font-display mb-1 md:mb-2">Free Fire</h3>
                    <p class="text-cyan-400 text-[10px] md:text-xs font-bold bg-cyan-500/10 inline-block px-2 py-0.5 md:px-3 md:py-1 rounded-full border border-cyan-500/20">Bolsa: 50,000 Diamantes</p>
                </div>
            </a>
            
            <!-- Torneo 2 -->
            <a href="custom.css#" class="snap-start min-w-[200px] md:min-w-[360px] aspect-video relative rounded-2xl md:rounded-3xl overflow-hidden card-hover group border border-white/5 shadow-lg bg-black">
                <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-[#030303]/40 to-transparent z-10 group-hover:via-[#030303]/20 transition-colors"></div>
                <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/4353644c-1817-4306-9e5d-2e2abb85f649.webp" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-100">
                
                <div class="absolute top-2 left-2 md:top-4 md:left-4 z-20 bg-black/90 border border-white/10 px-2 py-0.5 md:px-3 md:py-1 rounded-lg">
                    <span class="text-[9px] md:text-[10px] font-bold text-yellow-400 uppercase">Proximamente</span>
                </div>

                <div class="absolute bottom-3 md:bottom-6 left-0 w-full px-3 md:px-5 z-20 text-center">
                    <h3 class="font-black text-base md:text-2xl uppercase tracking-widest text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] font-display mb-1 md:mb-2">Clash Royale</h3>
                    <p class="text-cyan-400 text-[10px] md:text-xs font-bold bg-cyan-500/10 inline-block px-2 py-0.5 md:px-3 md:py-1 rounded-full border border-cyan-500/20">Bolsa: $500 USD</p>
                </div>
            </a>
            
            <!-- Torneo 3 -->
            <a href="custom.css#" class="snap-start min-w-[200px] md:min-w-[360px] aspect-video relative rounded-2xl md:rounded-3xl overflow-hidden card-hover group border border-white/5 shadow-lg bg-black">
                <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-[#030303]/40 to-transparent z-10 group-hover:via-[#030303]/20 transition-colors"></div>
                <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/4353644c-1817-4306-9e5d-2e2abb85f649.webp" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-100">
                
                <div class="absolute top-2 left-2 md:top-4 md:left-4 z-20 bg-black/90 border border-white/10 px-2 py-0.5 md:px-3 md:py-1 rounded-lg">
                    <span class="text-[9px] md:text-[10px] font-bold text-gray-400 uppercase">Próximamente</span>
                </div>

                <div class="absolute bottom-3 md:bottom-6 left-0 w-full px-3 md:px-5 z-20 text-center">
                    <h3 class="font-black text-base md:text-3xl uppercase tracking-widest text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] font-display mb-1 md:mb-2 leading-none">Mobile Legends</h3>
                    <p class="text-cyan-400 text-[10px] md:text-xs font-bold bg-cyan-500/10 inline-block px-2 py-0.5 md:px-3 md:py-1 rounded-full border border-cyan-500/20 mt-1 md:mt-2">Bolsa: 20,000 Diamantes</p>
                </div>
            </a>
            
           <!-- Torneo 4 -->
            <a href="custom.css#" class="snap-start min-w-[200px] md:min-w-[360px] aspect-video relative rounded-2xl md:rounded-3xl overflow-hidden card-hover group border border-white/5 shadow-lg bg-black">
                <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-[#030303]/40 to-transparent z-10 group-hover:via-[#030303]/20 transition-colors"></div>
                <img loading="lazy" decoding="async" src="https://i.supaimg.com/beb4d0db-20e1-45a7-98f6-4fe73f7dc153/4353644c-1817-4306-9e5d-2e2abb85f649.webp" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-100">
                
                <div class="absolute top-2 left-2 md:top-4 md:left-4 z-20 bg-black/90 border border-white/10 px-2 py-0.5 md:px-3 md:py-1 rounded-lg">
                    <span class="text-[9px] md:text-[10px] font-bold text-green-400 uppercase">Proximamente</span>
                </div>

                <div class="absolute bottom-3 md:bottom-6 left-0 w-full px-3 md:px-5 z-20 text-center">
                    <h3 class="font-black text-base md:text-3xl uppercase tracking-widest text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] font-display mb-1 md:mb-2">Brawl Stars</h3>
                    <p class="text-cyan-400 text-[10px] md:text-xs font-bold bg-cyan-500/10 inline-block px-2 py-0.5 md:px-3 md:py-1 rounded-full border border-cyan-500/20">Bolsa: 10,000 Gemas</p>
                </div>
            </a>
        </div>
    </section>

    <!-- ================= SECCIÓN: RANKING ARENA ================= -->
    <!-- RENDER-OPT añadido -->
    <section class="w-full px-3 md:px-8 lg:px-12 xl:px-20 py-5 md:py-12 relative render-opt" id="torres">
        
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-4 md:mb-8 gap-2 md:gap-4 relative z-10">
            <div>
                <p class="text-purple-400 font-bold text-[11px] md:text-xs tracking-widest uppercase mb-0.5 md:mb-1">Salón de la Fama</p>
                <h2 class="text-2xl md:text-4xl font-black text-white font-display">
                    Ranking <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">Arena</span>
                </h2>
            </div>
        </div>

        <!-- Contenedor flex deslizable en móvil, grid en PC -->
        <div class="flex flex-row md:grid md:grid-cols-2 gap-3 md:gap-6 overflow-x-auto hide-scrollbar snap-x relative z-10 pb-4">
            
            <!-- Tarjeta Ranking Free Fire -->
            <div class="snap-start min-w-[220px] w-[85vw] md:w-auto md:min-w-0 flex-shrink-0 bg-arena-gradient border border-white/10 rounded-[1.2rem] md:rounded-[2rem] p-4 md:p-8 relative overflow-hidden shadow-[0_20px_40px_rgba(0,0,0,0.6)] hover:border-cyan-500/30 transition-colors duration-500 transform-gpu">
                <div class="absolute -right-6 -top-6 md:-right-10 md:-top-10 text-cyan-500/5 text-7xl md:text-9xl">
                    <i class="fa-solid fa-crosshairs"></i>
                </div>

                <div class="flex justify-between items-center mb-4 md:mb-8 z-10 relative">
                    <h3 class="font-black text-base md:text-2xl text-white uppercase tracking-wider font-display">Free Fire</h3>
                </div>
                
                <!-- Estado: Próximamente (Sin backdrop-blur) -->
                <div class="flex flex-col items-center justify-center py-5 md:py-12 mb-4 md:mb-8 z-10 relative bg-[#0a0a0f] rounded-xl md:rounded-2xl border border-white/5 border-dashed">
                    <div class="w-10 h-10 md:w-16 md:h-16 rounded-full bg-cyan-500/10 flex items-center justify-center mb-2 md:mb-4 border border-cyan-500/20 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
                        <i class="fa-solid fa-lock text-lg md:text-2xl text-cyan-400"></i>
                    </div>
                    <h4 class="text-base md:text-xl font-black text-white uppercase tracking-widest mb-1 md:mb-2 font-display text-center">Próximamente</h4>
                    <p class="text-[11px] md:text-xs text-gray-400 text-center max-w-[220px] md:max-w-[280px] font-medium leading-relaxed">El sistema de ranking competitivo no está disponible en este momento. ¡Prepárate para dominar la arena muy pronto!</p>
                </div>

                <div class="flex gap-2 md:gap-3 z-10 relative opacity-40 pointer-events-none select-none">
                    <button class="flex-1 bg-cyan-500 text-white font-bold py-2 md:py-3 rounded-lg md:rounded-xl text-[10px] md:text-xs"><i class="fa-solid fa-gamepad mr-1 md:mr-2"></i> Competir Ahora</button>
                    <button class="flex-1 bg-black/40 border border-white/10 text-white font-bold py-2 md:py-3 rounded-lg md:rounded-xl text-[10px] md:text-xs"><i class="fa-solid fa-video mr-1 md:mr-2"></i> Ver Replays</button>
                </div>
            </div>

            <!-- Tarjeta Ranking Mobile Legends -->
            <div class="snap-start min-w-[220px] w-[85vw] md:w-auto md:min-w-0 flex-shrink-0 bg-arena-gradient-2 border border-white/10 rounded-[1.2rem] md:rounded-[2rem] p-4 md:p-8 relative overflow-hidden shadow-[0_20px_40px_rgba(0,0,0,0.6)] hover:border-purple-500/30 transition-colors duration-500 transform-gpu">
                <div class="absolute -right-6 -top-6 md:-right-10 md:-top-10 text-purple-500/5 text-7xl md:text-9xl">
                    <i class="fa-solid fa-khanda"></i>
                </div>

                <div class="flex justify-between items-center mb-4 md:mb-8 z-10 relative">
                    <h3 class="font-black text-base md:text-2xl text-white uppercase tracking-wider font-display">Mobile Legends</h3>
                </div>
                
                <!-- Estado: Próximamente (Sin backdrop-blur) -->
                <div class="flex flex-col items-center justify-center py-5 md:py-12 mb-4 md:mb-8 z-10 relative bg-[#0a0a0f] rounded-xl md:rounded-2xl border border-white/5 border-dashed">
                    <div class="w-10 h-10 md:w-16 md:h-16 rounded-full bg-purple-500/10 flex items-center justify-center mb-2 md:mb-4 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.2)]">
                        <i class="fa-solid fa-lock text-lg md:text-2xl text-purple-400"></i>
                    </div>
                    <h4 class="text-base md:text-xl font-black text-white uppercase tracking-widest mb-1 md:mb-2 font-display text-center">Próximamente</h4>
                    <p class="text-[11px] md:text-xs text-gray-400 text-center max-w-[220px] md:max-w-[280px] font-medium leading-relaxed">El sistema de ranking competitivo no está disponible en este momento. ¡Prepárate para dominar la arena muy pronto!</p>
                </div>

                <div class="flex gap-2 md:gap-3 z-10 relative opacity-40 pointer-events-none select-none">
                    <button class="flex-1 bg-purple-500 text-white font-bold py-2 md:py-3 rounded-lg md:rounded-xl text-[10px] md:text-xs"><i class="fa-solid fa-gamepad mr-1 md:mr-2"></i> Competir Ahora</button>
                    <button class="flex-1 bg-black/40 border border-white/10 text-white font-bold py-2 md:py-3 rounded-lg md:rounded-xl text-[10px] md:text-xs"><i class="fa-solid fa-video mr-1 md:mr-2"></i> Ver Replays</button>
                </div>
            </div>

        </div>
    </section>

    <!-- ================= SECCIÓN: CLIPS PREMIUM ================= -->
    <!-- RENDER-OPT añadido -->
    <section class="w-full px-3 md:px-8 lg:px-12 xl:px-20 py-5 md:py-12 render-opt" id="clips">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-4 md:mb-8 gap-2 md:gap-4">
            <div>
                <p class="text-bYellow font-bold text-[11px] md:text-xs tracking-widest uppercase mb-0.5 md:mb-1">Highlights</p>
                <h2 class="text-2xl md:text-4xl font-black text-white font-display">
                    Mejores <span class="text-transparent bg-clip-text bg-gradient-to-r from-bYellow to-yellow-400">Jugadas</span>
                </h2>
            </div>
        </div>

        <div id="clips-container" class="w-full flex justify-center">
            <!-- Letrero de estado vacío fijo en HTML como fallback -->
            <div class="w-full flex flex-col items-center justify-center py-6 md:py-16 bg-[#0a0a0f] rounded-[1.2rem] md:rounded-3xl border border-white/5 border-dashed">
                <div class="w-10 h-10 md:w-20 md:h-20 rounded-full bg-bYellow/10 flex items-center justify-center mb-2 md:mb-4 border border-bYellow/20 shadow-[0_0_15px_rgba(214,255,0,0.1)]">
                    <i class="fa-solid fa-video-slash text-lg md:text-3xl text-bYellow"></i>
                </div>
                <h4 class="text-base md:text-2xl font-black text-white uppercase tracking-widest mb-1 md:mb-2 font-display text-center">Aún no hay clips</h4>
                <p class="text-[11px] md:text-sm text-gray-400 text-center max-w-[280px] md:max-w-[350px] font-medium leading-relaxed px-4">Nuestros guerreros están en el campo de batalla. ¡Vuelve pronto para ver las mejores jugadas de la comunidad!</p>
            </div>
        </div>
    </section>

    <!-- ================= SECCIÓN: COMUNIDAD LYZNET ================= -->
    <!-- RENDER-OPT añadido -->
    <section class="w-full px-3 md:px-8 lg:px-12 xl:px-20 py-6 md:py-16 render-opt">
        <div class="relative rounded-[1.5rem] md:rounded-[2.5rem] bg-[#050505] overflow-hidden border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.9)] transform-gpu pb-5 md:pb-16 lg:pb-16">
            
            <!-- Patrón de fondo premium, elegante y limpio -->
            <div class="absolute inset-0 bg-gradient-to-br from-[#0a0a0c] via-[#050505] to-[#121214] z-0"></div>
            
            <div class="relative z-10 flex flex-col items-center justify-center pt-5 md:pt-14 px-3 md:px-14 gap-5 md:gap-12">
                
                <!-- Encabezado Limpio -->
                <div class="text-center max-w-3xl flex flex-col items-center">
                    <div class="inline-flex items-center gap-1.5 md:gap-2 px-2.5 md:px-3 py-1 md:py-1.5 rounded-full bg-black border border-white/10 mb-3 md:mb-6 shadow-sm">
                        <i class="fa-solid fa-shield-halved text-yellow-500 text-[9px] md:text-[10px]"></i>
                        <span class="text-[9px] md:text-[10px] font-bold text-gray-300 tracking-widest uppercase">Plataforma Verificada</span>
                    </div>
                    
                    <h2 class="text-2xl md:text-5xl font-black text-white font-display mb-2 md:mb-5 leading-tight">
                        Red Oficial <br class="hidden md:block">
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-600">LyzNet Comunidad</span>
                    </h2>
                    
                    <p class="text-gray-400 text-xs md:text-base font-medium leading-relaxed max-w-xl mx-auto px-2">
                        Únete a nuestra infraestructura premium. Soporte certificado, anuncios oficiales y contacto directo con la administración en un entorno 100% seguro y legal.
                    </p>
                </div>
                
                <!-- Contenedor Horizontal (Scroll en móvil / Grid en PC) -->
                <div class="flex lg:grid lg:grid-cols-5 gap-3 md:gap-5 w-full max-w-[1400px] mx-auto overflow-x-auto lg:overflow-visible snap-x snap-mandatory hide-scrollbar px-2 lg:px-0">
                    
                    <!-- 1. Tarjeta: DISCORD -->
                    <a href="https://discord.gg/XrkNQCn3KJ" target="_blank" class="relative w-[210px] md:w-[280px] lg:w-full flex-shrink-0 snap-center rounded-[1.2rem] md:rounded-3xl p-3.5 md:p-6 shadow-2xl border border-white/20 group overflow-hidden flex flex-col items-center text-center gap-3 md:gap-4 hover:-translate-y-2 transition-all duration-500 bg-gradient-to-br from-[#5865F2] to-[#404EED] hover:shadow-lg">
                        <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
                        
                        <div class="flex-shrink-0 relative z-10">
                            <div class="w-10 h-10 md:w-16 md:h-16 rounded-[0.8rem] md:rounded-2xl bg-white/20  flex items-center justify-center border border-white/30 shadow-lg group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-brands fa-discord text-xl md:text-3xl text-white"></i>
                            </div>
                            <div class="absolute -bottom-1.5 -right-2 md:-bottom-2 md:-right-3 bg-green-500 text-black text-[9px] md:text-[9px] font-black px-1.5 py-0.5 md:px-2 md:py-0.5 rounded-full border-2 border-[#404EED] uppercase tracking-wider shadow-md">Oficial</div>
                        </div>
                        
                        <div class="flex-grow flex flex-col z-10 w-full h-full justify-between">
                            <div>
                                <h3 class="font-black text-[15px] md:text-xl text-white tracking-wide mb-1 md:mb-2">Servidor Central Discord</h3>
                                <p class="text-[11px] md:text-[12px] text-white/90 font-medium mb-2 md:mb-4 leading-snug">El punto de encuentro exclusivo para todos nuestros clientes. Recibe soporte 24/7, notificaciones de torneos y verifica tus transacciones.</p>
                            </div>
                            <span class="inline-flex justify-center items-center gap-1.5 md:gap-2 w-full bg-black/20 group-hover:bg-white group-hover:text-[#5865F2] text-white font-bold py-1.5 px-2 md:py-2.5 md:px-4 rounded-lg md:rounded-xl text-[11px] md:text-xs transition-all border border-white/10 uppercase tracking-wide">
                                Entrar al Servidor <i class="fa-solid fa-arrow-right"></i>
                            </span>
                        </div>
                    </a>

                    <!-- 2. Tarjeta: INSTAGRAM -->
                    <a href="https://www.instagram.com/lyz_market?igsh=MWlnM2podHAwdWxsdg==" target="_blank" class="relative w-[210px] md:w-[280px] lg:w-full flex-shrink-0 snap-center rounded-[1.2rem] md:rounded-3xl p-3.5 md:p-6 shadow-2xl border border-white/20 group overflow-hidden flex flex-col items-center text-center gap-3 md:gap-4 hover:-translate-y-2 transition-all duration-500 bg-gradient-to-bl from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] hover:shadow-lg">
                        <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
                        
                        <div class="flex-shrink-0 relative z-10">
                            <div class="w-10 h-10 md:w-16 md:h-16 rounded-[0.8rem] md:rounded-2xl bg-white/20  flex items-center justify-center border border-white/30 shadow-lg group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-brands fa-instagram text-xl md:text-3xl text-white"></i>
                            </div>
                        </div>
                        
                        <div class="flex-grow flex flex-col z-10 w-full h-full justify-between">
                            <div>
                                <h3 class="font-black text-[15px] md:text-xl text-white tracking-wide mb-1 md:mb-2">@LyzMarket</h3>
                                <p class="text-[11px] md:text-[12px] text-white/90 font-medium mb-2 md:mb-4 leading-snug">Noticias y Sorteos. Conéctate con nosotros en nuestra cuenta oficial para descubrir promociones exclusivas y actualizaciones diarias de la comunidad.</p>
                            </div>
                            <span class="inline-flex justify-center items-center gap-1.5 md:gap-2 w-full bg-black/20 group-hover:bg-white group-hover:text-[#ee2a7b] text-white font-bold py-1.5 px-2 md:py-2.5 md:px-4 rounded-lg md:rounded-xl text-[11px] md:text-xs transition-all border border-white/10 uppercase tracking-wide">
                                Ver Perfil <i class="fa-solid fa-chevron-right text-[10px] md:text-[10px]"></i>
                            </span>
                        </div>
                    </a>

                    <!-- 3. Tarjeta: TIKTOK -->
                    <a href="https://www.tiktok.com/@lyz_market" target="_blank" class="relative w-[210px] md:w-[280px] lg:w-full flex-shrink-0 snap-center rounded-[1.2rem] md:rounded-3xl p-3.5 md:p-6 shadow-2xl border border-white/20 group overflow-hidden flex flex-col items-center text-center gap-3 md:gap-4 hover:-translate-y-2 transition-all duration-500 bg-gradient-to-br from-[#25F4EE] to-[#FE2C55] hover:shadow-lg">
                        <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
                        
                        <div class="flex-shrink-0 relative z-10">
                            <div class="w-10 h-10 md:w-16 md:h-16 rounded-[0.8rem] md:rounded-2xl bg-white/30  flex items-center justify-center border border-white/40 shadow-lg group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-brands fa-tiktok text-xl md:text-3xl text-white"></i>
                            </div>
                        </div>
                        
                        <div class="flex-grow flex flex-col z-10 w-full h-full justify-between">
                            <div>
                                <h3 class="font-black text-[15px] md:text-xl text-white tracking-wide mb-1 md:mb-2">LyzNet Clips</h3>
                                <p class="text-[11px] md:text-[12px] text-white/90 font-medium mb-2 md:mb-4 leading-snug">Contenido Audiovisual. Disfruta de los mejores clips virales, tutoriales rápidos y momentos épicos de toda nuestra plataforma.</p>
                            </div>
                            <span class="inline-flex justify-center items-center gap-1.5 md:gap-2 w-full bg-black/20 group-hover:bg-white group-hover:text-[#FE2C55] text-white font-bold py-1.5 px-2 md:py-2.5 md:px-4 rounded-lg md:rounded-xl text-[11px] md:text-xs transition-all border border-white/10 uppercase tracking-wide">
                                Ver Videos <i class="fa-solid fa-chevron-right text-[10px] md:text-[10px]"></i>
                            </span>
                        </div>
                    </a>

                    <!-- 4. Tarjeta: WHATSAPP -->
                    <a href="custom.css#" target="_blank" class="relative w-[210px] md:w-[280px] lg:w-full flex-shrink-0 snap-center rounded-[1.2rem] md:rounded-3xl p-3.5 md:p-6 shadow-2xl border border-white/20 group overflow-hidden flex flex-col items-center text-center gap-3 md:gap-4 hover:-translate-y-2 transition-all duration-500 bg-gradient-to-br from-[#25D366] to-[#128C7E] hover:shadow-lg">
                        <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
                        
                        <div class="flex-shrink-0 relative z-10">
                            <div class="w-10 h-10 md:w-16 md:h-16 rounded-[0.8rem] md:rounded-2xl bg-white/20  flex items-center justify-center border border-white/30 shadow-lg group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-brands fa-whatsapp text-xl md:text-3xl text-white"></i>
                            </div>
                        </div>
                        
                        <div class="flex-grow flex flex-col z-10 w-full h-full justify-between">
                            <div>
                                <h3 class="font-black text-[15px] md:text-xl text-white tracking-wide mb-1 md:mb-2">Línea Directa</h3>
                                <p class="text-[11px] md:text-[12px] text-white/90 font-medium mb-2 md:mb-4 leading-snug">Atención al instante. Comunícate de forma rápida y segura para ventas, consultas personalizadas y soporte técnico en tiempo real.</p>
                            </div>
                            <span class="inline-flex justify-center items-center gap-1.5 md:gap-2 w-full bg-black/20 group-hover:bg-white group-hover:text-[#128C7E] text-white font-bold py-1.5 px-2 md:py-2.5 md:px-4 rounded-lg md:rounded-xl text-[11px] md:text-xs transition-all border border-white/10 uppercase tracking-wide">
                                Contactar <i class="fa-solid fa-chevron-right text-[10px] md:text-[10px]"></i>
                            </span>
                        </div>
                    </a>

                    <!-- 5. Tarjeta: X (TWITTER) -->
                    <a href="custom.css#" target="_blank" class="relative w-[210px] md:w-[280px] lg:w-full flex-shrink-0 snap-center rounded-[1.2rem] md:rounded-3xl p-3.5 md:p-6 shadow-2xl border border-white/20 group overflow-hidden flex flex-col items-center text-center gap-3 md:gap-4 hover:-translate-y-2 transition-all duration-500 bg-gradient-to-br from-[#1DA1F2] to-[#0c85d0] hover:shadow-lg">
                        <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
                        
                        <div class="flex-shrink-0 relative z-10">
                            <div class="w-10 h-10 md:w-16 md:h-16 rounded-[0.8rem] md:rounded-2xl bg-white/20  flex items-center justify-center border border-white/30 shadow-lg group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-brands fa-x-twitter text-xl md:text-3xl text-white"></i>
                            </div>
                        </div>
                        
                        <div class="flex-grow flex flex-col z-10 w-full h-full justify-between">
                            <div>
                                <h3 class="font-black text-[15px] md:text-xl text-white tracking-wide mb-1 md:mb-2">Red Oficial X</h3>
                                <p class="text-[11px] md:text-[12px] text-white/90 font-medium mb-2 md:mb-4 leading-snug">Entérate antes que nadie. Sigue nuestra cuenta para anuncios oficiales, estado de los servidores y noticias de último minuto.</p>
                            </div>
                            <span class="inline-flex justify-center items-center gap-1.5 md:gap-2 w-full bg-black/20 group-hover:bg-white group-hover:text-[#1DA1F2] text-white font-bold py-1.5 px-2 md:py-2.5 md:px-4 rounded-lg md:rounded-xl text-[11px] md:text-xs transition-all border border-white/10 uppercase tracking-wide">
                                Seguir Cuenta <i class="fa-solid fa-chevron-right text-[10px] md:text-[10px]"></i>
                            </span>
                        </div>
                    </a>

                </div>
            </div>
        </div>
    </section>

    <!-- Componente Footer -->
    <global-footer></global-footer>

</body>
</html>


