:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #ea8119;
    --secundario: #2f2f9d;
    --gris: #757575;
    --grisclaro: #DFE9F3;
    --azulino: #3e3edc;
    
}

/*globales*/
html{
    font-size: 62.5%;
}
body{
    font-size: 16px; /* 1rem = 10px*/
    font-family: "Krub", serif;
    background-image: linear-gradient(to top, var(--grisclaro)0%, var(--blanco)100%);
   
}

/*titulos*/


.dire-bg{
    background-color: var(--secundario);
    height: 34.94px;
    margin-bottom: 1rem;
}
.direccion {
    margin: 0;
    padding: 1rem;
    font-size: 1.3rem;
    color: var(--blanco);

}

.contenedor{
    width: 120rem;
    margin : 0 auto;
   
}

/*navegador*/
.nav-bg{

    background-color: var(--blanco);
    margin-bottom: 1rem;
}
.navegacion-principal{
    background-color: var(--blanco);
    display: flex;
    justify-content: space-around;    
    
}

.navegacion-principal a{
    color: var(--oscuro);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.6rem;  
    padding: 2rem;
}

.navegacion-principal a:hover{
    background-color: var(--secundario);
    color: var(--blanco);
}

/*hero banner*/
 .hero{
    background-image: url(../img/businesspeople-meeting-plan-analysis-graph-company-finance-strat.jpg);
    background-size: cover;
    height: 400px;
    position: relative;
    margin-bottom: 2rem;

 }

.contenido-hero{
    position: absolute;
    padding: 10rem;
    color: var(--primario);
    font-size: 3rem;
    
}

.contenido-hero h1{
    font-size: 4rem;
}
.contenido-hero span{
    font-size: 6rem;
}   
    
/*cuerpo*/
.estructura{
    width: 120rem;
    margin: auto;
    height: 52rem;
    background: var(--blanco);
    padding: 1rem;
    margin-bottom: 2rem;
}
.grid{
    display: grid;
    grid-template-columns: auto 50%;
    
 
}
.cuerpo1, .cuerpo2{
   background: var(--blanco);
   margin: 1rem;
    
}

.grid p{
    text-align: justify;    
    margin: 2rem;
    line-height: 1.3;
    font-size: 1.4rem;
}

.grid .nombre h2{
    text-align: center;
    font-size: 2.6rem;
    
}
.cuerpo2{
background-image: url(../img/estadistica.jpg);
background-size: cover;

}

.foto{
    border: solid;
    color: var(--gris);
    width: 1rem;
    height: 1rem;
    
}



.cuerpo1 h3{
    margin-left: 2rem;
}
/*comandos*/

.tablas-comando{
    margin: auto;
    height: 67rem;
    padding: 2rem;
    background: url(../img/barras50.jpg);
    background-size: cover;
}

.container{
    width: 120rem;
    height: 60rem;
    margin: auto;
    border: solid var(--blanco);
    padding: 3rem;
}


.container .heading{
    text-align: center;
    padding-bottom: 3px;
    color: var(--blanco);
    text-shadow: 0 5px 10px rgba(0,0,0,.5);
    font-size: 40px;
}

.container .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.container .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-radius: 5px;
    background: #fff;
    text-align: center;
    padding: 15px 5px;

}

.container .box-container .box img{
    height: 60px;
}

.container .box-container .box h3{
    color: #444;
    font-size: 22px;
    padding: 2px 0;
}

.container .box-container .box p{
    color: #777;
    font-size: 15px;
    line-height: 1.5;

}
.container .box-container .box .btn{
    margin-top: 8px;
    display: inline-block;
    background: var(--secundario);
    color: #fff;
    font-size: 17px;
    border-radius: 5px;
    padding: 8px 25px;
    text-decoration: none;
}

.container .box-container .box .btn:hover{
    letter-spacing:  1px;
}
.container .box-container .box:hover{
    box-shadow: 0 10px 15px rgba(0,0,0,.3);
    transform: scale(1.03);
}

@media(max-width: 760px){
    .container{
        padding: 20px;
        }
}
















/*footer*/
.footer-conjunto{
    background-color: var(--secundario);
    padding: 2rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.footer-conjunto p{
    color: var(--blanco);
}
.footer-conjunto h3{
    font-size: 2.5rem;
    color: var(--primario);
    text-align: left;
}
.footer-conjunto a{
    color: var(--blanco);
    text-decoration: none;
    margin-bottom: 2rem;
    
}
.enlaces a{
    display: block;
}
.redes-sociales {
    display: flex;
    justify-content: space-around;      
}

.redes-sociales a{
    background: var(--primario);
    padding: 1rem;
}
.redes-sociales a:hover{
    background-color: var(--blanco);
    color: var(--secundario);
}
.derechos p{
    font-size: 1.5rem;
    text-align: center;
    margin: auto;
    color: var(--blanco);
    background: var(--azulino);
    padding: 1rem;

}