/* ── Use Cases (Bifurcador) ─────────────────────────── */

.use-cases {
  position: relative;
  height: 300vh;
  background: #F9F9F9;
}

.use-cases__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0 var(--section-padding-h);
}

/* Inner — alignment wrapper (same pattern as .ventajas__inner) */
.use-cases__inner {
  max-width: 1728px;
  margin: 0 auto;
}

/* Header — h2 small + P big */
.use-cases__header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-sm) + var(--space-xs));
  margin-bottom: var(--space-xl);
}

.use-cases__label {
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--color-gray-500);
}

.use-cases__heading {
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-dark);
}

/* Static mode — when viewport is wide enough that no scroll is needed */
.use-cases--static {
  height: auto;
}

.use-cases--static .use-cases__sticky {
  position: relative;
  height: auto;
  padding-top: calc(var(--section-padding-v) * 2);
  padding-bottom: calc(var(--section-padding-v) * 2);
}

/* Track — horizontal sliding container */
.use-cases__track {
  display: flex;
  gap: 176px;
  will-change: transform;
}

/* Card */
.use-cases__card {
  position: relative;
  flex-shrink: 0;
  width: 881px;
  height: 560px;
}

/* Blob — decorative SVG */
.use-cases__blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  pointer-events: none;
}

.use-cases__blob svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content — overlaps right portion of blob */
.use-cases__content {
  position: absolute;
  top: 123px;
  left: 381px;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.use-cases__kicker {
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
}

.use-cases__name {
  font-size: 64px; /* Figma spec, not in global scale */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-dark);
  margin-top: var(--space-xs);
}

.use-cases__desc {
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--color-dark);
  margin-top: 55px;
}

.use-cases__cta {
  align-self: flex-start;
  margin-top: 55px;
}

/* Tablet */
@media (max-width: 1200px) {
  .use-cases__sticky {
    padding: 0 var(--space-xl);
  }

  .use-cases__track {
    gap: var(--space-2xl);
  }

  .use-cases__card {
    width: 680px;
    height: 432px;
  }

  .use-cases__blob {
    width: 432px;
    height: 432px;
  }

  .use-cases__content {
    top: 80px;
    left: 280px;
    width: 400px;
  }

  .use-cases__name {
    font-size: var(--text-statement);
  }

  .use-cases__desc {
    font-size: var(--text-lg);
    margin-top: var(--space-lg);
  }

  .use-cases__cta {
    margin-top: var(--space-lg);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .use-cases {
    height: auto;
  }

  .use-cases__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    padding: var(--space-2xl) var(--space-md);
  }

  .use-cases__header {
    margin-bottom: var(--space-lg);
  }

  .use-cases__heading {
    font-size: var(--text-2xl);
  }

  .use-cases__track {
    flex-direction: column;
    gap: var(--space-xl);
    will-change: auto;
  }

  .use-cases__card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 360px;
  }

  .use-cases__blob {
    width: 260px;
    height: 260px;
  }

  .use-cases__content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding-top: var(--space-xl);
    padding-left: 15%;
  }

  .use-cases__name {
    font-size: var(--text-2xl);
  }

  .use-cases__desc {
    font-size: var(--text-body);
    margin-top: var(--space-md);
  }

  .use-cases__cta {
    margin-top: var(--space-md);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .use-cases {
    height: auto;
  }

  .use-cases__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .use-cases__track {
    flex-direction: column;
    gap: var(--space-xl);
    will-change: auto;
  }

  .use-cases__card {
    width: 100%;
    max-width: 881px;
    height: auto;
    min-height: 400px;
  }
}