@font-face {
    font-family: 'gothan';
    src: url('font/Gotham-Book.eot');
    src: url('font/Gotham-Book.eot?#iefix') format('embedded-opentype'),
         url('font/Gotham-Book.woff') format('woff'),
         url('font/Gotham-Book.ttf') format('truetype'),
         url('font/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rift';
    src: url('font/RiftSoft-Medium.eot');
    src: url('font/RiftSoft-Medium.eot?#iefix') format('embedded-opentype'),
         url('font/RiftSoft-Medium.woff') format('woff'),
         url('font/RiftSoft-Medium.ttf') format('truetype'),
         url('font/RiftSoft-Medium.svg#RiftSoft-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root{
	--cor-red: #dc111d;
	--cor-bg: #f2f2f2;
	--cor-blue-light: #70a1ff;
	--cor-cinza2:#e5e5e5;
}

.testeVocacional{
	font-family: 'gothan';
	font-size: 18px;
	color: #333333;
	background-color: #f2f2f2;
}

.container-fluid{
	padding: 2em 0;
}

.bgHeadVocacional{
	background-image: url('../img/bg.jpg');
	background-size: cover;
	padding: 2em 0;
}

.bgHeadVocacional a{
	text-decoration: none;
}

.bgHeadVocacional p{
	font-family: 'rift';
	color:#fff;
	margin:0;
	line-height: 1em;
}

.bgHeadVocacional p:nth-child(1){
	font-size: 6em;
}

.bgHeadVocacional p:nth-child(2){
	font-size: 2em;
	line-height: .9em;
	margin-top: 10px;
}

#bt_comecarTeste{
	font-size: 2em;
	text-align: center;
	margin-top: 2em;
}

#bt_comecarTeste span{
	padding: .5em 1em;
	background-color:#FFF;
	color: var(--cor-red);
	border-radius: 10px;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: all .5s;
	transition: all .5s;
}

.testeVocacional #bt_comecarTeste span:hover{
	background-color: #eaeaea;
}

@media (max-width: 768px){
	.bgHeadVocacional p:nth-child(1){
		font-size: 3em;
	}
	.bgHeadVocacional p:nth-child(2){
		font-size: 1.5em;
		line-height: 1em;
		margin-top: 10px;
	}

	#bt_comecarTeste{
		font-size: 1.5em;
		text-align: center;
		margin-top: 2em;
	}

	#bt_comecarTeste span{
		padding: .5em 1em;
		background-color:#FFF;
		color: var(--cor-red);
		border-radius: 10px;
		font-weight: bold;
		cursor: pointer;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
}

.testeVocacional h3{
	font-size: 1.5em;
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
}

.testeVocacional .comoFunciona{
	padding: 2em 0;
}

.testeVocacional .e-bem-simples{
	margin-top: 2em;
}

.testeVocacional .e-bem-simples div p{
	float: left;
}

.testeVocacional .e-bem-simples div p:nth-child(1){
	border: solid 2px var(--cor-red);
	color: var(--cor-red);
	border-radius: 50%;
	width: 2em;
	height: 2em;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.85em;
}

.testeVocacional .e-bem-simples div p:nth-child(2){
	width: calc(100% - 3em);
	margin: 10px 0 10px 10px;
}

.container-fluid:nth-child(3){
	background-color: var(--cor-cinza2);
}

.testeVocacional .testeFunciona h3{
	color: var(--cor-red);
	font-family: "rift";
	font-size: 2em;
}

.testeVocacional .testeFunciona img{
	margin: 2em auto;
}

.testeVocacional .objetivoTeste h3{
	font-family: "rift";
	font-size: 2em;
}

.testeVocacional .objetivoTeste{
	background-color: var(--cor-red);
	color: #FFF;
}

.testeVocacional .dicaTeste{
	background-color: var(--cor-bg);
}

.testeVocacional .dicaTeste h3{
	font-family: "rift";
	font-size: 2em;
	color: var(--cor-red);
}

/* =========================
   AJUSTES NOVOS (UI pedida)
   ========================= */

/* Centralizar todo o conteúdo do primeiro container */
.bgHeadVocacional .row > [class*="col-"]{ text-align:center; }
.bgHeadVocacional img{ display:block; margin:0 auto; }

/* Parágrafo introdutório acima de "Como funciona?" */
.intro-cf{
	text-align:center;
	margin:0 0 12px;
	color:#444;
}

/* Centralizar imagem da coluna esquerda do "Como funciona?" */
.testeVocacional .comoFunciona img{ display:block; margin:0 auto; }

/* Itens “é-bem-simples”: centralizados com flex */
.testeVocacional .e-bem-simples div{
	display:flex;
	align-items:left;
	justify-content:left;
	gap:10px;
	margin:8px 0;
}

/* Anula floats dos parágrafos dentro dos itens */
.testeVocacional .e-bem-simples div p{ float:none; margin:0; }
.testeVocacional .e-bem-simples div p:nth-child(2){
	width:auto;
	margin:0;
	text-align:left;
}

/* HERO ocupa 80% da altura da tela e centraliza verticalmente */
.bgHeadVocacional{
  min-height: 90vh;            /* altura do viewport */
  display: flex;               /* alinha conteúdo verticalmente */
  align-items: center;         /* centraliza vertical */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;                  /* opcional: zera padding do hero */
}

/* Mantém centralização do conteúdo interno (já existe no projeto) */
.bgHeadVocacional .row > [class*="col-"]{ text-align:center; }