.promosPage {
    --promo-ink: #171717;
    --promo-muted: #64707d;
    --promo-line: #e5e9ef;
    --promo-panel: #ffffff;
    --promo-cream: #fff7e7;
    --promo-orange: #ff7a1a;
    --promo-pink: #e4486f;
    --promo-mint: #0f9f8e;
    --promo-blue: #102f44;

    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 42%, #ffffff 100%);
}

.promoHero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .7fr);
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    min-height: min(76svh, 42rem);
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 4rem);
    border-bottom: 1px solid var(--promo-line);
    background:
        linear-gradient(115deg, rgba(23, 23, 23, .9), rgba(23, 23, 23, .68)),
        url("/images/resources/backgroundCookie.webp") center / cover no-repeat;
    color: #ffffff;
}

.promoHeroText {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
}

.promoEyebrow,
.promoTag {
    width: fit-content;
    margin: 0 0 .8rem;
    padding: .35rem .75rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
}

.promoHero h1 {
    margin: 0;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 950;
    line-height: .9;
    letter-spacing: 0;
}

.promoHeroText > p:not(.promoEyebrow) {
    width: min(100%, 34rem);
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    line-height: 1.45;
}

.promoHeroBtn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 3rem;
    margin-top: 1.35rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--promo-ink);
    font-weight: 900;
}

.promoHeroBtn:hover i {
    transform: translateY(2px);
}

.promoHeroMedia {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.promoHeroMedia img {
    width: min(100%, 24rem);
    filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, .42));
}

.promosPage .gridPromos {
    width: 100%;
    padding: clamp(1rem, 5vw, 4rem);
    background: transparent;
}

.promosPage .promosCont {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(.85rem, 2vw, 1.25rem);
    width: min(100%, 1180px);
    margin: 0 auto;
}

.promosPage .itemBox {
    position: relative;
    display: flex;
    min-height: 24rem;
    overflow: hidden;
    border: 1px solid var(--promo-line);
    border-radius: .75rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .12);
}

.promosPage .box001 {
    grid-column: span 3;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(23, 23, 23, .12), rgba(23, 23, 23, .72)),
        url("/images/resources/backgroundCookie.webp") center / cover no-repeat;
    color: #ffffff;
}

.promosPage .box002 {
    grid-column: span 3;
    flex-direction: column;
    background: linear-gradient(135deg, #fff7e7, #ffffff 58%, #ffe8f0);
}

.promosPage .box003 {
    grid-column: span 6;
    display: grid;
    grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.05fr) minmax(10rem, .75fr);
    grid-template-areas:
        "tag title deal"
        "sub title deal";
    align-items: center;
    justify-content: stretch;
    gap: clamp(.75rem, 2.5vw, 1.75rem);
    min-height: 28rem;
    background: linear-gradient(135deg, #171717, #2d2530);
    color: #ffffff;
}

.promosPage .box001 .promoTag,
.promosPage .box003 .promoTag {
    border-color: rgba(255, 255, 255, .24);
}

.promosPage .box002 .promoTag {
    border-color: rgba(228, 72, 111, .18);
    background: #ffffff;
    color: var(--promo-pink);
}

.promosPage .itemText001,
.promosPage .itemText009 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    font-weight: 950;
    line-height: .9;
    letter-spacing: 0;
}

.promosPage .itemText001 {
    text-shadow: 0 .25rem 1rem rgba(0, 0, 0, .35);
}

.promosPage .itemText002,
.promosPage .itemText005,
.promosPage .itemText010 {
    max-width: 32rem;
    margin: .9rem 0 0;
    font-size: clamp(.95rem, 1.7vw, 1.08rem);
    font-weight: 650;
    line-height: 1.45;
}

.promosPage .itemText002,
.promosPage .itemText010 {
    color: rgba(255, 255, 255, .86);
}

.promosPage .priceCont {
    display: inline-flex;
    align-items: flex-start;
    gap: .2rem;
    width: fit-content;
    margin-top: auto;
    padding: .55rem 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .94);
    color: var(--promo-ink);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .22);
}

.promosPage .priceCont p {
    margin: 0;
    font-size: clamp(3.6rem, 9vw, 6.5rem);
    font-weight: 950;
    line-height: .8;
}

.promosPage .priceCont span {
    color: var(--promo-orange);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 900;
}

.promosPage .itemBox a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    min-height: 2.75rem;
    margin-top: 1rem;
    padding: .65rem .9rem;
    border-radius: 999px;
    background: var(--promo-ink);
    color: #ffffff;
    font-size: .95rem;
    font-weight: 900;
}

.promosPage .box001 a {
    background: #ffffff;
    color: var(--promo-ink);
}

.promosPage .itemBox a:hover i {
    transform: translateX(3px);
}

.promosPage .itemText003 {
    margin: 0;
    color: var(--promo-muted);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    font-weight: 850;
}

.promosPage .itemText004,
.promosPage .itemText004 span,
.promosPage .itemText004 strong {
    letter-spacing: 0;
}

.promosPage .itemText004 {
    display: flex;
    flex-direction: column;
    margin: .3rem 0 0;
    color: var(--promo-pink);
    font-size: clamp(3.2rem, 8vw, 6rem);
    font-weight: 950;
    line-height: .78;
}

.promosPage .itemText004 span {
    color: #884024;
    font-size: clamp(1.15rem, 3vw, 1.8rem);
    font-weight: 850;
}

.promosPage .itemText004 strong {
    color: #4d2719;
}

.promosPage .itemText005 {
    color: var(--promo-muted);
}

.promosPage .compactGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-top: auto;
}

.promosPage .compactGrid p {
    margin: 0;
    min-height: 5rem;
    padding: .75rem;
    border: 1px solid rgba(228, 72, 111, .16);
    border-radius: .6rem;
    background: #ffffff;
    color: #884024;
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.25;
}

.promosPage .box003 img {
    position: absolute;
    z-index: 1;
    width: clamp(7rem, 16vw, 13rem);
    opacity: .45;
    filter: saturate(1.2);
    pointer-events: none;
}

.promosPage .box003 img:nth-child(1) {
    grid-area: img1;
    top: -2rem;
    left: -1rem;
}

.promosPage .box003 img:nth-child(2) {
    grid-area: img2;
    top: -2rem;
    right: -1rem;
}

.promosPage .box003 img:nth-child(3) {
    grid-area: img3;
    bottom: -3rem;
    left: 6%;
}

.promosPage .box003 img:nth-child(4) {
    grid-area: img4;
    right: 7%;
    bottom: -3rem;
}

.promosPage .box003 .promoTag,
.promosPage .box003 .itemText009,
.promosPage .box003 .itemText010,
.promosPage .box003 .itemText011 {
    position: relative;
    z-index: 2;
}

.promosPage .box003 .promoTag {
    grid-area: tag;
    align-self: end;
    margin: 0;
}

.promosPage .box003 .itemText009 {
    grid-area: title;
    text-align: center;
}

.promosPage .box003 .itemText010 {
    grid-area: sub;
    align-self: start;
    margin: 0;
}

.promosPage .box003 .itemText011 {
    grid-area: deal;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    justify-self: end;
    margin: .8rem 0 0;
    color: #ffcf4a;
    font-size: clamp(6rem, 17vw, 13rem);
    font-weight: 950;
    line-height: .78;
    text-shadow: 0 .4rem 0 rgba(228, 72, 111, .72);
}

.promosPage .box003 .itemText011 span {
    color: #ffffff;
    font-size: .35em;
}

.fidelClient {
    width: 100%;
    padding: clamp(1rem, 5vw, 4rem);
}

.fidelClient .main {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(18rem, 28rem);
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid rgba(15, 159, 142, .22);
    border-radius: .8rem;
    background:
        linear-gradient(135deg, rgba(15, 159, 142, .14), rgba(255, 122, 26, .1)),
        #ffffff;
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .11);
}

.fidelCopy .promoTag {
    border-color: rgba(15, 159, 142, .22);
    background: #e9fbf7;
    color: #0b766a;
}

.fidelCopy h2 {
    margin: 0;
    color: var(--promo-ink);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 950;
    line-height: .95;
    letter-spacing: 0;
}

.fidelCopy p:not(.promoTag) {
    max-width: 36rem;
    margin: .9rem 0 0;
    color: var(--promo-muted);
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    font-weight: 650;
    line-height: 1.5;
}

.cardF {
    --angle: 45deg;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 17rem;
    padding: 1.1rem;
    border-radius: .9rem;
    background: linear-gradient(var(--angle), #102f44, #07090c 72%);
    color: #ffffff;
    box-shadow: 0 1.2rem 2.8rem rgba(16, 47, 68, .34);
}

.cardF::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(var(--angle), #00ffea, #ffcf4a, #ff6b4a);
}

.cardFHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cardFHeader h3 {
    margin: 0;
    color: #ffcf4a;
    font-size: 1.45rem;
    font-weight: 950;
}

.cardFHeader p {
    max-width: 9rem;
    margin: 0;
    color: #b9f7f0;
    font-size: .86rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: right;
}

.roundes {
    display: grid;
    gap: .55rem;
    margin-top: auto;
}

.circles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .55rem;
}

.circles span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: rgba(23, 23, 23, .38);
    font-size: clamp(1rem, 4vw, 1.55rem);
}

.cardFFoot {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: .82rem;
    font-weight: 750;
}

@media (max-width: 860px) {
    .promoHero,
    .fidelClient .main {
        grid-template-columns: 1fr;
    }

    .promoHero {
        min-height: auto;
    }

    .promoHeroMedia {
        justify-content: start;
    }

    .promosPage .box001,
    .promosPage .box002,
    .promosPage .box003 {
        grid-column: span 6;
    }

    .promosPage .box003 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "img1 img2 img3 img4"
            "tag tag tag tag"
            "title title title title"
            "sub sub sub sub"
            "deal deal deal deal";
        min-height: auto;
        gap: .75rem;
        padding: 1rem;
        text-align: center;
    }

    .promosPage .box003 img {
        position: relative;
        inset: auto;
        width: min(100%, 7rem);
        opacity: .92;
        filter: saturate(1.08) drop-shadow(0 .75rem 1.1rem rgba(0, 0, 0, .28));
        justify-self: center;
    }

    .promosPage .box003 .promoTag {
        align-self: auto;
        justify-self: center;
        margin: .35rem 0 0;
    }

    .promosPage .box003 .itemText009,
    .promosPage .box003 .itemText010 {
        max-width: none;
        justify-self: center;
        text-align: center;
    }

    .promosPage .box003 .itemText010 {
        margin: 0;
    }

    .promosPage .box003 .itemText011 {
        justify-self: center;
        margin: .3rem 0 0;
        font-size: clamp(5.4rem, 22vw, 8.8rem);
    }
}

@media (max-width: 560px) {
    .promosPage .gridPromos,
    .fidelClient {
        padding: 1rem;
    }

    .promosPage .itemBox {
        min-height: 20rem;
        border-radius: .65rem;
    }

    .promosPage .compactGrid {
        grid-template-columns: 1fr;
    }

    .promosPage .box003 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "img1 img2"
            "img3 img4"
            "tag tag"
            "title title"
            "sub sub"
            "deal deal";
        gap: .55rem;
    }

    .promosPage .box003 img {
        width: min(100%, 6.25rem);
    }

    .fidelClient .main {
        padding: 1rem;
    }

    .cardFHeader {
        flex-direction: column;
    }

    .cardFHeader p {
        max-width: none;
        text-align: left;
    }
}