body{
	font-family: "Roboto", sans-serif;
	background: #030303;
	margin: 0;
}
a{text-decoration: none !important;}
.container{
	max-width: 1200px;
	margin: 0 auto;
}
section{
	overflow-x: hidden;
}
.horasaula{
	color: #ddd;
}
#topo{
	display: flex;
	align-items: center;
	min-height: 96vh;
	text-align: center;	
	position: relative;
	overflow: hidden;
	background: #151717;
	background: linear-gradient(45deg, rgba(125, 42, 153, 1) 0%, 
		rgba(37, 16, 71, 1) 27%, rgba(0, 0, 0, 1) 100%);
}

#topo h1{
	text-align: center;
	text-transform: uppercase;
	font-family: "Roboto", sans-serif;
	font-size: 96px;
	font-weight: normal;
	letter-spacing: -5px;
	margin: 30px 0 45px 0;
	line-height: 110px;
	color: #e6e6e7;
	padding: 0px 0px 15px 0px;	
	background: linear-gradient(275deg, rgba(125, 42, 153, 1) 35%, rgba(0, 131, 145, 1) 105%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    transform: translateY(-40px);
    animation: entrada 3s ease forwards;		
}

span{
	color: rgba(163, 97, 239, 1);
}
#topo h2{
	font-size: 30px;
	font-weight: normal;
	color: #bbb;
  margin-bottom: 0px;
  opacity: 0;
  animation: entrada 3s 1.2s ease forwards;
  margin: 0 auto;
  max-width: 800px;
}
.bt-destaque a{
	display: block;
    max-width: 500px;
    background: #a361ef;
    padding: 25px 5px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 12px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    text-shadow: 0 1px 3px #000;
    margin: 60px auto;
    transition: all 0.4s ease;
    border: solid 1px #333;
    box-shadow: 0 2px 20px 1px rgba(163, 97, 239, 0.6), inset 0 2px 2px #cda9f7;
}

.bt-destaque a:hover{
	color: #d6bef1;
    background: transparent;
    text-shadow: 0 0 4px #9a5de4;
    box-shadow: 0 0 10px 3px #a361ef, inset 0 0 10px 1px #a361ef;
    border: solid 1px #d6bef1;
}
.modal .bt-destaque a:hover{	
    background: #333;    
}
.video-vendas{	
	position: relative;
	z-index: 9;
	/*margin-bottom: 85px;*/
	overflow: visible;
}
.video-frame{
	padding: 20px;
	margin-bottom: 40px;
}
.video-vendas .bt-destaque a{
	margin-top: 0px;
}
.video-vendas iframe{
	display: block;
	margin: -80px auto 20px auto;
	width: 100%;
	max-width: 960px;
	min-height: 560px;
	border-radius: 10px;
	border: solid 2px rgba(255, 255, 255, 0.75);
	background-color: #030303;
}

.title-section{
	color:#fff;
	font-size: 42px;
	text-align: center;
	margin-bottom: 40px;
	margin-top: 60px;
}
.title-section span{
	color: #a361ef;
}
#depoimentos{
	padding: 60px 0;
	margin-top: 60px;
}
#depoimentos .title-section, #alavancagem .title-section{
	text-align: left;
	font-size: 86px;
	background: linear-gradient(275deg, rgba(125, 42, 153, 1) 35%, rgba(0, 131, 145, 1) 105%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    margin-bottom: 12px;
    margin-top: 5px;
}
.subtitle{
	color: #a361ef;
	font-size: 16px;
}
#depoimentos .card-depo{
	background: #000;
    border: solid 1px #333;
    margin-top: 10px;
}

.aviso-bk{
	background: #0f0f0f;
	padding: 25px;
	border-radius: 10px;
	border: solid 1px #333;
	color: #ccc;
	margin-top: 25px;
	position: relative;
}

.aviso-bk h3{
	font-size: 22px;
	color: #fff;
	background: linear-gradient(275deg, rgba(125, 42, 153, 1) 35%, rgba(0, 131, 145, 1) 105%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
.divisa{
	border-bottom: solid 1px #999;
}
.number{
	font-size: 42px;
	font-weight: bold;
	color: #a361ef;
    font-family: "Sora", sans-serif;
}

.alunos {
	background: #0e0e0e;
    border-radius: 200px;
    color: #fff;
    padding: 5px 30px 5px 10px;
    display: inline-block;
    margin-bottom: 10px;
    box-shadow: inset 2px 2px 4px #000;
    border: solid 1px #212121;
}
.alunos img{
	height: 25px;
}
#publico{
	margin-bottom: 60px;
}
#publico .title-section{
	margin-top: 100px;
	margin-bottom: 20px;
}
#publico .subtitle{
	margin-bottom: 60px;
}
.publico h3{
	min-height: 52px;
	font-family: "Sora", sans-serif;
	color: #fff;
	background: linear-gradient(275deg, rgba(125, 42, 153, 1) 35%, rgba(0, 131, 145, 1) 105%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.titledegrade{
	font-family: "Sora", sans-serif;
	color: #fff;
	background: linear-gradient(275deg, rgba(125, 42, 153, 1) 35%, rgba(0, 131, 145, 1) 105%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    margin-top: 20px;
}
.publico i{
	font-size: 42px;
	margin-bottom: 25px;
}
#cronograma h6{
	color: #ddd;
}
#cronograma p, #outra-vantagem p, #professores p{
	color:#888;
}

.divisa{
	border-bottom: dashed 1px #888;
	padding: 40px 0px 40px 10px;
}
.row .divisa:last-child{
	border-bottom: none;
}
#outra-vantagem h3{
	color: #a361ef;
	font-size: 24px;
	margin-top: 20px;
}
.dest{
	background: #0f0f0f;
	border: solid 1px #333;
	border-radius: 10px;
	padding: 40px 15px 0 15px;
	position: relative;
	margin-top: 40px;
}
#outra-vantagem .dest h3{
	background: #a361ef;
	color: #030303;
	position: absolute;
	top: -35px;
	left: 10px;
	padding: 5px 15px;
    border-radius: 5px;
}
#professores .cite{
	font-family: "Sora", sans-serif;
	font-style: italic;
	color: #ccc;
    padding: 0 20px 60px 20px;
    text-align: justify;
    line-height: 34px;
	font-size: 24px;
}

#professores h3 span{
	display: block;
	font-size: 16px;
	margin-top: 10px;
}
#professores .profbeto{
	padding: 15px 0;
}
#professores .profpri{
	padding: 15px 0;
	text-align: right;
}
#alavancagem{
	overflow: hidden;
}

#alavancagem .title-section{
	text-align: center;
	font-size: 56px;
	margin-top: 100px;
}

.modal-title{
	color: #a361ef;
}
.modal-depoimento img{
	border: solid 1px #333;
	margin-bottom: 5px;
    border-radius: 4px;
}
.modal-depoimentos .modal-header{
	background: #020202;
}
.quanto{
	color: #fff;
}
.quanto h4{
	font-size: 24px;
    margin-top: 25px;
    margin-bottom: 20px;
    color: #a361ef;
}
.quanto .text-end h4{
	color: #c25656;
}
.quanto .divisa{
	padding: 0px ;
}
.custar {
	text-align: left;
}
.preco-antigo, .preco-novo{
	font-size: 72px;
	position: relative;
	width: 230px;
	margin: 0 auto;
}
.preco-antigo::before{
	content: "";
	width: 0px;
	height: 5px;
	background: red;
	position: absolute;
    transform: rotate(10deg);
    top: 41px;
    left: 35px;
	transition: all 2s linear;
}
.oculto.show .preco-antigo::before{
	width: 200px;
}
.preco-antigo span, .preco-novo span{
	font-size: 18px;
	color: #fff;
	vertical-align: super;
	margin-right: 12px;
}
.preco-novo{
	color:#135a16;
	width: auto;
}
.preco-novo.parcelado{
	color: #a361ef;
    text-shadow: 1px 1px 1px #333;	
	font-size: 58px;
}
.valido{
	color: #ddd;
    font-weight: normal;
    font-size: 24px;
}
.black-topo{
	background: #a361ef;
    color: #000 !important;
    font-size: 58px !important;
}
.black-desconto{
	color: #fff !important;
	font-size: 36px !important;
}
#topo .preco{
	background: transparent;
}
.preco .preco-novo.parcelado span{
	color:#333;
}
.faixa-black{
	position: absolute;
    top: 26px;
    left: -28px;
    background: #000;
    color: #d9e13c;
    border-top: dashed 3px;
    border-bottom: dashed 3px;
    padding: 1px 30px;
    transform: rotate(327deg);
    border-radius: 50% 50% 0 0;
}
.preco{
	position: relative;
	background: #f7f7f7;
    border-radius: 10px;
    color: #333;
    padding: 35px 10px;
}
.avista{
	font-size: 26px;
	color: #333;
}
.quanto .um-ano{
	font-size: 15px;
    margin-top: 0;
    color: #444;
}
.preco .preco-novo span{
	color: #135a16;
}
.preco .bt-destaque a{
	margin: 10px auto 20px auto;
}
.preco .bt-destaque a:hover{
	background: #a361ef;
	box-shadow: inset 1px 2px 4px #333;
	border: solid 1px #a361ef;
	color: #fff;
}

#faq .accordion{
	background: transparent;
	color: #fff;
	border-radius: 0;
}
#faq .accordion-item{
	background: transparent;
	color: #fff;
	border: none;
    border-bottom: solid 1px #777;
}
#faq .accordion-button:not(.collapsed), #faq .accordion-button{
	color: #a361ef;
    background: #0f0f0f;
	font-size: 22px;
	font-family: "Sora", sans-serif;
}
#faq .accordion-body{
	font-size: 16px;
}
.bt-whats{
	padding: 10px 35px;
    border-radius: 200px;
    border: solid 2px #fff;
}
.bt-whats:hover{
	border: solid 2px #fff;
}
.rodape{
	margin-top: 80px;
}
.rodape p{
	text-align: center;
    padding: 40px 20px;
    background: #a361ef;
    color: #fff;
    box-shadow: inset 0px 3px 4px #333;
    text-shadow: 1px 1px 2px #303030;
    margin-bottom: 0;
}
.rodape span{
	color: #fff;
}
.rodape img{
	height: 35px;
    filter: drop-shadow(2px 2px 4px #333);
    display: block;
    margin: 0 auto 20px auto;
}

.checkout input{
	width: 100%;
    margin: 5px 0;
    border-radius: 5px;
    border: solid 1px #333;
    padding: 8px 5px;
    background: #f7f7f7;
}
.checkout form button{
	background: #a361ef;
    color: #fff;
    padding: 7px 30px;
    margin-top: 10px;
    border-radius: 5px;
    border: solid 1px #333;
}
#metodologia .title-section strong{
	color: #a361ef;
}

#metodologia h3{	
	font-size: 18px;	
}
#metodologia .card .titledegrade{
	margin-top: 0;
}
#metodologia .card strong{
	display: block;
	font-weight: 500;
}
#metodologia .card span{
	font-size: 13px;
	color: #4f2a75;
}

#metodologia .card-title{
	font-size: 16px;
}

.hidden-m{
	display: none !important;
}
.hidden-p{display: inline-block !important;}

@keyframes entrada{
	0%{opacity: 0;transform: translateY(-100px);}
	100%{opacity: 1;transform: translateY(0px);}
}

/* animation seta abaixo */
.siga i{
	color: transparent;
	font-size: 24px;
	animation: siga 2s linear infinite;
}
.siga i.dois{
	animation-delay: 0.5s;
}
.siga i:last-child{
	animation-delay: 1s;
}

@keyframes siga{
	0%{color: transparent;}
	50%{color: #a361ef}
	70%{color: transparent}
	100%{color: transparent;}
}

/* Animation cometas */
.efeito{
	opacity: 0.9;
	position: absolute;
	top: 100%;
	left: -3%;
	width: 2px;
	height: 80px;
	background: linear-gradient(360deg, #462969, transparent);
	transform: rotate(200deg);
	animation: foquete-top 2s linear infinite;
}
.efeito:nth-child(2){
	left: 0%;
	height: 30px;
	animation-duration: 1s;
}
.efeito:nth-child(3){
	left: 2%;
	height: 50px;
	animation-duration: 3.5s;
}
.efeito:nth-child(4){
	left: 2%;
	height: 15px;
	animation-duration: 1.8s;
	animation-delay: 1s;
}
.efeito:nth-child(5){
	left: 3%;
	height: 25px;
	animation-duration: 1.8s;	
}
.efeito:nth-child(6){
	left: 3%;
	height: 35px;
	animation-duration: 3s;	
}
.efeito:nth-child(7){
	left: 6%;
	height: 25px;
	animation-duration: 1.8s;	
}
.efeito:nth-child(8){
	left: 8%;
	height: 40px;
	animation-duration: 2.5s;	
}
.efeito:nth-child(9){
	left: 10%;
	height: 40px;
	animation-duration: 4s;	
}
.efeito:nth-child(10){
	left: 15%;
	height: 40px;
	animation-duration: 4s;	
}
.efeito:nth-child(11){
	left: 15%;
	height: 20px;
	animation-duration: 3s;
	animation-delay: 2s;	
}

.efeito-baixo{
	opacity: 0.9;
	position: absolute;
	top: 0;
	right: -3%;
	width: 2px;
	height: 80px;
	background: linear-gradient(360deg, #462969, transparent);
	transform: rotate(-200deg);
	animation: foquete-bottom 2s linear infinite;
}
.efeito-baixo:nth-child(2){
	right: 0%;
	height: 30px;
	animation-duration: 1s;
}
.efeito-baixo:nth-child(3){
	right: 1%;
	height: 10px;
	animation-duration: 3s;
}
.efeito-baixo:nth-child(4){
	right: 1%;
	height: 15px;
	animation-duration: 4s;
	animation-delay: 2s;
}

@keyframes foquete-top{
	0%{transform: rotate(200deg) translate(0px, 0px);}
	80%{transform: rotate(200deg) translate(10px, 120vh);}
	100%{transform: rotate(200deg) translate(10px, 120vh);}	
}
@keyframes foquete-bottom{
	0%{transform: rotate(20deg) translate(0px, 0px);}
	80%{transform: rotate(20deg) translate(10px, 120vh);}
	100%{transform: rotate(20deg) translate(10px, 120vh);}	
}
#faq{
	overflow: visible;
}
.oculto{
	opacity: 0;
	transition: all 1.5s ease;
}
.show{
	opacity: 1;
	transform: translate(0,0) !important;
}
.oculto.left{
	transform: translate(-270px,0);
}
.oculto.right{
	transform: translate(270px,0);
}
.oculto.top{
	transform: translate(0, -50px);
}
.oculto.bottom{
	transform: translate(0, 200px);
}

/* O contêiner que "corta" o conteúdo que transborda e define o campo de visão */
.scrolling-wrapper {
 overflow: hidden;
  /* Opcional: Adiciona um gradiente suave nas bordas para um efeito mais polido */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* O trilho que se move precisa ser flexível e não quebrar a linha */
.scrolling-wrapper .row {
  display: flex;
  flex-wrap: nowrap; 
  width: max-content; /* Faz a largura da row ser a soma de todos os filhos */
}

/* Para as colunas, é bom definir uma largura fixa para consistência na animação */
.scrolling-wrapper .row .col-md-2 {
  width: 300px; /* Ajuste a largura conforme necessário */
  flex-shrink: 0; 
}

/* ===== ANIMAÇÃO DE SCROLL PARA A ESQUERDA ===== */

.scroll-left .row {
  /* Aplica a animação: nome, duração, velocidade, repetição */
  animation: scroll-left 40s linear infinite;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    /* Move o trilho para a esquerda em 50% de sua largura total.
       Como duplicamos o conteúdo, -50% nos leva exatamente ao
       início da cópia, criando o loop perfeito. */
    transform: translateX(-50%);
  }
}

/* ===== ANIMAÇÃO DE SCROLL PARA A DIREITA (para seu flex-row-reverse) ===== */

.scroll-right .row {
  /* Começa com o trilho já deslocado */
  transform: translateX(-50%);
  animation: scroll-right 40s linear infinite;
}

@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 868px){
	.hidden-m{display: inline-block !important;}
	.hidden-p{display: none !important;}
	#topo h1{font-size: 56px; line-height: 62px;}
	#topo h2{font-size: 24px;}
	.bt-destaque a{font-size: 16px;}
	.video-vendas iframe{min-height: 330px}
	#depoimentos .title-section{text-align: center;font-size: 64px}
	#depoimentos .subtitle{text-align: center;margin-bottom: 30px}
	#professores .fbeto{text-align: center !important;}
	#professores .dpri{text-align: left !important;}
}
@media (max-width: 670px){
	#topo h2{font-size: 20px;letter-spacing: -1px;}
	.video-vendas iframe{min-height: 250px}
}
@media (max-width: 460px){
	#topo h1{font-size: 46px;line-height: 50px;margin-bottom: 20px}
	#topo h2{font-size: 18px;}
	.bt-destaque a{font-size: 14px;}
	.video-vendas iframe{min-height: 225px}
	#depoimentos .title-section{font-size: 48px}
	#outra-vantagem .dest h3{font-size: 18px}
	.quanto h6{font-size: 18px;}
	.scrolling-wrapper .row .col-md-2{width: 150px}
}
@media (max-width: 380px){
	#topo h1{font-size: 34px;}
	#topo h2{font-size: 16px;}	
}