/* ============================================================
   promos-carousel.css
   Carrusel premium de promos en mobile
   ============================================================ */

@media (max-width: 767px) {

    /* ── Wrapper ──────────────────────────────────────────── */
    .promos-carousel-wrap {
        position: relative;
        margin: 0 -1rem;
    }

    /* ── Header del carrusel con flechas integradas ───────── */
    .promos-carr-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem .75rem;
    }

    /* Contador "1 / 3" */
    .promos-carr-counter {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .1em;
        color: rgba(212, 175, 55, .6);
        text-transform: uppercase;
    }

    /* Grupo de flechas juntas */
    .promos-carr-arrows {
        display: flex;
        gap: .4rem;
    }

    .promos-carr-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(212, 175, 55, .25);
        color: #D4AF37;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s, border-color .2s, transform .15s;
        flex-shrink: 0;
    }

    .promos-carr-btn:active {
        transform: scale(.88);
        background: rgba(212, 175, 55, .12);
        border-color: rgba(212, 175, 55, .6);
    }

    .promos-carr-btn[style*="opacity: 0.3"],
    .promos-carr-btn[style*="opacity:0.3"] {
        border-color: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .25);
    }

    .promos-carr-btn .material-symbols-outlined {
        font-size: 1.15rem;
        line-height: 1;
    }

    /* ── Grid scroll ──────────────────────────────────────── */
    .promos-grid:not(.promos-grid--past) {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .promos-grid:not(.promos-grid--past)::-webkit-scrollbar {
        display: none !important;
    }

    /* ── Dots debajo ──────────────────────────────────────── */
    .promos-carr-dots {
        display: flex;
        justify-content: center;
        gap: .4rem;
        padding: .85rem 0 .25rem;
    }

    .promos-carr-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .15);
        cursor: pointer;
        transition: all .3s ease;
        display: inline-block;
    }

    .promos-carr-dot.active {
        background: #D4AF37;
        width: 18px;
        border-radius: 3px;
    }

    /* Quitar flecha decorativa del CSS anterior */
    .promos-grid:not(.promos-grid--past)::after {
        display: none !important;
    }
}