/* Variáveis Raiz */
:root {
    /* Cores Principais*/
    --cor-neutra: #F2F2F2;
    --cor-neutra-clara: #F7F7F7;
    --cor-cinza: #D9D9D9;
    --cor-preta: #262626;
    --cor-detalhes-light: #e6b8b8;
    --cor-detalhes: #C87D88;
    --cor-detalhes-dark: #af4a59;
    --cor-verde-dark: #59af4a;
    --cor-verde: #88c87d;
    --cor-ig-bg: #EFEFEF;

    --gradient-color: linear-gradient(112deg, #C87D88, #e6b8b8 50%, #af4a59);
    
    
    

    /*Fonte*/
    --font-family-segoe: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;


    /* gutter */
    --gap-xxl: 244px;
    --gap-xl: 120px;
    --gap-l: 64px;
    --gap-m: 56px;
    --gap-s: 32px;
    --gap-xs: 16px;
    --gap-xxs: 8px;

    /* hover transitions */
    --hover-opacity: 0.6;
    --hover-transition: all 0.2s ease-out;
    --hover-transform: translateY(-4px);

    /* box-shadow */
    --box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}


/* Configurações Gerais */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-display: swap;
    font-size: 1rem;
    line-height: 1.6rem;
    color: var(--cor-preta);
}

*::before,
*::after {
    box-sizing: border-box;
}

html, body{
    height: 100%;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    background-color: var(--cor-neutra);
}

body#body_promo{
    background-color: var(--cor-preta);
}


ul, li{
    list-style-type: none;
}

img, i, button{
    user-select: none;
    -webkit-user-select: none; /* Para navegadores que utilizam o motor Webkit, como o Safari */
    -moz-user-select: none; /* Para navegadores Firefox */
    -ms-user-select: none; /* Para o Internet Explorer */
}


/* Fontes */

html {font-size: 100%;} /*16px*/

p {margin-bottom: 1rem;}

h1, h2, h3, h4, .h1, .h2, .h3, .h4{
    font-weight: 900;
    line-height: 1.3;
}


h5, h6, .h5, .h6{
    line-height: 1.3;
}


h1, .h1{
    font-size: 2.986rem;

}

h2, .h2{
    font-size: 2.488rem;
}

h3, .h3{
    font-size: 2.074rem;
}

h4, .h4{
    font-size: 1.728rem;
}

h5, .h5{
    font-size: 1.44rem;
}

h6, .h6{
    font-size: 1.2rem;
}

.small_text{
    font-size: 0.833rem;
}

.smaller_text{
    font-size: 0.0.694rem;
}

p{
    font-size: 1rem;
}

a, a:hover, a:active{
    text-decoration: none;
}







/* ScrollBar */
::-webkit-scrollbar {
    width: 16px; /* Largura da barra de rolagem */
    height: 8px; /* Altura da barra de rolagem horizontal */
}

::-webkit-scrollbar-track {
    background: var(--cor-neutra); /* Cor do fundo da barra de rolagem */
}

::-webkit-scrollbar-thumb {
    background: var(--cor-cinza); /* Cor do polegar da barra de rolagem */
    border: 1px solid var(--cor-neutra-clara); /* Espaçamento ao redor do polegar */
}

::-webkit-scrollbar-thumb:hover {
    opacity: var(--hover-opacity);
}

/* Estilizando a scrollbar no Firefox */
* {
    scrollbar-width: thin; /* Largura fina para a barra de rolagem */
    scrollbar-color: var(--cor-cinza) var--(cor-preta); /* Cor do polegar e do fundo da barra */
}

/* Estilizando a scrollbar no Edge */
@supports (-ms-overflow-style: none) {
    * {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

/* Botoes e Links */
.button {
    width: 100%;
    position: relative;
    padding: var(--gap-xxs) var(--gap-s);
    cursor: pointer;
    text-align: center;
    border: none;
    outline: none;
    transition: var(--hover-transition);
    border-radius: 8px;
    overflow: hidden;
}



/*Creating the light source, this is the magic*/
.button_color_main::after, .button_color_highlight::after{
    background: var(--cor-neutra-clara);
    content: '';
    height: 155px;
    position: absolute;
    left: -75px;
    top: -50px;
    opacity: .8;
    transform: rotate(35deg);
    width: 50px;
    transition: all 1s cubic-bezier(.175, .52, .165, 1);
    z-index: 1;
}

/*Hover to cause the effect*/
.button_color_main:hover::after, .button_color_highlight:hover::after{
    background: var(--cor-neutra-clara);
    opacity: 0;
    left: 120%;
    transform: rotate(40deg);
} 


.button_color_main {
    color: var(--cor-neutra);
    background-color: var(--cor-preta);
}

.button_color_main span{
    transition: all.2s ease-out;
    z-index: -2;
    color: var(--cor-neutra);
}

.button_color_highlight {
    color: var(--cor-preta);
    background-color: var(--cor-verde);
    font-weight: bold;
}

.button_color_highlight span {
    transition: all.2s ease-out;
    z-index: -2;
    color: var(--cor-preta);
}

.button_color_secundary {
    color: var(--cor-preta);
    border: 1px solid var(--cor-preta);
    background-color: var(--cor-neutra);
}

.button_color_secundary{
    margin-top: var(--gap-xs);
}


.button_color_main:hover, .button_color_highlight:hover, .button_color_secundary:hover{
    opacity: var(--hover-opacity);
    transform: var(--hover-transform);
}



a{
    transition: var(--hover-transition);
    cursor: pointer;
}

a:hover{
    opacity: var(--hover-opacity);
    transform: var(--hover-transform);
    text-decoration: none;
}



/* Ajustes para desktop */
@media screen and (min-width: 881px) and (orientation: landscape) {
    .button {
        width: auto;
    }

    .button_color_highlight{
        font-size: 18px;
    }

    .nav_bar .button_color_highlight{
        font-size: initial;
    }


}



/* Framwork */

.fade-in-element, .fade-in-slide-up{
    opacity: 0;
}

.fade-in-slide-up {
    position: relative;
    transform: translateY(56px); /* Mover para baixo */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Transição suave para a animação */
}

.playfair {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

.highlight{
    font-weight: bold;
}

.italic{
    font-style: italic;
}

.pink{
    color: var(--cor-detalhes-dark)
}

.pink_claro{
    color: var(--cor-detalhes-light)
}

.gradient_fill {
    background-image: var(--gradient-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -2px;
}

.black{
    font-weight: 900;
}

.green{
    color: var(--cor-verde-dark)
}

.seta{
    color: var(--cor-cinza);
    transform: translateX(-50%);
}

.cinza{
    color: var(--cor-cinza)
}


.desktop, .desktop_flex{
    display: none !important;
}

.mobile{
    display: grid !important;
}


.mobile_flex{
    display: block !important;
}




.testimonial_content{
    display: grid;
    position: relative;
    align-content: center;
    justify-content: start;
    background-color: white;
    padding: 4px;
    margin: 0 var(--gap-s);
    
}

.testimonial_content *{
    user-select: none;
}


.testimonial_content span{
    border-radius: 18px 18px 18px 4px;
    background-color: var(--cor-ig-bg);
    padding: var(--gap-s);
    transition: var(--hover-transition);
    font-weight: normal;
    font-size: .9375rem;
    font-family: var(--font-family-segoe);
    padding: 7px 12px;
}

.balao{
    height: 22px;
    top: -4px;
    left: 1px;
    width: 32px;
    z-index: 1;
    max-width: 100%;
    position: relative;
    background-color: var(--cor-ig-bg);
    border-radius: 11px;
    padding: 0 6px;
    border: 2px solid white;
    font-size: .75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}



a.card_link:hover{
    opacity: 0.9;
    box-shadow: var(--box-shadow);
    transform: var(--hover-transform);
    border-bottom: 1px solid var(--cor-detalhes);
    border-right: 1px solid var(--cor-detalhes);
    cursor: pointer;
}

a.card_link{
    margin-top: var(--gap-m);
    display: flex;
    flex: 1;
}


.cards_container{
    display: flex;
    flex-direction: column;
    grid-column: 1 / span 8;
}

.card{
    display: grid;
    border-bottom: 1px solid var(--cor-cinza);
    padding: var(--gap-s);
    transition: var(--hover-transition);
    position: relative;

}

/*Creating the light source, this is the magic*/
.card_link::after{
    background: var(--cor-cinza);
    content: '';
    height: 1100px;
    position: absolute;
    left: -500px;
    top: -200px;
    opacity: .8;
    transform: rotate(20deg);
    width: 150px;
    transition: all 0.7s cubic-bezier(.175, .52, .165, 1);
    z-index: 1;
}

/*Hover to cause the effect*/
.card_link:hover::after {
    background: var(--cor-cinza);
    opacity: 0;
    left: 120%;
    transform: rotate(20deg);
}

.card_link{
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}



.card_link#unique_content{
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 30%, rgba(38,38,38,0) 75%), 
        url('../images/mobile.webp');
    background-size: cover;
    background-position: bottom;
}

.card_link#mentoria{
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 30%, rgba(38,38,38,0) 75%), 
        url('../images/heels3.webp');
    background-size: cover;
    background-position: bottom;
}



.button_products{
    background-color: var(--cor-detalhes-light);
    color: var(--cor-preta);
    border-bottom: 1px solid var(--cor-cinza);
}


.card:hover .button_products{
    background-color: var(--cor-preta);
    color: var(--cor-neutra);
}


.card .features_img_title, .features_no_img_title{
    margin-bottom: var(--gap-s);
}



.card .card_description{
    margin-top: var(--gap-xxl);
}


.card_description h6{
    color: var(--cor-neutra-clara);
}

.card_description h6.normal{
    margin-top: var(--gap-xs);
}

.card .card_cta{
    margin-top: var(--gap-s);
}

.feature_wrap{
    grid-column: 1 / span 8;
    display: flex;
    flex-direction: column;
    margin-top: var(--gap-m);
}

.feature{
    position: relative;
}

.feature:not(:first-child){
    margin-top: var(--gap-l);
}

.feature .feature_title{
    background-color: var(--cor-preta);
    padding: var(--gap-xs);
    border-radius: 8px;
    text-align: center;
    margin-top: var(--gap-xs);
}

.feature .feature_title h6{
    color: var(--cor-neutra-clara);
}

.feature .feature_description{
    margin-top: var(--gap-s);
}

.feature_tag{
    text-align: center;
    color: var(--cor-detalhes);
    font-size: 32px;
    margin-bottom: var(--gap-m);
}

.feature_tag span{
    font-size: 64px;
}




@media screen and (min-width: 881px) and (orientation: landscape) {
    .desktop{
        display: grid !important;
    }

    .desktop_flex{
        display: block !important;
    }

    .mobile, .mobile_flex{
        display: none !important;
    }

    .cards_container{
        gap: 32px;
        justify-content: space-between;
        flex-direction: row;
        grid-column: 3 / span 8;
        margin-top: var(--gap-xs);
        display: flex;

    }

    .feature_wrap{
        grid-column: 3 / span 8;
        flex-direction: row;
        justify-content: space-between;
    }

    .feature{
        width: 30%;
    }

    .feature:not(:first-child){
        margin-top: 0;
    }


    .testimonial_content{
        margin: 0;
    }


}


/* Estruturas */

.standard_grid{
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
    width: 88vw;
    margin: 0 auto;
    display: grid;
    position: relative;
    max-width: 100%;
}

.standard_grid_hero{
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
    display: grid;
    position: relative;
    max-width: 100%;
}

.standard_grid_hero .img_bg, .standard_grid_hero .subtitle, .standard_grid_hero .cta, .standard_grid_hero .content{
    padding-left: 6vw;
    padding-right: 6vw;
}

.standard_grid_hero .content .cta{
    padding-left: 0;
    padding-right: 0;
}

.standard_grid_absolute{
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    height: 100%;
    position: absolute;
    column-gap: var(--gap-xs);
    display: none;
}

.separador{
    grid-column: 1 / span 8;
    height: 2px;
    background-color: var(--cor-cinza);
    margin: var(--gap-l) 0;
}



@media screen and (min-width: 881px) and (orientation: landscape) {

    .section{
        margin-top: var(--gap-xl);
    }

    .standard_grid{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        column-gap: var(--gap-xs);
        grid-template-columns: repeat(12, 1fr);
    }

    .standard_grid_hero{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        column-gap: var(--gap-xs);
        grid-template-columns: repeat(12, 1fr);
    }
    
    .standard_grid_hero .img_bg, .standard_grid_hero .subtitle, .standard_grid_hero .cta, .standard_grid_hero .content{
        padding-left: 0;
        padding-right: 0;
    }

    .standard_grid_absolute{
        width: 100%;
        height: 100%;
        display: grid;
        position: absolute;
        column-gap: var(--gap-xs);
        grid-template-columns: repeat(12, 1fr);
    }

}


/* Nav Bar */

header{
    background-color: var(--cor-neutra);
    box-shadow: var(--box-shadow);
}

header#nav_2{
    background-color: var(--cor-preta);
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15%, var(--cor-detalhes) 50%, rgba(255,255,255,0) 85%, rgba(255,255,255,0) 100%) 1;;
}

header#nav_2 .nav_bar{
    padding: var(--gap-xxs) 0;
}


header#nav_2 .nav_bar .logo img {
    height: 100%;
    max-height: 40px;
    width: 100%;
}

.nav_bar {
    align-items: center;
    padding: var(--gap-xs) 0;
    z-index: 4;
}


.nav_bar.fixed {
    position: fixed;
    top: 0;
}




/* Logo */
.nav_bar .logo {
    grid-column: 4 / span 2;
    justify-self: center;
    z-index: 2;
}

.nav_bar .logo img {
    height: 100%;
    max-height: var(--gap-m); /* Ajuste conforme necessário */
}

.nav_button{
    display: none;
}

/* Links de navegação */
.nav_bar .nav_links {
    display: none; /* Oculto no mobile */
    width: 100vw;
    height: auto;
    border-bottom: var(--cor-primaria) 1px solid;
}

.menu_mobile{
    display: none;
    text-transform: uppercase;
    text-align: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    color: var(--cor-preta);
    background-color: var(--cor-neutra);
    padding-top: 88px;
    z-index: 1;
}

.menu_mobile li{
    padding: var(--gap-s);
    border-bottom: 1px solid var(--cor-preta);
}

.menu_mobile li a{
    color: var(--cor-preta);
}

.nav_bar .nav_links li {
    display: inline;
    margin: 0 var(--gap-s);
}

.nav_bar .nav_links a {
    text-decoration: none;
    color: var(--cor-preta);
    text-transform: uppercase;
}

/* Ícone do menu */
.nav_bar .menu_icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 24px;
    cursor: pointer;
    grid-column: 8 / span 1;
    justify-self: end;
    transition: var(--hover-transition);
    z-index: 2;
}

.nav_bar .menu_icon:hover{
    opacity: var(--hover-opacity);
}

.nav_bar .menu_icon div {
    width: 100%;
    height: 2px;
    background-color: var(--cor-preta);
}

/* Ajustes para desktop */
@media screen and (min-width: 881px) and (orientation: landscape) {
    .nav_bar .logo{
        grid-column: 3 / span 2;
        justify-self: start;
    }

    .nav_bar .nav_links {
        grid-column: 5 / span 4;
        width: 100%;
        justify-self: center;
        display: flex;
    }

    .nav_bar .menu_icon {
        display: none; /* Oculto no desktop */
    }

    .nav_button{
        display: grid;
        grid-column: 8 / span 3;
        justify-self: end;
    }
}


/* -------------------------------------------PÁGINA INDEX------------------------------------------- */

/* Sessão Header */


#header .img_bg {
    grid-column: 1 / span 8;
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 25%, rgba(38,38,38,0) 90%), 
        url('../images/angela_home_reduzida.webp');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%; /* Largura total do contêiner pai */
    height: 680px;
    align-items: end;
    display: grid;
    position: relative;
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
    padding-bottom: var(--gap-s);
}


#header .statement {
    grid-column: 1 / span 8;
    z-index: 1; /* Coloca a imagem atrás */
    text-transform: uppercase;
}

#header .statement h1{
    color: var(--cor-neutra-clara);
}



#header .subtitle_mobile, #header .cta_mobile{
    display: initial;
}

#header .subtitle_desktop, #header .cta_desktop{
    display: none;
}


#header .subtitle_mobile, #header .cta_mobile {
    z-index: 1; /* Coloca a imagem atrás */
    grid-column: 1 / span 8;
}

#header .subtitle_mobile{
    margin-top: var(--gap-l);
}

#header .cta_mobile{
    margin-top: var(--gap-m);
}

#header h6{
    font-weight: normal;
}


@media screen and (min-width: 881px) and (orientation: landscape) {
    #header{
        margin-top: 0;
        background-color: var(--cor-cinza);
        position: relative;
        z-index: 1;
    }


    #header .statement {
        background: transparent;
        grid-column: 7 / span 4;
        height: auto;
        padding: 0 0 0 var(--gap-s);
        font-size: 72px;
        line-height: 1.1;
        margin: var(--gap-m) 0 var(--gap-xxs) 0;
    }

    #header .statement h1{
        color: var(--cor-preta);
    }

    #header .subtitle_mobile, #header .cta_mobile{
        display: none;
    }

    #header .subtitle_desktop, #header .cta_desktop{
        display: initial;
    }

    #header .subtitle_desktop, #header .cta_desktop {
        grid-column: 7 / span 4;
        padding-left: var(--gap-s);
    }

    #header .subtitle_desktop{
        margin-top: var(--gap-s);
    }

    #header .statement h1{
        background-color: transparent;
        backdrop-filter: none; /* Ajuste o valor conforme necessário */
        -webkit-backdrop-filter: none; /* Para suporte em navegadores WebKit */
        font-size: 64px;
    }

    #header .cta_desktop {
        margin: var(--gap-s) 0 var(--gap-m) 0;
    }

    #header .img_bg {
        grid-column: 1 / span 6;
        height: 100%;
        position: absolute;
        background-image: url('../images/angela_home_reduzida.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }

    #header .legenda{
        grid-column: 3 / span 4;
    }

}


/* Sessão Produtos */

#produtos .img_bg {
    display: none;
}

#produtos .menu_tag{
    grid-column: 1 / span 2;
}

#produtos .subtitle{
    grid-column: 1 / span 8;
    margin-top: var(--gap-l);
}





@media screen and (min-width: 881px) and (orientation: landscape) {
    #produtos .img_bg {
        grid-column: 9 / span 2;
        width: 100%;
        height: 88%;
        background-image: url('../images/bg_session_produtos.webp');
        background-position: center;
        background-size: cover;
        display: grid;
        position: absolute;
        z-index: 0;
        opacity: 1;
    }

    #produtos .menu_tag {
        grid-column: 3 / span 2;
    }

    #produtos .subtitle {
        grid-column: 3 / span 6;
        margin-top: var(--gap-xs);
    }

}


/* Sessão Conteúdo */

#conteudo .img_bg{
    display: grid;
    grid-column: 1 / span 8;
    background-image: url('../images/bg_session_conteudo.webp');
    background-size: 100%;
    background-position: 0 55%;
    width: 100%;
    height: 120px;

}

#conteudo .menu_tag{
    align-self: end;
    justify-self: end;
    text-align: right;
    grid-column: 7 / span 2;
    margin-bottom: var(--gap-s);
}

#conteudo .statement{
    grid-column: 1 / span 8;
    margin-top: var(--gap-l);
}


.youtube_player{
    background-color: var(--cor-preta);
    grid-column: 1 / span 8;
    margin-top: var(--gap-m);
    padding: var(--gap-s);
    border-radius: 8px;
}


.youtube_player iframe {
    width: 100%;
    height: auto;
    transition: var(--hover-transition);
}


.youtube_player iframe:hover {
    opacity: var(--hover-opacity);
}

.video_details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.video_details .video_title{
    color: var(--cor-neutra);
    margin-top: var(--gap-m);
}

.video_details .video_author{
    margin-top: var(--gap-xs);
    color: var(--cor-cinza);
}

#conteudo .social_media{
    display: flex;
    grid-column: 1 / span 8;
    margin-top: var(--gap-m);
    justify-content: space-evenly;
    align-items: center;
}

#conteudo .social_media img{
    width: var(--gap-s);
}

.video_hide, .video_hide_block, .video_hide_flex, #nav_cta_original, #video_mentoria {
    display: none;
}



@media screen and (min-width: 881px) and (orientation: landscape) {
    #conteudo{
        background-color: var(--cor-cinza);
        padding: var(--gap-l) 0;
    }

    #conteudo .img_bg {
        display: none;
    }

    #conteudo .menu_tag {
        grid-column: 10 / span 1;
        transform: rotate(-90deg) translateY(150%) translateX(0);
        margin-bottom: 0;
    }

    #conteudo .statement {
        grid-column: 3 / span 6;
        margin-top: 0;
    }

    .youtube_player {
        grid-column: 4 / span 6;
        display: inline-flex;
    }

    .youtube_player iframe {
        height: 100%;
        width: auto;
    }

    .youtube_player .video_details{
        width: 100%;
        height: 100%;
        padding: var(--gap-xs) var(--gap-xs) 0 var(--gap-xs);
    }

    .video_details .video_title{
        margin-top: 0;
    }

    #conteudo .social_media{
        flex-direction: column;
        grid-column: 10 / span 1;
        justify-content: space-around;
        align-items: flex-start;
    }

}



/* Sessão Sobre Mim */


#sobremim .menu_tag{
    grid-column: 7 / span 2;
    align-self: end;
    text-align: right;
}

#sobremim .img_bg{
    grid-column: 1 / span 7;
    display: grid;
    background-image: url('../images/bg_session_sobremim.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 440px;
}

#sobremim .content{
    grid-column: 1 / span 8;

}

#sobremim .statement{
    margin-top: var(--gap-m);
    align-self: end;
    text-align: right;

}

#sobremim .subtitle{
    margin-top: var(--gap-m);
}

#sobremim .subtitle p{
    margin-top: var(--gap-s);
}

@media screen and (min-width: 881px) and (orientation: landscape) {
    #sobremim .menu_tag{
        grid-column: 3 / span 1;
        align-self: start;
        text-align: left;
        transform: rotate(-90deg) translateY(-250%);
    }

    #sobremim .img_bg{
        grid-column: 3 / span 4;
        width: auto;
        height: 100%;
        align-self: center;
        background-position: left;
        background-repeat: no-repeat;
    }

    #sobremim .content{
        grid-column: 7 / span 4;
        padding-left: var(--gap-s);

    }

    #sobremim .statement, #sobremim .subtitle {
        align-self: start;
        text-align: left;
    }

    #sobremim .bg_absolute{
        background-color: var(--cor-neutra-clara);
        grid-column: 1 / span 5;
        height: 88%;
        width: 100%;
        position: absolute;
        top: 16%;
        z-index: 0;
    }
}


/* Sessão HashTags */

#hashtags {
    margin-bottom: var(--gap-l);
}

.tag-list {
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-shrink: 0;
    gap: 1rem 0;
    position: relative;
    padding-bottom: var(--gap-xs);
    overflow: hidden;
}

.video_frame .tag-list{
    position: absolute;
    top: 0;
    padding-bottom: 0;
}

.loop-slider .inner {
    display: flex;
    animation-name: loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--direction);
    animation-duration: var(--duration);
}

.tag {
    display: flex;
    white-space: nowrap;
    align-items: center;
    font-weight: bold;
    font-size: 2.986rem;
    color: var(--cor-preta);
    padding: var(--gap-s);
    margin-right: 1rem; /* Must use margin-right instead of gap for the loop to be smooth */
}


.video_frame .tag-list .tag{
    padding-top: 2px;
}

.video_frame svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15%;

}

.shine-effect {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shine 7s ease-out infinite; 
  }

  @keyframes shine {
    0% {
        left: -120%;
    }
    20% {
        left: 120%;
    }
    100% {
        left: 120%; /* Fica parado no final da animação */
    }
}

.fade {
    pointer-events: none;
    position: absolute;
    inset: 0;
}

@keyframes loop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.3%);
    }
}


/* Footer */


.footer_container{
    background-color: var(--cor-preta);
    width: 100%;
}

footer{
    padding: var(--gap-m) 0;
    align-items: center;
}

footer p, footer span{
    color: var(--cor-neutra);
}

footer .direitos{
    grid-column: 1 / span 4;
    margin-top: var(--gap-m);
}

footer .social_media{
    grid-column: 1 / span 8;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--cor-neutra);
    margin-top: var(--gap-m);
}

footer .social_media img{
    width: 24px;
}

footer a.voltar_ao_inicio_da_pagina{
    grid-column: 1 / span 8;
    color: var(--cor-neutra);
}

footer .creditos{
    grid-column: 1 / span 8;
    margin-top: var(--gap-s);
}

footer .voltar{
    cursor: pointer;
    display: inline-flex;
    transition: var(--hover-transition);
}

footer .voltar:hover{
    opacity: var(--hover-opacity);
    transform: var(--hover-transform);
}

footer .voltar img{
    width: 16px;
    margin-right: var(--gap-xxs);
}



@media screen and (min-width: 881px) and (orientation: landscape) {
    footer .direitos{
        grid-column: 3 / span 2;
        margin-top: 0;
    }

    footer .social_media{
        grid-column: 6 / span 2;
        margin-top: 0;
    }

    footer a.voltar_ao_inicio_da_pagina{
        grid-column: 9 / span 2;
    }

    footer .creditos{
        grid-column: 1 / span 12;
        justify-self: center;
        margin-top: 0;
    }

    footer .creditos p{
        text-align: center;
    }

    footer .voltar{
        
        text-align: right;
        justify-self: end;
    }

    .voltar_mobile{
        display: none !important;
    }

}




/* -------------------------------------------LP UNIQUE CONTENT------------------------------------------- */

/* Sessão Hero */

#hero .img_bg {
    grid-column: 1 / span 8;
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 25%, rgba(38,38,38,0) 90%), 
        url('../images/angela_unique_reduzida.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%; /* Largura total do contêiner pai */
    height: 640px;
    align-items: end;
    display: grid;
    position: relative;
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
    padding-bottom: var(--gap-s);
}

#hero .headline, #hero_mentoria .headline{
    padding-bottom: var(--gap-xxs);
    letter-spacing: 4px;
}


#hero .statement {
    margin-top: var(--gap-m);
    grid-column: 1 / span 8;
    z-index: 1; /* Coloca a imagem atrás */
    text-transform: uppercase;
}

#hero .statement h1{
    color: var(--cor-neutra-clara);
}

#hero span{
    background-color: rgba(242, 242, 242, 0.5);
    line-height: 150%;
}

#hero .cta_desktop{
    display: none;
}

#hero .subtitle, #hero .cta {
    z-index: 1; /* Coloca a imagem atrás */
    grid-column: 1 / span 8;
}

#hero .subtitle{
    margin-top: var(--gap-s);
}

#hero .cta {
    margin: var(--gap-l) 0 0 0;
}


@media screen and (min-width: 881px) and (orientation: landscape) {
    #hero{
        margin-top: 0;
        background-color: var(--cor-cinza);
        position: relative;
        z-index: 1;
    }

    #hero .statement {
        margin-top: var(--gap-xs);
        grid-column: 3 / span 4;
        height: auto;
    }

    #hero .statement h1{
        color: var(--cor-preta);
    }

    #hero .subtitle, #hero .cta, #hero .headline {
        grid-column: 3 / span 4;
    }

    #hero .headline{
        margin-top: var(--gap-xl);
    }


    #hero .cta {
        margin: var(--gap-s) 0 var(--gap-m) 0;
    }

    #hero .cta_desktop{
        display: initial;
    }

    #hero .img_bg {
        grid-column: 7 / span 6;
        height: 100%;
        position: absolute;
        background-image: url('../images/angela_unique_reduzida.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }

}


/* Sessão Problema */

#problema{
    padding-bottom: var(--gap-l);
}

#problema #problemas, #problema #transformacao, #problema .cta, #problema #yes, #problema #not{
    grid-column: 1 / span 8;
    width: 100%;
    height: 100%;
}

#problema #yes h4, #problema #not h4{
    text-align: center;
}


#problema .title_1, #problema .cta, #problema ul {
    width: 100%;
    height: auto;
}


#problema ul li{
    margin-top: var(--gap-m);
}

.problema_icone{
    display: inline-flex;
    border-radius: 50px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-detalhes);
    margin-right: var(--gap-xxs);
}

#not .problema_icone{
    background-color: var(--cor-detalhes-light);
}

#yes .problema_icone{
    background-color: var(--cor-verde);
}

#problema .cta{
    margin-top: var(--gap-l);
}

#problema #cta_problema{
    margin-top: var(--gap-m);
}




@media screen and (min-width: 881px) and (orientation: landscape) {
    #problema{
        padding-bottom: 0;
    }

    #problema #problemas{
        grid-column: 3 / span 4;
        padding-right: var(--gap-m);
    }

    #problema #yes{
        margin-bottom: var(--gap-l);
    }

    #problema #yes, #problema #not{
        grid-column: 3 / span 8;
    }

    #problema #yes ul, #problema #not ul{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 16px;
    }


    #problema #yes ul li, #problema #not ul li{
        flex: 1 1 calc(50% - 16px); 
        padding: var(--gap-xs);
        background-color: var(--cor-neutra-clara);
        border-right: 1px solid var(--cor-cinza);
        border-bottom: 1px solid var(--cor-cinza);
        border-radius: 8px; 
    }


    #problema #standard_grid_problema::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-65%);
            width: 2px; /* largura da borda */
            height: 70%; /* altura da borda */
            background-color: var(--cor-cinza); /* cor da borda */
            z-index: 0;
        }

    #problema #transformacao {
        grid-column: 7 / span 4;
        padding-left: var(--gap-m);
    }

     #problema .cta{
        grid-column: 3 / span 8;
        text-align: center;
     }

     #problema #transformacao .title_1{
        margin-top: 0;
    }

    #problema .cta{
        margin-top: var(--gap-xl);
    }

}



/* Sessão Tripa */

#tripa{
    background-color: var(--cor-cinza);
    padding: var(--gap-xl) 0;
}

#tripa .title{
    grid-column: 1 / span 8;
}



@media screen and (min-width: 881px) and (orientation: landscape) {
    #tripa .title{
        grid-column: 3 / span 8;
    }

    #tripa .title h3{
        text-align: center;
    }
}

.repeated_shadow {
    text-shadow:
        12px 24px 0 rgba(0, 0, 0, 0.2),
        24px 48px 0 rgba(0, 0, 0, 0.15),
        36px 72px 0 rgba(0, 0, 0, 0.1),
        48px 96px 0 rgba(0, 0, 0, 0.05);
  }


/* Sessão Produto */

#produto, #produto_1porcento{
    background-color: var(--cor-preta);
    padding: var(--gap-xl) 0;
    margin-top: 0;
}

#produto_1porcento{
    background-color: var(--cor-preta);
    padding: 0;
    margin-top: 0;
}

#produto_1porcento .content{
    padding-bottom: var(--gap-xl);
}



#produto .title h3, #produto .title span, #produto .description, #produto_1porcento .title h3, #produto_1porcento .title span, #produto_1porcento .description{
    color: var(--cor-neutra-clara);
}

#produto .img_bg img, #produto_1porcento .img_bg img{
    width: 100%;
    height: auto;
}

#produto .img_bg, #produto_1porcento .img_bg{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: var(--gap-m);

}


#produto .content, #produto .img_bg, #produto_1porcento .content, #produto_1porcento .img_bg{
    grid-column: 1 / span 8;
}

#produto .description, #produto_1porcento .description{
    margin: var(--gap-m) 0;
}



@media screen and (min-width: 881px) and (orientation: landscape) {
    #produto .content, #produto_1porcento .content{
        grid-column: 7 / span 4;
    }

    #produto_1porcento .content{
        padding: var(--gap-xl) 0 var(--gap-xl) var(--gap-xs);
    }

    #produto .img_bg{
        grid-column: 3 / span 4;
        padding: var(--gap-s);
    }


}



/* Sessão Descritivo */



#descritivo ul{
    padding-top: var(--gap-xs);
}

#descritivo .img_bg, #descritivo .above_title, #descritivo .title, #descritivo .body, #descritivo .cta{
    grid-column: 1 / span 8;
    z-index: 1;
}

#descritivo .number_bg{
    display: none;
}

#descritivo .above_title{
    padding-top: var(--gap-m);
    padding-bottom: var(--gap-xxs);
    letter-spacing: 4px;
}

#descritivo .title, #descritivo .body, #descritivo .cta{
    padding-bottom: var(--gap-s);
}



#descritivo .img_bg {
    width: 100%;
    height: 320px;
    background-size: cover;
    
    background-repeat: no-repeat;
}

.par, .impar{
    margin-bottom: var(--gap-l);
}

#descritivo .img_bg#descritivo_conteudos{
    margin-top: var(--gap-l);
    background-image: url('../images/bg_descritivo_conteudo.webp');
    background-position: center;
}

#descritivo .img_bg#descritivo_planejador{
    background-image: url('../images/bg_descritivo_planejador.webp');
    background-position: center;
}

#descritivo .img_bg#descritivo_organizador{
    background-image: url('../images/bg_descritivo_organizador.webp');
    background-position: bottom;
}

#descritivo .img_bg#descritivo_templates{
    background-image: url('../images/bg_descritivo_templates.webp');
    background-position: bottom;
}



@media screen and (min-width: 881px) and (orientation: landscape) {

    #descritivo .impar .above_title, #descritivo .impar .title, #descritivo .impar .body, #descritivo .impar .cta{
        grid-column: 3 / span 4;
    }

    #descritivo .par .above_title, #descritivo .par .title, #descritivo .par .body, #descritivo .par .cta{
        grid-column: 7 / span 4;
    }

    #descritivo .impar .img_bg{
        grid-column: 8 / span 3;
        height: 100%;
    }

    #descritivo .par .img_bg{
        grid-column: 3 / span 3;
        height: 100%;
    }

    #descritivo .img_bg {
        position: absolute;
        margin-bottom: 0;
    }

    .par, .impar{
        padding: var(--gap-l) 0;
    }

    #descritivo .number_bg{
        display: flex;
        position: absolute;
        font-size: 160px;
        opacity: 0.2;
        z-index: 0;
        top: 10%;
        left: 5%;
    }

    #descritivo .impar .number_bg{
        grid-column: 1 / span 8;
    }

    #descritivo .par .number_bg{
        grid-column: 6 / span 6;
    }

    #descritivo .img_bg#descritivo_conteudos{
        margin-top: 0;
    }

}






/* Sessão Testimonials */

#testimonials{
    background-color: var(--cor-cinza);
    position: relative;
    padding: var(--gap-m) 0;
}

#testimonials .standard_grid_absolute{
    display: grid;
    overflow: hidden;
}

#testimonials .bg_absolute{
    line-height: 80%;
    top: 0;
    font-style: italic;
    font-weight: bold;
    color: var(--cor-neutra);
    font-size: 400px;
    grid-column: 5 / span 4;
    height: 100%;
    position: absolute;
    z-index: 0;
}

#testimonials .carousel_wrap{
    margin-top: var(--gap-m);
}

.carousel_wrap{
    display: grid;
    align-items: center;
    width: 100%;
    grid-column: 1 / span 8;
    position: relative;
    overflow: hidden;
}

.carousel_content_wraper{
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 500%;
    max-width: 500%;
    width: 500%;
    grid-column: 1 / span 8;
    transition: transform 0.8s ease;
}

.carousel_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    position: relative;
}

.carousel_item {
    padding: 0 var(--xxs);
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.carousel_arrow {
  cursor: pointer;
  font-size: 32px;
  user-select: none;
  z-index: 3;
  transition: var(--hover-transition);
  position: absolute;
}

.carousel_wrap #back{
    justify-self: flex-start;
}

.carousel_wrap #forward{
    right: 0;
}

.carousel_arrow:hover{
    opacity: var(--hover-opacity);
}



#testimonials .title_1{
    grid-column: 1 /span 6;
}

.carousel_indicators {
    grid-column: 1 / span 8;
    display: flex;
    justify-content: center;
    margin-top: var(--gap-s);
}

.carousel_indicators .indicator {
    width: 12px;
    height: 12px;
    border: 1px solid var(--cor-preta);
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.carousel_indicators .indicator:hover{
    opacity: var(--hover-opacity);
}

.carousel_indicators .indicator.active {
    background-color: var(--cor-preta);
}

.carousel_content_desktop, .indicators_desktop{
    display: none;
}

.carousel_content_mobile, .indicators_mobile{
    display: flex;
}




@media screen and (min-width: 881px) and (orientation: landscape) {
    #testimonials{
        padding: var(--gap-l) 0;
    }

    #testimonials .bg_absolute{
        grid-column: 9 / span 3;

    }

    .carousel_wrap{
        grid-column: 3 / span 8;
    }


    #testimonials .title_1{
        grid-column: 3 /span 8;
    }

    .carousel_content_wraper{
        width: 200%;
        max-width: 200%;
        min-width: 200%;
        grid-column: 3 / span 8;
    }

    .carousel_content{
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        padding: 0 var(--gap-xs);
    }

    .carousel_item {
        padding: var(--gap-xs);
        width: 33.33%;
        min-width: 33.33%;
        max-width: 33.33%;
    }

    .carousel_indicators {
        grid-column: 3 / span 8;
    }

    .carousel_content_desktop, .indicators_desktop{
        display: flex;
    }

    .carousel_content_mobile, .indicators_mobile{
        display: none;
    }

    #title_testimonial_mentoria{
        text-align: center;
    }

}

/* Sessão Oferta */

#oferta .title{
    text-transform: uppercase;
    margin-bottom: var(--gap-s);
}

#oferta .oferta_wraper, #oferta .price_wraper{
    grid-column: 1 / span 8;
    width: 100%;
    border-radius: 8px;
    padding: var(--gap-m);
    box-shadow: var(--box-shadow);
}

#oferta .oferta_wraper{
    background-color: var(--cor-cinza);
}

#oferta .price_wraper{
    margin-top: var(--gap-m);
    background-color: var(--cor-neutra-clara);
    border: 1px solid var(--cor-verde);
    text-align: center;
}

#oferta .oferta_wraper li{
    margin-top: var(--gap-xs);
}

#oferta .cta{
    margin-top: var(--gap-s);
    text-align: center;
}

 #oferta .bandeiras, #ofertas .selos{
    position: relative;
 }

 #oferta .bandeiras{
    margin-top: var(--gap-xs);
    width: 60%;
 }

 #oferta .selos{
    margin-top: var(--gap-s);
    width: 80%;
 }

#oferta .texto{
    margin-top: var(--gap-xxs);
}

#oferta .disclaimer{
    margin-top: var(--gap-s);
}

#oferta .oferta_feature{
    text-align: center;
    margin-top: var(--gap-xs);
    font-weight: bold;
    text-transform: uppercase;
}

.oferta_feature img{
    width: 24px;
    margin-bottom: var(--gap-xxs);
}


@media screen and (min-width: 881px) and (orientation: landscape) {
    #oferta .oferta_wraper{
        grid-column: 3 / span 4;
    }

     #oferta .price_wraper{
        margin-top: 0;
        grid-column: 7 / span 4;

     }

}


/* Sessão FAQ */



#faq .title{
    grid-column: 1 / span 8;
    margin-bottom: var(--gap-s);
}

#faq .cta{
    grid-column: 1 / span 8;
    margin-top: var(--gap-m);
}

.pergunta_wraper{
    grid-column: 1 / span 8;
}

.faq_title{
    margin-top: var(--gap-s);
    width: 100%;
    padding: var(--gap-xs) var(--gap-s);
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--cor-preta);
    border-top: 1px solid var(--cor-preta);

}

.pergunta_content{
    max-width: 80%;
}

.faq_content{
    background-color: var(--cor-neutra-clara);
    width: 100%;
    padding: var(--gap-m) var(--gap-s);
    align-items: center;
    display: grid;
    box-shadow: var(--box-shadow);
    display: none;
}

.faq_title:hover{
    cursor: pointer;
    opacity: var(--hover-opacity);
}

.faq_indicator{
    justify-self: end;
    text-align: right;
    font-size: 24px;
    max-width: 20%;
    transform: rotate(0deg);
}

.rotate {
    transform: rotate(90deg);
    transition: transform 0.2s ease;  /* Adiciona uma transição suave */
}



@media screen and (min-width: 881px) and (orientation: landscape) {
    #faq .title{
        grid-column: 3 / span 8;
    }

    .pergunta_wraper{
        grid-column: 3 / span 8;
    }

    #faq .cta{
        display: flex;
        justify-content: center;
        grid-column: 5 / span 4;
    }
}



/* -------------------------------------------LP MENTORIA------------------------------------------- */

/* Sessão Hero */

#img_1porcento{
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 25%, rgba(38,38,38,0) 90%), 
        url('../images/hero_produtos.png');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 100%; /* Largura total do contêiner pai */
    height: 360px;
    align-items: end;
    display: grid;
    position: relative;
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
}


@media screen and (min-width: 881px) and (orientation: landscape) {

    #img_1porcento {
        grid-column: 1 / span 6 !important;
        height: 100%;
        width: 100%;
        background: url('../images/hero_produtos.png');
        position: absolute;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

}



#hero_mentoria .img_bg {
    grid-column: 1 / span 8;
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 25%, rgba(38,38,38,0) 90%), 
        url('../images/angela_mentoria_reduzida.webp');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 100%; /* Largura total do contêiner pai */
    height: 640px;
    align-items: end;
    display: grid;
    position: relative;
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
    padding-bottom: var(--gap-s);
}


#hero_mentoria .statement {
    margin-top: var(--gap-m);
    grid-column: 1 / span 8;
    z-index: 1; /* Coloca a imagem atrás */
    text-transform: uppercase;
}

#hero_mentoria .statement h2, #hero_mentoria .statement span{
    color: var(--cor-neutra-clara);
}

#hero_mentoria .cta_desktop{
    display: none;
}

#hero_mentoria .subtitle, #hero_mentoria .cta {
    z-index: 1; /* Coloca a imagem atrás */
    grid-column: 1 / span 8;
}

#hero_mentoria .subtitle{
    margin-top: var(--gap-s);
}

#hero_mentoria .cta {
    margin: var(--gap-l) 0 0 0;
}


@media screen and (min-width: 881px) and (orientation: landscape) {
    #hero_mentoria{
        margin-top: 0;
        background-color: var(--cor-cinza);
        position: relative;
        z-index: 1;
    }

    #hero_mentoria .statement {
        margin-top: var(--gap-xs);
        grid-column: 7 / span 4;
        height: auto;
        margin-left: var(--gap-s)
    }

    #hero_mentoria .statement h2, #hero_mentoria .statement span{
        color: var(--cor-preta);
    }

    #hero_mentoria .headline{
        margin-top: var(--gap-xl);
    }

    #hero_mentoria .subtitle, #hero_mentoria .cta, #hero_mentoria .headline {
        grid-column: 7 / span 4;
        margin-left: var(--gap-s);
    }


    #hero_mentoria .cta {
        margin: var(--gap-s) 0 var(--gap-l) var(--gap-s);
    }

    #hero_mentoria .cta_desktop{
        display: initial;
    }

    #hero_mentoria .img_bg {
        grid-column: 1 / span 6;
        height: 100%;
        position: absolute;
        background-image: url('../images/angela_mentoria_reduzida.webp');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }

}



/* Sessão Escolha */
#escolha{
    background-color: var(--cor-preta);
    padding: var(--gap-xl) 0;
    margin-top: 0;
}

#escolha h4, #escolha span, #escolha .subtitle{
    color: var(--cor-neutra);
}

#escolha .pergunta, #escolha .subtitle, #escolha .video_frame, #escolha .cta{
    grid-column: 1 / span 8;
}

#escolha .subtitle, #escolha .video_frame, #escolha .cta{
    margin-top: var(--gap-m);
}

.video_frame{
    grid-column: 1 / span 8;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
}

.video_frame#thumb_mentoria{
    cursor: pointer;
    background-image: url('../images/mentoria_thumb_v4.webp');
    background-size: cover;
    background-position: center;
}

.video_frame#video_mentoria iframe{
    cursor: pointer;
}

.video_frame#thumb_mentoria:hover{
    opacity: 0.7;
}

.video_frame iframe:hover {
    opacity: var(--hover-opacity);
}

.video_frame iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





@media screen and (min-width: 881px) and (orientation: landscape) {

    #escolha .pergunta, #escolha .video_frame, #escolha .cta{
        grid-column: 4 / span 6;
        text-align: center;
    }

    #escolha .subtitle{
        grid-column: 5 / span 4;
        text-align: center;
    }





}










/* Sessão Resumo */

#resumo .img_bg {
    grid-column: 1 / span 8;
    height: 100%;
    width: auto;
    position: relative;
    justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--gap-xl);
}

#resumo .img_bg img{
    width: 100%;
    height: auto;
}


#resumo .content, #resumo .title{
    grid-column: 1 / span 8;
}

#resumo .title{
    margin-bottom: var(--gap-s);
}

#resumo .subtitle{
    margin-top: var(--gap-xs);
}


.modules{
    display: flex;
    flex-wrap: wrap;

}

.module{
    background-color: var(--cor-neutra-clara);
    border-radius: 8px;
    padding: var(--gap-xs) var(--gap-s);
    max-width: 100%;
    min-width: 100%;
    align-items: center;
    display: inline-flex;
    margin-top: var(--gap-s);
}

.module_icon{
    padding: var(--gap-xxs) var(--gap-xs);
    background-color: var(--cor-cinza);
    border-radius: 8px;
    margin-right: var(--gap-xs);
    font-weight: bold;
}


#descritivo .img_bg#posicionamento_mestre{
    background-image: url('../images/bg_posicionamento_mestre.webp');
    background-position: center;
}

#descritivo .img_bg#ofertas_irresistiveis{
    background-image: url('../images/bg_ofertas_irresistiveis.webp');
    background-position: left;
}

#descritivo .img_bg#sua_marca_pessoal{
    background-image: url('../images/bg_sua_marca_pessoal.webp');
    background-position: center;
}

#descritivo .img_bg#msg_magnetica{
    background-image: url('../images/bg_msg_magnetica.webp');
    background-position: bottom;
}



@media screen and (min-width: 881px) and (orientation: landscape) {
    #resumo .content{
        grid-column: 3 / span 4;
    }

    #resumo .title{
        grid-column: 3 / span 8;
        text-align: center;
        margin-bottom: var(--gap-m);
    }

    #resumo .img_bg {
        grid-column: 7 / span 4;
        height: 100%;
        position: absolute;
        margin-left: var(--gap-s);
        margin-bottom: 0;
        margin-top: var(--gap-m);
    }

    .modules{
        justify-content: space-between;
        margin-top: var(--gap-s);
    }

    .module{
        max-width: 48%;
        min-width: 48%;
        margin-top: 0;
    }

    .module#module_1, .module#module_2 {
        margin-bottom: var(--gap-s);
    }

}



/* Sessão PASSO A PASSO */
#passo_a_passo{
    background-color: var(--cor-cinza);
    padding: var(--gap-m) 0;
}

#passo_a_passo_2{
    background-color: var(--cor-neutra);
    padding: var(--gap-m) 0;
}


#passo_a_passo .cta, #passo_a_passo_2 .cta{
    margin-top: var(--gap-m);
}

#passo_a_passo .subtitle, #passo_a_passo_2 .subtitle{
    margin-top: var(--gap-s);
}


#passo_a_passo .title, #passo_a_passo .subtitle, #passo_a_passo .cta, #passo_a_passo_2 .title, #passo_a_passo_2 .subtitle, #passo_a_passo_2 .cta{
    grid-column: 1 / span 8;
}



@media screen and (min-width: 881px) and (orientation: landscape) {

    #passo_a_passo .title, #passo_a_passo .cta, #passo_a_passo_2 .title, #passo_a_passo_2 .cta{
        grid-column: 4 / span 6;
        text-align: center;
    }

     #passo_a_passo .subtitle, #passo_a_passo_2 .subtitle{
        grid-column: 3 / span 8;
        text-align: center;
     }

}



/* VIDEO PROMO */

#video_promo{
    background-color: var(--cor-preta);
    padding-top: var(--gap-s);
    padding-bottom: var(--gap-xl);
    margin-top: 0;
}

#video_promo .tag{
    color: var(--cor-neutra);
    font-size: 0.8rem;
}

#video_promo .subtitle{
    margin-top: 0;
    margin-bottom: var(--gap-s);
    text-align: center;
}

#video_promo .pergunta{
    text-align: center;
    color: var(--cor-neutra);
}

.underline{
    text-decoration: underline;
}

#video_promo h4, #video_promo span, #video_promo .subtitle{
    color: var(--cor-neutra);
}

#video_promo .pergunta, #video_promo .subtitle, #video_promo .video_frame, #video_promo .cta, #video_promo .player_buttons{
    grid-column: 1 / span 8;
}

#video_promo .cta{
    margin-top: var(--gap-m);

}

#video_promo .video_frame{
    margin-top: var(--gap-s);
}


@media screen and (min-width: 881px) and (orientation: landscape) {

    #video_promo .pergunta, #video_promo .video_frame, #video_promo .cta, #video_promo .player_buttons, #video_promo .subtitle{
        grid-column: 3 / span 8;
        text-align: center;
    }

    #video_promo .pergunta{
        padding: 0 var(--gap-l);
    }

    #video_promo .tag{
        font-size: 1.8rem;
    }


}


.video_hide#botao_visivel{
    animation: fadeInSlideUp 1s ease-in-out;
}

@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}


.offer-unlocked {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: var(--gap-xs);
    animation: fadeInUp 6s ease-in-out forwards;
    background-color: var(--cor-preta);
    z-index: 6;
    border-radius: 0 0 8px 8px;
    text-align: center;
}


.offer-unlocked img{
    width: 28px;
    margin-right: 4px;
}

#video_track{
    position: absolute;
    bottom: 0;
    z-index: 6;
    width: 100%;
    height: 12px;
    margin-left: 2px;
    display: flex;
    justify-content: flex-start;
}

.player_buttons{
    position: relative;
    margin-top: 0;
    width: 100%;
    display: none;
    margin-bottom: var(--gap-s);
}

.player_options{
    position: absolute;
    top: -50%;
    right: 50%;
    transform: translateX(50%);
    z-index: 7;
    display: flex;
    margin-right: 2px;
    margin-top: 16px;
}

@media screen and (min-width: 881px) and (orientation: landscape) {
    .player_options{
        right: 0;
        transform: translateX(0);
        margin-top: 0px;
    }

}


.player_options .button{
    font-size: 0.8rem;
    background-color: var(--cor-preta);
    color: var(--cor-neutra-clara);
    border: 1px solid var(--cor-neutra-clara);
    padding: 2px var(--gap-s);
    min-height: 32px;
    max-height: 32px;
    transition: var(--hover-transition);
}

@media screen and (min-width: 881px) and (orientation: landscape) {
    .player_options .button{
        min-height: 48px;
        max-height: 48px;
        padding: var(--gap-xxs) var(--gap-xs);
        border-radius: 0 0 8px 8px;
        border-right: 0px;
        border-top: 0px;
    }
}


.player_options .button:hover{
    opacity: var(--hover-opacity);
}

.player_options .button#maximizar{
    font-size: 1rem;
}

#video_track_bg{
    position: relative;
    height: 100%;
    width: 0;
    background-color: var(--cor-detalhes);
    animation: videoTrack 1807s linear;
    animation-play-state: paused;
}

#video_promo .offer-unlocked span{
    font-size: 16px;
}

@media screen and (min-width: 881px) and (orientation: landscape) {
    #video_promo .offer-unlocked span {
        line-height: 80%;
        font-size: 28px;
    }
}

#unmuteButton{
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    background:var(--cor-detalhes-light);
    border-radius: 2px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    padding: var(--gap-xxs);
    display: none;
    text-align: center;
    flex-direction: column;
}

#unmuteButton img{
    width: 8vw;
    padding: var(--gap-xxs) 0;
}

#unmuteButton p{
    text-align: center;
    margin-bottom: 0;
    white-space: nowrap;
}

@media screen and (min-width: 881px) and (orientation: landscape) {
    #unmuteButton{
        padding: var(--gap-s) var(--gap-m);
    }

    #unmuteButton img{
        padding: var(--gap-s) 0;
    }
    
}



#playPauseButton{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent;
    border:none;
    cursor:pointer;
}

#playPauseButton:hover{
    background-color: rgba(0, 0, 0, 0.3);
}



@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        margin-top: 0px;
        display: none;
        transform: translateY(-50%);
    }
}

@keyframes videoTrack {
    2% {
        width: 20%; /* Crescimento rápido no começo */
    }
    5% {
        width: 30%; /* Ainda rápido */
    }
    10% {
        width: 40%; /* Reduz um pouco a velocidade */
    }
    25% {
        width: 55%; /* Ajuste gradual */
    }
    50% {
        width: 70%; /* Crescimento mais realista */
    }
    75% {
        width: 85%; /* Aproximando-se do final */
    }
    100% {
        width: 100%; /* Fim da barra */
    }
}



/*------------Botao Whatsapp*/
.whatsapp_button {
    position: fixed;
    bottom: var(--gap-xs);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.whatsapp_button a{
    grid-column: -1 / -1;
    width: 56px;
    height: 56px;
    justify-self: flex-end;
}

.whatsapp_button img {
    width: 100%;
    height: 100%;
}


@media screen and (min-width: 881px) and (orientation: landscape) {
    .whatsapp_button a{
        grid-column: -4 / -4;
    }
}


/* -------------------------------------------LP A REGRA DO 1%------------------------------------------- */

/* Sessão Hero */

#hero_porcento .img_bg {
    grid-column: 1 / span 8;
    background: 
        linear-gradient(350deg, rgba(38,38,38,1) 25%, rgba(38,38,38,0) 90%), 
        url('../images/hero_porcento.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%; /* Largura total do contêiner pai */
    height: 640px;
    align-items: end;
    display: grid;
    position: relative;
    column-gap: var(--gap-xxs);
    grid-template-columns: repeat(8, 1fr);
    padding-bottom: var(--gap-s);
}

#hero_porcento .headline{
    padding-bottom: var(--gap-xxs);
    letter-spacing: 4px;
}


#hero_porcento .statement {
    margin-top: var(--gap-m);
    grid-column: 1 / span 8;
    z-index: 1; /* Coloca a imagem atrás */
    text-transform: uppercase;
}

#hero_porcento .statement h1, #hero_porcento .statement h2{
    color: var(--cor-neutra-clara);
}

#hero_porcento span{
    background-color: rgba(242, 242, 242, 0.5);
    line-height: 150%;
}

#hero_porcento .cta_desktop{
    display: none;
}

#hero_porcento .subtitle, #hero_porcento .cta {
    z-index: 1; /* Coloca a imagem atrás */
    grid-column: 1 / span 8;
}

#hero_porcento .subtitle{
    margin-top: var(--gap-s);
}

#hero_porcento .cta {
    margin: var(--gap-l) 0 0 0;
}


@media screen and (min-width: 881px) and (orientation: landscape) {
    #hero_porcento{
        margin-top: 0;
        background-color: var(--cor-cinza);
        position: relative;
        z-index: 1;
    }

    #hero_porcento .statement {
        margin-top: var(--gap-xs);
        grid-column: 3 / span 4;
        height: auto;
    }

    #hero_porcento .statement h1, #hero_porcento .statement h2{
        color: var(--cor-preta);
    }

    #hero_porcento .subtitle, #hero_porcento .cta, #hero_porcento .headline {
        grid-column: 3 / span 4;
    }

    #hero_porcento .headline{
        margin-top: var(--gap-xl);
    }


    #hero_porcento .cta {
        margin: var(--gap-s) 0 var(--gap-m) 0;
    }

    #hero_porcento .cta_desktop{
        display: initial;
    }

    #hero_porcento .img_bg {
        grid-column: 7 / span 6;
        height: 100%;
        position: absolute;
        background-image: url('../images/hero_porcento.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

}