/* =========================================================================
   AprovaNutro Sprint Final 2026 — LP  (/aprovanutro/sprintfinal)
   Estrutura espelhada em nap_skills.css, com a paleta do AprovaNutro.
   ========================================================================= */

:root{
	/* --main-empresa (#E72F5C), --main-black, --main-white e --main-blue vêm
	   de sistema.css. Aqui só os tons auxiliares da página. */
	--sprint-rosa-claro: #FF577B;
	/* azul da logo (--main-blue #3C58A4) como cor estrutural: títulos, cabeçalhos
	   e blocos escuros. O rosa fica reservado para acento, urgência e CTA. */
	--sprint-azul: #3C58A4;
	--sprint-azul-claro: #7B96E8;   /* azul legível sobre fundo escuro */
	--sprint-azul-esc: #16234A;     /* blocos escuros de largura inteira */
	--sprint-card: #1E2E58;         /* cards sobre fundo escuro */
	--sprint-borda: #35487A;
	--sprint-claro: #f4f4f4;
	--sprint-cinza: #9C9C9C;
	--sprint-cinza-texto: #B3B3B3;
}

/* sistema.css aplica `* { color: var(--main-black) }`, então filhos inline
   (strong, span, a, li, i) 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. */
#faixa-topo,
#home,
#formato,
#incluido,
#dor .destaque-final,
#esp .pull-quote,
#investimento,
#ind .card-header,
#ind .card-body,
#agencia{
	color: var(--main-white);
}

/* Vale para toda a descendência dos blocos escuros — inclusive <i>, <span> e
   <strong> soltos no meio do texto, que é onde o preto reaparecia. As regras
   de acento abaixo são mais específicas e continuam vencendo esta. */
#faixa-topo *,
#home *,
#formato *,
#incluido *,
#dor .destaque-final *,
#esp .pull-quote *,
#investimento *,
#ind .card-header *,
#ind .card-body *,
#agencia *,
#publico .lista .item *,
#dor .dado *{
	color: inherit;
}

/********** 1. BARRA DE URGÊNCIA **********/

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

#faixa-topo p{
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
}

#faixa-topo p a{
	text-decoration: underline;
	margin-left: 8px;
}

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

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

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

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

#home .leg{
	font-size: 16px;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--sprint-rosa-claro);
}

#home h2, #home h2 strong{
	color: var(--main-white);
	font-size: 36px;
	line-height: 46px;
}

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

#home p, #home p strong{
	color: var(--main-white);
	font-size: 17px;
	line-height: 26px;
	margin-top: 15px;
}

#home .nome-curso{
	color: var(--main-white);
	font-size: 26px;
	font-weight: bold;
	line-height: 34px;
}

/* "Sprint Final 2026" fica como assinatura sob o nome: menor, mas destacado
   em azul claro para não virar legenda apagada. */
#home .subtitulo{
	color: var(--sprint-azul-claro);
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 6px;
}

/* contador: bloco de destaque do Hero. O .tempo é preenchido pelo JS no fim da view */
#home .contador{
	display: inline-block;
	background-color: rgba(0, 0, 0, .45);
	border: 1px solid var(--main-empresa);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	padding: 18px 30px;
	text-align: center;
}

#home .contador .rotulo{
	color: var(--main-white);
	font-size: 15px;
	font-weight: bold;
}

#home .contador .rotulo i{
	color: var(--sprint-rosa-claro);
	margin-right: 6px;
}

#home .contador .tempo{
	color: var(--sprint-rosa-claro);
	font-size: 40px;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: 1px;
	margin-top: 6px;
	/* largura tabular evita o número "pular" a cada segundo */
	font-variant-numeric: tabular-nums;
}

@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: 30px;
		line-height: 38px;
	}
	#home .nome-curso{
		font-size: 21px;
		line-height: 28px;
	}
	#home .subtitulo{
		font-size: 13px;
	}
	#home .contador{
		display: block;
		padding: 15px 20px;
	}
	#home .contador .tempo{
		font-size: 32px;
	}
}

/********** 3. A DOR **********/

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

#dor h2{
	color: var(--sprint-azul);
	font-size: 38px;
	font-weight: bold;
}

#dor .dado{
	border-left: 3px solid var(--sprint-azul);
	padding-left: 20px;
	margin-bottom: 25px;
}

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

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

@media(max-width: 767px){
	#dor h2{
		font-size: 28px;
	}
	#dor .dado .destaque{
		font-size: 19px;
		line-height: 25px;
	}
}

/********** 4. O QUE É O SPRINT FINAL **********/

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

#formato h3{
	color: var(--sprint-azul-claro);
	font-size: 32px;
	font-weight: bold;
}

#formato .intro{
	color: var(--sprint-cinza-texto);
	font-size: 17px;
	line-height: 25px;
	margin-top: 15px;
}

#formato .chamada-blocos{
	display: inline-block;
	background-color: var(--sprint-azul);
	color: var(--main-white);
	font-size: 18px;
	font-weight: bold;
	padding: 12px 30px;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
}

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

#formato .grupo .rotulo{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--sprint-borda);
	padding-bottom: 12px;
	margin-bottom: 15px;
}

#formato .grupo .rotulo .numero{
	color: var(--sprint-azul-claro);
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

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

#formato .grupo .titulo{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

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

#formato .equipe{
	color: var(--sprint-cinza-texto);
	font-size: 17px;
	line-height: 26px;
	text-align: center;
	margin-top: 35px;
}

/* caixa de destaque que fecha a seção da dor */
#dor .destaque-final{
	margin-top: 45px;
	display: flex;
	align-items: flex-start;
	background-color: var(--sprint-azul-esc);
	border-left: 5px solid var(--main-empresa);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	padding: 25px;
	margin-top: 25px;
	font-size: 17px;
	line-height: 26px;
}

#dor .destaque-final i{
	color: var(--main-empresa);
	font-size: 24px;
	margin-right: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

@media(max-width: 992px){
	#formato .grupo{
		margin-bottom: 20px;
	}
}

@media(max-width: 767px){
	#formato h3{
		font-size: 26px;
	}
	#formato .chamada-blocos{
		font-size: 16px;
		padding: 12px 20px;
	}
	#dor .destaque-final{
		font-size: 15px;
		line-height: 23px;
		padding: 20px;
	}
}

/********** 5. PROGRAMAÇÃO COMPLETA **********/

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

#programacao h3{
	color: var(--sprint-azul);
	font-size: 32px;
	font-weight: bold;
}

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

#programacao .table{
	background-color: var(--main-white);
	margin-bottom: 0;
	border-radius: 12px;
	overflow: hidden;
}

#programacao .table-header th{
	background-color: var(--sprint-azul);
	color: var(--main-white);
	font-weight: bold;
	border-color: var(--sprint-azul);
	vertical-align: middle;
}

#programacao .table tbody tr td{
	color: var(--main-black);
	font-size: 15px;
	vertical-align: middle;
	padding: 14px 15px;
}

/* Encontro 8 — clímax do produto */
#programacao .table tbody tr.destaque td{
	background-color: #fde8ee;
	border-top: 2px solid var(--main-empresa);
	border-bottom: 2px solid var(--main-empresa);
}

#programacao .table tbody tr.destaque i{
	color: var(--main-empresa);
}

/* No mobile a tabela vira cards: o thead some e cada célula ganha o rótulo
   via data-label (mesmo pattern de aprova_prog.css). */
@media(max-width: 767px){
	#programacao h3{
		font-size: 26px;
	}

	#programacao .table{
		display: block;
	}

	#programacao .table thead{
		display: none;
	}

	#programacao .table tbody{
		display: block;
	}

	#programacao .table tbody tr{
		display: block;
		background-color: var(--main-white);
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	#programacao .table tbody tr td{
		display: block;
		border: 0;
		border-bottom: 1px solid #eee;
		padding: 12px 15px;
	}

	#programacao .table tbody tr td:last-child{
		border-bottom: 0;
	}

	#programacao .table tbody tr td::before{
		content: attr(data-label);
		display: block;
		color: var(--sprint-azul);
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 5px;
	}

	#programacao .table tbody tr.destaque td{
		border-top: 0;
		border-bottom: 1px solid #f6c9d6;
	}
}

/********** 6. QUEM TE PREPARA **********/

#esp{
	background-color: var(--sprint-azul-esc);
	padding-top: 60px;
	padding-bottom: 60px;
}

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

#esp .faixa{
	width: 350px;
	max-width: 100%;
	height: 5px;
	background-color: var(--main-empresa);
	margin: 10px auto 0;
}

#esp .box{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* 10 docentes: 5 por linha fecha duas fileiras exatas */
#esp .box .item{
	width: 20%;
}

#esp .box .item a{
	text-decoration: none;
}

/* As fotos vêm de duas pastas com proporções diferentes (media/aprovanutro é
   480x480, media/curriculo não é quadrada). aspect-ratio + object-fit normaliza
   tudo na grade sem precisar reeditar imagem. */
#esp .box .item .imagem img{
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top center;
	filter: grayscale(100%);
	transition: filter .3s;
}

#esp .box .item:hover .imagem img{
	filter: none;
}

/* o nome fica no DOM (leitor de tela e SEO), mas escondido: a grade é de fotos */
#esp .box .item .nome{
	display: none;
}

#esp .pull-quote{
	position: relative;
	background-color: var(--sprint-card);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding: 35px 40px;
	margin-top: 50px;
}

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

#esp .pull-quote p{
	font-size: 21px;
	line-height: 31px;
	font-style: italic;
	text-align: center;
	margin-bottom: 0;
}

/* 10 itens: 4 por linha deixa uma última fileira de 2, que o justify-content
   centraliza. 3 por linha deixaria uma foto sozinha e pareceria quebrado. */
@media(max-width: 992px){
	#esp .box .item{
		width: 25%;
	}
}

@media(max-width: 767px){
	#esp h3{
		font-size: 26px;
	}
	#esp .box .item{
		width: 50%;
	}
	#esp .pull-quote{
		padding: 30px 25px;
	}
	#esp .pull-quote p{
		font-size: 17px;
		line-height: 26px;
	}
}

/********** 8. PARA QUEM É **********/

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

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

/* branco + borda: a seção é --sprint-claro, então o card precisa se separar
   do fundo em vez de repetir a mesma cor. */
#publico .lista{
	background-color: var(--main-white);
	border: 1px solid #E1E5EA;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	overflow: hidden;
	height: 100%;
}

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

#publico .lista .cabecalho i{
	color: var(--main-white);
	margin-right: 8px;
}

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

#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 a{
	color: var(--sprint-azul);
	text-decoration: underline;
	font-weight: bold;
}

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

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

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

@media(max-width: 992px){
	#publico .lista{
		margin-bottom: 20px;
	}
}

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

/********** 8b. BANNER SEPARADOR **********/

/* Imagem decorativa (alt vazio): faz a passagem da seção clara para a escura.
   A arte é 1920x350; em telas estreitas viraria uma tira de ~70px, então o
   min-height + object-fit mantém o recorte legível. */
#banner{
	padding: 0;
	line-height: 0;
}

#banner img{
	display: block;
	width: 100%;
	min-height: 140px;
	object-fit: cover;
	object-position: center;
}

/********** 9. O QUE ESTÁ INCLUÍDO **********/

#incluido{
	background-color: var(--sprint-azul-esc);
	padding-top: 60px;
	padding-bottom: 60px;
}

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

#incluido .box{
	background-color: var(--sprint-card);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding: 35px 40px;
}

#incluido .box .item{
	display: flex;
	align-items: flex-start;
	font-size: 17px;
	line-height: 26px;
	margin-bottom: 18px;
}

#incluido .box .item:last-child{
	margin-bottom: 0;
}

#incluido .box .item i{
	color: var(--main-empresa);
	margin-right: 12px;
	margin-top: 6px;
	flex-shrink: 0;
}

@media(max-width: 767px){
	#incluido h2{
		font-size: 26px;
	}
	#incluido .box{
		padding: 25px 20px;
	}
	#incluido .box .item{
		font-size: 15px;
		line-height: 23px;
	}
}

/********** 10. INVESTIMENTO **********/

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

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

#investimento .intro{
	color: var(--sprint-cinza-texto);
	font-size: 16px;
	line-height: 24px;
	margin-top: 20px;
}

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

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

#investimento .title{
	font-size: 21px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid var(--sprint-borda);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

/* rótulo da faixa vigente, resolvida no controller pela data do servidor */
#investimento .faixa-label{
	display: inline-block;
	background-color: var(--main-empresa);
	color: var(--main-white);
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 7px 20px;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	margin-bottom: 10px;
}

/* prazo do lote logo abaixo do selo: reforça a urgência com a data, não só com
   o contador do topo */
#investimento .faixa-prazo{
	color: var(--sprint-cinza-texto);
	font-size: 14px;
}

#investimento .faixa-prazo strong{
	color: var(--sprint-rosa-claro);
	font-weight: bold;
}

/* As duas formas de pagamento aparecem juntas, com a economia do à vista escrita:
   quem quiser desconto já vê o número na tela em vez de pedir. */
#investimento .pagamentos{
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	margin-top: 25px;
}

#investimento .pagamentos .opcao{
	flex: 1;
	max-width: 260px;
	border: 1px solid var(--sprint-borda);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	padding: 20px 15px;
}

#investimento .pagamentos .opcao.avista{
	border-color: var(--main-empresa);
	background-color: rgba(231, 47, 92, .10);
}

#investimento .pagamentos .rotulo{
	color: var(--sprint-cinza-texto);
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#investimento .pagamentos .valor{
	font-size: 27px;
	font-weight: bold;
	line-height: 1.2;
	margin-top: 8px;
}

#investimento .pagamentos .opcao.avista .valor{
	color: var(--main-white);
	font-size: 38px;
}

#investimento .pagamentos .detalhe{
	color: var(--sprint-cinza);
	font-size: 14px;
	margin-top: 6px;
}

#investimento .pagamentos .detalhe.economia{
	color: var(--sprint-rosa-claro);
	font-weight: bold;
}

#investimento .pagamentos .ou{
	display: flex;
	align-items: center;
	color: var(--sprint-cinza);
	font-size: 14px;
	text-transform: uppercase;
}

/* total no cartão dentro da célula da tabela, em segunda linha discreta */
#investimento .table .total{
	display: block;
	color: var(--sprint-cinza);
	font-size: 13px;
	font-weight: normal;
}

/* --- tabela de faixas --- */

#investimento .table{
	background-color: var(--sprint-card);
	margin-bottom: 0;
}

#investimento .table-header th{
	background-color: var(--sprint-azul);
	color: var(--main-white);
	font-weight: bold;
	border-color: var(--sprint-azul);
	vertical-align: middle;
}

#investimento .table tbody tr td{
	color: var(--main-white);
	font-size: 15px;
	vertical-align: middle;
	padding: 14px 15px;
	border-color: var(--sprint-borda);
}

/* Rosa translúcido sobre o azul do card virava um roxo sujo. A faixa vigente
   agora se destaca por tom de azul, na mesma família do cabeçalho, e o rosa
   entra só como marcador na borda. */
#investimento .table tbody tr.destaque td{
	background-color: #2A3D73;
	font-weight: bold;
}

#investimento .table tbody tr.destaque td:first-child{
	box-shadow: inset 3px 0 0 var(--main-empresa);
}

#investimento .table tbody tr.destaque i{
	color: var(--main-empresa);
}

/* --- condições especiais (sem valores: negociação é no WhatsApp) --- */

#investimento .especial{
	background-color: var(--sprint-card);
	border: 1px solid var(--sprint-borda);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding: 30px 35px;
	text-align: center;
}

#investimento .especial h4{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 12px;
}

#investimento .especial p{
	color: var(--sprint-cinza-texto);
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 20px;
}

@media(max-width: 767px){
	#investimento h3{
		font-size: 26px;
	}
	#investimento .box{
		padding: 30px 20px;
	}
	#investimento .pagamentos{
		display: block;
	}
	#investimento .pagamentos .opcao{
		max-width: none;
		margin-bottom: 12px;
	}
	#investimento .pagamentos .ou{
		justify-content: center;
		margin-bottom: 12px;
	}
	#investimento .pagamentos .opcao.avista .valor{
		font-size: 32px;
	}
	#investimento .btn{
		width: 100%;
	}
	#investimento .especial{
		padding: 25px 20px;
	}

	/* mesma virada de tabela para cards da programação */
	#investimento .table{
		display: block;
	}

	#investimento .table thead{
		display: none;
	}

	#investimento .table tbody{
		display: block;
	}

	#investimento .table tbody tr{
		display: block;
		border: 1px solid var(--sprint-borda);
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	#investimento .table tbody tr td{
		display: block;
		border: 0;
		border-bottom: 1px solid var(--sprint-borda);
	}

	#investimento .table tbody tr td:last-child{
		border-bottom: 0;
	}

	#investimento .table tbody tr td::before{
		content: attr(data-label);
		display: block;
		color: var(--sprint-azul-claro);
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 5px;
	}
}

/********** 11. FAQ **********/

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

#ind h3{
	color: var(--sprint-azul);
	font-size: 32px;
	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(--sprint-azul-esc);
	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(--sprint-azul-esc);
	color: var(--main-white);
	font-size: 15px;
	line-height: 23px;
	padding-top: 0;
}

#ind .card-body a{
	color: var(--sprint-azul-claro);
	text-decoration: underline;
}

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

/********** 12. CTA FINAL **********/

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

#agencia h3{
	color: var(--main-white);
	font-size: 32px;
	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 .reforco{
	color: var(--main-white);
	font-size: 16px;
	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);
}

#agencia .nota{
	color: var(--main-white);
	font-size: 13px;
	line-height: 20px;
	opacity: .85;
	margin-top: 20px;
}

@media(max-width: 767px){
	#agencia h3{
		font-size: 26px;
	}
	#agencia .btn{
		width: 100%;
	}
	#agencia p, #agencia p span{
		font-size: 17px;
		line-height: 25px;
	}
}

/********** MODAL DE CURRÍCULO **********/

#curriculo.modal .modal-body{
	background-color: var(--sprint-azul-esc);
	padding: 30px 50px;
}

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

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

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

#curriculo.modal .modal-body .modal-curriculo{
	font-size: 14px;
	line-height: 22px;
}

/* fundo escuro do modal: mesma armadilha do `*{color: var(--main-black)}` */
#curriculo.modal .modal-body *{
	color: var(--main-white);
}

@media(max-width: 767px){
	#curriculo.modal .modal-body{
		padding: 25px 20px;
	}
}