<div class="card-result-payment-swiper scroll">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="card-result-payment swiper-slide scroll">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="title-m
">Hipoteca Fija</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="resto-amortizacion">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">772,14</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="caption-label">€/mes</span>
</li>
<li class="title-with-tooltip"> <span class="caption-label">Los 30 años</span>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li> <span class="caption-label">TAE</span>
</li>
<li> <span class="caption-label">4,85%</span>
</li>
</ul>
</li>
<li>
<ul>
<li> <span class="caption-label">TIN</span>
</li>
<li> <span class="caption-label">4,75%</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrap-link-detalle">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ver detalle</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
<div class="card-result-payment swiper-slide scroll">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<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="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="periodo-gracia">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="caption-label">€/mes</span>
</li>
<li class="title-with-tooltip"> <span class="caption-label">10 primeros años</span>
</li>
</ul>
</li>
<li class="card-result-payment__item " id="resto-amortizacion">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">Euribor + 1,95%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li class="title-with-tooltip"> <span class="caption-label">Resto de años</span>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li> <span class="caption-label">TAE</span>
</li>
<li> <span class="caption-label">4,85%</span>
</li>
</ul>
</li>
<li>
<ul>
<li> <span class="caption-label">TIN</span>
</li>
<li> <span class="caption-label">4,75%</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrap-link-detalle">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ver detalle</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
<div class="card-result-payment swiper-slide scroll">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="title-m
">Hipoteca Variable</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="periodo-gracia">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="caption-label">€/mes</span>
</li>
<li class="title-with-tooltip"> <span class="caption-label">10 primeros años</span>
</li>
</ul>
</li>
<li class="card-result-payment__item " id="resto-amortizacion">
<ul class="card-result-payment__item-number-scroll">
<li><span class="title-m
">Euribor + 1,95%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li class="title-with-tooltip"> <span class="caption-label">Resto de años</span>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li> <span class="caption-label">TAE</span>
</li>
<li> <span class="caption-label">4,85%</span>
</li>
</ul>
</li>
<li>
<ul>
<li> <span class="caption-label">TIN</span>
</li>
<li> <span class="caption-label">4,75%</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrap-link-detalle">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ver detalle</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="card-result-payment__nav between-xs center-ms">
<div class="swiper-button-prev scroll">
<svg class="icon icon-32_arrow-left icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#32_arrow-left"></use>
</svg>
</div>
<div class="swiper-button-next scroll">
<svg class="icon icon-32_arrow-right icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#32_arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="card-result-payment-swiper{{#if isScroll}} scroll{{/if}}">
{{#if menu-tab}}
<div class="card-result-payment__nav-tabs">
{{> @title title-tabs }}
{{> @menu-tab menu-tab }}
</div>
{{/if}}
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each card-item}}
<div
class="card-result-payment swiper-slide{{#if isError}} error{{/if}}{{#if isScroll}} scroll{{/if}}">
{{#if isError}}
{{ render '@icon--56-alert' }}
<div class="card-result-payment__title">
{{> @title title }}
</div>
{{#if subtitle}}
{{> @bodycopy-s subtitle }}
{{/if}}
{{else}}
<div class="card-result-payment__head">
<div class="card-result-payment__title">
{{#if img-title}}
<span class="wrap-img"><img src="{{ img-title }}"
alt="{{ alt-img-title }}"></span>
{{/if}}
{{#if icon}}
{{> @icon icon }}
{{/if}}
{{#if isScroll}}
{{> @title title }}
{{else}}
{{> @title title }}
{{/if}}
</div>
</div>
{{/if}}
{{#if title-radio-group}}
<div class="card-result-payment__form-radio-group">
{{> @bodycopy title-radio-group }}
{{#if form-radio-group}}
{{> @form-radio-group form-radio-group }}
{{/if}}
</div>
{{/if}}
{{#if isError}}
<ul>
{{#each item-error}}
<li>{{> @bodycopy-m txt-error }}</li>
{{/each}}
</ul>
{{else}}
{{#if item}}
<div class="wrap-items">
<ul class="items">
{{#each item}}
<li class="card-result-payment__item {{extraClass}}" id="{{id}}">
{{#if isScroll}}
{{#if number-item}}
<ul class="card-result-payment__item-number-scroll">
<li>{{> @title number-item }}
{{#if number-item-symbol}}{{> @caption number-item-symbol }}{{/if}}
{{#if number-item-symbol2}}{{> @caption number-item-symbol2 }}{{/if}}</li>
{{#if title-item}}<li class="title-with-tooltip">{{> @caption title-item }}</li>{{/if}}
</ul>
{{/if}}
{{else}}
{{#if title-item}}
<div class="title-with-tooltip">{{> @bodycopy title-item }}{{#if tooltip-title}}{{> @tooltip
tooltip-title}}{{/if}}
</div>
{{/if}}
{{#if number-item}}
<ul class="card-result-payment__item-number">
<li>{{> @title 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 tin-item-number}}
<ul class="tin-item">
<li class="withTooltip">{{> @bodycopy-m tin-item-text}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
<li>{{> @bodycopy-m tin-item-number}}</li>
</ul>
{{/if}}
{{/if}}
{{/if}}
{{#if text-clarification}}
<ul class="card-result-payment__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 tae-item-number}}
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li{{#if isScroll}}{{else}} class="withTooltip"{{/if}}>{{#if isScroll}}{{> @caption tae-item-text }}{{else}}{{> @bodycopy-m tae-item-text
}}{{/if}}{{#if tae-tooltip}}{{> @tooltip tae-tooltip }}{{/if}}</li>
<li>{{#if isScroll}}{{> @caption tae-item-number }}{{else}}{{> @title-xl tae-item-number
}}{{> @bodycopy tae-item-number-symbol}}{{/if}}</li>
</ul>
</li>
{{#if tin-item-number}}
<li>
<ul>
<li{{#if isScroll}}{{else}} class="withTooltip"{{/if}}>{{#if isScroll}}{{> @caption tin-item-text }}{{else}}{{> @label-m tin-item-text
}}{{/if}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
<li>{{#if isScroll}}{{> @caption tin-item-number }}{{else}}{{> @bodycopy-m tin-item-number
}}{{/if}}</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 teFinanciamos}}
<li class="card-result-payment__financing">
{{> @bodycopy-m teFinanciamosText }}
{{> @bodycopy-m teFinanciamos }}
</li>
{{/if}}
{{#if tin-tae-link}}
<li class="tin-tae-link">
{{> @link tin-tae-link }}</li>
{{/if}}
</ul>
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if additional-item}}
<ul class="card-result-payment__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 }}</li>
{{#if tooltip}}<li>{{> @tooltip tooltip }}</li>{{/if}}
<li>{{> @bodycopy-m additional-item-number }}</li>
</ul>
</li>
{{/each}}
</ul>
{{/if}}
{{#if additional-item2}}
<ul class="card-result-payment__additional2">
<li>{{> @label-m additional-item2-tit }}</li>
{{#each additional-item2}}
<li>
<ul>
<li>{{> @label-m additional-item-text }}</li>
{{#if tooltip}}<li>{{> @tooltip tooltip }}</li>{{/if}}
<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}}
{{#if isScroll}}
{{#if link-detalle}}
<div class="wrap-link-detalle">
{{> @link link-detalle }}
</div>
{{/if}}
{{/if}}
</div>
{{/each}}
</div>
{{#if isPagination}}
<div class="card-result-payment__nav between-xs center-ms">
<div class="swiper-button-prev{{#if isScroll}} scroll{{/if}}">
{{ render '@icon--32_arrow-left' }}
</div>
<div class="swiper-button-next{{#if isScroll}} scroll{{/if}}">
{{ render '@icon--32_arrow-right' }}
</div>
</div>
{{/if}}
</div>
</div>
{
"title-tabs": {
"type": "-m",
"text": "Elige la hipoteca que más va contigo."
},
"menu-tab": false,
"card-item": [
{
"isScroll": true,
"title": {
"text": "Hipoteca Fija",
"type": "-m"
},
"subtitle": {
"text": "Tu hipoteca desde 10 a 30 años a tipo de interés fijo"
},
"item": [
{
"isScroll": true,
"id": "resto-amortizacion",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-resto-title",
"type": "-label",
"text": "Los 30 años"
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": "772,14",
"type": "-m"
},
"number-item-symbol": {
"type": "-label",
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
}
],
"tae-item-text": {
"text": "TAE",
"type": "-label"
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85%",
"isP": true,
"type": "-label"
},
"tin-item-text": {
"text": "TIN",
"type": "-label"
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%",
"type": "-label"
},
"additional-item-tit-link": {
"href": "#",
"text": "Ver detalle",
"isInline": true
},
"link-detalle": {
"text": "Ver detalle",
"href": "#",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
}
},
{
"isScroll": true,
"title": {
"text": "Hipoteca Mixta",
"type": "-m"
},
"subtitle": {
"text": "De 5 a 15 años a tipo de interés fijo. Los restantes a variable hasta 30 años"
},
"item": [
{
"isScroll": true,
"id": "periodo-gracia",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-periodo-gracia-title",
"type": "-label",
"text": "10 primeros años"
},
"number-item": {
"id": "resultado-cuota-periodo-gracia-cifra",
"isP": true,
"text": "734,35",
"type": "-m"
},
"number-item-symbol": {
"type": "-label",
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
},
{
"isScroll": true,
"id": "resto-amortizacion",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-resto-title",
"type": "-label",
"text": "Resto de años"
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": "Euribor + 1,95%",
"type": "-m"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
}
],
"tae-item-text": {
"text": "TAE",
"type": "-label"
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85%",
"isP": true,
"type": "-label"
},
"tin-item-text": {
"text": "TIN",
"type": "-label"
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%",
"type": "-label"
},
"additional-item-tit-link": {
"href": "#",
"text": "Ver detalle",
"isInline": true
},
"link-detalle": {
"text": "Ver detalle",
"href": "#",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
}
},
{
"isScroll": true,
"title": {
"text": "Hipoteca Variable",
"type": "-m"
},
"subtitle": {
"text": "Hasta 2 años a tipo de interés fijo y los restantes, variable hasta 30 años"
},
"item": [
{
"isScroll": true,
"id": "periodo-gracia",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-periodo-gracia-title",
"type": "-label",
"text": "10 primeros años"
},
"number-item": {
"id": "resultado-cuota-periodo-gracia-cifra",
"isP": true,
"text": "734,35",
"type": "-m"
},
"number-item-symbol": {
"type": "-label",
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
},
{
"isScroll": true,
"id": "resto-amortizacion",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-resto-title",
"type": "-label",
"text": "Resto de años"
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": "Euribor + 1,95%",
"type": "-m"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
}
],
"tae-item-text": {
"text": "TAE",
"type": "-label"
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85%",
"isP": true,
"type": "-label"
},
"tin-item-text": {
"text": "TIN",
"type": "-label"
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%",
"type": "-label"
},
"additional-item-tit-link": {
"href": "#",
"text": "Ver detalle",
"isInline": true
},
"link-detalle": {
"text": "Ver detalle",
"href": "#",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
}
}
],
"isScroll": true,
"isPagination": true
}
.card-result-payment {
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;
img {
margin-bottom: 16px;
}
}
&__head {
background-color: var(--color-background-accent-bold);
margin: -32px -32px 32px;
padding: 32px;
@media (--viewport-sm-max) {
margin: -32px -16px 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;
}
}
&__form-radio-group {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 72px;
gap: 16px;
margin-bottom: 32px;
@media (--viewport-sm-max) {
height: 96px;
}
.bodycopy-m {
text-align: 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;
}
}
}
}
}
&__financing {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px 0 0;
.bodycopy-m {
color: var(--color-text-accent);
}
}
.wrap-items {
height: 438px;
position: relative;
}
ul.items {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*@media (--viewport-ms-max) {
height: 168px;
}*/
.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;
}
}*/
li {
width: 100%;
text-align: center;
/*&:last-child {
margin-bottom: 4px;
}*/
.title-with-tooltip {
margin-bottom: 4px;
}
li {
margin-top: 0;
width: auto;
&:last-child {
margin-bottom: 0;
}
}
}
ul.tin-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 24px;
li {
line-height: normal;
&.withTooltip {
display: flex;
align-items: center;
}
.tooltip {
top: -8px;
right: -8px;
}
}
}
.card-result-payment__item-number {
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 24px;
li {
padding: 0 3px;
line-height: normal;
.bodycopy-s {
padding-bottom: 11px;
}
.title-l {
color: var(--color-text);
}
}
}
}
&__item-clarification {
display: flex;
align-items: center;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
}
}
&__tae {
display: flex;
flex-direction: column;
padding: 0;
li.tin-tae-link {
position: absolute;
bottom: 16px;
justify-content: center;
display: flex;
width: 100%;
.icon {
fill: var(--new-color-text);
top: 3px;
right: -5px;
}
}
li.tae {
.bodycopy-m,
.title-xl {
color: var(--color-text-error);
}
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
li {
display: flex;
line-height: normal;
align-items: flex-end;
.bodycopy-m:last-child {
position: relative;
top: -10px;
margin-left: 4px;
}
&.withTooltip {
align-items: center;
.tooltip {
top: -8px;
right: -8px;
}
}
}
}
}
&__additional {
display: flex;
flex-direction: column;
border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border);
margin-top: 32px;
margin-bottom: 16px;
li.tit {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 16px 0;
align-items: center;
.link_inline {
color: var(--color-text-link-secondary);
}
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
li {
margin-bottom: 12px;
line-height: normal;
&:last-of-type {
white-space: nowrap;
}
@media (--viewport-xs-max) {
&:first-of-type {
max-width: 40%;
}
}
}
}
}
.btn {
float: left;
margin-top: 30px;
align-self: start;
}
.wrap-img {
height: 37px;
display: flex;
align-items: center;
}
&.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 {
text-align: center;
&+.card-result-payment__item {
/*margin-top: 24px;*/
}
.title-xl,
.title-m {
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;
}
}
}
&:nth-of-type(2) {
background-color: aqua;
li:last-of-type {
.bodycopy-l {
padding-bottom: 3px;
}
}
}
}
&__item+.card-result-payment__item {
ul.card-result-payment__item-number {
li+li {
.bodycopy-l {
padding-bottom: 3px;
}
}
}
}
&__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: center;
justify-content: space-between;
width: 100%;
li {
margin-bottom: 20px;
line-height: normal;
&:last-of-type {
white-space: nowrap;
}
&:first-of-type {
margin-bottom: 20px;
.label-m {
color: initial;
}
}
@media (--viewport-xs-max) {
&:first-of-type {
max-width: 40%;
}
}
}
.tooltip {
left: 0;
top: -6px;
margin-right: 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);
}
}
/* Swiper Variation*/
&-swiper {
position: sticky;
top: 0;
}
&-swiper.scroll {
position: fixed;
width: 100%;
/*bottom: -64px;
left: 20px;*/
bottom: -64px;
left: 0;
top: initial;
z-index: 12;
}
&.swiper-slide {
position: relative;
padding: 32px;
@media (--viewport-sm-max) {
padding: 32px 16px;
}
}
&.swiper-slide.scroll {
ul.items {
height: 72px;
}
@media (--viewport-ms-max) {
padding: 32px 20px 24px;
}
.card-result-payment__head {
background-color: unset;
margin: 0;
padding: 0 20px 16px;
.title-l {
color: var(--color-text-accent);
}
.icon {
fill: var(--color-icon-accent);
margin-bottom: 16px;
}
&+.bodycopy-s {
text-align: center;
min-height: 46px;
}
}
.wrap-items {
height: 108px;
justify-content: flex-start;
ul.items {
height: 56px;
}
}
.card-result-payment__item+.card-result-payment__item {
margin-top: 8px;
margin-bottom: 0;
}
.card-result-payment__item-number-scroll {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 32px 8px;
@media (--viewport-xxs-max) {
padding: 0 0 8px;
}
&:last-of-type {
padding-bottom: 0;
}
li {
display: flex;
flex-direction: row;
align-items: flex-end;
margin: 0;
gap: 8px;
p.title-m {
/*line-height: 20px;*/
color: var(--color-text);
margin-right: 8px;
}
}
}
.card-result-payment__tae {
width: 100%;
height: auto;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 0;
margin: 12px 0 0;
align-self: flex-end;
justify-content: center;
li {
width: 50%;
ul {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 4px;
li {
width: auto;
margin-bottom: 0;
padding: 0 2px;
}
}
&.tae {
ul {
justify-content: flex-end;
border-right: solid 1px var(--color-text);
.caption-label {
color: var(--color-text-error);
}
}
}
&.tin-tae-link {
position: relative;
bottom: auto;
flex: none;
width: 100%;
margin-bottom: 0;
.link {
color: var(--color-text-link-secondary);
span {
text-decoration: underline;
}
}
}
}
}
.wrap-btn {
justify-content: center;
padding-top: 8px;
padding-bottom: 32px;
flex-direction: row;
align-items: unset;
gap: unset;
.btn {
margin-top: 0
}
}
.wrap-link-detalle {
border-top: solid 1px var(--color-secondary-brand);
display: flex;
justify-content: center;
padding-top: 16px;
.icon {
fill: var(--color-icon);
}
}
}
@media (--viewport-ms-max) {
.swiper-wrapper {
padding-left: 10px;
}
}
.swiper-container {
padding-bottom: 50px;
@media (--viewport-ms-max) {
padding-bottom: 40px;
}
}
.swiper-slide {
/*background-color:var(--color-accent-light);*/
height: auto;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
&__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;
.swiper-pagination {
margin: 0 40px;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 60px;
&::after {
display: none;
}
.icon {
fill: var(--color-icon-inverse)
}
&.scroll {
top: 22px;
.icon {
fill: var(--color-icon-accent)
}
}
&.inactive {
.icon {
fill: var(--color-icon-link-primary-disabled)
}
}
}
.swiper-button-prev {
margin-top: 0;
left: 32px;
&.scroll {
left: 20px;
}
}
.swiper-button-next {
margin-top: 0;
right: 32px;
&.scroll {
right: 20px;
}
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
.swiper-pagination-bullet-active {
background: var(--color-accent);
}
@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.