/* COMPONENTES */
/*----------------------------------*/
/* Miga de pan */
.miga-pan nav {
    margin-left: 0;
}

.c-breadcrumb {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 0 20px 0;
    width: fit-content;
}

/* Estilo de los enlaces */
.c-breadcrumb li {
    font-size: var(--font--size--p--M);
    margin-right: 10px;
}

.c-breadcrumb li a {
    font-weight: 500;
    text-decoration: none;
    color: var(--color--main);
    transition: color 0.3s;
}

.c-breadcrumb li a:hover {
    color: var(--color--principal-rojo-oscuro);
}

/* Separador */
.c-breadcrumb li::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: var(--color--neutral--70);
}

/* Último elemento no tiene separador */
.c-breadcrumb li:last-child::after {
    content: "";
}

/* Último elemento sin enlace */
.c-breadcrumb li:last-child {
    color: var(--color--neutral--70);
    font-weight: normal;
}

/*----------------------------------*/
/*Barra de navegación horizontal home principales*/

nav.barra--nav--principal {
    background-color: var(--color--neutral--90);
    position: fixed;
    width: 100%;
    top: 115px;
    z-index: 4;
}

nav.barra--nav--principal .grid-contenedor {
    text-align: left;
}

nav.barra--nav--principal .menu-toggle {
    display: none;
    font-size: 24px;
    color: white;
    text-align: center;
    padding: 7px;
    cursor: pointer;
}

nav.barra--nav--principal ul {
    margin: 0;
}

nav.barra--nav--principal li {
    list-style: none;
    text-align: center;
    display: inline-block;
}

nav.barra--nav--principal li a {
    display: inline-flex;
    font-weight: 500;
    padding: 15px 30px;
    color: var(--color--neutral--0);
    cursor: pointer;
}

nav.barra--nav--principal li a {
    color: var(--color--neutral--0);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav.barra--nav--principal li i {
    margin-right: 10px;
    color: var(--color--neutral--0);
}

nav.barra--nav--principal li:nth-child(3) {
    float: right;
}

nav.barra--nav--principal li.float-R {
    float: right;
}

nav.barra--nav--principal li:hover,
nav.barra--nav--principal li.active {
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(0deg, var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
}


/*----------------------------------*/
/*Barra de navegación horizontal genérico*/

nav.barra-navegacion {
    position: fixed;
    top: 0;
    width: 100%;
    top: 115px;
    background-color: var(--color--neutral--80);

    z-index: 20;
}

nav.barra-navegacion .menu {
    list-style: none;
    display: flex;
}

nav.barra-navegacion .menu-toggle {
    display: none;
    font-size: 1.3em;
    cursor: pointer;
    color: var(--color--neutral--0);

}

nav.barra-navegacion ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}


nav.barra-navegacion ul li {
    width: calc(100% / 6);
    /* Cambiar el 6 x la cantidad de elementos en la barra */
    text-align: center;
}

nav.barra-navegacion ul li a {
    text-decoration: none;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color--neutral--0);
}

nav.barra-navegacion ul li a:hover {
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(0deg, var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
}


/*----------------------------------*/
/*------ Banner principal Componente Sharepoint -------*/
#Custom-Banner {
    margin-top: 45px;
}

#Custom-Banner #banner-transversal .swiper-slide {
    display: flex;
    height: 500px;
}

#Custom-Banner #banner-transversal picture {
    width: 50%;
    display: block;
    order: 2;
}

#Custom-Banner #banner-transversal .swiper-caption {
    width: 60%;
    margin-top: 50px;
    text-align: left;
    padding-left: 15%;
    padding-right: 70px;
    background-color: transparent;
    order: 1;
}

#Custom-Banner #banner-transversal .swiper-caption .heading {
    color: var(--color--neutral--80);
    font-size: var(--font--size--h1);
    /*tamaño*/
    font-weight: var(--font--weight--bold);
    /*weight*/
    line-height: 120% !important;
    /*interlineado*/
    letter-spacing: var(--font-tracking-title);
    /*tracking*/
    font-family: var(--font--fuente--principal), sans-serif;
}

#Custom-Banner #banner-transversal .swiper-caption .description {
    margin: 30px 0;
}

#Custom-Banner .swiper .swiper-slide picture img {
    margin: 0;
    width: auto;
    object-fit: contain;
}

#Custom-Banner #banner-transversal .swiper-caption .btn {
    font-weight: var(--font--weight--semibold);
    font-size: var(--font--size--p--L);
    padding: 12px 32px;
    border-radius: 25px;
    color: var(--color--neutral--0);
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(0deg, var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
    border: 1px solid var(--color--main);
}

#Custom-Banner .home-banner-swiper .swiper-pagination {
    display: none;
}

.banner-content-navigation-buttons {
    position: relative;
}

#banner-content-navigation-buttons .swiper-button-prev,
#banner-content-navigation-buttons .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 15%);
    top: var(--swiper-navigation-top-offset, 420px);
}

#banner-content-navigation-buttons .swiper-button-next,
#banner-content-navigation-buttons .swiper-rtl .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 18%);
    top: var(--swiper-navigation-top-offset, 420px);
}

#banner-content-navigation-buttons .swiper-button-next,
#banner-content-navigation-buttons .swiper-button-prev {
    width: 3em;
    height: 3em;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper #banner-content-navigation-buttons .swiper-button .fa {
    color: #ffffff;
    opacity: 1;
    font-size: initial;
}

#banner-content-navigation-buttons .fa-chevron-right::before,
#banner-content-navigation-buttons .fa-chevron-left::before {
    font-size: 35px;
}

.fa-chevron-left:before {
    content: "\f104";
}

.fa-chevron-right:before {
    content: "\f105";
}

#Custom-Banner #banner-transversal .fa-chevron-right::before,
#Custom-Banner #banner-transversal .fa-chevron-left::before {
    font-size: 35px;
}

/* Botón pause */
#Custom-Banner #banner-transversal .swiper .swiper-action-button {
    left: 16.5em;
    top: 402px;
    font-size: 1.2em;
}

#Custom-Banner #banner-transversal .fa-pause,
.fa-play {
    margin-top: 6px !important;
    margin-left: 2px;
    font-size: 1.25em;
}


/*----------------------------------*/
/*------ Banner principal estático -------*/
.banner-principal {
    margin-top: 50px;
}

.banner-principal .grid-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.banner-principal .banner-principal__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 49%;
    text-align: left;
    padding: 20px 30px 20px 0;
}

.banner-principal .banner-principal__info h1 {
    margin-top: 0px;
}

.banner-principal .banner-principal__info p {
    font-size: var(--font--size--p--L);
}

.banner-principal .banner-principal__imagen {
    width: 50%;
    height: 400px;
}

.banner-principal__imagen img {
    height: 100%;
}

.banner-principal .button--texto {
    margin-right: 20px;
}

/*----------------------------------*/
/* Contador (ubicar dentro de un div con el id=contador)*/
#contador #cuenta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#contador #cuenta .simply-section div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 150px;
}

#contador #cuenta .simply-section .simply-amount {
    font-size: 4.5rem;
    font-weight: var(--font--weight--bold);
}

#contador #cuenta .simply-section .simply-word {
    font-size: 1.3rem;
}

/*----------------------------------*/
/*Banner estático*/
.banner__estatico {
    height: 670px;
    width: 100%;
}

.banner__estatico .banner__estatico__contenedor {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.banner__estatico .banner__estatico__contenedor h1 {
    margin: 1rem;
    color: var(--color--neutral--0);
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.8)
}


/*----------------------------------*/
/*Componente modal */
.comp--modal {
    display: none;
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.comp--modal__content {
    position: relative;
    text-align: left;
    background-color: white;
    padding: 30px;
    margin: auto;
    width: 50%;
    max-height: 570px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

.comp--modal__close {
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: -15px;
    top: -15px;
    padding: 20px;
    font-size: 30px;
    font-weight: 600;
    cursor: pointer;
    position: absolute;
    color: var(--color--neutral--0);
    background: var(--gradiants-y-linear-boton-2, linear-gradient(180deg, var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.comp--modal__txt {

    padding-bottom: 20px;
    max-height: 370px;
    overflow-y: auto;
    border-bottom: 1px solid var(--color--neutral--30);
}

.comp--modal__content h3 {
    margin-bottom: 30px;
    font-size: 1.21em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color--neutral--30);
}

.comp--modal__txt p {
    font-size: var(--font--size--p--L);
}

.comp--modal__txt ul {
    margin-left: 20px;
}


.comp--modal__content .button {
    margin-right: 20px;
}

/*----------------------------------*/
/* Seccion destacada tipo banner */

.sec-destacada {
    margin: 0;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.sec-destacada>div:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
}

.sec-destacada .grid-contenedor {
    padding: 40px 0;
}

.sec-destacada h4,
.sec-destacada p {
    color: var(--color--neutral--0);
}

/* ----------------------------------------------------------------
Secció minibanner con imagen al lado (usado en financiero empresas) */
.main .minibanner>div {
    display: flex;
    justify-content: space-around;
}

.minibanner>div div {
    width: 40%;
    padding: 0px;
}

.minibanner__img img {
    width: 85%;
    height: 100%;
}

.minibanner .contenedor__minibanner__text {
    width: 60%;
    display: flex;
    padding: 0 30px;
    margin: auto;
}

.minibanner__text h5, .minibanner__text p {
    color: var(--color--neutral--0);
}

.minibanner .contenedor__minibanner__text .minibanner__text {
    width: 60%;
}

.minibanner .contenedor__minibanner__text .minibanner__boton {
    width: 40%;
    margin: auto;
}


/*----------------------------------*/
/* Preguntas frecuentes*/
.preguntas-frecuentes {
    background-color: var(--color--acento--50);
    padding: 50px 0px;
    margin-bottom: 0;
}

.preguntas-frecuentes .grid-contenedor {
    display: flex;
}

.preguntas-frecuentes__img {
    width: 40%;
    object-fit: contain;
    object-position: top;
}

.preguntas-frecuentes .accordion {
    width: 60%;
    padding-left: 30px;
}

.preguntas-frecuentes h2 {
    color: var(--color--acento--100);
    text-align: left;
}

.preguntas-frecuentes p {
    padding-bottom: 10px;
    text-align: left;
}

.preguntas-frecuentes h3 {
    font-weight: var(--font--weight--regular);
    font-size: var(--font--size--p--L);
}

.preguntas-frecuentes h3 span {
    margin: auto;
    font-size: 1.25em;
    font-weight: var(--font--weight--semibold);
}

.preguntas-frecuentes .accordion-header {
    margin: 0;
    display: flex;
}

.preguntas-frecuentes .accordion-button {
    border: 1px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.125);
    font-family: var(--font--fuente--principal);
    background-color: var(--color--acento--90);
    color: var(--color--neutral--0);
    cursor: pointer;
    width: 100%;
    padding: 16px 20px 16px 0;
    text-align: left;
    outline: none;
    font-size: var(--font--size--p--L);
    font-weight: var(--font--weight--semibold);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20px;
}

.preguntas-frecuentes .accordion-button.collapsed {
    border: 1px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.125);
    font-family: var(--font--fuente--principal);
    background-color: #ffffff00;
    color: var(--color--neutral--100);
    cursor: pointer;
    width: 100%;
    padding: 16px 20px 16px 0;
    text-align: left;
    outline: none;
    font-size: var(--font--size--p--L);
    font-weight: var(--font--weight--regular);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20px;
}

.preguntas-frecuentes .accordion-button.collapsed:hover {
    background-color: var(--color--acento--90);
    color: var(--color--neutral--0);
    font-weight: var(--font--weight--semibold);
}

.preguntas-frecuentes .accordion-button--first.collapsed {
    border-top-color: rgba(0, 0, 0, 0);
}

.preguntas-frecuentes .accordion-button::after {
    content: '\f105';
    font-size: 1.25rem;
    transition: transform 0.2s ease;
    font: normal normal normal 20px / 1 FontAwesome;
    transform: rotate(90deg);
}

.preguntas-frecuentes .accordion-button.collapsed::after {
    transform: rotate(0deg);
    padding-left: 20px;
}

.preguntas-frecuentes .accordion-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.preguntas-frecuentes .accordion-body {
    padding: 16px 0px;
    margin-left: 45px;
    text-align: left;

}

.preguntas-frecuentes .accordion-body p,
.preguntas-frecuentes .accordion-body li {
    line-height: 27px;
}

.preguntas-frecuentes .accordion-body ol,
.preguntas-frecuentes .accordion-body ul {
    margin-left: 20px;
}

.preguntas-frecuentes .accordion-body li {
    color: var(--color--neutral--80);
    font-weight: var(--font--weight--regular);
    font-family: var(--font--fuente--principal), sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    padding-bottom: 7px;
}

.preguntas-frecuentes .accordion-body li br {
    line-height: 15px;
}


/*----------------------------------*/
/* Mensaje informativo (alerta)*/
.info-alert-primary {
    padding: 25px 30px;
    margin-top: 35px;
    border-radius: 10px;
    background: var(--color--info--warning--30);
}

.info-alert-primary__title {
    margin-bottom: 15px;
}

.info-alert-primary__title::before {
    font-size: 25px;
    font-family: FontAwesome;
    content: "\f05a";
    color: var(--color--info--warning--70);
    margin-right: 10px;
}

.info-alert-primary__title b {
    vertical-align: top;
}

.info-alert-primary li {
    color: var(--color--neutral--100);
    font-size: 1rem;
    line-height: 1.6rem;
    margin-left: 20px;
}

.info-alert-primary__text {
    font-size: 1rem;
}

.info-alert-primary li::marker {
    text-indent: 10px !important;
}

/*----------------------------------*/
/* Elemento gráfico para fondos*/

.elipse-primary-top {
    position: absolute;
    width: 370px;
    height: 370px;
    top: 0px;
    right: 0px;
    background-image: url(/Credito/PublishingImages/img/ellipse-fondo.svg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

.elipse-primary-bottom {
    position: absolute;
    width: 370px;
    height: 370px;
    bottom: 0px;
    right: 0px;
    background-image: url(/Credito/PublishingImages/img/ellipse-fondo.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateZ(90deg);
    z-index: 0;
}

.elipse-secundary-top {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0px;
    left: 0px;
    background-image: url(/Credito/PublishingImages/img/ellipse-fondo-verde.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateZ(270deg);
    z-index: 0;
}

.elipse-secundary-bottom {
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: 0px;
    left: 0px;
    background-image: url(/Credito/PublishingImages/img/ellipse-fondo-verde.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateZ(180deg);
    z-index: 0;
}

/*----------------------------------*/
/*------ Cards -------*/
/*------ Card Color (utilizado en privilegios empresas)-----*/
.card--vertical--color {
    width: 30%;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    transition: all 1s;
    border-radius: 15px;
    text-align: left;
    overflow: hidden;
}

.card--vertical--color>img {
    height: auto;
    object-fit: cover;
}

.card--vertical__info {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    padding: 30px;
}

.card--vertical__info h3 {
    font-size: var(--font--size--h6);
    margin: 0;
}

.card--vertical__info p {
    padding: 25px 0;
    font-size: var(--font--size--p--M);
}

.card--vertical--color .button {
    margin-top: 0;
}

/*---------------------------------------------------*/
/*------------ Card producto descuento (Sección de producto destacada en priilegios)-------------*/
.carrousel-descuentos .swiper-wrapper {
    padding: 20px 5px;
}

.carrousel-descuentos .Card__vertical {
    width: 95%;
    height: 400px;
}

.carrousel-descuentos .cont__img {
    position: relative;
}

.carrousel-descuentos .cont__img .etiqueta-nuevo {
    height: 90px;
    background: var(--color--principal-amarillo);
    color: var(--color--neutral--0);
    font-weight: var(--font--weight--semibold);
    font-size: 1em;
    padding: 6px 10px;
    position: absolute;
    top: 0px;
    left: 20px;
    border-radius: 10px 10px 0 0;
    transform: rotateZ(180deg);
    writing-mode: vertical-lr;
}

.carrousel-descuentos .cont__img .logo {
    width: 115px;
    height: 45px;
    padding: 3px;
    object-fit: contain;
    background-color: var(--color--neutral--0);
    border-radius: 10px 0 0 10px;
    position: absolute;
    right: 0;
    bottom: 25px;
}

.carrousel-descuentos__img__producto {
    width: 100%;
    border-radius: 10px;
}

.carrousel-descuentos .carrousel-descuentos__text {
    position: relative;
    text-align: left;
}

.carrousel-descuentos .carrousel-descuentos__text__porcentaje {
    background-color: var(--color--main);
    color: var(--color--neutral--0);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.25em;
    position: absolute;
    top: -60px;
    left: 15px;
}

.carrousel-descuentos .carrousel-descuentos__text h3 {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 10px;
}

.carrousel-descuentos .carrousel-descuentos__text__fecha {
    font-size: 0.875em;
}


/*---------------------------------------------------*/
/*----- card icon  -----*/

.swiper.swiper-beneficios {
    padding: 15px;
}

.card--icon strong {
    color: var(--color--neutral--100);
    font-size: var(--font--size--p--L);
    font-weight: var(--font--weight--bold);
}

.card--icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 15px;
    border-radius: 15px;
    box-shadow: 0 0px 5px 3px rgba(0, 0, 0, 0.1);
    min-height: 220px;
}

.card--icon img {
    width: 60px;
    margin: 0 auto;
}

.card--icon p {
    font-size: 0.9em;
    margin: 0;
}

/*---------------------------------------------------*/
/*------------ Carousel aliados -------------*/
#carrousel-aliados .aliados img {
    width: auto;
    height: 70px;
    object-fit: contain;
}

#carrousel-aliados .aliados a {
    text-decoration: none;
}

/*---------------------------------------------------*/
/*------------ Paso a paso versión extendida -------------*/
.componente--guia .guia__contenido {
    padding: 80px 30px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.componente--guia .guia__contenido>h2,
.componente--guia .guia__contenido>p {
    width: 40%;
    margin-left: 0;
}

.componente--guia .guia__contenido>a {
    font-size: 1em;
    text-decoration: none;
    color: var(--color--neutral--100);
    font-weight: var(--font--weight--semibold);
    transition: 0.5s;
    width: 40%;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
}

.componente--guia .guia__contenido>a.active {
    background: var(--color--principal--70);
}

.componente--guia .guia__contenido>a:hover {
    background: var(--color--principal--70);
}

.componente--guia .guia__contenido>a div {
    margin-right: 20px;
}

.componente--guia .guia__contenido>a span {
    font-size: 2em;
    font-weight: var(--font--weight--bold);
    background: var(--color--principal--70);
    height: 50px;
    width: 50px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.componente--guia .guia__contenido .active-content {
    width: 57%;
    height: 406px;
    border-radius: 15px;
    display: flex;
    position: absolute;
    right: 0;
}

.componente--guia .guia__contenido .active-content div {
    width: 50%;
    align-content: end;
    padding: 30px;
}

.componente--guia .guia__contenido .active-content div h3 {
    margin-bottom: 20px;
}

.componente--guia .guia__contenido .active-content img {
    width: 55%;
    border-radius: 0 10px 10px 0;
    margin-bottom: 0;
    object-fit: contain;
    object-position: bottom;
}

.componente--guia .guia__contenido .tab-content {
    display: none;
}

.componente--guia .guia__contenido .tab-content.active {
    display: flex;
}

/*---------------------------------------------------*/
/*------------ Paso a paso versión horizontal -------------*/

.tabs-horizontal__contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tabs-horizontal__contenedor__item {
    padding: 10px;
    position: relative;
    height: 420px;
    display: flex;
    border-radius: 0 30px 0 0;
    width: 6%;
}

.tabs-horizontal__contenedor__item:nth-child(1) {
    z-index: 3;
}

.tabs-horizontal__contenedor__item:nth-child(2) {
    z-index: 2;
}

.tabs-horizontal__contenedor__item:nth-child(3) {
    z-index: 1;
}

.tabs-horizontal__contenedor__item:nth-child(2),
.tabs-horizontal__contenedor__item:nth-child(3) {
    width: 7.5%;
    margin-left: -25px;
}

.tabs-horizontal__contenedor__item:nth-child(2) .button--third,
.tabs-horizontal__contenedor__item:nth-child(3) .button--third {
    margin-left: 15px;
}

.tabs-horizontal__contenedor__item.active {
    padding: 10px;
    position: relative;
    height: 420px;
    display: flex;
    border-radius: 0 30px 0 0;
    width: 10%;
}

.tabs-horizontal__contenedor__item.active {
    width: 80%;
}

.tabs-horizontal__contenedor__item.active>div {
    display: flex;
}

.tabs-horizontal__contenedor__item>div {
    display: none;
}

.tabs-horizontal__contenedor__item .button--third {
    position: absolute;
    padding: 30px;
    left: 0;
    bottom: 0;
    color: var(--color--neutral--100);
    writing-mode: sideways-lr;
}

.tabs-horizontal__contenedor__item .button--third:hover {
    color: var(--color--main);
}

.tabs-horizontal__contenedor__item .button--third::after {
    margin-bottom: 10px;
    transform: rotateZ(90deg);
}

.tabs-horizontal__contenedor__item a {
    width: fit-content;
}

.tabs-horizontal__contenedor__item>div>div {
    width: 55%;
    padding: 35px 20px 35px 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: left;
}

.tabs-horizontal__contenedor__item h3 {
    margin: inherit;
}

.tabs-horizontal__contenedor__item__img {
    display: flex;
    flex-wrap: wrap;
}

 .tabs-horizontal__contenedor__item>div img{
    width: 50%;
    object-fit: contain;
    object-position: bottom;
}

.tabs-horizontal__contenedor__item__img img {
    height: 37px;
    margin-right: 15px;
}



/*----------------------------------*/
/*------ Tabs sencilla horizontal  -------*/

.info-tab__nav {
    display: flex;
    justify-content: center;
}

.info-tab__nav__item {
    text-decoration: none;
    list-style: none;
    margin: 0 30px;
}

.info-tab__nav__item.actived {
    border-bottom: solid 3px var(--color--main);
    color: var(--color--main);
}

.info-tab__nav__item a {
    padding-bottom: 7px;
    color: var(--color--neutral--60);
    font-weight: var(--font--weight--medium);
}

.info-tab__nav__item.actived a {
    color: var(--color--main);
    font-weight: var(--font--weight--semibold);
}

.info-tab__cont {
    display: flex;
    flex-wrap: wrap;
    padding-top: 35px;
    justify-content: space-around;
}

.info-tab__cont__img {
    width: 25%;
    height: fit-content;

}

.info-tab__cont__title {
    width: 62%;
    text-align: left;
}

.info-tab__cont__title h3 {
    margin-bottom: 20px;
}

.info-tab__cont__icon {
    margin-top: 25px;
}

.info-tab__cont__icon img {
    float: left;
}

.info-tab__cont__title .button--primary {
    margin-right: 15px;
}

.info-tab__cont table tr {
    margin-top: 20px;
    display: block;
}

.info-tab__cont table td {
    vertical-align: top;
    padding-right: 20px;
}

.info-tab__cont table td ul {
    margin: 17px 0;
}

.info-tab__cont table td li {
    margin: 10px 15px;
    color: var(--color--neutral--80);
    font-weight: var(--font--weight--regular);
    font-family: var(--font--fuente--principal), sans-serif;
    font-size: 16px;
}

.info-tab__cont__tasa {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.info-tab__cont__tasa__title {
    margin: auto;
    font-weight: var(--font--weight--semibold);
}

.info-tab__cont__tasa div {
    width: 50%;
    padding: 20px 20px 0 20px;
}

.info-tab__cont__tasa span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    font-size: 1.5em;
    font-weight: var(--font--weight--bold);
    border: 12px solid var(--color--acento--100);
    margin: 0 auto 10px auto;
    color: var(--color--neutral--100);
}

.info-tab__cont__tasa div p {
    font-weight: var(--font--weight--medium);
    color: var(--color--neutral--60);
}

.info-tab__cont__tasa div .tmensual {
    border: 12px solid var(--color--acento--70);
}

.info-tab__cont li {
    margin: 10px 15px;
    color: var(--color--neutral--80);
    font-weight: var(--font--weight--regular);
    font-family: var(--font--fuente--principal), sans-serif;
}

.info-tab__cont ul {
    margin: 17px 0;
}


/*----------------------------------*/
/*------ Sección imagen lateral y texto  -------*/

.cont--lateral>div {
    width: 50%;
    padding: 0 25px;
}

.cont--lateral .cont--latera__img {
    width: 100%;
}

/*----------------------------------*/
/*------ Sección enlaces de interés  -------*/

.interes .swiper-interes {
    padding: 0 20px;
}

.interes__contenedor {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
}

.interes__contenedor__enlaces {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 270px;
    padding: 20px;
}

.interes .swiper .interes__contenedor__enlaces img {
    width: 60px;
    margin: 0 auto;
    height: auto;
}

.interes__contenedor__enlaces p {
    font-size: 1em;

}

.interes .btn-controlador {
    display: none;
}

/*----------------------------------*/
/*------ Sección otros servicios -------*/
.otros--servicios .swiper--otros--servicios {
    padding: 20px;
}

.otros--servicios .item--servicio {
    max-height: 290px;
    padding: 20px 20px 0;
    border-radius: 12px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
    display: flex;
}

.otros--servicios .item--servicio img {
    width: auto;
}

.otros--servicios .item--servicio>div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: left;
    padding-bottom: 15px;
    padding-left: 15px;
}

/* Desktop (xl) */
@media (max-width: 1400px) {

    /*----------------------------------*/
    /*------ Banner principal Componente Sharepoint -------*/

    /*Banner estático*/
    .banner__estatico {
        height: 500px;
        width: 100%;
    }

    #Custom-Banner #banner-transversal .swiper-caption {
        padding-left: 5%;
    }

    #banner-content-navigation-buttons .swiper-button-prev,
    #banner-content-navigation-buttons .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 5%);
    }

    #banner-content-navigation-buttons .swiper-button-next,
    #banner-content-navigation-buttons .swiper-rtl .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, 10%);
    }

    #contador #cuenta .simply-section .simply-amount {
        font-size: 3.5rem;
    }

    nav.barra-navegacion ul li {
        font-size: var(--font--size--p--M);
    }

    .expo-vital .banner__estatico img {
        width: 15%;
    }

    /*Preguntas frecuentes*/
    .preguntas-frecuentes .accordion-body p,
    .preguntas-frecuentes .accordion-body li {
        line-height: 1.5rem;
    }

    /*----------------------------------*/
    /*------ Sección otros servicios -------*/
    .otros--servicios .item--servicio img {
        width: 200%;
    }


}

/* Desktop (Lg) */
@media (max-width: 1200px) {

    /*----------------------------------*/
    /*------ Banner principal Componente Sharepoint -------*/

    #Custom-Banner #banner-transversal .swiper-slide {
        display: flex;
        height: 410px;
    }

    #Custom-Banner #banner-transversal .swiper-caption {
        padding-right: 25px;
    }

    /*----------------------------------*/
    /* Banner principal estático */
    .banner-principal .banner-principal__info {
        width: 45%;
        padding: 20px 0px 50px 0;
    }

    .banner-principal .banner-principal__imagen {
        width: 55%;
    }

    .banner-principal__imagen img {
        width: 100%;
        object-position: bottom;
        object-fit: contain;
    }

    /*----------------------------------*/
    /*modal */
    .comp--modal__content {
        width: 75%;
    }

    /*----------------------------------*/
    /* Mensaje informativo (alerta)*/
    .info-alert-primary {
        padding: 30px 30px;
    }

    .info-alert-primary li {
        line-height: 1.4rem !important
    }

    /*----------------------------------*/
    /*------ Cards -------*/
    /*------ Card Color -----*/

    .card--vertical__info {
        padding: 20px;
    }

    .card--vertical__info p {
        padding: 15px 0;
    }


    /*---------------------------------------------------*/
    /*------------ Paso a paso versión extendida -------------*/
    .componente--guia .guia__contenido {
        padding: 50px 20px;
    }

    .componente--guia .guia__contenido .active-content {
        height: auto;
        border-radius: 15px;
        flex-direction: column;
    }

    .componente--guia .guia__contenido .active-content div {
        width: 100%;
        align-content: end;
        padding: 30px 30px 00px 30px;
    }

    .componente--guia .guia__contenido .active-content img {
        width: 60%;
        height: 330px;
        margin: auto;
    }

    .componente--guia .guia__contenido a {
        margin-top: 25px;
    }

    /*---------------------------------------------------*/
    /*------------ Paso a paso versión horizontal -------------*/

    .tabs-horizontal__contenedor__item>div>div {
        padding: 35px 20px 35px 55px;
    }

    .tabs-horizontal__contenedor__item:nth-child(2) .button--third,
    .tabs-horizontal__contenedor__item:nth-child(3) .button--third {
        margin-left: 15px;
    }

    .Card--horizontal--beneficio {
        padding: 10px 16px;
        gap: 10;
    }


    /*------------------------------------------*/
    /* Secció minibanner con imagen al lado (usado en financiero empresas) */
    .minibanner>div div {
        padding: 0 0px;
    }

    .minibanner .minibanner__img {
        width: 34%;
        padding: 0px;
    }

    .minibanner .minibanner__img img {
        object-position: bottom;
        object-fit: contain;
    }

    .minibanner .contenedor__minibanner__text {
        width: 60%;
        padding: 20px 0px;
        margin: auto;
    }

}

@media (max-width: 1024px) {
    .grid-contenedor {
        max-width: 940px;
    }

    /*---------------------------------------------------*/
    /*------------ Paso a paso versión horizontal -------------*/

    .tabs-horizontal__contenedor__item {
        width: 8%;
    }

    .tabs-horizontal__contenedor__item:nth-child(2),
    .tabs-horizontal__contenedor__item:nth-child(3) {
        width: 10.5%;
    }

    .tabs-horizontal__contenedor__item.active {
        width: 70%;
    }

    .tabs-horizontal__contenedor__item>div>div {
        width: 90%;
    }

    .tabs-horizontal__img {
        display: none;
    }

    /*---------------------------------------------------*/
    /*------------ Sección Enlaces de interes -------------*/

    .interes .btn-controlador {
        display: block;
    }

}

/* Tablet (l) */
@media (max-width: 992px) {

    /*----------------------------------*/
    /*------ Banner principal Componente Sharepoint -------*/

    #Custom-Banner {
        margin-top: 55px;
    }

    #Custom-Banner #banner-transversal .swiper-caption {
        margin-top: 0px;
        padding-left: 5%;
    }

    #banner-content-navigation-buttons .swiper-button-prev,
    #banner-content-navigation-buttons .swiper-button-next {
        top: var(--swiper-navigation-top-offset, 370px);
    }

    #banner-content-navigation-buttons .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 15%);
    }

    /*----------------------------------*/
    /* Banner principal estático */
    .banner-principal .banner-principal__info {
        width: 100%;
        order: 2;
        align-items: center;
        text-align: center;
    }

    .banner-principal .banner-principal__imagen {
        width: 100%;
        height: auto;
        order: 1;
    }

    .banner-principal .banner-principal__imagen img {
        width: 65%;
    }

    /*----------------------------------*/
    /*modal */
    .comp--modal__content {
        width: 80%;
    }

    .comp--modal__content h3 {
        margin-bottom: 30px;
        font-size: 1.3em;
    }

    /* -------------------------------------------------*/
    /* Preguntas frecuentes*/
    .preguntas-frecuentes h2 {
        text-align: center;
    }

    .preguntas-frecuentes__img {
        display: none;
    }

    .preguntas-frecuentes .accordion {
        width: 100%;
        padding-left: 0;
    }

    /*----------------------------------*/
    /*------ Cards -------*/
    /*------ Card Color -----*/

    .card--vertical--color>img {
        height: auto;
    }

    /*----------------------------------*/
    /*------ Cards productos descuentos -------*/
    .carrousel-descuentos .carrousel-descuentos__text h3 {
        font-size: 1.3em;
    }

    .carrousel-descuentos .cont__img .logo {
        width: 130px;
        height: 55px;
    }

    .swiper.carrousel-descuentos .carrousel-descuentos__img__producto {
        height: auto;
        width: 100%;
    }

    /*---------------------------------------------------*/
    /*------------ Paso a paso versión extendida -------------*/
    .componente--guia .guia__contenido {
        height: auto;
    }

    .componente--guia .guia__contenido a div {
        margin-right: 10px;
    }


    .componente--guia .guia__contenido .active-content {
        height: auto;
    }


    .componente--guia .guia__contenido .active-content img {
        width: 100%;
        height: 245px;
    }

    .componente--guia .guia__contenido .active-content div h3 {
        font-size: 20px;
    }

    .componente--guia .guia__contenido a {
        font-size: 15px;
    }


    /*----------------------------------*/
    /*------ Tabs sencilla horizontal  -------*/

    .info-tab__cont {
        padding-top: 25px;
    }

    .info-tab__nav__item {
        margin: 0 15px;
    }

    .info-tab__cont__title {
        width: 95%;
        margin-top: 20px;
    }

    .info-tab__cont__img {
        display: none;
    }


    /*------------------------------------------*/
    /* Secció minibanner con imagen al lado (usado en financiero empresas) */
    .minibanner .minibanner__img {
        width: 50%;
    }

    .minibanner .minibanner__img img {
        object-position: bottom;
        object-fit: contain;
    }

    .minibanner .contenedor__minibanner__text {
        width: 50%;
        flex-wrap: wrap;
    }

    .minibanner .contenedor__minibanner__text .minibanner__text {
        width: 100%;
    }

    .minibanner .contenedor__minibanner__text .minibanner__boton {
        width: 100%;
    }
}

/* Tablet small */
@media (max-width: 768px) {

    /*----------------------------------*/
    /*Barra de navegación horizontal menú principal home*/
    nav.barra--nav--principal {
        top: 100px;
    }

    nav.barra--nav--principal .menu {
        display: none;
        flex-direction: column;
        background-color: var(--color--neutral--80);
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
    }

    nav.barra--nav--principal .grid-contenedor {
        max-width: 100%;
    }

    nav.barra--nav--principal .menu.show {
        display: flex;
    }

    nav.barra--nav--principal .menu-toggle {
        display: block;
        padding: 15px 0;
        font-size: 1.3em;
    }

    nav.barra--nav--principal ul {
        flex-direction: column;
        align-items: center;
    }

    nav.barra--nav--principal ul li {
        margin: 0px 0;
        width: 100%;
        font-size: 16px;
    }

    nav.barra--nav--principal ul li a {
        height: 55px;
    }

    .cont--lateral>div {
        width: 100%;
    }


    /*---------------------------------------------------*/
    /*------------ Paso a paso versión horizontal -------------*/
    .tabs-horizontal__contenedor__item.active {
        width: 90%;
        height: 390px;
        border-radius: 0 0px 30px 0;
    }

    .tabs-horizontal__contenedor__item>div>div {
        width: 100%;
        padding: 35px 35px 20px 35px;
    }

    .tabs-horizontal__contenedor__item {
        height: auto;
        width: 90%;
        border-radius: 0 0px 30px 0;
    }

    .tabs-horizontal__contenedor__item:nth-child(2),
    .tabs-horizontal__contenedor__item:nth-child(3) {
        margin-left: 0px;
        margin-top: -25px;
        width: 90%;
    }

    .tabs-horizontal__contenedor__item .button--third {
        position: relative;
        padding: 10px;
        left: 0;
        bottom: 0;
        writing-mode: horizontal-tb;
        margin-left: 25px;
    }

    .tabs-horizontal__contenedor__item:nth-child(2) .button--third,
    .tabs-horizontal__contenedor__item:nth-child(3) .button--third {
        margin-left: 15px;
        margin-top: 25px;
    }
}

/* Mobile (s) */
@media (max-width: 576px) {

    /*----------------------------------*/
    /*------ Banner principal Componente Sharepoint -------*/

    #Custom-Banner #banner-transversal .swiper-slide {
        height: 620px;
        flex-wrap: wrap;
    }

    #Custom-Banner #banner-transversal .swiper-caption {
        width: 100%;
        order: 2;
    }

    #Custom-Banner #banner-transversal picture {
        width: 100%;
        order: 1;
    }

    #Custom-Banner #banner-transversal .swiper-caption .heading {
        line-height: 100% !important;
    }

    #Custom-Banner .swiper .swiper-slide picture img {
        height: auto;
        width: auto;
        object-fit: contain;
        object-position: top;
    }

    #banner-content-navigation-buttons .swiper-button-next,
    #banner-content-navigation-buttons .swiper-rtl .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, 20%);
        top: var(--swiper-navigation-top-offset, 600px);
    }

    #banner-content-navigation-buttons .swiper-button-prev,
    #banner-content-navigation-buttons .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 5%);
        top: var(--swiper-navigation-top-offset, 600px);
    }


    /*----------------------------------*/
    /*Barra de navegación horizontal menú principal home*/
    nav.barra--nav--principal {
        top: 90px;
    }

    nav.barra--nav--principal .menu {
        top: 45px;
    }



    /*----------------------------------*/
    /*Barra de navegación horizontal*/
    nav.barra-navegacion {
        top: 90px;
        padding: 10px 0;
    }

    nav.barra-navegacion .menu {
        display: none;
        flex-direction: column;
        background-color: var(--color--neutral--80);
        position: absolute;
        top: 35px;
        left: 0;
        width: 100%;
    }

    nav.barra-navegacion .menu.show {
        display: flex;
    }

    nav.barra-navegacion .menu-toggle {
        display: block;
        padding: 3px 0;
    }

    nav.barra-navegacion ul {
        flex-direction: column;
        align-items: center;
    }

    nav.barra-navegacion ul li {
        margin: 0px 0;
        width: 100%;
        font-size: 16px;
    }

    nav.barra-navegacion ul li a {
        height: 55px;
    }

    /*----------------------------------*/
    /* Banner principal estático */
    .banner-principal .banner-principal__imagen img {
        width: 95%;
    }

    .banner-principal {
        margin-top: 55px;
    }

    /*----------------------------------*/
    /* Miga de pan */
    .miga-pan {
        display: none;
    }

    /*----------------------------------*/
    /*modal */
    .comp--modal__content {
        width: 90%;
    }

    .comp--modal__content h3 {
        margin-bottom: 30px;
        font-size: 1.2em;
    }

    .comp--modal__content {
        max-height: fit-content;
    }

    /*----------------------------------*/
    /* Pregutnas frecuentes */
    .preguntas-frecuentes .accordion-body li {
        line-height: 22px;
    }

    /*----------------------------------*/
    /*------ Cards -------*/
    /*------ Card Color -----*/

    .card--vertical--color {
        width: 90%;
    }

    .grid-contenedor.paso {
        padding: 50px 15px;
    }

    /*---------------------------------------------------*/
    /*------------ Paso a paso versión extendida -------------*/

    .componente--guia .guia__contenido {
        height: auto;
    }

    .componente--guia .guia__contenido>h2,
    .componente--guia .guia__contenido>p {
        width: 100%;
    }

    .componente--guia .guia__contenido a {
        font-size: 15px;
        width: 100%;
        margin-top: 20px;
    }

    .componente--guia .guia__contenido .active-content {
        width: 100%;
        height: auto;
        position: relative;
        margin-top: 20px;
    }

    .componente--guia .guia__contenido .active-content div {
        padding: 20px;
    }

    .componente--guia .guia__contenido .active-content img {
        display: none;
    }

    .componente--guia .guia__contenido .active-content div h3 {
        font-size: 17px;
    }


    /*---------------------------------------------------*/
    /*------------ Paso a paso versión horizontal -------------*/

    .tabs-horizontal__contenedor__item>div>div {
        padding: 20px 20px;
    }

    .tabs-horizontal__contenedor__item.active {
        height: auto;
    }

    .tabs-horizontal__contenedor__item .button--third {
        font-size: 18px;
    }

    .tabs-horizontal__contenedor__item .button--third::after {
        margin-bottom: 0px;
    }

    .tabs-horizontal__contenedor__item__img img {

        margin-bottom: 10px;
    }

    /*---------------------------------------------------*/
    /*------------ Seccion Otros Servicios -------------*/

    .otros--servicios .item--servicio {
        max-height: max-content;
        flex-direction: column;
    }

    .otros--servicios .item--servicio img {
        width: 80%;
        margin: 0 auto 15px;
    }

    .otros--servicios .item--servicio>div {
        padding-left: 5px;
    }

    /*----------------------------------*/
    /*------ Sección enlaces de interés  -------*/

    .interes .swiper-interes .button {
        margin-top: 0;
    }

    

    /*---------------------------------------------------*/
    /*----- card icon  -----*/
    .card--icon {
        min-height: 180px;
    }

    .card--icon p {
        font-size: 1em;
    }

    /*----------------------------------*/
    /*------ Tabs sencilla horizontal  -------*/
    .info-tab__nav {
        flex-wrap: wrap;
    }

    .info-tab__cont table td {
        padding-right: 10px;
    }

    .info-tab__nav__item {
        width: 40%;
    }

    .info-tab__cont__img {
        display: block;
        height: auto;
        width: 55%;
    }

    .info-tab__cont {
        padding-top: 0px;
    }

    .info-tab__cont__tasa {
        width: 100%;
        border: 0px;
    }


    /*------------------------------------------*/
    /* Secció minibanner con imagen al lado (usado en financiero empresas) */

    .minibanner>div {
    flex-wrap: wrap;
}

    .minibanner .minibanner__img {
        width: 100%;
        order: 2;
    }

    .minibanner .contenedor__minibanner__text {
        width: 100%;
    }


    .minibanner .contenedor__minibanner__text .minibanner__boton {
        width: 100%;
    }


    
 

    



}