{"id":43,"date":"2026-03-13T09:31:02","date_gmt":"2026-03-13T09:31:02","guid":{"rendered":"https:\/\/3cabezas.com\/?page_id=43"},"modified":"2026-03-13T09:52:31","modified_gmt":"2026-03-13T09:52:31","slug":"calc","status":"publish","type":"page","link":"https:\/\/3cabezas.com\/index.php\/calc\/","title":{"rendered":"calc"},"content":{"rendered":"<p>&nbsp;<\/p>\n<style>\n    :root {<br \/>      --bg: #f7f7fb;<br \/>      --card: #ffffff;<br \/>      --text: #1f2937;<br \/>      --muted: #6b7280;<br \/>      --accent: #b91c1c;<br \/>      --border: #e5e7eb;<br \/>    }<\/p>\n<p>    * { box-sizing: border-box; }<\/p>\n<p>    body {<br \/>      margin: 0;<br \/>      font-family: Arial, Helvetica, sans-serif;<br \/>      background: linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);<br \/>      color: var(--text);<br \/>      min-height: 100vh;<br \/>      display: grid;<br \/>      place-items: center;<br \/>      padding: 24px;<br \/>    }<\/p>\n<p>    .card {<br \/>      width: 100%;<br \/>      max-width: 560px;<br \/>      background: var(--card);<br \/>      border: 1px solid var(--border);<br \/>      border-radius: 18px;<br \/>      box-shadow: 0 10px 30px rgba(0,0,0,0.08);<br \/>      padding: 28px;<br \/>    }<\/p>\n<p>    h1 {<br \/>      margin: 0 0 8px;<br \/>      font-size: 1.8rem;<br \/>    }<\/p>\n<p>    p {<br \/>      margin: 0 0 20px;<br \/>      color: var(--muted);<br \/>      line-height: 1.5;<br \/>    }<\/p>\n<p>    .input-group {<br \/>      display: grid;<br \/>      gap: 8px;<br \/>      margin-bottom: 20px;<br \/>    }<\/p>\n<p>    label {<br \/>      font-weight: 700;<br \/>    }<\/p>\n<p>    input {<br \/>      width: 100%;<br \/>      padding: 14px 16px;<br \/>      font-size: 1rem;<br \/>      border: 1px solid var(--border);<br \/>      border-radius: 12px;<br \/>      outline: none;<br \/>    }<\/p>\n<p>    input:focus {<br \/>      border-color: var(--accent);<br \/>      box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);<br \/>    }<\/p>\n<p>    .results {<br \/>      display: grid;<br \/>      gap: 12px;<br \/>      margin-top: 8px;<br \/>    }<\/p>\n<p>    .result {<br \/>      display: flex;<br \/>      justify-content: space-between;<br \/>      align-items: center;<br \/>      padding: 16px;<br \/>      border: 1px solid var(--border);<br \/>      border-radius: 14px;<br \/>      background: #fcfcfd;<br \/>    }<\/p>\n<p>    .result strong {<br \/>      font-size: 1.05rem;<br \/>    }<\/p>\n<p>    .value {<br \/>      font-size: 1.1rem;<br \/>      font-weight: 700;<br \/>      color: var(--accent);<br \/>    }<\/p>\n<p>    .formula {<br \/>      margin-top: 18px;<br \/>      padding: 14px;<br \/>      background: #fff7f7;<br \/>      border: 1px solid #fecaca;<br \/>      border-radius: 12px;<br \/>      color: #7f1d1d;<br \/>      font-size: 0.95rem;<br \/>    }<\/p>\n<p>    .footer {<br \/>      margin-top: 16px;<br \/>      color: var(--muted);<br \/>      font-size: 0.9rem;<br \/>    }<br \/>  <\/style>\n<p>&nbsp;<\/p>\n<p><main class=\"card\"><\/main>&nbsp;<\/p>\n<h1>Calculadora de receta<\/h1>\n<p>Introduce los gramos de claras y la web calcular\u00e1 autom\u00e1ticamente el az\u00facar y la mantequilla seg\u00fan tu proporci\u00f3n base.<\/p>\n<div class=\"input-group\"><label for=\"claras\">Claras (g)<\/label><br \/>\n<input id=\"claras\" min=\"0\" step=\"0.01\" type=\"number\" value=\"110\" placeholder=\"Ej. 200\" \/><\/div>\n<section class=\"results\">\n<div class=\"result\"><strong>Az\u00facar<\/strong><br \/>\n<span id=\"azucar\" class=\"value\">180 g<\/span><\/div>\n<div class=\"result\"><strong>Mantequilla<\/strong><br \/>\n<span id=\"mantequilla\" class=\"value\">220 g<\/span><\/div>\n<\/section>\n<div class=\"formula\">Proporci\u00f3n base: 110 g claras \u2192 180 g az\u00facar y 220 g mantequilla<\/div>\n<div class=\"footer\">Ejemplo: si escribes 200 g de claras, ver\u00e1s autom\u00e1ticamente 327.27 g de az\u00facar y 400 g de mantequilla.<\/div>\n<p>&nbsp;<\/p>\n<p><script>\n    const clarasInput = document.getElementById('claras');\n    const azucarEl = document.getElementById('azucar');\n    const mantequillaEl = document.getElementById('mantequilla');<\/p>\n<p>    function formatNumber(value) {\n      const rounded = Math.round(value * 100) \/ 100;\n      return Number.isInteger(rounded) ? rounded.toString() : rounded.toFixed(2);\n    }<\/p>\n<p>    function calcular() {\n      const claras = parseFloat(clarasInput.value);<\/p>\n<p>      if (isNaN(claras) || claras < 0) {\n        azucarEl.textContent = '-';\n        mantequillaEl.textContent = '-';\n        return;\n      }\n\n      const azucar = claras * (180 \/ 110);\n      const mantequilla = claras * (220 \/ 110);\n\n      azucarEl.textContent = `${formatNumber(azucar)} g`;\n      mantequillaEl.textContent = `${formatNumber(mantequilla)} g`;\n    }\n\n    clarasInput.addEventListener('input', calcular);\n    calcular();\n  <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; &nbsp; Calculadora de receta Introduce los gramos de claras y la web calcular\u00e1 autom\u00e1ticamente el az\u00facar y la mantequilla seg\u00fan tu proporci\u00f3n base. Claras (g) Az\u00facar 180 g Mantequilla 220 g Proporci\u00f3n base: 110 g claras \u2192 180 g az\u00facar y 220 g mantequilla Ejemplo: si escribes 200 g de claras, ver\u00e1s autom\u00e1ticamente [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-43","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":4,"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/pages\/43\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/3cabezas.com\/index.php\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}