/* Widget de Imágenes Responsivas — frontend */

.ariw {
	display: flex;
	flex-direction: column;
	gap: var(--ariw-gap, 15px);
	width: 100%;
	margin-bottom: 15px;
}

.ariw .ariw__item {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: var(--ariw-maxw, 100%);
}

.ariw--align-center .ariw__item { margin-left: auto; margin-right: auto; text-align: center; }
.ariw--align-right  .ariw__item { margin-left: auto; margin-right: 0;    text-align: right; }
.ariw--align-left   .ariw__item { margin-left: 0;    margin-right: auto; text-align: left; }

.ariw .ariw__link {
	display: block;
}

/* Escala proporcional: nunca recorta, nunca deforma */
.ariw .ariw__img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--ariw-radius, 0);
}

.ariw--align-center .ariw__img { margin-left: auto; margin-right: auto; }
.ariw--align-right  .ariw__img { margin-left: auto; margin-right: 0; }
.ariw--align-left   .ariw__img { margin-left: 0;    margin-right: auto; }

/* Ampliar imágenes pequeñas al ancho disponible */
.ariw--fill .ariw__img {
	width: 100%;
}

.ariw__caption {
	font-size: .875em;
	margin-top: .4em;
	line-height: 1.4;
}

/* Efecto fade-in */
.ariw--fade .ariw__img {
	opacity: 0;
	transition: opacity .45s ease;
	/* Red de seguridad: si el JS no corre (defer/bloqueo), se muestra a los 3 s */
	animation: ariw-reveal 0s linear 3s forwards;
}

.ariw--fade .ariw__img.ariw-loaded {
	opacity: 1;
}

@keyframes ariw-reveal {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ariw--fade .ariw__img { transition: none; }
}