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

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    padding:var(--header-padding);

    background:var(--header-background);

    box-shadow:var(--header-shadow);

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:1000;

}


/*=========================================================
    LOGO IZQUIERDO
=========================================================*/

.header__left{

    flex:0 0 auto;

    display:flex;

    align-items:center;

}


.header__brand{

    display:flex;

    align-items:center;

}


.header__brand img{

    width:130px;

    height:auto;

    display:block;

}


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

.header__logos{

    flex:1;

    display:flex;

    align-items:left;

    justify-content:left;

    gap: 4px;

    min-width:0;

}


.header__logos a{

    display:flex;

    align-items:left;

}


.header__logos img{

    width:auto;

    height:60px;

    max-width:180px;

    object-fit:contain;

    display:block;

}


/*=========================================================
    NAVEGACIÓN
=========================================================*/

.header__nav{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

.menu{
    list-style:none;
    display:flex;
    align-items:center;
    gap:var(--menu-gap);
    margin:0;
    padding:0;
}


.menu__item{
    position:relative;
    flex:0 0 auto;
}


.menu__item>a,
.menu__button{

    display:flex;

    align-items:center;

    gap:.4rem;

    padding:.75rem 1rem;

    color:var(--menu-color);

    font-size:var(--menu-font-size);

    font-weight:500;

    background:none;

    border:none;

    cursor:pointer;

}


.menu__item>a:hover,
.menu__button:hover{

    color:var(--menu-hover);

}


/*=========================================================
    HAMBURGER
=========================================================*/

.header__toggle{

    flex:0 0 48px;

    display:block;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

}


.header__toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:6px auto;

    background:#ffffff;

    border-radius:3px;

    transition:.30s;

}


/*=========================================================
    HAMBURGER
=========================================================*/

.header__toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

}



.header__toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:6px auto;

    background:#ffffff;

    border-radius:3px;

    transition:.30s;

}