*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

:root{
    --homeBackground: #42387c;
    --orange: #FF6600;
    --blue:#006299;
    --orangeHover: #de5900;
}


body{
    background-color: white;
    font-family: Rubik;
    
}

h1{
    font-weight: 700;
}


/* ------------------------------------------------------------ HOME ------------------------------------------------------------*/

#home{
    z-index: -1;
    clip-path: polygon(0 0%, 100% 0%, 100% 81%, 0% 100%);
    z-index: 10;
    position: relative;
    background-color: #545495;
    color: white;
    padding-bottom: 10em;
}
#backgroundHome{
    position: absolute;
    top: 10%;
    right: 0;
    height: 100%;
    width: auto;
    z-index: -10;
}
#backgroundHomePhone{
    display: none;
    position: absolute;
    width: 100%;
    z-index: -10;
    bottom: 0;
}   
#home span{
    display: flex;
    margin-top: 4em;
}
#home span img{
    height: 40pt;
    width: auto;
}
#home h1{
    line-height: 53pt;
}

#home p{
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
}
@media (max-width: 767px){
    #home h1{
        width: 100%;
    }
}
@media (max-width: 557px){
    #home h1{
        font-size: 48px;
        margin-top: 1em;
    }
}

/* ------------------------------------------------------------ HOME2 ------------------------------------------------------------*/


#home2{
    position: relative;
    padding-bottom: 10em;
    margin-top: -5em;
    z-index: 10;
}
#home2::before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background-color: transparent;
    border: none;
    border-top: 12em solid var(--orange);
    border-left: 12em solid var(--orange);
    border-top-left-radius: 100%;
    z-index: 0;
}

#tutoriales{
    width: max-content;
    background: linear-gradient(180deg, #013766 47.74%, #050B12 104.89%);
    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
    border-radius: 24px;
    padding: 0 .8em 1em .8em;
}
#tutoriales h4{
    color: white;
    font-size: 16px;
    text-align: center;
    margin-top: 1em;
}
#triangulo{
    width: 1em;
    height: .5em;
    background: white;
    clip-path: polygon(0 0%, 100% 0%, 50% 100%, 50% 100%);
    margin: .7em 0;
}
#home2 button{
    width:100%;
    padding: .2em;
    margin: .5em;
    border: none;
    border-radius: .4em;
    display: flex;
}
#home2 a{
    text-decoration: none;
    color: black;
    font-size: 14px;
    font-weight: 300;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: -0.5px;
    line-height: 20px;
    transition: color .1s ease-in-out;
    
}

#home2 a:hover{
    color: var(--orange);
    transition: color .1s ease-in-out;
}
button img{
    width: auto;
    height: 1.5em;
    margin: auto 0 auto auto;
}
.col-lg-5{
    font-size: 16px;
    margin-bottom: 0;
    position: relative;
}
.col-lg-5 h5{
    font-size: 16px;
}
.lista-hacemos{
    position: absolute;
    text-align: left;
    bottom: 0;
    left: 0;
}
.lista-hacemos ul{
     word-spacing: 1px
}
#contenedor-mundo{
    position: relative;
}
#img-mundo{
    position: absolute;
    bottom: 1em;
    right: 0;
    border-radius: 16px;
}

@media (max-width:992px){
    #home{
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    #home #backgroundHome{
        display: none;
    }
    #home #backgroundHomePhone{
        display: block;
        width: 100%;
    } 
    #home span{
        align-items: baseline;
        margin-top: 0em;
    }
    #home span img{
        height: 40pt;
        width: auto;
        margin-top: 1em;
    }
    #home h1{
        line-height: 1em;
    }
    #home p{
        margin-bottom: 6em;
    }
    #home2{
        padding-bottom: 0;
        margin-top: 1em;
    }   
    #home2::before{
        display: none;
    }
    #tutoriales{
        width: max-content;
        background: linear-gradient(180deg, #013766 47.74%, #050B12 104.89%);
        box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
        border-radius: 24px;
        padding: 0 .5em 1em .5em;
        margin: 0 auto;
    }
    
    #img-mundo{
    position: relative;
    margin-top: 1em;
    }
    .lista-hacemos{
    position: relative;
    margin-top: 1em;
    }
footer{
        margin-top: 25em;
    }
}