{"id":68,"date":"2025-03-20T11:51:46","date_gmt":"2025-03-20T14:51:46","guid":{"rendered":"https:\/\/bosquesdesumalao.com\/bosques\/?page_id=68"},"modified":"2026-04-07T18:29:22","modified_gmt":"2026-04-07T21:29:22","slug":"inicio-2","status":"publish","type":"page","link":"https:\/\/bosquesdesumalao.com\/bosques\/","title":{"rendered":"inicio"},"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--40);margin-bottom:var(--wp--preset--spacing--40);background-color:#ffffff00;color:#ffffff00\"\/>\n\n\n<section class=\"bosques-hero\">\n        <div class=\"hero-overlay\"><\/div>\n        <div class=\"floating-leaves\"><\/div>\n        \n        <div class=\"hero-content\" id=\"inicio\">\n            <div class=\"logo-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2025\/07\/bosques-logo-1.png\" alt=\"Bosques Desarrolladora\" class=\"hero-logo\" loading=\"eager\">\n                <div class=\"logo-halo\"><\/div>\n            <\/div>\n            \n            <div class=\"hero-text\">\n                <h1 class=\"hero-title\">Desarrollamos espacios<br><span class=\"hero-subtitle\">donde la vida florece<\/span><\/h1>\n                <p class=\"hero-description\">Somos una desarrolladora con a\u00f1os de experiencia, comprometida en crear proyectos habitables, sustentables y de alta categor\u00eda.<\/p>\n            <\/div>\n            \n            <div class=\"projects-grid\">\n                <div class=\"project-card\" data-status=\"active\">\n                    <div class=\"project-icon\">\n                        <i class=\"fas fa-home\"><\/i>\n                    <\/div>\n                    <h3 class=\"project-title\">Terrenos en Nodo Empresarial<\/h3>\n                    <p class=\"project-description\">Ubicaci\u00f3n estrat\u00e9gica, uso residencial o comercial, cerca del estadio<\/p>\n                    <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/lotes-nodo-empresarial\/\" class=\"project-cta\">\n                        <span>Conocer m\u00e1s<\/span>\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n                \n                <div class=\"project-card\" data-status=\"active\">\n                    <div class=\"project-icon\">\n                        <i class=\"fas fa-tree\"><\/i>\n                    <\/div>\n                    <h3 class=\"project-title\">Bosques N\u00b01<\/h3>\n                    <p class=\"project-description\">Barrio semi-cerrado con un proyecto paisaj\u00edstico \u00fanico. Viv\u00ed rodeado de bosques.<\/p>\n                    <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/bosques-1\/\" class=\"project-cta\">\n                        <span>Explorar<\/span>\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n                \n                <div class=\"project-card\" data-status=\"active\">\n                    <div class=\"project-icon\">\n                        <i class=\"fas fa-gas-pump\"><\/i>\n                    <\/div>\n                    <h3 class=\"project-title\">Estaci\u00f3n de Servicio<\/h3>\n                    <p class=\"project-description\">Nodo Empresarial - Infraestructura estrat\u00e9gica en desarrollo<\/p>\n                    <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/estacion-de-servicio\/\" class=\"project-cta\">\n                        <span>Conocer m\u00e1s<\/span>\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n                \n                <div class=\"project-card\" data-status=\"active\">\n                    <div class=\"project-icon\">\n                        <i class=\"fas fa-golf-ball\"><\/i>\n                    <\/div>\n                    <h3 class=\"project-title\">Club de Golf<\/h3>\n                    <p class=\"project-description\">Polo Empresarial Catamarca - Arquitectura integrada al paisaje<\/p>\n                    <a href=\"https:\/\/bosquesdesumalao.com\/bosques\/golf\/\" class=\"project-cta\">\n                        <span>Explorar<\/span>\n                        <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n            \n            <div class=\"hero-scroll-indicator\">\n                <div class=\"chevron\"><\/div>\n                <div class=\"chevron\"><\/div>\n                <div class=\"chevron\"><\/div>\n            <\/div>\n        <\/div>\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            :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            }\n\n            .bosques-hero {\n                min-height: 100vh;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                position: relative;\n                overflow: hidden;\n                background: var(--bg-primary);\n                padding: 40px 0;\n            }\n\n            .floating-leaves {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                z-index: 1;\n                pointer-events: none;\n            }\n\n            .leaf {\n                position: absolute;\n                opacity: 0;\n                animation: float 18s infinite linear;\n                filter: drop-shadow(0 2px 4px rgba(12,21,17,0.1));\n                transform-origin: center;\n                background-size: contain;\n                background-repeat: no-repeat;\n                background-position: center;\n            }\n\n            @keyframes float {\n                0% {\n                    transform: translate(calc(-50vw + 100px), 120vh) rotate(0deg) scale(0.8);\n                    opacity: 0;\n                }\n                15% {\n                    opacity: 0.4;\n                }\n                85% {\n                    opacity: 0.4;\n                }\n                100% {\n                    transform: translate(calc(50vw - 100px), -20vh) rotate(720deg) scale(1.2);\n                    opacity: 0;\n                }\n            }\n\n            .hero-overlay {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                background: linear-gradient(rgba(246,248,244,0.93), rgba(246,248,244,0.88)),\n                            url(\"imagen-fondo-naturaleza.jpg\") center\/cover;\n                z-index: 2;\n                mix-blend-mode: multiply;\n            }\n\n            .hero-content {\n                position: relative;\n                z-index: 3;\n                text-align: center;\n                padding: 20px;\n                max-width: 1200px;\n                margin: 0 auto;\n                width: 100%;\n            }\n\n            .logo-wrapper {\n                position: relative;\n                display: inline-block;\n                margin-bottom: 3rem;\n                perspective: 1000px;\n            }\n\n            .hero-logo {\n                width: 100px;\n                height: auto;\n                filter: drop-shadow(0 4px 12px rgba(12,21,17,0.08));\n                transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n                transform-style: preserve-3d;\n                animation: logoEntrance 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n            }\n\n            @keyframes logoEntrance {\n                0% {\n                    opacity: 0;\n                    transform: translateY(2rem) rotateX(60deg);\n                }\n                100% {\n                    opacity: 1;\n                    transform: translateY(0) rotateX(0);\n                }\n            }\n\n            .logo-halo {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 240px;\n                height: 240px;\n                background: radial-gradient(circle, rgba(55,72,58,0.08) 0%, transparent 70%);\n                pointer-events: none;\n                animation: haloPulse 4s ease-in-out infinite;\n            }\n\n            @keyframes haloPulse {\n                0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); }\n                50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }\n            }\n\n            .hero-title {\n                font-family: \"Inter\", sans-serif;\n                font-weight: 600;\n                font-size: 3rem;\n                color: var(--text-primary);\n                line-height: 1.1;\n                margin: 0 0 15px 0;\n                transform: translateY(30px);\n                opacity: 0;\n                animation: titleReveal 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s forwards;\n            }\n\n            @keyframes titleReveal {\n                to {\n                    transform: translateY(0);\n                    opacity: 1;\n                }\n            }\n\n            .hero-subtitle {\n                display: block;\n                font-size: 1.6rem;\n                font-weight: 400;\n                color: var(--text-secondary);\n                margin-top: 10px;\n                opacity: 0;\n                animation: subtitleReveal 1s ease 0.8s forwards;\n            }\n\n            @keyframes subtitleReveal {\n                from {\n                    opacity: 0;\n                    transform: translateY(10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            .hero-description {\n                font-size: 1.1rem;\n                color: var(--text-secondary);\n                max-width: 600px;\n                margin: 20px auto 40px;\n                line-height: 1.6;\n                opacity: 0;\n                animation: descriptionReveal 1s ease 1.1s forwards;\n            }\n\n            @keyframes descriptionReveal {\n                from {\n                    opacity: 0;\n                    transform: translateY(10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            .projects-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n                gap: 25px;\n                margin: 50px 0 80px;\n                opacity: 0;\n                animation: gridReveal 1s ease 1.4s forwards;\n            }\n\n            @keyframes gridReveal {\n                from {\n                    opacity: 0;\n                    transform: translateY(30px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            .project-card {\n                background: rgba(255, 255, 255, 0.8);\n                backdrop-filter: blur(10px);\n                border: 1px solid rgba(55, 72, 58, 0.1);\n                border-radius: 20px;\n                padding: 30px 25px;\n                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n                position: relative;\n                overflow: hidden;\n                transform: translateY(0);\n                animation: cardEntrance 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n            }\n\n            .project-card:nth-child(1) { animation-delay: 1.6s; }\n            .project-card:nth-child(2) { animation-delay: 1.8s; }\n            .project-card:nth-child(3) { animation-delay: 2s; }\n            .project-card:nth-child(4) { animation-delay: 2.2s; }\n\n            @keyframes cardEntrance {\n                from {\n                    opacity: 0;\n                    transform: translateY(30px) scale(0.9);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0) scale(1);\n                }\n            }\n\n            .project-card::before {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                left: -100%;\n                width: 100%;\n                height: 100%;\n                background: linear-gradient(120deg,\n                    transparent,\n                    rgba(74, 103, 65, 0.05),\n                    transparent);\n                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n\n            .project-card:hover {\n                transform: translateY(-8px);\n                box-shadow: 0 20px 40px rgba(33, 48, 38, 0.12);\n                border-color: rgba(74, 103, 65, 0.2);\n            }\n\n            .project-card:hover::before {\n                left: 100%;\n            }\n\n            .project-card[data-status=\"coming\"] {\n                background: rgba(255, 255, 255, 0.4);\n                border-color: rgba(55, 72, 58, 0.08);\n            }\n\n            .project-card[data-status=\"coming\"] .project-title,\n            .project-card[data-status=\"coming\"] .project-description {\n                opacity: 0.7;\n            }\n\n            .project-icon {\n                font-size: 2.5rem;\n                margin-bottom: 15px;\n                filter: drop-shadow(0 2px 4px rgba(12,21,17,0.1));\n            }\n\n            .project-title {\n                font-family: \"Inter\", sans-serif;\n                font-weight: 600;\n                font-size: 1.3rem;\n                color: var(--text-primary);\n                margin: 0 0 10px 0;\n                line-height: 1.2;\n            }\n\n            .project-description {\n                font-size: 0.95rem;\n                color: var(--text-secondary);\n                line-height: 1.4;\n                margin-bottom: 20px;\n            }\n\n            .project-cta {\n                display: inline-block;\n                padding: 10px 25px;\n                background: var(--accent-green);\n                color: white;\n                text-decoration: none;\n                border-radius: 25px;\n                font-weight: 500;\n                font-size: 0.9rem;\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n                position: relative;\n                overflow: hidden;\n            }\n\n            .project-cta::before {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                left: -100%;\n                width: 100%;\n                height: 100%;\n                background: linear-gradient(120deg,\n                    transparent,\n                    rgba(255,255,255,0.2),\n                    transparent);\n                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n\n            .project-cta:hover {\n                background: var(--accent-light);\n                transform: translateY(-2px);\n                box-shadow: 0 6px 15px rgba(74, 103, 65, 0.3);\n            }\n\n            .project-cta:hover::before {\n                left: 100%;\n            }\n\n            .project-cta.coming-soon {\n                background: rgba(55, 72, 58, 0.3);\n                color: var(--text-secondary);\n                cursor: default;\n            }\n\n            .project-cta.coming-soon:hover {\n                background: rgba(55, 72, 58, 0.3);\n                transform: none;\n                box-shadow: none;\n            }\n\n            .hero-scroll-indicator {\n                position: absolute;\n                bottom: 30px;\n                left: 50%;\n                transform: translateX(-50%);\n                z-index: 4;\n                animation: scrollBounce 2s infinite;\n            }\n\n            @keyframes scrollBounce {\n                0%, 100% { transform: translateY(0) translateX(-50%); }\n                50% { transform: translateY(10px) translateX(-50%); }\n            }\n\n            .chevron {\n                width: 12px;\n                height: 12px;\n                border: 2px solid var(--text-primary);\n                border-left: none;\n                border-top: none;\n                transform: rotate(45deg);\n                margin: -4px;\n                animation: scrollPulse 2s infinite;\n            }\n\n            @keyframes scrollPulse {\n                0%, 100% { opacity: 0.3; }\n                50% { opacity: 1; }\n            }\n\n            \/* Responsive Design *\/\n            @media (max-width: 992px) {\n                .hero-title { font-size: 2.4rem; }\n                .hero-subtitle { font-size: 1.4rem; }\n                .hero-logo { width: 170px; }\n                .logo-halo { width: 210px; height: 210px; }\n                .projects-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }\n            }\n\n            @media (max-width: 768px) {\n                .hero-title { font-size: 2rem; }\n                .hero-subtitle { font-size: 1.2rem; }\n                .hero-logo { width: 140px; }\n                .logo-halo { width: 180px; height: 180px; }\n                .projects-grid { grid-template-columns: 1fr; gap: 15px; margin: 40px 0 60px; }\n                .project-card { padding: 25px 20px; }\n                .hero-description { font-size: 1rem; }\n            }\n\n            @media (max-width: 480px) {\n                .hero-title { font-size: 1.8rem; }\n                .hero-subtitle { font-size: 1.1rem; }\n                .hero-content { padding: 15px; }\n                .project-card { padding: 20px 15px; }\n                .project-icon { font-size: 2rem; }\n                .project-title { font-size: 1.2rem; }\n            }\n        <\/style>\n\n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                \/\/ Generador de hojas din\u00e1mico\n                function createFoliage() {\n                    const container = document.querySelector(\".floating-leaves\");\n                    if (!container) return;\n                    \n                    const leafCount = window.innerWidth < 768 ? 8 : 12;\n                    const leafImageUrl = \"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2025\/03\/Hojas-Hero.png\";\n\n                    container.innerHTML = \"\";\n\n                    for(let i = 0; i < leafCount; i++) {\n                        const leaf = document.createElement(\"div\");\n                        leaf.className = \"leaf\";\n                        \n                        leaf.style.backgroundImage = `url(${leafImageUrl})`;\n                        leaf.style.left = `${Math.random() * 100}%`;\n                        leaf.style.animationDelay = `${Math.random() * 8}s`;\n                        leaf.style.animationDuration = `${14 + Math.random() * 8}s`;\n                        \n                        const leafSize = 35 + Math.random() * 25;\n                        leaf.style.width = `${leafSize}px`;\n                        leaf.style.height = `${leafSize}px`;\n                        \n                        container.appendChild(leaf);\n                    }\n                }\n\n                \/\/ Efecto parallax suave\n                let mouseX = 0, mouseY = 0;\n                \n                document.addEventListener(\"mousemove\", (e) => {\n                    mouseX = (e.clientX \/ window.innerWidth - 0.5) * 10;\n                    mouseY = (e.clientY \/ window.innerHeight - 0.5) * 10;\n                });\n\n                function updateParallax() {\n                    document.querySelectorAll(\".leaf\").forEach(leaf => {\n                        const progress = (performance.now() * 0.001) % 1;\n                        const speed = (1 - progress) * 0.3;\n                        \n                        leaf.style.transform = `\n                            translate(\n                                ${mouseX * speed}px, \n                                ${mouseY * speed}px\n                            )\n                            rotate(${Math.sin(performance.now() * 0.001) * 3}deg)\n                        `;\n                    });\n                    requestAnimationFrame(updateParallax);\n                }\n\n                \/\/ Inicializaci\u00f3n\n                createFoliage();\n                updateParallax();\n\n                \/\/ Smooth Scroll\n                document.querySelectorAll(\"a[href^='#']\").forEach(anchor => {\n                    anchor.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                \/\/ Hover del logo\n                const logo = document.querySelector(\".hero-logo\");\n                if(logo) {\n                    logo.addEventListener(\"mouseenter\", () => {\n                        logo.style.transform = \"rotate(-2deg) scale(1.05)\";\n                    });\n                    logo.addEventListener(\"mouseleave\", () => {\n                        logo.style.transform = \"rotate(0) scale(1)\";\n                    });\n                }\n\n                \/\/ Animaci\u00f3n de entrada escalonada para las tarjetas\n                const observer = new IntersectionObserver((entries) => {\n                    entries.forEach(entry => {\n                        if (entry.isIntersecting) {\n                            entry.target.style.animationPlayState = \"running\";\n                        }\n                    });\n                });\n\n                document.querySelectorAll(\".project-card\").forEach(card => {\n                    observer.observe(card);\n                });\n            });\n        <\/script>\n    <\/section>\n\n\n    <style>\n        .bosques-carousel-container {\n            background-color: #0c1511; \/* --bosques-bg-secondary *\/\n            padding: 60px 0;\n            overflow: hidden;\n            position: relative;\n            display: flex;\n            align-items: center;\n        }\n\n        .bosques-carousel-track {\n            display: flex;\n            width: calc(250px * 27);\n            animation: scroll 30s linear infinite;\n        }\n\n        .bosques-carousel-track:hover {\n            animation-play-state: paused;\n        }\n\n        .bosques-logo-item {\n            width: 250px;\n            height: 100px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 0 40px;\n            flex-shrink: 0;\n        }\n\n        .bosques-logo-item img {\n            max-width: 100%;\n            max-height: 70px;\n            object-fit: contain;\n            filter: brightness(1); \/* Asegura que el blanco resalte *\/\n            transition: transform 0.3s ease;\n        }\n\n        .bosques-logo-item img:hover {\n            transform: scale(1.1);\n        }\n\n        @keyframes scroll {\n            0% { transform: translateX(0); }\n            100% { transform: translateX(calc(-250px * 9)); }\n        }\n\n        \/* Gradientes laterales para suavizar la entrada\/salida *\/\n        .bosques-carousel-container::before,\n        .bosques-carousel-container::after {\n            content: \"\";\n            height: 100%;\n            position: absolute;\n            width: 150px;\n            z-index: 2;\n            pointer-events: none;\n        }\n\n        .bosques-carousel-container::before {\n            left: 0;\n            background: linear-gradient(to right, #0c1511 0%, transparent 100%);\n        }\n\n        .bosques-carousel-container::after {\n            right: 0;\n            background: linear-gradient(to left, #0c1511 0%, transparent 100%);\n        }\n    <\/style>\n\n    <div class=\"bosques-carousel-container\">\n        <div class=\"bosques-carousel-track\">\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-elite.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-inmobiliaria.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                            <div class=\"bosques-logo-item\">\n                    <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2026\/04\/logo-benito-corralon.webp\" alt=\"Socio Estrat\u00e9gico Bosques de Sumalao\">\n                <\/div>\n                    <\/div>\n    <\/div>\n    \n\n\n        <style>\n            :root {\n                --bosques-text-primary: #213026;\n                --bosques-bg-primary: #f6f8f4;\n                --bosques-bg-secondary: #ffffff;\n                --bosques-text-secondary: #37483a;\n                --bosques-accent-green: #4a6741;\n                --bosques-accent-light: #6b8e5a;\n                --bosques-accent-gradient: linear-gradient(135deg, #4a6741 0%, #6b8e5a 100%);\n                --bosques-shadow-light: 0 4px 20px rgba(33, 48, 38, 0.08);\n                --bosques-shadow-medium: 0 8px 30px rgba(33, 48, 38, 0.12);\n                --bosques-shadow-heavy: 0 15px 40px rgba(33, 48, 38, 0.15);\n                --bosques-border-radius: 16px;\n                --bosques-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n                --bosques-spacing-xs: 10px;\n                --bosques-spacing-sm: 20px;\n                --bosques-spacing-md: 40px;\n                --bosques-spacing-lg: 60px;\n                --bosques-spacing-xl: 80px;\n            }\n\n            .bosques-historia {\n                padding: var(--bosques-spacing-xl) 0;\n                background: var(--bosques-bg-primary);\n                position: relative;\n                overflow: hidden;\n            }\n\n            .historia-container {\n                max-width: 1200px;\n                margin: 0 auto;\n                padding: 0 var(--bosques-spacing-sm);\n                position: relative;\n            }\n\n            \/* Header mejorado *\/\n            .historia-header {\n                text-align: center;\n                margin-bottom: var(--bosques-spacing-lg);\n            }\n\n            .header-icon {\n                font-size: 3.5rem;\n                color: var(--bosques-accent-green);\n                margin-bottom: var(--bosques-spacing-sm);\n                display: inline-block;\n                animation: iconPulse 4s ease-in-out infinite;\n            }\n\n            @keyframes iconPulse {\n                0%, 100% { transform: scale(1); opacity: 1; }\n                50% { transform: scale(1.05); opacity: 0.9; }\n            }\n\n            .historia-title {\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n                font-size: clamp(2.2rem, 5vw, 3rem);\n                font-weight: 800;\n                color: var(--bosques-text-primary);\n                margin: 0 0 15px 0;\n                letter-spacing: -0.02em;\n            }\n\n            .title-underline {\n                width: 100px;\n                height: 5px;\n                background: var(--bosques-accent-gradient);\n                margin: 0 auto;\n                border-radius: 3px;\n                position: relative;\n            }\n\n            \/* Contenido principal *\/\n            .historia-content {\n                display: flex;\n                flex-direction: column;\n                gap: var(--bosques-spacing-lg);\n            }\n\n            .historia-intro {\n                text-align: center;\n                max-width: 900px;\n                margin: 0 auto;\n                padding: var(--bosques-spacing-md);\n                background: var(--bosques-bg-secondary);\n                border-radius: var(--bosques-border-radius);\n                box-shadow: var(--bosques-shadow-light);\n                border: 1px solid rgba(74, 103, 65, 0.06);\n            }\n\n            .intro-text {\n                font-size: clamp(1.2rem, 2.8vw, 1.5rem);\n                line-height: 1.8;\n                color: var(--bosques-text-secondary);\n                margin: 0;\n                font-weight: 400;\n            }\n\n            \/* Journey items mejorados *\/\n            .historia-journey {\n                display: flex;\n                flex-direction: column;\n                gap: var(--bosques-spacing-md);\n            }\n\n            .journey-item {\n                display: grid;\n                grid-template-columns: auto auto 1fr;\n                align-items: center;\n                gap: var(--bosques-spacing-md);\n                background: var(--bosques-bg-secondary);\n                padding: var(--bosques-spacing-md);\n                border-radius: var(--bosques-border-radius);\n                box-shadow: var(--bosques-shadow-light);\n                border: 1px solid rgba(74, 103, 65, 0.06);\n                transition: var(--bosques-transition);\n                position: relative;\n                overflow: hidden;\n            }\n\n            .journey-item:hover {\n                transform: translateY(-4px);\n                box-shadow: var(--bosques-shadow-medium);\n                border-color: rgba(74, 103, 65, 0.12);\n            }\n\n            .journey-number {\n                width: 50px;\n                height: 50px;\n                background: linear-gradient(135deg, rgba(74, 103, 65, 0.1), rgba(74, 103, 65, 0.05));\n                border: 2px solid var(--bosques-accent-green);\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-weight: 700;\n                font-size: 1.1rem;\n                color: var(--bosques-accent-green);\n            }\n\n            .journey-icon {\n                width: 70px;\n                height: 70px;\n                background: var(--bosques-accent-gradient);\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 1.8rem;\n                color: white;\n                box-shadow: var(--bosques-shadow-light);\n                transition: var(--bosques-transition);\n            }\n\n            .journey-item:hover .journey-icon {\n                transform: scale(1.05);\n                box-shadow: var(--bosques-shadow-medium);\n            }\n\n            .journey-content h3 {\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n                font-size: 1.5rem;\n                font-weight: 700;\n                color: var(--bosques-text-primary);\n                margin: 0 0 12px 0;\n                letter-spacing: -0.01em;\n            }\n\n            .journey-content p {\n                font-size: 1.1rem;\n                line-height: 1.7;\n                color: var(--bosques-text-secondary);\n                margin: 0;\n            }\n\n            \/* Features section mejorada *\/\n            .nodo-features {\n                background: var(--bosques-bg-secondary);\n                padding: var(--bosques-spacing-lg) var(--bosques-spacing-md);\n                border-radius: 24px;\n                box-shadow: var(--bosques-shadow-light);\n                border: 1px solid rgba(74, 103, 65, 0.06);\n            }\n\n            .features-header {\n                text-align: center;\n                margin-bottom: var(--bosques-spacing-lg);\n            }\n\n            .features-title {\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n                font-size: 1.8rem;\n                font-weight: 700;\n                color: var(--bosques-text-primary);\n                margin: 0 0 8px 0;\n                letter-spacing: -0.01em;\n            }\n\n            .features-subtitle {\n                font-size: 1rem;\n                color: var(--bosques-text-secondary);\n                font-style: italic;\n            }\n\n            .features-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n                gap: var(--bosques-spacing-sm);\n            }\n\n            .feature-card {\n                background: rgba(255, 255, 255, 0.8);\n                padding: var(--bosques-spacing-md);\n                border-radius: var(--bosques-border-radius);\n                text-align: left;\n                border: 1px solid rgba(74, 103, 65, 0.06);\n                transition: var(--bosques-transition);\n                position: relative;\n                overflow: hidden;\n                cursor: pointer;\n                backdrop-filter: blur(10px);\n            }\n\n            .feature-card::before {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 4px;\n                background: var(--icon-color, var(--bosques-accent-green));\n                transform: scaleX(0);\n                transform-origin: left;\n                transition: var(--bosques-transition);\n            }\n\n            .feature-card:hover::before {\n                transform: scaleX(1);\n            }\n\n            .feature-card:hover {\n                transform: translateY(-6px);\n                box-shadow: var(--bosques-shadow-medium);\n                border-color: rgba(74, 103, 65, 0.15);\n            }\n\n            .feature-wide {\n                grid-column: span 2;\n            }\n\n            .feature-icon {\n                width: 60px;\n                height: 60px;\n                background: linear-gradient(135deg, var(--icon-color, var(--bosques-accent-green)), rgba(255,255,255,0.2));\n                border-radius: 12px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 1.5rem;\n                color: white;\n                margin-bottom: var(--bosques-spacing-sm);\n                transition: var(--bosques-transition);\n            }\n\n            .feature-card:hover .feature-icon {\n                transform: scale(1.1) rotate(5deg);\n            }\n\n            .feature-content h4 {\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n                font-size: 1.3rem;\n                font-weight: 600;\n                color: var(--bosques-text-primary);\n                margin: 0 0 10px 0;\n                letter-spacing: -0.01em;\n            }\n\n            .feature-content p {\n                font-size: 1rem;\n                color: var(--bosques-text-secondary);\n                line-height: 1.6;\n                margin: 0;\n            }\n\n            \/* Vision section mejorada *\/\n            .historia-vision {\n                background: var(--bosques-accent-gradient);\n                padding: var(--bosques-spacing-lg);\n                border-radius: 24px;\n                text-align: center;\n                color: white;\n                position: relative;\n                overflow: hidden;\n            }\n\n            .vision-icon {\n                font-size: 3rem;\n                margin-bottom: var(--bosques-spacing-sm);\n                opacity: 0.9;\n            }\n\n            .vision-content h3 {\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n                font-size: 2rem;\n                font-weight: 700;\n                margin: 0 0 var(--bosques-spacing-sm) 0;\n                letter-spacing: -0.02em;\n            }\n\n            .vision-content p {\n                font-size: 1.2rem;\n                line-height: 1.8;\n                margin: 0 auto;\n                max-width: 800px;\n                font-weight: 300;\n            }\n\n            \/* Animaciones *\/\n            [data-animate] {\n                opacity: 0;\n                transform: translateY(30px);\n                transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            }\n\n            [data-animate=\"slide-in\"] {\n                transform: translateX(-50px);\n            }\n\n            [data-animate].animated {\n                opacity: 1;\n                transform: translateY(0) translateX(0);\n            }\n\n            \/* Responsive Design *\/\n            @media (max-width: 992px) {\n                .features-grid { \n                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); \n                }\n                .feature-wide { \n                    grid-column: span 1; \n                }\n            }\n\n            @media (max-width: 768px) {\n                .bosques-historia { \n                    padding: var(--bosques-spacing-lg) 0; \n                }\n                \n                .journey-item { \n                    grid-template-columns: 1fr;\n                    text-align: center; \n                    gap: var(--bosques-spacing-sm);\n                    padding: var(--bosques-spacing-sm);\n                }\n                \n                .journey-number,\n                .journey-icon { \n                    justify-self: center;\n                }\n                \n                .nodo-features { \n                    padding: var(--bosques-spacing-md) var(--bosques-spacing-sm); \n                }\n                \n                .features-grid { \n                    grid-template-columns: 1fr; \n                }\n                \n                .vision-content h3 { \n                    font-size: 1.6rem; \n                }\n            }\n\n            @media (max-width: 480px) {\n                .historia-container { \n                    padding: 0 15px; \n                }\n                \n                .historia-intro,\n                .journey-item { \n                    padding: var(--bosques-spacing-sm); \n                }\n                \n                .feature-card {\n                    text-align: center;\n                }\n                \n                .historia-vision { \n                    padding: var(--bosques-spacing-md) var(--bosques-spacing-sm); \n                }\n            }\n\n            \/* Mejoras de accesibilidad *\/\n            @media (prefers-reduced-motion: reduce) {\n                *, *::before, *::after {\n                    animation-duration: 0.01ms !important;\n                    animation-iteration-count: 1 !important;\n                    transition-duration: 0.01ms !important;\n                }\n            }\n\n            .journey-item:focus-within,\n            .feature-card:focus-within {\n                outline: 3px solid var(--bosques-accent-light);\n                outline-offset: 2px;\n            }\n\n            @media (hover: none) {\n                .journey-item:hover,\n                .feature-card:hover {\n                    transform: none;\n                }\n            }\n        <\/style>\n                <section class=\"bosques-historia\" role=\"main\" aria-labelledby=\"bosques-historia-title\">\n            <div class=\"historia-container\" id=\"empresa\">\n                <!-- Header mejorado -->\n                <div class=\"historia-header\">\n                    <div class=\"header-icon\" aria-hidden=\"true\">\n                        <i class=\"fas fa-seedling\"><\/i>\n                    <\/div>\n                    <h2 id=\"bosques-historia-title\" class=\"historia-title\">\u00bfQui\u00e9nes somos?<\/h2>\n                    <div class=\"title-underline\" aria-hidden=\"true\"><\/div>\n                <\/div>\n                \n                <div class=\"historia-content\">\n                                            <div class=\"historia-intro\" data-animate=\"fade-up\">\n                            <p class=\"intro-text\">\n                                Somos <strong>Bosques de Sumalao<\/strong>, una desarrolladora de proyectos inmobiliarios con una visi\u00f3n clara: transformar zonas estrat\u00e9gicas en espacios de alto valor y proyecci\u00f3n.\n                            <\/p>\n                        <\/div>\n                                        \n                                            <div class=\"historia-journey\">\n                                        <div class=\"journey-item\" data-animate=\"slide-in\" data-delay=\"0\">\n                <div class=\"journey-number\" aria-hidden=\"true\">\n                    <span>01<\/span>\n                <\/div>\n                <div class=\"journey-icon\" aria-hidden=\"true\">\n                    <i class=\"fas fa-map-marked-alt\"><\/i>\n                <\/div>\n                <div class=\"journey-content\">\n                    <h3>Nuestros Inicios<\/h3>\n                    <p>Iniciamos con nuestro primer barrio ejecutivo en Sumalao, un proyecto pionero que combin\u00f3 naturaleza, arquitectura y calidad de vida. Hoy, esa experiencia nos impulsa a encarar nuevos desaf\u00edos.<\/p>\n                <\/div>\n            <\/div>\n                    <div class=\"journey-item\" data-animate=\"slide-in\" data-delay=\"150\">\n                <div class=\"journey-number\" aria-hidden=\"true\">\n                    <span>02<\/span>\n                <\/div>\n                <div class=\"journey-icon\" aria-hidden=\"true\">\n                    <i class=\"fas fa-building\"><\/i>\n                <\/div>\n                <div class=\"journey-content\">\n                    <h3>Nodo Empresarial<\/h3>\n                    <p>Actualmente, estamos desarrollando el <strong>Nodo Empresarial<\/strong>, ubicado a metros del estadio, un punto clave de crecimiento para el departamento Valle Viejo.<\/p>\n                <\/div>\n            <\/div>\n                                <\/div>\n                                        \n                                            <div class=\"nodo-features\" data-animate=\"fade-up\">\n                            <div class=\"features-header\">\n                                <h3 class=\"features-title\">Este nuevo emprendimiento incluye:<\/h3>\n                                <div class=\"features-subtitle\">Descubre todo lo que ofrecemos<\/div>\n                            <\/div>\n                            <div class=\"features-grid\">\n                                            <div class=\"feature-card\" data-animate=\"fade-up\" data-delay=\"450\">\n                <div class=\"feature-icon\" style=\"--icon-color: #4a6741\">\n                    <i class=\"fas fa-map\"><\/i>\n                <\/div>\n                <div class=\"feature-content\">\n                    <h4>16 Terrenos<\/h4>\n                    <p>Comerciales e industriales disponibles<\/p>\n                <\/div>\n                <div class=\"feature-hover-effect\"><\/div>\n            <\/div>\n                    <div class=\"feature-card\" data-animate=\"fade-up\" data-delay=\"600\">\n                <div class=\"feature-icon\" style=\"--icon-color: #6b8e5a\">\n                    <i class=\"fas fa-gas-pump\"><\/i>\n                <\/div>\n                <div class=\"feature-content\">\n                    <h4>Estaci\u00f3n de Servicio<\/h4>\n                    <p>Una futura estaci\u00f3n de servicio<\/p>\n                <\/div>\n                <div class=\"feature-hover-effect\"><\/div>\n            <\/div>\n                    <div class=\"feature-card\" data-animate=\"fade-up\" data-delay=\"750\">\n                <div class=\"feature-icon\" style=\"--icon-color: #8db475\">\n                    <i class=\"fas fa-golf-ball\"><\/i>\n                <\/div>\n                <div class=\"feature-content\">\n                    <h4>Driving de Golf<\/h4>\n                    <p>Un driving de golf<\/p>\n                <\/div>\n                <div class=\"feature-hover-effect\"><\/div>\n            <\/div>\n                    <div class=\"feature-card\" data-animate=\"fade-up\" data-delay=\"900\">\n                <div class=\"feature-icon\" style=\"--icon-color: #a4c78e\">\n                    <i class=\"fas fa-utensils\"><\/i>\n                <\/div>\n                <div class=\"feature-content\">\n                    <h4>Polo Gastron\u00f3mico<\/h4>\n                    <p>Un polo gastron\u00f3mico<\/p>\n                <\/div>\n                <div class=\"feature-hover-effect\"><\/div>\n            <\/div>\n                    <div class=\"feature-card feature-wide\" data-animate=\"fade-up\" data-delay=\"1050\">\n                <div class=\"feature-icon\" style=\"--icon-color: #4a6741\">\n                    <i class=\"fas fa-industry\"><\/i>\n                <\/div>\n                <div class=\"feature-content\">\n                    <h4>Galpones Mineros<\/h4>\n                    <p>Galpones dise\u00f1ados especialmente para empresas del sector minero, con la posibilidad de instalarse lado a lado y potenciar v\u00ednculos de negocio.<\/p>\n                <\/div>\n                <div class=\"feature-hover-effect\"><\/div>\n            <\/div>\n                                    <\/div>\n                        <\/div>\n                                        \n                                            <div class=\"historia-vision\" data-animate=\"fade-up\">\n                            <div class=\"vision-icon\" aria-hidden=\"true\">\n                                <i class=\"fas fa-eye\"><\/i>\n                            <\/div>\n                            <div class=\"vision-content\">\n                                <h3>Nuestra Visi\u00f3n<\/h3>\n                                <p>\n                                    Con cada proyecto buscamos aportar desarrollo, conectividad y oportunidades concretas. \n                                    Lo hacemos con una impronta profesional, cuidando cada detalle y apostando al crecimiento real de <strong>Catamarca<\/strong>.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n        <\/section>\n                <script>\n            (function() {\n                'use strict';\n                \n                if (window.bosquesHistoriaInitialized) {\n                    return;\n                }\n                \n                class BosquesHistoriaAnimations {\n                    constructor() {\n                        this.isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n                        this.init();\n                    }\n                    \n                    init() {\n                        if (document.readyState === 'loading') {\n                            document.addEventListener('DOMContentLoaded', () => this.initAnimations());\n                        } else {\n                            this.initAnimations();\n                        }\n                    }\n                    \n                    initAnimations() {\n                        if (!this.isReducedMotion) {\n                            this.initScrollAnimations();\n                            this.initInteractiveEffects();\n                        } else {\n                            this.showAllElements();\n                        }\n                        this.initAccessibility();\n                    }\n                    \n                    showAllElements() {\n                        document.querySelectorAll('[data-animate]').forEach(el => {\n                            el.style.opacity = '1';\n                            el.style.transform = 'none';\n                        });\n                    }\n                    \n                    initScrollAnimations() {\n                        if (!('IntersectionObserver' in window)) {\n                            this.showAllElements();\n                            return;\n                        }\n                        \n                        const observer = new IntersectionObserver((entries) => {\n                            entries.forEach(entry => {\n                                if (entry.isIntersecting) {\n                                    const delay = parseInt(entry.target.dataset.delay || '0');\n                                    \n                                    setTimeout(() => {\n                                        entry.target.classList.add('animated');\n                                    }, delay);\n                                    \n                                    observer.unobserve(entry.target);\n                                }\n                            });\n                        }, {\n                            threshold: 0.1,\n                            rootMargin: '0px 0px -50px 0px'\n                        });\n                        \n                        document.querySelectorAll('[data-animate]').forEach(el => {\n                            observer.observe(el);\n                        });\n                    }\n                    \n                    initInteractiveEffects() {\n                        \/\/ Efecto de hover mejorado para las cards\n                        const cards = document.querySelectorAll('.feature-card, .journey-item');\n                        \n                        cards.forEach(card => {\n                            card.addEventListener('mouseenter', (e) => {\n                                this.addRippleEffect(e.currentTarget, e);\n                            });\n                        });\n                        \n                        \/\/ Efecto parallax sutil para iconos\n                        this.initParallaxIcons();\n                    }\n                    \n                    addRippleEffect(element, event) {\n                        const rect = element.getBoundingClientRect();\n                        const x = event.clientX - rect.left;\n                        const y = event.clientY - rect.top;\n                        \n                        const ripple = document.createElement('div');\n                        ripple.style.cssText = `\n                            position: absolute;\n                            width: 4px;\n                            height: 4px;\n                            background: rgba(74, 103, 65, 0.1);\n                            border-radius: 50%;\n                            pointer-events: none;\n                            left: ${x}px;\n                            top: ${y}px;\n                            transform: scale(0);\n                            animation: ripple 0.6s ease-out;\n                        `;\n                        \n                        element.style.position = 'relative';\n                        element.appendChild(ripple);\n                        \n                        \/\/ Crear keyframes si no existen\n                        if (!document.querySelector('#ripple-keyframes')) {\n                            const style = document.createElement('style');\n                            style.id = 'ripple-keyframes';\n                            style.textContent = `\n                                @keyframes ripple {\n                                    to {\n                                        transform: scale(40);\n                                        opacity: 0;\n                                    }\n                                }\n                            `;\n                            document.head.appendChild(style);\n                        }\n                        \n                        setTimeout(() => ripple.remove(), 600);\n                    }\n                    \n                    initParallaxIcons() {\n                        let ticking = false;\n                        \n                        const updateParallax = () => {\n                            const scrolled = window.pageYOffset;\n                            const icons = document.querySelectorAll('.feature-icon, .journey-icon');\n                            \n                            icons.forEach((icon, index) => {\n                                const yPos = Math.sin(scrolled * 0.003 + index) * 2;\n                                icon.style.transform = `translateY(${yPos}px)`;\n                            });\n                            \n                            ticking = false;\n                        };\n                        \n                        const requestTick = () => {\n                            if (!ticking) {\n                                requestAnimationFrame(updateParallax);\n                                ticking = true;\n                            }\n                        };\n                        \n                        window.addEventListener('scroll', requestTick, { passive: true });\n                    }\n                    \n                    initAccessibility() {\n                        const interactiveElements = document.querySelectorAll('.journey-item, .feature-card');\n                        \n                        interactiveElements.forEach(element => {\n                            if (!element.hasAttribute('tabindex')) {\n                                element.setAttribute('tabindex', '0');\n                            }\n                            element.setAttribute('role', 'article');\n                            \n                            element.addEventListener('keydown', (e) => {\n                                if (e.key === 'Enter' || e.key === ' ') {\n                                    e.preventDefault();\n                                    element.click();\n                                }\n                            });\n                            \n                            \/\/ Mejor feedback visual para focus\n                            element.addEventListener('focus', () => {\n                                element.style.outline = '3px solid var(--bosques-accent-light)';\n                                element.style.outlineOffset = '2px';\n                            });\n                            \n                            element.addEventListener('blur', () => {\n                                element.style.outline = '';\n                                element.style.outlineOffset = '';\n                            });\n                        });\n                        \n                        \/\/ Mejorar navegaci\u00f3n con flechas\n                        document.addEventListener('keydown', (e) => {\n                            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n                                const focusedElement = document.activeElement;\n                                const allInteractive = Array.from(interactiveElements);\n                                const currentIndex = allInteractive.indexOf(focusedElement);\n                                \n                                if (currentIndex !== -1) {\n                                    e.preventDefault();\n                                    const nextIndex = e.key === 'ArrowDown' \n                                        ? Math.min(currentIndex + 1, allInteractive.length - 1)\n                                        : Math.max(currentIndex - 1, 0);\n                                    allInteractive[nextIndex].focus();\n                                }\n                            }\n                        });\n                    }\n                }\n                \n                \/\/ Inicializar cuando el DOM est\u00e9 listo\n                new BosquesHistoriaAnimations();\n                \n                \/\/ Marcar como inicializado\n                window.bosquesHistoriaInitialized = true;\n                \n            })();\n        <\/script>\n        \n\n\n<footer class=\"bosques-footer\">\n        <div class=\"footer-container\" id=\"footer\">\n            <div class=\"footer-grid\">\n                <!-- Columna Informaci\u00f3n -->\n                <div class=\"footer-col\">\n                    <div class=\"footer-logo\">\n                        <img decoding=\"async\" src=\"https:\/\/bosquesdesumalao.com\/bosques\/wp-content\/uploads\/2025\/07\/logo-bosques-131.png\" alt=\"Bosques de Sumalao\" class=\"logo-img\">\n                    <\/div>\n                    <p class=\"footer-slogan\">\"Tu nuevo hogar te espera\"<\/p>\n                    <div class=\"footer-contact\">\n                        <div class=\"contact-item\">\n                            <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/phone.png\" alt=\"Tel\u00e9fono\" class=\"contact-icon\">\n                            <span>(3834) 543084<\/span>\n                        <\/div>\n                        <div class=\"contact-item\">\n                            <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/email.png\" alt=\"Email\" class=\"contact-icon\">\n\t\t\t\t\t\t\t<span>info@bosquesdesumalao.com<\/span>\n                        <\/div>\n                        <div class=\"contact-item\">\n                            <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/marker.png\" alt=\"Direcci\u00f3n\" class=\"contact-icon\">\n                            <span>Mariano Moreno 554, SFVC, Catamarca, Argentina<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Columna Enlaces -->\n                <div class=\"footer-col\">\n                    <h4 class=\"footer-title\">Navegaci\u00f3n<\/h4>\n                    <ul class=\"footer-links\">\n                        <li><a href=\"#inicio\">Inicio<\/a><\/li>\n                        <li><a href=\"#modelos\">Modelos Disponibles<\/a><\/li>\n                        <li><a href=\"#proyecto\">El Proyecto<\/a><\/li>\n                        <li><a href=\"#beneficios\">Beneficios<\/a><\/li>\n                        <li><a href=\"#contacto\">Contacto<\/a><\/li>\n                        <li><a href=\"#legal\">Aviso Legal<\/a><\/li>\n                    <\/ul>\n                <\/div>\n\n                <!-- Columna Redes -->\n                <div class=\"footer-col\">\n                    <h4 class=\"footer-title\">Conectemos<\/h4>\n                    <div class=\"social-links\">\n                        <a href=\"#\" target=\"_blank\" class=\"social-item\">\n                            <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/instagram.png\" alt=\"Instagram\">\n                            <span>Instagram<\/span>\n                        <\/a>\n                       \n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Copyright -->\n            <div class=\"footer-bottom\">\n                <div class=\"copyright\">\n                    \u00a9 2025 Bosques de Sumalao. Todos los derechos reservados.\n                <\/div>\n                <div class=\"credits\">\n                    Dise\u00f1o y Desarrollo por Guishex2001\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Bot\u00f3n Scroll Top -->\n        <button class=\"scroll-top\">\n            <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/ios-filled\/50\/chevron-up.png\" alt=\"Subir\">\n        <\/button>\n\n        <style>\n            .bosques-footer {\n                background: var(--bg-secondary);\n                color: var(--bg-primary);\n                padding: 4rem 1rem 2rem;\n                position: relative;\n                border-top: 1px solid rgba(246,248,244,0.1);\n            }\n\n            .footer-container {\n                max-width: 1200px;\n                margin: 0 auto;\n            }\n\n            .footer-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n                gap: 3rem;\n                margin-bottom: 4rem;\n            }\n\n            .footer-col {\n                padding: 1.5rem;\n            }\n\n            .footer-logo img {\n                width: 180px;\n                margin-bottom: 1.5rem;\n                filter: brightness(0) invert(1);\n            }\n\n            .footer-slogan {\n                font-style: italic;\n                opacity: 0.8;\n                margin-bottom: 2rem;\n            }\n\n            .footer-title {\n                font-size: 1.25rem;\n                margin-bottom: 1.5rem;\n                position: relative;\n                padding-bottom: 0.5rem;\n            }\n\n            .footer-title::after {\n                content: \"\";\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                width: 40px;\n                height: 2px;\n                background: var(--bg-primary);\n            }\n\n            .footer-links {\n                list-style: none;\n                padding: 0;\n            }\n\n            .footer-links li {\n                margin-bottom: 0.8rem;\n            }\n\n            .footer-links a {\n                color: var(--bg-primary);\n                text-decoration: none;\n                transition: all 0.3s ease;\n                position: relative;\n            }\n\n            .footer-links a::after {\n                content: \"\";\n                position: absolute;\n                bottom: -2px;\n                left: 0;\n                width: 0;\n                height: 1px;\n                background: var(--bg-primary);\n                transition: width 0.3s ease;\n            }\n\n            .footer-links a:hover::after {\n                width: 100%;\n            }\n\n            .contact-item {\n                display: flex;\n                align-items: center;\n                gap: 1rem;\n                margin-bottom: 1.2rem;\n            }\n\n            .contact-icon {\n                width: 24px;\n                filter: brightness(0) invert(1);\n            }\n\n            .social-links {\n                display: flex;\n                flex-direction: column;\n                gap: 1rem;\n            }\n\n            .social-item {\n                display: flex;\n                align-items: center;\n                gap: 1rem;\n                color: var(--bg-primary);\n                text-decoration: none;\n                transition: transform 0.3s ease;\n            }\n\n            .social-item img {\n                width: 30px;\n                filter: brightness(0) invert(1);\n            }\n\n            .social-item:hover {\n                transform: translateX(5px);\n            }\n\n            .footer-bottom {\n                border-top: 1px solid rgba(246,248,244,0.1);\n                padding-top: 2rem;\n                text-align: center;\n                opacity: 0.7;\n                font-size: 0.9rem;\n            }\n\n            .scroll-top {\n                position: fixed;\n                bottom: 2rem;\n                right: 2rem;\n                background: var(--bg-primary);\n                border: none;\n                border-radius: 50%;\n                width: 45px;\n                height: 45px;\n                cursor: pointer;\n                opacity: 0;\n                transition: all 0.3s ease;\n                box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n            }\n\n            .scroll-top img {\n                width: 24px;\n                filter: brightness(0) invert(0);\n            }\n\n            .scroll-top.visible {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            @media (max-width: 768px) {\n                .footer-grid {\n                    grid-template-columns: 1fr;\n                    gap: 2rem;\n                }\n                \n                .footer-col {\n                    padding: 1rem;\n                }\n                \n                .scroll-top {\n                    bottom: 1rem;\n                    right: 1rem;\n                }\n            }\n        <\/style>\n\n        <script>\n            document.addEventListener(\"DOMContentLoaded\", function() {\n                \/\/ Scroll Top Button\n                const scrollTop = document.querySelector(\".scroll-top\");\n                \n                window.addEventListener(\"scroll\", () => {\n                    if (window.scrollY > 300) {\n                        scrollTop.classList.add(\"visible\");\n                    } else {\n                        scrollTop.classList.remove(\"visible\");\n                    }\n                });\n\n                scrollTop.addEventListener(\"click\", () => {\n                    window.scrollTo({\n                        top: 0,\n                        behavior: \"smooth\"\n                    });\n                });\n            });\n        <\/script>\n    <\/footer>\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-68","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/68","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=68"}],"version-history":[{"count":27,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/68\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}