{"id":304,"date":"2025-09-09T15:50:44","date_gmt":"2025-09-09T18:50:44","guid":{"rendered":"https:\/\/bosquesdesumalao.com\/bosques\/?page_id=304"},"modified":"2025-09-09T16:13:09","modified_gmt":"2025-09-09T19:13:09","slug":"estacion-de-servicio","status":"publish","type":"page","link":"https:\/\/bosquesdesumalao.com\/bosques\/estacion-de-servicio\/","title":{"rendered":"estaci\u00f3n de servicio"},"content":{"rendered":"<nav class=\"bosques-navbar\">\n        <div class=\"navbar-container\">\n            <!-- Logo -->\n            <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/\" class=\"navbar-logo\">\n                <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2025\/07\/logo-bosques-131.png\" alt=\"Logo Bosques de Sumalao\">\n            <\/a>\n\n            <!-- Men\u00fa Desktop -->\n            <ul class=\"navbar-links\">\n                <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/\">Inicio<\/a><\/li>\n                <li class=\"dropdown\">\n                    <a href=\"#\" class=\"dropdown-toggle\">\n                        Proyectos <i class=\"fas fa-chevron-down dropdown-icon\"><\/i>\n                    <\/a>\n                    <ul class=\"dropdown-menu\">\n                        <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/bosques-1\/\">Bosques n\u00b01<\/a><\/li>\n                        <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/lotes-nodo-empresarial\">Terrenos en Nodo Empresarial<\/a><\/li>\n                       <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/estacion-de-servicio\">Estaci\u00f3n de Servicio en Nodo Empresarial<\/a><\/li>\n\t\t\t\t\t\t <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/golf\/\">Club de Golf Nodo Empresarial<\/a><\/li>\n                    <\/ul>\n                <\/li>\n                <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/uvi\/\">Calculadora UVI<\/a><\/li>\n                <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/contacto-2\/\">Contacto<\/a><\/li>\n                <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/#empresa\">Empresa<\/a><\/li>\n                <li><a href=\"https:\/\/bosquesdesumalao.com\/bosques\/postulantes\">Trabaja con nosotros<\/a><\/li>\n            <\/ul>\n\n            <!-- CTA Desktop -->\n            <div class=\"navbar-cta\">\n                <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/portal\" class=\"cta-button\">\n                    <i class=\"fas fa-user-circle\"><\/i> Portal Cliente\n                <\/a>\n            <\/div>\n\n            <!-- Men\u00fa Mobile -->\n            <div class=\"mobile-menu-toggle\">\n                <button class=\"hamburger\">\n                    <span class=\"hamburger-line\"><\/span>\n                    <span class=\"hamburger-line\"><\/span>\n                    <span class=\"hamburger-line\"><\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Men\u00fa Mobile Content -->\n        <div class=\"mobile-menu\">\n            <div class=\"mobile-menu-header\">\n                <div class=\"mobile-logo\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2025\/07\/logo-bosques-131.png\" alt=\"Logo Bosques de Sumalao\">\n                <\/div>\n                <button class=\"mobile-close\">\n                    <span class=\"close-icon\">&times;<\/span>\n                <\/button>\n            <\/div>\n            \n            <div class=\"mobile-menu-content\">\n                <ul class=\"mobile-nav-links\">\n                    <li>\n                        <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/\">\n                            <i class=\"fas fa-home\"><\/i>\n                            <span>Inicio<\/span>\n                        <\/a>\n                    <\/li>\n                    <li class=\"mobile-dropdown\">\n                        <a href=\"#\" class=\"mobile-dropdown-toggle\">\n                            <i class=\"fas fa-building\"><\/i>\n                            <span>Proyectos<\/span>\n                            <i class=\"fas fa-chevron-down mobile-dropdown-icon\"><\/i>\n                        <\/a>\n                        <ul class=\"mobile-dropdown-menu\">\n                            <li>\n                                <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/bosques-1\/\">\n                                    <i class=\"fas fa-tree\"><\/i>\n                                    <span>Bosques n\u00b01<\/span>\n                                <\/a>\n                            <\/li>\n                            <li>\n                                <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/lotes-nodo-empresarial\">\n                                    <i class=\"fas fa-industry\"><\/i>\n                                    <span>Terrenos en Nodo Empresarial<\/span>\n                                <\/a>\n                            <\/li>\n\t\t\t\t\t\t\t<li>\n                                <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/estacion-de-servicio\">\n                                    <i class=\"fas fa-industry\"><\/i>\n                                    <span>Estaci\u00f3n de Servicio en Nodo Empresarial<\/span>\n                                <\/a>\n                            <\/li>\n\t\t\t\t\t\t\t<li>\n                                <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/golf\">\n                                    <i class=\"fas fa-industry\"><\/i>\n                                    <span>Club de Golf Nodo Empresarial<\/span>\n                                <\/a>\n                            <\/li>\t\n                        <\/ul>\n                    <\/li>\n                    <li>\n                        <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/uvi\/\">\n                            <i class=\"fas fa-calculator\"><\/i>\n                            <span>Calculadora UVI<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/contacto-2\/\">\n                            <i class=\"fas fa-envelope\"><\/i>\n                            <span>Contacto<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/#empresa\">\n                            <i class=\"fas fa-info-circle\"><\/i>\n                            <span>Empresa<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/postulantes\">\n                            <i class=\"fas fa-briefcase\"><\/i>\n                            <span>Trabaja con nosotros<\/span>\n                        <\/a>\n                    <\/li>\n                <\/ul>\n                \n                <div class=\"mobile-cta\">\n                    <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/portal\" class=\"mobile-cta-button\">\n                        <i class=\"fas fa-user-circle\"><\/i> Portal Cliente\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Overlay para cuando el men\u00fa est\u00e1 abierto -->\n        <div class=\"mobile-overlay\"><\/div>\n    <\/nav>\n\n    <style>\n        \/* Importar Font Awesome *\/\n        @import url(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\");\n        \n        \/* Variables de paleta Bosques de Sumalao *\/\n        :root {\n            --text-primary: #213026;\n            --bg-primary: #f6f8f4;\n            --bg-secondary: #0c1511;\n            --text-secondary: #37483a;\n            --accent-green: #4a6741;\n            --accent-light: #6b8e5a;\n            --white: #ffffff;\n            --transition-duration: 0.4s;\n            --easing: cubic-bezier(0.23, 1, 0.32, 1);\n        }\n\n        \/* Estilos generales del navbar *\/\n        .bosques-navbar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            z-index: 1000;\n            background: rgba(246, 248, 244, 0.95);\n            backdrop-filter: blur(12px);\n            box-shadow: 0 4px 20px rgba(33, 48, 38, 0.08);\n            padding: 1rem 0;\n            transition: all var(--transition-duration) var(--easing);\n            font-family: \"Arial\", sans-serif;\n        }\n\n        .navbar-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        \/* Logo *\/\n        .navbar-logo img {\n            height: 60px;\n            transition: transform var(--transition-duration) var(--easing);\n        }\n\n        .navbar-logo:hover img {\n            transform: scale(1.05);\n        }\n\n        \/* Men\u00fa Desktop *\/\n        .navbar-links {\n            display: flex;\n            gap: 2rem;\n            list-style: none;\n            margin: 0;\n            padding: 0;\n        }\n\n        .navbar-links > li {\n            position: relative;\n        }\n\n        .navbar-links a {\n            color: var(--text-primary);\n            text-decoration: none;\n            font-weight: 500;\n            font-size: 0.95rem;\n            position: relative;\n            padding: 0.5rem 0;\n            transition: color var(--transition-duration) var(--easing);\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        .navbar-links a::after {\n            content: \"\";\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 0;\n            height: 2px;\n            background: var(--accent-green);\n            transition: width var(--transition-duration) var(--easing);\n        }\n\n        .navbar-links a:hover {\n            color: var(--accent-green);\n        }\n\n        .navbar-links a:hover::after {\n            width: 100%;\n        }\n\n        \/* Dropdown Desktop *\/\n        .dropdown-icon {\n            font-size: 0.7rem;\n            transition: transform var(--transition-duration) var(--easing);\n        }\n\n        .dropdown:hover .dropdown-icon {\n            transform: rotate(180deg);\n        }\n\n        .dropdown-menu {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            background: var(--white);\n            box-shadow: 0 8px 25px rgba(33, 48, 38, 0.15);\n            border-radius: 8px;\n            padding: 0.5rem 0;\n            opacity: 0;\n            visibility: hidden;\n            transform: translateY(-10px);\n            transition: all var(--transition-duration) var(--easing);\n            min-width: 220px;\n            z-index: 100;\n            list-style: none;\n            margin: 0;\n        }\n\n        .dropdown:hover .dropdown-menu {\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n        }\n\n        .dropdown-menu li {\n            margin: 0;\n        }\n\n        .dropdown-menu a {\n            padding: 0.75rem 1.25rem;\n            color: var(--text-primary);\n            border-radius: 0;\n            display: block;\n            transition: all 0.3s ease;\n        }\n\n        .dropdown-menu a::after {\n            display: none;\n        }\n\n        .dropdown-menu a:hover {\n            background: var(--bg-primary);\n            color: var(--accent-green);\n            padding-left: 1.5rem;\n        }\n\n        \/* Bot\u00f3n CTA Desktop *\/\n        .cta-button {\n            background: linear-gradient(135deg, var(--accent-green), var(--accent-light));\n            color: var(--white);\n            padding: 0.8rem 1.8rem;\n            border-radius: 25px;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.9rem;\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            transition: all var(--transition-duration) var(--easing);\n            box-shadow: 0 4px 15px rgba(74, 103, 65, 0.25);\n            border: 2px solid transparent;\n        }\n\n        .cta-button:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 6px 20px rgba(74, 103, 65, 0.35);\n            background: var(--white);\n            color: var(--accent-green);\n            border-color: var(--accent-green);\n        }\n\n        \/* Bot\u00f3n hamburguesa *\/        \n        .mobile-menu-toggle {\n            display: none;\n            position: relative;\n            z-index: 1002;\n        }\n\n        .hamburger {\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            padding: 0.5rem;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .hamburger-line {\n            display: block;\n            width: 28px;\n            height: 3px;\n            background: var(--text-primary);\n            margin: 4px 0;\n            border-radius: 3px;\n            transition: all var(--transition-duration) var(--easing);\n        }\n\n        .hamburger:hover .hamburger-line {\n            background: var(--accent-green);\n        }\n\n        \/* VERSI\u00d3N M\u00d3VIL DEL MEN\u00da *\/\n        .mobile-menu {\n            position: fixed;\n            top: 0;\n            right: -100%;\n            bottom: 0;\n            width: 85%;\n            max-width: 350px;\n            height: 100vh;\n            background: var(--white);\n            z-index: 1005;\n            transition: right var(--transition-duration) var(--easing);\n            box-shadow: -5px 0 25px rgba(33, 48, 38, 0.15);\n            display: flex;\n            flex-direction: column;\n            overflow-y: auto;\n        }\n\n        .mobile-menu.active {\n            right: 0;\n        }\n\n        \/* Encabezado del men\u00fa m\u00f3vil *\/\n        .mobile-menu-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 20px;\n            border-bottom: 1px solid var(--bg-primary);\n            position: sticky;\n            top: 0;\n            background: var(--white);\n            z-index: 2;\n        }\n\n        .mobile-logo img {\n            height: 32px;\n        }\n\n        .mobile-close {\n            background: var(--bg-primary);\n            border: none;\n            cursor: pointer;\n            width: 36px;\n            height: 36px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.3s ease;\n        }\n\n        .mobile-close:hover {\n            background: var(--accent-green);\n        }\n\n        .close-icon {\n            font-size: 24px;\n            color: var(--text-primary);\n            line-height: 1;\n        }\n\n        \/* Contenido del men\u00fa m\u00f3vil *\/\n        .mobile-menu-content {\n            padding: 25px 20px;\n            display: flex;\n            flex-direction: column;\n            flex-grow: 1;\n            overflow-y: auto;\n        }\n\n        .mobile-nav-links {\n            list-style: none;\n            padding: 0;\n            margin: 0 0 30px 0;\n        }\n\n        .mobile-nav-links > li {\n            margin-bottom: 10px;\n        }\n\n        .mobile-nav-links a {\n            display: flex;\n            align-items: center;\n            color: var(--text-primary);\n            text-decoration: none;\n            font-size: 1rem;\n            font-weight: 500;\n            padding: 12px 15px;\n            border-radius: 8px;\n            transition: all 0.3s ease;\n            border: 1px solid transparent;\n        }\n\n        .mobile-nav-links a:hover {\n            background-color: var(--bg-primary);\n            color: var(--accent-green);\n            border-color: var(--accent-green);\n        }\n\n        .mobile-nav-links i {\n            font-size: 1.1rem;\n            width: 24px;\n            margin-right: 15px;\n            color: var(--accent-green);\n        }\n\n        \/* Dropdown m\u00f3vil *\/\n        .mobile-dropdown-menu {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n            padding-left: 20px;\n            max-height: 0;\n            overflow: hidden;\n            transition: max-height 0.3s ease;\n        }\n\n        .mobile-dropdown-menu.active {\n            max-height: 200px;\n            margin-top: 10px;\n        }\n\n        .mobile-dropdown-menu a {\n            font-size: 0.9rem;\n            padding: 8px 12px;\n            color: var(--text-secondary);\n        }\n\n        .mobile-dropdown-icon {\n            margin-left: auto;\n            font-size: 0.8rem;\n            transition: transform 0.3s ease;\n        }\n\n        .mobile-dropdown-toggle.active .mobile-dropdown-icon {\n            transform: rotate(180deg);\n        }\n\n        \/* CTA m\u00f3vil *\/\n        .mobile-cta {\n            margin: auto 0 25px 0;\n            padding: 15px 0;\n        }\n\n        .mobile-cta-button {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            width: 100%;\n            padding: 15px 20px;\n            background: var(--accent-green);\n            color: var(--white);\n            text-decoration: none;\n            font-weight: 600;\n            border-radius: 8px;\n            text-align: center;\n            box-shadow: 0 4px 12px rgba(74, 103, 65, 0.3);\n            transition: all 0.3s ease;\n            border: 2px solid transparent;\n        }\n\n        .mobile-cta-button:hover {\n            background: var(--white);\n            color: var(--accent-green);\n            border-color: var(--accent-green);\n            transform: translateY(-2px);\n        }\n\n        \/* Overlay para cuando el men\u00fa est\u00e1 abierto *\/\n        .mobile-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(12, 21, 17, 0.6);\n            z-index: 1004;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.3s ease;\n        }\n\n        .mobile-overlay.active {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        \/* Scroll Effect *\/\n        .scrolled {\n            padding: 0.5rem 0;\n            backdrop-filter: blur(16px);\n            background: rgba(246, 248, 244, 0.98);\n            box-shadow: 0 4px 25px rgba(33, 48, 38, 0.12);\n        }\n\n\/* Ajuste para el bot\u00f3n CTA en mobile *\/\n.mobile-cta {\n    margin: 20px 0; \/* antes estaba auto 0 25px 0 *\/\n    padding: 0 15px; \/* le damos respiraci\u00f3n lateral *\/\n}\n\n.mobile-cta-button {\n    padding: 14px 16px; \/* un poco m\u00e1s compacto que los 15px 20px *\/\n    font-size: 1rem; \/* tama\u00f1o de texto fijo para que no se corte *\/\n    max-width: 100%; \/* se adapta al ancho del contenedor *\/\n    box-sizing: border-box; \/* asegura que respete el ancho *\/\n}\n\n        \/* Responsive *\/\n        @media (max-width: 1200px) {\n            .navbar-links {\n                gap: 1.5rem;\n            }\n            \n            .navbar-links a {\n                font-size: 0.9rem;\n            }\n        }\n\n        @media (max-width: 1024px) {\n            .navbar-links,\n            .navbar-cta {\n                display: none;\n            }\n\n            .mobile-menu-toggle {\n                display: block;\n            }\n        }\n\n        \/* Ajustes adicionales para m\u00f3viles peque\u00f1os *\/\n        @media (max-width: 480px) {\n            .navbar-container {\n                padding: 0 1rem;\n            }\n            \n            .mobile-menu {\n                width: 100%;\n                max-width: none;\n            }\n        }\n\n        \/* Mejoras de accesibilidad *\/\n        @media (prefers-reduced-motion: reduce) {\n            * {\n                animation-duration: 0.01ms !important;\n                animation-iteration-count: 1 !important;\n                transition-duration: 0.01ms !important;\n            }\n        }\n    <\/style>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \/\/ Elementos del DOM\n            const hamburger = document.querySelector(\".hamburger\");\n            const mobileMenu = document.querySelector(\".mobile-menu\");\n            const mobileClose = document.querySelector(\".mobile-close\");\n            const mobileOverlay = document.querySelector(\".mobile-overlay\");\n            const mobileLinks = document.querySelectorAll(\".mobile-nav-links a:not(.mobile-dropdown-toggle), .mobile-cta-button\");\n            const mobileDropdownToggles = document.querySelectorAll(\".mobile-dropdown-toggle\");\n            \n            \/\/ Funci\u00f3n para abrir el men\u00fa\n            function openMenu() {\n                mobileMenu.classList.add(\"active\");\n                mobileOverlay.classList.add(\"active\");\n                document.body.style.overflow = \"hidden\";\n                \n                \/\/ Asegurarse de que el men\u00fa est\u00e9 en la parte superior\n                window.scrollTo(0, 0);\n                \n                \/\/ Restablecer la posici\u00f3n de scroll del men\u00fa m\u00f3vil\n                mobileMenu.scrollTop = 0;\n            }\n            \n            \/\/ Funci\u00f3n para cerrar el men\u00fa\n            function closeMenu() {\n                mobileMenu.classList.remove(\"active\");\n                mobileOverlay.classList.remove(\"active\");\n                document.body.style.overflow = \"\";\n                \n                \/\/ Cerrar todos los dropdowns m\u00f3viles\n                mobileDropdownToggles.forEach(toggle => {\n                    toggle.classList.remove(\"active\");\n                    const menu = toggle.parentElement.querySelector(\".mobile-dropdown-menu\");\n                    if (menu) menu.classList.remove(\"active\");\n                });\n            }\n            \n            \/\/ Eventos para abrir\/cerrar men\u00fa\n            hamburger.addEventListener(\"click\", openMenu);\n            mobileClose.addEventListener(\"click\", closeMenu);\n            mobileOverlay.addEventListener(\"click\", closeMenu);\n            \n            \/\/ Manejo de dropdowns m\u00f3viles\n            mobileDropdownToggles.forEach(toggle => {\n                toggle.addEventListener(\"click\", (e) => {\n                    e.preventDefault();\n                    \n                    const isActive = toggle.classList.contains(\"active\");\n                    const dropdownMenu = toggle.parentElement.querySelector(\".mobile-dropdown-menu\");\n                    \n                    \/\/ Cerrar otros dropdowns\n                    mobileDropdownToggles.forEach(otherToggle => {\n                        if (otherToggle !== toggle) {\n                            otherToggle.classList.remove(\"active\");\n                            const otherMenu = otherToggle.parentElement.querySelector(\".mobile-dropdown-menu\");\n                            if (otherMenu) otherMenu.classList.remove(\"active\");\n                        }\n                    });\n                    \n                    \/\/ Toggle el dropdown actual\n                    if (isActive) {\n                        toggle.classList.remove(\"active\");\n                        if (dropdownMenu) dropdownMenu.classList.remove(\"active\");\n                    } else {\n                        toggle.classList.add(\"active\");\n                        if (dropdownMenu) dropdownMenu.classList.add(\"active\");\n                    }\n                });\n            });\n            \n            \/\/ Cerrar el men\u00fa cuando se hace clic en un enlace\n            mobileLinks.forEach(link => {\n                link.addEventListener(\"click\", () => {\n                    closeMenu();\n                    \n                    \/\/ Si es un enlace interno, realizar scroll suave\n                    const href = link.getAttribute(\"href\");\n                    if (href.includes(\"#\") && !href.startsWith(\"http\")) {\n                        const targetId = href.split(\"#\")[1];\n                        if (targetId) {\n                            const targetElement = document.getElementById(targetId);\n                            if (targetElement) {\n                                setTimeout(() => {\n                                    targetElement.scrollIntoView({\n                                        behavior: \"smooth\",\n                                        block: \"start\"\n                                    });\n                                }, 300);\n                            }\n                        }\n                    }\n                });\n            });\n\n            \/\/ Efecto de scroll en la Navbar\n            window.addEventListener(\"scroll\", () => {\n                const navbar = document.querySelector(\".bosques-navbar\");\n                if (window.scrollY > 50) {\n                    navbar.classList.add(\"scrolled\");\n                } else {\n                    navbar.classList.remove(\"scrolled\");\n                }\n            });\n        });\n    <\/script>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);background-color:#ffffff00;color:#ffffff00\"\/>\n\n\n<section class=\"estacion-servicio-section\" id=\"estacion-servicio\">\n        <div class=\"estacion-container\">\n            <div class=\"estacion-header\">\n                <h2 class=\"estacion-title\">Estaci\u00f3n de Servicio Inteligente<\/h2>\n                <p class=\"estacion-subtitle\">Primera estaci\u00f3n de servicio en 50 cuadras \u2022 Ubicaci\u00f3n estrat\u00e9gica en Av. Gobernador Castillo<\/p>\n                <div class=\"estacion-decorative-line\"><\/div>\n            <\/div>\n            \n            <div class=\"estacion-content\">\n                <!-- Hero Image\/Video -->\n                <div class=\"estacion-hero-container\">\n                    <div class=\"estacion-hero-image\">\n                        <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2025\/09\/estacion-de-servicio.jpg\" \n                             alt=\"Estaci\u00f3n de Servicio Inteligente\" \n                             class=\"estacion-main-image\">\n                        <div class=\"estacion-hero-overlay\">\n                            \n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Tabs de contenido -->\n                <div class=\"estacion-tabs\">\n                    <div class=\"estacion-tabs-nav\">\n                        <button class=\"estacion-tab-btn active\" data-tab=\"proyecto\">El Proyecto<\/button>\n                        <button class=\"estacion-tab-btn\" data-tab=\"servicios\">Servicios<\/button>\n                        <button class=\"estacion-tab-btn\" data-tab=\"ubicacion\">Ubicaci\u00f3n<\/button>\n                        <button class=\"estacion-tab-btn\" data-tab=\"inversion\">Inversi\u00f3n<\/button>\n                    <\/div>\n                    \n                    <div class=\"estacion-tabs-content\">\n                        <!-- Tab El Proyecto -->\n                        <div class=\"estacion-tab-pane active\" id=\"proyecto\">\n                            <div class=\"estacion-project-grid\">\n                                <div class=\"estacion-project-info\">\n                                    <h3>Un Proyecto Revolucionario<\/h3>\n                                    <p>En el coraz\u00f3n de la Avenida Gobernador Castillo se desarrollar\u00e1 la primera estaci\u00f3n de servicio inteligente de Catamarca, en un predio superior a 5.000 m\u00b2 con ubicaci\u00f3n estrat\u00e9gicamente aprobada por el Municipio de la Capital.<\/p>\n                                    \n                                    <div class=\"estacion-features-grid\">\n                                        <div class=\"estacion-feature-card\">\n                                            <i class=\"fas fa-gas-pump\"><\/i>\n                                            <h4>Tecnolog\u00eda Avanzada<\/h4>\n                                            <p>Estaci\u00f3n de \u00faltima generaci\u00f3n con sistemas inteligentes de carga<\/p>\n                                        <\/div>\n                                        <div class=\"estacion-feature-card\">\n                                            <i class=\"fas fa-road\"><\/i>\n                                            <h4>Accesos Perimetrales<\/h4>\n                                            <p>Dise\u00f1o con accesos desde todos los frentes para m\u00e1xima comodidad<\/p>\n                                        <\/div>\n                                        <div class=\"estacion-feature-card\">\n                                            <i class=\"fas fa-map-marker-alt\"><\/i>\n                                            <h4>Ubicaci\u00f3n \u00danica<\/h4>\n                                            <p>Primera estaci\u00f3n en un radio de m\u00e1s de 50 cuadras<\/p>\n                                        <\/div>\n                                        <div class=\"estacion-feature-card\">\n                                            <i class=\"fas fa-building\"><\/i>\n                                            <h4>Complejo Integral<\/h4>\n                                            <p>+4.000 m\u00b2 construidos de espacios comerciales<\/p>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                \n                                <div class=\"estacion-stats\">\n                                    <div class=\"estacion-stat-item\">\n                                        <span class=\"estacion-stat-number\">+5.000<\/span>\n                                        <span class=\"estacion-stat-label\">m\u00b2 de superficie<\/span>\n                                    <\/div>\n                                    <div class=\"estacion-stat-item\">\n                                        <span class=\"estacion-stat-number\">+4.000<\/span>\n                                        <span class=\"estacion-stat-label\">m\u00b2 construidos<\/span>\n                                    <\/div>\n                                    <div class=\"estacion-stat-item\">\n                                        <span class=\"estacion-stat-number\">50<\/span>\n                                        <span class=\"estacion-stat-label\">cuadras sin competencia<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Tab Servicios -->\n                        <div class=\"estacion-tab-pane\" id=\"servicios\">\n                            <div class=\"estacion-services\">\n                                <h3>Servicios Integrales<\/h3>\n                                <p>M\u00e1s que una estaci\u00f3n de servicio, un complejo comercial completo<\/p>\n                                \n                                <div class=\"estacion-services-grid\">\n                                    <div class=\"estacion-service-category\">\n                                        <div class=\"estacion-service-header\">\n                                            <i class=\"fas fa-gas-pump\"><\/i>\n                                            <h4>Combustibles<\/h4>\n                                        <\/div>\n                                        <ul>\n                                            <li>Nafta s\u00faper y com\u00fan<\/li>\n                                            <li>Gasoil com\u00fan y premium<\/li>\n                                            <li>GNC (Gas Natural Comprimido)<\/li>\n                                            <li>Carga el\u00e9ctrica para veh\u00edculos<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                    \n                                    <div class=\"estacion-service-category\">\n                                        <div class=\"estacion-service-header\">\n                                            <i class=\"fas fa-utensils\"><\/i>\n                                            <h4>Gastronom\u00eda<\/h4>\n                                        <\/div>\n                                        <ul>\n                                            <li>Restaurante panor\u00e1mico<\/li>\n                                            <li>Cafeter\u00eda express<\/li>\n                                            <li>Terrazas al aire libre<\/li>\n                                            <li>Locales gastron\u00f3micos especializados<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                    \n                                    <div class=\"estacion-service-category\">\n                                        <div class=\"estacion-service-header\">\n                                            <i class=\"fas fa-store\"><\/i>\n                                            <h4>Comercio<\/h4>\n                                        <\/div>\n                                        <ul>\n                                            <li>Minimercado 24 horas<\/li>\n                                            <li>Farmacia<\/li>\n                                            <li>Locales comerciales<\/li>\n                                            <li>Servicios bancarios<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                    \n                                    <div class=\"estacion-service-category\">\n                                        <div class=\"estacion-service-header\">\n                                            <i class=\"fas fa-car\"><\/i>\n                                            <h4>Automotor<\/h4>\n                                        <\/div>\n                                        <ul>\n                                            <li>Lavadero autom\u00e1tico<\/li>\n                                            <li>Lubricentro express<\/li>\n                                            <li>Gomer\u00eda<\/li>\n                                            <li>Accesorios automotores<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                <\/div>\n                                \n                                <div class=\"estacion-innovation-banner\">\n                                    <h4>Innovaci\u00f3n Tecnol\u00f3gica<\/h4>\n                                    <p>Sistema de pago digital, app m\u00f3vil, gesti\u00f3n inteligente de combustibles y experiencia de usuario premium<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Tab Ubicaci\u00f3n -->\n                        <div class=\"estacion-tab-pane\" id=\"ubicacion\">\n                            <div class=\"estacion-location\">\n                                <div class=\"estacion-map\">\n                                    <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m17!1m12!1m3!1d3508.2912650103176!2d-65.765361!3d-28.440635000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMjjCsDI2JzI2LjMiUyA2NcKwNDUnNTUuMyJX!5e0!3m2!1sen!2sar!4v1751757444968!5m2!1sen!2sar\" \n                                            width=\"100%\" \n                                            height=\"100%\" \n                                            style=\"border:0;\" \n                                            allowfullscreen=\"\" \n                                            loading=\"lazy\"><\/iframe>\n                                <\/div>\n                                \n                                <div class=\"estacion-location-details\">\n                                    <h3>Ubicaci\u00f3n Estrat\u00e9gica<\/h3>\n                                    <p>Avenida Gobernador Castillo - Zona Norte de San Fernando del Valle de Catamarca<\/p>\n                                    \n                                    <div class=\"estacion-proximity\">\n                                        <h4>Puntos de Inter\u00e9s Cercanos<\/h4>\n                                        <ul>\n                                            <li><i class=\"fas fa-futbol\"><\/i> Estadio Bicentenario<\/li>\n                                            <li><i class=\"fas fa-calendar-alt\"><\/i> Predio Ferial Catamarca<\/li>\n                                            <li><i class=\"fas fa-rugby-ball\"><\/i> Canchas de Rugby (Catamarca Rugby y Los Teros)<\/li>\n                                            <li><i class=\"fas fa-cocktail\"><\/i> Zona de entretenimiento nocturno<\/li>\n                                            <li><i class=\"fas fa-horse\"><\/i> Club H\u00edpico<\/li>\n                                            <li><i class=\"fas fa-tree\"><\/i> Parque Adam Quidorga<\/li>\n                                            <li><i class=\"fas fa-landmark\"><\/i> CAPE (Centro Administrativo Provincial)<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                    \n                                    <div class=\"estacion-connectivity\">\n                                        <h4>Conectividad<\/h4>\n                                        <div class=\"estacion-routes\">\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Centro de la ciudad<\/span>\n                                            <\/div>\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Poder Judicial<\/span>\n                                            <\/div>\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Nueva Legislatura Provincial<\/span>\n                                            <\/div>\t\t\t\t\t\t\t\t\t\t\t\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Quebrada de Moreira<\/span>\n                                            <\/div>\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Avenida Terebinto<\/span>\n                                            <\/div>\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Gruta de la Virgen del Valle<\/span>\n                                            <\/div>\n                                            <div class=\"estacion-route\">\n                                                <i class=\"fas fa-arrow-right\"><\/i>\n                                                <span>Avenida de Circunvalaci\u00f3n<\/span>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Tab Inversi\u00f3n -->\n                        <div class=\"estacion-tab-pane\" id=\"inversion\">\n                            <div class=\"estacion-investment\">\n                                <h3>Oportunidad de Inversi\u00f3n<\/h3>\n                                <p>Polo ic\u00f3nico con retornos sostenidos en el tiempo<\/p>\n                                \n                                <div class=\"estacion-investment-grid\">\n                                    <div class=\"estacion-investment-card primary\">\n                                        <div class=\"estacion-investment-header\">\n                                            <i class=\"fas fa-chart-line\"><\/i>\n                                            <h4>Rentabilidad Garantizada<\/h4>\n                                        <\/div>\n                                        <ul>\n                                            <li>Demanda asegurada por ubicaci\u00f3n exclusiva<\/li>\n                                            <li>M\u00faltiples fuentes de ingresos<\/li>\n                                            <li>Crecimiento sostenido del sector<\/li>\n                                            <li>ROI proyectado a 5 a\u00f1os<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                    \n                                    <div class=\"estacion-investment-card secondary\">\n                                        <div class=\"estacion-investment-header\">\n                                            <i class=\"fas fa-handshake\"><\/i>\n                                            <h4>Modalidades de Participaci\u00f3n<\/h4>\n                                        <\/div>\n                                        <ul>\n                                            <li>Inversi\u00f3n integral del proyecto<\/li>\n                                            <li>Participaci\u00f3n por m\u00f3dulos comerciales<\/li>\n                                            <li>Joint venture con desarrollador<\/li>\n                                            <li>Financiamiento flexible<\/li>\n                                        <\/ul>\n                                    <\/div>\n                                <\/div>\n                                \n                                <div class=\"estacion-advantages\">\n                                    <h4>Ventajas Competitivas<\/h4>\n                                    <div class=\"estacion-advantages-grid\">\n                                        <div class=\"estacion-advantage\">\n                                            <i class=\"fas fa-star\"><\/i>\n                                            <span>Primera estaci\u00f3n en 50 cuadras<\/span>\n                                        <\/div>\n                                        <div class=\"estacion-advantage\">\n                                            <i class=\"fas fa-users\"><\/i>\n                                            <span>Alto tr\u00e1fico vehicular garantizado<\/span>\n                                        <\/div>\n                                        <div class=\"estacion-advantage\">\n                                            <i class=\"fas fa-building\"><\/i>\n                                            <span>Desarrollo inmobiliario circundante<\/span>\n                                        <\/div>\n                                        <div class=\"estacion-advantage\">\n                                            <i class=\"fas fa-rocket\"><\/i>\n                                            <span>Tecnolog\u00eda de \u00faltima generaci\u00f3n<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- CTA Final -->\n                <div class=\"estacion-cta\">\n                    <h3>\u00bfInteresado en ser parte de este proyecto?<\/h3>\n                    <p>Cont\u00e1ctanos para conocer m\u00e1s sobre las oportunidades de inversi\u00f3n en la Estaci\u00f3n de Servicio Inteligente<\/p>\n                    <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/contacto-2\/\" class=\"estacion-cta-btn\">\n                        <span>Solicitar Informaci\u00f3n de Inversi\u00f3n<\/span>\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <style>\n            \/* Variables de colores - Solo verdes de la paleta *\/\n            .estacion-servicio-section {\n                --estacion-text-primary: #213026;\n                --estacion-bg-primary: #f6f8f4;\n                --estacion-bg-secondary: #0c1511;\n                --estacion-text-secondary: #37483a;\n                --estacion-accent-green: #4a6741;\n                --estacion-accent-light: #6b8e5a;\n                \n                padding: 80px 20px;\n                background: var(--estacion-bg-primary);\n                font-family: \"Inter\", \"Segoe UI\", sans-serif;\n                color: var(--estacion-text-primary);\n            }\n            \n            .estacion-container {\n                max-width: 1200px;\n                margin: 0 auto;\n            }\n            \n            .estacion-header {\n                text-align: center;\n                margin-bottom: 60px;\n            }\n            \n            .estacion-title {\n                font-size: 2.5rem;\n                font-weight: 700;\n                margin-bottom: 16px;\n                color: var(--estacion-text-primary);\n            }\n            \n            .estacion-subtitle {\n                font-size: 1.2rem;\n                color: var(--estacion-text-secondary);\n                margin-bottom: 24px;\n            }\n            \n            .estacion-decorative-line {\n                width: 80px;\n                height: 4px;\n                background: var(--estacion-accent-green);\n                margin: 0 auto;\n                border-radius: 2px;\n            }\n            \n            .estacion-hero-container {\n                margin-bottom: 40px;\n            }\n            \n            .estacion-hero-image {\n                position: relative;\n                height: 400px;\n                border-radius: 12px;\n                overflow: hidden;\n                box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n            }\n            \n            .estacion-main-image {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n            }\n            \n            .estacion-hero-overlay {\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: linear-gradient(135deg, rgba(12,21,17,0.7) 0%, rgba(74,103,65,0.5) 100%);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n            \n            .estacion-hero-content {\n                text-align: center;\n                color: white;\n            }\n            \n            .estacion-hero-content h3 {\n                font-size: 2rem;\n                margin-bottom: 12px;\n            }\n            \n            .estacion-hero-content p {\n                font-size: 1.2rem;\n                opacity: 0.9;\n            }\n            \n            .estacion-tabs {\n                background: white;\n                border-radius: 12px;\n                box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n                overflow: hidden;\n                margin-bottom: 40px;\n            }\n            \n            .estacion-tabs-nav {\n                display: flex;\n                background: var(--estacion-bg-secondary);\n                flex-wrap: wrap;\n            }\n            \n            .estacion-tab-btn {\n                flex: 1;\n                padding: 16px 24px;\n                background: transparent;\n                border: none;\n                color: rgba(255,255,255,0.7);\n                cursor: pointer;\n                transition: all 0.3s ease;\n                font-size: 1rem;\n                font-weight: 500;\n                min-width: 200px;\n            }\n            \n            .estacion-tab-btn.active,\n            .estacion-tab-btn:hover {\n                background: var(--estacion-accent-green);\n                color: white;\n            }\n            \n            .estacion-tabs-content {\n                padding: 40px;\n            }\n            \n            .estacion-tab-pane {\n                display: none;\n            }\n            \n            .estacion-tab-pane.active {\n                display: block;\n            }\n            \n            \/* Estilos del tab Proyecto *\/\n            .estacion-project-grid {\n                display: grid;\n                grid-template-columns: 2fr 1fr;\n                gap: 40px;\n                margin-bottom: 32px;\n            }\n            \n            .estacion-project-info h3 {\n                color: var(--estacion-text-primary);\n                margin-bottom: 20px;\n                font-size: 1.8rem;\n            }\n            \n            .estacion-project-info p {\n                color: var(--estacion-text-secondary);\n                line-height: 1.6;\n                margin-bottom: 32px;\n            }\n            \n            .estacion-features-grid {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 20px;\n            }\n            \n            .estacion-feature-card {\n                background: #f8f9fa;\n                padding: 24px;\n                border-radius: 8px;\n                text-align: center;\n                border-top: 3px solid var(--estacion-accent-green);\n            }\n            \n            .estacion-feature-card i {\n                font-size: 2rem;\n                color: var(--estacion-accent-green);\n                margin-bottom: 16px;\n            }\n            \n            .estacion-feature-card h4 {\n                color: var(--estacion-text-primary);\n                margin-bottom: 12px;\n                font-size: 1.1rem;\n            }\n            \n            .estacion-feature-card p {\n                color: var(--estacion-text-secondary);\n                font-size: 0.9rem;\n                margin: 0;\n            }\n            \n            .estacion-stats {\n                display: flex;\n                flex-direction: column;\n                gap: 24px;\n            }\n            \n            .estacion-stat-item {\n                background: var(--estacion-accent-green);\n                color: white;\n                padding: 24px;\n                border-radius: 8px;\n                text-align: center;\n            }\n            \n            .estacion-stat-number {\n                display: block;\n                font-size: 2.5rem;\n                font-weight: 700;\n                margin-bottom: 8px;\n            }\n            \n            .estacion-stat-label {\n                display: block;\n                font-size: 0.9rem;\n                opacity: 0.9;\n            }\n            \n            \/* Estilos del tab Servicios *\/\n            .estacion-services h3 {\n                color: var(--estacion-text-primary);\n                margin-bottom: 12px;\n                font-size: 1.8rem;\n            }\n            \n            .estacion-services > p {\n                color: var(--estacion-text-secondary);\n                margin-bottom: 32px;\n            }\n            \n            .estacion-services-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n                gap: 24px;\n                margin-bottom: 32px;\n            }\n            \n            .estacion-service-category {\n                background: #f8f9fa;\n                padding: 24px;\n                border-radius: 8px;\n                border-left: 4px solid var(--estacion-accent-green);\n            }\n            \n            .estacion-service-header {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n                margin-bottom: 16px;\n            }\n            \n            .estacion-service-header i {\n                color: var(--estacion-accent-green);\n                font-size: 1.5rem;\n            }\n            \n            .estacion-service-header h4 {\n                color: var(--estacion-text-primary);\n                margin: 0;\n            }\n            \n            .estacion-service-category ul {\n                list-style: none;\n                padding: 0;\n                margin: 0;\n            }\n            \n            .estacion-service-category li {\n                color: var(--estacion-text-secondary);\n                padding: 8px 0;\n                border-bottom: 1px solid #e9ecef;\n                position: relative;\n                padding-left: 20px;\n            }\n            \n            .estacion-service-category li:before {\n                content: \"\u2022\";\n                color: var(--estacion-accent-green);\n                position: absolute;\n                left: 0;\n                top: 8px;\n            }\n            \n            .estacion-service-category li:last-child {\n                border-bottom: none;\n            }\n            \n            .estacion-innovation-banner {\n                background: linear-gradient(135deg, var(--estacion-accent-green), var(--estacion-accent-light));\n                color: white;\n                padding: 32px;\n                border-radius: 8px;\n                text-align: center;\n            }\n            \n            .estacion-innovation-banner h4 {\n                margin-top: 0;\n                margin-bottom: 16px;\n                font-size: 1.5rem;\n            }\n            \n            .estacion-innovation-banner p {\n                margin: 0;\n                opacity: 0.9;\n                line-height: 1.6;\n            }\n            \n            \/* Estilos del tab Ubicaci\u00f3n *\/\n            .estacion-location {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 32px;\n            }\n            \n            .estacion-map {\n                height: 400px;\n                border-radius: 8px;\n                overflow: hidden;\n            }\n            \n            .estacion-location-details {\n                background: #f8f9fa;\n                padding: 24px;\n                border-radius: 8px;\n            }\n            \n            .estacion-location-details h3 {\n                color: var(--estacion-text-primary);\n                margin-top: 0;\n                margin-bottom: 8px;\n            }\n            \n            .estacion-location-details > p {\n                color: var(--estacion-text-secondary);\n                margin-bottom: 24px;\n                font-style: italic;\n            }\n            \n            .estacion-proximity h4,\n            .estacion-connectivity h4 {\n                color: var(--estacion-text-primary);\n                margin-bottom: 16px;\n                border-bottom: 2px solid var(--estacion-accent-green);\n                padding-bottom: 8px;\n            }\n            \n            .estacion-proximity ul {\n                list-style: none;\n                padding: 0;\n                margin-bottom: 24px;\n            }\n            \n            .estacion-proximity li {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n                color: var(--estacion-text-secondary);\n                padding: 8px 0;\n            }\n            \n            .estacion-proximity li i {\n                color: var(--estacion-accent-green);\n                width: 20px;\n            }\n            \n            .estacion-routes {\n                display: flex;\n                flex-direction: column;\n                gap: 12px;\n            }\n            \n            .estacion-route {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n                padding: 12px;\n                background: rgba(74, 103, 65, 0.1);\n                border-radius: 6px;\n                color: var(--estacion-text-primary);\n            }\n            \n            .estacion-route i {\n                color: var(--estacion-accent-green);\n            }\n            \n            \/* Estilos del tab Inversi\u00f3n *\/\n            .estacion-investment h3 {\n                color: var(--estacion-text-primary);\n                margin-bottom: 12px;\n                font-size: 1.8rem;\n            }\n            \n            .estacion-investment > p {\n                color: var(--estacion-text-secondary);\n                margin-bottom: 32px;\n            }\n            \n            .estacion-investment-grid {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 24px;\n                margin-bottom: 32px;\n            }\n            \n            .estacion-investment-card {\n                background: #f8f9fa;\n                padding: 24px;\n                border-radius: 8px;\n                border-top: 4px solid var(--estacion-accent-green);\n            }\n            \n            .estacion-investment-card.secondary {\n                border-top-color: var(--estacion-accent-light);\n            }\n            \n            .estacion-investment-header {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n                margin-bottom: 16px;\n            }\n            \n            .estacion-investment-header i {\n                color: var(--estacion-accent-green);\n                font-size: 1.5rem;\n            }\n            \n            .estacion-investment-header h4 {\n                color: var(--estacion-text-primary);\n                margin: 0;\n            }\n            \n            .estacion-investment-card ul {\n                list-style: none;\n                padding: 0;\n                margin: 0;\n            }\n            \n            .estacion-investment-card li {\n                color: var(--estacion-text-secondary);\n                padding: 8px 0;\n                position: relative;\n                padding-left: 20px;\n            }\n            \n            .estacion-investment-card li:before {\n                content: \"\u2713\";\n                color: var(--estacion-accent-green);\n                position: absolute;\n                left: 0;\n                top: 8px;\n                font-weight: bold;\n            }\n            \n            .estacion-advantages {\n                background: #f8f9fa;\n                padding: 24px;\n                border-radius: 8px;\n            }\n            \n            .estacion-advantages h4 {\n                color: var(--estacion-text-primary);\n                margin-top: 0;\n                margin-bottom: 20px;\n                text-align: center;\n            }\n            \n            .estacion-advantages-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n                gap: 16px;\n            }\n            \n            .estacion-advantage {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n                padding: 16px;\n                background: white;\n                border-radius: 6px;\n                border-left: 3px solid var(--estacion-accent-green);\n            }\n            \n            .estacion-advantage i {\n                color: var(--estacion-accent-green);\n                font-size: 1.2rem;\n            }\n            \n            .estacion-advantage span {\n                color: var(--estacion-text-primary);\n                font-weight: 500;\n            }\n            \n            \/* CTA Final *\/\n            .estacion-cta {\n                background: var(--estacion-bg-secondary);\n                color: white;\n                padding: 48px;\n                border-radius: 12px;\n                text-align: center;\n            }\n            \n            .estacion-cta h3 {\n                margin-top: 0;\n                color: white;\n                margin-bottom: 16px;\n                font-size: 1.8rem;\n            }\n            \n            .estacion-cta p {\n                margin-bottom: 32px;\n                font-size: 1.1rem;\n                opacity: 0.9;\n            }\n            \n            .estacion-cta-btn {\n                background: var(--estacion-accent-green);\n                color: white;\n                padding: 16px 32px;\n                border: none;\n                border-radius: 8px;\n                font-size: 1.1rem;\n                font-weight: 600;\n                cursor: pointer;\n                display: inline-flex;\n                align-items: center;\n                gap: 12px;\n                transition: all 0.3s ease;\n                text-decoration: none;\n            }\n            \n            .estacion-cta-btn:hover {\n                background: var(--estacion-accent-light);\n                transform: translateY(-2px);\n                color: white;\n                text-decoration: none;\n            }\n            \n            \/* Responsive Design *\/\n            @media (max-width: 768px) {\n                .estacion-servicio-section {\n                    padding: 60px 16px;\n                }\n                \n                .estacion-title {\n                    font-size: 2rem;\n                }\n                \n                .estacion-subtitle {\n                    font-size: 1rem;\n                }\n                \n                .estacion-hero-image {\n                    height: 300px;\n                }\n                \n                .estacion-hero-content h3 {\n                    font-size: 1.5rem;\n                }\n                \n                .estacion-hero-content p {\n                    font-size: 1rem;\n                }\n                \n                .estacion-tabs-nav {\n                    flex-direction: column;\n                }\n                \n                .estacion-tab-btn {\n                    min-width: 100%;\n                }\n                \n                .estacion-tabs-content {\n                    padding: 24px;\n                }\n                \n                .estacion-project-grid {\n                    grid-template-columns: 1fr;\n                    gap: 24px;\n                }\n                \n                .estacion-features-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .estacion-stats {\n                    grid-template-columns: 1fr;\n                }\n                \n                .estacion-services-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .estacion-location {\n                    grid-template-columns: 1fr;\n                }\n                \n                .estacion-map {\n                    height: 300px;\n                }\n                \n                .estacion-investment-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .estacion-advantages-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .estacion-cta {\n                    padding: 32px 24px;\n                }\n                \n                .estacion-cta h3 {\n                    font-size: 1.5rem;\n                }\n            }\n            \n            @media (max-width: 480px) {\n                .estacion-title {\n                    font-size: 1.8rem;\n                }\n                \n                .estacion-feature-card,\n                .estacion-service-category,\n                .estacion-investment-card {\n                    padding: 16px;\n                }\n                \n                .estacion-stat-number {\n                    font-size: 2rem;\n                }\n                \n                .estacion-cta-btn {\n                    padding: 14px 24px;\n                    font-size: 1rem;\n                }\n            }\n        <\/style>\n        \n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                \/\/ Tabs functionality\n                const tabBtns = document.querySelectorAll(\".estacion-tab-btn\");\n                const tabPanes = document.querySelectorAll(\".estacion-tab-pane\");\n                \n                tabBtns.forEach(btn => {\n                    btn.addEventListener(\"click\", function() {\n                        const tabId = this.dataset.tab;\n                        \n                        \/\/ Remove active class from all tabs\n                        tabBtns.forEach(b => b.classList.remove(\"active\"));\n                        tabPanes.forEach(p => p.classList.remove(\"active\"));\n                        \n                        \/\/ Add active class to clicked tab\n                        this.classList.add(\"active\");\n                        document.getElementById(tabId).classList.add(\"active\");\n                    });\n                });\n                \n                \/\/ Smooth scroll for internal links\n                const internalLinks = document.querySelectorAll('a[href^=\"#\"]');\n                internalLinks.forEach(link => {\n                    link.addEventListener(\"click\", function(e) {\n                        e.preventDefault();\n                        const target = document.querySelector(this.getAttribute(\"href\"));\n                        if (target) {\n                            target.scrollIntoView({\n                                behavior: \"smooth\",\n                                block: \"start\"\n                            });\n                        }\n                    });\n                });\n                \n                \/\/ Lazy loading for images\n                const images = document.querySelectorAll(\".estacion-main-image\");\n                if (\"IntersectionObserver\" in window) {\n                    const imageObserver = new IntersectionObserver((entries, observer) => {\n                        entries.forEach(entry => {\n                            if (entry.isIntersecting) {\n                                const img = entry.target;\n                                img.classList.add(\"loaded\");\n                                observer.unobserve(img);\n                            }\n                        });\n                    });\n                    \n                    images.forEach(img => imageObserver.observe(img));\n                }\n                \n                \/\/ Animate stats on scroll\n                const statNumbers = document.querySelectorAll(\".estacion-stat-number\");\n                const animateStats = (entries, observer) => {\n                    entries.forEach(entry => {\n                        if (entry.isIntersecting) {\n                            const target = entry.target;\n                            const finalNumber = target.textContent.replace(\/[^0-9]\/g, \"\");\n                            const prefix = target.textContent.replace(\/[0-9]\/g, \"\");\n                            \n                            let current = 0;\n                            const increment = finalNumber \/ 30;\n                            const timer = setInterval(() => {\n                                current += increment;\n                                if (current >= finalNumber) {\n                                    current = finalNumber;\n                                    clearInterval(timer);\n                                }\n                                target.textContent = prefix + Math.floor(current);\n                            }, 50);\n                            \n                            observer.unobserve(target);\n                        }\n                    });\n                };\n                \n                if (\"IntersectionObserver\" in window) {\n                    const statsObserver = new IntersectionObserver(animateStats, {\n                        threshold: 0.7\n                    });\n                    statNumbers.forEach(stat => statsObserver.observe(stat));\n                }\n            });\n        <\/script>\n    <\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"..\/public\/views\/revslider-page-template.php","meta":{"footnotes":""},"class_list":["post-304","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":3,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/304\/revisions"}],"predecessor-version":[{"id":308,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/304\/revisions\/308"}],"wp:attachment":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/media?parent=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}