/* ==========================================================================
   Quiz capilar — Figma 3437:8605 (1440x1124) + fluxo 3360:2227
   Coluna centralizada, gap 48, padding 136/112: cabeçalho 806x230 · cartão
   do quiz 960x494 · faixa de selos 960x32.

   Todo seletor começa por .vp-quiz (0,2,0): vence as classes
   compartilhadas (.vp-h2, .vp-lead, .vp-badge__*, .vp-btn) quando a spec
   pede outro valor.

   Bordas: o Figma conta a borda dentro do padding ("strokes included in
   layout"), por isso os paddings aqui são o da spec menos 1px.

   Textos "aparados" (caixa = altura das maiúsculas, como o Figma desenha os
   rótulos de 11px da spec): a margem negativa tira a meia-entrelinha +
   (ascendente - maiúsculas) em cima e a meia-entrelinha + descendente
   embaixo. Myriad Pro: ascendente 0.75, descendente 0.25, maiúsculas 0.674.
   16/22.4 → -4.416 / -7.2 (10.8). Nas telas do fluxo o Figma arredonda a
   caixa aparada para 11 e a entrelinha de 22.4 para 22 (é o que dá as
   caixas de 11, 33 e 99 da spec): -4.4 / -7 numa linha; no resultado,
   entrelinha 22 e -4.1875 / -6.8125 — múltiplos de 1/64 (a unidade de
   layout do Chrome), para a soma dar 11 exatos e a tela fechar em 744.
   ========================================================================== */

.vp-quiz {
	/* Traço tracejado dos cartões da P1 (3446:9371…): #D6D1CA, 8 cheio / 8
	   vazio no lado de 208 e 8 / 7.5 no de 187 — o Figma ajusta o passo a
	   cada lado e põe um traço curto em cada canto. Os cantos são arcos de
	   raio 15.5 (meio do traço de 1px) em SVG, com as fases medidas pixel a
	   pixel contra a referência @2x. */
	--vp-quiz-traco: var(--vp-stone);
	--vp-quiz-canto-te: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M.5 16A15.5 15.5 0 0 1 16 .5' fill='none' stroke='%23d6d1ca' stroke-dasharray='3 6 5.6 6.75 3'/%3E%3C/svg%3E");
	--vp-quiz-canto-td: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 .5A15.5 15.5 0 0 1 15.5 16' fill='none' stroke='%23d6d1ca' stroke-dasharray='3 6.25 5.6 6.5 3'/%3E%3C/svg%3E");
	--vp-quiz-canto-bd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M15.5 0A15.5 15.5 0 0 1 0 15.5' fill='none' stroke='%23d6d1ca' stroke-dasharray='3 6.5 5.6 6.25 3'/%3E%3C/svg%3E");
	--vp-quiz-canto-be: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M16 15.5A15.5 15.5 0 0 1 .5 0' fill='none' stroke='%23d6d1ca' stroke-dasharray='3 6.75 5.6 6 3'/%3E%3C/svg%3E");
	--vp-quiz-sel: #f0e4d0;     /* fundo da opção escolhida (3360:2290) */

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding: 136px var(--vp-gutter);
	background: var(--vp-cream);
}

/* --------------------------------------------------------------------------
   Cabeçalho — 3437:8758 (806 de largura; badge, gap 24, títulos gap 12)
   -------------------------------------------------------------------------- */

.vp-quiz .vp-quiz__head {
	width: 100%;
	max-width: 806px;
}

/* Badge 3437:8769: no Figma o texto de 14px assenta 1.5px mais baixo que no
   Chrome (entrelinha 19.6 arredondada para 20) — as pílulas não se movem.
   O Chrome só assenta texto em pixel inteiro pelo layout: o meio pixel vem
   de translate (medido @2x contra a referência). O rótulo desce 1 pelo
   padding e meio pelo span interno; o subtítulo, só por translate (e meio
   pixel para a esquerda: o "D" do Chrome tem meio pixel a mais de recuo).
   O Figma também arredonda para cima a largura dos textos HUG (73.4 → 74,
   116.3 → 117): é o que dá a pílula de 244. */
.vp-quiz .vp-quiz__head .vp-badge__label {
	justify-content: flex-start;
	min-width: 94px;
	padding-top: 2.5px;
}

.vp-quiz .vp-quiz__badge-nome {
	translate: 0 0.5px;
}

.vp-quiz .vp-quiz__head .vp-badge__text {
	min-width: 117px;
	translate: -0.5px 1.5px;
}

/* 3437:8762 — .vp-h2 (Display/48 Regular preto), duas linhas numa caixa
   de 106: o Figma arredonda 52.8 → 53. Com entrelinha ímpar o Chrome
   arredonda a meia-entrelinha para baixo e o Figma para cima: top de 1px.
   O apoio 3437:8763 é o .vp-lead sem mudanças. */
.vp-quiz .vp-quiz__title {
	position: relative;
	top: 1px;
	line-height: 53px;
}

/* --------------------------------------------------------------------------
   Quiz — uma etapa visível por vez (o JS troca o [hidden])
   -------------------------------------------------------------------------- */

.vp-quiz .vp-quiz__app {
	width: 100%;
	max-width: 960px;
	/* O resultado cresce para baixo; a âncora de rolagem do navegador não
	   deve puxar a página quando a etapa muda. */
	overflow-anchor: none;
}

.vp-quiz .vp-quiz__etapa {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 39px;
	border: 1px solid var(--vp-offwhite);
	border-radius: 16px;
	background: var(--vp-white);
}

.vp-quiz .vp-quiz__etapa[hidden] {
	display: none;
}

/* Perguntas 2–4 e resultado — "Quiz Step 3" 3360:2274: borda #D6D1CA, raio
   24 e sombra 0 16 32 #503629 a 4%. */
.vp-quiz .vp-quiz__etapa--flow {
	border-color: var(--vp-stone);
	border-radius: 24px;
	box-shadow: 0 16px 32px rgba(80, 54, 41, 0.04);
}

/* Entrada da etapa: 250ms (DS: 200–300 para abrir/fechar). O base.css
   zera a duração com movimento reduzido e no ?vp-static=1. */
.vp-quiz .vp-quiz__etapa.is-entrando {
	animation: vp-quiz-entrar 250ms var(--vp-ease) both;
}

@keyframes vp-quiz-entrar {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Título da etapa recebe o foco (tabindex=-1) só para o leitor de tela. */
.vp-quiz .vp-quiz__pergunta:focus,
.vp-quiz .vp-quiz__res-titulo:focus {
	outline: none;
}

/* --- Progresso — "form / progress-inner" 3437:9257 (880x21) ------------- */

.vp-quiz .vp-quiz__progresso {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 21px;
}

/* 3437:9258 — 14/21 Regular preto. */
.vp-quiz .vp-quiz__passo {
	color: var(--vp-ink);
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	white-space: nowrap;
}

/* 3437:9259 — barra 356x4 + porcentagem, gap 16. */
.vp-quiz .vp-quiz__medidor {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* 3437:9260 — trilho #FAF7F2 e preenchimento #845D32, os dois com raio 8.
   O Figma a põe em y 8.5 da linha; o Chrome arredonda o layout para 9 —
   o translate devolve o meio pixel. */
.vp-quiz .vp-quiz__barra {
	position: relative;
	display: block;
	width: 356px;
	height: 4px;
	border-radius: 8px;
	background: var(--vp-cream);
	overflow: hidden;
	translate: 0 -0.5px;
}

.vp-quiz .vp-quiz__barra-fill {
	display: block;
	height: 100%;
	border-radius: 8px;
	background: var(--vp-bronze);
}

/* Ao trocar de etapa a barra sai do valor anterior (--vp-quiz-de). */
.vp-quiz .vp-quiz__etapa.is-entrando .vp-quiz__barra-fill {
	animation: vp-quiz-barra 400ms var(--vp-ease) both;
}

@keyframes vp-quiz-barra {
	from { width: var(--vp-quiz-de, 0%); }
}

/* 3437:9263 — 12/16.8 600 #503629 (caixa de 17 no Figma: é ela que
   centra a barra em y 8.5 da linha); o traço assenta 1px abaixo. Largura
   HUG arredondada para cima como no Figma ("25%" 23, "100%" 30): sem isso
   a barra encosta até 1px mais à direita. */
.vp-quiz .vp-quiz__pct {
	position: relative;
	top: 1px;
	min-width: 23px;
	color: var(--vp-brown);
	font-size: 12px;
	line-height: 17px;
	font-weight: 600;
	white-space: nowrap;
}

/* Progresso das P2–4 — "Progress Row" 3360:2275 (17 de altura): "Pergunta 3
   de 4" 16/22.4 600 #845D32 (aparado, caixa de 11), trilho 180x6 #D6D1CA
   raio 999 recortando o preenchimento #BC955C (ponta reta), gap 8 e
   porcentagem #636569. */
.vp-quiz .vp-quiz__etapa--flow .vp-quiz__progresso {
	height: auto;
}

.vp-quiz .vp-quiz__etapa--flow .vp-quiz__passo {
	margin: -4.4px 0 -7px;
	color: var(--vp-bronze);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 600;
}

.vp-quiz .vp-quiz__etapa--flow .vp-quiz__medidor {
	gap: 8px;
}

.vp-quiz .vp-quiz__etapa--flow .vp-quiz__barra {
	width: 180px;
	height: 6px;
	border-radius: 999px;
	background: var(--vp-stone);
}

.vp-quiz .vp-quiz__etapa--flow .vp-quiz__barra-fill {
	border-radius: 0;
	background: var(--vp-gold);
}

.vp-quiz .vp-quiz__etapa--flow .vp-quiz__pct {
	color: var(--vp-text);
}

.vp-quiz .vp-quiz__pct--cheio {
	min-width: 30px;
}

/* --- Pergunta — 3437:9264: 20/26 600 preto ------------------------------- */

.vp-quiz .vp-quiz__pergunta {
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

/* "Question Text" 3360:2281 — 20/28 600 #503629. */
.vp-quiz .vp-quiz__etapa--flow .vp-quiz__pergunta {
	color: var(--vp-brown);
	line-height: 28px;
}

/* --- Opções — "Options Grid" 3437:9300 (faixa de 223 fixos, gap 16) -----
   Os cartões têm 187: os 36 que sobram viram padding embaixo, e os
   cartões esticam juntos se um texto quebrar a mais. */

.vp-quiz .vp-quiz__opcoes {
	display: flex;
	align-items: stretch;
	gap: 16px;
	padding-bottom: 36px;
}

.vp-quiz .vp-quiz__opcao {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	border-radius: 16px;
	background: var(--vp-cream-2);
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--vp-fast) var(--vp-ease),
		box-shadow var(--vp-fast) var(--vp-ease);
}

/* O rádio fica por baixo do cartão: o <label> recebe o clique e o teclado
   continua no rádio nativo (Tab entra no grupo, setas trocam). */
.vp-quiz .vp-quiz__input {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.vp-quiz .vp-quiz__opcao:has(.vp-quiz__input:focus-visible) {
	outline: 2px solid var(--vp-bronze);
	outline-offset: 2px;
}

.vp-quiz .vp-quiz__opcao-textos {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Cartão da P1 — 3446:9371: 208x187, padding 32 (+1 do traço), gap 24,
   conteúdo centrado. */
.vp-quiz .vp-quiz__opcao--check {
	gap: 24px;
	min-height: 187px;
	padding: 33px;
}

.vp-quiz .vp-quiz__opcao--check::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		var(--vp-quiz-canto-te) left top / 16px 16px no-repeat,
		var(--vp-quiz-canto-td) right top / 16px 16px no-repeat,
		var(--vp-quiz-canto-bd) right bottom / 16px 16px no-repeat,
		var(--vp-quiz-canto-be) left bottom / 16px 16px no-repeat,
		repeating-linear-gradient(90deg, var(--vp-quiz-traco) 0 4px, transparent 4px 12px, var(--vp-quiz-traco) 12px 16px) 16px 0 / calc(100% - 32px) 1px no-repeat,
		repeating-linear-gradient(90deg, var(--vp-quiz-traco) 0 4px, transparent 4px 12px, var(--vp-quiz-traco) 12px 16px) 16px 100% / calc(100% - 32px) 1px no-repeat,
		repeating-linear-gradient(180deg, var(--vp-quiz-traco) 0 4px, transparent 4px 11.5px, var(--vp-quiz-traco) 11.5px 15.5px) 0 16px / 1px calc(100% - 32px) no-repeat,
		repeating-linear-gradient(180deg, var(--vp-quiz-traco) 0 4px, transparent 4px 11.5px, var(--vp-quiz-traco) 11.5px 15.5px) 100% 16px / 1px calc(100% - 32px) no-repeat;
	transition: opacity var(--vp-fast) var(--vp-ease);
}

/* "checkbox" 3446:9377 — 20x20, borda #845D32, raio 4. O 1º cartão
   (3446:9372) tem raio 8 no desenho, mas a pedido do cliente todos ficam
   quadrados, iguais. Marcado: cheio #845D32 com ✓ branco. */
.vp-quiz .vp-quiz__check {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--vp-bronze);
	border-radius: 4px;
	color: var(--vp-white);
	transition: background-color var(--vp-fast) var(--vp-ease);
}

.vp-quiz .vp-quiz__check-svg {
	width: 20px;
	height: 20px;
	opacity: 0;
	transition: opacity var(--vp-fast) var(--vp-ease);
}

/* "Card Text Content" 3446:9373 — gap 8; nome 18/25.2 600 e descrição
   16/22.4 Regular, os dois pretos e centrados (142 de largura). O Figma
   arredonda a entrelinha para o pixel (25.2 → 25, 22.4 → 22): é o que dá as
   caixas de 25 e 44 da spec e a 2ª linha da descrição no lugar. */
.vp-quiz .vp-quiz__opcao--check .vp-quiz__opcao-textos {
	gap: 8px;
}

.vp-quiz .vp-quiz__opcao--check .vp-quiz__opcao-nome {
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

.vp-quiz .vp-quiz__opcao--check .vp-quiz__opcao-desc {
	color: var(--vp-ink);
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
}

/* Cartão das P2–4 — 3360:2283: 200 de altura, padding 20 contado da borda
   de fora (texto de 167.5 num cartão de 207.5), gap 16, borda #D6D1CA. */
.vp-quiz .vp-quiz__etapa--flow .vp-quiz__opcoes {
	padding-bottom: 0;
}

.vp-quiz .vp-quiz__opcao--icone {
	gap: 16px;
	min-height: 200px;
	padding: 19px;
	border: 1px solid var(--vp-stone);
}

/* "Icon Wrapper" 3360:2284 — 48x48 #F1E9DD raio 12, ícone 24 #845D32. */
.vp-quiz .vp-quiz__icone {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--vp-sand);
	color: var(--vp-bronze);
}

.vp-quiz .vp-quiz__icone-svg {
	width: 24px;
	height: 24px;
	transition: opacity var(--vp-fast) var(--vp-ease);
}

/* ✓ da opção escolhida: mesmo traço e cor do ×, no mesmo lugar (pedido do
   cliente — no Figma o quadro do ícone ficava vazio). */
.vp-quiz .vp-quiz__icone-svg--marcado {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
}

/* "Text Block" 3360:2287 — gap 6; título 16/22.4 600 #503629 (aparado, caixa
   de 11) e descrição 12/16.8 600 #636569. */
.vp-quiz .vp-quiz__opcao--icone .vp-quiz__opcao-textos {
	gap: 6px;
}

.vp-quiz .vp-quiz__opcao--icone .vp-quiz__opcao-nome {
	margin: -4.4px 0 -7px;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 600;
}

/* Entrelinha ímpar (17 - 12): o Chrome arredonda a meia-entrelinha para
   baixo e o Figma para cima — o traço desce 1px sem mexer na caixa. */
.vp-quiz .vp-quiz__opcao--icone .vp-quiz__opcao-desc {
	position: relative;
	top: 1px;
	color: var(--vp-text);
	font-size: 12px;
	line-height: 17px;
	font-weight: 600;
}

/* Estados. Hover: a borda dourada de 1px antecipa a seleção. Escolhida
   (3360:2290): fundo #F0E4D0 e borda #BC955C de 2px — a 2ª linha vem por
   sombra interna, sem mexer no layout. */
@media (hover: hover) {
	.vp-quiz .vp-quiz__opcao:hover {
		box-shadow: inset 0 0 0 1px var(--vp-gold);
	}

	.vp-quiz .vp-quiz__opcao--check:hover::before {
		opacity: 0;
	}

	.vp-quiz .vp-quiz__opcao--icone:hover {
		border-color: var(--vp-gold);
		box-shadow: none;
	}
}

.vp-quiz .vp-quiz__opcao:has(.vp-quiz__input:checked) {
	background: var(--vp-quiz-sel);
	box-shadow: inset 0 0 0 2px var(--vp-gold);
}

.vp-quiz .vp-quiz__opcao--check:has(.vp-quiz__input:checked)::before {
	opacity: 0;
}

/* No Figma a escolhida das P3/P4 (3360:2290, 3360:2343) tem 2px a mais de
   largura (o traço de 2px entra na conta do FILL: 207.5 / 209.5). A base de
   42 = padding + borda + 2. O × dá lugar ao ✓. */
.vp-quiz .vp-quiz__opcao--icone:has(.vp-quiz__input:checked) {
	flex-basis: 42px;
	border-color: var(--vp-gold);
	box-shadow: inset 0 0 0 1px var(--vp-gold);
}

.vp-quiz .vp-quiz__opcao--icone:has(.vp-quiz__input:checked) .vp-quiz__icone-svg {
	opacity: 0;
}

.vp-quiz .vp-quiz__opcao--icone:has(.vp-quiz__input:checked) .vp-quiz__icone-svg--marcado {
	opacity: 1;
}

.vp-quiz .vp-quiz__input:checked ~ .vp-quiz__check {
	background: var(--vp-bronze);
}

.vp-quiz .vp-quiz__input:checked ~ .vp-quiz__check .vp-quiz__check-svg {
	opacity: 1;
}

/* --- Linha de ação — "Action Row" 3437:9294 ------------------------------ */

.vp-quiz .vp-quiz__acoes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* 3437:9295 — 16/22.4 Regular #503629. Ao tentar avançar sem escolher,
   balança e escurece (is-alerta). */
.vp-quiz .vp-quiz__nota {
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 400;
	transition:
		color var(--vp-fast) var(--vp-ease),
		opacity var(--vp-fast) var(--vp-ease);
}

/* Com uma opção escolhida o aviso já foi atendido: fica em segundo plano
   (70% ainda dá contraste 4.5:1 sobre o branco). */
.vp-quiz .vp-quiz__etapa--p1:has(.vp-quiz__input:checked) .vp-quiz__nota {
	opacity: 0.7;
}

.vp-quiz .vp-quiz__etapa.is-alerta .vp-quiz__nota {
	color: var(--vp-bronze);
	font-weight: 600;
	animation: vp-quiz-alerta 360ms var(--vp-ease);
}

@keyframes vp-quiz-alerta {
	0%, 100% { transform: none; }
	20% { transform: translate3d(-6px, 0, 0); }
	40% { transform: translate3d(5px, 0, 0); }
	60% { transform: translate3d(-3px, 0, 0); }
	80% { transform: translate3d(2px, 0, 0); }
}

/* P2–4 (3360:2309): Voltar à esquerda, avançar à direita, 16 acima. O aviso
   só aparece quando se tenta avançar sem escolher. */
.vp-quiz .vp-quiz__etapa--flow .vp-quiz__acoes {
	padding-top: 16px;
}

.vp-quiz .vp-quiz__nota--flow {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

/* Botões — .vp-btn do DS (48px, 16/22.4 600, estados hover/pressed):
   primário "Descobrir meu protocolo" 3582:2135 (221x48) / "Começar o
   tratamento" 3582:2215 (204x48) e secundário "Voltar" 3582:2211 (92x48).
   O Figma arredonda para cima a largura do rótulo (172 → 173, 155 → 156,
   41.6 → 42): as larguras mínimas seguram a caixa do desenho, e o padding
   da direita 1px maior assenta o rótulo do primário no x do Figma (24 da
   borda) em vez de centrá-lo na sobra. */
.vp-quiz .vp-quiz__avancar,
.vp-quiz .vp-quiz__voltar {
	flex: none;
}

.vp-quiz .vp-quiz__avancar {
	min-width: 221px;
	padding-right: 24px;
}

.vp-quiz .vp-quiz__etapa--flow .vp-quiz__avancar {
	min-width: 204px;
}

/* O secundário do Figma tem o traço fora do padding: 1 + 24 + 42 + 24 + 1. */
.vp-quiz .vp-quiz__voltar {
	min-width: 92px;
	padding-inline: 24px;
}

/* Sem escolha o botão continua dourado como no Figma (aria-disabled, não
   [disabled], que no .vp-btn fica cinza e sem clique): o clique não avança
   e aponta o aviso. */
.vp-quiz .vp-quiz__avancar[aria-disabled="true"] {
	background: var(--vp-gold);
	border-color: var(--vp-gold);
	color: var(--vp-white);
	cursor: not-allowed;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Resultado — "Quiz Results Screen" 3360:2366 (960x744, gap 32)
   Entrelinhas arredondadas como o Figma faz (16.8 → 17, 19.6 → 20,
   25.2 → 25): é o que fecha a tela nos 744 e põe cada linha no lugar.
   -------------------------------------------------------------------------- */

/* "Header Row" 3360:2367 — badge à esquerda, status à direita. */
.vp-quiz .vp-quiz__res-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* "Badge / Section / Results" 3360:2368: gap 10 (os outros badges usam
   12); rótulo 10 + 119 + 10 e subtítulo 143 (larguras HUG arredondadas
   para cima, pílula de 313). Texto assentado como no badge do cabeçalho. */
.vp-quiz .vp-quiz__res-badge {
	gap: 10px;
}

.vp-quiz .vp-quiz__res-badge .vp-badge__label {
	justify-content: flex-start;
	min-width: 139px;
	padding-top: 2.5px;
}

.vp-quiz .vp-quiz__res-badge .vp-badge__text {
	min-width: 143px;
	translate: 0 1.5px;
}

/* 3360:2376 — 14/19.6 #9E9E9E (traço 1px abaixo, como nos outros 14px). */
.vp-quiz .vp-quiz__res-status {
	position: relative;
	top: 1px;
	color: var(--vp-muted);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	text-align: right;
}

/* "Title Block" 3360:2377 — gap 12. */
.vp-quiz .vp-quiz__res-titulos {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 3360:2378 — Display/48 Semibold #503629 (caixa de 53; meia-entrelinha
   ímpar, o traço desce 1px como nos títulos das outras seções). */
.vp-quiz .vp-quiz__res-titulo {
	position: relative;
	top: 1px;
	color: var(--vp-brown);
	font-size: 48px;
	line-height: 53px;
	font-weight: 600;
}

/* 3360:2379 — 16/22.4 600 #636569, aparado (caixa de 33 = 22 + 11). */
.vp-quiz .vp-quiz__res-sub {
	margin: -4.1875px 0 -6.8125px;
	color: var(--vp-text);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}

/* "Diagnosis Details" 3360:2380 — dois painéis FILL, gap 24, mesma altura. */
.vp-quiz .vp-quiz__res-paineis {
	display: flex;
	gap: 24px;
}

.vp-quiz .vp-quiz__res-painel {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 31px;
	border: 1px solid var(--vp-stone);
	border-radius: 20px;
}

/* "Summary Panel" 3360:2381 — #F8F4EC. */
.vp-quiz .vp-quiz__res-painel--perfil {
	background: var(--vp-cream-2);
}

/* "Recommendation Panel" 3360:2387 — #F1E9DD. */
.vp-quiz .vp-quiz__res-painel--rec {
	background: var(--vp-sand);
}

/* "Status Group" 3360:2382 — rótulo 12/16.8 600 #845D32 + etiqueta do
   perfil (pad 8/16, #F0E4D0, raio 8, 18/25.2 600 #503629), gap 12. */
.vp-quiz .vp-quiz__res-grupo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Entrelinha ímpar (17 - 12): o traço desce 1px, como nas descrições. */
.vp-quiz .vp-quiz__res-rotulo {
	position: relative;
	top: 1px;
	color: var(--vp-bronze);
	font-size: 12px;
	line-height: 17px;
	font-weight: 600;
}

.vp-quiz .vp-quiz__res-perfil {
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--vp-quiz-sel);
	color: var(--vp-brown);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

/* 3360:2386 — 16/22.4 600 #636569, aparado (caixa de 99 = 4 x 22 + 11). */
.vp-quiz .vp-quiz__res-texto {
	margin: -4.1875px 0 -6.8125px;
	color: var(--vp-text);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}

/* "Rec Header" 3360:2388 — gap 8: rótulo 16/22.4 600 #503629 (aparado) e
   produto 20/28 600 #BC955C. */
.vp-quiz .vp-quiz__res-rec-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vp-quiz .vp-quiz__res-rec-rotulo {
	margin: -4.1875px 0 -6.8125px;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}

.vp-quiz .vp-quiz__res-produto {
	color: var(--vp-gold);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

/* 3360:2391 — 14/19.6 Regular #503629; "Vitruvian Line" em Inter 700
   (override do Figma). O Inter vem embutido só com as letras de
   "Vitruvian Line" (subconjunto de 1.8KB do Google Fonts, licença OFL);
   outra letra cai no Myriad. As métricas maiores do Inter empurram a 1ª
   linha 2px para baixo — como no Figma. */
@font-face {
	font-family: "Vinci Quiz Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("data:font/woff2;base64,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") format("woff2");
	unicode-range: U+20, U+4C, U+56, U+61, U+65, U+69, U+6E, U+72, U+74-76;
}

.vp-quiz .vp-quiz__res-rec-texto {
	color: var(--vp-brown);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

.vp-quiz .vp-quiz__res-rec-texto strong {
	font-family: "Vinci Quiz Inter", var(--vp-font);
	font-weight: 700;
}

/* "Action Area" 3360:2392 — #FAF7F2, borda #D6D1CA, raio 16, padding 24,
   gap 24. */
.vp-quiz .vp-quiz__res-cta {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 23px;
	border: 1px solid var(--vp-stone);
	border-radius: 16px;
	background: var(--vp-cream);
}

.vp-quiz .vp-quiz__res-cta-textos {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* 3360:2394 — 18/25.2 600 #503629; 3360:2395 — 14/19.6 #636569. */
.vp-quiz .vp-quiz__res-cta-titulo {
	color: var(--vp-brown);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

.vp-quiz .vp-quiz__res-cta-texto {
	position: relative;
	top: 1px;
	color: var(--vp-text);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

/* "WhatsApp Button" 3360:2396 — #25D366, pad 14/24, gap 10, sombra
   0 8 16 #25D366 a 17%; ícone phone-call 20 branco, 16/22.4 600. Hover e
   pressed escurecem o verde (mesma lógica dos estados do DS). */
.vp-quiz .vp-quiz__whatsapp {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 14px 24px;
	border-radius: 9999px;
	background: #25d366;
	box-shadow: 0 8px 16px rgba(37, 211, 102, 0.17);
	color: var(--vp-white);
	font-size: 16px;
	line-height: 22px; /* rótulo de 22 no Figma: botão de 50 */
	font-weight: 600;
	white-space: nowrap;
	/* Centrado na linha de 71 ele fica em y 10.5; o Chrome pinta a caixa
	   no pixel inteiro de baixo — o translate devolve o meio pixel. */
	translate: 0 -0.5px;
	transition: background-color var(--vp-fast) var(--vp-ease);
}

.vp-quiz .vp-quiz__whatsapp:hover {
	background: #1fb957;
}

.vp-quiz .vp-quiz__whatsapp:active {
	background: #189a48;
}

.vp-quiz .vp-quiz__whatsapp-svg {
	flex: none;
	width: 20px;
	height: 20px;
}

/* "Trust Footer" 3360:2399 — divisor #D6D1CA + 12/16.8 600 #845D32, gap 12. */
.vp-quiz .vp-quiz__res-rodape {
	padding-top: 12px;
	border-top: 1px solid var(--vp-stone);
}

.vp-quiz .vp-quiz__res-confianca {
	position: relative;
	top: 0.5px;
	color: var(--vp-bronze);
	font-size: 12px;
	line-height: 17px;
	font-weight: 600;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Selos — "Comparison Trust Badges Container" 3437:9329
   Janela de 960x32 recortada; o trilho 3437:9331 (gap 24) começa na borda
   esquerda e sai cortado pela direita ("94% relat…").
   -------------------------------------------------------------------------- */

.vp-quiz .vp-quiz__selos {
	position: relative;
	width: 100%;
	max-width: 960px;
	height: 32px;
}

.vp-quiz .vp-quiz__marquee {
	height: 100%;
}

.vp-quiz .vp-quiz__trilho {
	gap: 24px;
	height: 100%;
}

.vp-quiz .vp-quiz__selo {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

/* "Badge Icon Container" 3437:9333: 32px, #F1E9DD, borda interna branca 15%
   (o blur de fundo do Figma não aparece sobre o creme). */
.vp-quiz .vp-quiz__selo-icone {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	background: var(--vp-sand);
	color: var(--vp-brown);
}

.vp-quiz .vp-quiz__selo-svg {
	width: 16px;
	height: 16px;
}

/* 3437:9336 e irmãos: 16/22.4 600 #503629, aparado (caixa de 11), meio
   pixel abaixo do que o Chrome assenta (translate: o layout só anda de 1 em
   1 no texto). */
.vp-quiz .vp-quiz__selo-texto {
	margin: -4.416px 0 -7.2px;
	translate: 0 0.5px;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 600;
	white-space: nowrap;
}

/* "Carousel Fade Right" 3437:9363 fica na ponta esquerda e é creme sólido
   (esconde o 1º ícone, como no desenho); aqui ele se estende em degradê
   pelos 12px do gap até o texto, para o letreiro sumir suave em movimento
   sem mudar o quadro parado. "Carousel Fade Left" 3437:9362 fica na direita
   (transparente → creme), 32x32. */
.vp-quiz .vp-quiz__fade {
	position: absolute;
	top: 0;
	height: 100%;
	pointer-events: none;
}

.vp-quiz .vp-quiz__fade--inicio {
	left: 0;
	width: 44px;
	background: linear-gradient(90deg, var(--vp-cream) 0 32px, rgba(250, 247, 242, 0) 44px);
}

.vp-quiz .vp-quiz__fade--fim {
	right: 0;
	width: 32px;
	background: linear-gradient(90deg, rgba(250, 247, 242, 0) 0%, var(--vp-cream) 100%);
}

/* ==========================================================================
   Abaixo de 1184 o cartão perde os 960 do desenho e quatro opções numa
   linha quebrariam cada nome em duas: passam a 2x2. Fora do quadro do
   Figma, o 1º checkbox perde o raio 8 do desenho e fica igual aos outros.
   ========================================================================== */

@media (max-width: 1183px) {
	.vp-quiz .vp-quiz__opcoes,
	.vp-quiz .vp-quiz__etapa--flow .vp-quiz__opcoes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-bottom: 0;
	}

	.vp-quiz .vp-quiz__opcao--check {
		min-height: 160px;
		padding: 25px;
		gap: 16px;
	}

	.vp-quiz .vp-quiz__opcao--icone {
		min-height: 168px;
	}
}

/* ==========================================================================
   Tablet (≤1023) — margem 48; painéis do resultado empilhados. Os ajustes
   de meio pixel do desenho (translate) saem; as pontas do letreiro viram
   degradês iguais (a ponta esquerda sólida do Figma escondia o 1º ícone).
   ========================================================================== */

@media (max-width: 1023px) {
	.vp-quiz {
		gap: 40px;
		padding-block: 96px;
	}

	.vp-quiz .vp-quiz__etapa {
		gap: 28px;
		padding: 31px;
	}

	.vp-quiz .vp-quiz__barra {
		width: min(356px, 36vw);
		translate: none;
	}

	.vp-quiz .vp-quiz__res-paineis,
	.vp-quiz .vp-quiz__res-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.vp-quiz .vp-quiz__res-titulo {
		font-size: 40px;
		line-height: 44px;
	}

	.vp-quiz .vp-quiz__whatsapp {
		align-self: flex-start;
		white-space: normal;
		translate: none;
	}

	.vp-quiz .vp-quiz__selo-texto {
		translate: none;
	}

	.vp-quiz .vp-quiz__fade--inicio {
		width: 32px;
		background: linear-gradient(90deg, var(--vp-cream) 0%, rgba(250, 247, 242, 0) 100%);
	}
}

/* ==========================================================================
   Mobile (≤767) — 390: margem 20, seção 64, título 40/44, apoio 18/25.2.
   Opções numa coluna, em linha (marcador à esquerda, textos à direita) para
   o quiz caber na tela; botões de 48 com a largura toda; alvos ≥ 72.
   ========================================================================== */

@media (max-width: 767px) {
	.vp-quiz {
		gap: 32px;
		padding-block: 64px;
	}

	.vp-quiz .vp-quiz__head .vp-badge__label,
	.vp-quiz .vp-quiz__res-badge .vp-badge__label {
		padding-top: 0;
	}

	.vp-quiz .vp-quiz__badge-nome,
	.vp-quiz .vp-quiz__head .vp-badge__text,
	.vp-quiz .vp-quiz__res-badge .vp-badge__text {
		translate: none;
	}

	/* .vp-h2 no mobile é 40/44; a entrelinha de 53 do desktop sai. */
	.vp-quiz .vp-quiz__title {
		top: 0;
		line-height: 44px;
	}

	.vp-quiz .vp-quiz__etapa {
		gap: 24px;
		padding: 23px 19px;
		border-radius: 16px;
	}

	.vp-quiz .vp-quiz__etapa--flow {
		border-radius: 20px;
	}

	/* Progresso: a barra encolhe (até 40) antes de a porcentagem sair do
	   cartão — "Pergunta 2 de 4" em 16px 600 ocupa ~112 a 360. */
	.vp-quiz .vp-quiz__medidor,
	.vp-quiz .vp-quiz__etapa--flow .vp-quiz__medidor {
		gap: 10px;
		min-width: 0;
	}

	.vp-quiz .vp-quiz__barra,
	.vp-quiz .vp-quiz__etapa--flow .vp-quiz__barra {
		flex: 0 1 120px;
		width: 120px;
		min-width: 40px;
	}

	.vp-quiz .vp-quiz__pergunta {
		font-size: 20px;
		line-height: 28px;
	}

	.vp-quiz .vp-quiz__opcoes,
	.vp-quiz .vp-quiz__etapa--flow .vp-quiz__opcoes {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.vp-quiz .vp-quiz__opcao,
	.vp-quiz .vp-quiz__opcao--check,
	.vp-quiz .vp-quiz__opcao--icone {
		flex-direction: row;
		justify-content: flex-start;
		gap: 16px;
		min-height: 72px;
		padding: 15px 17px;
		text-align: left;
	}

	.vp-quiz .vp-quiz__opcao--check {
		padding: 16px 18px;
	}

	.vp-quiz .vp-quiz__opcao-textos {
		align-items: flex-start;
	}

	.vp-quiz .vp-quiz__opcao--check .vp-quiz__opcao-textos {
		gap: 2px;
	}

	.vp-quiz .vp-quiz__opcao--check .vp-quiz__opcao-nome {
		font-size: 16px;
		line-height: 22.4px;
	}

	.vp-quiz .vp-quiz__opcao--check .vp-quiz__opcao-desc {
		color: var(--vp-text);
		font-size: 14px;
		line-height: 19.6px;
	}

	.vp-quiz .vp-quiz__icone {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.vp-quiz .vp-quiz__opcao--icone .vp-quiz__opcao-textos {
		gap: 8px;
	}

	.vp-quiz .vp-quiz__acoes,
	.vp-quiz .vp-quiz__etapa--flow .vp-quiz__acoes {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-top: 0;
	}

	.vp-quiz .vp-quiz__avancar {
		padding-right: 23px;
	}

	.vp-quiz .vp-quiz__nota {
		font-size: 14px;
		line-height: 19.6px;
		text-align: center;
		text-wrap: balance;
	}

	/* O aviso vazio das P2–4 não ocupa espaço até ser preciso. */
	.vp-quiz .vp-quiz__nota--flow:empty {
		display: none;
	}

	.vp-quiz .vp-quiz__etapa--flow .vp-quiz__nota--flow {
		order: -1;
	}

	.vp-quiz .vp-quiz__res-topo {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* O badge do resultado (313 no desenho) não cabe nos 280 de um cartão a
	   360: o texto encolhe com a tela (14 → 12) e, abaixo disso, o
	   subtítulo corta com reticências em vez de vazar. */
	.vp-quiz .vp-quiz__res-badge {
		max-width: 100%;
	}

	.vp-quiz .vp-quiz__res-badge .vp-badge__label,
	.vp-quiz .vp-quiz__res-badge .vp-badge__text {
		min-width: 0;
		font-size: clamp(12px, 5.3vw - 7px, 14px);
	}

	.vp-quiz .vp-quiz__res-badge .vp-badge__text {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.vp-quiz .vp-quiz__res-status {
		top: 0;
		text-align: left;
	}

	.vp-quiz .vp-quiz__res-titulo {
		top: 0;
		font-size: 32px;
		line-height: 35.2px;
	}

	.vp-quiz .vp-quiz__res-painel {
		padding: 23px 19px;
		border-radius: 16px;
	}

	/* Etiqueta do perfil em 16: "Queda Moderada — Progressiva" cabe numa
	   linha a 390 (e, se quebrar, o travessão fica no fim da 1ª linha). */
	.vp-quiz .vp-quiz__res-perfil {
		font-size: 16px;
		line-height: 22.4px;
	}

	.vp-quiz .vp-quiz__res-produto,
	.vp-quiz .vp-quiz__res-cta-titulo {
		text-wrap: balance;
	}

	.vp-quiz .vp-quiz__res-cta {
		padding: 19px;
	}

	/* "Falar com especialista via WhatsApp" não cabe numa linha nos 270 do
	   quadro a 390: quebra em duas, centrada, e o raio de 24 mantém a
	   pílula quando cabe numa linha só (48 de altura). */
	.vp-quiz .vp-quiz__whatsapp {
		align-self: stretch;
		width: 100%;
		min-height: 48px;
		padding: 13px 20px;
		border-radius: 24px;
		text-align: center;
		text-wrap: balance;
	}

	.vp-quiz .vp-quiz__res-confianca {
		top: 0;
		text-wrap: balance;
	}
}