/* ==============================
   VARIÁVEIS GLOBAIS (tema e estilo)
   ============================== */
:root {
    --bg-main: #0f0f1a;
    /* Cor de fundo principal do site */
    --bg-section: #181828;
    /* Cor de fundo das seções */
    --color-primary: #7b6cff;
    /* Cor principal (botões, títulos, destaques) */
    --color-accent: #9f8fff;
    /* Cor secundária (hover, detalhes) */
    --text-light: #e0e0e0;
    /* Cor de texto clara (principal) */
    --text-muted: #a0a0b2;
    /* Cor de texto mais fraca (descrições, subtítulos) */
    --radius: 14px;
    /* Arredondamento padrão dos elementos */
    --shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    /* Sombra padrão (usada em cards e header) */
    --transition: 0.3s ease;
    /* Velocidade e tipo de transição */
}

/* ==============================
   RESET GLOBAL
   ============================== */
* {
    /* Remove margens e espaçamentos padrão dos elementos */
    margin: 0;
    padding: 0;
    /* Inclui bordas e paddings no cálculo total da largura/altura */
    box-sizing: border-box;
}

/* ==============================
   CONFIGURAÇÕES GERAIS DO BODY
   ============================== */
body {
    background: var(--bg-main);
    /* Fundo escuro principal */
    color: var(--text-light);
    /* Cor padrão do texto */
    font-family: "Poppins", Arial, sans-serif;
    /* Fonte moderna e legível */
    scroll-behavior: smooth;
    /* Rolagem suave ao clicar em links de navegação */
}

/* ==============================
   NAVBAR (cabeçalho fixo)
   ============================== */
header {
    position: fixed;
    /* Fixa no topo da página */
    top: 0;
    width: 100%;
    /* Ocupa toda a largura */
    background: rgba(15, 15, 26, 0.95);
    /* Fundo semi-transparente */
    backdrop-filter: blur(10px);
    /* Efeito de desfoque por trás */
    box-shadow: var(--shadow);
    /* Sombra sutil abaixo da navbar */
    z-index: 100;
    /* Mantém o header acima de outros elementos */
}

nav {
    display: flex;
    /* Alinha conteúdo em linha */
    justify-content: space-between;
    /* Espaça título e links */
    align-items: center;
    /* Centraliza verticalmente */
    padding: 1rem 2rem;
    /* Espaçamento interno */
    max-width: 1200px;
    /* Limita largura máxima */
    margin: auto;
    /* Centraliza o nav na tela */
}

nav h1 {
    color: var(--color-primary);
    /* Cor principal do nome */
    font-size: 1.6rem;
    /* Tamanho do texto */
    font-weight: 600;
    /* Deixa o nome em negrito */
    letter-spacing: 1px;
    /* Espaçamento entre letras */
}

.nav-links {
    list-style: none;
    /* Remove bolinhas da lista */
    display: flex;
    /* Coloca os links lado a lado */
    gap: 1.5rem;
    /* Espaçamento entre os links */
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    /* Remove sublinhado */
    font-weight: 500;
    transition: var(--transition);
    /* Adiciona suavidade nas transições */
}

nav a:hover {
    color: var(--color-primary);
    /* Muda a cor no hover */
}

/* ==============================
   HERO (seção inicial de destaque)
   ============================== */
#hero {
    height: 100vh;
    /* Ocupa a altura total da tela */
    display: flex;
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
    background: radial-gradient(circle at top right, #1f1f38, #0f0f1a);
    /* Gradiente bonito */
    text-align: center;
    animation: fadeIn 1.5s ease;
    /* Animação de entrada suave */
    padding: 0 1rem;
}

.hero-content h2 {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

.hero-content h2 span {
    background: linear-gradient(90deg, #7b6cff, #9f8fff);
    /* Gradiente de cor no texto */
    -webkit-background-clip: text;
    /* Recorta o fundo no formato do texto */
    -webkit-text-fill-color: transparent;
    /* Deixa o texto com o gradiente visível */
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Botão principal */
.btn {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn:hover {
    background: var(--color-accent);
    transform: scale(1.05);
    /* Leve aumento ao passar o mouse */
}

/* ==============================
   SEÇÕES GERAIS
   ============================== */
section {
    padding: 100px 20px;
    /* Espaçamento interno grande */
    text-align: center;
}

.container {
    max-width: 1000px;
    /* Limita largura do conteúdo */
    margin: auto;
    /* Centraliza na tela */
}

/* ==============================
   SEÇÃO SOBRE MIM
   ============================== */
#sobre h2 {
    color: var(--color-primary);
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

#sobre p {
    line-height: 1.7;
    /* Espaçamento entre linhas */
    color: var(--text-light);
}

/* ==============================
   SEÇÃO PROJETOS
   ============================== */
#projetos {
    background: var(--bg-section);
    /* Fundo levemente diferente */
}

#projetos h2 {
    color: var(--color-primary);
    margin-bottom: 2rem;
}

/* Grade de projetos (cards responsivos) */
.grid-projetos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Se adapta ao tamanho da tela */
    gap: 30px;
    /* Espaçamento entre os cards */
}

.card {
    background: #121222;
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform var(--transition);
}

.card:hover {
    transform: translateY(-8px);
    /* Sobe um pouco ao passar o mouse */
}

.card h3 {
    color: var(--color-primary);
    margin-bottom: 0.8rem;
}

.tecnologias img {
    margin: 4px;
    /* Espaçamento entre ícones */
}

/* Botão de contorno (usado nos cards) */
.btn-outline {
    display: inline-block;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius);
    margin-top: 1rem;
    text-decoration: none;
    transition: var(--transition);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: white;
}

/* ==============================
   SEÇÃO CONTATO
   ============================== */
#contato h2 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

#contato ul {
    list-style: none;
    font-size: 1.1rem;
}

#contato li {
    margin: 10px 0;
}

#contato a {
    color: var(--color-accent);
    text-decoration: none;
}

#contato a:hover {
    color: white;
}

/* ==============================
   RODAPÉ
   ============================== */
footer {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-section);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==============================
   ANIMAÇÃO FADE-IN
   ============================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================
   RESPONSIVIDADE (para telas menores)
   ============================== */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        /* Deixa o menu empilhado no mobile */
        gap: 1rem;
    }

    .hero-content h2 {
        font-size: 1.8rem;
        /* Diminui o tamanho do título */
    }

    .btn {
        padding: 0.6rem 1.2rem;
        /* Ajusta o tamanho do botão */
    }
}