<section class="splitter splitter_bg-color_white splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="row calculator-form">
<form id="calculatorForm">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col entradilla">
<div class="
bodycopy-m
">
Calcula la cuota de tu hipoteca y qué gastos necesitarás tener en cuenta con nuestra Calculadora de hipotecas. Sin compromiso haz tantas simulaciones como quieras para orientarte y tener la información que necesitas antes de comprar la casa que quieres.
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="https://hipotecas.com/-/media/Project/Ecoweb/Icons/satisfaccion.svg" alt="descripción">
<h3 class="
title-m
title-m_color_accent-dark
">Paso 1 de 3: Datos personales</h3>
</div>
<div class="calculator-form__form form-distinguisher_calculator-form" id="calculatorForm" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="ageRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuál es tu edad?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">¿Cuál es tu edad?</p>
<div class="
bodycopy-s
">
Edad del mayor de los titulares.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="ageRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='67' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
67 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="ingresosMes">INGRESOS MENSUALES TOTALES NETOS</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Ingresos mensuales netos</p>
<div class="
bodycopy-s
">
Suma total de los ingresos de todos los titulares de la hipoteca.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="ingresosMes" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="gastosMes">GASTOS MENSUALES OTROS PRÉSTAMOS</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Gastos otros préstamos</p>
<div class="
bodycopy-s
">
Suma total de otros préstamos, deudas, hipotecas o pensiones.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="gastosMes" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="https://hipotecas.com/-/media/Project/Ecoweb/Icons/satisfaccion.svg" alt="descripción">
<h3 class="
title-m
title-m_color_accent-dark
">Paso 2 de 3: Datos de la vivienda</h3>
</div>
<div class="calculator-form__form form-distinguisher_calculator-form" id="calculatorForm" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-select form-select-distinguisher_provincia" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="where">¿Dónde quieres comprar?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="where-input">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="where-input">
<div class="access-select__option access-select__chosen-option">Elije provincia</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="purpose">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Tienes vivienda elegida?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="viviendaElegidaSi" type="radio" title="Sí" name="Vivienda elegida" value="Sí" checked>
<label class="radio-label " for="viviendaElegidaSi" id="" value="">
<span class="caption-placeholder-m">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="viviendaElegidaNo" type="radio" title="No" name="Vivienda elegida" value="No">
<label class="radio-label " for="viviendaElegidaNo" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="tipoVivienda">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Tipo de inmueble</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipoViviendaNueva" type="radio" title="Nuevo" name="Tipo de inmueble" value="Nuevo" checked>
<label class="radio-label " for="tipoViviendaNueva" id="" value="">
<span class="caption-placeholder-m">Nuevo</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipoViviendaSegundaMano" type="radio" title="Segunda mano" name="Tipo de inmueble" value="2ª mano">
<label class="radio-label " for="tipoViviendaSegundaMano" id="" value="">
<span class="caption-placeholder-m">2ª mano</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="MortgageHousePriceRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Importe de la vivienda</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHousePriceRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Importe de la vivienda" min='100000' max='1000000' data-default='200000' step='1000'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderPrice"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
100.000€
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="reforma">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Quieres reformar?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reformaSi" type="radio" title="Si" name="Quieres reformar" value="Sí" checked>
<label class="radio-label " for="reformaSi" id="" value="">
<span class="caption-placeholder-m">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reformaNo" type="radio" title="No" name="Quieres reformar" value="No">
<label class="radio-label " for="reformaNo" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="importeReforma">Importe de la reforma</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="importeReforma" type="text" name="" title="gastosMes" value="0">
<div class="form-input__symbol" for="importeReforma">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="https://hipotecas.com/-/media/Project/Ecoweb/Icons/satisfaccion.svg" alt="descripción">
<h3 class="
title-m
title-m_color_accent-dark
">Paso 3 de 3: Sobre tu financiación</h3>
</div>
<div class="calculator-form__form form-distinguisher_calculator-form" id="calculatorForm" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="MortgageHouseDurationRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Duración de la hipoteca</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHouseDurationRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Duración de la hipoteca" min='7' max='30' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderDuracion"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="duracion-start" class="bodycopy-xs
">
7 años
</div>
</div>
<div class="range-slider__legend-end">
<div id="duracion-end" class="bodycopy-xs
">
30 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Tipo de interés</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Tipo de interés (TIN)</p>
<div class="
bodycopy-s
">
Este es el tipo de interés es con el que vamos a calcular tu hipoteca. Puede que no sea parte de nuestra oferta comercial, te recomendamos que explores nuestra web-
</div> <a class="link
" href="https://hipotecas.com/es/nuestras-hipotecas/">
<span>Ir a Nuestras hipotecas</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="TINRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="TINRangeSliderInput" type="text" name="" title="Duración de la hipoteca" min='1' max='8' data-default='3'>
<div class="range-slider__symbol" for="TINRangeSliderInput">
<div class="bodycopy-xs
">
%
</div>
</div>
</div>
<div class="range-slider__slider" id="TINsliderDuracion"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="tin-start" class="bodycopy-xs
">
1%
</div>
</div>
<div class="range-slider__legend-end">
<div id="tin-end" class="bodycopy-xs
">
8%
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="datoTAE">TAE</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">TAE</p>
<div class="
bodycopy-s
">
Tasa Anual Equivalente. Se calcula automáticamente. Es el coste anual de tu hipoteca e incluye el interés nominal, algunos gastos de constitución y las comisiones bancarias.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset disabled">
<input class="form-input__input " id="tae" type="text" name="" title="dato TAE" value="-" disabled>
<div class="form-input__symbol" for="tae">
<div class="bodycopy-xs
">
%
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col submit" id="DivSubmit">
<div class="wrap-bloque">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="https://landings.hipotecas.com/img/landing-gracias.png" alt="Calcula">
</div>
<div class="tile__label">
<div class="text-label-m"></div>
</div>
<div class="tile__title">
<h3 class="
title-m
"></h3>
</div>
<div class="tile__bodycopy">
<div class="
bodycopy-m
">
<p>Completa los campos para obtener tu resultado</p>
</div>
</div>
<div class="tile__btn">
<button id="bntCalcular" class="btn
" type="button" tabindex="-1">
Calcular
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col results" id="DivResultados" style="display:none;">
<div class="wrap-bloque">
<div class="calculator-form__form form-distinguisher_calculator-form" id="calculatorForm" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="MortgageAmountRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Te financiamos</label>
<div class="field-top__wrap">
<a class="link
link_inline
modal-toggle
" href="#" data-modal="modalCalculadora1">
<span>+ info</span>
</a>
</div>
</div>
<div class="range-slider bg-color_yellow" id="">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="MortgageAmountRangeInput" type="text" name="" title="Te financiamos" min='80000' max='1000000' data-default='160000' step='1000'>
<div class="range-slider__symbol" for="MortgageAmountRangeInput">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderImportePrestamo"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="importeprestamo-start" class="bodycopy-xs
">
80.000€
</div>
</div>
<div class="range-slider__legend-end">
<div id="importeprestamo-end" class="bodycopy-xs
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Aportación necesaria</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider bg-color_yellow" id="MortgageHouseSavingsRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="MortgageHouseSavingsRangeInput" type="text" name="" title="Aportación necesaria" min='20000' max='800000' data-default='40000' step='1000'>
<div class="range-slider__symbol" for="MortgageHouseSavingsRangeInput">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderAportacion"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="aportacion-start" class="bodycopy-xs
">
20.000€
</div>
</div>
<div class="range-slider__legend-end">
<div id="aportacion-end" class="bodycopy-xs
">
800.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="importe-Gastos">Importe total de gastos</label>
<div class="field-top__wrap">
<a class="link
link_inline
modal-toggle
" href="#" data-modal="modalCalculadora2">
<span>+ info</span>
</a>
</div>
</div>
<div class="form-input__fieldset disabled">
<input class="form-input__input " id="importeGastos" type="text" name="" title="Importe Gastos" value="-" disabled>
<div class="form-input__symbol" for="importeGastos">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="calculator-form-result">
<div class="cuota col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6" id="Capa-cuota">
<div class="cuota__fieldset">
<div class="tooltip-label">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Tu cuota mensual sería de</label>
<div class="field-top__wrap">
</div>
</div>
</div>
<div class="wrap">
<span class="cuota__input" id="Cuota" type="text" name="Cuota" title="Cuota" value="8.888,88">0</span>
<label class="cuota__label" for="">
<div class="text-label-m">€</div>
</label>
<span class="asterisk">*</span>
</div>
<div class="link-cuota">
<div class="
bodycopy-s
">
<a class="bodycopy__link" href="#MoreInfo"><span>ver condiciones</span></a>
</div>
</div>
</div>
</div>
<div class="nota">
<div class="
bodycopy-s
">
Este resultado es orientativo en base a los datos que nos has aportado, no es una oferta vinculante.
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="features-alert" style="display: none;">
<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="flap">
<div class="wrap">
<ul class="text">
<li class="title">
<h4 class="title
">Con los datos que nos aportas, podrías tener dificultados para pagar la cuota, te recomendamos juegues con el plazo, el precio, etc, para ajustarlo a una cuota que encaje mejor con tus necesidades.</h4>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div id="features" style="display: block;">
<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="flap">
<div class="wrap">
<ul class="text">
<li class="title">
<h3 class="title
">Solicita tu hipoteca dándonos unos pocos datos más</h3>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<ul class="actions">
<li class="enlace"> <a class="link
" href="#">
<span>Link</span>
</a>
</li>
<li class="button"> <a class="btn
btn_secondary
" href="#" id="">
Descubrir producto
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="row more-info">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col results" id="MoreInfo">
<div class="rich-text-general">
<ul class='interest-rates__legal-list'>
<li class='interest-rates__legal-item '>
<h2 class='title-l '><span class='title-l__prefix '>*</span>Cuota a tipo fijo</h2>
<div class='bodycopy-m '>
<p><b>Condiciones</b></p>
<p><b><span class='legalTin'>#campoTin#</span>% TIN.</b></p>
<p><b><span class='legalTae'>#campoTae#</span>% TAE.</b></p>
<p><b>Ejemplo representativo para un préstamo por importe de <span class='legalImporte'>#campoImporte#</span> y un plazo de <span class='legalPlazo'>#campoplazo#</span> años.</b></p>
<p><b>Las características y condiciones fundamentales de la operación serían:</b></p>
<p><b>- Tipo de interés nominal fijo del <span class='legalTin'>#campotin#</span>% durante los <span class='legalPlazo'>#campoplazo#</span> años.</b></p>
<p><b>- La TAE del préstamo es del <span class='legalTae'>#campoTae#</span>%, la cual representa el coste total que el préstamo tendrá para usted, expresado como porcentaje anual del importe total del préstamo concedido, más los costes aparejados, si ha lugar, y que corresponde, sobre una base anual, al valor actual de todos los compromisos futuros o existentes, tales como disposiciones de fondos, reembolsos y gastos, convenidos entre la Entidad y usted, según lo definido en la circular 5/2012 del Banco de España.</b></p>
<p><b>El cálculo de la TAE se ha realizado teniendo en cuenta que el contrato de préstamo estará vigente durante el plazo acordado y que usted cumplirá con sus obligaciones, en los términos que se establezcan en el contrato.</b></p>
<p><b>La TAE puede también variar en función del plazo.</b></p>
<p><b>Para el cálculo de la TAE, se han tenido en cuenta los siguientes costes:</b></p>
<p><b>1) Comisión de apertura <span class='legalComisionApertura'>#campoComisionApertura#</span>€, como resultado de la aplicación del <span class='legalPorcientoComision'>#campoPorcientoComision#</span>% sobre un importe de préstamo de <span class='legalImporte'>#campoImporte#</span>€.</b></p>
<p><b>2) Coste estimado de la tasación de <span class='legalCosteTasacion'>#campoCosteTasacion#€</span> sobre la garantía principal .</b></p>
<p><b>- Cuota mensual de <span class='legalCuotaMensual'>#campoCuotaMensual#</span> desde la cuota 1 hasta la <span class='campoCuotaEnd'>#campoCuotaEnd#</span>.<p><b>- El sistema de amortización empleado será el francés, según el cual durante toda la vida del préstamo, la cuota a pagar permanecerá constante, a excepción de la última cuota según lo explicado en el anterior apartado.</b></p>
<p><b>El importe total adeudado en la operación asciende a <span class='legalImporteAdeudado'>#campoImporteAdeudado#</span>€, de los que <span class='legalImporte'>#campoImporte#€</span> corresponden al capital del préstamo y <span class='legalImporteGastos'>#campoImporteGastos#€</span> por el coste total del préstamo al consumidor, el cual incluye <span class='legalInteresesAdeudado'>#campo intereses adeudado#</span>€ por intereses, <span class='legalComisionApertura'># campoComisionApertura #</span>€ por comisión de apertura, un coste estimado de la tasación de <span class='legalTasacion'>#campoTasacion#</span>€ sobre la garantía principal .</b></p>
<p>Este producto es un préstamo con garantía hipotecaria, por lo que los deudores responden del pago con la vivienda hipotecada y además con todos sus bienes. En caso de impago, la Entidad podrá iniciar un procedimiento judicial que puede dar lugar a la subasta del inmueble/s hipotecado/s y al posible embargo de otros bienes o ingresos, hasta el pago total del préstamo.</p>
<p>Esta Entidad se encuentra adherida al Código de Buenas Prácticas para la reestructuración viable de las deudas con garantía hipotecaria sobre la vivienda habitual.</p>
<p>Comisión por reembolso anticipado del 0% si la suma de amortizaciones parciales realizadas en los 12 últimos meses fuera inferior al 25% del capital pendiente al inicio de dicho periodo. Si el reembolso anticipado fuera mayor o igual al 25% del capital pendiente al principio de los últimos 12 meses, la comisión no podrá exceder del importe de la pérdida financiera que tenga la entidad, con el límite 2,00% durante los 10 primeros años y a partir del 11º año 1,50%, conforme a la Ley 5/2019, de 15 de marzo, reguladora de los contratos de crédito inmobiliario. Esta comisión se calculará sobre la cantidad reembolsada anticipadamente.</p>
<p>Este documento contiene un ejemplo representativo de un préstamo basada en unas condiciones financieras (tipo de interés fijo y comisión de apertura) establecidas en este documento exclusivamente a título de ejemplo, con el fin de mostrar de forma numérica la evolución de las cuotas en un plazo determinado y no constituye una oferta de contratación por parte de Unión de Créditos Inmobiliarios S.A., Establecimiento Financiero de Crédito.</p>
<p>A continuación se muestra la fórmula matemática utilizada para la determinación de la cuota mensual. Esta fórmula se aplica para el cálculo de la cuota comprensiva de intereses y amortización según el sistema de amortización francés.</p>
<p>Cálculo de la cuota mensual: Cuota=(CxTIN/12)/(1-(1+TIN)/12)-plazo)</p>
<p>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje; Plazo: número de cuotas mensuales.</p>
<p>Cálculo de la parte correspondiente de intereses: Intereses= CxTIN/12.</p>
<p>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje.</p>
<p>Cálculo de la parte correspondiente a amortización: la cuota menos los intereses.</p>
</div>
</li>
<li class='interest-rates__legal-item'>
<h2 class='title-l'>Fijo 30</h2>
<div class='bodycopy-m'>
<p>Condiciones:</p>
<p><strong>4,950% TIN.</strong></p>
<p><strong><span style='color: #3a3831;'>5,131</span>% <span style='text-decoration: underline;'>TAE</span>.</strong></p>
<p><strong>Ejemplo representativo para un préstamo por importe de 150.000,00€ y un plazo de 30 años.</strong></p>
<p><strong>Las características y condiciones fundamentales de la operación serían:</strong></p>
<p><strong>- Tipo de interés nominal fijo del 4,950% durante los 30 años.</strong></p>
<p><strong>- La <span style='text-decoration: underline;'>TAE</span> del préstamo es del 5,131%, la cual representa el coste total que el préstamo tendrá para usted, expresado como porcentaje anual del importe total del préstamo concedido, más los costes aparejados, si ha lugar, y que corresponde, sobre una base anual, al valor actual de todos los compromisos futuros o existentes, tales como disposiciones de fondos, reembolsos y gastos, convenidos entre la Entidad y usted, según lo definido en la circular 5/2012 del Banco de España.</strong></p>
<p><strong>El cálculo de la <span style='text-decoration: underline;'>TAE</span> se ha realizado teniendo en cuenta que el contrato de préstamo estará vigente durante el plazo acordado y que usted cumplirá con sus obligaciones, en los términos que se establezcan en el contrato.</strong></p>
<p><strong>La <span style='text-decoration: underline;'>TAE</span> puede también variar en función del plazo.</strong></p>
<p><strong>Para el cálculo de la <span style='text-decoration: underline;'>TAE</span>, se han tenido en cuenta los siguientes costes:</strong></p>
<p><strong>1) Comisión de apertura 750,00€, como resultado de la aplicación del 0,50% sobre un importe de préstamo de 150.000,00€.</strong></p>
<p><strong>2) Coste estimado de la tasación de 344,85€ sobre la garantía principal .</strong></p>
<p><strong></strong></p>
<p><strong></strong></p>
<p><strong>- Cuota mensual de 800,65€ desde la cuota 1 hasta la 359. Además tendremos una última cuota en el mes 360 de 804,70€ que ajustará la cantidad amortizada de forma que el saldo pendiente final sea de 0 euros. Esta cuota de 804,70€ se calcula como la suma del capital pendiente de la cuota 359 que son 801,39€ y los intereses a pagar de la cuota 360 que son 3,31€.</strong></p>
<p><strong>- El sistema de amortización empleado será el francés, según el cual durante toda la vida del préstamo, la cuota a pagar permanecerá constante, a excepción de la última cuota según lo explicado en el anterior apartado.</strong></p>
<p><strong>El importe total adeudado en la operación asciende a 289.332,90€, de los que 150.000,00€ corresponden al capital del préstamo y 139.332,90€ por el coste total del préstamo al consumidor, el cual incluye 138.238,05€ por intereses, 750,00€ por comisión de apertura, un coste estimado de la tasación de 344,85€ sobre la garantía principal .</strong></p>
<p>Este producto es un préstamo con garantía hipotecaria, por lo que los deudores responden del pago con la vivienda hipotecada y además con todos sus bienes. En caso de impago, la Entidad podrá iniciar un procedimiento judicial que puede dar lugar a la subasta del inmueble/s hipotecado/s y al posible embargo de otros bienes o ingresos, hasta el pago total del préstamo.</p>
<p>Esta Entidad se encuentra adherida al Código de Buenas Prácticas para la reestructuración viable de las deudas con garantía hipotecaria sobre la vivienda habitual.</p>
<p>Comisión por reembolso anticipado del 0% si la suma de amortizaciones parciales realizadas en los 12 últimos meses fuera inferior al 25% del capital pendiente al inicio de dicho periodo. Si el reembolso anticipado fuera mayor o igual al 25% del capital pendiente al principio de los últimos 12 meses, la comisión no podrá exceder del importe de la pérdida financiera que tenga la entidad, con el límite 2,00% durante los 10 primeros años y a partir del 11º año 1,50%, conforme a la Ley 5/2019, de 15 de marzo, reguladora de los contratos de crédito inmobiliario. Esta comisión se calculará sobre la cantidad reembolsada anticipadamente.</p>
<p>Este documento contiene un ejemplo representativo de un préstamo basada en unas condiciones financieras (tipo de interés fijo y comisión de apertura) establecidas en este documento exclusivamente a título de ejemplo, con el fin de mostrar de forma numérica la evolución de las cuotas en un plazo determinado y no constituye una oferta de contratación por parte de Unión de Créditos Inmobiliarios S.A., Establecimiento Financiero de Crédito.</p>
<p>A continuación se muestra la fórmula matemática utilizada para la determinación de la cuota mensual. Esta fórmula se aplica para el cálculo de la cuota comprensiva de intereses y amortización según el sistema de amortización francés.</p>
<p><em><strong>Cálculo de la cuota mensual: Cuota=(CxTIN/12)/(1-(1+TIN)/12)<sup>-plazo</sup>)</strong></em></p>
<p><em><strong>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje; Plazo: número de cuotas mensuales.</strong></em><br><em><strong><span style='text-decoration: underline;'>Cálculo de la parte correspondiente de intereses:</span> Intereses= CxTIN/12.</strong></em><br><em><strong>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje.</strong></em><br><em><strong><span style='text-decoration: underline;'>Cálculo de la parte correspondiente a amortización:</span> la cuota menos los intereses.</strong></em></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="modalCalculadora1-lightbox-new" class="lightbox-new modalCalculadora1-lightbox-new-container">
<div id="modalCalculadora1-lightbox-new" class="modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 modal-box">
<div class="modal-top">
<span class="modal-close">
<svg class="icon icon-24_close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#24_close"></use>
</svg>
</span>
</div>
<div class="modal-container">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
Lightbox Calculadora1
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modalCalculadora2-lightbox-new" class="lightbox-new modalCalculadora2-lightbox-new-container">
<div id="modalCalculadora2-lightbox-new" class="modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 modal-box">
<div class="modal-top">
<span class="modal-close">
<svg class="icon icon-24_close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#24_close"></use>
</svg>
</span>
</div>
<div class="modal-container">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
Lightbox Calculadora2
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modalCalculadora3-lightbox-new" class="lightbox-new modalCalculadora3-lightbox-new-container">
<div id="modalCalculadora3-lightbox-new" class="modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 modal-box">
<div class="modal-top">
<span class="modal-close">
<svg class="icon icon-24_close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#24_close"></use>
</svg>
</span>
</div>
<div class="modal-container">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
Lightbox Calculadora3
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="row calculator-form" {{#if hasID}}id="{{idComponent}}" {{/if}}>
<form id="{{id}}">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col entradilla">
{{> @bodycopy-m entradilla }}
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
{{> @title-with-icon subtitulo1 }}
<div class="calculator-form__form form-distinguisher_calculator-form" id="{{ id }}" action="#"
method="post" novalidate>
{{> @calculator-form-list form-list }}
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
{{> @title-with-icon subtitulo2 }}
<div class="calculator-form__form form-distinguisher_calculator-form" id="{{ id }}" action="#"
method="post" novalidate>
{{> @calculator-form-list form-list2 }}
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
{{> @title-with-icon subtitulo3 }}
<div class="calculator-form__form form-distinguisher_calculator-form" id="{{ id }}" action="#"
method="post" novalidate>
{{> @calculator-form-list form-list3 }}
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col submit" id="DivSubmit">
<div class="wrap-bloque">
{{> @tile submit }}
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col results" id="DivResultados"
style="display:none;">
<div class="wrap-bloque">
<div class="calculator-form__form form-distinguisher_calculator-form" id="{{ id }}" action="#"
method="post" novalidate>
{{> @calculator-form-list form-list-result }}
</div>
</div>
<div id="features-alert" style="display: none;">
{{> @flap alert }}
</div>
<div id="features" style="display: block;">
{{> @flap features }}
</div>
<div class="row more-info">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col results" id="MoreInfo">
<div class="rich-text-general">
{{{ more-info }}}
</div>
</div>
</div>
</div>
</form>
</div>
{{/content}}
{{/extend}}
{{ render '@lightbox-new--calculadora1' modalCalculadora1 }}
{{ render '@lightbox-new--calculadora2' modalCalculadora2 }}
{{ render '@lightbox-new--calculadora3' modalCalculadora3 }}
{
"hasID": false,
"id": "calculatorForm",
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"entradilla": {
"text": "Calcula la cuota de tu hipoteca y qué gastos necesitarás tener en cuenta con nuestra Calculadora de hipotecas. Sin compromiso haz tantas simulaciones como quieras para orientarte y tener la información que necesitas antes de comprar la casa que quieres."
},
"subtitulo1": {
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Icons/satisfaccion.svg",
"alt": "descripción",
"tit": {
"text": "Paso 1 de 3: Datos personales",
"colorAccentDark": true
}
},
"subtitulo2": {
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Icons/satisfaccion.svg",
"alt": "descripción",
"tit": {
"text": "Paso 2 de 3: Datos de la vivienda",
"colorAccentDark": true
}
},
"subtitulo3": {
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Icons/satisfaccion.svg",
"alt": "descripción",
"tit": {
"text": "Paso 3 de 3: Sobre tu financiación",
"colorAccentDark": true
}
},
"legal": {
"bodycopy": {
"text": "Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico, y con el nombre, que nos facilites. Estos datos los utilizaremos en UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») para gestionar tu solicitud, para facilitarte información sobre nuestros productos y servicios, y para conocer tu valoración sobre los mismos. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Si quieres saber más sobre cómo protegemos tu privacidad, pincha aquí. Al pulsar en el siguiente botón de envío, declaro haber leído y acepto la información sobre Protección de Datos."
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "¿Cuál es tu edad?"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "¿Cuál es tu edad?",
"isP": true
},
"bodycopy": {
"text": "Edad del mayor de los titulares."
}
}
},
"id": "ageRangeSlider",
"range-slider": {
"id": "ageRangeInput",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='67' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "67 años"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"field-top": {
"label": {
"text": "INGRESOS MENSUALES TOTALES NETOS",
"for": "ingresosMes"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Ingresos mensuales netos",
"isP": true
},
"bodycopy": {
"text": "Suma total de los ingresos de todos los titulares de la hipoteca."
}
}
},
"inputTitle": "ingresosMes",
"id": "ingresosMes",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"field-top": {
"label": {
"text": "GASTOS MENSUALES OTROS PRÉSTAMOS",
"for": "gastosMes"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Gastos otros préstamos",
"isP": true
},
"bodycopy": {
"text": "Suma total de otros préstamos, deudas, hipotecas o pensiones."
}
}
},
"inputTitle": "gastosMes",
"id": "gastosMes",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"form-list2": {
"form-list": [
{
"isRequired": true,
"isThreecol": true,
"form-select": {
"distinguisher": "provincia",
"field-top": {
"label": {
"text": "¿Dónde quieres comprar?",
"for": "where"
}
},
"select": {
"id": "where-input",
"chosen-placeholder": "Elije provincia",
"option": [
{
"id": "randromApplicationProvinceId1",
"select-name": "Province",
"text": "Provincia 1"
},
{
"id": "randromApplicationProvinceId2",
"select-name": "Province",
"text": "Provincia 2"
},
{
"id": "randromApplicationProvinceId3",
"select-name": "Province",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿Tienes vivienda elegida?",
"fieldset": true
}
},
"id": "purpose",
"radio-group": {
"radio-group": [
{
"id": "viviendaElegidaSi",
"title": "Sí",
"name": "Vivienda elegida",
"additionalAttributes": "checked",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "viviendaElegidaNo",
"title": "No",
"name": "Vivienda elegida",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "Tipo de inmueble",
"fieldset": true
}
},
"id": "tipoVivienda",
"radio-group": {
"radio-group": [
{
"id": "tipoViviendaNueva",
"title": "Nuevo",
"name": "Tipo de inmueble",
"additionalAttributes": "checked",
"label": {
"text": "Nuevo",
"type": "-placeholder-m"
}
},
{
"id": "tipoViviendaSegundaMano",
"title": "Segunda mano",
"name": "Tipo de inmueble",
"label": {
"text": "2ª mano",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Importe de la vivienda"
}
},
"id": "MortgageHousePriceRangeSlider",
"range-slider": {
"id": "MortgageHousePriceRangeInput",
"sliderId": "sliderPrice",
"inputTitle": "Importe de la vivienda",
"validationAttributes": "min='100000' max='1000000' data-default='200000' step='1000'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "100.000€"
},
"legend-end": {
"text": "1.000.000€"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿Quieres reformar?",
"fieldset": true
}
},
"id": "reforma",
"radio-group": {
"radio-group": [
{
"id": "reformaSi",
"title": "Si",
"name": "Quieres reformar",
"additionalAttributes": "checked",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "reformaNo",
"title": "No",
"name": "Quieres reformar",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"field-top": {
"label": {
"text": "Importe de la reforma",
"for": "importeReforma"
}
},
"id": "DivReformaSN",
"inputTitle": "gastosMes",
"inputId": "importeReforma",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"form-list3": {
"form-list": [
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Duración de la hipoteca"
}
},
"id": "MortgageHouseDurationRangeSlider",
"range-slider": {
"id": "MortgageHouseDurationRangeInput",
"sliderId": "sliderDuracion",
"inputTitle": "Duración de la hipoteca",
"validationAttributes": "min='7' max='30' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"Id": "duracion-start",
"text": "7 años"
},
"legend-end": {
"Id": "duracion-end",
"text": "30 años"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Tipo de interés"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Tipo de interés (TIN)",
"isP": true
},
"bodycopy": {
"text": "Este es el tipo de interés es con el que vamos a calcular tu hipoteca. Puede que no sea parte de nuestra oferta comercial, te recomendamos que explores nuestra web-"
},
"link": {
"href": "https://hipotecas.com/es/nuestras-hipotecas/",
"text": "Ir a Nuestras hipotecas"
}
}
},
"range-slider": {
"id": "TINRangeSlider",
"inputId": "TINRangeSliderInput",
"sliderId": "TINsliderDuracion",
"inputTitle": "Duración de la hipoteca",
"validationAttributes": "min='1' max='8' data-default='3'",
"symbol": {
"text": "%"
},
"legend-start": {
"Id": "tin-start",
"text": "1%"
},
"legend-end": {
"Id": "tin-end",
"text": "8%"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"field-top": {
"label": {
"text": "TAE",
"for": "datoTAE"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "TAE",
"isP": true
},
"bodycopy": {
"text": "Tasa Anual Equivalente. Se calcula automáticamente. Es el coste anual de tu hipoteca e incluye el interés nominal, algunos gastos de constitución y las comisiones bancarias."
}
}
},
"id": "datoTAE",
"isDisabled": true,
"inputTitle": "dato TAE",
"inputId": "tae",
"inputValue": "-",
"disabled": true,
"symbol": {
"text": "%"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"form-list-result": {
"form-list": [
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Te financiamos"
},
"link": {
"isInline": true,
"href": "#",
"isModal": true,
"data-modal": "modalCalculadora1",
"text": "+ info"
}
},
"id": "MortgageAmountRangeSlider",
"range-slider": {
"isYellow": true,
"inputId": "MortgageAmountRangeInput",
"sliderId": "sliderImportePrestamo",
"inputTitle": "Te financiamos",
"validationAttributes": "min='80000' max='1000000' data-default='160000' step='1000'",
"symbol": {
"text": "€"
},
"legend-start": {
"Id": "importeprestamo-start",
"text": "80.000€"
},
"legend-end": {
"Id": "importeprestamo-end",
"text": "1.000.000€"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Aportación necesaria"
}
},
"range-slider": {
"id": "MortgageHouseSavingsRangeSlider",
"isYellow": true,
"inputId": "MortgageHouseSavingsRangeInput",
"sliderId": "sliderAportacion",
"inputTitle": "Aportación necesaria",
"validationAttributes": "min='20000' max='800000' data-default='40000' step='1000'",
"symbol": {
"text": "€"
},
"legend-start": {
"Id": "aportacion-start",
"text": "20.000€"
},
"legend-end": {
"Id": "aportacion-end",
"text": "800.000€"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-input": {
"field-top": {
"label": {
"text": "Importe total de gastos",
"for": "importe-Gastos"
},
"link": {
"isInline": true,
"href": "#",
"isModal": true,
"data-modal": "modalCalculadora2",
"text": "+ info"
}
},
"id": "importe-Gastos",
"isDisabled": true,
"inputTitle": "Importe Gastos",
"inputId": "importeGastos",
"inputValue": "-",
"disabled": true,
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isOnecol": true,
"calculator-form-result": {
"asterisk": true,
"field-top-cuota": {
"label": {
"text": "Tu cuota mensual sería de"
}
},
"id-capa-cuota": "Capa-cuota",
"id-cuota": "Cuota",
"extra-classes": "col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6",
"inputTitle-cuota": "Cuota",
"inputValue-cuota": "8.888,88",
"label-cuota": {
"text": "€"
},
"link-cuota": {
"href": "#MoreInfo",
"text": "ver condiciones"
},
"nota": {
"text": "Este resultado es orientativo en base a los datos que nos has aportado, no es una oferta vinculante."
}
}
}
]
},
"success": {
"title": {
"text": "Información enviada"
},
"description": {
"text": "<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>"
}
},
"submit": {
"href": "#",
"src": "https://landings.hipotecas.com/img/landing-gracias.png",
"alt": "Calcula",
"bodycopy": {
"text": "<p>Completa los campos para obtener tu resultado</p>"
},
"btn": {
"noTabindex": true,
"text": "Calcular",
"id": "bntCalcular",
"type": "button"
}
},
"features": {
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": false,
"paddingBottomLarge": false
},
"isText": true,
"isActions": true,
"isBtn": true,
"bodycopy": {
"text": "Estamos disponibles para ti, ven a conocer nuestro equipo de expertos hipotecarios. No dudes en llamarnos al 912 06 37 98 o escribirnos."
},
"link": {
"text": "Link",
"href": "#"
},
"title": {
"text": "Solicita tu hipoteca dándonos unos pocos datos más",
"isH3": true
},
"btn": {
"text": "Descubrir producto",
"href": "#",
"isSecondary": true
},
"src-posttitle-img": "https://img1.pnghut.com/23/14/11/DviwgKPhWs/signature-hand-model-book-emoji-letter.jpg",
"alt-posttitle-img": "Icon",
"isLink": false,
"isTitleL": true
},
"alert": {
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": false,
"paddingBottomLarge": false
},
"isText": true,
"link": {
"text": "Link",
"href": "#"
},
"btn": {
"text": "BTN",
"href": "#"
},
"title": {
"text": "Con los datos que nos aportas, podrías tener dificultados para pagar la cuota, te recomendamos juegues con el plazo, el precio, etc, para ajustarlo a una cuota que encaje mejor con tus necesidades.",
"isH4": true
},
"isAlert": true,
"isTitle": true,
"isActions": false,
"isLink": false,
"isBtn": false,
"src-title-img": "/dist/images/warning.png",
"alt-title-img": "Icon"
},
"more-info": "<ul class='interest-rates__legal-list'><li class= 'interest-rates__legal-item '><h2 class= 'title-l '><span class= 'title-l__prefix '>*</span>Cuota a tipo fijo</h2><div class= 'bodycopy-m '><p><b>Condiciones</b></p><p><b><span class='legalTin'>#campoTin#</span>% TIN.</b></p><p><b><span class='legalTae'>#campoTae#</span>% TAE.</b></p><p><b>Ejemplo representativo para un préstamo por importe de <span class='legalImporte'>#campoImporte#</span> y un plazo de <span class='legalPlazo'>#campoplazo#</span> años.</b></p><p><b>Las características y condiciones fundamentales de la operación serían:</b></p><p><b>- Tipo de interés nominal fijo del <span class='legalTin'>#campotin#</span>% durante los <span class='legalPlazo'>#campoplazo#</span> años.</b></p><p><b>- La TAE del préstamo es del <span class='legalTae'>#campoTae#</span>%, la cual representa el coste total que el préstamo tendrá para usted, expresado como porcentaje anual del importe total del préstamo concedido, más los costes aparejados, si ha lugar, y que corresponde, sobre una base anual, al valor actual de todos los compromisos futuros o existentes, tales como disposiciones de fondos, reembolsos y gastos, convenidos entre la Entidad y usted, según lo definido en la circular 5/2012 del Banco de España.</b></p><p><b>El cálculo de la TAE se ha realizado teniendo en cuenta que el contrato de préstamo estará vigente durante el plazo acordado y que usted cumplirá con sus obligaciones, en los términos que se establezcan en el contrato.</b></p><p><b>La TAE puede también variar en función del plazo.</b></p><p><b>Para el cálculo de la TAE, se han tenido en cuenta los siguientes costes:</b></p><p><b>1) Comisión de apertura <span class='legalComisionApertura'>#campoComisionApertura#</span>€, como resultado de la aplicación del <span class='legalPorcientoComision'>#campoPorcientoComision#</span>% sobre un importe de préstamo de <span class='legalImporte'>#campoImporte#</span>€.</b></p><p><b>2) Coste estimado de la tasación de <span class='legalCosteTasacion'>#campoCosteTasacion#€</span> sobre la garantía principal .</b></p><p><b>- Cuota mensual de <span class='legalCuotaMensual'>#campoCuotaMensual#</span> desde la cuota 1 hasta la <span class='campoCuotaEnd'>#campoCuotaEnd#</span>.<p><b>- El sistema de amortización empleado será el francés, según el cual durante toda la vida del préstamo, la cuota a pagar permanecerá constante, a excepción de la última cuota según lo explicado en el anterior apartado.</b></p><p><b>El importe total adeudado en la operación asciende a <span class='legalImporteAdeudado'>#campoImporteAdeudado#</span>€, de los que <span class='legalImporte'>#campoImporte#€</span> corresponden al capital del préstamo y <span class='legalImporteGastos'>#campoImporteGastos#€</span> por el coste total del préstamo al consumidor, el cual incluye <span class='legalInteresesAdeudado'>#campo intereses adeudado#</span>€ por intereses, <span class='legalComisionApertura'># campoComisionApertura #</span>€ por comisión de apertura, un coste estimado de la tasación de <span class='legalTasacion'>#campoTasacion#</span>€ sobre la garantía principal .</b></p><p>Este producto es un préstamo con garantía hipotecaria, por lo que los deudores responden del pago con la vivienda hipotecada y además con todos sus bienes. En caso de impago, la Entidad podrá iniciar un procedimiento judicial que puede dar lugar a la subasta del inmueble/s hipotecado/s y al posible embargo de otros bienes o ingresos, hasta el pago total del préstamo.</p><p>Esta Entidad se encuentra adherida al Código de Buenas Prácticas para la reestructuración viable de las deudas con garantía hipotecaria sobre la vivienda habitual.</p><p>Comisión por reembolso anticipado del 0% si la suma de amortizaciones parciales realizadas en los 12 últimos meses fuera inferior al 25% del capital pendiente al inicio de dicho periodo. Si el reembolso anticipado fuera mayor o igual al 25% del capital pendiente al principio de los últimos 12 meses, la comisión no podrá exceder del importe de la pérdida financiera que tenga la entidad, con el límite 2,00% durante los 10 primeros años y a partir del 11º año 1,50%, conforme a la Ley 5/2019, de 15 de marzo, reguladora de los contratos de crédito inmobiliario. Esta comisión se calculará sobre la cantidad reembolsada anticipadamente.</p><p>Este documento contiene un ejemplo representativo de un préstamo basada en unas condiciones financieras (tipo de interés fijo y comisión de apertura) establecidas en este documento exclusivamente a título de ejemplo, con el fin de mostrar de forma numérica la evolución de las cuotas en un plazo determinado y no constituye una oferta de contratación por parte de Unión de Créditos Inmobiliarios S.A., Establecimiento Financiero de Crédito.</p><p>A continuación se muestra la fórmula matemática utilizada para la determinación de la cuota mensual. Esta fórmula se aplica para el cálculo de la cuota comprensiva de intereses y amortización según el sistema de amortización francés.</p><p>Cálculo de la cuota mensual: Cuota=(CxTIN/12)/(1-(1+TIN)/12)-plazo)</p><p>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje; Plazo: número de cuotas mensuales.</p><p>Cálculo de la parte correspondiente de intereses: Intereses= CxTIN/12.</p><p>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje.</p><p>Cálculo de la parte correspondiente a amortización: la cuota menos los intereses.</p></div></li><li class='interest-rates__legal-item'><h2 class='title-l'>Fijo 30</h2><div class='bodycopy-m'><p>Condiciones:</p><p><strong>4,950% TIN.</strong></p><p><strong><span style='color: #3a3831;'>5,131</span>% <span style='text-decoration: underline;'>TAE</span>.</strong></p><p><strong>Ejemplo representativo para un préstamo por importe de 150.000,00€ y un plazo de 30 años.</strong></p><p><strong>Las características y condiciones fundamentales de la operación serían:</strong></p><p><strong>- Tipo de interés nominal fijo del 4,950% durante los 30 años.</strong></p><p><strong>- La <span style='text-decoration: underline;'>TAE</span> del préstamo es del 5,131%, la cual representa el coste total que el préstamo tendrá para usted, expresado como porcentaje anual del importe total del préstamo concedido, más los costes aparejados, si ha lugar, y que corresponde, sobre una base anual, al valor actual de todos los compromisos futuros o existentes, tales como disposiciones de fondos, reembolsos y gastos, convenidos entre la Entidad y usted, según lo definido en la circular 5/2012 del Banco de España.</strong></p><p><strong>El cálculo de la <span style='text-decoration: underline;'>TAE</span> se ha realizado teniendo en cuenta que el contrato de préstamo estará vigente durante el plazo acordado y que usted cumplirá con sus obligaciones, en los términos que se establezcan en el contrato.</strong></p><p><strong>La <span style='text-decoration: underline;'>TAE</span> puede también variar en función del plazo.</strong></p><p><strong>Para el cálculo de la <span style='text-decoration: underline;'>TAE</span>, se han tenido en cuenta los siguientes costes:</strong></p><p><strong>1) Comisión de apertura 750,00€, como resultado de la aplicación del 0,50% sobre un importe de préstamo de 150.000,00€.</strong></p><p><strong>2) Coste estimado de la tasación de 344,85€ sobre la garantía principal .</strong></p><p><strong></strong></p><p><strong></strong></p><p><strong>- Cuota mensual de 800,65€ desde la cuota 1 hasta la 359. Además tendremos una última cuota en el mes 360 de 804,70€ que ajustará la cantidad amortizada de forma que el saldo pendiente final sea de 0 euros. Esta cuota de 804,70€ se calcula como la suma del capital pendiente de la cuota 359 que son 801,39€ y los intereses a pagar de la cuota 360 que son 3,31€.</strong></p><p><strong>- El sistema de amortización empleado será el francés, según el cual durante toda la vida del préstamo, la cuota a pagar permanecerá constante, a excepción de la última cuota según lo explicado en el anterior apartado.</strong></p><p><strong>El importe total adeudado en la operación asciende a 289.332,90€, de los que 150.000,00€ corresponden al capital del préstamo y 139.332,90€ por el coste total del préstamo al consumidor, el cual incluye 138.238,05€ por intereses, 750,00€ por comisión de apertura, un coste estimado de la tasación de 344,85€ sobre la garantía principal .</strong></p><p>Este producto es un préstamo con garantía hipotecaria, por lo que los deudores responden del pago con la vivienda hipotecada y además con todos sus bienes. En caso de impago, la Entidad podrá iniciar un procedimiento judicial que puede dar lugar a la subasta del inmueble/s hipotecado/s y al posible embargo de otros bienes o ingresos, hasta el pago total del préstamo.</p><p>Esta Entidad se encuentra adherida al Código de Buenas Prácticas para la reestructuración viable de las deudas con garantía hipotecaria sobre la vivienda habitual.</p><p>Comisión por reembolso anticipado del 0% si la suma de amortizaciones parciales realizadas en los 12 últimos meses fuera inferior al 25% del capital pendiente al inicio de dicho periodo. Si el reembolso anticipado fuera mayor o igual al 25% del capital pendiente al principio de los últimos 12 meses, la comisión no podrá exceder del importe de la pérdida financiera que tenga la entidad, con el límite 2,00% durante los 10 primeros años y a partir del 11º año 1,50%, conforme a la Ley 5/2019, de 15 de marzo, reguladora de los contratos de crédito inmobiliario. Esta comisión se calculará sobre la cantidad reembolsada anticipadamente.</p><p>Este documento contiene un ejemplo representativo de un préstamo basada en unas condiciones financieras (tipo de interés fijo y comisión de apertura) establecidas en este documento exclusivamente a título de ejemplo, con el fin de mostrar de forma numérica la evolución de las cuotas en un plazo determinado y no constituye una oferta de contratación por parte de Unión de Créditos Inmobiliarios S.A., Establecimiento Financiero de Crédito.</p><p>A continuación se muestra la fórmula matemática utilizada para la determinación de la cuota mensual. Esta fórmula se aplica para el cálculo de la cuota comprensiva de intereses y amortización según el sistema de amortización francés.</p><p><em><strong>Cálculo de la cuota mensual: Cuota=(CxTIN/12)/(1-(1+TIN)/12)<sup>-plazo</sup>)</strong></em></p><p><em><strong>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje; Plazo: número de cuotas mensuales.</strong></em><br><em><strong><span style='text-decoration: underline;'>Cálculo de la parte correspondiente de intereses:</span> Intereses= CxTIN/12.</strong></em><br><em><strong>Donde: C: capital pendiente del préstamo; TIN: tipo de interés nominal anual expresado en porcentaje.</strong></em><br><em><strong><span style='text-decoration: underline;'>Cálculo de la parte correspondiente a amortización:</span> la cuota menos los intereses.</strong></em></p></div></li></ul>"
}
.calculator-form {
.entradilla{margin-bottom: 40px;}
.wrap-bloque{
padding: 40px 40px 0;
border: solid 1px var(--color-quinary);
margin-bottom:20px;
.title-with-icon{
margin-bottom: 40px;
}
@media (--viewport-ms-max) {padding-bottom: 60px;}
}
.form-btn{text-align: center;}
.results{
justify-content: center; margin-top:45px;
@media (--viewport-sm-min) {margin-top: 25px;}
.wrap-bloque{
border: 0;
background-color: var(--color-quaternary);
padding-bottom: 40px;
margin-bottom:0;
}
}
.submit{
.wrap-bloque{
border: 0;
background-color: var(--color-quaternary);
padding-bottom: 40px;
margin-bottom:0;
.tile__content{ padding-top: 0; padding-bottom: 50px;
.tile__pic{max-width: 180px; margin-bottom:0;}
}
@media (--viewport-xs-max) {padding-bottom: 0;}
}
}
.features-list__header {
margin-top: -50px;
margin-bottom: 0;
@media (--viewport-sm-max) {margin-top: -55px;}
@media (--viewport-xs-max) {margin-bottom: -20px;margin-top: -10px;}
}
.more-info{
margin-top: 40px;
}
}
Cada apartado del formulario tiene id configurable. Tiene un apartado de resultados oculto que se muestra al calcular y dos opciones de “features-list” también ocultas, que se muestran (una u otra) según el resultado. Los cálculos serealizan en front a través de un js.