/* Reset básico */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Contenedor externo */
.category-carousel-container {
    position: relative;
    width: 65%; /* ocupa solo 75% */
    margin: 0 auto; /* centrado */
}

    /* Carrusel de categorías */
.category-carousel {
    width: 100%; /* ocupa el contenedor, no full screen */
    padding: 1rem 2rem;
}   


/* Slides */
.category-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Contenido clickeable */
.category-carousel .swiper-slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #0d6efd;

    /* Que se adapten al ancho según el número de slides */
    width: auto;
}

/* Imagen / icono */
.category-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Texto */
.category-item .label {
    font-size: 0.9rem;
    line-height: 1.2;
    margin-top: 5px;
    display: block;
    text-align: center;
}

 /* Flechas */
.category-carousel-container .swiper-button-prev,
.category-carousel-container .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    background: rgb(0, 98, 255);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
}

.category-carousel-container .swiper-button-prev { left: -20px; }
.category-carousel-container .swiper-button-next { right: -20px; }