<div class="card-result-payment-single comparison">
<div class="card-result-payment-single__inner">
<!---->
<div class="card-result-payment-single__head">
<div class="card-result-payment-single__title">
<span class="wrap-img"><img src="/dist/images/tipomixto.svg" alt=""></span>
<span class="title-m
">Hipoteca Mixta</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment-single__form-radio-group">
<span class="bodycopy-s">Prestação Fixa durante 10 anos e indexada à Euribor 6 meses nos anos seguintes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="form-radio-group " id="anhos">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos5" type="radio" title="anhos5" name="anhos" value="5 años">
<label class="radio-label " for="anhos5" id="" value="">
<span class="caption-placeholder-m">5 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos10" type="radio" title="anhos10" name="anhos" value="10 años" checked>
<label class="radio-label " for="anhos10" id="" value="">
<span class="caption-placeholder-m">10 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos15" type="radio" title="anhos15" name="anhos" value="15 años">
<label class="radio-label " for="anhos15" id="" value="">
<span class="caption-placeholder-m">15 años</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="item">
<div class="pretitle-payment"><span class="bodycopy-m">Los 10 primeros años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment-single__item-number">
<li><span class="title-l
title_color_dark
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li><span class="bodycopy-l">€/mês</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
<ul class="breakdown">
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAN
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAEG
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Empréstito
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Prazo
</div>
</div>
<span class="title-m
title_color_dark
">XX anos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Pedir empréstimo
</a>
<a class="btn
btn_secondary
" href="#" id="">
Ver simulaçao completa e FINE
<svg class="icon icon-16_chevron-down icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-down"></use>
</svg>
</a>
</div>
<div class="wrap-fine">
<ul class="card-result-payment-single__additional">
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">Euribor 6 meses</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Valor do Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Spread</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro vida mensal</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro imóvel semestral</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Comissoes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Despesas e Impostos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">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>
</div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrap-dedicated-link">
<div class="dedicated-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>FINE Simulaçao</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 class="dedicated-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Resumo FINE Simulaçao</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>
<div
class="card-result-payment-single{{#if isError}} error{{/if}}{{#if isScroll}} scroll{{/if}}{{#if isComparison}} comparison{{/if}}{{#if unavailable}} product-unavailable{{/if}}">
<div class="card-result-payment-single__inner">
{{#if isError}}
{{ render '@icon--56-alert' }}
<div class="card-result-payment__title">
{{> @title title }}
</div>
{{#if subtitle}}
{{> @bodycopy subtitle }}
{{/if}}
{{else if isScroll}}
<div class="card-result-payment-single__scroll">
<div class="payment-scroll">
{{> @title title }}
<div class="wrap">
{{> @bodycopy number-item }}{{> @caption number-item-symbol }}
</div>
</div>
<div class="breakdown-scroll">
{{#each breakdown}}
<div class="wrap">
{{> @caption breakdown-text }}{{> @bodycopy breakdown-number }}
</div>
{{/each}}
</div>
{{> @link scroll-link }}
</div>
{{else}}
{{#if preloader}}
<div class="card-result-payment-single__preloader">
{{> @preloader preloader }}
</div>
{{/if}}
<!--{{#if menu-tab}}
<div class="card-result-payment-single__nav-tabs">
{{> @title title-tabs }}
{{> @menu-tab menu-tab }}
</div>
{{/if}}-->
<div class="card-result-payment-single__head">
<div class="card-result-payment-single__title">
{{#if img-title}}
<span class="wrap-img"><img src="{{ img-title }}" alt="{{ alt-img-title }}"></span>
{{/if}}
{{> @title title }}
{{#unless isErrorComparison}}
{{#if subtitle}}{{> @bodycopy subtitle }}{{/if}}
{{/unless}}
</div>
</div>
{{#if isErrorComparison}}
<div class="card-result-payment-single__error-comparison">
{{ render '@icon--56-alert' }}
{{> @bodycopy subtitle }}
</div>
{{else}}
{{#if form-radio-group}}
<div class="card-result-payment-single__form-radio-group">
{{> @bodycopy title-radio-group }}
{{> @form-radio-group form-radio-group }}
</div>
{{/if}}
<div class="item">
{{#if title-item}}
<div class="pretitle-payment">{{> @bodycopy title-item }}
{{#if tooltip-title}}{{> @tooltip tooltip-title}}{{/if}}
</div>
{{/if}}
{{#if number-item}}
<ul class="card-result-payment-single__item-number">
<li>{{> @title number-item }}</li>
{{#if number-item-symbol}}<li>{{> @bodycopy number-item-symbol }}</li>{{/if}}
</ul>
{{/if}}
{{#if breakdown}}
<ul class="breakdown">
{{#each breakdown}}
<li>
<div class="breakdown-text">{{> @bodycopy-m breakdown-text}}
{{#if breakdown-tooltip}}{{> @tooltip breakdown-tooltip}}{{/if}}
</div>
{{> @title breakdown-number}}
</li>
{{/each}}
</ul>
{{/if}}
</div>
{{#if btn}}
<div class="wrap-btn">
{{> @btn btn }}
{{#if btn-secondary}}
{{> @btn btn-secondary }}
{{/if}}
</div>
{{/if}}
<div class="wrap-fine">
{{#if additional-item}}
<ul class="card-result-payment-single__additional{{#if noSpread}} no-spread{{/if}}">
{{#each additional-item}}
<li>
<ul>
<li><div class="card-result-payment-single__additional-item">{{> @bodycopy additional-item-text }}{{#if tooltip}}{{> @tooltip tooltip }}{{/if}}</div></li>
<li>{{> @bodycopy additional-item-number }}</li>
</ul>
</li>
{{/each}}
</ul>
{{/if}}
{{#if isComparison}}
{{else}}
{{#if download}}
<div class="wrap-link">
{{> @link download }}
{{#if download2}}
{{> @link download2 }}
{{/if}}
{{#if download3}}
{{> @link download3 }}
{{/if}}
</div>
{{/if}}
{{/if}}
</div>
{{#if link-comparison}}
<div class="link-comparison">
{{> @link link-comparison }}
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
{{#if alert}}
<div class="wrap-alert">
{{> @alert alert }}
{{#if alert2}}
{{> @alert alert2 }}
{{/if}}
{{#if alert3}}
{{> @alert alert3 }}
{{/if}}
</div>
{{/if}}
{{#if legal-text}}
<div class="legal-text">
{{> @bodycopy legal-text }}
</div>
{{/if}}
{{#if isComparison}}
{{#if download-comparison}}
<div class="wrap-dedicated-link">
{{> @dedicated-link download-comparison }}
{{#if download2}}
{{> @dedicated-link download-comparison2 }}
{{/if}}
</div>
{{/if}}
{{/if}}
</div>
{
"title": {
"text": "Hipoteca Mixta",
"type": "-m"
},
"subtitle": null,
"title-item": {
"id": "resultado-cuota-title",
"type": "-m",
"text": "Los 10 primeros años"
},
"number-item": {
"id": "resultado-cuota-cifra",
"isP": true,
"text": "734,35",
"type": "-l",
"colorDark": true
},
"number-item-symbol": {
"id": "resultado-cuota-symbol",
"text": "€/mês",
"type": "-l"
},
"breakdown": [
{
"breakdown-text": {
"text": "TAN"
},
"breakdown-tooltip": {
"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"
}
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX %",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "TAEG"
},
"breakdown-tooltip": {
"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"
}
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX %",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "Empréstito"
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX €",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "Prazo"
},
"breakdown-number": {
"id": "tin-cifra",
"text": "XX anos",
"type": "-m",
"colorDark": true
}
}
],
"additional-item": [
{
"additional-item-text": {
"text": "Indexante",
"type": "-s"
},
"additional-item-number": {
"id": "indexante",
"text": "Euribor 6 meses",
"type": "-s"
},
"tooltip": {
"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"
}
}
},
{
"additional-item-text": {
"text": "Valor do Indexante",
"type": "-s"
},
"additional-item-number": {
"id": "valor-indexante",
"text": "X,XXX %",
"type": "-s"
},
"tooltip": {
"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"
}
}
},
{
"additional-item-text": {
"text": "Spread",
"type": "-s"
},
"additional-item-number": {
"id": "spread",
"text": "X,XXX %",
"type": "-s"
},
"tooltip": {
"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"
}
}
},
{
"additional-item-text": {
"text": "Seguro vida mensal",
"type": "-s"
},
"additional-item-number": {
"id": "seguro-vida-mensal",
"text": "XXX,XX €",
"type": "-s"
},
"tooltip": {
"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"
}
}
},
{
"additional-item-text": {
"text": "Seguro imóvel semestral",
"type": "-s"
},
"additional-item-number": {
"id": "seguro-imovel-semestral",
"text": "XXX,XX €",
"type": "-s"
},
"tooltip": {
"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"
}
}
},
{
"additional-item-text": {
"text": "Comissoes",
"type": "-s"
},
"additional-item-number": {
"id": "comissoes",
"text": "XXX,XX €",
"type": "-s"
},
"tooltip": {
"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"
}
}
},
{
"additional-item-text": {
"text": "Despesas e Impostos",
"type": "-s"
},
"additional-item-number": {
"id": "despesas-impostos",
"text": "XXX,XX €",
"type": "-s"
},
"tooltip": {
"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"
}
}
}
],
"btn": {
"text": "Pedir empréstimo",
"href": "#"
},
"btn-secondary": {
"text": "Ver simulaçao completa e FINE",
"href": "#",
"isSecondary": true,
"icon-after": {
"name": "16_chevron-down",
"isAfter": true
}
},
"download": {
"text": "FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"download2": {
"text": "Resumo FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"alert": false,
"alert2": false,
"alert3": false,
"link-comparison": false,
"legal-text": false,
"isComparison": true,
"img-title": "/dist/images/tipomixto.svg",
"title-radio-group": {
"text": "Prestação Fixa durante 10 anos e indexada à Euribor 6 meses nos anos seguintes",
"type": "-s"
},
"form-radio-group": {
"field-top": false,
"id": "anhos",
"radio-group": {
"radio-group": [
{
"id": "anhos5",
"title": "anhos5",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "5 años"
}
},
{
"id": "anhos10",
"title": "anhos10",
"name": "anhos",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-m",
"text": "10 años"
}
},
{
"id": "anhos15",
"title": "anhos15",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "15 años"
}
}
]
},
"field-bottom": false
},
"download-comparison": {
"link": {
"text": "FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
}
},
"download-comparison2": {
"link": {
"text": "Resumo FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
}
}
}
.card-result-payment-single {
position: sticky;
top: 0;
&__inner {
display: flex;
flex-direction: column;
opacity: 1;
transition: opacity 0.3s ease-in-out;
background-color: var(--color-tertiary-brand);
padding: 24px 32px 32px;
position: relative;
}
&.scroll {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
top: auto;
z-index: 12;
.card-result-payment-single__inner {
padding: 24px 20px;
}
}
&__preloader {
position: absolute;
height: 100%;
width: 100%;
margin: -32px;
z-index: 1;
/* para que no lo tapen los tooltips (CA. R.) */
.preloader {
background-color: var(--color-blanket-subtle);
position: unset;
}
}
&.error {
.card-result-payment-single__inner {
justify-content: center;
text-align: center;
padding: 56px 32px;
align-items: center;
gap: 32px;
}
}
&__error-comparison {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
margin-top: 180px;
@media (--viewport-ms-max) {
margin-top: 0;
}
}
&__scroll {
display: flex;
flex-direction: column;
gap: 8px;
.payment-scroll,
.breakdown-scroll {
display: flex;
flex-direction: row;
justify-content: space-between;
.wrap {
display: flex;
align-items: baseline;
gap: 4px;
}
}
.link {
width: fit-content;
align-self: center;
justify-content: center;
margin-top: 8px;
color: var(--color-text-link-secondary);
.icon {
fill: var(--color-icon-accent);
}
}
}
&__title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
img {
margin-bottom: 16px;
}
.bodycopy-m {
color: var(--color-text-inverse);
height: 48px;
display: flex;
align-items: center;
text-align: center;
@media (--viewport-ms-max) {
height: 72px;
}
}
}
&__head {
background-color: var(--color-background-accent-bold);
margin: -24px -32px 24px;
padding: 24px 32px;
.title-l {
color: var(--color-text-inverse);
}
.label {
color: var(--color-text-inverse);
margin-bottom: 0;
}
img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
hue-rotate(309deg) brightness(107%) contrast(99%);
}
& + .bodycopy-s {
text-align: center;
min-height: 46px;
}
}
&.comparison {
&.product-unavailable {
height: 100%;
}
.card-result-payment-single__inner {
height: 100%;
padding-top: 32px;
}
.card-result-payment-single__head {
background-color: transparent;
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 32px;
.title-l {
color: var(--color-text-accent);
}
img {
filter: unset;
}
}
.card-result-payment-single__additional {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
&.no-spread {
margin-bottom: 28px !important;
}
}
}
&__form-radio-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 48px;
gap: 32px;
margin-bottom: 32px;
.radio-group ul {
margin-bottom: 0;
}
@media (--viewport-sm-max) {
height: 72px;
}
.bodycopy-s {
text-align: center;
height: 40px;
display: flex;
align-items: center;
}
.form-radio-group {
display: flex;
justify-content: center;
margin-bottom: 0;
.field-top {
display: none;
}
ul {
.radio-group__item {
margin-right: 16px;
&:last-child {
margin-right: 0;
}
}
}
}
}
&.comparison .card-result-payment-single__form-radio-group {
height: 105px;
@media (--viewport-sm-max) {
height: auto;
}
.bodycopy-m {
min-height: 48px;
@media (--viewport-sm-max) {
height: auto;
}
}
}
.item {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
.pretitle-payment {
margin-bottom: 4px;
}
li {
margin-top: 0;
width: auto;
&:last-child {
margin-bottom: 0;
}
}
ul.breakdown {
display: flex;
flex-direction: column;
width: 100%;
gap: 4px;
li {
display: flex;
width: 100%;
justify-content: space-between;
line-height: normal;
.breakdown-text {
display: flex;
.tooltip {
top: 4px;
right: -8px;
}
}
}
}
.card-result-payment-single__item-number {
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 24px;
li {
padding: 0 3px;
line-height: normal;
.bodycopy-l {
position: relative;
top: -2px;
}
.title-l {
color: var(--color-text);
}
}
}
.tooltip .msg-tooltip {
text-align: left;
}
}
&__additional {
display: flex;
flex-direction: column;
border-bottom: solid 1px var(--color-border);
margin-top: 32px;
margin-bottom: 16px;
padding-bottom: 16px;
row-gap: 4px;
column-gap: 16px;
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
row-gap: unset;
column-gap: 16px;
li {
/*margin-bottom: 12px;*/
line-height: normal;
&:last-of-type {
white-space: nowrap;
}
/*@media (--viewport-xs-max) {
&:first-of-type {
max-width: 70%;
}
}*/
.card-result-payment-single__additional-item {
display: flex;
.tooltip {
top: 4px;
right: -8px;
}
}
}
}
}
.wrap-img {
height: 37px;
display: flex;
align-items: center;
}
&__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;
}
}
}
.wrap-btn {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 32px;
.btn {
justify-content: center;
}
}
.wrap-link {
display: flex;
flex-direction: column;
gap: 24px;
margin: 16px 0;
padding-top: 16px;
align-items: flex-start;
}
.link-comparison {
border-top: solid 1px var(--color-border);
margin-top: 16px;
padding-top: 32px;
.link {
color: var(--color-text-error);
.icon {
fill: var(--color-icon-accent);
}
}
}
.wrap-fine {
max-height: 5000px;
/*overflow: hidden; tengo que quitarlo porque corta los tooltips (CA.R.)*/
opacity: 1;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
&.collapsed {
max-height: 0;
opacity: 0;
& + .link-comparison {
border-top: 0;
margin-top: 32px;
padding-top: 0;
}
}
}
.wrap-dedicated-link {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 40px;
}
.wrap-alert {
.alert.inline .alert__wrap {
margin: 16px 0 0;
}
}
.legal-text {
margin-top: 40px;
}
/*&__nav {
display: flex;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding: 24px 20px 0;
justify-content: center;
align-items: center;
@media (--viewport-ms-max) {
display: flex;
}
&-tabs {
.menu-tab {
margin: 40px 0;
&-scroller__scroll-content {
width: 100%;
.menu-tab-item {
width: 33.3%;
}
}
}
.title-m {
text-align: center;
display: block;
}
}
}*/
}
No notes defined.