/* Carrusel home — Smile Dental Lab */

#carouselExampleCaptions {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
}

#carouselExampleCaptions .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
}

/* Mostrar solo el slide activo, sin posicionamiento absoluto */
#carouselExampleCaptions .carousel-item {
    display: none !important;
    position: relative !important;
    float: none !important;
    margin-right: 0 !important;
    transform: none !important;
    transition: none !important;
}
#carouselExampleCaptions .carousel-item.active {
    display: block !important;
}

/* La imagen ocupa todo el ancho a su proporción natural */
#carouselExampleCaptions .carousel-item > img,
#carouselExampleCaptions .carousel-item > a > img {
    width: 100%;
    height: auto;
    display: block;
}
#carouselExampleCaptions .carousel-item > a {
    display: block;
    width: 100%;
    text-decoration: none;
}

#carouselExampleCaptions .carousel-control-prev,
#carouselExampleCaptions .carousel-control-next {
    width: 5%;
    opacity: 0.8;
    z-index: 20;
}

#carouselExampleCaptions .carousel-indicators li {
    background-color: rgba(255,255,255,.5);
    border: 1.5px solid rgba(255,255,255,.8);
    border-radius: 999px;
    width: 8px; height: 8px;
}
#carouselExampleCaptions .carousel-indicators .active {
    background-color: #dc2626;
    border-color: #dc2626;
}

#carouselExampleCaptions .carousel-caption {
    background: linear-gradient(135deg,rgba(0,0,0,.75),rgba(0,0,0,.50));
    padding: 16px 20px; border-radius: 10px;
    bottom: 24px; z-index: 15;
    border-left: 3px solid #dc2626;
}
#carouselExampleCaptions .carousel-caption h5 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
#carouselExampleCaptions .carousel-caption p  { font-size: 15px; margin-bottom: 0; }

@media (max-width: 768px) {
    #carouselExampleCaptions .carousel-caption { display: none; }
    #carouselExampleCaptions .carousel-control-prev,
    #carouselExampleCaptions .carousel-control-next { width: 10%; }
    #carouselExampleCaptions .carousel-indicators { bottom: 4px; }
    #carouselExampleCaptions .carousel-indicators li { width: 6px; height: 6px; }
}