/* =====================================================================
   componentes.css , os blocos visuais que o site inteiro reusa.
   As classes documentadas do CONTRATO (os outros agentes usam estas):
     .ng-container   → largura/respiro do conteúdo   (base em style.css)
     .ng-secao       → respiro vertical de uma seção  (base em style.css)
     .ng-titulo-secao→ o par "kicker + título" de topo de seção  (aqui)
     .ng-grade       → grade responsiva auto-fit       (aqui)
     .ng-botao       → botão/CTA, com variantes         (aqui)
     .ng-card        → cartão com gradiente e sombra    (aqui)
     .ng-tag         → etiqueta/pílula pequena          (aqui)
   Cor nenhuma é literal: tudo sai dos tokens de :root (style.css §1).
   ===================================================================== */

/* ---------------------------------------------------------------------
   O convite ao criador, embaixo de TODO campo de e-mail de mailing
   (partials/link-criador.php: barra da home, rodape e pagina de cadastro).

   Discreto de proposito: e um caminho lateral e nao pode competir com o
   botao de cadastrar -- quem veio assinar a newsletter tem de assinar.
   --------------------------------------------------------------------- */
.ng-criador-convite{margin:10px 0 0;font-size:.85rem;line-height:1.5}
.ng-criador-convite__link{color:var(--ng-tinta-fraca);text-decoration:underline;text-underline-offset:3px}
.ng-criador-convite__link:hover,
.ng-criador-convite__link:focus-visible{color:var(--ng-destaque)}

/* ---------------------------------------------------------------------
   TÍTULO DE SEÇÃO , kicker no azul da marca + título em Oswald grande.
   --------------------------------------------------------------------- */
.ng-titulo-secao {           /* o cabeçalho de uma seção (kicker + h2 + texto) */
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: var(--ng-titulo-gap);   /* dono do valor: :root do style.css */
}
/*
 * ⚠️ ESTA CLASSE TEM DOIS USOS NO TEMA, E ELES PEDEM ESPAÇAMENTO OPOSTO.
 *
 *  (a) como <div>: é o cabeçalho INTEIRO da seção (kicker + h2 + texto), solto
 *      dentro do container. O respiro até o conteúdo é DELE — é a regra acima.
 *      Sete partials usam assim (page-quemsomos, socios-bio, depoimentos-devs,
 *      bloco-servicos, page-desenvolvedores, index, archive-nuntius_jogo).
 *
 *  (b) como <h2>: é só o TÍTULO, dentro de um invólucro que já dá o respiro.
 *      Nove partials usam assim (vitrine-jogos, bloco-novidades, bloco-numeros,
 *      bloco-criadores, bloco-sobre, mais-jogos, patchnotes-todos,
 *      formulario-pitch, faq-lista).
 *
 * O zero do caso (b) mora no `home.css`, e SÓ LÁ, de propósito — ver o
 * comentário longo naquele arquivo. Não traga essa regra para cá: o caso (b)
 * também aparece em páginas que não carregam home.css (formulario-pitch em
 * /o-que-fazemos e /desenvolvedores), e nelas o h2 depende da margem acima
 * para não colar no próprio subtítulo. MEDIDO: zerar aqui levou esse vão de
 * 52px para 0.
 */
.ng-titulo-secao--centro { align-items: center; text-align: center; }

.ng-kicker {                 /* a "sobrancelha" acima do título, na cor da marca */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ng-destaque);
}
.ng-kicker::before {
	content: '';
	width: 26px;
	height: 2px;
	background: linear-gradient(90deg, var(--ng-destaque), transparent);
}
.ng-titulo-secao--centro .ng-kicker::before { display: none; }

.ng-titulo-secao__texto {
	max-width: 62ch;
	color: var(--ng-tinta-fraca);
}

/* ---------------------------------------------------------------------
   GRADE , colunas responsivas que se ajustam sozinhas (mobile-first).
   Modificadores controlam a largura mínima de cada célula.
   --------------------------------------------------------------------- */
.ng-grade {                  /* grade responsiva auto-fit; use os modificadores de largura */
	display: grid;
	gap: var(--ng-gap);
	grid-template-columns: 1fr;
}
.ng-grade--cards   { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ng-grade--largo   { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.ng-grade--estreito{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.ng-grade--2       { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.ng-grade--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   BOTÃO / CTA , primário (azul da marca, texto escuro), fantasma e linha.
   --------------------------------------------------------------------- */
.ng-botao {                  /* botão/CTA base; combine com --primario/--fantasma/--linha */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ng-branco);
	background: var(--ng-fundo-3);
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-pill);
	line-height: 1.1;
	text-align: center;
	transition:
		transform var(--ng-transicao),
		box-shadow var(--ng-transicao),
		background var(--ng-transicao),
		color var(--ng-transicao),
		border-color var(--ng-transicao);
}
.ng-botao:hover {
	color: var(--ng-branco);
	transform: translateY(-2px);
	box-shadow: var(--ng-sombra);
}
.ng-botao:active { transform: translateY(0); }
.ng-botao svg { width: 1.1em; height: 1.1em; }

/* primário: gradiente na cor da marca + texto escuro pra contraste alto */
.ng-botao--primario {
	color: var(--ng-fundo);
	background: linear-gradient(135deg, var(--ng-destaque), var(--ng-destaque-2));
	border-color: transparent;
}
.ng-botao--primario:hover {
	color: var(--ng-fundo);
	box-shadow: 0 12px 32px -10px rgba(158, 219, 254, .55);
}

/* fantasma: transparente com filete, para ações secundárias */
.ng-botao--fantasma {
	background: transparent;
	border-color: var(--ng-borda-forte);
}
.ng-botao--fantasma:hover {
	background: var(--ng-fundo-2);
	border-color: var(--ng-destaque);
}

/* linha: contorno na cor da marca */
.ng-botao--linha {
	background: transparent;
	color: var(--ng-destaque);
	border-color: var(--ng-destaque);
}
.ng-botao--linha:hover {
	background: var(--ng-destaque);
	color: var(--ng-fundo);
}

.ng-botao--sm   { padding: 9px 18px; font-size: .82rem; }
.ng-botao--lg   { padding: 16px 34px; font-size: 1.05rem; }
.ng-botao--bloco{ display: flex; width: 100%; }
.ng-botao[disabled], .ng-botao[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------
   CARD , superfície com gradiente sutil, sombra suave e leve elevação
   no hover. Sem borda dura: profundidade por gradiente + sombra.
   --------------------------------------------------------------------- */
.ng-card {                   /* cartão base: gradiente + sombra suave, eleva no hover */
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(160deg, var(--ng-fundo-2), var(--ng-fundo));
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio);
	overflow: hidden;
	transition:
		transform var(--ng-transicao),
		box-shadow var(--ng-transicao),
		border-color var(--ng-transicao);
}
.ng-card:hover {
	transform: translateY(-4px);
	border-color: var(--ng-borda-forte);
	box-shadow: var(--ng-sombra-forte);
}
/* quando o card inteiro é clicável, o link cobre a superfície */
.ng-card__link-total::after {
	content: '';
	position: absolute;
	inset: 0;
}
.ng-card__midia {
	position: relative;
	aspect-ratio: 460 / 215;   /* proporção do header.jpg da Steam */
	background: var(--ng-fundo-3);
	overflow: hidden;
}
.ng-card__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ng-transicao-lenta);
}
.ng-card:hover .ng-card__midia img { transform: scale(1.05); }
.ng-card__corpo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(16px, 2vw, 22px);
}
.ng-card__titulo {
	font-size: 1.15rem;
	color: var(--ng-branco);
}
.ng-card__texto {
	color: var(--ng-tinta-fraca);
	font-size: .92rem;
}

/* ---------------------------------------------------------------------
   TAG , pílula pequena para plataforma, gênero, status.
   --------------------------------------------------------------------- */
.ng-tag {                    /* etiqueta/pílula pequena (plataforma, gênero, status) */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	font-family: var(--ng-corpo);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ng-tinta);
	background: var(--ng-fundo-3);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-pill);
	white-space: nowrap;
}
.ng-tag--destaque { color: var(--ng-destaque); border-color: rgba(158, 219, 254, .35); }
.ng-tag--ok       { color: var(--ng-ok); border-color: rgba(110, 231, 168, .35); }
.ng-tag--alerta   { color: var(--ng-alerta); border-color: rgba(255, 84, 112, .35); }
.ng-lista-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* =====================================================================
   CABEÇALHO , fixo, translúcido com blur, ganha sombra ao rolar.
   ===================================================================== */
/*
 * O CABEÇALHO SAI DA FRENTE ENQUANTO O TRAILER TOCA.
 *
 * Pedido do dono: *"quando da o play no trailer as tags, o seletor de idioma e
 * o nome do jogo ficam na frente, então tem que tirar a opacidade enquanto está
 * rolando o trailer e voltar quando pausa"*.
 *
 * O que estava na frente do vídeo eram duas coisas de donos diferentes: o que a
 * própria faixa do trailer desenha por cima dele (o nome do jogo, as tags), que
 * `jogo.css` já resolve, e ESTE cabeçalho, que é `sticky` e passa a flutuar
 * sobre o vídeo assim que a página rola um pouco. Por isso a regra mora aqui e
 * não lá: quem some é o cabeçalho, e ele não é da página do jogo.
 *
 * Ele fica translúcido, não `display:none`. Sumir de vez tiraria o menu, o
 * seletor de idioma e a busca do alcance de quem está assistindo — e o vídeo
 * ocupa a tela inteira no topo, então a pessoa ficaria sem saída até rolar. Com
 * `opacity` ele continua ali para quem for atrás: encostar o mouse ou chegar de
 * teclado traz ele de volta na hora.
 *
 * `--ng-transicao` é a mesma duração do resto do site, para o cabeçalho não
 * destoar do véu do trailer, que desaparece junto.
 */
body.ng-trailer-tocando .ng-cabecalho {
	opacity: .12;
	transition: opacity var(--ng-transicao);
}

body.ng-trailer-tocando .ng-cabecalho:hover,
body.ng-trailer-tocando .ng-cabecalho:focus-within {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.ng-trailer-tocando .ng-cabecalho {
		transition: none;
	}
}

.ng-cabecalho {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ng-flutuante);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ng-transicao), background var(--ng-transicao);
}
.ng-cabecalho.is-rolado {
	border-bottom-color: var(--ng-borda);
	box-shadow: var(--ng-sombra);
}
.ng-cabecalho__interno {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	min-height: var(--ng-nav-altura);
}
.ng-marca {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin-right: auto;   /* empurra nav e ações para a direita */
}
.ng-marca img {
	height: 38px;
	width: auto;
}
.ng-marca:hover { opacity: .85; }

/* menu principal (desktop) */
.ng-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 22px);
}
.ng-nav__link,
.ng-nav__lista a {
	position: relative;
	display: inline-block;
	padding: 8px 4px;
	font-family: var(--ng-titulo);
	font-weight: 500;
	font-size: .96rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ng-tinta);
}
.ng-nav__lista a::after {
	content: '';
	position: absolute;
	left: 4px; right: 4px; bottom: 2px;
	height: 2px;
	background: var(--ng-destaque);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ng-transicao);
}
.ng-nav__lista a:hover,
.ng-nav__lista .current-menu-item > a,
.ng-nav__lista .current_page_item > a {
	color: var(--ng-branco);
}
.ng-nav__lista a:hover::after,
.ng-nav__lista .current-menu-item > a::after,
.ng-nav__lista .current_page_item > a::after {
	transform: scaleX(1);
}

.ng-acoes {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.4vw, 16px);
	flex-shrink: 0;
}

/* botão hambúrguer (só no mobile) */
.ng-hamburguer {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: var(--ng-raio-sm);
	color: var(--ng-branco);
}
.ng-hamburguer:hover { background: var(--ng-fundo-2); }
.ng-hamburguer__traco,
.ng-hamburguer__traco::before,
.ng-hamburguer__traco::after {
	content: '';
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--ng-transicao), opacity var(--ng-transicao);
}
.ng-hamburguer__traco { position: relative; }
.ng-hamburguer__traco::before { position: absolute; top: -7px; left: 0; }
.ng-hamburguer__traco::after  { position: absolute; top: 7px;  left: 0; }
.ng-hamburguer[aria-expanded="true"] .ng-hamburguer__traco { background: transparent; }
.ng-hamburguer[aria-expanded="true"] .ng-hamburguer__traco::before { transform: translateY(7px) rotate(45deg); }
.ng-hamburguer[aria-expanded="true"] .ng-hamburguer__traco::after  { transform: translateY(-7px) rotate(-45deg); }

/* véu + gaveta (mobile) */
.ng-veu {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: var(--ng-veu);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ng-transicao), visibility var(--ng-transicao);
}
.ng-veu.is-aberta { opacity: 1; visibility: visible; }

.ng-gaveta {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 120;
	width: min(86vw, 360px);
	height: 100%;
	padding: 24px;
	padding-top: calc(var(--ng-nav-altura) + 12px);
	background: var(--ng-flutuante-2);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-left: 1px solid var(--ng-borda);
	box-shadow: var(--ng-sombra-forte);
	/* fechada: fora da tela E invisível , visibility:hidden a tira do foco e
	   do leitor de tela sem precisar de atributo hidden (que mataria o slide). */
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--ng-transicao-lenta), visibility var(--ng-transicao-lenta);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ng-gaveta.is-aberta { transform: translateX(0); visibility: visible; }
.ng-gaveta__fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ng-tinta);
	border-radius: var(--ng-raio-sm);
}
.ng-gaveta__fechar:hover { background: var(--ng-fundo-2); color: var(--ng-branco); }
.ng-gaveta__nav .ng-nav__lista {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}
.ng-gaveta__nav .ng-nav__lista a {
	display: block;
	padding: 14px 6px;
	font-size: 1.05rem;
	border-bottom: 1px solid var(--ng-borda);
}
.ng-gaveta__nav .ng-nav__lista a::after { display: none; }
.ng-gaveta__acoes {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto;
}

/* trava a rolagem do corpo enquanto a gaveta está aberta */
body.ng-travado { overflow: hidden; }

/* =====================================================================
   SELETOR DE IDIOMA , <details> nativo (funciona sem JS), estilizado.
   ===================================================================== */
.ng-idiomas {
	position: relative;
}
.ng-idiomas__resumo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	font-size: .85rem;
	font-weight: 500;
	color: var(--ng-tinta);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-pill);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: border-color var(--ng-transicao), color var(--ng-transicao);
}
.ng-idiomas__resumo::-webkit-details-marker { display: none; }
.ng-idiomas__resumo:hover { color: var(--ng-branco); border-color: var(--ng-borda-forte); }
.ng-idiomas__resumo svg { width: 15px; height: 15px; }
.ng-idiomas__seta {
	transition: transform var(--ng-transicao);
}
.ng-idiomas[open] .ng-idiomas__seta { transform: rotate(180deg); }

.ng-idiomas__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 190px;
	padding: 8px;
	background: var(--ng-flutuante-2);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio);
	box-shadow: var(--ng-sombra-forte);
	z-index: 130;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ng-idiomas__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--ng-raio-sm);
	color: var(--ng-tinta);
	font-size: .92rem;
}
.ng-idiomas__item:hover { background: var(--ng-fundo-3); color: var(--ng-branco); }
.ng-idiomas__item[aria-current="true"] {
	color: var(--ng-destaque);
	background: var(--ng-fundo-2);
}
.ng-idiomas__item[aria-current="true"]::after {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ng-destaque);
}
.ng-idiomas__cod {
	font-size: .72rem;
	color: var(--ng-tinta-fraca);
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* dentro da gaveta o seletor abre em bloco, sem flutuar */
.ng-gaveta .ng-idiomas__menu {
	position: static;
	box-shadow: none;
	background: var(--ng-fundo-2);
	margin-top: 8px;
}

/* =====================================================================
   RODAPÉ , newsletter (POST no endpoint), redes SVG, colunas de links.
   ===================================================================== */
.ng-rodape {
	position: relative;
	margin-top: var(--ng-secao-pad);
	padding-top: clamp(48px, 7vw, 88px);
	padding-bottom: 32px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35));
	border-top: 1px solid var(--ng-borda);
}
.ng-rodape__topo {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 6vw, 72px);
	padding-bottom: clamp(40px, 6vw, 64px);
	border-bottom: 1px solid var(--ng-borda);
}
@media (min-width: 900px) {
	.ng-rodape__topo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr); }
}

/* --- bloco da newsletter --- */
.ng-news__titulo { margin-bottom: 8px; }
.ng-news__texto {
	color: var(--ng-tinta-fraca);
	margin-bottom: 20px;
	max-width: 46ch;
}
.ng-news__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 460px;
}
.ng-news__campo {
	flex: 1 1 220px;
	padding: 14px 18px;
	color: var(--ng-tinta);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-pill);
	transition: border-color var(--ng-transicao), box-shadow var(--ng-transicao);
}
.ng-news__campo::placeholder { color: var(--ng-tinta-fraca); }
.ng-news__campo:focus {
	outline: none;
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-foco);
}
/* honeypot anti-spam: fora da tela, invisível a gente, visível a robô */
.ng-news__mel {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}
.ng-news__status {
	width: 100%;
	margin-top: 12px;
	font-size: .9rem;
	min-height: 1.2em;
	color: var(--ng-tinta-fraca);
}
.ng-news__status[data-estado="ok"]    { color: var(--ng-ok); }
.ng-news__status[data-estado="erro"]  { color: var(--ng-alerta); }
.ng-news__status[data-estado="carregando"] { color: var(--ng-destaque); }
.ng-news__consent {
	width: 100%;
	margin-top: 12px;
	font-size: .78rem;
	color: var(--ng-tinta-fraca);
}
.ng-news__consent a { text-decoration: underline; text-underline-offset: 2px; }
/* botão em estado de carregando */
.ng-news__enviar.is-carregando { position: relative; color: transparent; }
.ng-news__enviar.is-carregando::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px; height: 18px;
	border: 2px solid rgba(16, 16, 18, .35);
	border-top-color: var(--ng-fundo);
	border-radius: 50%;
	animation: ng-girar .7s linear infinite;
}
@keyframes ng-girar { to { transform: rotate(360deg); } }

/* --- redes sociais (SVG inline, sem biblioteca de ícones) --- */
.ng-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.ng-redes__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--ng-tinta);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: 50%;
	transition: color var(--ng-transicao), background var(--ng-transicao),
		border-color var(--ng-transicao), transform var(--ng-transicao);
}
.ng-redes__link:hover {
	color: var(--ng-fundo);
	background: var(--ng-destaque);
	border-color: var(--ng-destaque);
	transform: translateY(-2px);
}
.ng-redes__link svg { width: 19px; height: 19px; }

/* --- colunas de navegação do rodapé --- */
.ng-rodape__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 56px);
}
@media (min-width: 640px) {
	.ng-rodape__cols { grid-template-columns: repeat(3, 1fr); }
}
.ng-rodape__col h4 {
	margin-bottom: 16px;
	font-size: .9rem;
	letter-spacing: .12em;
	color: var(--ng-branco);
}
.ng-rodape__col ul { display: flex; flex-direction: column; gap: 10px; }
.ng-rodape__col a {
	color: var(--ng-tinta-fraca);
	font-size: .92rem;
}
.ng-rodape__col a:hover { color: var(--ng-destaque); }

/* --- base do rodapé: marca, copyright, redes --- */
.ng-rodape__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 28px;
}
.ng-rodape__marca {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.ng-rodape__marca img { height: 30px; width: auto; }
.ng-rodape__direitos {
	color: var(--ng-tinta-fraca);
	font-size: .82rem;
}
/* links legais (Privacidade/Termos) , linha discreta na base do rodapé,
   junto do copyright, em vez de uma 4ª coluna que sobraria sozinha na
   grade de 3 colunas (.ng-rodape__cols). */
.ng-rodape__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .82rem;
}
.ng-rodape__legal a { color: var(--ng-tinta-fraca); }
.ng-rodape__legal a:hover { color: var(--ng-destaque); }

/* =====================================================================
   ESTADO VAZIO , quando um filtro/busca não devolve nada.
   ===================================================================== */
.ng-vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	padding: clamp(48px, 9vw, 96px) 20px;
	color: var(--ng-tinta-fraca);
}
.ng-vazio__icone {
	width: 56px; height: 56px;
	color: var(--ng-destaque);
	opacity: .8;
}
.ng-vazio__titulo { color: var(--ng-branco); }

/* =====================================================================
   PÁGINA 404 e listagem genérica (index.php)
   ===================================================================== */
.ng-erro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	padding-block: clamp(60px, 12vw, 140px);
}
.ng-erro__cod {
	font-family: var(--ng-titulo);
	font-weight: 700;
	font-size: clamp(5rem, 20vw, 12rem);
	line-height: .9;
	background: linear-gradient(160deg, var(--ng-destaque), var(--ng-destaque-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.ng-erro__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* cartão de listagem genérica do index (fallback do arquivo) */
.ng-artigo__meta {
	display: inline-block;
	margin-bottom: 6px;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ng-destaque);
}

/* =====================================================================
   PAGINAÇÃO , envolve the_posts_pagination() (index.php). Tema não a
   classes; herda os nomes padrão do WP (.page-numbers) só DENTRO do
   escopo .ng-paginacao, então não briga com nada fora dele.
   ===================================================================== */
.ng-paginacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(32px, 5vw, 56px);
}
.ng-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	color: var(--ng-tinta);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-sm);
	font-size: .88rem;
	transition: border-color var(--ng-transicao), color var(--ng-transicao), background var(--ng-transicao);
}
.ng-paginacao a.page-numbers:hover {
	color: var(--ng-branco);
	border-color: var(--ng-borda-forte);
}
.ng-paginacao .page-numbers.current {
	color: var(--ng-fundo);
	background: var(--ng-destaque);
	border-color: var(--ng-destaque);
	font-weight: 600;
}
.ng-paginacao .page-numbers.dots {
	background: none;
	border-color: transparent;
	color: var(--ng-tinta-fraca);
}
.ng-paginacao .prev.page-numbers,
.ng-paginacao .next.page-numbers {
	padding-inline: 16px;
}

/* =====================================================================
   BREAKPOINTS DE NAVEGAÇÃO , mobile-first (640 / 900 / 1200)
   ===================================================================== */

/* abaixo de 900px: menu vira gaveta */
@media (max-width: 899px) {
	.ng-nav--desktop { display: none; }
	.ng-cabecalho__cta { display: none; }        /* o CTA vai pra dentro da gaveta */
	.ng-acoes .ng-idiomas { display: none; }     /* idem o seletor de idioma */
	.ng-hamburguer { display: inline-flex; }
}

/* de 900px pra cima: sem gaveta */
@media (min-width: 900px) {
	.ng-gaveta, .ng-veu { display: none; }
}

/* ---------------------------------------------------------------------------
 * A LOGOMARCA, exatamente como o arquivo é.
 *
 * MEDIDO no PNG: a borda dele já é ESCURA (21,16,25) e o branco só começa
 * ~10px para dentro , ou seja, o anel branco faz parte do desenho, e o arquivo
 * não tem margem nenhuma em volta (o desenho ocupa os 811×1049 inteiros).
 *
 * Eu tinha acrescentado fundo branco + respiro + cantos arredondados, achando
 * que uma arte de fundo claro precisaria disso no site escuro. Não precisa, e
 * o dono viu na hora: aquilo virava uma borda branca grande em volta que não
 * existe na marca. Saiu. Aqui só fica o TAMANHO , nada que mude a aparência.
 * ------------------------------------------------------------------------- */
.ng-marca img {
	display: block;
	height: 60px;
	width: auto;               /* a proporção é a do arquivo (811×1049) */
}

@media (max-width: 720px) {
	.ng-marca img { height: 46px; }
}

/* A mesma marca no rodapé. */
.ng-rodape__marca img,
.ng-rodape img[src*="logo-nuntius"] {
	height: 34px;
	width: auto;
}

/* =====================================================================
   TOPO DE SEÇÃO E LINK "VER MAIS" — as primitivas que toda tela usa.

   Vieram de home.css (leva de 20/08). Elas estavam lá porque a Home foi a
   primeira tela a existir, não porque sejam dela: `.ng-secao--faixa` pinta a
   faixa alternada de qualquer seção, `.ng-olho`/`.ng-secao__cabecalho` montam
   o par "sobrancelha + título", e `.ng-link-mais` é a seta de "ver tudo".

   O CUSTO DE FICAREM LÁ, medido: a página de uma notícia não carrega home.css,
   então o `<svg>` do `.ng-link-mais` saiu SEM largura — e um SVG sem largura
   ocupa os 300×150 padrão do navegador. Era a "seta gigantesca" que o dono
   viu. Nenhum erro, nenhum aviso: só um bloco pelado.

   Aqui elas valem em todas as telas, porque componentes.css é enfileirada
   sempre (ver ng_enfileirar, passo 2).
   ===================================================================== */

.ng-secao--faixa { background: var(--ng-fundo-2); }

/* Seção de respiro menor — usada quando dois blocos precisam ficar próximos
   (a abertura de Quem Somos logo abaixo do título, por exemplo). */
.ng-secao--curta { padding-block: clamp(36px, 5vw, 72px); }

.ng-secao__cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: clamp(24px, 4vw, 44px);
}

.ng-secao__cabecalho--centro {
	justify-content: center;
	text-align: center;
	flex-direction: column;
	align-items: center;
}

.ng-olho {
	display: inline-block;
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ng-destaque);
	margin-bottom: 10px;
}

.ng-subtitulo-secao {
	margin: 14px 0 0;
	max-width: 62ch;
	color: var(--ng-tinta-fraca);
	/*
	 * A FONTE É DECLARADA, e não herdada — medido: na Home e no Quem Somos este
	 * mesmo texto saía em Oswald (a fonte de TÍTULO) e no resto do site em
	 * Poppins. A causa era o contêiner: `.ng-titulo-secao` tem papéis diferentes
	 * em componentes.css (envelope do par kicker+h2) e em home.css (o próprio
	 * título, com font-family), e o subtítulo herdava o que calhasse de estar
	 * em volta. Declarar aqui torna o resultado o mesmo em qualquer tela.
	 */
	font-family: var(--ng-corpo);
	font-size: clamp(.98rem, .9rem + .4vw, 1.12rem);
	line-height: 1.6;
}

.ng-link-mais {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ng-destaque);
	font-family: var(--ng-titulo);
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}

.ng-link-mais svg { width: 16px; height: 16px; transition: transform .18s ease; }

.ng-link-mais:hover svg { transform: translateX(4px); }

.ng-link-mais:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; border-radius: 4px; }