<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">
<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 class="text "><span class='bodycopy-l'>Sobre tu proyecto</span></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 class="text "><span class='bodycopy-l'>Sobre ti</span></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 class="text "><span class='bodycopy-l'>Resultado</span></span>
</span>
</li>
</ul>
</div>
<div class="block">
<div class="subtitle">
<svg class="icon icon-54_hogar ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#54_hogar"></use>
</svg>
<span class="title
">Sobre tu proyecto</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-5 col-md-5 col-lg-5
">
<div class="form-list__field
required">
<div class="form-radio-group " id="encontradoVivienda">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Has encontrado ya la vivienda?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="encontradoViviendaSi" type="radio" title="Si" name="encontradoVivienda" value="Sí" checked>
<label class="radio-label " for="encontradoViviendaSi" id="" value="">
<span class="caption-placeholder-M">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="encontradoViviendaSi" type="radio" title="No" name="encontradoVivienda" value="No">
<label class="radio-label " for="encontradoViviendaSi" 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7
">
<div class="form-list__field
required">
<div class="form-select " id="where">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Dónde se encuentra?</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">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="where1" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where2" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where3" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-range-slider" id="MortgageHousePrice">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuál es el precio de la vivienda?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHousePriceRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es el precio de la vivienda" min='10000' max='1000000' data-default='150000'>
<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
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-range-slider" id="MortgageHouseSavings">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuánto aportas?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHouseSavingsRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuánto aportas" min='0' max='500000' data-default='50000'>
<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
">
500.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</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-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
">
Necesitas aportar al menos un 10% del valor total de la vivienda
</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-range-slider" id="MortgageHouseDuration">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿En cuánto tiempo pagarás la hipoteca?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="MortgageHouseDurationRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Duración hipoteca" min='5' max='30' data-default='25'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
5 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
30 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-radio-group inColumn" id="usoVivienda">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Cuál será el uso de la vivienda?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="usoViviendaHabitual" type="radio" title="No" name="usoViviendaHabitual" value="Vivienda habitual" checked>
<label class="radio-label " for="usoViviendaHabitual" id="" value="">
<span class="caption-placeholder-M">Vivienda habitual</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="usoViviendaSegundaResidencia" type="radio" title="Yes" name="usoViviendaSegundaResidencia" value="Segunda residencia">
<label class="radio-label " for="usoViviendaSegundaResidencia" id="" value="">
<span class="caption-placeholder-M">Segunda residencia</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Choose one of the options, please*</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
required">
<div class="form-radio-group inColumn" id="tipoCasa">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Qué tipo de casa?</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="tipoCasaSegundaMano" type="radio" title="No" name="tipoCasaSegundaMano" value="Segunda mano" checked>
<label class="radio-label " for="tipoCasaSegundaMano" id="" value="">
<span class="caption-placeholder-M">Segunda mano</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipoCasaNuevaConstruccion" type="radio" title="Yes" name="tipoCasaNuevaConstruccion" value="Nueva construcción">
<label class="radio-label " for="tipoCasaNuevaConstruccion" id="" value="">
<span class="caption-placeholder-M">Nueva construcción</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>
</ul>
</div>
<div class="block">
<div class="subtitle">
<svg class="icon icon-54_satisfaccion ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#54_satisfaccion"></use>
</svg>
<span class="title
">Sobre ti</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-7 col-md-7 col-lg-7
">
<div class="form-list__field
required">
<div class="form-radio-group " id="holders">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿CUÁNTOS TITULARES TENDRÁ LA HIPOTECA?</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="oneHolder" type="radio" title="One holder" name="Holders number" value="" checked>
<label class="radio-label radio-label_icon " for="oneHolder" id="" value="">
<svg class="icon icon-person ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#person"></use>
</svg>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="twoHolders" type="radio" title="Two holders" name="Holders number" value="">
<label class="radio-label radio-label_icon " for="twoHolders" id="" value="">
<svg class="icon icon-2-persons ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#2-persons"></use>
</svg>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5
">
<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">EDAD DEL TITULAR MAYOR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="Edad">EDAD DEL TITULAR</label>
<div class="field-top__wrap">
</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
">
AÑOS
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
">
<div class="prelabel">
<h4 class="
title-s
">1º Titular</h4>
</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 " id="jobStatus1">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="jobStatus1">SITUACIÓN LABORAL DEL 1º TITULAR</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">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="jobStatus1_1" type="radio" title="Opción1" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1_1">
Opción1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus1_2" type="radio" title="Opción2" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1_2">
Opción2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus1_3" type="radio" title="Opción3" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1_3">
Opción3
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus1_4" type="radio" title="Opción4" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1_4">
Opción4
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus1_5" type="radio" title="Opción5" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1_5">
Opción5
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="Monthly income1">Ingresos mensuales netos del 1º titular</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Monthly income1" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5
">
<div class="form-list__field
required">
<div class="form-select form-select-distinguisher_numeroPagas1" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="paymentsNumberInput1">NÚMERO DE PAGAS</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="paymentsNumberInput1">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="paymentsNumberInput1">
<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="paymentsNumberInput1_1" type="radio" title="12" name="numeroPagas1" value="">
<label class="access-select__option access-select__label" for="paymentsNumberInput1_1">
12
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="paymentsNumberInput1_2" type="radio" title="14" name="numeroPagas1" value="">
<label class="access-select__option access-select__label" for="paymentsNumberInput1_2">
14
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="paymentsNumberInput1_3" type="radio" title="16" name="numeroPagas1" value="">
<label class="access-select__option access-select__label" for="paymentsNumberInput1_3">
16
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
">
<div class="prelabel">
<h4 class="
title-s
">2º Titular</h4>
</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 " id="jobStatus2">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="jobStatus2">SITUACIÓN LABORAL DEL 2º TITULAR</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">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="jobStatus2_1" type="radio" title="Opción1" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2_1">
Opción1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus2_2" type="radio" title="Opción2" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2_2">
Opción2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus2_3" type="radio" title="Opción3" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2_3">
Opción3
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus2_4" type="radio" title="Opción4" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2_4">
Opción4
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus2_5" type="radio" title="Opción5" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2_5">
Opción5
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="Monthly income1">Ingresos mensuales netos del 2º titular</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Monthly income2" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5
">
<div class="form-list__field
required">
<div class="form-select form-select-distinguisher_numeroPagas2" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="paymentsNumberInput2">NÚMERO DE PAGAS</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="paymentsNumberInput2">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="paymentsNumberInput2">
<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="paymentsNumberInput2_1" type="radio" title="12" name="numeroPagas2" value="">
<label class="access-select__option access-select__label" for="paymentsNumberInput2_1">
12
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="paymentsNumberInput2_2" type="radio" title="14" name="numeroPagas2" value="">
<label class="access-select__option access-select__label" for="paymentsNumberInput2_2">
14
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="paymentsNumberInput2_3" type="radio" title="16" name="numeroPagas2" value="">
<label class="access-select__option access-select__label" for="paymentsNumberInput2_3">
16
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5
">
<div class="form-list__field
required">
<div class="form-radio-group " id="otrosPrestamos">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Tenéis otros préstamos?</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="otrosPrestamosSi" type="radio" title="Si" name="otrosPrestamos" value="Sí" checked>
<label class="radio-label " for="otrosPrestamosSi" id="" value="">
<span class="caption-placeholder-M">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="otrosPrestamosNo" type="radio" title="No" name="otrosPrestamos" value="No">
<label class="radio-label " for="otrosPrestamosNo" 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="otherLoans">Total préstamos mensuales</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Other Loans" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</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-swiper scroll">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="card-result-payment swiper-slide scroll">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="title-m
">Hipoteca Fija</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="resto-amortizacion">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">772,14</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="caption-label">€/mes</span>
</li>
<li class="title-with-tooltip"> <span class="caption-label">Los 30 años</span>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li> <span class="caption-label">TAE</span>
</li>
<li> <span class="caption-label">4,85%</span>
</li>
</ul>
</li>
<li>
<ul>
<li> <span class="caption-label">TIN</span>
</li>
<li> <span class="caption-label">4,75%</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrap-link-detalle">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ver detalle</span>
<svg class="icon icon-16_chevron-right icon-before">
<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="card-result-payment swiper-slide scroll">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="title-m
">Hipoteca Mixta</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="periodo-gracia">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="caption-label">€/mes</span>
</li>
<li class="title-with-tooltip"> <span class="caption-label">10 primeros años</span>
</li>
</ul>
</li>
<li class="card-result-payment__item " id="resto-amortizacion">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">Euribor + 1,95%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li class="title-with-tooltip"> <span class="caption-label">Resto de años</span>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li> <span class="caption-label">TAE</span>
</li>
<li> <span class="caption-label">4,85%</span>
</li>
</ul>
</li>
<li>
<ul>
<li> <span class="caption-label">TIN</span>
</li>
<li> <span class="caption-label">4,75%</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrap-link-detalle">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ver detalle</span>
<svg class="icon icon-16_chevron-right icon-before">
<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="card-result-payment swiper-slide scroll">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="title-m
">Hipoteca Variable</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="periodo-gracia">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="caption-label">€/mes</span>
</li>
<li class="title-with-tooltip"> <span class="caption-label">10 primeros años</span>
</li>
</ul>
</li>
<li class="card-result-payment__item " id="resto-amortizacion">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">Euribor + 1,95%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li class="title-with-tooltip"> <span class="caption-label">Resto de años</span>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li> <span class="caption-label">TAE</span>
</li>
<li> <span class="caption-label">4,85%</span>
</li>
</ul>
</li>
<li>
<ul>
<li> <span class="caption-label">TIN</span>
</li>
<li> <span class="caption-label">4,75%</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrap-link-detalle">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ver detalle</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="card-result-payment__nav between-xs center-ms">
<div class="swiper-button-prev scroll">
<svg class="icon icon-32_arrow-left icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#32_arrow-left"></use>
</svg>
</div>
<div class="swiper-button-next scroll">
<svg class="icon icon-32_arrow-right icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#32_arrow-right"></use>
</svg>
</div>
</div>
</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": "Sobre tu proyecto"
},
"icon-subtitle": {
"name": "54_hogar"
},
"form-list-calculator": {
"form-list": [
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5",
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "¿Has encontrado ya la vivienda?"
}
},
"id": "encontradoVivienda",
"radio-group": {
"radio-group": [
{
"id": "encontradoViviendaSi",
"title": "Si",
"name": "encontradoVivienda",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Sí"
}
},
{
"id": "encontradoViviendaSi",
"title": "No",
"name": "encontradoVivienda",
"label": {
"type": "-placeholder-M",
"text": "No"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7",
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "¿Dónde se encuentra?"
}
},
"id": "where",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "where1",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where2",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where3",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "¿Cuál es el precio de la vivienda?"
}
},
"id": "MortgageHousePrice",
"range-slider": {
"id": "MortgageHousePriceRangeSlider",
"inputTitle": "Cuál es el precio de la vivienda",
"validationAttributes": "min='10000' max='1000000' data-default='150000'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "10.000€"
},
"legend-end": {
"text": "1.000.000€"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "¿Cuánto aportas?"
}
},
"id": "MortgageHouseSavings",
"range-slider": {
"id": "MortgageHouseSavingsRangeSlider",
"inputTitle": "Cuánto aportas",
"validationAttributes": "min='0' max='500000' data-default='50000'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "0€"
},
"legend-end": {
"text": "500.000€"
}
}
}
},
{
"onecolumn": true,
"alert": {
"isError": true,
"isInline": true,
"text": {
"text": "Necesitas aportar al menos un 10% del valor total de la vivienda"
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "¿En cuánto tiempo pagarás la hipoteca?"
}
},
"id": "MortgageHouseDuration",
"range-slider": {
"id": "MortgageHouseDurationRangeSlider",
"inputTitle": "Duración hipoteca",
"validationAttributes": "min='5' max='30' data-default='25'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "5 años"
},
"legend-end": {
"text": "30 años"
}
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-radio-group": {
"Column": true,
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "¿Cuál será el uso de la vivienda?"
}
},
"id": "usoVivienda",
"radio-group": {
"radio-group": [
{
"id": "usoViviendaHabitual",
"title": "No",
"name": "usoViviendaHabitual",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Vivienda habitual"
}
},
{
"id": "usoViviendaSegundaResidencia",
"title": "Yes",
"name": "usoViviendaSegundaResidencia",
"label": {
"type": "-placeholder-M",
"text": "Segunda residencia"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-radio-group": {
"Column": true,
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "¿Qué tipo de casa?"
}
},
"id": "tipoCasa",
"radio-group": {
"radio-group": [
{
"id": "tipoCasaSegundaMano",
"title": "No",
"name": "tipoCasaSegundaMano",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Segunda mano"
}
},
{
"id": "tipoCasaNuevaConstruccion",
"title": "Yes",
"name": "tipoCasaNuevaConstruccion",
"label": {
"type": "-placeholder-M",
"text": "Nueva construcción"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
}
]
}
},
{
"subtitle": {
"text": "Sobre ti"
},
"icon-subtitle": {
"name": "54_satisfaccion"
},
"form-list-calculator": {
"form-list": [
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7",
"isRequired": true,
"form-radio-group": {
"id": "holders",
"field-top": {
"fieldset": true,
"label": {
"text": "¿CUÁNTOS TITULARES TENDRÁ LA HIPOTECA?",
"fieldset": true
}
},
"radio-group": {
"radio-group": [
{
"id": "oneHolder",
"title": "One holder",
"name": "Holders number",
"additionalAttributes": "checked",
"icon": {
"name": "person",
"context": {
"name": "person"
}
}
},
{
"id": "twoHolders",
"title": "Two holders",
"name": "Holders number",
"icon": {
"name": "2-persons",
"context": {
"name": "2-persons"
}
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5",
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "EDAD DEL TITULAR",
"for": "Edad"
},
"label-option-2": {
"text": "EDAD DEL TITULAR MAYOR",
"for": "Edad"
}
},
"hasID": false,
"inputTitle": "Edad",
"idComponent": "Edad",
"inputValue": "30",
"symbol": {
"text": "AÑOS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"title-s": {
"text": "1º Titular"
}
},
{
"onecolumn": true,
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "SITUACIÓN LABORAL DEL 1º TITULAR",
"for": "jobStatus1"
}
},
"id": "jobStatus1",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "jobStatus1_1",
"select-name": "Job status",
"text": "Opción1"
},
{
"id": "jobStatus1_2",
"select-name": "Job status",
"text": "Opción2"
},
{
"id": "jobStatus1_3",
"select-name": "Job status",
"text": "Opción3"
},
{
"id": "jobStatus1_4",
"select-name": "Job status",
"text": "Opción4"
},
{
"id": "jobStatus1_5",
"select-name": "Job status",
"text": "Opción5"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7",
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Ingresos mensuales netos del 1º titular",
"for": "Monthly income1"
}
},
"id": false,
"inputTitle": "Monthly income1",
"idComponent": "monthly-income1",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5",
"isRequired": true,
"form-select": {
"distinguisher": "numeroPagas1",
"field-top": {
"label": {
"text": "NÚMERO DE PAGAS",
"for": "paymentsNumberInput1"
}
},
"select": {
"id": "paymentsNumberInput1",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "paymentsNumberInput1_1",
"select-name": "numeroPagas1",
"text": "12"
},
{
"id": "paymentsNumberInput1_2",
"select-name": "numeroPagas1",
"text": "14"
},
{
"id": "paymentsNumberInput1_3",
"select-name": "numeroPagas1",
"text": "16"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"title-s": {
"text": "2º Titular"
}
},
{
"onecolumn": true,
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "SITUACIÓN LABORAL DEL 2º TITULAR",
"for": "jobStatus2"
}
},
"id": "jobStatus2",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "jobStatus2_1",
"select-name": "Job status",
"text": "Opción1"
},
{
"id": "jobStatus2_2",
"select-name": "Job status",
"text": "Opción2"
},
{
"id": "jobStatus2_3",
"select-name": "Job status",
"text": "Opción3"
},
{
"id": "jobStatus2_4",
"select-name": "Job status",
"text": "Opción4"
},
{
"id": "jobStatus2_5",
"select-name": "Job status",
"text": "Opción5"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7",
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Ingresos mensuales netos del 2º titular",
"for": "Monthly income1"
}
},
"id": false,
"inputTitle": "Monthly income2",
"idComponent": "monthly-income2",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5",
"isRequired": true,
"form-select": {
"distinguisher": "numeroPagas2",
"field-top": {
"label": {
"text": "NÚMERO DE PAGAS",
"for": "paymentsNumberInput2"
}
},
"select": {
"id": "paymentsNumberInput2",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "paymentsNumberInput2_1",
"select-name": "numeroPagas2",
"text": "12"
},
{
"id": "paymentsNumberInput2_2",
"select-name": "numeroPagas2",
"text": "14"
},
{
"id": "paymentsNumberInput2_3",
"select-name": "numeroPagas2",
"text": "16"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5",
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "¿Tenéis otros préstamos?"
}
},
"id": "otrosPrestamos",
"radio-group": {
"radio-group": [
{
"id": "otrosPrestamosSi",
"title": "Si",
"name": "otrosPrestamos",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-M",
"text": "Sí"
}
},
{
"id": "otrosPrestamosNo",
"title": "No",
"name": "otrosPrestamos",
"label": {
"type": "-placeholder-M",
"text": "No"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-12 col-sm-7 col-md-7 col-lg-7",
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Total préstamos mensuales",
"for": "otherLoans"
}
},
"id": false,
"inputTitle": "Other Loans",
"idComponent": "otherLoans",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
}
],
"condiciones": {
"text": ""
},
"isCuotaMaxFinanciacionScroll": true,
"steps-nav__list": {
"fixed": true,
"steps": [
{
"isActive": true,
"data-index": "01",
"sequence": "01",
"text": "<span class='bodycopy-l'>Sobre tu proyecto</span>"
},
{
"data-index": "02",
"sequence": "02",
"text": "<span class='bodycopy-l'>Sobre ti</span>"
},
{
"data-index": "03",
"sequence": "03",
"text": "<span class='bodycopy-l'>Resultado</span>"
}
]
}
}
.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.