<!-- 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: 47px">
<img class="footer__main-share-img" src="/dist/images/logo-white.svg" width="47px" alt="UCI">
</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>
<!-- Comento esta variante ya que parece no estar en uso (CA)
{{#if isFooterSmall}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="footer-small"></div>
{{/if}} -->
<footer {{#if hasID}}id="{{idComponent}}" {{/if}} class="footer">
<div class="container">
{{#if isContactRow}}
<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-40 end-ms">
<li class="col-xs-12 col-ms-12 col-sm-3 col-sm-3_footer-40 col-md-3_footer-40">
<div class="tile-footer-menu__title">
{{> @title-m title }}
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-sm-3_footer-40 col-md-3_footer-40">
<div class="tile-footer-menu__reduced">
<div class="tile-footer-menu__reduced-first-col">
<ul class="tile-footer-menu__reduced-first-col-list">
{{#each firstColumn}}
<li class="tile-footer-menu__reduced-first-col-item">
<div class="tile-footer-menu__reduced-link">
{{> @link this.link }}
</div>
{{#if this.info}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-sm-3_footer-40 col-md-3_footer-40">
<div class="tile-footer-menu__reduced-second-col">
<ul class="tile-footer-menu__reduced-second-col-list">
{{#each secondColumn}}
<li class="tile-footer-menu__reduced-second-col-item">
{{#if this.lightbox}}
<div class="tile-footer-menu__reduced-link">
{{> @lightbox this.lightbox }}
</div>
{{else}}
<div class="tile-footer-menu__reduced-link">
{{> @link this.link }}
</div>
{{/if}}
{{#if this.info}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-sm-3_footer-40 col-md-3_footer-40">
<div class="tile-footer-menu__reduced-third-col">
<ul class="tile-footer-menu__reduced-third-col-list">
{{#each thirdColumn}}
<li class="tile-footer-menu__reduced-third-col-item">
{{> @link this.link }}
</li>
{{/each}}
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{{/if}}
{{#if isContactRow4cols}}
<div class="footer__menu row-4-cols">
<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">
<div class="tile-footer-menu__title">
{{> @title-m title }}
</div>
<ul>
<li>
<div class="tile-footer-menu__reduced">
<div class="tile-footer-menu__reduced-first-col">
<ul class="tile-footer-menu__reduced-first-col-list">
{{#each firstColumn}}
<li class="tile-footer-menu__reduced-first-col-item">
{{#if this.info}}
<div class="tile-footer-menu__reduced-info flex">
<ul><li>{{> @bodycopy-s this.info }}{{#if icon-after }}{{> @icon icon-after }}{{/if}}</li>{{#if this.info-2}}<li>{{> @bodycopy-s this.info-2 }}{{#if icon-after2 }}{{> @icon icon-after2 }}{{/if}}</li>{{/if}}</ul>
</div>
{{/if}}
{{#if this.info-part2}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info-part2 }}
</div>
{{/if}}
{{#if this.info-part3}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info-part3 }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
</li>
<li>
<div class="tile-footer-menu__reduced">
<div class="tile-footer-menu__reduced-second-col">
<ul class="tile-footer-menu__reduced-second-col-list">
{{#each secondColumn}}
<li class="tile-footer-menu__reduced-first-col-item">
{{#if this.info}}
<div class="tile-footer-menu__reduced-info flex">
<ul><li>{{> @bodycopy-s this.info }}{{#if icon-after }}{{> @icon icon-after }}{{/if}}</li>{{#if this.info-2}}<li>{{> @bodycopy-s this.info-2 }}{{#if icon-after2 }}{{> @icon icon-after2 }}{{/if}}</li>{{/if}}</ul>
</div>
{{/if}}
{{#if this.info-part2}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info-part2 }}
</div>
{{/if}}
{{#if this.info-part3}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info-part3 }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
</li>
<li>
<div class="tile-footer-menu__reduced-third-col">
<ul class="tile-footer-menu__reduced-third-col-list">
{{#each thirdColumn}}
<li class="tile-footer-menu__reduced-third-col-item">
{{#if this.lightbox}}
<div class="tile-footer-menu__reduced-link">
{{> @lightbox this.lightbox }}
</div>
{{else}}
<div class="tile-footer-menu__reduced-link">
{{> @link this.link }}
</div>
{{/if}}
{{#if this.info}}
<div class="tile-footer-menu__reduced-info">
{{> @bodycopy-s this.info }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</li>
<li>
<div class="tile-footer-menu__reduced-fourth-col">
<ul class="tile-footer-menu__reduced-fourth-col-list">
{{#each fourthColumn}}
<li class="tile-footer-menu__reduced-fourth-col-item">
{{> @link this.link }}
</li>
{{/each}}
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{{/if}}
{{#if isSitemapRow}}
<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">
{{#each footer-menu-tile}}
<li class="
{{#if @last}}
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-20 col-md-2_4 col-md-2_4_footer-20
{{else}}
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-20 col-md-4_8 col-md-4_8_footer-20
{{/if}}">
<div class="footer__menu-tile">
<!--OJO, esta clase está mal en integración en el footer.cshtml (CA) -->
{{> @tile-footer-menu this }}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
{{/if}}
<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">
{{#if isMainInfoRow}}
<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: {{ footer-info-pic.max-width }}">
<img class="footer__main-info-img" src="{{ footer-info-pic.src }}" width="{{ footer-info-pic.max-width }}"
alt="{{ footer-info-pic.alt }}">
</div>
</a>
</div>
<div class="footer__main-info-body">
<div class="footer__main-info-list">
<ul class="row row_footer row_footer-40">
{{#each footer-info-item}}
<li class="
{{#if @first}}
col-xs-12 col-ms-12 col-sm-4 col-sm-4_footer-40
{{else}}
col-xs-12 col-ms-6 col-sm-4 col-sm-4_footer-40
{{/if}}">
<div class="footer__main-info-item">
{{#if this.desc}}
<div class="footer__main-info-desc">
{{> @bodycopy-s this.desc }}
</div>
{{/if}}
{{#if this.link}}
<div class="footer__main-info-links">
<ul class="row">
{{#each this.link}}
<li class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
<div class="footer__main-info-link">
{{> @link this }}
</div>
</li>
{{/each}}
</ul>
</div>
<div class="footer__main-info-general-link">
{{> @link this.general-link }}
</div>
{{/if}}
{{#if this.sponsor}}
<div class="footer__main-info-sponsors">
<ul class="row">
{{#each this.sponsor}}
<li class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
<div class="footer__main-info-sponsor">
<a class="footer__main-info-sponsor-link" href="#"
target="_blank" noopener>
<div class="footer__main-info-sponsor-pic"
style="max-width: {{ this.max-width }}">
<img class="footer__main-info-img" width="{{ this.max-width }}"
src="{{ this.src }}" alt="{{ this.alt }}">
</div>
</a>
</div>
</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
{{/if}}
{{#if isMainInfoSimpleRow}}
<div class="footer__main-section">
<div class="footer__main-info">
<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-12 col-sm-6_footer-40">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-1_5">
<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: {{ footer-info-pic.max-width }}">
<img class="footer__main-info-img" width="{{ footer-info-pic.max-width }}"
src="{{ footer-info-pic.src }}"
alt="{{ footer-info-pic.alt }}">
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-ms-10 col-sm-6_5">
<div class="footer__main-info-item">
{{#if footer-info-item.desc}}
<div class="footer__main-info-desc">
{{> @bodycopy-s footer-info-item.desc }}
</div>
{{/if}}
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{{/if}}
<div class="footer__main-section">
<div class="footer__main-share">
<ul class="footer__main-share-list">
{{#each footer-share-item}}
<li class="footer__main-share-item">
{{#if this.logo}}
<a class="footer__main-share-link" href="#">
<div class="footer__main-share-logo"
style="max-width: {{ this.logo.max-width }}">
<img class="footer__main-share-img" src="{{ this.logo.src }}" width="{{ this.logo.max-width }}"
alt="{{ this.logo.alt }}">
</div>
</a>
{{/if}}
{{#if this.social}}
<ul class="footer__main-share-socials">
{{#each social}}
<li class="footer__main-share-social">
<a class="footer__main-share-social-link" href="{{ this.href }}">
{{> @icon this.icon }}
</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if this.certificate}}
<ul class="footer__main-share-certificates">
{{#each this.certificate}}
<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: {{ this.width }}; height: {{ this.height }}">
<img class="footer__main-share-certificate-img" src="{{ this.src }}"
alt="{{ this.alt }}">
</div>
</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
<div class="footer__main-section">
<div class="footer__main-legal">
<ul class="footer__main-legal-list">
{{#each footer-legal-item}}
<li class="footer__main-legal-item {{#if isLegalsLG}}lg{{/if}}">
<a class="footer__main-legal-link" href="#">
{{> @bodycopy-xs this }}
</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{#if isCopyrightRow}}
<div class="footer__main-section">
<div class="footer__main-copyright">
{{> @bodycopy-xs copyright }}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</footer>
{
"hasID": false,
"isSitemapRow": true,
"isMainInfoRow": true,
"footer-menu-tile": [
{
"isMenu": true,
"title": {
"text": "Descubre Hipotecas",
"colorLight": true
},
"link": [
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Calcula tu hipoteca"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Te ayudamos"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Somos Hipotecas"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Preguntas frecuentes"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Quiénes somos"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Blog"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Opiniones Hipotecas"
}
]
},
{
"isMenu": true,
"title": {
"text": "Nuestras soluciones",
"colorLight": true
},
"link": [
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Hipoteca Compra de casa"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Hipoteca Compra + reforma"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Hipoteca Cambio de casa"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Hipoteca Compra sobre plano"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Hipoteca Reunificación de préstamos"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Seguros"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "#",
"text": "Servicios"
}
]
},
{
"title": {
"text": "Contacto",
"colorLight": true
},
"contact-item": {
"firstColumn": [
{
"link": {
"isSimple": true,
"isLarge": true,
"isFooter": true,
"href": "tel:916193020",
"text": "91 619 30 20",
"second-link": {
"isFooter": true,
"isSimple": true,
"isLarge": true,
"href": "tel:922101100",
"text": "92 210 1100"
}
},
"info": {
"text": "<span>De lunes a viernes: 09:30 - 18:30h</span>"
}
}
],
"secondColumn": [
{
"link": {
"isFooter": true,
"isSimple": true,
"href": "mailto:atenciónalcliente@hipotecas.com",
"text": "atenciónalcliente@hipotecas.com"
}
},
{
"lightbox": {
"isContactonFooter": true,
"trigger": {
"isSimple": true,
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Formulario de contacto"
},
"title": {
"text": "Trabajemos juntos"
},
"description": {
"text": "<p>Déjanos tus datos de contacto y nos pondremos en contacto contigo lo antes posible</p>"
},
"contactForm": true,
"isInsideTheFooter": true
}
},
{
"link": {
"isFooter": true,
"href": "#",
"text": "¿Dónde estamos?"
}
}
]
}
}
],
"footer-info-pic": {
"max-width": "47px",
"src": "/dist/images/logo-white.svg",
"alt": "UCI"
},
"footer-info-item": [
{
"desc": {
"text": "<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>",
"colorLight": true
}
},
{
"link": [
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"isLight": true,
"href": "#",
"text": "UCI España"
},
{
"isSimple": true,
"isLarge": true,
"isFooter": true,
"isLight": true,
"href": "#",
"text": "UCI Portugal"
}
],
"general-link": {
"isSimple": true,
"isFooter": true,
"isLight": true,
"href": "#",
"text": "Todas las webs del grupo"
}
}
],
"footer-share-item": [
{
"logo": {
"max-width": "47px",
"src": "/dist/images/logo-white.svg",
"alt": "UCI"
}
},
{
"social": [
{
"href": "#fb",
"icon": {
"name": "fb"
}
},
{
"href": "#inst",
"icon": {
"name": "instagram"
}
},
{
"href": "#in",
"icon": {
"name": "in"
}
},
{
"href": "#yt",
"icon": {
"name": "youtube"
}
}
]
},
{
"certificate": [
{
"width": "auto",
"height": "80px",
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Certifications/gptw.png",
"alt": "Great Place to Work"
},
{
"width": "auto",
"height": "80px",
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Certifications/confianza-online.png",
"alt": "Confianza online"
},
{
"width": "auto",
"height": "80px",
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Certifications/aenor-iso9001.png",
"alt": "AENOR ISO 9001"
},
{
"width": "auto",
"height": "80px",
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Certifications/ekomi.png",
"alt": "Ekomi"
}
]
}
],
"isFooterSmall": false,
"footer-legal-item": [
{
"text": "<span>Aviso legal y Condiciones de uso</span>",
"colorLight": true
},
{
"text": "<span>Información legal y reclamaciones</span>",
"colorLight": true
},
{
"text": "<span>Política de Privacidad y cookies</span>",
"colorLight": true
},
{
"text": "<span>Gobierno corporativo</span>",
"colorLight": true
},
{
"text": "<span>Sitemap</span>",
"colorLight": true
}
]
}
.footer {
&__menu {
background-color: var(--color-accent-dark);
@media (--viewport-xs-max) {
padding: 20px;
margin-right: -19px;
margin-left: -20px;
}
/* the next 2 paddings define the margins for all the components that are called in the Footer menu */
@media (--viewport-sm-min) {
padding: 0 40px;
}
@media (--viewport-md-min) {
padding: 0 60px;
}
&-tiles {
padding: 40px 0 20px;
}
&-tile {
@media (--viewport-xs-max) {
margin-bottom: 20px;
}
@media (--viewport-ms-only) {
margin-bottom: 25px;
}
}
&-section {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
&:last-child {
border-bottom: none;
}
}
&-legal {
@media (--viewport-ms-min) {
padding: 30px 0 15px;
}
&-list {
@media (--viewport-ms-min) {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@media (--viewport-sm-min) {
justify-content: space-between;
}
}
&-item {
margin-bottom: 20px;
@media (--viewport-ms-min) {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 15px;
}
@media (--viewport-ms-only) {
flex-basis: 50%;
}
&.lg {
@media (--viewport-sm-only) {
flex-basis: 50%;
}
}
}
&-link {
display: block;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
}
&.row-4-cols {
ul {
width: 100%;
display: flex;
flex-direction: row;
padding-bottom: 20px;
flex-wrap: wrap;
/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2)~li {
width: 50%;
}
li:first-child:nth-last-child(2)~li.tile-footer-menu__reduced-third-col-item {
width: auto;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4)~li {
width: 25%;
}
@media (--viewport-sm-max) {
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li {
width: 50%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4)~li {
width: 50%;
}
}
@media (--viewport-xs-max) {
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2)~li {
width: 100%;
}
li:first-child:nth-last-child(2)~li.tile-footer-menu__reduced-third-col-item {
width: auto;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3)~li {
width: 100%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4)~li {
width: 100%;
}
}
li {
padding: 0 10px;
@media (--viewport-ms-min) {
padding: 0 15px;
}
@media (--viewport-sm-min) {
padding: 0 20px;
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
@media (--viewport-sm-max) {
&:nth-of-type(3) {
padding-left: 0;
}
}
@media (--viewport-xs-max) {
padding-left: 0;
}
.tile-footer-menu__reduced-first-col {
margin-bottom: 0;
}
.tile-footer-menu__reduced-fourth-col {
margin-top: 8px;
}
ul {
flex-direction: column;
justify-content: flex-start;
li {
margin-top: 0;
&:last-child {
padding: 0;
}
div.tile-footer-menu__reduced-info.flex {
display: flex;
flex-direction: row;
}
div.tile-footer-menu__reduced-info.flex ul {
display: flex;
flex-direction: row;
padding-bottom: 0;
.bodycopy-s {
display: inline;
}
.icon {
fill: var(--color-txt-secondary);
margin-left: 8px;
width: 16px;
height: 16px;
}
li {
padding: 0 8px;
width: auto;
&::before {
content: "/";
color: var(--color-txt-secondary);
margin-left: -8px;
margin-right: 8px;
}
&:first-child {
padding-left: 0;
&::before {
display: none;
}
}
}
}
.tile-footer-menu__reduced-info,
&.tile-footer-menu__reduced-third-col-item {
margin-top: 8px;
margin-bottom: 0;
}
&.tile-footer-menu__reduced-fourth-col-item{
margin-bottom: 0;
}
@media (--viewport-sm-min) {
&.tile-footer-menu__reduced-third-col-item:last-child {
margin-top: 5px;
}
}
}
}
.bodycopy-s {
.bodycopy__link {
color: var(--color-txt-secondary);
span::after {
display: none;
}
span {
padding-bottom: 0;
}
}
}
}
}
}
}
&__main {
background-color: var(--color-accent);
@media (--viewport-xs-max) {
padding: 0 20px;
margin-right: -19px;
margin-left: -20px;
}
@media (--viewport-sm-min) {
padding: 0 40px;
}
@media (--viewport-md-min) {
padding: 0 60px;
}
&-section {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
&:last-child {
border-bottom: none;
}
}
&-info {
padding-top: 40px;
@media (--viewport-ms-min) {
padding-top: 60px;
}
&-head {
margin-bottom: 20px;
&-link {
display: block;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
}
&-img {
display: block;
max-width: 100%;
height: auto;
}
&-item {
margin-bottom: 40px;
}
&-link {
margin-bottom: 30px;
@media (--viewport-ms-min) {
margin-bottom: 20px;
}
.link {
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
color: var(--color-text-light);
}
}
}
&-general-link {
.link {
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
color: var(--color-text-light);
}
}
}
&-sponsors {
margin-top: 20px;
margin-bottom: -20px;
}
&-sponsor {
margin-top: auto;
margin-bottom: 20px;
&-link {
display: block;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
}
}
&-share {
padding-top: 40px;
&-list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
@media (--viewport-ms-min) {
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-right: -15px;
margin-left: -15px;
/* No se está aplicando (CA)
&.right{
justify-content: flex-end;
}
*/
}
}
&-item {
margin-bottom: 40px;
@media (--viewport-ms-min) {
padding-right: 15px;
padding-left: 15px;
}
&:last-child {
@media (--viewport-ms-only) {
flex-basis: 100%;
}
}
}
&-link {
display: block;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
&-img {
display: block;
max-width: 100%;
height: auto;
max-height: 40px;
}
&-socials {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: -5px 0;
}
&-social {
margin: 5px 30px 5px 0;
@media (--viewport-sm-min) {
margin-right: 20px;
}
&:last-child {
margin-right: 0;
}
&-link {
position: relative;
display: flex;
transition: all 0.3s;
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 40px;
height: 40px;
content: '';
}
&:hover,
&:focus {
opacity: 0.6;
}
}
.icon {
width: 16px;
height: 16px;
fill: var(--color-primary);
}
}
&-certificates {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: -5px 0;
}
&-certificate {
margin: 5px 20px 5px 0;
@media (--viewport-ms-max) {
margin: 5px 15px 5px 0;
}
@media (--viewport-xs-max) {
margin: 5px 18px 5px 0;
}
&:last-child {
margin-right: 0;
}
&-link {
display: block;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
&-img {
display: block;
width: auto;
height: 100%;
}
}
}
&-legal {
padding: 40px 0 20px;
@media (--viewport-ms-min) {
padding: 30px 0 15px;
}
&-list {
@media (--viewport-ms-min) {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@media (--viewport-sm-min) {
justify-content: space-between;
}
}
&-item {
margin-bottom: 20px;
@media (--viewport-ms-min) {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 15px;
}
@media (--viewport-ms-only) {
flex-basis: 50%;
}
&.lg {
@media (--viewport-sm-only) {
flex-basis: 50%;
}
}
}
&-link {
display: block;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
}
&-copyright {
padding: 40px 0 20px;
text-align: center;
@media (--viewport-ms-min) {
padding: 30px 0 15px;
}
}
&-company {
padding: 40px 0 20px;
@media (--viewport-ms-min) {
padding: 30px 0 15px;
}
color: white;
font-size: 12px;
display: flex;
justify-content: center;
}
}
}
Variantes: Default, Reduced, Small, Socials align right, UCIMortgages Permite configurar el ancho máximo, alt y src del footer-info-pic, logo del pie y sponsors, también enlace e icono de los socials, ancho, altura, src y alt de los certificados.