/* Treinamento Claude — responsive.css */
/* ---------- Responsive ---------- */
.scrim{display:none}
@media (max-width:1040px){
  .grid-2{grid-template-columns:1fr}
  .lesson-wrap{grid-template-columns:1fr}
  .ctx-panel{position:static}
  .trackcards{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:280px;transform:translateX(-102%);
    transition:transform .22s cubic-bezier(.4,0,.1,1);box-shadow:var(--shadow-pop)}
  .sidebar.open{transform:none}
  .hamburger{display:inline-flex}
  .searchbtn{min-width:0}
  .searchbtn .stxt,.searchbtn .kbd{display:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
  .content-inner{padding:24px 18px 64px}
  .hero{flex-direction:column;align-items:flex-start;gap:18px}
  .ctx-progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0s !important;transition-duration:0s !important}
}
/* fallback se o app não montar */
#fallback{display:none;padding:40px;max-width:560px;margin:60px auto;text-align:center;color:var(--text-2)}