/* ============================================================================
   SYNESYS — Responsive
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .why__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .why__media { aspect-ratio: 16/9; order: -1; }
  .method { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(4, 1fr); }
  .cases { grid-template-columns: 1fr; }
  .mood__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --header-h: 64px; }

  /* Nav móvil: panel desplegable sólido */
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--synesys-white);
    padding: var(--space-2) var(--gutter) var(--space-4);
    border-bottom: 2px solid rgba(0,0,0,.08);
    transform: translateY(-120%); transition: transform .3s var(--ease);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { width: 100%; padding-block: .9rem; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 1.05rem; }
  .nav .btn { margin-top: var(--space-2); width: 100%; justify-content: center; }

  .services { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
  .mood__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mood__item.wide { grid-column: span 2; }
  .field--row { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .hero__tags { gap: .4rem; }
  .case__metrics { gap: var(--space-2); }
}

/* ---------- Pantallas muy chicas ---------- */
@media (max-width: 380px) {
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__cta .btn { width: 100%; justify-content: center; }
}