/* ==========================================================================
   Hero — Figma 3376:7453 (1440x760)
   Cabeçalho branco (3376:7495) + copy à esquerda (3376:7459) + colunas de
   cartões dos influenciadores à direita (3376:7377).

   Textos com "leading trim" no Figma (caixa = altura das maiúsculas: links,
   selos, @usuário, nome) usam margens negativas para a caixa CSS ter a
   mesma altura e o mesmo centro: com as métricas 75/25 do base.css e
   maiúsculas de 0.674em, sobram (lh - fs)/2 + 0.076em em cima e
   (lh - fs)/2 + 0.25em embaixo.
   ========================================================================== */

.vp-hero {
	position: relative;
	/* "Background Image 02" 3376:7458 cobre a seção inteira. */
	background: var(--vp-cream);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cabeçalho — "Navigation / Header" 3376:7495: 72px, padding 16/112, branco
   -------------------------------------------------------------------------- */

.vp-hero__header {
	position: relative;
	z-index: 3;
	background: var(--vp-white);
}

.vp-hero__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
	height: 72px;
}

/* Logo 104x40 (I3376:7495;3209:375): hero-logo.svg é o logo-white-104 do
   tema (mesma geometria do Figma, 71KB contra 380KB da exportação) em
   #503629 — o logo-brown-166 escalado tem letras em outras posições. */
.vp-hero__logo {
	display: block;
	flex: none;
	width: 104px;
	height: 40px;
}

.vp-hero__logo-svg {
	width: 104px;
	height: 40px;
}

/* "Header Right": links (gap 32) + botão, com 40 entre eles. */
.vp-hero__menu {
	display: flex;
	align-items: center;
	gap: 40px;
}

.vp-hero__links {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* 16/22.4 600 #503629 com trim: o Figma centraliza as maiúsculas na barra,
   o CSS centraliza a linha, que deixa as maiúsculas 0.087em (1.39px) acima.
   O Figma põe essa linha de base entre dois pixels e o Chrome assenta o
   texto do layout em px inteiros (medido @2x: com top 1.9 ele fica 0.4px
   abaixo do Figma; com 1.4, 0.6px acima). O translate não é arredondado:
   top 1.9 + translate -0.5 deixa o texto a 0.1px do desenho. Mesmo ajuste
   nos textos do badge e dos selos. */
.vp-hero__link {
	position: relative;
	top: 1.9px;
	translate: 0 -0.5px;
	display: block;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--vp-fast) var(--vp-ease);
}

.vp-hero__link:hover {
	color: var(--vp-bronze);
}

/* "CTA Button" I3376:7495;3237:1039: 218x40, #503629, sem borda no Figma —
   a borda de 1px do .vp-btn sai do padding (24 → 23); altura fixa de 40. */
.vp-hero__cta.vp-btn {
	height: 40px;
	padding: 0 23px;
}

.vp-hero__menu-btn {
	display: none;
}

/* --------------------------------------------------------------------------
   Corpo — copy (600) à esquerda, colunas (496) encostadas na margem direita
   -------------------------------------------------------------------------- */

.vp-hero__corpo {
	display: flex;
	justify-content: space-between;
	/* A 1440 sobram 120px entre copy e colunas; o gap só vale abaixo disso. */
	gap: 32px;
	/* 760 - 72 do cabeçalho. */
	min-height: 688px;
}

/* "Hero Form Container" 3376:7459: y 160 (88 abaixo do cabeçalho), col gap 40. */
.vp-hero__copy {
	display: flex;
	flex: 0 1 600px;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	padding: 88px 0 136px;
}

/* "Hero Form Inner" 3376:7460: textos + selos, gap 32. */
.vp-hero__conteudo {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* "Hero Copy Inner" 3376:7463: gap 12. */
.vp-hero__textos {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* "Hero Copy Top" 3376:7464: badge + título, gap 24. */
.vp-hero__topo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* "Badge / Product Eyebrow" 3376:7465: textos com trim, centralizados pelas
   maiúsculas (ver .vp-hero__link) — 0.087em a 14px (1.22) + 0.5px, e o
   translate de -0.5px. No rótulo o padding-top desce o texto pela metade
   (3.44 → 1.72) e o translate vai só no texto, não na pílula branca. */
.vp-hero__badge .vp-badge__label {
	padding-top: 3.44px;
}

.vp-hero__badge-nome {
	translate: 0 -0.5px;
}

.vp-hero__badge .vp-badge__text {
	position: relative;
	top: 1.72px;
	translate: 0 -0.5px;
}

/* "Hero Heading" 3376:7466: 48/52.8 600, caixa FIXED de 592. O Figma arredonda
   a caixa de 3 linhas para 159 (158.4 + 0.6) — é o que põe o apoio em y387. */
.vp-hero__titulo {
	max-width: 592px;
	padding-bottom: 0.6px;
	/* O Chrome desenha o Myriad 48 1px acima do Figma (as correções de
	   métrica do base.css deixam ~0.02em); desce sem mexer na caixa. */
	position: relative;
	top: 1px;
	color: var(--vp-ink);
	font-size: 48px;
	line-height: 52.8px;
	font-weight: 600;
	letter-spacing: 0;
}

/* "Hero Description" 3376:7467: 20/28 #636569. */
.vp-hero__apoio {
	color: var(--vp-text);
	font-size: 20px;
	line-height: 28px;
}

/* "Trust Badges Container" 3376:7469: 592x32 recortado; o "Fade Overlay"
   3376:7491 (32px, transparente → #FAF7F2) apaga a ponta direita. */
.vp-hero__selos {
	position: relative;
	width: 100%;
	max-width: 592px;
	height: 32px;
}

.vp-hero__selos::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 100%;
	background: linear-gradient(90deg, rgba(250, 247, 242, 0) 0%, var(--vp-cream) 100%);
	pointer-events: none;
}

.vp-hero__selos-trilho {
	gap: 24px;
}

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

/* "Trust Badge Icon Container": 32px, #F1E9DD, borda interna branca 15%. */
.vp-hero__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-hero__selo-svg {
	width: 16px;
	height: 16px;
}

/* 16/22.4 600 #503629 com trim (caixa de 10.78px: -4.416 / -7.2), meio
   pixel mais baixo e o translate de -0.5px, como no .vp-hero__link. */
.vp-hero__selo-texto {
	margin: -3.916px 0 -7.7px;
	translate: 0 -0.5px;
	color: var(--vp-brown);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 600;
	white-space: nowrap;
}

/* "Hero Buttons Container" 3376:7492: gap 16. */
.vp-hero__botoes {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* "Quero experimentar" 3582:2099 não tem stroke: o padding 23 + borda 1 do
   .vp-btn já dá os 24 do Figma. "Ver como funciona" 3582:2103 tem stroke de
   1px que entra na caixa (180 = 1 + 24 + 130 + 24 + 1): padding 24. */
.vp-hero__botoes .vp-btn--secondary {
	padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   Colunas de cartões — "Hero Stories Grid" 3376:7377 (496x688, recortado)
   -------------------------------------------------------------------------- */

.vp-hero__stories {
	position: relative;
	display: flex;
	/* 496 a 1440. Abaixo, a copy fica com os 592 do título (3 linhas como no
	   Figma) enquanto der e as colunas encolhem até 336. */
	flex: 0 0 clamp(336px, 100% - 624px, 496px);
	align-items: flex-start;
	gap: 16px;
	overflow: hidden;
	/* As colunas (870px) não empurram a altura: ela vem da copy / 688. */
	contain: size;
}

.vp-hero__coluna {
	flex: 1 1 0;
	min-width: 0;
}

/* A coluna esquerda começa 104px acima do recorte (y -32 contra y 72):
   104/240 da largura do cartão, para acompanhar cartões menores. */
.vp-hero__coluna--esquerda {
	margin-top: calc((16px - 100%) * 13 / 60);
}

.vp-hero__coluna-trilho,
.vp-hero__faixa-trilho {
	gap: 16px;
}

/* "Story Card": 240x427, raio 16, fundo branco e stroke interno #F8F8F5.
   No Figma o stroke cobre 1px da foto em volta; aqui é a borda de verdade e
   a foto fica recortada por dentro dela (sem o halo escuro que um contorno
   sobreposto deixa nos cantos arredondados). */
.vp-hero__cartao {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 240 / 427;
	overflow: hidden;
	border: 1px solid var(--vp-offwhite);
	border-radius: 16px;
	background: var(--vp-white);
	isolation: isolate;
	container-type: inline-size;
}

/* Foto maior que o cartão e centralizada nele, como no "Photo Area".
   --vp-foto-r = largura da foto / 240 e --vp-foto-rh = altura / 427 (o
   cartão com a borda = 100% + 2px). Centralizada por calc e não por
   translate(-50%): o Chrome arredonda o ponto de partida do transform e a
   foto descia 1px de tela. */
.vp-hero__foto {
	position: absolute;
	top: calc((100% - (100% + 2px) * var(--vp-foto-rh, 1)) / 2);
	/* --vp-foto-dx (0.5px, só fotos de largura ímpar): o layout fica no px
	   inteiro de baixo e o translate completa o meio pixel do Figma. */
	left: calc((100% - (100% + 2px) * var(--vp-foto-r, 1)) / 2 - var(--vp-foto-dx, 0px));
	width: calc((100% + 2px) * var(--vp-foto-r, 1));
	translate: var(--vp-foto-dx, none);
}

/* "bottom-overlay": 140px, preto 0 → 80%, padding 12; dentro, avatar 40 +
   informações (gap 8), alinhados ao pé. */
.vp-hero__perfil {
	position: absolute;
	/* -1px: mede a partir da borda externa do cartão, como no Figma. */
	right: -1px;
	bottom: -1px;
	left: -1px;
	z-index: 1;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-content: end;
	align-items: center;
	column-gap: 8px;
	height: 140px;
	padding: 12px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.vp-hero__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* "Celebrity Info": @usuário (linha de 11px com o selo) e nome, gap 12. */
.vp-hero__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	color: var(--vp-white);
	font-size: 14px;
	line-height: 19.6px;
}

.vp-hero__usuario {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.vp-hero__arroba,
.vp-hero__nome {
	margin: -3.864px 0 -6.3px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vp-hero__arroba {
	font-weight: 700;
}

.vp-hero__nome {
	font-weight: 400;
}

.vp-hero__verificado {
	flex: none;
	width: 12px;
	height: 11px;
}

/* Cartões mais estreitos que os 240 do Figma (desktop entre 1024 e 1439):
   avatar menor e, abaixo de ~180, sem avatar — o @usuário continua inteiro. */
@container (max-width: 213px) {
	.vp-hero__perfil {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.vp-hero__avatar {
		width: 32px;
		height: 32px;
	}
}

@container (max-width: 179px) {
	.vp-hero__perfil {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 10px;
	}

	.vp-hero__avatar {
		display: none;
	}
}

/* "Hero Stories Fade Bottom" 3376:7379 (girado: #FAF7F2 em cima) e
   "Fade Top" 3376:7378 (#FAF7F2 embaixo), 152px cada. */
.vp-hero__fade {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	height: 152px;
	pointer-events: none;
}

.vp-hero__fade--topo {
	top: 0;
	background: linear-gradient(0deg, rgba(250, 247, 242, 0) 0%, var(--vp-cream) 100%);
}

.vp-hero__fade--base {
	bottom: 0;
	background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0%, var(--vp-cream) 100%);
}

/* Faixa horizontal única (só tablet/mobile). */
.vp-hero__faixa {
	display: none;
}

/* --------------------------------------------------------------------------
   Larguras de caixa do Figma
   O Figma arredonda para cima a largura dos textos "HUG" (Chrome: 76.05 →
   Figma: 77 em "Resultados"). Como os links, selos e botões se encadeiam
   por gap, a soma dessas frações desloca o que vem depois (até 4px no menu).
   Estas larguras mínimas são as caixas da spec; texto maior só cresce.
   -------------------------------------------------------------------------- */

.vp-hero__links > li:nth-child(1) > a { min-width: 77px; }   /* Resultados */
.vp-hero__links > li:nth-child(2) > a { min-width: 106px; }  /* Como funciona */
.vp-hero__links > li:nth-child(3) > a { min-width: 74px; }   /* Avaliações */
.vp-hero__links > li:nth-child(4) > a { min-width: 29px; }   /* FAQ */

.vp-hero__cta.vp-btn { min-width: 218px; }            /* 24 + 170 + 24 */
.vp-hero__btn-comprar.vp-btn { min-width: 189px; }    /* 24 + 141 + 24 */
.vp-hero__botoes .vp-btn--secondary { min-width: 180px; } /* 1 + 24 + 130 + 24 + 1 */

.vp-hero__badge .vp-badge__label { min-width: 125px; } /* 10 + 105 + 10 */
.vp-hero__badge .vp-badge__text { min-width: 146px; }

/* Dentro dessas caixas o Figma encosta o texto no padding (a sobra do
   arredondamento fica à direita); centralizado, ele andaria meio pixel. */
@media (min-width: 1024px) {
	.vp-hero__cta.vp-btn,
	.vp-hero__botoes .vp-btn,
	.vp-hero__badge .vp-badge__label {
		justify-content: flex-start;
	}
}

/* Os selos se repetem de 3 em 3 (cópia do Figma + cópia do base.js). */
.vp-hero__selo:nth-child(3n + 1) .vp-hero__selo-texto { min-width: 204px; }
.vp-hero__selo:nth-child(3n + 2) .vp-hero__selo-texto { min-width: 171px; }
.vp-hero__selo:nth-child(3n) .vp-hero__selo-texto { min-width: 97px; }

/* --------------------------------------------------------------------------
   Desktop estreito (1024–1279): título na escala Display/40 do DS
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	/* Logo + menu (640px) não cabem nos 800 - 64 de gap a 1024: o botão
	   invadia 8px da margem direita. Gaps menores deixam folga de ~56px. */
	.vp-hero__barra {
		gap: 32px;
	}

	.vp-hero__menu {
		gap: 32px;
	}

	.vp-hero__links {
		gap: 24px;
	}

	.vp-hero__copy {
		padding: 72px 0 96px;
	}

	/* Fora do 1440 as quebras do Figma não valem mais: equilibra as linhas
	   (sem "fortes." sozinho na última). */
	.vp-hero__titulo {
		padding-bottom: 0;
		font-size: 40px;
		line-height: 44px;
		text-wrap: balance;
	}

	.vp-hero__apoio {
		font-size: 18px;
		line-height: 25.2px;
		text-wrap: pretty;
	}
}

/* --------------------------------------------------------------------------
   Tablet (≤1023): menu hambúrguer, copy empilhada, cartões numa faixa
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.vp-hero__barra {
		gap: 16px;
	}

	/* Alvo de toque de 44px; o logo (40) continua no mesmo lugar. */
	.vp-hero__logo {
		height: 44px;
		padding-block: 2px;
	}

	/* Botão do menu: alvo de 44px, três barras #503629 que viram um X; o
	   -12px põe a ponta das barras (não a área de toque) na margem direita. */
	.vp-hero__menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -12px;
		border-radius: 9999px;
		color: var(--vp-brown);
		transition: background-color var(--vp-fast) var(--vp-ease);
	}

	/* Só com mouse: no toque o :hover "gruda" depois de fechar o menu. */
	@media (hover: hover) {
		.vp-hero__menu-btn:hover {
			background: var(--vp-cream-2);
		}
	}

	.vp-hero__menu-barras,
	.vp-hero__menu-barras::before,
	.vp-hero__menu-barras::after,
	.vp-hero__menu-barras > span {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
	}

	.vp-hero__menu-barras {
		position: relative;
		background: transparent;
	}

	.vp-hero__menu-barras::before,
	.vp-hero__menu-barras::after {
		content: "";
		position: absolute;
		left: 0;
		transition: transform 200ms var(--vp-ease);
	}

	.vp-hero__menu-barras::before {
		top: -6px;
	}

	.vp-hero__menu-barras::after {
		top: 6px;
	}

	.vp-hero__menu-barras > span {
		transition: opacity 200ms var(--vp-ease);
	}

	.vp-hero__header.is-open .vp-hero__menu-barras::before {
		transform: translateY(6px) rotate(45deg);
	}

	.vp-hero__header.is-open .vp-hero__menu-barras::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	.vp-hero__header.is-open .vp-hero__menu-barras > span {
		opacity: 0;
	}

	/* Painel que desce sob a barra: 4 links + CTA em largura total. */
	.vp-hero__menu {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 8px var(--vp-gutter) 24px;
		border-top: 1px solid var(--vp-sand);
		background: var(--vp-white);
		box-shadow: 0 16px 32px rgba(80, 54, 41, 0.08);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition:
			opacity 200ms var(--vp-ease),
			transform 200ms var(--vp-ease),
			visibility 0s linear 200ms;
	}

	.vp-hero__header.is-open .vp-hero__menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition:
			opacity 200ms var(--vp-ease),
			transform 200ms var(--vp-ease),
			visibility 0s;
	}

	.vp-hero__links {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.vp-hero__link {
		top: 0;
		translate: none;
		padding: 13px 0;
		border-bottom: 1px solid var(--vp-sand);
		font-size: 18px;
		line-height: 25.2px;
	}

	.vp-hero__cta.vp-btn {
		width: 100%;
		height: 48px;
	}

	.vp-hero__corpo {
		flex-direction: column;
		gap: 0;
		min-height: 0;
	}

	.vp-hero__copy {
		flex: none;
		max-width: 640px;
		padding: 56px 0 48px;
	}

	.vp-hero__stories {
		display: none;
	}

	/* Faixa de ponta a ponta; começa na margem do DS (quadro parado). */
	.vp-hero__faixa {
		display: block;
		padding: 0 0 64px var(--vp-gutter);
	}

	.vp-hero__faixa .vp-hero__cartao {
		width: 216px;
	}
}

/* --------------------------------------------------------------------------
   Mobile (≤767): DS 390 — margem 20, Display/40, apoio 18/25.2, botões 100%
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-hero__barra {
		height: 64px;
	}

	.vp-hero__copy {
		gap: 32px;
		max-width: none;
		padding: 40px 0;
	}

	.vp-hero__conteudo {
		gap: 28px;
	}

	.vp-hero__topo {
		gap: 20px;
	}

	.vp-hero__botoes {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
}

/* Sem animação, a faixa do mobile rola com o dedo (os cartões 3 e 4 não
   ficam escondidos). */
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
	.vp-hero__faixa {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--vp-gutter);
		scrollbar-width: none;
	}

	.vp-hero__faixa::-webkit-scrollbar {
		display: none;
	}

	.vp-hero__faixa .vp-hero__cartao {
		scroll-snap-align: start;
	}

	.vp-hero__faixa-trilho {
		padding-right: var(--vp-gutter);
	}
}