<section class="splitter splitter_bg-color_white splitter_padding_top_large 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="product-swiper">
<div id="swiperID" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product " id=product>
<div class="row ">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
<img src="/dist/images/product.jpg" />
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
<div class="product__label">
<div class="text-label-m">TEST HIPOTECAS</div>
</div>
<div class="product__title">
<h2 class="
title-l
">
Haz nuestro test para saber cual de nuestras hipotecas se adapta a ti
</h2>
</div>
<div class="product__bodycopy">
<div class="
bodycopy-m
">
<p>Nos adaptamos a tu necesidades</p>
</div>
</div>
<div class="product__btn">
<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>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
<div class="
nav-arrow
">
<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="product__nav-forward nav-forward">
<div class="
nav-arrow
">
<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>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="product-swiper">
<div id="{{swiperID}}" class="swiper-container">
<div class="swiper-wrapper">
{{#each product}}
<div class="swiper-slide">
<div class="product {{#if this.isReversed}} product_reversed {{/if}}" id={{ this.id }}>
<div
class="row {{#if this.isReversed}} reverse {{/if}}{{#if this.isMobileReversed}} mobileReverse {{/if}}{{#if this.isYellow}}bg-color_yellow{{/if}}">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
{{#if isVideo}}
<video{{#if isAutoplay}}{{else}} controls{{/if}}
class="video{{#if isCover}} isCover{{/if}}" src="{{video-url}}" {{#if isAutoplay}}
muted autoplay{{/if}} loop></video>
{{else if isVideoYoutube}}
<div class="video-responsive{{#if isCover}} isCover{{/if}}">
<iframe width="560" height="315"
src="{{video-url-youtube}}{{#if isAutoplay}}&autoplay=1&mute=1&controls=0{{/if}}"
class="optanon-category-4" title="YouTube video player" frameborder="0"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
{{else}}
<img src="{{ this.data-img }}" {{#if isContain}} class="isContain" {{/if}} />
{{/if}}
{{#if isVideo}}
{{else if isVideoYoutube}}
{{else}}
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
{{#if this.number}}
{{> @number-xl this.number }}
{{/if}}
</div>
{{#if this.support-label }}
<div class="product__support-label-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="product__support-label">
{{> @text-label-m this.support-label }}
</div>
</div>
</div>
</div>
{{/if}}
</div>
</div>
</div>
{{/if}}
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
{{#if src}}
<div class="product__icon">
<img class="product__img" src="{{ this.src }}" alt="{{ this.alt }}">
</div>
{{/if}}
<div class="product__label">
{{> @text-label-m this.label }}
</div>
<div class="product__title">
{{> @title-l this.title }}
</div>
<div class="product__bodycopy">
{{> @bodycopy-m this.bodycopy }}
</div>
{{#if bulletlistitem}}
<div class="product__bulletList">
<ul>
{{#each bulletlistitem}}
<li>
{{> @icon this }}{{> @bodycopy-m this }}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if isTest}}
<div class="product__btn">
{{ render '@lightbox--steps-form' }}
</div>
{{else if isLink}}
<div class="product__link">
{{> @link this.link }}
</div>
{{else if btn}}
<div class="product__btn">
{{> @btn this.btn }}
</div>
{{else}}
{{/if}}
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
{{ render '@nav-arrow--back' }}
</div>
<div class="product__nav-forward nav-forward">
{{ render '@nav-arrow--forward' }}
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"swiperID": "swiperID",
"product": [
{
"id": "product",
"data-img": "/dist/images/product.jpg",
"isTest": true,
"btn": {
"href": "#",
"text": "Comprar casa"
},
"label": {
"text": "TEST HIPOTECAS"
},
"title": {
"text": "Haz nuestro test para saber cual de nuestras hipotecas se adapta a ti"
},
"bodycopy": {
"text": "<p>Nos adaptamos a tu necesidades</p>"
}
}
]
}
.product {
position: relative;
&_reversed {
.product {
&__content {
@media (--viewport-ms-only) {
padding: 11px 11px 11px 30px;
}
}
}
}
&-swiper {
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
}
&__support {position: relative;height: 100%; overflow:hidden; /* para evitar espacio bajo la imagen en reversed */line-height: 0;
img{width:100%; height:100%;object-fit:cover;
&.isContain{
height:auto;
object-fit: contain;
}
}
.video {
width: 100%;
height: auto;
left: 0;
top: 0;
overflow: hidden;
&.isCover {
height: 100%;
object-fit: cover;
}
}
.row {
padding: 40px 20px 34px;
position: absolute;
top: 0;
left: 0;
width: 100%;
@media (--viewport-ms-min) {
height: 100%;
padding: 60px 40px;
}
@media (--viewport-sm-min) {
padding: 60px 82px;
}
@media (--viewport-md-min) {
padding: 60px 74px;
}
&-label {
margin-top: 10px;
}
}
&-label-wrapper {
position: relative;
.row {
padding: 0;
position: relative;
}
}
&-text {
position: relative;
}
}
.video-responsive {
overflow: hidden;
padding-bottom: 56.3%;
/* Adecua este valor para controlar la altura del video */
position: relative;
height: 0;
iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
&.isCover {
width: 100vw;
height: 100%;
padding-bottom: 0;
/* Adecua este valor para controlar la altura del video */
iframe {
top: 50%;
left: 21%;
/*left: 70vh;*/
width: 100vw;
height: 100%;
transform: translate(-50%, -50%);
@media (--viewport-ms-min) {
left: 22vw;
}
@media only screen and (min-width: 800px) {
left: 22vw;
}
@media only screen and (min-width: 950px) {
left: 23vw;
}
@media (--viewport-sm-min) {
left: 23vw;
}
@media only screen and (min-width: 1100px) {
left: 24vw;
}
@media (--viewport-md-min) {
left: 23vw;
}
@media only screen and (min-width: 1900px) {
left: 17vw;
}
@media (--viewport-lg-min) {
left: 16.8vw;
}
@media only screen and (min-width: 2100px) {
left: 15vw;
}
@media (--viewport-xl-min) {
left: 13vw;
}
@media only screen and (max-width: 1189px) {
width: 130vw;
}
@media only screen and (max-width: 921px) {
width: 160vw;
}
@media only screen and (max-width: 800px) {
width: 174vw;
}
}
@media (--viewport-xs-max) {
padding-bottom: 56.3%;
height: 0;
iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
transform: none;
}
}
}
}
&__content {
padding: 20px 20px 30px 20px;
@media (--viewport-ms-min) {
padding: 11px 30px 30px 10px;
}
@media (--viewport-sm-min) {
padding: 42px 0;
}
@media (--viewport-md-min) {
padding: 32px 0;
}
}
&__icon {
margin-bottom: 20px;
}
&__label {
margin-bottom: 20px;
}
&__bodycopy {
margin-top: 20px;
}
&__btn,
&__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&__nav {
display: flex;
justify-content: space-between;
padding: 0 20px;
@media (--viewport-ms-min) {
justify-content: center;
padding: 0;
}
&-back,
&-forward {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
&__bulletList {
margin-top: 30px;
li {
display: flex;
flex-direction: row;
margin-bottom: 24px;
&:last-child {
@media (--viewport-xs-max) {
margin-bottom: 0;
}
}
.icon {
width: 20px;
height: 20px;
margin-right: 16px;
}
}
}
.row.mobileReverse {
@media (--viewport-ms-max) {
flex-direction: column-reverse;
}
}
.bg-color {
&_yellow {
background-color: var(--color-accent-light);
}
}
}
Variantes: Default, Link, Video, Image cover and contain (cover en el primero (por defecto) y contain en el segundo), Test hipotecas, Text instead of a number, Reversed, Slider, Slider Reversed. Permite configurar el id de cada producto, el src de imágen y vídeo, src y alt del icono.