/* ==========================================================================
   Resultados (antes e depois) — Figma 3341:4827, 1440x1272
   Coluna centralizada, gap 64, padding 0/112/136/112: cabeçalho (806),
   controles do carrossel (56 de altura), cartões + nota (663), CTA (48).

   Todo seletor começa por ".vp-results" (convenção da LP): além de escopar,
   dá 0,2,0 às regras que ajustam componentes compartilhados (.vp-badge,
   .vp-btn), sem depender da ordem de carga das folhas.
   ========================================================================== */

.vp-results {
	background: var(--vp-white);
}

.vp-results .vp-results__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding-bottom: 136px;
}

/* --------------------------------------------------------------------------
   Cabeçalho — 3341:4828, 806 de largura (a quebra do apoio depende dela:
   "...completo. Resultados" / "podem variar.").
   -------------------------------------------------------------------------- */

.vp-results .vp-results__head {
	width: 100%;
	max-width: 806px;
}

/* Badge: rótulo e subtítulo com as larguras do Figma (122 + 122, pílula de
   277) — no Chrome os textos saem ~1px mais estreitos e a pílula encolhia.
   O texto de 14px assenta mais baixo no Figma (1.5px; o Chrome encaixa o
   texto no pixel inteiro, e 1.5 fica a 0.4 do desenho, 1 a 0.6): o rótulo,
   que tem fundo, desce pelo padding; o subtítulo, por deslocamento
   relativo — a pílula não se move. */
.vp-results .vp-badge__label {
	min-width: 122px;
	padding-top: 3px;
}

.vp-results .vp-badge__text {
	position: relative;
	top: 1.5px;
	min-width: 122px;
}

/* Título e apoio: Display/48 e Text/20 vêm de .vp-h2/.vp-lead. O Figma
   arredonda a caixa do título para 53 (52.8 de linha): é isso que põe o
   apoio em y 121 e os controles em 241. O traço assenta 1px mais baixo que
   no Chrome. */
.vp-results .vp-results__title {
	position: relative;
	top: 1px;
	min-height: 53px;
}

/* --------------------------------------------------------------------------
   Carrossel: controles (3341:4834) e cartões ficam a 64px um do outro, o
   mesmo gap da seção.
   -------------------------------------------------------------------------- */

.vp-results .vp-results__carousel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	width: 100%;
}

/* "Media / Before After Slider": seta 56, miniaturas, seta 56 — gap 64. */
.vp-results .vp-results__controls {
	display: flex;
	align-items: center;
	gap: 64px;
}

/* Setas: a clara é o "Slider Next Button" (#FAF7F2, traço #F1E9DD); a
   ativa é a preenchida #BC955C (o "Slider Previous Button" da instância).
   Estados como os botões do DS (100ms ease-out). */
.vp-results .vp-results__arrow {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--vp-sand);
	border-radius: 50%;
	background: var(--vp-cream);
	color: var(--vp-gold);
	transition:
		background-color var(--vp-fast) var(--vp-ease),
		border-color var(--vp-fast) var(--vp-ease),
		color var(--vp-fast) var(--vp-ease);
}

.vp-results .vp-results__arrow:hover {
	background: var(--vp-cream-2);
	color: var(--vp-bronze);
}

.vp-results .vp-results__arrow:active {
	background: var(--vp-stone);
	border-color: var(--vp-stone);
	color: var(--vp-brown);
}

.vp-results .vp-results__arrow.is-active {
	background: var(--vp-gold);
	border-color: var(--vp-gold);
	color: var(--vp-white);
}

.vp-results .vp-results__arrow.is-active:hover {
	background: var(--vp-bronze);
	border-color: var(--vp-bronze);
}

.vp-results .vp-results__arrow.is-active:active {
	background: var(--vp-brown);
	border-color: var(--vp-brown);
}

.vp-results .vp-results__arrow-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Miniaturas: 50 e 51.38 com traço #D6D1CA de 1px por fora (vira sombra
   sólida, que não ocupa espaço); a segunda sobe 8px sobre a primeira
   (gap -8). */
.vp-results .vp-results__thumbs {
	display: flex;
	flex: none;
	align-items: flex-start;
}

.vp-results .vp-results__thumb {
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--vp-stone);
}

/* A "After Image" tem caixa (e foto) de 51.38, mas no quadro do Figma o aro
   de 1px fica sobre o círculo de 50 centrado nela (aro em x 715–767 e
   y 243–295, medido no PNG), cobrindo a borda da foto: contorno com recuo
   de 0.69 em vez da sombra, que ficaria 0.69px para fora. */
.vp-results .vp-results__thumb--after {
	position: relative;
	width: 51.38px;
	height: 51.38px;
	margin-left: -8px;
	box-shadow: none;
	outline: 1px solid var(--vp-stone);
	outline-offset: -0.69px;
}

/* --------------------------------------------------------------------------
   Cartões — "Results Cards Container" 3341:4835 (coluna gap 40: trilho de
   cartões + nota).
   -------------------------------------------------------------------------- */

.vp-results .vp-results__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

/* "Results Cards Row": linha gap 16, alinhada no topo (o cartão 01 tem
   598 e os outros 596 — não esticar no quadro do Figma). Depois que as
   setas giram a ordem (.is-girado, results.js), o 01 pode cair no meio ou
   no fim: aí os cartões esticam para a base não ficar em degrau (a linha
   continua com 598, nada abaixo se move). */
.vp-results .vp-results__track {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.vp-results .vp-results__track.is-girado {
	align-items: stretch;
}

/* Cartão: 394.67 = (1216 - 2 x 16) / 3, padding 12/12/32/12 medido da borda
   externa (o traço de 1px #F8F8F5 não entra no layout, então sai 1px do
   padding), raio 16. A base é fixa em terço: com "flex: 1 1 0" o cartão 01,
   de padding maior, sairia 2px mais largo. */
.vp-results .vp-results__card {
	display: flex;
	flex: 0 0 calc((100% - 32px) / 3);
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: 0;
	padding: 11px 11px 31px;
	border: 1px solid var(--vp-offwhite);
	border-radius: 16px;
	background: var(--vp-white);
}

/* Instância 01 (3341:4838): o traço entra no layout, conteúdo 1px para
   dentro — mesmo modelo de caixa do CSS. */
.vp-results .vp-results__card--inset {
	padding: 12px 12px 32px;
}

/* Foto 370x370, raio 12. Fica centralizada no cartão (no 01 ela passa 0.67px
   de cada lado da área útil, como no Figma). */
.vp-results .vp-results__photo {
	position: relative;
	flex: none;
	width: 370px;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--vp-offwhite);
}

.vp-results .vp-results__card--inset .vp-results__photo {
	max-width: calc(100% + 2px);
}

/* A foto "original" do manifesto já vem no recorte do Figma: ocupa a
   moldura inteira. */
.vp-results .vp-results__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Rótulos "Badge / Before Label" e "Badge / After Label" (3209:192/194):
   padding 4/8, raio 8, 12/16.8 600, 25 de altura. Ficam a 12px da base; o
   "DEPOIS" começa 13px depois do meio da foto (x 198 de 370). O texto
   assenta 1px mais baixo no Figma: padding 5/3 em vez de 4/4. Largura
   mínima 51: o "ANTES" do Chrome é 0.5px mais estreito que o do Figma. */
.vp-results .vp-results__label {
	position: absolute;
	bottom: 12px;
	left: 12px;
	min-width: 51px;
	height: 25px;
	padding: 5px 8px 3px;
	border-radius: 8px;
	background: var(--vp-text);
	color: var(--vp-white);
	font-size: 12px;
	line-height: 16.8px;
	font-weight: 600;
	white-space: nowrap;
}

.vp-results .vp-results__label--after {
	left: calc(50% + 13px);
	background: none;
	color: var(--vp-text);
}

/* "Result Card Content": coluna gap 24, padding lateral 20. */
.vp-results .vp-results__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	padding: 0 20px;
}

/* Depoimento 20/28 #636569; o trecho de destaque é 600 #503629. */
.vp-results .vp-results__quote {
	color: var(--vp-text);
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
}

.vp-results .vp-results__quote strong {
	color: var(--vp-brown);
	font-weight: 600;
}

/* "Reviewer Info": linha gap 12, 50 de altura, centralizada. */
.vp-results .vp-results__reviewer {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
}

.vp-results .vp-results__avatar {
	position: relative;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
}

/* Cartão 01: máscara elíptica sobre a foto 50x75, que começa 8.33px acima
   do círculo (y 867.67 x 876 na spec). Máscara e foto têm traço #D6D1CA de
   1px por fora, e o Figma recorta pelo traço também: o círculo visível tem
   52 — aro #D6D1CA dos lados, onde a foto de 50 não chega, e foto em cima e
   embaixo. A margem -1 mantém os 50 no layout. */
.vp-results .vp-results__avatar--mask {
	width: 52px;
	height: 52px;
	margin: -1px;
	background: var(--vp-stone);
}

.vp-results .vp-results__avatar--mask .vp-results__avatar-img {
	position: absolute;
	top: -7.33px;
	left: 1px;
	width: 50px;
	height: 75px;
}

/* Cartões 02/03: aro de 1px com degradê #9D9D9D→#000 a 6% e foto 48x48. */
.vp-results .vp-results__avatar--ring {
	padding: 1px;
	background: linear-gradient(180deg, rgba(157, 157, 157, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%);
}

.vp-results .vp-results__avatar--ring .vp-results__avatar-img {
	width: 48px;
	height: 48px;
}

/* "Reviewer Details": nome 18/25.2 600, gap 8, estrelas + produto. */
.vp-results .vp-results__who {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* O Figma arredonda a caixa do nome para 25 (detalhes = 25 + 8 + 14 = 47,
   nome em y 877.5 e estrelas em 910.5): a margem tira os 0.2px. O traço
   assenta 0.5px mais baixo no Figma. */
.vp-results .vp-results__name {
	position: relative;
	top: 0.5px;
	margin-bottom: -0.2px;
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25.2px;
	font-weight: 600;
}

/* A linha de avaliação tem 14px no Figma (a altura das estrelas); o texto
   18/25.2 fica centrado nela e transborda 5.6px para cima e para baixo —
   daí a margem negativa, que mantém a linha com 14 mesmo quando quebra.
   No Figma o texto assenta 2px abaixo do centro (top relativo). As
   estrelas (y 910.5) saem 0.5px abaixo no Chrome, que as encaixa no pixel
   inteiro — 910 ou 911 dão o mesmo erro. */
.vp-results .vp-results__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.vp-results .vp-results__stars {
	flex: none;
	width: 86px;
	height: 14px;
}

.vp-results .vp-results__product {
	position: relative;
	top: 2px;
	margin-block: -5.6px;
	color: var(--vp-text);
	font-size: 18px;
	line-height: 25.2px;
	font-weight: 400;
	white-space: nowrap;
}

/* "Results Disclaimer" 3341:4893: 18/25.2 #636569 centralizado. O Figma
   arredonda a caixa para 25 (CTA em y 1088): com 25.2 a seção ficava com
   1272.2 e todas as seguintes 0.2px abaixo. Uma linha só no desktop, então
   a entrelinha de 25 é a própria caixa; abaixo de 1024 volta a 25.2. */
.vp-results .vp-results__note {
	color: var(--vp-text);
	font-size: 18px;
	line-height: 25px;
	text-align: center;
}

/* CTA "Quero experimentar" (3582:2111): primário do DS, 189x48, rótulo a
   24px da borda (x 649.5 = padding 23 + borda 1 do .vp-btn). O texto do
   Chrome é um pouco mais estreito que o do Figma: largura mínima 189 e
   rótulo encostado à esquerda. */
.vp-results .vp-results__cta {
	justify-content: flex-start;
	min-width: 189px;
}

/* --------------------------------------------------------------------------
   Abaixo de 1440 os depoimentos quebram em números de linhas diferentes:
   os cartões passam a ter a mesma altura e a linha do autor desce para a
   base, alinhada entre eles. (A 1440 fica o alinhamento no topo do Figma.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Resultados do painel (inc/produto-resultados.php). Com os três do Figma
   nada daqui muda o quadro do desenho.
   -------------------------------------------------------------------------- */

/* Mais de três cartões: no desktop cabem três; os outros esperam à direita,
   fora do quadro, e as setas giram a ordem (results.js). A altura do trilho
   é a do cartão mais alto, então o recorte não corta nada na vertical. */
.vp-results .vp-results__track {
	overflow: hidden;
}

/* Menos de três: centralizados, com a mesma largura de terço. */
.vp-results .vp-results__track--poucos {
	justify-content: center;
}

/* Duas fotos separadas (antes | depois): uma em cada metade da moldura. */
.vp-results .vp-results__photo-half {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.vp-results .vp-results__photo-half--antes {
	left: 0;
}

.vp-results .vp-results__photo-half--depois {
	right: 0;
}

/* Avatar enviado pelo painel: qualquer proporção, recortado no círculo
   dentro do aro de 1px. */
.vp-results .vp-results__avatar-img--upload {
	border-radius: 50%;
	object-fit: cover;
}

/* Menos de cinco estrelas: fileira apagada por baixo, a dourada cortada. */
.vp-results .vp-results__stars-parcial {
	position: relative;
	display: block;
	flex: none;
	width: 86px;
	height: 14px;
}

.vp-results .vp-results__stars--vazias {
	opacity: 0.25;
	filter: grayscale(1);
}

.vp-results .vp-results__stars--cheias {
	position: absolute;
	inset: 0;
	clip-path: inset(0 var(--vp-estrelas-corte, 0px) 0 0);
}

@media (max-width: 1439.98px) {
	.vp-results .vp-results__track {
		align-items: stretch;
	}

	.vp-results .vp-results__content {
		flex: 1 1 auto;
	}

	.vp-results .vp-results__reviewer {
		margin-top: auto;
	}
}

/* --------------------------------------------------------------------------
   Desktop estreito (1024–1279): três colunas continuam, com menos respiro
   dentro do cartão para o depoimento não virar uma coluna estreita.
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.vp-results .vp-results__content {
		padding: 0 8px;
	}

	.vp-results .vp-results__quote {
		font-size: 18px;
		line-height: 25.2px;
	}
}

/* --------------------------------------------------------------------------
   Tablet (DS: margem 48, gutter 24): o trilho vira carrossel horizontal com
   dois cartões à vista; as setas rolam o trilho.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.vp-results .vp-results__inner {
		gap: 48px;
		padding-bottom: 96px;
	}

	/* Sem a largura de 806 do desktop, equilibra as linhas (evita "cedo"
	   sozinho na segunda linha a 768). */
	.vp-results .vp-results__title,
	.vp-results .vp-results__lead,
	.vp-results .vp-results__note {
		text-wrap: balance;
	}

	.vp-results .vp-results__carousel {
		gap: 40px;
	}

	.vp-results .vp-results__body {
		gap: 32px;
	}

	.vp-results .vp-results__note {
		line-height: 25.2px;
	}

	/* O trilho vai de borda a borda da tela; o primeiro cartão continua
	   alinhado à margem do DS. */
	.vp-results .vp-results__track {
		gap: 24px;
		margin-inline: calc(-1 * var(--vp-gutter));
		padding-inline: var(--vp-gutter);
		scroll-padding-inline: var(--vp-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vp-results .vp-results__track::-webkit-scrollbar {
		display: none;
	}

	.vp-results .vp-results__card,
	.vp-results .vp-results__card--inset {
		flex: 0 0 calc((100% - 24px) / 2);
		padding: 11px 11px 27px;
		scroll-snap-align: start;
	}

	.vp-results .vp-results__card--inset .vp-results__photo {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Mobile 390 (DS: margem 20, gutter 16, seção 64): um cartão por vez
   (~85% da largura, o próximo aparece na borda), títulos 40/44 e CTA de
   largura total.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-results .vp-results__inner {
		gap: 40px;
		padding-bottom: 64px;
	}

	/* Título 40/44 e apoio 18/25.2 já vêm de .vp-h2/.vp-lead (base.css). */
	.vp-results .vp-results__title {
		min-height: 0;
	}

	.vp-results .vp-results__carousel {
		gap: 32px;
	}

	.vp-results .vp-results__body {
		gap: 24px;
	}

	.vp-results .vp-results__head {
		max-width: none;
	}

	.vp-results .vp-results__controls {
		gap: 40px;
	}

	.vp-results .vp-results__arrow {
		width: 48px;
		height: 48px;
	}

	.vp-results .vp-results__track {
		gap: 16px;
	}

	.vp-results .vp-results__card,
	.vp-results .vp-results__card--inset {
		flex-basis: 85%;
		gap: 20px;
		padding: 9px 9px 23px;
	}

	.vp-results .vp-results__content {
		gap: 20px;
		padding: 0 6px;
	}

	.vp-results .vp-results__name,
	.vp-results .vp-results__product {
		font-size: 16px;
		line-height: 22.4px;
	}

	.vp-results .vp-results__product {
		margin-block: -4.2px;
	}

	.vp-results .vp-results__note {
		font-size: 14px;
		line-height: 19.6px;
	}

	/* CTA de largura total (.vp-btn--block-mobile): rótulo ao centro. */
	.vp-results .vp-results__cta {
		justify-content: center;
	}
}