/* ==========================================================================
   Como funciona — Figma 3386:7870 (1440x2073)
   Coluna centralizada: cabeçalho 806 · linha do tempo 1002x1272 · rodapé
   394, com gap 64 e padding 136 em cima e embaixo.

   Alturas de linha: o Figma arredonda o line-height para o pixel inteiro ao
   desenhar (52.8 → 53, 25.2 → 25, 22.4 → 22) — é isso que dá os 106/100/75
   das caixas na spec e a posição de cada linha na referência. No desktop
   usamos os valores arredondados; abaixo de 1024 voltam os do DS.

   Os seletores que mexem em .vp-h2, .vp-badge__* e .vp-btn levam o prefixo
   ".vp-how-it-works" (0,2,0) para vencer essas classes do base.css sem
   depender da ordem das folhas.
   ========================================================================== */

.vp-how-it-works {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding: 136px var(--vp-gutter);
	background: var(--vp-white);
}

/* --------------------------------------------------------------------------
   Cabeçalho — 3386:7871 (806 de largura; badge, gap 24, títulos gap 12)
   Título e apoio são o .vp-h2 (48/52.8) e o .vp-lead (20/28 #636569).
   -------------------------------------------------------------------------- */

.vp-how-it-works__head {
	width: 100%;
	max-width: 806px;
}

/* Com entrelinha ímpar (53 - 48 = 5) o Chrome arredonda a meia-entrelinha
   para baixo e o Figma para cima: o top de 1px põe o texto na linha dele
   sem mexer na altura da caixa (106). */
.vp-how-it-works .vp-how-it-works__title {
	position: relative;
	top: 1px;
	line-height: 53px;
}

/* Badge 3386:7873 (231x32): o rótulo é HUG de 83 + 10 + 10 no Figma e mede
   82.5 no Chrome — a largura mínima e o texto encostado no padding põem a
   pílula com 231 e "Como funciona?" em 723.5, como no desenho. O Figma
   desenha os dois textos 1.5px abaixo do centro da pílula (19.6 → 20 e a
   sobra arredondada para baixo). */
.vp-how-it-works .vp-badge__label {
	justify-content: flex-start;
	min-width: 103px;
	padding-top: 3px;
}

.vp-how-it-works .vp-badge__text {
	position: relative;
	top: 1.5px;
}

/* --------------------------------------------------------------------------
   Linha do tempo — "Timeline Content" 3400:8042
   Três colunas: fotos 426 | trilho 22 com 64 de cada lado | textos 426.
   Os blocos (235 de altura, gap 64) ficam centrados nos 1272 do trilho,
   daí os 70px em cima e embaixo.
   -------------------------------------------------------------------------- */

.vp-how-it-works__timeline {
	position: relative;
	width: 100%;
	max-width: 1002px;
	padding: 70px 0;
}

/* Trilho 3400:8053 — coluna de 22px, gap 8: linha, checkpoint, linha...
   As linhas crescem na proporção dos comprimentos do Figma (102/307/97):
   com os 1272 do desktop dá exatamente o desenho; se o bloco crescer
   (1024–1439), o trilho estica junto. */
.vp-how-it-works__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 11px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 22px;
}

/* Linha 1px, stroke em degradê #845D32 0% → 100% de cima para baixo. */
.vp-how-it-works__line {
	flex: var(--vp-hiw-line, 1) 1 0;
	min-height: 0;
	width: 1px;
	background: linear-gradient(to bottom, rgba(132, 93, 50, 0), var(--vp-bronze));
}

/* Checkpoint 3400:8055 — 22x22, raio 8, #845D32 com check branco 11x8. */
.vp-how-it-works__checkpoint,
.vp-how-it-works__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 8px;
	background: var(--vp-bronze);
	color: var(--vp-white);
}

/* O check (11x8) fica a 5.5px da borda no Figma. O Chrome encaixa a caixa
   do svg no pixel inteiro, então o svg tem 12 de largura (viewBox a partir
   de x=5) e o desenho cai no meio pixel certo. */
.vp-how-it-works__check {
	width: 12px;
	height: 8px;
}

/* O marcador por bloco só existe no tablet/mobile (trilho à esquerda). */
.vp-how-it-works__mark {
	display: none;
}

.vp-how-it-works__steps {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* Coluna do meio: 64 + 22 + 64 = 150 a 1440; encolhe um pouco perto de
   1024 para sobrar largura às fotos e aos textos. */
.vp-how-it-works__step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(96px, 10.4167vw, 150px) minmax(0, 1fr);
	align-items: start;
	min-height: 235px;
}

/* Moldura 3400:8025 — 426x235, clip, raio 16, fundo branco. A foto é maior
   que a moldura e entra deslocada (valores da spec, em % para o recorte
   ser o mesmo em qualquer largura). */
.vp-how-it-works__photo {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	aspect-ratio: 426 / 235;
	overflow: hidden;
	border-radius: 16px;
	background: var(--vp-white);
}

.vp-how-it-works__photo img {
	position: absolute;
	top: calc(100% * var(--vp-hiw-y) / 235);
	left: calc(100% * var(--vp-hiw-x) / 426);
	width: calc(100% * var(--vp-hiw-w) / 426);
	max-width: none;
	height: auto;
}

/* No Figma a borda do frame é desenhada por cima da foto. */
.vp-how-it-works__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--vp-offwhite);
	border-radius: inherit;
	pointer-events: none;
}

/* Bloco "Timeline Step" 3400:8076 — coluna gap 8; cabeçalho gap 24. */
.vp-how-it-works__body {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vp-how-it-works__body-head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* "Step Label Row" 3400:8078 — círculo 32 + "Mês N" 18 600 #503629. */
.vp-how-it-works__month {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--vp-brown);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

/* Centrado nos 32px da linha, o texto cai em meio pixel (3.5) e o Chrome
   arredonda para cima; o Figma, para baixo. */
.vp-how-it-works__month-text {
	position: relative;
	top: 1px;
}

/* Círculo #F1E9DD com borda interna branca 15% (quase invisível). */
.vp-how-it-works__calendar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vp-sand);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
	color: var(--vp-brown);
}

.vp-how-it-works__calendar svg {
	width: 16px;
	height: 16px;
}

.vp-how-it-works__step-title {
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

.vp-how-it-works__text {
	color: var(--vp-text);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Rodapé — 3386:7951 (394, coluna gap 40)
   -------------------------------------------------------------------------- */

.vp-how-it-works__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 394px;
}

/* O Figma reserva 55px para as três linhas (66px) e as desenha 4px acima
   do topo da caixa; o botão fica 40px abaixo dos 55. */
.vp-how-it-works__note {
	position: relative;
	top: -4px;
	width: 100%;
	height: 55px;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	text-align: center;
}

/* Botão do DS 3582:2107 (189x48, HUG 24 + 141 + 24): o rótulo mede 140 no
   Chrome, e a largura mínima devolve os 189 do Figma. */
.vp-how-it-works .vp-how-it-works__btn {
	min-width: 189px;
}

/* Fora dos 1440 as colunas mudam de largura e os textos quebram em outros
   pontos: "pretty" evita uma palavra sozinha na última linha ("fora.",
   "dia.", "mercado."). A 1440 fica a quebra do Figma. */
@media (max-width: 1439px) {
	.vp-how-it-works__lead,
	.vp-how-it-works__step-title,
	.vp-how-it-works__text {
		text-wrap: pretty;
	}
}

/* --------------------------------------------------------------------------
   Tablet — um bloco por mês (foto em cima, texto embaixo) e o trilho à
   esquerda, com um checkpoint no topo de cada bloco e a linha em degradê
   descendo até o próximo.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.vp-how-it-works {
		padding-block: 96px;
	}

	/* A primeira frase (676px a 48) não cabe nos 672 do tablet: sem o
	   balance, "queda." ficaria sozinha numa linha. */
	.vp-how-it-works .vp-how-it-works__title {
		top: 0;
		line-height: 52.8px;
		text-wrap: balance;
	}

	.vp-how-it-works__timeline {
		max-width: 600px;
		padding: 0;
	}

	.vp-how-it-works__track {
		display: none;
	}

	.vp-how-it-works__steps {
		gap: 0;
	}

	.vp-how-it-works__step {
		position: relative;
		grid-template-columns: 22px minmax(0, 1fr);
		column-gap: 32px;
		row-gap: 24px;
		min-height: 0;
		padding-bottom: 56px;
	}

	.vp-how-it-works__step:last-child {
		padding-bottom: 0;
	}

	/* Linha do checkpoint deste bloco até o do próximo (gap 8 como no
	   desktop); no último, desce até o fim do texto. */
	.vp-how-it-works__step::before {
		content: "";
		position: absolute;
		top: 30px;
		bottom: 8px;
		left: 10.5px;
		width: 1px;
		background: linear-gradient(to bottom, rgba(132, 93, 50, 0), var(--vp-bronze));
	}

	.vp-how-it-works__step:last-child::before {
		bottom: 0;
	}

	.vp-how-it-works__mark {
		display: flex;
		grid-column: 1;
		grid-row: 1;
	}

	.vp-how-it-works__photo {
		grid-column: 2;
		grid-row: 1;
	}

	.vp-how-it-works__body {
		grid-column: 2;
		grid-row: 2;
	}

	.vp-how-it-works__body-head {
		gap: 16px;
	}

	.vp-how-it-works__month,
	.vp-how-it-works__step-title,
	.vp-how-it-works__text {
		line-height: 25.2px;
	}

	/* Com 25.2 o texto já cai centrado no círculo. */
	.vp-how-it-works__month-text {
		top: 0;
	}

	.vp-how-it-works__note {
		top: 0;
		height: auto;
		line-height: 22.4px;
	}
}

/* --------------------------------------------------------------------------
   Mobile 390 — margem 20, seção 64, título 40/44 e apoio 18/25.2 (do
   .vp-h2/.vp-lead), botão na largura toda.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-how-it-works {
		gap: 48px;
		padding-block: 64px;
	}

	.vp-how-it-works .vp-how-it-works__title {
		line-height: 44px;
	}

	.vp-how-it-works__step {
		column-gap: 16px;
		row-gap: 20px;
		padding-bottom: 40px;
	}

	.vp-how-it-works__photo {
		border-radius: 12px;
	}

	.vp-how-it-works__body-head {
		gap: 12px;
	}

	.vp-how-it-works__text {
		font-size: 16px;
		line-height: 22.4px;
	}

	.vp-how-it-works__cta {
		gap: 24px;
		max-width: none;
	}
}