<section class="splitter splitter_bg-color_white splitter_padding_top_small splitter_padding_bottom_small ">
<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="calculator-form-with-result" id="community-calculator-form">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col col-sm-offset-1 col-lg-offset-1 col-sm-offset-right-1 col-lg-offset-right-1">
<h2 class="
title-l
">
Calculator Form with result
</h2>
<form id="community-calculator-form">
<div class="block">
<ul class="form-list form-list-different-columns row">
<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="form-range-slider" id="moneyRequestRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuánto DINERO NECESITAS?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipCuantoNecesitas" class="tooltip ">
<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
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="moneyRequestRangeSliderInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="f1_amount" title="Cuanto necesitas" min='10000' max='3000000' data-default='500000'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
€
</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
">
10.000 €
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
3.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-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuántas viviendas tiene el edificio?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input integer" id="cuantasViviendas" type="text" name="f2_homesInBuilding" title="" value="50" data-min='2' data-max='500' data-set='onlyNumbers' pattern='[0-9]+' data-validate='max-min'>
<div class="form-input__symbol" for="cuantasViviendas">
<div class="bodycopy-xs
">
VIVIENDAS
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">No puede ser superior a 500 viviendas</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
No puede ser superior a 500 viviendas
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿En cuántos años quieres devolverlo?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input integer" id="anhosDevolver" type="text" name="f3_returnPeriod" title="" value="10" data-set='onlyNumbers' data-min='2' data-max='10' pattern='[0-9]+' data-validate='max-min'>
<div class="form-input__symbol" for="anhosDevolver">
<div class="bodycopy-xs
">
AÑOS
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">No puede ser superior a 10 años</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
No puede ser superior a 10 años
</div>
</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="form-radio-group " id="carenciaCapital">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">CARENCIA DE CAPITAL</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipCarenciaCapital" 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
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="carenciaCapitalNo" type="radio" title="No" name="f4_gracePeriod" value="NO" checked>
<label class="radio-label " for="carenciaCapitalNo" id="" value="">
<span class="caption-placeholder-m">NO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="carenciaCapitalUnAnho" type="radio" title="Durante 1 año" name="f4_gracePeriod" value="Durante 1 año">
<label class="radio-label " for="carenciaCapitalUnAnho" id="" value="">
<span class="caption-placeholder-m">Durante 1 año</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="carenciaCapitalDosAnhos" type="radio" title="Durante 2 años" name="f4_gracePeriod" value="Durante 2 años">
<label class="radio-label " for="carenciaCapitalDosAnhos" id="" value="">
<span class="caption-placeholder-m">Durante 2 años</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Choose one of the options, please*</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="form-radio-group " id="cancelacionAnticipada">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Tienes previsto recibir una subvención y realizar una amortización parcial?</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="cancelacionAnticipadaNo" type="radio" title="No" name="f5_cancellation" value="NO" checked>
<label class="radio-label " for="cancelacionAnticipadaNo" id="" value="">
<span class="caption-placeholder-m">NO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="cancelacionAnticipadaYes" type="radio" title="Yes" name="f5_cancellation" value="SI">
<label class="radio-label " for="cancelacionAnticipadaYes" id="" value="">
<span class="caption-placeholder-m">SI</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Choose one of the options, please*</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
hidden
">
<div class="prelabel">
<label class="label-m" for="">Fecha de la amortización anticipada</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-fecha-amortizacion" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
hidden
required">
<div class="form-select " id="mes">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Mes</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option"></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="mesId1" type="radio" title="Enero" name="Mes" value="01">
<label class="access-select__option access-select__label" for="mesId1">
Enero
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId2" type="radio" title="Febrero" name="Mes" value="02">
<label class="access-select__option access-select__label" for="mesId2">
Febrero
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId3" type="radio" title="Marzo" name="Mes" value="03">
<label class="access-select__option access-select__label" for="mesId3">
Marzo
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId4" type="radio" title="Abril" name="Mes" value="04">
<label class="access-select__option access-select__label" for="mesId4">
Abril
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId5" type="radio" title="Mayo" name="Mes" value="05">
<label class="access-select__option access-select__label" for="mesId5">
Mayo
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId6" type="radio" title="Junio" name="Mes" value="06">
<label class="access-select__option access-select__label" for="mesId6">
Junio
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId7" type="radio" title="Julio" name="Mes" value="07">
<label class="access-select__option access-select__label" for="mesId7">
Julio
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId8" type="radio" title="Agosto" name="Mes" value="08">
<label class="access-select__option access-select__label" for="mesId8">
Agosto
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId9" type="radio" title="Septiembre" name="Mes" value="09">
<label class="access-select__option access-select__label" for="mesId9">
Septiembre
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId10" type="radio" title="Octubre" name="Mes" value="10">
<label class="access-select__option access-select__label" for="mesId10">
Octubre
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId11" type="radio" title="Noviembre" name="Mes" value="11">
<label class="access-select__option access-select__label" for="mesId11">
Noviembre
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="mesId12" type="radio" title="Diciembre" name="Mes" value="12">
<label class="access-select__option access-select__label" for="mesId12">
Diciembre
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Por favor, selecciona un mes</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
hidden
required">
<div class="form-select " id="anho">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Año</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option"></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="anhoId1" type="radio" title="2024" name="Año" value="2024">
<label class="access-select__option access-select__label" for="anhoId1">
2024
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId2" type="radio" title="2025" name="Año" value="2025">
<label class="access-select__option access-select__label" for="anhoId2">
2025
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId3" type="radio" title="2026" name="Año" value="2026">
<label class="access-select__option access-select__label" for="anhoId3">
2026
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId4" type="radio" title="2027" name="Año" value="2027">
<label class="access-select__option access-select__label" for="anhoId4">
2027
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId5" type="radio" title="2028" name="Año" value="2028">
<label class="access-select__option access-select__label" for="anhoId5">
2028
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId6" type="radio" title="2029" name="Año" value="2029">
<label class="access-select__option access-select__label" for="anhoId6">
2029
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId7" type="radio" title="2030" name="Año" value="2030">
<label class="access-select__option access-select__label" for="anhoId7">
2030
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId8" type="radio" title="2031" name="Año" value="2031">
<label class="access-select__option access-select__label" for="anhoId8">
2031
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId9" type="radio" title="2032" name="Año" value="2032">
<label class="access-select__option access-select__label" for="anhoId9">
2032
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="anhoId10" type="radio" title="2033" name="Año" value="2033">
<label class="access-select__option access-select__label" for="anhoId10">
2033
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Por favor, selecciona un mes</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
hidden
required">
<div class="form-range-slider" id="cancelacionAnticipadaRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Importe de la cancelación anticipada</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="cancelacionAnticipadaRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="f5b_cancellationAmount" title="Importe de la cancelación anticipada" min='0' max='3000000' data-default='140000' disabled='true'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
€
</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
">
0 €
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
3.000.000 €
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col col-sm-offset-right-1 col-lg-offset-right-1">
<div class="card-result">
<div class="card-result__title">
<h2 class="
title-l
">
Tu cuota mensual
</h2>
</div>
<ul class="items">
<li class="card-result__item hidden" id="inicial">
<div class="title-with-tooltip">
<p id="resultado-cuota-inicial-title" class="
title-s
"></p>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-inicial-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-inicial-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
<li class="card-result__item hidden" id="periodo-gracia">
<div class="title-with-tooltip">
<p id="resultado-cuota-periodo-gracia-title" class="
title-s
">Los XX primeros meses durante el período de carencia</p>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-title-resultado" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-periodo-gracia-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-periodo-gracia-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
<li class="card-result__item hidden" id="resto-periodo-gracia">
<div class="title-with-tooltip">
<p id="resultado-cuota-resto-periodo-gracia-title" class="
title-s
">Los próximos XX meses hasta realizar la amortización anticipada</p>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-title-resultado2" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-resto-periodo-gracia-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-resto-periodo-gracia-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
<li class="card-result__item hidden" id="resto-amortizacion">
<div class="title-with-tooltip">
<p id="resultado-cuota-resto-title" class="
title-s
">El resto del período tras la amortización anticipada</p>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-title-resultado3" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-resto-amortizacion-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-resto-amortizacion-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result__taetin">
<li class="tae">
<ul>
<li>
<div class="
bodycopy-m
">
TAE
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tae" 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
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<p id="tae-cifra" class="
title-xl
">4,85%</p>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">TIN</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" 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
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="tin-cifra">
4,75%
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result__additional">
<li>
<ul>
<li><label class="label-m" for="">Comisión de apertura financiada (1%)</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-comision-apertura" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="comision-apertura-cifra">
2.000€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">Gastos de formalización</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-gastos-formalizacion" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="gastos-formalizacion-cifra">
1.000,00€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">IMPORTE TOTAL FINANCIADO</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-gastos-formalizacion" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="total-financiado-cifra">
4.500€
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result__additional2">
<li><label class="label-m" for="">OTRAS COMISIONES</label>
</li>
<li>
<ul>
<li><label class="label-m" for="">comisión de amortización</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-comision-amortizacion" 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
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="comision-amortizacion-cifra">
dsdsasds
</div>
</li>
</ul>
</li>
</ul>
<div class="wrap-btn">
<a class="btn
" href="https://uci.com/es/solicita-tu-hipoteca/" id="">
Solicita tu préstamo
</a>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Descargar tu informe en PDF</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row conditions">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="
bodycopy-s
">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="calculator-form-with-result" {{#if id}}id="{{id}}" {{/if}}>
<div class="row">
<div
class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col col-sm-offset-1 col-lg-offset-1 col-sm-offset-right-1 col-lg-offset-right-1">
{{#if title}}
{{> @title-l title }}
{{/if}}
<form id="{{id}}">
{{#if steps-nav__list}}
{{> @steps-nav__list steps-nav__list }}
{{/if}}
{{#each block}}
<div class="block">
{{#if subtitle}}
<div class="subtitle">
{{#if icon-subtitle}}
{{> @icon icon-subtitle }}
{{/if}}
{{> @title subtitle }}
</div>
{{/if}}
{{> @form-list-different-columns form-list-calculator }}
</div>
{{/each}}
</form>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col col-sm-offset-right-1 col-lg-offset-right-1">
{{#if isMinimos}}
{{ render '@card-result--minimos'}}
{{else if isMaximos}}
{{ render '@card-result--maximos'}}
{{else if isError}}
{{ render '@card-result--error'}}
{{else if isCuotaMaxFinanciacion}}
{{ render '@card-result-payment'}}
{{else if isCuotaMaxFinanciacionScroll}}
{{ render '@card-result-payment--scroll'}}
{{else if isCuotaPT}}
{{ render '@card-result-payment-single'}}
{{else if isCuotaPTScroll}}
{{ render '@card-result-payment-single--scroll'}}
{{else}}
{{ render '@card-result'}}
{{/if}}
</div>
</div>
<div class="row conditions">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
{{> @bodycopy-s condiciones }}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"id": "community-calculator-form",
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopSmall": true,
"paddingBottomSmall": true
},
"block": [
{
"form-list-calculator": {
"form-list": [
{
"isRequired": true,
"onecolumn": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "¿Cuánto DINERO NECESITAS?"
},
"tooltip": {
"id": "tooltipCuantoNecesitas",
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "moneyRequestRangeSlider",
"range-slider": {
"id": "moneyRequestRangeSliderInput",
"name": "f1_amount",
"inputTitle": "Cuanto necesitas",
"validationAttributes": "min='10000' max='3000000' data-default='500000'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "10.000 €"
},
"legend-end": {
"text": "3.000.000 €"
}
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "¿Cuántas viviendas tiene el edificio?"
}
},
"inputId": "cuantasViviendas",
"inputValue": "50",
"validationAttributes": "data-min='2' data-max='500' data-set='onlyNumbers' pattern='[0-9]+' data-validate='max-min'",
"name": "f2_homesInBuilding",
"extraClasses": "integer",
"symbol": {
"text": "VIVIENDAS"
},
"field-bottom": {
"error-message": {
"text": "No puede ser superior a 500 viviendas"
},
"helper-text": {
"text": "No puede ser superior a 500 viviendas"
}
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "¿En cuántos años quieres devolverlo?"
}
},
"inputId": "anhosDevolver",
"name": "f3_returnPeriod",
"validationAttributes": "data-set='onlyNumbers' data-min='2' data-max='10' pattern='[0-9]+' data-validate='max-min'",
"inputValue": "10",
"symbol": {
"text": "AÑOS"
},
"extraClasses": "integer",
"field-bottom": {
"helper-text": {
"text": "No puede ser superior a 10 años"
},
"error-message": {
"text": "No puede ser superior a 10 años"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "CARENCIA DE CAPITAL"
},
"tooltip": {
"isFlex": true,
"id": "tooltipCarenciaCapital",
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "carenciaCapital",
"radio-group": {
"radio-group": [
{
"id": "carenciaCapitalNo",
"title": "No",
"name": "f4_gracePeriod",
"additionalAttributes": "checked",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
},
{
"id": "carenciaCapitalUnAnho",
"title": "Durante 1 año",
"name": "f4_gracePeriod",
"label": {
"text": "Durante 1 año",
"type": "-placeholder-m"
}
},
{
"id": "carenciaCapitalDosAnhos",
"title": "Durante 2 años",
"name": "f4_gracePeriod",
"label": {
"text": "Durante 2 años",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "¿Tienes previsto recibir una subvención y realizar una amortización parcial?"
}
},
"id": "cancelacionAnticipada",
"radio-group": {
"radio-group": [
{
"id": "cancelacionAnticipadaNo",
"title": "No",
"name": "f5_cancellation",
"additionalAttributes": "checked",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
},
{
"id": "cancelacionAnticipadaYes",
"title": "Yes",
"name": "f5_cancellation",
"label": {
"text": "SI",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"onecolumn": true,
"isHidden": true,
"label-m": {
"text": "Fecha de la amortización anticipada"
},
"tooltip": {
"id": "tooltip-fecha-amortizacion",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
}
},
{
"twocolumns": true,
"isRequired": true,
"isHidden": true,
"form-select": {
"field-top": {
"label": {
"text": "Mes"
}
},
"id": "mes",
"select": {
"option": [
{
"id": "mesId1",
"select-name": "Mes",
"value": "01",
"text": "Enero"
},
{
"id": "mesId2",
"select-name": "Mes",
"value": "02",
"text": "Febrero"
},
{
"id": "mesId3",
"select-name": "Mes",
"value": "03",
"text": "Marzo"
},
{
"id": "mesId4",
"select-name": "Mes",
"value": "04",
"text": "Abril"
},
{
"id": "mesId5",
"select-name": "Mes",
"value": "05",
"text": "Mayo"
},
{
"id": "mesId6",
"select-name": "Mes",
"value": "06",
"text": "Junio"
},
{
"id": "mesId7",
"select-name": "Mes",
"value": "07",
"text": "Julio"
},
{
"id": "mesId8",
"select-name": "Mes",
"value": "08",
"text": "Agosto"
},
{
"id": "mesId9",
"select-name": "Mes",
"value": "09",
"text": "Septiembre"
},
{
"id": "mesId10",
"select-name": "Mes",
"value": "10",
"text": "Octubre"
},
{
"id": "mesId11",
"select-name": "Mes",
"value": "11",
"text": "Noviembre"
},
{
"id": "mesId12",
"select-name": "Mes",
"value": "12",
"text": "Diciembre"
}
]
},
"field-bottom": {
"error-message": {
"text": "Por favor, selecciona un mes"
}
}
}
},
{
"twocolumns": true,
"isRequired": true,
"isHidden": true,
"form-select": {
"field-top": {
"label": {
"text": "Año"
}
},
"id": "anho",
"select": {
"option": [
{
"id": "anhoId1",
"select-name": "Año",
"text": "2024",
"value": "2024"
},
{
"id": "anhoId2",
"select-name": "Año",
"text": "2025",
"value": "2025"
},
{
"id": "anhoId3",
"select-name": "Año",
"text": "2026",
"value": "2026"
},
{
"id": "anhoId4",
"select-name": "Año",
"text": "2027",
"value": "2027"
},
{
"id": "anhoId5",
"select-name": "Año",
"text": "2028",
"value": "2028"
},
{
"id": "anhoId6",
"select-name": "Año",
"text": "2029",
"value": "2029"
},
{
"id": "anhoId7",
"select-name": "Año",
"text": "2030",
"value": "2030"
},
{
"id": "anhoId8",
"select-name": "Año",
"text": "2031",
"value": "2031"
},
{
"id": "anhoId9",
"select-name": "Año",
"text": "2032",
"value": "2032"
},
{
"id": "anhoId10",
"select-name": "Año",
"text": "2033",
"value": "2033"
}
]
},
"field-bottom": {
"error-message": {
"text": "Por favor, selecciona un mes"
}
}
}
},
{
"onecolumn": true,
"isHidden": true,
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Importe de la cancelación anticipada"
}
},
"id": "cancelacionAnticipadaRangeSlider",
"range-slider": {
"id": "cancelacionAnticipadaRangeInput",
"inputTitle": "Importe de la cancelación anticipada",
"validationAttributes": "min='0' max='3000000' data-default='140000' disabled='true'",
"name": "f5b_cancellationAmount",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "0 €"
},
"legend-end": {
"text": "3.000.000 €"
}
}
}
}
]
}
}
],
"condiciones": {
"text": ""
},
"title": {
"text": "Calculator Form with result"
}
}
.calculator-form-with-result {
.conditions {
margin-top: 40px;
}
.steps-nav__list {
display: none;
@media (--viewport-ms-max) {
display: block;
position: fixed;
z-index: 13;
background-color: var(--color-background);
box-shadow: 0px 10px 5px 0px #0000000d;
width: 100%;
padding: 16px 20px 69px; /*aumentamos padding bottom para tapar los botones del header en scroll (si no el tamaño era 15px 20px 55px (CA.R.)) */
margin: 0 -31px 32px;
top: 0;
left: 31px;
ul {
.steps-nav__list-item.active {
.steps-nav__list-item-step {
.text {
display: block;
position: absolute;
top: 80px;
left: 20px;
}
}
}
}
}
@media (--viewport-xs-max) {
left: 20px;
margin: 0 -20px 32px;
}
&.no-text {
@media (--viewport-ms-max) {
padding-bottom: 16px;
}
}
}
.block {
margin-bottom: 60px;
/* se suma a los 20px que todos los campos tienen debajo (CA. R.) */
&:last-child {
margin-bottom: 0;
}
.subtitle {
display: flex;
flex-direction: column;
gap: 24px; /* Visto en CYR y añadido en general para unificar (CA.R.)*/
margin-bottom: 32px;
[class*='icon-54'] {
width: 54px;
height: 54px;
} /* Modificado para que no afecte a CYR que lo lleva a 56 que es el tamaño que marcan las Foundations (CA.R.)*/
}
.form-list {
.prelabel {
.title-s {
color: var(--color-text-accent-bold);
}
}
.alert.inline .alert__wrap {
margin: 30px 0;
}
}
}
@media (--viewport-ms-max) {
form {
margin-bottom: 40px;
}
}
@media (--viewport-xs-max) {
.card-result {
margin: 0 -20px;
&.swiper-slide {
margin: 0;
}
}
}
#month {
text-transform: capitalize;
}
.prelabel {
display: flex;
justify-items: flex-start;
align-items: flex-end;
.tooltip {
margin-bottom: -45px;
margin-left: -25px;
}
}
.card-result-swiper.scroll {
@media (--viewport-ms-max) {
margin: 0 -20px;
}
}
/* Para ajustar alturas de línea de la card dentro del componente */
.card-result-payment-single {
.item {
.card-result-payment-single__item-number li .bodycopy-l{
top: -4px;
@media (--viewport-sm-max) {
top: -3px;
}
@media (--viewport-xs-max) {
top: -2px;
}
}
ul.breakdown {
li {
.breakdown-text {
.bodycopy-m {
margin-top: 5px;
text-align: left;
}
.tooltip{
top:11px;
}
@media (--viewport-sm-max) {
.bodycopy-m {
margin-top: 3px;
}
.tooltip{
top:9px;
}
}
@media (--viewport-xs-max) {
.bodycopy-m {
margin-top: 0;
}
.tooltip{
top:6px;
}
}
}
.title-m{
white-space: nowrap;
}
}
}
}
}
/* FIN Para ajustar alturas de línea de la card dentro del componente */
}
No notes defined.