{"id":1265,"date":"2025-07-14T15:40:17","date_gmt":"2025-07-14T15:40:17","guid":{"rendered":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/?page_id=1265"},"modified":"2026-03-16T08:14:14","modified_gmt":"2026-03-16T13:14:14","slug":"calculadora","status":"publish","type":"page","link":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/calculadora\/","title":{"rendered":"Calculadora"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1265\" class=\"elementor elementor-1265\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c20748 elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"0c20748\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2e4c728 e-con-full e-flex e-con e-child\" data-id=\"2e4c728\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-65d4308 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"65d4308\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInLeft&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c25355f elementor-align-left elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"c25355f\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-far-check-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Calculadora<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa61bb6 elementor-widget elementor-widget-image\" data-id=\"fa61bb6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-content\/uploads\/2023\/06\/Post-2.jpg\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0decd28 elementor-widget elementor-widget-text-editor\" data-id=\"0decd28\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"titulo-seccion\"><p class=\"main-p my-4 py-2\">El primer paso para mejorar nuestras finanzas es identificar en que estamos invirtiendo o gastando nuestro dinero y as\u00ed poder tomar las decisiones m\u00e1s acertadas para tener cada vez una mayor tranquilidad financiera.<\/p><p class=\"main-p my-4 py-2\"><strong>Comienza registrando los ingresos que tienes mensualmente.<\/strong><\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c6ef28f e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"c6ef28f\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInRight&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bb4e49 elementor-widget elementor-widget-shortcode\" data-id=\"0bb4e49\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&display=swap');\n\n        #calculadora-presupuesto {\n            font-family: 'Montserrat', sans-serif;\n            max-width: 900px;\n            margin: auto;\n            padding: 20px;\n        }\n\n        #calculadora-presupuesto h2 {\n            font-size: 28px;\n            color: #222;\n            margin-bottom: 20px;\n            border-left: 5px solid #0033A0;\n            padding-left: 10px;\n        }\n\n        #calculadora-presupuesto label {\n            display: block;\n            margin: 15px 0 5px;\n            font-weight: 600;\n        }\n\n        #calculadora-presupuesto input[type=\"range\"] {\n            width: 100%;\n            height: 10px;\n            background: #ddd;\n            border-radius: 5px;\n        }\n\n        #calculadora-presupuesto div > div {\n            margin-bottom: 15px;\n        }\n\n        button {\n            background-color: #0033A0;\n            color: white;\n            border: 1px solid #0033A0;\n            padding: 10px 20px;\n            font-weight: 600;\n            border-radius: 5px;\n            margin-top: 20px;\n            cursor: pointer;\n\t\t\tfont-family: \"poppins\";\n\t\t\tfont-size:14px;\n        }\n\n        button i {\n            margin: 0 5px;\n        }\n\n        button:hover {\n            background-color: #F4F3F8!important;\n            color: #0073e6;\n        }\n\n        .pasos-indicador {\n            display: flex;\n            justify-content: left;\n            gap: 10px;\n            margin-bottom: 30px;\n        }\n\n        .pasos-indicador .paso {\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: bold;\n            transition: all 0.3s ease;\n        }\n\n        .pasos-indicador .paso.activo {\n            background-color: #e60023;\n            color: #F4F3F8;\n            border: 2px solid #e60023;\n        }\n\n        .pasos-indicador .paso.inactivo {\n            background-color: #F4F3F8;\n            color: #0033A0;\n            border: 2px solid #0033A0;\n        }\n\n        #alerta_exceso {\n            color: red;\n            font-weight: bold;\n            margin-top: 10px;\n        }\n    <\/style>\n\n    <div id=\"calculadora-presupuesto\">\n        <div class=\"pasos-indicador\">\n            <div class=\"paso activo\" id=\"paso_circulo_1\">1<\/div>\n            <div class=\"paso inactivo\" id=\"paso_circulo_2\">2<\/div>\n            <div class=\"paso inactivo\" id=\"paso_circulo_3\">3<\/div>\n        <\/div>\n\n        <!-- PASO 1 -->\n        <div id=\"paso1\">\n            <h2>Ingresa tus ingresos mensuales<\/h2>\n\n            <label>Salario 1<\/label>\n            <input type=\"range\" min=\"0\" max=\"10000000\" step=\"10000\" id=\"salario1\" value=\"0\" oninput=\"actualizarValor(this)\">\n            <div>$<span id=\"salario1_val\">0<\/span><\/div>\n\n            <label>Salario 2<\/label>\n            <input type=\"range\" min=\"0\" max=\"10000000\" step=\"10000\" id=\"salario2\" value=\"0\" oninput=\"actualizarValor(this)\">\n            <div>$<span id=\"salario2_val\">0<\/span><\/div>\n\n            <label>Otros Ingresos<\/label>\n            <input type=\"range\" min=\"0\" max=\"10000000\" step=\"10000\" id=\"otros_ingresos\" value=\"0\" oninput=\"actualizarValor(this)\">\n            <div>$<span id=\"otros_ingresos_val\">0<\/span><\/div>\n\n            <h3>Total de ingresos: $<span id=\"total_ingresos\">0<\/span><\/h3>\n\n            <button onclick=\"mostrarPaso(2)\">Sigue al paso 2 <i><\/i><\/button>\n        <\/div>\n\n        <!-- PASO 2 -->\n        <div id=\"paso2\" style=\"display:none;\">\n            <h2>Indica tus gastos mensuales<\/h2>\n\n            <div id=\"gastos\">\n                \n                    <div>\n                        <label>Arriendo \/ Hipoteca<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_arriendo' value='0' oninput='actualizarGasto(this, 27)'>\n                        <div>\n                            $<span id='val_gasto_arriendo'>0<\/span> |\n                            <span id='estado_gasto_arriendo'>0%<\/span>\n                            <span id='rango_arriendo'><\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label>Educaci\u00f3n<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_educacion' value='0' oninput='actualizarGasto(this, 23)'>\n                        <div>\n                            $<span id='val_gasto_educacion'>0<\/span> |\n                            <span id='estado_gasto_educacion'>0%<\/span>\n                            <span id='rango_educacion'><\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label>Servicios p\u00fablicos<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_servicios' value='0' oninput='actualizarGasto(this, 5)'>\n                        <div>\n                            $<span id='val_gasto_servicios'>0<\/span> |\n                            <span id='estado_gasto_servicios'>0%<\/span>\n                            <span id='rango_servicios'><\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label>Alimentaci\u00f3n<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_alimentacion' value='0' oninput='actualizarGasto(this, 15)'>\n                        <div>\n                            $<span id='val_gasto_alimentacion'>0<\/span> |\n                            <span id='estado_gasto_alimentacion'>0%<\/span>\n                            <span id='rango_alimentacion'><\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label>Seguros y Protecci\u00f3n<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_seguros' value='0' oninput='actualizarGasto(this, 10)'>\n                        <div>\n                            $<span id='val_gasto_seguros'>0<\/span> |\n                            <span id='estado_gasto_seguros'>0%<\/span>\n                            <span id='rango_seguros'><\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label>Transporte<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_transporte' value='0' oninput='actualizarGasto(this, 10)'>\n                        <div>\n                            $<span id='val_gasto_transporte'>0<\/span> |\n                            <span id='estado_gasto_transporte'>0%<\/span>\n                            <span id='rango_transporte'><\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label>Otros<\/label>\n                        <input type='range' min='0' max='5000000' step='10000' id='gasto_otros' value='0' oninput='actualizarGasto(this, 10)'>\n                        <div>\n                            $<span id='val_gasto_otros'>0<\/span> |\n                            <span id='estado_gasto_otros'>0%<\/span>\n                            <span id='rango_otros'><\/span>\n                        <\/div>\n                    <\/div>            <\/div>\n\n            <h3>Total egresos: $<span id=\"total_egresos\">0<\/span><\/h3>\n            <h3>Ahorro mensual: $<span id=\"ahorro_mensual\">0<\/span><\/h3>\n\n            <div id=\"alerta_exceso\" style=\"display: none;\">\n                \u26a0\ufe0f Tus gastos superan tus ingresos. Debes mejorar.\n            <\/div>\n\n            <button onclick=\"mostrarPaso(1)\"><i><\/i> Volver<\/button>\n            <button onclick=\"mostrarPaso(3)\">Sigue al paso 3 <i><\/i><\/button>\n        <\/div>\n\n        <!-- PASO 3 -->\n        <div id=\"paso3\" style=\"display:none;\">\n            <h2>Define tu tiempo de ahorro<\/h2>\n\n            <label>A\u00f1os<\/label>\n            <input type=\"range\" min=\"0\" max=\"10\" id=\"anios\" oninput=\"mostrarAhorro()\">\n            <span id=\"val_anios\">0<\/span> a\u00f1os\n\n            <label>Meses<\/label>\n            <input type=\"range\" min=\"0\" max=\"11\" id=\"meses\" oninput=\"mostrarAhorro()\">\n            <span id=\"val_meses\">0<\/span> meses\n\n            <h3>Tu ahorro acumulado: $<span id=\"total_ahorro\">0<\/span><\/h3>\n            <h3>Ahorro ideal: $<span id=\"total_ideal\">0<\/span><\/h3>\n\n            <button onclick=\"mostrarPaso(2)\"><i><\/i> Volver<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        let totalIngresos = 0;\n        let ahorroMensual = 0;\n        const ahorroIdeal = 60000;\n\n        function actualizarValor(input) {\n            document.getElementById(input.id + '_val').innerText = Number(input.value).toLocaleString();\n            calcularIngresos();\n        }\n\n        function calcularIngresos() {\n            const s1 = parseInt(document.getElementById('salario1').value) || 0;\n            const s2 = parseInt(document.getElementById('salario2').value) || 0;\n            const otros = parseInt(document.getElementById('otros_ingresos').value) || 0;\n            totalIngresos = s1 + s2 + otros;\n            document.getElementById('total_ingresos').innerText = totalIngresos.toLocaleString();\n        }\n\n        function mostrarPaso(n) {\n            for (let i = 1; i <= 3; i++) {\n                document.getElementById('paso' + i).style.display = (i === n) ? 'block' : 'none';\n                const circulo = document.getElementById('paso_circulo_' + i);\n                if (circulo) {\n                    circulo.classList.remove('activo', 'inactivo');\n                    circulo.classList.add(i === n ? 'activo' : 'inactivo');\n                }\n            }\n            if (n === 2) calcularEgresos();\n            if (n === 3) mostrarAhorro();\n        }\n\n        function actualizarGasto(input, idealPercent) {\n            const id = input.id.replace('gasto_', '');\n            const val = parseInt(input.value) || 0;\n            const porcentaje = totalIngresos ? ((val \/ totalIngresos) * 100).toFixed(0) : 0;\n            document.getElementById('val_gasto_' + id).innerText = val.toLocaleString();\n            document.getElementById('estado_gasto_' + id).innerText = `${porcentaje}%`;\n\n            const rango = document.getElementById('rango_' + id);\n            if (porcentaje > idealPercent + 10) {\n                rango.innerText = ' - Puedes mejorar';\n                rango.style.color = 'red';\n            } else {\n                rango.innerText = ' - En rango';\n                rango.style.color = 'green';\n            }\n\n            calcularEgresos();\n        }\n\n        function calcularEgresos() {\n            const campos = ['arriendo', 'educacion', 'servicios', 'alimentacion', 'seguros', 'transporte', 'otros'];\n            let total = 0;\n            campos.forEach(id => {\n                total += parseInt(document.getElementById('gasto_' + id).value) || 0;\n            });\n\n            ahorroMensual = totalIngresos - total;\n            document.getElementById('total_egresos').innerText = total.toLocaleString();\n            document.getElementById('ahorro_mensual').innerText = ahorroMensual.toLocaleString();\n\n            document.getElementById('alerta_exceso').style.display = ahorroMensual < 0 ? 'block' : 'none';\n        }\n\n        function mostrarAhorro() {\n            const anios = parseInt(document.getElementById('anios').value) || 0;\n            const meses = parseInt(document.getElementById('meses').value) || 0;\n\n            document.getElementById('val_anios').innerText = anios;\n            document.getElementById('val_meses').innerText = meses;\n\n            const totalMeses = anios * 12 + meses;\n            const total = ahorroMensual * totalMeses;\n            const ideal = ahorroIdeal * totalMeses;\n\n            document.getElementById('total_ahorro').innerText = total.toLocaleString();\n            document.getElementById('total_ideal').innerText = ideal.toLocaleString();\n        }\n\n        calcularIngresos();\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c70fab3 e-flex e-con-boxed e-con e-parent\" data-id=\"c70fab3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df6f60d elementor-widget elementor-widget-html\" data-id=\"df6f60d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<iframe data-lazyloaded=\"1\" src=\"https:\/\/cdn.globalseguroscolombia.com\/public\/content\/calculadora\/index.html\" data-src=\"https:\/\/cdn.globalseguroscolombia.com\/public\/content\/calculadora\/index.html\" width=\"100%\" height=\"830px\" frameborder=\"0\" data-gtm-yt-inspected-9=\"true\" data-ll-status=\"loaded\" class=\"entered litespeed-loaded\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculadora El primer paso para mejorar nuestras finanzas es identificar en que estamos invirtiendo o gastando nuestro dinero y as\u00ed poder tomar las decisiones m\u00e1s acertadas para tener cada vez una mayor tranquilidad financiera. Comienza registrando los ingresos que tienes mensualmente.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1265","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/pages\/1265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/comments?post=1265"}],"version-history":[{"count":4,"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/pages\/1265\/revisions"}],"predecessor-version":[{"id":4906,"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/pages\/1265\/revisions\/4906"}],"wp:attachment":[{"href":"https:\/\/gs-app-sitiosweb-wordpress-develop.azurewebsites.net\/wordpress\/wp-json\/wp\/v2\/media?parent=1265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}