/* =====================================================================
   PEEC Galería — front
   Las clases se repiten (.pgx-wrap.pgx-wrap, .pgx-lb.pgx-lb) y se usa
   !important en lo que Avada suele pisar (display, colores, botones).
   El visor (.pgx-lb) vive colgado del <body>, fuera de .pgx-wrap.
   ===================================================================== */

.pgx-wrap.pgx-wrap {
	width: 100% !important;
	max-width: var(--pgx-ancho, 1200px);
	margin: 0 auto;
	flex: 1 1 auto !important;
	align-self: stretch !important;
	box-sizing: border-box;
}

.pgx-wrap *,
.pgx-lb * {
	box-sizing: border-box;
}

/* ---------- Grilla tipo mosaico ----------
   Sin JS (o hasta que arranca) se arma con columnas CSS; con JS se reparte
   en .pgx-col para que el orden se lea de izquierda a derecha. */

.pgx-wrap.pgx-wrap .pgx-grid {
	display: block !important;
	column-count: var(--pgx-cols, 3);
	column-gap: var(--pgx-gap, 6px);
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.pgx-wrap.pgx-wrap .pgx-grid { column-count: var(--pgx-cols-t, 3); }
}

@media (max-width: 600px) {
	.pgx-wrap.pgx-wrap .pgx-grid { column-count: var(--pgx-cols-m, 3); }
}

.pgx-wrap.pgx-wrap .pgx-grid.pgx-listo {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: var(--pgx-gap, 6px);
	column-count: auto;
}

.pgx-wrap.pgx-wrap .pgx-col {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 0 !important;
	min-width: 0;
	gap: var(--pgx-gap, 6px);
}

.pgx-wrap.pgx-wrap .pgx-item {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 0 var(--pgx-gap, 6px) !important;
	border: var(--pgx-borde, 0) solid var(--pgx-borde-color, #fff) !important;
	border-radius: 0 !important;
	background: #111 !important;
	box-shadow: none !important;
	overflow: hidden;
	line-height: 0;
	cursor: zoom-in;
	break-inside: avoid;
	-webkit-tap-highlight-color: transparent;
}

.pgx-wrap.pgx-wrap .pgx-listo .pgx-item {
	margin: 0 !important;
}

.pgx-wrap.pgx-wrap .pgx-item:focus-visible {
	outline: 3px solid #ffff00;
	outline-offset: 2px;
}

.pgx-wrap.pgx-wrap .pgx-item img.pgx-foto {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
	transition: transform 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) {
	.pgx-wrap.pgx-wrap .pgx-item:hover img.pgx-foto {
		transform: scale(1.05);
		filter: brightness(1.08);
	}
}

/* ---------- Insignia de "nuevo" ---------- */

.pgx-wrap.pgx-wrap .pgx-item .pgx-insignia {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.pgx-wrap.pgx-wrap .pgx-item img.pgx-insignia {
	display: block !important;
	width: var(--pgx-ins, 40%) !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

.pgx-wrap.pgx-wrap .pgx-item .pgx-insignia-txt {
	padding: 0.15em 0.55em;
	border-radius: 5px;
	background: #ff1f6d !important;
	color: #fff !important;
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: clamp(11px, 1.6vw, 20px);
	letter-spacing: 1px;
	line-height: 1.2;
	white-space: nowrap;
}

.pgx-wrap.pgx-wrap .pgx-ins-sup-izq .pgx-insignia { top: 4%; left: 4%; }
.pgx-wrap.pgx-wrap .pgx-ins-sup-der .pgx-insignia { top: 4%; right: 4%; }
.pgx-wrap.pgx-wrap .pgx-ins-centro .pgx-insignia {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* =====================================================================
   Visor a pantalla completa
   ===================================================================== */

.pgx-lb.pgx-lb {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 2147483000;
	margin: 0;
	padding: 0;
	display: block !important;
	background: rgba(0, 0, 0, var(--pgx-lb-opacidad, 0.96)) !important;
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s ease;
	overscroll-behavior: contain;
	-webkit-tap-highlight-color: transparent;
}

.pgx-lb.pgx-lb[hidden] {
	display: none !important;
}

.pgx-lb.pgx-lb.pgx-lb-abierto {
	opacity: 1;
}

.pgx-lb.pgx-lb:fullscreen {
	width: 100%;
	height: 100%;
}

/* Pista horizontal: una imagen por pantalla, con imán (scroll-snap) */
.pgx-lb.pgx-lb .pgx-lb-pista {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-x pinch-zoom;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}

.pgx-lb.pgx-lb .pgx-lb-pista::-webkit-scrollbar {
	display: none;
}

.pgx-lb.pgx-lb .pgx-lb-pista.pgx-sin-anim {
	scroll-behavior: auto;
}

.pgx-lb.pgx-lb .pgx-lb-pista.pgx-arrastrando {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

.pgx-lb.pgx-lb .pgx-lb-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 56px 12px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	cursor: zoom-out;
}

.pgx-lb.pgx-lb .pgx-lb-img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	object-fit: contain;
	cursor: default;
	-webkit-user-drag: none;
	user-select: none;
}

.pgx-lb.pgx-lb .pgx-lb-img.pgx-lb-vuelve {
	transition: transform 0.25s ease;
}

@media (max-width: 767px) {
	/* En el celu la imagen usa toda la pantalla; los controles flotan encima */
	.pgx-lb.pgx-lb .pgx-lb-slide {
		padding: 0;
	}
}

/* Barra superior: contador, insignia, pantalla completa, cerrar */
.pgx-lb.pgx-lb .pgx-lb-arriba {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 24px 14px;
	padding-top: calc(8px + env(safe-area-inset-top, 0px));
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.pgx-lb.pgx-lb .pgx-lb-arriba > * {
	pointer-events: auto;
}

.pgx-lb.pgx-lb .pgx-lb-espacio {
	flex: 1 1 auto;
}

.pgx-lb.pgx-lb .pgx-lb-contador {
	padding: 2px 10px;
	border-radius: 6px;
	background: #000 !important;
	color: #ffff00 !important;
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 20px !important;
	letter-spacing: 1px;
	line-height: 1.3 !important;
}

.pgx-lb.pgx-lb img.pgx-lb-nuevo {
	display: block !important;
	width: auto !important;
	height: 40px !important;
	max-width: 160px !important;
	margin: 0 !important;
	object-fit: contain;
}

.pgx-lb.pgx-lb .pgx-lb-nuevo-txt {
	padding: 2px 10px;
	border-radius: 6px;
	background: #ff1f6d !important;
	color: #fff !important;
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 20px !important;
	letter-spacing: 1px;
	line-height: 1.3 !important;
}

.pgx-lb.pgx-lb .pgx-lb-nuevo[hidden],
.pgx-lb.pgx-lb .pgx-lb-btn[hidden],
.pgx-lb.pgx-lb .pgx-lb-nav[hidden],
.pgx-lb.pgx-lb .pgx-lb-pie[hidden] {
	display: none !important;
}

/* Botones */
.pgx-lb.pgx-lb button {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.pgx-lb.pgx-lb .pgx-lb-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	transition: background 0.2s;
}

.pgx-lb.pgx-lb .pgx-lb-btn:hover {
	background: rgba(0, 0, 0, 0.9) !important;
	color: #ffff00 !important;
}

.pgx-lb.pgx-lb .pgx-lb-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	height: 72px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: -36px 0 0 !important;
	border: 0 !important;
	background: rgba(0, 0, 0, 0.45) !important;
	color: #fff !important;
	transition: background 0.2s, opacity 0.2s;
}

.pgx-lb.pgx-lb .pgx-lb-nav:hover {
	background: rgba(0, 0, 0, 0.85) !important;
	color: #ffff00 !important;
}

.pgx-lb.pgx-lb .pgx-lb-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.pgx-lb.pgx-lb .pgx-lb-prev { left: 0; border-radius: 0 8px 8px 0 !important; }
.pgx-lb.pgx-lb .pgx-lb-next { right: 0; border-radius: 8px 0 0 8px !important; }

.pgx-lb.pgx-lb button:focus-visible {
	outline: 3px solid #ffff00;
	outline-offset: 2px;
}

.pgx-lb.pgx-lb svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: none) and (pointer: coarse) {
	/* En el celu se pasa deslizando: flechas más discretas */
	.pgx-lb.pgx-lb .pgx-lb-nav {
		width: 36px !important;
		height: 56px !important;
		margin-top: -28px !important;
		background: rgba(0, 0, 0, 0.3) !important;
	}
}

/* Epígrafe (si la imagen tiene "Leyenda" en la Biblioteca de Medios) */
.pgx-lb.pgx-lb .pgx-lb-pie {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 24px 16px 14px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	color: #fff !important;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}

/* Controles ocultos al tocar la imagen */
.pgx-lb.pgx-lb .pgx-lb-ui {
	transition: opacity 0.2s ease;
}

.pgx-lb.pgx-lb.pgx-lb-sin-ui .pgx-lb-ui {
	opacity: 0;
	pointer-events: none;
}

.pgx-lb.pgx-lb.pgx-lb-sin-ui .pgx-lb-arriba > * {
	pointer-events: none;
}

html.pgx-sin-scroll,
html.pgx-sin-scroll body {
	overflow: hidden !important;
}