<section class="splitter splitter_bg-color_white splitter_padding_top_small splitter_padding_bottom_small ">
<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="calculator-form-with-result" id="community-calculator-form">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col col-sm-offset-1 col-lg-offset-1 col-sm-offset-right-1 col-lg-offset-right-1">
<form id="community-calculator-form">
<div class="block">
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-range-slider" id="moneyRequestRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="moneyRequestRangeSliderInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="f1_amount" title="Cuanto necesitas" min='10000' max='3000000' data-default='500000'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
10.000 €
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
3.000.000 €
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="" value="50">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="" value="10">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-radio-group " id="carenciaCapital">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">CARENCIA DE CAPITAL</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipCarenciaCapital" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="carenciaCapitalNo" type="radio" title="No" name="Carencia de capital" value="NO" checked>
<label class="radio-label " for="carenciaCapitalNo" id="" value="">
<span class="caption-placeholder-m">NO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="carenciaCapitalUnAnho" type="radio" title="Durante 1 año" name="Carencia de capital" value="Durante 1 año">
<label class="radio-label " for="carenciaCapitalUnAnho" id="" value="">
<span class="caption-placeholder-m">Durante 1 año</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="carenciaCapitalDosAnhos" type="radio" title="Durante 2 años" name="Carencia de capital" value="Durante 2 años">
<label class="radio-label " for="carenciaCapitalDosAnhos" id="" value="">
<span class="caption-placeholder-m">Durante 2 años</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Choose one of the options, please*</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-radio-group " id="cancelacionAnticipada">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿Tienes previsto recibir una subvención y realizar una amortización parcial?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="cancelacionAnticipadaNo" type="radio" title="No" name="Cancelacion anticipada" value="NO" checked>
<label class="radio-label " for="cancelacionAnticipadaNo" id="" value="">
<span class="caption-placeholder-m">NO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="cancelacionAnticipadaYes" type="radio" title="Yes" name="Cancelacion anticipada" value="SI">
<label class="radio-label " for="cancelacionAnticipadaYes" id="" value="">
<span class="caption-placeholder-m">SI</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Choose one of the options, please*</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
hidden
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Fecha de cancelación anticipada</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipFechaCancelacionAnticipada" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Put a correct name, please*</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Formato: AAAA-MM-DD
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
hidden
required">
<div class="form-range-slider" id="cancelacionAnticipadaRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Importe de la cancelación anticipada</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="cancelacionAnticipadaRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Importe de la cancelación anticipada" min='0' max='200000' data-default='1400'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
0 €
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
200.000 €
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col col-sm-offset-right-1 col-lg-offset-right-1">
<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 " id="">
<ul class="card-result__item-number">
<li>
<p id="resultado-cuota-unica-cifra" class="
title-xl
">125,93€</p>
</li>
</ul>
<ul class="card-result__item-clarification">
<li>
<div class="
bodycopy-m
" id="resultado-cuota-unica-cifra-clarification">
503,72€
</div>
</li>
<li>
<h4 class="
title-s
"></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">
</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">
</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>
</div>
<div class="row conditions">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="
bodycopy-s
">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="calculator-form-with-result" {{#if id}}id="{{id}}" {{/if}}>
<div class="row">
<div
class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col col-sm-offset-1 col-lg-offset-1 col-sm-offset-right-1 col-lg-offset-right-1">
{{#if title}}
{{> @title-l title }}
{{/if}}
<form id="{{id}}">
{{#if steps-nav__list}}
{{> @steps-nav__list steps-nav__list }}
{{/if}}
{{#each block}}
<div class="block">
{{#if subtitle}}
<div class="subtitle">
{{#if icon-subtitle}}
{{> @icon icon-subtitle }}
{{/if}}
{{> @title subtitle }}
</div>
{{/if}}
{{> @form-list-different-columns form-list-calculator }}
</div>
{{/each}}
</form>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col col-sm-offset-right-1 col-lg-offset-right-1">
{{#if isMinimos}}
{{ render '@card-result--minimos'}}
{{else if isMaximos}}
{{ render '@card-result--maximos'}}
{{else if isError}}
{{ render '@card-result--error'}}
{{else if isCuotaMaxFinanciacion}}
{{ render '@card-result-payment'}}
{{else if isCuotaMaxFinanciacionScroll}}
{{ render '@card-result-payment--scroll'}}
{{else if isCuotaPT}}
{{ render '@card-result-payment-single'}}
{{else if isCuotaPTScroll}}
{{ render '@card-result-payment-single--scroll'}}
{{else}}
{{ render '@card-result'}}
{{/if}}
</div>
</div>
<div class="row conditions">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
{{> @bodycopy-s condiciones }}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"id": "community-calculator-form",
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopSmall": true,
"paddingBottomSmall": true
},
"block": [
{
"form-list-calculator": {
"form-list": [
{
"isRequired": true,
"onecolumn": true,
"form-range-slider": {
"tooltip-label": {
"isLabel": true,
"label": {
"text": "¿Cuánto DINERO NECESITAS?"
},
"tooltip": {
"id": "tooltipCuantoNecesitas",
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "moneyRequestRangeSlider",
"range-slider": {
"id": "moneyRequestRangeSliderInput",
"name": "f1_amount",
"inputTitle": "Cuanto necesitas",
"validationAttributes": "min='10000' max='3000000' data-default='500000'",
"label": {
"text": "€"
},
"legend-start": {
"text": "10.000 €"
},
"legend-end": {
"text": "3.000.000 €"
}
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-input": {
"tooltip-label": {
"isLabel": true,
"label": {
"text": "¿Cuántas viviendas tiene el edificio?"
}
},
"id": "cuantasViviendas",
"inputValue": "50",
"label": {
"text": "VIVIENDAS"
},
"error-message": {
"text": "Pon una cifra, por favor*"
}
}
},
{
"twocolumns": true,
"isRequired": true,
"form-input": {
"tooltip-label": {
"isLabel": true,
"label": {
"text": "¿En cuántos años quieres devolverlo?"
}
},
"id": "anhosDevolver",
"inputValue": "10",
"label": {
"text": "AÑOS"
},
"error-message": {
"text": "Pon una cifra, por favor*"
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "CARENCIA DE CAPITAL"
},
"tooltip": {
"isFlex": true,
"id": "tooltipCarenciaCapital",
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "carenciaCapital",
"radio-group": {
"radio-group": [
{
"id": "carenciaCapitalNo",
"title": "No",
"name": "Carencia de capital",
"additionalAttributes": "checked",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
},
{
"id": "carenciaCapitalUnAnho",
"title": "Durante 1 año",
"name": "Carencia de capital",
"label": {
"text": "Durante 1 año",
"type": "-placeholder-m"
}
},
{
"id": "carenciaCapitalDosAnhos",
"title": "Durante 2 años",
"name": "Carencia de capital",
"label": {
"text": "Durante 2 años",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"fieldset": true,
"text": "¿Tienes previsto recibir una subvención y realizar una amortización parcial?"
}
},
"id": "cancelacionAnticipada",
"radio-group": {
"radio-group": [
{
"id": "cancelacionAnticipadaNo",
"title": "No",
"name": "Cancelacion anticipada",
"additionalAttributes": "checked",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
},
{
"id": "cancelacionAnticipadaYes",
"title": "Yes",
"name": "Cancelacion anticipada",
"label": {
"text": "SI",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Choose one of the options, please*"
}
}
}
},
{
"twocolumns": true,
"isHidden": true,
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Fecha de cancelación anticipada"
},
"tooltip": {
"isFlex": true,
"id": "tooltipFechaCancelacionAnticipada",
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"fieldset": {
"label": {
"for": "fechaCancelacionAnticipada",
"text": "Fecha de cancelación anticipada"
},
"input": {
"distinguisher": "fechaCancelacionAnticipada",
"id": "fechaCancelacionAnticipada",
"type": "text",
"title": "Name"
}
},
"field-bottom": {
"error-message": {
"text": "Put a correct name, please*"
},
"helper-text": {
"text": "Formato: AAAA-MM-DD"
}
}
}
},
{
"twocolumns": true,
"isHidden": true,
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Importe de la cancelación anticipada"
}
},
"id": "cancelacionAnticipadaRangeSlider",
"range-slider": {
"id": "cancelacionAnticipadaRangeInput",
"inputTitle": "Importe de la cancelación anticipada",
"validationAttributes": "min='0' max='200000' data-default='1400'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "0 €"
},
"legend-end": {
"text": "200.000 €"
}
}
}
}
]
}
}
],
"condiciones": {
"text": ""
},
"isMinimos": true
}
.calculator-form-with-result {
.conditions {
margin-top: 40px;
}
.steps-nav__list {
display: none;
@media (--viewport-ms-max) {
display: block;
position: fixed;
z-index: 13;
background-color: var(--color-background);
box-shadow: 0px 10px 5px 0px #0000000d;
width: 100%;
padding: 16px 20px 69px; /*aumentamos padding bottom para tapar los botones del header en scroll (si no el tamaño era 15px 20px 55px (CA.R.)) */
margin: 0 -31px 32px;
top: 0;
left: 31px;
ul {
.steps-nav__list-item.active {
.steps-nav__list-item-step {
.text {
display: block;
position: absolute;
top: 80px;
left: 20px;
}
}
}
}
}
@media (--viewport-xs-max) {
left: 20px;
margin: 0 -20px 32px;
}
&.no-text {
@media (--viewport-ms-max) {
padding-bottom: 16px;
}
}
}
.block {
margin-bottom: 60px;
/* se suma a los 20px que todos los campos tienen debajo (CA. R.) */
&:last-child {
margin-bottom: 0;
}
.subtitle {
display: flex;
flex-direction: column;
gap: 24px; /* Visto en CYR y añadido en general para unificar (CA.R.)*/
margin-bottom: 32px;
[class*='icon-54'] {
width: 54px;
height: 54px;
} /* Modificado para que no afecte a CYR que lo lleva a 56 que es el tamaño que marcan las Foundations (CA.R.)*/
}
.form-list {
.prelabel {
.title-s {
color: var(--color-text-accent-bold);
}
}
.alert.inline .alert__wrap {
margin: 30px 0;
}
}
}
@media (--viewport-ms-max) {
form {
margin-bottom: 40px;
}
}
@media (--viewport-xs-max) {
.card-result {
margin: 0 -20px;
&.swiper-slide {
margin: 0;
}
}
}
#month {
text-transform: capitalize;
}
.prelabel {
display: flex;
justify-items: flex-start;
align-items: flex-end;
.tooltip {
margin-bottom: -45px;
margin-left: -25px;
}
}
.card-result-swiper.scroll {
@media (--viewport-ms-max) {
margin: 0 -20px;
}
}
/* Para ajustar alturas de línea de la card dentro del componente */
.card-result-payment-single {
.item {
.card-result-payment-single__item-number li .bodycopy-l{
top: -4px;
@media (--viewport-sm-max) {
top: -3px;
}
@media (--viewport-xs-max) {
top: -2px;
}
}
ul.breakdown {
li {
.breakdown-text {
.bodycopy-m {
margin-top: 5px;
text-align: left;
}
.tooltip{
top:11px;
}
@media (--viewport-sm-max) {
.bodycopy-m {
margin-top: 3px;
}
.tooltip{
top:9px;
}
}
@media (--viewport-xs-max) {
.bodycopy-m {
margin-top: 0;
}
.tooltip{
top:6px;
}
}
}
.title-m{
white-space: nowrap;
}
}
}
}
}
/* FIN Para ajustar alturas de línea de la card dentro del componente */
}
No notes defined.