


.beneficios-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .beneficios-item {
    width: 14.844vw;
    /* height: 14.844vw; */
    height: auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    margin-left: 0vw;
    margin-right: 1vw;
    margin-bottom: 1.3vw;
    cursor: pointer;
  }
  .box_flecha_all_contact{
    display: none;
  }
  @media (max-width: 768px) {
    .beneficios-item {
      width: 50%;
    }
  }
  .beneficios-item:hover{
    transform: scale(1.06);
    transition: 0.7s;
  }
.marco_iten_beneficio{
    width: 5.958vw;
    height: 5.958vw;
    /* background: #db0e0e; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #db0e0e;
    margin-bottom: -2.74vw;
    background: white;
}
.marco_iten_beneficio_bg_active{
    background: #db0e0e;
}
.marco_iten_beneficio_bg_hover{
  background: #db0e0e;
}
.title_puntos{
    color: black;
    font-size: 2.083vw;
}
.box_all_title{
    padding: 2vw 4vw 1vw;
}

.card_iten_punto{
    width: 25vw;
    border-radius: 10px;
    box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.16), inset 0 0 1px 0 rgba(0, 0, 0, 0.16);
    border: none;
}
.icon_iten_hoy_punto{
    width: 2.5vw;
}
.title_cart_iten{
    font-size: 1.563vw;
    color: black;
    font-family: 'Stem-ExtraLight';
}
.card_header_iten{
    background: white;
    border: none;
}
.text_hora_iten{
    font-size: 1.302vw;
    color: black;
    text-align: end;
    width: 100%;
    font-family: 'Stem-Light';
}
.num_iten{
    font-size: 1.302vw;
    color: black;
    width: 100%;  
    font-family: 'Stem-Light';
}
.text_punto{
    font-size: 1.302vw;
    color: black;
    font-family: 'Stem-Light';
}
.box_all_footer_iten_car{
    display: flex;
    justify-content: space-around;
    margin-top: 1.1vw;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 1.7vw;
}
.box_all_footer_iten_car_2{
    display: flex;
    /* justify-content: space-around; */
    margin-top: 1.1vw;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 1.7vw;
    align-items: center;
}
.box_content_all{
  padding: 0vw 7.694vw 4vw;
}
.title_mi_tarjeta{
    font-size: 1.563vw;
    color: black;
}
.text_saldo{
    font-size: 3.125vw;
    color: black;
    text-align: initial;
    font-family: 'Stem-Medium';
}
.text_num_max{
    font-size: 1.302vw;
    color: #979797;
    font-family: 'Stem-Light';
}
#your-div-id {
    /* overflow-y: scroll; */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #7d7d7d #cbcbcb;
    width: 100%;
    max-height: 38.542vw;
  }
  
  #your-div-id::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
  }
  
  #your-div-id::-webkit-scrollbar-track {
    background-color: #cbcbcb;
      border-radius: 4px;
  }
  
  #your-div-id::-webkit-scrollbar-thumb {
    background-color: #7d7d7d;
      border-radius: 4px;
  }

  .box_all_cart_tarjeta{
    width: 49.323vw;
    height: 14.219vw;
    padding: 1.7vw;
    background: #f8f8f8;
    border-radius: 10px;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #f8f8f8;
  }
  .title_table_resume{
    font-size: 2.604vw;
    color: black;
    text-align: inherit;
    /* font-family: 'Stem-Medium'; */
  }
  .table-dark {
    --bs-table-bg: #db0e0e;
   
}
  .img_tarjeta{
    width: 16.146vw;
  }
  .form_input_num_tarjeta{
    height: 3.646vw;
    border-radius: 6px;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
    border: solid 1px #dcdcdc;
  }
  .btn_sent_num_tarjeta{
    width: 18.49vw;
    height: 3.385vw;
    background: #db0e0e;
    color: white;
    font-size: 1.302vw;
    border-radius: 5px;
    margin-top: 1.823vw;
  }
  .btn-light:hover {
    background: #db0e0e;
    color: white;
    font-size: 1.302vw;
    border-radius: 5px;
    margin-top: 1.823vw;
}

/*Estilos Carrusel*/

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


.slide-container{
  /* max-width: 1120px;
  width: 100%;
  padding: 40px 0; */
  /* max-width: 81vw;
    width: 100%;
    padding: 32px 0; */
    max-width: 89vw;
    width: 100%;
    padding: 32px 0;
    padding-top: 3vw;
    margin-top: 0vw;
}
.slide-content{
  margin: 0 40px;
  overflow: hidden;
  /* border-radius: 25px; */
}

.swiper-button-next, .swiper-button-prev {
    top: 58%;
}
.card{
  /* border-radius: 25px;
  background-color: #FFF; */
  background-color: #FFF;
    border-radius: 6px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

    background-color: #FFF;
    border-radius: 6px;
    box-shadow: none;
    border: none;
}
.title_iten_binificio{
    font-size: 2.604vw;
    color: rgb(255, 255, 255);
    font-family: 'Stem-Medium';
    font-weight: 400;
    margin-top: 3vw;
}
.box_flecha_pagina_benefici{
  width: 15%;
  display: flex;
}
.box_flecha_pagina_benefici_2{
  width: 15%;
    display: flex;
    justify-content: flex-end;
}
.box_all_paginate_main_benefi{
  display: flex;
    justify-content: end;
    margin-top: 2vw;
    padding-right: 4.7vw;
}
.image-content,
.card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3vw 2vw;
    height: auto;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 26.667vw;
}
.image-content{
  /* position: relative;
  row-gap: 5px;
  padding: 25px 0; */
  position: relative;
  row-gap: 0;
  padding: 0 0;
}
.overlay{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /* background-color: #4070F4; */
  border-radius: 0;
}
/* .overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: #4070F4;
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #FFF;
} */
.card-image{
    position: relative;
    height: auto;
    width: 100%;
    display: contents;
    border-radius: 0;
    background: #FFF;
    padding: 0vw;
}
.card-image .card-img{
  /* height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #4070F4; */
  height: auto;
    width: 3.125vw;
    object-fit: cover;
    border-radius: 0;
    border: none;
}
.name{
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.description{
    font-family: 'Stem-Light';
    font-size: 1.563vw;
    text-align: initial;
    color: rgb(255, 255, 255);
}
.button{
  border: none;
  font-size: 16px;
  color: #FFF;
  padding: 8px 16px;
  background-color: #4070F4;
  border-radius: 6px;
  margin: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button:hover{
  background: #265DF2;
}

.swiper-navBtn{
  color: #000000;
  transition: color 0.3s ease;
  font-weight: bold;
}
.swiper-navBtn:hover{
  color: #000000;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
    font-size: 3vw;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: #000000;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: #000000;
}

@media screen and (max-width: 768px) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }
}
/*End Estilos Carrusel*/
@media(max-width:900px){
  .image-content, .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3vw 2vw;
    height: auto;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 71.759vw;
}

  .card-content {
      height: 46.295vw;
  }

  .marco_iten_beneficio {
      width: 17.407vw;
      height: 17.407vw;
      /* background: #db0e0e; */
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #db0e0e;
      margin-bottom: -11.74vw;
      background: white;
  }
  .card-image .card-img {
      height: auto;
      width: 8.426vw;
      object-fit: cover;
      border-radius: 0;
      border: none;
  }
  .title_iten_binificio {
      font-size: 6.944vw;
      color: rgb(255, 255, 255);
      font-family: 'Stem-Medium';
      font-weight: 400;
      margin-top: 9vw;
  }

  .description {
      font-family: 'Stem-Light';
      font-size: 4.167vw !important;
      text-align: initial;
      color: rgb(255, 255, 255);
      margin-top: 1vw;
  }

  .marco_iten_beneficio_bg_active{
      background: #db0e0e;
  }
  .box_content_all {
      padding: 0vw 4.694vw 4vw;
  }
  .beneficios-item {
      width: 48%;
  }
  .box_flecha_all_contact{
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: space-between;
    z-index: 11;
    margin-top: 27vw;
    padding: 4vw;
}
.icon_flecha_conta{
  width: 5.907vw;
}
.swiper-button-prev {
  left: 3vw;
}
.swiper-button-next {
  right: 3vw;
}
.box_all_paginate {
  display: flex;
  align-items: center;
  width: 6vw;
  width: 27.833vw;
  height: 7.604vw;
  justify-content: center;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
}
.icon_flecha_pagi {
  width: 1.817vw;
  cursor: pointer;
}
.text_paginate_benef {
  padding: 0vw 1.4vw;
  border-left: 1px solid #cdcdcd;
  border-right: 1px solid #cdcdcd;
  margin-bottom: 0;
}
.title_table_resume {
  font-size: 5.604vw;
  color: black;
  text-align: inherit;
  /* font-family: 'Stem-Medium'; */
  margin-bottom: 2vw;
}
}