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

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:900;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

}

/* ==========================================================
   CONTAINER
========================================================== */

#header .container{

    width:min(1200px,92%);

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 0;

}

/* ==========================================================
   LOGOTIPO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo img{

    display:block;

    height:58px;

    width:auto;

    transition:transform .35s ease;

}

.logo:hover img{

    transform:scale(1.03);

}

/* ==========================================================
   MENU
========================================================== */

.menu{

    display:flex;

    align-items:center;

    gap:2.2rem;

}

.menu a{

    position:relative;

    text-decoration:none;

    color:#FFFFFF;

    font-size:.98rem;

    font-weight:500;

    letter-spacing:.03em;

    transition:color .3s ease;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#D6A84F;

    transition:width .3s ease;

}

.menu a:hover::after{

    width:100%;

}

/* ==========================================================
   HEADER AO ROLAR
========================================================== */

#header.scrolled{

    background:rgba(13,44,58,.95);

    backdrop-filter:blur(12px);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

#header.scrolled .container{

    padding:14px 0;

}

#header.scrolled .logo img{

    height:50px;

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:900px){

    #header .container{

        padding:18px 0;

    }

    .menu{

        gap:1.3rem;

    }

}

@media(max-width:768px){

    #header .container{

        flex-direction:column;

        gap:1rem;

    }

    .logo img{

        height:50px;

    }

    .menu{

        flex-wrap:wrap;

        justify-content:center;

        gap:1rem;

    }

    .menu a{

        font-size:.92rem;

    }

}