/* ============================================================
   LKI Coder — responsive.css
   Breakpoints: 1200 | 1024 | 768 | 640 | 480
   ============================================================ */

/* ── 1200px ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .features__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; }
}

/* ── 1024px ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-py: clamp(4rem, 8vw, 6rem); }

  /* Navbar */
  .navbar__toggle { display: flex; }
  .navbar__menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    padding: 5rem 2rem 2rem;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    z-index: calc(var(--z-sticky) - 1);
  }
  .navbar__menu.open { display: flex; }
  .navbar__link {
    display: block;
    color: var(--clr-gray-700) !important;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    width: 100%;
    text-align: center;
    font-size: var(--fs-base);
  }
  .navbar__link:hover { background: var(--clr-primary-faint); color: var(--clr-primary) !important; }
  .btn--outline-nav, .btn--primary-nav {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius);
  }

  /* Hero */
  .hero__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-12);
  }
  .hero__content { max-width: 100%; }
  .hero__cta { justify-content: center; }
  .hero__stats { justify-content: center; }
  .hero__mockup { justify-content: center; }
  .mockup { max-width: 480px; }
  .float-card--tl { top: -12px; left: -12px; min-width: 160px; }
  .float-card--br { bottom: -8px; right: -12px; min-width: 160px; }

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

  /* Demos */
  .demos__grid { grid-template-columns: repeat(2, 1fr); }
  .demos__grid > :nth-child(5) { grid-column: 1 / -1; max-width: 50%; margin-inline: auto; }

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

  /* Why */
  .why__wrapper { grid-template-columns: 1fr; gap: var(--sp-12); }
  .why__left .section-title,
  .why__left .section-subtitle,
  .why__left .section-badge { text-align: center; display: block; }
  .why__left .section-badge { display: inline-flex; margin-inline: auto; }
  .why__checklist { max-width: 600px; margin-inline: auto; }
  .why__left .why__cta { display: flex; justify-content: center; }

  /* Contact */
  .contact__wrapper { grid-template-columns: 1fr; gap: var(--sp-10); }
  .contact__info .section-title,
  .contact__info > p { text-align: center; }
  .contact__info .section-badge { display: inline-flex; margin-inline: auto; display: block; text-align: center; }
  .contact__guarantees { max-width: 500px; margin-inline: auto; }

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

/* ── 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero */
  .hero__title { font-size: clamp(2rem, 6vw, 2.8rem); }
  .hero__stats { gap: var(--sp-5); }
  .hero__scroll { display: none; }
  .mockup__screen { height: 260px; }
  .float-card { display: none; }

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

  /* Demos */
  .demos__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .demos__grid > :nth-child(5) { grid-column: auto; max-width: 100%; }

  /* Features */
  .features__grid { grid-template-columns: 1fr 1fr; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Why numbers */
  .why__numbers-grid { grid-template-columns: 1fr 1fr; }

  /* CTA */
  .cta-final__content h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  .cta-final__actions { flex-direction: column; align-items: center; }
  .cta-final__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── 640px ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --section-py: clamp(3rem, 7vw, 5rem); }

  .hero { padding-top: 4.5rem; }
  .hero__badge { font-size: 10px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__stats { gap: var(--sp-4); }
  .stat__number { font-size: var(--fs-xl); }

  .features__grid { grid-template-columns: 1fr; }

  .why__numbers-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .why__num-card { padding: var(--sp-5); }
  .why__num-value { font-size: var(--fs-3xl); }

  .contact__form-box { padding: var(--sp-6); }

  .section-badge { font-size: 10px; }
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .section-subtitle { font-size: var(--fs-sm); }

  .mockup { border-radius: var(--radius); }
  .mockup__screen { height: 220px; }

  .whatsapp-float { bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; }
  .whatsapp-float svg { width: 22px; height: 22px; }
}

/* ── 480px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero__title { font-size: 1.9rem; }
  .hero__subtitle { font-size: var(--fs-sm); }

  .navbar__logo { font-size: var(--fs-lg); }

  .stat { flex-shrink: 0; }
  .stat__number { font-size: var(--fs-xl); }
  .hero__stats { gap: var(--sp-4); padding-top: var(--sp-4); }

  .why__num-card { padding: var(--sp-4); }
  .why__num-value { font-size: var(--fs-2xl); }

  .faq__question { font-size: var(--fs-sm); padding: var(--sp-4) var(--sp-5); }
  .faq__answer.open { padding-bottom: var(--sp-4); }

  .footer__legal { gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }

  .guarantee-item { padding: var(--sp-3); }

  .btn--lg { padding: 0.75rem 1.5rem; font-size: var(--fs-sm); }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .loader, .navbar, .whatsapp-float,
  .hero__bg, .features__bg, .cta-final__bg,
  .float-card { display: none !important; }

  section { padding-block: 2rem; }

  body { color: #000; background: #fff; }
  .hero { background: #fff; color: #000; min-height: auto; }
  .hero__title, .hero__subtitle { color: #000; }
  .text-gradient { -webkit-text-fill-color: #7C3AED; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-fade {
    opacity: 1;
    transform: none;
  }

  .hero__orb,
  .float-card,
  .scroll-indicator__dot,
  .loader__progress { animation: none; }
}

/* ── Dark mode (basic support) ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Opt-in only — not forcing dark mode by default */
}

/* ── Large screens ──────────────────────────────────────────── */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
  .hero__title { font-size: 4.25rem; }
  .mockup { max-width: 580px; }
}

/* ── Touch devices ──────────────────────────────────────────── */
@media (hover: none) {
  .btn:hover { transform: none; }
  .demo-card:hover { transform: none; }
  .feature-card:hover { transform: none; }
  .step-card:hover { transform: none; }
}