/* =====================================================================
   home.css , TODO o estilo da página inicial da Nuntius Games.
   =====================================================================

   Este arquivo é o DONO ÚNICO do visual da Home. Ele nasceu do bloco
   <style id="ng-home-css"> que morava dentro de front-page.php: CSS
   dentro do PHP não tem cache de navegador, viaja inteiro em toda visita
   e não dá pra minificar. Como as classes de base (.ng-secao, .ng-btn,
   .ng-container…) são usadas TAMBÉM pelos partials de outros agentes
   (bloco-sobre, bloco-servicos, bloco-criadores, cta-pitch), elas vieram
   inteiras para cá , mover só metade deixaria aquelas seções sem estilo.

   REGRA: cor SEMPRE por var(--ng-*) de style.css (CONTRATO.md §7).
   Nenhum literal de cor de marca aqui , é assim que dois arquivos de
   tema divergem sem ninguém perceber.

   ⚠️ A ordem dos BLOCOS deste arquivo é a de leitura (base primeiro,
   depois cada seção), e ela NÃO acompanha mais a ordem da página. A ordem
   da página mudou por pedido do dono (hero → jogos → barra → notícias →
   Quem Somos → O Que Fazemos → números → criadores → desenvolvedores) e
   está escrita em front-page.php, que é o dono dela. Reorganizar este
   arquivo para "casar" só criaria um segundo lugar onde a ordem mora.

   Blocos deste arquivo:
     0. base (container, seção, botão, chip, vazio)
     1. hero , palco de gameplay 16:9 + cápsula
     2. números
     3. vitrine de jogos
     3b. trilho que rola para o lado (a "setinha" das fileiras de jogo)
     4. novidades (estilo Bandai Namco)
     5. barra de newsletter
     6. seções herdadas (sobre / serviços / criadores / pitch)
     7. movimento reduzido
   ===================================================================== */

.ng-home { color: var(--ng-tinta); }

/* =====================================================================
   0. BASE
   ===================================================================== */
/* ---------------------------------------------------------------------
   ESTAS QUATRO TELAS RESPIRAM UM POUCO MENOS QUE O RESTO DO SITE, e isso
   é decisão visual — mas ela era escrita do jeito que APAGAVA tudo em volta.

   Aqui havia uma redefinição de `.ng-secao` e `.ng-container` com valores
   literais. Como esta folha é impressa DEPOIS de style.css e componentes.css,
   e a especificidade é a mesma (uma classe), ela vencia por ordem — e levava
   junto os MODIFICADORES, que são declarados lá atrás:

     .ng-secao--compacta  (style.css)       →  virava letra morta
     .ng-secao--curta     (componentes.css) →  virava letra morta

   Medido no navegador: na Central de Anúncios, a seção marcada
   `ng-secao--compacta` no HTML renderizava com 90px de respiro, exatamente o
   mesmo de uma seção normal. Três seções do site pediam espaçamento reduzido
   e nenhuma o recebia; quem lesse o HTML acharia que estavam compactas.

   Agora o valor entra pelo TOKEN, no próprio elemento. O resultado visual da
   seção comum é IDÊNTICO ao de antes (as mesmas medidas), porque style.css já
   faz `padding-block: var(--ng-secao-pad)` — só que agora quem escreveu
   `--compacta` ou `--curta` volta a ser ouvido, porque essas regras vêm depois
   e continuam declarando o `padding-block` diretamente.

   ⚠️ Consequência que fica de pé, e é escolha de quem desenha, não defeito:
   mexer em `--ng-secao-pad`/`--ng-container-pad` no style.css continua sem
   efeito nestas quatro telas, porque elas declaram o próprio valor. Se um dia
   o site inteiro tiver de respirar igual, o conserto é apagar as duas linhas
   abaixo — e aí a Home passa de 90px para 115px de respiro entre seções.
   --------------------------------------------------------------------- */
.ng-container { --ng-container-pad: clamp(16px, 4vw, 40px); }

.ng-secao { --ng-secao-pad: clamp(48px, 7vw, 104px); position: relative; }




/*
 * A TIPOGRAFIA DO TÍTULO DE SEÇÃO — E O ZERO QUE PRECISOU DE UM SELETOR.
 *
 * Esta regra tinha `margin: 0` na classe CRUA, e isso quebrava metade do site
 * em silêncio. A causa é que `.ng-titulo-secao` tem DOIS usos no tema:
 *
 *   (a) como <div>, o cabeçalho inteiro da seção — o respiro até o conteúdo é
 *       dele, e vem do `componentes.css`;
 *   (b) como <h2>, só o título, dentro de um invólucro que já dá o respiro —
 *       aqui a margem própria SOMARIA com a do invólucro.
 *
 * O zero acertava (b) e destruía (a): como home.css é a última folha e a
 * especificidade era a mesma, ele apagava o `margin-bottom` do componentes em
 * TODA página que carrega esta folha. MEDIDO — a correlação era perfeita:
 * /quemsomos e /novidades (carregam home.css) ficavam com 0px, e os depoimentos
 * chegavam a SOBREPOR em -8px; /jogos, /o-que-fazemos e /desenvolvedores (não
 * carregam) ficavam certos, com 28 a 52px.
 *
 * Agora o zero é do <h2>, que é exatamente o caso (b).
 *
 * ⚠️ E ele fica NESTE arquivo de propósito, não no componentes.css. Levar a
 * regra para lá parece mais limpo e é pior: o caso (b) também aparece em
 * páginas que NÃO carregam home.css (o formulário de pitch em /o-que-fazemos e
 * /desenvolvedores), e nelas o h2 depende da margem do componentes para não
 * colar no próprio subtítulo. MEDIDO: zerar de lá levou esse vão de 52px para
 * ZERO. Aqui, o alcance é só o das páginas que já tinham o defeito.
 *
 * É a TERCEIRA vez que este arquivo redeclara uma classe do componentes.css e
 * quebra algo: `.ng-secao` e `.ng-container` já passaram por isso. Antes de
 * escrever aqui uma classe que o componentes já declara, pergunte se o valor
 * não deveria virar token no próprio elemento.
 */
.ng-titulo-secao {
	font-family: var(--ng-titulo);
	font-weight: 600;
	line-height: 1.05;
	font-size: clamp(1.7rem, 1rem + 2.6vw, 2.7rem);
	color: var(--ng-branco);
	letter-spacing: .01em;
}

h2.ng-titulo-secao { margin: 0; }

.ng-titulo-secao b { color: var(--ng-destaque); font-weight: inherit; }


/* --- Botões ---------------------------------------------------------- */
.ng-btn {
	--_bg: transparent;
	--_fg: var(--ng-branco);
	--_bd: transparent;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: var(--ng-raio-pill, 999px);
	border: 1.5px solid var(--_bd);
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .98rem;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
	line-height: 1;
}

.ng-btn svg { width: 18px; height: 18px; flex: none; }

.ng-btn--primario {
	--_bg: var(--ng-destaque);
	--_fg: #06222f;
	--_bd: var(--ng-destaque);
	box-shadow: 0 8px 26px -12px var(--ng-destaque);
}

.ng-btn--primario:hover { transform: translateY(-2px); --_bg: var(--ng-destaque-2); --_bd: var(--ng-destaque-2); }

.ng-btn--fantasma { --_bd: var(--ng-borda-forte, rgba(255,255,255,.28)); --_fg: var(--ng-branco); }

.ng-btn--fantasma:hover { --_bd: var(--ng-destaque); --_fg: var(--ng-destaque); transform: translateY(-2px); }

.ng-btn:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; }


/*
 * AS PRIMITIVAS DE SEÇÃO SAÍRAM DAQUI — foram para componentes.css.
 *
 * `.ng-secao--faixa`, `.ng-secao__cabecalho`, `.ng-olho`, `.ng-subtitulo-secao`
 * e `.ng-link-mais` não são da Home: são as peças de "topo de seção" que TODA
 * tela usa. Enquanto elas moraram nesta folha, qualquer bloco reaproveitado
 * fora da Home saía sem elas — e sem erro nenhum. Foi o que o dono viu:
 * *"no fim de cada página de notícia ficam umas setas gigantescas"*, que era
 * `.ng-link-mais svg { width:16px }` faltando na página de uma notícia.
 *
 * Quem vigia isso agora é tools/checar-css-dos-partials.mjs.
 */

/* --- Chips ----------------------------------------------------------- */
.ng-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--ng-raio-pill, 999px);
	background: rgba(255,255,255,.06);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.10));
	color: var(--ng-tinta);
	font-size: .8rem;
	line-height: 1.2;
}

/* --- Estado vazio ---------------------------------------------------- */
.ng-vazio {
	border: 1px dashed var(--ng-borda-forte, rgba(255,255,255,.16));
	border-radius: var(--ng-raio);
	padding: clamp(28px, 5vw, 52px);
	text-align: center;
	color: var(--ng-tinta-fraca);
	background: rgba(255,255,255,.02);
}

.ng-vazio__titulo { font-family: var(--ng-titulo); color: var(--ng-tinta); font-size: 1.15rem; margin: 0 0 6px; }

.ng-vazio p { margin: 0; }

/* --- Só para leitor de tela ------------------------------------------ */
.ng-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.ng-chip--breve { color: var(--ng-destaque); border-color: rgba(158,219,254,.4); }

/* =====================================================================
   2. NOSSOS NÚMEROS
   ===================================================================== */
.ng-numeros-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
	gap: clamp(14px, 2vw, 24px);
}

.ng-num {
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-radius: var(--ng-raio);
	padding: clamp(22px, 3vw, 32px) clamp(16px, 2.5vw, 26px);
	text-align: center;
}

.ng-num--destaque {
	border-color: rgba(158,219,254,.35);
	background: linear-gradient(180deg, rgba(158,219,254,.08), var(--ng-fundo-2));
}

.ng-num__valor {
	display: block;
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	line-height: 1;
	font-size: clamp(2.1rem, 1rem + 4vw, 3.2rem);
	font-variant-numeric: tabular-nums;
}

/*
 * Numero comprido encolhe. Medido: com a fonte cheia (51,2px) o "+342.559"
 * pedia 228px numa caixa de 164px e vazava para fora do cartao , que e o
 * "bugado e nao centralizado" que o dono viu. Os tres degraus saem da CONTA
 * de caracteres (partials/bloco-numeros.php), nao da largura da tela.
 */
.ng-num__valor[data-tam="medio"] { font-size: clamp(1.8rem, .9rem + 3vw, 2.6rem); }
.ng-num__valor[data-tam="longo"] { font-size: clamp(1.5rem, .8rem + 2.2vw, 2.1rem); }

.ng-num--destaque .ng-num__valor { color: var(--ng-destaque); }

.ng-num__rotulo { display: block; margin-top: 10px; color: var(--ng-tinta); font-weight: 600; letter-spacing: .02em; font-size: .95rem; }

.ng-num__nota { display: block; margin-top: 4px; color: var(--ng-tinta-fraca); font-size: .78rem; }

/* =====================================================================
   3. VITRINE DE JOGOS , TRÊS fileiras, sem rótulo de status
   =====================================================================
   O dono pediu "3 fileiras deles, sem descrição de já disponíveis ou em
   breve". Sumiram, então, as duas fileiras rotuladas (`.ng-trilho*`) e
   entrou uma grade só.

   `auto-fill` foi trocado por um número EXATO de colunas no desktop, e a
   razão é o pedido: com `repeat(auto-fill, minmax(240px,1fr))` a
   quantidade de colunas depende da largura da janela, então "3 fileiras"
   viraria 2, 3 ou 4 conforme o monitor. Com 4 colunas fixas acima de
   1080px, os 12 cartões que o PHP manda (3 × 4, ver vitrine-jogos.php)
   caem em exatamente três fileiras. Abaixo disso a grade reempacota , o
   que é o comportamento certo, e "3 fileiras" é uma afirmação sobre o
   desktop.
   ===================================================================== */
.ng-grade-jogos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

/* A grade da Home: contagem de colunas explícita, para o número de
   fileiras ser previsível. O catálogo (/jogos) segue com `auto-fill`. */
/*
 * O titulo de cada faixa da vitrine (Ja disponiveis / Em breve). Discreto de
 * proposito: quem manda na tela sao as capas, e um titulo do tamanho do da
 * secao competiria com "Nossos jogos" logo acima.
 */
.ng-vitrine__faixa-titulo {
	font-family: var(--ng-titulo);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ng-tinta-fraca);
	margin: clamp(22px, 3vw, 34px) 0 clamp(12px, 1.6vw, 18px);
}

.ng-vitrine__faixa-titulo:first-of-type { margin-top: 0; }

.ng-grade-jogos--home { grid-template-columns: 1fr; }

@media (min-width: 560px)  { .ng-grade-jogos--home { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 820px)  { .ng-grade-jogos--home { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1080px) { .ng-grade-jogos--home { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------------------
   3b. FILEIRA QUE ROLA PARA O LADO , a "setinha" que o dono pediu
   ---------------------------------------------------------------------------
   "nas linhas de jogos abaixo do hero, colocar uma setinha para rolar para o
   lado e ver mais jogos em cada linha".

   QUEM ROLA É O CSS, NÃO O JS. `overflow-x: auto` já entrega dedo, trackpad e
   barra de rolagem com o JavaScript desligado; a seta é um extra que só
   aparece quando o JS confirma que há para onde ir (ele tira o `hidden`).

   A LARGURA DO CARTÃO É UMA CONTA, não um número fixo: `--ng-trilho-cols`
   diz quantos cartões cabem de uma vez, e o `calc` divide a largura visível
   descontando os vãos. É a mesma medida que o PHP usa para decidir quantos
   jogos mandar (`$ng_colunas_home` em partials/vitrine-jogos.php) , mudar
   um dos dois sem o outro só muda quanto sobra para rolar, nunca quebra.

   No celular a conta dá 1,15 de propósito: o cartão seguinte aparece pela
   metade na borda, que é o que conta para o dedo que aquilo rola.

   `grid-auto-flow: column` (e não flex) porque a grade ESTICA os itens à
   altura da linha sozinha: os cartões ficam do mesmo tamanho sem ninguém
   precisar fixar altura, que é como um título de duas linhas desalinharia a
   fileira inteira.
   ------------------------------------------------------------------------ */
.ng-trilho {
	--ng-trilho-cols: 1.15;
	--ng-trilho-gap: clamp(16px, 2.4vw, 28px);
	--ng-trilho-seta: 44px;

	position: relative;
}

.ng-trilho__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--ng-trilho-cols) - 1) * var(--ng-trilho-gap)) / var(--ng-trilho-cols)
	);
	gap: var(--ng-trilho-gap);

	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;

	/* O cartão sobe 4px e joga sombra no hover/foco. Sem esta folga o
	   `overflow` cortaria os dois, e o efeito viraria um corte seco. */
	padding-block: 8px 20px;
	margin-block: -8px -12px;

	/* Barra fina e discreta: ela é a pista de que a fileira rola para quem
	   está no mouse e não passou por cima de nada ainda. */
	scrollbar-width: thin;
	scrollbar-color: var(--ng-fundo-3) transparent;
}

.ng-trilho__pista > * { scroll-snap-align: start; }

.ng-trilho__pista::-webkit-scrollbar { height: 8px; }

.ng-trilho__pista::-webkit-scrollbar-track { background: transparent; }

.ng-trilho__pista::-webkit-scrollbar-thumb {
	background: var(--ng-fundo-3);
	border-radius: var(--ng-raio-pill);
}

.ng-trilho__pista:focus-visible {
	outline: 2px solid var(--ng-destaque);
	outline-offset: 4px;
	border-radius: var(--ng-raio-sm);
}

.ng-trilho__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;

	width: var(--ng-trilho-seta);
	height: var(--ng-trilho-seta);
	display: grid;
	place-items: center;

	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-pill);
	background: var(--ng-flutuante);
	color: var(--ng-branco);
	cursor: pointer;
	box-shadow: var(--ng-sombra);
	transition: background var(--ng-transicao), border-color var(--ng-transicao), color var(--ng-transicao);
}

.ng-trilho__seta svg { width: 22px; height: 22px; }

.ng-trilho__seta:hover,
.ng-trilho__seta:focus-visible {
	background: var(--ng-destaque);
	border-color: var(--ng-destaque);
	color: var(--ng-fundo);
}

/* `hidden` é quem esconde a seta (o JS liga e desliga). Sem isto o `display:
   grid` acima venceria o atributo e o botão apareceria mesmo sem ter para
   onde rolar , e um botão que não faz nada é pior que botão nenhum. */
.ng-trilho__seta[hidden] { display: none; }

/* As setas ficam POR CIMA da borda da fileira, meio dentro e meio fora: assim
   elas não roubam largura do cartão. A margem lateral só entra quando o JS
   confirmou que a fileira rola, para a fileira que já cabe inteira continuar
   alinhada com o título e com o resto da seção. */
.ng-trilho__seta--ant  { left: calc(var(--ng-trilho-seta) / -2); }

.ng-trilho__seta--prox { right: calc(var(--ng-trilho-seta) / -2); }

@media (min-width: 560px)  { .ng-trilho { --ng-trilho-cols: 2.15; } }

@media (min-width: 820px)  { .ng-trilho { --ng-trilho-cols: 3; } }

@media (min-width: 1080px) { .ng-trilho { --ng-trilho-cols: 4; } }

/* Em tela estreita a seta não cabe do lado de fora (ela sairia da janela e
   criaria rolagem horizontal na PÁGINA, que é o defeito que ninguém perdoa).
   Ali ela entra por cima da fileira, encostada na borda. */
@media (max-width: 900px) {
	.ng-trilho { --ng-trilho-seta: 38px; }

	.ng-trilho__seta--ant  { left: 4px; }

	.ng-trilho__seta--prox { right: 4px; }
}

/* =====================================================================
   4. NOVIDADES , estilo Bandai Namco (pedido 5 do dono)
   =====================================================================
   Primeiro item GRANDE (imagem enorme, texto sobreposto), o resto em
   linhas largas com miniatura à esquerda. Sem carrossel automático.
   ===================================================================== */
.ng-novidades-bn { display: grid; gap: clamp(16px, 2.4vw, 26px); }

@media (min-width: 900px) {
	.ng-novidades-bn { grid-template-columns: 1.35fr 1fr; align-items: start; }

}

/* tag de categoria colorida , uma cor por tipo */
.ng-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 4px;
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #06222f;
	background: var(--ng-destaque);
	white-space: nowrap;
}

.ng-tag--release     { background: var(--ng-ok); }

.ng-tag--atualizacao { background: var(--ng-destaque); }

.ng-tag--imprensa    { background: #d9b3ff; }

.ng-tag--evento      { background: #ffcf6e; }

/* --- item em destaque --- */
.ng-bn-destaque {
	position: relative;
	display: block;
	border-radius: var(--ng-raio);
	overflow: hidden;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	color: inherit;
	text-decoration: none;
	min-height: clamp(300px, 40vw, 460px);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ng-bn-destaque:hover,
.ng-bn-destaque:focus-visible {
	transform: translateY(-4px);
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-forte, 0 24px 60px -20px rgba(0,0,0,.7));
}

.ng-bn-destaque:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; }

.ng-bn-destaque__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}

.ng-bn-destaque:hover .ng-bn-destaque__img { transform: scale(1.04); }

.ng-bn-destaque__veu {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,.75) 68%, rgba(10,10,12,.95) 100%);
}

.ng-bn-destaque__corpo {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-end;
	padding: clamp(20px, 3vw, 32px);
	min-height: clamp(300px, 40vw, 460px);
}

.ng-bn-destaque__data { color: var(--ng-tinta-fraca); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }

.ng-bn-destaque__titulo {
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	font-size: clamp(1.4rem, 1rem + 1.9vw, 2.15rem);
	line-height: 1.12;
	margin: 0;
	text-shadow: 0 2px 18px rgba(0,0,0,.5);
}

.ng-bn-destaque__resumo {
	margin: 0;
	color: var(--ng-tinta);
	line-height: 1.6;
	max-width: 52ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- lista lateral --- */
.ng-bn-lista { display: grid; gap: clamp(12px, 1.6vw, 16px); align-content: start; }

.ng-bn-item {
	display: grid;
	grid-template-columns: minmax(96px, 34%) 1fr;
	gap: clamp(12px, 1.6vw, 18px);
	align-items: stretch;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-radius: var(--ng-raio);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.ng-bn-item:hover,
.ng-bn-item:focus-visible {
	transform: translateX(4px);
	border-color: var(--ng-destaque);
	background: var(--ng-fundo-3);
}

.ng-bn-item:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; }

.ng-bn-item__midia {
	position: relative;
	min-height: 96px;
	background: var(--ng-fundo-3);
	overflow: hidden;
}

.ng-bn-item__midia img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.ng-bn-item__corpo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 16px 14px 0;
	min-width: 0;
}

.ng-bn-item__data { color: var(--ng-tinta-fraca); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }

.ng-bn-item__titulo {
	font-family: var(--ng-titulo);
	font-weight: 600;
	color: var(--ng-branco);
	font-size: 1.05rem;
	line-height: 1.28;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =====================================================================
   5. BARRA DE NEWSLETTER (pedido 3 do dono)
   ===================================================================== */
.ng-barra-news {
	background:
		radial-gradient(900px 320px at 50% -40%, rgba(158,219,254,.16), transparent 60%),
		var(--ng-fundo-2);
	border-top: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-bottom: 1px solid var(--ng-borda, rgba(255,255,255,.06));
}

.ng-barra-news__interno {
	display: grid;
	gap: clamp(18px, 3vw, 40px);
	align-items: center;
}

@media (min-width: 880px) {
	.ng-barra-news__interno { grid-template-columns: 1fr minmax(340px, .85fr); }

}

.ng-barra-news__titulo {
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	font-size: clamp(1.4rem, 1rem + 2vw, 2.1rem);
	line-height: 1.1;
	margin: 0 0 8px;
}

.ng-barra-news__titulo b { color: var(--ng-destaque); font-weight: inherit; }

.ng-barra-news__texto { margin: 0; color: var(--ng-tinta-fraca); line-height: 1.6; max-width: 52ch; }

.ng-barra-news__form { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }

.ng-barra-news__campo {
	flex: 1 1 220px;
	min-width: 0;
	padding: 14px 18px;
	border-radius: var(--ng-raio-pill, 999px);
	border: 1.5px solid var(--ng-borda-forte, rgba(255,255,255,.14));
	background: var(--ng-fundo);
	color: var(--ng-tinta);
	font-family: var(--ng-corpo);
	font-size: 1rem;
}

.ng-barra-news__campo::placeholder { color: var(--ng-tinta-fraca); }

.ng-barra-news__campo:focus-visible {
	outline: 0;
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-foco, 0 0 0 3px rgba(158,219,254,.45));
}

.ng-barra-news__enviar.is-carregando { opacity: .65; cursor: progress; }

/* honeypot: fora da tela, NUNCA display:none (robô sabe pular campo escondido assim) */
.ng-barra-news__mel {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}

.ng-barra-news__status { margin: 10px 0 0; min-height: 1.2em; font-size: .9rem; color: var(--ng-tinta-fraca); flex-basis: 100%; }

.ng-barra-news__status[data-estado="ok"]   { color: var(--ng-ok); }

.ng-barra-news__status[data-estado="erro"] { color: var(--ng-alerta); }

.ng-barra-news__consent { margin: 10px 0 0; font-size: .8rem; color: var(--ng-tinta-fraca); }

/* =====================================================================
   6. SEÇÕES HERDADAS , usadas por partials de OUTROS agentes
      (bloco-sobre, bloco-servicos, bloco-criadores, cta-pitch).
      Não remover: sem elas aquelas seções ficam sem estilo nenhum.
   ===================================================================== */
.ng-sobre { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

.ng-sobre__texto p { margin: 0 0 16px; line-height: 1.7; font-size: clamp(1rem, .95rem + .4vw, 1.15rem); }

.ng-sobre__texto p:last-of-type { margin-bottom: 26px; }

.ng-valores { display: grid; gap: 14px; }

.ng-valor {
	display: flex; gap: 14px; align-items: flex-start;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-radius: var(--ng-raio);
	padding: 18px 20px;
}

.ng-valor__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(158,219,254,.12); color: var(--ng-destaque); }

.ng-valor__ico svg { width: 22px; height: 22px; }

.ng-valor__nome { font-family: var(--ng-titulo); font-weight: 600; color: var(--ng-branco); font-size: 1.05rem; margin: 0 0 3px; }

.ng-valor__desc { margin: 0; color: var(--ng-tinta-fraca); font-size: .92rem; line-height: 1.5; }

@media (max-width: 860px) { .ng-sobre { grid-template-columns: 1fr; } }

.ng-servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2.4vw, 26px); }

.ng-servico {
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-radius: var(--ng-raio);
	padding: clamp(22px, 3vw, 30px);
	transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.ng-servico:hover { transform: translateY(-4px); border-color: rgba(158,219,254,.35); background: var(--ng-fundo-3); }

.ng-servico__ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(158,219,254,.12); color: var(--ng-destaque); margin-bottom: 18px; }

.ng-servico__ico svg { width: 28px; height: 28px; }

.ng-servico__nome { font-family: var(--ng-titulo); font-weight: 600; color: var(--ng-branco); font-size: 1.25rem; margin: 0 0 10px; }

.ng-servico__desc { margin: 0; color: var(--ng-tinta-fraca); line-height: 1.6; font-size: .96rem; }

/* números por plataforma , o bloco antigo, mantido para reaproveitamento */
.ng-numeros-primario { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(14px, 2vw, 24px); }

.ng-numeros-plataformas { margin-top: clamp(20px, 3vw, 36px); }

.ng-numeros-plataformas__titulo { font-family: var(--ng-titulo); color: var(--ng-tinta-fraca); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; }

.ng-plataformas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(12px, 1.8vw, 18px); }

.ng-plat {
	display: flex; align-items: center; gap: 12px;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-radius: var(--ng-raio);
	padding: 14px 16px;
}

.ng-plat__ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ng-destaque); }

.ng-plat__ico svg { width: 26px; height: 26px; }

.ng-plat__num { font-family: var(--ng-titulo); font-weight: 700; color: var(--ng-branco); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }

.ng-plat__nome { color: var(--ng-tinta-fraca); font-size: .82rem; }

.ng-grade-novidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2.4vw, 28px); }

.ng-criadores { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 28px); }

.ng-cartao-cta {
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-radius: var(--ng-raio);
	padding: clamp(26px, 4vw, 40px);
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}

.ng-cartao-cta__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(158,219,254,.12); color: var(--ng-destaque); }

.ng-cartao-cta__ico svg { width: 26px; height: 26px; }

.ng-cartao-cta__titulo { font-family: var(--ng-titulo); font-weight: 600; color: var(--ng-branco); font-size: 1.35rem; margin: 0; }

.ng-cartao-cta__desc { margin: 0; color: var(--ng-tinta-fraca); line-height: 1.6; }

.ng-cartao-cta .ng-btn { margin-top: auto; }

/* Segunda saída do cartão (hoje: o formulário do programa Nuntius Gamer,
   depois que o botão principal passou a ser o Contato). Link de texto, e
   não um segundo botão, porque duas peças do mesmo peso lado a lado fazem
   a pessoa parar para escolher , o botão é a saída recomendada, esta é a
   alternativa. O `margin-top:auto` do botão acima já encosta os dois no pé
   do cartão; o `gap` do flex cuida do espaço entre eles. */
.ng-cartao-cta__alt {
	color: var(--ng-tinta-fraca);
	font-size: .86rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--ng-transicao);
}

.ng-cartao-cta__alt:hover,
.ng-cartao-cta__alt:focus-visible { color: var(--ng-destaque); }

@media (prefers-reduced-motion: reduce) { .ng-cartao-cta__alt { transition: none; } }

@media (max-width: 720px) { .ng-criadores { grid-template-columns: 1fr; } }

.ng-pitch {
	background:
		radial-gradient(1200px 400px at 50% -10%, rgba(158,219,254,.14), transparent 60%),
		var(--ng-fundo-2);
	border-top: 1px solid var(--ng-borda, rgba(255,255,255,.06));
	border-bottom: 1px solid var(--ng-borda, rgba(255,255,255,.06));
}

.ng-pitch__interno { text-align: center; display: flex; flex-direction: column; align-items: center; }

.ng-pitch__titulo { font-family: var(--ng-titulo); font-weight: 700; color: var(--ng-branco); font-size: clamp(1.8rem, 1rem + 3.6vw, 3rem); margin: 0 0 12px; line-height: 1.05; }

.ng-pitch__titulo b { color: var(--ng-destaque); font-weight: inherit; }

.ng-pitch__desc { max-width: 60ch; margin: 0 0 28px; color: var(--ng-tinta-fraca); line-height: 1.6; font-size: clamp(1rem, .95rem + .4vw, 1.15rem); }

.ng-pitch__acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (prefers-reduced-motion: reduce) {

	.ng-btn, .ng-servico, .ng-link-mais svg,
	.ng-bn-destaque, .ng-bn-destaque__img, .ng-bn-item { transition: none; }

	.ng-bn-destaque:hover, .ng-bn-item:hover { transform: none; }

	.ng-bn-destaque:hover .ng-bn-destaque__img { transform: none; }

}

/* =====================================================================
   1. HERO , vídeo de gameplay em loop (pedido 1 do dono)
   =====================================================================
   O <video> fica SOBRE a <img>, que continua sendo o LCP da página. O
   vídeo entra com opacity 0 e só aparece (.esta-tocando) quando de fato
   começou a tocar , sem isso, um vídeo que não carrega deixaria um
   retângulo preto por cima da arte do jogo.

   pointer-events:none no vídeo é regra de sobrevivência dos botões: um
   elemento cobrindo o slide inteiro engoliria o clique de "Saiba mais".
   ===================================================================== */
.ng-hero { position: relative; background: var(--ng-fundo); }

.ng-hero__viewport { position: relative; overflow: hidden; }

.ng-hero__track {
	display: flex;
	will-change: transform;
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
	touch-action: pan-y;
}

.ng-hero__track.ng-sem-transicao { transition: none; }

.ng-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	/*
	 * O PALCO ENCOLHEU (o dono sugeriu: *"provavelmente o caminho e diminuir o
	 * tamanho do video"*). 68vh num monitor de 1080 dava 734px de altura para um
	 * conjunto de texto que ocupa ~380 -- o resto era vao, e vao e o que faz o
	 * conteudo parecer solto. 56vh deixa a faixa cheia sem cortar o gameplay.
	 */
	/*
	 * OS TETOS EM `rem`, e não em px, para o palco acompanhar a escala da tela
	 * grande (ver o comentário do `html` em style.css). 29.375rem/41.25rem valem
	 * 470px/660px na raiz de 16px , os mesmos números de antes, AO PIXEL , e viram
	 * 705px/990px num 4K, onde a raiz cresce.
	 */
	height: clamp(29.375rem, 62vh, 41.25rem);
	overflow: hidden;
}

/* imagem (poster/LCP) e vídeo ocupam exatamente a mesma caixa */
.ng-hero__img,
.ng-hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/*
	 * A JANELA OLHA PARA BAIXO. `cover` corta o que sobra, e o padrao (`center`)
	 * corta metade em cima e metade embaixo -- num gameplay isso descarta
	 * justamente o chao, o personagem e a acao, e mantem o ceu. 72% joga o corte
	 * para o rodape do quadro. Pedido do dono: *"tem que por a visao mais pra
	 * baixo, mais pra parte inferior do video pra mostrar melhor o conteudo"*.
	 */
	object-position: center 72%;
	display: block;
}

.ng-hero__video {
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
	z-index: 1;
}

.ng-hero__video.esta-tocando { opacity: 1; }

.ng-hero__veu {
	position: absolute; inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.45) 60%, var(--ng-fundo) 100%),
		linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.35) 38%, rgba(10,10,12,.05) 55%, rgba(10,10,12,.55) 82%, rgba(10,10,12,.80) 100%);
}

.ng-hero__conteudo {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	/*
	 * `stretch` e nao `center`: a grade passa a ocupar a altura toda do palco, e
	 * sao as COLUNAS que se distribuem dentro dela. Com `center` o conjunto
	 * ficava do tamanho do conteudo e sobrava vao em cima e embaixo -- era o
	 * "texto meio que flutuando" e o "monte de linha pulada" do relato.
	 *
	 * O respiro de baixo reserva a faixa dos controles, para eles nunca
	 * encostarem no cartao.
	 */
	/*
	 * `end` e nao `stretch`: a linha da grade fica do tamanho do CONTEUDO e
	 * ancorada no rodape da area util. Com `stretch` a linha ficava do tamanho da
	 * area, e quando o texto era um pouco mais alto que ela (medido: 4px) o
	 * excedente vazava PARA BAIXO, em cima dos controles. Ancorada pelo fim, o
	 * que sobra vai para CIMA -- onde so ha video.
	 */
	align-content: end;
	/*
	 * O respiro de baixo reserva a faixa dos controles -- e SO ela. 104px (o
	 * valor anterior) era mais que o dobro da altura deles (42px), e essa sobra
	 * empurrava o conteudo para fora da area util: medido, o bloco de texto
	 * ficava 96px mais alto que o espaco disponivel e passava POR CIMA das
	 * bolinhas. Agora sao os 42px deles mais um respiro.
	 */
	padding: clamp(24px, 4vw, 2.75rem) 0 clamp(76px, 7vw, 5.75rem);
	pointer-events: none;   /* o palco continua clicavel por baixo */
}

/* Os filhos voltam a receber clique: so o vao entre eles e que atravessa. */
.ng-hero__conteudo a,
.ng-hero__conteudo button { pointer-events: auto; }

/*
 * AS DUAS COLUNAS. `end` no eixo vertical alinha o rodape das duas -- e o que
 * faz a linha dos generos e a do botao terminarem na mesma altura, que e o
 * que da a sensacao de conjunto no conceito que o dono mandou.
 */
.ng-hero__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(24px, 5vw, 72px);
	/*
	 * As duas colunas centram na altura do palco. `end` (que era o valor antigo)
	 * so faz sentido quando a grade tem a altura do conteudo; agora que ela tem
	 * a altura do palco, `end` empurraria tudo para o rodape e deixaria um vao
	 * enorme em cima -- o oposto do encaixe pedido.
	 */
	/*
	 * AS DUAS COLUNAS ALINHAM PELO RODAPE.
	 *
	 * Com `center` (o valor anterior) cada coluna centrava na altura do palco, e
	 * como elas tem alturas MUITO diferentes -- a fala tem quatro linhas de
	 * titulo mais o paragrafo, a ficha tem uma capsula e duas linhas -- os dois
	 * blocos comecavam e terminavam em pontos diferentes. Era o "muito
	 * desalinhado" do relato: o texto parecia no meio e a ficha la embaixo.
	 *
	 * Pelo rodape, os dois terminam na mesma linha e o conjunto le como uma faixa
	 * so, com os controles logo abaixo.
	 */
	align-items: end;
}


/* ---------------------------------------------------- coluna da esquerda */

.ng-hero__fala { max-width: 100%; }

.ng-hero__fala-titulo {
	font-family: var(--ng-titulo);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ng-branco);
	/*
	 * MAIOR, e da para ser: com uma palavra por linha (o <span> abaixo) a quebra
	 * nao depende mais da largura da coluna, entao aumentar o corpo nao arrisca
	 * uma palavra sozinha na quarta linha. Pedido do dono.
	 */
	line-height: .88;
	letter-spacing: -.02em;
	/*
	 * O TAMANHO OLHA AS DUAS DIMENSOES.
	 *
	 * So com `vw`, o titulo crescia com a LARGURA enquanto o palco cresce com a
	 * ALTURA -- e numa tela larga e baixa (medido em 1280x800) as quatro linhas
	 * ficavam 42px mais altas que a area util e a primeira palavra era CORTADA no
	 * topo. O termo em `vh` amarra o corpo da fonte ao espaco que existe de fato.
	 */
	font-size: clamp(2.2rem, .8rem + 3.1vw + 1.5vh, 5rem);
	margin: 0 0 clamp(16px, 2.2vw, 26px);
	text-shadow: 0 2px 28px rgba(0,0,0,.55);
}

.ng-hero__fala-palavra { display: block; }

.ng-hero__fala-texto {
	color: var(--ng-tinta);
	font-size: clamp(.95rem, .88rem + .3vw, 1.06rem);
	line-height: 1.55;
	margin: 0 0 clamp(18px, 2.4vw, 28px);
	max-width: 42ch;
	text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

.ng-hero__fala-botao { display: inline-flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------ coluna da direita */

.ng-hero__cartao {
	justify-self: end;
	text-align: right;
	max-width: 420px;
}


/*
 * A CAPSULA e o nome do jogo aqui (o dono tirou o titulo escrito de proposito).
 * A altura e travada e a largura sai dela: capsula da Steam e sempre 231x87,
 * mas jogo com arte fora do padrao nao pode empurrar a coluna e desalinhar as
 * duas metades.
 */
.ng-hero__capsula-link { display: inline-block; }

.ng-hero__capsula {
	display: block;
	height: clamp(72px, 8vw, 112px);
	width: auto;
	max-width: 100%;
	margin: 0 0 clamp(12px, 1.6vw, 18px);
	filter: drop-shadow(0 6px 26px rgba(0,0,0,.55));
}

/* Linha 1: data e plataformas. */
.ng-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 10px;
	color: var(--ng-tinta);
}

.ng-hero__data {
	font-family: var(--ng-titulo);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ng-branco);
}

.ng-hero__plataformas { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; }

.ng-hero__plat {
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ng-tinta-fraca);
}

.ng-hero__plat + .ng-hero__plat::before {
	content: "";
	display: inline-block;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 10px;
	vertical-align: middle;
	opacity: .7;
}

/* Linha 2: os generos, ABAIXO da data e da plataforma (pedido do dono). */
.ng-hero__generos {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
}

.ng-hero__generos .ng-chip { background: rgba(255,255,255,.10); }

.ng-hero__titulo {
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	line-height: 1.02;
	font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
	margin: 0 0 14px;
	text-shadow: 0 2px 24px rgba(0,0,0,.5);
}

/* Uma tela so nao comporta duas colunas: viram duas linhas, tudo a esquerda. */
@media (max-width: 900px) {
	.ng-hero__grade { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
	.ng-hero__cartao { justify-self: start; text-align: left; }
	.ng-hero__meta,
	.ng-hero__generos { justify-content: flex-start; }
	.ng-hero__fala { max-width: none; }
}

/* selo discreto de "isto é gameplay ao vivo" */
.ng-hero__selo-video {
	position: absolute;
	top: clamp(12px, 2vw, 22px);
	right: clamp(12px, 2vw, 22px);
	z-index: 3;
	display: none;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--ng-raio-pill, 999px);
	background: rgba(10,10,12,.55);
	border: 1px solid var(--ng-borda-forte, rgba(255,255,255,.14));
	color: var(--ng-tinta);
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.ng-hero__slide.tem-video-tocando .ng-hero__selo-video { display: inline-flex; }

.ng-hero__selo-video::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ng-ok);
}

/* setas e bolinhas */
/*
 * OS CONTROLES (pedido do dono: "o gerenciamento do carrossel ... na direita").
 * Antes as setas ficavam grudadas nas bordas da tela e os pontos centrados
 * embaixo -- tres pecas em tres cantos diferentes. Agora sao um bloco so,
 * alinhado com a coluna da ficha.
 */
.ng-hero__controles {
	position: absolute;
	z-index: 4;
	right: max(clamp(16px, 4vw, 40px), calc((100vw - var(--ng-max)) / 2 + clamp(16px, 4vw, 40px)));
	/*
	 * Colados no rodape do palco. O vao entre a ficha e eles era o "monte de
	 * linha pulada" do relato -- ele existia porque o conteudo centrava e os
	 * controles ficavam presos embaixo, sem nada entre os dois.
	 */
	bottom: clamp(18px, 2.4vw, 28px);
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 22px);
}

.ng-hero__setas { display: flex; gap: 8px; }

.ng-hero__seta {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: var(--ng-raio-pill, 999px);
	border: 1px solid var(--ng-borda-forte, rgba(255,255,255,.22));
	background: rgba(10,10,12,.45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ng-hero__seta:hover { background: var(--ng-destaque); color: #06222f; border-color: var(--ng-destaque); }

.ng-hero__seta:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; }

.ng-hero__seta svg { width: 20px; height: 20px; }

.ng-hero__pontos { display: flex; gap: 9px; }

.ng-hero__ponto {
	width: 9px; height: 9px; border-radius: var(--ng-raio-pill, 999px);
	border: 0; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.34);
	transition: background-color .18s ease, width .2s ease;
}

.ng-hero__ponto[aria-current="true"] { background: var(--ng-destaque); width: 24px; }

.ng-hero__ponto:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; }

@media (max-width: 900px) {
	.ng-hero__controles { right: 16px; left: 16px; justify-content: flex-start; }
}

.ng-hero--vazio { display: grid; place-items: center; min-height: clamp(340px, 46vh, 520px); text-align: center; }

.ng-hero--vazio .ng-hero__titulo { text-shadow: none; }

@media (max-width: 640px) {
	.ng-hero__seta { display: none; }

	.ng-hero__slide { height: clamp(420px, 74vh, 620px); }
}

/* =====================================================================
   7. MOVIMENTO REDUZIDO , as transições que sobram.
      ATENÇÃO: o vídeo e o giro do carrossel NÃO param mais aqui. Decisão do
      dono ("ele tem que rolar direto pra todos"), aplicada no home-heroi.js.
      Este bloco cuida só de transição de CSS.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ng-hero__track { transition: none; }

	.ng-hero__video { transition: none; }
}

/* ---------------------------------------------------------------------------
 * As DUAS regras que o pedido do dono exigiu, e só elas.
 *
 * Tudo mais do hero é o CSS original, restaurado. O arquivo tinha chegado a 63
 * regras de hero contra as 37 originais: as antigas, as de um redesenho que o
 * dono recusou e as minhas, coladas duas vezes. CSS repetido não dá erro , a
 * última ganha , e o resultado foi corte apertado, texto fora do lugar e vídeo
 * escondido. Ao mexer aqui, some com a regra em vez de acrescentar outra.
 * ------------------------------------------------------------------------- */

/* 1) A cápsula acima do nome. Só tamanho: a arte já vem pronta da Steam. */


/* 2) Clicar na arte entra no jogo: link esticado sobre o palco, ATRÁS do
      conteúdo , por isso o conteúdo sobe de camada, senão o link cobriria o
      texto e os links de dentro parariam de funcionar. */
/*
 * O link do palco fica na camada 1. Não precisa mexer em mais nada: o
 * .ng-hero__conteudo original já é position:absolute com z-index:3, ou seja
 * o texto e os links de dentro já ficam por cima. As regras que eu tinha posto
 * aqui para "garantir" isso (position:relative em todo descendente) mexiam no
 * layout inteiro e foram o que desalinhou o texto.
 */
.ng-hero__palco-link { position: absolute; inset: 0; z-index: 1; }
.ng-hero__link { color: inherit; text-decoration: none; }
.ng-hero__link:hover,
.ng-hero__link:focus-visible { text-decoration: underline; }


/* =====================================================================
   AVISO DE BASTIDOR NO HERO , so quem edita ve
   =====================================================================
   Um slide com imagem parada e identico a um slide com clipe que nao
   carregou. Este aviso separa os dois casos para quem pode consertar, e
   some para o visitante (a guarda e no PHP, nao aqui). */
.ng-hero__aviso-admin{
	position:absolute;left:16px;right:16px;bottom:16px;z-index:4;
	display:flex;flex-direction:column;gap:4px;
	margin:0;padding:10px 14px;
	background:rgba(16,16,18,.86);
	border:1px solid var(--ng-borda,rgba(255,255,255,.14));
	border-radius:var(--ng-raio-sm,8px);
	font-size:.78rem;line-height:1.4;color:var(--ng-tinta);
	backdrop-filter:blur(6px);
}
.ng-hero__aviso-admin strong{color:var(--ng-branco)}
.ng-hero__aviso-admin span{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:.72rem;color:var(--ng-tinta-fraca);word-break:break-all;
}

/* ---------------------------------------------------------------------------
   9. DEPOIMENTOS DOS ESTÚDIOS — os mesmos cartões, agora numa fileira que rola
   ---------------------------------------------------------------------------
   Pedido do dono: *"os depoimentos precisa ser possível cadastrar mais de 4 e
   eles serem exibidos em roll lateral similar aos cards dos jogos na página
   inicial"*.

   ESTE CÓDIGO VEIO DE UM `<style>` INLINE dentro de partials/depoimentos-devs.php,
   quase inteiro e de propósito , o desenho dos cartões já estava bom e já foi
   visto no ar. O que mudou é só o que a fileira exige (a grade virou trilho) e
   onde ele mora.

   POR QUE ELE SAIU DE LÁ: o comentário que o justificava dizia que "quem
   enfileira folha nova é functions.php, que é compartilhado" , ou seja, um
   arquivo novo em assets/css/ ficaria sem estilo até alguém mexer lá. Essa razão
   ENVELHECEU: `ng_folha()` nasceu exatamente para um partial pedir a folha dele
   sem tocar em `ng_enfileirar()`, e é o que este partial faz agora.

   E manter os dois lugares deixou de ser inofensivo no instante em que o bloco
   passou a depender do trilho: o `<style>` inline é impresso DEPOIS das folhas,
   então ele vencia qualquer ajuste feito aqui , calado. Foi o que aconteceu
   nesta entrega: a grade inline continuou empilhando os cartões e a fileira que
   rola simplesmente não apareceu, com o CSS certo servido e tudo.
   ------------------------------------------------------------------------ */

/* A PISTA. Onde havia `display:grid` com `auto-fit`, agora manda o trilho , as
   colunas viram largura de cartão, e o resto rola. Menos colunas que a fileira
   de jogos porque aqui o cartão é texto, e texto espremido em quatro colunas
   vira coluna de jornal. A fração ,1 deixa o cartão seguinte aparecendo na
   borda, que é o que conta para o dedo que aquilo rola. */
.ng-depoimentos { --ng-trilho-cols: 1.1; }

@media (min-width: 700px)  { .ng-depoimentos { --ng-trilho-cols: 2.15; } }

@media (min-width: 1080px) { .ng-depoimentos { --ng-trilho-cols: 3.15; } }

/* `margin:0` porque isto é um `<figure>`, e figure nasce com 1em de margem dos
   dois lados no navegador , dentro da pista, isso vira um vão que ninguém
   pediu e que some com o alinhamento do scroll-snap. */
.ng-depoimento {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio);

	/* A elevação no hover é o que os cartão de jogo já faz (`.ng-card`), e o
	   pedido foi "similar aos cards dos jogos". `focus-within` junto para quem
	   chega pelo teclado ver a mesma resposta que o mouse vê. */
	transition:
		transform var(--ng-transicao),
		box-shadow var(--ng-transicao),
		border-color var(--ng-transicao);
}

.ng-depoimento:hover,
.ng-depoimento:focus-within {
	transform: translateY(-4px);
	border-color: var(--ng-borda-forte);
	box-shadow: var(--ng-sombra-forte);
}

.ng-depoimento__aspas { display: block; width: 26px; height: 26px; color: var(--ng-destaque); opacity: .85; }

.ng-depoimento__texto { margin: 0; color: var(--ng-tinta); font-size: .98rem; line-height: 1.7; }

/* `margin-top:auto` empurra a assinatura para o rodapé do cartão: numa fileira,
   os cartões têm a mesma altura e os textos têm tamanhos diferentes , sem isto,
   cada nome ficaria numa altura, e a fileira lida como desalinhada. */
.ng-depoimento__quem { display: flex; align-items: center; gap: 12px; margin-top: auto; font-style: normal; line-height: 1.5; }

/* O círculo do estúdio. `flex:none` para ele nunca ser espremido por um nome
   comprido, e `overflow:hidden` + `object-fit:cover` para a logo preencher o
   círculo inteiro sem deformar (logo retangular perde as pontas, não estica). */
.ng-depoimento__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, var(--ng-fundo-3), var(--ng-fundo-2)); border: 1px solid var(--ng-borda-forte); }
.ng-depoimento__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.ng-depoimento__inicial { font-family: var(--ng-titulo); font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--ng-destaque); }

/* `min-width:0` deixa o nome quebrar dentro da coluna em vez de empurrar o
   círculo para fora do cartão. */
.ng-depoimento__identidade { min-width: 0; }
.ng-depoimento__nome { display: block; font-family: var(--ng-titulo); font-weight: 600; color: var(--ng-branco); letter-spacing: .02em; }
.ng-depoimento__estudio { display: block; color: var(--ng-destaque); font-size: .86rem; font-weight: 500; }
.ng-depoimento__jogo { display: block; color: var(--ng-tinta-fraca); font-size: .8rem; }

.ng-depoimento--rascunho { border-style: dashed; border-color: var(--ng-borda-forte); }
.ng-depoimento__pendencia { margin: 0; padding: 8px 12px; border-radius: var(--ng-raio-sm); background: var(--ng-fundo-3); color: var(--ng-tinta-fraca); font-size: .78rem; line-height: 1.5; }