/* Container do slider */
#slider-container {
    position: relative;
    width: 1003px;        /* ajuste conforme o layout */
    height: 288px;        /* pode aumentar se quiser slides maiores */
    overflow: hidden;
    margin: auto;
    background: #000;
}

/* Slides */
#slides a.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease;
}
#slides a.slide.active {
    opacity: 1;
}
#slides a.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Miniaturas bolinhas */
#thumbnails {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
#slider-container:hover #thumbnails {
    opacity: 1;  /* aparecem ao passar o mouse */
}

#thumbnails .thumb-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}
#thumbnails .thumb-dot.active {
    background: #00ff00;
}

/* Botão de áudio */
#btnAudio {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

/* Efeitos de transição */
@keyframes fade { from { opacity:0;} to { opacity:1; } }
@keyframes slideLeft { from { opacity:0; transform:translateX(100%);} to { opacity:1; transform:translateX(0);} }
@keyframes slideRight { from { opacity:0; transform:translateX(-100%);} to { opacity:1; transform:translateX(0);} }
@keyframes slideTop { from { opacity:0; transform:translateY(100%);} to { opacity:1; transform:translateY(0);} }
@keyframes slideBottom { from { opacity:0; transform:translateY(-100%);} to { opacity:1; transform:translateY(0);} }

/* Novos efeitos */
@keyframes flipHorizontal { from { transform: rotateY(90deg); opacity:0; } to { transform: rotateY(0deg); opacity:1; } }
@keyframes flipVertical { from { transform: rotateX(90deg); opacity:0; } to { transform: rotateX(0deg); opacity:1; } }
@keyframes zoomIn { from { transform: scale(1.5); opacity:0; } to { transform: scale(1); opacity:1; } }
@keyframes zoomOut { from { transform: scale(0.5); opacity:0; } to { transform: scale(1); opacity:1; } }
@keyframes rotate { from { transform: rotate(-15deg); opacity:0; } to { transform: rotate(0deg); opacity:1; } }

/* Aplicar efeito ao slide ativo via JS */
#slides a.slide.active.fade { animation: fade 1.5s ease-in-out; }
#slides a.slide.active.slideLeft { animation: slideLeft 1.5s ease-in-out; }
#slides a.slide.active.slideRight { animation: slideRight 1.5s ease-in-out; }
#slides a.slide.active.slideTop { animation: slideTop 1.5s ease-in-out; }
#slides a.slide.active.slideBottom { animation: slideBottom 1.5s ease-in-out; }
#slides a.slide.active.flipHorizontal { animation: flipHorizontal 1.5s ease-in-out; }
#slides a.slide.active.flipVertical { animation: flipVertical 1.5s ease-in-out; }
#slides a.slide.active.zoomIn { animation: zoomIn 1.5s ease-in-out; }
#slides a.slide.active.zoomOut { animation: zoomOut 1.5s ease-in-out; }
#slides a.slide.active.rotate { animation: rotate 1.5s ease-in-out; }