/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Breakpoints mobile-first
   Base (components.css / sections.css) = móvil. Aquí solo se
   AMPLÍA el layout hacia pantallas más grandes.
   Breakpoints (ver tokens.css): sm 480 · md 768 · lg 1024 · xl 1280
   ═══════════════════════════════════════════════════════════════ */

/* ── SM — 480px: teléfonos grandes ────────────────────────────── */
@media (min-width: 480px) {
  .form__row { grid-template-columns: repeat(2, 1fr); }
  .form__row--full { grid-template-columns: 1fr; }

  .reviews__actions { grid-template-columns: repeat(2, 1fr); }
  .social__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .system__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── MD — 768px: tablets ──────────────────────────────────────── */
@media (min-width: 768px) {
  :root { --container-pad: 2rem; }

  /* Header: aparecen íconos sociales; nav sigue oculto hasta lg */
  .header__social { display: flex; }

  .trust-bar__grid { grid-template-columns: repeat(4, 1fr); }
  .trust-bar__item + .trust-bar__item { border-left: 1px solid var(--color-border); }

  .problem__grid { grid-template-columns: repeat(3, 1fr); }

  .about__stats { grid-template-columns: repeat(3, 1fr); }

  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .reviews__actions { grid-template-columns: repeat(3, 1fr); }
  .social__grid { grid-template-columns: repeat(3, 1fr); }

  .blog__grid { grid-template-columns: repeat(3, 1fr); }
  .cases__grid { grid-template-columns: repeat(3, 1fr); }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }

  .section__title { font-size: var(--fs-4xl); }
}

/* ── LG — 1024px: desktop ─────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Header completo */
  .header__nav { display: block; }
  .header__cta { display: inline-flex; }

  .hero__content { max-width: 50rem; }

  .impact__grid { grid-template-columns: 1.1fr 0.9fr; }

  .steps__line { display: block; }
  .steps__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .steps__item { padding-left: 0; padding-top: var(--space-20); }
  .steps__number { left: 50%; transform: translateX(-50%); top: 0; }
  .steps__title, .steps__desc { text-align: center; }

  .about__grid { grid-template-columns: 0.8fr 1.2fr; }

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

  .pricing__grid { grid-template-columns: repeat(4, 1fr); }

  .system__grid { grid-template-columns: repeat(3, 1fr); }

  .cursor-dot, .cursor-ring { display: block; }
}

/* ── XL — 1280px: desktop grande ──────────────────────────────── */
@media (min-width: 1280px) {
  .hero__title { font-size: var(--fs-5xl); }
  .carousel__viewport { height: 460px; }
}

/* ── Flip cards: fallback estático en móvil (sin hover 3D) ────── */
@media (max-width: 767px), (hover: none) {
  .flip-card { height: auto; perspective: none; }
  .flip-card__inner { transform: none !important; transform-style: flat; position: static; }
  .flip-card__front,
  .flip-card__back {
    position: static;
    backface-visibility: visible;
    transform: none;
  }
  .flip-card__back { margin-top: var(--space-3); }
}

/* ── Ajustes táctiles: dispositivos sin hover preciso ─────────── */
@media (hover: none), (pointer: coarse) {
  .wa-float { width: 52px; height: 52px; }
  .header__social { display: none; }
}

/* ── Pantallas muy angostas: reducir paddings agresivos ───────── */
@media (max-width: 359px) {
  :root { --container-pad: 1rem; }
  .section { padding-block: var(--space-16); }
}