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

/* ---- Interaction polish: brand-preserving, fast and accessible ---- */
:root {
  --ok-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ok-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled) {
  transition-property: transform, background-color, border-color, color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: var(--ok-ease-out);
}

button:not(:disabled):active,
.ok-pressable:active {
  transform: scale(0.97);
}

.ok-card {
  transition:
    transform 220ms var(--ok-ease-out),
    box-shadow 220ms var(--ok-ease-out),
    border-color 180ms ease;
}

.ok-card img {
  transition: transform 280ms var(--ok-ease-out);
}

.ok-modal-backdrop {
  animation: ok-backdrop-in 180ms var(--ok-ease-out) both;
}

.ok-modal-panel {
  transform-origin: center;
  animation: ok-modal-in 240ms var(--ok-ease-out) both;
}

.ok-carousel-dot {
  transition:
    width 220ms var(--ok-ease-out),
    background-color 180ms ease;
}

@keyframes ok-backdrop-in {
  from { opacity: 0; }
}

@keyframes ok-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

@media (hover: hover) and (pointer: fine) {
  .ok-card:hover {
    transform: translateY(-4px);
    border-color: rgba(104, 75, 255, 0.24) !important;
    box-shadow: 0 16px 34px rgba(13, 16, 48, 0.11) !important;
  }

  .ok-card:hover img {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ok-card,
  .ok-card img,
  .ok-carousel-dot,
  button:not(:disabled) {
    transition-duration: 1ms !important;
  }

  .ok-modal-backdrop,
  .ok-modal-panel {
    animation: ok-fade-in 120ms ease both;
  }

  .ok-card:hover,
  .ok-card:hover img,
  button:not(:disabled):active,
  .ok-pressable:active {
    transform: none !important;
  }
}

@keyframes ok-fade-in {
  from { opacity: 0; }
}

/* ---- 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; }
}