/* ==========================================================================
   SGP — Camada 22: O CURSO DO SGP (frente V3)

   "O SGP em 12 minutos": uma lição por vez, com o vídeo no lugar de destaque,
   o mapa das dez ao lado, e o cartão que o painel oferece a quem ainda não fez.

   Substitui a camada 21 (o guia de texto da D2), de que herda duas regras:

   · NENHUMA SOBREPOSIÇÃO. Não há popover, não há cortina, não há z-index. O
     curso é página e o cartão é cartão. O tour da F27 já provou o custo de uma
     camada que intercepta clique — quem navega com teclado, com leitor de tela
     ou com o Capybara fica preso atrás dela.
   · Tudo em tokens da camada 1, então o tema claro/escuro sai de graça.

   E acrescenta uma terceira, que é do vídeo:

   · A MOLDURA NASCE DO TAMANHO CERTO. `aspect-ratio` vem do manifesto, via
     variável na marcação. O pôster, o esqueleto de carregamento e o vídeo
     ocupam exatamente o mesmo espaço, então nada salta quando o arquivo chega.
   ========================================================================== */

/* -- A tela da lição: vídeo à esquerda, AÇÃO à direita ---------------------

   O botão da ação tem de estar na tela no primeiro instante. Empilhado (vídeo,
   texto equivalente, título, ação) ele caía 427 px abaixo da dobra num laptop
   de 1440x900 — medido, não estimado — e a capa continuava prometendo "o botão
   da ação está sempre ao lado do vídeo".

   São TRÊS áreas, e o celular usa a mesma grade em outra ordem:

     computador          celular
     ┌───────┬──────┐    ┌────────┐
     │ video │ lado │    │ video  │
     ├───────┤      │    ├────────┤
     │ texto │      │    │ lado   │   ← título + ação + mapa
     └───────┴──────┘    ├────────┤
                         │ texto  │   ← o equivalente em texto, por último
                         └────────┘

   O texto equivalente é bloco IRMÃO do vídeo (e não <figcaption>) por causa
   desta grade: dentro do <figure> ele não teria como descer para depois da
   ação no celular, e era ele que empurrava o botão para fora da tela. */

.curso {
  display: grid;
  gap: var(--esp-6);
}

.curso-licao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  min-width: 0;
}

.curso-licao__dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  grid-template-areas:
    "video lado"
    "texto lado";
  grid-template-rows: auto 1fr;
  gap: var(--esp-5) var(--esp-6);
  align-items: start;
}

.curso-licao__video { grid-area: video; min-width: 0; }
.curso-licao__texto { grid-area: texto; min-width: 0; }

.curso-licao__lado {
  grid-area: lado;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  min-width: 0;
}

/* Abaixo de 1024 a coluna de 300 px espremeria as duas: a lição vira uma
   pilha, e o texto equivalente vai para o fim dela. */
@media (max-width: 1024px) {
  .curso-licao__dupla {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "video"
      "lado"
      "texto";
    grid-template-rows: auto;
    gap: var(--esp-4);
  }

  .curso-licao__lado { gap: var(--esp-4); }
}


/* O mapa das dez, agora sob a ação. Uma régua discreta o separa dela: são
   assuntos diferentes na mesma coluna. */
.curso-licao__mapa {
  padding-top: var(--esp-5);
  border-top: 1px solid var(--cor-borda);
}

/* -- Medidor: "lição 3 de 10" + barra -------------------------------------- */

.curso-medidor__contador {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.curso-medidor__contador strong { color: var(--cor-texto); }
.curso-medidor__separador { margin: 0 var(--esp-2); opacity: .6; }

.curso-medidor__barra {
  overflow: hidden;
  height: 6px;
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-afundado);
}

.curso-medidor__preenchido {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cor-acao);
  transition: width var(--transicao-lenta);
}

@media (prefers-reduced-motion: reduce) {
  .curso-medidor__preenchido { transition: none; }
}

/* -- O VÍDEO --------------------------------------------------------------- */

.curso-video { margin: 0; }

.curso-video__moldura {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--curso-video-proporcao, 16 / 9);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  /* O fundo é o afundado, e não preto: enquanto o pôster não chega, uma
     moldura preta grita "quebrado" no tema claro. */
  background: var(--cor-fundo-afundado);
  box-shadow: var(--sombra-md);
}

/* `contain`, NUNCA `cover`. A moldura nasce com a proporção que o manifesto
   declara, e nesse caso os dois dão no mesmo — mas quando o manifesto não traz
   largura/altura a moldura cai para 16/9, e `cover` cortaria uma tomada 8:5 em
   11% da altura, em cima e embaixo, sem avisar. Num vídeo de tela, a borda de
   cima é a barra de menu que a lição está ensinando. Com `contain` não se perde
   um pixel, e a faixa que sobra é a cor de fundo da própria moldura. */
.curso-video__midia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--cor-fundo-afundado);
}

/* O esqueleto do carregamento: uma faixa discreta no canto, sobre a moldura já
   do tamanho certo. Some no primeiro quadro decodificado. */
.curso-video__estado {
  position: absolute;
  inset-inline-start: var(--esp-3);
  inset-block-start: var(--esp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-pilula);
  background: rgba(17, 22, 29, .72);
  color: #fff;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  backdrop-filter: blur(4px);
}

/* `display` explícito VENCE o atributo `hidden` — a regra do reset é
   `[hidden] { display: none }`, e uma classe com `display: inline-flex` passa
   por cima dela. Sem esta linha a faixa de "Carregando…" fica pousada sobre um
   vídeo que já está rodando, e o JavaScript que a esconde parece não funcionar.
   Foi assim que ela apareceu: escondida no DOM, visível na tela. */
.curso-video__estado[hidden] { display: none; }

.curso-video__pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: curso-pulso 1.2s ease-in-out infinite;
}

@keyframes curso-pulso {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .curso-video__pulso { animation: none; opacity: .8; }
}

.curso-video__marca {
  position: absolute;
  inset-inline-end: var(--esp-3);
  inset-block-start: var(--esp-3);
  display: flex;
  gap: var(--esp-2);
  margin: 0;
  pointer-events: none;
}

.curso-video__mudo,
.curso-video__duracao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 2px var(--esp-2);
  border-radius: var(--raio-pilula);
  background: rgba(17, 22, 29, .62);
  color: #fff;
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: .02em;
}

/* Lição ainda sem vídeo gravado: um lugar em branco explicado, não um buraco.
   E MENOR do que a moldura do vídeo — reservar 900px de altura para um aviso de
   duas linhas seria pedir à pessoa que rolasse por cima de nada. */
.curso-video--sem-arquivo .curso-video__moldura {
  aspect-ratio: auto;
  min-height: 200px;
  box-shadow: none;
}

.curso-video__ausente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  height: 100%;
  padding: var(--esp-6);
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      color-mix(in srgb, var(--cor-borda) 45%, transparent) 14px 15px
    );
}

.curso-video__ausente-titulo {
  margin: 0;
  color: var(--cor-texto);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}

.curso-video__ausente-texto {
  max-width: 40ch;
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

/* VER EM TELA CHEIA. Fica no rodapé da moldura, discreto, e cresce no toque:
   é a única maneira de ler o que está escrito dentro de uma tomada de 1440 de
   largura numa moldura que tem metade disso — e um quarto no celular. */
.curso-video__cheia {
  position: absolute;
  inset-inline-end: var(--esp-3);
  inset-block-end: var(--esp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--raio-pilula);
  background: rgba(17, 22, 29, .72);
  color: #fff;
  font-family: inherit;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.curso-video__cheia:hover { background: rgba(17, 22, 29, .88); }

.curso-video__cheia:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

/* Os controles nativos do <video> ocupam a faixa de baixo e comem o clique do
   botão. Ele sobe para cima deles, no canto, longe da linha do tempo. */
@media (max-width: 620px) {
  .curso-video__cheia {
    inset-block-end: auto;
    inset-block-start: calc(var(--esp-3) + 28px);
  }
}

/* O TEXTO EQUIVALENTE. Não é enfeite nem "transcrição opcional": para quem não
   pode ver a imagem, ele É a lição. Fica sempre visível, e com peso de leitura
   — não de nota de rodapé. */
.curso-video__texto {
  margin: 0;
  padding: var(--esp-4) var(--esp-5);
  border-inline-start: 3px solid var(--cor-acao);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  background: var(--cor-fundo-sutil);
}

.curso-video__texto-rotulo {
  margin: 0 0 var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.curso-video__falas {
  margin: 0;
  padding-inline-start: var(--esp-5);
  color: var(--cor-texto);
  font-size: var(--texto-md);
  line-height: 1.6;
}

.curso-video__falas li + li { margin-top: var(--esp-2); }

/* -- A coluna da ação: título, o que ensina, e o botão ---------------------- */

.curso-licao__selo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-2);
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.curso-licao__feito {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 2px var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--sgp-sucesso-suave);
  color: var(--sgp-sucesso);
  text-transform: none;
  letter-spacing: 0;
}

.curso-licao__contagem {
  margin-inline-start: var(--esp-1);
  padding: 0 var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--sgp-sucesso);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Menor do que era: numa coluna de 320 px, o `--texto-3xl` da versão empilhada
   quebrava em quatro linhas e sozinho empurrava o botão para fora da tela. */
.curso-licao__titulo {
  margin: 0 0 var(--esp-3);
  color: var(--cor-texto);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.curso-licao__ensina {
  margin: 0;
  max-width: 62ch;
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
  line-height: 1.55;
}

/* O BLOCO DA AÇÃO. É o que fica na tela depois que o vídeo passa, e por isso é
   ele — e não o vídeo — que carrega a borda de destaque.

   É uma COLUNA FLEX, e não um bloco, só porque o celular precisa de outra
   ordem — ver o `order` mais abaixo. No computador todos os itens ficam em
   `order: 0` e a ordem é a do documento. */
.curso-acao {
  display: flex;
  flex-direction: column;
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-xs);
}

.curso-acao__rotulo {
  margin: 0 0 var(--esp-2);
  color: var(--cor-acao-forte);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.curso-acao__texto {
  margin: 0 0 var(--esp-2);
  color: var(--cor-texto);
  font-size: var(--texto-md);
  line-height: 1.5;
}

.curso-acao__tempo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  margin: 0 0 var(--esp-4);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.curso-acao__botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

/* ── NO CELULAR O BOTÃO SOBE, E A EXPLICAÇÃO DESCE ─────────────────────────

   Medido em 390x844: com a ordem do documento (rótulo, o que fazer, quanto
   leva, botão), o botão nascia em y=1024 — 226 px abaixo da dobra. A pessoa
   abria a lição, via o vídeo e um parágrafo, e tinha de rolar para descobrir
   que havia o que fazer.

   No computador a coluna cabe inteira e a ordem do documento é a certa: o
   rótulo prepara, a frase explica, o botão conclui. Na tela estreita a
   prioridade se inverte — o RÓTULO DO BOTÃO já é a instrução ("Abrir as
   fichas do gabinete"), e o parágrafo vira o detalhe de quem quiser ler.
   
   AVISO DE LEITURA: só o botão é focável dentro deste bloco, então não há
   ordem de tabulação para embaralhar; o leitor de tela continua lendo o
   documento na ordem escrita, que é a que explica antes de mandar fazer.
   
   As NOTAS (teste vencido, perfil só de consulta, exemplo não cabe) continuam
   ANTES do botão: são a razão de ele levar a outra tela, e depois dele
   chegariam tarde. */
@media (max-width: 1024px) {
  .curso-acao__rotulo { order: 3; margin: var(--esp-4) 0 var(--esp-2); }
  .curso-acao__texto  { order: 4; }
  .curso-acao__tempo  { order: 5; margin: 0; }
  .curso-nota         { order: 1; }
  .curso-acao__botoes { order: 2; }
  .curso-acao__remate { order: 6; }
  .curso-acao__sinal  { order: 7; }
}

/* Numa coluna de 320 px o botão ocupa a linha inteira. Não é enfeite: é o
   alvo do polegar e a única coisa que a lição pede.

   `min-width: 0` E `white-space: normal` NÃO SÃO ENFEITE, SÃO O CONSERTO DE UMA
   ROLAGEM HORIZONTAL MEDIDA. Item de flex nasce com `min-width: auto`, que é
   "não encolho abaixo do meu conteúdo mínimo"; e `.botao` traz
   `white-space: nowrap`, então o conteúdo mínimo do formulário é o rótulo
   inteiro numa linha só. Em 390x844 o rótulo mais longo do curso ("Encher o
   gabinete com dados de exemplo", lição 1) pedia 387 px numa coluna de 322 e
   empurrava o documento para scrollWidth=416 — a página inteira rolava para o
   lado, na lição que é a primeira que alguém abre. Deixando o rótulo quebrar em
   duas linhas o botão volta a caber na coluna e nada é escondido. */
.curso-acao__botoes form { margin: 0; flex: 1 1 100%; min-width: 0; }
.curso-acao__botoes form .botao {
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

/* A frase do destino ocupa a linha inteira, ABAIXO do botão. Ao lado dele ela
   disputava o olho com a única coisa que a pessoa precisa ver ali. */
.curso-acao__destino { margin: 0; flex: 1 0 100%; }
.curso-acao__destino code {
  padding: 1px var(--esp-1);
  border-radius: var(--raio-xs);
  background: var(--cor-fundo-afundado);
  font-family: var(--fonte-mono);
  font-size: .92em;
}

.curso-acao__remate {
  margin: var(--esp-4) 0 0;
  font-size: var(--texto-md);
  line-height: 1.55;
}

.curso-acao__sinal {
  margin: var(--esp-4) 0 0;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
  line-height: 1.55;
}

.curso-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-4);
  padding: var(--esp-3);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-afundado);
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
  line-height: 1.5;
}

.curso-nota--atencao {
  background: var(--sgp-atencao-suave);
  color: var(--sgp-atencao);
}

/* -- Navegação entre lições ------------------------------------------------ */

.curso-navegacao {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.curso-navegacao__lado { flex: 1 1 0; min-width: 0; }
.curso-navegacao__lado--fim { display: flex; justify-content: flex-end; }
.curso-navegacao__lado form { margin: 0; }

.curso-navegacao .botao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.curso-navegacao__dica { margin: 0; white-space: nowrap; }

.curso-navegacao__dica kbd {
  padding: 1px var(--esp-2);
  border: 1px solid var(--cor-borda-forte);
  border-bottom-width: 2px;
  border-radius: var(--raio-xs);
  background: var(--cor-fundo-elevado);
  font-family: var(--fonte-base);
  font-size: var(--texto-2xs);
}

/* No celular some a dica do teclado (não há teclado), mas o RÓTULO fica: dois
   chevrons sozinhos são alvos pequenos demais para o polegar e não dizem para
   onde levam. */
@media (max-width: 620px) {
  .curso-navegacao { gap: var(--esp-2); }
  .curso-navegacao__dica { display: none; }
  .curso-navegacao .botao { padding-inline: var(--esp-3); }
}

/* -- O mapa das lições ----------------------------------------------------- */

.curso-mapa__titulo {
  margin: 0 0 var(--esp-3);
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.curso-mapa {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  overflow: hidden;
}

.curso-mapa__item + .curso-mapa__item { border-top: 1px solid var(--cor-borda); }

.curso-mapa__link {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  color: inherit;
  text-decoration: none;
  transition: background var(--transicao-rapida);
}

.curso-mapa__link:hover { background: var(--cor-fundo-afundado); }

/* Foco visível e inteiro, dentro da caixa — o contorno padrão do navegador
   ficaria cortado pelo `overflow: hidden` da lista. */
.curso-mapa__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cor-foco);
  background: var(--cor-fundo-afundado);
}

.curso-mapa__marca {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 50%;
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

.curso-mapa__texto { min-width: 0; }

.curso-mapa__rotulo {
  display: block;
  color: var(--cor-texto);
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
  line-height: 1.35;
}

.curso-mapa__estado {
  display: block;
  margin-top: 2px;
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
}

.curso-mapa__item--feito .curso-mapa__marca {
  border-color: var(--sgp-sucesso);
  background: var(--sgp-sucesso-suave);
  color: var(--sgp-sucesso);
}

.curso-mapa__item--feito .curso-mapa__estado { color: var(--sgp-sucesso); }

.curso-mapa__item--visto .curso-mapa__marca {
  border-style: dashed;
  border-color: var(--cor-acao);
  color: var(--cor-acao-forte);
}

/* "Você está aqui": a barra na borda, e não um fundo colorido — o fundo
   competiria com o verde de "feito" na mesma linha. */
.curso-mapa__item--foco { position: relative; }

.curso-mapa__item--foco .curso-mapa__link {
  background: var(--cor-acao-suave);
  box-shadow: inset 3px 0 0 var(--cor-acao);
}

.curso-mapa__item--foco .curso-mapa__rotulo { font-weight: var(--peso-semi); }

.curso-mapa__saida {
  margin-top: var(--esp-4);
  text-align: center;
}

/* As duas saídas lado a lado quando cabem, empilhadas quando não cabem. */
.curso-mapa__saida {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
}

.curso-mapa__saida form { margin: 0; }
.curso-mapa__saida p { flex: 1 0 100%; margin: var(--esp-1) 0 0; }

/* -- A capa e o fim -------------------------------------------------------- */

.curso-capa, .curso-fim { max-width: 68ch; }

.curso-capa__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  margin: 0 0 var(--esp-3);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.curso-capa__selo--feito {
  background: var(--sgp-sucesso-suave);
  color: var(--sgp-sucesso);
}

.curso-capa__titulo {
  margin: 0 0 var(--esp-4);
  color: var(--cor-texto);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.curso-capa__texto {
  margin: 0 0 var(--esp-5);
  color: var(--cor-texto-suave);
  font-size: var(--texto-lg);
  line-height: 1.65;
}

.curso-capa__promessas {
  margin: 0 0 var(--esp-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--esp-3);
}

.curso-capa__promessas li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
  line-height: 1.55;
}

.curso-capa__promessas svg { margin-top: 2px; color: var(--cor-acao); }
.curso-capa__promessas strong { color: var(--cor-texto); }

.curso-capa__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.curso-capa__acoes form { margin: 0; }
.curso-capa__rodape { margin: 0; }
.curso-fim__pendentes {
  margin: 0 0 var(--esp-5);
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
  line-height: 1.6;
}

/* -- O cartão no painel ---------------------------------------------------- */

.curso-cartao__resumo {
  flex: 0 0 auto;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

.curso-cartao .curso-medidor__barra { margin: var(--esp-4) 0; }

.curso-cartao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.curso-cartao__acoes form { margin: 0; }

/* -- A chamada do curso na Central de ajuda --------------------------------
   O nome da classe é `guia-chamada` e continua sendo: ele vem da camada 21 e
   está na marcação da Central de ajuda, que não é desta fatia. Trocar o nome
   por elegância seria mexer numa tela alheia para não ganhar nada. */

.guia-chamada {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
}

.guia-chamada__titulo {
  margin: 0 0 var(--esp-1);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}

.guia-chamada__texto {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

/* ── A DIETA DA TELA ESTREITA ───────────────────────────────────────────────

   Num iPhone (390x844) a lição divide a altura com o chassi do sistema: barra
   de topo, cabeçalho da página (com o "Recomeçar o curso", que aparece assim
   que a pessoa começa e no celular ocupa uma linha inteira) e — no gabinete em
   teste, que é justamente o que faz o curso — a faixa do período de teste, que
   sozinha come 141 px. Sobram cerca de 400 px para a lição, e com os tamanhos
   do computador o botão da ação caía 26 px para fora da tela.

   Nada de CONTEÚDO foi escondido: o título, o que a lição ensina e o botão
   continuam todos na tela. O que saiu foi a REPETIÇÃO — o "Lição 2" do selo,
   que o medidor logo acima já diz por extenso — e o que encolheu foi o
   tamanho de display do título (que existe para uma coluna larga) e o respiro
   entre os blocos. */
@media (max-width: 620px) {
  .curso-licao__dupla { gap: var(--esp-3); }
  .curso-licao__lado  { gap: var(--esp-3); }

  .curso-licao__selo-numero { display: none; }
  .curso-licao__selo:empty  { display: none; }

  .curso-licao__titulo {
    margin-bottom: var(--esp-1);
    font-size: var(--texto-xl);
  }

  .curso-licao__ensina { font-size: var(--texto-sm); }

  .curso-acao { padding: var(--esp-3); }

  .curso-medidor { margin-bottom: 0; }
}