/* =========================================================
   DESAFIOS DO SITE - ACE CURRÍCULOS E GESTÃO DE CURRÍCULOS
   Carregado só pelas páginas dos desafios, depois do site.css:
   usa as cores, as fontes e as peças de lá (botões, selo, ficha com aba).
   As cores da marca vêm das variáveis do site.css, por isso o mesmo
   arquivo serve os dois sites.
   ========================================================= */

/* ---------------------------------------------------------
   TRIAGEM CONTRA O RELÓGIO
   --------------------------------------------------------- */

.triagem {
	--triagem-certo: #1E6B47;
	--triagem-certo-fundo: #E7F6EE;
	--triagem-certo-borda: #9ED3B5;
	--triagem-errado: #A8321F;
	--triagem-errado-fundo: #FDECE8;
	--triagem-errado-borda: #F1B7AB;
	--triagem-urgente: #C8452C;
}

/* AS TELAS DO DESAFIO (INÍCIO, JOGO E RESULTADO) SÃO TROCADAS PELO ATRIBUTO hidden */
.triagem [hidden] { display: none !important; }

.triagem-secao, .diagnostico-secao, .anuncio-secao { padding-top: clamp(36px, 5vw, 64px); }

.triagem-jogo, .triagem-resultado { animation: surgir .35s ease both; }

/* TELA 1: A VAGA E AS REGRAS */
.triagem-inicio { display: grid; gap: 44px; align-items: start; }
@media (min-width: 900px) {
	.triagem-inicio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
}

.triagem-vaga-titulo { margin: 0 0 20px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }

.triagem-requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.triagem-requisitos li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border: 1px solid var(--linha);
	border-radius: 12px;
}
.triagem-requisitos .cartao-icone { width: 40px; height: 40px; border-radius: 11px; }
.triagem-requisitos .cartao-icone .icone { width: 21px; height: 21px; }
.triagem-requisito-texto { display: flex; flex-direction: column; line-height: 1.3; }
.triagem-requisito-texto small { font-size: .78rem; font-weight: 500; color: var(--tinta-suave); }
.triagem-requisito-texto strong { font-size: 1rem; }

.triagem-regras h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; }
.triagem-regras ol { counter-reset: regra; list-style: none; margin: 24px 0 32px; padding: 0; display: grid; gap: 16px; }
.triagem-regras li {
	counter-increment: regra;
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 14px;
	align-items: center;
	font-size: 1.08rem;
	line-height: 1.45;
	color: var(--tinta-texto);
}
.triagem-regras li::before {
	content: counter(regra);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--ceu);
	color: var(--nuvem-escura);
	font-weight: 800;
}
.triagem-nota { margin: 14px 0 0; font-size: .88rem; color: var(--tinta-suave); }

/* TELA 2: A BARRA DO RELÓGIO ACOMPANHA A ROLAGEM, LOGO ABAIXO DO TOPO DO SITE */
.triagem-barra {
	position: sticky;
	top: calc(var(--altura-topo) + 10px);
	z-index: 20;
	padding: 14px 16px 12px;
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: 16px;
	box-shadow: 0 18px 40px -28px rgba(var(--tinta-rgb), .5);
}
/* COBRE O VÃO ENTRE O TOPO DO SITE E A BARRA, PARA AS FICHAS NÃO APARECEREM ALI AO ROLAR */
.triagem-barra::before, .anuncio-barra::before {
	content: "";
	position: absolute;
	left: -1px; right: -1px; bottom: 100%;
	height: 12px;
	background: var(--papel);
}
.triagem-barra-linha { display: flex; align-items: center; gap: 12px 20px; }

.triagem-relogio { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.triagem-relogio .icone { align-self: center; width: 22px; height: 22px; color: var(--nuvem); }
.triagem-relogio strong { min-width: 2ch; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; text-align: right; }
.triagem-relogio span { font-weight: 600; color: var(--tinta-suave); }

.triagem-contagem { margin: 0 0 0 auto; font-size: .95rem; color: var(--tinta-suave); }
.triagem-contagem strong { font-size: 1.15rem; color: var(--tinta); }
.triagem-tremer { animation: triagem-tremer .3s ease; }
@keyframes triagem-tremer {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.triagem-barra .botao { min-height: 42px; padding: 8px 16px; }
.triagem-barra .botao:disabled { background: var(--nevoa); color: #8C91AB; cursor: not-allowed; }
.triagem-barra .botao:disabled:hover .icone { transform: none; }

.triagem-progresso { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--nevoa); overflow: hidden; }
.triagem-progresso span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--nuvem);
	transform-origin: left center;
	transition: transform .1s linear, background-color .3s;
}

/* ÚLTIMOS 10 SEGUNDOS */
.triagem-urgente .triagem-progresso span { background: var(--triagem-urgente); }
.triagem-urgente .triagem-relogio strong,
.triagem-urgente .triagem-relogio .icone { color: var(--triagem-urgente); }

.triagem-lembrete {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 10px 0 0;
	padding: 0;
	font-size: .86rem;
	font-weight: 600;
	color: var(--tinta-suave);
}
.triagem-lembrete li { display: inline-flex; align-items: center; gap: 5px; }
.triagem-lembrete .icone { width: 14px; height: 14px; color: var(--nuvem); stroke-width: 2.6; }

/* OS CURRÍCULOS */
.triagem-fichas { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 620px) {
	.triagem-fichas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.triagem-fichas { grid-template-columns: repeat(4, 1fr); }
}

.triagem-ficha {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 100%;
	padding: 16px 16px 18px;
	background: #fff;
	border: 1.5px solid var(--linha);
	border-radius: 16px;
	color: var(--tinta);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s, background-color .15s, box-shadow .15s, opacity .15s;
}
.triagem-ficha:hover { border-color: var(--borda-marca-forte); }
.triagem-ficha[aria-pressed="true"] { border-color: var(--nuvem); background: var(--ceu); box-shadow: 0 14px 30px -22px rgba(var(--nuvem-rgb), .9); }

/* COM AS ESCOLHAS COMPLETAS, AS FICHAS QUE FICARAM DE FORA PERDEM A FORÇA */
.triagem-completa .triagem-ficha[aria-pressed="false"] { opacity: .6; }

.triagem-ficha-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
.triagem-ficha[aria-pressed="true"] .triagem-ficha-topo { border-bottom-color: var(--borda-marca-forte); }
.triagem-ficha-nome { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.triagem-ficha-marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px; height: 26px;
	margin-left: auto;
	border: 1.5px solid var(--linha);
	border-radius: 50%;
	color: transparent;
}
.triagem-ficha-marca .icone { width: 15px; height: 15px; stroke-width: 3; }
.triagem-ficha[aria-pressed="true"] .triagem-ficha-marca { background: var(--nuvem); border-color: var(--nuvem); color: #fff; }

.triagem-ficha-linha { display: flex; align-items: flex-start; gap: 9px; font-size: .93rem; line-height: 1.3; }
.triagem-ficha-linha > .icone { width: 17px; height: 17px; margin-top: 2px; color: var(--nuvem); }
.triagem-ficha-linha small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7A7F99; }

/* NO CELULAR, O RÓTULO DE CADA LINHA SAI DA TELA (O ÍCONE FICA) PARA CABEREM MAIS FICHAS; OS LEITORES DE TELA CONTINUAM LENDO */
@media (max-width: 619px) {
	.triagem-ficha { gap: 7px; padding: 14px 14px 15px; }
	.triagem-ficha-linha small {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.triagem-barra { padding: 12px 12px 10px; }
	.triagem-barra-linha { gap: 10px; }
	.triagem-barra .botao { padding: 8px 14px; }
	.triagem-barra .botao .icone { display: none; }
	.triagem-relogio strong { font-size: 1.7rem; }
	.triagem-contagem { font-size: .85rem; white-space: nowrap; }
	.triagem-contagem strong { font-size: 1.05rem; }
}

/* TELA BEM ESTREITA: A CONTAGEM FICA SÓ "1 de 3" (A PALAVRA "escolhidos" SAI DA TELA, MAS OS LEITORES DE TELA CONTINUAM LENDO) */
@media (max-width: 419px) {
	.triagem-contagem span {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.triagem-lembrete { gap: 2px 12px; font-size: .8rem; }
}

.triagem-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--ceu);
	color: var(--nuvem-escura);
	font-size: .8rem;
	font-weight: 800;
}
.triagem-avatar-2 { background: #FFF4C2; color: #7A5A00; }
.triagem-avatar-3 { background: #E7F6EE; color: #1E6B47; }
.triagem-ficha[aria-pressed="true"] .triagem-avatar { box-shadow: 0 0 0 2px #fff; }
.triagem-ficha[aria-pressed="true"] .triagem-avatar-1 { background: #fff; }

/* TELA 3: O RESULTADO */
.triagem-placar, .diagnostico-placar, .anuncio-placar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.triagem-placar-numero, .diagnostico-placar-numero, .anuncio-placar-numero {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 124px; height: 124px;
	margin: 0;
	border: 2px solid var(--borda-marca);
	border-radius: 50%;
	background: var(--ceu);
	color: var(--nuvem-escura);
	line-height: 1;
}
.triagem-placar-numero strong, .diagnostico-placar-numero strong, .anuncio-placar-numero strong { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.05em; color: var(--tinta); }
.triagem-placar-numero span, .diagnostico-placar-numero span, .anuncio-placar-numero span { margin-top: 4px; font-size: .95rem; font-weight: 700; }
.triagem-placar-texto, .diagnostico-placar-texto, .anuncio-placar-texto { flex: 1 1 280px; }
.triagem-placar-texto h2, .diagnostico-placar-texto h2, .anuncio-placar-texto h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.triagem-placar-texto h2:focus, .diagnostico-placar-texto h2:focus, .anuncio-placar-texto h2:focus { outline: none; }
.triagem-placar-texto p, .diagnostico-placar-texto p, .anuncio-placar-texto p { margin: 10px 0 0; font-size: 1.1rem; color: var(--tinta-suave); }

.triagem-comparacao { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 860px) {
	.triagem-comparacao { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.triagem-comparacao-voce { padding: 28px; background: #fff; border: 1px solid var(--linha); border-radius: 20px; }
.triagem-comparacao-voce p { margin: 6px 0 0; color: var(--tinta-suave); }
.triagem-comparacao-voce .demo-rotulo { margin: 0 0 10px; }
.triagem-comparacao-voce .triagem-comparacao-numero { margin: 0; font-size: 1.1rem; font-weight: 600; }
.triagem-comparacao-numero strong {
	margin-right: 4px;
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--tinta);
	font-variant-numeric: tabular-nums;
}
.triagem-comparacao-voce .triagem-projecao { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--linha); font-weight: 600; color: var(--tinta); }

.triagem-comparacao-plataforma, .diagnostico-plataforma, .anuncio-plataforma { padding: 28px; background: var(--tinta); border-radius: 20px; color: var(--sobre-escuro); }
.triagem-comparacao-plataforma .selo, .diagnostico-plataforma .selo, .anuncio-plataforma .selo { margin-bottom: 16px; }
.triagem-comparacao-plataforma h3, .diagnostico-plataforma h3, .anuncio-plataforma h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); letter-spacing: -0.02em; color: #fff; }
.triagem-comparacao-plataforma p:not(.selo), .diagnostico-plataforma p:not(.selo), .anuncio-plataforma p:not(.selo) { margin: 12px 0 0; line-height: 1.6; }
.triagem-comparacao-plataforma .botao, .diagnostico-plataforma .botao, .anuncio-plataforma .botao { margin-top: 22px; }

.triagem-gabarito-titulo { margin: 44px 0 16px; font-size: 1.35rem; letter-spacing: -0.02em; }
.triagem-gabarito { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.triagem-gabarito-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: 14px;
}
.triagem-gabarito-texto { display: flex; flex-direction: column; min-width: 0; font-size: .95rem; line-height: 1.35; color: var(--tinta-suave); }
.triagem-gabarito-texto strong { font-size: 1rem; color: var(--tinta); }
.triagem-gabarito-escolha {
	flex: none;
	margin-left: auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--tinta);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	white-space: nowrap;
}
.triagem-gabarito-estado {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px; height: 30px;
	border-radius: 50%;
}
.triagem-gabarito-escolha[hidden] + .triagem-gabarito-estado { margin-left: auto; }
.triagem-gabarito-estado .icone { width: 17px; height: 17px; stroke-width: 2.6; }
.triagem-gabarito-certo .triagem-gabarito-estado { background: var(--triagem-certo-fundo); color: var(--triagem-certo); }
.triagem-gabarito-errado .triagem-gabarito-estado { background: var(--triagem-errado-fundo); color: var(--triagem-errado); }

/* O QUE O VISITANTE ESCOLHEU: VERDE QUANDO ACERTOU, VERMELHO QUANDO ERROU */
.triagem-escolhida.triagem-gabarito-certo { background: #F4FBF7; border-color: var(--triagem-certo-borda); }
.triagem-escolhida.triagem-gabarito-errado { background: #FFF8F6; border-color: var(--triagem-errado-borda); }

/* NO CELULAR, O AVISO "Sua escolha" DESCE PARA BAIXO DO TEXTO, PARA NÃO ESPREMER O MOTIVO */
@media (max-width: 619px) {
	.triagem-gabarito-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 6px 12px; }
	.triagem-gabarito-escolha { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 0; }
	.triagem-gabarito-estado { grid-column: 3; grid-row: 1; }
}

.triagem-acoes, .diagnostico-acoes, .anuncio-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* ---------------------------------------------------------
   DIAGNÓSTICO DO RECRUTAMENTO
   (o placar, o bloco escuro da plataforma e os botões do fim
   usam as mesmas regras da triagem, mais acima)
   --------------------------------------------------------- */

/* AS TELAS (PERGUNTAS E RESULTADO) E AS PERGUNTAS SÃO TROCADAS PELO ATRIBUTO hidden */
.diagnostico [hidden] { display: none !important; }

.diagnostico-perguntas { max-width: 760px; margin: 0 auto; }
.diagnostico-pergunta, .diagnostico-resultado { animation: surgir .3s ease both; }

.diagnostico-andamento { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.diagnostico-andamento p { flex: none; margin: 0; font-size: .95rem; font-weight: 600; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.diagnostico-andamento strong { color: var(--tinta); }
.diagnostico-progresso { flex: 1; height: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.diagnostico-progresso span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--nuvem);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}

.diagnostico-pergunta h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.diagnostico-pergunta h2:focus { outline: none; }

.diagnostico-respostas { display: grid; gap: 12px; margin-top: 28px; }
.diagnostico-resposta {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	background: #fff;
	border: 1.5px solid var(--linha);
	border-radius: 14px;
	color: var(--tinta);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s, background-color .15s;
}
.diagnostico-resposta:hover { border-color: var(--borda-marca-forte); }
.diagnostico-resposta[aria-pressed="true"] { border-color: var(--nuvem); background: var(--ceu); }

.diagnostico-letra {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--nevoa);
	color: var(--tinta-suave);
	font-size: .85rem;
	font-weight: 800;
	transition: background-color .15s, color .15s;
}
.diagnostico-resposta[aria-pressed="true"] .diagnostico-letra { background: var(--nuvem); color: #fff; }

.diagnostico-voltar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	padding: 6px 0;
	background: none;
	border: 0;
	color: var(--tinta-suave);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
}
.diagnostico-voltar:hover { color: var(--tinta); }
.diagnostico-voltar .icone { width: 16px; height: 16px; transform: rotate(180deg); }
.diagnostico-nota { margin: 14px 0 0; font-size: .88rem; color: var(--tinta-suave); }

/* O RESULTADO (A NOTA TEM VÍRGULA: UM POUCO MENOR QUE O NÚMERO DA TRIAGEM, PARA CABER NO CÍRCULO) */
.diagnostico-placar-numero strong { font-size: 2.7rem; }
.diagnostico-colunas, .anuncio-colunas { display: grid; gap: 28px 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) {
	.diagnostico-colunas, .anuncio-colunas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.diagnostico-plataforma, .anuncio-plataforma { position: sticky; top: calc(var(--altura-topo) + 20px); }
}

.diagnostico-pontos h3 { margin: 0 0 16px; font-size: 1.35rem; letter-spacing: -0.02em; }
.diagnostico-pontos ol { counter-reset: ponto; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.diagnostico-pontos li {
	counter-increment: ponto;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 4px 14px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: 14px;
}
.diagnostico-pontos li::before {
	content: counter(ponto);
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--ceu);
	color: var(--nuvem-escura);
	font-size: .9rem;
	font-weight: 800;
}
.diagnostico-pontos li small { grid-column: 2; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--tinta-suave); }
.diagnostico-pontos li span { grid-column: 2; line-height: 1.55; color: var(--tinta-texto); }

.diagnostico-sem-pontos {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	background: #F4FBF7;
	border: 1px solid #9ED3B5;
	border-radius: 14px;
	color: #1E6B47;
}
.diagnostico-sem-pontos > .icone { flex: none; margin-top: 3px; stroke-width: 2.6; }
.diagnostico-sem-pontos p { margin: 0; }

/* ---------------------------------------------------------
   ACHE OS ERROS NO ANÚNCIO
   (o placar, as duas colunas do resultado, o bloco escuro da
   plataforma e os botões do fim usam as regras mais acima)
   --------------------------------------------------------- */

/* AS TELAS (ANÚNCIO E RESULTADO) E OS AVISOS DA REVISÃO SÃO TROCADOS PELO ATRIBUTO hidden */
.anuncio [hidden] { display: none !important; }

.anuncio-resultado { animation: surgir .35s ease both; }

/* A BARRA COM A INSTRUÇÃO, A CONTAGEM E O BOTÃO ACOMPANHA A ROLAGEM, LOGO ABAIXO DO TOPO DO SITE */
.anuncio-barra {
	position: sticky;
	top: calc(var(--altura-topo) + 10px);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	max-width: 760px;
	margin: 0 auto;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: 16px;
	box-shadow: 0 18px 40px -28px rgba(var(--tinta-rgb), .5);
}
.anuncio-instrucao { flex: 1 1 260px; margin: 0; font-weight: 600; line-height: 1.4; color: var(--tinta-texto); }
.anuncio-contagem { flex: none; margin: 0 0 0 auto; font-size: .95rem; color: var(--tinta-suave); white-space: nowrap; }
.anuncio-contagem strong { font-size: 1.15rem; color: var(--tinta); }
.anuncio-tremer { animation: triagem-tremer .3s ease; }
.anuncio-barra .botao { flex: none; min-height: 42px; padding: 8px 16px; }
.anuncio-barra .botao:disabled { background: var(--nevoa); color: #8C91AB; cursor: not-allowed; }
.anuncio-barra .botao:disabled:hover .icone { transform: none; }

/* O ANÚNCIO: CADA TRECHO É UM BOTÃO */
.anuncio-ficha { max-width: 760px; margin: 28px auto 0; }
.anuncio-ficha .demo-corpo { display: grid; gap: 4px; }

.anuncio-trecho {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 28px;
	gap: 2px 12px;
	align-items: center;
	width: 100%;
	padding: 11px 12px;
	background: transparent;
	border: 1.5px dashed transparent;
	border-radius: 12px;
	color: var(--tinta);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s, background-color .15s, opacity .15s;
}
.anuncio-trecho:hover { background: var(--nevoa); border-color: var(--linha); }
.anuncio-trecho[aria-pressed="true"] { background: #FFFBEA; border-color: #E5C95A; border-style: solid; }

/* COM TODAS AS MARCAS USADAS, OS TRECHOS SEM MARCA PERDEM A FORÇA */
.anuncio-completo .anuncio-trecho[aria-pressed="false"] { opacity: .6; }

.anuncio-trecho-rotulo { grid-column: 1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7A7F99; }
.anuncio-trecho-texto { grid-column: 1; font-size: 1.02rem; line-height: 1.45; }
.anuncio-trecho-titulo .anuncio-trecho-texto { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.anuncio-trecho-marca {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border: 1.5px solid var(--linha);
	border-radius: 50%;
	color: transparent;
}
.anuncio-trecho-marca .icone { width: 16px; height: 16px; }
.anuncio-trecho[aria-pressed="true"] .anuncio-trecho-marca { background: #A07A00; border-color: #A07A00; color: #fff; }

.anuncio-nota { max-width: 760px; margin: 14px auto 0; font-size: .88rem; color: var(--tinta-suave); }

/* O RESULTADO: A REVISÃO DO ANÚNCIO, TRECHO POR TRECHO */
.anuncio-placar-texto .anuncio-enganos { font-size: 1rem; font-weight: 600; color: var(--tinta); }

.anuncio-revisao h3 { margin: 0 0 16px; font-size: 1.35rem; letter-spacing: -0.02em; }
.anuncio-revisao ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.anuncio-revisao-item { padding: 14px 18px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; }
.anuncio-revisao-certo { padding: 10px 18px; }
.anuncio-revisao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.anuncio-revisao-rotulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7A7F99; }
.anuncio-revisao-estado {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--nevoa);
	color: var(--tinta-suave);
	font-size: .76rem;
	font-weight: 700;
	white-space: nowrap;
}
.anuncio-revisao-estado .icone { width: 13px; height: 13px; stroke-width: 3; }
.anuncio-revisao-original { margin: 6px 0 0; font-weight: 600; line-height: 1.45; color: var(--tinta); }
.anuncio-revisao-problema .anuncio-revisao-original { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: rgba(168, 50, 31, .55); }
.anuncio-revisao-motivo { margin: 8px 0 0; line-height: 1.55; color: var(--tinta-texto); }
.anuncio-revisao-correcao { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #F4FBF7; line-height: 1.5; color: #1E4D36; }
.anuncio-revisao-correcao strong { color: #1E6B47; }

/* VERDE: PROBLEMA ENCONTRADO. VERMELHO: PASSOU BATIDO. AMARELO: TRECHO CERTO QUE FOI MARCADO */
.anuncio-achou { border-color: #9ED3B5; }
.anuncio-achou .anuncio-revisao-estado { background: #E7F6EE; color: #1E6B47; }
.anuncio-perdeu { border-color: #F1B7AB; }
.anuncio-perdeu .anuncio-revisao-estado { background: #FDECE8; color: #A8321F; }
.anuncio-engano { background: #FFFDF3; border-color: #F3E3A0; }
.anuncio-engano .anuncio-revisao-estado { background: #FFF4C2; color: #7A5A00; }