/* OKENTRA — Responsive overrides for the marketing site.
   These !important rules override React inline styles at mobile/tablet widths. */

/* ---- Tablet: shrink very wide multi-column grids ---- */
@media (max-width: 1024px) {
  /* section side padding a bit tighter */
  [style*="padding: 84px 28px"], [style*="padding: 88px 28px"], [style*="padding: 86px 28px"] {
    padding-left: 22px !important; padding-right: 22px !important;
  }
}

/* ---- Mobile: stack everything ---- */
@media (max-width: 768px) {
  /* Any CSS grid collapses to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Big headings scale down */
  h1 { font-size: 32px !important; line-height: 1.12 !important; }
  h2 { font-size: 25px !important; line-height: 1.18 !important; }
  h3 { font-size: 19px !important; }

  /* Oversized inline hero spans (e.g. "28 millones", manuscrito) */
  h1 span, h2 span { font-size: inherit !important; }

  /* Reduce heavy vertical section padding */
  [style*="padding: 84px 28px"] { padding: 52px 20px !important; }
  [style*="padding: 88px 28px"] { padding: 52px 20px !important; }
  [style*="padding: 86px 28px 92px"] { padding: 48px 20px 56px !important; }
  [style*="padding: 78px 28px 82px"] { padding: 44px 20px 52px !important; }
  [style*="padding: 84px 28px 72px"] { padding: 48px 20px 48px !important; }
  [style*="padding: 64px 28px 72px"] { padding: 40px 20px 48px !important; }

  /* Big pill/hero CTAs full width */
  [style*="font-size: 48px"], [style*="fontSize: 48px"] { font-size: 32px !important; }

  /* ---- Header: wrap and let the nav scroll horizontally ---- */
  header > div {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 12px 18px !important;
    gap: 8px 10px !important;
  }
  header nav {
    order: 5;
    width: 100%;
    margin-left: 0 !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  header nav a { white-space: nowrap; flex: 0 0 auto; }
  header img { height: 32px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 27px !important; }
  h2 { font-size: 22px !important; }
}