/* css/styles.css - ADIÇÕES PARA diferenciais.html */

/* Estilo para o cabeçalho da página de diferenciais (se não for usar .hero) */
.page-header {
  /* background-color: var(--background-light); /* Já definido inline, mas pode ser aqui */
  /* padding-top: 120px; /* Ajuste conforme a altura da sua navbar fixa */
  /* padding-bottom: 3rem; /* Espaçamento inferior para o título da página */
}

/* Estilização dos cards de vantagem */
.vantagem-card {
  background-color: white;
  border-radius: 0.5rem; /* Mesmo border-radius dos seus .problem-card ou .solution-card */
  padding: 2rem; /* Um bom padding interno */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil, como nos seus cards */
  margin-bottom: 2.5rem; /* Espaço entre os cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vantagem-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.vantagem-icon {
  color: var(--primary); /* Cor primária para o ícone */
  font-size: 2.5rem; /* Tamanho do ícone */
  margin-bottom: 1rem;
  /* Se quiser alinhar o ícone à esquerda e o título à direita:
  display: flex;
  align-items: center;
  gap: 1rem; */
}
/* Se usar o flex acima, ajuste o h3:
.vantagem-card .vantagem-icon + .vantagem-title {
  margin-bottom: 0;
}
*/


.vantagem-title {
  font-size: 1.5rem; /* Tamanho do título do card */
  color: var(--text-dark);
  margin-bottom: 1rem; /* Espaço abaixo do título do card */
  /* Se não usar flex com ícone:
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-light);
  */
}

.vantagem-list {
  list-style-type: none; /* Remove bullets padrão, você pode adicionar customizados se quiser */
  padding-left: 0;
  margin-bottom: 1rem;
}

.vantagem-list > li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem; /* Espaço para um possível ícone de lista */
  position: relative;
  line-height: 1.7;
}

/* Adiciona um "bullet" customizado ou FontAwesome icon */
.vantagem-list > li::before {
  content: "\f058"; /* Exemplo: ícone de check do FontAwesome (fas fa-check-circle) */
  font-family: "Font Awesome 6 Free"; /* Ou "Font Awesome 5 Free" etc. */
  font-weight: 900; /* Necessário para ícones sólidos do FontAwesome */
  color: var(--primary);
  position: absolute;
  left: 0;
  top: 5px; /* Ajuste vertical */
}

.vantagem-sublist {
  list-style-type: none;
  padding-left: 1.5rem; /* Indentação para sub-lista */
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.vantagem-sublist > li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.2rem;
}

.vantagem-sublist > li::before {
  content: "\f111"; /* Exemplo: círculo sólido (fas fa-circle) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--accent); /* Cor de destaque para sub-itens */
  font-size: 0.6em; /* Tamanho menor para sub-bullet */
  position: absolute;
  left: 0;
  top: 8px; /* Ajuste vertical */
}


.vantagem-conclusao {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--gray-light);
  font-size: 1rem;
  color: var(--gray-medium);
}

.vantagem-conclusao strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* Ajustes para o link ativo na navbar desta página (se necessário, o JS deve cuidar disso, mas pode forçar) */
.navbar-menu .navbar-item a.active {
  /* color: var(--primary); /* Cor de destaque para o link ativo */
  /* border-bottom: 2px solid var(--primary); /* Sublinhado para o link ativo */
  /* padding-bottom: calc(0.25rem - 2px); /* Ajuste para o padding com borda */
  /* Essas regras já devem existir ou serem similares no seu styles.css para a navegação da home */
}

/* Garantir que o padding da navbar fixa seja considerado no início do conteúdo */
main > section:first-child {
  /* padding-top: 100px; /* Ajuste esse valor para ser igual ou maior que a altura da sua navbar */
  /* O ideal é que a navbar tenha uma altura fixa e você use esse valor aqui */
  /* Se já está usando `padding-top: 120px;` na primeira seção, está ok. */
}