/* =============================================================================
   css/paginas/pesquisa.css — a página /pesquisa
   -----------------------------------------------------------------------------
   Carregado só nesta página (o index.php inclui css/paginas/<página>.css).
   Usa as cores do lumikit-cores.css; os valores depois da vírgula nos var()
   são só reserva, caso o arquivo de cores não carregue.

   O elemento de destaque é o cupom (.pq-ticket): a parte do desconto separada
   por um picotado, como um bilhete. O resto é propositalmente quieto — quem
   responde 20 perguntas precisa de opções fáceis de tocar, não de enfeite.
   ============================================================================= */

.pq {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 20px 24px;
	color: var(--lk-texto, #1c2320);
	/* Texto maior que o padrão do site: são 16 perguntas seguidas, lidas em
	   pé, no celular, muitas vezes por quem já não enxerga de perto. */
	font-size: 1.0625rem;
	line-height: 1.6;
}
.pq [hidden] { display: none !important; }

.pq h1 {
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--lk-texto, #1c2320);
}
.pq h2 {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lk-linha, #e2e7e4);
	color: var(--lk-texto, #1c2320);
}
.pq p { max-width: 64ch; }


/* ---------------------------------------------------------------- topo */
.pq-topo p { color: var(--lk-texto-2, #3a453f); margin: 0 0 10px; }
.pq-topo .pq-topo-premio {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--lk-verde-fundo, #eef8ec);
	border-left: 4px solid var(--lk-verde-forte, #298611);
	border-radius: 0 8px 8px 0;
	color: var(--lk-texto, #1c2320);
}


/* ---------------------------------------------------------------- grupos e perguntas */
.pq-grupo { margin-top: 44px; }

.pq .pq-pergunta {
	border: 0;
	margin: 0;
	padding: 22px 0;
	min-width: 0;
	border-bottom: 1px solid var(--lk-linha-2, #eef2ef);
}
.pq .pq-pergunta legend {
	float: left;                 /* deixa a margem de baixo funcionar em todo navegador */
	width: 100%;
	padding: 0;
	margin: 0 0 12px;
	border: 0;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lk-texto, #1c2320);
}
.pq .pq-pergunta legend + * { clear: both; }

.pq-dica {
	display: block;
	margin-top: 4px;
	font-size: .95rem;
	font-weight: 400;
	color: var(--lk-texto-4, #7a877d);
}


/* ---------------------------------------------------------------- opções */
.pq-ops {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pq .pq-op {
	position: relative;
	display: inline-flex;
	margin: 0;
	max-width: 100%;
	font-weight: 400;
	cursor: pointer;
}
/* A caixa/bolinha nativa some da vista, mas continua lá: teclado, leitor de
   tela e o próprio formulário funcionam como sempre. */
.pq .pq-op input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.pq-op span {
	display: block;
	padding: 12px 18px;
	border: 1px solid var(--lk-verde-campo, #d6e2d3);
	border-radius: 8px;
	background: var(--lk-branco, #fff);
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--lk-texto-2, #3a453f);
	transition: background-color .12s, border-color .12s;
}
.pq-op:hover span { border-color: var(--lk-verde-medio, #42d41e); }
.pq-op input:checked + span {
	background: var(--lk-verde-fundo, #eef8ec);
	border-color: var(--lk-verde-forte, #298611);
	color: var(--lk-verde-texto-esc, #1a460f);
	font-weight: 600;
}
.pq-op input[type=checkbox]:checked + span::before { content: "✓ "; }
.pq-op input:focus-visible + span {
	outline: 2px solid var(--lk-verde-forte, #298611);
	outline-offset: 2px;
}

/* "Outro" e "Nada, estava tudo certo" ficam em linha própria */
.pq-outro {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pq-outro-texto {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--lk-verde-campo, #d6e2d3);
	border-radius: 8px;
	font: inherit;
}
.pq-nenhum { flex: 1 1 100%; margin-top: 4px; }

/* Régua: opções de mesma largura, da pior para a melhor */
.pq-ops--escala {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.pq-ops--escala .pq-op { display: flex; }
.pq-ops--escala .pq-op span { width: 100%; text-align: center; }

/* Nota de 0 a 10 */
.pq-nota {
	clear: both;
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr));
	gap: 4px;
}
.pq-nota .pq-op { display: flex; }
.pq-nota .pq-op span {
	width: 100%;
	padding: 12px 0;
	font-size: 1.05rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--lk-texto, #1c2320);
	background: #fff;
	/* Fundo com um toque da cor da nota. Navegador antigo ignora esta linha e
	   fica com o branco de cima — o número e as pontas da régua continuam
	   dizendo tudo. */
	background: color-mix(in srgb, var(--nota) 12%, #fff);
	border-color: var(--lk-verde-campo, #d6e2d3);
	border-color: color-mix(in srgb, var(--nota) 35%, var(--lk-linha, #e2e7e4));
}
.pq-nota .pq-op:hover span { border-color: var(--nota); }
.pq-nota .pq-op input:checked + span {
	background: var(--nota);
	border-color: var(--nota);
	/* Branco por padrão; no meio da régua, onde a cor é clara, o número fica
	   escuro. Todas as onze combinações passam de 4,5:1 de contraste. */
	color: var(--nota-num, #fff);
	font-weight: 700;
}

/* ---------------------------------------------------------------- a régua de cor
   De 0 (ruim) a 10 (excelente). A cor é reforço, não a informação: o número
   está escrito em cada botão e as pontas são legendadas — quem não distingue
   vermelho de verde não perde nada.

   As cores foram escolhidas conferindo o contraste do número em cada uma. */
.pq-nota .pq-op:nth-child(1)  { --nota: #c62828; }
.pq-nota .pq-op:nth-child(2)  { --nota: #cf3c1a; }
.pq-nota .pq-op:nth-child(3)  { --nota: #e56a00; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(4)  { --nota: #ef7d00; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(5)  { --nota: #f9a825; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(6)  { --nota: #fdd835; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(7)  { --nota: #cddc39; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(8)  { --nota: #9ccc65; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(9)  { --nota: #66bb6a; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(10) { --nota: #43a047; --nota-num: #1c2320; }
.pq-nota .pq-op:nth-child(11) { --nota: #2e7d32; }

/* Fita fina com a régua inteira, acima das legendas das pontas. */
.pq-nota-legenda { flex-wrap: wrap; }
.pq-nota-legenda::before {
	content: "";
	flex: 0 0 100%;
	height: 4px;
	margin: 2px 0 6px;
	border-radius: 2px;
	background: linear-gradient(to right,
		#c62828, #cf3c1a, #e56a00, #ef7d00, #f9a825, #fdd835,
		#cddc39, #9ccc65, #66bb6a, #43a047, #2e7d32);
}
.pq-nota-legenda {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: .9rem;
	color: var(--lk-texto-4, #7a877d);
}

/* Texto livre */
.pq textarea {
	clear: both;
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--lk-verde-campo, #d6e2d3);
	border-radius: 8px;
	font: inherit;
	resize: vertical;
}
.pq-contador {
	margin: 4px 0 0;
	min-height: 1.2em;
	text-align: right;
	font-size: .8rem;
	color: var(--lk-texto-4, #7a877d);
}

.pq input:focus-visible,
.pq textarea:focus-visible {
	outline: 2px solid var(--lk-verde-forte, #298611);
	outline-offset: 1px;
}


/* ---------------------------------------------------------------- erros */
.pq-erro-geral {
	margin: 20px 0 0;
	padding: 12px 16px;
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: 8px;
	color: #8c1d18;
}
.pq .pq-pergunta.pq-com-erro {
	padding-left: 14px;
	box-shadow: inset 3px 0 0 #c62828;
}
.pq-erro {
	clear: both;
	margin: 0 0 10px;
	font-size: .95rem;
	font-weight: 600;
	color: #b3261e;
}


/* ---------------------------------------------------------------- receber o cupom */
.pq-campo { margin-top: 20px; }
.pq .pq-campo > label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}
.pq-campo input[type=email] {
	width: min(100%, 420px);
	padding: 12px 14px;
	border: 1px solid var(--lk-verde-campo, #d6e2d3);
	border-radius: 8px;
	font: inherit;
}
.pq-com-erro input[type=email],
.pq-com-erro #pq-capt { border-color: #c62828; }

.pq .pq-aceite {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	color: var(--lk-texto-2, #3a453f);
}
.pq-aceite input {
	margin-top: 4px;
	accent-color: var(--lk-verde-forte, #298611);
	flex: none;
}

.pq-capt {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.pq-capt img {
	border: 1px solid var(--lk-linha, #e2e7e4);
	border-radius: 6px;
	background: var(--lk-branco, #fff);
}
.pq-capt input {
	width: 130px;
	padding: 12px 14px;
	border: 1px solid var(--lk-verde-campo, #d6e2d3);
	border-radius: 8px;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

.pq-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .9rem;
	color: var(--lk-verde-texto, #256215);
	text-decoration: underline;
	cursor: pointer;
}

/* Campo-isca: fora da tela, sem ocupar espaço, fora da navegação por teclado */
.pq-isca {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ---------------------------------------------------------------- barra de progresso e envio */
.pq-barra {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px 16px;
	margin-top: 32px;
	padding: 12px 0 max(12px, env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid var(--lk-linha, #e2e7e4);
}
.pq-barra-progresso {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 3px;
	background: var(--lk-linha-2, #eef2ef);
	overflow: hidden;
}
.pq-barra-progresso span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--lk-verde-forte, #298611);
	transition: width .25s ease;
}
.pq-barra-texto {
	margin: 0;
	font-size: 1rem;
	color: var(--lk-texto-2, #3a453f);
	cursor: pointer;
}


/* ---------------------------------------------------------------- botões */
.pq .pq-botao {
	display: inline-block;
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--lk-verde-forte, #298611);
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.pq .pq-botao:hover,
.pq .pq-botao:focus { background: var(--lk-verde-escuro, #1f6c0b); color: #fff; }
.pq .pq-botao:focus-visible { outline: 2px solid var(--lk-verde-forte, #298611); outline-offset: 2px; }
.pq .pq-botao:disabled {
	background: var(--lk-texto-5, #98a89b);
	cursor: not-allowed;
}
.pq .pq-botao--secundario {
	background: transparent;
	color: var(--lk-verde-texto, #256215);
	box-shadow: inset 0 0 0 1px var(--lk-verde-forte, #298611);
}
.pq .pq-botao--secundario:hover { background: var(--lk-verde-fundo, #eef8ec); color: var(--lk-verde-texto-esc, #1a460f); }


/* ---------------------------------------------------------------- resultado */
.pq-resultado-intro { font-size: 1.05rem; }

.pq-ticket {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 20px 0 24px;
	border: 1px solid var(--lk-verde-borda, #c4e7bb);
	border-radius: 12px;
	overflow: hidden;
	background: var(--lk-branco, #fff);
}
.pq-ticket-valor {
	display: flex;
	align-items: center;
	padding: 20px 24px;
	background: var(--lk-verde-forte, #298611);
	color: #fff;
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
}
.pq-ticket-corpo {
	padding: 18px 22px;
	border-left: 2px dashed var(--lk-verde-borda, #c4e7bb);
}
.pq-ticket-codigo {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	background: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(1.25rem, 4vw, 1.7rem);
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--lk-texto, #1c2320);
	user-select: all;
	word-break: break-all;
}
.pq-copiar {
	padding: 6px 12px;
	border: 1px solid var(--lk-verde-forte, #298611);
	border-radius: 6px;
	background: var(--lk-branco, #fff);
	color: var(--lk-verde-texto, #256215);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}
.pq-ticket-validade {
	margin: 12px 0 0;
	font-size: .9rem;
	color: var(--lk-texto-3, #5a665e);
}
.pq-alerta {
	padding: 12px 16px;
	background: #fff6e0;
	border: 1px solid #f0d58a;
	border-radius: 8px;
}
.pq-passos { padding-left: 1.3em; line-height: 1.7; color: var(--lk-texto-2, #3a453f); }
.pq-resultado h2 { margin-top: 28px; }
.pq-aviso { padding: 24px 0; }


/* ---------------------------------------------------------------- celular */
@media (max-width: 560px) {
	.pq { padding: 24px 16px 16px; }
	.pq-barra { grid-template-columns: 1fr; }
	.pq-barra .pq-botao { width: 100%; }
	/* Onze botões numa linha só dão ~28px cada, menos que a ponta do dedo.
	   Em duas linhas (0–5 e 6–10) cada um fica com o dobro. */
	.pq-nota { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
	.pq-nota .pq-op span { padding: 14px 0; font-size: 1.05rem; }
	.pq-ticket { grid-template-columns: 1fr; }
	.pq-ticket-valor { padding: 14px 20px; }
	.pq-ticket-corpo { border-left: 0; border-top: 2px dashed var(--lk-verde-borda, #c4e7bb); }
}

@media (prefers-reduced-motion: reduce) {
	.pq-op span, .pq-barra-progresso span { transition: none; }
}

/* ---------------------------------------------------------------- uma pergunta por vez */
/* Aplicada pelo JavaScript. Sem JavaScript a classe nunca entra, e a página
   continua mostrando tudo de uma vez. */
.pq .pq-oculto { display: none !important; }

.pq-barra-acoes {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.pq-erro-passo { margin-top: -4px; }

/* Com uma pergunta por tela sobra espaço: a pergunta fica maior e as opções
   mais fáceis de acertar com o dedo. */
.pq .pq-pergunta:not(.pq-oculto) legend { font-size: 1.35rem; }
.pq .pq-pergunta { border-bottom: 0; }

@media (max-width: 560px) {
	.pq-barra-acoes { width: 100%; }
	.pq-barra-acoes .pq-botao { flex: 1; }
}