/* Forzar que el contenedor de la imagen ignore paddings del padre si los hay */
.block-category .category-cover {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
    display: flex; /* Ayuda a centrar la imagen internamente */
}

/* Forzar a la imagen a cubrir TODO el espacio */
.block-category .category-cover img.img-fluid {
    width: 100% !important;
    max-width: none !important;
    object-fit: cover !important; /* Esta es la propiedad mágica */
    object-position: center;
    display: block;
}
/* Asegurar que el slider ignore cualquier margen del contenedor padre */
#carousel .carousel-item img {
    width: 100% !important;
    height: auto !important;
    /* height: 350px !important; /* Ajusta a la altura que quieras */
    aspect-ratio: 2315 / 710;
    object-fit: contain !important;
    display: block;
    /* --- NUEVO: Redondeo de esquinas --- */
    border-radius: 20px; /* Ajusta este valor (ej. 10px, 15px, 30px) según tu gusto */
    
}
/* Flecha izquierda */
#carousel .direction .left {
    left: 10px !important; /* Ajusta este valor para acercar/alejar la flecha */
    pointer-events: auto;
}

/* Flecha derecha */
#carousel .direction .right {
    right: 10px !important; /* Ajusta este valor para acercar/alejar la flecha */
    pointer-events: auto;
}

/* Ocultar cualquier fondo oscuro que traiga el tema por defecto */
.carousel, .carousel-inner {
    background: none !important;
}

.carousel {
    background-color: transparent !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    position: relative;
}

/* Ajuste para pantallas pequeñas (Movile) */
@media (max-width: 767px) {
    #carrusel .carousel-item img {
	width: 95% !important;
	border-radius: 10%;
    }
}
/* Ajuste para que los textos no queden pegados al borde de la pantalla */
.carousel-item .caption {
    padding: 0 10%;
}