:root {
    --bg: #ffffff;
    --bg-grey: rgb(241, 241, 241);
    --text: rgba(0, 0, 0, .92);
    --muted: rgba(0, 0, 0, .68);
    --stroke: rgba(0, 0, 0, .12);
    --identity: rgba(22, 22, 79);
    --identitytwo: rgba(22, 22, 79, 0.03);

    --panel: rgba(0, 0, 0, .03);

    --shadow: 0 18px 60px rgba(0, 0, 0, .45);
    --radius: 16px;
    --page-top-space: 6rem;
    --max: 90%;

    --line-height: 1.3rem;

    /* Layout */
    --header-h: 72px;

    /* Header shrink*/
    --header-height: 80px;
    --header-height-scrolled: 72px;

    /* Logos (mismo tamaño) */
    --logo-size: 22px;
    --logo-size-scrolled: 18px;

    --logo-bk-size: 18px;
    --logo-bk-size-scrolled: 16px;

    --burger-size: 40px;
    --burger-size-scrolled: 34px;

    --burger-pad: 9px;
    --burger-pad-scrolled: 7px;

    --burger-line-h: 2px;
    --burger-gap: 5px;
    --burger-line-w: 100%;

    /* Fonts */
    --font-body: "Lato", sans-serif;
    --font-title: "Times New Roman", Times, serif;
}

.header {
    background-color: rgb(205, 196, 208);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    transition:
        background-color 1.4s ease,
        backdrop-filter 1.4s ease,
        -webkit-backdrop-filter 1.4s ease,
        border-color 1.4s ease,
        box-shadow 1.4s ease,
        height .35s ease;
}

.header.is-scrolled {
    background-color: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    border-bottom-color: rgba(0, 0, 0, .10);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .06);
}