/* Aprender (05/10/2026): o catálogo de trilhas, na família da conversa e do
   Progresso — lista sóbria, uma trilha por cartão, cores dos tokens --ui-*.
   O "Quero esta" tem 48 px de altura, o alvo de toque do resto do app. */
.aprender {
  width: 100%; max-width: 760px; min-width: 0; margin-inline: auto;
  display: grid; align-content: start; gap: 24px;
  padding: 30px 20px calc(var(--nav-space,100px) + 36px);
  color: var(--ui-text); font-family: "Segoe UI",system-ui,sans-serif;
}
.aprender h1,.aprender h2,.aprender p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aprender-intro { display: grid; gap: 10px; }
.aprender-intro h1 { font-size: clamp(1.6875rem,4vw,2.125rem); line-height: 1.2; font-weight: 650; letter-spacing: -.035em; }
.aprender-intro > p:last-child { color: var(--ui-muted); font-size: .9375rem; line-height: 1.5; }
.aprender .aprender-eyebrow { color: var(--ui-muted); font-size: .6875rem; line-height: 1.5;
  font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.aprender-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.aprender-trilha {
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px 16px; align-items: start;
  min-width: 0; padding: 20px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface);
}
.aprender-arte { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: var(--ui-brand); background: var(--ui-soft); }
.aprender-arte .icon { width: 24px; height: 24px; }
.aprender-texto { display: grid; gap: 6px; min-width: 0; }
.aprender-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.aprender-topo h2 { flex: 1 1 160px; font-size: 1rem; line-height: 1.4; font-weight: 650; }
.aprender-selo { flex: none; padding: 3px 9px; border-radius: 8px; color: var(--ui-muted); background: var(--ui-raised);
  font-size: .6875rem; line-height: 1.5; font-weight: 600; }
.aprender-texto > p { color: var(--ui-muted); font-size: .875rem; line-height: 1.55; }
.aprender-texto > .aprender-nota { color: var(--ui-brand); font-size: .8125rem; font-weight: 600; }
.aprender-quero {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; max-width: 100%; padding: 10px 18px; border: 1px solid var(--ui-border); border-radius: 14px;
  background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.aprender-quero .icon { width: 18px; height: 18px; flex: none; }
.aprender-quero:hover:not(:disabled) { border-color: var(--ui-brand); color: var(--ui-brand); }
.aprender-quero[aria-pressed="true"] { border-color: transparent; color: var(--ui-brand); background: var(--ui-soft); cursor: default; }
.aprender-quero:disabled:not([aria-pressed="true"]) { opacity: .6; cursor: progress; }
.aprender-quero:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 3px; }
.aprender-erro .aprender-quero { grid-column: auto; margin-top: 12px; }
/* Simulado de Speaking (prioridade 5): a parte da trilha do IELTS que já abre. */
.aprender-acao {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0;
  padding: 10px 16px; border-radius: 14px; background: var(--ui-button); color: #fff;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
}
.aprender-acao .icon { width: 20px; height: 20px; flex: none; }
.aprender-acao:hover { filter: brightness(1.08); }
.aprender-acao:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 3px; }
.aprender .aprender-rodape,.aprender .aprender-carregando { color: var(--ui-muted); font-size: .8125rem; line-height: 1.6; }
/* Só para leitor de tela: a região viva existe desde o início (sumir com ela
   quando vazia faria o aviso não ser lido). */
.aprender .aprender-anuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(min-width:600px) {
  .aprender-trilha { grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; }
  .aprender-quero { grid-column: 3; }
}
@media(max-width:600px) {
  .aprender { padding: 24px 16px calc(var(--nav-space,100px) + 28px); gap: 22px; }
  .aprender-trilha { padding: 18px; }
}