/* ==========================================================================
   Perguntas frequentes — Figma 3341:5869 (desktop) / 3456:3549 (mobile,
   LP Vitruvian)
   ========================================================================== */

.vp-faq {
	/* Cor do "fundo" do cartão: a barra vertical do "+" é pintada com ela. */
	--vp-faq-bg: var(--vp-white);
	background: var(--vp-white);
}

/* "FAQ Content" 3486:5488 — coluna de 1216, gap 64, padding 136 da seção. */
.vp-faq .vp-faq__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding-block: 136px;
}

/* --------------------------------------------------------------------------
   Cabeçalho — 3486:5489: badge 203x32 + título 48/52.8, gap 32.
   -------------------------------------------------------------------------- */

.vp-faq .vp-faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

/* Badge 3486:5490 (203x32): medido contra o Figma, o texto do .vp-badge
   compartilhado fica 1.5px acima do desenho. Desce o texto sem mexer nas
   pílulas; as larguras mínimas repõem o que o Chrome mede a menos nos
   textos (25 e 125 no Figma). */
.vp-faq .vp-badge__label {
	justify-content: flex-start;
	min-width: 45px; /* 10 + 25 + 10 */
	padding-top: 3px;
}

.vp-faq .vp-badge__text {
	position: relative;
	top: 1.5px;
	min-width: 125px;
}

/* 3486:5491 — Display/48 Regular: o .vp-h2 (40/44 no mobile). No Figma o
   traço assenta 1px mais baixo que no Chrome. */
.vp-faq .vp-faq__title {
	position: relative;
	top: 1px;
}

/* --------------------------------------------------------------------------
   Abas — "FAQ Categories Column" 3486:5492: 1216x64, duas de 608.
   As linhas de baixo são traço interno no Figma (o rótulo fica centrado nos
   64px inteiros), por isso sombra inset e não borda.
   -------------------------------------------------------------------------- */

.vp-faq .vp-faq__tabs {
	display: flex;
	width: 100%;
}

.vp-faq .vp-faq__tab {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 64px;
	padding: 0 16px;
	border-radius: 12px 12px 0 0;
	box-shadow: inset 0 -1px 0 var(--vp-offwhite);
	color: var(--vp-brown);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	transition:
		background-color var(--vp-fast) var(--vp-ease),
		box-shadow var(--vp-fast) var(--vp-ease),
		color var(--vp-fast) var(--vp-ease);
}

@media (hover: hover) {
	.vp-faq .vp-faq__tab:hover {
		color: var(--vp-bronze);
	}
}

/* 3486:5493 — ativa: #FAF7F2, linha de 2px #845D32, rótulo #845D32. */
.vp-faq .vp-faq__tab[aria-selected="true"] {
	background: var(--vp-cream);
	box-shadow: inset 0 -2px 0 var(--vp-bronze);
	color: var(--vp-bronze);
	cursor: default;
}

.vp-faq .vp-faq__tab:focus-visible {
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Painel de cada aba: janela da lista + "Ver mais" (gap 64, como no
   "FAQ Content").
   -------------------------------------------------------------------------- */

.vp-faq .vp-faq__panel {
	display: flex;
	flex-direction: column;
	gap: 64px;
	width: 100%;
}

.vp-faq .vp-faq__panel[hidden] {
	display: none;
}

/* "Testimonials Cards Columns" 3486:5651 — janela de 856px recortada: cabem
   dez perguntas de 72 + 16, a décima cortada 8px antes da borda de baixo. */
.vp-faq .vp-faq__window {
	position: relative;
}

.vp-faq .vp-faq__window.is-collapsed {
	max-height: 856px;
	overflow: clip;
}

/* Da 11ª em diante estão abaixo do recorte: fora do tab até "Ver mais". */
.vp-faq .vp-faq__window.is-collapsed .vp-faq__item:nth-child(n+11) {
	visibility: hidden;
}

/* "Testimonials Gradient Overlay 4" 3486:6063 — 1216x192 no pé da janela,
   branco embaixo até transparente em cima. */
.vp-faq .vp-faq__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 192px;
	background: linear-gradient(0deg, var(--vp-white) 0%, rgba(255, 255, 255, 0) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms var(--vp-ease);
}

.vp-faq .vp-faq__window.is-collapsed .vp-faq__fade {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Lista — "FAQ Questions Column" 3486:6242 (gap 16) de "FAQ / Item / Closed"
   -------------------------------------------------------------------------- */

.vp-faq .vp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 1216x72, borda 1px #F8F8F5, raio 16. A altura sai do botão (22.4 + 25.2 +
   22.4 + bordas = 72): o texto cai a 23.4px do topo, como os 23.5 do Figma. */
.vp-faq .vp-faq__item {
	border: 1px solid var(--vp-offwhite);
	border-radius: 16px;
	background: var(--vp-faq-bg);
	transition: border-color var(--vp-fast) var(--vp-ease);
}

/* Aberto (e no hover, onde há mouse) a borda ganha o #F1E9DD do badge. */
.vp-faq .vp-faq__item.is-open {
	border-color: var(--vp-sand);
}

@media (hover: hover) {
	.vp-faq .vp-faq__item:hover {
		border-color: var(--vp-sand);
	}

	.vp-faq .vp-faq__q:hover .vp-faq__icon {
		color: var(--vp-brown);
	}

	.vp-faq .vp-faq__more-btn:hover {
		color: var(--vp-brown);
	}
}

/* O botão é o "FAQ Item 01 Header" inteiro: padding 32 dos lados (33 com a
   borda = o x 145 da spec), pergunta à esquerda e ícone à direita, gap 24.
   Aberto, o padding de baixo vira os 16 do "FAQ Item 01 Content" até a
   resposta. */
.vp-faq .vp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 22.4px 32px;
	border-radius: 15px;
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25.2px;
	font-weight: 600;
	text-align: left;
	transition: padding-bottom 250ms var(--vp-ease);
}

.vp-faq .vp-faq__item.is-open .vp-faq__q {
	padding-bottom: 16px;
}

.vp-faq .vp-faq__q:focus-visible {
	outline-offset: -2px;
}

/* "FAQ Question 01 Text" — 1064 fixos no Figma. Lá a pergunta começa em
   y 23.5 (meio pixel) e o Chrome encaixa o texto no pixel: descer 0.5 deixa
   o traço mais perto do desenho (medido no @2x). */
.vp-faq .vp-faq__q-text {
	position: relative;
	top: 0.5px;
	flex: 0 1 1064px;
	min-width: 0;
}

/* "Expand Icon Group" — 20x20 #845D32. */
.vp-faq .vp-faq__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--vp-bronze);
	transition: color var(--vp-fast) var(--vp-ease);
}

.vp-faq .vp-faq__icon-bar {
	fill: var(--vp-faq-bg);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 250ms var(--vp-ease);
}

.vp-faq .vp-faq__item.is-open .vp-faq__icon-bar {
	transform: scaleY(0);
}

/* Resposta (não desenhada): Text/16 do DS, #636569, na coluna da pergunta.
   Fechada ela fica hidden="until-found" (o Ctrl+F do Chrome acha o texto e
   abre o item); sem padding no invólucro, para medir 0 quando fechada. */
.vp-faq .vp-faq__a {
	overflow: hidden;
}

.vp-faq .vp-faq__a-text {
	max-width: calc(1064px + 2 * 32px); /* texto com os 1064 da pergunta */
	padding: 0 32px 32px;
	color: var(--vp-text);
	font-size: 16px;
	line-height: 22.4px;
}

/* --------------------------------------------------------------------------
   "Ver mais" — 3486:5517: faixa de 56, 18/25.2 600 #845D32 sublinhado.
   O botão ocupa a altura da faixa para o alvo de toque ser generoso.
   -------------------------------------------------------------------------- */

.vp-faq .vp-faq__more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
}

/* Sublinhado do Figma: ~1px a 2px da linha de base (medido no @2x). */
.vp-faq .vp-faq__more-btn {
	position: relative;
	top: 0.5px;
	height: 56px;
	padding: 0 16px;
	border-radius: 9999px;
	color: var(--vp-bronze);
	font-size: 18px;
	line-height: 25.2px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
	transition: color var(--vp-fast) var(--vp-ease);
}

/* --------------------------------------------------------------------------
   "FAQ CTA Buttons Container" 3486:5520 — frase + botão, gap 40.
   -------------------------------------------------------------------------- */

.vp-faq .vp-faq__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.vp-faq .vp-faq__cta-text {
	color: var(--vp-bronze);
	font-size: 18px;
	line-height: 25.2px;
	font-weight: 600;
	text-align: center;
}

/* "Button" 3582:2139 — 225x48 (.vp-btn--primary; o padding 23 + a borda de
   1px do .vp-btn = os 24 do Figma). O Chrome mede o rótulo com 176.4 e não
   177: a largura mínima repõe os 225 e o rótulo fica encostado no padding,
   em x 631.5 como no desenho (centrado, andaria 0.3px — medido no @2x). */
.vp-faq .vp-faq__cta-btn {
	justify-content: flex-start;
	min-width: 225px;
}

/* ==========================================================================
   Tablet — margem 48 do DS; seção com 96 em cima e embaixo.
   ========================================================================== */

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

	.vp-faq .vp-faq__panel {
		gap: 48px;
	}
}

/* ==========================================================================
   Mobile — LP Vitruvian 3456:3549: padding 64, gap 40; abas roláveis que
   vazam pela direita; itens com padding 24/32 e perguntas em duas linhas;
   a lista começa com seis perguntas.
   ========================================================================== */

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

	/* Badge mobile: gap interno 10 (3456:3551). */
	.vp-faq .vp-faq__badge {
		gap: 10px;
	}

	/* 3456:3552 — Display/40 do .vp-h2, caixa FILL, "Tire suas / dúvidas
	   aqui" (a quebra é o <br class="vp-br-mobile">). */
	.vp-faq .vp-faq__title {
		width: 100%;
	}

	/* "FAQ - CTA" 3456:3553: faixa de 390 recortada, abas HUG com padding
	   64 a partir da margem de 20 — a segunda aparece cortada e rola. */
	.vp-faq .vp-faq__tabs {
		width: calc(100% + 2 * var(--vp-gutter));
		margin-inline: calc(-1 * var(--vp-gutter));
		padding-inline: var(--vp-gutter);
		overflow-x: auto;
		scroll-padding-inline: var(--vp-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vp-faq .vp-faq__tabs::-webkit-scrollbar {
		display: none;
	}

	.vp-faq .vp-faq__tab {
		flex: none;
		padding: 0 64px;
	}

	.vp-faq .vp-faq__panel {
		gap: 16px;
	}

	/* Seis perguntas até "Ver mais"; sem recorte nem degradê. */
	.vp-faq .vp-faq__window.is-collapsed {
		max-height: none;
		overflow: visible;
	}

	.vp-faq .vp-faq__window.is-collapsed .vp-faq__item:nth-child(n+7) {
		display: none;
	}

	.vp-faq .vp-faq__fade {
		display: none;
	}

	/* "FAQ / Item / Closed" mobile: padding 24/32. No Figma a pergunta é
	   FILL até o ícone (o gap 28 some no SPACE_BETWEEN) e as quebras são
	   manuais; aqui o texto quebra sozinho, então fica o gap 24 do item de
	   desktop — respiro para o ícone sem jogar pergunta para a 3ª linha. */
	.vp-faq .vp-faq__q {
		padding-block: 24px;
	}

	.vp-faq .vp-faq__a-text {
		padding: 0 32px 24px;
	}

	.vp-faq .vp-faq__more,
	.vp-faq .vp-faq__more-btn {
		height: 48px;
	}
}

/* ==========================================================================
   Sem JavaScript — a lista inteira, com as respostas abertas e as duas abas
   uma embaixo da outra (sem abas, degradê, "Ver mais" nem ícone). Fica no
   fim para vencer as regras de recorte acima com a mesma especificidade
   (o :nth-child(n) iguala as de "n+11" e "n+7").
   ========================================================================== */

@media (scripting: none) {
	.vp-faq .vp-faq__tabs,
	.vp-faq .vp-faq__fade,
	.vp-faq .vp-faq__more,
	.vp-faq .vp-faq__icon {
		display: none;
	}

	.vp-faq .vp-faq__panel[hidden] {
		display: flex;
	}

	.vp-faq .vp-faq__window.is-collapsed {
		max-height: none;
		overflow: visible;
	}

	.vp-faq .vp-faq__window.is-collapsed .vp-faq__item:nth-child(n) {
		display: block;
		visibility: visible;
	}

	.vp-faq .vp-faq__a[hidden] {
		display: block;
		content-visibility: visible;
	}

	.vp-faq .vp-faq__q {
		cursor: default;
	}
}