/**
 * Home Vitta Materna
 * ---------------------------------------------------------------------------
 * Princípio: base branca com blocos de cor FLUTUANDO sobre ela.
 * Nenhuma seção sangra de borda a borda — nem o hero. O ritmo do scroll vem da
 * alternância entre respiro branco e blocos coloridos.
 *
 * Escopo: tudo sob `.vitta-home` para não vazar no resto do tema (que é uma loja).
 * Estrutura herdada do LE CAMP (assimetria, blocos como container, transbordo);
 * cor e tipografia são 100% da marca Vitta.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */

body.vitta-home {
	/* Marca — valores MEDIDOS nos PNGs oficiais. Não aproximar. */
	--v-cream: #f6eee3;
	--v-wine: #820022;
	--v-blush: #f6c6ce; /* Só decorativo: 1.31:1 sobre creme, nunca texto. */
	/* Fundo da página. NÃO é branco puro: o creme da marca (#F6EEE3) sobre branco
	   duro estala; sobre este quase-branco a base inteira fica na mesma família
	   quente. Valor definido pelo cliente. */
	--v-page: #fcf7f0;

	/* Derivados da marca */
	--v-ink: #2a0e14; /* Vinho escurecido — fundo do hero. */
	--v-wine-soft: rgba(130, 0, 34, 0.55);
	--v-line: rgba(130, 0, 34, 0.14);

	/* Produto. **NÃO SÃO MAIS USADOS NA HOME** (v1.8.0): a seção dos produtos
	   voltou à paleta da marca depois de o azul ser reprovado duas vezes. Ficam
	   declarados porque são material das PÁGINAS de produto, que vêm a seguir.
	   O azul do Diário é MEDIDO no céu da arte da capa impressa (Capa Planner
	   Vita Mater.pdf) — deixou de ser cor inventada na v1.7.4. O verde do Vitta
	   Kids continua PENDENTE DE APROVAÇÃO até o material dele chegar. */
	--v-diario: #01203a;
	--v-kids: #1e4620;

	/* Layout
	   Referência do cliente: margem lateral ~2,7% do viewport (≈50px em 1884).
	   Por isso o cap é alto (1800) e o padding baixo — os dois somados é que
	   estavam empurrando o conteúdo 121px para dentro. */
	--v-max: 2000px;
	--v-pad: 20px;
	--v-gap: 80px; /* Entre seções. */
	--v-block-pad: 32px; /* Padding interno dos blocos de cor. */

	/* Raios: blocos de cor 32 · mídia e cards 16 · botões pill. */
	--v-r-block: 32px;
	--v-r-card: 16px;

	/* Tipografia */
	--v-display: "Fraunces", Georgia, "Times New Roman", serif;
	--v-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--v-icon-size: 22px;
	--vh-icon-knockout: var(--v-cream);

	/* Padrão da marca, extraído da arte oficial e convertido em máscara alfa,
	   para poder ser tingido (rosa sobre creme, creme sobre vinho). */
	--vh-pattern: url("../images/vitta/pattern.png");
}

@media (min-width: 768px) {
	body.vitta-home {
		--v-pad: 32px;
		--v-gap: 104px;
		--v-block-pad: 48px;
	}
}

@media (min-width: 1024px) {
	body.vitta-home {
		--v-pad: 44px;
		--v-gap: 128px;
		--v-block-pad: 64px;
	}
}

/* ---------------------------------------------------------------------------
 * Base
 *
 * OS RESETS NÃO ALCANÇAM AS PÁGINAS DA LOJA (v1.61.0). Carrinho, checkout,
 * minha conta, busca e 404 também carregam `vitta-home` no body — é o escopo do
 * design system, e é o que dá a elas a pílula de navegação e o rodapé da home
 * sem copiar CSS. Mas o conteúdo delas é o markup do WooCommerce, escrito sobre
 * o CSS do Noord: um `ul { padding: 0 }` ou `a { color: inherit }` aqui
 * desmontaria listas de pagamento, navegação da conta e links de formulário.
 *
 * Por isso os resets saem com `:not(:where(.vitta-loja))`. O `:where()` tem
 * especificidade ZERO, e o `:not()` herda a do argumento — então na home, no
 * Diário e no Kids cada reset continua exatamente (0,1,2) / (0,1,1), como antes,
 * e nenhuma regra que dependia de vencê-los muda de resultado. Os resets que o
 * CHROME precisa na loja estão em `vitta-loja.css`, escopados nele.
 * ------------------------------------------------------------------------- */

body.vitta-home:not(:where(.vitta-loja)) {
	margin: 0;
	background: var(--v-page);
	color: var(--v-wine);
	font-family: var(--v-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/* NÃO pôr `overflow-x` aqui. O `main.css` já faz `html { overflow-x: clip }`,
	   e `clip` na raiz DESLIGA a propagação do overflow do body para a viewport.
	   Com isso, qualquer overflow no body vira um segundo contêiner de rolagem
	   (o outro eixo passa a `auto` por especificação) => DUAS barras de rolagem. */
}

body.vitta-home:not(:where(.vitta-loja)) *,
body.vitta-home:not(:where(.vitta-loja)) *::before,
body.vitta-home:not(:where(.vitta-loja)) *::after {
	box-sizing: border-box;
}

body.vitta-home:not(:where(.vitta-loja)) img,
body.vitta-home:not(:where(.vitta-loja)) video {
	display: block;
	max-width: 100%;
}

body.vitta-home:not(:where(.vitta-loja)) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vitta-home:not(:where(.vitta-loja)) a {
	color: inherit;
	text-decoration: none;
}

body.vitta-home:not(:where(.vitta-loja)) :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

.vh-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--v-wine);
	color: var(--v-cream);
	padding: 12px 20px;
	border-radius: 0 0 12px 0;
}

.vh-skip:focus {
	left: 0;
}

.vh-container {
	width: 100%;
	max-width: var(--v-max);
	margin: 0 auto;
	padding: 0 var(--v-pad);
}

.vh-section {
	margin-top: var(--v-gap);
}

.vh-main > .vh-section:first-child {
	margin-top: clamp(56px, 8vw, 96px);
}

/* ---------------------------------------------------------------------------
 * Tipografia
 *
 * ATENÇÃO à especificidade: `Noord_Typography` imprime inline no wp_head
 *   body.skin-editorial h1,…,h6 { font-family; font-weight }
 *   body.skin-editorial h1      { font-size }
 * Isso é (0,1,2) e vence uma classe sozinha (0,1,0). O <body> da home carrega
 * as duas classes (skin-editorial + vitta-home), então toda regra de tipo que
 * caia sobre h1/h2/h3 precisa de `body.vitta-home` no seletor para chegar a
 * (0,2,1) e vencer. Não é firula: sem isso os títulos voltam a Inter 700.
 * ------------------------------------------------------------------------- */

/* Títulos de seção: CAIXA BAIXA, peso alto, corpo grande.
   Não é moda — é o próprio logo: "vitta materna" é todo minúsculo e mistura
   serifada itálica com slab pesada. Os títulos passam a falar a mesma língua.
   SOFT/WONK são eixos do Fraunces: arredondam terminais e ligam os alternados
   quebrados; sem eles ele vira só mais um serif de tela. */
body.vitta-home .vh-h2 {
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.5rem);
	line-height: 0.98;
	letter-spacing: -0.032em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
	margin: 0;
	text-wrap: balance;
}

body.vitta-home .vh-h2--center {
	text-align: center;
	margin-inline: auto;
	max-width: 18ch;
}

.vh-lede {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--v-wine-soft);
	margin: 16px 0 0;
	max-width: 46ch;
}

.vh-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v-wine-soft);
	margin-bottom: 14px;
}

/* Cabeçalho de seção — só dois padrões: centralizado (números) e à esquerda. */
.vh-head {
	margin-bottom: 48px;
}

.vh-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.vh-head__text {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Componentes
 * ------------------------------------------------------------------------- */

.vh-icon {
	width: var(--v-icon-size);
	height: var(--v-icon-size);
	fill: currentColor;
}

/* Logo como máscara: um único asset serve vinho sobre creme e creme sobre vinho. */
.vh-logo {
	display: block;
	background-color: currentColor;
	-webkit-mask-image: var(--vh-logo-src);
	mask-image: var(--vh-logo-src);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	aspect-ratio: 1400 / 487;
}

.vh-logo--nav {
	width: clamp(116px, 14vw, 156px);
}

.vh-logo--footer {
	width: clamp(150px, 20vw, 232px);
}

.vh-logo--light {
	color: var(--v-cream);
}

/* Botões — só três tipos. Não existe secundário com contorno. */
.vh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 28px;
	border-radius: 999px;
	font-family: var(--v-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	border: 0;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* O tema tem `body.vitta-home a { color: inherit }` (0,1,1), que vence uma classe
   sozinha. Por isso as variantes de botão precisam do body no seletor. */
body.vitta-home .vh-btn--primary {
	background: var(--v-cream);
	color: var(--v-wine);
}

body.vitta-home .vh-btn--onDark {
	background: var(--v-cream);
	color: var(--v-wine);
	align-self: flex-start;
}


/* ===========================================================================
   ALTO-RELEVO NOS BOTOES — 09/09/2026
   ===========================================================================

   Pedido dele para o SITE INTEIRO: *"quero todos os botoes do site tbm com esse
   efeito de parecendo estar em alto relevo (...) nao e pra alterar cor dos
   botoes, apenas o estilo."*

   O degrau e um `inset` preto com alfa na aresta de baixo: nasce como uma versao
   mais escura da PROPRIA cor do botao, entao vale para qualquer cor e nao
   introduz cor nova nenhuma no projeto. `:active` afunda e encolhe o degrau.

   O mesmo bloco existe em vitta-kids.css, vitta-home.css, vitta-diario.css e
   vitta-loja.css — as quatro paginas nao compartilham folha de estilo. Mexer no
   efeito e mexer nos quatro.
   =========================================================================== */
body.vitta-home .vh-btn {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(130, 0, 34, .12);
}
body.vitta-home .vh-btn:active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(130, 0, 34, .12);
}

.vh-btn:hover {
	transform: translateY(-2px);
}

.vh-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid var(--v-line);
	background: transparent;
	color: var(--v-wine);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.vh-arrow:hover:not(:disabled) {
	background: var(--v-wine);
	color: var(--v-cream);
}

.vh-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.vh-arrow[data-carousel-prev] .vh-icon {
	transform: rotate(180deg);
}

/* Placeholders de imagem — creme com o padrão da marca e rótulo do que entra ali. */
.vh-ph {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--v-r-card);
	background-color: var(--v-cream);
	/* Sem a linha, o placeholder some quando está dentro de um bloco bege
	   (seção da Fernanda) — bege sobre bege. */
	box-shadow: inset 0 0 0 1px var(--v-line);
}

.vh-ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--v-blush);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: 340px;
	mask-size: 340px;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.75;
}

.vh-ph__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 10px 14px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--v-wine-soft);
}

/* Foto de verdade: entra DENTRO do `.vh-ph`, que continua sendo a moldura. A `<img>`
   é absoluta de propósito — como elemento de fluxo ela traria tamanho intrínseco e
   `height: 100%` num item de grid `stretch` viraria referência circular. */
.vh-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Com foto, o fundo do placeholder (padrão da marca + filete) só apareceria nas
   bordas em telas onde o recorte não fecha. Some. */
.vh-ph--filled {
	background-color: transparent;
	box-shadow: none;
}

.vh-ph--filled::before {
	display: none;
}

.vh-ph--16x9 {
	aspect-ratio: 16 / 9;
}

.vh-ph--1x1 {
	aspect-ratio: 1 / 1;
}

.vh-ph--3x4 {
	aspect-ratio: 3 / 4;
}

.vh-ph--3x2 {
	aspect-ratio: 3 / 2;
}

/* ---------------------------------------------------------------------------
 * 1. Hero — o vídeo encolhe no scroll e DESCOBRE o texto
 *
 * Técnica "pin + scrub", sem biblioteca:
 *   - `.vh-hero` é um TRILHO alto (`--vh-runway`): é ele que dá o "tempo de scroll".
 *   - `.vh-hero__stage` é `position: sticky` e gruda na tela enquanto o trilho passa.
 *     Um único sticky, com as camadas absolutas dentro — mais previsível que dois
 *     irmãos sticky, cujo alcance depende da posição de cada um no fluxo.
 *   - O JS escreve UMA custom property, `--p` (0 → 1), no `.vh-hero`. Toda a
 *     geometria abaixo é `calc()` sobre ela: os números ficam num lugar só, em CSS,
 *     e continuam editáveis sem tocar no JS.
 *
 * O `<video>` NÃO é redimensionado: fica fixo em 100vw × 100svh, centrado, e quem
 * encolhe é o wrapper, que recorta. É isso que impede a imagem de distorcer.
 *
 * O media é ancorado à ESQUERDA: encolher a largura já produz o deslizamento para
 * a esquerda, sem `translateX` em `vw` (que estouraria a horizontal em tela estreita).
 *
 * O texto NÃO anima. Ele está no lugar final desde o primeiro frame, atrás do vídeo;
 * a revelação é 100% óptica.
 *
 * A NAV PERTENCE AO VÍDEO (v1.5.2). Ela não fica numa faixa da página: fica dentro
 * do vídeo, e acompanha a largura (`--vh-w`) e o deslocamento (`--vh-y`) dele. Esse é
 * o único arranjo em que a cor da nav pode ser constante — creme, sempre sobre o
 * vídeo. Qualquer alternativa (nav na página, cor interpolada por `--p`, ou recorte
 * da nav pelo retângulo do vídeo) tem o mesmo defeito: DURANTE o scrub a borda do
 * vídeo atravessa a nav, e ela fica metade sobre vídeo, metade sobre branco — sem
 * cor que sirva, ou com a linha de corte cruzando as letras. Colar a nav no vídeo
 * elimina o estado ambíguo em vez de tentar pintá-lo.
 *
 * O scrim de topo é o que garante o contraste: a vinheta tem frames claros, e creme
 * sobre eles some. Ele encolhe junto com o vídeo (está dentro do wrapper).
 * ------------------------------------------------------------------------- */

.vh-hero {
	/* --- Os únicos números do efeito ---------------------------------- */
	--vh-runway: 200svh; /* Altura do trilho. Mais alto = efeito mais lento. */
	--vh-scrub-end: 0.8; /* Fração do trilho em que o efeito termina; o resto segura. */

	--vh-x: 2vw; /* Âncora esquerda, constante. */
	--vh-top: 2.5svh; /* Folga acima do vídeo no início — quase colado no topo. */

	--vh-w0: 96vw; /* Largura inicial (quase fullscreen). */
	--vh-w1: clamp(500px, 52vw, 880px); /* Largura final. */

	--vh-h0: 95svh;
	/* Altura final DERIVADA da largura: 16:9 exato em qualquer tela. É isso que
	   mantém o formato widescreen sem precisar acertar svh na mão a cada breakpoint. */
	--vh-h1: calc(var(--vh-w1) * 0.5625);

	--vh-y0: 0px;
	/* Centra o vídeo final na vertical, seja qual for a altura da janela. */
	--vh-y1: calc((100svh - var(--vh-h1)) / 2 - var(--vh-top));

	--p: 0;

	/* Saída da nav do hero: 0 → 1 no PRIMEIRO QUARTO do scrub. A nav some bem antes
	   de o vídeo terminar de encolher — quem assume a navegação daí em diante é a
	   barra fixa (§1b), e as duas nunca dividem a tela. */
	--vh-navout: clamp(0, calc(var(--p) * 4), 1);

	/* --- Interpolação linear ------------------------------------------ */
	--vh-w: calc(var(--vh-w0) + (var(--vh-w1) - var(--vh-w0)) * var(--p));
	--vh-h: calc(var(--vh-h0) + (var(--vh-h1) - var(--vh-h0)) * var(--p));
	--vh-y: calc(var(--vh-y0) + (var(--vh-y1) - var(--vh-y0)) * var(--p));

	position: relative;
	height: var(--vh-runway);
	background: var(--v-page);
	color: var(--v-wine);
}

/* Movimento reduzido: sem trilho e sem scrub — entrega direto o estado final. */
@media (prefers-reduced-motion: reduce) {
	.vh-hero {
		--vh-runway: 100svh;
		--p: 1;
	}

	/* Sem scrub a barra fixa nasce visível e é O menu da página; manter também a
	   nav do hero deixaria as duas empilhadas no topo. */
	.vh-hero__top {
		display: none;
	}
}

.vh-hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

/* --- Camada do texto: imóvel, descoberta pelo vídeo ---------------------- */

.vh-hero__reveal {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* CENTRO em todas as larguras desde 10/09/2026 — no celular ele pediu o bloco
	   centralizado (era `flex-start`, alinhado à esquerda no empilhado). O
	   recheio horizontal é simétrico (6vw dos dois lados), então centralizar no
	   content box é centralizar na tela. */
	align-items: center;
	/* Encostado na faixa que sobra ao lado do vídeo no estado final. Repare que usa
	   `--vh-w1` (constante), não `--vh-w`: o texto não pode se mexer durante o scrub. */
	padding: calc(var(--vh-top) + var(--vh-y1) + var(--vh-h1) + 5svh) 6vw 4svh;
}

/* Logo e headline andam juntos: o grupo encolhe até a largura da headline e é
   ELE que é centralizado na faixa (desktop). O alinhamento à esquerda entre os
   dois é interno ao grupo e não muda. */
.vh-hero__group {
	display: flex;
	flex-direction: column;
	/* Logo e headline no MESMO eixo, em todas as larguras (10/09/2026; antes só
	   no desktop). */
	align-items: center;
	gap: clamp(22px, 3.6svh, 44px);
	/* Obrigatório: o grupo é um item flex com largura de conteúdo, então ele passa
	   por cima da faixa em desktop estreito — e o `max-width: 100%` da headline
	   resolve contra o GRUPO, não contra a faixa, então sozinho ele não segura
	   nada. Sem esta linha o texto encosta no vídeo a 920px (medido: -1px). */
	max-width: 100%;
}

.vh-logo--hero {
	width: clamp(150px, 34vw, 200px);
}

body.vitta-home .vh-hero__title {
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: clamp(2.375rem, 1rem + 5.2vw, 4.5rem);
	line-height: 0.94;
	letter-spacing: -0.035em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	/* O tema tem `h1,h2,h3 { color: var(--color-text) }`. Regra de elemento vence
	   a herança, então a cor precisa ser declarada — não basta herdar do bloco. */
	color: var(--v-wine);
	margin: 0;
	/* Resolve a segunda linha ("mães reais"), que sem isto ficaria encostada à
	   esquerda da primeira. Em todas as larguras desde 10/09/2026. */
	text-align: center;
	/* ARMADILHA que custou uma rodada: a caixa de um texto que quebra NÃO encolhe
	   até a linha mais longa — ela fica na largura máxima (era `max-width: 14ch`),
	   e sobravam 190px de vazio INVISÍVEL à direita. Centralizar o bloco não mexia
	   nada na tela porque a caixa já ocupava a faixa inteira.
	   Com a quebra explícita no markup, `max-content` vira a linha mais longa e a
	   caixa cola no texto. O `max-width: 100%` segura o caso em que nem essa linha
	   cabe (desktop estreito), onde o texto volta a quebrar sozinho. */
	width: max-content;
	max-width: 100%;
}

/* --- Camada do vídeo: a única que anima ---------------------------------- */

.vh-hero__media {
	position: absolute;
	z-index: 3;
	left: var(--vh-x);
	top: var(--vh-top);
	width: var(--vh-w);
	height: var(--vh-h);
	transform: translate3d(0, var(--vh-y), 0);
	border-radius: var(--v-r-block);
	overflow: hidden;
	background: var(--v-ink);
	will-change: width, height, transform;
	contain: paint;
}

/* Tamanho FIXO de tela cheia: o wrapper recorta, o vídeo não deforma. */
.vh-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100svh;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* Sem vinheta ainda: arte de marca no lugar do vídeo. */
.vh-hero__art {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 8%, rgba(130, 0, 34, 0.55) 0%, transparent 62%),
		linear-gradient(180deg, #3a1119 0%, var(--v-ink) 58%, #1d090e 100%);
}

.vh-hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--v-cream);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.07;
}

/* Obrigatório, não decorativo: a vinheta tem frames claros e a nav creme sumiria
   sobre eles. Vive dentro do wrapper, então encolhe junto com o vídeo. */
.vh-hero__scrim {
	position: absolute;
	inset: 0 0 auto;
	height: 42%;
	/* Existe só para a nav creme não sumir em frames claros. Sai junto com ela,
	   e o vídeo termina o scrub sem nenhuma camada por cima. */
	opacity: calc(1 - var(--vh-navout));
	background: linear-gradient(180deg, rgba(20, 5, 9, 0.62) 0%, rgba(20, 5, 9, 0.24) 46%, transparent 100%);
}

/* --- Nav: mora DENTRO do vídeo e se move com ele ------------------------- */

.vh-hero__top {
	position: absolute;
	z-index: 4;
	left: var(--vh-x);
	top: var(--vh-top);
	width: var(--vh-w);
	/* Sobe 28px enquanto se apaga — o `translate` do vídeo continua somando, então
	   ela sai "por cima" do movimento dele em vez de brigar com ele. */
	transform: translate3d(0, calc(var(--vh-y) - var(--vh-navout) * 28px), 0);
	padding: clamp(14px, 2.4svh, 26px) clamp(18px, 2.2vw, 34px) 0;
	color: var(--v-cream);
	opacity: calc(1 - var(--vh-navout));
}

/* `opacity: 0` não tira o elemento do caminho do clique nem do foco; o JS marca
   a classe quando a nav termina de sair (`HeroScrub`). */
.vh-hero.is-navhidden .vh-hero__top {
	visibility: hidden;
}

.vh-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 2vw, 24px);
}

.vh-nav__links {
	display: none;
	gap: clamp(14px, 1.9vw, 32px);
}

.vh-nav__link {
	font-size: clamp(0.8125rem, 0.72rem + 0.28vw, 0.9375rem);
	font-weight: 500;
	white-space: nowrap;
	color: var(--v-cream);
	opacity: 0.88;
	transition: opacity 0.2s ease;
}

.vh-nav__link:hover {
	opacity: 1;
}

.vh-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	color: var(--v-cream);
	cursor: pointer;
}

.vh-nav__bars,
.vh-nav__bars::before,
.vh-nav__bars::after {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.vh-nav__bars::before,
.vh-nav__bars::after {
	content: "";
	position: relative;
}

.vh-nav__bars::before {
	top: -7px;
}

.vh-nav__bars::after {
	top: 5.5px;
}

.vh-nav__toggle[aria-expanded="true"] .vh-nav__bars {
	background: transparent;
}

.vh-nav__toggle[aria-expanded="true"] .vh-nav__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.vh-nav__toggle[aria-expanded="true"] .vh-nav__bars::after {
	transform: translateY(-5.5px) rotate(-45deg);
}

.vh-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 0 4px;
}

.vh-menu[hidden] {
	display: none;
}

.vh-menu__link {
	padding: 10px 0;
	font-family: var(--v-display);
	font-size: 1.375rem;
	color: var(--v-cream);
}

/* --- Desktop: o vídeo desliza para a ESQUERDA, o texto fica à direita ---- */

@media (min-width: 900px) {
	/* Coluna encostada à direita do vídeo, texto alinhado à esquerda: a headline lê
	   melhor com a margem esquerda reta. `--vh-w1` (não `--vh-w`) porque o texto tem
	   de ficar parado — no estado inicial ele já está aqui, só que coberto. */
	.vh-hero__reveal {
		align-items: center;
		/* O recuo da direita é o MESMO da folga contra o vídeo: com a faixa inset
		   igual dos dois lados, centralizar no content box = centralizar na faixa. */
		padding: 0 clamp(32px, 3.5vw, 64px) 0
			calc(var(--vh-x) + var(--vh-w1) + clamp(32px, 3.5vw, 64px));
	}

	/* Rampa mais suave que a do empilhado (lá é `1rem + 5.2vw`): no desktop a linha
	   mais longa da headline precisa CABER na faixa ao lado do vídeo. Com a rampa
	   original, entre 900 e 1385 ela estourava, a headline quebrava em três linhas
	   com um "para" órfão — e aí não sobra nada para centralizar. Mesmo teto de
	   4,5rem, alcançado a partir de ~1455px. */
	/* A centralização do grupo (logo + as duas linhas) subiu para a base em
	   10/09/2026 e vale para o empilhado também — aqui sobra só a rampa. */
	body.vitta-home .vh-hero__title {
		font-size: clamp(2.375rem, 1.05rem + 3.8vw, 4.5rem);
	}

	.vh-logo--hero {
		width: clamp(180px, 15vw, 260px);
	}

	.vh-nav__links {
		display: flex;
	}

	.vh-nav__toggle,
	.vh-menu {
		display: none !important;
	}
}

/* --- Mobile: o vídeo encolhe PARA CIMA e o texto aparece embaixo --------- */

@media (max-width: 899px) {
	.vh-hero {
		--vh-runway: 180svh;
		--vh-top: 2svh;
		--vh-w0: 96vw;
		--vh-w1: 96vw; /* Largura não muda: só a altura recolhe. */
		--vh-h0: 92svh;
		/* 3:2 em vez do 16:9 do desktop: numa tela estreita, 16:9 dá um vídeo de
		   ~210px de altura — some no meio de 844px de viewport. */
		--vh-h1: calc(var(--vh-w1) * 0.68);
		--vh-y1: 6svh;
	}
}
/* ---------------------------------------------------------------------------
 * 1b. Barra de navegação fixa
 *
 * Entra em cena quando o hero sai. Enquanto o hero está na tela quem navega é a
 * nav do vídeo — as duas nunca aparecem juntas, então não competem.
 *
 * Desenho: uma PÍLULA FLUTUANTE de creme, não uma faixa de borda a borda. É o
 * mesmo princípio da home ("blocos flutuando sobre base branca") aplicado ao
 * chrome: a barra é um bloco, não uma moldura. O fundo é creme translúcido com
 * `backdrop-filter`, então o conteúdo da página aparece por trás dela — a barra
 * pesa pouco mesmo estando sempre presente.
 *
 * Detalhes que fazem o tom da marca (acolhimento, delicadeza):
 *   - contorno de 1px em vinho a 10%: presença sem contraste duro;
 *   - filete vertical separando a marca dos links, em vez de um vão vazio;
 *   - hover preenche uma pílula em vinho suave — o link "acende", não sublinha;
 *   - a entrada é sobe + revela + desfoca: `filter: blur()` saindo de 6px faz o
 *     elemento "materializar" em vez de simplesmente piscar. É o que dá a
 *     sensação de suavidade que um fade sozinho não dá.
 * ------------------------------------------------------------------------- */

/* Os destinos do menu precisam parar ABAIXO da pílula flutuante, senão o
   título da seção nasce escondido atrás dela. Vale para todo alvo de âncora da
   home — o cálculo é a altura da pílula mais o recheio da barra e uma folga. */
.vh-section[id],
[id="episodios"],
[id="diario"],
[id="vitta-kids"] {
	scroll-margin-top: calc(clamp(14px, 2.2svh, 26px) * 2 + 56px + 16px);
}

.vh-bar {
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: clamp(14px, 2.2svh, 26px) var(--v-pad);
	/* A barra é só o trilho; quem recebe clique são os blocos dentro dela. */
	pointer-events: none;

	/* Estado oculto. `visibility` entra na transição com atraso para que o foco do
	   teclado não caia dentro da barra enquanto ela está invisível. */
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -14px, 0) scale(0.97);
	filter: blur(6px);
	transition:
		opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
		filter 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s linear 0.55s;
}

.vh-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	filter: none;
	transition-delay: 0s;
}

.vh-bar__inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.5vw, 24px);
	max-width: 100%;
	padding: 10px 12px 10px clamp(20px, 1.9vw, 30px);
	border: 1px solid rgba(130, 0, 34, 0.1);
	border-radius: 999px;
	background: rgba(246, 238, 227, 0.82);
	-webkit-backdrop-filter: blur(16px) saturate(1.25);
	backdrop-filter: blur(16px) saturate(1.25);
	box-shadow:
		0 1px 2px rgba(42, 14, 20, 0.04),
		0 18px 42px -16px rgba(42, 14, 20, 0.24);
}

.vh-bar__brand {
	display: flex;
	flex: 0 0 auto;
}

.vh-logo--bar {
	width: clamp(96px, 8.6vw, 126px);
	color: var(--v-wine);
}

/* Filete: separa marca e links sem abrir um vão. */
.vh-bar__rule {
	flex: 0 0 auto;
	width: 1px;
	height: 30px;
	background: rgba(130, 0, 34, 0.16);
}

.vh-bar__links {
	display: none;
	align-items: center;
	gap: 2px;
}

body.vitta-home .vh-bar__link {
	padding: 12px clamp(15px, 1.2vw, 21px);
	border-radius: 999px;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--v-wine);
	transition: background-color 0.28s ease, color 0.28s ease;
}

body.vitta-home .vh-bar__link:hover,
body.vitta-home .vh-bar__link:focus-visible {
	background: rgba(130, 0, 34, 0.09);
}

/* --- Mobile: pílula com marca + botão, painel logo abaixo ---------------- */

.vh-bar__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--v-wine);
	cursor: pointer;
	transition: background-color 0.28s ease;
}

.vh-bar__toggle:hover {
	background: rgba(130, 0, 34, 0.09);
}

.vh-bar__panel {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	width: min(360px, 100%);
	padding: 12px;
	border: 1px solid rgba(130, 0, 34, 0.1);
	border-radius: 28px;
	background: rgba(246, 238, 227, 0.94);
	-webkit-backdrop-filter: blur(16px) saturate(1.25);
	backdrop-filter: blur(16px) saturate(1.25);
	box-shadow: 0 18px 40px -16px rgba(42, 14, 20, 0.28);
}

.vh-bar__panel[hidden] {
	display: none;
}

body.vitta-home .vh-bar__panellink {
	padding: 15px 18px;
	border-radius: 18px;
	font-family: var(--v-display);
	font-size: 1.25rem;
	color: var(--v-wine);
	transition: background-color 0.28s ease;
}

body.vitta-home .vh-bar__panellink:hover {
	background: rgba(130, 0, 34, 0.09);
}

@media (min-width: 900px) {
	.vh-bar__links {
		display: flex;
	}

	.vh-bar__toggle,
	.vh-bar__panel {
		display: none !important;
	}
}

/* Sem `backdrop-filter` (Firefox com a flag desligada, navegador antigo): o creme
   translúcido viraria um borrão ilegível sobre texto. Fica opaco. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.vh-bar__inner,
	.vh-bar__panel {
		background: var(--v-cream);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vh-bar {
		transform: none;
		filter: none;
		transition: opacity 0.2s linear, visibility 0s linear 0.2s;
	}

	.vh-bar.is-visible {
		transition-delay: 0s;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Faixa de números
 *
 * Estrutura da referência aprovada (stat cards do Caldera): 4 cards SEPARADOS no
 * topo e LIGADOS na base. O truque são três camadas:
 *
 *   1. `.vh-numbers__band::after` — barra vinho contínua, do fundo até `--vh-notch`;
 *      é ela que liga um card ao outro.
 *   2. `.vh-stat` — os cards, opacos, por cima da barra.
 *   3. `.vh-stat + .vh-stat::before` — o entalhe em U que reabre o vão, mas só no
 *      topo. Fundo branco, base arredondada.
 *
 * Só vale de 900px para cima; abaixo disso a faixa vira 2×2 solto, como aprovado.
 * ------------------------------------------------------------------------- */

.vh-numbers__inner {
	/* Faixa deliberadamente MAIS ESTREITA que o resto da página — na referência
	   ela ocupa ~62% do viewport contra ~97% do rodapé. 1160px dá cards de 275px,
	   exatamente a medida da referência. */
	width: 100%;
	/* O conteúdo é que tem de dar 1160px (= cards de 275, a medida da referência);
	   por isso o padding entra por fora, não por dentro do teto. */
	max-width: calc(1160px + var(--v-pad) * 2);
	margin: 0 auto;
	padding: 0 var(--v-pad);
}

/* `body.vitta-home ul { margin: 0 }` é (0,1,1) e vence a classe sozinha (0,1,0):
   sem o body no seletor a faixa cola na headline. Mesma família das armadilhas
   de especificidade já documentadas. */
/* --- Título da faixa: o tratamento especial ------------------------------- */

body.vitta-home .vh-numbers__title {
	font-size: clamp(2.5rem, 0.9rem + 5.8vw, 5.75rem);
	line-height: 0.92;
	letter-spacing: -0.042em;
	max-width: 15ch;
	margin-bottom: 0;
}

/* "milhões" em Fraunces ITÁLICO e MAIS LEVE que o resto do título (500 contra os
   700 do `.vh-h2`) — o mesmo contraste do logo, onde "vitta" é serifada itálica e
   "materna" é slab pesada. É a palavra que carrega o sentido da frase, então é ela
   que ganha a voz diferente. O peso menor também abre espaço para o marca-texto:
   traço grosso atrás de letra pesada vira mancha. */
.vh-word--accent {
	position: relative;
	font-style: italic;
	font-weight: 500;
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* --- Marca-texto rabiscado atrás de "milhões" --------------------------- */

/* O `.vh-word` recorta (`overflow: hidden`) para a palavra subir de dentro de uma
   máscara. O traço passa das bordas da palavra de propósito — como um marcador
   passado à mão —, então a palavra marcada precisa de um recorte mais largo. */
.vh-word--mark {
	padding-inline: 0.3em;
	margin-inline: -0.3em;
}

.vh-mark {
	position: absolute;
	/* Atrás do texto do próprio elemento. O `.vh-word__in` recebe `transform` na
	   entrada, o que já cria contexto de empilhamento — o `-1` fica contido nele. */
	z-index: -1;
	/* Cobre a altura-x da palavra, não a caixa inteira da linha: um marcador passa
	   por cima das letras, não por cima do espaço entre as linhas. E transborda nos
	   lados, como um traço feito à mão. */
	inset: 0.34em -0.2em -0.04em -0.18em;
}

/* Quem estica é o `<span>` acima, não o `<svg>`. `<svg>` é elemento SUBSTITUÍDO:
   absolutamente posicionado ele ignora o esticamento entre `left` e `right`, e até
   `width: calc(100% + …)` resolveu o percentual contra uma caixa errada (medido:
   247,6px onde o esperado era 283). Com o span no meio, o SVG só preenche 100%. */
.vh-mark__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vh-mark__path {
	fill: none;
	stroke: var(--v-blush);
	/* Rosa da marca é `--v-blush`, que por regra NUNCA é texto (1.31:1 sobre creme).
	   Como FUNDO ele é exatamente o uso previsto: vinho sobre rosa dá 7.0:1. */
	stroke-width: 0.56em;
	stroke-linecap: round;
	/* Sem isso o `preserveAspectRatio="none"` esticaria também a espessura do traço,
	   e ela mudaria com a proporção da caixa da palavra. */
	vector-effect: non-scaling-stroke;
}

/* Fica por desenhar até o título entrar; `pathLength="1"` deixa o dash em 0→1. */
html.vh-js [data-words] .vh-mark__path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

html.vh-js [data-words].is-words .vh-mark__path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.78s cubic-bezier(0.32, 0.72, 0.3, 1);
	/* Depois da palavra pousar: rabiscar por cima de uma palavra que ainda está
	   subindo faz o traço parecer descolado dela. */
	transition-delay: calc(var(--vh-w) * var(--vh-step, 0.07s) + 0.5s);
}

@media (prefers-reduced-motion: reduce) {
	html.vh-js [data-words] .vh-mark__path {
		stroke-dashoffset: 0;
	}
}

/* Cada palavra sobe de dentro de uma máscara. O padding/margem negativa alarga a
   área de recorte para os acentos (o til de "milhões") não serem cortados. */
.vh-word {
	display: inline-block;
	overflow: hidden;
	padding: 0.18em 0.04em 0.12em;
	margin: -0.18em -0.04em -0.12em;
	vertical-align: bottom;
}

.vh-word__in {
	display: inline-block;
}

html.vh-js [data-words] .vh-word__in {
	opacity: 0;
	transform: translateY(115%);
}

html.vh-js [data-words].is-words .vh-word__in {
	opacity: 1;
	transform: none;
	transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
	transition-delay: calc(var(--vh-w) * var(--vh-step, 0.07s));
}

@media (prefers-reduced-motion: reduce) {
	html.vh-js [data-words] .vh-word__in {
		opacity: 1;
		transform: none;
	}
}

/* Dígitos de largura fixa: sem isso o número treme enquanto a contagem roda. */
.vh-stat__num {
	font-variant-numeric: tabular-nums;
}

body.vitta-home .vh-numbers__band {
	position: relative;
	margin: clamp(40px, 4.5vw, 72px) 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.vh-stat {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 190px;
	padding: clamp(20px, 2.4vw, 32px);
	border-radius: var(--v-r-block);
	background: var(--v-wine);
	color: var(--v-cream);
}

.vh-stat__label {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	opacity: 0.88;
}

.vh-stat__value {
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 700;
	/* Na referência o número ocupa ~30% da altura do card — é ele que dá corpo à
	   metade de baixo. "550M" cabe numa linha; "3,2 milhões" não cabe nem perto.
	   Solução: duas linhas do MESMO corpo. O bloco fica com peso equivalente
	   (2 × ~50px = 40% da altura) sem encolher a tipografia.
	   Teto ditado por "milhões" (≈3,6em no peso 700) contra os 200px úteis. */
	font-size: clamp(1.5rem, 3.9vw, 3.25rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.vh-stat__num,
.vh-stat__unit {
	display: block;
}

@media (min-width: 900px) {
	body.vitta-home .vh-numbers__band {
		--vh-notch: 99px; /* 40% da altura em CADA lado -> ponte de ~50px no meio. */
		--vh-notch-gap: 24px;
		--vh-stat-r: 40px;

		grid-template-columns: repeat(4, 1fr);
		gap: var(--vh-notch-gap);
	}

	/* A PONTE que liga os cards — uma faixa no MEIO da altura, recuada dos dois
	   lados. Ela invade 14px cada entalhe para que as pontas arredondadas dos U
	   tenham o que recortar. Nas bordas externas fica escondida sob os cards. */
	body.vitta-home .vh-numbers__band::after {
		content: "";
		position: absolute;
		z-index: 0;
		left: 0;
		right: 0;
		top: calc(var(--vh-notch) - 14px);
		bottom: calc(var(--vh-notch) - 14px);
		background: var(--v-wine);
	}

	.vh-stat {
		min-height: 248px;
		/* Base maior que o topo: é o que põe o número a ~44px do fundo, como no
		   print. O `gap` da regra base (40px) empurrava o card para 254 e comia
		   esse respiro — aqui ele cede, porque `space-between` já distribui. */
		padding: 36px 36px 44px;
		gap: 24px;
		border-radius: var(--vh-stat-r);
	}

	/* DOIS entalhes em U por vão — um desce do topo, outro sobe da base. É isso
	   que deixa os cards ligados só pela ponte do meio. Com 24px de largura, o
	   raio 999px vira meia-circunferência na ponta de cada um. */
	.vh-stat + .vh-stat::before,
	.vh-stat + .vh-stat::after {
		content: "";
		position: absolute;
		left: calc(-1 * var(--vh-notch-gap));
		width: var(--vh-notch-gap);
		height: var(--vh-notch);
		background: var(--v-page);
	}

	.vh-stat + .vh-stat::before {
		top: 0;
		border-radius: 0 0 999px 999px;
	}

	.vh-stat + .vh-stat::after {
		bottom: 0;
		border-radius: 999px 999px 0 0;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Manifesto
 *
 * Estrutura da referência aprovada (bloco de texto da home do gsap.com): UMA
 * declaração em corpo grande ocupando a largura do bloco, alinhada à esquerda,
 * sem título acima e sem coluna estreita. O texto é a seção inteira.
 *
 * A hierarquia é feita por PESO, não por tamanho — as duas frases têm o mesmo
 * corpo. É o que mantém o bloco lendo como um parágrafo só, e não como
 * título + legenda.
 * ------------------------------------------------------------------------- */

.vh-manifesto__block {
	position: relative;
	overflow: hidden;
	border-radius: var(--v-r-block);
	background: var(--v-cream);
	padding: clamp(40px, 6.5vw, 112px) var(--v-block-pad);
}

.vh-manifesto__pattern {
	position: absolute;
	inset: 0;
	background-color: var(--v-blush);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.5;
}

/* Véu de creme por cima do padrão, denso à esquerda e transparente à direita:
   a tipografia grande ganha um campo calmo para se apoiar sem apagar o padrão,
   que continua respirando do lado que sobra. */
.vh-manifesto__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--v-cream) 0%,
		rgba(246, 238, 227, 0.86) 38%,
		rgba(246, 238, 227, 0.35) 66%,
		transparent 88%
	);
}

.vh-manifesto__body {
	position: relative;
	margin: 0;
	/* Teto para telas muito largas: sem ele a linha passa de 30 palavras e a
	   leitura quebra, mesmo com o corpo grande. */
	max-width: min(100%, 1180px);
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-size: clamp(1.75rem, 0.95rem + 3.1vw, 4rem);
	line-height: 1.14;
	letter-spacing: -0.025em;
	/* Passo curto: são ~25 palavras. Com os 0,07s do título da faixa de números
	   a última entraria quase dois segundos depois da primeira. */
	--vh-step: 0.035s;
}

/* A afirmação: peso cheio, cor cheia. */
.vh-mf__claim {
	font-weight: 600;
	font-variation-settings: "SOFT" 40, "WONK" 0;
	color: var(--v-wine);
}

/* A explicação: mesmo corpo, peso leve e cor recuada — lida depois, sem disputar
   com a afirmação. 66% do vinho sobre o creme ainda passa em contraste no corpo
   grande desta seção. */
.vh-mf__aside {
	font-weight: 300;
	font-variation-settings: "SOFT" 40, "WONK" 0;
	color: color-mix(in srgb, var(--v-wine) 66%, transparent);
}

/* Quebra de linha entre as duas frases, com respiro. `inline-block` não serve:
   as palavras precisam continuar fluindo como texto corrido dentro de cada uma.
   `balance` distribui as linhas: sem ele a 1ª frase deixava "mulher." sozinha na
   segunda linha, e é justamente a palavra que fecha o sentido. */
.vh-mf__claim,
.vh-mf__aside {
	display: block;
	text-wrap: pretty;
}

.vh-mf__aside {
	margin-top: 0.42em;
}

/* ---------------------------------------------------------------------------
 * 4. Episódios
 *
 * Estrutura da referência aprovada (carrossel "News" do Caldera). Proporções
 * medidas no print (viewport 1899): card 562 x 527 · padding 16 · imagem 16:9
 * com raio 12 · texto recuado mais 12 · imagem→tag 34 · tag→título 20 ·
 * título→data 24 · data→base 29 · setas numa pílula de 111 x 48.
 * ------------------------------------------------------------------------- */

.vh-episodes {
	--vh-ep-gap: 20px;
}

/* Setas numa PÍLULA ÚNICA com divisor, não em dois círculos soltos. */
.vh-navpill {
	/* Abaixo de 768 o gesto de arrastar basta — era assim antes da pílula e
	   continua sendo. */
	display: none;
	align-items: center;
	flex: 0 0 auto;
	padding: 4px;
	border-radius: 999px;
	/* Pontilhada, como na referência. */
	border: 1px dotted var(--v-line);
}

@media (min-width: 768px) {
	.vh-navpill {
		display: inline-flex;
	}
}

.vh-navpill__divider {
	width: 1px;
	height: 20px;
	background: var(--v-line);
}

.vh-episodes .vh-arrow {
	width: 48px;
	height: 40px;
	border: 0;
	border-radius: 999px;
}

/* --- Carrossel: SANGRA para fora do container ---------------------------- */

.vh-carousel {
	position: relative;
	margin-top: 40px;
	/* CORREÇÃO 2026-09-04, defeito ANTIGO e não relacionado aos episódios reais:
	   a PÁGINA rolava 1776px na horizontal. O track é o scroller (`overflow-x:
	   auto`), mas a largura dele vazava para o overflow de layout dos ancestrais
	   — `main` e `section` chegavam a `scrollWidth: 3216` num viewport de 1440.
	   `clip` só no eixo X para o hover dos cards (que sobem 4px) continuar
	   aparecendo. Medido: página volta a 1440, `scrollX` fica em 0 e o carrossel
	   continua rolando (snap em 437, seta leva a 874). */
	overflow-x: clip;
}

/* O track é um <ul>, e `body.vitta-home ul { padding: 0 }` é (0,1,1): sem o body
   no seletor ele zera o `padding-inline` daqui e o 1º card cola na borda da tela
   em vez de alinhar com o título. Mesma armadilha da faixa de números. */
body.vitta-home .vh-carousel__track {
	display: flex;
	gap: var(--vh-ep-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
	/* Alinha o 1º card com o título mesmo o track sendo full-bleed. O `max()`
	   cobre telas mais largas que `--v-max`, onde o container passa a centralizar.
	   Sem `vw` de propósito: `vw` inclui a barra de rolagem e desalinharia. */
	padding-inline: max(var(--v-pad), calc((100% - var(--v-max)) / 2 + var(--v-pad)));
	scroll-padding-inline-start: max(var(--v-pad), calc((100% - var(--v-max)) / 2 + var(--v-pad)));
}

.vh-carousel__track::-webkit-scrollbar {
	display: none;
}

/* 3,25 cards à vista: três inteiros + o quarto espiando na borda, como no print
   (lá sobram ~125px do próximo card). */
.vh-ep {
	flex: 0 0 82%;
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.vh-ep {
		flex-basis: calc((100% - 2 * var(--vh-ep-gap)) / 2.15);
	}
}

@media (min-width: 1024px) {
	.vh-ep {
		flex-basis: calc((100% - 3 * var(--vh-ep-gap)) / 3.1);
	}
}

/* --- Card ---------------------------------------------------------------- */

.vh-ep__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	border-radius: 20px;
	background: var(--v-cream);
	transition: transform 0.3s ease;
}

.vh-ep__card:hover {
	transform: translateY(-4px);
}

/* Desde 2026-09-04 a miniatura é a REAL do vídeo (960px, servida daqui e não
   do i.ytimg.com). O `aspect-ratio` vive na caixa e não na imagem para o card
   não pular enquanto a foto carrega. */
.vh-ep__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	/* Vinho a 7% enquanto a imagem não pinta: sem um tom próprio a caixa se
	   funde com o creme do card. */
	background: linear-gradient(rgba(130, 0, 34, 0.07), rgba(130, 0, 34, 0.07));
}

/* `body.vitta-home img` é (0,1,1) e vence classe sozinha — o seletor precisa do
   body para o recorte pegar. */
body.vitta-home .vh-ep__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* O glifo do YouTube diz PARA ONDE o clique vai. Não é decoração: o destino é
   fora do site, e a regra da monetização exige que isso fique claro. */
.vh-ep__play {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	--vh-icon-knockout: var(--v-cream);
	box-shadow: rgba(42, 14, 20, 0.22) 0 6px 18px 0;
	transition: transform 0.3s ease;
}

.vh-ep__play .vh-icon {
	width: 22px;
	height: 22px;
}

.vh-ep__card:hover .vh-ep__play {
	transform: scale(1.08);
}

.vh-ep__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* 32/13 aqui + os 16 do card = 34 acima da tag e 29 abaixo da data, que são
	   as medidas do print. O padding do card soma ao daqui — fácil de esquecer. */
	padding: 32px 12px 13px;
}

/* Tag em pílula. O rosa é fundo, nunca texto: vinho sobre rosa dá 7,04:1 (AA).
   É o papel decorativo do rosa sendo usado como superfície. */
.vh-ep__tag {
	display: inline-block;
	/* O corpo do card virou flex-column, e item de flex estica no eixo cruzado:
	   sem isto a pílula ocupa a largura inteira do card. */
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--v-blush);
	color: var(--v-wine);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}

/* Duas linhas com reticências, como no print. */
.vh-ep__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 20px 0 24px;
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--v-wine);
}

.vh-ep__date {
	display: block;
	/* Cola a data na base: quando um título ocupa duas linhas e outro só uma,
	   as datas continuam alinhadas sem precisar reservar altura vazia. */
	margin-top: auto;
	font-size: 0.9375rem;
	color: var(--v-wine-soft);
}

/* --- Onde ouvir ---------------------------------------------------------- */

.vh-listen {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--v-line);
}

@media (min-width: 768px) {
	.vh-listen {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}
}

.vh-listen__text {
	margin: 0;
	font-size: 1rem;
	color: var(--v-wine-soft);
	max-width: 40ch;
}

.vh-listen__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* `body.vitta-home a { color: inherit }` (0,1,1) vence a classe sozinha — e como
   o ícone é `fill: currentColor`, sem o body no seletor ele herda a cor da seção
   e some dentro do círculo. */
body.vitta-home .vh-platform {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	transition: background-color 0.2s ease, color 0.2s ease;
	--vh-icon-knockout: var(--v-cream);
}

body.vitta-home .vh-platform:hover {
	background: var(--v-wine);
	color: var(--v-cream);
	--vh-icon-knockout: var(--v-wine);
}

/* ---------------------------------------------------------------------------
 * 5. Convidadas — carrossel de looping infinito
 *
 * Não é slider com setas: é uma FITA que corre sozinha, devagar, e não tem
 * começo nem fim. O trilho carrega N cópias idênticas da lista e anda a
 * largura de EXATAMENTE UMA cópia; como a cópia 2 chega no lugar onde a 1
 * estava, o `translateX` volta a zero sem que se veja o corte.
 *
 * Andar uma cópia, e não `-50%`, é o que faz o loop aguentar tela larga: com
 * `-50%` e duas cópias, a partir de ~1300px de container a volta terminava com
 * um VAZIO na borda direita — a metade que sobrava era mais estreita que a
 * janela. O PHP conta as cópias necessárias; o CSS só precisa saber a largura
 * de uma, daí `--vh-guest-count` vir inline junto com a duração.
 *
 * Por isso também o respiro entre os cards é `margin-inline-end` em CADA item,
 * e não `gap`: `gap` some no último item de cada cópia e o deslocamento cairia
 * um respiro fora de lugar — é o pulo clássico do marquee mal feito.
 *
 * A largura do card é FIXA (`--vh-guest-w`), não fração de grade: fita que
 * corre não tem colunas para dividir. É ela que alimenta o cálculo da largura
 * de uma cópia, então card e respiro TÊM de ser px, nunca %.
 *
 * A fita é cortada na borda do CONTAINER, não da tela: a seção continua sem
 * sangrar, e o card nasce e morre na mesma linha vertical onde o título
 * começa. O corte é esmaecido (`mask-image`) porque o que entra e sai não é só
 * foto — é NOME, e nome cortado ao meio por uma aresta dura lê como defeito,
 * não como movimento. A faixa de esmaecimento é curta de propósito: larga
 * demais, ela desfaz o alinhamento com o título.
 *
 * Pausa: `:hover` e `:focus-within`. O cursor parado sobre a fita segura a
 * animação; o teclado também, senão o link focado escaparia da vista.
 * ------------------------------------------------------------------------- */

.vh-guests__marquee {
	--vh-guest-w: 150px;
	--vh-guest-gap: 12px;
	--vh-marquee-dur: 60s;
	--vh-guest-count: 6;
	--vh-group-w: calc(var(--vh-guest-count) * (var(--vh-guest-w) + var(--vh-guest-gap)));

	--vh-marquee-fade: 40px;

	position: relative;
	overflow: hidden;
	/* O card sobe 4px no hover; sem esta folga o topo bateria no corte. */
	padding: 6px 0;
	margin: -6px 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--vh-marquee-fade), #000 calc(100% - var(--vh-marquee-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--vh-marquee-fade), #000 calc(100% - var(--vh-marquee-fade)), transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

@media (min-width: 640px) {
	.vh-guests__marquee {
		--vh-guest-w: 180px;
		--vh-guest-gap: 16px;
		--vh-marquee-fade: 56px;
	}
}

@media (min-width: 1024px) {
	.vh-guests__marquee {
		--vh-guest-w: 200px;
		--vh-guest-gap: 16px;
	}
}

.vh-guests__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: vh-marquee var(--vh-marquee-dur) linear infinite;
}

.vh-guests__marquee:hover .vh-guests__track,
.vh-guests__marquee:focus-within .vh-guests__track {
	animation-play-state: paused;
}

.vh-guests__group {
	display: flex;
	flex: 0 0 auto;
}

.vh-guest {
	flex: 0 0 auto;
	width: var(--vh-guest-w);
	/* Margem no ÚLTIMO item também: é o que mantém as duas metades idênticas. */
	margin-inline-end: var(--vh-guest-gap);
}

@keyframes vh-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-1 * var(--vh-group-w)), 0, 0);
	}
}

/* Movimento reduzido: a fita para de vez e vira um carrossel de arrastar. As
   cópias saem do caminho para não repetir a lista para quem rola. */
@media (prefers-reduced-motion: reduce) {
	.vh-guests__track {
		animation: none !important;
		transform: none !important;
	}

	.vh-guests__marquee {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.vh-guests__group[aria-hidden="true"] {
		display: none;
	}
}

/* 13/09/2026: sem link e sem o "sobe no hover" da foto — as convidadas não são
   clicáveis (pedido dele). A fita continua pausando sob o cursor, para ler. */

.vh-guest__name {
	display: block;
	margin-top: 14px;
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--v-wine);
}

.vh-guest__handle {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	color: var(--v-wine-soft);
}

/* ---------------------------------------------------------------------------
 * 6. Por trás do microfone
 *
 * Bloco escuro (vinho-tinta, o mesmo do hero) — é o segundo e último respiro
 * escuro da página, e fecha o arco que o hero abriu. A foto encosta na borda
 * direita do bloco e a onda de áudio, que sai do nome dela, corre até ENTRAR na
 * foto: quem corta a onda é o ombro da Fernanda. É o que dá profundidade ao
 * bloco sem uma sombra sequer.
 *
 * O texto é corrido, não acordeão (v1.6.2 — o cliente pediu de volta o texto
 * inteiro à vista). A hierarquia é toda tipográfica: primeiro parágrafo em
 * Fraunces, corpo grande e creme cheio; os dois seguintes em Inter, meio-tom.
 *
 * O movimento aqui nunca para: a onda pulsa sempre e a foto respira devagar.
 * ------------------------------------------------------------------------- */

.vh-host__stage {
	position: relative;
	overflow: hidden; /* Segura a onda que transborda para dentro da foto. */
	border-radius: var(--v-r-block);
	background: var(--v-ink);
	color: var(--v-cream);
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.vh-host__stage {
		display: grid;
		/* O TEXTO é que tem largura própria; a foto fica com todo o resto. Ao
		   contrário (texto em 1fr), a coluna do texto crescia sozinha enquanto o
		   texto parava no teto em `ch` — sobravam 428px de vazio entre a última
		   letra e a foto. */
		grid-template-columns: clamp(400px, 38%, 680px) minmax(0, 1fr);
		align-items: stretch;
		gap: clamp(32px, 4vw, 64px);
		min-height: 580px;
	}
}

/* Padrão da marca, tom sobre tom, atrás de tudo. Máscara alfa: a mesma arte que
   serve rosa-sobre-creme serve creme-sobre-tinta. */
.vh-host__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--v-cream);
	opacity: 0.055;
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: 420px;
	mask-size: 420px;
	-webkit-mask-position: -60px center;
	mask-position: -60px center;
	pointer-events: none;
}

/* --- Coluna de texto -------------------------------------------------- */

.vh-host__body {
	position: relative;
	z-index: 1; /* Abaixo da foto: é isso que recorta a onda. */
	min-width: 0;
	padding: clamp(30px, 6vw, 46px) var(--v-block-pad) clamp(34px, 7vw, 46px);
	order: 2;
}

@media (min-width: 1024px) {
	.vh-host__body {
		align-self: center;
		padding: clamp(44px, 4.6vw, 68px) 0 clamp(44px, 4.6vw, 68px) var(--v-block-pad);
		order: 0;
	}
}

/* O h2 é o título aprovado, mas quem carrega o peso visual é o nome dela — então
   ele entra como etiqueta de seção. `body.vitta-home` no seletor porque o
   `Noord_Typography` imprime `body.skin-editorial h2` inline, que é (0,1,2). */
body.vitta-home .vh-host__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: rgba(246, 238, 227, 0.62);
}

body.vitta-home .vh-host__kicker::before {
	content: "";
	width: 34px;
	height: 1px;
	background: rgba(246, 238, 227, 0.4);
	flex: none;
}

/* --- Nome gigante ------------------------------------------------------ */

.vh-host__name {
	margin: clamp(16px, 2.4vw, 24px) 0 clamp(26px, 3.6vw, 38px);
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: clamp(2.5rem, 0.9rem + 7.2vw, 6.75rem);
	line-height: 0.88;
	letter-spacing: -0.045em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	white-space: nowrap; /* "fernanda" nunca quebra: ele é que dá a régua. */
}

/* Máscara de entrada: cada linha sobe de dentro do próprio recorte. O padding
   compensado devolve o espaço que o `overflow: hidden` comeria dos terminais. */
.vh-host__line {
	display: block;
	overflow: hidden;
	padding-block: 0.08em;
	margin-block: -0.08em;
}

.vh-host__line--b {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin-left: 0.12em;
	overflow: visible; /* A onda tem que vazar daqui para chegar na foto. */
}

/* Máscara individual do "hime" — o recorte de entrada que a linha perdeu. */
.vh-host__clip {
	display: inline-block;
	flex: none; /* Sem isso a onda, que é larga, esmaga o "hime". */
	overflow: hidden;
	/* Padding compensado por margem negativa nos DOIS eixos: em cima e embaixo
	   pelos terminais da Fraunces, dos lados pelo contorno do texto vazado e pela
	   barriga do "e", que passam da largura de avanço do glifo. Sem o eixo
	   horizontal o "e" de "hime" sai cortado. */
	padding: 0.08em 0.1em;
	margin: -0.08em -0.1em;
}

.vh-host__word {
	display: inline-block;
}

/* "hime" vazado: dá hierarquia entre as duas linhas sem inventar cor nova
   (o rosa da marca é só ornamento e não pode virar texto). */
.vh-host__word--out {
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(246, 238, 227, 0.55);
}

@media (min-width: 1024px) {
	.vh-host__word--out {
		-webkit-text-stroke-width: 2px;
	}
}

/* --- Onda de áudio ----------------------------------------------------- */

/* A assinatura do podcast: o pingo do "i" do logo é um microfone. Ela pulsa o
   tempo todo — inclusive sob o cursor. Pedido explícito do cliente, e é o que
   mantém a seção viva agora que não há mais nada para clicar. */
.vh-host__wave {
	display: flex;
	align-items: center;
	gap: 5px;
	height: clamp(22px, 0.3em, 48px);
	/* A margem negativa é o que joga a onda PARA DENTRO da coluna da foto. Com
	   flex-grow ela cresce exatamente o tanto que a margem liberou, em qualquer
	   largura — nada de largura fixa em vw para recalibrar a cada breakpoint. */
	flex: 1 1 auto;
	min-width: 0;
	margin-right: -14vw;
	overflow: hidden;
	transform-origin: left center;
}

.vh-host__bar {
	display: block;
	/* `flex: none` não é detalhe: são 160 barras numa onda de largura elástica.
	   Sem isso elas ENCOLHEM até 0 nas telas estreitas em vez de serem cortadas. */
	flex: none;
	width: 3px;
	height: 100%;
	border-radius: 2px;
	background: rgba(246, 238, 227, 0.45);
	transform: scaleY(var(--h));
	transform-origin: center;
}

/* O desenho da onda é um padrão de 16 alturas que se repete. Sai por nth-child e
   não por style inline: são 160 barras, e 160 atributos style seria markup de
   graça. O mesmo ciclo de 16 também defasa a animação — como ela dura 1,15s e vai
   e volta, a fase se repetiria a cada ~13 barras de qualquer jeito. */
.vh-host__bar:nth-child(16n + 1) {
	--h: 0.28;
	--d: -0.00s;
}

.vh-host__bar:nth-child(16n + 2) {
	--h: 0.62;
	--d: -0.09s;
}

.vh-host__bar:nth-child(16n + 3) {
	--h: 0.4;
	--d: -0.18s;
}

.vh-host__bar:nth-child(16n + 4) {
	--h: 0.95;
	--d: -0.27s;
}

.vh-host__bar:nth-child(16n + 5) {
	--h: 0.55;
	--d: -0.36s;
}

.vh-host__bar:nth-child(16n + 6) {
	--h: 0.78;
	--d: -0.45s;
}

.vh-host__bar:nth-child(16n + 7) {
	--h: 0.34;
	--d: -0.54s;
}

.vh-host__bar:nth-child(16n + 8) {
	--h: 1;
	--d: -0.63s;
}

.vh-host__bar:nth-child(16n + 9) {
	--h: 0.46;
	--d: -0.72s;
}

.vh-host__bar:nth-child(16n + 10) {
	--h: 0.7;
	--d: -0.81s;
}

.vh-host__bar:nth-child(16n + 11) {
	--h: 0.25;
	--d: -0.90s;
}

.vh-host__bar:nth-child(16n + 12) {
	--h: 0.88;
	--d: -0.99s;
}

.vh-host__bar:nth-child(16n + 13) {
	--h: 0.52;
	--d: -1.08s;
}

.vh-host__bar:nth-child(16n + 14) {
	--h: 0.36;
	--d: -1.17s;
}

.vh-host__bar:nth-child(16n + 15) {
	--h: 0.66;
	--d: -1.26s;
}

.vh-host__bar:nth-child(16n + 16) {
	--h: 0.3;
	--d: -1.35s;
}

html.vh-js .vh-host__bar {
	animation: vh-host-wave 1.15s ease-in-out infinite alternate;
	animation-delay: var(--d);
}

@keyframes vh-host-wave {
	from {
		transform: scaleY(0.16);
	}

	to {
		transform: scaleY(var(--h));
	}
}

/* --- Texto ------------------------------------------------------------- */

/* Texto corrido, sem acordeão. A hierarquia é só tipográfica: o primeiro
   parágrafo é a abertura (Fraunces, corpo grande, creme cheio) e os dois
   seguintes são o desenvolvimento (Inter, meio-tom). O contraste de FAMÍLIA é o
   que define os blocos — não precisa de filete, número nem caixa. */
.vh-host__text {
	max-width: 52ch;
}

.vh-host__p {
	margin: 1.05em 0 0;
	font-size: clamp(0.875rem, 0.85rem + 0.16vw, 1rem);
	line-height: 1.75;
	color: rgba(246, 238, 227, 0.72);
}

/* Abertura: é a frase que apresenta quem ela é, então carrega a voz de display
   da marca. Corpo maior e creme cheio a separam do resto sem nenhum ornamento. */
.vh-host__p--lede {
	margin-top: 0;
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.5;
	letter-spacing: -0.006em;
	color: var(--v-cream);
	max-width: 36ch;
}

.vh-host__p--lede + .vh-host__p {
	margin-top: 1.6em;
}

/* --- Foto -------------------------------------------------------------- */

.vh-host__media {
	position: relative;
	z-index: 2; /* Acima da onda — o corte dela é o ombro da Fernanda. */
	order: 1;
}

@media (min-width: 1024px) {
	.vh-host__media {
		order: 0;
		align-self: stretch;
	}
}

/* A foto encosta nas bordas do bloco; quem arredonda é o `overflow` do stage. */
.vh-host__media .vh-ph {
	border-radius: 0;
	aspect-ratio: 4 / 5;
}

/* No tablet a foto empilhada em 4:5 ficava com meia tela de altura e engolia a
   seção. Deita o quadro; o rosto continua no enquadramento. */
@media (min-width: 640px) and (max-width: 1023px) {
	.vh-host__media .vh-ph {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1024px) {
	.vh-host__media .vh-ph {
		height: 100%;
		aspect-ratio: auto;
	}
}

/* Véu que costura a foto ao bloco: no mobile pela base (onde o texto começa),
   no desktop pela lateral esquerda (onde a onda entra). */
.vh-host__media .vh-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		var(--v-ink) 0%,
		rgba(42, 14, 20, 0.7) 12%,
		rgba(42, 14, 20, 0.3) 24%,
		rgba(42, 14, 20, 0) 36%
	);
}

@media (min-width: 1024px) {
	.vh-host__media .vh-ph::after {
		background: linear-gradient(
			to right,
			var(--v-ink) 0%,
			rgba(42, 14, 20, 0.94) 7%,
			rgba(42, 14, 20, 0.72) 15%,
			rgba(42, 14, 20, 0.4) 25%,
			rgba(42, 14, 20, 0.14) 28%,
			rgba(42, 14, 20, 0) 36%
		);
	}
}

/* O rosto está no terço superior da foto (509×905, bem mais vertical que o
   quadro): com o recorte centrado, a cabeça sairia. */
.vh-host__media .vh-photo__img {
	object-position: 52% 16%;
	transform: scale(1.3);
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vh-host.is-revealed .vh-host__media .vh-photo__img {
	transform: scale(1.1) translate(-3%, 1%);
}

/* A foto respira, bem devagar — sem interação para clicar, é o que impede o bloco
   de ficar parado. O `animation-delay` deixa a transição de entrada terminar
   primeiro; a animação começa exatamente no transform onde ela parou, então a
   emenda não aparece. */
html.vh-js .vh-host.is-revealed .vh-host__media .vh-photo__img {
	animation: vh-host-breathe 26s ease-in-out 1.3s infinite alternate;
}

@keyframes vh-host-breathe {
	from {
		transform: scale(1.1) translate(-3%, 1%);
	}

	to {
		transform: scale(1.16) translate(-5%, -1%);
	}
}

/* --- Entrada ----------------------------------------------------------- */

html.vh-js .vh-host__word {
	transform: translateY(105%);
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.vh-js .vh-host.is-revealed .vh-host__word {
	transform: none;
}

html.vh-js .vh-host.is-revealed .vh-host__line--b .vh-host__word {
	transition-delay: 0.1s;
}

html.vh-js .vh-host__wave {
	transform: scaleX(0);
	opacity: 0;
	transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s,
		opacity 0.5s ease 0.25s;
}

html.vh-js .vh-host.is-revealed .vh-host__wave {
	transform: none;
	opacity: 1;
}

html.vh-js .vh-host__p {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(0.24s + var(--i) * 0.11s);
}

html.vh-js .vh-host.is-revealed .vh-host__p {
	opacity: 1;
	transform: none;
}

/* Movimento reduzido: nada pulsa, nada respira, tudo no estado final. */
@media (prefers-reduced-motion: reduce) {
	html.vh-js .vh-host__bar,
	html.vh-js .vh-host.is-revealed .vh-host__media .vh-photo__img {
		animation: none !important;
	}

	.vh-host__bar {
		transform: scaleY(var(--h));
	}

	html.vh-js .vh-host__word,
	html.vh-js .vh-host__wave,
	html.vh-js .vh-host__p {
		opacity: 1;
		transform: none;
	}

	.vh-host__media .vh-photo__img,
	.vh-host.is-revealed .vh-host__media .vh-photo__img {
		transform: scale(1.1) translate(-3%, 1%);
	}
}

/* ---------------------------------------------------------------------------
 * 7. Além do podcast — UMA seção, os dois produtos
 *
 * v1.8.0. Da v1.7.0 até aqui, os dois produtos tiveram seções separadas, cada
 * uma tentando contar o produto inteiro na home: bloco de cor, ficha
 * catalográfica, fita de ilustrações, o seletor de cards. Foram quatro rodadas
 * de reprovação de identidade visual. A decisão que encerra o ciclo é de ESCOPO,
 * não de layout: **o detalhamento vai para as páginas de produto**, e a home
 * volta a ter uma seção só, cujo trabalho é despertar interesse — não explicar.
 *
 * Nada disso se perdeu: `noord_vitta_home_data()['diario']` continua guardando o
 * subtítulo impresso, a ficha, os 48 cards e a galeria do miolo. É material da
 * PÁGINA do Diário, e está esperando lá.
 *
 * O desenho:
 *   - SEM cor de produto. A seção inteira usa a paleta da marca (vinho sobre a
 *     base clara) — pedido explícito depois do azul ter sido reprovado duas vezes.
 *   - Duas LINHAS grandes, espelhadas entre si. Não são cards lado a lado: com
 *     dois produtos, dividir a largura empobrece os dois (reprovado na v1.7.0).
 *   - A foto tem um PAINEL DE CREME atrás, deslocado para fora e para baixo. É o
 *     que dá o aconchego sem inventar cor nenhuma: creme é a cor da marca, e o
 *     deslocamento faz a foto virar objeto pousado, não retângulo colado.
 *   - AS FOLHINHAS continuam. Foram pedido dele na v1.7.5 e são a única coisa
 *     que sobrevive das versões anteriores desta seção. Agora em vinho, porque
 *     o chão passou a ser a base clara da página.
 *
 * A linha inteira é UM link (`.vh-prod__cta::after` cobrindo a linha). Por isso
 * `.vh-prod__body` NÃO pode ser `position: relative` — ela roubaria a âncora.
 * ------------------------------------------------------------------------- */

.vh-prod {
	position: relative;
	overflow: hidden; /* Recorta as folhinhas. */
	/* Deslocamento do painel de creme atrás da foto. */
	--vp-off: clamp(14px, 1.6vw, 28px);
	/* Quanto as folhinhas sobem antes de sumir. */
	--vp-rise: 1000px;
}

@media (min-width: 900px) {
	.vh-prod {
		--vp-rise: 1500px;
	}
}

/* O cabeçalho é o `.vh-head` + `.vh-h2` + `.vh-lede` padrão da home — não há
   nada específico desta seção. Da v1.7.7 à v1.8.0 ele foi uma linha pequena e
   própria (`.vh-prodhead`), o que fazia sentido enquanto a seção era uma faixa
   azul de borda a borda: um título de 72px competiria com ela. Com a seção de
   volta ao normal, a exceção deixou de ter motivo e o título voltou à casa. */

/* Sobe o conteúdo acima das folhinhas, que são `position: absolute` com
   `z-index: 0` — elemento posicionado pinta ACIMA de conteúdo em fluxo sem
   z-index, então sem isto as folhas passariam por cima do texto. */
.vh-prod > .vh-container {
	position: relative;
	z-index: 2;
}

/* --- As folhinhas -------------------------------------------------------- */

/* Pedido dele na v1.7.5 ("umas folhinhas bem pequenas que ficavam subindo") e a
   única coisa que atravessou a reconstrução. São pequenas de propósito: o
   movimento tem que ser percebido de canto de olho, nunca disputar a leitura. */
.vh-prod__leaves {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Folha desenhada só com `border-radius`: dois cantos redondos e dois em ponta.
   É a mesma silhueta dos ramos do padrão da marca. */
.vh-prod__leaf {
	position: absolute;
	bottom: -24px;
	left: calc(var(--i) * 5.4% + 1.5%);
	width: 11px;
	height: 17px;
	border-radius: 0 100% 0 100%;
	background: var(--v-wine);
	opacity: 0;
	transform: rotate(24deg);
	/* Pico de opacidade de cada folha. O vinho é MUITO mais escuro que o navy que
	   elas tinham antes: com os 0,30 de lá, viravam pontos pretos sobre o creme. */
	--o: 0.14;
}

/* Duas variações de tamanho e peso. Sem elas as folhas viram uma fileira de
   pontos idênticos, que é exatamente o que denuncia enfeite gerado. */
.vh-prod__leaf:nth-child(3n) {
	--o: 0.09;
	width: 15px;
	height: 23px;
}

.vh-prod__leaf:nth-child(4n) {
	--o: 0.11;
	width: 8px;
	height: 12px;
}

html.vh-js .vh-prod__leaf {
	animation: vh-prod-leaf calc(26s + var(--i) * 1.9s) linear infinite;
	animation-delay: calc(var(--i) * -2.4s);
}

@keyframes vh-prod-leaf {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	14% {
		opacity: var(--o);
	}

	72% {
		opacity: calc(var(--o) * 0.62);
	}

	100% {
		opacity: 0;
		/* Sobe e deriva um pouco para o lado, como folha caindo ao contrário. */
		transform: translate3d(34px, calc(var(--vp-rise) * -1), 0) rotate(190deg);
	}
}

/* --- As duas linhas ------------------------------------------------------ */

.vh-prod__list {
	display: grid;
	gap: clamp(72px, 8vw, 128px);
}

.vh-prod__row {
	position: relative; /* Âncora do link que cobre a linha inteira. */
	display: grid;
	gap: clamp(32px, 4vw, 72px);
}

/* Empilhado: o TEXTO vem primeiro e a foto depois, nas duas linhas (pedido dele
   em 10/09/2026). No markup a mídia vem antes — é o que o desktop quer na linha
   ímpar —, então quem inverte é o `order`, só abaixo de 900. A partir de 900 o
   espelhamento continua sendo decidido pela regra de `:nth-child(even)`. */
@media (max-width: 899px) {
	.vh-prod__media {
		order: 2;
	}
}

@media (min-width: 900px) {
	.vh-prod__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(40px, 5vw, 88px);
	}

	/* Espelhamento: a segunda linha inverte foto e texto. É o que impede as duas
	   de lerem como uma lista, e o que dá o ritmo de página editorial. */
	.vh-prod__row:nth-child(even) .vh-prod__media {
		order: 2;
	}
}

/* --- A foto e o painel de creme ------------------------------------------ */

.vh-prod__frame {
	position: relative;
	/* Sem isto o painel de creme, que sai da caixa, seria recortado pelo grid. */
	isolation: isolate;
}

/* O painel de creme atrás da foto, deslocado para FORA e para BAIXO. É todo o
   aconchego da seção, e não custa uma cor nova: creme é a cor da marca.
   `right: -off` no ímpar (foto à esquerda) e espelhado no par — o painel sempre
   escapa pelo lado de fora da página, nunca em direção ao texto. */
.vh-prod__frame::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: var(--vp-off) var(--vp-off) calc(var(--vp-off) * -1) calc(var(--vp-off) * -1);
	border-radius: var(--v-r-block);
	background: var(--v-cream);
	/* O filete NÃO é enfeite: o placeholder de foto também é creme, e sem ele o
	   painel desaparece enquanto as fotos oficiais não chegam. Com foto de
	   verdade ele continua servindo, como contorno do creme sobre a base clara. */
	box-shadow: inset 0 0 0 1px var(--v-line);
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 900px) {
	.vh-prod__row:nth-child(even) .vh-prod__frame::before {
		inset: var(--vp-off) calc(var(--vp-off) * -1) calc(var(--vp-off) * -1) var(--vp-off);
	}
}

/* Mídia em escala de BLOCO usa o raio de bloco (32), como a foto da Fernanda —
   o raio de card (16) é para mídia pequena, e a 620px vira quina. */
.vh-prod__frame .vh-ph {
	position: relative;
	z-index: 1;
	border-radius: var(--v-r-block);
	box-shadow: 0 26px 60px rgba(42, 14, 20, 0.1);
}

.vh-prod__frame .vh-photo__img {
	transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vh-prod__row:hover .vh-prod__frame::before {
	transform: translate(calc(var(--vp-off) * -0.35), calc(var(--vp-off) * 0.35));
}

@media (min-width: 900px) {
	.vh-prod__row:nth-child(even):hover .vh-prod__frame::before {
		transform: translate(calc(var(--vp-off) * 0.35), calc(var(--vp-off) * 0.35));
	}
}

.vh-prod__row:hover .vh-prod__frame .vh-photo__img {
	transform: scale(1.05);
}

/* --- O palco do objeto (mockup recortado) — 10/09/2026 -------------------
 *
 * O caderno do Diário chegou como RECORTE (fundo transparente). Recorte não
 * cabe na lógica de foto — `cover` numa moldura quadrada cortaria a espiral —,
 * então a moldura vira PALCO: o creme com o padrão da marca continua (é o mesmo
 * chão da linha do Vitta Kids, e as duas linhas seguem irmãs), e o objeto pousa
 * no meio, INTEIRO.
 *
 * Três ajustes fazem o recorte parecer fotografado ali, e não colado:
 *   1. uma LUZ no centro do palco (creme mais claro, `--v-page`), que separa o
 *      caderno do padrão sem inventar cor;
 *   2. o padrão da marca mais baixo (.75 → .42) — ele continua dizendo "Vitta",
 *      mas deixa de disputar com a capa, que já é a peça mais colorida da home;
 *   3. a sombra é `drop-shadow`, não `box-shadow`: segue o CONTORNO do alfa
 *      (espiral, lombada, a perspectiva da capa), e é tingida de vinho escuro
 *      como as outras sombras da seção. Duas camadas: a de contato, curta e
 *      mais densa, e a ambiente, longa e rala.
 * ------------------------------------------------------------------------- */

.vh-prod__frame .vh-ph--stage {
	background:
		radial-gradient(ellipse 58% 50% at 50% 52%, var(--v-page) 0%, rgba(252, 247, 240, 0) 100%),
		var(--v-cream);
}

/* (0,2,1): ganha do `.vh-ph::before` genérico por especificidade. */
.vh-prod__frame .vh-ph--stage::before {
	opacity: 0.42;
}

.vh-prod__obj {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 82%;
	height: auto;
	/* -46% e não -50%: o caderno pousa um pouco abaixo do centro óptico, e a
	   sombra ambiente, que desce, fica dentro do palco. */
	transform: translate(-50%, -46%);
	filter:
		drop-shadow(0 6px 8px rgba(42, 14, 20, 0.22))
		drop-shadow(0 26px 34px rgba(42, 14, 20, 0.2));
	transition:
		transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* No hover o caderno SOBE e a sombra de contato se abre — é o objeto sendo
   levantado do palco, no mesmo tempo do painel de creme que desliza atrás. */
.vh-prod__row:hover .vh-prod__obj {
	transform: translate(-50%, -49%);
	filter:
		drop-shadow(0 12px 14px rgba(42, 14, 20, 0.18))
		drop-shadow(0 38px 44px rgba(42, 14, 20, 0.2));
}

@media (prefers-reduced-motion: reduce) {
	.vh-prod__obj {
		transition: none;
	}

	.vh-prod__row:hover .vh-prod__obj {
		transform: translate(-50%, -46%);
	}
}

/* --- O texto ------------------------------------------------------------- */

/* ATENÇÃO: NÃO pôr `position: relative` aqui. O `::after` do CTA cobre a linha
   inteira resolvendo contra `.vh-prod__row`; se esta caixa virar contexto de
   posicionamento, a área de clique encolhe para a coluna de texto sem avisar. */
.vh-prod__body {
	min-width: 0;
}

/* CAIXA BAIXA, como o logo e como todos os títulos da home. */
body.vitta-home .vh-prod__title {
	margin: 0;
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(2rem, 1.1rem + 3.1vw, 3.5rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--v-wine);
	max-width: 13ch;
	text-wrap: balance;
}

/* A frase que fisga. É a primeira do parágrafo aprovado, em display itálico —
   mesmo recurso do `.vh-item__lead` que existia antes. */
.vh-prod__lead {
	margin: clamp(18px, 2vw, 28px) 0 0;
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.125rem, 0.94rem + 0.82vw, 1.75rem);
	line-height: 1.34;
	letter-spacing: -0.008em;
	color: var(--v-wine);
	max-width: 31ch;
	/* `pretty` e não `balance`: aqui o problema é a ÓRFÃ (a primeira frase do
	   Diário deixava "ela?" sozinha na terceira linha), não o desequilíbrio
	   entre linhas — e `balance` encurtaria a mancha, que é o oposto do que a
	   coluna precisa. */
	text-wrap: pretty;
}

.vh-prod__text {
	margin: clamp(14px, 1.4vw, 20px) 0 0;
	font-size: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
	line-height: 1.7;
	color: var(--v-wine-soft);
	max-width: 46ch;
}

/* --- A chamada ----------------------------------------------------------- */

.vh-prod__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(26px, 3vw, 42px);
	padding: 8px 8px 8px 24px;
	border-radius: 999px;
	background: var(--v-wine);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

/* A LINHA INTEIRA é clicável por este `::after` — um único link real, sem
   âncoras aninhadas. Resolve contra `.vh-prod__row`. */
.vh-prod__cta::after {
	content: "";
	position: absolute;
	inset: 0;
}

body.vitta-home .vh-prod__ctaLabel {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--v-cream);
}

.vh-prod__arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--v-cream);
	color: var(--v-wine);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vh-prod__row:hover .vh-prod__cta {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(42, 14, 20, 0.18);
}

.vh-prod__row:hover .vh-prod__arrow {
	transform: translateX(4px);
}

/* --- Entrada ------------------------------------------------------------- */

html.vh-js .vh-prod__frame,
html.vh-js .vh-prod__body > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.vh-js .vh-prod__body > *:nth-child(2) {
	transition-delay: 0.07s;
}

html.vh-js .vh-prod__body > *:nth-child(3) {
	transition-delay: 0.14s;
}

html.vh-js .vh-prod__body > *:nth-child(4) {
	transition-delay: 0.21s;
}

html.vh-js .vh-prod.is-revealed .vh-prod__frame,
html.vh-js .vh-prod.is-revealed .vh-prod__body > * {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.vh-js .vh-prod__leaf {
		animation: none !important;
	}

	html.vh-js .vh-prod__frame,
	html.vh-js .vh-prod__body > * {
		opacity: 1;
		transform: none;
	}

	.vh-prod__row:hover .vh-prod__frame::before,
	.vh-prod__row:hover .vh-prod__frame .vh-photo__img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Rodapé
 *
 * Estrutura da referência aprovada pelo cliente (rodapé do Caldera), traduzida
 * para a identidade da Vitta: banda texturizada com dois cards de MESMA LARGURA
 * flutuando dentro dela — vinho à esquerda, branco à direita, com a fileira de
 * círculos sociais entre o topo da coluna direita e o card claro.
 *
 * Esta é a única parte da home que sangra de borda a borda: aqui a textura é o
 * fundo e são os cards que flutuam. O princípio ("blocos flutuando") se mantém.
 * ------------------------------------------------------------------------- */

.vh-foot {
	position: relative;
	isolation: isolate;
	margin-top: var(--v-gap);
	padding: clamp(48px, 6vw, 88px) 0;
	background: var(--v-cream);
	overflow: hidden;
}

/* Padrão da marca como máscara alfa, tingido de ROSA: 1.31:1 sobre o creme.
   É exatamente o papel do rosa na marca — textura visível, nunca informação. */
.vh-foot__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--v-blush);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	/* Escala de TEXTURA, não de ilustração: em `cover` os motivos ficam enormes e
	   a trama vira desenho. Ladrilhado pequeno, ela lê como fundo. */
	-webkit-mask-size: 520px auto;
	mask-size: 520px auto;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.75;
}

.vh-foot__inner {
	width: 100%;
	max-width: var(--v-max);
	margin: 0 auto;
	padding: 0 var(--v-pad);
	display: grid;
	gap: clamp(12px, 1.2vw, 16px);
}

/* Duas colunas de mesma largura, como na referência. */
@media (min-width: 1024px) {
	.vh-foot__inner {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

/* --- Coluna esquerda: card vinho ---------------------------------------- */

.vh-foot__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-radius: var(--v-r-block);
	background: var(--v-wine);
	color: var(--v-cream);
	padding: clamp(28px, 3.2vw, 44px);
}

.vh-logo--foot {
	width: clamp(128px, 14vw, 178px);
	/* `margin-top:auto` no claim absorve a sobra; esta margem garante o mínimo. */
	margin-bottom: clamp(36px, 5vw, 56px);
}

.vh-foot__claim {
	margin: auto 0 clamp(20px, 2.4vw, 28px);
	font-family: var(--v-display);
	font-size: clamp(1.875rem, 3.9vw, 3.5rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	color: var(--v-cream);
	/* Fraunces variável: SOFT arredonda os terminais, WONK liga os alternados
	   quebrados. É o que aproxima o texto da serifada itálica do logo — sem isso
	   Fraunces vira só mais um serif de tela. */
	font-variation-settings: "SOFT" 60, "WONK" 1;
}

/* Duas linhas, como na referência: sem isso o claim (curto) ocupa uma linha só
   e sobra vinho vazio à direita. No mobile a largura já força a quebra. */
@media (min-width: 768px) {
	.vh-foot__claim {
		max-width: 15ch;
	}
}

.vh-foot__cta {
	flex: 0 0 auto;
}

/* --- Coluna direita ----------------------------------------------------- */

.vh-foot__col {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}

/* AS REDES VIRARAM BLOCOS (13/09/2026). Com quatro círculos de 96px espalhados
   por `space-between` sobravam ~150px de vazio entre cada um — ele achou
   "muito estranho". A fileira agora é UMA grade de quatro blocos que dividem a
   coluna em partes iguais, com o MESMO vão que separa a fileira do painel de
   baixo e as duas colunas do rodapé: os blocos entram no ritmo do rodapé em vez
   de flutuar soltos nele. `grid-auto-flow: column` + `1fr` para a fileira se
   refazer sozinha se uma rede entrar ou sair (a lista é `noord_vitta_redes()`).

   Este bloco serve aos TRÊS rodapés (home, Diário, Kids): `.vh-round` só existe
   neles, e as páginas de produto trocam apenas a cor e o raio. */
.vh-foot__social,
.vd-foot__social,
.vk-foot__social {
	container-type: inline-size;
}

body.vitta-home :where(.vh-foot__social, .vd-foot__social, .vk-foot__social) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(12px, 1.4vw, 18px);
}

/* `body.vitta-home a { color: inherit }` é (0,1,1) e vence uma classe sozinha:
   sem o body no seletor o glifo herda a cor da banda e some dentro do bloco. */
body.vitta-home .vh-round {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: clamp(56px, 5.2vw, 76px);
	/* Um degrau abaixo do raio do cartão que ele acompanha: filho arredonda menos
	   que o pai, senão os blocos leem como pílulas soltas. */
	border-radius: var(--v-r-card);
	background: var(--v-wine);
	color: var(--v-cream);
	/* O recorte do glifo (triângulo do YouTube, lente do Instagram) tem de ser da
	   cor do bloco, senão some dentro da forma cheia. */
	--vh-icon-knockout: var(--v-wine);
	transition: background-color 0.2s ease;
}

body.vitta-home .vh-foot__social .vh-icon,
body.vitta-home .vd-foot__social .vh-icon,
body.vitta-home .vk-foot__social .vh-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* O nome da rede aparece quando o bloco tem largura para ele (~130px). Abaixo
   disso fica só o glifo, e o nome continua no link para o leitor de tela — é o
   nome acessível dele (o `aria-label` saiu). Consulta de CONTÊINER, não de tela:
   a coluna tem larguras diferentes nos três rodapés e na mesma tela. */
body.vitta-home .vh-round__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@container (min-width: 540px) {
	body.vitta-home .vh-round__name {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		font-family: var(--v-body);
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1;
	}
}

body.vitta-home .vh-foot .vh-round:hover {
	background: color-mix(in oklab, var(--v-wine) 80%, black);
	--vh-icon-knockout: color-mix(in oklab, var(--v-wine) 80%, black);
}

/* --- Card claro: navegação · divisor · fechamento ------------------------ */

.vh-foot__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--v-r-block);
	background: var(--v-page);
	padding: clamp(24px, 2.8vw, 40px);
}

.vh-foot__nav {
	display: flex;
	flex-wrap: wrap;
	/* Sem vão de linha: quem separa as linhas agora é a altura mínima de toque
	   dos próprios links. */
	gap: 2px clamp(18px, 2vw, 30px);
}

/* Os links do rodapé são o destino mais tocado da página no celular, e mediam
   25px de altura. `min-height` em vez de recheio solto para a linha de base do
   texto não mudar de lugar. */
body.vitta-home .vh-foot__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--v-wine);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

body.vitta-home .vh-foot__nav a:hover,
body.vitta-home .vh-foot__nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vh-foot__rule {
	height: 1px;
	background: var(--v-line);
	margin: clamp(20px, 2.4vw, 32px) 0;
}

.vh-foot__closing {
	/* Duas linhas por decisão, não por quebra: copyright + links legais somam 584px
	   e o card tem 546px úteis a 1440. Empilhado e alinhado à esquerda, acompanha
	   a navegação acima em vez de brigar por uma linha que não existe. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.vh-foot__copy,
.vh-foot__legal {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--v-wine-soft);
}

.vh-foot__legal {
	display: flex;
	gap: 14px;
}

body.vitta-home .vh-foot__legal a {
	color: var(--v-wine-soft);
	text-decoration: none;
	/* Mesma receita da barra de anúncio: recheio para o dedo, margem negativa
	   para o layout. A linha legal é uma só, então as áreas não se encostam. */
	display: inline-block;
	padding: 10px 4px;
	margin: -10px -4px;
}

body.vitta-home .vh-foot__legal a:hover,
body.vitta-home .vh-foot__legal a:focus-visible {
	color: var(--v-wine);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * Movimento — mínimo, e só se o JS estiver de pé.
 * ------------------------------------------------------------------------- */

html.vh-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
}

html.vh-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	html.vh-js [data-reveal],
	html.vh-js [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	body.vitta-home *,
	body.vitta-home *::before,
	body.vitta-home *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}