/* =========================================================================
   VITTA KIDS — v1.21.0
   =========================================================================

   Marca infantil premium. Campo CLARO, verde como contraste (o inverso da
   v1.20.0, por pedido do brief), personagens habitando a interface.

   ESPECIFICIDADE — por que quase tudo é `body.vitta-kids ...`:
   o `<body>` carrega `vitta-home` E `vitta-kids`. As regras de reset da home
   (`body.vitta-home a`, `... ul`, `... img`) empatam em especificidade com as
   daqui e quem decide é a ORDEM — esta folha declara `noord-vitta-home` como
   dependência, então carrega depois e ganha. Tirar o `body.vitta-kids` de uma
   regra de `a`/`ul`/`img` a faz perder em silêncio.

   Títulos precisam de DUAS classes no body (`body.skin-editorial.vitta-kids`,
   0,2,1): o `Noord_Typography` injeta `body.skin-editorial h1..h6` inline no
   `wp_head`, que é (0,1,2) e vem depois de qualquer folha enfileirada.

   TIPOGRAFIA: Fraunces + Inter. Ele foi consultado (o brief pedia Fredoka) e
   escolheu manter a regra do projeto. O eixo `SOFT` arredonda os terminais e o
   `WONK` liga os alternados — é o que tira o ar editorial do serif.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

body.vitta-kids {
	/* Campo */
	--k-paper:      #fdfbf5;
	--k-paper-2:    #f7f3e9;
	--k-cream:      #fce9bc;  /* medido nas capas */
	--k-cream-soft: #fdf3da;
	/* O campo do heroi, escolhido por ele em 09/09/2026 junto com a saida da
	   faixa de confianca. Mais quente e mais amarelo que o `--k-paper` do resto
	   da pagina, entao o heroi passa a ser uma banda com comeco e fim em vez de
	   se derreter no fundo geral — que era o que a faixa de creme fazia antes. */
	--k-hero-field: #fff8e7;

	/* Verde */
	--k-forest:     #0f3012;  /* medido nas capas */
	--k-forest-2:   #16401a;
	--k-forest-deep:#0a2410;
	--k-leaf:       #3c7a2e;
	--k-leaf-soft:  #eaf2e1;

	/* Acentos */
	--k-sun:        #f7ae10;  /* medido */
	--k-sun-ink:    #8a5a00;  /* o dourado NUNCA é texto sobre claro (~1,9:1) */
	--k-clay:       #c2551f;
	--k-clay-soft:  #fbe7da;
	--k-sky:        #163d66;  /* medido, Volume 2 */
	--k-sky-soft:   #e3ebf4;

	/* Tinta */
	--k-ink:        #17240f;
	--k-ink-2:      rgba(23, 36, 15, .74);
	--k-ink-3:      rgba(23, 36, 15, .58);
	--k-line:       rgba(15, 48, 18, .16);
	--k-line-2:     rgba(15, 48, 18, .09);

	/* Tinta sobre verde */
	--k-on:         #fdf3da;
	--k-on-2:       rgba(253, 243, 218, .78);
	--k-on-3:       rgba(253, 243, 218, .52);
	--k-on-line:    rgba(253, 243, 218, .22);

	/* Medidas */
	--k-max:  1280px;
	--k-wide: 1440px;
	--k-pad:  clamp(20px, 5vw, 72px);
	--k-gap:  clamp(72px, 9vw, 140px);

	/* Raio por PAPEL, não um só para tudo */
	--k-r-panel: 36px;
	--k-r-card:  24px;
	--k-r-tile:  20px;
	--k-r-img:   18px;

	--k-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--k-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	background: var(--k-paper);
	color: var(--k-ink);
	font-family: var(--k-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-page {
	overflow-x: clip;
	position: relative;
}

body.vitta-kids .vk-main { display: block; }

body.skin-editorial.vitta-kids h1,
body.skin-editorial.vitta-kids h2,
body.skin-editorial.vitta-kids h3,
body.skin-editorial.vitta-kids h4 {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	color: inherit;
	letter-spacing: -.018em;
	margin: 0;
	text-transform: none;
}

body.vitta-kids p { margin: 0; }

body.vitta-kids ul,
body.vitta-kids ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.vitta-kids img {
	display: block;
	max-width: 100%;
	height: auto;
}

body.vitta-kids a {
	color: inherit;
	text-decoration: none;
}

body.vitta-kids button { font: inherit; }

body.vitta-kids blockquote { margin: 0; }

body.vitta-kids s { text-decoration-thickness: 2px; }

body.vitta-kids .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

body.vitta-kids .vk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--k-forest);
	color: var(--k-on);
	padding: 14px 22px;
	border-radius: 0 0 14px 0;
}
body.vitta-kids .vk-skip:focus { left: 0; }

/* Foco visível, um só desenho na página inteira. */
body.vitta-kids a:focus-visible,
body.vitta-kids button:focus-visible,
body.vitta-kids [tabindex]:focus-visible {
	outline: 3px solid var(--k-sun);
	outline-offset: 3px;
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
   3. Utilidades
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-i {
	width: 1em;
	height: 1em;
	flex: none;
}

body.vitta-kids .vk-h2 {
	font-size: clamp(1.95rem, 1.15rem + 2.7vw, 3.4rem);
	line-height: 1.04;
}

body.vitta-kids .vk-lede {
	font-size: clamp(1.0625rem, 1rem + .38vw, 1.3rem);
	line-height: 1.56;
	color: var(--k-ink-2);
	max-width: 58ch;
	margin-top: 18px;
}

body.vitta-kids .vk-head { margin-bottom: clamp(38px, 5vw, 68px); }

body.vitta-kids .vk-head--center {
	text-align: center;
	margin-inline: auto;
	max-width: 62ch;
}
body.vitta-kids .vk-head--center .vk-lede { margin-inline: auto; }

body.vitta-kids .vk-head--invert { color: var(--k-on); }
body.vitta-kids .vk-head--invert .vk-lede { color: var(--k-on-2); }

/* Marca de placeholder — tem de ser IMPOSSÍVEL de confundir com conteúdo. */
body.vitta-kids .vk-ph-tag {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #7a3b00;
	background: repeating-linear-gradient(-45deg, #ffe8bf, #ffe8bf 6px, #ffdca0 6px, #ffdca0 12px);
	border: 1px dashed #c98a2a;
	border-radius: 6px;
	padding: 2px 8px;
	margin-right: 8px;
	vertical-align: middle;
}

/* Botões */
body.vitta-kids .vk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1;
	padding: 14px 24px;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
body.vitta-kids .vk-btn:hover { transform: translateY(-2px); }
body.vitta-kids .vk-btn:active { transform: translateY(0); }

body.vitta-kids .vk-btn--lg {
	font-size: 1.0625rem;
	padding: 18px 34px;
}

body.vitta-kids .vk-btn--block { width: 100%; }

body.vitta-kids .vk-btn--primary {
	background: var(--k-forest);
	color: var(--k-on);
}
body.vitta-kids .vk-btn--primary:hover { background: var(--k-forest-2); }

body.vitta-kids .vk-btn--sun {
	background: var(--k-sun);
	color: var(--k-forest-deep);
}
body.vitta-kids .vk-btn--sun:hover { background: #ffbf2e; }

body.vitta-kids .vk-btn--ghost {
	border-color: var(--k-line);
	color: var(--k-ink);
	background: transparent;
}
body.vitta-kids .vk-btn--ghost:hover {
	border-color: var(--k-forest);
	background: rgba(15, 48, 18, .05);
}

body.vitta-kids .vk-btn--ghost-invert {
	border-color: var(--k-on-line);
	color: var(--k-on);
	background: transparent;
}
body.vitta-kids .vk-btn--ghost-invert:hover {
	border-color: var(--k-on);
	background: rgba(253, 243, 218, .1);
}

/* Botão redondo */
body.vitta-kids .vk-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 2px solid var(--k-line);
	background: var(--k-paper);
	color: var(--k-ink);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
body.vitta-kids .vk-round:hover {
	border-color: var(--k-forest);
	transform: translateY(-2px);
}
body.vitta-kids .vk-round svg { width: 20px; height: 20px; }

body.vitta-kids .vk-round--sm {
	width: 40px;
	height: 40px;
	border-color: var(--k-on-line);
	background: transparent;
	color: var(--k-on);
}
body.vitta-kids .vk-round--sm:hover { border-color: var(--k-on); background: rgba(253,243,218,.1); }
body.vitta-kids .vk-round--sm svg { width: 18px; height: 18px; }
body.vitta-kids .vk-round--sm.is-pend { opacity: .38; cursor: default; }

body.vitta-kids .vk-chip {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 7px 14px;
	border-radius: 999px;
}
body.vitta-kids .vk-chip--soon {
	background: var(--k-sun);
	color: var(--k-forest-deep);
}

/* Bolotas — o enfeite que o material realmente usa. */
body.vitta-kids .vk-bolotas {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: clamp(38px, 5vw, 60px);
}
body.vitta-kids .vk-bolotas svg {
	width: 15px;
	height: 17px;
	fill: none;
	stroke: var(--k-line);
	stroke-width: 1.4;
	stroke-linejoin: round;
}

/* Folhas à deriva — movimento AMBIENTE, só em dois lugares da página. */
body.vitta-kids .vk-leaves {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
body.vitta-kids .vk-leaves svg {
	position: absolute;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--k-leaf);
	stroke-width: 1.3;
	stroke-linecap: round;
	opacity: .3;
	animation: vk-drift 22s ease-in-out infinite;
}
body.vitta-kids .vk-leaves svg:nth-child(1) { left: 4%;  top: 12%; animation-duration: 24s; }
body.vitta-kids .vk-leaves svg:nth-child(2) { left: 88%; top: 26%; animation-duration: 30s; animation-delay: -6s; width: 20px; height: 20px; }
body.vitta-kids .vk-leaves svg:nth-child(3) { left: 16%; top: 78%; animation-duration: 27s; animation-delay: -12s; }
body.vitta-kids .vk-leaves svg:nth-child(4) { left: 72%; top: 88%; animation-duration: 33s; animation-delay: -3s; width: 18px; height: 18px; }

@keyframes vk-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
	50%      { transform: translate3d(14px, -22px, 0) rotate(14deg); }
}

/* -------------------------------------------------------------------------
   4. Header (§7)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-header {
	position: sticky;
	top: 0;
	z-index: 90;
	/* OPACO. Translucido sobre as bandas verdes vira um cinza-esverdeado sujo —
	   o creme a 88%% misturado com o verde nao e creme nem verde. */
	background: var(--k-paper);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, background-color .25s ease;
}
body.vitta-kids .vk-header.is-stuck { border-bottom-color: var(--k-line-2); }

body.vitta-kids .vk-header__inner {
	max-width: var(--k-wide);
	margin-inline: auto;
	padding: 14px var(--k-pad);
	display: flex;
	align-items: center;
	gap: 24px;
}

body.vitta-kids .vk-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-right: auto;
}
body.vitta-kids .vk-logo__mark {
	/* Bolota CHEIA: a 30px um desenho de traço vira mancha. */
	width: 26px;
	height: 26px;
	fill: var(--k-forest);
	stroke: none;
}
body.vitta-kids .vk-logo__text {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -.02em;
	color: var(--k-forest);
}
body.vitta-kids .vk-logo__text em {
	font-style: normal;
	color: var(--k-sun-ink);
}

body.vitta-kids .vk-header__nav ul {
	display: flex;
	align-items: center;
	gap: 30px;
}
body.vitta-kids .vk-header__nav a {
	font-size: .9375rem;
	font-weight: 500;
	color: var(--k-ink-2);
	padding: 8px 0;
	position: relative;
	transition: color .18s ease;
}
body.vitta-kids .vk-header__nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--k-sun);
	transition: right .24s ease;
}
body.vitta-kids .vk-header__nav a:hover { color: var(--k-ink); }
body.vitta-kids .vk-header__nav a:hover::after { right: 0; }

body.vitta-kids .vk-header__cta--panel { display: none; }

body.vitta-kids .vk-burger {
	display: none;
	background: none;
	border: 2px solid var(--k-line);
	border-radius: 14px;
	padding: 10px;
	cursor: pointer;
	color: var(--k-forest);
}
body.vitta-kids .vk-burger__box {
	display: grid;
	gap: 4px;
	width: 20px;
}
body.vitta-kids .vk-burger__box i {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .24s ease, opacity .18s ease;
}
body.vitta-kids .vk-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.vitta-kids .vk-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
body.vitta-kids .vk-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   5. Hero (§8)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-hero {
	position: relative;
	background: var(--k-hero-field);
	/* O topo cresceu na v1.23.0: sem o header, o título nascia colado na borda
	   da janela. O acréscimo é quase exatamente a altura que a barra ocupava. */
	padding-block: clamp(44px, 6vw, 96px) clamp(56px, 7vw, 104px);
	overflow: clip;
}

body.vitta-kids .vk-hero__inner {
	max-width: var(--k-wide);
	margin-inline: auto;
	padding-inline: var(--k-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}

body.vitta-kids .vk-hero__title {
	font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem);
	line-height: .98;
	letter-spacing: -.025em;
}

body.vitta-kids .vk-hero__sub {
	font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
	line-height: 1.55;
	color: var(--k-ink-2);
	max-width: 46ch;
	margin-top: 24px;
}

body.vitta-kids .vk-hero__idade {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--k-sun-ink);
	background: var(--k-cream);
	border-radius: 999px;
	padding: 8px 16px;
}
body.vitta-kids .vk-hero__idade .vk-i { width: 17px; height: 17px; }

body.vitta-kids .vk-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

body.vitta-kids .vk-hero__provas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 26px;
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--k-line-2);
	max-width: 30rem;
}
body.vitta-kids .vk-hero__provas li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .875rem;
	color: var(--k-ink-2);
}
body.vitta-kids .vk-hero__provas .vk-i {
	width: 16px; height: 16px;
	color: var(--k-leaf);
	stroke-width: 2.4;
}

/* --- A composição --- */
body.vitta-kids .vk-hero__art {
	position: relative;
	aspect-ratio: 1 / 1.02;
}

body.vitta-kids .vk-hero__blob {
	position: absolute;
	inset: 6% 2% 4% 6%;
	background: var(--k-cream-soft);
	/* Forma orgânica: nada de retângulo arredondado padrão. */
	border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
	transform: rotate(-4deg);
}

body.vitta-kids .vk-hero__stack {
	position: absolute;
	left: 27%;
	top: 12%;
	width: 46%;
	z-index: 2;
}
body.vitta-kids .vk-hero__cover,
body.vitta-kids .vk-hero__page { margin: 0; }

body.vitta-kids .vk-hero__cover img,
body.vitta-kids .vk-hero__page img {
	border-radius: 10px;
	box-shadow: 0 18px 40px -18px rgba(15, 48, 18, .45);
}
body.vitta-kids .vk-hero__cover { transform: rotate(3.5deg); }
body.vitta-kids .vk-hero__page {
	position: absolute;
	left: -34%;
	top: 10%;
	width: 82%;
	transform: rotate(-10deg);
	opacity: .96;
}

body.vitta-kids .vk-hero__fino {
	position: absolute;
	left: -4%;
	bottom: -1%;
	width: 40%;
	z-index: 4;
}
body.vitta-kids .vk-hero__nina {
	position: absolute;
	right: -2%;
	top: -3%;
	width: 30%;
	z-index: 3;
}
body.vitta-kids .vk-hero__vovo {
	position: absolute;
	right: 2%;
	bottom: 4%;
	width: 30%;
	z-index: 3;
}

body.vitta-kids .vk-hero__moedas svg {
	position: absolute;
	width: 34px;
	height: 34px;
	fill: none;
	stroke: var(--k-sun);
	stroke-width: 1.6;
	stroke-linecap: round;
	z-index: 5;
}
body.vitta-kids .vk-hero__moedas svg:nth-child(1) { left: 20%; top: 6%;  animation: vk-bob 5.5s ease-in-out infinite; }
body.vitta-kids .vk-hero__moedas svg:nth-child(2) { left: 8%;  top: 34%; width: 26px; height: 26px; animation: vk-bob 6.5s ease-in-out infinite -2s; }
body.vitta-kids .vk-hero__moedas svg:nth-child(3) { right: 22%; bottom: 30%; width: 22px; height: 22px; animation: vk-bob 7.5s ease-in-out infinite -4s; }

@keyframes vk-bob {
	0%, 100% { transform: translateY(0) rotate(-6deg); }
	50%      { transform: translateY(-10px) rotate(8deg); }
}

/* -------------------------------------------------------------------------
   6. Faixa de confiança (§9)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-trust { background: var(--k-cream); }

body.vitta-kids .vk-trust__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding: clamp(26px, 3vw, 38px) var(--k-pad);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 32px;
}
body.vitta-kids .vk-trust__item {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: .9375rem;
	font-weight: 600;
	color: #5a4208;
}
body.vitta-kids .vk-trust__item .vk-i {
	width: 26px;
	height: 26px;
	color: var(--k-sun-ink);
	stroke-width: 1.5;
}

/* -------------------------------------------------------------------------
   7. Por que começar cedo (§10)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-why { padding-block: var(--k-gap); }

body.vitta-kids .vk-why__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

body.vitta-kids .vk-why__body {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 76px);
	/* `start`, nao `center`: centralizado, a coluna curta dos passos flutuava no
	   meio com ar em cima e embaixo. */
	align-items: start;
	padding-top: 8px;
}

/* 04/09/2026: o cabecalho desceu para dentro da coluna dos passos (print "2
   problema.jpg" — caixa vermelha no head + seta para a coluna da direita). A
   coluna e uma grade propria para o titulo, a linha de apoio e os passos
   respirarem com o mesmo intervalo. */
body.vitta-kids .vk-why__col {
	display: grid;
	align-content: start;
	gap: clamp(30px, 3.4vw, 46px);
}
/* `.vk-head` nao entra aqui: o vao entre head e passos e do grid acima, e o
   `margin-bottom` do `.vk-head` somaria com ele. */
body.vitta-kids .vk-why__head .vk-h2 { max-width: 20ch; }

body.vitta-kids .vk-why__art {
	position: relative;
	margin: 0;
	/* Acompanha a altura do titulo ao lado, para a Nina nao nascer colada no
	   topo da secao. */
	padding-top: clamp(24px, 4vw, 64px);
}
body.vitta-kids .vk-why__disc {
	position: absolute;
	left: 0;
	top: 0;
	width: 88%;
	aspect-ratio: 1;
	background: var(--k-clay-soft);
	border-radius: 999px;
}
body.vitta-kids .vk-why__char {
	position: relative;
	width: 76%;
	margin-left: 4%;
}
body.vitta-kids .vk-why__ciencia {
	position: relative;
	/* Sobe por cima da Nina: card e personagem leem como UMA composicao. */
	margin-top: -22%;
	margin-left: auto;
	width: min(94%, 23rem);
	background: var(--k-paper);
	border: 2px solid var(--k-line);
	border-radius: var(--k-r-card);
	padding: 24px 26px;
}
body.vitta-kids .vk-why__dado {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.35;
	letter-spacing: -.015em;
}
body.vitta-kids .vk-why__ciencia cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: .78125rem;
	color: var(--k-ink-3);
}

/* Os três passos SÃO uma sequência — por isso o fio que os liga. */
body.vitta-kids .vk-why__passos {
	position: relative;
	display: grid;
	gap: 28px;
}
body.vitta-kids .vk-why__passo {
	position: relative;
	padding-left: 40px;
}
body.vitta-kids .vk-why__passo::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 9px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--k-leaf);
}
body.vitta-kids .vk-why__passo:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 12px;
	top: 26px;
	bottom: -22px;
	width: 2px;
	background: repeating-linear-gradient(var(--k-line) 0 4px, transparent 4px 9px);
}
body.vitta-kids .vk-why__passo h3 {
	font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
	line-height: 1.25;
}
body.vitta-kids .vk-why__passo p {
	margin-top: 8px;
	color: var(--k-ink-2);
	font-size: .96875rem;
}

body.vitta-kids .vk-why__ponte {
	margin-top: clamp(40px, 4.5vw, 64px);
	text-align: center;
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 600;
	font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.4rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--k-leaf);
}

/* -------------------------------------------------------------------------
   8. Aprender brincando (§11)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-skills { padding-block: var(--k-gap); }

body.vitta-kids .vk-skills__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

body.vitta-kids .vk-skills__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

/* Cada peça é um CAMPO DE COR, sem contorno e sem a mesma sombra difusa
   embaixo de todas — a separação vem da cor. As três que têm personagem
   ocupam duas colunas: quem carrega personagem manda na grade. */
body.vitta-kids .vk-skill {
	position: relative;
	grid-column: span 2;
	border-radius: var(--k-r-tile);
	padding: 28px 26px 30px;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	overflow: clip;
}
body.vitta-kids .vk-skill--char { grid-column: span 3; padding-right: 34%; }

body.vitta-kids .vk-skill--leaf { background: var(--k-leaf-soft); color: #23431a; }
body.vitta-kids .vk-skill--clay { background: var(--k-clay-soft); color: #6d2f0e; }
body.vitta-kids .vk-skill--sun  { background: var(--k-cream);     color: #5a4208; }
body.vitta-kids .vk-skill--sky  { background: var(--k-sky-soft);  color: #12324f; }

body.vitta-kids .vk-skill__icon {
	display: inline-flex;
	margin-bottom: 16px;
}
body.vitta-kids .vk-skill__icon .vk-i {
	width: 34px;
	height: 34px;
	stroke-width: 1.5;
	opacity: .85;
}
body.vitta-kids .vk-skill__nome {
	font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
	line-height: 1.1;
}
body.vitta-kids .vk-skill__texto {
	margin-top: 10px;
	font-size: .9375rem;
	line-height: 1.5;
	opacity: .78;
	max-width: 26ch;
}
body.vitta-kids .vk-skill__char {
	position: absolute;
	bottom: -6%;
	right: -4%;
	width: 40%;
	pointer-events: none;
}
body.vitta-kids .vk-skill__char--vovo { width: 46%; bottom: -4%; right: -6%; }

/* A ULTIMA peca FECHA a fileira. Com cinco cartoes acima dela, "Valorizar"
   deixava tres colunas de vazio a direita — ele apontou o buraco com uma seta.
   Vale so na grade de 6: abaixo de 1080 a peca com personagem ja toma a linha
   inteira, e la o personagem grande esta certo porque a caixa e estreita.

   O personagem NAO cresce junto com a caixa: em meia largura a Vovo Vitta media
   ~256px (46% de ~557px), e e esse tamanho que ela mantem agora — 22,5% de
   ~1136px. Manter a porcentagem de antes dobraria a coruja e a peca viraria
   ilustracao com legenda. */
@media (min-width: 1081px) {
	body.vitta-kids .vk-skills__grid > :last-child { grid-column: 1 / -1; }
	body.vitta-kids .vk-skill--char:last-child { padding-right: 26%; }
	body.vitta-kids .vk-skill--char:last-child .vk-skill__char--vovo {
		width: 22.5%;
		right: -1.5%;
	}
}

/* -------------------------------------------------------------------------
   9. Filho → hábito → você (§12)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-blocks { padding-block: var(--k-gap); }

body.vitta-kids .vk-blocks__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
	display: grid;
	gap: clamp(80px, 10vw, 152px);
}

body.vitta-kids .vk-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
body.vitta-kids .vk-block--flip .vk-block__body { order: 2; }

body.vitta-kids .vk-block__label {
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .01em;
	margin-bottom: 14px;
}
body.vitta-kids .vk-block--leaf .vk-block__label { color: var(--k-leaf); }
body.vitta-kids .vk-block--sun  .vk-block__label { color: var(--k-sun-ink); }
body.vitta-kids .vk-block--sky  .vk-block__label { color: var(--k-sky); }

body.vitta-kids .vk-block__titulo { line-height: 1.06; }

body.vitta-kids .vk-block__texto {
	margin-top: 20px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--k-ink-2);
	max-width: 46ch;
}

/* O fluxo é a única sequência desta seção. */
/* 09/09/2026 — *"deixar todas as pilulas amarelas com a mesma largura"*.
   Grade de colunas iguais (`grid-auto-columns: 1fr`) em vez de flex: assim a
   largura vem da GRADE e nao do texto de cada uma, e continua certa se a
   sequencia mudar de tamanho. O trace ligante saiu de dentro do <li> e passou a
   ser desenhado NO VAO, senao ele roubaria largura de uns e nao de outros e as
   pilulas voltariam a ficar desiguais. */
body.vitta-kids .vk-flow {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: center;
	gap: 26px;
	margin-top: 28px;
}
body.vitta-kids .vk-flow li { position: relative; }
body.vitta-kids .vk-flow li span {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--k-cream);
	color: #5a4208;
	font-size: .8125rem;
	font-weight: 600;
	padding: 9px 12px;
	border-radius: 999px;
}
body.vitta-kids .vk-flow li:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -21px;
	transform: translateY(-50%);
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--k-sun);
}

/* Uma coluna desde 04/09/2026: ele riscou a coluna da direita nos dois blocos
   que tem lista. Manter duas colunas com 3 e 4 itens so reconstruiria a coluna
   que ele mandou tirar, com outro conteudo. */
body.vitta-kids .vk-block__itens {
	display: grid;
	gap: 9px;
	margin-top: 28px;
}
body.vitta-kids .vk-block__itens li {
	position: relative;
	padding-left: 20px;
	font-size: .9375rem;
	color: var(--k-ink-2);
}
body.vitta-kids .vk-block__itens li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
	opacity: .4;
}

/* Os três exemplos do "para os pais" — o rótulo é a informação. */
body.vitta-kids .vk-block__exemplos {
	display: grid;
	gap: 12px;
	margin-top: 28px;
}
/* SEM barra lateral. Filete de um lado só é tique de layout gerado — proibido
   no projeto inteiro. A distinção dos três já vem do CAMPO DE COR e da cor do
   rótulo, que é a gramática do resto da página. */
body.vitta-kids .vk-ex {
	display: grid;
	gap: 4px;
	padding: 16px 20px;
	border-radius: 16px;
}
body.vitta-kids .vk-ex__rotulo {
	font-size: .78125rem;
	font-weight: 700;
	letter-spacing: .03em;
}
body.vitta-kids .vk-ex__texto {
	font-size: .9375rem;
	color: var(--k-ink-2);
}
body.vitta-kids .vk-ex--neutro { background: var(--k-paper-2); }
body.vitta-kids .vk-ex--neutro .vk-ex__rotulo { color: var(--k-ink-3); }
body.vitta-kids .vk-ex--evite  { background: var(--k-clay-soft); }
body.vitta-kids .vk-ex--evite .vk-ex__rotulo  { color: #8f3d13; }
body.vitta-kids .vk-ex--diga   { background: var(--k-leaf-soft); }
body.vitta-kids .vk-ex--diga .vk-ex__rotulo   { color: #2c5a20; }

body.vitta-kids .vk-block__art { position: relative; }
body.vitta-kids .vk-block__panel {
	position: absolute;
	inset: 8% -6% -8% 12%;
	border-radius: var(--k-r-panel);
}
body.vitta-kids .vk-block--leaf .vk-block__panel { background: var(--k-leaf-soft); }
body.vitta-kids .vk-block--sun  .vk-block__panel { background: var(--k-cream-soft); }
body.vitta-kids .vk-block--sky  .vk-block__panel { background: var(--k-sky-soft); }
body.vitta-kids .vk-block--flip .vk-block__panel { inset: 8% 12% -8% -6%; }

body.vitta-kids .vk-block__figure {
	position: relative;
	margin: 0;
	width: 84%;
}
body.vitta-kids .vk-block--flip .vk-block__figure { margin-left: auto; }
body.vitta-kids .vk-block__figure img {
	border-radius: var(--k-r-img);
	box-shadow: 0 24px 50px -26px rgba(15, 48, 18, .5);
}

body.vitta-kids .vk-block__char {
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
body.vitta-kids .vk-block__char--fino { width: 34%; right: -4%; bottom: -6%; }
body.vitta-kids .vk-block__char--nina { width: 24%; right: 26%; top: -12%; }
body.vitta-kids .vk-block__char--vovo { width: 40%; left: -8%;  bottom: -8%; }
body.vitta-kids .vk-block--flip .vk-block__char--vovo { left: auto; right: -8%; }

/* -------------------------------------------------------------------------
   10. Como funciona (§13)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-how {
	background: var(--k-cream-soft);
	padding-block: var(--k-gap);
}
body.vitta-kids .vk-how__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

body.vitta-kids .vk-how__passos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
/* O caminho que liga os quatro marcos. */
body.vitta-kids .vk-how__passos::before {
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	top: 27px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--k-sun) 0 8px, transparent 8px 16px);
	opacity: .55;
}
body.vitta-kids .vk-how__passo {
	position: relative;
	text-align: center;
}
body.vitta-kids .vk-how__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: var(--k-forest);
	color: var(--k-on);
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 18px;
}
body.vitta-kids .vk-how__passo p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--k-ink-2);
	max-width: 22ch;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   11. Personagens (§14)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-chars { padding-block: var(--k-gap); }
body.vitta-kids .vk-chars__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

body.vitta-kids .vk-chars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
	/* espaço para o personagem passar por cima da borda de cima */
	/* Espaco para o personagem passar por cima da borda de cima do card. */
	padding-top: clamp(120px, 13vw, 190px);
}

body.vitta-kids .vk-charcard {
	position: relative;
	border-radius: var(--k-r-card);
	padding: 0 28px 30px;
	transition: transform .3s cubic-bezier(.32, .72, .35, 1);
}
body.vitta-kids .vk-charcard--leaf { background: var(--k-leaf-soft); color: #23431a; }
body.vitta-kids .vk-charcard--clay { background: var(--k-clay-soft); color: #6d2f0e; }
body.vitta-kids .vk-charcard--sun  { background: var(--k-cream);     color: #5a4208; }

body.vitta-kids .vk-charcard__art {
	position: relative;
	height: 0;
	display: flex;
	justify-content: center;
	/* ARMADILHA: num flex de altura 0, o `align-items: stretch` padrao forca o
	   item a 0 de altura — o personagem sumia sem erro nenhum. Medido: 222x0. */
	align-items: flex-start;
}
/* O personagem sobe e ESTOURA a borda do card — é o que o tira do lugar de
   mascote parado dentro da caixa. */
body.vitta-kids .vk-charcard__img {
	/* Normaliza pela ALTURA, nao pela largura: as tres artes tem proporcoes
	   muito diferentes (Nina 824x1321, Vovo 1298x1276) e normalizar por largura
	   deixaria a Nina 60% mais alta que a Vovo, estourando o cabecalho acima. */
	height: clamp(170px, 19vw, 235px);
	width: auto;
	max-width: 100%;
	transform: translateY(-74%);
	transition: transform .34s cubic-bezier(.32, .72, .35, 1);
}
body.vitta-kids .vk-charcard:hover .vk-charcard__img { transform: translateY(-78%) rotate(-2deg); }

/* A arte da Vovo e quase quadrada e o GALHO dela avanca para a esquerda e para
   baixo — no mesmo recuo em que o nome do card comeca. Ela sobe mais e anda
   para a direita; as outras duas nao precisam. */
body.vitta-kids .vk-charcard--vovo .vk-charcard__img { transform: translate(16%, -90%); }
body.vitta-kids .vk-charcard--vovo:hover .vk-charcard__img { transform: translate(16%, -94%) rotate(-2deg); }
body.vitta-kids .vk-charcard:hover { transform: translateY(-4px); }

body.vitta-kids .vk-charcard__body { padding-top: 14px; }
body.vitta-kids .vk-charcard__nome { font-size: 1.75rem; line-height: 1; }
body.vitta-kids .vk-charcard__animal {
	margin-top: 6px;
	font-size: .8125rem;
	font-weight: 600;
	opacity: .7;
}
body.vitta-kids .vk-charcard__perfil {
	margin-top: 14px;
	font-size: .9375rem;
	line-height: 1.5;
	opacity: .82;
}
body.vitta-kids .vk-charcard__poder {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid currentColor;
	border-color: rgba(0, 0, 0, .12);
	display: grid;
	gap: 3px;
}
body.vitta-kids .vk-charcard__poder span {
	font-size: .75rem;
	font-weight: 700;
	opacity: .6;
}
body.vitta-kids .vk-charcard__poder strong {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.25;
}
body.vitta-kids .vk-charcard__frase {
	margin-top: 16px;
	font-size: .9375rem;
	font-style: italic;
	opacity: .68;
}

/* -------------------------------------------------------------------------
   12. Jornada por idade (§15) — a grande banda verde
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-journey {
	background: var(--k-forest);
	color: var(--k-on);
	padding-block: var(--k-gap);
	position: relative;
	overflow: clip;
}
body.vitta-kids .vk-journey__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

body.vitta-kids .vk-tabs__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(40px, 5vw, 64px);
}
body.vitta-kids .vk-tabs__tab {
	display: grid;
	gap: 3px;
	background: transparent;
	border: 2px solid var(--k-on-line);
	border-radius: 18px;
	color: var(--k-on-2);
	padding: 14px 26px;
	cursor: pointer;
	text-align: center;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
body.vitta-kids .vk-tabs__tab:hover { border-color: var(--k-on); color: var(--k-on); }
body.vitta-kids .vk-tabs__tab[aria-selected="true"] {
	background: var(--k-sun);
	border-color: var(--k-sun);
	color: var(--k-forest-deep);
}
body.vitta-kids .vk-tabs__idade {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}
body.vitta-kids .vk-tabs__vol {
	font-size: .75rem;
	font-weight: 600;
	opacity: .8;
}

body.vitta-kids .vk-panel {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
/* `hidden` precisa ser reafirmado: `display: grid` o venceria. */
body.vitta-kids .vk-panel[hidden] { display: none; }

body.vitta-kids .vk-panel__art {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 340px;
}
/* O disco de creme não é enfeite: é o campo claro em que a Vovó Vitta pode
   pousar (a arte dela tem um halo claro embutido). */
body.vitta-kids .vk-panel__disc {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(94%, 400px);
	aspect-ratio: 1;
	border-radius: 999px;
	background: rgba(253, 243, 218, .1);
}
body.vitta-kids .vk-panel__cover {
	position: relative;
	margin: 0;
	width: 62%;
	transform: rotate(-3deg);
	z-index: 2;
}
body.vitta-kids .vk-panel__cover img {
	border-radius: 12px;
	box-shadow: 0 28px 56px -22px rgba(0, 0, 0, .6);
}
body.vitta-kids .vk-panel__char {
	position: absolute;
	right: 2%;
	bottom: -4%;
	width: 34%;
	z-index: 3;
}
body.vitta-kids .vk-panel__soon {
	position: relative;
	z-index: 2;
	text-align: center;
	border: 2px dashed var(--k-on-line);
	border-radius: var(--k-r-card);
	padding: 40px 30px;
	width: min(100%, 340px);
	margin-bottom: 20px;
}
body.vitta-kids .vk-panel__soon p {
	margin-top: 14px;
	font-size: .9375rem;
	color: var(--k-on-2);
}

body.vitta-kids .vk-panel__selo {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--k-forest-deep);
	background: var(--k-on);
	border-radius: 999px;
	padding: 6px 14px;
}
/* 09/09/2026 — a pilula do volume estava COLADA no titulo em todos os volumes.

   E nao era questao de aumentar o numero: o `margin-top: 18px` que estava aqui
   NUNCA chegou a valer. O reset de titulos la em cima (linha ~97),
   `body.skin-editorial.vitta-kids h1..h4 { margin: 0 }`, tem especificidade
   (0,2,1) — EXATAMENTE a mesma de `body.vitta-kids .vk-panel__titulo` — e vence
   pela ORDEM, por estar depois. O vao real sempre foi ZERO.

   Medido com `CSS.getMatchedStylesForNode`, nao deduzido: o computado voltava
   `margin-top: 0px` com a regra escrita e sem erro nenhum.

   Por isso o seletor abaixo leva as DUAS classes do body, (0,3,1) — que e
   exatamente a receita escrita no cabecalho deste arquivo para titulos. */
body.skin-editorial.vitta-kids .vk-panel__titulo {
	margin-top: clamp(24px, 2vw, 34px);
}
body.vitta-kids .vk-panel__titulo {
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.9rem);
	line-height: 1.04;
	display: grid;
	gap: 2px;
}
body.vitta-kids .vk-panel__titulo em {
	font-style: normal;
	color: var(--k-sun);
}
body.vitta-kids .vk-panel__texto {
	margin-top: 18px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--k-on-2);
	max-width: 46ch;
}

/* Os quatro blocos SÃO semanas 1–13, 14–26, 27–39, 40–52: numerar informa. */
body.vitta-kids .vk-trilha {
	margin-top: 30px;
	display: grid;
	gap: 12px;
}
body.vitta-kids .vk-trilha__item {
	display: flex;
	align-items: center;
	gap: 14px;
}
body.vitta-kids .vk-trilha__disco {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 999px;
	border: 2px solid var(--k-on-line);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--k-sun);
}
body.vitta-kids .vk-trilha__nome {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 600;
	font-size: 1.0625rem;
}

/* SEM barra lateral (ver `.vk-ex`). O painel translúcido sobre o verde já
   destaca o bloco; o dourado continua na página, onde ele mora — no número da
   trilha e na pílula. */
body.vitta-kids .vk-marco {
	margin-top: 26px;
	background: rgba(253, 243, 218, .09);
	border-radius: var(--k-r-tile);
	padding: 20px 24px;
}
body.vitta-kids .vk-marco h4 { font-size: 1.1875rem; }
body.vitta-kids .vk-marco p {
	margin-top: 6px;
	font-size: .9375rem;
	color: var(--k-on-2);
}

body.vitta-kids .vk-panel__exp {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 22px;
	margin-top: 24px;
}
body.vitta-kids .vk-panel__exp li {
	position: relative;
	padding-left: 18px;
	font-size: .90625rem;
	color: var(--k-on-2);
}
body.vitta-kids .vk-panel__exp li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px; height: 6px;
	border-radius: 999px;
	background: var(--k-sun);
}

body.vitta-kids .vk-panel__inclui {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--k-on-line);
}
body.vitta-kids .vk-panel__inclui li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .875rem;
	color: var(--k-on-2);
}
body.vitta-kids .vk-panel__inclui .vk-i {
	width: 15px; height: 15px;
	color: var(--k-sun);
	stroke-width: 2.6;
}

body.vitta-kids .vk-panel__diploma {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: .90625rem;
	color: var(--k-on-2);
}
body.vitta-kids .vk-panel__diploma .vk-i { width: 20px; height: 20px; color: var(--k-sun); }

body.vitta-kids .vk-panel .vk-btn { margin-top: 30px; }

/* -------------------------------------------------------------------------
   13. Preview (§16)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-preview {
	padding-block: var(--k-gap);
	position: relative;
}
body.vitta-kids .vk-preview__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

body.vitta-kids .vk-preview__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: 20px 10px;
	-webkit-overflow-scrolling: touch;
}
body.vitta-kids .vk-preview__rail::-webkit-scrollbar { display: none; }

body.vitta-kids .vk-preview__track {
	display: flex;
	gap: clamp(18px, 2vw, 30px);
	width: max-content;
	padding-inline: max(var(--k-pad), calc((100vw - var(--k-max)) / 2 + var(--k-pad)));
}
body.vitta-kids .vk-preview__item { scroll-snap-align: center; }

body.vitta-kids .vk-pg {
	display: grid;
	gap: 14px;
	width: clamp(200px, 24vw, 288px);
	background: none;
	border: 0;
	padding: 0;
	cursor: zoom-in;
	text-align: left;
}
body.vitta-kids .vk-pg__frame {
	display: block;
	border-radius: var(--k-r-img);
	overflow: hidden;
	border: 2px solid var(--k-line);
	background: var(--k-paper);
	transition: transform .3s cubic-bezier(.32, .72, .35, 1), border-color .3s ease;
}
/* Inclinação alternada: a fita parece páginas espalhadas, não uma grade. */
body.vitta-kids .vk-preview__item:nth-child(odd)  .vk-pg__frame { transform: rotate(-1.6deg); }
body.vitta-kids .vk-preview__item:nth-child(even) .vk-pg__frame { transform: rotate(1.4deg); }
body.vitta-kids .vk-pg:hover .vk-pg__frame {
	transform: rotate(0) translateY(-6px);
	border-color: var(--k-forest);
}
body.vitta-kids .vk-pg__meta { display: grid; gap: 3px; }
/* A TAG do volume (09/09/2026): pilula pequena acima do tipo da pagina. */
body.vitta-kids .vk-pg__vol {
	display: inline-block;
	/* `.vk-pg__meta` e GRADE, nao flex: quem impede a pilula de esticar a
	   largura inteira do card e `justify-self`, nao `align-self` — este ultimo
	   mexe no eixo de bloco e nao fazia nada aqui. */
	justify-self: start;
	margin-bottom: 7px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--k-cream);
	color: #5a4208;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
}

body.vitta-kids .vk-pg__tipo {
	font-size: .78125rem;
	font-weight: 700;
	color: var(--k-sun-ink);
}
body.vitta-kids .vk-pg__texto {
	font-size: .875rem;
	color: var(--k-ink-3);
}

body.vitta-kids .vk-preview__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

/* Ampliação */
body.vitta-kids .vk-zoom {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(10, 36, 16, .93);
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
}
body.vitta-kids .vk-zoom[hidden] { display: none; }
body.vitta-kids .vk-zoom__figure {
	margin: 0;
	max-width: min(100%, 900px);
	max-height: 100%;
	overflow: auto;
}
body.vitta-kids .vk-zoom__figure img {
	max-width: none;
	width: min(900px, 92vw);
	border-radius: 12px;
}
body.vitta-kids .vk-zoom__close {
	position: absolute;
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: 2px solid var(--k-on-line);
	background: transparent;
	color: var(--k-on);
	cursor: pointer;
	display: grid;
	place-items: center;
}
body.vitta-kids .vk-zoom__close svg { width: 22px; height: 22px; }
body.vitta-kids .vk-zoom__close:hover { border-color: var(--k-on); }

/* -------------------------------------------------------------------------
   14. Mais do que atividades (§17)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-feats {
	background: var(--k-paper-2);
	padding-block: var(--k-gap);
}
body.vitta-kids .vk-feats__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}
body.vitta-kids .vk-feats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(30px, 4vw, 52px);
}
/* Sem caixa: se cada recurso virasse card, a seção pesaria mais que a
   informação que carrega. */
body.vitta-kids .vk-feat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--k-cream);
	color: var(--k-sun-ink);
	margin-bottom: 16px;
}
body.vitta-kids .vk-feat__icon .vk-i { width: 24px; height: 24px; }
body.vitta-kids .vk-feat__nome { font-size: 1.1875rem; line-height: 1.2; }
body.vitta-kids .vk-feat__texto {
	margin-top: 8px;
	font-size: .9375rem;
	color: var(--k-ink-2);
	max-width: 28ch;
}

/* -------------------------------------------------------------------------
   15. Conquistas (§18)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-trail { padding-block: var(--k-gap); }
body.vitta-kids .vk-trail__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(36px, 5vw, 76px);
	align-items: center;
}
body.vitta-kids .vk-trail__selos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}
/* Tracejado porque é literalmente o que se recorta. */
body.vitta-kids .vk-selo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 2px dashed var(--k-sun);
	border-radius: 999px;
	padding: 10px 18px;
	background: var(--k-cream-soft);
	font-size: .875rem;
	font-weight: 600;
	color: #5a4208;
}
body.vitta-kids .vk-selo .vk-i { width: 18px; height: 18px; color: var(--k-sun-ink); }
body.vitta-kids .vk-trail__selos li:nth-child(3n)   { transform: rotate(-1.5deg); }
body.vitta-kids .vk-trail__selos li:nth-child(3n+2) { transform: rotate(1.2deg); }

body.vitta-kids .vk-trail__art { margin: 0; }
body.vitta-kids .vk-trail__art img {
	border-radius: var(--k-r-img);
	border: 2px solid var(--k-line);
	transform: rotate(2deg);
}

/* -------------------------------------------------------------------------
   16. Para os pais (§19)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-parents {
	background: var(--k-leaf-soft);
	padding-block: var(--k-gap);
}
body.vitta-kids .vk-parents__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}
body.vitta-kids .vk-parents__art { margin: 0; }
body.vitta-kids .vk-parents__char { width: 100%; }

body.vitta-kids .vk-parents__body { color: #23431a; }
body.vitta-kids .vk-parents__body .vk-lede { color: rgba(35, 67, 26, .78); }

/* A copy final de 08/09/2026 trocou os tres balões soltos por tres LINHAS de
   transformacao: a fala de ANTES (verbatim dos Cartões da Floresta) a esquerda,
   a de DEPOIS a direita, e uma seta no meio.

   As duas pontas sao balões de fala com o rabinho voltado para o proprio lado —
   raio assimetrico, nao borda de um lado so (regra permanente do projeto). */
body.vitta-kids .vk-parents__troca {
	display: grid;
	gap: 12px;
	margin-top: 32px;
}
body.vitta-kids .vk-troca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}
body.vitta-kids .vk-fala {
	display: block;
	padding: 14px 20px;
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.28;
	text-wrap: balance;
}
/* O balao de ANTES e o que ja estava no ar, sem um pixel de diferenca. */
body.vitta-kids .vk-fala--antes {
	background: var(--k-paper);
	border-radius: 18px 18px 18px 4px;
	color: var(--k-clay);
}
/* O de DEPOIS e o mesmo balao espelhado, em campo verde: o contraste diz
   sozinho qual dos dois e o destino. */
body.vitta-kids .vk-fala--depois {
	background: var(--k-forest);
	border-radius: 18px 18px 4px 18px;
	color: var(--k-on);
}
body.vitta-kids .vk-troca__seta {
	display: grid;
	place-items: center;
	color: rgba(35, 67, 26, .40);
}
body.vitta-kids .vk-troca__seta svg {
	width: 22px;
	height: 22px;
	display: block;
}
body.vitta-kids .vk-parents__fecho {
	margin-top: 30px;
	font-size: 1.1875rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   17. O que você recebe (§20)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-kit {
	background: var(--k-cream-soft);
	padding-block: var(--k-gap);
	overflow: clip;
}
body.vitta-kids .vk-kit__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}
body.vitta-kids .vk-kit__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(380px, 48vw, 640px);
}
body.vitta-kids .vk-kit__centro {
	position: relative;
	z-index: 3;
	margin: 0;
	width: clamp(150px, 19vw, 250px);
}
body.vitta-kids .vk-kit__centro img {
	border-radius: 12px;
	box-shadow: 0 30px 60px -26px rgba(15, 48, 18, .55);
}
body.vitta-kids .vk-kit__orbita { position: static; }
body.vitta-kids .vk-kit__peca {
	position: absolute;
	width: clamp(104px, 13vw, 168px);
	z-index: 2;
}
body.vitta-kids .vk-kit__peca img {
	border-radius: 10px;
	border: 2px solid rgba(15, 48, 18, .1);
	box-shadow: 0 18px 34px -20px rgba(15, 48, 18, .45);
}
body.vitta-kids .vk-kit__nome {
	display: block;
	margin-top: 10px;
	font-size: .78125rem;
	font-weight: 600;
	color: var(--k-ink-3);
	text-align: center;
}
/* As pecas ficam FORA da faixa central (34%-66%): a capa do meio tapava a
   legenda das que passavam por tras dela. */
body.vitta-kids .vk-kit__peca--1 { left: 0;    top: 3%;    transform: rotate(-7deg); }
body.vitta-kids .vk-kit__peca--2 { left: 5%;   bottom: 2%; transform: rotate(5deg); }
body.vitta-kids .vk-kit__peca--3 { left: 18%;  top: 38%;   transform: rotate(3deg); }
body.vitta-kids .vk-kit__peca--4 { right: 18%; top: 4%;    transform: rotate(-4deg); }
body.vitta-kids .vk-kit__peca--5 { right: 4%;  bottom: 2%; transform: rotate(6deg); }
body.vitta-kids .vk-kit__peca--6 { right: 0;   top: 40%;   transform: rotate(-6deg); }

/* -------------------------------------------------------------------------
   18. Bônus (§21)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-bonus { padding-block: var(--k-gap); }
body.vitta-kids .vk-bonus__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}
/* 04/09/2026: os tres LADO A LADO, a pedido dele. O brief pedia o oposto (§21:
   nada de trio de cards verticais identicos de curso online), entao o que
   sustenta a diferenca aqui e o que cada card ja tinha: CAMPO DE COR proprio,
   a arte real grande e inclinada, e a pilula de contagem. Nao viraram tres
   retangulos brancos iguais. */
body.vitta-kids .vk-bonus__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
	align-items: stretch;
}
body.vitta-kids .vk-bonuscard {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: clamp(20px, 2.2vw, 30px);
	align-content: start;
	border-radius: var(--k-r-panel);
	padding: clamp(24px, 2.6vw, 34px);
}
body.vitta-kids .vk-bonuscard--clay { background: var(--k-clay-soft); color: #6d2f0e; }
body.vitta-kids .vk-bonuscard--sky  { background: var(--k-sky-soft);  color: #12324f; }
body.vitta-kids .vk-bonuscard--sun  { background: var(--k-cream);     color: #5a4208; }

body.vitta-kids .vk-bonuscard__art { margin: 0 auto; max-width: 260px; width: 100%; }
body.vitta-kids .vk-bonuscard__art img {
	border-radius: 12px;
	box-shadow: 0 22px 44px -22px rgba(15, 48, 18, .5);
	transform: rotate(-2deg);
}
body.vitta-kids .vk-bonuscard__ordem {
	font-size: .78125rem;
	font-weight: 700;
	opacity: .6;
	margin-bottom: 10px;
}
body.vitta-kids .vk-bonuscard__nome {
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
	line-height: 1.1;
}
body.vitta-kids .vk-bonuscard__texto {
	margin-top: 14px;
	font-size: .96875rem;
	line-height: 1.6;
	opacity: .82;
	max-width: 52ch;
}
body.vitta-kids .vk-bonuscard__meta {
	display: inline-block;
	margin-top: 18px;
	font-size: .8125rem;
	font-weight: 700;
	border: 2px solid currentColor;
	border-radius: 999px;
	padding: 5px 14px;
	opacity: .75;
}

/* -------------------------------------------------------------------------
   19. Prova social (§22)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-depo {
	background: var(--k-paper-2);
	padding-block: var(--k-gap);
}
body.vitta-kids .vk-depo__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}
body.vitta-kids .vk-depo__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
}
body.vitta-kids .vk-depocard {
	background: var(--k-paper);
	border: 2px solid var(--k-line);
	border-radius: var(--k-r-card);
	padding: 28px 26px;
	display: grid;
	align-content: start;
	gap: 16px;
}
/* Placeholder tem de PARECER placeholder. */
body.vitta-kids .vk-depocard.is-placeholder {
	border-style: dashed;
	border-color: #c98a2a;
	background: repeating-linear-gradient(-45deg, rgba(255,232,191,.35), rgba(255,232,191,.35) 10px, transparent 10px, transparent 20px), var(--k-paper);
}
body.vitta-kids .vk-depocard .vk-i {
	width: 30px;
	height: 30px;
	color: var(--k-sun);
	stroke-width: 1.4;
}
body.vitta-kids .vk-depocard blockquote {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.45;
	color: var(--k-ink-2);
}
body.vitta-kids .vk-depocard__quem {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--k-line-2);
}
body.vitta-kids .vk-depocard__foto {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--k-cream);
	border: 2px dashed #c98a2a;
	flex: none;
}
body.vitta-kids .vk-depocard__quem figcaption { display: grid; }
body.vitta-kids .vk-depocard__quem strong { font-size: .9375rem; }
body.vitta-kids .vk-depocard__quem span { font-size: .8125rem; color: var(--k-ink-3); }

/* -------------------------------------------------------------------------
   19b. Quem fez o Vitta Kids (§22b) — 10/09/2026, 4a volta
   -------------------------------------------------------------------------

   A ESTRUTURA DO PRINT DELE: *"texto de um lado e foto dela do outro, e
   colocando uns paragrafos no texto"*. O print e o `.vk-block` desta mesma
   pagina (§12) peca por peca — rotulo verde, titulo em display, texto meio-tom,
   imagem a direita com o painel verde claro deslocado atras. Por isso a partial
   USA as classes do bloco, e rotulo, titulo, texto, painel e sombra vem de la.
   Aqui mora so o que e da autora: a pilha de paragrafos e a moldura da foto.

   A 3a volta (tres faixas, pergunta gigante, campo branco) esta inteira em
   `_backups/noord-theme-vitta/v1.43.0-kids-pre-autora-v4/`.
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-autora { padding-block: var(--k-gap); }

body.vitta-kids .vk-autora__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

/* Cinco paragrafos em vez de um bloco corrido — e o "colocando uns paragrafos"
   do pedido. `.vk-block__texto` ja traz 20px em cima, que fica como o vao entre
   o titulo e o primeiro; entre os seguintes o vao e menor, de paragrafo.
   (0,3,1): ganha do `.vk-block__texto` (0,2,1) por especificidade, nao por
   ordem. */
body.vitta-kids .vk-autora__texto .vk-block__texto { max-width: 52ch; }
body.vitta-kids .vk-autora__texto .vk-block__texto + .vk-block__texto { margin-top: 16px; }

/* A FOTO NAO PODE SER AMPLIADA. O retrato tem 493px; o print pede moldura EM
   PE, e numa moldura 4:5 com `cover` sobre origem quadrada quem manda na
   resolucao e a ALTURA. A figura ocupa 84% da arte (regra do `.vk-block`), entao
   a arte com 470px da uma moldura de 395x493 — 1:1 com o arquivo.

   O teto vai na ARTE, e nao na figura, para o painel verde continuar deslocado
   na mesma proporcao do bloco. E vai com (0,3,1) porque no estreito a regra
   `.vk-block__art { max-width: 520px }` vem DEPOIS no arquivo e, empatada,
   ganharia pela ordem — e a foto sairia ampliada 1,3x no telefone. */
body.vitta-kids .vk-autora .vk-autora__art {
	max-width: 470px;
	width: 100%;
}

/* Abaixo de 900 a grade vira uma coluna e a regra do bloco poe a figura a 100%
   da arte (e nao mais 84%) — com o teto de 470 a foto saia 470x588, ampliada
   1,19x, MEDIDO a 768. O teto no estreito e a propria largura da moldura. */
@media (max-width: 900px) {
	body.vitta-kids .vk-autora .vk-autora__art { max-width: 395px; }
}

body.vitta-kids .vk-autora__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
	background: var(--k-paper-2);
}

/* -------------------------------------------------------------------------
   20. Oferta (§23) — banda verde
   ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   20. Oferta (§23) — banda verde
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-price {
	background: var(--k-forest);
	color: var(--k-on);
	padding-block: var(--k-gap);
}
body.vitta-kids .vk-price__inner {
	/* Dois blocos lado a lado precisam de mais papel que o card unico de antes. */
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}

/* ===========================================================================
   DOIS CARTOES BRANCOS (09/09/2026, 2a rodada)
   ===========================================================================

   O quadro unico partido por um filete virou DOIS objetos com um vao de
   verdade entre eles: *"deve haver um espaco visivel entre eles, deixando
   claro que sao duas coisas diferentes"*. O filete divisor morreu junto —
   com dois cartoes soltos, quem separa e o vazio, nao um risco.

   A ORDEM de cada cartao e a que ele ditou, e o markup a segue na sequencia:
   icone > titulo > sub > preco > (select) > CTA > bullets.

   O PRECO continua verde-floresta (14,5:1) e nao dourado (1,9:1 sobre branco):
   quem carrega o destaque e o tamanho, nao a cor. Ver a rodada anterior.
   =========================================================================== */
body.vitta-kids .vk-planos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* O VAO. E ele que faz os dois lerem como duas coisas, entao nao encolhe
	   abaixo de 24px nem em tela apertada. */
	gap: clamp(24px, 2.6vw, 40px);
	/* `stretch` (o padrao) e o que permite alinhar os CTAs — ver abaixo. */
}

/* Os dois cartoes sao GRADES DE SEIS FATIAS, na mesma ordem:
   icone · titulo · linha de apoio · MIOLO · CTA · bullets.

   So o MIOLO e `1fr`, e e ele que absorve a diferenca de altura entre os dois:
   de um lado ele guarda preco + select, do outro os dois precos + o selo, e
   essas duas pilhas nao tem a mesma altura. Como os cartoes sao irmaos de grade
   e ficam com a mesma altura, a sobra cai toda no miolo do mais curto — e o CTA
   dos dois nasce na MESMA LINHA.

   Mediu 16px de desalinhamento antes disto. A alternativa era um `min-height`
   chutado no miolo, que quebraria no dia em que a copy mudasse; aqui nao ha
   numero nenhum para manter. */
body.vitta-kids .vk-cartao {
	display: grid;
	grid-template-rows: auto auto auto 1fr auto auto;
	min-width: 0;
	background: #fff;
	border-radius: var(--k-r-panel);
	padding: clamp(26px, 3vw, 44px);
	color: var(--k-ink);
}
/* v1.67.0 — quem chega à oferta pelo botão da barra fixa (ou da jornada) vê o
   cartão escolhido ganhar um anel dourado por ~3 s: é o "já selecionado" do
   Combo, que não tem select para marcar. Anel POR FORA e nos quatro lados
   (box-shadow), nada de borda de um lado só. O JS tira a classe no fim. */
body.vitta-kids .vk-cartao.is-alvo {
	animation: vk-cartao-alvo 3.2s ease both;
}
@keyframes vk-cartao-alvo {
	0%   { box-shadow: 0 0 0 0 rgba(247, 174, 16, 0); }
	12%  { box-shadow: 0 0 0 5px var(--k-sun); }
	72%  { box-shadow: 0 0 0 5px var(--k-sun); }
	100% { box-shadow: 0 0 0 0 rgba(247, 174, 16, 0); }
}
@media (prefers-reduced-motion: reduce) {
	body.vitta-kids .vk-cartao.is-alvo {
		animation: none;
		box-shadow: 0 0 0 5px var(--k-sun);
	}
}
body.vitta-kids .vk-cartao__meio {
	display: flex;
	flex-direction: column;
	/* `stretch` (o padrao) e obrigatorio aqui: com `flex-start` o select encolhia
	   para a largura do texto (267px contra os 463px do CTA) e a promessa de
	   *"select na largura do CTA"* morria em silencio. Quem nao pode esticar e o
	   selo, e ele ja pede `align-self: flex-start` por conta propria. */
}

/* O icone e a primeira coisa: a diferenca entre UM caderno e TRES e dita pelo
   desenho antes de qualquer texto. */
body.vitta-kids .vk-cartao__icone {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
	color: var(--k-forest);
}
body.vitta-kids .vk-cartao__icone .vk-i {
	width: 100%;
	height: 100%;
	stroke-width: 1.5;
}
body.vitta-kids .vk-cartao--combo .vk-cartao__icone { color: var(--k-clay); }

/* O TRIO: o mesmo caderno do outro cartao, repetido tres vezes lado a lado.

   Cada SVG mantem os 44px do cartao da esquerda — a peca tem de ser IDENTICA,
   senao a leitura "um contra tres" vira "grande contra pequeno". A largura da
   caixa passa a ser automatica, e o respiro entre os cadernos ja vem do proprio
   viewBox (o glifo ocupa 15 de 24, entao sobra folga dos dois lados). */
body.vitta-kids .vk-cartao__icone--trio {
	width: auto;
	display: flex;
	align-items: center;
}
body.vitta-kids .vk-cartao__icone--trio .vk-i {
	width: 44px;
	height: 44px;
	flex: none;
}

body.vitta-kids .vk-cartao__titulo {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--k-forest);
	margin-bottom: 6px;
}
body.vitta-kids .vk-cartao__sub {
	font-size: .96875rem;
	line-height: 1.35;
	color: var(--k-ink-2);
	min-height: 2.7em;
}

/* ---- Os valores ---- */
body.vitta-kids .vk-valor__de {
	margin-top: 14px;
	font-size: 1.0625rem;
	color: var(--k-ink-3);
}
body.vitta-kids .vk-valor__de s { text-decoration-thickness: 2px; }
body.vitta-kids .vk-valor__por strong {
	display: block;
	margin-top: 2px;
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: clamp(2.75rem, 1.9rem + 3vw, 4rem);
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--k-forest);
}
/* Sem preco riscado em cima, o numero do volume avulso precisa do mesmo
   respiro que o do combo ganha do "de". */
body.vitta-kids .vk-uni > .vk-valor__por { margin-top: 14px; }

/* O argumento do desconto, em vez do numero seco. Pilula, porque e um selo de
   condicao — nao um rotulo de secao. */
body.vitta-kids .vk-valor__selo {
	display: inline-block;
	align-self: flex-start;
	margin-top: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--k-cream);
	color: #7a3b00;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---- O seletor de volume: MESMA largura do CTA, como ele pediu ---- */
body.vitta-kids .vk-campo { margin-top: 22px; }
body.vitta-kids .vk-campo__caixa {
	position: relative;
	display: block;
}
body.vitta-kids .vk-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 54px;
	padding: 14px 52px 14px 18px;
	background: var(--k-paper);
	border: 2px solid var(--k-line);
	border-radius: 14px;
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--k-forest);
	cursor: pointer;
	transition: border-color .18s ease;
}
body.vitta-kids .vk-select:hover { border-color: rgba(15, 48, 18, .38); }
body.vitta-kids .vk-select:focus-visible {
	outline: 3px solid var(--k-forest);
	outline-offset: 2px;
}
body.vitta-kids .vk-campo__seta {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	color: var(--k-forest);
	pointer-events: none;
}
body.vitta-kids .vk-campo__seta svg { width: 100%; height: 100%; display: block; }

/* ---- Um painel por volume; so o escolhido fica visivel ----
   `display: flex`/`block` derruba o atributo `hidden`, entao a regra abaixo e
   obrigatoria — sem ela os tres volumes aparecem empilhados. */
body.vitta-kids .vk-uni[hidden] { display: none; }
body.vitta-kids .vk-unis--cta { margin-top: 14px; }

/* ---- Os bullets ---- */
body.vitta-kids .vk-price__inclui {
	display: grid;
	gap: 11px;
	margin: 26px 0 0;
	text-align: left;
}
body.vitta-kids .vk-cartao .vk-price__inclui li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: .9375rem;
	line-height: 1.35;
	color: var(--k-ink-2);
}
body.vitta-kids .vk-cartao .vk-price__inclui .vk-i {
	width: 16px; height: 16px;
	margin-top: .28em;
	flex: none;
	/* Verde-folha: o dourado sumia sobre branco, e verde ainda diz "incluido". */
	color: var(--k-leaf);
	stroke-width: 2.6;
}



/* -------------------------------------------------------------------------
   21. FAQ (§24)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-faq { padding-block: var(--k-gap); }
body.vitta-kids .vk-faq__wrap {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: var(--k-pad);
}
body.vitta-kids .vk-faq__lista { display: grid; }
body.vitta-kids .vk-faq__item { border-top: 1px solid var(--k-line); }
body.vitta-kids .vk-faq__item:last-child { border-bottom: 1px solid var(--k-line); }
body.vitta-kids .vk-faq__item h3 { margin: 0; }

body.vitta-kids .vk-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: none;
	border: 0;
	padding: 26px 4px;
	cursor: pointer;
	text-align: left;
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 600;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem);
	line-height: 1.3;
	color: var(--k-ink);
	transition: color .18s ease;
}
body.vitta-kids .vk-faq__q:hover { color: var(--k-leaf); }

body.vitta-kids .vk-faq__sinal {
	position: relative;
	width: 22px;
	height: 22px;
	flex: none;
}
body.vitta-kids .vk-faq__sinal::before,
body.vitta-kids .vk-faq__sinal::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--k-sun-ink);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .26s ease, opacity .2s ease;
}
body.vitta-kids .vk-faq__sinal::before { width: 18px; height: 2px; }
body.vitta-kids .vk-faq__sinal::after  { width: 2px;  height: 18px; }
body.vitta-kids .vk-faq__q[aria-expanded="true"] .vk-faq__sinal::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* `0fr` NÃO fecha se o item do grid tiver padding — o recheio desce para o
   `__inner` e o `overflow: hidden` fica no painel. */
body.vitta-kids .vk-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
body.vitta-kids .vk-faq__a[hidden] { display: none; }
body.vitta-kids .vk-faq__a.is-open { grid-template-rows: 1fr; }
body.vitta-kids .vk-faq__inner { min-height: 0; }
body.vitta-kids .vk-faq__inner p {
	padding: 0 4px 28px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--k-ink-2);
	max-width: 62ch;
}
body.vitta-kids .vk-faq__inner .vk-ph-tag { margin: 0 4px 12px; }

/* -------------------------------------------------------------------------
   22. Fecho (§25)
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-final {
	background: var(--k-forest);
	color: var(--k-on);
	/* O respiro embaixo nao e estetico: sem ele o `overflow: clip` da secao
	   corta os pes dos tres personagens na emenda com o rodape. */
	padding-block: var(--k-gap) clamp(28px, 3.5vw, 52px);
	position: relative;
	overflow: clip;
	text-align: center;
}
body.vitta-kids .vk-final__inner {
	position: relative;
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-pad);
}
body.vitta-kids .vk-final__titulo {
	font-size: clamp(2.1rem, 1.25rem + 3.2vw, 4rem);
	line-height: 1.04;
	max-width: 20ch;
	margin-inline: auto;
}
body.vitta-kids .vk-final__sub {
	margin-top: 18px;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem);
	color: var(--k-on-2);
}
body.vitta-kids .vk-final .vk-btn { margin-top: 32px; }

body.vitta-kids .vk-final__cena {
	position: relative;
	margin-top: clamp(40px, 5vw, 70px);
	height: clamp(200px, 26vw, 330px);
}
/* A clareira é deliberada: dá campo claro para a Vovó Vitta pousar, e o halo
   embutido na arte dela vira parte da composição em vez de defeito. */
body.vitta-kids .vk-final__clareira {
	position: absolute;
	left: 50%;
	bottom: -14%;
	transform: translateX(-50%);
	width: min(1000px, 96%);
	aspect-ratio: 2.6 / 1;
	background: var(--k-cream-soft);
	border-radius: 50% 50% 0 0 / 62% 62% 0 0;
}
body.vitta-kids .vk-final__char {
	position: absolute;
	bottom: 0;
}
body.vitta-kids .vk-final__char--fino { width: clamp(120px, 15vw, 200px); left: 50%; transform: translateX(-50%); z-index: 3; }
body.vitta-kids .vk-final__char--nina { width: clamp(88px, 11vw, 148px);  left: 24%; z-index: 2; }
body.vitta-kids .vk-final__char--vovo { width: clamp(112px, 14vw, 186px); right: 22%; bottom: -2%; z-index: 2; }

body.vitta-kids .vk-leaves--final svg { stroke: var(--k-sun); opacity: .34; }

/* -------------------------------------------------------------------------
   23. Rodapé (§26)

   CÓPIA LITERAL do rodapé do Diário (`vitta-diario.css`, seção "Rodapé próprio
   da página de produto"), a pedido dele: *"pegue exatamente a configuração que
   tem lá e copie para o vitta kids mudando apenas as cores"*.

   O QUE MUDOU, e é só isso:
     --vd-cream      → --k-cream-soft   (banda e texto sobre o escuro)
     --vd-navy       → --k-forest
     --vd-navy-2     → --k-forest-2
     --vd-navy-mute  → --k-ink-3
     --vd-navy-soft  → --k-ink-2
     --vd-gold       → --k-sun
     --vd-gold-ink   → --k-sun-ink
     --vd-bg         → --k-paper       (painel claro)
     --vd-line       → --k-line
     --vd-hair       → --k-line-2
     --vd-r-block    → --k-r-card      (os dois valem 24px)
     body.vitta-diario → body.vitta-kids
     .vd-foot → .vk-foot · .vd-btn--gold → .vk-btn--sun

   DUAS coisas que a cópia precisou acrescentar, e nenhuma delas é estética:

   1. **`--v-max` e `--v-pad` locais.** O rodapé do Diário usa esses dois
      tokens, e a página do Diário os redefine para 1760px / clamp(24, 3.4vw,
      64). Na página do Kids eles valeriam os da home (2000 / 44), e a geometria
      sairia diferente da do print. Redeclarados aqui, no escopo do rodapé, com
      os valores DO DIÁRIO — é o que faz o card, a coluna e os círculos
      medirem o mesmo dos dois lados.

      Consequência declarada: o rodapé fica mais largo que as 19 seções acima
      (`--k-max` é 1280). É o preço de "idêntico".

   2. **`body.vitta-kids` em toda regra.** Lá as regras podem ser classe solta;
      aqui não: o `<body>` carrega `vitta-home` E `vitta-kids`, e
      `body.vitta-kids p { margin: 0 }` (0,1,2) mataria o `margin-top: auto` do
      claim — que é justamente o que alinha a base das duas colunas.
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-foot {
	--v-max: 1760px;
	--v-pad: clamp(24px, 3.4vw, 64px);
}

body.vitta-kids .vk-foot {
	position: relative;
	isolation: isolate;
	/* Sem vão no topo, como no Diário. Aqui a razão é outra: quem passou a
	   terminar a página é o FAQ, que já fecha com um `--k-gap` inteiro de
	   recheio. Somar o vão do modelo empilharia 260px de papel vazio. */
	margin-top: 0;
	padding: clamp(48px, 6vw, 88px) 0;
	background: var(--k-cream-soft);
	overflow: hidden;
}

/* Padrão da marca como máscara alfa, tingido do verde 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. */
body.vitta-kids .vk-foot__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--k-forest);
	-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;
}

body.vitta-kids .vk-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) {
	body.vitta-kids .vk-foot__inner {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

/* --- Coluna esquerda: card verde ----------------------------------------- */

body.vitta-kids .vk-foot__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-radius: var(--k-r-card);
	background: linear-gradient(168deg, var(--k-forest-2) 0%, var(--k-forest) 58%);
	color: var(--k-cream-soft);
	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. */
body.vitta-kids .vk-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(--k-sun);
}

/* O claim do modelo: display 400, caixa baixa, 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. */
body.vitta-kids .vk-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(--k-cream-soft);
}

@media (min-width: 768px) {
	body.vitta-kids .vk-foot__claim {
		max-width: 16ch;
	}
}

body.vitta-kids .vk-foot__cta {
	flex: 0 0 auto;
}

/* Sobre o verde 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-kids .vk-foot .vk-btn--sun {
	background: var(--k-sun);
	border-color: var(--k-sun);
	color: var(--k-forest);
}

body.vitta-kids .vk-foot .vk-btn--sun:hover {
	background: var(--k-cream-soft);
	border-color: var(--k-cream-soft);
	color: var(--k-forest);
}

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

body.vitta-kids .vk-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
   `.vk-foot` no meio para chegar a (0,3,0) e virar verde. 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-kids .vk-foot .vh-round {
	/* Degrau abaixo dos 24px do cartão, como na home (32 → 16). */
	border-radius: 14px;
	background: var(--k-forest);
	color: var(--k-cream-soft);
	--vh-icon-knockout: var(--k-forest);
}

body.vitta-kids .vk-foot .vh-round:hover {
	background: var(--k-forest-2);
	--vh-icon-knockout: var(--k-forest-2);
}

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

body.vitta-kids .vk-foot__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--k-r-card);
	background: var(--k-paper);
	padding: clamp(24px, 2.8vw, 40px);
}

/* A logo do Vitta Materna, clicável, de volta à home (13/09/2026) — a mesma
   peça do rodapé do Diário, no verde desta página. */
body.vitta-kids .vk-foot__brand {
	display: inline-flex;
	align-self: flex-start;
	margin-bottom: clamp(14px, 1.8vw, 22px);
	padding: 4px 0;
	color: var(--k-forest);
	border-radius: 6px;
	transition: opacity 0.2s ease;
}

body.vitta-kids .vk-foot__brand:hover {
	opacity: 0.72;
}

body.vitta-kids .vk-foot__brand:focus-visible {
	outline: 2px solid var(--k-sun-ink);
	outline-offset: 4px;
}

body.vitta-kids .vk-foot__logo {
	width: clamp(112px, 10vw, 144px);
}

body.vitta-kids .vk-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-kids .vk-foot__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--k-forest);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

body.vitta-kids .vk-foot__nav a:hover,
body.vitta-kids .vk-foot__nav a:focus-visible {
	color: var(--k-sun-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

body.vitta-kids .vk-foot__rule {
	height: 1px;
	background: var(--k-line);
	margin: clamp(20px, 2.4vw, 32px) 0;
}

body.vitta-kids .vk-foot__closing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

body.vitta-kids .vk-foot__copy,
body.vitta-kids .vk-foot__legal {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--k-ink-3);
}

body.vitta-kids .vk-foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
}

body.vitta-kids .vk-foot__legal a {
	color: var(--k-ink-3);
	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-kids .vk-foot__legal a:hover,
body.vitta-kids .vk-foot__legal a:focus-visible {
	color: var(--k-forest);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* A ÚNICA regra que o rodapé do Diário não tem. Lá as duas páginas legais são
   `href="#"`; aqui, enquanto a URL não existir, o item é TEXTO e não link —
   com a pinta exata do link, então a linha fica idêntica na tela. A pendência
   vive em `noord_vitta_kids_config()['legal']`. */
body.vitta-kids .vk-foot__pend {
	display: inline-block;
	padding: 10px 4px;
	margin: -10px -4px;
	color: var(--k-ink-3);
	cursor: default;
}

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

body.vitta-kids .vk-foot__product p {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--k-ink-3);
}

body.vitta-kids .vk-foot__product p + p {
	margin-top: 4px;
}

body.vitta-kids .vk-foot__disclaimer {
	font-weight: 500;
	color: var(--k-ink-2);
}

/* -------------------------------------------------------------------------
   24. Entrada do herói — o ÚNICO momento orquestrado da página

   Roda no CARREGAMENTO, em CSS puro: não depende de JS e por isso não pisca
   (gatilho por classe só chegaria com o script do rodapé, tarde demais).
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-hero__stack,
body.vitta-kids .vk-hero__fino,
body.vitta-kids .vk-hero__nina,
body.vitta-kids .vk-hero__vovo,
body.vitta-kids .vk-hero__blob {
	opacity: 0;
	animation: vk-settle .9s cubic-bezier(.22, .78, .3, 1) forwards;
}
body.vitta-kids .vk-hero__blob  { animation-delay: .05s; }
body.vitta-kids .vk-hero__stack { animation-delay: .18s; }
body.vitta-kids .vk-hero__fino  { animation-delay: .34s; }
body.vitta-kids .vk-hero__vovo  { animation-delay: .46s; }
body.vitta-kids .vk-hero__nina  { animation-delay: .56s; }

@keyframes vk-settle {
	from { opacity: 0; transform: translateY(26px) scale(.96); }
	to   { opacity: 1; transform: none; }
}
/* O `transform` final de quem já tinha rotação precisa ser reafirmado, senão
   a animação zera o giro da capa. */
body.vitta-kids .vk-hero__cover { transform: rotate(3.5deg); }

/* Entrada dos PERSONAGENS ao rolar (§27 do brief).

   Deliberadamente SO nos personagens. "Fade-and-slide-up em cada secao" e o
   tique que foi reprovado na v1.19.0 — aqui quem entra e o personagem, que e o
   assunto da pagina, e nao a secao inteira.

   Usa a propriedade `translate`, NAO `transform`: varios destes ja carregam um
   `transform` proprio (o Fino do fecho tem `translateX(-50%)` para centralizar),
   e `translate` compoe com ele em vez de sobrescrever.

   O atributo `data-inview` e escrito pelo JS: sem script, e com movimento
   reduzido, os personagens nascem visiveis. */
body.vitta-kids .vk-char[data-inview] {
	opacity: 0;
	translate: 0 22px;
	transition: opacity .55s ease, translate .7s cubic-bezier(.22, .78, .3, 1);
}
body.vitta-kids .vk-char[data-inview].is-in {
	opacity: 1;
	translate: 0 0;
}

/* -------------------------------------------------------------------------
   25. Responsivo (§28) — 360px para cima
   ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
	body.vitta-kids .vk-skills__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	body.vitta-kids .vk-skill { grid-column: span 2; }
	body.vitta-kids .vk-skill--char { grid-column: span 4; }
	body.vitta-kids .vk-trust__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.vitta-kids .vk-depo__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	body.vitta-kids .vk-header__nav {
		position: absolute;
		left: var(--k-pad);
		right: var(--k-pad);
		top: calc(100% + 8px);
		background: var(--k-paper);
		border: 2px solid var(--k-line);
		border-radius: var(--k-r-card);
		padding: 20px;
		display: none;
		box-shadow: 0 24px 48px -24px rgba(15, 48, 18, .5);
	}
	body.vitta-kids .vk-header__nav.is-open { display: block; }
	body.vitta-kids .vk-header__nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
	body.vitta-kids .vk-header__nav a {
		display: flex;
		min-height: 48px;
		align-items: center;
		font-size: 1.0625rem;
	}
	body.vitta-kids .vk-header__nav a::after { display: none; }
	body.vitta-kids .vk-header__cta--panel { display: flex; width: 100%; margin-top: 14px; }
	body.vitta-kids .vk-header > .vk-header__inner > .vk-header__cta { display: none; }
	body.vitta-kids .vk-burger { display: block; }

	body.vitta-kids .vk-hero__inner { grid-template-columns: 1fr; }
	body.vitta-kids .vk-hero__art { max-width: 560px; margin-inline: auto; width: 100%; }
	body.vitta-kids .vk-hero__provas { grid-template-columns: 1fr; max-width: none; }

	body.vitta-kids .vk-why__body,
	body.vitta-kids .vk-trail__inner,
	body.vitta-kids .vk-parents__inner { grid-template-columns: 1fr; }
	/* No estreito o titulo tem de vir ANTES da ilustracao: a coluna "ao lado"
	   nao existe aqui (ver [[vitta-mobile-armadilhas]]). */
	body.vitta-kids .vk-why__col { order: -1; gap: clamp(24px, 5vw, 34px); }
	body.vitta-kids .vk-why__art { max-width: 480px; margin-inline: auto; }
	body.vitta-kids .vk-why__ciencia { margin-top: -8%; width: 100%; }
	body.vitta-kids .vk-parents__art { max-width: 360px; margin-inline: auto; }

	body.vitta-kids .vk-block,
	body.vitta-kids .vk-panel { grid-template-columns: 1fr; }
	body.vitta-kids .vk-block--flip .vk-block__body { order: 0; }
	body.vitta-kids .vk-block__art { max-width: 520px; margin-inline: auto; width: 100%; }
	body.vitta-kids .vk-block__figure { width: 100%; }
	body.vitta-kids .vk-block__panel,
	body.vitta-kids .vk-block--flip .vk-block__panel { inset: 6% -4% -6% -4%; }

	body.vitta-kids .vk-chars__grid { grid-template-columns: 1fr; gap: 150px; padding-top: 150px; }
	body.vitta-kids .vk-charcard__img { height: 190px; }

	body.vitta-kids .vk-panel__art { min-height: 300px; max-width: 460px; margin-inline: auto; width: 100%; }

	/* Abaixo de 900 os tres nao cabem lado a lado: uma coluna so, e o card
	   volta a ser HORIZONTAL (arte a esquerda), que e o que rende numa faixa
	   larga e curta. */
	body.vitta-kids .vk-bonus__lista { grid-template-columns: 1fr; }
	body.vitta-kids .vk-bonuscard {
		grid-template-rows: none;
		grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
		align-items: center;
	}
	body.vitta-kids .vk-bonuscard__art { margin: 0; max-width: 320px; }

	body.vitta-kids .vk-how__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
	body.vitta-kids .vk-how__passos::before { display: none; }

	/* No estreito a composição do kit vira fita: "em volta" não existe aqui. */
	body.vitta-kids .vk-kit__stage { display: block; min-height: 0; }
	body.vitta-kids .vk-kit__centro { margin-inline: auto; width: clamp(160px, 46vw, 230px); }
	body.vitta-kids .vk-kit__orbita {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
		margin-top: 34px;
	}
	body.vitta-kids .vk-kit__peca {
		position: static;
		width: 100%;
		transform: none;
	}
	body.vitta-kids .vk-kit__peca--1,
	body.vitta-kids .vk-kit__peca--3,
	body.vitta-kids .vk-kit__peca--5 { transform: rotate(-2deg); }

	/* Dois cartoes lado a lado nao cabem: empilham. O vao continua sendo o que
	   separa os dois — nao entra divisor nenhum, porque eles ja sao dois
	   objetos soltos e nao um quadro partido ao meio. */
	body.vitta-kids .vk-planos { grid-template-columns: 1fr; }
	/* Empilhado, o `min-height` que alinhava as duas linhas de apoio nao tem
	   mais com quem se alinhar e so abriria um vao morto. */
	body.vitta-kids .vk-cartao__sub { min-height: 0; }
}

@media (max-width: 620px) {
	body.vitta-kids { font-size: 16px; }
	body.vitta-kids .vk-trust__inner { grid-template-columns: 1fr; }
	body.vitta-kids .vk-skills__grid { grid-template-columns: 1fr; }
	body.vitta-kids .vk-skill,
	body.vitta-kids .vk-skill--char { grid-column: span 1; }
	body.vitta-kids .vk-skill--char { padding-right: 40%; min-height: 230px; }
	body.vitta-kids .vk-panel__exp { grid-template-columns: 1fr; }

	/* Duas colunas nao cabem a 390: a linha empilha e a seta gira 90deg, senao
	   ela aponta para o lado enquanto o olho desce (ver [[vitta-mobile-armadilhas]]). */
	body.vitta-kids .vk-troca {
		grid-template-columns: 1fr;
		justify-items: stretch;
		gap: 6px;
	}
	body.vitta-kids .vk-troca__seta { transform: rotate(90deg); }
	body.vitta-kids .vk-parents__troca { gap: 20px; }
	body.vitta-kids .vk-how__passos { grid-template-columns: 1fr; gap: 26px; }
	body.vitta-kids .vk-how__passo { display: flex; align-items: center; gap: 18px; text-align: left; }
	body.vitta-kids .vk-how__num { margin-bottom: 0; flex: none; width: 46px; height: 46px; font-size: 1.1rem; }
	body.vitta-kids .vk-how__passo p { margin-inline: 0; max-width: none; }
	body.vitta-kids .vk-feats__grid { grid-template-columns: 1fr; gap: 26px; }
	/* CTA de largura cheia onde a decisão acontece. */
	body.vitta-kids .vk-hero__acoes .vk-btn,
	body.vitta-kids .vk-panel .vk-btn,
	body.vitta-kids .vk-final .vk-btn { width: 100%; }
	body.vitta-kids .vk-kit__orbita { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.vitta-kids .vk-final__char--nina { left: 6%; }
	body.vitta-kids .vk-final__char--vovo { right: 4%; }

	/* No celular o card horizontal do bônus reduz a capa a uma miniatura de
	   ~90px ao lado de um parágrafo inteiro. Volta a empilhar, com a arte
	   grande em cima. */
	body.vitta-kids .vk-bonuscard {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	body.vitta-kids .vk-bonuscard__art { margin: 0 auto; max-width: 240px; }

	/* A 390 o cartao ja e a largura da tela: o respiro interno pode encolher
	   sem o conteudo encostar na borda. */
	body.vitta-kids .vk-cartao { padding: 24px 20px; }

	/* Quatro pilulas de largura igual a 390 dariam ~70px cada e "Experiencia"
	   quebraria em duas linhas. Empilham, e o trace ligante gira para baixo. */
	body.vitta-kids .vk-flow {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 22px;
	}
	body.vitta-kids .vk-flow li:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -14px;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
}

/* -------------------------------------------------------------------------
   27. Barra de compra fixa (chrome) — v1.23.0

   CÓPIA LITERAL da barra do Diário (`vitta-diario.css`, "Barra de compra fixa
   no rodapé da tela"), pelo pedido: *"deixe um botao fixo embaixo durante toda
   rolagem de pagina (igual no diario guiado)"*. Só as cores mudaram:

     --vd-navy      → --k-forest-deep     --vd-cream       → --k-on
     --vd-navy-2    → --k-forest-2        --vd-cream-mute  → --k-on-3
     --vd-gold      → --k-sun             --vd-r-pill      → 999px
     --v-display/--v-body → --k-display/--k-body   SOFT 60 → SOFT 100

   Como no rodapé, TODA regra ganhou `body.vitta-kids`: o `<body>` carrega
   `vitta-home` E `vitta-kids`, e os resets da home empatam com classe solta.

   O `--v-pad` do recuo lateral é o da home nesta página (a do Diário o
   redefine). Não foi forçado: aqui a barra é mais estreita que o container e a
   diferença não aparece.
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-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;
}

body.vitta-kids .vk-buybar.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

body.vitta-kids .vk-buybar__pill {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 09/09/2026: a barra passou de DUAS pecas (texto | botao) para TRES, com o
	   seletor no meio. O vao encolheu e a pilula alargou para o conjunto nao
	   ficar apertado. */
	gap: clamp(14px, 2.2vw, 30px);
	margin: 0 auto;
	max-width: 1000px;
	padding: 12px 12px 12px clamp(22px, 2.6vw, 38px);
	border-radius: 999px;
	/* 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(--k-forest-2) 0%, var(--k-forest-deep) 62%);
	border: 1px solid rgba(253, 243, 218, 0.16);
	box-shadow: rgba(10, 36, 16, 0.42) 0 18px 48px 0;
}

body.vitta-kids .vk-buybar__body {
	min-width: 0;
}

body.vitta-kids .vk-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(--k-on-3);
}

body.vitta-kids .vk-buybar__name {
	color: var(--k-on);
}

/* Bolinha no acento — o mesmo separador da barra de anúncio. */
body.vitta-kids .vk-buybar__garantia::before {
	content: "·";
	padding-right: 12px;
	color: var(--k-sun);
	font-weight: 700;
}

body.vitta-kids .vk-buybar__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0;
}

body.vitta-kids .vk-buybar__value {
	font-family: var(--k-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' 100, 'WONK' 1;
	color: var(--k-on);
}

/* Onde o Diário põe o frete, aqui vai a GARANTIA: o Vitta Kids é imprimível e
   não tem frete nenhum para prometer. */
body.vitta-kids .vk-buybar__meta {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--k-on-3);
	/* Cada frase inteira ou nada: a quebra acontece entre elas, nunca no meio. */
	white-space: nowrap;
}




/* ===========================================================================
   POP-UP DE AMOSTRA GRATIS (§13) — 09/09/2026
   =========================================================================== */
body.vk-travado { overflow: hidden; }

body.vitta-kids .vk-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 20px;
}
body.vitta-kids .vk-modal[hidden] { display: none; }

body.vitta-kids .vk-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(10, 36, 16, .62);
}
body.vitta-kids .vk-modal__caixa {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var(--k-r-panel);
	padding: clamp(26px, 4vw, 40px);
	color: var(--k-ink);
	box-shadow: 0 40px 90px -30px rgba(10, 36, 16, .7);
}
body.vitta-kids .vk-modal__x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--k-paper-2);
	color: var(--k-forest);
	cursor: pointer;
}
body.vitta-kids .vk-modal__x:hover { background: var(--k-cream-soft); }
body.vitta-kids .vk-modal__x svg { width: 18px; height: 18px; }

body.vitta-kids .vk-modal__titulo {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--k-forest);
	padding-right: 44px;
}
body.vitta-kids .vk-modal__sub {
	margin-top: 8px;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--k-ink-2);
}

/* O tema BASE pinta `fieldset` e `legend` de #fbfbfb (heranca do Storefront) e
   isso nao aparece em busca nenhuma neste arquivo. Zerar e obrigatorio. */
body.vitta-kids .vk-amvols {
	background: transparent;
	border: 0;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
body.vitta-kids .vk-amvol {
	position: relative;
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	border: 2px solid var(--k-line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}
body.vitta-kids .vk-amvol input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}
body.vitta-kids .vk-amvol__nome {
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: 1rem;
	color: var(--k-forest);
}
body.vitta-kids .vk-amvol:hover { border-color: rgba(15, 48, 18, .38); }
body.vitta-kids .vk-amvol.is-on,
body.vitta-kids .vk-amvol:has(input:checked) {
	border-color: var(--k-sun);
	background: rgba(247, 174, 16, .12);
}
body.vitta-kids .vk-amvol:has(input:focus-visible) {
	outline: 3px solid var(--k-forest);
	outline-offset: 2px;
}
/* Volume sem arquivo de amostra: existe, mas nao da para baixar. */
body.vitta-kids .vk-amvol.is-off {
	cursor: not-allowed;
	border-style: dashed;
	background: var(--k-paper-2);
}
body.vitta-kids .vk-amvol.is-off .vk-amvol__nome { color: var(--k-ink-3); }
body.vitta-kids .vk-amvol__aviso {
	font-size: .8125rem;
	color: var(--k-clay);
}

body.vitta-kids .vk-modal__cta { margin-top: 22px; }
body.vitta-kids .vk-modal__cta[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: auto;
}
body.vitta-kids .vk-modal__cta[aria-disabled="true"]:hover { transform: none; }
/* ===========================================================================
   ALTO-RELEVO NOS BOTOES — 09/09/2026
   ===========================================================================

   Pedido dele, com dois botoes de exemplo em print: *"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."*

   A tecnica e uma so e vale para QUALQUER cor, que e o ponto: o degrau e um
   `inset` preto com alfa na aresta de baixo, entao ele nasce como uma versao
   mais escura da PROPRIA cor do botao. Nao ha lista de cores para manter, nao
   ha cor nova no projeto, e um botao que mude de cor amanha continua certo.

   (A alternativa obvia — `box-shadow: 0 4px 0 <cor escura>` por fora — obrigaria
   a escolher um tom escuro por botao, ou seja, inventar cor. Foi descartada.)

   O `:active` afunda o botao 3px e encolhe o degrau: e o movimento que responde
   a uma acao da pessoa, que e o unico tipo de movimento que esta pagina usa.
   =========================================================================== */
.vk-btn,
body.vitta-kids .vk-btn,
body.vitta-kids .vk-buybar__cta,
body.vitta-kids .vk-tabs__tab,
body.vitta-kids .vk-bbsel__btn {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .20), 0 2px 4px rgba(15, 48, 18, .12);
}
body.vitta-kids .vk-btn:active,
body.vitta-kids .vk-buybar__cta:active,
body.vitta-kids .vk-tabs__tab:active,
body.vitta-kids .vk-bbsel__btn:active {
	transform: translateY(3px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .20), 0 1px 2px rgba(15, 48, 18, .12);
}
/* O hover ja levantava 2px; com o degrau embaixo, levantar mais reforca o
   relevo em vez de brigar com ele. */
body.vitta-kids .vk-btn:hover { transform: translateY(-2px); }

/* As pilulas de volume da jornada sao BOTOES de verdade e entraram no pedido do
   relevo. A que esta escolhida afunda, como um botao apertado que ficou
   apertado. */
body.vitta-kids .vk-tabs__tab[aria-selected="true"] {
	transform: translateY(2px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .20);
}

/* 09/09/2026 — ele encaixotou as tres pilulas de amarelo: *"altere os fundos dos
   botoes para branco e sem borda (mantenha apenas o sombreado que cria o efeito
   3D) quando nao selecionado. Quando selecionado, manter fundo amarelo."*

   Sobre a banda verde escura, tres botoes de contorno liam como campo vazio;
   brancos, eles viram tres objetos de verdade e a escolha dourada continua
   sendo a unica coisa colorida. A borda sai e o degrau fica — e o degrau
   sozinho ja delimita a peca, entao nao falta contorno.

   Mora DEPOIS do bloco de relevo de proposito: `.vk-tabs__tab` empata em
   especificidade com a regra la de cima (secao 13) e so ganha pela ORDEM.
   E a armadilha nº 1 do projeto. */
body.vitta-kids .vk-tabs__tab {
	background: #fff;
	border-color: transparent;
	color: var(--k-forest);
}
body.vitta-kids .vk-tabs__tab .vk-tabs__idade { color: var(--k-forest); }
body.vitta-kids .vk-tabs__tab .vk-tabs__vol { color: rgba(23, 36, 15, .62); }
body.vitta-kids .vk-tabs__tab:hover {
	background: var(--k-paper);
	border-color: transparent;
	color: var(--k-forest);
}
/* A escolhida continua dourada, e ai a tinta volta a ser a escura da marca. */
body.vitta-kids .vk-tabs__tab[aria-selected="true"] {
	background: var(--k-sun);
	border-color: transparent;
}
body.vitta-kids .vk-tabs__tab[aria-selected="true"] .vk-tabs__idade,
body.vitta-kids .vk-tabs__tab[aria-selected="true"] .vk-tabs__vol { color: var(--k-forest-deep); }

/* ===========================================================================
   O SELETOR DA BARRA DE COMPRA — abre PARA CIMA
   =========================================================================== */
body.vitta-kids .vk-bbsel {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 340px;
}
body.vitta-kids .vk-bbsel__rot {
	display: block;
	font-size: .625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--k-on-3);
	margin-bottom: 5px;
}
body.vitta-kids .vk-bbsel__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	background: rgba(253, 243, 218, .10);
	border: 2px solid var(--k-on-line);
	border-radius: 14px;
	color: var(--k-on);
	font-family: var(--k-display);
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.15;
	text-align: left;
	cursor: pointer;
}
body.vitta-kids .vk-bbsel__btn:hover { border-color: rgba(253, 243, 218, .42); }
body.vitta-kids .vk-bbsel__btn:focus-visible {
	outline: 3px solid var(--k-sun);
	outline-offset: 2px;
}
body.vitta-kids .vk-bbsel__val {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.vitta-kids .vk-bbsel__seta {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--k-sun);
	transition: transform .18s ease;
}
body.vitta-kids .vk-bbsel__seta svg { width: 100%; height: 100%; display: block; }
body.vitta-kids .vk-bbsel.is-aberto .vk-bbsel__seta { transform: rotate(180deg); }

/* AQUI mora a promessa "abre pra cima": `bottom: 100%` e uma regra, nao uma
   aposta na heuristica do navegador — que e o que um <select> nativo seria. */
body.vitta-kids .vk-bbsel__lista {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 5;
	max-height: 46vh;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--k-forest-deep);
	border: 2px solid var(--k-on-line);
	border-radius: 16px;
	box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, .7);
}
body.vitta-kids .vk-bbsel__lista[hidden] { display: none; }
body.vitta-kids .vk-bbsel__lista:focus-visible { outline: none; }
body.vitta-kids .vk-bbsel__op {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 12px;
	border-radius: 11px;
	cursor: pointer;
	color: var(--k-on-2);
	font-size: .875rem;
	line-height: 1.2;
}
body.vitta-kids .vk-bbsel__op.is-ativo,
body.vitta-kids .vk-bbsel__op:hover { background: rgba(247, 174, 16, .16); }
body.vitta-kids .vk-bbsel__op[aria-selected="true"] { color: var(--k-on); }
body.vitta-kids .vk-bbsel__op[aria-selected="true"] .vk-bbsel__opnome {
	font-weight: 700;
}
body.vitta-kids .vk-bbsel__oppreco {
	flex: none;
	font-weight: 700;
	color: var(--k-sun);
}
/* Sobre o azul o acento PREENCHE — 7,6:1 no fundo escuro. Mesma regra do CTA
   do hero. */
body.vitta-kids .vk-buybar__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--k-sun);
	color: var(--k-forest-deep);
	font-family: var(--k-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-kids .vk-buybar__cta:hover {
	background: var(--k-on);
	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) {
	body.vitta-kids .vk-buybar {
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 12px;
	}

	/* Tres pecas nao cabem numa linha a 390: o seletor sobe sozinho para a
	   primeira, e preco e botao dividem a segunda. */
	body.vitta-kids .vk-buybar__pill {
		flex-wrap: wrap;
		gap: 10px 14px;
		padding: 12px 12px 12px 16px;
		border-radius: 22px;
	}

	body.vitta-kids .vk-bbsel {
		order: -1;
		flex: 1 0 100%;
		max-width: none;
	}
	/* O rotulo sai: o proprio botao ja diz "Volume 1 — 2 a 4 anos", entao a
	   linha de cima seria repeticao ocupando altura de barra fixa. */
	body.vitta-kids .vk-bbsel__rot { display: none; }
	body.vitta-kids .vk-bbsel__lista { max-height: 40vh; }

	body.vitta-kids .vk-buybar__kicker {
		display: none;
	}

	body.vitta-kids .vk-buybar__price {
		gap: 0 10px;
	}

	body.vitta-kids .vk-buybar__meta {
		font-size: 0.6875rem;
	}

	/* No estreito preço e garantia caem em linhas próprias, e a bolinha do
	   separador ficaria pendurada no começo da linha. */
	body.vitta-kids .vk-buybar__garantia::before {
		content: none;
	}

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

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

	body.vitta-kids .vk-buybar.is-on {
		transition-delay: 0s;
	}

	body.vitta-kids .vk-buybar__cta:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   28. CTA de seção — v1.23.0

   Seis chamadas espalhadas pela página, pedido dele. Um componente só, mas
   ALINHADO pela seção que o hospeda (centralizado onde o cabeçalho é
   centralizado, à esquerda onde o texto é à esquerda) — é o que impede que os
   seis leiam como o mesmo widget colado seis vezes.

   Todos em DOURADO, e de propósito: nesta página o dourado é a cor de comprar
   (oferta, rodapé, barra fixa). Um CTA verde no meio do caminho pareceria outra
   coisa.
   ---------------------------------------------------------------------- */

body.vitta-kids .vk-cta {
	margin-top: clamp(34px, 4vw, 56px);
	display: flex;
}

body.vitta-kids .vk-cta--center { justify-content: center; }

/* No estreito o botão ocupa a linha: é onde a decisão acontece com o polegar. */
@media (max-width: 620px) {
	body.vitta-kids .vk-cta .vk-btn { width: 100%; }
}

/* A seção dos bônus e a do FAQ fecham com o CTA; sem isto ele encosta na
   próxima banda. */
body.vitta-kids .vk-preview__inner .vk-cta { margin-top: clamp(28px, 3.4vw, 44px); }

/* -------------------------------------------------------------------------
   26. Movimento reduzido (§27, §30)
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.vitta-kids .vk-leaves svg,
	body.vitta-kids .vk-hero__moedas svg { animation: none !important; }

	body.vitta-kids .vk-hero__stack,
	body.vitta-kids .vk-hero__fino,
	body.vitta-kids .vk-hero__nina,
	body.vitta-kids .vk-hero__vovo,
	body.vitta-kids .vk-hero__blob {
		opacity: 1;
		animation: none !important;
		transform: none;
	}
	body.vitta-kids .vk-hero__blob { transform: rotate(-4deg); }
	body.vitta-kids .vk-hero__cover { transform: rotate(3.5deg); }
	body.vitta-kids .vk-hero__page { transform: rotate(-10deg); }

	body.vitta-kids .vk-char[data-inview] { opacity: 1; translate: none; transition: none; }
	body.vitta-kids .vk-faq__a { transition: none; }
	body.vitta-kids .vk-btn:hover,
	body.vitta-kids .vk-round:hover,
	body.vitta-kids .vk-charcard:hover { transform: none; }
	body.vitta-kids .vk-charcard:hover .vk-charcard__img { transform: translateY(-74%); }
	body.vitta-kids .vk-pg:hover .vk-pg__frame { transform: none; }
}