/**
 * Ajustes específicos para mejorar la visualización en móvil del carrusel de categorías
 * Estos estilos se aplican solo a la sección de categorías usando el ID para evitar
 * afectar otros carruseles
 */

/* Ajustes para pantallas pequeñas */
@media (max-width: 767px) {
    /* Mejorar el espaciado horizontal en móviles */
    #categorias .categorias-swiper {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Ajuste para el carrusel de categorías específicamente */
    #categorias .swiper-slide {
        padding: 3px;
    }
    
    /* Reducir el tamaño de las imágenes en móviles */
    #categorias .categoria-img-container {
        height: 120px;
    }
    
    /* Reducir el texto en categorías para móviles */
    #categorias .categoria-card span {
        font-size: 0.9rem;
        padding: 8px 5px;
    }
}

/* Ajustes específicos para móviles muy pequeños */
@media (max-width: 375px) {
    #categorias .categoria-img-container {
        height: 100px;
    }
    
    /* Ajuste para mejorar visualización en móviles pequeños */
    #categorias .categoria-card {
        margin-bottom: 0;
    }
    
    /* Hacer que el texto de categoría sea más pequeño */
    #categorias .categoria-card span {
        font-size: 0.8rem;
        padding: 6px 3px;
    }
}