/* Entrada do portal e painel da turma. */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: start;
  padding: 18px 0 30px;
}
.hero-title { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 14px; }
.hero-sub { color: var(--text-soft); font-size: 15.5px; max-width: 52ch; }
.hero-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.hero-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: var(--text-soft);
}
.hero-list span { font-size: 17px; line-height: 1.35; }

.auth-card { padding: 22px; }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tab {
  flex: 1; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-soft);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tab:hover { background: var(--surface-2); }
.tab.is-active { background: var(--primary-soft); color: var(--primary); }
.auth-form .field:last-of-type { margin-bottom: 18px; }

.painel-turma { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 6px; }
.cartao-passo { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.cartao-passo.is-ok { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .hero-title { font-size: 27px; }
}