/* ==========================================================================
   Como o protocolo age — Figma 3341:5145 (1440x1225)
   Coluna centralizada, gap 64, padding 0/112/136/112: cabeçalho (806x205),
   selo + cartões (1216x600) e nota (806x156).

   Seletores ".vp-formula .vp-formula__x" (0,2,0): escopo da seção e folga
   sobre as classes compartilhadas (.vp-h2, .vp-lead, .vp-btn, .vp-badge),
   que aqui só recebem o que a spec muda. O reset do base.css é :where()
   (especificidade zero) e não compete com nada disto.
   ========================================================================== */

/* Degradê vertical de #FAF7F2 a 0% (topo) até #FAF7F2 (base), sobre o branco
   da página; vai de borda a borda acima de 1440. O frame recorta (clip). */
.vp-formula {
	background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0%, var(--vp-cream) 100%);
	overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   Cabeçalho — 3341:5146, 806 de largura (a quebra do apoio depende dela:
   "...Não é um produto" / "...que trabalham" / "juntos.").
   -------------------------------------------------------------------------- */

.vp-formula .vp-formula__head {
	width: 100%;
	max-width: 806px;
}

/* Badge 3341:5148 (239x32): rótulo de 111 (10 + 91 + 10, texto encostado
   no padding) e subtítulo de 95 — as larguras HUG arredondadas do Figma;
   sem elas a pílula sai com 238.5 e meio px fora do centro. O texto de 14px
   assenta ~1.5px mais baixo no Figma: o rótulo desce pelo padding e o
   subtítulo por deslocamento relativo (a pílula não se move). Mesmo ajuste
   dos badges das outras seções. */
.vp-formula .vp-badge__label {
	justify-content: flex-start;
	min-width: 111px;
	padding-top: 3px;
}

.vp-formula .vp-badge__text {
	position: relative;
	top: 1.5px;
	min-width: 95px;
}

/* 3341:5150 — Display/48 Regular (.vp-h2). O Figma arredonda a caixa do
   título para 53 (52.8 de linha): é isso que põe o apoio (3341:5151,
   .vp-lead 20/28 #636569) em y 121. O traço assenta 1px mais baixo que no
   Chrome. */
.vp-formula .vp-formula__title {
	position: relative;
	top: 1px;
	min-height: 53px;
}

/* --------------------------------------------------------------------------
   Selo + cartões — 3341:5152 (1216): o selo fica 40px acima da primeira
   linha (gap de 3341:5153) e as duas linhas de cartões, a 16 (gap de
   3341:5152).
   -------------------------------------------------------------------------- */

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

/* 3341:5154 — faixa de 1216x32 sem auto-layout: colchete 235 (x 197),
   caixa do texto 351 (x 432) e colchete 236 (x 783), centrados. */
.vp-formula .vp-formula__seal {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 32px;
}

/* Colchetes 3341:5155 / 3341:5159: traço interno #845D32 em cima e no lado
   de fora, canto de 8, 16 de altura, pontas retas. SVG em px (sem viewBox):
   o canto é um arco fixo e a reta de cima um retângulo de 100% de largura
   (recortado pelo próprio SVG), então o colchete estica sem deformar o
   canto. O da direita é o mesmo desenho espelhado, com traço de 0.8. */
.vp-formula .vp-formula__bracket {
	flex: 0 1 235px;
	min-width: 16px;
	height: 16px;
	margin-top: 14px;
	overflow: hidden;
	fill: none;
	stroke: var(--vp-bronze);
	stroke-width: 1;
}

.vp-formula .vp-formula__bracket rect {
	fill: var(--vp-bronze);
	stroke: none;
}

.vp-formula .vp-formula__bracket--end {
	flex-basis: 236px;
	stroke-width: 0.8;
	transform: scaleX(-1);
}

/* 3341:5156 (351x32, recorta) > 3341:5158: "✓  Protocolo…" 14/16.8 600
   preto, largura HUG de 286 centrada, a 6.33 do topo no Figma. Aqui 6.83:
   o Chrome encaixa a linha de base no px inteiro e esse é o valor que a
   deixa mais perto (0.35px acima; um px abaixo erra mais — medido). O ✓ é
   um SVG de 15 (o glifo do Figma, x 577–587.5 / y 277–288); gap 4 e o
   padding-right de 2 repõem o espaço duplo e põem o "P" em x 594.5. */
.vp-formula .vp-formula__seal-text {
	display: flex;
	flex: none;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	width: 351px;
	padding-right: 2px;
	color: var(--vp-ink);
	font-size: 14px;
	line-height: 16.8px;
	font-weight: 600;
	white-space: nowrap;
}

.vp-formula .vp-formula__seal-text > span {
	padding-top: 6.83px;
}

.vp-formula .vp-formula__check {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 6px;
	fill: currentColor;
}

/* Grade 3x2, gap 16 (colunas de 394.67). */
.vp-formula .vp-formula__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Cartão "Card / Ingredient / *": #F8F4EC, raio 16, padding 32, gap 32.
   O traço fica por conta do SVG do formula.js (.vp-formula__dash); sem JS,
   um contorno tracejado de 1px por dentro. */
.vp-formula .vp-formula__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	padding: 32px;
	border-radius: 16px;
	background: var(--vp-cream-2);
	outline: 1px dashed var(--vp-stone);
	outline-offset: -1px;
}

.vp-formula.is-dashed .vp-formula__card {
	outline: 0;
}

/* Instâncias do componente (linha de cima): o traço de 1px entra no layout. */
.vp-formula .vp-formula__card--inset {
	padding: 33px;
}

/* Contorno tracejado desenhado pelo JS, por cima do fundo. */
.vp-formula .vp-formula__dash {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--vp-stone);
	stroke-width: 1;
	stroke-dasharray: 8 8;
	stroke-dashoffset: 4;
	pointer-events: none;
}

/* Ícone 48: círculo #F8F4EC com traço #845D32 e o brilho de 20 no meio. */
.vp-formula .vp-formula__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--vp-bronze);
	border-radius: 50%;
	background: var(--vp-cream-2);
	color: var(--vp-bronze);
}

.vp-formula .vp-formula__icon-svg {
	width: 20px;
	height: 20px;
}

/* "Card Text Content": nome 20/28 600 + texto 18/25.2 (o Figma assenta cada
   linha em 25: três linhas = 75), gap 8, tudo preto. */
.vp-formula .vp-formula__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vp-formula .vp-formula__name {
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.vp-formula .vp-formula__desc {
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
}

/* Cartão de CTA 3400:8523: #BC955C, sem traço; texto no topo e o botão na
   base (3400:8529, SPACE_BETWEEN com gap mínimo de 32). */
.vp-formula .vp-formula__card--cta {
	justify-content: space-between;
	align-items: flex-start;
	background: var(--vp-gold);
	outline: 0;
}

.vp-formula .vp-formula__card--cta .vp-formula__name,
.vp-formula .vp-formula__card--cta .vp-formula__desc {
	color: var(--vp-white);
}

.vp-formula .vp-formula__card--cta .vp-formula__text {
	width: 100%;
}

/* 3400:8527 — .vp-btn--primary de 225x40 (pad 12/24, 16/22.4 600):
   #BC955C sobre #BC955C, só o texto aparece; hover #845D32 e pressed
   #503629 do DS revelam a pílula. O padding lateral de 23 do .vp-btn já
   desconta a borda de 1px; só a altura muda (40 em vez de 48). */
.vp-formula .vp-formula__cta {
	flex: none;
	height: 40px;
	padding-block: 0;
}

/* --------------------------------------------------------------------------
   Nota — 3341:5191 (806, gap 32): seta 40 + três linhas 20/28 600.
   -------------------------------------------------------------------------- */

.vp-formula .vp-formula__note {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 806px;
}

.vp-formula .vp-formula__arrow {
	flex: none;
	width: 40px;
	height: 40px;
}

.vp-formula .vp-formula__note-text {
	width: 100%;
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	text-align: center;
}

/* Uma frase por linha (as quebras do Figma); abaixo de 806 cada frase
   quebra sozinha e é equilibrada à parte. */
.vp-formula .vp-formula__note-line {
	display: block;
}

/* --------------------------------------------------------------------------
   1024–1279: as três colunas ficam estreitas (256 a 1024) — padding 24
   para o texto respirar.
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.vp-formula .vp-formula__card,
	.vp-formula .vp-formula__card--inset {
		padding: 24px;
	}
}

/* O botão do CTA (225, HUG) não cabe nos 208 de conteúdo do cartão a 1024:
   com 14 de padding lateral ele cabe, e a pílula do hover não encosta na
   borda do cartão. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.vp-formula .vp-formula__cta {
		padding-inline: 14px;
	}
}

/* --------------------------------------------------------------------------
   Tablet (DS: margem 48, 8 colunas / gutter 24): duas colunas de cartões —
   o CTA fecha a terceira linha, à direita. Os colchetes encolhem até caber.
   -------------------------------------------------------------------------- */

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

	/* Sem a largura de 806 do desktop, equilibra as linhas. */
	.vp-formula .vp-formula__title,
	.vp-formula .vp-formula__lead,
	.vp-formula .vp-formula__note-line {
		text-wrap: balance;
	}

	.vp-formula .vp-formula__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.vp-formula .vp-formula__card,
	.vp-formula .vp-formula__card--inset {
		padding: 32px;
	}

	/* No toque não há hover para revelar a pílula dourada sobre o cartão
	   dourado: aqui ela vira o secundário do DS invertido — fundo branco,
	   texto #845D32 (o #BC955C não tem contraste no branco), hover #F8F4EC,
	   pressed #D6D1CA / #503629 — com a altura Large do DS (48, alvo de
	   toque). */
	.vp-formula .vp-formula__cta {
		height: 48px;
		border-color: var(--vp-white);
		background: var(--vp-white);
		color: var(--vp-bronze);
	}

	.vp-formula .vp-formula__cta:hover {
		border-color: var(--vp-cream-2);
		background: var(--vp-cream-2);
	}

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

/* --------------------------------------------------------------------------
   Mobile 390 (DS: margem 20, gutter 16, seção 64): uma coluna, título
   40/44 e apoio 18/25.2 (.vp-h2 / .vp-lead), textos de cartão um degrau
   abaixo, botão de 48 na largura toda.
   -------------------------------------------------------------------------- */

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

	.vp-formula .vp-formula__head {
		max-width: none;
	}

	.vp-formula .vp-formula__title {
		top: 0;
		min-height: 0;
	}

	.vp-formula .vp-formula__cards {
		gap: 24px;
	}

	/* O selo mantém os colchetes: o texto quebra em duas linhas centradas
	   ("Protocolo desenvolvido / pela Vinci Hair Clinic", 143 de largura) e
	   cada colchete fica com a sobra (63 a 360), com a reta entre as duas
	   linhas e as pernas descendo para os cartões, como no desktop. */
	.vp-formula .vp-formula__seal {
		gap: 12px;
		height: auto;
	}

	.vp-formula .vp-formula__bracket {
		flex: 1 1 0;
		min-width: 24px;
		margin-top: 16px;
	}

	.vp-formula .vp-formula__seal-text {
		width: auto;
		padding-right: 0;
		white-space: normal;
	}

	.vp-formula .vp-formula__seal-text > span {
		max-width: 150px;
		padding-top: 0;
		text-align: center;
	}

	.vp-formula .vp-formula__check {
		margin-top: 0;
	}

	.vp-formula .vp-formula__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.vp-formula .vp-formula__card,
	.vp-formula .vp-formula__card--inset {
		gap: 24px;
		padding: 24px;
	}

	.vp-formula .vp-formula__name {
		font-size: 18px;
		line-height: 25.2px;
	}

	.vp-formula .vp-formula__desc {
		font-size: 16px;
		line-height: 22.4px;
	}

	.vp-formula .vp-formula__cta {
		width: 100%;
	}

	.vp-formula .vp-formula__note {
		gap: 24px;
	}

	.vp-formula .vp-formula__note-text {
		font-size: 18px;
		line-height: 25.2px;
	}
}