/**
 * Como participar — layout SumUp (3 cards sobre fundo tinta)
 */

.sumup-como.sumup-reach {
  background: var(--sumup-ink) !important;
  padding: clamp(5rem, 8vw, 11rem) 0 !important;
  overflow: hidden;
}

.sumup-reach__shell {
  width: 100%;
  margin: 0 auto;
  scroll-margin-top: 1.2rem;
}

.sumup-reach__title {
  margin: 0 auto 4rem;
  padding: 0 2rem;
  max-width: 90rem;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 3.6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.16;
  text-align: center;
  color: #fff;
}

.sumup-reach__title span { color: var(--sumup-pink); }

.sumup-reach__carousel { position: relative; }

.sumup-reach__track {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  overflow: visible;
  padding: 0 2rem;
  cursor: default;
}


.sumup-reach__item {
  flex: 1 0 0;
  min-width: 28rem;
  max-width: 43rem;
  scroll-snap-align: center;
}

.sumup-reach__card {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  height: 100%;
  padding: 1.6rem 1.6rem 3.2rem;
  border-radius: 4rem;
  background: #fff;
  box-sizing: border-box;
}

.sumup-reach__img {
  display: block;
  width: 100%;
  height: 30rem;
  object-fit: cover;
  border-radius: 2.4rem;
  pointer-events: none;
  user-select: none;
}

.sumup-reach__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0 0.8rem;
}

.sumup-reach__step-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: var(--sumup-pink);
  color: var(--sumup-ink);
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.sumup-reach__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sumup-ink);
}

.sumup-reach__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--sumup-ink);
}

/* Visual vem de .btn (forms.css) */
.sumup-reach__cta {
  display: flex;
  width: 100%;
  margin-top: auto;
}

.sumup-reach__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.8rem;
}

.sumup-reach__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--btn-dark-bg);
  color: var(--btn-dark-fg);
  cursor: pointer;
  transition: opacity 0.3s ease, background-color 0.2s ease;
}

.sumup-reach__btn:hover:not(:disabled) { background: var(--btn-dark-bg-hover); }
.sumup-reach__btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }
.sumup-reach__btn:disabled { opacity: 0.4; cursor: default; }
.sumup-reach__btn svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }

@media (max-width: 991px) {
  .sumup-reach__track {
    justify-content: flex-start;
    padding: 0 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .sumup-reach__track::-webkit-scrollbar { display: none; }
  .sumup-reach__item { flex: 0 0 78%; max-width: 34rem; }
  .sumup-reach__text { font-size: 2rem; }
  .sumup-reach__sub { font-size: 1.6rem; }
  .sumup-reach__controls { display: flex; }
}

@media (max-width: 575px) {
  .sumup-reach__item { flex-basis: 86%; }
}