<div class="lightbox " value="steps-form">
<div class="lightbox__trigger">
<button class="link
link_simple
btn link_not-a-link link_btn link_trigger
" type="button">
<span>Btn Trigger</span>
</button>
</div>
<div class="lightbox__overlay" id="">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
</div>
</div>
<div class="lightbox__content">
<div class="steps-form">
<div class="steps-form__step1 step-form test-step-1" id="1">
<div class="text-label-m">¡EEEEEEEEMPEZAMOS!</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿Qué quieres hacer?</h1>
<img class="emoji" src="/dist/images/que quieres.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-1 inColumn" id="step-1">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="1_2_1" type="radio" title="opción 1" name="step-1" value="Comprar una casa, me he enamorado">
<label class="radio-label " for="1_2_1" id="2-L" value="1">
<span class="caption-placeholder-m">Comprar una casa, me he enamorado</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="1_5_2" type="radio" title="opción 2" name="step-1" value="Vender una casa para comprar una nueva">
<label class="radio-label " for="1_5_2" id="5-L" value="2">
<span class="caption-placeholder-m">Vender una casa para comprar una nueva</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="1_4_3" type="radio" title="opción 3" name="step-1" value="Construir un hogar desde cero a mi medida">
<label class="radio-label " for="1_4_3" id="4-L" value="3">
<span class="caption">Construir un hogar desde cero a mi medida</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step2 step-form test-step-2" id="2">
<div class="text-label-m">¡ENTRAMOS EN HARINA!</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿Qué te describe mejor?</h1>
<img class="emoji" src="/dist/images/describe.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-2 inColumn" id="step-2">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="2_3_1" type="radio" title="opción 1" name="step-2" value="Soy funcionario y sé lo que haré los próximos 5 años">
<label class="radio-label " for="2_3_1" id="3-L" value="1">
<span class="caption-placeholder-m">Soy funcionario y sé lo que haré los próximos 5 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_2" type="radio" title="opción 2" name="step-2" value="Compro casa yo solo. Si me queréis, “irse”">
<label class="radio-label " for="2_3_2" id="3-L" value="2">
<span class="caption-placeholder-m">Compro casa yo solo. Si me queréis, “irse”</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_3" type="radio" title="opción 3" name="step-2" value="Necesito un aval quiero un empujoncito">
<label class="radio-label " for="2_3_3" id="3-L" value="3">
<span class="caption">Necesito un aval quiero un empujoncito</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_4" type="radio" title="opción 4" name="step-2" value="Nah, ninguna de las anteriores opciones">
<label class="radio-label " for="2_3_4" id="3-L" value="4">
<span class="caption">Nah, ninguna de las anteriores opciones</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step3 step-form test-step-3" id="3">
<div class="text-label-m">LA PREGUNTA DE MANOLO Y BENITO</div>
<div class="tit-group">
<h1 class="
title-xxl
">Además de comprarla, ¿quieres reformarla?</h1>
<img class="emoji" src="/dist/images/reforma.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-3 inColumn" id="step-3">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="3_4_1" type="radio" title="opción 1" name="step-3" value="Yeah, mejor ahora que nunca">
<label class="radio-label " for="3_4_1" id="4-L" value="1">
<span class="caption-placeholder-m">Yeah, mejor ahora que nunca</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="3_5_2" type="radio" title="opción 2" name="step-3" value="No, mejor lo dejo para el futuro">
<label class="radio-label " for="3_5_2" id="5-L" value="2">
<span class="caption-placeholder-m">No, mejor lo dejo para el futuro</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="3_5_3" type="radio" title="opción 3" name="step-3" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="3_5_3" id="5-L" value="3">
<span class="caption">Mar de dudas, que me asesoren</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step4 step-form test-step-4" id="4">
<div class="text-label-m">PARA TODOS LOS GRETA THUNBERGS</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿Quieres que tu vivienda sea sostenible?</h1>
<img class="emoji" src="/dist/images/green.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-4 inColumn" id="step-4">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="4_5_1" type="radio" title="opción 1" name="step-4" value="Claro, el planeta es mi jardín">
<label class="radio-label " for="4_5_1" id="5-L" value="1">
<span class="caption-placeholder-m">Claro, el planeta es mi jardín</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="4_5_2" type="radio" title="opción 2" name="step-4" value="No, prefiero quedarme como estoy">
<label class="radio-label " for="4_5_2" id="5-L" value="2">
<span class="caption-placeholder-m">No, prefiero quedarme como estoy</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="4_5_3" type="radio" title="opción 3" name="step-4" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="4_5_3" id="5-L" value="3">
<span class="caption">Mar de dudas, que me asesoren</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step5 step-form test-step-5" id="5">
<div class="text-label-m">DINOS CUÁL ES TU TIPO</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿A qué tipo habías pensado comprarla?</h1>
<img class="emoji" src="/dist/images/tipo.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-5 inColumn" id="step-5">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="5_6_1" type="radio" title="opción 1" name="step-5" value="Tipo fijo, constante como una autopista">
<label class="radio-label " for="5_6_1" id="6-L" value="5">
<span class="caption-placeholder-m">Tipo fijo, constante como una autopista</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_2" type="radio" title="opción 2" name="step-5" value="Tipo mixto, un camino con curvas y rectas">
<label class="radio-label " for="5_6_2" id="6-L" value="5">
<span class="caption-placeholder-m">Tipo mixto, un camino con curvas y rectas</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_3" type="radio" title="opción 3" name="step-5" value="Tipo variable, cuesta de bajada o empepinada">
<label class="radio-label " for="5_6_3" id="6-L" value="5">
<span class="caption">Tipo variable, cuesta de bajada o empepinada</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_4" type="radio" title="opción 4" name="step-5" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="5_6_4" id="6-L" value="5">
<span class="caption">Mar de dudas, que me asesoren</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step6 step-form test-step-6" id="6">
<div class="text-label-m">¡YA CASI ESTAMOS!</div>
<div class="tit-group">
<h1 class="
title-xxl
">No es obligatorio, pero si quieres protegerte...</h1>
<img class="emoji" src="/dist/images/house.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-6 inColumn" id="step-6">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="6_7_1" type="radio" title="opción 1" name="step-6" value="Seguro de hogar, of course, la acabo de comprar">
<label class="radio-label " for="6_7_1" id="8-L" value="6">
<span class="caption-placeholder-m">Seguro de hogar, of course, la acabo de comprar</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_2" type="radio" title="opción 2" name="step-6" value="Seguro de vida, mejor tenerlo y no usarlo, que no tenerlo">
<label class="radio-label " for="6_7_2" id="8-L" value="6">
<span class="caption-placeholder-m">Seguro de vida, mejor tenerlo y no usarlo, que no tenerlo</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_3" type="radio" title="opción 3" name="step-6" value="Seguro de pagos, por si no hay trabajo, Dios no lo quiera">
<label class="radio-label " for="6_7_3" id="8-L" value="6">
<span class="caption">Seguro de pagos, por si no hay trabajo, Dios no lo quiera</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_4" type="radio" title="opción 4" name="step-6" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="6_7_4" id="8-L" value="6">
<span class="caption">Mar de dudas, que me asesoren</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step7 step-form test-step-7" id="7">
<div class="text-label-m">¡VAMOS, VAMOS QUE ES LA PENÚLTIMA!</div>
<div class="tit-group">
<h1 class="
title-xxl
">Cómo te gustaría ver tu resultado</h1>
<img class="emoji" src="/dist/images/pixel.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-7 inColumn" id="step-7">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<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="7_8_1" type="radio" title="opción 1" name="step-7" value="Lo quiero por mail para tenerlo siempre a mano y que un comercial me informe">
<label class="radio-label " for="7_8_1" id="8-L" value="7">
<span class="caption-placeholder-m">Lo quiero por mail para tenerlo siempre a mano y que un comercial me informe</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="7_8_2" type="radio" title="opción 2" name="step-7" value="Lo veo en pantalla, y me descargo el pdf del resultado, sin más">
<label class="radio-label " for="7_8_2" id="8-L" value="7">
<span class="caption-placeholder-m">Lo veo en pantalla, y me descargo el pdf del resultado, sin más</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step8 step-form test-step-8" id="8">
<div class="text-label-m">¡YA TERMINAMOS! ÚLTIMA, ULTIMÍSISISIMA</div>
<div class="tit-group">
<h1 class="
title-xxl
">¡Indícanos tus datos para poder enviarte el resultado de tu test!</h1>
<img class="emoji" src="/dist/images/mail.png" alt="emoji">
</div>
<form class="form-distinguisher_contact-form" id="" action="#" method="post" novalidate>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="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__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId22">APELLIDOS</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__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId211">Email</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="randomInputId211" type="text" name="" title="Email" autocomplete="" placeholder="¿Cual es tu e-mail?" />
<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__item ">
<div class="row">
<div class="col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6">
<div class="form-list__field required">
<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>
<div class="col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="phoneNumber">Telefono</label>
<div class="field-top__wrap">
</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>
</div>
</li>
</ul>
<div class="legal">
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») tratará los datos personales facilitados a través del presente formulario con la finalidad de gestionar tu solicitud de contacto, facilitarte información sobre nuestros productos y servicios, y conocer tu valoración sobre los mismos, legitimado en el consentimiento otorgado mediante la remisión del mismo. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Puedes obtener más información sobre el tratamiento de tus datos personales, y cómo ejercitar tus derechos, consultando <a href='XXXenlaceXXX' target='_blank'>nuestra Política de Protección de Datos</a>. Al pulsar en el siguiente botón de envío, declaro haber leído y acepto la información sobre Protección de Datos.</p>
</div>
</div>
</div>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Ver mi resultado
</button>
</div>
</div>
</form>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="lightbox {{#if isContactonHeader}}header__cta hidden-xs-ms{{/if}}"
value="{{#if stepsform}}steps-form{{else if isContactonHeader}}isContactonHeader{{else if contactForm}}contactForm{{else if contactFormClientNoClient}}contactFormClientNoClient{{else if contactFormAndRTE}}contactFormAndRTE{{else if table}}whitTable{{else if calculatorLightbox}}calculatorLightbox{{else if calculatorLightbox2}}calculatorLightbox2{{else if calculatorLightbox3}}calculatorLightbox3{{else}}isDefault{{/if}}">
<div class="lightbox__trigger{{#if isContactonHeader}} header__cta-btn{{/if}}{{#if isContactonFooter}} footer__lightbox-link{{/if}}">
{{#if stepsform}}
{{> @link btntrigger }}
{{else}}
{{> @link trigger }}
{{/if}}
</div>
<div class="lightbox__overlay" id="{{ id }}">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close" {{#if id-close}} id="{{ id-close }}"{{/if}}>
{{ render '@icon--close' }}
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
{{#if contactForm}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
{{#if title}}
<div class="lightbox__title">
{{> @title-l title }}
</div>
{{/if}}
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">{{> @link telefono }}{{> @bodycopy-s info }}</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">{{> @link enlace }}</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">{{> @link oficinas }}</li>
</ul>
{{#if description}}
<div class="lightbox__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
</div>
{{else if contactFormClientNoClient}}
{{ render '@contact-cards' }}
{{else if calculatorLightbox}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox">
{{> @title-l title }}
</div>
</div>
{{else if calculatorLightbox2}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox2">
{{> @title-l title }}
</div>
</div>
{{else if calculatorLightbox3}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title calculatorLightbox3">
{{> @title-l title }}
</div>
</div>
{{else if stepsform}}
{{else}}
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{#if title}}
<div class="lightbox__title">
{{> @title-l title }}
</div>
{{/if}}
{{#if description}}
<div class="lightbox__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>
<div class="lightbox__content">
{{#if contactForm}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main contactForm">
{{#if isInsideTheMobileMenu}}
{{ render '@contact-form--mobile-menu' }}
{{else if isInsideTheHeader}}
{{ render '@contact-form--header' }}
{{else if isInsideTheFooter}}
{{ render '@contact-form--footer' }}
{{else}}
{{ render '@contact-form' }}
{{/if}}
</div>
</div>
</div>
{{else if contactFormClientNoClient}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main contactFormClientNoClient">
{{#if isInsideTheMobileMenu}}
{{ render '@contact-form--mobile-menu' }}
{{else if isInsideTheHeader}}
{{ render '@contact-form--header' }}
{{else if isInsideTheFooter}}
{{ render '@contact-form--footer' }}
{{else}}
{{ render '@contact-form' }}
{{/if}}
</div>
</div>
</div>
{{else if contactFormAndRTE}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__content-main contactFormAndRTE">
{{#if isInsideTheMobileMenu}}
{{ render '@contact-form--mobile-menu' }}
{{else if isInsideTheHeader}}
{{ render '@contact-form--header' }}
{{else if isInsideTheFooter}}
{{ render '@contact-form--footer' }}
{{else}}
{{ render '@contact-form' }}
{{/if}}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4_5 col-sm-ml col-lg-4_5">
<div class="lightbox__content-additional lightbox__content-additional_col_2">
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
</div>
</div>
</div>
{{else if calculatorLightbox}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox">
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-6 col-lg-6 col-ms-mr-ml">
{{> @description-list list1 }}
</div>
</div>
{{> @clarification clarification }}
</div>
</div>
</div>
{{else if calculatorLightbox2}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox2">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{> @description-list list1 }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{> @description-list list2 }}
</div>
</div>
{{> @box-result result }}
{{> @clarification clarification }}
</div>
</div>
</div>
{{else if calculatorLightbox3}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main calculatorLightbox3">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-9 col-lg-9 col-ms-mr-ml">
{{> @description-list list1 }}
</div>
</div>
{{> @clarification clarification }}
</div>
</div>
</div>
{{else if stepsform}}
{{ render '@steps-form' }}
{{else if table}}
<div class="lightbox__content-main whitTable">
{{> @table table }}
</div>
<div class="lightbox__content-additional">
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
</div>
{{else if rte}}
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
RTE placeholder RTE placeholder RTE placeholder<br/>
{{else}}
<div class="isContactonHeader isDefault">
Content placeholder
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"hasID": false,
"trigger": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Lightbox trigger"
},
"btntrigger": {
"isBtn": true,
"btnType": "button",
"text": "Btn Trigger"
},
"title": {
"text": "The Title"
},
"description": {
"text": "<p>The description</p>"
},
"stepsform": true
}
.lightbox {
&__overlay {
display: none;
position: fixed;
z-index: 12;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
&__wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
.container {
@media (--viewport-xs-max) {
padding-right: 0;
padding-left: 0;
}
& > div > div{
background-color: var(--color-primary);
}
}
}
&__close-container {
position: relative;
overflow: hidden;
width: 100%;
height: 60px;
padding: 0;
background-color: var(--color-primary);
cursor: auto;
}
&__window {
position: relative;
overflow: hidden auto;
width: 100%;
max-height: calc(100vh - 140px);
padding: 0 20px 60px 20px;
background-color: var(--color-primary);
cursor: auto;
scroll-behavior: smooth !important;
@media (--viewport-xs-max) {
max-height: calc(100vh - 60px);
}
@media (--viewport-sm-min) {
padding: 0 0 60px 0;
}
}
&__head {
margin-bottom: 40px;
text-align: left;
ul{/*margin-top: 30px;margin-bottom: 20px;*/
li{
&:first-child{flex-wrap: wrap;flex-direction: row;
a.link{display:inline-flex;width:auto;
span{display:inline;padding-left: 5px;padding-right:0;}
&:first-child span{padding-right: 5px;}
}
div{clear:left;}
}
}
}
.contact-cards ul li:first-child{flex-direction:column;} /* Excepción para que no interfiera con el contact cards */
.lightbox__title{margin-bottom:20px;
&.calculatorLightbox{ margin-bottom: 0;}
}
}
&__description {
margin-top: 20px;
}
&__content {
&-additional {
margin-top: 40px;
&_col {
&_2 {
@media (--viewport-sm-min) {
margin-top: 0;
}
}
}
}
&-main{
&.calculatorLightbox{
.row{
.col-sm-6, .col-lg-6{position: relative;
.description-list{
/*@media (--viewport-ms-min) {
margin-bottom: 32px;
dt.total{position: absolute; bottom:0;}
dd.total{position: absolute; bottom:0;right: 0;margin-right: var(--half-gutter-width-ms-min);}
}*/
@media (--viewport-sm-min) {margin-bottom: 32px;
dl{
dt.total{position: absolute; bottom:0;}
dd.total{position: absolute; bottom:0;right: 0;margin-right: var(--half-gutter-width-ms-min);}
}
}
@media (--viewport-lg-min) {margin-bottom: 30px;
dl{
dt.total{position: absolute; bottom:0;}
dd.total{position: absolute; bottom:0;right: 0;margin-right: var(--half-gutter-width-lg-min);}
}
}
}
}
}
}
}
}
&__close {
position: absolute;
top: 23px;
right: 30px;
display: flex;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45px;
height: 45px;
content: '';
}
&:hover,
&:focus {
.icon {
fill: var(--color-accent);
}
}
.icon {
width: 16px;
height: 16px;
}
}
}
body, html, .lightbox__window {
scroll-behavior: smooth !important;
}
Variantes: Default, Steps form, Contact on header, With contact form, With Contact form and RTE, Lightbox for calculator in Hipotecas, Lightbox for calculator 2 in Hipotecas, Lightbox for calculator 3 in Hipotecas, Steps form, With a table