/* -- Sticky -- */
.sticky-1 {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 50px;
}

.sticky-2 {
    position: sticky;
    height: 80px;
    top: 48px;
    z-index: 10;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

@media (max-width: 768px) {
    .sticky-2_ {
        top: 44px;
    }
}

.sticky-2-filler {
    height: 80px;
    /* same height as sticky-2 */
}

.sticky-2.scrolled {
    background-color: var(--color-primary);
    border-top: 2px solid var(--color-primary);

}

.banner-shift {
    margin-top: -80px;
    position: relative;
}

/* ==== Generic and Video ==== */
.header-bg {
    position: relative;
    background-color: var(--color-primary);
    min-height: 350px;
    overflow: hidden;
    clip-path: ellipse(85% 100% at 50% 0%);
    padding-bottom: 50px;
}

.header-bg-vid {
    position: relative;
    min-height: 350px;
    overflow: hidden;
    clip-path: ellipse(85% 100% at 50% 0%);
    padding-bottom: 50px;
}

.header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fills container like background-size: cover */
    z-index: -1;
    /* stays behind */
}

@media (max-width: 1056px) {
    .header-bg {
        position: relative;
        background-color: var(--color-primary);
        min-height: 350px;
        overflow: hidden;
        clip-path: ellipse(160% 92% at 50% 0%);
        padding-bottom: 50px;
    }

    .header-bg-vid {
        position: relative;
        min-height: 350px;
        overflow: hidden;
        clip-path: ellipse(160% 92% at 50% 0%);
        padding-bottom: 50px;
    }
}

/* Overlay escuro */
.header-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Conteúdo por cima */
.header-bg > * {
    position: relative;
    z-index: 1;
}




/* ==== Home ==== */
.header-bg-home {
    background: url('/images/ver3/banners/1.jpg') center calc(50% - 56px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-home {
        background-position: center calc(50%);
        background-size: cover;
    }
}

.header-bg-home::before {
    background: rgba(0, 0, 0, 0.25);
    /* escurece */
}

/* ==== Residencial ==== */
.header-bg-residencial {
    background: url('/images/ver3/banners/2.jpg') center calc(50% - 230px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-residencial {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

/* Overlay escuro */
.header-bg-residencial::before {
    background: rgba(0, 0, 0, 0.35);
    /* escurece */
}

/* ==== Empresas ==== */
.header-bg-empresarial {
    background: url('/images/ver3/banners/4.jpg') center calc(50% - 150px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-empresarial {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

/* Overlay escuro */
.header-bg-empresarial::before {
    background: rgba(0, 0, 0, 0.45);
    /* escurece */
}

/* ==== como funciona ==== */
.header-bg-como-funciona {
    background: url('/images/ver3/banners/5.jpg') center calc(50% + 18px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-como-funciona {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

/* Overlay escuro */
.header-bg-como-funciona::before {
    background: rgba(0, 0, 0, 0.5);
    /* escurece */
}

/* ==== simular  poupanca ==== */
.header-bg-sim-poup {
    background: url('/images/ver3/banners/6.jpg') center calc(50% + 120px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-sim-poup {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

/* Overlay escuro */
.header-bg-sim-poup::before {
    background: rgba(0, 0, 0, 0.5);
    /* escurece */
}

/* ==== alertas ==== */
.header-bg-alertas {
    background: url('/images/ver3/banners/7.jpg') center calc(50% - 20px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-alertas {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-alertas::before {
    background: rgba(0, 0, 0, 0.5);
}

/* ==== ... ==== */
.header-bg-3 {
    background: url('/images/ver3/banners/3.jpg') center calc(50% - 20px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-3 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-3::before {
    background: rgba(0, 0, 0, 0.5);
}


.header-bg-8 {
    background: url('/images/ver3/banners/8.jpg') center calc(50% - 20px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-8 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-8::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-9 {
    background: url('/images/ver3/banners/9.jpg') center calc(50% + 110px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-9 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-9::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-10 {
    background: url('/images/ver3/banners/10.jpg') center calc(50% + 25px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-10 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-10::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-11 {
    background: url('/images/ver3/banners/11.jpg') center calc(50% - 0px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-11 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-11::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-12 {
    background: url('/images/ver3/banners/12.jpg') center calc(100% + 24px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-12 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-12::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-13 {
    background: url('/images/ver3/banners/13.jpg') center calc(50% - 20px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-13 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-13::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-14 {
    background: url('/images/ver3/banners/14.jpg') center calc(50% - 20px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-14 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-14::before {
    background: rgba(0, 0, 0, 0.5);
}

.header-bg-15 {
    background: url('/images/ver3/banners/15.jpg') center calc(50% + 50px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-15 {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

.header-bg-15::before {
    background: rgba(0, 0, 0, 0.5);
}

.pre-footer-btn {
    min-width: 212px;
}

.home-two-btns {
    min-width: 195px;
}


/* ==== landing   ==== */
.header-bg-smile {
    position: relative;
    background-color: var(--color-primary);
    min-height: 350px;
    overflow: hidden;
    clip-path: ellipse(115% 95% at 50% 0%);
    padding-bottom: 50px;
}

@media (max-width: 1056px) {
    .header-bg-smile {
        position: relative;
        background-color: var(--color-primary);
        min-height: 350px;
        overflow: hidden;
        clip-path: ellipse(160% 95% at 50% 0%);
        padding-bottom: 50px;
    }
}

@media (max-width: 960px) {
    .header-bg-smile {
        position: relative;
        background-color: var(--color-primary);
        min-height: 350px;
        overflow: hidden;
        clip-path: ellipse(190% 95% at 50% 0%);
        padding-bottom: 50px;
    }
}

.header-bg-land {
    background: url('/images/ver3/landing/landingpanel.jpg') center calc(50% - 30px)/cover no-repeat;
}

@media (max-width: 1024px) {
    .header-bg-land_ {
        background-position: center calc(50% - 20px);
        background-size: cover;
    }
}

/* Overlay escuro */
.header-bg-land::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* Conteúdo por cima */
.header-bg-land > * {
    position: relative;
    z-index: 1;
}