@media (min-width: 821px) {
  .pagina-reta { height: 100svh; min-height: 0; padding: 10px 0; }
  .cartao-tela { height: 100%; min-height: 0; }
}
@media (max-width: 820px) {
  .pagina-reta { width: min(100% - 16px, 720px); padding: 8px 0 24px; }
  .cartao-tela { min-height: calc(100vh - 32px); border-radius: 26px; }
  .acolhimento { grid-template-columns: 1fr; padding: 72px 22px 28px; text-align: center; }
  .previa-reta { order: -1; width: min(100%, 480px); padding: 12px; }
  .escolha-faixa { padding: 72px 18px 28px; }
  .opcoes-faixa { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .opcao-faixa { min-height: 100px; }
  .atividade { align-content: start; padding: 68px 10px 22px; }
  .reta-numerica { grid-template-columns: repeat(5, minmax(52px, 1fr)); background: none; }
  .numeros-disponiveis { grid-template-columns: repeat(5, minmax(54px, 1fr)); }
}
@media (max-width: 480px) {
  .previa-reta { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 9px; }
  .previa-reta span { min-width: 0; min-height: 64px; }
  .opcoes-faixa { grid-template-columns: 1fr 1fr; gap: 10px; }
  .opcao-faixa { min-height: 84px; border-radius: 18px; font-size: 2rem; }
  .cabecalho-atividade { align-items: stretch; flex-direction: column; gap: 6px; }
  .cabecalho-atividade .botao { align-self: center; }
  .reta-numerica { grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 6px; padding: 0; }
  .posicao-reta { min-height: 54px; border-radius: 13px; font-size: 1.45rem; }
  .numeros-disponiveis { grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 7px; }
  .numero-disponivel { min-height: 56px; border-radius: 14px; font-size: 1.55rem; }
}