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

.site-header{

    background:#fff;

    border-bottom:1px solid var(--color-border);

    position:sticky;

    top:0;

    z-index:1000;

}

.site-header__inner{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


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

.site-logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.site-logo__icon{

    width:38px;

    height:38px;

    flex:0 0 38px;

}

.site-logo__text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1;

}

.site-logo__top{

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:700;

    letter-spacing:.08em;

    color:var(--color-text);

}

.site-logo__bottom{

    margin-top:2px;

    font-size:.9rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--color-primary);

}



/* NAVEGACIÓN */

.site-nav{

    display:flex;

    gap:2rem;

}

.site-nav a{

    color:var(--color-text);

    font-weight:600;

    transition:.2s;

}

.site-nav a:hover{

    color:var(--color-primary);

}

/* RESPONSIVE */

@media(max-width:768px){

    .site-header__inner{

        height:auto;

        padding:1rem 0;

        flex-direction:column;

        gap:1rem;

    }

}

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



.site-logo__icon{

    width:40px;

    height:40px;

    max-width:none;

    flex-shrink:0;

}

@media (max-width:768px){

    .site-header__inner{

        flex-direction:column;

        gap:1.25rem;

    }

    .site-logo{

        justify-content:center;

    }

    .site-logo__icon{

        width:34px;

        height:34px;

        flex:0 0 34px;

    }

    .site-logo__top{

        font-size:1.6rem;

    }

    .site-logo__bottom{

        font-size:.8rem;

        letter-spacing:.18em;

    }

}