<div class="card-result">
<div class="card-result__title">
<h2 class="
title-l
">
Tu cuota mensual
</h2>
</div>
<ul class="items">
<li class="card-result__item hidden" id="inicial">
<div class="title-with-tooltip">
<p id="resultado-cuota-inicial-title" class="
title-s
"></p>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-inicial-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-inicial-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
<li class="card-result__item hidden" id="periodo-gracia">
<div class="title-with-tooltip">
<p id="resultado-cuota-periodo-gracia-title" class="
title-s
">Los XX primeros meses durante el período de carencia</p>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-title-resultado" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-periodo-gracia-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-periodo-gracia-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
<li class="card-result__item hidden" id="resto-periodo-gracia">
<div class="title-with-tooltip">
<p id="resultado-cuota-resto-periodo-gracia-title" class="
title-s
">Los próximos XX meses hasta realizar la amortización anticipada</p>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-title-resultado2" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-resto-periodo-gracia-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-resto-periodo-gracia-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
<li class="card-result__item hidden" id="resto-amortizacion">
<div class="title-with-tooltip">
<p id="resultado-cuota-resto-title" class="
title-s
">El resto del período tras la amortización anticipada</p>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-title-resultado3" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-resto-amortizacion-cifra" class="
title-xl
"></p>
</li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
<li>
<div class="bodycopy-xs
">
por vecino
</div>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-resto-amortizacion-cifra-clarification">
</div>
</li>
<li>
<h4 id="resultado-cuota-inicial-symbol-clarification" class="
title-s
">€/mes</h4>
</li>
<li>
<div class="bodycopy-xs
">
por comunidad
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result__taetin">
<li class="tae">
<ul>
<li>
<div class="
bodycopy-m
">
TAE
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tae" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<p id="tae-cifra" class="
title-xl
">4,85%</p>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">TIN</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="tin-cifra">
4,75%
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result__additional">
<li>
<ul>
<li><label class="label-m" for="">Comisión de apertura financiada (1%)</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-comision-apertura" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="comision-apertura-cifra">
2.000€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">Gastos de formalización</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-gastos-formalizacion" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="gastos-formalizacion-cifra">
1.000,00€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">IMPORTE TOTAL FINANCIADO</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-gastos-formalizacion" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="total-financiado-cifra">
4.500€
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result__additional2">
<li><label class="label-m" for="">OTRAS COMISIONES</label>
</li>
<li>
<ul>
<li><label class="label-m" for="">comisión de amortización</label>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-comision-amortizacion" 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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="comision-amortizacion-cifra">
dsdsasds
</div>
</li>
</ul>
</li>
</ul>
<div class="wrap-btn">
<a class="btn
" href="https://uci.com/es/solicita-tu-hipoteca/" id="">
Solicita tu préstamo
</a>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Descargar tu informe en PDF</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
<div class="card-result{{#if isError}} error{{/if}}">
{{#if isError}}
{{ render '@icon--56-alert' }}
{{/if}}
{{#if isError}}
<div class="card-result__title">
{{> @title-m title }}
</div>
{{else}}
{{#if title}}
<div class="card-result__title">
{{#if img-title}}
<span class="wrap-img"><img src="{{ img-title }}"
alt="{{ alt-img-title }}"></span>
{{/if}}
{{#if antetitle}}
{{> @label antetitle }}
{{/if}}
{{> @title-l title }}
{{#if subtitle}}
{{> @bodycopy-s subtitle }}
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if form-radio-group}}
<div class="card-result__form-radio-group">
{{> @form-radio-group form-radio-group }}
</div>
{{/if}}
{{#if isError}}
<ul>
{{#each item-error}}
<li>{{> @bodycopy-m txt-error }}</li>
{{/each}}
</ul>
{{else}}
{{#if item}}
<ul class="items">
{{#each item}}
<li class="card-result__item {{extraClass}}" id="{{id}}">
{{#if title-item}}
<div class="title-with-tooltip">{{> @title-s title-item }}{{#if tooltip-title}}{{> @tooltip tooltip-title}}{{/if}}
</div>
{{/if}}
{{#if number-item}}
<ul class="card-result__item-number">
<li>{{> @title-xl number-item }}</li>
{{#if number-item-symbol}}<li>{{> @bodycopy-l number-item-symbol }}</li>{{/if}}
{{#if number-item-symbol2}}<li>{{> @bodycopy-xs number-item-symbol2 }}</li>{{/if}}
</ul>
{{/if}}
{{#if tin-item-number}}
<ul>
<li>{{> @label-m tin-item-text}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
<li>{{> @bodycopy-m tin-item-number}}</li>
</ul>
{{/if}}
{{#if text-clarification}}
<ul class="card-result__item-clarification">
{{#if number-clarification}}<li>{{> @bodycopy-m number-clarification }}</li>
<li>{{> @title-s symbol-clarification }}</li>{{/if}}
<li>{{> @bodycopy-xs text-clarification }}</li>
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{/if}}
{{#if tae-item-number}}
<ul class="card-result__taetin">
<li class="tae">
<ul>
<li>{{> @bodycopy-m tae-item-text}}{{#if tae-tooltip}}{{> @tooltip tae-tooltip }}{{/if}}</li>
<li>{{> @title-xl tae-item-number}}</li>
</ul>
</li>
{{#if tin-item-number}}
<li>
<ul>
<li>{{> @label-m tin-item-text}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
<li>{{> @bodycopy-m tin-item-number}}</li>
</ul>
</li>
{{/if}}
{{#if euribor-item-number}}
<li>
<ul>
<li>{{> @label-m euribor-item-text }}</li>
<li>{{> @bodycopy-m euribor-item-number }}</li>
</ul>
</li>
{{/if}}
{{#if tin-tae-link}}
<li class="tin-tae-link">
{{> @link tin-tae-link }}</li>
{{/if}}
{{#if teFinanciamos}}
<li class="card-result__square">
{{> @bodycopy-m teFinanciamosText }}
{{> @title-m teFinanciamos }}
</li>
{{/if}}
</ul>
{{/if}}
{{#if additional-item}}
<ul class="card-result__additional">
{{#if additional-item-tit}}
<li class="tit">{{> @bodycopy-m additional-item-tit }}{{> @link additional-item-tit-link }}</li>
{{/if}}
{{#each additional-item}}
<li>
<ul>
<li>{{> @label-m additional-item-text }}{{#if tooltip}}{{> @tooltip tooltip }}{{/if}}</li>
<li>{{> @bodycopy-m additional-item-number }}</li>
</ul>
</li>
{{/each}}
</ul>
{{/if}}
{{#if additional-item2}}
<ul class="card-result__additional2">
<li>{{> @label-m additional-item2-tit }}</li>
{{#each additional-item2}}
<li>
<ul>
<li>{{> @label-m additional-item-text }}{{#if tooltip}}{{> @tooltip tooltip }}{{/if}}</li>
<li>{{> @bodycopy-m additional-item-number }}</li>
</ul>
</li>
{{/each}}
</ul>
{{/if}}
{{#if btn}}
<div class="wrap-btn">
{{> @btn btn }}
{{#if download-link}}
{{> @link download-link }}
{{/if}}
</div>
{{/if}}
</div>
{
"title": {
"text": "Tu cuota mensual"
},
"item": [
{
"id": "inicial",
"extraClass": "hidden",
"title-item": {
"id": "resultado-cuota-inicial-title",
"isP": true,
"text": ""
},
"number-item": {
"id": "resultado-cuota-inicial-cifra",
"isP": true,
"text": ""
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": {
"id": "resultado-cuota-segundo-periodo-symbol2",
"text": "por vecino"
},
"number-clarification": {
"id": "resultado-cuota-inicial-cifra-clarification",
"text": ""
},
"symbol-clarification": {
"id": "resultado-cuota-inicial-symbol-clarification",
"text": "€/mes"
},
"text-clarification": {
"id": "resultado-cuota-inicial-txt-clarification",
"text": "por comunidad"
}
},
{
"id": "periodo-gracia",
"extraClass": "hidden",
"title-item": {
"id": "resultado-cuota-periodo-gracia-title",
"isP": true,
"text": "Los XX primeros meses durante el período de carencia"
},
"tooltip-title": {
"id": "tooltip-title-resultado",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"number-item": {
"id": "resultado-cuota-periodo-gracia-cifra",
"isP": true,
"text": ""
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": {
"id": "resultado-cuota-segundo-periodo-symbol2",
"text": "por vecino"
},
"number-clarification": {
"id": "resultado-cuota-periodo-gracia-cifra-clarification",
"text": ""
},
"symbol-clarification": {
"id": "resultado-cuota-inicial-symbol-clarification",
"text": "€/mes"
},
"text-clarification": {
"id": "resultado-cuota-periodo-gracia-txt-clarification",
"text": "por comunidad"
}
},
{
"id": "resto-periodo-gracia",
"extraClass": "hidden",
"title-item": {
"id": "resultado-cuota-resto-periodo-gracia-title",
"isP": true,
"text": "Los próximos XX meses hasta realizar la amortización anticipada"
},
"tooltip-title": {
"id": "tooltip-title-resultado2",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"number-item": {
"id": "resultado-cuota-resto-periodo-gracia-cifra",
"isP": true,
"text": ""
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": {
"id": "resultado-cuota-segundo-periodo-symbol2",
"text": "por vecino"
},
"number-clarification": {
"id": "resultado-cuota-resto-periodo-gracia-cifra-clarification",
"text": ""
},
"symbol-clarification": {
"id": "resultado-cuota-inicial-symbol-clarification",
"text": "€/mes"
},
"text-clarification": {
"id": "resultado-cuota-segundo-periodo-txt-clarification",
"text": "por comunidad"
}
},
{
"id": "resto-amortizacion",
"extraClass": "hidden",
"title-item": {
"id": "resultado-cuota-resto-title",
"isP": true,
"text": "El resto del período tras la amortización anticipada"
},
"tooltip-title": {
"id": "tooltip-title-resultado3",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": ""
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": {
"id": "resultado-cuota-segundo-periodo-symbol2",
"text": "por vecino"
},
"number-clarification": {
"id": "resultado-cuota-resto-amortizacion-cifra-clarification",
"text": ""
},
"symbol-clarification": {
"id": "resultado-cuota-inicial-symbol-clarification",
"text": "€/mes"
},
"text-clarification": {
"id": "resultado-cuota-resto-amortizacion-cifra-clarification",
"text": "por comunidad"
}
}
],
"tae-item-text": {
"text": "TAE"
},
"tae-tooltip": {
"id": "tooltip-tae",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85%",
"isP": true
},
"tin-item-text": {
"text": "TIN"
},
"tin-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%"
},
"additional-item": [
{
"additional-item-text": {
"text": "Comisión de apertura financiada (1%)"
},
"tooltip": {
"id": "tooltip-comision-apertura",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"additional-item-number": {
"id": "comision-apertura-cifra",
"text": "2.000€"
}
},
{
"additional-item-text": {
"text": "Gastos de formalización"
},
"tooltip": {
"id": "tooltip-gastos-formalizacion",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"additional-item-number": {
"id": "gastos-formalizacion-cifra",
"text": "1.000,00€"
}
},
{
"additional-item-text": {
"text": "IMPORTE TOTAL FINANCIADO"
},
"tooltip": {
"id": "tooltip-gastos-formalizacion",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"additional-item-number": {
"id": "total-financiado-cifra",
"text": "4.500€"
}
}
],
"additional-item2-tit": {
"text": "OTRAS COMISIONES"
},
"additional-item2": [
{
"additional-item-text": {
"text": "comisión de amortización"
},
"tooltip": {
"id": "tooltip-comision-amortizacion",
"isFlex": true,
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"additional-item-number": {
"id": "comision-amortizacion-cifra",
"text": "dsdsasds"
}
}
],
"btn": {
"text": "Solicita tu préstamo",
"href": "https://uci.com/es/solicita-tu-hipoteca/"
},
"download-link": {
"href": "#",
"text": "Descargar tu informe en PDF",
"icon-after": {
"name": "download",
"isAfter": true
}
}
}
.card-result {
display: flex;
flex-direction: column;
opacity: 1;
transition: opacity 0.3s ease-in-out;
background-color: var(--color-tertiary-brand);
padding: 32px;
@media (--viewport-sm-max) {
padding: 32px 16px;
}
&__title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.tooltip {
margin-bottom: -60px;
}
img {
margin-bottom: 16px;
}
.label {
margin-bottom: 16px;
}
.bodycopy-s {
margin-top: 16px;
text-align: center;
}
}
&__form-radio-group {
display: flex;
justify-content: center;
margin-top: 16px;
.form-radio-group {
margin-bottom: 0;
.field-top {
display: none;
}
ul {
.radio-group__item {
margin-right: 16px;
&:last-child {
margin-right: 0;
}
}
}
}
}
&__square {
display: flex;
justify-content: space-between;
align-items: center;
margin: 16px 0 0;
border-top: solid 1px var(--color-border-accent-bold);
border-bottom: solid 1px var(--color-border-accent-bold);
padding: 16px 0 10px;
.title-m {
color: var(--new-color-text);
}
}
&__item {
margin-top: 32px;
text-align: center;
.title-s {
color: var(--color-secondary-brand);
}
.title-xl {
color: var(--color-text-primary);
}
.title-with-tooltip {
display: block;
text-align: center;
margin: 0 10% 16px;
.title-s {
display: inline;
}
.tooltip {
top: 22px;
right: 0;
left: 8px;
display: inline;
}
}
}
&__item-number {
display: flex;
align-items: flex-end;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
.bodycopy-s {
padding-bottom: 11px;
}
}
}
&__item-clarification {
display: flex;
align-items: center;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
}
}
&__taetin {
display: flex;
flex-direction: column;
border-bottom: solid 1px var(--color-secondary-brand);
padding: 40px 0 0;
margin-bottom: 20px;
li.tae {
.bodycopy-m,
.title-xl {
color: var(--color-text);
line-height: 34px;
}
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
li {
margin-bottom: 20px;
line-height: normal;
.tooltip {
top:-8px;
right:-8px;
}
&:first-child{
display: flex;
align-items: center;
justify-content: flex-start;
.bodycopy-m, .label-m{
min-width: 28px; /* para alinear los tooltips como en diseño (CA)*/
}
}
}
}
}
&__additional {
display: flex;
flex-direction: column;
margin-bottom: 0;
li.tit {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
align-items: center;
.bodycopy-m {
color: var(--color-text-accent);
}
.link_inline {
color: var(--color-text-link-secondary);
}
}
ul {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
li {
display: flex;
margin-bottom: 20px;
line-height: normal;
/*&:nth-last-child(2) {
flex-shrink: 1;
}*/
&:last-of-type {
white-space: nowrap;
text-align: right;
/*flex-grow: 1;*/
}
/*@media (--viewport-xs-max) {
&:first-of-type {
max-width: 40%;
}
}*/
}
.tooltip {
right: unset;
left: unset;
top: unset;
display: inline-flex;
margin-right: 32px;
margin-left: -12px;
margin-bottom: -20px;
}
}
}
&.error {
justify-content: center;
text-align: center;
padding: 56px 32px;
align-items: center;
background-color: var(--color-background-accent);
@media (--viewport-ms-max) {
padding: 40px 60px;
}
@media (--viewport-xs-max) {
padding: 40px;
}
.title-m {
margin-bottom: 32px;
}
.icon {
width: 40px;
height: 40px;
margin-bottom: 32px;
}
}
&.fade-out {
opacity: .5;
}
&__item {
margin-top: 32px;
text-align: center;
.title-s {
color: var(--color-secondary-brand);
}
.title-xl {
color: var(--color-text-primary);
}
.title-with-tooltip {
display: block;
text-align: center;
margin: 0 10% 16px;
.title-s {
display: inline;
}
.tooltip {
top: 22px;
right: 0;
left: 8px;
display: inline;
}
}
}
&__item-number {
display: flex;
align-items: flex-end;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
.bodycopy-xs {
padding-bottom: 13px;
}
.title-m {
padding-bottom: 9px;
color: var(--color-text-primary);
}
.bodycopy-l {
padding-bottom: 9px;
}
@media (--viewport-md-max) {
.bodycopy-xs {
padding-bottom: 10px;
}
.bodycopy-l {
padding-bottom: 6px;
}
.title-m {
padding-bottom: 4px;
}
}
@media (--viewport-sm-max) {
.bodycopy-xs {
padding-bottom: 7px;
}
.bodycopy-l {
padding-bottom: 3px;
}
.title-m {
padding-bottom: 3px;
}
}
@media (--viewport-ms-max) {
.bodycopy-xs {
padding-bottom: 11px;
}
.bodycopy-l {
padding-bottom: 6px;
}
.title-m {
padding-bottom: 6px;
}
}
@media (--viewport-xs-max) {
.bodycopy-xs {
padding-bottom: 8px;
}
.bodycopy-l {
padding-bottom: 3px;
}
.title-m {
padding-bottom: 4px;
}
}
}
}
&__item-clarification {
display: flex;
align-items: center;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
.title-s {
padding-bottom: -3px;
color: var(--color-text-primary);
}
.bodycopy-xs {
margin-bottom: -3px;
}
}
}
&__additional2 {
display: flex;
flex-direction: column;
margin-bottom: 20px;
border-top: solid 1px var(--color-secondary-brand);
padding: 20px 0 0;
li {
&:first-of-type {
margin-bottom: 20px;
.label-m {
color: var(--color-text-subtle);
}
}
}
ul {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
li {
display: flex;
margin-bottom: 20px;
line-height: normal;
/*&:nth-last-child(2) {
flex-shrink: 1;
}*/
&:last-of-type {
white-space: nowrap;
text-align: right;
/*flex-grow: 1;*/
}
/*@media (--viewport-xs-max) {
&:first-of-type {
max-width: 40%;
}
}*/
}
.tooltip {
right: unset;
left: unset;
top: unset;
display: inline-flex;
margin-right: 32px;
margin-left: -12px;
margin-bottom: -20px;
}
}
}
&.fade-out {
opacity: .5;
}
&__nav {
display: flex;
@media (--viewport-xs-max) {
justify-content: space-between;
padding: 0 20px;
}
&-back,
&-forward {
margin-top: 30px;
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
.wrap-btn{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
.icon{
fill:var(--color-icon);
}
}
}
No notes defined.