<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">
<form id="community-calculator-form">
<div class="steps-nav__list sticky sticky no-text">
<ul>
<li class="steps-nav__list-item active " data-index="01">
<span class="steps-nav__list-item-step">
<span class="state">
</span>
<span class="sequence">01</span>
</span>
</li>
<li class="steps-nav__list-item " data-index="02">
<span class="steps-nav__list-item-step">
<span class="state">
</span>
<span class="sequence">02</span>
</span>
</li>
<li class="steps-nav__list-item " data-index="03">
<span class="steps-nav__list-item-step">
<span class="state">
</span>
<span class="sequence">03</span>
</span>
</li>
</ul>
</div>
<div class="block">
<div class="subtitle">
<span class="title-m
title_color_accent">1/3 Sobre si</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<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-radio-group " id="proponentes">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Nº de Proponentes</fieldset>
<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
">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="proponentes1" type="radio" title="proponentes1Si" name="proponentes" value="1 proponente" checked>
<label class="radio-label " for="proponentes1" id="" value="">
<span class="caption-placeholder-M">1 proponente</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="proponentes2" type="radio" title="proponentes2" name="proponentes" value="2 proponentes">
<label class="radio-label " for="proponentes2" id="" value="">
<span class="caption-placeholder-M">2 proponentes</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-input">
<div class="field-top form-list__tooltip-label_option_2">
<label class="label-m" for="Edad">Idade do 1º proponente</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
">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="field-top form-list__tooltip-label_default">
<label class="label-m" for="Edad">Idade</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
">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="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Edad" value="30">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
ANOS
</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="Edad2">Idade do 2º proponente</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
">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="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Edad2" value="30">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
ANOS
</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="subtitle">
<span class="title-m
title_color_accent">2/3 Sobre o financiamento</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<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-select form-select-distinguisher_finalidade" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="finalidade">Finalidade</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
">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="access-select " id="finalidade">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="finalidade">
<div class="access-select__option access-select__chosen-option">Selecciona</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="finalidade_1" type="radio" title="Comprar casa" name="finalidade" value="">
<label class="access-select__option access-select__label" for="finalidade_1">
Comprar casa
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="finalidade_2" type="radio" title="Comprar casa e fazer obras" name="finalidade" value="">
<label class="access-select__option access-select__label" for="finalidade_2">
Comprar casa e fazer obras
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="finalidade_3" type="radio" title="Construir casa" name="finalidade" value="">
<label class="access-select__option access-select__label" for="finalidade_3">
Construir casa
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="finalidade_4" type="radio" title="Transferência de crédito habitação" name="finalidade" value="">
<label class="access-select__option access-select__label" for="finalidade_4">
Transferência de crédito habitação
</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="valor">Valor de compra</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
">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="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Valor" value="150.000">
<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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="capital">Capital próprio</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
">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="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="capital" value="30.000">
<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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Mínimo 10% do valor de compra
</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="taxa-juro">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Taxa de Juro</fieldset>
<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
">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="variavel" type="radio" title="variavel" name="taxa-juro" value="Variável">
<label class="radio-label " for="variavel" id="" value="">
<span class="caption-placeholder-M">Variável</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="mista" type="radio" title="mista" name="taxa-juro" value="Mista" checked>
<label class="radio-label " for="mista" id="" value="">
<span class="caption-placeholder-M">Mista</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="fixa" type="radio" title="fixa" name="taxa-juro" value="Fixa">
<label class="radio-label " for="fixa" id="" value="">
<span class="caption-placeholder-M">Fixa</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-range-slider" id="MortgageHouseDurationRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prazo</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
">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="MortgageHouseDurationRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="prazo" title="prazo" min='7' max='35' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
anos
</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
">
7 anos
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
35 anos
</div>
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Put a correct answer, please*</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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
">
<div class="alert inline">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="alert__wrap not-informative">
<div class="alert__icon">
<svg class="icon icon-alert-info icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#alert-info"></use>
</svg>
</div>
<div class="alert__content">
<div class="
bodycopy-s
">
Prazo de empréstimo ajustado ao tipo de taxa seleccionado
</div>
</div>
</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-select form-select-distinguisher_taxa-mista" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="taxa-mista">Taxa mista</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
">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="access-select " id="taxa-mista">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="taxa-mista">
<div class="access-select__option access-select__chosen-option">Selecciona</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="taxa-mista1" type="radio" title="5 anos" name="taxa-mista" value="">
<label class="access-select__option access-select__label" for="taxa-mista1">
5 anos
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="taxa-mista2" type="radio" title="10 anos" name="taxa-mista" value="">
<label class="access-select__option access-select__label" for="taxa-mista2">
10 anos
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="taxa-mista3" type="radio" title="15 anos" name="taxa-mista" value="">
<label class="access-select__option access-select__label" for="taxa-mista3">
15 anos
</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="subtitle">
<span class="title-m
title_color_accent">3/3 Sobre habitação</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<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-radio-group " id="imovelDecidido">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Já tem imóvel decidido?</fieldset>
<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
">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="imovelDecididoSi" type="radio" title="imovelDecididoSi" name="imovelDecidido" value="Si" checked>
<label class="radio-label " for="imovelDecididoSi" id="" value="">
<span class="caption-placeholder-M">Si</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="imovelDecididoNo" type="radio" title="imovelDecididoNo" name="imovelDecidido" value="No">
<label class="radio-label " for="imovelDecididoNo" 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">Choose one of the options, please*</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-select form-select-distinguisher_localizacion" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="localizacion">Localização do Imóvel</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
">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="access-select " id="localizacion">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="localizacion">
<div class="access-select__option access-select__chosen-option">Selecciona</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="lisboa" type="radio" title="lisboa" name="lisboa" value="">
<label class="access-select__option access-select__label" for="lisboa">
lisboa
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="otro" type="radio" title="otro" name="otro" value="">
<label class="access-select__option access-select__label" for="otro">
otro
</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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="destino">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Destino da Habitação</fieldset>
<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
">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="destino1" type="radio" title="destino1" name="destino" value="Habitação Principal" checked>
<label class="radio-label " for="destino1" id="" value="">
<span class="caption-placeholder-M">Habitação Principal</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="destino2" type="radio" title="destino2" name="destino" value="Habitação Secundária">
<label class="radio-label " for="destino2" id="" value="">
<span class="caption-placeholder-M">Habitação Secundária</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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="tipo">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Tipo de Imóvel</fieldset>
<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
">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="tipo1" type="radio" title="tipo1" name="tipo" value="Apartamento" checked>
<label class="radio-label " for="tipo1" id="" value="">
<span class="caption-placeholder-M">Apartamento</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipo2" type="radio" title="tipo2" name="tipo" value="Moradia">
<label class="radio-label " for="tipo2" id="" value="">
<span class="caption-placeholder-M">Moradia</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</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-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Ano de construção</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
">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> <input class="input
input-distinguisher_ano-construcao
" id="ano-construcao" type="text" name="" title="ano-construcao" autocomplete="" placeholder="1990" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Put a correct answer, please*</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text (optional)
</div>
</div>
</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-payment-single">
<div class="card-result-payment-single__inner">
<!---->
<div class="card-result-payment-single__head">
<div class="card-result-payment-single__title">
<span class="title-l
">Hipoteca Mixta</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">Prestação Fixa durante 10 anos e indexada à Euribor 6 meses nos anos seguintes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="item">
<div class="pretitle-payment"><span class="bodycopy-m">Los 10 primeros años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment-single__item-number">
<li><span class="title-l
title_color_dark
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li><span class="bodycopy-l">€/mês</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
<ul class="breakdown">
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAN
</div>
<!-- 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
">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>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAEG
</div>
<!-- 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
">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>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Empréstito
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Prazo
</div>
</div>
<span class="title-m
title_color_dark
">XX anos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Pedir empréstimo
</a>
<a class="btn
btn_secondary
" href="#" id="">
Ver simulaçao completa e FINE
<svg class="icon icon-16_chevron-down icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-down"></use>
</svg>
</a>
</div>
<div class="wrap-fine">
<ul class="card-result-payment-single__additional">
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">Euribor 6 meses</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Valor do Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Spread</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro vida mensal</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro imóvel semestral</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Comissoes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Despesas e Impostos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- 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
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
</ul>
<div class="wrap-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>FINE Simulaçao</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>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Resumo FINE Simulaçao</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 class="link-comparison">
<a class="link
link_inline
link_has-icon link_has-icon_after
" href="#">
<span>Compare todas as taxas de juro</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
<div class="wrap-alert">
<div class="alert inline">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="alert__wrap not-error">
<div class="alert__icon">
<svg class="icon icon-alert-error icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#alert-error"></use>
</svg>
</div>
<div class="alert__content">
<div class="
bodycopy-s
">
<p>Mensaje de error variable (ejemplo) Reduza o valor do empréstimmo ou simule diferentes opçoe de prazo e taxa.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="alert inline">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="alert__wrap not-success">
<div class="alert__icon">
<svg class="icon icon-alert-success icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#alert-success"></use>
</svg>
</div>
<div class="alert__content">
<div class="
bodycopy-s
">
<p>Mensaje de error variable (ejemplo) Reduza o valor do empréstimmo ou simule diferentes opçoe de prazo e taxa.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="alert inline">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="alert__wrap not-informative">
<div class="alert__icon">
<svg class="icon icon-alert-info icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#alert-info"></use>
</svg>
</div>
<div class="alert__content">
<div class="
bodycopy-s
">
<p>Mensaje de error variable (ejemplo) Reduza o valor do empréstimmo ou simule diferentes opçoe de prazo e taxa.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="legal-text">
<span class="bodycopy-s">A informação introduzida é da exclusiva responsabilidade do utilizador. As condições apresentadas são definidas de acordo com os dados introduzidos e em função do risco da Operação e do Cliente. Esta simulação não constitui uma garantia de concessão de crédito nem constitui uma oferta de condições financeiras. Para uma qualificação financeira ou uma simulação de Crédito Habitação mais personalizada contacte-nos ou visite uma das nossas agências.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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": [
{
"subtitle": {
"text": "1/3 Sobre si",
"type": "-m",
"colorAccent": true
},
"form-list-calculator": {
"form-list": [
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "Nº de Proponentes"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "proponentes",
"radio-group": {
"radio-group": [
{
"id": "proponentes1",
"title": "proponentes1Si",
"name": "proponentes",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "1 proponente"
}
},
{
"id": "proponentes2",
"title": "proponentes2",
"name": "proponentes",
"label": {
"type": "-placeholder-M",
"text": "2 proponentes"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Idade",
"for": "Edad"
},
"label-option-2": {
"text": "Idade do 1º proponente",
"for": "Edad"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"inputTitle": "Edad",
"idComponent": "Edad",
"inputValue": "30",
"symbol": {
"text": "ANOS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-input": {
"hidden": true,
"field-top": {
"label": {
"text": "Idade do 2º proponente",
"for": "Edad2"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"inputTitle": "Edad2",
"idComponent": "Edad2",
"inputValue": "30",
"symbol": {
"text": "ANOS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
}
]
}
},
{
"subtitle": {
"text": "2/3 Sobre o financiamento",
"type": "-m",
"colorAccent": true
},
"form-list-calculator": {
"form-list": [
{
"onecolumn": "true",
"isRequired": true,
"form-select": {
"distinguisher": "finalidade",
"field-top": {
"label": {
"text": "Finalidade",
"for": "finalidade"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "finalidade",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "finalidade_1",
"select-name": "finalidade",
"text": "Comprar casa"
},
{
"id": "finalidade_2",
"select-name": "finalidade",
"text": "Comprar casa e fazer obras"
},
{
"id": "finalidade_3",
"select-name": "finalidade",
"text": "Construir casa"
},
{
"id": "finalidade_4",
"select-name": "finalidade",
"text": "Transferência de crédito habitação"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Valor de compra",
"for": "valor"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"inputTitle": "Valor",
"idComponent": "Valor",
"inputValue": "150.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Capital próprio",
"for": "capital"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"inputTitle": "capital",
"idComponent": "capital",
"inputValue": "30.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Mínimo 10% do valor de compra"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "Taxa de Juro"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "taxa-juro",
"radio-group": {
"radio-group": [
{
"id": "variavel",
"title": "variavel",
"name": "taxa-juro",
"label": {
"type": "-placeholder-M",
"text": "Variável"
}
},
{
"id": "mista",
"title": "mista",
"name": "taxa-juro",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Mista"
}
},
{
"id": "fixa",
"title": "fixa",
"name": "taxa-juro",
"label": {
"type": "-placeholder-M",
"text": "Fixa"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Prazo"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "MortgageHouseDurationRangeSlider",
"range-slider": {
"id": "MortgageHouseDurationRangeSlider",
"name": "prazo",
"inputTitle": "prazo",
"validationAttributes": "min='7' max='35' data-default='30'",
"symbol": {
"text": "anos"
},
"legend-start": {
"text": "7 anos"
},
"legend-end": {
"text": "35 anos"
}
},
"field-bottom": {
"error-message": {
"text": "Put a correct answer, please*"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"alert": {
"isInformative": true,
"isInline": true,
"text": {
"text": "Prazo de empréstimo ajustado ao tipo de taxa seleccionado"
}
}
},
{
"onecolumn": "true",
"isRequired": true,
"form-select": {
"distinguisher": "taxa-mista",
"field-top": {
"label": {
"text": "Taxa mista",
"for": "taxa-mista"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "taxa-mista",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "taxa-mista1",
"select-name": "taxa-mista",
"text": "5 anos"
},
{
"id": "taxa-mista2",
"select-name": "taxa-mista",
"text": "10 anos"
},
{
"id": "taxa-mista3",
"select-name": "taxa-mista",
"text": "15 anos"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
}
]
}
},
{
"subtitle": {
"text": "3/3 Sobre habitação",
"type": "-m",
"colorAccent": true
},
"form-list-calculator": {
"form-list": [
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "Já tem imóvel decidido?"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "imovelDecidido",
"radio-group": {
"radio-group": [
{
"id": "imovelDecididoSi",
"title": "imovelDecididoSi",
"name": "imovelDecidido",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Si"
}
},
{
"id": "imovelDecididoNo",
"title": "imovelDecididoNo",
"name": "imovelDecidido",
"label": {
"type": "-placeholder-M",
"text": "No"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": "true",
"isRequired": true,
"form-select": {
"distinguisher": "localizacion",
"field-top": {
"label": {
"text": "Localização do Imóvel",
"for": "localizacion"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "localizacion",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "lisboa",
"select-name": "lisboa",
"text": "lisboa"
},
{
"id": "otro",
"select-name": "otro",
"text": "otro"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"id": "destino",
"field-top": {
"fieldset": true,
"label": {
"text": "Destino da Habitação",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"radio-group": {
"radio-group": [
{
"id": "destino1",
"title": "destino1",
"name": "destino",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Habitação Principal"
}
},
{
"id": "destino2",
"title": "destino2",
"name": "destino",
"label": {
"type": "-placeholder-M",
"text": "Habitação Secundária"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"id": "tipo",
"field-top": {
"fieldset": true,
"label": {
"text": "Tipo de Imóvel",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"radio-group": {
"radio-group": [
{
"id": "tipo1",
"title": "tipo1",
"name": "tipo",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Apartamento"
}
},
{
"id": "tipo2",
"title": "tipo2",
"name": "tipo",
"label": {
"type": "-placeholder-M",
"text": "Moradia"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Ano de construção"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"distinguisher": "ano-construcao",
"id": "ano-construcao",
"type": "text",
"title": "ano-construcao",
"placeholder": "1990"
},
"field-bottom": {
"error-message": {
"text": "Put a correct answer, please*"
},
"helper-text": {
"text": "Helper text (optional)"
}
}
}
}
]
}
}
],
"condiciones": {
"text": ""
},
"isCuotaPT": true,
"steps-nav__list": {
"noText": true,
"fixed": true,
"steps": [
{
"isActive": true,
"data-index": "01",
"sequence": "01"
},
{
"data-index": "02",
"sequence": "02"
},
{
"data-index": "03",
"sequence": "03"
}
]
}
}
.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.