{"id":2306,"date":"2025-08-27T03:09:36","date_gmt":"2025-08-27T03:09:36","guid":{"rendered":"https:\/\/drpablohenao.com.co\/?page_id=2306"},"modified":"2025-08-27T03:26:10","modified_gmt":"2025-08-27T03:26:10","slug":"calculadora-de-imc","status":"publish","type":"page","link":"https:\/\/drpablohenao.com.co\/index.php\/calculadora-de-imc\/","title":{"rendered":"Calculadora de IMC"},"content":{"rendered":"<style>.elementor-2306 .elementor-element.elementor-element-c434202{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:200px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2306\" class=\"elementor elementor-2306\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c434202 e-flex e-con-boxed e-con e-parent\" data-id=\"c434202\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f40d87 elementor-widget elementor-widget-html\" data-id=\"8f40d87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Calculadora IMC<\/title>\n    <style>\n        #imc-calculator-main {\n            width: 100% !important;\n            max-width: 800px !important;\n            margin: 0 auto !important;\n            padding: 40px 30px !important;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;\n        }\n\n        #imc-header-section {\n            text-align: center !important;\n            margin-bottom: 40px !important;\n            padding: 30px !important;\n            background: #fff !important;\n            border-radius: 20px !important;\n            box-shadow: 0 8px 25px rgba(144, 211, 241, 0.15) !important;\n        }\n\n        #imc-header-section h2 {\n            color: #C5CF28 !important;\n            font-size: 2.2rem !important;\n            font-weight: bold !important;\n            margin-bottom: 10px !important;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;\n        }\n\n        #imc-header-section p {\n            color: #666 !important;\n            font-size: 1.1rem !important;\n            margin: 0 !important;\n            line-height: 1.5 !important;\n        }\n\n        #imc-form-container {\n            background: #fff !important;\n            border: 3px solid #90D3F1 !important;\n            border-radius: 20px !important;\n            padding: 35px !important;\n            box-shadow: 0 8px 25px rgba(144, 211, 241, 0.15) !important;\n            margin-bottom: 30px !important;\n        }\n\n        .imc-input-row {\n            display: grid !important;\n            grid-template-columns: 1fr 1fr !important;\n            gap: 20px !important;\n            margin-bottom: 25px !important;\n        }\n\n        .imc-input-group {\n            margin-bottom: 25px !important;\n        }\n\n        .imc-input-label {\n            display: block !important;\n            color: #333 !important;\n            font-weight: 600 !important;\n            margin-bottom: 8px !important;\n            font-size: 1.1rem !important;\n        }\n\n        .imc-input-field {\n            width: 100% !important;\n            padding: 15px 20px !important;\n            border: 2px solid #90D3F1 !important;\n            border-radius: 10px !important;\n            font-size: 1rem !important;\n            transition: all 0.3s ease !important;\n            box-sizing: border-box !important;\n        }\n\n        .imc-input-field:focus {\n            outline: none !important;\n            border-color: #C5CF28 !important;\n            box-shadow: 0 0 0 3px rgba(197, 207, 40, 0.1) !important;\n        }\n\n        .imc-input-unit {\n            color: #666 !important;\n            font-size: 0.9rem !important;\n            margin-top: 5px !important;\n        }\n\n        #imc-calculate-btn {\n            width: 100% !important;\n            background: linear-gradient(135deg, #C5CF28 0%, #90D3F1 100%) !important;\n            color: #fff !important;\n            border: none !important;\n            padding: 18px 30px !important;\n            border-radius: 15px !important;\n            font-weight: 700 !important;\n            font-size: 1.1rem !important;\n            cursor: pointer !important;\n            transition: all 0.3s ease !important;\n            text-transform: uppercase !important;\n            letter-spacing: 1px !important;\n            margin-top: 20px !important;\n        }\n\n        #imc-calculate-btn:hover {\n            background: linear-gradient(135deg, #90D3F1 0%, #C5CF28 100%) !important;\n            transform: translateY(-3px) !important;\n            box-shadow: 0 8px 20px rgba(197, 207, 40, 0.3) !important;\n        }\n\n        #imc-result-container {\n            background: #fff !important;\n            border: 3px solid #90D3F1 !important;\n            border-radius: 20px !important;\n            padding: 30px !important;\n            text-align: center !important;\n            display: none !important;\n            box-shadow: 0 8px 25px rgba(144, 211, 241, 0.15) !important;\n        }\n\n        #imc-result-value {\n            font-size: 2.5rem !important;\n            font-weight: bold !important;\n            color: #C5CF28 !important;\n            margin: 20px 0 !important;\n        }\n\n        #imc-result-interpretation {\n            font-size: 1.1rem !important;\n            color: #333 !important;\n            line-height: 1.6 !important;\n            margin-bottom: 20px !important;\n        }\n\n        .imc-visual-indicator {\n            width: 100% !important;\n            height: 20px !important;\n            background: linear-gradient(90deg, #3498db 0%, #2ecc71 25%, #f1c40f 50%, #e67e22 75%, #e74c3c 100%) !important;\n            border-radius: 10px !important;\n            margin: 20px 0 !important;\n            position: relative !important;\n        }\n\n        .imc-indicator-pointer {\n            position: absolute !important;\n            top: -5px !important;\n            width: 2px !important;\n            height: 30px !important;\n            background: #333 !important;\n            border-radius: 2px !important;\n            transition: all 0.3s ease !important;\n        }\n\n        .imc-info-box {\n            background: linear-gradient(135deg, rgba(144, 211, 241, 0.1) 0%, rgba(144, 211, 241, 0.05) 100%) !important;\n            border-left: 5px solid #90D3F1 !important;\n            padding: 20px !important;\n            border-radius: 10px !important;\n            margin-top: 25px !important;\n        }\n\n        .imc-info-title {\n            color: #333 !important;\n            font-weight: 600 !important;\n            margin-bottom: 10px !important;\n        }\n\n        .imc-info-text {\n            color: #555 !important;\n            line-height: 1.5 !important;\n            font-size: 0.95rem !important;\n        }\n\n        @media (max-width: 768px) {\n            #imc-calculator-main {\n                padding: 20px 15px !important;\n            }\n\n            #imc-header-section {\n                padding: 20px !important;\n            }\n\n            #imc-header-section h2 {\n                font-size: 1.8rem !important;\n            }\n\n            #imc-form-container {\n                padding: 25px 20px !important;\n            }\n\n            .imc-input-row {\n                grid-template-columns: 1fr !important;\n                gap: 15px !important;\n            }\n\n            #imc-result-value {\n                font-size: 2rem !important;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"imc-calculator-main\">\n        <div id=\"imc-header-section\">\n            <h2>\u2696\ufe0f Calculadora de IMC<\/h2>\n            <p>Calcula tu \u00cdndice de Masa Corporal y conoce tu estado nutricional<\/p>\n        <\/div>\n\n        <div id=\"imc-form-container\">\n            <div class=\"imc-input-row\">\n                <div class=\"imc-input-group\">\n                    <label class=\"imc-input-label\" for=\"imc-height\">Estatura<\/label>\n                    <input type=\"number\" id=\"imc-height\" class=\"imc-input-field\" step=\"0.01\" min=\"0\" placeholder=\"Ej: 1.70\">\n                    <div class=\"imc-input-unit\">metros (m)<\/div>\n                <\/div>\n\n                <div class=\"imc-input-group\">\n                    <label class=\"imc-input-label\" for=\"imc-weight\">Peso<\/label>\n                    <input type=\"number\" id=\"imc-weight\" class=\"imc-input-field\" step=\"0.1\" min=\"0\" placeholder=\"Ej: 70.5\">\n                    <div class=\"imc-input-unit\">kilogramos (kg)<\/div>\n                <\/div>\n            <\/div>\n\n            <button id=\"imc-calculate-btn\" onclick=\"calculateIMC()\">Calcular IMC<\/button>\n\n            <div class=\"imc-info-box\">\n                <div class=\"imc-info-title\">\ud83d\udca1 Informaci\u00f3n importante:<\/div>\n                <div class=\"imc-info-text\">\n                    El IMC se calcula dividiendo el peso (kg) entre la estatura al cuadrado (m\u00b2). \n                    Es un indicador \u00fatil pero no considera la composici\u00f3n corporal (m\u00fasculo vs grasa).\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"imc-result-container\">\n            <h3 style=\"color: #333; margin-bottom: 10px;\">Tu IMC es:<\/h3>\n            <div id=\"imc-result-value\">--<\/div>\n            <div id=\"imc-result-interpretation\">Ingresa tus datos para obtener el resultado<\/div>\n            \n            <div class=\"imc-visual-indicator\">\n                <div class=\"imc-indicator-pointer\" id=\"imc-pointer\"><\/div>\n            <\/div>\n            \n            <div class=\"imc-info-box\">\n                <div class=\"imc-info-title\">\ud83d\udcca Clasificaci\u00f3n del IMC:<\/div>\n                <div class=\"imc-info-text\">\n                    <strong>\u2022 Bajo peso:<\/strong> < 18.5<br>\n                    <strong>\u2022 Normal:<\/strong> 18.5 - 24.9<br>\n                    <strong>\u2022 Sobrepeso:<\/strong> 25.0 - 29.9<br>\n                    <strong>\u2022 Obesidad grado I:<\/strong> 30.0 - 34.9<br>\n                    <strong>\u2022 Obesidad grado II:<\/strong> 35.0 - 39.9<br>\n                    <strong>\u2022 Obesidad grado III:<\/strong> \u2265 40.0\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<script>\n        function calculateIMC() {\n            const height = parseFloat(document.getElementById('imc-height').value);\n            const weight = parseFloat(document.getElementById('imc-weight').value);\n            if (!height || !weight || height <= 0 || weight <= 0) {\n                alert('Por favor, ingresa valores v\u00e1lidos para estatura y peso.');\n                return;\n            }\n            if (height > 3) {\n                alert('La estatura debe estar en metros (ej: 1.70, no 170).');\n                return;\n            }\n            const imc = weight \/ (height * height);\n            const resultContainer = document.getElementById('imc-result-container');\n            const resultValue = document.getElementById('imc-result-value');\n            const resultInterpretation = document.getElementById('imc-result-interpretation');\n            const pointer = document.getElementById('imc-pointer');\n\n            resultValue.textContent = imc.toFixed(1);\n\n            let interpretation = '';\n            let color = '';\n            let pointerPosition = 0;\n            if (imc < 18.5) {\n                interpretation = '\u26a0\ufe0f Bajo peso - Podr\u00edas beneficiarte de un plan nutricional para ganar peso saludablemente.';\n                color = '#3498db';\n                pointerPosition = (imc \/ 18.5) * 20;\n            } else if (imc < 25) {\n                interpretation = '\u2705 Peso normal - \u00a1Felicitaciones! Tu peso est\u00e1 en el rango saludable.';\n                color = '#2ecc71';\n                pointerPosition = 20 + ((imc - 18.5) \/ (25 - 18.5)) * 25;\n            } else if (imc < 30) {\n                interpretation = '\ud83d\udd36 Sobrepeso - Se recomienda adoptar h\u00e1bitos m\u00e1s saludables de alimentaci\u00f3n y ejercicio.';\n                color = '#f1c40f';\n                pointerPosition = 45 + ((imc - 25) \/ (30 - 25)) * 25;\n            } else if (imc < 40) {\n                interpretation = '\ud83d\udea8 Obesidad - Es importante consultar con un profesional de la salud.';\n                color = '#e67e22';\n                pointerPosition = 70 + ((imc - 30) \/ (40 - 30)) * 25;\n            } else {\n                interpretation = '\ud83c\udd98 Obesidad severa - Se requiere atenci\u00f3n m\u00e9dica especializada inmediata.';\n                color = '#e74c3c';\n                pointerPosition = 95;\n            }\n\n            resultInterpretation.textContent = interpretation;\n            resultValue.style.setProperty('color', color, 'important');\n            pointer.style.left = pointerPosition + '%';\n            resultContainer.style.setProperty('display', 'block', 'important');\n            resultContainer.scrollIntoView({ behavior: 'smooth' });\n        }\n        document.addEventListener('keypress', function(e) {\n            if (e.key === 'Enter') calculateIMC();\n        });\n    <\/script>\n<\/body>\n<\/html>\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculadora IMC \u2696\ufe0f Calculadora de IMC Calcula tu \u00cdndice de Masa Corporal y conoce tu estado nutricional Estatura metros (m) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-2306","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/pages\/2306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/comments?post=2306"}],"version-history":[{"count":7,"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/pages\/2306\/revisions"}],"predecessor-version":[{"id":2337,"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/pages\/2306\/revisions\/2337"}],"wp:attachment":[{"href":"https:\/\/drpablohenao.com.co\/index.php\/wp-json\/wp\/v2\/media?parent=2306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}