{"id":11,"date":"2026-07-03T17:52:16","date_gmt":"2026-07-03T17:52:16","guid":{"rendered":"https:\/\/paseolucia.eipipro.com\/?page_id=11"},"modified":"2026-07-03T20:14:49","modified_gmt":"2026-07-03T20:14:49","slug":"paseolucia","status":"publish","type":"page","link":"https:\/\/paseolucia.eipipro.com\/","title":{"rendered":"PASEO LUCIA"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <title>Plaza Comercial Paseo Luc\u00eda<\/title>\n    \n    <!-- PWA Meta Tags -->\n    <meta name=\"theme-color\" content=\"#002D4A\">\n    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\n    <meta name=\"apple-mobile-web-app-title\" content=\"Paseo Luc\u00eda\">\n    \n    <!-- Google Fonts: Inter -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&#038;display=swap\" rel=\"stylesheet\">\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    \n    <!-- Font Awesome -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n    <!-- Custom Config for Brand Colors -->\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['Inter', 'sans-serif'],\n                    },\n                    colors: {\n                        brand: {\n                            main: '#00365A',\n                            light: '#005288',\n                            surface: '#F4F7F9',\n                            purple: '#662E93',\n                            cyan: '#47C3D3',\n                            green: '#439539',\n                            yellow: '#FFB81C',\n                            red: '#E3001B'\n                        }\n                    },\n                    boxShadow: {\n                        'app': '0 8px 30px rgba(0,0,0,0.04)',\n                        'app-hover': '0 10px 40px rgba(0,0,0,0.08)',\n                        'glass': '0 4px 30px rgba(0, 0, 0, 0.1)',\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        body {\n            background-color: #F4F7F9;\n            -webkit-tap-highlight-color: transparent;\n            background-image: radial-gradient(#cbd5e1 1px, transparent 1px);\n            background-size: 30px 30px;\n        }\n\n        .fade-in {\n            animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(15px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .logo-ring {\n            background: conic-gradient(from 200deg at 50% 50%, \n                #662E93 0%, #47C3D3 25%, #439539 50%, #FFB81C 75%, #E3001B 100%\n            );\n        }\n\n        .glass-panel {\n            background: rgba(255, 255, 255, 0.85);\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border-bottom: 1px solid rgba(255, 255, 255, 0.5);\n        }\n\n        \/* Ocultar Bot\u00f3n Instalar si es PWA\/Standalone *\/\n        @media all and (display-mode: standalone) {\n            #installBtn { display: none !important; }\n        }\n    <\/style>\n<\/head>\n<body class=\"text-gray-800 antialiased pb-12 overflow-x-hidden\">\n\n    <!-- HEADER FIJO -->\n    <header class=\"fixed top-0 left-0 right-0 glass-panel shadow-sm z-50 transition-all duration-300 flex justify-center\">\n        <div class=\"w-full max-w-7xl px-2 sm:px-4 lg:px-8 py-3 flex justify-between items-center\">\n            <div class=\"flex items-center gap-2 sm:gap-3 flex-shrink-0\">\n                <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-brand-main flex flex-shrink-0 items-center justify-center text-white font-bold text-2xl sm:text-3xl pb-1\">\n                    PL\n                <\/div>\n                <!-- El texto ya no est\u00e1 oculto en m\u00f3viles, se ajustaron los tama\u00f1os para ser m\u00e1s grandes -->\n                <div class=\"flex flex-col\">\n                    <span class=\"font-black text-brand-main leading-none text-[16px] sm:text-[20px]\">Paseo Luc\u00eda<\/span>\n                    <span class=\"text-[10px] sm:text-[13px] text-gray-500 font-bold uppercase tracking-widest mt-0.5\">Plaza Comercial<\/span>\n                <\/div>\n            <\/div>\n            \n            <!-- Botones de Cabecera (M\u00e1s grandes) -->\n            <div class=\"flex items-center gap-1.5 sm:gap-2\">\n                <a href=\"https:\/\/paseolucia.eipipro.com\/informacion\" target=\"_blank\" class=\"bg-brand-main text-white hover:bg-brand-light active:bg-gray-500 shadow-sm px-3 sm:px-6 py-2.5 sm:py-3 rounded-full text-[12px] sm:text-[15px] font-black transition-colors active:scale-95 flex items-center gap-1.5 sm:gap-2 border border-transparent\">\n                    <span class=\"hidden sm:inline\">Informaci\u00f3n<\/span><span class=\"sm:hidden\">Informaci\u00f3n<\/span> <i class=\"fa-solid fa-circle-info text-white\/90\"><\/i>\n                <\/a>\n                <button id=\"installBtn\" class=\"bg-brand-main text-white hover:bg-brand-light active:bg-gray-500 shadow-sm px-3 sm:px-6 py-2.5 sm:py-3 rounded-full text-[12px] sm:text-[15px] font-black transition-colors active:scale-95 flex items-center gap-1.5 sm:gap-2 border border-transparent\">\n                    Instalar <i class=\"fa-solid fa-cloud-arrow-down text-white\/90\"><\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- CONTENIDO PRINCIPAL -->\n    <main class=\"pt-28 sm:pt-32 lg:pt-40 w-full max-w-full sm:max-w-2xl lg:max-w-7xl mx-auto flex flex-col lg:grid lg:grid-cols-12 lg:gap-10 lg:px-8 fade-in\">\n        \n        <!-- ==============================================\n             COLUMNA IZQUIERDA (En PC) \n             ============================================== -->\n        <div class=\"contents lg:block lg:col-span-4 lg:space-y-8\">\n            \n            <!-- 1. PERFIL -->\n            <div class=\"order-1 flex flex-col items-center text-center mb-8 sm:mb-10 lg:mb-0 px-2 sm:px-5 lg:px-0\">\n                <div class=\"relative w-44 h-44 rounded-full mb-6 flex items-center justify-center logo-ring shadow-lg p-1.5\">\n                    <div class=\"w-full h-full bg-white rounded-full overflow-hidden border-4 border-white flex items-center justify-center relative\">\n                        <img decoding=\"async\" src=\"https:\/\/paseolucia.eipipro.com\/wp-content\/uploads\/2026\/07\/SGN_07_03_2026_1783104217467.png\" alt=\"Logo Paseo Luc\u00eda\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                <\/div>\n                <h1 class=\"text-5xl font-black text-brand-main tracking-tight mb-3\">Paseo Luc\u00eda<\/h1>\n                <p class=\"text-gray-600 text-lg font-medium px-2 leading-relaxed\">\n                    CENTRO COMERCIAL HUEHUETENANGO.\n                <\/p>\n            <\/div>\n\n            <!-- 2. BOTONES DE ACCI\u00d3N (Texto m\u00e1s grande) -->\n            <div class=\"order-2 grid grid-cols-3 gap-2 sm:gap-3 mb-10 sm:mb-12 lg:mb-0 px-1 sm:px-5 lg:px-0\">\n                <a href=\"https:\/\/wa.me\/1234567890?text=Hola,%20me%20gustar\u00eda%20informaci\u00f3n%20sobre%20Paseo%20Luc\u00eda.\" target=\"_blank\" class=\"flex flex-col items-center justify-center bg-white py-5 sm:py-6 rounded-[1.25rem] shadow-app hover:shadow-app-hover active:scale-95 transition-all duration-200 group\">\n                    <div class=\"w-16 h-16 rounded-full bg-green-50 text-green-500 flex items-center justify-center text-4xl mb-3 group-hover:bg-green-100 transition-colors\">\n                        <i class=\"fa-brands fa-whatsapp\"><\/i>\n                    <\/div>\n                    <span class=\"text-[14px] sm:text-base font-bold text-gray-700 text-center leading-tight\">Administraci\u00f3n<\/span>\n                <\/a>\n                <a href=\"https:\/\/maps.app.goo.gl\/VSv3h6YaUw6ayAou5?g_st=ac\" target=\"_blank\" class=\"flex flex-col items-center justify-center bg-white py-5 sm:py-6 rounded-[1.25rem] shadow-app hover:shadow-app-hover active:scale-95 transition-all duration-200 group\">\n                    <div class=\"w-16 h-16 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center text-4xl mb-3 group-hover:bg-blue-100 transition-colors\">\n                        <i class=\"fa-solid fa-location-arrow\"><\/i>\n                    <\/div>\n                    <span class=\"text-[14px] sm:text-base font-bold text-gray-700 text-center leading-tight\">Como llegar<\/span>\n                <\/a>\n                <button onclick=\"downloadVCard()\" class=\"flex flex-col items-center justify-center bg-white py-5 sm:py-6 rounded-[1.25rem] shadow-app hover:shadow-app-hover active:scale-95 transition-all duration-200 group w-full border-none outline-none\">\n                    <div class=\"w-16 h-16 rounded-full bg-brand-main\/10 text-brand-main flex items-center justify-center text-4xl mb-3 group-hover:bg-brand-main group-hover:text-white transition-colors\">\n                        <i class=\"fa-regular fa-address-book\"><\/i>\n                    <\/div>\n                    <span class=\"text-[14px] sm:text-base font-bold text-gray-700 text-center leading-tight\">Guardar<\/span>\n                <\/button>\n            <\/div>\n\n            <!-- 6. HORARIOS Y SERVICIOS (Texto ampliado) -->\n            <div class=\"order-6 bg-white sm:rounded-[1.5rem] shadow-sm sm:shadow-app px-4 py-6 sm:p-8 mb-6 lg:mb-0 border-y sm:border-none border-gray-100\">\n                <h2 class=\"text-2xl font-bold text-gray-800 mb-6 flex items-center gap-3\">\n                    <i class=\"fa-regular fa-clock text-brand-light\"><\/i> Informaci\u00f3n General\n                <\/h2>\n                <div class=\"space-y-4\">\n                    <div class=\"flex justify-between items-center bg-gray-50 p-4 rounded-xl\">\n                        <span class=\"text-base sm:text-lg text-gray-600 font-semibold\">Lunes a Viernes<\/span>\n                        <span class=\"text-base sm:text-lg font-black text-brand-main\">10:00 &#8211; 20:00<\/span>\n                    <\/div>\n                    <div class=\"flex justify-between items-center bg-gray-50 p-4 rounded-xl\">\n                        <span class=\"text-base sm:text-lg text-gray-600 font-semibold\">S\u00e1bados<\/span>\n                        <span class=\"text-base sm:text-lg font-black text-brand-main\">10:00 &#8211; 21:00<\/span>\n                    <\/div>\n                    <div class=\"flex justify-between items-center bg-gray-50 p-4 rounded-xl\">\n                        <span class=\"text-base sm:text-lg text-gray-600 font-semibold\">Domingos<\/span>\n                        <span class=\"text-base sm:text-lg font-black text-brand-main\">10:00 &#8211; 19:00<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"mt-8 pt-8 border-t border-gray-100 flex flex-wrap gap-2 sm:gap-3\">\n                    <span class=\"px-4 py-2.5 bg-gray-100 text-gray-700 rounded-full text-[14px] sm:text-base font-bold flex items-center gap-2\"><i class=\"fa-solid fa-car text-gray-400\"><\/i> Parqueo<\/span>\n                    <span class=\"px-4 py-2.5 bg-gray-100 text-gray-700 rounded-full text-[14px] sm:text-base font-bold flex items-center gap-2\"><i class=\"fa-solid fa-wifi text-gray-400\"><\/i> Wi-Fi<\/span>\n                    <span class=\"px-4 py-2.5 bg-gray-100 text-gray-700 rounded-full text-[14px] sm:text-base font-bold flex items-center gap-2\"><i class=\"fa-solid fa-shield-halved text-gray-400\"><\/i> Seguridad<\/span>\n                    <span class=\"px-4 py-2.5 bg-gray-100 text-gray-700 rounded-full text-[14px] sm:text-base font-bold flex items-center gap-2\"><i class=\"fa-solid fa-wheelchair text-gray-400\"><\/i> Accesibilidad<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- 7. C\u00d3DIGO QR -->\n            <div class=\"order-7 bg-white sm:rounded-[1.5rem] shadow-sm sm:shadow-app px-4 py-8 sm:p-8 border-y sm:border-none border-gray-100 flex flex-col items-center text-center\">\n                <h2 class=\"text-3xl font-black text-brand-main mb-4\">Compartir App<\/h2>\n                <p class=\"text-gray-500 text-lg font-semibold mb-8\">Escanea este c\u00f3digo para acceder a Paseo Luc\u00eda r\u00e1pidamente.<\/p>\n                <div class=\"bg-white p-5 rounded-[2rem] shadow-[0_10px_40px_rgba(0,0,0,0.12)] border-2 border-gray-50 mb-6\">\n                    <img decoding=\"async\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=300x300&#038;data=https:\/\/paseolucia.eipipro.com&#038;margin=1\" alt=\"QR Code Paseo Luc\u00eda\" class=\"w-64 h-64 lg:w-56 lg:h-56 object-contain rounded-xl\">\n                <\/div>\n                <a href=\"https:\/\/paseolucia.eipipro.com\" target=\"_blank\" class=\"text-brand-light font-bold text-xl hover:underline flex items-center gap-2 active:scale-95 transition-transform\">\n                    paseolucia.eipipro.com <i class=\"fa-solid fa-arrow-up-right-from-square text-lg\"><\/i>\n                <\/a>\n            <\/div>\n\n        <\/div>\n\n        <!-- ==============================================\n             COLUMNA DERECHA (En PC) \n             ============================================== -->\n        <div class=\"contents lg:block lg:col-span-8 lg:space-y-8\">\n            \n            <!-- 3. CARTELERA PROMOCIONAL -->\n            <div class=\"order-3 mb-10 sm:mb-12 lg:mb-0 relative w-full h-[300px] md:h-[400px] lg:h-[460px] sm:rounded-[1.5rem] lg:rounded-[2rem] overflow-hidden shadow-app-hover active:opacity-90 transition-opacity duration-300 cursor-pointer group\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1483985988355-763728e1935b?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Promoci\u00f3n del Mes\" class=\"w-full h-full object-cover\">\n                <div class=\"absolute inset-0 bg-gradient-to-t from-brand-main via-brand-main\/40 to-transparent\"><\/div>\n                <div class=\"absolute bottom-0 left-0 w-full p-6 sm:p-8 lg:p-12 flex flex-col justify-end h-full\">\n                    <div class=\"flex items-center gap-2 mb-4\">\n                        <span class=\"px-5 py-2 bg-white\/20 backdrop-blur-md text-white text-sm font-bold uppercase tracking-wider rounded-full border border-white\/30\">\n                            <i class=\"fa-solid fa-fire text-brand-yellow mr-1\"><\/i> Oferta del Mes\n                        <\/span>\n                    <\/div>\n                    <h3 class=\"text-white text-4xl sm:text-5xl lg:text-6xl font-black leading-tight mb-3\">D\u00edas de<br>Descuentos<\/h3>\n                    <p class=\"text-white\/90 text-base sm:text-lg lg:text-xl font-semibold\">Hasta 50% off en marcas seleccionadas.<\/p>\n                    <div class=\"absolute bottom-6 right-6 lg:bottom-12 lg:right-12 w-14 h-14 sm:w-16 sm:h-16 bg-white rounded-full flex items-center justify-center shadow-lg text-brand-main text-2xl group-active:scale-90 transition-transform\">\n                        <i class=\"fa-solid fa-arrow-right\"><\/i>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 4. RESE\u00d1AS Y CLIENTE FRECUENTE -->\n            <div class=\"order-4 px-1 sm:px-5 lg:px-0 mb-10 sm:mb-12 lg:mb-0 grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 lg:gap-6\">\n                <!-- Rese\u00f1as -->\n                <a href=\"https:\/\/g.page\/r\/CcWiLCl32R1hEBM\/review\" target=\"_blank\" class=\"bg-brand-main w-full py-6 sm:py-8 rounded-[1.25rem] flex items-center justify-between px-5 sm:px-6 group active:scale-[0.98] hover:shadow-app-hover transition-all border border-yellow-500\/30 shadow-app h-full\">\n                    <div class=\"flex items-center\">\n                        <div class=\"bg-yellow-500\/20 p-3 sm:p-4 rounded-full mr-4 sm:mr-5 text-yellow-400 group-hover:scale-110 transition border border-yellow-500\/30\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 sm:h-10 sm:w-10\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"text-left pr-2\">\n                            <h4 class=\"font-black text-white text-lg sm:text-xl leading-tight mb-1.5\">D\u00e9janos tu opini\u00f3n<\/h4>\n                            <p class=\"text-[14px] sm:text-[15px] text-yellow-400\/90 font-semibold leading-snug\">Mu\u00e9strala en Admin y recibe Regalo \ud83c\udf81<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"bg-white\/10 p-2.5 sm:p-3 rounded-full group-hover:bg-white\/20 transition flex-shrink-0\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 sm:h-7 sm:w-7 text-gray-300 group-hover:text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M9 5l7 7-7 7\" \/><\/svg>\n                    <\/div>\n                <\/a>\n                \n                <!-- Cliente Frecuente -->\n                <a href=\"https:\/\/app.eipipro.com\/cliente-frecuente\/\" target=\"_blank\" class=\"bg-brand-main w-full py-6 sm:py-8 rounded-[1.25rem] flex items-center justify-between px-5 sm:px-6 group active:scale-[0.98] hover:shadow-app-hover transition-all border border-emerald-500\/30 shadow-app relative overflow-hidden h-full\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-emerald-500\/20 to-transparent opacity-0 group-hover:opacity-100 transition duration-500\"><\/div>\n                    <div class=\"flex items-center relative z-10\">\n                        <div class=\"bg-emerald-500\/20 p-3 sm:p-4 rounded-full mr-4 sm:mr-5 text-emerald-400 group-hover:scale-110 transition border border-emerald-500\/30\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 sm:h-10 sm:w-10\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z\" clip-rule=\"evenodd\" \/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"text-left pr-2\">\n                            <h4 class=\"font-black text-white text-lg sm:text-xl leading-tight mb-1.5\">Cliente Frecuente<\/h4>\n                            <p class=\"text-[14px] sm:text-[15px] text-emerald-300\/90 font-semibold leading-snug\">Registra tu visita y acumula puntos<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"bg-white\/10 p-2.5 sm:p-3 rounded-full group-hover:bg-white\/20 transition relative z-10 flex-shrink-0\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 sm:h-7 sm:w-7 text-gray-300 group-hover:text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M9 5l7 7-7 7\" \/><\/svg>\n                    <\/div>\n                <\/a>\n            <\/div>\n\n            <!-- 5. MARCAS AFILIADAS Y BUSCADOR -->\n            <div class=\"order-5 mb-10 sm:mb-12 lg:mb-0 w-full bg-white lg:p-8 lg:rounded-[2rem] lg:shadow-app lg:border border-gray-100\">\n                \n                <!-- Encabezado y Buscador -->\n                <div class=\"flex flex-col sm:flex-row sm:items-center justify-between mb-6 px-3 sm:px-5 lg:px-0 gap-5 mt-4 lg:mt-0\">\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"w-12 h-12 rounded-full bg-brand-main\/10 flex items-center justify-center text-brand-main\">\n                            <i class=\"fa-brands fa-instagram text-2xl\"><\/i>\n                        <\/div>\n                        <h2 class=\"text-2xl font-bold text-gray-800\">Nuestras Marcas<\/h2>\n                    <\/div>\n                    \n                    <!-- Campo de b\u00fasqueda -->\n                    <div class=\"relative w-full sm:w-72\">\n                        <div class=\"absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none\">\n                            <i class=\"fa-solid fa-magnifying-glass text-gray-400 text-lg\"><\/i>\n                        <\/div>\n                        <input type=\"text\" id=\"brandSearch\" class=\"bg-gray-50 border border-gray-200 text-gray-800 text-base font-medium rounded-xl focus:ring-brand-main focus:border-brand-main block w-full pl-12 p-3.5 outline-none transition-all shadow-sm\" placeholder=\"Buscar marca...\">\n                    <\/div>\n                <\/div>\n\n                <!-- Cuadr\u00edcula de marcas -->\n                <div class=\"grid grid-cols-3 md:grid-cols-4 lg:grid-cols-4 gap-[2px] lg:gap-3 sm:rounded-xl lg:rounded-2xl overflow-hidden sm:shadow-sm lg:shadow-none bg-gray-200 lg:bg-transparent border-y sm:border border-gray-200 lg:border-none min-h-[200px]\" id=\"brandsContainer\">\n                    <!-- Javascript inyecta las im\u00e1genes aqu\u00ed -->\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/main>\n\n    <!-- Modal Personalizado para Instalaci\u00f3n -->\n    <div id=\"customModal\" class=\"fixed inset-0 bg-brand-main\/40 backdrop-blur-md z-[60] hidden flex items-end sm:items-center justify-center sm:px-4 opacity-0 transition-opacity duration-300\">\n        <div class=\"bg-white rounded-t-[2rem] sm:rounded-[2rem] p-8 w-full max-w-sm text-center shadow-2xl transform translate-y-full sm:translate-y-0 sm:scale-95 transition-transform duration-400 ease-out\" id=\"modalContent\">\n            <div class=\"w-12 h-1.5 bg-gray-200 rounded-full mx-auto mb-8 sm:hidden\"><\/div>\n            <div class=\"w-20 h-20 bg-blue-50 text-brand-light rounded-full mx-auto flex items-center justify-center text-4xl mb-6\">\n                <i class=\"fa-solid fa-arrow-up-from-bracket\"><\/i>\n            <\/div>\n            <h3 class=\"text-3xl font-black text-brand-main mb-4\" id=\"modalTitle\">Instalar en iPhone<\/h3>\n            <p class=\"text-gray-500 text-lg font-medium mb-8 leading-relaxed\" id=\"modalText\">\n                Toca el \u00edcono de <b class=\"text-gray-800\">Compartir<\/b> en la barra inferior de tu navegador y luego selecciona <br><b class=\"text-gray-800\">Agregar a inicio<\/b>.\n            <\/p>\n            <button onclick=\"closeModal()\" class=\"w-full bg-brand-main text-white py-5 rounded-2xl font-bold text-xl shadow-app hover:bg-brand-light transition-colors\">\n                Entendido\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- SCRIPTS -->\n    <script>\n        \/\/ COMPROBAR SI YA EST\u00c1 INSTALADA\n        function checkInstalled() {\n            if (window.navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches || document.referrer.includes('android-app:\/\/')) {\n                document.getElementById('installBtn').style.display = 'none';\n            }\n        }\n\n        window.addEventListener('DOMContentLoaded', checkInstalled);\n        \n        \/\/ Escuchar el evento nativo cuando la app se instala con \u00e9xito\n        window.addEventListener('appinstalled', () => {\n            document.getElementById('installBtn').style.display = 'none';\n            if (typeof closeModal === 'function') closeModal();\n        });\n\n        let deferredPrompt;\n        const installBtn = document.getElementById('installBtn');\n        const modal = document.getElementById('customModal');\n\n        window.addEventListener('beforeinstallprompt', (e) => {\n            e.preventDefault();\n            deferredPrompt = e;\n            \/\/ Solo mostramos el bot\u00f3n si no estamos en modo standalone\n            if (!window.matchMedia('(display-mode: standalone)').matches) {\n                installBtn.style.display = 'flex'; \n            }\n        });\n\n        installBtn.addEventListener('click', async () => {\n            if (deferredPrompt) {\n                \/\/ Fuerzo el prompt de instalaci\u00f3n nativo\n                deferredPrompt.prompt();\n                const { outcome } = await deferredPrompt.userChoice;\n                if (outcome === 'accepted') {\n                    installBtn.style.display = 'none'; \/\/ Ocultar inmediatamente si acepta\n                }\n                deferredPrompt = null;\n            } else {\n                const isIos = () => \/iphone|ipad|ipod\/.test(window.navigator.userAgent.toLowerCase());\n                if (isIos()) {\n                    showModal();\n                } else {\n                    document.getElementById('modalTitle').innerText = \"Instalaci\u00f3n Manual\";\n                    document.getElementById('modalText').innerHTML = \"Ve al men\u00fa de tu navegador (tres puntos) y selecciona <br><b class='text-gray-800'>Agregar a la pantalla principal<\/b>.\";\n                    document.querySelector('#modalContent i.fa-arrow-up-from-bracket').className = \"fa-solid fa-ellipsis-vertical\";\n                    showModal();\n                }\n            }\n        });\n\n        function showModal() {\n            modal.classList.remove('hidden');\n            setTimeout(() => {\n                modal.classList.remove('opacity-0');\n                document.getElementById('modalContent').classList.remove('translate-y-full', 'sm:scale-95');\n            }, 10);\n        }\n\n        function closeModal() {\n            modal.classList.add('opacity-0');\n            document.getElementById('modalContent').classList.add('translate-y-full', 'sm:scale-95');\n            setTimeout(() => modal.classList.add('hidden'), 400);\n        }\n\n        function downloadVCard() {\n            const vCardData = `BEGIN:VCARD\\nVERSION:3.0\\nN:Luc\u00eda;Paseo;;;\\nFN:Plaza Comercial Paseo Luc\u00eda\\nORG:Paseo Luc\u00eda\\nTITLE:Administraci\u00f3n\\nTEL;TYPE=WORK,VOICE:+50200000000\\nURL:https:\/\/maps.app.goo.gl\/VSv3h6YaUw6ayAou5?g_st=ac\\nNOTE:Tu punto de encuentro ideal.\\nEND:VCARD`;\n            const blob = new Blob([vCardData], { type: 'text\/vcard' });\n            const url = window.URL.createObjectURL(blob);\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = 'Paseo_Lucia.vcf';\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n            window.URL.revokeObjectURL(url);\n            \n            const btnSpan = document.querySelector('button[onclick=\"downloadVCard()\"] span');\n            const originalText = btnSpan.innerText;\n            btnSpan.innerText = \"\u00a1Guardado!\";\n            btnSpan.classList.add('text-brand-main');\n            setTimeout(() => {\n                btnSpan.innerText = originalText;\n                btnSpan.classList.remove('text-brand-main');\n            }, 2000);\n        }\n\n        \/\/ ==========================================\n        \/\/ GALER\u00cdA DE MARCAS Y BUSCADOR\n        \/\/ ==========================================\n        \n        \/\/ Puedes cambiar la URL 'link' de cada marca hacia el destino correcto\n        const initialBrandsData = [\n            { name: \"Paseo Lucia\", img: \"https:\/\/paseolucia.eipipro.com\/wp-content\/uploads\/2026\/07\/FB_IMG_1783053309096-4.png\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Burger King\", img: \"https:\/\/images.unsplash.com\/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Caf\u00e9 Luc\u00eda\", img: \"https:\/\/images.unsplash.com\/photo-1519222970733-f546218fa6d7?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Zapater\u00eda Plus\", img: \"https:\/\/images.unsplash.com\/photo-1567401893414-76b7b1e5a7a5?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Helados Fresh\", img: \"https:\/\/images.unsplash.com\/photo-1572584642822-861c8a14b036?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"\u00d3ptica Visi\u00f3n\", img: \"https:\/\/images.unsplash.com\/photo-1581349485608-9469926a8e5e?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Joyer\u00eda Fina\", img: \"https:\/\/images.unsplash.com\/photo-1601924994987-69e26d50dc26?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Tech Store\", img: \"https:\/\/images.unsplash.com\/photo-1505330622279-bf7d7fc918f4?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Boutique VIP\", img: \"https:\/\/images.unsplash.com\/photo-1534452203293-494d7ddbf7e0?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Cosm\u00e9ticos\", img: \"https:\/\/images.unsplash.com\/photo-1528698827591-e19ccd7bc23d?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Librer\u00eda\", img: \"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" },\n            { name: \"Deportes\", img: \"https:\/\/images.unsplash.com\/photo-1472851294608-062f824d29cc?auto=format&fit=crop&w=400&q=80\", link: \"https:\/\/app.eipipro.com\" }\n        ];\n\n        let shuffledBrands = []; \/\/ Guardar\u00e1 el orden aleatorio inicial\n\n        function initGallery() {\n            \/\/ Mezclamos aleatoriamente al cargar\n            shuffledBrands = [...initialBrandsData];\n            for (let i = shuffledBrands.length - 1; i > 0; i--) {\n                const j = Math.floor(Math.random() * (i + 1));\n                [shuffledBrands[i], shuffledBrands[j]] = [shuffledBrands[j], shuffledBrands[i]];\n            }\n            renderGallery(shuffledBrands);\n        }\n\n        \/\/ Funci\u00f3n que dibuja el HTML de las marcas seg\u00fan la lista que reciba\n        function renderGallery(brandsToRender) {\n            const container = document.getElementById('brandsContainer');\n            \n            if (brandsToRender.length === 0) {\n                container.innerHTML = `<div class=\"col-span-full py-12 text-center text-gray-500 text-lg font-medium\">No se encontraron marcas con ese nombre.<\/div>`;\n                return;\n            }\n\n            container.innerHTML = brandsToRender.map(brand => `\n                <a href=\"${brand.link}\" target=\"_blank\" class=\"block aspect-square w-full bg-white overflow-hidden relative group lg:rounded-xl\">\n                    <img decoding=\"async\" src=\"${brand.img}\" alt=\"${brand.name}\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\n                    <!-- Overlay de informaci\u00f3n al pasar el mouse o tocar -->\n                    <div class=\"absolute inset-0 bg-black\/50 opacity-0 active:opacity-100 lg:group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center text-white p-2 text-center\">\n                        <span class=\"font-bold text-[13px] sm:text-[15px] tracking-wide\">${brand.name}<\/span>\n                        <i class=\"fa-solid fa-link mt-1.5 text-white\/70 text-lg\"><\/i>\n                    <\/div>\n                <\/a>\n            `).join('');\n        }\n\n        \/\/ Evento de b\u00fasqueda en tiempo real\n        document.getElementById('brandSearch').addEventListener('input', (e) => {\n            const searchTerm = e.target.value.toLowerCase().trim();\n            \n            if (searchTerm === '') {\n                renderGallery(shuffledBrands); \/\/ Si est\u00e1 vac\u00edo, mostrar todas en el orden aleatorio\n            } else {\n                \/\/ Filtrar las marcas cuyo nombre coincida con lo escrito\n                const filteredBrands = shuffledBrands.filter(brand => \n                    brand.name.toLowerCase().includes(searchTerm)\n                );\n                renderGallery(filteredBrands);\n            }\n        });\n\n        \/\/ Ejecutar funciones al cargar\n        window.onload = () => {\n            initGallery();\n        };\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Plaza Comercial Paseo Luc\u00eda PL Paseo Luc\u00eda Plaza Comercial Informaci\u00f3nInformaci\u00f3n Instalar Paseo Luc\u00eda CENTRO COMERCIAL HUEHUETENANGO. Administraci\u00f3n Como llegar Guardar Informaci\u00f3n General Lunes a Viernes 10:00 &#8211; 20:00 S\u00e1bados 10:00 &#8211; 21:00 Domingos 10:00 &#8211; 19:00 Parqueo Wi-Fi Seguridad Accesibilidad Compartir App Escanea este c\u00f3digo para acceder a Paseo Luc\u00eda r\u00e1pidamente. paseolucia.eipipro.com Oferta del Mes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":10,"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/paseolucia.eipipro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}