@font-face { font-family: "ME Preventa Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Roboto-300.ttf") format("truetype"); }
@font-face { font-family: "ME Preventa Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-400.ttf") format("truetype"); }
@font-face { font-family: "ME Preventa Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Roboto-500.ttf") format("truetype"); }
/* Reference card: 270px wide. JS scales the whole badge from the card width. */
:is(.swiper-slide, .me-card) .me-preventa[hidden] { display: none !important; }
:is(.swiper-slide, .me-card).me-has-preventa { position: relative; isolation: isolate; }
:is(.swiper-slide, .me-card) .me-preventa {
    position: absolute;
    left: 3.7037037%;
    top: var(--me-preventa-top, 70px);
    width: 66px;
    height: 90px;
    box-sizing: border-box;
    padding: 0 0 2px;
    border: 2px solid #FFBC2B;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Opaque header above the separate multiplied background layer. */
    background: linear-gradient(to bottom, #FFBC2B 0 16px, transparent 16px 100%);
    color: #fff;
    font-family: "ME Preventa Roboto", sans-serif;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    transform: scale(min(1, var(--me-preventa-scale, 1)));
    transform-origin: top left;
}
:is(.swiper-slide, .me-card) .me-preventa-label { display: block; width: 100%; background: transparent; color: #000; font-size: 12px; font-weight: 400; line-height: 16px; margin-bottom: 3px; }
:is(.swiper-slide, .me-card) .me-preventa-small { font-size: 11px; font-weight: 300; line-height: 13px; }
:is(.swiper-slide, .me-card) .me-preventa-time { color: #FFBC2B; font-size: 38px; font-weight: 500; line-height: 38px; font-variant-numeric: tabular-nums; }

/* Blend directly with the card image, outside the badge stacking context.
   Text, orange header and border remain on the normal layer above it. */
:is(.swiper-slide, .me-card).me-has-preventa::after {
    content: "";
    position: absolute;
    left: 3.7037037%;
    top: var(--me-preventa-top, 70px);
    width: 66px;
    height: 90px;
    box-sizing: border-box;
    border: 2px solid transparent;
    background: linear-gradient(to bottom, #FFBC2B 0 16px, rgba(38,44, 49, 0.7) 16px 100%);
    background-clip: padding-box;
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
    transform: scale(min(1, var(--me-preventa-scale, 1)));
    transform-origin: top left;
}