/* Importação de fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&display=swap');

/* Reset Básico para consistência entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    background-color: #0A0A0A; /* Fundo preto bem escuro para o corpo */
    color: #F8F8F8; /* Texto branco-acinzentado */
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
    -webkit-font-smoothing: antialiased; /* Suavização de fontes para WebKit */
    scroll-behavior: smooth; /* Rolagem suave para âncoras */
}

a {
    color: #F8F8F8;
    text-decoration: none;
    transition: color 0.3s ease; /* Transição suave para links */
}

a:hover {
    color: #BBBBBB; /* Tom de cinza mais claro ao passar o mouse */
}

ul {
    list-style: none;
}

/* --- Header --- */
.header {
    background-color: #1A1A1A; /* Preto mais claro para o cabeçalho */
    color: #F8F8F8;
    padding: 1.2rem 4rem; /* Um pouco mais de padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Fixa o cabeçalho no topo */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); /* Sombra mais pronunciada */
    transition: background-color 0.3s ease;

}

.logo {
    font-size: 2.2rem; /* Logo um pouco maior */
    font-weight: 800; /* Mais negrito */
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    color: #F8F8F8; /* Cor do logo */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no logo */
    transition: color 0.3s ease; /* Transição suave para a cor do logo */

}

.nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Permite que os links se ajustem em várias linhas se necessário */

}

.nav ul li {
    margin-left: 3.5rem; /* Mais espaçamento entre links */
    position: relative; /* Necessário para o ::before do underline */
    transition: transform 0.3s ease; /* Transição suave para hover */

}

.nav ul li a {
    font-weight: 400;
    font-size: 1.2rem; /* Links um pouco maiores */
    position: relative;
    padding-bottom: 8px; /* Espaço para o underline animado */
    overflow: hidden; /* Para esconder o ::before */
    color: #F8F8F8; /* Cor do link */
    transition: color 0.3s ease; /* Transição suave para a cor do link */

}

.nav ul li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px; /* Sublinhado mais grosso */
    background: #F8F8F8;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1; /* Coloca o underline atrás do texto */

}

.nav ul li a:hover::before {
    transform: scaleX(1);

}

/* --- Animações Gerais para Elementos que Entram na Viewport --- */
/* Estes estilos devem ser complementados com JavaScript para adicionar/remover a classe 'visible' */
.hidden {
    opacity: 0;
    transform: translateY(40px); /* Menos deslocamento */
}

.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transição mais suave */
    animation: fadeInDown 0.8s ease-out; /* Animação ao entrar na viewport */
}

/* Keyframes para as animações */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); } /* Escala um pouco mais */
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInFromLeft {
    from { transform: translateX(-120%); opacity: 0; } /* Vem de mais longe */
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInText {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Ajuste para Links de Âncora (para evitar que o header fixo cubra o conteúdo) --- */
/* Este é crucial para o comportamento correto dos botões de navegação */
section::before {
    content: "";
    display: block;
    height: 120px; /* Deve ser maior ou igual à altura do seu header */
    margin-top: -120px; /* O mesmo valor, mas negativo */
    visibility: hidden;
    pointer-events: none;

}


/* --- Seções Gerais --- */
section {
    padding: 10rem 4rem; /* Mais padding superior e lateral */
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Importante para o parallax e elementos que saem da tela */
    background-color: #0A0A0A; /* Fundo preto bem escuro para as seções */
    color: #F8F8F8; /* Texto branco-acinzentado */
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no texto */
    padding-top: 7rem; /* Mais espaço no topo para o cabeçalho fixo */
    padding-bottom: 5rem; /* Mais espaço na parte inferior */
    margin-top: 0; /* Remove o espaço extra no topo */
    margin-bottom: 0; /* Remove o espaço extra na parte inferior */
    border-bottom: 1px solid #333; /* Linha de separação mais sutil */

}

h2 {
    font-size: 4rem; /* Títulos de seção maiores */
    margin-bottom: 3.5rem;
    font-weight: 800; /* Mais negrito */
    text-transform: uppercase;
    letter-spacing: 5px; /* Mais espaçamento */
    color: #E0E0E0;
    animation: fadeInScale 1s ease-out;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no texto */

}

/* --- Hero Section (Sobre) --- */
.hero-section {
    background-color: #000000;
    background-attachment: fixed; /* Efeito Parallax */
    color: #F8F8F8;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    padding-top: 7rem; /* Menos padding para ocupar menos espaço */
    padding-bottom: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Necessário para o efeito de parallax */
    overflow: hidden; /* Esconde elementos que saem da tela */
    min-height: 100vh; /* Garante que a seção ocupe toda a altura
    do viewport */
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    text-align: center; /* Centraliza o conteúdo */
    padding: 0 2rem; /* Padding lateral para o conteúdo */
}

.hero-content {
    max-width: 1000px; /* Conteúdo um pouco mais largo */
    padding: 0 2rem;
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    text-align: center; 
    color: #F8F8F8; /* Cor do texto */

}

.hero-content h2 {
    font-size: 5.5rem; /* Título principal bem grande */
    margin-bottom: 2.5rem;
    line-height: 1.05;
    color: #FFFFFF;
    animation: slideInFromLeft 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animação mais longa e suave */
    text-shadow: 4px 4px 8px rgba(0,0,0,0.8);
    padding: 0%;
    font-weight: 800; /* Mais negrito */
    text-transform: uppercase; /* Título em maiúsculas */
    letter-spacing: 3px; /* Mais espaçamento entre letras */
    text-align: center; /* Centraliza o título */
    animation-delay: 0.2s; /* Atraso na animação do título */
    opacity: 0; /* Inicia invisível */
    animation-fill-mode: forwards; /* Mantém o estado final da animação */
    animation-duration: 1.2s; /* Duração da animação */
    animation-timing-function: ease-out; /* Suaviza a animação */

}

.hero-content p {
    font-size: 1.5rem; /* Parágrafo maior */
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
    color: #D0D0D0; /* Tom de branco mais suave */
    animation: fadeInText 1.8s ease-out 0.8s forwards; /* Animação mais longa e atrasada */
    opacity: 0;
    padding: 0;
    text-align: center; /* Centraliza o parágrafo */
    line-height: 1.6; /* Melhora a legibilidade */

}

/* --- Team Section (Carrossel) --- */
.team-section {
    background-image: url('https://source.unsplash.com/1600x900/?team,work'); /* Imagem de fundo mais impactante */
    padding: 5rem 0; /* Mais padding superior e inferior */
    color: #F8F8F8; /* Cor do texto */
    text-align: center;
    position: relative; /* Necessário para o carrossel */
    overflow: hidden; /* Esconde elementos que saem da tela */
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    padding-top: 7rem; /* Mais espaço no topo para o cabeçalho fixo */
    padding-bottom: 5rem; /* Mais espaço na parte inferior */
    min-height: 100vh; /* Garante que a seção ocupe toda a altura do viewport */
    border-bottom: 1px solid #333; /* Linha de separação mais sutil */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no texto */
    background-attachment: fixed; /* Efeito Parallax */
    color: #F8F8F8; /* Cor do texto */
}

.team-carousel-container {
    position: relative;
    width: 95%; /* Ocupa mais largura */
    max-width: 1400px; /* Limite maior */
    overflow: hidden; /* Esconde o que está fora do carrossel */
    margin-top: 3rem;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente para destacar os cards */
    border-radius: 15px; /* Bordas arredondadas */
}

.team-grid {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transição mais suave e longa */
    will-change: transform; /* Otimização para performance de animação */
    align-items: stretch; /* Garante que os cards tenham a mesma altura */
}

.team-member {
    flex: 0 0 calc(33.33% - 40px); /* 3 cards, com 20px de margem em cada lado = 40px total */
    margin: 0 20px; /* Margem entre os cards */
    padding: 2.5rem; /* Mais padding interno */
    text-align: center;
    background-color: #1A1A1A;
    border-radius: 15px; /* Bordas mais arredondadas */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8); /* Sombra mais intensa */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, background-color 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.team-member:hover {
    transform: translateY(-20px) scale(1.03); /* Levanta mais e cresce mais */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 1); /* Sombra no hover mais escura */
    background-color: #2A2A2A;
}

.team-member img {
    width: 200px; /* Imagem maior */
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2rem;
    border: 5px solid #666; /* Borda mais grossa */
}    

.team-member:hover img {
    filter: grayscale(0%) contrast(100%);
    border-color: #F8F8F8;
}

.team-member h3 {
    font-size: 2.2rem; /* Nome maior */
    margin-bottom: 0.8rem;
    color: #F8F8F8;
    text-transform: uppercase;
    font-weight: 700;
}

.team-member p {
    font-size: 1.2rem; /* Cargo maior */
    color: #BBBBBB;
    margin-bottom: 2rem;
}

.team-member .social-links a {
    display: inline-block;
    margin: 2.5px 18px; /* Mais espaçamento */
    font-size: 1.3rem; /* Ícones maiores */
    border: 2px solid #666;
    padding: 10px 25px; /* Mais padding */
    border-radius: 30px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.team-member .social-links a:hover {
    background-color: #F8F8F8;
    border-color: #F8F8F8;
    color: #0A0A0A;
    transform: translateY(-5px); /* Efeito sutil de levantar no hover */
}

/* Botões do Carrossel */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2); /* Mais visível */
    color: #F8F8F8;
    border: none;
    padding: 18px 24px; /* Botões maiores */
    font-size: 2.5rem; /* Ícone maior */
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
    outline: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.carousel-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.15); /* Zoom mais pronunciado */
}

.carousel-button.prev {
    left: 20px; /* Mais afastado da borda */
}

.carousel-button.next {
    right: 20px; /* Mais afastado da borda */
}

/* --- Projects Section --- */
.projects-section {
     background-image: url('https://source.unsplash.com/1600x900/?team,work'); /* Imagem de fundo mais impactante */
    padding-bottom: 10rem;
    padding-top: 7rem; /* Mais espaço no topo para o cabeçalho fixo */
    color: #F8F8F8; /* Cor do texto */
    text-align: center;
    position: relative; /* Necessário para o efeito de parallax */
    overflow: hidden; /* Esconde elementos que saem da tela */
    min-height: 100vh; /* Garante que a seção ocupe toda a altura
    do viewport */
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no texto */
    border-bottom: 1px solid #333; /* Linha de separação mais sutil */
    padding: 0 2rem; /* Padding lateral para o conteúdo */


}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Cards de projeto maiores */
    gap: 4rem; /* Mais espaçamento */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto; /* Centraliza a grade */
    padding: 2rem 0; /* Padding interno */
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    justify-items: center; /* Centraliza os itens na grade */
    align-items: start; /* Alinha os itens no topo */
    position: relative; /* Necessário para o efeito de parallax */
    overflow: hidden; /* Esconde elementos que saem da tela */
    background-color: #363636; /* Fundo semi-transparente para destacar os cards */
    border-radius: 15px; /* Bordas arredondadas */

}

.project-item {
    background-color: #000000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-color 0.4s ease;
    text-align: left;
    border: 3px solid #333; /* Borda mais grossa */
    cursor: pointer;
    width: 100%; /* Garante que o card ocupe toda a largura disponível */
    max-width: 380px; /* Limite máximo de largura */
}

.project-item:hover {
    transform: translateY(-20px) scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 1);
    border-color: #F8F8F8;
    background-color: #2A2A2A; /* Muda a cor de fundo no hover */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, background-color 0.4s ease;
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

.project-item img {
    width: 100%;
    height: 300px; /* Imagens maiores */
    object-fit: cover;
    filter: grayscale(100%) contrast(150%);
    transition: filter 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-bottom: 3px solid #333; /* Borda na parte inferior da imagem */
    border-radius: 15px 15px 0 0; /* Bordas arredondadas na parte superior */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra na imagem */
    margin-bottom: 1rem; /* Espaçamento entre a imagem e o título */
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out; /* Transição suave para o filtro e transformação */
    will-change: filter, transform; /* Otimização para performance de animação */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    border-radius: 15px; /* Bordas arredondadas */
    z-index: 1; /* Garante que a imagem fique acima do fundo do card */
    position: relative; /* Necessário para o efeito de hover */
}

.project-item:hover img {
    filter: grayscale(0%) contrast(100%);
    transform: scale(1.05); /* Leve zoom na imagem no hover */
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out; /* Transição suave para o filtro e transformação */
    will-change: filter, transform; /* Otimização para performance de animação */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    z-index: 2; /* Garante que a imagem fique acima do fundo do card */
    position: relative; /* Necessário para o efeito de hover */
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8); /* Sombra mais intensa no hover */

}

.project-item h3 {
    font-size: 2rem;
    margin: 2rem 2rem 1rem 2rem;
    color: #F8F8F8;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no texto */
    transition: color 0.3s ease; /* Transição suave para a cor do título */

}

.project-item p {
    font-size: 1.15rem;
    color: #BBBBBB;
    padding: 0 2rem 2rem 2rem;
    line-height: 1.6; /* Melhora a legibilidade */
    transition: color 0.3s ease; /* Transição suave para a cor do parágrafo */
}

/* --- Footer --- */
.footer {
    background-color: #000000;
    color: #BBBBBB;
    padding: 3rem;
    text-align: center;
    font-size: 1.05rem;
    position: relative; /* Necessário para o efeito de parallax */
    overflow: hidden; /* Esconde elementos que saem da tela */
    animation: fadeInDown 1s ease-out; /* Animação ao carregar */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra no texto */
    margin-top: 2rem; /* Espaço entre o conteúdo principal e o rodapé */
    padding-top: 2rem; /* Mais espaço no topo */
    padding-bottom: 2rem; /* Mais espaço na parte inferior */
    z-index: 1000; /* Garante que o rodapé fique acima de outros elementos */
}
.footer p {
    margin-bottom: 1rem;

}

@media screen and (max-width: 768px) {
    .header {
        padding: 1rem 2rem; /* Menos padding em telas menores */
    }
    .nav ul li {
        margin-left: 1.5rem; /* Menos espaçamento entre links */
    }
    .hero-content h2 {
        font-size: 3.5rem; /* Título menor em telas pequenas */
    }
    .hero-content p {
        font-size: 1.2rem; /* Parágrafo menor */
    }
    .team-member {
        flex: 0 0 calc(50% - 40px); /* Dois cards por linha em telas pequenas */
    }
    
}