/* Vale Geek: portal de notícias. Celular primeiro (390 px), depois tablet (760 px) e desktop (1024 px).
 * Modo escuro e claro: o padrão segue o sistema; o botão do topo grava a escolha em data-tema no <html>.
 * No modo claro tudo fica neutro (branco e cinza); só o rodapé e o texto sobre foto (.vg-escuro) continuam escuros. */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cores fixas da marca */

:root {
	--vg-navy: #0c0729;
	--vg-painel: #1c0f55;
	--vg-painel-card: #2a1a72;
	--vg-azul: #0401ff;
	--vg-indigo: #4802ff;
	--vg-violeta: #8905ff;
	--vg-rosa: #e0115f;
	--vg-verde: #0b7d60; /* Contraste 5,1:1 com texto branco (mínimo 4,5:1). */
	--vg-titulos: "Montserrat", "Segoe UI", Arial, sans-serif;
	--vg-texto-fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vg-largura: 1240px;
	--vg-margem: 16px;
	--vg-raio: 14px;
}

/* Modo escuro (padrão). O texto sobre foto (.vg-escuro) usa sempre estas cores. */

:root,
.vg-escuro {
	--vg-fundo: #0c0729;
	--vg-superficie: #1a1347;
	--vg-superficie-2: #140e3a;
	--vg-linha: #2a2160;
	--vg-texto: #eeebff;
	--vg-forte: #fff;
	--vg-suave: #a9a2d6;
	--vg-claro: #d3cef5;
	--vg-destaque: #c7b8ff;
	--vg-barra: rgba(12, 7, 41, 0.97);
	--vg-vitrine: var(--vg-painel);
	--vg-vitrine-borda: transparent;
	--vg-vitrine-card: var(--vg-painel-card);
	--vg-hover: rgba(255, 255, 255, 0.08);
	--vg-ativo: #fff;
	--vg-numero: var(--vg-violeta);
	--vg-bloco: transparent;
	--vg-bloco-borda: transparent;
	--vg-bloco-respiro: 0px;
	--vg-logo-branco: block;
	--vg-logo-navy: none;
	--vg-hub-capa: radial-gradient(120% 90% at 0% 0%, #3a12b8 0%, var(--vg-navy) 60%);
	--vg-tag-cyberpunk-fundo: var(--vg-cyberpunk);
	--vg-tag-cyberpunk-texto: var(--vg-navy);
	color-scheme: dark;
}

/* Modo claro: pelo sistema (sem escolha) ou pelo botão. Neutro; o roxo da marca fica nos detalhes. */

@media (prefers-color-scheme: light) {
	:root:not([data-tema="escuro"]) {
		--vg-fundo: #f3f4f8;
		--vg-superficie: #fff;
		--vg-superficie-2: #eceef4;
		--vg-linha: #e3e5ee;
		--vg-texto: #161230;
		--vg-forte: #0c0729;
		--vg-suave: #5f5a7d;
		--vg-claro: #3d3860;
		--vg-destaque: #4802ff;
		--vg-barra: rgba(255, 255, 255, 0.94);
		--vg-vitrine: #fff;
		--vg-vitrine-borda: #e3e5ee;
		--vg-vitrine-card: #f3f4f8;
		--vg-hover: rgba(12, 7, 41, 0.06);
		--vg-ativo: #0c0729;
		--vg-numero: var(--vg-indigo);
		--vg-bloco: #fff;
		--vg-bloco-borda: #e3e5ee;
		--vg-bloco-respiro: 24px;
		--vg-logo-branco: none;
		--vg-logo-navy: block;
		--vg-hub-capa: linear-gradient(180deg, #fff 0%, #f3f4f8 100%);
		--vg-tag-cyberpunk-fundo: var(--vg-navy);
		--vg-tag-cyberpunk-texto: var(--vg-cyberpunk);
		color-scheme: light;
	}
}

:root[data-tema="claro"] {
	--vg-fundo: #f3f4f8;
	--vg-superficie: #fff;
	--vg-superficie-2: #eceef4;
	--vg-linha: #e3e5ee;
	--vg-texto: #161230;
	--vg-forte: #0c0729;
	--vg-suave: #5f5a7d;
	--vg-claro: #3d3860;
	--vg-destaque: #4802ff;
	--vg-barra: rgba(255, 255, 255, 0.94);
	--vg-vitrine: #fff;
	--vg-vitrine-borda: #e3e5ee;
	--vg-vitrine-card: #f3f4f8;
	--vg-hover: rgba(12, 7, 41, 0.06);
	--vg-ativo: #0c0729;
	--vg-numero: var(--vg-indigo);
	--vg-bloco: #fff;
	--vg-bloco-borda: #e3e5ee;
	--vg-bloco-respiro: 24px;
	--vg-logo-branco: none;
	--vg-logo-navy: block;
	--vg-hub-capa: linear-gradient(180deg, #fff 0%, #f3f4f8 100%);
	--vg-tag-cyberpunk-fundo: var(--vg-navy);
	--vg-tag-cyberpunk-texto: var(--vg-cyberpunk);
	color-scheme: light;
}

/* Cores das franquias, tiradas do CSS oficial de cyberpunk.net e thewitcher.com (out/2026).
 * No modo claro a tag amarela inverte para navy, senão some no branco; o texto sobre foto (.vg-escuro) mantém o amarelo. */

:root {
	--vg-cyberpunk: #f2e900;
	--vg-cyberpunk-ciano: #00f0ff;
	--vg-witcher: #be1518;
}

/* Ritmo único de movimento do site */

:root {
	--vg-dur-rapida: 150ms;
	--vg-dur: 250ms;
	--vg-dur-entrada: 500ms;
	--vg-dur-lenta: 600ms;
	--vg-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
	--vg-curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--vg-fundo);
	color: var(--vg-texto);
	font: 400 15px/1.6 var(--vg-texto-fonte);
	-webkit-font-smoothing: antialiased;
}

.vg-escuro {
	color: var(--vg-texto);
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--vg-titulos);
	line-height: 1.25;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--vg-forte);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--vg-violeta);
	outline-offset: 2px;
}

.vg-invisivel {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vg-pular {
	position: absolute;
	left: -999px;
	z-index: 40;
	padding: 8px 12px;
	background: #fff;
	color: var(--vg-navy);
}

.vg-pular:focus {
	left: 16px;
	top: 16px;
}

/* Card inteiro clicável: o link do título cobre o card. */

.vg-destaque,
.vg-lateral,
.vg-card,
.vg-item {
	position: relative;
}

.vg-link-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vg-link-card:hover,
.vg-link-card:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Topo */

.vg-topo {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--vg-barra);
	border-bottom: 1px solid var(--vg-linha);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

.admin-bar .vg-topo {
	top: 32px;
}

.vg-topo__barra {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--vg-largura);
	margin: 0 auto;
	padding: 10px 12px 10px var(--vg-margem);
}

.vg-logo img {
	width: auto;
	height: 22px;
}

.vg-logo__branco {
	display: var(--vg-logo-branco);
}

.vg-logo__navy {
	display: var(--vg-logo-navy);
}

.vg-topo__botoes {
	display: flex;
	gap: 2px;
	margin-left: auto;
}

.vg-botao-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--vg-texto);
	cursor: pointer;
}

.vg-botao-icone:hover {
	background: var(--vg-hover);
}

.vg-botao-icone[hidden] {
	display: none;
}

.vg-tema svg {
	grid-area: 1 / 1;
	transition: transform 350ms var(--vg-curva-saida), opacity 200ms var(--vg-curva);
}

.vg-tema[data-atual="escuro"] .vg-tema__lua,
.vg-tema[data-atual="claro"] .vg-tema__sol {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}

.vg-menu,
.vg-busca {
	display: none;
}

.vg-menu.is-aberto,
.vg-busca.is-aberto {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 12px 16px 16px;
	background: var(--vg-fundo);
	border-bottom: 1px solid var(--vg-linha);
}

.vg-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-menu a {
	display: block;
	padding: 10px 0;
	font: 600 15px var(--vg-titulos);
	color: var(--vg-claro);
}

.vg-menu .current-menu-item > a,
.vg-menu a:hover {
	color: var(--vg-ativo);
}

.vg-atalhos ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 16px 12px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.vg-atalhos ul::-webkit-scrollbar {
	display: none;
}

.vg-atalhos a {
	display: block;
	padding: 7px 12px;
	border: 1px solid var(--vg-linha);
	border-radius: 999px;
	background: var(--vg-superficie);
	font: 600 12px var(--vg-titulos);
	white-space: nowrap;
}

.vg-atalhos .current-menu-item a {
	border-color: transparent;
	background: linear-gradient(90deg, var(--vg-azul), var(--vg-violeta));
	color: #fff;
}

/* Busca */

.vg-form-busca {
	display: flex;
	gap: 8px;
}

.vg-form-busca input {
	flex: 1;
	min-width: 0;
	padding: 10px 16px;
	border: 1px solid var(--vg-linha);
	border-radius: 999px;
	background: var(--vg-superficie);
	color: var(--vg-texto);
	font: inherit;
}

.vg-form-busca input::placeholder {
	color: var(--vg-suave);
}

.vg-form-busca button,
.vg-botao {
	display: inline-block;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--vg-indigo);
	color: #fff;
	font: 700 13px var(--vg-titulos);
	cursor: pointer;
}

.vg-chamada .vg-botao {
	background: #fff;
	color: var(--vg-navy);
}

/* Etiquetas, metadados e títulos de seção */

.vg-tag {
	display: inline-block;
	position: relative;
	z-index: 3;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--vg-indigo);
	color: #fff;
	font: 700 10px var(--vg-titulos);
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

a.vg-tag:hover {
	color: #fff;
}

.vg-tag--violeta {
	background: var(--vg-violeta);
}

.vg-tag--cyberpunk,
a.vg-tag--cyberpunk:hover {
	background: var(--vg-tag-cyberpunk-fundo);
	color: var(--vg-tag-cyberpunk-texto);
}

.vg-tag--witcher {
	background: var(--vg-witcher);
}

.vg-tag--verde {
	background: var(--vg-verde);
}

.vg-meta {
	margin: 0;
	font-size: 13px;
	color: var(--vg-suave);
}

.vg-tempo {
	font-size: 13px;
	color: var(--vg-suave);
}

.vg-secao {
	margin: 44px 0;
}

/* No modo claro, seções e coluna viram painéis brancos; no escuro os tokens zeram o painel */

.vg-secao,
.vg-coluna {
	padding: var(--vg-bloco-respiro);
	border: 1px solid var(--vg-bloco-borda);
	border-radius: var(--vg-raio);
	background: var(--vg-bloco);
}

.vg-secao__topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vg-linha);
}

.vg-secao__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
}

.vg-secao__titulo::before {
	content: "";
	flex: none;
	width: 4px;
	height: 20px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--vg-azul), var(--vg-violeta));
}

.vg-secao__link {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--vg-destaque);
}

/* Vitrine da home: painel roxo no escuro, branco no claro */

.vg-home,
.vg-arquivo,
.vg-materia-pagina {
	max-width: var(--vg-largura);
	margin: 0 auto;
	padding: 12px var(--vg-margem) 16px;
}

.vg-vitrine {
	padding: 12px;
	border: 1px solid var(--vg-vitrine-borda);
	border-radius: 20px;
	background: var(--vg-vitrine);
}

.vg-vitrine__topo,
.vg-vitrine__laterais {
	display: grid;
	gap: 12px;
}

.vg-destaque {
	display: grid;
	overflow: hidden;
	border-radius: 16px;
	background: var(--vg-superficie);
}

.vg-destaque > * {
	grid-area: 1 / 1;
}

.vg-destaque__imagem {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

.vg-destaque__texto {
	position: relative;
	z-index: 1; /* acima da imagem, que ganha camada própria ao ampliar */
	align-self: end;
	padding: 60px 16px 16px;
	background: linear-gradient(180deg, transparent 0%, rgba(12, 7, 41, 0.85) 45%, rgba(12, 7, 41, 0.96) 100%);
}

.vg-destaque__titulo {
	margin: 8px 0 6px;
	font-size: 22px;
	line-height: 1.2;
}

.vg-lateral {
	display: grid;
	grid-template-columns: 120px 1fr;
	overflow: hidden;
	border-radius: var(--vg-raio);
	background: var(--vg-vitrine-card);
}

.vg-lateral__imagem {
	width: 100%;
	height: 100%;
	min-height: 96px;
	object-fit: cover;
}

.vg-lateral__texto {
	padding: 10px 12px;
}

.vg-lateral__titulo {
	display: -webkit-box;
	margin-top: 6px;
	overflow: hidden;
	font: 600 14px/1.3 var(--vg-texto-fonte);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vg-vitrine__fileira {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: 12px;
	margin-top: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vg-vitrine__fileira::-webkit-scrollbar {
	display: none;
}

.vg-vitrine__fileira > * {
	scroll-snap-align: start;
}

.vg-vitrine .vg-card {
	background: var(--vg-vitrine-card);
}

/* Card com imagem em cima */

.vg-card {
	overflow: hidden;
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
}

.vg-card__imagem {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vg-card__texto {
	padding: 12px 14px 16px;
}

.vg-card__titulo {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	font: 600 15px/1.35 var(--vg-texto-fonte);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vg-grade {
	display: grid;
	gap: 20px;
}

/* Item do feed: mais respiro entre itens e entre colunas */

.vg-item {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--vg-linha);
}

.vg-item__imagem {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	object-fit: cover;
	background: var(--vg-superficie);
}

.vg-item__imagem--vazia {
	display: block;
	background: var(--vg-navy) url("../img/logo-branco.png") center / 60% auto no-repeat;
}

.vg-item__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.vg-item__titulo {
	display: -webkit-box;
	overflow: hidden;
	font: 600 16px/1.4 var(--vg-texto-fonte);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vg-meta--leitura {
	margin-top: 8px;
}

/* Coluna lateral */

.vg-coluna {
	margin: 44px 0;
}

.vg-ranking {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vg-ranking;
}

.vg-ranking li {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--vg-linha);
	counter-increment: vg-ranking;
	font: 600 15px/1.4 var(--vg-texto-fonte);
}

.vg-ranking li::before {
	content: counter(vg-ranking, decimal-leading-zero);
	font: 800 22px/1 var(--vg-titulos);
	color: var(--vg-numero);
}

/* Blocos de editoria */

.vg-editoria__grade {
	display: grid;
	gap: 8px;
}

.vg-editoria__lista .vg-item:first-child {
	padding-top: 0;
}

.vg-editoria__lista .vg-item:last-child {
	border-bottom: 0;
}

/* Chamada do WhatsApp */

.vg-chamada {
	margin: 44px 0;
	padding: 24px;
	border-radius: 16px;
	background: linear-gradient(120deg, var(--vg-azul), var(--vg-violeta));
	color: #fff;
}

.vg-chamada h2 {
	margin-bottom: 6px;
	font-size: 19px;
}

.vg-chamada p {
	margin: 0 0 14px;
	font-size: 14px;
}

/* Vídeo do canal */

.vg-video {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: var(--vg-superficie);
}

.vg-video__imagem {
	position: relative;
	display: block;
}

.vg-video__imagem img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vg-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 40px;
	border-radius: 12px;
	background: #ff0033;
	color: #fff;
	transform: translate(-50%, -50%);
}

.vg-video__texto {
	display: block;
	padding: 14px 18px;
}

.vg-video__titulo {
	display: block;
	margin: 8px 0 4px;
	font: 600 17px/1.35 var(--vg-texto-fonte);
}

/* Matéria */

.vg-materia-pagina .rank-math-breadcrumb {
	margin: 8px 0 14px;
	font-size: 12px;
	color: var(--vg-suave);
}

.vg-materia-pagina .rank-math-breadcrumb p {
	margin: 0;
}

.vg-materia {
	max-width: 760px;
	min-width: 0;
}

.vg-materia__titulo {
	margin: 12px 0;
	font-size: 26px;
	line-height: 1.22;
	color: var(--vg-forte);
}

.vg-materia__linha-fina {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--vg-claro);
}

.vg-assinatura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 10px 0 18px;
	border-bottom: 1px solid var(--vg-linha);
}

.vg-assinatura__dados {
	min-width: 0;
}

.vg-assinatura__nome {
	font-size: 14px;
	font-weight: 700;
}

.vg-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vg-indigo), var(--vg-violeta));
	color: #fff;
	font: 700 13px var(--vg-titulos);
}

.vg-avatar--grande {
	width: 52px;
	height: 52px;
	font-size: 17px;
}

.vg-compartilhar {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.vg-compartilhar__botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--vg-linha);
	border-radius: 999px;
	background: var(--vg-superficie);
	color: var(--vg-texto);
	font: 600 13px var(--vg-texto-fonte);
	cursor: pointer;
}

.vg-compartilhar__botao:hover {
	border-color: var(--vg-violeta);
}

.vg-materia__imagem {
	margin: 0 0 20px;
}

.vg-materia__imagem img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 25%;
	border-radius: var(--vg-raio);
}

.vg-materia__imagem figcaption {
	padding-top: 8px;
	font-size: 12px;
	font-style: italic;
	color: var(--vg-suave);
}

.vg-resumo {
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid var(--vg-indigo);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie-2);
}

.vg-resumo__titulo {
	margin-bottom: 8px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vg-destaque);
}

.vg-resumo ul {
	margin: 0;
	padding-left: 18px;
	font-size: 15px;
}

.vg-resumo li + li {
	margin-top: 8px;
}

.vg-conteudo {
	font-size: 17px;
	line-height: 1.8;
	overflow-wrap: break-word;
}

.vg-conteudo p {
	margin: 0 0 18px;
}

.vg-conteudo h2 {
	margin: 32px 0 12px;
	font-size: 22px;
	line-height: 1.3;
	color: var(--vg-forte);
}

.vg-conteudo h3 {
	margin: 24px 0 10px;
	font-size: 19px;
	color: var(--vg-forte);
}

.vg-conteudo a {
	color: var(--vg-destaque);
	text-decoration: underline;
}

.vg-conteudo img,
.vg-conteudo iframe,
.vg-conteudo video {
	max-width: 100%;
	border-radius: 10px;
}

.vg-conteudo .wp-caption,
.vg-conteudo figure {
	max-width: 100%;
	margin: 20px 0;
}

.vg-conteudo .wp-caption-text,
.vg-conteudo figcaption {
	font-size: 12px;
	color: var(--vg-suave);
}

.vg-conteudo blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border-left: 3px solid var(--vg-violeta);
	background: var(--vg-superficie-2);
}

.vg-leia {
	margin: 4px 0 22px;
	padding: 14px 16px;
	border-left: 3px solid var(--vg-violeta);
	border-radius: 0 12px 12px 0;
	background: var(--vg-superficie);
	font-size: 15px;
	line-height: 1.5;
}

.vg-leia__rotulo {
	display: block;
	margin-bottom: 4px;
	font: 700 11px var(--vg-titulos);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vg-destaque);
}

.vg-conteudo .vg-leia a {
	color: var(--vg-texto);
	font-weight: 600;
	text-decoration: none;
}

.vg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0;
}

.vg-tags a {
	padding: 5px 12px;
	border: 1px solid var(--vg-linha);
	border-radius: 999px;
	font-size: 12px;
	color: var(--vg-claro);
}

.vg-autor {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 14px;
	margin: 28px 0;
	padding: 18px;
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
	font-size: 14px;
	color: var(--vg-claro);
}

.vg-autor p {
	margin: 4px 0 0;
}

.vg-autor--pagina {
	margin-top: 8px;
}

.vg-autor--pagina .vg-arquivo__titulo {
	font-size: 22px;
	color: var(--vg-forte);
}

.vg-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.vg-redes a {
	color: var(--vg-destaque);
	font-weight: 600;
}

/* Hub: capa roxa no escuro, clara no claro; Cyberpunk e The Witcher ganham a cor da franquia */

.vg-hub__topo {
	padding: 26px 0 22px;
	border-bottom: 1px solid var(--vg-linha);
	background: var(--vg-hub-capa);
}

.vg-hub__dentro {
	max-width: var(--vg-largura);
	margin: 0 auto;
	padding: 0 var(--vg-margem);
}

.vg-hub__titulo {
	margin: 10px 0 8px;
	font-size: 28px;
	line-height: 1.15;
}

.vg-hub__intro {
	max-width: 760px;
	font-size: 15px;
	color: var(--vg-claro);
}

.vg-hub__intro p {
	margin: 0 0 10px;
}

.vg-guias {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.vg-guia a {
	display: block;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
}

.vg-guia a:hover,
.vg-guia a:focus-visible {
	border-color: var(--vg-violeta);
}

.vg-guia__numero {
	display: block;
	font: 800 22px var(--vg-titulos);
	color: var(--vg-violeta);
}

.vg-guia__titulo {
	display: block;
	margin-top: 6px;
	font: 600 14px/1.35 var(--vg-texto-fonte);
}

.vg-linha {
	margin: 8px 0 0 6px;
	padding: 0;
	list-style: none;
}

.vg-linha li {
	position: relative;
	padding: 0 0 16px 22px;
	border-left: 2px solid var(--vg-indigo);
	font-size: 14px;
}

.vg-linha li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: -7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vg-violeta);
}

.vg-linha strong {
	display: block;
	font: 700 12px var(--vg-titulos);
	text-transform: uppercase;
	color: var(--vg-destaque);
}

.vg-faq details {
	border-bottom: 1px solid var(--vg-linha);
}

.vg-faq summary {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
}

.vg-faq summary::-webkit-details-marker {
	display: none;
}

.vg-faq summary::after {
	content: "+";
	flex: none;
}

.vg-faq details[open] summary::after {
	content: "−";
}

.vg-faq p {
	margin: 0 0 14px;
	color: var(--vg-claro);
	font-size: 15px;
}

/* Arquivos, busca e paginação */

.vg-arquivo__topo {
	margin: 12px 0;
}

.vg-arquivo__titulo {
	font-size: 26px;
	color: var(--vg-forte);
}

.vg-arquivo__descricao {
	max-width: 760px;
	color: var(--vg-claro);
	line-height: 1.65;
}

.vg-arquivo__descricao p {
	margin: 0 0 10px;
}

.vg-arquivo__descricao.is-recolhida {
	max-height: 5em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 45%, transparent);
	mask-image: linear-gradient(#000 45%, transparent);
}

.vg-arquivo__mais {
	margin-top: 4px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--vg-destaque);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.vg-arquivo__mais[hidden] {
	display: none;
}

.vg-arquivo__mais:hover {
	text-decoration: underline;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0;
}

.nav-links .page-numbers {
	padding: 6px 12px;
	border: 1px solid var(--vg-linha);
	border-radius: 8px;
}

.nav-links .current {
	background: var(--vg-indigo);
	border-color: var(--vg-indigo);
	color: #fff;
}

/* Rodapé (sempre escuro) */

.vg-rodape {
	margin-top: 40px;
	border-top: 1px solid var(--vg-linha);
	background: #08051d;
	color: var(--vg-suave);
	font-size: 13px;
}

.vg-rodape__dentro {
	max-width: var(--vg-largura);
	margin: 0 auto;
	padding: 28px var(--vg-margem) 36px;
}

.vg-rodape img {
	width: auto;
	height: 18px;
	margin-bottom: 14px;
}

.vg-rodape__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

/* Tablet */

@media (min-width: 760px) {
	.vg-home,
	.vg-arquivo,
	.vg-materia-pagina {
		padding: 20px 24px 28px;
	}

	.vg-vitrine {
		padding: 20px;
	}

	.vg-vitrine__fileira {
		grid-auto-columns: 40%;
	}

	.vg-lista--duas {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
	}

	.vg-item {
		grid-template-columns: 168px 1fr;
		gap: 18px;
	}

	.vg-grade {
		grid-template-columns: repeat(2, 1fr);
	}

	.vg-editoria__grade {
		grid-template-columns: 1.1fr 1fr;
		gap: 32px;
	}

	.vg-materia__titulo {
		font-size: 34px;
	}

	.vg-guias {
		grid-template-columns: repeat(4, 1fr);
	}

	.vg-hub__titulo {
		font-size: 36px;
	}

	.vg-video {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		align-items: center;
	}
}

/* Desktop */

@media (min-width: 1024px) {
	.vg-topo__barra {
		gap: 28px;
		padding: 14px var(--vg-margem);
	}

	.vg-logo img {
		height: 26px;
	}

	.vg-so-celular,
	.vg-atalhos {
		display: none;
	}

	.vg-menu {
		display: block;
	}

	.vg-menu ul {
		display: flex;
		gap: 22px;
	}

	.vg-menu a {
		padding: 0;
		font-size: 13px;
		white-space: nowrap;
	}

	.vg-busca {
		display: block;
		width: 260px;
		margin-left: auto;
	}

	.vg-busca button {
		display: none;
	}

	.vg-topo__botoes {
		margin-left: -12px;
	}

	.vg-vitrine__topo {
		grid-template-columns: 1.25fr 1fr;
		gap: 20px;
	}

	.vg-destaque__imagem {
		min-height: 440px;
	}

	.vg-destaque__texto {
		padding: 80px 24px 24px;
	}

	.vg-destaque__titulo {
		font-size: 32px;
	}

	.vg-lateral {
		grid-template-columns: 190px 1fr;
	}

	.vg-lateral__titulo {
		font-size: 16px;
	}

	.vg-vitrine__fileira {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		margin-top: 20px;
		overflow: visible;
	}

	.vg-com-coluna {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 360px);
		gap: 48px;
		align-items: start;
	}

	.vg-coluna__fixa {
		position: sticky;
		top: 100px;
	}

	.vg-grade {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}

	.vg-materia-pagina .vg-coluna {
		margin-top: 0;
	}

	/* Matéria no desktop: ocupa mais da tela, com a letra um pouco maior para a linha não ficar longa demais */
	.vg-materia {
		max-width: 980px;
	}

	.vg-materia__titulo {
		font-size: 40px;
	}

	.vg-materia .vg-conteudo {
		font-size: 18.5px;
	}

	.vg-materia .vg-conteudo h2 {
		font-size: 26px;
	}

	.vg-materia .vg-conteudo h3 {
		font-size: 21px;
	}
}

/* Capa do hub com a cor da franquia */

.vg-hub--cyberpunk {
	border-bottom: 3px solid var(--vg-cyberpunk);
	background: radial-gradient(70% 120% at 100% 0%, rgba(242, 233, 0, 0.16) 0%, transparent 60%), var(--vg-hub-capa);
}

.vg-hub--witcher {
	border-bottom: 3px solid var(--vg-witcher);
	background: radial-gradient(70% 120% at 100% 0%, rgba(190, 21, 24, 0.2) 0%, transparent 60%), var(--vg-hub-capa);
}

/* Banner da marca no topo da home (a arte oficial do Vale) */

.vg-banner {
	position: relative;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 20px;
	background: #3b0fa8;
	isolation: isolate;
}

.vg-banner__link {
	display: block;
}

.vg-banner__imagem {
	width: 100%;
	height: clamp(150px, 26vw, 316px);
	object-fit: cover;
	animation: vg-respira 4.5s var(--vg-curva) both;
}

/* Ao abrir a página, a imagem assenta e uma faixa de luz passa 3 vezes (menos de 5 s, regra WCAG 2.2.2) */
.vg-banner__brilho {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%);
	transform: translateX(-100%);
	animation: vg-varredura 1.6s var(--vg-curva) 0.8s 3 both;
	pointer-events: none;
}

@keyframes vg-respira {
	from {
		transform: scale(1.04);
	}

	to {
		transform: scale(1);
	}
}

@keyframes vg-varredura {
	0% {
		transform: translateX(-100%);
	}

	60%,
	100% {
		transform: translateX(100%);
	}
}

/* Imagem dos cards amplia ao passar o mouse (ou ao focar com o teclado) */

.vg-item__moldura {
	display: block;
	align-self: start;
	overflow: hidden;
	border-radius: 10px;
}

.vg-destaque__imagem,
.vg-lateral__imagem,
.vg-card__imagem,
.vg-item__imagem {
	transition: transform var(--vg-dur-lenta) var(--vg-curva);
}

.vg-destaque:hover .vg-destaque__imagem,
.vg-destaque:focus-within .vg-destaque__imagem,
.vg-lateral:hover .vg-lateral__imagem,
.vg-lateral:focus-within .vg-lateral__imagem,
.vg-card:hover .vg-card__imagem,
.vg-card:focus-within .vg-card__imagem,
.vg-item:hover .vg-item__imagem,
.vg-item:focus-within .vg-item__imagem {
	transform: scale(1.07);
}

/* Cards sobem um pouco no hover */

.vg-lateral,
.vg-card {
	transition: transform var(--vg-dur) var(--vg-curva), box-shadow var(--vg-dur) var(--vg-curva);
}

.vg-lateral:hover,
.vg-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(12, 7, 41, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.vg-banner__imagem,
	.vg-banner__brilho {
		animation: none;
	}

	.vg-banner__brilho {
		display: none;
	}

	.vg-destaque__imagem,
	.vg-lateral__imagem,
	.vg-card__imagem,
	.vg-item__imagem,
	.vg-lateral,
	.vg-card {
		transition: none;
	}

	.vg-destaque:hover .vg-destaque__imagem,
	.vg-destaque:focus-within .vg-destaque__imagem,
	.vg-lateral:hover .vg-lateral__imagem,
	.vg-lateral:focus-within .vg-lateral__imagem,
	.vg-card:hover .vg-card__imagem,
	.vg-card:focus-within .vg-card__imagem,
	.vg-item:hover .vg-item__imagem,
	.vg-item:focus-within .vg-item__imagem,
	.vg-lateral:hover,
	.vg-card:hover {
		transform: none;
	}
}

/* No celular o :hover "gruda" depois do toque: zoom e elevação só onde existe mouse */

@media (hover: none) {
	.vg-destaque:hover .vg-destaque__imagem,
	.vg-lateral:hover .vg-lateral__imagem,
	.vg-card:hover .vg-card__imagem,
	.vg-item:hover .vg-item__imagem,
	.vg-lateral:hover,
	.vg-card:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Cards entram ao rolar. O atributo só é posto pelo JS e só em quem está fora da tela. */

[data-vg-revela=""] {
	opacity: 0;
}

[data-vg-revela=""]:focus-within {
	opacity: 1;
}

[data-vg-revela="visivel"] {
	animation: vg-sobe var(--vg-dur-entrada) var(--vg-curva-saida) backwards;
	animation-delay: calc(var(--vg-i, 0) * 50ms);
}

@keyframes vg-sobe {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

/* Sublinhado do menu (desktop): cresce da esquerda, recolhe para a direita */

@media (min-width: 1024px) {
	.vg-menu a {
		position: relative;
	}

	.vg-menu a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--vg-azul), var(--vg-violeta));
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform var(--vg-dur) var(--vg-curva-saida);
	}

	.vg-menu a:hover::after,
	.vg-menu a:focus-visible::after,
	.vg-menu .current-menu-item > a::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

/* Barra de progresso de leitura na matéria. Só CSS; onde o navegador não suporta, não aparece. */

.vg-progresso {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.vg-progresso {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
		height: 3px;
		background: linear-gradient(90deg, var(--vg-azul), var(--vg-violeta));
		transform-origin: 0 50%;
		pointer-events: none;
		animation: vg-progresso linear both;
		animation-timeline: scroll(root block);
	}

	.admin-bar .vg-progresso {
		top: 32px;
	}
}

@keyframes vg-progresso {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Troca de tema com esmaecimento (View Transitions, ligada no menu.js) */

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 300ms;
}

/* Gaveta do menu e da busca no celular */

@media (max-width: 1023.98px) {
	.vg-menu.is-aberto,
	.vg-busca.is-aberto {
		animation: vg-desce 220ms var(--vg-curva-saida);
	}

	.vg-menu.is-aberto li {
		animation: vg-sobe 300ms var(--vg-curva-saida) backwards;
	}

	.vg-menu.is-aberto li:nth-child(2) {
		animation-delay: 35ms;
	}

	.vg-menu.is-aberto li:nth-child(3) {
		animation-delay: 70ms;
	}

	.vg-menu.is-aberto li:nth-child(4) {
		animation-delay: 105ms;
	}

	.vg-menu.is-aberto li:nth-child(5) {
		animation-delay: 140ms;
	}

	.vg-menu.is-aberto li:nth-child(n + 6) {
		animation-delay: 175ms;
	}
}

@keyframes vg-desce {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

/* Botões afundam um pouco ao toque */

.vg-botao,
.vg-form-busca button,
.vg-botao-icone,
.vg-compartilhar__botao {
	transition: transform var(--vg-dur-rapida) var(--vg-curva-saida), filter var(--vg-dur-rapida) var(--vg-curva);
	touch-action: manipulation;
}

.vg-botao:active,
.vg-form-busca button:active,
.vg-botao-icone:active,
.vg-compartilhar__botao:active {
	transform: scale(0.96);
}

@media (hover: hover) {
	.vg-botao:hover,
	.vg-form-busca button:hover {
		filter: brightness(1.12);
	}
}

/* Vídeo do canal: miniatura amplia e o play cresce */

.vg-video__imagem {
	overflow: hidden;
}

.vg-video__imagem img,
.vg-video__play {
	transition: transform var(--vg-dur-lenta) var(--vg-curva);
}

@media (hover: hover) {
	.vg-video:hover .vg-video__imagem img {
		transform: scale(1.05);
	}

	.vg-video:hover .vg-video__play {
		transform: translate(-50%, -50%) scale(1.12);
	}
}

.vg-video:focus-visible .vg-video__play {
	transform: translate(-50%, -50%) scale(1.12);
}

/* Guias do hub e atalhos sobem 2 px */

.vg-guia a,
.vg-atalhos a {
	transition: transform var(--vg-dur) var(--vg-curva-saida);
}

.vg-guia__numero {
	transform-origin: left center;
	transition: transform var(--vg-dur) var(--vg-curva-saida);
}

@media (hover: hover) {
	.vg-guia a:hover,
	.vg-atalhos a:hover {
		transform: translateY(-2px);
	}

	.vg-guia a:hover .vg-guia__numero {
		transform: scale(1.12);
	}
}

.vg-guia a:focus-visible {
	transform: translateY(-2px);
}

/* Hub de Cyberpunk: uma "falha" curta no título ao abrir, como no site da CD PROJEKT RED. Roda uma vez. */

.vg-hub--cyberpunk .vg-hub__titulo {
	animation: vg-falha 360ms steps(2, end) 300ms 1 backwards;
}

@keyframes vg-falha {
	0% {
		transform: translate(0);
		filter: none;
	}

	33% {
		transform: translate(-2px, 1px);
		filter: drop-shadow(2px 0 var(--vg-cyberpunk-ciano)) drop-shadow(-2px 0 var(--vg-cyberpunk));
	}

	66% {
		transform: translate(2px, -1px);
		filter: drop-shadow(-2px 0 var(--vg-cyberpunk-ciano)) drop-shadow(2px 0 var(--vg-cyberpunk));
	}

	100% {
		transform: none;
		filter: none;
	}
}

/* Movimento reduzido: tudo que muda de lugar ou de tamanho para; cores e sublinhado continuam, sem animação */

@media (prefers-reduced-motion: reduce) {
	.vg-menu a::after,
	.vg-tema svg,
	.vg-botao,
	.vg-form-busca button,
	.vg-botao-icone,
	.vg-compartilhar__botao,
	.vg-video__imagem img,
	.vg-video__play,
	.vg-guia a,
	.vg-guia__numero,
	.vg-atalhos a {
		transition: none;
	}

	.vg-menu.is-aberto,
	.vg-busca.is-aberto,
	.vg-menu.is-aberto li,
	.vg-hub--cyberpunk .vg-hub__titulo,
	[data-vg-revela="visivel"] {
		animation: none;
	}

	[data-vg-revela] {
		opacity: 1;
	}

	.vg-guia a:hover,
	.vg-guia a:focus-visible,
	.vg-atalhos a:hover,
	.vg-guia a:hover .vg-guia__numero,
	.vg-botao:active,
	.vg-form-busca button:active,
	.vg-botao-icone:active,
	.vg-compartilhar__botao:active,
	.vg-video:hover .vg-video__imagem img {
		transform: none;
	}

	.vg-video:hover .vg-video__play,
	.vg-video:focus-visible .vg-video__play {
		transform: translate(-50%, -50%);
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* Largura: no desktop o conteúdo acompanha a tela (88% da largura), entre 1240 px e 1680 px,
 * para não ficar uma coluna estreita no meio de monitores widescreen */

@media (min-width: 1024px) {
	:root {
		--vg-largura: clamp(1240px, 88vw, 1680px);
		--vg-margem: clamp(16px, 2vw, 32px);
	}
}

/* Carrossel de "Últimas notícias": a lista corre para o lado, com a imagem inclinada do blog antigo */

.vg-trilho {
	position: relative;
	timeline-scope: --vg-trilho;
}

.vg-trilho__lista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 16px;
	padding: 4px 2px 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	scroll-timeline: --vg-trilho inline;
	-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
	mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.vg-trilho__lista::-webkit-scrollbar {
	display: none;
}

/* No fim da lista some o esmaecimento da direita */
.vg-trilho[data-fim] .vg-trilho__lista {
	-webkit-mask-image: none;
	mask-image: none;
}

.vg-slide {
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
}

.vg-slide__moldura {
	display: block;
	overflow: hidden;
	clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
	transition: clip-path var(--vg-dur) var(--vg-curva-saida);
}

.vg-slide__imagem {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--vg-dur-lenta) var(--vg-curva);
}

.vg-slide__texto {
	padding: 14px 6px 0;
}

.vg-slide__titulo {
	display: -webkit-box;
	margin: 0 0 8px;
	overflow: hidden;
	font: 600 17px/1.35 var(--vg-texto-fonte);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vg-trilho__controles {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.vg-trilho__progresso {
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--vg-linha);
	visibility: hidden;
}

.vg-trilho__progresso span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--vg-azul), var(--vg-violeta));
	transform-origin: 0 50%;
}

/* A barra acompanha a rolagem da lista (onde o navegador suporta; senão fica escondida) */
@supports (animation-timeline: scroll()) {
	.vg-trilho__progresso {
		visibility: visible;
	}

	.vg-trilho__progresso span {
		animation: vg-progresso linear both;
		animation-timeline: --vg-trilho;
	}
}

.vg-trilho__seta {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--vg-linha);
	border-radius: 50%;
	background: var(--vg-superficie);
	color: var(--vg-texto);
	cursor: pointer;
	transition: transform var(--vg-dur-rapida) var(--vg-curva-saida), background-color var(--vg-dur) var(--vg-curva), opacity var(--vg-dur) var(--vg-curva);
}

.vg-trilho__seta:not(:disabled):hover {
	border-color: transparent;
	background: var(--vg-indigo);
	color: #fff;
}

.vg-trilho__seta:not(:disabled):active {
	transform: scale(0.92);
}

.vg-trilho__seta:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) {
	.vg-slide:hover .vg-slide__moldura,
	.vg-slide:focus-within .vg-slide__moldura {
		clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
	}

	.vg-slide:hover .vg-slide__imagem,
	.vg-slide:focus-within .vg-slide__imagem {
		transform: scale(1.07);
	}
}

@media (min-width: 760px) {
	.vg-trilho__lista {
		grid-auto-columns: calc((100% - 16px) / 2.15);
	}
}

@media (min-width: 1024px) {
	.vg-trilho__lista {
		grid-auto-columns: calc((100% - 40px) / 3);
		gap: 20px;
	}
}

@media (min-width: 1500px) {
	.vg-trilho__lista {
		grid-auto-columns: calc((100% - 40px) / 3.2);
	}
}

/* Coluna "Últimos vídeos": o primeiro grande, os outros em linha */

.vg-videos {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-video-mini a {
	display: grid;
	grid-template-columns: 128px 1fr;
	align-items: start;
	gap: 12px;
}

.vg-video-mini--grande a {
	grid-template-columns: 1fr;
	gap: 10px;
}

.vg-video-mini__imagem {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 16 / 9;
	background: var(--vg-superficie-2);
}

.vg-video-mini__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vg-dur-lenta) var(--vg-curva);
}

.vg-video-mini__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 34px;
	height: 24px;
	border-radius: 8px;
	background: #cc0000;
	color: #fff;
	transform: translate(-50%, -50%);
	transition: transform var(--vg-dur) var(--vg-curva-saida);
}

.vg-video-mini--grande .vg-video-mini__play {
	width: 52px;
	height: 36px;
	border-radius: 11px;
}

.vg-video-mini__texto {
	display: grid;
	gap: 4px;
}

.vg-video-mini__titulo {
	display: -webkit-box;
	overflow: hidden;
	font: 600 14px/1.35 var(--vg-texto-fonte);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vg-video-mini--grande .vg-video-mini__titulo {
	font-size: 16px;
	-webkit-line-clamp: 2;
}

.vg-video-mini a:hover .vg-video-mini__titulo,
.vg-video-mini a:focus-visible .vg-video-mini__titulo {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	.vg-video-mini a:hover .vg-video-mini__imagem img {
		transform: scale(1.06);
	}

	.vg-video-mini a:hover .vg-video-mini__play {
		transform: translate(-50%, -50%) scale(1.12);
	}
}

.vg-botao--canal {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 18px;
	padding: 12px 16px;
	background: #cc0000;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.vg-trilho__lista {
		scroll-behavior: auto;
	}

	.vg-slide__moldura,
	.vg-slide__imagem,
	.vg-trilho__seta,
	.vg-video-mini__imagem img,
	.vg-video-mini__play {
		transition: none;
	}

	.vg-slide:hover .vg-slide__imagem,
	.vg-slide:focus-within .vg-slide__imagem,
	.vg-video-mini a:hover .vg-video-mini__imagem img {
		transform: none;
	}

	.vg-video-mini a:hover .vg-video-mini__play {
		transform: translate(-50%, -50%);
	}
}

/* Subtítulo nos cards ao lado do destaque (Resumo da matéria ou primeiras linhas) */

.vg-lateral__subtitulo {
	display: -webkit-box;
	margin: 6px 0 0;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	color: var(--vg-suave);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.vg-com-coluna__principal {
	min-width: 0;
}

/* Redes sociais: blocos inclinados como no site antigo; no hover ganham o degradê da marca */

.vg-siga {
	margin: 8px 0 44px;
	text-align: center;
}

.vg-siga__titulo {
	margin-bottom: 18px;
	font-size: 20px;
}

.vg-siga__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0 8px;
	list-style: none;
}

/* Com número ímpar de redes, a última ocupa a linha inteira no celular. */
.vg-siga__lista li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.vg-rede {
	position: relative;
	display: block;
	isolation: isolate;
	transform: skewX(-12deg);
	transition: transform var(--vg-dur) var(--vg-curva-saida);
}

.vg-rede::before,
.vg-rede::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 6px;
}

.vg-rede::before {
	border: 1px solid var(--vg-linha);
	background: var(--vg-superficie);
}

/* O degradê fica numa camada própria e aparece por opacidade (mais leve que animar o fundo) */
.vg-rede::after {
	background: linear-gradient(120deg, var(--vg-azul), var(--vg-violeta));
	opacity: 0;
	transition: opacity var(--vg-dur) var(--vg-curva);
}

.vg-rede__dentro {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 22px 12px;
	transform: skewX(12deg);
}

.vg-rede svg {
	transition: transform var(--vg-dur) var(--vg-curva-saida);
}

.vg-rede__nome {
	font: 700 15px var(--vg-titulos);
}

.vg-rede:hover,
.vg-rede:focus-visible {
	color: #fff;
}

.vg-rede:hover::after,
.vg-rede:focus-visible::after {
	opacity: 1;
}

@media (hover: hover) {
	.vg-rede:hover {
		transform: skewX(-12deg) translateY(-4px);
	}

	.vg-rede:hover svg {
		transform: scale(1.15);
	}
}

@media (min-width: 760px) {
	.vg-siga__lista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 16px;
	}

	.vg-siga__lista li:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vg-rede,
	.vg-rede::after,
	.vg-rede svg {
		transition: none;
	}

	.vg-rede:hover {
		transform: skewX(-12deg);
	}

	.vg-rede:hover svg {
		transform: none;
	}
}

/* Destaque: a imagem amplia e o título sobe um pouco, com o degradê mais forte para continuar legível */

.vg-destaque__texto > * {
	transition: transform var(--vg-dur-lenta) var(--vg-curva);
}

.vg-destaque__texto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 0%, rgba(12, 7, 41, 0.6) 60%, rgba(12, 7, 41, 0.9) 100%);
	opacity: 0;
	transition: opacity var(--vg-dur-lenta) var(--vg-curva);
}

@media (hover: hover) {
	.vg-destaque:hover .vg-destaque__texto::before,
	.vg-destaque:focus-within .vg-destaque__texto::before {
		opacity: 1;
	}

	.vg-destaque:hover .vg-destaque__texto > *,
	.vg-destaque:focus-within .vg-destaque__texto > * {
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vg-destaque__texto > *,
	.vg-destaque__texto::before {
		transition: none;
	}

	.vg-destaque:hover .vg-destaque__texto > *,
	.vg-destaque:focus-within .vg-destaque__texto > * {
		transform: none;
	}
}

/* Fale Conosco: formulário do Contact Form 7 num card, com atalhos ao lado */

.vg-contato__grade {
	display: grid;
	gap: 20px;
	padding-top: 28px;
	padding-bottom: 48px;
}

.vg-contato__formulario,
.vg-contato__bloco {
	padding: 22px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
}

.vg-contato__formulario .vg-conteudo {
	margin: 0;
	max-width: none;
}

.vg-contato__formulario .vg-conteudo > p:first-child {
	margin-top: 0;
	font-size: 16px;
	color: var(--vg-claro);
}

.vg-contato__lado {
	display: grid;
	align-content: start;
	gap: 20px;
}

.vg-contato__subtitulo {
	margin-bottom: 14px;
	font-size: 18px;
}

.vg-motivos,
.vg-canais {
	display: grid;
	gap: 14px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.vg-motivo {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 12px;
	align-items: start;
}

.vg-motivo__icone {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--vg-superficie-2);
	color: var(--vg-destaque);
}

.vg-motivo__titulo {
	display: block;
	font: 700 14px/1.3 var(--vg-titulos);
	color: var(--vg-forte);
}

.vg-motivo__texto {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--vg-suave);
}

.vg-canais {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 0;
}

.vg-canal {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--vg-linha);
	border-radius: 10px;
	font: 600 13px var(--vg-titulos);
	transition: transform var(--vg-dur) var(--vg-curva-saida), border-color var(--vg-dur) var(--vg-curva), color var(--vg-dur) var(--vg-curva);
}

.vg-canal:hover,
.vg-canal:focus-visible {
	border-color: var(--vg-violeta);
	color: var(--vg-forte);
}

@media (hover: hover) {
	.vg-canal:hover {
		transform: translateY(-2px);
	}
}

/* Campos do Contact Form 7 */

.wpcf7 .screen-reader-response {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7-form p {
	margin: 0 0 16px;
}

.wpcf7-form label {
	display: block;
	font: 700 12px var(--vg-titulos);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vg-claro);
}

.wpcf7-form label br {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--vg-linha);
	border-radius: 10px;
	background: var(--vg-fundo);
	color: var(--vg-texto);
	font: 400 15px/1.5 var(--vg-texto-fonte);
	text-transform: none;
	letter-spacing: 0;
	transition: border-color var(--vg-dur) var(--vg-curva), box-shadow var(--vg-dur) var(--vg-curva);
}

.wpcf7-form .wpcf7-textarea {
	min-height: 160px;
	resize: vertical;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-textarea:focus {
	outline: none;
	border-color: var(--vg-violeta);
	box-shadow: 0 0 0 3px rgba(137, 5, 255, 0.25);
}

.wpcf7-form .wpcf7-submit {
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--vg-azul), var(--vg-violeta));
	color: #fff;
	font: 700 14px var(--vg-titulos);
	cursor: pointer;
	transition: transform var(--vg-dur-rapida) var(--vg-curva-saida), filter var(--vg-dur-rapida) var(--vg-curva);
}

.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--vg-violeta);
	outline-offset: 3px;
}

@media (hover: hover) {
	.wpcf7-form .wpcf7-submit:hover {
		filter: brightness(1.12);
	}
}

.wpcf7-form .wpcf7-submit:active {
	transform: scale(0.96);
}

.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Rodinha de "enviando" do Contact Form 7, só durante o envio */
.wpcf7-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 12px;
	border: 2px solid var(--vg-linha);
	border-top-color: var(--vg-violeta);
	border-radius: 50%;
	vertical-align: middle;
	visibility: hidden;
	animation: vg-gira 0.8s linear infinite;
}

.wpcf7-form.submitting .wpcf7-spinner {
	visibility: visible;
}

@keyframes vg-gira {
	to {
		transform: rotate(360deg);
	}
}

/* Erros e avisos */

.wpcf7-not-valid {
	border-color: #ff4d6d !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font: 600 13px var(--vg-texto-fonte);
	text-transform: none;
	letter-spacing: 0;
	color: #ff4d6d;
}

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--vg-linha);
	border-radius: 10px;
	font-size: 14px;
	animation: vg-sobe var(--vg-dur) var(--vg-curva-saida);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #19b37d;
	background: rgba(25, 179, 125, 0.12);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #f2a900;
	background: rgba(242, 169, 0, 0.12);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #ff4d6d;
	background: rgba(255, 77, 109, 0.12);
}

@media (min-width: 760px) {
	.wpcf7-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
	}

	/* Nome e E-mail lado a lado; o resto ocupa a linha toda */
	.wpcf7-form > p:nth-of-type(n + 3),
	.wpcf7-form > .wpcf7-response-output,
	.wpcf7-form > fieldset {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.vg-contato__grade {
		grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
		gap: 28px;
		align-items: start;
	}

	.vg-contato__formulario {
		padding: 32px;
	}

	.vg-contato__lado {
		position: sticky;
		top: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vg-canal,
	.wpcf7-form .wpcf7-submit,
	.wpcf7-form .wpcf7-text,
	.wpcf7-form .wpcf7-email,
	.wpcf7-form .wpcf7-textarea {
		transition: none;
	}

	.vg-canal:hover,
	.wpcf7-form .wpcf7-submit:active {
		transform: none;
	}

	.wpcf7 form .wpcf7-response-output {
		animation: none;
	}

	.wpcf7-spinner {
		animation-duration: 2.4s;
	}
}

/* Menu: categorias e, depois de um traço, as páginas institucionais em letra mais discreta */

.vg-menu .vg-menu__institucional {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--vg-linha);
}

.vg-menu .vg-menu__institucional a {
	font-size: 14px;
	color: var(--vg-suave);
}

.vg-menu .vg-menu__institucional .current-menu-item > a,
.vg-menu .vg-menu__institucional a:hover {
	color: var(--vg-ativo);
}

@media (min-width: 1024px) {
	.vg-menu {
		display: flex;
		align-items: center;
		gap: 22px;
	}

	.vg-menu .vg-menu__institucional {
		gap: 18px;
		margin-top: 0;
		padding: 0 0 0 22px;
		border-top: 0;
		border-left: 1px solid var(--vg-linha);
	}

	.vg-menu .vg-menu__institucional a {
		font-size: 12px;
	}
}

/* Página Sobre: texto em coluna confortável, time em cards e chamadas no fim */

.vg-sobre__texto {
	max-width: 980px;
	padding: 28px 0 8px;
}

.vg-sobre__texto .vg-conteudo {
	max-width: none;
	margin: 0;
}

.vg-sobre__texto .vg-conteudo > p[style] {
	text-align: left !important; /* o texto antigo vem justificado, o que cria buracos na leitura */
}

.vg-sobre__texto h3 {
	margin: 36px 0 16px;
	font-size: 20px;
}

.vg-time {
	display: grid;
	gap: 16px;
	margin-bottom: 8px;
}

.vg-membro {
	display: grid;
	grid-template-columns: 88px 1fr;
	column-gap: 16px;
	align-items: start;
	padding: 18px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
	transition: transform var(--vg-dur) var(--vg-curva-saida), border-color var(--vg-dur) var(--vg-curva);
}

.vg-membro__moldura {
	position: relative;
	grid-row: span 2;
	width: 88px;
	height: 88px;
	overflow: hidden;
	border-radius: 50%;
	background: #4802ff;
	box-shadow: 0 0 0 3px rgba(199, 184, 255, 0.35);
}

/* O círculo do card fica centralizado na largura e a ~40% da altura, com ~70% da largura de diâmetro. */
.vg-membro__moldura .vg-membro__foto {
	position: absolute;
	top: -46%;
	left: -18%;
	width: 136%;
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 0;
}

.vg-conteudo .vg-membro__nome {
	margin: 2px 0 6px;
	font: 700 15px/1.3 var(--vg-titulos);
	color: var(--vg-forte);
}

.vg-conteudo .vg-membro__bio {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vg-claro);
}

@media (hover: hover) {
	.vg-membro:hover {
		border-color: var(--vg-violeta);
		transform: translateY(-3px);
	}
}

.vg-sobre__chamadas {
	display: grid;
	gap: 16px;
	max-width: 980px;
	padding: 24px 0 56px;
}

.vg-chamada-card {
	display: grid;
	gap: 6px;
	padding: 22px 24px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
	transition: transform var(--vg-dur) var(--vg-curva-saida), border-color var(--vg-dur) var(--vg-curva);
}

.vg-chamada-card--destaque {
	border-color: transparent;
	background: linear-gradient(120deg, var(--vg-azul), var(--vg-violeta));
	color: #fff;
}

.vg-chamada-card__titulo {
	font: 800 18px var(--vg-titulos);
}

.vg-chamada-card__texto {
	font-size: 14px;
	opacity: 0.85;
}

.vg-chamada-card--destaque:hover,
.vg-chamada-card--destaque:focus-visible {
	color: #fff;
}

@media (hover: hover) {
	.vg-chamada-card:hover {
		border-color: var(--vg-violeta);
		transform: translateY(-3px);
	}
}

@media (min-width: 760px) {
	.vg-time {
		grid-template-columns: 1fr 1fr;
	}

	.vg-sobre__chamadas {
		grid-template-columns: 1.4fr 1fr;
	}
}

@media (min-width: 1240px) {
	.vg-time {
		grid-template-columns: repeat(3, 1fr);
	}

	.vg-membro {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.vg-membro__moldura {
		grid-row: auto;
		width: 112px;
		height: 112px;
		margin-bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vg-membro,
	.vg-chamada-card {
		transition: none;
	}

	.vg-membro:hover,
	.vg-chamada-card:hover {
		transform: none;
	}
}

/* Botões maiores e variações (página Anuncie) */

.vg-botao--grande {
	padding: 14px 26px;
	font-size: 15px;
}

.vg-botao--contorno {
	border: 1px solid var(--vg-linha);
	background: transparent;
	color: var(--vg-texto);
}

.vg-botao--branco {
	background: #fff;
	color: var(--vg-navy);
}

.vg-botao--contorno-branco {
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: #fff;
}

.vg-botao--branco:hover,
.vg-botao--branco:focus-visible {
	color: var(--vg-navy);
}

.vg-botao--contorno-branco:hover,
.vg-botao--contorno-branco:focus-visible {
	color: #fff;
}

/* Página Anuncie (mídia kit) */

.vg-kit__topo {
	padding: 18px 0 8px;
}

.vg-kit__idiomas {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	margin-bottom: 12px;
}

.vg-kit__idiomas a {
	padding: 6px 12px;
	border: 1px solid var(--vg-linha);
	border-radius: 999px;
	font: 700 12px var(--vg-titulos);
	color: var(--vg-suave);
	transition: background-color var(--vg-dur) var(--vg-curva), color var(--vg-dur) var(--vg-curva);
}

.vg-kit__idiomas a[aria-current="page"] {
	border-color: transparent;
	background: var(--vg-indigo);
	color: #fff;
}

.vg-kit__heroi {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: 20px;
	background: #2a0b8f;
	color: #fff;
	isolation: isolate;
}

.vg-kit__heroi > * {
	grid-area: 1 / 1;
}

.vg-kit__banner {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	opacity: 0.95;
	animation: vg-respira 4.5s var(--vg-curva) both;
}

.vg-kit__heroi-texto {
	position: relative;
	z-index: 1;
	padding: 36px 22px;
	background: linear-gradient(90deg, rgba(12, 7, 41, 0.92) 0%, rgba(12, 7, 41, 0.6) 60%, transparent 100%);
}

.vg-kit__titulo {
	max-width: 760px;
	margin: 12px 0 14px;
	font-size: clamp(28px, 4.2vw, 48px);
	line-height: 1.1;
}

.vg-kit__subtitulo {
	max-width: 640px;
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #d3cef5;
}

.vg-kit__heroi .vg-botao--contorno {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.vg-kit__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.vg-kit__secao {
	padding: 40px 0 0;
}

.vg-kit__h2 {
	margin-bottom: 18px;
	font-size: clamp(22px, 2.4vw, 28px);
}

.vg-kit__rotulo {
	display: block;
	margin-bottom: 10px;
	font: 700 12px var(--vg-titulos);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vg-suave);
}

/* Números com borda neon, como no mídia kit do Vale */

.vg-numeros {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.vg-numero {
	--vg-neon: #00e5ff;
	display: grid;
	gap: 4px;
	padding: 20px 16px;
	border: 2px solid var(--vg-neon);
	border-radius: 16px;
	background: var(--vg-superficie);
	box-shadow: 0 0 18px color-mix(in srgb, var(--vg-neon) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--vg-neon) 15%, transparent);
	text-align: center;
	transition: transform var(--vg-dur) var(--vg-curva-saida);
}

.vg-numero--1 {
	--vg-neon: #ff3fa4;
}

.vg-numero--2 {
	--vg-neon: #a855ff;
}

.vg-numero--3 {
	--vg-neon: #ff9f1c;
}

.vg-numero--4 {
	--vg-neon: #3ddc84;
}

.vg-numero__valor {
	font: 800 clamp(30px, 4vw, 44px) / 1 var(--vg-titulos);
	color: var(--vg-forte);
	font-variant-numeric: tabular-nums;
}

.vg-numero__rotulo {
	font: 700 12px/1.3 var(--vg-titulos);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vg-claro);
}

@media (hover: hover) {
	.vg-numero:hover {
		transform: translateY(-4px);
	}
}

/* Credenciais */

.vg-credenciais {
	display: grid;
	gap: 16px;
}

.vg-credencial-destaque {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: linear-gradient(135deg, rgba(190, 21, 24, 0.22), transparent 70%), var(--vg-superficie);
}

.vg-credencial-destaque strong {
	font: 800 20px/1.25 var(--vg-titulos);
	color: var(--vg-forte);
}

.vg-credencial-destaque span:last-child {
	color: var(--vg-claro);
}

.vg-credencial-eventos {
	padding: 24px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
}

.vg-selos,
.vg-parceiros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-selos li,
.vg-parceiros li {
	padding: 10px 14px;
	border: 1px solid var(--vg-linha);
	border-radius: 10px;
	background: var(--vg-superficie-2);
	font: 700 14px var(--vg-titulos);
	color: var(--vg-forte);
}

/* Parceiros em blocos inclinados, como os do site antigo */
.vg-parceiros li {
	padding: 14px 20px;
	background: var(--vg-superficie);
	transform: skewX(-10deg);
}

.vg-kit__h3 {
	margin: 24px 0 12px;
	font-size: 16px;
	color: var(--vg-claro);
}

.vg-parceiros--conteudo li {
	padding: 10px 16px;
	background: transparent;
	font-size: 13px;
	color: var(--vg-claro);
}

/* Público, canais, formatos, passos e perguntas */

.vg-kit__duas {
	display: grid;
	gap: 32px;
}

.vg-publico,
.vg-kit-canais {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-publico li {
	position: relative;
	padding: 14px 16px 14px 44px;
	border: 1px solid var(--vg-linha);
	border-radius: 12px;
	background: var(--vg-superficie);
	line-height: 1.5;
}

.vg-publico li::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 18px;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--vg-azul), var(--vg-violeta));
	transform: rotate(45deg);
}

.vg-kit-canais li {
	display: grid;
	gap: 2px;
	padding: 12px 16px;
	border-left: 3px solid var(--vg-violeta);
	border-radius: 0 10px 10px 0;
	background: var(--vg-superficie);
}

.vg-kit-canais strong {
	font: 700 15px var(--vg-titulos);
	color: var(--vg-forte);
}

.vg-kit-canais span {
	font-size: 14px;
	color: var(--vg-suave);
}

.vg-formatos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.vg-formato {
	display: grid;
	gap: 8px;
	padding: 18px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
	font: 700 15px/1.3 var(--vg-titulos);
	color: var(--vg-forte);
	transition: transform var(--vg-dur) var(--vg-curva-saida), border-color var(--vg-dur) var(--vg-curva);
}

.vg-formato__numero {
	font: 800 22px/1 var(--vg-titulos);
	color: var(--vg-violeta);
}

@media (hover: hover) {
	.vg-formato:hover {
		border-color: var(--vg-violeta);
		transform: translateY(-3px);
	}
}

.vg-passos {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vg-passo;
}

.vg-passos li {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--vg-linha);
	border-radius: 12px;
	background: var(--vg-superficie);
	counter-increment: vg-passo;
}

.vg-passos li::before {
	content: counter(vg-passo);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vg-azul), var(--vg-violeta));
	color: #fff;
	font: 800 18px var(--vg-titulos);
}

.vg-perguntas {
	display: grid;
	gap: 10px;
}

.vg-pergunta {
	border: 1px solid var(--vg-linha);
	border-radius: 12px;
	background: var(--vg-superficie);
}

.vg-pergunta summary {
	padding: 14px 16px;
	font: 700 15px var(--vg-titulos);
	color: var(--vg-forte);
	cursor: pointer;
}

.vg-pergunta p {
	margin: 0;
	padding: 0 16px 16px;
	color: var(--vg-claro);
	line-height: 1.6;
	animation: vg-sobe var(--vg-dur) var(--vg-curva-saida);
}

/* Chamada final em faixa da marca */

.vg-kit__final {
	margin: 48px 0 56px;
	padding: 36px 24px;
	border-radius: 20px;
	background: linear-gradient(120deg, var(--vg-azul), var(--vg-violeta));
	color: #fff;
	text-align: center;
}

.vg-kit__final h2 {
	margin-bottom: 8px;
	font-size: clamp(24px, 3vw, 34px);
}

.vg-kit__final p {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.85);
}

.vg-kit__final .vg-kit__botoes {
	justify-content: center;
}

@media (min-width: 760px) {
	.vg-numeros {
		grid-template-columns: repeat(3, 1fr);
	}

	.vg-credenciais {
		grid-template-columns: 1fr 1.2fr;
	}

	.vg-formatos {
		grid-template-columns: repeat(3, 1fr);
	}

	.vg-kit__heroi-texto {
		padding: 56px 48px;
	}
}

@media (min-width: 1024px) {
	.vg-numeros {
		grid-template-columns: repeat(5, 1fr);
	}

	.vg-kit__duas {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vg-kit__banner,
	.vg-pergunta p {
		animation: none;
	}

	.vg-numero,
	.vg-formato,
	.vg-kit__idiomas a {
		transition: none;
	}

	.vg-numero:hover,
	.vg-formato:hover {
		transform: none;
	}
}

/* Loja do Vale (/loja/) */

.vg-loja-icone[aria-current="page"] {
	color: var(--vg-destaque);
}

.vg-loja .vg-hub__dentro + .vg-hub__dentro,
.vg-loja > .vg-hub__dentro {
	padding-top: 12px;
	padding-bottom: 48px;
}

.vg-loja__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-produto {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--vg-linha);
	border-radius: var(--vg-raio);
	background: var(--vg-superficie);
	transition: border-color 200ms var(--vg-curva), transform 200ms var(--vg-curva);
}

.vg-produto:hover,
.vg-produto:focus-within {
	border-color: var(--vg-violeta);
	transform: translateY(-2px);
}

.vg-produto__capa {
	display: grid;
	align-self: start;
	place-items: center;
	aspect-ratio: 5 / 7;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}

.vg-produto__capa img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vg-produto__texto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.vg-produto__titulo {
	margin: 0;
	font-family: var(--vg-titulos);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vg-forte);
}

.vg-produto__titulo a {
	color: inherit;
	text-decoration: none;
}

.vg-produto__titulo a:hover {
	text-decoration: underline;
}

.vg-produto__descricao {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vg-claro);
}

.vg-produto__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.vg-produto__botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 2px solid var(--vg-indigo);
	text-decoration: none;
	border-radius: 999px;
	background: var(--vg-indigo);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.vg-produto__botao--review {
	border-color: var(--vg-linha);
	background: transparent;
	color: var(--vg-forte);
}

.vg-produto__botao--review:hover {
	border-color: #ff0033;
}

.vg-produto__botao--review svg {
	color: #ff0033;
}

.vg-loja__aviso {
	margin: 32px 0 0;
	font-size: 13px;
	color: var(--vg-claro);
}

@media (min-width: 760px) {
	.vg-loja__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.vg-loja__lista {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.vg-produto {
		grid-template-columns: 120px 1fr;
	}
}

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

	.vg-produto:hover,
	.vg-produto:focus-within {
		transform: none;
	}
}

/* Banner no topo dos hubs (The Witcher, Cyberpunk).
 * Celular: a arte aparece numa faixa no alto e o texto fica embaixo, sobre o navy.
 * Tablet e desktop: a arte vira o fundo do topo, à direita, e o texto fica à esquerda sem invadir a arte. */

.vg-hub__topo--banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: 0;
	background: #0c0729;
	color: var(--vg-texto);
}

.vg-hub__banner {
	display: block;
	width: 100%;
	height: 168px;
	object-fit: cover;
	object-position: 88% 18%;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.vg-hub__topo--banner .vg-hub__dentro {
	position: relative;
	margin-top: -28px;
}

.vg-hub__topo--banner .vg-hub__titulo {
	color: #fff;
}

@media (min-width: 760px) {
	.vg-hub__topo--banner {
		display: flex;
		align-items: center;
		min-height: 260px;
		padding: 40px 0;
	}

	.vg-hub__banner {
		position: absolute;
		inset: 0;
		z-index: -1;
		height: 100%;
		object-position: right top;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.vg-hub__topo--banner .vg-hub__dentro {
		width: 100%;
		margin-top: 0;
	}

	.vg-hub__topo--banner .vg-hub__titulo,
	.vg-hub__topo--banner .vg-hub__intro {
		max-width: min(56%, 720px);
		text-shadow: 0 1px 14px rgba(12, 7, 41, 0.85);
	}
}

@media (min-width: 1024px) {
	.vg-hub__topo--banner {
		min-height: 320px;
	}
}

@media (max-width: 759.98px) {
	.vg-hub--witcher .vg-hub__banner {
		object-position: 68% 20%;
	}
}