/* ==========================================================================
   CATEQUESE ONLINE — RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 960px) {
  .model-picker { grid-template-columns: 1fr; }
  .two-col-explain { grid-template-columns: 1fr; }
  .decision-grid { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid--wide { grid-template-columns: repeat(3, 1fr); }
  .student-stats { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 258px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 30;
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }

  .shell-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(22,34,59,0.4); z-index: 25;
  }
  .app-shell.sidebar-open .shell-overlay { display: block; }

  .only-mobile { display: inline-flex; }
  .topbar { padding: 14px 18px; gap: 10px; }
  .shell-content { padding: 22px 18px 60px; }
  /* No mobile, o breadcrumb mostra só a página atual — evita quebra de linha
     colidindo com o botão de menu e o chip de perfil. */
  .breadcrumb span:not(:last-child), .breadcrumb .crumb-sep { display: none; }
  .profile-chip .profile-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 640px) {
  .marketing-nav { flex-direction: column; gap: 14px; align-items: flex-start; padding: 20px 6vw; }
  .marketing-links { flex-wrap: wrap; gap: 16px; }
  .standalone-main { padding: 10px 6vw 80px; }
  .hero h1 { font-size: 2.4rem; }
  .stat-grid, .stat-grid--wide { grid-template-columns: repeat(2, 1fr); }
  .bar-row { grid-template-columns: 90px 1fr 40px; gap: 8px; }
  .evolution-line { flex-direction: column; }
  .evolution-arrow { transform: rotate(90deg); }
  .hierarchy-line { flex-direction: column; align-items: stretch; }
  .hierarchy-arrow { transform: rotate(90deg); align-self: center; }
  .tenancy-branches { grid-template-columns: 1fr; }
  .student-topbar, .student-main { padding-left: 5vw; padding-right: 5vw; }
  .card-grid { grid-template-columns: 1fr; }
}