{"id":22112,"date":"2026-02-16T13:40:48","date_gmt":"2026-02-16T19:40:48","guid":{"rendered":"https:\/\/sporticamx.com\/?page_id=22112"},"modified":"2026-04-20T20:27:01","modified_gmt":"2026-04-21T01:27:01","slug":"e-commerce-trimestral","status":"publish","type":"page","link":"https:\/\/sporticamx.com\/index.php\/e-commerce-trimestral\/","title":{"rendered":"e-commerce trimestral"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22112\" class=\"elementor elementor-22112\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40df65e e-flex e-con-boxed e-con e-parent\" data-id=\"40df65e\" 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-bf46525 elementor-widget elementor-widget-html\" data-id=\"bf46525\" 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>Sedes Prestige - Sportica Exclusive<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        body {\r\n            font-family: 'Montserrat', sans-serif;\r\n            background-color: #ffffff;\r\n            color: #000000;\r\n            margin: 0;\r\n        }\r\n\r\n        .custom-dropdown {\r\n            background: rgba(255, 255, 255, 0.98);\r\n            border: 1px solid rgba(0, 0, 0, 0.1);\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .custom-dropdown.open {\r\n            max-height: 800px;\r\n        }\r\n\r\n        .sede-item, .plan-item {\r\n            transition: all 0.3s ease;\r\n            border-left: 3px solid transparent;\r\n        }\r\n\r\n        .sede-item:hover, .plan-item:hover {\r\n            background: rgba(212, 175, 55, 0.05);\r\n            border-left: 3px solid #d4af37;\r\n            padding-left: 1.5rem;\r\n        }\r\n\r\n        #bg-preview {\r\n            transition: opacity 0.8s ease, transform 1.5s ease;\r\n            filter: brightness(90%) contrast(105%);\r\n        }\r\n\r\n        .disabled {\r\n            opacity: 0.3;\r\n            pointer-events: none;\r\n            filter: grayscale(1);\r\n        }\r\n\r\n        #sedes-list::-webkit-scrollbar, #plans-list::-webkit-scrollbar { width: 4px; }\r\n        #sedes-list::-webkit-scrollbar-thumb, #plans-list::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 10px; }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex flex-col items-center justify-center p-6 overflow-hidden\">\r\n\r\n    <div class=\"fixed inset-0 z-0 bg-stone-50\">\r\n        <img decoding=\"async\" id=\"bg-preview\" src=\"https:\/\/images.unsplash.com\/photo-1540497077202-7c8a3999166f?q=80&w=2000\" class=\"w-full h-full object-cover opacity-20\" alt=\"Vista Sede\">\r\n        <div class=\"absolute inset-0 bg-gradient-to-b from-white\/20 via-white\/40 to-white\/80\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"relative z-10 w-full max-w-4xl text-center\">\r\n        <img decoding=\"async\" src=\"https:\/\/sporticamx.com\/wp-content\/uploads\/2025\/04\/logo_nuevo_sportica_blanco_letras-sin-fondo.png\" class=\"h-12 mx-auto mb-8\" style=\"filter: invert(1);\">\r\n        \r\n        <h2 class=\"text-3xl md:text-5xl font-bold mb-2 tracking-tight\">EXPERIENCIA PRESTIGE<\/h2>\r\n        <p class=\"text-stone-500 text-sm tracking-[0.4em] uppercase mb-10\">Selecciona tu sede y plan trimestral<\/p>\r\n        \r\n        <div id=\"location-status\" class=\"text-[10px] tracking-[0.2em] uppercase text-stone-400 mb-8 flex items-center justify-center gap-2\">\r\n            <span class=\"w-1.5 h-1.5 rounded-full bg-stone-300 animate-pulse\" id=\"status-dot\"><\/span>\r\n            <span id=\"status-text\">Buscando el club m\u00e1s cercano...<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex flex-col md:flex-row gap-4 justify-center items-start\">\r\n            <div class=\"relative w-full md:w-1\/2\">\r\n                <button onclick=\"toggleDropdown('dropdown-menu')\" class=\"w-full flex items-center justify-between p-6 bg-white border border-stone-200 rounded-lg shadow-sm hover:border-stone-400 transition-all text-left group\">\r\n                    <div>\r\n                        <span class=\"block text-[9px] uppercase tracking-widest text-stone-400 mb-1\">1. Ubicaci\u00f3n<\/span>\r\n                        <span id=\"selected-name\" class=\"text-lg font-semibold text-black italic\">Elegir Sede<\/span>\r\n                    <\/div>\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-stone-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 9l-7 7-7-7\" \/><\/svg>\r\n                <\/button>\r\n                <div id=\"dropdown-menu\" class=\"custom-dropdown absolute left-0 right-0 top-full mt-3 w-full rounded-lg z-50\">\r\n                    <div id=\"sedes-list\" class=\"p-2 grid grid-cols-1 gap-1 max-h-[350px] overflow-y-auto text-black text-left\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"relative w-full md:w-1\/2\">\r\n                <button id=\"btn-plans\" onclick=\"toggleDropdown('dropdown-plans')\" class=\"disabled w-full flex items-center justify-between p-6 bg-white border border-stone-200 rounded-lg shadow-sm hover:border-stone-400 transition-all text-left group\">\r\n                    <div>\r\n                        <span class=\"block text-[9px] uppercase tracking-widest text-stone-400 mb-1\">2. Membres\u00eda<\/span>\r\n                        <span id=\"selected-plan-name\" class=\"text-lg font-semibold text-black italic\">Seleccionar Plan<\/span>\r\n                    <\/div>\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-stone-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 9l-7 7-7-7\" \/><\/svg>\r\n                <\/button>\r\n                <div id=\"dropdown-plans\" class=\"custom-dropdown absolute left-0 right-0 top-full mt-3 w-full rounded-lg z-50\">\r\n                    <div id=\"plans-list\" class=\"p-2 grid grid-cols-1 gap-1 text-black text-left\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mt-16\">\r\n            <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em]\">Acceso directo a pasarela de pago segura<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ LISTADO COMPLETO DE 14 SEDES\r\n        const sedes = [\r\n            { id: 1, nombre: \"Aeropuerto\", lat: 19.42250, lng: -99.08660, img: \"https:\/\/images.unsplash.com\/photo-1534438327276-14e5300c3a48?q=80&w=1000\" },\r\n            { id: 2, nombre: \"Azteca\", lat: 19.53718, lng: -99.02723, img: \"https:\/\/images.unsplash.com\/photo-1540497077202-7c8a3999166f?q=80&w=1000\" },\r\n            { id: 3, nombre: \"Arag\u00f3n\", lat: 19.46571, lng: -99.06818, img: \"https:\/\/images.unsplash.com\/photo-1571902943202-507ec2618e8f?q=80&w=1000\" },\r\n            { id: 4, nombre: \"Campestre\", lat: 19.48248, lng: -99.06260, img: \"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/pngtree-gym-is-reflected-in-an-odd-light-picture-image_2773779.jpg\" },\r\n            { id: 5, nombre: \"Coacalco\", lat: 19.62592, lng: -99.08260, img: \"https:\/\/images.unsplash.com\/photo-1593079831268-3381b0db4a77?q=80&w=1000\" },\r\n            { id: 6, nombre: \"Echegaray\", lat: 19.49662, lng: -99.22600, img: \"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/wp8077707-scaled.jpg\" },\r\n            { id: 7, nombre: \"Egipto\", lat: 19.47060, lng: -99.05243, img: \"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/804846.jpg\" },\r\n            { id: 8, nombre: \"Naciones\", lat: 19.46384, lng: -99.05379, img: \"https:\/\/images.unsplash.com\/photo-1517836357463-d25dfeac3438?q=80&w=1000\" },\r\n            { id: 9, nombre: \"Ocean\u00eda\", lat: 19.44814, lng: -99.06864, img: \"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/pngtree-gym-is-reflected-in-an-odd-light-picture-image_2773779.jpg\" },\r\n            { id: 10, nombre: \"Pradera\", lat: 19.47765, lng: -99.06725, img: \"https:\/\/images.unsplash.com\/photo-1532384748853-8f54a8f476e2?q=80&w=1000\" },\r\n            { id: 11, nombre: \"Viaducto\", lat: 19.40356, lng: -99.14019, img: \"https:\/\/images.unsplash.com\/photo-1571019613454-1cb2f99b2d8b?q=80&w=1000\" },\r\n            { id: 12, nombre: \"Celaya\", lat: 20.51890, lng: -100.83746, img: \"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/pngtree-gym-is-reflected-in-an-odd-light-picture-image_2773779.jpg\" },\r\n            { id: 13, nombre: \"Arbide\", lat: 21.12016, lng: -101.70200, img: \"https:\/\/images.unsplash.com\/photo-1541534741688-6078c6bfb5c5?q=80&w=1000\" },\r\n            { id: 14, nombre: \"Premier\", lat: 21.14019, lng: -101.68621, img: \"https:\/\/sporticamx.com\/wp-content\/uploads\/2026\/04\/wp8077707-scaled.jpg\" }\r\n        ];\r\n\r\n        let sedeSeleccionada = null;\r\n\r\n        function toggleDropdown(id) {\r\n            const dropdown = document.getElementById(id);\r\n            const isClosing = dropdown.classList.contains('open');\r\n            \r\n            \/\/ Cerrar todos\r\n            document.querySelectorAll('.custom-dropdown').forEach(d => d.classList.remove('open'));\r\n            \r\n            \/\/ Si no estaba abierto, abrirlo\r\n            if (!isClosing) dropdown.classList.add('open');\r\n        }\r\n\r\n        function selectSede(sede) {\r\n            sedeSeleccionada = sede;\r\n            document.getElementById('selected-name').innerText = sede.nombre;\r\n            document.getElementById('selected-name').style.color = \"#d4af37\";\r\n            \r\n            \/\/ Habilitar Selector de Planes\r\n            const btnPlans = document.getElementById('btn-plans');\r\n            btnPlans.classList.remove('disabled');\r\n            \r\n            renderPlanes(sede);\r\n            \r\n            \/\/ Flujo UX: cierra sedes, abre planes\r\n            toggleDropdown('dropdown-menu');\r\n            setTimeout(() => toggleDropdown('dropdown-plans'), 400);\r\n        }\r\n\r\n        function renderPlanes(sede) {\r\n            const list = document.getElementById('plans-list');\r\n            list.innerHTML = '';\r\n            \r\n            \/\/ Configura aqu\u00ed tus URLs base o espec\u00edficas\r\n            const planesConfig = [\r\n                { nombre: \"Plan 1\", slug: \"plan-1\" },\r\n                { nombre: \"Plan 2\", slug: \"plan-2\" },\r\n                { nombre: \"Plan 3\", slug: \"plan-3\" },\r\n                { nombre: \"Plan 4\", slug: \"plan-4\" }\r\n            ];\r\n            \r\n            planesConfig.forEach(plan => {\r\n                const item = document.createElement('div');\r\n                item.className = \"plan-item p-4 cursor-pointer text-left\";\r\n                item.innerHTML = `\r\n                    <div class=\"flex flex-col\">\r\n                        <span class=\"text-stone-800 font-semibold uppercase tracking-wider\">${plan.nombre}<\/span>\r\n                        <span class=\"text-[8px] text-stone-400\">MEMBRES\u00cdA EXCLUSIVA ${sede.nombre.toUpperCase()}<\/span>\r\n                    <\/div>\r\n                `;\r\n                item.onclick = () => {\r\n                    \/\/ AQU\u00cd CONSTRUYES LA URL DE REDIRECCI\u00d3N\r\n                    \/\/ Ejemplo: https:\/\/tusitio.com\/checkout?sede=aeropuerto&plan=plan-1\r\n                    const urlCheckout = `https:\/\/sporticamx.com\/checkout?sede=${sede.nombre.toLowerCase()}&plan=${plan.slug}`;\r\n                    window.location.href = urlCheckout;\r\n                };\r\n                list.appendChild(item);\r\n            });\r\n        }\r\n\r\n        function calculateDistance(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            return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));\r\n        }\r\n\r\n        function renderSedes(userLat = null, userLng = null) {\r\n            const listContainer = document.getElementById('sedes-list');\r\n            listContainer.innerHTML = '';\r\n            let sortedSedes = [...sedes];\r\n            \r\n            if (userLat && userLng) {\r\n                sortedSedes.forEach(s => s.distancia = calculateDistance(userLat, userLng, s.lat, s.lng));\r\n                sortedSedes.sort((a, b) => a.distancia - b.distancia);\r\n                document.getElementById('status-text').innerText = \"Cerca de ti: \" + sortedSedes[0].nombre;\r\n                document.getElementById('status-dot').classList.replace('bg-stone-300', 'bg-green-500');\r\n            }\r\n\r\n            sortedSedes.forEach((sede, index) => {\r\n                const item = document.createElement('div');\r\n                item.className = \"sede-item p-4 cursor-pointer group\/item\";\r\n                item.innerHTML = `\r\n                    <div class=\"flex flex-col\">\r\n                        <span class=\"text-[8px] text-stone-400 font-bold uppercase tracking-widest\">${index === 0 && userLat ? 'RECOMENDADA' : 'SPORTICA'}<\/span>\r\n                        <span class=\"text-stone-800 group-hover\/item:text-black font-semibold transition-colors\">${sede.nombre}<\/span>\r\n                        ${sede.distancia ? `<span class=\"text-[9px] text-amber-600 mt-1 font-medium tracking-wider\">${sede.distancia.toFixed(1)} KM<\/span>` : ''}\r\n                    <\/div>\r\n                `;\r\n                \r\n                item.onmouseenter = () => {\r\n                    const bg = document.getElementById('bg-preview');\r\n                    bg.src = sede.img;\r\n                    bg.style.opacity = \"0.4\";\r\n                    bg.style.transform = \"scale(1.05)\";\r\n                };\r\n                item.onmouseleave = () => {\r\n                    const bg = document.getElementById('bg-preview');\r\n                    bg.style.opacity = \"0.2\";\r\n                    bg.style.transform = \"scale(1)\";\r\n                };\r\n                item.onclick = () => selectSede(sede);\r\n                listContainer.appendChild(item);\r\n            });\r\n        }\r\n\r\n        window.onload = () => {\r\n            if (navigator.geolocation) {\r\n                navigator.geolocation.getCurrentPosition(\r\n                    p => renderSedes(p.coords.latitude, p.coords.longitude), \r\n                    () => renderSedes()\r\n                );\r\n            } else { renderSedes(); }\r\n        };\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a8cd6c elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"8a8cd6c\" 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-18e91c6 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"18e91c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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=Playfair+Display:ital,wght@0,7\r\n    \r\n    00;1,700&family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* Estilos Base *\/\r\n        body { \r\n            font-family: 'Inter', sans-serif; \r\n            background-color: #0c0a09; \r\n            color: white; \r\n            margin: 0;\r\n            overflow-x: hidden;\r\n        }\r\n        \r\n        .font-serif { font-family: 'Playfair Display', serif; }\r\n        \r\n        \/* Efecto de texto dorado met\u00e1lico *\/\r\n        .gold-gradient-text {\r\n            background: linear-gradient(180deg, #fef3c7 0%, #d4af37 50%, #926229 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));\r\n        }\r\n\r\n        \/* Estilo Unificado de Tarjetas *\/\r\n        .card-hover-effect {\r\n            transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n            border: 1px solid #1c1917; \/* stone-800 *\/\r\n            background-color: rgba(28, 25, 23, 0.4); \/* stone-900\/40 *\/\r\n        }\r\n\r\n        .card-hover-effect:hover {\r\n            box-shadow: 0 20px 50px -12px rgba(212, 175, 55, 0.15);\r\n            transform: translateY(-10px);\r\n            border-color: rgba(212, 175, 55, 0.4) !important;\r\n        }\r\n\r\n        \/* Destacado para Anualidad *\/\r\n        .featured-card {\r\n            border-color: rgba(212, 175, 55, 0.3);\r\n            box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.15);\r\n        }\r\n\r\n        \/* L\u00ednea Decorativa Superior *\/\r\n        .deco-line {\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, #d4af37, transparent);\r\n            width: 120px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Animaci\u00f3n de Revelado al Scroll *\/\r\n        .reveal {\r\n            opacity: 0;\r\n            transform: translateY(40px);\r\n            transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);\r\n        }\r\n\r\n        .reveal.active {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* Barra de desplazamiento personalizada *\/\r\n        ::-webkit-scrollbar { width: 6px; }\r\n        ::-webkit-scrollbar-track { background: #0c0a09; }\r\n        ::-webkit-scrollbar { width: 6px; }\r\n        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }\r\n        ::-webkit-scrollbar-thumb:hover { background: #d4af37; }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"py-16 px-6 md:px-12\">\r\n\r\n    <div class=\"max-w-7xl mx-auto\">\r\n        <!-- Encabezado Principal -->\r\n        <div class=\"text-center mb-24 reveal\">\r\n            <div class=\"deco-line mb-6\"><\/div>\r\n            <h1 class=\"text-amber-500\/80 text-[11px] font-bold tracking-[0.6em] uppercase mb-4\">\r\n                MEMBRES\u00cdA EXCLUSIVA\r\n            <\/h1>\r\n            <h2 class=\"text-5xl md:text-8xl font-serif gold-gradient-text mb-8\">\r\n                Prestige\r\n            <\/h2>\r\n            <div class=\"flex items-center justify-center gap-6 mb-10\">\r\n                <div class=\"h-[1px] w-16 bg-stone-800\"><\/div>\r\n                <span class=\"text-stone-500 text-[11px] tracking-[0.4em] uppercase\">Limited Access<\/span>\r\n                <div class=\"h-[1px] w-16 bg-stone-800\"><\/div>\r\n            <\/div>\r\n            <p class=\"max-w-2xl mx-auto text-stone-400 font-light text-base md:text-lg leading-relaxed italic\">\r\n                Descubre un santuario de salud y bienestar. Acceso restringido para garantizar una experiencia de entrenamiento sin precedentes.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <!-- Contenedor de Tarjetas -->\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12\">\r\n            \r\n            <!-- Plan Trimestral -->\r\n            <div class=\"reveal relative group overflow-hidden rounded-3xl flex flex-col h-full card-hover-effect\" style=\"transition-delay: 100ms;\">\r\n                <div class=\"absolute inset-0 z-0\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&q=80\" alt=\"Gimnasio de Lujo\" class=\"w-full h-full object-cover opacity-20 group-hover:opacity-30 transition-opacity duration-700\">\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-[#0c0a09] via-[#0c0a09]\/95 to-transparent\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"relative z-10 p-10 flex flex-col h-full\">\r\n                    <div class=\"mb-10 text-center\">\r\n                        <h3 class=\"text-amber-500\/60 text-[10px] font-bold tracking-[0.3em] uppercase mb-2\">Membres\u00eda<\/h3>\r\n                        <h2 class=\"text-4xl font-serif gold-gradient-text\">Trimestral<\/h2>\r\n                    <\/div>\r\n\r\n                    <!-- Trimestral: Fondo Limpio -->\r\n                    <div class=\"mb-10 text-center border-y border-white\/5 py-8\">\r\n                        <div class=\"text-stone-500 text-[10px] tracking-widest uppercase mb-1 italic\">Inversi\u00f3n<\/div>\r\n                        <span class=\"text-4xl font-serif text-amber-200 font-bold\">$1,649<\/span>\r\n                        <span class=\"text-stone-500 text-[10px] block mt-1 uppercase tracking-widest\">MXN \/ Pago por mes<\/span>\r\n                    <\/div>\r\n\r\n                    <ul class=\"space-y-6 mb-12 flex-grow\">\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Acceso total \u00e1reas de fuerza y cardio\r\n                        <\/li>\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Casillero privado ejecutivo\r\n                        <\/li>\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Servicio de toallas y amenidades\r\n                        <\/li>\r\n                    <\/ul>\r\n\r\n                    <button class=\"w-full py-5 bg-transparent border border-amber-500\/40 hover:bg-amber-500 hover:text-stone-950 text-amber-500 rounded-xl transition-all duration-500 uppercase tracking-[0.4em] text-[10px] font-bold\">\r\n                        <p>\r\n    <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce-trimestral\/\" style=\"text-decoration: none;\">Solicitar Acceso<\/a>\r\n<\/p>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Plan Semestral -->\r\n            <div class=\"reveal relative group overflow-hidden rounded-3xl flex flex-col h-full card-hover-effect\" style=\"transition-delay: 250ms;\">\r\n                <div class=\"absolute inset-0 z-0\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&q=80%22%20alt=%22Gym%20Interior\" class=\"w-full h-full object-cover opacity-20 group-hover:opacity-30 transition-opacity duration-700\">\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-[#0c0a09] via-[#0c0a09]\/95 to-transparent\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"relative z-10 p-10 flex flex-col h-full\">\r\n                    <div class=\"mb-10 text-center\">\r\n                        <h3 class=\"text-amber-500\/60 text-[10px] font-bold tracking-[0.3em] uppercase mb-2\">Membres\u00eda<\/h3>\r\n                        <h2 class=\"text-4xl font-serif gold-gradient-text\">Semestral<\/h2>\r\n                    <\/div>\r\n\r\n                    <!-- Semestral: Fondo Limpio -->\r\n                    <div class=\"mb-10 text-center border-y border-white\/5 py-8\">\r\n                        <div class=\"text-stone-500 text-[10px] tracking-widest uppercase mb-1 italic\">Inversi\u00f3n<\/div>\r\n                        <span class=\"text-4xl font-serif text-amber-200 font-bold\">$3,249<\/span>\r\n                        <span class=\"text-stone-500 text-[10px] block mt-1 uppercase tracking-widest\">MXN \/ Pago por mes<\/span>\r\n                    <\/div>\r\n\r\n                    <ul class=\"space-y-6 mb-12 flex-grow\">\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Beneficios Plan Trimestral\r\n                        <\/li>\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            3 Sesiones de coaching personal\r\n                        <\/li>\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Acceso preferencial a Spa y Sauna\r\n                        <\/li>\r\n                    <\/ul>\r\n\r\n                    <button class=\"w-full py-5 bg-transparent border border-amber-500\/40 hover:bg-amber-500 hover:text-stone-950 text-amber-500 rounded-xl transition-all duration-500 uppercase tracking-[0.4em] text-[10px] font-bold\">\r\n                        <p>\r\n    <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce-semestral\/\" style=\"text-decoration: none;\">Solicitar Acceso<\/a>\r\n<\/p>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Plan Anual (M\u00e1s Popular) -->\r\n            <div class=\"reveal relative group overflow-hidden rounded-3xl flex flex-col h-full card-hover-effect featured-card\" style=\"transition-delay: 400ms;\">\r\n                <div class=\"absolute inset-0 z-0\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&q=80%22%20alt=%22%C3%81rea%20de%20Pesas\" class=\"w-full h-full object-cover opacity-20 group-hover:opacity-30 transition-opacity duration-700\">\r\n                    <div class=\"absolute inset-0 bg-gradient-to-t from-[#0c0a09] via-[#0c0a09]\/95 to-transparent\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"relative z-10 p-10 flex flex-col h-full\">\r\n                    <div class=\"mb-10 text-center\">\r\n                        <div class=\"inline-block px-4 py-1.5 border border-amber-500\/30 rounded-full mb-4 bg-amber-500\/10\">\r\n                            <span class=\"text-amber-500 text-[10px] font-bold tracking-[0.3em] uppercase\">M\u00e1s Popular<\/span>\r\n                        <\/div>\r\n                        <h2 class=\"text-4xl font-serif gold-gradient-text\">Anualidad<\/h2>\r\n                    <\/div>\r\n\r\n                    <!-- Anualidad: Con Cuadro Gris\u00e1ceo Sutil para Resaltar -->\r\n                    <div class=\"mb-10 text-center border-y border-white\/5 py-8 bg-stone-800\/20 rounded-lg\">\r\n                        <div class=\"text-stone-500 text-[10px] tracking-widest uppercase mb-1 italic\">Inversi\u00f3n<\/div>\r\n                        <span class=\"text-4xl font-serif text-amber-200 font-bold\">$6,299<\/span>\r\n                        <span class=\"text-stone-500 text-[10px] block mt-1 uppercase tracking-widest\">MXN \/ Pago por mes\/span>\r\n                    <\/div>\r\n\r\n                    <ul class=\"space-y-6 mb-12 flex-grow\">\r\n                        <li class=\"flex items-center gap-4 text-stone-200 text-sm font-semibold italic\">\r\n                            <span class=\"w-2 h-2 rounded-full bg-amber-400 shadow-[0_0_12px_rgba(251,191,36,0.8)]\"><\/span>\r\n                            Beneficios Globales Prestige\r\n                        <\/li>\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Servicio de Valet Parking ilimitado\r\n                        <\/li>\r\n                        <li class=\"flex items-center gap-4 text-stone-300 text-sm font-light\">\r\n                            <span class=\"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]\"><\/span>\r\n                            Plan de nutrici\u00f3n personalizado\r\n                        <\/li>\r\n                    <\/ul>\r\n\r\n                    <button class=\"w-full py-5 bg-amber-600 hover:bg-amber-500 text-stone-950 rounded-xl transition-all duration-500 uppercase tracking-[0.4em] text-[10px] font-bold shadow-xl shadow-amber-900\/20\">\r\n                        <p>\r\n    <a href=\"https:\/\/sporticamx.com\/index.php\/e-commerce-anualidad\/\" style=\"text-decoration: none;\">Solicitar Acceso<\/a>\r\n<\/p>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Script de Animaci\u00f3n -->\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const revealOnScroll = () => {\r\n                const reveals = document.querySelectorAll('.reveal');\r\n                const windowHeight = window.innerHeight;\r\n                \r\n                reveals.forEach(el => {\r\n                    const elementTop = el.getBoundingClientRect().top;\r\n                    const elementVisible = 100;\r\n                    \r\n                    if (elementTop < windowHeight - elementVisible) {\r\n                        el.classList.add('active');\r\n                    }\r\n                });\r\n            };\r\n\r\n            window.addEventListener('scroll', revealOnScroll);\r\n            revealOnScroll();\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sedes Prestige &#8211; Sportica Exclusive EXPERIENCIA PRESTIGE Selecciona tu sede y plan trimestral Buscando el club m\u00e1s cercano&#8230; 1. Ubicaci\u00f3n Elegir Sede 2. Membres\u00eda Seleccionar Plan Acceso directo a pasarela de pago segura Membres\u00edas Exclusive Gym MEMBRES\u00cdA EXCLUSIVA Prestige Limited Access Descubre un santuario de salud y bienestar. Acceso restringido para garantizar una experiencia de [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-22112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22112","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=22112"}],"version-history":[{"count":43,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22112\/revisions"}],"predecessor-version":[{"id":24117,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/22112\/revisions\/24117"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=22112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}