/**
 * Página do Diário Guiado da Gestante
 * ---------------------------------------------------------------------------
 * Depende de `vitta-home.css`, que traz os tokens da marca, o container, o
 * placeholder de foto, a barra fixa e o rodapé — todos escopados em
 * `body.vitta-home`. Esta página carrega as DUAS classes: `vitta-home` é o escopo
 * do design system da Vitta, `vitta-diario` é a página. O enqueue declara a
 * dependência, então este arquivo vem sempre DEPOIS: várias regras daqui têm a
 * mesma especificidade das de lá e ganham na ordem.
 *
 * PALETA (definida pelo cliente): bege no fundo · azul escuro da arte da capa ·
 * dourado · branco. Azul e dourado são MEDIDOS na capa impressa. O vinho da marca
 * segue no chrome (barra fixa e rodapé) — é a assinatura do Vitta Materna, e é o
 * que amarra esta página à home.
 *
 * ARMADILHAS DE ESPECIFICIDADE (as três já custaram tempo neste projeto):
 *   1. `Noord_Typography` imprime inline `body.skin-editorial h1..h6` (0,1,2):
 *      toda regra de tipo sobre heading precisa de `body.vitta-diario` (0,2,1).
 *   2. `body.vitta-home a { color: inherit }` (0,1,1) vence classe sozinha:
 *      botões e links coloridos precisam do body no seletor.
 *   3. `body.vitta-home ul { margin: 0; padding: 0 }` (0,1,2): toda margem de
 *      lista precisa de `body.vitta-diario .classe`.
 * E `main.css` tem `h1,h2,h3 { color: var(--color-text) }` — regra de ELEMENTO,
 * que vence herança. Cor de título se declara na própria classe, sempre.
 */

/* ---------------------------------------------------------------------------
 * Tokens da página — sistema "Function", cores da Vitta
 *
 * A referência que o cliente escolheu (functionhealth.com) é um sistema de
 * PERGAMINHO: nada de branco puro, a elevação vem de um degrau de cor e não de
 * sombra, tudo é arredondado (24 nos cards, 40 nos botões, pílula nos campos),
 * e o serif editorial mistura romano e itálico na MESMA linha.
 *
 * A instrução foi explícita: **usar o sistema, NUNCA as cores dele.** Então o
 * mapeamento é este, e a paleta continua a nossa:
 *
 *   Parchment (canvas)     → --vd-bg     #fbf3e9   (já era o nosso bege)
 *   Aged Paper (cards)     → --vd-cream  #f6eee3   (um degrau mais fundo)
 *   Warm Taupe (filetes)   → --vd-line   azul a 14% sobre o bege = ~#dcd6cd
 *   Ink                    → --vd-navy   #01203a
 *   Charcoal / Graphite    → --vd-navy-soft / --vd-navy-mute
 *   Terracotta Seal        → --vd-gold / --vd-gold-ink
 *
 * A MUDANÇA DE SUPERFÍCIE É A MAIS VISÍVEL: os cards deixaram de ser BRANCOS.
 * "Never use pure white — it kills the parchment warmth" é a primeira regra da
 * referência, e o branco era justamente o que fazia a página parecer clínica.
 * O --vd-paper deixou de ser branco na v1.25.0: virou a cor do PAPEL PÓLEN e é
 * o fundo com que as páginas do miolo são multiplicadas, a pedido da cliente.
 *
 * ARMADILHAS DE ESPECIFICIDADE (as três já custaram tempo neste projeto):
 *   1. `Noord_Typography` imprime `body.skin-editorial h1..h6` inline (0,1,2);
 *      qualquer regra de tipo em h1..h6 precisa de `body.vitta-diario` na frente.
 *   2. `body.vitta-home a { color: inherit }` é (0,1,1) e vence classe sozinha.
 *   3. `main.css` tem `h1,h2,h3 { color: var(--color-text) }` — regra de
 *      ELEMENTO, então vence a herança.
 * ------------------------------------------------------------------------- */

body.vitta-diario {
	/* MEDIDOS na arte da capa (Capa Planner Vita Mater.pdf). */
	--vd-navy: #01203a;
	--vd-gold: #e9a14e;

	/* Derivados */
	--vd-navy-2: #0a3556; /* Topo do gradiente dos blocos escuros. */
	--vd-navy-soft: rgba(1, 32, 58, 0.66);
	--vd-navy-mute: rgba(1, 32, 58, 0.44);
	--vd-line: rgba(1, 32, 58, 0.14);
	--vd-hair: rgba(1, 32, 58, 0.08);

	/* Dourado escurecido: o #e9a14e dá 2,2:1 sobre o bege e NUNCA pode ser texto.
	   Este dá 5,1:1 — é o que os rótulos usam. O dourado cheio fica para fio,
	   superfície e texto sobre o azul (7,6:1 lá).

	   A referência limita o acento a TRÊS usos: botão principal, rótulo curto e
	   estado ativo. Aqui vale igual — e é o motivo de o dourado ter saído dos
	   filetes decorativos que ele ocupava antes. */
	--vd-gold-ink: #8a5a12;
	--vd-gold-soft: rgba(233, 161, 78, 0.34);

	--vd-bg: #fbf3e9;
	/* CSS não deriva alfa de uma variável de cor sem color-mix: o par de alfa 0
	   precisa existir como valor próprio para os gradientes de véu. */
	--vd-bg-0: rgba(251, 243, 233, 0);

	--vd-cream: #f6eee3;
	/* Cor do PAPEL PÓLEN do Diário. Serve de fundo para o `multiply` das páginas
	   do miolo: o branco do escaneamento vira exatamente esta cor. */
	--vd-paper: #f2e5cf;
	--vd-cream-soft: rgba(246, 238, 227, 0.72);
	--vd-cream-mute: rgba(246, 238, 227, 0.5);

	/* --- Geometria: a família de raios da referência é inegociável ---------- */
	--vd-r-block: 24px;
	--vd-r-card: 24px;
	--vd-r-media: 24px;
	--vd-r-btn: 40px;
	--vd-r-pill: 9999px;

	/* --- Elevação: DUAS receitas, e só ------------------------------------- */
	--vd-shadow: rgba(1, 32, 58, 0.1) 12px 32px 80px 0;
	--vd-shadow-lg: rgba(1, 32, 58, 0.1) 12px 32px 80px 0;
	--vd-glow: rgba(1, 32, 58, 0.15) 0 0 20px 0;

	/* --- Ritmo: a referência é 1280 de conteúdo, 24–40 de folga, 64–96 entre
	   seções. É bem mais estreito que os 2000 da home, e é DE PROPÓSITO: o
	   sistema depende da margem generosa para o branco funcionar como material,
	   não como sobra. --------------------------------------------------------- */
}

body.vitta-diario {
	background: var(--vd-bg);
	color: var(--vd-navy);
	/* O tracking apertado do sans é assinatura do sistema: puxa o texto para um
	   bloco firme que contrasta com o espaçamento solto do serif. Declarado uma
	   vez, no corpo — a referência é explícita em não sobrescrever por elemento. */
	letter-spacing: -0.023em;
}

/* ---------------------------------------------------------------------------
 * Tipografia
 *
 * Fraunces faz o papel do Financier: display editorial, peso 400 no romano e
 * 300 no itálico, SEM tracking (a referência proíbe apertar o serif — o aperto
 * pertence só ao sans). Inter faz o papel do Ftbase.
 * ------------------------------------------------------------------------- */

body.vitta-diario .vd-h1,
body.vitta-diario .vd-h2 {
	font-family: var(--v-display);
	font-optical-sizing: auto;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	/* Caixa baixa é regra desta marca, não moda: o logo "vitta materna" é todo
	   minúsculo. É uma das coisas NOSSAS que a referência não muda. */
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-navy);
	margin: 0;
	text-wrap: pretty;
}

body.vitta-diario .vd-h1 {
	font-size: clamp(2.75rem, 1.1rem + 5.6vw, 5.5rem);
	line-height: 0.9;
}

body.vitta-diario .vd-h2 {
	font-size: clamp(2.125rem, 1.15rem + 3.5vw, 4rem);
	line-height: 1.02;
}

/* O MOVIMENTO MAIS DISTINTIVO DO SISTEMA: romano + itálico na mesma linha.
   A palavra em itálico é sempre a EMOCIONAL ou a surpreendente; as romanas
   montam a estrutura. Nunca uma frase inteira, nunca em rótulo ou corpo — só
   no serif, e só de 34px para cima. */
body.vitta-diario .vd-em {
	font-style: italic;
	font-weight: 300;
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

.vd-lede {
	font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
	font-weight: 300;
	line-height: 1.4;
	color: var(--vd-navy-soft);
	margin: 20px 0 0;
	max-width: 54ch;
}

/* O rótulo curto: caixa alta, 600, 12px, e o tracking APERTADO do sistema — não
   o espaçado que a home usa. É o mesmo elemento da home, só com a métrica da
   referência e a nossa cor de acento. */
body.vitta-diario .vh-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.023em;
	text-transform: uppercase;
	color: var(--vd-gold-ink);
	margin-bottom: 12px;
}

.vd-head {
	margin-bottom: clamp(36px, 4.4vw, 64px);
	max-width: 46ch;
}

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

.vd-head--split .vd-head__text {
	max-width: 46ch;
	min-width: 0;
}

.vd-head--onDark .vd-h2,
body.vitta-diario .vd-head--onDark .vd-h2 {
	color: var(--vd-cream);
}

.vd-head--onDark .vd-lede {
	color: var(--vd-cream-soft);
}

body.vitta-diario .vd-head--onDark .vh-eyebrow {
	color: var(--vd-gold);
}

/* ---------------------------------------------------------------------------
 * Botões e links
 *
 * A referência: 12px 24px de recheio, raio 40, sans 600 a 16px, SEM borda e SEM
 * sombra no principal; o secundário é contorno de 1,5px na cor do acento e vive
 * na MESMA altura do principal, nunca subordinado.
 *
 * O preenchido continua AZUL, não dourado: o dourado da marca dá 2,2:1 sobre
 * claro e não sustenta texto. O acento entra no contorno do secundário, onde é
 * fio e não fundo.
 *
 * `body.vitta-home a { color: inherit }` é (0,1,1) e vence `.vd-btn--primary`
 * (0,1,0): sem o body no seletor o botão nasce sem cor de texto.
 * ------------------------------------------------------------------------- */

.vd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 28px;
	border-radius: var(--vd-r-btn);
	border: 0;
	font-family: var(--v-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.023em;
	text-align: center;
	cursor: pointer;
	transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}


/* ===========================================================================
   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-diario .vd-btn {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .10);
}
body.vitta-diario .vd-btn:active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .10);
}

body.vitta-diario .vd-btn--primary {
	background: var(--vd-navy);
	color: var(--vd-cream);
}

body.vitta-diario .vd-btn--primary:hover {
	background: var(--vd-navy-2);
	transform: translateY(-2px);
}

/* Secundário de contorno — a segunda peça do par, no mesmo tamanho. */
body.vitta-diario .vd-btn--gold {
	background: transparent;
	border: 1.5px solid var(--vd-gold-ink);
	color: var(--vd-gold-ink);
	/* O contorno come 3px da caixa: sem o desconto, os dois botões desalinham. */
	padding: 13.5px 26.5px;
}

body.vitta-diario .vd-btn--gold:hover {
	background: var(--vd-gold-ink);
	color: var(--vd-cream);
	transform: translateY(-2px);
}

.vd-btn--block {
	width: 100%;
}

/* Sobre os blocos escuros o acento PREENCHE: ali ele e o CTA principal, e a
   referencia reserva o preenchimento do acento para exatamente isso. Sobre
   claro ele continua sendo so contorno, porque dourado chapado com texto nao
   sustenta contraste no bege. */
body.vitta-diario .vd-object .vd-btn--gold {
	background: var(--vd-gold);
	border-color: var(--vd-gold);
	color: var(--vd-navy);
}

body.vitta-diario .vd-object .vd-btn--gold:hover {
	background: var(--vd-cream);
	border-color: var(--vd-cream);
	color: var(--vd-navy);
}

/* Link de texto com seta desenhada em borda — sem asset, e desliza no hover. */
body.vitta-diario .vd-textlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--vd-navy);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 6px 2px;
}

.vd-textlink span:first-child {
	border-bottom: 1px solid var(--vd-gold-soft);
	padding-bottom: 3px;
	transition: border-color 0.22s ease;
}

.vd-textlink__arrow {
	position: relative;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.22s ease;
}

/* Ícone de traço, nunca preenchido: 1,5px é a espessura do sistema. */
.vd-textlink__arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
}

.vd-textlink:hover .vd-textlink__arrow {
	transform: translateX(5px);
}

.vd-textlink:hover span:first-child {
	border-color: var(--vd-gold);
}

/* Setas do folhear: círculo de contorno, preenchendo no hover. */
body.vitta-diario .vd-arrow {
	border: 1.5px solid var(--vd-line);
	border-radius: var(--vd-r-pill);
	color: var(--vd-navy);
	background: transparent;
}

body.vitta-diario .vd-arrow:hover:not(:disabled) {
	background: var(--vd-navy);
	border-color: var(--vd-navy);
	color: var(--vd-cream);
}

/* ---------------------------------------------------------------------------
 * Placeholder de foto — recolorido para esta paleta
 *
 * Deixou de ser BRANCO junto com os cards: agora é o creme de card, com o
 * padrão da marca tingido de azul bem baixo. Sobre o bege da página ele se
 * distingue pelo degrau de cor e pelo filete, que é como o sistema separa
 * superfícies — sem sombra.
 * ------------------------------------------------------------------------- */

body.vitta-diario .vh-ph {
	background-color: var(--vd-cream);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	border-radius: var(--vd-r-media);
}

body.vitta-diario .vh-ph::before {
	background-color: rgba(1, 32, 58, 0.09);
	-webkit-mask-size: 300px;
	mask-size: 300px;
}

body.vitta-diario .vh-ph__label {
	color: var(--vd-navy-mute);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: -0.023em;
	text-transform: uppercase;
}

/* Placeholder que preenche a caixa da mídia (a proporção mora no wrapper). */
.vd-ph--fill {
	position: absolute;
	inset: 0;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Superfícies e primitivas do sistema
 *
 * A elevação vem do DEGRAU DE COR (bege → creme → filete), não de sombra. A
 * sombra existe em duas receitas e é para peça flutuante de verdade.
 * ------------------------------------------------------------------------- */

/* Card padrão: creme, raio 24, folga interna generosa, sem sombra. */
.vd-card {
	background: var(--vd-cream);
	border-radius: var(--vd-r-card);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	padding: clamp(24px, 2.6vw, 40px);
}

/* Lista horizontal separada por bolinha na cor do acento — o "disease tag" da
   referência, que é como ela lista itens curtos em fluxo. */
.vd-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vitta-diario .vd-dots {
	margin: 0;
	padding: 0;
}

.vd-dots > li {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--vd-navy-soft);
}

.vd-dots > li + li::before {
	content: "·";
	display: inline-block;
	padding: 0 16px;
	color: var(--vd-gold-ink);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 4. O que tem dentro — O ÍNDICE, no layout do print de referência (v1.15.0)
 *
 * Duas versões foram reprovadas antes desta: o trilho com fio costurado
 * (v1.9.4) e as duas folhas empilhadas, creme e azul (v1.14.0). Esta reproduz o
 * print que ele mandou, e o print é claro: **coluna de discurso à esquerda,
 * índice à direita, e nada mais** — sem card, sem painel, sem fundo de bloco.
 * O índice é o papel.
 *
 * O que sustenta a leitura de "página impressa":
 *
 *   1. A ENTRADA É UMA GRADE DE TRÊS COLUNAS de larguras fixas em `fr`, com
 *      filete no topo de cada linha. As três colunas alinham verticalmente entre
 *      TODAS as entradas, e é esse alinhamento que o olho lê como acabamento.
 *   2. O TÍTULO DA ENTRADA VAI EM DISPLAY ITÁLICO — assinatura do print, e
 *      exceção deliberada à regra da página (o itálico normalmente marca só uma
 *      palavra dentro de um título grande). Aqui ele carrega a linha inteira.
 *   3. O ALGARISMO É MIÚDO E ESPAÇADO, não display grande: no print ele é
 *      referência de índice, não peça gráfica. Ele acende no acento quando a
 *      entrada entra em leitura, e é aí que mora o movimento.
 *   4. O TÍTULO ENTRA ESCREVENDO — `clip-path: inset()` abrindo da esquerda. É o
 *      único lugar da página com esse movimento, de propósito.
 *
 * A coluna da esquerda GRUDA. **Sem `overflow: hidden` em ancestral nenhum** —
 * qualquer overflow diferente de `visible` vira contêiner de rolagem e mata o
 * sticky sem erro e sem aviso. Pelo mesmo motivo o `[data-reveal]` (que aplica
 * `transform`) fica no bloco DE DENTRO da coluna, nunca na coluna nem na seção.
 * ------------------------------------------------------------------------- */

.vd-toc {
	/* Campo quente próprio, como no print: um degradê vertical de meio tom, sem
	   borda e sem raio. Dá chão à seção sem transformá-la num bloco. */
	/* NASCE E MORRE no bege da página. Começar no creme deixaria um degrau na
	   emenda com a seção de cima — só 5 unidades de diferença, mas suficiente
	   para desenhar um fio reto de borda a borda. O calor entra logo abaixo da
	   borda e some antes do fim. */
	background: linear-gradient(to bottom,
		var(--vd-bg) 0%,
		var(--vd-cream) 14%,
		var(--vd-bg) 72%,
		var(--vd-bg) 100%);
	padding-top: clamp(56px, 6vw, 104px);
	padding-bottom: clamp(56px, 6vw, 104px);
}

.vd-toc__grid {
	display: grid;
	gap: clamp(36px, 4vw, 64px);
}

/* --- A coluna de discurso ------------------------------------------------- */

body.vitta-diario .vd-toc__title {
	max-width: 15ch;
}

.vd-toc__pin .vd-lede {
	max-width: 40ch;
}

/* O botão é peça do layout do print, onde ele vive AO LADO do índice. No
   estreito ele empilha logo abaixo do parágrafo e vira o TERCEIRO "Comprar o
   Diário" seguido — o da seção anterior, este, e a barra fixa do rodapé. Some,
   e a ação continua a um toque de distância na barra. */
body.vitta-diario .vd-toc__cta {
	display: none;
}

@media (min-width: 1000px) {
	body.vitta-diario .vd-toc__cta {
		display: inline-flex;
		margin-top: clamp(26px, 3vw, 40px);
	}
}

/* --- A rubrica de cada fase ----------------------------------------------- */

.vd-group + .vd-group {
	/* O vão que SEPARA AS DUAS PARTES. É maior que qualquer distância dentro de
	   um grupo — é ele, e não uma linha, que diz que ali começa outra fase. */
	margin-top: clamp(48px, 5.4vw, 88px);
}

.vd-group__head {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 22px);
	margin-bottom: clamp(10px, 1.2vw, 18px);
}

/* Caixa alta e não itálico: em itálico a rubrica competiria com os títulos das
   entradas, que são justamente o que o print põe em itálico. */
body.vitta-diario .vd-group__name {
	flex: none;
	margin: 0;
	font-family: var(--v-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vd-gold-ink);
}

.vd-group__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--vd-line);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.vd-group__total {
	flex: none;
	font-family: var(--v-display);
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--vd-navy-mute);
}

.vd-group__total::before {
	content: "/ ";
	color: var(--vd-gold-ink);
}

/* --- As entradas do índice ------------------------------------------------ */

body.vitta-diario .vd-entries {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vd-entry {
	position: relative;
	display: grid;
	align-items: start;
	gap: 4px clamp(16px, 2vw, 32px);
	padding: clamp(16px, 1.8vw, 24px) 0;
	border-top: 1px solid var(--vd-hair);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"num"
		"title"
		"text";
}

.vd-entry:last-child {
	border-bottom: 1px solid var(--vd-hair);
}

/* Miúdo e espaçado — referência de índice, não peça gráfica. `tabular-nums`
   para os dez algarismos ocuparem exatamente a mesma largura. */
.vd-entry__num {
	grid-area: num;
	align-self: start;
	font-family: var(--v-body);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums;
	color: var(--vd-navy-mute);
	transition: color 0.45s ease;
}

/* O ITÁLICO DO PRINT. Peso 300 e `WONK` ligado é como a Fraunces entrega o
   itálico do sistema — o mesmo do `.vd-em`, só que aqui na linha inteira. */
body.vitta-diario .vd-entry__title {
	grid-area: title;
	margin: 0;
	font-family: var(--v-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	line-height: 1.28;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	color: var(--vd-navy);
	text-wrap: pretty;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* A caixa que o `clip-path` abre. `inline-block` é obrigatório: em elemento de
   linha o recorte pega a caixa do bloco e a animação não acontece. */
.vd-entry__ink {
	display: inline-block;
}

.vd-entry__text {
	grid-area: text;
	margin: 0;
	font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	font-weight: 300;
	line-height: 1.55;
	color: var(--vd-navy-soft);
	max-width: 42ch;
}

/* O filete de acento que percorre a entrada em leitura. Filete é o idioma do
   sistema — fundo colorido aqui leria como interface, não como página. */
.vd-entry__sweep {
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--vd-gold-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

/* --- Entrada em cena ------------------------------------------------------ */

html.vh-js .vd-entry__ink {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 0.06s + 0.1s);
}

html.vh-js .vd-entry__num,
html.vh-js .vd-entry__text {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.7s ease calc(var(--i, 0) * 0.06s + 0.22s),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.06s + 0.22s),
		color 0.45s ease;
}

html.vh-js .vd-entry.is-in .vd-entry__ink {
	clip-path: inset(0 0 0 0);
}

html.vh-js .vd-entry.is-in .vd-entry__num,
html.vh-js .vd-entry.is-in .vd-entry__text {
	opacity: 1;
	transform: none;
}

html.vh-js .vd-group.is-in .vd-group__rule {
	transform: scaleX(1);
}

/* --- Estado desperto: hover, foco e a entrada que a rolagem elege ---------- */

.vd-entry:hover .vd-entry__sweep,
.vd-entry:focus-within .vd-entry__sweep,
.vd-entry.is-awake .vd-entry__sweep {
	transform: scaleX(1);
}

.vd-entry:hover .vd-entry__num,
.vd-entry:focus-within .vd-entry__num,
.vd-entry.is-awake .vd-entry__num {
	color: var(--vd-gold-ink);
}

.vd-entry:hover .vd-entry__title,
.vd-entry:focus-within .vd-entry__title {
	transform: translateX(5px);
}

/* --- Desktop: discurso à esquerda, índice à direita ----------------------- */

@media (min-width: 1000px) {
	/* ARMADILHA: **sem `align-items: stretch` o sticky não gruda em nada.** Com
	   `start`, a coluna da esquerda encolhe até a altura do próprio conteúdo — e
	   um sticky dentro de um contêiner da altura dele mesmo não tem para onde se
	   mover. Nada quebra, nada avisa: a coluna simplesmente sobe junto com a
	   página. Quem precisa ser alto é o CONTÊINER (`__aside`, esticado pela
	   linha da grade), não o elemento grudado. */
	.vd-toc__grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: clamp(48px, 6vw, 130px);
		align-items: stretch;
	}

	/* O índice é longo; sem grudar, o discurso sai de cena na terceira entrada. */
	.vd-toc__pin {
		position: sticky;
		top: clamp(80px, 13vh, 132px);
	}

	.vd-entry {
		gap: 0 clamp(20px, 2.2vw, 44px);
		grid-template-columns: clamp(40px, 3.4vw, 58px) minmax(0, 0.92fr) minmax(0, 1.08fr);
		grid-template-areas: "num title text";
		align-items: start;
	}

	.vd-entry__title {
		padding-top: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.vh-js .vd-entry__ink {
		clip-path: none;
		transition: none;
	}

	html.vh-js .vd-entry__num,
	html.vh-js .vd-entry__text {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vd-group__rule {
		transform: scaleX(1);
		transition: none;
	}

	.vd-entry__sweep,
	body.vitta-diario .vd-entry__title {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * 3b. A galeria do objeto (10/09/2026)
 *
 * UMA FAIXA DE ALTURA FIXA, e cada foto com a PRÓPRIA largura (`--r`, a
 * proporção dela). As seis vão de 9:16 a 16:9: cortar todas no mesmo formato
 * mataria a página aberta e a vista de cima. O caderno é deitado, e a faixa
 * horizontal repete o formato do objeto.
 *
 * O CAMPO É O AZUL chapado da marca, sem o padrão dourado da seção das artes
 * (que é a outra faixa escura da página e não pode ser repetida): as fotos são
 * quentes e texturizadas e acendem sobre o azul — sobre o bege elas sumiriam.
 *
 * A faixa começa ALINHADA ao texto (`--g-edge`, a mesma borda do container) e
 * escapa pela direita até a borda da tela: a foto cortada no fim é o que diz
 * que dá para rolar.
 *
 * Sem sombra debaixo das fotos, sem hover que mexe em cada uma e sem entrada
 * animada — a lista de tiques dele. O que diz "clicável" é o cursor de zoom, o
 * foco visível e o "toque para ampliar" da legenda.
 *
 * `ul`, `img`, `button` e `figure` levam `body.vitta-diario` na frente: os
 * resets `body.vitta-home ul/img` são (0,1,2) e ganham de classe sozinha — em
 * silêncio. É a armadilha nº 1 do projeto.
 * ------------------------------------------------------------------------- */

.vd-gallery {
	/* Altura da faixa: 260 → 420px. Com ela e os respiros abaixo, a seção
	   inteira cabe numa tela de 1440 × 900 — é o "não ocupar muita tela" do
	   pedido, medido. */
	--g-h: clamp(260px, 28vw, 420px);
	--g-gap: clamp(12px, 1.3vw, 20px);
	/* Teto de largura por foto. No largo não há teto; no estreito é 84vw. */
	--g-maxw: 200vw;
	/* A borda esquerda do conteúdo do container (max 1760 + margem). */
	--g-edge: max(var(--v-pad), calc((100vw - var(--v-max)) / 2 + var(--v-pad)));
	position: relative;
	padding: clamp(64px, 6.4vw, 112px) 0 clamp(52px, 5vw, 88px);
	background: var(--vd-navy);
	color: var(--vd-cream);
}

/* O título é curto e o `.vd-head__text` herda 46ch, pensado para os títulos
   longos da página: aqui ele quebrava "de / verdade" em duas linhas e a seção
   ganhava 70px de altura à toa. */
.vd-gallery__head .vd-head__text {
	max-width: 62ch;
}
.vd-gallery__head {
	margin-bottom: clamp(28px, 3.2vw, 48px);
}

.vd-gallery__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

/* As setas do folhear, invertidas para o azul. */
body.vitta-diario .vd-gallery .vd-arrow {
	border-color: rgba(246, 238, 227, 0.3);
	color: var(--vd-cream);
}

body.vitta-diario .vd-gallery .vd-arrow:hover:not(:disabled) {
	background: var(--vd-cream);
	border-color: var(--vd-cream);
	color: var(--vd-navy);
}

body.vitta-diario [data-gallery-prev] .vh-icon {
	transform: rotate(180deg);
}

/* --- A faixa ------------------------------------------------------------- */

body.vitta-diario .vd-gallery__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--g-edge);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}

.vd-gallery__rail::-webkit-scrollbar {
	display: none;
}

/* Arrastando com o mouse: a trava desliga para a faixa acompanhar a mão, e
   religa ao soltar (o navegador reencaixa sozinho na foto mais próxima). */
body.vitta-diario .vd-gallery__rail.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

body.vitta-diario .vd-gallery__rail:focus-visible {
	outline: 2px solid var(--vd-gold);
	outline-offset: -2px;
}

/* O recheio vertical existe para o anel de foco das fotos não ser cortado pelo
   `overflow` da faixa. O da direita é o respiro depois da última foto. */
body.vitta-diario .vd-gallery__track {
	display: flex;
	align-items: flex-start;
	gap: var(--g-gap);
	width: max-content;
	margin: 0;
	padding: 6px var(--g-edge);
	list-style: none;
}

.vd-gallery__item {
	flex: none;
	width: min(calc(var(--g-h) * var(--r)), var(--g-maxw));
	scroll-snap-align: start;
}

body.vitta-diario .vd-gallery__fig {
	margin: 0;
}

body.vitta-diario .vd-gallery__frame {
	display: block;
	width: 100%;
	height: var(--g-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--vd-r-media);
	overflow: hidden;
	/* Enquanto a foto não chega (lazy), o lugar dela é um azul um tom acima. */
	background: var(--vd-navy-2);
	cursor: zoom-in;
}

body.vitta-diario .vd-gallery__frame:focus-visible {
	outline: 2px solid var(--vd-gold);
	outline-offset: 3px;
}

body.vitta-diario .vd-gallery__img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	-webkit-user-drag: none;
}

/* O RECORTE do caderno (fundo transparente) pousa direto no azul: sem moldura,
   sem raio, com uma luz creme bem baixa atrás e sombra que segue o CONTORNO
   (`drop-shadow`), não um retângulo. */
body.vitta-diario .vd-gallery__item--obj .vd-gallery__frame {
	overflow: visible;
	border-radius: 0;
	background: radial-gradient(ellipse 58% 52% at 50% 54%, rgba(246, 238, 227, 0.1) 0%, rgba(246, 238, 227, 0) 72%);
}

body.vitta-diario .vd-gallery__item--obj .vd-gallery__img {
	box-sizing: border-box;
	padding: 9% 6%;
	object-fit: contain;
	filter:
		drop-shadow(0 8px 10px rgba(0, 0, 0, 0.32))
		drop-shadow(0 30px 40px rgba(0, 0, 0, 0.34));
}

/* A legenda diz o que a foto mostra, e só fato. */
.vd-gallery__cap {
	margin-top: 14px;
	max-width: 34ch;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.45;
	color: var(--vd-cream-soft);
	text-wrap: pretty;
}

/* --- A posição ----------------------------------------------------------- */

.vd-gallery__count {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin: clamp(24px, 2.8vw, 40px) 0 0;
	font-size: 0.8125rem;
	color: var(--vd-cream-mute);
}

/* Os mesmos números em display dourado da contagem da §6 ("01 / 07"). */
.vd-gallery__num {
	font-family: var(--v-display);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	color: var(--vd-gold);
}

/* --- Estreito ------------------------------------------------------------ */

@media (max-width: 899px) {
	.vd-gallery {
		--g-h: clamp(240px, 68vw, 340px);
		/* Uma foto larga (a página aberta, 16:9) ficaria mais larga que a tela.
		   Com teto, ela recorta pelo `--pos` e a próxima continua espiando. */
		--g-maxw: 84vw;
	}
}

/* No telefone o gesto é deslizar: as setas sairiam empilhadas embaixo do
   texto (é quando o `.vd-head--split` vira coluna) sem função nova. A contagem
   "N de 6" continua dizendo onde se está. */
@media (max-width: 699px) {
	.vd-gallery__nav {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 4b. As artes exclusivas — a PAREDE DE GALERIA (v1.33.0)
 *
 * Até aqui a arte do Michel Massih só existia nesta página como AMBIENTE:
 * recortada atrás do hero, sangrando no pé dos cards da §3, velada no fecho. Em
 * nenhum lugar ela era mostrada como ARTE. Esta seção inverte isso — obra
 * inteira, sem recorte, sem véu, sem texto por cima.
 *
 * O DESENHO VEM DO ASSUNTO: parede escura de museu (arte colorida canta sobre
 * escuro), obras em larguras diferentes e alturas desencontradas, e legenda de
 * parede com a página em que cada uma vive no livro.
 *
 * O QUE ESTA SEÇÃO DELIBERADAMENTE NÃO TEM, porque é a lista de tiques que ele
 * reprovou: card com recheio, sombra difusa debaixo de cada peça, entrada em
 * fade-up peça por peça, e grade de itens do mesmo tamanho. As obras não são
 * cards — não têm fundo, não têm sombra e nenhuma tem a largura da vizinha.
 *
 * O ÚNICO MOVIMENTO é a deriva das duas colunas na rolagem, e ele segue o padrão
 * da casa: o JS escreve UMA variável (`--p`, 0→1) e toda a geometria é `calc()`
 * no CSS — ajustar o efeito é mexer aqui, nunca no JS. É o mesmo contrato do
 * scrub do hero da home.
 * ------------------------------------------------------------------------- */

.vd-arts {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(72px, 8vw, 132px) 0 clamp(80px, 9vw, 148px);
	background: linear-gradient(168deg, var(--vd-navy-2) 0%, var(--vd-navy) 62%);
}

.vd-arts__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--vd-gold);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: 460px auto;
	mask-size: 460px auto;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.05;
}

/* --- Cabeçalho: o discurso e a assinatura -------------------------------- */

.vd-arts__head {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	margin-bottom: clamp(44px, 5vw, 76px);
}

.vd-arts__intro {
	margin-bottom: 0;
	max-width: 46ch;
}

/* v1.54.0 — o título novo ("Arte original criada unicamente para este Diário",
   dele) é mais longo, e nos 46ch do bloco ele quebrava em QUATRO linhas com
   "criada" sozinha numa delas. De 700px para cima o TÍTULO ganha a coluna
   inteira e quebra equilibrado — a parte romana numa linha, o itálico na outra
   (medido a 768, 1100 e 1440) —, enquanto o parágrafo continua exatamente na
   medida de antes (29rem = os 464px dos 46ch). Nenhum corpo de letra mudou.
   No celular a quebra de sempre já é a melhor e fica como está. */
@media (min-width: 700px) {
	body.vitta-diario .vd-arts__intro {
		max-width: none;
	}

	body.vitta-diario .vd-arts__intro .vd-lede {
		max-width: 29rem;
	}

	body.vitta-diario .vd-arts__intro .vd-h2 {
		text-wrap: balance;
	}
}

/* A assinatura do artista. Filete EM CIMA — horizontal, que é o que a regra de
   "nada de borda de um lado só" permite: divisor de bloco, nunca tarja lateral.
   O crédito é o assunto da seção, então ganha peso de display, não de legenda. */
.vd-arts__credit {
	margin: 0;
	padding-top: clamp(14px, 1.6vw, 20px);
	border-top: 1px solid rgba(233, 161, 78, 0.34);
	font-family: var(--v-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.3;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	color: var(--vd-gold);
}

/* v1.60.0 — o retrato do artista, ao lado do nome. PEQUENO e sem moldura
   colorida: é o rosto de quem assina, não uma peça da seção — o foco continua
   nas obras. Círculo, porque é o formato de assinatura/avatar e não compete
   com as obras retangulares da parede. `body.vitta-diario` na frente: o reset
   de `img` da casa (0,1,2) venceria uma classe sozinha (armadilha nº 1). */
.vd-arts__credit--foto {
	display: flex;
	align-items: center;
	gap: 14px;
}

body.vitta-diario .vd-arts__retrato {
	flex: none;
	display: block;
	width: clamp(44px, 3.4vw, 52px);
	height: auto;
	max-width: none;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

/* v1.59.0 — a citação do artista, abaixo do nome. DISCRETA a pedido dele: o
   crédito continua sendo a peça de display (serifa itálica dourada); a citação
   desce para o corpo da página — Inter leve, creme apagado, corpo menor — e
   fica presa ao nome pela proximidade, não por fio ou tarja.

   Reset do `blockquote` com `body.vitta-diario` na frente: o tema base (e o
   navegador) dão margem, recuo, itálico e, no Storefront, um filete de UM LADO
   SÓ — o tique proibido no projeto. */
body.vitta-diario .vd-arts__quote {
	margin: clamp(10px, 1.2vw, 14px) 0 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	max-width: 42ch;
	font-family: var(--v-body);
	font-style: normal;
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--vd-cream-soft);
}

body.vitta-diario .vd-arts__quote::before,
body.vitta-diario .vd-arts__quote::after {
	content: none;
}

body.vitta-diario .vd-arts__quote p {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* --- A parede ------------------------------------------------------------ */

.vd-arts__wall {
	display: grid;
	gap: clamp(40px, 5vw, 72px);
}

.vd-arts__col {
	display: grid;
	gap: clamp(40px, 4.6vw, 76px);
	align-content: start;
}

.vd-arts__piece {
	margin: 0;
	width: 100%;
}

/* A obra. Sem recheio, sem fundo, sem sombra: o que a define contra a parede é
   um FIO de 1px nos quatro lados — que é a borda do papel, não uma tarja. */
.vd-arts__frame {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--vd-r-media);
	overflow: hidden;
	background: rgba(1, 32, 58, 0.4);
	box-shadow: inset 0 0 0 1px rgba(246, 238, 227, 0.16);
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

.vd-arts__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.vd-arts__frame:hover .vd-arts__img,
.vd-arts__frame:focus-visible .vd-arts__img {
	transform: scale(1.035);
}

body.vitta-diario .vd-arts__frame:focus-visible {
	outline: 2px solid var(--vd-gold);
	outline-offset: 3px;
}

/* --- A legenda de parede -------------------------------------------------- */

.vd-arts__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: 14px;
}

/* O DADO da legenda: a página em que a obra vive no livro impresso. É ele que
   impede a seção de virar banco de imagens — cada arte é rastreável ao objeto
   que a pessoa está comprando. */
.vd-arts__page {
	font-family: var(--v-display);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
	transition: color 0.4s ease;
}

.vd-arts__zoom {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--vd-cream-mute);
}

.vd-arts__frame:hover + .vd-arts__label .vd-arts__page,
.vd-arts__frame:focus-visible + .vd-arts__label .vd-arts__page {
	color: var(--vd-gold);
}

/* Texto só para leitor de tela. A página emite o próprio documento e não carrega
   o `main.css` do tema, então o `.screen-reader-text` do Noord não existe aqui —
   sem esta classe, o rótulo do botão apareceria na tela. */
.vd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Desktop: duas colunas desencontradas, e a deriva --------------------- */

@media (min-width: 900px) {
	/* A assinatura alinha pelo TOPO, ao lado do título — como a placa de parede
	   fica ao lado da entrada da sala. Alinhada pela base ela descia até o pé do
	   título de três linhas e abria um buraco no meio do cabeçalho. */
	.vd-arts__head {
		grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
		align-items: start;
		gap: clamp(32px, 4vw, 80px);
	}

	.vd-arts__credit {
		margin-top: clamp(8px, 1.4vw, 18px);
	}

	.vd-arts__wall {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	/* O desencontro das colunas. Estático, não animado: é composição, e é ele
	   que impede as seis obras de lerem como grade. */
	.vd-arts__col--b {
		margin-top: clamp(56px, 8vw, 132px);
	}

	/* As obras da esquerda encostam à esquerda, as da direita à direita: a
	   silhueta externa da parede fica reta e a calha do meio é que respira. */
	.vd-arts__col--a .vd-arts__piece {
		width: var(--w, 100%);
		margin-right: auto;
	}

	.vd-arts__col--b .vd-arts__piece {
		width: var(--w, 100%);
		margin-left: auto;
	}

	/* A DERIVA. `--p` vai de 0 a 1 enquanto a seção atravessa a tela; as duas
	   colunas andam em sentidos opostos, 30px cada, o que soma 60px de
	   deslocamento relativo do começo ao fim. Pouco de propósito: é para o olho
	   sentir profundidade, não para ver as peças correndo. */
	.vd-arts__col--a {
		transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * 30px), 0);
	}

	.vd-arts__col--b {
		transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 30px), 0);
	}
}

/* --- A ampliação, quando o que ela mostra é ARTE -------------------------- */

/* ARMADILHA: a ampliação da §5 pinta a imagem com `mix-blend-mode: multiply`
   sobre papel pólen — é o que faz uma página escaneada parecer papel de verdade.
   Numa ilustração colorida isso escurece tudo e suja as cores. A galeria abre a
   MESMA caixa, então precisa desligar o tratamento de papel. */
body.vitta-diario .vd-zoom--art .vd-zoom__figure img {
	background: none;
	mix-blend-mode: normal;
}

body.vitta-diario .vd-zoom--art .vd-zoom__figure {
	background: none;
}

/* --- Movimento reduzido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vd-arts__col--a,
	.vd-arts__col--b {
		transform: none;
	}

	.vd-arts__img {
		transition: none;
	}

	.vd-arts__frame:hover .vd-arts__img,
	.vd-arts__frame:focus-visible .vd-arts__img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Folheie o miolo
 *
 * A peça é 21 × 14 cm PAISAGEM (medido: 595 × 397 pt no PDF) — o palco tem 3:2,
 * que é exatamente a proporção das artes do miolo.
 *
 * SEM JS a fita é rolável na horizontal; o empilhamento e a virada só existem
 * sob `html.vh-js`. Nada aqui é essencial para ler a página.
 * ------------------------------------------------------------------------- */

.vd-flip__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.vd-flip__stage {
	position: relative;
	aspect-ratio: 3 / 2;
	/* TETO DUPLO — largura E altura de tela. A peça é 3:2, então cada pixel de
	   largura vira 0,66 de altura, e um teto só de largura ignora a tela: medido a
	   1440 × 900, o palco dava 885px de alto e o conjunto palco + legenda +
	   miniaturas somava 1021px numa área útil de 859 — cortava, que foi o relato.
	   Os 210px descontados são o que fica ao redor: barra de anúncio fixa (41) +
	   legenda e miniaturas com os vãos (136) + respiro (33). O `1200px` é o teto
	   em telas altas — era 1360, e desceu junto. */
	max-width: min(1200px, calc((100svh - 210px) * 1.5));
	margin-inline: auto;
	border-radius: var(--vd-r-block);
	background: var(--vd-cream);
	box-shadow: var(--vd-shadow-lg);
	perspective: 2400px;
}


body.vitta-diario .vd-flip__pages {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
	overflow-x: auto;
	border-radius: var(--vd-r-block);
}

/* ---------------------------------------------------------------------------
 * PÁGINAS AMARELADAS — pedido da cliente na revisão de 03/09/2026:
 * *"Tem como por um efeito e deixar essas paginas amareladas? Senão a pessoa
 * acha que é branca..."*
 *
 * O papel do Diário é PÓLEN (amarelado), mas o escaneamento saiu branco e o
 * site estava vendendo papel branco.
 *
 * `filter: sepia()` NÃO resolve: sobre branco puro ele devolve #FFFFEF, quase
 * imperceptível. Quem resolve é `mix-blend-mode: multiply` com um fundo de
 * papel atrás — o branco da folha vira exatamente a cor do fundo e a tinta
 * preta continua preta. Por isso cada caixa que mostra página do miolo tem
 * `background: var(--vd-paper)` e `isolation: isolate` (sem isolar, o blend
 * atravessaria e sujaria a seção inteira).
 * ------------------------------------------------------------------------- */

.vd-flip__page {
	flex: 0 0 92%;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--vd-r-block);
	background: var(--vd-paper);
}

.vd-flip__page img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

/* Sombra de lombada: dá espessura à página sem desenhar um livro. */
.vd-flip__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(1, 32, 58, 0.26) 0%, rgba(1, 32, 58, 0.05) 7%, rgba(1, 32, 58, 0) 16%);
}

html.vh-js body.vitta-diario .vd-flip__pages {
	display: block;
	overflow: visible;
	transform-style: preserve-3d;
}

html.vh-js .vd-flip__page {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform-origin: left center;
	backface-visibility: hidden;
	/* SEM `transform` nesta lista, DE PROPÓSITO. Quem anima o giro é o estado que
	   pede o giro (`is-active` na entrada, `is-out` na saída); a volta ao repouso
	   tem de ser INSTANTÂNEA. Com `transform` aqui, tirar o `is-out` no fim da
	   virada fazia a página que saiu voltar girando de -148° até 0° — e como o
	   fade da base ainda tem 0,24s de atraso, ela voltava OPACA, aparecendo por
	   cima por ~0,6s. Era o defeito relatado, e só acontecia ao AVANÇAR, porque
	   ao voltar a página que sai nunca gira. */
	transition:
		opacity 0.4s ease 0.24s,
		visibility 0s linear 0.78s;
}

html.vh-js .vd-flip__page.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transform: rotateY(0deg);
	transition:
		transform 0.78s cubic-bezier(0.3, 0.05, 0.2, 1),
		opacity 0.3s ease,
		visibility 0s linear 0s;
}

/* A página que sai gira sobre a lombada esquerda e some no fim do arco.
   `opacity: 0` é o que faz o "some no fim do arco" acontecer DE VERDADE: com
   `opacity: 1` o fade declarado logo abaixo nunca tinha o que animar, e o
   apagamento sobrava para o momento em que o JS tira a classe — tarde demais. */
html.vh-js .vd-flip__page.is-out {
	z-index: 3;
	opacity: 0;
	visibility: visible;
	transform: rotateY(-148deg);
	transition:
		transform 0.78s cubic-bezier(0.3, 0.05, 0.2, 1),
		opacity 0.26s ease 0.5s,
		visibility 0s linear 0.78s;
}

/* Voltar: a página entra girada e desce até o plano. */
html.vh-js .vd-flip__page.is-in {
	transform: rotateY(-148deg);
	transition: none;
}

html.vh-js .vd-flip__page.is-top {
	z-index: 4;
}

/* NO ESTREITO A PÁGINA OCUPA A TELA INTEIRA (pedido dele). O palco sai do recuo
   do container por margem negativa do MESMO valor do padding — assim ele encosta
   nas duas bordas sem `100vw`, que somaria a largura da barra de rolagem e criaria
   estouro horizontal. O raio vai a zero nos TRÊS níveis (palco, trilho e página):
   a página tem `overflow: hidden` própria, então só zerar o palco deixaria o creme
   do fundo aparecendo nos quatro cantos. Canto arredondado encostado na borda da
   tela lê como recorte, não como cartão. Legenda e miniaturas ficam no recuo do
   container de propósito — são controle, não conteúdo.

   ESTE BLOCO PRECISA FICAR AQUI, depois das regras de estado: `.vd-flip__page` e
   `body.vitta-diario .vd-flip__pages` são declarados mais acima com a MESMA
   especificidade, e quem decide é a ordem. Colocado junto do palco, o raio dos
   filhos continuava em 24px — medido. */
@media (max-width: 899px) {
	.vd-flip__stage {
		max-width: none;
		margin-inline: calc(var(--v-pad) * -1);
		border-radius: 0;
	}

	body.vitta-diario .vd-flip__pages,
	.vd-flip__page {
		border-radius: 0;
	}
}

.vd-flip__cap {
	max-width: 1360px;
	margin: 18px auto 0;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--vd-navy-soft);
}

body.vitta-diario .vd-flip__thumbs {
	display: flex;
	gap: 10px;
	/* Acompanha o teto do palco: as miniaturas são a régua dele. */
	max-width: 1360px;
	margin: clamp(20px, 2.2vw, 28px) auto 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	/* No toque não existe barra de rolagem visível: o esmaecido na ponta direita
	   é o que diz que a fita continua. */
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
}

.vd-thumb {
	display: block;
	flex: none;
	width: clamp(78px, 8vw, 116px);
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	isolation: isolate;
	background: var(--vd-paper);
	opacity: 0.5;
	box-shadow: 0 0 0 1px var(--vd-hair);
	transition: opacity 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.vd-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.vd-thumb:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.vd-thumb.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--vd-gold);
}

/* v1.56.0 — o aviso da sequência e as miniaturas CENTRALIZADOS sob a página
   (pedido dele, com print). O aviso ocupa o lugar e o corpo da antiga legenda
   "Página X de Y · toque para ampliar".

   A centralização da fita é por MARGEM AUTOMÁTICA na primeira e na última
   miniatura, e não `justify-content: center`: a fita rola na horizontal no
   celular (seis miniaturas não cabem em 390px), e `center` num contêiner que
   transborda empurra as primeiras para fora da borda ESQUERDA, onde a rolagem
   não alcança. Margem `auto` vira zero quando falta espaço — centraliza quando
   cabe e encosta à esquerda quando rola. */
.vd-flip__note {
	text-align: center;
	text-wrap: balance;
}

body.vitta-diario .vd-flip__thumbs > li:first-child {
	margin-left: auto;
}

body.vitta-diario .vd-flip__thumbs > li:last-child {
	margin-right: auto;
}

/* v1.57.0 — o contorno dourado da miniatura ativa saía CORTADO em cima (print
   dele). A fita tem `overflow-x: auto`, e isso obriga o eixo Y a recortar
   também: o anel de 2px (`box-shadow`) e o levantar de 2px do hover caíam fora
   da caixa, que não tinha folga no topo. 4px de recheio em cima e dos lados
   cabem os dois; a margem de cima desconta os mesmos 4px, então a fita não
   desce. Os lados cobrem a 1ª e a última miniatura quando a fita rola, no
   celular, onde elas encostam na borda. */
body.vitta-diario .vd-flip__thumbs {
	padding: 4px 4px 6px;
	margin-top: calc(clamp(20px, 2.2vw, 28px) - 4px);
}

/* ---------------------------------------------------------------------------
 * Chrome compartilhado — ajustes de contexto
 * ------------------------------------------------------------------------- */

/* A barra fixa nasce visível nesta página (não há hero com scrub para revelá-la);
   nada muda no desenho dela, que é a assinatura do site. */

/* ---------------------------------------------------------------------------
 * Movimento reduzido
 *
 * O bloco global desta skin já zera durações, mas `animation-duration` em algo
 * `infinite` não PARA: deixa repintando. Precisa de `animation: none`.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html.vh-js .vd-flip__page {
		transition: opacity 0.001ms !important;
		transform: none !important;
	}

	.vd-faq__item,
	.vd-faq__sign::before,
	.vd-faq__sign::after {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Acabamentos
 * ------------------------------------------------------------------------- */

/* A seta de "voltar" reusa o mesmo glifo da de "avançar", girado. A home faz isso
   por `[data-carousel-prev]`; aqui o gatilho é outro atributo. */
body.vitta-diario [data-flip-prev] .vh-icon {
	transform: rotate(180deg);
}

/* Cabeçalho com controles: abaixo de 700px os dois blocos não cabem lado a lado
   sem espremer o título. */
@media (max-width: 699px) {
	.vd-head--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * Copy aprovada (2026-08-28) — o que ela trouxe de novo
 * ------------------------------------------------------------------------- */

/* Legenda de navegação do folhear: "Página X de Y · toque para ampliar". */
.vd-flip__sep {
	padding: 0 8px;
	color: var(--vd-gold);
}

.vd-flip__hint {
	color: var(--vd-gold-ink);
}

/* O palco é o alvo do "toque para ampliar" — precisa dizer isso pelo cursor e
   aceitar foco de teclado. O `role="button"` está no markup. */
.vd-flip__stage {
	cursor: zoom-in;
}

body.vitta-diario .vd-flip__stage:focus-visible {
	outline: 2px solid var(--vd-gold-ink);
	outline-offset: 6px;
}

/* --- Ampliação ----------------------------------------------------------- */

.vd-zoom {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(1, 22, 42, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: zoom-out;
}

/* O atributo `hidden` perde para `display: flex` — sem esta regra a ampliação
   nasceria aberta em cima da página. */
body.vitta-diario .vd-zoom[hidden] {
	display: none;
}

.vd-zoom__figure {
	margin: 0;
	max-width: min(100%, 1600px);
	max-height: 100%;
	border-radius: var(--vd-r-card);
	overflow: hidden;
	box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8);
	cursor: default;
}

.vd-zoom__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 88svh;
	object-fit: contain;
	/* Mesmo tratamento da miniatura e do palco: a ampliação é a mesma folha. */
	background: var(--vd-paper);
	mix-blend-mode: multiply;
}

/* AMPLIAÇÃO EM TELA ESTREITA: ajustar pela ALTURA e deixar arrastar de lado.
   As páginas do miolo são 21 × 14 cm DEITADAS e trazem texto corrido. Encaixar
   a largura numa tela de 390 devolve a página inteira com corpo de ~5px — ou
   seja, o "toque para ampliar" não ampliava nada, justamente na tela em que
   ele é a única forma de ler. Aqui a página passa a caber na ALTURA (a folga
   que sobrava em cima e embaixo vira tamanho de letra) e a caixa rola na
   horizontal, com rolagem nativa — sem JS, e o dedo já sabe o gesto.
   O `flex: none` é obrigatório: item de flex encolhe por padrão e desfaria a
   largura maior que a tela antes de qualquer rolagem existir. */
@media (max-width: 899px) {
	.vd-zoom__figure {
		flex: none;
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.vd-zoom__figure::-webkit-scrollbar {
		display: none;
	}

	/* O `body.vitta-diario` é OBRIGATÓRIO aqui: `body.vitta-home img` é (0,1,2)
	   e vence `.vd-zoom__figure img` (0,1,1) — o `max-width: none` era ignorado
	   em silêncio e a página continuava encaixada na largura da tela, com o
	   `height` novo só achatando a imagem. Mesma armadilha do `ul` da home. */
	body.vitta-diario .vd-zoom__figure img {
		width: auto;
		max-width: none;
		height: 78svh;
		max-height: none;
	}

	/* FOTO (a galeria do objeto, 10/09/2026): o oposto da regra acima. *"No
	   mobile as fotos precisam se ajustar quando clicam pra abrir (...) tem que
	   abrir a foto inteira."* Ajustar pela altura e arrastar de lado é o certo
	   para PÁGINA com texto; numa foto cortava a imagem e escondia o resto.
	   Aqui ela cabe inteira: largura e altura com teto, proporção preservada,
	   nenhuma rolagem. (0,3,2) — ganha da regra acima por especificidade. */
	body.vitta-diario .vd-zoom--photo .vd-zoom__figure {
		overflow: hidden;
	}

	body.vitta-diario .vd-zoom--photo .vd-zoom__figure img {
		width: auto;
		max-width: 100%;
		height: auto;
		/* O teto é a ALTURA ÚTIL da caixa (tela menos o respiro de `.vd-zoom`),
		   não um "84svh" solto: com celular deitado (390 de altura) os 84svh
		   passavam 5px do espaço e a borda de baixo da foto saía cortada. */
		max-height: calc(100svh - 2 * clamp(16px, 4vw, 56px));
	}
}

/* O mesmo teto no largo, só para FOTO: a 1440 × 900 os 88svh da regra geral dão
   792px numa caixa de 788 — e uma foto em pé perdia 4px embaixo. (As páginas do
   miolo e as artes seguem com a regra geral, que é como estavam aprovadas.) */
@media (min-width: 900px) {
	body.vitta-diario .vd-zoom--photo .vd-zoom__figure img {
		max-height: calc(100svh - 2 * clamp(16px, 4vw, 56px));
	}
}

.vd-zoom__close {
	position: absolute;
	top: clamp(14px, 2.4vw, 30px);
	right: clamp(14px, 2.4vw, 30px);
	width: 48px;
	height: 48px;
	border: 1px solid rgba(246, 238, 227, 0.28);
	border-radius: var(--vd-r-pill);
	background: rgba(1, 32, 58, 0.5);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.vd-zoom__close::before,
.vd-zoom__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 17px;
	height: 1.5px;
	background: var(--vd-cream);
	transform: translate(-50%, -50%) rotate(45deg);
}

.vd-zoom__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.vd-zoom__close:hover {
	background: rgba(1, 32, 58, 0.85);
	transform: scale(1.05);
}

/* --- Oferta: o frete grátis é benefício, e ganha peso na linha de preço --- */

.vd-price__free {
	color: var(--vd-gold-ink);
	font-weight: 500;
}


/* ARMADILHA MEDIDA: arrastar em cima de uma `<img>` dispara o DRAG NATIVO do
   navegador (a imagem "descola" e vira fantasma), o `pointerup` nunca chega ao
   palco e o gesto de virar página simplesmente não acontece — sem erro nenhum
   no console. Some com `-webkit-user-drag: none` + seleção desligada. */
.vd-flip__stage {
	-webkit-user-select: none;
	user-select: none;
}

.vd-flip__page img,
.vd-thumb img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ---------------------------------------------------------------------------
 * v1.11.0 — a estrutura, não só a pintura
 *
 * A passagem anterior mapeou os tokens da referência mas manteve o esqueleto e
 * ESTREITOU a página — e foi exatamente isso que ele reprovou. Aqui a largura
 * volta e o que muda é a ARQUITETURA das seções.
 * ------------------------------------------------------------------------- */

/* A largura volta ao que a home usa. O respiro premium vem de folga interna e
   de medida de leitura por bloco, NUNCA de espremer o container: numa tela de
   1920 o cap de 1280 deixava 320px de nada de cada lado e a página encolhia. */
body.vitta-diario {
	--v-max: 1760px;
	--v-pad: clamp(24px, 3.4vw, 64px);
	--v-gap: clamp(88px, 9vw, 152px);

	/* Medida de leitura por papel — é o que substitui o cap de container. */
	--vd-measure: 62ch;
}

/* ---------------------------------------------------------------------------
 * Barra de anúncio
 * ------------------------------------------------------------------------- */

/* Grudada no topo, como na referência. Precisa ser FIXA e não de fluxo: a
   barra de navegação desta página já é `position: fixed` e nasce visível — em
   fluxo, a faixa ficava POR BAIXO dela e o logo aparecia cortado. */
.vd-ann {
	position: fixed;
	z-index: 70;
	top: 0;
	left: 0;
	right: 0;
	background: var(--vd-navy);
	color: var(--vd-cream);
}

body.vitta-diario .vd-ann__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 14px;
	margin: 0 auto;
	max-width: var(--v-max);
	padding: 11px var(--v-pad);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

/* Bolinha no acento separando os itens — o separador de lista da referência. */
.vd-ann__item + .vd-ann__item::before {
	content: "·";
	padding-right: 14px;
	color: var(--vd-gold);
	font-weight: 700;
}

body.vitta-diario .vd-ann__link {
	color: var(--vd-gold);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	/* Recheio para o DEDO, margem negativa para o LAYOUT: a área de toque vira
	   ~42px sem a faixa crescer um pixel. Medido antes: 100×18, pequeno demais
	   para o único link do topo da página. */
	display: inline-block;
	padding: 12px 6px;
	margin: -12px -6px;
}

body.vitta-diario .vd-ann__link:hover {
	color: var(--vd-cream);
}

/* Abaixo de 560 a faixa quebra em três linhas e come a primeira tela. */
@media (max-width: 559px) {
	.vd-ann__item + .vd-ann__item {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Barra de compra fixa no rodapé da tela (v1.13.0)
 *
 * Substituiu a navegação: a página não tem menu. Numa página de UM produto o
 * menu só oferece saídas — o que vale acompanhar a rolagem é a compra.
 *
 * A estrutura é a da referência que ele mandou: pílula flutuante, texto em duas
 * linhas à esquerda (rótulo em caixa alta, preço grande) e botão de acento à
 * direita. A cor é a NOSSA — azul e dourado da página, não o vinho da referência.
 *
 * Os estados seguem a receita da `.vh-bar` da home, inclusive o atraso na
 * `visibility`: sem ele o foco do teclado cai dentro da barra enquanto ela está
 * invisível.
 * ------------------------------------------------------------------------- */

.vd-buybar {
	position: fixed;
	z-index: 65;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 var(--v-pad) clamp(16px, 2.4svh, 30px);
	/* A faixa é só o trilho; quem recebe clique é a pílula. */
	pointer-events: none;

	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 0.34s ease,
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.34s;
}

.vd-buybar.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.vd-buybar__pill {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 48px);
	margin: 0 auto;
	max-width: 780px;
	padding: 12px 12px 12px clamp(22px, 2.6vw, 38px);
	border-radius: var(--vd-r-pill);
	/* O degradê é o mesmo dos blocos escuros da página — a barra pertence ao
	   sistema, não é um widget colado por cima dele. */
	background: linear-gradient(160deg, var(--vd-navy-2) 0%, var(--vd-navy) 62%);
	border: 1px solid rgba(246, 238, 227, 0.14);
	box-shadow: rgba(1, 32, 58, 0.34) 0 18px 48px 0;
}

.vd-buybar__body {
	min-width: 0;
}

.vd-buybar__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0 0 4px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vd-cream-mute);
}

.vd-buybar__name {
	color: var(--vd-cream-soft);
}

/* Bolinha no acento — o mesmo separador da barra de anúncio. */
.vd-buybar__frete::before {
	content: "·";
	padding-right: 12px;
	color: var(--vd-gold);
	font-weight: 700;
}

.vd-buybar__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0;
}

.vd-buybar__value {
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
	line-height: 1.1;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
}

/* O frete acompanha o preço na pílula: é o único complemento que sobrou depois
   de o parcelamento sair (2026-09-01). */
.vd-buybar__meta {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--vd-cream-mute);
	/* Cada frase inteira ou nada: a quebra acontece entre elas, nunca no meio. */
	white-space: nowrap;
}


/* Sobre o azul o acento PREENCHE — 7,6:1 no fundo escuro. Mesma regra do CTA
   do hero. */
body.vitta-diario .vd-buybar__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border-radius: var(--vd-r-pill);
	background: var(--vd-gold);
	color: var(--vd-navy);
	font-family: var(--v-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.023em;
	white-space: nowrap;
	transition: background-color 0.22s ease, transform 0.22s ease;
}

body.vitta-diario .vd-buybar__cta:hover {
	background: var(--vd-cream);
	transform: translateY(-1px);
}

/* No estreito a pílula é a largura da tela e o rótulo em caixa alta sai: sobram
   o preço, a nota do placeholder e o botão, que é o que a barra existe para
   fazer. */
@media (max-width: 639px) {
	.vd-buybar {
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 12px;
	}

	.vd-buybar__pill {
		gap: 14px;
		padding: 10px 10px 10px 20px;
		border-radius: 22px;
	}

	.vd-buybar__kicker {
		display: none;
	}

	.vd-buybar__price {
		gap: 0 10px;
	}

	.vd-buybar__meta {
		font-size: 0.6875rem;
	}

	/* No estreito preco e frete caem em linhas proprias, e a bolinha do
	   separador ficaria pendurada no comeco da linha. */
	.vd-buybar__frete::before {
		content: none;
	}

	body.vitta-diario .vd-buybar__cta {
		padding: 13px 20px;
		font-size: 0.875rem;
	}
}

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

	.vd-buybar.is-on {
		transition-delay: 0s;
	}

	body.vitta-diario .vd-buybar__cta:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 1. Hero — faixa de borda a borda com a arte ao fundo
 *
 * A altura é `min-height` em `svh` e não `aspect-ratio`: o conteúdo é texto e
 * precisa poder crescer sem cortar. O véu é o que garante o contraste do creme
 * sobre a arte — sem ele o texto some nas partes claras da ilustração.
 * ------------------------------------------------------------------------- */

.vd-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(880px, 92svh);
	margin: 0;
	/* Reserva so a barra de anuncio (41px). Ate a v1.12.2 este topo tambem
	   guardava lugar para a pilula de navegacao, que saiu na v1.13.0. */
	padding: clamp(96px, 12svh, 152px) 0 clamp(56px, 7svh, 104px);
	overflow: hidden;
	isolation: isolate;
	background: var(--vd-navy);
}

.vd-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vd-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A arte tem as figuras à direita e o céu à esquerda: ancorar à direita
	   mantém as mulheres visíveis e entrega o céu para o texto. */
	object-position: 78% center;
	/* A ARTE SE DISSOLVE NO AZUL (v1.12.2). Ela é a ÚNICA imagem desta descida:
	   a seção seguinte é azul chapado, e a emenda entre as duas só desaparece se
	   o hero chegar ao pé sem imagem nenhuma.

	   A máscara é o degrade em `alpha`, não um véu de cor por cima: véu escurece
	   a arte, máscara a APAGA — e o que fica embaixo é o `background` azul da
	   própria seção, exatamente o mesmo `--vd-navy` da seção 2. Zero costura.

	   A curva é `smoothstep`, não reta: reta tem cotovelo visível nas duas
	   pontas e é justamente onde o olho pega a emenda. Segura cheia até 45% (a
	   arte precisa existir de verdade na primeira dobra) e desce em S até zero. */
	-webkit-mask-image: linear-gradient(to bottom,
		#000 0%,
		#000 45%,
		rgba(0, 0, 0, 0.913) 55%,
		rgba(0, 0, 0, 0.699) 65%,
		rgba(0, 0, 0, 0.514) 72%,
		rgba(0, 0, 0, 0.301) 80%,
		rgba(0, 0, 0, 0.122) 88%,
		rgba(0, 0, 0, 0.033) 94%,
		rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom,
		#000 0%,
		#000 45%,
		rgba(0, 0, 0, 0.913) 55%,
		rgba(0, 0, 0, 0.699) 65%,
		rgba(0, 0, 0, 0.514) 72%,
		rgba(0, 0, 0, 0.301) 80%,
		rgba(0, 0, 0, 0.122) 88%,
		rgba(0, 0, 0, 0.033) 94%,
		rgba(0, 0, 0, 0) 100%);
}

/* Véu em DUAS camadas: uma vertical que assenta a base e uma horizontal que
   escurece o lado do texto. Uma só não resolve — a vertical clarearia o topo do
   título, e a horizontal sozinha deixaria o rodapé da faixa lavado. */
.vd-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(1, 32, 58, 0.96) 0%,
			rgba(1, 32, 58, 0.9) 34%,
			rgba(1, 32, 58, 0.42) 62%,
			rgba(1, 32, 58, 0.24) 100%),
		linear-gradient(to top,
			rgba(1, 32, 58, 0.72) 0%,
			rgba(1, 32, 58, 0.44) 14%,
			rgba(1, 32, 58, 0) 46%);
}

/* A FOTO DA MESA (13/09/2026). A foto nova é o Diário, os cards e o marcador
   sobre MADEIRA — e ele não queria a madeira, só a parte da frente. O arquivo já
   vem recortado em volta dos objetos; aqui a foto deixa de COBRIR a faixa (com
   `cover` a madeira que sobra ia de ponta a ponta) e passa a ocupar a altura do
   hero encostada à direita. O resto da faixa é o azul da própria seção.

   A máscara dissolve a foto nos QUATRO lados, em interseção: esquerda e topo
   abrem a madeira no azul, o pé é a mesma descida em S de antes (a arte chega ao
   fim do hero sem imagem nenhuma — a regra da emenda com a §2 continua valendo),
   só que segurando cheia até 58%, porque o Diário mora na metade de baixo desta
   foto. É o "foco de luz" que o caderno já tinha no celular.

   Com `body.vitta-diario` na frente: `.vd-hero__img` sozinha perde `max-width`
   e `height` para o reset de `img` do tema (armadilha nº 1). */
@media (min-width: 900px) {
	body.vitta-diario .vd-hero__img {
		position: absolute;
		top: 0;
		/* Em desktop estreito a foto sai um pouco pela direita (até 220px), senão o
		   Diário cai embaixo do texto; de 1320px para cima encosta na borda. */
		right: clamp(-220px, calc((100vw - 1320px) * 0.75), 0px);
		width: auto;
		max-width: none;
		height: 100%;
		object-fit: fill;
		-webkit-mask-image:
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 9%, rgba(0, 0, 0, 0.88) 17%, #000 24%),
			linear-gradient(to bottom,
				rgba(0, 0, 0, 0) 0%,
				#000 8%,
				#000 68%,
				rgba(0, 0, 0, 0.913) 74%,
				rgba(0, 0, 0, 0.699) 80%,
				rgba(0, 0, 0, 0.514) 84%,
				rgba(0, 0, 0, 0.301) 89%,
				rgba(0, 0, 0, 0.122) 94%,
				rgba(0, 0, 0, 0.033) 97%,
				rgba(0, 0, 0, 0) 100%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 9%, rgba(0, 0, 0, 0.88) 17%, #000 24%),
			linear-gradient(to bottom,
				rgba(0, 0, 0, 0) 0%,
				#000 8%,
				#000 68%,
				rgba(0, 0, 0, 0.913) 74%,
				rgba(0, 0, 0, 0.699) 80%,
				rgba(0, 0, 0, 0.514) 84%,
				rgba(0, 0, 0, 0.301) 89%,
				rgba(0, 0, 0, 0.122) 94%,
				rgba(0, 0, 0, 0.033) 97%,
				rgba(0, 0, 0, 0) 100%);
		mask-composite: intersect;
	}

	/* 13/09/2026, 2ª volta — *"um pouco desfocado, queria menos desfocado pra ver
	   mais os produtos"*. O véu da direita (0,42 → 0,24) ficava por cima da foto
	   inteira; agora ele só existe onde o TEXTO passa e some antes do Diário. A
	   máscara também encurtou (esquerda 36% → 24%, topo 16% → 8%, pé segurando
	   cheio até 68%). A descida no pé continua chegando a zero. */
	.vd-hero__scrim {
		background:
			linear-gradient(to right,
				rgba(1, 32, 58, 0.96) 0%,
				rgba(1, 32, 58, 0.9) 30%,
				rgba(1, 32, 58, 0.34) 47%,
				rgba(1, 32, 58, 0.06) 62%,
				rgba(1, 32, 58, 0) 100%),
			linear-gradient(to top,
				rgba(1, 32, 58, 0.6) 0%,
				rgba(1, 32, 58, 0.24) 12%,
				rgba(1, 32, 58, 0) 30%);
	}
}

.vd-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.vd-hero__body {
	max-width: 46ch;
}

/* A pílula acima do título — o "badge" da referência. */
.vd-badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: clamp(20px, 2.4vw, 32px);
	padding: 8px 18px;
	border: 1px solid rgba(246, 238, 227, 0.34);
	border-radius: var(--vd-r-pill);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.023em;
	text-transform: uppercase;
	color: var(--vd-cream);
}

body.vitta-diario .vd-hero__title {
	color: var(--vd-cream);
	max-width: 14ch;
}

.vd-hero__tagline {
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	font-family: var(--v-body);
	font-weight: 300;
	font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
	line-height: 1.35;
	color: var(--vd-cream);
	max-width: 30ch;
}

.vd-hero__text {
	margin: 18px 0 0;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--vd-cream-soft);
	max-width: 46ch;
}

.vd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 2.4vw, 32px);
	margin-top: clamp(32px, 3.6vw, 48px);
}

/* Sobre o azul o acento PREENCHE: ali ele é o CTA principal e o dourado tem
   7,6:1 no fundo escuro. */
body.vitta-diario .vd-hero .vd-btn--primary {
	background: var(--vd-gold);
	color: var(--vd-navy);
}

body.vitta-diario .vd-hero .vd-btn--primary:hover {
	background: var(--vd-cream);
	color: var(--vd-navy);
}

.vd-btn--lg {
	padding: 18px 36px;
	font-size: 1.0625rem;
}

.vd-heroprice {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vd-heroprice__value {
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
}

.vd-heroprice__meta {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--vd-cream-mute);
}

/* A foto do caderno EM FLUXO — só existe no estreito (ver o bloco de <=899px).
   No largo quem mostra o caderno é o fundo. */
.vd-hero__shot {
	display: none;
}

@media (max-width: 899px) {
	.vd-hero {
		min-height: 0;
		padding-top: clamp(86px, 11svh, 124px);
	}

	.vd-hero__img {
		object-position: 68% center;
	}

	/* No estreito o texto atravessa a largura toda, então o véu tem de fechar em
	   cima — mas não embaixo. Até a v1.15.0 ele fechava nos dois, e junto com a
	   máscara isso apagava a arte por inteiro: o hero da página de produto ficava
	   um retângulo azul liso, sem o objeto que está sendo vendido.
	   Agora o véu é VERTICAL e decrescente: pesado onde a copy passa, solto na
	   faixa do botão e do preço, que é onde a arte finalmente aparece. */
	.vd-hero__scrim {
		background:
			linear-gradient(to bottom,
				rgba(1, 32, 58, 0.93) 0%,
				rgba(1, 32, 58, 0.9) 66%,
				rgba(1, 32, 58, 0.64) 82%,
				rgba(1, 32, 58, 0.46) 100%);
	}

	/* E a máscara segura a arte por mais tempo: com o corte em 45% ela morria
	   antes de chegar à faixa que o véu abriu. */
	.vd-hero__img {
		-webkit-mask-image: linear-gradient(to bottom,
			#000 0%,
			#000 62%,
			rgba(0, 0, 0, 0.86) 72%,
			rgba(0, 0, 0, 0.55) 82%,
			rgba(0, 0, 0, 0.22) 92%,
			rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to bottom,
			#000 0%,
			#000 62%,
			rgba(0, 0, 0, 0.86) 72%,
			rgba(0, 0, 0, 0.55) 82%,
			rgba(0, 0, 0, 0.22) 92%,
			rgba(0, 0, 0, 0) 100%);
	}

	/* O CADERNO NO CELULAR (10/09/2026). *"No mobile ele tinha que aparecer de
	   alguma maneira."* Com o texto na largura toda e o véu pesado onde ele passa,
	   o fundo não mostra o produto — só deixava um fantasma das letras da capa
	   atrás do título. Então, no estreito:

	   1. o FUNDO some (o hero fica no azul da própria seção, o mesmo `--vd-navy`
	      em que a arte já se dissolvia) — e o fantasma vai junto;
	   2. o caderno entra NO FLUXO, depois do preço (texto primeiro, produto
	      depois, como na home), numa faixa de borda a borda.

	   As regras de véu e máscara acima ficam como estão: voltam a valer no dia em
	   que o fundo voltar a aparecer no estreito. */
	.vd-hero__stage {
		display: none;
	}

	/* A faixa vai de BORDA A BORDA da tela (`100vw` a partir da margem do
	   container), senão, a 768px, a foto terminaria no meio da tela com um corte
	   reto. O `overflow: hidden` do hero segura a sobra da barra de rolagem.
	   A máscara dissolve nos QUATRO lados (vertical × horizontal, em interseção):
	   a 1ª versão só dissolvia em cima e embaixo, e o veludo — mais escuro que o
	   `--vd-navy` — lia como uma TIRA retangular atravessando a tela. Dissolvendo
	   também dos lados, o veludo só existe em volta do caderno, como um foco de
	   luz. A máscara mora no CONTÊINER, e não na imagem — então a imagem pode ser
	   ampliada e deslocada sem arrastar o degradê junto. */
	.vd-hero__shot {
		display: block;
		position: relative;
		width: 100vw;
		height: clamp(320px, 86vw, 500px);
		margin: clamp(20px, 5vw, 36px) 0 0 calc(var(--v-pad) * -1);
		overflow: hidden;
		-webkit-mask-image:
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 24%, #000 76%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 13%, #000 87%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 24%, #000 76%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 13%, #000 87%, rgba(0, 0, 0, 0) 100%);
		mask-composite: intersect;
	}

	/* Enquadrada no caderno pela ALTURA: a imagem tem 114% da altura da faixa, e
	   o `translate` (que é relativo à própria imagem) põe o centro do caderno —
	   62,9% × 51,1% do arquivo `hero-caderno-zoom.webp` — no centro da faixa.
	   Resultado: o caderno ocupa ~65% da largura a 390px, centralizado, em
	   qualquer largura do estreito, sem número mágico por tela.

	   Com `body.vitta-diario` na frente DE PROPÓSITO: escrita como
	   `.vd-hero__shot img`, a regra PERDIA o `max-width` para o reset de `img`
	   do tema — medido: `max-width: 100%` computado, a imagem travada na largura
	   da faixa e ACHATADA (390x382 em vez de 679x382), sem erro nenhum. É a
	   armadilha nº 1 do projeto, em regra de `img`. */
	body.vitta-diario .vd-hero__shot img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		max-width: none;
		/* 13/09/2026, foto da mesa: o conjunto (Diário, cards e marcador) ocupa o
		   arquivo quase inteiro, com o centro em ~51% x 55%. 112% da faixa deixa
		   o kit inteiro à vista, e a dissolução dos quatro lados come a madeira. */
		height: 112%;
		transform: translate(-51%, -55%);
	}
}

/* ---------------------------------------------------------------------------
 * 2. O problema — a faixa editorial da página
 *
 * Era split screen com metade da dobra ocupada por um espaço reservado vazio.
 * Virou faixa de borda a borda com arte REAL do miolo ao fundo: o padrão da
 * referência para citação sobre foto escurecida.
 * ------------------------------------------------------------------------- */

.vd-problem {
	position: relative;
	display: flex;
	align-items: center;
	/* SEM vão antes: o hero e o problema são UM movimento, não duas seções.
	   A barra creme que existia aqui até a v1.12.0 era o `--v-gap` caindo entre
	   duas faixas escuras — lia como listra solta porque não tinha função
	   nenhuma: separava o que a leitura não quer separado.

	   A lógica do trecho é uma descida de luz. O hero é a promessa e mostra a
	   arte; a rolagem ESCURECE até o silêncio de que o texto fala ("a pressão
	   pode empurrar tudo isso para o silêncio"); a primeira luz que volta é a
	   frase-ponte em dourado; e só depois dela a página abre no creme, junto com
	   a solução. Creme no meio dessa descida seria uma janela aberta no meio de
	   um quarto escuro. */
	margin-top: 0;
	/* O pé é folgado DE PROPÓSITO: é o comprimento do amanhecer abaixo. O vão
	   não é sobra, é o tempo que a luz leva para subir — e é ele que permite o
	   degrade longo, que é a única maneira de a passagem azul→creme não ter
	   costura. Cair para o valor antigo devolve a listra dura. */
	padding: clamp(120px, 14vw, 220px) 0 clamp(300px, 30vw, 520px);
	overflow: hidden;
	isolation: isolate;

	/* AZUL CHAPADO + O AMANHECER NO PÉ (v1.12.2).
	 *
	 * Não há mais imagem aqui (ver `problema.php`), então também não há véu: o
	 * que era `__scrim` virou o próprio `background`. A faixa é o mesmo
	 * `--vd-navy` em que a arte do hero se dissolve — a emenda entre as duas
	 * seções deixou de existir porque as duas terminam e começam na MESMA cor.
	 *
	 * O degrade final era uma lasca de 90–180px com creme translúcido por cima
	 * do azul, e era o defeito mais visível da página: curto demais para o olho
	 * não ver a rampa, e translúcido demais para escapar do meio-tom. Este é o
	 * oposto em tudo:
	 *
	 *   1. ALTO — 300 a 520px. Suavidade de degrade é comprimento; não existe
	 *      atalho. Numa lasca curta cada passo de cor vira uma listra.
	 *   2. OPACO — 17 paradas de cor cheia, nada de alfa. Creme com alfa sobre
	 *      azul PRODUZ o cinza sujo; com cor cheia eu escolho por onde a rampa
	 *      passa.
	 *   3. INTERPOLADO EM OKLAB, com `smoothstep` — passo perceptualmente igual
	 *      do começo ao fim, sem o meio queimado que a interpolação em sRGB (ou
	 *      em luz linear) entrega.
	 *   4. INTERPOLADO EM MATIZ, NÃO EM EIXO — e é este o ponto que salva a
	 *      rampa. O azul e o creme estão em lados opostos do eixo amarelo-azul:
	 *      qualquer caminho RETO entre os dois passa pelo croma ZERO, e croma
	 *      zero em meio-tom é cinza — a névoa suja que estragava a versão
	 *      anterior. Girando o MATIZ (248° → 84° pelo lado crescente, via
	 *      púrpura) o croma nunca chega a zero: o meio vira um lilás de
	 *      madrugada em vez de cinza, e a rampa lê como o céu clareando, que é
	 *      exatamente o sentido do trecho. O croma ainda leva um afundamento de
	 *      35% no miolo para o lilás ficar poeira, não cor. Da metade para cima,
	 *      onde o giro já saiu do azul, entra ainda um empurrão quente: é o que
	 *      transforma o cinza-rosado do fim numa faixa de pêssego. A rampa
	 *      inteira lê como um amanhecer — azul, índigo, rosa poeira, pêssego,
	 *      creme —, e não como um azul apagando.
	 *
	 *      Efeito colateral bem-vindo: a primeira parada depois do azul é
	 *      rgb(7,34,58) — um passo de nada. A emenda com o azul chapado acima
	 *      não existe. (Uma rampa curvada só para o quente escurecia AQUI, e o
	 *      degrau escuro no início era visível como um fio.)
	 *
	 * Se um dia alguém reduzir a altura, tem de refazer as paradas: a curva é
	 * calculada para ESTE comprimento. */
	background:
		linear-gradient(to bottom,
			rgb(1, 32, 58) 0%,
			rgb(7, 34, 58) 6.25%,
			rgb(20, 39, 63) 12.5%,
			rgb(35, 46, 71) 18.75%,
			rgb(53, 57, 80) 25%,
			rgb(73, 70, 92) 31.25%,
			rgb(95, 86, 105) 37.5%,
			rgb(120, 103, 115) 43.75%,
			rgb(146, 122, 123) 50%,
			rgb(172, 142, 132) 56.25%,
			rgb(195, 162, 143) 62.5%,
			rgb(215, 182, 157) 68.75%,
			rgb(231, 201, 174) 75%,
			rgb(243, 217, 191) 81.25%,
			rgb(250, 230, 208) 87.5%,
			rgb(253, 239, 223) 93.75%,
			rgb(251, 243, 233) 100%)
			bottom / 100% clamp(280px, 28vw, 480px) no-repeat,
		/* A BASE debaixo do degradê (10/09/2026). Era `--vd-navy` chapado até o pé,
		   e ele pediu para tirar "essa linha final": um fio azul-acinzentado no fim
		   do amanhecer. Com a altura da seção caindo em fração de pixel (zoom do
		   Windows, janela com barra de rolagem), o navegador pode deixar a última
		   fileira sem a camada do degradê — e o que aparecia ali era o AZUL.
		   Agora os últimos 140px da base são o creme final da rampa. O degradê é
		   opaco e cobre sempre no mínimo 280px, então a troca fica escondida por
		   baixo dele e a rampa na tela é idêntica; qualquer sobra de subpixel sai
		   creme sobre creme. */
		linear-gradient(to bottom,
			var(--vd-navy) calc(100% - 140px),
			rgb(251, 243, 233) calc(100% - 140px))
		var(--vd-navy);
}

.vd-problem__inner {
	position: relative;
	z-index: 2;
	text-align: center;
}

body.vitta-diario .vd-problem__title {
	margin: 0 auto;
	max-width: 18ch;
	color: var(--vd-cream);
}

.vd-problem__text {
	margin: clamp(28px, 3vw, 40px) auto 0;
	max-width: 62ch;
	font-size: clamp(1rem, 0.94rem + 0.34vw, 1.1875rem);
	line-height: 1.68;
	color: var(--vd-cream-soft);
}

/* A virada do problema para a solução — display itálico grande, centralizado,
   com respiro largo antes. É a última coisa lida antes de o produto aparecer. */
.vd-problem__bridge {
	position: relative;
	margin: clamp(44px, 5vw, 72px) auto 0;
	padding: 0;
	max-width: 24ch;
	font-family: var(--v-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.5rem, 1rem + 1.9vw, 2.75rem);
	line-height: 1.2;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	color: var(--vd-gold);
}

.vd-problem__bridge::before {
	content: none;
}

/* ---------------------------------------------------------------------------
 * 6. O objeto — A ANATOMIA DESENHADA A TRAÇO (refeita do zero na v1.14.0)
 *
 * As sete linhas de especificação com marca de conferido (v1.11.0) resolviam a
 * falta de foto, mas resolviam como TABELA — e tabela não vende acabamento.
 *
 * O que existe aqui agora: a coluna de texto de um lado, e do outro um PALCO
 * FIXO onde o glifo do detalhe em leitura SE DESENHA. O traço nasce vazio e é
 * preenchido por `stroke-dashoffset`; ao sair, apaga e volta a nascer da próxima
 * vez. É o movimento mais caro da página e o mais barato de rodar — uma
 * propriedade animada, sem imagem e sem biblioteca.
 *
 * DUAS COISAS QUE NÃO PODEM SER DESFEITAS:
 *
 *  1. `overflow: hidden` no bloco MATA o `position: sticky` do palco — qualquer
 *     ancestral com overflow diferente de `visible` vira contêiner de rolagem e
 *     o sticky para de grudar, sem erro e sem aviso. O padrão da marca entra
 *     como camada posicionada com `border-radius: inherit`, nunca por recorte.
 *  2. `[data-reveal]` aplica `transform` enquanto não revela, e transform em
 *     ancestral é o OUTRO jeito de estragar o sticky. Por isso o `data-reveal`
 *     fica só no cabeçalho, nunca no `<section>` nem no bloco.
 *
 * `pathLength="1"` está em todo traço do SVG: com ele o comprimento real deixa
 * de importar e um único par dasharray/dashoffset desenha qualquer caminho no
 * mesmo tempo.
 * ------------------------------------------------------------------------- */

.vd-object__block {
	position: relative;
	padding: clamp(36px, 4vw, 88px) clamp(22px, 3.2vw, 72px);
	border-radius: var(--vd-r-block);
	background: linear-gradient(168deg, var(--vd-navy-2) 0%, var(--vd-navy) 58%);
	isolation: isolate;
}

.vd-object__pattern {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background-color: var(--vd-gold);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-webkit-mask-size: 420px auto;
	mask-size: 420px auto;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.06;
}

.vd-object__grid {
	position: relative;
	display: grid;
	gap: clamp(28px, 3vw, 56px);
}

.vd-object__head {
	margin-bottom: clamp(28px, 3vw, 48px);
}

/* --- O palco ------------------------------------------------------------- */

.vd-plate {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

/* O halo é o que impede o desenho de flutuar sobre nada: dá ao glifo um lugar,
   sem desenhar uma caixa em volta dele. */
.vd-plate__halo {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 46%,
		rgba(233, 161, 78, 0.16) 0%,
		rgba(233, 161, 78, 0.05) 46%,
		rgba(233, 161, 78, 0) 72%);
}

.vd-plate__ring {
	position: absolute;
	inset: 4%;
	border-radius: 50%;
	border: 1px solid rgba(246, 238, 227, 0.12);
}

.vd-glyph {
	grid-area: 1 / 1;
	width: 86%;
	height: auto;
	overflow: visible;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.96);
	transition:
		opacity 0.5s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.5s;
}

.vd-glyph.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.vd-glyph path {
	stroke: var(--vd-gold);
	/* Espessura em UNIDADES DO DESENHO (viewBox 240), não em pixels de tela: com
	   o glifo a ~360px, 1,05 vira ~1,6px. Ver a armadilha logo abaixo. */
	stroke-width: 1.05;
	stroke-linecap: round;
	stroke-linejoin: round;

	/* ARMADILHA CARA: `vector-effect: non-scaling-stroke` QUEBRA o `pathLength`.
	   Com ele, o tracejado passa a ser medido no espaço da TELA enquanto o
	   `pathLength="1"` normaliza no espaço do DESENHO — as duas medidas deixam
	   de bater e cada traço para no meio do caminho. Com o glifo a 1,5× o
	   traço parava em ~67% e o desenho ficava permanentemente incompleto, com
	   `stroke-dashoffset` computado em 0 (ou seja: a animação TERMINAVA certa e
	   o desenho continuava errado — não dá para diagnosticar pelo estilo).
	   Aqui não há distorção de proporção, então a escala uniforme do SVG já
	   resolve a espessura sozinha e o efeito não tem serventia. NÃO reintroduzir.
	   (Na home ele é obrigatório no marca-texto, porque lá o
	   `preserveAspectRatio="none"` distorceria a espessura junto com a caixa.) */

	/* O par que desenha. `pathLength="1"` no markup é o que torna esta linha
	   universal: um valor só serve a qualquer caminho. */
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}

/* O traço secundário entra mais apagado — em desenho a traço, hierarquia é
   PESO, não matiz. Uma segunda cor aqui quebraria a unidade do glifo. */
.vd-glyph__soft {
	opacity: 0.5;
	stroke-width: 0.75;
}

.vd-glyph.is-on path {
	stroke-dashoffset: 0;
	/* O escalonamento é o que faz o desenho parecer DESENHADO: os traços saem um
	   atrás do outro, na ordem em que a mão faria. */
	transition-delay: calc(var(--n, 0) * 0.07s + 0.1s);
}

.vd-plate__count {
	position: absolute;
	left: 50%;
	bottom: 2%;
	transform: translateX(-50%);
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-family: var(--v-display);
	font-weight: 400;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream-mute);
	font-size: 0.9375rem;
}

.vd-plate__count b {
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--vd-gold);
}

/* --- Os sete detalhes ----------------------------------------------------- */

body.vitta-diario .vd-details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vd-detail {
	position: relative;
	display: grid;
	grid-template-columns: clamp(38px, 3.4vw, 54px) minmax(0, 1fr);
	gap: 0 clamp(14px, 1.6vw, 24px);
	padding: clamp(16px, 1.8vw, 24px) 0;
	border-top: 1px solid rgba(246, 238, 227, 0.09);
	/* Fora de leitura o detalhe RECUA. Não some — recua: a lista inteira
	   continua legível, mas o olho sabe onde está. */
	opacity: 0.42;
	transition: opacity 0.5s ease;
}

.vd-detail:last-child {
	border-bottom: 1px solid rgba(246, 238, 227, 0.09);
}

.vd-detail.is-live,
.vd-detail:hover,
.vd-detail:focus-within {
	opacity: 1;
}

.vd-detail__num {
	font-family: var(--v-display);
	font-weight: 600;
	font-size: clamp(0.9375rem, 0.86rem + 0.3vw, 1.125rem);
	line-height: 1.5;
	letter-spacing: normal;
	color: transparent;
	-webkit-text-stroke: 1px var(--vd-gold);
	transition: color 0.45s ease;
}

.vd-detail.is-live .vd-detail__num,
.vd-detail:hover .vd-detail__num {
	color: var(--vd-gold);
}

body.vitta-diario .vd-detail__title {
	margin: 0;
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.0625rem, 0.96rem + 0.5vw, 1.375rem);
	line-height: 1.2;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
	text-wrap: pretty;
}

.vd-detail__text {
	margin: 6px 0 0;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--vd-cream-soft);
	max-width: 48ch;
}

/* O fio de acento que marca o detalhe em leitura — o mesmo idioma da seção 4. */
.vd-detail::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--vd-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vd-detail.is-live::before,
.vd-detail:hover::before {
	transform: scaleX(1);
}

/* --- Desktop: o palco gruda ao lado da leitura ---------------------------- */

@media (min-width: 1000px) {
	/* O palco ocupa as DUAS linhas da coluna da direita. É essa área alta que dá
	   ao `sticky` onde grudar: um sticky só se move dentro da própria área de
	   grade, e numa área da altura dele mesmo ele fica parado. */
	.vd-object__grid {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 0.68fr);
		grid-template-areas:
			"head  stage"
			"list  stage";
		grid-template-rows: auto 1fr;
		gap: 0 clamp(40px, 4.4vw, 96px);
		align-items: start;
	}

	.vd-object__head {
		grid-area: head;
	}

	.vd-details {
		grid-area: list;
	}

	.vd-object__stage {
		grid-area: stage;
		align-self: start;
		position: sticky;
		/* Abaixo da barra de anúncio, com folga. */
		top: clamp(80px, 13vh, 132px);
	}

	.vd-detail {
		grid-template-columns: clamp(48px, 4vw, 72px) minmax(0, 1fr);
	}
}

/* O glifo repetido DENTRO de cada linha só existe no estreito — no largo quem
   desenha é o palco ao lado. */
.vd-detail__glyph {
	display: none;
	grid-area: glyph;
}

/* --- Estreito: um desenho por linha, sem palco ---------------------------- */

@media (max-width: 999px) {
	.vd-object__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(20px, 3vw, 32px);
	}

	.vd-object__head {
		margin-bottom: clamp(20px, 3vw, 32px);
	}

	/* O PALCO SAI DE CENA NO ESTREITO.
	 *
	 * A versão anterior grudava o palco no topo do bloco e deixava a lista passar
	 * POR BAIXO dele. Não funcionou: o disco de azul cobre o miolo mas dissolve na
	 * borda, então as duas primeiras linhas ficavam meio escondidas atrás do
	 * desenho — ilegíveis sem serem invisíveis, que é o pior dos dois mundos.
	 *
	 * A saída não foi consertar a sobreposição, foi remover a RAZÃO dela: numa
	 * tela estreita não existe "ao lado", então cada linha ganha o SEU desenho.
	 * Some a sobreposição, some a rolagem por baixo, e os sete detalhes passam a
	 * ser ilustrados — não só o que está em leitura. */
	.vd-object__stage {
		display: none;
	}

	.vd-detail {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"glyph num"
			"body  body";
		align-items: center;
		gap: 6px 14px;
	}

	.vd-detail__glyph {
		display: block;
		align-self: center;
		width: 56px;
	}

	.vd-detail__glyph .vd-glyph {
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* A 56px o desenho fica a ~0,23 da escala do quadro: a espessura sobe na mesma
	   proporção para o traço continuar em ~1,4px na tela. */
	.vd-detail__glyph .vd-glyph path {
		stroke-width: 6;
		/* NASCEM DESENHADOS, e não a cada linha que entra em leitura. Testado
		   assim primeiro e não sobrevive ao uso real: numa rolagem rápida o
		   observador não chega a ver algumas linhas, e elas ficam com uma caixa
		   VAZIA de 56px no lugar do desenho — o pior defeito possível numa lista
		   ilustrada. O "se desenhando" continua onde ele é seguro e é o efeito
		   principal: o palco do desktop. Aqui o foco quem carrega é a linha, que
		   acende e apaga. */
		stroke-dashoffset: 0;
	}

	.vd-detail__glyph .vd-glyph .vd-glyph__soft {
		stroke-width: 4.2;
	}

	.vd-detail__num {
		grid-area: num;
		line-height: 1.2;
	}

	.vd-detail__body {
		grid-area: body;
	}
}

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

	.vd-glyph path {
		stroke-dashoffset: 0;
		transition: none;
	}

	.vd-detail::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * v1.12.0 — da seção 3 para baixo, no vocabulário da referência
 *
 * Vem DEPOIS dos blocos antigos de propósito: onde a especificidade empata,
 * quem vence é a ordem, e aqui é este arquivo que manda.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 3. O diário — cards numerados "como funciona"
 * ------------------------------------------------------------------------- */

body.vitta-diario .vd-steps3 {
	display: grid;
	gap: clamp(20px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	body.vitta-diario .vd-steps3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vd-step3 {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 2.8vw, 44px) clamp(24px, 2.4vw, 40px) 0;
	border-radius: var(--vd-r-card);
	background: var(--vd-cream);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	overflow: hidden;
}

/* O algarismo é sólido no acento — pequeno, de rótulo, como na referência.
   (O vazado que preenche é a mecânica da seção 4; repetir aqui roubaria dela.) */
.vd-step3__num {
	display: block;
	margin-bottom: clamp(18px, 2vw, 26px);
	font-family: var(--v-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.023em;
	color: var(--vd-gold-ink);
}

body.vitta-diario .vd-step3__title {
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
	line-height: 1.12;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-navy);
	margin: 0 0 14px;
}

.vd-step3__text {
	margin: 0 0 clamp(28px, 3vw, 44px);
	font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
	line-height: 1.6;
	color: var(--vd-navy-soft);
}

/* A ilustração fecha o card e sangra nas laterais: as margens negativas
   devolvem exatamente o recheio do card, então ela encosta nas bordas sem
   número mágico. `margin-top: auto` alinha o pé dos três cards mesmo com
   textos de alturas diferentes. */
.vd-step3__media {
	margin: auto calc(-1 * clamp(24px, 2.4vw, 40px)) 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.vd-step3__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Card de vídeo -------------------------------------------------------- */

.vd-vid {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin-top: clamp(28px, 3.2vw, 48px);
	min-height: clamp(320px, 46vw, 620px);
	padding: clamp(24px, 3vw, 48px);
	border-radius: var(--vd-r-card);
	overflow: hidden;
	isolation: isolate;
	background: var(--vd-navy);
}

.vd-vid__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vd-vid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 34%;
}

/* Duas camadas: a vertical assenta a legenda no pé, a radial escurece o CENTRO,
   que é onde o botão de play mora. Sem a radial o círculo sumia nos trechos
   claros da arte — e um play que não se vê não convida a nada. */
.vd-vid__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46% 46% at 50% 50%,
			rgba(1, 32, 58, 0.62) 0%,
			rgba(1, 32, 58, 0) 100%),
		linear-gradient(to top,
			rgba(1, 32, 58, 0.92) 0%,
			rgba(1, 32, 58, 0.5) 44%,
			rgba(1, 32, 58, 0.42) 100%);
}

/* Play circular translúcido no centro — ícone de traço, nunca preenchido. */
.vd-vid__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: clamp(76px, 7vw, 104px);
	height: clamp(76px, 7vw, 104px);
	transform: translate(-50%, -50%);
	border: 1.5px solid rgba(246, 238, 227, 0.7);
	border-radius: var(--vd-r-pill);
	background: rgba(246, 238, 227, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.vd-vid__play::before {
	content: "";
	position: absolute;
	left: 55%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--vd-cream);
}

.vd-vid__caption {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vd-vid__title {
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
	line-height: 1.1;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
}

.vd-vid__meta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.023em;
	text-transform: uppercase;
	color: var(--vd-gold);
}

/* --- O card COM o vídeo (13/09/2026) ---------------------------------------
   O vídeo é VERTICAL (1080x1920). O card continua o bloco escuro com a arte e o
   véu; o vídeo entra como peça, na proporção dele.

   2ª volta — *"o vídeo centralizado na página"*. UM eixo só, em qualquer
   largura: quem fala + título em cima, o vídeo no centro, o botão embaixo. A
   arte fica nas laterais, emoldurando; o véu é mais pesado no miolo, onde o
   título e o vídeo passam, e abre para os lados. */

.vd-vid--has {
	flex-direction: column;
	align-items: center;
	gap: clamp(22px, 2.2vw, 30px);
	min-height: 0;
	padding: clamp(32px, 3.6vw, 56px) clamp(20px, 3vw, 48px);
	text-align: center;
}

.vd-vid--has .vd-vid__scrim {
	background:
		radial-gradient(ellipse 42% 62% at 50% 50%, rgba(1, 32, 58, 0.9) 0%, rgba(1, 32, 58, 0.78) 55%, rgba(1, 32, 58, 0) 100%),
		linear-gradient(rgba(1, 32, 58, 0.7), rgba(1, 32, 58, 0.7));
}

.vd-vid--has .vd-vid__caption {
	align-items: center;
	gap: 12px;
}

body.skin-editorial.vitta-diario .vd-vid--has .vd-vid__title {
	margin: 0;
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.625rem, 1.1rem + 1.8vw, 3rem);
	line-height: 1.08;
	letter-spacing: normal;
	text-transform: none;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
	max-width: 22ch;
	text-wrap: balance;
}

/* No celular a largura manda; no largo, a ALTURA (ver o @media), para o vídeo
   caber na tela com o título por cima. */
.vd-vid__player {
	position: relative;
	z-index: 1;
	width: min(100%, 340px);
	margin: 0;
	aspect-ratio: 9 / 16;
	border-radius: var(--vd-r-card);
	overflow: hidden;
	background: var(--vd-navy);
	/* A borda de papel da casa (1px nos QUATRO lados), para o vídeo não se
	   perder no escuro do card antes de a capa carregar. */
	box-shadow: 0 0 0 1px rgba(246, 238, 227, 0.16), 0 24px 60px -24px rgba(0, 8, 18, 0.7);
}

/* `body.vitta-diario` na frente: o reset de `img, video` do tema (0,1,2)
   venceria a classe sozinha e o `height: 100%` morreria em silêncio. */
body.vitta-diario .vd-vid__video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	background: var(--vd-navy);
}

/* O play da casa, agora um botão de verdade sobre a capa. Herda a forma do
   `.vd-vid__play` do espaço reservado; aqui só vira clicável. */
.vd-vid--has .vd-vid__play {
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.vd-vid--has .vd-vid__play:hover,
.vd-vid--has .vd-vid__play:focus-visible {
	background: rgba(246, 238, 227, 0.26);
	transform: translate(-50%, -50%) scale(1.06);
}

.vd-vid--has .vd-vid__play:focus-visible {
	outline: 2px solid var(--vd-gold);
	outline-offset: 4px;
}

body.vitta-diario .vd-vid--has .vd-vid__play[hidden] {
	display: none;
}

/* O botão da seção, dentro do bloco. Sobre o escuro o dourado PREENCHE — a
   mesma regra do herói. */
.vd-vid__cta {
	position: relative;
	z-index: 1;
	width: 100%;
}

body.vitta-diario .vd-vid__cta .vd-btn--primary {
	min-width: min(100%, 340px);
	background: var(--vd-gold);
	color: var(--vd-navy);
}

body.vitta-diario .vd-vid__cta .vd-btn--primary:hover {
	background: var(--vd-cream);
	color: var(--vd-navy);
}

@media (min-width: 900px) {
	.vd-vid__player {
		width: auto;
		/* Título + vídeo + botão cabem numa tela de notebook (1440x900, com a barra
		   de anúncio): medido, o bloco inteiro fica abaixo de 860px. */
		height: clamp(420px, calc(100svh - 380px), 620px);
	}

	/* Uma linha só no largo: em duas, o título empurrava o vídeo para baixo. */
	body.skin-editorial.vitta-diario .vd-vid--has .vd-vid__title {
		max-width: none;
	}
}

.vd-journey__cta {
	margin-top: clamp(32px, 3.6vw, 52px);
	text-align: center;
}

body.vitta-diario .vd-journey__cta .vd-btn {
	min-width: min(100%, 340px);
}

/* ---------------------------------------------------------------------------
 * 6b. O comparativo (v1.42.0)
 *
 * Estrutura do print de referência dele (a tabela do Ser Planner 2027), com a
 * identidade desta página. A peça que decide tudo é a FAIXA DO PRODUTO: a
 * coluna do Diário Guiado é uma faixa contínua de azul colada nas bordas de
 * cima, da direita e de baixo do card. Ninguém precisa ler a tabela para saber
 * de que lado está a resposta.
 *
 * COMO A FAIXA FICA CONTÍNUA: no largo é `display: table` de verdade, então as
 * células da terceira coluna dividem a mesma altura de linha e o azul corre sem
 * emenda. O card tem `overflow: hidden` e é ele que arredonda os cantos da
 * faixa — nenhuma célula precisa de raio próprio.
 *
 * O card é a receita da casa: creme sobre o bege, contorno de 1px, sem sombra.
 * O print tem sombra difusa debaixo do card; aqui não, pelo mesmo motivo da
 * página inteira — a elevação vem do degrau de cor.
 * ------------------------------------------------------------------------- */

/* --- Cabeçalho: título à esquerda, apoio à direita ------------------------ */

.vd-compare__head {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	margin-bottom: clamp(32px, 3.8vw, 56px);
}

.vd-compare__intro .vh-eyebrow {
	display: block;
}

body.vitta-diario .vd-compare__intro .vd-h2 {
	max-width: 14ch;
}

.vd-compare__apoio {
	margin: 0;
	max-width: 42ch;
	font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--vd-navy-soft);
}

/* --- O card e a tabela ---------------------------------------------------- */

.vd-compare__card {
	border-radius: var(--vd-r-block);
	background: var(--vd-cream);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	/* É o card que arredonda os cantos da faixa azul. */
	overflow: hidden;
}

body.vitta-diario .vd-compare__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
}

/* Reset das células: o Storefront e o Noord pintam `th`/`td` com fundo, borda e
   recheio próprios, e (0,1,1) da regra deles vence uma classe sozinha. */
body.vitta-diario .vd-compare__table th,
body.vitta-diario .vd-compare__table td {
	padding: clamp(18px, 1.9vw, 26px) clamp(16px, 2vw, 32px);
	border: 0;
	background: transparent;
	text-align: left;
	vertical-align: middle;
	font-weight: 400;
}

/* ARMADILHA — ZEBRA DO TEMA BASE. `table:not(.has-background) tbody
   tr:nth-child(2n) td` pinta `#fbfbfb` nas linhas PARES e é (0,2,4): vence o
   reset acima, que é (0,2,2). Nas ímpares a irmã dela, `... tbody td` (0,1,3),
   perde — por isso a listra aparecia só de duas em duas linhas, e ler o CSS do
   tema não achava nada (a regra não mora em `assets/css/`). Achada pelo
   `CSS.getMatchedStylesForNode` do navegador. A saída é subir para CLASSE:
   (0,3,1) vence qualquer contagem de elementos. */
body.vitta-diario .vd-compare__table .vd-compare__cell--nao,
body.vitta-diario .vd-compare__table .vd-compare__label {
	background: transparent;
}

/* Filete entre as linhas — horizontal, que é o divisor que a regra permite. */
body.vitta-diario .vd-compare__table tbody tr + tr th,
body.vitta-diario .vd-compare__table tbody tr + tr td,
body.vitta-diario .vd-compare__table tbody tr:first-child th,
body.vitta-diario .vd-compare__table tbody tr:first-child td {
	border-top: 1px solid var(--vd-line);
}

/* --- Colunas: larguras do print ------------------------------------------- */

.vd-compare__corner,
.vd-compare__label {
	width: 32%;
}

.vd-compare__colhead--nao,
.vd-compare__cell--nao {
	width: 26%;
}

/* --- A faixa do produto --------------------------------------------------- */

body.vitta-diario .vd-compare__table .vd-compare__colhead--sim,
body.vitta-diario .vd-compare__table .vd-compare__cell--sim {
	background: linear-gradient(180deg, var(--vd-navy-2) 0%, var(--vd-navy) 70%);
	color: var(--vd-cream);
}

/* Dentro da faixa o filete é creme translúcido: o do card, azul a 14%, sumiria
   contra o próprio azul. */
body.vitta-diario .vd-compare__table tbody .vd-compare__cell--sim {
	border-top-color: rgba(246, 238, 227, 0.14);
}

/* O degradê tem de atravessar a faixa INTEIRA, não recomeçar a cada célula —
   senão cada linha ganha o próprio clareado no topo e a faixa vira listrada.
   `background-attachment` não resolve dentro de tabela; o que resolve é pintar
   as células de cor chapada e deixar o clareado só no cabeçalho. */
body.vitta-diario .vd-compare__table .vd-compare__cell--sim {
	background: var(--vd-navy);
}

/* --- Cabeçalho de colunas: as pílulas ------------------------------------- */

body.vitta-diario .vd-compare__table .vd-compare__colhead {
	padding-top: clamp(22px, 2.4vw, 32px);
	padding-bottom: clamp(16px, 1.8vw, 22px);
	text-align: center;
}

.vd-compare__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 16px;
	border-radius: var(--vd-r-pill);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	font-family: var(--v-body);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vd-navy-mute);
	white-space: nowrap;
}

/* Sobre o azul o acento PREENCHE — é a pílula dourada do print, e é a regra
   dos blocos escuros desta página (dourado com azul: 7,6:1). */
.vd-compare__pill--sim {
	box-shadow: none;
	background: var(--vd-gold);
	color: var(--vd-navy);
}

/* --- As células ----------------------------------------------------------- */

/* Rótulo de linha em display ITÁLICO — do print, e o mesmo tratamento do índice
   da §4, então a página não ganha uma tipografia nova. */
body.vitta-diario .vd-compare__table .vd-compare__label {
	font-family: var(--v-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1rem, 0.92rem + 0.34vw, 1.1875rem);
	line-height: 1.3;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	color: var(--vd-navy);
}

/* A resposta do "comum" é APAGADA de propósito — no print também. Não é
   informação escondida (4,6:1 sobre o creme, passa AA), é hierarquia. */
body.vitta-diario .vd-compare__table .vd-compare__cell--nao {
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--vd-navy-mute);
}

body.vitta-diario .vd-compare__table .vd-compare__cell--sim {
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* O conferido desenhado com dois fios rotacionados — ícone de traço do sistema
   (1,5px, nunca preenchido). Borda que desenha glifo não cai na regra da borda
   de um lado só. */
.vd-compare__answer {
	position: relative;
	display: block;
	padding-left: 26px;
}

.vd-compare__answer::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.2em;
	width: 5px;
	height: 10px;
	border-right: 1.5px solid var(--vd-gold);
	border-bottom: 1.5px solid var(--vd-gold);
	transform: rotate(45deg);
}

/* --- Largo: cabeçalho em duas colunas ------------------------------------- */

@media (min-width: 900px) {
	.vd-compare__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		align-items: end;
		gap: clamp(32px, 5vw, 96px);
	}
}

/* --- Estreito: DUAS colunas, a faixa azul continua inteira ---------------- */

/* v1.58.0 — REFEITO a pedido dele (print: "as cores intercalando e ficando
   esses espaços"). A versão da v1.42.0 punha o rótulo numa linha própria, de
   borda a borda, em cima das duas respostas: cada linha virava uma faixa creme
   CORTANDO a coluna azul, e a coluna do produto — a peça que decide a seção —
   se desfazia em seis blocos soltos, com a sobra do creme entre eles.

   Agora o estreito repete a tese do largo em duas colunas em vez de três: o
   rótulo (o tema da linha, em itálico) sobe para DENTRO da coluna da esquerda,
   em cima da resposta do diário comum, e a resposta do Diário Guiado ocupa a
   altura INTEIRA da linha na direita. Linha colada em linha, sem vão: a faixa
   azul corre do cabeçalho ao pé do card sem uma emenda, só com o filete
   translúcido entre as respostas.

   O `display` muda aqui; os `role` do markup seguram a semântica. */
@media (max-width: 699px) {
	body.vitta-diario .vd-compare__table,
	body.vitta-diario .vd-compare__table thead,
	body.vitta-diario .vd-compare__table tbody {
		display: block;
	}

	/* Coluna 1: o tema e o "comum", empilhados. Coluna 2: o Diário Guiado,
	   atravessando as duas linhas da grade. */
	body.vitta-diario .vd-compare__table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-rows: auto 1fr;
	}

	.vd-compare__corner {
		display: none;
	}

	.vd-compare__corner,
	.vd-compare__label,
	.vd-compare__colhead--nao,
	.vd-compare__cell--nao {
		width: auto;
	}

	body.vitta-diario .vd-compare__table th,
	body.vitta-diario .vd-compare__table td {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.vitta-diario .vd-compare__table .vd-compare__label {
		grid-column: 1;
		grid-row: 1;
		padding-top: 18px;
		padding-bottom: 6px;
	}

	body.vitta-diario .vd-compare__table .vd-compare__cell--nao {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		padding-top: 0;
		padding-bottom: 20px;
		text-align: left;
		font-size: 0.875rem;
	}

	/* O filete de cima já está no tema da linha; no "comum" ele dobraria e
	   cortaria a linha ao meio. ESPECIFICIDADE: o filete vem de
	   `… tbody tr:first-child td` (0,3,4), que vence uma classe (0,3,x) — só a
	   PRIMEIRA linha ficava com o fio. Com `.vd-compare__row` no meio é (0,4,2). */
	body.vitta-diario .vd-compare__table tbody .vd-compare__row .vd-compare__cell--nao {
		border-top: 0;
	}

	/* A resposta do produto ocupa a linha inteira de altura — é o que deixa a
	   faixa contínua — e fica centrada nela. O filete translúcido de cima
	   continua: é o mesmo divisor da coluna da esquerda, na mesma altura. */
	body.vitta-diario .vd-compare__table .vd-compare__cell--sim {
		grid-column: 2;
		grid-row: 1 / -1;
		display: flex;
		align-items: center;
		padding-top: 18px;
		padding-bottom: 18px;
		font-size: 0.875rem;
	}

	/* Cabeçalho: as duas pílulas, cada uma sobre a sua coluna e alinhadas à
	   margem do texto de baixo. */
	body.vitta-diario .vd-compare__table .vd-compare__colhead {
		grid-row: 1;
		padding-top: 18px;
		padding-bottom: 14px;
		text-align: left;
	}

	body.vitta-diario .vd-compare__table .vd-compare__colhead--nao {
		grid-column: 1;
	}

	body.vitta-diario .vd-compare__table .vd-compare__colhead--sim {
		grid-column: 2;
	}

	.vd-compare__pill {
		padding: 6px 12px;
		font-size: 0.625rem;
		letter-spacing: 0.06em;
	}
}

/* ---------------------------------------------------------------------------
 * 7. A oferta — o fecho da venda
 * ------------------------------------------------------------------------- */

.vd-offer__card {
	display: grid;
	gap: clamp(32px, 3.4vw, 52px);
	max-width: 780px;
	margin: 0 auto;
	padding: clamp(36px, 4.4vw, 80px) clamp(24px, 3.4vw, 72px);
	border-radius: var(--vd-r-block);
	background: var(--vd-cream);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	text-align: center;
}

.vd-offer__head {
	display: grid;
	justify-items: center;
}

body.vitta-diario .vd-offer__head .vd-h2 {
	max-width: 18ch;
}

body.vitta-diario .vd-offer__list {
	display: grid;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.vd-offer__list li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
	line-height: 1.5;
	color: var(--vd-navy-soft);
}

.vd-offer__check {
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1.5px solid var(--vd-gold-ink);
	border-radius: var(--vd-r-pill);
	background: none;
}

.vd-offer__check::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 47%;
	width: 4.5px;
	height: 9px;
	border-right: 1.5px solid var(--vd-gold-ink);
	border-bottom: 1.5px solid var(--vd-gold-ink);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Filete fino como divisor, nunca borda pesada. */
.vd-offer__buy {
	padding-top: clamp(28px, 3vw, 44px);
	border-top: 1px solid var(--vd-line);
}

.vd-bigprice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
}

/* O número em destaque — a prova concreta que a referência pede. */
.vd-bigprice__value {
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
	line-height: 1;
	letter-spacing: normal;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-navy);
}


/* O vão cresceu quando a linha de parcelamento saiu (2026-09-01): o preço de
   4,5rem precisa de ar antes do botão, e antes esse ar vinha da linha do meio. */
body.vitta-diario .vd-offer__cta {
	width: 100%;
	max-width: 420px;
	margin: clamp(32px, 3.4vw, 48px) auto 0;
}

.vd-offer__seal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 12px;
	margin: 18px 0 0;
	font-size: 0.8125rem;
	color: var(--vd-navy-mute);
}

.vd-offer__sealitem {
	/* Cada frase inteira ou nada: a quebra cai ENTRE elas, nunca no meio. */
	white-space: nowrap;
}

.vd-offer__sealitem + .vd-offer__sealitem::before {
	content: "·";
	padding-right: 12px;
	color: var(--vd-gold-ink);
	font-weight: 700;
}

/* No estreito as duas frases caem em linhas próprias e a bolinha ficaria
   pendurada no começo da segunda. */
@media (max-width: 559px) {
	.vd-offer__sealitem {
		white-space: normal;
	}

	.vd-offer__sealitem + .vd-offer__sealitem::before {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
 * 8. FAQ — cada pergunta é um card
 * ------------------------------------------------------------------------- */

/* O cabeçalho desta seção NÃO é `.vd-head` — é `.vd-faq__head`, e por isso não
   herdava a margem de baixo que todas as outras têm. O título ficava colado no
   primeiro card. Vale conferir isso em qualquer cabeçalho com nome próprio. */
.vd-faq__head {
	margin-bottom: clamp(28px, 3.4vw, 52px);
	max-width: 46ch;
}

body.vitta-diario .vd-faq__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vd-faq__item {
	border: 0;
	border-radius: var(--vd-r-card);
	background: var(--vd-cream);
	box-shadow: inset 0 0 0 1px var(--vd-line);
	overflow: hidden;
	transition: background-color 0.24s ease;
}

.vd-faq__item:hover {
	background: #f2e8d9;
}

body.vitta-diario .vd-faq__q {
	margin: 0;
}

.vd-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
}

body.vitta-diario .vd-faq__label {
	font-family: var(--v-body);
	font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.023em;
	color: var(--vd-navy);
}

/* O "+" que vira "−": dois traços, um deles gira. Ícone de linha, sem asset. */
.vd-faq__sign {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}

.vd-faq__sign::before,
.vd-faq__sign::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px;
	height: 1.5px;
	background: var(--vd-gold-ink);
	transform: translate(-50%, -50%);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.vd-faq__sign::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.vd-faq__trigger[aria-expanded="true"] .vd-faq__sign::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* O acordeao: `grid-template-rows: 0fr → 1fr` anima altura sem numero magico.
   Duas coisas que NÃO podem faltar:
     - `min-height: 0` + `overflow: hidden` no filho, senão o conteúdo se recusa
       a encolher e o painel nasce aberto;
     - `visibility: hidden` no fechado — só `overflow` mantinha o parágrafo na
       árvore de acessibilidade e no caminho do TAB.
   Sem JS tudo nasce aberto, e isso é proposital: a página continua legível. */
html.vh-js .vd-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	/* O `overflow` vai no PAINEL, não no filho: com ele só no filho, a linha do
	   grid ia a zero mas o RECHEIO do filho continuava desenhando — sobrava uma
	   faixa vazia embaixo de cada pergunta fechada. */
	overflow: hidden;
	visibility: hidden;
	transition:
		grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s linear 0.42s;
}

html.vh-js .vd-faq__panel.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s linear 0s;
}

html.vh-js .vd-faq__panelInner {
	min-height: 0;
	overflow: hidden;
}

/* ARMADILHA CARA: o recheio NÃO pode ficar no item do grid.
   `grid-template-rows: 0fr` é na verdade `minmax(auto, 0fr)`, e o mínimo `auto`
   conta o PADDING do item — `min-height: 0` zera a altura de conteúdo, mas não o
   recheio. Resultado medido: a trilha resolvia em 30px (exatamente o
   `padding-bottom`) e sobrava uma faixa vazia sob cada pergunta fechada.
   O recheio desce um nível, para o parágrafo. */
.vd-faq__panelInner {
	padding: 0;
}

/* O card aberto ganha o degrau de cor: e assim que a referencia destaca o item
   ativo, sem sombra. */
html.vh-js .vd-faq__item:has(.vd-faq__panel.is-open) {
	background: #f2e8d9;
	box-shadow: inset 0 0 0 1px var(--vd-gold-soft);
}

.vd-faq__a {
	margin: 0;
	padding: 0 clamp(20px, 2.2vw, 32px) clamp(22px, 2.2vw, 30px);
	max-width: 68ch;
	font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
	line-height: 1.65;
	color: var(--vd-navy-soft);
}

/* ---------------------------------------------------------------------------
 * 9. O fecho — a mesma faixa do hero, fechando a peça
 * ------------------------------------------------------------------------- */

.vd-final {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: var(--v-gap);
	padding: clamp(96px, 12vw, 200px) 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--vd-navy);
}

.vd-final__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vd-final__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

.vd-final__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 100% at 50% 50%,
			rgba(1, 32, 58, 0.92) 0%,
			rgba(1, 32, 58, 0.78) 100%);
}

.vd-final__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

body.vitta-diario .vd-final__title {
	margin: 0 auto;
	max-width: 17ch;
	color: var(--vd-cream);
}

.vd-final__text {
	margin: clamp(24px, 2.6vw, 36px) auto 0;
	max-width: 54ch;
	font-family: var(--v-body);
	font-weight: 300;
	font-size: clamp(1rem, 0.94rem + 0.4vw, 1.25rem);
	line-height: 1.5;
	color: var(--vd-cream-soft);
}

/* Sobre o azul o acento PREENCHE — é o CTA principal do fecho. */
body.vitta-diario .vd-final__cta {
	margin-top: clamp(32px, 3.4vw, 48px);
	background: var(--vd-gold);
	color: var(--vd-navy);
	border: 0;
}

body.vitta-diario .vd-final__cta:hover {
	background: var(--vd-cream);
	color: var(--vd-navy);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
 * 5. Folheie — respiro e legenda no idioma novo
 * ------------------------------------------------------------------------- */

body.vitta-diario .vd-flip__zoom {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid var(--vd-line);
	border-radius: var(--vd-r-pill);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: -0.023em;
	text-transform: uppercase;
	color: var(--vd-gold-ink);
}

/* ---------------------------------------------------------------------------
 * Rodapé próprio da página de produto (v1.16.1)
 *
 * A primeira versão (card de creme com duas colunas soltas) foi reprovada. Esta
 * é **o modelo do rodapé da home, nas cores da página** — instrução literal
 * dele. O modelo já estava aprovado; o que estava errado era eu ter inventado
 * outro.
 *
 *   banda texturizada (sangra de borda a borda)
 *   ├── coluna esquerda ...... card ESCURO: identidade + claim display + pílula
 *   └── coluna direita
 *       ├── fileira de círculos sociais
 *       └── card claro: navegação · divisor · fechamento
 *
 * O MAPEAMENTO DE COR, que é o ponto: na home o card é VINHO e os círculos são
 * vinho, porque lá o rodapé é a marca. Aqui os dois são AZUL, porque a página
 * inteira é azul e dourado e o rodapé não podia ser a única peça em vinho. O
 * dourado entra onde entra em todo bloco escuro desta página: **na pílula**.
 *
 * A INVERSÃO DE SUPERFÍCIE É DELIBERADA e vem do modelo: a banda usa o creme de
 * card (`--vd-cream`) e o painel de dentro usa o bege da página (`--vd-bg`), que
 * é um passo mais claro. É o oposto da regra geral do sistema (card mais fundo
 * que a tela), e é assim que a home faz — a banda precisa se destacar do resto
 * da página, e o painel precisa se destacar da banda.
 * ------------------------------------------------------------------------- */

.vd-foot {
	position: relative;
	isolation: isolate;
	/* ENCOSTA na seção 9. O `--v-gap` que o modelo da home usa aqui abria uma
	   faixa de bege entre a faixa escura do fecho e a banda do rodapé — e essa
	   faixa não separava nada, só sobrava. Na home o vão faz sentido porque a
	   seção acima é clara e o rodapé precisa se descolar dela; aqui as duas são
	   bandas de borda a borda em cores opostas, e o contraste já é a separação.
	   A emenda entre elas é RETA de propósito: é o fim da página, não uma
	   transição de leitura como a da seção 2. */
	margin-top: 0;
	padding: clamp(48px, 6vw, 88px) 0;
	background: var(--vd-cream);
	overflow: hidden;
}

/* Padrão da marca como máscara alfa, tingido do azul da página. 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. */
.vd-foot__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--vd-navy);
	-webkit-mask-image: var(--vh-pattern);
	mask-image: var(--vh-pattern);
	-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.05;
}

.vd-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 no modelo. */
@media (min-width: 1024px) {
	.vd-foot__inner {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

/* --- Coluna esquerda: card azul ------------------------------------------ */

.vd-foot__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-radius: var(--vd-r-block);
	background: linear-gradient(168deg, var(--vd-navy-2) 0%, var(--vd-navy) 58%);
	color: var(--vd-cream);
	padding: clamp(28px, 3.2vw, 44px);
}

/* Ocupa o lugar da LOGO no modelo: é a identidade desta página. Rótulo curto do
   sistema — caixa alta, 600, tracking apertado. */
.vd-foot__label {
	margin: 0 0 clamp(36px, 5vw, 56px);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.023em;
	text-transform: uppercase;
	color: var(--vd-gold);
}

/* O claim do modelo, com a tipografia DESTA página: display 400, sem tracking
   apertado (o aperto pertence ao sans). `margin-top: auto` absorve a sobra e é
   o que faz as duas colunas terminarem na mesma linha de base. */
.vd-foot__claim {
	margin: auto 0 clamp(20px, 2.4vw, 28px);
	font-family: var(--v-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.04;
	letter-spacing: normal;
	text-transform: lowercase;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	color: var(--vd-cream);
}

@media (min-width: 768px) {
	.vd-foot__claim {
		max-width: 16ch;
	}
}

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

/* Sobre o azul o acento PREENCHE — é a regra dos blocos escuros desta página, e
   é o que põe o dourado no lugar onde a home põe o creme. */
body.vitta-diario .vd-foot .vd-btn--gold {
	background: var(--vd-gold);
	border-color: var(--vd-gold);
	color: var(--vd-navy);
}

body.vitta-diario .vd-foot .vd-btn--gold:hover {
	background: var(--vd-cream);
	border-color: var(--vd-cream);
	color: var(--vd-navy);
}

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

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

/* As redes são BLOCOS desde 13/09/2026 — a grade, a altura, o glifo e o nome
   moram em `vitta-home.css` (bloco das redes do rodapé) e valem para os três
   rodapés. Aqui entram só a cor e o raio desta página.

   `body.vitta-home .vh-round` é (0,2,0) e pinta o bloco de vinho: precisa do
   `.vd-foot` no meio para chegar a (0,3,0) e virar azul. O `knockout` tem de ser
   a cor do BLOCO — é o recorte do glifo (triângulo do YouTube, lente do
   Instagram), e na cor errada ele some dentro da forma cheia. */
body.vitta-diario .vd-foot .vh-round {
	/* Degrau abaixo dos 24px do cartão, como na home (32 → 16). */
	border-radius: 14px;
	background: var(--vd-navy);
	color: var(--vd-cream);
	--vh-icon-knockout: var(--vd-navy);
}

body.vitta-diario .vd-foot .vh-round:hover {
	background: var(--vd-navy-2);
	--vh-icon-knockout: var(--vd-navy-2);
}

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

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

/* A logo do Vitta Materna, clicável, de volta à home (13/09/2026). Na cor da
   página — o rodapé do Diário é azul e dourado, e a logo é máscara (recolore).
   `body.vitta-diario` na frente: `body.vitta-home a { color: inherit }` venceria. */
body.vitta-diario .vd-foot__brand {
	display: inline-flex;
	align-self: flex-start;
	margin-bottom: clamp(14px, 1.8vw, 22px);
	padding: 4px 0;
	color: var(--vd-navy);
	border-radius: 6px;
	transition: opacity 0.2s ease;
}

body.vitta-diario .vd-foot__brand:hover {
	opacity: 0.72;
}

body.vitta-diario .vd-foot__brand:focus-visible {
	outline: 2px solid var(--vd-gold-ink);
	outline-offset: 4px;
}

.vd-foot__logo {
	width: clamp(112px, 10vw, 144px);
}

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

body.vitta-diario .vd-foot__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--vd-navy);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

body.vitta-diario .vd-foot__nav a:hover,
body.vitta-diario .vd-foot__nav a:focus-visible {
	color: var(--vd-gold-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

.vd-foot__closing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.vd-foot__copy,
.vd-foot__legal {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--vd-navy-mute);
}

.vd-foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
}

body.vitta-diario .vd-foot__legal a {
	color: var(--vd-navy-mute);
	text-decoration: none;
	/* Recheio para o dedo, margem negativa para o layout: a área de toque cresce
	   e nada se move na tela. */
	display: inline-block;
	padding: 10px 4px;
	margin: -10px -4px;
}

body.vitta-diario .vd-foot__legal a:hover,
body.vitta-diario .vd-foot__legal a:focus-visible {
	color: var(--vd-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Dados institucionais e aviso — o bloco que só existe em página de produto. */
.vd-foot__product {
	margin-top: clamp(18px, 2vw, 26px);
	padding-top: clamp(14px, 1.6vw, 20px);
	border-top: 1px solid var(--vd-hair);
}

.vd-foot__product p {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--vd-navy-mute);
}

.vd-foot__product p + p {
	margin-top: 4px;
}

.vd-foot__disclaimer {
	font-weight: 500;
	color: var(--vd-navy-soft);
}