.nis-picture {
	display: block;
	position: relative;
	overflow: hidden;
	background: transparent;
	width: min(100%, var(--nis-width, 100%));
	max-width: 100%;
	box-sizing: border-box;
}

/* En módulos de Impreza/US Core y grillas, el contenedor externo manda.
   Esto evita que un ancho natural grande empuje columnas o solape otras grillas. */
.w-image .nis-picture,
.w-gallery .nis-picture,
.w-grid .nis-picture,
.w-post-elm .nis-picture,
.vc_grid-container .nis-picture,
.wpb_gallery .nis-picture {
	width: 100%;
}

.nis-picture.nis-has-ratio {
	aspect-ratio: var(--nis-ratio);
}

.nis-picture::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
	transform: translateX(-100%);
	animation: nis-skeleton 1.2s infinite;
	pointer-events: none;
}

.nis-picture.is-loaded::before {
	display: none;
}

.nis-img {
	display: block;
	max-width: 100%;
	height: auto;
	opacity: 1;
	transition: opacity .22s ease;
	box-sizing: border-box;
}

/* Solo las imágenes dentro del wrapper propio usan width:100% y fade/skeleton.
   Las imágenes automáticas quedan como <img> normal para no romper grillas,
   galerías ni layouts calculados por Impreza/US Core. */
.nis-picture .nis-img {
	width: 100%;
	opacity: 0;
}

.nis-picture.nis-has-ratio .nis-img {
	width: 100%;
	height: 100%;
	object-fit: var(--nis-object-fit, cover);
}

.nis-img.nis-loaded,
.nis-picture.is-loaded .nis-img {
	opacity: 1;
}

@keyframes nis-skeleton {
	100% {
		transform: translateX(100%);
	}
}