{"id":2,"date":"2026-06-24T11:52:45","date_gmt":"2026-06-24T09:52:45","guid":{"rendered":"https:\/\/hipotecas.uncutmakers.com\/?page_id=2"},"modified":"2026-06-24T12:01:09","modified_gmt":"2026-06-24T10:01:09","slug":"pagina-ejemplo","status":"publish","type":"page","link":"https:\/\/hipotecas.uncutmakers.com\/","title":{"rendered":"Calculadora de Hipoteca"},"content":{"rendered":"\n<main class=\"uncut-hc-main\">\n  <div class=\"uncut-hc-container\">\n    <header class=\"uncut-hc-header\">\n      <div class=\"logo\">\n        <svg viewBox=\"0 0 24 24\">\n          <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\" \/>\n        <\/svg>\n      <\/div>\n      <div>\n        <h1>Calculadora Hipotecaria<\/h1>\n        <p>Cuota mensual \u00b7 M\u00e9todo TIN\/12 \u00b7 TAE seg\u00fan Banco de Espa\u00f1a<\/p>\n      <\/div>\n    <\/header>\n\n    <!-- PAR\u00c1METROS -->\n    <div class=\"card\">\n      <div class=\"card-title\">par\u00e1metros del pr\u00e9stamo<\/div>\n      <div class=\"grid2\" style=\"margin-bottom:1.25rem\">\n        <div class=\"field\">\n          <label>Importe del pr\u00e9stamo (\u20ac)<\/label>\n          <input type=\"number\" id=\"importeInput\" value=\"250000\" min=\"10000\" max=\"5000000\" step=\"1000\">\n        <\/div>\n        <div class=\"field\">\n          <label>Plazo (a\u00f1os)<\/label>\n          <input type=\"number\" id=\"plazoInput\" value=\"25\" min=\"1\" max=\"40\" step=\"1\">\n          <span class=\"field-hint\">M\u00e1ximo 40 a\u00f1os<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"slider-group\" style=\"margin-bottom:1.25rem\">\n        <label>Importe <span id=\"importeLabel\">250.000 \u20ac<\/span><\/label>\n        <input type=\"range\" id=\"importeSlider\" min=\"50000\" max=\"800000\" step=\"5000\" value=\"250000\">\n      <\/div>\n      <div class=\"slider-group\" style=\"margin-bottom:1.25rem\">\n        <label>Plazo <span id=\"plazoLabel\">25 a\u00f1os<\/span><\/label>\n        <input type=\"range\" id=\"plazoSlider\" min=\"1\" max=\"40\" step=\"1\" value=\"25\">\n      <\/div>\n\n      <div style=\"margin-bottom:.75rem\">\n        <div class=\"card-title\" style=\"margin-bottom:.75rem\">tipo de hipoteca<\/div>\n        <div class=\"tipo-btns\">\n          <button class=\"tipo-btn active\" data-tipo=\"fija\">Fija<\/button>\n          <button class=\"tipo-btn\" data-tipo=\"mixta\">Mixta 10 a\u00f1os<\/button>\n          <button class=\"tipo-btn\" data-tipo=\"variable\">Variable<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"grid2\" style=\"margin-top:.75rem; gap:.75rem\">\n        <div class=\"field\">\n          <label id=\"tinLabel\">Tipo nominal anual (TIN) sin bonificar (%)<\/label>\n          <input type=\"number\" id=\"tinInput\" value=\"3.20\" min=\"0.01\" max=\"15\" step=\"0.05\">\n        <\/div>\n        <div id=\"diferencialField\" class=\"field\" style=\"display:none\">\n          <label>Diferencial sobre eur\u00edbor (%)<\/label>\n          <input type=\"number\" id=\"diferencialInput\" value=\"0.85\" min=\"0\" max=\"5\" step=\"0.05\">\n        <\/div>\n      <\/div>\n\n      <div class=\"euribor-row\" id=\"euriborRow\">\n        <span>Eur\u00edbor referencia:<\/span>\n        <input type=\"number\" id=\"euriborInput\"\n          value=\"2.855\"\n          min=\"0\" max=\"10\" step=\"0.05\"\n          style=\"width:80px; padding:.3rem .5rem; border:1px solid var(--border2); border-radius:4px; font-size:13px; font-family:inherit; background:var(--surface);\">\n        <span>%<\/span>\n        <span class=\"euribor-badge\">actual\n          ~2.855%<\/span>\n      <\/div>\n\n      <div class=\"mixta-info\" id=\"mixtaInfo\" style=\"display:none\">\n        Fase fija: tipo introducido durante los primeros 10 a\u00f1os. Fase variable: eur\u00edbor + diferencial los a\u00f1os\n        restantes.\n      <\/div>\n    <\/div>\n\n    <!-- BONIFICADORES -->\n    <div class=\"card\">\n      <div class=\"card-title\">bonificadores<\/div>\n      <div class=\"bonif-table-wrapper\">\n        <table class=\"bonif-table\">\n          <thead>\n            <tr>\n              <th style=\"width:40px\">Act.<\/th>\n              <th>Concepto<\/th>\n              <th style=\"width:90px\">Bonif. (%)<\/th>\n              <th style=\"width:100px\">Coste (\u20ac\/mes)<\/th>\n              <th style=\"width:32px\"><\/th>\n            <\/tr>\n          <\/thead>\n          <tbody id=\"bonifBody\"><\/tbody>\n        <\/table>\n      <\/div>\n      <div style=\"display:flex; gap: 1rem; margin-top: .75rem;\">\n        <button class=\"add-btn\" id=\"addBonif\" style=\"margin-top:0; flex:1;\">+ A\u00f1adir bonificador<\/button>\n        <button class=\"add-btn\" id=\"resetBonif\"\n          style=\"margin-top:0; flex:1; border-color: var(--border); color: var(--text3); border-style: solid;\">\u21ba\n          Restablecer valores<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- AVISO COOKIES -->\n    <div class=\"cookie-notice\"\n      style=\"font-size: 11px; color: var(--text3); margin-top: -0.5rem; margin-bottom: 1rem; text-align: center;\">\n      Tus datos se guardan en tu navegador para no tener que escribirlos cada vez, siendo siempre privados.\n    <\/div>\n\n    <!-- RESULTADOS -->\n    <div class=\"card\">\n      <div class=\"results-header\">\n        <div class=\"card-title\">resultado<\/div>\n      <\/div>\n      <div class=\"grid-results\" id=\"metricsGrid\" style=\"margin-bottom:1.25rem\"><\/div>\n\n      <!-- Bloque 1: Resumen de tu hipoteca -->\n      <div class=\"summary-section\"\n        style=\"margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);\">\n        <div class=\"card-title\">Resumen de tu hipoteca<\/div>\n        <div id=\"resumenHipotecaContent\"><\/div>\n      <\/div>\n\n      <!-- Bloque 2: Resumen de productos -->\n      <div class=\"summary-section\" id=\"resumenProductosSection\"\n        style=\"margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: none;\">\n        <div class=\"card-title\">Resumen de productos<\/div>\n        <div id=\"resumenProductosContent\"><\/div>\n      <\/div>\n\n      <!-- Bloque 3: Env\u00edo por Email -->\n      <div class=\"pdf-email-section\"\n        style=\"margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);\">\n        <div class=\"card-title\" style=\"margin-bottom: 0.5rem;\">Te enviamos tu cuadro de amortizaci\u00f3n por email<\/div>\n        <form id=\"emailPdfForm\" class=\"email-form\">\n\n          <div class=\"email-form-row\">\n            <div class=\"email-form-col\">\n              <select id=\"userBank\" required\n                style=\"padding: .6rem .75rem; border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface);\">\n                <option value=\"\">Selecciona tu banco actual...<\/option>\n                <option value=\"Banco Santander\">Banco Santander<\/option>\n                <option value=\"BBVA\">BBVA<\/option>\n                <option value=\"CaixaBank\">CaixaBank<\/option>\n                <option value=\"Banco Sabadell\">Banco Sabadell<\/option>\n                <option value=\"Bankinter\">Bankinter<\/option>\n                <option value=\"Unicaja\">Unicaja<\/option>\n                <option value=\"Kutxabank\">Kutxabank<\/option>\n                <option value=\"Ibercaja\">Ibercaja<\/option>\n                <option value=\"Abanca\">Abanca<\/option>\n                <option value=\"ING\">ING<\/option>\n                <option value=\"EVO Banco\">EVO Banco<\/option>\n                <option value=\"Openbank\">Openbank<\/option>\n                <option value=\"MyInvestor\">MyInvestor<\/option>\n                <option value=\"Otro\">Otro...<\/option>\n              <\/select>\n              <input type=\"text\" id=\"userBankOther\" placeholder=\"Escribe el nombre del banco\"\n                style=\"display:none; padding: .6rem .75rem; border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface); margin-top: 0.5rem;\">\n            <\/div>\n            <div class=\"email-form-col\">\n              <input type=\"email\" id=\"userEmail\" required placeholder=\"tu@email.com\"\n                style=\"padding: .6rem .75rem; border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface);\">\n            <\/div>\n          <\/div>\n\n          <div style=\"margin-top: 0.25rem; margin-bottom: 0.25rem;\">\n            <label style=\"font-size: 11px; color: var(--text3); display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; text-align: left; line-height: 1.4;\">\n              <input type=\"checkbox\" required id=\"privacyPolicyCheckbox\" style=\"margin-top: 0.15rem; flex-shrink: 0;\">\n              <span>Estudio143 Comunicaci\u00f3n SL tratar\u00e1 tus datos personales para enviarte la informaci\u00f3n solicitada, no comparti\u00e9ndolos con ning\u00fan tercero ni us\u00e1ndolos con fines comerciales. Puedes ejercer los derechos de acceso, supresi\u00f3n, rectificaci\u00f3n, oposici\u00f3n, limitaci\u00f3n y portabilidad, mediante email a david@estudio143.com, presentando una reclamaci\u00f3n ante la Agencia Espa\u00f1ola de protecci\u00f3n de datos, o contactando con nuestro Delegado de Protecci\u00f3n de Datos, enviando escrito a Estudio143 Comunicaci\u00f3n SL, c\/ Porvenir 11 - 28028 Madrid.<\/span>\n            <\/label>\n          <\/div>\n\n          <div class=\"email-form-submit\">\n            <button type=\"submit\" class=\"pdf-btn\" id=\"pdfBtn\" style=\"margin: 0; width: 100%; display: flex; justify-content: center; align-items: center;\">\n              <svg viewBox=\"0 0 24 24\" style=\"width: 16px; height: 16px; fill: white; margin-right: 0.5rem;\">\n                <path\n                  d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\" \/>\n              <\/svg>\n              Enviar por email\n            <\/button>\n          <\/div>\n        <\/form>\n        <div id=\"emailMessage\" style=\"margin-top: 0.5rem; font-size: 12px; display: none;\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/main>\n\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":"empty","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":3,"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/hipotecas.uncutmakers.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}