/* ============================================================================
🔝 Cabeçalho Institucional – Agroverso 12/10
🌿 Fundo verde escuro, logotipo refinado, título centralizado e slogan inspirador
============================================================================ */
.header-principal {
  background-color: var(--cor-principal);   /* Verde profundo institucional */
  color: var(--cor-clara);                  /* Texto claro */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--espaco-xl) var(--espaco-sm) var(--espaco-md);
  border-bottom: 6px solid var(--cor-destaque);
  box-shadow: var(--sombra-leve);
  gap: 0.4rem;
}

/* ============================================================================
🎓 .titulo-site – Palavra “AGROVERSO” com clareza, impacto e refinamento 12/10
============================================================================ */
.titulo-site {
  color: #ffffff;                      /* Branco puro */
  font-size: 2.4rem;                   /* Maior presença visual */
  font-weight: 800;                   /* Peso reforçado para autoridade */
  letter-spacing: 0.75px;              /* Espaçamento preciso */
  font-family: 'Poppins', sans-serif;  /* Tipografia moderna */
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* Leitura sobre fundo escuro */
  line-height: 1.2;
}

/* ============================================================================
🎯 .secao-titulo – Títulos principais com destaque regenerativo e harmonia visual
============================================================================ */
.secao-titulo {
  font-size: 1.75rem;                        /* Tamanho de destaque ideal */
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  color: var(--cor-principal);
  line-height: 1.3;
  letter-spacing: 0.3px;
  margin: var(--espaco-lg) auto var(--espaco-md);
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ============================================================================
📚 .cursos-container – Alinhamento e disposição dos cards de cursos
============================================================================ */
.cursos-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--espaco-lg);
  margin-top: var(--espaco-md);
  text-align: left; /* Cada card alinha seu conteúdo internamente */
}


/* ============================================================================
🗣️ .slogan – Frase institucional com emoção regenerativa e clareza visual
============================================================================ */
.slogan {
  font-size: 1.05rem;                        /* Leve ampliação para leitura ideal */
  font-weight: 400;
  font-family: 'Cabin', sans-serif;         /* Tipografia empática e legível */
  color: #e6f2ec;                            /* Cor suave clara sobre fundo escuro */
  text-align: center;
  line-height: 1.5;
  max-width: 720px;
  margin-top: 0.25rem;
  opacity: 0.96;
}

/* 🌟 Destaque para as palavras nobres: sabedoria, força e beleza */
.slogan strong {
  color: #f4d35e;     /* Dourado regenerativo */
  font-weight: 600;
}

/* ============================================================================
🌐 Variáveis Globais do Agroverso – Cores, Espaçamentos, Sombras
============================================================================ */
:root {
  /* 🎨 Paleta de Cores Institucionais */
  --cor-principal: #004225;       /* Verde profundo regenerativo */
  --cor-clara: #ffffff;           /* Branco puro para texto principal */
  --cor-destaque: #f4d35e;        /* Dourado regenerativo – sabedoria */
  --cor-secundaria: #7bb661;      /* Verde claro para destaques naturais */
  --cor-suave: #e6f2ec;           /* Verde claro suave para fundos */
  
  /* 📏 Espaçamentos Padrão */
  --espaco-xs: 0.25rem;
  --espaco-sm: 0.5rem;
  --espaco-md: 1rem;
  --espaco-lg: 1.5rem;
  --espaco-xl: 2rem;

  /* 🧱 Sombra para elementos principais */
  --sombra-leve: 0 2px 6px rgba(0, 0, 0, 0.08);
}