/*
Theme Name: GTAptbr
Theme URI: https://gtaptbr.com/
Author: GTAptbr
Description: Tema proprio do GTAptbr: wiki e noticias de Grand Theft Auto em portugues. Desenho inspirado na linguagem visual do site oficial de GTA VI — preto, imagem de bordo a bordo, tipografia art deco condensada e rosa como unico acento.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: gtaptbr
*/

/* ════════════════════════════════════════════════════════
   1. SISTEMA DE DESIGN
   ════════════════════════════════════════════════════════
   A paleta vem do site oficial de GTA VI: fundo preto puro,
   texto branco-sujo, rosa #f976b0 como unico acento vivo e um
   conjunto de tons dessaturados para as superficies. Nada de
   contornos grossos nem sombras duras — o peso vem da imagem.
   ════════════════════════════════════════════════════════ */
:root {
	/* fundos */
	--preto: #000;
	--n1: #08080a;
	--n2: #0e0e12;
	--n3: #16161c;
	--linha: rgba(255, 255, 255, .13);
	--linha-forte: rgba(255, 255, 255, .26);

	/* texto */
	--txt: #fdfdfd;
	--txt-dim: rgba(253, 253, 253, .64);
	--txt-fraco: rgba(253, 253, 253, .40);

	/* acentos */
	--rosa: #f976b0;
	--rosa-vivo: #ff4d9d;
	--ambar: #ffb43d;
	--vi: linear-gradient(100deg, #ff4d9d 0%, #ffb43d 100%);

	/* tons de seccao (retirados do site oficial) */
	--t-indigo: #2c3868;
	--t-vinho: #4d203e;
	--t-roxo: #4b2f54;
	--t-verde: #294235;
	--t-azul: #32637d;
	--t-magenta: #8d4053;

	/* forma */
	--raio: 8px;
	--raio-g: 16px;
	--pil: 999px;

	/* tipos */
	--display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--texto: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* ritmo */
	--gutter: 22px;
	--largura: 1340px;
	--sec: clamp(52px, 7vw, 104px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--preto);
	color: var(--txt);
	font-family: var(--texto);
	font-size: 16px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--txt); text-decoration: none; }
a:hover { color: var(--rosa); }

h1, h2, h3, h4, h5 {
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.012em;
	line-height: .96;
	margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.32rem; }
h4 { font-size: 1.02rem; letter-spacing: .04em; }

p { margin: 0 0 1.1em; }

::selection { background: var(--rosa-vivo); color: #000; }

:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }

.container {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

/* ── etiqueta: rotulo pequeno em versaletes ── */
.etiqueta {
	display: inline-block;
	font-family: var(--texto);
	font-size: .63rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--rosa);
	margin: 0 0 9px;
}
.etiqueta.amarelo { color: var(--ambar); }
.etiqueta.cyan { color: #7fd8ff; }

/* ── botao: pilula branca, como no site oficial ── */
.botao {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 26px;
	background: #fff;
	color: #000;
	border: 1px solid #fff;
	border-radius: var(--pil);
	font-family: var(--texto);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.botao:hover { background: var(--rosa); border-color: var(--rosa); color: #000; transform: translateY(-1px); }
.botao.fantasma { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.botao.fantasma:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.botao.amarelo { background: var(--ambar); border-color: var(--ambar); color: #000; }
.botao.amarelo:hover { background: #ffc767; border-color: #ffc767; color: #000; }

/* ── painel: superficie discreta ── */
.painel {
	background: var(--n2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
}

/* ── seccao ── */
.seccao { margin: var(--sec) 0; }
.seccao-titulo {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 26px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--linha);
}
.seccao-titulo h2 { margin: 0; }
.seccao-titulo h2 em { font-style: normal; color: var(--rosa); }
.seccao-titulo a {
	flex: 0 0 auto;
	font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--txt-dim);
}
.seccao-titulo a:hover { color: var(--rosa); }

.vazio { color: var(--txt-dim); padding: 40px 0; }
.vazio.painel { padding: 42px 32px; text-align: center; }
.vazio.painel h2 { margin-bottom: .3em; }
.vazio.painel p { margin-bottom: 1.4em; }

/* formulario de pesquisa das paginas de resultados */
.form-pesquisa { display: flex; gap: 9px; }
.form-pesquisa input {
	flex: 1 1 auto; min-width: 0;
	padding: 12px 18px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--linha); border-radius: var(--pil);
	color: #fff; font-family: var(--texto); font-size: .92rem; outline: none;
	transition: border-color .18s, background .18s;
}
.form-pesquisa input::placeholder { color: var(--txt-fraco); }
.form-pesquisa input:focus { border-color: var(--rosa); background: rgba(255, 255, 255, .11); }

/* ════════════════════════════════════════════════════════
   2. CABECALHO
   ════════════════════════════════════════════════════════ */
.cabecalho {
	position: sticky; top: 0; z-index: 90;
	background: rgba(0, 0, 0, .82);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--linha);
	transition: background .25s, border-color .25s;
}
/* Na homepage o cabecalho fica por cima do palco, como no site oficial: sai do
   fluxo (fixed) para a imagem comecar no topo do ecra, e ganha fundo solido
   assim que se rola. O palco compensa com espaco em cima. */
body.topo-transparente .cabecalho { position: fixed; top: 0; left: 0; right: 0; }
body.topo-transparente .cabecalho:not(.encolhido) {
	/* Veu forte no topo: por cima de uma imagem clara (o ceu de Vice City) um
	   gradiente fraco deixava o logotipo e o menu ilegiveis logo ao abrir. */
	background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .74) 42%, rgba(0, 0, 0, .34) 78%, rgba(0, 0, 0, 0) 100%);
	border-bottom-color: transparent;
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.topo-transparente .palco-conteudo { padding-top: 124px; }
body.topo-transparente .cabecalho.encolhido { background: rgba(0, 0, 0, .88); }
.cabecalho-inner {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 74px;
}

.marca { flex: 0 0 auto; display: flex; align-items: center; }
.marca img { height: 46px; width: auto; }
.marca-txt {
	font-family: var(--display);
	font-size: 1.6rem; font-weight: 900;
	text-transform: uppercase; letter-spacing: -.01em;
	color: #fff;
}
.marca-txt em {
	font-style: normal;
	background: var(--vi);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* navegacao */
.nav-principal { flex: 1 1 auto; min-width: 0; }
.nav-principal ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 4px;
}
.nav-principal li { position: relative; }
.nav-principal a {
	display: block;
	padding: 9px 12px;
	font-size: .72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .13em;
	color: var(--txt-dim);
	border-radius: var(--pil);
	white-space: nowrap;
	transition: color .16s, background .16s;
}
.nav-principal a:hover,
.nav-principal .current-menu-item > a,
.nav-principal .current-menu-parent > a { color: #fff; background: rgba(255, 255, 255, .08); }

/* submenus */
.nav-principal .sub-menu {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
	min-width: 220px;
	flex-direction: column; align-items: stretch; gap: 0;
	padding: 7px;
	background: #0b0b0e;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	box-shadow: 0 22px 48px rgba(0, 0, 0, .7);
	opacity: 0; visibility: hidden; transform: translateY(-5px);
	transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-principal li:hover > .sub-menu,
.nav-principal li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav-principal .sub-menu a { border-radius: 5px; letter-spacing: .09em; }

.menu-movel-btn {
	display: none;
	margin-left: auto;
	padding: 9px 16px;
	background: transparent; color: #fff;
	border: 1px solid var(--linha-forte); border-radius: var(--pil);
	font-family: var(--texto); font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .13em;
	cursor: pointer;
}

/* ── pesquisa ── */
.pesquisa-topo {
	flex: 0 0 auto;
	display: flex; align-items: center;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--linha);
	border-radius: var(--pil);
	overflow: hidden;
	transition: border-color .18s, background .18s;
}
.pesquisa-topo:focus-within { border-color: var(--rosa); background: rgba(255, 255, 255, .11); }
.pesquisa-topo input {
	width: 178px;
	padding: 9px 4px 9px 16px;
	background: transparent; border: 0; outline: none;
	color: #fff; font-family: var(--texto); font-size: .82rem;
}
.pesquisa-topo input::placeholder { color: var(--txt-fraco); }
.pesquisa-topo button {
	padding: 9px 14px 9px 8px;
	background: transparent; border: 0; cursor: pointer;
	color: var(--txt-dim); font-size: .9rem; line-height: 1;
}
.pesquisa-topo button:hover { color: var(--rosa); }

/* ── sugestoes da pesquisa instantanea ── */
.pesquisa-topo { position: relative; }
.sugestoes {
	position: absolute; top: calc(100% + 9px); right: 0; z-index: 95;
	width: min(400px, calc(100vw - 2 * var(--gutter)));
	padding: 7px;
	background: #0b0b0e;
	border: 1px solid var(--linha); border-radius: var(--raio);
	box-shadow: 0 24px 54px rgba(0, 0, 0, .78);
	max-height: min(64vh, 520px); overflow-y: auto;
}
.sugestoes[hidden] { display: none; }
.sug {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 10px; border-radius: 6px;
	color: var(--txt);
}
.sug:hover, .sug.marcada { background: rgba(255, 255, 255, .09); color: var(--txt); }
.sug img, .sug-sem-img {
	flex: 0 0 auto; width: 46px; height: 46px;
	border-radius: 5px; object-fit: cover; background: var(--n3); display: block;
}
.sug-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sug-txt b {
	font-family: var(--display); font-size: 1rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: -.005em; line-height: 1.08;
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sug-txt i {
	font-style: normal; font-size: .58rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--rosa);
}
.sug-tudo {
	display: block; margin-top: 4px; padding: 11px 10px;
	border-top: 1px solid var(--linha);
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
	color: var(--txt-dim); text-align: center;
}
.sug-tudo:hover, .sug-tudo.marcada { color: var(--rosa); }
.sug-vazio { margin: 0; padding: 16px 12px; font-size: .86rem; color: var(--txt-fraco); }
.sug-vazio b { color: var(--txt); font-weight: 600; }

/* ── faixa superior ── */
.faixa {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 8px 18px;
	padding: 9px var(--gutter);
	background: var(--n1);
	border-bottom: 1px solid var(--linha);
	font-size: .68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .15em;
	color: var(--txt-dim);
}
.faixa-data { color: var(--txt-fraco); }
/* na homepage a contagem esta no palco: a faixa seria repeticao */
.topo-transparente .faixa { display: none; }
.faixa-relogio { display: flex; gap: 12px; }
.fx-un { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; }
.fx-un b { font-family: var(--display); font-size: .92rem; font-weight: 800; letter-spacing: 0; }
.fx-un i { font-style: normal; color: var(--txt-fraco); }

/* ════════════════════════════════════════════════════════
   3. PALCO (hero de bordo a bordo)
   ════════════════════════════════════════════════════════ */
.palco {
	position: relative;
	min-height: clamp(460px, 74vh, 760px);
	display: flex; align-items: flex-end;
	overflow: hidden;
	margin-bottom: var(--sec);
	background: #000;
}
.palco .contagem-fundo { position: absolute; inset: 0; }
.palco .cf-img {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transform: scale(1.06);
	transition: opacity 1.6s ease, transform 9s linear;
}
.palco .cf-img.activa { opacity: 1; transform: scale(1); }
.palco-veu {
	position: absolute; inset: 0;
	background:
		linear-gradient(0deg, #000 4%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .18) 74%, rgba(0, 0, 0, .5) 100%),
		radial-gradient(90% 70% at 20% 90%, rgba(0, 0, 0, .68), transparent 70%);
}
.palco-conteudo { position: relative; z-index: 2; padding-block: 52px 60px; }
.palco-eyebrow {
	margin: 0 0 14px;
	font-size: .68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .24em;
	color: var(--rosa);
}
.palco-titulo {
	margin: 0 0 8px;
	font-size: clamp(2.9rem, 9vw, 7.4rem);
	font-weight: 900; line-height: .86;
	letter-spacing: -.02em;
	max-width: 15ch;
}
.palco-titulo em {
	font-style: normal;
	background: var(--vi);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.palco-sub {
	max-width: 52ch; margin: 0 0 30px;
	color: rgba(255, 255, 255, .8); font-size: 1.02rem;
}
.palco-relogio { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.pr-un {
	min-width: 92px;
	padding: 12px 16px 10px;
	background: rgba(0, 0, 0, .42);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--raio);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	text-align: center;
}
.pr-un b {
	display: block;
	font-family: var(--display); font-size: 2.5rem; font-weight: 900;
	line-height: 1; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.pr-un i {
	display: block; margin-top: 4px;
	font-style: normal; font-size: .6rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--txt-fraco);
}
.palco-accoes { display: flex; flex-wrap: wrap; gap: 11px; }

b.a-mudar { animation: bate .32s ease; }
@keyframes bate { 0% { transform: translateY(-5px); opacity: .35; } 100% { transform: none; opacity: 1; } }

/* ════════════════════════════════════════════════════════
   4. CARTOES
   ════════════════════════════════════════════════════════ */
.grelha { display: grid; gap: 26px 22px; }
.grelha.c4 { grid-template-columns: repeat(4, 1fr); }
.grelha.c3 { grid-template-columns: repeat(3, 1fr); }
.grelha.auto { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.cartao { display: flex; flex-direction: column; background: none; border: 0; }
.cartao-img {
	position: relative;
	aspect-ratio: 4 / 5;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--n3);
	margin-bottom: 13px;
}
.cartao-img.larga { aspect-ratio: 16 / 9; }
.cartao-img a { display: block; position: absolute; inset: 0; }
.cartao-img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.cartao:hover .cartao-img img { transform: scale(1.05); }
.cartao-img::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, transparent 46%);
}
.cartao-corpo { display: flex; flex-direction: column; }
.cartao-corpo h3 {
	margin: 0 0 7px;
	font-size: 1.12rem; line-height: 1.02;
}
.cartao-corpo h3 a { color: #fff; }
.cartao:hover .cartao-corpo h3 a { color: var(--rosa); }
.cartao-resumo {
	margin: 0;
	font-size: .84rem; line-height: 1.5; color: var(--txt-dim);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* marcador para fichas sem fotografia */
.cartao-img-vazia { background: linear-gradient(150deg, var(--t-indigo), var(--n2)); }
.marcador {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.marcador-icone { font-size: 1.5rem; opacity: .5; }
.marcador-letra {
	font-family: var(--display); font-size: 3.2rem; font-weight: 900;
	color: rgba(255, 255, 255, .22); line-height: 1;
}

/* cartao horizontal */
.cartao-h {
	display: grid; grid-template-columns: 148px 1fr; gap: 15px;
	align-items: center;
	padding: 0; background: none; border: 0;
	border-bottom: 1px solid var(--linha);
	padding-bottom: 16px;
}
.cartao-h:last-child { border-bottom: 0; padding-bottom: 0; }
.cartao-h-img {
	position: relative; aspect-ratio: 16 / 10;
	overflow: hidden; border-radius: 6px; background: var(--n3);
}
.cartao-h-img a { position: absolute; inset: 0; display: block; }
.cartao-h-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.cartao-h:hover .cartao-h-img img { transform: scale(1.06); }
.cartao-h-corpo h3 { margin: 0 0 5px; font-size: 1rem; line-height: 1.04; }
.cartao-h-corpo .etiqueta { margin-bottom: 6px; }
.cartao-h-corpo .cartao-resumo { -webkit-line-clamp: 2; font-size: .8rem; }

/* ════════════════════════════════════════════════════════
   5. HOMEPAGE
   ════════════════════════════════════════════════════════ */
.destaque-duplo {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 30px;
	align-items: start;
}
.lead { position: relative; }
.lead-img {
	position: relative; aspect-ratio: 16 / 9;
	overflow: hidden; border-radius: var(--raio-g); background: var(--n3);
}
.lead-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
.lead:hover .lead-img img { transform: scale(1.04); }
.lead-img::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .86) 2%, rgba(0, 0, 0, .28) 45%, transparent 72%);
}
.lead-corpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 28px; }
.lead-corpo h2 { margin: 0 0 9px; font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.lead-corpo h2 a { color: #fff; }
.lead:hover .lead-corpo h2 a { color: var(--rosa); }
.lead-corpo p { margin: 0; color: rgba(255, 255, 255, .76); font-size: .92rem; max-width: 62ch; }
.lead-lista { display: flex; flex-direction: column; gap: 16px; }

/* atalhos da wiki */
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.atalho {
	display: flex; flex-direction: column; gap: 3px;
	padding: 22px 20px;
	background: var(--n2);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	transition: background .2s, border-color .2s, transform .2s;
}
.atalho:hover { background: var(--n3); border-color: var(--linha-forte); transform: translateY(-3px); color: inherit; }
.atalho-icone { font-size: 1.45rem; margin-bottom: 8px; }
.atalho-nome {
	font-family: var(--display); font-size: 1.2rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: -.005em; color: #fff;
}
.atalho:hover .atalho-nome { color: var(--rosa); }
.atalho-conta { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--txt-fraco); }

/* navegar por jogo */
.jogos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.jogo-cartao {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 152px; padding: 18px;
	border: 1px solid var(--linha); border-radius: var(--raio);
	background: linear-gradient(160deg, var(--t-vinho), var(--n1) 78%);
	transition: transform .2s, border-color .2s;
}
.jogo-cartao:nth-child(2n) { background: linear-gradient(160deg, var(--t-indigo), var(--n1) 78%); }
.jogo-cartao:nth-child(3n) { background: linear-gradient(160deg, var(--t-verde), var(--n1) 78%); }
.jogo-cartao:nth-child(4n) { background: linear-gradient(160deg, var(--t-azul), var(--n1) 78%); }
.jogo-cartao:hover { transform: translateY(-3px); border-color: var(--linha-forte); }
.jogo-capa {
	position: absolute; top: -12px; right: 10px;
	font-family: var(--display); font-size: 3.6rem; font-weight: 900;
	text-transform: uppercase; color: rgba(255, 255, 255, .07);
	white-space: nowrap; pointer-events: none;
}
.jogo-nome { font-family: var(--display); font-size: 1.32rem; font-weight: 800; text-transform: uppercase; color: #fff; }
.jogo-cartao:hover .jogo-nome { color: var(--rosa); }
.jogo-ano { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--txt-fraco); }

/* ── hub de GTA 6: faixa de factos ── */
.factos {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px;
	background: var(--linha);
	border: 1px solid var(--linha); border-radius: var(--raio-g);
	overflow: hidden;
	margin-bottom: var(--sec);
}
.facto { display: flex; flex-direction: column; gap: 3px; padding: 20px 18px; background: var(--n2); }
.facto-rotulo { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }
.facto-valor { font-family: var(--display); font-size: 1.72rem; font-weight: 900; text-transform: uppercase; line-height: 1; }
.facto-nota { font-size: .74rem; color: var(--txt-fraco); }

/* ── perguntas frequentes ── */
.faq { display: grid; gap: 8px; }
.faq-item {
	background: var(--n2);
	border: 1px solid var(--linha); border-radius: var(--raio);
	overflow: hidden;
}
.faq-item summary {
	list-style: none; cursor: pointer;
	padding: 17px 52px 17px 20px; position: relative;
	font-family: var(--display); font-size: 1.2rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: -.005em; line-height: 1.12;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	font-family: var(--texto); font-size: 1.4rem; font-weight: 400; color: var(--rosa);
	transition: transform .2s;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--rosa); }
.faq-resposta { padding: 0 20px 18px; color: var(--txt-dim); font-size: .96rem; line-height: 1.7; }
.faq-resposta p:last-child { margin-bottom: 0; }
.faq-resposta a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; }
.faq-resposta strong { color: #fff; }

/* ── cronologia ── */
.cronologia { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--linha); }
.cronologia li { position: relative; padding: 0 0 26px 20px; }
.cronologia li:last-child { padding-bottom: 0; }
.cronologia li::before {
	content: ""; position: absolute; left: -27px; top: 7px;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--rosa); border: 2px solid var(--preto);
}
.cr-data {
	display: block; margin-bottom: 3px;
	font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa);
}
.cr-texto { color: var(--txt-dim); line-height: 1.65; }
.cr-texto strong { color: #fff; }

/* ════════════════════════════════════════════════════════
   6. ARQUIVOS, ARTIGOS E PAGINAS
   ════════════════════════════════════════════════════════ */
/* ── migalhas ── */
.migalhas {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
	padding: 26px 0 0;
	font-size: .68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--txt-fraco);
}
.migalhas a { color: var(--txt-dim); }
.migalhas a:hover { color: var(--rosa); }
.migalhas .mig-sep { opacity: .4; }
.migalhas [aria-current="page"] {
	color: var(--txt-fraco);
	max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cabeca-arquivo + * { margin-top: 0; }
.migalhas + .cabeca-arquivo { padding-top: 18px; }
.migalhas + .artigo { margin-top: 18px; }

.cabeca-arquivo {
	padding: clamp(40px, 6vw, 78px) 0 26px;
	border-bottom: 1px solid var(--linha);
	margin-bottom: 34px;
}
.cabeca-arquivo h1 { margin: 0 0 10px; }
.cabeca-arquivo p { margin: 0; color: var(--txt-dim); max-width: 68ch; }

.single-wrap { padding-top: clamp(28px, 4vw, 52px); }
.artigo-destaque {
	position: relative; margin-bottom: 30px;
	border-radius: var(--raio-g); overflow: hidden;
	aspect-ratio: 16 / 9; background: var(--n3);
}
.artigo-destaque img { width: 100%; height: 100%; object-fit: cover; }
.artigo-cabeca { max-width: 820px; margin-bottom: 30px; }
.artigo-cabeca h1 { margin: 0 0 14px; }
.artigo-meta {
	display: flex; flex-wrap: wrap; gap: 6px 16px;
	font-size: .7rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .13em;
	color: var(--txt-fraco);
}

.conteudo { max-width: 820px; font-size: 1.04rem; line-height: 1.75; }
.conteudo > *:first-child { margin-top: 0; }
.conteudo h2 {
	margin: 1.9em 0 .5em;
	font-size: 1.72rem;
	padding-top: .55em;
	border-top: 1px solid var(--linha);
}
.conteudo h3 { margin: 1.5em 0 .4em; font-size: 1.24rem; }
.conteudo a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.conteudo a:hover { color: var(--ambar); }
.conteudo ul, .conteudo ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.conteudo li { margin-bottom: .45em; }
.conteudo li::marker { color: var(--rosa); }
.conteudo strong { color: #fff; }
.conteudo em { color: rgba(255, 255, 255, .82); }
.conteudo img { border-radius: var(--raio); margin: 1.4em 0; }
.conteudo blockquote {
	margin: 1.6em 0; padding: 4px 0 4px 22px;
	border-left: 2px solid var(--rosa);
	color: var(--txt-dim); font-size: 1.1rem;
}
.conteudo code {
	background: var(--n3); border: 1px solid var(--linha);
	border-radius: 4px; padding: 1px 6px;
	font-size: .88em; color: var(--ambar);
}
.conteudo table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .94rem; }
.conteudo th, .conteudo td { padding: 10px 12px; border-bottom: 1px solid var(--linha); text-align: left; }
.conteudo th { color: var(--rosa); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }

.titulo-sticker { display: inline-block; }

.relacionados { margin-top: var(--sec); }

/* Atencao: o paginate_links( type => list ) poe a classe .page-numbers tanto no
   <ul> como em cada item. Os estilos da pilula tem de apanhar so <a> e <span>,
   senao a lista inteira fica dentro de uma pilula gigante e com marcadores. */
.paginacao { margin: 50px 0 0; }
.paginacao ul.page-numbers {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	background: none; border: 0;
}
.paginacao ul.page-numbers > li { margin: 0; }
.paginacao ul.page-numbers > li::marker { content: none; }
.paginacao a.page-numbers,
.paginacao span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 15px;
	background: var(--n2); border: 1px solid var(--linha); border-radius: var(--pil);
	font-family: var(--texto); font-size: .82rem; font-weight: 600;
	letter-spacing: .02em; color: var(--txt-dim);
	transition: border-color .16s, color .16s, background .16s;
}
.paginacao a.page-numbers:hover { color: #fff; border-color: var(--linha-forte); background: var(--n3); }
.paginacao span.page-numbers.current { background: #fff; border-color: #fff; color: #000; font-weight: 700; }
.paginacao .next, .paginacao .prev {
	padding: 0 22px;
	text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; font-weight: 700;
}
.paginacao span.page-numbers.dots {
	background: none; border-color: transparent;
	min-width: 0; padding: 0 2px; color: var(--txt-fraco);
}

/* ── imagens dentro do texto ── */
.img-artigo { margin: 2em 0; }
.img-artigo img { width: 100%; height: auto; border-radius: var(--raio); display: block; }
.img-artigo figcaption,
.galeria-oficial figcaption {
	margin-top: 9px;
	font-size: .76rem; line-height: 1.5; color: var(--txt-fraco);
	display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
}
.img-artigo figcaption b,
.galeria-oficial figcaption b {
	font-weight: 700; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
	color: var(--rosa);
}

/* ── galeria dentro do texto ── */
.galeria-oficial { margin: 2em 0; }
.galeria-oficial .gal-grelha {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
.galeria-oficial .gal-grelha img {
	width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--raio); display: block;
}
.galeria-oficial a { display: block; overflow: hidden; border-radius: var(--raio); }
.galeria-oficial a img { transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.galeria-oficial a:hover img { transform: scale(1.04); }

/* ════════════════════════════════════════════════════════
   7. LIGACOES ENTRE FICHAS (plugin gta-wiki)
   ════════════════════════════════════════════════════════ */
.gtawiki-link {
	color: var(--rosa);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(249, 118, 176, .45);
}
.gtawiki-link:hover { color: var(--ambar); text-decoration-color: currentColor; }

.gtawiki-aparece-em {
	clear: both;
	margin: 44px 0 0;
	padding: 24px 26px;
	background: var(--n2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
}
.gtawiki-aparece-em h2 {
	margin: 0 0 16px; padding: 0; border: 0;
	font-size: 1.12rem; letter-spacing: .04em; color: var(--txt-dim);
}
.gtawiki-aparece-em ul {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px;
}
.gtawiki-aparece-em li { margin: 0; }
.gtawiki-aparece-em a {
	display: flex; align-items: baseline; gap: 10px;
	padding: 10px 13px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid transparent; border-radius: 6px;
	color: var(--txt); font-size: .88rem; text-decoration: none;
	transition: background .16s, border-color .16s, color .16s;
}
.gtawiki-aparece-em a:hover { background: rgba(255, 255, 255, .08); border-color: var(--linha); color: var(--rosa); }
.gtawiki-ae-tipo {
	flex: 0 0 auto;
	font-size: .58rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .13em;
	color: var(--rosa);
}

/* ════════════════════════════════════════════════════════
   7b. TRAILERS
   ════════════════════════════════════════════════════════ */
.trailer {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px;
	align-items: start;
	padding-bottom: var(--sec); margin-bottom: var(--sec);
	border-bottom: 1px solid var(--linha);
}
.trailer:last-of-type { border-bottom: 0; }
.trailer-video { position: relative; }
.video-facada {
	position: relative; display: block; cursor: pointer;
	aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--raio-g); background: var(--n3);
}
.video-facada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.32,.72,0,1); }
.video-facada:hover img { transform: scale(1.03); }
.video-facada::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.05) 60%);
	pointer-events: none;
}
.video-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 2; display: grid; place-items: center;
	width: 74px; height: 74px; border-radius: 50%;
	background: rgba(255,255,255,.95); color: #000;
	font-size: 1.5rem; padding-left: 5px;
	transition: transform .2s, background .2s;
}
.video-facada:hover .video-play { transform: translate(-50%, -50%) scale(1.07); background: var(--rosa); }
.video-aviso {
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	padding: 5px 12px; border-radius: var(--pil);
	background: rgba(0,0,0,.66); border: 1px solid rgba(255,255,255,.2);
	font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255,255,255,.88);
}
.video-facada.a-tocar { cursor: default; }
.video-facada.a-tocar::after { content: none; }
.video-facada iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-texto h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.trailer-texto h3 { margin: 26px 0 10px; font-size: 1rem; letter-spacing: .05em; color: var(--txt-dim); }
.trailer-entrada { color: var(--txt-dim); line-height: 1.7; margin: 0; }
.trailer-momentos { margin: 0; padding-left: 1.15em; color: var(--txt-dim); line-height: 1.65; }
.trailer-momentos li { margin-bottom: .6em; }
.trailer-momentos li::marker { color: var(--rosa); }
.tr-fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.tr-ficha {
	display: inline-flex; align-items: baseline; gap: 8px;
	padding: 8px 14px;
	background: var(--n2); border: 1px solid var(--linha); border-radius: var(--pil);
	font-size: .82rem; font-weight: 600; color: var(--txt);
	transition: border-color .16s, color .16s, background .16s;
}
.tr-ficha:hover { border-color: var(--linha-forte); background: var(--n3); color: var(--rosa); }
.tr-ficha-tipo { font-size: .56rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--rosa); }

/* ════════════════════════════════════════════════════════
   7c. GALERIA OFICIAL
   ════════════════════════════════════════════════════════ */
.gal-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.gal-filtros button {
	padding: 10px 20px;
	background: var(--n2); color: var(--txt-dim);
	border: 1px solid var(--linha); border-radius: var(--pil);
	font-family: var(--texto); font-size: .74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .11em; cursor: pointer;
	transition: border-color .16s, color .16s, background .16s;
}
.gal-filtros button span { opacity: .55; margin-left: 4px; }
.gal-filtros button:hover { color: #fff; border-color: var(--linha-forte); }
.gal-filtros button.activa { background: #fff; border-color: #fff; color: #000; }
.gal-bloco { margin-bottom: var(--sec); }
.gal-bloco .seccao-titulo h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.gal-bloco .gal-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gal-item { display: block; overflow: hidden; border-radius: var(--raio); background: var(--n3); }
.gal-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.32,.72,0,1); }
.gal-item:hover img { transform: scale(1.05); }
.gal-credito { padding: 22px 26px; font-size: .84rem; color: var(--txt-dim); margin: 0; }
.gal-credito strong { color: var(--txt); }

/* visor */
.lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center;
	background: rgba(0, 0, 0, .94);
	padding: 4vh 6vw;
}
.lightbox[hidden] { display: none; }
.lb-caixa { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.lb-caixa img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: var(--raio); object-fit: contain; }
.lb-caixa figcaption {
	display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: center;
	font-size: .82rem; color: var(--txt-dim); text-align: center;
}
.lb-caixa figcaption b { font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--rosa); }
.lightbox button {
	position: absolute; z-index: 2;
	width: 50px; height: 50px; display: grid; place-items: center;
	background: rgba(255,255,255,.08); color: #fff;
	border: 1px solid var(--linha); border-radius: 50%;
	font-size: 1.6rem; line-height: 1; cursor: pointer;
	transition: background .16s, border-color .16s;
}
.lightbox button:hover { background: rgba(255,255,255,.18); border-color: var(--linha-forte); }
.lb-fechar { top: 20px; right: 20px; }
.lb-ant { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-seg { right: 16px; top: 50%; transform: translateY(-50%); }

/* ════════════════════════════════════════════════════════
   8. MAPA DE LEONIDA
   ════════════════════════════════════════════════════════ */
.mapa-leonida {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	grid-template-areas: "svg painel" "legenda legenda";
	gap: 22px;
}
.mapa-svg-caixa { grid-area: svg; }
.mapa-svg {
	width: 100%; height: auto; display: block;
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: #050a0f;
}
.mapa-nota { margin: 12px 2px 0; font-size: .75rem; color: var(--txt-fraco); line-height: 1.55; }

/* terra, ilhotas e agua interior */
.ml-terra { fill: #10222d; stroke: #000; stroke-width: 2; stroke-linejoin: round; }
.ml-ilha { fill: #16303e; stroke: #000; stroke-width: 1.5; }
.ml-agua { fill: #071722; stroke: #000; stroke-width: 1.5; }
.ml-sec {
	font-family: var(--texto); font-size: 9.5px; font-weight: 700;
	fill: rgba(255, 255, 255, .6); text-anchor: middle; pointer-events: none;
	letter-spacing: .05em;
	paint-order: stroke; stroke: rgba(0, 0, 0, .8); stroke-width: 3px; stroke-linejoin: round;
}

/* regioes */
.ml-reg path, .ml-reg circle {
	stroke: #000; stroke-width: 1.5; stroke-linejoin: round;
	opacity: .62;
	transition: opacity .2s;
	cursor: pointer;
}
.ml-reg text {
	font-family: var(--display); font-size: 16px; font-weight: 800;
	fill: #fff; text-anchor: middle; pointer-events: none;
	text-transform: uppercase; letter-spacing: .02em;
	paint-order: stroke; stroke: rgba(0, 0, 0, .8); stroke-width: 3.5px; stroke-linejoin: round;
}
.ml-reg:hover path, .ml-reg:hover circle,
.ml-reg.activa path, .ml-reg.activa circle { opacity: 1; }
.ml-reg:focus { outline: none; }
.ml-reg:focus path { opacity: 1; stroke: #fff; stroke-width: 2; }
.ml-keys text { font-size: 13px; }
.ml-pg text { font-size: 12px; }

/* painel lateral */
.mapa-painel {
	grid-area: painel;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 260px;
	padding: 26px;
	background: var(--n2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
}
.mapa-painel-vazio { color: var(--txt-dim); }
.mapa-painel-vazio strong { display: block; color: var(--txt); font-size: 1.02rem; margin-bottom: 4px; }
.mapa-info-img {
	position: relative;
	margin: 0 0 17px;
	border-radius: var(--raio);
	overflow: hidden;
	background: var(--n3);
}
.mapa-info-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mapa-info-img figcaption {
	position: absolute; right: 9px; bottom: 9px;
	padding: 3px 9px;
	background: rgba(0, 0, 0, .68);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--pil);
	font-family: var(--texto);
	font-size: .58rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	color: rgba(255, 255, 255, .84);
}
.mapa-info-cor { display: block; width: 44px; height: 3px; border-radius: 2px; margin-bottom: 13px; }
.mapa-info h3 { margin: 0 0 9px; font-size: 1.5rem; }
.mapa-info p { margin: 0 0 18px; color: var(--txt-dim); line-height: 1.6; }

/* legenda */
.mapa-legenda {
	grid-area: legenda;
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
}
.mapa-legenda button {
	width: 100%;
	display: flex; align-items: center; gap: 10px;
	padding: 11px 14px;
	background: var(--n2); color: var(--txt);
	border: 1px solid var(--linha); border-radius: var(--pil);
	font-family: var(--texto); font-size: .76rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .09em;
	text-align: left; cursor: pointer;
	transition: border-color .16s, background .16s, color .16s;
}
.mapa-legenda button:hover { border-color: var(--linha-forte); background: var(--n3); color: var(--rosa); }
.mapa-ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* credito e incorporacao */
.credito-externo { padding: 22px 26px; margin-bottom: 18px; }
.credito-externo p { margin: 0 0 12px; color: var(--txt-dim); }
.credito-externo p:last-child { margin: 0; }
.credito-links { display: flex; gap: 10px; flex-wrap: wrap; }
.mapa-incorporado { padding: 0; overflow: hidden; height: 640px; }
.mapa-incorporado iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ════════════════════════════════════════════════════════
   9. RASTREADOR DE 100%
   ════════════════════════════════════════════════════════ */
.rst-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rst-abas a {
	padding: 10px 20px;
	background: var(--n2); border: 1px solid var(--linha); border-radius: var(--pil);
	font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em;
	color: var(--txt-dim);
	transition: border-color .16s, color .16s, background .16s;
}
.rst-abas a:hover { color: #fff; border-color: var(--linha-forte); }
.rst-abas a.activa { background: #fff; border-color: #fff; color: #000; }

.rastreador { display: flex; flex-direction: column; gap: 16px; }
.rst-topo { padding: 24px 26px; }
.rst-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.rst-cabeca h3 { margin: 0; font-size: 1.32rem; }
.rst-limpar {
	padding: 8px 16px;
	background: transparent; color: var(--txt-dim);
	border: 1px solid var(--linha); border-radius: var(--pil);
	font-family: var(--texto); font-size: .68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; cursor: pointer;
	transition: color .16s, border-color .16s;
}
.rst-limpar:hover { color: var(--rosa); border-color: var(--rosa); }
.rst-barra { height: 6px; background: rgba(255, 255, 255, .1); border-radius: var(--pil); overflow: hidden; }
.rst-barra-cheia { display: block; height: 100%; background: var(--vi); transition: width .32s ease; }
.rst-contas { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.rst-pct { font-family: var(--display); font-size: 2rem; font-weight: 900; line-height: 1; }
.rst-num { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--txt-fraco); }
.rst-nota { margin: 12px 0 0; font-size: .74rem; color: var(--txt-fraco); }
.rst-aviso { padding: 16px 20px; margin: 0; color: var(--ambar); font-size: .88rem; }

.rst-seccao { padding: 22px 26px; }
.rst-seccao h4 {
	margin: 0 0 14px; font-size: 1rem; letter-spacing: .05em;
	display: flex; align-items: baseline; gap: 10px;
}
.rst-seccao-conta { font-family: var(--texto); font-size: .68rem; font-weight: 600; letter-spacing: .12em; color: var(--txt-fraco); }
.rst-seccao ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; }
.rst-seccao li { margin: 0; }
.rst-seccao input { position: absolute; opacity: 0; width: 0; height: 0; }
.rst-seccao label {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 9px 11px; border-radius: 6px;
	font-size: .9rem; color: var(--txt-dim); cursor: pointer;
	transition: background .14s, color .14s;
}
.rst-seccao label::before {
	content: ""; flex: 0 0 auto;
	width: 17px; height: 17px; margin-top: 3px;
	border: 1px solid var(--linha-forte); border-radius: 4px;
	transition: background .14s, border-color .14s;
}
.rst-seccao label:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.rst-seccao input:checked + label { color: #fff; }
.rst-seccao input:checked + label::before {
	background: var(--rosa); border-color: var(--rosa);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.rst-seccao input:focus-visible + label::before { outline: 2px solid var(--rosa); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════
   10. RODAPE
   ════════════════════════════════════════════════════════ */
.rodape {
	margin-top: var(--sec);
	padding: clamp(40px, 5vw, 66px) 0 30px;
	background: var(--n1);
	border-top: 1px solid var(--linha);
}
.rodape-grelha {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px;
	margin-bottom: 34px;
}
.rodape h4 { margin: 0 0 14px; font-size: .84rem; letter-spacing: .14em; color: var(--rosa); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rodape a { color: var(--txt-dim); font-size: .88rem; }
.rodape a:hover { color: #fff; }
.rodape-nota {
	margin: 0; padding-top: 24px;
	border-top: 1px solid var(--linha);
	font-size: .74rem; line-height: 1.7; color: var(--txt-fraco);
}

/* ════════════════════════════════════════════════════════
   11. RESPONSIVO
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.grelha.c4 { grid-template-columns: repeat(3, 1fr); }
	.destaque-duplo { grid-template-columns: 1fr; }
	.rodape-grelha { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
	.cabecalho-inner { flex-wrap: wrap; gap: 12px; min-height: 64px; }
	.menu-movel-btn { display: inline-block; order: 3; }
	.pesquisa-topo { order: 2; margin-left: auto; }
	.pesquisa-topo input { width: 130px; }
	.nav-principal {
		order: 4; flex: 1 0 100%;
		display: none; padding-bottom: 12px;
	}
	.nav-principal.aberto {
		display: block;
		background: rgba(0, 0, 0, .95);
		border: 1px solid var(--linha);
		border-radius: var(--raio);
		padding: 8px;
		margin-bottom: 10px;
	}
	body.topo-transparente .cabecalho:has(.nav-principal.aberto) { background: rgba(0, 0, 0, .95); }
	body.topo-transparente .palco-conteudo { padding-top: 104px; }
	.nav-principal > ul,
	.nav-principal ul { flex-direction: column; align-items: stretch; gap: 1px; }
	.nav-principal a { padding: 11px 13px; border-radius: 6px; }
	.nav-principal .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; background: transparent;
		padding: 0 0 0 14px; min-width: 0;
	}
	.trailer { grid-template-columns: 1fr; gap: 24px; }
	.mapa-leonida { grid-template-columns: 1fr; grid-template-areas: "svg" "painel" "legenda"; }
	.mapa-incorporado { height: 500px; }
}

@media (max-width: 760px) {
	:root { --gutter: 16px; }
	.grelha.c4, .grelha.c3 { grid-template-columns: repeat(2, 1fr); }
	.grelha.auto { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
	.palco { min-height: 74vh; }
	.palco-relogio { gap: 7px; }
	.pr-un { min-width: 0; flex: 1 1 0; padding: 10px 8px 8px; }
	.pr-un b { font-size: 1.75rem; }
	.lead-corpo { padding: 18px; }
	.rodape-grelha { grid-template-columns: 1fr; gap: 26px; }
	.faixa { font-size: .62rem; letter-spacing: .1em; gap: 6px 12px; }
	.faixa-data { display: none; }
	.marca img { height: 36px; }
}

@media (max-width: 460px) {
	.grelha.auto { grid-template-columns: 1fr 1fr; }
	.cartao-h { grid-template-columns: 112px 1fr; gap: 12px; }
	.rst-seccao ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}