/* estilos.css */

/* Variáveis de cores personalizadas (pode ajustar conforme sua identidade visual) */
:root {
  --cor-primary: #0d6efd; /* Cor primária Bootstrap padrão (azul) */
  --cor-secundaria: #6c757d; /* Cinza escuro */
  --cor-foreground: #212529; /* Cor de texto padrão */
  --cor-background: #ffffff; /* Fundo padrão */
  --cor-border: #dee2e6; /* Borda padrão */
  --cor-accent: #198754; /* Verde Bootstrap */
}

/* Ajusta o posicionamento das seções para que o título não fique coberto */
section[id]::before {
  content: "";
  display: block;
  height: 60px;       /* ajuste esse valor para corresponder exatamente à altura da sua navbar */
  margin-top: -60px;  /* força o deslocamento para cima */
  visibility: hidden;
}

/* Estilo para manter o header fixo no topo */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030; /* maior que o z-index do Bootstrap para ficar na frente */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Para evitar que o conteúdo abaixo fique escondido sob o header fixo, adicione uma margem ou padding na parte superior do conteúdo principal */
main {
  padding-top: 80px; /* ajuste conforme a altura do seu header */
}


/* Aplicar fontes customizadas, se desejar */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Logo na Navbar */
.navbar-brand img {
  height: 50px;
  width: auto;
}

/* Cabeçalho */
header {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Seção de Hero */
section.bg-gradient {
  background: linear-gradient(135deg, #0d6efd, #6f42c1);
}

/* Títulos principais */
h1.display-4,
h2,
h3 {
  font-family: 'Arial', sans-serif;
}

/* Botões personalizados */
.btn-primary {
  background-color: var(--cor-primary);
  border-color: var(--cor-primary);
}
.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a53be;
}

/* Botões outline */
.btn-outline-secondary {
  color: var(--cor-secundaria);
  border-color: var(--cor-secundaria);
}
.btn-outline-secondary:hover {
  background-color: var(--cor-secundaria);
  color: #fff;
}

/* Cartões específicos */
.card {
  border-radius: 10px;
  border: 1px solid var(--cor-border);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* Rodapé */
footer {
  background-color: #222;
  color: #ccc;
}

/* Títulos de módulos e seções */
h4 {
  color: var(--cor-primary);
}

/* Estilos para listas */
ul {
  padding-left: 20px;
}
li {
  margin-bottom: 8px;
}

/* Alguns componentes adicionais */
.shadow {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.hover-shadow-xl:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* Responsividade adicional, se necessário */
@media(max-width: 768px) {
  /* Ajustes específicos para telas menores */
  body {
    font-size: 14px;
  }
}


/* animação bootstrap */
/* Animações de entrada */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.in-view {
  animation: fadeUp 0.6s ease-out forwards;
}