/* ==========================================================================
   Graduação Presencial — Figma: node 1043-1727 (mobile 1043-1630).
   Mobile-first; o desktop abre em duas colunas a partir de 1024px.
   ========================================================================== */

/* ---------- Intro ---------- */

.grad-intro {
  padding-bottom: var(--sp-16);
}

/* No mobile o vídeo fica entre o texto e o botão; no desktop o botão sobe para a coluna do texto. */
.grad-intro__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-areas: "texto" "video" "cta";
}

@media (min-width: 64rem) {
  .grad-intro__grid {
    column-gap: var(--sp-6);
    row-gap: var(--sp-8);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "texto video" "cta video";
  }
}

.grad-intro__text { grid-area: texto; }
.grad-intro__video { grid-area: video; }
.grad-intro__cta { grid-area: cta; }

.grad-intro__title {
  color: var(--color-heading);
  font-size: clamp(2.25rem, 1.9rem + 1vw, 2.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

.grad-intro__title strong,
.grad-preco__titulo strong,
.grad-infra__titulo strong {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

/* "PRESENCIAL" desce para a segunda linha no mobile, como no frame. */
@media (max-width: 63.99rem) {
  .grad-intro__title strong {
    display: block;
  }
}

.grad-intro__p {
  margin-top: var(--sp-5);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-md);
}

.grad-intro__p strong {
  color: var(--color-text);
}

.grad-intro__cta .btn {
  width: 100%;
}

@media (min-width: 64rem) {
  .grad-intro__cta .btn {
    width: auto;
    min-width: 16rem;
  }
}

/* Mesma caixa 16/9 do player, para a troca da facade não mexer no layout. */
.grad-video img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* ---------- Diferenciais ---------- */

.grad-dif__track {
  gap: var(--sp-4);
  padding-block: var(--sp-2) var(--sp-4);
}

.grad-dif__slide {
  flex-basis: 72%;
}

@media (min-width: 40rem) {
  .grad-dif__slide {
    flex-basis: calc((100% - var(--sp-4)) / 2);
  }
}

@media (min-width: 64rem) {
  .grad-dif__track {
    gap: var(--sp-6);
  }

  .grad-dif__slide {
    flex: 1 1 0;
  }
}

.grad-dif__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.grad-dif__icon {
  width: 3rem;
  height: 3rem;
  color: var(--us-orange);
  stroke: currentColor;
}

.grad-dif__titulo {
  margin-top: var(--sp-6);
  color: var(--color-heading);
  font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-wrap: balance;
}

.grad-dif__texto {
  margin-top: var(--sp-5);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-md);
}

/* ---------- Preço Fixo (variante escura desta página) ---------- */

.grad-preco__titulo {
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

.grad-preco__sub {
  color: var(--white);
  font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.625rem);
}

.grad-preco__body {
  color: var(--white);
}

.grad-preco__body strong {
  color: var(--us-orange-light);
}

/* Mobile: texto, vídeo e botão; desktop: botão sob o texto, vídeo à direita. */
.section--dark .preco-fixo {
  grid-template-areas: "texto" "video" "cta";
}

.preco-fixo__text { grid-area: texto; }
.section--dark .preco-fixo__video { grid-area: video; }

.grad-preco__cta {
  grid-area: cta;
  margin-top: 0;
}

.grad-preco__cta .btn {
  width: 100%;
}

@media (min-width: 64rem) {
  .section--dark .preco-fixo {
    row-gap: 0;
    grid-template-rows: auto 1fr;
    grid-template-areas: "texto video" "cta video";
  }

  .grad-preco__cta .btn {
    width: auto;
  }
}

/* ---------- Infraestrutura ---------- */

.grad-infra__head {
  max-width: 40rem;
  margin: 0 auto var(--sp-10);
  text-align: center;
}

.grad-infra__titulo {
  color: var(--color-heading);
  font-size: clamp(2.25rem, 1.9rem + 1vw, 2.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

@media (max-width: 63.99rem) {
  .grad-infra__titulo strong {
    display: block;
  }
}

.grad-infra__sub {
  margin-top: var(--sp-3);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

.grad-infra__grid {
  display: grid;
  gap: var(--sp-1);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .grad-infra__grid {
    gap: var(--sp-2);
  }
}

.grad-infra__grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.grad-infra__cta {
  margin-top: var(--sp-10);
  text-align: center;
}

.grad-infra__cta .btn {
  width: 100%;
}

@media (min-width: 48rem) {
  .grad-infra__cta .btn {
    width: auto;
    min-width: 14rem;
  }
}

/* ---------- Formas de Ingresso ---------- */

.grad-formas .formas__titulo {
  margin-bottom: var(--sp-10);
  color: var(--color-heading);
  font-size: clamp(2.25rem, 1.9rem + 1vw, 2.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  text-align: center;
}

.grad-formas .forma__texto small {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}

.grad-formas .formas__cta,
.grad-dif .grad-infra__cta {
  margin-top: var(--sp-10);
  text-align: center;
}

@media (max-width: 47.99rem) {
  .grad-formas .formas__cta .btn {
    width: 100%;
  }
}