<main class="resumen">
<header class="header header_accent header_accent--fullspace relative">
<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 before-contact-info">
<a class="header__logo-link" href="#">
<img class="header__logo-img" src="/dist/images/logo-white.svg" alt="Logo" width="48" height="20">
</a>
</div>
<div class="header__contact-info">
<div class="bodycopy-xs
">
<p>Llámanos gratis</p>
</div>
<div class="bodycopy-xs
">
<p><a href='tel:00000000000' target='_blank'>00 000 000 000</a></p>
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip tooltip_contact-info ">
<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 contact-info">
<span class="arrow"></span>
<div class="wrap contact-info">
<h3 class="
title-m
">
<p>Lorem ipsum</p>
</h3>
<div class="wrap-tel">
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
<a href='tel:00000000000' target='_blank'>00 000 000 000</a>
</div>
</div>
<div class="
bodycopy-s
">
</div>
<div class="bodycopy-xs
">
Lorem ipsum dolor sit amet est dolor sit
</div>
</div>
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
<a href='tel:00000000000' target='_blank'>00 000 000 000</a>
</div>
</div>
<div class="
bodycopy-s
">
</div>
<div class="bodycopy-xs
">
Lorem ipsum dolor sit amet est dolor sit
</div>
</div>
</div>
</div>
</div>
</div>
</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">
<a class="popup__trigger" href="https://clientes.uci.es/" target="_blank" rel="noopener noreferrer" title="Área clientes">
Área clientes
</a>
</li>
<li class="header__popups-item">
<div class="popup"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
<button class="popup__trigger" type="button">
<svg class="icon icon-16_globe ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_globe"></use>
</svg>
ES
</button>
<div class="popup__window
">
<div class="popup__lang">
<ul class="popup__lang-list">
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
popup__lang-link_active
" href="#">
ES
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
EN
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
PT
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
CAT
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<button class="header__mobile-menu-control header__hamburger" type="button" title="Menu">
<svg class="icon icon-16_menu-burger ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-burger"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="header__body">
<div class="container container__flex">
<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 class="accordion ">
<ul class="accordion__list">
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-m">Mi Perfil</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<ul>
<li><a class="bodycopy-s" href="#" title="mis datos">Mis datos</a></li>
<li><a class="bodycopy-s" href="#" title="Actualizar contraseña">Actualizar contraseña</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="header__body-main-menu hidden-xs-ms ">
<ul class="header__body-main-list">
<li class="header__body-main-item">
<div class="
header__body-main-link
">
<a class="header__body-main-btn" href="#">
<span>Resumen solicitud</span>
</a>
</div>
</li>
<li class="header__body-main-item">
<div class="
header__body-main-link
">
<a class="header__body-main-btn" href="#">
<span>Documentación</span>
</a>
</div>
</li>
<li class="header__body-main-item">
<div class="
header__body-main-link
">
<a class="header__body-main-btn" href="#">
<span>Tu consultor financiero</span>
</a>
</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">
<span class="bodycopy-s">Blog</span>
</a>
</li>
<li class="header__body-main-popups-item">
<a class="popup__trigger" href="" title="Área de clientes">
<span class="bodycopy-s">Área de clientes</span>
</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 class="bodycopy-s">ES</span>
</button>
</div>
</li>
</ul>
<ul class="header__body-main-popups-content">
<li class="header__body-main-popups-content-item">
<div class="header__body-main-submenu">
<div class="popup__lang">
<ul class="popup__lang-list">
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
popup__lang-link_active
" href="#">
ES
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
EN
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
PT
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
CAT
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="header__body-main-popups-contact-info">
<span class="title-m
">
<p>Lorem ipsum</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
Si eres cliente</a>
</div>
<svg class="icon icon- ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#"></use>
</svg>
</div>
<div class="
bodycopy-s
">
<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>
</div>
<div class="bodycopy-xs
">
L-V 9:00 am - 18:00 pm
</div>
</div>
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
Si aún no eres cliente</a>
</div>
<svg class="icon icon- ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#"></use>
</svg>
</div>
<div class="
bodycopy-s
">
<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>
</div>
<div class="bodycopy-xs
">
L-V 9:00 am - 18:00 pm
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__body-main-content-btn hidden-sm-min">
<div class="header__cta-btn">
<button id="" class="btn
" type="">
Cerrar sesión
</button>
</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>
<div class="header__body__nav">
<ul class="header__body__nav-list">
<li class="header__body__nav-item header__body__nav-item--notifications">
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__btn btn--notifications" id="">
<button id="" class="btn
btn_bottomless
" type="">
<svg class="icon icon-16_bell ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_bell"></use>
</svg>
</button>
</div>
<div class="dropdown-menu__overlay "></div>
<div class="dropdown-menu " tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<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>
<h3 class="dropdown-menu__heading title-m">Notificaciones</h3>
<nav class="dropdown-menu__list">
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="caption-label">21 may, a las 14:30</span>
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">El documento <span>DNI</span> ha sido validado</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="caption-label">21 may, a las 14:30</span>
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Los documentos <span>Nóminas</span> han sido validados</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="caption-label">21 may, a las 14:30</span>
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">El documento <span>DNI</span> ha sido validado</span>
</a>
</nav>
<div class="dropdown-menu__footer">
<a class="link
" href="#">
<span>Ver todas</span>
</a>
</div>
</div>
</div>
</li>
<li class="header__body__nav-item header__body__nav-item--profile">
<div class="dropdown-menu__wrap">
<div class="dropdown-menu__btn btn--profile" id="">
<button id="" class="btn
btn_bottomless
" type="">
<svg class="icon icon-16_user ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_user"></use>
</svg>
Mi perfil
</button>
</div>
<div class="dropdown-menu__overlay "></div>
<div class="dropdown-menu " tabindex="-1">
<div class="dropdown-menu__close">
<button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
<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>
<h3 class="dropdown-menu__heading title-m">Mi perfil</h3>
<nav class="dropdown-menu__list">
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Datos personales</span>
</a>
<a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
<span class="dropdown-menu__list-item__ripple"></span>
<!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
<span class="dropdown-menu__list-item__text bodycopys-m">Actualizar contraseña</span>
</a>
</nav>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-bar">
<div class="tab-bar__content">
<ul class="tab-bar__list">
<li>
<a id="summary" class="tab-bar__list-item tab-bar__list-item--activated" href="" tabindex="0" data-menu-item="tabbar" runat="server">
<span class="tab-bar__list-item__ripple"></span>
<i class="icons" aria-hidden="true">
<svg class="icon icon-16_dashboard ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_dashboard"></use>
</svg>
</i>
<span class="tab-bar__list-item__text bodycopy-xs">Resumen</span>
</a>
</li>
<li>
<a id="documents" class="tab-bar__list-item " href="" tabindex="-1" data-menu-item="tabbar" runat="server">
<span class="tab-bar__list-item__ripple"></span>
<i class="icons" aria-hidden="true">
<svg class="icon icon-16_file-text ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_file-text"></use>
</svg>
</i>
<span class="tab-bar__list-item__text bodycopy-xs">Documentos</span>
</a>
</li>
<li>
<a id="consultant" class="tab-bar__list-item tab-bar__list-item--disabled" href="" tabindex="-1" data-menu-item="tabbar" runat="server">
<span class="tab-bar__list-item__ripple"></span>
<i class="icons" aria-hidden="true">
<svg class="icon icon-16_consultant ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_consultant"></use>
</svg>
</i>
<span class="tab-bar__list-item__text bodycopy-xs">Tu consultor</span>
</a>
</li>
</ul>
</div>
</div>
<aside class="drawer drawer--modal">
<div class="drawer__content">
<p><span class="bodycopy"></span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></p>
<ul class="drawer__content-list">
</ul>
</div>
</aside>
<div class="drawer-scrim"></div>
</div>
</div>
</header>
<section class="splitter splitter_bg-color_white splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="hero-dashboard">
<div class="row hero-dashboard__content ">
<div class="wrap-img lazyload ">
<picture>
<source srcset="/dist/images/hero-dashboard-mobile.png" media="(max-width:767px)" />
<source srcset="" media="(max-width:1023px)" />
<source srcset="" media="(max-width:1279px)" />
<source srcset="/dist/images/hero-dashboard.png" media="(max-width:1679px)" />
<img src="/dist/images/hero-dashboard.png" />
</picture>
</div>
<div class="hero-dashboard__inner col-xs-12 col-ms-10 col-sm-10 col-lg-10 col">
<div class="hero-dashboard__inner__title">
<svg class="icon icon-home ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#home"></use>
</svg>
<div class="text-label-m text-label-m_color_accent">Resumen solicitud</div>
<h2 class="
title-l
">
Hola <span>%name%</span>, esta es tu solicitud %#000000%
</h2>
</div>
<ul class="tile-figure-price">
<li class="tile-figure-price__item">
<div class="tile-figure-price__description">
<div class="text-label-m">Precio de la vivienda</div>
</div>
<div class="tile-figure-price__figure">
<div class="
number-m
"><span>340.000</span></div>
<span class="tile-figures-module__figure-sufix number-m">€</span>
</div>
</li>
<li class="tile-figure-price__item">
<div class="tile-figure-price__description">
<div class="text-label-m">Cantidad solicitada</div>
</div>
<div class="tile-figure-price__figure">
<div class="
number-m
"><span>280.000</span></div>
<span class="tile-figures-module__figure-sufix number-m">€</span>
</div>
</li>
<li class="tile-figure-price__item">
<div class="tile-figure-price__description">
<div class="text-label-m">Aportación</div>
</div>
<div class="tile-figure-price__figure">
<div class="
number-m
"><span>60.000</span></div>
<span class="tile-figures-module__figure-sufix number-m">€</span>
</div>
</li>
<li class="tile-figure-price__item">
<div class="tile-figure-price__description">
<div class="text-label-m">Gastos e impuestos</div>
</div>
<div class="tile-figure-price__figure">
<div class="
number-m
"><span>8.000</span></div>
<span class="tile-figures-module__figure-sufix number-m">€</span>
</div>
</li>
</ul>
<span class="border"></span>
<ul class="hero-dashboard__details">
<li class="item">
<svg class="icon icon-16_calendar ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_calendar"></use>
</svg>
<span class="bodycopy-s">35 años</span>
</li>
<li class="item">
<svg class="icon icon-16_users ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_users"></use>
</svg>
<span class="bodycopy-s">1 titular</span> <a class="link
link_secondary
" href="#">
<span>Añadir otro titular</span>
</a>
</li>
<li class="item">
<svg class="icon icon-16_map-pin ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_map-pin"></use>
</svg>
<span class="bodycopy-s">Barcelona</span>
</li>
<li class="item">
<svg class="icon icon-16_home ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_home"></use>
</svg>
<span class="bodycopy-s">Vivienda habitual/2º mano</span>
</li>
<li class="item">
<svg class="icon icon-16_savings ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_savings"></use>
</svg>
<span class="bodycopy-s">68.000 €</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="access-highlight lazyload">
<div class="wrap-img">
<picture>
<source srcset="/dist/images/access-highlight-mobile.jpg" media="(max-width:767px)" />
<img src="/dist/images/access-highlight-desktop.jpg" />
</picture>
</div>
<div class="row content">
<div class="
col-xs-9 col-xs-mr col-ms-6 col-ms-offset-1 col-sm-3 col-md-3 col-md-offset-right-2 col-lg-3 col
">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="access-highlight__figure">
<div class="access-highlight__number">
<div class="
number-xl
number-xl_color_light
"><span>300</span></div>
</div>
<div class="access-highlight__label">
<div class="text-label-m text-label-m_color_light">personas extranjeras han confiado en nosotros este año</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-6 col-sm-mr col-md-5 col-lg-5 col">
<div class="access-highlight__tile">
<div class="tile-highlight">
<div class="tile-highlight__wrapper">
<div class="tile-highlight__content">
<div class="tile-highlight__label">
<div class="text-label-m text-label-m_color_light">¿No Vives en Espana y quieres comprar aquí?</div>
</div>
<div class="tile-highlight__title">
<h2 class="
title-l
title-l_color_light
">
Tu quieres una casa y nosotros lo hacemos posible
</h2>
</div>
<div class="tile-highlight__bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>
</div>
</div>
<div class="tile-highlight__btn">
<a class="btn
" href="#" id="">
Comprar casa para no residentes
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<main class="resumen">
{{ render '@header--accent-ds-relative' }}
{{ render '@hero-dashboard' }}
{{ render '@access-highlight' }}
</main>
/* No context defined. */
No notes defined.