/* ============================================================
   i+D Space — Responsive CSS
   Mobile-first: breakpoints min-width
   ============================================================ */

/* === TABLET (640px+) === */
@media (min-width: 640px) {
  .container { padding: 0 32px; }

  /* Grids */
  .idspace-services-grid, .idspace-posts-grid,
  .idspace-casos-grid, .idspace-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Metrics */
  .idspace-metrics-grid { grid-template-columns: repeat(4, 1fr); }

  /* Footer */
  .idspace-footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .idspace-hero-actions { flex-direction: row; }
  .idspace-cta-actions { flex-direction: row; justify-content: center; }

  /* Process — 5D Framework */
  .idspace-process-steps { grid-template-columns: repeat(2, 1fr); }

  /* Caso métricas */
  .idspace-caso-metricas { grid-template-columns: repeat(4, 1fr); }
}

/* === DESKTOP (1024px+) === */
@media (min-width: 1024px) {
  .container { padding: 0 48px; }

  /* Navegación */
  .idspace-nav-menu { display: block; }
  .idspace-nav-toggle { display: none; }
  .idspace-nav-cta { display: inline-flex; }
  .idspace-nav-mobile { display: none; }

  /* Grids de homepage */
  .idspace-services-grid { grid-template-columns: repeat(4, 1fr); }
  .idspace-casos-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .idspace-blog-grid { grid-template-columns: repeat(3, 1fr); }

  /* Process horizontal — 5D Framework */
  .idspace-process-steps {
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
  }
  .idspace-process-step {
    padding: 0;
    text-align: center;
    flex: 1;
  }

  /* Contact page */
  .idspace-contact-grid { grid-template-columns: 60% 40%; gap: 64px; }

  /* About / generic pages */
  .idspace-page-header { margin-bottom: var(--space-16); }

  /* Footer */
  .idspace-footer-grid { grid-template-columns: repeat(4, 1fr); }
  .idspace-footer-bottom { flex-direction: row; justify-content: space-between; }

  /* Hero desktop */
  .idspace-home-hero { min-height: 100vh; }
  .idspace-home-hero-inner { max-width: 720px; }
}