/* =============================================
   Galería BPD — gallery.css  v2.0
   ============================================= */

.eag-album-gallery *, .eag-album-gallery *::before, .eag-album-gallery *::after {
	box-sizing: border-box;
}

/* =============================================
   PORTADA
   ============================================= */
.eag-cover-wrapper {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
	border-radius: 16px;
	cursor: pointer;
	display: block;
	background-color: transparent;
	margin: 0; padding: 0;
	line-height: 0;
	outline: none;
}
.eag-cover-wrapper:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,112,255,0.7);
}
.eag-cover-img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
	will-change: transform;
}
.eag-cover-wrapper:hover .eag-cover-img { transform: scale(1.07); }

.eag-cover-overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.35);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 32px 28px;
	transition: background 0.4s ease;
	line-height: normal; font-size: 1rem;
}
.eag-cover-wrapper:hover .eag-cover-overlay { background: rgba(0,0,0,0.55); }

.eag-cover-info { text-align: center; width: 100%; }

.eag-cover-title {
	color: #fff; font-size: 2rem; font-weight: 700;
	margin: 0 0 6px; line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.eag-cover-subtitle {
	color: rgba(255,255,255,0.85);
	font-size: 0.95rem; margin: 0 0 14px;
	text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.eag-image-count {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,0.18); color: #fff;
	font-size: 0.82rem; font-weight: 600;
	padding: 5px 12px; border-radius: 20px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.25);
}

/* Ícono hover */
.eag-zoom-icon {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0);
	color: #ffffff; opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
	pointer-events: none;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.eag-cover-wrapper:hover .eag-zoom-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.eag-zoom-icon i, .eag-zoom-icon svg { display: block; color: inherit; line-height: 1; }

/* =============================================
   LIGHTBOX
   ============================================= */
.eag-lightbox {
	position: fixed; inset: 0; z-index: 999999;
	background: rgba(0,0,0,0.95);
	display: flex; flex-direction: column; align-items: stretch;
	overflow: hidden;
	animation: eagFadeIn 0.25s ease forwards;
}
@keyframes eagFadeIn { from { opacity:0; } to { opacity:1; } }
body.eag-no-scroll { overflow: hidden; }

/* Botón cerrar — la posición top/right la define Elementor por control responsive */
.eag-lb-close {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 10;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
	outline: none;
	padding: 0;
}
.eag-lb-close svg { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.eag-lb-close:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.eag-lb-close:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }

/* Contador */
.eag-lb-counter {
	position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
	color: rgba(255,255,255,0.75); font-size: 0.82rem; font-weight: 600;
	background: rgba(255,255,255,0.08); padding: 4px 12px; border-radius: 20px;
	backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.12);
	white-space: nowrap; z-index: 5;
}

/* Stage */
.eag-lb-stage {
	flex: 1; min-height: 0;
	display: flex; flex-direction: row;
	align-items: center; justify-content: center;
	padding: 64px 16px 16px; gap: 12px;
}
.eag-lb-image-wrap {
	position: relative; display: flex;
	align-items: center; justify-content: center;
	flex: 1; min-width: 0; max-height: 100%;
}
.eag-lb-img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	object-fit: contain; border-radius: 6px; display: block;
	box-shadow: 0 20px 80px rgba(0,0,0,0.8);
	transition: opacity 0.22s ease;
}
.eag-lb-img.eag-loading { opacity: 0; }

/* Spinner */
.eag-lb-spinner {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.eag-lb-spinner.eag-active { opacity: 1; }
.eag-lb-spinner::after {
	content: ''; width: 32px; height: 32px;
	border: 3px solid rgba(255,255,255,0.15);
	border-top-color: #fff; border-radius: 50%;
	animation: eagSpin 0.7s linear infinite;
}
@keyframes eagSpin { to { transform: rotate(360deg); } }

/* Caption */
.eag-lb-caption {
	position: absolute; bottom: -24px; left: 0; right: 0;
	text-align: center; color: rgba(255,255,255,0.65);
	font-size: 0.8rem; pointer-events: none;
}

/* Flechas */
.eag-lb-arrow {
	flex-shrink: 0;
	width: 52px; height: 52px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.18);
	color: #fff; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.2s, transform 0.2s; outline: none;
	padding: 0;
}
.eag-lb-arrow svg { width: 28px; height: 28px; flex-shrink: 0; display: block; }
.eag-lb-arrow:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.eag-lb-arrow:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
.eag-lb-arrow:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* =============================================
   THUMBNAILS
   ============================================= */
.eag-lb-thumbs {
	flex-shrink: 0; width: 100%;
	overflow-x: auto; overflow-y: hidden;
	padding: 10px 0 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.3) transparent;
	text-align: center;
}
.eag-lb-thumbs::-webkit-scrollbar { height: 4px; }
.eag-lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }

.eag-lb-thumbs-inner {
	display: inline-flex; flex-direction: row; flex-wrap: nowrap;
	align-items: center; gap: 6px; padding: 0 16px;
}
.eag-lb-thumb-item {
	flex-shrink: 0; width: 66px; height: 50px;
	border-radius: 6px; overflow: hidden; cursor: pointer;
	opacity: 0.5; border: 2px solid transparent;
	transition: opacity 0.2s, border-color 0.2s, transform 0.2s; outline: none;
}
.eag-lb-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eag-lb-thumb-item:hover { opacity: 0.8; transform: scale(1.05); }
.eag-lb-thumb-item.eag-active { opacity: 1; border-color: #fff; transform: scale(1.06); }
.eag-lb-thumb-item:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.6); }

/* Botón descarga */
.eag-lb-download {
	position: absolute; top: 16px; right: 68px;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff; padding: 6px 14px; border-radius: 20px;
	font-size: 0.8rem; font-weight: 600;
	text-decoration: none; transition: background 0.2s;
}
.eag-lb-download:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* Animaciones slide */
@keyframes eagSlideIn    { from { opacity:0; transform:translateX(20px)  scale(0.97); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes eagSlideInRev { from { opacity:0; transform:translateX(-20px) scale(0.97); } to { opacity:1; transform:translateX(0) scale(1); } }
.eag-lb-img.eag-enter-next { animation: eagSlideIn    0.25s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.eag-lb-img.eag-enter-prev { animation: eagSlideInRev 0.25s cubic-bezier(0.25,0.46,0.45,0.94) both; }

/* =============================================
   RESPONSIVE BASE
   (Elementor gestiona el resto de propiedades
   responsive directamente desde el panel)
   ============================================= */
@media (max-width: 1024px) {
	.eag-cover-wrapper { height: 320px; }
}
@media (max-width: 767px) {
	.eag-cover-wrapper { height: 260px; }
	.eag-cover-title   { font-size: 1.3rem; }
	.eag-cover-overlay { padding: 20px 16px; }
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.eag-cover-img, .eag-lb-img { transition: none !important; animation: none !important; }
	.eag-zoom-icon               { transition: opacity 0.1s !important; }
	.eag-lightbox                { animation: none !important; }
}