{"id":5820,"date":"2025-01-03T21:33:52","date_gmt":"2025-01-03T21:33:52","guid":{"rendered":"https:\/\/sporticamx.com\/?page_id=5820"},"modified":"2026-04-30T16:37:53","modified_gmt":"2026-04-30T21:37:53","slug":"inicio-club","status":"publish","type":"page","link":"https:\/\/sporticamx.com\/index.php\/inicio-club\/","title":{"rendered":"Inicio &#8211; club"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5820\" class=\"elementor elementor-5820\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fc2db0 elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"4fc2db0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e63e7c elementor-widget elementor-widget-html\" data-id=\"1e63e7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Sportica Exclusive Gym<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        :root {\r\n            \/* Colores actualizados a la escala de grises solicitada *\/\r\n            --white: #ffffff;\r\n            --black: #000000;\r\n            --gray-border: rgba(255, 255, 255, 0.1);\r\n            --gray-accent: #ADACB1; \/* El gris de tu paleta para sustituir al dorado *\/\r\n        }\r\n\r\n        a { text-decoration: none !important; }\r\n\r\n        body {\r\n            font-family: 'Montserrat', sans-serif;\r\n            background-color: #000;\r\n            margin: 0;\r\n            color: white;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        \/* --- NAVBAR PRINCIPAL --- *\/\r\n        #navbar-prestige {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 90px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 0 50px;\r\n            z-index: 1000;\r\n            background: rgba(0, 0, 0, 0.98);\r\n            border-bottom: 1px solid var(--gray-border);\r\n        }\r\n\r\n        .nav-left-group { display: flex; align-items: center; gap: 40px; height: 100%; }\r\n\r\n        .main-logo {\r\n            height: 100px !important;\r\n            width: auto;\r\n            display: block;\r\n            object-fit: contain;\r\n        }\r\n\r\n        \/* Se mantiene el gap de 60px original *\/\r\n        .nav-links { display: flex; gap: 60px; list-style: none; margin: 0 30px; padding: 0; height: 100%; align-items: center; }\r\n\r\n        .nav-item-container { \r\n            position: static; \r\n            height: 100%; \r\n            display: flex; \r\n            align-items: center;\r\n        }\r\n\r\n        \/* Se mantiene el tama\u00f1o 18px y peso 300 original *\/\r\n        .nav-link-item { \r\n            font-size: 18px; \r\n            font-weight: 300; \r\n            color: rgba(255, 255, 255, 0.9); \r\n            transition: all 0.3s ease; \r\n            cursor: pointer; \r\n            white-space: nowrap; \r\n        }\r\n        \r\n        \/* El hover ahora es blanco puro para resaltar sobre el gris suave *\/\r\n        .nav-link-item:hover { color: var(--white); text-shadow: 0 0 10px rgba(255,255,255,0.3); }\r\n        \r\n        \/* --- BOTONES DERECHA --- *\/\r\n        .nav-right-btns { display: flex; gap: 15px; align-items: center; }\r\n        \r\n        .nav-right-btns .btn-white { \r\n            background-color: #ffffff !important; \r\n            color: #000000 !important; \r\n            padding: 25px 25px; \r\n            font-size: 14px; \r\n            font-weight: 600; \r\n            text-transform: capitalize; \r\n            transition: all 0.3s ease;\r\n            display: inline-block;\r\n            border: 2px solid #ffffff !important;\r\n        }\r\n        .nav-right-btns .btn-white:hover {\r\n            background-color: var(--black) !important;\r\n            border-color: var(--white) !important;\r\n            color: var(--white) !important;\r\n        }\r\n\r\n        .nav-right-btns .btn-outline { \r\n            background-color: #000000 !important; \r\n            border: 2px solid #ffffff !important; \r\n            color: #ffffff !important; \r\n            padding: 25px 25px; \r\n            font-size: 14px; \r\n            font-weight: 600; \r\n            text-transform: capitalize; \r\n            transition: all 0.3s ease;\r\n            display: inline-block;\r\n        }\r\n\r\n        .nav-right-btns .btn-outline:hover { \r\n            background-color: #ffffff !important; \r\n            color: #000000 !important; \r\n        }\r\n\r\n        \/* --- MEGA MENU --- *\/\r\n        .mega-menu {\r\n            position: absolute;\r\n            top: 90px;\r\n            left: 0;\r\n            width: 100%;\r\n            background: #0f0f0f;\r\n            border-bottom: 2px solid var(--white); \/* Sustituido el dorado por blanco sutil *\/\r\n            visibility: hidden;\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease, visibility 0.3s ease;\r\n            padding: 40px 0;\r\n            overflow: hidden;\r\n            z-index: 999;\r\n        }\r\n\r\n        .nav-item-container:hover .mega-menu {\r\n            visibility: visible;\r\n            opacity: 1;\r\n        }\r\n\r\n        .slider-wrapper {\r\n            display: flex;\r\n            gap: 20px;\r\n            overflow-x: auto;\r\n            padding: 0 50px 20px 50px;\r\n            scroll-behavior: smooth;\r\n            scrollbar-width: none;\r\n        }\r\n        .slider-wrapper::-webkit-scrollbar { display: none; }\r\n\r\n        .sede-card {\r\n            flex: 0 0 280px;\r\n            position: relative;\r\n            height: 350px;\r\n            overflow: hidden;\r\n            border-radius: 8px;\r\n            background: #1a1a1a;\r\n            transition: all 0.4s ease;\r\n            border: 1px solid rgba(255,255,255,0.05);\r\n        }\r\n\r\n        .sede-thumb { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) grayscale(0.5); transition: 0.6s; }\r\n        .sede-card:hover .sede-thumb { filter: brightness(0.8) grayscale(0); transform: scale(1.05); }\r\n\r\n        .sede-overlay {\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            padding: 20px;\r\n            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);\r\n        }\r\n\r\n        .name { font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; }\r\n        .location { font-size: 11px; color: rgba(255,255,255,0.6); }\r\n        \r\n        \/* Distancia en blanco para mantener sobriedad *\/\r\n        .distancia-info { font-size: 10px; color: var(--white); font-weight: 700; margin-top: 5px; text-transform: uppercase; opacity: 0.8; }\r\n\r\n        .slider-btn {\r\n            position: absolute; top: 50%; transform: translateY(-50%);\r\n            width: 45px; height: 45px; background: var(--white);\r\n            color: black; border: none; border-radius: 50%; cursor: pointer;\r\n            z-index: 1010; display: flex; align-items: center; justify-content: center;\r\n            opacity: 0; transition: 0.3s; font-size: 20px;\r\n        }\r\n        .mega-menu:hover .slider-btn { opacity: 0.9; }\r\n        .btn-prev { left: 10px; }\r\n        .btn-next { right: 10px; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <nav id=\"navbar-prestige\">\r\n        <div class=\"nav-left-group\">\r\n            <a href=\"index.html\" class=\"logo-container\">\r\n                <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/04\/logo_nuevo_sportica_blanco_letras-sin-fondo.png\" class=\"main-logo\">\r\n            <\/a>\r\n\r\n            <ul class=\"nav-links\">\r\n                <li class=\"nav-item-container\">\r\n                    <a class=\"nav-link-item\">Clubes<\/a>\r\n                    <div class=\"mega-menu\">\r\n                        <button class=\"slider-btn btn-prev\" onclick=\"moveSlider(-1)\">&#10094;<\/button>\r\n                        <div class=\"slider-wrapper\" id=\"clubSlider\">\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/aeropuerto\/\" class=\"sede-card\" data-lat=\"19.42250\" data-lng=\"-99.08660\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1282-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Aeropuerto<\/div><div class=\"location\">Col. Federal, CDMX<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/azteca\/\" class=\"sede-card\" data-lat=\"19.5342\" data-lng=\"-99.0256\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1331-1-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Azteca<\/div><div class=\"location\">Ecatepec, Edo Mex<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/aragon\/\" class=\"sede-card\" data-lat=\"19.48248\" data-lng=\"-99.06260\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1379-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Arag\u00f3n<\/div><div class=\"location\">Gustavo A. Madero<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/campestre\/\" class=\"sede-card\" data-lat=\"19.4682\" data-lng=\"-99.0531\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_3984.png\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Campestre<\/div><div class=\"location\">Nezahualc\u00f3yotl<\/div><div class=\"distancia-info\"><\/div><\/div><\/a><a href=\"https:\/\/sporticamx.com\/index.php\/coacalco\/\" class=\"sede-card\" data-lat=\"19.49662\" data-lng=\"-99.22600\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1229-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Coacalco<\/div><div class=\"location\">Plaza Coacalco <\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/echegaray\/\" class=\"sede-card\" data-lat=\"19.47060\" data-lng=\"-99.05243\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1239-Edit-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Echegaray<\/div><div class=\"location\">Naucalpan, Edo Mex<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/egipto\/\" class=\"sede-card\" data-lat=\"19.46384\" data-lng=\"-99.05379\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1317-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Egipto<\/div><div class=\"location\">Bosques de Arag\u00f3n<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/naciones\/\" class=\"sede-card\" data-lat=\"19.46384\" data-lng=\"-99.05379\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1349-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Naciones<\/div><div class=\"location\">Bosques de Arag\u00f3n<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/oceania\/\" class=\"sede-card\" data-lat=\"19.44814\" data-lng=\"-99.06864\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1297-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Ocean\u00eda<\/div><div class=\"location\">Gustavo A. Madero<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/pradera\/\" class=\"sede-card\" data-lat=\"19.4776\" data-lng=\"-99.0672\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1331-1-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Pradera<\/div><div class=\"location\">La Pradera, CDMX<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/viaducto\/\" class=\"sede-card\" data-lat=\"19.40356\" data-lng=\"-99.14019\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1294-scaled.jpg\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Viaducto<\/div><div class=\"location\">Col. \u00c1lamos, CDMX<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/celaya\/\" class=\"sede-card\" data-lat=\"20.51890\" data-lng=\"-100.83746\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_13062.png\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Celaya<\/div><div class=\"location\">Celaya, Guanajuato<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/arbide\/\" class=\"sede-card\" data-lat=\"21.12016\" data-lng=\"-101.70200\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_826330.png\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Arbide<\/div><div class=\"location\">Le\u00f3n, Guanajuato<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                            <a href=\"https:\/\/sporticamx.com\/index.php\/premier\/\" class=\"sede-card\" data-lat=\"21.14019\" data-lng=\"-101.68621\"><img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_3871.png\" class=\"sede-thumb\"><div class=\"sede-overlay\"><div class=\"name\">Premier<\/div><div class=\"location\">Le\u00f3n, Guanajuato<\/div><div class=\"distancia-info\"><\/div><\/div><\/a>\r\n                        <\/div>\r\n                        <button class=\"slider-btn btn-next\" onclick=\"moveSlider(1)\">&#10095;<\/button>\r\n                    <\/div>\r\n                <\/li>\r\n                <li><a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce\/\" class=\"nav-link-item\">Membres\u00edas<\/a><\/li>\r\n                <li><a href=\"https:\/\/sporticamx.com\/index.php\/segmentacion-clases-fitness\/\" class=\"nav-link-item\">Clases Fitness<\/a><\/li><li><a href=\"https:\/\/sporticamx.com\/index.php\/entrenamiento-personal\/\" class=\"nav-link-item\">Entrenadores personales<\/a><\/li>\r\n                <li><a href=\"#\" class=\"nav-link-item\">Inbody<\/a><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div class=\"nav-right-btns\">\r\n            <a href=\"https:\/\/sporticamx.com\/index.php\/dia-gratis\/\" class=\"btn-white\">Visita un club<\/a>\r\n            <a href=\"https:\/\/sporticamx.com\/index.php\/encuentra-hoy\/\" class=\"btn-outline\">Encuentra hoy<\/a>\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <script>\r\n        function moveSlider(direction) {\r\n            const slider = document.getElementById('clubSlider');\r\n            slider.scrollBy({ left: direction * 350, behavior: 'smooth' });\r\n        }\r\n\r\n        function calcularDistancia(lat1, lon1, lat2, lon2) {\r\n            const R = 6371; \r\n            const dLat = (lat2 - lat1) * Math.PI \/ 180;\r\n            const dLon = (lon2 - lon1) * Math.PI \/ 180;\r\n            const a = Math.sin(dLat\/2) * Math.sin(dLat\/2) +\r\n                      Math.cos(lat1 * Math.PI \/ 180) * Math.cos(lat2 * Math.PI \/ 180) * Math.sin(dLon\/2) * Math.sin(dLon\/2);\r\n            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));\r\n            return R * c;\r\n        }\r\n\r\n        function ordenarClubesPorCercania() {\r\n            if (!navigator.geolocation) return;\r\n            navigator.geolocation.getCurrentPosition(position => {\r\n                const userLat = position.coords.latitude;\r\n                const userLng = position.coords.longitude;\r\n                const slider = document.getElementById('clubSlider');\r\n                const cards = Array.from(slider.getElementsByClassName('sede-card'));\r\n\r\n                cards.forEach(card => {\r\n                    const clubLat = parseFloat(card.getAttribute('data-lat'));\r\n                    const clubLng = parseFloat(card.getAttribute('data-lng'));\r\n                    if (clubLat && clubLng) {\r\n                        const dist = calcularDistancia(userLat, userLng, clubLat, clubLng);\r\n                        card.setAttribute('data-distancia', dist);\r\n                        const infoDiv = card.querySelector('.distancia-info');\r\n                        if (infoDiv) infoDiv.innerText = `A ${dist.toFixed(1)} km de ti`;\r\n                    }\r\n                });\r\n\r\n                cards.sort((a, b) => parseFloat(a.getAttribute('data-distancia')) - parseFloat(b.getAttribute('data-distancia')));\r\n                cards.forEach(card => slider.appendChild(card));\r\n            });\r\n        }\r\n        window.addEventListener('load', ordenarClubesPorCercania);\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34232f4 elementor-hidden-desktop e-flex e-con-boxed e-con e-parent\" data-id=\"34232f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ed33c7 elementor-widget elementor-widget-html\" data-id=\"5ed33c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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\">\n    <title>Navegaci\u00f3n Sportica Prestige - Minimalist<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;600&family=Montserrat:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --white: #ffffff;\n            --black: #000000;\n            --gray-light: #e5e5e5;\n            --gray-med: #737373;\n            --gray-dark: #262626;\n        }\n        body {\n            font-family: 'Inter', sans-serif;\n            background-color: var(--black);\n            margin: 0;\n            padding: 0;\n            color: var(--white);\n            overflow-x: hidden;\n        }\n        .font-serif { font-family: 'Playfair Display', serif; }\n        a { text-decoration: none !important; color: inherit; transition: all 0.3s ease; }\n\n        \/* --- LOGO Y BURGER --- *\/\n        #main-logo-container, .burger-btn {\n            position: fixed;\n            top: 40px;\n            z-index: 150;\n            opacity: 0;\n            transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);\n        }\n        #main-logo-container { left: 40px; }\n        .burger-btn { \n            right: 40px; \n            z-index: 200; \n            mix-blend-mode: difference; \n            display: flex;\n            align-items: center;\n            gap: 15px;\n            cursor: pointer;\n        }\n        #main-logo-container.loaded, .burger-btn.loaded { opacity: 1; }\n        #main-logo-container.scrolled, .burger-btn.scrolled {\n            opacity: 0 !important;\n            transform: translateY(-10px);\n            pointer-events: none;\n        }\n        .logo-img { width: 180px; height: auto; display: block; }\n\n        \/* --- MEN\u00da OVERLAY --- *\/\n        #menu-overlay {\n            position: fixed;\n            inset: 0;\n            background-color: var(--black);\n            z-index: 100;\n            display: flex;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n        }\n        #menu-overlay.active { opacity: 1; visibility: visible; }\n        .menu-bg-container { position: absolute; inset: 0; z-index: -1; overflow: hidden; }\n        #dynamic-bg {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            opacity: 0;\n            transform: scale(1.1);\n            transition: opacity 0.8s ease, transform 1.5s ease;\n            filter: brightness(30%);\n        }\n        #dynamic-bg.visible { opacity: 0.5; transform: scale(1); }\n\n        .nav-link {\n            font-size: clamp(2rem, 6vw, 4.2rem);\n            color: var(--white);\n            line-height: 1.1;\n            transition: all 0.4s ease;\n            display: inline-block;\n            position: relative;\n            cursor: pointer;\n        }\n        .nav-link:hover { color: var(--gray-med); padding-left: 20px; }\n\n        \/* --- SUBMEN\u00da CLUBES --- *\/\n        #clubs-submenu {\n            max-height: 0;\n            overflow-y: auto;\n            overflow-x: hidden;\n            transition: max-height 0.5s ease-in-out;\n            margin-top: 10px;\n            padding-left: 20px;\n            border-left: 1px solid var(--gray-dark);\n        }\n        #clubs-submenu::-webkit-scrollbar { width: 3px; }\n        #clubs-submenu::-webkit-scrollbar-thumb { background: var(--gray-med); border-radius: 3px;}\n        #clubs-submenu.open { max-height: 380px; margin-bottom: 20px; }\n\n        .club-item {\n            padding: 10px 0;\n            border-bottom: 1px solid var(--gray-dark);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 20px;\n        }\n        .club-name {\n            font-family: 'Montserrat', sans-serif;\n            font-size: 14px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.15em;\n            color: var(--white);\n            transition: 0.3s;\n        }\n        .club-name:hover { color: var(--gray-med); letter-spacing: 0.2em; }\n\n        .club-link-maps {\n            font-family: 'Montserrat', sans-serif;\n            font-size: 10px;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            color: var(--gray-med);\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n        .club-link-maps:hover { color: var(--white); }\n\n        .btn-menu-mobile {\n            font-family: 'Montserrat', sans-serif;\n            text-transform: uppercase;\n            letter-spacing: 0.15em;\n            font-size: 11px;\n            font-weight: 700;\n            padding: 18px 36px;\n            transition: all 0.3s ease;\n            display: inline-block;\n            text-align: center;\n            min-width: 220px;\n        }\n        .btn-white { background-color: var(--white); color: var(--black) !important; border: 1px solid var(--white); }\n        .btn-white:hover { background-color: transparent; color: var(--white) !important; }\n        .btn-border { background-color: transparent; color: var(--white) !important; border: 1px solid rgba(255, 255, 255, 0.4); }\n        .btn-border:hover { border-color: var(--white); }\n\n        .burger-line { width: 30px; height: 1px; background-color: var(--white); transition: 0.3s; }\n        .active .line-1 { transform: rotate(45deg) translate(5px, 5px); }\n        .active .line-2 { opacity: 0; }\n        .active .line-3 { transform: rotate(-45deg) translate(5px, -5px); }\n\n        @media (max-width: 768px) {\n            #main-logo-container { left: 20px; top: 30px; }\n            .burger-btn { right: 20px; top: 30px; }\n            .logo-img { width: 140px; }\n            #clubs-submenu.open { max-height: 280px; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div id=\"main-logo-container\">\n        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/04\/logo_nuevo_sportica_blanco_letras-sin-fondo.png\" alt=\"Sportica Logo\" class=\"logo-img\">\n    <\/div>\n\n    <div class=\"burger-btn\" onclick=\"toggleMenu()\">\n        <span class=\"text-[10px] uppercase tracking-[0.4em] font-light hidden md:block\" id=\"burger-text\" style=\"font-family: 'Montserrat';\">Men\u00fa<\/span>\n        <div class=\"flex flex-col gap-2\">\n            <div class=\"burger-line line-1\"><\/div>\n            <div class=\"burger-line line-2\"><\/div>\n            <div class=\"burger-line line-3\"><\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"menu-overlay\">\n        <div class=\"menu-bg-container\">\n            <img decoding=\"async\" id=\"dynamic-bg\" src=\"\" alt=\"Background\">\n            <div class=\"absolute inset-0 bg-gradient-to-r from-black via-black\/70 to-transparent\"><\/div>\n        <\/div>\n\n        <div class=\"w-full h-full flex flex-col justify-center px-10 md:px-24\">\n            <nav class=\"flex flex-col gap-5\">\n                <div class=\"flex flex-col\">\n                    <span class=\"nav-link font-serif\" onmouseover=\"changeBg('clubs')\" onclick=\"toggleClubs()\">Clubes<\/span>\n                    <div id=\"clubs-submenu\"><\/div>\n                <\/div>\n                <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce\/\" class=\"nav-link font-serif\" onmouseover=\"changeBg('clases')\">Membres\u00edas<\/a>\n                <a href=\"https:\/\/sporticamx.com\/index.php\/segmentacion-clases-fitness\/\" class=\"nav-link font-serif\" onmouseover=\"changeBg('entrenamiento')\">Clases Fitness<\/a>\n                <a href=\"https:\/\/sporticamx.com\/index.php\/entrenamiento-personal\/\" class=\"nav-link font-serif\" onmouseover=\"changeBg('spa')\">Entrenadores<\/a>\n                <a href=\"#\" class=\"nav-link font-serif\" onmouseover=\"changeBg('membresia')\">Inbody<\/a>\n            <\/nav>\n\n            <div class=\"mt-12 flex flex-col md:flex-row gap-5\">\n                <a href=\"https:\/\/sporticamx.com\/index.php\/dia-gratis\/\" class=\"btn-menu-mobile btn-white\">Visita un Club<\/a>\n                <a href=\"https:\/\/sporticamx.com\/index.php\/encuentra-hoy\/\" class=\"btn-menu-mobile btn-border\">Encuentra Hoy<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const sedes = [\n    { nombre: \"Aeropuerto\", url: \"https:\/\/sporticamx.com\/index.php\/aeropuerto\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Aeropuerto\" },\n    { nombre: \"Azteca\", url: \"https:\/\/sporticamx.com\/index.php\/azteca\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Azteca\" },\n    { nombre: \"Arag\u00f3n\", url: \"https:\/\/sporticamx.com\/index.php\/aragon\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Arag\u00f3n\" },\n    { nombre: \"Campestre\", url: \"https:\/\/sporticamx.com\/index.php\/campestre\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Campestre\" },\n    { nombre: \"Coacalco\", url: \"https:\/\/sporticamx.com\/index.php\/coacalco\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Coacalco\" },\n    { nombre: \"Echegaray\", url: \"https:\/\/sporticamx.com\/index.php\/echegaray\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Echegaray\" },\n    { nombre: \"Egipto\", url: \"https:\/\/sporticamx.com\/index.php\/egipto\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Egipto\" },\n    { nombre: \"Naciones\", url: \"https:\/\/sporticamx.com\/index.php\/naciones\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Naciones\" },\n    { nombre: \"Ocean\u00eda\", url: \"https:\/\/sporticamx.com\/index.php\/oceania\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Ocean\u00eda\" },\n    { nombre: \"Pradera\", url: \"https:\/\/sporticamx.com\/index.php\/pradera\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Pradera\" },\n    { nombre: \"Viaducto\", url: \"https:\/\/sporticamx.com\/index.php\/viaducto\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Viaducto\" },\n    { nombre: \"Celaya\", url: \"https:\/\/sporticamx.com\/index.php\/celaya\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Celaya\" },\n    { nombre: \"Arbide\", url: \"https:\/\/sporticamx.com\/index.php\/arbide\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Arbide\" },\n    { nombre: \"Premier\", url: \"https:\/\/sporticamx.com\/index.php\/premier\/\", maps: \"https:\/\/www.google.com\/maps\/search\/?api=1&query=Sportica+Premier\" }\n];\n\n\n\n\n        const images = {\n            'default': 'https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1229-scaled.jpg',\n            'clubs': 'https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1317-scaled.jpg',\n            'clases': 'https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1297-scaled.jpg',\n            'entrenamiento': 'https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1294-scaled.jpg',\n            'spa': 'https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_3871.png',\n            'membresia': 'https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1349-scaled.jpg'\n        };\n\n        const overlay = document.getElementById('menu-overlay');\n        const bgImg = document.getElementById('dynamic-bg');\n        const burgerBtn = document.querySelector('.burger-btn');\n        const burgerText = document.getElementById('burger-text');\n        const logoContainer = document.getElementById('main-logo-container');\n        const clubsSubmenu = document.getElementById('clubs-submenu');\n\n        function renderClubs() {\n            clubsSubmenu.innerHTML = sedes.map(sede => `\n                <div class=\"club-item\">\n                    <a href=\"${sede.url}\" class=\"club-name\">${sede.nombre}<\/a>\n                    <a href=\"${sede.maps}\" target=\"_blank\" class=\"club-link-maps\">\n                        <svg width=\"10\" height=\"12\" viewBox=\"0 0 12 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M6 0C2.68629 0 0 2.68629 0 6C0 10.5 6 16 6 16C6 16 12 10.5 12 6C12 2.68629 9.31371 0 6 0ZM6 8.25C4.75736 8.25 3.75 7.24264 3.75 6C3.75 4.75736 4.75736 3.75 6 3.75C7.24264 3.75 8.25 4.75736 8.25 6C8.25 7.24264 7.24264 8.25 6 8.25Z\" fill=\"currentColor\"\/><\/svg>\n                        Ubicaci\u00f3n\n                    <\/a>\n                <\/div>\n            `).join('');\n        }\n        renderClubs();\n\n        function toggleClubs() { clubsSubmenu.classList.toggle('open'); }\n\n        function toggleMenu() {\n            const isActive = overlay.classList.toggle('active');\n            burgerBtn.classList.toggle('active');\n            if(isActive) {\n                burgerText.innerText = \"Cerrar\";\n                logoContainer.classList.add('scrolled');\n                changeBg('default');\n                document.body.style.overflow = 'hidden';\n            } else {\n                burgerText.innerText = \"Men\u00fa\";\n                clubsSubmenu.classList.remove('open');\n                document.body.style.overflow = 'auto';\n            }\n        }\n\n        function changeBg(key) {\n            bgImg.classList.remove('visible');\n            setTimeout(() => {\n                bgImg.src = images[key];\n                bgImg.classList.add('visible');\n            }, 100);\n        }\n\n        window.addEventListener('scroll', () => {\n            if (overlay.classList.contains('active')) return;\n            if (window.scrollY > 50) {\n                logoContainer.classList.add('scrolled');\n                burgerBtn.classList.add('scrolled');\n            } else {\n                logoContainer.classList.remove('scrolled');\n                burgerBtn.classList.remove('scrolled');\n            }\n        });\n\n        window.addEventListener('load', () => {\n            setTimeout(() => {\n                logoContainer.classList.add('loaded');\n                burgerBtn.classList.add('loaded');\n            }, 300);\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1942c3f elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"1942c3f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d624832 elementor-widget elementor-widget-html\" data-id=\"d624832\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"hero-exclusive\">\r\n    <div class=\"hero-media-container\">\r\n        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/03\/hero.png\" class=\"hero-img\" alt=\"Sportica Hero\">\r\n        \r\n        <div class=\"hero-overlay\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-content\">\r\n        <a href=\"#\" class=\"hero-clickable-area\">\r\n            <h1 class=\"hero-main-title\">Exclusividad en<br>movimiento.<\/h1>\r\n                <p class=\"hero-promo-text\"> inscripci\u00f3n y mantenimiento todo el mes.<\/p>\r\n        <\/a>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    \/* 1. Reset para asegurar ancho total *\/\r\n    #hero-exclusive {\r\n        position: relative;\r\n        width: 100vw; \/* Ancho total del visor *\/\r\n        height: 100vh; \/* Alto total del visor *\/\r\n        margin-left: calc(-50vw + 50%); \/* Rompe el contenedor padre si existe *\/\r\n        margin-right: calc(-50vw + 50%);\r\n        display: flex;\r\n        align-items: flex-end; \/* Alinea texto abajo como en tu captura *\/\r\n        padding: 0 5vw 10vh 5vw; \/* Espaciado responsivo *\/\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* 2. Contenedor de Media (Imagen\/Video) *\/\r\n    .hero-media-container {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: -1;\r\n    }\r\n\r\n    .hero-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover; \/* Evita que la imagen se estire o deje huecos *\/\r\n    }\r\n\r\n    .hero-overlay {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        \/* Gradiente oscuro que sube desde abajo para que el texto resalte *\/\r\n        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);\r\n    }\r\n\r\n    \/* 3. Contenido y Tipograf\u00eda Montserrat *\/\r\n    .hero-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        max-width: 1200px;\r\n        margin-left: 50px; \/* Esto a\u00f1ade un espacio fijo en p\u00edxeles hacia la derecha *\/\r\n    }\r\n\r\n    .hero-clickable-area {\r\n        text-decoration: none !important;\r\n        display: block;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .hero-clickable-area:hover {\r\n        transform: translateX(15px); \/* Efecto sutil al pasar el mouse *\/\r\n    }\r\n\r\n    .hero-main-title {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(40px, 5vw, 100px); \/* Tama\u00f1o fluido *\/\r\n        font-weight: 400; \/* Bold como en tu referencia *\/\r\n        line-height: 0.9;\r\n        color: #ffffff;\r\n        margin: 0 0 0 0;\r\n        letter-spacing: -2px;\r\n    }\r\n\r\n    .hero-promo-text {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(16px, 2vw, 24px);\r\n        font-weight: 600;\r\n        color: #ffffff;\r\n        margin:0 0 80px 0;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    \/* 4. Correcci\u00f3n global para evitar scroll horizontal *\/\r\n    body {\r\n        margin: 0;\r\n        padding: 0;\r\n        overflow-x: hidden;\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-da4e011 elementor-hidden-desktop e-flex e-con-boxed e-con e-parent\" data-id=\"da4e011\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a7ba56 elementor-widget elementor-widget-html\" data-id=\"1a7ba56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"hero-exclusive\">\r\n    <div class=\"hero-media-container\">\r\n        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/03\/hero_movil.png\" class=\"hero-img\" alt=\"Sportica Hero\">\r\n        \r\n        <div class=\"hero-overlay\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-content\">\r\n        <a href=\"https:\/\/sporticamx.com\/membresias\/\" class=\"hero-clickable-area\">\r\n            <h1 class=\"hero-main-title\">Exclusividad en<br>movimiento.<\/h1>\r\n                <p class=\"hero-promo-text\"> inscripci\u00f3n y mantenimiento todo el mes.<\/p>\r\n        <\/a>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    \/* 1. Reset para asegurar ancho total *\/\r\n    #hero-exclusive {\r\n        position: relative;\r\n        width: 100vw; \/* Ancho total del visor *\/\r\n        height: 100vh; \/* Alto total del visor *\/\r\n        margin-left: calc(-50vw + 50%); \/* Rompe el contenedor padre si existe *\/\r\n        margin-right: calc(-50vw + 50%);\r\n        display: flex;\r\n        align-items: flex-end; \/* Alinea texto abajo como en tu captura *\/\r\n        padding: 0 5vw 10vh 5vw; \/* Espaciado responsivo *\/\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* 2. Contenedor de Media (Imagen\/Video) *\/\r\n    .hero-media-container {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: -1;\r\n    }\r\n\r\n    .hero-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover; \/* Evita que la imagen se estire o deje huecos *\/\r\n    }\r\n\r\n    .hero-overlay {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        \/* Gradiente oscuro que sube desde abajo para que el texto resalte *\/\r\n        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);\r\n    }\r\n\r\n    \/* 3. Contenido y Tipograf\u00eda Montserrat *\/\r\n    .hero-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        max-width: 1200px;\r\n        margin-left: 50px; \/* Esto a\u00f1ade un espacio fijo en p\u00edxeles hacia la derecha *\/\r\n    }\r\n\r\n    .hero-clickable-area {\r\n        text-decoration: none !important;\r\n        display: block;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .hero-clickable-area:hover {\r\n        transform: translateX(15px); \/* Efecto sutil al pasar el mouse *\/\r\n    }\r\n\r\n    .hero-main-title {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(40px, 5vw, 100px); \/* Tama\u00f1o fluido *\/\r\n        font-weight: 400; \/* Bold como en tu referencia *\/\r\n        line-height: 0.9;\r\n        color: #ffffff;\r\n        margin: 0 0 0 0;\r\n        letter-spacing: -2px;\r\n    }\r\n\r\n    .hero-promo-text {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(16px, 2vw, 24px);\r\n        font-weight: 600;\r\n        color: #ffffff;\r\n        margin:0 0 80px 0;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    \/* 4. Correcci\u00f3n global para evitar scroll horizontal *\/\r\n    body {\r\n        margin: 0;\r\n        padding: 0;\r\n        overflow-x: hidden;\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5859c9 elementor-hidden-tablet elementor-hidden-mobile elementor-hidden-desktop e-flex e-con-boxed e-con e-parent\" data-id=\"a5859c9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26ec88a elementor-widget elementor-widget-html\" data-id=\"26ec88a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"hero-exclusive\">\r\n    <div class=\"hero-media-container\">\r\n        <video autoplay muted loop playsinline class=\"hero-video\">\r\n            <source src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/03\/VIDEOWALL-MARZO.mp4\" type=\"video\/mp4\">\r\n            Tu navegador no soporta videos.\r\n        <\/video>\r\n        \r\n        <div class=\"hero-overlay\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-content\">\r\n        <a href=\"https:\/\/sporticamx.com\/membresias\/\" class=\"hero-clickable-area\">\r\n            <h1 class=\"hero-main-title\">Exclusividad en<br>movimiento.<\/h1>\r\n            <p class=\"hero-promo-text\">60% inscripci\u00f3n y mantenimiento todo Febrero.<\/p>\r\n        <\/a>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    \/* 1. Reset para asegurar ancho total *\/\r\n    #hero-exclusive {\r\n        position: relative;\r\n        width: 100vw; \/* Ancho total del visor *\/\r\n        height: 100vh; \/* Alto total del visor *\/\r\n        margin-left: calc(-50vw + 50%); \/* Rompe el contenedor padre si existe *\/\r\n        margin-right: calc(-50vw + 50%);\r\n        display: flex;\r\n        align-items: flex-end; \/* Alinea texto abajo como en tu captura *\/\r\n        padding: 0 5vw 10vh 5vw; \/* Espaciado responsivo *\/\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* 2. Contenedor de Media (Imagen\/Video) *\/\r\n    .hero-media-container {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: -1;\r\n    }\r\n\r\n    .hero-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover; \/* Evita que la imagen se estire o deje huecos *\/\r\n    }\r\n\r\n    .hero-overlay {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        \/* Gradiente oscuro que sube desde abajo para que el texto resalte *\/\r\n        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);\r\n    }\r\n\r\n    \/* 3. Contenido y Tipograf\u00eda Montserrat *\/\r\n    .hero-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        max-width: 1200px;\r\n        margin-left: 50px; \/* Esto a\u00f1ade un espacio fijo en p\u00edxeles hacia la derecha *\/\r\n    }\r\n\r\n    .hero-clickable-area {\r\n        text-decoration: none !important;\r\n        display: block;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .hero-clickable-area:hover {\r\n        transform: translateX(15px); \/* Efecto sutil al pasar el mouse *\/\r\n    }\r\n\r\n    .hero-main-title {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(40px, 5vw, 100px); \/* Tama\u00f1o fluido *\/\r\n        font-weight: 400; \/* Bold como en tu referencia *\/\r\n        line-height: 0.9;\r\n        color: #ffffff;\r\n        margin: 0 0 0 0;\r\n        letter-spacing: -2px;\r\n    }\r\n\r\n    .hero-promo-text {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(16px, 2vw, 24px);\r\n        font-weight: 600;\r\n        color: #ffffff;\r\n        margin:0 0 80px 0;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    \/* 4. Correcci\u00f3n global para evitar scroll horizontal *\/\r\n    body {\r\n        margin: 0;\r\n        padding: 0;\r\n        overflow-x: hidden;\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-be0674e elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"be0674e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a80099 elementor-widget elementor-widget-html\" data-id=\"0a80099\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"hero-exclusive\">\r\n    <div class=\"hero-media-container\">\r\n        <video autoplay muted loop playsinline class=\"hero-video\">\r\n            <source src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/03\/VIDEOWALL-MARZO.mp4\" type=\"video\/mp4\">\r\n            Tu navegador no soporta videos.\r\n        <\/video>\r\n        \r\n        <div class=\"hero-overlay\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-content\">\r\n        <a href=\"https:\/\/sporticamx.com\/membresias\/\" class=\"hero-clickable-area\">\r\n            <h1 class=\"hero-main-title\">Exclusividad en<br>movimiento.<\/h1>\r\n            <p class=\"hero-promo-text\">60% inscripci\u00f3n y mantenimiento todo Febrero.<\/p>\r\n        <\/a>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    \/* 1. Reset para asegurar ancho total *\/\r\n    #hero-exclusive {\r\n        position: relative;\r\n        width: 100vw; \/* Ancho total del visor *\/\r\n        height: 100vh; \/* Alto total del visor *\/\r\n        margin-left: calc(-50vw + 50%); \/* Rompe el contenedor padre si existe *\/\r\n        margin-right: calc(-50vw + 50%);\r\n        display: flex;\r\n        align-items: flex-end; \/* Alinea texto abajo como en tu captura *\/\r\n        padding: 0 5vw 10vh 5vw; \/* Espaciado responsivo *\/\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* 2. Contenedor de Media (Imagen\/Video) *\/\r\n    .hero-media-container {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: -1;\r\n    }\r\n\r\n    .hero-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover; \/* Evita que la imagen se estire o deje huecos *\/\r\n    }\r\n\r\n    .hero-overlay {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        \/* Gradiente oscuro que sube desde abajo para que el texto resalte *\/\r\n        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);\r\n    }\r\n\r\n    \/* 3. Contenido y Tipograf\u00eda Montserrat *\/\r\n    .hero-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        max-width: 1200px;\r\n        margin-left: 50px; \/* Esto a\u00f1ade un espacio fijo en p\u00edxeles hacia la derecha *\/\r\n    }\r\n\r\n    .hero-clickable-area {\r\n        text-decoration: none !important;\r\n        display: block;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .hero-clickable-area:hover {\r\n        transform: translateX(15px); \/* Efecto sutil al pasar el mouse *\/\r\n    }\r\n\r\n    .hero-main-title {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(40px, 5vw, 100px); \/* Tama\u00f1o fluido *\/\r\n        font-weight: 400; \/* Bold como en tu referencia *\/\r\n        line-height: 0.9;\r\n        color: #ffffff;\r\n        margin: 0 0 0 0;\r\n        letter-spacing: -2px;\r\n    }\r\n\r\n    .hero-promo-text {\r\n        font-family: 'Montserrat', sans-serif;\r\n        font-size: clamp(16px, 2vw, 24px);\r\n        font-weight: 600;\r\n        color: #ffffff;\r\n        margin:0 0 80px 0;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    \/* 4. Correcci\u00f3n global para evitar scroll horizontal *\/\r\n    body {\r\n        margin: 0;\r\n        padding: 0;\r\n        overflow-x: hidden;\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-889399d e-flex e-con-boxed e-con e-parent\" data-id=\"889399d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3392b71 elementor-widget elementor-widget-html\" data-id=\"3392b71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&display=swap');\n\n    .elementor-widget-html .elementor-widget-container {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n    }\n\n    .prestige-hero-section {\n        position: relative;\n        width: 100vw;\n        min-height: 90vh;\n        background-image: url('https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1229-scaled.jpg');\n        background-size: cover;\n        background-position: center;\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        padding: 5% 8%;\n        font-family: 'Montserrat', sans-serif;\n        box-sizing: border-box;\n    }\n\n    .prestige-hero-section::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(0, 0, 0, 0.4);\n        z-index: 1;\n    }\n\n    .prestige-card {\n        position: relative;\n        z-index: 10;\n        background: #ffffff;\n        width: 100%;\n        max-width: 460px;\n        padding: 50px;\n        box-shadow: 0 30px 60px rgba(0,0,0,0.3);\n    }\n\n    .prestige-card h2 {\n        font-size: 34px;\n        font-weight: 700;\n        line-height: 1;\n        margin-bottom: 20px;\n        text-transform: uppercase;\n        color: #000;\n        letter-spacing: -1px;\n    }\n\n    .prestige-card p.description {\n        font-size: 14px;\n        color: #666;\n        line-height: 1.7;\n        margin-bottom: 40px;\n    }\n\n    .selector-btn-prestige {\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 22px;\n        background: #fff;\n        border: 1px solid #eee !important;\n        text-align: left;\n        margin-bottom: 12px;\n        cursor: pointer;\n        transition: 0.3s;\n    }\n\n    .selector-btn-prestige:hover { border-color: #000 !important; }\n\n    .dropdown-prestige {\n        background: #fff;\n        max-height: 0;\n        overflow: hidden;\n        transition: max-height 0.4s ease-out;\n        margin-bottom: 10px;\n    }\n\n    .dropdown-prestige.open {\n        max-height: 300px;\n        border: 1px solid #eee !important;\n    }\n\n    .item-prestige {\n        padding: 15px 22px;\n        cursor: pointer;\n        border-bottom: 1px solid #f5f5f5;\n        transition: background 0.2s;\n        display: block;\n        width: 100%;\n    }\n\n    .item-prestige:hover { background: #fafafa; }\n\n    .label-prestige { font-size: 8px; text-transform: uppercase; letter-spacing: 2px; color: #bbb; display: block; margin-bottom: 4px; }\n    .value-prestige { font-size: 16px; font-weight: 600; font-style: italic; color: #000; }\n\n    #lista-sedes-prestige::-webkit-scrollbar { width: 4px; }\n    #lista-sedes-prestige::-webkit-scrollbar-thumb { background: #000; }\n\n    .btn-prestige-mini {\n        font-size: 9px;\n        border: 1px solid #000;\n        padding: 4px 10px;\n        font-weight: 700;\n        color: #000;\n    }\n\n    @media (max-width: 768px) {\n        .prestige-hero-section { padding: 40px 20px; justify-content: center; }\n        .prestige-card { padding: 40px 25px; }\n    }\n<\/style>\n\n<div class=\"prestige-hero-section\">\n    <div class=\"prestige-card\">\n        <h2>Membres\u00eda <br> Sportica Prestige<\/h2>\n        <p class=\"description\">Entrenamiento personalizado y amenidades exclusivas.<\/p>\n\n        <div class=\"relative\">\n            <button onclick=\"togglePrestige('menu-sedes-p')\" class=\"selector-btn-prestige\">\n                <div>\n                    <span class=\"label-prestige\">Paso 1: Elige Club<\/span>\n                    <span id=\"txt-sede-p\" class=\"value-prestige\">Explorar Ubicaciones<\/span>\n                <\/div>\n                <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#000\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n            <\/button>\n            <div id=\"menu-sedes-p\" class=\"dropdown-prestige\">\n                <div id=\"lista-sedes-prestige\" style=\"max-height: 250px; overflow-y: auto;\"><\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"relative\">\n            <button id=\"btn-plan-p\" onclick=\"togglePrestige('menu-planes-p')\" class=\"selector-btn-prestige\" style=\"opacity: 0.3; pointer-events: none;\">\n                <div>\n                    <span class=\"label-prestige\">Paso 2: Elige tu Plan<\/span>\n                    <span id=\"txt-plan-p\" class=\"value-prestige\">Ver Planes Disponibles<\/span>\n                <\/div>\n                <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"#000\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n            <\/button>\n            <div id=\"menu-planes-p\" class=\"dropdown-prestige\">\n                <div id=\"lista-planes-prestige\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ RENOMBRADO PARA EVITAR CHOQUES CON EL OTRO C\u00d3DIGO\n    const sedesPrestige = [\"Aeropuerto\", \"Azteca\", \"Arag\u00f3n\", \"Campestre\", \"Coacalco\", \"Echegaray\", \"Egipto\", \"Naciones\", \"Ocean\u00eda\", \"Pradera\", \"Viaducto\", \"Celaya\", \"Arbide\", \"Premier\"];\n    const planesPrestige = [\"Plan Mensual\", \"Plan Trimestral\", \"Plan Anual\", \"Plan VIP\"];\n\n    function togglePrestige(id) {\n        const el = document.getElementById(id);\n        const isOpen = el.classList.contains('open');\n        document.querySelectorAll('.dropdown-prestige').forEach(d => d.classList.remove('open'));\n        if (!isOpen) el.classList.add('open');\n    }\n\n    function seleccionarSedeP(nombre) {\n        document.getElementById('txt-sede-p').innerText = nombre;\n        document.getElementById('menu-sedes-p').classList.remove('open');\n        \n        const btnPlan = document.getElementById('btn-plan-p');\n        btnPlan.style.opacity = \"1\";\n        btnPlan.style.pointerEvents = \"auto\";\n        \n        const list = document.getElementById('lista-planes-prestige');\n        list.innerHTML = planesPrestige.map(p => `\n            <div class=\"item-prestige\" onclick=\"window.location.href='https:\/\/checkout.sportica.com\/${nombre.toLowerCase()}'\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center;\">\n                    <span style=\"font-weight:600; color:#000;\">${p}<\/span>\n                    <span class=\"btn-prestige-mini\">SELECCIONAR<\/span>\n                <\/div>\n            <\/div>\n        `).join('');\n\n        setTimeout(() => togglePrestige('menu-planes-p'), 300);\n    }\n\n    function renderPrestige() {\n        const container = document.getElementById('lista-sedes-prestige');\n        if (container && container.innerHTML === \"\") {\n            container.innerHTML = sedesPrestige.map(s => `\n                <div class=\"item-prestige\" onclick=\"seleccionarSedeP('${s}')\">\n                    <span style=\"font-size:7px; color:#aaa; text-transform:uppercase; letter-spacing:1px; display:block;\">Club Prestige<\/span>\n                    <span style=\"font-weight:600; color:#000;\">${s}<\/span>\n                <\/div>\n            `).join('');\n        }\n    }\n\n    \/\/ Ejecuci\u00f3n m\u00faltiple para asegurar carga en Elementor\n    window.addEventListener('load', renderPrestige);\n    document.addEventListener('DOMContentLoaded', renderPrestige);\n    setTimeout(renderPrestige, 500);\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-929d9f7 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"929d9f7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cf58a9 elementor-widget elementor-widget-html\" data-id=\"1cf58a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Membres\u00edas Exclusive Gym<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        :root {\r\n            \/* Paleta Oficial Sportica *\/\r\n            --black: #000000;\r\n            --white: #ffffff;\r\n            --gray-dark: #2B2D33;\r\n            --gray-medium: #747476;\r\n            --gray-soft: #ADACB1;\r\n            --gray-light: #E3E3E3;\r\n        }\r\n\r\n        body { \r\n            font-family: 'Montserrat', sans-serif; \r\n            background-color: var(--black); \r\n            color: var(--white); \r\n            margin: 0;\r\n            overflow-x: hidden;\r\n        }\r\n        \r\n        \/* Texto Minimalista *\/\r\n        .brand-text {\r\n            color: var(--white);\r\n            letter-spacing: 0.2em;\r\n        }\r\n\r\n        \/* Estilo de Tarjetas Minimalistas *\/\r\n        .card-exclusive {\r\n            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);\r\n            border: 1px solid var(--gray-dark);\r\n            background-color: var(--black);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .card-exclusive:hover {\r\n            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);\r\n            transform: translateY(-5px);\r\n            border-color: var(--gray-medium);\r\n        }\r\n\r\n        \/* Tarjeta Destacada con Borde Blanco Fino *\/\r\n        .featured-card {\r\n            border: 1px solid var(--white);\r\n        }\r\n\r\n        .deco-line {\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--gray-medium), transparent);\r\n            width: 150px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .reveal {\r\n            opacity: 0;\r\n            transform: translateY(20px);\r\n            transition: all 0.6s ease-out;\r\n        }\r\n\r\n        .reveal.active {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .btn-link {\r\n            text-decoration: none !important;\r\n            color: inherit;\r\n            display: block;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"py-24 px-6\">\r\n\r\n    <div class=\"max-w-7xl mx-auto\">\r\n        <div class=\"text-center mb-20 reveal\">\r\n            <div class=\"deco-line mb-8\"><\/div>\r\n            <h1 class=\"brand-text text-[11px] font-bold uppercase mb-4\">\r\n                EXPERIENCIA PRESTIGE\r\n            <\/h1>\r\n            <h2 class=\"text-5xl md:text-6xl font-extrabold uppercase tracking-tighter mb-8\">\r\n                Membres\u00edas\r\n            <\/h2>\r\n            <p class=\"max-w-2xl mx-auto text-[var(--gray-soft)] font-light text-base leading-relaxed\">\r\n                Planes dise\u00f1ados con un enfoque minimalista para quienes exigen rendimiento y sofisticaci\u00f3n.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n            \r\n            <div class=\"reveal card-exclusive rounded-none flex flex-col h-full p-8 md:p-10\" style=\"transition-delay: 100ms;\">\r\n                <div class=\"mb-8 text-center\">\r\n                    <h3 class=\"text-[var(--gray-medium)] text-[10px] font-bold tracking-[0.3em] uppercase mb-2\">Plan<\/h3>\r\n                    <h2 class=\"text-2xl font-bold uppercase tracking-widest\">START<\/h2>\r\n                <\/div>\r\n\r\n                <div class=\"mb-8 text-center border-y border-[var(--gray-dark)] py-8\">\r\n                    <span class=\"text-4xl font-light text-white\">Desde $399<\/span>\r\n                    <span class=\"text-[var(--gray-soft)] text-[9px] block mt-2 uppercase tracking-widest\">MXN \/ Mes<\/span>\r\n                <\/div>\r\n\r\n                <ul class=\"space-y-4 mb-10 flex-grow\">\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a 4 sucursales: Pradera, Campestre, Egipto, Naciones.\r\n                    <\/li><li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a \u00e1rea de cardio y pesas.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Evaluaci\u00f3n inicial b\u00e1sica.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> 8 rutinas de entrenamiento general.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Uso de vestidores.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a 54 clases semanales.\r\n                    <\/li>\r\n                <\/ul>\r\n\r\n                <button class=\"w-full py-4 bg-transparent border border-white text-white hover:bg-white hover:text-black transition-all duration-300 text-[10px] font-bold uppercase tracking-[0.2em]\">\r\n                    <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce-start\/\" class=\"btn-link\">Solicitar Acceso<\/a>\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <div class=\"reveal card-exclusive featured-card rounded-none flex flex-col h-full p-8 md:p-10\" style=\"transition-delay: 200ms;\">\r\n                <div class=\"absolute top-0 right-0 bg-white text-black text-[9px] font-bold px-4 py-1 uppercase tracking-widest\">\r\n                    RECOMENDADO\r\n                <\/div>\r\n                \r\n                <div class=\"mb-8 text-center\">\r\n                    <h3 class=\"text-[var(--gray-light)] text-[10px] font-bold tracking-[0.3em] uppercase mb-2\">Membres\u00eda<\/h3>\r\n                    <h2 class=\"text-2xl font-bold uppercase tracking-widest\">TOTAL<\/h2>\r\n                <\/div>\r\n\r\n                <div class=\"mb-8 text-center border-y border-white py-8 bg-[var(--gray-dark)]\/20\">\r\n                    <span class=\"text-5xl font-bold text-white\">Desde $999<\/span>\r\n                    <span class=\"text-white text-[9px] block mt-2 uppercase tracking-widest font-bold\">MXN \/ MES<\/span>\r\n                <\/div>\r\n\r\n                <ul class=\"space-y-4 mb-10 flex-grow\">\r\n                    <li class=\"flex items-center gap-3 text-white text-sm font-semibold\">\r\n                        <span class=\"w-2 h-2 bg-white rotate-45\"><\/span> Acceso a todas las sucursales.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Acceso total a clases grupales.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Acceso a alberca.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> 20 daypass con valor a $2000.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Evaluaci\u00f3n f\u00edsica + seguimiento continuo.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Rutinas personalizadas avanzadas.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Acompa\u00f1amiento prioritario en piso.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Acceso preferencial a eventos \/ retos.\r\n                    <\/li><li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-white rounded-full\"><\/span> Uso completo de instalaciones.\r\n                    <\/li>\r\n                <\/ul>\r\n\r\n                <button class=\"w-full py-4 bg-white text-black hover:bg-[var(--gray-light)] transition-all duration-300 text-[10px] font-bold uppercase tracking-[0.2em]\">\r\n                    <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce-total\/\" class=\"btn-link\">Solicitar Acceso<\/a>\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <div class=\"reveal card-exclusive rounded-none flex flex-col h-full p-8 md:p-10\" style=\"transition-delay: 300ms;\">\r\n                <div class=\"mb-8 text-center\">\r\n                    <h3 class=\"text-[var(--gray-medium)] text-[10px] font-bold tracking-[0.3em] uppercase mb-2\">Plan<\/h3>\r\n                    <h2 class=\"text-2xl font-bold uppercase tracking-widest\">PRO<\/h2>\r\n                <\/div>\r\n\r\n                <div class=\"mb-8 text-center border-y border-[var(--gray-dark)] py-8\">\r\n                    <span class=\"text-4xl font-light text-white\">Desde $499<\/span>\r\n                    <span class=\"text-[var(--gray-soft)] text-[9px] block mt-2 uppercase tracking-widest\">MXN \/ Mes<\/span>\r\n                <\/div>\r\n\r\n                <ul class=\"space-y-4 mb-10 flex-grow\">\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a 14 sucursales.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> 3 Acceso total a \u00e1rea de cardio y pesas.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a clases grupales.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Evaluaci\u00f3n f\u00edsica + seguimiento mensual.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Rutinas personalizadas.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Evaluaci\u00f3n InBody.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acompa\u00f1amiento de entrenador de piso.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a vestidores y regaderas.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> 10 daypass con valor a $1000.\r\n                    <\/li>\r\n                     <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a 274 clases semanales.\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3 text-[var(--gray-light)] text-sm\">\r\n                        <span class=\"w-1.5 h-1.5 bg-[var(--gray-medium)] rounded-full\"><\/span> Acceso a super clases y eventos especiales.\r\n                    <\/li>\r\n                <\/ul>\r\n\r\n                <button class=\"w-full py-4 bg-transparent border border-white text-white hover:bg-white hover:text-black transition-all duration-300 text-[10px] font-bold uppercase tracking-[0.2em]\">\r\n                    <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce-pro\/\" class=\"btn-link\">Solicitar Acceso<\/a>\r\n                <\/button>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const reveal = () => {\r\n            const reveals = document.querySelectorAll('.reveal');\r\n            reveals.forEach(el => {\r\n                const windowHeight = window.innerHeight;\r\n                const elementTop = el.getBoundingClientRect().top;\r\n                if (elementTop < windowHeight - 100) {\r\n                    el.classList.add('active');\r\n                }\r\n            });\r\n        };\r\n        window.addEventListener('scroll', reveal);\r\n        window.onload = reveal;\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dc914c5 e-con-full e-flex e-con e-parent\" data-id=\"dc914c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ecf690f elementor-widget elementor-widget-html\" data-id=\"ecf690f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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\">\n    <style>\n        :root {\n            --white: #ffffff;\n            --black: #000000;\n            --gray-light: #ADACB1;\n            --ruta-amarillo: #FFD700;\n            --ruta-azul: #007BFF;\n            --ruta-rosa: #FF007F;\n            --transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n        }\n\n        #class-slider-section {\n            position: relative;\n            width: 100%;\n            height: 850px;\n            background-color: var(--black);\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            font-family: 'Montserrat', sans-serif;\n        }\n\n        .bg-layer {\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            background-size: cover;\n            background-position: center;\n            filter: grayscale(1) brightness(0.2);\n            opacity: 0;\n            transition: opacity 1.5s ease-in-out;\n            z-index: 1;\n        }\n        .bg-layer.active { opacity: 1; }\n\n        .content-wrapper {\n            position: relative;\n            z-index: 10;\n            display: flex;\n            width: 100%;\n            max-width: 1300px;\n            margin: 0 auto;\n            padding: 0 50px;\n            gap: 60px;\n            align-items: center;\n        }\n\n        .navigation-panel { flex: 1.2; position: relative; }\n        \n        .category-item { margin-bottom: 12px; }\n\n        .category-title {\n            font-size: 50px;\n            font-weight: 800;\n            color: rgba(255, 255, 255, 0.2);\n            text-transform: uppercase;\n            cursor: pointer;\n            transition: var(--transition);\n            letter-spacing: -2px;\n            line-height: 1;\n        }\n\n        .category-item.open .category-title {\n            color: var(--white);\n            transform: translateX(15px);\n        }\n\n        .sub-classes {\n            max-height: 0;\n            overflow: hidden;\n            list-style: none;\n            padding: 0;\n            margin: 0 0 0 25px;\n            transition: max-height 0.5s ease-out, margin 0.3s;\n        }\n\n        .category-item.open .sub-classes { \n            max-height: 400px; \n            margin-top: 15px;\n            margin-bottom: 20px;\n        }\n\n        .sub-class-item {\n            font-size: 14px;\n            color: var(--gray-light);\n            padding: 8px 0;\n            cursor: pointer;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            transition: 0.3s;\n            opacity: 0.6;\n        }\n\n        .sub-class-item:hover, .sub-class-item.active {\n            color: var(--white);\n            opacity: 1;\n            padding-left: 10px;\n        }\n\n        \/* BOT\u00d3N PLAY SUTIL *\/\n        .play-control {\n            margin-top: 30px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            cursor: pointer;\n            opacity: 0;\n            visibility: hidden;\n            transition: 0.5s;\n            color: var(--gray-light);\n            font-size: 10px;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n        }\n\n        .play-control.visible {\n            opacity: 0.6;\n            visibility: visible;\n        }\n\n        .play-control:hover { opacity: 1; color: var(--white); }\n\n        .play-icon {\n            width: 30px;\n            height: 30px;\n            border: 1px solid currentColor;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n        }\n\n        \/* Tri\u00e1ngulo del Play *\/\n        .play-icon::after {\n            content: '';\n            width: 0; height: 0;\n            border-style: solid;\n            border-width: 5px 0 5px 8px;\n            border-color: transparent transparent transparent currentColor;\n            margin-left: 3px;\n        }\n\n        .info-panel {\n            flex: 0 0 450px;\n            background: rgba(10, 10, 10, 0.9);\n            border: 1px solid rgba(255,255,255,0.1);\n            border-radius: 20px;\n            overflow: hidden;\n            min-height: 500px;\n            display: flex;\n            flex-direction: column;\n            backdrop-filter: blur(10px);\n        }\n\n        .card-color-bar {\n            height: 4px;\n            width: 100%;\n            background: transparent;\n            transition: background 0.6s ease;\n        }\n\n        .card-body { padding: 45px; color: var(--white); flex-grow: 1; display: flex; flex-direction: column; }\n        .card-body h4 { font-size: 10px; letter-spacing: 4px; color: var(--gray-light); text-transform: uppercase; margin-bottom: 15px; }\n        .card-body h3 { font-size: 34px; font-weight: 900; margin-bottom: 20px; text-transform: uppercase; line-height: 1; }\n        .card-body p { font-size: 15px; line-height: 1.6; font-weight: 300; color: #ccc; margin-bottom: 30px; }\n\n        .stats-row {\n            display: flex; gap: 20px; border-top: 1px solid rgba(255,255,255,0.1);\n            padding-top: 20px; margin-top: auto; margin-bottom: 25px;\n        }\n\n        .stat-item span { display: block; font-size: 9px; text-transform: uppercase; color: var(--gray-light); margin-bottom: 4px; }\n        .stat-item strong { font-size: 13px; color: var(--white); }\n\n        .btn-clase {\n            display: block; width: 100%; padding: 15px; border: 1px solid var(--white);\n            color: var(--white); text-decoration: none; font-weight: 700; font-size: 11px;\n            text-transform: uppercase; letter-spacing: 2px; text-align: center; transition: 0.3s;\n        }\n        .btn-clase:hover { background: var(--white); color: var(--black); }\n\n        @media (max-width: 992px) {\n            #class-slider-section { height: auto; padding: 60px 0; }\n            .content-wrapper { flex-direction: column; }\n            .info-panel { flex: 1; width: 100%; min-height: auto; }\n            .category-title { font-size: 32px; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<section id=\"class-slider-section\">\n    <div id=\"bg-harmonia\" class=\"bg-layer active\" style=\"background-image: url('https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/05\/IMG-20250510-WA0021.jpg');\"><\/div>\n    <div id=\"bg-rhytmos\" class=\"bg-layer\" style=\"background-image: url('https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/05\/IMG-20250510-WA0028.jpg');\"><\/div>\n    <div id=\"bg-cyclum\" class=\"bg-layer\" style=\"background-image: url('https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/05\/IMG-20250512-WA0003.jpg');\"><\/div>\n    <div id=\"bg-hayla\" class=\"bg-layer\" style=\"background-image: url('https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/05\/IMG-20250510-WA0024.jpg');\"><\/div>\n    <div id=\"bg-impulsus\" class=\"bg-layer\" style=\"background-image: url('https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/RAW_1294-scaled.jpg');\"><\/div>\n\n    <div class=\"content-wrapper\">\n        <div class=\"navigation-panel\">\n            <div class=\"category-item\" id=\"cat-harmonia\">\n                <div class=\"category-title\" onclick=\"manualSelect('harmonia')\">Harmonia<\/div>\n                <ul class=\"sub-classes\">\n                    <li class=\"sub-class-item\" onclick=\"selectClass('yoga')\">Yoga<\/li>\n                    <li class=\"sub-class-item\" onclick=\"selectClass('pilates')\">Pilates<\/li>\n                    <li class=\"sub-class-item\" onclick=\"selectClass('balance')\">Balance<\/li>\n                    <li class=\"sub-class-item\" onclick=\"selectClass('gap')\">GAP<\/li>\n                <\/ul>\n            <\/div>\n\n            <div class=\"category-item\" id=\"cat-rhytmos\">\n                <div class=\"category-title\" onclick=\"manualSelect('rhytmos')\">Rhytmos<\/div>\n                <ul class=\"sub-classes\">\n                    <li class=\"sub-class-item\" onclick=\"selectClass('zumba')\">Zumba \/ Sdance<\/li>\n                <\/ul>\n            <\/div>\n\n            <div class=\"category-item\" id=\"cat-cyclum\">\n                <div class=\"category-title\" onclick=\"manualSelect('cyclum')\">Cyclum<\/div>\n                <ul class=\"sub-classes\">\n                    <li class=\"sub-class-item\" onclick=\"selectClass('sbike')\">Sbike \/ Spinning<\/li>\n                <\/ul>\n            <\/div>\n\n            <div class=\"category-item\" id=\"cat-hayla\">\n                <div class=\"category-title\" onclick=\"manualSelect('hayla')\">Hayla<\/div>\n                <ul class=\"sub-classes\">\n                    <li class=\"sub-class-item\" onclick=\"selectClass('box')\">Box<\/li>\n                    <li class=\"sub-class-item\" onclick=\"selectClass('funcional')\">Scross \/ Funcional<\/li>\n                <\/ul>\n            <\/div>\n\n            <div class=\"category-item\" id=\"cat-impulsus\">\n                <div class=\"category-title\" onclick=\"manualSelect('impulsus')\">Impulsus<\/div>\n                <ul class=\"sub-classes\">\n                    <li class=\"sub-class-item\" onclick=\"selectClass('combat')\">Combat<\/li>\n                    <li class=\"sub-class-item\" onclick=\"selectClass('hiit')\">HIIT \/ Strong<\/li>\n                <\/ul>\n            <\/div>\n\n            <div id=\"btn-play\" class=\"play-control\" onclick=\"resumeAutoPlay()\">\n                <div class=\"play-icon\"><\/div>\n                <span>Continuar Ruta<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"info-panel\" id=\"main-panel\">\n            <div class=\"card-color-bar\" id=\"card-bar\"><\/div>\n            <div class=\"card-body\">\n                <h4 id=\"card-segment\">Ruta Sportica<\/h4>\n                <h3 id=\"card-title\">HARMONIA<\/h3>\n                <p id=\"card-desc\">Cargando...<\/p>\n                <div id=\"card-stats\" class=\"stats-row\" style=\"display: none;\">\n                    <div class=\"stat-item\"><span>Sal\u00f3n<\/span><strong id=\"stat-salon\">-<\/strong><\/div>\n                    <div class=\"stat-item\"><span>Quema<\/span><strong id=\"stat-cal\">-<\/strong><\/div>\n                <\/div>\n                <a href=\"https:\/\/mx.fiti.app\/Sportica\/6\/page\/landing-page\/login\" class=\"btn-clase\">Ver horarios<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n    const classIds = ['harmonia', 'rhytmos', 'cyclum', 'hayla', 'impulsus'];\n    let currentIndex = 0;\n    let autoPlayInterval;\n    let isPaused = false;\n\n    const categoryData = {\n        'harmonia': { title: 'HARMONIA', desc: 'Clases grupales enfocadas en el bienestar y el fortalecimiento; mejoran la flexibilidad, postura y tono muscular.' },\n        'rhytmos': { title: 'RHYTMOS', desc: 'Es una manera divertida de hacer ejercicio bailando mientras quemas calor\u00edas al ritmo de la m\u00fasica.' },\n        'cyclum': { title: 'CYCLUM', desc: 'Ciclismo indoor guiado por instructor. Trabajas principalmente cardio y piernas regulando tu propia intensidad.' },\n        'hayla': { title: 'HAYLA', desc: 'Entrenamiento en grupo de fuerza intensa, similar a pesas pero en formato din\u00e1mico y guiado.' },\n        'impulsus': { title: 'IMPULSUS', desc: 'Clases ideales para quemar calor\u00edas y liberar energ\u00eda a m\u00e1xima intensidad.' }\n    };\n\n    const specificClassData = {\n        'yoga': { title: 'Yoga', segment: 'Harmonia', bar: '#FFD700', salon: 'Cuerpo\/Mente', cal: '400-500 Cal' },\n        'pilates': { title: 'Pilates', segment: 'Harmonia', bar: '#007BFF', salon: 'Cuerpo\/Mente', cal: 'Hasta 400 Cal' },\n        'sbike': { title: 'Sbike \/ Spinning', segment: 'Cyclum', bar: 'linear-gradient(to right, #FFD700, #007BFF)', salon: 'Ciclismo', cal: '400-500 Cal' },\n        'zumba': { title: 'Zumba', segment: 'Rhytmos', bar: '#FFD700', salon: 'Social', cal: 'Hasta 500 Cal' },\n        'box': { title: 'Box', segment: 'Hayla', bar: 'linear-gradient(to right, #FFD700, #007BFF, #FF007F)', salon: 'Sudor\/Fuerza', cal: 'Promedio 600 Cal' },\n        'combat': { title: 'Combat', segment: 'Impulsus', bar: '#FF007F', salon: 'Sudor', cal: 'Hasta 800 Cal' },\n        'hiit': { title: 'HIIT \/ Strong', segment: 'Impulsus', bar: 'linear-gradient(to right, #007BFF, #FF007F)', salon: 'Sudor', cal: '600+ Cal' },\n        'funcional': { title: 'Funcional', segment: 'Hayla', bar: '#FFD700', salon: 'Sudor\/Fuerza', cal: '500-600 Cal' },\n        'gap': { title: 'GAP', segment: 'Harmonia', bar: '#007BFF', salon: 'Cuerpo\/Mente', cal: 'Hasta 450 Cal' },\n        'balance': { title: 'Balance', segment: 'Harmonia', bar: 'linear-gradient(to right, #FFD700, #007BFF)', salon: 'Cuerpo\/Mente', cal: '400-500 Cal' }\n    };\n\n    function updateSlider(id) {\n        document.querySelectorAll('.bg-layer').forEach(l => l.classList.remove('active'));\n        document.getElementById(`bg-${id}`).classList.add('active');\n\n        document.querySelectorAll('.category-item').forEach(item => {\n            item.classList.remove('open');\n            if(item.id === `cat-${id}`) item.classList.add('open');\n        });\n\n        document.getElementById('card-bar').style.background = 'transparent';\n        document.getElementById('card-stats').style.display = 'none';\n        document.getElementById('card-segment').innerText = 'Ruta Sportica';\n        document.getElementById('card-title').innerText = categoryData[id].title;\n        document.getElementById('card-desc').innerText = categoryData[id].desc;\n        \n        document.querySelectorAll('.sub-class-item').forEach(li => li.classList.remove('active'));\n    }\n\n    function selectClass(className) {\n        pauseAutoPlay(); \/\/ Pausamos cuando el usuario elige algo espec\u00edfico\n        const data = specificClassData[className];\n        if(!data) return;\n\n        document.getElementById('card-bar').style.background = data.bar;\n        document.getElementById('card-segment').innerText = data.segment;\n        document.getElementById('card-title').innerText = data.title;\n        document.getElementById('card-desc').innerText = \"Objetivo principal: Entrenamiento din\u00e1mico enfocado en resultados.\";\n        document.getElementById('card-stats').style.display = 'flex';\n        document.getElementById('stat-salon').innerText = data.salon;\n        document.getElementById('stat-cal').innerText = data.cal;\n\n        document.querySelectorAll('.sub-class-item').forEach(li => li.classList.remove('active'));\n        event.target.classList.add('active');\n    }\n\n    function manualSelect(id) {\n        pauseAutoPlay();\n        currentIndex = classIds.indexOf(id);\n        updateSlider(id);\n    }\n\n    function nextSlide() {\n        if (!isPaused) {\n            currentIndex = (currentIndex + 1) % classIds.length;\n            updateSlider(classIds[currentIndex]);\n        }\n    }\n\n    function startAutoPlay() {\n        autoPlayInterval = setInterval(nextSlide, 5000);\n    }\n\n    function pauseAutoPlay() {\n        isPaused = true;\n        document.getElementById('btn-play').classList.add('visible');\n    }\n\n    function resumeAutoPlay() {\n        isPaused = false;\n        document.getElementById('btn-play').classList.remove('visible');\n        nextSlide(); \/\/ Avanza inmediatamente al retomar\n    }\n\n    window.onload = () => {\n        updateSlider(classIds[0]);\n        startAutoPlay();\n    };\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14571cb e-flex e-con-boxed e-con e-parent\" data-id=\"14571cb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation_mobile&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a06e883 elementor-widget elementor-widget-html\" data-id=\"a06e883\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"trainers-section\">\n    <div class=\"container\">\n        <div class=\"section-intro\">\n            <span class=\"subtitle\">EXPERTS<\/span>\n            <h2 class=\"main-title\" style=\"color: #000000 !important;\">ENTRENADORES <span>TOP<\/span><\/h2>\n            <div class=\"line-divider\"><\/div>\n        <\/div>\n\n        <div class=\"trainers-grid\">\n            <div class=\"trainer-card\">\n                <a href=\"https:\/\/sporticamx.com\/index.php\/entrenamiento-personal\/\" class=\"trainer-link\">\n                    <div class=\"trainer-img-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/IMG_20260420_123945.png\" alt=\"Carlos Rivera - HIIT Head Coach\">\n                        <div class=\"trainer-overlay\">\n                            <p class=\"specialty\">HIIT & CARDIO<\/p>\n                            <p class=\"quote\">\"El l\u00edmite lo pones t\u00fa, el camino lo trazamos juntos.\"<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"trainer-info\">\n                        <h3>Head Coach<\/h3>\n                        <span>Especialista HIIT<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n\n            <div class=\"trainer-card\">\n                <a href=\"https:\/\/sporticamx.com\/index.php\/entrenamiento-personal\/\" class=\"trainer-link\">\n                    <div class=\"trainer-img-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/IMG_20260420_122205.png\" alt=\"Ana Mart\u00ednez - Power Master Trainer\">\n                        <div class=\"trainer-overlay\">\n                            <p class=\"specialty\">POWER LIFTING<\/p>\n                            <p class=\"quote\">\"Fuerza real, resultados reales.\"<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"trainer-info\">\n                        <h3>Master Trainer<\/h3>\n                        <span>Fuerza y Potencia<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n\n            <div class=\"trainer-card\">\n                <a href=\"https:\/\/sporticamx.com\/index.php\/entrenamiento-personal\/\" class=\"trainer-link\">\n                    <div class=\"trainer-img-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/IMG_20260420_123702.png\" alt=\"Daniel Soto - Wellness Coach\">\n                        <div class=\"trainer-overlay\">\n                            <p class=\"specialty\">YOGA & BALANCE<\/p>\n                            <p class=\"quote\">\"Controla tu respiraci\u00f3n, domina tu cuerpo.\"<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"trainer-info\">\n                        <h3>Wellness Coach<\/h3>\n                        <span>Bienestar Integral<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    #trainers-section {\n        background-color: #ffffff;\n        padding: 100px 50px;\n        font-family: 'Montserrat', sans-serif;\n    }\n\n    .container {\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    .section-intro {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n\n    .subtitle {\n        color: #ADACB1;\n        letter-spacing: 5px;\n        font-size: 12px;\n        text-transform: uppercase;\n    }\n\n    .main-title {\n        font-size: 36px;\n        font-weight: 900;\n        margin: 10px 0;\n        letter-spacing: -1px;\n    }\n\n    .main-title span {\n        color: #ADACB1 !important;\n    }\n\n    .line-divider {\n        width: 60px;\n        height: 2px;\n        background: #000;\n        margin: 20px auto;\n    }\n\n    .trainers-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px;\n    }\n\n    .trainer-card {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .trainer-link {\n        text-decoration: none;\n        color: inherit;\n        display: block;\n    }\n\n    .trainer-img-wrapper {\n        position: relative;\n        height: 450px;\n        overflow: hidden;\n        background: #f0f0f0;\n    }\n\n    \/* ESTADO INICIAL: Blanco y Negro *\/\n    .trainer-img-wrapper img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        filter: grayscale(1) brightness(0.8);\n        transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n\n    .trainer-overlay {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        padding: 30px;\n        opacity: 0;\n        transition: opacity 0.4s ease;\n    }\n\n    .specialty {\n        color: #ffffff;\n        font-weight: 700;\n        letter-spacing: 3px;\n        font-size: 11px;\n        margin-bottom: 8px;\n    }\n\n    .quote {\n        color: #ADACB1;\n        font-style: italic;\n        font-size: 14px;\n        line-height: 1.4;\n    }\n\n    \/* HOVER EFFECTS: Transformaci\u00f3n a Color y Zoom *\/\n    .trainer-card:hover .trainer-img-wrapper img {\n        filter: grayscale(0) brightness(1) !important;\n        transform: scale(1.1);\n    }\n\n    .trainer-card:hover .trainer-overlay {\n        opacity: 1;\n    }\n\n    .trainer-info {\n        padding: 15px 0;\n        border-bottom: 1px solid #e0e0e0;\n        transition: 0.3s;\n    }\n\n    .trainer-info h3 {\n        font-size: 16px;\n        margin: 0;\n        font-weight: 800;\n        letter-spacing: 1px;\n        color: #000;\n    }\n\n    .trainer-info span {\n        font-size: 11px;\n        color: #ADACB1;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n    }\n\n    .trainer-card:hover .trainer-info {\n        border-bottom-color: #000;\n    }\n\n    @media (max-width: 600px) {\n        .trainers-grid {\n            grid-template-columns: 1fr;\n        }\n        .trainer-img-wrapper { height: 350px; }\n    }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d74207f e-flex e-con-boxed e-con e-parent\" data-id=\"d74207f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1a89d2 elementor-widget elementor-widget-html\" data-id=\"a1a89d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"app-sportica-section\">\r\n    <div class=\"container-app\">\r\n        <div class=\"app-content-grid\">\r\n            \r\n            <div class=\"app-visual\">\r\n                <div class=\"phone-wrapper\">\r\n                    <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/IMG_20260420_232651.png\">\r\n                <\/div>\r\n                <div class=\"decorative-circle\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"app-info\">\r\n                <span class=\"app-subtitle\">TU GIMNASIO EN TU MANO<\/span>\r\n                <h2 class=\"app-title\">EXPERIENCIA <span>DIGITAL<\/span><\/h2>\r\n                <div class=\"app-line\"><\/div>\r\n                \r\n                <p class=\"app-description\">\r\n                    Lleva tu entrenamiento al siguiente nivel. Con nuestra App oficial, integrada con nuestro sistema de gesti\u00f3n, tienes el control total de tu progreso.\r\n                <\/p>\r\n\r\n                <ul class=\"app-features\">\r\n                    <li>\r\n                        <span class=\"icon\">\u25cf<\/span>\r\n                        <div>\r\n                            <strong>Reserva de Clases<\/strong>\r\n                            <p>Asegura tu lugar en tus clases favoritas desde cualquier lugar.<\/p>\r\n                        <\/div>\r\n                    <\/li>\r\n                    <li>\r\n                        <span class=\"icon\">\u25cf<\/span>\r\n                        <div>\r\n                            <strong>Rutinas Personalizadas<\/strong>\r\n                            <p>Visualiza tus planes de entrenamiento dise\u00f1ados por nuestros coaches.<\/p>\r\n                        <\/div>\r\n                    <\/li>\r\n                    <li>\r\n                        <span class=\"icon\">\u25cf<\/span>\r\n                        <div>\r\n                            <strong>Pagos y Membres\u00edas<\/strong>\r\n                            <p>Gestiona tus suscripciones de forma r\u00e1pida y segura.<\/p>\r\n                        <\/div>\r\n                    <\/li>\r\n                <\/ul>\r\n\r\n                <div class=\"app-buttons\">\r\n                    <a href=\"https:\/\/apps.apple.com\/mx\/app\/sportica\/id6476713065\" class=\"btn-store\">App Store<\/a>\r\n                    <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=br.com.w12.sportica&pcampaignid=web_share%20\" class=\"btn-store outline\">Google Play<\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    #app-sportica-section {\r\n        background-color: #E3E3E3; \/* Gris Claro de tu paleta oficial *\/\r\n        padding: 120px 50px;\r\n        font-family: 'Montserrat', sans-serif;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .container-app {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .app-content-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1.2fr;\r\n        gap: 80px;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Lado Visual *\/\r\n    .app-visual {\r\n        position: relative;\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    .phone-wrapper {\r\n        position: relative;\r\n        z-index: 2;\r\n        width: 320px;\r\n        height: 600px;\r\n        border-radius: 40px;\r\n        overflow: hidden;\r\n        box-shadow: 0 30px 60px rgba(0,0,0,0.2);\r\n        border: 8px solid #000;\r\n    }\r\n\r\n    .phone-wrapper img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .decorative-circle {\r\n        position: absolute;\r\n        width: 500px;\r\n        height: 500px;\r\n        background: #ffffff;\r\n        border-radius: 50%;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* Lado Informaci\u00f3n *\/\r\n    .app-subtitle {\r\n        color: #747476; \/* Gris Medio oficial *\/\r\n        letter-spacing: 4px;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .app-title {\r\n        font-size: 45px;\r\n        font-weight: 900;\r\n        margin: 15px 0;\r\n        color: #000;\r\n        line-height: 1.1;\r\n    }\r\n\r\n    .app-title span {\r\n        color: #ADACB1; \/* Gris Suave oficial *\/\r\n    }\r\n\r\n    .app-line {\r\n        width: 50px;\r\n        height: 4px;\r\n        background: #000;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .app-description {\r\n        font-size: 17px;\r\n        color: #434533; \/* Gris Obscuro oficial *\/\r\n        line-height: 1.6;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .app-features {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin-bottom: 45px;\r\n    }\r\n\r\n    .app-features li {\r\n        display: flex;\r\n        gap: 20px;\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    .app-features li .icon {\r\n        color: #000;\r\n        font-size: 18px;\r\n        margin-top: 2px;\r\n    }\r\n\r\n    .app-features li strong {\r\n        display: block;\r\n        font-size: 16px;\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .app-features li p {\r\n        font-size: 14px;\r\n        color: #747476;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* Botones *\/\r\n    .app-buttons {\r\n        display: flex;\r\n        gap: 15px;\r\n    }\r\n\r\n    .btn-store {\r\n        background: #000;\r\n        color: #fff;\r\n        padding: 15px 35px;\r\n        text-decoration: none;\r\n        font-weight: 700;\r\n        font-size: 12px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .btn-store.outline {\r\n        background: transparent;\r\n        border: 2px solid #000;\r\n        color: #000;\r\n    }\r\n\r\n    .btn-store:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    \/* Responsivo *\/\r\n    @media (max-width: 992px) {\r\n        .app-content-grid {\r\n            grid-template-columns: 1fr;\r\n            text-align: center;\r\n            gap: 60px;\r\n        }\r\n        .app-visual { order: 2; }\r\n        .app-info { order: 1; }\r\n        .app-line { margin: 0 auto 30px; }\r\n        .app-features li { text-align: left; }\r\n        .app-buttons { justify-content: center; }\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fafc6bf e-flex e-con-boxed e-con e-parent\" data-id=\"fafc6bf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b077ce elementor-widget elementor-widget-html\" data-id=\"8b077ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section id=\"testimonials-section\">\r\n    <div class=\"container-testimonials\">\r\n        <div class=\"testimonial-header\">\r\n            <span class=\"test-subtitle\">COMUNIDAD<\/span>\r\n            <h2 class=\"test-title\">CASOS DE <span>\u00c9XITO<\/span><\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"testimonials-slider\">\r\n            <div class=\"testimonial-item\">\r\n                <span class=\"quote-mark\">\u201c<\/span>\r\n                <p class=\"test-text\">\r\n                    Llevo 6 meses en Sportica y el cambio no solo ha sido f\u00edsico, sino mental. La calidad de los entrenadores y la facilidad de la App para mis reservas lo hacen \u00fanico.\r\n                <\/p>\r\n                <div class=\"test-user\">\r\n                    <span class=\"user-line\"><\/span>\r\n                    <div class=\"user-info\">\r\n                        <strong>RODRIGO HERN\u00c1NDEZ<\/strong>\r\n                        <span>Socio Sportica Aeropuerto<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"testimonial-item\">\r\n                <span class=\"quote-mark\">\u201c<\/span>\r\n                <p class=\"test-text\">\r\n                    Las clases son de otro nivel. El ambiente que se vive en el club te motiva a dar el 100% en cada entrenamiento. \u00a1Totalmente recomendado!\r\n                <\/p>\r\n                <div class=\"test-user\">\r\n                    <span class=\"user-line\"><\/span>\r\n                    <div class=\"user-info\">\r\n                        <strong>MAR\u00cdA FERNANDA<\/strong>\r\n                        <span>Socio Sportica Coacalco<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    #testimonials-section {\r\n        background-color: #ffffff;\r\n        padding: 120px 50px;\r\n        font-family: 'Montserrat', sans-serif;\r\n        border-bottom: 1px solid #E3E3E3;\r\n    }\r\n\r\n    .container-testimonials {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .testimonial-header {\r\n        text-align: left;\r\n        margin-bottom: 80px;\r\n    }\r\n\r\n    .test-subtitle {\r\n        color: #ADACB1; \/* Gris Suave oficial *\/\r\n        letter-spacing: 5px;\r\n        font-size: 12px;\r\n        text-transform: uppercase;\r\n        display: block;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .test-title {\r\n        font-size: 40px;\r\n        font-weight: 900;\r\n        letter-spacing: -1px;\r\n        color: #000;\r\n        margin: 0;\r\n    }\r\n\r\n    .test-title span {\r\n        color: #ADACB1;\r\n    }\r\n\r\n    .testimonials-slider {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr; \/* Dos testimonios en l\u00ednea *\/\r\n        gap: 100px;\r\n    }\r\n\r\n    .testimonial-item {\r\n        position: relative;\r\n    }\r\n\r\n    .quote-mark {\r\n        font-family: serif;\r\n        font-size: 80px;\r\n        color: #E3E3E3; \/* Gris Claro para que sea sutil *\/\r\n        position: absolute;\r\n        top: -40px;\r\n        left: -10px;\r\n        z-index: 0;\r\n    }\r\n\r\n    .test-text {\r\n        font-size: 20px;\r\n        line-height: 1.6;\r\n        color: #434533; \/* Gris Obscuro oficial *\/\r\n        font-weight: 400;\r\n        font-style: italic;\r\n        position: relative;\r\n        z-index: 1;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .test-user {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n    }\r\n\r\n    .user-line {\r\n        width: 30px;\r\n        height: 2px;\r\n        background: #000;\r\n    }\r\n\r\n    .user-info strong {\r\n        display: block;\r\n        font-size: 14px;\r\n        font-weight: 800;\r\n        letter-spacing: 1px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .user-info span {\r\n        font-size: 12px;\r\n        color: #ADACB1;\r\n    }\r\n\r\n    \/* Ajuste para m\u00f3viles *\/\r\n    @media (max-width: 768px) {\r\n        #testimonials-section { padding: 80px 20px; }\r\n        .testimonials-slider { grid-template-columns: 1fr; gap: 60px; }\r\n        .test-title { font-size: 32px; }\r\n        .test-text { font-size: 18px; }\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d7a4ee1 e-flex e-con-boxed e-con e-parent\" data-id=\"d7a4ee1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-679f40e elementor-widget elementor-widget-html\" data-id=\"679f40e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* 1. CONFIGURACI\u00d3N DE ANCHO COMPLETO (FULL WIDTH) *\/\r\n    #footer-prestige {\r\n        background-color: #ffffff; \/* Mantenemos el fondo blanco limpio *\/\r\n        color: #000000;\r\n        font-family: 'Montserrat', sans-serif;\r\n        padding: 80px 0 0 0;\r\n        border-top: 1px solid rgba(0, 0, 0, 0.05);\r\n        width: 100vw;\r\n        position: relative;\r\n        left: 50%;\r\n        margin-left: -50vw;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* 2. GRID DE CONTENIDO (4 COLUMNAS) *\/\r\n    .footer-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n        gap: 50px;\r\n        max-width: 1300px;\r\n        margin: 0 auto;\r\n        padding: 0 5vw 60px 5vw;\r\n    }\r\n\r\n    \/* T\u00edtulos Estilo Minimalista *\/\r\n    .footer-title {\r\n        color: #000000;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        letter-spacing: 4px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    \/* Enlaces y Navegaci\u00f3n *\/\r\n    .footer-links { list-style: none; padding: 0; margin: 0; }\r\n    .footer-links li { margin-bottom: 15px; }\r\n    .footer-links a {\r\n        color: rgba(0, 0, 0, 0.6);\r\n        text-decoration: none;\r\n        font-size: 14px;\r\n        transition: 0.3s ease;\r\n    }\r\n    \/* Hover cambiado de Dorado a Negro para un look m\u00e1s sobrio *\/\r\n    .footer-links a:hover { color: #000000; padding-left: 5px; }\r\n\r\n    \/* Redes Sociales *\/\r\n    .social-links { display: flex; gap: 20px; margin: 25px 0; }\r\n    .social-icon { color: #000000; font-size: 18px; transition: 0.3s ease; }\r\n    \/* Hover sutil en gris oscuro *\/\r\n    .social-icon:hover { color: #747476; transform: translateY(-3px); }\r\n\r\n    \/* Bot\u00f3n de Acci\u00f3n *\/\r\n    .btn-cortesia-footer {\r\n        display: inline-block;\r\n        background: #000000;\r\n        color: #ffffff;\r\n        padding: 16px 35px;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        text-decoration: none;\r\n        transition: 0.3s ease;\r\n    }\r\n    \/* Hover cambiado de Dorado a Gris Oscuro *\/\r\n    .btn-cortesia-footer:hover { background: #2B2D33; color: #ffffff; }\r\n\r\n    \/* TABLA DE HORARIOS LIMPIA *\/\r\n    .horarios-table { \r\n        width: 100%; \r\n        font-size: 13px; \r\n        border-collapse: collapse; \r\n        border: none !important; \r\n    }\r\n\r\n    .horarios-table tr, \r\n    .horarios-table td { \r\n        border: none !important; \r\n        padding: 6px 0; \r\n    }\r\n\r\n    .day-label { \r\n        font-weight: 600; \r\n        text-transform: uppercase; \r\n        font-size: 11px; \r\n        letter-spacing: 1px; \r\n        color: #000000;\r\n    }\r\n\r\n    \/* El tiempo ahora en gris intermedio (sustituye al dorado) *\/\r\n    .time-label { \r\n        color: #747476; \r\n        text-align: right; \r\n        font-weight: 500; \r\n    }\r\n\r\n    \/* Secci\u00f3n de App y QR *\/\r\n    .qr-container {\r\n        background: white;\r\n        padding: 10px;\r\n        border-radius: 2px; \/* M\u00e1s cuadrado para el estilo minimalista *\/\r\n        width: 115px;\r\n        height: 115px;\r\n        border: 1px solid rgba(0, 0, 0, 0.08);\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    \/* 3. BARRA LEGAL Y COPYRIGHT *\/\r\n    .legal-bar {\r\n        background-color: #ffffff;\r\n        border-top: 1px solid rgba(0, 0, 0, 0.05);\r\n        padding: 40px 5vw;\r\n        text-align: center;\r\n    }\r\n\r\n    .legal-links { margin-bottom: 15px; }\r\n    .legal-links a {\r\n        color: rgba(0, 0, 0, 0.5);\r\n        text-decoration: none;\r\n        font-size: 12px;\r\n        margin: 0 12px;\r\n        transition: 0.3s;\r\n    }\r\n    \/* Hover legal en gris oscuro *\/\r\n    .legal-links a:hover { color: #000000; }\r\n\r\n    .copyright {\r\n        color: rgba(0, 0, 0, 0.4);\r\n        font-size: 10px;\r\n        letter-spacing: 2px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    \/* AJUSTES M\u00d3VILES *\/\r\n    @media (max-width: 768px) {\r\n        .footer-grid { text-align: center; }\r\n        .social-links { justify-content: center; }\r\n        .qr-container { margin: 0 auto 15px auto; }\r\n        .time-label { text-align: center; display: block; margin-top: 5px; }\r\n    }\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n<footer id=\"footer-prestige\">\r\n    <div class=\"footer-grid\">\r\n        <div class=\"branding-section\">\r\n            <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/04\/logo_nuevo_sportica_blanco_letras-sin-fondo.png\" style=\"height: 45px; filter: invert(1); margin-bottom: 25px;\">\r\n            <p style=\"font-size: 13px; color: rgba(0,0,0,0.5); line-height: 1.8;\">\r\n                Elevando el est\u00e1ndar del fitness en M\u00e9xico. Una experiencia dise\u00f1ada para la excelencia personal.\r\n            <\/p>\r\n            <div class=\"social-links\">\r\n                <a href=\"#\" class=\"social-icon\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n                <a href=\"#\" class=\"social-icon\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n                <a href=\"#\" class=\"social-icon\"><i class=\"fab fa-tiktok\"><\/i><\/a>\r\n            <\/div>\r\n            <a href=\"#\" class=\"btn-cortesia-footer\">Pase de Cortes\u00eda<\/a>\r\n        <\/div>\r\n\r\n        <div>\r\n            <h4 class=\"footer-title\">Explora<\/h4>\r\n            <ul class=\"footer-links\">\r\n                <li><a href=\"#\">Convenios Corporativos<\/a><\/li>\r\n                <li><a href=\"#\">Trabaja con nosotros<\/a><\/li>\r\n                <li><a href=\"#\">Nuestros Valores<\/a><\/li>\r\n                <li><a href=\"#\">Clases Fitness<\/a><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div>\r\n            <h4 class=\"footer-title\">Tu Club<\/h4>\r\n            <table class=\"horarios-table\">\r\n                <tr><td class=\"day-label\">Lunes a Viernes<\/td><td class=\"time-label\">06:00 - 23:00 hrs<\/td><\/tr>\r\n                <tr><td class=\"day-label\">S\u00e1bados<\/td><td class=\"time-label\">07:00 - 16:00 hrs<\/td><\/tr>\r\n                <tr><td class=\"day-label\">Domingos<\/td><td class=\"time-label\">08:00 - 16:00 hrs<\/td><\/tr>\r\n                <tr><td class=\"day-label\">D\u00edas Festivos<\/td><td class=\"time-label\">08:00 - 17:00 hrs<\/td><\/tr>\r\n            <\/table>\r\n        <\/div>\r\n\r\n        <div>\r\n            <h4 class=\"footer-title\">Descarga La App<\/h4>\r\n            <div class=\"qr-container\">\r\n                <img decoding=\"async\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=150x150&data=https:\/\/sporticamx.com\" style=\"width: 100%;\" alt=\"QR Sportica\">\r\n            <\/div>\r\n            <p style=\"font-size: 11px; color: rgba(0,0,0,0.4); font-style: italic; line-height: 1.5;\">\r\n                Escanea para acceder a tu plan de nutrici\u00f3n y check-in digital.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"legal-bar\">\r\n        <div class=\"legal-links\">\r\n            <a href=\"\/aviso-de-privacidad\">Aviso de Privacidad<\/a> | \r\n            <a href=\"\/politicas\">Pol\u00edticas<\/a>\r\n        <\/div>\r\n        <div class=\"copyright\">\r\n            Copyright \u00a9 2026 SPORTICA EXCLUSIVE. All rights reserved.\r\n        <\/div>\r\n    <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n    \/* Encapsulado para evitar colisiones con el men\u00fa o membres\u00edas *\/\r\n    (function() {\r\n        const initFooterPrestige = () => {\r\n            console.log(\"Footer Prestige v2.0 Cargado\");\r\n        };\r\n        window.addEventListener('load', initFooterPrestige);\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Sportica Exclusive Gym Clubes &#10094; AeropuertoCol. Federal, CDMX AztecaEcatepec, Edo Mex Arag\u00f3nGustavo A. Madero CampestreNezahualc\u00f3yotlCoacalcoPlaza Coacalco EchegarayNaucalpan, Edo Mex EgiptoBosques de Arag\u00f3n NacionesBosques de Arag\u00f3n Ocean\u00edaGustavo A. Madero PraderaLa Pradera, CDMX ViaductoCol. \u00c1lamos, CDMX CelayaCelaya, Guanajuato ArbideLe\u00f3n, Guanajuato PremierLe\u00f3n, Guanajuato &#10095; Membres\u00edas Clases Fitness Entrenadores personales Inbody Visita un club Encuentra hoy Navegaci\u00f3n Sportica Prestige [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-5820","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/5820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/comments?post=5820"}],"version-history":[{"count":1378,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/5820\/revisions"}],"predecessor-version":[{"id":24623,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/5820\/revisions\/24623"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=5820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}