:root {
	color-scheme: dark;
	--fundo: #0c0a09;
	--texto: #fafaf9;
	--destaque: #ffffff;
	--cinza-100: #f3f4f6;
	--cinza-200: #e5e7eb;
	--cinza-300: #d1d5dc;
	--cinza-400: #99a1af;
	--verde-400: #05df72;
	--erro: #f28b82;
	--borda: rgba(255, 255, 255, 0.1);
	--cartao: #0e0e0f;
	--terminal: #000000;
	--topo-rolado: rgba(0, 0, 0, 0.7);
	--etiqueta-fundo: #18181b;
	--etiqueta-borda: #424242;
	--botao-fundo: #ffffff;
	--botao-texto: #000000;
	--botao-hover: #e5e7eb;
	--filtro-icone: none;
	--filtro-marca: none;
	/* Gráfico de contribuições (do vazio ao mais ativo) e barras de linguagens */
	--nivel-0: #18181b;
	--nivel-1: #3f3f46;
	--nivel-2: #71717a;
	--nivel-3: #a1a1aa;
	--nivel-4: #f4f4f5;
	--barra: #d4d4d8;
	--barra-outras: #52525b;
	--dica-sombra: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
	/* Luz dos cartões de nota e fundo atrás do leitor */
	--luz: rgba(255, 255, 255, 0.07);
	--fundo-leitor: rgba(0, 0, 0, 0.65);
	/* Brilho do ícone grande da vitrine dos projetos, ao passar o mouse */
	--brilho-icone: drop-shadow(0 0 1.25rem rgba(255, 255, 255, 0.35));
	/* Linhas do quadriculado de engenharia no fundo da página */
	--grade: rgba(255, 255, 255, 0.045);
	/* Aba Destaques: sombra da janela da capa e fundo atrás do visualizador de imagens */
	--sombra-janela: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.85);
	--fundo-galeria: rgba(0, 0, 0, 0.82);
	/* Ponto de "disponível" no topo da página */
	--disponivel: #05df72;
	--rolagem-trilho: #0c0a09;
	--rolagem-polegar: #3f3f46;
	--rolagem-polegar-hover: #71717a;
	--rolagem-polegar-ativo: #a1a1aa;
	--fonte: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--fonte-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Tema claro: ativado pelo botão no canto superior direito
   Papel de desenho técnico: folha com quadriculado de engenharia, texto em grafite
   e destaques no mesmo grafite, como nos diagramas dos PDFs.
   Paleta: Papel #E8ECEA · Folha #F6F8F7 · Linha #B9C4C2 · Ardósia #46535A · Grafite #20282D */
:root[data-tema="claro"] {
	color-scheme: light;
	--tinta: #20282d;
	--fundo: #e8ecea;
	--texto: #20282d;
	--destaque: #20282d;
	--cinza-100: #20282d;
	--cinza-200: #20282d;
	--cinza-300: #20282d;
	--cinza-400: #46535a;
	--verde-400: #20282d;
	--erro: #b42318;
	--borda: #b9c4c2;
	--cartao: #f6f8f7;
	--terminal: #e8ecea;
	--topo-rolado: rgba(232, 236, 234, 0.85);
	--etiqueta-fundo: #e8ecea;
	--etiqueta-borda: #b9c4c2;
	--botao-fundo: #20282d;
	--botao-texto: #f6f8f7;
	--botao-hover: #46535a;
	--filtro-icone: brightness(0.16);
	--filtro-marca: none;
	/* Escala do gráfico: do papel ao grafite, passando por Linha e Ardósia */
	--nivel-0: #dce3e1;
	--nivel-1: #b9c4c2;
	--nivel-2: #808c8e;
	--nivel-3: #46535a;
	--nivel-4: #20282d;
	--barra: #20282d;
	--barra-outras: #b9c4c2;
	--dica-sombra: 0 0.5rem 1.5rem rgba(32, 40, 45, 0.12);
	--luz: rgba(32, 40, 45, 0.06);
	--fundo-leitor: rgba(232, 236, 234, 0.75);
	--brilho-icone: drop-shadow(0 0 0 transparent);
	--grade: rgba(32, 40, 45, 0.07);
	--sombra-janela: 0 1.5rem 3rem -1.5rem rgba(32, 40, 45, 0.28);
	--fundo-galeria: rgba(232, 236, 234, 0.9);
	--disponivel: #1f7a4d;
	--rolagem-trilho: #e8ecea;
	--rolagem-polegar: #b9c4c2;
	--rolagem-polegar-hover: #808c8e;
	--rolagem-polegar-ativo: #46535a;
}

/* Quadriculado de engenharia no fundo, nos dois temas (cor em --grade); os cartões ficam por cima */
body {
	background-image:
		linear-gradient(var(--grade) 1px, transparent 1px),
		linear-gradient(90deg, var(--grade) 1px, transparent 1px);
	background-size: 1.5rem 1.5rem;
}

/* O grafite marca o que está ativo: aba aberta e cursor do título */
:root[data-tema="claro"] .aba::after,
:root[data-tema="claro"] .cursor {
	background: var(--tinta);
}

:root[data-tema="claro"] .doc-diagrama {
	opacity: 0.85;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid var(--borda);
}

html {
	scrollbar-gutter: stable;
	font-size: 80%;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

html::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

html::-webkit-scrollbar-track {
	background: var(--rolagem-trilho);
	border-left: 1px solid var(--borda);
}

html::-webkit-scrollbar-thumb {
	min-height: 40px;
	border: 3px solid transparent;
	border-radius: 624.938rem;
	background: var(--rolagem-polegar) padding-box;
}

html::-webkit-scrollbar-thumb:hover {
	border-width: 2px;
	background-color: var(--rolagem-polegar-hover);
}

html::-webkit-scrollbar-thumb:active {
	border-width: 2px;
	background-color: var(--rolagem-polegar-ativo);
}

html::-webkit-scrollbar-button {
	display: none;
}

html::-webkit-scrollbar-corner {
	background: var(--rolagem-trilho);
}

@supports not selector(::-webkit-scrollbar) {
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--rolagem-polegar) var(--rolagem-trilho);
	}
}

body {
	background-color: var(--fundo);
	color: var(--texto);
	font-family: var(--fonte);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2 {
	font-size: inherit;
	font-weight: inherit;
}

a {
	color: inherit;
	text-decoration: inherit;
}

svg {
	display: block;
	flex-shrink: 0;
}

.pagina {
	transition: opacity 0.4s ease;
}

.js .pagina:not(.visivel) {
	opacity: 0;
}

.container {
	width: 100%;
	max-width: 87.5rem;
	margin: auto;
}

.topo {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	padding: 0 1.25rem;
	background: transparent;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.topo.rolado {
	background: var(--topo-rolado);
	-webkit-backdrop-filter: blur(0.75rem);
	backdrop-filter: blur(0.75rem);
}

.topo-conteudo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
}

.botao-tema {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: var(--cartao);
	color: var(--cinza-300);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.botao-tema:hover,
.botao-tema:focus-visible {
	color: var(--destaque);
	border-color: var(--cinza-400);
	transform: scale(1.08);
}

.botao-tema:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.botao-tema:active {
	transform: scale(0.92);
}

.botao-tema svg {
	width: 1.25rem;
	height: 1.25rem;
}

.icone-lua {
	display: none;
}

:root[data-tema="claro"] .icone-sol {
	display: none;
}

:root[data-tema="claro"] .icone-lua {
	display: block;
}

.idioma {
	position: relative;
	display: none;
}

.js .idioma {
	display: block;
}

.botao-idioma {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.5rem;
	padding: 0 0.875rem 0 0.75rem;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: var(--cartao);
	color: var(--cinza-300);
	font-family: var(--fonte-mono);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.botao-idioma:hover,
.botao-idioma:focus-visible,
.botao-idioma[aria-expanded="true"] {
	color: var(--destaque);
	border-color: var(--cinza-400);
}

.botao-idioma:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.botao-idioma:active {
	transform: scale(0.95);
}

.botao-idioma-globo {
	width: 1.125rem;
	height: 1.125rem;
}

.idioma[aria-busy="true"] .botao-idioma-sigla {
	animation: piscar 1s ease-out infinite;
}

.idioma-erro .botao-idioma {
	border-color: var(--erro);
	color: var(--erro);
}

.menu-idioma {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 60;
	min-width: 14rem;
	padding: 0.375rem;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--cartao);
	box-shadow: var(--dica-sombra);
	list-style: none;
	transform-origin: top right;
	animation: menu-idioma-abrir 0.16s ease-out;
}

.menu-idioma[hidden] {
	display: none;
}

@keyframes menu-idioma-abrir {
	from {
		opacity: 0;
		transform: translateY(-0.25rem) scale(0.98);
	}
}

.menu-idioma-opcao {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0.625rem;
	border-radius: 0.3125rem;
	background: transparent;
	color: var(--cinza-300);
	font-family: var(--fonte);
	font-size: 1.0625rem;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.menu-idioma-opcao:hover,
.menu-idioma-opcao:focus-visible {
	background: var(--etiqueta-fundo);
	color: var(--destaque);
	outline: none;
}

.menu-idioma-opcao:focus-visible {
	box-shadow: inset 0 0 0 1px var(--cinza-400);
}

.menu-idioma-opcao[aria-checked="true"] {
	color: var(--destaque);
	font-weight: 600;
}

.menu-idioma-sigla {
	min-width: 1.75rem;
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.menu-idioma-nome {
	flex: 1;
	white-space: nowrap;
}

.menu-idioma-marca {
	width: 1rem;
	height: 1rem;
	visibility: hidden;
}

.menu-idioma-opcao[aria-checked="true"] .menu-idioma-marca {
	visibility: visible;
}

@media (max-width: 420px) {
	.botao-idioma {
		justify-content: center;
		width: 2.5rem;
		padding: 0;
	}

	.botao-idioma-globo {
		display: none;
	}
}

.marca {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.icone-marca {
	height: 1.75rem;
	width: auto;
	display: block;
	filter: var(--filtro-marca);
}

.marca-titulo {
	display: flex;
	align-items: center;
	font-family: var(--fonte-mono);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--cinza-100);
	min-height: 2rem;
}

.cursor {
	display: inline-block;
	width: 0.5rem;
	height: 1.25rem;
	margin-left: 0.1875rem;
	background: var(--destaque);
	animation: piscar 1.25s ease-out infinite;
}

@keyframes piscar {
	0%, 70%, 100% { opacity: 1; }
	20%, 50% { opacity: 0; }
}

.principal {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	padding: 1.25rem;
	margin-top: 1.25rem;
}

/* Link para pular direto ao conteúdo: aparece só ao navegar pelo teclado */
.pular {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 200;
	padding: 0.625rem 1rem;
	border-radius: 0.25rem;
	background: var(--botao-fundo);
	color: var(--botao-texto);
	font-weight: 600;
	translate: 0 -200%;
	transition: translate 0.2s ease;
}

.pular:focus-visible {
	translate: none;
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Atalhos do topo: GitHub, Contato e tema */
.topo-acoes {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.topo-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 624.938rem;
	color: var(--cinza-300);
	transition: color 0.15s, background-color 0.15s;
}

.topo-icone:hover {
	color: var(--destaque);
	background: var(--etiqueta-fundo);
}

.topo-icone svg {
	width: 1.25rem;
	height: 1.25rem;
}

.topo-contato {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 1.25rem;
	border-radius: 624.938rem;
	background: var(--botao-fundo);
	color: var(--botao-texto);
	font-size: 1.0625rem;
	font-weight: 600;
	transition: background-color 0.15s;
}

.topo-contato:hover {
	background: var(--botao-hover);
}

.topo-icone:focus-visible,
.topo-contato:focus-visible,
.marca:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.marca {
	border-radius: 0.25rem;
}

/* ---------- Apresentação ---------- */

.boas-vindas {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.apresentacao {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.disponivel {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.75rem;
	padding: 0.375rem 1rem 0.375rem 0.875rem;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: var(--cartao);
	color: var(--cinza-300);
	font-size: 1.0625rem;
	line-height: 1.5rem;
	font-weight: 500;
}

.disponivel-ponto {
	position: relative;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--disponivel);
}

/* Um único pulso na entrada da página, para chamar a atenção uma vez */
.disponivel-ponto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--disponivel);
	animation: pulso 1.6s ease-out 0.6s 3 both;
}

@keyframes pulso {
	from {
		opacity: 0.7;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(3);
	}
}

.saudacao {
	color: var(--destaque);
	font-size: 3.25rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.035em;
}

.resumo {
	margin-top: 1rem;
	color: var(--cinza-300);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: -0.01em;
}

.apresentacao-texto {
	max-width: 46rem;
	margin-top: 1.25rem;
	color: var(--cinza-400);
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.apresentacao-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: 2.25rem;
}

@media (min-width: 769px) {
	.saudacao {
		font-size: 4.5rem;
	}

	.resumo {
		font-size: 2rem;
		line-height: 2.5rem;
	}

	.apresentacao-texto {
		font-size: 1.3125rem;
		line-height: 2.125rem;
	}
}

/* Botões da apresentação: um principal e um contornado */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3.5rem;
	padding: 0 1.75rem;
	border-radius: 0.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.botao svg {
	width: 1.25rem;
	height: 1.25rem;
}

.botao-primario {
	background: var(--botao-fundo);
	color: var(--botao-texto);
}

.botao-primario:hover {
	background: var(--botao-hover);
}

.botao-secundario {
	color: var(--destaque);
	box-shadow: inset 0 0 0 1px var(--etiqueta-borda);
}

.botao-secundario:hover {
	background: var(--etiqueta-fundo);
	box-shadow: inset 0 0 0 1px var(--cinza-400);
}

.botao:focus-visible,
.botao-link:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.apresentacao-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	margin-top: 2rem;
	list-style: none;
}

.botao-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	background: none;
	color: var(--cinza-300);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 500;
	cursor: pointer;
	border-radius: 0.125rem;
	transition: color 0.15s;
}

.botao-link svg {
	width: 1.125rem;
	height: 1.125rem;
}

.botao-link:hover {
	color: var(--destaque);
}

/* Depois de copiar o e-mail, o ícone vira um "certo" por dois segundos */
.botao-link .icone-copiado,
.botao-link.copiado .icone-copiar {
	display: none;
}

.botao-link.copiado .icone-copiado {
	display: block;
}

.botao-link.copiado {
	color: var(--destaque);
}

.local {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--cinza-400);
	font-size: 1.0625rem;
	font-weight: 500;
}

.local-icone {
	width: 1rem;
	height: 1rem;
}

.terminal {
	width: 100%;
	background: var(--terminal);
	border: 1px solid var(--borda);
	border-radius: 0.375rem;
	overflow: hidden;
}

.terminal-barra {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.75rem;
	border-bottom: 1px solid var(--borda);
}

.terminal-pontos {
	position: absolute;
	display: flex;
	gap: 0.25rem;
}

.ponto {
	width: 0.8125rem;
	height: 0.8125rem;
	border-radius: 624.938rem;
	background: var(--cor);
	cursor: pointer;
	transition: background 0.05s, transform 0.15s;
}

.ponto:hover {
	background: var(--cor-hover);
}

.ponto:active {
	transform: scale(0.8);
}

.terminal-titulo {
	margin: auto;
	text-align: center;
	color: var(--cinza-300);
	font-family: "Roboto", var(--fonte);
	font-weight: 300;
}

.terminal-corpo {
	background: var(--cartao);
	padding: 1.25rem;
}

.linha {
	font-family: var(--fonte-mono);
	width: fit-content;
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.linha-comando {
	margin-top: 0.5rem;
}

.caminho {
	color: var(--verde-400);
	margin-right: 0.5rem;
}

.secao-titulo {
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.abas {
	position: sticky;
	/* Altura do topo: 1,25rem + botão de 2,5rem + 1,25rem */
	top: 5rem;
	z-index: 40;
	display: flex;
	margin: 0 -0.75rem;
	overflow-x: auto;
	scrollbar-width: none;
	/* Fio de baixo alinhado ao conteúdo (as abas avançam 0,75rem para os lados) */
	background-image: linear-gradient(var(--borda), var(--borda));
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: calc(100% - 1.5rem) 1px;
	transition: background-color 0.15s;
}

.abas::-webkit-scrollbar {
	display: none;
}

/* Presa no topo: ganha o mesmo fundo desfocado do topo */
.abas.presa {
	background-color: var(--topo-rolado);
	-webkit-backdrop-filter: blur(0.75rem);
	backdrop-filter: blur(0.75rem);
}

/* No celular, a borda some aos poucos do lado em que ainda há abas escondidas */
.abas.mais-direita {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

.abas.mais-esquerda {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}

.abas.mais-esquerda.mais-direita {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.aba {
	position: relative;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 1.125rem 0.75rem;
	background: none;
	color: var(--cinza-400);
	font-family: inherit;
	font-size: 1.375rem;
	line-height: 2rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s;
}

.aba::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0;
	height: 2px;
	background: var(--destaque);
	transform: scaleX(0);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aba:hover {
	color: var(--cinza-200);
}

.aba[aria-selected="true"] {
	color: var(--destaque);
}

.aba[aria-selected="true"]::after {
	transform: scaleX(1);
}

.aba:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: -4px;
	border-radius: 0.25rem;
}

.painel:not([hidden]) {
	animation: surgir 0.35s ease;
}

@keyframes surgir {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.secao-descricao {
	max-width: 64rem;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: var(--cinza-400);
	margin: 1.75rem 0 1.5rem;
}

.grade {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cartao {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--cartao);
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s, background-color 0.3s;
}

.cartao:hover {
	border-color: var(--cinza-400);
}

.cartao:active {
	border-color: var(--destaque);
}

.cartao-conteudo {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
}

.cartao-titulo {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
}

.cartao-icone {
	width: 0.8em;
	height: 0.8em;
	flex-shrink: 0;
	object-fit: contain;
	filter: var(--filtro-icone);
}

.cartao-descricao {
	font-weight: 500;
	color: var(--cinza-400);
	margin-bottom: 0.75rem;
}

.habilidades {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	width: 100%;
}

.habilidade {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--etiqueta-borda);
	border-radius: 0.125rem;
	background: var(--etiqueta-fundo);
	color: var(--cinza-200);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.grupo-rotulo {
	margin: 0.75rem 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--cinza-400);
}

.habilidades-grupo {
	margin-top: 0;
}

.cartao-botao {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
	padding: 0.5rem;
	border-radius: 0.125rem;
	background: var(--botao-fundo);
	color: var(--botao-texto);
	text-align: center;
	font-weight: 500;
	transition: background 0.15s;
}

.cartao-botao:hover {
	background: var(--botao-hover);
}

.cartao-botao svg {
	width: 1rem;
	height: 1rem;
}

/* ---------- Aba Projetos ---------- */

.cartao[hidden] {
	display: none;
}

/* Filtros por linguagem, acima da grade */
.filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.5rem;
}

.filtros-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.filtro {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: transparent;
	color: var(--cinza-400);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.25rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* O botão do filtro vindo da aba Habilidades só aparece quando está em uso */
.filtro[hidden] {
	display: none;
}

.filtro:hover {
	color: var(--destaque);
	border-color: var(--cinza-400);
}

.filtro:active {
	transform: scale(0.95);
}

.filtro[aria-pressed="true"] {
	background: var(--botao-fundo);
	border-color: var(--botao-fundo);
	color: var(--botao-texto);
}

.filtro:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.filtro-total {
	font-family: var(--fonte-mono);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

/* Filtro vindo da aba Habilidades (por exemplo, Redis), com o X para remover */
.filtro svg {
	width: 0.875rem;
	height: 0.875rem;
	margin-right: -0.25rem;
	opacity: 0.75;
}

.filtro-extra:hover svg {
	opacity: 1;
}

.filtros-resultado {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--cinza-400);
	font-variant-numeric: tabular-nums;
}

.cartao-projeto {
	position: relative;
	overflow: hidden;
}

/* Entrada: os cartões sobem e aparecem um a um (atraso vindo de js/main.js).
   Usa "translate" para não brigar com o "transform" do hover. */
.cartao.revelar {
	opacity: 0;
	translate: 0 1.5rem;
}

.cartao.revelar.visivel {
	opacity: 1;
	translate: none;
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		border-color 0.15s,
		background-color 0.3s,
		opacity 0.5s ease var(--atraso, 0ms),
		translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms);
}

/* Vitrine: repositório, linguagem principal e o ícone grande */
.projeto-vitrine {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-shrink: 0;
	height: 11rem;
	padding: 1.25rem 1.5rem 1.5rem;
	overflow: hidden;
	background: var(--terminal);
	border-bottom: 1px solid var(--borda);
	transition: background-color 0.3s;
}

/* Pontilhado de fundo: fraco o tempo todo e mais forte em volta do mouse */
.projeto-vitrine::before,
.projeto-vitrine::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, var(--cor-ponto) 1px, transparent 1.6px);
	background-size: 1.25rem 1.25rem;
	background-position: center;
	pointer-events: none;
}

.projeto-vitrine::before {
	--cor-ponto: var(--etiqueta-borda);
	-webkit-mask-image: linear-gradient(to right, transparent 20%, #000 90%);
	mask-image: linear-gradient(to right, transparent 20%, #000 90%);
	opacity: 0.8;
}

.projeto-vitrine::after {
	--cor-ponto: var(--cinza-300);
	-webkit-mask-image: radial-gradient(10rem circle at var(--ponto-x, 75%) var(--ponto-y, 50%), #000, transparent 70%);
	mask-image: radial-gradient(10rem circle at var(--ponto-x, 75%) var(--ponto-y, 50%), #000, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
}

.cartao-projeto:hover .projeto-vitrine::after {
	opacity: 0.6;
}

.projeto-vitrine-topo {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
}

.projeto-repo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
	line-height: 1.25rem;
	transition: color 0.3s;
}

.projeto-repo svg {
	width: 1rem;
	height: 1rem;
}

.projeto-repo-nome {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.projeto-cursor {
	flex-shrink: 0;
	width: 0.4375rem;
	height: 0.9375rem;
	margin-left: -0.375rem;
	background: currentColor;
	opacity: 0;
}

.cartao-projeto:hover .projeto-repo {
	color: var(--cinza-200);
}

.cartao-projeto:hover .projeto-cursor {
	animation: piscar 1.25s ease-out infinite;
}

.projeto-linguagem {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	flex-shrink: 0;
	color: var(--cinza-300);
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.projeto-linguagem::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--destaque);
}

.projeto-icone {
	position: relative;
	z-index: 1;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: contain;
	filter: var(--filtro-icone);
	transition: filter 0.3s;
}

.cartao-projeto:hover .projeto-icone {
	filter: var(--filtro-icone) var(--brilho-icone);
}

.cartao-projeto .cartao-conteudo {
	flex: 1;
	height: auto;
	padding: 1.5rem;
}

.cartao-projeto .cartao-titulo {
	margin: 0.75rem 0 0.375rem;
	font-size: 1.75rem;
	line-height: 2.25rem;
}

.cartao-projeto .cartao-descricao {
	margin-bottom: 1.25rem;
	line-height: 1.625rem;
}

.habilidade {
	transition: border-color 0.2s, color 0.2s, filter 0.3s;
}

/* Etiqueta da linguagem filtrada */
.habilidade-realce {
	border-color: var(--cinza-300);
	color: var(--destaque);
}

.projeto-botoes {
	margin-top: 1.5rem;
}

/* Projetos com estudo de caso na aba Destaques */
.projeto-estudo {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	border: 1px dashed var(--cinza-400);
	border-radius: 624.938rem;
	background: none;
	color: var(--cinza-200);
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.125rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.projeto-estudo:hover {
	border-style: solid;
	border-color: var(--destaque);
	color: var(--destaque);
}

.projeto-estudo:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

/* ---------- Aba Habilidades ---------- */

.cartao-area {
	position: relative;
	overflow: hidden;
}

.area-topo {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 0.25rem;
}

.area-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--terminal);
	color: var(--cinza-300);
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.area-icone svg {
	width: 1.375rem;
	height: 1.375rem;
}

.cartao-area:hover .area-icone {
	color: var(--destaque);
	border-color: var(--cinza-400);
}

.area-topo .cartao-titulo {
	flex: 1;
	min-width: 0;
}

.area-total {
	flex-shrink: 0;
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-variant-numeric: tabular-nums;
}

/* Qualquer etiqueta da aba se destaca ao passar o mouse (sem clique) */
.cartao-area .habilidade {
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s, filter 0.3s;
}

.cartao-area .habilidade:hover {
	border-color: var(--cinza-300);
	background: var(--terminal);
	color: var(--destaque);
}

/* "Usadas nos projetos": as outras etiquetas ficam apagadas */
.so-usadas .habilidade:not(.habilidade-usada) {
	filter: opacity(0.3);
}

/* Entrada: as etiquetas acendem em cascata depois do cartão (atraso vindo de js/main.js) */
.cartao-area.revelar .habilidade {
	opacity: 0;
}

.cartao-area.revelar.visivel .habilidade {
	opacity: 1;
	transition:
		opacity 0.45s ease calc(var(--atraso, 0ms) + 150ms + var(--i, 0) * 16ms),
		border-color 0.2s,
		color 0.2s,
		background-color 0.2s,
		filter 0.3s,
		transform 0.15s;
}

/* ---------- Aba Documentação ---------- */

.cartao-doc {
	overflow: hidden;
}

.doc-miniatura {
	display: block;
	aspect-ratio: 1100 / 420;
	background: var(--terminal);
	border-bottom: 1px solid var(--borda);
	transition: background-color 0.3s;
}

.doc-diagrama {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--filtro-icone);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	opacity: 0.75;
	transition: opacity 0.15s;
}

.doc-miniatura:hover .doc-diagrama,
.doc-miniatura:focus-visible .doc-diagrama {
	opacity: 1;
}

.doc-miniatura:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: -4px;
}

.doc-decisao {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--destaque);
	margin-bottom: 0.25rem;
}

.doc-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.doc-botoes .cartao-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1 1 10rem;
	width: auto;
	margin-top: 0;
	white-space: nowrap;
}

.cartao-botao-secundario {
	background: transparent;
	color: var(--destaque);
	box-shadow: inset 0 0 0 1px var(--etiqueta-borda);
}

.cartao-botao-secundario:hover {
	background: var(--etiqueta-fundo);
}

/* ---------- Aba Destaques ---------- */

.destaques {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

/* Entrada: cada bloco sobe e aparece quando chega à tela (atraso vindo de js/main.js) */
.destaque-bloco.revelar {
	opacity: 0;
	translate: 0 1.5rem;
}

.destaque-bloco.revelar.visivel {
	opacity: 1;
	translate: none;
	transition:
		opacity 0.6s ease var(--atraso, 0ms),
		translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--atraso, 0ms);
}

/* Rótulo das partes de cada projeto, com um fio até a borda */
.destaque-rotulo {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1.25rem;
	color: var(--destaque);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.destaque-rotulo::after {
	content: "";
	order: 1;
	flex: 1;
	height: 1px;
	background: var(--borda);
}

.destaque-rotulo-extra {
	order: 2;
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Sumário: um atalho para cada projeto */
.destaques-sumario {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-bottom: -2.5rem;
}

.destaques-atalho {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--cartao);
	transition: border-color 0.15s, background-color 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.destaques-atalho:hover {
	border-color: var(--cinza-400);
}

.destaques-atalho:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.destaques-atalho-numero {
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.destaques-atalho-moldura {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--terminal);
	transition: border-color 0.15s, background-color 0.3s;
}

.destaques-atalho:hover .destaques-atalho-moldura {
	border-color: var(--cinza-400);
}

.destaques-atalho-icone {
	width: 1.625rem;
	height: 1.625rem;
	object-fit: contain;
	filter: var(--filtro-icone);
}

.destaques-atalho-textos {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.destaques-atalho-titulo {
	color: var(--destaque);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}

.destaques-atalho-categoria {
	overflow: hidden;
	color: var(--cinza-400);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A seta aponta para baixo: o atalho rola até o projeto */
.destaques-atalho svg {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--cinza-400);
	rotate: 90deg;
	transition: color 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.destaques-atalho:hover svg {
	color: var(--destaque);
	transform: translateX(0.25rem);
}

/* Cada projeto */
.destaque {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--borda);
	scroll-margin-top: 6rem;
}

.destaque-meta {
	margin-bottom: 1.25rem;
}

.destaque-versao {
	font-family: var(--fonte-mono);
	font-variant-numeric: tabular-nums;
}

.destaque-titulo {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--destaque);
	font-size: 3.75rem;
	line-height: 4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.destaque-icone {
	width: 3.25rem;
	height: 3.25rem;
	flex-shrink: 0;
	object-fit: contain;
	filter: var(--filtro-icone);
}

.destaque-frase {
	max-width: 48rem;
	margin-top: 1rem;
	color: var(--cinza-300);
	font-size: 1.5rem;
	line-height: 2.125rem;
	font-weight: 500;
	text-wrap: balance;
}

.destaque-botoes {
	margin-top: 1.75rem;
}

.destaque-botoes .cartao-botao {
	flex: 0 1 auto;
	padding: 0.625rem 1.125rem;
}

.destaque-botoes .cartao-botao svg {
	width: 1rem;
	height: 1rem;
}

/* Capa: a tela principal numa janela, com a mesma barra do terminal */
.destaque-capa {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.destaque-janela {
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 0.625rem;
	background: var(--terminal);
	box-shadow: var(--sombra-janela);
	transition: background-color 0.3s, border-color 0.15s;
}

.destaque-janela:hover {
	border-color: var(--cinza-400);
}

.destaque-janela-barra {
	display: flex;
	align-items: center;
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--borda);
}

.destaque-janela-endereco {
	max-width: calc(100% - 8rem);
	margin: auto;
	padding: 0.1875rem 0.875rem;
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: var(--cartao);
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.destaque-janela-tela {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 0;
	overflow: hidden;
	background: var(--terminal);
	cursor: zoom-in;
}

.destaque-janela-tela:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: -4px;
}

.destaque-janela-tela img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.destaque-janela-tela:hover img {
	transform: scale(1.015);
}

/* A capa acompanha o tema da página: editor escuro no tema escuro, claro no claro */
.destaque-capa-clara {
	display: none !important;
}

:root[data-tema="claro"] .destaque-capa-clara {
	display: block !important;
}

:root[data-tema="claro"] .destaque-capa-escura {
	display: none !important;
}

/* Etiqueta "Ampliar" e lupa das fotos: escuras nos dois temas, por cima da imagem */
.destaque-ampliar,
.destaque-foto-lupa {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border-radius: 624.938rem;
	background: rgba(12, 10, 9, 0.72);
	color: #fafaf9;
	-webkit-backdrop-filter: blur(0.375rem);
	backdrop-filter: blur(0.375rem);
	opacity: 0;
	transition: opacity 0.2s, translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.destaque-ampliar {
	right: 1rem;
	bottom: 1rem;
	padding: 0.375rem 0.875rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	translate: 0 0.375rem;
}

.destaque-ampliar svg,
.destaque-foto-lupa svg {
	width: 0.875rem;
	height: 0.875rem;
}

.destaque-janela-tela:hover .destaque-ampliar,
.destaque-janela-tela:focus-visible .destaque-ampliar,
.destaque-foto-botao:hover .destaque-foto-lupa,
.destaque-foto-botao:focus-visible .destaque-foto-lupa {
	opacity: 1;
	translate: none;
}

.destaque-legenda {
	max-width: 62rem;
	color: var(--cinza-400);
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 500;
}

/* Números */
.destaque-numeros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.destaque-numero {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	padding: 1.25rem 1.25rem 1.125rem;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--cartao);
	transition: background-color 0.3s;
}

.destaque-numero-valor {
	color: var(--destaque);
	font-size: 2.75rem;
	line-height: 3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.destaque-numero-rotulo {
	margin-top: 0.375rem;
	color: var(--cinza-400);
	font-size: 0.9375rem;
	line-height: 1.375rem;
	font-weight: 500;
}

/* Duas colunas: a ideia e as tecnologias; a arquitetura e os testes */
.destaque-colunas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem 2.5rem;
}

.destaque-ideia {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.destaque-ideia .destaque-rotulo {
	margin-bottom: 0.25rem;
}

.destaque-ideia .nota-paragrafo:first-of-type {
	color: var(--cinza-200);
	font-size: 1.3125rem;
	line-height: 2.125rem;
}

.destaque-pilha {
	align-self: start;
	padding: 1.5rem;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--cartao);
	transition: background-color 0.3s;
}

.destaque-pilha .destaque-rotulo {
	margin-bottom: 0.25rem;
}

/* Galeria */
.destaque-galeria {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem 1.25rem;
}

.destaque-foto {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.destaque-foto-botao {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--terminal);
	cursor: zoom-in;
	transition: border-color 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.destaque-foto-botao:hover {
	border-color: var(--cinza-400);
	transform: scale(1.02);
}

.destaque-foto-botao:active {
	transform: scale(0.99);
}

.destaque-foto-botao:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.destaque-foto-imagem {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.destaque-foto-botao:hover .destaque-foto-imagem {
	transform: scale(1.05);
}

.destaque-foto-lupa {
	top: 0.625rem;
	right: 0.625rem;
	width: 2rem;
	height: 2rem;
	translate: 0 -0.25rem;
}

.destaque-foto-legenda {
	color: var(--cinza-400);
	font-size: 0.9375rem;
	line-height: 1.375rem;
	font-weight: 500;
}

/* Por dentro: decisões de engenharia */
.destaque-detalhes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.destaque-detalhe {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--cartao);
	transition: border-color 0.15s, background-color 0.3s;
}

.destaque-detalhe:hover {
	border-color: var(--cinza-400);
}

.destaque-detalhe::after,
.destaques-atalho::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(26rem circle at var(--luz-x, 50%) var(--luz-y, 0%), var(--luz), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}

.destaque-detalhe:hover::after,
.destaques-atalho:hover::after {
	opacity: 1;
}

.destaque-detalhe-numero {
	color: var(--cinza-400);
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.destaque-detalhe-titulo {
	color: var(--destaque);
	font-size: 1.3125rem;
	line-height: 1.875rem;
	font-weight: 700;
}

.destaque-detalhe-texto {
	color: var(--cinza-400);
	line-height: 1.625rem;
	font-weight: 500;
}

.destaque-detalhe-codigo {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.375rem;
}

/* Arquitetura, no estilo do terminal do topo */
.destaque-arquitetura .terminal-titulo {
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
}

.destaque-arquitetura-desenho {
	padding: 1.25rem;
	overflow-x: auto;
	background: var(--cartao);
	color: var(--cinza-300);
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	line-height: 1.375rem;
	white-space: pre;
	transition: background-color 0.3s;
}

.destaque-arquitetura-desenho:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: -2px;
}

/* Testes: suíte e detalhe à esquerda, resultado à direita */
.destaque-tabela {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--cartao);
	transition: background-color 0.3s;
}

.destaque-tabela caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.destaque-tabela th,
.destaque-tabela td {
	padding: 0.875rem 1.25rem;
	border-top: 1px solid var(--borda);
	text-align: left;
	vertical-align: top;
}

.destaque-tabela tr:first-child th,
.destaque-tabela tr:first-child td {
	border-top: 0;
}

.destaque-tabela-nome {
	display: block;
	color: var(--destaque);
	font-weight: 700;
}

.destaque-tabela-detalhe {
	display: block;
	margin-top: 0.125rem;
	color: var(--cinza-400);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.destaque-tabela .destaque-tabela-resultado {
	color: var(--verde-400);
	font-family: var(--fonte-mono);
	font-size: 0.875rem;
	text-align: right;
	white-space: nowrap;
}

/* O que os dois têm em comum */
.destaques-comum {
	padding-top: 3.5rem;
	border-top: 1px solid var(--borda);
}

.destaques-comum-titulo {
	color: var(--destaque);
	font-size: 2.5rem;
	line-height: 3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.destaques-comum-texto {
	max-width: 48rem;
	margin-top: 0.75rem;
	color: var(--cinza-400);
	font-size: 1.25rem;
	line-height: 1.875rem;
	font-weight: 500;
}

.destaques-comum-itens {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2rem;
}

.destaques-comum-item {
	padding: 1.5rem;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: var(--cartao);
	transition: border-color 0.15s, background-color 0.3s;
}

.destaques-comum-item:hover {
	border-color: var(--cinza-400);
}

.destaques-comum-item:hover .area-icone {
	color: var(--destaque);
	border-color: var(--cinza-400);
}

.destaques-comum-item .area-topo {
	margin-bottom: 0.875rem;
}

.destaques-comum-item-titulo {
	color: var(--destaque);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}

.destaques-comum-item .cartao-descricao {
	margin-bottom: 0;
	line-height: 1.625rem;
}

.destaques-comum-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--etiqueta-borda);
	border-radius: 0.5rem;
	color: var(--cinza-300);
	font-size: 1.0625rem;
	line-height: 1.625rem;
	font-weight: 500;
}

.destaques-ver-todos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: auto;
	margin-top: 0;
	padding: 0.5rem 1.25rem;
}

.destaques-ver-todos svg {
	width: 1rem;
	height: 1rem;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.destaques-ver-todos:hover svg {
	transform: translateX(0.25rem);
}

/* Visualizador de imagens: ocupa quase a tela toda, com a foto inteira no meio */
.galeria {
	width: calc(100% - 2rem);
	max-width: 125rem;
	height: calc(100% - 2rem);
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--borda);
	border-radius: 0.75rem;
	background: var(--cartao);
	color: var(--texto);
	box-shadow: var(--dica-sombra);
}

.galeria[open] {
	display: flex;
	flex-direction: column;
	animation: leitor-abrir 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.galeria::backdrop {
	background: var(--fundo-galeria);
	-webkit-backdrop-filter: blur(0.375rem);
	backdrop-filter: blur(0.375rem);
	animation: leitor-fundo 0.3s ease;
}

:root:has(.galeria[open]) {
	overflow: hidden;
}

.galeria-topo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.75rem 0.75rem 1.25rem;
	border-bottom: 1px solid var(--borda);
}

.galeria-palco {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 1rem 4.5rem;
	background: var(--terminal);
	touch-action: pan-y;
	transition: background-color 0.3s;
}

.galeria-imagem {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.galeria-imagem.carregada {
	opacity: 1;
}

.galeria-passo {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: var(--cartao);
	color: var(--cinza-300);
	cursor: pointer;
	translate: 0 -50%;
	transition: color 0.15s, border-color 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.galeria-passo[hidden] {
	display: none;
}

.galeria-anterior {
	left: 1rem;
}

.galeria-proxima {
	right: 1rem;
}

.galeria-passo:hover,
.galeria-passo:focus-visible {
	color: var(--destaque);
	border-color: var(--cinza-400);
}

.galeria-anterior:hover {
	transform: translateX(-0.125rem);
}

.galeria-proxima:hover {
	transform: translateX(0.125rem);
}

.galeria-passo:active {
	transform: scale(0.92);
}

.galeria-passo:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.galeria-passo svg {
	width: 1.25rem;
	height: 1.25rem;
}

.galeria-legenda {
	flex-shrink: 0;
	padding: 1rem 1.5rem 1.25rem;
	border-top: 1px solid var(--borda);
	color: var(--cinza-300);
	font-size: 1.0625rem;
	line-height: 1.625rem;
	font-weight: 500;
	text-align: center;
	text-wrap: balance;
}

@media (min-width: 560px) {
	.destaque-galeria {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.destaques {
		gap: 4.5rem;
	}

	.destaque {
		gap: 2.75rem;
		padding-top: 2.75rem;
	}

	.destaque-titulo {
		font-size: 2.75rem;
		line-height: 3rem;
	}

	.destaque-icone {
		width: 2.5rem;
		height: 2.5rem;
	}

	.destaque-frase {
		font-size: 1.25rem;
		line-height: 1.875rem;
	}

	.destaque-botoes .cartao-botao {
		flex: 1 1 12rem;
	}

	.destaque-numero-valor {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.destaques-comum-titulo {
		font-size: 2rem;
		line-height: 2.5rem;
	}

	.destaque-tabela th,
	.destaque-tabela td {
		padding: 0.75rem 1rem;
	}

	.galeria {
		width: calc(100% - 1rem);
		height: calc(100% - 1rem);
	}

	.galeria-palco {
		padding: 0.5rem;
	}

	/* No celular as setas ficam por cima da foto, mais discretas (também dá para deslizar) */
	.galeria-passo {
		width: 2.5rem;
		height: 2.5rem;
		opacity: 0.85;
	}

	.galeria-anterior {
		left: 0.5rem;
	}

	.galeria-proxima {
		right: 0.5rem;
	}

	.galeria-legenda {
		padding: 0.875rem 1rem 1rem;
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

@media (min-width: 769px) {
	.destaques-sumario {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.destaques-atalho:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.destaque-numeros {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.destaque-colunas {
		grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	}

	.destaque-tecnico {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.destaque-galeria {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem 1.5rem;
	}

	.destaque-detalhes,
	.destaques-comum-itens {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* ---------- Aba Notas ---------- */

button.cartao-botao {
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.cartao-botao:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.cartao-nota {
	position: relative;
	overflow: hidden;
}

/* Luz que acompanha o mouse por cima do cartão (posição em % vinda de js/main.js) */
.cartao-nota::after,
.cartao-projeto::after,
.cartao-area::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(26rem circle at var(--luz-x, 50%) var(--luz-y, 0%), var(--luz), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}

.cartao-nota:hover::after,
.cartao-projeto:hover::after,
.cartao-area:hover::after {
	opacity: 1;
}

.cartao-nota .cartao-conteudo {
	flex: 1;
	height: auto;
	padding: 1.5rem;
}

/* Vitrine: o bloco de código da nota (ou uma frase dela) */
.nota-vitrine {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	height: 12.5rem;
	padding: 1.5rem;
	overflow: hidden;
	background: var(--terminal);
	border-bottom: 1px solid var(--borda);
	cursor: pointer;
	transition: background-color 0.3s;
}

.nota-vitrine::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4.5rem;
	background: linear-gradient(to bottom, transparent, var(--terminal));
	pointer-events: none;
}

/* A frase é curta e fica inteira: o degradê só serve para o código */
.nota-vitrine:has(.nota-vitrine-citacao)::after {
	display: none;
}

.nota-vitrine-codigo,
.nota-vitrine-citacao {
	margin-block: auto;
}

/* Linhas mais longas que a vitrine somem aos poucos na borda direita */
.nota-vitrine-codigo {
	position: relative;
	max-width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	color: var(--cinza-300);
	font-family: var(--fonte-mono);
	font-size: 0.9375rem;
	line-height: 1.5rem;
	white-space: pre;
	opacity: 0.8;
	transition: opacity 0.3s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nota-vitrine-citacao {
	position: relative;
	max-width: 34rem;
	padding-left: 1rem;
	border-left: 2px solid var(--etiqueta-borda);
	color: var(--cinza-200);
	font-size: 1.375rem;
	line-height: 1.875rem;
	font-weight: 600;
	text-wrap: balance;
	opacity: 0.85;
	transition: opacity 0.3s, border-color 0.3s;
}

.cartao-nota:hover .nota-vitrine-codigo,
.cartao-nota:hover .nota-vitrine-citacao {
	opacity: 1;
}

.cartao-nota:hover .nota-vitrine-codigo {
	transform: translateY(-0.375rem);
}

.cartao-nota:hover .nota-vitrine-citacao {
	border-color: var(--cinza-400);
}

.nota-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--cinza-400);
}

.nota-tema {
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--etiqueta-borda);
	border-radius: 624.938rem;
	background: var(--etiqueta-fundo);
	color: var(--destaque);
	font-size: 0.75rem;
	line-height: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nota-tempo {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
}

.nota-tempo svg {
	width: 0.875rem;
	height: 0.875rem;
}

.cartao-nota .cartao-titulo {
	margin: 0.75rem 0 0.375rem;
	font-size: 1.625rem;
	line-height: 2.125rem;
	text-wrap: balance;
}

.cartao-nota .cartao-descricao {
	margin-bottom: 0;
	font-size: 1.0625rem;
	line-height: 1.625rem;
}

.nota-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.nota-rodape .habilidades {
	width: auto;
	margin-top: 0;
}

.nota-ler {
	display: inline-flex;
	margin-left: auto;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: auto;
	min-width: 9rem;
	margin-top: 0;
	padding: 0.5rem 1.25rem;
}

.nota-ler svg,
.leitor-passo svg {
	width: 1rem;
	height: 1rem;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cartao-nota:hover .nota-ler svg {
	transform: translateX(0.25rem);
}

.nota-projeto {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	transition: border-color 0.15s, color 0.15s;
}

a.nota-projeto:hover,
a.nota-projeto:focus-visible {
	border-color: var(--cinza-400);
	color: var(--destaque);
}

/* Leitor: a nota inteira num painel por cima da página */
.leitor {
	width: min(60rem, calc(100% - 2rem));
	max-width: none;
	max-height: calc(100% - 4rem);
	margin: auto;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--borda);
	border-radius: 0.75rem;
	background: var(--cartao);
	color: var(--texto);
	box-shadow: var(--dica-sombra);
}

.leitor[open] {
	animation: leitor-abrir 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.leitor::backdrop {
	background: var(--fundo-leitor);
	-webkit-backdrop-filter: blur(0.375rem);
	backdrop-filter: blur(0.375rem);
	animation: leitor-fundo 0.3s ease;
}

@keyframes leitor-abrir {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes leitor-fundo {
	from { opacity: 0; }
	to { opacity: 1; }
}

:root:has(.leitor[open]) {
	overflow: hidden;
}

.leitor-topo {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem 1rem 2.5rem;
	border-bottom: 1px solid var(--borda);
	background: var(--cartao);
}

.leitor-numero {
	font-family: var(--fonte-mono);
	font-variant-numeric: tabular-nums;
}

.leitor-fechar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border: 1px solid var(--borda);
	border-radius: 624.938rem;
	background: transparent;
	color: var(--cinza-300);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leitor-fechar:hover,
.leitor-fechar:focus-visible {
	color: var(--destaque);
	border-color: var(--cinza-400);
	transform: rotate(90deg);
}

.leitor-fechar:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.leitor-fechar svg {
	width: 1.125rem;
	height: 1.125rem;
}

.leitor-artigo {
	padding: 2rem 2.5rem 2.5rem;
}

.leitor-titulo {
	color: var(--destaque);
	font-size: 2.25rem;
	line-height: 2.75rem;
	font-weight: 700;
	text-wrap: balance;
}

.leitor-resumo {
	margin: 0.75rem 0 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--borda);
	color: var(--cinza-400);
	font-size: 1.25rem;
	line-height: 1.875rem;
	font-weight: 500;
}

.nota-corpo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.nota-paragrafo {
	font-size: 1.125rem;
	line-height: 1.875rem;
	color: var(--cinza-300);
}

.nota-codigo {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--borda);
	border-radius: 0.375rem;
	background: var(--terminal);
	color: var(--cinza-200);
	font-family: var(--fonte-mono);
	font-size: 0.9375rem;
	line-height: 1.5rem;
	white-space: pre;
	transition: background-color 0.3s;
}

.nota-codigo:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.leitor-navegacao {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--borda);
}

.leitor-passo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--borda);
	border-radius: 0.5rem;
	background: transparent;
	color: var(--cinza-400);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.leitor-passo[hidden] {
	display: none;
}

.leitor-proxima {
	grid-column: 2;
	align-items: flex-end;
	text-align: right;
}

.leitor-passo:hover,
.leitor-passo:focus-visible {
	border-color: var(--cinza-400);
	background: var(--etiqueta-fundo);
	color: var(--cinza-300);
}

.leitor-passo:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.leitor-passo-rotulo {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.leitor-passo-titulo {
	color: var(--destaque);
	font-size: 1.0625rem;
	line-height: 1.5rem;
	font-weight: 700;
}

.leitor-anterior:hover svg {
	transform: translateX(-0.25rem);
}

.leitor-proxima:hover svg {
	transform: translateX(0.25rem);
}

/* ---------- Aba Contato ---------- */

.contato-grade {
	display: grid;
	gap: 1.25rem;
	align-items: start;
}

@media (min-width: 900px) {
	.contato-grade {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
		gap: 1.5rem;
	}
}

.contato-canais {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin-top: 0.5rem;
	list-style: none;
}

.contato-canais li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 1.125rem;
	border-top: 1px solid var(--borda);
}

.contato-canal-rotulo {
	color: var(--cinza-400);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.contato-canal-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.contato-canal-valor {
	color: var(--destaque);
	font-weight: 600;
	overflow-wrap: anywhere;
}

a.contato-canal-valor {
	text-decoration: underline;
	text-decoration-color: var(--etiqueta-borda);
	text-underline-offset: 0.25em;
	transition: text-decoration-color 0.15s;
}

a.contato-canal-valor:hover {
	text-decoration-color: currentColor;
}

a.contato-canal-valor:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
	border-radius: 0.125rem;
}

.contato-copiar {
	font-size: 0.875rem;
}

.contato-form[hidden],
.contato-enviado[hidden] {
	display: none;
}

.contato-form {
	display: grid;
	gap: 1rem;
	margin-top: 0.75rem;
}

.contato-linha {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.contato-linha {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.campo-rotulo {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--cinza-300);
}

.campo-entrada {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--borda);
	border-radius: 0.25rem;
	background: var(--etiqueta-fundo);
	color: var(--texto);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	transition: border-color 0.15s;
}

.campo-entrada::placeholder {
	color: var(--cinza-400);
	opacity: 0.75;
}

.campo-entrada:hover {
	border-color: var(--etiqueta-borda);
}

.campo-entrada:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
	border-color: var(--cinza-400);
}

.campo-entrada:user-invalid {
	border-color: var(--erro);
}

/* No celular, 16px nos campos: abaixo disso o Safari do iPhone amplia a página ao tocar */
@media (max-width: 768px) {
	.campo-entrada {
		font-size: 1.25rem;
	}
}

textarea.campo-entrada {
	min-height: 10rem;
	resize: vertical;
}

.campo-select {
	position: relative;
	display: block;
}

.campo-select select {
	appearance: none;
	padding-right: 2.5rem;
	cursor: pointer;
}

.campo-select select:invalid {
	color: var(--cinza-400);
}

.campo-select option {
	color: var(--texto);
}

/* Seta do seletor de motivo */
.campo-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid var(--cinza-400);
	border-bottom: 2px solid var(--cinza-400);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.campo-contador {
	align-self: flex-end;
	font-size: 0.8125rem;
	line-height: 1rem;
	color: var(--cinza-400);
	font-variant-numeric: tabular-nums;
}

/* Campo invisível contra robôs */
.campo-armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.contato-acoes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.contato-enviar {
	margin-top: 0.25rem;
	border: 0;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.contato-enviar:disabled {
	opacity: 0.6;
	cursor: progress;
}

.contato-enviar:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.contato-form[aria-busy="true"] .campo {
	opacity: 0.6;
}

.contato-status {
	color: var(--cinza-300);
	font-size: 0.9375rem;
	line-height: 1.375rem;
}

.contato-status:empty {
	display: none;
}

.contato-status[data-estado="erro"] {
	color: var(--erro);
}

.contato-link {
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.contato-enviado {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1rem;
	outline: none;
	animation: surgir 0.35s ease;
}

.contato-enviado-titulo {
	display: flex;
	align-items: center;
	font-family: var(--fonte-mono);
	font-size: 1.125rem;
	color: var(--destaque);
}

/* ---------- Aba Atividade ---------- */

.cartao-estatico:hover {
	transform: none;
}

.atividade-carregando {
	display: flex;
	align-items: center;
	font-family: var(--fonte-mono);
	color: var(--cinza-300);
}

.contribuicoes-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

.anos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.ano {
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--borda);
	border-radius: 0.25rem;
	background: transparent;
	color: var(--cinza-400);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.ano:hover {
	color: var(--destaque);
	border-color: var(--cinza-400);
}

.ano[aria-pressed="true"] {
	background: var(--botao-fundo);
	border-color: var(--botao-fundo);
	color: var(--botao-texto);
}

.ano:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

.contribuicoes-corpo {
	transition: opacity 0.2s;
}

.contribuicoes-corpo[aria-busy="true"] {
	opacity: 0.45;
}

.numeros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}

.numero {
	padding: 0.75rem 1rem;
	border: 1px solid var(--borda);
	border-radius: 0.375rem;
}

.numero-rotulo {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--cinza-400);
}

.numero-valor {
	margin-top: 0.25rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	color: var(--destaque);
	font-variant-numeric: tabular-nums;
}

.calendario-rolagem {
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.calendario {
	width: 100%;
	min-width: calc(2.25rem + var(--semanas) * 0.9rem);
	max-width: calc(2.25rem + var(--semanas) * 1.6rem);
}

.calendario-meses,
.calendario-corpo {
	display: grid;
	grid-template-columns: 2.25rem repeat(var(--semanas), minmax(0, 1fr));
	column-gap: 3px;
}

.calendario-meses {
	height: 1.25rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--cinza-400);
}

.calendario-meses span {
	grid-row: 1;
	white-space: nowrap;
}

.calendario-corpo {
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	row-gap: 3px;
	border-radius: 0.25rem;
}

.calendario-corpo:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 4px;
}

.calendario-dia-semana {
	align-self: center;
	font-size: 0.75rem;
	line-height: 1;
	color: var(--cinza-400);
}

.celula {
	display: block;
	aspect-ratio: 1;
	border-radius: 2px;
	background: var(--nivel-0);
}

.celula[data-nivel="1"] { background: var(--nivel-1); }
.celula[data-nivel="2"] { background: var(--nivel-2); }
.celula[data-nivel="3"] { background: var(--nivel-3); }
.celula[data-nivel="4"] { background: var(--nivel-4); }

.celula-vazia {
	background: transparent;
}

/* Dias do ano atual que ainda não chegaram */
.celula-futura {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--nivel-0);
}

.calendario-corpo .celula:not(.celula-vazia):not(.celula-futura):hover {
	outline: 1px solid var(--destaque);
	outline-offset: 1px;
}

.calendario-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--cinza-400);
}

.calendario-legenda {
	display: flex;
	align-items: center;
	gap: 3px;
}

.calendario-legenda .celula {
	width: 0.875rem;
	height: 0.875rem;
}

.calendario-legenda span:first-child {
	margin-right: 0.25rem;
}

.calendario-legenda span:last-child {
	margin-left: 0.25rem;
}

.linguagens {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.375rem;
	list-style: none;
}

.linguagem {
	padding: 0.375rem 0;
}

.linguagem-topo {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.linguagem-nome {
	font-weight: 500;
	color: var(--cinza-200);
}

.linguagem-valor {
	color: var(--cinza-400);
	font-variant-numeric: tabular-nums;
}

.linguagem-barra {
	width: 0;
	height: 0.5rem;
	border-radius: 0 4px 4px 0;
	background: var(--barra);
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.linguagem-outras .linguagem-barra {
	background: var(--barra-outras);
}

.repos {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.repos li + li {
	border-top: 1px solid var(--borda);
}

.repo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0 -0.5rem;
	padding: 0.75rem 0.5rem;
	border-radius: 0.25rem;
	transition: background-color 0.15s;
}

.repo:hover,
.repo:focus-visible {
	background: var(--etiqueta-fundo);
}

.repo:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: -2px;
}

.repo-nome {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.repo-nome .cartao-icone {
	width: 1rem;
	height: 1rem;
}

.repo-titulo {
	font-size: 1.125rem;
	line-height: 1.5rem;
	font-weight: 700;
	color: var(--destaque);
}

.repo-sub {
	font-family: var(--fonte-mono);
	font-size: 0.8125rem;
	color: var(--cinza-400);
	overflow-wrap: anywhere;
}

.repo-descricao {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	color: var(--cinza-400);
}

.repo-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--cinza-400);
}

.atividade-aviso {
	color: var(--cinza-400);
}

.atividade-erro {
	margin-top: 0.5rem;
}

.atividade-rodape {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--cinza-400);
}

.atividade-link {
	color: var(--cinza-200);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.atividade-link:hover {
	color: var(--destaque);
}

.dica {
	position: fixed;
	z-index: 100;
	max-width: calc(100vw - 1rem);
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--borda);
	border-radius: 0.25rem;
	background: var(--cartao);
	color: var(--texto);
	box-shadow: var(--dica-sombra);
	font-size: 0.8125rem;
	line-height: 1.25rem;
	white-space: nowrap;
	pointer-events: none;
}

.rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	width: calc(100% - 2.5rem);
	margin-top: 4rem;
	padding: 2rem 0 2.5rem;
	border-top: 1px solid var(--borda);
	color: var(--cinza-400);
	font-size: 1.125rem;
}

.rodape-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
}

.rodape-links a {
	color: var(--cinza-300);
	font-weight: 500;
	border-radius: 0.125rem;
	transition: color 0.15s;
}

.rodape-links a:hover {
	color: var(--destaque);
}

.rodape-links a:focus-visible {
	outline: 2px solid var(--cinza-400);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.projeto-vitrine {
		height: 9rem;
		padding: 1rem 1.25rem 1.25rem;
	}

	.projeto-icone {
		width: 3.5rem;
		height: 3.5rem;
	}

	.cartao-projeto .cartao-conteudo {
		padding: 1.25rem;
	}

	.cartao-projeto .cartao-titulo {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.nota-vitrine {
		height: 10rem;
		padding: 1.25rem;
	}

	.nota-vitrine-codigo {
		font-size: 0.8125rem;
		line-height: 1.375rem;
	}

	.nota-vitrine-citacao {
		font-size: 1.1875rem;
		line-height: 1.625rem;
	}

	.leitor {
		width: calc(100% - 1rem);
		max-height: calc(100% - 1rem);
	}

	.leitor-topo {
		padding: 0.75rem 0.75rem 0.75rem 1.25rem;
	}

	.leitor-artigo {
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.leitor-titulo {
		font-size: 1.75rem;
		line-height: 2.25rem;
	}

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

	.leitor-proxima {
		grid-column: auto;
	}
}

/* Escala fixa equivalente ao zoom de 75% do Chrome, no computador.
   O zoom fica na .pagina (e não no html) para a dica do gráfico, que é filha do body,
   continuar sendo posicionada pelas coordenadas reais da tela; por isso ela e o
   quadriculado do fundo recebem os tamanhos já reduzidos à mão. */
@media (min-width: 769px) {
	.pagina {
		zoom: 0.75;
	}

	.dica {
		max-width: calc(100vw - 0.75rem);
		padding: 0.28rem 0.47rem;
		border-radius: 0.1875rem;
		font-size: 0.61rem;
		line-height: 0.94rem;
	}

	body {
		background-size: 1.125rem 1.125rem;
	}
}

@media (min-width: 769px) {
	.principal {
		margin-top: 5rem;
	}

	.grade {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.cartao-largo {
		grid-column: 1 / -1;
	}

	/* Com número ímpar de notas, a última ocupa a fileira inteira, com a vitrine ao lado */
	.cartao-nota:nth-child(odd):last-child {
		grid-column: 1 / -1;
		flex-direction: row;
	}

		.cartao-nota:nth-child(odd):last-child .nota-vitrine {
		flex: 0 0 calc(50% - 1.25rem);
		height: auto;
		min-height: 13rem;
		border-bottom: 0;
		border-right: 1px solid var(--borda);
	}

	.numeros {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 769px) {
	.aba {
		padding-inline: 1rem;
		font-size: 1.625rem;
	}

	.aba::after {
		left: 1rem;
		right: 1rem;
	}

	.abas {
		margin-inline: -1rem;
		background-size: calc(100% - 2rem) 1px;
	}
}

@media (min-width: 1025px) {
	.boas-vindas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 3rem 2.5rem;
	}

	.destaques-sumario {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.destaques-atalho,
	.destaques-atalho:last-child:nth-child(odd) {
		grid-column: span 2;
	}

	.destaques-atalho:nth-last-child(2):nth-child(3n + 1),
	.destaques-atalho:last-child:nth-child(3n + 2) {
		grid-column: span 3;
	}

	.destaques-atalho:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.topo-contato {
		padding: 0 0.875rem;
	}

	.apresentacao-acoes .botao {
		flex: 1 1 auto;
	}
}

.cidade-rolagem {
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.cidade-svg {
	display: block;
	width: 100%;
	min-width: 40rem;
	height: auto;
	font-family: var(--fonte-mono);
}

.cidade-n0 { fill: var(--nivel-0); }
.cidade-n1 { fill: var(--nivel-1); }
.cidade-n2 { fill: var(--nivel-2); }
.cidade-n3 { fill: var(--nivel-3); }
.cidade-n4 { fill: var(--nivel-4); }

.cidade-luz {
	fill: #e3a246;
	opacity: 0.75;
}

.cidade-rotulo {
	fill: var(--cinza-400);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
}

.cidade-total {
	fill: var(--destaque);
	font-size: 50px;
	font-weight: 800;
}

.cidade-texto {
	fill: var(--texto);
	font-weight: 700;
}

.cidade-dado {
	fill: var(--cinza-400);
	font-size: 13px;
}

.cidade-pequeno {
	fill: var(--cinza-400);
	font-size: 10.5px;
}

.cidade-ponto {
	fill: var(--disponivel);
	animation: cidade-pulso 1.6s ease-in-out infinite;
}

.cidade-predio {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: cidade-subir 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.cidade-marca {
	animation: cidade-surgir 0.6s ease-out 2.4s both;
}

.cidade-marca line {
	stroke: #e3a246;
}

.cidade-marca text {
	fill: var(--texto);
	font-size: 11px;
	font-weight: 700;
}

@keyframes cidade-subir {
	from {
		transform: scaleY(0);
		opacity: 0;
	}
	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes cidade-surgir {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes cidade-pulso {
	50% {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cidade-predio,
	.cidade-marca,
	.cidade-ponto {
		animation: none;
	}
}

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