Agave Style - Ubicaciones<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n html, body {\r\n height: 100%;\r\n overflow-x: hidden;\r\n }\r\n \r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: #f8f9fa;\r\n min-height: 100vh;\r\n }\r\n \r\n .header {\r\n text-align: center;\r\n background: linear-gradient(135deg, #518E92 0%, #FFC304 100%);\r\n color: white;\r\n padding: 25px 20px;\r\n border-radius: 0 0 15px 15px;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n position: relative;\r\n z-index: 10;\r\n }\r\n \r\n .header h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 10px;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n \r\n .header p {\r\n font-size: 1.1rem;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n opacity: 0.9;\r\n }\r\n \r\n .main-content {\r\n padding: 30px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n .container {\r\n display: flex;\r\n gap: 30px;\r\n margin-bottom: 40px;\r\n height: 70vh;\r\n min-height: 600px;\r\n }\r\n \r\n .map-container {\r\n flex: 2;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 8px 30px rgba(0,0,0,0.12);\r\n position: relative;\r\n background: white;\r\n }\r\n \r\n #map {\r\n width: 100%;\r\n height: 100%;\r\n min-height: 400px;\r\n }\r\n \r\n \/* Estilos para Leaflet *\/\r\n .leaflet-container {\r\n background: #e6e6e6;\r\n cursor: grab;\r\n }\r\n \r\n .leaflet-container:active {\r\n cursor: grabbing;\r\n }\r\n \r\n .leaflet-popup-close-button {\r\n width: 30px !important;\r\n height: 30px !important;\r\n font-size: 24px !important;\r\n line-height: 30px !important;\r\n color: #ff6b6b !important;\r\n z-index: 1001 !important;\r\n }\r\n \r\n .leaflet-popup-content-wrapper {\r\n border-radius: 12px !important;\r\n padding: 0 !important;\r\n overflow: hidden !important;\r\n }\r\n \r\n .leaflet-popup-content {\r\n margin: 0 !important;\r\n padding: 15px !important;\r\n min-width: 240px !important;\r\n }\r\n \r\n .locations-container {\r\n flex: 1;\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n overflow-y: auto;\r\n box-shadow: 0 8px 30px rgba(0,0,0,0.12);\r\n min-width: 380px;\r\n border: 1px solid #eaeaea;\r\n }\r\n \r\n .locations-container::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .locations-container::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 4px;\r\n }\r\n \r\n .locations-container::-webkit-scrollbar-thumb {\r\n background: #518E92;\r\n border-radius: 4px;\r\n }\r\n \r\n .locations-container::-webkit-scrollbar-thumb:hover {\r\n background: #3a7a7e;\r\n }\r\n \r\n .filters {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 25px;\r\n padding: 15px;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n border-radius: 12px;\r\n border: 1px solid #dee2e6;\r\n }\r\n \r\n .filter-btn {\r\n flex: 1;\r\n padding: 12px;\r\n border: 2px solid #ced4da;\r\n background: white;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-weight: 500;\r\n transition: all 0.3s;\r\n font-size: 0.95rem;\r\n }\r\n \r\n .filter-btn.active {\r\n background: linear-gradient(135deg, #518E92 0%, #3a7a7e 100%);\r\n color: white;\r\n border-color: #518E92;\r\n box-shadow: 0 4px 12px rgba(81, 142, 146, 0.3);\r\n }\r\n \r\n .filter-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n \r\n .location-card {\r\n background: white;\r\n border: 1px solid #eaeaea;\r\n border-radius: 12px;\r\n padding: 18px;\r\n margin-bottom: 12px;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 18px;\r\n }\r\n \r\n .location-card:hover {\r\n transform: translateX(5px);\r\n border-color: #FFC304;\r\n box-shadow: 0 6px 20px rgba(255,195,4,0.15);\r\n }\r\n \r\n .location-card.active {\r\n background: linear-gradient(135deg, #f0f7f8 0%, #e8f4f5 100%);\r\n border-color: #518E92;\r\n box-shadow: 0 6px 20px rgba(81, 142, 146, 0.2);\r\n }\r\n \r\n \/* Estilo para ubicaciones principales de Agave Style *\/\r\n .location-card.principal {\r\n background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);\r\n border: 2px solid #FFC304;\r\n box-shadow: 0 6px 20px rgba(255,195,4,0.25);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .location-card.principal::before {\r\n content: '\u2605 PRINCIPAL';\r\n position: absolute;\r\n top: 8px;\r\n right: -30px;\r\n background: linear-gradient(90deg, #FFC304, #F17F00);\r\n color: white;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n padding: 3px 35px;\r\n transform: rotate(45deg);\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n \r\n \/* Estilo especial para Cervecer\u00eda Naipe *\/\r\n .location-card.naipe {\r\n background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);\r\n border: 2px solid #4169E1;\r\n box-shadow: 0 6px 20px rgba(65, 105, 225, 0.25);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .location-card.naipe::before {\r\n content: '\ud83c\udf7a NAIPE';\r\n position: absolute;\r\n top: 8px;\r\n right: -30px;\r\n background: linear-gradient(90deg, #4169E1, #1E90FF);\r\n color: white;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n padding: 3px 35px;\r\n transform: rotate(45deg);\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n \r\n .location-logo {\r\n width: 55px;\r\n height: 55px;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n border: 2px solid #eaeaea;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: white;\r\n flex-shrink: 0;\r\n }\r\n \r\n .location-card.principal .location-logo {\r\n border-color: #FFC304;\r\n background: #fff8e1;\r\n }\r\n \r\n .location-card.naipe .location-logo {\r\n border-color: #4169E1;\r\n background: #e6f3ff;\r\n }\r\n \r\n .location-logo img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n padding: 6px;\r\n }\r\n \r\n .location-info {\r\n flex: 1;\r\n }\r\n \r\n .location-name {\r\n font-weight: 600;\r\n color: #518E92;\r\n margin-bottom: 6px;\r\n font-size: 1rem;\r\n }\r\n \r\n .location-card.principal .location-name {\r\n color: #F17F00;\r\n }\r\n \r\n .location-card.naipe .location-name {\r\n color: #4169E1;\r\n }\r\n \r\n .location-address {\r\n font-size: 0.82rem;\r\n color: #666;\r\n margin-bottom: 10px;\r\n line-height: 1.4;\r\n }\r\n \r\n .location-card.principal .location-address {\r\n color: #333;\r\n font-weight: 500;\r\n }\r\n \r\n .location-card.naipe .location-address {\r\n color: #333;\r\n font-weight: 500;\r\n }\r\n \r\n .view-map-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n color: #F17F00;\r\n text-decoration: none;\r\n font-size: 0.78rem;\r\n font-weight: 500;\r\n background: rgba(241, 127, 0, 0.1);\r\n padding: 5px 12px;\r\n border-radius: 15px;\r\n border: 1px solid rgba(241, 127, 0, 0.2);\r\n transition: all 0.3s;\r\n }\r\n \r\n .location-card.principal .view-map-btn {\r\n background: linear-gradient(90deg, #F17F00, #FFC304);\r\n color: white;\r\n border-color: #F17F00;\r\n font-weight: 600;\r\n }\r\n \r\n .location-card.naipe .view-map-btn {\r\n background: linear-gradient(90deg, #4169E1, #1E90FF);\r\n color: white;\r\n border-color: #4169E1;\r\n font-weight: 600;\r\n }\r\n \r\n .view-map-btn:hover {\r\n background: #F17F00;\r\n color: white;\r\n text-decoration: none;\r\n border-color: #F17F00;\r\n transform: translateX(3px);\r\n }\r\n \r\n .location-card.naipe .view-map-btn:hover {\r\n background: #1E90FF;\r\n border-color: #1E90FF;\r\n }\r\n \r\n .category-title {\r\n color: #333;\r\n margin: 25px 0 15px;\r\n padding-bottom: 12px;\r\n border-bottom: 3px solid #FFC304;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 1.2rem;\r\n }\r\n \r\n .map-controls {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 1000;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n \r\n .map-control-btn {\r\n width: 40px;\r\n height: 40px;\r\n background: white;\r\n border: none;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n font-size: 1.3rem;\r\n color: #518E92;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .map-control-btn:hover {\r\n background: #518E92;\r\n color: white;\r\n transform: scale(1.05);\r\n }\r\n \r\n .badge {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 20px;\r\n background: white;\r\n color: #518E92;\r\n padding: 10px 18px;\r\n border-radius: 25px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n border: 2px solid #FFC304;\r\n z-index: 1000;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .badge::before {\r\n content: '\ud83d\udccd';\r\n font-size: 1.1rem;\r\n }\r\n \r\n .footer {\r\n text-align: center;\r\n padding: 25px;\r\n margin-top: 40px;\r\n background: linear-gradient(135deg, #343a40 0%, #212529 100%);\r\n color: white;\r\n border-radius: 15px 15px 0 0;\r\n }\r\n \r\n .footer p {\r\n margin-bottom: 10px;\r\n opacity: 0.8;\r\n }\r\n \r\n .footer a {\r\n color: #FFC304;\r\n text-decoration: none;\r\n }\r\n \r\n .footer a:hover {\r\n text-decoration: underline;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .container {\r\n height: 65vh;\r\n min-height: 550px;\r\n }\r\n \r\n .locations-container {\r\n min-width: 350px;\r\n }\r\n }\r\n \r\n @media (max-width: 992px) {\r\n .container {\r\n flex-direction: column;\r\n height: auto;\r\n min-height: auto;\r\n gap: 20px;\r\n }\r\n \r\n .map-container {\r\n height: 50vh;\r\n min-height: 400px;\r\n }\r\n \r\n .locations-container {\r\n height: 50vh;\r\n min-height: 400px;\r\n min-width: unset;\r\n }\r\n \r\n .header h1 {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .header p {\r\n font-size: 1rem;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .main-content {\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n gap: 15px;\r\n }\r\n \r\n .header {\r\n padding: 20px 15px;\r\n }\r\n \r\n .filters {\r\n padding: 12px;\r\n }\r\n \r\n .filter-btn {\r\n padding: 10px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .location-card {\r\n padding: 15px;\r\n gap: 15px;\r\n }\r\n \r\n .location-card.principal::before,\r\n .location-card.naipe::before {\r\n font-size: 0.6rem;\r\n padding: 2px 30px;\r\n right: -35px;\r\n }\r\n \r\n .location-logo {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n .location-name {\r\n font-size: 0.95rem;\r\n }\r\n \r\n .location-address {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .main-content {\r\n padding: 15px;\r\n }\r\n \r\n .header {\r\n padding: 15px 10px;\r\n }\r\n \r\n .header h1 {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .header p {\r\n font-size: 0.9rem;\r\n }\r\n \r\n .filters {\r\n flex-direction: column;\r\n padding: 10px;\r\n }\r\n \r\n .filter-btn {\r\n width: 100%;\r\n }\r\n \r\n .location-card {\r\n padding: 12px;\r\n gap: 12px;\r\n }\r\n \r\n .location-card.principal::before,\r\n .location-card.naipe::before {\r\n font-size: 0.55rem;\r\n padding: 2px 25px;\r\n right: -40px;\r\n top: 6px;\r\n }\r\n \r\n .location-logo {\r\n width: 45px;\r\n height: 45px;\r\n }\r\n \r\n .map-control-btn {\r\n width: 35px;\r\n height: 35px;\r\n font-size: 1.1rem;\r\n }\r\n \r\n .badge {\r\n padding: 8px 15px;\r\n font-size: 0.8rem;\r\n bottom: 15px;\r\n right: 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"main-content\">\r\n <div class=\"container\">\r\n <div class=\"map-container\">\r\n <div id=\"map\"><\/div>\r\n <div class=\"map-controls\">\r\n <button class=\"map-control-btn\" id=\"zoom-in\">+<\/button>\r\n <button class=\"map-control-btn\" id=\"zoom-out\">-<\/button>\r\n <\/div>\r\n <div class=\"badge\">Ubicaciones Activas<\/div>\r\n <\/div>\r\n \r\n <div class=\"locations-container\">\r\n <h2 style=\"color: #518E92; margin-bottom: 25px; font-size: 1.4rem;\">\r\n <i class=\"fas fa-map-marker-alt\"><\/i> Puntos de Venta\r\n <\/h2>\r\n \r\n <div class=\"filters\">\r\n <button class=\"filter-btn active\" data-category=\"all\">Todas<\/button>\r\n <button class=\"filter-btn\" data-category=\"cerveza\">Cerveza<\/button>\r\n <button class=\"filter-btn\" data-category=\"mezcal\">Mezcal<\/button>\r\n <button class=\"filter-btn\" data-category=\"principal\">Principal<\/button>\r\n <\/div>\r\n \r\n <div id=\"locations-list\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\r\n <script>\r\n \/\/ Datos de ubicaciones - AHORA CON CERVECER\u00cdA NAPE EN COLOR DIFERENTE\r\n const locations = [\r\n {\r\n name: \"Agave Style - Punto Principal San Juan de Ocot\u00e1n\",\r\n address: \"Prolongaci\u00f3n Avenida Vallarta 7555, int 1, San Juan de Ocot\u00e1n\",\r\n city: \"Zapopan, JA 45019\",\r\n coords: [20.707380514348344, -103.46558433502595],\r\n category: \"principal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/11\/Grupo-74@2x.png\",\r\n isPrincipal: true,\r\n type: \"agave\"\r\n },\r\n {\r\n name: \"Cervecer\u00eda Naipe\",\r\n address: \"Carr. Guadalajara - Tepic 7355-int 313\",\r\n city: \"Zapopan, Jalisco\",\r\n coords: [20.699398446576286, -103.45832735369218],\r\n category: \"principal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/11\/Grupo-74@2x.png\",\r\n isPrincipal: true,\r\n isNaipe: true,\r\n type: \"naipe\"\r\n },\r\n {\r\n name: \"Real Irish Pub\",\r\n address: \"LIBERTAD 1903, COL AMERICANA\",\r\n city: \"Guadalajara\",\r\n coords: [20.6769, -103.3632],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Malta 33\",\r\n address: \"CALLE HOSPITAL 1557\",\r\n city: \"Guadalajara\",\r\n coords: [20.6785, -103.3518],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Drunken Tap Paseos del Sol\",\r\n address: \"FELIPE ZETTER 3407\",\r\n city: \"Guadalajara\",\r\n coords: [20.6667, -103.3921],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Zorra Zapopan\",\r\n address: \"C. 5 DE MAYO 272 ZAPOPAN JAL\",\r\n city: \"Zapopan\",\r\n coords: [20.7216, -103.3885],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Zorra Monraz\",\r\n address: \"GOLFO DE CORTES 4140 MONRAZ\",\r\n city: \"Guadalajara\",\r\n coords: [20.6823, -103.3802],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"La Carmela SLRC\",\r\n address: \"San Luis Rio Colorado\",\r\n city: \"San Luis R\u00edo Colorado\",\r\n coords: [32.4767, -114.7625],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Hale Beer\",\r\n address: \"AV TEPEYAC 4067\",\r\n city: \"Guadalajara\",\r\n coords: [20.6867, -103.3798],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Zorra Av Santa Margarita\",\r\n address: \"PLAZA D LUCA Av. SANTA MARGARITA, 4199\",\r\n city: \"Guadalajara\",\r\n coords: [20.6901, -103.3942],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"TRIANGULAR CERVECERIA\",\r\n address: \"JOAQUIN ANGULO 1677 LADRON DE GUEVARA C.P.44200\",\r\n city: \"Guadalajara\",\r\n coords: [20.6825, -103.3714],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Anima Galeria\",\r\n address: \"C. MIGUEL BLANCO 1405, COL AMERICANA 44160\",\r\n city: \"Guadalajara\",\r\n coords: [20.6789, -103.3698],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"DOGOS NAINARI\",\r\n address: \"Av PIOTR Ilich Tchaikovski 578, Col. Arcos de Guadalupe\",\r\n city: \"Guadalajara\",\r\n coords: [20.6954, -103.3832],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"CAGUAMERIA DE BARRIO\",\r\n address: \"AV. RIO NILO 7377 LOCAL 8 A LOMAS DE LA SOLEDAD 45403\",\r\n city: \"Tonal\u00e1\",\r\n coords: [20.6098, -103.2345],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"BOCADO DE PERRO\",\r\n address: \"CALLE FRANCISCO I. MADERO 792, COL AMERICANA\",\r\n city: \"Guadalajara\",\r\n coords: [20.6764, -103.3612],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Rinc\u00f3n del A\u00f1e\u00f1e\",\r\n address: \"SIERRA NEVADA 971 INDEPENDENCIA ORIENTE 44340\",\r\n city: \"Guadalajara\",\r\n coords: [20.7045, -103.3108],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Usagui\",\r\n address: \"C. MANUEL LOPEZ COTILLA 2244, ARCOS VALLARTA, C.P.44130\",\r\n city: \"Guadalajara\",\r\n coords: [20.6732, -103.3845],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Usagui\",\r\n address: \"AVENIDA MANUEL ACU\u00d1A1661, LADRON DE GUEVARA, C.P. 44600\",\r\n city: \"Guadalajara\",\r\n coords: [20.6821, -103.3728],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Mosto Pizzeria\",\r\n address: \"C.JOSE GUADALUPE ZUNO HERNANDEZ 1810 COL AMERICANA, C.P.44170\",\r\n city: \"Guadalajara\",\r\n coords: [20.6782, -103.3715],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Coyote Rojo\",\r\n address: \"C. PRISILIANO SANCHEZ 865, COL AMERICANA GDL. C.P.44160\",\r\n city: \"Guadalajara\",\r\n coords: [20.6768, -103.3628],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Dirty Jack Tlaquepaque\",\r\n address: \"BLV GRAL. MARCELINO GARCIA BARRAGAN 1909, SAN PEDRO TLAQ. C.P.45500\",\r\n city: \"Tlaquepaque\",\r\n coords: [20.6402, -103.3105],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Italia Mia\",\r\n address: \"C. PEDRO MORENO 1595, COL AMERICANA LA FAYETTE, C.P. 44600 GDL.\",\r\n city: \"Guadalajara\",\r\n coords: [20.6775, -103.3658],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"RIFF PUB TLAQUEPAQUE\",\r\n address: \"C. CONSTITUCION 11, CENTRO, SAN PEDRO TLAQ, C.P.45500\",\r\n city: \"Tlaquepaque\",\r\n coords: [20.6408, -103.3052],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Dirty Jack Chapultepec\",\r\n address: \"C. MANUEL LOPEZ COTILLA 1449 -A COL. AMERICANA, C.P.44160 GDL\",\r\n city: \"Guadalajara\",\r\n coords: [20.6725, -103.3712],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"LA CASA DEL ROCK\",\r\n address: \"C. DUQUE DE RIVAS 5, ARCOS VALLARTA, C.P.44650 GDL, JAL\",\r\n city: \"Guadalajara\",\r\n coords: [20.6748, -103.3852],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Bar Aut\u00f3ctona\",\r\n address: \"C. JOSE MARIA MORELOS 1141, COL AMERICANA 44200, GUADALAJARA\",\r\n city: \"Guadalajara\",\r\n coords: [20.6781, -103.3598],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"GEORGE NEIGHBORHOOD\",\r\n address: \"AV. NI\u00d1O OBRERO 654, CHAPALITA SUR, 44050 ZAPOPAN, JAL\",\r\n city: \"Zapopan\",\r\n coords: [20.6985, -103.4058],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Porter Bar\",\r\n address: \"C. HOSE GUADALUPE ZUNO HERNANDEZ 2027COL. AMERICANA 44160, GDL.\",\r\n city: \"Guadalajara\",\r\n coords: [20.6785, -103.3725],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"THE BEER 12.20\",\r\n address: \"C. MANUEL LOPEZ COTILLA 1220 COL. AMERICANA 44160 GDL. JAL.\",\r\n city: \"Guadalajara\",\r\n coords: [20.6718, -103.3698],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Chiles & Beer\",\r\n address: \"C. MORELOS 225, CENTRO, 45500, SAN PEDRO TLAQ. JAL.\",\r\n city: \"Tlaquepaque\",\r\n coords: [20.6412, -103.3058],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Huesos 206\",\r\n address: \"ALFREDO R. PLASCENCIA 116, LADRON DE GUEVARA, 44600\",\r\n city: \"Guadalajara\",\r\n coords: [20.6832, -103.3735],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"VITO CORLEONE\",\r\n address: \"AV. RIO NILO 2966, JARDINES DE LA PAZ, 44860 GDL, JAL.\",\r\n city: \"Guadalajara\",\r\n coords: [20.6585, -103.3428],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Zingaro\",\r\n address: \"C. MIGUEL LERDO DE TEJADA 2308, COL. AMERICANA\",\r\n city: \"Guadalajara\",\r\n coords: [20.6792, -103.3745],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"PLUMA CAF\u00c9\",\r\n address: \"AV SEBASTIAN BACH4753 A PRADOS GUADALUPE C.P. 45030\",\r\n city: \"Zapopan\",\r\n coords: [20.7058, -103.3925],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Xulada Cervecer\u00eda\",\r\n address: \"AV. ENRIQUE DIAZ DELEON NTE 32 COL. AMERICANA ZONA CENTRO, C.P. 44100\",\r\n city: \"Guadalajara\",\r\n coords: [20.6798, -103.3585],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"BEER PARADE\",\r\n address: \"VOLCAN CITLALTEPETL 2219, COLLI URBANO. 45070 ZAPOPAN, JAL\",\r\n city: \"Zapopan\",\r\n coords: [20.6982, -103.4258],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"SOFY BOOM CHAPULTEPEC\",\r\n address: \"Av. Chapultepec Sur 451, Col. Americana c.p.44160, Guadalajara\",\r\n city: \"Guadalajara\",\r\n coords: [20.6728, -103.3702],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"SOFY BOOM CHAPALITA\",\r\n address: \"AV. GUADALEPE 1261, CHAPALITA ORIENTE 45040 ZAPOPAN, JAL\",\r\n city: \"Zapopan\",\r\n coords: [20.6985, -103.4085],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"SOMBRA LARGA\",\r\n address: \"C. PEDRO MORENO 1545- COL. AMERICANA, LAFAYETTE C.P. 44160 GDL, JAL.\",\r\n city: \"Guadalajara\",\r\n coords: [20.6772, -103.3652],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Casa Mica\",\r\n address: \"C. VISTA AL ATARDECER 350-LOCAL 1 MIRADOR DEL TESORO C.P. 45608 SAN PEDRO\",\r\n city: \"Tlaquepaque\",\r\n coords: [20.6458, -103.3152],\r\n category: \"cerveza\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Santo Coyote\",\r\n address: \"MIGUEL LERDO DE TEJADA 2379\",\r\n city: \"Guadalajara\",\r\n coords: [20.6795, -103.3752],\r\n category: \"mezcal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Casa Mudra\",\r\n address: \"C. FRANCISCO JAVIER GAMBOA 110 COL AMERICANA, LAFAYETTE, 44158\",\r\n city: \"Guadalajara\",\r\n coords: [20.6778, -103.3668],\r\n category: \"mezcal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Venganza Venganza\",\r\n address: \"CALLE EMERSON 125 COL AMERICANA GDL\",\r\n city: \"Guadalajara\",\r\n coords: [20.6782, -103.3675],\r\n category: \"mezcal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"BOTANICOS\",\r\n address: \"AV DE LAS AMERICAS 1254 INT 4 COUNTRY CLUB\",\r\n city: \"Guadalajara\",\r\n coords: [20.6858, -103.3952],\r\n category: \"mezcal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Coraz\u00f3n Artesano Tijuana\",\r\n address: \"Tijuana\",\r\n city: \"Tijuana\",\r\n coords: [32.5149, -117.0382],\r\n category: \"mezcal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n },\r\n {\r\n name: \"Coraz\u00f3n Artesano Mexicali\",\r\n address: \"Mexicali\",\r\n city: \"Mexicali\",\r\n coords: [32.6635, -115.4678],\r\n category: \"mezcal\",\r\n logo: \"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/12\/Logocuadrado.webp\"\r\n }\r\n ];\r\n\r\n \/\/ Variables globales\r\n let map;\r\n let markers = [];\r\n let activeFilter = 'all';\r\n\r\n \/\/ Inicializar el mapa - VERSI\u00d3N SIMPLIFICADA PARA ANDROID\r\n function initMap() {\r\n console.log(\"Inicializando mapa simplificado para Android...\");\r\n \r\n \/\/ SOLUCI\u00d3N: Esperar a que la p\u00e1gina est\u00e9 completamente cargada\r\n window.onload = function() {\r\n \/\/ Crear mapa con configuraci\u00f3n m\u00ednima\r\n map = L.map('map', {\r\n center: [20.6766, -103.3475],\r\n zoom: 12,\r\n scrollWheelZoom: false,\r\n dragging: true,\r\n zoomControl: false,\r\n doubleClickZoom: true\r\n });\r\n \r\n \/\/ Agregar capa del mapa\r\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n attribution: '\u00a9 OpenStreetMap contributors'\r\n }).addTo(map);\r\n \r\n \/\/ Crear marcadores despu\u00e9s de un peque\u00f1o delay\r\n setTimeout(createMarkers, 500);\r\n \r\n console.log(\"Mapa Leaflet inicializado\");\r\n };\r\n }\r\n\r\n \/\/ Crear marcadores en el mapa\r\n function createMarkers() {\r\n if (!map) {\r\n console.error(\"Mapa no est\u00e1 inicializado\");\r\n return;\r\n }\r\n \r\n \/\/ Limpiar marcadores anteriores\r\n markers.forEach(marker => map.removeLayer(marker));\r\n markers = [];\r\n \r\n \/\/ Filtrar ubicaciones seg\u00fan el filtro activo\r\n const filteredLocations = locations.filter(location => {\r\n return activeFilter === 'all' || location.category === activeFilter;\r\n });\r\n \r\n \/\/ Crear marcadores para cada ubicaci\u00f3n\r\n filteredLocations.forEach(location => {\r\n \/\/ Crear icono personalizado\r\n let iconHtml;\r\n \r\n if (location.isNaipe) {\r\n iconHtml = `\r\n <div style=\"\r\n background: linear-gradient(45deg, #4169E1, #1E90FF);\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n border: 4px solid white;\r\n box-shadow: 0 0 0 3px #4169E1, 0 4px 10px rgba(0,0,0,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \">\r\n <div style=\"\r\n width: 12px;\r\n height: 12px;\r\n background: white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n font-size: 8px;\r\n color: #4169E1;\r\n \">\ud83c\udf7a<\/div>\r\n <\/div>\r\n `;\r\n } else if (location.isPrincipal) {\r\n iconHtml = `\r\n <div style=\"\r\n background: linear-gradient(45deg, #FFC304, #F17F00);\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n border: 4px solid white;\r\n box-shadow: 0 0 0 3px #FFC304, 0 4px 10px rgba(0,0,0,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \">\r\n <div style=\"\r\n width: 12px;\r\n height: 12px;\r\n background: white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n font-size: 8px;\r\n color: #F17F00;\r\n \">\u2605<\/div>\r\n <\/div>\r\n `;\r\n } else if (location.category === 'mezcal') {\r\n iconHtml = `\r\n <div style=\"\r\n background: #F17F00;\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n box-shadow: 0 0 0 2px #FFC304, 0 3px 6px rgba(0,0,0,0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \">\r\n <div style=\"\r\n width: 6px;\r\n height: 6px;\r\n background: white;\r\n border-radius: 50%;\r\n \"><\/div>\r\n <\/div>\r\n `;\r\n } else {\r\n iconHtml = `\r\n <div style=\"\r\n background: #518E92;\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n box-shadow: 0 0 0 2px #518E92, 0 3px 6px rgba(0,0,0,0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \">\r\n <div style=\"\r\n width: 6px;\r\n height: 6px;\r\n background: white;\r\n border-radius: 50%;\r\n \"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n \r\n const customIcon = L.divIcon({\r\n html: iconHtml,\r\n iconSize: (location.isPrincipal || location.isNaipe) ? [36, 36] : [28, 28],\r\n className: 'custom-marker'\r\n });\r\n \r\n \/\/ Crear marcador\r\n const marker = L.marker(location.coords, { \r\n icon: customIcon,\r\n title: location.name\r\n })\r\n .addTo(map)\r\n .bindPopup(`\r\n <div style=\"text-align: center; padding: 12px; min-width: 240px;\">\r\n <div style=\"\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 10px;\r\n margin: 0 auto 12px;\r\n overflow: hidden;\r\n border: 2px solid ${location.isNaipe ? '#4169E1' : (location.isPrincipal ? '#FFC304' : '#518E92')};\r\n padding: 6px;\r\n background: white;\r\n \">\r\n <img decoding=\"async\" src=\"${location.logo}\" \r\n alt=\"${location.name}\" \r\n style=\"width: 100%; height: 100%; object-fit: contain;\"\r\n onerror=\"this.src='https:\/\/via.placeholder.com\/70x70\/${location.isNaipe ? '4169E1' : (location.isPrincipal ? 'FFC304' : '518E92')}\/ffffff?text=${location.name.charAt(0)}'\">\r\n <\/div>\r\n <h3 style=\"color: ${location.isNaipe ? '#4169E1' : (location.isPrincipal ? '#F17F00' : '#518E92')}; margin-bottom: 6px; font-size: 15px; ${(location.isPrincipal || location.isNaipe) ? 'font-weight: 700;' : ''}\">\r\n ${location.isNaipe ? '\ud83c\udf7a ' : (location.isPrincipal ? '\u2605 ' : '')}${location.name}\r\n <\/h3>\r\n <p style=\"color: #666; font-size: 12px; margin-bottom: 4px; line-height: 1.3;\">${location.address}<\/p>\r\n <p style=\"color: ${location.isNaipe ? '#4169E1' : '#F17F00'}; font-size: 12px; margin-bottom: 12px; font-weight: ${(location.isPrincipal || location.isNaipe) ? '600' : '500'};\">${location.city}<\/p>\r\n ${location.isPrincipal ? '<p style=\"color: #FFC304; font-size: 11px; margin-bottom: 10px; font-weight: 600; background: #FFF8E1; padding: 5px; border-radius: 5px; line-height: 1.3;\">\u2b50 PUNTO PRINCIPAL DE RECOLECCI\u00d3N<\/p>' : ''}\r\n ${location.isNaipe ? '<p style=\"color: #4169E1; font-size: 11px; margin-bottom: 10px; font-weight: 600; background: #E6F3FF; padding: 5px; border-radius: 5px; line-height: 1.3;\">\ud83c\udf7a CERVECER\u00cdA NAIPE - PUNTO DE VENTA<\/p>' : ''}\r\n <a href=\"https:\/\/maps.google.com\/?q=${encodeURIComponent(location.name + ' ' + location.city)}\" \r\n target=\"_blank\" \r\n style=\"\r\n background: linear-gradient(90deg, ${location.isNaipe ? '#4169E1' : '#F17F00'}, ${location.isNaipe ? '#1E90FF' : '#FFC304'});\r\n color: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n text-decoration: none;\r\n font-size: 12px;\r\n font-weight: 600;\r\n display: inline-block;\r\n \">\r\n Ver en Google Maps\r\n <\/a>\r\n <\/div>\r\n `, {\r\n maxWidth: 300,\r\n minWidth: 240,\r\n autoPan: true\r\n });\r\n \r\n markers.push(marker);\r\n \r\n \/\/ Evento para hacer clic en el marcador\r\n marker.on('click', function() {\r\n const index = locations.findIndex(loc => \r\n loc.name === location.name && loc.address === location.address);\r\n highlightLocation(index);\r\n });\r\n });\r\n \r\n \/\/ Ajustar el mapa para mostrar todos los marcadores\r\n if (filteredLocations.length > 0) {\r\n const group = new L.featureGroup(markers);\r\n map.fitBounds(group.getBounds().pad(0.1));\r\n }\r\n \r\n \/\/ SOLUCI\u00d3N CR\u00cdTICA PARA ANDROID: Forzar redimensionamiento\r\n setTimeout(function() {\r\n if (map) {\r\n map.invalidateSize();\r\n }\r\n }, 100);\r\n \r\n console.log(`Marcadores creados: ${markers.length}`);\r\n }\r\n\r\n \/\/ Crear lista de ubicaciones\r\n function createLocationsList() {\r\n const container = document.getElementById('locations-list');\r\n container.innerHTML = '';\r\n \r\n \/\/ Filtrar ubicaciones seg\u00fan el filtro activo\r\n const filteredLocations = locations.filter(location => {\r\n return activeFilter === 'all' || location.category === activeFilter;\r\n });\r\n \r\n \/\/ Separar por categor\u00edas (Naipe primero, luego Agave, luego cerveza, luego mezcal)\r\n const naipeLocations = filteredLocations.filter(loc => loc.isNaipe);\r\n const principalLocations = filteredLocations.filter(loc => loc.isPrincipal && !loc.isNaipe);\r\n const cervezaLocations = filteredLocations.filter(loc => loc.category === 'cerveza' && !loc.isPrincipal && !loc.isNaipe);\r\n const mezcalLocations = filteredLocations.filter(loc => loc.category === 'mezcal' && !loc.isPrincipal);\r\n \r\n \/\/ Mostrar Naipe primero\r\n if (naipeLocations.length > 0) {\r\n const categoryTitle = document.createElement('h3');\r\n categoryTitle.className = 'category-title';\r\n categoryTitle.innerHTML = '<i class=\"fas fa-beer\"><\/i> CERVECER\u00cdA NAIPE';\r\n container.appendChild(categoryTitle);\r\n \r\n naipeLocations.forEach((location, index) => {\r\n const originalIndex = locations.findIndex(loc => \r\n loc.name === location.name && loc.address === location.address);\r\n createLocationCard(location, originalIndex, container);\r\n });\r\n }\r\n \r\n \/\/ Luego puntos principales de Agave\r\n if (principalLocations.length > 0) {\r\n const categoryTitle = document.createElement('h3');\r\n categoryTitle.className = 'category-title';\r\n categoryTitle.innerHTML = '<i class=\"fas fa-star\"><\/i> PUNTOS PRINCIPALES AGAVE STYLE';\r\n container.appendChild(categoryTitle);\r\n \r\n principalLocations.forEach((location, index) => {\r\n const originalIndex = locations.findIndex(loc => \r\n loc.name === location.name && loc.address === location.address);\r\n createLocationCard(location, originalIndex, container);\r\n });\r\n }\r\n \r\n if ((activeFilter === 'all' || activeFilter === 'cerveza') && cervezaLocations.length > 0) {\r\n const categoryTitle = document.createElement('h3');\r\n categoryTitle.className = 'category-title';\r\n categoryTitle.innerHTML = '<i class=\"fas fa-beer\"><\/i> CERVEZA';\r\n container.appendChild(categoryTitle);\r\n \r\n cervezaLocations.forEach((location, index) => {\r\n const originalIndex = locations.findIndex(loc => \r\n loc.name === location.name && loc.address === location.address);\r\n createLocationCard(location, originalIndex, container);\r\n });\r\n }\r\n \r\n if ((activeFilter === 'all' || activeFilter === 'mezcal') && mezcalLocations.length > 0) {\r\n const categoryTitle = document.createElement('h3');\r\n categoryTitle.className = 'category-title';\r\n categoryTitle.innerHTML = '<i class=\"fas fa-cocktail\"><\/i> MEZCAL';\r\n container.appendChild(categoryTitle);\r\n \r\n mezcalLocations.forEach((location, index) => {\r\n const originalIndex = locations.findIndex(loc => \r\n loc.name === location.name && loc.address === location.address);\r\n createLocationCard(location, originalIndex, container);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Crear tarjeta de ubicaci\u00f3n individual\r\n function createLocationCard(location, index, container) {\r\n const card = document.createElement('div');\r\n card.className = 'location-card';\r\n if (location.isNaipe) {\r\n card.classList.add('naipe');\r\n } else if (location.isPrincipal) {\r\n card.classList.add('principal');\r\n }\r\n card.dataset.index = index;\r\n \r\n card.innerHTML = `\r\n <div class=\"location-logo\">\r\n <img decoding=\"async\" src=\"${location.logo}\" alt=\"${location.name}\" \r\n onerror=\"this.src='https:\/\/via.placeholder.com\/55x55\/${location.isNaipe ? '4169E1' : (location.isPrincipal ? 'FFC304' : '518E92')}\/ffffff?text=${location.name.charAt(0)}'\">\r\n <\/div>\r\n <div class=\"location-info\">\r\n <div class=\"location-name\">${location.isNaipe ? '\ud83c\udf7a ' : (location.isPrincipal ? '\u2605 ' : '')}${location.name}<\/div>\r\n <div class=\"location-address\">${location.address}<\/div>\r\n ${location.isPrincipal ? '<div style=\"font-size: 0.7rem; color: #F17F00; margin-bottom: 8px; font-weight: 600;\">\u2b50 Punto Principal de Recolecci\u00f3n<\/div>' : ''}\r\n ${location.isNaipe ? '<div style=\"font-size: 0.7rem; color: #4169E1; margin-bottom: 8px; font-weight: 600;\">\ud83c\udf7a Cervecer\u00eda Naipe - Punto de Venta<\/div>' : ''}\r\n <a href=\"https:\/\/maps.google.com\/?q=${encodeURIComponent(location.name + ' ' + location.city)}\" \r\n target=\"_blank\" class=\"view-map-btn\">\r\n Ver en Maps <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <\/div>\r\n `;\r\n \r\n card.addEventListener('click', () => {\r\n focusOnLocation(index);\r\n });\r\n \r\n container.appendChild(card);\r\n }\r\n\r\n \/\/ Resaltar ubicaci\u00f3n en la lista\r\n function highlightLocation(index) {\r\n document.querySelectorAll('.location-card').forEach(card => {\r\n card.classList.remove('active');\r\n });\r\n \r\n const selectedCard = document.querySelector(`.location-card[data-index=\"${index}\"]`);\r\n if (selectedCard) {\r\n selectedCard.classList.add('active');\r\n selectedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n }\r\n }\r\n\r\n \/\/ Centrar mapa en ubicaci\u00f3n espec\u00edfica\r\n function focusOnLocation(index) {\r\n const location = locations[index];\r\n if (!location || !map) return;\r\n \r\n highlightLocation(index);\r\n \r\n const zoomLevel = (location.isPrincipal || location.isNaipe) ? 15 : 14;\r\n map.flyTo(location.coords, zoomLevel, {\r\n duration: 1\r\n });\r\n \r\n const marker = markers.find(m => {\r\n const markerCoords = m.getLatLng();\r\n return markerCoords.lat === location.coords[0] && \r\n markerCoords.lng === location.coords[1];\r\n });\r\n \r\n if (marker) {\r\n setTimeout(() => {\r\n marker.openPopup();\r\n }, 1000);\r\n }\r\n }\r\n\r\n \/\/ Configurar filtros\r\n function setupFilters() {\r\n const filterButtons = document.querySelectorAll('.filter-btn');\r\n \r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n button.classList.add('active');\r\n \r\n activeFilter = button.dataset.category;\r\n \r\n createMarkers();\r\n createLocationsList();\r\n });\r\n });\r\n \r\n document.getElementById('zoom-in').addEventListener('click', () => {\r\n if (map) map.zoomIn();\r\n });\r\n \r\n document.getElementById('zoom-out').addEventListener('click', () => {\r\n if (map) map.zoomOut();\r\n });\r\n }\r\n\r\n \/\/ Inicializar aplicaci\u00f3n - VERSI\u00d3N SIMPLIFICADA\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log(\"DOM cargado\");\r\n \r\n \/\/ Crear lista y filtros primero\r\n createLocationsList();\r\n setupFilters();\r\n \r\n \/\/ Inicializar mapa con window.onload para Android\r\n initMap();\r\n \r\n \/\/ Enfocar en Cervecer\u00eda Naipe despu\u00e9s de que todo cargue\r\n setTimeout(() => {\r\n const naipeIndex = locations.findIndex(loc => loc.isNaipe);\r\n if (naipeIndex !== -1) {\r\n focusOnLocation(naipeIndex);\r\n } else {\r\n const principalIndex = locations.findIndex(loc => loc.isPrincipal);\r\n if (principalIndex !== -1) {\r\n focusOnLocation(principalIndex);\r\n }\r\n }\r\n }, 2000);\r\n \r\n \/\/ Manejar cambios de orientaci\u00f3n\r\n let resizeTimeout;\r\n window.addEventListener('resize', function() {\r\n clearTimeout(resizeTimeout);\r\n resizeTimeout = setTimeout(function() {\r\n if (map) {\r\n map.invalidateSize();\r\n }\r\n }, 250);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00bfD\u00f3nde nos encuentras? Agave Style – Ubicaciones + – Ubicaciones Activas Puntos de Venta Todas Cerveza Mezcal Principal<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3657","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Encuentranos - Agave Style<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/agavestyle.mx\/en\/encuentranos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Encuentranos - Agave Style\" \/>\n<meta property=\"og:description\" content=\"\u00bfD\u00f3nde nos encuentras? Agave Style – Ubicaciones + – Ubicaciones Activas Puntos de Venta Todas Cerveza Mezcal Principal\" \/>\n<meta property=\"og:url\" content=\"https:\/\/agavestyle.mx\/en\/encuentranos\/\" \/>\n<meta property=\"og:site_name\" content=\"Agave Style\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/styleagave\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-18T17:05:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/11\/Grupo-74@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"861\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/encuentranos\\\/\",\"url\":\"https:\\\/\\\/agavestyle.mx\\\/encuentranos\\\/\",\"name\":\"Encuentranos - Agave Style\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/#website\"},\"datePublished\":\"2025-12-04T17:30:17+00:00\",\"dateModified\":\"2026-03-18T17:05:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/encuentranos\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/agavestyle.mx\\\/encuentranos\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/encuentranos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/agavestyle.mx\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Encuentranos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/#website\",\"url\":\"https:\\\/\\\/agavestyle.mx\\\/\",\"name\":\"Agave Style\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/agavestyle.mx\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/#organization\",\"name\":\"Agave Style\",\"url\":\"https:\\\/\\\/agavestyle.mx\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/agavestyle.mx\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Grupo-74@2x.png\",\"contentUrl\":\"https:\\\/\\\/agavestyle.mx\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Grupo-74@2x.png\",\"width\":861,\"height\":540,\"caption\":\"Agave Style\"},\"image\":{\"@id\":\"https:\\\/\\\/agavestyle.mx\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/styleagave\",\"https:\\\/\\\/www.instagram.com\\\/agavestyle.mx\\\/?hl=es\"]}]}<\/script>\n","yoast_head_json":{"title":"Encuentranos - Agave Style","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/agavestyle.mx\/en\/encuentranos\/","og_locale":"en_US","og_type":"article","og_title":"Encuentranos - Agave Style","og_description":"\u00bfD\u00f3nde nos encuentras? Agave Style – Ubicaciones + – Ubicaciones Activas Puntos de Venta Todas Cerveza Mezcal Principal","og_url":"https:\/\/agavestyle.mx\/en\/encuentranos\/","og_site_name":"Agave Style","article_publisher":"https:\/\/www.facebook.com\/styleagave","article_modified_time":"2026-03-18T17:05:31+00:00","og_image":[{"width":861,"height":540,"url":"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/11\/Grupo-74@2x.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/agavestyle.mx\/encuentranos\/","url":"https:\/\/agavestyle.mx\/encuentranos\/","name":"Encuentranos - Agave Style","isPartOf":{"@id":"https:\/\/agavestyle.mx\/#website"},"datePublished":"2025-12-04T17:30:17+00:00","dateModified":"2026-03-18T17:05:31+00:00","breadcrumb":{"@id":"https:\/\/agavestyle.mx\/encuentranos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/agavestyle.mx\/encuentranos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/agavestyle.mx\/encuentranos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/agavestyle.mx\/"},{"@type":"ListItem","position":2,"name":"Encuentranos"}]},{"@type":"WebSite","@id":"https:\/\/agavestyle.mx\/#website","url":"https:\/\/agavestyle.mx\/","name":"Agave Style","description":"","publisher":{"@id":"https:\/\/agavestyle.mx\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/agavestyle.mx\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/agavestyle.mx\/#organization","name":"Agave Style","url":"https:\/\/agavestyle.mx\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/agavestyle.mx\/#\/schema\/logo\/image\/","url":"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/11\/Grupo-74@2x.png","contentUrl":"https:\/\/agavestyle.mx\/wp-content\/uploads\/2024\/11\/Grupo-74@2x.png","width":861,"height":540,"caption":"Agave Style"},"image":{"@id":"https:\/\/agavestyle.mx\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/styleagave","https:\/\/www.instagram.com\/agavestyle.mx\/?hl=es"]}]}},"_links":{"self":[{"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/pages\/3657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/comments?post=3657"}],"version-history":[{"count":145,"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/pages\/3657\/revisions"}],"predecessor-version":[{"id":5671,"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/pages\/3657\/revisions\/5671"}],"wp:attachment":[{"href":"https:\/\/agavestyle.mx\/en\/wp-json\/wp\/v2\/media?parent=3657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}