/* Efecto Ken Burns en la hero section */

/* Para imágenes dentro del contenedor (elementos img) */
body.front-page .container-hero img,
body.home .container-hero img,
body.front-page #container-hero img,
body.home #container-hero img {
	animation: kenBurns 20s ease-in-out infinite;
	animation-direction: alternate;
	will-change: transform;
}

/* Para imágenes de fondo (background-image) en el contenedor - solo desktop */
@media (min-width: 768px) {
	body.front-page .container-hero,
	body.home .container-hero,
	body.front-page #container-hero,
	body.home #container-hero {
		animation: kenBurnsBackground 20s ease-in-out infinite;
		animation-direction: alternate;
	}
}

/* Para video (por si acaso) */
body.front-page #hero-video,
body.home #hero-video {
	animation: kenBurns 20s ease-in-out infinite;
	animation-direction: alternate;
	will-change: transform;
}

/* Fix para el buscador en móvil */
@media (max-width: 767px) {
	body.front-page .wp-block-search,
	body.home .wp-block-search {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	body.front-page .wp-block-search__inside-wrapper,
	body.home .wp-block-search__inside-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	
	body.front-page .wp-block-search__input,
	body.home .wp-block-search__input {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		width: auto !important;
	}
	
	body.front-page .wp-block-search__button,
	body.home .wp-block-search__button {
		flex-shrink: 0 !important;
	}
}

/* Desactivar animación en móvil para evitar problemas visuales */
@media (max-width: 767px) {
	body.front-page .container-hero,
	body.home .container-hero,
	body.front-page #container-hero,
	body.home #container-hero {
		animation: none !important;
		background-size: cover !important;
		background-position: center center !important;
	}
	
	body.front-page .container-hero img,
	body.home .container-hero img,
	body.front-page #container-hero img,
	body.home #container-hero img {
		animation: none !important;
		transform: none !important;
	}
	
	body.front-page #hero-video,
	body.home #hero-video {
		animation: none !important;
		transform: none !important;
	}
}

@keyframes kenBurns {
	0% {
		transform: scale(1) translate(0, 0);
	}
	100% {
		transform: scale(1.15) translate(-3%, -3%);
	}
}

@keyframes kenBurnsBackground {
	0% {
		background-position: center center;
		background-size: 100%;
	}
	100% {
		background-position: 60% 60%;
		background-size: 115%;
	}
}