.cartao-purchase-symbols { position: absolute; pointer-events: none; }

.cartao-purchase-panel {
    --purchase-gold: #ffcd51;
    --purchase-muted: #c5d4e5;
    --purchase-navy: #03162c;
    position: relative;
    isolation: isolate;
    min-width: 0;
    margin-block: clamp(6px, 1vw, 15px);
    padding: clamp(13px, 1.8vw, 28px) clamp(12px, 2.5vw, 36px);
    border: 2px solid transparent;
    border-radius: clamp(19px, 2.65vw, 38px);
    background:
        radial-gradient(ellipse at 18% -25%, #0b507c, transparent 64%) padding-box,
        linear-gradient(156deg, #07345a, #03162c 76%) padding-box,
        linear-gradient(143deg, #ffe48b 2%, #9cc4dd 27%, #f4f8ff 66%, #ffd877 100%) border-box;
    color: #fff;
    box-shadow: 0 0 18px #158ac04a, 0 -3px 14px #ffcd514a, inset 0 0 14px #0b507c45;
}

.cartao-purchase-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(10px, 1.55vw, 22px);
    row-gap: 4px;
    margin: 0 0 clamp(13px, 1.8vw, 24px);
}

.cartao-purchase-quick .cartao-purchase-heading { margin-right: 29%; }

.cartao-purchase-heading-icon {
    grid-row: span 2;
    display: grid;
    width: clamp(43px, 5.7vw, 76px);
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid #a77d38;
    border-radius: 34%;
    background: #03243e;
    color: var(--purchase-gold);
    box-shadow: inset 0 0 12px #001226ab;
}

.cartao-purchase-heading svg,
.cartao-purchase-ticket svg,
.cartao-purchase-arrow svg {
    display: block;
    width: 62%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.natal-campaign .cartao-purchase-heading h2 {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.3vw, 33px);
    margin: 0;
    color: #fff;
    font: 800 clamp(1.23rem, 3vw, 2.6rem)/1.05 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    letter-spacing: -.033em;
}

.cartao-purchase-heading h2::after {
    flex: 1;
    height: 3px;
    border-radius: 100px;
    background: linear-gradient(90deg, #ffcd51, #ffe7a4 50%, transparent);
    filter: drop-shadow(0 0 4px #f4a92d6e);
    content: "";
}

.natal-campaign .cartao-purchase-heading p,
.cartao-purchase-copy > span {
    margin: 0;
    color: var(--purchase-muted);
    font: 400 clamp(.76rem, 1.61vw, 1.35rem)/1.22 var(--cartao-font-body, Inter, Arial, sans-serif);
}

.cartao-purchase-choices,
.cartao-purchase-offers { display: grid; gap: clamp(10px, 1.8vw, 26px); }
.cartao-purchase-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartao-purchase-choice:only-child { grid-column: 1 / -1; }

.natal-campaign :is(.cartao-purchase-choice, .cartao-purchase-offer) {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    min-width: 0;
    min-height: clamp(77px, 9vw, 125px);
    border: 2px solid #ffe48b;
    border-radius: clamp(16px, 2vw, 29px);
    text-decoration: none;
}

.natal-campaign .cartao-purchase-choice {
    grid-template-columns: minmax(40px, 21%) minmax(0, 1fr) auto;
    gap: clamp(9px, 2vw, 29px);
    padding: clamp(9px, 1.25vw, 18px) clamp(10px, 2vw, 28px);
    background: radial-gradient(ellipse at 30% -20%, #0b507c, transparent 66%), linear-gradient(#07345a, #03162c 86%);
    color: #fff;
    box-shadow: inset 0 0 11px #5491a62f, 0 0 11px #ffcd5138, 0 6px 14px #0006;
}

.cartao-purchase-ticket {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(38px, 5.2vw, 73px);
    padding-right: 13%;
    border-right: 1px solid #f6d786;
    color: var(--purchase-gold);
}

.cartao-purchase-ticket svg {
    width: min(100%, 82px);
    overflow: visible;
    transform: rotate(-24deg);
    filter: drop-shadow(0 2px 5px #0009);
}

.cartao-purchase-ticket-stack svg:first-child { transform: translate(-7%, -10%) rotate(-24deg); }
.cartao-purchase-ticket-stack svg + svg {
    position: absolute;
    width: min(85%, 82px);
    transform: translate(4%, 12%) rotate(-24deg);
}

.cartao-purchase-copy { display: grid; min-width: 0; gap: clamp(3px, .6vw, 9px); }
.cartao-purchase-copy strong {
    font: 800 clamp(1.13rem, 2.9vw, 2.6rem)/1.07 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.cartao-purchase-arrow {
    display: grid;
    width: clamp(33px, 4.8vw, 64px);
    aspect-ratio: 1.12;
    place-items: center;
    border-radius: 25%;
    background: linear-gradient(#ffe48b, #ffbf32);
    color: var(--purchase-navy);
    box-shadow: 0 3px 8px #0008, inset 0 1px 0 #fff2ad;
}

.cartao-purchase-decoration {
    position: absolute;
    width: 32%;
    height: clamp(86px, 13vw, 192px);
    pointer-events: none;
    background:
        radial-gradient(circle at 19% 37%, #fff6cb 0 1%, #ffce4d 1.4%, transparent 4%),
        radial-gradient(circle at 91% 43%, #ffe8a1 0 1%, #ffbd39 1.4%, transparent 4%),
        radial-gradient(circle at 12% 69%, #fff0a1 0 .5%, #ffb52a .9%, transparent 2%),
        radial-gradient(ellipse at 52% 94%, #ffba363d, transparent 65%);
}

.cartao-purchase-quick > .cartao-purchase-decoration { z-index: -1; right: 1%; bottom: 46%; }
.cartao-purchase-decoration img {
    position: absolute;
    bottom: -13%;
    right: 5%;
    width: min(74%, 260px);
    height: auto;
    filter: drop-shadow(0 0 8px #ffad335e);
}
.cartao-purchase-quick .cartao-purchase-gift { width: min(68%, 205px); }
.cartao-purchase-decoration .cartao-purchase-gift-small {
    right: 58%;
    bottom: -4%;
    width: 31%;
    filter: sepia(1) saturate(1.55) brightness(1.45) drop-shadow(0 1px 5px #451e08);
}
.cartao-purchase-pine {
    position: absolute;
    bottom: -4%;
    left: 9%;
    width: 23%;
    transform: rotate(-55deg);
    mask-image: radial-gradient(ellipse, #000 32%, transparent 71%);
}
.cartao-purchase-pine-right {
    right: 0;
    left: auto;
    transform: scaleX(-1) rotate(-55deg);
}

.natal-campaign .cartao-purchase-offer {
    isolation: isolate;
    grid-template-columns: minmax(48px, 16%) minmax(0, 1fr);
    gap: clamp(9px, 2.5vw, 36px);
    min-height: clamp(84px, 10.5vw, 147px);
    overflow: hidden;
    padding: clamp(9px, 1.5vw, 22px) clamp(48px, 25%, 345px) clamp(9px, 1.5vw, 22px) clamp(11px, 3vw, 48px);
    border-radius: clamp(18px, 2.9vw, 39px);
    background:
        radial-gradient(ellipse at 11% 105%, #fff8c1, transparent 30%),
        radial-gradient(ellipse at 43% 12%, #fff1a9, transparent 57%),
        linear-gradient(110deg, #cc810e, #ffcb56 41%, #e9a72c 75%, #68401a);
    color: #03162c;
    box-shadow: 0 0 13px #ffb42c63, inset 0 0 14px #fff6bd7a;
}

.cartao-purchase-offer::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: conic-gradient(from -85deg at 10% 80%, transparent 0 9deg, #fff6ba75 12deg, transparent 16deg 34deg, #fff6ba65 39deg, transparent 42deg);
    mask-image: linear-gradient(90deg, #000, transparent 30%);
    content: "";
}

.cartao-purchase-offer .cartao-purchase-ticket {
    border-color: #03162c;
    color: #fff1a0;
}
.cartao-purchase-offer .cartao-purchase-ticket svg { filter: drop-shadow(0 0 5px #fff7c0); }
.cartao-purchase-offer .cartao-purchase-copy > span { color: #03162c; }
.cartao-purchase-offer .cartao-purchase-decoration { z-index: -1; right: 0; bottom: 0; }
.cartao-purchase-offer .cartao-purchase-decoration img { bottom: -38%; right: -5%; }

.natal-campaign :is(.cartao-purchase-choice, .cartao-purchase-offer):focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}
.natal-campaign .cartao-purchase-choice:hover { color: #fff; border-color: #fff3bd; }
.natal-campaign .cartao-purchase-offer:hover { color: #03162c; border-color: #fff8d5; }

@media (max-width: 640px) {
    .cartao-purchase-choices { grid-template-columns: minmax(0, 1fr); }
    .cartao-purchase-quick .cartao-purchase-heading { margin-right: 0; }
    .cartao-purchase-quick > .cartao-purchase-decoration { display: none; }
    .cartao-purchase-offer .cartao-purchase-decoration { opacity: .78; }
    .natal-campaign .cartao-purchase-offer { padding-right: 20%; }
}

@media (max-width: 360px) {
    .cartao-purchase-offer .cartao-purchase-decoration { display: none; }
    .natal-campaign .cartao-purchase-offer { padding-right: 10px; }
}