: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);

}

@media(max-width: 480px){
    .dire-bg{
        padding: 1rem;
        }
}



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

/*navegador*/
.nav-bg{

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

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

.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{
    width: 100rem;
    height: 40rem;
    margin: auto;
    background-image: url(../img/banner_nombramiento.jpg);
    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;
}   
    
/*Table*/
h1{

    color: var(--primario);
    text-align: center;
    font-size: 3rem;
    padding: 1rem;
}

h2{

    color: var(--oscuro);
    text-align: center;
    font-size: 1.6rem;
    padding: 3rem;
    margin-left: 5rem;
    margin-right: 5rem;
    text-align: justify;
    line-height: 2.5rem;
}

.tabla{

    width: 90rem;
    height: 60rem;
    margin: auto;
    background-color: var(--blanco);
    border: solid 2px var(--secundario);
}


table{
    width: 80%;
    background-color: var(--blanco);
    text-align: left; 
    border-collapse: collapse; 
    margin: auto;
    margin-top: 1rem;
}
 th, td{
    border: solid 1px var(--gris);
    padding: 1rem;
    text-align: center;
    text-decoration: none;
 }
 thead{
    background-color: var(--secundario);
    color: var(--blanco);
 }
 tr:nth-child(even){
    background-color: var(--grisclaro);
 }
td a{
    text-decoration: none;
    color: var(--oscuro);
}


@media(max-width: 480px){
    table{

    }
}


/*comandos*/


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





@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;

}