/* ============================================================
   03 - ESTABILIDAD RESPONSIVE
   Correcciones puntuales que no alteran la logica de Elementor,
   WooCommerce ni Tutor LMS.

   Para revertir: comentar el encolado en functions.php.
   ============================================================ */

/* P0: el track de Slick usa clones y transforms mas anchos que el
   viewport. Los contenemos solo en la portada y solo en mobile. */
@media (max-width: 767px) {
	body.home .etlms-carousel-main-wrap,
	body.home .etlms-carousel-loop-wrap,
	body.home .slick-slider,
	body.home .slick-list {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	body.home .etlms-carousel-main-wrap,
	body.home .etlms-carousel-loop-wrap,
	body.home .slick-list,
	html:has(body.home),
	body.home {
		overflow-x: clip;
	}
}

@supports not (overflow: clip) {
	@media (max-width: 767px) {
		body.home .etlms-carousel-main-wrap,
		body.home .etlms-carousel-loop-wrap,
		body.home .slick-list,
		html:has(body.home),
		body.home {
			overflow-x: hidden;
		}
	}
}

/* En tablet, Elementor ubica las flechas 40 px fuera del carrusel y
   ensancha el documento. Conservamos los controles, pero dentro del viewport. */
@media (min-width: 768px) and (max-width: 1199px) {
	body.home .etlms-carousel-arrow-prev.etlms-carousel-arrow-position-outside {
		margin-left: 0 !important;
	}

	body.home .etlms-carousel-arrow-next.etlms-carousel-arrow-position-outside {
		margin-right: 0 !important;
	}
}