/* ============================================================
   GALERIAS / RESULTADOS — Instinto Criativo
   Redesenhado em 09/10/2026 (mocks aprovados pelo dono em 08 e 09/10): sai o
   "fundo escuro contínuo" de 29/09. A página alterna superfícies como o resto
   do site, cada uma com papel: hero escuro com a foto vencedora, barra cinza,
   pódio em branco, a galeria em PRETO (a foto grande merece o preto), jurados
   em cinza e o fecho em grafite. Ouro só como acento; foto protagonista.

   Carrega por ÚLTIMO nas 4 views de view/galerias/ (chave css_galerias:
   hotsite.css > hotsite-nx.css > resultados.css > este). A base comum
   (tokens, superfícies, cabeçalhos, botões, fecho, hero com parede, barra
   comum) mora em resultados.css; aqui fica o que é só das galerias: a página
   de cada concurso (prefixo rz-) e o hub (prefixo hb-).

   ⚠️ hotsite-nx.css tem regras `!important` (preço/nota em dourado, selos de
   categoria, padding de .section-filtros) que vencem mesmo assim: as classes
   daqui evitam os nomes daquela lista.
   ⚠️ 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>.
   ============================================================ */

/* =====================================================================
   1 · HERO — a foto vencedora em tela cheia
   ===================================================================== */
/* Altura medida para caber inteiro na 1ª dobra do computador (cabeçalho do site
   de 340px + hero ≤ 900): com 76vh o crédito do autor ficava abaixo da dobra. */
.rz-hero {
	position: relative;
	min-height: clamp(460px, 62vh, 640px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--d);
	color: #fff;
}

.rz-hero-foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rz-hero-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Escuro firme só na COLUNA DO TEXTO (esquerda + pé); direita e topo da foto
   respiram. Medido no pior pixel atrás do texto. */
.rz-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, rgba(8, 8, 10, .88) 0%, rgba(8, 8, 10, .76) 38%, rgba(8, 8, 10, .55) 54%, rgba(8, 8, 10, .12) 70%, rgba(8, 8, 10, 0) 82%),
		linear-gradient(to top, rgba(8, 8, 10, .9) 0%, rgba(8, 8, 10, .45) 30%, rgba(8, 8, 10, 0) 62%),
		linear-gradient(to bottom, rgba(8, 8, 10, .3) 0%, rgba(8, 8, 10, 0) 18%);
}

.rz-hero-conteudo {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: clamp(3rem, 7vw, 5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.rz-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);
	backdrop-filter: blur(6px);
	color: var(--gold);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* honrosas: o selo do hero sem o ouro (reconhecimento, não vitória) */
.rz-hero-badge--neutro {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
	color: #f2f2f0;
}

.rz-hero-titulo {
	margin: 1.1rem 0 0;
	max-width: 20ch;
	font-size: clamp(2.1rem, 5.6vw, 4.2rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.03em;
	color: #fff;
}

.rz-destaque-autor b a {
	color: inherit;
	text-decoration: none;
}

.rz-destaque-autor b a:hover {
	color: var(--gold);
}

/* os números do round, embaixo do título (premiadas) */
.rz-hero-numeros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 0;
	margin: 1.1rem 0 0;
	font-size: .95rem;
	color: rgba(255, 255, 255, .82);
}

.rz-hero-numeros span {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
}

.rz-hero-numeros span + span::before {
	content: '';
	width: 4px;
	height: 4px;
	margin: 0 .85rem;
	border-radius: 50%;
	background: var(--gold);
	align-self: center;
}

.rz-hero-numeros b {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   2 · BARRA — cinza fina, gruda no topo (usa .section-filtros do site)
   ===================================================================== */
.rz-nav.section-filtros {
	position: sticky;
	top: 0;
	z-index: 30;
	/* mais baixa que a barra de filtros do site (pedido do dono, 11/10/2026): o
	   !important só vence o .95rem !important do hotsite-nx.css */
	padding-top: .5rem !important;
	padding-bottom: .5rem !important;
	transition: transform .3s ease, opacity .3s ease;
}

/* na galeria oficial (a grade de todas as fotos) a barra sai de cena, para a foto
   ficar sozinha na tela (pedido do dono, 12/10/2026; galerias.js::ligarBarraRecolhe) */
.rz-nav.section-filtros.is-recolhida {
	transform: translateY(-110%);
	opacity: 0;
	pointer-events: none;
}

/* até 1024px o cabeçalho do site também gruda (56px): a barra gruda logo abaixo
   dele, senão ficava com 56px escondidos atrás (medido em 09/10/2026) */
@media (max-width: 1024px) {
	.rz-nav.section-filtros {
		top: 56px;
	}
}

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

.rz-nav-voltar {
	margin-right: auto;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 34px;
	color: #555;
	font-size: .78rem;
	text-decoration: none;
	transition: color .2s ease;
}

.rz-nav-voltar:hover {
	color: var(--gold-ink);
}

.rz-aba {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 34px;
	padding: .3rem .95rem;
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0de;
	color: #333;
	font-size: .79rem;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.rz-aba:hover {
	box-shadow: inset 0 0 0 1px #111;
}

.rz-aba:focus-visible,
.rz-nav-voltar:focus-visible {
	outline: 2px solid var(--gold-ink);
	outline-offset: 2px;
}

.rz-aba.is-ativa {
	background: #111;
	box-shadow: inset 0 0 0 1px #111;
	color: #fff;
	font-weight: 600;
}

.rz-aba-qtd {
	color: var(--mut-l);
	font-variant-numeric: tabular-nums;
}

.rz-aba.is-ativa .rz-aba-qtd {
	color: rgba(255, 255, 255, .78);
}

.rz-aba-curto {
	display: none;
}

/* prévia do admin (concurso ainda não publicado): o público não vê esta página */
.rz-previa {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 34px;
	padding: .3rem .9rem;
	border-radius: var(--r-pill);
	border: 1px dashed #9a9a97;
	background: #fff;
	color: #555;
	font-size: .8rem;
	font-weight: 600;
}

/* =====================================================================
   3 · FAIXA "VOCÊ" — grafite, só para quem classificou (decidida no PHP)
   ===================================================================== */
.rz-voce {
	background: var(--graph);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 183, 0, .3);
	padding: 1.15rem 0;
}

.rz-voce-inner {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
}

/* com a faixa "você" em cima, o hero encolhe para o conteúdo: o título e o
   crédito continuam na 1ª dobra */
.rz-voce + .rz-hero {
	min-height: 0;
}

/* o troféu pela altura (os três têm larguras diferentes) e com o brilho do metal */
.rz-voce-trofeu {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 56px;
	height: 64px;
	flex: 0 0 auto;
}

.rz-voce-trofeu img {
	display: block;
	max-height: 100%;
	width: auto;
	filter: drop-shadow(0 6px 14px rgba(255, 183, 0, .35));
}

.rz-voce-trofeu--2 img {
	filter: drop-shadow(0 6px 12px rgba(200, 200, 200, .3));
}

.rz-voce-trofeu--3 img {
	filter: drop-shadow(0 6px 12px rgba(205, 127, 50, .35));
}

/* fora do Top 3 de artistas: a posição da melhor foto num selo */
.rz-voce-pos {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 2px var(--gold);
	color: var(--gold);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* honrosas: medalha sem metal (reconhecimento, não vitória) */
.rz-voce-medalha {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	background: #171717;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	color: #e8e8e6;
	font-size: 1.15rem;
}

.rz-voce-texto {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.rz-voce-eyebrow {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
}

.rz-voce-titulo {
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.2;
}

.rz-voce-sub {
	font-size: .84rem;
	color: var(--mut-d);
}

.rz-voce-sub b {
	color: #fff;
}

.rz-voce-foto {
	width: 58px;
	height: 58px;
	border-radius: var(--r-md);
	overflow: hidden;
	margin-left: auto;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.rz-voce-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rz-voce-acoes {
	display: flex;
	gap: .5rem;
	flex: 0 0 auto;
}

/* =====================================================================
   4 · PÓDIO Top 3 artistas — o troféu da HOME num palco escuro no topo do card:
   o mesmo arquivo, tamanho (300px; 150/110 no tablet; 117/86 no celular), a
   mesma sombra e o mesmo brilho do hover, sem o cursor. O avatar encaixa entre o
   palco e o corpo branco; os números em dois blocos no pé.
   ===================================================================== */
/* Degraus intencionais: os três cards terminam na mesma linha e começam em
   alturas diferentes (1º mais alto, depois 2º, depois 3º). */
.rz-podio {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 340px));
	justify-content: center;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0 auto;
}

/* o confete do pódio (o PHP gera os papéis; cai em MOVIMENTO, no fim do arquivo):
   parado ele não aparece, então sem JS e com movimento reduzido não há confete */
.rz-confete {
	position: absolute;
	inset: -24px 0 0;
	z-index: 6;
	overflow: hidden;
	pointer-events: none;
}

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

.rz-podio-card {
	--metal: #cfcfcf;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line-l);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
	transition: box-shadow .25s ease;
}

.rz-podio-card:hover {
	box-shadow: var(--sh-card-h);
}

.rz-podio-card--1 {
	--metal: var(--gold);
	order: 2;
	border-color: rgba(255, 183, 0, .5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 54px rgba(255, 183, 0, .18);
}

.rz-podio-card--2 {
	order: 1;
	margin-top: 2.25rem;
}

.rz-podio-card--3 {
	--metal: #d8a26a;
	order: 3;
	margin-top: 3.75rem;
}

/* o palco: o mesmo escuro do hero da home, onde o brilho do troféu aparece */
.rz-podio-palco {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* 300px do troféu + o espaço do avatar, que entra 68/104px no palco (mais uma
	   folga): sem isso ele cobria a base do troféu */
	height: 386px;
	padding-bottom: 74px;
	border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
	background: radial-gradient(60% 55% at 50% 60%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%), #1a1a1a;
}

/* o avatar do 1º entra 84px no palco: o troféu sobe para não ficar coberto */
.rz-podio-card--1 .rz-podio-palco {
	height: 422px;
	padding-bottom: 112px;
	background: radial-gradient(62% 58% at 50% 58%, rgba(255, 183, 0, .16), rgba(255, 183, 0, 0) 70%), #1a1a1a;
}

/* fio do metal no topo do palco */
.rz-podio-palco::before {
	content: '';
	position: absolute;
	top: 0;
	left: 26px;
	right: 26px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--metal);
}

.rz-podio-trofeu {
	position: relative;
	z-index: 1;
	display: block;
	width: 300px;
	height: 300px;
	max-width: 100%;
	object-fit: contain;
	transition: transform .3s ease, filter .3s ease;
	will-change: transform, filter;
}

.rz-podio-card--1 .rz-podio-trofeu {
	filter: drop-shadow(0 4px 15px rgba(255, 215, 0, .4));
}

.rz-podio-card--2 .rz-podio-trofeu {
	filter: drop-shadow(0 3px 12px rgba(192, 192, 192, .3));
}

.rz-podio-card--3 .rz-podio-trofeu {
	filter: drop-shadow(0 3px 12px rgba(205, 127, 50, .3));
}

/* o miolo cresce e empurra os números para o pé do card */
.rz-podio-info {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: center;
	padding: 0 1.4rem 1.25rem;
	text-align: center;
}

/* avatar grande, metade sobre o palco, com o anel do metal; o do 1º bem maior,
   como no desenho do dono (10/10/2026) */
/* maior que a 1ª versão (104/168 → 120/184 → 136/208; pedido do dono, 12/10/2026) */
.rz-podio-av {
	position: relative;
	z-index: 2;
	width: 136px;
	height: 136px;
	margin: -68px 0 .85rem;
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px var(--metal), 0 12px 28px rgba(0, 0, 0, .22);
	font-size: 1.8rem;
}

.rz-podio-card--1 .rz-podio-av {
	width: 208px;
	height: 208px;
	margin-top: -104px;
	border-width: 5px;
	margin-bottom: 1rem;
	box-shadow: 0 0 0 3px var(--metal), 0 10px 26px rgba(0, 0, 0, .2);
	font-size: 2.6rem;
}

/* acima da sombra do avatar (que é posicionado e pinta por cima do que vem depois) */
.rz-selo {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .6rem;
	padding: .3rem .75rem;
	border-radius: var(--r-pill);
	background: #f1f1ef;
	color: #4b4b49;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.rz-podio-card--1 .rz-selo {
	background: rgba(255, 183, 0, .16);
	color: var(--gold-ink);
}

.rz-podio-card--3 .rz-selo {
	background: rgba(216, 162, 106, .18);
	color: #74491c;
}

.rz-podio-ident {
	max-width: 100%;
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rz-podio-card--1 .rz-podio-ident {
	font-size: 1.32rem;
}

.rz-podio-nome {
	color: var(--ink);
	text-decoration: none;
	transition: color .2s ease;
}

a.rz-podio-nome:hover {
	color: var(--gold-ink);
}

/* cidade numa linha e o Instagram na outra (pedido do dono, 11/10/2026: lado a lado,
   uma cidade longa jogava o Instagram para baixo só num dos cards) */
.rz-podio-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	margin: .55rem 0 0;
	font-size: .8rem;
	/* um tom abaixo do --mut-l: no celular a letra menor media 4,5:1 no limite */
	color: #5b5b59;
}

.rz-podio-meta span,
.rz-podio-ig {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.rz-podio-ig {
	color: #5b5b59;
	text-decoration: none;
	transition: color .2s ease;
}

.rz-podio-ig:hover {
	color: var(--gold-ink);
}

/* a obra que levou o artista ao pódio: miniatura que abre ampliada */
.rz-podio-obra {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 0 1.1rem 1.1rem;
	padding: .55rem .8rem .55rem .55rem;
	border-radius: var(--r-md);
	background: #f7f6f2;
	box-shadow: inset 0 0 0 1px var(--line-l);
	color: var(--ink);
	text-decoration: none;
	transition: background .2s ease, box-shadow .2s ease;
}

.rz-podio-obra:hover {
	background: #fff8e1;
	box-shadow: inset 0 0 0 1px rgba(255, 183, 0, .55);
}

.rz-podio-obra:focus-visible {
	outline: none;
}

.rz-podio-obra img {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
	transition: transform .3s ease;
}

.rz-podio-obra:hover img {
	transform: scale(1.06);
}

.rz-podio-obra span {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	text-align: left;
}

.rz-podio-obra b {
	font-size: .84rem;
	font-weight: 600;
}

.rz-podio-obra small {
	overflow: hidden;
	font-size: .74rem;
	color: #5b5b59;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* o título da coleção numa linha própria, acima da média; pode ir a duas linhas
   (o título tem até 40 caracteres) em vez de cortar */
.rz-podio-obra small.rz-podio-obra-tit {
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.35;
	color: var(--ink);
}

.rz-podio-obra i {
	flex: 0 0 auto;
	color: var(--gold-ink);
	font-size: .85rem;
}

/* números em dois blocos, como rodapé do card */
.rz-podio-num {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	border-top: 1px solid var(--line-l);
}

.rz-podio-num div {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: .2rem;
	padding: .95rem .5rem 1.05rem;
}

.rz-podio-num div + div {
	border-left: 1px solid var(--line-l);
}

.rz-podio-num dd {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.rz-podio-card--1 .rz-podio-num dd {
	color: var(--gold-ink);
}

.rz-podio-num dt {
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mut-l);
}

/* pódio com 1 ou 2 (vazio com dignidade) */
.rz-podio--1 {
	grid-template-columns: minmax(0, 340px);
}

.rz-podio--2 {
	grid-template-columns: repeat(2, minmax(0, 340px));
}

.rz-podio--1 .rz-podio-card--1,
.rz-podio--2 .rz-podio-card--1 {
	order: 0;
}

/* o hover da home (sobe, cresce, gira de leve e o brilho pulsa), sem o cursor. O
   seletor com .rz-js .rz-podio.is-in é mais forte que o da entrada (MOVIMENTO, no
   fim do arquivo): o hover troca a animação de entrada e segue valendo depois dela */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.rz-podio-card--1:hover .rz-podio-trofeu,
	.rz-js .rz-podio.is-in .rz-podio-card--1:hover .rz-podio-trofeu {
		transform: scale(1.2) translateY(-12px);
		filter: drop-shadow(0 12px 35px rgba(255, 215, 0, .8)) brightness(1.3);
		animation: rz-brilho-ouro 1.5s ease-in-out infinite alternate;
	}

	.rz-podio-card--2:hover .rz-podio-trofeu,
	.rz-js .rz-podio.is-in .rz-podio-card--2:hover .rz-podio-trofeu {
		transform: scale(1.15) rotate(-3deg) translateY(-10px);
		filter: drop-shadow(0 10px 30px rgba(192, 192, 192, .6)) brightness(1.2);
		animation: rz-brilho-prata 1.5s ease-in-out infinite alternate;
	}

	.rz-podio-card--3:hover .rz-podio-trofeu,
	.rz-js .rz-podio.is-in .rz-podio-card--3:hover .rz-podio-trofeu {
		transform: scale(1.12) rotate(3deg) translateY(-8px);
		filter: drop-shadow(0 8px 25px rgba(205, 127, 50, .5)) brightness(1.15);
		animation: rz-brilho-bronze 1.5s ease-in-out infinite alternate;
	}
}

@keyframes rz-brilho-ouro {
	0% {
		filter: drop-shadow(0 12px 35px rgba(255, 215, 0, .8)) brightness(1.3);
	}

	100% {
		filter: drop-shadow(0 15px 45px rgba(255, 215, 0, 1)) brightness(1.5);
	}
}

@keyframes rz-brilho-prata {
	0% {
		filter: drop-shadow(0 10px 30px rgba(192, 192, 192, .6)) brightness(1.2);
	}

	100% {
		filter: drop-shadow(0 12px 35px rgba(192, 192, 192, .8)) brightness(1.4);
	}
}

@keyframes rz-brilho-bronze {
	0% {
		filter: drop-shadow(0 8px 25px rgba(205, 127, 50, .5)) brightness(1.15);
	}

	100% {
		filter: drop-shadow(0 10px 30px rgba(205, 127, 50, .7)) brightness(1.3);
	}
}

/* tablet: os tamanhos da home nessa largura (1º 150px, os outros 110px) */
@media (min-width: 761px) and (max-width: 1024px) {
	.rz-podio-palco {
		height: 220px;
		padding-bottom: 58px;
	}

	.rz-podio-card--1 .rz-podio-palco {
		height: 242px;
		padding-bottom: 78px;
	}

	.rz-podio-trofeu {
		width: 110px;
		height: 110px;
	}

	.rz-podio-card--1 .rz-podio-trofeu {
		width: 150px;
		height: 150px;
	}

	.rz-podio-info {
		padding: 0 1rem 1.1rem;
	}

	.rz-podio-av {
		width: 104px;
		height: 104px;
		margin-top: -52px;
		font-size: 1.6rem;
	}

	.rz-podio-card--1 .rz-podio-av {
		width: 144px;
		height: 144px;
		margin-top: -72px;
		font-size: 2.1rem;
	}
}

/* =====================================================================
   5 · GALERIA — preto: o destaque (foto inteira) e a grade justificada
   ===================================================================== */
.rz-destaque {
	max-width: 940px;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.rz-destaque-fig {
	position: relative;
	height: min(56vh, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px rgba(0, 0, 0, .55);
}

/* largura fixa de propósito: sem ela, o max-height passa pela proporção para a largura
   e a moldura encolhia até a foto, desalinhada da legenda */
.rz-destaque-fig.tem-proporcao {
	width: 100%;
	height: auto;
	aspect-ratio: var(--ar);
	max-height: min(56vh, 520px);
}

.rz-destaque-fig > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.rz-destaque-fig img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* foto: nenhum anel de foco (Tab) — só o hover (pedido do dono, 12/10/2026; o anel
   somado à borda do hover dava duas linhas douradas) */
.rz-destaque-fig a:focus-visible {
	outline: none;
}

.rz-destaque-selo {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .38rem .9rem;
	border-radius: var(--r-pill);
	background: var(--gold);
	color: #000;
	font-size: .72rem;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	pointer-events: none;
}

/* foto EM PÉ no computador: a foto à esquerda na altura da tela e, ao lado, a ficha
   (nota, autor) e a série; no celular volta ao empilhado */
@media (min-width: 761px) {
	.rz-destaque--retrato {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: "foto ." "foto cap" "foto serie" "foto .";
		column-gap: clamp(1.75rem, 4vw, 3.25rem);
		max-width: 1040px;
	}

	.rz-destaque--retrato .rz-destaque-fig.tem-proporcao {
		grid-area: foto;
		width: auto;
		height: min(72vh, 660px);
		max-height: none;
	}

	.rz-destaque--retrato .rz-destaque-cap {
		grid-area: cap;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.4rem;
		margin-top: 0;
		padding: 0;
	}

	.rz-destaque--retrato .rz-destaque-serie {
		grid-area: serie;
		margin-top: 1.6rem;
	}
}

/* coleção campeã: as demais fotos da série, QUATRO por linha (até 7 + "+N"), um
   pouco menores que a 1ª versão, com o rótulo em cima (pedido do dono, 12/10/2026) */
.rz-destaque-serie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
	margin-top: .9rem;
}

.rz-destaque-serie-rot {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding: 0 0 .15rem .1rem;
	font-size: .66rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-d);
}

.rz-destaque-serie-rot b {
	font-size: 1.7rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	color: var(--gold);
}

.rz-destaque-serie > a:not([hidden]) {
	position: relative;
	display: block;
	min-width: 0;
	/* sem clique (só o "+N" abre a coleção): o mouse em cima mostra a foto na capa */
	cursor: default;
	height: clamp(64px, 7vw, 100px);
	overflow: hidden;
	border-radius: var(--r-md);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

/* a mesma borda dourada do hover das grades (Vencedores Gerais, campeã) */
.rz-destaque-serie > a:not([hidden])::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1.5px var(--gold);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.rz-destaque-serie > a:not([hidden]):hover::after {
	opacity: 1;
}

/* a 7ª miniatura com mais fotos atrás: "+N" por cima, e o clique abre a coleção
   inteira no visor (pedido do dono, 12/10/2026) */
.rz-destaque-serie > a.rz-serie-mais {
	cursor: pointer;
}

@media (max-width: 760px) {
	.rz-destaque-serie {
		gap: .4rem;
	}

	.rz-destaque-serie > a:not([hidden]) {
		height: 66px;
	}
}

.rz-destaque-serie img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.rz-destaque-serie a:hover img {
	transform: scale(1.06);
}

.rz-destaque-serie a:focus-visible {
	outline: none;
}

.rz-destaque-serie-mais {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .58);
	color: #fff;
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	font-weight: 600;
	letter-spacing: .02em;
	pointer-events: none;
}

.rz-destaque-cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
	padding: 0 .25rem;
}

.rz-destaque-nota {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.rz-destaque-nota b {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 300;
	line-height: 1;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.rz-destaque-nota span {
	font-size: .68rem;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-d);
}

.rz-destaque-autor {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.rz-destaque-autor .rz-av {
	width: 42px;
	height: 42px;
	font-size: .85rem;
}

.rz-destaque-autor b {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff;
}

.rz-destaque-autor div > span {
	display: block;
	font-size: .82rem;
	color: var(--mut-d);
}

.rz-destaque-tit {
	display: block;
	font-style: normal;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--gold);
}

.rz-destaque-ig {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .2rem;
	font-size: .78rem;
	color: var(--mut-d);
	text-decoration: none;
}

.rz-destaque-ig:hover {
	color: var(--gold);
}

/* imagem que não resolve (capa de coleção vazia, arquivo apagado) */
.rz-sem-foto {
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: repeating-linear-gradient(135deg, #151515 0 12px, #1b1b1b 12px 24px);
}

/* grade: sem JS, grade simples; com JS (.is-justificada) linhas de mesma altura
   que preenchem a largura, cada foto INTEIRA (galerias.js calcula as larguras) */
.rz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-auto-rows: 220px;
	gap: 6px;
	max-width: 1280px;
	margin: 0 auto;
}

.rz-grid.is-justificada {
	display: flex;
	flex-wrap: wrap;
}

.rz-cell {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-xs);
	background: #111;
}

.rz-cell > a {
	display: block;
	width: 100%;
	height: 100%;
}

.rz-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.rz-cell:hover img {
	transform: scale(1.045);
}

/* premiadas: borda dourada fina ao passar o mouse, em Vencedores Gerais e nas
   campeãs (pedido do dono, 11/10/2026). Do lado de DENTRO da foto, num ::after por
   cima dela: do lado de fora encostaria na vizinha (a grade tem 6px entre as fotos) */
.rz-galeria--ampla .rz-cell::after,
.rz-campeas-sec .rz-destaque-fig::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	/* 1,5px (era 2px; o dono pediu mais fina em 11/10/2026) */
	box-shadow: inset 0 0 0 1.5px var(--gold);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.rz-galeria--ampla .rz-cell:hover::after,
.rz-campeas-sec .rz-destaque-fig:hover::after {
	opacity: 1;
}

.rz-cell > a:focus-visible {
	outline: none;
}

/* as demais fotos de uma coleção: links do lightbox sem nada na tela
   (o display:block de .rz-cell > a venceria o [hidden]) */
.galeria-zoom[hidden] {
	display: none !important;
}

/* coleção na grade: quantas fotos tem a série (canto oposto ao da posição) */
.rz-cell-serie {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .18rem .55rem;
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, .72);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	pointer-events: none;
}

.rz-cell-serie i {
	color: var(--gold);
}

/* célula estreita: só o ícone e o número, senão o selo encosta no da posição */
.rz-cell.is-estreita .rz-cell-serie span {
	display: none;
}

/* selo e legenda por cima da foto: o clique passa direto para a foto */
.rz-cell-rank,
.rz-cell-cap {
	pointer-events: none;
}

/* 4º em diante: pílula neutra de vidro; metal só no 1º-3º das premiadas */
.rz-cell-rank {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: .18rem .5rem;
	border-radius: var(--r-pill);
	/* .5 caía a 4,0:1 sobre foto branca (medido): .72 segura acima de 9:1. Sem
	   backdrop-filter (12/10/2026): dentro do conteúdo que entra com transição, o
	   desfoque de fundo fazia o Chrome piscar a grade em branco */
	background: rgba(0, 0, 0, .72);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rz-cell-rank.r1 {
	background: var(--gold);
	box-shadow: none;
	color: #000;
}

.rz-cell-rank.r2 {
	background: #dcdcdc;
	box-shadow: none;
	color: #000;
}

.rz-cell-rank.r3 {
	background: #e0b483;
	box-shadow: none;
	color: #000;
}

/* legenda SEMPRE visível (sem depender de hover) */
.rz-cell-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	/* a legenda do topo do visor (print do dono, 13/10/2026): retrato + nome numa linha
	   e, embaixo, "título · média N", tudo à esquerda */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .1rem;
	padding: 34px .75rem .6rem;
	/* véu firme na faixa do texto: com .4 a 45% a média dourada caía a 1,65:1 sobre
	   foto clara (medido em 09/10/2026); .82 até o meio segura em qualquer foto */
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .82) 55%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	font-size: .8rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* sem overflow:hidden aqui: cortava o anel do retrato (quem corta o nome é .rz-cell-nome) */
.rz-cell-cap b {
	display: flex;
	align-items: center;
	gap: .4rem;
	max-width: 100%;
	min-width: 0;
	padding: 2px 0;
	font-weight: 600;
}

/* o retrato pequeno ao lado do nome (13/10/2026) — o nome é quem recebe o ellipsis */
.rz-cell-nome {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rz-cell .rz-cell-av {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	font-size: .5rem;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55);
	/* o ".rz-cell img" acima dá 100% e zoom no hover à FOTO; o retrato não entra nisso */
	transition: none;
}

.rz-cell:hover .rz-cell-av {
	transform: none;
}

/* a 2ª linha: o título da coleção (fotografia não tem 2ª linha), como no topo do visor */
.rz-cell-cap i {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-style: normal;
	font-size: .74rem;
	color: rgba(255, 255, 255, .8);
	font-variant-numeric: tabular-nums;
}

.rz-cell-cap em {
	font-style: normal;
}

/* foto estreita (galerias.js marca abaixo de 160px): só a fonte diminui, a pilha já é vertical */
.rz-cell.is-estreita .rz-cell-cap {
	padding: 34px .55rem .5rem;
	font-size: .74rem;
}

/* galeria sem itens */
.rz-vazio {
	max-width: 52ch;
	margin: 0 auto;
	text-align: center;
}

.rz-vazio i {
	font-size: 2.25rem;
	color: var(--gold-ink);
}

.rz-vazio h2 {
	margin: 1rem 0 .5rem;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 600;
}

.rz-vazio p {
	margin: 0;
	color: var(--mut-l);
}

/* 6 · JURADOS: o componente é comum às páginas de resultado (resultados.css, .rz-juri) */

/* =====================================================================
   7 · FECHO — grafite, numa faixa só (09/10/2026): à esquerda o próximo round
   (botão principal) e as próprias notas; à direita, compartilhar e os caminhos
   de saída. Antes eram três blocos seguidos, cada um com o seu título.
   ===================================================================== */
.rz-fecho {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.rz-fecho-principal h2 {
	margin: .3rem 0 .7rem;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
}

.rz-fecho-principal p {
	margin: 0 0 1.6rem;
	max-width: 52ch;
	line-height: 1.6;
	color: var(--mut-d);
}

.rz-fecho-lado {
	padding: 1.6rem 1.75rem;
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--line-d);
}

.rz-fecho-lado strong {
	display: block;
	font-size: 1.02rem;
	font-weight: 600;
	color: #fff;
}

.rz-fecho-lado > p {
	margin: .3rem 0 1.1rem;
	font-size: .9rem;
	color: var(--mut-d);
}

.rz-fecho-lado > p b {
	font-weight: 600;
	color: var(--gold);
}

.rz-fecho-redes {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* a cor da rede só no ícone (pedido do dono, 11/10/2026); o botão segue o do site */
.rz-fecho-redes .fa-facebook-f {
	color: #1877f2;
}

.rz-fecho-redes .fa-whatsapp {
	color: #25d366;
}

.rz-fecho-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line-d);
}

.rz-fecho-links a {
	font-size: .86rem;
	font-weight: 600;
	color: var(--mut-d);
	text-decoration: none;
	transition: color .2s ease;
}

.rz-fecho-links a:hover {
	color: var(--gold);
}

.rz-fecho-links i {
	margin-right: .35rem;
	font-size: .8em;
}

/* tela de toque: links soltos ganham altura mínima de 32px para o dedo, sem mudar o
   desenho (o nome do artista, o Instagram do pódio e do destaque, os links do fecho) */
@media (pointer: coarse) {
	.rz-podio-ig,
	.rz-destaque-ig,
	.rz-fecho-links a,
	a.rz-podio-nome,
	.rz-destaque-autor b a,
	.rz-empate-cap b a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}
}

/* =====================================================================
   PARABÉNS (premiadas) — o abre do resultado, como no site antigo: o selo
   do Instinto Criativo Awards, o parabéns e o compromisso com a comunidade
   ===================================================================== */


.rz-parabens-selo {
	display: block;
	width: clamp(120px, 15vw, 168px);
	height: auto;
	margin-bottom: 1.4rem;
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .22)) drop-shadow(0 0 22px rgba(255, 183, 0, .25));
}

.rz-parabens-rot {
	margin: 0 0 .7rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.rz-parabens h2 {
	margin: 0;
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--ink);
}

.rz-parabens-frase {
	margin: .55rem 0 0;
	font-size: clamp(1.1rem, 2.1vw, 1.45rem);
	font-weight: 500;
	color: var(--gold-ink);
}


/* a abertura (selo, round, parabéns) e, na mesma seção, o Top 3 */
/* a abertura num painel escuro, o grafite da faixa do YouTube (pedido do dono, 10/10) */
.rz-parabens-abre {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	background: radial-gradient(60% 75% at 50% 0%, rgba(255, 183, 0, .14), rgba(255, 183, 0, 0) 70%), var(--graph);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
	text-align: center;
}

.rz-parabens-abre .rz-parabens-rot {
	color: var(--gold);
}

.rz-parabens-abre h2 {
	color: #fff;
}

.rz-parabens-abre .rz-parabens-frase {
	color: var(--gold);
}

/* a pilha de rostos sob o parabéns: a MESMA do fecho do Top 1 (`.t1-pilha` em
   top1.css — até 8 retratos de 54px, um sobre o outro, "+N" dourado; decorativa,
   sem clique). Decisão do dono, 13/10/2026. */
.rz-pilha {
	display: flex;
	justify-content: center;
	margin-top: 1.6rem;
}

.rz-pilha img,
.rz-pilha-mais {
	width: 54px;
	height: 54px;
	margin-left: -12px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--graph);
}

.rz-pilha img:first-child {
	margin-left: 0;
}

.rz-pilha-mais {
	display: grid;
	place-items: center;
	background: var(--gold);
	color: #000;
	font-size: .8rem;
	font-weight: 700;
}

/* no celular 8 retratos de 54px + "+N" passam de 390px: menores e mais juntos
   (44 + 8 × 30 = 284px). A mesma regra vale para a pilha do Top 1. */
@media (max-width: 480px) {
	.rz-pilha img,
	.rz-pilha-mais {
		width: 44px;
		height: 44px;
		margin-left: -14px;
	}
}

/* o Top 3 é a SEGUNDA METADE da seção do parabéns: um subtítulo entre dois fios
   (não um segundo h2), que liga o parabéns ao pódio sem parecer outra seção */
.rz-destaques {
	width: 100%;
	margin-top: clamp(3rem, 6vw, 4.75rem);
}

.rz-destaques-cab {
	display: grid;
	grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
	text-align: center;
}

.rz-destaques-fio {
	height: 1px;
	background: linear-gradient(to right, rgba(201, 162, 64, 0), rgba(201, 162, 64, .55));
}

.rz-destaques-fio:last-child {
	background: linear-gradient(to left, rgba(201, 162, 64, 0), rgba(201, 162, 64, .55));
}

.rz-destaques-cab > div {
	max-width: 36ch;
}

.rz-destaques-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.rz-destaques-cab h3 {
	margin: .45rem 0 0;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--ink);
}

/* título que quebra SEMPRE em duas linhas, nos pontos marcados no HTML (pedido do
   dono, 12/10/2026: "Uma menção honrosa diz muito / sobre a sua arte"); no celular
   estreito a letra encolhe para a 1ª linha caber inteira */
.rz-destaques-cab h3.rz-duas-linhas {
	font-size: clamp(1.1rem, 5.6vw, 1.85rem);
}

/* celular: o título fica com a largura inteira, sem os fios dos lados — com eles
   (28px + gap de cada lado) a 1ª linha de "Uma menção honrosa diz muito" passava da
   tela até 540px (varredura de 13/10/2026) */
@media (max-width: 560px) {
	.rz-destaques-cab {
		grid-template-columns: minmax(0, 1fr);
	}

	.rz-destaques-fio {
		display: none;
	}
}

/* a caixa do título cresce com a linha mais larga (os 36ch de cima a cortavam e a 1ª
   linha vazava para a direita, torta); só o parágrafo fica estreito e centrado */
.rz-destaques-cab > .rz-destaques-txt--livre {
	max-width: none;
}

.rz-destaques-cab .rz-destaques-txt--livre p {
	max-width: 36ch;
	margin-left: auto;
	margin-right: auto;
}

.rz-duas-linhas .rz-linha {
	display: block;
	white-space: nowrap;
}

.rz-destaques-cab p {
	margin: .45rem 0 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--mut-l);
}

/* HONROSAS: o mesmo parabéns em tom neutro — sem o ouro de vitória no brilho do
   selo, no rótulo, na frase, nos fios e no eyebrow do "O que significa" */
.rz-parabens--neutro .rz-parabens-selo {
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .22)) drop-shadow(0 0 22px rgba(255, 255, 255, .22));
}

.rz-parabens--neutro .rz-parabens-abre {
	background: radial-gradient(60% 75% at 50% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%), var(--graph);
}

.rz-parabens--neutro .rz-parabens-abre .rz-parabens-rot,
.rz-parabens--neutro .rz-parabens-abre .rz-parabens-frase {
	color: #d9d9d6;
}

.rz-parabens--neutro .rz-destaques-fio {
	background: linear-gradient(to right, rgba(22, 22, 15, 0), rgba(22, 22, 15, .3));
}

.rz-parabens--neutro .rz-destaques-fio:last-child {
	background: linear-gradient(to left, rgba(22, 22, 15, 0), rgba(22, 22, 15, .3));
}

.rz-parabens--neutro .rz-destaques-eyebrow {
	color: var(--mut-l);
}
/* =====================================================================
   A CAMPEÃ (premiadas) — seção própria, preta, logo depois do parabéns
   ===================================================================== */
.rz-campeas-sec .rz-cab p b {
	color: var(--gold);
}
/* empate: as campeãs lado a lado (2 e 3 numa linha; 4 em duas no tablet) */
.rz-empate {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: clamp(1rem, 2.4vw, 2rem);
	max-width: 1100px;
	margin: 0 auto;
}

.rz-empate--2 {
	--cols: 2;
	max-width: 960px;
}

.rz-empate--3 {
	--cols: 3;
}

.rz-empate--4 {
	--cols: 4;
	max-width: 1180px;
}

.rz-empate-item {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

/* 4:5, com teto pela altura da tela: o palco da cena (fotos + autores) precisa
   caber inteiro, senão a animação desliga (no tablet deitado, 2 campeãs passavam) */
.rz-empate-fig {
	aspect-ratio: 4 / 5;
	height: auto;
	max-height: 56vh;
}

.rz-empate-fig img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.rz-empate-fig .rz-destaque-selo {
	top: 12px;
	left: 12px;
	font-size: .66rem;
}

.rz-empate-fig .rz-cell-serie {
	top: auto;
	bottom: 12px;
	right: 12px;
}

.rz-empate-cap {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-top: .9rem;
	min-width: 0;
}

.rz-empate-cap .rz-av {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}

.rz-empate-cap > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rz-empate-cap b {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	overflow-wrap: break-word;
}

.rz-empate-cap b a {
	color: inherit;
	text-decoration: none;
}

.rz-empate-cap b a:hover {
	color: var(--gold);
}

.rz-empate-cap .rz-destaque-tit {
	font-size: .78rem;
}

.rz-empate-cap .rz-destaque-ig {
	align-self: flex-start;
	margin-top: .15rem;
}

/* =====================================================================
   COMUNIDADE (premiadas) — YouTube e selos, como no site antigo: uma FAIXA
   baixa no grafite, os dois convites lado a lado (ícone, texto e botão na
   mesma linha), separados por um fio. Sem título: a faixa se explica sozinha.
   ===================================================================== */
.rz-comunidade {
	padding: clamp(1.6rem, 3.2vw, 2.4rem) 0;
	background: var(--graph);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, .06);
}

.rz-comu-grid {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 1240px;
	margin: 0 auto;
}

/* lado a lado só onde cada convite cabe em uma linha de texto e meia */
@media (min-width: 1100px) {
	.rz-comu-grid {
		grid-template-columns: 1fr 1fr;
	}

	.rz-comu + .rz-comu {
		border-left: 1px solid rgba(255, 255, 255, .1);
	}
}

/* ícone | texto | botão numa linha; a coluna do texto nunca fica mais estreita
   que o título (que não quebra) */
.rz-comu {
	display: grid;
	grid-template-columns: auto minmax(min-content, 1fr) auto;
	align-items: center;
	gap: 1rem 1.1rem;
	min-width: 0;
	padding: .4rem clamp(1rem, 2vw, 1.6rem);
}

/* empilhados (abaixo de 1100px): um fio horizontal entre os dois */
@media (max-width: 1099px) {
	.rz-comu {
		padding: .85rem 0;
	}

	.rz-comu + .rz-comu {
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

/* o logo do YouTube como ele é: o retângulo vermelho com o triângulo BRANCO (o
   glifo fa-youtube vaza o triângulo; um quadrado branco atrás dele o preenche),
   sem caixa nem brilho em volta (pedido do dono, 11/10/2026: "ficou feio") */
.rz-comu-ico {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	color: #ff0033;
	font-size: 2.6rem;
	line-height: 1;
}

.rz-comu-ico i {
	background: linear-gradient(#fff, #fff) center / 38% 42% no-repeat;
}
/* o selo do IC um pouco maior e com menos brilho que a 1ª versão */
.rz-comu-selo {
	flex: 0 0 auto;
	width: 64px;
	height: auto;
	filter: drop-shadow(0 0 8px rgba(255, 183, 0, .18));
}

.rz-comu-txt {
	flex: 1 1 auto;
	min-width: 0;
}

/* o título numa linha só (pedido do dono, 11/10/2026); no celular estreito a letra
   encolhe um pouco para caber, em vez de quebrar */
.rz-comu h3 {
	margin: 0;
	font-size: clamp(.86rem, 4vw, 1rem);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
}

.rz-comu p {
	margin: .2rem 0 0;
	font-size: .84rem;
	line-height: 1.45;
	color: var(--mut-d);
}

.rz-comu .rz-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}
/* =====================================================================
   VENCEDORES GERAIS (premiadas) — a última seção, mais larga
   ===================================================================== */
.rz-container-amplo {
	max-width: 1560px;
}

.rz-galeria--ampla .rz-cab h2 {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
}

.rz-galeria--ampla .rz-cab .rz-eyebrow i {
	margin-right: .35rem;
}

/* =====================================================================
   CENA DA FOTO CAMPEÃ — o "museu" (escolha do dono, 10/10/2026), guiado pela
   rolagem: galerias.js liga com .is-ativa e escreve --a (chegada), --b (a obra
   vem), --c (final), e por campeã --af/--bf (com empate, uma depois da outra).
   Sem .is-ativa nada aqui muda a figura: é o estado final parado.
   ===================================================================== */
.rz-cena {
	position: relative;
}

.rz-cena-luz {
	display: none;
}

.rz-cena.is-ativa .rz-cena-palco {
	position: sticky;
	top: var(--topo, 0px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* terminada na primeira descida, a cena recolhe (galerias.js): o palco não prende
   mais e fica no estado final */
.rz-cena.is-ativa.is-feita .rz-cena-palco {
	position: relative;
	top: auto;
}

.rz-cena.is-ativa .rz-destaque {
	margin-bottom: 0;
}


/* a luz da sala: o teto e o reflexo no chão; os fachos (um por campeã) o JS cria.
   O palco tem a altura das fotos e prende no centro da tela: a luz sobe a folga
   (--folga, do JS) para o refletor vir do alto da tela, não de cima da moldura.
   Enquanto o título da seção está na tela, ela some em cima, abaixo dele (--corte =
   base do título, medida pelo JS a cada quadro): nunca passa por cima do texto.
   Embaixo ela passa um pouco do palco e some aos poucos (11/10/2026: terminava num
   corte reto, seco, logo abaixo da nota e do autor) */
.rz-cena.is-ativa .rz-cena-luz {
	display: block;
	position: absolute;
	inset: calc(-1 * var(--folga, 0px) - 1.5rem) -30% -5rem;
	-webkit-mask-image: linear-gradient(to bottom, transparent var(--corte, 0px), #000 calc(var(--corte, 0px) + 140px), #000 calc(100% - 13rem), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent var(--corte, 0px), #000 calc(var(--corte, 0px) + 140px), #000 calc(100% - 13rem), transparent 100%);
	pointer-events: none;
	background:
		radial-gradient(30% 78% at 50% 0%, rgba(255, 232, 190, calc(.26 * var(--a))), rgba(255, 232, 190, 0) 72%),
		radial-gradient(42% 22% at 50% 82%, rgba(255, 232, 190, calc(.08 * var(--b))), rgba(255, 232, 190, 0) 70%);
}

/* o facho: mais suave que a 1ª versão e já se apagando antes do pé da luz */
.rz-cena-facho {
	position: absolute;
	top: 0;
	height: 100%;
	clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
	background: linear-gradient(to bottom, rgba(255, 236, 200, .26), rgba(255, 236, 200, .06) 62%, rgba(255, 236, 200, 0) 92%);
	filter: blur(14px);
	opacity: 0;
}

/* a obra: apagada, pequena, na moldura de galeria; vem até você e a moldura sai no
   fim — inclusive o anel escuro em volta dela, que ficava como uma borda preta */
.rz-cena.is-ativa .rz-destaque-fig {
	outline: calc(18px * (1 - var(--c))) solid #efebe3;
	box-shadow: 0 0 0 calc(23px * (1 - var(--c))) #141414, 0 calc(46px * var(--bf, var(--b))) 90px rgba(0, 0, 0, calc(.75 * var(--bf, var(--b))));
	transform: scale(calc(.68 + .32 * var(--bf, var(--b))));
	filter: brightness(calc(.08 + .92 * var(--af, var(--a))));
}

/* foto única em pé, com a ficha ao lado: no centro durante a cena, vai para o lado
   no fim (translate é independente do transform da escala) */
.rz-cena.is-ativa .rz-destaque--retrato .rz-destaque-fig {
	translate: calc(var(--centro, 0px) * (1 - var(--c))) 0;
}

/* medição dos fachos: as fotos na posição final, sem escala nem deslocamento */
.rz-cena.is-medindo .rz-destaque-fig {
	transform: none !important;
	translate: none !important;
}

/* o final: o selo carimba, nota, autor e série chegam */
.rz-cena.is-ativa .rz-destaque-selo {
	opacity: var(--c);
	transform: scale(calc(1.6 - .6 * var(--c)));
	transform-origin: 0 0;
}

.rz-cena.is-ativa .rz-destaque-cap,
.rz-cena.is-ativa .rz-destaque-serie,
.rz-cena.is-ativa .rz-empate-cap,
.rz-cena.is-ativa .rz-empate-tira {
	opacity: var(--c);
	transform: translateY(calc(22px * (1 - var(--c))));
}

/* o clarão da luz atrás da nota e do autor: com a foto em pé a ficha fica ao lado,
   dentro do facho, e ganha esse brilho de graça; nas outras (foto deitada, empates)
   ela fica abaixo das fotos, fora do facho — este halo repete o efeito ali (pedido
   do dono, 13/10/2026). Chega junto com a ficha (--c). */
.rz-cena.is-ativa .rz-destaque:not(.rz-destaque--retrato) .rz-destaque-cap,
.rz-cena.is-ativa .rz-empate-cap {
	position: relative;
	isolation: isolate;
}

.rz-cena.is-ativa .rz-destaque:not(.rz-destaque--retrato) .rz-destaque-cap::before,
.rz-cena.is-ativa .rz-empate-cap::before {
	content: '';
	position: absolute;
	inset: -3.25rem -3.5rem;
	z-index: -1;
	pointer-events: none;
	/* a mesma luz quente do facho; .28 para ficar tão visível quanto o facho sobre a
	   ficha da coleção em pé (com .17 mal se via, medido em 13/10/2026) */
	background: radial-gradient(55% 70% at 50% 45%, rgba(255, 236, 200, .28), rgba(255, 236, 200, 0) 72%);
	filter: blur(12px);
	opacity: var(--c, 1);
}

/* com a foto em pé, a ficha só aparece na segunda metade do final, depois que a
   foto já abriu espaço (antes surgia por trás dela) */
.rz-cena.is-ativa .rz-destaque--retrato .rz-destaque-cap,
.rz-cena.is-ativa .rz-destaque--retrato .rz-destaque-serie {
	opacity: max(0, calc(var(--c) * 2 - 1));
	transform: translateX(calc(30px * (1 - var(--c))));
}

/* empate na cena: a moldura de galeria é mais fina nas fotos menores */
.rz-cena.is-ativa .rz-empate-fig {
	outline-width: calc(12px * (1 - var(--c)));
	box-shadow: 0 0 0 calc(16px * (1 - var(--c))) #141414, 0 calc(36px * var(--bf, var(--b))) 70px rgba(0, 0, 0, calc(.75 * var(--bf, var(--b))));
}

@media (max-width: 760px) {
	/* na cena a foto em pé fica um pouco mais baixa: foto, série, nota e autor cabem
	   juntos na tela do celular (senão a cena desligava e ficava a figura parada) */
	.rz-cena.is-ativa .rz-destaque-fig.tem-proporcao {
		max-height: min(44vh, 520px);
	}

	/* empate no celular: duas por linha, foto quadrada e o autor enxuto */
	.rz-empate,
	.rz-empate--2,
	.rz-empate--3,
	.rz-empate--4 {
		--cols: 2;
		gap: .75rem;
	}

	.rz-empate--3 .rz-empate-item:last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - .375rem);
	}

	.rz-empate-fig {
		aspect-ratio: 1;
	}

	.rz-empate-fig .rz-destaque-selo {
		top: 8px;
		left: 8px;
		padding: .25rem .55rem;
		font-size: .56rem;
	}

	.rz-empate-cap {
		gap: .5rem;
		margin-top: .55rem;
	}

	.rz-empate-cap .rz-av {
		width: 32px;
		height: 32px;
	}

	.rz-empate-cap b {
		font-size: .84rem;
	}

	.rz-empate-cap .rz-destaque-ig {
		display: none;
	}

	/* celular: o ícone (menor) ao lado só do TÍTULO, que assim cabe numa linha até em
	   320px (pedido do dono: "não pode quebrar linha"); o texto e o botão inteiro
	   embaixo, na largura toda */
	.rz-comu {
		grid-template-columns: auto minmax(0, 1fr);
		gap: .6rem .75rem;
	}

	.rz-comu-txt {
		display: contents;
	}

	.rz-comu-ico {
		width: 40px;
		height: 40px;
		font-size: 1.75rem;
	}

	.rz-comu-selo {
		width: 40px;
	}

	.rz-comu h3 {
		grid-column: 2;
		grid-row: 1;
		font-size: clamp(.76rem, 3.8vw, 1rem);
	}

	.rz-comu p {
		grid-column: 1 / -1;
		margin: 0;
	}

	.rz-comu .rz-btn {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

/* =====================================================================
   MOVIMENTO — o pódio sobe 3º, 2º e 1º e os troféus acendem (o resto em resultados.css)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.rz-js .rz-podio-card {
		opacity: 0;
		transform: translateY(24px);
	}

	.rz-js .rz-podio.is-in .rz-podio-card {
		opacity: 1;
		transform: none;
		transition: opacity .45s ease, transform .45s ease, box-shadow .25s ease;
	}

	/* sobem 3º, 2º e por último o 1º */
	.rz-js .rz-podio.is-in .rz-podio-card--2 {
		transition-delay: .28s;
	}

	.rz-js .rz-podio.is-in .rz-podio-card--1 {
		transition-delay: .6s;
	}

	/* o retrato do artista "estoura" no card logo depois que ele sobe: nasce pequeno
	   e apagado e cresce passando do tamanho (curva com rebote), 3º, 2º e 1º — o 1º
	   maior e por último (pedido do dono, 12/10/2026) */
	.rz-js .rz-podio-card .rz-podio-av {
		opacity: 0;
		transform: scale(.4);
	}

	.rz-js .rz-podio.is-in .rz-podio-card .rz-podio-av {
		opacity: 1;
		transform: none;
		transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .45s, opacity .3s ease .45s;
	}

	.rz-js .rz-podio.is-in .rz-podio-card--2 .rz-podio-av {
		transition-delay: .73s;
	}

	.rz-js .rz-podio.is-in .rz-podio-card--1 .rz-podio-av {
		transition-delay: 1.05s;
		transition-duration: 1s, .3s;
	}

	/* com o mouse em cima, o retrato cresce de leve com o brilho do metal */
	.rz-js .rz-podio.is-in .rz-podio-card:hover .rz-podio-av {
		transform: scale(1.07);
		box-shadow: 0 0 0 2px var(--metal), 0 0 0 7px rgba(255, 255, 255, .08), 0 16px 36px rgba(0, 0, 0, .3), 0 0 30px var(--metal);
		transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
	}

	/* os três troféus acendem UMA vez, cada um logo depois que o seu card sobe, com o
	   brilho do hover da home (cresce, sobe, gira de leve e o brilho pulsa) e voltam
	   ao normal. Sem fill-mode: depois da entrada o troféu fica como antes e o :hover
	   (seletor mais forte, lá em cima) continua valendo. No celular não há hover:
	   esta é a única vez que o brilho aparece ali. */
	.rz-js .rz-podio.is-in .rz-podio-card--3 .rz-podio-trofeu {
		animation: rz-acende-bronze 1.8s ease-out .55s 1;
	}

	.rz-js .rz-podio.is-in .rz-podio-card--2 .rz-podio-trofeu {
		animation: rz-acende-prata 1.8s ease-out .85s 1;
	}

	.rz-js .rz-podio.is-in .rz-podio-card--1 .rz-podio-trofeu {
		animation: rz-acende-ouro 2s ease-out 1.15s 1;
	}

	/* o confete cai uma vez sobre o pódio quando o troféu do 1º acende: papel
	   girando e balançando no plano, mais curto e mais simples que o do Top 1 */
	.rz-js .rz-podio.is-in .rz-confete i {
		animation: rz-confete var(--t, 2.4s) cubic-bezier(.25, .6, .45, 1) var(--d, 1.1s) both;
	}

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

		50% {
			transform: translate(var(--sw, 14px), 230px) rotate(calc(var(--r0, 0deg) + 180deg));
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate(calc(var(--sw, 14px) * -1), 460px) rotate(calc(var(--r0, 0deg) + 340deg));
		}
	}

	@keyframes rz-acende-ouro {
		0%,
		100% {
			transform: none;
			filter: drop-shadow(0 4px 15px rgba(255, 215, 0, .4));
		}

		30%,
		75% {
			transform: scale(1.2) translateY(-12px);
			filter: drop-shadow(0 12px 35px rgba(255, 215, 0, .8)) brightness(1.3);
		}

		52% {
			transform: scale(1.2) translateY(-12px);
			filter: drop-shadow(0 15px 45px rgba(255, 215, 0, 1)) brightness(1.5);
		}
	}

	@keyframes rz-acende-prata {
		0%,
		100% {
			transform: none;
			filter: drop-shadow(0 3px 12px rgba(192, 192, 192, .3));
		}

		30%,
		75% {
			transform: scale(1.15) rotate(-3deg) translateY(-10px);
			filter: drop-shadow(0 10px 30px rgba(192, 192, 192, .6)) brightness(1.2);
		}

		52% {
			transform: scale(1.15) rotate(-3deg) translateY(-10px);
			filter: drop-shadow(0 12px 35px rgba(192, 192, 192, .8)) brightness(1.4);
		}
	}

	@keyframes rz-acende-bronze {
		0%,
		100% {
			transform: none;
			filter: drop-shadow(0 3px 12px rgba(205, 127, 50, .3));
		}

		30%,
		75% {
			transform: scale(1.12) rotate(3deg) translateY(-8px);
			filter: drop-shadow(0 8px 25px rgba(205, 127, 50, .5)) brightness(1.15);
		}

		52% {
			transform: scale(1.12) rotate(3deg) translateY(-8px);
			filter: drop-shadow(0 10px 30px rgba(205, 127, 50, .7)) brightness(1.3);
		}
	}
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 760px) {
	/* no celular a foto vencedora vem LIMPA em cima e o texto embaixo, no preto: com o
	   texto por cima, o véu necessário para ler escondia a foto, que é o assunto da página */
	.rz-hero,
	.rz-voce + .rz-hero {
		display: block;
		min-height: 0;
	}

	.rz-hero-foto {
		position: relative;
		inset: auto;
		height: clamp(260px, 92vw, 460px);
	}

	.rz-hero-scrim {
		inset: 0 0 auto;
		height: clamp(260px, 92vw, 460px);
		background: linear-gradient(to top, var(--d) 0%, rgba(8, 8, 10, .55) 16%, rgba(8, 8, 10, 0) 38%);
	}

	.rz-hero-conteudo {
		margin-top: -1.75rem;
		padding-top: 0;
	}

	/* pódio do celular: card deitado — o palco com o troféu da home (no tamanho dela
	   no celular) à esquerda, o artista e os números à direita. Em pé, os três
	   cards ocupavam três telas de rolagem */
	.rz-podio,
	.rz-podio--1,
	.rz-podio--2 {
		grid-template-columns: minmax(0, 460px);
		gap: .85rem;
	}

	.rz-podio-card,
	.rz-podio-card--1,
	.rz-podio-card--2,
	.rz-podio-card--3 {
		order: 0;
		display: grid;
		grid-template-columns: clamp(104px, 31vw, 140px) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
		margin-top: 0;
	}

	.rz-podio-palco {
		grid-row: 1 / span 3;
		align-items: center;
		height: auto;
		min-height: 150px;
		padding: 0;
		border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px);
	}

	.rz-podio-palco::before {
		top: 22px;
		bottom: 22px;
		left: 0;
		right: auto;
		width: 3px;
		height: auto;
		border-radius: 0 3px 3px 0;
	}

	.rz-podio-trofeu {
		width: clamp(80px, 22vw, 110px);
		height: clamp(80px, 22vw, 110px);
	}

	.rz-podio-card--1 .rz-podio-trofeu {
		width: clamp(104px, 30vw, 140px);
		height: clamp(104px, 30vw, 140px);
	}

	.rz-podio-info {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-content: center;
		align-items: center;
		column-gap: .75rem;
		padding: .95rem 1rem .5rem;
		text-align: left;
	}

	.rz-podio-av,
	.rz-podio-card--1 .rz-podio-av {
		grid-row: 2;
		width: 68px;
		height: 68px;
		margin: 0;
		border-width: 3px;
		box-shadow: 0 0 0 2px var(--metal), 0 8px 18px rgba(0, 0, 0, .2);
		font-size: 1.1rem;
	}

	.rz-podio-card--1 .rz-podio-av {
		width: 80px;
		height: 80px;
		font-size: 1.3rem;
	}

	.rz-podio-card--1 .rz-podio-palco {
		height: auto;
		padding-bottom: 0;
	}

	/* o selo numa linha só, em cima; embaixo dele o avatar ao lado do nome */
	.rz-selo {
		grid-column: 1 / -1;
		justify-self: start;
		margin-bottom: .5rem;
		white-space: nowrap;
		padding: .22rem .6rem;
		font-size: .58rem;
	}

	.rz-podio-ident,
	.rz-podio-card--1 .rz-podio-ident {
		grid-row: 2;
		grid-column: 2;
		font-size: 1.02rem;
	}

	.rz-podio-meta {
		grid-column: 1 / -1;
		align-items: flex-start;
		gap: .15rem;
		margin-top: .55rem;
		font-size: .76rem;
	}

	.rz-podio-num div {
		padding: .65rem .4rem .7rem;
	}

	.rz-podio-obra {
		margin: 0 .7rem .7rem;
		padding: .4rem .55rem .4rem .4rem;
		gap: .6rem;
	}

	.rz-podio-obra img {
		width: 42px;
		height: 42px;
		border-radius: 8px;
	}

	.rz-podio-obra b {
		font-size: .76rem;
	}

	.rz-podio-obra small {
		font-size: .68rem;
	}

	/* no celular a linha quebra: sem as bolinhas (uma ficava sozinha no começo da
	   linha de baixo), só o espaço entre os números */
	.rz-hero-numeros {
		gap: .3rem 1.1rem;
		font-size: .84rem;
	}

	.rz-hero-numeros b {
		font-size: 1rem;
	}

	.rz-hero-numeros span + span::before {
		display: none;
	}

	.rz-podio-num dd {
		font-size: 1.15rem;
	}

	.rz-podio-num dt {
		font-size: .56rem;
	}

	/* faixa "você": símbolo e texto numa linha, os botões embaixo. Sem a miniatura
	   da foto: ela espremia o texto em 4 linhas, e a foto está na página logo abaixo */
	.rz-voce {
		padding: .9rem 0 1rem;
	}

	.rz-voce-inner {
		gap: .7rem .85rem;
	}

	.rz-voce-texto {
		flex: 1 1 0;
	}

	.rz-voce-eyebrow {
		letter-spacing: .14em;
	}

	.rz-voce-titulo {
		font-size: 1rem;
	}

	.rz-voce-foto {
		display: none;
	}

	.rz-voce-acoes {
		width: 100%;
	}

	/* barra numa linha só: "voltar" vira um círculo com a seta; abas sem ícone */
	.rz-nav-inner {
		gap: .4rem;
	}

	.rz-nav-voltar {
		flex: 0 0 34px;
		justify-content: center;
		margin-right: 0;
		border-radius: 50%;
		background: #fff;
		box-shadow: inset 0 0 0 1px #e0e0de;
	}

	.rz-nav-voltar span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.rz-aba {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		padding: .3rem .55rem;
		font-size: .74rem;
	}

	.rz-aba i,
	.rz-aba-longo {
		display: none;
	}

	.rz-aba-curto {
		display: inline;
	}

	.rz-previa {
		order: 5;
		flex-basis: 100%;
		justify-content: center;
	}

	.rz-voce-acoes .rz-btn {
		flex: 1;
	}

	.rz-fecho {
		grid-template-columns: 1fr;
	}

	.rz-fecho-lado {
		padding: 1.3rem 1.2rem;
	}
}

/* =====================================================================
   HUB (/galerias e /galerias/honrosas) — mock aprovado em 09/10/2026. A porta
   de todos os resultados, por CATEGORIA: hero com a parede das vencedoras,
   "Acabou de sair" e o explorador (ano, modalidade, categoria e busca).
   Prefixo hb-. Honrosas = o mesmo, em tom neutro (.hb-honrosas).
   ===================================================================== */
/* ---------- hero: a parede é de obras (3:2), não de rostos ---------- */
.hb-hero .t1-mural {
	width: 58%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.hb-hero .t1-mural-col {
	gap: 12px;
	padding-bottom: 12px;
}

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

.hb-hero .t1-mural-item {
	aspect-ratio: 3 / 2;
	border-radius: 12px;
}

.hb-hero .t1-mural-item figcaption {
	padding: 1.6rem .7rem .55rem;
}

.hb-hero .t1-mural-item b {
	font-size: .76rem;
}

.hb-hero .t1-mural-item span {
	font-size: .56rem;
}

.hb-hero-titulo {
	font-size: clamp(2.6rem, 5.4vw, 4.8rem);
	letter-spacing: -.04em;
}

/* ---------- 3 · ACABOU DE SAIR: o destaque grande (2×2) e quatro cards ---------- */
.hb-recentes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

.hb-destaque {
	position: relative;
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
	min-height: 520px;
	overflow: hidden;
	border-radius: 22px;
	background: #111;
	color: #fff;
	box-shadow: var(--sh-card-h);
}

.hb-destaque-foto {
	position: absolute;
	inset: 0;
	display: block;
}

.hb-destaque-foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.hb-destaque:hover .hb-destaque-foto img {
	transform: scale(1.04);
}

/* véu para o texto: escuro firme embaixo, a foto respira em cima */
.hb-destaque::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .82) 30%, rgba(8, 8, 8, .25) 58%, rgba(8, 8, 8, 0) 75%);
}

.hb-destaque-info {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.hb-destaque-selo {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .8rem;
	border-radius: var(--r-pill);
	background: var(--gold);
	color: #000;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hb-destaque h3 {
	margin: .25rem 0 0;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: #fff;
}

.hb-destaque-round {
	margin: 0;
	font-size: .95rem;
	color: rgba(255, 255, 255, .86);
}

.hb-destaque .hb-quem {
	font-size: 1.05rem;
	color: #fff;
}

.hb-destaque .hb-media {
	color: rgba(255, 255, 255, .82);
}

.hb-destaque .hb-acoes {
	padding-top: .5rem;
}

.hb-destaque .hb-acao {
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.hb-destaque .hb-acao b {
	color: rgba(255, 255, 255, .8);
}

.hb-destaque .hb-acao:hover {
	background: #fff;
	color: #111;
	box-shadow: inset 0 0 0 1px #fff;
}

.hb-destaque .hb-acao--ouro {
	background: var(--gold);
	color: #000;
	box-shadow: none;
}

.hb-destaque .hb-acao--ouro b {
	color: rgba(0, 0, 0, .66);
}

.hb-conferencia {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem .75rem;
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	font-size: .85rem;
	color: var(--mut-l);
}

.hb-conferencia span {
	padding: .28rem .75rem;
	border-radius: var(--r-pill);
	background: var(--gray);
	color: var(--ink);
	font-weight: 600;
}

/* ---------- o card de um resultado (um round de uma categoria) ---------- */
.hb-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-l), var(--sh-card);
	transition: box-shadow .3s ease;
}

.hb-card:hover {
	box-shadow: 0 0 0 1px rgba(255, 183, 0, .6), var(--sh-card-h);
}

.hb-card-foto {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #1a1a1a;
}

.hb-card-foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.hb-card:hover .hb-card-foto img {
	transform: scale(1.05);
}

.hb-card-foto:focus-visible {
	outline: 3px solid var(--gold-ink);
	outline-offset: -3px;
}

.hb-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: .3rem .7rem;
	border-radius: var(--r-pill);
	background: rgba(10, 10, 10, .84);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hb-card-corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem 1.15rem 1.15rem;
}

.hb-card-cat {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.hb-quem {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .6rem;
	margin: 0;
	font-size: .95rem;
	line-height: 1.35;
	color: var(--ink);
}

.hb-quem b {
	font-weight: 700;
}

.hb-media {
	font-size: .8rem;
	color: var(--mut-l);
	font-variant-numeric: tabular-nums;
}

.hb-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: auto;
	padding-top: .35rem;
}

.hb-acao {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 38px;
	padding: .35rem .9rem;
	border-radius: var(--r-pill);
	box-shadow: inset 0 0 0 1px #d2d2d0;
	color: var(--ink);
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.hb-acao b {
	font-weight: 700;
	color: var(--mut-l);
}

.hb-acao:hover {
	background: #111;
	color: #fff;
	box-shadow: inset 0 0 0 1px #111;
}

.hb-acao:hover b {
	color: rgba(255, 255, 255, .8);
}

.hb-acao--ouro {
	background: var(--gold);
	color: #000;
	box-shadow: none;
}

.hb-acao--ouro b {
	color: rgba(0, 0, 0, .66);
}

.hb-acao--ouro:hover {
	background: #ffc733;
	color: #000;
	box-shadow: none;
}

.hb-acao--ouro:hover b {
	color: rgba(0, 0, 0, .66);
}

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

.hb-acao--escuro {
	background: #111;
	color: #fff;
	box-shadow: none;
}

.hb-acao--escuro b {
	color: rgba(255, 255, 255, .78);
}

.hb-acao--escuro:hover {
	background: #333;
	color: #fff;
	box-shadow: none;
}

.hb-destaque .hb-acao--escuro {
	background: #fff;
	color: #111;
}

.hb-destaque .hb-acao--escuro b {
	color: rgba(0, 0, 0, .62);
}

/* honrosas: reconhecimento, não pódio — sem o ouro de prêmio nos selos, setas e botões */
.hb-honrosas .hb-destaque-selo {
	background: #fff;
	color: #111;
}

.hb-honrosas .hb-tile-seta {
	background: #fff;
	color: #111;
}

.hb-honrosas .hb-card:hover {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .28), var(--sh-card-h);
}

/* resultado em conferência: sem foto e sem link */
.hb-card--breve .hb-card-foto {
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(135deg, #f3f2ef 0 12px, #ecebe7 12px 24px);
}

.hb-breve-ico {
	color: #8a8a87;
	font-size: 1.6rem;
}

.hb-card--breve .hb-pill {
	background: #fff;
	color: var(--ink);
	box-shadow: inset 0 0 0 1px #d6d6d3;
}

/* ---------- 4 · EXPLORAR ---------- */
.hb-controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 1rem;
	margin: 0 0 1rem;
}

.hb-seg {
	display: inline-flex;
	padding: 4px;
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0de;
}

.hb-seg-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 38px;
	padding: .4rem 1rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: #333;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.hb-seg-btn:hover {
	color: #111;
}

.hb-seg-btn[aria-pressed="true"] {
	background: #111;
	color: #fff;
}

.hb-seg-btn:focus-visible,
.hb-chip:focus-visible,
.hb-voltar:focus-visible {
	outline: 2px solid var(--gold-ink);
	outline-offset: 2px;
}

.hb-busca {
	margin: 0;
	gap: .5rem .9rem;
}

.hb-busca input {
	flex: 0 1 360px;
	width: 360px;
	max-width: 100%;
}

.hb-busca-conta {
	min-height: 1.45em;
	line-height: 1.45;
	margin: -.35rem 0 .6rem;
	text-align: center;
}

/* na busca, o total da categoria confundiria (mostra 1 card de "3 resultados") */
.hb-explorar.is-busca .hb-cat-cab p {
	display: none;
}

.hb-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* a altura mínima vem do galerias.js: as linhas ficam no topo, sem esticar */
	align-content: flex-start;
	align-items: flex-start;
	gap: .5rem;
	max-width: 1040px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.hb-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 36px;
	padding: .35rem .9rem;
	border: 0;
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0de;
	color: #333;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.hb-chip span {
	font-weight: 500;
	color: #555553;
}

.hb-chip:hover {
	box-shadow: inset 0 0 0 1px #111;
}

.hb-chip[aria-pressed="true"] {
	background: #111;
	color: #fff;
	box-shadow: none;
}

.hb-chip[aria-pressed="true"] span {
	color: rgba(255, 255, 255, .78);
}

.hb-chip[hidden],
.hb-tile[hidden],
.hb-cat[hidden],
.hb-card[hidden] {
	display: none;
}

/* a categoria em quadro: a última foto vencedora dela */
.hb-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.75rem, 1.6vw, 1.25rem);
}

.hb-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
	box-shadow: var(--sh-card);
}

.hb-tile-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.hb-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .1) 66%, rgba(0, 0, 0, 0) 80%);
}

.hb-tile-txt {
	position: absolute;
	z-index: 1;
	left: 1rem;
	right: 3.4rem;
	bottom: .95rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.hb-tile-txt b {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.hb-tile-txt span {
	font-size: .76rem;
	color: rgba(255, 255, 255, .86);
}

.hb-tile-ult {
	font-style: normal;
}

.hb-tile-seta {
	position: absolute;
	z-index: 1;
	right: .9rem;
	bottom: 1rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gold);
	color: #000;
	font-size: .8rem;
	transition: transform .3s ease;
}

.hb-tile:hover .hb-tile-foto img {
	transform: scale(1.06);
}

.hb-tile:hover .hb-tile-seta {
	transform: translateX(3px);
}

.hb-tile:focus-visible {
	outline: 3px solid var(--gold-ink);
	outline-offset: 3px;
}

/* uma categoria: os rounds dela, do mais novo ao mais antigo */
.hb-cat {
	scroll-margin-top: 120px;
}

.hb-cat + .hb-cat {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.hb-cat-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem 1rem;
	margin-bottom: 1.25rem;
}

.hb-cat-cab h3 {
	margin: 0;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--ink);
}

.hb-cat-cab p {
	margin: 0;
	font-size: .9rem;
	color: var(--mut-l);
}

.hb-voltar {
	display: none;
	flex-basis: 100%;
	align-items: center;
	gap: .45rem;
	width: max-content;
	min-height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gold-ink);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}

.hb-voltar:hover {
	color: #111;
}

.hb-grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.hb-sem {
	margin: 1.5rem 0 0;
	text-align: center;
	color: var(--mut-l);
}

/* Altura fixa da área de resultados: o galerias.js mede a vista inicial ("todas as
   categorias") e trava a altura mínima nela; buscar sem achar nada, abrir uma
   categoria de uma galeria só ou trocar de ano não encolhem mais a página. */
.hb-resultados {
	position: relative;
}

/* sem resultado: a mensagem no centro da área, não colada no topo */
.hb-explorar.is-js .hb-sem:not([hidden]) {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin: 0;
	padding: 0 1.5rem;
}

.hb-explorar.is-js .hb-sem i {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-l);
	color: var(--gold-ink);
	font-size: 1.1rem;
}

/* com JS: começa pelos quadros das categorias; uma categoria (ou a busca) troca pelos rounds */
.hb-explorar.is-js .hb-cats {
	display: none;
}

.hb-explorar.is-js.is-cat .hb-cats,
.hb-explorar.is-js.is-busca .hb-cats {
	display: block;
}

.hb-explorar.is-js.is-cat .hb-tiles,
.hb-explorar.is-js.is-busca .hb-tiles {
	display: none;
}

.hb-explorar.is-cat .hb-voltar {
	display: inline-flex;
}

/* ---------- estados que o mock não mostrava ---------- */
/* sem parede (menos de 6 fotos publicadas): o hero fica só com o texto, mais baixo */
.hb-hero--sem-parede::before {
	display: none;
}

.hb-hero--sem-parede .t1-hero-in {
	min-height: 0;
}

/* poucos resultados no "Acabou de sair": o destaque e os cards dividem a linha, sem buraco */
.hb-recentes--1 {
	grid-template-columns: minmax(0, 1fr);
}

.hb-recentes--1 .hb-destaque {
	grid-column: auto;
	grid-row: auto;
	min-height: 460px;
}

.hb-recentes--2,
.hb-recentes--3,
.hb-recentes--4 {
	grid-template-columns: 2fr repeat(var(--n-cards, 1), minmax(0, 1fr));
}

.hb-recentes--3 {
	--n-cards: 2;
}

.hb-recentes--4 {
	--n-cards: 3;
}

.hb-recentes--2 .hb-destaque,
.hb-recentes--3 .hb-destaque,
.hb-recentes--4 .hb-destaque {
	grid-column: auto;
	grid-row: auto;
	min-height: 460px;
}

/* prévia do admin (resultado ainda não publicado): o público não vê o link */
.hb-card--previa {
	box-shadow: 0 0 0 1px var(--line-l), var(--sh-card);
	outline: 2px dashed #9a9a97;
	outline-offset: -2px;
}

/* foto vencedora que não resolve */
.hb-sem-foto {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #f3f2ef 0 12px, #ecebe7 12px 24px);
}

.hb-destaque .hb-sem-foto {
	background: repeating-linear-gradient(135deg, #151515 0 12px, #1b1b1b 12px 24px);
}

/* o link que levou a uma galeria fora do ar volta aqui com o motivo */
.hb-aviso {
	max-width: 640px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
	padding: .85rem 1.15rem;
	border-radius: var(--r-md);
	background: rgba(255, 183, 0, .1);
	box-shadow: inset 0 0 0 1px rgba(138, 95, 0, .25);
	color: var(--ink);
	font-size: .9rem;
	text-align: center;
}

.hb-aviso i {
	color: var(--gold-ink);
}

/* ---------- MOVIMENTO ---------- */
@media (prefers-reduced-motion: no-preference) {
	.hb-anima > .hb-card,
	.hb-anima > .hb-tile,
	.hb-anima > .hb-destaque {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .55s ease calc(var(--i, 0) * 60ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 60ms), box-shadow .3s ease;
	}

	.hb-anima.is-in > .hb-card,
	.hb-anima.is-in > .hb-tile,
	.hb-anima.is-in > .hb-destaque {
		opacity: 1;
		transform: none;
	}
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1100px) {
	.hb-recentes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hb-destaque {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 440px;
	}

	.hb-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

/* tablet e notebook pequeno: texto e parede dividem a largura sem se cruzar. Com a
   parede a 66% (antes) e o texto com 600px, o título passava por cima das fotos */
@media (min-width: 761px) and (max-width: 1180px) {
	.hb-hero::before {
		background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 50%, rgba(10, 10, 10, .72) 55%, rgba(10, 10, 10, 0) 64%);
	}

	.hb-hero .t1-mural {
		width: 46%;
	}

	.hb-hero .t1-hero-txt {
		max-width: 50%;
	}

	.hb-hero .t1-stats {
		flex-wrap: wrap;
		row-gap: 1rem;
	}
}

@media (max-width: 760px) {
	/* as 3 colunas a 58% acima vencem a regra comum do celular (seletor mais forte):
	   sem isto, cada fita ficava espremida numa coluna de 78px, uma por cima da outra */
	.hb-hero .t1-mural {
		width: auto;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.hb-hero .t1-mural-item {
		width: 168px;
	}

	/* no celular as colunas viram fitas: o desencontro vertical do computador
	   jogava a 2ª fita por cima da 1ª */
	.hb-hero .t1-mural-col:nth-child(even) {
		margin-top: 0;
	}

	/* os recentes viram uma fileira que se arrasta com o dedo */
	.hb-recentes {
		display: flex;
		gap: 12px;
		margin: 0 -16px;
		padding: 0 16px 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.hb-recentes > * {
		scroll-snap-align: start;
	}

	.hb-destaque {
		flex: 0 0 86%;
		min-height: 420px;
	}

	.hb-recentes > .hb-card {
		flex: 0 0 74%;
	}

	.hb-destaque h3 {
		font-size: 2rem;
	}

	/* no celular o texto ocupa mais da altura do card: o véu sobe junto (o título caía a 2,6:1 — medido) */
	.hb-destaque::after {
		background: linear-gradient(to top, rgba(8, 8, 8, .96) 0%, rgba(8, 8, 8, .9) 48%, rgba(8, 8, 8, .55) 70%, rgba(8, 8, 8, 0) 90%);
	}

	.hb-tile::after {
		background: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .86) 40%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, 0) 92%);
	}

	.hb-tile-ult {
		display: none;
	}

	.hb-controles {
		gap: .6rem;
	}

	.hb-busca input {
		flex-basis: 100%;
		width: 100%;
	}

	.hb-busca {
		width: 100%;
	}

	.hb-chips {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-left: -16px;
		margin-right: -16px;
		padding: 0 16px 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hb-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .6rem;
	}

	.hb-tile {
		border-radius: 14px;
	}

	.hb-tile-txt {
		left: .75rem;
		right: .75rem;
		bottom: .7rem;
	}

	.hb-tile-txt b {
		font-size: .95rem;
	}

	.hb-tile-txt span {
		font-size: .66rem;
	}

	.hb-tile-seta {
		display: none;
	}

	.hb-grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
   COLEÇÕES — a fileira de miniaturas sob a capa (galerias.js, ligarTirasColecao;
   pedido do dono, 12/10/2026: saiu o folhear no mouse). Na grade a fileira ocupa
   os últimos --tira px da célula (a grade justificada reserva a altura); nas
   empatadas vem logo abaixo da foto. Miniatura abre a foto ampliada, "+N" abre a
   coleção inteira. Sem JS não há fileira (os links ficam ocultos).
   ===================================================================== */
.rz-cell--colecao {
	--tira: 48px;
}

.rz-cell--colecao > a {
	height: calc(100% - var(--tira));
}

.rz-cell--colecao .rz-cell-cap {
	bottom: var(--tira);
}

.rz-cell-tira {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: 4px;
	height: var(--tira);
	padding: 4px;
	background: #111;
}

.rz-empate-tira {
	display: flex;
	gap: 4px;
	margin-top: .45rem;
}

.rz-tira-foto,
.rz-tira-mais {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #1a1a1a;
}

.rz-empate-tira .rz-tira-foto,
.rz-empate-tira .rz-tira-mais {
	width: 52px;
	height: 52px;
	border-radius: 6px;
}

/* o mesmo efeito da fileira do visor, sem borda: as miniaturas ficam apagadas e a que
   está sob o mouse acende (e a foto dela vai para a capa, galerias.js) */
.rz-tira-foto {
	opacity: .5;
	transition: opacity .2s ease;
}

.rz-tira-foto:hover {
	opacity: 1;
}

.rz-tira-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rz-tira-mais {
	display: grid;
	place-items: center;
	cursor: pointer;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	transition: background .2s ease, color .2s ease;
}

.rz-tira-mais:hover {
	background: var(--gold, #ffb700);
	color: #000;
}

.rz-tira-mais:focus-visible {
	outline: none;
}

/* =====================================================================
   VISOR — a exibição em tela cheia de foto e coleção (visor.js), UMA camada
   para tudo nas galerias: campeã única ou empatadas, pódio, grade, fotografia e
   coleção, premiadas e honrosas (pedido do dono, 12/10/2026). Dois estados:
   .is-foto (o ampliado: foto, setas, legenda e a fileira de miniaturas) e
   .is-prancha (a coleção inteira em linhas justificadas). O mesmo botão de
   fechar, o mesmo topo e a mesma rolagem fina nos dois.
   ===================================================================== */
.rz-travada,
.rz-travada body {
	overflow: hidden;
}

.rz-visor {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	/* opaco: a 97% a página vazava por trás do topo e da fileira */
	background: #060606;
	color: #fff;
	animation: rz-visor-entra .25s ease-out;
	/* o que o topo, a legenda e a fileira ocupam: a foto fica com o resto da tela */
	--cromo: 230px;
	-webkit-user-select: none;
	user-select: none;
}

.rz-visor[hidden] {
	display: none;
}

@keyframes rz-visor-entra {
	from {
		opacity: 0;
	}
}

/* rolagem fina e discreta (a fileira e a prancha) */
.rz-visor-tira,
.rz-visor-prancha {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.rz-visor-tira::-webkit-scrollbar,
.rz-visor-prancha::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.rz-visor-tira::-webkit-scrollbar-thumb,
.rz-visor-prancha::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .28);
	border-radius: 999px;
}

.rz-visor-tira::-webkit-scrollbar-track,
.rz-visor-prancha::-webkit-scrollbar-track {
	background: transparent;
}

/* o topo: contador e identificação à esquerda, fechar à direita */
.rz-visor-topo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px 20px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

/* o topo em linhas: contador · avatar com o nome · título e média (pedido do dono,
   12/10/2026: no zoom o topo fica por cima da foto, e numa linha só ele atravessava) */
.rz-visor-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	line-height: 1.3;
}

.rz-visor-autor {
	display: flex;
	align-items: center;
	gap: .55rem;
	max-width: 100%;
	min-width: 0;
}

.rz-visor-av {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: #171717;
	box-shadow: inset 0 0 0 1px rgba(255, 183, 0, .5);
	color: #ffb700;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.rz-visor-av[hidden] {
	display: none;
}

.rz-visor-av img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rz-visor-tit {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
}

.rz-visor-sub {
	font-size: .84rem;
	color: #b9b9b4;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rz-visor-sub:empty {
	display: none;
}

.rz-visor-fechar,
.rz-visor-seta {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.rz-visor-fechar {
	flex: 0 0 auto;
}

.rz-visor-fechar:hover,
.rz-visor-seta:hover {
	background: #ffb700;
	box-shadow: none;
	color: #000;
}

.rz-visor-fechar:focus-visible,
.rz-visor-seta:focus-visible,
.rz-visor-tira button:focus-visible,
.rz-visor-grade button:focus-visible {
	outline: 2px solid #ffb700;
	outline-offset: 2px;
}

/* o palco: a foto inteira no meio, as setas nas bordas */
.rz-visor-palco {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px clamp(16px, 7vw, 96px) 8px;
}

.rz-visor-fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	margin: 0;
}

.rz-visor-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - var(--cromo));
	max-height: calc(100dvh - var(--cromo));
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
	cursor: default;
}

.rz-visor-img:not([src]) {
	display: none;
}

/* o contador "2 / 5", embaixo da foto, no centro */
.rz-visor-leg {
	flex: 0 0 auto;
	margin: .6rem 0 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-align: center;
	color: #ffb700;
	font-variant-numeric: tabular-nums;
}

.rz-visor-leg:empty {
	display: none;
}

.rz-visor-seta {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
}

.rz-visor-seta--ant {
	left: clamp(8px, 2vw, 24px);
}

.rz-visor-seta--prox {
	right: clamp(8px, 2vw, 24px);
}

.rz-visor-seta[hidden] {
	display: none;
}

/* a fileira de miniaturas: a foto atual acesa, as outras apagadas */
.rz-visor-tira {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
	padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	overflow-x: auto;
	overflow-y: hidden;
	scroll-padding: 0 16px;
}

.rz-visor-tira[hidden] {
	display: none;
}

/* centrada enquanto cabe; passa a rolar quando não cabe */
.rz-visor-tira::before,
.rz-visor-tira::after {
	content: '';
	flex: 1 0 0;
}

.rz-visor-tira button {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #1a1a1a;
	opacity: .45;
	cursor: pointer;
	transition: opacity .2s ease, box-shadow .2s ease;
}

.rz-visor-tira button:hover {
	opacity: .85;
}

.rz-visor-tira button.is-on {
	opacity: 1;
	box-shadow: 0 0 0 2px #ffb700;
}

.rz-visor-tira img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* a prancha: a coleção inteira em linhas justificadas (a ordem da série, cada foto
   inteira; --ar vem do JS quando a imagem carrega; o ::after segura a última linha) */
.rz-visor-prancha {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: .5rem clamp(1rem, 4vw, 3rem) 3rem;
}

.rz-visor-grade {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 1280px;
	margin: 0 auto;
}

.rz-visor-grade::after {
	content: '';
	flex: 999 1 0;
}

.rz-visor-grade button {
	position: relative;
	display: block;
	flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 250px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #151515;
	cursor: zoom-in;
}

.rz-visor-grade img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.rz-visor-grade button:hover img {
	transform: scale(1.03);
}

.rz-visor-grade span {
	position: absolute;
	top: 8px;
	left: 8px;
	min-width: 26px;
	padding: .1rem .45rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, .7);
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
}

/* um estado por vez */
.rz-visor.is-foto .rz-visor-prancha,
.rz-visor.is-zoom .rz-visor-prancha,
.rz-visor.is-prancha .rz-visor-palco,
.rz-visor.is-prancha .rz-visor-tira {
	display: none;
}

/* na foto ampliada o cursor avisa que dá para ampliar mais; no ZOOM só a foto, o
   maior que a tela dá, fundo preto, sem fileira, setas nem legenda; o cursor
   avisa que o clique volta (clicar FORA não fecha nada: só Esc ou o X) */
.rz-visor.is-foto .rz-visor-img {
	cursor: zoom-in;
}

.rz-visor.is-zoom {
	--cromo: 24px;
	background: #000;
}

.rz-visor.is-zoom .rz-visor-topo {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}

.rz-visor.is-zoom .rz-visor-palco {
	padding: 12px;
}

/* a foto ocupa a tela inteira (contida na proporção), mesmo quando o arquivo é
   menor que a tela — "o maior que dá" */
.rz-visor.is-zoom .rz-visor-fig {
	width: 100%;
	height: 100%;
}

.rz-visor.is-zoom .rz-visor-img {
	width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 0;
	box-shadow: none;
	cursor: zoom-out;
}

/* zoom parado por 0,8 s: topo, X e setas somem e fica só a foto (visor.js, is-quieto) */
.rz-visor.is-zoom .rz-visor-topo,
.rz-visor.is-zoom .rz-visor-seta {
	transition: opacity .4s ease;
}

.rz-visor.is-zoom.is-quieto .rz-visor-topo,
.rz-visor.is-zoom.is-quieto .rz-visor-seta {
	opacity: 0;
	pointer-events: none;
}

/* no zoom a foto ocupa a tela: o contador fica por cima, no pé, no centro */
.rz-visor.is-zoom .rz-visor-leg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	margin: 0;
	padding: .3rem .7rem;
	pointer-events: none;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.rz-visor.is-zoom .rz-visor-fig {
	position: static;
}

/* toque: sem setas (desliza), miniaturas e botões menores, legenda numa linha */
@media (pointer: coarse) {
	.rz-visor-seta {
		display: none;
	}

	.rz-visor-palco {
		padding: 4px 10px 6px;
	}
}

@media (max-width: 760px) {
	.rz-visor {
		/* topo em três linhas e fileira menor */
		--cromo: 250px;
	}

	.rz-visor-topo {
		padding-left: 14px;
		padding-right: 12px;
	}

	.rz-visor-av {
		width: 28px;
		height: 28px;
	}

	.rz-visor-tit {
		font-size: .92rem;
	}

	.rz-visor-sub {
		font-size: .78rem;
	}

	.rz-visor-tira button {
		width: 52px;
		height: 52px;
	}

	.rz-visor-grade {
		gap: 8px;
	}

	.rz-visor-grade button {
		flex-basis: calc(var(--ar, 1.5) * 100px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rz-visor {
		animation: none;
	}

	.rz-visor-fechar,
	.rz-visor-seta,
	.rz-visor-tira button,
	.rz-visor-grade img {
		transition: none;
	}
}