/* JobHolding Quiz — front-end
   Estrutura e medidas espelham o quiz original; todo valor configurável
   vem de uma CSS variable gerada por JHQ_Design::build_css(). */

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

body.jhq-page {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--jhq-page-bg);
	color: var(--jhq-text);
	font-family: var(--jhq-font);
	line-height: var(--jhq-lh);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	margin: 0;
}

.jhq { display: contents; font-family: var(--jhq-font); }

.jhq button,
.jhq input { font-family: inherit; }

.jhq-em { color: var(--jhq-a); font-weight: 700; }

/* ===== estrutura: marca à esquerda no desktop, conteúdo em coluna ===== */
.jhq-shell {
	flex: 1;
	width: 100%;
	max-width: var(--jhq-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(var(--jhq-brand-min), 1fr) minmax(0, var(--jhq-col-max)) minmax(0, 1fr);
	gap: var(--jhq-shell-gap);
	padding: var(--jhq-shell-pad-y) var(--jhq-shell-pad-x) 40px;
	align-items: start;
}

.jhq-brand { padding-top: 8px; }
.jhq-brand img {
	max-height: var(--jhq-logo-h);
	max-width: var(--jhq-logo-w);
	object-fit: contain;
	display: block;
}
.jhq-brandname {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.4px;
	color: var(--jhq-text);
}
.jhq-brandname b { color: var(--jhq-p); }

.jhq-col {
	grid-column: 2;
	min-width: 0;
	/* respiro grande antes do rodapé: mantém o footer fora da primeira dobra */
	padding-bottom: clamp(170px, 28vh, var(--jhq-col-pb));
}

/* marca centralizada acima (opção do painel) */
.jhq-brand-center .jhq-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.jhq-brand-center .jhq-brand { display: flex; justify-content: center; }
.jhq-brand-center .jhq-col { width: 100%; max-width: var(--jhq-col-max); }

@media (max-width: 880px) {
	/* o shell perde o recuo lateral: quem recua é o conteúdo, não a marca,
	   assim a logo pode encostar na borda da tela */
	.jhq-shell {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 18px 0 32px;
	}
	.jhq-col {
		width: 100%;
		padding-left: var(--jhq-mobile-pad);
		padding-right: var(--jhq-mobile-pad);
	}
	.jhq-brand {
		display: flex;
		justify-content: center;
		padding-top: 2px;
		padding-left: var(--jhq-logo-inset-m);
		padding-right: var(--jhq-logo-inset-m);
	}
	.jhq-brand img { max-height: var(--jhq-logo-h-mobile); }

	/* logo alinhada à esquerda */
	.jhq-logo-m-left .jhq-brand,
	.jhq-logo-m-sticky .jhq-brand {
		justify-content: flex-start;
		padding-right: 0;
	}
	.jhq-logo-m-left .jhq-brand img,
	.jhq-logo-m-sticky .jhq-brand img { object-position: left center; }

	/* logo grudada no topo ao rolar */
	.jhq-logo-m-sticky .jhq-brand {
		position: sticky;
		top: 0;
		z-index: 5;
		align-self: stretch;
		background: var(--jhq-page-bg);
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: -10px;
	}

	/* rodapé abaixo da dobra: o conteúdo ocupa a tela inteira, então a faixa
	   só aparece depois de rolar, independentemente do tamanho da pergunta */
	.jhq-foot-m-scroll .jhq-shell {
		min-height: 100vh;
		min-height: 100dvh;
	}
}

/* ===== progresso ===== */
.jhq-track {
	height: var(--jhq-track-h);
	border-radius: var(--jhq-track-radius);
	background: var(--jhq-track-bg);
	overflow: hidden;
	margin-bottom: var(--jhq-track-mb);
}
.jhq-fill {
	height: 100%;
	border-radius: var(--jhq-track-radius);
	background: var(--jhq-track-fill);
	transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ===== cabeçalho ===== */
.jhq-head { margin-bottom: 18px; }

.jhq-flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 6px 12px;
	background: var(--jhq-flag-bg);
	border: 1px solid rgba(16, 24, 40, .1);
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--jhq-flag-size);
	color: var(--jhq-flag-color);
	box-shadow: 0 1px 4px rgba(16, 24, 40, .07);
}

.jhq-title {
	font-size: var(--jhq-title-size);
	line-height: var(--jhq-title-lh);
	letter-spacing: -.4px;
	margin: 0 0 6px;
	color: var(--jhq-title-color);
	font-weight: var(--jhq-title-weight);
	text-align: var(--jhq-title-align);
}
.jhq-sub {
	font-size: var(--jhq-sub-size);
	color: var(--jhq-sub-color);
	font-weight: var(--jhq-sub-weight);
	text-align: var(--jhq-sub-align);
	margin: 0;
}
@media (max-width: 880px) {
	.jhq-title { font-size: var(--jhq-title-size-m); }
}

/* ===== perguntas ===== */
.jhq-view { animation: jhq-in .25s ease; }
@keyframes jhq-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jhq-view { animation: none; }
}

.jhq-question {
	font-size: var(--jhq-q-size);
	line-height: var(--jhq-q-lh);
	font-weight: var(--jhq-q-weight);
	text-align: var(--jhq-q-align);
	margin: 0 0 var(--jhq-q-mb);
	color: var(--jhq-q-color);
}

.jhq-options {
	display: flex;
	flex-direction: column;
	gap: var(--jhq-opt-gap);
}

.jhq-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	background: var(--jhq-opt-bg);
	border: var(--jhq-opt-border-w) solid var(--jhq-opt-border);
	border-radius: var(--jhq-opt-radius);
	padding: var(--jhq-opt-pad-y) var(--jhq-opt-pad-x);
	min-height: var(--jhq-opt-min-h);
	font-size: var(--jhq-opt-size);
	font-weight: var(--jhq-opt-weight);
	color: var(--jhq-opt-text);
	cursor: pointer;
	transition: border-color .13s, box-shadow .13s, transform .09s;
	box-shadow: var(--jhq-opt-shadow);
}
.jhq-opt .rd {
	flex: 0 0 auto;
	width: var(--jhq-radio-size);
	height: var(--jhq-radio-size);
	border-radius: 50%;
	border: 2px solid var(--jhq-radio-border);
	background: #fff;
	position: relative;
	transition: .13s;
}
.jhq-no-radio .jhq-opt .rd { display: none; }

.jhq-opt:hover {
	border-color: var(--jhq-opt-hover);
	box-shadow: 0 4px 14px -4px rgba(20, 30, 50, .14);
}
.jhq-opt:hover .rd { border-color: var(--jhq-opt-hover); }
.jhq-opt:active { transform: scale(.995); }
.jhq-opt.sel { border-color: var(--jhq-opt-sel); }
.jhq-opt.sel .rd { border-color: var(--jhq-opt-sel); }
.jhq-opt.sel .rd::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--jhq-opt-sel);
}
.jhq-opt:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--jhq-p) 30%, #fff);
	outline-offset: 1px;
}

/* ===== voltar ===== */
.jhq-backrow { margin-top: var(--jhq-back-mt); }
.jhq-back {
	display: none;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--jhq-back-color);
	font-size: var(--jhq-back-size);
	font-weight: 600;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 8px;
}
.jhq-back.on { display: inline-flex; }
.jhq-back:hover { color: var(--jhq-p); background: var(--jhq-back-hover); }
.jhq-back svg { width: 15px; height: 15px; }

/* no formulário o voltar vira um ícone discreto, para não competir com o CTA */
.jhq-back--icon {
	width: 36px;
	height: 36px;
	justify-content: center;
	padding: 0;
	border: 1.5px solid var(--jhq-opt-border);
	border-radius: 50%;
	background: #fff;
	color: #8a95a6;
	box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
}
.jhq-back--icon:hover { color: #2b3442; border-color: #c2cad6; background: #fff; }
.jhq-back--icon svg { width: 17px; height: 17px; }
.jhq-back--icon .jhq-back-label { display: none; }
.jhq-back-text .jhq-back--icon {
	width: auto; height: auto; border-radius: 8px; border: 0;
	background: none; box-shadow: none; padding: 6px 8px;
}
.jhq-back-text .jhq-back--icon .jhq-back-label { display: inline; }

/* ===== carregamento ===== */
.jhq-loading {
	display: none;
	flex-direction: column;
	align-items: center;
	padding: 26px 0 10px;
	gap: 8px;
}
.jhq-scene {
	width: var(--jhq-scene-w);
	height: var(--jhq-scene-h);
	position: relative;
}
.jhq-scene .car {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: jhq-float 2.6s ease-in-out infinite;
}
.jhq-scene .car svg {
	width: 180px;
	height: auto;
	filter: drop-shadow(0 16px 22px rgba(20, 30, 50, .18));
}
/* Foto própria: precisa ter fundo transparente (alpha).
   mix-blend-mode não resolve aqui — o transform do .car cria stacking
   context e isola o blend. A sombra vem do CSS, igual à do SVG. */
.jhq-scene .car img {
	width: var(--jhq-scene-w);
	height: auto;
	filter: drop-shadow(0 16px 22px rgba(20, 30, 50, .18));
}
.jhq-scene .lens {
	position: absolute;
	width: 58px;
	height: 58px;
	left: 50%;
	top: 50%;
	margin: -56px 0 0 8px;
	animation: jhq-orbit 2.2s ease-in-out infinite alternate;
}
.jhq-scene .lens svg { width: 100%; height: 100%; }

@keyframes jhq-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}
@keyframes jhq-orbit {
	from { transform: translate(-46px, 10px) rotate(-8deg); }
	to   { transform: translate(26px, -6px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
	.jhq-scene .car,
	.jhq-scene .lens { animation: none; }
}

.jhq-dots { display: flex; gap: 7px; margin-top: 2px; }
.jhq-dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--jhq-dot-color);
	animation: jhq-dot 1.1s ease-in-out infinite;
}
.jhq-dots span:nth-child(2) { animation-delay: .18s; }
.jhq-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes jhq-dot {
	0%, 100% { background: var(--jhq-dot-color); transform: scale(1); }
	45%      { background: var(--jhq-p); transform: scale(1.25); }
}

.jhq-loadtext {
	font-size: var(--jhq-loadtext-size);
	font-weight: 500;
	color: var(--jhq-loadtext-color);
	margin-top: 8px;
	text-align: center;
}

/* ===== formulário ===== */
form.jhq-form { display: none; flex-direction: column; }

.jhq-formtitle {
	font-size: var(--jhq-ft-size);
	line-height: 1.25;
	margin: 0 0 4px;
	color: var(--jhq-ft-color);
	font-weight: var(--jhq-ft-weight);
	text-align: var(--jhq-ft-align);
}
.jhq-formsub {
	color: var(--jhq-muted);
	font-size: var(--jhq-fs-size);
	line-height: 1.5;
	margin: 0 0 14px;
}

.jhq-field { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.jhq-field label {
	font-size: var(--jhq-label-size);
	color: var(--jhq-label-color);
	font-weight: 600;
}
.jhq-field input {
	height: var(--jhq-input-h);
	border: 1.5px solid var(--jhq-input-border);
	border-radius: var(--jhq-input-radius);
	padding: 0 15px;
	font-size: var(--jhq-input-size);
	background: var(--jhq-input-bg);
	transition: .13s;
	width: 100%;
	box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
	color: var(--jhq-text);
}
.jhq-field input::placeholder { color: var(--jhq-ph-color); }
.jhq-field input:focus {
	outline: none;
	border-color: var(--jhq-p);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--jhq-p) 13%, #fff);
}

.jhq-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 12px;
	font-size: var(--jhq-trust-size);
	color: var(--jhq-muted);
	line-height: 1.45;
}
.jhq-consent input { margin-top: 2px; }

.jhq-error {
	display: none;
	color: var(--jhq-err-text);
	font-size: 13.5px;
	margin-top: 10px;
	background: var(--jhq-err-bg);
	border: 1px solid var(--jhq-err-border);
	border-radius: 10px;
	padding: 9px 12px;
}
.jhq-error.on { display: block; }

.jhq-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.jhq-submit {
	margin-top: 16px;
	min-height: var(--jhq-sub-h);
	background: var(--jhq-b);
	color: var(--jhq-sub-text);
	border: 0;
	border-radius: var(--jhq-sub-radius);
	font-size: var(--jhq-sub-size);
	font-weight: var(--jhq-sub-weight);
	letter-spacing: .3px;
	cursor: pointer;
	transition: .14s;
	box-shadow: 0 10px 22px -9px color-mix(in srgb, var(--jhq-b) 70%, #000);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}
.jhq-no-glow .jhq-submit { box-shadow: none; }
.jhq-submit svg { width: 19px; height: 19px; transition: transform .14s; }
.jhq-no-arrow .jhq-submit .jhq-btnarrow { display: none; }
.jhq-submit:hover:not(:disabled) { filter: brightness(1.05); }
.jhq-submit:hover:not(:disabled) svg { transform: translateX(3px); }
.jhq-submit:disabled { opacity: .75; cursor: wait; }

.jhq-btnspin {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	animation: jhq-spin .8s linear infinite;
	display: none;
}
@keyframes jhq-spin { to { transform: rotate(360deg); } }

.jhq-trust {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--jhq-trust-color);
	font-size: var(--jhq-trust-size);
	margin-top: 11px;
}
.jhq-trust svg { width: 12px; height: 12px; flex: 0 0 auto; }
.jhq-no-lock .jhq-trust svg { display: none; }

/* ===== conclusão ===== */
.jhq-sent {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 34px 8px;
}
.jhq-sentok {
	width: var(--jhq-sent-size);
	height: var(--jhq-sent-size);
	border-radius: 50%;
	background: var(--jhq-sent-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.jhq-sentok svg { width: 36px; height: 36px; }
.jhq-senttitle {
	font-size: var(--jhq-sent-title);
	font-weight: var(--jhq-sent-weight);
	margin: 0;
	color: var(--jhq-text);
}
.jhq-senttext {
	color: var(--jhq-muted);
	font-size: var(--jhq-sent-text);
	max-width: 290px;
	margin: 0;
}

/* ===== rodapé ===== */
footer.jhq-footer {
	background: var(--jhq-foot-bg);
	color: #fff;
	margin-top: auto;
}
.jhq-footin {
	max-width: var(--jhq-shell-max);
	margin: 0 auto;
	padding: var(--jhq-foot-pad-y) 20px calc(var(--jhq-foot-pad-y) + 2px);
	text-align: center;
}
.jhq-footlinks {
	display: flex;
	justify-content: center;
	gap: var(--jhq-foot-gap);
	flex-wrap: wrap;
	font-size: var(--jhq-foot-link-size);
	font-weight: 600;
}
.jhq-footlinks a { color: var(--jhq-foot-link); text-decoration: none; }
.jhq-footlinks a:hover { text-decoration: underline; }
.jhq-footdisc {
	font-size: var(--jhq-foot-disc-size);
	line-height: 1.55;
	color: var(--jhq-foot-disc-color);
	max-width: 960px;
	margin: 10px auto 0;
	text-align: var(--jhq-foot-disc-align);
}
.jhq-footlegal {
	font-size: var(--jhq-foot-legal-size);
	color: var(--jhq-foot-legal-color);
	margin-top: 7px;
}