Macrocalculadora<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: #333;\n background-color: #f5f5f5;\n padding: 20px;\n }\n\n .marco-container {\n max-width: 600px;\n margin: 0 auto;\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n\n h1 {\n font-size: 32px;\n margin-bottom: 10px;\n color: #222;\n }\n\n h2 {\n font-size: 24px;\n margin-bottom: 20px;\n color: #444;\n }\n\n .description {\n color: #666;\n margin-bottom: 30px;\n font-size: 16px;\n }\n\n .form-group {\n margin-bottom: 25px;\n }\n\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: 500;\n color: #444;\n font-size: 15px;\n }\n\n .input-wrapper {\n position: relative;\n }\n\n input[type=\"number\"] {\n width: 100%;\n padding: 12px 45px 12px 15px;\n font-size: 16px;\n border: 2px solid #ddd;\n border-radius: 8px;\n transition: border-color 0.3s;\n }\n\n input[type=\"number\"]:focus {\n outline: none;\n border-color: #F0605C;\n }\n\n .unit-label {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #999;\n font-size: 14px;\n }\n\n .unit-toggle {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n }\n\n .unit-btn {\n flex: 1;\n padding: 8px 16px;\n border: 2px solid #ddd;\n background: white;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n transition: all 0.3s;\n }\n\n .unit-btn.active {\n background: #F0605C;\n border-color: #F0605C;\n color: white;\n }\n\n .height-inputs {\n display: flex;\n gap: 10px;\n }\n\n .height-inputs .input-wrapper {\n flex: 1;\n }\n\n .height-cm {\n display: block;\n }\n\n .height-ft-in {\n display: none;\n }\n\n .radio-group {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n }\n\n .radio-option {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .radio-option input[type=\"radio\"] {\n width: 20px;\n height: 20px;\n margin-right: 8px;\n cursor: pointer;\n accent-color: #F0605C;\n }\n\n .radio-option label {\n margin: 0;\n cursor: pointer;\n font-weight: normal;\n }\n\n select {\n width: 100%;\n padding: 12px 15px;\n font-size: 16px;\n border: 2px solid #ddd;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: border-color 0.3s;\n }\n\n select:focus {\n outline: none;\n border-color: #F0605C;\n }\n\n .calculate-btn {\n width: 100%;\n padding: 15px;\n background: #F0605C;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n transition: background 0.3s;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .calculate-btn:hover {\n background: #e04f4b;\n }\n\n .calculate-btn:active {\n transform: scale(0.98);\n }\n\n .result {\n display: none;\n margin-top: 30px;\n padding: 25px;\n background: #f8f9fa;\n border-radius: 8px;\n border-left: 4px solid #F0605C;\n }\n\n .result.show {\n display: block;\n }\n\n .result h3 {\n color: #F0605C;\n margin-bottom: 15px;\n font-size: 20px;\n }\n\n .calorie-value {\n font-size: 36px;\n font-weight: bold;\n color: #222;\n margin-bottom: 10px;\n }\n\n .calorie-unit {\n font-size: 16px;\n color: #666;\n margin-bottom: 25px;\n }\n\n .macro-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n margin: 25px 0;\n }\n\n .macro-card {\n background: white;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n border: 2px solid #F0605C;\n }\n\n .macro-card h4 {\n color: #F0605C;\n font-size: 14px;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .macro-card .value {\n font-size: 28px;\n font-weight: bold;\n color: #222;\n margin-bottom: 5px;\n }\n\n .macro-card .unit {\n font-size: 12px;\n color: #666;\n }\n\n .macro-card .percentage {\n font-size: 14px;\n color: #999;\n margin-top: 5px;\n }\n\n .info-section {\n margin-top: 25px;\n padding: 20px;\n background: white;\n border-radius: 8px;\n border: 1px solid #ddd;\n }\n\n .info-section h4 {\n color: #444;\n margin-bottom: 10px;\n font-size: 16px;\n }\n\n .info-section p {\n color: #666;\n font-size: 14px;\n line-height: 1.6;\n }\n\n @media (max-width: 480px) {\n .container {\n padding: 20px;\n }\n\n h1 {\n font-size: 28px;\n }\n\n h2 {\n font-size: 20px;\n }\n\n .macro-grid {\n grid-template-columns: 1fr;\n }\n\n .radio-group {\n flex-direction: column;\n gap: 10px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"marco-container\">\n <h1>Macrocalculadora<\/h1>\n\n <div id=\"macroForm\">\n <div class=\"form-group\">\n <label>Peso actual<\/label>\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"weight\" step=\"0.1\">\n <span class=\"unit-label\" id=\"weightUnit\">kg<\/span>\n <\/div>\n <div class=\"unit-toggle\">\n <button type=\"button\" class=\"unit-btn active\" onclick=\"setWeightUnit('kg')\">Kilogramos (kg)<\/button>\n <button type=\"button\" class=\"unit-btn\" onclick=\"setWeightUnit('lbs')\">Libras (lbs)<\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Altura<\/label>\n <div class=\"height-cm\" id=\"heightCmDiv\">\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"heightCm\" step=\"0.1\">\n <span class=\"unit-label\">cm<\/span>\n <\/div>\n <\/div>\n <div class=\"height-ft-in\" id=\"heightFtInDiv\">\n <div class=\"height-inputs\">\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"heightFt\" step=\"1\">\n <span class=\"unit-label\">ft<\/span>\n <\/div>\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"heightIn\" step=\"1\">\n <span class=\"unit-label\">en<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"unit-toggle\">\n <button type=\"button\" class=\"unit-btn active\" onclick=\"setHeightUnit('cm')\">Cent\u00edmetros (cm)<\/button>\n <button type=\"button\" class=\"unit-btn\" onclick=\"setHeightUnit('ft')\">Pies y pulgadas (ft\/in)<\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Edad<\/label>\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"age\">\n <span class=\"unit-label\">a\u00f1os<\/span>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Sexo<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"male\" name=\"sex\" value=\"male\">\n <label for=\"male\">Hombre<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"female\" name=\"sex\" value=\"female\">\n <label for=\"female\">Mujer<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Nivel de actividad<\/label>\n <select id=\"activityLevel\">\n <option value=\"1.2\">Sedentarismo (poco o ning\u00fan ejercicio)<\/option>\n <option value=\"1.375\">Poco activo (1-3 d\u00edas\/semana)<\/option>\n <option value=\"1.55\">Moderadamente activo (3-5 d\u00edas\/semana)<\/option>\n <option value=\"1.725\">Muy activo (6-7 d\u00edas\/semana)<\/option>\n <option value=\"1.9\">Extra activo (ejercicio muy intenso)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label>Objetivo<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"lose\" name=\"goal\" value=\"lose\">\n <label for=\"lose\">P\u00e9rdida de peso<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"maintain\" name=\"goal\" value=\"maintain\" checked>\n <label for=\"maintain\">Mantener el peso<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"gain\" name=\"goal\" value=\"gain\">\n <label for=\"gain\">Ganancia muscular<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <button type=\"button\" class=\"calculate-btn\" onclick=\"calculateMacros()\">Calcule<\/button>\n <\/div>\n\n <div class=\"result\" id=\"result\">\n <h3>Sus objetivos diarios<\/h3>\n <div class=\"calorie-value\" id=\"calorieValue\">0<\/div>\n <div class=\"calorie-unit\">calor\u00edas\/d\u00eda<\/div>\n \n <h3 style=\"margin-top: 25px;\">Desglose de macronutrientes<\/h3>\n <div class=\"macro-grid\">\n <div class=\"macro-card\">\n <h4>Prote\u00edna<\/h4>\n <div class=\"value\" id=\"proteinGrams\">0<\/div>\n <div class=\"unit\">gramos\/d\u00eda<\/div>\n <div class=\"percentage\" id=\"proteinPercent\">0%<\/div>\n <\/div>\n <div class=\"macro-card\">\n <h4>Carbohidratos<\/h4>\n <div class=\"value\" id=\"carbsGrams\">0<\/div>\n <div class=\"unit\">gramos\/d\u00eda<\/div>\n <div class=\"percentage\" id=\"carbsPercent\">0%<\/div>\n <\/div>\n <div class=\"macro-card\">\n <h4>Grasas<\/h4>\n <div class=\"value\" id=\"fatsGrams\">0<\/div>\n <div class=\"unit\">gramos\/d\u00eda<\/div>\n <div class=\"percentage\" id=\"fatsPercent\">0%<\/div>\n <\/div>\n <\/div>\n\n <div class=\"info-section\">\n <h4>Acerca de sus macros<\/h4>\n <p id=\"macroExplanation\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let weightUnit = 'kg';\n let heightUnit = 'cm';\n\n function setWeightUnit(unit) {\n weightUnit = unit;\n document.getElementById('weightUnit').textContent = unit;\n \n const buttons = document.querySelectorAll('.form-group:first-child .unit-btn');\n buttons.forEach(btn => {\n if (btn.textContent.includes(unit)) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n }\n\n function setHeightUnit(unit) {\n heightUnit = unit;\n \n const buttons = document.querySelectorAll('.form-group:nth-child(2) .unit-btn');\n buttons.forEach(btn => {\n if (btn.textContent.includes(unit)) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n \n if (unit === 'cm') {\n document.getElementById('heightCmDiv').style.display = 'block';\n document.getElementById('heightFtInDiv').style.display = 'none';\n } else {\n document.getElementById('heightCmDiv').style.display = 'none';\n document.getElementById('heightFtInDiv').style.display = 'block';\n }\n }\n\n function calculateMacros() {\n \/\/ Get weight in kg\n let weight = parseFloat(document.getElementById('weight').value);\n if (!weight || weight <= 0) {\n alert('Please enter a valid weight');\n return;\n }\n if (weightUnit === 'lbs') {\n weight = weight * 0.453592;\n }\n\n \/\/ Get height in cm\n let height;\n if (heightUnit === 'cm') {\n height = parseFloat(document.getElementById('heightCm').value);\n if (!height || height <= 0) {\n alert('Please enter a valid height');\n return;\n }\n } else {\n const feet = parseFloat(document.getElementById('heightFt').value) || 0;\n const inches = parseFloat(document.getElementById('heightIn').value) || 0;\n if (feet <= 0 && inches <= 0) {\n alert('Please enter a valid height');\n return;\n }\n height = (feet * 30.48) + (inches * 2.54);\n }\n\n const age = parseFloat(document.getElementById('age').value);\n if (!age || age <= 0) {\n alert('Please enter a valid age');\n return;\n }\n\n const sexInput = document.querySelector('input[name=\"sex\"]:checked');\n if (!sexInput) {\n alert('Please select your sex');\n return;\n }\n const sex = sexInput.value;\n\n const activityLevel = parseFloat(document.getElementById('activityLevel').value);\n\n const goalInput = document.querySelector('input[name=\"goal\"]:checked');\n const goal = goalInput.value;\n\n \/\/ Calculate BMR using Mifflin-St Jeor Equation\n let bmr;\n if (sex === 'male') {\n bmr = (10 * weight) + (6.25 * height) - (5 * age) + 5;\n } else {\n bmr = (10 * weight) + (6.25 * height) - (5 * age) - 161;\n }\n\n \/\/ Calculate TDEE\n let tdee = bmr * activityLevel;\n\n \/\/ Adjust calories based on goal\n let calories;\n let proteinPercent, carbsPercent, fatsPercent;\n let explanation;\n\n if (goal === 'lose') {\n calories = tdee * 0.85; \/\/ 15% deficit\n proteinPercent = 0.40;\n carbsPercent = 0.40;\n fatsPercent = 0.20;\n explanation = \"For weight loss, you're in a 15% calorie deficit with a 40\/40\/20 macro split (protein\/carbs\/fats). High protein helps preserve muscle mass while losing fat.\";\n } else if (goal === 'gain') {\n calories = tdee + 500; \/\/ 500 calorie surplus\n proteinPercent = 0.30;\n carbsPercent = 0.40;\n fatsPercent = 0.30;\n explanation = \"For muscle gain, you're in a 500 calorie surplus with a 30\/40\/30 macro split. Higher carbs fuel your workouts and support muscle growth.\";\n } else {\n calories = tdee;\n proteinPercent = 0.30;\n carbsPercent = 0.40;\n fatsPercent = 0.30;\n explanation = \"For maintenance, your calories equal your daily energy expenditure with a balanced 30\/40\/30 macro split to maintain your current weight.\";\n }\n\n \/\/ Calculate macros in grams\n \/\/ Protein: 4 cal\/g, Carbs: 4 cal\/g, Fats: 9 cal\/g\n const proteinGrams = Math.round((calories * proteinPercent) \/ 4);\n const carbsGrams = Math.round((calories * carbsPercent) \/ 4);\n const fatsGrams = Math.round((calories * fatsPercent) \/ 9);\n\n \/\/ Display results\n document.getElementById('calorieValue').textContent = Math.round(calories);\n document.getElementById('proteinGrams').textContent = proteinGrams;\n document.getElementById('proteinPercent').textContent = Math.round(proteinPercent * 100) + '%';\n document.getElementById('carbsGrams').textContent = carbsGrams;\n document.getElementById('carbsPercent').textContent = Math.round(carbsPercent * 100) + '%';\n document.getElementById('fatsGrams').textContent = fatsGrams;\n document.getElementById('fatsPercent').textContent = Math.round(fatsPercent * 100) + '%';\n document.getElementById('macroExplanation').textContent = explanation;\n\n document.getElementById('result').classList.add('show');\n \n setTimeout(() => {\n document.getElementById('result').scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 100);\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"fws_69e8ba283fd16\" data-column-margin=\"default\" data-midnight=\"dark\" class=\"wpb_row vc_row-fluid vc_row\" style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"false\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop\" style=\"\"><\/div><\/div><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-split-heading\" data-align=\"default\" data-m-align=\"inherit\" data-text-effect=\"default\" data-animation-type=\"line-reveal-by-space\" data-animation-delay=\"0\" data-animation-offset=\"\" data-m-rm-animation=\"\" data-stagger=\"\" data-custom-font-size=\"false\" ><h1 >Como Duolingo pero para perder peso<\/h1><\/div>\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<div class=\"wpb_wrapper\">\n\t\t<p>Fito es una aplicaci\u00f3n de seguimiento de alimentos y calor\u00edas, como <a href=\"https:\/\/www.duolingo.com\/\" rel=\"noopener\">Duolingo<\/a> pero para perder peso. Y tiene un simp\u00e1tico osito que te acompa\u00f1a en tu dieta en el <a href=\"https:\/\/getfitoapp.com\/es\/tools\/fitness-streak-widgets-and-watch-faces\/\">widgets para la pantalla de inicio<\/a>La salud a largo plazo es una fuente de motivaci\u00f3n.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"nectar-cta text_hover_color_FFFFFF alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit\" data-color=\"accent-color\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"left\" data-text-color=\"custom\" ><h3 style=\"color: #FFFFFF;\"><span class=\"link_wrap\" style=\"padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;\"><a class=\"link_text\" role=\"button\" href=\"https:\/\/getfitoapp.com\/es\/\"><span class=\"text\">Pru\u00e9belo ahora<\/span><\/a><\/span><\/h3><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n <div class=\"inner\">\n <div class=\"hover-wrap\"> \n <div class=\"hover-wrap-inner\">\n <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"1580\" width=\"2523\" data-animation=\"none\" src=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets.png\" alt=\"Seis coloridos widgets de una aplicaci\u00f3n de seguimiento de calor\u00edas, que muestran un oso rojo de dibujos animados que ilustra el estado de la ingesta diaria de calor\u00edas, incluidos los recuentos de "m\u00e1s" y "restantes" para la gesti\u00f3n de la dieta y la forma f\u00edsica.\" srcset=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets.png 2523w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-300x188.png 300w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-1024x641.png 1024w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-768x481.png 768w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-1536x962.png 1536w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-2048x1283.png 2048w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-18x12.png 18w\" sizes=\"auto, (max-width: 2523px) 100vw, 2523px\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"Marco Calculator Calculate your daily macronutrient needs based on your goals. This calculator will provide personalized protein, carbohydrate, and fat targets. Macro Calculator Macro Calculator Current Weight kg Kilograms (kg)...","protected":false},"author":1,"featured_media":0,"parent":6528,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[39],"class_list":{"0":"post-6751","1":"page","2":"type-page","3":"status-publish","5":"tag-tools"},"_links":{"self":[{"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/pages\/6751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/comments?post=6751"}],"version-history":[{"count":0,"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/pages\/6751\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/pages\/6528"}],"wp:attachment":[{"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/media?parent=6751"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getfitoapp.com\/es\/wp-json\/wp\/v2\/tags?post=6751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}