/*==================================================
                    HEADER
==================================================*/

.encabezado{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:var(--color-primario);

    padding:0 35px;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

}


/*==================================================
                CONTENEDOR
==================================================*/

.header-contenedor{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*==================================================
                LADO IZQUIERDO
==================================================*/

.header-izquierdo{

    display:flex;

    align-items:center;

}


/*==================================================
                    LOGOS
==================================================*/

.logos{

    display:flex;

    align-items:center;

    gap:10px;

}

.logos img{

    height:70px;

    width:auto;

    transition:var(--transicion);

}


/* Logo Mediateca */

.logo-mediateca{

    height:110px !important;

    transform:translateX(-25px);

}


/*==================================================
                TÍTULO
==================================================*/

.titulo-med{

    font-family:'Montserrat', sans-serif;

    color:var(--color-blanco);

    text-transform:uppercase;

    font-size:19px;

    font-weight:400;

    line-height:1.35;

    letter-spacing:.4px;

}
/*==================================================
              HEADER RESPONSIVE
==================================================*/

@media (max-width: 768px){

    .encabezado{
        width:100%;
        padding:0;
        box-sizing:border-box;
    }

    .header-contenedor{
        width:100%;
        max-width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:12px 10px;
        box-sizing:border-box;
    }

    .header-izquierdo{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    /* LOGOS */

    .logos{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px;
        flex-wrap:nowrap;
    }

    .logos img{
        height:65px !important;
        width:auto;
        max-width:80px;
        transform:none !important;
    }

    .logo-mediateca{
        height:65px !important;
        width:auto;
        max-width:80px;
        transform:none !important;
    }

    /* OCULTAR TÍTULO EN CELULAR */

    .titulo-med{
        display:none;
    }

}

html,
body{
    overflow-x:hidden;
}