/* ============================================================
   AlfaBeth — Mobile layout (viewport ≤ 900px)
   Scoped under html.is-mobile, toggled by fit() in index.html.
   Desktop (>900px) keeps the scaled 1920 canvas untouched.
   !important is required to beat the components' inline styles.
   ============================================================ */

html.is-mobile #app { width: 100%; }
html.is-mobile body { overflow-x: hidden; }

/* ---------- type ramp (mobile sizes for the semantic classes) ---------- */
html.is-mobile .t-display { font-size: 40px; }
html.is-mobile .t-section { font-size: 30px; line-height: 1.1; }
html.is-mobile .t-quote { font-size: 24px; }
html.is-mobile .t-card-title { font-size: 22px; }
html.is-mobile .t-subtitle { font-size: 16px; }
html.is-mobile .t-nav { font-size: 15px; }
html.is-mobile .t-body { font-size: 17px; line-height: 26px; }
html.is-mobile .t-body-sm { font-size: 16px; line-height: 25px; }
html.is-mobile .t-cta { font-size: 17px; }

/* ---------- navbar ---------- */
html.is-mobile .nav-bar { height: 72px !important; padding: 0 20px !important; }
html.is-mobile .nav-bar img { height: 36px !important; }
html.is-mobile .nav-links { gap: 20px !important; }

/* ---------- hero ---------- */
html.is-mobile .hero-section { padding-top: 96px !important; min-height: 0 !important; }
html.is-mobile .hero-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 0 24px 64px !important;
  gap: 44px !important;
  min-height: 0 !important;
}
html.is-mobile .hero-left { max-width: none !important; }
html.is-mobile .hero-left .t-subtitle { margin: 18px 0 24px !important; }
html.is-mobile .hero-socials { gap: 16px !important; }

/* ---------- services ---------- */
html.is-mobile [data-screen-label="Servicios"] { padding: 72px 0 !important; }
html.is-mobile .svc-watermark {
  width: 320px !important; height: 320px !important;
  left: -110px !important; top: 40px !important;
}
html.is-mobile .svc-row { flex-direction: column !important; align-items: stretch !important; padding: 0 24px !important; gap: 8px !important; }
html.is-mobile .svc-intro { position: static !important; flex: none !important; }
html.is-mobile .svc-intro .t-body { width: auto !important; }
/* one swipeable row, edge-to-edge, snap per card */
html.is-mobile .svc-scroll {
  margin: 0 -24px;
  grid-template-rows: none !important;
  grid-auto-columns: min(78vw, 320px) !important;
  gap: 20px !important;
  padding: 4px 24px 24px !important;
  scroll-snap-type: x mandatory !important;
  /* keep a 24px gutter when snapping; without it mandatory snap pulls the
     first card flush to the edge and eats the leading margin */
  scroll-padding-left: 24px !important;
  scroll-padding-right: 24px !important;
}
html.is-mobile .svc-card { padding-top: 20px !important; padding-left: 16px !important; }
html.is-mobile .svc-card .sq-card { padding: 56px 20px 24px 24px !important; }
html.is-mobile .svc-card > img { width: 64px !important; height: 64px !important; }
html.is-mobile .svc-spacer { height: 72px !important; }
html.is-mobile .svc-features { grid-template-columns: minmax(0, 1fr) !important; gap: 56px !important; padding: 0 24px !important; }
html.is-mobile .svc-features h3 { font-size: 21px !important; }

/* ---------- methodology ---------- */
html.is-mobile [data-screen-label="Metodología"] { padding: 72px 0 88px !important; }
html.is-mobile .met-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; padding: 0 28px !important; }
/* Badge scaled down (anchored top-left) so the title sits BESIDE it like on
   desktop — no tall empty band above the title, and the smaller circle frees
   room for text on a narrow screen. */
html.is-mobile .pillar-badge { transform: scale(0.7) !important; transform-origin: top left !important; }
html.is-mobile .pillar .sq-card { padding: 26px 26px 26px 44px !important; }
html.is-mobile .met-about-rule { margin-bottom: 40px !important; }
html.is-mobile .met-cta-box { padding: 28px 24px 30px !important; max-width: none !important; }
html.is-mobile .met-head { padding: 0 24px !important; margin-top: 64px !important; }
html.is-mobile .met-head .t-body { width: auto !important; }

/* timeline: horizontal strip -> vertical list, dotted connector down the left */
html.is-mobile .met-timeline-wrap { padding: 48px 24px 0 !important; overflow-x: visible !important; }
html.is-mobile .met-timeline { flex-direction: column !important; min-width: 0 !important; gap: 32px !important; }
html.is-mobile .met-connector {
  left: 33px !important; right: auto !important; top: 24px !important; bottom: 56px !important;
  width: 6px !important; height: auto !important;
  background: repeating-linear-gradient(to bottom, var(--peach) 0 6px, transparent 6px 12px) !important;
}
html.is-mobile .met-step {
  flex: 0 0 auto !important; flex-direction: row !important;
  align-items: flex-start !important; text-align: left !important; gap: 18px !important;
}
html.is-mobile .met-step-icon { width: 72px !important; height: 72px !important; }
html.is-mobile .met-step-icon img { width: 72px !important; height: 72px !important; }
html.is-mobile .met-step-text { display: block !important; flex: 1 !important; padding-top: 4px; }
html.is-mobile .met-step-title { margin: 0 0 6px !important; min-height: 0 !important; }
html.is-mobile .met-step-body { max-width: none !important; }

/* ---------- footer ---------- */
html.is-mobile .ft-watermark {
  width: 300px !important; height: 300px !important;
  top: -60px !important; right: -90px !important;
}
html.is-mobile .ft-contact { padding: 72px 24px 56px !important; }
html.is-mobile .ft-title { font-size: 32px !important; white-space: normal !important; }
html.is-mobile .brand-cta { font-size: 18px !important; padding: 14px 28px !important; }
html.is-mobile .ft-quote-band { padding: 48px 24px !important; justify-content: center !important; }
html.is-mobile .ft-quote { text-align: center !important; }
html.is-mobile .ft-quote footer { font-size: 16px !important; }
html.is-mobile .ft-bar {
  padding: 36px 24px 44px !important;
  flex-direction: column !important; justify-content: center !important; gap: 20px !important;
}
html.is-mobile .ft-bar img { height: 40px !important; }
html.is-mobile .ft-bar span { font-size: 13px !important; text-align: center; }

/* ---------- gallery (when projects exist) ---------- */
html.is-mobile [data-screen-label="Galería"] { padding: 72px 24px !important; }
html.is-mobile .gal-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
html.is-mobile .gal-cover { height: min(72vw, 380px) !important; }