.rp-carousel-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rp-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(290px, 88%);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
    /* En móvil mantenemos la barra por defecto si estaba así */
}

.rp-carousel-item {
	scroll-snap-align: start;
}

/* BOTÓN MÓVIL: Restaurado al original (Negro y pequeño) */
.rp-carousel-nav {
	display: none;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: #111;
	color: #fff;
	cursor: pointer;
}

/* CAMBIOS SOLO PARA TABLET Y ESCRITORIO */
@media (min-width: 700px) {
    .rp-carousel {
        grid-auto-columns: calc(50% - 12px);
        /* Ocultamos la barra solo en pantallas grandes */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }

    .rp-carousel::-webkit-scrollbar {
        display: none; 
    }

    .rp-carousel-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Estilo Blanco y con Sombra solicitado */
        width: 46px; 
        height: 46px;
        background: #ffffff;
        color: #111;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Agrandar flechas lineales */
    .rp-carousel-nav svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.5;
    }
}

@media (min-width: 1080px) {
    .rp-carousel {
        grid-auto-columns: calc(33.33% - 12px);
    }
}