/* ─── TUMOVIE.CL — Mobile Responsive ─── */

@media (max-width: 900px) {
  /* Nav */
  nav { padding: 0 16px; height: 52px; }
  .nav-links { display: none; }
  .nav-right  { display: none; }

  /* Home hero */
  .hero { padding: 100px 20px 60px; }
  .hero-stats { display: none; }
  .hero-heading { font-size: clamp(56px,14vw,100px); }
  .hero-sub { font-size: 15px; }
  .hero-ctas { flex-wrap: wrap; }

  /* Home grid sections */
  .modulos-grid { grid-template-columns: 1fr; }
  .creadores-scroll { grid-template-columns: 1fr 1fr; }
  .numeros-grid { grid-template-columns: 1fr 1fr; }
  .academia-grid { grid-template-columns: 1fr; }
  .cta-buttons { flex-direction: column; align-items: center; }

  /* Crear IA */
  .app { flex-direction: column; }
  .panel-left { width: 100%; border-right: none; border-bottom: 1px solid var(--b1); max-height: 60vh; }

  /* Marketplace */
  .page { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--b1); padding: 16px; }
  .creators-grid { grid-template-columns: 1fr 1fr; }
  .type-chips { flex-direction: row; flex-wrap: wrap; }
  .type-chip { width: auto; }

  /* Academy */
  .hero-featured { display: none; }
  .hero { padding: 60px 20px 40px; }
  .courses-row { grid-template-columns: 1fr 1fr; }
  .courses-row.wide { grid-template-columns: 1fr; }
  .instructors-strip { grid-template-columns: 1fr 1fr; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-sidebar { border-top: 1px solid var(--b1); }

  /* Dashboard */
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .grid-row.two-one { grid-template-columns: 1fr; }
  .grid-row.equal { grid-template-columns: 1fr; }
  .welcome-header { flex-direction: column; gap: 12px; }
  .welcome-right { flex-wrap: wrap; }
}

@media (max-width: 540px) {
  .creators-grid { grid-template-columns: 1fr; }
  .courses-row { grid-template-columns: 1fr; }
  .instructors-strip { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .learn-list { grid-template-columns: 1fr; }
  .modal-course-title { font-size: 28px; }
  .hero-heading { font-size: clamp(48px,13vw,80px); }
  section { padding: 60px 20px; }
  .numeros-grid { grid-template-columns: 1fr 1fr; }
}