/* ============================================================
   SEÇÕES — na ordem em que aparecem no documento

   Ritmo de capítulo, não zebra de seção. A alternância antiga era
   branco / quase-branco a cada seção: com 4% de diferença de valor,
   ela não lia como ritmo, lia como inconsistência. Agora:

     escuro (hero · entregáveis · números)
     claro  (a iniciativa)
     ESCURO (as aulas — o miolo da oferta)
     claro  (para quem · fases · instrutores · dúvidas)
     escuro (fechamento)

   E cada seção alterna o tipo de composição: duas colunas
   assimétricas / cabeçalho empilhado + evento de largura inteira.
   Nenhuma vizinha repete o mesmo esqueleto.
   ============================================================ */

/* ───────────────── Barra de prazo ───────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--topbar-h);
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  background: linear-gradient(90deg, var(--navy-deep), var(--navy) 55%, #3B3468);
  color: var(--on-dark);
}

.topbar__text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}

.topbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.topbar__sep   { color: var(--on-dark-muted); }
.topbar__count { color: var(--gold); font-weight: 700; }
.topbar__free  { color: var(--on-dark-soft); }

/* ───────────────── Cabeçalho ───────────────── */

.site-header {
  position: fixed;
  inset: var(--topbar-h) 0 auto;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 100%;
}

.brand { flex: none; display: block; }
.brand__logo { width: clamp(148px, 16vw, 186px); height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.875rem);
}

.nav__link {
  position: relative;
  padding-block: var(--sp-2);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--action);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--navy); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--navy);
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(3px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

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

/* Altura presa a 90vh e conteúdo centrado na vertical: o hero passa a ter
   uma medida previsível, em vez de crescer com o texto. O padding-top
   ainda reserva o cabeçalho, senão a centragem empurra o texto para baixo
   dele. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 90vh;
  padding-top: calc(var(--topbar-h) + var(--header-h) + clamp(2rem, 4vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--noir);
  color: var(--on-dark);
  overflow: hidden;
}

/* Fotografia de fundo (1918×850). O roxo e o âmbar da imagem são os
   mesmos --violet e --gold da identidade, por isso ela entra sem
   tratamento de cor. Toda a metade esquerda é fundo liso: é ali que o
   texto se apoia, e por isso o enquadramento puxa para a direita — assim
   o chip e as duas mãos ficam livres, ao lado da coluna de texto. */
/* O <picture> existe só para trocar a foto no celular. `contents` tira a
   caixa dele do fluxo: como o hero é um grid, um <picture> inline vazio
   viraria uma linha extra e empurraria o conteúdo para baixo. */
.hero > picture { display: contents; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* Gradiente só do lado do texto, morrendo antes do centro: a metade da
   direita fica intacta. As paradas são muitas de propósito — com três ou
   quatro o olho enxerga a borda do degradê como uma faixa. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg,
    rgba(11, 11, 18, .97) 0%,
    rgba(11, 11, 18, .95) 8%,
    rgba(11, 11, 18, .90) 17%,
    rgba(11, 11, 18, .81) 26%,
    rgba(11, 11, 18, .68) 35%,
    rgba(11, 11, 18, .52) 44%,
    rgba(11, 11, 18, .35) 53%,
    rgba(11, 11, 18, .20) 62%,
    rgba(11, 11, 18, .09) 71%,
    rgba(11, 11, 18, .03) 80%,
    rgba(11, 11, 18, 0) 90%);
}

/* Só a costura com a seção seguinte, que é do mesmo --noir. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--noir));
}

.hero__inner { width: 100%; }

/* Coluna curta de propósito: o texto ocupa pouco mais de um terço da
   largura e devolve o resto da tela à fotografia. O `54vw` faz a coluna
   encolher junto com a tela — sem ele, ela ficaria fixa em 640px e o
   texto acabaria em cima do chip nas larguras médias. */
.hero__lead { max-width: min(640px, 54vw); }

.hero__lead .eyebrow { margin-bottom: var(--sp-5); }

/* O coeficiente alto (3.6vw) é o que mantém o título em três linhas: com
   a curva anterior ele travava nos 56px já a ~1067px de viewport,
   enquanto a coluna continuava encolhendo — e aí "Construa seus
   primeiros" não cabia mais numa linha e o hero inteiro crescia. */
.hero__title {
  margin-bottom: var(--sp-5);
  font-size: clamp(2.5rem, 0.5rem + 3.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: var(--track-tight);
}

/* "agentes de IA" é a assinatura da marca no título: quebrar no meio
   dela ("agentes de" / "IA em uma semana") desmonta a leitura. */
.hero__title em {
  color: var(--gold);
  white-space: nowrap;
}

/* Mais estreito que o título: a linha de apoio não deve disputar a
   mesma medida da manchete. */
.hero__text {
  max-width: 50ch;
  margin-bottom: var(--sp-6);
  color: var(--on-dark-soft);
  font-size: var(--t-md);
  line-height: var(--lh-body);
}
.hero__text strong { color: var(--on-dark); }

/* CTA primeiro, prazo como apoio ao lado — antes o prazo vinha antes e
   roubava a primeira parada do olho. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}
.hero__actions .deadline { margin-bottom: 0; }

.hero .chip-row { margin-top: var(--sp-6); }

/* ───────────────── O que você leva ───────────────── */

/* Não usa a classe `.section` de propósito: `.section` define o fundo
   claro mais adiante no arquivo e venceria este escuro na cascata.

   O `reveal` fica no grid, não aqui: ele zera a opacidade do elemento
   inteiro, e uma seção escura invisível deixa passar o `--paper` branco
   do body — uma tarja clara colada na base do hero.

   O fio no topo e o respiro menor existem porque o hero termina na mesma
   cor: sem a linha, as duas seções viram um bloco único com um buraco
   de ~250px no meio. */
.deliver {
  padding-block: clamp(3rem, 5vw, 5rem) var(--section-y);
  border-top: 1px solid var(--line-dark);
  background: var(--noir);
  color: var(--on-dark);
}

.deliver__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.deliver__title { color: var(--on-dark); }
.deliver__title em { color: var(--gold); }

.deliver__when {
  margin-top: var(--sp-5);
  color: var(--on-dark-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* Fora da moldura do card, os itens podem respirar. */
.deliver__list {
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}
.deliver__list li { font-size: var(--t-md); }

/* ───────────────── Faixa de números ───────────────── */

.stats {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  background: var(--navy);
  color: var(--on-dark);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.stat { text-align: center; }

.stat + .stat { border-left: 1px solid var(--line-dark); }

.stat__value {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--gold);
}

.stat__label {
  margin-top: var(--sp-2);
  color: var(--on-dark-soft);
  font-size: var(--t-sm);
  line-height: 1.4;
}

/* ───────────────── Base de seção clara ───────────────── */

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

.section--paper { background: var(--paper-2); }

/* ---------- Títulos: dois degraus, não um só ----------
   Tier A abre capítulo (a iniciativa, as aulas, o fechamento).
   Tier B serve as seções em que o evento visual é outro — a corrida
   de áreas, o trilho das fases, a lista de instrutores. Sem essa
   distinção todos os títulos pesam igual e a página fica plana. */

.about__title,
.lessons__title,
.close__title {
  margin-bottom: var(--sp-5);
  font-size: clamp(2rem, 1.15rem + 2.7vw, 3.25rem);
  line-height: 1.1;
}

.audience__title,
.phases__title,
.hosts__title,
.faq__title {
  margin-bottom: var(--sp-5);
  max-width: 20ch;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
}

/* ───────────────── A iniciativa ─────────────────
   Composição de duas colunas francamente desiguais, com a nota
   rebaixada em relação ao texto principal. A assimetria é o que
   impede o bloco de ler como "duas caixas lado a lado". */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.about__main { max-width: 34em; }

/* O primeiro parágrafo é maior que o segundo: entrada editorial, em
   vez de dois blocos de texto do mesmo peso. */
.about__lead {
  margin-bottom: var(--sp-5);
  color: var(--ink);
  font-size: var(--t-lg);
  line-height: 1.5;
}

.about__body {
  color: var(--ink-soft);
  font-size: var(--t-md);
}

/* Sem card e sem raio: um fio no topo e tipo menor. Isto é uma
   ressalva institucional, não um bloco de peso igual — o card antigo
   dava a ela a mesma importância do texto principal. O recuo no topo
   é o que cria a assimetria vertical. */
.about__note {
  margin-top: calc(var(--sp-8) + var(--sp-4));
  padding-top: var(--sp-5);
  border-top: 2px solid var(--navy);
}

.about__note-title {
  margin-bottom: var(--sp-3);
  color: var(--navy);
  font-size: var(--t-base);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.about__note p {
  color: var(--ink-soft);
  font-size: var(--t-base);
}

.about__disclaimer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted) !important;
  font-size: var(--t-sm) !important;
}

/* ───────────────── As três aulas ─────────────────
   Capítulo escuro. Os numerais deixam de ser enfeite cinza na margem
   e passam a ser a estrutura da linha: é o único momento de escala
   grande da metade superior clara da página. */

.section.lessons {
  background: var(--noir-2);
  color: var(--on-dark);
}

.lessons__head { max-width: 46ch; }
.lessons__title { color: var(--on-dark); }
.lessons__title em { color: var(--gold); }

.lessons__intro {
  color: var(--on-dark-soft);
  font-size: var(--t-md);
}

.lesson-list {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line-dark);
}

.lesson {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.25fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 3.4vw, 3.25rem);
  border-bottom: 1px solid var(--line-dark);
  transition: background var(--dur) var(--ease);
}

.lesson:hover { background: rgba(255, 255, 255, .035); }

/* Baixíssimo contraste de propósito: o numeral é arquitetura, não
   informação — quem lê precisa da data e do título, não do "01".
   Daí também o aria-hidden no HTML. */
.lesson__num {
  font-size: var(--t-num-xl);
  font-weight: 800;
  line-height: .82;
  letter-spacing: var(--track-tight);
  color: rgba(255, 255, 255, .13);
  transition: color var(--dur) var(--ease);
}

.lesson:hover .lesson__num { color: rgba(255, 255, 255, .22); }

.lesson__date {
  margin-bottom: var(--sp-3);
  color: var(--on-dark-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.lesson__title {
  color: var(--on-dark);
  font-size: var(--t-xl);
  line-height: 1.18;
}

/* Rótulo tipográfico em lugar da pílula cinza. O terra vem dos raios
   do símbolo e não é usado em nenhum outro ponto da página, então
   marca "ferramenta" sem competir com o dourado. */
.lesson__tool {
  margin-top: var(--sp-4);
  color: var(--terra);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: .06em;
}

.lesson__tool span {
  margin-right: var(--sp-2);
  color: var(--on-dark-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.lesson__body {
  color: var(--on-dark-soft);
  font-size: var(--t-base);
}

/* ---------- Roteiro da semana ----------
   Trilho horizontal de verdade: os fios encostam (gap zero + recuo
   interno) e formam uma linha contínua com quatro marcas. A caixa
   arredondada antiga não dizia que aquilo era uma sequência. */

.week { margin-top: var(--sp-8); }

.week__label {
  margin-bottom: var(--sp-5);
  color: var(--on-dark-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.week__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.week__stop {
  position: relative;
  padding-top: var(--sp-5);
  padding-right: var(--sp-5);
  border-top: 1px solid var(--line-dark);
}

.week__stop::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
}

/* As três aulas são o miolo da semana: é a única parada acesa. */
.week__stop--key { border-top-color: var(--gold); }
.week__stop--key::before { background: var(--gold); }

.week__date {
  display: block;
  color: var(--on-dark);
  font-size: var(--t-base);
  font-weight: 800;
}
.week__stop--key .week__date { color: var(--gold); }

.week__what {
  display: block;
  margin-top: 2px;
  color: var(--on-dark-muted);
  font-size: var(--t-sm);
}

/* ───────────────── Para quem é ─────────────────
   Seção curta de propósito (~metade da altura das vizinhas): variar a
   altura das seções é parte do ritmo. O evento é a corrida de áreas —
   as seis caixas antigas continham uma palavra cada. */

.audience__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.audience__aside { max-width: 52ch; }

.audience__intro {
  color: var(--ink-soft);
  font-size: var(--t-md);
}

.audience__note {
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--gold);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.areas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.areas li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  color: var(--navy);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
}

/* Separador desenhado em CSS, não o caractere "·": no corpo de display o
   glifo sai grande e quadradão, e o tamanho passaria a depender da fonte.
   Um círculo de 7px é previsível em qualquer escala. */
.areas li:not(:last-child)::after {
  content: "";
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terra);
}

/* ───────────────── Depois da imersão ─────────────────
   Linha do tempo horizontal. É a única seção em que um trilho é
   honesto: o conteúdo é datado e sequencial de verdade. A fase atual
   é a única preenchida — a composição codifica a progressão em vez de
   apenas listar cinco blocos iguais. */

.phases__head { max-width: 52ch; }

.phases__intro {
  color: var(--ink-soft);
  font-size: var(--t-md);
}

/* `subgrid` nas três linhas: rótulo, título e descrição alinham entre as
   cinco colunas. Sem ele, "Fase 02 · outubro e novembro" quebrava em duas
   linhas, empurrava o título para baixo e desalinhava a coluna inteira —
   e um trilho desalinhado deixa de ler como linha do tempo. Onde não há
   suporte a subgrid, os itens voltam a fluir empilhados: degrada sozinho. */
.phases__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto auto;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.phase {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--sp-2);
  align-content: start;
  padding-top: var(--sp-5);
  padding-right: var(--sp-5);
  border-top: 2px solid var(--line-strong);
}

.phase:last-child { padding-right: 0; }

.phase::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}

/* "Você está aqui": fio e marca cheios, na cor de ação. */
.phase--now { border-top-color: var(--action); }
.phase--now::before {
  background: var(--action);
  box-shadow: none;
}

/* Sem margem própria: o espaçamento vem do `row-gap` do subgrid. Com as
   duas coisas somadas o respiro dobrava. */
.phase__when {
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.phase--now .phase__when { color: var(--action-hover); }

.phase__title {
  color: var(--navy);
  font-size: var(--t-lg);
}

.phase__desc {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* O esmaecimento é só da marca e do rótulo de fase — o texto continua
   em contraste cheio, senão a "progressão" viraria um problema de
   legibilidade. */
.phase:nth-child(4)::before { opacity: .7; }
.phase:nth-child(5)::before { opacity: .5; }
.phase:nth-child(4) .phase__when,
.phase:nth-child(5) .phase__when { opacity: .8; }

/* ───────────────── Quem conduz ─────────────────
   Cabeçalho numa coluna lateral estreita e a lista à direita. Os três
   cards viraram linhas separadas por fio: três caixas vazias pareciam
   estar com falta de imagem, uma lista assumida não.

   Os retratos têm 320×320 na origem — exibidos a 96px, sobra
   resolução para telas 2×/3×. Não dá para ampliá-los mais que isso
   sem perder nitidez, e é isso que define o formato da seção. */

.hosts__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.hosts__head .hosts__title { margin-bottom: 0; }

.host-list { border-top: 1px solid var(--line); }

.host {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: center;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

/* Quadrado com canto mínimo: o círculo puxaria a seção para o visual
   de "equipe de startup", e o briefing pede menos arredondamento. */
.host__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--paper-3);
}

.host__name {
  color: var(--navy);
  font-size: var(--t-lg);
  line-height: 1.2;
}

.host__role {
  margin-top: var(--sp-2);
  color: var(--action-hover);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

.host__bio {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* ───────────────── Dúvidas ───────────────── */

.faq__list {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}

.qa { border-bottom: 1px solid var(--line); }

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  color: var(--navy);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--action-hover); }

.qa__q::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  border-right: 2.5px solid var(--action);
  border-bottom: 2.5px solid var(--action);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.qa[open] .qa__q::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.qa__a { padding-bottom: var(--sp-5); }

.qa__a p {
  max-width: 68ch;
  color: var(--ink-soft);
}

/* ───────────────── Fechamento ─────────────────
   "Como participar" + CTA final fundidos. Alinhado à esquerda: o
   briefing pede para evitar o título-centralizado-parágrafo-botão, e
   era exatamente assim que a página terminava.

   Como o hero e a seção de entregáveis, não usa `.section` — o fundo
   claro dela venceria este escuro na cascata. */

.close {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 8vw, 8rem);
  background: var(--noir);
  color: var(--on-dark);
  overflow: hidden;
}

/* Aura contida e assimétrica, ancorada no canto do CTA — não um glow
   centrado genérico. */
.close__aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42% 58% at 18% 14%, rgba(124, 58, 237, .38), transparent 72%),
    radial-gradient(34% 48% at 88% 86%, rgba(131, 75, 120, .26), transparent 72%);
  filter: blur(6px);
}

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.close__title { color: var(--on-dark); }
.close__title em { color: var(--gold); }

.close__text {
  max-width: 44ch;
  margin-bottom: var(--sp-6);
  color: var(--on-dark-soft);
  font-size: var(--t-md);
}

.close__meta {
  margin-top: var(--sp-5);
  color: var(--on-dark-muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* Os passos são apoio do CTA, não uma seção própria: tipo menor,
   numerais discretos, fio entre eles. */
.close__steps {
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-2);
}

.close__step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-dark);
}

.close__step:last-child { border-bottom: none; padding-bottom: 0; }

.close__step-num {
  color: var(--gold);
  font-size: var(--t-base);
  font-weight: 800;
  letter-spacing: var(--track-wide);
}

.close__step-title {
  margin-bottom: var(--sp-1);
  color: var(--on-dark);
  font-size: var(--t-base);
}

.close__step p {
  color: var(--on-dark-muted);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.close__step strong { color: var(--on-dark-soft); }

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

.site-footer {
  padding-block: clamp(3rem, 5vw, 4.5rem) var(--sp-6);
  background: var(--navy-deep);
  color: var(--on-dark-soft);
  font-size: var(--t-sm);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-dark);
}

.site-footer__logo { width: 178px; margin-bottom: var(--sp-4); }

.site-footer__tag {
  max-width: 40ch;
  color: var(--on-dark-muted);
  line-height: 1.6;
}

.site-footer__heading {
  margin-bottom: var(--sp-4);
  color: var(--on-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.site-footer__nav ul,
.site-footer__contact ul { display: grid; gap: var(--sp-3); }

.site-footer a { text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--gold); }

.site-footer__legal {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  color: var(--on-dark-muted);
  font-size: var(--t-xs);
  line-height: 1.65;
}

.site-footer__legal p:first-child { max-width: 92ch; }

/* ============================================================
   RESPONSIVO — cada faixa revista individualmente

   As composições novas não empilham sozinhas: o trilho das fases
   precisa girar para vertical, a lista de instrutores precisa
   reagrupar foto/nome/bio, e a corrida de áreas precisa de outra
   escala. Cada uma tem regra própria abaixo.
   ============================================================ */

/* ---------- 1081–1280px: a foto continua sendo fundo, mas a coluna de
   texto já alcança o chip aceso. O véu avança para a direita e a coluna
   encolhe: a leitura ganha do brilho. ---------- */
@media (min-width: 1081px) and (max-width: 1280px) {
  /* A coluna já encolhe sozinha pelo `54vw`; aqui só o enquadramento
     avança mais para a direita, para o chip não chegar perto do texto.
     O degradê não muda — ele já morre antes do centro. */
  .hero__media { object-position: 68% 50%; }
}

/* ---------- ≤ 1080px: hero empilha, colunas duplas se desfazem ---------- */
@media (max-width: 1080px) {
  /* Aqui o texto não cabe mais ao lado da foto: ela deixa de ser fundo e
     vira uma faixa de altura fixa no topo. A foto é 2,26:1 — bem mais
     panorâmica que a tela — então numa faixa estreita o `cover` corta as
     laterais, e o enquadramento precisa correr para a direita para
     segurar o chip e as duas mãos. A altura fixa também é o que impede o
     hero de virar uma coluna de 1500px no celular. */
  .hero {
    --media-h: clamp(260px, 48vw, 400px);
    min-height: auto;
    padding-top: calc(var(--media-h) + clamp(1.5rem, 4vw, 2.5rem));
  }

  .hero__media,
  .hero__scrim {
    inset: 0 0 auto;
    height: var(--media-h);
  }

  /* O eixo Y só age acima de ~900px de largura (400px de faixa × 2,26 da
     foto = 902): ali a faixa fica mais panorâmica que a imagem, o `cover`
     escala pela largura e corta na vertical. Com 50% esse corte caía
     sobre o chip e o decepava no topo. Abaixo de 902px o corte passa a
     ser horizontal e só o eixo X importa. */
  .hero__media { object-position: 76% 30%; }

  /* Empilhado, o texto fica ABAIXO da foto: o degradê deixa de ser
     lateral e passa a fundir a base da imagem no fundo da seção. */
  .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(11, 11, 18, 0) 0%,
      rgba(11, 11, 18, .05) 34%,
      rgba(11, 11, 18, .20) 54%,
      rgba(11, 11, 18, .46) 70%,
      rgba(11, 11, 18, .74) 84%,
      rgba(11, 11, 18, .93) 94%,
      var(--noir) 100%);
  }

  .hero__lead { max-width: none; }
  .hero__text { max-width: 60ch; }

  /* Título e lista deixam de caber lado a lado. */
  .deliver__grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* A nota perde o recuo que criava a assimetria vertical: empilhada,
     ela já vem naturalmente depois do texto principal. */
  .about__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .about__note { margin-top: 0; }
  .about__main { max-width: none; }

  /* A terceira coluna da aula não cabe: o corpo desce para baixo do
     título, mas o numeral continua na coluna própria. */
  .lesson {
    grid-template-columns: minmax(0, .4fr) minmax(0, 1.6fr);
    gap: var(--sp-4) clamp(1.5rem, 4vw, 2.5rem);
  }
  .lesson__body { grid-column: 2; }

  .audience__head { grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
  .audience__aside { max-width: 62ch; }

  /* Cinco fases em três colunas: os fios deixam de encostar, então o
     trilho vira marcação segmentada em vez de linha contínua. */
  .phases__track {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6) var(--sp-5);
  }
  .phase,
  .phase:last-child { padding-right: 0; }

  .hosts__grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  .close__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .close__text { max-width: 56ch; }
}

/* ---------- ≤ 900px: tablet ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: calc(var(--topbar-h) + var(--header-h)) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur);
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link {
    display: block;
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--t-md);
  }
  .nav__link::after { display: none; }

  .nav__cta { margin-top: var(--sp-5); width: 100%; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
  .stat + .stat { border-left: none; }
  .stat:nth-child(even) { border-left: 1px solid var(--line-dark); }

  /* Quatro paradas não cabem lado a lado: duas linhas de dois, ainda
     com os fios encostando dentro de cada linha. */
  .week__track { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }

  /* A bio desce para baixo do nome e alinha com ele, deixando a coluna
     da foto livre. */
  .host {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }
  .host__photo { width: 72px; height: 72px; }
  .host__bio { grid-column: 2; }
}

/* ---------- ≤ 640px: celular ---------- */
@media (max-width: 640px) {
  .topbar__text { font-size: 11px; line-height: 1.35; }

  /* ---------- Hero com a foto vertical ----------
     A imagem (9:16) é ancorada na base do hero com a largura da tela,
     sem `cover`: assim ela nunca é reescalada nem cortada, e a geometria
     é previsível. O texto ocupa o topo, que na foto é fundo liso, e o
     `padding-bottom` reserva a faixa onde estão o chip e as duas mãos
     (os 44% inferiores da imagem: 0.44 × 177.8vw ≈ 78vw). O chip acende
     logo abaixo da dobra na maioria dos celulares — convite ao scroll.

     A altura da imagem em vw (100vw × 1920 / 1080) é a mesma usada pelo
     `aspect-ratio` e pelo véu, para os três coincidirem. */
  .hero {
    --hero-img-h: 177.8vw;
    --hero-band: 78vw;
    padding-top: calc(var(--topbar-h) + var(--header-h) + var(--sp-7));
    padding-bottom: calc(var(--hero-band) + var(--sp-5));
  }

  .hero__media {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1080 / 1920;
    object-fit: cover;
    object-position: 50% 100%;
  }

  /* O véu cobre só a imagem e funde o topo dela no fundo do hero: o
     roxo da foto começa a aparecer sob o texto, sem borda. Morre antes
     do chip, que fica inteiro e com o brilho original. */
  .hero__scrim {
    inset: auto 0 0;
    height: var(--hero-img-h);
    background: linear-gradient(to bottom,
      var(--noir) 0%,
      rgba(11, 11, 18, .96) 10%,
      rgba(11, 11, 18, .84) 22%,
      rgba(11, 11, 18, .58) 34%,
      rgba(11, 11, 18, .30) 44%,
      rgba(11, 11, 18, .10) 52%,
      rgba(11, 11, 18, 0) 60%);
  }

  /* Costura mais curta: 160px comeriam metade das mãos. */
  .hero::after { height: 90px; }

  .hero__title { font-size: clamp(2.125rem, 8.4vw, 2.75rem); }

  /* Botão e prazo não cabem lado a lado: empilham, e o botão ocupa a
     linha inteira pela regra de `.btn--lg` logo abaixo. */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .btn--lg { width: 100%; padding-inline: var(--sp-5); }

  .chip { font-size: 12px; padding: 6px var(--sp-3); }

  .audience__title,
  .phases__title,
  .hosts__title,
  .faq__title { max-width: none; }

  /* Numeral acima do título, em vez de coluna própria — mas mantendo a
     escala grande: encolhê-lo até virar um "01" cinza devolveria a
     seção ao visual antigo. */
  .lesson {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding-block: var(--sp-6);
  }
  .lesson__num { font-size: clamp(2.75rem, 14vw, 4rem); line-height: 1; }
  .lesson__body { grid-column: auto; margin-top: var(--sp-3); }

  /* Uma parada por linha; o trilho vira vertical junto com as fases. */
  .week__track { grid-template-columns: 1fr; row-gap: 0; }
  .week__stop {
    padding: 0 0 var(--sp-5) var(--sp-5);
    border-top: none;
    border-left: 1px solid var(--line-dark);
  }
  .week__stop:last-child { padding-bottom: 0; }
  .week__stop::before { top: 4px; left: -4px; }

  /* A corrida de áreas cai um degrau de escala: em 5 vw de gutter, o
     display cheio produziria três linhas de uma palavra cada. */
  .areas { gap: var(--sp-2) var(--sp-4); }
  .areas li {
    gap: var(--sp-4);
    font-size: clamp(1.5rem, 7.4vw, 2.125rem);
  }
  /* Aqui quase toda linha quebra, e o separador ficava pendurado no fim
     dela, parecendo erro. Sem ele, a própria quebra separa as áreas. */
  .areas li::after { display: none; }

  /* Trilho vertical: o fio passa para a esquerda e as marcas correm
     por ele. É uma linha do tempo, não cinco blocos empilhados. */
  .phases__track { grid-template-columns: 1fr; gap: 0; }
  .phase {
    padding: 0 0 var(--sp-6) var(--sp-5);
    border-top: none;
    border-left: 2px solid var(--line-strong);
  }
  .phase:last-child { padding-bottom: 0; }
  .phase--now { border-top-color: var(--line-strong); border-left-color: var(--action); }
  .phase::before { top: 0; left: -5.5px; }

  /* Foto e nome na primeira linha, bio na largura inteira abaixo. */
  .host {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-4);
  }
  .host__photo { width: 56px; height: 56px; }
  .host__bio { grid-column: 1 / -1; }

  .qa__q { font-size: var(--t-base); padding-block: var(--sp-4); }

  .close__step { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-3); }

  .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .site-footer__logo  { width: 158px; }
}

/* ---------- Impressão ---------- */
@media print {
  .topbar, .site-header, .nav-toggle,
  .hero__media, .hero__scrim, .close__aura { display: none; }
  /* Sem a foto, 90vh viraria uma página quase em branco. */
  .hero { min-height: auto; }
  .hero, .close, .stats, .deliver, .site-footer,
  .section.lessons {
    background: #fff !important;
    color: #000 !important;
  }
  .qa[open] .qa__a, .qa__a { display: block; }
}