.janelaPagamento .sectionBoxPayment{margin: 0 auto;opacity: 0;transition: all 0.5s ease;} .formAtivo .janelaPagamento .sectionBoxPayment{margin: 20px auto 50px;opacity: 1; transition: all 0.5s ease;} /* payment */ .sectionBoxPayment {display: flex;max-width: 988px;width: 100%;justify-content: space-between;gap: 20px;border: 1px solid #535353;box-shadow: 0px 0px 14px 0px #00000014;transition: all 0.5s ease;} @media (min-width: 1000px) and (max-width: 1200px) {.sectionBoxPayment{margin: 0 auto 70px;}} /* payment - textDesc */ .sectionBoxPayment .textDesc {display: flex;flex-direction: column;width: 100%;max-width: 300px;padding: 30px 40px;} .sectionBoxPayment .textDesc h3 {position: relative;font: 700 25px / 25px 'omnes-pro';color: #D46A45;margin: 0 0 20px;padding: 0 0 20px;border-bottom: 2px solid #F2F3F4;} .sectionBoxPayment .textDesc h3 em{display: block;max-width: 140px;margin: 7px 0 0;font: 500 italic 15px/17px 'omnes-pro';color: #81868E;} .sectionBoxPayment .textDesc ul.listBenefits {width: 100%; position: relative; margin-bottom: 36px;} .sectionBoxPayment .textDesc ul.listBenefits li{position:relative;font: 400 16px/22px 'omnes-pro';letter-spacing: 0.02em;color: #373B41;padding-left: 26px;margin-bottom: 16px;} .sectionBoxPayment .textDesc ul.listBenefits li:last-of-type{margin-bottom: 0px;} .sectionBoxPayment .textDesc ul.listBenefits li b {font-weight: 600;} .sectionBoxPayment .textDesc ul.listBenefits li em{font-style: italic;} .sectionBoxPayment .textDesc ul.listBenefits li::before {content: ''; display: block; position: absolute; top: 3px; left: 0;user-select: none;} .sectionBoxPayment .textDesc ul.listBenefits li:first-of-type::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23CDCECE' d='M6.4 0a6.4 6.4 0 1 0 0 12.8A6.4 6.4 0 0 0 6.4 0Zm.17 1.28c.23 0 .4.18.4.4v.77c.23.04 1.31.28 1.62 1.67.09.4-.21.8-.63.8h-.21a.66.66 0 0 1-.64-.55c-.13-.6-.46-.72-.61-.72-.11 0-.6.03-.6.93 0 1.57 2.76 1.08 2.76 3.65a2 2 0 0 1-1.8 2.15v.66a.4.4 0 0 1-.8 0v-.66c-.22-.03-1.55-.18-1.86-1.8-.08-.38.24-.73.64-.73h.2c.31 0 .59.2.64.5.15.85.68.8.77.8.12 0 .7-.02.7-.9 0-1.8-2.77-1-2.77-3.67a2.03 2.03 0 0 1 1.79-2.16v-.74c0-.22.18-.4.4-.4Zm7.74 4a8 8 0 0 1-9.03 9.03 6.4 6.4 0 0 0 9.03-9.03Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;width: 17px; height: 17px;} .sectionBoxPayment .textDesc ul.listBenefits li:nth-of-type(2)::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23CDCECE' d='M6.91.13 1.86 2.4c-.52.23-.86.76-.86 1.34V7.2A9.08 9.08 0 0 0 7.5 16 9.08 9.08 0 0 0 14 7.2V3.75c0-.58-.34-1.1-.86-1.34L8.1.13c-.38-.17-.8-.17-1.18 0Zm-.64 10.52-2-2.03a.74.74 0 0 1 0-1.04.71.71 0 0 1 1.02 0L6.78 9.1l3.67-3.73a.71.71 0 0 1 1.02 0c.28.29.28.76 0 1.04L7.3 10.65a.71.71 0 0 1-1.02 0Z'/%3E%3C/svg%3E");background-size: contain; background-repeat: no-repeat;width: 16px; height: 16px;} .sectionBoxPayment .textDesc ul.listBenefits li:nth-of-type(3)::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23CDCECE' d='M8 .5a7.5 7.5 0 1 0 .02 15.02A7.5 7.5 0 0 0 8 .5Zm2.2 8.44-1.4 3.04a.68.68 0 0 1-.61.4h-.13a.68.68 0 0 1-.68-.69v-1.47a.82.82 0 0 0-.25-.59L6.4 8.9a.9.9 0 0 1-.26-.64v-.6a.66.66 0 0 0-.2-.47l-.23-.23a.68.68 0 0 0-.48-.2H4a.88.88 0 0 1-.63-.27l-1.04-1.1A6.25 6.25 0 0 1 8 1.76l.38.02-.82 1.25a.55.55 0 0 0 0 .59l.52.87c.14.23.1.53-.1.72a.59.59 0 0 1-.67.11l-.55-.27a.5.5 0 0 0-.58.09l-.33.33a.5.5 0 0 0 0 .7l.37.38c.14.13.33.21.52.21h.9c.23 0 .47.07.67.2l1.6 1c.34.2.47.63.3 1Zm2.5-.78a.8.8 0 0 1-.41-.51l-.4-1.57a.8.8 0 0 1 .38-.88l.99-.57a6.2 6.2 0 0 1 .92 4.26l-1.48-.73Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");background-size: contain; background-repeat: no-repeat;width: 16px; height: 16px;} .sectionBoxPayment .textDesc ul.listBenefits li:nth-of-type(4)::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23CDCECE' d='M12.5.604h-10a2.503 2.503 0 0 0-2.5 2.5v7.5c0 1.38 1.121 2.5 2.5 2.5h1.827l2.342 1.973c.24.213.54.318.837.318.292 0 .582-.102.807-.303l2.404-1.988H12.5c1.379 0 2.5-1.12 2.5-2.5v-7.5c0-1.378-1.121-2.5-2.5-2.5Zm-2.058 6.142a.624.624 0 0 1-.884 0L8.125 5.313v4.666a.625.625 0 1 1-1.25 0V5.375L5.442 6.808a.623.623 0 0 1-.884 0 .624.624 0 0 1 0-.884l1.648-1.648a1.876 1.876 0 0 1 2.65 0l1.586 1.585a.624.624 0 0 1 0 .884Z'/%3E%3C/svg%3E");width: 16px;height: 16px;} /* textDesc - valueLifetime */ .sectionBoxPayment .textDesc .valueLifetime {position: relative;} .sectionBoxPayment .textDesc .valueLifetime .bullets{display: flex;flex-wrap: wrap;gap: 2px;margin: 0 0 10px;padding: 0px 0 20px;border-bottom: 2px solid #F2F3F4;} .sectionBoxPayment .textDesc .valueLifetime .bullets p{width: 100%;border: 1px solid #e6e6e6;padding: 10px 14px;font: 500 14px / 14px 'omnes-pro';color: #959AA3;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .valueLifetime .bullets p b:before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 8px;height: 8px;background: #535663;border-radius: 8px;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .valueLifetime .bullets p b{position: relative;padding: 0 0 0 13px;font-weight: 600;color: #535663;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.active{color: #fff;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.active b{color: #fff!important;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.active b:before{background: #fff!important;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.blue.active{background: #45adbd;border-color: #45adbd;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.yellow.active{background: #f7d41b;border-color: #f7d41b;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.green.active{background: #4caf50;border-color:#4caf50;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.blue b{color: #45adbd;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.blue b:before{background: #45adbd;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.yellow b{color: #ebc912;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.yellow b:before{background: #ebc912;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.green b{color: #4caf50;} .sectionBoxPayment .textDesc .valueLifetime .bullets p.green b:before{background: #4caf50;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price{display: flex;flex-wrap: wrap;gap: 14px;margin: 0 0 20px;padding: 0 0 20px;border-bottom: 2px solid #F2F3F4;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price p{max-width: 80px;font: 500 18px/20px 'omnes-pro';color: #272D38;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .valor_selecionado{display: flex;align-items: center;gap: 5px;width: calc(100% - 94px);padding: 4px 16px 6px;border: 1px solid #969696;border-radius: 5px;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .valor_selecionado i{display: block;font: 400 30px/32px 'omnes-pro';color: #A5ABB9;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .valor_selecionado b{height: 16px;font: 600 30px/16px 'omnes-pro';color: #53565E;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 6px;width: 100%;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange input {-webkit-appearance: none;width: 100%;height: 10px;border-radius: 5px;background: linear-gradient(to right, #4CAF50 40%, #ddd 40%);outline: none;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange input::-webkit-slider-runnable-track {height: 8px;border-radius: 5px;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange input::-moz-range-track {height: 8px;border-radius: 5px;background: #ddd;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange input::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 17px;height: 17px;border-radius: 50%;background: #2f2f2f;cursor: pointer;margin-top: -5px;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange input::-moz-range-thumb {width: 17px;height: 17px;border-radius: 50%;background: #2f2f2f;cursor: pointer;border: none;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange input{width: 100%;} .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .inputRange span{text-transform: uppercase;font: 600 14px/14px 'omnes-pro';color: #959AA3;} .sectionBoxPayment .textDesc .valueLifetime h4.alert{padding: 0 0 20px 24px;} .sectionBoxPayment .textDesc .valueLifetime h4.alert svg{position: absolute;top: 2px;left: 0;width: 16px;height: 16px;fill: #bcc1c9a8;} .sectionBoxPayment .textDesc .valueLifetime h4.alert em i{font-weight: 500;} .sectionBoxPayment .textDesc .valueLifetime h4.alert b{display: block;margin-bottom: 10px;} .sectionBoxPayment .textDesc .valueLifetime h4 {display: block;width: 100%;position: relative;margin: 20px 0 0;padding: 0 0 20px;border-bottom: 2px solid #F2F3F4;} .sectionBoxPayment .textDesc .valueLifetime h4 b{font: 600 16px / 18px 'omnes-pro';letter-spacing: 0.02em; color: #2F3135;} .sectionBoxPayment .textDesc .valueLifetime h4 em {display: flex ; gap: 6px; position: relative; border-radius: 100%; transition: all 0.5s ease; justify-content: flex-start; align-items: center;} .sectionBoxPayment .textDesc .valueLifetime h4 em i{display: block;color: #A1A6AF;font: 600 italic 16px / 18px 'omnes-pro';letter-spacing: 0.02em;transition: all 0.5s ease;} /*.sectionBoxPayment .textDesc .valueLifetime h4:hover em i, .sectionBoxPayment .textDesc .valueLifetime h4.ativo em i{color: #D46A45;}*/ .sectionBoxPayment .textDesc .valueLifetime h4 em svg{width: 12px; height: 12px;outline: 2px solid #CDCECE; outline-offset: -1px; border-radius: 100%;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .valueLifetime h4 em svg path{fill:#CDCECE; transition: all 0.5s ease;} .sectionBoxPayment .textDesc .valueLifetime h4:hover em svg, .sectionBoxPayment .textDesc .valueLifetime h4.ativo em svg{ outline: 2px solid #D46A45;} .sectionBoxPayment .textDesc .valueLifetime h4:hover em svg path, .sectionBoxPayment .textDesc .valueLifetime h4.ativo em svg path{fill:#D46A45;} .sectionBoxPayment .textDesc .valueLifetime h4 span {position: absolute; opacity: 0; user-select: none; pointer-events: none; visibility: hidden; font: 400 15px/20px 'omnes-pro'; color: #fff; letter-spacing: 0.01em; background: #1A1B1D; padding: 14px 20px; text-transform: initial; display: block; border-radius: 8px; z-index: 99; left: -233px; width: 212px; top: 3px; box-shadow: 1px 4px 10px #a1a0a087; transition: all 0.5s ease;text-align: end;} .sectionBoxPayment .textDesc .valueLifetime h4 span::before{content: ''; display: block;position: absolute; width: 12px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 20'%3E%3Cpath fill='%231A1B1D' fill-rule='evenodd' d='m0 20 11.76-9.43c.32-.25.32-.89 0-1.14L0 0v20Z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;z-index: -1;top: 14px; right: -8px;} .sectionBoxPayment .textDesc .valueLifetime h4.ativo span {opacity: 1; visibility: visible; transition: all 0.5s ease;} @media (min-width: 1000px) and (max-width: 1370px) { .sectionBoxPayment .textDesc .valueLifetime h4 span{left: -20px; top: 67px; text-align: start;} .sectionBoxPayment .textDesc .valueLifetime h4 span::before {right: initial; left: 20px; top: -12px; transform: rotate(270deg); }} /* textDesc - price */ .sectionBoxPayment .textDesc .valueLifetime .price {display: block;font: 400 48px / 32px 'omnes-pro';color: #1A1B1D;position: relative;z-index: 1;} .sectionBoxPayment .textDesc .valueLifetime .price::before{content: '';display: block;position: absolute;width: 0px;height: 3px;border-radius: 1px;background: transparent;transition: all 0.3s ease;transition-delay: 0.1s;left: -5px;top: 50%;transform: translateY(-50%);z-index: 10;} .sectionBoxPayment .textDesc .valueLifetime .price i {font-weight: 600;} .sectionBoxPayment .textDesc .valueLifetime .price.crossed {display: inline-flex;gap: 5px;margin-right: 10px;font-size: 34px;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .valueLifetime .price.crossed::before {width: calc(100% + 10px); background:#1A1B1D; } .sectionBoxPayment .textDesc .valueLifetime .discountPriceFinal {display: inline-flex;} .sectionBoxPayment .textDesc .valueLifetime .discountPriceFinal p.priceDiscount{font: 400 48px / 32px 'omnes-pro'; color: #4C9A3C;transition: all 0.5s ease;margin-left: 3px;} .sectionBoxPayment .textDesc .valueLifetime .discountPriceFinal p.priceDiscount i{font-weight: 600;} /* textDesc - couponCode */ .sectionBoxPayment .textDesc .couponCode {display: flex;width: 100%;max-width: 206px;min-height: 44px;border: 1px dashed #D9DCE0;border-radius: 2px 40px 40px;letter-spacing: 0.02em;padding: 10px 20px 10px 44px;position: relative;margin-bottom: 20px;} .sectionBoxPayment .textDesc .couponCode em{display: block; position: absolute; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%2351BC3B' d='M16.67 0h-5c-.43 0-.86.16-1.18.49l-10 10c-.65.65-.65 1.7 0 2.36l6.66 6.66c.66.65 1.71.65 2.36 0l10-10c.33-.32.49-.75.49-1.18v-5C20 1.5 18.5 0 16.67 0Zm0 5a1.67 1.67 0 1 1 0-3.33 1.67 1.67 0 0 1 0 3.33Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; left: 15px; top: 11px; user-select: none; z-index: 2;} .sectionBoxPayment .textDesc .couponCode b{font: 500 16px / 22px 'omnes-pro'; color: #4c9a3c;} /* textDesc - cupon */ .sectionBoxPayment .textDesc .couponNotice {font: 500 14px / 18px 'omnes-pro'; color: #4C9A3C; margin-bottom: 10px;} .sectionBoxPayment .textDesc .couponNotice b{font-weight: 600;} .sectionBoxPayment .textDesc .coupon {position: relative;margin: 30px 0 0;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:active, .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:link, .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:visited{display: flex; width: fit-content; transition: all 0.5s ease; align-items: center;gap:9px; margin-bottom: 32px;position: relative; cursor: pointer;} .sectionBoxPayment .textDesc .coupon a.openBoxCoupon span{display: flex; width: 18px; height: 18px;user-select: none;} .sectionBoxPayment .textDesc .coupon a.openBoxCoupon span svg path{fill: #999CA4; opacity: 0.4; transition: all 0.45s ease;} .sectionBoxPayment .textDesc .coupon a.openBoxCoupon i{font: 500 16px / 16px 'omnes-pro'; letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 2px; color: #999CA4;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:hover span svg path{fill: #d46a45; opacity: 0.9;} .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:hover i{color: #d46a45;} .sectionBoxPayment .textDesc .coupon .boxInput {display: block; position: relative; padding-bottom: 50px;transition: all 0.5s ease;} .sectionBoxPayment .textDesc .coupon .boxInput i{display: flex ; width: 100%; height: 100%; position: relative; align-items: center; gap: 8px;} .sectionBoxPayment .textDesc .coupon .boxInput i::before{content: ''; display: block; position: absolute; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23C7C7C8' d='M16.67 0h-5c-.43 0-.86.16-1.18.49l-10 10c-.65.65-.65 1.7 0 2.36l6.66 6.66c.66.65 1.71.65 2.36 0l10-10c.33-.32.49-.75.49-1.18v-5C20 1.5 18.5 0 16.67 0Zm0 5a1.67 1.67 0 1 1 0-3.33 1.67 1.67 0 0 1 0 3.33Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; left: 16px; top: 12px; user-select: none; z-index: 2;} .sectionBoxPayment .textDesc .coupon .boxInput input {position: relative; width: 100%; max-width: 206px; min-height: 44px; background: #EFEFF0; border-radius: 2px 40px 40px; font: 400 16px / 22px 'omnes-pro'; color: #53565E; letter-spacing: 0.02em; padding: 10px 20px 10px 44px;box-shadow: 0 0 5px transparent; transition: all 0.5s ease;} .sectionBoxPayment .textDesc .coupon .boxInput input:hover, .sectionBoxPayment .textDesc .coupon .boxInput input:focus{box-shadow: 0px 0px 5px #d46a45;} .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:active, .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:link, .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:visited{display: flex ; width: fit-content; align-items: center; flex-direction: row-reverse; justify-content: center; height: 40px; padding: 12px 22px; background: linear-gradient(90deg, #47BDCF 0%, #60A3DB 31.05%, #A856FF 65.91%, #E87B55 100%); border-radius: 48px; transition: all 0.5s ease; cursor: pointer; box-shadow: inset 0px 0px 60px 50px #1a1c1d; font: 600 18px / 16px 'omnes-pro'; color: #fff; letter-spacing: 0.04em; text-transform: uppercase;position: relative;z-index: 1;} ._1000 .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon::before{content: '';opacity: 0;filter: blur(15px);bottom: 0px;position: absolute;z-index: -1;border-radius: 40px;left: 50%;transform: translateX(-50%);width: 100%;height: 30px;background: linear-gradient(90deg, #47BDCF 0%, #60A3DB 31.05%, #A856FF 65.91%, #E87B55 100%);will-change: opacity, transform;backface-visibility: hidden;transition: opacity 0.5s ease;} ._1000 .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:hover{box-shadow: inset 0px 0px 0px 50px transparent; } .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:hover::before{ opacity: 1;} .sectionBoxPayment .textDesc .coupon .boxInput .msgReturn {display: block; width: fit-content; max-width: calc(100% - 16px); font: 500 14px / 18px 'omnes-pro'; color: #4C9A3C; letter-spacing: 0.02em; position: absolute; top: 49px; left: 16px;} .sectionBoxPayment .textDesc .coupon .boxInput .msgReturn.error{color: #D44545; padding-left: 10px; font-style: italic;} .sectionBoxPayment .textDesc .coupon .boxInput .msgReturn.active.error::before{content: "*"; position: absolute; left: 0px; top: 2px; font: 500 18px / 15px 'omnes-pro'; color: #D44545;} /* textDesc - stripeCard */ .sectionBoxPayment .textDesc figure.stripeCard {display: block;position: relative;margin: auto 0 25px;padding: 0 0 26px;border-bottom: 2px solid #F2F3F4;overflow: hidden;} .sectionBoxPayment .textDesc figure.stripeCard img{user-select: none;margin-top: -2px;} .sectionBoxPayment .textDesc a.btVoltar:active, .sectionBoxPayment .textDesc a.btVoltar:any-link{max-width: max-content;color: #999CA4;font: 500 16px / 16px 'omnes-pro';transition: all 0.5s ease;} .sectionBoxPayment .textDesc a.btVoltar:hover{color: #000;} /* textDesc - alertGuruApplication */ .sectionBoxPayment .textDesc .alertGuruApplication {display: block; background: #EFDAD9; border-radius: 4px; padding: 16px 24px 20px;text-align: center;} .sectionBoxPayment .textDesc .alertGuruApplication p {font: 500 15px / 16px 'omnes-pro'; color: #2D3033; letter-spacing: 0.02em;font-style: italic;} .sectionBoxPayment .textDesc .alertGuruApplication p b{color:#C94B47 ; font-weight: 500; font-style: italic;} /* payment - boxPayment */ .sectionBoxPayment .boxPayment{width: 100%;max-width: 584px;padding: 30px 40px;border-left: 2px solid #F2F3F4;position: relative;} .sectionBoxPayment .intervalSelector{display: flex; align-items: center; border: 1px solid #535353; border-radius: 104px; background: #FFFFFF; width: fit-content; padding: 4px; position: absolute; right: 40px; top: -27px; z-index: 5;} .sectionBoxPayment .intervalSelector label{display: flex; align-items: center; background: #FFFFFF; border-radius: 56px; padding: 10px 24px; gap: 8px; transition: all .3s; font: 600 16px/20px 'omnes-pro'; color: #101010; letter-spacing: 0.02em; position: relative; cursor: pointer;} .sectionBoxPayment .intervalSelector label:hover{background: #E8E8E8;} .sectionBoxPayment .intervalSelector label.active, .sectionBoxPayment .intervalSelector label:has(input:checked){background: #CE643F; color: #FFFFFF;} .sectionBoxPayment .intervalSelector label.active span, .sectionBoxPayment .intervalSelector label:has(input:checked) span{background: #242424; color: #FFFFFF;} .sectionBoxPayment .intervalSelector label input{position: absolute; opacity: 0; pointer-events: none} .sectionBoxPayment .intervalSelector label span{display: flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 32px; font: 600 12px/16px 'omnes-pro'; letter-spacing: 0.02em; color: #FFFFFF; background: #525252;} .sectionBoxPayment .boxPayment.loading::before{content: ''; display: block; position: absolute; width: 100%; height: 100%;border-radius: 24px; top: 0; left: 0; background: #fff; opacity: 0.8; z-index: 10;} .sectionBoxPayment .boxPayment.loading::after{content: 'loading'; display: block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font: 700 28px / 28px 'omnes-pro';color: #1A1B1D;z-index: 11;} .sectionBoxPayment .boxPayment form{position: relative;} /* input email */ .sectionBoxPayment .boxPayment form span.emailLabel {display: block; font-size: 16px; letter-spacing: 0.03em; color: #30313d; margin-bottom: 4px; } .sectionBoxPayment .boxPayment form input#email{display: block; width: 100%; padding: 12px; border: 1px solid #e6e6e6; border-radius: 5px; margin-bottom: 14px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);font-size: 17px; letter-spacing: 0.02em; color: #2F303A; transition: all 0.2s ease;} .sectionBoxPayment .boxPayment form input#email:focus{border:1px solid #1469D3;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsla(210, 96%, 45%, 25%), 0 1px 1px 0 rgba(0, 0, 0, 0.08);} /* button submit */ .sectionBoxPayment .boxPayment form button#submit{display: flex; width: fit-content; align-items: center; flex-direction: row-reverse; justify-content: center; gap: 10px;height: 44px; padding: 12px 18px 12px 28px; border-radius: 48px; margin-top: 24px; transition: all 0.4s ease; cursor: pointer; background: linear-gradient(90deg, #47BDCF 0%, #60A3DB 31.05%, #A856FF 65.91%, #E87B55 100%); box-shadow: inset 0px 0px 60px 50px #1a1c1d;position: relative; z-index: 1;} ._1000 .sectionBoxPayment .boxPayment form button#submit::before{content: '';opacity: 0;filter: blur(15px);bottom: 0px;position: absolute;z-index: -1;border-radius: 40px;left: 50%;transform: translateX(-50%);width: 100%;height: 30px;background: linear-gradient(90deg, #47BDCF 0%, #60A3DB 31.05%, #A856FF 65.91%, #E87B55 100%);will-change: opacity, transform;backface-visibility: hidden;transition: opacity 0.5s ease;} ._1000 .sectionBoxPayment .boxPayment form button#submit:hover{box-shadow: inset 0px 0px 0px 50px transparent;} .sectionBoxPayment .boxPayment form button#submit:hover::before{opacity: 1;} .sectionBoxPayment .boxPayment form button#submit span{font: 600 18px / 16px 'omnes-pro';color: #fff; letter-spacing: 0.02em;} .sectionBoxPayment .boxPayment form button#submit div#spinner:not(.hidden){content: ""; display: inline-block; width: 18px; height: 18px; border: 2px solid #fff; border-bottom-color: transparent; border-radius: 50%; box-sizing: border-box; animation: rotacaoPay 1s linear infinite; z-index: 10;} /* boxPayment erro */ .sectionBoxPayment .boxPayment form div#payment-message{color: #df1b41; font-size: 16px; line-height: 20px; display: flex ; margin-top: 20px; position: relative; gap: 10px; align-items: flex-start;transition: all 0.2s ease;} .sectionBoxPayment .boxPayment form div#payment-message.hidden{display: none;transition: all 0.2s ease;} .sectionBoxPayment .boxPayment form div#payment-message::before{content: ''; display: block; width: 18px; min-width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%23D44545' fill-rule='evenodd' d='M9 0c4.9697 0 9 4.0303 9 9s-4.0303 9-9 9-9-4.0303-9-9 4.0303-9 9-9Zm-.9642 9.7745V5.1423c0-.531.4332-.9642.9642-.9642.531 0 .9642.4372.9642.9642v4.6322c0 .527-.4332.9642-.9642.9642-.531 0-.9642-.4332-.9642-.9642Zm.96 1.9983c.6035 0 1.0929.4894 1.0929 1.0928 0 .6035-.4894 1.0929-1.0929 1.0929-.6034 0-1.0928-.4894-1.0928-1.0929 0-.6034.4894-1.0928 1.0928-1.0928Z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; user-select: none;transition: all 0.2s ease;} .sectionBoxPayment .boxPayment form div#payment-message.hidden::before{display: none;transition: all 0.2s ease;} /* buttons */ section.paymentFees .centro .button {padding: 40px 20px 0;align-items: center;position: relative;display: flex;justify-content: center;gap: 52px;} section.paymentFees .centro .button .back {color: #53565E; font: 500 17px / 16px 'omnes-pro'; letter-spacing: 0.02em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: all 0.5s ease;} section.paymentFees .centro .button .back:hover{color: #d46a45; text-decoration-color: #d46a45; transition: all 0.5s ease;} /* Coupon Total Discount */ .successCouponTotalDiscount{display: flex; width: 100%; flex-direction: column; align-items: center; margin: 17px auto 40px; text-align: center;} .successCouponTotalDiscount span.iconSuccess{display: block; width: 114px; height: 152px; background: url("../img/congratsGuru.svg"); background-size: contain; background-repeat: no-repeat; user-select: none;} .successCouponTotalDiscount h5{font: 600 20px / 31px 'omnes-pro'; letter-spacing: 0.02em; font-style: italic; color: #1A1B1D;margin-top: -9px;} .successCouponTotalDiscount h5 b{display: block;font: 700 40px / 44px 'omnes-pro'; color: #51BC3B;letter-spacing: 0.02em;} .successCouponTotalDiscount h5 i{font: 600 18px / 24px 'omnes-pro'; font-style: italic; color: #272D38;} .successCouponTotalDiscount .alertGuruApplication{display: flex;width: 100%;margin: 36px auto 0;flex-direction: column;align-items: center;} .successCouponTotalDiscount .alertGuruApplication em{display: block; font: 500 18px / 20px 'omnes-pro'; font-style: italic; color: #272D38; max-width: 254px; letter-spacing: 0.02em;margin-bottom: 17px;} .successCouponTotalDiscount .alertGuruApplication em b{font-weight: 600;font-style: italic;} .successCouponTotalDiscount .alertGuruApplication p{display: block; padding: 14px 24px; background: #EFDAD9; border-radius: 4px; color: #2D3033; font: 500 15px / 16px 'omnes-pro'; letter-spacing: 0.02em; font-style: italic;} .successCouponTotalDiscount .alertGuruApplication p br{display: none;} .successCouponTotalDiscount .alertGuruApplication p b{color: #C94B47; font-weight: 600; font-style: italic;} .successCouponTotalDiscount a.acceptDiscountTotal:active, .successCouponTotalDiscount a.acceptDiscountTotal:link, .successCouponTotalDiscount a.acceptDiscountTotal:visited{display: flex ; width: fit-content; align-items: center; flex-direction: row-reverse; justify-content: center; gap: 10px; height: 40px; padding: 12px 32px; background: linear-gradient(90deg, #47BDCF 0%, #60A3DB 31.05%, #A856FF 65.91%, #E87B55 100%); border-radius: 56px; position: relative; will-change: opacity, transform; backface-visibility: hidden; transition: opacity 0.5s ease; z-index: 1; margin-top: 30px;} ._1000 .successCouponTotalDiscount a.acceptDiscountTotal::before{content: ""; width: 100%; height: 100%; background: #1A1B1D; border-radius: 56px; position: absolute; top: 0px; left: 0px; opacity: 1; will-change: opacity, transform; backface-visibility: hidden; transition: opacity 0.4s ease;z-index: -1;} ._1000 .successCouponTotalDiscount a.acceptDiscountTotal::after{content: ''; opacity: 0; filter: blur(15px); bottom: 0px; position: absolute; z-index: -1; border-radius: 40px; left: 50%; transform: translateX(-50%); width: 100%; height: 30px; background: linear-gradient(90deg, #47BDCF 0%, #60A3DB 31.05%, #A856FF 65.91%, #E87B55 100%); will-change: opacity, transform; backface-visibility: hidden; transition: opacity 0.5s ease;} .successCouponTotalDiscount a.acceptDiscountTotal b{font: 600 18px / 16px 'omnes-pro'; color: #fff; letter-spacing: 0.02em; position: relative; z-index: 2;} .successCouponTotalDiscount a.acceptDiscountTotal:hover::before{opacity: 0;} .successCouponTotalDiscount a.acceptDiscountTotal:hover::after{opacity: 1;} /* MOBILE */ ._320 section.paymentFees .centro .boxEscolhaPreco .itensPreco .escolhaBoxPagamento.loading{min-height: 300px;} ._320 .sectionBoxPayment {flex-wrap: wrap;gap: 0;} /* payment - textDesc */ ._320 .sectionBoxPayment .textDesc {display: block;max-width: 100%;padding: 20px 20px 0;} ._320 .sectionBoxPayment .textDesc h3 {width: 100%;font-size: 20px;margin: 0 0 10px;padding: 0;border: none;} ._320 .sectionBoxPayment .textDesc h3 em{max-width: 100%; margin: 0;} ._320 .sectionBoxPayment .textDesc ul {margin: 0 auto 20px;} ._320 .sectionBoxPayment .textDesc ul li {font: 400 15px / 20px 'omnes-pro'; letter-spacing: 0.02em; padding: 0 0 0 24px; color: #373b41f2; margin-bottom: 12px;} ._320 .sectionBoxPayment .textDesc ul li br.desktop{display: none;} ._320 .sectionBoxPayment .textDesc ul li:nth-of-type(3)::before {top: 2px;} ._320 .sectionBoxPayment .textDesc span br.desktop{display: none;} /* textDesc - valueLifetime */ ._320 .sectionBoxPayment .textDesc .valueLifetime {display: flex;flex-wrap: wrap;gap: 10px 0px;width: 100%;margin-bottom: 20px;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 {/* display: flex; */max-width: max-content;gap: 8px;align-items: center;margin: 0;padding: 0 0 0 10px;border: none;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 b{font-size: 14px;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 em {} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 em i{font-size: 15px; line-height: 14px;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 em svg{width: 14px; height: 14px; outline: 2px solid #cdcece;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 em svg path{} ._320 .sectionBoxPayment .textDesc .valueLifetime h4:hover em svg, ._320 .sectionBoxPayment .textDesc .valueLifetime h4.ativo em svg{outline: 2px solid #D46A45;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 span {top: 50px;right: 0;left: initial;text-align: start;} ._320 .sectionBoxPayment .textDesc .valueLifetime h4 span::before{right: 20px; top: -12px; transform: rotate(270deg);} ._320 .sectionBoxPayment .textDesc .valueLifetime h4.ativo span {} /* textDesc - price */ ._320 .sectionBoxPayment .textDesc .price{font-size: 40px;} ._320 .sectionBoxPayment .textDesc .valueLifetime .price i {} ._320 .sectionBoxPayment .textDesc .valueLifetime .price.crossed {text-decoration-color: #1A1B1D;} ._320 .sectionBoxPayment .textDesc .valueLifetime .discountPriceFinal {} ._320 .sectionBoxPayment .textDesc .valueLifetime .discountPriceFinal p.priceDiscount{font-size: 34px;} ._320 .sectionBoxPayment .textDesc .valueLifetime .discountPriceFinal p.priceDiscount i{} ._320 .sectionBoxPayment .textDesc .valueLifetime .box_fair_price{align-items: center;} ._320 .sectionBoxPayment .textDesc .valueLifetime .box_fair_price p{max-width: 140px;} ._320 .sectionBoxPayment .textDesc .valueLifetime .box_fair_price .valor_selecionado{width: calc(100% - 154px);/* max-width: 130px; */} ._320 .sectionBoxPayment .textDesc .valueLifetime h4.alert b{padding-left: 25px;} /* textDesc - cupon */ ._320 .sectionBoxPayment .textDesc .coupon {margin: 17px 0 20px;} ._320 .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:active, ._320 .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:link, ._320 .sectionBoxPayment .textDesc .coupon a.openBoxCoupon:visited{margin: 0;} ._320 .sectionBoxPayment .textDesc .coupon a.openBoxCoupon span{display: none;} ._320 .sectionBoxPayment .textDesc .coupon a.openBoxCoupon i{font-size: 14px;} ._320 .sectionBoxPayment .textDesc .coupon .boxInput {max-width: 280px;margin: 0 0 14px;padding-bottom: 10px;/* border-bottom: 2px solid #F2F3F4; */} ._320 .sectionBoxPayment .textDesc .coupon .boxInput i{} ._320 .sectionBoxPayment .textDesc .coupon .boxInput i::before{top: 11px; width: 18px; height: 18px; left: 17px;} ._320 .sectionBoxPayment .textDesc .coupon .boxInput input {min-height: initial; height: 40px; padding-left: 50px;} ._320 .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:active, ._320 .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:link, ._320 .sectionBoxPayment .textDesc .coupon .boxInput i a.btCoupon:visited{background: #1A1B1D; border-radius: 24px; box-shadow: rgba(57, 71, 83, 0.2) 0px -2px 4px inset, rgb(255 255 255 / 30%) 0px 2px 4px inset, rgba(140, 143, 150, 0.23) 0px 4px 6px 0px; height: 36px; font-size: 16px;} ._320 .sectionBoxPayment .textDesc .coupon .boxInput .msgReturn {top: initial; position: relative; left: initial; margin: 6px 0 -10px 5px; width: 100%; max-width: 200px;} /* textDesc - stripeCard */ ._320 .sectionBoxPayment .textDesc figure.stripeCard {padding: 0 0 20px;margin: 0 0 20px;} ._320 .sectionBoxPayment .textDesc figure.stripeCard img{/* display: none!important; */} /* textDesc - alertGuruApplication */ ._320 .sectionBoxPayment .textDesc .alertGuruApplication {padding: 20px;margin: 30px auto 0;} ._320 .sectionBoxPayment .textDesc .alertGuruApplication p {max-width: 250px; margin: 0 auto;} ._320 .sectionBoxPayment .textDesc .alertGuruApplication p b{} /* boxPayment */ ._320 .sectionBoxPayment .boxPayment{width: calc(100% + 10px);padding: 30px 22px;margin: -10px -5px 0px;border: 1px dashed #cdd0d454;box-shadow: 0px 2px 6px 0px #8c8f9624;border-radius: 10px;background: #fafafa8a;} ._320 .sectionBoxPayment .boxPayment { width: calc(100% + 20px); padding: 30px 20px; margin: -10px -10px 0px; border: initial; box-shadow: initial; border-radius: initial; background: initial; } ._320 .p-GridCell--xs12{width: 100% !important;} ._320 .sectionBoxPayment .boxPayment form input#email{background: #fff;} ._320 .sectionBoxPayment .boxPayment form button#submit{background: #1A1B1D;max-width: 240px; width: 100%; border-radius: 24px; box-shadow: rgba(57, 71, 83, 0.2) 0px -2px 4px inset, rgb(255 255 255 / 30%) 0px 2px 4px inset, rgba(140, 143, 150, 0.23) 0px 4px 6px 0px; margin: 24px auto 0;} /* Coupon Total Discount */ ._320 .successCouponTotalDiscount{margin: 0 auto;} ._320 .successCouponTotalDiscount span.iconSuccess{width: 92px; height: 122px; margin-top: -10px;} ._320 .successCouponTotalDiscount h5{font: 600 18px / 30px 'omnes-pro'; font-style: italic; color: #272D38; margin-top: -15px;} ._320 .successCouponTotalDiscount h5 b{font: 700 34px / 38px 'omnes-pro';} ._320 .successCouponTotalDiscount h5 i{font: 600 16px / 20px 'omnes-pro'; font-style: italic; opacity: 0.9;} ._320 .successCouponTotalDiscount .alertGuruApplication{margin: 20px auto 0; padding-top: 20px; border-top: 1px dashed #dddddd;} ._320 .successCouponTotalDiscount .alertGuruApplication em{font-size: 16px; line-height: 18px; max-width: 220px; margin-bottom: 12px;} ._320 .successCouponTotalDiscount .alertGuruApplication em b{} ._320 .successCouponTotalDiscount .alertGuruApplication p{} ._320 .successCouponTotalDiscount .alertGuruApplication p b{} ._320 .successCouponTotalDiscount .alertGuruApplication p br.desktop{display: none;} ._320 .successCouponTotalDiscount a.acceptDiscountTotal:active, ._320 .successCouponTotalDiscount a.acceptDiscountTotal:link, ._320 .successCouponTotalDiscount a.acceptDiscountTotal:visited{box-shadow: inset 0px -2px 4px #39475333, inset 0px 2px 4px #ffffff63, 0px 4px 6px 0px #8c8f963b; background: #272d38;} ._320 .successCouponTotalDiscount a.acceptDiscountTotal b{} ._320 .sectionBoxPayment .textDesc a.btVoltar{display: none;}