/* ============================================================
   1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS
   Centralizamos as cores e espaçamentos para facilitar mudanças.
   ============================================================ */
:root {
    --primary-color: #2563eb;    /* Azul para botões e links */
    --dark-color: #0f172a;       /* Cor para o texto principal */
    --light-bg: #f1f5f9;         /* Fundo cinza bem claro */
    --white: #ffffff;            /* Cor dos cards e header */
    --transition: 0.3s ease;     /* Suavidade nas animações */
}

/* RESET: Remove comportamentos padrão dos navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding não aumente o tamanho do elemento */
}

html {
    scroll-behavior: smooth; /* Rolagem suave ao clicar no menu */
}

body {
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
    background-color: var(--light-bg);
    color: var(--dark-color);
}

/* ============================================================
   2. HEADER (FLEXBOX UNIDIMENSIONAL)
   ============================================================ */
header {
    background-color: var(--white);
    padding: 1rem 5%;
    display: flex;             /* Ativa o modo Flexbox */
    justify-content: space-between; /* Logo na esquerda, Nav na direita */
    align-items: center;       /* Alinha verticalmente os itens ao centro */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;          /* Fixa o menu no topo */
    top: 0;
    z-index: 1000;
}

nav ul {
    display: flex;             /* Transforma a lista em linha */
    list-style: none;          /* Remove os marcadores de lista */
    gap: 20px;                 /* Espaçamento moderno entre os itens */
}

nav a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    transition: var(--transition);
}

nav a:hover {
    color: var(--primary-color);
}

/* ============================================================
   3. SEÇÕES GERAIS E SOBRE
   ============================================================ */
section {
    padding: 60px 5%;
    max-width: 1200px;
    margin: 0 auto;           /* Centraliza o container da seção */
}

#sobre {
    display: flex;            /* Usa flex para organizar texto e imagem */
    flex-direction: column;   /* Empilha os itens verticalmente */
    align-items: center;      /* Centraliza horizontalmente */
    text-align: center;
}

#sobre img {
    width: 150px;
    height: 150px;
    border-radius: 50%;       /* Torna a foto circular */
    margin-bottom: 20px;
    border: 4px solid var(--white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ============================================================
   4. GALERIA DE PROJETOS (FLEXBOX MULTI-LINHA)
   Aqui substituímos o Grid pelo Flexbox com 'wrap'.
   ============================================================ */

h2 {
    text-align: center; 
    margin-bottom: 30px;
}

.projetos-container {
    display: flex;            /* Ativa o Flexbox */
    flex-wrap: wrap;          /* Permite que os itens quebrem para a próxima linha */
    justify-content: center;  /* Centraliza os cards se sobrar espaço */
    gap: 25px;                /* Espaço entre os cards */
    margin-top: 30px;
}

.card-projeto {
    background: var(--white);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    
    /* LÓGICA DO TAMANHO DOS CARDS:
       flex-grow: 1 (O card pode crescer para ocupar o espaço)
       flex-shrink: 1 (O card pode encolher se necessário)
       flex-basis: 300px (O tamanho base ideal é 300px) 
    */
    flex: 1 1 300px; 
    
    max-width: 400px;         /* Impede que o card fique largo demais em telas grandes */
    transition: transform var(--transition);
}

.card-projeto:hover {
    transform: translateY(-8px); /* Efeito de flutuar ao passar o mouse */
}

/* ============================================================
   5. FORMULÁRIO DE CONTATO (ESTILO MODERNIZADO)
   ============================================================ */

/* Container do Formulário */
form {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;       /* Bordas mais arredondadas para um ar moderno */
    max-width: 550px;
    margin: 40px auto;         /* Centraliza o form na tela */
    display: flex;             /* Flexbox para empilhar os campos */
    flex-direction: column;    /* Alinha label e input um em cima do outro */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Sombra suave e profunda */
    border: 1px solid #e2e8f0; /* Borda muito fina para definição */
}

/* Título dentro da seção de contato (opcional no CSS) */
#contato h2 {
    margin-bottom: 30px;
    color: var(--dark-color);
}

/* Agrupamento de cada campo (Label + Input) */
.campo {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;       /* Espaço entre um campo e outro */
}

form label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--secondary-color);
    text-transform: uppercase; /* Estilo de formulários de alto nível */
    letter-spacing: 0.5px;
}

/* Estilo para Inputs e Textarea */
form input, 
form textarea {
    padding: 14px;
    border: 2px solid #edf2f7; /* Borda clara por padrão */
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background-color: #f8fafc;
    transition: all var(--transition); /* Suaviza a mudança de cor e borda */
    outline: none;             /* Remove a borda azul padrão do navegador */
}

/* EFEITO DE FOCO: Onde a mágica acontece */
form input:focus, 
form textarea:focus {
    border-color: var(--primary-color); /* Muda a cor da borda ao clicar */
    background-color: var(--white);    /* Fica branco para destacar */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); /* "Aura" azul suave em volta */
}

/* Ajuste específico para a área de texto */
form textarea {
    resize: vertical;          /* Permite aumentar apenas a altura */
    min-height: 120px;
}

/* BOTÃO DE ENVIO */
form button {
    margin-top: 10px;
    padding: 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s active, background var(--transition);
}

form button:hover {
    background-color: #1d4ed8; /* Azul mais profundo */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Efeito de "clique" no botão */
form button:active {
    transform: scale(0.98);    /* O botão "encolhe" levemente ao clicar */
}

/* ============================================================
   6. RODAPÉ E RESPONSIVIDADE (MOBILE FIRST)
   ============================================================ */
footer {
    text-align: center;
    padding: 30px;
    background-color: var(--dark-color);
    color: white;
    margin-top: 40px;
}

/* Ajustes para telas pequenas (Mobile) */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Menu vai para baixo do nome no celular */
        padding: 1rem;
    }

    nav ul {
        margin-top: 15px;
        gap: 15px;
    }

    .card-projeto {
        flex-basis: 100%;       /* No celular, o card ocupa a largura toda */
    }
}

/* Estilos para o Dark Mode baseados nas variáveis existentes */
body.dark-theme {
    --light-bg: #0f172a;    /* Fundo escuro */
    --dark-color: #f1f5f9;  /* Texto claro */
    --white: #1e293b;       /* Cards e Header um pouco mais claros que o fundo */
    --primary-color: #3b82f6; /* Um azul levemente mais vibrante para contraste */
}

body.dark-theme footer {
    background-color: #020617; /* Um preto quase puro para separar do resto */
    color: #f1f5f9;            /* Garante que o texto fique claro */
}

/* Estilo para o botão de tema no header */
#btn-tema {
    padding: 5px 12px;
    cursor: pointer;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
}