/* ==================================================================
   VARIÁVEIS DE CORES E MEDIDAS (O "CORAÇÃO" DO NOSSO ESTILO)
   ================================================================== */
:root {
    /* Imagine essas variáveis como potes de tinta que recebem um nome.
       Se você quiser mudar a cor de todo o site no futuro, é só mudar aqui! */
    --cor-fundo: #0f172a;        /* Azul bem escuro, quase preto. Cor principal do fundo. */
    --cor-fundo-cartao: #1e293b; /* Uma cor um pouquinho mais clara para destacar as caixas. */
    --cor-texto-principal: #f8fafc; /* Branco levemente cinza, não cansa os olhos ao ler. */
    --cor-texto-secundario: #94a3b8; /* Um cinza claro focado para os comentários e descrições. */
    
    /* Cores de destaque (para os links e botões) */
    --cor-primaria: #3b82f6; /* Um azul vibrante do Github para destaques! */
    --cor-primaria-hover: #2563eb; /* Azul um pouco mais escuro para quando passarmos o mouse por cima. */
    
    --cor-whatsapp: #25D366; /* Verde oficial do WhatsApp */
    --cor-whatsapp-hover: #128C7E;
    
    --cor-borda: rgba(255, 255, 255, 0.1); /* Uma linha divisória quase transparente para dar aquele tom chique de 'vidro'. */
}

/* ==================================================================
   REGRAS GERAIS PARA A RESETAR PADRÕES DO NAVEGADOR
   ================================================================== */
* {
    margin: 0; /* Tiramos toda a margem automática do navegador (aquele espaço vazio inútil) */
    padding: 0; /* Tiramos os espaços internos automáticos também */
    box-sizing: border-box; /* Isso faz com que as bordas e espaços não aumentem o tamanho final do elemento, salvador de vidas! */
    font-family: 'Inter', sans-serif; /* Aplicamos a fonte moderna do Google em literalmente tudo */
}

body {
    background-color: var(--cor-fundo); /* Jogamos a cor de fundo (aquele pote azul escuro) */
    color: var(--cor-texto-principal); /* Aplicamos o texto branco/cinza claro nela */
    line-height: 1.6; /* Aumentamos um pouco o espaço entre as linhas de texto para facilitar a leitura */
}

/* ==================================================================
   ESTILIZAÇÃO DO CABEÇALHO (ONDE FICA SUA FOTO E CONTATOS)
   ================================================================== */
.perfil-header {
    /* Vamos organizar as coisas do cabeçalho alinhadas e no centro da tela */
    display: flex; /* "Display flex" é um poder mágico que permite empilhar e alinhar elementos de forma muito fácil */
    justify-content: center; /* Centraliza tudo horizontalmente (direita/esquerda) */
    padding: 4rem 1rem; /* Dá um grande espaço em cima e embaixo, e um pequeno dos lados para não colar nas bordas do celular */
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); /* Criação de um Degradê legal no fundo do cabeçalho */
    border-bottom: 1px solid var(--cor-borda); /* Aquela linha super discreta na divisão */
}

.container-perfil {
    text-align: center; /* Todo o texto dentro dessa área vai ficar centralizado */
    max-width: 600px; /* Definindo um limite de largura para não ficar muito largo no computador */
}

.avatar-img {
    width: 150px; /* Largura exata da sua foto */
    height: 150px; /* Altura exata da sua foto, deixando um quadrado perfeito */
    border-radius: 50%; /* O grande truque de mágica: border-radius de 50% transforma esse quadrado perfeito num CÍRCULO! */
    border: 4px solid var(--cor-primaria); /* Colocamos uma moldura azul envolta com 4 pixels de espessura */
    margin-bottom: 1.5rem; /* Um pouco de espaço embaixo da imagem antes do nome aparecer */
    /* Uma sombra legal envolvendo a imagem pra dar um super destaque! */
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); 
}

.nome {
    font-size: 2.5rem; /* Um tamanho gigantão pro seu nome */
    font-weight: 800; /* Bem Grosso (Negrito) */
    margin-bottom: 0.5rem;
}

.cargo {
    color: var(--cor-primaria); /* Usamos a cor azul para o Cargo destacar do branco do Nome */
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase; /* Forçamos as letras a ficarem todas MAIÚSCULAS independente de como escrevemos no html */
    letter-spacing: 2px; /* Dá um espacinho entre cada letra pra ficar mais premium */
}

.bio {
    color: var(--cor-texto-secundario); /* Cor em cinza clarinho pra bio pra não ofuscar as outras infos */
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* ==================================================================
   OS BOTÕES DE CONTATO (WHATSAPP, E-MAIL, GITHUB)
   ================================================================== */
.contatos {
    display: flex; 
    gap: 1rem; /* Este 'gap' é uma maravilha, ele simplesmente diz qual é a distância/Buraco entre os botões */
    justify-content: center;
    flex-wrap: wrap; /* Caso a tela do celular seja muuito pequena, ele avisa: "Pode empurrar botões pra baixo se não couber" */
}

.btn {
    display: inline-flex; /* Alterado de inline-block para flex-box para alinhar os ícones de lado perfeitamente */
    align-items: center; /* Garante que o ícone fique centralizado verticalmente em relação ao texto */
    gap: 0.5rem; /* O tal do Gap, que aqui afasta o ícone da escrita para não ficar colado */
    padding: 0.75rem 1.5rem; /* Cima/Baixo e Direita/Esquerda. Define o tamanho do "Enchimento" dentro do botão ao redor do texto */
    border-radius: 8px; /* Bordas um pouco arredondadinhas pro botão não ficar um quadrado duro */
    text-decoration: none; /* Tira o sublinhado amarelo/azul feio que todo link do navegador tem como padrão */
    font-weight: 600;
    color: white; /* O texto do botão vai sempre ser Branco puro */
    transition: all 0.3s ease; /* Animação mágica! Quando a cor mudar, vai demorar 0.3 segundos fazendo uma transição suave em vez de piscar seco! */
}

/* Deixamos o ícone com um tamanho um pouquinho maior que a fonte para atrair o olhar */
.btn i {
    font-size: 1.25rem;
}

/* Criamos estilos de botões separados usando as cores que definimos no nosso Pote de Variáveis ali no Topo */
.btn-whatsapp { background-color: var(--cor-whatsapp); }
.btn-whatsapp:hover { background-color: var(--cor-whatsapp-hover); transform: translateY(-3px); } /* O hover é o momento que passa o mouse em cima. O Transform move ele pra cima (-3px) criando efeito de flutuar! */

.btn-email { background-color: #64748b; }
.btn-email:hover { background-color: #475569; transform: translateY(-3px); }

.btn-github { background-color: #333; }
.btn-github:hover { background-color: #000; transform: translateY(-3px); }

/* ==================================================================
   AREA DOS PROJETOS (A LISTA DE REPOSITÓRIOS DO GITHUB)
   ================================================================== */
.projetos-section {
    padding: 4rem 1rem;
}

.container {
    max-width: 1000px;
    margin: 0 auto; /* O '0 auto' centraliza o balde invisível gigante das coisas no meio da tela perfeitamente */
}

.secao-titulo {
    text-align: center;
    margin-bottom: 3rem;
}

.secao-titulo h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.secao-titulo p {
    color: var(--cor-texto-secundario);
}

.carregando {
    text-align: center;
    color: var(--cor-primaria);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Aqui criamos uma "Grade" (Grid). Muito melhor que Flexbox para coisas de linhas e colunas exatas. */
.grid-repositorios {
    display: grid;
    /* Essa linha enorme e confusa abaixo basicamente diz: "Crie colunas de no mínimo 300px. Se a tela esticar, estique elas também. Se não couber as três colunas na tela, jogue as da direita pra linha de baixo!" Isso é o MÁXIMO da Responsividade Automática! */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem; /* Espaço entre os cartões na grade */
}

/* ==================================================================
   O CARD DE CADA REPOSITÓRIO FOCADO EM GLASSMORPHISM (Efeito Vidro)
   ================================================================== */
.repo-card {
    background-color: var(--cor-fundo-cartao);
    border: 1px solid var(--cor-borda); /* Borda transparentezinha */
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column; /* Organiza os itens dentro do cartão um embaixo do outro, e não do lado */
    transition: all 0.3s ease; /* Transição macia de animação novamente */
}

/* Efeito de passar o mouse em cima do cartão inteiro! */
.repo-card:hover {
    transform: translateY(-5px); /* Dá aquele pulinho */
    box-shadow: 0 10px 25px rgba(0,0,0, 0.5); /* E lança uma sombra pra parecer que descolou do fundo, bem 3D! */
    border-color: var(--cor-primaria); /* Acende uma borda azul envolta! Premium! */
}

.repo-nome {
    font-size: 1.25rem;
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
}

.repo-desc {
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1; /* Esse flex-grow: 1 diz pra descrição preencher qualquer espaço em branco livre que sobrar, empurrando o botão de ver projeto sempre pro final do cartão! */
}

/* Essa parte cria os "Pills" (pílulas de linguagens). Ex: "HTML - CSS - Javascript" */
.repo-linguagem {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--cor-primaria);
    border-radius: 20px;
    margin-bottom: 1rem;
}

.btn-projeto {
    display: block; /* Ocupa a linha inteira */
    text-align: center;
    border: 1px solid var(--cor-borda);
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--cor-texto-principal);
    text-decoration: none; /* Chega de linha azul sublinhada em link! */
    transition: 0.3s;
}

.btn-projeto:hover {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

/* ==================================================================
   RODAPÉ (Footer)
   ================================================================== */
footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    margin-top: 2rem; /* Separa o final da lista dos projetos pra baixo */
}