.menu-gallery{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5%;
	color: rgba(236, 233, 233, 1);
	text-align: center;
	z-index: 0
}
.menu-gallery .audio-controls{ 
font-size: 2em;	
}

.menu-gallery .audio-controls .icon-mute{ 
opacity: .75
}

.menu-gallery .openfooter-btn{ 
font-size: 3em;	
}

.gallery-cont{
	position: fixed;
	width: 70%;
	height: 100%;
	top: 0;
	left: 15%;
	background: rgba(19, 16, 16, .1);
	padding: .5em;
}
.head-gallery{
	background: rgba(19, 16, 16, .25);
	position: absolute;
	width: 100%;
	height: 9.5%;
	top: 0;
	left: 0;
	z-index: 200;
}
.head-gallery ul{
	position: absolute;
	top: 60%;
	transform: translateY(-50%);
	left: 10%;
	padding-left: 1em;
	border-left: 1px solid rgba(254, 65, 51, 1);
	color: rgba(236, 233, 233, 1);
}
.head-gallery h1{
	font-family: "Rubik", sans-serif;
	font-size: 2em;
	font-weight: 900;
	text-transform: uppercase !important;
}
.head-gallery h2{
	font-size: 1em;
	font-weight: 200;
	text-transform: none !important;
	margin: -.5em 0 .5em;
}
.head-gallery h2:before{
	content: "";
}
.head-gallery h3{
	font-size: 1em;
	font-weight: 400;
}
.head-gallery img{
	position: absolute;
	max-height: 80%;
	top: 50%;
	transform: translateY(-50%);
	right: 91%;
}
.gallery-cont i{
	font-size: .8em;
	opacity: .75;
}

.gallery {
  display: grid;
	grid-template-columns: repeat(6, 1fr); 
	gap: 1px; 
max-height: 90%;
overflow-y: auto;
margin-top: 7%;
}

.gallery li {
  overflow: hidden;
  position: relative;
}

.gallery li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Las destacadas */
.gallery li.big {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery li.footer-gallery {
 grid-column: 1 / -1; /* Ocupa toda la fila */
 background: rgba(19, 16, 16, 1);
 text-align: center;
 color: rgba(236, 233, 233, 1);
 padding: 1em 0;
 margin-top: 1em;
}
.gallery li.footer-gallery a:after {
  font-family: 'icomoon' !important;
  content: "\e902";
  color: rgba(254, 65, 51, 1);
  margin:0 1.5em;
  font-size: .5em;
}

.gallery li.footer-gallery a:last-child:after {
  content: "";
}


.gallery img {
  width: 100%;
  display: block;
  cursor: pointer;
}
.gallery img:hover {
  opacity: .9;
  border: 1px solid rgba(236, 233, 233, .25);
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(19, 16, 16, .9)  url(/assets/img/papel.webp) center / cover;
  background-attachment: fixed;
  background-blend-mode: multiply;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
 
}

.lightbox.show {
  display: flex;
  z-index: 100;
} 

 .lightbox-content {
 position: absolute;
 width: 100%;
 height: 100%;
 background: rgba(19, 16, 16, .87)  url(/assets/img/papel.webp) center / cover;
 background-blend-mode: multiply;
 padding: 15vh 0 0;
}

.lightbox-img {
	position: relative;
	max-height: 70vh;
	margin: 0 auto 1rem;
	transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

.description, .counter {
position: relative;
color: rgba(236, 233, 233, 1);
font-size: .8em;
opacity: .6;
width: 52%;
margin: 0 auto;

}

.lightbox-img.current {
  z-index: 2;
  opacity: 1;
}

.lightbox-img.next {
  z-index: 3;
  opacity: 0;
}

.lightbox-img.fade-in {
  opacity: 1;
  transform: scale(1);
}

.lightbox-img.fade-out {
  opacity: 0;
  transform: scale(1);
} 

.lightbox-img.loaded {
	opacity: 1;
	transform: scale(1);
	transform: scale(1);
}

/* ============================ */
/* .lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
} */

/* .lightbox-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 80vh;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
} */








.close-btn,
.prev-btn,
.next-btn {
  position: fixed;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}

.close-btn:hover,
.prev-btn:hover,
.next-btn:hover {
  color: rgba(236, 233, 233, .8);
  scale: 1.1
}

.close-btn {
  top: 10%;
  right: 20%;
  font-size: 2.5rem;
  transform: none;
  z-index: 20;
}

.prev-btn {
  left: 10%;
	-webkit-transform: scaleX(-1);
	  transform: scaleX(-1);
}

.next-btn {
 right: 10%;
}