@charset "UTF-8";
/* -------------------------------------------------------------------
 * ## Design System
 * ------------------------------------------------------------------- */
/* --- Colors ---*/
/* --- Typography ---*/
/* -------------------------------------------------------------------
 * ## Reset
 * ------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li,
figure {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

button {
  padding: 0;
  border: none;
  padding-block: 0;
  padding-inline: 0;
  cursor: pointer;
  display: block;
}

a:active {
  color: unset;
}

ul {
  list-style: none;
}

@font-face {
  font-family: "SoraVariable";
  src: url("../fonts/Sora/Sora-VariableFont_wght.woff2") format("woff2 supports variations"), url("../fonts/Sora/Sora-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 1000;
}
/* @font-face {
     font-family: "SoraVariable";
     src: url("Sora-VariableFont_wght.woff2") format("woff2 supports variations"),
          url("Sora-VariableFont_wght.woff2") format("woff2-variations");
     font-weight: 100 1000;
} */ /*  */ /* May + alt + a */
.bodyP {
  background-color: #F7F9FD;
  font-family: "SoraVariable", sans-serif;
}

@media (width < 600px) {
  .bodyP:has(.navBottom) > .mainP > .articleP {
    margin-bottom: 70px;
  }
}

.mainP {
  display: flex;
  justify-content: center;
  margin-top: 55px;
}
@media (width < 600px) {
  .mainP.addNavBottom .navBottom {
    display: flex;
  }
}
@media (width < 600px) {
  .mainP.addNavBottom .articleP {
    margin-bottom: 70px;
  }
}
.mainP .articleP {
  width: 100%;
  max-width: 600px;
}
.mainP .articleP .containerP {
  padding: 10px 10px 30px;
  display: flex;
  flex-direction: column;
  row-gap: 19px;
  min-height: calc(100dvh - 55px);
  height: 100%;
}
@media (width > 600px) {
  .mainP .articleP .containerP {
    min-height: unset;
    padding: 10px 0 30px;
  }
}
.mainP .articleP .containerP > button.btnPrimary {
  margin-top: auto;
}

.articleP:has(> header.headerTipster) > .containerP {
  min-height: unset !important;
  height: unset;
  padding: 10px;
}
@media (width > 600px) {
  .articleP:has(> header.headerTipster) > .containerP {
    padding: 10px 0;
  }
}

.scrollH {
  display: flex;
  width: 100%;
  position: relative;
}
.scrollH div.scroll {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  display: flex;
  align-items: center;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
@media (width < 600px) {
  .scrollH div.scroll::-webkit-scrollbar {
    display: none;
  }
}
.scrollH::before {
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
  height: 100%;
  width: 40px;
  right: 0;
  top: 0;
  position: absolute;
  display: block;
  height: 28px;
}

/* --- ocultar o mostrar ---*/
.showP {
  display: flex !important;
}

.hideP {
  display: none !important;
}

/* --- text blue link ---*/
.textLink {
  color: #3B64F6 !important;
  cursor: pointer;
  display: inline-flex;
  font-family: "SoraVariable", sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: inherit;
  letter-spacing: 0.22px;
  line-height: normal;
}
.textLink p {
  font-size: 11px;
  font-weight: 300;
  color: inherit;
  letter-spacing: 0.22px;
  line-height: normal;
  font-family: "SoraVariable", sans-serif;
}
.textLink:active, .textLink:hover {
  color: #0B0D80;
}
.textLink:active p, .textLink:hover p {
  color: #0B0D80;
}

/* <span class="returnArrow"><i class="icon-arrow-left"></i> <p>Volver y continuar con la compra</p></span> */
.returnArrow {
  height: 34px;
  display: flex;
  align-items: center;
  -moz-column-gap: 13px;
       column-gap: 13px;
  cursor: pointer;
}
.returnArrow i {
  border-radius: 15px;
  background-color: #3B64F6;
  color: #FFFFFF;
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
  aspect-ratio: 1/1;
  font-weight: 600;
  font-size: 16px;
  padding: 7px;
}
.returnArrow:active i, .returnArrow:hover i {
  background-color: #0B0D80;
}

/* --- botton texto dentro parrafo ---*/
hr {
  height: 1px;
  border-width: 0;
  background-color: #f1f1f1;
  width: 100%;
  margin: 0;
}

span.spanButton {
  color: #3A29F5;
  cursor: pointer;
}

i {
  color: #2A2E30;
  line-height: normal;
}

i.icon-file_tray {
  font-size: 22px !important;
}

i.icon-close,
i.icon-close-big {
  font-size: 12px;
  color: #2A2E30;
  background-color: #D8D8D8;
  border-radius: 50%;
  font-weight: 600;
  aspect-ratio: 1/1;
}

i.icon-information-s,
i.icon-information {
  color: #2A2E30;
  display: flex;
  align-items: center;
  border-radius: 50%;
  background-color: #ffa81c;
  line-height: normal;
  font-size: 14px;
  padding: 2px;
  font-weight: 700;
}

i.icon-next-right {
  font-size: 15px;
}

i.icon-check-s,
i.icon-check-700,
i.icon-check,
i.icon-check-big {
  background-color: #26A923;
  color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  display: inline-flex;
}

i.icon-error-s,
i.icon-error-big,
i.icon-error-700,
i.icon-error {
  background-color: #A92323;
  color: #FFFFFF;
  border-radius: 10px;
  box-sizing: border-box;
}

i.icon-question-400.borderCircle,
i.icon-question-b.borderCircle,
i.icon-question.borderCircle {
  border-radius: 50px;
  border: 1px solid #2A2E30;
  line-height: normal;
}

i.icon-arrow-right.circleModal {
  background-color: #3B64F6;
  border-radius: 50%;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 12px;
  padding: 6px;
  margin: 0;
}

/* --- Colors ---*/
.bgDanger {
  background-color: #A92323;
}

.cDanger {
  color: #A92323 !important;
}

.cAccent {
  color: #3A29F5 !important;
}

.cBlack {
  color: #2A2E30 !important;
}

/* --- Fonts ---*/
/*
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)
*/
p {
  color: #2A2E30;
  font-size: 12px;
  font-weight: 400;
  /*     line-height: 1.40; */
  font-family: "SoraVariable", sans-serif;
  line-height: normal;
}

.boldBlack24 {
  font-size: 24px;
  font-weight: 700;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.boldBlack22 {
  font-size: 22px;
  font-weight: 700;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.boldBlack18 {
  font-size: 18px;
  font-weight: 700;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.boldBlack16 {
  font-size: 16px;
  font-weight: 700;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.boldBlack14 {
  font-size: 14px;
  font-weight: 700;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.boldBlack12 {
  font-size: 12px;
  font-weight: 700;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.boldGrey10 {
  font-size: 12px;
  font-weight: 700;
  color: #828790;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.sBoldBlack20 {
  font-size: 20px;
  font-weight: 600;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.sBoldBlack18 {
  font-size: 18px;
  font-weight: 600;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.sBoldWhite18 {
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  font-family: "SoraVariable", sans-serif;
}

.sBoldBlack16 {
  font-size: 16px;
  font-weight: 600;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.sBoldBlack14 {
  font-size: 14px;
  font-weight: 600;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.sBoldBlack12 {
  font-size: 12px;
  font-weight: 600;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.sBoldBlack11 {
  font-size: 11px;
  font-weight: 600;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.sBoldGrey10 {
  font-size: 10px;
  font-weight: 600;
  color: #828790;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack16 {
  font-size: 16px;
  font-weight: 400;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.normalWhite14 {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack14 {
  font-size: 14px;
  font-weight: 400;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack13 {
  font-size: 13px;
  font-weight: 400;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack12 {
  font-size: 12px;
  font-weight: 400;
  color: #2A2E30;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack12Through {
  font-size: 12px;
  font-weight: 400;
  color: #2A2E30;
  line-height: 1.4;
  text-decoration: line-through;
  font-family: "SoraVariable", sans-serif;
}

.normalGrey12 {
  font-size: 12px;
  font-weight: 400;
  color: #828790;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalWhite12 {
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
  font-family: "SoraVariable", sans-serif;
}

.normalAccent12 {
  font-size: 12px;
  font-weight: 400;
  color: #3A29F5;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack11 {
  font-size: 11px;
  font-weight: 400;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.normalDanger10 {
  font-size: 10px;
  font-weight: 400;
  color: #A92323;
  text-decoration: line-through;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}

.normalBlack10 {
  font-size: 10px;
  font-weight: 400;
  color: #2A2E30;
  line-height: normal;
  font-family: "SoraVariable", sans-serif;
}

.normalGrey10 {
  font-size: 10px;
  font-weight: 400;
  color: #828790;
  line-height: normal;
  font-family: "SoraVariable", sans-serif;
}

.lightBlack12 {
  font-size: 12px;
  font-weight: 300;
  color: #2A2E30;
  font-family: "SoraVariable", sans-serif;
}

.lightBlack11 {
  font-size: 11px;
  font-weight: 300;
  color: #2A2E30;
  line-height: normal;
  font-family: "SoraVariable", sans-serif;
}

.lightWarning11 {
  font-size: 11px;
  font-weight: 300;
  color: #CA0015;
  letter-spacing: 0.22px;
  font-family: "SoraVariable", sans-serif;
}

.descriptionP {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: #2A2E30;
  letter-spacing: 0.024em;
  font-family: "SoraVariable", sans-serif;
}

/* --- animaciones ---*/
@keyframes arrowLink {
  0% {
    transform: translateX(0em);
  }
  50% {
    transform: translateX(0.2em);
  }
  100% {
    transform: translateX(0em);
  }
}
/* --- quitar marker de details ---*/
details summary {
  display: flex;
}
details summary::-webkit-details-marker {
  display: none;
}

i.icon {
  justify-content: center;
  align-items: center;
}

.headerP {
  background-color: #FFFFFF;
  height: 55px;
  box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}
@media (width > 600px) {
  .headerP {
    padding: 0;
  }
}

.innerHeaderP {
  width: 100%;
  max-width: 1550px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.innerHeaderP .logoHeaderP {
  width: 127px;
  display: flex;
  padding-left: 24px;
}
.innerHeaderP .logoHeaderP img {
  width: 100%;
  aspect-ratio: 32/5;
}
.innerHeaderP .navHeaderP {
  display: flex;
  padding: 15px 24px;
  background-color: transparent;
}
.innerHeaderP .navHeaderP img {
  aspect-ratio: 25/16;
  height: 12px;
}
.innerHeaderP .navHeaderP.hideP {
  display: none;
}

.headerP.legal .innerHeaderP {
  justify-content: center;
}
.headerP.legal .logoHeaderP {
  padding: 0;
}
.headerP.legal .logoHeaderP a {
  display: flex;
}

.headerTipster {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: 170px;
  width: 100%;
  padding: 10px;
  background-size: cover;
  overflow: hidden;
  /*     background-position: left bottom;
      background-image: linear-gradient(180deg, rgba(243, 243, 243, 0.00) 0%, rgba(0, 0, 0, 0.82) 61.4%), url(../../img/imgCrop-bg.jpg); */
}
@media (width >= 600px) {
  .headerTipster {
    border-radius: 0 0 12px 12px;
    padding: 0 20px;
  }
}
.headerTipster .backgroundP {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.headerTipster .backgroundP figure {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
}
.headerTipster .backgroundP figure img {
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  min-height: 100%;
  height: 100%;
  width: 100%;
  min-width: 100%;
}
.headerTipster .backgroundP:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(180deg, rgba(243, 243, 243, 0) 0%, rgba(0, 0, 0, 0.82) 61.4%);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.iHeaderTipster {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 100%;
  z-index: 1;
  /*    p{
        color: $sky;

     } */
}
.iHeaderTipster figure {
  border-radius: 50%;
  /*         border: 3px solid $primary; */
  width: 74px;
  height: 74px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.iHeaderTipster figure img {
  width: 100%;
  -o-object-position: 50%;
     object-position: 50%;
  min-height: 100%;
  min-width: 100%;
  height: 100%;
}
.iHeaderTipster .infoTipster {
  display: inline-block;
  color: #F7F9FD;
  /*         font-weight: 600;
          font-size: 1.125rem; */
  line-height: 1.2;
  /*  .lineV {
       margin: 0 0.2em;
   } */
}
.iHeaderTipster .infoTipster .nomTipster {
  font-size: 16px;
  line-height: 20px;
  text-overflow: ellipsis;
  padding: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.iHeaderTipster .infoTipster .nomPasarela {
  font-size: 14px;
  line-height: 1.6;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}
.iHeaderTipster .infoTipster p {
  color: #F7F9FD;
  font-size: 10px;
  line-height: 20px;
  padding-top: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.sectionProgressBar {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin: 14px 0;
  width: 100%;
  /*     .textProgress{
          display: flex;
          flex-direction: row;
          height: 25px;
          align-items: center;
          i{
              margin: 0 10px;
              font-size: 12px;

          }
      } */
}
.sectionProgressBar .textProgress {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sectionProgressBar .textProgress .innerTextProgress {
  display: flex;
  align-items: center;
}
.sectionProgressBar .textProgress .innerTextProgress i {
  margin: 0 10px;
  font-size: 12px;
}
.sectionProgressBar .textProgress a {
  display: flex;
  line-height: 2.2;
}

.progressBar {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.progressBar .lineProgress {
  height: 4px;
  border-radius: 2px;
  background-color: #D8D8D8;
  flex: 1 1 33%;
}
.progressBar .lineProgress.filled {
  background-color: #3A29F5;
}

.cardsP {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  width: 100%;
}

.cardP {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding: 15px;
  border-radius: 12px;
  row-gap: 20px;
  position: relative;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
}
.cardP.mTopTime {
  margin-top: 17px;
}
.cardP .type {
  color: #3A29F5;
}

.serviceP {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  width: 100%;
}

.detailService {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.detailService figure {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 50%;
  /*         border: 3px solid $primary; */
  overflow: hidden;
  /*        object-fit: cover; */
  aspect-ratio: 1/1;
}
.detailService figure img {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  -o-object-position: 50%;
     object-position: 50%;
  /*  object-fit: cover;
   aspect-ratio: 1 / 1; */
}
.detailService .infoService {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.detailService .infoService div {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.detailService .infoService div span:nth-of-type(2) {
  text-align: right;
  text-wrap: nowrap;
}

.suscriptionP {
  display: flex;
  justify-content: space-between;
}
.suscriptionP p {
  display: flex;
  -moz-column-gap: 3px;
       column-gap: 3px;
  align-items: center;
  position: relative;
}
.suscriptionP p i {
  font-size: 16px;
}
.suscriptionP p i.icon-swipe-right,
.suscriptionP p i.icon-autorenew {
  font-size: 20px;
}
.suscriptionP p i.icon-swipe-right.rAutomatico, .suscriptionP p i.icon-swipe-right.rManual,
.suscriptionP p i.icon-autorenew.rAutomatico,
.suscriptionP p i.icon-autorenew.rManual {
  cursor: pointer;
}

@media (width >= 500px) {
  .suscriptionP > p > i.rManual:active + .tooltipManual,
  .suscriptionP > p > i.rManual:hover + .tooltipManual,
  .suscriptionP > p > i.rAutomatico:active + .tooltipAutomatico,
  .suscriptionP > p > i.rAutomatico:hover + .tooltipAutomatico {
    opacity: 1;
    z-index: 0;
  }
}

.tooltipAutomatico,
.tooltipManual {
  opacity: 0;
  background-color: #C0CAEE;
  padding: 0.3rem 0.5rem;
  font-size: 10px;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: -10;
  border-radius: 0.25rem;
  top: -33px;
  color: #2A2E30 !important;
}
.tooltipAutomatico:after,
.tooltipManual:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top: 6px solid #C0CAEE;
  display: inline-block;
  bottom: 0;
  transform: translateY(5.5px);
  left: 7px;
}
.tooltipAutomatico.visible,
.tooltipManual.visible {
  opacity: 1;
  z-index: 0;
}

.infoRenovacion {
  width: 100%;
  position: relative;
  padding-top: 15px;
  list-style-type: disc;
  padding-left: 20px;
}
.infoRenovacion .colorBack {
  position: absolute;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border-radius: 0 0 12px 12px;
  background: #f1f1f1;
  top: 0;
  padding: 0 15px 15px;
}
.infoRenovacion li,
.infoRenovacion p {
  font-size: 10px;
  color: #2A2E30;
  line-height: 1.5;
  z-index: 2;
  position: relative;
}

.timeOffer {
  display: flex;
  align-items: center;
  font-family: "SoraVariable", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 15px;
  height: 34px;
  -moz-column-gap: 6px;
       column-gap: 6px;
  width: 108px;
  border-radius: 12px;
  color: #FFFFFF;
  background-color: #3A29F5;
  position: absolute;
  right: 20px;
  top: -17px;
}
.timeOffer span {
  font-family: "SoraVariable", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: white;
}
.timeOffer i {
  width: 18px;
  color: white;
  font-size: 13px;
}

.cardP:has(> div.timeOffer):not(:nth-child(1 of div.cardP)) {
  margin-top: 15px;
}

/* 
inactive */
.cardP.inActive {
  box-shadow: none;
}
.cardP.inActive p i,
.cardP.inActive i,
.cardP.inActive * {
  color: #828790;
}
.cardP.inActive p i.icon-check-s {
  color: #FFFFFF;
  background-color: #D8D8D8;
}
.cardP.inActive button {
  background-color: #D8D8D8;
  cursor: default;
  pointer-events: none;
  color: #FFFFFF !important;
}
.cardP.inActive button i {
  color: white;
}
.cardP.inActive .detailService figure {
  opacity: 0.4;
}
.cardP.inActive .timeOffer {
  background-color: #D8D8D8;
}
.cardP.inActive .timeOffer span {
  color: white;
}
.cardP.inActive .timeOffer i {
  color: white;
}

.btnTextEdit,
.btnTextCancel {
  font-size: 12px;
  font-weight: 400;
  color: #3A29F5;
  line-height: 2.2;
  font-family: "SoraVariable", sans-serif;
  background-color: transparent;
  cursor: pointer;
}
.btnTextEdit:active, .btnTextEdit:hover,
.btnTextCancel:active,
.btnTextCancel:hover {
  color: #0B0D80;
}

.btnTextLink {
  font-size: 12px;
  font-weight: 400;
  color: #3A29F5;
  line-height: normal;
  font-family: "SoraVariable", sans-serif;
  background-color: transparent;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -moz-column-gap: 15px;
       column-gap: 15px;
  cursor: pointer;
}
.btnTextLink:active, .btnTextLink:hover {
  color: #0B0D80;
}

.btnContinue {
  height: 40px;
  display: flex;
  font-family: "SoraVariable", sans-serif;
  align-items: center;
  justify-content: center;
  background-color: #3B64F6;
  border-radius: 20px;
  width: 100%;
  position: relative;
}
.btnContinue::after {
  content: "";
  font-family: "icomoon";
  width: 14px;
  height: 14px;
  font-size: 1.9em;
  color: #FFF;
  position: absolute;
  right: 14px;
  border: 1px solid #FFFFFF;
}

.btnPrimaryArrow {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3B64F6;
  border-radius: 20px;
  width: 100%;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}
.btnPrimaryArrow i {
  font-size: inherit;
  color: #FFF;
  position: absolute;
  right: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.btnPrimaryArrow:hover, .btnPrimaryArrow:active {
  background-color: #0B0D80;
}

.btnPrimaryPay {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #3B64F6;
  border-radius: 20px;
  width: 100%;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.4;
  padding: 0 7px 0 22px;
  font-family: "SoraVariable", sans-serif;
  /*      &.inActive{
          background-color: $primary-25;
          pointer-events: none;
          & >.subBtnPay img{
              opacity:0.6;
          }
      }  */
}
.btnPrimaryPay .subBtnPay {
  max-width: 68px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #FFFFFF;
  height: 26px;
  border-radius: 14px;
  overflow: hidden;
}
.btnPrimaryPay .subBtnPay span.img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnPrimaryPay .subBtnPay span.img img {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 80%;
  max-height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
}
.btnPrimaryPay .subBtnPay span.img img.coverFull {
  max-width: unset;
  max-height: unset;
  width: 100%;
  height: 100%;
}
.btnPrimaryPay:hover, .btnPrimaryPay:active {
  background-color: #0B0D80;
}

.btnPrimary {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3B64F6;
  border-radius: 20px;
  width: 100%;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
  /*     &.inActive{
          background-color: $primary-25;
          pointer-events: none;
      } */
}
.btnPrimary:hover, .btnPrimary:active {
  background-color: #0B0D80;
}
.btnPrimary.danger {
  background-color: #A92323;
  /*         &.inActive{
              background-color: rgba(169,35,35,.5);
              pointer-events: none;
          } */
}
.btnPrimary.danger:hover, .btnPrimary.danger:active {
  background-color: rgb(82, 17, 17);
}

.btnBorder {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: #3B64F6;
  line-height: 1.4;
  border: 1px solid #3B64F6;
  font-family: "SoraVariable", sans-serif;
}
.btnBorder:hover, .btnBorder:active {
  color: #0B0D80;
  border: 1px solid #0B0D80;
}

.btnBorderGrey {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
  position: relative;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.13px;
  color: #2A2E30;
  border: 1px solid #D8D8D8;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
  font-family: "SoraVariable", sans-serif;
}
.btnBorderGrey i {
  font-size: inherit;
  color: #FFF;
  position: absolute;
  right: 14px;
  outline: 1px solid #FFFFFF;
  box-sizing: border-box;
}
.btnBorderGrey .imgIcon {
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  display: block;
}
.btnBorderGrey .imgIcon img {
  width: 100%;
}
.btnBorderGrey:hover, .btnBorderGrey:active {
  color: #0B0D80;
  border: 1px solid #0B0D80;
}

.btnBorderBlack {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
  width: 172px;
  box-shadow: none !important;
  border: 1px solid #828790;
  padding-left: 10px;
  -moz-column-gap: 20px;
       column-gap: 20px;
  justify-content: center;
  font-family: "SoraVariable", sans-serif;
}
.btnBorderBlack i.icon-add {
  color: #F7F9FD;
  background-color: #3B64F6;
  padding: 2px;
  border-radius: 50%;
  aspect-ratio: 1/1;
}
.btnBorderBlack:active, .btnBorderBlack:hover {
  color: #0B0D80;
  border-color: #0B0D80;
}
.btnBorderBlack:active i, .btnBorderBlack:hover i {
  background-color: #0B0D80;
}

.btnDelete {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 20px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 30px;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.13px;
  color: #A92323;
  border: 1px solid #A92323;
  -moz-column-gap: 10px;
       column-gap: 10px;
  align-self: center;
  font-family: "SoraVariable", sans-serif;
}
.btnDelete i {
  color: #A92323;
  box-sizing: border-box;
}
.btnDelete:active, .btnDelete:hover {
  color: #2A2E30;
  border: 1px solid #2A2E30;
}
.btnDelete:active i, .btnDelete:hover i {
  color: #2A2E30;
}

.btnSending {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #0B0D80;
  border-radius: 20px;
  width: 100%;
  position: relative;
  color: #FFFFFF;
  padding-left: 27px;
  padding-right: 15px;
  cursor: default;
  pointer-events: none;
  font-family: "SoraVariable", sans-serif;
}
.btnSending i {
  color: #FFFFFF;
  font-size: 16px;
}
.btnSending.danger {
  background-color: #A92323;
}

/*color grey-light inactivo */
.btnInProgress {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0B0D80;
  border-radius: 20px;
  width: 100%;
  position: relative;
  color: #FFFFFF;
  padding-left: 27px;
  padding-right: 15px;
  cursor: default;
  pointer-events: none;
  font-family: "SoraVariable", sans-serif;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  /*     &:hover{
          color:$secondary;
          background-color: #FFF;
          border: 1px solid $secondary;
      } */
}

.btnValidate {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #26A923;
  border-radius: 20px;
  width: 100%;
  position: relative;
  color: #FFFFFF;
  padding-left: 27px;
  padding-right: 15px;
  cursor: default;
  pointer-events: none;
  font-family: "SoraVariable", sans-serif;
}
.btnValidate i {
  color: #26A923;
  font-size: 16px;
  background-color: #FFFFFF;
}

.btnDetall,
.btnVerMas {
  display: flex;
  align-self: center;
  height: 33px;
  font-family: "SoraVariable", sans-serif;
  color: #3B64F6;
  font-size: 14px;
  font-weight: 400;
  background-color: transparent;
  align-items: center;
  padding: 10px 15px 0;
  flex-direction: column;
  row-gap: 3px;
  margin-bottom: 7vh;
}
.btnDetall span,
.btnVerMas span {
  font-family: inherit;
  font-size: 9px;
  color: #828790;
}
.btnDetall:hover,
.btnVerMas:hover {
  color: #0B0D80;
}

button.btnAdd {
  overflow: hidden;
  background-color: transparent;
  border-radius: 50%;
  aspect-ratio: 1/1;
}
button.btnAdd i.icon-add {
  background-color: #C0CAEE;
  color: #3B64F6;
  font-size: 28px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  font-weight: 600;
}
button.btnAdd:active i, button.btnAdd:hover i {
  color: #0B0D80;
}

button.inActive {
  opacity: 0.25;
  pointer-events: none;
}

.buttonsTwo {
  display: flex;
  -moz-column-gap: 12px;
       column-gap: 12px;
  flex-wrap: nowrap;
  flex-direction: unset !important;
}

.buttonsColumn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.btnIconEdit {
  cursor: pointer;
  display: inline-flex;
  align-self: flex-end;
  color: #3A29F5;
}

.optionsUser {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  padding: 0 0 20px;
  row-gap: 10px;
  width: 100%;
}
.optionsUser p {
  padding: 0 20px;
}
.optionsUser .buttons {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 0 5px;
}

button,
form:focus-visible {
  outline: none;
}

.blockInputAnim {
  position: relative;
  display: flex;
  flex-direction: column;
}
.blockInputAnim > p:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 23px;
}
.blockInputAnim > p:nth-child(2) {
  margin-bottom: 10px;
}
.blockInputAnim .privacy {
  margin: 22px 0 0;
}

.twoForms {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  width: 100%;
}
.twoForms > .groupFormAnim {
  display: flex;
  /*        flex: 1 1 100%; */
  width: 100%;
  flex-direction: column;
}
@media (width >= 540px) {
  .twoForms > .groupFormAnim {
    /* flex: 1 1 45%; */
    width: calc(50% - 5.5px);
  }
}
.twoForms > .groupFormAnim .labelAnim {
  width: 100%;
}
.twoForms .inputAnim {
  width: 100%;
}

.formAnim {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.groupFormAnim .labelAnim {
  position: relative;
  display: flex;
}
.groupFormAnim .labelAnim input.inputAnim {
  display: flex;
  width: 100%;
  border: 1px solid #D8D8D8;
  border-radius: 10px;
  outline: none;
  /* height: 42px; anterior*/
  height: 46px;
  padding: 10px 15px 0;
  letter-spacing: 0.11px;
  font-family: "SoraVariable", sans-serif;
  /*    font-size: 11px; anterior*/
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  /*   transition: all 0.3s; */
  color: #2A2E30;
  padding-top: 12px;
  text-overflow: ellipsis;
}
.groupFormAnim .labelAnim input.inputAnim::-moz-placeholder {
  color: #828790;
}
.groupFormAnim .labelAnim input.inputAnim::placeholder {
  color: #828790;
}
.groupFormAnim .labelAnim input.inputAnim:focus, .groupFormAnim .labelAnim input.inputAnim:active {
  outline: 1px solid #938AF0;
  outline-offset: 2px;
}
.groupFormAnim .labelAnim input.inputAnim.blocked {
  outline: none !important;
}
.groupFormAnim .labelAnim input.inputAnim[disabled] {
  outline: none !important;
}
.groupFormAnim .labelAnim span.textAnim {
  display: flex;
  position: absolute;
  font-weight: 400;
  color: #828790;
  font-size: 12px;
  line-height: 1.4;
  /*    top: 13px; anterior*/
  top: 16px;
  left: 15px;
  letter-spacing: 0.12px;
  pointer-events: none;
  transition: all 0.15s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "SoraVariable", sans-serif;
}
.groupFormAnim .labelAnim i.iconValidate {
  display: none;
  position: absolute;
  /*            width: 11px;
             height: 11px; */
  right: 10px;
  font-size: 11px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.groupFormAnim p.pError {
  display: none;
  color: #CA0015;
  margin-top: 4px;
  align-items: center;
  font-family: "SoraVariable", sans-serif;
}
.groupFormAnim p.pError i {
  margin-right: 5px;
  font-weight: 400;
  font-size: 9px;
  padding: 1px;
}

/* ________phone con libreria prefijos*/
.groupFormAnim.phone .labelAnim span.textAnim {
  margin-left: 67px;
}

.groupFormAnim.phone .labelAnim > div {
  width: 100%;
  /*    & > div{
        overflow: hidden;
        width: 96px;
        border: 1px solid red;
     } */
}
.groupFormAnim.phone .labelAnim > div input.inputAnim {
  padding: 10px 15px 0 104px;
  width: 100%;
}

.groupFormAnim.phone .labelAnim > div:has(.inputAnim:is(:focus, :not(:-moz-placeholder-shown))) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

.groupFormAnim.phone .labelAnim > div:has(.inputAnim:is(:focus, :not(:placeholder-shown))) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

/* _______fin phone con libreria prefijos*/
.inputAnim:is(:focus, :not(:-moz-placeholder-shown)) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}
.inputAnim:is(:focus, :not(:placeholder-shown)) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

.inputAnim:is(:focus, :not(:-moz-placeholder-shown)) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

.inputAnim:is(:focus, :not(:placeholder-shown)) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

.inputAnim:is(:-webkit-autofill, :-moz-autofill) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

/* --- inputs con validate padding superior e la inzquierda  ---*/
.groupFormAnim.validate .inputAnim {
  padding: 10px 24px 0 15px !important;
}

/* --- inputs con validate SHOW icono válido  ---*/
.formAnim .groupFormAnim.validate .labelAnim .iconValidate {
  display: inline-flex;
}

/* --- inputs con notValidate SHOW pError  ---*/
.formAnim .groupFormAnim.notValidate > p.pError {
  display: flex;
}
.formAnim .groupFormAnim.notValidate .labelAnim .inputAnim {
  border-color: #CA0015;
}

/* --- inputs twoForms con notValidate SHOW pError  ---*/
.formAnim .twoForms .groupFormAnim.notValidate > p.pError {
  display: flex;
}
.formAnim .twoForms .groupFormAnim.notValidate .labelAnim .inputAnim {
  border-color: #CA0015;
}

/* --- IconValidate Form ---*/
/* .formAnim:valid .groupFormAnim .labelAnim .iconValidate{
   display: inline-block;
} */
/* --- IconValidate input  ---*/
/* .inputAnim:valid ~ .iconValidate{
   display: inline-block!important;
} */
/* .formAnim:has(.inputAnim:invalid) p.pError{
   display:flex;
} */
/* .inputAnim:invalid ~ .iconValidate{
   display: none!important;

} */
/* .formAnim:invalid .groupFormAnim > .pError{
   display: flex;

} */
/* --- Input date ---*/
input[type=date] {
  width: 100%;
  display: block;
  position: relative;
  -webkit-min-logical-width: calc(100% - 18px);
  background-color: white;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: left;
  align-items: left;
  padding-top: 10px !important;
  /*    &::-webkit-datetime-edit {} editar solo el campo de texto de input=date*/
  /* ________ solo moviles IOS y andorid*/
}
input[type=date]::-webkit-date-and-time-value {
  text-align: left;
  position: absolute;
  top: 19px;
  left: 13px;
  text-align: left;
  padding: 0 !important;
}
input[type=date]::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 0px;
  background-image: url(../img/icon-calendar.svg) !important;
  background-position: left;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-color: white;
  width: 30px;
  height: 30px;
}

/* ________ color general en todos buscadores del input en disabled*/
input[disabled] {
  cursor: default;
  background-color: #f9f9f9 !important;
}
input[disabled][type=date]::before {
  background-color: #f9f9f9 !important;
  background-image: url(../img/icon-calendar.svg) !important;
}

input[type=date]::-webkit-datetime-edit-fields-wrapper {
  margin-top: 5px;
  margin-top: 5px;
  width: 100% !important;
  display: block;
  text-align: left;
  align-items: left;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=date]::-webkit-calendar-picker-indicator {
  display: flex;
  position: absolute;
  top: 2px;
  right: 5px;
  height: 30px;
  /*    width: 16px;  */
  width: calc(100% - 150px);
  background-image: url(../img/icon-calendar.svg) !important;
  background-position: right;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-color: transparent;
  cursor: pointer;
  opacity: 0;
}

/* --- Input date ,Si es validate, el icono/boton calendario no se ve ---*/
.groupFormAnim.validate input[type=date]::before {
  right: 0;
  top: 10px;
  width: 53px;
}

/* --- Input que dentro tiene enlace a modal  textLinkMod---*/
input.linkMod {
  padding: 10px 108px 0 15px !important;
  text-overflow: ellipsis;
}

.groupFormAnim label:has(.textLinkMod.hideP) input.linkMod {
  padding: 10px 15px 0 !important;
}

.groupFormAnim.validate label:has(.textLinkMod.hideP) input.linkMod {
  padding: 10px 24px 0 15px !important;
}

/* --- input type tel ---*/
.groupTel {
  display: flex;
  flex: 1 1 45%;
}
.groupTel .groupFormAnim {
  width: 100%;
}

/* --- input type tel clases librería fuente pequeña---*/
.iti__selected-dial-code {
  font-size: 11px !important;
}

.iti__selected-country-primary {
  padding-right: 0 !important;
}

#telefono {
  padding-left: 80px !important;
}

/* --- Input Check ---*/
input[type=checkbox] {
  margin: 0;
  margin: 0 5px 0 0;
  width: 16px;
  height: 16px;
  accent-color: #3B64F6;
}

label:has(input[type=checkbox]) {
  cursor: pointer;
  display: flex;
}
label:has(input[type=checkbox]) p {
  display: inline-flex;
  align-items: center;
  line-height: normal;
  letter-spacing: 0.165px;
}

/* --- enable button form ---*/
/* .labelCheckBox:has(> input[type=checkbox]) ~ button.btnPrimary, */
/* .formAnim .btnPrimary,
.formAnim .btnPrimaryPay{
   background-color: $primary-25;
   pointer-events: none;
} */
/* .labelCheckBox:has(> input[type=checkbox]:checked) ~ button.btnPrimary, */
/* .formAnim:valid .btnPrimary,
.formAnim:valid .btnPrimaryPay{
   pointer-events: initial;
   background-color: $primary;
} */
/* ---  checkbox TWO con imagen ver contraseña ---*/
.checkBoxSee,
.checkBoxSeeTwo {
  display: none !important;
  justify-content: flex-end;
  cursor: default !important;
  align-self: flex-end;
}
.checkBoxSee.showP,
.checkBoxSeeTwo.showP {
  display: flex !important;
}
.checkBoxSee input[type=checkbox],
.checkBoxSeeTwo input[type=checkbox] {
  display: none;
}
.checkBoxSee span,
.checkBoxSeeTwo span {
  height: 18px;
  -moz-column-gap: 7px;
       column-gap: 7px;
  align-items: center;
  cursor: pointer;
}
.checkBoxSee span i,
.checkBoxSeeTwo span i {
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  color: #828790;
  font-size: 19px;
}
.checkBoxSee .see,
.checkBoxSeeTwo .see {
  display: inline-flex;
}
.checkBoxSee .notSee,
.checkBoxSeeTwo .notSee {
  display: none;
}

.checkBoxSee {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.checkBoxSee:has(input[type=checkbox]:checked) .see,
.checkBoxSeeTwo:has(input[type=checkbox]:checked) .see {
  display: none;
}
.checkBoxSee:has(input[type=checkbox]:checked) .notSee,
.checkBoxSeeTwo:has(input[type=checkbox]:checked) .notSee {
  display: inline-flex;
}

/* ---  FIN checkbox con imagen ver contraseña ---*/
/* --- Form  copy---*/
.labelCopy {
  position: relative;
  width: 100%;
}
.labelCopy input {
  display: flex;
  width: 100%;
  border-radius: 10px;
  outline: none;
  border: 1px solid #3A29F5;
  padding: 10px 30px 10px 15px;
  font-family: "SoraVariable", sans-serif;
  /*  font-size: 12px; anterior*/
  font-size: 16px;
  font-weight: 400;
  height: 39px;
  text-overflow: ellipsis;
}
.labelCopy input:active, .labelCopy input:focus {
  outline: 1px solid #938AF0;
  outline-offset: 2px;
}
.labelCopy span.imgCopy {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  padding: 4px 8px;
  aspect-ratio: 14/14;
  cursor: pointer;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.labelCopy span.imgCopy:hover i, .labelCopy span.imgCopy:active i {
  color: #3A29F5;
}
.labelCopy span.imgCopy i {
  color: #828790;
}

/* visualizadp texto copiado por css
.sectionPayment:has( .labelCopy > span.imgCopy:active) > div .share .textCopy{
   animation: textCopy 3000ms;
}
@keyframes textCopy{
   0%{ opacity:1}
   90%{opacity:1}
   100%{opacity:0}
} */
/* --- input checkbox switch---*/
.checkboxSwitch {
  display: flex;
  -moz-column-gap: 5px;
       column-gap: 5px;
  align-items: center;
  justify-content: flex-end;
}
.checkboxSwitch input.switch[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.checkboxSwitch label {
  cursor: pointer;
  width: 50px;
  height: 24px;
  background: #D8D8D8;
  display: block;
  border-radius: 100px;
  position: relative;
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
  transition: background 0.3s;
  position: relative;
}
.checkboxSwitch label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 18px;
  transition: 0.3s;
}
.checkboxSwitch input:checked + label {
  background: #3A29F5;
}
.checkboxSwitch input:checked + label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

/* .checkboxSwitch label:has(input[type=checkbox]:checked){
   background: $accent;
}
.checkboxSwitch label:has(input[type=checkbox]:checked):after {
   left: calc(100% - 3px);
   transform: translateX(-100%);
} */
/* --- excepcions forms ---*/
.sectionStartRegistration .labelCheckBox {
  margin: 18px 0;
}
.sectionStartRegistration .labelCheckBox p {
  display: inline-flex;
}
.sectionStartRegistration .privacy {
  margin: 0;
}

/* --- excepcions sectionCataCard ---*/
.sectionDataCard .textAnim {
  color: black !important;
}

.optionsCards:has(.sectionDataCard .checkboxSwitch input[type=checkbox]:checked) > .sectionAddCards > .oneCard > .card > .innerCard > span > .predeterminada {
  display: flex !important;
}

/* ---  estilos Iframe externo plantilla ---*/
.pagoExterno {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 14px auto 20px;
}

.zonaBtn {
  display: inline-flex;
  margin: 10px 0 5px;
  float: right;
}
.zonaBtn > a {
  font-size: 12px;
  font-weight: 400;
  color: #3A29F5;
  line-height: 26px;
  font-family: "SoraVariable";
  background-color: transparent;
  display: inline-flex;
  cursor: pointer;
}
.zonaBtn > a:active, .zonaBtn > a:hover {
  color: #0B0D80;
}

#error-message,
.avisoError {
  margin-bottom: 20px;
}
#error-message > form#formUseMetodo,
.avisoError > form#formUseMetodo {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: center;
}
#error-message > form#formUseMetodo > a,
.avisoError > form#formUseMetodo > a {
  font-size: 12px;
  display: flex;
  margin: 5px auto 0;
  font-family: "SoraVariable";
}
#error-message > form#formUseMetodo > a.inActive,
.avisoError > form#formUseMetodo > a.inActive {
  color: #D8D8D8;
  pointer-events: none;
}

#payment-form a {
  font-size: 12px;
  display: flex;
  margin: 5px auto 0;
  font-family: "SoraVariable";
  text-align: center;
}
#payment-form a.aInActive {
  color: #D8D8D8;
  pointer-events: none;
  font-size: 12px;
  display: flex;
  margin: 5px auto 0;
  font-family: "SoraVariable";
  text-align: center;
}

a.aActive {
  color: #3A29F5;
  font-size: 12px;
  display: flex;
  margin: 5px auto 0;
  font-family: "SoraVariable";
  text-align: center;
  display: flex;
  justify-content: center;
}

a.aInActive {
  color: #D8D8D8;
  pointer-events: none;
  font-size: 12px;
  display: flex;
  margin: 5px auto 0;
  font-family: "SoraVariable";
  text-align: center;
  justify-content: center;
}

#formUseMetodo {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: center;
}
#formUseMetodo > a {
  font-size: 12px;
  display: flex;
  margin: 5px auto 0;
  font-family: "SoraVariable";
}
#formUseMetodo > a.inActive {
  color: #D8D8D8;
  pointer-events: none;
}

.sectionCouponDto {
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
  background-color: #FFFFFF;
  border-radius: 10px;
  width: 100%;
}
.sectionCouponDto details {
  padding: 15px;
  width: 100%;
}
.sectionCouponDto summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sectionCouponDto summary::-webkit-details-marker {
  display: none;
}
.sectionCouponDto summary i {
  display: inline-flex;
  font-size: 18px;
  transform: rotate(180deg);
}
.sectionCouponDto summary i img {
  width: 100%;
}
.sectionCouponDto details[open] > summary i {
  transform: rotate(0deg);
}

.innerCouponDto {
  overflow: visible;
  display: grid;
  grid-template-rows: 0fr;
}
.innerCouponDto form {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  margin-top: 14px;
}
.innerCouponDto form input {
  display: flex;
  flex: 1 1 60%;
  border: 1px solid #D8D8D8;
  border-radius: 10px;
  outline: none;
  height: 39px;
  padding: 0 15px;
  letter-spacing: 0.12px;
  font-family: "SoraVariable", sans-serif;
  /* font-size: 12px; anterior*/
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  /*          &:focus{
              outline: none;
           } */
}
.innerCouponDto form input::-moz-placeholder {
  color: #828790;
  font-size: 12px;
}
.innerCouponDto form input::placeholder {
  color: #828790;
  font-size: 12px;
}
.innerCouponDto form input:focus, .innerCouponDto form input:active {
  outline: 1px solid #938AF0;
  outline-offset: 2px;
}
.innerCouponDto form button {
  display: flex;
  flex: 1 1 130px;
}
.innerCouponDto .pError {
  display: none;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
.innerCouponDto .pError i {
  outline: none;
  font-weight: 400;
  font-size: 9px;
  padding: 2px;
}

.sectionCouponDto details[open] > .innerCouponDto {
  grid-template-rows: 1fr;
  transition: all 0.3s;
  overflow: visible;
}

/*----- estilos validación ----*/
.innerCouponDto.notValidate input {
  border: 1px solid #A92323;
}
.innerCouponDto.notValidate .pError {
  margin-top: 6px;
  display: flex;
  align-items: center;
}

.articleP:has(.sectionPaymentMethods) {
  margin-bottom: unset;
}

.sectionPaymentMethods {
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
  padding: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.sectionPaymentMethods > span, .sectionPaymentMethods > p {
  margin-bottom: 15px;
}
.sectionPaymentMethods span {
  display: flex;
  justify-content: space-between;
}
.sectionPaymentMethods span button {
  display: flex;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding-left: 10px;
  background-color: transparent;
}
.sectionPaymentMethods span button span {
  display: flex;
  -moz-column-gap: 2px;
       column-gap: 2px;
}
.sectionPaymentMethods span button span i {
  color: #3A29F5;
}
.sectionPaymentMethods span button:hover :is(p, span i) {
  color: #0B0D80;
}
.sectionPaymentMethods span button :is(span, p) {
  color: #3A29F5;
  font-size: 13px;
  letter-spacing: 0.13px;
  line-height: 1.8;
}
.sectionPaymentMethods .blockBalance {
  margin-bottom: 15px;
}
.sectionPaymentMethods .blockBalance p {
  display: flex;
  align-items: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
.sectionPaymentMethods .blockBalance span > p {
  white-space: nowrap;
}
.sectionPaymentMethods .blockBalance hr.hrSaldo {
  margin-top: 18px;
}
.sectionPaymentMethods label.labelCheckBox {
  margin-top: 21px;
  display: none;
}

ul.innerPaymentMethods,
ul.innerOtherMethods,
ul.innerEthereum,
ul.innerBSC {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
}
@media (width >= 375px) {
  ul.innerPaymentMethods,
  ul.innerOtherMethods,
  ul.innerEthereum,
  ul.innerBSC {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}
@media (width >= 550px) {
  ul.innerPaymentMethods,
  ul.innerOtherMethods,
  ul.innerEthereum,
  ul.innerBSC {
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
  }
}
ul.innerPaymentMethods li,
ul.innerOtherMethods li,
ul.innerEthereum li,
ul.innerBSC li {
  box-sizing: border-box;
  display: grid;
  cursor: pointer;
}

dialog ul.innerCrypto,
dialog ul.innerPaymentMethods,
dialog ul.innerOtherMethods,
dialog ul.innerEthereum,
dialog ul.innerBSC {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
}
@media (width >= 375px) {
  dialog ul.innerCrypto,
  dialog ul.innerPaymentMethods,
  dialog ul.innerOtherMethods,
  dialog ul.innerEthereum,
  dialog ul.innerBSC {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}
@media (width >= 550px) {
  dialog ul.innerCrypto,
  dialog ul.innerPaymentMethods,
  dialog ul.innerOtherMethods,
  dialog ul.innerEthereum,
  dialog ul.innerBSC {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }
}
dialog ul.innerCrypto li,
dialog ul.innerPaymentMethods li,
dialog ul.innerOtherMethods li,
dialog ul.innerEthereum li,
dialog ul.innerBSC li {
  box-sizing: border-box;
  display: grid;
  cursor: pointer;
}

ul.innerOtherMethods,
.sectionCrypto {
  display: none;
}

span.separatorP {
  display: none;
  grid-column: span 5;
  width: 100%;
  height: 1px;
  background-color: #D8D8D8;
  margin: 20px 0;
}

.paymentMethod {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  cursor: pointer;
}
.paymentMethod:hover :is(p, .optionPay) {
  color: #3A29F5;
  border-color: #3A29F5;
}
.paymentMethod:hover > .optionPay:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #3A29F5;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: overlay;
  mix-blend-mode: color;
  opacity: 1;
}
.paymentMethod:hover > .optionPay img {
  opacity: 1;
}
.paymentMethod .optionPay {
  border: 1px solid #828790;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 80/50;
  position: relative;
  color: #828790;
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  width: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
}
.paymentMethod .optionPay img {
  filter: grayscale(100%);
  width: 100%;
  max-width: 80%;
  height: 100%;
  max-height: 70%;
  opacity: 0.7;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  aspect-ratio: 80/50;
  position: relative;
}
.paymentMethod .optionPay img.coverFull {
  max-width: 100% !important;
  max-height: unset !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.paymentMethod .optionPay .bandCard {
  display: flex;
  width: 100%;
  height: 10px;
  background-color: #828790;
  margin-top: 15%;
  align-self: flex-start;
}
.paymentMethod .optionPay .plus {
  position: absolute;
  right: 5px;
  bottom: 5px;
  height: 14px;
  width: 14px;
  border-radius: 8px;
  background-color: #D8D8D8;
  font-size: 18px;
  line-height: 0.8;
  color: #828790;
}
.paymentMethod p {
  text-align: center;
}
.paymentMethod input:checked + .optionPay {
  border-color: #3A29F5;
}
.paymentMethod input:checked + .optionPay:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #3A29F5;
  mix-blend-mode: color;
  opacity: 1;
}
.paymentMethod input:checked + .optionPay .bandCard {
  background-color: #3A29F5;
}
.paymentMethod input:checked + .optionPay .plus {
  color: #3A29F5;
}
.paymentMethod input:checked + .optionPay > img {
  opacity: 1;
}
.paymentMethod input:checked ~ p {
  color: #3A29F5;
}

.paymentMethod > input {
  display: none;
}

/*  section crypto */
.sectionCrypto {
  row-gap: 15px;
}

.innerPaymentMethods:has(.crypto input:checked) ~ .separatorP,
.innerPaymentMethods:has(.crypto input:checked) ~ .sectionCrypto,
.innerPaymentMethods:has(.others input:checked) ~ .separatorP,
.innerPaymentMethods:has(.others input:checked) ~ .innerOtherMethods {
  display: grid;
}

/* @import "components/guestStep3-ANTbloqueVermas-BUENO"; */
.bodyP:has(.sectionBecomeMember) {
  overflow-x: hidden;
}

.articleP:has(.sectionBecomeMember) {
  min-height: calc(100dvh - 55px);
  display: flex !important;
  flex-direction: column;
  background-color: black;
}
@media (width >= 600px) {
  .articleP:has(.sectionBecomeMember) {
    background-color: transparent;
  }
}

/* --- sección hazte miembro ---*/
.sectionBecomeMember {
  /*     width: 100%; */
  display: flex;
  /*     align-items: center;////anterior */
  height: 338px;
  width: 100%;
  position: relative;
}
@media (width >= 600px) {
  .sectionBecomeMember {
    height: 257px;
    border-radius: 0 0 12px 12px;
    z-index: 2;
    overflow: hidden;
    align-items: center;
  }
}
.sectionBecomeMember .backgroundP {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.sectionBecomeMember .backgroundP figure {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 130%;
  min-height: 50dvh;
  position: relative;
}
@media (width >= 600px) {
  .sectionBecomeMember .backgroundP figure {
    min-height: 100%;
  }
}
.sectionBecomeMember .backgroundP figure img {
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  min-height: 99%;
  height: 100%;
  width: 100%;
  min-width: 100%;
}
@media (width >= 600px) {
  .sectionBecomeMember .backgroundP figure img {
    min-height: 100%;
  }
}
.sectionBecomeMember .backgroundP figure:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(180deg, rgba(243, 243, 243, 0) 0%, rgb(0, 0, 0) 95.4%);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@media (width >= 600px) {
  .sectionBecomeMember .backgroundP figure:after {
    background: linear-gradient(180deg, rgba(243, 243, 243, 0) 0%, rgba(0, 0, 0, 0.82) 61.4%);
  }
}

.iBecomeMember {
  z-index: 1;
  color: #F7F9FD;
  font-family: "SoraVariable", sans-serif;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.iBecomeMember > p:nth-child(1) {
  font-weight: 700;
  font-size: 32px;
  color: inherit;
  margin-bottom: 14px;
}
@media (width >= 600px) {
  .iBecomeMember > p:nth-child(1) {
    font-size: 29px;
    margin-bottom: 30px;
  }
}
.iBecomeMember > p:nth-child(2) {
  font-weight: 400;
  font-size: 18px;
  color: inherit;
  margin-bottom: 40px;
}
@media (width >= 600px) {
  .iBecomeMember > p:nth-child(2) {
    font-size: 15px;
  }
}
.iBecomeMember > a {
  font-weight: 600;
  font-size: 14px;
  color: inherit;
  letter-spacing: 0.28px;
  height: 26px;
  display: inline-flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  align-items: center;
}
.iBecomeMember > a:active i, .iBecomeMember > a:hover i {
  animation: arrowLink 0.4s ease-out 2;
}
.iBecomeMember > a i {
  background-color: #3B64F6;
  border-radius: 50%;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 6px;
}
.iBecomeMember > a p {
  color: inherit;
}

/* --- sección compra finalizada ---*/
.sectionBuyCompleted {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #F7F9FD;
  border-radius: 12px 12px 0 0;
  width: calc(100% + 1px);
  margin-top: -12px;
  row-gap: 15px;
  position: relative;
  z-index: 3;
  margin-top: auto;
}
@media (width >= 600px) {
  .sectionBuyCompleted {
    width: 100%;
    margin-top: 0;
    border-radius: 0;
    padding: 20px 0;
  }
}
.sectionBuyCompleted > span:nth-child(1) {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  align-items: center;
}
.sectionBuyCompleted > span:nth-child(1) i {
  font-size: 20px;
}
.sectionBuyCompleted > span:nth-child(1) i.icon-hourglass-bottom {
  color: #ffa81c;
  font-size: 18px;
  display: flex;
  align-self: flex-start;
  margin-top: 2px;
}
.sectionBuyCompleted > span:nth-child(2) {
  display: flex;
  justify-content: space-between;
}
.sectionBuyCompleted > .infoManual, .sectionBuyCompleted > .infoAutomatico {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #2A2E30;
  padding-left: 20px;
  position: relative;
}
.sectionBuyCompleted > .infoManual > i, .sectionBuyCompleted > .infoAutomatico > i {
  position: absolute;
  left: 0px;
  top: 0px;
}

.sectionBuyCompleted .viewContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: center;
  background-color: #C0CAEE;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
}
.sectionBuyCompleted .viewContent figure {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.sectionBuyCompleted .viewContent figure img {
  width: 100%;
  -o-object-position: 50%;
     object-position: 50%;
  min-height: 100%;
  min-width: 100%;
  height: 100%;
}
.sectionBuyCompleted .viewContent > p:nth-of-type(2) {
  padding: 0 20px;
  text-align: center;
}

.sectionBuyCompleted .block > div {
  height: 63px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}
.sectionBuyCompleted .block > div:last-child {
  border-bottom: none;
}
.sectionBuyCompleted .block > div a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 20px;
  cursor: pointer;
  pointer-events: all;
  align-items: center;
}
.sectionBuyCompleted .block strong {
  font-weight: 600;
}
.sectionBuyCompleted .block strong.accent {
  color: #3A29F5;
}
.sectionBuyCompleted .block .linkshopping {
  display: none;
}
.sectionBuyCompleted .block .linkshopping.showP {
  display: flex;
}
.sectionBuyCompleted .block .linkshopping i {
  color: #2A2E30;
}
.sectionBuyCompleted .block .linkshopping:active a :is(p, i), .sectionBuyCompleted .block .linkshopping:hover a :is(p, i) {
  color: #3A29F5;
}

.sectionBuyCompleted .acordionP {
  display: flex;
  flex-direction: column;
}

.sectionBuyCompleted .acordionP .acordionItemP {
  position: relative;
  width: 100%;
}
.sectionBuyCompleted .acordionP .acordionItemP .contentP {
  overflow: hidden;
  display: grid;
  font-family: "SoraVariable", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.2;
  max-height: 67.2px;
  /*   max-height: 60px;  */
  height: 100%;
  position: relative;
  transition: max-height 200ms;
}
.sectionBuyCompleted .acordionP .acordionItemP .contentP .inner {
  overflow: hidden;
}
.sectionBuyCompleted .acordionP .acordionItemP .viewMore {
  display: none;
  place-items: center;
  height: 50px;
  cursor: pointer;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  grid-template-areas: "separator";
}
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.line {
  grid-template-columns: 1fr;
  display: grid;
  height: 1px;
  background-color: #f1f1f1;
  width: 100%;
  grid-area: separator;
}
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.open,
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.close {
  color: #3B64F6;
  font-family: "SoraVariable", sans-serif;
  font-size: 14px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 1rem;
  grid-area: separator;
  background-color: #F7F9FD;
}
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.open:hover,
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.close:hover {
  color: #0B0D80;
}
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.open {
  display: flex;
}
.sectionBuyCompleted .acordionP .acordionItemP .viewMore span.close {
  display: none;
}

#parrafP {
  font-size: 12px;
  line-height: 1.4;
  font-family: "SoraVariable", sans-serif;
}
#parrafP p {
  line-height: 1.4 !important;
  font-family: "SoraVariable", sans-serif;
  font-size: 12px;
}

/* ---  ---*/
.sectionStartRegistration {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 23px;
  flex-direction: column;
}
@media (width >= 600px) {
  .sectionStartRegistration {
    padding-top: 70px;
  }
}

.iStartRegistration {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}
@media (width >= 600px) {
  .iStartRegistration {
    padding: 0;
  }
}
.iStartRegistration .blockStart {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
}
.iStartRegistration .blockStart > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.iStartRegistration .blockStart > div:nth-of-type(1) p:nth-of-type(2) {
  line-height: normal;
  letter-spacing: 0.21px;
}
.iStartRegistration .blockStart2 {
  padding: 20px 15px 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  row-gap: 23px;
}
.iStartRegistration .separatorO {
  display: grid;
  width: 100%;
  height: 14px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  grid-template-areas: "separator";
}
.iStartRegistration .separatorO .line {
  display: grid;
  height: 1px;
  width: 100%;
  background-color: #D8D8D8;
  grid-area: separator;
}
.iStartRegistration .separatorO .o {
  display: grid;
  grid-area: separator;
  background-color: #F7F9FD;
  width: 60px;
  justify-self: center;
  text-align: center;
}

span.infoRecover {
  background-color: #26A923;
  color: #FFFFFF;
  font-size: 12px;
  text-align: center;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 6px;
  margin: 0 15px 6px;
  box-sizing: border-box;
  width: 100%;
}

.sectionStartRegistration:has(> .iStartRegistration > span.infoRecover) {
  padding-top: 21px;
}
@media (width >= 600px) {
  .sectionStartRegistration:has(> .iStartRegistration > span.infoRecover) {
    padding-top: 35px;
  }
}

/* ---  ---*/
.sectionMyProfileRegistration {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 23px;
}
@media (width >= 600px) {
  .sectionMyProfileRegistration {
    padding-top: 70px;
  }
}

.iMyProfileRegistration {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}
@media (width >= 600px) {
  .iMyProfileRegistration {
    padding: 0;
  }
}
.iMyProfileRegistration .blockStart {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
}
.iMyProfileRegistration .blockAvatar {
  display: flex;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  position: relative;
  margin-top: 20px;
}
.iMyProfileRegistration .blockAvatar > p {
  word-break: break-word;
}
.iMyProfileRegistration .blockAvatar figure {
  display: flex;
  border-radius: 100px;
  height: 80px;
  max-width: 80px;
  overflow: hidden;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  width: 100%;
  aspect-ratio: 1/1;
}
.iMyProfileRegistration .blockAvatar figure img {
  width: 100%;
  -o-object-position: 50%;
     object-position: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  /* aspect-ratio: 1/1; */
  min-width: 100%;
  /*       height: 100%; */
  min-height: 100%;
}
.iMyProfileRegistration .blockAvatar button.edit {
  position: absolute;
  right: -10px;
  top: 0;
  top: -25px;
  /* height: 36px; */
  /*           width: 36px; */
  padding: 10px;
  background-color: transparent;
  font-size: 12px;
  line-height: 1.4;
}
.iMyProfileRegistration .blockAvatar button.edit:active, .iMyProfileRegistration .blockAvatar button.edit:hover {
  color: #0B0D80 !important;
}
.iMyProfileRegistration .blockAvatar button.edit i {
  font-size: 16px;
  color: #828790;
  line-height: normal;
}
.iMyProfileRegistration .blockAvatar button.edit:hover i {
  color: #3A29F5;
}
.iMyProfileRegistration .blockAvatar .cancelar {
  position: absolute;
  right: 0;
  top: 0;
  top: -22px;
}
.iMyProfileRegistration .formAnim {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.iMyProfileRegistration .formAnim > .textLink {
  display: flex;
  align-self: flex-end;
  justify-content: flex-end;
}
.iMyProfileRegistration .formAnim > .textLink p {
  font-size: 12px;
  color: #3B64F6;
}
.iMyProfileRegistration .blockChangePassword {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.iMyProfileRegistration .groupFormAnim {
  position: relative;
}
.iMyProfileRegistration .groupFormAnim .textLinkMod {
  justify-content: flex-end;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  padding: 5px 0;
  cursor: pointer;
}
.iMyProfileRegistration .groupFormAnim .textLinkMod p {
  font-weight: 300;
  color: #3B64F6;
  font-size: 12px;
  line-height: 1.4;
}
.iMyProfileRegistration .groupFormAnim .textLinkMod.showP {
  display: inline-flex;
}
.iMyProfileRegistration .groupFormAnim .textLinkMod.hideP {
  display: none;
}
.iMyProfileRegistration .groupFormAnim .textLinkMod:active p, .iMyProfileRegistration .groupFormAnim .textLinkMod:hover p {
  color: #0B0D80;
}
.iMyProfileRegistration .forms {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- registro cambio de contrasena ---*/
.iMyProfileRegistration button.avatar {
  /*         overflow: hidden; */
  display: grid;
  grid-template-areas: "b";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 80px;
  height: 80px;
  border-radius: 50px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.iMyProfileRegistration button.avatar figure {
  display: grid;
  grid-area: b;
  order: 0;
}
.iMyProfileRegistration button.avatar span.maskAvatar {
  order: 2;
  display: grid;
  grid-area: b;
  width: 80px;
  height: 80px;
}
.iMyProfileRegistration button.avatar span.maskAvatar img {
  width: 100%;
}

/* --- text/button verificar email ---*/
.iMyProfileRegistration .textVerificada,
.iMyProfileRegistration .btnResendEmail,
.iMyProfileRegistration .btnValidateEmail {
  margin: 10px 0;
}
.iMyProfileRegistration .textVerificada span,
.iMyProfileRegistration .btnResendEmail span,
.iMyProfileRegistration .btnValidateEmail span {
  font-weight: 400;
}
.iMyProfileRegistration .textVerificada.showP,
.iMyProfileRegistration .btnResendEmail.showP,
.iMyProfileRegistration .btnValidateEmail.showP {
  display: block;
}
.iMyProfileRegistration .textVerificada.hideP,
.iMyProfileRegistration .btnResendEmail.hideP,
.iMyProfileRegistration .btnValidateEmail.hideP {
  display: none;
}
.iMyProfileRegistration .textVerificada i {
  margin-right: 5px;
}

.cryptoTransaction {
  padding: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 11px;
}
@media (width > 600px) {
  .cryptoTransaction {
    padding: 0;
  }
}
.cryptoTransaction .sectionReminder,
.cryptoTransaction .sectionPayment,
.cryptoTransaction .sectionAmount,
.cryptoTransaction .sectionTransaction {
  padding: 15px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
  background-color: #FFFFFF;
}
.cryptoTransaction .sectionReminder p span.em,
.cryptoTransaction .sectionPayment p span.em,
.cryptoTransaction .sectionAmount p span.em,
.cryptoTransaction .sectionTransaction p span.em {
  color: #3B64F6;
}
.cryptoTransaction .sectionReminder {
  background-color: #ffa81c;
  display: none;
}
.cryptoTransaction .sectionReminder.showP {
  display: flex;
}
.cryptoTransaction .sectionReminder.hideP {
  display: none;
}
.cryptoTransaction span.share {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.cryptoTransaction span.share p.textCopy {
  font-family: "SoraVariable", sans-serif;
  color: #3A29F5;
  font-size: 7.8px;
  font-weight: 600;
  opacity: 0;
}
.cryptoTransaction span.share p.textCopy.visible {
  opacity: 1;
}

.sectionPayment {
  row-gap: 6px;
}
.sectionPayment div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}
.sectionPayment div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 15px;
}
.sectionPayment div:nth-of-type(2) span.btnQR {
  display: inline-flex;
  height: 20px;
  align-items: center;
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 5px;
       column-gap: 5px;
  padding-right: 13px;
}
.sectionPayment div:nth-of-type(2) span.btnQR i,
.sectionPayment div:nth-of-type(2) span.btnQR p {
  color: #828790;
}
.sectionPayment div:nth-of-type(2) span.btnQR:hover :is(p, i) {
  color: #3A29F5;
}

.sectionAmount {
  row-gap: 6px;
}
.sectionAmount div {
  display: flex;
  flex-direction: coumn;
  row-gap: 8px;
}
.sectionAmount p:nth-last-of-type(1) {
  margin-top: 6px;
  color: #828790;
}

.sectionTransaction {
  display: flex;
  flex-direction: column;
  row-gap: 18px;
}
.sectionTransaction .remainingTimeRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.sectionTransaction .remainingTimeRow span:nth-of-type(1) {
  display: flex;
  -moz-column-gap: 7px;
       column-gap: 7px;
  align-items: center;
}
.sectionTransaction .remainingTimeRow span:nth-of-type(1) i {
  font-size: 16px;
  align-self: flex-start;
}
.sectionTransaction .remainingTimeRow span:nth-of-type(1) p {
  letter-spacing: 0.22px;
}
.sectionTransaction .remainingTimeRow .remainingTime {
  background-color: #C0CAEE;
  border-radius: 10px;
  width: 79px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sectionTransaction .remainingTimeRow .remainingTime p {
  font-family: "SoraVariable", sans-serif;
  font-size: 11px;
  color: #3A29F5;
  font-weight: 600;
}
.sectionTransaction div.event_billboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sectionTransaction .eventP {
  display: flex;
  -moz-column-gap: 7px;
       column-gap: 7px;
}
.sectionTransaction .eventP i {
  display: flex;
  align-self: flex-start;
}
.sectionTransaction .eventP .inf {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}
.sectionTransaction .eventP .inf .rowP {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.sectionTransaction .eventP .inf .rowP span {
  display: inline-flex;
  -moz-column-gap: 7px;
       column-gap: 7px;
}
.sectionTransaction .eventP .inf .rowP .time {
  display: flex;
  display: inline-flex;
  align-items: flex-end;
  justify-self: flex-end;
}
.sectionTransaction div.transicion {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.sectionTransaction div.transicion span {
  height: 19px;
  display: flex;
  -moz-column-gap: 7px;
       column-gap: 7px;
  align-items: last baseline;
}
.sectionTransaction div.transicion span i {
  align-self: center;
}
.sectionTransaction div.transicion span p:nth-of-type(1) {
  letter-spacing: 0.12px;
}
.sectionTransaction div.transicion span .numPercentage {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-left: 1rem;
}
.sectionTransaction div.transicion .progressBar {
  height: 9px;
  width: 100%;
  background-color: #D8D8D8;
  background-color: rgba(216, 216, 216, 0.25);
  border-radius: 6px;
}
.sectionTransaction div.transicion .progressBar .progressBarValue {
  height: 9px;
  width: 10%;
  border-radius: 6px;
  background-color: #3A29F5;
}
.sectionTransaction div.transicion p.infText {
  margin-top: 16px;
  letter-spacing: 0.24px;
}

nav.navBottom {
  position: fixed;
  bottom: 0;
  height: 68px;
  width: 100%;
  background-color: #FFFFFF;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  box-shadow: 0px -4px 4px 0px rgba(219, 219, 219, 0.25);
  z-index: 10;
}
@media (width > 600px) {
  nav.navBottom {
    display: none;
  }
}
nav.navBottom ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  list-style: none;
  flex-wrap: nowrap;
  max-width: 600px;
  padding: 0 15px;
  overflow: hidden;
}
nav.navBottom ul li {
  overflow: hidden;
  display: flex;
  flex: 1 1 25%;
  justify-content: center;
}

nav.navBottom ul li a {
  display: flex;
  flex-direction: column;
  row-gap: 3px;
  justify-content: space-between;
  align-items: center;
}
nav.navBottom ul li a i {
  font-size: 19px;
  color: #828790;
}
nav.navBottom ul li a p {
  font-family: "SoraVariable", sans-serif;
  font-size: 9px;
  font-weight: 400;
}
nav.navBottom ul li a:hover i, nav.navBottom ul li a:hover p, nav.navBottom ul li a:active i, nav.navBottom ul li a:active p {
  color: #3A29F5;
}

.mySuscriptions {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
  row-gap: 15px;
  width: 100%;
  height: 100%;
  min-height: calc(100dvh - 125px);
}

.sectionNav {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  width: 100%;
}

.sectionNav > span {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.sectionNav > span > p {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  display: inline-flex;
  overflow: hidden;
  width: 100%;
  display: block;
}

.navSuscriptions {
  height: 33px;
  width: 100%;
}
.navSuscriptions ul {
  list-style: none;
  display: flex;
  -moz-column-gap: 20px;
       column-gap: 20px;
  position: relative;
}
.navSuscriptions li button {
  font-family: "SoraVariable", sans-serif;
  color: #2A2E30;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  display: flex;
  height: 33px;
  border-radius: 16px;
  align-items: center;
  padding: 0 20px;
  background-color: transparent;
}
.navSuscriptions li:nth-of-type(1).active button {
  background-color: rgba(58, 41, 245, 0.25);
  color: #3A29F5;
}
.navSuscriptions li:nth-of-type(2).active button {
  background-color: rgba(169, 35, 35, 0.25);
  color: #A92323;
}
.navSuscriptions li:nth-last-of-type(1) {
  position: absolute;
  right: 10px;
}
.navSuscriptions li:nth-last-of-type(1).active button {
  background-color: rgba(58, 41, 245, 0.25);
  color: #3A29F5;
  right: 0px;
}

.sectionBoxService {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: 100%;
}

.boxService {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding: 20px 15px;
  border-radius: 12px;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
  position: relative;
}
.boxService button.btnOptions {
  width: 45px;
  height: 45px;
  padding: 15px;
  top: 5px;
  right: 5px;
  position: absolute;
  background-color: transparent;
}
.boxService button.btnOptions i {
  font-size: 15px;
}
.boxService button.btnOptions:hover i {
  color: #3A29F5;
}

.boxService .serviceP > p {
  letter-spacing: 0.24px;
}
.boxService .serviceP > .suscriptionP .typeSuscription .type.grey {
  color: #828790;
}
.boxService .serviceP > .suscriptionP > .price {
  display: flex;
  flex-direction: column;
}
.boxService .serviceP > .suscriptionP > .price > * {
  display: flex;
  align-self: flex-end;
}

.boxService:has(> .seeDetail) {
  padding: 20px 15px 0;
}

.serviceP:has(+ .seeDetail) {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 20px;
}

.serviceP .changePlan {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.serviceP .changePlan > .openClose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.serviceP .changePlan > .openClose > .close {
  display: none;
}
.serviceP .changePlan > .openClose > .open {
  display: flex;
}

.serviceP .contentTypes {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms;
}
.serviceP .contentTypes.active {
  grid-template-rows: 1fr;
}
.serviceP .contentTypes .wrapper {
  overflow: hidden;
}
.serviceP .contentTypes ul.inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
  overflow-y: auto;
  height: 100%;
  max-height: calc(100dvh - 430px);
  padding-right: 14px;
}
.serviceP .contentTypes li.option {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 30px !important;
  min-height: 30px;
  align-items: center;
}
.serviceP .contentTypes li.option label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}
.serviceP .contentTypes li.option label input {
  margin: 0;
}

.serviceP:has(.changePlan) > button.btnPrimaryArrow {
  margin-top: -15px;
}

/* link renovar suscipcion */
.renewSuscriptionLink {
  border-bottom: 1px solid #f1f1f1;
  padding: 19px 0;
  display: none;
}
.renewSuscriptionLink > button {
  height: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: transparent;
}
.renewSuscriptionLink i {
  background-color: #3B64F6;
  color: #FFFFFF;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.renewSuscriptionLink.showP {
  display: flex;
}

.seeDetail {
  display: flex;
  flex-direction: column;
}

.acordionSeeDetail .openClose {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*    border-top: 1px solid $light-grey-line; */
  -moz-column-gap: 10px;
       column-gap: 10px;
  font-size: 11px;
}
.acordionSeeDetail .openClose span {
  display: flex;
  -moz-column-gap: 5px;
       column-gap: 5px;
  color: #3B64F6;
  padding: 15px;
  align-items: center;
}
.acordionSeeDetail .openClose span p {
  color: #3B64F6;
  font-size: 11px;
}
.acordionSeeDetail .openClose span i {
  font-size: 13px;
  display: flex;
  align-items: center;
  color: inherit;
}
.acordionSeeDetail .openClose span.close {
  display: none;
}
.acordionSeeDetail .openClose span.open {
  display: flex;
}
.acordionSeeDetail .contentOnly {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  font-family: "SoraVariable", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.2;
  transition: grid-template-rows 300ms;
}
.acordionSeeDetail .contentOnly.active {
  grid-template-rows: 1fr;
}
.acordionSeeDetail .contentOnly ul.inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (height <= 700px) {
  .acordionSeeDetail .contentOnly ul.inner {
    overflow-y: auto;
    height: 100%;
    max-height: 152px;
  }
  .acordionSeeDetail .contentOnly ul.inner:has(> li + li + li) {
    box-shadow: inset 0 -6px 6px 0 rgba(219, 219, 219, 0.25);
  }
}
@media (height >= 701px) {
  .acordionSeeDetail .contentOnly ul.inner {
    overflow-y: auto;
    height: 100%;
  }
  .acordionSeeDetail .contentOnly ul.inner:has(> li + li + li) {
    box-shadow: inset 0 -6px 6px 0 rgba(219, 219, 219, 0.25);
  }
}
@media (width >= 600px) {
  .acordionSeeDetail .contentOnly ul.inner {
    overflow-y: unset;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
  }
  .acordionSeeDetail .contentOnly ul.inner:has(> li + li + li) {
    box-shadow: none;
  }
}
.acordionSeeDetail .contentOnly ul.inner li {
  border-top: 1px solid #f1f1f1;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  width: 100%;
}
.acordionSeeDetail .contentOnly ul.inner li:nth-of-type(1) {
  border-top: none;
}
.acordionSeeDetail .contentOnly ul.inner li:nth-last-child(1) {
  border-bottom: 1px solid #f1f1f1;
}
.acordionSeeDetail .contentOnly ul.inner li > div {
  display: flex;
  justify-content: space-between;
  row-gap: 15px;
}
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) a,
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) span {
  display: flex;
  -moz-column-gap: 5px;
       column-gap: 5px;
  align-items: center;
}
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) a i,
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) span i {
  font-size: 16px;
}
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) a :is(p, i) {
  color: #828790;
}
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) a:hover :is(p, i) {
  color: #3A29F5;
}
.acordionSeeDetail .contentOnly ul.inner li > div:nth-last-of-type(1) a i {
  font-size: 13px;
  align-self: flex-start;
}

.sectionTitleRenew {
  display: flex;
  flex-direction: column;
}
.sectionTitleRenew a {
  display: flex;
  align-self: flex-end;
}

.sectionInfoText {
  height: 100%;
  /*    min-height: calc(80dvh - 220px); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sectionInfoText .blockText {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}
.sectionInfoText .blockText > p {
  text-align: center;
  font-family: "SoraVariable", sans-serif;
  color: #828790;
  font-size: 36px;
  font-weight: 400;
}

.articleP:has(.optionsCards) {
  margin-bottom: 0 !important;
}

.optionsCards {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: calc(100dvh - 55px);
  position: relative;
  height: 100%;
}

/*  .optionsCards:has( .sectionFisrtStep){
   padding: 0 24px;
 } */
.sectionArrow {
  padding: 10px 24px 0px;
}
@media (width >= 600px) {
  .sectionArrow {
    padding: 10px 24px 0px;
  }
}

.sectionInfoCards {
  padding: 10px 24px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (width >= 600px) {
  .sectionInfoCards {
    padding: 10px 24px 10px;
  }
}
.sectionInfoCards span {
  display: inline-flex;
  flex-direction: column;
}
.sectionInfoCards button.btnNewCardText {
  font-size: 10px;
  color: #828790;
  font-family: "SoraVariable", sans-serif;
  font-weight: 400;
  background-color: transparent;
  display: none;
  -moz-column-gap: 5px;
       column-gap: 5px;
}
@media (height < 844px) {
  .sectionInfoCards button.btnNewCardText {
    display: flex;
  }
}
.sectionInfoCards button.btnNewCardText i {
  background-color: #3B64F6;
  color: #F7F9FD;
  font-style: normal;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 50%;
  line-height: 14px;
  font-weight: 400;
}
.sectionInfoCards button.btnNewCardText:hover, .sectionInfoCards button.btnNewCardText:active {
  color: #0B0D80;
  border-color: #0B0D80;
}
.sectionInfoCards button.btnNewCardText:hover i, .sectionInfoCards button.btnNewCardText:active i {
  color: #FFFFFF;
  background-color: #0B0D80;
}

.contentInfoRecover {
  width: 100%;
  overflow: hidden;
  padding: 0 24px 5px;
}
.contentInfoRecover .infoRecover {
  margin: 0 !important;
}

.btnBorderBlack {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  width: 154px;
  gap: unset;
  height: unset;
  font-size: 14px;
  line-height: 1;
  align-self: center;
}
.btnBorderBlack p {
  font-size: inherit;
  line-height: 1;
}
.btnBorderBlack i.icon-add {
  line-height: 1;
  font-size: 14px;
  align-self: center;
  padding: 1px;
  border: 20px;
  padding: 1px;
}

.sectionFisrtStep {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 3dvh;
  margin: 5dvh auto;
}
.sectionFisrtStep .textInfo {
  width: 100%;
  max-width: 400px;
}
.sectionFisrtStep .textInfo p {
  font-family: "SoraVariable", sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #828790;
  letter-spacing: 0.3px;
  text-align: center;
}
@media (width >= 390px) {
  .sectionFisrtStep .textInfo p {
    font-size: 36px;
    letter-spacing: 0.36px;
  }
}
.sectionFisrtStep .cardBorder {
  border: 1px solid #D8D8D8;
  width: 100%;
  max-height: 195px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  max-width: 346px;
  aspect-ratio: 345/195;
}
.sectionFisrtStep .cardBorder:hover, .sectionFisrtStep .cardBorder:active {
  border-color: #0B0D80;
}

.sectionAddCards {
  display: flex;
  flex-direction: column;
  /*  height: calc(90dvh - 170px); */
  height: calc(90dvh - 205px);
  justify-content: space-evenly;
  position: relative;
}
@media (width >= 500px) {
  .sectionAddCards {
    justify-content: unset;
    height: unset;
    padding: 10px 24px 28px;
    overflow-y: visible;
  }
}

.navigationS ul {
  display: flex;
  -moz-column-gap: 24px;
       column-gap: 24px;
  justify-self: center;
}
.navigationS ul li {
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  overflow: hidden;
}
.navigationS ul li a.anchorP {
  width: 100%;
  height: 100%;
  background-color: #D8D8D8;
}
.navigationS ul li a.anchorP.active {
  background-color: #3A29F5;
}

.sliderCss {
  width: 100%;
  max-width: 600px;
  display: block;
}
@media (width < 500px) {
  .sliderCss {
    display: flex;
    flex-direction: column;
  }
}
@media (width >= 500px) {
  .sliderCss {
    overflow-y: visible;
  }
}

.iSliderCss {
  perspective: 1300px;
  display: inline-block;
  text-align: left;
  position: relative;
  width: 100%;
}
@media (width >= 500px) {
  .iSliderCss {
    overflow-y: visible;
  }
}

.iSliderCss > .ulSlider {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  overflow-x: scroll;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  padding-top: 3px;
  /* prevent accidentally going back or triggering other swipe events */
  overscroll-behavior: contain;
  /* hide scroll bar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* momentum scroll on iOS */
}
.iSliderCss > .ulSlider.snap {
  scroll-snap-type: x mandatory;
  /* disbable vertical scroll for touch */
  touch-action: pan-x;
}
.iSliderCss > .ulSlider.smooth {
  scroll-behavior: smooth;
}
@media (width >= 500px) {
  .iSliderCss > .ulSlider {
    overflow: visible;
    display: grid;
    gap: 19px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr auto;
    grid-template-areas: "card2 card2 card2 card3 card3 card3" "card4 card4 card4 card5 card5 card5" ".  card1 card1 card1 card1 .";
  }
}

.iSliderCss > .ulSlider > .slide {
  scroll-snap-align: start;
  position: relative;
  display: inline-flex;
  width: 90%;
  cursor: grab;
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  box-sizing: border-box;
  aspect-ratio: 345/195;
  background-color: transparent;
  justify-content: center;
  /*    &:nth-last-child(1) {
        width: 100%;
        aspect-ratio: 345/176;
     }   
     &:nth-last-child(1) > .btnNewCard,
     &:nth-last-child(1) > .cardSlider{
        margin-right: 10%;
        width: 86.5%;
        height: 95.8%;
        @media (width >= 500px) {
           margin-right: unset;
           width: 100%;
           height: 100%;
        }
     } */
}
@media (width < 500px) {
  .iSliderCss > .ulSlider > .slide.lastSlide {
    width: 100%;
    aspect-ratio: 345/176;
  }
  .iSliderCss > .ulSlider > .slide.lastSlide > .cardSlider {
    width: 86.5%;
    height: 95.8%;
    margin-right: 10%;
  }
}
.iSliderCss > .ulSlider > .slide:only-child {
  left: 50%;
  transform: translateX(-50%);
}
@media (width >= 500px) {
  .iSliderCss > .ulSlider > .slide {
    overflow: visible;
    display: grid;
    width: 100%;
    cursor: default;
  }
  .iSliderCss > .ulSlider > .slide > .cardSlider {
    border-radius: 12px;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(1) {
    grid-area: card1;
    margin: 15px auto 35px;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(1) > .cardSlider {
    border-radius: 18px;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(1) > .cardSlider > .card {
    padding: 30px 30px 23px;
    border-radius: 18px;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(1) > .cardSlider > .card .numCard, .iSliderCss > .ulSlider > .slide:nth-of-type(1) > .cardSlider > .card > span p {
    font-size: 12px;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(2) {
    grid-area: card2;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(3) {
    grid-area: card3;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(4) {
    grid-area: card4;
  }
  .iSliderCss > .ulSlider > .slide:nth-of-type(5) {
    grid-area: card5;
  }
  .iSliderCss > .ulSlider > .slide:nth-last-child(1) {
    aspect-ratio: 345/195;
    width: 100%;
  }
  .iSliderCss > .ulSlider > .slide:nth-last-child(1) > div {
    margin-right: 0;
    width: 100%;
  }
}
.iSliderCss > .ulSlider > .slide .cardSlider:has(> .btnNewCard) {
  border: 1px solid #D8D8D8;
  box-shadow: none;
}
@media (width >= 500px) {
  .iSliderCss > .ulSlider > .slide .cardSlider:has(> .btnNewCard) {
    border: none;
  }
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard {
  cursor: pointer;
  display: flex;
  margin: 0 auto;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
  align-self: center;
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard span {
  display: flex;
  -moz-column-gap: 4px;
       column-gap: 4px;
  align-items: center;
  padding: 10px;
  justify-content: center;
  font-size: 10px;
}
@media (width >= 500px) {
  .iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard span {
    width: 100%;
  }
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard span > p {
  font-size: inherit;
  line-height: normal;
  padding: 2px;
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard span > i {
  background-color: #3B64F6;
  color: #F7F9FD;
  border-radius: 30px;
  aspect-ratio: 1/1;
  font-size: inherit;
  font-style: normal;
  padding: 2px;
  overflow: hidden;
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard:hover {
  border-color: #0B0D80;
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard:hover span p {
  color: #0B0D80;
}
.iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard:hover span i {
  background-color: #0B0D80;
  color: #FFFFFF;
}
@media (width >= 500px) {
  .iSliderCss > .ulSlider > .slide .cardSlider > .btnNewCard {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid #D8D8D8;
  }
}
.iSliderCss > .ulSlider > .slide .cardSlider {
  display: inline-flex;
  box-sizing: border-box;
  height: unset;
  width: 96%;
  height: 96%;
  border-radius: 2.6vw;
  border-radius: 12px;
  transform: translateX(6%);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
@media (width >= 500px) {
  .iSliderCss > .ulSlider > .slide .cardSlider {
    transform: none;
    width: 100%;
    height: 100%;
    aspect-ratio: 345/195;
    overflow: visible;
    /*       &:nth-child(1){
             border-radius: 18px;
          } */
  }
}
.iSliderCss > .ulSlider > .slide .cardSlider.active {
  outline: 1px solid #938AF0;
  outline-offset: 2px;
}

.cardSlider > .card {
  position: unset;
  padding: 8vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 12px;
  cursor: pointer;
}
@media (width > 481px) {
  .cardSlider > .card {
    padding: 34px;
  }
}
@media (width >= 500px) {
  .cardSlider > .card {
    padding: 20px 20px;
    overflow: visible;
  }
}
.cardSlider > .card span {
  display: flex;
  justify-content: space-between;
}
.cardSlider > .card span p.name {
  font-size: 4vw;
  font-weight: 400;
  color: white;
  letter-spacing: unset;
}
@media (width >= 500px) {
  .cardSlider > .card span p.name {
    font-size: 9px;
  }
}
.cardSlider > .card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 23.19px;
  width: 100%;
}
.cardSlider > .card span p.numCard {
  font-size: 4vw;
  font-weight: 400;
  color: #FFFFFF;
}
@media (width >= 500px) {
  .cardSlider > .card span p.numCard {
    font-size: 9px;
  }
}
.cardSlider > .card span p.predeterminada {
  display: flex;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 0.8px;
  background-color: rgba(255, 255, 255, 0.25);
  padding: 1.8vw 2.5vw;
  border-radius: 100px;
  font-size: 2.5vw;
}
@media (width >= 500px) {
  .cardSlider > .card span p.predeterminada {
    font-size: 8px;
    padding: 6px 8px;
  }
}
.cardSlider > .card button.btnIconEdit {
  padding: 5px 0 5px 5px;
  background-color: transparent;
}
.cardSlider > .card button.btnIconEdit i.icon-edit {
  color: #FFFFFF;
}
.cardSlider > .card button.btnIconEdit i.icon-edit:hover {
  color: #C0CAEE;
}
.cardSlider > .card:hover > span > button .icon-edit {
  color: #C0CAEE;
}

.ulSlider .slide:nth-child(1) > .cardSlider > .card {
  background: linear-gradient(73deg, #2963ff 0%, #3a29f5 47.88%, #22188f 98.52%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.ulSlider .slide:nth-child(2) > .cardSlider > .card {
  background: linear-gradient(253deg, #2a2e30 44.21%, #8f9ba0 178.26%);
}

.ulSlider .slide:nth-child(3) > .cardSlider > .card {
  background: linear-gradient(253deg, #e2b356 57.72%, #c59435 171.27%);
}

.ulSlider .slide:nth-child(4) > .cardSlider > .card {
  background: linear-gradient(73deg, #22188f 0%, #2a2e30 98.52%);
}

.ulSlider .slide:nth-child(5) > .cardSlider > .card {
  background: linear-gradient(253deg, #606a70 3.56%, #8f9ba0 178.26%);
}

.iSliderCss > .navigationS {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 22px;
}
@media (width >= 500px) {
  .iSliderCss > .navigationS {
    display: none;
  }
}

@media (width < 500px) {
  .slide:has(> .cardSlider > .btnNewCard) {
    display: none;
    width: 100%;
    aspect-ratio: 345/176;
  }
  .slide:has(> .cardSlider > .btnNewCard) > .cardSlider {
    margin-right: 10%;
    width: 86.5%;
    height: 95.8%;
  }
}
.sectionAddCards .btnIconEdit.btnSlider {
  display: none;
}
@media (width < 500px) {
  .sectionAddCards .btnIconEdit.btnSlider {
    /*          position: absolute;
             right:7%; 
             top: 0; */
    display: flex;
    align-self: flex-end;
    padding: 0 7%;
    margin: 5px 0;
    font-size: 14px;
  }
}
.sectionAddCards .btnBorderBlack {
  display: none;
}
@media (width < 500px) {
  .sectionAddCards .btnBorderBlack {
    display: flex;
    align-self: center;
  }
}

.dataCardModal {
  background-color: #FFFFFF;
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dataCardModal span.spanActions {
  display: flex !important;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}
.dataCardModal span.spanActions button {
  background-color: transparent;
  color: #CA0015;
  display: inline-flex;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
  font-family: "SoraVariable", sans-serif;
  font-weight: 400;
  font-size: 10px;
}
.dataCardModal span.spanActions button i {
  color: #A92323;
}
.dataCardModal span.spanActions button:hover i, .dataCardModal span.spanActions button:hover {
  color: #2A2E30;
}
.dataCardModal .info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dataCardModal .info .fakeInput {
  display: flex;
  background-color: #E8F0FE;
  /*  height: 42px; */
  height: 46px;
  border-radius: 10px;
  width: 100%;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0 0 15px;
}
.dataCardModal .info .fakeInput > p:nth-of-type(1) {
  font-size: 8px;
  color: black;
  font-weight: 400;
  letter-spacing: 0.08px;
  line-height: 0.9;
}
.dataCardModal .info .fakeInput > p:nth-of-type(2) {
  font-size: 16px;
  color: black;
  font-weight: 400;
  /*  letter-spacing: 0.11px; */
  /*   line-height: 0.9; */
  line-height: 1.1;
}
.dataCardModal .info .two {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.dataCardModal .info .two .fakeInput {
  width: 50%;
}

/* .optionsCards:has( >.sectionArrow) > .sectionInfoCards{
   padding: 15px 24px;
} */
.contentIframe {
  padding-top: 3px;
}

.activePurchases {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
  row-gap: 30px;
  height: 100%;
  min-height: calc(100dvh - 125px);
}

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

.sectionInfo:has(+ .sectionProgressBar) {
  margin-top: 5px;
}

.boxVerifyAccount,
.boxBalance {
  border-radius: 12px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 10px;
       column-gap: 10px;
  height: 69px;
  align-items: center;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
}

.boxVerifyAccount {
  background-color: #ffa81c;
}
.boxVerifyAccount button {
  background-color: rgba(255, 255, 255, 0.75);
  text-wrap: nowrap;
  color: #3A29F5;
  padding: 10px;
  border-radius: 50px;
  height: 33px;
  display: flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.2px;
  line-height: normal;
}

.boxBalance {
  background-color: rgba(59, 100, 246, 0.25);
}
.boxBalance span {
  display: flex;
  align-items: center;
  -moz-column-gap: 6px;
       column-gap: 6px;
  font-size: 16px;
}
.boxBalance > p {
  color: #3A29F5;
  font-size: 20px;
  font-weight: 700;
  text-wrap: nowrap;
}

.activePurchases .boxService {
  padding: 20px 15px;
  row-gap: 10px;
}

.activePurchases .boxService .serviceP {
  margin: unset;
}

.padB-20 {
  padding-bottom: 20px !important;
}

.padB-12 {
  padding-bottom: 12px !important;
}

.marB-12 {
  margin-bottom: 12px !important;
}

.borB-1 {
  border-bottom: 1px solid #f1f1f1;
}

.padB-0 {
  padding-bottom: 0 !important;
}

.gap-0 {
  gap: 0 !important;
}

/* ---  ---*/
.sectionResetPassword {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 23px;
  width: 100%;
}
@media (width >= 600px) {
  .sectionResetPassword {
    padding-top: 70px;
  }
}

.iResetPassword {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}
@media (width >= 600px) {
  .iResetPassword {
    padding: 0;
  }
}
.iResetPassword .blockStart {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: 20px;
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
}
.iResetPassword .blockStart > div .btnTextCancel {
  display: flex;
  align-self: flex-end;
}
.iResetPassword .blockStart > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.iResetPassword .blockStart > div:nth-of-type(1) p:nth-of-type(3),
.iResetPassword .blockStart > div:nth-of-type(1) p:nth-of-type(2) {
  line-height: normal;
  letter-spacing: 0.21px;
}

.faqs {
  display: flex;
  flex-direction: column;
  padding: 21px 25px;
  row-gap: 20px;
  width: 100%;
}

li.item {
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
}

.itemBtn {
  display: flex;
  justify-content: space-between;
  height: 29px;
  align-items: center;
  cursor: pointer;
}
.itemBtn i.icon-down.down,
.itemBtn i.icon-up.up {
  font-size: 18px;
}
.itemBtn i.icon-dwon.down {
  display: flex;
}
.itemBtn i.icon-up.up {
  display: none;
}
.itemBtn .textQ {
  font-size: 14px;
  font-weight: 400;
}
.itemBtn .textQ.active {
  color: #3B64F6;
  font-weight: 700;
}

.contentItem {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms;
  overflow: hidden;
}
.contentItem.active {
  grid-template-rows: 1fr;
}
.contentItem .inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contentItem .inner p {
  padding-bottom: 0.6em;
}
.contentItem .inner p:nth-of-type(1) {
  padding-top: 20px;
}

.waiting {
  height: 100%;
  padding: 15px 15px 40px;
}
@media (width >= 600px) {
  .waiting {
    padding: 40px 15px;
  }
}
.waiting > .info {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.waiting > .blockImg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.waiting > .blockImg .imgWaiting {
  display: flex;
  justify-content: center;
  align-items: center;
}
.waiting > .blockImg span.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: center;
}
.waiting > .blockImg .pPeticiones {
  vertical-align: baseline;
}
.waiting > .blockImg .pPeticiones span {
  font-size: 16px;
  font-weight: 600;
}

.imgWaiting .wrapper {
  width: 100px;
  margin: 40px auto 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}
@media (width >= 600px) {
  .imgWaiting .wrapper {
    margin: 62px auto 40px;
    width: 136px;
  }
}
.imgWaiting .wrapper span.spinner {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: #3A29F5;
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 100%;
  z-index: -1;
}
.imgWaiting .wrapper span.spinner.animation {
  animation: rotateSpinner 1500ms linear infinite;
  background: linear-gradient(180deg, rgba(58, 41, 241, 0) 10%, rgba(58, 41, 241, 0.82) 70%);
}
.imgWaiting .wrapper figure {
  width: calc(100% - 6px);
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 1/1;
}
@media (width >= 600px) {
  .imgWaiting .wrapper figure {
    width: calc(100% - 8px);
  }
}
.imgWaiting .wrapper figure img {
  aspect-ratio: 1/1;
  width: 100%;
  background: transparent;
}

.waiting .blockProcess {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 35px;
}
@media (width >= 600px) {
  .waiting .blockProcess {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
.waiting .blockProcess .step {
  display: flex;
  width: 100%;
  max-width: 188px;
  border-radius: 12px;
  background-color: #FFFFFF;
  border: 1px solid #26A923;
  aspect-ratio: 188/73;
  align-items: center;
  justify-content: center;
}
.waiting .blockProcess .step .inner {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.waiting .blockProcess .step .inner i {
  display: inline-flex;
  align-items: center;
  width: 24px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  align-self: center;
}
.waiting .blockProcess .step .inner i.icon-check {
  padding: 4px;
}
.waiting .blockProcess .step .inner i.icon-celebration, .waiting .blockProcess .step .inner i.icon-settings {
  font-size: 26px;
  color: #2A2E30;
}
@media (width >= 600px) {
  .waiting .blockProcess .step {
    flex: 0 1 100%;
  }
}
.waiting .blockProcess .step.inActive {
  border: unset;
}
.waiting .blockProcess .step.inActive .inner {
  opacity: 0.5;
}
.waiting .blockProcess span.line {
  width: 1px;
  background-color: #26A923;
  flex: 0 0 35px;
}
@media (width >= 600px) {
  .waiting .blockProcess span.line {
    width: inherit;
    height: 1px;
    flex: 0 0 17px;
  }
}
.waiting .blockProcess span.line:has(+ .inActive) {
  background-color: #D8D8D8;
}

.blockImportant,
.waiting .blockImportant {
  background-color: #ffa81c;
  padding: 10px 20px;
  border-radius: 12px;
  margin-top: 46px;
}
@media (width >= 600px) {
  .blockImportant,
  .waiting .blockImportant {
    margin-top: 60px;
  }
}
.blockImportant.marB-28,
.waiting .blockImportant.marB-28 {
  margin-bottom: 28px;
}
.blockImportant.topP,
.waiting .blockImportant.topP {
  margin-top: 0;
  margin-bottom: 18px;
  padding: 10px 15px;
}
@media (width >= 600px) {
  .blockImportant.topP,
  .waiting .blockImportant.topP {
    display: none;
  }
}
@media (width < 600px) {
  .blockImportant.bottomP,
  .waiting .blockImportant.bottomP {
    display: none;
  }
}
@media (width >= 600px) {
  .blockImportant.bottomP,
  .waiting .blockImportant.bottomP {
    display: flex;
  }
}

/* .waiting:has(>.topP){
    padding: 15px 15px 40px;

} */
@keyframes rotateSpinner {
  to {
    transform: rotate(360deg);
  }
}
.promotions {
  width: 100%;
  padding: 25px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
  min-height: calc(100dvh - 125px);
}
.promotions .sectionNav {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  width: 100%;
}

.navPromotions {
  height: 33px;
  width: 100%;
  overflow: hidden;
  display: flex;
}
.navPromotions ul {
  list-style: none;
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
}
.navPromotions li {
  display: inline-flex;
}
.navPromotions li button {
  font-family: "SoraVariable", sans-serif;
  color: #2A2E30;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  display: flex;
  height: 33px;
  border-radius: 16px;
  align-items: center;
  padding: 0 15px;
  background-color: transparent;
}
.navPromotions li button:active, .navPromotions li button:hover {
  color: #3B64F6;
}
.navPromotions li.active button {
  background-color: rgba(58, 41, 245, 0.25);
  color: #3A29F5;
}

.sectionNoPromotions {
  height: 100%;
  min-height: calc(85dvh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (height >= 1500px) {
  .sectionNoPromotions {
    height: 1280px;
    min-height: unset;
  }
}
.sectionNoPromotions .blockText {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}
.sectionNoPromotions .blockText p {
  text-align: center;
  font-family: "SoraVariable", sans-serif;
  color: #828790;
  font-size: 36px;
  font-weight: 400;
}

.sectionPromotions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 14px;
}

.cardPromotion {
  background-color: rgba(216, 216, 216, 0.25);
  border-radius: 12px;
  display: flex;
  height: 100%;
  flex-direction: column;
  width: 100%;
  filter: drop-shadow(0px 1px 4px rgba(209, 209, 209, 0.25));
}
.cardPromotion .blockInfo {
  background-color: #FFFFFF;
  padding: 16px 16px 16px 8px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cardPromotion .innerBlockInfo {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 14px;
}
.cardPromotion .innerBlockInfo figure {
  width: 103px;
  height: 53px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex: 0 0 103px;
}
.cardPromotion .innerBlockInfo figure img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.cardPromotion .innerBlockInfo .infoText {
  display: flex;
  align-items: center;
}
.cardPromotion .blockInfo .status {
  display: flex;
  min-height: 38px;
  width: 100%;
  align-items: center;
}
.cardPromotion .blockInfo .status .spanStatus {
  display: inline-flex;
  height: 100%;
  gap: 7px;
  align-items: center;
}
.cardPromotion .blockInfo .status .spanStatus i.icon-reopen {
  color: #ffa81c;
}
.cardPromotion .blockInfo .status .spanStatus i.icon-check {
  padding: 2px;
  font-size: 12px;
}
.cardPromotion .blockButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
}
.cardPromotion button.btnTextInner {
  height: 100%;
  width: 100%;
  background-color: transparent;
}
.cardPromotion button.btnTextInner p {
  color: #3B64F6;
  font-family: "SoraVariable", sans-serif;
  font-size: 14px;
}
.cardPromotion button.btnTextInner:hover p, .cardPromotion button.btnTextInner:active p {
  color: #0B0D80;
}

.mainP:has(.statusInformation) {
  background-color: #FFFFFF;
}

@media (width < 600px) {
  .mainP.addNavBottom:has(.statusInformation) > .articleP > .statusInformation {
    min-height: calc(100dvh - 125px) !important;
  }
}

.statusInformation {
  padding: 20px 20px 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  height: 100%;
  min-height: calc(100dvh - 55px);
}
.statusInformation > p {
  display: inline-flex;
  gap: 22px;
  margin-bottom: 15px;
}
.statusInformation > p i {
  margin-top: 3px;
  align-self: flex-start;
}
.statusInformation .contentInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}

.contentInfo .textInfo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.contentInfo .textInfo ul {
  list-style: unset;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contentInfo .blockLoader {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
}
.contentInfo .blockLoader figure {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.contentInfo .blockLoader figure img {
  /*  width: 130px;
   height: 98px; */
  width: 90px;
  height: 67.84px;
}
.contentInfo .blockLoader p {
  text-align: center;
}

.contentInfo .blockLoader.animation figure {
  width: 90px;
  height: 67.84px;
  overflow: visible;
}
.contentInfo .blockLoader.animation figure img {
  animation: rotateSpinner 1500ms linear infinite;
}

.contentInfo .blockImage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.contentInfo .blockImage figure {
  width: 100%;
  max-width: 230px;
  display: flex;
  align-self: center;
  margin: 25px;
  aspect-ratio: 230/250;
}
@media (width <= 375px) {
  .contentInfo .blockImage figure {
    max-height: 20dvh;
  }
}
.contentInfo .blockImage figure img {
  width: 100%;
}
.contentInfo .blockImage.desCentered > figure {
  margin: 25px 25px 25px 80px;
}

.contentInfo .textInfoBottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* .contentInfo .buttonsColumn{
    margin-top: auto;
} */
.contentWarning {
  border: 2px solid #A92323;
  border-radius: 12px;
  padding: 10px 21px;
  margin-bottom: 10px;
  overflow: hidden;
}
.contentWarning p {
  word-break: break-word;
}

* {
  box-sizing: border-box;
}

html:has(.articleLegal) {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

/* <span class="returnArrow"><i class="icon-arrow-left"></i> <p>Volver y continuar con la compra</p></span> */
.returnArrow {
  height: 34px;
  display: flex;
  align-items: center;
  -moz-column-gap: 13px;
       column-gap: 13px;
  cursor: pointer;
}
.returnArrow i {
  border-radius: 15px;
  background-color: #3B64F6;
  color: #FFFFFF;
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
  aspect-ratio: 1/1;
  font-weight: 600;
  font-size: 16px;
  padding: 7px;
}
.returnArrow:active i, .returnArrow:hover i {
  background-color: #0B0D80;
}

.headerP {
  background-color: #FFFFFF;
  height: 55px;
  box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}
@media (width > 600px) {
  .headerP {
    padding: 0;
  }
}

.innerHeaderP {
  width: 100%;
  max-width: 1550px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.innerHeaderP .logoHeaderP {
  width: 127px;
  display: flex;
  padding-left: 24px;
}
.innerHeaderP .logoHeaderP img {
  width: 100%;
  aspect-ratio: 32/5;
}
.innerHeaderP .navHeaderP {
  display: flex;
  padding: 15px 24px;
  background-color: transparent;
}
.innerHeaderP .navHeaderP img {
  aspect-ratio: 25/16;
  height: 12px;
}
.innerHeaderP .navHeaderP.hideP {
  display: none;
}

.headerP.legal .innerHeaderP {
  justify-content: center;
}
.headerP.legal .logoHeaderP {
  padding: 0;
}
.headerP.legal .logoHeaderP a {
  display: flex;
}

.bodyP {
  background-color: #F7F9FD;
  font-family: "SoraVariable", sans-serif;
}

.mainP {
  display: flex;
  justify-content: center;
  margin-top: 55px;
}
@media (width < 600px) {
  .mainP.addNavBottom .navBottom {
    display: flex;
  }
}
@media (width < 600px) {
  .mainP.addNavBottom .articleP {
    margin-bottom: 70px;
  }
}
.mainP .articleP {
  width: 100%;
  max-width: 600px;
}
.mainP .articleP .containerP {
  padding: 10px 10px 30px;
  display: flex;
  flex-direction: column;
  row-gap: 19px;
  min-height: calc(100dvh - 55px);
  height: 100%;
}
@media (width > 600px) {
  .mainP .articleP .containerP {
    min-height: unset;
    padding: 10px 0 30px;
  }
}
.mainP .articleP .containerP > button.btnPrimary {
  margin-top: auto;
}

.mainP:has(.articleLegal) {
  margin-top: 0;
  padding-top: 55px;
}

.articleLegal {
  width: 100%;
  max-width: 990px;
}

.articleLegal .sectionLegal {
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (width > 600px) {
  .articleLegal .sectionLegal {
    min-height: calc(100dvh - 55px);
    padding: 30px 25px;
  }
}
.articleLegal .sectionLegal p.title {
  font-family: "SoraVariable", sans-serif;
  font-size: 28px;
  color: #0B0D80;
  font-weight: 400;
}
@media (width > 600px) {
  .articleLegal .sectionLegal p.title {
    font-size: 36px;
  }
}
.articleLegal .sectionLegal .textInfo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.articleLegal .sectionLegal .blockCopyright {
  display: flex;
  align-self: center;
  flex-direction: column;
  text-align: center;
  margin-top: 100px;
}
@media (width > 600px) {
  .articleLegal .sectionLegal .blockCopyright {
    margin-top: auto;
  }
}

.sectionLegal .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sectionLegal .header .openClose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.sectionLegal .header .openClose span.open {
  display: flex;
}
.sectionLegal .header .openClose span.close {
  display: none;
}
.sectionLegal .header .openClose i {
  font-size: 26px;
}
@media (width > 600px) {
  .sectionLegal .header .openClose {
    pointer-events: none;
  }
  .sectionLegal .header .openClose span.close,
  .sectionLegal .header .openClose span.open {
    display: none;
  }
}

.sectionLegal .contentNav {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 200ms;
}
.sectionLegal .contentNav ul.inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 15px;
}
.sectionLegal .contentNav ul.inner li {
  background-color: #f2f2f2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 12px;
}
.sectionLegal .contentNav ul.inner li a {
  font-size: 16px;
  font-family: "SoraVariable", sans-serif;
  font-weight: 700;
  padding: 8.5px 43px;
  color: #2A2E30;
  display: flex;
  height: 100%;
  align-items: center;
  text-indent: -19px;
  width: 100%;
}
.sectionLegal .contentNav ul.inner li:nth-last-of-type(1) {
  margin-bottom: 45px;
}
.sectionLegal .contentNav.active {
  grid-template-rows: 1fr;
}

.contentInfoLegal {
  margin: 0 auto 45px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contentInfoLegal .itemLegal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.itemLegal > .titleInf {
  scroll-margin-top: 70px;
  font-family: "SoraVariable", sans-serif;
  font-size: 19px;
  color: #2A2E30;
  font-weight: 600;
}
.itemLegal > .titleInf.small {
  font-size: 17px;
}

.itemLegal > .textInf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itemLegal > .textInf > p {
  font-family: "SoraVariable", sans-serif;
  font-size: 14px;
  color: #2A2E30;
  font-weight: 400;
}
.itemLegal > .textInf > ul {
  list-style: unset !important;
  padding-left: 38px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itemLegal > .textInf > ul > li > p {
  font-family: "SoraVariable", sans-serif;
  font-size: 14px;
  color: #2A2E30;
  font-weight: 400;
}
.itemLegal > .textInf > ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.itemLegal > .textInf > ol > li > p, .itemLegal > .textInf > ol > li::marker {
  font-family: "SoraVariable", sans-serif;
  font-size: 14px;
  color: #2A2E30;
  font-weight: 400;
}

.btnScrollTop {
  display: none;
  position: fixed;
  right: 15px;
  top: 92dvh;
  border-radius: 50%;
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
}
@media (width > 1000px) {
  .btnScrollTop {
    right: calc(50% - 495px);
  }
}
.btnScrollTop > a {
  transform: rotate(-90deg);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  aspect-ratio: 1/1;
  -o-object-position: center;
     object-position: center;
}
.btnScrollTop > a > i.icon-arrow-right {
  display: flex;
  color: white;
  background-color: #3B64F6;
  font-weight: 600;
  font-size: 16px;
  padding: 7px;
  aspect-ratio: 1/1;
}
.btnScrollTop:active a i, .btnScrollTop:hover a i {
  background-color: #0B0D80;
}

.sectionBalance {
  display: flex;
  align-items: center;
  height: 186px;
  width: 100%;
  background-size: cover;
  background-position: left top;
  background-image: linear-gradient(180deg, rgb(59, 100, 246) 0%, rgba(0, 0, 0, 0.82) 61.4%);
}
@media (width > 600px) {
  .sectionBalance {
    height: 154px;
  }
}

.iBalance {
  padding: 22px;
}
.iBalance p {
  color: #FFFFFF;
}
.iBalance p:nth-of-type(2) {
  font-size: 46px;
  font-weight: 700;
}

.dialogNav::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  top: 55px;
}

.dialogNav {
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 600px;
  border: none;
  box-shadow: 0px 4px 4px 0px rgba(130, 130, 130, 0.25);
  background-color: #FFFFFF;
  bottom: 0;
  right: 0;
  left: initial;
  top: initial;
  padding: 20px;
}
@media (width >= 600px) {
  .dialogNav {
    border-radius: 12px;
    max-width: 430px;
    bottom: inherit;
    top: 92px;
    right: 15px;
    left: initial;
  }
}
@media (width >= 1550px) {
  .dialogNav {
    right: calc(50% - 751px);
  }
}
.dialogNav .innerDialogNavRegistered,
.dialogNav .innerDialogNavGuest {
  display: none;
  flex-direction: column;
  row-gap: 20px;
}
.dialogNav .innerDialogNavGuest {
  row-gap: unset;
}
.dialogNav.guest .innerDialogNavGuest {
  display: flex;
}
.dialogNav.registered .innerDialogNavRegistered {
  display: flex;
}
.dialogNav .closeDialog {
  width: 50px;
  height: 45px;
  position: fixed;
  top: 10px;
  right: 0;
  cursor: pointer;
}
@media (width >= 1550px) {
  .dialogNav .closeDialog {
    right: calc(50% - 775px);
  }
}

/* .innerDialogNav{
    display: none;
    flex-direction: column;
    row-gap: 20px;
    &.guest{
        display: flex;
    }
    &.registered{
        display: flex
    }

} */
.innerDialogNavRegistered .titleModal,
.innerDialogNavGuest .titleModal {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  /*         button{
              background-color: $light-grey;
              width: 24px;
              height: 24px;
              aspect-ratio: 1/1;
              border-radius: 50%;
              margin-right: -4px;
              display: flex;
              justify-content: center;
              align-items: center;
              i{
                  font-size: 12px!important;
              } */
  /*  } */
}
.innerDialogNavRegistered .titleModal a,
.innerDialogNavGuest .titleModal a {
  display: flex;
  -moz-column-gap: 26px;
       column-gap: 26px;
  align-items: center;
}
.innerDialogNavRegistered .titleModal a figure,
.innerDialogNavGuest .titleModal a figure {
  width: 36px;
  height: 36px;
  aspect-ratio: 1/1;
  border-radius: 100px;
  border: 3px solid #3B64F6;
  overflow: hidden;
}
.innerDialogNavRegistered .titleModal a figure img,
.innerDialogNavGuest .titleModal a figure img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.innerDialogNavRegistered .linksSession,
.innerDialogNavRegistered .linksInfo,
.innerDialogNavGuest .linksSession,
.innerDialogNavGuest .linksInfo {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.innerDialogNavRegistered .linkInfo,
.innerDialogNavGuest .linkInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #2A2E30;
  height: 30px;
}
.innerDialogNavRegistered .linkInfo:active, .innerDialogNavRegistered .linkInfo:hover,
.innerDialogNavGuest .linkInfo:active,
.innerDialogNavGuest .linkInfo:hover {
  color: #3A29F5;
}
.innerDialogNavRegistered .linkSession,
.innerDialogNavGuest .linkSession {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #2A2E30;
  height: 30px;
}
.innerDialogNavRegistered .linkSession:active, .innerDialogNavRegistered .linkSession:hover,
.innerDialogNavGuest .linkSession:active,
.innerDialogNavGuest .linkSession:hover {
  color: #3A29F5;
}

/* modal Nav registrado */
.innerDialogNavGuest > ul,
.innerDialogNavRegistered > ul {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 7px;
}
@media (width >= 600) {
  .innerDialogNavGuest > ul,
  .innerDialogNavRegistered > ul {
    max-height: none;
  }
}
.innerDialogNavGuest > ul li,
.innerDialogNavRegistered > ul li {
  border-bottom: 1px solid #f1f1f1;
  padding: 20px 0;
}
.innerDialogNavGuest > ul li.linksSession,
.innerDialogNavRegistered > ul li.linksSession {
  border-bottom: none;
}
.innerDialogNavGuest > ul li:nth-last-of-type(1),
.innerDialogNavRegistered > ul li:nth-last-of-type(1) {
  border-bottom: none;
  padding-bottom: 0;
}
.innerDialogNavGuest > ul li:nth-last-child(1 of li.linksSession),
.innerDialogNavRegistered > ul li:nth-last-child(1 of li.linksSession) {
  padding: 0;
}

.innerDialogNavGuest ul li a,
.innerDialogNavGuest ul li button,
.innerDialogNavRegistered ul li a,
.innerDialogNavRegistered ul li button {
  background-color: transparent;
  display: flex;
  width: 100%;
  height: 30px;
  align-items: center;
}
.innerDialogNavGuest ul li a.colorDanger span :is(p, i),
.innerDialogNavGuest ul li button.colorDanger span :is(p, i),
.innerDialogNavRegistered ul li a.colorDanger span :is(p, i),
.innerDialogNavRegistered ul li button.colorDanger span :is(p, i) {
  color: #A92323;
}
.innerDialogNavGuest ul li a.colorDanger,
.innerDialogNavGuest ul li button.colorDanger,
.innerDialogNavRegistered ul li a.colorDanger,
.innerDialogNavRegistered ul li button.colorDanger {
  color: #A92323 !important;
}
.innerDialogNavGuest ul li a.colorDanger span,
.innerDialogNavGuest ul li button.colorDanger span,
.innerDialogNavRegistered ul li a.colorDanger span,
.innerDialogNavRegistered ul li button.colorDanger span {
  -moz-column-gap: 32px;
       column-gap: 32px;
}
.innerDialogNavGuest ul li a:active :is(p, i), .innerDialogNavGuest ul li a:hover :is(p, i),
.innerDialogNavGuest ul li button:active :is(p, i),
.innerDialogNavGuest ul li button:hover :is(p, i),
.innerDialogNavRegistered ul li a:active :is(p, i),
.innerDialogNavRegistered ul li a:hover :is(p, i),
.innerDialogNavRegistered ul li button:active :is(p, i),
.innerDialogNavRegistered ul li button:hover :is(p, i) {
  color: #3A29F5;
  border-color: #3A29F5;
}
.innerDialogNavGuest ul li a:active:not(button.colorDanger) span :is(p, i), .innerDialogNavGuest ul li a:hover:not(button.colorDanger) span :is(p, i),
.innerDialogNavGuest ul li button:active:not(button.colorDanger) span :is(p, i),
.innerDialogNavGuest ul li button:hover:not(button.colorDanger) span :is(p, i),
.innerDialogNavRegistered ul li a:active:not(button.colorDanger) span :is(p, i),
.innerDialogNavRegistered ul li a:hover:not(button.colorDanger) span :is(p, i),
.innerDialogNavRegistered ul li button:active:not(button.colorDanger) span :is(p, i),
.innerDialogNavRegistered ul li button:hover:not(button.colorDanger) span :is(p, i) {
  color: #3A29F5;
}
.innerDialogNavGuest ul li a span,
.innerDialogNavGuest ul li button span,
.innerDialogNavRegistered ul li a span,
.innerDialogNavRegistered ul li button span {
  display: flex;
  -moz-column-gap: 17px;
       column-gap: 17px;
  align-items: center;
}
.innerDialogNavGuest ul li a span i,
.innerDialogNavGuest ul li button span i,
.innerDialogNavRegistered ul li a span i,
.innerDialogNavRegistered ul li button span i {
  font-size: 17px;
}

/* modal metodos de pago */
.dialogDef::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  top: 55px;
  cursor: pointer;
}

.dialogDef {
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 600px;
  border: none;
  box-shadow: 0px 4px 4px 0px rgba(130, 130, 130, 0.25);
  background-color: #FFFFFF;
  bottom: 0;
  right: 0;
  left: initial;
  top: initial;
  /* padding: 20px; */
  padding: 10px;
}
@media (width >= 600px) {
  .dialogDef {
    border-radius: 12px;
    max-width: 430px;
    bottom: inherit;
    top: 50%;
    left: 50%;
    right: unset;
    transform: translate(-50%, -50%);
  }
}
.dialogDef.mobileCentered {
  bottom: unset !important;
  right: unset !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  border-radius: 12px !important;
}
@media (width >= 600px) {
  .dialogDef.screenBottom {
    border-radius: 12px 12px 0 0;
    max-width: 600px;
    bottom: inherit;
    top: unset;
    left: 50%;
    right: unset;
    transform: translateX(-50%);
    bottom: 0;
  }
}
.dialogDef.hideP {
  display: none;
}

@media (width < 600px) {
  dialog.dialogDef.animPay {
    animation: animPay 200ms linear;
  }
}

@keyframes animPay {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.innerDialogDef {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 30px;
}
.innerDialogDef .titleDialog {
  display: flex;
  justify-content: space-between;
  /* height: 24px; */
  align-items: center;
  padding: 10px 10px 0;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.innerDialogDef .titleDialog > div {
  display: flex;
  -moz-column-gap: 22px;
       column-gap: 22px;
  align-items: center;
}
.innerDialogDef .titleDialog > div > i.icon-buys-fill {
  font-size: 20px;
}
.innerDialogDef .titleDialog > div > i.icon-error-s {
  width: unset;
}
.innerDialogDef .titleDialog > div.green {
  color: #26A923;
}
.innerDialogDef .titleDialog > div > p {
  line-height: normal !important;
  display: flex;
  flex: 1;
}
.innerDialogDef .titleDialog > div > i.imgOthers, .innerDialogDef .titleDialog > div > i.imgCrypto {
  overflow: hidden;
  height: 30px;
  width: 20px;
  display: flex;
  width: 22px;
  align-self: flex-start;
}
.innerDialogDef .titleDialog > div > i.imgOthers img, .innerDialogDef .titleDialog > div > i.imgCrypto img {
  height: 120%;
  transform-origin: 50%;
  filter: grayscale(100%) brightness(50%);
  transform: translate(-31%, -11%);
}
.innerDialogDef .titleDialog > div > i.imgOthers img {
  height: 111%;
  transform: translate(-29%, -11%);
}
.innerDialogDef .titleDialog button.hideP {
  visibility: hidden;
  pointer-events: none;
  display: none;
}
.innerDialogDef .titleDialog.imgPromo figure {
  aspect-ratio: 103/53;
  max-width: 82px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}
.innerDialogDef .titleDialog.imgPromo figure img {
  width: 100%;
}
.innerDialogDef .titleDialog.imgPromo .btnNavClose {
  align-self: flex-start;
}
.innerDialogDef hr {
  height: 1px;
  border-width: 0;
  /*  color: $light-grey; */
  width: 100%;
  margin: 0;
}
.innerDialogDef ul li a:hover :is(p, i) {
  color: #3A29F5;
}

.innerDialogDef:has(> .titleDialog.imgPromo) {
  gap: 15px;
}

.innerDialogDef:has(> .titleDialog.imgPromo) > .dataP > p:first-child {
  max-width: 80%;
}

.innerDialogDef:has(> .titleDialog.imgPromo) > .dataP > ul > li > p {
  display: inline-flex;
  align-items: center;
}
.innerDialogDef:has(> .titleDialog.imgPromo) > .dataP > ul > li > p .spanI {
  width: 16px;
  display: inline-flex;
  margin-right: 7px;
}
.innerDialogDef:has(> .titleDialog.imgPromo) > .dataP > ul > li > p .spanI i {
  font-size: 12px;
  padding: 2px;
  align-self: flex-start;
}

.dataP {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  overflow-x: visible;
  padding: 0 10px 10px;
}
.dataP.dataOthers, .dataP.dataCrypto {
  max-height: calc(100vh - 249px);
}
.dataP.notDataP {
  row-gap: 30px;
}
.dataP.notDataP p, .dataP.notDataP span {
  display: inline;
}
.dataP .service {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dataP > p {
  display: flex;
  justify-content: space-between;
}
.dataP ul li p i.icon-check, .dataP ul li p i.icon-check-s {
  margin-right: 5px;
}
.dataP .blockInput {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.dataP .blockInput > p {
  letter-spacing: 0.24px;
}

.dataP > .sectionOthers,
.dataP > .sectionCrypto {
  display: flex !important;
  flex-direction: column !important;
}

.typeSuscription {
  font-family: "SoraVariable", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-wrap: nowrap;
  display: inline-flex;
  align-items: center;
  -moz-column-gap: 0.2rem;
       column-gap: 0.2rem;
}
.typeSuscription i {
  font-size: 16px;
}
.typeSuscription span {
  color: #3A29F5;
}

.dataP > .descriptionService {
  color: #2A2E30;
  font-size: 10px;
  font-weight: 400;
}

/* --- Excepciones ---*/
.dialogError .titleDialog > div {
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}
.dialogError .titleDialog > div i {
  /*  line-height: 1.4; */
  aspect-ratio: 1/1;
  margin-top: 3px;
}
.dialogError .titleDialog > div i.icon-cards {
  font-size: 18px;
}
.dialogError .notDataP {
  row-gap: 25px;
}
.dialogError .notDataP > div {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.dialogError ul {
  list-style-type: disc !important;
  padding: revert !important;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.dialogError ul li {
  margin: 0;
  padding: initial !important;
  text-decoration: initial !important;
}
.dialogError .buttons {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.dialogValidateEmail .titleDialog > div {
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.dialogInfImportant .titleDialog > div {
  display: flex;
  align-items: center;
}
.dialogInfImportant .titleDialog > div > i {
  /*         color:$orange;
          background-color: $black;
          display: flex;
          align-items: center;
          height: 16px;
          border-radius: 50%; */
  /*       font-size: 16px; */
  font-size: 14px;
  padding: 2px;
  font-weight: 700;
}
.dialogInfImportant button.btnPrimary {
  font-size: 12px;
  letter-spacing: 0.12px;
}

.dialogQR .innerQR {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.dialogQR .innerQR img {
  width: 160px;
  height: 160px;
}
.dialogQR .scrollH .scroll p {
  font-family: "SoraVariable", sans-serif;
  text-wrap: nowrap;
  font-size: 14px;
  font-weight: 600;
  background-color: transprent;
  line-height: 2;
}

.innerDialogDef ul.optionsP {
  padding-right: 10px;
  padding: 0 17px 10px 10px;
}
.innerDialogDef .optionP {
  border-top: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.innerDialogDef .optionP a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  width: 100%;
  color: #2A2E30;
}
.innerDialogDef .optionP button {
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  height: 18px;
  align-items: center;
  background-color: transparent;
  justify-content: space-between;
  width: 100%;
  height: 30px;
}
.innerDialogDef .optionP button:hover {
  color: #3A29F5;
}
.innerDialogDef .optionP button:hover i,
.innerDialogDef .optionP button:hover p {
  color: inherit;
}
.innerDialogDef .optionP.trash button {
  color: #A92323;
  justify-content: unset;
}
.innerDialogDef .optionP.trash button i {
  display: flex;
  font-size: 14px;
  color: inherit;
}
.innerDialogDef .optionP.trash button p {
  color: inherit;
}
.innerDialogDef ul.optionsP li:nth-last-child(1 of li.optionP) {
  padding-bottom: 0;
}

/*  .dialogSPEI.registered,
 .dialogBizum.registered{
   button{
       margin-top: 15px;
   }
 } */
.dialogIframe .titleDialog button.textCancel {
  width: unset;
  background-color: transparent;
  aspect-ratio: unset;
  font-family: "SoraVariable", sans-serif;
  cursor: pointer;
}
.dialogIframe .titleDialog button.textCancel:active, .dialogIframe .titleDialog button.textCancel:hover {
  color: #0B0D80;
}

/* --- dialog  dialogAcordion acordion---*/
.dialogAcordion {
  z-index: 1;
}
.dialogAcordion .innerDialogDef {
  row-gap: 0;
}
.dialogAcordion .innerDialogDef .titleDialog {
  cursor: pointer;
}
.dialogAcordion .innerDialogDef .titleDialog div {
  display: flex;
  align-items: center;
}
.dialogAcordion .contentOnly {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 300ms;
}
.dialogAcordion .contentOnly.active {
  grid-template-rows: 0fr;
}
.dialogAcordion .inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
}
.dialogAcordion .inner p {
  margin-bottom: 0.9em;
}
.dialogAcordion .inner p:nth-of-type(1) {
  padding-top: 30px;
}
.dialogAcordion .inner p:nth-last-child(1) {
  margin-bottom: 0 !important;
}

.dialogAcordion .btnAcorClose {
  background-color: transparent;
}
.dialogAcordion .btnAcorClose i.icon-down.down,
.dialogAcordion .btnAcorClose i.icon-up.up {
  font-size: 18px;
  display: none;
  justify-content: center;
  align-items: center;
}
.dialogAcordion .btnAcorClose i.icon-down.down.active,
.dialogAcordion .btnAcorClose i.icon-up.up.active {
  display: flex;
}

.backdropFake {
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 0;
  display: block;
}
.backdropFake.hideP {
  display: none;
}

.dialogSaldo .titleDialog p {
  display: flex;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
}
.dialogSaldo .titleDialog p img {
  margin-top: 2px;
  width: 120px;
}
@media (width >= 500px) {
  .dialogSaldo .titleDialog p img {
    margin-top: 2px;
  }
}
.dialogSaldo p {
  display: flex;
  align-items: center;
}
.dialogSaldo .dataP p:has(+ button.btnPrimary) {
  margin-bottom: 26px;
}

/*   .backdropFake:has(+#dialogAcordion[open]){
    display: block;
  } */
/* --- dialog QR---*/
.dialogDef i.icon-next-right-big,
.dialogNav i.icon-next-right-big {
  font-size: 12px;
}

button.btnNavClose {
  border-radius: 50%;
  aspect-ratio: 1/1;
}
button.btnNavClose i.icon-close, button.btnNavClose i.icon-close-big {
  font-size: 12px;
  padding: 6px;
}

.innerDialogDef > .titleDialog > .btnNavClose {
  align-self: flex-start;
}

.dataP:has(label.labelCheckBox) label.labelCheckBox {
  margin-bottom: 23px;
}

.titleDialog:has(button:only-child) {
  justify-content: flex-end;
}

.innerDialogDef:has(> .titleDialog > button:only-child) {
  row-gap: 15px;
}

/* --- dialog iNFO SPEI---*/
/* -- btnInfoSPEI-*/
.titleDialog > div:has(> i.icon-information) {
  align-items: flex-start;
}
.titleDialog > div:has(> i.icon-information) > i {
  margin-top: 3px;
}

.btnInfoSPEI {
  display: flex;
  -moz-column-gap: 0.3rem;
       column-gap: 0.3rem;
  align-items: flex-start;
  line-height: 20px;
  cursor: pointer;
}
.btnInfoSPEI i {
  font-size: 12px;
  font-weight: 100;
  padding: 2px;
  align-self: center;
  display: inline-flex;
}
.btnInfoSPEI:hover, .btnInfoSPEI:active {
  opacity: 0.6;
}

.selectMenu {
  max-width: -moz-min-content;
  max-width: min-content;
  position: relative;
}

.selectMenu .selectBtn {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  height: 27px;
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.selectMenu .selectBtn .sBtnText {
  text-wrap: nowrap;
  color: #3A29F5;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 8px;
  background-color: #f1f1f1;
  padding: 5px 10px;
}

.selectMenu .optionsSelect {
  position: absolute;
  right: 0;
  z-index: -1;
  opacity: 0;
  padding: 10px;
  margin-top: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 1px 4px 0px rgba(209, 209, 209, 0.25);
  row-gap: 5px;
  display: flex;
  flex-direction: column;
  /*
  animation-name: fadeInDown;
  -webkit-animation-name: fadeInDown;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.35s;
  -webkit-animation-fill-mode: both;
  */
}

.selectMenu .optionsSelect .optionS {
  display: flex;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  min-width: 150px;
  -moz-column-gap: 0.3rem;
       column-gap: 0.3rem;
}

.selectMenu .optionsSelect .optionS:hover {
  background: #f2f2f2;
}

.selectMenu .optionsSelect .optionS i {
  color: #2A2E30;
  background-color: transparent !important;
  opacity: 0;
  font-size: 14px !important;
}

.selectMenu .optionsSelect .optionS .optiontext {
  font-size: 14px;
  color: #2A2E30;
  z-index: 0;
  pointer-events: none;
  text-wrap: nowrap;
}

.selectMenu.active .optionsSelect {
  display: flex;
  opacity: 0;
  z-index: 10;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
}

.selectMenu .optionsSelect .optionS.active {
  background: rgba(216, 216, 216, 0.25);
  background-color: #f1f1f1;
}

.selectMenu .optionsSelect .optionS.active i {
  opacity: 1;
  color: #3A29F5;
  font-size: 14px;
}

.selectMenu .optionsSelect .optionS.active .optiontext {
  color: #3A29F5 !important;
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 15px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInDown {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 10px, 0);
    opacity: 0;
  }
}
/* @import "components/optionsCardsEsc"; *//*# sourceMappingURL=main.css.map */