/**
 * Slider de las secciones con la clase slider--tab-mobile y de los widgets
 * propios con .acc-slider (1024px o menos).
 *
 * El carril es el .elementor-container de la sección y cada columna una
 * diapositiva (en un widget, .acc-slider__track y sus .acc-slider__slide).
 * scroll-snap-stop: always obliga a pasar de una en una. El hueco entre
 * diapositivas es el gap del carril (clases gap-* en las secciones): el JS lo
 * copia en --acc-slider-gap para calcular el ancho de 2 columnas en tablet.
 */
.acc-slider-dots {
	display: none;
}

@media (max-width: 1024px) {
	.elementor-section.slider--tab-mobile > .elementor-container,
	.acc-slider > .acc-slider__track {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		> .elementor-column,
		> .acc-slider__slide {
			flex: 0 0 calc((100% - var(--acc-slider-gap, 0px)) / 2);
			scroll-snap-align: start;
			scroll-snap-stop: always;
		}
	}

	.slider--tab-mobile > .acc-slider-dots,
	.acc-slider > .acc-slider-dots {
		display: flex;
		justify-content: center;
		gap: 28px;
		margin-top: 24px;

		&[hidden] {
			display: none;
		}
	}

	.acc-slider-dots .acc-slider-dots__dot {
		width: 16px;
		height: 16px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #f4f4f4;
		cursor: pointer;

		&[aria-current="true"] {
			background: #c9920e;
		}

		&:focus-visible {
			outline: 2px solid #c9920e;
			outline-offset: 2px;
		}
	}
}

/* Misma anidación que en tablet para tener la misma especificidad y ganarle. */
@media (max-width: 767px) {
	.elementor-section.slider--tab-mobile > .elementor-container,
	.acc-slider > .acc-slider__track {
		> .elementor-column,
		> .acc-slider__slide {
			flex-basis: 100%;
		}
	}
}