/* =========================================
   SIDEBAR
========================================= */


.sidebar {

    position: fixed;

    top: 0;
    right: 0;


    width: 380px;

    height: 100vh;


    background:

    linear-gradient(
        160deg,
        var(--color-white),
        var(--color-light)
    );


    border-left:

    2px solid var(--color-primary);



    padding: var(--space-8);


    overflow-y: auto;


    transform: translateX(100%);


    transition:

    transform var(--transition-normal);



    z-index: 30000;


    box-shadow:

    var(--shadow-lg);


    scrollbar-width: none;

}

.sidebar__container {

    display: flex;

    flex-direction: column;

    min-height: 100%;

    box-sizing: border-box;

}

.sidebar::-webkit-scrollbar {

    display: none;

}



.sidebar.active {

    transform: translateX(0);

}

/* =========================================
   OVERLAY
========================================= */


.sidebar__overlay {


    position: fixed;

    inset: 0;


    background:

    rgba(0,0,0,.65);
    

    opacity: 0;


    visibility: hidden;


    transition:

    opacity var(--transition-normal);



    z-index: 20000;

}



.sidebar__overlay.active {

    opacity: 1;

    visibility: visible;

}

/* =========================================
   CLOSE
========================================= */


.sidebar__close {

    position: relative;

    width: 42px;

    height: 42px;


    display: flex;

    align-items: center;

    justify-content: center;


    background: none;

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

    border-radius: 50%;


    cursor: pointer;


    transition:

    transform .3s ease,

    background .3s ease;

}



.sidebar__close span {

    position: absolute;


    width: 18px;

    height: 2px;


    background: var(--color-primary);


    border-radius: 10px;


    transition: all .5s ease;

}



.sidebar__close span:first-child {

    transform: rotate(45deg);

}



.sidebar__close span:last-child {

    transform: rotate(-45deg);

}



.sidebar__close:hover {

    transform: scale(1.08);

    background: var(--color-primary);

    box-shadow:

    0 8px 20px rgba(230,0,0,.35);

}

.sidebar__close:hover span {

    background: var(--color-white);

}

/* =========================================
   SIDEBAR TOP
========================================= */

.sidebar__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:

    var(--space-6);

}

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


.sidebar__logo {


    width: 220px;

    filter:

    drop-shadow(
        0 10px 20px rgba(0,0,0,.35)
    );

}

.sidebar__brand span {


    display:block;



    margin-top:

    var(--space-3);



    font-size:

    var(--text-sm);



    font-weight:700;

}

.sidebar__description {


    margin:

    var(--space-6) 0;


}



.sidebar__description p {


    color:

    var(--color-muted);



    line-height:

    1.7;



    font-size:

    var(--text-sm);

}

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

.sidebar__contacts {

    margin-top: auto;

}

.lider-icon {

    display: flex;

    width: 100%;

    justify-content: space-between;

    align-items: center;

    padding: 0;

    margin: 0;

}

.lider-icon .ic {

    position: relative;

    background: #ffffff;

    border-radius: 50%;

    padding: 15px;

    margin: 10px;

    width: 50px;

    height: 50px;

    font-size: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow:
    0 10px 10px rgba(0,0,0,.1);

    transition:
    all .3s cubic-bezier(.68,-.55,.265,1.55);

}



.lider-icon .nome {

    position: absolute;

    top: 0;

    font-size: 14px;

    background: #ffffff;

    color: #333333;

    padding: 5px 8px;

    border-radius: 5px;

    box-shadow:
    0 10px 10px rgba(0,0,0,.1);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
    all .3s cubic-bezier(.68,-.55,.265,1.55);

}



.lider-icon .nome::before {

    position: absolute;

    content: "";

    height: 8px;

    width: 8px;

    background: #ffffff;

    bottom: -3px;

    left: 50%;

    transform:
    translateX(-50%) rotate(45deg);

}



.lider-icon .ic:hover .nome {

    top: -45px;

    opacity: 1;

    visibility: visible;

}



.lider-icon .ic:hover span,
.lider-icon .ic:hover .nome {

    text-shadow:
    0 -1px 0 rgba(0,0,0,.1);

}

/* =========================
   WHATSAPP
========================= */

.lider-icon .what:hover,
.lider-icon .what:hover .nome,
.lider-icon .what:hover .nome::before {

    background: #25D366;

    color: #ffffff;

}

.lider-icon .what .nome::before {
    background: #25D366;
}

.lider-icon .what i {
    color: #25D366;
}

.lider-icon .what:hover i {
    color: #ffffff;
}

/* =========================
   EMAIL
========================= */

.lider-icon .email:hover,
.lider-icon .email:hover .nome,
.lider-icon .email:hover .nome::before {

    background: #4285F4;

    color: #ffffff;

}

.lider-icon .email .nome::before {
    background: #4285F4;
}


.lider-icon .email i {
    color: #4285F4;
}

.lider-icon .email:hover i {
    color: #ffffff;
}

/* =========================
   MAPS
========================= */

.lider-icon .maps:hover,
.lider-icon .maps:hover .nome,
.lider-icon .maps:hover .nome::before {

    background: #EA4335;

    color: #ffffff;

}

.lider-icon .maps .nome::before {
    background: #EA4335;
}


.lider-icon .maps i {
    color: #EA4335;
}

.lider-icon .maps:hover i {
    color: #ffffff;
}

/* =========================
   SIDEBAR BUTTON
========================= */

.sidebar__button {


    margin-top:

    var(--space-2);



    display:flex;


    align-items:center;


    justify-content:center;


    gap:

    var(--space-3);



    padding:

    16px 28px;



    background:

    var(--color-primary);



    color:

    var(--color-white);



    border-radius:

    var(--radius-md);



    text-decoration:none;



    font-weight:700;



    transition:

    transform var(--transition-fast),

    background var(--transition-fast),

    box-shadow var(--transition-fast);

}



.sidebar__button:hover {


    background:

    var(--color-primary-hover);



    transform:

    translateY(-4px);



    box-shadow:

    0 15px 30px rgba(230,0,0,.35);

}

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


.sidebar__menu {

    display: flex;

    flex-direction: column;

    gap: var(--space-2);

    width: 100%;

    margin: var(--space-6) 0;

}

.sidebar__menu {

    list-style: none;

    padding: 0;

    margin: 0;

}

.sidebar__menu a {

    display: flex;

    align-items: center;

    gap: 12px;


    width: 100%;


    padding: 12px 16px;


    color: var(--color-black);

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

    font-size: var(--text-sm);

    font-weight: 600;


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


    transition:

    background var(--transition-fast),

    color var(--transition-fast),

    transform var(--transition-fast);

}



.sidebar__menu a i {

    color: var(--color-primary);

    font-size: var(--icon-md);

}



.sidebar__menu a:hover {


    background:

    rgba(230,0,0,.12);


    color: var(--color-primary);


    transform: translateX(6px);

}

.sidebar__menu a {

    position: relative;

}


.sidebar__menu li {

    position: relative;

}


.sidebar__menu li:not(:last-child)::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: rgba(0,0,0,.08);

}


.sidebar__menu a {

    display: block;

    padding: 15px 10px;

    transition: transform .3s ease;

}


.sidebar__menu a:hover {

    transform: translateX(8px);

}

/* =========================================
   SIDEBAR ADS
========================================= */


.sidebar__ads {

    display: flex;

    flex-direction: column;

    gap: var(--space-5);

    width: 100%;

    margin: var(--space-6) 0 var(--space-8) 0;

}





/* =========================================
   SIDEBAR CARD
========================================= */


.sidebar__card {


    overflow: hidden;


    background:

    var(--color-light);


    border:

    1px solid var(--color-primary);


    border-radius:

    var(--radius-lg);


    box-shadow:

    var(--shadow-sm);


    transition:

    transform var(--transition-normal),

    box-shadow var(--transition-normal),

    border-color var(--transition-normal);

}





.sidebar__card img {


    width: 100%;


    height: 150px;


    object-fit: cover;


}





.sidebar__card div {


    padding: var(--space-5);

}





.sidebar__card h3 {


    color:

    var(--color-primary);


    font-family:

    var(--font-heading);


    font-size:

    var(--text-lg);


    margin-bottom:

    var(--space-3);

}





.sidebar__card p {


    color:

    var(--color-muted);


    font-family:

    var(--font-body);


    font-size:

    var(--text-sm);


    line-height:

    1.6;

}





.sidebar__card:hover {


    transform:

    translateY(-5px);


    border-color:

    var(--color-highlight);


    box-shadow:

    var(--shadow-md);

}

/* =========================================
   Responsivo
========================================= */

@media(max-width:1024px){

    .sidebar__ads {
        display: none;
    }

    .sidebar__brand {
        display: none;
    }

    .sidebar__description {
        display: none;
    }

    .sidebar__container {

        display: flex;

        flex-direction: column;

    }


    .lider-icon {

        margin-top: auto;

    }

    .sidebar__contacts {

        margin-top: 40px;

    }

}

@media(min-width:1024px){
    .sidebar__menu {
        display: none;
    }
}