@charset "utf-8";

/* =========================================================================
   PORTAL EDUCAÇÃO + — Portal de Cursos
   Folha única. Ordem: tokens → reset → acessibilidade → layout →
   componentes → páginas → utilitários → media queries.
   Breakpoint único: 1025px (≥1025 desktop, ≤1024 mobile).
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Fundos e neutros */
  --bg: #fafafa;
  --surface: #ffffff;
  --graphite: #1f2937;
  --ink: #0f172a;
  --ink-body: #374151;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  /* #9CA3AF do design reprova em WCAG AA sobre #FAFAFA (2,5:1).
     Metadados usam --ink-4, visualmente próximo e com 4,8:1. */
  --ink-4: #6b7280;
  --hairline: #e5e7eb;
  --line-strong: #d1d5db;

  /* Acentos */
  --teal: #0d9488;
  --gold: #eab308;
  --blue: #3b82f6;
  --success: #10b981;
  --danger: #dc2626;

  /* Cor por nível */
  --grad-badge-bg: #dbeafe;
  --grad-badge-fg: #1d4ed8;
  --grad-cta: #f97316;
  --grad-cta-ink: #3b1503;
  --pos-badge-bg: #ede9fe;
  --pos-badge-fg: #4f46e5;
  --pos-cta: #10b981;
  --pos-cta-ink: #053b2b;

  /* Tipografia */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Espaçamento — escala 4px */
  --gutter: clamp(20px, 5vw, 48px);
  --container: 1240px;
  --section-y: clamp(40px, 7vw, 104px);

  /* Raios */
  --r-check: 7px;
  --r-logo: 8px;
  --r-field: 14px;
  --r-card: 22px;
  --r-aside: 24px;
  --r-pill: 999px;

  /* Sombras */
  --sh-rest: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sh-card-hover: 0 30px 54px -28px rgba(15, 23, 42, 0.45);
  --sh-mod-hover: 0 28px 50px -26px rgba(15, 23, 42, 0.4);
  --sh-aside: 0 20px 44px -30px rgba(15, 23, 42, 0.5);
  --sh-dark-btn: 0 18px 32px -16px rgba(15, 23, 42, 0.7);
  --sh-gold-btn: 0 12px 22px -10px rgba(234, 179, 8, 0.9);
  --sh-field: inset 0 0 0 1px var(--hairline);
  --sh-field-focus: inset 0 0 0 2px var(--teal);

  --t: 0.3s ease;
  --header-h: 88px;
}

/* Nível como contexto de cor: os componentes leem --lvl-*. */
[data-nivel="Graduação"],
.lvl-grad {
  --lvl-badge-bg: var(--grad-badge-bg);
  --lvl-badge-fg: var(--grad-badge-fg);
  --lvl-cta: var(--grad-cta);
  --lvl-cta-ink: var(--grad-cta-ink);
}
[data-nivel="Pós-graduação"],
.lvl-pos {
  --lvl-badge-bg: var(--pos-badge-bg);
  --lvl-badge-fg: var(--pos-badge-fg);
  --lvl-cta: var(--pos-cta);
  --lvl-cta-ink: var(--pos-cta-ink);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--t);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--t);
}

svg {
  display: block;
}

/* ---------- 3. Acessibilidade -------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--r-field);
  transition: top var(--t);
}
.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rise {
  animation: riseIn 0.35s ease both;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--form {
  max-width: 880px;
}
.container--narrow {
  max-width: 760px;
}

.page {
  flex: 1 0 auto;
  padding-bottom: clamp(56px, 8vw, 104px);
}

.section {
  padding-block: var(--section-y);
}

.section__head > * + * {
  margin-top: 14px;
}

.section__title {
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.section__lead {
  font-size: 17px;
  color: var(--ink-3);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}

/* ---------- 5. Botões, chips, badges ------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  padding: 17px 34px;
  border-radius: var(--r-pill);
  text-align: center;
  cursor: pointer;
  transition: all var(--t);
}

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-dark-btn);
}

.btn--ghost {
  background: transparent;
  color: var(--graphite);
}
.btn--ghost:hover {
  color: var(--teal);
  background: #f1f5f4;
}

.btn--gold {
  background: var(--gold);
  color: var(--graphite);
  font-size: 15px;
  padding: 11px 22px;
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-gold-btn);
}

/* CTA por nível. Texto em tinta escura da própria cor: mantém a paleta do
   design e atinge contraste AA, que branco sobre #F97316 (2,9:1) não atinge.
   Para voltar ao branco do protótipo, trocar por #fff aqui. */
.btn--level {
  background: var(--lvl-cta, var(--grad-cta));
  color: var(--lvl-cta-ink, var(--grad-cta-ink));
  font-size: 14.5px;
  padding: 13px 26px;
}
.btn--level:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -14px var(--lvl-cta, var(--grad-cta));
}

.btn--block {
  display: flex;
  width: 100%;
  font-size: 16.5px;
  padding: 18px 28px;
}

.btn--submit {
  background: var(--ink);
  color: var(--bg);
  font-size: 16.5px;
  padding: 18px 38px;
}
.btn--submit:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-dark-btn);
}
.btn--submit[data-sending="true"] {
  background: var(--success);
  color: #fff;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--lvl-badge-bg, var(--grad-badge-bg));
  color: var(--lvl-badge-fg, var(--grad-badge-fg));
}

.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: all var(--t);
}
.chip[aria-pressed="true"] {
  background: var(--graphite);
  color: var(--bg);
  box-shadow: 0 10px 20px -12px rgba(31, 41, 55, 0.9);
}

.chip--static {
  font-size: 14px;
  color: var(--ink-body);
  padding: 11px 18px;
}
.chip--static:hover {
  transform: translateY(-2px);
  color: var(--teal);
  box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.4);
}

.link-quiet {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-quiet:hover {
  color: var(--teal);
}
.link-back {
  color: var(--ink-3);
}
.link-back:hover {
  color: var(--teal);
  transform: translateX(-3px);
}

/* ---------- 6. Header ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__bar {
  max-width: var(--container);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--graphite);
}
.brand:hover {
  transform: translateY(-2px);
}
.brand__mark {
  width: 26px;
  height: 26px;
  border-radius: var(--r-logo);
  background: var(--graphite);
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-2);
}
.nav__link:hover {
  color: var(--teal);
  transform: translateY(-2px);
}
.nav__link--pos:hover {
  color: var(--pos-badge-fg);
}
.nav__link[aria-current="page"] {
  color: var(--ink);
}

/* Hambúrguer — só existe abaixo de 1025px */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--graphite);
  border-radius: 2px;
  transition: all var(--t);
}
.nav-toggle span:last-child {
  width: 14px;
}

.nav-panel {
  display: none;
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  padding-block: clamp(48px, 8vw, 110px) clamp(56px, 7vw, 96px);
}
.hero__title {
  font-weight: 700;
  font-size: clamp(38px, 6.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin-top: 20px;
}
.hero__lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 58ch;
  margin-top: 32px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}

/* ---------- 8. Modalidades ----------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.mod-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 36px 32px 40px;
  box-shadow: var(--sh-rest);
  transition: all var(--t);
  height: 100%;
}
.mod-card:hover,
.mod-card:focus-within {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--sh-mod-hover);
}
.mod-card__bar {
  width: 34px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--mod-color, var(--teal));
}
.mod-card__title {
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.02em;
  margin-top: 26px;
}
.mod-card__text {
  font-size: 15.5px;
  color: var(--ink-3);
  max-width: 34ch;
  margin-top: 14px;
}
.mod-card__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--mod-color, var(--teal));
  margin-top: 26px;
}
.mod-card__link:hover {
  transform: translateX(3px);
}

/* ---------- 9. Filtros e catálogo ---------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 40px;
}
.filters__group {
  min-width: 0;
}
.filters__legend {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0;
  margin-bottom: 14px;
}
.filters__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result-count {
  font-size: 14px;
  color: var(--ink-4);
  margin-top: 36px;
  margin-bottom: 18px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px 30px 28px;
  box-shadow: var(--sh-rest);
  transition: all var(--t);
  height: 100%;
}
.course-card:hover,
.course-card:focus-within {
  transform: translateY(-6px) scale(1.025);
  box-shadow: var(--sh-card-hover);
}
.course-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.course-card__mod {
  font-size: 13px;
  color: var(--ink-4);
}
.course-card__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 22px;
}
.course-card__title a:hover {
  color: var(--teal);
}
.course-card__summary {
  font-size: 15px;
  color: var(--ink-3);
  max-width: 38ch;
  margin-top: 14px;
}
.course-card__meta {
  font-size: 13.5px;
  color: var(--ink-4);
  margin-top: 18px;
}
.course-card__spacer {
  flex: 1;
  min-height: 26px;
}
.course-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.course-card__more:hover {
  transform: translateX(3px);
}

.empty-state {
  display: none;
  text-align: center;
  padding-block: 72px;
}
.empty-state[data-visible="true"] {
  display: block;
}
.empty-state__title {
  font-weight: 600;
  font-size: 20px;
}
.empty-state p {
  color: var(--ink-3);
  margin-top: 12px;
}
.empty-state button {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--teal);
  margin-top: 20px;
}

/* ---------- 10. Breadcrumb ----------------------------------------------- */
.breadcrumb {
  padding-top: 28px;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-4);
}
.breadcrumb a:hover {
  color: var(--teal);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--line-strong);
}
.breadcrumb [aria-current="page"] {
  color: var(--ink-2);
}

/* ---------- 11. Detalhe do curso ----------------------------------------- */
.course-head {
  margin-top: 40px;
}
.course-head__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-4);
}
.course-head__title {
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-top: 22px;
}
.course-head__lead {
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 24px;
}

.course-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 6vw, 64px);
}


.prose {
  margin-top: 56px;
}
.prose h2 {
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
/* Seções irmãs de "Sobre a profissão": mesmo nível semântico (h2), escala
   visual menor. Hierarquia de heading e hierarquia tipográfica são coisas
   diferentes — o robô e o leitor de tela leem a primeira. */
.prose h3,
.prose .h-sub {
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-body);
  max-width: 65ch;
  margin-top: 24px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.market {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 72px);
  margin-top: 26px;
}
.market__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  display: block;
}
.market__label {
  font-size: 14.5px;
  color: var(--ink-3);
  margin-top: 6px;
}

.steps {
  max-width: 65ch;
  margin-top: 22px;
}
.steps li {
  display: flex;
  gap: 16px;
  padding: 18px 4px;
  transition: transform var(--t);
}
.steps li:hover {
  transform: translateX(4px);
}
.steps__index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-4);
  min-width: 26px;
  flex: none;
  padding-top: 4px;
}
.steps__text {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-body);
}

.enroll-aside {
  background: var(--surface);
  border-radius: var(--r-aside);
  padding: 34px 32px 36px;
  box-shadow: var(--sh-aside);
}
.enroll-aside__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.enroll-aside__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 10px;
}
.spec-list {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.spec-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.spec-list dt {
  font-size: 15px;
  color: var(--ink-3);
}
.spec-list dd {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--graphite);
  margin: 0;
  text-align: right;
}
.enroll-aside .btn {
  margin-top: 34px;
}
.enroll-aside__note {
  font-size: 13px;
  color: var(--ink-4);
  text-align: center;
  margin-top: 18px;
}

/* ---------- 12. Formulário ----------------------------------------------- */
.form-head {
  margin-top: 40px;
}
.form-head__title {
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-top: 18px;
}
.form-head__lead {
  font-size: 16.5px;
  color: var(--ink-3);
  max-width: 56ch;
  margin-top: 22px;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  margin-top: 56px;
}
.fieldset:first-of-type {
  margin-top: 64px;
}
.fieldset > legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 26px;
}
.field-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.field > label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-2);
}
.field input,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px evita o zoom automático no iOS */
  color: var(--ink-body);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-field);
  padding: 16px 18px;
  box-shadow: var(--sh-field);
  transition: all var(--t);
}
.field input::placeholder {
  color: var(--ink-4);
}
.field input:focus,
.field select:focus {
  outline: none;
  box-shadow: var(--sh-field-focus);
}
.field input:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.field-note {
  font-size: 14px;
  color: var(--teal);
  margin-top: 18px;
}
.field-note[hidden] {
  display: none;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 60ch;
  margin-top: 44px;
  cursor: pointer;
}
.consent input {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
}
.consent__box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-check);
  margin-top: 1px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: all var(--t);
  display: grid;
  place-items: center;
}
.consent__box svg {
  opacity: 0;
  transition: opacity var(--t);
}
.consent input:checked + .consent__box {
  background: var(--success);
  box-shadow: inset 0 0 0 2px var(--success);
}
.consent input:checked + .consent__box svg {
  opacity: 1;
}
.consent input:focus-visible + .consent__box {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.consent__text {
  font-size: 15px;
  color: var(--ink-2);
}
.consent__text a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-error {
  font-size: 14.5px;
  color: var(--danger);
  margin-top: 30px;
}
.form-error:empty {
  display: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}
.form-actions__hint {
  font-size: 13.5px;
  color: var(--ink-4);
}

/* ---------- 13. Confirmação ---------------------------------------------- */
.done-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: #ecfdf5;
  display: grid;
  place-items: center;
}
.done-title {
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-top: 30px;
}
.done-lead {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 22px;
}
.summary-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--sh-rest);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.summary-card dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.summary-card dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 10px 0 0;
}
.summary-card dd.is-mono {
  font-family: var(--font-mono);
  font-weight: 400;
}
.summary-card dd.is-ok {
  color: var(--success);
}
.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* ---------- 14. Footer --------------------------------------------------- */
/* Compacto de propósito: sobraram marca, três links e a linha legal. Um rodapé
   em colunas para esse conteúdo era só espaço vazio. */
.site-footer {
  margin-top: auto;
  background: var(--graphite);
  color: #d1d5db;
}

.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 28px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: #fafafa;
}
.site-footer__mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--gold);
  flex: none;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-footer__nav a {
  font-size: 14.5px;
  color: #d1d5db;
}
.site-footer__nav a:hover {
  color: var(--gold);
}

/* `margin-left:auto` empurra a linha legal para a direita no desktop; quando
   o flex quebra no mobile ela vira uma linha própria, alinhada à esquerda. */
.site-footer__legal {
  margin-left: auto;
  font-size: 13px;
  color: #9ca3af;
}

@media (max-width: 1024px) {
  .site-footer__inner {
    flex-direction: column;
    /* `stretch` faz os filhos ocuparem a largura da coluna — sem isso, cada um
       encolhe ao próprio conteúdo e centralizar não teria efeito visível. */
    align-items: stretch;
    gap: 18px;
    padding-block: 32px;
  }
  /* A marca é a âncora do rodapé e segue à esquerda, como no desktop. */
  .site-footer__brand {
    align-self: flex-start;
  }
  .site-footer__nav {
    justify-content: center;
  }
  .site-footer__legal {
    margin-left: 0;
    text-align: center;
  }
}

/* ---------- 15. Utilitários ---------------------------------------------- */
.stack-sm > * + * {
  margin-top: 14px;
}
.mt-sections {
  margin-top: 56px;
}
[hidden] {
  display: none !important;
}

/* ---------- 16. Mobile: ≤1024px ------------------------------------------ */
@media (max-width: 1024px) {
  .nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:last-child {
    width: 22px;
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-panel {
    display: block;
    padding: 8px var(--gutter) 28px;
    max-width: var(--container);
    margin-inline: auto;
    animation: riseIn 0.3s ease;
  }
  .nav-panel[hidden] {
    display: none;
  }
  .nav-panel a {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink-2);
    padding: 14px 0;
  }
  .nav-panel a:hover {
    color: var(--teal);
    transform: translateX(4px);
  }
  .nav-panel .btn {
    width: 100%;
    border-radius: var(--r-field);
    padding: 16px;
    margin-top: 12px;
  }
  .nav-panel .btn:hover {
    transform: none;
  }

  .enroll-aside {
    position: static;
  }
}

/* ---------- 17. Desktop: ≥1025px ----------------------------------------- */
@media (min-width: 1025px) {
  /* Seções consecutivas somam os dois paddings verticais (104 + 104 = 208px),
     o que no desktop abre um vão grande demais entre Modalidades e Cursos.
     A de baixo abre mão do próprio topo: o respiro passa a vir só da de cima.
     No mobile a soma é bem menor (40 + 40) e continua valendo. */
  .section + .section {
    padding-top: 0;
  }

  /* Rodapé com duas colunas: `1fr` daria 552px a cada uma e a lista de três
     links ficaria boiando no meio de um vão. Com teto de 320px e
     space-between, a marca fica à esquerda e a navegação à direita — e o
     arranjo continua correto se uma terceira coluna voltar. */
  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
    justify-content: space-between;
  }

  .course-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
  }
  .enroll-aside {
    position: sticky;
    top: 104px;
  }
  .nav-panel {
    display: none !important;
  }
}

/* ---------- 18. Sem JavaScript ------------------------------------------- */
/* Os filtros são progressive enhancement: sem JS, o catálogo inteiro aparece
   e a barra de filtros fica fora do fluxo (não haveria como aplicá-los). */
html:not(.js) .filters,
html:not(.js) .result-count {
  display: none;
}

/* ---------- 19. Impressão ------------------------------------------------ */
@media print {
  .site-header,
  .site-footer,
  .filters,
  .btn,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .course-card,
  .enroll-aside {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ---------- 20. Campos adicionais do formulário de inscrição ------------- */
.field__opt {
  font-weight: 400;
  color: var(--ink-4);
}

.field__dica {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.45;
}

.field select:disabled {
  color: var(--ink-4);
  background: #f6f7f8;
  cursor: not-allowed;
}

/* Aceites de canal: três booleanos separados porque a API os recebe assim. */
.consent-group {
  border: 0;
  margin: 30px 0 0;
  padding: 0;
}
.consent-group > legend {
  font-size: 15px;
  color: var(--ink-2);
  padding: 0;
  margin-bottom: 14px;
}
.consent--inline {
  display: inline-flex;
  margin: 0 26px 10px 0;
  align-items: center;
}
.consent--inline .consent__text {
  white-space: nowrap;
}

/* ---------- 21. Paginação do catálogo ------------------------------------ */
.pager {
  display: flex;
  /* Sem quebra: a seta de próxima página caindo para a linha de baixo some
     do campo de visão justo quando é o controle mais usado. A quantidade de
     números é limitada no JS para caber. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(40px, 5vw, 56px);
}

.pager__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: all var(--t);
}
.pager__btn:hover:not(:disabled):not(.is-current) {
  color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.4);
}
.pager__btn.is-current {
  background: var(--graphite);
  color: var(--bg);
  box-shadow: 0 10px 20px -12px rgba(31, 41, 55, 0.9);
  cursor: default;
}
.pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pager__gap {
  color: var(--ink-4);
  padding: 0 2px;
}

/* 375px - 2x20px de gutter = 335px úteis.
   7 elementos x 40px + 6 x 6px de gap = 316px. Cabe. */
@media (max-width: 1024px) {
  .pager {
    gap: 6px;
  }
  .pager__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    font-size: 14.5px;
  }
  .pager__gap {
    padding: 0;
  }
}

/* Sem JS a lista inteira aparece: paginação sem JS seria um controle morto. */
html:not(.js) .pager {
  display: none;
}

/* ---------- 22. Barra da lista: contador + itens por página -------------- */
.list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  margin-bottom: 18px;
}
.list-bar .result-count {
  margin: 0;
}

.per-page {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.per-page label {
  font-size: 13.5px;
  color: var(--ink-4);
  white-space: nowrap;
}
.per-page select {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px 36px 9px 16px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: all var(--t);
}
.per-page select:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Sem JS o select fica vazio: esconder evita um controle morto. */
html:not(.js) .per-page {
  display: none;
}

/* ---------- 23. Card inteiro clicável ------------------------------------ */
/*
   Técnica do "link esticado": um ::after do próprio <a> cobre o card. O card
   todo vira área de clique sem JS e sem embrulhar tudo numa âncora — continua
   existindo UM link real, com o texto que o leitor de tela anuncia e que o
   robô de busca usa como âncora.
*/
.mod-card,
.course-card {
  position: relative;
  cursor: pointer;
}

.mod-card__link::after,
.course-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fica abaixo das ações, que precisam do próprio clique. */
  z-index: 0;
}

/* Botões e links que levam a outro destino ficam acima da camada esticada.
   Sem isso, "Matricular" abriria a página do curso. */
.course-card__actions {
  position: relative;
  z-index: 1;
}

/* Com o link esticado, o foco do teclado desenharia o contorno só no texto —
   aqui ele vai para o card inteiro, que é a área realmente acionável. */
.mod-card:has(:focus-visible),
.course-card:has(:focus-visible) {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.mod-card__link:focus-visible,
.course-card__title a:focus-visible {
  outline: none;
}

/* ---------- 24. Páginas legais (privacidade, contrato) ------------------- */
/*
   Texto longo para ler, não para escanear: medida de leitura curta, entrelinha
   folgada e hierarquia marcada por peso, não por cor. As tabelas rolam na
   horizontal no mobile em vez de espremer as colunas até ficarem ilegíveis.
*/
.legal {
  margin-top: 28px;
}

.legal__head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
.legal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 0;
}
.legal__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 14px 0 0;
  max-width: 60ch;
}
.legal__vigencia {
  font-size: 14px;
  color: var(--ink-3);
  margin: 18px 0 0;
}

/* Sumário: numerado porque as seções são numeradas — o número é o endereço
   que a pessoa usa para voltar ("item 9") e para citar num pedido formal. */
.legal__sumario {
  margin-top: 32px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest);
}
.legal__sumario-titulo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.legal__sumario ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2;
  column-gap: 34px;
}
.legal__sumario li {
  margin-bottom: 8px;
  break-inside: avoid;
  color: var(--ink-3);
  font-size: 15px;
}
.legal__sumario a {
  color: var(--ink-body);
  text-decoration: none;
}
.legal__sumario a:hover {
  color: var(--teal);
  text-decoration: underline;
}

.legal__secao {
  margin-top: 44px;
  /* Compensa o header fixo quando se chega pelo sumário. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.legal__h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 16px;
}
.legal__num {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.legal p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0 0 16px;
  max-width: 68ch;
}
.legal strong {
  color: var(--ink);
  font-weight: 600;
}
.legal a {
  color: var(--teal);
}

.legal__lista {
  margin: 0 0 16px;
  padding-left: 1.2em;
  max-width: 68ch;
}
.legal__lista li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: 12px;
}

/* Pares rótulo/valor: dado de registro e definição de direito. */
.legal__dados,
.legal__direitos {
  margin: 0 0 18px;
  display: grid;
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-field);
  overflow: hidden;
}
.legal__dados > div,
.legal__direitos > div {
  background: var(--surface);
  padding: 14px 18px;
}
.legal__dados dt,
.legal__direitos dt {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.legal__dados dd,
.legal__direitos dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Lacuna que depende de registro da empresa. Marcada à vista de propósito:
   um dado inventado numa política de privacidade engana o titular. */
.legal__todo {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--r-pill);
  background: #fef3c7;
  color: #854d0e;
  font-size: 13px;
  font-weight: 500;
  border: 1px dashed #d4a017;
}

.legal__rolagem {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-field);
  background: var(--surface);
}
.legal__rolagem:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.legal__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  /* Abaixo disso as colunas quebram palavra a palavra; o contêiner rola. */
  min-width: 540px;
}
.legal__tabela th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.legal__tabela td {
  padding: 14px 18px;
  line-height: 1.6;
  color: var(--ink-body);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.legal__tabela tr:last-child td {
  border-bottom: 0;
}
.legal__art {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .legal__sumario ol {
    columns: 1;
  }
  .legal__sumario {
    padding: 18px 20px;
  }
  .legal__secao {
    margin-top: 36px;
  }
}