/* ═══════════════════════════════════════════════════════════════════════════
   SkillPro Academy — Responsive Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 1024px ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  :root {
    --text-4xl: 2.75rem;
    --text-3xl: 2.25rem;
    --text-2xl: 1.75rem;
  }

  /* Header */
  .main-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-6);
    gap: var(--sp-1);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--c-border);
  }

  .main-nav.nav--open { display: flex; }

  .main-nav a {
    width: 100%;
    padding: var(--sp-3) 0;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--c-border);
  }

  .main-nav a:last-of-type { border-bottom: none; }

  .menu-toggle { display: flex; }

  .header__actions .btn { display: none; }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .hero-dashboard { max-width: 480px; }

  /* Courses */
  .courses-grid { grid-template-columns: repeat(2, 1fr); }

  /* Benefits */
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }

  /* Process */
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
  .process-grid::before { display: none; }

  /* Modality */
  .modality-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .plan-card--featured { transform: none; }
  .plan-card--featured:hover { transform: translateY(-4px); }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
  }

  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* ── Mobile ≤ 768px ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --text-4xl: 2.25rem;
    --text-3xl: 1.875rem;
    --text-2xl: 1.5rem;
    --pad-x:    var(--sp-4);
  }

  /* Header */
  .header__inner { height: 64px; }

  .logo__name { font-size: var(--text-base); }

  /* Hero */
  #hero { padding: var(--sp-16) 0 var(--sp-12); }

  .hero__title { font-size: var(--text-3xl); }

  .hero__subtitle { font-size: var(--text-base); }

  .hero__actions { flex-direction: column; gap: var(--sp-3); }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .hero__proof { gap: var(--sp-4); flex-direction: column; align-items: flex-start; }
  .proof-divider { display: none; }

  .hero-dashboard { display: none; }

  /* Brands */
  .brands-inner { gap: var(--sp-5); }

  /* Section */
  .section-title { font-size: var(--text-xl); }

  #cursos,
  #beneficios,
  #como-funciona,
  #modalidad,
  #testimonios,
  #planes,
  #preguntas,
  #cta { padding: var(--sp-16) 0; }

  /* Courses */
  .courses-grid { grid-template-columns: 1fr; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr; }

  /* Process */
  .process-grid { grid-template-columns: 1fr; }

  /* Modality */
  .modality-grid { max-width: 100%; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-grid { max-width: 100%; }

  /* CTA */
  .cta__title { font-size: var(--text-2xl); }
  .cta__actions { flex-direction: column; align-items: center; }
  .cta__actions .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }

  /* FAB */
  .whatsapp-fab { bottom: var(--sp-4); right: var(--sp-4); }
}

/* ── Small ≤ 480px ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  :root { --text-4xl: 1.875rem; }

  /* Hero */
  .hero__badge { font-size: 0.65rem; }

  /* Course card — compact footer */
  .course-card__info-row { gap: var(--sp-1); }

  /* Pricing — pill badge overflow fix */
  .plan-featured-badge { font-size: 0.65rem; padding: 4px var(--sp-3); }

  /* Footer */
  .footer__links { gap: var(--sp-2); }
}