/* ========================================= */
/* ESTILOS GERAIS DO CORPO DA PÁGINA */
/* ========================================= */
body {
  font-family: Arial, sans-serif; /* FONTE DO TEXTO */
  margin: 0;
  padding: 0;
  background-color: #0f0f0f; /* COR DE FUNDO DA PÁGINA */
  color: #e0e0e0; /* COR PADRÃO DO TEXTO */
  overflow-x: hidden; /* Elimina a barra de rolagem horizontal e a borda preta. */
}

/* ========================================= */
/* SEÇÃO DE NAVEGAÇÃO SUPERIOR */
/* ========================================= */
.navegacao-superior {
  /*
  Para ajustar a posição da barra de navegação:
  - top: move para cima/baixo (diminua o valor para subir)
  - left: move para a esquerda/direita
  */
  position: absolute; /* TIPO DE POSICIONAMENTO */
  top: 10px; /* DISTÂNCIA DO TOPO (ajuste o valor para mover para cima ou para baixo) */
  width: 100%; /* LARGURA DA BARRA DE NAVEGAÇÃO */
  display: flex; /* ATIVA O FLEXBOX PARA ORGANIZAR OS ITENS */
  justify-content: center; /* ALINHA OS ITENS HORIZONTALMENTE AO CENTRO */
  gap: 20px; /* ESPAÇO ENTRE OS BOTÕES */
  z-index: 100; /* ORDEM DE CAMADAS (deixa a navegação na frente de outros elementos) */
}

.botao-navegacao {
  padding: 10px 20px; /* ESPAÇAMENTO INTERNO DO BOTÃO */
  background-color: transparent; /* COR DE FUNDO DO BOTÃO */
  border: 2px solid #007bff; /* COR DA BORDA DO BOTÃO */
  color: #e0e0e0; /* COR DO TEXTO DO BOTÃO */
  text-decoration: none; /* REMOVE O SUBLINHADO DO LINK */
  border-radius: 5px; /* ARREDONDA AS BORDAS DO BOTÃO */
  transition: background-color 0.3s, color 0.3s; /* ANIMAÇÃO SUAVE AO PASSAR O MOUSE */
}

.botao-navegacao:hover {
  background-color: #007bff; /* COR DE FUNDO AO PASSAR O MOUSE */
  color: #fff; /* COR DO TEXTO AO PASSAR O MOUSE */
}

/* ========================================= */
/* SEÇÃO INÍCIO (CABEÇALHO) */
/* ========================================= */
#inicio {
  /*
  Para ajustar o fundo:
  - background-image: url('nome-da-sua-imagem.jpg')
  */
  display: flex; /* ATIVA O FLEXBOX PARA ORGANIZAR OS ITENS */
  flex-direction: column; /* ORGANIZA OS ITENS EM COLUNA */
  justify-content: center; /* ALINHA OS ITENS VERTICALMENTE AO CENTRO */
  align-items: center; /* ALINHA OS ITENS HORIZONTALMENTE AO CENTRO */
  min-height: 100vh; /* ALTURA MÍNIMA DA SEÇÃO */
  padding: 20px; /* ESPAÇAMENTO INTERNO DA SEÇÃO */
  background-image: url('Foto-porti.jpg'); /* IMAGEM DE FUNDO DA SEÇÃO */
  background-size: cover; /* AJUSTA O TAMANHO DA IMAGEM PARA COBRIR A ÁREA */
  background-position: center; /* POSICIONA A IMAGEM DE FUNDO NO CENTRO */
  background-repeat: no-repeat; /* EVITA QUE A IMAGEM SE REPITA */
  position: relative; /* TIPO DE POSICIONAMENTO */
  overflow: hidden; /* ESCONDE CONTEÚDO QUE ULTRAPASSA A ÁREA */
}

/* Ajustes da Foto */
.perfil {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
}

.perfil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ajustes da Apresentação */
.apresentacao {
  text-align: center;
  max-width: 500px;
}

.apresentacao h1 {
  color: #007bff; /* COR DO TÍTULO */
  font-size: 2.5em; /* TAMANHO DA FONTE DO TÍTULO */
  margin-bottom: 10px;
}

.apresentacao p {
  color: #f1f6fa; /* COR DA DESCRIÇÃO */
  font-size: 1.2em; /* TAMANHO DA FONTE DA DESCRIÇÃO - Descrição abaixo do nome */
  line-height: 1.5;
  text-align: center;
}

/* ========================================= */
/* SEÇÃO DE EXPERIÊNCIAS */
/* ========================================= */
#experiencias {
  padding: 80px 20px;
  max-width: 1200px;
  margin: auto;
  background-color: #1a1a1a;; /* COR DE FUNDO DA SEÇÃO - Experiências Relevantes */
}

#experiencias h2 {
  color: #007bff; /* COR DO TÍTULO */
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.5em; /* TAMANHO DA FONTE DO TÍTULO */
}

.experiencia-item {
  display: flex;
  align-items: center;
  gap: 40px;
}

.experiencia-imagem {
  flex: 1;
  /* min-width: 300px; Removido para melhor responsividade */
}

.experiencia-imagem img {
  width: 100%;
  border-radius: 10px;
}

.experiencia-texto {
  flex: 2;
  text-align: left;
}

.experiencia-texto h3 {
  color: #00aaff; /* COR DOS SUBTÍTULOS */
  margin-top: 20px;
  margin-bottom: 5px;
}

.experiencia-texto h4 {
  color: #cccccc;
  margin-top: 0;
  margin-bottom: 15px;
  font-style: italic;
}

.experiencia-texto ul {
  list-style-type: '✓ ';
  padding-left: 20px;
}

.experiencia-texto li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ========================================= */
/* SEÇÃO PROJETOS */
/* ========================================= */
#projetos {
  padding: 80px 20px;
  max-width: 1200px;
  margin: auto;
}

#projetos h2 {
  color: #007bff; /* COR DO TÍTULO */
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.5em; /* TAMANHO DA FONTE DO TÍTULO */
}

.projeto-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80px;
  gap: 40px;
}

.video-container { 
  flex: 1; 
  /* min-width: 300px; Removido para melhor responsividade */
}
.video-container video { width: 100%; height: 100%; min-height: 300px; border-radius: 10px; }
.projeto-texto { flex: 1; text-align: left; }

/* ========================================= */
/* SEÇÃO CONTATO (RODAPÉ) */
/* ========================================= */
#contato {
  padding: 50px 20px;
  text-align: center;
  background-color: #000; /* COR DE FUNDO DA SEÇÃO */
}

.links-sociais {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.links-sociais a { 
  color: #e0e0e0; /* COR DOS ÍCONES SOCIAIS */
  transition: color 0.3s;
}

.links-sociais a:hover { 
  color: #007bff; /* COR DOS ÍCONES AO PASSAR O MOUSE */
}

.links-sociais i { 
  font-size: 3em; 
}

/* ========================================= */
/* ESTILOS DO MODAL DE VÍDEO */
/* ========================================= */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; }
.modal-content { position: relative; width: 90%; max-width: 960px; max-height: 90vh; }
.modal-content video { width: 100%; max-height: 90vh; border-radius: 10px; }
.modal .close { position: absolute; top: -30px; right: 10px; color: #fff; font-size: 3em; font-weight: bold; cursor: pointer; }

/* ========================================= */
/* RESPONSIVIDADE (Ajustes para telas menores) */
/* ========================================= */
@media (max-width: 900px) {
  
  #inicio { 
    justify-content: flex-start; 
    padding-top: 40px; 
  }
  
  .navegacao-superior { 
    position: static; 
    transform: none; 
    width: 100%; 
    justify-content: center; 
    margin-bottom: 40px; 
  }
  
  .perfil, 
  .apresentacao h1, 
  .apresentacao p { 
    position: static; 
    transform: none; 
    text-align: center; 
    width: 100%; 
    max-width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    left: auto; 
    top: auto; 
  }
  
  .perfil { 
    width: 200px; 
    height: 200px; 
    margin-bottom: 20px; 
  }
  
  .apresentacao h1 { 
    font-size: 2em; 
    margin-bottom: 10px; 
  }
  
  .apresentacao p { 
    font-size: 1em; 
    max-width: 100%; 
  }

  .experiencia-texto {
    text-align: left; 
  }

  .experiencia-texto ul {
    text-align: left;
  }

  .projeto-item { 
    gap: 20px; 
  }
  
  .projeto-texto { 
    text-align: left; 
    margin-top: 0; 
  }
  
  .projeto-texto h3 { 
    font-size: 1.2em; 
  }
  
  .projeto-texto p { 
    font-size: 0.9em; 
    line-height: 1.3; 
  }
}

@media (min-width: 769px) {
    .projeto-item {
        flex-direction: row;
    }

    .projeto-item:nth-child(even) {
        flex-direction: row-reverse;
    }
}