/* ── HV Academy — ajustes para pantallas grandes ──
   Las páginas están diseñadas para celular (columna de 480px).
   Estas reglas solo actúan desde 900px de ancho; en el celular no cambia nada. */

@media (min-width: 900px) {

  /* ── Área de estudiantes ── */
  .page { max-width: 1040px; }
  .bottom-nav { max-width: 1040px; margin-left: auto; margin-right: auto; }

  /* Páginas de lectura (exámenes, estudio, revisión, perfil): más estrechas para leer cómodo */
  body[data-layout="reading"] .page,
  body[data-layout="reading"] .bottom-nav { max-width: 820px; }

  .courses-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .module-grid,
  .topic-grid   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .stats-grid   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .map-grid     { grid-template-columns: repeat(10, 1fr); }

  /* Cabecera del curso: la imagen es vertical; más alta y recortada donde está el contenido */
  .course-hero     { height: 320px; }
  .course-hero img { object-position: center 18%; }

  /* ── Página de bienvenida ── */
  section, .divider { max-width: 1040px; }
  #hero { max-width: 720px; }
  #precio, #urgencia, #faq, #cta-final { max-width: 760px; }
  .pain-cards     { display: grid; grid-template-columns: repeat(3, 1fr); }
  .solution-cards { display: grid; grid-template-columns: repeat(2, 1fr); }
  .course-grid    { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .testi-list     { display: grid; grid-template-columns: repeat(3, 1fr); }
  .steps          { max-width: 640px; }
}