/* ==========================================================================
   CASJ — Novos Alunos (novos-alunos.html)
   Componente Figma: "NOVOS ALUNOS" (2641:6856)
   ========================================================================== */

.na-hero {
  padding-block: 64px;
  display: grid;
  grid-template-columns: 598fr 628fr;
  gap: 54px;
  align-items: center;
}
.na-hero__img { aspect-ratio: 598 / 519; border-radius: 16px; overflow: hidden; }
.na-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 575.98px) {
  .na-hero__img { aspect-ratio: 1 / 1; }
}

.na-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 20px;
}
.na-hero__text { font-size: 18px; line-height: 1.6; color: var(--casj-cinza-texto); margin-bottom: 32px; }

.na-features {
  display: flex;
  background: #f5f5f5;
  border-radius: 16px;
  padding: 20px 38px;
  margin-bottom: 32px;
}
.na-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-inline: 12px;
  border-left: 1px solid #d9d9d9;
}
.na-feature:first-child { border-left: 0; }
.na-feature__icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: #fff;
  color: var(--casj-azul);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.na-feature__icon img { width: 24px; height: 24px; object-fit: contain; }
.na-feature strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--casj-azul);
  font-size: 16px;
}
.na-feature span {
  font-size: 14px;
  line-height: 1.4;
  color: #606060;
}

.na-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.na-hero__actions > .btn-casj { flex: 1 1 0; }

@media (max-width: 900px) {
  .na-hero { grid-template-columns: 1fr; }
  .na-hero__img { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .na-features { flex-direction: column; gap: 20px; }
  .na-feature { border-left: 0; border-top: 1px solid #d9d9d9; padding-top: 20px; }
  .na-feature:first-child { border-top: 0; padding-top: 0; }
}

/* Mobile (Figma "NOVOS ALUNOS" — frame 430px): sem a lista de destaques,
   texto centralizado e a imagem entre o texto e o botão (ordem diferente da
   versão desktop/tablet, onde a imagem vem antes do texto). O wrapper
   .na-hero__body vira "display: contents" pra que título/texto/botão
   participem da mesma ordem flex que a imagem, sem mudar o HTML. */
@media (max-width: 575.98px) {
  .na-hero { display: flex; flex-direction: column; padding-block: 40px; }
  .na-hero__body { display: contents; }

  .na-hero__title { order: 1; font-size: 26px; text-align: center; }
  .na-hero__text { order: 2; font-size: 20px; text-align: center; margin-bottom: 24px; }
  .na-features { display: none; }
  .na-hero__img { order: 3; max-width: none; margin-inline: 0; margin-bottom: 24px; }
  .na-hero__body > .na-hero__actions { order: 4; flex-direction: column; align-self: stretch; }
  /* Figma (3517:6762): botão "Agende uma visita" continua azul (#245699,
     igual .btn-casj--solid). Em touch não existe :hover — usa :active pro
     feedback de toque virar vermelho (diferente do azul-escuro padrão do
     resto do site); :hover fica pra quando o mobile tem mouse/trackpad. */
  .na-hero__actions .btn-casj--solid:hover,
  .na-hero__actions .btn-casj--solid:active { background: var(--casj-vermelho); }
}