.slide-1 {
  background-image: url("../img/first-background-mobile.png");
  background-size: 100% auto;
  background-position: center 10%;
  background-repeat: no-repeat;
}

.shop-showcase {
  color: white;
  padding-top: 64px;
}
.slide-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  background: linear-gradient(
    180deg,
    rgba(44, 32, 68, 0) 7.68%,
    rgba(44, 32, 68, 0.278571) 41.16%,
    rgba(44, 32, 68, 0.85) 100%
  );

  z-index: 1;
}

.shop-showcase .shop-showcase-swiper .swiper-slide {
  background-color: #742384;
  display: flex;
  flex-direction: column-reverse;
  height: 496px;
}

.shop-showcase .shop-showcase-swiper .slide-1 {
  justify-content: start;
  padding: 0 5% 5% 5%;
}

.shop-showcase .shop-showcase-swiper .slide-2,
.shop-showcase .shop-showcase-swiper .slide-3 {
  justify-content: space-evenly;
  padding: 0 5%;
}

.shop-showcase .shop-showcase-swiper .slide-1 .text-container {
  margin-top: auto;
}

.content-carousel {
  padding: 0 10px;
}
.content-wrapper {
  padding: 0 10px;
}

.shop-showcase .shop-showcase-swiper .text-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  z-index: 2;
  gap: 5px;
}

.shop-showcase .shop-showcase-swiper .swiper-image {
  width: 70%;
  z-index: 2;
}

.shop-showcase .shop-showcase-swiper .text-container .title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  text-align: start;
}

.shop-showcase .shop-showcase-swiper .text-container .subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  text-align: start;
  vertical-align: middle;
}

.shop-showcase .shop-showcase-swiper .text-container .buttons-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.shop-showcase
  .shop-showcase-swiper
  .text-container
  .buttons-container
  a {
  /* height: 56px; */
  /* background-color: #8b3d99; */
  border-radius: 8px;
  width: 100%;
  margin-bottom: 0px !important;
}

.shop-showcase
  .shop-showcase-swiper
  .text-container
  .buttons-container
  a
  .button {
  /* height: 56px; */
  padding: 12px 16px;
  font-size: 16px;
  letter-spacing: 0.15px;
  line-height: 24px;
  font-weight: 600;
  width: 100%;
}

.shop-showcase
  .shop-showcase-swiper
  .text-container
  .buttons-container
  .button {
  /* height: 56px; */
  background-color: #8b3d99;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  letter-spacing: 0.15px;
  line-height: 24px;
  font-weight: 600;
  width: 100%;
}

.shop-showcase
  .shop-showcase-swiper
  .text-container
  .buttons-container
  a
  .button-primary {
  background-color: #10cbb4;
}

.shop-showcase
  .shop-showcase-swiper
  .text-container
  .buttons-container
  .button-primary {
  background-color: #10cbb4;
}

.shop-showcase .shop-showcase-swiper .swiper-pagination {
  display: none;
}

.shop-showcase .shop-showcase-swiper .swiper-pagination-bullet {
  border-radius: 50px;
  background-color: #5d1b6a;
  opacity: 1;
  transition:
    width 0.8s ease-in-out,
    0.4s ease-in-out;
  margin: 0 4px !important;
}

.shop-showcase .shop-showcase-swiper .swiper-pagination-bullet-active {
  background-color: #ce92d6;
}

.shop-showcase .shop-showcase-swiper .showcaseSlider-nav {
  display: flex;
  flex-direction: row;
  padding: 0 0 3.5% 0;
  z-index: 10;
  position: relative;
  justify-content: center;
}

.shop-showcase .shop-showcase-swiper .showcaseSlider-nav .showcaseSlider-prev,
.shop-showcase .shop-showcase-swiper .showcaseSlider-nav .showcaseSlider-next {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin: 0 2vw;
  width: 56px !important;
  height: 56px !important;
}

.shop-showcase
  .shop-showcase-swiper
  .showcaseSlider-nav
  .showcaseSlider-prev::after,
.shop-showcase
  .shop-showcase-swiper
  .showcaseSlider-nav
  .showcaseSlider-next::after {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
}

.shop-showcase .shop-showcase-swiper .outlined {
  background: none !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  cursor: pointer;
}

.align-beneficios-principal .card {
  width: 100%;
  max-width: 360px;
  height: 448px;
  background-color: #742384;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  margin: 0 auto;
}

.text-container-benefits {
  margin-top: 20px;
  gap: 5px;
}

.text-container-steps {
  display: flex !important;
  align-items: center;
  justify-content: start;
  margin-bottom: 10px;
  gap: 10px;
  background-color: transparent;
}

.panel {
  border: 0px !important;
  background: transparent !important;
}

.purple-background .swiper-slide {
  background: transparent;
}

.align-beneficios-principal .card.yape-comercios {
  background-image: url(../img/yape-comercios.jpg);
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.align-beneficios-principal .card.yape-comercios-active {
  background-image: url(../img/activa-comercios.jpg);
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.align-beneficios-principal .card.yape-comercios-team {
  background-image: url(../img/team-comercios.jpg);
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.align-beneficios-principal .card .text-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}

.align-beneficios-principal .card .text-container .subtitle {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #f0cef5;
  letter-spacing: 0.1px;
}

.align-beneficios-principal .card .text-container .title {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.15px;
}

.align-beneficios-principal .card .footer-time {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.1px;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 6px;
}

.align-beneficios-principal .card .footer-time img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.beneficios-pagination {
  position: relative !important;
  display: block !important;
  bottom: auto !important;
  margin-top: 30px !important;
}

.beneficios-pagination .swiper-pagination-bullet {
  background-color: #e2dfe8;
  opacity: 1;
}

.beneficios-pagination .swiper-pagination-bullet-active {
  background-color: #a35aad !important;
}

@media (min-width: 1025px) {
  .align-beneficios-principal .swiper-wrapper {
    display: flex;
    /* justify-content: center; */
  }
  .beneficios-pagination {
    display: none !important;
  }
}

.feature-showcase .feature-showcase-swiper .swiper-pagination {
  position: relative;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.feature-showcase .feature-showcase-swiper .swiper-pagination-bullet {
  border-radius: 50px;
  background-color: #e2dfe8 !important;
  opacity: 1;
  transition:
    width 0.8s ease-in-out,
    0.4s ease-in-out;
  margin: 0 4px !important;
}

.feature-showcase .feature-showcase-swiper .swiper-pagination-bullet-active {
  background-color: #a35aad !important;
}

.feature-showcase .feature-showcase-swiper .showcaseSlider-nav {
  display: flex;
  flex-direction: row;
  z-index: 10;
  position: relative;
  justify-content: flex-end;
}

.feature-showcase
  .feature-showcase-swiper
  .showcaseSlider-nav
  .showcaseSlider-prev,
.feature-showcase
  .feature-showcase-swiper
  .showcaseSlider-nav
  .showcaseSlider-next {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin: 0 2vw;
  width: 52px !important;
  height: 52px !important;
}

.feature-showcase
  .feature-showcase-swiper
  .showcaseSlider-nav
  .showcaseSlider-prev::after,
.feature-showcase
  .feature-showcase-swiper
  .showcaseSlider-nav
  .showcaseSlider-next::after {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}

.feature-showcase
  .feature-showcase-swiper
  .showcaseSlider-nav
  .swiper-button-disabled {
  background-color: #e2dfe8 !important;
  opacity: 1 !important;
  cursor: auto;
}

.feature-showcase
  .feature-showcase-swiper
  .showcaseSlider-nav
  .swiper-button-disabled::after {
  color: #918aa0 !important;
}

.slider__item_comercios {
  font-size: 100px;
  color: rgba(255, 255, 255, 0.7);
  height: 436px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.accordion .panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: -5px;
}

.accordion .panel-body {
  padding: 10px 0;
  background: #ffffff;
  border-top: none;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
}

.nav-pills {
  margin-bottom: 30px;
}

.nav-pills > li.active > a {
  background-color: #ffffff !important;
  color: #742384 !important;
  border-bottom: 2px solid #742384 !important;
  font-weight: 500;
  font-family: Roboto-Medium;
}

.nav-pills > li.active > a:focus,
.nav-pills > li,
.nav-pills > li > a {
  outline: none;
  outline-offset: 0;
}
.nav-pills {
  display: flex;
}
.nav-pills > li {
  width: 50%;
  text-align: center;
}

.nav-pills > li > a {
  color: #69607b;
}

.nav-pills > li > a {
  border-radius: 0 !important;
}

.nav-pills > li > a:hover {
  background-color: transparent !important;
}

.clearfix {
  margin-top: 5%;
}

.customNavigation .btn_phone {
  background: #f0f8ff00;
  text-align: left;
  border: hidden;
  display: flex;
  padding: 0;
  position: relative;
  margin: 1em 0;
  border-radius: 0;
  font-size: 1em;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow:
    0 0 0 rgb(0 0 0 / 5%),
    0 0 0 rgb(0 0 0 / 5%),
    0 0 0 rgb(0 0 0 / 5%),
    0 0 0 rgb(0 0 0 / 5%),
    0 0 0 rgb(0 0 0 / 5%);
}

.customNavigation img {
  padding: 22px;
  height: 75px;
  width: 75px;
}

.customNavigation label {
  margin-left: 15px;
  margin-right: 15px;
}

.customNavigation p {
  display: inherit;
  font-size: 16px;
  align-items: center;
  color: #69607b;
}

.customNavigation .btn_phone + .btn_phone {
  margin-left: 0em;
}

.customNavigation .div_wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.dm-width {
  width: 400px;
  margin: 0 auto;
}

.dm-device {
  position: relative;
  width: 100%;
  /*padding-bottom:203.477897%;*/
  margin: auto;
}

.device {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-background-size: 100% 100%;
  z-index: 2;
  background-repeat: no-repeat;
  /* background-image: url(../img/seguridad_soli.png); */
  background-size: cover;
  background-position: center center;
}

.screen {
  overflow: hidden;
  z-index: 1;
  top: 83px;
  bottom: 101px;
  left: 45px;
  right: 74px;
  /* background-color: #6492c3; */
  /* width: 70%; */
  margin: auto;
  /*!* border-radius: 28px;*/
}

.slider__item_recargas--1-tigo {
  background-image: url("../img/dueno-01.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--2-tigo {
  background-image: url("../img/dueno-02.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--3-tigo {
  background-image: url("../img/dueno-03.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--4-tigo {
  background-image: url("../img/dueno-04.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--1-entel {
  background-image: url("../img/dueno-01.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--2-entel {
  background-image: url("../img/ayudante-01.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--3-entel {
  background-image: url("../img/ayudante-02.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--4-entel {
  background-image: url("../img/dueno-04.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slider__item_recargas--5-entel {
  background-image: url("../img/ayudante-03.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.number-step {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  color: #69607b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 5px;
}

.number-step.active {
  background-color: #10cbb4;
  color: #fff;
}

.tutorial-nav {
  position: absolute;
  top: 50%;
  left: -35px;
  width: calc(100% + 60px);
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.tutorial-prev,
.tutorial-next {
  pointer-events: auto;
  cursor: pointer;
  width: 52px;
  height: 52px;
  background-color: #10cbb4;
  /* border: 3px solid #742384; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.tutorial-prev::after,
.tutorial-next::after {
  font-family: "yape-icon";
  display: inline-block;
  font-size: 24px;
  color: #fff;
  transition: all 0.3s ease;
}

.tutorial-prev::after {
  content: "\f10f";
  margin-left: 4px;
}

.tutorial-next::after {
  content: "\f110";
  margin-right: 4px;
}

.tutorial-prev.disabled,
.tutorial-next.disabled {
  background-color: #e2dfe8 !important;
  cursor: auto;
  pointer-events: none;
}

.tutorial-prev.disabled::after,
.tutorial-next.disabled::after {
  color: #918aa0 !important;
}

.tutorial-prev:hover::after,
.tutorial-next:hover::after {
  border-color: #fff;
}

#paquetes,
#paquetes .panel-body {
  transition: background-color 0.7s ease;
}

.purple-background,
.purple-background .panel-body {
  background-color: #742384;
}
.purple-background .panel-body p {
  color: #fff;
}

.purple-background .nav-pills > li.active > a {
  background-color: #742384 !important;
  color: #fff !important;
  border-bottom: 4px solid #fff !important;
  font-weight: 500;
  font-family: Roboto-Medium;
}

.purple-background .nav-pills {
  border-bottom: 2px solid #fff !important;
  color: #fff;
}

.purple-background .nav-pills > li > a {
  color: #fff;
}


.hide_phone_ask {
  display: none;
}

.rubros-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: #2c2044;
}

.slider__item_rubro {
  min-width: 304px;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
}

.slider__item_rubro_01 {
  background-image: url("../img/rubro-01.png");
}
.slider__item_rubro_02 {
  background-image: url("../img/rubro-02.jpg");
}
.slider__item_rubro_03 {
  background-image: url("../img/rubro-03.jpg");
}
.slider__item_rubro_04 {
  background-image: url("../img/rubro-04.png");
}
.slider__item_rubro_05 {
  background-image: url("../img/rubro-05.png");
}
.slider__item_rubro_06 {
  background-image: url("../img/rubro-06.png");
}

.banner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #742384;
  border-radius: 24px;
  position: relative;
  margin: 0 5%;
  padding: 5%;
}

.banner-img {
  position: relative;
  min-width: 202px;
  min-height: 202px;
  z-index: 2;
  object-fit: cover;
  bottom: -11px;
}

.banner-comercios {
  width: 100%;
  color: white;
  z-index: 1;
  /* padding: 0 40px; */
}

.banner-comercios h1,
.banner-comercios h1 span {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

.banner-comercios p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5;
  color: rgba(255, 255, 255, 0.8);
}

.banner-container button {
  background-color: #10cbb4;
  color: white;
  border: none;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.15px;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}

.text-yellow {
  color: #f4c12a;
}

.tab-title {
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 24px;
  color: #3f0d4a;
}

.color-white {
  color: #fff;
}

.link-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.swiper-slide img {
  max-width: 332px;
}

.align-swiper-servicios {
  flex-direction: column;
}

.text-dark-gray {
  color: #69607b;
}

.hide_phone {
  display: none !important;
}

.hide_desktop {
  display: block !important;
}

@media (max-width: 683px) {
  .customNavigation img {
    height: 85px;
    width: 90px;
  }

  .customNavigation {
    margin-left: 0%;
    margin-bottom: 50px;
  }
}

@media (min-width: 768px) {
  .content-wrapper {
    padding: 0 40px;
  }

  .hide_phone {
    display: block !important;
  }

  .hide_desktop {
    display: none !important;
  }

  .text-container-benefits {
    margin-top: 0px;
    gap: 0px;
  }

  .align-swiper-servicios {
    flex-direction: row !important;
  }
  .shop-showcase .shop-showcase-swiper .text-container .subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.7);
    text-align: start;
    vertical-align: middle;
  }

  .shop-showcase
    .shop-showcase-swiper
    .text-container
    .buttons-container
    a
     {
    width: auto;
  }

  .shop-showcase .shop-showcase-swiper .swiper-image {
    width: 320px;
    z-index: 2;
  }

  .shop-showcase .shop-showcase-swiper .slide-1 {
    justify-content: start;
    padding: 0 5% 0 5%;
  }

  .shop-showcase .shop-showcase-swiper .slide-1 .text-container {
    width: 332px;
    margin-top: 0;
  }

  .banner-container {
    display: flex;
    justify-content: center;
    align-items: start;
    background-color: #742384;
    border-radius: 24px;
    position: relative;
    margin: 0 5%;
    height: 196px;
    padding: 0;
  }
  .banner-comercios {
    max-width: 50%;
    color: white;
    z-index: 1;
    padding: 0 40px;
  }

  .banner-comercios h1,
  .banner-comercios h1 span {
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.18px;
  }

  .banner-comercios p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: rgba(255, 255, 255, 0.8);
  }

  .banner-container button {
    background-color: #10cbb4;
    color: white;
    border: none;
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.15px;
    cursor: pointer;
    margin-top: 10px;
    width: auto;
  }

  .banner-img {
    position: absolute;
    min-width: 240px;
    min-height: 240px;
    z-index: 2;
    right: 5%;
    bottom: 0;
    object-fit: cover;
  }

  .banner-container {
    margin: 0 40px;
  }

  .shop-showcase .shop-showcase-swiper .text-container {
    width: 535px;
    gap: 15px;
  }

  .shop-showcase .shop-showcase-swiper .text-container .buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: auto;
  }

  .shop-showcase .shop-showcase-swiper .swiper-pagination {
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    width: fit-content;
    padding: 3.5% 0;
    z-index: 10;
  }

  .slide-1 {
    background-image: url("../img/first-background.png");
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
  }

  .shop-showcase .shop-showcase-swiper .swiper-slide {
    flex-direction: row;
    height: 384px;
    margin-top: 0px;
  }

  .shop-showcase .shop-showcase-swiper .text-container .title {
    font-size: 24px;
    line-height: 100%;
  }

  .shop-showcase .shop-showcase-swiper .slide-1 .text-container {
    margin-top: auto;
    margin-bottom: 5%;
  }

  .slider__item_recargas {
    height: 424px;
    width: 208px;
  }

  .tutorial-nav {
    left: -22%;
    width: calc(144%);
  }

  .dm-width {
    width: 208px;
    margin: 0 auto;
    position: relative;
    left: 10px;
  }

  .tutorial-next,
  .tutorial-prev {
    width: 40px;
    height: 40px;
  }

  .number-step {
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #69607b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
  }

  .rubros-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.18px;
    margin-bottom: 20px;
  }

  .slider__item_rubro {
    min-width: 224px;
    min-height: 168px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
  }

  @media (max-width: 1023px) {
    .shop-showcase .shop-showcase-swiper .swiper-pagination {
      position: absolute;
      bottom: 0;
      left: auto;
      right: 0;
      padding: 0 5% 2.5% 0;
      width: auto;
    }

    .shop-showcase .shop-showcase-swiper .showcaseSlider-nav {
      display: none;
    }

    .feature-showcase .feature-showcase-swiper .swiper-pagination {
      margin-top: 30px;
      position: relative;
      padding: 0 0 2.5% 50%;
      text-align: right;
      width: fit-content;
    }

    .feature-showcase .feature-showcase-swiper .showcaseSlider-nav {
      display: none;
    }

    .hide_desktop_ask {
      display: none;
    }

    .hide_phone_ask {
      display: block;
    }
  }
}

@media (max-width: 991px) {
  .shop-showcase {
    padding-top: 0;
  }
  /* 
  .align-swiper-servicios {
    flex-direction: row !important;
  } */

  .hide_desktop_ask {
    display: block;
  }

  .hide_phone_ask {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .tutorial-nav {
    left: -25%;
    width: calc(150%);
  }
  .feature-showcase .feature-showcase-swiper .swiper-pagination {
    position: relative;
    bottom: 0;
    left: 0;
    width: fit-content;
    padding: 3.5% 0;
    z-index: 10;
  }

  .shop-showcase .shop-showcase-swiper .slide-1 .text-container {
    width: 535px;
    margin-top: 0;
  }

  .banner-img {
    position: absolute;
    min-width: 338px;
    min-height: 338px;
    z-index: 2;
    right: 5%;
    bottom: 0;
    object-fit: cover;
  }

  .banner-comercios h1,
  .banner-comercios h1 span {
    font-size: 34px;
    font-weight: 700;
    line-height: 36px;
  }

  .banner-comercios p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5;
    color: rgba(255, 255, 255, 0.8);
  }

  .banner-container {
    height: 284px;
  }
  .shop-showcase .shop-showcase-swiper .swiper-slide {
    height: 496px;
  }

  .banner-img {
    right: 10%;
  }

  .banner-comercios {
    max-width: 50%;
    padding: 0 96px;
  }

  .hide_desktop_ask {
    display: none;
  }

  .hide_phone_ask {
    display: block;
  }
  .number-step {
    min-width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #fff;
    color: #69607b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-right: 24px;
  }

  .swiper-slide img {
    max-width: 538px !important;
  }
  .shop-showcase .shop-showcase-swiper .slide-2,
  .shop-showcase .shop-showcase-swiper .slide-3 {
    justify-content: space-evenly;
    padding: 0;
  }

  .shop-showcase .shop-showcase-swiper .text-container .title {
    font-size: 48px;
    line-height: 56px;
  }

  .shop-showcase .shop-showcase-swiper .swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0 2.5% 50%;
  }

  .shop-showcase .shop-showcase-swiper .showcaseSlider-nav {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 5% 1.5% 20%;
  }

  .shop-showcase .shop-showcase-swiper .showcaseSlider-nav .showcaseSlider-prev,
  .shop-showcase
    .shop-showcase-swiper
    .showcaseSlider-nav
    .showcaseSlider-next {
    margin: 0 0.4vw;
  }

  .feature-showcase .feature-showcase-swiper .swiper-pagination {
    margin-top: 30px;
    position: relative;
    padding: 0 0 2.5% 50%;
  }

  .feature-showcase .feature-showcase-swiper .showcaseSlider-nav {
    position: absolute;
    bottom: 0;
    right: 10%;
  }

  .feature-showcase
    .feature-showcase-swiper
    .showcaseSlider-nav
    .showcaseSlider-prev,
  .feature-showcase
    .feature-showcase-swiper
    .showcaseSlider-nav
    .showcaseSlider-next {
    margin: 0 0.4vw;
  }

  .rubros-title {
    font-size: 34px;
    line-height: 36px;
  }

  .slider__item_rubro {
    width: 304px;
    height: 236px;
    min-height: 236px;
    min-width: 304px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
  }

  .slider__item_recargas {
    height: 541px;
    width: 266px;
  }

  .dm-width {
    width: 266px;
    margin: 0 auto;
    position: relative;
    left: 10px;
  }

  .tutorial-next,
  .tutorial-prev {
    width: 52px;
    height: 52px;
  }

  .tab-title {
    font-size: 34px;
  }
}

@media (min-width: 1440px) {
  .text-container-benefits {
    margin-top: 0;
    margin-left: 85px;
  }

  .banner-container {
    margin: 0 80px;
  }

  .content-wrapper {
    padding: 0 80px;
  }
  .shop-showcase .shop-showcase-swiper .showcaseSlider-nav {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10% 1.5% 20%;
  }

  .rubros-title {
    font-size: 48px;
    line-height: 56px;
  }

  .slider__item_rubro {
    width: 410px;
    height: 319px;
    min-height: 319px;
    min-width: 410px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
  }

  .dm-width {
    width: 337px;
  }

  .slider__item_recargas {
    font-size: 100px;
    color: rgba(255, 255, 255, 0.7);
    height: 686px;
    width: 337px;
  }
}

/* Mobile Tutorial Swipers */
.swiper-title-paquetes-tigo,
.swiper-title-paquetes-entel {
  margin-top: 20px;
}

.swiper-title-paquetes-tigo p,
.swiper-title-paquetes-entel p {
  color: #69607b;
  font-size: 16px;
  line-height: 24px;
}

.purple-background .swiper-title-paquetes-tigo p,
.purple-background .swiper-title-paquetes-entel p {
  color: #fff;
}

.swiper-paquetes-tigo .swiper-slide img,
.swiper-paquetes-entel .swiper-slide img {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.swiper-paquetes-tigo .swiper-pagination,
.swiper-paquetes-entel .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  margin-top: 20px !important;
}

.swiper-paquetes-tigo .swiper-pagination-bullet,
.swiper-paquetes-entel .swiper-pagination-bullet {
  background-color: #f0cef5;
  opacity: 1;
}

.swiper-paquetes-tigo .swiper-pagination-bullet-active,
.swiper-paquetes-entel .swiper-pagination-bullet-active {
  background-color: #a35aad !important;
}

.purple-background .swiper-paquetes-tigo .swiper-pagination-bullet-active,
.purple-background .swiper-paquetes-entel .swiper-pagination-bullet-active {
  background-color: #a35aad !important;
}

/* Video Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
 
.video-modal.show {
  display: flex;
  opacity: 1;
}
 
.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 450px;
  background: transparent;
  transform: scale(0.85);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: auto;
  height: 100%;
}
 
.video-modal.show .video-modal-content {
  transform: scale(1);
}
 
.video-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* 9:16 aspect ratio for shorts */
  height: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  background: #000;
}
 
.video-responsive iframe,
.video-responsive lite-youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
 
.video-modal-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  z-index: 10002;
  padding: 0;
  padding-bottom: 4px; /* Optical alignment for × */
}
 
.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg) scale(1.1);
  color: #10cbb4;
  border-color: #10cbb4;
}
 
@media (max-width: 768px) {
  .video-modal-content {
    width: 85%;
    max-width: 320px;
  }
  .video-modal-close {
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
}