/* ==========================================================
   PARACARE — GALERÍA PRODUCTO v12
   DESKTOP 4 COLUMNAS
   TABLET 3 COLUMNAS
   MÓVIL 3 COLUMNAS
   LIGHTBOX FULLSCREEN DARK LIMPIO
   REEMPLAZA TODO EL CSS ANTERIOR DEL MÓDULO
   ========================================================== */


/* ==========================================================
   1. FOTO PRINCIPAL SUPERIOR
   ========================================================== */

.pc-product-page .pc-gallery__main {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	aspect-ratio: 4 / 3 !important;

	background: var(--pc-surface) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
}

.pc-product-page .pc-gallery__main img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	object-fit: contain !important;
	object-position: center !important;

	background: var(--pc-surface) !important;
}


/* ==========================================================
   2. MINIATURAS SUPERIORES — SOLO 4
   ========================================================== */

.pc-product-page
.pc-gallery--compact-top
.pc-gallery__thumbs {
	display: grid !important;

	grid-template-columns:
		repeat(4, minmax(0, 1fr)) !important;

	gap: 8px !important;
	margin-top: 10px !important;
}

.pc-product-page
.pc-gallery--compact-top
.pc-gallery__thumb:nth-child(n + 5) {
	display: none !important;
}

.pc-product-page
.pc-gallery--compact-top
.pc-gallery__thumb {
	display: block !important;

	width: 100% !important;
	aspect-ratio: 1 / 1 !important;

	padding: 4px !important;

	background: var(--pc-surface) !important;

	border: 1px solid var(--pc-border) !important;
	border-radius: 12px !important;

	overflow: hidden !important;
}

.pc-product-page
.pc-gallery--compact-top
.pc-gallery__thumb img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center !important;

	border-radius: 8px !important;
}

.pc-product-page
.pc-gallery--compact-top
.pc-gallery__thumb.is-active {
	border-color: var(--pc-accent) !important;

	outline: 2px solid var(--pc-accent) !important;
	outline-offset: 1px !important;
}


/* ==========================================================
   3. GALERÍA COMPLETA
   ========================================================== */

.pc-full-gallery {
	margin-top: 16px !important;

	padding: 24px !important;

	background: var(--pc-surface) !important;

	border: 1px solid var(--pc-border) !important;
	border-radius: 26px !important;
}

.pc-full-gallery__head {
	margin-bottom: 18px !important;
}

.pc-full-gallery__head .pc-eyebrow {
	margin: 0 !important;
	color: var(--pc-accent) !important;
}


/* ==========================================================
   4. GRID DESKTOP — 4 COLUMNAS
   ========================================================== */

.pc-full-gallery__grid {
	display: grid !important;

	grid-template-columns:
		repeat(4, minmax(0, 1fr)) !important;

	gap: 12px !important;
}


/* ==========================================================
   5. TARJETAS CUADRADAS
   ========================================================== */

.pc-full-gallery__item {
	display: block !important;

	width: 100% !important;
	aspect-ratio: 1 / 1 !important;

	padding: 0 !important;
	margin: 0 !important;

	background: var(--pc-surface) !important;

	border: 1px solid var(--pc-border) !important;
	border-radius: 16px !important;

	overflow: hidden !important;

	cursor: zoom-in !important;

	transition:
		transform 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease !important;
}

.pc-full-gallery__item img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center !important;

	margin: 0 !important;
	padding: 0 !important;
}

.pc-full-gallery__item:hover {
	transform: translateY(-2px) !important;

	border-color: color-mix(in srgb,var(--pc-accent) 38%,var(--pc-border)) !important;

	box-shadow:
		0 10px 26px color-mix(in srgb,var(--pc-dark) 10%,transparent) !important;
}

.pc-full-gallery__item:focus-visible {
	outline: 3px solid var(--pc-accent) !important;
	outline-offset: 3px !important;
}


/* ==========================================================
   6. LIGHTBOX FULLSCREEN
   SOLO OVERLAY DARK + FOTO
   ========================================================== */

dialog.pc-gallery-lightbox {
	position: fixed !important;

	inset: 0 !important;

	width: 100vw !important;
	height: 100dvh !important;

	max-width: none !important;
	max-height: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	overflow: hidden !important;
}

dialog.pc-gallery-lightbox::backdrop {
	background: color-mix(in srgb,var(--pc-dark) 94%,transparent) !important;
	backdrop-filter: blur(5px) !important;
}


/* ==========================================================
   7. STAGE TRANSPARENTE
   ========================================================== */

.pc-gallery-lightbox__stage {
	position: absolute !important;

	inset: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: 100% !important;

	padding: 70px 110px 60px !important;

	background: transparent !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;
}


/* ==========================================================
   8. IMAGEN LIGHTBOX
   ========================================================== */

.pc-gallery-lightbox__image-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: 100% !important;

	background: transparent !important;

	border: 0 !important;
	box-shadow: none !important;

	overflow: visible !important;
}

.pc-gallery-lightbox__image-wrap img {
	display: block !important;

	width: auto !important;
	height: auto !important;

	max-width: 100% !important;
	max-height: 100% !important;

	object-fit: contain !important;
	object-position: center !important;

	margin: auto !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
	border-radius: 4px !important;

	box-shadow: none !important;
}


/* ==========================================================
   9. ANIMACIÓN SLIDER
   ========================================================== */

.pc-gallery-lightbox__image-wrap img.pc-slide-next {
	animation: pcSlideNext 220ms ease both;
}

.pc-gallery-lightbox__image-wrap img.pc-slide-prev {
	animation: pcSlidePrev 220ms ease both;
}

@keyframes pcSlideNext {
	from {
		opacity: 0;
		transform: translateX(28px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pcSlidePrev {
	from {
		opacity: 0;
		transform: translateX(-28px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}


/* ==========================================================
   10. FLECHAS NARANJAS
   ========================================================== */

.pc-gallery-lightbox__nav {
	position: fixed !important;

	top: 50% !important;

	z-index: 20 !important;

	display: grid !important;
	place-items: center !important;

	width: 54px !important;
	height: 54px !important;

	padding: 0 !important;

	transform: translateY(-50%) !important;

	background: var(--pc-accent) !important;

	border: 0 !important;
	border-radius: 50% !important;

	color: var(--pc-white) !important;
	-webkit-text-fill-color: var(--pc-white) !important;

	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	cursor: pointer !important;

	box-shadow:
		var(--pc-shadow-control) !important;
}

.pc-gallery-lightbox__nav--prev {
	left: 24px !important;
}

.pc-gallery-lightbox__nav--next {
	right: 24px !important;
}

.pc-gallery-lightbox__nav:hover {
	background: var(--pc-accent-hover) !important;
}


/* ==========================================================
   11. CERRAR NARANJO
   ========================================================== */

.pc-gallery-lightbox__close {
	position: fixed !important;

	top: 20px !important;
	right: 22px !important;

	z-index: 30 !important;

	display: grid !important;
	place-items: center !important;

	width: 44px !important;
	height: 44px !important;

	padding: 0 !important;

	background: var(--pc-accent) !important;

	border: 0 !important;
	border-radius: 50% !important;

	color: var(--pc-white) !important;
	-webkit-text-fill-color: var(--pc-white) !important;

	font-size: 27px !important;
	line-height: 1 !important;

	cursor: pointer !important;

	box-shadow:
		var(--pc-shadow-control) !important;
}

.pc-gallery-lightbox__close:hover {
	background: var(--pc-accent-hover) !important;
}


/* ==========================================================
   12. CONTADOR
   ========================================================== */

.pc-gallery-lightbox__counter {
	position: fixed !important;

	left: 50% !important;
	bottom: 18px !important;

	z-index: 20 !important;

	transform: translateX(-50%) !important;

	padding: 6px 11px !important;

	background: rgba(255, 255, 255, .10) !important;

	border:
		1px solid rgba(255, 255, 255, .15) !important;

	border-radius: 999px !important;

	color: var(--pc-white) !important;

	font-size: 13px !important;
	font-weight: 700 !important;

	letter-spacing: .04em !important;
}


/* ==========================================================
   13. TABLET — 3 COLUMNAS
   ========================================================== */

@media (max-width: 900px) {

	.pc-full-gallery__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr)) !important;

		gap: 10px !important;
	}

	.pc-gallery-lightbox__stage {
		padding: 64px 76px 54px !important;
	}

	.pc-gallery-lightbox__nav {
		width: 48px !important;
		height: 48px !important;
	}

}


/* ==========================================================
   14. MÓVIL — 3 FOTOS POR FILA
   ========================================================== */

@media (max-width: 600px) {

	.pc-product-page
	.pc-gallery--compact-top
	.pc-gallery__thumbs {
		gap: 6px !important;
	}

	.pc-full-gallery {
		padding: 12px !important;
		border-radius: 18px !important;
	}

	.pc-full-gallery__head {
		margin-bottom: 12px !important;
	}

	.pc-full-gallery__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr)) !important;

		gap: 6px !important;
	}

	.pc-full-gallery__item {
		border-radius: 10px !important;
	}

	.pc-gallery-lightbox__stage {
		padding: 58px 14px 52px !important;
	}

	.pc-gallery-lightbox__nav {
		width: 42px !important;
		height: 42px !important;

		font-size: 27px !important;
	}

	.pc-gallery-lightbox__nav--prev {
		left: 8px !important;
	}

	.pc-gallery-lightbox__nav--next {
		right: 8px !important;
	}

	.pc-gallery-lightbox__close {
		top: 10px !important;
		right: 10px !important;

		width: 40px !important;
		height: 40px !important;
	}

}


/* ==========================================================
   15. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.pc-full-gallery__item {
		transition: none !important;
	}

	.pc-gallery-lightbox__image-wrap img {
		animation: none !important;
	}

}