html {

    scroll-behavior: smooth;

}



/* Animaciones */

* {

    animation: appear 0.3s ease-in-out;

    font-family: 'Poppins', sans-serif;

}



.nav--desktop {

    border-radius: 100px;

    position: absolute;

    z-index: 5;

    top: 0;

    right: 50%;

    transform: translateX(50%);

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    width: 95vw;

    max-width: 1440px;

}

.bg--landing {

    width: 100vw;

    background-image: url('../img/landing/bg1.png');

    background-repeat: no-repeat;

    background-position: top right;

    background-size: 50% 700px; /* Ajusta el ancho del fondo a un 80% del contenedor */

}



.bg3 {

    width: 100vw;

    height: 300px;

    position: relative;

    background-image: url('../img/landing/bg3.png');

    background-repeat: no-repeat;

    background-position: top;

    background-size: 100% 700px; /* Ajusta el ancho del fondo a un 80% del contenedor */

}



.bg3 > div{

    position: absolute;

    width: 50%;

    top:40%;

}



.contacto__banner {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    background-color: white;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    border-radius: 100px;

    position: absolute;

    top: -12px;

    width: 95vw;

    max-width: 1440px;

    right: 50%;

    transform: translateX(50%);

}



.banner--brands {

    display: flex;

    justify-content: space-between;

}



.banner--brands img {

    width: 15%;

    aspect-ratio: 3/2;

    object-fit: contain;

    max-height: 72px;

}



.esfacil__left {

    border-right: 2px solid var(--dark-blue);

}



.esfacil__elipse {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}



#mobileMenu,

#mobileMenu *{

    animation: none;

}



#mobileMenu {

    transform: translateX(0);

    transition: transform 0.3s ease-in-out;

    z-index: 10;

}



#mobileMenu > * {

    transform: scale(1);

    transition: transform 0.6s ease-in-out;

}



#mobileMenu.notShowed > *{

    transform: scale(0.5);

    transition: transform 0.6s ease-in-out;

}





#mobileMenu.notShowed {

    transform: translateX(100%);

    transition: transform 0.6s ease-in-out;

}



.footer {

    display: grid;

    grid-template-columns: 2fr 3fr;

    gap: 24px;

}



.input--lightBlue {

    background-color: var(--light-blue);

    color: var(--dark-blue);

    width: 100%;

    border: none;

    padding: 12px 16px;

    border-radius: 20px;

    transition: all 0.6s ease-in-out;

    margin: 12px 0;

}



.input--lightBlue::placeholder {

    color: var(--medium-blue);

}



.input--lightBlue:focus {

    outline: none;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    transition: all 0.3s ease-in-out;

}



#carouselHome .splide__arrows.splide__arrows--ltr {

    display: flex;

}



#carouselHome .splide__arrows.splide__arrows--ltr button {

    position: static;

    background-color: transparent;

}



#carouselHome .splide__pagination {

    display: none !important;

}



.card-header:hover button {

    text-decoration: none;

}



.card-header button.collapsed .more{

    display: none;

}



.card-header button .less {

    display: none;

}



.card-header button.collapsed .less{

    display: inline;

}



.card-header button .more {

    display: inline;

}



.accordion--item {

    border: 1px solid #e6e6e6 !important;

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    border-radius: 16px !important;

}



.hero {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    aspect-ratio: 16/7;

    position: relative;

}



.hero .text1 {

    position: absolute;

    bottom: 50%;

    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}



.hero .text2 {

    position: absolute;

    bottom: 0;

    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    right: 5%;

}

.hero .text3 {

    position: absolute;

    bottom:5%; 

    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    left: 50%;

}





.fianzas--hero {

    background-image: url('../img/fianzas/hero.png');

}



.nosotros--hero {

    background-image: url('../img/nosotros/hero.png');

}



.segurosPersonales--hero {

    background-image: url('../img/segurosPersonales/hero.png');

}

.segurosEmpresariales--hero {

    background-image: url('../img/segurosEmpresariales/hero.png');

}



@media (max-width: 1250px) {

    .hero .text3 {

        position: static;

    }

}



@media (max-width: 990px) {

    .bg3 > div{

        position: absolute;

        width: 90%;

        top:50%;

    }

    .bg3 > div >h2{

        font-size: var(--text-lg);

    }

    

    .contacto__banner {

        position: relative !important;

        top: 0 !important;

        right: 0 !important;

        transform: translateX(0) !important;

        border-radius: 12px !important;

        width: 100% !important;

    }



    .esfacil__left {

        border-right: none;

    }



    .esfacil__elipse {

        display: none;

    }



}



@media (max-width: 767px) {

    .footer {

        grid-template-columns: 1fr;

    }



    .hero {

        aspect-ratio: auto;

    }



    .hero .text1 {

        position: static;

    }



    .hero .text2 {

        position: static;

    }

    .hero .text3 {

        position: static;

    }

}



@keyframes appear {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}