/* UI-018 · Flechas del banner principal (inc/banner-portada.php). El contenedor del banner empieza 20 px fuera
 * de la pantalla por cada lado: «left: 44px» deja la caja de la flecha a 24 px del borde visible. */

body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button {
	width: 44px;
	height: 56px;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 34px;
	opacity: 0.9;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
	transition: opacity 0.2s ease, transform 0.2s ease;
}
body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button:hover {
	opacity: 1;
}
body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button svg {
	width: 22px;
	height: 34px;
	fill: #fff !important;
}
body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button-prev {
	left: 44px !important;
}
body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button-next {
	right: 44px !important;
}
body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button-prev:hover {
	transform: translateY(-50%) translateX(-2px);
}
body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button-next:hover {
	transform: translateY(-50%) translateX(2px);
}

@media (max-width: 767px) {
	/* La caja empieza a 4 px del borde visible; la flecha, centrada en ella, a unos 12 px. */
	body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button {
		width: 32px;
		height: 44px;
	}
	body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button svg {
		width: 15px;
		height: 24px;
	}
	body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button-prev {
		left: 24px !important;
	}
	body .elementor-element.elementor-element-cb8f233 .elementor-swiper-button-next {
		right: 24px !important;
	}
}