/* ==========================================================================
   Show do Rádio — estilos
   Índice: 1 fonte · 2 tokens · 3 base · 4 layout · 5 navegação · 6 botões e
   chips · 7 capas · 8 cards e listas · 9 páginas · 10 texto · 11 barra de
   leitura e compartilhar · 12 comentários · 13 player · 14 busca ·
   15 celular · 16 acessibilidade e impressão
   ========================================================================== */

/* 1. Fonte (Inter variável, servida pelo próprio tema) ------------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Serifadas do modo clássico. Só são baixadas quando o modo está ligado. */
@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
	--fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--accent: #FF7A1A;
	--on-accent: #140800;
	--wa: #25D366;
	--on-wa: #04210F;
	--raio-p: 6px;
	--raio: 10px;
	--raio-g: 14px;
	--raio-xg: 18px;
	--lateral: 248px;
	--h-player: 72px;
	--h-mini: 64px;
	--h-leitura: 68px;
	--h-abas: 64px;
	--folga-inferior: 0px;
	--gutter: 32px;

	/* Escuro (padrão) — tons quentes, de madeira de rádio antigo. */
	--bg: #0C0B0A;
	--surface: #151412;
	--surface-2: #1E1C19;
	--surface-3: #2B2824;
	--line: #2A2723;
	--text: #F5F3EF;
	--muted: #A8A29E;
	--accent-text: var(--accent);
	--glass: rgba(12, 11, 10, 0.86);
	--sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
	--scrim: rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}

:root[data-tema="claro"] {
	--bg: #FAF9F6;
	--surface: #FFFFFF;
	--surface-2: #F1EFEA;
	--surface-3: #E5E2DA;
	--line: #E7E4DC;
	--text: #151412;
	--muted: #5C5852;
	/* Cor de destaque escurecida para ter contraste sobre o fundo claro. */
	--accent-text: #B5470A;
	--accent-text: color-mix(in oklab, var(--accent) 62%, #000);
	--glass: rgba(250, 249, 246, 0.9);
	--sombra: 0 10px 30px rgba(20, 18, 15, 0.12);
	--scrim: rgba(20, 18, 15, 0.38);
	color-scheme: light;
}

/* 3. Base ------------------------------------------------------------------ */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl) { margin: 0; }
:where(ol, ul)[class] { padding: 0; list-style: none; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(a) { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.5 var(--fonte);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.ico { flex: none; width: var(--ico, auto); height: auto; }

.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pular {
	position: fixed;
	top: 8px; left: 8px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--raio);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
	transform: translateY(-150%);
}
.pular:focus { transform: none; }

:root[data-tema="escuro"] .so-claro,
:root[data-tema="claro"] .so-escuro { display: none; }

.so-estreito { display: none; }

body.sem-rolagem { overflow: hidden; }

/* Navegação sem recarregar: indica que a próxima página está chegando. */
html.is-carregando .conteudo { opacity: 0.55; transition: opacity 0.2s 0.12s; }
html.is-carregando body::before {
	content: "";
	position: fixed;
	top: 0; left: 0;
	z-index: 100;
	width: 40%;
	height: 3px;
	background: var(--accent);
	animation: carregando 1s ease-in-out infinite;
}
@keyframes carregando { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* 4. Layout ---------------------------------------------------------------- */
body.player-ativo { --folga-inferior: var(--h-player); }
body.tem-barra-leitura { --folga-inferior: var(--h-leitura); }
body.tem-barra-leitura.player-ativo { --folga-inferior: calc(var(--h-leitura) + var(--h-player)); }

.app { display: flex; min-height: 100vh; }
.app__principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.lateral {
	position: sticky;
	top: 0;
	height: 100vh;
	width: var(--lateral);
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px 12px calc(var(--folga-inferior) + 16px);
	border-right: 1px solid var(--line);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
/* Barra de rolagem só aparece quando o mouse está na lateral (Windows mostra a trilha sempre). */
.lateral:hover, .lateral:focus-within { scrollbar-color: var(--surface-3) transparent; }
.lateral::-webkit-scrollbar { width: 6px; }
.lateral::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.lateral:hover::-webkit-scrollbar-thumb { background: var(--surface-3); }

.topo {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px var(--gutter);
	background: var(--glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.topo__historico { display: flex; gap: 8px; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.conteudo { flex: 1; padding: 4px var(--gutter) 56px; outline: none; }
.pagina { display: flex; flex-direction: column; }

.rodape {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin: 0 var(--gutter);
	padding: 28px 0 calc(var(--folga-inferior) + 28px);
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
}
.rodape__titulo { font-weight: 700; color: var(--text); margin-bottom: 8px; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rodape__links a:hover { color: var(--text); }

/* 5. Navegação ------------------------------------------------------------- */
.marca { display: flex; align-items: center; padding: 2px 10px 24px; }
.marca__img { display: block; width: auto; height: 34px; max-width: 100%; object-fit: contain; }
.marca__img--claro { display: none; }
:root[data-tema="claro"] .marca__img--escuro { display: none; }
:root[data-tema="claro"] .marca__img--claro { display: block; }
.marca--topo { display: none; padding: 0; }
.marca--topo .marca__img { height: 28px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--raio);
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
}
.nav__item:hover { background: var(--surface-2); color: var(--text); }
.nav__item.is-ativo { background: var(--surface-2); color: var(--text); font-weight: 700; }
.nav__item.is-ativo .ico { color: var(--accent-text); }

.lateral__divisor { height: 1px; background: var(--line); margin: 18px 12px 14px; }
.lateral__titulo {
	padding: 0 12px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.lateral__emissora {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px;
	border-radius: var(--raio);
}
.lateral__emissora:hover { background: var(--surface-2); }
.lateral__emissora-nome { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral__envio {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 4px 0;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--raio-g);
	color: var(--accent-text);
	transition: background 0.15s, border-color 0.15s;
}
.lateral__envio:hover { background: var(--surface-2); border-color: var(--muted); }
.lateral__envio span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.lateral__envio strong { font-size: 13px; color: var(--text); }
.lateral__rodape { margin-top: auto; padding: 20px 12px 0; }
.lateral__rodape-lista { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }

.mini-capa {
	width: 36px; height: 36px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--capa-bg, var(--surface-3));
	color: var(--capa-fg, var(--text));
	font-size: 10px;
	font-weight: 800;
	letter-spacing: -0.03em;
	overflow: hidden;
}
.mini-capa--foto { background: var(--surface-3); }
.mini-capa--foto img { width: 100%; height: 100%; object-fit: cover; }

.abas { display: none; }

/* 6. Botões e chips -------------------------------------------------------- */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--raio);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s, filter 0.15s;
}
.botao--destaque { background: var(--accent); color: var(--on-accent); }
.botao--destaque:hover { filter: brightness(1.06); }
.botao--contorno { border-color: var(--line); background: transparent; }
.botao--contorno:hover, .botao--suave:hover { background: var(--surface-2); }
.botao--suave { border-color: var(--line); background: var(--surface-2); }
.botao--whatsapp { background: var(--wa); color: var(--on-wa); }
.botao--largo { width: 100%; }
.cor-whatsapp { color: var(--wa); display: inline-flex; }

.botao-icone {
	width: 40px; height: 40px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: inherit;
	transition: background-color 0.15s, color 0.15s;
}
.botao-icone:hover { background: var(--surface-2); color: var(--text); }
.botao-icone--contorno { border: 1px solid var(--line); border-radius: var(--raio); color: var(--muted); }
.botao-icone--g { width: 46px; height: 46px; }
.botao-icone--suave { background: var(--surface-2); }

.botao-tocar {
	width: 48px; height: 48px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s;
}
.botao-tocar:hover { transform: scale(1.05); }
.botao-tocar--m { width: 52px; height: 52px; }
.botao-tocar--g { width: 56px; height: 56px; }

.pilula {
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.pilula:hover { background: var(--surface-2); color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--rolagem { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
.chips--rolagem::-webkit-scrollbar { display: none; }
.chip {
	min-height: 34px;
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-2);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.chip:hover { background: var(--surface-3); }
.chip.is-ativo { background: var(--text); border-color: var(--text); color: var(--bg); }

.sobretitulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-text);
}
.rotulo-secao {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}
.vazio { padding: 32px 0; color: var(--muted); }

/* 7. Capas (cor + número + mostrador de rádio) ----------------------------- */
.capa {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	aspect-ratio: 1;
	padding: 12px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--capa-bg, #44403C);
	color: var(--capa-fg, #FFFFFF);
}
.capa--larga { aspect-ratio: 16 / 9; }
.capa__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.capa--foto { color: #FFFFFF; }
.capa--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.6));
}
.capa__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
}
.capa__rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capa__base { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.capa__numero {
	font-size: clamp(12px, 23cqw, 112px);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.85;
	white-space: nowrap;
}
.capa--larga .capa__numero { font-size: clamp(12px, 17cqw, 112px); }
.capa__dial { position: relative; display: block; height: 10px; }
.capa__dial::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 6px);
	opacity: 0.45;
}
.capa__dial::after {
	content: "";
	position: absolute;
	top: -3px; bottom: -3px;
	left: var(--agulha, 50%);
	width: 2px;
	border-radius: 1px;
	background: var(--accent);
}
.capa--p { padding: 4px 5px; border-radius: 8px; }
.capa--p .capa__numero { font-size: clamp(10px, 26cqw, 15px); letter-spacing: -0.04em; }
.capa--p .capa__dial, .capa--p .capa__topo { display: none; }
.capa--g { padding: 16px; border-radius: 14px; }
.capa--g .capa__dial { height: 12px; }
.capa--xl { padding: 20px; border-radius: 16px; }
/* Arte própria da categoria (capa de playlist): a imagem já traz o nome. */
.capa--playlist { padding: 0; background: var(--surface-3); }
.capa--playlist .capa__img { z-index: 0; }
.capa--xl .capa__topo { font-size: 12px; }
.capa--xl .capa__base { gap: 14px; }
.capa--xl .capa__dial { height: 14px; }
.capa--xl .capa__dial::after { width: 3px; top: -4px; bottom: -4px; }

/* 8. Cards e listas -------------------------------------------------------- */
.secao { margin-top: 44px; }
.pagina > .secao:first-child, .pagina > .chips + .secao { margin-top: 20px; }
.secao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.secao__apoio { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.secao__titulo { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.secao__titulo--m { font-size: 22px; margin-bottom: 12px; }
.secao__titulo a { display: inline-flex; align-items: center; gap: 2px; }
.secao__titulo .ico { color: var(--muted); transition: transform 0.15s; }
.secao__titulo a:hover .ico { transform: translateX(3px); }
.secao__setas { display: flex; gap: 8px; }
.secao__setas .botao-icone--contorno { border-radius: 50%; width: 36px; height: 36px; }

.esticar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.carrossel, .prateleira {
	display: grid;
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.carrossel::-webkit-scrollbar, .prateleira::-webkit-scrollbar { display: none; }
.carrossel > *, .prateleira > * { scroll-snap-align: start; }

/* Destaques: rótulo, título e apoio acima da arte. */
.carrossel--destaques { grid-auto-columns: minmax(min(100%, 440px), 1fr); gap: 24px; }
.destaque { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.destaque__sobre { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.destaque__titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.destaque__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.destaque__sub { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.destaque__arte { position: relative; }
.destaque__arte .capa { border-radius: var(--raio-g); }
.destaque__tocar { position: absolute; right: 20px; bottom: 50px; }

/* "Chegaram ao acervo": grade de linhas compactas. */
.grade-rapida { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; }
.faixa-rapida { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--raio); min-width: 0; }
.faixa-rapida:hover { background: var(--surface-2); }
.faixa-rapida__capa { position: relative; width: 52px; height: 52px; flex: none; border-radius: 8px; overflow: hidden; }
.faixa-rapida__capa .capa { height: 100%; }
.faixa-rapida__tocar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.15s;
}
.faixa-rapida:hover .faixa-rapida__tocar, .faixa-rapida__tocar:focus-visible { opacity: 1; }
.faixa-rapida__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.faixa-rapida__titulo, .faixa-rapida__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-rapida__titulo { font-size: 15px; font-weight: 600; }
.faixa-rapida__sub { font-size: 13px; color: var(--muted); }
.faixa-rapida .equalizador { position: absolute; inset: 0; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.45); }
.faixa-rapida .equalizador span { background: #FFFFFF; }

/* Equalizador (item tocando). */
.equalizador { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.equalizador span { display: block; width: 3px; height: 4px; border-radius: 1px; background: var(--accent-text); animation: eq 0.9s ease-in-out infinite; }
.equalizador span:nth-child(2) { animation-delay: 0.2s; }
.equalizador span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.faixa-rapida.is-tocando .faixa-rapida__capa > .equalizador, .linha.is-tocando .linha__n > .equalizador { display: flex; }
.faixa-rapida.is-atual .faixa-rapida__titulo, .linha.is-atual .linha__titulo, .card-audio.is-atual > .card-audio__titulo { color: var(--accent-text); }

/* Prateleiras. */
.prateleira { grid-auto-columns: 184px; gap: 20px; padding-top: 4px; }
.card-audio { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* A capa fica acima do link esticado (o transform do hover cria outro contexto de
   empilhamento), mas deixa o clique passar — só o botão de tocar captura. */
.card-audio__capa { position: relative; z-index: 2; display: block; pointer-events: none; transition: transform 0.2s; }
.card-audio:hover .card-audio__capa { transform: translateY(-3px); }
.card-audio__sobre {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.38);
	opacity: 0;
	transition: opacity 0.16s;
	pointer-events: none;
}
.card-audio__sobre .botao-tocar { pointer-events: auto; }
.card-audio:hover .card-audio__sobre, .card-audio:focus-within .card-audio__sobre { opacity: 1; }
.card-audio__titulo { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-audio__sub { font-size: 13px; color: var(--muted); margin-top: -4px; }

.prateleira--pessoas { grid-auto-columns: 152px; }
.card-pessoa { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.card-pessoa__nome { font-size: 14px; font-weight: 600; line-height: 1.3; }
.card-pessoa:hover .avatar { transform: translateY(-3px); }

.avatar {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--avatar, 52px);
	height: var(--avatar, 52px);
	border-radius: 50%;
	overflow: hidden;
	background: var(--avatar-bg, #57534E);
	color: #FAFAF9;
	font-size: calc(var(--avatar, 52px) * 0.32);
	font-weight: 700;
	letter-spacing: -0.02em;
	transition: transform 0.2s;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--p { --avatar: 40px; }
.avatar--m { --avatar: 52px; }
.avatar--g { --avatar: 152px; }
.avatar--xl { --avatar: 120px; }

/* Emissoras e coleções. */
.grade-emissoras { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.emissora { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.emissora__arte {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 315 / 249;
	padding: 14px;
	border-radius: var(--raio-g);
	overflow: hidden;
	/* Mesma linguagem das artes do site antigo: rádio escuro + cor da categoria. */
	background:
		radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--capa-bg, #44403C) 70%, transparent), transparent 70%),
		linear-gradient(160deg, #26231F, #0E0D0C);
	color: #FFFFFF;
	box-shadow: 0 1px 0 var(--line);
	transition: transform 0.2s, box-shadow 0.2s;
}
/* Faixa azul e laranja da identidade antiga, embaixo de toda capa gerada. */
.emissora__arte::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2.4%;
	min-height: 4px;
	background: linear-gradient(90deg, #3366CF 0 26.5%, #FF6400 26.5%);
}
.emissora:hover .emissora__arte { transform: translateY(-3px); box-shadow: var(--sombra); }
.emissora--foto .emissora__arte { padding: 0; background: var(--surface-3); }
.emissora--foto .emissora__arte::after { display: none; }
.emissora__arte img { width: 100%; height: 100%; object-fit: cover; }
.emissora__marca {
	position: relative;
	z-index: 1;
	max-width: 92%;
	font-size: clamp(16px, 12cqw, 40px);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.emissora__numero {
	position: absolute;
	right: -4px; bottom: -6%;
	font-size: 46cqw;
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 1;
	opacity: 0.12;
	white-space: nowrap;
}
.emissora__textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.emissora__nome { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emissora__rotulo { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Comentários na lateral da página de áudio. */
.caixa__contagem { margin-left: 4px; font-weight: 600; color: var(--muted); }
.caixa__apoio { margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.previa-comentarios { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.previa-comentarios li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.previa-comentarios strong { font-size: 13px; }
.previa-comentarios span { color: var(--muted); }
.botao--largo { width: 100%; justify-content: center; }

/* Carrossel do topo da inicial (banners 1920×650). */
.vitrine { position: relative; margin: 4px 0 22px; }
.vitrine__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--raio-g);
	background: var(--surface-2);
	box-shadow: 0 1px 0 var(--line);
}
.vitrine__trilho::-webkit-scrollbar { display: none; }
.vitrine__slide { position: relative; isolation: isolate; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
/* Fundo: a própria arte, desfocada, para preencher as laterais em telas largas. */
.vitrine__slide::before {
	content: "";
	position: absolute;
	inset: -40px;
	z-index: -1;
	background: var(--vitrine-fundo) center / cover no-repeat;
	filter: blur(32px) saturate(1.1);
	opacity: 0.9;
}
.vitrine__link { display: block; }
.vitrine__link img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 650;
	/* Em monitores grandes o banner não ocupa a tela toda: até 400 px ou 45% da altura. */
	max-height: min(400px, 45vh);
	object-fit: contain;
}
.vitrine__seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	background: rgba(12, 11, 10, 0.55);
	color: #FFFFFF;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.2s;
}
.vitrine__seta--ant { left: 12px; }
.vitrine__seta--prox { right: 12px; }
.vitrine:hover .vitrine__seta, .vitrine__seta:focus-visible { opacity: 1; }
.vitrine__pontos {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 2;
	display: flex;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 999px;
	background: rgba(12, 11, 10, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transform: translateX(-50%);
}
.vitrine__ponto { width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.55); transition: width 0.25s, background 0.25s; }
.vitrine__ponto.is-ativo { width: 20px; background: #FFFFFF; }

/* Parceiros comerciais (banners 600×161). */
.parceiros { margin-top: 40px; }
.parceiros__rotulo { margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.parceiros__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.parceiros__item { display: block; border-radius: var(--raio); overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); transition: transform 0.2s, box-shadow 0.2s; }
a.parceiros__item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--sombra); }
.parceiros__item img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 161; object-fit: cover; }
.parceiros--um { margin-top: 44px; }
.parceiros--um .parceiros__rotulo { text-align: center; }
.parceiros--um .parceiros__grade { grid-template-columns: minmax(0, 600px); justify-content: center; }

/* Amigos do Rádio (artes 359×203). */
.grade-amigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 14px; }
.amigo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.amigo__arte { display: block; margin-bottom: 6px; border-radius: var(--raio-g); overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.amigo:hover .amigo__arte { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--sombra); }
.amigo__arte img { display: block; width: 100%; height: auto; aspect-ratio: 359 / 203; object-fit: cover; }
.amigo__nome { font-size: 15px; font-weight: 700; line-height: 1.25; }
.amigo__site { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }

/* Leituras e fotos. */
.grade-artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.prateleira--artigos { grid-auto-columns: minmax(260px, 1fr); gap: 20px; }
.card-artigo { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-artigo__midia { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.card-artigo__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.card-artigo:hover .card-artigo__midia img { transform: scale(1.03); }
.card-artigo__midia--capa .capa { height: 100%; border-radius: 0; }
.card-artigo__titulo { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-artigo__meta { font-size: 13px; color: var(--muted); }

.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.card-foto { display: flex; flex-direction: column; gap: 8px; }
.card-foto__midia { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.card-foto__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.card-foto__link:hover img { transform: scale(1.03); }
.card-foto__midia--capa .capa { height: 100%; aspect-ratio: auto; border-radius: 0; }
.card-foto__legenda { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); }

.grade-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.grade-pessoas .avatar--g { --avatar: min(152px, 38vw); }

/* Lista de faixas. */
.lista-faixas { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.linha {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 200px 56px 60px 40px;
	gap: 16px;
	align-items: center;
	padding: 8px 14px;
}
.lista-faixas--listrada .linha:nth-child(odd) { background: var(--surface); }
.linha:hover { background: var(--surface-2) !important; }
.linha__n { display: flex; align-items: center; justify-content: center; height: 20px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.linha.is-tocando .linha__numero { display: none; }
.linha__titulo { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha__titulo:hover { text-decoration: underline; text-underline-offset: 3px; }
.linha__dur { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha__cat, .linha__ano { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha__tocar { width: 36px; height: 36px; }
.linha__tocar--vazio { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0.6; }

/* Áudio dentro de artigo. */
.audio-embutido {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0;
	padding: 12px;
	border-radius: var(--raio-g);
	background: var(--surface-2);
	font-size: 15px;
	line-height: 1.35;
}
.audio-embutido .capa { width: 64px; flex: none; }
.audio-embutido__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.audio-embutido__titulo { font-weight: 700; }
.audio-embutido__sub { font-size: 13px; color: var(--muted); }

/* Publicidade (widgets). */
.publicidade { margin: 44px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.publicidade__rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.publicidade img { border-radius: var(--raio); }

/* Paginação. */
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.paginacao .page-numbers, .paginacao > span, .paginacao > a {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	font-size: 14px;
	font-weight: 600;
}
.paginacao a:hover { background: var(--surface-2); }
.paginacao .current { background: var(--text); color: var(--bg); border-color: var(--text); }
.paginacao .dots { border: 0; }

/* 9. Páginas --------------------------------------------------------------- */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }

.cabeca-lista { display: flex; align-items: flex-end; gap: 28px; margin: 12px 0 32px; }
.cabeca-lista--capa .capa { width: 220px; flex: none; box-shadow: var(--sombra); }
.cabeca-lista__textos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cabeca-lista__titulo { font-size: 48px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; overflow-wrap: anywhere; }
.cabeca-lista__desc { max-width: 680px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.cabeca-lista__meta { font-size: 14px; color: var(--muted); }

.cabeca-audio { display: flex; align-items: flex-end; gap: 32px; margin: 12px 0 0; }
.cabeca-audio > .capa { width: 260px; flex: none; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); }
.cabeca-audio__textos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cabeca-audio__titulo { font-size: 52px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; overflow-wrap: anywhere; }
.cabeca-audio__meta { font-size: 14px; color: var(--muted); }
.cabeca-audio .sobretitulo a:hover { text-decoration: underline; }

.colunas-audio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-top: 8px; }
.colunas-audio__lado { display: flex; flex-direction: column; gap: 16px; margin-top: 44px; }
.caixa { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--raio-g); }
.caixa__titulo { font-size: 16px; font-weight: 700; }
.caixa__item { display: flex; align-items: center; gap: 12px; }
.caixa__item .capa { width: 52px; flex: none; }
.caixa__item span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.caixa__item strong { font-size: 15px; color: var(--text); }

.pagina--leitura { max-width: 760px; width: 100%; margin: 0 auto; }
.cabeca-leitura { display: flex; flex-direction: column; gap: 16px; margin: 16px 0 28px; }
.cabeca-leitura__sobre { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cabeca-leitura__titulo { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; overflow-wrap: anywhere; }
.autor { display: flex; align-items: center; gap: 12px; }
.autor__textos { display: flex; flex-direction: column; gap: 2px; }
.autor__nome { font-size: 15px; font-weight: 700; }
.autor__nome:hover { text-decoration: underline; }
.autor__data { font-size: 13px; color: var(--muted); }
.leitura__imagem { margin: 0 0 32px; }
.leitura__imagem img { width: 100%; border-radius: var(--raio-g); }
.leitura__imagem figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.leitura__tags { margin: 32px 0 0; }

.pagina--busca .form-busca, .pagina--404 .form-busca { margin: 8px 0 4px; }
.form-busca {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 600px;
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	color: var(--muted);
}
.form-busca input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--text); font-size: 16px; outline: none; }

.erro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 0; text-align: center; }
.erro__numero { font-size: clamp(96px, 20vw, 160px); font-weight: 800; letter-spacing: -0.07em; line-height: 0.85; }
.erro__dial { width: min(320px, 80%); height: 14px; color: var(--muted); }
.erro .form-busca { width: 100%; }

/* "Neste dia, no rádio", décadas e "Mais ouvidos" */
.card-audio__selo {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--glass);
	color: var(--text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
/* O selo da data ocupa o lugar do rótulo da capa (emissora/coleção). */
.card-audio__capa:has(.card-audio__selo) .capa__rotulo { visibility: hidden; }
.calendario {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 132px;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--raio-xg);
	background: var(--surface);
	box-shadow: var(--sombra);
}
.calendario__mes {
	align-self: stretch;
	padding: 6px 0;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}
.calendario__dia { flex: 1; display: flex; align-items: center; font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.decada-selo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 160px;
	aspect-ratio: 1;
	border-radius: var(--raio-xg);
	background: var(--surface-2);
	color: var(--accent-text);
	font-size: 76px;
	font-weight: 800;
	letter-spacing: -0.06em;
	box-shadow: var(--sombra);
}
.dias-vizinhos { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 24px; }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 24px; margin-top: 12px; }
.meses__nome { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.meses__dias { display: flex; flex-wrap: wrap; gap: 6px; }
.meses__dia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border: 1px solid var(--line);
	border-radius: var(--raio-p);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background 0.15s, border-color 0.15s;
}
.meses__dia:hover { border-color: var(--muted); background: var(--surface-2); }
.meses__dia.is-ativo { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.secao--decadas .chips { margin-top: 2px; }
.convite {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--raio-xg);
	background: var(--surface);
}
.convite__icone { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-3); color: var(--accent-text); }
.convite__textos { flex: 1; min-width: 0; }
.convite__titulo { margin-bottom: 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.convite p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.lista-faixas--parada .linha__numero { font-size: 16px; font-weight: 800; color: var(--text); }
.lista-faixas--parada .linha:nth-child(-n+3) .linha__numero { color: var(--accent-text); }

/* 10. Texto (conteúdo dos posts) ------------------------------------------- */
.texto { font-size: 18px; line-height: 1.72; overflow-wrap: break-word; }
.texto > * + * { margin-top: 22px; }
.texto h2 { margin-top: 40px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.texto h3 { margin-top: 32px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.texto a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.texto strong { font-weight: 700; }
.texto blockquote { margin: 34px 0; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; }
.texto blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted); font-style: normal; }
.texto ul, .texto ol { padding-left: 1.3em; }
.texto li + li { margin-top: 6px; }
.texto img, .texto video, .texto iframe { max-width: 100%; border-radius: 12px; }
.texto figure { margin: 30px 0; }
.texto figcaption, .texto .wp-caption-text { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.texto .wp-caption { max-width: 100%; }
.texto .aligncenter { margin-left: auto; margin-right: auto; }
.texto .alignleft { float: left; margin: 6px 24px 12px 0; max-width: 50%; }
.texto .alignright { float: right; margin: 6px 0 12px 24px; max-width: 50%; }
.texto table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.texto th, .texto td { padding: 8px 12px; border: 1px solid var(--line); }
.texto hr { border: 0; height: 1px; background: var(--line); }
.texto--pequeno { font-size: 15px; line-height: 1.6; }
.texto--pequeno > * + * { margin-top: 12px; }
.texto::after { content: ""; display: table; clear: both; }

/* 11. Barra de leitura e compartilhar --------------------------------------- */
.barra-leitura {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 45;
	height: calc(var(--h-leitura) + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 20px env(safe-area-inset-bottom, 0px);
	background: var(--surface);
	border-top: 1px solid var(--line);
}
.barra-leitura__progresso { position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--surface-3); }
.barra-leitura__progresso div { width: var(--progresso, 0%); height: 100%; background: var(--accent); }
.barra-leitura__restante { margin-left: 8px; font-size: 13px; color: var(--muted); }
.barra-leitura__espaco { flex: 1; }
.acao {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.acao:hover { background: var(--surface-2); }
.so-marcado { display: none; }
.is-curtido { color: var(--accent-text); }
.is-curtido .so-marcado { display: inline-flex; }
.is-curtido .so-desmarcado { display: none; }
.so-desmarcado, .so-marcado { line-height: 0; }

.compartilhar { position: relative; }
.compartilhar__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	z-index: 50;
	width: 232px;
	display: flex;
	flex-direction: column;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--raio-g);
	background: var(--surface);
	box-shadow: var(--sombra);
}
.cabeca-audio .compartilhar__menu { bottom: auto; top: calc(100% + 8px); right: auto; left: 0; }
.compartilhar__item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: var(--raio); font-size: 14px; font-weight: 600; }
.compartilhar__item:hover { background: var(--surface-2); }

/* 12. Comentários (gaveta) -------------------------------------------------- */
.gaveta { margin-top: 48px; }
.gaveta__fundo, .gaveta__alca { display: none; }
.gaveta__caixa { display: flex; flex-direction: column; }
.gaveta__cabeca { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.gaveta__titulo { flex: 1; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.gaveta__titulo span { color: var(--muted); font-weight: 600; }
.gaveta__corpo { padding: 18px 0; }
.gaveta__rodape { padding-top: 14px; border-top: 1px solid var(--line); }
.gaveta__vazio { color: var(--muted); font-size: 15px; }
.js .gaveta [data-fechar-gaveta].botao-icone { display: inline-flex; }

/* Com JS: vira gaveta lateral (desktop) / folha de baixo (celular). */
.js .gaveta { position: fixed; inset: 0; z-index: 70; margin: 0; visibility: hidden; pointer-events: none; }
.js .gaveta.is-aberta { visibility: visible; pointer-events: auto; }
.js .gaveta__fundo { display: block; position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.2s; }
.js .gaveta.is-aberta .gaveta__fundo { opacity: 1; }
.js .gaveta__caixa {
	position: absolute;
	top: 8px; right: 8px; bottom: 8px;
	width: min(440px, calc(100% - 16px));
	background: var(--surface);
	border-radius: var(--raio-xg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
	transform: translateX(110%);
	transition: transform 0.25s ease;
	overflow: hidden;
}
.js .gaveta.is-aberta .gaveta__caixa { transform: none; }
.js .gaveta__cabeca { padding: 18px 20px; }
.js .gaveta__rolagem { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.js .gaveta__corpo { padding: 18px 20px; }
.js .gaveta__rodape { padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }

.comentarios { display: flex; flex-direction: column; gap: 20px; }
.comentarios .children { grid-column: 2; margin-top: 6px; padding: 0; display: flex; flex-direction: column; gap: 18px; list-style: none; }
.comentario { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
.comentario__avatar {
	width: 34px; height: 34px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--avatar-bg, #57534E);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 800;
}
.comentario__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.comentario__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.comentario__data { color: var(--muted); }
.comentario__texto { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.comentario__texto p + p { margin-top: 8px; }
.comentario__moderacao { font-size: 13px; color: var(--accent-text); }
.comentario__acoes { display: flex; gap: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.comentario__acoes a { padding: 6px 0; }
.comentario__acoes a:hover { color: var(--text); }
.selo { padding: 1px 6px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; }

.comment-respond { display: flex; flex-direction: column; gap: 10px; }
.comentarios__titulo-form { font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.comentarios__titulo-form small a { font-size: 13px; color: var(--muted); font-weight: 600; }
.comment-form { display: flex; flex-direction: column; gap: 10px; }
.campos-duplos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--muted); }
.campo input, .campo textarea {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	background: var(--surface-2);
	color: var(--text);
	font-size: 15px;
}
.campo textarea { padding: 10px 12px; resize: vertical; }
.form-submit { margin: 0; }
.form-submit .botao { width: 100%; }

/* 13. Player ---------------------------------------------------------------- */
.player {
	position: fixed;
	left: 0; right: 0;
	bottom: 0;
	z-index: 40;
	height: calc(var(--h-player) + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px env(safe-area-inset-bottom, 0px);
	background: var(--surface);
	border-top: 1px solid var(--line);
}
body.tem-barra-leitura .player { bottom: var(--h-leitura); padding-bottom: 0; height: var(--h-player); }
/* Com a tela cheia aberta, o player sobe acima das abas e da barra de leitura. */
body.player-expandido .player { z-index: 95; }

.player__progresso { position: absolute; left: 0; right: 0; top: -2px; height: 3px; }
.player__trilho { position: absolute; inset: 0; background: var(--surface-3); }
.player__preenchido { width: 0; height: 100%; background: var(--accent); }
.player__pino {
	position: absolute;
	top: 50%; left: 0;
	width: 11px; height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	transition: opacity 0.15s;
}
.player:hover .player__pino, .player__progresso:focus-within .player__pino { opacity: 1; }
.player__busca {
	position: absolute;
	left: 0; right: 0;
	top: -7px;
	width: 100%;
	height: 17px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.player__progresso:has(.player__busca:focus-visible) .player__trilho { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.player__faixa { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; }
.player__capa { width: 48px; height: 48px; flex: none; border-radius: 8px; overflow: hidden; }
.player__capa .capa { height: 100%; }
.player__textos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player__titulo { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__titulo:hover { text-decoration: underline; }
.player__sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.player__controles { flex: none; display: flex; align-items: center; gap: 4px; }
.player__tocar {
	width: 48px; height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	transition: transform 0.15s;
}
.player__tocar:hover { transform: scale(1.05); }
.player__tempo { margin-left: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.player__extras { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--muted); }
.player__volume { display: flex; align-items: center; }
.player__volume input { width: 90px; accent-color: var(--text); }

.so-tocando, .so-mudo { display: none; }
.is-tocando .so-tocando { display: inline-flex; }
.is-tocando .so-parado { display: none; }
.is-mudo .so-mudo { display: inline-flex; }
.is-mudo .so-com-som { display: none; }

.player__fila {
	position: absolute;
	right: 16px;
	bottom: calc(100% + 10px);
	width: min(360px, calc(100vw - 32px));
	max-height: 50vh;
	overflow-y: auto;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--raio-g);
	background: var(--surface);
	box-shadow: var(--sombra);
}
.player__fila-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.player__fila-lista button {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: var(--raio);
	text-align: left;
}
.player__fila-lista button:hover, .player__fila-lista .is-atual button { background: var(--surface-2); }
.player__fila-lista .capa { width: 40px; flex: none; }
.player__fila-lista span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--muted); }
.player__fila-lista strong { font-size: 14px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__fila-lista .is-atual strong { color: var(--accent-text); }

/* Tela "Tocando agora". A cor vem da capa da faixa (--tela-cor, definida no JS). */
.tela {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 10px max(24px, calc((100vw - 440px) / 2)) calc(24px + env(safe-area-inset-bottom, 0px));
	background: var(--bg);
	background: color-mix(in oklab, var(--tela-cor, var(--surface)) 34%, var(--bg));
	color: var(--text);
	overflow-y: auto;
}
.tela__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px; }
.tela__origem { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 13px; min-width: 0; }
.tela__origem span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tela__capa { margin-top: 22px; }
.tela__capa .capa { border-radius: var(--raio-xg); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.tela__info { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; }
.tela__titulo { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.tela__sub { font-size: 15px; color: var(--muted); }
.tela__progresso { margin-top: 20px; }
.tela__busca { width: 100%; accent-color: var(--text); margin: 0; }
.tela__tempos { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tela__controles { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.tela__controles .botao-icone--g { width: 52px; height: 52px; }
.tela__tocar {
	width: 76px; height: 76px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	background: var(--accent);
	color: var(--on-accent);
}
.tela__extras { margin-top: auto; padding-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tela__extra {
	min-height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border-radius: var(--raio-g);
	background: var(--surface-2);
	font-size: 11px;
	font-weight: 600;
	color: var(--muted);
}
.tela__extra strong { font-size: 15px; color: var(--text); }
.tela__wa { color: var(--wa); display: inline-flex; }

/* 14. Busca ----------------------------------------------------------------- */
.campo-busca {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--raio);
	background: var(--surface);
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}
.campo-busca:hover { background: var(--surface-2); }
.campo-busca__texto { width: 260px; }
.campo-busca__atalho { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; font: 600 12px var(--fonte); color: var(--muted); }

.modal-busca { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.modal-busca__fundo { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-busca__caixa {
	position: relative;
	width: 100%;
	max-width: 680px;
	max-height: 76vh;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}
.modal-busca__form { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--accent-text); }
.modal-busca__campo { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--text); font-size: 18px; font-weight: 500; outline: none; }
.modal-busca__campo::placeholder { color: var(--muted); }
.modal-busca__campo:focus-visible { outline: none; }
.modal-busca__form:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.modal-busca__campo::-webkit-search-cancel-button { display: none; }
.modal-busca__corpo { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 22px; }
.modal-busca__corpo .chips { margin-bottom: 22px; }
.modal-busca__dicas { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

.grade-explorar { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.explorar {
	min-height: 76px;
	display: flex;
	align-items: flex-end;
	padding: 12px;
	border-radius: 12px;
	background: var(--capa-bg, var(--surface-3));
	color: var(--capa-fg, var(--text));
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.resultados { display: flex; flex-direction: column; gap: 22px; }
.resultados--pagina { gap: 32px; }
.resultados__grupo { display: flex; flex-direction: column; gap: 2px; }
.resultado { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--raio); }
.resultado:hover, .resultado.is-selecionado, .resultado:has(.is-selecionado) { background: var(--surface-2); }
.resultado .capa { width: 48px; flex: none; }
.resultado .avatar { --avatar: 48px; }
.resultado__img { width: 48px; height: 48px; flex: none; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.resultado__img img { width: 100%; height: 100%; object-fit: cover; }
.resultado__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resultado__titulo { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado__sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado__tocar { position: relative; z-index: 2; }

/* Aviso (toast). */
.aviso {
	position: fixed;
	left: 50%;
	bottom: calc(var(--folga-inferior) + 16px);
	z-index: 95;
	transform: translateX(-50%);
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: var(--raio);
	background: var(--text);
	color: var(--bg);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--sombra);
}

/* Compartilhar áudio (janela estilo YouTube) ---------------------------------- */
.partilha { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 16px; }
.partilha[hidden] { display: none; }
.partilha__fundo { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.partilha__caixa {
	position: relative;
	width: 100%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 20px 22px 22px;
	border: 1px solid var(--line);
	border-radius: var(--raio-xg);
	background: var(--surface);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.partilha__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.partilha__textos { min-width: 0; }
.partilha__titulo { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.partilha__faixa { margin-top: 2px; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.partilha__redes { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.partilha__redes::-webkit-scrollbar { display: none; }
.partilha__rede { display: flex; flex: none; flex-direction: column; align-items: center; gap: 8px; width: 68px; border: 0; background: none; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.partilha__rede[hidden] { display: none; }
.partilha__bola { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-3); color: var(--text); transition: transform 0.15s; }
.partilha__rede:hover .partilha__bola, .partilha__rede:focus-visible .partilha__bola { transform: scale(1.06); }
.partilha__rede--whatsapp .partilha__bola { background: var(--wa); color: var(--on-wa); }
.partilha__link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: var(--raio-g); background: var(--surface-2); }
.partilha__link input { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; text-overflow: ellipsis; }
.partilha__link .botao { flex: none; }
.partilha__inicio { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.partilha__marcar { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.partilha__marcar input { width: 18px; height: 18px; accent-color: var(--accent); }
.partilha__tempo { width: 84px; height: 34px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.partilha__tempo:focus { outline: none; border-bottom-color: var(--accent); }
.partilha__tempo[aria-invalid="true"] { border-bottom-color: var(--accent-text); color: var(--accent-text); }
@media (max-width: 640px) {
	.partilha { align-items: flex-end; padding: 0; }
	.partilha__caixa { max-width: none; border-radius: var(--raio-xg) var(--raio-xg) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Sintonizar ---------------------------------------------------------------- */
.botao-sintonia {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.botao-sintonia:hover { border-color: var(--muted); background: var(--surface-2); }
.botao-sintonia svg { color: var(--accent-text); }
body:has(.player.em-sintonia) .botao-sintonia { border-color: var(--accent); }
.no-ar { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); }
.no-ar[hidden] { display: none; }
.no-ar > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-ar__ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); animation: no-ar 1.6s ease-in-out infinite; }
@keyframes no-ar { 50% { opacity: 0.25; } }
.no-ar__sair { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; }
.no-ar--tela { align-self: center; margin: 4px 0 -8px; font-size: 12px; }
.no-ar--tela .no-ar__sair { padding: 0 8px; }

.sintonia, .arte { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sintonia[hidden], .arte[hidden] { display: none; }
.sintonia__fundo, .arte__fundo { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sintonia__caixa, .arte__caixa {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 22px 24px;
	border: 1px solid var(--line);
	border-radius: var(--raio-xg);
	background: var(--surface);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.sintonia__topo, .arte__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sintonia__titulo, .arte__titulo { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sintonia__apoio { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sintonia__tudo {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--raio-g);
	background: var(--accent);
	color: var(--on-accent);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.sintonia__tudo span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sintonia__tudo strong { font-size: 16px; }
.sintonia__ao-vivo { width: 12px; height: 12px; border-radius: 50%; background: currentColor; animation: no-ar 1.6s ease-in-out infinite; }
.sintonia__grupo { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sintonia__estacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.sintonia__estacao { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--raio); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.sintonia__estacao:hover, .sintonia__estacao:focus-visible { border-color: var(--muted); background: var(--surface-2); }
[data-sintonizar][aria-busy="true"] { opacity: 0.6; cursor: progress; }
.sintonia__moderno { display: flex; flex-direction: column; gap: 12px; }

/* O dial: só no modo clássico (no atual, os cartões acima). */
.dial { display: none; }
:root[data-estilo="classico"] .sintonia__moderno { display: none; }
:root[data-estilo="classico"] .dial { display: flex; }
.dial {
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border-radius: 20px;
	background: linear-gradient(180deg, #6B4226 0%, #4A2C17 55%, #3A2211 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.dial__faixas { display: flex; gap: 8px; }
.dial__faixa {
	padding: 7px 14px;
	border: 1px solid #2A170A;
	border-radius: 999px;
	background: linear-gradient(180deg, #2E1E12, #1B110A);
	color: #D8C29A;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.dial__faixa b { color: #E4B867; margin-right: 4px; }
.dial__faixa[aria-pressed="true"] { background: linear-gradient(180deg, #E4B867, #B8863A); color: #1E1206; }
.dial__faixa[aria-pressed="true"] b { color: #1E1206; }
.dial__vidro {
	position: relative;
	height: 140px;
	border-radius: 12px;
	background: radial-gradient(ellipse at 50% 30%, #FFF6DC 0%, #F0DFB5 55%, #D9C08C 100%);
	box-shadow: inset 0 4px 14px rgba(60, 35, 12, 0.45), inset 0 0 0 3px #B8863A;
	overflow: hidden;
}
.dial__vidro:has(.dial__controle:focus-visible) { box-shadow: inset 0 4px 14px rgba(60, 35, 12, 0.45), inset 0 0 0 3px #B8863A, 0 0 0 3px #E4B867; }
.dial__escala { position: absolute; inset: 0; }
.dial__escala[hidden] { display: none; }
.dial__marca {
	position: absolute;
	top: 26px;
	transform: translateX(-50%);
	font-family: var(--fonte-titulo, Georgia, serif);
	font-size: 15px;
	font-weight: 700;
	color: #4A2C17;
	white-space: nowrap;
	transition: color 0.15s, text-shadow 0.15s;
}
.dial__marca::after { content: ""; position: absolute; left: 50%; top: 26px; width: 2px; height: 22px; background: #4A2C17; transform: translateX(-50%); }
/* Rótulos alternados em duas alturas, para não se encostarem. */
.dial__marca:nth-child(even) { top: 50px; }
.dial__marca:nth-child(even)::after { top: 22px; height: 12px; }
.dial__marca.is-perto { color: #9A2A0E; text-shadow: 0 0 8px rgba(255, 140, 40, 0.6); }
.dial__riscas {
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 26px;
	height: 16px;
	background: repeating-linear-gradient(90deg, rgba(74, 44, 23, 0.7) 0 1px, transparent 1px 12px);
}
.dial__ponteiro {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: #C2280E;
	box-shadow: 0 0 10px rgba(255, 90, 30, 0.7);
	transition: left 0.08s linear;
	pointer-events: none;
}
.dial__controle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.dial__rodape { display: flex; align-items: center; gap: 12px; color: #EBD9B4; }
.dial__luz {
	--sinal: 0;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(120, 255, 140, calc(0.25 + var(--sinal) * 0.75)) 0%, rgba(20, 90, 40, 0.9) 70%);
	box-shadow: 0 0 calc(var(--sinal) * 14px) rgba(120, 255, 140, 0.8), inset 0 0 0 2px #1B110A;
}
.dial__leitura { flex: 1; min-width: 0; font-family: var(--fonte-titulo, Georgia, serif); font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dial__botao { padding: 8px 14px; border: 1px solid #2A170A; border-radius: 999px; background: linear-gradient(180deg, #E4B867, #B8863A); color: #1E1206; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Imagem para as redes ------------------------------------------------------- */
.arte__caixa { max-width: 880px; }
.arte__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.arte__previa { display: flex; justify-content: center; min-height: 320px; padding: 14px; border-radius: var(--raio-g); background: var(--surface-2); }
.arte__previa[aria-busy="true"] { opacity: 0.6; }
.arte__canvas { display: block; width: auto; max-width: 100%; height: auto; max-height: 64vh; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.arte__opcoes { display: flex; flex-direction: column; gap: 10px; }
.arte__rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.arte__escolha { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.arte__escolha .chip { font: inherit; font-size: 14px; cursor: pointer; }
.arte__acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.arte__acoes [hidden] { display: none; }
.arte__dica { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Vozes ---------------------------------------------------------------------- */
.avatar--xg { --avatar: 200px; }
.cabeca-lista--voz .avatar { flex: none; box-shadow: var(--sombra); }
.card-voz__total { margin-top: -6px; font-size: 13px; color: var(--muted); }
.cabeca-audio__vozes { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.cabeca-audio__vozes svg { flex: none; color: var(--accent-text); }
.cabeca-audio__vozes a { color: var(--text); font-weight: 600; }
.cabeca-audio__vozes a:hover { text-decoration: underline; }
.acoes--sem-margem { margin-top: 0; }

/* 15. Celular e telas médias ------------------------------------------------ */
@media (max-width: 1180px) {
	.colunas-audio { grid-template-columns: 1fr; }
	.colunas-audio__lado { margin-top: 0; }
	.grade-rapida { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	:root { --gutter: 16px; }
	body { --folga-inferior: var(--h-abas); }
	body.player-ativo { --folga-inferior: calc(var(--h-abas) + var(--h-mini)); }
	body.tem-barra-leitura { --folga-inferior: var(--h-leitura); }
	body.tem-barra-leitura.player-ativo { --folga-inferior: calc(var(--h-leitura) + var(--h-mini)); }

	.lateral, .topo__historico, .so-largo, .campo-busca__texto, .campo-busca__atalho { display: none !important; }
	.so-estreito { display: inline; }
	.marca--topo { display: flex; }
	.topo { padding: 10px var(--gutter); }
	.campo-busca { padding: 0; justify-content: center; border-radius: 12px; }

	.abas {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 42;
		height: calc(var(--h-abas) + env(safe-area-inset-bottom, 0px));
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--glass);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-top: 1px solid var(--line);
	}
	body.tem-barra-leitura .abas { display: none; }
	.abas__item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
	.abas__icone { width: 52px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; }
	.abas__item.is-ativo { color: var(--text); font-weight: 700; }
	.abas__item.is-ativo .abas__icone { background: var(--surface-2); color: var(--accent-text); }

	/* Player vira mini player colado acima das abas (ou da barra de leitura). */
	.player { bottom: var(--h-abas); height: var(--h-mini); gap: 10px; padding: 0 8px 0 12px; }
	body.tem-barra-leitura .player { bottom: var(--h-leitura); height: var(--h-mini); }
	.player__extras { display: none; }
	.player__controles { gap: 0; }
	.player__capa { width: 44px; height: 44px; }
	.player__tocar { width: 44px; height: 44px; }
	.player__busca { pointer-events: none; }

	.conteudo { padding: 0 var(--gutter) 40px; }
	.secao { margin-top: 32px; }
	.secao__titulo { font-size: 20px; }
	.secao__setas { display: none; }

	.carrossel--destaques { grid-auto-columns: 86%; gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
	.destaque__titulo { font-size: 17px; }
	.destaque__tocar { right: 14px; bottom: 36px; width: 46px; height: 46px; }
	.prateleira { grid-auto-columns: 144px; gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 0; scroll-padding: 0 var(--gutter); }
	.prateleira--pessoas { grid-auto-columns: 112px; }
	.prateleira--pessoas .avatar--g { --avatar: 112px; }
	.prateleira--artigos { grid-auto-columns: 78%; }
	.grade-rapida { grid-template-columns: 1fr; }
	.grade-emissoras { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
	.emissora__arte { padding: 10px; }
	.emissora__nome { font-size: 14px; }
	.emissora__rotulo { font-size: 12px; }
	.grade-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vitrine { margin: 0 calc(var(--gutter) * -1) 18px; }
	.vitrine__trilho { border-radius: 0; }
	/* No celular os pontos ficam abaixo da arte, para não cobrir o texto do banner. */
	.vitrine__pontos { position: static; justify-content: center; margin-top: 8px; padding: 0; background: none; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.vitrine__ponto { background: var(--surface-3); }
	.vitrine__ponto.is-ativo { background: var(--text); }
	.vitrine__seta { display: none; }
	.grade-amigos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
	.amigo__nome { font-size: 14px; }
	.parceiros__grade { grid-template-columns: 1fr; gap: 10px; }

	.linha { grid-template-columns: 28px minmax(0, 1fr) auto 40px; gap: 10px; padding: 8px 10px; }
	.linha__cat, .linha__ano { display: none; }

	.cabeca-lista, .cabeca-audio { flex-direction: column; align-items: flex-start; gap: 18px; }
	.cabeca-lista--capa .capa { width: 160px; }
	.botao-sintonia { width: 40px; padding: 0; justify-content: center; }
	.botao-sintonia__texto { display: none; }
	.avatar--xg { --avatar: 132px; }
	.arte__corpo { grid-template-columns: 1fr; }
	.arte__canvas { max-height: 46vh; }
	.sintonia, .arte { align-items: flex-end; padding: 0; }
	.sintonia__caixa, .arte__caixa { max-width: none; max-height: 92vh; border-radius: var(--raio-xg) var(--raio-xg) 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
	.dial__vidro { height: 120px; }
	.dial__marca { font-size: 13px; }
	.calendario { width: 104px; }
	.convite { flex-direction: column; align-items: flex-start; }
	.dias-vizinhos { gap: 8px; }
	.dias-vizinhos .botao { flex: 1 1 auto; justify-content: center; padding-inline: 12px; }
	.calendario__dia { font-size: 50px; }
	.decada-selo { width: 120px; font-size: 56px; }
	.cabeca-audio > .capa { width: min(100%, 320px); }
	.cabeca-lista__titulo { font-size: 32px; }
	.cabeca-audio__titulo { font-size: 32px; }
	.cabeca-leitura__titulo { font-size: 30px; letter-spacing: -0.035em; line-height: 1.08; }
	.texto { font-size: 17px; line-height: 1.7; }
	.texto h2 { font-size: 22px; }
	.texto blockquote { font-size: 21px; }
	.texto .alignleft, .texto .alignright { float: none; margin: 20px 0; max-width: 100%; }

	.barra-leitura { padding: 0 10px env(safe-area-inset-bottom, 0px); gap: 2px; }
	.acao { padding: 0 10px; }
	.botao--whatsapp { padding: 0 16px; }

	.campos-duplos { grid-template-columns: 1fr; }

	/* Gaveta de comentários sobe de baixo. */
	.js .gaveta__caixa { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 82%; border-radius: 22px 22px 0 0; transform: translateY(100%); }
	.js .gaveta__alca { display: block; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--surface-3); }

	/* Busca em tela cheia. */
	.modal-busca { padding: 0; }
	.modal-busca__caixa { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
	.modal-busca__form { padding: 10px 12px 10px 16px; }
	.modal-busca__fechar { border: 0; color: var(--text); font-size: 15px; font-weight: 600; }

	.aviso { bottom: calc(var(--folga-inferior) + 12px); }
}

@media (hover: none) {
	.card-audio__sobre { opacity: 1; background: none; align-items: flex-start; justify-content: flex-end; padding: 8px; }
	.card-audio__sobre .botao-tocar { width: 40px; height: 40px; }
	.faixa-rapida__tocar { opacity: 1; background: none; color: transparent; }
}

/* 16. Acessibilidade e impressão ------------------------------------------- */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.botao-tocar:focus-visible, .player__tocar:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 11. Modo clássico (easter egg do botão de rádio no topo) -------------------
 * Mesma estrutura; muda o "figurino": serifas de jornal, papel envelhecido no
 * claro, madeira e baquelite no escuro, metal dourado no lugar do laranja e
 * fotos levemente sépia. Ligado por data-estilo="classico" no <html>.
 * ------------------------------------------------------------------------ */
:root[data-estilo="classico"] {
	--fonte: "Source Serif 4", Georgia, "Times New Roman", serif;
	--fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
	/* Escuro clássico: gabinete de rádio de madeira, botões de latão. */
	--bg: #17100B;
	--surface: #20160F;
	--surface-2: #2A1D14;
	--surface-3: #3A291D;
	--line: #3B2A1E;
	--text: #F2E6CF;
	--muted: #BDA685;
	--accent: #D6A04A;
	--on-accent: #1E1206;
	--accent-text: #E4B867;
	--glass: rgba(23, 16, 11, 0.88);
	--sombra: 0 10px 30px rgba(0, 0, 0, 0.5);
	--scrim: rgba(10, 6, 3, 0.65);
	--papel-tinta: 0.06;
}
:root[data-estilo="classico"][data-tema="claro"] {
	/* Claro clássico: papel de jornal antigo e tinta sépia. */
	--bg: #F2E8D5;
	--surface: #FBF5E8;
	--surface-2: #EADCC2;
	--surface-3: #DCC9A6;
	--line: #D4C09C;
	--text: #2A1C11;
	--muted: #6A5540;
	--accent: #A9501C;
	--on-accent: #FFF6E8;
	--accent-text: #8A3E12;
	--glass: rgba(242, 232, 213, 0.9);
	--sombra: 0 10px 30px rgba(60, 38, 16, 0.16);
	--scrim: rgba(42, 28, 17, 0.4);
	--papel-tinta: 0.09;
}

/* Textura de papel/madeira bem sutil (ruído em SVG, sem arquivo extra). */
:root[data-estilo="classico"] body {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-blend-mode: multiply;
	background-size: 240px;
}
:root[data-estilo="classico"] body::before {
	/* Vinheta leve nas bordas, como foto antiga. */
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(60, 35, 12, var(--papel-tinta)) 100%);
}

/* Manchetes em Playfair; tracking de volta ao normal (o do Inter é apertado). */
:root[data-estilo="classico"] :is(h1, h2, h3, .secao__titulo, .destaque__titulo, .card-artigo__titulo, .card-audio__titulo, .partilha__titulo, .sintonia__titulo, .arte__titulo, .emissora__marca, .emissora__numero, .capa__numero, .calendario__dia, .decada-selo, .convite__titulo, .cabeca-lista__titulo, .cabeca-audio__titulo, .cabeca-leitura__titulo, .amigo__nome, .tela__titulo) {
	font-family: var(--fonte-titulo);
	letter-spacing: -0.005em;
}
:root[data-estilo="classico"] :is(.cabeca-lista__titulo, .cabeca-audio__titulo, .cabeca-leitura__titulo) { font-weight: 800; line-height: 1.06; }
:root[data-estilo="classico"] .capa__numero { font-weight: 700; }
:root[data-estilo="classico"] .texto { font-size: 18px; line-height: 1.75; }
/* Chapéus em versalete, como nas páginas de jornal. */
:root[data-estilo="classico"] :is(.sobretitulo, .secao__apoio, .lateral__titulo, .capa__rotulo, .parceiros__rotulo, .publicidade__rotulo) {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.1em;
	font-size: 13px;
}
/* Fio duplo sobre cada seção, como a divisão de colunas de um jornal. */
:root[data-estilo="classico"] .secao > .secao__cabeca { padding-top: 14px; border-top: 3px double color-mix(in oklab, var(--muted) 55%, transparent); }

/* Fotos e capas com tom de época (só material editorial; banners comerciais ficam como são). */
:root[data-estilo="classico"] :is(.capa, .emissora__arte, .avatar, .card-artigo__midia img, .card-foto img, .texto img, .mini-capa) {
	filter: sepia(0.32) saturate(0.82) contrast(1.03);
}

/* Player de baquelite: barra em madeira e o play como um botão de rádio de latão. */
:root[data-estilo="classico"] .player { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
:root[data-estilo="classico"] :is(.player__tocar, .botao-tocar) {
	box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Botão do modo clássico aceso. */
.botao-classico[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* "Sintonizando": meio segundo de chiado visual ao trocar de modo. */
@keyframes sdr-sintonizar {
	0% { filter: none; }
	30% { filter: blur(1.5px) sepia(0.6) contrast(1.2); }
	60% { filter: blur(0.5px) sepia(0.3); }
	100% { filter: none; }
}
html.is-sintonizando body { animation: sdr-sintonizar 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
	html.is-sintonizando body { animation: none; }
}

@media print {
	.lateral, .topo, .player, .abas, .barra-leitura, .gaveta, .modal-busca, .aviso, .publicidade, .leitura__semelhantes { display: none !important; }
	body { background: #FFFFFF; color: #000000; }
	.conteudo { padding: 0; }
}

/* Playlists do acervo (mesma linguagem das capas de emissora). */
.emissora__arte--playlist .emissora__numero { opacity: 0.16; }
.emissora__selo {
	position: absolute;
	left: 10px; top: 10px;
	z-index: 1;
	display: inline-flex;
	padding: 5px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	color: #FFFFFF;
}
.cabeca-lista--playlist { align-items: flex-end; }
.cabeca-lista--playlist .cabeca-lista__arte { width: 280px; flex: none; box-shadow: var(--sombra); }
.cabeca-lista--playlist .emissora__marca { font-size: clamp(20px, 11cqw, 44px); }
.cabeca-audio__playlists span { display: inline; }
@media (max-width: 900px) {
	.cabeca-lista--playlist { align-items: flex-start; }
	.cabeca-lista--playlist .cabeca-lista__arte { width: min(100%, 320px); }
}