/* ==========================================================================
   Section: App Services Carousel (.x-appservices)
   "Haz todo desde tu App, Web o WhatsApp" — Banco Falabella Perú clone
   All values extracted from getComputedStyle() on the live site.
   ========================================================================== */

.x-appservices {
  background: var(--bg-gray);
  padding: 32px 96px;
  position: relative;
  overflow: hidden;
}

.x-appservices__wrapper {
  max-width: var(--container-section);
  margin: 0 auto;
  position: relative;
}

/* --- Heading --- */
.x-appservices__heading {
  display: flex;
  flex-direction: column;
  margin: 0 0 32px;
}

.x-appservices__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: 44.8px;
  letter-spacing: -0.64px;
  color: var(--ink-2);
  text-align: center;
  margin: 0 0 8px;
}

/* --- Carousel --- */
.x-appservices__carousel {
  position: relative;
}

.x-appservices__viewport {
  overflow: hidden;
  height: 246px;
}

.x-appservices__track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  padding: 0 0 2px;
  height: 246px;
  transition: transform .45s ease;
  will-change: transform;
}

/* --- Card --- */
.x-appservices .x-appcard {
  flex: 0 0 calc(25% - 18px);
  height: 244px;
  border-radius: var(--r-card);
}

.x-appservices .x-appcard__link {
  display: block;
  height: 100%;
}

.x-appservices .x-appcard__inner {
  background: var(--white);
  width: 100%;
  height: 244px;
  max-height: 244px;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  border: 1px solid var(--gray-border);
  box-shadow: var(--shadow-card-dark);
  overflow: hidden;
  transition: transform .1s ease-in;
}

.x-appservices .x-appcard__link:hover .x-appcard__inner {
  transform: translateY(-2px);
}

.x-appservices .x-appcard__img-wrap {
  width: 100%;
  height: 148px;
  position: relative;
  flex: 0 0 auto;
}

.x-appservices .x-appcard__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.x-appservices .x-appcard__content {
  padding: 16px;
  height: 94px;
  max-height: 94px;
}

.x-appservices .x-appcard__title {
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--ink);
  margin: 0;
}

/* --- Arrows --- */
.x-appservices__arrow {
  position: absolute;
  top: 103px;
  width: 40px;
  height: 40px;
  z-index: var(--z-arrows);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.x-appservices__arrow--prev { left: -20px; }
.x-appservices__arrow--next { right: -20px; }

.x-appservices__arrow img {
  width: 40px;
  height: 40px;
}

.x-appservices__arrow.is-disabled {
  opacity: .25;
  pointer-events: none;
}

/* --- Dots --- */
.x-appservices__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 10px;
  height: 6px;
}

.x-appservices__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-dot);
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s .3s, width .3s;
}

.x-appservices__dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-dot);
  background: var(--lime-pale);
  transition: background-color .3s;
}

.x-appservices__dot:first-child {
  margin-left: 0;
}

.x-appservices__dot.is-active {
  width: 24px;
  background: var(--lime);
  transition: background-color .3s, width .3s;
}

.x-appservices__dot.is-active::after { display: none; }

/* --- Tablet: 768–1023px → 2 cards per view --- */
@media (max-width: 1023px) {
  .x-appservices .x-appcard {
    flex: 0 0 calc(50% - 12px);
  }
}

/* --- Mobile: <768px → 1 card per view, full-width section --- */
@media (max-width: 767px) {
  .x-appservices {
    padding: 32px 0;
  }

  .x-appservices__title {
    font-size: var(--fs-hero);
    line-height: 56px;
    letter-spacing: -0.8px;
  }

  .x-appservices__viewport {
    padding: 0 24px;
  }

  .x-appservices .x-appcard {
    flex: 0 0 88%; /* live mobile: card + peek of the next one */
  }

  /* Live site hides carousel arrows on mobile */
  .x-appservices__arrow {
    display: none;
  }
}