/* Estilos para el contenedor y la imagen */


.swiper-container {
    width: 98%;
    margin: auto;
    position: relative;
    height: 650px; /* Ajusta la altura del contenedor */
    overflow: hidden; /* Evita que aparezcan las barras de desplazamiento */
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%; /* Asegura que la imagen ocupe toda la altura del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra completamente el contenedor, recortando si es necesario */
    border-radius: 20px;
}

/* Personalización de la paginación */
.swiper-pagination {
    bottom: 20px; /* Ajusta la distancia desde la parte inferior */
    transform: translateX(42%); /* Ajusta la ubicación usando un desplazamiento de la mitad */
    z-index: 1;
}

/* Personalización de los puntos */
.swiper-pagination-bullet {
    background-color: white; /* Color blanco para los puntos */
    width: 12px; /* Tamaño más grande */
    height: 12px;
    opacity: 1; /* Mantén los puntos visibles */
    margin: 0 5px; /* Espaciado entre puntos */
    transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: yellow !important; /* Color amarillo para el punto activo */
}

/* Responsividad para pantallas medianas */
@media (max-width: 768px) {
    .swiper-container {
        height: 300px; /* Reducir la altura */
    }

    .swiper-pagination {
        left: 15%; /* Ajuste hacia el centro en pantallas pequeñas */
        transform: translateX(38%); /* Ajuste dinámico del desplazamiento */
    }

    .swiper-pagination-bullet {
        width: 10px; /* Tamaño ligeramente más pequeño */
        height: 10px;
    }
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
    .swiper-container {
        height: 500px; /* Aumentar la altura aún más en pantallas pequeñas */
    }

    .swiper-pagination {
        display: none;
    }

    .swiper-pagination-bullet {
        display: none;
    }

    /* Ajuste para imágenes aún más altas que anchas en pantallas pequeñas */
    .swiper-slide img {
        width: 100%;
        height: 100%; /* Aumenta aún más la altura en pantallas más pequeñas */
    }
}

    /*
    .swiper-pagination {
        left: 20%; /* Ajuste aún más hacia el centro en pantallas muy pequeñas 
        transform: translateX(34%); Ajuste dinámico del desplazamiento 
    }

    .swiper-pagination-bullet {
        width: 8px; /* Tamaño más pequeño 
        height: 8px;
    }
    */