@font-face { font-family: 'ValeSans'; src: url(../fonts/ValeSans-Regular.woff2) format('woff2'); font-style: normal; font-weight: normal; font-display: swap; }
@font-face { font-family: 'ValeSans'; src: url(../fonts/ValeSans-Bold.woff2) format('woff2'); font-style: normal; font-weight: bold; font-display: swap; }


:root {
	--yellow: #FBBA00;
	--green: #00F45B;
	--green-l: #0ABB98;

	--vale-fff: url("data:image/svg+xml,%3Csvg width='87' height='33' viewBox='0 0 87 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white'%3E%3Cpath d='M30.79 12.7757C33.9072 13.2532 36.2877 12.6939 38.45 11.2956L22.1137 32.9932L0 3.43778C0 3.43778 3.60831 0 9.62443 0C18.4508 0 23.8189 11.7048 30.79 12.7757Z'/%3E%3Cpath d='M39.8687 1.37781C34.7939 1.37781 31.4789 6.05701 25.4696 7.66677C27.625 9.78128 30.6058 11.4729 33.1569 11.4729C36.8061 11.4729 39.173 10.3338 40.6327 8.40344L44.6844 3.08988C44.6844 3.08988 42.6244 1.37781 39.8687 1.37781Z'/%3E%3Cpath d='M55.6184 16.7865H53.4152L50.5436 24.5283C50.3799 24.9785 50.2776 25.2718 50.2776 25.2718H50.2435C50.2435 25.2718 47.9857 19.6036 46.8262 16.7797H44.507L48.586 26.7451C48.8179 27.3249 49.5682 28.2867 51.0211 28.2867L55.6184 16.7797V16.7865Z'/%3E%3Cpath d='M76.7362 28.1298V26.3359H71.6887V16.7865H69.6151V28.1298H76.7362Z'/%3E%3Cpath d='M86.006 28.1298V26.3359H81.2108V23.0891H85.2625V21.3634H81.2108V18.5804H83.9733C86.1424 18.5804 86.2583 16.7933 86.2583 16.7933H79.144V28.1367H86.0128L86.006 28.1298Z'/%3E%3Cpath d='M63.0601 23.4506H60.093L61.5664 19.6172L61.58 19.549L63.0533 23.4438L63.0601 23.4506ZM67.1937 28.1298L62.685 16.7865H60.7137L56.0209 28.1298H58.2377L59.37 25.2445H63.7491L64.8745 28.1298H67.1937Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img { display: block; width: auto; max-width: 100%; height: auto; }

html { font: 20px/1.2 'ValeSans', sans-serif; color: #fff; }

@media ( min-height: 1600px ){
	html { font-size: 32px; }
}

body { height: 100vh; min-height: 800px; background: linear-gradient(180deg, rgba(0,126,122,1) 0%, rgba(10,187,152,1) 100%); overflow: hidden; }


	section { width: 100%; height: calc( 100vh - 200px ); position: absolute; top: 200px; left: 0; padding: 20px;visibility: hidden; opacity: 0; transition: all .5s ease-out; display: flex; flex-direction: column; z-index: 9; overflow-y: auto; }
		section.active { visibility: visible; opacity: 1; }

@media ( max-width: 420px ){
	section { top: 200px; height: calc( 100vh - 200px ); }
}


	.row { display: flex; flex-wrap: wrap; gap: 20px; }
		.row.m-yc { align-items: center; }
		.row.m-xc { justify-content: center; }
		.row > div { width: calc( 50% - 10px ); }


	.cta { display: inline-block; padding: 20px; background: var(--green-l); border: 2px solid var(--green); border-radius: 30px; color: #fff; text-decoration: none; font-size: .875rem; font-weight: bold; text-transform: uppercase; box-shadow: 0 0 10px 10px rgba( 0 244 91 / 25% ), inset 0 0 10px 10px rgba( 0 244 91 / 25% ); width: 100%; max-width: 320px; text-align: center; margin: auto auto 0; transition: all .3s ease-out; }
		.cta:hover { background: var(--green); color: #FFF; }
		.cta[disabled] { pointer-events: none; }


	.question { counter-increment: questions; }
		.question h2 { font-size: /* 2rem */ 1.5rem; font-weight: bold; color: #fff; }
			.question h2::before { content: counter( questions ) ". "; color: var(--yellow); }
		.question label { display: block; cursor: pointer; transition: all .3s ease-out; }
			.question:has( label:hover ) label { opacity: .25; }
			.question:has( input:checked ) label { opacity: .25; pointer-events: none; }
			.question:has( label:hover ) label:hover,
			.question:has( input:checked ) label:has( input:checked ) { opacity: 1; }
			.question h2 + label { margin-top: 40px; }
			.question label + label { margin-top: 20px; }
			.question label span { display: flex; align-items: center; }
			.question label span::before { color: var(--yellow); display: flex; margin: 0 12px 0 0; align-items: center; justify-content: center; border: 1px solid var(--yellow); width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; }
				.question label:nth-of-type( 1 ) span::before { content: 'A' }
				.question label:nth-of-type( 2 ) span::before { content: 'B' }
				.question label:nth-of-type( 3 ) span::before { content: 'C' }
		.question input { display: none; }
		.question .feedback { opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility .3s ease-out; margin-top: 40px; margin-bottom: 20px; padding: 20px 20px 20px 80px; border: 1px solid #fff; border-radius: 12px; min-height: 80px; flex: 0 0 auto; }
			.question.right .feedback { opacity: 1; visibility: visible; background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.72 0C5.71 0 0 5.71 0 12.72C0 19.73 5.71 25.44 12.72 25.44C19.73 25.44 25.44 19.73 25.44 12.72C25.44 5.71 19.74 0 12.72 0ZM12.72 22.84C7.14 22.84 2.6 18.3 2.6 12.72C2.6 7.14 7.14 2.6 12.72 2.6C18.3 2.6 22.84 7.14 22.84 12.72C22.84 18.3 18.3 22.84 12.72 22.84Z' fill='%231EFF00'/%3E%3Cpath d='M16.78 7.78004L11.8 14.83L9.69001 11.55C9.33001 10.99 8.59001 10.83 8.03001 11.19C7.47001 11.55 7.31001 12.29 7.67001 12.85L10.75 17.62C10.96 17.96 11.34 18.16 11.73 18.17H11.75C12.14 18.17 12.5 17.98 12.73 17.66L18.73 9.15004C19.11 8.61004 18.98 7.86004 18.44 7.48004C17.9 7.10004 17.15 7.23004 16.77 7.77004L16.78 7.78004Z' fill='%231EFF00'/%3E%3C/svg%3E%0A") no-repeat 27px 27px; }
			.question.wrong .feedback { opacity: 1; visibility: visible; background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.44 12.72C25.44 5.71 19.74 0 12.72 0C5.7 0 0 5.71 0 12.72C0 19.73 5.71 25.44 12.72 25.44C19.73 25.44 25.44 19.73 25.44 12.72ZM2.6 12.72C2.6 7.14 7.14 2.6 12.72 2.6C18.3 2.6 22.84 7.14 22.84 12.72C22.84 18.3 18.3 22.84 12.72 22.84C7.14 22.84 2.6 18.3 2.6 12.72Z' fill='%23FF0000'/%3E%3Cpath d='M15.9 17.6C16.13 17.83 16.44 17.95 16.75 17.95C17.06 17.95 17.36 17.83 17.6 17.6C18.07 17.13 18.07 16.37 17.6 15.9L14.42 12.72L17.6 9.54005C18.07 9.07005 18.07 8.31005 17.6 7.84005C17.13 7.37005 16.37 7.37005 15.9 7.84005L12.72 11.02L9.54005 7.84005C9.07005 7.37005 8.31005 7.37005 7.84005 7.84005C7.37005 8.31005 7.37005 9.07005 7.84005 9.54005L11.02 12.72L7.84005 15.9C7.37005 16.37 7.37005 17.13 7.84005 17.6C8.07005 17.83 8.38005 17.95 8.69005 17.95C9.00005 17.95 9.30005 17.83 9.54005 17.6L12.72 14.42L15.9 17.6Z' fill='%23FF0000'/%3E%3C/svg%3E%0A") no-repeat 27px 27px; }
		.question .cta { opacity: 0; visibility: hidden; }
			.question.right .cta,
			.question.wrong .cta { opacity: 1; visibility: visible; }


#wrap { width: 100%; max-width: 800px; height: 100vh; margin: 0 auto; position: relative; padding-top: 240px; display: flex; counter-reset: questions; overflow: hidden; }

@media ( min-height: 1600px ){
	#wrap { max-width: 1000px; }
}


	#head { position: absolute; top: 0; left: 0; width: 100%; padding: 20px; display: flex; flex-direction: row-reverse; justify-content: space-between; z-index: 9; }
		#head h1 { width: 100%; max-width: 360px; aspect-ratio: 481/285; transition: all .3s ease-out; }
			.game #head h1 { width: 200px; }
			#head h1 a { display: block; width: 100%; height: 100%; color: transparent; font-size: 1px; margin: 0 auto; }
		#head h2 { width: 87px; height: 33px; order: -1; margin-left: auto; }
			#head h2 a { display: block; width: 87px; height: 33px; color: transparent; font-size: 1px; background: var(--vale-fff) no-repeat center; }



	#home { padding: 60px 20px 20px; }
		#home img { display: block; width: auto; max-width: 100%; height: auto; margin: auto auto 40px; }



	#resultado { justify-content: center; z-index: 10; padding-bottom: 80px; }
		#resultado h2 { font-size: 3rem; color: var(--yellow); }
		#resultado p { font-size: 1rem; }
		#resultado > .row { margin-bottom: 40px; }
			#resultado p u { color: var(--yellow); }
		#resultado * + p,
		#resultado p + .row { margin-top: 20px; }
		#resultado .row + p { position: absolute; bottom: 20px; width: 100%; max-width: 400px; left: 50%; transform: translateX(-50%); text-align: center; }
			#resultado .row + p > a { max-width: 400px; }
			#resultado p.small { font-size: .875rem; }
			#qr svg { display: block; border-radius: 8px; margin-left: auto; }

@media ( max-width: 599px ){
	#resultado { justify-content: start; }
	#resultado > .row > div { width: 100%; }
		#profile { margin: 0 auto; }
		#resultado h2,
		#resultado p { text-align: center; }
}



	#perfis { z-index: 11; }
		#perfis .row { margin: auto; }
			#perfis .perfil { width: calc( 33.33% - 20px ); display: flex; flex-direction: column-reverse; justify-content: center; }
				#perfis .perfil h2 { text-align: center; color: var(--yellow); font-size: 1rem; transition: all .3s ease-out; }
					#perfis .perfil:hover h2 { color: var(--green); }



	#foot { position: absolute; top: 140px; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; height: 46px; font-size: .75rem; padding: 0 20px; }
			#foot span { color: var(--yellow); }

@media ( max-width: 420px ){
	#foot { top: 150px; }
}

#nav { position: fixed; bottom: 0; right: 20px; z-index: 10; }
	#nav a { display: block; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; margin: 0 0 20px 20px; transition: all .3s ease-out; font-size: 1px; color: transparent; opacity: .1; }

	#fs { background: #fff url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22 5c0-.478-.379-1-1-1h-18c-.62 0-1 .519-1 1v14c0 .621.52 1 1 1h18c.478 0 1-.379 1-1zm-6.5 13.5h-12v-10h12zm1.5 0v-10.5c0-.478-.379-1-1-1h-12.5v-1.5h17v13zm-6.518-4.943v1.243c0 .414.336.75.75.75.415 0 .75-.336.75-.75 0-.715 0-2.335 0-3.05 0-.414-.335-.75-.75-.75-.714 0-2.318 0-3.033 0-.414 0-.75.336-.75.75s.336.75.75.75h1.219l-3.198 3.198c-.293.293-.293.768 0 1.061.292.292.767.292 1.06 0z' fill-rule='nonzero'/%3E%3C/svg%3E") no-repeat center / 50% auto; }
	#fsc { background: #fff url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22 5c0-.478-.379-1-1-1h-18c-.62 0-1 .519-1 1v14c0 .621.52 1 1 1h18c.478 0 1-.379 1-1zm-11.5 13.5h-7v-4h7zm1.5 0v-4.5c0-.478-.379-1-1-1h-7.5v-7.5h17v13zm2.5-8.057v-1.243c0-.414-.336-.75-.75-.75s-.75.336-.75.75v3.05c0 .414.336.75.75.75h3.033c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-1.218l3.198-3.198c.292-.293.292-.768 0-1.061-.293-.292-.768-.292-1.061 0z' fill-rule='nonzero'/%3E%3C/svg%3E") no-repeat center / 50% auto; }