body {
  /*background: linear-gradient(189.16deg, rgb(57, 15, 199) 13.57%, rgb(40, 35, 77) 98.38%);*/
}

.background1 {
  background: linear-gradient(209.21deg, rgb(23, 23, 27) 13.57%, rgb(119, 63, 211) 98.38%);
  box-shadow: rgba(119, 63, 211, 0.3) 0px 20px 40px, rgba(0, 0, 0, 0.05) 0px 1px 3px;
}

.cardCourse {
  height: 360px;
  border-radius: 20px;
}

.background2 {
  background: linear-gradient(209.21deg, rgb(27, 36, 49) 13.57%, rgb(28, 31, 34) 98.38%);
}

.ilustrationData {
  position: relative;
  display: grid;
  -webkit-box-pack: center;
  justify-content: center;
  justify-items: center;
  height: 150px;
}

.imgIlustration {
  max-width: 800px;
  /*width: 100%;*/
  height: 150px;
  margin: 0px;
}

.ilustratorData {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  top: 0px;
  right: 0px;
}

.image2 {
  width: 32px;
  height: 32px;
  margin: 0px;
  cursor: pointer;
}

.textData {
  position: relative;
  padding-top: 10px;
}

.title {
  font-style: normal;
  font-size: 24px;
  line-height: 140%;
  font-weight: bold;
  text-align: center;
  color: rgb(255, 255, 255);
  margin: 0px;
  display: -webkit-box;
  /*-webkit-line-clamp: 3;*/
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.description {
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin: 10px 0px 0px;
}

.divBottom {
  position: relative;
  width: 74px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin: 10px auto 0px;
}

.divRoundButton {
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  padding-top: 2px;
  padding-left: 4px;
  cursor: pointer;
  border: none;
}

.imageButton {
  width: 24px;
  height: 24px;
  margin: auto;
}

.background3 {
  background: linear-gradient(209.21deg, rgb(14, 14, 14) 13.57%, rgb(44, 44, 44) 98.38%)!important;
}

.background4 {
  background: linear-gradient(209.21deg, rgb(32, 25, 76) 13.57%, rgb(46, 42, 59) 98.38%);
}

.background5 {
  background: linear-gradient(209.21deg, rgb(79, 73, 139) 13.57%, rgb(24, 16, 45) 98.38%);
}

.background6 {
  background: linear-gradient(209.21deg, rgb(29, 19, 36) 13.57%, rgb(0, 35, 124) 98.38%);
}

.background7 {
  background: linear-gradient(209.21deg, rgb(23, 23, 27) 13.57%, rgb(119, 63, 211) 98.38%);
}

.background8 {
  background: linear-gradient(209.21deg, rgb(76, 55, 109) 13.57%, rgb(31, 21, 53) 98.38%);
}

.background9 {
  background: linear-gradient(209.21deg, rgb(153, 40, 52) 13.57%, rgb(255, 114, 98) 98.38%);
}

.background10 {
  background: linear-gradient(209.21deg, rgb(50, 150, 255) 13.57%, rgb(68, 23, 219) 98.38%);
}

.background11 {
  background: linear-gradient(209.21deg, rgb(15, 20, 57) 13.57%, rgb(0, 91, 157) 98.38%);
}

.background12 {
  background: linear-gradient(209.21deg, rgb(136, 0, 148) 13.57%, rgb(81, 77, 255) 98.38%);
}

.background13 {
  background: linear-gradient(209.21deg, rgb(0, 175, 214) 13.57%, rgb(55, 1, 123) 98.38%);
}

.background14 {
  background: linear-gradient(209.21deg, rgb(101, 187, 118) 13.57%, rgb(70, 111, 171) 98.38%);
}

.background15 {
  background: linear-gradient(209.21deg, rgb(242, 136, 133) 13.57%, rgb(233, 79, 102) 98.38%);
}

.background16 {
  background: linear-gradient(209.21deg, rgb(89, 42, 121) 13.57%, rgb(232, 126, 114) 98.38%);
}

.background17 {
  background: linear-gradient(209.21deg, rgb(233, 109, 44) 13.57%, rgb(239, 77, 77) 98.38%);
}

.background18 {
  background: linear-gradient(209.21deg, rgb(253, 173, 0) 13.57%, rgb(233, 109, 44) 98.38%);
}

.background19 {
  background: linear-gradient(209.21deg, rgb(8, 86, 142) 13.57%, rgb(0, 24, 85) 98.38%);
}

.background20 {
  background: linear-gradient(209.21deg, rgb(0, 175, 214) 13.57%, rgb(55, 1, 123) 98.38%);
}

.background21 {
  background: linear-gradient(209.21deg, rgb(87, 15, 141) 13.57%, rgb(243, 91, 160) 98.38%);
}

.background22 {
  background: linear-gradient(209.21deg, rgb(60, 11, 140) 13.57%, rgb(227, 166, 254) 98.38%);
}

.background23 {
  background: linear-gradient(209.21deg, rgb(29, 11, 140) 13.57%, rgb(189, 166, 254) 98.38%);
}

.background24 {
  background: linear-gradient(209.21deg, rgb(31, 118, 167) 13.57%, rgb(145, 130, 191) 98.38%);
}

.background25 {
  background: linear-gradient(209.21deg, rgb(63, 55, 201) 13.57%, rgb(165, 83, 218) 98.38%);
}

.storyCard {
  padding: 20px;
  background: rgba(15, 14, 71, 0.3);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-content: start;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.storyCardHeader {
  /*display: grid;*/
  grid-template-columns: 42px auto;
  gap: 15px;
  -webkit-box-align: center;
  align-items: center;
}

.photoStoryCard {
  border-radius: 50%;
  width: 42px;
  object-fit: cover;
  margin-bottom: 0px;
  animation: 1s ease 0s 1 normal forwards running jBcSpD;
  max-width: 100%;
  padding: 0;
  margin: 0 0 1.45rem;
  border-style: none;
}

.infoStoryCard {
  display: grid;
  grid-template-rows: auto 21px;
  gap: 6px;
}

.headerContent {
  display: grid;
  grid-template-columns: 42px auto;
  gap: 15px;
  -webkit-box-align: center;
  align-items: center;
}

.nameStoryCard {
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin: 0px;
  color: rgb(255, 255, 255);
  height: fit-content;
  max-width: fit-content;
  font-size: 20px;
}

.descriptionStoryCard {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
  margin: 0px;
  color: rgb(255, 255, 255);
  background: rgba(68, 66, 178, 0.3);
  padding: 2px 6px;
  border-radius: 5px;
  height: fit-content;
  width: fit-content;
}

.cardList {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 20px;
  width: 586px;
  height: 400px;
  padding: 20px;
  background: rgba(15, 14, 71, 0.3);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset;
  border-radius: 20px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.cardCourseList {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  min-width: 200px;
  height: 360px;
  border-radius: 20px;
  box-shadow: rgba(46, 42, 59, 0.3) 0px 20px 40px, rgba(0, 0, 0, 0.05) 0px 1px 3px;
  padding: 20px;
  cursor: pointer;
}

.cardContentList {
  position: relative;
  width: 287px;
  height: 323px;
}

.titleCardList {
  font-style: normal;
  font-size: 13px;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0px;
}

.listCardList {
  display: grid;
  gap: 8px;
  width: 287px;
  height: 100%;
  margin-top: 20px;
  overflow: hidden scroll;
  -webkit-mask-image: linear-gradient(rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
}

.courseCardCourseList {
  text-decoration: none;
  width: 100%;
  background-color: transparent;
}

.sectionRowCourse {
  position: relative;
  display: grid;
  grid-template-columns: 46px auto;
  gap: 10px;
  width: 100%;
  min-width: 220px;
  max-width: 320px;
  padding: 10px;
  border-radius: 10px;
}

.sectionNumber {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  display: grid;
  -webkit-box-align: center;
  place-items: center;
}

.textSectionNumber {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 140%;
  margin: 0px;
  text-align: center;
  color: rgb(255, 255, 255);
}

.sectionInfo {
  display: grid;
  gap: 8px;
  align-self: center;
}

.textNameCourseList {
  font-style: normal;
  font-size: 15px;
  line-height: 18px;
  max-width: 160px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  margin: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 40px;
}

.textDescriptionCourseList {
  font-style: normal;
  font-size: 15px;
  line-height: 18px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.7);
  margin: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeCourseList {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
  position: absolute;
  width: 48px;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  text-align: center;
  margin: 0px;
  padding-top: 2px;
  top: 10px;
  right: 10px;
}

.handBookTutorial {
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

.handBookCard {
  position: relative;
}

.handBookCardBg1 {
  position: relative;
  width: 240px;
  height: 280px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 0px 30px 40px 40px;
  padding: 20px;
  z-index: 1;
  background: rgba(31, 31, 71, 0.6);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 40px 80px, rgba(255, 255, 255, 0.15) 0px 0px 0px 0.5px inset;
}

.handBookCardBg2 {
  position: absolute;
  width: 220px;
  height: 280px;
  border-radius: 0px 40px 40px;
  transform: skewY(8deg);
  transform-origin: left top;
  top: 0px;
}

.imageTutorial {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 20px;
  right: 20px;
  animation: 1s ease 0s 1 normal forwards running jBcSpD;
  max-width: 100%;
  padding: 0;
  margin: 0 0 1.45rem;
  border-style: none;
}

.divHandBook {
  width: 270px;
  height: 350px;
}

.textHandBookToturial {
  position: relative;
  display: grid;
  gap: 12px;
  text-align: left;
  max-width: 200px;
  /*height: 215px;*/
  overflow: hidden scroll;
  -webkit-box-pack: center;
}

.handBookAutor {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 130%;
  text-transform: uppercase;
  margin: 0px;
  color: rgba(255, 255, 255, 0.7);
  height: 16px;
  text-align: left;
}

.handBookTitle {
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  margin: 0px;
  color: rgb(255, 255, 255);
  padding: 0;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  text-rendering: optimizeLegibility;
  line-height: 1.1;
}

.handBookDescription {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
  margin: 0px;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.divHandBookInfo {
  display: grid;
  gap: 10px;
  grid-template-columns: 32px auto 40px;
}

.divHandBookInfoIcon {
  display: grid;
  -webkit-box-pack: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50px;
}

.handBookInfoImage {
  margin: auto;
  width: 20px;
  height: 20px;
  max-width: 100%;
  padding: 0;
  border-style: none;
}

.handBookInfoDescription {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.7);
  margin: auto 0px;
}

.divHandBookLevel {
  width: 40px;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 2px 6px;
  margin: auto 0px;
}

.handBookLevelDescription {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.7);
  margin: 0px;
  padding: 0;
}

.cardTwoList {
  position: relative;
  max-width: 938px;
  min-width: 280px;
  width: 100%;
  display: grid;
  grid-template-columns: 240px auto;
  gap: 20px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(15, 14, 71, 0.3);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset;
  backdrop-filter: blur(40px) saturate(120%) brightness(100%);
  -webkit-backdrop-filter: blur(40px) saturate(120%) brightness(100%);
}

.cardCourseTwoList {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  min-width: 200px;
  height: 360px;
  border-radius: 20px;
  padding: 20px;
}

.listCardTwoList {
  position: relative;
  display: grid;
  height: 335px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  justify-items: center;
  align-content: start;
  margin-top: 8px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
}

.cardContentTwoList {
  position: relative;
  max-width: 638px;
}

.background26 {
  background: linear-gradient(rgb(40, 11, 152) 0%, rgb(59, 150, 215) 100%);
}

.background27 {
  background: linear-gradient(rgb(96, 3, 139) 0%, rgb(26, 172, 204) 100%);
}

.background28 {
  background: linear-gradient(rgb(192, 52, 149) 0%, rgb(76, 36, 214) 100%);
}

.background29 {
  background: linear-gradient(rgb(64, 141, 213) 0%, rgb(99, 11, 140) 100%);
}

.background30 {
  background: linear-gradient(rgb(211, 49, 137) 0%, rgb(94, 44, 141) 100%);
}

.background31 {
  background: linear-gradient(rgb(67, 22, 219) 0%, rgb(144, 118, 231) 100%);
}

.background32 {
  background: linear-gradient(rgb(0, 91, 157) 0%, rgb(15, 20, 57) 100%);
}

.imgIlustrationSmall {
  max-width: 800px;
  /*width: 100%;*/
  height: 120px;
  margin: 0px;
}

.ilustrationDataIamge {
  position: relative;
  display: grid;
  -webkit-box-pack: center;
  justify-content: center;
  justify-items: center;
  height: 130px;
}

.bigCard {
  position: relative;
  max-width: 1032px;
  border-radius: 20px;
  padding: 20px;
  background: rgba(15, 14, 71, 0.3);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.contentBigCard {
  max-width: 992px;
  display: grid;
  grid-template-columns: 340px auto;
  gap: 40px;
  border-radius: 20px;
}

.contentImageBigCard {
  width: 100%;
  min-height: 365px;
  border-radius: 20px;
  display: grid;
  -webkit-box-pack: center;
  place-content: center;
}

.imageBigCard {
  width: 100%;
  height: 225px;
  max-width: 100%;
  padding: 0;
  margin: 0 0 1.45rem;
}

.contenDataBigCard {
  display: grid;
  max-width: 612px;
  gap: 20px;
}

.contentInfo1BigCard {
  display: grid;
  gap: 12px;
}

.infoBigCard {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 130%;
  text-transform: uppercase;
  margin: 0px;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
}

.titleBigCard {
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  margin: 0px;
  color: rgb(255, 255, 255);
}

.descriptionBigCard {
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  margin: 0px;
  color: rgba(255, 255, 255, 0.7);
}

.separatorBigCard {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
}

.sectionsBigCard {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 20px;
}

.sectionBigCard {
  position: relative;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  max-width: 296px;
  height: fit-content;
  padding: 10px;
  transition: all 0.3s ease-in-out 0s;
  border-radius: 10px;
}

.infoSectionBigCard {
  margin-left: 56px;
}

.titleInfoSectionBigCard {
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  margin: 0px;
  color: rgb(255, 255, 255);
  line-height: 130%;
}

.descriptionInfoSectionBigCard {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 130%;
  margin: 8px 0px 0px;
  color: rgba(255, 255, 255, 0.7);
}

.actionsSectionBigCad {
  width: fit-content;
}

.butonBigCard {
  display: flex;
  background: linear-gradient(rgba(24, 32, 79, 0.4) 0%, rgba(24, 32, 79, 0.25) 100%);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px, rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset;
  border-radius: 30px;
  border: none;
  padding: 12px 30px 10px 12px;
  cursor: pointer;
  font-style: normal;
  font-size: 15px;
  font-weight: normal;
  line-height: 130%;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin: auto auto auto 8px;
}

.imageButtonAction {
  width: 24px;
  height: 24px;
  margin: auto;
  padding: 0;
  max-width: 100%;
}

.pricingCard {
  position: relative;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.divBackPricingBackCardLeft {
  position: absolute;
  max-width: 360px;
  width: 100%;
  height: 426px;
  border-radius: 0px 60px 60px;
  transform: matrix(0.99, -0.14, 0.15, 0.99, 0, 0);
  transform-origin: left top;
  z-index: -1;
}

.divFrontPricingBackCardLeft {
  max-width: 360px;
  min-width: 240px;
  width: 100%;
  height: 426px;
  background: rgba(31, 31, 71, 0.6);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 40px 80px, rgba(255, 255, 255, 0.15) 0px 0px 0px 0.5px inset;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 50px 20px;
  border-radius: 0px 60px 60px;
  z-index: 2;
  -webkit-box-pack: center;
}

.buttonPricingAction {
  background: linear-gradient(rgb(255, 255, 255) 0%, rgb(217, 223, 255) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(23, 0, 102, 0.2) 0px 20px 40px;
  border-radius: 20px;
  display: flex;
  padding: 4px;
  width: 169px;
  cursor: pointer;
}

.divContentPlan {
  display: grid;
  row-gap: 8px;
  width: fit-content;
  margin: 23px auto 0px;
}

.rowFeaturePlan {
  display: grid;
  grid-template-columns: 24px auto;
  text-align: left;
}

.imageFeaturePlan {
  width: 24px;
  height: 24px;
  margin: 0px;
  max-width: 100%;
  padding: 0;
  border-style: none;
  filter: invert(100%);
}

.textFeaturePlan {
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin: auto 0px auto 16px;
}

.pricePlan {
  font-style: normal;
  font-size: 60px;
  margin: 0px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  line-height: 95px;
}

.typePlan {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  text-transform: uppercase;
  margin: 0px;
  color: rgba(255, 255, 255, 0.7);
}

.timePlan {
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 200px;
  margin: 0px auto;
}

.divBackPricingCardCenter {
  position: absolute;
  width: 100%;
  max-width: 380px;
  height: 519px;
  border-radius: 60px 60px 60px 0px;
  transform: matrix(1, 0.14, 0, 0.99, 0, 0);
  transform-origin: left bottom;
  z-index: -1;
}

.divFrontPricingCardCenter {
  min-width: 240px;
  width: 100%;
  background: rgba(31, 31, 71, 0.6);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 40px 80px, rgba(255, 255, 255, 0.15) 0px 0px 0px 0.5px inset;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 50px 20px;
  max-width: 380px;
  height: 519px;
  border-radius: 60px 60px 60px 0px;
  z-index: 2;
}

.divBackPricingCardRigth {
  position: absolute;
  max-width: 360px;
  width: 100%;
  height: 426px;
  border-radius: 60px 0px 60px 60px;
  transform: matrix(0.99, 0.14, -0.15, 0.99, 0, 0);
  transform-origin: right top;
  z-index: -1;
}

.divFrontPricingCardRigth {
  max-width: 360px;
  min-width: 240px;
  width: 100%;
  height: 426px;
  background: rgba(31, 31, 71, 0.6);
  box-shadow: rgba(24, 32, 79, 0.25) 0px 40px 80px, rgba(255, 255, 255, 0.15) 0px 0px 0px 0.5px inset;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 50px 20px;
  border-radius: 60px 0px 60px 60px;
  z-index: 2;
}

.rowPricing {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 4px;
  margin-top: 44px;
  box-sizing: inherit;
}

.background33 {
  background: linear-gradient(rgb(115, 184, 249) 11.94%, rgb(203, 216, 241) 80.98%);
}

.background34 {
  background: linear-gradient(rgb(47, 184, 255) 0%, rgb(158, 236, 217) 100%);
}

.background35 {
  background: linear-gradient(rgb(115, 184, 249) 11.94%, rgb(203, 216, 241) 80.98%);
}

.pricingCard:hover {
  transform: scale(1.1);
}

/**/
/* Liquid Glass estilo Apple - Basado en tu referencia */
.liquid-glass {
    position: relative;
    /*display: flex;*/
    font-weight: 600;
    color: var(--lg-text);
    cursor: pointer;
    background: var(--lg-highlight-dark);
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 
        0 6px 6px rgba(0, 0, 0, 0.2), 
        0 0 20px rgba(0, 0, 0, 0.1),
        inset 1px 1px 0 var(--lg-highlight), 
        inset 0 0 5px var(--lg-highlight);
    backdrop-filter: blur(0px);
    filter: url(#lg-dist);
    isolation: isolate;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquid-glass-icon {
  opacity: 0.90;
  border-radius: 29px;
  background: linear-gradient(180deg, rgb(1,1,1) 0%, rgb(15,14,40) 100%);
  box-shadow: 
    rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, 
    rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, 
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, 
    rgba(255, 255, 255, 0.25) 0px 8px 16px 0px inset;
  border-color: rgba(255, 255, 255, 0.15);
  border-width: 1px;
}

.liquid-glass-modal {
  opacity: 0.90;
  border-radius: 2rem;
  background: 
  linear-gradient(180deg, rgba(1,1,1,0.6) 100%, rgba(15,14,40,0.8) 100%),
  url("../img/goblal4.svg") bottom / contain no-repeat;
  box-shadow: 
        0 6px 6px rgba(0, 0, 0, 0.2), 
        0 0 20px rgba(0, 0, 0, 0.1),
        inset 1px 1px 0 var(--lg-highlight), 
        inset 0 0 5px var(--lg-highlight);
/* border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  border-width: 1px;*/
}

/* Variación para fondos claros */
.liquid-glass-light {
  opacity: 0.90;
  border-radius: 29px;
  background: linear-gradient(180deg, rgb(255,255,255) 0%, rgb(240,240,255) 100%);
  box-shadow: 
    rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, 
    rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, 
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, 
    rgba(255, 255, 255, 0.8) 0px 8px 16px 0px inset;
  border-color: rgba(255, 255, 255, 0.4);
  border-style: solid;
  border-width: 1px;
}

/* Variación con menos opacidad */
.liquid-glass-transparent {
/* opacity: 0.75;
  border-radius: 29px;
  background: linear-gradient(180deg, rgb(1,1,1) 0%, rgb(15,14,40) 100%);
  box-shadow: 
    rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, 
    rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, 
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, 
    rgba(255, 255, 255, 0.25) 0px 8px 16px 0px inset;
  border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  border-width: 1px;*/

    position: relative;
    /*display: flex;*/
    font-weight: 600;
    color: var(--lg-text);
    cursor: pointer;
    background: var(--lg-bg-color);
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 
        0 6px 6px rgba(0, 0, 0, 0.2), 
        0 0 20px rgba(0, 0, 0, 0.1),
        inset 1px 1px 0 var(--lg-highlight), 
        inset 0 0 5px var(--lg-highlight);
    backdrop-filter: blur(0px);
    filter: url(#lg-dist);
    isolation: isolate;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);

}

/* Variación con borde redondeado más pequeño */
.liquid-glass-small {
  opacity: 0.90;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(1,1,1) 0%, rgb(15,14,40) 100%);
  box-shadow: 
    rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, 
    rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, 
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, 
    rgba(255, 255, 255, 0.25) 0px 8px 16px 0px inset;
  border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  border-width: 1px;
}

/* Variación con colores más vibrantes */
.liquid-glass-vibrant {
  opacity: 0.90;
  border-radius: 29px;
  background: linear-gradient(180deg, rgb(5,5,20) 0%, rgb(25,20,60) 100%);
  box-shadow: 
    rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, 
    rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, 
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, 
    rgba(255, 255, 255, 0.3) 0px 8px 16px 0px inset;
  border-color: rgba(255, 255, 255, 0.2);
  border-style: solid;
  border-width: 1px;
}



/* Liquid Glass para textos - Efecto en las letras */

/* Estilo base para textos liquid glass */
.text-liquid-glass {
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 255, 255, 0.9) 30%,
    rgba(255, 255, 255, 0.3) 60%,
    rgba(255, 255, 255, 0.8) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.text-liquid-glass-white-intense {
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(240, 240, 255, 0.9) 20%,
    rgba(220, 220, 240, 0.7) 40%,
    rgba(250, 250, 255, 0.95) 70%,
    rgba(255, 255, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.9),
    0 0 25px rgba(255, 255, 255, 0.6),
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

/* Variación para textos oscuros */
.text-liquid-glass-dark {
  background: linear-gradient(180deg, 
    rgba(20, 20, 30, 0.95) 0%, 
    rgba(40, 40, 60, 0.8) 30%,
    rgba(60, 60, 90, 0.6) 60%,
    rgba(80, 80, 120, 0.9) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 2px 4px rgba(255, 255, 255, 0.2),
    0 1px 0 rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 6px rgba(100, 100, 150, 0.4));
}

/* Variación con efecto metálico */
.text-liquid-glass-metal {
  background: linear-gradient(180deg, 
    rgba(220, 220, 235, 0.95) 0%, 
    rgba(180, 180, 200, 0.8) 25%,
    rgba(140, 140, 160, 0.6) 50%,
    rgba(200, 200, 220, 0.9) 75%,
    rgba(240, 240, 255, 0.95) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.6);
  filter: drop-shadow(0 0 10px rgba(200, 200, 220, 0.5));
}

/* Variación iridiscente */
.text-liquid-glass-rainbow {
  background: linear-gradient(180deg, 
    rgba(255, 200, 255, 0.9) 0%, 
    rgba(200, 255, 255, 0.8) 25%,
    rgba(255, 255, 200, 0.7) 50%,
    rgba(255, 200, 200, 0.8) 75%,
    rgba(255, 255, 255, 0.9) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.3);
  filter: drop-shadow(0 0 8px rgba(255, 200, 255, 0.4));
}

/* Variación sutil para textos pequeños */
.text-liquid-glass-subtle {
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.85) 0%, 
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.75) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

/* Variación con brillo intenso */
.text-liquid-glass-glow {
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.7) 30%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.9) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

/* Variación azul cristal */
.text-liquid-glass-blue {
  background: linear-gradient(180deg, 
    rgba(200, 230, 255, 0.9) 0%, 
    rgba(150, 200, 255, 0.7) 30%,
    rgba(100, 150, 255, 0.5) 60%,
    rgba(180, 220, 255, 0.8) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(200, 230, 255, 0.4);
  filter: drop-shadow(0 0 8px rgba(150, 200, 255, 0.4));
}

.text-liquid-glass-blue-intense {
  background: linear-gradient(180deg, 
    rgba(100, 200, 255, 0.95) 0%, 
    rgba(50, 150, 255, 0.8) 25%,
    rgba(0, 100, 220, 0.6) 50%,
    rgba(80, 180, 255, 0.9) 75%,
    rgba(150, 220, 255, 0.95) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(100, 200, 255, 0.5);
  filter: drop-shadow(0 0 15px rgba(50, 150, 255, 0.6));
}

/* Variación púrpura cristal */
.text-liquid-glass-purple {
  background: linear-gradient(180deg, 
    rgba(230, 200, 255, 0.9) 0%, 
    rgba(200, 150, 255, 0.7) 30%,
    rgba(150, 100, 255, 0.5) 60%,
    rgba(220, 180, 255, 0.8) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(230, 200, 255, 0.4);
  filter: drop-shadow(0 0 8px rgba(200, 150, 255, 0.4));
}

/* Variación púrpura intenso */
.text-liquid-glass-purple-intense {
  background: linear-gradient(180deg, 
    rgba(255, 200, 255, 0.95) 0%, 
    rgba(200, 100, 255, 0.8) 25%,
    rgba(150, 50, 200, 0.6) 50%,
    rgba(220, 150, 255, 0.9) 75%,
    rgba(255, 220, 255, 0.95) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 200, 255, 0.5);
  filter: drop-shadow(0 0 12px rgba(200, 100, 255, 0.5));
}

/* Variación púrpura oscuro */
.text-liquid-glass-purple-dark {
  background: linear-gradient(180deg, 
    rgba(180, 120, 200, 0.9) 0%, 
    rgba(120, 80, 150, 0.7) 30%,
    rgba(80, 40, 120, 0.5) 60%,
    rgba(160, 100, 180, 0.8) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(180, 120, 200, 0.3);
  filter: drop-shadow(0 0 8px rgba(120, 80, 150, 0.4));
}


:root {
    --lg-text: #ffffff;
    --lg-bg-color: rgba(255, 255, 255, 0.1);
    --lg-highlight: rgba(255, 255, 255, 0.2);
    --lg-bg-color-dark: rgba(0, 0, 0, 0.4);
    --lg-highlight-dark: rgba(0, 0, 0, 0.69);
}

.vh-100 {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

.container-fluid, .container {
    max-width: 100%;
    overflow-x: hidden;
}