<section class="splitter splitter_bg-color_white splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="application-form-steps ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-mr-ml col-sm-10 col-lg-10 col">
<div class="application-form-steps__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="application-form-steps__title">
<span class="title-l
">
<h1>Solicita tu estudio personalizado<br />para la <span>Hipoteca VIVE</span></h1>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
</div>
<div class="steps-nav__list oneLine">
<ul>
<li class="steps-nav__list-item oneLine" data-index="01">
<div>
<div>
<span class="number-step"><span class="title-M
">1/3</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
<span class="title-step"><span class="title-M
">Sobre el proyecto</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
</div>
<!-- TODO: Usar referencias a otros componentes -->
<span class="link link_back">
<svg class="icon icon-16_chevron-left">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left">
</use>
</svg>
<span>Volver atrás</span>
</span>
</div>
</li>
<li class="steps-nav__list-item oneLine active" data-index="02">
<div>
<div>
<span class="number-step"><span class="title-M
">2/3</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
<span class="title-step"><span class="title-M
">Sobre ti</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
</div>
<!-- TODO: Usar referencias a otros componentes -->
<span class="link link_back">
<svg class="icon icon-16_chevron-left">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left">
</use>
</svg>
<span>Volver atrás</span>
</span>
</div>
</li>
<li class="steps-nav__list-item oneLine" data-index="03">
<div>
<div>
<span class="number-step"><span class="title-M
">3/3</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
<span class="title-step"><span class="title-M
">Datos personales</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
</div>
<!-- TODO: Usar referencias a otros componentes -->
<span class="link link_back">
<svg class="icon icon-16_chevron-left">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left">
</use>
</svg>
<span>Volver atrás</span>
</span>
</div>
</li>
</ul>
</div>
<form class="application-form-steps__form" id="applicationForm" action="#" method="post" novalidate>
<div class="application-form-steps__step">
<div class="quota-simulation-summary">
<div class="quota-simulation-summary--head simple">
<h3 class="
title-m
"></h3>
<a class="link
link_has-icon link_has-icon_before
" href="#">
<svg class="icon icon-16_edit-section icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_edit-section"></use>
</svg>
<span>Volver y editar</span>
</a>
</div>
<div class="quota-simulation-summary--wrap">
<div class="quota-simulation-summary--content">
<div class="wrap">
<div><svg class="icon icon-16_home ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_home"></use>
</svg>
</div> <span class="caption-label">provincia: MADRID / VALOR VIVIENDA: 300.000 € / aportacion: 80.000 €</span>
</div>
</div>
</div>
</div>
<div class="form-list-flex">
<ul class="form-list-flex__list">
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-radio-group " id="usoVivienda">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">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="usoViviendaHabitual" name="usoViviendaHabitual" value="Vivienda habitual">
<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="usoViviendaSegundaResidencia" 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">Debes elegir una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-radio-group " id="tipoVivienda">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">tipo de 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="tipoViviendaNueva" type="radio" title="tipoViviendaNueva" name="tipoViviendaNueva" value="Nueva construcción">
<label class="radio-label " for="tipoViviendaNueva" id="" value="">
<span class="caption-placeholder-m">Nueva construcción</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipoViviendaSegundaMano" type="radio" title="tipoViviendaSegundaMano" name="tipoViviendaSegundaMano" value="Segunda mano">
<label class="radio-label " for="tipoViviendaSegundaMano" id="" value="">
<span class="caption-placeholder-m">Segunda mano</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes elegir una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="cuando">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿cUÁNDO TIENES PREVISTO comprar?</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="cuando1" type="radio" title="Opción 1" name="cuando" value="">
<label class="access-select__option access-select__label" for="cuando1">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuando2" type="radio" title="Opción 2" name="cuando" value="">
<label class="access-select__option access-select__label" for="cuando2">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuando3" type="radio" title="Opción 3" name="cuando" value="">
<label class="access-select__option access-select__label" for="cuando3">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<ul class="btns">
<li>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="">
Siguiente
<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>
</button>
</div>
</div>
</li>
</ul>
</div>
<div class="application-form-steps__step show">
<div class="form-list-flex">
<ul class="form-list-flex__list">
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="">
<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="" checked>
<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 seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">edad del mayor de los titulares</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="">
<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="form-list-flex__list__item"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
<div class="prelabel">
<span class="title-s
">
<p>1º titular</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="situacionLaboral">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">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="situacionLaboral1" type="radio" title="Opción 1" name="cuando" value="">
<label class="access-select__option access-select__label" for="situacionLaboral1">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="situacionLaboral2" type="radio" title="Opción 2" name="cuando" value="">
<label class="access-select__option access-select__label" for="situacionLaboral2">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="situacionLaboral3" type="radio" title="Opción 3" name="cuando" value="">
<label class="access-select__option access-select__label" for="situacionLaboral3">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">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="Ingresos" value="">
<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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="numPagas">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Número de pagas 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="numPagas1" type="radio" title="Opción 1" name="numPagas" value="">
<label class="access-select__option access-select__label" for="numPagas1">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="numPagas2" type="radio" title="Opción 2" name="numPagas" value="">
<label class="access-select__option access-select__label" for="numPagas2">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="numPagas3" type="radio" title="Opción 3" name="numPagas" value="">
<label class="access-select__option access-select__label" for="numPagas3">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
<div class="prelabel">
<span class="title-s
">
<p>2º titular</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="situacionLaboralSegundo">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">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="situacionLaboralSegundo1" type="radio" title="Opción 1" name="situacionLaboralSegundo" value="">
<label class="access-select__option access-select__label" for="situacionLaboralSegundo1">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="situacionLaboralSegundo2" type="radio" title="Opción 2" name="situacionLaboralSegundo" value="">
<label class="access-select__option access-select__label" for="situacionLaboralSegundo2">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="situacionLaboralSegundo3" type="radio" title="Opción 3" name="situacionLaboralSegundo" value="">
<label class="access-select__option access-select__label" for="situacionLaboralSegundo3">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">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="IngresosSegundo" value="">
<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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="numPagasSegundo">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Número de pagas 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="numPagas1Segundo" type="radio" title="Opción 1" name="numPagasSegundo" value="">
<label class="access-select__option access-select__label" for="numPagas1Segundo">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="numPagas2Segundo" type="radio" title="Opción 2" name="numPagasSegundo" value="">
<label class="access-select__option access-select__label" for="numPagas2Segundo">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="numPagas3Segundo" type="radio" title="Opción 3" name="numPagasSegundo" value="">
<label class="access-select__option access-select__label" for="numPagas3Segundo">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item break"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-radio-group " id="hijos">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Tienes hijos menores a cargo?</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="hijosSi" type="radio" title="hijosSi" name="hijos" value="Sí" checked>
<label class="radio-label " for="hijosSi" 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="hijosNo" type="radio" title="hijosNo" name="hijos" value="No">
<label class="radio-label " for="hijosNo" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-switch">
<div class="field-top fieldset form-list__tooltip-label_default">
<label class="label-m" for="">¿cUÁNTOS HIJOS tienes?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch1" type="radio" title="Switch 1" name="Switch group" value="1">
<label class="switch-label" for="switch1">
<div class="text-label-m">1</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch2" type="radio" title="Switch 2" name="Switch group" value="2">
<label class="switch-label" for="switch2">
<div class="text-label-m">2</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch3" type="radio" title="Switch 3" name="Switch group" value="3">
<label class="switch-label" for="switch3">
<div class="text-label-m">3</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch4" type="radio" title="Switch 4" name="Switch group" value="+ 4">
<label class="switch-label" for="switch4">
<div class="text-label-m">+ 4</div>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes elegir una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-radio-group " id="residencia">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿eres residente en españa?</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="residenciaSi" type="radio" title="residenciaSi" name="residencia" value="Sí">
<label class="radio-label " for="residenciaSi" 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="residenciaNo" type="radio" title="residenciaNo" name="residencia" value="No">
<label class="radio-label " for="residenciaNo" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="nacionalidad">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">nacionalidad</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="nacionalidad1" type="radio" title="Opción 1" name="nacionalidad" value="">
<label class="access-select__option access-select__label" for="nacionalidad1">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="nacionalidad2" type="radio" title="Opción 2" name="nacionalidad" value="">
<label class="access-select__option access-select__label" for="nacionalidad2">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="nacionalidad3" type="radio" title="Opción 3" name="nacionalidad" value="">
<label class="access-select__option access-select__label" for="nacionalidad3">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes seleccionar una opción</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<ul class="btns">
<li>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
btn_secondary
btn_secondary
" type="">
<svg class="icon icon-16_chevron-left icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left"></use>
</svg>
Volver atrás
</button>
</div>
</div>
</li>
<li>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="">
Siguiente
<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>
</button>
</div>
</div>
</li>
</ul>
</div>
<div class="application-form-steps__step">
<div class="form-list-flex">
<ul class="form-list-flex__list">
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId211">DNI</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_DNI
" id="randomInputId211" type="text" name="" title="dni" autocomplete="" />
<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">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId21">NOMBRE</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId21" type="text" name="" title="Name" autocomplete="" />
<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">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId22">1º Apellido</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId22" type="text" name="" title="Surname" autocomplete="" />
<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">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId22">2º Apellido <span>(NO OBLIGATORIO)</span></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId22" type="text" name="" title="Surname" autocomplete="" />
<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">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50">
<div class="wrap-double">
<div class="form-list-flex__field ">
<div class="form-select " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId3">Prefijo</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="randomInputId3">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="randomInputId3">
<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 overflow">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId1" type="radio" title="+34 Spain" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId1">
+34 Spain
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId2" type="radio" title="+44 United Kingdom" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId2">
+44 United Kingdom
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId3" type="radio" title="+239 Sao Tome And Principe" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId3">
+239 Sao Tome And Principe
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId4" type="radio" title="+1-268 Antigua and Barbuda" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId4">
+1-268 Antigua and Barbuda
</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>
<div class="form-list-flex__field ">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="phoneNumber">Telefono</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_phone-number
" id="phoneNumber" type="text" name="" title="Phone number" autocomplete="" minlength='11' />
<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">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId211">EMAIL</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="randomInputId211" type="text" name="" title="Email" autocomplete="" />
<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">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="legal">
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>Responsable: Unión de Créditos Inmobiliarios SA EFC (UCI). Contacto con el Delegado de Protección de datos de UCI: dpo@uci.com. Finalidades y base de legitimación: Con tu consentimiento, UCI tratará tus datos para gestionar tus solicitudes, facilitarte información sobre nuestros productos y servicios, y conocer tu valoración sobre los mismos. Tiempo de conservación: Conservaremos tus datos durante el tiempo que sea necesario para cumplir con dichas finalidades. Una vez finalizado, UCI procederá a su bloqueo, conservándolos únicamente a disposición de las Administraciones Públicas competentes. Comunicación a terceros: UCI podrá contratar a terceros proveedores de servicios que tendrán acceso a tus datos personales, tratándolos únicamente para las finalidades descritas, siempre por encargo de UCI. Derechos: Puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación, portabilidad, así como la revocación del consentimiento prestado, dirigiéndote al email “privacidad@uci.com” , o por correo postal al Apto. de Correos 1160, 28080-Madrid. También puedes presentar tu reclamación ante la AEPD en www.aepd.es. Cómo obtenemos tus datos: UCI ha obtenido tus datos a través de formularios o solicitudes que hayas podido cumplimentar en alguno de nuestros sitios Web, en las entrevistas y conversaciones mantenidas con nuestros comerciales, o a través de terceras empresas (por ejemplo, portales inmobiliarios) con los cuales UCI mantiene acuerdos de colaboración. En todos los casos, con tu conocimiento, y previo consentimiento para el tratamiento de los mismos. Puedes obtener más información sobre el tratamiento de tus datos personales, y cómo ejercitar tus derechos, consultando nuestra <a href='-/media/Files/UCI/politica-de-privacidad/informacion_proteccion_datos'>Política de protección de datos</a>. Al pulsar en el siguiente botón, declaro que he leído y <strong>acepto </strong><strong></strong>la anterior información sobre Protección de Datos.<br /><br />Este sitio está protegido por reCAPTCHA y se aplican la <a href='https://policies.google.com/privacy' target='blank'>Política de Privacidad</a> y los <a href='https://policies.google.com/terms' target='blank'>Términos del Servicio</a> de Google.</p>
</div>
</div>
</div>
<ul class="btns">
<li>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
btn_secondary
btn_secondary
" type="">
<svg class="icon icon-16_chevron-left icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left"></use>
</svg>
Volver atrás
</button>
</div>
</div>
</li>
<li>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Envía tu solicitud
<svg class="icon icon-16_send icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_send"></use>
</svg>
</button>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="application-form-steps {{extra-classes}}" {{#if hasID}} id="{{idComponent}}" {{/if}}>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-mr-ml col-sm-10 col-lg-10 col">
<div class="application-form-steps__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="application-form-steps__title">
{{> @title title }}
</div>
</div>
</div>
</div>
{{> @steps-nav__list name-step }}
<form class="application-form-steps__form" id="applicationForm" action="#" method="post" novalidate>
{{#each steps}}
<div class="application-form-steps__step{{#if show}} show{{/if}}{{#if edition}} edition{{/if}}">
{{#if quota-simulation-summary}}{{> @quota-simulation-summary quota-simulation-summary
}}{{/if}}
{{> @form-list-flex form-list }}
{{#if legal}}{{> @legal legal }}{{/if}}
<ul class="btns">
{{#each btns}}
<li>
{{> @form-btn btn }}
</li>
{{/each}}
</ul>
</div>
{{/each}}
</form>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"title": {
"type": "-l",
"text": "<h1>Solicita tu estudio personalizado<br />para la <span>Hipoteca VIVE</span></h1>"
},
"name-step": {
"oneLine": true,
"steps": [
{
"oneLine": true,
"isActive": false,
"data-index": "01",
"number-step": {
"type": "-M",
"text": "1/3"
},
"title-step": {
"type": "-M",
"text": "Sobre el proyecto"
}
},
{
"oneLine": true,
"isActive": true,
"data-index": "02",
"number-step": {
"type": "-M",
"text": "2/3"
},
"title-step": {
"type": "-M",
"text": "Sobre ti"
}
},
{
"oneLine": true,
"data-index": "03",
"number-step": {
"type": "-M",
"text": "3/3"
},
"title-step": {
"type": "-M",
"text": "Datos personales"
}
}
]
},
"steps": [
{
"show": false,
"quota-simulation-summary": {
"link": {
"text": "Volver y editar",
"href": "#",
"icon-before": {
"name": "16_edit-section",
"isBefore": true
}
},
"item": [
{
"text": {
"text": "provincia: MADRID / VALOR VIVIENDA: 300.000 € / aportacion: 80.000 €",
"type": "-label"
},
"icon": {
"name": "16_home"
}
}
]
},
"form-list": {
"form-list-flex-item": [
{
"isRequired": true,
"percent": 50,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "USO DE LA VIVIENDA",
"fieldset": true
}
},
"id": "usoVivienda",
"radio-group": {
"radio-group": [
{
"id": "usoViviendaHabitual",
"title": "usoViviendaHabitual",
"name": "usoViviendaHabitual",
"label": {
"text": "Vivienda habitual",
"type": "-placeholder-m"
}
},
{
"id": "usoViviendaSegundaResidencia",
"title": "usoViviendaSegundaResidencia",
"name": "usoViviendaSegundaResidencia",
"label": {
"text": "Segunda residencia",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes elegir una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "tipo de vivienda",
"fieldset": true
}
},
"id": "tipoVivienda",
"radio-group": {
"radio-group": [
{
"id": "tipoViviendaNueva",
"title": "tipoViviendaNueva",
"name": "tipoViviendaNueva",
"label": {
"text": "Nueva construcción",
"type": "-placeholder-m"
}
},
{
"id": "tipoViviendaSegundaMano",
"title": "tipoViviendaSegundaMano",
"name": "tipoViviendaSegundaMano",
"label": {
"text": "Segunda mano",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes elegir una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"field-top": {
"label": {
"text": "¿cUÁNDO TIENES PREVISTO comprar?"
}
},
"id": "cuando",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "cuando1",
"select-name": "cuando",
"text": "Opción 1"
},
{
"id": "cuando2",
"select-name": "cuando",
"text": "Opción 2"
},
{
"id": "cuando3",
"select-name": "cuando",
"text": "Opción 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
}
]
},
"btns": [
{
"btn": {
"btn": {
"text": "Siguiente",
"icon-after": {
"name": "16_chevron-right",
"isAfter": true
}
}
}
}
]
},
{
"show": true,
"form-list": {
"form-list-flex-item": [
{
"isRequired": true,
"percent": 50,
"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",
"icon": {
"name": "person",
"context": {
"name": "person"
}
}
},
{
"id": "twoHolders",
"title": "Two holders",
"additionalAttributes": "checked",
"name": "Holders number",
"icon": {
"name": "2-persons",
"context": {
"name": "2-persons"
}
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-input": {
"field-top": {
"label": {
"text": "edad del mayor de los titulares"
}
},
"hasID": false,
"inputTitle": "Edad",
"idComponent": "Edad",
"inputValue": "",
"symbol": {
"text": "AÑOS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"title": {
"text": "<p>1º titular</p>",
"type": "-s"
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"field-top": {
"label": {
"text": "Situación laboral DEL 1º TITULAR"
}
},
"id": "situacionLaboral",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "situacionLaboral1",
"select-name": "cuando",
"text": "Opción 1"
},
{
"id": "situacionLaboral2",
"select-name": "cuando",
"text": "Opción 2"
},
{
"id": "situacionLaboral3",
"select-name": "cuando",
"text": "Opción 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-input": {
"field-top": {
"label": {
"text": "ingresos mensuales netos DEL 1º TITULAR"
}
},
"hasID": false,
"inputTitle": "Ingresos",
"idComponent": "Ingresos",
"inputValue": "",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"field-top": {
"label": {
"text": "Número de pagas DEL 1º TITULAR"
}
},
"id": "numPagas",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "numPagas1",
"select-name": "numPagas",
"text": "Opción 1"
},
{
"id": "numPagas2",
"select-name": "numPagas",
"text": "Opción 2"
},
{
"id": "numPagas3",
"select-name": "numPagas",
"text": "Opción 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"title": {
"text": "<p>2º titular</p>",
"type": "-s"
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"field-top": {
"label": {
"text": "Situación laboral DEL 2º TITULAR"
}
},
"id": "situacionLaboralSegundo",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "situacionLaboralSegundo1",
"select-name": "situacionLaboralSegundo",
"text": "Opción 1"
},
{
"id": "situacionLaboralSegundo2",
"select-name": "situacionLaboralSegundo",
"text": "Opción 2"
},
{
"id": "situacionLaboralSegundo3",
"select-name": "situacionLaboralSegundo",
"text": "Opción 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-input": {
"field-top": {
"label": {
"text": "ingresos mensuales netos DEL 2º TITULAR"
}
},
"hasID": false,
"inputTitle": "IngresosSegundo",
"idComponent": "IngresosSegundo",
"inputValue": "",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"field-top": {
"label": {
"text": "Número de pagas DEL 2º TITULAR"
}
},
"id": "numPagasSegundo",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "numPagas1Segundo",
"select-name": "numPagasSegundo",
"text": "Opción 1"
},
{
"id": "numPagas2Segundo",
"select-name": "numPagasSegundo",
"text": "Opción 2"
},
{
"id": "numPagas3Segundo",
"select-name": "numPagasSegundo",
"text": "Opción 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"break": true
},
{
"isRequired": true,
"percent": 50,
"form-radio-group": {
"id": "hijos",
"field-top": {
"fieldset": true,
"label": {
"text": "¿Tienes hijos menores a cargo?",
"fieldset": true
}
},
"radio-group": {
"radio-group": [
{
"id": "hijosSi",
"title": "hijosSi",
"name": "hijos",
"additionalAttributes": "checked",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "hijosNo",
"title": "hijosNo",
"name": "hijos",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-switch": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿cUÁNTOS HIJOS tienes?"
}
},
"switch-group": {
"switch-group": [
{
"id": "switch1",
"title": "Switch 1",
"name": "Switch group",
"label": {
"text": "1"
}
},
{
"id": "switch2",
"title": "Switch 2",
"name": "Switch group",
"label": {
"text": "2"
}
},
{
"id": "switch3",
"title": "Switch 3",
"name": "Switch group",
"label": {
"text": "3"
}
},
{
"id": "switch4",
"title": "Switch 4",
"name": "Switch group",
"label": {
"text": "+ 4"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes elegir una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-radio-group": {
"id": "residencia",
"field-top": {
"fieldset": true,
"label": {
"text": "¿eres residente en españa?",
"fieldset": true
}
},
"radio-group": {
"radio-group": [
{
"id": "residenciaSi",
"title": "residenciaSi",
"name": "residencia",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "residenciaNo",
"title": "residenciaNo",
"name": "residencia",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"field-top": {
"label": {
"text": "nacionalidad"
}
},
"id": "nacionalidad",
"select": {
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "nacionalidad1",
"select-name": "nacionalidad",
"text": "Opción 1"
},
{
"id": "nacionalidad2",
"select-name": "nacionalidad",
"text": "Opción 2"
},
{
"id": "nacionalidad3",
"select-name": "nacionalidad",
"text": "Opción 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes seleccionar una opción"
}
}
}
}
]
},
"btns": [
{
"btn": {
"btn": {
"text": "Volver atrás",
"isSecondary": true,
"icon-before": {
"name": "16_chevron-left",
"isBefore": true
}
}
}
},
{
"btn": {
"btn": {
"text": "Siguiente",
"icon-after": {
"name": "16_chevron-right",
"isAfter": true
}
}
}
}
]
},
{
"form-list": {
"form-list-flex-item": [
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "DNI",
"for": "randomInputId211"
}
},
"input": {
"distinguisher": "DNI",
"id": "randomInputId211",
"type": "text",
"title": "dni"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "NOMBRE",
"for": "randomInputId21"
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId21",
"type": "text",
"title": "Name"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "1º Apellido",
"for": "randomInputId22"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "2º Apellido <span>(NO OBLIGATORIO)</span>",
"for": "randomInputId22"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isDouble": true,
"isRequired": true,
"percent": 50,
"form-select-1": {
"field-top": {
"label": {
"text": "Prefijo",
"for": "randomInputId3"
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Selecciona",
"validationAttributes": "minlength='3'",
"option": [
{
"id": "prefixSelectId1",
"select-name": "Prefix",
"text": "+34 Spain"
},
{
"id": "prefixSelectId2",
"select-name": "Prefix",
"text": "+44 United Kingdom"
},
{
"id": "prefixSelectId3",
"select-name": "Prefix",
"text": "+239 Sao Tome And Principe"
},
{
"id": "prefixSelectId4",
"select-name": "Prefix",
"text": "+1-268 Antigua and Barbuda"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset-2": {
"field-top": {
"label": {
"text": "Telefono",
"for": "phoneNumber"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"distinguisher": "phone-number",
"id": "phoneNumber",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId211",
"text": "EMAIL"
}
},
"input": {
"placeholder": "",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"legal": {
"bodycopy": {
"text": "<p>Responsable: Unión de Créditos Inmobiliarios SA EFC (UCI). Contacto con el Delegado de Protección de datos de UCI: dpo@uci.com. Finalidades y base de legitimación: Con tu consentimiento, UCI tratará tus datos para gestionar tus solicitudes, facilitarte información sobre nuestros productos y servicios, y conocer tu valoración sobre los mismos. Tiempo de conservación: Conservaremos tus datos durante el tiempo que sea necesario para cumplir con dichas finalidades. Una vez finalizado, UCI procederá a su bloqueo, conservándolos únicamente a disposición de las Administraciones Públicas competentes. Comunicación a terceros: UCI podrá contratar a terceros proveedores de servicios que tendrán acceso a tus datos personales, tratándolos únicamente para las finalidades descritas, siempre por encargo de UCI. Derechos: Puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación, portabilidad, así como la revocación del consentimiento prestado, dirigiéndote al email “privacidad@uci.com” , o por correo postal al Apto. de Correos 1160, 28080-Madrid. También puedes presentar tu reclamación ante la AEPD en www.aepd.es. Cómo obtenemos tus datos: UCI ha obtenido tus datos a través de formularios o solicitudes que hayas podido cumplimentar en alguno de nuestros sitios Web, en las entrevistas y conversaciones mantenidas con nuestros comerciales, o a través de terceras empresas (por ejemplo, portales inmobiliarios) con los cuales UCI mantiene acuerdos de colaboración. En todos los casos, con tu conocimiento, y previo consentimiento para el tratamiento de los mismos. Puedes obtener más información sobre el tratamiento de tus datos personales, y cómo ejercitar tus derechos, consultando nuestra <a href='-/media/Files/UCI/politica-de-privacidad/informacion_proteccion_datos'>Política de protección de datos</a>. Al pulsar en el siguiente botón, declaro que he leído y <strong>acepto </strong><strong></strong>la anterior información sobre Protección de Datos.<br /><br />Este sitio está protegido por reCAPTCHA y se aplican la <a href='https://policies.google.com/privacy' target='blank'>Política de Privacidad</a> y los <a href='https://policies.google.com/terms' target='blank'>Términos del Servicio</a> de Google.</p>"
}
},
"btns": [
{
"btn": {
"btn": {
"text": "Volver atrás",
"isSecondary": true,
"icon-before": {
"name": "16_chevron-left",
"isBefore": true
}
}
}
},
{
"btn": {
"btn": {
"type": "submit",
"text": "Envía tu solicitud",
"icon-after": {
"name": "16_send",
"isAfter": true
}
}
}
}
]
}
]
}
.application-form-steps {
&__head {
margin-bottom: 56px;
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
.title-l {
span {
color: var(--color-text-error);
}
}
}
.steps-nav__list.oneLine {
margin-top: 0;
margin-bottom: 40px;
.steps-nav__list-item {
padding-bottom: 0;
}
}
.quota-simulation-summary {
margin-bottom: 40px;
padding: 32px 40px;
&.withBtn {
@media (--viewport-ms-max) {
flex-direction: row;
}
@media (--viewport-xs-max) {
flex-direction: column;
}
.btn {
display: flex;
.icon {
fill: var(--color-icon-accent);
}
}
}
}
.form-list-flex__field {
margin-bottom: 0;
/* para evitar el margen del componente form-list*/
h4 {
color: var(--color-text-accent);
margin: 56px 0 32px;
}
.field-top .label-m {
span {
color: var(--color-text-subtle);
}
}
.prelabel {
.title-s {
color: var(--color-text-accent-bold);
}
}
}
.legal {
margin: 8px 0 40px;
@media (--viewport-ms-max) {
margin: 10px 0 40px;
}
@media (--viewport-xs-max) {
margin: 16px 0 40px;
}
}
.btns { display: flex; gap: 30px; justify-content: center;}
.form-btn {
display: flex;
justify-content: center;
margin-top: 8px;
@media (--viewport-ms-max) {
margin-top: 10px;
}
@media (--viewport-xs-max) {
margin-top: 16px;
}
}
&__step {
display: none;
&.show {
display: block;
}
&.edition {
.quota-simulation-summary {
background-color: var(--color-background-subtle);
.caption-label {
color: var(--color-text-subtle);
}
}
}
}
}
No notes defined.