{"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\" value=\"2.50\" 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 ~2.50%<\/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      <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      <button class=\"add-btn\" id=\"addBonif\">+ A\u00f1adir bonificador<\/button>\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 style=\"display:flex; flex-direction:column; gap:0.25rem;\">\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);\">\n          <\/div>\n\n          <div style=\"display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap;\">\n            <input type=\"email\" id=\"userEmail\" required placeholder=\"tu@email.com\"\n              style=\"flex: 1; min-width: 200px; padding: .6rem .75rem; border: 1px solid var(--border2); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface);\">\n            <button type=\"submit\" class=\"pdf-btn\" id=\"pdfBtn\" style=\"margin: 0; white-space: nowrap; flex: 1;\">\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}]}}