/* Carrossel para tablet, notebook e desktop.
   Celular permanece exatamente como está. */
@media (min-width: 701px) {
    .banner {
        padding: 14px 0 !important;
        background:
            radial-gradient(circle at 18% 28%, rgba(255,215,128,.16) 0 2px, transparent 3px),
            radial-gradient(circle at 82% 62%, rgba(255,255,255,.14) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 70% 18%, rgba(214,154,255,.16) 0 2px, transparent 3px),
            linear-gradient(135deg, #12091d 0%, #2a1040 34%, #4d1f6b 56%, #261036 78%, #100917 100%) !important;
        background-size: 180px 180px, 140px 140px, 220px 220px, auto !important;
        box-shadow: inset 0 8px 22px rgba(0,0,0,.20), inset 0 -8px 22px rgba(0,0,0,.18) !important;
    }

    .banner .carrossel {
        width: min(96%, 1280px) !important;
        max-width: 1280px !important;
        height: clamp(260px, 26vw, 360px) !important;
        margin: 0 auto !important;
        background: transparent !important;
        overflow: hidden !important;
        border-radius: 4px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
    }

    .banner .slide {
        width: auto !important;
        max-width: none !important;
        height: 100% !important;
        max-height: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: transparent !important;
        margin: 0 auto !important;
    }

    .banner .slide.ativo {
        position: relative !important;
        inset: auto !important;
        display: block !important;
    }

    .banner .slide:not(.ativo) {
        position: absolute !important;
        inset: 0 !important;
        margin: auto !important;
    }

    .banner .seta {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        background: rgba(25, 10, 36, .55) !important;
        backdrop-filter: blur(4px) !important;
    }

    .banner .indicadores {
        bottom: 8px !important;
    }
}