/* ============================================================
   RESULTADOS — a base comum de todas as páginas de resultado do site:
   /galerias (hubs e a página de cada concurso), /ranking e /top1-2026.
   Redesenhadas em 09/10/2026 a partir dos mocks aprovados pelo dono.

   Carrega ANTES da folha de cada página: galerias.css, ranking.css, top1.css.
   O escopo é a classe .pagina-resultados (no <body> das views de galerias e no
   invólucro dos fragmentos do ranking e do Top 1), onde moram os tokens.

   Prefixos: rz- (superfícies, cabeçalho, botões, fecho), res- (a barra comum
   dos resultados) e t1- (peças que nasceram no Top 1 e são o mesmo componente
   no hub e no ranking: hero com a parede de fotos, busca, pódio, lista).
   Nenhum nome aqui coincide com a lista !important de hotsite-nx.css.
   ⚠️ hotsite.css zera a borda de TODO <button> com !important: nenhum botão
   daqui usa border; o contorno é box-shadow inset, igual em <a> e <button>.
   Movimento só com JS (.rz-js no <html>, resultados.js) e sem
   prefers-reduced-motion; fora disso, o estado final direto.
   ============================================================ */

.pagina-resultados {
	/* superfícies */
	--d: #0a0a0a;
	--graph: #1e1e1e;
	/* grafite = o mesmo da faixa pré-rodapé do site (.section-pre-footer) */
	--gray: #f5f5f4;
	--w: #ffffff;
	/* texto */
	--ink: #16160f;
	--mut-l: #6a6a68;
	--mut-d: #a9a9a6;
	/* linhas */
	--line-l: #e9e9e7;
	--line-d: rgba(255, 255, 255, .1);
	/* ouro: claro para fundo escuro, escuro (AA) para fundo claro. #8a5f00 é o
	   dourado de texto do site (--nx-goldtxt, 08/10/2026): ≥ 4,7:1 no branco e no cinza */
	--gold: #ffb700;
	--gold-ink: #8a5f00;
	--r-xs: 4px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-pill: 999px;
	--sh-card: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06);
	--sh-card-h: 0 2px 4px rgba(0, 0, 0, .05), 0 18px 44px rgba(0, 0, 0, .1);
	background: var(--w);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

.pagina-resultados img {
	max-width: 100%;
}

/* cada <section> declara o próprio fundo (alternância medível) */
.rz-sec {
	padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.rz-dark {
	background:
		radial-gradient(70% 34% at 50% 0%, rgba(255, 183, 0, .06), rgba(255, 183, 0, 0) 70%),
		var(--d);
	color: #f2f2f2;
}

.rz-graph {
	background: var(--graph);
	color: #f2f2f2;
}

.rz-gray {
	background: var(--gray);
	color: var(--ink);
}

.rz-white {
	background: var(--w);
	color: var(--ink);
}

/* ---------- cabeçalho de seção ---------- */
.rz-cab {
	max-width: 60ch;
	margin: 0 auto clamp(2rem, 4vw, 3.25rem);
	text-align: center;
}

.rz-eyebrow {
	display: block;
	margin-bottom: .9rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.rz-dark .rz-eyebrow,
.rz-graph .rz-eyebrow {
	color: var(--gold);
}

.rz-cab h2 {
	margin: 0;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: inherit;
}

.rz-cab p {
	margin: .85rem auto 0;
	max-width: 54ch;
	color: var(--mut-l);
	font-size: 1rem;
	line-height: 1.6;
}

.rz-dark .rz-cab p,
.rz-graph .rz-cab p {
	color: var(--mut-d);
}

/* =====================================================================
   BOTÕES — um sistema só, idêntico em <a> e <button>
   ===================================================================== */
.rz-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	padding: .6rem 1.35rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px transparent;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.rz-btn i {
	font-size: .9em;
}

.rz-btn:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.rz-btn-ouro {
	background: var(--gold);
	color: #000;
}

.rz-btn-ouro:hover {
	background: #ffc733;
	color: #000;
}

/* contorno em superfície clara */
.rz-btn-ghost {
	color: var(--ink);
	box-shadow: inset 0 0 0 1px #d2d2d0;
}

.rz-btn-ghost:hover {
	background: #111;
	color: #fff;
	box-shadow: inset 0 0 0 1px #111;
}

/* contorno em superfície escura — inclui a faixa "você", que não é .rz-graph */
.rz-dark .rz-btn-ghost,
.rz-graph .rz-btn-ghost,
.rz-voce .rz-btn-ghost {
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

.rz-dark .rz-btn-ghost:hover,
.rz-graph .rz-btn-ghost:hover,
.rz-voce .rz-btn-ghost:hover {
	background: #fff;
	color: #111;
	box-shadow: inset 0 0 0 1px #fff;
}

.rz-btn-texto {
	padding-left: .55rem;
	padding-right: .55rem;
	opacity: .8;
}

.rz-btn-texto:hover {
	opacity: 1;
}

/* avatar (core::avatarHtml: <img> ou <span> com as iniciais) — o tamanho é daqui */
.rz-av {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	font-size: .9rem;
}

/* =====================================================================
   FECHO E "O QUE SIGNIFICA" / "COMO PONTUA"
   ===================================================================== */
.rz-acoes {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}

.rz-proximo {
	text-align: center;
}

.rz-proximo h2 {
	margin: .25rem 0 .5rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: -.02em;
	color: #fff;
}

.rz-proximo p {
	margin: 0 auto 1.5rem;
	max-width: 52ch;
	color: var(--mut-d);
}

.rz-proximo .rz-acoes {
	justify-content: center;
}

.rz-count {
	font-variant-numeric: tabular-nums;
}

.rz-significa {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.2vw, 1.5rem);
	max-width: 1040px;
	margin: 0 auto;
}

.rz-sig-item {
	position: relative;
	padding: 1.75rem 1.5rem 1.6rem;
	background: #fff;
	border: 1px solid var(--line-l);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
}

.rz-sig-ico {
	width: 46px;
	height: 46px;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	margin-bottom: 1.1rem;
	background: var(--gray);
	box-shadow: inset 0 0 0 1px var(--line-l);
	color: var(--ink);
	font-size: 1.05rem;
}

.rz-sig-num {
	position: absolute;
	top: 1.6rem;
	right: 1.5rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--mut-l);
	font-variant-numeric: tabular-nums;
}

.rz-sig-item h3 {
	margin: 0 0 .5rem;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.rz-sig-item p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--mut-l);
}

.rz-sig-item p b {
	color: var(--ink);
	font-weight: 600;
}

/* o caminho de cada card: links discretos no pé, sempre visíveis */
.rz-sig-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	margin-top: 1rem;
}

.rz-sig-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 32px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line-l);
}

.rz-sig-link:hover,
.rz-sig-link:focus-visible {
	color: var(--gold-ink);
	border-bottom-color: var(--gold-ink);
}

/* =====================================================================
   HERO COM A PAREDE DE FOTOS (hub e Top 1): título à esquerda, parede à
   direita correndo devagar; no celular a parede vira uma fita lateral
   ===================================================================== */
/* grão de filme nas superfícies escuras (fotógrafo reconhece) */
.t1-grao {
	position: relative;
}

.t1-grao::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .08;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.t1-grao > .container {
	position: relative;
	z-index: 2;
}

.t1-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(42% 70% at 80% 50%, rgba(255, 183, 0, .14), rgba(255, 183, 0, 0) 72%),
		var(--d);
	color: #fff;
}

/* o texto sempre sobre escuro firme, por mais clara que seja a foto que passa atrás */
.t1-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 38%, rgba(10, 10, 10, .72) 46%, rgba(10, 10, 10, 0) 58%);
}

/* luz que acompanha o mouse sobre a parede (só com mouse de verdade) */
.t1-hero-luz {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(260px 260px at var(--lx, 70%) var(--ly, 40%), rgba(255, 214, 120, .2), rgba(255, 214, 120, 0) 70%);
	mix-blend-mode: screen;
	transition: opacity .4s ease;
}

.t1-hero:hover .t1-hero-luz {
	opacity: 1;
}

.t1-hero-in {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	min-height: clamp(540px, 78vh, 780px);
}

.t1-hero-txt {
	max-width: 600px;
	padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.t1-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .38rem .95rem;
	border-radius: var(--r-pill);
	background: rgba(10, 10, 10, .35);
	box-shadow: inset 0 0 0 1px rgba(255, 183, 0, .55);
	color: var(--gold);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.t1-hero-titulo {
	margin: 1.15rem 0 0;
	font-size: clamp(3.2rem, 7.4vw, 6.6rem);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.045em;
	color: #fff;
}

/* o ano em ouro metálico (com um brilho que passa, no bloco de movimento) */
.t1-hero-titulo span {
	background: linear-gradient(100deg, #ffcf4d 0%, #ffb700 34%, #c98a00 52%, #ffd25e 68%, #ffb700 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.t1-hero-lead {
	margin: 1.4rem 0 0;
	max-width: 36ch;
	font-size: clamp(1.05rem, 1.45vw, 1.28rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .8);
}

.t1-hero-lead strong {
	color: #fff;
	font-weight: 600;
}

.t1-stats {
	display: flex;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.t1-stats li {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.t1-stats b {
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.t1-stats span {
	max-width: 15ch;
	font-size: .7rem;
	line-height: 1.35;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .64);
}

.t1-hero-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 2.2rem;
}

/* parede: colunas retas (sem perspectiva: ela distorcia as fotos). Decorativa;
   o JS a desloca de leve com o mouse. A lista vai duas vezes em cada coluna e
   o padding-bottom igual ao gap fecha a volta sem pulo. */
.t1-mural {
	position: absolute;
	z-index: 0;
	top: -12%;
	bottom: -12%;
	right: -1%;
	width: 57%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	transform: translate3d(var(--mx-px, 0), var(--my-px, 0), 0);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.t1-mural-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 14px;
	will-change: transform;
}

.t1-mural-col:nth-child(even) {
	margin-top: -90px;
}

.t1-mural-item {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 16px;
	background: #151515;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 36px rgba(0, 0, 0, .4);
}

.t1-mural-item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.t1-mural-item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.4rem .8rem .7rem;
	/* com .55 no meio o nome caía a 3,4:1 sobre foto clara (medido) */
	background: linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .78) 52%, rgba(0, 0, 0, 0));
}

.t1-mural-item b {
	display: block;
	overflow: hidden;
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #fff;
}

.t1-mural-item span {
	display: block;
	margin-top: .1rem;
	overflow: hidden;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--gold);
}

/* =====================================================================
   BUSCA (hub, ranking e Top 1). O input do site tem a borda zerada com
   !important: o contorno é box-shadow.
   ===================================================================== */
.t1-busca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 1.25rem;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.t1-busca input {
	width: min(100%, 440px);
	padding: .85rem 1.25rem .85rem 2.85rem;
	border: 0;
	border-radius: var(--r-pill);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6a68' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 1.1rem center / 16px;
	box-shadow: inset 0 0 0 1px #d6d6d3;
	font: inherit;
	font-size: .92rem;
	color: var(--ink);
}

.t1-busca input::placeholder {
	color: #8a8a87;
}

.t1-busca input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--gold-ink), 0 0 0 4px rgba(255, 183, 0, .18);
}

.t1-busca-conta {
	font-size: .85rem;
	color: var(--mut-l);
}

/* aviso de prévia do admin (ranking e Top 1): o mesmo tracejado da tarja da galeria */
.res-previa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: .65rem 16px;
	border-bottom: 1px dashed #9a9a97;
	background: #fff;
	color: #555;
	font-size: .82rem;
	line-height: 1.4;
	text-align: center;
}

.res-previa b {
	color: #111;
}

/* =====================================================================
   JÚRI — "Agradecimentos aos jurados", o componente ÚNICO da seção (montado por
   galerias::montarBlocoJurados para premiadas, honrosas e coleções). Retrato
   redondo grande com anel e selo, papel, nome, o @ do Instagram como botão e
   quantos rounds o jurado já avaliou. As fotos de jurado são pequenas (200px):
   por isso o retrato redondo, não uma foto ocupando o card.
   ===================================================================== */
.rz-jurados {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 2.2vw, 1.6rem);
}

.rz-jurado {
	position: relative;
	width: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.1rem 1.4rem 0;
	overflow: hidden;
	text-align: center;
	background: #fff;
	border: 1px solid var(--line-l);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
	transition: box-shadow .3s ease, transform .3s ease;
}

/* faixa clara atrás do retrato, que dá peso ao topo do card */
.rz-jurado::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	/* até o meio do retrato de 80px (2.1rem de padding + 40px) */
	height: 74px;
	background: radial-gradient(120% 100% at 50% 0%, rgba(255, 183, 0, .14), rgba(255, 183, 0, 0) 70%), #f7f6f2;
	border-bottom: 1px solid var(--line-l);
}

.rz-jurado:hover {
	box-shadow: var(--sh-card-h);
	transform: translateY(-3px);
}

.rz-jurado-foto {
	position: relative;
	z-index: 1;
	margin-bottom: 1rem;
}

/* ~80px (era 112; pedido do dono, 12/10/2026), nas premiadas e nas honrosas */
.rz-jurado-av {
	display: block;
	width: 80px;
	height: 80px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--gold), 0 12px 26px rgba(0, 0, 0, .16);
	font-size: 1.4rem;
}

.rz-jurado-selo {
	position: absolute;
	right: 0;
	bottom: 2px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--gold);
	color: #000;
	font-size: .82rem;
}

.rz-jurado-papel {
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.rz-jurado-nome {
	margin: .35rem 0 0;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.rz-jurado-ig {
	display: inline-flex;
	margin-bottom: 1.2rem;
	align-items: center;
	gap: .4rem;
	max-width: 100%;
	min-height: 36px;
	margin-top: .85rem;
	padding: .35rem .9rem;
	border-radius: var(--r-pill);
	box-shadow: inset 0 0 0 1px #dcdcd9;
	color: var(--ink);
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.rz-jurado-ig span {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rz-jurado-ig:hover {
	background: #111;
	box-shadow: inset 0 0 0 1px #111;
	color: #fff;
}

.rz-jurado-ig:focus-visible {
	outline: 2px solid var(--gold-ink);
	outline-offset: 2px;
}

/* pé do card: a experiência, numa faixa própria (sempre no fundo do card) */
.rz-jurado-rounds {
	align-self: stretch;
	margin: auto -1.4rem 0;
	border-top: 1px solid var(--line-l);
	padding: .8rem 1rem .85rem;
	background: #fafaf8;
	font-size: .76rem;
	line-height: 1.4;
	color: var(--mut-l);
}

.rz-jurado-rounds b {
	color: var(--ink);
	font-size: .92rem;
}

/* card sem a faixa de rounds fecha com o mesmo respiro embaixo */
.rz-jurado > :last-child:not(.rz-jurado-rounds) {
	margin-bottom: 1.5rem;
}

@media (max-width: 760px) {
	.rz-jurados {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .75rem;
	}

	/* número ímpar: o último fica centrado na linha dele */
	.rz-jurados > .rz-jurado:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - .375rem);
	}

	.rz-jurados--1 > .rz-jurado:last-child:nth-child(odd) {
		width: min(100%, 260px);
	}

	.rz-jurado {
		width: auto;
		padding: 1.5rem .8rem 0;
	}

	.rz-jurado::before {
		height: 60px;
	}

	.rz-jurado-av {
		width: 72px;
		height: 72px;
		font-size: 1.25rem;
	}

	.rz-jurado-selo {
		width: 24px;
		height: 24px;
		font-size: .66rem;
	}

	.rz-jurado-papel {
		font-size: .58rem;
		letter-spacing: .12em;
	}

	.rz-jurado-nome {
		font-size: .98rem;
	}

	.rz-jurado-ig {
		padding: .3rem .7rem;
		font-size: .72rem;
	}

	.rz-jurado-rounds {
		margin: auto -.8rem 0;
		padding: .7rem .6rem .75rem;
		font-size: .7rem;
	}

	.rz-jurado > :last-child:not(.rz-jurado-rounds) {
		margin-bottom: 1.2rem;
	}
}

/* =====================================================================
   BARRA COMUM DOS RESULTADOS — Premiadas · Honrosas · Ranking · Top 1,
   na faixa cinza do site (.section-filtros), grudada no topo
   ===================================================================== */
.res-nav.section-filtros {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* até 1024px o cabeçalho do site também gruda (56px): a barra gruda logo abaixo */
@media (max-width: 1024px) {
	.res-nav.section-filtros {
		top: 56px;
	}
}

.res-nav-inner {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.res-abas {
	display: inline-flex;
	gap: 4px;
	max-width: 100%;
	padding: 4px;
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0de;
}

.res-aba {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	padding: .45rem 1.1rem;
	border-radius: var(--r-pill);
	color: #333;
	font-size: .86rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.res-aba i {
	color: var(--gold-ink);
}

.res-aba:hover {
	background: #f2f2f0;
	color: #111;
}

.res-aba.is-atual {
	background: #111;
	color: #fff;
}

.res-aba.is-atual i {
	color: var(--gold);
}

.res-aba:focus-visible {
	outline: 2px solid var(--gold-ink);
	outline-offset: 2px;
}

/* =====================================================================
   MOVIMENTO
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* a seção com fundo próprio (preto, grafite, cinza, branco) entra pelo CONTEÚDO,
	   não pela seção inteira: com a seção transparente o branco da página aparecia
	   antes da entrada — um clarão entre os jurados (cinza) e a galeria (preta),
	   12/10/2026. O resto (cards do hub, grades) continua entrando inteiro. */
	.rz-js .rz-reveal:not(.rz-dark):not(.rz-graph):not(.rz-gray):not(.rz-white),
	.rz-js .rz-reveal.rz-dark > .container,
	.rz-js .rz-reveal.rz-graph > .container,
	.rz-js .rz-reveal.rz-gray > .container,
	.rz-js .rz-reveal.rz-white > .container {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .55s ease, transform .55s ease;
	}

	.rz-js .rz-reveal.is-in:not(.rz-dark):not(.rz-graph):not(.rz-gray):not(.rz-white),
	.rz-js .rz-reveal.is-in > .container {
		opacity: 1;
		transform: none;
	}

	.t1-hero-titulo {
		animation: t1-sobe-titulo .9s cubic-bezier(.2, .7, .2, 1) .1s both;
	}

	@keyframes t1-sobe-titulo {
		from {
			opacity: 0;
			transform: translateY(28px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	.t1-hero-titulo span {
		animation: t1-ouro 6s ease-in-out infinite;
	}

	@keyframes t1-ouro {
		0%, 100% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}
	}

	.t1-mural-col {
		animation: t1-sobe 70s linear infinite;
	}

	.t1-mural-col:nth-child(even) {
		animation-name: t1-desce;
		animation-duration: 84s;
	}

	.t1-mural-col:nth-child(3) {
		animation-duration: 60s;
	}

	@keyframes t1-sobe {
		to {
			transform: translateY(-50%);
		}
	}

	@keyframes t1-desce {
		from {
			transform: translateY(-50%);
		}

		to {
			transform: translateY(0);
		}
	}

	@keyframes t1-esq {
		to {
			transform: translateX(-50%);
		}
	}

	@keyframes t1-dir {
		from {
			transform: translateX(-50%);
		}

		to {
			transform: translateX(0);
		}
	}
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1100px) {
	.t1-mural {
		width: 66%;
		right: -14%;
	}
}

@media (max-width: 760px) {
	.rz-significa {
		grid-template-columns: 1fr;
	}

	.t1-hero::before,
	.t1-hero-luz {
		display: none;
	}

	.t1-hero-in {
		flex-direction: column;
		min-height: 0;
	}

	.t1-hero-txt {
		padding: 2rem 0 2.5rem;
	}

	/* no celular a parede vira fitas de fotos correndo para os lados */
	.t1-mural {
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		width: auto;
		height: auto;
		grid-template-columns: 1fr;
		gap: 10px;
		margin: 1.25rem 0 0;
		transform: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	}

	.t1-mural-col {
		flex-direction: row;
		gap: 10px;
		width: max-content;
		padding: 0 10px 0 0;
	}

	.t1-mural-col:nth-child(even) {
		margin-top: 0;
	}

	.t1-mural-col:nth-child(n+3) {
		display: none;
	}

	.t1-mural-item {
		width: 116px;
	}

	/* a barra comum rola de lado se não couber (não empilha) */
	.res-abas {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.res-aba {
		gap: .4rem;
		padding: .45rem .8rem;
		font-size: .8rem;
	}
}

/* a 390px as quatro abas com ícone não cabem e o "Top 1" sumia na rolagem lateral:
   sem o ícone, cabem as quatro */
@media (max-width: 440px) {
	.res-abas {
		display: flex;
		width: 100%;
	}

	.res-aba {
		flex: 1 1 auto;
		justify-content: center;
		padding: .45rem .55rem;
	}

	.res-aba i {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
	.t1-mural-col {
		animation-name: t1-esq;
		animation-duration: 48s;
	}

	.t1-mural-col:nth-child(even) {
		animation-name: t1-dir;
		animation-duration: 56s;
	}
}

/* =====================================================================
   PÓDIO — o palco das 3 maiores pontuações, o MESMO no Top 1 (cena de
   rolagem de comprimento fixo) e no ranking (anima pelo tempo quando aparece,
   sem prender a rolagem). O JS escreve --p (0 → 1) na seção e cada peça entra
   na sua janela (--a). No HTML a ordem é 3, 2, 1 (a da cerimônia; o 1º pinta
   por cima dos vizinhos); o CSS põe 2 · 1 · 3 na tela. Sem JS ou com
   movimento reduzido, o pódio já aparece pronto.
   ===================================================================== */
/* ---------- cena de rolagem ---------- */
.t1-op {
	--p: 0;
	position: relative;
	background: var(--d);
	color: #fff;
}

.t1-op.is-js {
	height: var(--op-h, 300vh);
}

.t1-op-palco {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.t1-op.is-js .t1-op-palco {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	padding: 0;
}

/* cada peça entra na sua vez: --a é onde ela começa (fração da cena) */
.t1-op.is-js .t1-entra {
	--w: clamp(0, calc((var(--p) - var(--a, .6)) * 8), 1);
	opacity: var(--w);
	transform: translateY(calc((1 - var(--w)) * 24px));
}

/* o botão só existe para o clique e o teclado quando já está entrando */
.t1-op.is-js:not(.is-cta) .t1-op-cta {
	visibility: hidden;
}

/* =====================================================================
   PÓDIO — as 3 maiores pontuações do ano
   Palco escuro, três degraus num piso que reflete e um foco de luz por degrau.
   O foco do 3º varre o palco e ele sobe de dentro do degrau; depois o 2º; aí as
   luzes baixam, o foco do centro varre e o 1º sobe, maior; é coroado (coroa,
   faíscas, confete, luz dourada) e as luzes voltam.
   No HTML a ordem é 3, 2, 1 (a da cerimônia; e o 1º pinta por cima dos
   vizinhos); o CSS põe 2 · 1 · 3 na tela.
   ===================================================================== */
.t1-p3,
.t1-p3 .t1-op-palco {
	background:
		radial-gradient(55% 40% at 50% 100%, rgba(255, 214, 140, .1), rgba(255, 214, 140, 0) 70%),
		linear-gradient(to bottom, #050505 0%, #0a0a0a 60%, #101010 100%);
}

/* título em cima; pódio e piso juntos embaixo */
.t1-p3 .t1-op-palco {
	justify-content: flex-start;
	padding-bottom: 0;
}

.t1-p3 .t1-p3-podio {
	margin-top: auto;
}

/* as luzes do palco baixam enquanto o 1º entra (.47 → .57) e voltam na coroação (.76 → .86) */
.t1-p3.is-js {
	--dim: calc(clamp(0, calc((var(--p) - .47) * 10), 1) * (1 - clamp(0, calc((var(--p) - .76) * 10), 1)));
}

/* o ano enorme, vazado, no fundo do palco */
.t1-p3-fundo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	pointer-events: none;
}

.t1-p3-fundo span {
	font-size: min(34vw, 46vh);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .09);
	transform: translateY(-4%);
}

/* luz dourada no chão depois da coroação */
.t1-p3 .t1-op-palco::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(42% 32% at 50% 90%, rgba(255, 196, 70, .16), rgba(255, 196, 70, 0) 70%);
	opacity: 0;
	transition: opacity 1.2s ease;
}

.t1-p3:not(.is-js) .t1-op-palco::after,
.t1-p3.is-coroado .t1-op-palco::after {
	opacity: 1;
}

.t1-p3-cab {
	position: relative;
	z-index: 4;
	padding: 0 24px;
	text-align: center;
}

.t1-op.is-js .t1-p3-cab {
	padding-top: clamp(1.25rem, 4.5vh, 2.75rem);
}

.t1-p3-cab .rz-eyebrow {
	margin-bottom: .55rem;
	color: var(--gold);
}

.t1-p3-cab h2 {
	margin: 0;
	font-size: clamp(1.55rem, 3vw, 2.4rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-wrap: balance;
	color: #fff;
}

/* a linha de contexto e, depois da coroação, o botão — no mesmo lugar */
.t1-p3-vez {
	display: grid;
	justify-items: center;
	min-height: 44px;
	margin-top: .9rem;
}

.t1-p3-vez > * {
	grid-area: 1 / 1;
	align-self: center;
}

.t1-p3-sub {
	max-width: 46ch;
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	text-wrap: balance;
	color: var(--mut-d);
	transition: opacity .4s ease, transform .4s ease;
}

.t1-p3.is-cta .t1-p3-vez--cta .t1-p3-sub {
	opacity: 0;
	transform: translateY(-8px);
}

/* sem JS as duas ficam, uma embaixo da outra */
.t1-p3:not(.is-js) .t1-p3-vez {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.t1-p3-cta {
	display: flex;
	justify-content: center;
}

.t1-p3-podio {
	--gap: clamp(.5rem, 2vw, 1.75rem);
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--gap);
	padding: 0 16px;
}

/* tamanho de cada lugar (o foco de luz usa os mesmos números para cair em cima do degrau) */
.t1-p3-lugar,
.t1-p3-luz {
	--lw: min(18vw, 24vh, 240px);
	--dh: min(9vh, 84px);
	--w: 1;
	--e: 1;
}

.t1-p3-lugar--1,
.t1-p3-luz--1 {
	--lw: min(23vw, 30vh, 300px);
	--dh: min(13vh, 120px);
	order: 2;
}

.t1-p3-lugar--2,
.t1-p3-luz--2 {
	order: 1;
}

.t1-p3-lugar--3,
.t1-p3-luz--3 {
	--dh: min(6vh, 56px);
	order: 3;
}

.t1-op.is-js .t1-p3-lugar,
.t1-op.is-js .t1-p3-luz {
	--w: clamp(0, calc((var(--p) - var(--a)) * 5), 1);
	--e: calc(1 - (1 - var(--w)) * (1 - var(--w)) * (1 - var(--w)));
}

.t1-p3-lugar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--lw);
}

/* ---------- os focos de luz: uma camada atrás do pódio, alinhada com as colunas ---------- */
.t1-p3-luzes {
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--gap);
	height: 100vh;
	padding: 0 16px;
	pointer-events: none;
}

.t1-p3-luz {
	position: relative;
	flex: 0 0 auto;
	width: var(--lw);
	height: 100%;
	margin-bottom: var(--dh);
}

/* o cone gira em volta da lâmpada (lá em cima): começa apontado para o lado e varre até o degrau */
.t1-p3-cone {
	position: absolute;
	left: -55%;
	bottom: 0;
	width: 210%;
	height: 160vh;
	transform-origin: 50% 0;
	transform: rotate(calc((1 - var(--e)) * var(--giro, 0deg)));
	clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
	background: linear-gradient(to top, rgba(255, 238, 200, .2), rgba(255, 238, 200, .06) 45%, rgba(255, 238, 200, 0) 80%);
	opacity: calc(var(--e) * (1 - var(--dim, 0) * .65));
}

.t1-p3-luz--1 .t1-p3-cone {
	opacity: var(--e);
}

/* o do 1º fica dourado quando ele é coroado */
.t1-p3-cone::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(255, 196, 70, .3), rgba(255, 196, 70, .09) 45%, rgba(255, 196, 70, 0) 80%);
	opacity: 0;
	transition: opacity .9s ease;
}

.t1-p3:not(.is-js) .t1-p3-luz--1 .t1-p3-cone::after,
.t1-p3.is-coroado .t1-p3-luz--1 .t1-p3-cone::after {
	opacity: 1;
}

/* poeira na luz (só se vê dentro do cone) */
.t1-p3-po {
	position: absolute;
	left: var(--x);
	bottom: var(--y);
	width: var(--s, 2px);
	height: var(--s, 2px);
	border-radius: 50%;
	background: rgba(255, 245, 225, .75);
	opacity: 0;
}

/* ---------- o card: sobe de dentro do degrau ---------- */
.t1-p3-card {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: clamp(.5rem, 1.5vh, 1rem);
	text-align: center;
	transform: translateY(calc((1 - var(--e)) * 140%));
	/* o que ainda está abaixo da base do degrau some (senão apareceria no reflexo do piso) */
	clip-path: inset(-100vh -100vw max(0px, calc((1 - var(--e)) * 140% - var(--dh))) -100vw);
}

.t1-p3-foto {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
}

.t1-p3-foto-in {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #151515;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .6);
	transition: box-shadow .7s ease;
}

.t1-p3-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.t1-op.is-js .t1-p3-img {
	filter: brightness(calc(.3 + .7 * var(--e)));
}

/* o 2º e o 3º ficam na penumbra enquanto o 1º entra */
.t1-op.is-js .t1-p3-lugar--2 .t1-p3-img,
.t1-op.is-js .t1-p3-lugar--3 .t1-p3-img {
	filter: brightness(calc((.3 + .7 * var(--e)) * (1 - var(--dim, 0) * .45)));
}

.t1-op.is-js .t1-p3-lugar--2 .t1-p3-info,
.t1-op.is-js .t1-p3-lugar--3 .t1-p3-info {
	opacity: calc(1 - var(--dim, 0) * .3);
}

.t1-p3:not(.is-js) .t1-p3-lugar--1 .t1-p3-foto-in,
.t1-p3.is-coroado .t1-p3-lugar--1 .t1-p3-foto-in {
	box-shadow: 0 0 0 2px var(--gold), 0 30px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 183, 0, .25);
}

.t1-p3-trofeu {
	position: absolute;
	z-index: 2;
	right: -13%;
	bottom: 3%;
	width: 40%;
	filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
}

.t1-p3-coroa {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: -.35rem;
	color: var(--gold);
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	line-height: 1;
	filter: drop-shadow(0 4px 12px rgba(255, 183, 0, .5));
	transform: translate(-50%, -100%);
}

.t1-op.is-js .t1-p3-coroa {
	opacity: 0;
	transform: translate(-50%, -30%) scale(.4);
	transition: opacity .25s ease, transform .55s cubic-bezier(.3, 1.6, .5, 1);
}

.t1-op.is-coroado .t1-p3-coroa {
	opacity: 1;
	transform: translate(-50%, -100%) scale(1);
}

/* a placa com nome, @, categoria e pontos: camada própria (sem ela a sombra da foto pinta por
   cima do nome) e fundo escuro (sob o foco de luz o dourado caía a 2,3:1 — medido) */
.t1-p3-info {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	margin-top: .75rem;
	padding: .6rem .5rem .7rem;
	border-radius: 14px;
	background: rgba(6, 6, 6, .82);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
	transition: box-shadow .7s ease;
}

.t1-p3:not(.is-js) .t1-p3-lugar--1 .t1-p3-info,
.t1-p3.is-coroado .t1-p3-lugar--1 .t1-p3-info {
	box-shadow: inset 0 0 0 1px rgba(255, 183, 0, .5);
}

.t1-p3-nome {
	max-width: 100%;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
	/* um @ sem espaço ("patricksartorifotografia") vazava da placa para a luz (4,4:1 — medido) */
	overflow-wrap: anywhere;
	color: #fff;
	text-decoration: none;
}

/* resultados.js mede a largura do nome numa linha só e encolhe a fonte até caber */
.t1-p3-nome.is-medindo {
	display: inline-block;
	width: max-content;
	max-width: none;
	white-space: nowrap;
	overflow-wrap: normal;
}

a.t1-p3-nome:hover {
	color: var(--gold);
}

a.t1-p3-nome:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.t1-p3-arroba {
	max-width: 100%;
	overflow: hidden;
	font-size: .74rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	color: rgba(255, 255, 255, .76);
	transition: color .2s ease;
}

.t1-p3-arroba:hover {
	color: var(--gold);
}

.t1-p3-arroba:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.t1-p3-cat {
	margin-top: .15rem;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
}

.t1-p3-pts {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	margin-top: .3rem;
}

.t1-p3-pts b {
	font-size: 1.55rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.t1-p3-pts small {
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-d);
}

.t1-p3-lugar--1 .t1-p3-nome {
	font-size: 1.3rem;
}

.t1-p3-lugar--1 .t1-p3-pts b {
	font-size: 2.2rem;
}

/* ---------- os degraus: encostam um no outro e refletem no piso ---------- */
.t1-p3-degrau {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: calc(100% + var(--gap));
	height: var(--dh);
	margin: 0 calc(var(--gap) / -2);
	background: linear-gradient(to bottom, #303030, #1b1b1b 35%, #111);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 1px 0 0 rgba(255, 255, 255, .05), inset -1px 0 0 rgba(0, 0, 0, .6);
	-webkit-box-reflect: below 0 linear-gradient(transparent 40%, rgba(255, 255, 255, .26));
}

/* a poça de luz no topo do degrau */
.t1-p3-degrau::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 110%;
	height: 30px;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(255, 238, 200, .28), rgba(255, 238, 200, 0));
	opacity: var(--e);
	pointer-events: none;
}

/* a fresta de luz do elevador: acende enquanto o card sobe e apaga quando ele chega */
.t1-p3-degrau::after {
	content: '';
	position: absolute;
	left: 6%;
	right: 6%;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .95), rgba(255, 236, 190, 0));
	box-shadow: 0 0 18px 4px rgba(255, 220, 150, .45);
	opacity: calc(var(--w) * (1 - var(--w)) * 4);
	pointer-events: none;
}

.t1-p3-degrau span {
	font-size: calc(var(--dh) * .56);
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
	transition: color .6s ease, -webkit-text-stroke-color .6s ease;
}

.t1-p3:not(.is-js) .t1-p3-lugar--1 .t1-p3-degrau,
.t1-p3.is-coroado .t1-p3-lugar--1 .t1-p3-degrau {
	box-shadow: inset 0 2px 0 var(--gold), inset 1px 0 0 rgba(255, 255, 255, .05), inset -1px 0 0 rgba(0, 0, 0, .6);
}

.t1-p3:not(.is-js) .t1-p3-lugar--1 .t1-p3-degrau span,
.t1-p3.is-coroado .t1-p3-lugar--1 .t1-p3-degrau span {
	color: var(--gold);
	-webkit-text-stroke-color: var(--gold);
}

/* o piso (o reflexo dos degraus cai nele) */
.t1-p3-chao {
	position: relative;
	z-index: 1;
	height: clamp(32px, 6vh, 64px);
	background: linear-gradient(to bottom, #151515, #080808);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* confete da coroação (cai uma vez, por cima de tudo) */
.t1-confete {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.t1-confete i {
	position: absolute;
	top: -4%;
	left: var(--x);
	width: var(--w2, 8px);
	height: var(--h2, 14px);
	border-radius: 1px;
	background: var(--c, #ffb700);
	opacity: 0;
}

/* faíscas de ouro que estouram quando ele é coroado */
.t1-faiscas {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.t1-faiscas i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
	opacity: 0;
	box-shadow: 0 0 10px rgba(255, 200, 60, .9);
}

/* sem foto: iniciais grandes no ouro escuro */
.t1-mono {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(80% 80% at 30% 20%, rgba(255, 183, 0, .28), rgba(255, 183, 0, 0) 60%),
		linear-gradient(160deg, #2a2108, #121212 70%);
	color: var(--gold);
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	font-weight: 700;
	letter-spacing: .02em;
}

/* =====================================================================
   ÍNDICE — a lista com a vitrine ao lado (ranking e Top 1); as linhas e a
   vitrine de cada página moram na folha dela
   ===================================================================== */
.t1-indice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	align-items: start;
	gap: clamp(2rem, 4.5vw, 4rem);
}

.t1-indice:not(.is-js) {
	grid-template-columns: minmax(0, 1fr);
}

.t1-indice:not(.is-js) .t1-vitrine {
	display: none;
}

.t1-indice .t1-busca {
	justify-content: space-between;
	margin: 0 0 1.25rem;
}

.t1-indice .t1-painel-sub {
	max-width: none;
	margin: 0 0 1rem;
	text-align: left;
}

.t1-mais {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* o display:flex acima venceria o atributo hidden */
.t1-mais[hidden],
.t1-painel.is-todos .t1-mais,
.t1-painel.is-buscando .t1-mais {
	display: none;
}

.t1-sem {
	margin: 1rem 0 0;
	text-align: center;
	font-style: italic;
	color: var(--mut-l);
}

@media (prefers-reduced-motion: no-preference) {
	/* coroação: as faíscas estouram uma vez em volta do 1º */
	.t1-op.is-coroado .t1-faiscas i {
		animation: t1-faisca 1.4s cubic-bezier(.15, .7, .3, 1) both;
		animation-delay: calc(var(--d, 0) * 1ms);
	}

	@keyframes t1-faisca {
		0% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(.6);
		}

		70% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 30px)) scale(.2);
		}
	}
	/* poeira subindo devagar dentro dos focos */
	.t1-p3-po {
		animation: t1-po var(--t, 7s) linear var(--d, 0s) infinite;
	}

	@keyframes t1-po {
		0% {
			opacity: 0;
			transform: translate(0, 0);
		}

		20% {
			opacity: .75;
		}

		80% {
			opacity: .5;
		}

		100% {
			opacity: 0;
			transform: translate(var(--dx, 10px), -120px);
		}
	}

	/* confete: papel girando e balançando enquanto cai */
	.t1-p3.is-coroado .t1-confete i {
		animation: t1-confete var(--t, 3s) cubic-bezier(.25, .6, .45, 1) var(--d, 0ms) both;
	}

	@keyframes t1-confete {
		0% {
			opacity: 1;
			transform: translate3d(0, 0, 0) rotate(var(--r0, 0deg)) rotateY(0deg);
		}

		25% {
			transform: translate3d(var(--sw, 20px), 28vh, 0) rotate(calc(var(--r0, 0deg) + 120deg)) rotateY(180deg);
		}

		50% {
			transform: translate3d(calc(var(--sw, 20px) * -1), 56vh, 0) rotate(calc(var(--r0, 0deg) + 240deg)) rotateY(360deg);
		}

		85% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate3d(var(--sw, 20px), 104vh, 0) rotate(calc(var(--r0, 0deg) + 400deg)) rotateY(540deg);
		}
	}

	/* a vitrine troca o texto subindo de leve (ranking e Top 1) */
	@keyframes t1-vt {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* o cabeçalho do site gruda no topo até 1024px: o palco gruda logo abaixo dele */
@media (max-width: 1024px) {
	.t1-op.is-js .t1-op-palco {
		top: 56px;
		height: calc(100vh - 56px);
		height: calc(100svh - 56px);
	}
}

/* sem espaço para a vitrine: a lista ocupa tudo */
@media (max-width: 960px) {
	.t1-indice,
	.t1-indice:not(.is-js) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	/* pódio: o título desce para perto do pódio e o alto fica para as luzes */
	.t1-p3 .t1-op-palco {
		justify-content: flex-end;
	}

	.t1-p3 .t1-p3-cab {
		margin-bottom: 3rem;
	}

	.t1-p3 .t1-p3-podio {
		margin-top: 0;
	}

	.t1-p3-cab h2 {
		font-size: 1.45rem;
	}

	.t1-p3-sub {
		font-size: .85rem;
	}

	.t1-p3-podio,
	.t1-p3-luzes {
		--gap: .4rem;
		padding: 0 10px;
	}

	.t1-p3-lugar,
	.t1-p3-luz {
		--lw: 27vw;
		--dh: 10.5vh;
	}

	.t1-p3-lugar--1,
	.t1-p3-luz--1 {
		--lw: 37vw;
		--dh: 15vh;
	}

	.t1-p3-lugar--3,
	.t1-p3-luz--3 {
		--dh: 7vh;
	}

	.t1-p3-foto-in {
		border-radius: 12px;
	}

	.t1-p3-info {
		margin-top: .45rem;
		padding: .45rem .25rem .5rem;
		border-radius: 10px;
	}

	.t1-p3-nome {
		font-size: .76rem;
	}

	.t1-p3-lugar--1 .t1-p3-nome {
		font-size: .88rem;
	}

	.t1-p3-arroba {
		font-size: .6rem;
	}

	.t1-p3-cat {
		font-size: .5rem;
		letter-spacing: .08em;
	}

	.t1-p3-pts b {
		font-size: 1.05rem;
	}

	.t1-p3-lugar--1 .t1-p3-pts b {
		font-size: 1.4rem;
	}

	.t1-p3-pts small {
		display: none;
	}

	.t1-p3-trofeu {
		right: -10%;
		bottom: 3%;
		width: 46%;
	}

	.t1-p3-fundo span {
		font-size: 38vw;
		transform: translateY(-30%);
	}

	.t1-indice .t1-busca {
		justify-content: center;
	}

	.t1-mono {
		font-size: 2.2rem;
	}
}