{"id":24526,"date":"2026-04-30T03:27:07","date_gmt":"2026-04-30T08:27:07","guid":{"rendered":"https:\/\/sporticamx.com\/?page_id=24526"},"modified":"2026-04-30T14:57:20","modified_gmt":"2026-04-30T19:57:20","slug":"segmentacion-clases-fitness","status":"publish","type":"page","link":"https:\/\/sporticamx.com\/index.php\/segmentacion-clases-fitness\/","title":{"rendered":"Segmentacion clases fitness"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"24526\" class=\"elementor elementor-24526\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffd633d e-con-full e-flex e-con e-parent\" data-id=\"ffd633d\" data-element_type=\"container\" data-e-type=\"container\" id=\"contenedor-ruta\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6febd1d elementor-widget elementor-widget-html\" data-id=\"6febd1d\" 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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Harmonia Yoga Pilates Balance GAP Rhytmos Zumba \/ Sdance Cyclum Sbike \/ Spinning Hayla Box Scross \/ Funcional Impulsus Combat HIIT \/ Strong Continuar Ruta Ruta Sportica HARMONIA Cargando&#8230; Sal\u00f3n&#8211; Quema&#8211; Ver horarios<\/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-24526","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/24526","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=24526"}],"version-history":[{"count":49,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/24526\/revisions"}],"predecessor-version":[{"id":24596,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/24526\/revisions\/24596"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=24526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}