/*
 * i-animese Setup — estilos de frontend propios del plugin (v1.2).
 * Carrusel de fotos del hero de Inicio (widget "Carrusel de imágenes" de
 * Elementor con la clase CSS "ianimese-hero-carousel").
 */

.ianimese-hero-carousel {
	width: 100%;
}

.ianimese-hero-carousel .swiper,
.ianimese-hero-carousel .elementor-image-carousel-wrapper {
	border-radius: 28px;
	overflow: hidden;
}

/* Todas las fotos a la misma altura, recortadas (no "salta" el hero al pasar). */
.ianimese-hero-carousel .swiper-slide-image {
	display: block;
	width: 100%;
	height: 540px;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 1024px) {
	.ianimese-hero-carousel .swiper-slide-image {
		height: 405px;
	}
}

@media (max-width: 767px) {
	.ianimese-hero-carousel .swiper-slide-image {
		height: 300px;
	}
}

/* Flechas en círculo para que se vean sobre cualquier foto. */
.ianimese-hero-carousel .elementor-swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(13, 43, 69, 0.55);
	transition: background-color 0.2s ease;
}

.ianimese-hero-carousel .elementor-swiper-button:hover,
.ianimese-hero-carousel .elementor-swiper-button:focus-visible {
	background: rgba(13, 43, 69, 0.85);
}

.ianimese-hero-carousel .elementor-swiper-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.ianimese-hero-carousel .elementor-swiper-button svg {
	width: 20px;
	height: 20px;
	fill: #ffffff;
}

.ianimese-hero-carousel .elementor-swiper-button-prev {
	left: 14px;
}

.ianimese-hero-carousel .elementor-swiper-button-next {
	right: 14px;
}

/* Puntos dentro de la foto, abajo. */
.ianimese-hero-carousel .swiper-pagination {
	bottom: 14px !important;
}

@media (prefers-reduced-motion: reduce) {
	.ianimese-hero-carousel .swiper-wrapper {
		transition-duration: 0ms !important;
	}
}