<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_UCI.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_UCI.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_UCI.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_UCI.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_UCI.png" 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="googletranslate">
<div id="google_translate_element" class="google optanon-category-3"></div>
<script type="text/javascript" class="optanon-category-3">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'es,ca,en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" class="optanon-category-3"></script>
</div> ==== -->
<div class="header__googletranslate">
<div class="googletranslate optanon-category-2">
<div id="google_translate_element" class="google optanon-category-2"></div>
<script type="text/javascript" class="optanon-category-2">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'es,ca,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
gaTrack: true
}, 'google_translate_element');
var removePopup = document.getElementById('goog-gt-tt');
removePopup.parentNode.removeChild(removePopup);
}
</script>
</div>
</div>
</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>
<li class="header__body-main-popups-item for-gt">
<!-- ==== <div class="googletranslate">
<div id="google_translate_element" class="google optanon-category-3"></div>
<script type="text/javascript" class="optanon-category-3">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'es,ca,en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" class="optanon-category-3"></script>
</div> ==== -->
<div class="header__googletranslate">
<div class="googletranslate optanon-category-2">
<div id="google_translate_element" class="google optanon-category-2"></div>
<script type="text/javascript" class="optanon-category-2">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'es,ca,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
gaTrack: true
}, 'google_translate_element');
var removePopup = document.getElementById('goog-gt-tt');
removePopup.parentNode.removeChild(removePopup);
}
</script>
</div>
</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 class="header__googletranslate">
<!-- ==== <div class="googletranslate">
<div id="google_translate_element" class="google optanon-category-3"></div>
<script type="text/javascript" class="optanon-category-3">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'es,ca,en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" class="optanon-category-3"></script>
</div> ==== -->
<div class="header__googletranslate">
<div class="googletranslate optanon-category-2">
<div id="google_translate_element" class="google optanon-category-2"></div>
<script type="text/javascript" class="optanon-category-2">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'es,ca,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
gaTrack: true
}, 'google_translate_element');
var removePopup = document.getElementById('goog-gt-tt');
removePopup.parentNode.removeChild(removePopup);
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
{{#if hasCallme}}
{{#if isHipotecas}}
{{ render '@call-me--hipotecas' }}
{{else if isHipotecasAccent}}
{{ render '@call-me--hipotecas' }}
{{else}}
{{ render '@call-me' }}
{{/if}}
{{/if}}
<header {{#if hasID}}id="{{idComponent}}"{{/if}} class="header{{#if isAccent}} header_accent{{/if}}{{#if isHipotecasAccent}} header_accent{{/if}}{{#if isAccentFullspace}} header_accent--fullspace{{/if}}{{#if isRelative}} relative{{/if}}">
{{#if isAlert}}
<div class="container">
{{ render '@alert--banner' }}
</div>
{{/if}}
<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{{#if isContactInfo}} before-contact-info{{/if}}">
<a class="header__logo-link" href="#">
{{#if isHipotecas}}
<img class="header__logo-img" src="/dist/images/logo-hipotecas.svg" alt="Logo">
{{else if isHipotecasAccent}}
<img class="header__logo-img" src="/dist/images/logo-hipotecas-accent.svg" alt="Logo">
{{else if isAccent}}
<img class="header__logo-img" src="/dist/images/logo-white.svg" alt="Logo" width="48" height="20">
{{else}}
<img class="header__logo-img" src="/dist/images/logo_UCI.png" alt="Logo">
{{/if}}
</a>
</div>
{{#if isContactInfo}}
<div class="header__contact-info">
{{> @bodycopy-xs text-contact-info }}
{{> @bodycopy-xs number-contact-info }}
{{#if tooltip-contact-info}}{{> @tooltip tooltip-contact-info }}{{/if}}
{{#if tooltipContactInfoWithLogo}}{{> @tooltip tooltip-contact-info-with-logo }}{{/if}}
</div>
{{/if}}
<div class="header__popups hidden-xs-ms">
<ul class="header__popups-list">
{{#if hasPopupsList}}
{{#each popups-list-items}}
<li class="header__popups-item">
<a class="popup__trigger{{this.extraClasses}}" href="{{this.href}}" target="{{this.target}}" rel="{{this.rel}}" title="{{this.title}}">
{{this.text}}
</a>
</li>
{{/each}}
{{#if isGoogleTranslate}}
<li class="header__popups-item">
{{ render '@googletranslate' }}
</li>
{{/if}}
{{/if}}
{{#each head-trigger}}
<li class="header__popups-item">
{{> @popup this.popup }}
</li>
{{/each}}
</ul>
</div>
{{!-- <div class="header__search">
<button class="header__search-btn" type="button" title="Search">
{{ render '@icon--search' }}
</button>
</div> --}}
<button class="header__mobile-menu-control header__hamburger" type="button" title="Menu">
{{ render '@icon--16-menu-burger' }}
</button>
</div>
{{#if hasLightboxCta}}
{{> @lightbox cta-btn-1 }}
{{/if}}
</div>
</div>
</div>
<div class="header__body">
<div class="container {{#if navBody}}container__flex{{/if}}">
<div class="header__body-wrapper">
{{#if hasHeaderBody}}
<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">
{{#each social}}
<li class="header__socials-item">
<a class="header__socials-link" href="{{ this.href }}" title="{{ this.title }}" rel="noopener">
<div class="header__socials-icon">
{{> @icon this.icon }}
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="header__body-main-profile hidden-sm-min">
{{#if dropdownProfile}}
{{> '@accordion' profileMobile}}
{{/if}}
</div>
<div class="header__body-main-menu {{#if hasTabbar}} hidden-xs-ms {{/if}}">
<ul class="header__body-main-list">
{{#each body-main-item}}
<li class="header__body-main-item">
<div class="
header__body-main-link
{{#if this.submenu}}
header__body-main-link_trigger
{{/if}}
">
{{#if this.isTrigger}}
<button class="header__body-main-btn" type="button">
<span>{{ this.text }}</span>
{{ render '@icon--chebron-down' }}
</button>
{{else}}
<a class="header__body-main-btn" href="#">
<span>{{ this.text }}</span>
</a>
{{/if}}
</div>
{{#if this.submenu}}
<div class="header__body-main-submenu">
{{#if submenu.hipotecas}}
{{ render '@header-submenu' }}
{{/if}}
{{#if submenu.seguros-servicios}}
{{ render '@header-submenu--icons-with-highlight' }}
{{/if}}
{{#if submenu.quienes-somos}}
{{ render '@header-submenu--text-with-highlight' }}
{{/if}}
{{#if submenu.te-ayudamos}}
{{ render '@header-submenu--sections-with-highlight' }}
{{/if}}
</div>
{{/if}}
</li>
{{/each}}
</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">
{{#each head-trigger}}
<li class="header__body-main-popups-item">
<a class="popup__trigger" href="" title="Blog">
{{#if isDS}}<span class="bodycopy-s">Blog</span>{{else}}Blog{{/if}}
</a>
</li>
<li class="header__body-main-popups-item">
<a class="popup__trigger" href="" title="Área de clientes">
{{#if isDS}}<span class="bodycopy-s">Área de clientes</span>{{else}}Área de clientes{{/if}}
</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">
{{ render '@icon--globe' }}
<span{{#if isDS}} class="bodycopy-s"{{else}}{{/if}}>{{ this.popup.trigger.text }}</span>
</button>
</div>
</li>
{{/each}}
{{#if isGoogleTranslate}}
<li class="header__body-main-popups-item for-gt">
{{ render '@googletranslate' }}
</li>
{{/if}}
</ul>
<ul class="header__body-main-popups-content">
{{#each head-trigger}}
<li class="header__body-main-popups-content-item">
<div class="header__body-main-submenu">
{{#if this.popup.language}}
<div class="popup__lang">
<ul class="popup__lang-list">
{{#each this.popup.language}}
<li class="popup__lang-item">
<a
class="popup__lang-link
popup__link
{{#if this.isActive}}
popup__lang-link_active
{{/if}}"
href="{{ this.href }}"
>
{{ this.text }}
</a>
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if this.popup.contact-item}}
<div class="popup__contact">
<ul class="popup__contact-list">
{{#each this.popup.contact-item}}
<li class="popup__contact-item">
{{#if this.lightbox}}
<div class="popup__lightbox">
{{> @lightbox this.lightbox-mobile }}
</div>
{{else}}
<div class="popup__contact-link popup__link">
{{> @link this.link }}
</div>
{{/if}}
{{#if this.info}}
<div class="popup__contact-info">
{{> @bodycopy-s this.info }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
</li>
{{/each}}
</ul>
{{#if isContactInfo}}
<div class="header__body-main-popups-contact-info">
{{#if hasLogo}}
<div class="contact-info__logo">
<img class="contact-info__logo__img" src="/dist/images/logo_UCI.png" alt="Logo UCI">
{{> @bodycopy textLogo }}
</div>
{{/if}}
{{> @title tit-contact }}
{{#if hasBodycopySOptional}}
{{> @bodycopy bodycopySOptional}}
{{/if}}
{{#each contact}}
<div class="tel">
<div class="tel_detail">
{{> @bodycopy-m tel-contact }}
{{#if src-flag}}
{{> @icon iconContact}}
{{/if}}
</div>
{{> @bodycopy-s item-contact }}
{{#if small-contact}}{{> @bodycopy-xs small-contact }}{{/if}}
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
<div class="header__body-main-content-btn hidden-sm-min">
<div class="header__cta-btn">
{{!-- Se mantiene btn dark para versiones publicadas --}}
{{#if btnCloseSession}}
{{> '@btn' closeSession}}
{{else}}
<a class="btn btn_dark" href="https://clientes.uci.es/" target="_blank" title="Tu espacio">
Area clientes
</a>
{{/if}}
</div>
</div>
<button class="header__mobile-menu-control header__close" type="button" title="Close menu">
{{ render '@icon--close' }}
</button>
</div>
</div>
{{/if}}
{{#if hasLightboxCta}}
<div class="header__cta">
<div class="header__cta-btn hidden-ms hidden-xs hidden-sm-min">
{{> @btn cta-btn-1 }}
</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>
{{> @btn cta-btn-2 }}
</div>
</div>
{{/if}}
</div>
{{#if navBody}}
<div class="header__body__nav">
<ul class="header__body__nav-list">
{{#each navItem}}
<li class="header__body__nav-item {{this.customClass}}">
{{#if dropdown}}
{{> '@dropdown-menu' menu}}
{{/if}}
{{#if directAccess}}
{{> '@btn' btnIcon}}
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if isBlog}}
<div class="header__googletranslate">
{{ render '@googletranslate' }}
</div>
{{/if}}
</div>
</div>
{{#if hasTabbar}}
{{render '@tab-bar' }}
{{/if}}
</div>
</div>
</header>
{
"hasCallme": true,
"hasID": false,
"hasPopupsList": true,
"hasLightboxCta": true,
"hasHeaderBody": true,
"popups-list-items": [
{
"href": "",
"target": "",
"title": "Blog",
"rel": "",
"text": "Blog"
}
],
"text-contact-info": {
"text": "<p>Llámanos gratis</p>"
},
"number-contact-info": {
"text": "<p><a href='tel:00000000000' target='_blank'>00 000 000 000</a></p>"
},
"tooltip-contact-info": {
"isContactInfo": true,
"tit-contact": {
"text": "<p>Lorem ipsum</p>",
"type": "-m"
},
"contact": [
{
"tel-contact": {
"text": "<a href='tel:00000000000' target='_blank'>00 000 000 000</a>"
},
"time-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"small-contact": {
"text": "Lorem ipsum dolor sit amet est dolor sit"
},
"src-flag": "/dist/images/flag-france.svg",
"alt-flag": "Alt de la bandera"
},
{
"tel-contact": {
"text": "<a href='tel:00000000000' target='_blank'>00 000 000 000</a>"
},
"time-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"small-contact": {
"text": "Lorem ipsum dolor sit amet est dolor sit"
},
"src-flag": "/dist/images/flag-germany.svg",
"alt-flag": "Alt de la bandera"
}
]
},
"head-trigger": [
{
"popup": {
"icon": {
"name": "16_globe"
},
"trigger": {
"text": "ES"
},
"language": [
{
"href": "#",
"isActive": true,
"text": "ES"
},
{
"href": "#",
"text": "EN"
},
{
"href": "#",
"text": "PT"
},
{
"href": "#",
"text": "CAT"
}
]
}
}
],
"cta-btn-1": {
"isContactonHeader": true,
"trigger": {
"btnType": "button",
"text": "Contacto",
"isContactonHeader": true
},
"title": {
"text": "Hablemos"
},
"description": {
"text": "<p>Estamos disponibles para resolver todas tus dudas.</p>"
},
"telefono": {
"isSimple": true,
"icon-before": {
"name": "tel",
"isBefore": true
},
"href": "tel:916193020",
"text": "91 619 30 20",
"second-link": {
"isSimple": true,
"href": "tel:922101100",
"text": "92 210 1100"
}
},
"info": {
"text": "<span>De lunes a viernes: 09:30 - 18:30h</span>"
},
"enlace": {
"isSimple": true,
"icon-before": {
"name": "mail",
"isBefore": true
},
"href": "mailto:atenciónalcliente@hipotecas.com",
"text": "atenciónalcliente@hipotecas.com"
},
"oficinas": {
"icon-before": {
"name": "marker",
"isBefore": true
},
"href": "#",
"text": "¿Dónde estamos?"
},
"legal": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico, y con el nombre, que nos facilites. Estos datos los utilizaremos en UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») para gestionar tu solicitud, para facilitarte información sobre nuestros productos y servicios, y para conocer tu valoración sobre los mismos. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Si quieres saber más sobre cómo protegemos tu privacidad, pincha aquí. 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>"
},
"contactForm": true
},
"body-main-item": [
{
"text": "Hipotecas",
"isTrigger": true,
"submenu": {
"hipotecas": true
}
},
{
"text": "Seguros",
"isTrigger": true,
"submenu": {
"seguros-servicios": true
}
},
{
"text": "Simulador Hipotecas"
},
{
"text": "Quienes somos",
"isTrigger": true,
"submenu": {
"quienes-somos": true
}
},
{
"text": "Te ayudamos",
"isTrigger": true,
"submenu": {
"te-ayudamos": true
}
}
],
"cta-btn-2": {
"href": "#",
"text": "Solicita tu hipoteca"
},
"cta-btn-3": {
"isDark": true,
"href": "#",
"text": "Contacto"
},
"tit-contact": {
"text": "<p>Lorem ipsum</p>",
"type": "-m"
},
"contact": [
{
"tel-contact": {
"text": "Si eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"src-flag": "/dist/images/flag-spain.svg",
"alt-flag": "Eres cliente"
},
{
"tel-contact": {
"text": "Si aún no eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"src-flag": "/dist/images/flag-germany.svg",
"alt-flag": "Si aún no eres cliente"
}
],
"isGoogleTranslate": true,
"isBlog": true
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
.sticking & {
display: none;
}
.googletranslate {
margin: 20px 20px 0 110px;
.goog-te-gadget-simple {
padding-bottom: 1px;
border-color: var(--color-accent-dark);
padding-left: 5px;
color: var(--color-accent);
font-family: var(--base-font-family);
}
.goog-te-menu-value {
color: var(--color-accent);
bottom: -1px;
position: relative;
}
@media (--viewport-md-max) {
margin-top: 10px;
}
@media (--viewport-sm-max) {
margin: 0 20px 0 80px;
}
@media (--viewport-ms-max) {
margin-top: 40px;
margin-left: 90px;
}
@media (--viewport-xs-max) {
margin-left: 0;
}
}
z-index: 1;
&.is-experience-editor {
margin-top: 89px;
position: static !important;
}
@media (--viewport-sm-min) {
z-index: 12;
}
@media (--viewport-ms-max) {
position: static;
margin-bottom: -105px;
}
&.active {
z-index: 12;
background-color: var(--color-primary);
}
&.visible {
position: fixed;
z-index: 12;
@media (--viewport-sm-min) {
background-color: var(--color-primary);
}
.header {
&__body {
&-main {
&-btn {
@media (--viewport-sm-min) {
color: var(--color-text);
}
.icon {
@media (--viewport-sm-min) {
fill: var(--color-secondary);
}
}
}
}
}
}
}
&_accent {
&--fullspace {
.header__head {
background-color: var(--color-background-accent-bold);
/*&::after {
position: absolute;
top: 0;
right: 0;
display: block;
height: 100%;
background-color: var(--color-accent);
content: '';
@media (--viewport-sm-min) {
width: 29px;
}
@media (--viewport-md-min) {
width: 30px;
}
@media (--viewport-cont-no-pad-min) {
width: calc((100% - 1414px) / 2 + 50px);
}
}*/
}
}
.header {
&__head {
position: relative;
@media (--viewport-ms-max) {
background-color: var(--color-accent);
}
&-wrapper {
background-color: var(--color-accent);
}
/*&::before {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
background-color: var(--color-accent);
content: '';
@media (--viewport-sm-min) {
width: 29px;
}
@media (--viewport-md-min) {
width: 30px;
}
@media (--viewport-cont-no-pad-min) {
width: calc((100% - 1414px) / 2 + 50px);
}
}*/
}
&__contact-info {
.bodycopy-xs{
color: var(--color-white);
a, a:visited, a:focus {
color: var(--color-white);
}
}
.bodycopy-xs + .bodycopy-xs {
color: var(--color-white);
}
.tooltip {
&_contact-info {
.icon-16_tooltip{
fill: var(--color-icon-inverse);
}
}
}
}
&__hamburger {
.icon {
fill: var(--color-primary);
}
}
&__popups-item {
.popup__trigger {
.icon {
fill: var(--color-white);
}
@media (--viewport-sm-min) {
color: var(--color-text-light);
}
}
}
&__search {
&-btn {
.icon {
fill: var(--color-primary);
}
}
}
&__body {
&-wrapper {
@media (--viewport-sm-min) {
background-color: var(--color-primary);
}
}
&-main {
&-btn {
@media (--viewport-sm-min) {
color: var(--color-text);
}
.icon {
@media (--viewport-sm-min) {
fill: var(--color-secondary);
}
}
}
}
}
}
}
&__head {
position: relative;
z-index: 12;
.mobile-menu-is-open & {
z-index: 0;
}
&-wrapper {
position: relative;
display: flex;
background-color: var(--color-primary);
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
padding: 0 20px;
}
}
&-main {
flex-grow: 1;
display: flex;
align-items: center;
padding: 28px 0 26px;
@media (--viewport-ms-min) {
padding: 30px 0;
}
@media (--viewport-sm-min) {
padding: 13px 0 13px;
}
@media (--viewport-md-min) {
padding: 13px 0 13px;
}
@media (--viewport-lg-min) {
padding: 12px 0 11px;
}
/*@media (--viewport-lg-min) {
padding: 30px 0;
}*/
.header {
&__triggers {
@media (--viewport-ms-max) {
display: none;
}
}
}
}
}
&__logo {
flex-grow: 1;
display: flex;
&-link {
display: block;
max-width: 200px;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
&-img {
display: block;
max-width: 100%;
height: auto;
}
&.before-contact-info {
flex-grow: 0;
@media (--viewport-ms-max) {
flex-grow: 1;
}
}
}
&__contact-info {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 40px;
flex-grow: 1;
gap:10px;
.bodycopy-xs {
color: var(--color-accent-dark);
a,
a:visited,
a:focus {
color: var(--color-text);
}
& + .bodycopy-xs {
color: var(--color-text);
}
}
.tooltip {
position: relative;
top: 2px;
left: 0;
z-index: 99999;
}
@media (--viewport-ms-max) {
display: none;
}
}
&__popups {
@media (--viewport-sm-min) {
margin-left: 30px;
}
@media (--viewport-md-min) {
margin-left: 40px;
}
&-list {
display: flex;
@media (--viewport-xs-max) {
justify-content: space-between;
}
}
&-item {
display: flex;
align-items: center;
@media (--viewport-ms-only) {
margin-right: 60px;
}
@media (--viewport-sm-min) {
position: relative;
margin-right: 30px;
}
@media (--viewport-md-min) {
margin-right: 40px;
}
&:last-child {
margin-right: 0;
}
a.popup__trigger {
padding-top: 2px;
cursor: pointer;
}
.popup__trigger {
font-size: 14px;
@media (--viewport-ms-max) {
font-size: 14px;
} /*antes tamaño de fuente no definida para ninguna vista */
}
.googletranslate {
margin: -1px 0;
}
}
}
&__search {
margin-left: 40px;
@media (--viewport-ms-only) {
margin-left: 50px;
}
@media (--viewport-sm-only) {
margin-left: 30px;
}
&-btn {
position: relative;
display: flex;
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 40px;
height: 40px;
content: '';
}
&:hover,
&:focus {
.icon {
fill: var(--color-accent-dark);
}
}
.icon {
@media (--viewport-ms-max) {
width: 16px;
height: 16px;
}
}
}
}
&__hamburger {
position: relative;
display: flex;
margin-left: 40px;
@media (--viewport-ms-min) {
margin-left: 50px;
}
@media (--viewport-sm-min) {
display: none;
}
.icon-menu {
width: 25px;
height: 25px;
}
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
/* Nuevo diseño y nuevo icono a 16px
width: 40px;
height: 40px; */
content: '';
}
&:hover,
&:focus {
.icon {
fill: var(--color-accent-dark);
}
}
}
&__close {
display: flex;
@media (--viewport-ms-max) {
position: absolute;
top: 18px;
right: 18px;
}
@media (--viewport-ms-only) {
right: 28px;
}
@media (--viewport-sm-min) {
display: none;
}
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 40px;
height: 40px;
content: '';
}
&:hover,
&:focus {
.icon {
fill: var(--color-accent-dark);
}
}
.icon {
width: 16px;
height: 16px;
}
}
&__cta {
position: relative;
z-index: 2;
display: flex;
justify-content: flex-end;
@media (--viewport-sm-min) {
margin-left: 30px;
}
@media (--viewport-md-min) {
margin-left: 40px;
}
@media (--viewport-lg-min) {
margin-left: 60px;
}
&-btn {
/*min-width: 180px;*/
.btn {
width: 100%;
transition: none;
font-size: 16px; /*antes sin tamaño de fuente definido*/
@media (--viewport-sm-min) {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 180px;
}
&.link {
color: var(--color-text-light);
}
}
&.sticky {
display: flex;
justify-content: flex-end;
width: auto;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
.lightbox {
display: none;
@media (--viewport-ms-max) {
display: inline-block;
}
}
&.sticky-clone {
/*min-width: 252px;*/
background: none;
left: auto;
display: flex;
width: auto;
@media (--viewport-ms-max) {
.btn {
width: auto;
}
}
&.visible {
.lightbox {
display: inline-block;
}
.btn {
width: auto;
}
}
/*right: calc(var(--gutter-width) - 1px);*/
@media (--viewport-ms-min) {
right: calc(var(--gutter-width-ms-min) + 1px);
}
@media (--viewport-sm-min) {
right: calc(var(--gutter-width-ms-min) - 1px);
}
@media (--viewport-md-min) {
/*right: calc(var(--gutter-width-ms-min) + 2px);*/
right: auto;
margin-left: -36px;
}
@media (--viewport-lg-min) {
/*right:var(--gutter-width-lg-min);*/
right: auto;
margin-left: -36px;
}
}
.btn {
height: auto;
font-size: 16px;
padding-left: 20px;
padding-right: 20px; /*antes 14px y sin padding left ni right definidos*/
line-height: 24px;
&:nth-child(3) {
width: 180px;
}
@media (--viewport-ms-max) {
width: auto;
&:nth-child(2) {
}
&:nth-child(3) {
width: auto;
margin-left: 0;
}
}
}
@media (--viewport-ms-max) {
display: flex;
}
}
}
&.hidden {
display: none;
&-xs {
@media (--viewport-xs-max) {
display: none;
}
&-ms {
@media (--viewport-ms-max) {
display: none;
}
}
}
&-ms {
@media (--viewport-ms-only) {
display: none;
}
&-min {
@media (--viewport-ms-min) {
display: none;
}
}
}
&-sm {
@media (--viewport-sm-only) {
display: none;
}
&-min {
@media (--viewport-sm-min) {
display: none;
}
}
}
}
}
&__body {
&-wrapper {
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
text-align: right;
.header__cta-btn.sticky.stick-to-top {
position: fixed;
top: 0;
}
}
@media (--viewport-sm-min) {
position: relative;
display: flex;
justify-content: flex-end;
}
}
.container__flex {
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
&__nav {
display: flex;
align-items: center;
&-list {
display: flex;
flex-flow: wrap;
justify-content: space-between;
gap: 30px;
}
&-item {
display: flex;
align-items: center;
position: relative;
.dropdown-menu {
@media (--viewport-ms-max) {
&__overlay,
&--open {
display: none;
}
}
}
&--notifications {
.caption {
/*var(--Text-color-text-subtle),*/
color: #7d7d7d;
}
.dropdown-menu--open {
display: block;
}
}
}
@media (--viewport-ms-max) {
position: absolute;
top: 30px;
right: 40px;
&-list {
gap: 30px;
}
&-item {
&:first-child {
margin-right: 30px;
}
.btn_bottomless .icon {
fill: var(--color-white);
}
&--profile {
display: none;
}
}
}
}
&.active {
.header {
&__body {
&-wrapper {
@media (--viewport-sm-min) {
background-color: var(--color-primary);
}
}
&-main {
&-btn {
@media (--viewport-sm-min) {
color: var(--color-text);
}
.icon {
@media (--viewport-sm-min) {
fill: var(--color-secondary);
}
}
}
}
}
}
}
&-main {
@media (--viewport-ms-max) {
display: flex;
flex-direction: column;
min-height: 100%;
/*background-color: var(--color-primary);*/
}
&-overlay {
overflow: auto;
/*flex-grow: 1;*/
-ms-overflow-style: none;
@media (--viewport-xs-max) {
padding-left: 20px;
}
@media (--viewport-ms-max) {
position: fixed;
z-index: 11;
top: 0;
width: 100%;
height: 100vh;
transition: transform 0.5s;
transform: translateX(100%);
.header__body-main {
background-color: var(--color-primary);
}
}
@media (--viewport-ms-only) {
padding-left: 92px;
}
&.mobile-menu-is-open {
transform: translateX(0);
}
}
&-content {
@media (--viewport-xs-max) {
padding: 20px 30px 30px;
}
@media (--viewport-ms-max) {
flex-grow: 1;
display: flex;
flex-direction: column;
}
@media (--viewport-ms-only) {
padding: 56px 50px 56px 92px;
}
&-nav {
/*flex-grow: 1;*/
}
&-btn {
width: calc(100%);
bottom: 0;
@media (--viewport-xs-max) {
width: calc(100%);
}
}
}
&-head {
@media (--viewport-xs-max) {
padding-right: 40px;
}
@media (--viewport-ms-max) {
margin-bottom: 25px;
}
}
&-profile {
text-align: left;
.accordion {
&__item-description {
ul {
display: flex;
flex-flow: column;
gap: 24px;
li {
padding-left: 20px;
}
}
}
}
}
&-list {
display: flex;
justify-content: flex-end;
margin-right: 114px;
@media (--viewport-sm-max) {
margin-right: 0;
}
@media (--viewport-ms-max) {
flex-direction: column;
}
}
&-item {
border: none;
@media (--viewport-sm-min) {
margin-right: 30px;
}
@media (--viewport-lg-min) {
margin-right: 40px;
}
&:first-child {
.header {
&__body {
&-main {
&-submenu {
@media (--viewport-ms-max) {
display: none;
}
}
}
}
}
}
&:last-child {
margin-right: 0;
}
}
&-link {
&_trigger {
button.popup__trigger {
.icon {
width: 16px;
height: 16px;
margin-right: 4px;
top: 4px;
position: relative;
}
}
&.active {
.header__body-main-btn {
.icon {
transform: rotate(-180deg);
}
}
}
}
}
&-btn {
display: flex;
align-items: center;
font-family: 'Jornada Sans Book';
font-size: 16px; /*antes 13px*/
font-weight: normal;
line-height: 18px;
letter-spacing: 0;
color: var(--color-accent); /* color enlaces menú */
transition: all 0.3s;
@media (--viewport-ms-max) {
justify-content: space-between;
width: 100%;
padding: 15px 0;
font-size: 16px;
line-height: 26px;
}
@media (--viewport-sm-min) {
position: relative;
padding: 16px 0;
/*color: var(--color-text-light);*/
transition: all 0.1s;
&::before {
position: absolute;
bottom: 11px;
left: 0;
display: block;
width: 0;
height: 1px;
background-color: var(--color-accent);
content: '';
transition: all 0.1s;
}
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
content: '';
}
}
@media (--viewport-lg-min) {
/*padding: 30px 0;*/
&::before {
/*bottom: 25px;*/
}
}
&:hover,
&:focus {
color: var(--color-accent-dark) !important;
&::before {
background-color: var(--color-accent-dark) !important;
}
.icon {
fill: var(--color-accent-dark) !important;
}
}
&.active {
@media (--viewport-sm-min) {
&::before {
width: 100%;
}
}
.icon {
@media (--viewport-sm-min) {
transform: rotate(-180deg);
margin-bottom: 0;
fill: var(--color-secondary);
}
}
}
.icon {
display: flex;
margin: 0 0 2px 8px;
transition: all 0.4s;
@media (--viewport-sm-min) {
transition: all 0.1s;
}
}
}
&-submenu {
display: none;
text-align: left;
@media (--viewport-sm-min) {
position: absolute;
z-index: 10;
top: 50px;
left: 0;
width: 100%;
background-color: var(--color-primary);
&::before,
&::after {
position: absolute;
top: 0;
display: block;
height: 100%;
background-color: var(--color-primary);
content: '';
@media (--viewport-sm-min) {
width: calc(29px * 2);
}
@media (--viewport-md-min) {
width: calc(30px * 2);
}
@media (--viewport-cont-no-pad-min) {
width: calc((100vw - 1352px) / 2 + 30px);
}
@media (--viewport-lg-min) {
width: calc((100vw - 1352px) / 2 + 50px);
}
}
&::before {
left: calc(-29px * 2);
@media (--viewport-md-min) {
left: calc(-30px * 2);
}
@media (--viewport-cont-no-pad-min) {
left: calc(-1 * ((100vw - 1352px) / 2 + 30px));
}
@media (--viewport-lg-min) {
left: calc(-1 * ((100vw - 1352px) / 2 + 50px));
}
}
&::after {
right: calc(-29px * 2);
@media (--viewport-md-min) {
right: calc(-30px * 2);
}
@media (--viewport-cont-no-pad-min) {
right: calc(-1 * ((100vw - 1352px) / 2 + 30px));
}
@media (--viewport-lg-min) {
right: calc(-1 * ((100vw - 1352px) / 2 + 50px));
}
}
}
@media (--viewport-lg-min) {
top: 50px;
}
&.active {
@media (--viewport-sm-min) {
display: block;
}
}
.header-submenu__sidebar-text {
.title-m {
font-size: 16px;
} /*Antes esta clase no estaba definida*/
}
}
&-popups {
&-content {
.header__body-main-submenu {
margin-bottom: 40px;
@media (--viewport-ms-min) {
margin-bottom: 60px;
}
.popup {
&__list {
flex-wrap: wrap;
}
&__item {
margin-right: 40px;
margin-bottom: 10px;
}
&__link {
display: block;
padding-bottom: 5px;
&::before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 0;
height: 1px;
background-color: var(--color-accent);
content: '';
transition: all 0.1s;
}
&:hover,
&:focus {
&::before {
width: 100%;
background-color: var(--color-accent-dark);
}
}
&_active {
&::before {
width: 100%;
}
}
}
}
}
}
&-contact-info {
display: flex;
flex-direction: column;
flex-wrap: wrap;
text-align: left;
margin-bottom: 20px;
margin-top: 60px;
@media (--viewport-ms-only) {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
gap: 32px;
}
.title-m {
color: var(--color-accent-dark);
margin-bottom: 0;
@media (--viewport-ms-only) {
width: 100%;
}
}
.tel {
display: flex;
flex-direction:column;
position: relative;
padding-top: 32px;
gap: 4px;
@media (--viewport-xs-max) {
padding-top: 0;
}
@media (--viewport-ms-only) {
padding-top: 0;
}
.bodycopy-s{
color:var(--color-text-subtle);
a, a:visited, a:focus {
color:var(--color-text-subtle);
}
}
.bodycopy-xs{
color:var(--color-text-subtlest);
}
&_detail {
display:flex;
flex-direction:row;
align-items: flex-start;
padding-top: 32px;
gap:10px;
@media (--viewport-ms-only) {
padding-top: 0;
}
.icon {
fill:var(--color-icon);
}
}
@media (--viewport-sm-min) {
&::before{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-border);
content: "";
margin: 32px 0;
}
}
& + .tel {
padding-top: 16px;
.tel_detail {
padding-top: 0;
}
&::before{
display:none;
margin: 0;
}
}
.bodycopy-m{
color: var(--color-secondary);
margin-bottom:0;
&::after{
display: none;
}
a, a:visited, a:focus{color: var(--color-secondary);}
}
.flag{width: 20px;height: 20px; margin-left: 10px; margin-bottom: 7px;}
.bodycopy-s{
color: var(--color-text-subtle);
}
}
.bodycopy-s {
color: var(--color-grey2);
}
.bodycopy-s + .bodycopy-s {
color: var(--color-disabled);
}
.bodycopy-xs{
color:var(--color-text-subtle);
}
}
&-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
margin: 40px 0 0;
@media (--viewport-ms-min) {
justify-content: flex-start;
}
}
&-item {
margin-right: 40px;
text-align: left;
padding: 15px 0;
@media (--viewport-ms-min) {
margin-right: 60px;
}
&:last-child {
margin-right: 0;
}
&.for-gt {
.googletranslate {
margin: -1px 0;
}
}
.header__body-main-link {
&.active {
.popup {
&__trigger {
&::before {
width: 100%;
}
}
}
}
}
.popup {
&__trigger {
display: block;
position: relative;
font-size: 16px; /*antes sin tamaño de fuente definido*/
&::before {
position: absolute;
bottom: -5px;
left: 0;
display: block;
width: 0;
height: 1px;
background-color: var(--color-accent);
content: '';
transition: all 0.1s;
}
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 40px;
content: '';
}
&:hover,
&:focus {
&::before {
width: 100%;
background-color: var(--color-accent-dark);
}
}
}
}
}
}
&-footer {
@media (--viewport-ms-max) {
margin-top: 0;
ul.header__body-main-popups-list {
/*li:last-child{margin-top:60px;}
li:last-child.for-gt{margin-top:0;}*/
}
}
.header {
&__triggers {
@media (--viewport-sm-min) {
display: none;
}
}
}
}
}
}
&.relative {
position: relative;
@media (--viewport-ms-max) {
position: static;
margin-bottom: 0;
}
}
}
.header + .splitter_header-before {
@media (--viewport-lg-min) {
padding-top: 260px;
}
}
Variantes: Default, Accent, Blog, with Google Translate, without ctas, only logo, logo and popups list, logo, popups list and header body, landing header, tramitación header, New header Accent Design System. ***** Se añade una variante fractal que no se debe integrar, para visualizar el header en fractal **** En el menú mobile permite configurar el texto y enlace de los idiomas
***** Nueva variane Header Accent del sisterma de diseño. No se elimina la antigua header Accent a la espera de la integración de la nueva cabecera.