<main class="max-finance-calculator">
<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 splitter_header-before ">
<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="row">
<div class=" col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col ">
<div class="ancho-completo-header ancho-completo-header_before">
<div class="ancho-completo-header__nav">
<div class="ancho-completo-header__breadcrumbs">
<ul class="
breadcrumbs
">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">Home</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<div class="breadcrumbs__label inactive">
<div class="text-label-m">calculadora</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ancho-completo-header__title">
<h1 class="
title-l
">
Calculadora de hipotecas
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="splitter splitter_bg-color_white splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="row calculator-form-max-finance">
<form id="calculatorForm-max-finance">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col entradilla">
<div class="
bodycopy-m
">
¿No sabes qué vivienda puedes permitirte? Haz una simulación con nuestra Calculadora de hipotecas y descubre la máxima financiación que necesitas, qué tendrías que aportar y qué gastos necesitarías tener en cuenta.
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="/dist/images/satisfaccion.svg" alt="descripción">
<h2 class="
title-m
title-m_color_accent-dark
">Datos personales</h2>
</div>
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="randomFormId1" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider" id="ageRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuál es tu edad?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">¿Cuál es tu edad?</p>
<div class="
bodycopy-s
">
Edad del mayor de los titulares.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="ageRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='67' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
67 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="ingresosMes">INGRESOS MENSUALES TOTALES NETOS</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Ingresos mensuales netos</h4>
<div class="
bodycopy-s
">
Suma total de los ingresos de todos los titulares de la hipoteca.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="ingresosMes" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="gastosMes">GASTOS OTROS PRÉSTAMOS</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Gastos otros préstamos</h4>
<div class="
bodycopy-s
">
Suma total de otros préstamos, deudas, hipotecas o pensiones.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="gastosMes" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="/dist/images/house.svg" alt="descripción">
<h2 class="
title-m
title-m_color_accent-dark
">Datos de la vivienda</h2>
</div>
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="randomFormId1" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-select form-select-distinguisher_provincia" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="where">¿Dónde quieres comprar?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="where-input">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="where-input">
<div class="access-select__option access-select__chosen-option">Elije provincia</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="purpose">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Tienes vivienda elegida?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="viviendaElegidaSi" type="radio" title="Sí" name="Vivienda elegida" value="Sí" checked>
<label class="radio-label " for="viviendaElegidaSi" id="" value="">
<span class="caption-placeholder-m">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="viviendaElegidaNo" type="radio" title="No" name="Vivienda elegida" value="No">
<label class="radio-label " for="viviendaElegidaNo" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="tipoVivienda">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Tipo de inmueble</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipoViviendaNueva" type="radio" title="Nuevo" name="Tipo de inmueble" value="Nuevo" checked>
<label class="radio-label " for="tipoViviendaNueva" id="" value="">
<span class="caption-placeholder-m">Nuevo</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="tipoViviendaSegundaMano" type="radio" title="Segunda mano" name="Tipo de inmueble" value="2ª mano">
<label class="radio-label " for="tipoViviendaSegundaMano" id="" value="">
<span class="caption-placeholder-m">2ª mano</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>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group inColumn" id="usoInmueble">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Cual sera el uso de la vivienda?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="habitual" type="radio" title="habitual" name="usoInmueble" value="Vivienda habitual" checked>
<label class="radio-label " for="habitual" id="" value="">
<span class="caption-placeholder-m">Vivienda habitual</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="segundaResidencia" type="radio" title="Segunda mano" name="usoInmueble" value="Segunda residencia">
<label class="radio-label " for="segundaResidencia" id="" value="">
<span class="caption-placeholder-m">Segunda residencia</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group " id="reforma">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Quieres reformar?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reformaSi" type="radio" title="Si" name="Quieres reformar" value="Sí" checked>
<label class="radio-label " for="reformaSi" id="" value="">
<span class="caption-placeholder-m">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reformaNo" type="radio" title="No" name="Quieres reformar" value="No">
<label class="radio-label " for="reformaNo" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col submit" id="DivSubmit">
<div class="wrap-bloque">
<div class="
tile
">
<!-- ==== <a class="tile__link" href=""> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="" alt="">
</div>
<div class="tile__label">
<div class="text-label-m"></div>
</div>
<div class="tile__title">
<h3 class="
title-m
"></h3>
</div>
<div class="tile__btn">
<button id="bntCalcular" class="btn
" type="button" tabindex="-1">
Calcular
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col results" id="DivResultados" style="display:block;">
<div class="wrap-bloque">
<div class="title-with-icon">
<img class="title-with-icon__img" src="/dist/images/hand-with-dots.svg" alt="descripción">
<h2 class="
title-m
title-m_color_accent-dark
">Resultados de tu simulación</h2>
</div>
<div class="calculator-form-max-finance__form form-distinguisher_calculator-form" id="randomFormId1" action="#" method="post" novalidate>
<ul class="form-list calculator-form-list row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Precio de la vivienda</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
Este es el precio de la vivienda a la que puedes acceder con nosotros.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="MortgageHousePriceRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="MortgageHousePriceRangeInput" type="text" name="" title="Importe de la vivienda" min='100000' max='1000000' data-default='200000' step='1000'>
<div class="range-slider__symbol" for="MortgageHousePriceRangeInput">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderPrice"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
100.000€
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-input bgaccentlight">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Préstamo</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
Este es el importe máximo de financiación que podrías obtener para la compra de tu vivienda.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="MortgageAmountInput" type="text" name="" title="Mortgage Amount" value="80.000">
<div class="form-input__symbol" for="MortgageAmountInput">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-range-slider bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Entrada</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
Con los datos que has facilitado, y con carácter general, necesitarías aportar la diferencia entre el precio de la vivienda y el importe de la financiación, más gastos.
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="SavingsRangeSlider">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="SavingsRangeInput" type="text" name="" title="Entrada" min='20000' max='800000' data-default='40000' step='1000'>
<div class="range-slider__symbol" for="SavingsRangeInput">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id="sliderAportacion"></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div id="aportacion-start" class="bodycopy-xs
">
20.000€
</div>
</div>
<div class="range-slider__legend-end">
<div id="aportacion-end" class="bodycopy-xs
">
800.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-8 col-lg-8 col-ms-mr-ml">
<div class="description-list">
<h3>
<div class="text-label-m">En total, necesitas tener ahorrado:</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy">Entrada</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">20.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Impuestos y gastos de compraventa</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">2.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="total" id=""><span class="bodycopy">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="total" id=""><span class="bodycopy">22.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
<div class="lightbox " value="calculatorLightbox3">
<div class="lightbox__trigger">
<button class="link
link_simple
" type="button" id="LnkGastos">
<span>Ver detalle de los impuestos y gastos</span>
</button>
</div>
<div class="lightbox__overlay" id="divGastos">
<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" id="CloseGastos">
<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 calculatorLightbox3">
<h2 class="
title-l
">
Detalle de impuestos y gastos
</h2>
</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 calculatorLightbox3">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-9 col-lg-9 col-ms-mr-ml">
<div class="description-list">
<h3>
<div class="text-label-m">Impuestos y gastos de compraventa</div>
</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
<dl>
<dt class="" id=""><span class="bodycopy">Notaría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">20.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Registro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">1.200 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Gestoría</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">800 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="" id=""><span class="bodycopy">Impuestos*</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="" id=""><span class="bodycopy">2.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
<dt class="total" id=""><span class="bodycopy">Total</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dt>
<dd class="total" id=""><span class="bodycopy">42.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
</dl>
</div>
</div>
</div>
<div class="clarification">
<h3>
<div class="
text-label-s
"><span></span></div>
</h3>
<div class="text">
<div class="
bodycopy-m
">
<p>Los gastos de constitución de hipoteca serán asumidos por la Entidad.</p>
<p>* En el caso de que la compra de la vivienda sea de primera mano, al precio de compra se le aplicará el IVA y en el caso de que la compra sea de una vivienda de segunda mano, se aplicará el ITP según comunidad autónoma.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="features">
<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="flap">
<div class="wrap">
<ul class="text">
<li class="title"><span class="title
">Solicita tu hipoteca dándonos unos pocos datos más</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</div>
<ul class="actions">
<li class="enlace"> <a class="link
" href="#">
<span>Link</span>
</a>
</li>
<li class="button"> <a class="btn
btn_secondary
" href="#" id="">
Descubrir producto
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
</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 class="max-finance-calculator">
{{#if isHipotecas}}
{{ render '@header--hipotecas' }}
{{ render '@ancho-completo-header--for-calculator' }}
{{ render '@calculator-form-max-finance--hipotecas' }}
{{ render '@advantages--hipotecas' }}
{{ render '@footer--hipotecas' }}
{{else}}
{{ render '@header' }}
{{ render '@ancho-completo-header--for-calculator' }}
{{ render '@calculator-form-max-finance' }}
{{ render '@advantages' }}
{{ render '@footer' }}
{{/if}}
</main>
{
"isHipotecas": true
}
.max-finance-calculator {
}
No notes defined.