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

.menu {

    display: flex;

    align-items: center;

    gap: 55px;

}


/* =========================
   LISTA
========================= */


.menu__list {

    display: flex;

    align-items: center;

    gap: 8px;

    list-style: none;

    padding: 0;

    margin: 0;

}

.menu__list li {

    position: relative;

    display: flex;

    align-items: center;

}

/* =========================
   LINKS
========================= */




.menu__list a {

    position: relative;

    display: flex;

    align-items: center;


    padding: 6px 10px;


    color: var(--color-black);


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

    font-size: .95rem;

    font-weight: 600;


    text-decoration: none;


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


    transition:

    color .35s ease,

    transform .35s ease,

    text-shadow .35s ease;

}


.menu__list a.active {

    color: var(--color-primary);

    transform: translateY(-1px);

}


.menu__list a:hover {

    color: var(--color-primary);

    transform: translateY(-1px);

    text-shadow: 0 12px 18px rgba(0,0,0,.20);

}


/* =========================
   CTA
========================= */


.menu__actions {

    display: flex;

    align-items: center;

}



.menu__button {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 26px;

    background: var(--color-primary);

    color: var(--color-white);

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

    font-weight: 700;

    font-size: .9rem;

    text-decoration: none;

    border-radius: 6px;

    overflow: hidden;

    transition:

        transform .35s cubic-bezier(.2,.8,.2,1),

        box-shadow .35s ease;

    z-index: 1;

}



/* Reflexo de energia */

.menu__button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background: linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform: skewX(-25deg);

    transition: left .6s ease;

    z-index: -1;

}



.menu__button:hover::before {

    left: 150%;

}



/* Flutuação */

.menu__button:hover {

    transform: translateY(-4px);

    box-shadow:

        0 12px 25px rgba(0,0,0,.25);

}



/* Ícone */

.menu__button i {

    font-size: .75rem;

    transition: transform .3s ease;

}



.menu__button:hover i {

    transform: translateX(6px);

}