/* "Dentro do app": três telas de celular desenhadas em HTML, com exercícios reais do catálogo. */
.telas {
  display: flex; gap: 16px; margin: 28px -20px 0; padding: 8px 20px 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.telas::-webkit-scrollbar { display: none; }
.telefone {
  flex: none; width: 250px; scroll-snap-align: center; border-radius: 36px; padding: 10px;
  background: #111; box-shadow: 0 24px 50px rgba(0, 0, 0, .22), inset 0 0 0 2px #2b2b2e;
}
.tela {
  position: relative; height: 500px; border-radius: 28px; overflow: hidden; background: var(--fundo);
  font-size: 12px; line-height: 1.3; display: flex; flex-direction: column;
}
.tela-topo { padding: 22px 14px 8px; }
.tela-topo h4 { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: -.02em; }
.tela-busca { margin: 8px 14px 0; height: 32px; border-radius: 10px; background: #e4e4e8; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--apagado); }
.tela-chips { display: flex; gap: 6px; padding: 10px 14px 4px; overflow: hidden; white-space: nowrap; }
.tela-chips span { padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-size: 11px; font-weight: 600; }
.tela-chips span.ativo { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.tela-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px; }
.tela-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); }
.tela-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.tela-card b { display: block; padding: 6px 8px 0; font-size: 11px; }
.tela-card small { display: block; padding: 0 8px 8px; color: var(--apagado); font-size: 10px; }
.tela-abas {
  margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px 12px;
  background: rgba(255, 255, 255, .92); border-top: 1px solid var(--borda); font-size: 9px; text-align: center; color: var(--apagado);
}
.tela-abas span.ativo { color: var(--marinho); font-weight: 700; }
.tela-abas i { display: block; width: 18px; height: 18px; margin: 0 auto 2px; border-radius: 5px; background: currentColor; opacity: .85; }

/* Tela 2: gerar aula em 3 passos */
.passos { padding: 6px 14px; display: grid; gap: 8px; }
.passo { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 8px 10px; }
.passo i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--marinho); color: #fff; font-style: normal; font-weight: 700; font-size: 11px; display: grid; place-items: center; }
.passo b { display: block; font-size: 12px; }
.passo small { color: var(--apagado); font-size: 10px; }
.bloco { margin: 8px 14px 0; }
.bloco h5 { margin: 0 0 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.bloco-item { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
.bloco-item img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.bloco-item b { font-size: 11px; display: block; }
.bloco-item small { font-size: 10px; color: var(--apagado); }
.tela-botao { margin: auto 14px 14px; background: var(--marinho); color: #fff; text-align: center; border-radius: 12px; padding: 11px; font-weight: 700; font-size: 13px; }

/* Tela 3: modo aula */
.tela-escura { background: #0e1116; color: #fff; }
.modo-aula-topo { padding: 22px 14px 6px; display: flex; justify-content: space-between; font-size: 11px; color: rgba(255, 255, 255, .7); }
.modo-aula-gif { margin: 8px 30px 0; border-radius: 16px; overflow: hidden; background: #fff; }
.modo-aula-nome { text-align: center; font-family: var(--fonte-titulo); font-size: 17px; margin-top: 10px; }
.modo-aula-tempo { text-align: center; font-family: var(--fonte-titulo); font-size: 54px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.modo-aula-sub { text-align: center; color: rgba(255, 255, 255, .6); font-size: 11px; }
.modo-aula-barra { margin: 10px 30px 0; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.modo-aula-barra i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--limao); }
.modo-aula-botoes { margin-top: auto; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; padding: 0 14px 18px; }
.modo-aula-botoes span { border-radius: 14px; padding: 14px 0; text-align: center; font-weight: 700; font-size: 12px; background: rgba(255, 255, 255, .12); }
.modo-aula-botoes span.principal { background: var(--limao); color: var(--marinho); }

.legenda-app { margin-top: 14px; font-size: 13px; color: var(--apagado); text-align: center; }
@media (min-width: 900px) {
  .telas { justify-content: center; overflow: visible; margin: 40px 0 0; padding: 0; }
  .telefone { width: 270px; }
}