:root{
	--main-empresa: #CC0F4A;
	--nap-claro: #FAF8F6;
	--nap-card: #212121;
	--nap-cinza: #9C9C9C;
	/* cinza mais claro, para texto corrido sobre os cards escuros */
	--nap-cinza-texto: #B3B3B3;
}

/* sistema.css aplica `* { color: var(--main-black) }`, então filhos inline
   (strong, span, a, li) recebem preto direto em vez de herdar a cor clara do
   bloco escuro. Cada container escuro fixa a cor e libera a herança abaixo.
   Regras mais específicas depois deste ponto continuam vencendo os acentos. */
#faq .grupo,
#bonus .card-bonus,
#prof .pull-quote,
#investimento .box{
	color: var(--main-white);
}

#faq .grupo *,
#bonus .card-bonus *,
#prof .pull-quote *,
#investimento .box *,
#ind .card-body *,
#publico .lista .item *,
#sobre .box .item *,
#cenario .dado *{
	color: inherit;
}

/********** 1. FAIXA DE TOPO (renderizada em template/template.php) **********/

#faixa-topo{
	background-color: var(--nap-card);
	padding: 10px 0;
}

#faixa-topo p{
	color: var(--main-white);
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin-bottom: 0;
}

@media(max-width: 767px){
	#faixa-topo p{
		font-size: 13px;
		line-height: 18px;
	}
}

/********** 2. HERO **********/

#home{
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	min-height: 600px;
}

#home .logo{
	width: 100%;
	max-width: 250px;
}

#home .leg{
	font-size: 21px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--main-white);
}

#home h2, #home h2 strong{
	color: var(--main-white);
	font-size: 34px;
}

#home h2 strong{
	font-weight: bold;
}

#home p, #home p strong{
	color: var(--main-white);
}

/* badges do Hero: linha de 4 itens com check, entre o subtítulo e o CTA */
#home .badges{
	display: flex;
	flex-wrap: wrap;
	margin-top: 25px;
}

/* 50% fixo cada, formando uma grade 2x2 estável.
   box-sizing explícito porque sistema.css usa `box-sizing: inherit` no `*`,
   e sem isso o padding estouraria os 50%. */
#home .badges .badge-item{
	box-sizing: border-box;
	width: 50%;
	padding-right: 15px;
	color: var(--main-white);
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* branco, não crimson: o fundo do Hero já é crimson e o ícone sumiria nele */
#home .badges .badge-item i{
	color: var(--main-white);
	margin-right: 8px;
}

@media(max-width: 992px){
	#home{
		background-position: top left;
	}
	#home .leg{
		margin-top: 30px;
	}
	#home .botao a{
		width: 100%;
	}
}

@media(max-width: 767px){
	#home h2, #home h2 strong{
		font-size: 32px;
	}
}

/********** 3. CENÁRIO MUDOU **********/

#cenario{
	background-color: var(--nap-claro);
	padding-top: 60px;
	padding-bottom: 60px;
}

#cenario h2{
	color: var(--main-empresa);
	font-size: 38px;
	font-weight: bold;
}

#cenario .dado{
	border-left: 3px solid var(--main-empresa);
	padding-left: 20px;
	margin-bottom: 25px;
}

#cenario .dado .destaque{
	color: var(--main-black);
	font-size: 22px;
	line-height: 28px;
	font-weight: bold;
	margin-bottom: 8px;
}

#cenario .dado p{
	color: var(--main-black);
	font-size: 17px;
	line-height: 25px;
	margin-bottom: 0;
}

/* a fonte segue inline, na continuação do parágrafo, para encurtar o bloco */
#cenario .dado .fonte{
	color: var(--nap-cinza);
	font-size: 13px;
	font-style: italic;
}

#cenario .fechamento{
	color: var(--main-black);
	font-size: 21px;
	line-height: 30px;
	font-weight: bold;
	text-align: center;
	margin-top: 50px;
}

#cenario .fechamento span{
	color: var(--main-empresa);
}

@media(max-width: 767px){
	#cenario h2{
		font-size: 30px;
	}
	#cenario .dado .destaque{
		font-size: 19px;
		line-height: 25px;
	}
	#cenario .fechamento{
		font-size: 18px;
		line-height: 26px;
	}
}

/********** 4. QUEM VAI TE ENSINAR **********/

#prof{
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: var(--main-black);
}

#prof .titulo{
	font-size: 34px;
	line-height: 36px;
	font-weight: bold;
	color: var(--main-white);
}

#prof .faixa{
	background-color: var(--main-empresa);
	height: 3px;
	width: 200px;
	margin-top: 10px;
}

#prof p{
	color: var(--main-white);
	font-size: 18px;
	margin-top: 10px;
}

#prof .foto{
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#prof .info{
	margin-bottom: 35px;
}

#prof .info .nome{
	color: var(--main-white);
	font-size: 21px;
	font-weight: bold;
}

#prof .info .crm{
	color: var(--nap-cinza);
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

/* link de texto ao lado do RQE, no lugar do antigo botão de currículo */
#prof .info .crm .link-curriculo{
	color: var(--main-empresa);
	text-decoration: underline;
	margin-left: 6px;
}

#prof .info .crm .link-curriculo:hover{
	color: var(--main-white);
}

#prof .info .leg{
	color: var(--main-white);
	font-size: 16px;
}

#prof .pull-quote{
	position: relative;
	background-color: var(--nap-card);
	border-left: 4px solid var(--main-empresa);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding: 40px 50px;
	text-align: center;
}

#prof .pull-quote:before{
	content: "\201C";
	position: absolute;
	top: 10px;
	left: 25px;
	color: var(--main-empresa);
	font-size: 90px;
	line-height: 1;
	opacity: .5;
}

#prof .pull-quote p{
	color: var(--main-white);
	font-size: 22px;
	line-height: 32px;
	font-style: italic;
	margin-top: 0;
	margin-bottom: 15px;
	position: relative;
}

#prof .pull-quote .autor{
	color: var(--nap-cinza);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

@media(max-width: 1200px){
	#prof .titulo{
		font-size: 28px;
	}
}

@media(max-width: 992px){
	#prof .titulo{
		font-size: 24px;
		margin-top: 30px;
	}
}

@media(max-width: 767px){
	#prof .pull-quote{
		padding: 30px 25px;
	}
	#prof .pull-quote p{
		font-size: 18px;
		line-height: 27px;
	}
}

/********** 5. PARA QUEM É **********/

#publico{
	background-color: var(--nap-claro);
	padding-top: 60px;
	padding-bottom: 60px;
}

#publico h3{
	color: var(--main-empresa);
	font-size: 32px;
	font-weight: bold;
}

#publico .intro{
	color: var(--main-black);
	font-size: 17px;
	line-height: 25px;
	margin-top: 15px;
}

#publico .lista{
	background-color: var(--main-white);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	overflow: hidden;
	height: 100%;
}

#publico .lista .cabecalho{
	color: var(--main-white);
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding: 15px 20px;
}

#publico .lista.sim .cabecalho{
	background-color: var(--main-empresa);
}

#publico .lista.nao .cabecalho{
	background-color: var(--main-black);
}

#publico .lista .corpo{
	padding: 25px;
}

#publico .lista .item{
	position: relative;
	color: var(--main-black);
	font-size: 16px;
	line-height: 23px;
	padding-left: 28px;
	margin-bottom: 18px;
}

#publico .lista .item:last-child{
	margin-bottom: 0;
}

#publico .lista .item i{
	position: absolute;
	left: 0;
	top: 4px;
	font-size: 15px;
}

#publico .lista.sim .item i{
	color: var(--main-empresa);
}

#publico .lista.nao .item i{
	color: var(--nap-cinza);
}

/* selo de destaque, mesmo tratamento de pill usado nos rótulos dos bônus */
#publico .exclusivo{
	display: inline-block;
	background-color: var(--main-empresa);
	color: var(--main-white);
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 12px 30px;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	margin-top: 20px;
}

@media(max-width: 522px){
	#publico .exclusivo{
		font-size: 16px;
		padding: 12px 20px;
	}
}

@media(max-width: 767px){
	#publico h3{
		font-size: 26px;
	}
}

/********** 6. O QUE ESTÁ NO CURSO **********/

#faq{
	background-color: var(--main-black);
	padding-top: 60px;
	padding-bottom: 60px;
}

#faq h3{
	color: var(--main-white);
	font-size: 32px;
	font-weight: bold;
}

#faq .intro{
	color: var(--main-white);
	font-size: 18px;
	margin-top: 10px;
}

#faq .grupo{
	background-color: var(--nap-card);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding: 25px;
	height: 100%;
}

#faq .grupo .rotulo{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #3a3a3a;
	padding-bottom: 12px;
	margin-bottom: 15px;
}

#faq .grupo .rotulo .numero{
	color: var(--main-empresa);
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#faq .grupo .rotulo .duracao{
	color: var(--nap-cinza);
	font-size: 13px;
	text-transform: uppercase;
}

#faq .grupo .titulo{
	color: var(--main-white);
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}

#faq .grupo p{
	color: var(--nap-cinza-texto);
	font-size: 15px;
	line-height: 22px;
	margin-top: 0;
	margin-bottom: 18px;
}

#faq .grupo ul{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

#faq .grupo ul li{
	position: relative;
	color: var(--main-white);
	font-size: 15px;
	line-height: 22px;
	padding-left: 18px;
	margin-bottom: 12px;
}

#faq .grupo ul li:last-child{
	margin-bottom: 0;
}

#faq .grupo ul li:before{
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--main-empresa);
}

#faq .grupo ul li strong{
	font-weight: bold;
}

#faq h5, #faq h5 strong{
	color: var(--main-white);
	font-size: 30px;
}

#faq h5 strong{
	font-weight: bold;
}

@media(max-width: 767px){
	#faq h3{
		font-size: 26px;
	}
	#faq h5, #faq h5 strong{
		font-size: 24px;
	}
	#faq .btn{
		width: 100%;
	}
}

/********** 7. BÔNUS **********/

#bonus{
	background-color: var(--nap-claro);
	padding-top: 60px;
	padding-bottom: 60px;
}

#bonus h3{
	color: var(--main-empresa);
	font-size: 32px;
	font-weight: bold;
}

#bonus .card-bonus{
	background-color: var(--nap-card);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding: 25px;
	height: 100%;
}

#bonus .card-bonus .rotulo{
	display: inline-block;
	background-color: var(--main-empresa);
	color: var(--main-white);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	margin-bottom: 15px;
}

/* selo secundário, contorno em vez de preenchido, para não competir
   com o rótulo do bônus que fica ao lado */
#bonus .card-bonus .selo-atualiza{
	display: inline-block;
	border: 1px solid var(--main-empresa);
	background-color: rgba(204, 15, 74, .28);
	color: var(--main-white);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	margin-left: 8px;
	margin-bottom: 15px;
}

#bonus .card-bonus .selo-atualiza i{
	margin-right: 5px;
}

#bonus .card-bonus .titulo{
	color: var(--main-white);
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}

#bonus .card-bonus p{
	color: var(--nap-cinza-texto);
	font-size: 15px;
	line-height: 23px;
	margin-bottom: 0;
}

@media(max-width: 767px){
	#bonus h3{
		font-size: 26px;
	}
}

/********** 8. TUDO QUE VOCÊ RECEBE **********/

#sobre{
	background-color: var(--main-empresa);
	padding-top: 60px;
	padding-bottom: 40px;
}

#sobre h2{
	color: var(--main-white);
	font-size: 34px;
	font-weight: bold;
}

#sobre .box{
	display: flex;
	justify-content: center;
	align-items: initial;
	flex-wrap: wrap;
}

#sobre .box .item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 23%;
	margin-left: 1%;
	margin-right: 1%;
	border: 1px solid var(--main-white);
	padding: 20px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	margin-bottom: 30px;
}

/* caixa de altura fixa para os 4 ícones: os PNGs têm proporções diferentes
   (de 46x50 a 55x77) e sem isso cada card alinharia o texto numa altura. */
#sobre .box .item .icone{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}

/* os ícones nap*.png são crimson sobre transparente, ou seja, invisíveis
   sobre o fundo crimson desta seção. O filtro os deixa brancos. */
#sobre .box .item .icone img{
	max-height: 100%;
	max-width: 100%;
	filter: brightness(0) invert(1);
}

#sobre .box .item .texto{
	color: var(--main-white);
	font-size: 17px;
	line-height: 24px;
	margin-top: 20px;
}

@media(max-width: 992px){
	#sobre .box .item{
		width: 48%;
	}
}

@media(max-width: 767px){
	#sobre h2{
		font-size: 28px;
	}
}

@media(max-width: 522px){
	#sobre .box .item{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/********** 9. INVESTIMENTO **********/

#investimento{
	background-color: var(--main-black);
	padding-top: 60px;
	padding-bottom: 60px;
}

#investimento h3{
	color: var(--main-white);
	font-size: 34px;
	font-weight: bold;
}

#investimento .box{
	background-color: var(--nap-card);
	border: 1px solid #3a3a3a;
	padding: 40px 35px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	text-align: center;
}

#investimento .box .logo{
	width: 100%;
	max-width: 220px;
	margin-bottom: 20px;
}

#investimento .title{
	color: var(--main-white);
	font-size: 21px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #3a3a3a;
	padding-bottom: 20px;
	margin-bottom: 25px;
}

#investimento .lista{
	text-align: left;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

#investimento .lista .item{
	display: flex;
	align-items: flex-start;
	color: var(--main-white);
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 12px;
}

#investimento .lista .item i{
	color: var(--main-empresa);
	margin-right: 10px;
	margin-top: 5px;
	flex-shrink: 0;
}

#investimento .preco{
	color: var(--main-white);
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
}

#investimento .parcela{
	color: var(--nap-cinza);
	font-size: 18px;
	margin-top: 8px;
}

/* --- Garantia --- */

#investimento .garantia{
	align-items: center;
	margin-top: 70px;
}

#investimento .garantia .selo{
	width: 100%;
	max-width: 280px;
}

#investimento .garantia .selo-texto{
	fill: var(--main-white);
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 3px;
}

#investimento .garantia .selo-numero{
	fill: var(--main-white);
	font-size: 92px;
	font-weight: bold;
}

#investimento .garantia h4{
	color: var(--main-white);
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;
}

#investimento .garantia p{
	color: var(--nap-cinza-texto);
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 15px;
}

@media(max-width: 992px){
	#investimento .garantia{
		margin-top: 50px;
	}
	#investimento .garantia h4{
		margin-top: 30px;
		text-align: center;
	}
	#investimento .garantia p{
		text-align: center;
	}
}

@media(max-width: 767px){
	#investimento .garantia h4{
		font-size: 24px;
	}
	#investimento .garantia .selo{
		max-width: 200px;
	}
}

#investimento .link-whatsapp{
	display: inline-block;
	color: var(--main-white);
	font-size: 16px;
	text-decoration: underline;
	margin-top: 25px;
}

#investimento .link-whatsapp:hover{
	color: var(--main-empresa);
}

@media(max-width: 767px){
	#investimento h3{
		font-size: 28px;
	}
	#investimento .box{
		padding: 30px 20px;
	}
	#investimento .preco{
		font-size: 44px;
	}
	#investimento .btn{
		width: 100%;
	}
}

/********** 10. FAQ **********/

#ind{
	background-color: var(--nap-claro);
	padding-top: 60px;
	padding-bottom: 60px;
}

#ind h3{
	color: var(--main-empresa);
	font-size: 34px;
	font-weight: bold;
}

#ind .card{
	border: 0;
	background-color: transparent;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	overflow: hidden;
}

#ind .card-header{
	background-color: var(--main-black);
	border-bottom: 0;
	padding: 5px 20px;
}

#ind .card-header button{
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	white-space: normal;
}

#ind .card-header i{
	color: var(--main-empresa);
	font-size: 20px;
	margin-left: 15px;
}

#ind .card-header .box-text .text{
	color: var(--main-white);
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}

#ind .card-body{
	background-color: var(--main-black);
	color: var(--main-white);
	font-size: 15px;
	line-height: 23px;
	padding-top: 0;
}

#ind .card-body a{
	color: var(--main-empresa);
	text-decoration: underline;
}

@media(max-width: 767px){
	#ind h3{
		font-size: 28px;
	}
}

/********** 11. CTA FINAL **********/

#agencia{
	background-color: var(--main-empresa);
	padding-top: 60px;
	padding-bottom: 60px;
}

#agencia h3{
	color: var(--main-white);
	font-size: 34px;
	font-weight: bold;
}

#agencia p, #agencia p span{
	color: var(--main-white);
	font-size: 19px;
	line-height: 28px;
}

#agencia p span{
	font-weight: bold;
}

#agencia .link-whatsapp{
	display: inline-block;
	color: var(--main-white);
	font-size: 16px;
	text-decoration: underline;
	margin-top: 25px;
}

#agencia .link-whatsapp:hover{
	color: var(--main-black);
}

@media(max-width: 767px){
	#agencia h3{
		font-size: 26px;
	}
	#agencia .btn{
		width: 100%;
	}
}

/********** MODAL **********/

.modal .modal-body{
	background-color: var(--main-black);
	padding: 30px 50px;
}

.modal .modal-footer{
	background-color: var(--main-black);
	border: 0;
	text-align: center;
}

.modal .modal-body img{
	max-width: 100%;
	border-radius: 55px;
	-moz-border-radius: 55px;
	-webkit-border-radius: 55px;
}

.modal .modal-body .modal-nome{
	font-size: 21px;
	font-weight: bold;
	margin-top: 30px;
}

.modal .modal-body .modal-curriculo{
	font-size: 14px;
}

.modal .modal-body .modal-logo{
	max-width: 250px;
	width: 100%;
	border-radius: 0;
}

.modal .modal-body *{
	color: var(--main-white);
}