{"id":321,"date":"2026-01-06T23:39:07","date_gmt":"2026-01-06T23:39:07","guid":{"rendered":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/?page_id=321"},"modified":"2026-05-01T22:26:32","modified_gmt":"2026-05-01T22:26:32","slug":"blog","status":"publish","type":"page","link":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"321\" class=\"elementor elementor-321\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-851dceb particles e-flex e-con-boxed e-con e-parent\" data-id=\"851dceb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4896b14 elementor-widget elementor-widget-heading\" data-id=\"4896b14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Insights that Move<br>Markets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-365581f elementor-widget elementor-widget-heading\" data-id=\"365581f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">From geopolitical shifts to infrastructure trends,<br> explore what\u2019s shaping investment decisions in<br> Mexico today.<\/h3>\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-86c82b2 e-flex e-con-boxed e-con e-parent\" data-id=\"86c82b2\" 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-4062cd2 elementor-widget elementor-widget-shortcode\" data-id=\"4062cd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \r\n    <style>\r\n        .blog-posts-wrapper {\r\n            width: 100%;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n        }\r\n        \r\n        \/* Slider de categor\u00edas *\/\r\n        .categories-slider-container {\r\n            position: relative;\r\n            margin-bottom: 40px;\r\n            overflow: visible;\r\n        }\r\n        \r\n        .categories-slider {\r\n            display: flex;\r\n            gap: 15px;\r\n            overflow-x: auto;\r\n            scroll-behavior: smooth;\r\n            padding: 10px 0;\r\n            scrollbar-width: none;\r\n            -ms-overflow-style: none;\r\n        }\r\n        \r\n        .categories-slider::-webkit-scrollbar {\r\n            display: none;\r\n        }\r\n        \r\n        .category-filter-btn {\r\n            flex: 0 0 auto;\r\n            padding: 12px 30px;\r\n            background-color: transparent;\r\n            border: none;\r\n            border-radius: 25px;\r\n            color: #031C2A;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            white-space: nowrap;\r\n        }\r\n        \r\n        .category-filter-btn:hover,\r\n        .category-filter-btn.active {\r\n            background-color: #41AEEF;\r\n            color: white;\r\n        }\r\n        \r\n        .slider-arrow {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 40px;\r\n            height: 40px;\r\n            background-color: #41AEEF;\r\n            border: none;\r\n            border-radius: 50%;\r\n            color: white;\r\n            font-size: 20px;\r\n            cursor: pointer;\r\n            z-index: 2;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: background-color 0.3s ease;\r\n        }\r\n        \r\n        .slider-arrow:hover {\r\n            background-color: #2c9bd9;\r\n        }\r\n        \r\n        .slider-arrow.prev {\r\n            left: -45px;\r\n        }\r\n        \r\n        .slider-arrow.next {\r\n            right: -45px;\r\n        }\r\n        \r\n        .slider-arrow:disabled {\r\n            opacity: 0.3;\r\n            cursor: not-allowed;\r\n            pointer-events: none;\r\n        }\r\n        \r\n        \/* Indicador de scroll para mobile *\/\r\n        .scroll-indicator {\r\n            display: none;\r\n            width: 100%;\r\n            height: 4px;\r\n            background-color: #e0e0e0;\r\n            border-radius: 2px;\r\n            margin-top: 10px;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .scroll-indicator-bar {\r\n            height: 100%;\r\n            background-color: #41AEEF;\r\n            border-radius: 2px;\r\n            transition: width 0.2s ease;\r\n        }\r\n        \r\n        \/* Grid de posts *\/\r\n        .blog-posts-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 30px;\r\n            margin-bottom: 40px;\r\n        }\r\n        \r\n        .blog-post-card-item {\r\n            position: relative;\r\n            border-radius: 20px;\r\n            overflow: hidden;\r\n            transition: transform 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            height: 480px;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .blog-post-card-item:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n        \r\n        .post-image-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 220px !important;\r\n            overflow: hidden;\r\n            background-color: #031C2A;\r\n            flex-shrink: 0;\r\n        }\r\n        \r\n        .post-image-wrapper img.post-featured-image {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            display: block;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .blog-post-card-item:hover .post-featured-image {\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        .post-category-tag {\r\n            position: absolute;\r\n            top: 20px;\r\n            left: 20px;\r\n            padding: 8px 20px;\r\n            background-color: transparent;\r\n            border: 2px solid #ffffff;\r\n            border-radius: 20px;\r\n            color: #ffffff;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            backdrop-filter: blur(10px);\r\n            z-index: 1;\r\n        }\r\n        \r\n        .post-content-wrapper {\r\n            background: linear-gradient(90deg, #41AEEF 0%, #031C2A 100%);\r\n            padding: 20px;\r\n            flex: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .post-title-link {\r\n            text-decoration: none;\r\n            color: white;\r\n            display: block;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .post-card-title {\r\n            color: white;\r\n            font-size: 22px;\r\n            font-weight: 500;\r\n            font-family: barlow;\r\n            line-height: 1.3;\r\n            margin: 0 0 0 0;\r\n        }\r\n        \r\n        .post-card-excerpt {\r\n            color: rgba(255, 255, 255, 0.9);\r\n            font-size: 15px;\r\n            line-height: 1.6;\r\n            flex: 1;\r\n        }\r\n        \r\n        .post-read-more {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: white;\r\n            text-decoration: none;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            transition: gap 0.3s ease;\r\n        }\r\n        \r\n        .post-read-more:hover {\r\n            gap: 12px;\r\n        }\r\n        \r\n        .post-read-more::after {\r\n            content: \"\u2192\";\r\n            font-size: 18px;\r\n        }\r\n        \r\n        \/* Paginaci\u00f3n *\/\r\n        .blog-pagination {\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            gap: 10px;\r\n            margin-top: 40px;\r\n        }\r\n        \r\n        .pagination-btn {\r\n            padding: 10px 20px;\r\n            background-color: #41AEEF;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n            transition: background-color 0.3s ease;\r\n        }\r\n        \r\n        .pagination-btn:hover:not(:disabled) {\r\n            background-color: #2c9bd9;\r\n        }\r\n        \r\n        .pagination-btn:disabled {\r\n            background-color: #ccc;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .pagination-info {\r\n            color: #031C2A;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        \/* Loading *\/\r\n        .loading-spinner {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #41AEEF;\r\n            font-size: 18px;\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 1024px) {\r\n            .blog-posts-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 20px;\r\n            }\r\n            \r\n            .blog-post-card-item {\r\n                height: 450px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .blog-posts-wrapper {\r\n                padding: 15px;\r\n            }\r\n            \r\n            .blog-posts-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n            \r\n            \/* Ocultar flechas en mobile *\/\r\n            .slider-arrow {\r\n                display: none;\r\n            }\r\n            \r\n            \/* Mostrar indicador de scroll en mobile *\/\r\n            .scroll-indicator {\r\n                display: block;\r\n            }\r\n            \r\n            \/* Ajustar slider de categor\u00edas *\/\r\n            .categories-slider {\r\n                gap: 10px;\r\n                padding: 10px 0 15px 0;\r\n            }\r\n            \r\n            .category-filter-btn {\r\n                padding: 10px 20px;\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .categories-slider-container {\r\n                margin-bottom: 30px;\r\n            }\r\n            \r\n            \/* Ajustar tarjetas de posts *\/\r\n            .blog-post-card-item {\r\n                height: auto;\r\n                min-height: 420px;\r\n            }\r\n            \r\n            .post-image-wrapper {\r\n                height: 200px !important;\r\n            }\r\n            \r\n            .post-content-wrapper {\r\n                padding: 20px;\r\n            }\r\n            \r\n            .post-card-title {\r\n                font-size: 20px;\r\n            }\r\n            \r\n            .post-card-excerpt {\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .post-category-tag {\r\n                top: 15px;\r\n                left: 15px;\r\n                padding: 6px 16px;\r\n                font-size: 12px;\r\n            }\r\n            \r\n            \/* Ajustar paginaci\u00f3n *\/\r\n            .blog-pagination {\r\n                gap: 8px;\r\n                margin-top: 30px;\r\n            }\r\n            \r\n            .pagination-btn {\r\n                padding: 8px 16px;\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .pagination-info {\r\n                font-size: 14px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 480px) {\r\n            .blog-posts-wrapper {\r\n                padding: 10px;\r\n            }\r\n            \r\n            .post-card-title {\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .category-filter-btn {\r\n                padding: 8px 16px;\r\n                font-size: 13px;\r\n            }\r\n        }\r\n    <\/style>\r\n    \r\n    <div class=\"blog-posts-wrapper\">\r\n        <!-- Slider de categor\u00edas -->\r\n        <div class=\"categories-slider-container\">\r\n            <button class=\"slider-arrow prev\" onclick=\"scrollCategories('prev')\">\u2039<\/button>\r\n            <div class=\"categories-slider\" id=\"categoriesSlider\">\r\n                <button class=\"category-filter-btn active\" data-category=\"all\">All<\/button>\r\n                                    <button class=\"category-filter-btn\" data-category=\"33\">\r\n                        Mexico Weekly Brief                    <\/button>\r\n                            <\/div>\r\n            <button class=\"slider-arrow next\" onclick=\"scrollCategories('next')\">\u203a<\/button>\r\n            <!-- Indicador de scroll para mobile -->\r\n            <div class=\"scroll-indicator\">\r\n                <div class=\"scroll-indicator-bar\" id=\"scrollIndicatorBar\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Grid de posts -->\r\n        <div id=\"postsContainer\">\r\n            <div class=\"loading-spinner\">Loading...<\/div>\r\n        <\/div>\r\n        \r\n        <!-- Paginaci\u00f3n -->\r\n        <div class=\"blog-pagination\" id=\"paginationContainer\" style=\"display: none;\">\r\n            <button class=\"pagination-btn\" id=\"prevPage\">Previous<\/button>\r\n            <span class=\"pagination-info\" id=\"pageInfo\"><\/span>\r\n            <button class=\"pagination-btn\" id=\"nextPage\">Next<\/button>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <script>\r\n    (function() {\r\n        let currentPage = 1;\r\n        let currentCategory = 'all';\r\n        \r\n        \/\/ Funci\u00f3n para obtener posts por p\u00e1gina seg\u00fan el tama\u00f1o de pantalla\r\n        function getPostsPerPage() {\r\n            return window.innerWidth <= 768 ? 3 : 9;\r\n        }\r\n        \r\n        let postsPerPage = getPostsPerPage();\r\n        \r\n        \/\/ Actualizar posts por p\u00e1gina al cambiar tama\u00f1o de ventana\r\n        window.addEventListener('resize', function() {\r\n            const newPostsPerPage = getPostsPerPage();\r\n            if (newPostsPerPage !== postsPerPage) {\r\n                postsPerPage = newPostsPerPage;\r\n                currentPage = 1;\r\n                loadPosts();\r\n            }\r\n        });\r\n        \r\n        \/\/ Funci\u00f3n para actualizar el indicador de scroll\r\n        function updateScrollIndicator() {\r\n            const slider = document.getElementById('categoriesSlider');\r\n            const indicator = document.getElementById('scrollIndicatorBar');\r\n            \r\n            if (!slider || !indicator) return;\r\n            \r\n            const scrollPercentage = (slider.scrollLeft \/ (slider.scrollWidth - slider.clientWidth)) * 100;\r\n            indicator.style.width = Math.min(scrollPercentage, 100) + '%';\r\n        }\r\n        \r\n        \/\/ Funci\u00f3n para actualizar el estado de las flechas\r\n        function updateArrowButtons() {\r\n            const slider = document.getElementById('categoriesSlider');\r\n            const prevBtn = document.querySelector('.slider-arrow.prev');\r\n            const nextBtn = document.querySelector('.slider-arrow.next');\r\n            \r\n            if (!slider || !prevBtn || !nextBtn) return;\r\n            \r\n            const canScrollLeft = slider.scrollLeft > 0;\r\n            const canScrollRight = slider.scrollLeft < (slider.scrollWidth - slider.clientWidth - 1);\r\n            \r\n            prevBtn.disabled = !canScrollLeft;\r\n            nextBtn.disabled = !canScrollRight;\r\n        }\r\n        \r\n        \/\/ Scroll del slider de categor\u00edas\r\n        window.scrollCategories = function(direction) {\r\n            const slider = document.getElementById('categoriesSlider');\r\n            const scrollAmount = 300;\r\n            if (direction === 'prev') {\r\n                slider.scrollLeft -= scrollAmount;\r\n            } else {\r\n                slider.scrollLeft += scrollAmount;\r\n            }\r\n            setTimeout(function() {\r\n                updateArrowButtons();\r\n                updateScrollIndicator();\r\n            }, 100);\r\n        };\r\n        \r\n        \/\/ Cargar posts\r\n        function loadPosts() {\r\n            const container = document.getElementById('postsContainer');\r\n            container.innerHTML = '<div class=\"loading-spinner\">Loading...<\/div>';\r\n            \r\n            fetch('https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-admin\/admin-ajax.php', {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Content-Type': 'application\/x-www-form-urlencoded',\r\n                },\r\n                body: new URLSearchParams({\r\n                    action: 'filter_blog_posts',\r\n                    category: currentCategory,\r\n                    page: currentPage,\r\n                    posts_per_page: postsPerPage\r\n                })\r\n            })\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                if (data.success) {\r\n                    container.innerHTML = data.data.html;\r\n                    updatePagination(data.data.total_pages, data.data.current_page);\r\n                } else {\r\n                    container.innerHTML = '<p>No se encontraron posts.<\/p>';\r\n                }\r\n            })\r\n            .catch(error => {\r\n                console.error('Error:', error);\r\n                container.innerHTML = '<p>Error al cargar los posts.<\/p>';\r\n            });\r\n        }\r\n        \r\n        \/\/ Actualizar paginaci\u00f3n\r\n        function updatePagination(totalPages, current) {\r\n            const paginationContainer = document.getElementById('paginationContainer');\r\n            const prevBtn = document.getElementById('prevPage');\r\n            const nextBtn = document.getElementById('nextPage');\r\n            const pageInfo = document.getElementById('pageInfo');\r\n            \r\n            if (totalPages > 1) {\r\n                paginationContainer.style.display = 'flex';\r\n                pageInfo.textContent = `Page ${current} of ${totalPages}`;\r\n                prevBtn.disabled = current <= 1;\r\n                nextBtn.disabled = current >= totalPages;\r\n            } else {\r\n                paginationContainer.style.display = 'none';\r\n            }\r\n        }\r\n        \r\n        \/\/ Event listeners para filtros de categor\u00eda\r\n        document.querySelectorAll('.category-filter-btn').forEach(btn => {\r\n            btn.addEventListener('click', function() {\r\n                document.querySelectorAll('.category-filter-btn').forEach(b => b.classList.remove('active'));\r\n                this.classList.add('active');\r\n                currentCategory = this.dataset.category;\r\n                currentPage = 1;\r\n                loadPosts();\r\n            });\r\n        });\r\n        \r\n        \/\/ Actualizar estado de flechas y indicador al hacer scroll\r\n        const slider = document.getElementById('categoriesSlider');\r\n        if (slider) {\r\n            slider.addEventListener('scroll', function() {\r\n                updateArrowButtons();\r\n                updateScrollIndicator();\r\n            });\r\n            \r\n            \/\/ Actualizar estado inicial\r\n            setTimeout(function() {\r\n                updateArrowButtons();\r\n                updateScrollIndicator();\r\n            }, 100);\r\n        }\r\n        \r\n        \/\/ Event listeners para paginaci\u00f3n\r\n        document.getElementById('prevPage').addEventListener('click', function() {\r\n            if (currentPage > 1) {\r\n                currentPage--;\r\n                loadPosts();\r\n                window.scrollTo({ top: 0, behavior: 'smooth' });\r\n            }\r\n        });\r\n        \r\n        document.getElementById('nextPage').addEventListener('click', function() {\r\n            currentPage++;\r\n            loadPosts();\r\n            window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        });\r\n        \r\n        \/\/ Cargar posts inicialmente\r\n        loadPosts();\r\n    })();\r\n    <\/script>\r\n    \r\n    <\/div>\n\t\t\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>Insights that MoveMarkets From geopolitical shifts to infrastructure trends, explore what\u2019s shaping investment decisions in Mexico today.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":23,"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":870,"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/pages\/321\/revisions\/870"}],"wp:attachment":[{"href":"https:\/\/bafflerdesarrollo.com\/mexstrategy\/wp-json\/wp\/v2\/media?parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}