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

.header{

    position: fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--header-height);

    display:flex;
    align-items:center;

    background:var(--color-primary-dark);

    backdrop-filter:blur(16px);

    z-index:var(--z-sticky);

    transition:all var(--transition-normal);

}

.header--scrolled{

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

    background:var(--color-primary);

}

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

.header__container{

    width:100%;

    max-width:var(--container-xl);

    margin:auto;

    padding-inline:var(--container-padding);

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.header__logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.header__logo-image{

    width:180px;

    height:auto;

    display:block;

}

/*==================================================
BOTÓN
==================================================*/

.header__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:var(--button-height);

    padding-inline:var(--button-padding-x);

    border-radius:var(--button-radius);

    background:var(--color-secondary);

    color:var(--color-white);

    text-decoration:none;

    font-weight:var(--font-weight-semibold);

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

    transition:all var(--transition-normal);

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

}

.header__button:hover{

    background:var(--color-white);

    color:var(--color-primary);

    transform:translateY(-2px);

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

}

.header__button:focus-visible{

    outline:3px solid rgba(246,163,50,.35);

    outline-offset:4px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:768px){

    .header{

        height:72px;

    }

    .header__logo-image{

        width:145px;

    }

    .header__button{

        height:48px;

        padding-inline:24px;

        font-size:.92rem;

    }

}