<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="menu-tab__wrapper">
<div class="menu-tab" role="tablist">
<div class="menu-tab-scroller">
<div class="menu-tab-scroller__scroll menu-tab-scroller__scroll--fixed ">
<div class="menu-tab-scroller__scroll-content row">
<button class="menu-tab-button menu-tab-item active " role="tab" aria-selected="true" tabindex="0" id="tab-1">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Tab selected 1</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item " role="tab" aria-selected="true" tabindex="0" id="tab-2">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Tab unselected 2</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item inactive " role="tab" aria-selected="true" tabindex="0" id="tab-3">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Tab disabled 3</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
</div>
</div>
</div>
</div>
<!--content menu-tab-->
<div class="menu-tab-content" id="">
<!-- EJEMPLO. NO SE INTEGRA. (CA)-->
<div class="menu-tab-content__item active" role="false">
<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<form id="randomFormId1" action="" method="post" class="validation">
<div class="row columns-form">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="columns-form__form form-distinguisher_columns-form" id="randomFormId1" action="#" method="post" novalidate>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">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="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">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>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">Telefono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="randomInputId4" 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>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="provincia">¿Dónde compras?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="provincia">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="provincia">
<div class="access-select__option access-select__chosen-option">Elije provincia</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="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="landing-price">¿Por cuánto compras?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing-price
" id="landing-price" type="text" name="" title="Por cuánto compras" 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="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="landing-howmuch">¿Cuánto aportas?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing--howmuch
" id="landing-howmuch" type="text" name="" title="¿Cuánto aportas?" 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="columns-form__success hidden">
<div class="success">
<div class="success__icon">
<svg class="icon icon-complex_enviar icon-56 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
</svg>
</div>
<div class="success__title">
<h2 class="
title-l
">
Información enviada
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<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>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Sí quiero
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
texto contenedor 1
</div>
<!-- EJEMPLO. NO SE INTEGRA. (CA)-->
<div class="menu-tab-content__item " role="false">
<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<form id="randomFormId1" action="" method="post" class="validation">
<div class="row columns-form">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="columns-form__form form-distinguisher_columns-form" id="randomFormId1" action="#" method="post" novalidate>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">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="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">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>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">Telefono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="randomInputId4" 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>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="provincia">¿Dónde compras?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="provincia">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="provincia">
<div class="access-select__option access-select__chosen-option">Elije provincia</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="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="landing-price">¿Por cuánto compras?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing-price
" id="landing-price" type="text" name="" title="Por cuánto compras" 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="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="landing-howmuch">¿Cuánto aportas?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing--howmuch
" id="landing-howmuch" type="text" name="" title="¿Cuánto aportas?" 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="columns-form__success hidden">
<div class="success">
<div class="success__icon">
<svg class="icon icon-complex_enviar icon-56 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
</svg>
</div>
<div class="success__title">
<h2 class="
title-l
">
Información enviada
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<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>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Sí quiero
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
texto contenedor 2
</div>
<!-- EJEMPLO. NO SE INTEGRA. (CA)-->
<div class="menu-tab-content__item " role="false">
<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<form id="randomFormId1" action="" method="post" class="validation">
<div class="row columns-form">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="columns-form__form form-distinguisher_columns-form" id="randomFormId1" action="#" method="post" novalidate>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">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="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">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>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="">Telefono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="randomInputId4" 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>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="provincia">¿Dónde compras?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="provincia">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="provincia">
<div class="access-select__option access-select__chosen-option">Elije provincia</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="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="landing-price">¿Por cuánto compras?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing-price
" id="landing-price" type="text" name="" title="Por cuánto compras" 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="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<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="landing-howmuch">¿Cuánto aportas?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing--howmuch
" id="landing-howmuch" type="text" name="" title="¿Cuánto aportas?" 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="columns-form__success hidden">
<div class="success">
<div class="success__icon">
<svg class="icon icon-complex_enviar icon-56 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
</svg>
</div>
<div class="success__title">
<h2 class="
title-l
">
Información enviada
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<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>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Sí quiero
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
texto contenedor 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#if isNoSplitter}}
<div class="menu-tab__wrapper">
<div class="menu-tab{{#if isCard}} isCard{{/if}}{{#if isFixedInScroll}} fixedOnScroll{{/if}}" role="tablist" {{#if
hasID}}id="{{idComponent}}" {{/if}}>
{{#if isSwiper}}
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--16-chevron-left' }}
</div>
</div>
{{/if}}
<div class="menu-tab-scroller">
<div
class="menu-tab-scroller__scroll menu-tab-scroller__scroll--{{type}} {{#if isSwiper}} swiper-container{{/if}}{{#if isSwiperVariant}} swiper-container{{/if}}">
<div
class="menu-tab-scroller__scroll-content{{#if isFixed}} row{{/if}}{{#if isSwiper}} swiper-wrapper{{/if}}{{#if isSwiperVariant}} swiper-wrapper{{/if}}">
{{#each menuTab}}
{{#if isCard}}
<button
class="menu-tab-button col-xs-6 col-ms-6 col-sm-6 col-lg-6 col{{#if isSwiper}} swiper-slide{{/if}}{{#if isSwiperVariant}} swiper-slide{{/if}}">
{{> '@card-contact' card}}
</button>
{{else}}
<button
class="menu-tab-button menu-tab-item {{state}} {{#if isFixed}} col-xs-4{{/if}} {{#if isSwiper}} swiper-slide{{/if}} {{#if isSwiperVariant}} swiper-slide{{/if}} "
role="tab" aria-selected="true" tabindex="0" id="{{idItem}}">
<span class="menu-tab__content">
{{#if hasIcon}}
<i class="menu-tab__content--icon" aria-hidden="true">
{{> '@icon' iconTab}}
</i>
{{/if}}
<span class="menu-tab__text-label">{{> '@caption' labelCta}}</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
{{/if}}
{{/each}}
</div>
</div>
</div>
{{#if isSwiperVariant}}
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--16-arrow-left' }}
</div>
</div>
{{/if}}
{{#if isSwiperVariant}}
<div class="swiper-navigation">
<div class="swiper-button-next">
{{ render '@icon--16-arrow-right' }}
</div>
</div>
{{/if}}
{{#if isSwiper}}
<div class="swiper-navigation">
<div class="swiper-button-next">
{{ render '@icon--16-chevron-right' }}
</div>
</div>
{{/if}}
</div>
<!--content menu-tab-->
{{#if hasMenuTabContent}}
<div class="menu-tab-content" id="">
{{#each menuTabContent}}
<!-- EJEMPLO. NO SE INTEGRA. (CA)-->
<div class="menu-tab-content__item {{state}}" role="{{content}}">
{{#if isFixedInScroll}}
{{ render '@columns-form--full-width-component-and-steps' }}
{{else}}
{{ render '@columns-form--full-width-component' }}
{{/if}}
{{example}}
</div>
{{/each}}
</div>
{{/if}}
</div>
{{else}}
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="menu-tab__wrapper">
<div class="menu-tab{{#if isCard}} isCard{{/if}}{{#if isFixedInScroll}} fixedOnScroll{{/if}}" role="tablist" {{#if
hasID}}id="{{idComponent}}" {{/if}}>
{{#if isSwiper}}
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--16-chevron-left' }}
</div>
</div>
{{/if}}
<div class="menu-tab-scroller">
<div
class="menu-tab-scroller__scroll menu-tab-scroller__scroll--{{type}} {{#if isSwiper}} swiper-container{{/if}}">
<div
class="menu-tab-scroller__scroll-content{{#if isFixed}} row{{/if}}{{#if isSwiper}} swiper-wrapper{{/if}}">
{{#each menuTab}}
{{#if isCard}}
<button
class="menu-tab-button col-xs-6 col-ms-6 col-sm-6 col-lg-6 col{{#if isSwiper}} swiper-slide{{/if}}">
{{> '@card-contact' card}}
</button>
{{else}}
<button
class="menu-tab-button menu-tab-item {{state}} {{#if isFixed}} col-xs-4{{/if}} {{#if isSwiper}} swiper-slide{{/if}}"
role="tab" aria-selected="true" tabindex="0" id="{{idItem}}">
<span class="menu-tab__content">
{{#if hasIcon}}
<i class="menu-tab__content--icon" aria-hidden="true">
{{> '@icon' iconTab}}
</i>
{{/if}}
<span class="menu-tab__text-label">{{> '@caption' labelCta}}</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
{{/if}}
{{/each}}
</div>
</div>
</div>
{{#if isSwiper}}
<div class="swiper-navigation">
<div class="swiper-button-next">
{{ render '@icon--16-chevron-right' }}
</div>
</div>
{{/if}}
</div>
<!--content menu-tab-->
<div class="menu-tab-content" id="">
{{#each menuTabContent}}
<!-- EJEMPLO. NO SE INTEGRA. (CA)-->
<div class="menu-tab-content__item {{state}}" role="{{content}}">
{{#if isFixedInScroll}}
{{ render '@columns-form--full-width-component-and-steps' }}
{{else}}
{{ render '@columns-form--full-width-component' }}
{{/if}}
{{example}}
</div>
{{/each}}
</div>
</div>
{{/content}}
{{/extend}}
{{/if}}
{
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"type": "fixed",
"menuTab": [
{
"idItem": "tab-1",
"hasIcon": false,
"state": "active",
"labelCta": {
"type": "-call-to-action",
"text": "Tab selected 1"
}
},
{
"idItem": "tab-2",
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Tab unselected 2"
}
},
{
"idItem": "tab-3",
"hasIcon": false,
"state": "inactive",
"labelCta": {
"type": "-call-to-action",
"text": "Tab disabled 3"
}
}
],
"menuTabContent": [
{
"state": "active",
"content": "content1",
"example": "texto contenedor 1"
},
{
"content": "content2",
"example": "texto contenedor 2"
},
{
"content": "content3",
"example": "texto contenedor 3"
}
],
"isFixed": true
}
.menu-tab {
width: 100%;
height: 50px;
display: flex;
gap: 8px;
@media (--viewport-ms-max) {
&.fixedOnScroll {
background-color: var(--color-white);
position: -webkit-sticky;
position: sticky;
top: var(--header-height, 0);
z-index: 2;
}
}
&-item {
color: #191919;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
height: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: 0;
padding: 0 32px;
border: none;
outline: none;
background: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
z-index: 1;
width: auto;
border-bottom: 1px solid var(--color-gray-80);
.icon {
fill: var(--color-gray-80);
}
&.active {
border-bottom: 1px solid var(--color-secondary-brand);
color: var(--color-secondary-brand);
.menu-tab-indicator {
border-bottom: 1px solid var(--color-secondary-brand);
color: var(--color-secondary-brand);
}
.icon {
fill: var(--color-secondary-brand);
}
}
&--disabled {
border-bottom: 1px solid var(--color-gray-40);
color: var(--color-gray-40);
pointer-events: none;
.menu-tab-indicator {
border-bottom: 1px solid var(--color-gray-40);
color: var(--color-gray-40);
}
.icon {
fill: var(--color-gray-40);
}
}
}
&__content {
display: flex;
justify-content: center;
align-items: center;
&--underline {
border-color: var(--color-text-primary);
border-top-width: 0;
align-self: flex-end;
box-sizing: border-box;
width: 100%;
border-top-style: solid;
}
&--icon {
color: var(--color-primary);
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
}
}
&-indicator {
display: flex;
position: absolute;
top: 0;
left: 0;
justify-content: center;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
border-bottom: 1px solid #191919;
&--active {
border-bottom: 1px solid #e4002b;
color: #e4002b;
}
&--disabled {
border-bottom: 1px solid #cdcdcd;
color: #cdcdcd;
pointer-events: none;
}
}
&-scroller {
overflow: hidden;
width: 100%;
&__scroll {
display: flex;
&-content {
position: relative;
display: flex;
-webkit-transform: none;
transform: none;
will-change: transform;
flex: 1 0 auto;
@media (min-width: 1023px) and (max-width: 1078px){
flex:auto;/*para evitar un bug a 1024*/
}
align-items: center;
height: 50px;
gap: 8px;
}
&--hug {
&-start {
.menu-tab-scroller__scroll-content {
justify-content: flex-start;
}
}
&-center {
.menu-tab-scroller__scroll-content {
justify-content: center;
}
}
}
&--fixed {
overflow: hidden;
@media (--viewport-ms-max) {
width: calc(100% + 60px);
padding: 0 30px;
margin: 0 -30px;
background-color: var(--color-white);
}
@media (--viewport-xs-max) {
width: calc(100% + 40px);
padding: 0 20px;
margin: 0 -20px;
}
.menu-tab-scroller__scroll-content {
justify-content: flex-start;
flex-flow: nowrap;
}
.menu-tab-item {
min-width: 90px;
flex: 1 0 auto;
width: auto;
}
&.swiper-container {
overflow: visible;
&+.swiper-navigation {
padding: 17px 0;
display: flex;
margin-left: auto;
margin-right: auto;
padding: 0;
justify-content: space-between;
align-items: center;
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background: var(--color-white);
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background: var(--color-white);
}
}
}
.swiper-wrapper {
margin-left: 0;
margin-right: 0;
}
}
}
}
&-content {
&__item {
display: none;
flex-flow: column;
width: 100%;
&.active {
display: flex;
}
}
.splitter {
.container {
margin: 0;
padding: 0;
.splitter__wrapper {
margin: 0;
padding: 0;
background: none;
}
}
}
}
/* Swiper Variation*/
.swiper {
&-pagination {
margin: 0 50px;
&-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
&-bullet-active {
background: var(--color-accent);
}
}
&-pagination,
&-button-prev,
&-button-next {
position: relative;
&::after {
display: none;
}
.icon {
height: 20px;
width: 28px;
fill: var(--color-accent);
}
}
&-button-next,
&-button-prev {
top: 0;
width: 50px;
height: 50px;
margin-top: 0;
left: 0;
&.swiper-button-disabled,
&.swiper-button-disabled {
display: none;
}
}
}
&.isCard {
height: auto;
.menu-tab-scroller__scroll-content {
height: auto;
grid-gap: 0;
button {
height: 100%;
.card-contact {
width: 100%;
border: 1px solid var(--color-text-primary);
padding: 40px 48px;
&.inactive {
border: solid 1px var(--color-border);
}
}
}
@media (--viewport-ms-max) {
gap: 16px;
flex-direction: column;
flex: auto;
button {
flex-basis: fit-content;
max-width: 100%;
width: 100%;
.card-contact {
height: auto;
.card-contact__title {
span {
display: none;
}
.title-m {
font: 16px/24px 'Jornada Sans Medium';
}
}
}
}
}
}
@media (--viewport-ms-max) {
&.fixedOnScroll {
.menu-tab-scroller {
overflow: visible;
}
.menu-tab-scroller__scroll--fixed {
overflow: visible;
}
.menu-tab-scroller__scroll-content {
overflow-x: scroll;
scrollbar-width: none;
@media (--viewport-sm-max) {
gap: 0;
flex-direction: row;
flex: auto;
button {
/*flex-basis: fit-content;
max-width: initial;
width: initial;*/
max-width: 100%;
width: 100%;
flex: auto;
.card-contact {
height: auto;
padding: 16px;
.card-contact__content {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
.card-contact__link {
display: none;
}
.card-contact__pic {
margin-bottom: 0;
}
.card-contact__title {
margin-bottom: 0;
span {
display: none;
}
.title-m {
font: 16px 'Jornada Sans Medium';
line-height: 0;
padding-top: 3px;
}
}
}
}
}
}
}
}
}
}
}
No notes defined.