<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-max-finance">
<form id="calculatorForm-max-finance">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col entradilla">
<div class="
bodycopy-m
">
¿No sabes qué vivienda puedes permitirte? Haz una simulación con nuestra Calculadora de hipotecas y descubre la máxima financiación que necesitas, qué tendrías que aportar y qué gastos necesitarías tener en cuenta.
</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="/dist/images/satisfaccion.svg" alt="descripción">
<h2 class="
title-m
title-m_color_accent-dark
">Datos personales</h2>
</div>
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="randomFormId1" 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">
<h4 class="
title-s
">Ingresos mensuales netos</h4>
<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 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">
<h4 class="
title-s
">Gastos otros préstamos</h4>
<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="/dist/images/house.svg" alt="descripción">
<h2 class="
title-m
title-m_color_accent-dark
">Datos de la vivienda</h2>
</div>
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="randomFormId1" 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-radio-group inColumn" id="usoInmueble">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Cual sera el uso de la vivienda?</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="habitual" type="radio" title="habitual" name="usoInmueble" value="Vivienda habitual" checked>
<label class="radio-label " for="habitual" id="" value="">
<span class="caption-placeholder-m">Vivienda habitual</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="segundaResidencia" type="radio" title="Segunda mano" name="usoInmueble" value="Segunda residencia">
<label class="radio-label " for="segundaResidencia" id="" value="">
<span class="caption-placeholder-m">Segunda residencia</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="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>
</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="" alt="">
</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__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:block;">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="/dist/images/hand-with-dots.svg" alt="descripción">
<h2 class="
title-m
title-m_color_accent-dark
">Resultados de tu simulación</h2>
</div>
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="randomFormId1" 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 bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Precio de la vivienda</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">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
Este es el precio de la vivienda a la que puedes acceder con nosotros.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="MortgageHousePriceRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="MortgageHousePriceRangeInput" type="text" name="" title="Importe de la vivienda" min='100000' max='1000000' data-default='200000' step='1000'>
<div class="range-slider__symbol" for="MortgageHousePriceRangeInput">
<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-input bgaccentlight">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Préstamo</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">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
Este es el importe máximo de financiación que podrías obtener para la compra de tu vivienda.
</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="MortgageAmountInput" type="text" name="" title="Mortgage Amount" value="80.000">
<div class="form-input__symbol" for="MortgageAmountInput">
<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-range-slider bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Entrada</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">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
Con los datos que has facilitado, y con carácter general, necesitarías aportar la diferencia entre el precio de la vivienda y el importe de la financiación, más gastos.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="SavingsRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="SavingsRangeInput" type="text" name="" title="Entrada" min='20000' max='800000' data-default='40000' step='1000'>
<div class="range-slider__symbol" for="SavingsRangeInput">
<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>
</ul>
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-8 col-lg-8 col-ms-mr-ml">
<div class="description-list">
<h3>
<div class="text-label-m">En total, necesitas tener ahorrado:</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy">Entrada</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">20.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Impuestos y gastos de compraventa</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">2.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="total" id=""><span class="bodycopy">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="total" id=""><span class="bodycopy">22.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
<div class="lightbox " value="calculatorLightbox3">
<div class="lightbox__trigger">
<button class="link
link_simple
" type="button" id="LnkGastos">
<span>Ver detalle de los impuestos y gastos</span>
</button>
</div>
<div class="lightbox__overlay" id="divGastos">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close" id="CloseGastos">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox3">
<h2 class="
title-l
">
Detalle de impuestos y gastos
</h2>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox3">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-9 col-lg-9 col-ms-mr-ml">
<div class="description-list">
<h3>
<div class="text-label-m">Impuestos y gastos de compraventa</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy">Notaría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">20.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Registro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">1.200 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Gestoría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">800 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Impuestos*</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">2.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="total" id=""><span class="bodycopy">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="total" id=""><span class="bodycopy">42.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
</div>
</div>
<div class="clarification">
<h3>
<div class="
text-label-s
"><span></span></div>
</h3>
<div class="text">
<div class="
bodycopy-m
">
<p>Los gastos de constitución de hipoteca serán asumidos por la Entidad.</p>
<p>* En el caso de que la compra de la vivienda sea de primera mano, al precio de compra se le aplicará el IVA y en el caso de que la compra sea de una vivienda de segunda mano, se aplicará el ITP según comunidad autónoma.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="features">
<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"><span class="title
">Solicita tu hipoteca dándonos unos pocos datos más</span>
<!-- 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>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="row calculator-form-max-finance">
<form id="calculatorForm-max-finance">
<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-max-finance__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-max-finance__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 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:block;">
<div class="wrap-bloque">
{{> @title-with-icon subtitulo3 }}
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="{{ id }}" action="#" method="post" novalidate>
{{> @calculator-form-list form-list-result }}
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-8 col-lg-8 col-ms-mr-ml">
{{> @description-list list1 }}
{{> @lightbox lightbox }}
</div>
</div>
</div>
</div>
<div id="features">
{{> @flap features }}
</div>
</div>
</form>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"entradilla": {
"text": "¿No sabes qué vivienda puedes permitirte? Haz una simulación con nuestra Calculadora de hipotecas y descubre la máxima financiación que necesitas, qué tendrías que aportar y qué gastos necesitarías tener en cuenta."
},
"subtitulo1": {
"src": "/dist/images/satisfaccion.svg",
"alt": "descripción",
"tit": {
"isH2": true,
"text": "Datos personales",
"colorAccentDark": true
}
},
"subtitulo2": {
"src": "/dist/images/house.svg",
"alt": "descripción",
"tit": {
"isH2": true,
"text": "Datos de la vivienda",
"colorAccentDark": true
}
},
"subtitulo3": {
"src": "/dist/images/hand-with-dots.svg",
"alt": "descripción",
"tit": {
"isH2": true,
"text": "Resultados de tu simulació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."
}
},
"id": "randomFormId1",
"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"
},
"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 OTROS PRÉSTAMOS",
"for": "gastosMes"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Gastos otros préstamos"
},
"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-radio-group": {
"Column": true,
"field-top": {
"fieldset": true,
"label": {
"text": "¿Cual sera el uso de la vivienda?",
"fieldset": true
}
},
"id": "usoInmueble",
"radio-group": {
"radio-group": [
{
"id": "habitual",
"title": "habitual",
"name": "usoInmueble",
"additionalAttributes": "checked",
"label": {
"text": "Vivienda habitual",
"type": "-placeholder-m"
}
},
{
"id": "segundaResidencia",
"title": "Segunda mano",
"name": "usoInmueble",
"label": {
"text": "Segunda residencia",
"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": "¿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"
}
}
}
}
]
},
"form-list-result": {
"form-list": [
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Precio de la vivienda"
},
"tooltip": {
"isFlex": true,
"bodycopy": {
"text": "Este es el precio de la vivienda a la que puedes acceder con nosotros."
}
}
},
"range-slider": {
"id": "MortgageHousePriceRangeSlider",
"inputId": "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-input": {
"isBGAccentLight": true,
"id": "MortgageAmount",
"field-top": {
"label": {
"text": "Préstamo"
},
"tooltip": {
"isFlex": true,
"bodycopy": {
"text": "Este es el importe máximo de financiación que podrías obtener para la compra de tu vivienda."
}
}
},
"inputValue": "80.000",
"inputTitle": "Mortgage Amount",
"inputId": "MortgageAmountInput",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"isThreecol": true,
"form-range-slider": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Entrada"
},
"tooltip": {
"isFlex": true,
"bodycopy": {
"text": "Con los datos que has facilitado, y con carácter general, necesitarías aportar la diferencia entre el precio de la vivienda y el importe de la financiación, más gastos."
}
}
},
"range-slider": {
"id": "SavingsRangeSlider",
"inputId": "SavingsRangeInput",
"sliderId": "sliderAportacion",
"inputTitle": "Entrada",
"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€"
}
}
}
}
]
},
"list1": {
"titulo": {
"text": "En total, necesitas tener ahorrado:"
},
"row": [
{
"item": {
"text": "Entrada"
},
"description": {
"text": "20.000 €"
}
},
{
"item": {
"text": "Impuestos y gastos de compraventa"
},
"description": {
"text": "2.000 €"
}
},
{
"extra-classes-dt": "total",
"extra-classes-dd": "total",
"item": {
"text": "Total",
"strong": true
},
"description": {
"text": "22.000 €",
"strong": true
}
}
]
},
"lightbox": {
"id": "divGastos",
"id-close": "CloseGastos",
"trigger": {
"btnType": "button",
"text": "Ver detalle de los impuestos y gastos",
"id": "LnkGastos"
},
"title": {
"text": "Detalle de impuestos y gastos"
},
"list1": {
"titulo": {
"text": "Impuestos y gastos de compraventa"
},
"row": [
{
"item": {
"text": "Notaría"
},
"description": {
"id": "DivNotaria",
"text": "20.000 €",
"strong": true
}
},
{
"item": {
"text": "Registro"
},
"description": {
"id": "DivRegistro",
"text": "1.200 €",
"strong": true
}
},
{
"item": {
"text": "Gestoría"
},
"description": {
"id": "DivGestoria",
"text": "800 €",
"strong": true
}
},
{
"item": {
"text": "Impuestos*"
},
"description": {
"id": "DivImpuestos",
"text": "2.000 €",
"strong": true
}
},
{
"extra-classes-dt": "total",
"extra-classes-dd": "total",
"item": {
"text": "Total",
"strong": true
},
"description": {
"id": "DivTotalImporte",
"text": "42.000 €",
"strong": true
}
}
]
},
"clarification": {
"texto": {
"text": "<p>Los gastos de constitución de hipoteca serán asumidos por la Entidad.</p><p>* En el caso de que la compra de la vivienda sea de primera mano, al precio de compra se le aplicará el IVA y en el caso de que la compra sea de una vivienda de segunda mano, se aplicará el ITP según comunidad autónoma.</p>"
}
},
"calculatorLightbox3": true
},
"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": {
"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"
},
"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
},
"isHipotecas": true
}
.calculator-form-max-finance {
.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;
.form-list{margin-bottom: 50px;}
}
}
.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;
}
.description-list + .lightbox{
margin-top: 20px;
margin-bottom: 10px;
.link{
color: var(--color-accent-dark);
text-decoration:underline;
span{
display:inline;
}
}
}
}
No notes defined.