@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');

.estructura_organizacional{   

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

}



.directores{

    

    max-width: 1440px;

    margin: 0 auto;

    margin-bottom: 30px;

}



.direccion-general{

    display: flex;

    flex-direction: column;

    text-align: center;

}



.direcciones{

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    text-align: center;

}



.estructura_organizacional h1{

    font-size: 34px;    

    font-weight: bold;

    text-align: center;

    margin: 0;  

    padding: 1em 0.5em;  

    color: var(--primary-color);

    font-family: 'Trebuchet MS', sans-serif;

}



.director img{

    display: block;

    margin-left: auto;

    margin-right: auto;

    width: 150px;

    height: 150px;

    margin: 35px auto;

    border-radius: 15px 2px 15px 2px;

}



.director .meylin{

    transform: rotate(90deg);

}





.director span{

    position: relative;

    text-align: center;

    font-size: 16px;

    padding: 0.2em;

    font-weight: 600;

    margin-bottom: 20px; 

    color: var(--primary-color);

    border-radius: 3px;

    line-height: 30px;

}



.director span::after{

    content:"";

    background-color: var(--text-color-hover);

    position: absolute;

    left: 0;

    top: 100%;

    width: 100%;

    height: 3px;

    

}



.director h3{

    text-align: center;

    font-size: 16px;

    font-weight: 500;

    margin: 10px;

    color: var(--primary-color-2);

    font-family: 'Trebuchet MS', sans-serif;

}



.directores .telefono{

    color: var(--text-color-hover);

    font-weight: 700;

}



@media (max-width:1080px){

    .directores{

        display: grid;

        grid-template-columns: repeat(1, 1fr);

        gap: 10px;

        max-width: 1080px;

        margin: 0 auto;

        margin-bottom: 30px;

    }



    .direcciones{

        display: grid;

        grid-template-columns: repeat(1, 1fr);

    }



    .estructura_organizacional h1{

        font-size: 28px;    

        

    }



    .director img{ 

        height: 100px;       

        width: 100px;

        margin: 15px auto;

    }



    .director h2{        

        font-size: 14px;              

    }

    

    .director h3{

        font-size: 14px;      

    }

}