/* ==========================================
   1. VARIÁVEIS E RESET 
   ========================================== */
:root {
    --cor-bg-preto: #000000;
    --cor-bg-cinza: #131313;
    --cor-vermelho: #A71818;
    --cor-vermelho-claro: #9E3F3F;
    --cor-cinza-claro: #919DAB;
    --cor-cinza-escuro: #27302E;
    --cor-branco: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho final do elemento */
}

html {
    font-size: 62.5%; /* Define 1rem = 10px para facilitar os cálculos de proporção */
    scroll-behavior: smooth; /* Animação de rolagem suave para links âncora */
    scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */
}

body {
    font-size: 1.6rem; 
    font-family: 'DM Sans', sans-serif; 
    line-height: 1.5;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* Impede a rolagem horizontal indesejada */
    -ms-overflow-style: none; /* Oculta a barra de rolagem no Internet Explorer e Edge */
}

::-webkit-scrollbar {
    display: none; /* Oculta a barra de rolagem no Chrome, Safari e Opera */
}

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

ul {
    list-style: none;
}

p {
    font-size: 2rem;
}

/* ==========================================
   2. ESTILOS GLOBAIS E COMPONENTES
   ========================================== */
.tema-escuro {
    background-color: var(--cor-bg-preto);
    color: var(--cor-branco);
}

/* Compensação para links âncora com menu fixo */
section {
    scroll-margin-top: 8rem; /* Cria um respiro invisível no topo da seção para não ser coberta pelo menu fixed */
}

/* === Botões Padrões === */
.btn {
    color: var(--cor-branco);
    background-color: var(--cor-vermelho);
    padding: 0.8rem 2.4rem;
    border: 2px solid var(--cor-vermelho);
    border-radius: 0.8rem;
    font-size: 1.8rem;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease; /* Suaviza a transição de cores nos estados de hover */
}

.btn:hover {
    background-color: var(--cor-bg-preto);
}

.btn.btn-secundario {
    background-color: var(--cor-bg-preto); 
}

.btn.btn-secundario:hover {
    background-color: var(--cor-vermelho);
}

/* ==========================================
   3. CABEÇALHO E NAVEGAÇÃO (Mobile)
   ========================================== */
.cabecalho-principal {
    background-color: var(--cor-bg-preto);
    padding: 0 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* Fixa o cabeçalho no topo da janela durante a rolagem */
    top: 0;
    z-index: 1000; /* Garante que o cabeçalho fique acima do conteúdo da página */
}

.logo-container {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 30rem; 
}

.logo-img {
    filter: invert(1) brightness(2); /* Inverte a cor da imagem para uso em fundo preto */
    height: 6rem;
    width: max-content;
    object-fit: contain; /* Mantém a proporção original da imagem dentro do container */
}

.nav-oculta-mobile {
    display: none; /* Oculta o menu por padrão na visualização mobile */
}

.nav-oculta-mobile.ativo {
    display: flex; /* Exibe o menu quando a classe .ativo é adicionada via JS */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed; /* Sobrepõe o menu a toda a tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--cor-bg-preto); 
    z-index: 2000; /* Garante que o menu aberto fique acima do próprio cabeçalho sticky */
}

.nav-oculta-mobile.ativo .lista-links {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 4rem; /* Define o espaçamento vertical entre os links do menu */
}

.link-nav {
    font-weight: 500;
    transition: color 0.3s ease;
}

.link-nav:hover {
    color: var(--cor-vermelho); 
}

.menu-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.8rem;
    border-radius: 0.8rem;
    transition: background-color 0.3s ease;
}

.menu-toggle:hover {
    background-color: var(--cor-bg-cinza);
}

.icone-menu {
    width: 3.2rem;
    height: 3.2rem;
}

.btn-fechar {
    position: absolute; /* Posiciona o botão no canto superior direito do menu overlay */
    top: 1.6rem;
    right: 2.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.8rem;
    border-radius: 0.8rem;
    transition: background-color 0.3s ease;
}

.btn-fechar:hover {
    background-color: var(--cor-bg-cinza); 
}

.icone-fechar {
    width: 3.2rem;
    height: 3.2rem;
}

/* ==========================================
   4. SEÇÕES DO PORTFÓLIO (Mobile)
   ========================================== */

/* === INÍCIO (Hero) === */
.secao-hero {
    background-color: var(--cor-bg-cinza);
    display: flex;
    flex-direction: column-reverse; /* Inverte a ordem: imagem acima do texto no mobile */
    align-items: center;
    text-align: center;
    padding: 4rem 1rem; 
    gap: 2rem;
}

.titulo {
    font-size: 3.7rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--cor-vermelho), var(--cor-vermelho-claro));
    -webkit-background-clip: text; /* Aplica o gradiente apenas à área desenhada pelo texto */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Torna a cor base invisível para exibir o gradiente de fundo */
    color: transparent;
}

.subtitulo {
    margin-bottom: 1rem;
}

/* === Moldura com Gradiente Radial (Mobile) === */
.foto-moldura {
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 1 / 1; /* Força o container a ser um quadrado perfeito */
    border-radius: 50%; /* Transforma o quadrado em círculo */
    padding: 1.5rem; /* Cria o espaço que funcionará como a espessura da borda colorida */
    background: radial-gradient(circle, var(--cor-bg-preto) 0%, var(--cor-vermelho) 100%); /* Gradiente radial do centro para a borda */
    display: flex;
    justify-content: center;
    align-items: center;
}

.foto-perfil {
    width: 100%; 
    height: 100%; 
    border-radius: 50%; /* Garante que a imagem interna também seja circular */
    border: none;
    object-fit: cover; /* Preenche o círculo cortando excessos sem distorcer a imagem */
}

.btn, .btn-curriculo {
    background-color: var(--cor-vermelho);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 2.4rem;
    border-radius: 0.8rem;
}

/* === SOBRE MIM === */
.secao-sobre {
    background-color: var(--cor-bg-preto);
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: justify;
    padding: 6rem 5rem;
    gap: 2rem;
}

/* === HABILIDADES === */
.secao-habilidades {
    padding: 6rem 2.4rem;
    background-color: var(--cor-bg-cinza);
}

.titulo-secao {
    padding-bottom: 1rem;
}

.grid-habilidades {
    display: grid;
    grid-template-columns: 1fr; /* Exibe 1 coluna no formato mobile */
    gap: 2.4rem;
}

.card-habilidade {
    background-color: var(--cor-bg-cinza);
    padding: 3.2rem 2.4rem;
    border-radius: 1.2rem;
    border: 1px solid var(--cor-cinza-escuro);
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card-habilidade:hover {
    transform: translateY(-5px); /* Move o card para cima criando efeito de elevação */
    border-color: var(--cor-vermelho);
}

.card-habilidade i, 
.icone-destaque {
    font-size: 4.8rem;
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 1.6rem;
    color: var(--cor-branco); 
    display: block;
        margin: 0 auto 1.6rem auto;
        line-height: 1;
}

.titulo-card {
    font-size: 2rem;
    color: var(--cor-branco);
    margin-bottom: 1.2rem;
}

.texto-card {
    font-size: 1.6rem;
    color: var(--cor-cinza-claro);
    line-height: 1.6;
    text-align: justify;
}

/* === PROJETOS === */
.secao-projetos {
    padding: 6rem 2.4rem;
    background-color: var(--cor-bg-preto);
}

.grid-projetos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.2rem;
}

.card-projeto {
    background-color: var(--cor-bg-preto);
    border-radius: 1.2rem;
    overflow: hidden; /* Oculta as quinas da imagem que ultrapassam o raio da borda do card */
    border: 1px solid var(--cor-cinza-escuro);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card-projeto:hover {
    transform: translateY(-5px);
    border-color: var(--cor-vermelho);
}

.imagem-projeto {
    width: 100%;
    height: 20rem;
    object-fit: cover; /* Ajusta a proporção da imagem ao container */
}

.info-projeto {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que o texto ocupe todo o espaço vertical disponível, empurrando o rodapé do card */
    gap: 1.6rem;
}

.titulo-projeto {
    font-size: 2.2rem;
    color: var(--cor-branco);
}

.descricao-projeto {
    font-size: 1.6rem;
    color: var(--cor-cinza-claro);
    line-height: 1.5;
    text-align: justify;
}

.botoes-projeto {
    margin-top: auto; /* Força os botões para a base inferior do card */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem;
    gap: 1rem;
    text-align: justify;
}

/* === CONTATO === */
.secao-contato {
    background-color: var(--cor-bg-cinza);
    padding: 6rem 2.4rem;
}

.secao-contato .titulo-secao {
    text-align: left;
    margin-bottom: 4rem;
}

.grid-contato {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

.info-contato-lista {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    font-style: normal; /* Sobrescreve o estilo itálico padrão renderizado na tag HTML <address> */
}

.card-contato {
    background-color: var(--cor-bg-preto);
    padding: 1.6rem 2.4rem;
    border-radius: 1.2rem;
    border: 1px solid var(--cor-cinza-escuro);
    display: flex;
    align-items: center;
    gap: 1.6rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card-contato:hover {
    transform: translateY(-3px);
    border-color: var(--cor-vermelho);
}

.icone-contato, .card-contato i {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 3.2rem;
    color: var(--cor-branco);
}

.dados-contato {
    display: flex;
    flex-direction: column;
}

.titulo-contato {
    font-size: 1.4rem;
    color: var(--cor-cinza-claro);
    margin-bottom: 0.4rem;
}

.link-contato, .dados-contato p, .dados-contato a {
    font-size: 1.6rem;
    color: var(--cor-branco);
    font-weight: 500;
    transition: color 0.3s ease;
}

.link-contato:hover, .dados-contato a:hover {
    color: var(--cor-vermelho);
}

/* Formulário de Contato */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--cor-bg-preto);
    padding: 3.2rem 2.4rem;
    border-radius: 1.2rem;
    border: 1px solid var(--cor-cinza-escuro);
}

.linha-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem; 
}

.campo-form {
    width: 100%;
    padding: 1.6rem;
    background-color: var(--cor-bg-cinza);
    border: 1px solid var(--cor-cinza-escuro);
    border-radius: 0.8rem;
    color: var(--cor-branco);
    font-family: inherit;
    font-size: 1.6rem;
    transition: border-color 0.3s ease;
}

.campo-form:focus {
    outline: none; /* Remove a borda azul/preta padrão do navegador ao clicar no input */
    border-color: var(--cor-vermelho);
}

.texto-area {
    resize: vertical; /* Permite que o usuário redimensione o textarea apenas na altura */
    min-height: 12rem;
}

.label-form {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cor-branco);
    font-size: 1.6rem;
}

/* ==========================================
   5. RODAPÉ E FLUTUANTES
   ========================================== */
.rodape-site {
    background-color: var(--cor-bg-preto);
    padding: 3.2rem 2.4rem;
    text-align: center;
    border-top: 1px solid var(--cor-cinza-escuro);
}

.creditos-rodape {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.texto-direitos {
    font-size: 1.6rem;
    color: var(--cor-branco);
    font-weight: 500;
}

.texto-adaptacao {
    font-size: 1.4rem;
    color: var(--cor-cinza-claro);
}

/* Botão Voltar ao Topo */
.btn-flutuante {
    position: fixed; /* Mantém o botão parado na tela, independentemente da rolagem */
    bottom: 3.2rem;
    right: 2.4rem;
    background-color: var(--cor-vermelho);
    border: 2px solid var(--cor-vermelho);
    border-radius: 50%;
    width: 5.6rem;
    height: 5.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 999; /* Garante que o botão sobreponha o conteúdo comum */
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.btn-flutuante:hover {
    background-color: var(--cor-bg-preto);
}

.btn-flutuante.oculto {
    opacity: 0; 
    pointer-events: none; /* Desativa interações de clique enquanto o elemento está invisível */
    transform: translateY(20px); /* Desloca o botão levemente para baixo ao desaparecer */
}

.btn-flutuante .icone-botao {
    width: 3.2rem;
    height: 3.2rem;
}

/* ==========================================
   6. MEDIA QUERIES (Responsividade)
   ========================================== */

/* === TABLETS (768px a 1023px) === */
@media (min-width: 768px) {
    /* Ajuste de Espaçamento Geral */
    .secao-hero, .secao-sobre, .secao-habilidades, 
    .secao-projetos, .secao-contato {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    /* INÍCIO (Hero) */
    .secao-hero {
        flex-direction: row; /* Alinha texto e imagem lado a lado no tablet */
        text-align: left;
        justify-content: space-between;
    }

    .hero-texto {
        max-width: 50%;
    }

    .hero-imagem .foto-perfil {
        max-width: 28rem;
    }

    .secao-hero .btn {
        display: inline-flex;
    }

    /* HABILIDADES E PROJETOS */
    .grid-habilidades, .grid-projetos {
        grid-template-columns: repeat(2, 1fr); /* Divide o layout do grid em 2 colunas iguais */
    }

    .btn {
        color: var(--cor-branco);
        background-color: var(--cor-vermelho);
        padding: 0.8rem 2.4rem;
        border: 2px solid var(--cor-vermelho);
        border-radius: 0.8rem;
        font-size: 1.8rem;
        font-weight: 500;
        transition: background-color 0.3s ease, color 0.3s ease;
        white-space: nowrap; /* Previne que o texto interno do botão quebre para a linha de baixo */
    }

    .botoes-projeto {
        flex-wrap: wrap; /* Permite que os elementos ocupem múltiplas linhas se o espaço faltar */
        justify-content: center;
        gap: 1.2rem;
    }

    .card-projeto .btn {
        padding: 0.8rem 1rem;
        font-size: 1.4rem; 
        flex: 1; /* Faz com que os botões cresçam igualmente para preencher o espaço horizontal */
        justify-content: center;
    }

    /* CONTATO */
    .linha-inputs {
        flex-direction: row; /* Coloca os inputs curtos lado a lado no tablet */
    }
    
    .linha-inputs .grupo-input {
        width: 100%;
    }
}

/* === DESKTOPS (PCs e Notebooks - a partir de 1024px) === */
@media (min-width: 1024px) {
    /* ESPAÇAMENTO GERAL */
    .secao-hero, .secao-sobre, .secao-habilidades, 
    .secao-projetos, .secao-contato {
        padding-left: 12vw; /* Define margens relativas à largura da janela (viewport width) */
        padding-right: 12vw;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    /* CABEÇALHO E MENU HORIZONTAL */
    .cabecalho-principal {
        padding: 0.1rem 3vw; 
        height: 6vh;
    }

    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center; 
        width: auto;
        max-width: 40rem;
    }

    .logo-img {
        filter: invert(1) brightness(2);
        height: 8rem; 
        width: auto;
        object-fit: contain;
    }

    .menu-toggle, .nav-oculta-mobile .btn-fechar {
        display: none; /* Oculta ícones de abrir/fechar menu exclusivos do layout mobile */
    }

    .nav-oculta-mobile {
        display: block; /* Torna o menu sempre visível em telas grandes */
        position: static; /* Restaura o fluxo normal do elemento para exibir junto com o cabeçalho */
        height: auto;
        width: auto;
        background-color: transparent; 
    }

    .nav-oculta-mobile .lista-links {
        display: flex;
        flex-direction: row; /* Alinha os links do menu lado a lado */
        align-items: center;
    }

    .link-nav {
        font-size: 2rem; 
        font-weight: 500;
        padding: 0.8rem 1.6rem;
        border-radius: 0.8rem;
        transition: color 0.3s ease, background-color 0.3s ease; 
    }

    .link-nav:hover {
        color: var(--cor-vermelho); 
        background-color: var(--cor-bg-cinza);
    }

    /* INÍCIO (Hero) */
    .secao-hero {
        flex-direction: row; 
        text-align: left; 
        justify-content: space-between;
    }

    .titulo {
        font-size: 5.6rem; 
        line-height: 1.2;
    }

    .hero-texto {
        max-width: 45%; 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.8rem;
    }

    .subtitulo {
        margin-bottom: 0;
        font-size: 2rem;
    }

    .hero-imagem {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .foto-moldura {
        max-width: 38rem; /* Aumenta o tamanho limite do container da foto no Desktop */
        padding: 1.5rem; /* Mantém a espessura da borda da moldura */
    }

    /* SOBRE MIM */
    .sobre-conteudo {
        max-width: 80rem; /* Limita a largura do parágrafo para não dificultar a leitura (line length) */
    }

    /* HABILIDADES E PROJETOS */
    .grid-habilidades {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
    }

    .grid-projetos {
        grid-template-columns: repeat(2, 1fr);
        gap: 4.8rem;
    }

    .card-projeto .btn {
        padding: 1.2rem 2.4rem;
        font-size: 1.6rem;
    }

    /* CONTATO */
    .grid-contato {
        grid-template-columns: 1fr 1.5fr; /* Distribui as colunas de contato, sendo o formulário maior (1.5x) */
        gap: 8rem;
        align-items: start;
    }
}