{"id":280,"date":"2025-08-07T14:42:36","date_gmt":"2025-08-07T17:42:36","guid":{"rendered":"https:\/\/bosquesdesumalao.com\/bosques\/?page_id=280"},"modified":"2025-08-07T18:41:15","modified_gmt":"2025-08-07T21:41:15","slug":"uvi","status":"publish","type":"page","link":"https:\/\/bosquesdesumalao.com\/bosques\/uvi\/","title":{"rendered":"uvi"},"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    <div class=\"uvi-calculator-container\">\n        <div class=\"uvi-header\">\n            <h3>Calculadora UVI Argentina<\/h3>\n            <div class=\"uvi-current\">\n                <span class=\"uvi-label\">Valor vigente:<\/span>\n                <span class=\"uvi-value\">$1.352,92<\/span>\n                <span class=\"uvi-date\">al 14-04-2026<\/span>\n            <\/div>\n        <\/div>\n        \n        <div class=\"uvi-calculator\">\n            <div class=\"calc-section\">\n                <h4><i class=\"fas fa-coins\"><\/i> Convertir UVI a Pesos<\/h4>\n                <div class=\"calc-input-group\">\n                    <label for=\"uvi-amount\"><i class=\"fas fa-calculator\"><\/i> Cantidad en UVI:<\/label>\n                    <input type=\"number\" id=\"uvi-amount\" step=\"0.01\" min=\"0\" placeholder=\"Ej: 100\">\n                    <button type=\"button\" id=\"calc-to-pesos\">\n                        <i class=\"fas fa-exchange-alt\"><\/i> Calcular Conversi\u00f3n\n                    <\/button>\n                <\/div>\n                <div class=\"calc-result\" id=\"result-pesos\"><\/div>\n            <\/div>\n            \n            <div class=\"calc-section\">\n                <h4><i class=\"fas fa-dollar-sign\"><\/i> Convertir Pesos a UVI<\/h4>\n                <div class=\"calc-input-group\">\n                    <label for=\"pesos-amount\"><i class=\"fas fa-money-bill-wave\"><\/i> Cantidad en Pesos:<\/label>\n                    <input type=\"number\" id=\"pesos-amount\" step=\"0.01\" min=\"0\" placeholder=\"Ej: 100000\">\n                    <button type=\"button\" id=\"calc-to-uvi\">\n                        <i class=\"fas fa-exchange-alt\"><\/i> Calcular Conversi\u00f3n\n                    <\/button>\n                <\/div>\n                <div class=\"calc-result\" id=\"result-uvi\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"uvi-history\">\n            <h4><i class=\"fas fa-chart-line\"><\/i> Historial de Cotizaciones UVI<\/h4>\n            <div class=\"history-table\">\n                <table>\n                    <thead>\n                        <tr>\n                            <th><i class=\"fas fa-calendar\"><\/i> Fecha<\/th>\n                            <th><i class=\"fas fa-peso-sign\"><\/i> Valor<\/th>\n                            <th><i class=\"fas fa-chart-bar\"><\/i> Variaci\u00f3n<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                                                <tr class=\"\">\n                            <td>14-04-2026<\/td>\n                            <td>$1.352,92<\/td>\n                            <td class=\"\"><\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>13-04-2026<\/td>\n                            <td>$1.350,07<\/td>\n                            <td class=\"negative\">-2,85<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>12-04-2026<\/td>\n                            <td>$1.350,07<\/td>\n                            <td class=\"positive\">+0,00<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>11-04-2026<\/td>\n                            <td>$1.350,07<\/td>\n                            <td class=\"positive\">+0,00<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>10-04-2026<\/td>\n                            <td>$1.349,13<\/td>\n                            <td class=\"negative\">-0,94<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>09-04-2026<\/td>\n                            <td>$1.348,18<\/td>\n                            <td class=\"negative\">-0,95<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>08-04-2026<\/td>\n                            <td>$1.347,23<\/td>\n                            <td class=\"negative\">-0,95<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>07-04-2026<\/td>\n                            <td>$1.346,29<\/td>\n                            <td class=\"negative\">-0,94<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>06-04-2026<\/td>\n                            <td>$1.341,57<\/td>\n                            <td class=\"negative\">-4,72<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>05-04-2026<\/td>\n                            <td>$1.341,57<\/td>\n                            <td class=\"positive\">+0,00<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>04-04-2026<\/td>\n                            <td>$1.341,57<\/td>\n                            <td class=\"positive\">+0,00<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>03-04-2026<\/td>\n                            <td>$1.341,57<\/td>\n                            <td class=\"positive\">+0,00<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>02-04-2026<\/td>\n                            <td>$1.341,57<\/td>\n                            <td class=\"positive\">+0,00<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>01-04-2026<\/td>\n                            <td>$1.340,63<\/td>\n                            <td class=\"negative\">-0,94<\/td>\n                        <\/tr>\n                                                <tr class=\"\">\n                            <td>31-03-2026<\/td>\n                            <td>$1.339,69<\/td>\n                            <td class=\"negative\">-0,94<\/td>\n                        <\/tr>\n                                            <\/tbody>\n                <\/table>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const valorUVI = 1352.92;\n        \n        \/\/ Calcular UVI a Pesos con mejor UX\n        document.getElementById('calc-to-pesos').addEventListener('click', function() {\n            const button = this;\n            const uviAmount = parseFloat(document.getElementById('uvi-amount').value);\n            const resultDiv = document.getElementById('result-pesos');\n            \n            if (isNaN(uviAmount) || uviAmount < 0) {\n                resultDiv.innerHTML = '<span class=\"error\"><i class=\"fas fa-exclamation-triangle\"><\/i> Por favor, ingrese un valor v\u00e1lido.<\/span>';\n                return;\n            }\n            \n            \/\/ Efecto de carga\n            button.classList.add('loading');\n            button.disabled = true;\n            resultDiv.innerHTML = '<div class=\"loading\" style=\"height: 60px;\"><\/div>';\n            \n            setTimeout(() => {\n                const result = uviAmount * valorUVI;\n                resultDiv.innerHTML = \n                    `<div style=\"text-align: center;\">\n                        <span class=\"result-label\"><i class=\"fas fa-calculator\"><\/i> ${uviAmount.toLocaleString('es-AR', {minimumFractionDigits: 2})} UVI equivalen a:<\/span> \n                        <span class=\"result-value\"><i class=\"fas fa-peso-sign\"><\/i> ${result.toLocaleString('es-AR', {minimumFractionDigits: 2})}<\/span>\n                    <\/div>`;\n                \n                button.classList.remove('loading');\n                button.disabled = false;\n            }, 800);\n        });\n        \n        \/\/ Calcular Pesos a UVI con mejor UX\n        document.getElementById('calc-to-uvi').addEventListener('click', function() {\n            const button = this;\n            const pesosAmount = parseFloat(document.getElementById('pesos-amount').value);\n            const resultDiv = document.getElementById('result-uvi');\n            \n            if (isNaN(pesosAmount) || pesosAmount < 0) {\n                resultDiv.innerHTML = '<span class=\"error\"><i class=\"fas fa-exclamation-triangle\"><\/i> Por favor, ingrese un valor v\u00e1lido.<\/span>';\n                return;\n            }\n            \n            \/\/ Efecto de carga\n            button.classList.add('loading');\n            button.disabled = true;\n            resultDiv.innerHTML = '<div class=\"loading\" style=\"height: 60px;\"><\/div>';\n            \n            setTimeout(() => {\n                const result = pesosAmount \/ valorUVI;\n                resultDiv.innerHTML = \n                    `<div style=\"text-align: center;\">\n                        <span class=\"result-label\"><i class=\"fas fa-money-bill-wave\"><\/i> $${pesosAmount.toLocaleString('es-AR', {minimumFractionDigits: 2})} equivalen a:<\/span> \n                        <span class=\"result-value\"><i class=\"fas fa-coins\"><\/i> ${result.toLocaleString('es-AR', {minimumFractionDigits: 4})} UVI<\/span>\n                    <\/div>`;\n                \n                button.classList.remove('loading');\n                button.disabled = false;\n            }, 800);\n        });\n        \n        \/\/ Permitir c\u00e1lculo con Enter y mejorar UX\n        document.getElementById('uvi-amount').addEventListener('keypress', function(e) {\n            if (e.key === 'Enter') {\n                document.getElementById('calc-to-pesos').click();\n            }\n        });\n        \n        document.getElementById('pesos-amount').addEventListener('keypress', function(e) {\n            if (e.key === 'Enter') {\n                document.getElementById('calc-to-uvi').click();\n            }\n        });\n        \n        \/\/ Validaci\u00f3n en tiempo real\n        document.getElementById('uvi-amount').addEventListener('input', function() {\n            const value = parseFloat(this.value);\n            if (value < 0) {\n                this.style.borderColor = '#dc3545';\n            } else {\n                this.style.borderColor = '';\n            }\n        });\n        \n        document.getElementById('pesos-amount').addEventListener('input', function() {\n            const value = parseFloat(this.value);\n            if (value < 0) {\n                this.style.borderColor = '#dc3545';\n            } else {\n                this.style.borderColor = '';\n            }\n        });\n        \n        \/\/ Animaci\u00f3n de entrada para elementos\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.animation = 'fadeInUp 0.6s ease-out';\n                }\n            });\n        });\n        \n        document.querySelectorAll('.calc-section, .uvi-history').forEach(el => {\n            observer.observe(el);\n        });\n    });\n    <\/script>\n    \n    <style>\n    \/* Importar Font Awesome para iconos *\/\n    @import url(\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\");\n    \n    \/* Variables de 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        --light-shadow: rgba(33, 48, 38, 0.08);\n        --medium-shadow: rgba(33, 48, 38, 0.15);\n    }\n    \n    .uvi-calculator-container {\n        max-width: 1200px;\n        margin: 40px auto;\n        padding: 0;\n        background: transparent;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n    \n    .uvi-header {\n        text-align: center;\n        margin-bottom: 50px;\n        padding: 40px 30px;\n        background: linear-gradient(135deg, var(--accent-green), var(--accent-light));\n        border-radius: 20px;\n        color: white;\n        box-shadow: 0 8px 30px var(--medium-shadow);\n        backdrop-filter: blur(12px);\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .uvi-header::before {\n        content: '';\n        position: absolute;\n        top: -50%;\n        right: -50%;\n        width: 100%;\n        height: 100%;\n        background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><circle cx=\"20\" cy=\"20\" r=\"2\" fill=\"rgba(255,255,255,0.1)\"\/><circle cx=\"80\" cy=\"40\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"\/><circle cx=\"40\" cy=\"80\" r=\"1.5\" fill=\"rgba(255,255,255,0.1)\"\/><\/svg>');\n        animation: float 20s ease-in-out infinite;\n    }\n    \n    @keyframes float {\n        0%, 100% { transform: translateY(0px) rotate(0deg); }\n        50% { transform: translateY(-20px) rotate(180deg); }\n    }\n    \n    .uvi-header h3 {\n        color: white;\n        margin-bottom: 20px;\n        font-size: 32px;\n        font-weight: 700;\n        position: relative;\n        z-index: 2;\n    }\n    \n    .uvi-current {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 15px;\n        flex-wrap: wrap;\n        position: relative;\n        z-index: 2;\n    }\n    \n    .uvi-label {\n        color: rgba(255, 255, 255, 0.9);\n        font-weight: 600;\n        font-size: 18px;\n    }\n    \n    .uvi-value {\n        font-size: 42px;\n        font-weight: 800;\n        color: white;\n        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n        background: rgba(255, 255, 255, 0.1);\n        padding: 10px 25px;\n        border-radius: 15px;\n        backdrop-filter: blur(10px);\n        border: 1px solid rgba(255, 255, 255, 0.2);\n    }\n    \n    .uvi-date {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 16px;\n        font-weight: 500;\n    }\n    \n    .uvi-calculator {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 40px;\n        margin-bottom: 50px;\n    }\n    \n    @media (max-width: 768px) {\n        .uvi-calculator {\n            grid-template-columns: 1fr;\n            gap: 30px;\n        }\n        \n        .uvi-header {\n            margin: 20px;\n            padding: 30px 20px;\n        }\n        \n        .uvi-header h3 {\n            font-size: 24px;\n        }\n        \n        .uvi-value {\n            font-size: 28px;\n            padding: 8px 20px;\n        }\n    }\n    \n    .calc-section {\n        background: var(--white);\n        padding: 35px;\n        border-radius: 20px;\n        border: 1px solid rgba(33, 48, 38, 0.1);\n        box-shadow: 0 8px 30px var(--light-shadow);\n        transition: all 0.3s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .calc-section::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 4px;\n        background: linear-gradient(90deg, var(--accent-green), var(--accent-light));\n    }\n    \n    .calc-section:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 40px var(--medium-shadow);\n    }\n    \n    .calc-section h4 {\n        margin-top: 0;\n        margin-bottom: 25px;\n        color: var(--text-primary);\n        font-size: 22px;\n        font-weight: 700;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    \n    .calc-input-group {\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n    }\n    \n    .calc-input-group label {\n        font-weight: 600;\n        color: var(--text-primary);\n        font-size: 16px;\n        margin-bottom: 8px;\n    }\n    \n    .calc-input-group input {\n        padding: 18px 20px;\n        border: 2px solid rgba(33, 48, 38, 0.1);\n        border-radius: 12px;\n        font-size: 18px;\n        background: var(--bg-primary);\n        color: var(--text-primary);\n        transition: all 0.3s ease;\n        font-weight: 500;\n    }\n    \n    .calc-input-group input:focus {\n        outline: none;\n        border-color: var(--accent-green);\n        background: white;\n        box-shadow: 0 0 0 4px rgba(74, 103, 65, 0.1);\n        transform: translateY(-1px);\n    }\n    \n    .calc-input-group input::placeholder {\n        color: rgba(55, 72, 58, 0.5);\n        font-weight: 400;\n    }\n    \n    .calc-input-group button {\n        padding: 18px 25px;\n        background: linear-gradient(135deg, var(--accent-green), var(--accent-light));\n        color: white;\n        border: none;\n        border-radius: 12px;\n        font-size: 16px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        box-shadow: 0 4px 15px rgba(74, 103, 65, 0.3);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    }\n    \n    .calc-input-group button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 25px rgba(74, 103, 65, 0.4);\n        background: linear-gradient(135deg, var(--accent-light), var(--accent-green));\n    }\n    \n    .calc-input-group button:active {\n        transform: translateY(0);\n    }\n    \n    .calc-result {\n        margin-top: 25px;\n        padding: 25px;\n        background: linear-gradient(135deg, var(--bg-primary), white);\n        border-radius: 15px;\n        min-height: 60px;\n        border: 1px solid rgba(33, 48, 38, 0.08);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        transition: all 0.3s ease;\n    }\n    \n    .calc-result:not(:empty) {\n        box-shadow: 0 4px 20px var(--light-shadow);\n        border-color: var(--accent-green);\n        background: linear-gradient(135deg, rgba(74, 103, 65, 0.05), rgba(107, 142, 90, 0.05));\n    }\n    \n    .result-label {\n        color: var(--text-secondary);\n        font-weight: 600;\n        font-size: 16px;\n    }\n    \n    .result-value {\n        font-size: 28px;\n        font-weight: 800;\n        color: var(--accent-green);\n        display: block;\n        margin-top: 8px;\n        text-shadow: 0 1px 3px rgba(74, 103, 65, 0.1);\n    }\n    \n    .error {\n        color: #dc3545;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    \n    .uvi-history {\n        background: var(--white);\n        border-radius: 20px;\n        padding: 40px;\n        box-shadow: 0 8px 30px var(--light-shadow);\n        border: 1px solid rgba(33, 48, 38, 0.1);\n        margin-top: 20px;\n    }\n    \n    .uvi-history h4 {\n        margin-bottom: 30px;\n        color: var(--text-primary);\n        font-size: 26px;\n        font-weight: 700;\n        text-align: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n    }\n    \n    .history-table {\n        overflow-x: auto;\n        border-radius: 12px;\n        box-shadow: 0 4px 20px var(--light-shadow);\n    }\n    \n    .history-table table {\n        width: 100%;\n        border-collapse: collapse;\n        background: white;\n        border-radius: 12px;\n        overflow: hidden;\n    }\n    \n    .history-table th,\n    .history-table td {\n        padding: 18px 20px;\n        text-align: left;\n        border-bottom: 1px solid rgba(33, 48, 38, 0.08);\n    }\n    \n    .history-table th {\n        background: linear-gradient(135deg, var(--bg-primary), #eef2ec);\n        font-weight: 700;\n        color: var(--text-primary);\n        font-size: 16px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n    \n    .history-table td {\n        font-weight: 500;\n        color: var(--text-secondary);\n        font-size: 15px;\n        transition: all 0.3s ease;\n    }\n    \n    .history-table tr:hover td {\n        background: var(--bg-primary);\n        color: var(--text-primary);\n    }\n    \n    .positive {\n        color: var(--accent-green);\n        font-weight: 700;\n        display: flex;\n        align-items: center;\n        gap: 5px;\n    }\n    \n    .positive::before {\n        content: '\ud83d\udcc8';\n        font-size: 12px;\n    }\n    \n    .negative {\n        color: #dc3545;\n        font-weight: 700;\n        display: flex;\n        align-items: center;\n        gap: 5px;\n    }\n    \n    .negative::before {\n        content: '\ud83d\udcc9';\n        font-size: 12px;\n    }\n    \n    .today {\n        background: linear-gradient(135deg, rgba(74, 103, 65, 0.1), rgba(107, 142, 90, 0.05)) !important;\n        font-weight: 700;\n        color: var(--accent-green) !important;\n        box-shadow: inset 3px 0 0 var(--accent-green);\n    }\n    \n    .uvi-error {\n        padding: 30px;\n        background: linear-gradient(135deg, #f8d7da, #f5c6cb);\n        color: #721c24;\n        border: 1px solid #f5c6cb;\n        border-radius: 15px;\n        text-align: center;\n        font-weight: 600;\n        box-shadow: 0 4px 20px rgba(114, 28, 36, 0.1);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    }\n    \n    \/* Animaciones suaves *\/\n    .calc-section,\n    .calc-result,\n    .history-table tr {\n        animation: fadeInUp 0.6s ease-out;\n    }\n    \n    @keyframes fadeInUp {\n        from {\n            opacity: 0;\n            transform: translateY(20px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n    \n    \/* Efectos de carga *\/\n    .loading {\n        position: relative;\n    }\n    \n    .loading::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 20px;\n        height: 20px;\n        margin: -10px;\n        border: 2px solid var(--accent-light);\n        border-top: 2px solid var(--accent-green);\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n    }\n    \n    @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n\n    \/* Responsive mejorado *\/\n    @media (max-width: 480px) {\n        .uvi-calculator-container {\n            margin: 20px 10px;\n        }\n        \n        .calc-section,\n        .uvi-history {\n            padding: 25px 20px;\n        }\n        \n        .history-table th,\n        .history-table td {\n            padding: 12px 8px;\n            font-size: 14px;\n        }\n    }\n    <\/style>\n    \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-280","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/280","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=280"}],"version-history":[{"count":7,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/pages\/280\/revisions\/287"}],"wp:attachment":[{"href":"https:\/\/bosquesdesumalao.com\/bosques\/wp-json\/wp\/v2\/media?parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}