@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;
  height: 100%;
  min-height: calc(100vh - 55px);
  position: relative;
}

@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;
  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;
}

.mb1em {
  margin-bottom: 1em;
}

.mt1em {
  margin-top: 1em;
}

/* --- 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);
  }
}
/*  extras */
/* --- quitar marker de details ---*/
details summary {
  display: flex;
}
details summary::-webkit-details-marker {
  display: none;
}

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

.contCenter {
  display: flex;
  justify-content: center;
}

center {
  display: flex;
  justify-self: center;
}

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

.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;
  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%;
  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;
  cursor: pointer;
}
.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.round {
  border-radius: 100px;
  border: 1px solid #fff;
}
.btnBorderGrey .imgIcon img {
  width: 100%;
}
.btnBorderGrey .imgIcon img.imgTelegram {
  padding: 2px 4px 2px 2px;
  height: 100%;
  width: 100%;
}
.btnBorderGrey:hover, .btnBorderGrey:active {
  color: #0B0D80;
  border: 1px solid #0B0D80;
}

.btnBorderGrey .round:has(> .imgTelegram) {
  background-color: #229ED9;
  width: 18px;
  height: 18px;
}

.btnTelegram {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
  border-radius: 20px;
  width: 100%;
  position: relative;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.13px;
  color: #fff;
  border: 1px solid #D8D8D8;
  font-family: "SoraVariable", sans-serif;
  cursor: pointer;
  transition: background 900ms ease;
}
.btnTelegram i {
  font-size: inherit;
  color: #FFF;
  position: absolute;
  right: 14px;
  outline: 1px solid #FFFFFF;
  box-sizing: border-box;
}
.btnTelegram .imgIcon {
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  display: block;
}
.btnTelegram .imgIcon.round {
  border-radius: 100px;
  border: 1px solid #fff;
}
.btnTelegram .imgIcon img {
  width: 100%;
}
.btnTelegram .imgIcon img.imgTelegram {
  padding: 1px 3px 1px 1px;
}
.btnTelegram:hover, .btnTelegram:active {
  background: linear-gradient(180deg, #000 0%, #000 100%);
}

.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;
  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: fit-content;
  padding: 0 30px;
  font-size: 13px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.13px;
  color: #A92323;
  border: 1px solid #A92323;
  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; */
  margin-bottom: 3.5rem;
}
.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;
  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;
}

.btnsColRow {
  display: flex;
  width: 100%;
  gap: 12px;
  flex-wrap: nowrap;
  flex-direction: column;
}
@media (width >= 600px) {
  .btnsColRow {
    flex-direction: row;
  }
}

.btnsColRevRow {
  display: flex;
  width: 100%;
  gap: 12px;
  flex-wrap: nowrap;
  flex-direction: column-reverse;
}
@media (width >= 600px) {
  .btnsColRevRow {
    flex-direction: row;
  }
}

.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;
}

.headerP .innerHeaderP .btnTextIni {
  padding-right: 24px;
}

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 10px;
}

.twoForms {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  width: 100%;
}
.twoForms > .groupFormAnim {
  display: flex;
  width: 100%;
  flex-direction: column;
}
@media (width >= 540px) {
  .twoForms > .groupFormAnim {
    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: 46px;
  padding: 10px 15px 0;
  letter-spacing: 0.11px;
  font-family: "SoraVariable", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #2A2E30;
  padding-top: 12px;
  text-overflow: ellipsis;
}
.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: 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;
  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(:placeholder-shown))) + .textAnim {
  font-size: 8px !important;
  letter-spacing: 0.08px !important;
  top: 8px !important;
}

/* _______fin phone con libreria prefijos*/
.inputAnim:is(:focus, :not(: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 que dentro tiene boton  .addFonts textLinkMod---*/
.groupFormAnim label:has(> .addFonts) input {
  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;
  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  btnAdd---*/
.labelBtnRight {
  position: relative;
  width: 100%;
}
.labelBtnRight > span.addFonts {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  /*   width: 30px; */
  padding: 4px 8px;
  aspect-ratio: 14/14;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.labelBtnRight > span.addFonts:hover i, .labelBtnRight > span.addFonts:active i {
  color: #3A29F5;
}
.labelBtnRight > span.addFonts i {
  color: #828790;
  font-size: 20px;
  font-weight: 900;
  padding: 2px;
}

/* --- 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;
  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 {
  padding: 10px;
  width: 100%;
  max-width: 814px;
}
#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;
}

/* ---  ---*/
.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;
  }
}

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

.iSectionLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}
@media (width >= 600px) {
  .iSectionLogin {
    padding: 0;
  }
}
.iSectionLogin > .block {
  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);
}
.iSectionLogin > .block > .iBlock {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  position: relative;
  /*    span.btnTextCancel{
         position: absolute;
         top:0;
         right: 0;
     } */
}
.iSectionLogin > .block > .iBlock > .contentTit .title, .iSectionLogin > .block > .iBlock > .title {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.iSectionLogin > .block > .iBlock > .contentTit .title > .blockText, .iSectionLogin > .block > .iBlock > .title > .blockText {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.iSectionLogin > .block > .iBlock > .contentTit .title .imgUsuario, .iSectionLogin > .block > .iBlock > .title .imgUsuario {
  border-radius: 100px;
  object-fit: cover;
}
.iSectionLogin > .block > .iBlock > .contentTit .title span.btnTextCancel, .iSectionLogin > .block > .iBlock > .title span.btnTextCancel {
  flex: 0 0 55px;
}
.iSectionLogin > .block > .textIntro {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.iSectionLogin > .block2 {
  padding: 20px 15px 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  row-gap: 23px;
}
.iSectionLogin .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";
}
.iSectionLogin .separatorO .line {
  display: grid;
  height: 1px;
  width: 100%;
  background-color: #D8D8D8;
  grid-area: separator;
}
.iSectionLogin .separatorO .o {
  display: grid;
  grid-area: separator;
  background-color: #F7F9FD;
  width: 60px;
  justify-self: center;
  text-align: center;
}

.iSectionLogin > .block .iBlock .blockStep {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.iSectionLogin > .block .iBlock .blockStep > p:last-of-type {
  margin-bottom: 0.3rem;
}
.iSectionLogin > .block .iBlock .blockStep > .blockText {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.btnsFonts {
  display: flex;
  gap: 0.7rem;
}
.btnsFonts li.btnFont {
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 1px solid #D8D8D8;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.btnsFonts li.btnFont img {
  width: 100%;
}
.btnsFonts li.btnFont:hover, .btnsFonts li.btnFont:active {
  border: 1px solid #3A29F5;
}
.btnsFonts li.btnFont.otro {
  border: none;
  padding: 8px;
}
.btnsFonts li.btnFont.moneda {
  width: fit-content;
}
.btnsFonts li.btnFont.active {
  border: 1px solid #3A29F5;
}

.fontAdd {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fontAdd i {
  display: inline;
}

ul.fontsAdd {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
ul.fontsAdd > li {
  display: flex;
  background-color: #f8f8f8;
  height: 46px;
  border-radius: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 3px;
  gap: 10%;
}
ul.fontsAdd > li > .font {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 0.5rem;
}
ul.fontsAdd > li > .font img {
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
}
ul.fontsAdd > li > .font p {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  color: #7e7e7e;
  font-size: 16px;
  margin-bottom: 0;
  display: block;
  overflow: hidden;
}
ul.fontsAdd > li > .btns {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.7rem;
}
ul.fontsAdd > li > .btns > span.btnEditar {
  padding: 4px;
  cursor: pointer;
}
ul.fontsAdd > li > .btns > span.btnBorrar {
  padding: 4px;
  cursor: pointer;
}
ul.fontsAdd > li > .btns > span.btnBorrar i {
  color: red;
}

.modalInternal {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFEEC9;
  padding: 14px;
  border-radius: 12px;
  overflow: hidden;
  gap: 1rem;
}
.modalInternal > .header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.modalInternal > .header > .title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.modalInternal > .header > .title i {
  height: fit-content;
  font-size: 20px;
  align-self: flex-start;
}
.modalInternal > .header > .close {
  padding: 4px;
  display: inline-flex;
  flex: 0 0 24px;
  cursor: pointer;
}
.modalInternal > .header > .close i.icon-close {
  background-color: unset;
  height: fit-content;
  font-size: 16px;
  font-weight: 200;
}
.modalInternal > .inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contentCaptcha {
  margin-top: 22px;
  width: 100%;
}

.sectionDropDownP {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
}
.sectionDropDownP li.item {
  /*       padding:20px 0; */
  /*     border-bottom: 1px solid $light-grey-line; */
}
.sectionDropDownP .item .itemBtn {
  display: flex;
  justify-content: space-between;
  height: 29px;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.sectionDropDownP .item .itemBtn .line {
  height: 1px;
  background-color: rgb(236, 236, 236);
  width: 100%;
  display: block;
}
.sectionDropDownP .item .itemBtn .super {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0.5rem;
  padding: 0 16px 4px;
  background-color: #fff;
  align-items: center;
}
.sectionDropDownP .item .itemBtn .super p {
  margin-bottom: 0;
  font-size: 12px;
  text-wrap: nowrap;
  color: #727577;
}
.sectionDropDownP .item .itemBtn .super i.icon-down.down,
.sectionDropDownP .item .itemBtn .super i.icon-up.up {
  font-size: 12px;
  height: 100%;
  align-self: flex-end;
}
.sectionDropDownP .item .itemBtn .super i.icon-dwon.down {
  display: flex;
}
.sectionDropDownP .item .itemBtn .super i.icon-up.up {
  display: none;
}
.sectionDropDownP .contentItem {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms;
  overflow: hidden;
}
.sectionDropDownP .contentItem.active {
  grid-template-rows: 1fr;
}
.sectionDropDownP .contentItem .inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sectionDropDownP .contentItem .inner .blockInputAnim {
  padding: 3px;
}

/* <main>
  <div> //desde arriba
    <span tooltip="I'm up above it!">Up</span>
  </div>
  <div>//desde iquierda o derecha
    <span tooltip="Slide to the left" flow="left">Left</span>
    <span tooltip="Slide to the right" flow="right">Right</span>
  </div>
  <div> //desde abah
    <span tooltip="Get Down." flow="down">Down</span>
  </div>
</main>
 */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 10px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: "";
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}

[tooltip]::after {
  content: attr(tooltip); /* magic! */
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 0.3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^=up]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^=up]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=up]::before,
[tooltip][flow^=up]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

/* FLOW: DOWN */
[tooltip][flow^=down]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^=down]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^=down]::before,
[tooltip][flow^=down]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

/* FLOW: LEFT */
[tooltip][flow^=left]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%);
}

[tooltip][flow^=left]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^=right]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%);
}

[tooltip][flow^=right]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=up]:hover::before,
[tooltip][flow^=up]:hover::after,
[tooltip][flow^=down]:hover::before,
[tooltip][flow^=down]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^=left]:hover::before,
[tooltip][flow^=left]:hover::after,
[tooltip][flow^=right]:hover::before,
[tooltip][flow^=right]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}