:root {
  /* Paleta de Cores — define as cores principais, neutras e de estado */
  --cor-primaria: #0057A3;       /* Azul escuro: cabeçalho e rodapé */
  --cor-secundaria: #F2A900;     /* Amarelo ouro: botões e destaques */
  --cor-neutra-1: #FFFFFF;       /* Branco: fundo de seções e formulários */
  --cor-neutra-2: #F5F5F5;       /* Cinza claro: fundo geral da página */
  --cor-neutra-3: #CCCCCC;       /* Cinza médio: bordas e campos desabilitados */
  --cor-neutra-4: #333333;       /* Cinza escuro: cor principal do texto */
  --cor-sucesso: #28a745;        /* Verde: mensagens de sucesso */
  --cor-erro: #dc3545;           /* Vermelho: mensagens de erro */

  /* Tipografia — tamanhos de fonte para diferentes níveis de texto */
  --fonte-xs: 12px;              /* Rodapé e textos auxiliares */
  --fonte-sm: 14px;              /* Texto secundário */
  --fonte-md: 16px;              /* Texto padrão */
  --fonte-lg: 24px;              /* Títulos médios */
  --fonte-xl: 32px;              /* Títulos principais */

  /* Espaçamento — unidades modulares para margens e preenchimento */
  --espaco-1: 8px;
  --espaco-2: 16px;
  --espaco-3: 24px;
  --espaco-4: 32px;
  --espaco-5: 48px;
  --espaco-6: 64px;
}

/* Reset básico — remove margens e preenchimentos padrão */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corpo da página — define fonte, cor de fundo e layout em grid */
body {
  font-family: Arial, sans-serif;
  font-size: var(--fonte-md);
  background-color: var(--cor-neutra-2);
  color: var(--cor-neutra-4);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Cabeçalho — cor de fundo azul e texto branco */
header {
  background-color: var(--cor-primaria);
  color: var(--cor-neutra-1);
  padding: var(--espaco-2);
}

/* Menu de navegação — horizontal com espaçamento entre itens */
nav ul {
  display: flex;
  gap: var(--espaco-2);
  list-style: none;
  margin-top: var(--espaco-1);
}

/* Links do menu — estilo e interação visual */
nav a {
  color: var(--cor-neutra-1);
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

/* Área principal — espaçamento interno e separação entre seções */
main {
  padding: var(--espaco-3);
  display: grid;
  gap: var(--espaco-3);
}

/* Rodapé — fundo azul, texto branco e alinhamento central */
footer {
  background-color: var(--cor-primaria);
  color: var(--cor-neutra-1);
  text-align: center;
  padding: var(--espaco-2);
}

/* Imagens — responsivas com bordas arredondadas */
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: var(--espaco-2);
}

/* Botões — estilo padrão, hover e estado desabilitado */
button {
  padding: var(--espaco-1) var(--espaco-2);
  background-color: var(--cor-secundaria);
  color: var(--cor-neutra-1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: var(--cor-erro);
}

button:disabled {
  background-color: var(--cor-neutra-3);
  cursor: not-allowed;
}

/* Formulários — layout em grid com fundo branco e bordas suaves */
form {
  display: grid;
  gap: var(--espaco-2);
  background-color: var(--cor-neutra-1);
  padding: var(--espaco-3);
  border-radius: 8px;
}

/* Campos de entrada — estilo padrão e foco visual */
input, select, textarea {
  padding: var(--espaco-1);
  border: 1px solid var(--cor-neutra-3);
  border-radius: 4px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cor-primaria);
}

/* Seções de conteúdo — estilo de cartão com sombra e espaçamento */
section {
  background-color: var(--cor-neutra-1);
  padding: var(--espaco-4);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--espaco-4);
}

/* Artigos — largura máxima e centralização */
article {
  max-width: 800px;
  margin: 0 auto;
}

/* Títulos das seções — destaque com borda inferior */
section h2 {
  font-size: var(--fonte-lg);
  color: var(--cor-primaria);
  margin-bottom: var(--espaco-2);
  border-bottom: 2px solid var(--cor-primaria);
  padding-bottom: var(--espaco-1);
}

/* Parágrafos — espaçamento e fluidez de leitura */
section p {
  font-size: var(--fonte-md);
  line-height: 1.6;
  margin-bottom: var(--espaco-2);
}

/* Listas — indentação e espaçamento entre itens */
section ul {
  padding-left: var(--espaco-3);
  margin-bottom: var(--espaco-2);
}

section ul li {
  margin-bottom: var(--espaco-1);
  line-height: 1.5;
}

/* Links internos — destaque visual e interação */
section a {
  color: var(--cor-secundaria);
  font-weight: bold;
  text-decoration: none;
}

section a:hover {
  text-decoration: underline;
}

/* Galeria de imagens — layout flexível e centralizado */
.galeria-projetos {
  display: flex;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--espaco-2);
}

/* Responsividade — ajustes para diferentes tamanhos de tela */
@media (max-width: 1200px) {
  main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  nav ul {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  body {
    font-size: var(--fonte-sm);
  }

  section {
    padding: var(--espaco-3);
  }

  section h2 {
    font-size: var(--fonte-md);
  }

  article {
    padding: 0 var(--espaco-2);
  }
}

@media (max-width: 576px) {
  header, footer {
    text-align: center;
  }
}

@media (max-width: 400px) {
  img {
    border-radius: 0;
  }
}