/*@import url(https://db.onlinewebfonts.com/c/0011a3ef0483d14dacf3b8b41fced7ac?family=Nescafe+Sans);

@font-face {font-family: "Nescafe Sans"; src: url("//db.onlinewebfonts.com/t/0011a3ef0483d14dacf3b8b41fced7ac.eot"); src: url("//db.onlinewebfonts.com/t/0011a3ef0483d14dacf3b8b41fced7ac.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0011a3ef0483d14dacf3b8b41fced7ac.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0011a3ef0483d14dacf3b8b41fced7ac.woff") format("woff"), url("//db.onlinewebfonts.com/t/0011a3ef0483d14dacf3b8b41fced7ac.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0011a3ef0483d14dacf3b8b41fced7ac.svg#Nescafe Sans") format("svg"); }

*/



html{scroll-behavior: smooth;}



/*Variables para uso en todo el CSS*/

:root

{

    

    --font-global: 'nescafe_sansregular';

    --font-global-bold: 'nescafe_sansbold';

    --color-global: rgb(48,86,211);

    --color-global-dark: rgb(3, 76, 139);

}



*

{

    font-family: var(--font-global);

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /*text-decoration: none;*/

}

h1{

    font-family: var(--font-global-bold);

    font-size: 55px;

    color: white;

}

h2{

    font-weight: 300;

    color: white;

}

.titulo{

    background-position: center;

    background-size: cover;

    margin: 0 40px;

    color: white;

    font-size: 55px;

}



.subtitulo{

    color: var(--color-global);

    opacity: 0.9;

    font-size: 35px;

}

.cuerpo{

    color: rgba(41, 41, 41, 1);

    font-size: 18px;

    line-height: 1.5em;

}



/*bg img para los títulos de Nuestra Cultura y Valores Corporativos*/

#t1{background-image: url(./assets/titulos/titulo1.png);}

#t2{background-image: url(./assets/titulos/titulo2.png);}



/***************************************************Clases para Grids****************************************************/

.grid-template{

    display: grid;

    column-gap: 30px;

    margin: 0 100px 70px 100px;

}

.child-grid-padding{

    padding-left: 20px;

    padding-right: 20px

}





/***************************************************Home****************************************************/

.div-hidden{

    height: 83px;

}

.bg{

    height: 101vh;

    width: 100%;

    z-index: -1;

    position: absolute;

    background-image: url(./assets/get_started.png);

    background-position: center;

}



.home{

    grid-template-columns: 1fr 1fr;

    height: 65vh;

    align-items: center;

}



.home > .col-2{

    margin: auto;

}



.home > .col-2 > img{

    width: 500px;

    margin-left: 0px;

    

    animation: updown 3.5s ease-in-out infinite;



	/*-webkit-transition: .3s ease-in-out;*/

	/*transition: .3s ease-in-out;*/

}



.home > .col-1{

    padding: 20px;

    border-radius: 25px;

    background-color: rgba(0, 0, 0, 0.60);

    backdrop-filter: blur(3px);

    background-position: -50px -50px;

    /*animation: updown 1s linear 1s;*/

}



/*Animations*/

@keyframes updown {

    0% {

        transform: scale(1);

    }

    50%{

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}

/***************************************************Clientes****************************************************/



.clientes{

    background-color: white;

    height: auto;

    /*width: 85vw;*/

    border-radius:30px;

    /*margin-left: 100px;

    margin-right: 100px;*/

    margin-top: 50px;

    box-shadow: rgb(0 0 0 / 8%) 0.25rem 0.5rem 2rem

}

.clientes > p{

    padding: 30px 35px 0 35px;

    text-align: center;

    color: black;

}

.clientes .imagenes-clientes{

    margin: 0px 50px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: space-around;

}

.clientes .imagenes-clientes > img{

    width: 250px;

    padding: 20px;

    transition: all 500ms;

}

.clientes .imagenes-clientes > img:hover{

    background-color: rgba(0, 0, 0, 0.1);

    border-radius: 20px;

}

.clientes .boton-plataforma{

    margin: auto;

    margin-top: 15px;

    margin-bottom: 30px;

    padding: 10px;

    border-radius: 15px;

    background-color: var(--color-global-dark);

    text-align: center;

}



.clientes .boton-plataforma a {

    

    text-decoration: none;

    color: white;

    font-size: 22px;

}

/***************************************************Cultura****************************************************/

.cultura::before{

    z-index: 5;

    content: "";

    background-color: blueviolet;

    width: 200px;

}

.cultura{

    padding-top: 50px ;

}

.cultura-grid{

    grid-template-columns: 1fr 1fr;

    margin-top: 50px;

}



.cultura > .titulo {

    text-align: center;

}



.cultura-grid  .icono{

    display: inline-block;

    margin: 18px 0;

    width: 100px;

}







/***************************************************Valores****************************************************/

.valores-grid{

    margin-top: 40px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}

.valores-grid > .contenido-valores{

    display: flex;

    flex-direction: column;

    align-items: center;

    row-gap: 20px;

    width: 150px;

    min-height: 150px;

}

.valores-grid > .contenido-valores img{

    margin-top: 10px;

    width: 65px;

}





/***************************************************Negocios****************************************************/

.negocios{

    background-image: url(./assets/negocios/fondo.jpg);

    background-repeat: no-repeat;

    background-position: -1000px 0px;

    background-color: white;

}

.top-negocios{

    display: block;

    margin: auto;

    

    max-width: 1080px;

    

    padding-left: 40px;

    padding-right: 40px;

}

.titulo-negocios{

    color: black;

    padding-top: 85px;

    padding-bottom: 25px;

}

.descripcion-negocios{

    color: var(--font-global);

    font-size: 24px;

    padding-bottom: 25px;

}



.subtitulo-negocios{

    color: var(--color-global);

    margin-bottom: 10px;

    transition: 250ms;

}



/*Grid para mostrar los negocios*/



.grid-negocios {

    font-size: 18px;

    line-height: 25px;

    padding-bottom: 25px;



    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.grid-negocios img{

    width: 100px;

    padding: 20px 0;

    display: block;

    margin: auto;

    transition: 1000ms;

}



.grid-negocios div{

    max-width: 320px;

    margin: 10px;

    padding: 35px;

    background-color: rgba(48,86,211, 0.05);

    border-radius: 25px;

    transition: 500ms;

}

.grid-negocios div > *{

    padding: 10px;

}



.grid-negocios div:hover{

    transform: scale(1.05);

    margin: 10px 15px;

}



.grid-negocios img:hover{

    transform: rotate3d(0,5,0,180deg);

}



.grid-negocios .subtitulo-negocios:hover{

    color: white;

    background-color: var(--color-global);

    border-radius: 18px;

}



/***************************************************Contáctanos****************************************************/

.contactanos{

    padding: 50px;

    display: flex;

    justify-content:space-evenly;

    align-items: center;

    row-gap: 30px;

}



.col2-contactanos{

    display: flex;

    justify-content: space-around;

    column-gap: 20px;

    row-gap: 20px;

    width: 60%;

}

.col2-contactanos span{

    font-family: var(--font-global-bold);

}

.col2-contactanos .mapa{

    display: flex;

    flex-direction: column;

    width: 100%;

}

.col2-contactanos .mapa > iframe{

    border-radius: 30px;

    width: 100%;

}



.col1-contactanos{

    flex: 0 0 400px;

    margin-right: 10px;

    margin-bottom: 20px;

}



.col1-contactanos .tit{

    font-family: var(--font-global-bold);

    font-size: 18px;

}

.col1-contactanos .sub{

    font-size: 28px;

}





.col1-contactanos img{

    display: inline-block;

    margin-right: 10px;

    width: 35px;

}



.col1-contactanos .info-contactanos{

    line-height: 18px;

    margin-top: 20px;

    display: grid;

    row-gap: 25px;

    grid-template-columns: auto 1fr;

}



.col1-contactanos .info-contactanos span,a{

    color: var(--color-global-dark);

    font-family: var(--font-global-bold);

}



/***************************************************Footer****************************************************/

#grad1 {

    height: 4px;

    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);

}

.footer{

    padding: 20px 10%;

    display: grid;

    grid-template-columns: .2fr .80fr;

    height: auto;

    background-color: var(--color-global-dark);

    color: white;

    column-gap: 40px;

}

/*Columna 1*/

.col1-footer{

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    row-gap: 15px;

    

}











        /*Tamaño de Logos*/

        .footer .isologo{

            width: 60px;

            margin-right: 30px;

        }

        .footer i{

            padding: 0 8px;

            font-size: 1.3rem;

        }

      

        

        .col1-footer > .col2{

            display: flex;

        }



/*Columna 2*/





.col2-footer {

    

    font-size: 15px;

    display: flex; justify-content: flex-end; align-items: center;

    text-align: right;

    

}



.col2-footer a{

    color: white;

    font-size: var(--font-global-bold);

}



/***************************************************Navbar****************************************************/



/*Nabvar para pantallas grandes*/

.navbar{

    z-index: 1;

    padding: 25px;

    justify-content: space-between;

    width: 100%;

    display: flex;

    align-items: center;

    position: fixed;

    top: 0;

    -webkit-transition: all 300ms;

    transition: all 300ms;

}

.navbar .logo{

    margin-left: 30px;

    width: 180px;

    cursor: pointer;

    -webkit-transition: all 500ms;

    transition: all 500ms;

}



figure:hover img{

    filter: drop-shadow(1px 0 4px rgb(99, 99, 231));

}





.links{

    display: flex;

    align-items: center;

    

}

.links li{

    text-decoration: none;

    list-style: none;

    display: inline-block;

    margin-right: 30px;

}

.links li a{

    font-family: var(--font-global-bold);

    text-decoration: none;

    color: rgba(255, 255, 255, 0.75);

    transition: font-size 500ms;

    border-bottom-style: solid;

    border-color: white;

    border-width: 0px;

    transition: font-size 500ms, border-width 100ms;

}



.links li a:hover{

    border-width: 3px;

    color:white;

    font-size: 18px;

}

.links li .active {

    border-width: 3px;

    color:white;

    font-size: 18px;

}



.active{

    border-width: 3px;

    color:white;

    font-size: 18px;

}



/*Navbar para pantallas pequeñas*/

.links-mobile{

    z-index: 1;

    margin-top: -100vh;

    display: flex;

    flex-direction: column;

    height: 100vh;

    width: 100%;

    justify-content: center;

    text-align: center;

    background-color: var(--color-global);

    border-bottom-right-radius: 20%;

    border-bottom-left-radius: 20%;

    position: fixed;

    transition: all 0.5s ease;

}

.links-mobile li{

    margin: 30px;

    text-decoration: none;

    list-style: none;

    display: inline-block;

    margin-right: 30px;

}

.links-mobile li a{

    text-decoration: none;

    color: rgba(255, 255, 255, 0.75);

    transition: font-size 500ms;

    border-bottom-style: solid;

    border-color: white;

    border-width: 0px;

    transition: font-size 500ms, border-width 100ms;

}



.links-mobile li a:hover{

    border-width: 3px;

    color:white;

    font-size: 18px;

}

.links-mobile li .active {

    border-width: 3px;

    color:white;

    font-size: 18px;

}

.menu-boton{

    position: absolute;

    color: white;

    top: 15px;

    right: 20px;

    cursor: pointer;

    font-size: 50px;

    display: none;

}





/*Navbar On-Scroll*/

.navbar-onscroll{

    backdrop-filter: blur(5px);

    background-color: rgba(255, 255, 255, 0.8);

    color: black;

}

.navbar-onscroll .links li a{

    color: var(--color-global);

    border-color: var(--color-global-dark);

}

.navbar-onscroll .links li a:hover{

    border-width: 3px;

    color:var(--color-global-dark);

    font-size: 18px;

}

.navbar-onscroll .links li .active {

    border-width: 3px;

    color:var(--color-global-dark);

    font-size: 18px;

}

.navbar-onscroll #mnbtn{

    color: black;

}











/***************************************************Fondo del Cuerpo****************************************************/

body

{

    /*background: linear-gradient(to right, rgb(28, 28, 143), rgba(39, 76, 197, 0.95));*/

    background-color: rgba(0, 0, 255, 0.05);

    color: black;

}

/***********************************************************************************************************************/











/*Cambios para breakpoints*/

@media only screen and (max-width:1140px) and (min-width: 1020px) {

    .contactanos{flex-direction: column;}

    .col1-contactanos{flex: 0 0 auto; width: 100%;}

    .col2-contactanos{flex-direction: column;width: 100%;}

    .col2-contactanos iframe{width: 100%;}

}



@media only screen and (max-width:1020px){

    .contactanos{flex-direction: column;}

    .col1-contactanos{flex: 0 0 auto;}

    .col2-contactanos{flex-direction: column;width: 100%;}

    .col2-contactanos iframe{width: 100%;}

    .home > .col-2 > img{width: 450px;}

    h1{font-size: 50px;}

    h2{font-size: 22px;}

    .grid-template{margin-right: 60px;margin-left: 60px}

    .grid-negocios div:hover{margin: 10px; /*Para cuando hover no desplace a los hermanos*/}

    

}

@media only screen and (max-width:940px) {

    .bg{height: 120vh;}

    .menu-boton{display: block;}

    .navbar .logo{

        top: 25px;

        left: 20px;

        margin: 0;

        width: 165px;

    }

    .links{display: none;}

    .mobile-menu{margin-top: 0px;}

    .div-hidden {height: 115px;}









    /*Clases genéricas para grids*/

    .responsive-height{

        height: auto;

        grid-template-columns: auto;

    }

    .mobile-margin{

        width: auto;

        margin-left: 20px;

        margin-right: 20px;

    }

    .responsive-1-columns{

        grid-template-columns: 1fr;

        row-gap: 30px;

    }

    /*****************************/







    /*Diseñar una sola fila en Home*/

    .home{margin-top: 35px;}

    .home >.col-2 > img{width: 95%;padding-bottom: 20px;}

    /*****************************/



}

@media only screen and (max-width:700px) {

    .home{width: 100%;margin: 0;}

    .home >.col-1{border-radius: 0 0 25px 25px;}





    /*Footer Responsiveness*/

    .footer{

        grid-template-columns: 1fr;

        text-align: center;

        row-gap: 20px;

    }

    .footer .isologo{

        width: 45px;

    }

    .col2-footer{

        font-size: 15px;

        text-align: center;

    }

}



@media only screen and (max-width:450px) {

    .navbar .logo{width: 155px;}

    .div-hidden {height: 115px;}

    h1,.titulo{font-size: 42px;}

    h2{font-size: 22px;}

}



@media only screen and (max-width:380px) {

    .clientes .imagenes-clientes > img{

        width: 85%;

        margin: auto;

    }

    #t1,#t2{

        font-size: 2rem;

    }

    .valores-grid{

        column-gap: 2px;

    }

}





















/* ---- particles.js container ---- */

canvas{ display: block; /*vertical-align: bottom;*/ }

#particles-js{

    z-index: -1;

    position:absolute;

    width: 100%; height: 90%;

    background-color: #00000000;

    background-image: url("");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: 50% 50%; }