/* Webvía Imágenes Solapadas — estilos del front */

.wis-root {
	--wis-ancho: 560px;
	--wis-radio: 18px;
	--wis-borde: 2px;
	--wis-vel: 6s;
	--wis-prop1: 1 / 1.02;
	--wis-prop2: 1 / 1.18;
	--wis-pos: center;
	--wis-lado: 2%;
	--wis-color: #1a1a1a;
	--wis-sombra: none;
	display: flex;
	justify-content: center;
	width: 100%;
}

.wis-stage {
	position: relative;
	width: 100%;
	max-width: var(--wis-ancho);
	aspect-ratio: 56 / 52;
}

.wis-card {
	position: absolute;
	overflow: hidden;
	border: var(--wis-borde) solid var(--wis-color);
	border-radius: var(--wis-radio);
	background: #eee;
	box-sizing: border-box;
	display: block;
	box-shadow: var(--wis-sombra);
}

.wis-card--1 {
	top: 0;
	right: var(--wis-lado);
	width: 58%;
	aspect-ratio: var(--wis-prop1);
	z-index: 1;
}

.wis-card--2 {
	bottom: 0;
	left: var(--wis-lado);
	width: 50%;
	aspect-ratio: var(--wis-prop2);
	z-index: 2;
}

.wis-fade-wrap {
	position: absolute;
	inset: 0;
}

.wis-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: var(--wis-pos, center);
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--wis-fundido, 1200ms) ease-in-out;
}

.wis-slide.is-active {
	opacity: 1;
}

.wis--flotar .wis-card--1 {
	animation: wis-float-1 var(--wis-vel) ease-in-out infinite;
}

.wis--flotar .wis-card--2 {
	animation: wis-float-2 var(--wis-vel) ease-in-out infinite;
}

@keyframes wis-float-1 {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-10px) rotate(1.2deg); }
}

@keyframes wis-float-2 {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(10px) rotate(-1.2deg); }
}

@media (prefers-reduced-motion: reduce) {
	.wis--flotar .wis-card--1,
	.wis--flotar .wis-card--2 {
		animation: none;
	}
}

@media (max-width: 480px) {
	.wis-stage {
		max-width: 100%;
	}
}