/* ============================================================
   aulas.css — área de aulas em três níveis
   ------------------------------------------------------------
   Estrutura da área de membros (curso → módulo → aula) trazida
   para a nossa paleta clara. Tokens próprios ficam no topo.
   ============================================================ */

:root {
  --course-w: 420px;   /* largura máxima do cartão de curso  */
  --module-w: 200px;   /* largura do cartão de módulo (9:16) */
  --tree-w:   300px;   /* trilha de aulas no desktop         */
}

/* ---------------------------------------------------------
   Pilha de níveis
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Pilha de níveis
   ------------------------------------------------------------
   O nível inativo sai do fluxo (`display:none`) em vez de ficar
   escondido no mesmo lugar: empilhados, o mais alto dos três
   ditava a altura de rolagem, e dentro da aula sobrava um vazio
   do tamanho do catálogo abaixo do conteúdo.
   --------------------------------------------------------- */
.levels { min-height: 100%; }

.level[data-active="false"] { display: none; }

/* A entrada deslizando é da NAVEGAÇÃO — quando a pessoa abre um curso ou
   volta. Ela é ligada pelo JS só quando o nível muda de verdade; assim,
   recarregando a tela dentro de aulas, o conteúdo já nasce no lugar em
   vez de entrar correndo pela lateral. */
.level.entrando { animation: nivelEntra var(--t-base) var(--ease-out) both; }

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

/* ---------------------------------------------------------
   Banner do topo do catálogo
   ------------------------------------------------------------
   Largura inteira, encostado nas bordas do painel e sem canto
   arredondado — as proporções são as da área de membros:
   1366×768 no celular e 1920×600 no computador.

   A moldura existe mesmo sem imagem, então nada salta de lugar
   quando ela termina de carregar.
   --------------------------------------------------------- */
.banner {
  display: block;
  width: 100%;
  margin: 0 0 var(--gap-5);
  overflow: hidden;
  background: var(--track);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 1366 / 768;
}

.banner img {
  display: block;          /* sem isto, a linha de base da fonte empurra
                              a imagem para fora da moldura */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}

/* O recuo lateral do catálogo mora aqui, e não no corpo do painel:
   é o que deixa o banner ir de ponta a ponta. */
#sheet-lessons[data-level="catalogo"] .sheet__body {
  padding-top: 0;
  padding-inline: 0;
}
.level__inner { padding-inline: 20px; }

/* ---------------------------------------------------------
   Cabeçalho de seção: pílula + linha até a borda
   --------------------------------------------------------- */
.sec {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  margin-bottom: var(--gap-5);
}
.sec + * { margin-top: 0; }
.sec__pill {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sec__line { flex: 1; height: 1px; background: var(--line); }

.setas { display: none; gap: 6px; flex: none; }
.seta {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink-soft);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seta:active { background: var(--track); color: var(--ink); }

.sec-group + .sec-group { margin-top: var(--gap-6); }

/* ---------------------------------------------------------
   Barra de nível — substitui o cabeçalho do painel
   dentro de módulos e aula
   --------------------------------------------------------- */
.nivel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-bottom: var(--gap-4);
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding-inline: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.voltar:active { transform: scale(.97); background: var(--track); color: var(--ink); }

/* ---------------------------------------------------------
   Nível 1 — cartão de curso
   --------------------------------------------------------- */
.course-slot { position: relative; min-width: 0; }

.fav--card {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--course-w)), 1fr));
  gap: var(--gap-5);
  align-items: stretch;
}

.course {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border-radius: var(--r-lg);
  background: #f2f2f2;
  border: 1px solid #e2e2e2;
  box-shadow: none;
  overflow: hidden;
  text-align: left;
  transition: box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.course:active { transform: scale(.99); }
.course--parado { cursor: default; }

/* Capa */
.cover {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(85% 120% at 50% 0%, rgba(92, 68, 51, .12) 0%, transparent 70%),
    var(--track);
  border-bottom: 1px solid var(--line);
}
/* A foto preenche a capa; o play e a faixa ficam por cima dela. */
.cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring), var(--glass-edge), var(--sh-md);
  color: var(--brown);
}

/* Selo "em breve" no meio da capa */
.cover__soon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding-inline: 16px;
}
.cover__soon /* A foto preenche a capa; o play e a faixa ficam por cima dela. */
.cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover__play {
  position: relative;
  z-index: 1; color: var(--ink-mute); }
.cover__soon b {
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover__soon span { font-size: 12.5px; color: var(--ink-mute); }

/* Faixa de progresso encavalada na base da capa */
.cover__strip {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: -20px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding-inline: 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring), var(--sh-sm);
}
.cover__strip .bar { flex: 1; }

.cover__pct {
  flex: none;
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cover__done {
  flex: none;
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.course__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 36px 22px 22px;   /* espaço para a metade da faixa que desceu */
}

/* Curso ainda sem aulas: não há faixa descendo sobre o corpo. */
.course--sem-faixa .course__body { padding-top: 22px; }

.course__title {
  margin: 0 auto;
  max-width: 19ch;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: center;
  text-wrap: balance;
  font-size: 20px;
  font-weight: var(--w-medium);
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--ink);
}

.course__desc {
  margin: 0 auto;
  max-width: 38ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: center;
  text-wrap: balance;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.course__foot { margin-top: auto; padding-top: 6px; }

.course__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--brown);
  color: #FFF;
  box-shadow: 0 2px 8px rgba(92, 68, 51, .24);
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.course:active .course__cta { background: var(--brown-deep); }
.course--parado:active { transform: none; }

/* Curso que não abre — trancado ou ainda sem aulas: o botão informa,
   não convida. */
.course--parado .course__cta {
  background: var(--bg-veil);
  color: var(--ink-mute);
  box-shadow: var(--glass-ring);
}

.course__prazo {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.rodape {
  margin-top: var(--gap-6);
  padding: var(--gap-5) 0 4px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------
   Nível 2 — continue assistindo + módulos
   --------------------------------------------------------- */
.level__title {
  margin: 0 0 4px;
  font-size: 23px;
  font-weight: var(--w-medium);
  letter-spacing: -.02em;
  color: var(--ink);
}
.level__sub { margin: 0 0 var(--gap-5); font-size: 15px; color: var(--ink-soft); }

.resume { max-width: 460px; margin-bottom: var(--gap-6); }
.resume__label {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: var(--w-medium);
  letter-spacing: -.015em;
  color: var(--brown);
}
.resume__card {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--glass-ring), var(--sh-xs);
}
.resume__aula {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
  color: var(--ink);
}
.resume__aula span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--brown);
  color: #FFF;
  font-size: 15px;
  font-weight: var(--w-medium);
  box-shadow: 0 2px 8px rgba(92, 68, 51, .28);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.resume__cta:active { transform: scale(.98); background: var(--brown-deep); }
.resume__bar { display: flex; align-items: center; gap: var(--gap-3); margin-top: 12px; }
.resume__bar .bar { flex: 1; margin: 0; }
.resume__rest { flex: none; font-size: 13px; color: var(--ink-mute); white-space: nowrap; }

/* Fila de módulos: capa em retrato, como na área de membros */
.modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3);
}

.module {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(92, 68, 51, .14) 0%, transparent 55%),
    var(--track);
  box-shadow: var(--glass-ring);
  text-align: left;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.module:active { transform: scale(.98); }
.module--locked { opacity: .6; cursor: default; }

.module__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring);
  color: var(--brown);
}

.module__soon {
  position: absolute;
  inset: 0 0 34% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding-inline: 12px;
}
.module__soon b {
  font-size: 11.5px;
  font-weight: var(--w-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.module__soon span { font-size: 12px; color: var(--ink-mute); }

.module__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 13px;
  background: linear-gradient(to top, var(--surface) 62%, rgba(255, 255, 255, 0) 100%);
}
.module__idx {
  display: block;
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.module__bar { margin-top: 9px; }

/* ---------------------------------------------------------
   Nível 3 — aula
   --------------------------------------------------------- */
.aula { display: flex; flex-direction: column; gap: var(--gap-4); }
.aula__side { display: none; }        /* no celular a trilha vive na gaveta */

/* O espaçamento entre player, título, navegação e blocos vale em
   qualquer tela — antes só existia dentro do @media do desktop. */
.aula__main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  min-width: 0;
}

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(92, 68, 51, .14) 0%, transparent 70%),
    var(--track);
  box-shadow: var(--glass-ring);
}
.player__play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring), var(--glass-edge), var(--sh-md);
  color: var(--brown);
  transition: transform var(--t-fast) var(--ease-spring);
}
.player__play:active { transform: scale(.92); }
.player__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.aula__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-3); }
.aula__ident { min-width: 0; }
.aula__acoes { display: flex; align-items: center; gap: var(--gap-2); flex: none; }

/* Modo cinema — só faz sentido onde existe coluna lateral */
.cinema { display: none; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13.5px; font-weight: var(--w-medium); }
.cinema i {
  position: relative;
  width: 40px;
  height: 23px;
  border-radius: var(--r-full);
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--t-base) var(--ease-out);
}
.cinema i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base) var(--ease-out);
}
.cinema[aria-pressed="true"] { color: var(--brown-deep); }
.cinema[aria-pressed="true"] i { background: var(--brown); box-shadow: none; }
.cinema[aria-pressed="true"] i::after { transform: translateX(17px); }
.aula__title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--w-medium);
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

.fav {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink-mute);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.fav:active { transform: scale(.92); }
.fav[aria-pressed="true"] { color: #C4585C; }

/* Anterior · Concluir · Próximo */
/* Celular: "Concluir" ocupa a linha toda e o par anterior/próxima
   fica nas pontas, onde o polegar já está. */
.nav-aula {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "done done" "prev next";
  gap: var(--gap-2) var(--gap-3);
  justify-content: space-between;
}
.done-btn { grid-area: done; }
.nav-prev { grid-area: prev; justify-self: start; }
.nav-next { grid-area: next; justify-self: end; }
.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.nav-btn:active { transform: scale(.97); background: var(--track); }
.nav-btn[disabled] { opacity: .4; pointer-events: none; }

.done-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.done-btn[aria-pressed="true"] {
  background: rgba(92, 68, 51, .10);
  color: var(--brown-deep);
  box-shadow: 0 0 0 .5px rgba(92, 68, 51, .35);
}

/* Descrição e materiais */
.bloco {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--glass-ring), var(--sh-xs);
}
.bloco .bloco__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.bloco p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

.material {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.material:active { background: var(--track); }
.material + .material { margin-top: 2px; }
.material__name { display: block; font-size: 15px; font-weight: var(--w-medium); color: var(--ink); }
.material__size { display: block; font-size: 13px; color: var(--ink-mute); }

/* Nível sem conteúdo: um bloco centrado, não uma linha solta. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 34ch;
  margin: var(--gap-6) auto;
  padding: var(--gap-6) var(--gap-4);
  text-align: center;
}
.vazio__ico { color: var(--ink-faint); }
.vazio__titulo {
  margin: 0;
  font-size: 18px;
  font-weight: var(--w-medium);
  letter-spacing: -.015em;
  color: var(--ink);
}
.vazio__texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ---------------------------------------------------------
   Trilha de aulas (lista de módulos + aulas)
   --------------------------------------------------------- */
.tree {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--glass-ring), var(--sh-xs);
  overflow: hidden;
}

.tree__top { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tree__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  font-size: 14px;
  color: var(--ink-mute);
}
.tree__row b { font-weight: var(--w-medium); color: var(--ink); }
.tree__row b i { font-style: normal; font-weight: var(--w-regular); color: var(--ink-mute); }
.tree__row span { display: inline-flex; align-items: center; gap: 5px; }

.tree__search { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tree__search svg { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.tree__search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--track);
  font-size: 15px;
  color: var(--ink);
}
.tree__search input:focus { outline: none; }
.tree__search input::placeholder { color: var(--ink-mute); }

.tree__list { flex: 1; min-height: 0; padding: 6px 0; }

.tree__mod {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.tree__mod:active { background: var(--track); }
.tree__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(92, 68, 51, .12);
  color: var(--brown-deep);
  font-size: 12px;
  font-weight: var(--w-medium);
}
.tree__modname { flex: 1; min-width: 0; }
.tree__modname small { display: block; font-size: 12.5px; color: var(--ink-mute); }
.tree__modname b {
  display: block;
  font-size: 15px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
  color: var(--ink);
}
.tree__chev { flex: none; color: var(--ink-mute); transition: transform var(--t-base) var(--ease-out); }
.tree__mod[aria-expanded="false"] .tree__chev { transform: rotate(-90deg); }

/* Abre e fecha animando a altura sem saber qual ela é. */
.tree__wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.tree__wrap[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }
.tree__wrap > div { overflow: hidden; }

.tree__aula {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
  padding: 11px 14px;
  margin: 0 8px 2px 20px;
  width: calc(100% - 28px);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--t-fast) var(--ease-out);
}
.tree__aula:active { background: var(--track); }
.tree__aula[aria-current="true"] { background: var(--track); }
.tree__aula svg { flex: none; color: var(--ink-faint); }
.tree__aula[data-done="true"] svg { color: var(--brown); }
.tree__aula span { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); }
.tree__aula em { flex: none; font-style: normal; font-size: 12.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.tree__aula[disabled] { opacity: .45; pointer-events: none; }
.tree__aula[aria-current="true"] span { font-weight: var(--w-medium); color: var(--ink); }

.tree__vazio { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--ink-mute); }

/* Botão "Ver aulas" (mobile) */
.ver-aulas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  height: 38px;
  padding-inline: 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--glass-ring);
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-out);
}
.ver-aulas:active { background: var(--track); }

/* Gaveta da trilha no celular */
.drawer {
  position: absolute;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  transition: visibility 0s linear var(--t-base);
}
.drawer[data-open="true"] { visibility: visible; transition-delay: 0s; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(39, 37, 31, .28);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }

.drawer__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 85%;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  box-shadow: var(--sh-lg);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.drawer[data-open="true"] .drawer__sheet { transform: none; }

.drawer__grip {
  display: block;
  width: 40px;
  height: 4px;
  margin: 10px auto 6px;
  border-radius: var(--r-full);
  background: var(--line-strong);
}
.drawer__body { flex: 1; min-height: 0; padding: 6px 12px 16px; }
.drawer__body .tree { height: 100%; }

/* ---------------------------------------------------------
   Desktop
   --------------------------------------------------------- */
@media (min-width: 900px) {
  /* A faixa do computador é 1920×600, como na área de membros. */
  .banner { aspect-ratio: 1920 / 600; margin-bottom: var(--gap-6); }
  .banner img { object-position: center 34%; }

  .level__inner { padding-inline: max(32px, calc((100% - var(--lessons-max)) / 2)); }

  .setas { display: flex; }

  /* Fila que rola de lado, com as setas como caminho a mais. */
  .modules {
    display: flex;
    gap: var(--gap-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .modules::-webkit-scrollbar { height: 0; }
  .modules > .module { flex: none; width: clamp(190px, 15vw, 240px); scroll-snap-align: start; }

  .cinema { display: inline-flex; }

  .nav-aula {
    display: flex;
    align-items: stretch;
    grid-template-areas: none;
    justify-content: flex-start;
  }
  .nav-prev, .nav-next { justify-self: auto; }
  .done-btn { flex: 1; }

  .aula {
    display: grid;
    grid-template-columns: var(--tree-w) minmax(0, 1fr);
    align-items: start;
    gap: var(--gap-5);
    transition: grid-template-columns var(--t-base) var(--ease-out);
  }
  /* Modo cinema: a coluna lateral recolhe e o vídeo fica com tudo. */
  .aula[data-modo="cinema"] { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
  .aula[data-modo="cinema"] .aula__side { display: none; }
  /* Posição fixada na grade: escondendo a lateral, a coluna principal
     continua na coluna 2 em vez de escorregar para a que foi zerada. */
  .aula__side { grid-column: 1; display: block; position: sticky; top: 0; }
  .aula__side .tree { max-height: calc(100dvh - 160px); }
  .aula__main { grid-column: 2; }

  .ver-aulas, .drawer { display: none; }

  .aula__title { font-size: 23px; }
  .level__title { font-size: 27px; }
}

@media (hover: hover) and (pointer: fine) {
  .course:hover        { box-shadow: var(--glass-ring), var(--sh-md); }
  .seta:hover          { background: var(--track); color: var(--ink); }
  .fav--card:hover     { color: #C4585C; }
  .course:hover .course__cta { background: var(--brown-deep); }
  .course--parado:hover .course__cta { background: var(--bg-veil); }
  .course--parado:hover { box-shadow: var(--glass-ring), var(--sh-xs); }
  .module:hover        { box-shadow: var(--glass-ring), var(--sh-md); transform: translateY(-2px); }
  .module--locked:hover { box-shadow: var(--glass-ring); transform: none; }
  .nav-btn:hover, .done-btn:hover, .material:hover,
  .tree__mod:hover, .tree__aula:hover, .ver-aulas:hover,
  .voltar:hover { background: var(--track); color: var(--ink); }
  .resume__cta:hover   { background: var(--brown-deep); }
  .fav:hover           { color: #C4585C; }
}

/* ---------------------------------------------------------
   Dentro de módulos e aula o cabeçalho do painel sai de cena:
   quem navega é a barra de nível, e o título já está no conteúdo.
   --------------------------------------------------------- */
#sheet-lessons[data-level="modulos"] .sheet__head,
#sheet-lessons[data-level="aula"] .sheet__head { display: none; }

#sheet-lessons[data-level="modulos"] .sheet__body,
#sheet-lessons[data-level="aula"] .sheet__body { padding-top: 18px; padding-bottom: 40px; }

/* Course information stays distinct from the white lessons panel. */
.course__body { background: #f2f2f2; }
.course__title { color: #202123; }
.course__desc, .course__prazo { color: #595959; }
.course--parado .course__cta { background: #e5e5e5; color: #595959; }
@media (hover: hover) {
  .course:hover { box-shadow: 0 2px 8px #0000000a; }
  .course--parado:hover { box-shadow: none; }
  .course--parado:hover .course__cta { background: #e5e5e5; }
}

#sheet-lessons #aulas-body {
  display: grid;
  place-items: center;
  padding: 24px;
}
.aulas-empty {
  margin: 0;
  color: #626262;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}