/* Funlab Work Split */
.fws-container{
	display:flex;
	align-items:flex-start;
	background-color:#191919;
	color:#fff;
	position:relative;
	width:100%;
	box-sizing:border-box;
}
.fws-container *{box-sizing:border-box}

/* Panel izquierdo fijo */
.fws-left{
	width:40%;
	flex:0 0 40%;
	height:100vh;
	position:-webkit-sticky;
	position:sticky;
	top:0;
	padding:60px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	overflow:hidden;
}
.fws-label{font-size:14px;text-transform:uppercase;color:#888;margin:0 0 20px}
.fws-heading{font-size:64px;font-weight:500;letter-spacing:-2px;margin:0 0 40px;color:#fff}

.fws-active{max-width:85%;transition:opacity .4s ease,transform .4s ease}
.fws-active.fws-changing{opacity:0;transform:translateY(10px)}
.fws-title{font-size:28px;font-weight:400;margin:0 0 5px;color:#fff}
.fws-meta{display:block;font-size:12px;color:#888;margin:0 0 25px}
.fws-desc{font-size:14px;line-height:1.6;color:#ccc;margin:0 0 30px}
.fws-desc:empty{display:none}
.fws-btn{
	display:inline-block;padding:10px 24px;border:1px solid #fff;border-radius:20px;
	color:#fff;font-size:13px;text-decoration:none;
	transition:background-color .3s ease,color .3s ease;
}
.fws-btn:hover{background-color:#fff;color:#191919}

/* Siguiente proyecto */
.fws-next{
	margin-top:auto;
	display:flex;align-items:center;gap:15px;
	max-width:90%;padding:15px;border-radius:12px;
	background:rgba(255,255,255,.04);
	text-decoration:none;color:inherit;cursor:pointer;
	transition:background-color .3s ease;
}
.fws-next:hover{background:rgba(255,255,255,.08)}
.fws-next-thumb{flex:0 0 100px;width:100px;height:60px;border-radius:6px;overflow:hidden;background:#2a2a2a}
.fws-next-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.fws-next-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.fws-next-title{font-size:16px;font-weight:500;color:#fff}
.fws-next-meta{font-size:11px;color:#777}
.fws-next-arrow{margin-left:auto;transition:transform .3s ease}
.fws-next-arrow img{display:block;width:24px;height:auto}
.fws-next:hover .fws-next-arrow{transform:translateX(5px)}
.fws-next .fws-next-info,.fws-next .fws-next-thumb{transition:opacity .4s ease}
.fws-next.fws-changing .fws-next-info,.fws-next.fws-changing .fws-next-thumb{opacity:0}

/* Panel derecho con scroll */
.fws-right{
	width:60%;flex:0 0 60%;
	padding:60px 60px 60px 0;
	display:flex;flex-direction:column;gap:20px;
}
.fws-item{margin:0}
.fws-item-media{
	display:block;position:relative;overflow:hidden;
	aspect-ratio:4 / 3;border-radius:8px;background:#2a2a2a;
}
.fws-container .fws-item-media img{
	display:block;width:100%;height:100%;object-fit:cover;
	transition:transform .8s ease;
}
.fws-container.fws-zoom .fws-item-media:hover img{transform:scale(1.05)}
.fws-caption{display:none}

/* Animación de entrada solo con CSS (scroll-driven). Si el navegador no la
   soporta, o falla cualquier cosa, el contenido se ve normal: NUNCA queda oculto. */
@keyframes fws-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
	.fws-animated{
		animation:fws-in linear both;
		animation-timeline:view();
		animation-range:entry 0% entry 45%;
	}
}
.elementor-editor-active .fws-animated{animation:none!important;opacity:1!important;transform:none!important}

/* Responsive: en tablet/móvil se apila y cada imagen lleva su título */
@media (max-width:991px){
	.fws-container{flex-direction:column}
	.fws-left{width:100%;flex:none;height:auto!important;min-height:0!important;position:relative;top:auto!important;padding:30px 30px 0}
	.fws-heading{font-size:40px;margin:0}
	.fws-active,.fws-next{display:none}
	.fws-right{width:100%;flex:none;padding:20px 30px 30px}
	.fws-caption{display:flex;flex-direction:column;gap:4px;margin-top:12px}
	.fws-caption-title{font-size:20px;color:#fff}
	.fws-caption-meta{font-size:12px;color:#888}
}

/* Este widget ya tiene su propio efecto de scroll. Si en Elementor > Avanzado
   se le puso una "Animación de entrada", Elementor lo deja con visibility:hidden
   hasta disparar su waypoint, y en un widget tan alto nunca dispara.
   Con esto jamás queda oculto. */
.elementor-widget-funlab_work_split.elementor-invisible{visibility:visible!important}
