/* --- CONFIGURAÇÕES GLOBAIS E VARIÁVEIS DE COR --- */
:root {

--cor-primaria-sections: #202020; /* Fundo das section */

--cor-secundaria-laranja: #FF8C00; /* Laranja vibrante */

--cor-fundo: #121212; /* Fundo quase preto para dar contraste */
--cor-fundot: #12121280; /* Fundo quase preto com transparência */

--cor-texto-principal: #FFFFFF;

--cor-texto-secundario: #a9a9a9;

--cor-fundo-card: #1b1a1a;
/* --cor-fundo-card: #1E1E1E; */


--borderradius: 2.5%;

} 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* A barra de rolagem como um todo */
::-webkit-scrollbar {
  width: 12px; /* Largura da barra de rolagem vertical */
  height: 12px; /* Altura da barra de rolagem horizontal */
}

/* O fundo (trilha) da barra de rolagem */
::-webkit-scrollbar-track {
  background: #121212; /* Cor de fundo da trilha */
}

/* O "polegar" (a parte que você arrasta) */
::-webkit-scrollbar-thumb {
  background-color: #FF8C00; /* Cor principal do polegar */
  border-radius: 20px; /* Bordas arredondadas para o polegar */
  border: 3px solid #121212; /* Cria um espaçamento ao redor do polegar usando a cor da trilha */
}

/* Efeito quando o mouse está sobre o polegar */
::-webkit-scrollbar-thumb:hover {
  background-color: #E07B00; /* Um tom de laranja um pouco mais escuro para o efeito hover */
}
/* SCROLL */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

h1, h2, h3 {
    color: var(--cor-texto-principal);
    font-weight: 600;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--cor-secundaria-laranja);
}

section {
    padding: 6rem 0;
}

/* ------------------------------------------------ CABEÇALHO E NAVEGAÇÃO ----------------------------------------------------------- */
header {
    background-color: var(--cor-fundot); /* Fundo semi-transparente para a navbar */
    /* Remova ou ajuste o padding-top e padding-bottom se necessário, dependendo do design */
    backdrop-filter: blur(20px);
    padding: 1rem 0;
    border-bottom: none; /* Remova a borda inferior, pois não fará sentido com a transparência */
    position: fixed; /* Mude para fixed para que a navbar fique sempre no topo */
    width: 100%; /* Garante que a navbar ocupe toda a largura */
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que a navbar fique acima do banner */
}
/* ------------------------------------------------ MENU HAMBÚRGUER -------------------------------------------------------- */
.menu-hamburguer {
    display: none; 
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
}

.menu-hamburguer .barra {
    width: 100%;
    height: 3px;
    background-color: var(--cor-texto-principal);
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
/* ------------------------------------------------ MENU HAMBÚRGUER -------------------------------------------------------- */
.logo{
    display: flex;
    gap: 1vh;
}

.logo img{
    width: 7vh;
    height: auto;
}

header .container-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo a {
    text-decoration: none;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-left: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-texto-principal);
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--cor-secundaria-laranja);
}

.nav-links .nexus-nav a:hover {
    color: #05f300;
}

.nav-links .contact-button {
    background-color: transparent;
    border: 2px solid var(--cor-secundaria-laranja);
    color: var(--cor-secundaria-laranja);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.nav-links .contact-button:hover {
    background-color: var(--cor-secundaria-laranja);
    color: var(--cor-fundo);
}

/* --------------------------------------------------------- SEÇÃO HERO ----------------------------------------------------------- */
#hero {
    /* Define a altura mínima como 100% da altura da tela */
    min-height: 100vh;
    width: 100%;

    /* Imagem de fundo e gradiente (mantendo o seu estilo) */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/fundo_hero.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;    /* Alinha na vertical */
    justify-content: center; /* Alinha na horizontal */

    /* Adiciona um padding para o conteúdo não colar nas bordas em telas pequenas */
    padding: 0 2rem;
}

#hero .container {
    
    display: flex;
    flex-direction: column; /* Empilha os itens verticalmente */
    align-items: center;    /* Centraliza os itens na horizontal */
    text-align: center;     /* Garante que o texto dentro dos itens também seja centralizado */
}

/* ESTILOS DO CONTEÚDO (ajustes finos) */
#hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    max-width: 1500px; /* Limita a largura do título em telas muito grandes */
}

#hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
    color: var(--cor-texto-secundario);
}

.cta-button {
    background-color: var(--cor-secundaria-laranja);
    color: #fff;
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    font-size: 1.1rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
    white-space: nowrap; /* Impede que o texto do botão quebre a linha */
}

.cta-button:hover {
    transform: scale(1.05);
    background-color: #e67e00;
}
/* ------------------------------------------------------ SEÇÃO SOBRE --------------------------------------------------------- */
#sobre {
    background-color: var(--cor-primaria-sections);
}

#sobre p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
}
#equipe {
    padding-top: 4rem;
    padding-bottom: 4rem;
}



/* Grid que organiza os cards */
.team-grid {
    display: grid;
    margin-top: 10px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem; /* Espaçamento entre os cards */
}

/* Estilo de cada card de desenvolvedor */
.dev-card {
    background-color: var(--cor-fundo-card); /* Cor definida no style.css */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* Estilo da imagem/foto do desenvolvedor */
.dev-card img {
    width: 120vh;
    border-radius: 10px; /* Deixa a imagem redonda */
    object-fit: cover; /* Garante que a imagem não fique distorcida */
    
    border: 4px solid var(--cor-secundaria-laranja); /* Borda laranja */
}
/* ----------------------------------- ESTILOS PARA O CARROSSEL DE TECNOLOGIAS (VERSÃO JS) ------------------------------------------ */
#tecnologias h2 {
    margin-bottom: 2rem;
}

.scroller {
    max-width: 100%;
    overflow: hidden;
    /* Adiciona uma máscara com gradiente nas laterais para um efeito suave */
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem; /* Espaçamento entre os logos */
    padding-block: 1rem;
    list-style: none; /* Remove as bolinhas da lista ul */
    margin: 0;
    padding: 0;
}

/* Animação que será controlada pelo JS */
.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    
}



.scroller__inner li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroller__inner img {
    height: 70px; /* Altura padrão dos logos */
    max-width: 150px;
    filter: grayscale(1); /* Deixa os logos em escala de cinza */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.scroller__inner img:hover {
    filter: grayscale(0); /* Devolve a cor ao passar o mouse */
    opacity: 1;
    
}

/* Keyframes da animação de rolagem */
@keyframes scroll {
    to {
        transform: translate(calc(-50%));
    }
}

/* Ajustes de velocidade (opcional) */
.scroller[data-speed="fast"] {
    --animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --animation-duration: 15s; /* Duração da animação */
}
/* ------------------------------------- ESTILOS PARA A CAIXA DE DESCRIÇÃO DAS TECNOLOGIAS ------------------------------------------ */

.tech-description-box {
    margin-top: 3rem; /* Espaço entre o carrossel e a caixa */
    padding: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--cor-fundo-card);
    border: 1px solid #333;
    border-radius: 8px;
    min-height: 80px; /* Altura mínima para evitar que a página "pule" */
    display: flex;
    align-items: center;
    justify-content: center;
}

#tech-description-text {
    text-align: center;
    color: var(--cor-texto-secundario);
    font-size: 1.1rem;
    line-height: 1.6;
    /* Efeito de transição suave para o texto */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Classe para controlar o efeito de fade */
#tech-description-text.fading {
    opacity: 0;
}

/* ------------------------------------------------- SEÇÃO DE SERVIÇOS ---------------------------------------------------------- */

#servicos{
    background-color: var(--cor-primaria-sections);
}
.servicos-container {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.servico-card {
    background-color: var(--cor-fundo-card);
    padding: 2rem;
    border-radius: var(--borderradius);
    width: 26vw;
    height: 44vh;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servico-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(250, 196, 0, 0.195);
}

.servico-card h3 {
    color: var(--cor-secundaria-laranja);
    margin-bottom: 1rem;
}
/* -------------------------------------------------------- NEXUS ------------------------------------------------------------------- */

.titulo-nexus{
    display: flex;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
}

.titulo-nexus img{
    width: 17vh;
    margin: 0;
}

.titulo-nexus h2{
    margin: 0;
    color: #05f300;
}

#nexus p{
    margin-top: 5vh;
    margin-bottom: 5vh;
}

/* Container que organiza os cards */
.cards-container {
  display: grid;
  /* Cria colunas responsivas: os cards terão no mínimo 280px */
  /* e se ajustarão para preencher o espaço, criando novas linhas se necessário */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px; /* Espaçamento entre os cards */
  max-width: 1200px;
  margin: 0 auto; /* Centraliza o container na página */
}

/* Estilo individual de cada card */
.cards-nexus {
  background-color: #1e1e1e; /* Cor de fundo do card */
  border-radius: 12px;         /* Bordas arredondadas */
  padding: 30px;
  border: 1px solid #2f2f2f;  /* Borda sutil para dar profundidade */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito ao passar o mouse por cima */
.cards-nexus:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 255, 30, 0.1);
}

/* Estilo do ícone */
.cards-nexus i {
  font-size: 40px;            
  color: #05f300;             
  margin-bottom: 20px;
}

.cards-nexus .drone-icon {
    width: 10vh;
    height: 10vh;
    margin-top: -3vh;
    background-color: #05f300;
    /* O SVG é usado como uma máscara (molde) */
    mask-image: url('../images/icon_drone.svg');
    -webkit-mask-image: url('../images/icon_drone.svg'); /* Para compatibilidade */
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* Estilo do título do card */
.cards-nexus h3 {
  color: #ffffff;
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 15px;
}

/* Estilo do parágrafo de descrição */
.cards-nexus p {
  color: #b0b0b0; /* Cinza claro para o texto */
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
/* ------------------------------------------------- SEÇÃO DE PORTFÓLIO ------------------------------------------------------------- */
#portfolio{
    background-color: var(--cor-primaria-sections);
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.projeto-card {
    background-color: var(--cor-fundo-card);
    border-radius: 10px;
    overflow: hidden; /* Garante que a imagem não ultrapasse as bordas arredondadas */
    transition: transform 0.3s ease;
}

.projeto-card .logo-solumatch{
    padding: 2.5vh;
}

.projeto-card .logo-bate-ponto{
    
    padding: 5vh;
    width: 45vh;
}

.projeto-card:hover {
    transform: scale(1.03);
}

.projeto-card img {
    width: 100%;
    height: auto;
    display: block;
}

.projeto-info {
    padding: 1.5rem;
}

.projeto-info h3 {
    margin-bottom: 0.5rem;
}
/* ------------------------------------------ ESTILOS PARA O FORMULÁRIO DE CONTATO -------------------------------------------------- */

#formulario-contato {
    padding: 6rem 0;
    background-color: var(--cor-fundo); /* Fundo escuro padrão */
}

.subtitulo-formulario {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    color: var(--cor-texto-secundario);
}

form {
    max-width: 700px; /* Define uma largura máxima para o formulário */
    margin: 0 auto; /* Centraliza o formulário na seção */
}

.form-group {
    margin-bottom: 1.5rem; /* Espaçamento entre os campos */
}

form label {
    display: block; /* Faz o label ocupar uma linha inteira */
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--cor-texto-principal);
}

form input,
form textarea {
    width: 100%;
    padding: 1rem;
    background-color: var(--cor-fundo-card); /* Fundo do campo um pouco mais claro */
    border: 1px solid #444;
    border-radius: 5px;
    color: var(--cor-texto-principal); /* Cor do texto que o usuário digita */
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Herda a mesma fonte do site */
    transition: border-color 0.3s ease;
}

/* Efeito visual quando o usuário clica em um campo */
form input:focus,
form textarea:focus {
    outline: none; /* Remove a borda padrão do navegador */
    border-color: var(--cor-secundaria-laranja); /* Destaca o campo com a cor laranja */
}

/* Estilizando o botão dentro do formulário */
form .cta-button {
    width: 100%;
    border: none;
    padding: 1rem;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
}

/* ----------------------------------------------- ESTILOS DO NOVO RODAPÉ ----------------------------------------------------------- */

/* Se você tiver um seletor 'footer' antigo no seu CSS, apague-o antes de adicionar este. */

footer {
    /* O gradiente que você pediu! Indo do roxo escuro para um mais claro. */
    background: linear-gradient(135deg, var(--cor-primaria-sections) 0%, #373737 100%);
    padding: 5rem 0 0 0; /* Adiciona espaço interno, mas zera o de baixo para o footer-bottom cuidar disso */
    color: var(--cor-texto-secundario);
}

.footer-content {
    display: grid;
    /* Grid responsivo: em telas grandes fica com 3 colunas, em pequenas, quebra para 1 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem; /* Espaço entre as colunas */
    padding-bottom: 3rem;
}

.footer-section h3, .logo-footer {
    color: var(--cor-texto-principal);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.logo-footer {
    color: var(--cor-secundaria-laranja);
    font-size: 2rem;
    font-weight: 700;
}

.footer-section p {
    line-height: 1.7;
}

.footer-section ul {
    list-style: none; /* Remove as bolinhas da lista */
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section a {
    color: var(--cor-texto-secundario);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--cor-secundaria-laranja);
}

.footer-section .nexus-nav a:hover {
    color: #05f300;
}

/* Estilização específica da coluna de contato */
.contato-info ul li {
    display: flex;
    align-items: center;
}

.contato-info .icon {
    font-size: 1.2rem;
    margin-right: 10px;
    color: var(--cor-secundaria-laranja);
}

/* Linha de copyright no final */
.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha sutil de separação */
    font-size: 0.9rem;
}

/* -------------------------------------------------------- RESPONSIVO -------------------------------------------------------- */
/* --- Estilos para Telas Menores (Tablets e Celulares) --- */
@media (max-width: 992px) {
    .container, .container-nav {
        padding: 0 1.5rem; /* Reduz o espaçamento lateral em telas médias */
    }

    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2.2rem;
    }
}

/* --- Estilos Específicos para Tablets (até 768px) --- */
@media (max-width: 768px) {

    /* Esconde os links de navegação do desktop */
    .nav-links {
        display: none;
    }
 
    /* Exibe o menu hambúrguer */
    .menu-hamburguer {
        display: flex;
    }

    /* Transforma a navegação em um menu mobile overlay (seu código original, está correto) */
    #nav-links-container {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(18, 18, 18, 0.98);
        backdrop-filter: blur(5px);
        justify-content: center;
        align-items: center;
    }
 
    #nav-links-container.ativo {
        display: flex;
    }
 
    /* Estiliza a lista de links para o modo vertical dentro do overlay */
    #nav-links-container .nav-links {
        display: flex; /* Garante que ele apareça dentro do overlay ativo */
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    /* Seção Hero */
    
    #hero h1 {
        font-size: 2.5rem; /* Diminui um pouco a fonte do título em telas menores */
    }

    #hero p {
        font-size: 1.1rem;
    }

    #hero p {
        font-size: 1.1rem;
    }
 
    /* Seção de Serviços */
    .servicos-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
 
    .servico-card {
        width: 80%;
        max-width: 400px;
        height: auto; /* Altura automática */
    }
 
    /* Imagem da Equipe */
    .dev-card img {
        width: 100%; /* Imagem ocupa a largura do card */
        height: auto;
    }
    
    /* Portfolio */
    .projeto-card .logo-bate-ponto {
        width: 100%;
        padding: 2rem;
    }
 
    /* Rodapé */
    .footer-content {
        grid-template-columns: 1fr; /* Coluna única no rodapé */
        text-align: center;
    }
    .contato-info ul li {
        justify-content: center;
    }
}

/* --- Estilos Específicos para Celulares (até 576px) --- */
@media (max-width: 576px) {
    
    /* Navegação vira uma coluna */
    .nav-links {
        flex-direction: column;
        gap: 1.5rem;
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links .contact-button {
        padding: 0.8rem 1.5rem;
    }

    /* Hero */
    #hero {
        padding-top: 220px; /* Ainda mais espaço para o menu em coluna */
    }

    /* Cards da seção Nexus */
     .cards-container{
        padding: 0 1rem;
     }

    /* Formulário */
    form {
        padding: 0 1rem;
    }
}