/* ==========================================================================
   06 · Página de curso · modalidade Online
   Particularidades da Online (escopo: body.imp-pg-curso--online):
   título da grade sem contorno, total de disciplinas, legenda de níveis e
   nível por disciplina (Figma 4451:1210), linha única no Investimento.
   ========================================================================== */
.imp-pg-curso--online .imp-grade__titulo--normal {
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  text-transform: none;
}
.imp-pg-curso--online .imp-grade__total { margin-top: 32px; font-size: 16px; line-height: 20px; }
.imp-pg-curso--online .imp-grade__total span { font-family: var(--imp-font-display); font-size: 20px; }

.imp-niveis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; }
.imp-niveis__rotulo { font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--imp-text-soft); }
.imp-niveis__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-nivel-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  font-family: var(--imp-font-mono);
  font-size: 12px;
  line-height: 16px;
}
.imp-nivel-chip__barras { display: inline-flex; gap: 2px; }
.imp-nivel-chip__barras i { display: block; width: 3px; height: 10px; background: currentColor; }
.imp-nivel-chip--base { color: var(--imp-text-primary); }
.imp-nivel-chip--inter { color: var(--imp-cyan); }
.imp-nivel-chip--avanc { background: var(--imp-lime); border-color: var(--imp-lime); color: var(--imp-text-inverse); }

.imp-pg-curso--online .imp-nivel { flex: none; font-family: var(--imp-font-mono); font-size: 12px; line-height: 16px; color: var(--imp-text-tertiary); text-transform: uppercase; }

@media (min-width: 768px) {
  .imp-pg-curso--online .imp-grade__titulo--normal { font-size: 41.6px; line-height: 44.9px; }
}
@media (min-width: 768px) {
  .imp-pg-curso--online .imp-invest__linha--unica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp-pg-curso--online .imp-invest__linha--unica .imp-btn { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .imp-pg-curso--online .imp-invest__linha--unica { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .imp-pg-curso--online .imp-invest__linha--unica .imp-btn { grid-column: auto; }
}