/* Slider-Banner Promos y más */
.slider-banner {
        width: min(95%, 900px);
        height: 200px;
        margin: auto;
        position: relative;
        overflow: hidden;
        filter: drop-shadow(0 0 3px black);
        background: #000;
        top: 4rem !important;
        cursor: pointer;
        z-index: 10;
    }

    /* Carril dinámico */
    .slides {
        display: flex;
        height: 100%;
        transition: transform .5s ease;

      
    }

    /* Cada slide ocupa 100% */
    .items-slides {
        flex: 0 0 100%;
        height: 100%;


    

        p {
            position: absolute;
            top: auto;
            bottom: 0;
            color: white;
            font-size: 1.1rem;
            background: rgba(0, 0, 0, .5);
            padding: 5px;
            text-align: center;
            width: 100%;
            z-index: 5;
            text-shadow: 0 0 10px black;
            font-weight: 600;
            display: none;

        }

        
    }


    @media (width < 768px) {

        .slider-banner {
            width: min(100%, 768px);
            border-radius: 0;

        }

        .items-slides p {

            display: block;
        }


    }

    /* Picture debe ocupar el 100% */
    .items-slides picture {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Imagenes */
    .items-slides picture img,
    .items-slides picture source {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Botones */
    .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: white;
        text-shadow: 2px 2px 2px black;
        padding: 10px 5px;
        cursor: pointer;
        font-size: 3rem;
        z-index: 10;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }