{"id":54,"date":"2025-08-07T17:17:10","date_gmt":"2025-08-07T15:17:10","guid":{"rendered":"https:\/\/www.vivafinance.es\/?page_id=54"},"modified":"2026-05-08T16:12:48","modified_gmt":"2026-05-08T14:12:48","slug":"spanish-mortgage-calculator","status":"publish","type":"page","link":"https:\/\/www.vivafinance.es\/pl\/spanish-mortgage-calculator\/","title":{"rendered":"KALKULATOR HIPOTECZNY HISZPANIA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"54\" class=\"elementor elementor-54\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e8a345 e-flex e-con-boxed e-con e-parent\" data-id=\"4e8a345\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83e0e10 elementor-widget elementor-widget-heading\" data-id=\"83e0e10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">SPANISH MORTGAGE CALCULATOR<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d95848c e-flex e-con-boxed e-con e-parent\" data-id=\"d95848c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c414bc elementor-widget elementor-widget-html\" data-id=\"4c414bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"vf-calc-intro-lite\" style=\"margin:32px 0;\">\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n  <style>\r\n    .vf-calc-intro-lite,\r\n    .vf-calc-intro-lite *{\r\n      box-sizing:border-box;\r\n    }\r\n\r\n    .vf-calc-intro-lite{\r\n      --vf-blue:#0f4392;\r\n      --vf-blue-dark:#082846;\r\n      --vf-ink:#12233c;\r\n      --vf-text:#465671;\r\n      --vf-muted:#6a7b95;\r\n      --vf-gold:#b9975b;\r\n      --vf-gold-dark:#92713d;\r\n      --vf-soft:#f6f9fd;\r\n      --vf-line:rgba(15,67,146,.12);\r\n      --vf-line-strong:rgba(15,67,146,.20);\r\n      --vf-shadow:0 22px 60px rgba(15,67,146,.09);\r\n      --vf-shadow-soft:0 12px 28px rgba(15,67,146,.07);\r\n      --vf-font-body:\"Montserrat\",system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n      --vf-font-heading:\"Playfair Display\",Georgia,\"Times New Roman\",serif;\r\n\r\n      font-family:var(--vf-font-body) !important;\r\n      -webkit-font-smoothing:antialiased;\r\n      -moz-osx-font-smoothing:grayscale;\r\n      text-rendering:optimizeLegibility;\r\n    }\r\n\r\n    .vfci-wrap{\r\n      max-width:1100px;\r\n      margin:0 auto;\r\n      position:relative;\r\n      overflow:hidden;\r\n      border-radius:28px;\r\n      background:\r\n        radial-gradient(circle at 8% 0%, rgba(185,151,91,.16) 0%, transparent 32%),\r\n        radial-gradient(circle at 96% 14%, rgba(15,67,146,.10) 0%, transparent 34%),\r\n        linear-gradient(180deg,#ffffff 0%,#f7faff 100%);\r\n      border:1px solid var(--vf-line);\r\n      box-shadow:var(--vf-shadow);\r\n      padding:32px;\r\n    }\r\n\r\n    .vfci-wrap::before{\r\n      content:\"\";\r\n      position:absolute;\r\n      left:0;\r\n      right:0;\r\n      top:0;\r\n      height:5px;\r\n      background:linear-gradient(90deg,var(--vf-blue-dark),var(--vf-blue),var(--vf-gold));\r\n    }\r\n\r\n    .vfci-grid{\r\n      display:grid;\r\n      grid-template-columns:1.15fr .85fr;\r\n      gap:26px;\r\n      align-items:stretch;\r\n      position:relative;\r\n      z-index:1;\r\n    }\r\n\r\n    .vfci-title{\r\n      margin:0;\r\n      max-width:740px;\r\n      color:var(--vf-ink) !important;\r\n      -webkit-text-fill-color:var(--vf-ink) !important;\r\n      font-family:var(--vf-font-heading) !important;\r\n      font-size:clamp(34px,3.8vw,50px);\r\n      line-height:1.03;\r\n      letter-spacing:-1.1px;\r\n      font-weight:800;\r\n    }\r\n\r\n    .vfci-title span{\r\n      color:var(--vf-blue) !important;\r\n      -webkit-text-fill-color:var(--vf-blue) !important;\r\n    }\r\n\r\n    .vfci-sub{\r\n      margin:16px 0 0;\r\n      max-width:720px;\r\n      color:var(--vf-text) !important;\r\n      -webkit-text-fill-color:var(--vf-text) !important;\r\n      font-family:var(--vf-font-body) !important;\r\n      font-size:16.5px;\r\n      line-height:1.68;\r\n      font-weight:500;\r\n    }\r\n\r\n    .vfci-sub strong{\r\n      color:var(--vf-blue-dark) !important;\r\n      -webkit-text-fill-color:var(--vf-blue-dark) !important;\r\n      font-weight:850;\r\n    }\r\n\r\n    .vfci-key-row{\r\n      display:grid;\r\n      grid-template-columns:repeat(3,minmax(0,1fr));\r\n      gap:10px;\r\n      margin:22px 0 0;\r\n      max-width:760px;\r\n    }\r\n\r\n    .vfci-key{\r\n      padding:14px 15px;\r\n      border-radius:18px;\r\n      background:rgba(255,255,255,.88);\r\n      border:1px solid var(--vf-line);\r\n      box-shadow:0 8px 20px rgba(15,67,146,.04);\r\n    }\r\n\r\n    .vfci-key strong{\r\n      display:block;\r\n      margin:0 0 4px;\r\n      color:var(--vf-blue-dark) !important;\r\n      -webkit-text-fill-color:var(--vf-blue-dark) !important;\r\n      font-size:13.5px;\r\n      font-weight:900;\r\n      line-height:1.25;\r\n      font-family:var(--vf-font-body) !important;\r\n    }\r\n\r\n    .vfci-key span{\r\n      display:block;\r\n      color:var(--vf-muted) !important;\r\n      -webkit-text-fill-color:var(--vf-muted) !important;\r\n      font-size:12.5px;\r\n      line-height:1.42;\r\n      font-weight:600;\r\n      font-family:var(--vf-font-body) !important;\r\n    }\r\n\r\n    .vfci-actions{\r\n      display:flex;\r\n      flex-wrap:wrap;\r\n      gap:12px;\r\n      align-items:center;\r\n      margin-top:24px;\r\n    }\r\n\r\n    .vfci-btn{\r\n      display:inline-flex;\r\n      align-items:center;\r\n      justify-content:center;\r\n      gap:10px;\r\n      min-height:56px;\r\n      padding:0 22px;\r\n      border-radius:999px;\r\n      text-decoration:none !important;\r\n      font-family:var(--vf-font-body) !important;\r\n      font-size:14.5px;\r\n      font-weight:900;\r\n      line-height:1;\r\n      transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;\r\n      white-space:nowrap;\r\n      position:relative;\r\n      overflow:hidden;\r\n    }\r\n\r\n    .vfci-btn svg{\r\n      width:18px;\r\n      height:18px;\r\n      flex:0 0 auto;\r\n      position:relative;\r\n      z-index:1;\r\n    }\r\n\r\n    .vfci-btn span{\r\n      position:relative;\r\n      z-index:1;\r\n    }\r\n\r\n    .vfci-btn-form{\r\n      color:#ffffff !important;\r\n      -webkit-text-fill-color:#ffffff !important;\r\n      border:1px solid rgba(255,255,255,.18);\r\n      background:\r\n        linear-gradient(135deg,var(--vf-blue-dark) 0%,var(--vf-blue) 58%,#1a62bc 100%);\r\n      box-shadow:\r\n        0 18px 34px rgba(15,67,146,.26),\r\n        0 0 0 6px rgba(15,67,146,.06);\r\n      padding:0 26px;\r\n    }\r\n\r\n    .vfci-btn-form::before{\r\n      content:\"\";\r\n      position:absolute;\r\n      inset:0;\r\n      background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.24) 42%,transparent 72%);\r\n      transform:translateX(-120%);\r\n      transition:transform .55s ease;\r\n    }\r\n\r\n    .vfci-btn-form:hover::before{\r\n      transform:translateX(120%);\r\n    }\r\n\r\n    .vfci-btn-form:hover{\r\n      transform:translateY(-3px);\r\n      box-shadow:\r\n        0 24px 46px rgba(15,67,146,.34),\r\n        0 0 0 7px rgba(15,67,146,.08);\r\n    }\r\n\r\n    .vfci-btn-form svg{\r\n      color:#ffffff !important;\r\n      stroke:#ffffff !important;\r\n    }\r\n\r\n    .vfci-btn-calc{\r\n      color:var(--vf-blue) !important;\r\n      -webkit-text-fill-color:var(--vf-blue) !important;\r\n      background:#ffffff;\r\n      border:1px solid rgba(15,67,146,.16);\r\n      box-shadow:0 10px 24px rgba(15,67,146,.06);\r\n    }\r\n\r\n    .vfci-btn-calc:hover{\r\n      transform:translateY(-2px);\r\n      background:#f7fbff;\r\n      border-color:rgba(15,67,146,.24);\r\n      box-shadow:0 15px 30px rgba(15,67,146,.09);\r\n    }\r\n\r\n    .vfci-btn-calc svg{\r\n      color:var(--vf-blue) !important;\r\n      stroke:var(--vf-blue) !important;\r\n    }\r\n\r\n    .vfci-small-note{\r\n      margin:13px 0 0;\r\n      max-width:650px;\r\n      color:var(--vf-muted) !important;\r\n      -webkit-text-fill-color:var(--vf-muted) !important;\r\n      font-size:13.5px;\r\n      line-height:1.55;\r\n      font-weight:500;\r\n      font-family:var(--vf-font-body) !important;\r\n    }\r\n\r\n    .vfci-small-note strong{\r\n      color:var(--vf-blue-dark) !important;\r\n      -webkit-text-fill-color:var(--vf-blue-dark) !important;\r\n      font-weight:850;\r\n    }\r\n\r\n    .vfci-panel{\r\n      position:relative;\r\n      min-width:0;\r\n      padding:22px;\r\n      border-radius:24px;\r\n      background:rgba(255,255,255,.92);\r\n      border:1px solid rgba(15,67,146,.12);\r\n      box-shadow:var(--vf-shadow-soft);\r\n      overflow:hidden;\r\n    }\r\n\r\n    .vfci-panel::before{\r\n      content:\"\";\r\n      position:absolute;\r\n      inset:0;\r\n      background:\r\n        radial-gradient(circle at 100% 0%, rgba(185,151,91,.16) 0%, transparent 40%),\r\n        linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(248,251,255,.92) 100%);\r\n      pointer-events:none;\r\n    }\r\n\r\n    .vfci-panel > *{\r\n      position:relative;\r\n      z-index:1;\r\n    }\r\n\r\n    .vfci-photo{\r\n      position:relative;\r\n      height:185px;\r\n      margin:-8px -8px 18px;\r\n      border-radius:20px;\r\n      overflow:hidden;\r\n      border:1px solid rgba(15,67,146,.12);\r\n      background:#edf4fb;\r\n      box-shadow:0 14px 30px rgba(15,67,146,.10);\r\n    }\r\n\r\n    .vfci-photo img{\r\n      display:block;\r\n      width:100%;\r\n      height:100%;\r\n      object-fit:cover;\r\n      object-position:center;\r\n      filter:saturate(.96) contrast(1.03);\r\n    }\r\n\r\n    .vfci-photo::after{\r\n      content:\"\";\r\n      position:absolute;\r\n      inset:0;\r\n      background:\r\n        linear-gradient(180deg, rgba(8,40,70,.02) 0%, rgba(8,40,70,.18) 100%),\r\n        radial-gradient(circle at 20% 0%, rgba(255,255,255,.24), transparent 34%);\r\n      pointer-events:none;\r\n    }\r\n\r\n    .vfci-panel-title{\r\n      margin:0 0 13px;\r\n      color:var(--vf-ink) !important;\r\n      -webkit-text-fill-color:var(--vf-ink) !important;\r\n      font-family:var(--vf-font-heading) !important;\r\n      font-size:24px;\r\n      line-height:1.12;\r\n      font-weight:700;\r\n      letter-spacing:-.4px;\r\n    }\r\n\r\n    .vfci-checklist{\r\n      display:grid;\r\n      gap:10px;\r\n      margin:0;\r\n      padding:0;\r\n      list-style:none;\r\n    }\r\n\r\n    .vfci-checklist li{\r\n      display:flex;\r\n      gap:10px;\r\n      align-items:flex-start;\r\n      color:var(--vf-text) !important;\r\n      -webkit-text-fill-color:var(--vf-text) !important;\r\n      font-size:14px;\r\n      line-height:1.48;\r\n      font-weight:600;\r\n      font-family:var(--vf-font-body) !important;\r\n    }\r\n\r\n    .vfci-check{\r\n      display:inline-flex;\r\n      align-items:center;\r\n      justify-content:center;\r\n      width:21px;\r\n      height:21px;\r\n      flex:0 0 21px;\r\n      margin-top:0;\r\n      border-radius:999px;\r\n      background:rgba(15,67,146,.08);\r\n      border:1px solid rgba(15,67,146,.13);\r\n    }\r\n\r\n    .vfci-check svg{\r\n      width:13px;\r\n      height:13px;\r\n      color:var(--vf-blue) !important;\r\n      stroke:var(--vf-blue) !important;\r\n    }\r\n\r\n    .vfci-explainer{\r\n      margin-top:16px;\r\n      border-radius:18px;\r\n      background:#ffffff;\r\n      border:1px solid var(--vf-line);\r\n      overflow:hidden;\r\n    }\r\n\r\n    .vfci-explainer summary{\r\n      cursor:pointer;\r\n      list-style:none;\r\n      display:flex;\r\n      align-items:center;\r\n      justify-content:space-between;\r\n      gap:12px;\r\n      padding:14px 15px;\r\n      color:var(--vf-blue-dark) !important;\r\n      -webkit-text-fill-color:var(--vf-blue-dark) !important;\r\n      font-size:13px;\r\n      font-weight:900;\r\n      letter-spacing:.08em;\r\n      text-transform:uppercase;\r\n      font-family:var(--vf-font-body) !important;\r\n    }\r\n\r\n    .vfci-explainer summary::-webkit-details-marker{\r\n      display:none;\r\n    }\r\n\r\n    .vfci-caret{\r\n      width:17px;\r\n      height:17px;\r\n      color:var(--vf-blue) !important;\r\n      stroke:var(--vf-blue) !important;\r\n      transition:transform .18s ease;\r\n    }\r\n\r\n    .vfci-explainer[open] .vfci-caret{\r\n      transform:rotate(180deg);\r\n    }\r\n\r\n    .vfci-explainer-body{\r\n      padding:0 15px 15px;\r\n      color:var(--vf-text) !important;\r\n      -webkit-text-fill-color:var(--vf-text) !important;\r\n      font-size:13.5px;\r\n      line-height:1.58;\r\n      font-weight:500;\r\n      font-family:var(--vf-font-body) !important;\r\n    }\r\n\r\n    .vfci-explainer-body p{\r\n      margin:0 0 9px;\r\n    }\r\n\r\n    .vfci-explainer-body p:last-child{\r\n      margin-bottom:0;\r\n    }\r\n\r\n    .vfci-explainer-body strong{\r\n      color:var(--vf-blue-dark) !important;\r\n      -webkit-text-fill-color:var(--vf-blue-dark) !important;\r\n      font-weight:850;\r\n    }\r\n\r\n    @media (max-width:900px){\r\n      .vfci-grid{\r\n        grid-template-columns:1fr;\r\n      }\r\n\r\n      .vfci-wrap{\r\n        padding:26px;\r\n      }\r\n\r\n      .vfci-key-row{\r\n        grid-template-columns:1fr;\r\n      }\r\n\r\n      .vfci-photo{\r\n        height:220px;\r\n      }\r\n    }\r\n\r\n    @media (max-width:560px){\r\n      .vf-calc-intro-lite{\r\n        margin:24px 0 !important;\r\n      }\r\n\r\n      .vfci-wrap{\r\n        padding:20px;\r\n        border-radius:22px;\r\n      }\r\n\r\n      .vfci-title{\r\n        font-size:33px;\r\n        letter-spacing:-.7px;\r\n      }\r\n\r\n      .vfci-sub{\r\n        font-size:15.5px;\r\n        line-height:1.62;\r\n      }\r\n\r\n      .vfci-actions{\r\n        flex-direction:column;\r\n        align-items:stretch;\r\n      }\r\n\r\n      .vfci-btn{\r\n        width:100%;\r\n        min-height:54px;\r\n        white-space:normal;\r\n        text-align:center;\r\n      }\r\n\r\n      .vfci-panel{\r\n        padding:18px;\r\n        border-radius:20px;\r\n      }\r\n\r\n      .vfci-photo{\r\n        height:160px;\r\n        margin:-6px -6px 16px;\r\n        border-radius:17px;\r\n      }\r\n\r\n      .vfci-panel-title{\r\n        font-size:22px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"vfci-wrap\">\r\n    <div class=\"vfci-grid\">\r\n\r\n      <div class=\"vfci-main\">\r\n        <h2 class=\"vfci-title\">\r\n          Estimate your Spanish mortgage, then check what is <span>really possible.<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"vfci-sub\">\r\n          Use the calculator to estimate your <strong>monthly payment<\/strong>, <strong>purchase costs<\/strong>,\r\n          <strong>DTI<\/strong> and <strong>LTV<\/strong>. It is a useful first step before speaking with a mortgage advisor.\r\n        <\/p>\r\n\r\n        <div class=\"vfci-key-row\" aria-label=\"Key mortgage points\">\r\n          <div class=\"vfci-key\">\r\n            <strong>DTI target<\/strong>\r\n            <span>Total monthly debts should normally stay below 40% of income.<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"vfci-key\">\r\n            <strong>Non-resident finance<\/strong>\r\n            <span>Often around 60%, with higher levels depending on profile.<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"vfci-key\">\r\n            <strong>Purchase costs<\/strong>\r\n            <span>Taxes, valuation and fees are estimated in the calculation.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"vfci-actions\">\r\n          <a class=\"vfci-btn vfci-btn-form\" href=\"https:\/\/www.vivafinance.es\/home-form\/\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M5 12h14\"\/>\r\n              <path d=\"M13 5l7 7-7 7\"\/>\r\n            <\/svg>\r\n            <span>Get a Free Mortgage Assessment<\/span>\r\n          <\/a>\r\n\r\n          <a class=\"vfci-btn vfci-btn-calc\" href=\"#calculatorForm\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M12 5v14\"\/>\r\n              <path d=\"M5 12h14\"\/>\r\n            <\/svg>\r\n            <span>Use the calculator first<\/span>\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <p class=\"vfci-small-note\">\r\n          <strong>Calculator results are indicative.<\/strong> Bank approval depends on your documents, income, debts, credit profile and property valuation.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <aside class=\"vfci-panel\" aria-label=\"Before using the calculator\">\r\n        <div class=\"vfci-photo\">\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/www.vivafinance.es\/wp-content\/uploads\/2026\/05\/calculadora-Editada.png\"\r\n            alt=\"Mortgage calculator and financial planning\"\r\n            loading=\"lazy\"\r\n          >\r\n        <\/div>\r\n\r\n        <h3 class=\"vfci-panel-title\">Before you start, have these figures ready:<\/h3>\r\n\r\n        <ul class=\"vfci-checklist\">\r\n          <li>\r\n            <span class=\"vfci-check\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\r\n                <path d=\"M20 6 9 17l-5-5\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span>Estimated property price in Spain.<\/span>\r\n          <\/li>\r\n\r\n          <li>\r\n            <span class=\"vfci-check\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\r\n                <path d=\"M20 6 9 17l-5-5\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span>Your available savings for deposit, taxes and fees.<\/span>\r\n          <\/li>\r\n\r\n          <li>\r\n            <span class=\"vfci-check\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\r\n                <path d=\"M20 6 9 17l-5-5\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span>Your regular monthly income after tax.<\/span>\r\n          <\/li>\r\n\r\n          <li>\r\n            <span class=\"vfci-check\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\r\n                <path d=\"M20 6 9 17l-5-5\"\/>\r\n              <\/svg>\r\n            <\/span>\r\n            <span>Existing monthly debts, loans or mortgage payments.<\/span>\r\n          <\/li>\r\n        <\/ul>\r\n\r\n        <details class=\"vfci-explainer\">\r\n          <summary>\r\n            What do DTI and LTV mean?\r\n            <svg class=\"vfci-caret\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M6 9l6 6 6-6\"\/>\r\n            <\/svg>\r\n          <\/summary>\r\n\r\n          <div class=\"vfci-explainer-body\">\r\n            <p>\r\n              <strong>DTI<\/strong> compares your monthly debt payments with your monthly income.\r\n              Banks usually want this to remain below 40%.\r\n            <\/p>\r\n            <p>\r\n              <strong>LTV<\/strong> shows what percentage of the property price or valuation the bank may finance.\r\n            <\/p>\r\n          <\/div>\r\n        <\/details>\r\n      <\/aside>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e3d7d5 elementor-widget elementor-widget-html\" data-id=\"0e3d7d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n  <title>Mortgage Calculator<\/title>\r\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n  <script>\r\n    tailwind.config = {\r\n      theme: {\r\n        extend: {\r\n          colors: {\r\n            'viva-blue': '#0f4392',\r\n            'viva-blue-dark': '#0a2d62',\r\n            'viva-blue-light-bg': 'rgba(15, 67, 146, 0.05)',\r\n            'viva-blue-lighter': 'rgba(15, 67, 146, 0.15)',\r\n            'viva-blue-light-border': 'rgba(15, 67, 146, 0.5)'\r\n          }\r\n        }\r\n      }\r\n    }\r\n  <\/script>\r\n  <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\"\/>\r\n  <style>\r\n    body { font-family: 'Inter', sans-serif; }\r\n    .input-error { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }\r\n    .loader { border: 2px solid rgba(255,255,255,0.3); border-top: 2px solid #fff; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; }\r\n    @keyframes spin { 0% {transform: rotate(0)} 100% {transform: rotate(360deg)} }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body class=\"bg-gray-50 flex items-center justify-center min-h-screen p-4\">\r\n  <div class=\"bg-white shadow-xl rounded-2xl overflow-hidden max-w-2xl w-full p-8 space-y-8\">\r\n\r\n    <!-- Header -->\r\n    <header class=\"text-center\">\r\n      <img decoding=\"async\" src=\"https:\/\/www.vivafinance.es\/wp-content\/uploads\/2025\/08\/with_padding-scaled.png\" alt=\"Viva Finance Logo\" class=\"w-full h-full\">\r\n      <p class=\"text-gray-500 mt-2\">Calculate your mortgage and purchase costs.<\/p>\r\n      <p class=\"text-xs text-gray-400 mt-2\">\r\n        Note: Variable-rate results are indicative and may change with Euribor movements.\r\n        Taxes are estimates and can vary by region, buyer profile, and price brackets.\r\n      <\/p>\r\n    <\/header>\r\n\r\n    <!-- Quick Score -->\r\n    <section class=\"p-4 rounded-md border border-viva-blue-light-border bg-viva-blue-light-bg\">\r\n      <div class=\"flex items-start justify-between gap-4\">\r\n        <div>\r\n          <h2 class=\"text-lg font-bold text-viva-blue-dark\">Quick affordability score<\/h2>\r\n          <p class=\"text-sm text-gray-600\">Instant DTI check (target &lt; 40%).<\/p>\r\n        <\/div>\r\n        <a href=\"#resultsAreaAnchor\" class=\"text-sm font-semibold text-viva-blue hover:underline whitespace-nowrap\">See results \u2193<\/a>\r\n      <\/div>\r\n      <div id=\"quickScoreBox\" class=\"mt-3 hidden\">\r\n        <div class=\"flex items-center justify-between\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <span id=\"quickScoreDot\" class=\"inline-block w-3 h-3 rounded-full bg-gray-400\"><\/span>\r\n            <span class=\"text-sm text-gray-700 font-semibold\">DTI:<\/span>\r\n            <span id=\"quickScoreValue\" class=\"text-sm font-bold text-gray-800\">\u2014<\/span>\r\n          <\/div>\r\n          <span id=\"quickScoreLabel\" class=\"text-sm font-semibold text-gray-600\">\u2014<\/span>\r\n        <\/div>\r\n        <p id=\"quickScoreHint\" class=\"text-xs text-gray-500 mt-1\">\u2014<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Form -->\r\n    <form id=\"calculatorForm\" class=\"space-y-6\">\r\n\r\n      <!-- Basics -->\r\n      <div class=\"grid md:grid-cols-2 gap-6\">\r\n        <!-- Property Price -->\r\n        <div>\r\n          <label for=\"propertyPrice\" class=\"block text-sm font-medium text-gray-700\">Property Price (\u20ac)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" id=\"propertyPrice\" name=\"propertyPrice\" placeholder=\"250000\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">\u20ac<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"propertyPriceError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid price.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Savings -->\r\n        <div>\r\n          <label for=\"totalSavings\" class=\"block text-sm font-medium text-gray-700\">Total Savings (\u20ac)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" id=\"totalSavings\" name=\"totalSavings\" placeholder=\"50000\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">\u20ac<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"totalSavingsError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid amount.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Monthly Net Income -->\r\n        <div>\r\n          <label for=\"monthlyNetIncome\" class=\"block text-sm font-medium text-gray-700\">Monthly Net Income (\u20ac)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" id=\"monthlyNetIncome\" name=\"monthlyNetIncome\" placeholder=\"2500\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">\u20ac<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"monthlyNetIncomeError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid income.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Existing Monthly Debt -->\r\n        <div>\r\n          <label for=\"monthlyDebt\" class=\"block text-sm font-medium text-gray-700\">Existing Monthly Debt (\u20ac)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" id=\"monthlyDebt\" name=\"monthlyDebt\" placeholder=\"200\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">\u20ac<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"monthlyDebtError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid amount.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Client age -->\r\n        <div>\r\n          <label for=\"clientAge\" class=\"block text-sm font-medium text-gray-700\">Client Age (years)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" id=\"clientAge\" name=\"clientAge\" placeholder=\"35\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\" min=\"18\" max=\"75\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">years<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"clientAgeError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid age (18\u201375).<\/p>\r\n          <p class=\"mt-2 text-xs text-gray-500\">We enforce max age at mortgage end: 75.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Mortgage Term -->\r\n        <div>\r\n          <label for=\"mortgageTerm\" class=\"block text-sm font-medium text-gray-700\">Mortgage Term (years)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" id=\"mortgageTerm\" name=\"mortgageTerm\" placeholder=\"30\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\" min=\"1\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">years<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"mortgageTermError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid term.<\/p>\r\n          <p id=\"mortgageAgeRuleMsg\" class=\"mt-2 text-xs text-gray-500 hidden\"><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Purchase context -->\r\n      <div class=\"grid md:grid-cols-2 gap-6\">\r\n        <div>\r\n          <label for=\"propertyType\" class=\"block text-sm font-medium text-gray-700\">Property Type<\/label>\r\n          <select id=\"propertyType\" class=\"mt-1 block w-full rounded-md border-gray-300 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <option value=\"resale\" selected>Resale (ITP)<\/option>\r\n            <option value=\"newbuild\">New Build (IVA + AJD)<\/option>\r\n          <\/select>\r\n          <p class=\"mt-2 text-xs text-gray-500\">Used to estimate purchase taxes.<\/p>\r\n        <\/div>\r\n\r\n        <div>\r\n          <label for=\"region\" class=\"block text-sm font-medium text-gray-700\">Region (CCAA)<\/label>\r\n          <select id=\"region\" class=\"mt-1 block w-full rounded-md border-gray-300 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <option value=\"default\" selected>Default (typical)<\/option>\r\n            <option value=\"andalucia\">Andaluc\u00eda<\/option>\r\n            <option value=\"aragon\">Arag\u00f3n<\/option>\r\n            <option value=\"asturias\">Asturias<\/option>\r\n            <option value=\"balearic\">Illes Balears<\/option>\r\n            <option value=\"canary\">Canarias<\/option>\r\n            <option value=\"cantabria\">Cantabria<\/option>\r\n            <option value=\"castile_lamancha\">Castilla-La Mancha<\/option>\r\n            <option value=\"castile_leon\">Castilla y Le\u00f3n<\/option>\r\n            <option value=\"catalonia\">Catalu\u00f1a<\/option>\r\n            <option value=\"valencia\">Comunitat Valenciana<\/option>\r\n            <option value=\"extremadura\">Extremadura<\/option>\r\n            <option value=\"galicia\">Galicia<\/option>\r\n            <option value=\"madrid\">Comunidad de Madrid<\/option>\r\n            <option value=\"murcia\">Regi\u00f3n de Murcia<\/option>\r\n            <option value=\"navarre\">Navarra<\/option>\r\n            <option value=\"basque\">Pa\u00eds Vasco<\/option>\r\n            <option value=\"rioja\">La Rioja<\/option>\r\n            <option value=\"ceuta\">Ceuta<\/option>\r\n            <option value=\"melilla\">Melilla<\/option>\r\n          <\/select>\r\n          <p class=\"mt-2 text-xs text-gray-500\">Tax presets are indicative (ballpark).<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Mortgage Details -->\r\n      <div id=\"mortgageDetailsInputs\" class=\"grid md:grid-cols-2 gap-6\">\r\n\r\n        <!-- Interest Type -->\r\n        <div class=\"md:col-span-2\">\r\n          <label class=\"block text-sm font-medium text-gray-700\">Interest Type<\/label>\r\n          <div class=\"mt-2 flex flex-wrap gap-4\">\r\n            <label class=\"flex items-center gap-2\">\r\n              <input type=\"radio\" name=\"interestType\" value=\"fixed\" class=\"h-4 w-4 text-viva-blue focus:ring-viva-blue border-gray-300\" checked>\r\n              <span class=\"text-sm text-gray-700\">Fixed<\/span>\r\n            <\/label>\r\n            <label class=\"flex items-center gap-2\">\r\n              <input type=\"radio\" name=\"interestType\" value=\"variable\" class=\"h-4 w-4 text-viva-blue focus:ring-viva-blue border-gray-300\">\r\n              <span class=\"text-sm text-gray-700\">Variable (Euribor + Margin)<\/span>\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Fixed Rate -->\r\n        <div id=\"fixedRateWrap\">\r\n          <label for=\"fixedRate\" class=\"block text-sm font-medium text-gray-700\">Interest Rate (%)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" step=\"0.01\" id=\"fixedRate\" name=\"fixedRate\" placeholder=\"3.5\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">%<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"fixedRateError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid rate.<\/p>\r\n          <p class=\"mt-2 text-xs text-gray-500\">Nominal rate used for payment estimation.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Variable Rate Inputs -->\r\n        <div id=\"variableRateWrap\" class=\"hidden md:col-span-2\">\r\n          <div class=\"grid md:grid-cols-2 gap-6\">\r\n            <div>\r\n              <label for=\"euriborRate\" class=\"block text-sm font-medium text-gray-700\">Euribor (%)<\/label>\r\n              <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n                <input type=\"number\" step=\"0.01\" id=\"euriborRate\" name=\"euriborRate\" placeholder=\"3.00\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n                <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">%<\/span><\/div>\r\n              <\/div>\r\n              <p id=\"euriborRateError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid Euribor.<\/p>\r\n            <\/div>\r\n\r\n            <div>\r\n              <label for=\"marginRate\" class=\"block text-sm font-medium text-gray-700\">Bank Margin (%)<\/label>\r\n              <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n                <input type=\"number\" step=\"0.01\" id=\"marginRate\" name=\"marginRate\" placeholder=\"1.00\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\">\r\n                <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">%<\/span><\/div>\r\n              <\/div>\r\n              <p id=\"marginRateError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid margin.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"md:col-span-2 p-4 bg-viva-blue-light-bg rounded-md border border-viva-blue-light-border\">\r\n              <p class=\"text-sm text-gray-700 font-semibold mb-2\">Stress test (optional)<\/p>\r\n              <p class=\"text-xs text-gray-600 mb-3\">Indicative monthly payment if Euribor increases (constant thereafter).<\/p>\r\n              <div class=\"grid md:grid-cols-2 gap-6\">\r\n                <div>\r\n                  <label for=\"stressPlus1\" class=\"block text-sm font-medium text-gray-700\">Euribor +1.00 (%)<\/label>\r\n                  <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n                    <input type=\"number\" step=\"0.01\" id=\"stressPlus1\" name=\"stressPlus1\" placeholder=\"(auto)\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\" disabled>\r\n                    <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">%<\/span><\/div>\r\n                  <\/div>\r\n                <\/div>\r\n                <div>\r\n                  <label for=\"stressPlus2\" class=\"block text-sm font-medium text-gray-700\">Euribor +2.00 (%)<\/label>\r\n                  <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n                    <input type=\"number\" step=\"0.01\" id=\"stressPlus2\" name=\"stressPlus2\" placeholder=\"(auto)\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\" disabled>\r\n                    <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">%<\/span><\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- LTV -->\r\n        <div>\r\n          <label for=\"mortgageLTV\" class=\"block text-sm font-medium text-gray-700\">Mortgage LTV (%)<\/label>\r\n          <div class=\"mt-1 relative rounded-md shadow-sm\">\r\n            <input type=\"number\" step=\"1\" id=\"mortgageLTV\" name=\"mortgageLTV\" placeholder=\"80\" class=\"block w-full rounded-md border-gray-300 pl-3 pr-10 focus:border-viva-blue focus:ring-viva-blue sm:text-sm\" min=\"1\" max=\"100\">\r\n            <div class=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"><span class=\"text-gray-500 sm:text-sm\">%<\/span><\/div>\r\n          <\/div>\r\n          <p id=\"mortgageLTVError\" class=\"mt-2 text-sm text-red-600 hidden\">Please enter a valid % (max 80% residents \/ 70% non-residents).<\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Residency -->\r\n      <div id=\"residencyStatusSection\" class=\"space-y-4\">\r\n        <h3 class=\"text-lg font-semibold text-gray-700\">Residency Status<\/h3>\r\n        <div class=\"flex items-center\">\r\n          <input id=\"residencyResident\" name=\"residency\" type=\"radio\" value=\"resident\" class=\"h-4 w-4 text-viva-blue focus:ring-viva-blue border-gray-300\">\r\n          <label for=\"residencyResident\" class=\"ml-3 block text-sm font-medium text-gray-700\">Resident<\/label>\r\n        <\/div>\r\n        <div class=\"flex items-center\">\r\n          <input id=\"residencyNonResident\" name=\"residency\" type=\"radio\" value=\"nonResident\" checked class=\"h-4 w-4 text-viva-blue focus:ring-viva-blue border-gray-300\">\r\n          <label for=\"residencyNonResident\" class=\"ml-3 block text-sm font-medium text-gray-700\">Non-Resident<\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Collapsible -->\r\n      <div id=\"purchaseExpensesHeader\" class=\"cursor-pointer\">\r\n        <div class=\"flex items-center justify-between p-4 bg-viva-blue-lighter rounded-md hover:bg-viva-blue-light-bg transition-colors duration-200\">\r\n          <h3 class=\"text-lg font-semibold text-viva-blue-dark\">\r\n            Purchase Expenses (estimated)\r\n            <span class=\"text-sm font-normal text-gray-500 block\">Taxes + notary + registry + gestor\u00eda + valuation<\/span>\r\n          <\/h3>\r\n          <div id=\"chevronIcon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"lucide lucide-chevron-down text-viva-blue-dark\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div id=\"purchaseExpensesContent\" class=\"hidden p-4 bg-viva-blue-light-bg rounded-md border border-viva-blue-light-border space-y-2\">\r\n        <p class=\"text-sm text-gray-700 font-semibold\">Included in the estimate:<\/p>\r\n        <ul class=\"text-sm text-gray-600 list-disc pl-5 space-y-1\">\r\n          <li><span class=\"font-medium\">Property tax<\/span>: ITP (resale) or IVA\/IGIC + AJD (new build), using region presets<\/li>\r\n          <li><span class=\"font-medium\">Notary<\/span> (estimate)<\/li>\r\n          <li><span class=\"font-medium\">Land registry<\/span> (estimate)<\/li>\r\n          <li><span class=\"font-medium\">Gestor\u00eda<\/span> (estimate)<\/li>\r\n          <li><span class=\"font-medium\">Valuation \/ Tasaci\u00f3n<\/span>: <span class=\"font-semibold\">\u20ac450<\/span> (informative)<\/li>\r\n        <\/ul>\r\n        <p class=\"text-xs text-gray-500\">These are indicative and can vary depending on price brackets and specific municipalities.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Calculate -->\r\n      <button id=\"calculateBtn\" type=\"submit\" class=\"w-full bg-viva-blue hover:bg-viva-blue-dark text-white font-bold py-3 px-4 rounded-md transition-colors duration-200 flex items-center justify-center\">\r\n        <span id=\"buttonText\">Calculate<\/span>\r\n        <span id=\"buttonLoader\" class=\"loader hidden ml-3\"><\/span>\r\n      <\/button>\r\n    <\/form>\r\n\r\n    <!-- Results -->\r\n    <a id=\"resultsAreaAnchor\"><\/a>\r\n    <section id=\"resultsArea\" class=\"hidden transition-all duration-500 ease-in-out transform scale-95 opacity-0\">\r\n      <h2 class=\"text-xl font-bold text-center text-viva-blue-dark mb-4\">Transaction Summary<\/h2>\r\n\r\n      <div class=\"bg-gray-100 p-4 rounded-md space-y-3\">\r\n        <div class=\"flex items-center justify-between text-gray-700\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-banknote text-green-500 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"3\"\/><path d=\"M10 12h4\"\/><path d=\"M12 12v2\"\/><path d=\"M12 12V6\"\/><\/svg>\r\n            <span>Down Payment (<span id=\"downPaymentPercentage\">20<\/span>%)<\/span>\r\n          <\/span>\r\n          <span id=\"downPaymentResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-700\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-receipt text-yellow-600 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2H4Z\"\/><path d=\"M16 8H8\"\/><path d=\"M16 12H8\"\/><path d=\"M16 16H8\"\/><\/svg>\r\n            <span id=\"propertyTaxLabel\">Property Tax (ITP\/IVA+AJD)<\/span>\r\n          <\/span>\r\n          <span id=\"propertyTaxResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-700\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-pen-tool text-gray-600 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m12 19 7-7 3 3-7 7-3-3Z\"\/><path d=\"m18 13-1.5-1.5\"\/><path d=\"m2 22 4-1 10-10-3-3L3 18l-1 4Z\"\/><\/svg>\r\n            <span>Notary (estimate)<\/span>\r\n          <\/span>\r\n          <span id=\"notaryResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-700\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-folder-archive text-gray-600 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 4h6l2 2h8v14H4V4Z\"\/><path d=\"M10 10h4\"\/><\/svg>\r\n            <span>Land registry (estimate)<\/span>\r\n          <\/span>\r\n          <span id=\"registryResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-700\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-briefcase text-gray-600 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"7\" rx=\"2\"\/><path d=\"M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><path d=\"M2 13h20\"\/><\/svg>\r\n            <span>Gestor\u00eda (estimate)<\/span>\r\n          <\/span>\r\n          <span id=\"gestoriaResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-700\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-ruler text-gray-600 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15 9 3 3 9l12 12 6-6Z\"\/><path d=\"M16 3v4\"\/><path d=\"M12 7v4\"\/><path d=\"M8 11v4\"\/><\/svg>\r\n            <span>Valuation \/ Tasaci\u00f3n (info)<\/span>\r\n          <\/span>\r\n          <span id=\"valuationResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-700 hidden\" id=\"vivaFinanceFeesItem\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-building-2 text-green-500 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 15h12\"\/><path d=\"M6 19h12\"\/><path d=\"M12 22V7\"\/><path d=\"M17 22v-3\"\/><path d=\"M7 22v-3\"\/><path d=\"M6 4h12V2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4\"\/><\/svg>\r\n            <span id=\"vivaFinanceFeesLabel\">Viva Finance Fees<\/span>\r\n          <\/span>\r\n          <span id=\"vivaFinanceFeesResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"border-t border-gray-300 my-3\"><\/div>\r\n\r\n        <div class=\"flex items-center justify-between text-gray-800 font-bold\">\r\n          <span class=\"flex items-center\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-wallet text-viva-blue mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12V7H5a2 2 0 0 1 0-4h14v4\"\/><path d=\"M3 5v14a2 2 0 0 0 2 2h16v-5\"\/><path d=\"M18 12a2 2 0 0 0 0 4h3v-4Z\"\/><\/svg>\r\n            <span>Total Savings Needed<\/span>\r\n          <\/span>\r\n          <span id=\"totalSavingsUsedResult\" class=\"font-semibold\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Mortgage Summary -->\r\n      <div id=\"monthlyMortgagePaymentSection\" class=\"mt-4 hidden\">\r\n        <h3 class=\"text-lg font-bold text-center text-viva-blue-dark mb-2\">Mortgage Summary<\/h3>\r\n        <div class=\"bg-gray-100 p-4 rounded-md space-y-3\">\r\n\r\n          <div class=\"flex items-center justify-between text-gray-700\">\r\n            <span class=\"flex items-center\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-home text-blue-500 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\r\n              <span>Mortgage Amount<\/span>\r\n            <\/span>\r\n            <span id=\"mortgageAmountResult\" class=\"font-semibold\"><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"flex items-center justify-between text-gray-700\">\r\n            <span class=\"flex items-center\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-percent text-indigo-500 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"19\" y1=\"5\" x2=\"5\" y2=\"19\"\/><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"\/><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"\/><\/svg>\r\n              <span>Rate used<\/span>\r\n            <\/span>\r\n            <span id=\"rateUsedResult\" class=\"font-semibold\"><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"flex items-center justify-between text-gray-700\">\r\n            <span class=\"flex items-center\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-calendar-check text-indigo-500 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"6\" y2=\"6\"\/><path d=\"m16 20 2 2 4-4\"\/><\/svg>\r\n              <span>Estimated Monthly Payment<\/span>\r\n            <\/span>\r\n            <span id=\"monthlyPaymentResult\" class=\"font-semibold\"><\/span>\r\n          <\/div>\r\n\r\n          <div id=\"stressResults\" class=\"hidden border-t border-gray-300 pt-3 space-y-2\">\r\n            <div class=\"flex items-center justify-between text-gray-700\">\r\n              <span class=\"text-sm\">If Euribor +1.00<\/span>\r\n              <span id=\"monthlyPaymentPlus1Result\" class=\"font-semibold text-sm\"><\/span>\r\n            <\/div>\r\n            <div class=\"flex items-center justify-between text-gray-700\">\r\n              <span class=\"text-sm\">If Euribor +2.00<\/span>\r\n              <span id=\"monthlyPaymentPlus2Result\" class=\"font-semibold text-sm\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"flex items-center justify-between text-gray-700\">\r\n            <span class=\"flex items-center\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" class=\"lucide lucide-trending-up text-purple-500 mr-2\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"\/><\/svg>\r\n              <span>Debt-to-Income Ratio (DTI)<\/span>\r\n            <\/span>\r\n            <span id=\"dtiResult\" class=\"font-semibold\"><\/span>\r\n          <\/div>\r\n\r\n          <div id=\"stressDtiResults\" class=\"hidden border-t border-gray-300 pt-3 space-y-2\">\r\n            <p class=\"text-xs text-gray-500 font-semibold\">DTI under stress test (advisor view)<\/p>\r\n            <div class=\"flex items-center justify-between text-gray-700\">\r\n              <span class=\"text-sm\">DTI if Euribor +1.00<\/span>\r\n              <span id=\"dtiPlus1Result\" class=\"font-semibold text-sm\"><\/span>\r\n            <\/div>\r\n            <div class=\"flex items-center justify-between text-gray-700\">\r\n              <span class=\"text-sm\">DTI if Euribor +2.00<\/span>\r\n              <span id=\"dtiPlus2Result\" class=\"font-semibold text-sm\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- \u2705 NEW: Max Affordable (only shows if DTI rule fails: fixed base >40% OR variable +2 >40%) -->\r\n          <div id=\"maxAffordableSection\" class=\"hidden border-t border-gray-300 pt-4\">\r\n            <div class=\"p-4 rounded-md bg-red-50 border border-red-200 space-y-3\">\r\n              <div class=\"flex items-start gap-3\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" class=\"lucide lucide-alert-triangle text-red-600 mt-0.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"\/><path d=\"M12 9v4\"\/><path d=\"M12 17h.01\"\/><\/svg>\r\n                <div>\r\n                  <p class=\"text-sm font-semibold text-red-800\">Affordability adjustment<\/p>\r\n                  <p id=\"maxAffordableIntro\" class=\"text-xs text-red-700 mt-1\">\r\n                    To stay within typical bank comfort (DTI \u2264 40%), your target purchase price should be lower.\r\n                  <\/p>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"bg-white rounded-md border border-red-200 p-4 space-y-3\">\r\n                <div class=\"flex items-center justify-between\">\r\n                  <span class=\"text-sm font-semibold text-gray-700\">Recommended Max Purchase Price<\/span>\r\n                  <span id=\"maxAffordablePrice\" class=\"text-lg font-bold text-viva-blue-dark\">\u2014<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"grid md:grid-cols-2 gap-3 text-sm text-gray-700\">\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <span>Max Mortgage Amount<\/span>\r\n                    <span id=\"maxAffordableLoan\" class=\"font-semibold\">\u2014<\/span>\r\n                  <\/div>\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <span>Max Monthly Payment (DTI 40%)<\/span>\r\n                    <span id=\"maxAffordablePayment\" class=\"font-semibold\">\u2014<\/span>\r\n                  <\/div>\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <span>Rate used for this calc<\/span>\r\n                    <span id=\"maxAffordableRate\" class=\"font-semibold\">\u2014<\/span>\r\n                  <\/div>\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <span>Term \/ LTV used<\/span>\r\n                    <span id=\"maxAffordableAssumptions\" class=\"font-semibold\">\u2014<\/span>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <p id=\"maxAffordableEdgeCase\" class=\"hidden text-xs text-red-700\"><\/p>\r\n                <p class=\"text-[11px] text-gray-500\">\r\n                  This is a DTI-based estimate only. Approval also depends on profile, stability, credit scoring, and bank policy.\r\n                <\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <!-- \/NEW -->\r\n\r\n          <!-- Timeline -->\r\n          <div id=\"interestTimelineSection\" class=\"hidden border-t border-gray-300 pt-3 space-y-2\">\r\n            <p class=\"text-xs text-gray-500 font-semibold\">Interest, capital & balance over time (advisor view)<\/p>\r\n\r\n            <div class=\"text-xs text-gray-500 grid grid-cols-4 gap-2\">\r\n              <div><\/div>\r\n              <div class=\"text-right\">Base<\/div>\r\n              <div id=\"timelineColPlus1\" class=\"text-right hidden\">+1%<\/div>\r\n              <div id=\"timelineColPlus2\" class=\"text-right hidden\">+2%<\/div>\r\n            <\/div>\r\n\r\n            <div id=\"row3y\" class=\"grid grid-cols-4 gap-2 items-start\">\r\n              <div class=\"text-sm text-gray-700\">After 3 years<\/div>\r\n              <div class=\"text-right text-sm\">\r\n                <div class=\"font-semibold\" id=\"int3Base\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap3Base\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal3Base\">\u2014<\/div>\r\n              <\/div>\r\n              <div class=\"text-right text-sm hidden\" id=\"col3Plus1\">\r\n                <div class=\"font-semibold\" id=\"int3Plus1\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap3Plus1\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal3Plus1\">\u2014<\/div>\r\n              <\/div>\r\n              <div class=\"text-right text-sm hidden\" id=\"col3Plus2\">\r\n                <div class=\"font-semibold\" id=\"int3Plus2\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap3Plus2\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal3Plus2\">\u2014<\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"row5y\" class=\"grid grid-cols-4 gap-2 items-start\">\r\n              <div class=\"text-sm text-gray-700\">After 5 years<\/div>\r\n              <div class=\"text-right text-sm\">\r\n                <div class=\"font-semibold\" id=\"int5Base\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap5Base\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal5Base\">\u2014<\/div>\r\n              <\/div>\r\n              <div class=\"text-right text-sm hidden\" id=\"col5Plus1\">\r\n                <div class=\"font-semibold\" id=\"int5Plus1\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap5Plus1\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal5Plus1\">\u2014<\/div>\r\n              <\/div>\r\n              <div class=\"text-right text-sm hidden\" id=\"col5Plus2\">\r\n                <div class=\"font-semibold\" id=\"int5Plus2\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap5Plus2\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal5Plus2\">\u2014<\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"row10y\" class=\"grid grid-cols-4 gap-2 items-start\">\r\n              <div class=\"text-sm text-gray-700\">After 10 years<\/div>\r\n              <div class=\"text-right text-sm\">\r\n                <div class=\"font-semibold\" id=\"int10Base\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap10Base\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal10Base\">\u2014<\/div>\r\n              <\/div>\r\n              <div class=\"text-right text-sm hidden\" id=\"col10Plus1\">\r\n                <div class=\"font-semibold\" id=\"int10Plus1\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap10Plus1\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal10Plus1\">\u2014<\/div>\r\n              <\/div>\r\n              <div class=\"text-right text-sm hidden\" id=\"col10Plus2\">\r\n                <div class=\"font-semibold\" id=\"int10Plus2\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"cap10Plus2\">\u2014<\/div>\r\n                <div class=\"text-xs text-gray-500\" id=\"bal10Plus2\">\u2014<\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <p class=\"text-[11px] text-gray-400 mt-2\">\r\n              Assumes the selected rate stays constant (stress test assumes immediate +1\/+2 and constant thereafter).\r\n              Balance shown is remaining principal.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Messages -->\r\n      <div id=\"residencyMessage\" class=\"mt-4 p-4 rounded-md text-sm transition-opacity duration-300 hidden\">\r\n        <div class=\"flex items-start\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" class=\"lucide lucide-info mr-3 mt-1 text-viva-blue-dark\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>\r\n          <p id=\"residencyText\" class=\"text-gray-700 leading-relaxed\"><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"savingsInfoMessage\" class=\"mt-4 p-4 rounded-md text-sm transition-opacity duration-300 hidden\">\r\n        <div class=\"flex items-start\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" class=\"lucide lucide-info mr-3 mt-1 text-viva-blue-dark\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>\r\n          <p id=\"savingsInfoText\" class=\"text-gray-700 leading-relaxed\"><\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"dtiInfoMessage\" class=\"mt-2 p-4 rounded-md text-sm transition-opacity duration-300 hidden\">\r\n        <div class=\"flex items-start\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" class=\"lucide lucide-alert-circle text-orange-500 mr-3 mt-1\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\"\/><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\"\/><\/svg>\r\n          <p id=\"dtiInfoText\" class=\"text-gray-700 leading-relaxed\"><\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      \/\/ --- CONSTANTS ---\r\n      const DTI_THRESHOLD = 0.40; \/\/ 40%\r\n      const MAX_END_AGE = 75;\r\n\r\n      const VIVA_FINANCE_FLAT_FEE_NO_VAT = 1500;\r\n      const VAT_RATE = 0.21;\r\n      const VIVA_FINANCE_MORTGAGE_PERCENTAGE = 0.005; \/\/ 0.5% of the mortgage\r\n      const MAX_LTV_RESIDENT = 0.80;\r\n      const MAX_LTV_NON_RESIDENT = 0.70;\r\n\r\n      const withVAT = (amount) => amount * (1 + VAT_RATE);\r\n\r\n      \/\/ Purchase costs (estimates)\r\n      const DEFAULT_NOTARY = 900;\r\n      const DEFAULT_REGISTRY = 450;\r\n      const DEFAULT_GESTORIA = 350;\r\n      const DEFAULT_VALUATION = 450;\r\n\r\n      \/\/ Tax presets (ballpark). resale: ITP %, newbuild: IVA\/IGIC %, AJD %\r\n      const REGION_TAX = {\r\n        default: { resale_itp: 0.08, new_iva: 0.10, new_ajd: 0.015 },\r\n        madrid:    { resale_itp: 0.06, new_iva: 0.10, new_ajd: 0.0075 },\r\n        catalonia: { resale_itp: 0.10, new_iva: 0.10, new_ajd: 0.015 },\r\n        valencia:  { resale_itp: 0.10, new_iva: 0.10, new_ajd: 0.015 },\r\n        andalucia: { resale_itp: 0.07, new_iva: 0.10, new_ajd: 0.012 },\r\n        balearic:  { resale_itp: 0.08, new_iva: 0.10, new_ajd: 0.012 },\r\n        canary:    { resale_itp: 0.065, new_iva: 0.07, new_ajd: 0.010 } \/\/ IGIC approx.\r\n      };\r\n\r\n      const ALL_REGION_KEYS = new Set([\r\n        'default','andalucia','aragon','asturias','balearic','canary','cantabria','castile_lamancha','castile_leon',\r\n        'catalonia','valencia','extremadura','galicia','madrid','murcia','navarre','basque','rioja','ceuta','melilla'\r\n      ]);\r\n\r\n      \/\/ --- UI REFS ---\r\n      const UI = {\r\n        calculatorForm: document.getElementById('calculatorForm'),\r\n        propertyPriceInput: document.getElementById('propertyPrice'),\r\n        totalSavingsInput: document.getElementById('totalSavings'),\r\n        monthlyNetIncomeInput: document.getElementById('monthlyNetIncome'),\r\n        monthlyDebtInput: document.getElementById('monthlyDebt'),\r\n        clientAgeInput: document.getElementById('clientAge'),\r\n        mortgageTermInput: document.getElementById('mortgageTerm'),\r\n        mortgageAgeRuleMsg: document.getElementById('mortgageAgeRuleMsg'),\r\n\r\n        propertyTypeSelect: document.getElementById('propertyType'),\r\n        regionSelect: document.getElementById('region'),\r\n\r\n        interestTypeRadios: document.getElementsByName('interestType'),\r\n        fixedRateWrap: document.getElementById('fixedRateWrap'),\r\n        fixedRateInput: document.getElementById('fixedRate'),\r\n        euriborRateInput: document.getElementById('euriborRate'),\r\n        marginRateInput: document.getElementById('marginRate'),\r\n        variableRateWrap: document.getElementById('variableRateWrap'),\r\n        stressPlus1Input: document.getElementById('stressPlus1'),\r\n        stressPlus2Input: document.getElementById('stressPlus2'),\r\n\r\n        mortgageLTVInput: document.getElementById('mortgageLTV'),\r\n        residencyRadios: document.getElementsByName('residency'),\r\n\r\n        calculateBtn: document.getElementById('calculateBtn'),\r\n        buttonText: document.getElementById('buttonText'),\r\n        buttonLoader: document.getElementById('buttonLoader'),\r\n\r\n        resultsArea: document.getElementById('resultsArea'),\r\n\r\n        downPaymentResult: document.getElementById('downPaymentResult'),\r\n        downPaymentPercentage: document.getElementById('downPaymentPercentage'),\r\n\r\n        propertyTaxLabel: document.getElementById('propertyTaxLabel'),\r\n        propertyTaxResult: document.getElementById('propertyTaxResult'),\r\n        notaryResult: document.getElementById('notaryResult'),\r\n        registryResult: document.getElementById('registryResult'),\r\n        gestoriaResult: document.getElementById('gestoriaResult'),\r\n        valuationResult: document.getElementById('valuationResult'),\r\n\r\n        totalSavingsUsedResult: document.getElementById('totalSavingsUsedResult'),\r\n\r\n        vivaFinanceFeesItem: document.getElementById('vivaFinanceFeesItem'),\r\n        vivaFinanceFeesLabel: document.getElementById('vivaFinanceFeesLabel'),\r\n        vivaFinanceFeesResult: document.getElementById('vivaFinanceFeesResult'),\r\n\r\n        monthlyMortgagePaymentSection: document.getElementById('monthlyMortgagePaymentSection'),\r\n        mortgageAmountResult: document.getElementById('mortgageAmountResult'),\r\n        rateUsedResult: document.getElementById('rateUsedResult'),\r\n        monthlyPaymentResult: document.getElementById('monthlyPaymentResult'),\r\n        stressResults: document.getElementById('stressResults'),\r\n        monthlyPaymentPlus1Result: document.getElementById('monthlyPaymentPlus1Result'),\r\n        monthlyPaymentPlus2Result: document.getElementById('monthlyPaymentPlus2Result'),\r\n        dtiResult: document.getElementById('dtiResult'),\r\n\r\n        stressDtiResults: document.getElementById('stressDtiResults'),\r\n        dtiPlus1Result: document.getElementById('dtiPlus1Result'),\r\n        dtiPlus2Result: document.getElementById('dtiPlus2Result'),\r\n\r\n        interestTimelineSection: document.getElementById('interestTimelineSection'),\r\n        timelineColPlus1: document.getElementById('timelineColPlus1'),\r\n        timelineColPlus2: document.getElementById('timelineColPlus2'),\r\n\r\n        row3y: document.getElementById('row3y'),\r\n        row5y: document.getElementById('row5y'),\r\n        row10y: document.getElementById('row10y'),\r\n\r\n        col3Plus1: document.getElementById('col3Plus1'),\r\n        col3Plus2: document.getElementById('col3Plus2'),\r\n        col5Plus1: document.getElementById('col5Plus1'),\r\n        col5Plus2: document.getElementById('col5Plus2'),\r\n        col10Plus1: document.getElementById('col10Plus1'),\r\n        col10Plus2: document.getElementById('col10Plus2'),\r\n\r\n        int3Base: document.getElementById('int3Base'),\r\n        cap3Base: document.getElementById('cap3Base'),\r\n        bal3Base: document.getElementById('bal3Base'),\r\n        int5Base: document.getElementById('int5Base'),\r\n        cap5Base: document.getElementById('cap5Base'),\r\n        bal5Base: document.getElementById('bal5Base'),\r\n        int10Base: document.getElementById('int10Base'),\r\n        cap10Base: document.getElementById('cap10Base'),\r\n        bal10Base: document.getElementById('bal10Base'),\r\n\r\n        int3Plus1: document.getElementById('int3Plus1'),\r\n        cap3Plus1: document.getElementById('cap3Plus1'),\r\n        bal3Plus1: document.getElementById('bal3Plus1'),\r\n        int5Plus1: document.getElementById('int5Plus1'),\r\n        cap5Plus1: document.getElementById('cap5Plus1'),\r\n        bal5Plus1: document.getElementById('bal5Plus1'),\r\n        int10Plus1: document.getElementById('int10Plus1'),\r\n        cap10Plus1: document.getElementById('cap10Plus1'),\r\n        bal10Plus1: document.getElementById('bal10Plus1'),\r\n\r\n        int3Plus2: document.getElementById('int3Plus2'),\r\n        cap3Plus2: document.getElementById('cap3Plus2'),\r\n        bal3Plus2: document.getElementById('bal3Plus2'),\r\n        int5Plus2: document.getElementById('int5Plus2'),\r\n        cap5Plus2: document.getElementById('cap5Plus2'),\r\n        bal5Plus2: document.getElementById('bal5Plus2'),\r\n        int10Plus2: document.getElementById('int10Plus2'),\r\n        cap10Plus2: document.getElementById('cap10Plus2'),\r\n        bal10Plus2: document.getElementById('bal10Plus2'),\r\n\r\n        dtiInfoMessage: document.getElementById('dtiInfoMessage'),\r\n        dtiInfoText: document.getElementById('dtiInfoText'),\r\n        residencyMessage: document.getElementById('residencyMessage'),\r\n        residencyText: document.getElementById('residencyText'),\r\n        savingsInfoMessage: document.getElementById('savingsInfoMessage'),\r\n        savingsInfoText: document.getElementById('savingsInfoText'),\r\n\r\n        purchaseExpensesHeader: document.getElementById('purchaseExpensesHeader'),\r\n        purchaseExpensesContent: document.getElementById('purchaseExpensesContent'),\r\n        chevronIcon: document.getElementById('chevronIcon'),\r\n\r\n        quickScoreBox: document.getElementById('quickScoreBox'),\r\n        quickScoreDot: document.getElementById('quickScoreDot'),\r\n        quickScoreValue: document.getElementById('quickScoreValue'),\r\n        quickScoreLabel: document.getElementById('quickScoreLabel'),\r\n        quickScoreHint: document.getElementById('quickScoreHint'),\r\n\r\n        \/\/ NEW: Max Affordable UI\r\n        maxAffordableSection: document.getElementById('maxAffordableSection'),\r\n        maxAffordableIntro: document.getElementById('maxAffordableIntro'),\r\n        maxAffordablePrice: document.getElementById('maxAffordablePrice'),\r\n        maxAffordableLoan: document.getElementById('maxAffordableLoan'),\r\n        maxAffordablePayment: document.getElementById('maxAffordablePayment'),\r\n        maxAffordableRate: document.getElementById('maxAffordableRate'),\r\n        maxAffordableAssumptions: document.getElementById('maxAffordableAssumptions'),\r\n        maxAffordableEdgeCase: document.getElementById('maxAffordableEdgeCase'),\r\n\r\n        \/\/ Errors\r\n        propertyPriceError: document.getElementById('propertyPriceError'),\r\n        totalSavingsError: document.getElementById('totalSavingsError'),\r\n        monthlyNetIncomeError: document.getElementById('monthlyNetIncomeError'),\r\n        monthlyDebtError: document.getElementById('monthlyDebtError'),\r\n        clientAgeError: document.getElementById('clientAgeError'),\r\n        mortgageTermError: document.getElementById('mortgageTermError'),\r\n        fixedRateError: document.getElementById('fixedRateError'),\r\n        euriborRateError: document.getElementById('euriborRateError'),\r\n        marginRateError: document.getElementById('marginRateError'),\r\n        mortgageLTVError: document.getElementById('mortgageLTVError')\r\n      };\r\n\r\n      const FORMATTER = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2 });\r\n      const PCT = (x) => (x * 100).toFixed(2) + '%';\r\n\r\n      \/\/ --- UTILS ---\r\n      const debounce = (func, delay) => { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => func.apply(this, args), delay); }; };\r\n\r\n      const calculateMonthlyPayment = (principal, annualRate, years) => {\r\n        const r = (annualRate \/ 100) \/ 12;\r\n        const n = years * 12;\r\n        return r > 0 ? principal * (r * Math.pow(1 + r, n)) \/ (Math.pow(1 + r, n) - 1) : principal \/ n;\r\n      };\r\n\r\n      \/\/ Inverse: from monthly payment -> max principal\r\n      const calculateMaxPrincipalFromPayment = (monthlyPayment, annualRate, years) => {\r\n        const r = (annualRate \/ 100) \/ 12;\r\n        const n = Math.max(1, Math.floor(years * 12));\r\n        if (monthlyPayment <= 0) return 0;\r\n        if (r <= 0) return monthlyPayment * n; \/\/ zero rate\r\n        const pow = Math.pow(1 + r, n);\r\n        \/\/ P = M * ( (1+r)^n - 1 ) \/ ( r*(1+r)^n )\r\n        return monthlyPayment * (pow - 1) \/ (r * pow);\r\n      };\r\n\r\n      const amortizationSnapshots = (principal, annualRate, years, targetMonths) => {\r\n        const r = (annualRate \/ 100) \/ 12;\r\n        const termMonths = Math.max(0, Math.floor(years * 12));\r\n        const payment = calculateMonthlyPayment(principal, annualRate, years);\r\n\r\n        const targets = [...new Set(targetMonths)].sort((a, b) => a - b);\r\n        const snaps = new Map();\r\n\r\n        let balance = principal;\r\n        let interestPaid = 0;\r\n\r\n        for (let m = 1; m <= termMonths; m++) {\r\n          const interest = r > 0 ? balance * r : 0;\r\n          let principalPart = payment - interest;\r\n          if (principalPart < 0) principalPart = 0;\r\n          if (principalPart > balance) principalPart = balance;\r\n\r\n          balance -= principalPart;\r\n          interestPaid += interest;\r\n\r\n          if (targets.includes(m)) snaps.set(m, { interestPaid, balance });\r\n        }\r\n        return { payment, termMonths, snaps };\r\n      };\r\n\r\n      const validateInput = (input, errorEl, { min = 0, max = Infinity } = {}) => {\r\n        const v = parseFloat(input.value);\r\n        const ok = !isNaN(v) && v >= min && v <= max;\r\n        if (errorEl) errorEl.classList.toggle('hidden', ok);\r\n        input.classList.toggle('input-error', !ok);\r\n        return ok;\r\n      };\r\n\r\n      const showResults = () => {\r\n        UI.resultsArea.classList.remove('hidden', 'scale-95', 'opacity-0');\r\n        UI.resultsArea.classList.add('scale-100', 'opacity-100');\r\n      };\r\n\r\n      const hideResults = () => {\r\n        UI.resultsArea.classList.add('scale-95', 'opacity-0');\r\n        UI.resultsArea.classList.remove('scale-100', 'opacity-100');\r\n        setTimeout(() => UI.resultsArea.classList.add('hidden'), 400);\r\n      };\r\n\r\n      const toggleButtonLoading = (on) => {\r\n        UI.calculateBtn.disabled = on;\r\n        UI.buttonText.classList.toggle('hidden', on);\r\n        UI.buttonLoader.classList.toggle('hidden', !on);\r\n      };\r\n\r\n      const toggleCollapsible = () => {\r\n        const isHidden = UI.purchaseExpensesContent.classList.toggle('hidden');\r\n        UI.chevronIcon.innerHTML = isHidden\r\n          ? `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"lucide lucide-chevron-down text-viva-blue-dark\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>`\r\n          : `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"lucide lucide-chevron-up text-viva-blue-dark\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"m18 15-6-6-6 6\"\/><\/svg>`;\r\n      };\r\n\r\n      const getInterestType = () => document.querySelector('input[name=\"interestType\"]:checked')?.value || 'fixed';\r\n\r\n      const updateInterestUI = () => {\r\n        const type = getInterestType();\r\n        if (type === 'fixed') {\r\n          UI.fixedRateWrap.classList.remove('hidden');\r\n          UI.variableRateWrap.classList.add('hidden');\r\n          UI.stressResults.classList.add('hidden');\r\n          UI.stressDtiResults.classList.add('hidden');\r\n        } else {\r\n          UI.fixedRateWrap.classList.add('hidden');\r\n          UI.variableRateWrap.classList.remove('hidden');\r\n        }\r\n\r\n        const eur = parseFloat(UI.euriborRateInput.value);\r\n        if (!isNaN(eur)) {\r\n          UI.stressPlus1Input.value = (eur + 1.00).toFixed(2);\r\n          UI.stressPlus2Input.value = (eur + 2.00).toFixed(2);\r\n        } else {\r\n          UI.stressPlus1Input.value = '';\r\n          UI.stressPlus2Input.value = '';\r\n        }\r\n      };\r\n\r\n      const setTimelineRowVisibility = (mortgageTermYears) => {\r\n        const termMonths = Math.floor(mortgageTermYears * 12);\r\n        UI.row3y.classList.toggle('hidden', termMonths < 36);\r\n        UI.row5y.classList.toggle('hidden', termMonths < 60);\r\n        UI.row10y.classList.toggle('hidden', termMonths < 120);\r\n      };\r\n\r\n      const showTimelineColumns = (showPlusCols) => {\r\n        UI.timelineColPlus1.classList.toggle('hidden', !showPlusCols);\r\n        UI.timelineColPlus2.classList.toggle('hidden', !showPlusCols);\r\n\r\n        UI.col3Plus1.classList.toggle('hidden', !showPlusCols);\r\n        UI.col3Plus2.classList.toggle('hidden', !showPlusCols);\r\n        UI.col5Plus1.classList.toggle('hidden', !showPlusCols);\r\n        UI.col5Plus2.classList.toggle('hidden', !showPlusCols);\r\n        UI.col10Plus1.classList.toggle('hidden', !showPlusCols);\r\n        UI.col10Plus2.classList.toggle('hidden', !showPlusCols);\r\n      };\r\n\r\n      const fillCell = (principal, snap, elInterest, elCapital, elBalance) => {\r\n        if (!snap) { elInterest.textContent = '\u2014'; elCapital.textContent = '\u2014'; elBalance.textContent = '\u2014'; return; }\r\n        const capitalPaid = Math.max(0, principal - snap.balance);\r\n        elInterest.textContent = `Interest: ${FORMATTER.format(snap.interestPaid)}`;\r\n        elCapital.textContent = `Capital: ${FORMATTER.format(capitalPaid)}`;\r\n        elBalance.textContent = `Balance: ${FORMATTER.format(snap.balance)}`;\r\n      };\r\n\r\n      const enforceMaxTermByAge = () => {\r\n        const age = parseFloat(UI.clientAgeInput.value);\r\n        const term = parseFloat(UI.mortgageTermInput.value);\r\n\r\n        UI.mortgageAgeRuleMsg.classList.add('hidden');\r\n        UI.mortgageAgeRuleMsg.textContent = '';\r\n\r\n        if (isNaN(age) || age <= 0) return;\r\n\r\n        const maxTerm = Math.max(0, Math.floor(MAX_END_AGE - age));\r\n        UI.mortgageTermInput.max = String(Math.max(1, maxTerm));\r\n\r\n        if (maxTerm <= 0) {\r\n          UI.mortgageAgeRuleMsg.classList.remove('hidden');\r\n          UI.mortgageAgeRuleMsg.textContent = `Age rule: max age at end is ${MAX_END_AGE}. With age ${age}, term must be 0 (not eligible).`;\r\n          return;\r\n        }\r\n\r\n        if (!isNaN(term) && term > maxTerm) {\r\n          UI.mortgageTermInput.value = maxTerm;\r\n          UI.mortgageAgeRuleMsg.classList.remove('hidden');\r\n          UI.mortgageAgeRuleMsg.textContent = `Adjusted term to ${maxTerm} years so age at end stays \u2264 ${MAX_END_AGE} (age ${age} + term ${maxTerm} = ${age + maxTerm}).`;\r\n        } else {\r\n          UI.mortgageAgeRuleMsg.classList.remove('hidden');\r\n          UI.mortgageAgeRuleMsg.textContent = `Max term for age ${age} is ${maxTerm} years (end age \u2264 ${MAX_END_AGE}).`;\r\n        }\r\n      };\r\n\r\n      const estimatePurchaseCosts = (price) => {\r\n        const regionKey = UI.regionSelect.value || 'default';\r\n        const safeRegionKey = ALL_REGION_KEYS.has(regionKey) ? regionKey : 'default';\r\n        const pType = UI.propertyTypeSelect.value || 'resale';\r\n        const tax = REGION_TAX[safeRegionKey] || REGION_TAX.default;\r\n\r\n        let propertyTaxAmount = 0;\r\n        let taxLabel = '';\r\n\r\n        if (pType === 'resale') {\r\n          const itp = (tax.resale_itp ?? REGION_TAX.default.resale_itp);\r\n          propertyTaxAmount = price * itp;\r\n          taxLabel = `ITP (${(itp * 100).toFixed(2)}%)`;\r\n        } else {\r\n          const ivaRate = (tax.new_iva ?? REGION_TAX.default.new_iva);\r\n          const ajdRate = (tax.new_ajd ?? REGION_TAX.default.new_ajd);\r\n\r\n          const ivaOrIgic = price * ivaRate;\r\n          const ajd = price * ajdRate;\r\n          propertyTaxAmount = ivaOrIgic + ajd;\r\n\r\n          const ivaName = (safeRegionKey === 'canary') ? 'IGIC' : 'IVA';\r\n          taxLabel = `${ivaName} (${(ivaRate * 100).toFixed(2)}%) + AJD (${(ajdRate * 100).toFixed(2)}%)`;\r\n        }\r\n\r\n        return {\r\n          propertyTaxAmount,\r\n          taxLabel,\r\n          notary: DEFAULT_NOTARY,\r\n          registry: DEFAULT_REGISTRY,\r\n          gestoria: DEFAULT_GESTORIA,\r\n          valuation: DEFAULT_VALUATION\r\n        };\r\n      };\r\n\r\n      const updateQuickScore = (dti) => {\r\n        if (!isFinite(dti) || dti <= 0) return;\r\n\r\n        UI.quickScoreBox.classList.remove('hidden');\r\n        UI.quickScoreValue.textContent = PCT(dti);\r\n\r\n        if (dti <= 0.35) {\r\n          UI.quickScoreDot.className = \"inline-block w-3 h-3 rounded-full bg-green-500\";\r\n          UI.quickScoreLabel.textContent = \"Comfortable\";\r\n          UI.quickScoreHint.textContent = \"Most banks will view this as a healthy range.\";\r\n        } else if (dti <= 0.40) {\r\n          UI.quickScoreDot.className = \"inline-block w-3 h-3 rounded-full bg-yellow-500\";\r\n          UI.quickScoreLabel.textContent = \"Borderline\";\r\n          UI.quickScoreHint.textContent = \"You may still qualify, but terms depend on profile and expenses.\";\r\n        } else {\r\n          UI.quickScoreDot.className = \"inline-block w-3 h-3 rounded-full bg-red-500\";\r\n          UI.quickScoreLabel.textContent = \"High DTI\";\r\n          UI.quickScoreHint.textContent = \"Often above bank comfort zone. Consider lower price, longer term, or reducing debt.\";\r\n        }\r\n      };\r\n\r\n      \/\/ NEW: show\/hide Max Affordable block\r\n      const showMaxAffordable = ({ shouldShow, scenarioLabel, rateUsed, termYears, ltv, monthlyIncome, monthlyDebt }) => {\r\n        UI.maxAffordableSection.classList.toggle('hidden', !shouldShow);\r\n        UI.maxAffordableEdgeCase.classList.add('hidden');\r\n        UI.maxAffordableEdgeCase.textContent = '';\r\n\r\n        if (!shouldShow) return;\r\n\r\n        \/\/ Compute max monthly payment allowed at DTI 40%\r\n        const maxMonthlyPayment = (monthlyIncome * DTI_THRESHOLD) - monthlyDebt;\r\n\r\n        UI.maxAffordableIntro.textContent = scenarioLabel;\r\n\r\n        if (!isFinite(maxMonthlyPayment) || maxMonthlyPayment <= 0) {\r\n          UI.maxAffordablePayment.textContent = FORMATTER.format(0);\r\n          UI.maxAffordableLoan.textContent = FORMATTER.format(0);\r\n          UI.maxAffordablePrice.textContent = FORMATTER.format(0);\r\n          UI.maxAffordableRate.textContent = `${rateUsed.toFixed(2)}%`;\r\n          UI.maxAffordableAssumptions.textContent = `${termYears}y \/ ${(ltv*100).toFixed(0)}%`;\r\n\r\n          UI.maxAffordableEdgeCase.classList.remove('hidden');\r\n          UI.maxAffordableEdgeCase.textContent = `With the DTI 40% rule, there is no available payment capacity (income * 40% \u2212 existing debt \u2264 0). Consider reducing debt or increasing income.`;\r\n          return;\r\n        }\r\n\r\n        const maxLoan = calculateMaxPrincipalFromPayment(maxMonthlyPayment, rateUsed, termYears);\r\n        const maxPrice = ltv > 0 ? (maxLoan \/ ltv) : 0;\r\n\r\n        UI.maxAffordablePayment.textContent = FORMATTER.format(maxMonthlyPayment);\r\n        UI.maxAffordableLoan.textContent = FORMATTER.format(maxLoan);\r\n        UI.maxAffordablePrice.textContent = FORMATTER.format(maxPrice);\r\n        UI.maxAffordableRate.textContent = `${rateUsed.toFixed(2)}%`;\r\n        UI.maxAffordableAssumptions.textContent = `${termYears}y \/ ${(ltv*100).toFixed(0)}%`;\r\n      };\r\n\r\n      \/\/ --- MAIN CALC ---\r\n      const runCalculation = (event) => {\r\n        if (event) event.preventDefault();\r\n        toggleButtonLoading(true);\r\n\r\n        enforceMaxTermByAge();\r\n\r\n        const type = getInterestType();\r\n\r\n        let valid = true;\r\n        valid = validateInput(UI.propertyPriceInput, UI.propertyPriceError, { min: 0 }) && valid;\r\n        valid = validateInput(UI.totalSavingsInput, UI.totalSavingsError, { min: 0 }) && valid;\r\n        valid = validateInput(UI.monthlyNetIncomeInput, UI.monthlyNetIncomeError, { min: 0 }) && valid;\r\n        valid = validateInput(UI.monthlyDebtInput, UI.monthlyDebtError, { min: 0 }) && valid;\r\n\r\n        valid = validateInput(UI.clientAgeInput, UI.clientAgeError, { min: 18, max: 75 }) && valid;\r\n\r\n        const age = parseFloat(UI.clientAgeInput.value);\r\n        const maxTermByAge = !isNaN(age) ? Math.max(0, Math.floor(MAX_END_AGE - age)) : Infinity;\r\n        valid = validateInput(UI.mortgageTermInput, UI.mortgageTermError, { min: 1, max: maxTermByAge }) && valid;\r\n\r\n        valid = validateInput(UI.mortgageLTVInput, UI.mortgageLTVError, { min: 1, max: 100 }) && valid;\r\n\r\n        if (type === 'fixed') {\r\n          valid = validateInput(UI.fixedRateInput, UI.fixedRateError, { min: 0 }) && valid;\r\n        } else {\r\n          valid = validateInput(UI.euriborRateInput, UI.euriborRateError, { min: 0 }) && valid;\r\n          valid = validateInput(UI.marginRateInput, UI.marginRateError, { min: 0 }) && valid;\r\n        }\r\n\r\n        const residencyStatus = document.querySelector('input[name=\"residency\"]:checked').value;\r\n        const maxLTV = residencyStatus === 'resident' ? MAX_LTV_RESIDENT : MAX_LTV_NON_RESIDENT;\r\n        let mortgageLTV = parseFloat(UI.mortgageLTVInput.value) \/ 100;\r\n\r\n        let ltvAdjusted = false;\r\n        if (isNaN(mortgageLTV) || mortgageLTV <= 0) valid = false;\r\n        if (mortgageLTV > maxLTV) {\r\n          mortgageLTV = maxLTV;\r\n          UI.mortgageLTVInput.value = (maxLTV * 100).toFixed(0);\r\n          ltvAdjusted = true;\r\n        }\r\n\r\n        if (!valid) { toggleButtonLoading(false); hideResults(); return; }\r\n\r\n        \/\/ Inputs\r\n        const propertyPrice = parseFloat(UI.propertyPriceInput.value);\r\n        const totalSavings = parseFloat(UI.totalSavingsInput.value);\r\n        const monthlyNetIncome = parseFloat(UI.monthlyNetIncomeInput.value);\r\n        const monthlyDebt = parseFloat(UI.monthlyDebtInput.value);\r\n        const mortgageTerm = parseFloat(UI.mortgageTermInput.value);\r\n\r\n        \/\/ Rate selection\r\n        let annualRateUsed = 0;\r\n        let rateLabel = '';\r\n\r\n        \/\/ For variable stress\r\n        let ratePlus1 = null;\r\n        let ratePlus2 = null;\r\n\r\n        if (type === 'fixed') {\r\n          const fixedRate = parseFloat(UI.fixedRateInput.value);\r\n          annualRateUsed = fixedRate;\r\n          rateLabel = `${fixedRate.toFixed(2)}% (Fixed)`;\r\n          UI.stressResults.classList.add('hidden');\r\n          UI.stressDtiResults.classList.add('hidden');\r\n        } else {\r\n          const euribor = parseFloat(UI.euriborRateInput.value);\r\n          const margin = parseFloat(UI.marginRateInput.value);\r\n          annualRateUsed = euribor + margin;\r\n          rateLabel = `${annualRateUsed.toFixed(2)}% (Euribor ${euribor.toFixed(2)} + ${margin.toFixed(2)})`;\r\n\r\n          ratePlus1 = (euribor + 1.00) + margin;\r\n          ratePlus2 = (euribor + 2.00) + margin;\r\n\r\n          UI.stressPlus1Input.value = (euribor + 1.00).toFixed(2);\r\n          UI.stressPlus2Input.value = (euribor + 2.00).toFixed(2);\r\n        }\r\n\r\n        \/\/ Core mortgage calcs\r\n        const mortgageAmount = propertyPrice * mortgageLTV;\r\n        const downPayment = propertyPrice - mortgageAmount;\r\n\r\n        \/\/ Purchase costs\r\n        const pc = estimatePurchaseCosts(propertyPrice);\r\n        const otherCostsTotal = pc.notary + pc.registry + pc.gestoria + pc.valuation;\r\n\r\n        const monthlyPayment = calculateMonthlyPayment(mortgageAmount, annualRateUsed, mortgageTerm);\r\n        const dti = monthlyNetIncome > 0 ? ((monthlyDebt + monthlyPayment) \/ monthlyNetIncome) : 0;\r\n\r\n        \/\/ Fees\r\n        const vivaFinanceServiceFees = withVAT(VIVA_FINANCE_FLAT_FEE_NO_VAT);\r\n        const vivaFinanceMortgageFees = withVAT(mortgageAmount * VIVA_FINANCE_MORTGAGE_PERCENTAGE);\r\n        const vivaFinanceTotalFees = vivaFinanceServiceFees + vivaFinanceMortgageFees;\r\n\r\n        const totalCosts = downPayment + pc.propertyTaxAmount + otherCostsTotal + vivaFinanceTotalFees;\r\n\r\n        \/\/ Populate UI\r\n        UI.downPaymentResult.textContent = FORMATTER.format(downPayment);\r\n        UI.downPaymentPercentage.textContent = ((downPayment \/ propertyPrice) * 100).toFixed(0);\r\n\r\n        UI.propertyTaxLabel.textContent = `Property Tax (${pc.taxLabel})`;\r\n        UI.propertyTaxResult.textContent = FORMATTER.format(pc.propertyTaxAmount);\r\n\r\n        UI.notaryResult.textContent = FORMATTER.format(pc.notary);\r\n        UI.registryResult.textContent = FORMATTER.format(pc.registry);\r\n        UI.gestoriaResult.textContent = FORMATTER.format(pc.gestoria);\r\n        UI.valuationResult.textContent = FORMATTER.format(pc.valuation);\r\n\r\n        UI.vivaFinanceFeesLabel.textContent = `Viva Finance Fees (\u20ac${VIVA_FINANCE_FLAT_FEE_NO_VAT} + VAT + ${(VIVA_FINANCE_MORTGAGE_PERCENTAGE * 100)}% of mortgage + VAT)`;\r\n        UI.vivaFinanceFeesResult.textContent = FORMATTER.format(vivaFinanceTotalFees);\r\n        UI.vivaFinanceFeesItem.classList.remove('hidden');\r\n\r\n        UI.totalSavingsUsedResult.textContent = FORMATTER.format(totalCosts);\r\n\r\n        UI.monthlyMortgagePaymentSection.classList.remove('hidden');\r\n        UI.mortgageAmountResult.textContent = FORMATTER.format(mortgageAmount);\r\n        UI.rateUsedResult.textContent = rateLabel;\r\n        UI.monthlyPaymentResult.textContent = FORMATTER.format(monthlyPayment);\r\n        UI.dtiResult.textContent = (dti * 100).toFixed(2) + '%';\r\n\r\n        updateQuickScore(dti);\r\n\r\n        \/\/ Stress test outputs + stress DTI (variable)\r\n        let dtiPlus1 = null;\r\n        let dtiPlus2 = null;\r\n\r\n        if (type === 'variable') {\r\n          const payPlus1 = calculateMonthlyPayment(mortgageAmount, ratePlus1, mortgageTerm);\r\n          const payPlus2 = calculateMonthlyPayment(mortgageAmount, ratePlus2, mortgageTerm);\r\n\r\n          UI.monthlyPaymentPlus1Result.textContent = `${FORMATTER.format(payPlus1)} (${ratePlus1.toFixed(2)}%)`;\r\n          UI.monthlyPaymentPlus2Result.textContent = `${FORMATTER.format(payPlus2)} (${ratePlus2.toFixed(2)}%)`;\r\n          UI.stressResults.classList.remove('hidden');\r\n\r\n          dtiPlus1 = monthlyNetIncome > 0 ? ((monthlyDebt + payPlus1) \/ monthlyNetIncome) : 0;\r\n          dtiPlus2 = monthlyNetIncome > 0 ? ((monthlyDebt + payPlus2) \/ monthlyNetIncome) : 0;\r\n\r\n          UI.dtiPlus1Result.textContent = (dtiPlus1 * 100).toFixed(2) + '%';\r\n          UI.dtiPlus2Result.textContent = (dtiPlus2 * 100).toFixed(2) + '%';\r\n          UI.stressDtiResults.classList.remove('hidden');\r\n        } else {\r\n          UI.stressResults.classList.add('hidden');\r\n          UI.stressDtiResults.classList.add('hidden');\r\n        }\r\n\r\n        \/\/ \u2705 NEW RULE (your request):\r\n        \/\/ - Fixed: show if base DTI > 40%\r\n        \/\/ - Variable: show if DTI at +2% > 40%\r\n        if (type === 'fixed') {\r\n          const shouldShow = dti > DTI_THRESHOLD;\r\n          showMaxAffordable({\r\n            shouldShow,\r\n            scenarioLabel: `Your DTI is ${(dti*100).toFixed(2)}% (> 40%). To target DTI \u2264 40%, consider this max price (based on current term, rate and LTV).`,\r\n            rateUsed: annualRateUsed,\r\n            termYears: mortgageTerm,\r\n            ltv: mortgageLTV,\r\n            monthlyIncome: monthlyNetIncome,\r\n            monthlyDebt: monthlyDebt\r\n          });\r\n        } else {\r\n          const stressDti2 = (dtiPlus2 ?? 0);\r\n          const shouldShow = stressDti2 > DTI_THRESHOLD;\r\n          showMaxAffordable({\r\n            shouldShow,\r\n            scenarioLabel: `Under stress test (+2.00% Euribor), your DTI is ${(stressDti2*100).toFixed(2)}% (> 40%). To target DTI \u2264 40% under +2%, consider this max price (based on +2% stress rate, current term and LTV).`,\r\n            rateUsed: ratePlus2,\r\n            termYears: mortgageTerm,\r\n            ltv: mortgageLTV,\r\n            monthlyIncome: monthlyNetIncome,\r\n            monthlyDebt: monthlyDebt\r\n          });\r\n        }\r\n\r\n        \/\/ Timeline\r\n        UI.interestTimelineSection.classList.remove('hidden');\r\n        setTimelineRowVisibility(mortgageTerm);\r\n\r\n        const termMonths = Math.floor(mortgageTerm * 12);\r\n        const monthsWanted = [36, 60, 120].filter(m => m <= termMonths);\r\n\r\n        const base = amortizationSnapshots(mortgageAmount, annualRateUsed, mortgageTerm, monthsWanted);\r\n\r\n        fillCell(mortgageAmount, base.snaps.get(36) || null, UI.int3Base, UI.cap3Base, UI.bal3Base);\r\n        fillCell(mortgageAmount, base.snaps.get(60) || null, UI.int5Base, UI.cap5Base, UI.bal5Base);\r\n        fillCell(mortgageAmount, base.snaps.get(120) || null, UI.int10Base, UI.cap10Base, UI.bal10Base);\r\n\r\n        if (type === 'variable') {\r\n          showTimelineColumns(true);\r\n\r\n          const plus1 = amortizationSnapshots(mortgageAmount, ratePlus1, mortgageTerm, monthsWanted);\r\n          const plus2 = amortizationSnapshots(mortgageAmount, ratePlus2, mortgageTerm, monthsWanted);\r\n\r\n          fillCell(mortgageAmount, plus1.snaps.get(36) || null, UI.int3Plus1, UI.cap3Plus1, UI.bal3Plus1);\r\n          fillCell(mortgageAmount, plus1.snaps.get(60) || null, UI.int5Plus1, UI.cap5Plus1, UI.bal5Plus1);\r\n          fillCell(mortgageAmount, plus1.snaps.get(120) || null, UI.int10Plus1, UI.cap10Plus1, UI.bal10Plus1);\r\n\r\n          fillCell(mortgageAmount, plus2.snaps.get(36) || null, UI.int3Plus2, UI.cap3Plus2, UI.bal3Plus2);\r\n          fillCell(mortgageAmount, plus2.snaps.get(60) || null, UI.int5Plus2, UI.cap5Plus2, UI.bal5Plus2);\r\n          fillCell(mortgageAmount, plus2.snaps.get(120) || null, UI.int10Plus2, UI.cap10Plus2, UI.bal10Plus2);\r\n        } else {\r\n          showTimelineColumns(false);\r\n        }\r\n\r\n        \/\/ Residency message\r\n        const maxLoanAmount = propertyPrice * maxLTV;\r\n        UI.residencyText.textContent =\r\n          `As a ${residencyStatus === 'resident' ? 'resident' : 'non-resident'}, max LTV is ${(maxLTV*100).toFixed(0)}% (max loan ${FORMATTER.format(maxLoanAmount)}).` +\r\n          (ltvAdjusted\r\n            ? ` Your LTV was adjusted to ${(maxLTV*100).toFixed(0)}% to match policy.`\r\n            : ` You selected ${(mortgageLTV*100).toFixed(0)}% \u2192 down payment ${FORMATTER.format(downPayment)}.`);\r\n        UI.residencyMessage.classList.remove('hidden');\r\n\r\n        \/\/ DTI message\r\n        if (dti > DTI_THRESHOLD) {\r\n          UI.dtiInfoText.textContent = `Your DTI is high: ${(dti * 100).toFixed(2)}% (target < ${(DTI_THRESHOLD*100)}%).`;\r\n          UI.dtiInfoMessage.classList.add('bg-red-100');\r\n          UI.dtiInfoMessage.classList.remove('bg-yellow-100');\r\n        } else {\r\n          UI.dtiInfoText.textContent = `Your DTI is ${(dti * 100).toFixed(2)}%, which is acceptable (< ${(DTI_THRESHOLD*100)}%).`;\r\n          UI.dtiInfoMessage.classList.remove('bg-red-100');\r\n          UI.dtiInfoMessage.classList.add('bg-yellow-100');\r\n        }\r\n        UI.dtiInfoMessage.classList.remove('hidden');\r\n\r\n        \/\/ Savings message\r\n        UI.savingsInfoMessage.classList.remove('hidden');\r\n        if (totalSavings < totalCosts) {\r\n          UI.savingsInfoText.textContent = `Heads up: your savings (${FORMATTER.format(totalSavings)}) don't cover down payment, taxes, purchase costs (incl. valuation), and fees. You need ${FORMATTER.format(totalCosts)}.`;\r\n          UI.savingsInfoMessage.classList.add('bg-red-100');\r\n          UI.savingsInfoMessage.classList.remove('bg-green-100');\r\n        } else {\r\n          UI.savingsInfoText.textContent = `Your savings are enough to cover down payment, taxes, purchase costs (incl. valuation), and fees for ${FORMATTER.format(propertyPrice)}.`;\r\n          UI.savingsInfoMessage.classList.remove('bg-red-100');\r\n          UI.savingsInfoMessage.classList.add('bg-green-100');\r\n        }\r\n\r\n        showResults();\r\n        toggleButtonLoading(false);\r\n        lucide.createIcons();\r\n      };\r\n\r\n      \/\/ Listeners\r\n      const debouncedCalculation = debounce(runCalculation, 450);\r\n\r\n      const inputsToWatch = [\r\n        UI.propertyPriceInput,\r\n        UI.totalSavingsInput,\r\n        UI.monthlyNetIncomeInput,\r\n        UI.monthlyDebtInput,\r\n        UI.clientAgeInput,\r\n        UI.mortgageTermInput,\r\n        UI.fixedRateInput,\r\n        UI.euriborRateInput,\r\n        UI.marginRateInput,\r\n        UI.mortgageLTVInput\r\n      ];\r\n\r\n      inputsToWatch.forEach(input => {\r\n        if (!input) return;\r\n        input.addEventListener('input', () => {\r\n          if (input.id === 'clientAge' || input.id === 'mortgageTerm') enforceMaxTermByAge();\r\n          if (input.id === 'euriborRate') updateInterestUI();\r\n          debouncedCalculation();\r\n        });\r\n      });\r\n\r\n      UI.propertyTypeSelect.addEventListener('change', debouncedCalculation);\r\n      UI.regionSelect.addEventListener('change', debouncedCalculation);\r\n\r\n      for (const r of UI.residencyRadios) r.addEventListener('change', debouncedCalculation);\r\n      for (const r of UI.interestTypeRadios) r.addEventListener('change', () => {\r\n        updateInterestUI();\r\n        debouncedCalculation();\r\n      });\r\n\r\n      UI.calculatorForm.addEventListener('submit', runCalculation);\r\n      UI.purchaseExpensesHeader.addEventListener('click', toggleCollapsible);\r\n\r\n      \/\/ Init\r\n      updateInterestUI();\r\n      enforceMaxTermByAge();\r\n      lucide.createIcons();\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed574d2 e-flex e-con-boxed e-con e-parent\" data-id=\"ed574d2\" 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-29227ae elementor-widget elementor-widget-html\" data-id=\"29227ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"vf-calc-faq\" style=\"margin:28px auto 0; max-width:1100px;\">\r\n  <style>\r\n    .vf-faq-wrap{\r\n      background:#fff;\r\n      border:1px solid rgba(15,67,146,.14);\r\n      border-radius:18px;\r\n      box-shadow:0 14px 28px rgba(0,0,0,.06);\r\n      padding:18px;\r\n    }\r\n    .vf-faq-head{\r\n      display:flex;\r\n      align-items:flex-end;\r\n      justify-content:space-between;\r\n      gap:14px;\r\n      flex-wrap:wrap;\r\n      margin-bottom:10px;\r\n    }\r\n    .vf-faq-title{\r\n      margin:0;\r\n      font-size:18px;\r\n      letter-spacing:-0.2px;\r\n      color:#0b1b33;\r\n      font-weight:900;\r\n    }\r\n    .vf-faq-sub{\r\n      margin:6px 0 0;\r\n      font-size:14px;\r\n      color:rgba(11,27,51,.75);\r\n      line-height:1.5;\r\n    }\r\n    .vf-faq-link{\r\n      display:inline-flex;\r\n      align-items:center;\r\n      gap:8px;\r\n      padding:10px 12px;\r\n      border-radius:12px;\r\n      border:1px solid rgba(15,67,146,.22);\r\n      color:#0b2e66;\r\n      text-decoration:none;\r\n      font-weight:800;\r\n      font-size:14px;\r\n      background:#fff;\r\n      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;\r\n      white-space:nowrap;\r\n    }\r\n    .vf-faq-link:hover{\r\n      transform:translateY(-2px);\r\n      box-shadow:0 14px 28px rgba(0,0,0,.08);\r\n      border-color:rgba(15,67,146,.40);\r\n    }\r\n    .vf-faq-items details{\r\n      border-top:1px solid rgba(15,67,146,.12);\r\n      padding:12px 0;\r\n    }\r\n    .vf-faq-items details:first-child{ border-top:none; }\r\n    .vf-faq-items summary{\r\n      cursor:pointer;\r\n      list-style:none;\r\n      display:flex;\r\n      align-items:flex-start;\r\n      justify-content:space-between;\r\n      gap:12px;\r\n      font-weight:900;\r\n      color:rgba(11,27,51,.88);\r\n      font-size:14.5px;\r\n    }\r\n    .vf-faq-items summary::-webkit-details-marker{ display:none; }\r\n    .vf-faq-items p{\r\n      margin:10px 0 0;\r\n      font-size:14px;\r\n      line-height:1.65;\r\n      color:rgba(11,27,51,.78);\r\n    }\r\n    .vf-faq-chevron{\r\n      flex:0 0 auto;\r\n      width:18px;\r\n      height:18px;\r\n      margin-top:2px;\r\n      color:#0f4392;\r\n      transition:transform .2s ease;\r\n    }\r\n    details[open] .vf-faq-chevron{ transform:rotate(180deg); }\r\n  <\/style>\r\n\r\n  <div class=\"vf-faq-wrap\">\r\n    <div class=\"vf-faq-head\">\r\n      <div>\r\n        <h3 class=\"vf-faq-title\">Quick FAQs<\/h3>\r\n        <p class=\"vf-faq-sub\">Short answers to the most common questions buyers ask.<\/p>\r\n      <\/div>\r\n\r\n      <!-- \u2705 Link to your FAQ page (you can keep #q13 if that's the most relevant) -->\r\n      <a class=\"vf-faq-link\" href=\"https:\/\/www.vivafinance.es\/faqs\/#q13\" target=\"_blank\" rel=\"noopener\">\r\n        See all FAQs\r\n        <span aria-hidden=\"true\">\u2192<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <div class=\"vf-faq-items\">\r\n      <details>\r\n        <summary>\r\n          What costs are included in \u201cTotal cash needed\u201d?\r\n          <svg class=\"vf-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"m6 9 6 6 6-6\"\/>\r\n          <\/svg>\r\n        <\/summary>\r\n        <p>\r\n          It includes down payment + indicative purchase taxes + notary\/registry\/gestor\u00eda estimates + valuation (tasaci\u00f3n)\r\n          + Viva Finance fees. Final totals can vary by region and buyer profile.\r\n        <\/p>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          What DTI is considered \u201cOK\u201d in Spain?\r\n          <svg class=\"vf-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"m6 9 6 6 6-6\"\/>\r\n          <\/svg>\r\n        <\/summary>\r\n        <p>\r\n          As a rule of thumb, banks often prefer DTI &lt; 40% (sometimes lower depending on profile).\r\n          Our calculator flags when the case is above typical bank comfort and suggests a max affordable price.\r\n        <\/p>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          Why do you show a stress test for variable mortgages?\r\n          <svg class=\"vf-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"m6 9 6 6 6-6\"\/>\r\n          <\/svg>\r\n        <\/summary>\r\n        <p>\r\n          Variable mortgages can change with Euribor. The +1% \/ +2% scenarios show how payments and DTI could look\r\n          if rates increase, which helps budgeting and lender discussions.\r\n        <\/p>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          Resident vs non-resident: what changes?\r\n          <svg class=\"vf-faq-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"m6 9 6 6 6-6\"\/>\r\n          <\/svg>\r\n        <\/summary>\r\n        <p>\r\n          Typical maximum LTV differs (often ~80% resident vs ~70% non-resident), which impacts down payment and\r\n          cash needed. The calculator automatically applies these limits.\r\n        <\/p>\r\n      <\/details>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\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>SPANISH MORTGAGE CALCULATOR Estimate your Spanish mortgage, then check what is really possible. Use the calculator to estimate your monthly payment, purchase costs, DTI and LTV. It is a useful first step before speaking with a mortgage advisor. DTI target Total monthly debts should normally stay below 40% of income. Non-resident finance Often around 60%, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":176,"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":7114,"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/pages\/54\/revisions\/7114"}],"wp:attachment":[{"href":"https:\/\/www.vivafinance.es\/pl\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}