Por qué Mercar?

<style>
    /* estilos box generales */

    .new-container__main-product__pdp-features {
        border-radius: 6px;
    }

    .new-container__main-product__pdp-features__pdp_price .product__details-section__price {
        border-radius: 6px;
    }

    a.crono-box-preheader {
        position: relative;
        /* background-image: url('https://media.aws.alkomprar.com/ymarketingcolcomercio/Alkosto/2025/eventos/abrilofertasmil/pdp/preheader-expect-bg.webp');
        background-position: top center; */
        background-color: var(--primary-color1);
        width: 100%;
        height: 40px;
        border-radius: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    a.crono-box-preheader:hover,
    a.crono-box-preheader:focus {
        text-decoration: none;
    }

    a.crono-box-preheader .txt-crono {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }

    p.crono-p {
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        margin: 0;
        text-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
    }

    p.crono-p.mbl {
        display: none;
    }

    a.crono-box-preheader #timer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2px;
        background-color: white;
        height: 28px;
        border-radius: 4px;
        box-shadow: 0px 1.639px 1.639px 0px rgba(0, 0, 0, 0.20);
    }

    a.crono-box-preheader #timer span.dots-car {
        font-size: 22px;
        line-height: normal;
        font-weight: bold;
        color: var(--primary-color2);
        position: relative;
        top: -2px;
        font-family: arial ui-rounded;
    }

    a.crono-box-preheader #timer .hours,
    a.crono-box-preheader #timer .minutes,
    a.crono-box-preheader #timer .seconds {
        width: 28px;
        height: 20px;
        border-radius: 4px;
        color: var(--primary-color1);
        font-size: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        line-height: 1;
    }

    a.crono-box-preheader #timer .hours .downt,
    a.crono-box-preheader #timer .minutes .downt,
    a.crono-box-preheader #timer .seconds .downt {
        font-size: 8px;
        margin: 0;
        font-weight: bold;
        line-height: normal;
        color: var(--primary-color2);
        position: relative;
        top: 0;
    }

    p.eventpill {
        border-radius: 100px;
        border: 1px solid #004797;
        background: linear-gradient(180deg, #27316A 0%, #064590 100%);
        color: #FFF;
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
        margin: 0;
        padding: 2px 6px;
        box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 16%);
    }

    /*  responsive */

    @media only screen and (max-width: 580px) {
        p.crono-p.desk {
            display: none;
        }

        p.crono-p.mbl {
            display: flex;
        }

        a.crono-box-preheader {
            background-position: 60%;
        }

        p.eventpill {
            display: none;
        }
    }
</style>

<!-- crono -->
<a href="/ofertas" class="crono-box-preheader">
    <p class="crono-p desk"><strong>Últimos días de </strong></p>
    <p class="crono-p mbl"><strong>Últimos días, quedan</strong></p>
    <p class="eventpill">ABRIL OFERTAS MIL 😍</p>
    <p class="crono-p desk"><strong>Quedan</strong></p>
    <div id="timer">
        <div class="hours">
            <div class="numbers">
                <span id="hours-preheader"> </span>
            </div>
            <span class="downt">HRS</span>
        </div>
        <span class="dots-car">:</span>
        <div class="minutes">
            <div class="numbers">
                <span id="minutes-preheader"> </span>
            </div>
            <span class="downt">MIN</span>
        </div>
        <span class="dots-car">:</span>
        <div class="seconds">
            <div class="numbers">
                <span id="seconds-preheader"> </span>
            </div>
            <span class="downt">SEG</span>
        </div>
    </div>

</a>

<!-- counter -->
<script>
    const secondPreheader = 1000,
        minutePreheader = secondPreheader * 60,
        hourPreheader = minutePreheader * 60,
        dayPreheader = hourPreheader * 24;

    let countDownPreheader = new Date('may 02, 2025 23:59:59').getTime(),
        xPreheader = setInterval(function () {

            let nowPreheader = new Date().getTime(),
                distancePreheader = countDownPreheader - nowPreheader;

            document.getElementById('hours-preheader').innerText = Math.floor(distancePreheader / (hourPreheader)),
                document.getElementById('minutes-preheader').innerText = Math.floor((distancePreheader % (hourPreheader)) / (minutePreheader)),
                document.getElementById('seconds-preheader').innerText = Math.floor((distancePreheader % (minutePreheader)) / secondPreheader);

        }, secondPreheader)
</script>