/**
 * MLC Toolkit — Visor de producto
 * ---------------------------------------------------------------------------
 * El mismo diseño que el `visorproducto.php` suelto. Todo va con !important
 * para que el tema y Elementor no lo pisen.
 *
 * Las medidas y el color salen de variables que cada visor pone en su atributo
 * `style` (--mlcv-texto, --mlcv-ancho, --mlcv-thumb, --mlcv-fs). Aquí no se
 * declaran: una declaración con !important ganaría al `style` del visor. Los
 * valores de reserva de cada `var()` son los del archivo original.
 */

.mlcv {
	background: transparent !important;
	color: var(--mlcv-texto, #FFFFFF) !important;
	font-family: "Rubik", system-ui, -apple-system, sans-serif !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.mlcv * {
	box-sizing: border-box !important;
}

.mlcv__inner {
	max-width: var(--mlcv-ancho, 620px) !important;
	display: grid !important;
	grid-template-columns: var(--mlcv-thumb, 52px) minmax(0, 1fr) !important;
	column-gap: clamp(28px, 9%, 72px) !important;
	row-gap: 22px !important;
	align-items: start !important;
}

.mlcv--center .mlcv__inner {
	margin-inline: auto !important;
}

.mlcv--right .mlcv__inner {
	margin-inline: auto 0 !important;
}

/* --- Encabezado (arriba a la derecha) ------------------------------------ */
.mlcv__head {
	grid-column: 1 / -1 !important;
	text-align: right !important;
	margin: 0 !important;
	font-size: var(--mlcv-fs, 14px) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.2px !important;
	color: var(--mlcv-texto, #FFFFFF) !important;
}

.mlcv__head span {
	display: block !important;
}

/* --- Columna de miniaturas ------------------------------------------------ */
.mlcv__thumbs {
	display: flex !important;
	flex-direction: column !important;
	gap: 11px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Reset duro: los temas y Elementor inyectan bordes y sombras a <button>. */
.mlcv__thumb,
.mlcv__thumb:hover,
.mlcv__thumb:focus,
.mlcv__thumb:active,
.mlcv__thumb[aria-pressed="true"] {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	text-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.mlcv__thumb {
	position: relative !important;
	width: var(--mlcv-thumb, 52px) !important;
	height: var(--mlcv-thumb, 52px) !important;
	display: block !important;
	cursor: pointer !important;
	overflow: visible !important;
	line-height: 0 !important;
	transition: opacity 0.18s ease !important;
	opacity: 0.7 !important;
}

.mlcv__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Indicador de estado activo: barra lateral a la izquierda. */
.mlcv__thumb::before {
	content: "" !important;
	position: absolute !important;
	left: -22px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 2px !important;
	height: 60% !important;
	background: var(--mlcv-texto, #FFFFFF) !important;
	opacity: 0 !important;
	transition: opacity 0.2s ease !important;
	pointer-events: none !important;
}

.mlcv__thumb::after {
	content: none !important;
}

.mlcv__thumb:hover,
.mlcv__thumb.is-activa {
	opacity: 1 !important;
}

.mlcv__thumb.is-activa::before {
	opacity: 1 !important;
}

.mlcv__thumb:focus-visible {
	outline: 2px solid var(--mlcv-texto, #FFFFFF) !important;
	outline-offset: 3px !important;
}

/* --- Imagen principal: todas apiladas y precargadas ------------------------ */
.mlcv__main {
	position: relative !important;
	overflow: hidden !important;
	background: transparent !important;
}

/* Fundido cruzado sin parpadeo: la imagen nueva aparece ENCIMA de la vieja, y
   la vieja no se oculta hasta que la nueva ya es opaca. */
.mlcv__main img {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0s linear 0.45s, visibility 0s linear 0.45s !important;
}

.mlcv__main img.is-visible {
	z-index: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: opacity 0.45s ease !important;
}

/* --- Especificaciones: mismo ancho que la imagen --------------------------- */
.mlcv__specs {
	grid-column: 2 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: var(--mlcv-fs, 14px) !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	text-transform: uppercase !important;
	color: var(--mlcv-texto, #FFFFFF) !important;
}

.mlcv__spec {
	position: relative !important;
	padding: 0 26px !important;
	margin: 0 !important;
	flex: 0 1 auto !important;
}

.mlcv__spec:first-child {
	padding-left: 0 !important;
}

.mlcv__spec::marker {
	content: none !important;
}

.mlcv__spec + .mlcv__spec::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 2px !important;
	bottom: 2px !important;
	width: 1px !important;
	background: rgba(255, 255, 255, 0.55) !important;
}

.mlcv__spec b,
.mlcv__spec span {
	display: block !important;
	font-weight: 700 !important;
}

/* --- Capa del fundido de la foto de ambiente --------------------------------
   Se mete como primer hijo del contenedor de destino mientras dura el
   fundido y al terminar se quita. La opacidad la sube el JS en línea, también
   con !important (en línea gana a esta). */
.mlcv-fundido {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
	border-radius: inherit !important;
	opacity: 0 !important;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 700px) {
	.mlcv__inner {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 18px !important;
	}

	.mlcv__head {
		text-align: left !important;
	}

	.mlcv__thumbs {
		order: 2 !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	.mlcv__thumb::before {
		left: 50% !important;
		top: auto !important;
		bottom: -8px !important;
		transform: translateX(-50%) !important;
		width: 60% !important;
		height: 2px !important;
	}

	.mlcv__main {
		order: 1 !important;
	}

	.mlcv__specs {
		grid-column: 1 !important;
		order: 3 !important;
	}

	.mlcv__spec {
		padding: 0 18px !important;
	}

	.mlcv__spec:first-child {
		padding-left: 0 !important;
	}
}

@media (max-width: 460px) {
	.mlcv__spec {
		padding: 0 14px !important;
	}

	.mlcv__spec:first-child {
		padding-left: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mlcv__main img,
	.mlcv__main img.is-visible,
	.mlcv__thumb,
	.mlcv__thumb::before {
		transition: none !important;
	}
}