/* Design system canonico: ../../../../design-system/design.md */
:root {
  --paper: #eef6f6;
  --paper-soft: #f7fafa;
  --surface: #ffffff;
  --ink: #172424;
  --ink-soft: #5f7474;
  --line: #d8e6e6;
  --teal: #008080;
  --teal-deep: #005f5f;
  --teal-dark: #003f3f;
  --teal-light: #33a6a6;
  --teal-soft: #d9f2f2;
  --green: #147a02;
  --green-deep: #195128;
  --gold: #f2b84b;
  --red: #d43b35;
  --accent-action: #a85b50;
  --accent-action-deep: #87483f;
  --accent-action-soft: #f8e2de;
  --on-teal: #ffffff;
  --on-action: #ffffff;
  --on-gold: #17262c;
  --focus-ring: var(--gold);
  --success: var(--green);
  --success-soft: color-mix(in srgb, var(--green) 10%, var(--surface));
  --warning: var(--gold);
  --warning-soft: color-mix(in srgb, var(--gold) 20%, var(--surface));
  --warning-ink: var(--ink);
  --shadow: 0 22px 60px rgba(0, 63, 63, .12);
  --shadow-soft: 0 10px 28px rgba(0, 63, 63, .08);
  --shadow-md: var(--shadow-soft);
  --shadow-lg: var(--shadow);
  --radius: 8px;
  --maxw: 1180px;
  --header-h: 68px;
  --section-y: clamp(3.25rem, 5vw, 5rem);
  --section-head-gap: clamp(1.5rem, 2.2vw, 2rem);
  --card-gap: 20px;
  --mobile-gutter: 16px;
  --stat-card-h: 138px;
  --track-display: -.022em;
  --track-h2: -.018em;
  --track-h3: -.008em;
  --track-eyebrow: .09em;
  --vis: 3;
  --display: "Inter", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --dyslexic: "Lexend", "Inter", system-ui, sans-serif;
  --sans: var(--body);
  --font-scale: 1;
  --bg: var(--paper-soft);
  --bg-2: var(--paper);
  --ink-2: var(--ink-soft);
  --verde-marca: var(--teal);
  --gold-soft: var(--warning-soft);
  --gold-deep: var(--gold);
  --lic-marca: 46px;
  --lic-gutter: 22px;
  --lic-mint: var(--paper-soft);
  --lic-ok: var(--success);
  --lic-ok-soft: var(--success-soft);
  --lic-warn-bg: var(--warning-soft);
  --lic-warn-ink: var(--warning-ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper-soft);
  font: 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background-image:
    linear-gradient(rgba(0, 128, 128, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 128, 128, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

a {
  color: inherit;
}

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--teal-deep);
  font-family: var(--display);
  line-height: 1.1;
  letter-spacing: 0;
}

p {
  margin: 0;
}

button,
input,
select {
  font: inherit;
}

button,
.btn,
.mini-cta {
  min-block-size: 48px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.wrap {
  width: min(var(--maxw), calc(100% - 40px));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--teal-dark);
  color: #fff;
  text-decoration: none;
}

.skip:focus {
  left: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--teal);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 34px rgba(0, 63, 63, .18);
}

.site-wrap {
  width: min(var(--maxw), calc(100% - 40px));
  margin-inline: auto;
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  text-decoration: none;
  white-space: nowrap;
}

.brand-logo {
  width: 170px;
  max-height: 48px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-divider {
  width: 1px;
  height: 34px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .42);
}

.brand-name {
  color: #fff;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  justify-self: end;
  min-width: 0;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: rgba(255, 255, 255, .86);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: #fff;
}

.menu-toggle {
  display: none;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .12);
  padding: 9px 12px;
  color: #fff;
  font-weight: 600;
}

/* Os "tres tracinhos" pedidos pela comissao (reuniao de 09/07/2026). */
.menu-bars,
.menu-bars::before,
.menu-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.menu-bars {
  position: relative;
}

.menu-bars::before,
.menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }

.site-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

/* Seletor de idioma */
.lang-switch {
  position: relative;
}

/* Controle secundario: fica menor e mais discreto que o CTA ao lado. Em telas
   de toque, o pseudo-elemento abaixo amplia o alvo sem aumentar a caixa visual. */
.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 7px 0 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

@media (pointer: coarse) {
  .lang-btn::before {
    content: "";
    position: absolute;
    inset-block: -6px;
    inset-inline: 0;
  }
}

.lang-btn:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .7);
}

.lang-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lang-globe {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.lang-caret {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  opacity: .85;
  transition: transform .18s ease;
}

.lang-btn[aria-expanded="true"] .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid rgba(0, 63, 63, .12);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 63, 63, .22);
  display: none;
  z-index: 60;
}

.lang-switch[data-open] .lang-menu {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

/* Idioma previsto, ainda sem pagina: visivel como roadmap, nao clicavel. */
.lang-option.is-disabled {
  cursor: default;
  opacity: .55;
}

.lang-soon {
  margin-left: auto;
  border-radius: 999px;
  background: var(--paper);
  padding: 2px 7px;
  color: var(--ink-soft);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lang-option[aria-current="true"] {
  color: var(--teal-deep);
}

.lang-option[aria-current="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lang-menu .flag {
  width: 22px;
  height: 15px;
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 18px;
  color: var(--ink);
  background: transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn[hidden],
.load-row[hidden] {
  display: none !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 12px 24px rgba(0, 128, 128, .22);
}

.btn-primary:hover {
  background: var(--teal-deep);
}

.site .btn-primary {
  align-self: center;
  color: var(--teal-dark);
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 63, 63, .18);
}

.site .btn-primary:hover {
  background: var(--teal-soft);
}

.btn-gold {
  color: #17262c;
  background: var(--gold);
  box-shadow: 0 12px 22px rgba(255, 188, 0, .25);
}

.btn-accent {
  color: #fff;
  background: var(--accent-action);
  box-shadow: 0 12px 24px rgba(168, 90, 50, .24);
}

.btn-accent:hover {
  background: var(--accent-action-deep);
}

.btn-outline {
  color: var(--teal-dark);
  background: rgba(255, 255, 255, .76);
  border-color: rgba(0, 128, 128, .36);
}

.hero {
  position: relative;
  padding-bottom: calc(var(--stat-card-h) / 2 + 52px);
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(238, 250, 247, .82) 0%, rgba(238, 250, 247, .26) 42%, rgba(238, 250, 247, .5) 82%, rgba(238, 250, 247, .82) 100%),
    radial-gradient(circle at 50% 30%, rgba(238, 250, 247, .95), rgba(238, 250, 247, 0) 34%);
}

.hero-content {
  width: min(850px, calc(100% - 40px));
  margin: clamp(64px, 10vh, 108px) auto 0;
  text-align: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.hero h1 {
  color: var(--teal-dark);
  font-size: clamp(2.2rem, 4.2vw, 3.55rem);
  font-weight: 800;
}

.hero h1 span {
  display: block;
  color: var(--teal);
}

.lead {
  max-width: 710px;
  margin: 20px auto 0;
  color: #46575b;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(640px, 100%);
  margin: 28px auto 0;
  padding: 7px 7px 7px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(0, 63, 63, .16);
}

.hero-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 18px 44px rgba(0, 128, 128, .24);
}

.hero-search-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--teal);
}

.hero-search-icon svg {
  width: 22px;
  height: 22px;
}

.hero-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 4px;
  color: var(--ink);
  font-size: 1rem;
}

.hero-search input:focus {
  outline: none;
}

.hero-search .btn {
  flex: 0 0 auto;
  border-radius: 999px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.stats {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--stat-card-h) / -2);
  margin-bottom: clamp(12px, 3vh, 28px);
  color: var(--teal-dark);
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  height: var(--stat-card-h);
  max-width: 940px;
  overflow: hidden;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: calc(var(--radius) * 1.75);
  box-shadow: 0 24px 54px rgba(0, 63, 63, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 26px 28px;
  text-align: left;
}

.stat + .stat {
  border-left: 1px solid rgba(216, 230, 230, .9);
}

.stat-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--teal);
  background: var(--teal-soft);
  border: 1px solid rgba(0, 128, 128, .14);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.stat-icon svg {
  width: 26px;
  height: 26px;
}

.stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat strong {
  display: block;
  font-family: var(--display);
  color: var(--teal-deep);
  font-size: clamp(1.85rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.stat-body span {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  text-transform: none;
}


section {
  padding: 64px 0;
}

#destaques {
  padding-top: 44px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}

.section-head h2 {
  color: var(--teal-deep);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.section-head p {
  max-width: 620px;
  margin-top: 8px;
  color: var(--ink-soft);
}

.text-link {
  color: var(--teal-deep);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

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

.course-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ── Carrossel de cursos (destaques, recentes, mais cursados) ── */
#destaques .course-carousel {
  --vis: 3;
}

#recentes .course-carousel,
#mais-cursados .course-carousel {
  --vis: 4;
}

.course-carousel {
  position: relative;
}

.course-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 12px;
  margin: -6px -4px -12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.course-track::-webkit-scrollbar {
  display: none;
}

.course-track:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.course-track > .course-card {
  flex: 0 0 calc((100% - (var(--vis) - 1) * 22px) / var(--vis));
  scroll-snap-align: start;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--teal-deep);
  background: #fff;
  border: 1px solid rgba(0, 128, 128, .16);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
}

.carousel-btn:hover {
  color: #fff;
  background: var(--teal);
  transform: translateY(-50%) scale(1.06);
}

.carousel-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.carousel-prev {
  left: 6px;
}

.carousel-next {
  right: 6px;
}

.carousel-btn svg {
  width: 22px;
  height: 22px;
}

.carousel-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

.course-carousel[data-static] .carousel-btn {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .course-track {
    scroll-behavior: auto;
  }
}

.course-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: visible;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.course-card[hidden] {
  display: none;
}

.course-media {
  position: relative;
  overflow: visible;
  aspect-ratio: 274 / 188;
  background: #dfeee9;
  border-radius: var(--radius) var(--radius) 0 0;
}

.course-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-media > img:not(.img-libras):not(.course-libras-ribbon) {
  border-radius: var(--radius) var(--radius) 0 0;
}

.course-media .img-libras,
.course-media .course-libras-ribbon {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 3;
  width: clamp(48px, 16%, 64px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .18));
}

.course-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
}

.course-cat {
  color: var(--teal-deep);
  font-size: .76rem;
  font-weight: 700;
}

.course-card h3 {
  color: var(--teal-deep);
  font-size: 1.02rem;
  line-height: 1.28;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-soft);
  font-size: .78rem;
}

/* Aviso de curso substituido por versao mais recente. */
.course-notice {
  display: flex;
  gap: 6px;
  border-left: 3px solid var(--gold);
  background: #fdf6e6;
  padding: 7px 9px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-size: .74rem;
  line-height: 1.35;
}

.course-notice::before {
  content: "!";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--teal-dark);
  font-size: .62rem;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.mini-cta {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 10px;
  color: #fff;
  background: var(--teal);
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0, 128, 128, .18);
}

.mini-cta:hover {
  background: var(--teal-deep);
}

.course-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.course-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: var(--teal-dark);
  background: #edf6f4;
  border: 1px solid rgba(0, 128, 128, .18);
  border-radius: 4px;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
}

.badge-project {
  color: var(--teal-deep);
  background: #edf6f4;
  border-color: rgba(0, 128, 128, .18);
}

.badge-series {
  color: var(--teal-deep);
  background: #edf6f4;
  border-color: rgba(0, 128, 128, .18);
}

.badge-new {
  color: #7a5416;
  background: #fbefdc;
  border-color: #ecd3a8;
  font-weight: 700;
}

.badge-language {
  min-width: 29px;
  padding-inline: 4px;
  background: #fff;
  border-color: rgba(0, 128, 128, .22);
}

.flag {
  width: 19px;
  height: 13px;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 63, 63, .18);
}

.flag-great-britain {
  background: #012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='36' fill='%23012169'/%3E%3Cpath d='M0 0h8l52 31v5h-8L0 5zM60 0h-8L0 31v5h8L60 5z' fill='%23fff'/%3E%3Cpath d='M25 0h10v36H25zM0 13h60v10H0z' fill='%23fff'/%3E%3Cpath d='M27 0h6v36h-6zM0 15h60v6H0z' fill='%23c8102e'/%3E%3C/svg%3E") center / cover no-repeat;
}

.flag-spain {
  background: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.flag-brazil {
  background: #009b3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23009b3a'/%3E%3Cpath d='M10 1.4 18.6 7 10 12.6 1.4 7Z' fill='%23fedf00'/%3E%3Ccircle cx='10' cy='7' r='2.6' fill='%23002776'/%3E%3C/svg%3E") center / cover no-repeat;
}

.flag-france {
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66% 100%);
}

.rank-card .course-body::before {
  content: attr(data-rank);
  color: rgba(0, 128, 128, .2);
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: .8;
}

.areas-band {
  background: #e8f4f1;
}

.area-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.area-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(0, 128, 128, .18);
  border-radius: var(--radius);
  color: var(--teal-dark);
  background: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}

.area-pill small {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.audience {
  padding: 22px;
  color: var(--teal-dark);
  background: #fff;
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}

.audience h3 {
  font-size: 1.02rem;
}

.audience p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: .88rem;
}

.service-band {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 112px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 10%, rgba(51, 166, 166, .24), transparent 34%),
    linear-gradient(135deg, #003f3f 0%, #005f5f 52%, #007474 100%);
}

.service-band .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
}

.service-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 36px 36px;
}

.service-band::after {
  content: "licença";
  position: absolute;
  right: clamp(-18px, 3vw, 44px);
  bottom: -18px;
  color: rgba(255, 255, 255, .055);
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 12rem);
  font-weight: 800;
  line-height: .8;
  pointer-events: none;
}

.service-copy {
  max-width: 680px;
}

.service-kicker {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: #003f3f;
  background: #b9efea;
  border-radius: var(--radius);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-band h2 {
  max-width: 620px;
  margin-top: 18px;
  color: #fff;
  font-size: clamp(1.85rem, 3.35vw, 3.15rem);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.service-copy p {
  max-width: 610px;
  margin-top: 18px;
  color: #d8eeee;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.65;
}

.service-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.service-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #d9fffa;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 255, 250, .38);
  transition: color .18s ease, border-color .18s ease;
}

.service-link:hover {
  color: #fff;
  border-color: #fff;
}

/* Cabeçalho do card de ferramenta. Nasceu em licenca.css, no planejador; desde
   05/08/2026 a home repete o mesmo cabeçalho no painel da faixa de licença, para
   que o card seja reconhecido como a ferramenta que está a um clique. Por servir
   duas páginas, mora aqui na base. */
.tool-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding: 18px clamp(20px, 3vw, 30px);
  color: #fff;
  background: linear-gradient(120deg, var(--teal-deep), var(--teal-dark));
}

.tool-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 13px;
}

.tool-icon svg {
  width: 24px;
  height: 24px;
}

.tool-head h2,
.tool-head h3 {
  color: #fff;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.012em;
}

.tool-head p {
  margin-top: 3px;
  color: rgba(255, 255, 255, .8);
  font-size: .8125rem;
  line-height: 1.45;
}

/* Na home o cabeçalho é o link para a ferramenta: quem vê o card tenta clicar. */
a.tool-head {
  text-decoration: none;
  transition: filter .2s ease;
}

a.tool-head:hover {
  filter: brightness(1.12);
}

.service-panel {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 30px 78px rgba(0, 31, 31, .24);
  backdrop-filter: blur(16px);
}

.service-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--teal-light));
}

/* Com o cabeçalho da ferramenta, o card imita o planejador: o corpo é que recebe
   o respiro, e a listra do topo sai — ela cortaria o gradiente do cabeçalho. */
.service-panel-tool {
  padding: 0;
}

.service-panel-tool::before {
  display: none;
}

.service-panel-corpo {
  padding: clamp(22px, 3vw, 34px);
}

.service-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

/* Sem o numero gigante ao lado, o periodo de licenca e quem ancora o painel. */
.service-panel-head span {
  color: var(--teal-deep);
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* Legenda do numero do painel: repete a frase do planejador para o card da home
   dizer a mesma coisa que a ferramenta. */
.service-panel-meta {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}

.service-panel-meta b {
  color: var(--teal-deep);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.service-panel-lead {
  max-width: 32rem;
  margin-top: 18px;
  color: var(--teal-deep);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}

.license-meter {
  margin-top: 26px;
  padding: 18px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.meter-row span {
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 700;
}

.meter-row strong {
  color: var(--teal);
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.meter-track {
  height: 10px;
  margin-top: 14px;
  overflow: hidden;
  background: #d9eaea;
  border-radius: 999px;
}

/* Cheia: o exemplo do painel soma 130h e fecha a carga de 129h. */
.meter-track span {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: inherit;
}

.license-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.license-stack li {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: var(--teal-deep);
  background: #edf8f7;
  border: 1px solid rgba(0, 128, 128, .14);
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
}

.license-stack b {
  color: var(--teal);
}

.license-note {
  margin-top: 22px;
  padding: 18px;
  background: #fff7e6;
  border: 1px solid #efd79d;
  border-radius: var(--radius);
}

.license-note strong {
  display: block;
  color: #68430d;
  font-size: .88rem;
  font-weight: 800;
}

.license-note p {
  margin-top: 6px;
  color: #765523;
  font-size: .86rem;
  line-height: 1.5;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.fact-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.fact {
  padding: 15px;
  background: #fff;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .88rem;
}

.fact strong {
  display: block;
  color: var(--teal-dark);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 24px 56px;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: #fff;
  background: var(--teal);
  font-weight: 700;
}

.steps h3 {
  color: var(--teal-deep);
  font-size: 1rem;
}

.steps p {
  color: var(--ink-soft);
  font-size: .9rem;
}

.faq-list {
  display: grid;
  gap: 10px;
}

details {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--teal-dark);
  font-weight: 700;
}

details p {
  padding: 0 20px 18px;
  color: var(--ink-soft);
}

.sec-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.sec-head h2 {
  color: var(--teal-deep);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.sec-head p {
  max-width: 46rem;
  color: var(--ink-soft);
}

.sec-link {
  color: var(--teal-deep);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.colecoes-sec {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.colecoes-subhead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 44px 0 18px;
}

.colecoes-subhead h3 {
  color: var(--teal-deep);
  font-size: 1.18rem;
}

.colecoes-subhead p {
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: .92rem;
}

.series {
  display: grid;
  grid-template-columns: 1.35fr repeat(2, 1fr);
  gap: 16px;
}

.serie {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}

.serie:hover {
  background: #fff;
  border-color: var(--teal);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.serie-lovelace {
  grid-row: span 2;
  min-height: 396px;
  color: #f2f7f0;
  background: var(--teal-dark);
}

/* Fecha a coluna que sobrou na segunda linha quando a grade tem 4 séries. */
.serie-larga {
  grid-column: span 2;
}

.serie-lovelace:hover {
  background: var(--teal-dark);
  border-color: #9ce0d9;
  box-shadow: 0 20px 42px rgba(0, 63, 63, .22);
}

.serie-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.serie .rotulo {
  color: var(--teal-deep);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.serie .n {
  padding: 4px 10px;
  color: var(--teal-deep);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.serie h3 {
  color: var(--teal-deep);
  font-size: 1.15rem;
}

.serie p {
  max-width: 24rem;
  color: var(--ink-soft);
  font-size: .9rem;
}

.serie .link {
  margin-top: auto;
  color: var(--teal-deep);
  font-size: .82rem;
  font-weight: 800;
}

.serie-lovelace .rotulo,
.serie-lovelace .link {
  color: #9ce0d9;
}

.serie-lovelace .n {
  color: #e8efef;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
}

.serie-lovelace h3 {
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.serie-lovelace p {
  color: #cfe3e3;
  font-size: 1rem;
}

.projetos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.projeto {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius);
}

.projeto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
}

.projeto > * {
  position: relative;
}

.projeto.riodoce,
.projeto.unac {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 54%, var(--teal-dark) 100%);
}

.projeto-logo {
  width: 100%;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .97);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 63, 63, .08);
}

.projeto-logo img {
  max-width: min(82%, 280px);
  max-height: 132px;
  object-fit: contain;
}

.projeto .n {
  color: #9ce0d9;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.projeto h3 {
  color: #fff;
  font-size: 1.15rem;
}

.projeto p {
  max-width: 26rem;
  color: #d9eeee;
  font-size: .88rem;
}

.projeto .link {
  margin-top: auto;
  color: #9ce0d9;
  font-size: .82rem;
  font-weight: 800;
}

/* Card de saída (catálogo completo, séries): sem marca, o número ocupa a placa.
   Usado pela página do projeto e pela lista de projetos. */
.projeto.geral {
  background: linear-gradient(135deg, #0d2f2f, #0d6060);
}

.projeto.geral .projeto-logo {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.projeto-geral-num {
  color: #fff;
  font-family: var(--display);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.oquee {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 112px;
  background:
    linear-gradient(135deg, rgba(0, 70, 70, .98), rgba(0, 118, 118, .9)),
    var(--teal-deep);
  color: #fff;
}

.oquee .wrap {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: stretch;
}

.oquee::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 34px 34px;
}

.oquee::after {
  content: "MOOC";
  position: absolute;
  right: clamp(-44px, -2vw, -12px);
  bottom: -48px;
  color: rgba(255, 255, 255, .055);
  font-family: var(--display);
  font-size: clamp(7rem, 18vw, 17rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: 0;
  pointer-events: none;
}

.oquee h2 {
  color: #fff;
}

.oquee .wrap > * {
  position: relative;
  z-index: 1;
}

.mooc-intro {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mooc-label,
.mooc-flow-head span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: #003f3f;
  background: #b9efea;
  border-radius: var(--radius);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mooc-intro h2 {
  max-width: 600px;
  margin-top: 18px;
  font-size: clamp(2.25rem, 4.25vw, 3.85rem);
  font-weight: 700;
  line-height: 1.08;
}

.mooc-lead {
  max-width: 650px;
  margin-top: 22px;
  color: #ecfffc;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.65vw, 1.34rem);
  font-weight: 600;
  line-height: 1.5;
}

.mooc-copy {
  max-width: 610px;
  margin-top: 14px;
  color: #c9e8e5;
  font-size: 1rem;
  line-height: 1.65;
}

.mooc-proof {
  display: grid;
  grid-template-columns: minmax(220px, 360px);
  gap: 12px;
  margin-top: 30px;
}

.mooc-proof-main {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
}

.mooc-proof-main {
  padding: 20px;
}

.mooc-proof-main strong {
  display: block;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(2.65rem, 5.6vw, 4.55rem);
  font-weight: 700;
  line-height: .92;
}

.mooc-proof-main span {
  display: block;
  max-width: 18rem;
  margin-top: 10px;
  color: #ecfffc;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
}

.fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
  padding-top: 30px;
}

.fato {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: start;
  column-gap: 12px;
  row-gap: 8px;
  min-height: 120px;
  padding: 18px;
  color: #d8eeee;
  font-size: .9rem;
  line-height: 1.55;
  background: rgba(0, 63, 63, .32);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
}

.fato-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--gold);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

.fato-ico svg {
  width: 18px;
  height: 18px;
}

.fato b {
  display: block;
  margin-bottom: 0;
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
}

.fato-txt {
  grid-column: 2;
}

.mooc-flow {
  padding: clamp(20px, 3vw, 34px);
  color: var(--ink);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 28px 70px rgba(0, 31, 31, .18);
  backdrop-filter: blur(16px);
}

.mooc-flow-head {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}

.mooc-flow-head h2 {
  max-width: none;
  color: var(--teal-deep);
  font-size: clamp(1.65rem, 2.35vw, 2.35rem);
  font-weight: 700;
  line-height: 1.16;
  text-align: left;
  white-space: nowrap;
}

.passos {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passos li {
  position: relative;
  counter-increment: passo;
  min-height: 138px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text"
    "icon note";
  column-gap: 16px;
  align-content: start;
  padding: 18px;
  background: #f7fbfb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.passos li:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 128, 128, .34);
  box-shadow: var(--shadow-soft);
}

.passos li::after {
  content: "0" counter(passo);
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: rgba(0, 95, 95, .08);
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

.passo-icon {
  grid-area: icon;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--teal);
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(0, 128, 128, .14);
}

.passos h3 {
  grid-area: title;
  color: var(--teal-deep);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.passos p {
  grid-area: text;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.55;
}

/* Botão de cadastro no passo 01. `grid-column: 1/-1` em vez de área nomeada:
   o card tem dois desenhos de grid (duas colunas na lista vertical, uma coluna
   na horizontal do refino) e a linha implícita funciona nos dois. Menor que os
   botões de página — cabe em card de ~280px sem quebrar o texto em duas linhas. */
.passos .passo-cta {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 40px;
  margin-top: 14px;
  padding-inline: 12px;
  font-size: .8125rem;
  text-align: center;   /* `.btn` centraliza o item flex, não as linhas dentro dele */
}

/* Faixa estreita: quatro colunas ainda, mas o card cai para ~230px e o rótulo
   quebrava em duas linhas dentro do botão. Abaixo de 1060px a lista já vira
   duas colunas e o problema não existe. Entre 1061 e ~1095px ainda quebra —
   aí as duas linhas ficam centradas (`text-align` acima), que é o menor mal:
   diminuir mais a fonte deixaria o CTA ilegível. */
@media (min-width: 1061px) and (max-width: 1240px) {
  .passos .passo-cta {
    padding-inline: 8px;
    font-size: .75rem;
    line-height: 1.25;
  }
}

.faq .wrap {
  max-width: 920px;
}

.faq .resp {
  padding: 0 20px 18px;
  color: var(--ink-soft);
  font-size: .9rem;
}

.faq .resp p {
  padding: 0;
  margin: 0 0 12px;
}

.faq .resp p:last-child {
  margin-bottom: 0;
}

.faq .resp ul {
  padding: 0 0 0 20px;
  margin: 0 0 12px;
}

.faq .resp li {
  margin: 0 0 6px;
}

.faq .resp a {
  color: var(--teal-deep);
  font-weight: 700;
}

.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--teal-deep);
  font-size: 1.2rem;
}

.faq details[open] summary::after {
  content: "-";
}

.faq-actions {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.faq-actions[hidden] {
  display: none;
}

.catalog-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4.5vw, 50px) 0 clamp(32px, 4vw, 46px);
  color: #fff;
  background:
    radial-gradient(1100px 380px at 88% -12%, rgba(51, 166, 166, .5), transparent 60%),
    radial-gradient(760px 440px at 6% 128%, rgba(0, 63, 63, .55), transparent 62%),
    linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 54%, var(--teal-dark) 100%);
  border-bottom: 1px solid rgba(0, 63, 63, .22);
}

/* textura de pontos que esmaece na base */
.catalog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

/* halo suave no canto superior */
.catalog-hero-decor {
  position: absolute;
  z-index: -1;
  top: -150px;
  right: -90px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 242, 242, .3), transparent 68%);
  pointer-events: none;
}

.catalog-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.catalog-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
}

.catalog-hero h1 span {
  color: var(--teal-soft);
}

.catalog-hero p {
  max-width: 640px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6;
}

.catalog-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.summary-box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0, 40, 40, .24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.summary-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(242, 184, 75, 0));
}

.summary-box:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}

.summary-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
}

.summary-icon svg {
  width: 20px;
  height: 20px;
}

.summary-box strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.summary-label {
  color: rgba(255, 255, 255, .78);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.filters {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
  max-height: calc(100dvh - 118px);
  overflow: auto;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.filters input[type="search"],
.filters select,
.toolbar select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
  color: var(--ink);
  background: #f7fbf9;
}

.filter-group h3 {
  margin: 0 0 9px;
  color: var(--teal-deep);
  font: 700 .92rem var(--body);
}

.filter-group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: .88rem;
}

.filter-option label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.filter-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.filter-count {
  color: var(--teal-deep);
  font-size: .75rem;
  font-weight: 700;
}

.results-head {
  margin-bottom: 22px;
}

.results-count {
  color: var(--ink-soft);
  font-size: .86rem;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.toolbar h2 {
  color: var(--teal-deep);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.sorter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 245px;
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 600;
}

.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.chip {
  border: 0;
  border-radius: var(--radius);
  padding: 7px 10px;
  color: var(--teal-dark);
  background: #dff1ee;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

.load-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.empty {
  margin-top: 24px;
  padding: 28px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

footer {
  color: #c4ddda;
  background: var(--teal-dark);
}

footer .wrap {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 34px;
  padding-block: 46px;
}

footer h3,
footer h4 {
  color: #fff;
}

footer p,
footer a {
  color: #c4ddda;
  font-size: .88rem;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
  text-decoration: underline;
}

footer ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-logo {
  width: 160px;
  max-width: 100%;
  height: auto;
}

.footer-tagline {
  color: #c4ddda;
  font-size: .8rem;
  line-height: 1.4;
}

.foot-base {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.foot-base .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-block: 14px;
  font-size: .78rem;
}

/* Seletor de idioma do rodape — desde 05/08/2026. O controle do topo sai do
   header abaixo de 860px (ver mobile.css), entao no celular este e o unico
   lugar onde a pessoa ve em que idioma esta e o que vem por ai. */
.foot-lang {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.foot-lang-label {
  color: #9dc0bd;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Vence o `footer ul { display: grid }`, que empilharia os idiomas. */
.foot-lang-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-lang-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #c4ddda;
  font-size: .76rem;
  font-weight: 600;
}

.foot-lang-item[aria-current="true"] {
  color: var(--teal-dark);
  background: #fff;
  border-color: #fff;
}

/* Idioma previsto, ainda sem pagina: aparece como roadmap, nao como opcao.
   Cor explicita em vez de `opacity` — a opacidade derrubava o texto para
   4.16:1 sobre o rodape, abaixo do minimo AA. Assim fica apagado (5.2:1) e
   ainda legivel. O selo "em breve" e o sinal que nao depende de cor. */
.foot-lang-item.is-disabled {
  cursor: default;
  color: #8fb3b0;
  border-color: rgba(255, 255, 255, .12);
}

.foot-lang-item .lang-soon {
  margin-left: 0;
  background: rgba(255, 255, 255, .16);
  color: #dff0ee;
}

@media (max-width: 1060px) {
  .stats .wrap {
    max-width: min(100% - 32px, 940px);
  }

  .course-grid,
  .course-grid.four,
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #destaques .course-carousel,
  #recentes .course-carousel,
  #mais-cursados .course-carousel {
    --vis: 2;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .series {
    grid-template-columns: 1fr 1fr;
  }

  .serie-lovelace {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 260px;
  }

  .filters {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  :root {
    --stat-card-h: 180px;
  }

  .stats .wrap {
    max-width: min(100% - 32px, 640px);
  }

  .stat {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 26px 16px;
  }

  .stat-body {
    align-items: center;
  }
}

/* O nome da marca some abaixo de 640px? Nao mais — desde 05/08/2026 ele fica.
   As duas regras que o escondiam saíram; o tamanho no celular e definido em
   `mobile.css` (@640), que carrega depois desta folha e por isso vence a
   redefinicao de `.brand` da camada de refino, mais abaixo. */

/* O menu nao quebra linha: abaixo deste ponto ele nao cabe ao lado da marca e
   do CTA e passava por cima do nome da marca. Com quatro itens (03/08) o limite
   caiu de 1200px para 1060px — medido no navegador: em 1000px ainda cabe, mas
   sem folga entre o nome da marca e o primeiro link. Vale para as duas familias
   de pagina canonica. */
@media (max-width: 1060px) {
  .main-nav {
    display: none;
  }

  /* O desenho do painel aberto (.main-nav.open) fica inteiro em mobile.css.
     Aqui so ficam a troca menu-inline -> botao e o ponto de corte, porque o
     painel precisa reescrever propriedades desta folha (height, justify-self)
     e ter duas copias da mesma regra em dois arquivos ja causou divergencia. */
  .menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 860px) {
  .site .btn-primary {
    display: none;
  }

  .service-band .wrap,
  .info-grid,
  .oquee .wrap,
  .catalog-hero .wrap {
    grid-template-columns: 1fr;
  }

  .projetos {
    grid-template-columns: 1fr;
  }
}

/* Desde 03/08 o celular carrega a MESMA foto do desktop (antes vinha
   `hero-ifes-mobile.png`, uma ilustracao clara com area vazia reservada ao
   texto). Numa tela estreita o texto cobre quase toda a largura da foto, entao
   o veu claro precisa ser mais denso aqui do que no desktop: sem isso o
   paragrafo em `--ink-soft` cai sobre rostos e roupas e perde contraste. A foto
   continua visivel nas bordas e no topo. */
@media (max-width: 760px) {
  .hero::after {
    background:
      linear-gradient(180deg, rgba(238, 250, 247, .9) 0%, rgba(238, 250, 247, .72) 38%, rgba(238, 250, 247, .84) 76%, rgba(238, 250, 247, .95) 100%),
      radial-gradient(circle at 50% 42%, rgba(238, 250, 247, .96), rgba(238, 250, 247, .55) 62%);
  }

  .hero-bg img {
    object-position: 62% center;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 28px, var(--maxw));
  }

  .site-wrap {
    width: min(100% - 28px, var(--maxw));
  }

  .brand {
    font-size: .98rem;
    gap: 10px;
  }

  .brand-logo {
    width: 128px;
  }

  .brand-divider {
    height: 30px;
  }

  .hero {
    padding-bottom: 28px;
  }

  .hero-bg,
  .hero::after {
    inset: 0;
  }

  .hero-content {
    margin-top: 44px;
  }

  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .hero-actions .btn {
    width: min(100%, 330px);
  }

  .hero-search {
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 10px 14px;
  }

  .hero-search .btn {
    flex: 1 0 100%;
    width: 100%;
  }

  .stats .wrap,
  .course-grid,
  .course-grid.four,
  .audience-grid,
  .fact-list,
  footer .wrap {
    grid-template-columns: 1fr;
  }

  #destaques .course-carousel,
  #recentes .course-carousel,
  #mais-cursados .course-carousel {
    --vis: 1.12;
  }

  .carousel-btn {
    display: none;
  }

  .stats {
    margin-top: 24px;
  }

  .stats .wrap {
    max-width: 400px;
    height: auto;
  }

  .stat {
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
    min-height: 86px;
    padding: 18px 22px;
    text-align: left;
  }

  .stat-body {
    align-items: flex-start;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
  }

  .stat-icon svg {
    width: 23px;
    height: 23px;
  }

  .stat + .stat {
    border-top: 1px solid rgba(216, 230, 230, .9);
    border-left: 0;
  }

  .section-head,
  .sec-head,
  .toolbar,
  .foot-base .wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .series,
  .fatos {
    grid-template-columns: 1fr;
  }

  .serie-larga {
    grid-column: auto;
  }

  .mooc-proof,
  .mooc-flow-head,
  .passos li {
    grid-template-columns: 1fr;
  }

  .mooc-flow-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mooc-flow-head h2 {
    text-align: left;
    white-space: normal;
  }

  .passos li {
    grid-template-areas:
      "icon"
      "title"
      "text"
      "note";
  }

  .serie,
  .serie-lovelace {
    min-height: 0;
  }

  .sorter {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Camada de refinamento consolidada no CSS principal em 05/08/2026. */
/* ============================================================================
   estilos-refino.css — camada de refino tipográfico da home
   Carregada DEPOIS de estilos.css. Mesmo layout, mesma paleta, mesma estrutura.
   Só mexe em: tamanho de fonte, peso, tracking, entrelinha, espaçamento e margem.

   Princípio: hierarquia por PESO, COR e ESPAÇO — não por tamanho.
   O canônico só tinha uma alavanca (aumentar a fonte) e usou ela em toda seção.

   Escala (base 16px):
     11px  eyebrow / rótulo em caixa alta     .6875rem
     12px  micro-rótulo                        .75rem
     13px  dado, metadado, link secundário     .8125rem
     14px  apoio denso                         .875rem
     15px  apoio, descrição de seção           .9375rem
     16px  corpo                               1rem
     17px  h3 de bloco                         1.0625rem
     18px  lead
     24-30px  h2 de seção
     32-44px  h1
   ========================================================================= */

:root {
  /* Ritmo vertical único. Antes: section fixo em 64px em qualquer viewport —
     apertado no desktop grande, exagerado no celular. */
  --section-y: clamp(3.25rem, 5vw, 5rem);      /* 52 → 80px */
  --section-head-gap: clamp(1.5rem, 2.2vw, 2rem);

  --card-gap: 20px;                             /* era 22px */
  --stat-card-h: 138px;                         /* era 152px */

  /* Tracking óptico: texto grande precisa fechar, texto pequeno precisa abrir. */
  --track-display: -.022em;
  --track-h2: -.018em;
  --track-h3: -.008em;
  --track-eyebrow: .09em;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
  font: 1rem/1.6 var(--body);
  font-synthesis-weight: none;                  /* impede peso falso do 500 */
}

h1, h2, h3 {
  text-wrap: balance;                           /* evita órfã na última linha */
}

p {
  text-wrap: pretty;
}

/* Toda medida da página (carga horária, matrículas, rank, %) com dígito de
   largura fixa. Números param de "dançar" entre cards. */
.stat strong,
.course-meta,
.rank-card .course-body::before,
.mooc-proof-main strong,
.service-panel-meta b,
.meter-row strong,
.license-stack,
.serie .n,
.projeto .n {
  font-variant-numeric: tabular-nums;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.brand {
  gap: 12px;
  font-size: 1rem;                              /* era 1.12rem / 800 */
  font-weight: 700;
  letter-spacing: -.005em;
}

.main-nav {
  gap: 22px;
}

.main-nav a {
  font-size: .875rem;                           /* era .86rem / 600 */
  font-weight: 500;
  letter-spacing: .005em;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  font-weight: 600;                             /* estado ativo por peso, não por cor só */
}

/* Tamanho do seletor de idioma vem de estilos.css (controle secundário, 32px).
   Aqui fica só o ajuste de tracking do refino. */
.lang-btn {
  letter-spacing: .01em;
}

.lang-option {
  font-size: .875rem;
  font-weight: 500;
}

.lang-soon {
  padding: 1px 4px;
  font-size: .5rem;
  line-height: 1.2;
  letter-spacing: .04em;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.btn {
  padding: 0 20px;
  font-size: .9375rem;                          /* era 16px herdado */
  font-weight: 600;
  letter-spacing: .005em;
}

.site .btn-primary {
  min-height: 40px;
  font-size: .875rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  padding-bottom: calc(var(--stat-card-h) / 2 + 46px);
}

.hero-content {
  margin-top: clamp(52px, 8vh, 88px);
}

/* Kicker canônico de hero: o mesmo na Home, Catálogo, Projetos e Licença.
   Texto pequeno em caixa alta + ponto dourado; nunca pill, fundo ou borda. */
.kicker {
  margin-bottom: 18px;
  padding: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.kicker::before {
  width: 6px;
  height: 6px;
  background: var(--gold);
  box-shadow: none;
}

/* 56,8px → 44px. O tamanho que sobrou virou tracking negativo e entrelinha
   fechada, que é o que faz um display parecer desenhado e não esticado. */
.hero h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);       /* 32 → 44px */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--track-display);
}

/* Segunda linha desce de peso em vez de mudar de tamanho. Contraste sem escala. */
.hero h1 span {
  font-weight: 500;
  letter-spacing: -.014em;
}

.lead {
  max-width: 640px;
  margin-top: 18px;
  font-size: clamp(1rem, .35vw + .92rem, 1.125rem);  /* 16 → 18px (era 19,5) */
  line-height: 1.62;
}

.hero-search {
  margin-top: 30px;
  padding: 6px 6px 6px 18px;
}

.hero-search input {
  padding: 11px 4px;
  font-size: .9375rem;
}

.hero-search input::placeholder {
  color: var(--ink-soft);
}

.hero-actions {
  gap: 12px;
  margin-top: 26px;
}

/* ── Faixa de indicadores ─────────────────────────────────────────────────── */

.stat {
  gap: 14px;
  padding: 22px 24px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
}

.stat-icon svg {
  width: 23px;
  height: 23px;
}

.stat strong {
  font-size: clamp(1.65rem, 2vw, 2.05rem);      /* 26,4 → 32,8px (era até 40) */
  font-weight: 700;
  letter-spacing: -.025em;
}

.stat-body span {
  margin-top: 6px;
  font-size: .8125rem;
  font-weight: 500;                             /* era 700 — rótulo não precisa gritar */
  line-height: 1.35;
  letter-spacing: 0;
}

/* ── Ritmo de seção ───────────────────────────────────────────────────────── */

section {
  padding: var(--section-y) 0;
}

#destaques {
  padding-top: clamp(2rem, 3vw, 2.75rem);
}

.section-head,
.sec-head {
  margin-bottom: var(--section-head-gap);
  gap: 28px;
}

/* Os dois cabeçalhos de seção tinham tamanhos diferentes (37,6px e 40px) para o
   mesmo papel. Agora é um valor só. */
.section-head h2,
.sec-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);    /* 24 → 30px */
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: var(--track-h2);
}

.section-head p,
.sec-head p {
  max-width: 56ch;                              /* medida de linha, não px */
  margin-top: 10px;
  font-size: .9375rem;
  line-height: 1.6;
}

.text-link,
.sec-link {
  font-size: .875rem;
  font-weight: 600;                             /* era 700/800 */
  letter-spacing: .005em;
}

/* ── Cards de curso ───────────────────────────────────────────────────────── */

.course-track {
  gap: var(--card-gap);
}

.course-track > .course-card {
  flex: 0 0 calc((100% - (var(--vis) - 1) * var(--card-gap)) / var(--vis));
}

/* Destaques mostrava 3 por vez enquanto "Recentes" e "Mais cursados" mostravam
   4 — três trilhos iguais com cadência diferente. Agora os três batem em 4. */
#destaques .course-carousel {
  --vis: 4;
}

/* O catálogo monta os mesmos cards por JS, então tudo abaixo vale nas duas
   páginas. Só o gap muda de componente: trilho usa flex, catálogo usa grid. */
.course-grid {
  gap: var(--card-gap);
}

.course-body {
  gap: 7px;
  padding: 16px 18px 18px;
}

/* Cinza em vez de teal: a categoria é etiqueta, não link. Devolve o teal para o
   título do card, que é o que a pessoa procura ao varrer o carrossel. */
.course-cat {
  color: var(--ink-soft);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.course-card h3 {
  font-size: 1rem;                              /* era 1,02rem */
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: var(--track-h3);
}

.course-meta {
  gap: 7px;
  font-size: .8125rem;
}

/* Separador em vez de espaço em branco: "60h · Básico" lê melhor que "60h Básico". */
.course-meta span + span::before {
  content: "·";
  margin-right: 7px;
  color: var(--line);
}

/* O rodapé do card tem 244px úteis. Com "Acessar curso" (116px) mais três
   selos (NOVO + UnAC + bandeira, 129px), pedia 253px: faltavam 9px e a
   bandeira caía sozinha numa segunda linha, levando o rodapé de 32px para
   60px. Os 9px vêm daqui e das duas regras abaixo, sem tocar no botão nem no
   HTML. Pior caso do site agora sobra 7px de folga. */
.course-footer {
  padding-top: 12px;
  gap: 6px;
}

.course-badge {
  padding: 0 5px;
}

/* A bandeira ocupava 29px para exibir 19px: era uma moldura em volta de outra
   moldura, já que `.flag` desenha a própria borda com box-shadow inset. Sem a
   caixa ela vira o indicador, não o conteúdo de um selo. O `min-height` de 22px
   do `.course-badge` continua valendo, então ela segue alinhada aos vizinhos. */
.badge-language {
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
}

.mini-cta {
  min-height: 32px;
  padding: 0 12px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.course-badge {
  min-height: 22px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .015em;
}

/* Rank é dado, não ornamento: 41,6px → 32px, com dígito tabular. */
.rank-card .course-body::before {
  font-size: 2rem;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  color: rgba(0, 128, 128, .17);
}

/* ── "O que é MOOC" + Como funciona ───────────────────────────────────────── */

/* 272px de marca d'água era a maior massa tipográfica da página inteira. */
.oquee::after {
  right: clamp(-32px, -2vw, -12px);
  bottom: -30px;
  font-size: clamp(4.5rem, 11vw, 9.5rem);       /* 72 → 152px */
  color: rgba(255, 255, 255, .05);
}

.mooc-label,
.mooc-flow-head span,
.service-kicker {
  min-height: 30px;
  padding: 0 11px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
}

/* 61,6px → 37,6px. Continua sendo o maior h2 da página, mas agora abaixo do h1. */
.mooc-intro h2 {
  max-width: 24ch;
  margin-top: 20px;
  font-size: clamp(1.75rem, 3vw, 2.35rem);      /* 28 → 37,6px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--track-h2);
}

.mooc-lead {
  max-width: 54ch;
  margin-top: 18px;
  font-size: clamp(1.0625rem, .5vw + .92rem, 1.1875rem);  /* 17 → 19px */
  font-weight: 500;                             /* era 600 */
  line-height: 1.55;
}

.mooc-copy {
  max-width: 58ch;
  margin-top: 12px;
  font-size: .9375rem;
  line-height: 1.7;
}

.mooc-proof {
  margin-top: 26px;
}

.mooc-proof-main {
  padding: 18px;
}

.mooc-proof-main strong {
  font-size: clamp(2.25rem, 4vw, 3.25rem);      /* 36 → 52px (era até 72,8) */
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
}

.mooc-proof-main span {
  max-width: 32ch;
  margin-top: 8px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.fatos {
  gap: 10px;
  padding-top: 26px;
}

.fato {
  min-height: 104px;
  padding: 16px;
  column-gap: 10px;
  row-gap: 6px;
  font-size: .875rem;
  line-height: 1.55;
}

.fato-ico {
  width: 32px;
  height: 32px;
}

.fato-ico svg {
  width: 17px;
  height: 17px;
}

.fato b {
  margin-bottom: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.mooc-flow {
  padding: clamp(20px, 2.6vw, 30px);
}

.mooc-flow-head {
  gap: 10px;
  margin-bottom: 22px;
}

.mooc-flow-head h2 {
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);   /* 22 → 28px (era até 37,6) */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--track-h2);
}

.passos {
  gap: 10px;
}

.passos li {
  min-height: 118px;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  padding: 16px;
}

/* Numeração fantasma atrás do texto: 48px → 34px e mais discreta. */
.passos li::after {
  right: 14px;
  bottom: 8px;
  font-size: 2.125rem;
  color: rgba(0, 95, 95, .07);
}

.passo-icon {
  width: 46px;
  height: 46px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.passos h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--track-h3);
}

.passos p {
  margin-top: 5px;
  font-size: .875rem;
  line-height: 1.55;
}

/* ── Projetos e séries ────────────────────────────────────────────────────── */

.projetos {
  gap: 20px;
}

.projeto {
  min-height: 292px;
  gap: 6px;
  padding: 22px;
}

.projeto-logo {
  height: 152px;
  padding: 20px;
  margin-bottom: 16px;
}

.projeto .n,
.serie .rotulo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11em;
}

.projeto h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--track-h3);
}

.projeto p {
  max-width: 44ch;
  margin-top: 4px;
  font-size: .875rem;
  line-height: 1.6;
}

.projeto .link,
.serie .link {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.colecoes-subhead {
  margin: 40px 0 16px;
  gap: 28px;
}

.colecoes-subhead h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--track-h3);
}

.colecoes-subhead p {
  max-width: 52ch;
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.6;
}

.series {
  gap: 14px;
}

.serie {
  min-height: 176px;
  gap: 8px;
  padding: 20px;
}

.serie-topo {
  margin-bottom: 6px;
}

.serie .n {
  padding: 3px 9px;
  font-size: .6875rem;
  font-weight: 700;
}

.serie h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: var(--track-h3);
}

.serie p {
  max-width: 38ch;
  font-size: .875rem;
  line-height: 1.55;
}

.serie-lovelace {
  min-height: 366px;
}

.serie-lovelace h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);     /* 20 → 26px (era até 32) */
  font-weight: 700;
  letter-spacing: -.015em;
}

.serie-lovelace p {
  max-width: 40ch;
  font-size: .9375rem;
  line-height: 1.6;
}

/* ── Faixa de licença capacitação ─────────────────────────────────────────── */

.service-band::after {
  right: clamp(-12px, 3vw, 40px);
  bottom: -12px;
  font-size: clamp(4rem, 10vw, 8.5rem);         /* 64 → 136px (era até 192) */
  color: rgba(255, 255, 255, .05);
}

.service-band h2 {
  max-width: 24ch;
  margin-top: 16px;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);   /* 26 → 36px (era até 50,4) */
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--track-h2);
}

.service-copy p {
  max-width: 56ch;
  margin-top: 14px;
  font-size: clamp(.9375rem, .4vw + .86rem, 1.0625rem);  /* 15 → 17px */
  line-height: 1.68;
}

.service-actions {
  margin-top: 26px;
}

.service-panel {
  padding: clamp(20px, 2.6vw, 30px);
}

.service-panel-tool {
  padding: 0;
}

.service-panel-corpo {
  padding: clamp(20px, 2.6vw, 30px);
}

.service-panel-head span {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);   /* 22 → 28px (era 11px) */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.service-panel-meta {
  margin-top: 8px;
  font-size: .875rem;                           /* 14px */
  font-weight: 500;
  line-height: 1.55;
}

.service-panel-meta b {
  font-weight: 700;
}

.service-panel-lead {
  max-width: 44ch;
  margin-top: 14px;
  font-size: .9375rem;
  font-weight: 500;                             /* era 600 */
  line-height: 1.6;
}

.license-meter {
  margin-top: 22px;
  padding: 16px;
}

.meter-row span {
  font-size: .8125rem;
  font-weight: 600;
}

.meter-row strong {
  font-size: 1.75rem;                           /* era 33,6px */
  font-weight: 700;
  letter-spacing: -.025em;
}

.meter-track {
  height: 8px;
  margin-top: 12px;
}

.license-stack {
  gap: 7px;
  margin-top: 14px;
}

.license-stack li {
  min-height: 32px;
  padding: 0 11px;
  font-size: .8125rem;
  font-weight: 600;
}

.license-note {
  margin-top: 18px;
  padding: 16px;
}

.license-note strong {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .005em;
}

.license-note p {
  margin-top: 5px;
  font-size: .8125rem;
  line-height: 1.6;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq-list {
  gap: 8px;
}

.faq summary,
summary {
  padding: 15px 18px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.faq summary::after {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.faq .resp,
details p {
  padding: 0 18px 16px;
  font-size: .9375rem;
  line-height: 1.65;
}

.faq .resp p {
  margin-bottom: 10px;
  font-size: inherit;
  line-height: inherit;
}

.faq .resp a {
  font-weight: 600;
}

.faq-actions {
  margin-top: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CATÁLOGO (cursos.html)
   O catálogo é ferramenta, não vitrine: a lista precisa aparecer cedo e as
   facetas precisam ser densas sem virar ruído. Os cards já vêm refinados acima.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Faixa de abertura ────────────────────────────────────────────────────── */

/* 48px → 38px. Fica abaixo do h1 da home (44px), que é o correto: a home
   apresenta, o catálogo só rotula onde você está. */
.catalog-hero h1 {
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);   /* 28 → 38px (era até 48) */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}

.catalog-hero p {
  max-width: 56ch;
  margin-top: 14px;
  font-size: clamp(.9375rem, .4vw + .86rem, 1.0625rem);  /* 15 → 17px */
  line-height: 1.62;
}

.catalog-summary {
  gap: 12px;
}

.summary-box {
  gap: 5px;
  padding: 18px 18px 16px;
}

.summary-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border-radius: 10px;
}

.summary-icon svg {
  width: 19px;
  height: 19px;
}

/* Alinhado com o `.stat strong` da home (26,4 → 32,8px): é o mesmo papel. */
.summary-box strong {
  font-size: clamp(1.6rem, 2.1vw, 2rem);        /* 25,6 → 32px (era até 37,6) */
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.summary-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
}

/* ── Abertura com foto ────────────────────────────────────────────────────
   Variante da faixa usada pelo catálogo e pela lista de projetos: sai a grade
   de números em vidro (`.catalog-summary`), entra a foto de fundo com o mesmo
   véu da Licença para Capacitação. As três aberturas passam a ter a mesma
   cara, e o número que os cards mostravam já aparece logo abaixo — no contador
   de resultados do catálogo e nos números de cada card de parceiro.

   Usada por: cursos.html, projetos.html. A licença tem a sua própria
   (`.lic-hero`, em licenca.css), com o mesmo véu.
   ───────────────────────────────────────────────────────────────────────── */

.catalog-hero-foto {
  padding: clamp(40px, 5.4vw, 72px) 0;
  color: var(--on-teal);
  background: var(--teal-dark);   /* fallback enquanto a foto carrega */
}

/* Sem os cards ao lado, a faixa é uma coluna só. */
.catalog-hero-foto .wrap {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-hero-foto .catalog-hero-intro {
  max-width: 720px;
}

/* A textura de pontos do gradiente sai: sobre a foto ela vira sujeira. */
.catalog-hero-foto::before {
  display: none;
}

.catalog-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.catalog-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

/* Mesmo véu da `.lic-hero`: denso à esquerda, onde o texto cai, e mais aberto
   à direita, onde a foto ainda aparece. */
.catalog-hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0, 45, 45, .96) 0%, rgba(0, 50, 50, .9) 34%, rgba(0, 60, 60, .58) 58%, rgba(0, 60, 60, .3) 100%),
    linear-gradient(to top, rgba(0, 40, 40, .82), transparent 46%);
}

/* Numa tela estreita o texto ocupa quase toda a largura da foto, então o véu
   precisa cobrir tudo — não só o lado esquerdo. */
@media (max-width: 760px) {
  .catalog-hero-foto::after {
    background:
      linear-gradient(180deg, rgba(0, 45, 45, .93), rgba(0, 48, 48, .88)),
      linear-gradient(to top, rgba(0, 40, 40, .86), transparent 52%);
  }
}

/* ── Barra de facetas ─────────────────────────────────────────────────────── */

.catalog-layout {
  gap: 32px;
}

.filters {
  gap: 16px;
  padding: 18px;
}

.filters input[type="search"],
.filters select,
.toolbar select {
  padding: 10px 12px;
  font-size: .9375rem;
}

.filters input[type="search"]::placeholder {
  color: var(--ink-soft);
}

/* Título de faceta vira rótulo, como os eyebrows do resto da página. Sete
   grupos em 14,7px/700 competiam com os títulos dos cards ao lado. */
.filter-group h3 {
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.filter-group ul {
  gap: 7px;
}

.filter-option {
  font-size: .875rem;
  line-height: 1.4;
}

.filter-count {
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Busca do catálogo ────────────────────────────────────────────────────
   Reaproveita `.hero-search` da home. O `.catalog-hero` também é escuro, então
   a pílula branca e a sombra definidas para o hero da home valem aqui.
   ───────────────────────────────────────────────────────────────────────── */

.catalog-hero-intro .hero-search {
  margin-top: 26px;
}

/* ── Painel de facetas ────────────────────────────────────────────────────
   Sete grupos abertos somavam ~1.300px numa coluna limitada a 100dvh, o que
   criava scroll dentro do scroll: "Séries" e "Limpar" ficavam permanentemente
   fora de vista. Agora só Área e Carga abrem por padrão; o resto colapsa e
   sinaliza os filtros ativos por um contador na legenda.
   ───────────────────────────────────────────────────────────────────────── */

.filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.filters-title {
  margin: 0;
  color: var(--teal-deep);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.filters-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  color: var(--teal-deep);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 .75rem var(--body);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.filters-clear:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
}

.filters-clear[hidden] {
  display: none;
}

.filters-clear-count {
  min-width: 18px;
  padding: 0 5px;
  color: var(--on-teal);
  background: var(--teal);
  border-radius: 999px;
  font-size: .6875rem;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.filters-clear-count[hidden] {
  display: none;
}

/* fieldset traz borda, padding e min-width automáticos do agente de usuário */
.filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-group legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
}

.filter-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0;
  color: var(--teal-deep);
  background: none;
  border: 0;
  font: 700 .75rem/1.2 var(--body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.filter-legend-text {
  flex: 1 1 auto;
}

.filter-legend-badge {
  min-width: 18px;
  padding: 0 5px;
  color: var(--on-teal);
  background: var(--teal);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.filter-legend-badge[hidden] {
  display: none;
}

.filter-legend-icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.filter-legend[aria-expanded="true"] .filter-legend-icon {
  transform: translateY(2px) rotate(-135deg);
}

.filter-panel {
  padding-top: 9px;
}

.filter-panel[hidden] {
  display: none;
}

/* opção sem nenhum resultado dentro do recorte atual */
.filter-option.is-zero {
  opacity: .42;
}

.filter-option.is-zero label,
.filter-option input:disabled,
.filter-option input:disabled + span {
  cursor: not-allowed;
}

/* Área mostra as 6 maiores; as outras 9 entram sob demanda */
#f-categoria:not(.show-all) .filter-option.is-extra {
  display: none;
}

.filter-more-toggle {
  margin-top: 10px;
  padding: 0;
  color: var(--teal);
  background: none;
  border: 0;
  font: 600 .8125rem var(--body);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.filter-more-toggle:hover {
  color: var(--teal-deep);
}

.filter-more-toggle[hidden] {
  display: none;
}

/* ── Resultados ───────────────────────────────────────────────────────────── */

.results-head {
  margin-bottom: 20px;
}

.results-count {
  font-size: .8125rem;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
}

.toolbar {
  margin-top: 6px;
  gap: 20px;
}

.toolbar h2 {
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);  /* 22 → 26px (era até 28,8) */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--track-h2);
}

.sorter {
  gap: 9px;
  font-size: .8125rem;
  font-weight: 600;
}

.active-chips {
  gap: 7px;
  margin-top: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-size: .75rem;
  /* Sem line-height próprio o chip herdava 1.6 do body e ficava em ~31px. */
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .01em;
}

/* O × é decorativo: o nome acessível do botão vem do aria-label
   ("Remover filtro Área: Educação"). */
.chip-x {
  font-size: .95rem;
  line-height: 1;
  opacity: .65;
}

.chip:hover .chip-x {
  opacity: 1;
}

.chip-clear {
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--line);
}

.chip-clear:hover {
  color: var(--teal-deep);
  border-color: var(--teal);
  background: var(--paper-soft);
}

.load-row {
  margin-top: 26px;
}

.empty {
  margin-top: 22px;
  padding: 32px 24px;
  font-size: .9375rem;
  line-height: 1.6;
}

/* ── Rodapé ───────────────────────────────────────────────────────────────── */

footer .wrap {
  gap: 32px;
  padding-block: 44px;
}

footer h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--track-h3);
}

/* Título de coluna vira rótulo: menor, em caixa alta, com tracking. */
footer h4 {
  margin: 0;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

footer p {
  max-width: 42ch;
  margin-top: 10px;
  font-size: .875rem;
  line-height: 1.6;
}

footer a {
  font-size: .875rem;
}

footer ul {
  gap: 8px;
  margin-top: 14px;
}

.footer-tagline {
  max-width: 30ch;
  font-size: .8125rem;
  line-height: 1.5;
}

.foot-base .wrap {
  padding-block: 16px;
  font-size: .75rem;
  letter-spacing: .01em;
}

/* ── Ajustes por viewport ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --stat-card-h: 164px;
  }

  .stat {
    padding: 22px 16px;
  }
}

@media (max-width: 640px) {
  /* Aqui existia uma segunda copia da regra que escondia `.brand-name` e
     `.brand-divider` (a primeira ficava ~1500 linhas acima). Como esta vinha
     depois, era ela que valia — e mantinha o nome oculto mesmo depois de a
     outra ser trocada. As duas saem: o nome fica, com o tamanho definido na
     regra unica de `.brand` acima. */
  .hero h1 {
    font-size: clamp(1.875rem, 7.5vw, 2.375rem);  /* 30 → 38px (era até 44) */
  }

  .lead {
    font-size: 1rem;
  }

  .mooc-intro h2,
  .service-band h2 {
    max-width: none;
  }

  .section-head,
  .sec-head,
  .colecoes-subhead {
    gap: 12px;
  }

  .stat {
    min-height: 78px;
    padding: 16px 20px;
  }

  .stat-icon {
    width: 44px;
    height: 44px;
  }

  .stat-icon svg {
    width: 21px;
    height: 21px;
  }

  /* Marca d'água some no celular: em tela estreita ela vira ruído sobre o texto. */
  .oquee::after,
  .service-band::after {
    display: none;
  }

  .passos li {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .passo-icon {
    margin-bottom: 6px;
  }
}

/* O ponto em que o menu vira hambúrguer saiu daqui em 03/08: a regra passou a
   viver em `estilos.css`, valendo para as páginas base e v3 ao mesmo tempo —
   o topo é o mesmo em todas as páginas canônicas, o comportamento também. */

/* ══════════════════════════════════════════════════════════════════════════
   TESTE — MÁSCARA DO HERO, RÉPLICA DE ../proposta-refino/
   Bloco isolado: apagar daqui até o fim do arquivo devolve o hero claro do
   canônico. Só afeta a home — o catálogo usa .catalog-hero.

   Os valores abaixo são os da proposta-refino, sem alteração. A única
   diferença estrutural: lá a máscara vive em .hero::before (com .hero-bg em
   z -2); aqui o canônico já usa .hero::after para o véu (com .hero-bg em z -3).
   Mesma ordem de pintura, pseudo-elemento diferente.
   ══════════════════════════════════════════════════════════════════════════ */

.hero {
  background: var(--teal-dark);
  color: var(--on-teal);
}

.hero-bg img {
  object-position: 72% center;
}

.hero::after {
  background:
    linear-gradient(100deg, rgba(0, 45, 45, .96) 0%, rgba(0, 50, 50, .9) 34%, rgba(0, 60, 60, .58) 58%, rgba(0, 60, 60, .3) 100%),
    linear-gradient(to top, rgba(0, 40, 40, .82), transparent 46%);
}

/* Inversões de texto, também nos valores da proposta-refino. */
.hero h1 {
  color: var(--on-teal);
}

.hero h1 span {
  color: rgba(255, 255, 255, .62);
}

.hero .lead {
  color: rgba(255, 255, 255, .8);
}

/* A busca segue a pílula branca do canônico — a proposta-refino usa uma versão
   em vidro, mas ela depende dos tokens de lá. */
.hero-search {
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 20px 46px rgba(0, 30, 30, .4);
}

.hero .btn-outline {
  color: var(--on-teal);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .44);
}

.hero .btn-outline:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .72);
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO COM TEXTO À ESQUERDA — padrão oficial desde 22/07/2026
   O gradiente de 100deg é escuro à esquerda: o texto cai na parte densa e a
   foto abre à direita. A versão centralizada foi para _arquivo/.
   ────────────────────────────────────────────────────────────────────────── */

.hero-content {
  width: min(var(--maxw), calc(100% - 40px));
  text-align: left;
}

.hero h1,
.hero .lead,
.hero-search {
  margin-inline: 0;
}

/* 34rem: mesma medida de leitura da proposta-refino. */
.hero h1 {
  max-width: 34rem;
}

.hero .lead {
  max-width: 32rem;
}

.hero-search {
  width: min(34rem, 100%);
}

.hero-actions {
  justify-content: flex-start;
}

/* ──────────────────────────────────────────────────────────────────────────
   INDICADORES DENTRO DO HERO — linha de índice em filete
   O canônico trazia um cartão de vidro flutuando, com altura fixa, sombra de
   24px/54px e ícone em caixa, ancorado por margem negativa em cima do hero.
   Ele cobria a foto justamente na faixa onde as pessoas aparecem, e lia como
   um objeto pousado ali, não como parte da abertura.

   Vira o que é: uma linha de dados fechando o hero, separada por um filete de
   1px. Sem caixa, sem sombra, sem ícone, sem altura fixa — o número já é o
   elemento forte, não precisa de moldura para provar isso.
   ────────────────────────────────────────────────────────────────────────── */

/* O padding-bottom existia só para abrir espaço ao cartão sobreposto. */
.hero {
  padding-bottom: 0;
}

/* A faixa é um `<section>`: ela vinha recebendo os 72px de `--section-y` da
   regra genérica de seção em cima E embaixo, somados à margem própria (56px) e
   ao padding do `.wrap` (28px). Dava 128px entre os botões e o filete e 100px
   de vazio fechando o hero, contra 29px de respiro dentro da própria faixa —
   a linha de dados ficava perdida no meio de dois buracos. Aqui o espaçamento
   é só o do bloco. (O mobile.css já fazia isso no celular desde 03/08.) */
.stats {
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  padding-block: 0;
  color: inherit;
}

.stats .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(2rem, 6vw, 4.5rem);
  height: auto;
  max-width: none;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stat {
  display: block;
  height: auto;
  padding: 0;
  text-align: left;
}

/* Os filetes divisores saem: quem separa agora é o espaço entre as colunas. */
.stat + .stat {
  border-left: 0;
  border-top: 0;
}

/* Ícone fica no HTML mas some — assim o bloco de teste continua reversível
   apagando só o CSS. Se a proposta for aprovada, remover do HTML. */
.stat-icon {
  display: none;
}

.stat strong {
  color: var(--on-teal);
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.stat-body span {
  margin-top: 7px;
  color: rgba(255, 255, 255, .58);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .stats .wrap {
    gap: 18px 32px;
  }

  .stat {
    min-height: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   PESSOAS NA FAIXA DE LICENÇA CAPACITAÇÃO
   A faixa era teal chapado com textura de pontos e uma palavra gigante de marca
   d'água. Foto mascarada atrás dá presença humana sem mexer em uma linha de
   layout: as duas colunas continuam exatamente onde estavam.

   licenca-capacitacao-servidores-ifes.png — gente sentada, alguns de blazer: registro de
   trabalho, não de estudante. É a seção que fala com servidor público. Vem do
   mesmo ensaio do hero, mesmo estúdio, por isso a página não vira colagem.

   A máscara é densa de propósito: a seção tem texto e um painel branco por
   cima. A foto entra como presença tonal, não como fotografia em exibição.

   A seção "O que é MOOC" TENTOU este mesmo tratamento e não funcionou — texto
   demais por cima. Lá a foto ganhou moldura própria, na lateral (bloco abaixo).
   ────────────────────────────────────────────────────────────────────────── */

.service-band {
  background-color: var(--teal-dark);
  /* JPEG primeiro: é o que navegador sem `image-set()` enxerga. A segunda
     declaração sobrescreve a primeira onde `image-set()` existe, e aí o WebP
     ganha (~4x menor). Em background não dá para usar `<picture>`. */
  background-image:
    linear-gradient(135deg,
      rgba(0, 50, 50, .94) 0%,
      rgba(0, 62, 62, .89) 46%,
      rgba(0, 86, 86, .8) 100%),
    url("../img/licenca-capacitacao-servidores-ifes-1920.jpg");
  background-image:
    linear-gradient(135deg,
      rgba(0, 50, 50, .94) 0%,
      rgba(0, 62, 62, .89) 46%,
      rgba(0, 86, 86, .8) 100%),
    image-set(
      url("../img/licenca-capacitacao-servidores-ifes-1920.webp") type("image/webp"),
      url("../img/licenca-capacitacao-servidores-ifes-1920.jpg") type("image/jpeg"));
  background-size: auto, cover;
  background-position: center, center 24%;
  background-repeat: no-repeat;
}

/* A textura de pontos existia para dar matéria ao teal chapado. Com foto atrás
   ela vira ruído: dois padrões de alta frequência disputando o mesmo plano.
   Vale só para a faixa de licença — a "O que é MOOC" voltou ao teal liso e
   recuperou a textura (ver bloco do retrato lateral, mais abaixo). */
.service-band::before {
  display: none;
}

/* As marcas d'água ficam, mais discretas: sobre foto elas competiam. */
.oquee::after,
.service-band::after {
  color: rgba(255, 255, 255, .04);
}

@media (max-width: 640px) {
  /* No celular a faixa é estreita e o texto ocupa tudo: a foto vira só mancha
     atrás da leitura. Sobe a densidade da máscara. */
  /* Aqui entra a variante de 960px: no celular a faixa nunca passa disso, e
     baixar a de 1920 seria desperdiçar banda em conexão móvel. */
  .service-band {
    background-image:
      linear-gradient(160deg,
        rgba(0, 50, 50, .96) 0%,
        rgba(0, 64, 64, .93) 100%),
      url("../img/licenca-capacitacao-servidores-ifes-1920.jpg");
    background-image:
      linear-gradient(160deg,
        rgba(0, 50, 50, .96) 0%,
        rgba(0, 64, 64, .93) 100%),
      image-set(
        url("../img/licenca-capacitacao-servidores-ifes-960.webp") type("image/webp"),
        url("../img/licenca-capacitacao-servidores-ifes-1920.jpg") type("image/jpeg"));
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   "O QUE É MOOC" — retrato na lateral + passo a passo na horizontal
   O fundo fotográfico não funcionou aqui: a seção tem texto demais por cima,
   e o mosaico de sete painéis atrás de h2, lead, cópia, o "60%" e quatro
   cards virava fundo agitado, não imagem. Foto boa em seção densa precisa de
   moldura própria, não de largura total atrás da leitura.

   Agora a seção tem três áreas em vez de duas colunas:

     ┌──────────┬──────────────────────────┐
     │  retrato │  O que é curso MOOC?     │
     │  (lateral)│  lead, cópia, 60%, fatos │
     ├──────────┴──────────────────────────┤
     │  Como funciona — 01 02 03 04         │  ← faixa inteira, horizontal
     └─────────────────────────────────────┘

   O retrato entra à esquerda de propósito: o hero acima é texto à esquerda e
   foto à direita. Espelhar aqui evita duas faixas escuras seguidas com a mesma
   diagonal de leitura.
   ────────────────────────────────────────────────────────────────────────── */

/* Volta ao teal chapado: a foto agora tem lugar próprio. */
.oquee {
  background-color: var(--teal-deep);
  background-image:
    linear-gradient(135deg, rgba(0, 70, 70, .98), rgba(0, 118, 118, .9));
}

.oquee .wrap {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  grid-template-areas:
    "foto intro"
    "flow flow";
  gap: clamp(28px, 4vw, 52px);
  align-items: stretch;
}

.mooc-foto {
  grid-area: foto;
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) * 2);
  background: rgba(255, 255, 255, .06);
}

/* A foto acompanha a altura da coluna de texto: object-fit resolve o corte
   sem deformar. O enquadramento sobe um pouco para não cortar o rosto. */
.mooc-foto img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: center 22%;
}

.mooc-intro {
  grid-area: intro;
}

.mooc-flow {
  grid-area: flow;
}

/* ── Passo a passo na horizontal ──────────────────────────────────────────── */

.passos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Cada passo empilha: número em cima, título, texto. Antes era o número numa
   coluna de 46px à esquerda, que só funciona em lista vertical. */
.passos li {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "icon"
    "title"
    "text";
  column-gap: 0;
  padding: 18px;
}

.passo-icon {
  margin-bottom: 14px;
}

/* A numeração fantasma sai: em card estreito ela encosta no texto. */
.passos li::after {
  display: none;
}

@media (max-width: 1060px) {
  .passos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  /* Uma coluna só: o retrato vira faixa larga acima do texto. */
  .oquee .wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "foto"
      "intro"
      "flow";
  }

  .mooc-foto img {
    min-height: 0;
    max-height: 300px;
    object-position: center 18%;
  }
}

@media (max-width: 640px) {
  .passos {
    grid-template-columns: minmax(0, 1fr);
  }

  .passos li {
    padding: 16px;
  }
}