/* ===========================================================================
   /downloads/ -- pagina exclusiva do download.
   Segue a regra da casa: todo seletor sob .c-downloads, tokens do base.css.
   =========================================================================== */

.c-downloads {
	/* --gutter nas laterais: sem ele o texto e os cartoes encostavam na borda
	   da tela do celular (visto no ar em 2026-09-17, h1 em x=0 a 375px). */
	padding: calc(var(--altura-header) + var(--e-4)) var(--gutter) var(--e-6);
}

.c-downloads__envelope {
	max-width: 820px;   /* pagina de leitura: mais estreita que o envelope padrao */
}

/* ------------------------------------------------------------------ topo ---- */

.c-downloads__topo { margin-bottom: var(--e-4); }

.c-downloads__olho {
	margin-bottom: var(--e-1);
	color: var(--ouro);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.c-downloads__titulo { font-size: clamp(1.8rem, 5vw, 2.6rem); }

.c-downloads__sub {
	margin-top: var(--e-2);
	max-width: 56ch;
	color: var(--ink-2);
}

/* ------------------------------------------------------- bloco de baixar ---- */

.c-downloads__baixar {
	padding: var(--e-3);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-downloads__selo {
	display: inline-block;
	margin-bottom: var(--e-2);
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--ouro-escuro);
	border-radius: 999px;
	color: var(--ouro);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.c-downloads__aviso {
	margin-bottom: var(--e-2);
	color: var(--brasa);
	font-size: 0.9rem;
}

.c-downloads__botao {
	font-size: 1.05rem;
	padding: 0.9rem 2.2rem;
}

.c-downloads__peso {
	margin-top: var(--e-2);
	color: var(--ink-3);
	font-size: 0.875rem;
}

.c-downloads__quando { margin-bottom: var(--e-2); }
.c-downloads__quando strong { display: block; font-size: 1.4rem; }
.c-downloads__quando span { color: var(--ink-2); }

/* ---------------------------------------------------------------- secoes ---- */

.c-downloads__secao {
	margin-top: var(--e-5);
	color: var(--ink-2);
}

.c-downloads__secaoTitulo {
	margin-bottom: var(--e-3);
	color: var(--ink);
	font-size: 1.35rem;
}

/* ----------------------------------------------------------------- passos ---- */

.c-downloads__passos {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: passo;
	display: grid;
	gap: var(--e-3);
}

.c-downloads__passo {
	position: relative;
	padding-left: 3.25rem;
	counter-increment: passo;
}

.c-downloads__passo::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--ouro-escuro);
	border-radius: 50%;
	color: var(--ouro);
	font-weight: 600;
}

.c-downloads__passoTitulo {
	margin-bottom: 0.35rem;
	color: var(--ink);
	font-size: 1.05rem;
}

.c-downloads__passoTexto { max-width: 62ch; }

/* ------------------------------------------------------------------ hash ---- */

.c-downloads__cmd,
.c-downloads__hash {
	display: block;
	margin-top: var(--e-2);
	padding: 0.7rem 1rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-sm);
	background: var(--bg-alt);
	color: var(--ink);
	font-family: var(--fonte-mono);
	font-size: 0.85rem;
	overflow-x: auto;        /* o hash de 64 hex nao pode estourar a pagina */
	white-space: nowrap;
}

.c-downloads__hashRotulo {
	margin-top: var(--e-2);
	color: var(--ink-3);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.c-downloads__hashNota {
	margin-top: var(--e-2);
	color: var(--ink-3);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------- requisitos ---- */

/* A tabela rola DENTRO deste envelope em tela estreita; a pagina nunca ganha
   scroll horizontal. */
.c-downloads__tabelaRolagem { overflow-x: auto; }

.c-downloads__tabela {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.925rem;
}

.c-downloads__tabela th,
.c-downloads__tabela td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--linha);
	text-align: left;
	vertical-align: top;
}

.c-downloads__tabela thead th {
	color: var(--ink-3);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.c-downloads__tabela tbody th {
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}

/* --------------------------------------------------------------- directx ---- */

.c-downloads__dx,
.c-downloads__ajuda {
	margin-top: var(--e-3);
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-downloads__dxTitulo {
	margin-bottom: var(--e-1);
	color: var(--ink);
	font-size: 1.05rem;
}

.c-downloads__dx p,
.c-downloads__ajuda p { margin-bottom: var(--e-2); max-width: 62ch; }

.c-downloads__ajudaBotoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ------------------------------------------------------------- problemas ---- */

.c-downloads__problema {
	border-bottom: 1px solid var(--linha);
}

.c-downloads__problema summary {
	padding: 0.9rem 0;
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
	list-style-position: inside;
}

.c-downloads__problema summary:hover { color: var(--ouro); }

.c-downloads__problema p {
	padding: 0 0 var(--e-2) 1.4rem;
	max-width: 62ch;
}

/* ============================================= plataformas (2026-09-17) ====
   Cartoes Windows/Android, aviso de iOS, QR, SHA copiavel e o bloco Android.
   Destaque por data-plataforma no <main> (servidor pelo UA, refinado no
   js/c-downloads.js). A ORDEM dos cartoes vem do DOM, nao de `order`. */

.c-downloads__plataformas { display: grid; gap: var(--e-3); }

.c-downloads__plataformas--duas {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.c-downloads__cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding: var(--e-3);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface);
	color: var(--ink-2);
	scroll-margin-top: calc(var(--altura-header) + var(--e-2));
}

.c-downloads__cartaoTopo {
	display: flex;
	align-items: flex-start;
	gap: var(--e-2);
}

.c-downloads__cartaoIcone {
	flex: none;
	width: 36px;
	height: 36px;
	color: var(--ouro);
}

.c-downloads__cartaoNome {
	color: var(--ink);
	font-size: 1.35rem;
}

.c-downloads__cartaoResumo {
	margin-top: 0.3rem;
	font-size: 0.925rem;
}

.c-downloads__cartao .c-downloads__botao {
	width: 100%;
	margin-top: var(--e-1);
	min-height: var(--tap);
}

/* O cartao indicado ganha borda dourada e o selo; o outro rebaixa o botao para
   contorno. Sem a ficha do Android nada disto se aplica. */
/* O selo pousa sobre a borda de cima, fora do fluxo: os dois cartoes ficam
   com o conteudo alinhado, com ou sem selo. */
.c-downloads__indicado {
	display: none;
	position: absolute;
	top: 0;
	left: var(--e-3);
	transform: translateY(-50%);
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--ouro-escuro);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ouro);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.c-downloads[data-plataforma="android"] [data-indicado-para="android"],
.c-downloads[data-plataforma="desktop"] [data-indicado-para="desktop"] { display: inline-block; }

.c-downloads[data-tem-android][data-plataforma="android"] .c-downloads__cartao--android,
.c-downloads[data-tem-android][data-plataforma="desktop"] .c-downloads__cartao--windows {
	border-color: var(--ouro-escuro);
	box-shadow: 0 0 0 1px rgba(217, 180, 90, 0.18), 0 18px 40px -24px rgba(217, 180, 90, 0.35);
}

.c-downloads[data-tem-android][data-plataforma="android"] .c-downloads__cartao--windows .c-downloads__botao,
.c-downloads[data-tem-android]:not([data-plataforma="android"]) .c-downloads__cartao--android .c-downloads__botao {
	border-color: var(--linha-forte);
	background: transparent;
	color: var(--ink);
}

.c-downloads[data-tem-android][data-plataforma="android"] .c-downloads__cartao--windows .c-downloads__botao:hover,
.c-downloads[data-tem-android]:not([data-plataforma="android"]) .c-downloads__cartao--android .c-downloads__botao:hover {
	border-color: var(--ouro);
	background: rgba(217, 180, 90, 0.08);
}

/* ficha: versao / tamanho / data / requisito */
.c-downloads__ficha {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.875rem;
}

.c-downloads__ficha div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--e-1);
}

.c-downloads__ficha dt { color: var(--ink-3); }
.c-downloads__ficha dd { margin: 0; color: var(--ink); }

/* SHA-256 com botao de copiar */
.c-downloads__sha { margin-top: 0.25rem; }

.c-downloads__shaTopo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-1);
}

.c-downloads__shaTopo .c-downloads__hashRotulo {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-downloads__copiar {
	flex: none;
	min-height: 32px;
	padding: 0.25rem 0.8rem;
	border: 1px solid var(--linha-forte);
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--transicao), color var(--transicao);
}

.c-downloads__copiar:hover { border-color: var(--ouro); color: var(--ouro); }
.c-downloads__copiar[data-estado="ok"] { border-color: var(--ouro-escuro); color: var(--ouro); }

.c-downloads__hash--quebra {
	margin-top: var(--e-1);
	font-size: 0.78rem;
	line-height: 1.5;
	white-space: normal;
	word-break: break-all;
	overflow: visible;
}

.c-downloads__detalhes {
	margin-top: auto;
	padding-top: var(--e-1);
	color: var(--ouro);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.c-downloads__detalhes:hover { text-decoration: underline; }

/* So para uma plataforma: escondido ate o data-plataforma do <main> casar. */
.c-downloads [data-so-plataforma] { display: none; }

.c-downloads[data-plataforma="desktop"] .c-downloads__qr[data-so-plataforma="desktop"] { display: flex; }
.c-downloads[data-plataforma="ios"] .c-downloads__ios[data-so-plataforma="ios"] { display: flex; }

/* QR: fundo branco de proposito -- camera nao le QR claro-sobre-escuro com
   confianca. */
.c-downloads__qr {
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2);
	border: 1px dashed var(--linha-forte);
	border-radius: var(--raio-sm);
	background: var(--bg-alt);
}

.c-downloads__qrImg {
	flex: none;
	width: 112px;
	height: 112px;
	border-radius: 6px;
	background: #fff;
}

.c-downloads__qrTitulo { color: var(--ink); font-weight: 600; }
.c-downloads__qrTexto { margin-top: 0.2rem; font-size: 0.85rem; }

/* iOS: aviso honesto acima dos cartoes */
.c-downloads__ios {
	align-items: flex-start;
	gap: var(--e-2);
	margin-bottom: var(--e-3);
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--linha-forte);
	border-left: 3px solid var(--ouro);
	border-radius: var(--raio-sm);
	background: var(--surface);
	color: var(--ink-2);
}

.c-downloads__iosIcone { flex: none; margin-top: 0.15rem; color: var(--ouro); }
.c-downloads__iosTitulo { color: var(--ink); font-weight: 600; }

/* grupos de detalhe por plataforma */
.c-downloads__grupo { scroll-margin-top: calc(var(--altura-header) + var(--e-2)); }

.c-downloads__grupoOlho {
	margin-top: var(--e-5);
	padding-bottom: var(--e-1);
	border-bottom: 1px solid var(--linha);
	color: var(--ouro);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.c-downloads__grupoOlho + .c-downloads__secao { margin-top: var(--e-3); }

/* passos do Android, com o desenho do celular ao lado */
.c-downloads__passos--ilustrados {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-2);
}

.c-downloads__passos--ilustrados .c-downloads__passo {
	display: flex;
	align-items: flex-start;
	gap: var(--e-2);
	padding: var(--e-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-downloads__passos--ilustrados .c-downloads__passo::before {
	left: auto;
	right: var(--e-2);
	top: var(--e-2);
	width: 1.75rem;
	height: 1.75rem;
	font-size: 0.85rem;
}

.c-downloads__passos--ilustrados .c-downloads__passoTitulo { padding-right: 2.25rem; }

.c-downloads__il { flex: none; width: 72px; height: auto; }
.c-downloads__il .il-corpo   { fill: var(--surface-2); stroke: var(--linha-forte); stroke-width: 2; }
.c-downloads__il .il-tela    { fill: var(--bg-alt); }
.c-downloads__il .il-cartao  { fill: var(--surface-2); stroke: var(--linha-forte); }
.c-downloads__il .il-linha   { fill: var(--ink-3); }
.c-downloads__il .il-fraco   { fill: var(--linha-forte); }
.c-downloads__il .il-arquivo { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.c-downloads__il .il-ouro    { fill: var(--ouro); }
.c-downloads__il .il-bola    { fill: #14110a; }
.c-downloads__il .il-traco   { fill: none; stroke: var(--ouro); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.c-downloads__il .il-escuro  { stroke: #14110a; stroke-width: 4; }

/* seguranca */
.c-downloads__seguranca .c-downloads__secaoTitulo {
	display: flex;
	align-items: center;
	gap: var(--e-1);
}

.c-downloads__escudo { flex: none; color: var(--ouro); }

.c-downloads__lista { display: grid; gap: 0.6rem; }

.c-downloads__lista li {
	position: relative;
	padding-left: 1.4rem;
	max-width: 62ch;
}

.c-downloads__lista li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.62em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--ouro);
}

.c-downloads__segurancaHash { margin-top: var(--e-3); }

.c-downloads__envelope > .c-downloads__ajuda { margin-top: var(--e-5); }

/* so para leitor de tela */
.c-downloads__vivo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =================================================== Mac (2026-10-07) ====
   Terceiro cartao. Tudo aqui so vale com data-tem-mac no <main> (ficha
   data/macos.json publicada) ou com data-plataforma="mac"/"ios": sem isso,
   nenhuma regra abaixo casa e a pagina e a de antes. */

/* Tres cartoes: a secao sai um pouco do envelope de leitura (820px) para as
   tres colunas nao espremerem a ficha. Abaixo de 1100px nao ha largura para
   isso: duas colunas, e o ultimo cartao ocupa a linha de baixo inteira. */
.c-downloads__plataformas--tres {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.c-downloads__plataformas--tres > .c-downloads__cartao:last-child { grid-column: 1 / -1; }

@media (min-width: 1100px) {
	.c-downloads__plataformas--tres {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-inline: -120px;
	}

	.c-downloads__plataformas--tres > .c-downloads__cartao:last-child { grid-column: auto; }
}

/* Selo e destaque do cartao do Mac, para quem chega de um Mac. */
.c-downloads[data-plataforma="mac"] [data-indicado-para="mac"] { display: inline-block; }

.c-downloads[data-tem-mac][data-plataforma="mac"] .c-downloads__cartao--mac,
.c-downloads[data-tem-mac][data-plataforma="desktop"] .c-downloads__cartao--windows {
	border-color: var(--ouro-escuro);
	box-shadow: 0 0 0 1px rgba(217, 180, 90, 0.18), 0 18px 40px -24px rgba(217, 180, 90, 0.35);
}

/* Fora do Mac o botao do Mac vira contorno; no Mac, o do Windows (o do
   Android ja rebaixa em tudo que nao e Android, regra de cima). */
.c-downloads[data-tem-mac]:not([data-plataforma="mac"]) .c-downloads__cartao--mac .c-downloads__botao,
.c-downloads[data-tem-mac][data-plataforma="mac"] .c-downloads__cartao--windows .c-downloads__botao {
	border-color: var(--linha-forte);
	background: transparent;
	color: var(--ink);
}

.c-downloads[data-tem-mac]:not([data-plataforma="mac"]) .c-downloads__cartao--mac .c-downloads__botao:hover,
.c-downloads[data-tem-mac][data-plataforma="mac"] .c-downloads__cartao--windows .c-downloads__botao:hover {
	border-color: var(--ouro);
	background: rgba(217, 180, 90, 0.08);
}

/* O Mac e computador: o QR do Android aparece la tambem. */
.c-downloads[data-plataforma="mac"] .c-downloads__qr[data-so-plataforma="desktop"] { display: flex; }

/* "Em breve", so para quem chega de um Mac antes de o arquivo estar no ar. */
.c-downloads[data-plataforma="mac"] .c-downloads__ios[data-so-plataforma="mac"] { display: flex; }

/* iPhone e iPad nao recebem o botao do Mac: o arquivo nao abre la. */
.c-downloads[data-plataforma="ios"] .c-downloads__cartao--mac .c-downloads__botao { display: none; }
.c-downloads[data-plataforma="ios"] .c-downloads__macIos[data-so-plataforma="ios"] { display: block; }

.c-downloads__macIos,
.c-downloads__macPrimeira { font-size: 0.875rem; }

.c-downloads__macPrimeira a { color: var(--ouro); font-weight: 600; }

/* ------------------------------------------------------------ responsivo ---- */

@media (max-width: 768px) {
	.c-downloads__plataformas--duas,
	.c-downloads__plataformas--tres,
	.c-downloads__passos--ilustrados { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.c-downloads__baixar,
	.c-downloads__cartao { padding: var(--e-2); }
	.c-downloads__ficha div { grid-template-columns: 6.5rem 1fr; }
	.c-downloads__qr { flex-direction: column; text-align: center; }
	.c-downloads__botao { width: 100%; text-align: center; }
	.c-downloads__passo { padding-left: 2.75rem; }
}