@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* CSS RESET */

/***
    The new CSS reset - version 1.4.7 (last updated 27.1.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
	display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
	box-sizing: border-box;
		font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* Reapply the pointer cursor for anchor tags */
a,
button {
	cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
	list-style: none;
	padding-inline-start: 0px;
}

/* For images to not be able to exceed their container */
img {
	max-width: 100%;
}

/* removes spacing between cells in tables */
table {
	border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
	white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
	-webkit-appearance: revert;
	appearance: revert;
}

a {
	text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block-start: 0px;
	margin-block-end: 0px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
	display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
	-webkit-user-drag: element;
}

/* /CSS RESET */
:root {
	--branco: #fff;
	--preto: #000;
	--amarelo-cebrac: #fcd12d;
	--amarelo-educadores: #ffde00;
	--amarelo-escuro: #e7c51b;
	--azul-cebrac: #002f70;
	--azul-educadores: #0C1B8E;
	--azul-faixa: #003e83;
	--azul-escuro: #00235b;
	--azul-data: #2D53EF;
	--azul-escuro-transparente: rgba(0, 30, 94, 0.356);
	--azul-luz: #2d7ec3;
	--cinza: #747474;
	--cinza-claro: #dddddd;
	--cinza-escuro: #666666;
	--laranja-educadores: #f1c831;
	--marrom-contraste: #694800;

	--verde-cebrac: #007d47;
	--verde-escuro: #004926;
	--verde-educadores: #30a52f;
	--verde-destaque: #7eb620;
	--verde-neon: #4ef33a;
	--verde-opaco: #50b848;
	--sombra-marrom: #6948008a;
	--sombra-leve: rgba(0, 0, 0, 0.2);
	--background-campanha: linear-gradient(0deg, #00bcef 0%, #004ba5 42%);
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {

	font-family: "work sans", Arial, Helvetica, sans-serif;
}

span.amarelo{
	color: var(--amarelo-cebrac);
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
p {
	margin-block: auto;
}

button {
	border: none;
}
/* botao voltar ao topo */

#voltarTopo {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 15px;
	z-index: 9997;
	border: none;
	outline: none;
	background-color: var(--verde-cebrac);
	color: #fff;
	cursor: pointer;
	padding: 15px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	box-shadow: 0 5px 3px rgba(0, 0, 0, 0.2);
	text-align: center;
}

#voltarTopo:hover {
	background-color: var(--amarelo-cebrac);
	transform: translateY(-5px);
	color: var(--marrom-contraste);

	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

/*  fim do botao voltar ao topo */

.container-principal {
	max-width: 1290px;
	margin: auto;
	display: flex;
	justify-content: center;
}
.img-fluid {
	max-width: 100%;
	width: auto;
}




/* ////////////////////////////////// /TOPO //////////////////////////////// */

/* secao concurso cultural */
#primeira-tela {
	background: url(../../../../img/internal/pro/educadores/bg-topo.png) no-repeat center
		var(--azul-escuro-transparente);
		min-height: 91dvh;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 48px 24px;
}
#primeira-tela .container-principal {
	width: 100%;
	max-width: 100%;
	align-items: center;
	flex-wrap: wrap;
	gap: 9dvw;
	justify-content: center;}
#primeira-tela .container-principal div object.logocebracpro {
	max-width: 340px;
	width: 100%;
	min-width: 240px;


}

/* #primeira-tela .container-principal .primeiro-bloco{
	flex: 1;
}
#primeira-tela .container-principal .segundo-bloco{
	flex: 1;
} */

#primeira-tela .container-principal .primeiro-bloco .logo {
		text-align: center;
	margin: auto;
}

#primeira-tela .container-principal .primeiro-bloco .logo img{

	max-width: 490px;
	width: 100%;
}

#primeira-tela .container-principal .primeiro-bloco .texto h2{
	font-size: clamp(1.25rem, 3.5vw, 2.15rem);
	text-align: center;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	color: var(--branco);
}

#primeira-tela .container-principal .logo-cebrac{
	max-width: 100%;
	width: 100%;
	text-align: right;
}
#primeira-tela .container-principal .logo-cebrac img{
	max-width: 240px;
	width: 33dvw;
}
/* /fim primera tela */

/* segunda tela */
.conheca-conteudo{
	text-align: center;
	
	background-color: var(--azul-educadores);
	color: var(--branco);
	margin: -42px auto;
	border-radius: 16px;
	padding: 24px;
	position: absolute;
	z-index: 99;
	width: 100%;
	max-width: 60dvw;
}
.conheca-conteudo h2{
font-size: clamp(.8rem, 2vw, 2.5rem);
font-weight: 600;
letter-spacing: -1px;
}
#trilha-educadores{
	background: #001087;
background: linear-gradient(0deg,rgba(0, 16, 135, 1) 0%, rgba(0, 4, 33, 1) 100%);
}
#trilha-educadores .container-principal {
	flex-wrap: wrap;
	padding: 24px;
}
#trilha-educadores .titulo-trilha {
	width: 100%;
	text-align: center;
}
#trilha-educadores .blocos-trilha ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

#trilha-educadores .blocos-trilha ul li object {
	max-width: 288px;
	min-width: 240px;
	width: 100%;
}
#trilha-educadores .titulo-trilha h1 {
	color: var(--branco);
	font-weight: 700;
	font-size: 3.5rem;
	line-height: 3.5rem;
	max-width: 780px;
	margin: 16px auto;
}
#trilha-educadores .titulo-trilha h2 {
	display: inline-block;
	margin: auto;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 3.25rem;
	color: var(--azul-curso);
	background-color: var(--laranja-educadores);
	padding: 0px 12px;
	border-radius: 16px 16px 0 0;
}
#trilha-educadores .titulo-trilha h4 {
	max-width: 980px;
	color: var(--branco);
	font-size: 1.85rem;
	font-weight: 300;
	margin: auto auto 40px;
}
#trilha-educadores .titulo-trilha h4 strong {
	color: var(--laranja-educadores);
	font-weight: 800;
}
/* fim segunda tela */

/* TRILHA LISTA */
#trilha-educadores {
	padding: 60px 0;
}

#trilha-educadores .container-principal {
	flex-direction: column;
	max-width: 90%;
}

.trilha-lista {
	display: flex;
	flex-direction: column;
	max-width: max-content;
	margin: auto;
	width: 100%;
}

.trilha-item {
	display: flex;
	align-items: center;
	gap: 24px;
	justify-content: center;
	border-bottom: 1px solid #0C1B8E;
}

.trilha-item:last-child {
	border-bottom: none;
}

.trilha-icone {
	flex-shrink: 0;
	width: 55px;
	height: 55px;
}

.trilha-icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.trilha-titulo {
	flex: 1;
	min-width: 220px;
	max-width: 420px;
}

.trilha-titulo h3 {
	color: var(--branco);
	font-size: clamp(.8rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
}

.trilha-data {
	display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    text-align: center;
    z-index: 999;
	padding: 24px ;
	min-width: 180px;
    margin-bottom: -1px;
    border-bottom: 1px solid var(--azul-educadores);
    position: relative;
    background: var(--azul-educadores);

}

.trilha-item:first-child .trilha-data{
	background: url(../../../../img/internal/pro/educadores/bg-data.png) no-repeat bottom ;
	background-size: contain;
	
}

.trilha-item:last-child .trilha-data{
	background: url(../../../../img/internal/pro/educadores/bg-data-rodape.png) no-repeat top ;
	background-size: contain;
	border-bottom: none;
	
}

.trilha-data .dia {
	font-size: 3rem;

	font-weight: 800;
	color: var(--branco);
	line-height: 1;
}

.trilha-data .mes {
	background-color: var(--azul-data);
	color: var(--branco);
	font-size: clamp(0.7rem, 1.5vw, 1rem);
	font-weight: 500;
	width: 90%;
	padding: 1px 14px;
	border-radius: 25px;
	text-transform: capitalize;
	margin: 6px 0;
}

.trilha-data .plataforma {
	font-size: 0.8rem;
	color: var(--branco);
	font-weight: 600;
}

.trilha-palestrantes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 180px;
	align-items: flex-end;
}

.trilha-palestrantes a.tag {
	background-color: #a3d900;
	color: var(--azul-escuro);
	font-size: clamp(0.6rem, 1.7vw, 0.8rem);
	font-weight: 600;
	padding: 2px 14px;
	width: 90%;
	margin: auto;
	text-align: center;
	border-radius: 20px;
	white-space: nowrap;
	transition: all 0.2s ease;
	text-decoration: none;
}

.trilha-palestrantes a.tag:hover {
	background-color: var(--branco);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* /TRILHA LISTA */

/* BLOCO FORMULARIO */

.bloco-formulario {
	border-radius: 16px;
	max-width: 390px;
	min-width: 240px;
	display: flex;
	margin: 64px auto 48px;
	flex-direction: column;
	flex-wrap: wrap;
	height: auto;

	transition: 0.5s;
}
.form-group {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 6px;
	justify-content: center;
}
.form-group > div{
	flex: 1;
}
#msgInputTelefone{
	display: none;
	color: var(--branco);
	font-size: 0.75rem;
	margin-top: -4px;
	background: var(--azul-escuro);
	border-radius: 50px;
	padding: 3px 8px;
}

.form-group-cidade-estado {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 100%;
}
.bloco-formulario .area-formulario input,
.bloco-formulario .area-formulario select,
#inputEmailRecupera,
#inputCPFRecupera {
	flex: 48%;
	max-width: 100%;
	width: 100%;
	margin: 4px auto;
	padding: 12px;
	font-size: 0.9rem;
	color: var(--branco);
	border: 1px solid var(--branco);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.2);
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.05) 90%,
		transparent 100%
	);

	backdrop-filter: blur(9.55px);
}
.bloco-formulario .area-formulario input::placeholder,
.bloco-formulario .area-formulario select::placeholder {
	color: var(--branco);
}

.bloco-formulario .area-formulario input.error::placeholder {
	color: rgba(0, 0, 0, 0.45) !important;
}
.bloco-formulario .area-formulario select:focus{
	color: var(--preto);
}
#check-regulamento {
	display: flex;
	justify-content: left;
	font-size: 0.8rem;
	letter-spacing: 0px;
	font-weight: 300;
	margin: 12px auto;
	color: var(--branco);
}

#check-regulamento input[type="checkbox"] {
	position: relative;
	cursor: pointer;
	width: auto;
	height: 100%;
	max-width: 24px;
	margin-right: 14px;
}

#check-regulamento input[type="checkbox"]:before {
	content: "";
	display: block;
	position: absolute;
	width: 24px;
	height: 24px;
	top: 0;
	left: 0;
	border: 2px solid var(--cinza-claro);
	border-radius: 3px;
	background-color: white;
}
#check-regulamento input[type="checkbox"]:checked:before {
	border: 2px solid var(--verde-cebrac);
}
#check-regulamento input[type="checkbox"]:checked:after {
	content: "";
	display: block;
	width: 7px;
	height: 18px;
	border: solid black;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 0px;
	left: 9px;
}
#check-regulamento a {
	text-decoration: underline;
}
#btnEnviar,
#btnRecuperaNumero {
	padding: 8px 16px;
	border-radius: 4px;
	color: var(--branco);
	text-align: center;
	background: var(--amarelo-cebrac);

	font-size: clamp(1.1rem, 2vw, 1.5rem);
	text-transform: uppercase;
	font-weight: 700;
	width: 100%;
	cursor: pointer;
}

#btnEnviar:hover,
#btnRecuperaNumero:hover {
	/* transformy -2px and increase brightness  */
	transform: translateY(-2px);
	filter: brightness(0.8) contrast(1.4);
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

#btnEnviar:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: translate(0, 0);

	background: var(--verde-escuro);
	color: var(--preto);
	box-shadow: none;
}

#btnEnviar::after {
	content: "";
	box-sizing: border-box;
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	left: calc(50% - 10px);
	top: calc(50% - 10px);
	border: 3px solid #d1d1d1;
	border-right-color: #000;
	border-radius: 50%;
	animation: button-anim 0.7s linear infinite;
	opacity: 0;
}

#btnEnviar.loading::after {
	opacity: 1;
}

#btnEnviar.loading {
	color: transparent;
}

#ultima-secao{
	background: url(../../../../img/internal/pro/educadores/bg-ultima-dobra.png) no-repeat center,  #001087;
	background-size: cover, auto;
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 24px 64px;
}
#ultima-secao .container-principal {
	
	align-items: center;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: space-around;
}
#ultima-secao .container-principal .imagem-modelo{
	max-width: 480px;
	width: 100%;
	flex: 1;
}
#ultima-secao .container-principal .texto-final{
	flex: 1;
	max-width: 550px;
	color: var(--branco);
	
}

#ultima-secao .container-principal .texto-final h3{
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
	color: var(--branco);
	font-size: clamp(1.5rem, 4vw, 3.5rem);
	line-height: clamp(1.5rem, 4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -.3px;
	
}
#ultima-secao .container-principal .texto-final h3 span{
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
}

#ultima-secao .container-principal .texto-final h3 span.curso-gratuito{

	font-weight: 300;
}

#ultima-secao .container-principal .texto-final p{
	margin: 24px 0;
	font-size: clamp(.85rem, 1.75vw, 1.2rem);
	font-weight: 300;
}

#ultima-secao .container-principal button{
	background: #A7E500;
	color: var(--azul-escuro);
	font-size: clamp(.9rem, 2vw, 1.5rem);
	font-weight: 700;
	padding: 12px 36px;
	border-radius: 8px;
	cursor: pointer;
	border: none;
	text-transform: uppercase;
	transition: 0.3s;
}
 

/* /fim form */
.assinatura-footer {
	margin: auto;
	font-weight: 300;
	text-align: center;
	background-color:#020D61;
	padding: 16px;
	font-size: 1.1rem;
	color: var(--branco);
}
/* /footer */

/* modal cadastro */
/* modal msg cadastro */
#modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.35);
	display: none;
	justify-content: center;
}

#fecharModal {
	background-color: var(--azul-escuro);
	margin-top: 16px;
	padding: 12px 24px;
	cursor: pointer;
	font-weight: 800;
	color: var(--branco);
	border-radius: 12px;
}

.msg-erro {
	color: var(--preto);
	background: var(--branco);
	max-width: 550px;
	padding: 48px;
	font-size: 1.15rem;
	border-radius: 12px;
	margin: auto;
	text-align: center;
	box-shadow: 0 6px 8px -6px var(--sombra-leve);
}
#msgErro {
	font-size: 1.15rem;
}

.img-alert {
	margin: auto;
	width: 100%;
	max-width: 32px;
}
/* /modal cadastro */

@media screen and (max-width: 1099px) {
	#primeira-tela .container-principal {
		gap: 5dvw;
	}
	#primeira-tela .container-principal .primeiro-bloco .logo img{
		max-width: 420px;
	}
}


@media screen and (max-width: 800px) {
	.conheca-conteudo {
		max-width: 95dvw;
		
	}
	.bloco-formulario{
		margin: 24px auto;
	}
		.conheca-conteudo h2{
		font-size: clamp(.8rem, 3vw, 2rem);
		}


	.trilha-titulo {
		order: 1;
		flex: 1 1 calc(100% - 80px);
		min-width: 150px;
		max-width: none;
	}

	.trilha-icone {
		order: 0;
		width: 45px;
		height: 45px;
	}

	.trilha-data {
		order: 2;
		flex: 0 0 auto;
		min-width: auto;
	}

	.trilha-data .dia {
		font-size: 2.2rem;
	}

	.trilha-palestrantes {
		order: 3;
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
	}
}

@media screen and (max-width: 680px){
	.trilha-item {
		flex-wrap: wrap;
		padding: 24px 0;
	}
	#primeira-tela .container-principal .primeiro-bloco .logo img{
		max-width: 65dvw;
	}
	.trilha-palestrantes {
		justify-content: center;
	}
	.trilha-data {
		border-radius: 12px;

	}.trilha-item:first-child .trilha-data, .trilha-item:last-child .trilha-data{
		background: var(--azul-educadores);
	
	}.trilha-palestrantes{
		flex: auto;
	}
	#primeira-tela .container-principal{
		flex-direction: column;
	}
	#primeira-tela{
		min-height: auto;
		
	}#ultima-secao .container-principal{
		flex-direction: column-reverse;
	}#ultima-secao .container-principal .imagem-modelo{
		max-width: 72dvw;
	}#ultima-secao .container-principal .texto-final p{
		font-size: clamp(.85rem, 2.5vw, 1.2rem);
	}#primeira-tela{padding: 32px  16px;}
	#primeira-tela .container-principal .logo-cebrac img{
		max-width: 200px;
		width: 52dvw;
	}
}

@media screen and (max-width: 520px) {
	.trilha-titulo h3 {
		font-size: 1rem;
	}

	.trilha-data .dia {
		font-size: 1.8rem;
	}

	.trilha-data .mes {
		font-size: 0.65rem;
		padding: 4px 10px;
	}

	.trilha-palestrantes a.tag {
		font-size: 0.65rem;
		padding: 4px 10px;
	}
	.conheca-conteudo{
		max-width: 90dvw;
		padding: 16px;
		margin: -30px auto;

	}
	.conheca-conteudo h2{
		font-size: clamp(.65rem, 3vw, 2rem);
		letter-spacing: -.3px;
	}
	.form-group > div{
		flex: 100%;
	}

}