/* =========================================================
   PÁGINA COMO FUNCIONA - ACE CURRÍCULOS E GESTÃO DE CURRÍCULOS
   Carregado só pela página Como funciona, depois do site.css:
   usa as cores, as fontes e as peças de lá (linha do tempo, cartões,
   chave liga/desliga, observação).
   As cores da marca vêm das variáveis do site.css, por isso o mesmo
   arquivo serve os dois sites.
   ========================================================= */

/* COR DO CLIENTE NOS EXEMPLOS: COMEÇA NA COR DA MARCA DO SITE E MUDA NO "VEJA COM A SUA MARCA" (PASSO 1) */
.como-funciona {
	--cor-cliente: var(--nuvem);
	--cor-cliente-texto: #fff;
	--cor-cliente-suave: var(--ceu);
	--cor-cliente-funda: var(--cor-cliente);
}
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
	.como-funciona {
		--cor-cliente-suave: color-mix(in srgb, var(--cor-cliente) 12%, #fff);
		--cor-cliente-funda: color-mix(in srgb, var(--cor-cliente) 78%, #000);
	}
}

/* AS PEÇAS TROCADAS PELO JAVASCRIPT USAM O ATRIBUTO hidden */
.como-funciona [hidden] { display: none !important; }

.como-funciona .linha-tempo { max-width: 1100px; }

/* ---------------------------------------------------------
   LINHA DO TEMPO COM PROGRESSO (SÓ COM JAVASCRIPT)
   --------------------------------------------------------- */

/* O NÚMERO ACOMPANHA A ROLAGEM ENQUANTO O PASSO ESTÁ NA TELA */
.como-funciona .linha-tempo-numero {
	position: sticky;
	top: calc(var(--altura-topo) + 16px);
	z-index: 2;
	align-self: start;
	transition: background-color .3s, color .3s, box-shadow .3s, transform .3s;
}

/* A LINHA CHEIA COBRE A TRACEJADA CONFORME A PÁGINA É ROLADA (--progresso VEM DO como_funciona.js) */
.js .como-funciona .linha-tempo-passo::after {
	content: "";
	position: absolute;
	top: 60px; bottom: 4px; left: 27px;
	border-left: 2px solid var(--nuvem);
	transform: scaleY(var(--progresso, 0));
	transform-origin: top;
}
.js .como-funciona .linha-tempo-passo:last-child::after { display: none; }

.js .como-funciona .linha-tempo-numero { background: #fff; color: var(--tinta-suave); box-shadow: inset 0 0 0 2px var(--borda-marca); }
.js .como-funciona .alcancado > .linha-tempo-numero { background: var(--tinta); color: #fff; box-shadow: 0 10px 24px -12px rgba(var(--tinta-rgb), .7); }

@media (max-width: 600px) {
	.js .como-funciona .linha-tempo-passo::after { left: 21px; top: 50px; }

	/* NO CELULAR O NÚMERO NÃO ACOMPANHA A ROLAGEM E OS BLOCOS DOS EXEMPLOS OCUPAM A LARGURA TODA (PASSAM POR CIMA DA LINHA) */
	.como-funciona .linha-tempo-numero { position: static; }
	.como-funciona .linha-tempo-conteudo > .suamarca,
	.como-funciona .linha-tempo-conteudo > .modelos,
	.como-funciona .linha-tempo-conteudo > .fluxo,
	.como-funciona .linha-tempo-conteudo > .fluxo-resumo,
	.como-funciona .linha-tempo-conteudo > .divulga,
	.como-funciona .linha-tempo-conteudo > .caminho,
	.como-funciona .linha-tempo-conteudo > .indicadores,
	.como-funciona .linha-tempo-conteudo > .grade-cartoes,
	.como-funciona .linha-tempo-conteudo > .observacao { position: relative; z-index: 1; margin-left: -60px; }
}

/* QUEM PARTICIPA DE CADA PASSO */
.participantes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.participantes li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var(--ceu);
	color: var(--nuvem-escura);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
}
.participantes .icone { width: 15px; height: 15px; }

/* ---------------------------------------------------------
   MINI-TELAS (EXEMPLOS DA PLATAFORMA COM DADOS FICTÍCIOS)
   --------------------------------------------------------- */

.minitela {
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: 16px;
	box-shadow: 0 30px 70px -36px rgba(var(--tinta-rgb), .45);
	overflow: hidden;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--tinta);
}

/* BARRA DO NAVEGADOR */
.minitela-barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--nevoa); border-bottom: 1px solid var(--linha); }
.minitela-pontos { display: inline-flex; gap: 5px; flex: none; }
.minitela-pontos i { width: 9px; height: 9px; border-radius: 50%; background: #C6CCDA; }
.minitela-endereco {
	flex: 1;
	min-width: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--linha);
	color: var(--tinta-suave);
	font-size: .76rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.minitela-endereco b { color: var(--tinta); font-weight: 700; }

/* TOPO DO PAINEL, NA COR DO CLIENTE */
.minitela-topo { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--cor-cliente); color: var(--cor-cliente-texto); transition: background-color .3s, color .3s; }
.minitela-topo .mini-nome small { color: inherit; opacity: .82; }
.minitela-sigla {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px; height: 34px;
	padding: 0 6px;
	border-radius: 9px;
	background: var(--cor-cliente);
	color: var(--cor-cliente-texto);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
	transition: background-color .3s, color .3s;
}
.minitela-topo .minitela-sigla { background: #fff; color: var(--tinta); }

.minitela-corpo { padding: 16px; }
.minitela-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.minitela-titulo .icone { width: 18px; height: 18px; color: var(--nuvem); }
.minitela-rotulo { margin: 0 0 8px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7A7F99; }
.minitela-legenda { margin: 12px 0 0; font-size: .76rem; color: #7A7F99; text-align: right; }

.mini-nome { display: flex; flex-direction: column; min-width: 0; font-weight: 700; font-size: .92rem; line-height: 1.25; }
.mini-nome small { font-weight: 500; font-size: .8rem; color: var(--tinta-suave); }
.mini-texto { margin: -6px 0 10px; color: var(--tinta-suave); font-size: .86rem; }

.mini-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 34px;
	padding: 6px 14px;
	border: 1.5px solid var(--linha);
	border-radius: 8px;
	background: #fff;
	color: var(--tinta);
	font: 600 .82rem/1.2 var(--fonte-interface);
	white-space: nowrap;
	transition: background-color .3s, border-color .3s, color .3s;
}
.mini-botao-cheio { background: var(--cor-cliente); border-color: var(--cor-cliente); color: var(--cor-cliente-texto); }

/* BOTÃO DE VERDADE DENTRO DA MINI-TELA: PISCA UM ARO PARA CHAMAR O CLIQUE */
button.mini-botao { position: relative; min-height: 42px; padding: 8px 18px; font-size: .9rem; cursor: pointer; }
button.mini-botao::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 2px solid var(--cor-cliente);
	border-radius: 12px;
	opacity: 0;
	animation: chamar 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes chamar { 0% { opacity: .7; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.06); } }

.mini-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-lista li, .mini-perfil { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.mini-lista li > .mini-botao, .mini-lista li > .mini-selo, .mini-lista li > .mini-cores, .mini-perfil > .mini-selo { margin-left: auto; flex: none; }
.mini-perfil { margin-bottom: 12px; }
.mini-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cor-cliente-suave); color: var(--tinta); transition: background-color .3s; }
.mini-icone .icone { width: 18px; height: 18px; }

.mini-selo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; animation: surgir .35s ease both; }
.mini-selo .icone { width: 13px; height: 13px; stroke-width: 2.6; }
.mini-selo-novo { background: var(--marca-texto); color: var(--tinta); }
.mini-selo-certo { background: #E7F6EE; color: #1E6B47; }

.mini-campos { margin: 0 0 14px; display: grid; gap: 8px; }
.mini-campos div { padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--nevoa); }
.mini-campos dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7A7F99; }
.mini-campos dd { margin: 2px 0 0; font-weight: 600; font-size: .88rem; }

.mini-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mini-etiquetas span { padding: 4px 10px; border-radius: 999px; background: var(--nevoa); border: 1px solid var(--linha); font-size: .78rem; font-weight: 600; }

.mini-estado { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600; line-height: 1.35; animation: surgir .35s ease both; }
.mini-estado .icone { width: 17px; height: 17px; margin-top: 1px; stroke-width: 2.4; }
.mini-estado-espera { background: #FFF4C2; color: #6B4E00; }
.mini-estado-certo { background: #E7F6EE; color: #1E6B47; }

.mini-rodape { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--linha); color: var(--tinta-suave); font-size: .86rem; }
.mini-rodape .icone { width: 16px; height: 16px; }
.mini-rodape strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* CLASSIFICAÇÃO DOS INSCRITOS POR COR */
.mini-cores { display: inline-flex; gap: 6px; }
.mini-cor { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--cor); background: #fff; cursor: pointer; transition: background-color .15s, transform .15s, box-shadow .15s; }
.mini-cor:hover { transform: scale(1.1); }
.mini-cor[aria-pressed="true"] { background: var(--cor); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cor); }
.mini-cor-verde { --cor: #2E9E68; }
.mini-cor-amarelo { --cor: #E0A800; }
.mini-cor-vermelho { --cor: #D2543F; }

/* SEM JAVASCRIPT OS BOTÕES DOS EXEMPLOS NÃO FAZEM NADA: FICAM SÓ COMO DESENHO */
html:not(.js) button.mini-botao::after { display: none; }

/* ---------------------------------------------------------
   PASSO 1: VEJA COM A SUA MARCA
   --------------------------------------------------------- */

.suamarca {
	display: grid;
	gap: 28px;
	margin-top: 28px;
	padding: clamp(18px, 3vw, 32px);
	border-radius: 20px;
	background: var(--nevoa);
	border: 1px solid var(--linha);
}
@media (min-width: 900px) {
	.suamarca { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 36px; }
}
html:not(.js) .suamarca-controles { display: none; }

.suamarca h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.suamarca h3 .icone { width: 24px; height: 24px; color: var(--nuvem); }
.suamarca-controles p { margin: 10px 0 0; color: var(--tinta-suave); }
.suamarca-controles .suamarca-rotulo { display: block; margin: 22px 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6A6F8B; }
.suamarca-nome {
	width: 100%;
	min-height: 50px;
	padding: 10px 14px;
	border: 1.5px solid var(--linha);
	border-radius: 10px;
	background: #fff;
	color: var(--tinta);
	font: 500 1rem var(--fonte-interface);
	transition: border-color .15s, box-shadow .15s;
}
.suamarca-nome::placeholder { color: #8C91AB; }
.suamarca-nome:focus { outline: 0; border-color: var(--nuvem); box-shadow: 0 0 0 3px rgba(var(--nuvem-rgb), .18); }

.suamarca-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.suamarca-cor {
	position: relative;
	width: 42px; height: 42px;
	padding: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--cor);
	box-shadow: 0 0 0 1.5px var(--linha);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.suamarca-cor:hover { transform: scale(1.08); }
.suamarca-cor[aria-pressed="true"], .suamarca-cor-outra.escolhida { box-shadow: 0 0 0 3px var(--tinta); }
.suamarca-cor-outra { background: conic-gradient(#E5484D, #F2B705, #2E9E68, #1775B9, #6A3FB5, #E5484D); overflow: hidden; }
.suamarca-cor-outra input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); padding: 0; border: 0; opacity: 0; cursor: pointer; }
.suamarca-cor-outra:focus-within { outline: 3px solid var(--nuvem); outline-offset: 2px; }
.suamarca-controles .suamarca-nota { margin-top: 18px; font-size: .9rem; }

/* A PÁGINA CARREIRAS */
.carreiras-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.carreiras-topo strong { min-width: 0; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carreiras-menu { display: none; gap: 14px; margin-left: auto; color: var(--tinta-suave); font-size: .78rem; font-weight: 600; }
.carreiras-menu i { font-style: normal; }
.carreiras-topo .mini-botao { margin-left: auto; min-height: 30px; padding: 4px 12px; }
@media (min-width: 520px) {
	.carreiras-menu { display: inline-flex; }
	.carreiras-menu + .mini-botao { margin-left: 4px; }
}
.carreiras-abertura {
	padding: 22px 16px 20px;
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1px, transparent 0) 0 0 / 16px 16px,
		linear-gradient(140deg, var(--cor-cliente), var(--cor-cliente-funda));
	color: var(--cor-cliente-texto);
	transition: color .3s;
}
.carreiras-abertura p { margin: 0; }
.carreiras-selo { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.carreiras-abertura .carreiras-titulo { margin-top: 12px; font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.carreiras-abertura .carreiras-texto { margin-top: 8px; font-size: .88rem; opacity: .92; }
.carreiras-abertura .carreiras-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.carreiras-botoes .mini-botao-cheio { background: #fff; border-color: #fff; color: var(--tinta); }
.carreiras-botoes .mini-botao:not(.mini-botao-cheio) { background: transparent; border-color: currentColor; color: inherit; }

/* ---------------------------------------------------------
   PASSO 2: DESENHO DO FLUXO (SÓ COM JAVASCRIPT)
   --------------------------------------------------------- */

.fluxo { display: none; }
.js .fluxo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 16px;
	margin-top: 16px;
	padding: 26px clamp(16px, 3vw, 30px);
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--linha);
}
/* SÓ CANDIDATO E BANCO (A MARCA NÃO TEM ASSOCIADO NEM O TEXTO DA EQUIPE) */
.js .fluxo-curto { grid-template-columns: auto minmax(0, 1fr) auto; }
.fluxo-no { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 92px; text-align: center; font-size: .92rem; line-height: 1.25; }
.fluxo-no:not(.fluxo-no-banco) { padding-top: 6px; }
.fluxo-no small { max-width: 16ch; color: var(--tinta-suave); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fluxo-no-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ceu); color: var(--nuvem); }
.fluxo-no-icone .icone { width: 28px; height: 28px; }
.fluxo-no-banco .fluxo-no-icone { width: 68px; height: 68px; border-radius: 20px; background: var(--cor-cliente); color: var(--cor-cliente-texto); box-shadow: 0 16px 30px -16px rgba(var(--tinta-rgb), .6); transition: background-color .3s, color .3s; }
.fluxo-no-banco .fluxo-no-icone .icone { width: 32px; height: 32px; }

/* A LIGAÇÃO ENTRE DOIS PONTOS: A LINHA FICA NA ALTURA DOS ÍCONES E O TEXTO ABAIXO DELA (NO HTML O TEXTO VEM ANTES) */
.fluxo-ligacao { display: flex; flex-direction: column-reverse; align-items: center; gap: 16px; padding-top: 32px; text-align: center; }
.fluxo-ligacao-texto { display: block; max-width: 22ch; font-size: .85rem; font-weight: 600; line-height: 1.3; animation: surgir .3s ease both; }
.fluxo-ligacao .fluxo-desligado { display: none; }
.fluxo-ligacao.desligado .fluxo-ligado { display: none; }
.fluxo-ligacao.desligado .fluxo-desligado { display: block; }

/* A LINHA COM OS TRAÇOS CORRENDO NO SENTIDO DO FLUXO */
.fluxo-ligacao-linha {
	position: relative;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, var(--nuvem) 0 10px, transparent 10px 18px) 0 0 / 18px 100%;
	animation: correr .9s linear infinite;
}
.fluxo-ligacao-linha::after {
	content: "";
	position: absolute;
	right: -1px; top: 50%;
	width: 11px; height: 11px;
	border-top: 3px solid var(--nuvem);
	border-right: 3px solid var(--nuvem);
	transform: translateY(-50%) rotate(45deg);
}
@keyframes correr { to { background-position: 18px 0; } }
@keyframes correr-descendo { to { background-position: 0 18px; } }

/* DESATIVADO: O CAMINHO PASSA PELA ENTIDADE */
.fluxo-ligacao.desligado .fluxo-ligacao-linha { background-image: repeating-linear-gradient(90deg, #9A9FB8 0 4px, transparent 4px 18px); animation-duration: 2.6s; }
.fluxo-ligacao.desligado .fluxo-ligacao-linha::after { border-color: #9A9FB8; }
.fluxo-ligacao-via {
	position: absolute;
	left: 50%; top: 50%;
	display: none;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--tinta);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	animation: surgir-via .3s ease both;
}
.fluxo-ligacao-via .icone { width: 13px; height: 13px; }
.fluxo-ligacao.desligado .fluxo-ligacao-via { display: inline-flex; }
@keyframes surgir-via { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* NO CELULAR O FLUXO DESCE: A LINHA FICA EM PÉ E O TEXTO AO LADO */
@media (max-width: 759px) {
	.js .fluxo { grid-template-columns: 1fr; gap: 8px; }
	.fluxo-no:not(.fluxo-no-banco) { padding-top: 0; }
	.fluxo-ligacao { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 14px; padding-top: 0; }
	.fluxo-ligacao-linha {
		grid-column: 2; grid-row: 1;
		width: 4px; height: 64px;
		margin-bottom: 6px;
		background: repeating-linear-gradient(180deg, var(--nuvem) 0 10px, transparent 10px 18px) 0 0 / 100% 18px;
		animation-name: correr-descendo;
	}
	.fluxo-ligacao-linha::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
	.fluxo-ligacao.desligado .fluxo-ligacao-linha { background-image: repeating-linear-gradient(180deg, #9A9FB8 0 4px, transparent 4px 18px); }
	.fluxo-ligacao-texto { grid-column: 3; grid-row: 1; max-width: none; text-align: left; }
	.fluxo-ligacao-via { left: auto; right: calc(100% + 12px); transform: translateY(-50%); animation: none; }
}

.fluxo-resumo { display: none; }
.js .fluxo-resumo { display: block; margin-top: 14px; padding: 16px 20px; border-radius: 12px; background: var(--ceu); border: 1px solid var(--borda-ceu); }
.fluxo-resumo > div { animation: surgir .3s ease both; }
.fluxo-resumo p { margin: 0; }
.fluxo-resumo p + p { margin-top: 8px; }
.fluxo-resumo mark { padding: 0; background: none; font-weight: 800; }

/* ---------------------------------------------------------
   PASSO 3: DIVULGAÇÃO (PÚBLICOS E EXEMPLO DE ARTE)
   --------------------------------------------------------- */

.divulga { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 860px) {
	.divulga { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: 36px; }
}
.divulga-publicos { display: grid; gap: 16px; }
.divulga-botao { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
html:not(.js) .divulga-botao { display: none; }
.js .divulga-publico.ativo { border-color: var(--nuvem); box-shadow: 0 0 0 1px var(--nuvem), 0 22px 44px -30px rgba(var(--tinta-rgb), .45); }
.js .divulga-publico.ativo .cartao-icone { background: var(--nuvem); color: #fff; }
.divulga-botao[aria-pressed="true"] { color: var(--tinta); }

.arte { width: 100%; max-width: 360px; margin: 0 auto; padding-bottom: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(var(--tinta-rgb), .45); overflow: hidden; }
.arte-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.arte .minitela-legenda { margin-right: 14px; }
.arte-imagem {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: clamp(22px, 6vw, 30px);
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1px, transparent 0) 0 0 / 18px 18px,
		linear-gradient(145deg, var(--cor-cliente), var(--cor-cliente-funda));
	color: var(--cor-cliente-texto);
	animation: surgir .35s ease both;
}
html:not(.js) .arte-imagem[hidden] { display: flex !important; }
.arte-imagem p { margin: 0; }
.arte-selo { align-self: flex-start; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.arte-imagem .arte-titulo { margin-top: 16px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.arte-imagem .arte-texto { margin-top: 12px; font-size: 1rem; line-height: 1.4; opacity: .94; }
.arte-imagem .arte-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.arte-etiquetas span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: .8rem; font-weight: 700; }
.arte-etiquetas .icone { width: 15px; height: 15px; stroke-width: 2.6; color: #1E8A5A; }
.arte-imagem .arte-acesso { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-size: .86rem; font-weight: 600; line-height: 1.35; }
.arte-qr { flex: none; padding: 5px; border-radius: 10px; background: #fff; fill: #1F2044; }

/* ---------------------------------------------------------
   PASSO 4: O CAMINHO DE UMA VAGA
   --------------------------------------------------------- */

.caminho {
	margin-top: 28px;
	padding: clamp(18px, 3vw, 32px);
	border-radius: 20px;
	background: var(--nevoa);
	border: 1px solid var(--linha);
}

/* AS ETAPAS NUMERADAS, LIGADAS POR UMA LINHA QUE SE ENCHE (--andamento VEM DO como_funciona.js) */
.caminho-etapas { display: none; }
.js .caminho-etapas {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--etapas, 5), minmax(0, 1fr));
	list-style: none;
	margin: 0 0 clamp(22px, 3vw, 32px);
	padding: 0;
}
.caminho-etapas::before, .caminho-etapas::after {
	content: "";
	position: absolute;
	top: 20px;
	left: calc(50% / var(--etapas, 5));
	right: calc(50% / var(--etapas, 5));
	height: 2px;
	background: var(--linha);
}
.caminho-etapas::after { background: var(--nuvem); transform: scaleX(var(--andamento, 0)); transform-origin: left center; transition: transform .4s ease; }
.caminho-etapa {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tinta-suave);
	font: 600 .86rem/1.2 var(--fonte-interface);
	cursor: pointer;
}
.caminho-etapa-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 2px solid var(--linha);
	border-radius: 50%;
	background: #fff;
	color: var(--tinta-suave);
	font-size: 1rem;
	font-weight: 800;
	transition: background-color .25s, border-color .25s, color .25s, transform .25s;
}
.caminho-etapa:hover .caminho-etapa-numero { border-color: var(--nuvem); }
.caminho-etapa.percorrida .caminho-etapa-numero { background: var(--nuvem); border-color: var(--nuvem); color: #fff; }
.caminho-etapa[aria-selected="true"] { color: var(--tinta); }
.caminho-etapa[aria-selected="true"] .caminho-etapa-numero { background: var(--tinta); border-color: var(--tinta); color: #fff; transform: scale(1.12); }
@media (max-width: 640px) {
	.caminho-etapa-rotulo { display: none; }
}

.caminho-painel { display: grid; gap: 24px; }
.js .caminho-painel { animation: surgir .35s ease both; }
@media (min-width: 900px) {
	.caminho-painel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
	.js .caminho-painel { min-height: 372px; }
}
html:not(.js) .caminho-painel + .caminho-painel { margin-top: 32px; padding-top: 32px; border-top: 1px dashed var(--linha); }
.caminho-contagem { margin: 0 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6A6F8B; }
.caminho-texto h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; }
.caminho-texto > p:not(.caminho-contagem) { margin: 14px 0 0; font-size: 1.05rem; color: var(--tinta-texto); }
.caminho .minitela-acao { min-height: 44px; }
.caminho .mini-lista .minitela-acao { min-height: 0; }

.caminho-botoes { display: none; }
.js .caminho-botoes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(22px, 3vw, 30px); padding-top: clamp(18px, 3vw, 24px); border-top: 1px dashed var(--linha); }
.caminho-botoes .botao[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.caminho-botoes .botao-secundario .icone { order: -1; }
.caminho-botoes .botao-secundario:hover .icone { transform: translateX(-3px); }
@media (max-width: 480px) {
	.caminho-botoes .botao { flex: 1 1 100%; }
	.caminho-botoes .botao-principal { order: -1; }
}

/* ---------------------------------------------------------
   PASSO 5: OS NÚMEROS DO PAINEL
   --------------------------------------------------------- */

.indicadores { margin-top: 28px; }
.indicadores-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
	.indicadores-lista { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.indicadores-lista li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; }
.indicadores-lista strong { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.indicadores-lista span { color: var(--tinta-suave); font-size: .84rem; font-weight: 600; }

.indicadores-grafico { display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 10px); height: 96px; padding: 0 2px; border-bottom: 2px solid var(--linha); }
.indicadores-grafico span { flex: 1; height: var(--altura); border-radius: 6px 6px 0 0; background: var(--cor-cliente); opacity: .32; transform-origin: bottom; transition: transform .8s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.indicadores-grafico span:nth-last-child(-n+3) { opacity: 1; }
.js .indicadores-grafico span { transform: scaleY(0); }
.js .indicadores.contado .indicadores-grafico span { transform: none; }
.indicadores-grafico span:nth-child(2n) { transition-delay: .08s; }
.indicadores-grafico span:nth-child(3n) { transition-delay: .16s; }