@import url("https://fonts.googleapis.com/css?family=Inconsolata|Merriweather");


.container_galeria_fotografica {
  	min-width: 100%;
  	/* min-height: 100vh; */
  	position: relative;
  	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  	grid-gap: 10px; /* Espacios entre imágenes */
}

.container_galeria_prensa {
  	min-width: 100%;
  	/* min-height: 100vh; */
  	position: relative;
  	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  	grid-gap: 10px; /* Espacios entre imágenes */
}

.galeria {
	width: 100%;
	height: auto;
	/* height: 21vh; */
	position: relative;
	margin: 1.25rem 0 0 0;
	overflow: hidden;
}

.galeria img {
	display: block;
  	width: 100%;
  	height: auto;
}

.galeria .pie_img {
	color: white;
	text-align: center;
	font-size: 1rem;
  	letter-spacing: 0;
	text-transform: uppercase;
	width: 100%;
	margin: 0;
	padding: 10px;
	position: relative;
	z-index: 2;
  	background: rgba(0, 0, 0, 1);
}

.galeria p {
  	position: relative;
	top: 0;
  	width: 100%;
  	text-align: center;
  	color: white;
  	padding: 5px 0;
  	font-size: 0.8em;
  	letter-spacing: 2px;
  	z-index: 2;
	background-color: rgba(0, 0, 0, 0.5); /* Fondo translúcido */
}

.galeria .titulo {
	color: white;
  	position: relative;
	top: 0;
  	width: 100%;
  	text-align: center;
  	padding: 5px 0;
  	font-size: 1rem;
  	/* letter-spacing: 2px; */
  	z-index: 2;
	background-color: rgba(0, 0, 0, 1); /* Fondo translúcido */
}

/* Contador de imagenes */
.image-counter {
	color: #999999;
	font-size: 1rem;
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 1000;
    pointer-events: none; /* no bloquea clics */
}

.grid__overlay {
  	position: absolute;
	inset: 0; /* en lugar de height: 100% y top: 0 */
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.5);
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
}

.galeria:hover .grid__overlay {
  transform: translateY(0); /* Mostrar el overlay al hacer hover */
}

.grid__overlay button {
	line-height: normal;
 	background: none;
  	border: 1px solid #ffffff;
	border-radius: 0;
  	color: white;
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	padding: 10px 20px;
  	cursor: pointer;
}

.grid__overlay button:hover {
	line-height: normal;
    color: #D20000 !important;
    background-color: #FFFFFF;
    transition: all 0.3s ease-in-out;
}



@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}



.overlay {
	display: flex;
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100vw;
  	height: 100vh;
  	justify-content: center;
  	align-items: center;
	flex-direction: column;
  	z-index: 10000;
  	opacity: 0;
  	pointer-events: none;
  	transition: opacity 0.3s ease-in-out;
	background: rgba(0, 0, 0, 0.8);
}

.overlay__content {
    flex: 1;  /* área de la imagen/video */
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: calc(100% - 120px); /* deja espacio para miniaturas */
}

.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.overlay.closing {
	animation: fadeOut 0.6s ease-in-out;
}

/* .overlay__inner {
  	flex-direction: column;
	align-items: center;
  	position: relative;
	top: 0;
	left: 0;
	margin: 0 0 80px 0;
  	padding: 20px;
  	max-width: 100%;
	display: flex;
	background: #FFFFFF;	
	transform: scale(0.8);
	overflow: visible !important;
  	transition: transform 0.3s ease-in-out;
} */

.overlay__inner {
  	display: flex;
	max-width: 100%;
	height: auto;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 0 0 80px 0;
    padding: 20px;
    background: #FFFFFF;	
    overflow: visible !important;
    transition: transform 0.3s ease-in-out;
}

.overlay img {
  	width: 100%;
    /* max-width: 600px; */
    height: 75vh;
	max-height: 80vh;   /* antes tenías 80vh, pon el que quieras */
    display: block;
    margin: 0 auto;
  	object-fit: contain;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
}

/* Captura de artículo (más pequeña y cliqueable) */
.overlay img.preview-url {
    max-width: 100%;   /* puedes ajustar el tamaño */
    /* max-height: 70vh; */
    margin: 0 auto;
    border: 2px solid #fff; /* opcional: un marco blanco */
    border-radius: 8px;
    cursor: pointer; /* para indicar que es clickeable */
}

.url-overlay {
    position: absolute;
    top: 50%;           /* centrado vertical */
    left: 50%;          /* centrado horizontal */
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 8px;
    pointer-events: none; /* no bloquea el click en la imagen */
    transition: background 0.3s ease, transform 0.3s ease;
}

.preview-url:hover ~ .url-overlay {
    background: rgba(0,0,0,0.8);
    transform: translate(-50%, -50%) scale(1.05); /* efecto sutil en hover */
}


.overlay video,
.overlay iframe {	
    width: 37.5rem;
	max-width: 100%;
	max-height: 90vh; /* no más alto que la pantalla */
	aspect-ratio: 16 / 10; /* mantiene proporción */
    /* height: 50vh; */
	height: auto;
    display: block;
    margin: 0 auto;
  	object-fit: contain;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
}

/* Estilo especial SOLO para PDFs */
.overlay iframe.pdf-iframe {
    width: 50rem;         /* más ancho */
    height: 80vh;         /* más alto */
    aspect-ratio: auto;   /* rompe la restricción de proporción */
}

/* Solo PDFs: bajamos el marco blanco y el iframe */
.overlay .overlay__inner:has(iframe.pdf-iframe) {
    margin-top: 35px;   /* mueve todo el bloque hacia abajo */
    padding-top: 0;     /* evita padding extra arriba */
}

.overlay iframe.pdf-iframe {
    margin-top: 0;      /* el iframe en sí queda pegado al marco */
}




.overlay.open .overlay__inner {
  transform: scale(1); /* Escala normal */
  opacity: 1; /* Completamente visible */
}

.overlay.closing .overlay__inner {
  transform: scale(0.8); /* Reducir antes de cerrar */
  opacity: 0; /* Desvanecerse */
}


/* Pie de foto */
.caption {
    font-size: 1rem;
    color: #FFFFFF;
    text-align: justify;
	max-width: 37.5rem;
    margin: 0;
	padding: 15px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
    position: relative;
	bottom: 70px;
	z-index: 1;
    box-sizing: border-box;
    background-color: #000;
}

/* Caption normal */
.overlay .caption {
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-top: 8px;
    transition: color 0.3s ease;
}

/* Solo aplica hover cuando es URL */
.caption-link {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease, transform 0.2s ease;
}

.caption-link:hover {
    color: #FFEA00;
    transform: scale(1.05);
    cursor: pointer;
}

/* Opcional: efecto sobre la imagen preview del artículo */
.preview-url:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
    transition: all 0.3s ease;
}


/* Botón "prev" */
.overlay__inner .prev {
	width: 40px;
  	height: 40px;
  	position: absolute;
  	top: 50%;
  	left: calc(0% - 5px);
	transform: translateY(-50%);
  	background: url('../images/icons/prev_btn.svg') no-repeat center;
	background-size: contain;
  	border: none;
  	cursor: pointer;
  	z-index: 999 !important; /* Asegúrate de que sea visible sobre la imagen */
}

/* Botón "next" */
.overlay__inner .next {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  right: calc(0% - 5px);
  transform: translateY(-50%);
  background: url('../images/icons/next_btn.svg') no-repeat center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 999 !important; /* Asegúrate de que sea visible sobre la imagen */
}


/* Efecto hover para los botones */
.prev, .next {
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}

.prev:hover, .next:hover {
    filter: invert(1); /* Invierte los colores */
}

.prev svg, .next svg {
    fill: currentColor; /* Toma el color del botón */
}


.overlay__thumbnails {
	display: flex;
	width: 25rem;
    gap: 12px;
    justify-content: flex-start;
    padding: 15px 10px;
    overflow-x: auto;   
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
	
	opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.next,
.prev,
.overlay__thumbnails {
  transition: opacity 0.3s ease;
}

.overlay__thumbnails.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Miniaturas para ambos tipos de contenido */
.overlay__thumbnails img,
.overlay__thumbnails .video-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;   
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay__thumbnails img.active {
	border-color: #DDD101;
	
}

/* Efecto hover para ambos */
.overlay__thumbnails img:hover,
.overlay__thumbnails .video-thumbnail:hover {
	box-shadow: 0 0 10px #DDD101; /* Sombra al pasar el ratón */
    border-color: #DDD101;
    transform: scale(1.05);
}

.close_gallery {
    width: 40px;
    height: 40px;
    position: fixed;
    top: 20px;
    right: 20px;
    border: none;
    cursor: pointer;
    background: url('../images/icons/close_btn.svg') no-repeat center;
    background-size: contain; /* Ajusta la imagen dentro del botón */
    text-indent: -9999px; /* Oculta el texto visualmente */
    z-index: 10; /* Asegura que se muestre sobre la imagen */
	/* transform: translate(25%, -25%); Mueve el botón hacia afuera */
}


.close_gallery:hover {
	filter: invert(1);
    /* filter: invert(34%) sepia(98%) saturate(7125%) hue-rotate(0deg) brightness(105%) contrast(104%);
    Ajusta el filtro para obtener el color deseado (rojo en este caso) */
}




/**************************/
/* MEDIA QUERY */
/**************************/

@media (max-width: 768px) {
	
.container_galeria_fotografica {
	grid-template-columns: repeat(2, 1fr); /* Dos imágenes por fila */
  }
	
.galeria {
    height: 47vh; /* Aumentar altura para pantallas más pequeñas */
  }
	
.grid__overlay {
	transform: translateY(100%);
	}
	
.galeria:hover .grid__overlay {
	transform: translateY(0);
	}
	
	
.overlay__inner {
	margin: 0;
	padding: 10px;	
}
	
.overlay__inner img {
	max-height: 100vh !important;
}	
	
.overlay__thumbnails {
    position: absolute;
    bottom: 0;
    left: 50%;	
}	

.grid__overlay button {
    padding: 8px 16px; /* Reducir tamaño de botón */
    font-size: 0.8em;
  }

	
.overlay .overlay__inner img {
    max-height: 50vh; /* Reducir altura máxima en pantallas pequeñas */
  }
	
.overlay .thumbnail-container img {
    width: 60px; /* Miniaturas más pequeñas */
    height: 60px;
  }
	
.overlay__inner .prev { 
	left: -5px; 
	}
	
.overlay__inner .next { 
	right: -5px; 
	}
	
.close_gallery {
    top: 15px;
    right: 15px;
  }
		
/* Pie de foto */
.caption {
	font-size: 1.2rem;
	margin-top: 10px;
	padding: 10px;
	position: relative;
	bottom: 0;
}
	
}



/* En móviles, siempre visible */
@media (max-width: 767px) {
	
.galeria {
    height: auto !important;  /* altura automática */
    margin-bottom: 1rem;       /* espacio entre tarjetas */
  }
	
/* Si es un grid */
  .galeria-container {
    grid-template-columns: 1fr !important; /* una sola columna en móvil */
  }
	
.grid__overlay {
		transform: translateY(0);
	}
	
/* Si es flex */
  .galeria-container {
    flex-direction: column;
    align-items: center;
  }
	
.grid__overlay {
	background: rgba(0, 0, 0, 0);
}
	
.grid__overlay button {
	background: rgba(0, 0, 0, 0.4);
}
	
}



@media (max-width: 480px) {
	
.container_galeria_fotografica {
    grid-template-columns: repeat(2, 1fr); /* Dos imágenes por fila */
  }
	
.container_galeria_prensa {
  	grid-template-columns: repeat(2, 1fr);
}
	
.galeria {
	height: 30vh; /* Aumentar aún más para móviles */
	  
  }
	
.galeria .titulo {
  	font-size: 0.8rem;
  	letter-spacing:normal;
}
	
.overlay__thumbnails {
    position: absolute;
    bottom: 0;
    left: 50%;
}


.grid__overlay button {
    font-size: 0.7em; /* Reducir texto del botón */
  }

.overlay__inner {
	max-width: 90%;
	height: auto;
	margin: 0;
	padding: 10px;	
	transform: scale(01);
  	transition: transform 0.3s ease-in-out;
	overflow: hidden; /* Asegura que los elementos no sobresalgan */
	background-color: #FFFFFF;
}
	
.overlay__inner img {
	max-width: 100vh !important;
	max-height: 50vh !important;
}	
	
.overlay__inner .prev {
    left: calc(0% - 10px);
  }
	
.overlay__inner .next {
    right: calc(0% - 10px);
  }	
	
.close_gallery {
    top: 10px;
    right: 10px;
  }
	
/* Pie de foto */
.caption {
	font-size: 1rem;
	max-width: 90%;
	margin-top: 10px;
	padding: 10px;
	position: relative;
	bottom: 0;
}
	
video,
iframe {
        max-width: 100%; /* Asegurar que no desborde el contenedor */
    }

	
}