/* Reset geral (remove padrões do navegador) */
* {
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove espaçamentos internos */
  box-sizing: border-box; /* Faz o tamanho incluir padding e borda */
  font-family: Arial, sans-serif; /* Fonte padrão do site */
}

/* Estilo geral do corpo da página */
body {
  background-color: #f5f7fa; /* Cor de fundo clara */
  color: #333; /* Cor do texto */
  line-height: 1.6; /* Espaçamento entre linhas */
}

/* Cabeçalho (topo do site) */
header {
  background: linear-gradient(135deg, #0d1b2a, #1b263b); /* Fundo com degradê */
  color: white; /* Texto branco */
  padding-bottom: 40px; /* Espaço embaixo */
}

/* Barra de navegação */
nav {
  display: flex; /* Deixa os itens em linha */
  justify-content: space-between; /* Espaço entre logo e menu */
  align-items: center; /* Alinha verticalmente */
  padding: 20px 10%; /* Espaçamento interno */
}

/* Nome/logo do site */
nav h1 {
  font-size: 28px; /* Tamanho do texto */
}

/* Lista do menu */
nav ul {
  list-style: none; /* Remove bolinhas da lista */
  display: flex; /* Coloca os itens lado a lado */
  gap: 20px; /* Espaço entre os itens */
}

/* Links do menu */
nav a {
  color: white; /* Cor do texto */
  text-decoration: none; /* Remove sublinhado */
  font-weight: bold; /* Texto em negrito */
}

/* Seção principal (hero) */
.hero {
  display: flex; /* Layout em linha */
  justify-content: space-between; /* Espaço entre texto e imagem */
  align-items: center; /* Centraliza verticalmente */
  padding: 60px 10%; /* Espaçamento interno */
  flex-wrap: wrap; /* Quebra linha no celular */
}

/* Parte de texto da hero */
.hero-texto {
  max-width: 500px; /* Limita largura */
}

/* Nome principal */
.hero-texto h2 {
  font-size: 42px; /* Texto grande */
  margin-bottom: 15px; /* Espaço abaixo */
}

/* Descrição */
.hero-texto p {
  font-size: 18px; /* Tamanho médio */
  margin-bottom: 20px; /* Espaço abaixo */
}

/* Botão */
.botao {
  display: inline-block; /* Permite padding */
  padding: 12px 24px; /* Espaçamento interno */
  background-color: #00b4d8; /* Cor do botão */
  color: white; /* Cor do texto */
  text-decoration: none; /* Remove sublinhado */
  border-radius: 8px; /* Bordas arredondadas */
  font-weight: bold; /* Negrito */
}

/* Imagem da hero */
.hero-foto img {
  width: 250px; /* Largura */
  height: 250px; /* Altura */
  object-fit: cover; /* Ajusta imagem sem distorcer */
  border-radius: 50%; /* Deixa redonda */
  border: 5px solid white; /* Borda branca */
}

/* Conteúdo principal */
main {
  padding: 40px 10%; /* Espaçamento */
}

/* Seções do site */
.secao {
  margin-bottom: 60px; /* Espaço entre seções */
}

/* Títulos das seções */
.secao h2 {
  font-size: 30px; /* Tamanho do título */
  margin-bottom: 20px; /* Espaço abaixo */
  color: #1b263b; /* Cor */
}

/* Subtítulos */
.secao h3 {
  margin-top: 15px; /* Espaço acima */
  color: #0d1b2a; /* Cor */
}

/* Cards (caixinhas de projetos) */
.card {
  background: white; /* Fundo branco */
  padding: 20px; /* Espaçamento interno */
  border-radius: 12px; /* Bordas arredondadas */
  margin-top: 20px; /* Espaço acima */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra leve */
}

/* Lista de habilidades */
.skills {
  display: flex; /* Itens em linha */
  flex-wrap: wrap; /* Quebra linha */
  gap: 15px; /* Espaço entre itens */
  list-style: none; /* Remove bolinhas */
  margin-top: 20px; /* Espaço acima */
}

/* Cada habilidade */
.skills li {
  background: #00b4d8; /* Fundo azul */
  color: white; /* Texto branco */
  padding: 10px 18px; /* Espaçamento */
  border-radius: 20px; /* Formato arredondado */
  font-weight: bold; /* Negrito */
}

/* Rodapé */
footer {
  text-align: center; /* Centraliza texto */
  padding: 20px; /* Espaçamento */
  background-color: #1b263b; /* Fundo escuro */
  color: white; /* Texto branco */
}