* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.carousel-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    width: 90%; /* Ajusta según necesidad */
    height: 300px; /* Ajusta según necesidad */
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Ajustar según el número de imágenes */
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
}

/* Estilos de los botones */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Ajuste para centrar verticalmente */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;  /* Aumentado para mejor accesibilidad */
    cursor: pointer;
    font-size: 24px; /* Tamaño de fuente más grande */
    z-index: 10;
}

/* Botón de la izquierda */
.prev { 
    left: 10px; 
}

/* Botón de la derecha */
.next { 
    right: 10px; 
}

/* Efecto hover para los botones */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Estilos responsivos para pantallas pequeñas */
@media only screen and (max-width: 768px) {
    .carousel-container {
        height: 250px;  /* Reduce la altura en dispositivos móviles */
    }

    .prev, .next {
        padding: 1px;  /* Reducir el tamaño de los botones */
        font-size: 14px;  /* Ajustar tamaño de texto */
        width: 5%;
    }
}