/* ==========================================================================
   Comparativo — Figma 3341:5279 (1440x1174)
   Coluna centralizada, gap 64, padding 136/112: cabeçalho 806x230 · tabela
   1010x400 · faixa de selos 1010x32 · botão 189x48.

   Todo seletor leva a raiz .vp-comparison (0,2,0), então os valores da spec
   vencem os dos componentes compartilhados (.vp-h2, .vp-lead, .vp-badge,
   .vp-btn) sem depender da ordem das folhas.

   Meio pixel: o Chrome assenta caixas e texto posicionados pelo layout no
   pixel inteiro, e o Figma deixa vários textos desta seção em y .5 (medido
   @2x: todos saíam 0.5px abaixo do desenho). O acerto vai por "translate",
   que não é arredondado — o mesmo recurso do hero e do why-different.

   Alturas de linha: o Figma arredonda a entrelinha para o pixel inteiro
   (52.8 → 53, 25.2 → 25): é isso que dá a caixa de 106 do título e as de 25
   dos critérios na spec. No desktop usamos os valores arredondados; abaixo
   de 1024 voltam os do DS.

   Textos "aparados" (caixa = altura das maiúsculas, como o Figma desenha os
   rótulos de 11/13px da spec): a margem negativa tira a meia-entrelinha +
   (ascendente - altura das maiúsculas) em cima e a meia-entrelinha +
   descendente embaixo. Myriad Pro: ascendente 0.75, descendente 0.25,
   maiúsculas 0.674 do corpo.
   ========================================================================== */

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

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

.vp-comparison .vp-comparison__head {
	width: 100%;
	max-width: 806px;
}

/* Badge 3341:5282: medido contra o Figma, o texto do .vp-badge compartilhado
   fica 1px acima do desenho (lá a caixa de texto aparada é que fica
   centrada na pílula). Desce o texto sem mexer nas pílulas: 1.5px pelo
   layout (que o Chrome leva a 2) e -0.5 por translate; no rótulo o
   padding-top desce o texto pela metade e o translate vai no span interno,
   para não levar a pílula branca junto. As larguras mínimas repõem o que o
   Chrome mede a menos nos textos (91 e 76 no Figma), para a pílula ter os
   220 do desenho. */
.vp-comparison .vp-badge__label {
	min-width: 111px; /* 10 + 91 + 10 */
	justify-content: flex-start;
	padding-top: 3px;
}

.vp-comparison .vp-comparison__badge-rotulo {
	translate: 0 -0.5px;
}

.vp-comparison .vp-badge__text {
	position: relative;
	top: 1.5px;
	translate: 0 -0.5px;
	min-width: 76px;
}

/* 3341:5284 — Display/48 Regular preto (.vp-h2), duas linhas numa caixa de
   106 (entrelinha arredondada para 53). O traço assenta 1px mais baixo que
   no Chrome. O apoio 3341:5285 é o .vp-lead tal e qual (20/28 #636569; nos
   806 de largura a linha quebra depois de "o Protocolo"). */
.vp-comparison .vp-comparison__title {
	position: relative;
	top: 1px;
	width: 100%;
	line-height: 53px;
}

/* --------------------------------------------------------------------------
   Tabela — 3341:5286 (1010 de largura)
   Linha de títulos de 64 e linhas de 56, cada uma com a faixa de células de
   24px centralizada (16 em cima e embaixo). Colunas 402 / 308 / resto (300),
   em proporção para a tabela encolher entre 1024 e 1439.
   -------------------------------------------------------------------------- */

.vp-comparison .vp-comparison__table {
	display: block;
	width: 100%;
	max-width: 1010px;
}

.vp-comparison .vp-comparison__thead,
.vp-comparison .vp-comparison__tbody {
	display: block;
}

.vp-comparison .vp-comparison__row {
	position: relative;
	display: flex;
	align-items: center;
	height: 56px;
}

/* "Table Header Row" 3341:5287 (64) não tem auto-layout: a faixa de títulos
   (3341:5288) fica a 16 do topo e sobram 24 embaixo. */
.vp-comparison .vp-comparison__row--head {
	align-items: flex-start;
	height: 64px;
	padding-top: 16px;
}

/* "Row Divider" (3341:5309 e irmãos): 1px #D9D9D9 logo abaixo da linha — no
   Figma ele fica fora da caixa de 56 e não empurra a linha seguinte. */
.vp-comparison .vp-comparison__tbody .vp-comparison__row::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--vp-line);
	pointer-events: none;
}

.vp-comparison .vp-comparison__cell {
	display: flex;
	align-items: center;
	flex: none;
	height: 24px;
	padding: 0 8px;
	font-weight: 400;
	text-align: left;
}

/* "Feature Cell" 3341:5298: 402, sem padding. */
.vp-comparison .vp-comparison__cell--criterio {
	width: calc(402 / 1010 * 100%);
	padding: 0;
}

/* "Vitruvian Cell" 3341:5301: 308 com padding 0/8. */
.vp-comparison .vp-comparison__cell--com {
	width: calc(308 / 1010 * 100%);
}

/* "Generic Cell" 3341:5305: FILL (300). */
.vp-comparison .vp-comparison__cell--sem {
	flex: 1 1 0;
	min-width: 0;
}

/* "Vitruvian/Generic Column Label" 3341:5292/5295: 20/28 600, aparado para
   a caixa de 13 da spec (y 451.5 — o meio pixel vai por translate). */
.vp-comparison .vp-comparison__col-label {
	translate: 0 -0.5px;
	margin: -5.52px 0 -9px;
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	white-space: nowrap;
}

.vp-comparison .vp-comparison__cell--sem .vp-comparison__col-label {
	color: var(--vp-brown);
}

/* "Feature Label" 3341:5300: 18/25.2 600 preto (caixa de 25 em y .5). */
.vp-comparison .vp-comparison__criterio {
	translate: 0 -0.5px;
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
}

/* "Vitruvian/Generic Cell Inner": ícone 22 + valor, gap 12. */
.vp-comparison .vp-comparison__valor {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* "Icon / UI / Check" 3341:5303 (#845D32) e "Cross" 3341:5307 (#D6D1CA):
   22x22, raio 8 — o desenho vem inteiro do SVG. */
.vp-comparison .vp-comparison__icone {
	flex: none;
	width: 22px;
	height: 22px;
}

/* "Vitruvian Value" 3341:5304 (preto) / "Generic Value" 3341:5308
   (#636569): 16/22.4, aparado para a caixa de 11 da spec (y 516.5). O
   Figma assenta o traço meio pixel abaixo da conta: top 0.5 (o Chrome leva
   a 1) e -0.5 por translate. */
.vp-comparison .vp-comparison__texto {
	position: relative;
	top: 0.5px;
	translate: 0 -0.5px;
	margin: -4.416px 0 -7.2px;
	color: var(--vp-ink);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 400;
	white-space: nowrap;
}

.vp-comparison .vp-comparison__cell--sem .vp-comparison__texto {
	color: var(--vp-text);
}

/* --------------------------------------------------------------------------
   Selos — "Comparison Trust Badges Container" 3341:5380
   Janela de 1010x32 com recorte; trilho 3341:5382 (gap 24) começa na borda
   esquerda e sai cortado pela direita ("94% relatam redu…").
   -------------------------------------------------------------------------- */

.vp-comparison .vp-comparison__selos {
	position: relative;
	width: 100%;
	max-width: 1010px;
	height: 32px;
}

.vp-comparison .vp-comparison__marquee {
	height: 100%;
}

.vp-comparison .vp-comparison__trilho {
	gap: 24px;
	height: 100%;
}

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

/* "Badge Icon Container" 3341:5384: 32px, #F1E9DD, borda interna branca 15%
   (o blur de fundo do Figma não aparece sobre o branco). */
.vp-comparison .vp-comparison__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-comparison .vp-comparison__selo-svg {
	width: 16px;
	height: 16px;
}

/* 3341:5387 e irmãos: 16/22.4 600 #503629, aparado (caixa de 11), meio
   pixel abaixo como os valores da tabela (mesmo top + translate). */
.vp-comparison .vp-comparison__selo-texto {
	position: relative;
	top: 0.5px;
	translate: 0 -0.5px;
	margin: -4.416px 0 -7.2px;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 600;
	white-space: nowrap;
}

/* O Figma arredonda para cima a largura dos textos HUG (o Chrome mede
   299.1 / 207.3 / 133 / 299.1 / 170.4 / 96.1): sem isso cada selo chega
   até 1.5px antes do lugar. 6n+k pega também as cópias do letreiro. */
.vp-comparison .vp-comparison__selo:nth-child(6n+1) .vp-comparison__selo-texto,
.vp-comparison .vp-comparison__selo:nth-child(6n+4) .vp-comparison__selo-texto { min-width: 300px; }
.vp-comparison .vp-comparison__selo:nth-child(6n+2) .vp-comparison__selo-texto { min-width: 208px; }
.vp-comparison .vp-comparison__selo:nth-child(6n+3) .vp-comparison__selo-texto { min-width: 133px; }
.vp-comparison .vp-comparison__selo:nth-child(6n+5) .vp-comparison__selo-texto { min-width: 171px; }
.vp-comparison .vp-comparison__selo:nth-child(6n+6) .vp-comparison__selo-texto { min-width: 97px; }

/* "Carousel Fade Right" 3341:5414 (na ponta esquerda, branco → transparente)
   e "Carousel Fade Left" 3341:5413 (na direita, transparente → branco):
   32x32 por cima do trilho. */
.vp-comparison .vp-comparison__fade {
	position: absolute;
	top: 0;
	width: 32px;
	height: 100%;
	pointer-events: none;
}

.vp-comparison .vp-comparison__fade--inicio {
	left: 0;
	background: linear-gradient(90deg, var(--vp-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.vp-comparison .vp-comparison__fade--fim {
	right: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--vp-white) 100%);
}

/* --------------------------------------------------------------------------
   CTA — "Button" 3582:2127: 189x48 no Figma, sem borda (o .vp-btn já desconta
   a sua de 1px do padding: 11/23). A largura mínima repõe o que o Chrome
   mede a menos no texto (141 no Figma, 140.4 aqui) — com o texto encostado
   à esquerda, a sobra fica à direita, como no Figma. Hover/pressed/foco são
   os do .vp-btn.

   Centralizado com largura ímpar, o botão cai em x 625.5; o Chrome pinta o
   fundo no pixel inteiro seguinte (626) e o texto no lugar certo. O
   translate de -0.5 devolve o fundo ao 625.5 do desenho e o do span desfaz o
   deslocamento no texto. No mobile o botão ocupa a linha e não precisa.
   -------------------------------------------------------------------------- */

.vp-comparison .vp-comparison__cta {
	translate: -0.5px 0;
	justify-content: flex-start;
	min-width: 189px; /* 24 + 141 + 24 */
}

.vp-comparison .vp-comparison__cta-texto {
	translate: 0.5px 0;
}

/* --------------------------------------------------------------------------
   Movimento reduzido: o letreiro fica parado no quadro do Figma; a faixa
   passa a rolar com o dedo/trackpad para os selos cortados não se perderem.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root:not(.vp-static) .vp-comparison .vp-comparison__marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}

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

/* --------------------------------------------------------------------------
   Tablet — margem 48 do DS. A tabela segue em três colunas proporcionais,
   mas as linhas crescem com o texto (critérios e valores podem quebrar), e
   a faixa de selos vai de borda a borda.
   -------------------------------------------------------------------------- */

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

	.vp-comparison .vp-comparison__title {
		top: 0;
		line-height: 52.8px;
	}

	/* Sem a largura de 806, o apoio divide as linhas por igual (não sobra
	   "pacientes." sozinho). */
	.vp-comparison .vp-comparison__lead {
		text-wrap: balance;
	}

	.vp-comparison .vp-comparison__row {
		height: auto;
		min-height: 56px;
		padding-block: 16px;
	}

	.vp-comparison .vp-comparison__row--head {
		align-items: center;
		min-height: 64px;
		padding-block: 16px;
	}

	.vp-comparison .vp-comparison__cell {
		height: auto;
		min-height: 24px;
	}

	/* Colunas 44 / 28 / 28: a 768 o critério mais longo (277px) e o valor
	   mais longo ("Laboratório genérico", 174px) ainda cabem numa linha. */
	.vp-comparison .vp-comparison__cell--criterio {
		width: 44%;
		padding-right: 16px;
	}

	.vp-comparison .vp-comparison__cell--com {
		width: 28%;
	}

	.vp-comparison .vp-comparison__cell--com,
	.vp-comparison .vp-comparison__cell--sem {
		padding-inline: 8px 0;
	}

	/* Daqui para baixo as linhas crescem com o texto e os ajustes de meio
	   pixel do desktop deixam de fazer sentido. */
	.vp-comparison .vp-comparison__criterio {
		translate: none;
		line-height: 25.2px;
	}

	/* Valor com quebra: o ícone acompanha a primeira linha. min-width 0 e
	   quebra de palavra seguram critério e valor dentro da coluna mesmo com
	   textos editados maiores ou com a fonte de reserva. */
	.vp-comparison .vp-comparison__valor {
		align-items: flex-start;
		min-width: 0;
	}

	.vp-comparison .vp-comparison__texto {
		top: 0;
		translate: none;
		margin: 0;
		white-space: normal;
	}

	.vp-comparison .vp-comparison__criterio,
	.vp-comparison .vp-comparison__texto {
		min-width: 0;
		overflow-wrap: break-word;
	}

	/* Faixa de borda a borda: o primeiro selo parte da margem do conteúdo
	   (quadro parado e rolagem com movimento reduzido) e os degradês ficam
	   só na margem, onde os selos entram e saem. O padding é do recorte,
	   não do trilho, então o laço do letreiro continua sem emenda. */
	.vp-comparison .vp-comparison__selos {
		width: calc(100% + 2 * var(--vp-gutter));
		max-width: none;
	}

	.vp-comparison .vp-comparison__marquee {
		padding-inline: var(--vp-gutter);
	}

	.vp-comparison .vp-comparison__fade {
		width: var(--vp-gutter);
	}
}

/* --------------------------------------------------------------------------
   Mobile 390 — margem 20, espaçamento de seção 64 e gap 40 (DS e a FAQ
   mobile 3456:3549), título 40/44 e apoio 18/25.2. Tabela compacta: cada
   linha vira um bloco com o critério em cima, ocupando a largura, e "com" e
   "sem" lado a lado embaixo, alinhados aos dois títulos de coluna (o título
   da coluna de critérios some da tela, mas não do leitor). O botão ocupa a
   largura toda.
   -------------------------------------------------------------------------- */

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

	/* Tamanhos do .vp-h2/.vp-lead no mobile (40/44 e 18/25.2); só a
	   entrelinha do título precisa voltar, porque a de 53 é desta seção. */
	.vp-comparison .vp-comparison__title {
		line-height: 44px;
	}

	.vp-comparison .vp-comparison__row,
	.vp-comparison .vp-comparison__row--head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		column-gap: 16px;
		row-gap: 12px;
		min-height: 0;
		padding-block: 20px;
	}

	.vp-comparison .vp-comparison__row--head {
		padding-block: 0 12px;
		border-bottom: 1px solid var(--vp-line);
	}

	/* As faixas são minmax(0, 1fr), mas a célula ainda teria como largura
	   mínima a da palavra mais longa: min-width 0 aqui e no valor/texto
	   (bloco do tablet) seguram tudo dentro da coluna. */
	.vp-comparison .vp-comparison__cell {
		width: auto;
		min-width: 0;
		min-height: 0;
		padding: 0;
	}

	.vp-comparison .vp-comparison__tbody .vp-comparison__cell--criterio {
		grid-column: 1 / -1;
	}

	/* Mesmo recurso do .vp-sr-only: fora da tela, dentro da tabela. */
	.vp-comparison .vp-comparison__row--head .vp-comparison__cell--criterio {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.vp-comparison .vp-comparison__col-label {
		translate: none;
		margin: 0;
		font-size: 16px;
		line-height: 22.4px;
		white-space: normal;
	}

	.vp-comparison .vp-comparison__col-label {
		overflow-wrap: break-word;
	}

	.vp-comparison .vp-comparison__valor {
		gap: 8px;
	}

	.vp-comparison .vp-comparison__cta,
	.vp-comparison .vp-comparison__cta-texto {
		translate: none;
	}

	.vp-comparison .vp-comparison__cta {
		justify-content: center;
	}
}