/* ==========================================================================
   Rodapé — Figma 3341:5912 (desktop, 1440x725) / 3456:3230 (mobile,
   rodapé da LP Vitruvian)

   O reset do base.css tem especificidade zero (:where), então uma classe
   sozinha basta para vencer "p/h2/address/a { font/color: inherit }".
   ========================================================================== */

/* "Footer Section": padding 0/112/136/112. Em cima não há respiro — quem
   separa do FAQ são os 136px de baixo dele. */
.vp-footer {
	padding-bottom: 136px;
	background: var(--vp-white);
}

/* "Footer Content" 3341:5913 — coluna, gap 64 entre o bloco principal, os
   fios, o selo de pagamento e o copyright. */
.vp-footer__content {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* --------------------------------------------------------------------------
   Bloco principal — "Footer Main Inner" 3341:5916 (linha, gap 64)
   -------------------------------------------------------------------------- */

.vp-footer__main {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

/* "Footer Headline Row" 3341:5917: coluna de 384, gap 40. */
.vp-footer__brand {
	display: flex;
	flex: 0 0 384px;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}

/* "Footer Vinci Logo" 3341:5918 — 166.4x64 no Figma; o SVG otimizado do
   tema tem a mesma arte num quadro de 167x64. */
.vp-footer__logo {
	display: block;
	width: 167px;
	height: 64px;
}

.vp-footer__logo-img {
	width: 167px;
	height: 64px;
}

/* "Footer Headline Text" 3341:6158 — 18px #000, quebra manual. O Figma
   mede 25 por linha (384x50, não 50.4): com 25 o botão fica em 194 cravado
   e as linhas de base não mudam. */
.vp-footer__headline {
	width: 100%;
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
}

/* "Button" 3582:2143: 189x48 no Figma (24 + rótulo de 141 + 24). O Chrome
   mede o rótulo um pouco mais estreito: a largura mínima segura o botão e
   o rótulo fica alinhado à esquerda, no x do Figma. */
.vp-footer__cta {
	justify-content: flex-start;
	min-width: 189px;
}

/* --------------------------------------------------------------------------
   Navegação — "Footer Navigation" 3341:6160: ocupa o resto (768px) e
   distribui Menu 174 / Contato 205 / Social 192 em SPACE_BETWEEN.
   -------------------------------------------------------------------------- */

.vp-footer__nav {
	display: flex;
	flex: 1 1 0;
	justify-content: space-between;
	gap: 64px;
	min-width: 0;
}

.vp-footer__col {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 16px;
}

.vp-footer__col--menu {
	width: 174px;
}

.vp-footer__col--contact {
	width: 205px;
}

/* Títulos 20/28 600 #000. "Menu" e "Contato" têm altura FIXA de 22 no
   Figma, com o texto centrado na caixa (a linha de 28 sobra 3px para cima
   e para baixo) — o mesmo que line-height 22. "Social Media" é HUG (28):
   por isso os links começam em 38 e os ícones em 44. */
.vp-footer__title {
	height: 22px;
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 22px;
	font-weight: 600;
	white-space: nowrap;
}

.vp-footer__col--social .vp-footer__title {
	height: auto;
	line-height: 28px;
}

/* Listas de links: coluna, gap 16; cada link 18/25.2 #636569 numa caixa
   FIXED de 22. O Figma centra a linha de 25.2 na caixa mas arredonda o
   recuo para -1px (e não -1.6): line-height 23.2 põe a linha de base no
   mesmo ponto (medido). Os HUG medem 25. */
.vp-footer__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vp-footer__item {
	height: 22px;
	color: var(--vp-text);
	font-size: 18px;
	line-height: 23.2px;
	font-weight: 400;
}

.vp-footer__item--hug {
	height: 25px;
	line-height: 25.2px;
}

.vp-footer__link {
	display: inline-block;
	color: var(--vp-text);
	transition: color var(--vp-fast) var(--vp-ease);
}

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

/* Linhas de contato com ícone — "Contact Phone Row" 3341:6174 e irmãs:
   linha, gap 8, ícone centrado na linha de 25. */
.vp-footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.vp-footer__contact-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* O ícone do WhatsApp (3341:6180) é de 18px. */
.vp-footer__contact--wa .vp-footer__contact-icon {
	width: 18px;
	height: 18px;
}

/* "Contact Address Row" 3341:6182: linha FILL (205), gap 8, ícone no topo
   e o texto (177) em três linhas. O Figma mede 75 para as três (25 cada,
   não 25.2): com 25.2 a terceira linha desce 1px.
   A linha é um contêiner: as quebras do Customizer (<br>) só valem enquanto
   a linha mais longa (~165px) cabe ao lado do ícone (28). */
.vp-footer__contact--address {
	display: flex;
	align-items: flex-start;
	height: auto;
	line-height: 25px;
	white-space: normal;
	container-type: inline-size;
}

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

@container (max-width: 193px) {
	.vp-footer__br {
		display: none;
	}
}

/* Social Media — 5 botões 32x32, gap 8, borda 1px #F0E4D0 por dentro,
   raio 10, ícone 16px #845D32. A moldura é o ::before, para o alvo de
   toque poder crescer no mobile sem mexer no desenho. */
.vp-footer__social {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vp-footer__social-link {
	position: relative;
	display: block;
	isolation: isolate;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	color: var(--vp-bronze);
	transition: color var(--vp-fast) var(--vp-ease);
}

.vp-footer__social-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px #f0e4d0;
	transition:
		background-color var(--vp-fast) var(--vp-ease),
		box-shadow var(--vp-fast) var(--vp-ease);
}

.vp-footer__social-link:hover::before {
	background: var(--vp-cream-2);
	box-shadow: inset 0 0 0 1px var(--vp-gold);
}

.vp-footer__social-link:active {
	color: var(--vp-brown);
}

.vp-footer__social-link:active::before {
	background: var(--vp-stone);
}

.vp-footer__social-icon {
	width: 32px;
	height: 32px;
}

/* --------------------------------------------------------------------------
   Fios — "Footer Divider" 3341:6197 / 3486:6438: linha de 0px com traço
   #F8F8F5 de 1px centrado, que o Figma pinta no pixel de cima (316 para a
   linha em 317). A margem de -1px tira o traço do fluxo: o gap de 64 fica
   inteiro dos dois lados, como no Figma.
   -------------------------------------------------------------------------- */

.vp-footer__rule {
	flex: none;
	width: 100%;
	height: 0;
	margin: -1px 0 0;
	border: 0;
	border-top: 1px solid var(--vp-offwhite);
}

.vp-footer__rule--brand {
	display: none;
}

/* --------------------------------------------------------------------------
   Pagamento — "Footer Bottom Bar" 3486:6430: selo à esquerda, bandeiras à
   direita (SPACE_BETWEEN), tudo centrado nos 40px das bandeiras.
   -------------------------------------------------------------------------- */

.vp-footer__payment {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

/* "Copyright Info" 3492:6488: escudo 24px + texto 20/28 600, gap 12. */
.vp-footer__secure {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	white-space: nowrap;
}

.vp-footer__secure-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* O texto (3492:6487) tem "vertical trim" no Figma: a caixa vai da altura
   das maiúsculas à linha de base (13px) e é ela que centra na linha de 24 —
   o texto fica 1.5px abaixo do centro da linha de 28 (medido: com 1px a
   linha de base sobe um pixel inteiro e erra mais). */
.vp-footer__secure-text {
	position: relative;
	top: 1.5px;
}

/* "Payment Methods" 3492:6441: Pix 113, Visa 123, Mastercard 52 — 40 de
   altura, gap 48. */
.vp-footer__methods {
	display: flex;
	align-items: center;
	gap: 48px;
}

.vp-footer__method {
	flex: none;
	height: 40px;
}

.vp-footer__method img,
.vp-footer__method svg {
	height: 40px;
}

.vp-footer__method--pix img { width: 113px; }
.vp-footer__method--visa svg { width: 123px; }
.vp-footer__method--mastercard svg { width: 52px; }

/* --------------------------------------------------------------------------
   Copyright + voltar ao topo — "Copyright Inner" 3341:6200
   Os dois textos são HUG de 25 no Figma, centrados na linha de 40 (y
   556.5): com line-height 25.2 a caixa começa em 556.4 e o Chrome arredonda
   a linha de base para cima do desenho (medido: -0.65px).
   -------------------------------------------------------------------------- */

.vp-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

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

/* "Back to Top Link" 3341:6202: rótulo 18px 600 + círculo 40, gap 16. */
.vp-footer__top {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 16px;
	color: var(--vp-ink);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
	white-space: nowrap;
}

/* O rótulo mede 111 no Figma e um pouco menos no Chrome: sem a largura
   mínima ele começa meio pixel à direita. */
.vp-footer__top-label {
	min-width: 111px;
}

.vp-footer__top-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vp-bronze);
	color: var(--vp-cream);
	transition: background-color var(--vp-fast) var(--vp-ease);
}

.vp-footer__top-icon svg {
	width: 12px;
	height: 12px;
}

.vp-footer__top:hover .vp-footer__top-icon {
	background: var(--vp-brown);
}

.vp-footer__top:active .vp-footer__top-icon {
	background: var(--vp-ink);
}

/* --------------------------------------------------------------------------
   1240–1439: o layout de desktop se acomoda — as colunas se aproximam e a
   marca encolhe até a frase mais longa (~320px, a 1240).
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
	.vp-footer__main {
		gap: 48px;
	}

	.vp-footer__brand {
		flex: 0 1 384px;
	}

	.vp-footer__nav {
		flex: 1 0 auto;
		gap: 32px;
	}
}

/* Abaixo de 1240 as três colunas não cabem ao lado da marca: a marca sobe
   (logo e frase à esquerda, botão à direita, na altura da frase), um fio a
   separa dos links — como no rodapé mobile — e a navegação ocupa a largura
   toda. */
@media (max-width: 1239px) {
	.vp-footer__main {
		flex-direction: column;
		align-items: stretch;
	}

	.vp-footer__brand {
		display: grid;
		flex: none;
		grid-template-columns: minmax(0, 384px) auto;
		align-items: center;
		justify-content: space-between;
		gap: 40px 48px;
	}

	.vp-footer__logo,
	.vp-footer__headline {
		grid-column: 1;
	}

	.vp-footer__cta {
		grid-column: 2;
		grid-row: 2;
	}

	.vp-footer__rule--brand {
		display: block;
	}

	/* Fora do quadro de 1440 os três títulos se alinham: "Social Media"
	   ganha a caixa de 22 dos outros (como no Vitruvian, 3456:3505). */
	.vp-footer__col--social .vp-footer__title {
		height: 22px;
		line-height: 22px;
	}
}

/* --------------------------------------------------------------------------
   Tablet — margem 48 (DS)
   -------------------------------------------------------------------------- */

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

	.vp-footer__content {
		gap: 48px;
	}

	/* 255 + 48 + 352 = 655 cabe nos 672 do tablet. */
	.vp-footer__methods {
		gap: 32px;
	}
}

/* --------------------------------------------------------------------------
   Mobile — LP Vitruvian 3456:3230: padding 64 embaixo, coluna com gap 40,
   fio entre a marca e os links, Menu e Contato lado a lado (gap 16),
   Social Media embaixo (gap 32), © e "Voltar ao topo" centralizados, com
   o rótulo #845D32 e o círculo #BC955C.
   Alvos de toque de 44px: cada link cresce 44 de altura (padding que a
   margem negativa devolve) e as listas passam a um passo de 44.
   -------------------------------------------------------------------------- */

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

	.vp-footer__content {
		gap: 40px;
	}

	/* "Footer - CTA + Links Block" 3456:3232 e "Footer - Navigation"
	   3456:3476 viram irmãos com o fio entre eles. */
	.vp-footer__main {
		gap: 40px;
	}

	/* Marca numa coluna só: logo, frase e botão de largura total. */
	.vp-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.vp-footer__logo {
		align-self: flex-start;
	}

	.vp-footer__cta {
		justify-content: center;
	}

	/* "Footer - Nav + Contact" 3456:3477 (linha, gap 16) + Social Media
	   embaixo (gap 32). O Menu fica com 120 (cabe "Como funciona", 115)
	   para o Contato ter o resto: a 390 o endereço mantém as três linhas do
	   desktop e os telefones (171) cabem até 360. */
	.vp-footer__nav {
		display: grid;
		grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
		gap: 32px 16px;
	}

	.vp-footer__col--menu,
	.vp-footer__col--contact {
		width: auto;
		min-width: 0;
	}

	.vp-footer__col--social {
		grid-column: 1 / -1;
	}

	/* Menu: todos os links na mesma linha de 23.2 (o "Fórmula" HUG de 25
	   é acidente do desenho); 23.2 + 21 = passo de 44.2, e o link de
	   23.2 + 2 x 10.5 = 44.2 encosta no vizinho sem sobrepor. */
	.vp-footer__col--menu .vp-footer__list {
		gap: 21px;
	}

	.vp-footer__col--menu .vp-footer__item {
		height: auto;
		line-height: 23.2px;
	}

	.vp-footer__col--menu .vp-footer__link {
		padding-block: 10.5px;
		margin-block: -10.5px;
	}

	/* Contato: linhas de 25.2 + 19 = passo de 44.2, links de 25.2 + 2 x
	   9.5. O e-mail pode quebrar depois do "@" (a <wbr> do template), como
	   no Vitruvian. */
	.vp-footer__list--contact {
		gap: 19px;
	}

	.vp-footer__list--contact .vp-footer__item--hug {
		height: auto;
	}

	.vp-footer__list--contact .vp-footer__link {
		padding-block: 9.5px;
		margin-block: -9.5px;
	}

	/* O link ocupa a linha toda da coluna (vale também para as linhas de
	   telefone/WhatsApp, que são .vp-footer__link + .vp-footer__contact). */
	.vp-footer__link {
		display: flex;
	}

	/* Ícones sociais: moldura de 32 com passo de 44 (alvo 44x44). A lista
	   recua 6px para a primeira moldura ficar na margem e a 16 do título. */
	.vp-footer__social {
		gap: 0;
		margin: -6px;
	}

	.vp-footer__social-link {
		width: 44px;
		height: 44px;
		padding: 6px;
		border-radius: 16px;
	}

	.vp-footer__social-link::before {
		inset: 6px;
	}

	/* Pagamento: selo em cima, bandeiras embaixo, centralizados; as
	   bandeiras descem a 32 de altura (278px no total, cabem a 320). */
	.vp-footer__payment {
		flex-direction: column;
		gap: 24px;
	}

	.vp-footer__methods {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
	}

	.vp-footer__method,
	.vp-footer__method img,
	.vp-footer__method svg {
		height: 32px;
	}

	.vp-footer__method--pix img { width: 90.4px; }
	.vp-footer__method--visa svg { width: 98.4px; }
	.vp-footer__method--mastercard svg { width: 41.6px; }

	/* © centralizado em duas linhas (3456:3523, 350x50) e "Voltar ao topo"
	   embaixo — rótulo em cima do círculo, gap 32 (3456:3525). */
	.vp-footer__bottom {
		flex-direction: column;
		gap: 40px;
		text-align: center;
	}

	.vp-footer__top {
		flex-direction: column;
		gap: 32px;
		color: var(--vp-bronze);
	}

	.vp-footer__top-icon {
		background: var(--vp-gold);
	}

	.vp-footer__top:hover .vp-footer__top-icon {
		background: var(--vp-bronze);
	}

	.vp-footer__top:active .vp-footer__top-icon {
		background: var(--vp-brown);
	}
}

/* 600–767 (celular deitado): sobra largura para Social Media voltar ao lado
   do Contato, que ainda fica com 200+ (endereço em três linhas). */
@media (min-width: 600px) and (max-width: 767px) {
	.vp-footer__nav {
		grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto;
	}

	.vp-footer__col--social {
		grid-column: auto;
	}
}

/* Abaixo de 360 Menu e Contato não cabem lado a lado: empilham. */
@media (max-width: 359px) {
	.vp-footer__nav {
		grid-template-columns: minmax(0, 1fr);
	}
}