@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@100;300;700&family=Open+Sans:wght@400;800&display=swap");

/*----------------------------------------*/
/*----------------FUENTES-----------------*/
@font-face {
  font-family: "Open Sans Regular";
  src: url(fonts/OpenSans-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Open Sans ExtraBold";
  src: url(fonts/OpenSans-ExtraBold.ttf) format("truetype");
}

@font-face {
  font-family: "Open Sans CondensedRegular";
  src: url(fonts/OpenSans_Condensed-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Open Sans CondensedBold";
  src: url(fonts/OpenSans_Condensed-Bold.ttf) format("truetype");
}

@font-face {
  font-family: "Geomanist-WZ-OT-Bold";
  font-style: normal;
  src: url("./fonts/Geomanist-Bold-WZ.otf") format("opentype");
}
@font-face {
  font-family: "Geomanist-WZ-OT-Book";
  font-style: normal;
  src: url("./fonts/Geomanist-Book-WZ.otf") format("opentype");
}
@font-face {
  font-family: "Geomanist-WZ-OT-Light";
  font-style: normal;
  src: url("./fonts/Geomanist-Light-WZ.otf") format("opentype");
}
@font-face {
  font-family: "Geomanist-WZ-OT-Medium";
  font-style: normal;
  src: url("./fonts/Geomanist-Medium-WZ.otf") format("opentype");
}
@font-face {
  font-family: "Geomanist-WZ-OT-Regular";
  font-style: normal;
  src: url("./fonts/Geomanist-Regular.otf") format("opentype");
}

/*----------------------------------------*/
/*---------------GENÉRICOS----------------*/
/* Ali express Product page */
html {
  scroll-behavior: smooth;
}

.modificador-landing {
  background-color: #ffffff;
  margin: auto;
}

.main_content-on a {
  text-decoration: underline !important;
  color: inherit !important;
}
.main_content-on {
  /* padding-top: 56px; */
  position: relative;
  /* max-width: 1600px; */
  /* margin: auto; */
}

.migas {
  display: none;
}

.free-label {
  position: absolute;
  background-color: #152a69;
  color: white;
  border-radius: 99px;
  width: 97px;
  height: 21px;
  text-align: center;
  left: 0;
  right: 0;
  top: 92px;
  margin: auto;
  font-size: 14px;
  font-weight: 700;
  font-family: "Geomanist-WZ-OT-Bold";
  line-height: 14px;
  padding: 4px;
}

.break-tablet-3 {
  display: none;
}

.break {
  /* display: inline-block; */
  width: 100%;
}

.break-mobile {
  display: inline-block;
  width: 100%;
}

.break-tablet-2 {
  display: inline;
}

.break-br-tablet {
  display: none;
}
.break-br-desktop {
  display: none;
}
.break-br-mobile {
  display: table-column;
}

.break-br-mobile-2 {
  display: initial;
}

/*----------------------------------------*/
/*--------------BANNER HERO---------------*/
.on__product__banner-hero {
  background-color: #ffffff;
  padding: 95px 0px 0px;
}

.on___wrapper {
  max-width: 1200px;
  margin: auto;
  padding-bottom: 0px;
}

.on__product__banner-hero h1 {
  font-size: 34px;
  line-height: 37.4px;
  font-weight: 700;
  font-family: "Geomanist-WZ-OT-Book";
  color: #152a69;
  text-align: center;
}

.on__product__banner-hero-feature-wrapper h1 {
  display: none;
}

.on__product__banner-hero__container-images-item-text {
  display: none;
}

.on__product__banner-hero h1 .bold {
  font-family: "Geomanist-WZ-OT-Bold";
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #152a69;
}

.on__product__banner-hero h1 .underline {
  position: relative;
  display: inline-block;
}

.on__product__banner-hero h1 .underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px; /* Ajusta la posición vertical del subrayado */
  height: 5px; /* Grosor del subrayado */
  background-color: #b5eddb; /* Tu color específico */
  border-radius: 5px;
}

.card-img-tablet {
  display: none;
}

.on__product__banner-hero__container-images {
  position: relative;
  margin-top: -31px;
}
.background-image-banner-hero {
  display: none;
}
.background-image-banner-hero-tablet {
  display: none;
}

.background-image-banner-hero-mobile {
  position: absolute;
  top: 234px;
  bottom: 0;
  left: 31px;
  /* right: 0; */
  margin: auto;
  padding-right: 50px;
  display: block;
}

.card-img {
  margin-top: -50px;
  margin-bottom: -50px;
}

.card-img-desktop {
  display: none;
}

.on__product__banner-hero__container-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px 24px 0px;
  margin-bottom: 25px;
}

.container-single-feature {
  border-radius: 99px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  color: #152a69;
  height: 60px;
  z-index: 4;
}

.container-single-feature p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  font-family: "Geomanist-WZ-OT-Book";
  color: #152a69;
}
.container-single-feature p .bold {
  font-weight: 700;
  font-family: "Geomanist-WZ-OT-Bold";
}

.container-single-feature .container-diagonal {
  border-radius: 99px;
  background-color: #e8927c;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
}

.on__product__banner-hero__container-features-columns {
  display: flex;
  justify-content: center;
  padding: 0px 26px 0 40px;
  gap: 15px;
}

.on__product__banner-hero__container-features-columns
  .container-single-feature-columns {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  height: 85px;
  /* justify-content: space-between; */
}

.on__product__banner-hero__container-features-columns
  .container-single-feature-columns
  p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  font-family: "Geomanist-WZ-OT-Book";
  text-decoration: underline;
  color: #152a69;
  margin-bottom: 7px;
  text-align: center;
}

.on__product__banner-hero__container-features-columns-desktop {
  display: none;
}

.container-single-feature .container-diagonal-arrow {
  background-color: #e8927c;
  border-radius: 99px;
  width: 36px;
  min-width: 36px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.container-single-feature .container-diagonal-arrow .diagonal-arrow-white {
  display: none;
}

.on__product__banner-hero__container-features-columns
  .container-diagonal-arrow {
  border-radius: 99px;
  padding: 10px 15px;
  border: 1px solid;
  color: #152a69;
  width: 36px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-diagonal-arrow span {
  display: none;
}

@media (max-width: 1024px) {
  .on__product__banner-hero__recordatorio-container {
    display: none;
  }
}

@media (max-width: 381px) {
  .on__product__banner-hero h1 {
    padding: 0 70px;
  }
}

@media (min-width: 382px) and (max-width: 443px) {
  .on__product__banner-hero h1 {
    padding: 0 100px;
  }
}

@media (min-width: 444px) {
  .on__product__banner-hero h1 {
    padding: 0 130px;
  }
}

@media (min-width: 599px) and (max-width: 698px) {
  .on__product__banner-hero h1 {
    padding: 0 180px;
  }
}

@media (min-width: 699px) {
  .on__product__banner-hero h1 {
    padding: 0 210px;
  }
}

/*----------------------------------------*/
/*--------------RECORDATORIO--------------*/
.on__product__recordatorio {
  padding: 0 15px;
}
.on__product__recordatorio-container {
  border-radius: 16px;
  border: 1px solid #152a6933;
}
.on__product__recordatorio-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #152a6933;
}
.on__product__recordatorio__img-container {
  position: absolute;
  left: 15px;
  top: 15px;
  bottom: 15px;
}
.on__product__recordatorio__img-container img {
}
.on__product__recordatorio-header h2 {
  font-weight: 700;
  line-height: 23.4px;
  text-align: center;
  font-size: 18px;
  font-family: "Geomanist-WZ-OT-Book";
  color: #152a69;
}
.on__product__recordatorio-body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.on__product__recordatorio-body p {
  font-weight: 800;
  line-height: 22.4px;
  text-align: center;
  font-size: 16px;
  font-family: "Geomanist-WZ-OT-Light";
  color: #152a69;
  margin: 15px 0;
  padding: 0 40px;
}

/*----------------------------------------*/
/*------------CARACTERISTICAS-------------*/
.on__product__cards-posibilities {
  padding: 57px 0;
}

.on__product__cards-posibilities .underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.on__product__cards-posibilities .bold {
  font-weight: 800;
  font-family: "Geomanist-WZ-OT-Book";
  color: #152a69;
}

.on__product__cards-posibilities__header {
}
.on__product__cards-posibilities__header h2 {
  font-weight: 700;
  font-size: 27px;
  line-height: 32.4px;
  text-align: center;
  font-family: "Geomanist-WZ-OT-Book";
  color: #152a69;
  margin-bottom: 36px;
}
.on__product__cards-posibilities__header p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
  font-family: "Geomanist-WZ-OT-Light";
  color: #152a69;
  margin-bottom: 20px;
}

.on__product__cards-posibilities__wrapper-items {
  padding: 0 16px;
  gap: 15px;
  display: flex;
  flex-direction: column;
}
.on__product__cards-posibilities__body {
  overflow: scroll;
}
.on__product__cards-posibilities__body::-webkit-scrollbar {
  width: 8px; /* Ancho del scrollbar */
}
::-webkit-scrollbar-thumb {
  background-color: white; /* Color del scroll (igual que el fondo) */
  border-radius: 0px; /* Opcional: bordes redondeados */
}
.on__product__cards-posibilities__body::-webkit-scrollbar-track {
  background-color: white; /* Fondo del área de scroll */
}
.on__product__cards-posibilities__body-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  padding: 0 15px;
}

.como-quieras .on__product__cards-posibilities__body-wrapper {
  flex-direction: column;
}

.on__prouduct__cards-posibilities__item {
  border: 1px solid #152a6933;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  min-width: 150px;
  height: 210px;
  gap: 18px;
  cursor: pointer;
}

.como-quieras .on__prouduct__cards-posibilities__item {
  width: 100%;
  height: 60px;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 10px 0 30px;
}

.on__prouduct__cards-posibilities__item:hover {
  background-color: #d9f5ec;
}
.on__product__container-text-img {
  text-align: center;
}
.on__prouduct__cards-posibilities__item p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
  font-family: "Geomanist-WZ-OT-Light";
  color: #152a69;
  margin: 17px 0 0 0;
}

.como-quieras .on__prouduct__cards-posibilities__item p {
  margin: 0;
  font-weight: 500;
  font-family: "Geomanist-WZ-OT-Book";
  font-size: 18px;
}
.on__prouduct__cards-posibilities__item-img {
}
.on__prouduct__cards-posibilities__item-button {
  border: 1px solid #152a6933;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  width: 30px;
  height: 30px;
}
.on__prouduct__cards-posibilities__item-button img {
}
.on__product__cards-posibilities__modal {
  display: none;
  position: fixed;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;
}
.on__product__cards-posibilities__modal-wrapper {
  width: 100%;
}
.on__product__cards-posibilities__modal-header {
  background-color: #d9f5ec;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
}
.on__product__cards-posibilities__modal-header h2 {
  font-size: 18px;
  line-height: 23.4px;
  font-weight: 500;
  text-align: center;
  font-family: "Geomanist-WZ-OT-Book";
  color: #152a69;
  margin-bottom: 2px;
}

.on__product__cards-posibilities__modal-header-button {
  position: absolute;
  left: 16px;
  width: 45px;
  height: 30px;
  background-color: transparent;
  border-radius: 15px;
  border: 1px solid #152a6933;
  display: flex;
  justify-content: center;
  align-items: center;
}

.on__product__card-posibilities__modal-body-items {
  margin-top: 26px;
  padding: 0 15px;
  gap: 15px;
  display: flex;
  flex-direction: column;
}

.on__product__cards-posibilities__modal-header-button2 {
  display: none;
}

.on__product__cards-posibilities__modal-body {
  margin-top: 26px;
  padding: 0 15px;
  gap: 15px;
  display: flex;
  flex-direction: column;
}
.on__product__cards-posibilities__modal-body-item {
  display: flex;
  border-radius: 16px;
  border: 1px solid #152a6933;
  padding: 14px;
  gap: 12px;
  min-height: 90px;
}
.on__product__cards-posibilities__modal-body-item-left {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  /* background-color: #d1f3e8; */
  width: 60px;
  min-width: 60px;
}
.on__product__cards-posibilities__modal-body-item-left img {
}
.on__product__cards-posibilities__modal-body-item-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.on__product__cards-posibilities__modal-body-item-right h3 {
  font-size: 21px;
  line-height: 26.25px;
  font-weight: 600;
  color: #152a69;
  font-family: "Geomanist-WZ-OT-Book";
  margin-bottom: 8px;
}
.on__product__cards-posibilities__modal-body-item-right p {
  font-size: 16px;
  line-height: 22.4px;
  font-weight: 600;
  color: #445587;
  font-family: "Geomanist-WZ-OT-Light";
  margin-bottom: 0;
  padding-right: 20px;
}

.on__product__cards-posibilities__modal-body-item__only-desktop-order {
  display: none;
}

.on__product__cards-posibilities__modal-body-item__not-desktop-order {
  display: flex;
  border-radius: 16px;
  border: 1px solid #152a6933;
  padding: 14px;
  gap: 12px;
  min-height: 90px;
}

.on__product__cards-posibilities__column-desktop {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

@media (max-width: 1024px) {
  .on__product__cards-posibilities__first-column {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
  }
}

.on__product__cards-posibilities__second-column {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

/*----------------------------------------*/
/*---------------CADUCIDAD----------------*/
.on__product__new-design .mobile {
  display: block;
}
.on__product__new-design .tablet {
  display: none;
}
.on__product__new-design .desktop {
  display: none;
}

.on__product__new-design-container-img {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 39px;
}

.on__product__new-design-container-img img {
}

.on__product__new-design-container-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.on__product__new-design-container-text p {
  font-size: 16px;
  font-weight: 800;
  line-height: 22.4px;
  text-align: center;
  color: #445587;
}

.on__product__new-design-container-text p .bold {
  font-weight: 500;
  font-family: "Geomanist-WZ-OT-Book";
}

.on__product__new-design-container-text .second-paragraph {
  margin-top: 60px;
}
.second-paragraph {
  text-align: center;
}

@media (max-width: 756px) {
  .on__product__new-design-container-text {
    padding: 0 50px;
  }
}