@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
	--bg-main: #141414;
	/* Cor principal do fundo da pagina */
	--bg-soft: #1f1f1f;
	/* Cor de apoio para fundos secundarios */
	--text-primary: #f5f5f1;
	/* Cor principal dos textos */
	--text-secondary: #a3a3a3;
	/* Cor secundaria para textos menos destacados */
	--brand-red: #e50914;
	/* Vermelho da identidade visual inspirada na Netflix */
	--focus-ring: #ffffff;
	/* Cor do contorno de foco para acessibilidade */
	--bg-layer-1: rgba(229, 9, 20, 0.15);
	/* Camada superior de destaque no fundo */
	--bg-layer-2: rgba(229, 9, 20, 0.1);
	/* Camada secundaria de destaque no fundo */
	--bg-base-start: #1b1b1b;
	/* Cor inicial do gradiente principal de fundo */
	--bg-base-end: #111111;
	/* Cor final do gradiente principal de fundo */
	--card-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
	/* Sombra padrao dos avatares */
	--card-shadow-hover: 0 22px 40px rgba(0, 0, 0, 0.45);
	/* Sombra intensificada em interacao */
	--toggle-bg: rgba(255, 255, 255, 0.08);
	/* Fundo do botao de tema */
	--toggle-border: rgba(255, 255, 255, 0.25);
	/* Borda do botao de tema */
}

:root[data-theme='light'] {
	--bg-main: #f2f2f2;
	/* Cor principal do fundo no modo claro */
	--bg-soft: #dcdcdc;
	/* Cor de apoio para elementos no modo claro */
	--text-primary: #161616;
	/* Cor principal dos textos no modo claro */
	--text-secondary: #505050;
	/* Cor secundaria dos textos no modo claro */
	--focus-ring: #1a1a1a;
	/* Cor de foco para contraste no modo claro */
	--bg-layer-1: rgba(229, 9, 20, 0.12);
	/* Camada superior de destaque no modo claro */
	--bg-layer-2: rgba(229, 9, 20, 0.08);
	/* Camada secundaria de destaque no modo claro */
	--bg-base-start: #fbfbfb;
	/* Cor inicial do gradiente no modo claro */
	--bg-base-end: #ededed;
	/* Cor final do gradiente no modo claro */
	--card-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
	/* Sombra mais suave para o modo claro */
	--card-shadow-hover: 0 16px 30px rgba(0, 0, 0, 0.22);
	/* Sombra de hover ajustada para o modo claro */
	--toggle-bg: rgba(0, 0, 0, 0.05);
	/* Fundo do botao de tema no modo claro */
	--toggle-border: rgba(0, 0, 0, 0.2);
	/* Borda do botao de tema no modo claro */
}

* {
	margin: 0;
	/* Remove margens padrao de todos os elementos */
	padding: 0;
	/* Remove paddings padrao de todos os elementos */
	box-sizing: border-box;
	/* Inclui borda e padding dentro da largura/altura total */
}

body {
	min-height: 100vh;
	/* Garante que o body ocupe no minimo toda a altura da tela */
	font-family: 'Nunito Sans', sans-serif;
	/* Define a fonte padrao do conteudo */
	color: var(--text-primary);
	/* Aplica a cor padrao do texto */
	background:
		radial-gradient(circle at 20% 20%, var(--bg-layer-1), transparent 35%),
		radial-gradient(circle at 85% 80%, var(--bg-layer-2), transparent 30%),
		linear-gradient(180deg, var(--bg-base-start) 0%, var(--bg-base-end) 100%);
	/* Cria camadas de gradiente para profundidade no fundo */
	display: grid;
	/* Usa grid para facilitar centralizacao do conteudo principal */
	place-items: center;
	/* Centraliza o conteudo no eixo horizontal e vertical */
	padding: 2rem 1rem;
	/* Adiciona espaco interno para respiro nas bordas da tela */
	transition: background 0.35s ease, color 0.35s ease;
	/* Suaviza a troca entre temas */
}

main {
	width: min(920px, 100%);
	/* Limita largura maxima sem estourar em telas pequenas */
	text-align: center;
	/* Centraliza textos do conteudo principal */
}

header {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	/* Organiza titulo e botao com espaco consistente */
	margin-bottom: 2rem;
	/* Mantem distancia entre header e grade de perfis */
}

.brand-logo {
	width: clamp(140px, 24vw, 220px);
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 18px rgba(229, 9, 20, 0.28));
	/* Ajusta escala da imagem da marca e preserva destaque visual */
}

.theme-toggle {
	width: 58px;
	height: 32px;
	/* Define dimensoes fixas do controle de alternancia */
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 20;
	/* Fixa o toggle no canto superior direito da pagina */
	border-radius: 999px;
	/* Mantem formato de pildora no controle */
	border: 1px solid var(--toggle-border);
	/* Delimita o botao sem pesar no layout */
	background: var(--toggle-bg);
	/* Define fundo conforme o tema ativo */
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	/* Suaviza interacoes do controle */
}

.theme-toggle::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--text-primary);
	transform: translateY(-50%);
	transition: transform 0.25s ease, background-color 0.25s ease;
	/* Cria e anima o pino interno do toggle */
}

:root[data-theme='light'] .theme-toggle::before {
	transform: translate(26px, -50%);
	/* Desloca o pino para indicar estado ativo do modo claro */
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	transform: translateY(-2px);
	/* Indica interacao ativa sem distrair */
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 4px;
	/* Melhora visibilidade do foco no teclado */
}

header h1 {
	font-family: 'Bebas Neue', sans-serif;
	/* Usa fonte de destaque no titulo */
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	/* Escala o tamanho do titulo conforme largura da tela */
	letter-spacing: 0.06em;
	/* Aumenta o espacamento entre letras para estilo cinematografico */
	font-weight: 400;
	/* Mantem peso regular da fonte de titulo */
	margin-bottom: 0;
	/* Evita espaco duplicado com o margin do header */
}

.profiles {
	list-style: none;
	/* Remove marcadores da lista */
	display: grid;
	/* Organiza os perfis em grade */
	grid-template-columns: repeat(3, minmax(130px, 180px));
	/* Cria 3 colunas com largura minima e maxima */
	justify-content: center;
	/* Centraliza a grade dentro do container */
	gap: clamp(1rem, 2vw, 2rem);
	/* Define espaco entre itens com valor responsivo */
}

.profiles ol {
	list-style: none;
	/* Remove numeracao visual das listas internas sem perder semantica */
	margin: 0;
	/* Remove margem padrao para manter alinhamento do card */
	padding: 0;
	/* Remove recuo padrao para manter o grid consistente */
}

.profile {
	width: 100%;
	/* Faz o botao ocupar toda a largura disponivel do item */
	display: block;
	/* Faz o link de perfil ocupar toda a area do card */
	border: 0;
	/* Remove borda padrao do botao */
	background: transparent;
	/* Remove fundo padrao do botao */
	color: inherit;
	/* Herda a cor de texto do elemento pai */
	text-decoration: none;
	/* Remove sublinhado padrao de links */
	cursor: pointer;
	/* Mostra cursor de clique ao passar o mouse */
	padding: 0;
	/* Remove espaco interno padrao do botao */
	border-radius: 0.45rem;
	/* Arredonda os cantos para combinar com a imagem */
	transition: transform 0.25s ease;
	/* Anima movimento vertical em hover/foco */
}

.profile figure {
	margin: 0;
	/* Remove margem padrao do figure */
}

.profile img {
	width: 100%;
	/* Faz a imagem preencher a largura do card */
	aspect-ratio: 1 / 1;
	/* Mantem formato quadrado para todos os avatares */
	object-fit: cover;
	/* Recorta a imagem sem distorcer para preencher o quadro */
	border-radius: 0.45rem;
	/* Arredonda os cantos da imagem */
	border: 3px solid transparent;
	/* Reserva espaco de borda sem exibir cor inicialmente */
	background-color: var(--bg-soft);
	/* Define cor de fundo enquanto a imagem carrega */
	box-shadow: var(--card-shadow);
	/* Adiciona sombra para profundidade */
	transition: border-color 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
	/* Suaviza mudancas visuais no hover/foco */
}

.profile figcaption {
	margin-top: 0.9rem;
	/* Cria distancia entre imagem e nome do perfil */
	color: var(--text-secondary);
	/* Aplica cor secundaria no nome do perfil */
	font-size: 1rem;
	/* Define tamanho legivel para o texto do nome */
	font-weight: 600;
	/* Usa peso semibold para dar destaque moderado */
	transition: color 0.25s ease;
	/* Suaviza mudanca de cor no hover/foco */
}

.profile:hover,
.profile:focus-visible {
	transform: translateY(-4px);
	/* Move o card para cima ao interagir */
}

.profile:hover img,
.profile:focus-visible img {
	border-color: var(--text-primary);
	/* Mostra borda clara para destacar o perfil ativo */
	filter: brightness(1.05);
	/* Aumenta levemente o brilho da imagem */
	box-shadow: var(--card-shadow-hover);
	/* Intensifica sombra durante interacao */
}

.profile:hover figcaption,
.profile:focus-visible figcaption {
	color: var(--text-primary);
	/* Destaca o nome do perfil quando ativo */
}

.profile:focus-visible {
	outline: 3px solid var(--focus-ring);
	/* Exibe contorno de foco para navegacao por teclado */
	outline-offset: 6px;
	/* Afasta o contorno da borda para melhor visibilidade */
}

@media (min-width: 1440px) {
	body {
		padding: 3rem 2rem;
		/* Aumenta respiro nas bordas em telas amplas */
	}

	main {
		width: min(1180px, 100%);
		/* Expande area util para monitores grandes */
	}

	.profiles {
		grid-template-columns: repeat(3, minmax(180px, 230px));
		/* Amplia tamanho dos cards em telas maiores */
		gap: 2.4rem;
		/* Aumenta espacamento entre perfis para melhor leitura visual */
	}

	.profile figcaption {
		font-size: 1.08rem;
		/* Eleva levemente o tamanho do nome do perfil */
	}
}

@media (max-width: 1024px) {
	body {
		padding: 2rem 1.25rem;
		/* Ajusta espacos para tablets horizontais e notebooks menores */
	}

	main {
		width: min(760px, 100%);
		/* Reduz largura maxima para manter proporcao */
	}

	.profiles {
		grid-template-columns: repeat(3, minmax(120px, 170px));
		/* Mantem 3 colunas com cards menores */
		gap: 1.3rem;
		/* Diminui o espacamento para caber melhor na faixa */
	}
}

@media (max-width: 768px) {
	body {
		padding: 1.75rem 1rem;
		/* Reduz preenchimento geral em tablets verticais */
	}

	header h1 {
		font-size: clamp(1.9rem, 8vw, 2.8rem);
		/* Recalibra o titulo para nao quebrar em varias linhas */
		margin-bottom: 1.5rem;
		/* Aproxima o titulo da grade em telas medias */
	}

	.profiles {
		grid-template-columns: repeat(2, minmax(130px, 1fr));
		/* Muda para 2 colunas no tablet/celular grande */
		gap: 1.1rem;
		/* Ajusta espaco entre itens no novo grid */
	}

	.profiles li:last-child {
		grid-column: 1 / -1;
		/* Faz o ultimo perfil ocupar linha completa */
		justify-self: center;
		/* Centraliza o ultimo perfil na linha */
		width: min(170px, 100%);
		/* Mantem largura equilibrada para o item isolado */
	}
}

@media (max-width: 480px) {
	main {
		width: min(360px, 100%);
		/* Ajusta limite de largura para celulares comuns */
	}

	body {
		padding: 1.25rem 0.85rem;
		/* Reduz ainda mais o padding para aproveitar a tela */
	}

	header h1 {
		font-size: clamp(1.7rem, 9vw, 2.3rem);
		/* Mantem titulo forte sem extrapolar o viewport */
		letter-spacing: 0.04em;
		/* Diminui espacamento para melhorar encaixe do texto */
		margin-bottom: 1.25rem;
		/* Compacta o topo em celulares */
	}

	.profiles {
		grid-template-columns: repeat(2, minmax(110px, 1fr));
		/* Mantem 2 colunas adaptadas para telas estreitas */
		gap: 0.9rem;
		/* Diminui distancia entre cards para caber com conforto */
	}

	.profiles li:last-child {
		grid-column: 1 / -1;
		/* Faz o ultimo item ocupar a linha inteira */
		justify-self: center;
		/* Centraliza o ultimo item na linha */
		width: min(145px, 100%);
		/* Ajusta largura do item final para nao ficar grande demais */
	}

	.profile figcaption {
		font-size: 0.95rem;
		/* Reduz discretamente o tamanho do texto no mobile */
		margin-top: 0.7rem;
		/* Aproxima nome e avatar em telas pequenas */
	}

	.profile:focus-visible {
		outline-width: 2px;
		/* Diminui espessura do foco para evitar excesso visual */
		outline-offset: 4px;
		/* Aproxima o contorno para caber melhor na area util */
	}
}

@media (max-width: 360px) {
	.profiles {
		grid-template-columns: 1fr;
		/* Usa coluna unica em celulares muito pequenos */
	}

	.profiles li:last-child {
		width: 100%;
		/* Deixa o ultimo item seguir o mesmo fluxo dos demais */
	}

	.profile {
		max-width: 190px;
		/* Limita largura visual do card para manter harmonia */
	}

	.profiles li {
		display: grid;
		/* Permite centralizar cada item individualmente */
		place-items: center;
		/* Centraliza os perfis na unica coluna */
	}
}

@media (hover: none) {

	.profile:hover,
	.profile:focus-visible {
		transform: none;
		/* Evita salto vertical em dispositivos touch */
	}

	.profile:hover img,
	.profile:focus-visible img {
		box-shadow: var(--card-shadow);
		/* Mantem sombra estavel em interacoes por toque */
	}

	.profile:hover figcaption,
	.profile:focus-visible figcaption {
		color: var(--text-secondary);
		/* Impede mudanca de cor permanente apos toque */
	}
}