/* =========================================================
   NATURIVA
   HEADER DINÁMICO
   ========================================================= */

.header{
    transform:translateY(0);
    transition:
        transform .38s cubic-bezier(.4,0,.2,1),
        background .35s ease,
        box-shadow .35s ease;
    will-change:transform;
}


/* =========================================================
   HEADER OCULTO AL BAJAR
   ========================================================= */

.header.header-oculto{
    transform:translateY(-110%);
}


/* =========================================================
   HEADER VISIBLE AL SUBIR
   ========================================================= */

.header.header-visible{
    transform:translateY(0);
}


/* =========================================================
   ESTADO AL ESTAR DESPLAZADO
   ========================================================= */

.header.header-visible.header-scrolled{

    background:rgba(11,107,58,.94);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 8px 28px rgba(0,0,0,.16);
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:768px){

    .header{
        transition:
            transform .32s cubic-bezier(.4,0,.2,1),
            background .3s ease,
            box-shadow .3s ease;
    }

    .header.header-oculto{
        transform:translateY(-105%);
    }

}