/* ============================================================
   ALFILTECH — responsive.css
   Media queries: mobile (<768px), tablet (768-1024px), desktop (>1024px)
   Enfoque mobile-first
   ============================================================ */

/* ===== TABLET (768px – 1024px) ===== */
@media (max-width: 1024px) {

  /* Layout */
  :root { --container-pad: 1.25rem; }

  /* Hero */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero__visual { order: -1; }

  .dashboard-mockup { max-width: 560px; margin: 0 auto; }

  /* Servicios: 2 columnas */
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  /* Flujo PS */
  .ps-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Demo KPIs: 2x2 */
  .demo__kpis { grid-template-columns: repeat(2, 1fr); }

  /* Demo charts */
  .demo__charts { grid-template-columns: 1fr; }

  /* Casos: 1 columna */
  .cases__grid { grid-template-columns: 1fr; }

  /* Why: 1 columna */
  .why__grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}


/* ===== MOBILE (<768px) ===== */
@media (max-width: 767px) {

  /* Root adjustments */
  :root {
    --header-height: 64px;
    --container-pad: 1rem;
  }

  /* Tipografía */
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.75rem; }

  .section-title { font-size: 1.75rem; }

  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* Header: oculta nav desktop, muestra toggle */
  .nav__desktop { display: none; }
  .btn-header-cta.btn-header-cta--desktop { display: none; }
  .nav__toggle { display: flex; }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 3rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero__visual { display: none; } /* oculta en mobile muy pequeño, priorizamos copy */

  .hero__title { font-size: 2rem; }
  .hero__subtitle { font-size: 1rem; }

  .hero__ctas {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero__ctas .btn { width: 100%; justify-content: center; }

  .hero__badges { gap: 0.5rem; }

  /* Clientes: scroll horizontal */
  .clients__grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 2rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .clients__grid::-webkit-scrollbar { display: none; }

  .client-logo { flex-shrink: 0; }

  /* Flujo PS: 1 columna */
  .ps-flow { grid-template-columns: 1fr; gap: 1rem; }

  /* Servicios: 1 columna */
  .services__grid { grid-template-columns: 1fr; }

  /* Demo KPIs: 2 columnas */
  .demo__kpis { grid-template-columns: repeat(2, 1fr); }
  .demo__charts { grid-template-columns: 1fr; }

  .demo__topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Casos: 1 columna */
  .cases__grid { grid-template-columns: 1fr; }

  /* Why: 1 columna */
  .why__grid { grid-template-columns: 1fr; }

  .why-card { flex-direction: column; }

  /* CTA final */
  .cta-final__title { font-size: 1.875rem; }

  /* Footer: 1 columna */
  .footer__main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  /* Botones */
  .btn--lg {
    padding: 14px 24px;
    font-size: 1rem;
  }
}


/* ===== DESKTOP GRANDE (>1200px) ===== */
@media (min-width: 1200px) {

  .hero__title { font-size: 3.25rem; }

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