/* ==========================================================================
   Formas de Ingresso — estilos específicos da página.
   "Preço Fixo" e "Cursos em Destaque" reaproveitam components.css + home.css.
   ========================================================================== */

/* .page-intro (breadcrumb + título) está em components.css: as páginas de forma
   e de unidade usam o mesmo bloco e carregam outro $page_css. */

/* ==========================================================================
   Faixa de reabertura de matrícula
   ========================================================================== */

.reabertura {
  padding-block: var(--sp-12);
  color: var(--white);
  background: var(--surface-dark);
}

.reabertura__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .reabertura__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.reabertura__titulo {
  color: var(--white);
  font-size: clamp(1.5rem, 1.16rem + 1.4vw, var(--fs-h2));
}

.reabertura__texto {
  margin-top: var(--sp-2);
  color: var(--gray-200);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
}

.reabertura__cta {
  /* Laranja da marca sobre #2f3542 dá 4.45:1; o claro dá 5.42:1. */
  --btn-color: var(--us-orange-light);
  min-width: 22rem;
  justify-self: start;
}

@media (min-width: 64rem) {
  .reabertura__cta {
    justify-self: end;
  }
}

/* ==========================================================================
   Indique e Ganhe
   ========================================================================== */

.indique__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .indique__grid {
    gap: var(--sp-10);
    grid-template-columns: minmax(0, 558fr) minmax(0, 558fr);
  }
}

.indique__text > * + * {
  margin-top: var(--sp-4);
}

/* No frame a primeira linha do parágrafo vai até "você" (~530px). */
.indique__text .lead {
  max-width: 30em;
}

/* ---------- Passo a passo ---------- */

.passos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  color: var(--white);
  background: var(--us-green-dark);
  border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
  .passos {
    padding: var(--sp-8);
  }
}

.passos__titulo {
  color: var(--white);
  font-size: clamp(var(--fs-h4), 1rem + 1vw, var(--fs-h3));
  font-weight: var(--fw-regular);
}

.passos__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  counter-reset: passo;
}

/**
 * Cada passo é uma pílula com um leve gradiente para a direita, como no frame,
 * e o número num círculo verde saliente à esquerda.
 */
.passo {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-2);
  background: linear-gradient(90deg, #045c38, #048050);
  border-radius: var(--radius-pill);
}

.passo__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  background: var(--us-green);
  border-radius: var(--radius-pill);
}

.passo__texto {
  padding-right: var(--sp-4);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
}

.passos__nota {
  margin-top: var(--sp-2);
  color: var(--gray-200);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* ==========================================================================
   Teste vocacional

   Dobra que substituiu "Cursos em Destaque" nesta página — deck, slide 33. O
   slide pede o conteúdo centralizado, o que é a exceção da regra do projeto de
   alinhar texto à esquerda: são quatro linhas curtas em torno de um CTA único,
   e não um parágrafo de leitura.
   ========================================================================== */

.vocacional__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.vocacional__titulo {
  margin: 0;
}

/* `text-wrap: balance` evita a última linha órfã com uma palavra só. */
.vocacional__texto {
  margin: 0;
  text-wrap: balance;
}