/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   Skill (UX guidelines): Mobile-first → add breakpoints para mayor
   Puntos: 375 | 640 | 768 | 1024 | 1280 | 1440
   ============================================================ */

/* ── DESKTOP GRANDE (>1280px) ── */
@media (min-width: 1280px) {
  .container { padding-inline: var(--sp-6); }
}

/* ── TABLET LANDSCAPE (≤1024px) ── */
@media (max-width: 1024px) {
  /* Hero: apila col de texto + mockup */
  .grid-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .hero__visual {
    order: -1; /* Mockup arriba en tablet */
  }

  .hero__title,
  .hero__subtitle,
  .hero__eyebrow {
    text-align: center;
  }

  .hero__subtitle { max-width: 580px; margin-inline: auto; }
  .hero__ctas { justify-content: center; }

  /* Solución: apila */
  .solution__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .solution__media { order: -1; }
  .solution__stat-float {
    position: static;
    display: inline-block;
    margin-top: var(--sp-3);
  }

  /* Steps: 2x2 en vez de 4x1 */
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-connector { display: none; }

  /* Use cases: 2x2 */
  .use-cases-grid { grid-template-columns: repeat(2, 1fr); }

  /* Features: apila */
  .features__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .features__grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing: col única centrada */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-5px); }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  .footer__brand { grid-column: 1 / -1; }
}

/* ── TABLET PORTRAIT (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --sp-12: 4.5rem;
    --sp-16: 5.5rem;
  }

  /* Navbar: ocultar links y mostrar hamburger */
  .navbar__links,
  .navbar__actions .btn:not(.btn--primary) {
    display: none;
  }
  .hamburger { display: flex; }

  /* Problema: 1 col */
  .problem-grid { grid-template-columns: 1fr; }

  /* Steps: 1 col */
  .steps-grid { grid-template-columns: 1fr; }

  /* Use cases: 1 col */
  .use-cases-grid { grid-template-columns: 1fr; }
  .use-case-card { height: 240px; }

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

  /* CTA Banner */
  .cta-banner {
    padding: var(--sp-8) var(--sp-4);
    border-radius: var(--radius-2xl);
  }
  .cta-banner__ctas { flex-direction: column; align-items: stretch; }
  .cta-banner__ctas .btn { width: 100%; justify-content: center; }

  /* Footer: 2 cols */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── MOBILE (≤480px) ── */
@media (max-width: 480px) {
  :root {
    --sp-12: 3.5rem;
    --sp-16: 4.5rem;
  }

  /* Hero CTA: apila */
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  /* Chat mockup: ancho completo */
  .chat-mockup { max-width: 100%; }

  /* Solución stat: ancho completo */
  .solution__stat-float { max-width: 100%; }

  /* Use case: altura reducida */
  .use-case-card { height: 220px; }

  /* Footer: 1 col */
  .footer__inner { grid-template-columns: 1fr; }

  /* Whatsapp float: más pequeño */
  .whatsapp-float { width: 50px; height: 50px; bottom: 1.25rem; right: 1.25rem; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-float::before { display: none; }

  /* Pricing: sin escala */
  .pricing-card--featured { transform: none; }

  /* FAQ trigger: ajuste de padding */
  .faq-trigger { padding: var(--sp-3); font-size: var(--fs-sm); }
}

/* ── TOUCH: tamaños mínimos (skill UX: 44x44px targets) ── */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .faq-trigger { min-height: 44px; }
  .navbar__links a { padding: 0.5rem; }
  .hamburger { width: 44px; height: 44px; }
}

/* ── REDUCIR MOVIMIENTO ── */
@media (prefers-reduced-motion: reduce) {
  .chat-mockup { animation: none; }
  .blob--1, .blob--2 { animation: none; }
  .chat-status::before { animation: none; }
  .typing-indicator span { animation: none; opacity: 0.7; }
}