/* El tema bloquea el scroll de toda la pagina en modo kenburns
   (body{position:fixed}) para que la portada ocupe toda la pantalla
   sin nada debajo. Lo liberamos aqui para poder revelar la galeria
   al hacer scroll, y confinamos el fondo Ken Burns + sus controles
   dentro de #home (que ya mide 100vh) en vez de fijarlos al viewport. */
body.page-is-fullscreen.fullscreen-kenburns {
	position: static !important;
	overflow: visible !important;
	height: auto !important;
}

#home {
	height: 100vh;
	overflow: hidden;
}

#kenburns-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -2;
}

.kb-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1);
	transition: opacity 1.2s ease-in-out;
}

.kb-slide.kb-active {
	opacity: 1;
	z-index: 1;
}

.kb-slide.kb-zoom-in.kb-active {
	animation: kb-zoom-in 8500ms ease-in-out forwards;
}

.kb-slide.kb-zoom-out.kb-active {
	animation: kb-zoom-out 8500ms ease-in-out forwards;
}

@keyframes kb-zoom-in {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

@keyframes kb-zoom-out {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

.kb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	font-size: 18px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease;
	padding: 0;
}
.kb-arrow:hover {
	background: rgba(0, 0, 0, 0.5);
}
.kb-arrow-prev { left: 24px; }
.kb-arrow-next { right: 24px; }

.kb-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 16px;
	overflow-x: auto;
}

.kb-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 44px;
	border-radius: 4px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	background-size: cover;
	background-position: center center;
	cursor: pointer;
	padding: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.kb-thumb:hover {
	opacity: 1;
}
.kb-thumb-active {
	opacity: 1;
	border-color: #fff;
}

@media (max-width: 700px) {
	.kb-arrow { width: 36px; height: 36px; line-height: 36px; font-size: 15px; }
	.kb-arrow-prev { left: 10px; }
	.kb-arrow-next { right: 10px; }
	.kb-thumb { width: 44px; height: 32px; }
	.kb-thumbs { bottom: 12px; gap: 6px; }
}