/* ============================================================================
   Elysium — site oficial
   A MESMA paleta do sistema (esquema ElysiumEscuro). O site e escuro por
   decisao, como a distro: nao ha tema claro, e cada cor esta pintada
   explicitamente para nao herdar nada do navegador.

     #0b0f14  campos e fundo        #22303d  botoes e linhas
     #141b23  superficies           #3FA9F5  destaque (celeste da marca)
     #1f2b38  alternado             #f2f6f9  texto
   ============================================================================ */

/* ---- Fontes do sistema, servidas DAQUI (nada vem de fora) ---------------- */
@font-face {
	font-family: "Inter";
	src: url("../fontes/InterVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fontes/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fontes/JetBrainsMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fontes/JetBrainsMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--fundo:      #0b0f14;
	--superficie: #141b23;
	--alternado:  #1f2b38;
	--botao:      #22303d;
	--linha:      #22303d;
	--linha-suave:#182029;
	--texto:      #f2f6f9;
	--apagado:    #8ea4b5;
	--destaque:   #3fa9f5;
	--destaque-escuro: #1d6fa8;

	--mono:  "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	--corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--t-menor: clamp(.78rem, .76rem + .12vw, .84rem);
	--t-base:  clamp(1rem, .97rem + .16vw, 1.06rem);
	--t-medio: clamp(1.15rem, 1.1rem + .3vw, 1.35rem);
	--t-grande:clamp(1.5rem, 1.35rem + .8vw, 2.1rem);
	--t-heroi: clamp(2.2rem, 1.6rem + 3.2vw, 4.2rem);

	--raio: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--corpo);
	font-size: var(--t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--destaque); }
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--destaque);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================================
   A BARRA: uma pilula flutuante e centralizada — o mesmo desenho do painel
   do sistema. Quem ja viu a area de trabalho reconhece o site na hora.
   ============================================================================ */
nav.painel {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .45rem .6rem .45rem .8rem;
	background: rgba(20, 27, 35, .82);          /* superficie translucida */
	border: 1px solid var(--linha);
	border-radius: 14px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
	white-space: nowrap;
	max-width: calc(100vw - 24px);
}
nav.painel .marca {
	display: flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: var(--texto);
	font-family: var(--mono);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .02em;
}
nav.painel .links { display: flex; gap: .2rem; }
nav.painel .links a {
	color: var(--apagado);
	text-decoration: none;
	font-size: .92rem;
	font-weight: 500;
	padding: .35rem .8rem;
	border-radius: 9px;
	transition: color .15s, background .15s;
}
nav.painel .links a:hover { color: var(--texto); background: var(--alternado); }
nav.painel .links a.ativo { color: #fff; background: var(--destaque-escuro); }

/* ============================================================================
   HEROI — o fundo e o proprio papel de parede do sistema (o mesmo arquivo
   SVG que vai na ISO), com um degrade por cima para o texto respirar.
   ============================================================================ */
.heroi {
	position: relative;
	padding: clamp(7rem, 14vh, 10rem) 1.25rem 0;
	background-image:
		linear-gradient(180deg, rgba(11,15,20,.55) 0%, rgba(11,15,20,.15) 45%, var(--fundo) 96%),
		url("../imagens/fundo.svg");
	background-size: auto, cover;
	background-position: center, center 70%;
	text-align: center;
}
.heroi .selo {
	display: inline-block;
	font-family: var(--mono);
	font-size: var(--t-menor);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--destaque);
	background: rgba(11, 15, 20, .55);
	border: 1px solid rgba(63, 169, 245, .35);
	border-radius: 999px;
	padding: .3rem .9rem;
	margin-bottom: 1.4rem;
}
.heroi h1 {
	margin: 0 auto;
	max-width: 17ch;
	font-size: var(--t-heroi);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.heroi h1 em {
	font-style: normal;
	color: var(--destaque);
}
.heroi .fala {
	margin: 1.2rem auto 0;
	max-width: 44ch;
	color: #c9d6e2;
	font-size: var(--t-medio);
	line-height: 1.55;
	text-wrap: balance;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}
.heroi .acoes {
	display: flex;
	gap: .8rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}
.heroi .dados {
	margin-top: 1.1rem;
	font-family: var(--mono);
	font-size: var(--t-menor);
	color: var(--apagado);
}
.heroi .dados b { color: var(--texto); font-weight: 500; }

/* Botoes com o desenho dos widgets do sistema (Kvantum Elysium):
   fundo #22303d, foco celeste, cantos suaves. */
.botao {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .78rem 1.5rem;
	border-radius: var(--raio);
	border: 1px solid var(--linha);
	background: var(--botao);
	color: var(--texto);
	font-family: var(--corpo);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .1s;
}
.botao:hover { background: #2a3a4a; border-color: #33465a; }
.botao:active { transform: translateY(1px); }
.botao.principal {
	background: var(--destaque);
	border-color: var(--destaque);
	color: #06121d;
}
.botao.principal:hover { background: #5cb8f7; border-color: #5cb8f7; }
.botao svg { flex-shrink: 0; }

/* A tela do sistema, numa moldura de janela igual a da distro */
.janela {
	max-width: 62rem;
	margin: 3.5rem auto -1px;
	border: 1px solid var(--linha);
	border-bottom: none;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	background: var(--superficie);
	box-shadow: 0 -20px 80px rgba(63, 169, 245, .07), 0 8px 60px rgba(0, 0, 0, .5);
}
.janela .titulo {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .9rem;
	background: var(--superficie);
	border-bottom: 1px solid var(--linha-suave);
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--apagado);
}
.janela .titulo i {
	width: .68rem; height: .68rem;
	border-radius: 50%;
	background: var(--alternado);
	border: 1px solid var(--linha);
}
.janela .titulo i:first-child { background: var(--destaque); border-color: var(--destaque); }
.janela .titulo span { margin-left: .4rem; }
.janela img { width: 100%; }

/* ============================================================================
   SECOES
   ============================================================================ */
main { display: block; }
section.faixa {
	padding: clamp(3.5rem, 8vw, 6rem) 1.25rem;
}
section.faixa.escura { background: var(--superficie); border-top: 1px solid var(--linha-suave); border-bottom: 1px solid var(--linha-suave); }
.miolo { max-width: 62rem; margin: 0 auto; }
.miolo-estreito { max-width: 46rem; margin: 0 auto; }

.rotulo {
	font-family: var(--mono);
	font-size: var(--t-menor);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--destaque);
	margin: 0 0 .6rem;
}
h2 {
	margin: 0 0 .5rem;
	font-size: var(--t-grande);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
}
.sub {
	margin: 0 0 2.2rem;
	color: var(--apagado);
	max-width: 52ch;
}

/* Cartoes de vantagens */
.cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
}
.cartao {
	background: var(--superficie);
	border: 1px solid var(--linha-suave);
	border-radius: var(--raio);
	padding: 1.4rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	transition: border-color .15s, transform .15s;
}
.cartao:hover { border-color: #2c3d4e; transform: translateY(-2px); }
section.faixa.escura .cartao { background: var(--fundo); }
.cartao .chip {
	align-self: flex-start;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--destaque);
	background: rgba(63, 169, 245, .09);
	border: 1px solid rgba(63, 169, 245, .25);
	border-radius: 5px;
	padding: .18rem .55rem;
	margin-bottom: .35rem;
}
.cartao h3 { margin: 0; font-size: var(--t-medio); font-weight: 650; letter-spacing: -.01em; }
.cartao p { margin: 0; color: var(--apagado); font-size: .95rem; }
.cartao p b, .cartao p strong { color: var(--texto); font-weight: 600; }

/* ---- Temas: um sistema com tres caras ------------------------------------ */
.temas-abas {
	display: flex;
	gap: .4rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}
.temas-abas button {
	font-family: var(--corpo);
	font-size: .95rem;
	font-weight: 600;
	color: var(--apagado);
	background: var(--botao);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	padding: .55rem 1.2rem;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.temas-abas button:hover { color: var(--texto); background: #2a3a4a; }
.temas-abas button[aria-selected="true"] {
	color: #fff;
	background: var(--destaque-escuro);
	border-color: var(--destaque-escuro);
}
.temas-tela { position: relative; }
.temas-tela figure { margin: 0; display: none; }
.temas-tela figure.visivel { display: block; }
.temas-tela .janela { margin: 0 auto; border-bottom: 1px solid var(--linha); border-radius: 12px; }
.temas-tela figcaption {
	text-align: center;
	color: var(--apagado);
	font-size: .92rem;
	padding-top: .9rem;
	max-width: 60ch;
	margin: 0 auto;
}

/* ---- Lista do que vem dentro ---------------------------------------------- */
.programas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1px;
	background: var(--linha-suave);
	border: 1px solid var(--linha-suave);
	border-radius: var(--raio);
	overflow: hidden;
}
.programa {
	background: var(--fundo);
	padding: 1rem 1.2rem;
}
section.faixa.escura .programa { background: var(--superficie); }
.programa b {
	display: block;
	font-weight: 650;
	font-size: .98rem;
}
.programa span { color: var(--apagado); font-size: .88rem; }

/* ---- Chamada final --------------------------------------------------------- */
.chamada {
	text-align: center;
	padding: clamp(4rem, 9vw, 7rem) 1.25rem;
	background-image:
		linear-gradient(180deg, var(--fundo) 0%, rgba(11,15,20,.35) 55%, var(--fundo) 100%),
		url("../imagens/fundo.svg");
	background-size: auto, cover;
	background-position: center, center 30%;
}
.chamada h2 { max-width: 22ch; margin: 0 auto .6rem; }
.chamada p { color: var(--apagado); margin: 0 auto 1.8rem; max-width: 46ch; }

/* ============================================================================
   PAGINAS INTERNAS (Downloads e Dicas)
   ============================================================================ */
.pagina-topo {
	padding: clamp(7.5rem, 14vh, 10rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
	background-image:
		linear-gradient(180deg, rgba(11,15,20,.6) 0%, var(--fundo) 92%),
		url("../imagens/fundo.svg");
	background-size: auto, cover;
	background-position: center, center 75%;
}
.pagina-topo h1 {
	margin: 0 0 .5rem;
	font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
	font-weight: 750;
	letter-spacing: -.025em;
	line-height: 1.1;
}
.pagina-topo p { margin: 0; color: var(--apagado); max-width: 52ch; }

/* Cartao principal de download */
.download-principal {
	background: var(--superficie);
	border: 1px solid var(--linha);
	border-radius: 14px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.download-principal .cabeca {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.download-principal .cabeca img { width: 52px; height: 52px; }
.download-principal .cabeca h2 { margin: 0; }
.download-principal .cabeca .versao-data {
	font-family: var(--mono);
	font-size: var(--t-menor);
	color: var(--apagado);
}
.ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1px;
	background: var(--linha-suave);
	border: 1px solid var(--linha-suave);
	border-radius: var(--raio);
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}
.ficha div { background: var(--fundo); padding: .8rem 1rem; }
.ficha dt {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--apagado);
	margin: 0 0 .15rem;
}
.ficha dd { margin: 0; font-weight: 600; font-size: .95rem; }

.aviso-breve {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	background: rgba(63, 169, 245, .07);
	border: 1px solid rgba(63, 169, 245, .3);
	border-radius: var(--raio);
	padding: .9rem 1.1rem;
	color: #c9d6e2;
	font-size: .95rem;
}

pre.codigo {
	margin: .6rem 0 0;
	padding: .9rem 1.1rem;
	background: var(--fundo);
	border: 1px solid var(--linha-suave);
	border-radius: var(--raio);
	overflow-x: auto;
	font-family: var(--mono);
	font-size: .82rem;
	line-height: 1.6;
	color: var(--texto);
}
code {
	font-family: var(--mono);
	font-size: .88em;
	background: var(--alternado);
	border-radius: 4px;
	padding: .1em .4em;
}
pre.codigo code { background: none; padding: 0; }
.hash {
	word-break: break-all;
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--destaque);
}

/* Passos de gravacao — aqui a numeracao E informacao: e uma sequencia real */
.passos { counter-reset: passo; display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.passos li {
	counter-increment: passo;
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: 1rem;
	align-items: start;
	background: var(--superficie);
	border: 1px solid var(--linha-suave);
	border-radius: var(--raio);
	padding: 1.1rem 1.2rem;
}
.passos li::before {
	content: counter(passo);
	font-family: var(--mono);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--destaque);
	border: 1px solid rgba(63, 169, 245, .35);
	border-radius: 8px;
	width: 2.4rem; height: 2.4rem;
	display: flex; align-items: center; justify-content: center;
}
.passos b { font-weight: 650; }
.passos p { margin: .2rem 0 0; color: var(--apagado); font-size: .95rem; }

/* Dicas */
.dica {
	background: var(--superficie);
	border: 1px solid var(--linha-suave);
	border-radius: var(--raio);
	padding: 1.4rem 1.5rem;
	margin-bottom: 1rem;
}
.dica h3 { margin: 0 0 .4rem; font-size: var(--t-medio); font-weight: 650; letter-spacing: -.01em; }
.dica p { margin: 0 0 .4rem; color: var(--apagado); }
.dica p:last-child { margin-bottom: 0; }
.dica .caminho {
	font-family: var(--mono);
	font-size: .82rem;
	color: var(--texto);
	background: var(--alternado);
	border-radius: 5px;
	padding: .15em .5em;
	white-space: nowrap;
}

/* ============================================================================
   RODAPE
   ============================================================================ */
footer {
	border-top: 1px solid var(--linha-suave);
	background: var(--superficie);
	padding: 2.5rem 1.25rem 3rem;
	margin-top: 0;
}
.rodape-conteudo { max-width: 62rem; margin: 0 auto; color: var(--apagado); font-size: .92rem; }
.rodape-marca {
	display: flex; align-items: center; gap: .5rem;
	font-family: var(--mono); font-weight: 700; color: var(--texto);
	margin-bottom: .8rem;
}
.rodape-conteudo p { margin: 0 0 .6rem; }
.rodape-nota { font-size: .85rem; opacity: .8; }

/* ---- Telas pequenas -------------------------------------------------------- */
@media (max-width: 560px) {
	nav.painel { gap: .5rem; padding-left: .6rem; }
	nav.painel .marca span { display: none; }
	.heroi { padding-top: 6rem; }
	.passos li { grid-template-columns: 2rem 1fr; gap: .8rem; }
}