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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100px;

    z-index:9999;

    background:transparent;

    transition:all .4s ease;

}
.header-container{

    display:grid;

    grid-template-columns:220px 1fr 140px;

    align-items:center;

    height:100px;
    padding-top:8px;
}

.logo img{

    width:95px;

    height:auto;

    transition:.35s;

}

.nav{

    display:flex;

    justify-content:center;

}

.menu{

    display:flex;

    gap:54px;

}

.menu a{

    position:relative;

    color:white;

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:1px;

    font-weight:600;

    transition:.35s;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--color-dorado);

    transition:.35s;

}

.menu a:hover::after,
.menu .activo::after,
.menu .current-menu-item > a::after,
.menu .current_page_item > a::after,
.menu .current-menu-parent > a::after,
.menu .current_page_parent > a::after{
    width:100%;
}

.menu a:hover,
.menu .activo,
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current-menu-parent > a,
.menu .current_page_parent > a{
    color:var(--color-dorado);
}

.header-icons{

    display:flex;

    justify-content:flex-end;

    gap:22px;

}

.header-icons a{

    color:white;

    font-size:18px;

    transition:.35s;

}

.header-icons a:hover{

    color:var(--color-dorado);

}/* CSS Document */

/*==================================================
            HEADER AL HACER SCROLL
==================================================*/

.header.scrolled{

    background:rgba(10,10,10,.88);

    backdrop-filter:blur(14px);

    box-shadow:0 5px 30px rgba(0,0,0,.35);

}

.header.scrolled .logo img{

    width:66px;

}

.header.scrolled .header-container{

    height:82px;

}