/* ==========================================================================
   Candelaria — visor emergente de la galería de producto
   Innovar Soluciones Web
   ========================================================================== */

/* La foto del visor de la ficha invita a hacer clic. */
.cnd-galeria__foto {
	cursor: zoom-in;
}

body.cnd-visor-abierto {
	overflow: hidden;
}

.cnd-visor {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(8px, 1.5vw, 20px);
	padding: clamp(12px, 2.5vw, 34px);
	background: rgba(0, 0, 0, .92);
}

.cnd-visor[hidden] {
	display: none;
}

/* Lienzo: la foto se ve completa; el fondo es el que hace la lupa. */
.cnd-visor__lienzo {
	position: relative;
	justify-self: center;
	max-width: 100%;
	max-height: calc(100vh - clamp(24px, 5vw, 68px));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	cursor: zoom-in;
}

.cnd-visor__lienzo.is-lupa {
	cursor: zoom-out;
}

.cnd-visor__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - clamp(24px, 5vw, 68px));
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity .15s var(--cnd-ease, ease);
}

/* Con la lupa puesta, la foto normal se esconde y manda el fondo. */
.cnd-visor__lienzo.is-lupa .cnd-visor__img {
	opacity: 0;
}

/* Botones. */
.cnd-visor__cerrar,
.cnd-visor__flecha {
	display: grid;
	place-items: center;
	width: clamp(38px, 3.5vw, 48px);
	height: clamp(38px, 3.5vw, 48px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--cnd-blanco, #fff);
	cursor: pointer;
	transition: background .2s var(--cnd-ease, ease);
}

.cnd-visor__cerrar:hover,
.cnd-visor__flecha:hover {
	background: rgba(255, 255, 255, .26);
}

.cnd-visor__cerrar[hidden],
.cnd-visor__flecha[hidden] {
	display: none;
}

.cnd-visor__cerrar {
	position: absolute;
	top: clamp(12px, 2.5vw, 34px);
	right: clamp(12px, 2.5vw, 34px);
	z-index: 2;
}

.cnd-visor__cerrar svg,
.cnd-visor__flecha svg {
	width: 45%;
	height: 45%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cnd-visor__contador {
	position: absolute;
	left: 50%;
	bottom: clamp(10px, 2vw, 26px);
	transform: translateX(-50%);
	color: var(--cnd-blanco, #fff);
	font-family: var(--cnd-texto, sans-serif);
	font-size: 14px;
	letter-spacing: .1em;
	opacity: .8;
}

.cnd-visor__contador[hidden] {
	display: none;
}

/* En móvil no hay lupa: se acerca con los dedos. */
@media (hover: none), (pointer: coarse) {

	.cnd-visor__lienzo,
	.cnd-visor__lienzo.is-lupa {
		cursor: default;
	}

	.cnd-visor__img {
		touch-action: pinch-zoom;
	}
}

@media (max-width: 600px) {

	.cnd-visor {
		grid-template-columns: 1fr;
	}

	.cnd-visor__flecha {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.cnd-visor__flecha--prev {
		left: 10px;
	}

	.cnd-visor__flecha--next {
		right: 10px;
	}
}