/* ==========================================================================
   Por que é diferente? — Figma 3341:5416 (1440x736)
   ========================================================================== */

/* Degradê vertical de #FAF7F2 a 0% (topo) até #FAF7F2 (base), sobre o branco
   da página; vai de borda a borda acima de 1440. Padding 0/-/136/-. */
.vp-why-different {
	padding-bottom: 136px;
	background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0%, var(--vp-cream) 100%);
}

/* 3341:5417 — linha com gap 48; as colunas começam no topo. */
.vp-why-different__row {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

/* 3341:5418 — coluna de 584, gap 40. No intervalo 1024–1439 a coluna de
   texto encolhe menos que a foto (shrink 1 x 3) para o título seguir em
   duas linhas o máximo possível. */
.vp-why-different__content {
	display: flex;
	flex: 1 1 584px;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
	container-type: inline-size;
}

/* 3341:5420 — badge + título, gap 24. */
.vp-why-different__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

/* Badge 3341:5421: medido contra o Figma, o texto do .vp-badge compartilhado
   fica 1–1.5px acima do desenho (lá a caixa de texto é centrada na pílula,
   não a entrelinha de 19.6). Desce o texto sem mexer nas pílulas. As larguras
   mínimas repõem o que o Chrome mede a menos nos rótulos (125 e 117 no
   Figma, 124.3 e 116.4 aqui), para a pílula ter os 275 do desenho.
   O Chrome assenta texto posicionado pelo layout no pixel inteiro; o meio
   pixel que falta vai por transform, que não é arredondado (medido @2x: sem
   ele a linha de base fica 0.5px abaixo da do Figma). O rótulo tem um span
   interno para o meio pixel mover só o texto, não a pílula branca. */
.vp-why-different .vp-badge__label {
	min-width: 125px;
	justify-content: flex-start;
	padding-top: 3px;
}

.vp-why-different__badge-label {
	transform: translateY(-0.5px);
}

.vp-why-different .vp-badge__text {
	position: relative;
	top: 1.5px;
	min-width: 117px;
	transform: translateY(-0.5px);
}

/* 3341:5423 — Display/48. O Figma arredonda a entrelinha de 52.8 para 53 por
   linha (a caixa de duas linhas tem 106), e é isso que posiciona o resto.
   top: 1px acerta a linha de base, que no Chrome sai 1px acima. */
.vp-why-different .vp-why-different__title {
	position: relative;
	top: 1px;
	width: 100%;
	font-size: 48px;
	line-height: 53px;
}

/* --------------------------------------------------------------------------
   Argumentos — 3341:5424 (coluna, gap 32)
   Títulos 18/25.2 600 #000 (o Figma assenta cada linha em 25px: 1 linha =
   25, 2 linhas = 50). O aberto mostra o apoio 18 #636569 e a barra.
   -------------------------------------------------------------------------- */

.vp-why-different__points {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

.vp-why-different .vp-why-different__point-title {
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

/* O título é o botão do acordeão (cor e hover em "Estados", abaixo). */
.vp-why-different .vp-why-different__trigger {
	display: block;
	width: 100%;
	text-align: left;
	border-radius: 4px;
	transition: color var(--vp-fast) var(--vp-ease);
}

/* O aberto não fecha (aria-disabled): sem mãozinha. */
.vp-why-different .vp-why-different__trigger[aria-disabled="true"] {
	cursor: default;
}

/* O painel abre/fecha pela altura da linha da grade (0fr ↔ 1fr), 300ms. Os
   8px entre título e apoio (gap do 3341:5425) ficam dentro dele, para sumir
   junto quando fecha. Fechado sai também do leitor de tela (visibility). */
.vp-why-different__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows 300ms var(--vp-ease),
		visibility 0s linear 300ms;
}

.vp-why-different__point.is-open .vp-why-different__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows 300ms var(--vp-ease),
		visibility 0s linear 0s;
}

/* 3341:5427 — apoio + barra, gap 24. Os 8px acima (gap do 3341:5425) são
   margem do apoio, e não padding do painel: padding não encolhe com 0fr. */
.vp-why-different__panel-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 0;
	overflow: hidden;
}

.vp-why-different .vp-why-different__detail {
	margin-top: 8px;
	color: var(--vp-text);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
}

/* 3341:5429 — trilho 2px #F8F4EC; 3341:5431 — preenchimento #C8A977, 146 de
   584 (25%) no quadro do Figma. O JS anima a largura até 100%. */
.vp-why-different__bar {
	position: relative;
	flex: none;
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 8px;
	background: var(--vp-cream-2);
	overflow: hidden;
}

.vp-why-different__bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 25%;
	height: 100%;
	border-radius: 8px;
	background: #c8a977;
}

/* --------------------------------------------------------------------------
   CTA — 3400:8379 (linha, gap 40, centro)
   -------------------------------------------------------------------------- */

.vp-why-different__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* 40 no desenho (a linha tem 568 = 225 + 40 + 303). Quando a coluna
	   estreita (1024–1439) o respiro cede até 16 e, abaixo disso, a prova
	   social desce para a linha de baixo em vez de invadir a foto. */
	gap: 16px clamp(16px, 100cqw - 528px, 40px);
}

/* Botão 3582:2119: 225x48 = 24 + rótulo 177 + 24 — é o .vp-btn--primary
   do base.css (padding 11/23 + borda de 1px) sem ajuste. */
.vp-why-different__cta {
	flex: none;
}

/* 3341:5437 — avatares + frase, gap 16. */
.vp-why-different__proof {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}

/* 3341:5438 — quatro círculos de 40, gap -4 (margem negativa); contorno
   #D6D1CA de 1px por fora (sombra sem desfoque, não ocupa espaço). */
.vp-why-different__avatars {
	display: flex;
	align-items: center;
}

.vp-why-different .vp-why-different__avatar {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--vp-stone);
}

.vp-why-different .vp-why-different__avatar + .vp-why-different__avatar {
	margin-left: -4px;
}

/* 3341:5444 — 18/25.2 400 #000, caixa de 25 em y 526.5 (centrada nos 40
   dos avatares). O Chrome assenta o texto no pixel inteiro (a linha de base
   sairia 0.5px abaixo da do Figma); o meio pixel sobe por transform, como no
   badge. */
.vp-why-different .vp-why-different__proof-text {
	transform: translateY(-0.5px);
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Foto — 3341:5445 (584x600, raio 16, recorte)
   O render 3341:5446 (942.11x642.5) fica a -220/-19.65 da moldura. A posição
   vai em unidades da própria moldura (container query): altura 107.08cqh,
   largura 157.02cqh (proporção do nó), topo -3.333cqh (-20: o Chrome encaixa
   a foto no pixel do aparelho, e -20 é o que coincide com o Figma na medição)
   e centro horizontal a 42.99cqw (-220 à esquerda). A 1440 dá o quadro do
   Figma; se a moldura mudar de proporção (1024–1439, mobile) a foto continua
   cobrindo, centrada no rosto, sem mostrar os cantos transparentes do render
   girado — isso vale até a moldura 1:1; a 6:5 do tablet aproxima 0.9%
   (ver o bloco do tablet).
   -------------------------------------------------------------------------- */

.vp-why-different__media {
	position: relative;
	flex: 0 3 584px;
	align-self: stretch;
	aspect-ratio: 584 / 600;
	min-width: 0;
	border-radius: 16px;
	overflow: hidden;
	container-type: size;
}

.vp-why-different .vp-why-different__photo {
	position: absolute;
	top: -3.3333cqh;
	left: calc(42.9888cqw - 78.50917cqh);
	width: 157.01833cqh;
	max-width: none;
	height: 107.08333cqh;
}

/* --------------------------------------------------------------------------
   Estados do argumento (DS: 100ms ease-out)
   -------------------------------------------------------------------------- */

.vp-why-different__point:not(.is-open) .vp-why-different__trigger:hover {
	color: var(--vp-bronze);
}

/* --------------------------------------------------------------------------
   Abaixo de 1440: o título encolhe devagar para caber em duas linhas, e os
   argumentos evitam palavra sozinha na última linha (a 1440 as quebras são
   as do Figma e ficam intocadas).
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
	.vp-why-different .vp-why-different__title {
		font-size: clamp(40px, calc(2.5vw + 12px), 48px);
		line-height: 1.1;
	}

	.vp-why-different .vp-why-different__point-title,
	.vp-why-different .vp-why-different__detail {
		text-wrap: pretty;
	}
}

/* --------------------------------------------------------------------------
   Tablet (≤1023) — empilha: badge/título, foto, argumentos, CTA.
   A coluna de texto some do layout (display: contents) para a foto poder
   entrar entre o título e os argumentos.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.vp-why-different {
		padding-bottom: 96px;
	}

	.vp-why-different__row {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.vp-why-different__content {
		display: contents;
	}

	.vp-why-different__head {
		order: 1;
	}

	.vp-why-different__media {
		order: 2;
		flex: none;
		width: 100%;
		aspect-ratio: 6 / 5;
	}

	/* Linhas de no máximo 672 (a largura do tablet 768): a 1023 o texto
	   correria 927px, longo demais para ler. */
	.vp-why-different__points {
		order: 3;
		max-width: 672px;
	}

	/* Alvo de toque de 45px sem mudar o desenho: o respiro extra do botão
	   é devolvido em margem negativa (cabe nos 32/24 entre os itens). */
	.vp-why-different .vp-why-different__trigger {
		margin-block: -10px;
		padding-block: 10px;
	}

	/* Sem a coluna (display: contents) não há contêiner para o cqw do gap. */
	.vp-why-different__cta-row {
		order: 4;
		gap: 16px 40px;
	}

	/* Display/48 do DS: com uma frase por linha cabe folgado em 672. */
	.vp-why-different .vp-why-different__title {
		font-size: 48px;
		line-height: 52.8px;
	}
}

/* Moldura 6:5 (768–1023): mais larga que 1:1, mostraria uma lasca dos cantos
   transparentes do render no topo. A foto cresce 0.9% (108cqh; largura na
   proporção do nó, 942.11/642.5) e sobe o topo para -3.75cqh: o recorte fica
   todo dentro da parte opaca, com o mesmo centro no rosto. */
@media (min-width: 768px) and (max-width: 1023px) {
	.vp-why-different .vp-why-different__photo {
		top: -3.75cqh;
		left: calc(42.9888cqw - 79.1813cqh);
		width: 158.3626cqh;
		height: 108cqh;
	}
}

/* --------------------------------------------------------------------------
   Mobile (≤767) — DS 390: margem 20, seção 64, título 40/44, CTA 48 de
   largura total com a prova social centralizada embaixo.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-why-different {
		padding-bottom: 64px;
	}

	.vp-why-different__row {
		gap: 32px;
	}

	.vp-why-different__head {
		gap: 20px;
	}

	/* Uma frase por vez (o <br>), cada uma em linhas equilibradas: a 390
	   "Nasceu dentro / da clínica. / Virou protocolo / referência." */
	.vp-why-different .vp-why-different__title {
		font-size: 40px;
		line-height: 44px;
		text-wrap: balance;
	}

	.vp-why-different__media {
		aspect-ratio: 584 / 600;
	}

	.vp-why-different__points {
		gap: 24px;
	}

	.vp-why-different .vp-why-different__point-title,
	.vp-why-different .vp-why-different__detail {
		line-height: 25.2px;
	}

	.vp-why-different__cta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	/* Avatares + frase (303) não cabem abaixo de 343: a frase desce. */
	.vp-why-different__proof {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
	}
}