<main>
<div class="call-me">
<div id="container-floating" class="container-floating">
<div class="wrap fade-out">
<div class="bots">
<div class="nd3 nds" data-toggle="tooltip" data-placement="left" data-original-title="#">
<a href="#"><img src="/dist/images/callme_ellos_hipotecas.svg" alt="Que me llamen" />
<div class="
bodycopy-s
">
Que me llamen
</div>
</a>
</div>
<div class="nd2 nds" data-toggle="tooltip" data-placement="left" data-original-title="#">
<a href="#">
<img src="/dist/images/callme_yo_hipotecas.svg" alt="Llamar yo" />
<div class="
bodycopy-s
">
Llamar yo
</div>
</a>
</div>
<div class="nd1 nds" data-toggle="tooltip" data-placement="left" data-original-title="#">
<a href="#">
<img src="/dist/images/callme_whatsapp_hipotecas.svg" alt="Whatsapp" />
<div class="
bodycopy-s
">
Whatsapp
</div>
</a>
</div>
</div>
<span class="arrow"></span>
</div>
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<button class="callme-button" type="button">
<img src="/dist/images/callme_hipotecas.svg" alt="Llamadme ya" class="svg" />
</button>
</div>
</div>
</div>
<header class="header">
<div class="header__wrapper">
<div class="header__menu">
<div class="header__head">
<div class="container">
<div class="header__head-wrapper">
<div class="header__head-main">
<div class="header__logo">
<a class="header__logo-link" href="#">
<img class="header__logo-img" src="/dist/images/logo-hipotecas.svg" alt="Logo">
</a>
</div>
<div class="header__popups hidden-xs-ms">
<ul class="header__popups-list">
<li class="header__popups-item">
<a class="popup__trigger" href="" target="" rel="" title="Blog">
Blog
</a>
</li>
<li class="header__popups-item">
<div class="popup"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
<button class="popup__trigger" type="button">
<svg class="icon icon-16_globe ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_globe"></use>
</svg>
ES
</button>
<div class="popup__window
">
<div class="popup__lang">
<ul class="popup__lang-list">
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
popup__lang-link_active
" href="#">
ES
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
EN
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
PT
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
CAT
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<button class="header__mobile-menu-control header__hamburger" type="button" title="Menu">
<svg class="icon icon-16_menu-burger ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-burger"></use>
</svg>
</button>
</div>
<div class="lightbox header__cta hidden-xs-ms" value="isContactonHeader">
<div class="lightbox__trigger header__cta-btn">
<button class="link
link_simple
btn btn_dark link_not-a-link link_btn link_trigger
" type="button">
<span>Contacto</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 class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title">
<h2 class="
title-l
">
Hablemos
</h2>
</div>
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4"> <a class="link
link_simple
link_has-icon link_has-icon_before
" href="tel:916193020">
<svg class="icon icon-tel icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#tel"></use>
</svg>
<span>91 619 30 20</span>
</a>
<a class="link
link_second-link
link_simple" href="tel:922101100">
<span>92 210 1100</span>
</a>
<div class="
bodycopy-s
">
<span>De lunes a viernes: 09:30 - 18:30h</span>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4"> <a class="link
link_simple
link_has-icon link_has-icon_before
" href="mailto:atenciónalcliente@hipotecas.com">
<svg class="icon icon-mail icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#mail"></use>
</svg>
<span>atenciónalcliente@hipotecas.com</span>
</a>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4"> <a class="link
link_has-icon link_has-icon_before
" href="#">
<svg class="icon icon-marker icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#marker"></use>
</svg>
<span>¿Dónde estamos?</span>
</a>
</li>
</ul>
<div class="lightbox__description">
<div class="
bodycopy-m
">
<p>Estamos disponibles para resolver todas tus dudas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main contactForm">
<div class="contact-form">
<form id="randomFormId1" class="contact-form__form form-distinguisher_contact-form" action="#" method="post" novalidate>
<div class="contact-form__content">
<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="">Nombre</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipCuantoNecesitas" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<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="">Apellidos</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId212" type="text" name="" title="Surname" autocomplete="" placeholder="¿Cómo te apellidas?" />
<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="">Mail de contacto</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-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prefix</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" value="+34" minlength='3' />
<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 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="">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>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-radio-group form-radio-group-distinguisher_contact-type " id="contactMethod">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-email " id="randomRadioId1" type="radio" title="E-mail" name="Contact method" value="POR EMAIL" checked>
<label class="radio-label " for="randomRadioId1" id="" value="">
<span class="caption-placeholder-m">POR EMAIL</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-phone " id="randomRadioId2" type="radio" title="Phone" name="Contact method" value="POR TELÉFONO">
<label class="radio-label " for="randomRadioId2" id="" value="">
<span class="caption-placeholder-m">POR TELÉFONO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-callme " id="randomRadioId3" type="radio" title="Call me" name="Contact method" value="LLAMADME YA">
<label class="radio-label " for="randomRadioId3" id="" value="">
<span class="caption-placeholder-m">LLAMADME YA</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>
<div class="form-list__field form-list__field_call-time hidden required">
<div class="form-select form-select-distinguisher_call-time" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">HORARIO PREFERENTE DE CONTACTO</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="randomSelectId1" type="radio" title="De 9:00 a 14:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId1">
De 9:00 a 14:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId2" type="radio" title="De 14:00 a 18:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId2">
De 14:00 a 18:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId3" type="radio" title="De 18:00 a 20:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId3">
De 18:00 a 20:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId4" type="radio" title="De 20:00 a 24:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId4">
De 20:00 a 24:00 h
</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>
</ul>
<div class="contact-form__legal">
<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="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Solicitar información
</button>
</div>
</div>
</div>
</form>
<div class="contact-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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__body">
<div class="container ">
<div class="header__body-wrapper">
<div class="header__body-main-overlay">
<div class="header__body-main">
<div class="header__body-main-content">
<div class="header__body-main-content-nav">
<div class="header__body-main-head">
<div class="header__socials">
<ul class="header__socials-list">
</ul>
</div>
</div>
<div class="header__body-main-profile hidden-sm-min">
</div>
<div class="header__body-main-menu ">
<ul class="header__body-main-list">
<li class="header__body-main-item">
<div class="
header__body-main-link
header__body-main-link_trigger
">
<button class="header__body-main-btn" type="button">
<span>Hipotecas</span>
<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>
</button>
</div>
<div class="header__body-main-submenu">
<div id="id" class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
</ul>
<div class="header-submenu__main-link-optional">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Texto del link opcional</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header__body-main-item">
<div class="
header__body-main-link
header__body-main-link_trigger
">
<button class="header__body-main-btn" type="button">
<span>Seguros</span>
<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>
</button>
</div>
<div class="header__body-main-submenu">
<div id="id" class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
</ul>
</div>
<div class="header-submenu__sidebar block">
<div class="header-submenu__sidebar-text hidden-xs-ms">
<span class="title-l
">texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="header-submenu__sidebar-link-optional">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Texto del link opcional</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header__body-main-item">
<div class="
header__body-main-link
">
<a class="header__body-main-btn" href="#">
<span>Simulador Hipotecas</span>
</a>
</div>
</li>
<li class="header__body-main-item">
<div class="
header__body-main-link
header__body-main-link_trigger
">
<button class="header__body-main-btn" type="button">
<span>Quienes somos</span>
<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>
</button>
</div>
<div class="header__body-main-submenu">
<div id="id" class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
</ul>
</div>
<div class="header-submenu__sidebar block">
<div class="header-submenu__sidebar-text hidden-xs-ms">
<span class="title-l
">texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="header-submenu__sidebar-link-optional">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Texto del link opcional</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header__body-main-item">
<div class="
header__body-main-link
header__body-main-link_trigger
">
<button class="header__body-main-btn" type="button">
<span>Te ayudamos</span>
<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>
</button>
</div>
<div class="header__body-main-submenu">
<div id="id" class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
<li class="header-submenu__main-list-wrap">
<ul>
<li class="header-submenu__main-list-wrap-item">
<span class="caption-label">Section label </span>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
</li>
</ul>
</li>
<li class="header-submenu__main-list-wrap">
<ul>
<li class="header-submenu__main-list-wrap-item">
<span class="caption-label">Section label </span>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
</li>
</ul>
</li>
<li class="header-submenu__main-list-wrap">
<ul>
<li class="header-submenu__main-list-wrap-item">
<span class="caption-label">Section label </span>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Texto de enlace del item</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="header-submenu__sidebar block">
<div class="header-submenu__sidebar-text hidden-xs-ms">
<span class="title-l
">texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="header-submenu__sidebar-link-optional">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Texto del link opcional</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="header__body-main-footer">
<div class="header__body-main-popups hidden-sm-min">
<ul class="header__body-main-popups-list">
<li class="header__body-main-popups-item">
<a class="popup__trigger" href="" title="Blog">
Blog
</a>
</li>
<li class="header__body-main-popups-item">
<a class="popup__trigger" href="" title="Área de clientes">
Área de clientes
</a>
</li>
<li class="header__body-main-popups-item">
<div class="
header__body-main-link
header__body-main-link_trigger
">
<button class="popup__trigger" type="button">
<svg class="icon icon-globe ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#globe"></use>
</svg>
<span>ES</span>
</button>
</div>
</li>
</ul>
<ul class="header__body-main-popups-content">
<li class="header__body-main-popups-content-item">
<div class="header__body-main-submenu">
<div class="popup__lang">
<ul class="popup__lang-list">
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
popup__lang-link_active
" href="#">
ES
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
EN
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
PT
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
CAT
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="header__body-main-content-btn hidden-sm-min">
<div class="header__cta-btn">
<a class="btn btn_dark" href="https://clientes.uci.es/" target="_blank" title="Tu espacio">
Area clientes
</a>
</div>
</div>
<button class="header__mobile-menu-control header__close" type="button" title="Close menu">
<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>
<div class="header__cta">
<div class="header__cta-btn hidden-ms hidden-xs hidden-sm-min">
<button id="" class="btn
" type="">
</button>
</div>
<div class="header__cta-btn sticky">
<div class="lightbox">
<div class="lightbox__trigger">
<button class="link link_simple link_has-icon link_has-icon_before link_has-icon link_has-icon_after btn btn_dark" type="button">
<span>Contacto</span>
</button>
</div>
</div>
<a class="btn
" href="#" id="">
Solicita tu hipoteca
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section class="splitter splitter_bg-color_white ">
<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="banner-ancho">
<div class="banner-ancho__header">
<div class="banner-ancho__header-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="banner-ancho__breadcrumbs">
<ul class="
breadcrumbs
breadcrumbs_light
">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m text-label-m_color_light">Home</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<div class="breadcrumbs__label inactive">
<div class="text-label-m text-label-m_color_light">Hipotecas</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="banner-ancho__header-main">
<div class="banner-ancho__header-head">
<div class="banner-ancho__title">
<h1 class="
title-xl title-xl_color_light
">Hipotecas</h1>
</div>
<div class="banner-ancho__support">
<div class="banner-ancho__support-bodycopy">
<h4 class="
title-s
title-s_color_light
">¿No eres residente en España?</h4>
</div>
<div class="banner-ancho__support-link">
<a class="link
link_color_light
" href="#">
<span>Entra en productos para no residentes</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="banner-ancho__header-content">
<div class="banner-ancho__description">
<div id="" class="
bodycopy-l
bodycopy_color_light
">
<p>Te ayudamos a financiar tu mayor proyecto, tu hogar.</p>
</div>
</div>
<div class="banner-ancho__bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<ul>
<li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.</li>
<li>Descubre nuestros productos para los residentes en España.</li>
<li>Puedes pedirnos consejo siempre que lo necesites</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="splitter splitter_bg-color_white ">
<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-buttons">
<div class="
product-buttons__wrapper
sticky-clone__wrapper
">
<ul class="product-buttons__list">
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">vive</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca Compra de casa</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">suma</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca Casa más reforma</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">cambia</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca cambio de casa</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">crea</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca compra de casa sobre plano</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">unifica</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca para Reunificación de deudas</h4>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
<section class="splitter splitter_bg-color_white ">
<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="advantages">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-md-10 col-lg-10">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-4 col-md-4 col-lg-4">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-satisfaccion ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#satisfaccion"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Condiciones transparentes y sin sorpresas</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-4 col-md-4 col-lg-4">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-gestorpersonalizado ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#gestorpersonalizado"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Siempre con un gestor personalizado para asesorarte</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-4 col-md-4 col-lg-4">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-productopersonalizado01 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#productopersonalizado01"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Productos adaptados a tus necesidades y estilo de vida</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Comento esta variante ya que parece no estar en uso (CA)
-->
<footer class="footer">
<div class="container">
<div class="footer__menu">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12">
<div class="footer__menu-tiles">
<ul class="row row_footer-20">
<li class="
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-20 col-md-4_8 col-md-4_8_footer-20
">
<div class="footer__menu-tile">
<!--OJO, esta clase está mal en integración en el footer.cshtml (CA) -->
<div class="tile-footer-menu">
<div class="tile-footer-menu__title">
<h3 class="
title-m
title-m_color_light
">Descubre Hipotecas</h3>
</div>
<div class="tile-footer-menu__body">
<div class="tile-footer-menu__list">
<ul class="row">
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Calcula tu hipoteca</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Te ayudamos</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Somos Hipotecas</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Preguntas frecuentes</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Quiénes somos</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Blog</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Opiniones Hipotecas</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-20 col-md-4_8 col-md-4_8_footer-20
">
<div class="footer__menu-tile">
<!--OJO, esta clase está mal en integración en el footer.cshtml (CA) -->
<div class="tile-footer-menu">
<div class="tile-footer-menu__title">
<h3 class="
title-m
title-m_color_light
">Nuestras soluciones</h3>
</div>
<div class="tile-footer-menu__body">
<div class="tile-footer-menu__list">
<ul class="row">
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Hipoteca Compra de casa</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Hipoteca Compra + reforma</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Hipoteca Cambio de casa</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Hipoteca Compra sobre plano</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Hipoteca Reunificación de préstamos</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Seguros</span>
</a>
</div>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
<div class="tile-footer-menu__item">
<div class="tile-footer-menu__link">
<a class="link
link_simple
link_large
link_footer
" href="#">
<span>Servicios</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-20 col-md-2_4 col-md-2_4_footer-20
">
<div class="footer__menu-tile">
<!--OJO, esta clase está mal en integración en el footer.cshtml (CA) -->
<div class="tile-footer-menu">
<div class="tile-footer-menu__title">
<h3 class="
title-m
title-m_color_light
">Contacto</h3>
</div>
<div class="tile-footer-menu__body">
<div class="tile-footer-menu__contact">
<div class="row">
<div class="col-xs-12 col-ms-6 col-sm-12 col-lg-12">
<div class="tile-footer-menu__contact-first-col">
<ul class="tile-footer-menu__contact-first-col-list">
<li class="tile-footer-menu__contact-first-col-item">
<div class="tile-footer-menu__contact-link">
<a class="link
link_simple
link_large
link_footer
" href="tel:916193020">
<span>91 619 30 20</span>
</a>
<a class="link
link_second-link
link_large
link_footer link_simple" href="tel:922101100">
<span>92 210 1100</span>
</a>
</div>
<div class="tile-footer-menu__contact-info">
<div class="
bodycopy-s
">
<span>De lunes a viernes: 09:30 - 18:30h</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-12 col-lg-12">
<div class="tile-footer-menu__contact-second-col">
<ul class="tile-footer-menu__contact-second-col-list">
<li class="tile-footer-menu__contact-second-col-item">
<div class="tile-footer-menu__contact-link">
<a class="link
link_simple
link_footer
" href="mailto:atenciónalcliente@hipotecas.com">
<span>atenciónalcliente@hipotecas.com</span>
</a>
</div>
</li>
<li class="tile-footer-menu__contact-second-col-item">
<div class="tile-footer-menu__contact-link">
<div class="lightbox " value="contactForm">
<div class="lightbox__trigger footer__lightbox-link">
<button class="link
link_simple
link_has-icon link_has-icon_after
" type="button">
<span>Formulario de contacto</span>
<svg class="icon icon-plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
</svg>
</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 class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__title">
<h2 class="
title-l
">
Trabajemos juntos
</h2>
</div>
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4"> <span class="link link_not-a-link
">
</span>
<div class="
bodycopy-s
">
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4"> <span class="link link_not-a-link
">
</span>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4"> <span class="link link_not-a-link
">
</span>
</li>
</ul>
<div class="lightbox__description">
<div class="
bodycopy-m
">
<p>Déjanos tus datos de contacto y nos pondremos en contacto contigo lo antes posible</p>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="lightbox__content-main contactForm">
<div class="contact-form">
<form id="randomFormId3" class="contact-form__form form-distinguisher_contact-form" action="#" method="post" novalidate>
<div class="contact-form__content">
<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="">Nombre</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipCuantoNecesitas" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<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="">Apellidos</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId212" type="text" name="" title="Surname" autocomplete="" placeholder="¿Cómo te apellidas?" />
<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="">Mail de contacto</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-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prefix</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" value="+34" minlength='3' />
<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 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="">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>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-radio-group form-radio-group-distinguisher_contact-type " id="contactMethod">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-email " id="randomRadioId1" type="radio" title="E-mail" name="Contact method" value="POR EMAIL" checked>
<label class="radio-label " for="randomRadioId1" id="" value="">
<span class="caption-placeholder-m">POR EMAIL</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-phone " id="randomRadioId2" type="radio" title="Phone" name="Contact method" value="POR TELÉFONO">
<label class="radio-label " for="randomRadioId2" id="" value="">
<span class="caption-placeholder-m">POR TELÉFONO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-callme " id="randomRadioId3" type="radio" title="Call me" name="Contact method" value="LLAMADME YA">
<label class="radio-label " for="randomRadioId3" id="" value="">
<span class="caption-placeholder-m">LLAMADME YA</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>
<div class="form-list__field form-list__field_call-time hidden required">
<div class="form-select form-select-distinguisher_call-time" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">HORARIO PREFERENTE DE CONTACTO</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="randomSelectId1" type="radio" title="De 9:00 a 14:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId1">
De 9:00 a 14:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId2" type="radio" title="De 14:00 a 18:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId2">
De 14:00 a 18:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId3" type="radio" title="De 18:00 a 20:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId3">
De 18:00 a 20:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId4" type="radio" title="De 20:00 a 24:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId4">
De 20:00 a 24:00 h
</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>
</ul>
<div class="contact-form__legal">
<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="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Solicitar información
</button>
</div>
</div>
</div>
</form>
<div class="contact-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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="tile-footer-menu__contact-second-col-item">
<div class="tile-footer-menu__contact-link">
<a class="link
link_footer
" href="#">
<span>¿Dónde estamos?</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer__main">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12">
<div class="footer__main-section">
<div class="footer__main-info">
<div class="footer__main-info-head"> <!-- aquí va el logo cuando no es reducido UCI -->
<a class="footer__main-info-head-link" href="#">
<div class="footer__main-info-head-pic" style="max-width: 47px">
<img class="footer__main-info-img" src="/dist/images/logo-white.svg" width="47px" alt="UCI">
</div>
</a>
</div>
<div class="footer__main-info-body">
<div class="footer__main-info-list">
<ul class="row row_footer row_footer-40">
<li class="
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-40
">
<div class="footer__main-info-item">
<div class="footer__main-info-desc">
<div class="
bodycopy-s
bodycopy_color_light
">
<p>Hipotecas.com es el canal de comercialización de hipotecas a través de Internet de Unión de Créditos Inmobiliarios, S.A. E.F.C.</p>
</div>
</div>
</div>
</li>
<li class="
col-xs-12 col-ms-6 col-sm-4 col-sm-4_footer-40
">
<div class="footer__main-info-item">
<div class="footer__main-info-links">
<ul class="row">
<li class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
<div class="footer__main-info-link">
<a class="link
link_simple
link_large
link_color_light
link_footer
" href="#">
<span>UCI España</span>
</a>
</div>
</li>
<li class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
<div class="footer__main-info-link">
<a class="link
link_simple
link_large
link_color_light
link_footer
" href="#">
<span>UCI Portugal</span>
</a>
</div>
</li>
</ul>
</div>
<div class="footer__main-info-general-link">
<a class="link
link_simple
link_color_light
link_footer
" href="#">
<span>Todas las webs del grupo</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer__main-section">
<div class="footer__main-share">
<ul class="footer__main-share-list">
<li class="footer__main-share-item">
<a class="footer__main-share-link" href="#">
<div class="footer__main-share-logo" style="max-width: 175px">
<img class="footer__main-share-img" src="/dist/images/logo-hipotecas-accent.svg" width="175px" alt="Hipotecas.com">
</div>
</a>
</li>
<li class="footer__main-share-item">
<ul class="footer__main-share-socials">
<li class="footer__main-share-social">
<a class="footer__main-share-social-link" href="#fb">
<svg class="icon icon-fb ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#fb"></use>
</svg>
</a>
</li>
<li class="footer__main-share-social">
<a class="footer__main-share-social-link" href="#inst">
<svg class="icon icon-instagram ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#instagram"></use>
</svg>
</a>
</li>
<li class="footer__main-share-social">
<a class="footer__main-share-social-link" href="#in">
<svg class="icon icon-in ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#in"></use>
</svg>
</a>
</li>
<li class="footer__main-share-social">
<a class="footer__main-share-social-link" href="#yt">
<svg class="icon icon-youtube ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#youtube"></use>
</svg>
</a>
</li>
</ul>
</li>
<li class="footer__main-share-item">
<ul class="footer__main-share-certificates">
<li class="footer__main-share-certificate">
<a class="footer__main-share-certificate-link" href="#" target="_blank" noopener>
<div class="footer__main-share-certificate-pic" style="width: auto; height: 80px">
<img class="footer__main-share-certificate-img" src="https://hipotecas.com/-/media/Project/Ecoweb/Certifications/gptw.png" alt="Great Place to Work">
</div>
</a>
</li>
<li class="footer__main-share-certificate">
<a class="footer__main-share-certificate-link" href="#" target="_blank" noopener>
<div class="footer__main-share-certificate-pic" style="width: auto; height: 80px">
<img class="footer__main-share-certificate-img" src="https://hipotecas.com/-/media/Project/Ecoweb/Certifications/confianza-online.png" alt="Confianza online">
</div>
</a>
</li>
<li class="footer__main-share-certificate">
<a class="footer__main-share-certificate-link" href="#" target="_blank" noopener>
<div class="footer__main-share-certificate-pic" style="width: auto; height: 80px">
<img class="footer__main-share-certificate-img" src="https://hipotecas.com/-/media/Project/Ecoweb/Certifications/aenor-iso9001.png" alt="AENOR ISO 9001">
</div>
</a>
</li>
<li class="footer__main-share-certificate">
<a class="footer__main-share-certificate-link" href="#" target="_blank" noopener>
<div class="footer__main-share-certificate-pic" style="width: auto; height: 80px">
<img class="footer__main-share-certificate-img" src="https://hipotecas.com/-/media/Project/Ecoweb/Certifications/ekomi.png" alt="Ekomi">
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer__main-section">
<div class="footer__main-legal">
<ul class="footer__main-legal-list">
<li class="footer__main-legal-item ">
<a class="footer__main-legal-link" href="#">
<div class="bodycopy-xs
bodycopy_color_light
">
<span>Aviso legal y Condiciones de uso</span>
</div>
</a>
</li>
<li class="footer__main-legal-item ">
<a class="footer__main-legal-link" href="#">
<div class="bodycopy-xs
bodycopy_color_light
">
<span>Información legal y reclamaciones</span>
</div>
</a>
</li>
<li class="footer__main-legal-item ">
<a class="footer__main-legal-link" href="#">
<div class="bodycopy-xs
bodycopy_color_light
">
<span>Política de Privacidad y cookies</span>
</div>
</a>
</li>
<li class="footer__main-legal-item ">
<a class="footer__main-legal-link" href="#">
<div class="bodycopy-xs
bodycopy_color_light
">
<span>Gobierno corporativo</span>
</div>
</a>
</li>
<li class="footer__main-legal-item ">
<a class="footer__main-legal-link" href="#">
<div class="bodycopy-xs
bodycopy_color_light
">
<span>Sitemap</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</main>
<main>
{{#if doesHeaderExist}}
{{#if isHipotecas}}
{{ render '@header--hipotecas' }}
{{else}}
{{ render '@header' }}
{{/if}}
{{/if}}
{{ render '@banner-ancho' }}
{{#if isHipotecas}}
{{ render '@product-buttons--hipotecas' }}
{{else}}
{{ render '@product-buttons' }}
{{/if}}
{{ render '@product--test-hipotecas' }}
{{#if doesFooterExist}}
{{#if isHipotecas}}
{{ render '@advantages--hipotecas' }}
{{ render '@footer--hipotecas' }}
{{else}}
{{ render '@advantages' }}
{{ render '@footer' }}
{{/if}}
{{/if}}
</main>
{
"doesHeaderExist": true,
"doesFooterExist": true,
"isHipotecas": true
}
.hipotecas {
}
No notes defined.