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

/*globales*/
html{
    font-size: 62.5%;
}
body{
    font-size: 16px; /* 1rem = 10px*/
    font-family: "Krub", serif;
   
}

/*titulos*/
.logo-transpa{
    display: flex;
    justify-content: right;
}

.dire-bg{
    background-color: var(--secundario);
    height: 10px;
}

.redes1 {
    display: flex;
    justify-content: left;
}

.redes1 a{
    color: var(--blanco);
    padding: 1rem;
    

}    

.direccion {    
    margin: 0;
    padding: 1rem;
    font-size: 1.3rem;
    color: var(--blanco);

}

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

/*navegador*/
.logo-hospi{
    margin-right: 25px;
    padding: 0.5rem;
}

.nav-bg{

    background-color: var(--grisclaro);
    height: 83px;
}
.navegacion-principal{
    display: flex;
    flex-direction: column;
    justify-content: space-around;        
}

@media (min-width: 768px) {
    .navegacion-principal{
        flex-direction: row;
    }
}




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

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

/*hero banner*/
 .hero{
    background-image: url(../img/hospi.jpg);
    background-size: cover;
    height: 600px;
    width: 1300px;
    position: relative;
    margin: auto;
    margin-top: 2rem;


 }

    
/*cuerpo*/
.caja-contenedor{
    width: 100rem;
    margin: auto;
    height: 50rem;
    background: linear-gradient(to top, var(--grisclaro)0%, var(--blanco)100%);
    display: flex;
    padding: 3rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.caja1{
    background-image: url(../img/SANTIAGO\ RUIZ\ LAOS-\ SUB\ DIRECTOR\ DEL\ HOSPITAL\ REGIONAL\ DE\ HUACHO.jpg);
    background-size: cover;
    width: 60rem;
    height: 50rem;
    margin-right: 2rem;
}

.caja2{
    width: 70rem;
    height: 50rem;

}

.texto h2{
    text-align: center;
    font-size: 2.5rem;
    margin-top: 15rem;
}

.parrafo p{
text-align: justify;
margin-left: 5rem;
margin-right: 5rem;

}





/*comandos*/



.flex-contenido{
display: flex;
background: var(--primario);
justify-content: center;
background: var(--grisclaro);
margin-top: 2rem;
margin-bottom: 2rem;

}

.caja{
    width: 60rem;
    height: 20rem;
    background: var(--blanco);
    margin: 2rem;
    line-height: 1.7rem;


}

.caja h3{
    text-align: center;
    font-size: 2.5rem;
}

.caja p{
    text-align: justify;
    margin-right: 4rem;
    margin-left: 4rem;
    font-size: 1.5rem;
    
}




/*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;

}