/*import de colores¨*/
@import url("colores.css");

/*import de tipografia¨*/
@import url("tipografia.css");

 .main .Container-cards{
    
        display: flex;
        justify-content: center;
        align-items:flex-start;
        gap: 40px;
        flex-wrap: wrap;
        width:auto;
        padding: 10px;
        margin: 50px 0px;
    
}


 .main .Card__vertical{
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 24px 20px;
    background-color: var(--color--neutral--0);
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    transition: all 1s;
    gap:24px;
    border-radius: 15px;
}



 .main .Card-vertical__Cont{
    display: flex;
    flex-direction: column;
    gap:24px;
}
 .main .Card-vertical__Cont img{
    width:300px;
    height: 250px;
    object-fit:cover;
   
}


 .main .Card-vertical__Cont h3 {
    text-align: left !important;
    color: #515151;
    margin: 0px;
}

 .main .Card-vertical__Cont p {
    margin: 0px;
    color: var(--color--neutral--80, #666); 
    /* Desktop/Parrafo L */
    font-size: 16px;
    font-style: normal;
    font-weight: 300 !important;
    line-height: 150%; /* 24px */
    letter-spacing: 0.288px;
}

 .main .Card-vertical__Cont--button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:32px
}


/* cards Horizontales */

 .main .Card__horizontal{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background-color: var(--color--neutral--0);
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    transition: all 1s;
    gap:24px;
    border-radius: 10px;
    
}
 .main .Card--horizontal--beneficio{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background-color: var(--color--neutral--0);
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    transition: all 1s;
    gap:24px;
    border-radius: 10px;
    
}


 .main .Card-horizontal__Cont{
    display: flex;
    flex-direction: column;
    gap:24px;
}
 .main .Card-horizontal__Cont img{
    width:250px;
    height: 250px;
    object-fit:cover;
}


 .main .Card-horizontal__Cont h3 {
    text-align: left !important;
    color: #515151;
    margin: 0px;
}

 .main .Card-horizontal__Cont p {
    margin: 0px;
    color: var(--color--neutral--80, #666); 
    /* Desktop/Parrafo L */
    font-size: 16px;
    font-style: normal;
    font-weight: 300 !important;
    line-height: 150%; /* 24px */
    letter-spacing: 0.288px;
}

 .main .Card-horizontal__Cont--button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:32px
}

/*Controladores */

.main .swiper {
    position: relative;
}
.main .contenedor-sbullet {
    position: relative;
    z-index: 1;
}

 .main .swiper .swiper-pagination .swiper-pagination-bullet, .contenedor-sbullet .swiper-pagination .swiper-pagination-bullet  {
    background: var(--color--main);
    opacity: 0.24;
    border: 0px;
}
.main .Controlador .swiper-pagination-bullet {
     background: var(--color--main);
    opacity: 0.24;
    border: 0px;
}

 .main .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .contenedor-sbullet .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}
.main .Controlador .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}
 .main .Controlador {
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding-top: 25px;
}

 .main .Controlador div {
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .main .Controlador div span {
    color: var(--color--main);
    cursor: pointer;
    font-size: 40px;

}

 .main .Controlador a {
    color: white;
    padding: 4px 8px;
}

 .main .fa-pause,  .main .fa-play{
    margin-top: 8px !important;
}
 .main .fa-chevron-right::before, .fa-chevron-left::before {
    font-size: x-large;
}
 .main .swiper .swiper-button-prev ,.swiper-button-next{
    background-color: var(--color--main);
    padding:12px !important;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}



 .main .Card__carrusel__interes {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    margin: 24px 12px 48px;
    padding: 24px 16px;
    background-color: var(--color--neutral--0);
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
    transition: all 1s;
    border-radius: 10px;
}

 .main .Card__carrusel__interes img {
    border-radius: 10px;
}
 .main .Card__carrusel__interes h3 {
   font-size: 18px;
   margin-bottom: 10px;
}
 .main .Card__carrusel__interes .Cont__carrusel:nth-child(2)  {
    padding-left: 20px;
}

 .main .Cont2__interes .swiper {
padding-right: 0px;
    
}

.main .grid-contenedor .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    bottom: 55px;
    margin: auto;
}
.main .contenedor-sbullet .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    bottom: -15px;
}
 .main .grid-contenedor .Interes .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    bottom: 0px;
}



.main .btn-controlador .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, -10px);
    left: auto;
}

.main .btn-controlador .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -10px);
    right: auto;
}

.main .btn-controlador .swiper-button-next.siguiente, .main .btn-controlador .swiper-button-prev.anterior {
    background-color: initial;
    cursor: pointer;
    height: auto;
    width: auto;
   
}

.main .btn-controlador .swiper-button-next.siguiente::after, .main .btn-controlador .swiper-button-prev.anterior::after {
    color: var(--color--main);
    font: normal normal lighter 40px / 1 FontAwesome;
}
.main .btn-controlador .swiper-button-next.siguiente::after{
    content: "\f105";  
}

.main .btn-controlador .swiper-button-prev.anterior::after {
    content: "\f104";
}


.main .btn-controlador.estilo2 .swiper-button-next.siguiente::after, .main .btn-controlador.estilo2  .swiper-button-prev.anterior::after {
    background-color: var(--color--main);
    color: var(--color--neutral--0);
    border-radius: 50%;
    padding: 0 13px;
   
}
/* Mobile*/
@media screen and (max-width: 576px) {
    .main .swiper {
        padding-bottom: 20px;
    }

    .main .contenedor-sbullet .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        bottom: 0px;
    }

    .main .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, -10px);
        left: auto;
    }

        .main .info-alert-primary {
        padding: 25px 20px;
    }

   
}