/* =============================================================
   certificacoes.css — estilos da página certificacoes.html
   Extraído do <style> que ficava dentro do HTML.
   Carregado depois de css/style.css, então sobrescreve o global.
   ============================================================= */

.progress-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: var(--shadow);
}
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.progress-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}
.progress-percent {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--green-primary);
  font-style: italic;
}
.progress-bar {
  height: 12px;
  background: var(--green-light);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}
[data-theme="dark"] .progress-bar {
  background: rgba(39,149,68,0.15);
}
.progress-fill {
  height: 100%;
  background: var(--gradient-green);
  border-radius: 6px;
  transition: width 1.2s ease-out;
  width: 0;
}
.progress-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
}
@media (max-width: 700px) {
  .cert-grid { grid-template-columns: 1fr !important; }
}