/* ==========================================================================
   Prova social — Figma 3341:4710 (1440x212)
   Título + letreiro de "chips" de celebridades cortado nas pontas com fade.
   ========================================================================== */

.vp-social-proof {
	padding-top: 88px;
	background: var(--vp-white);
	overflow: hidden;
}

/* 3341:4711 — coluna centralizada, gap 40, padding lateral 40. */
.vp-social-proof__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 0 40px;
}

/* 3341:4712/4713 — Text/20 Semibold, caixa de 1264 com o texto no centro. */
.vp-social-proof__title {
	width: 1264px;
	max-width: 100%;
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	text-align: center;
}

/* 3341:4714 — janela de 1010x56 (recorte) que segura os degradês. */
.vp-social-proof__carousel {
	position: relative;
	width: 1010px;
	max-width: 100%;
	height: 56px;
}

/* 3341:4715/4716 — a série de 5 chips (1268 = 5 x 244 + 4 x 12) fica
   centralizada na janela: 50% - 634 = -129px @1440, o x=86 do Figma. A
   margem é fixa e o letreiro anda por transform, então o laço não salta.
   will-change: rodando, a animação já põe o trilho numa camada própria (e o
   Chrome/Windows passa o texto para antialiasing em tons de cinza, como o do
   Figma); com a camada desde o início o quadro parado (?vp-static, pausa no
   hover, movimento reduzido) é igual ao em movimento, sem o texto "trocar"
   de nitidez quando o letreiro para ou volta. Os chips caem em pixel
   inteiro, então a camada não arredonda nada de lugar. */
.vp-social-proof__track {
	gap: 12px;
	margin-left: calc(50% - 634px);
	will-change: transform;
}

/* 3341:4717 — chip 244x56, raio 12. No Figma a borda é interna e não conta
   no padding de 8; aqui 1px de borda + 7px de padding dão o mesmo miolo
   228x40 (3341:4718, linha com gap 8 e itens centralizados). */
.vp-social-proof__chip {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	width: 244px;
	height: 56px;
	padding: 7px;
	border: 1px solid var(--vp-offwhite);
	border-radius: 12px;
	overflow: hidden;
}

/* 3341:4719/4731/4743/4766 — avatar 40x40 raio 8. O arquivo já é o render
   do Figma com os cantos arredondados (e, no Thor, a moldura #F8F8F5 com a
   foto 5px abaixo), então aqui não há recorte. */
.vp-social-proof__photo {
	flex: none;
	width: 40px;
	height: 40px;
}

/* 3341:4721 — coluna @usuário / nome com gap 12. Os textos do Figma usam
   "leading trim: cap height": a caixa vai da altura das maiúsculas até a
   linha de base (9px para 14px), e é essa altura que põe o nome 22px abaixo
   do @usuário (21px no chip sem selo). Aqui: caixa de 9px com a linha de
   19.6 do DS transbordando, e top:-4 para a linha de base cair no pé da
   caixa como no Figma (o Chrome a põe 13.3px abaixo do topo da linha, não
   9.3 — conferido linha a linha na referência @2x). Equivale a
   "text-box: trim-both cap alphabetic", que ainda não roda em todo navegador. */
.vp-social-proof__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
}

/* 3341:4722 — @usuário + selo, gap 4, centralizados (altura 11 = o selo). */
.vp-social-proof__handle-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.vp-social-proof__handle,
.vp-social-proof__name {
	position: relative;
	top: -4px;
	height: 9px;
	font-size: 14px;
	line-height: 19.6px;
	white-space: nowrap;
}

/* A largura inteira (arredondada para cima, como o HUG do Figma) vem do
   social-proof.js; flex:none para ela não encolher. */
.vp-social-proof__handle {
	flex: none;
	color: var(--vp-ink);
	font-weight: 700;
}

/* 3341:4724 — selo 12x11 #4285F4. */
.vp-social-proof__verified {
	flex: none;
	width: 12px;
	height: 11px;
}

.vp-social-proof__name {
	color: var(--vp-text);
	font-weight: 400;
}

/* 3341:4826 / 3341:4825 — degradês de 56px do branco ao transparente, por
   cima dos chips nas duas pontas da janela (o da direita é o mesmo
   retângulo girado 180° no Figma; os nomes "Left/Right" lá estão trocados). */
.vp-social-proof__fade {
	position: absolute;
	top: 0;
	width: 56px;
	height: 100%;
	pointer-events: none;
}

.vp-social-proof__fade--start {
	left: 0;
	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.vp-social-proof__fade--end {
	right: 0;
	background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

/* Movimento reduzido: o letreiro fica parado no quadro do Figma, mas a
   faixa passa a rolar com o dedo/teclado para ninguém perder um chip (o
   social-proof.js a centraliza como no desenho). O respiro de 56px (a
   largura do degradê) nas duas pontas do trilho deixa o primeiro e o último
   chip inteiros fora do degradê quando a faixa chega ao fim; como é
   simétrico, o centro — o quadro do Figma — não muda. */
@media (prefers-reduced-motion: reduce) {
	:root:not(.vp-static) .vp-social-proof__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}

	:root:not(.vp-static) .vp-social-proof__viewport::-webkit-scrollbar {
		display: none;
	}

	:root:not(.vp-static) .vp-social-proof__track {
		margin-left: 0;
		padding-inline: 56px;
	}
}

/* Foco da faixa rolável (só existe no movimento reduzido): o contorno
   padrão, por fora, seria cortado pelo overflow da seção e ficaria sob os
   degradês; aqui ele é desenhado por cima de tudo, dentro da janela. */
.vp-social-proof__carousel:has(.vp-social-proof__viewport:focus-visible)::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--vp-bronze);
	border-radius: 12px;
	pointer-events: none;
}

.vp-social-proof__carousel:has(.vp-social-proof__viewport:focus-visible) .vp-social-proof__viewport {
	outline: none;
}

/* Tablet — a faixa vai de borda a borda (o título segue a margem do DS). */
@media (max-width: 1023px) {
	.vp-social-proof {
		padding-top: 72px;
	}

	.vp-social-proof__content {
		gap: 32px;
		padding: 0;
	}

	.vp-social-proof__title {
		width: 100%;
		padding-inline: var(--vp-gutter);
	}

	.vp-social-proof__carousel {
		width: 100%;
	}
}

/* Mobile 390 — DS: espaçamento de seção 64; o título quebra em até duas
   linhas centralizadas e o letreiro continua rolando. */
@media (max-width: 767px) {
	.vp-social-proof {
		padding-top: 64px;
	}

	.vp-social-proof__content {
		gap: 24px;
	}

	/* "balance" divide em duas linhas parecidas ("...quem cuida / do cabelo
	   de verdade.") em vez de deixar "verdade." sozinha. */
	.vp-social-proof__title {
		max-width: 390px;
		text-wrap: balance;
	}
}