.groupSwiperWrapper {
  position: relative;
  width: 100%;
  max-width: 700px; /* o el tamaño que necesites para escritorio */
  margin: auto;
  display: flex;
  justify-content: center;
  margin-top:60px;
  }

  .groupSwiper {
    overflow: hidden;
    width: 100%;
    height: auto;
    margin-top:-20px;
  }


  .groupSwiper .swiper-slide{
    align-items:flex-start !important;
  }

  /* Flechas personalizadas fuera del slider */
  .customPrevGroup, .customNextGroup {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border:2px solid var(--principal);
    color:var(--principal);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    z-index: 10;
  }
  .customPrevGroup:hover, .customNextGroup:hover{
      color: var(--white);
  }

 .customPrevGroup {
  left: -60px;
}

.customNextGroup {
  right: -60px;
}

  @media(max-width:1360px){
      .groupSwiperWrapper {
      max-width:500px;
      }
  }

  @media(max-width:1240px){
      .customPrevGroup {
    left:0px;
  }

  .customNextGroup {
    right:0px;
  }

  }


  @media(max-width:400px){
    .groupSwiperWrapper {
    max-width:200px;
    }

    .customPrevGroup {
      left: -60px;
    }

    .customNextGroup {
      right: -60px;
    }
}