:root {
    --White: #fff;
    --Black-Txt: #232323;
    --Gray-Secondary: #3D3D3D;
    --Gray-Secondary-70: #BDBDBD;
}

#lp-cientistadapele {
    background-color: #100C11;
}

.text-align-center {
    text-align: center !important;
}

.width-100 {
    width: 100% !important;
}

#arte-manipulacao .has-highlight span {
    background: var(--Gradient-4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.btn.btn-outline-white {
    padding: 8px 16px !important;
    border: 1px solid var(--White, #FFF) !important;
}

.uppercase {
    text-transform: uppercase !important;
}
.btn.btn-especialista {
    height: fit-content;
    border: 2px solid var(--button-color-green, #4ADE80);
    color: var(--color-white, #FFF);
    font-size: 18px;
    margin-top: 40px;
}

    .btn.btn-especialista svg {
        margin-left: 10px;
    }

.bg-texto-gradient {
    position: relative;
    display: flex;
    justify-content: end;
}

    .bg-texto-gradient::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0.05em;
        width: 28%;
        height: 2px;
        background: var(--Gradient-4);
        border-radius: 2px;
    }



.lancamentos-lp .padding-section {
    padding: 71px 0;
}

.lancamentos-lp .separator.left {
    border-left: 1px solid var(--Gray-Secondary);
    padding-left: 32px;
}

.lancamentos-lp .separator.right {
    border-right: 1px solid var(--Gray-Secondary);
    padding-right: 32px;
}

.lancamentos-lp .banner {
    padding: 50px;
    background: linear-gradient(249deg, rgba(19, 19, 19, 0.00) 20.29%, rgba(19, 19, 19, 0.92) 69.55%), url(../img/lancamentos/manipulacaoCosmetica/bg-curso.webp) 0px -177.772px / 100% 131.61% no-repeat;
    background-position: center top;
    background-size: cover;
}

    .lancamentos-lp .banner h2 {
        background: var(--Gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 12px 0 16px;
    }

    .lancamentos-lp .banner .btn-white {
        margin-top: 40px;
    }

    .lancamentos-lp .banner span.type {
        border-radius: 6px;
        border: 1px solid var(--Secondary---20, #3D3D3D);
        background: rgba(61, 61, 61, 0.70);
        padding: 2px 12px;
        width: fit-content;
        color: var(--White);
    }

.lancamentos-lp a.btn.btn-white::after {
    content: url('../img/lancamentos/manipulacaoCosmetica/icons/icon-arrow.svg');
    margin-left: 16px;
}

.lancamentos-lp a.btn.btn-white {
    position: relative;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    color: var(--Black-Txt);
    padding: 8px 16px;
    background: var(--White);
    width: fit-content;
}
.lancamentos-lp a.btn.btn-outline {
    position: relative;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    color: var(--White);
    padding: 12px 24px;
    background: transparent;
    width: fit-content;
    border: 1px solid var(--White);
    text-decoration: none!important;
}
/*negando classes de outros arquivos implementados anteriormente*/
.lancamentos-lp .content {
    padding-top: unset !important;
}

.lancamentos-lp #sabermais .modal {
    border-radius: 6px;
}

.lancamentos-lp #sabermais .modal-content {
    background: #131313;
    border-radius: 6px !important;
}

.lancamentos-lp #sabermais button[type=submit] {
    width: 100%;
    border: 1px solid #8C5EE2;
    background: #8C5EE2;
    color: var(--White);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    padding: 8px 16px;
}

.lancamentos-lp .banner .infos {
    margin-top: 147px;
}

.lancamentos-lp .tag,
    .lancamentos-lp .banner .infos .tag {
        position: relative;
        width: fit-content!important;
        border-radius: 8px;
        border: 1px solid var(--Gray-Secondary);
        background: rgba(61, 61, 61, 0.30);
        backdrop-filter: blur(30px);
        padding: 10px 16px;
    }

.lancamentos-lp .banner h6 span {
    color: var(--Gray-Secondary-70);
}

.lancamentos-lp .tag,
.lancamentos-lp .banner .infos .tag b,
.lancamentos-lp .banner .infos span.tag {
    white-space: nowrap;
    min-width: 243.78px;
    /* margin: 5px 0; */
    margin-bottom: 0;
}
.lancamentos-lp .tag{
    min-width: unset;
    margin: 8px 0;
}

.lancamentos-lp .seal {
    border-radius: 6px;
    border: 1px solid rgba(28, 20, 0, 0.40);
    background: rgba(255, 228, 91, 0.32);
    backdrop-filter: blur(16px);
}

.lancamentos-lp #about {
    margin-top: -20px;
    padding: 120px 0;
}

    .lancamentos-lp #about a {
        text-decoration: underline !important;
        color: var(--White);
    }

.lancamentos-lp .wrapper-vimeo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lancamentos-lp #video {
    padding-bottom: 40px;
}

.lancamentos-lp .overlay {
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 0;
    right: 0vw;
    background: linear-gradient(71deg, #1817176b 11.07%, #000000 99.26%);
    background-blend-mode: multiply;
    cursor: pointer;
}

    .lancamentos-lp .overlay.hide {
        display: none !important;
    }

    .lancamentos-lp .overlay img.custom-play {
        width: 50%;
    }

    .lancamentos-lp .overlay .content {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 1;
    }

.lancamentos-lp #conteudo .header-conteudos {
    position: sticky;
    top: 0;
    background: #100C11;
    padding: 16px 0;
    z-index: 99999;
}

.lancamentos-lp #conteudo .tag-info {
    width: fit-content;
    border-radius: 8px;
    border: 1px solid var(--Gray-Secondary);
    background: rgba(61, 61, 61, 0.30);
    backdrop-filter: blur(30px);
    padding: 10px 16px;
    white-space: nowrap;
    transition: ease-in-out .3s all;
}

    .lancamentos-lp #conteudo .tag-info:hover {
        background: rgb(54,53,53);
        background: linear-gradient(90deg, rgba(54,53,53,0.4500175070028011) 65%, rgba(255,255,255,0.1110819327731093) 85%);
        backdrop-filter: blur(30px);
    }

    .lancamentos-lp #conteudo .tag-info:not(:last-of-type) {
        margin-right: 16px;
    }

.lancamentos-lp .modulos ul {
    padding: 0;
    margin-top: 64px;
}

    .lancamentos-lp .modulos ul li:first-of-type {
        padding-bottom: 16px;
    }

.lancamentos-lp .modulos .professores span {
    white-space: nowrap;
    border-radius: 6px;
    padding: 6px 8px;
    border: 1px solid var(--Secondary---40, #707070);
    background: var(--Secondary---20, #3D3D3D);
        margin-bottom: 5px;
}

    .lancamentos-lp .modulos .professores span:not(:last-of-type) {
        margin-right: 16px;
    }

.lancamentos-lp .modulos h5 {
    margin-right: 24px;
}

.lancamentos-lp .modulos .item {
    padding: 16px 8px;
    border-top: 1px solid var(--Secondary---20, #3D3D3D);
    transition: ease-in-out .3s all;
}

    .lancamentos-lp .modulos .item:hover {
        background: #232323;
    }

.lancamentos-lp .modulos .titulo {
    background: var(--Gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lancamentos-lp .modulos p {
    color: var(--Gray-Secondary-70);
    margin: 0;
}

.lancamentos-lp #arte-manipulacao .content {
    margin-top: 40px;
}

.lancamentos-lp #porque-icosmetologia .banner-estudante {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.72) 100%), url(../img/lancamentos/manipulacaoCosmetica/img-estudante.webp) no-repeat center -210px;
    background-size: cover;
    width: 100%;
    height: 420px;
}

.lancamentos-lp #porque-icosmetologia .data-container {
    margin-top: -120px;
}

.lancamentos-lp #porque-icosmetologia .data {
    margin-top: 80px;
}

    .lancamentos-lp #porque-icosmetologia .data .block-border {
        padding-bottom: 1px;
        background: linear-gradient(90deg, rgba(19,19,19,43.800158) 1%, rgba(112,112,112,1) 50%, rgba(19,19,19,-12.2) 99%);
    }

    .lancamentos-lp #porque-icosmetologia .data .block {
        padding: 40px 32px;
        background: #110C10;
        margin-top: 1px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        transition:;
    }

        .lancamentos-lp #porque-icosmetologia .data .block:first-of-type {
            margin-top: 1.5px;
        }

        .lancamentos-lp #porque-icosmetologia .data .block h5:not(.heading-5) {
            font-size: 96px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-right: 32px;
        }

        .lancamentos-lp #porque-icosmetologia .data .block p.light-300 {
            color: var(--Gray-Secondary-70) !important;
        }

        .lancamentos-lp #porque-icosmetologia .data .block h5.purple {
            background: linear-gradient(306deg, #8C5EE2 4.6%, #B599E9 70.99%);
            background-clip: text!important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .lancamentos-lp #porque-icosmetologia .data .block h5.orange {
            background: linear-gradient(84deg, #FF4FAE 22.26%, #FE5757 89.98%);
            background-clip: text!important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .lancamentos-lp #porque-icosmetologia .data .block h5.lilac {
            background: linear-gradient(109deg, #CBB6F2 18.09%, #C8B7ED 62.74%);
            background-clip: text!important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.lancamentos-lp #porque-icosmetologia .icon {
    width: 30px;
    height: 37.644px;
}

.lancamentos-lp #depoimentos {
    background-image: unset;
}

    .lancamentos-lp #depoimentos .depoimento {
        padding: 24px;
        border-radius: 6px;
        border: 1px solid var(--Gray-Secondary);
        background: #262027;
        width: 255px;
        height: fit-content;
        margin: 0 10px;
    }

        .lancamentos-lp #depoimentos .depoimento img {
            width: 28px;
            height: 28px;
            margin-right: 10px;
        }

        .lancamentos-lp #depoimentos .depoimento p {
            color: var(--White);
            text-align: start;
        }
.lancamentos-lp #faq .duvidas {
    border-radius: 4px;
    border: 1px solid var(--Gray-Secondary);
    background: #262027;
    padding: 24px 32px;
}
.lancamentos-lp #faq .banner {
    background: linear-gradient(0deg, #131313 0%, rgba(0, 0, 0, 0.00) 100%), url(../img/lancamentos/manipulacaoCosmetica/bg-cta.webp) 50% / cover no-repeat;
}

.lancamentos-lp #faq .perguntas h5 {
    text-align: center;
}

.lancamentos-lp #faq .perguntas .accordion {
    min-width: 100%;
}

    .lancamentos-lp #faq .perguntas .accordion button {
        color: var(--White);
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        text-decoration: none;
        white-space: normal;
        text-align:left!important;
        width:100%!important;
        align-items: center;
        justify-content: space-between!important;
    }

    .lancamentos-lp #faq .perguntas .accordion .card-header {
        background: transparent;
        border-top: 1px solid #3d3d3d;
        padding: 24px 0;
    }

    .lancamentos-lp #faq .perguntas .accordion button:not(.collapsed) .fas {
        transition: ease-in-out .5s all;
    }

    .lancamentos-lp #faq .perguntas .accordion button:not(.collapsed) .fas {
        transform: rotate(180deg);
        transition: ease-in-out .5s all;
    }

    .lancamentos-lp #faq .perguntas .accordion .card {
        background: transparent;
        width: 100%;
        margin-bottom: 0;
    }

        .lancamentos-lp #faq .perguntas .accordion .card .card-body {
            padding-top: 0;
            background: transparent;
        }


/* Tamanho de textos - Style Guide Icosmetologia 2024 */
.heading-1 {
    font-size: 64px !important;
    line-height: 74px !important;
}

.heading-2 {
    font-size: 56px !important;
    line-height: 66px !important;
}

.heading-3 {
    font-size: 44px !important;
    line-height: 54px !important;
}

.heading-4 {
    font-size: 36px !important;
    line-height: 44px !important;
}

.heading-5 {
    font-size: 28px !important;
    line-height: 34px !important;
}

.heading-6 {
    font-size: 22px !important;
    line-height: 28px !important;
}

.body-xl {
    font-size: 20px !important;
    line-height: 28px !important;
}

.body-lg {
    font-size: 18px !important;
    line-height: 26px !important;
}

.body-md {
    font-size: 16px !important;
    line-height: 24px !important;
}

.body-sm {
    font-size: 14px !important;
    line-height: 22px !important;
}

.body-xs {
    font-size: 12px !important;
    line-height: 18px !important;
}

.light-300 {
    font-weight: 300 !important;
}
.regular-400 {
    font-weight: 400;
}
.medium-500 {
    font-weight: 500 !important;
}

.semibold-600 {
    font-weight: 600 !important;
}
.bold-700 {
    font-weight: 700 !important;
}
/* Fim: Tamanho de textos - Style Guide Icosmetologia 2024 */

@media(min-width:1800px) {
    .lancamentos-lp #porque-icosmetologia .data .block:first-of-type {
        margin-top: 1.5px;
    }
}

@media(max-width: 1200px) {
    .lancamentos-lp #porque-icosmetologia .data .block:first-of-type {
        margin-top: 2px;
    }

    .lancamentos-lp #conteudo .header-conteudos {
        flex-direction: column !important;
        justify-content: start !important;
        align-items: start !important;
    }

    .lancamentos-lp #conteudo .tags {
        margin-top: 32px;
    }

    .lancamentos-lp .banner.hero .infos span.tag:last-of-type {
        margin-left: 0 !important;
    }
}

@media(max-width:1000px) {
    .heading-1 {
        font-size: 56px !important;
        line-height: 66px !important;
    }

    .heading-2 {
        font-size: 44px !important;
        line-height: 54px !important;
    }

    .heading-3 {
        font-size: 36px !important;
        line-height: 44px !important;
    }

    .heading-4 {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    .lancamentos-lp #conteudo .header-conteudos {
        position: relative;
    }
    .lancamentos-lp #about {
        padding: 80px 0;
    }

    .lancamentos-lp .banner h2,
    .lancamentos-lp .banner h6 {
        text-align: center;
    }

    .lancamentos-lp .banner .infos {
        margin-top: 80px;
    }

    .lancamentos-lp .banner a.btn.btn-white {
        width: 100% !important;
    }

    /*.lancamentos-lp .banner {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 434px;
        background: linear-gradient(180deg, rgba(28, 19, 19, 0.00) 3.81%, #131313 82.26%), url(../img/lancamentos/bg-curso-mobile.webp) lightgray 50%;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top center;
    }*/
    .lancamentos-lp #about .separator.left {
        margin-left: 15px;
    }

    .lancamentos-lp #about h4 {
        /* margin-bottom: 95px; */
    }

    .lancamentos-lp #video .container {
        padding: 0 !important;
    }

    .lancamentos-lp .modulos .aula,
    .lancamentos-lp .modulos .professores {
        width: 100%;
    }

    .lancamentos-lp #arte-manipulacao h4 {
        font-size: 36px !important;
        line-height: 46px !important;
    }

    .lancamentos-lp #porque-icosmetologia .banner-estudante {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.72) 100%), url('../img/lancamentos/cientistadapele/Rectangle 11.jpg') no-repeat center top;
        background-size: cover;
        height: 420px;
    }

    .lancamentos-lp #porque-icosmetologia .data {
        margin-top: 40px;
    }

        .lancamentos-lp #porque-icosmetologia .data .block {
            /* margin-top: -4px; */
        }

            .lancamentos-lp #porque-icosmetologia .data .block:first-of-type {
                margin-top: 4px;
            }

            .lancamentos-lp #porque-icosmetologia .data .block h5:not(.heading-5) {
                text-align: center;
                font-size: 72px;
                font-style: normal;
                font-weight: 500;
            }

    .lancamentos-lp #faq .banner {
        background: linear-gradient(0deg, #131313 0%, rgba(0, 0, 0, 0.00) 100%), url(../img/lancamentos/manipulacaoCosmetica/bg-cta-mobile.webp) 50% / cover no-repeat;
        padding: 110px 16px;
    }

    .lancamentos-lp #faq .perguntas h5 {
        text-align: left;
    }

    .lancamentos-lp .modulos .professores span {
        margin: 5px !important;
    }
}


@media(max-width: 700px) {
    .lancamentos-lp .banner .infos span.tag {
        margin-left: -15px !important;
    }

    .lancamentos-lp #video .overlay img {
        width: 70%;
    }

    .lancamentos-lp .banner.hero .infos span.tag:last-of-type {
        margin-left: -15px !important;
    }
}

@media(max-width: 500px) {
    .lancamentos-lp #video .overlay {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

#lp-manipulacao h5.modal-title.heading-6.semibold-600, #lp-manipulacao div {
    color: white;
}
#lp-manipulacao #sabermais {
    z-index: 99999;
}