.simple-carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 45px;
}
.simple-carousel-wrapper {
    display: flex;
    gap: 20px;
}
.simple-carousel-slide {
    flex: 0 0 calc(33.333% - 13.333px); /* 3 visibles SIEMPRE */
    max-width: calc(33.333% - 13.333px);
    min-width: 0;
}

/* -------- CONTROLES -------- */
.simple-carousel-prev, .simple-carousel-next {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    background: rgba(54,39,102,0.7); color: white;
    border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.3s ease;
    z-index: 2;
}
.simple-carousel-prev:hover, .simple-carousel-next:hover {
    background: rgba(54,39,102,0.95);
}
.simple-carousel-prev { left: 5px; }
.simple-carousel-next { right: 5px; }

/* -------- INDICADORES -------- */
.simple-carousel-indicators {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    bottom: 5px;
    background: rgb(161 13 135 / 70%);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.simple-carousel-indicator {
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; opacity: 0.6; cursor: pointer;
}
.simple-carousel-indicator.active {
    opacity: 1; background: #362766; transform: scale(1.3);
}

/* -------- PLAY VIDEO -------- */
.simple-carousel-slide .video-play-btn {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: rgba(0,0,0,0.6);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5;
}
.simple-carousel-slide .video-play-btn:before {
    content: '';
    display: block;
    border-style: solid;
    border-width: 14px 0 14px 26px;
    border-color: transparent transparent transparent #fff;
    margin-left: 10px;
}

/* -------- MODAL (opcional) -------- */
.carousel-modal[hidden] { display: none; }
.carousel-modal-inner {
    position: relative;
    background: #111; border-radius: 12px;
    padding: 0; max-width: 90vw; max-height: 90vh;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    display: flex; flex-direction: column;
}

@media (max-width: 900px) {
    .simple-carousel-slide {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    .simple-carousel-indicators {
        bottom: 10px;
        background: rgb(161 13 135 / 70%);
    }
    .simple-carousel-wrapper {
        gap: 12px;
    }
    .simple-carousel {
        padding-bottom: 32px; /* Espacio para los indicadores en tablet/mobile */
    }
}
@media (max-width: 600px) {
    .simple-carousel-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .simple-carousel-indicators {
        bottom: 0px;
        background: rgb(161 13 135 / 90%);
        padding: 4px 8px;
    }
    .simple-carousel-wrapper {
        gap: 6px;
        padding-bottom: 24px; /* para que no tape los indicadores */
    }
    .simple-carousel {
        padding-bottom: 15px; /* Un poco más en mobile si quieres */
    }
}