/* ===========================
       GALERÍA DE NOTICIAS
   =========================== */

.galeria, .galeria_2 {
  display: grid;
  gap: 10px;
  padding: 0px;
  justify-items:center;
  align-items:start;
}

.item {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  border: 1px solid #f5e47b;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s;
  scroll-snap-align: start;
}

.item:hover {
  transform: scale(1);
  z-index: 10;
  box-shadow: 0 0 10px #f5e47b;
}

.item img {
  width: calc(100% - 4px);
  aspect-ratio: 16 / 9; /* mantiene 16:9 */
  object-fit: cover;    /* recorta sin deformar */
  display: block;
  border: 1px solid #f5e47b;
  margin: 2px;
  border-radius: 4px;
}

/* TARJETA SELECCIONADA MARCO DORADO */
.miniatura, .item {
  position: relative;
}

.miniatura:active::after, .item:active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid gold;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: inset 0 0 8px rgba(245, 228, 123, 1),  0 0 6px rgba(188, 136, 61, 0.9);
}


/* TEXTO BLANCO EN NOTICIAS */
.titulo {
  color: #ffffff !important;
}

/* Por si los items de ultimas noticias también tienen texto */
.item, .miniatura {
  color: #ffffff;
  background: rgba(18, 18, 18, 0.6);
}

/* Si hay textos dentro de .item (ej: span, p, etc.) */
.item *, .miniatura * {
  color: #ffffff;
}

/* Aplica el estilo de .miniatura a cada noticia dentro de la galería horizontal */
.galeria > a, .galeria2 > a {
  flex: 0 0 auto;
  max-width: 275px;
  height: 100%;
  width: 100%;
  border: 1px solid #f5e47b;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s;
  overflow: hidden;
  color: #ffffff;
  background: rgba(18,18,18,.6);
}

.galeria > a:hover, .galeria2 > a:hover {
  transform: scale(1);
  z-index: 10;
  box-shadow: 0 0 10px #f5e47b;
}

.galeria > a img, .galeria2 > a img {
  width: calc(100% - 4px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid #f5e47b;
  margin: 2px;
  border-radius: 4px;
}

.galeria > a span, .galeria2 > a span {
  color: #ffffff;
}

/* --- DISENIO GRANDE 1280px PC 100% --- */
@media (min-width: 1025px) and (max-width: 1280px){

    .galeria{
		font-size: 13px;
        grid-template-columns:repeat(5, 1fr);
		grid-template-rows: repeat(3, auto);
    }

    .galeria > a, .galeria_2 > a{
		height: 100%;
		width: 100%;
		max-width: 275px;
    }
	
	.galeria_2 {
		display: grid;
		font-size: 13px;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(3, auto);
		justify-items: center;
		align-items: center;
	}
	
	.galeria_2 > a:nth-child(n+16) {
		display: none !important;
	}
	
}

/* --- DISENIO NORMAL 1024 PC 100% - 175% --- */
@media (min-width: 1024px) {

    .galeria{
		font-size: 13px;
        grid-template-columns:repeat(5, 1fr);
		grid-template-rows: repeat(3, auto);
    }

    .galeria > a, .galeria_2 > a{
		height: 100%;
		width: 100%;
		max-width: 275px;
    }
	
	.galeria_2 {
		display: grid;
		font-size: 13px;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(3, auto);
		justify-items: center;
		align-items: center;
	}
	
	.galeria_2 > a:nth-child(n+16) {
		display: none !important;
	}
	
}

/* --- DISENIO TABLET NORMAL 200% --- */
@media (min-width: 769px) and (max-width: 1023px) {

    .galeria{
		font-size: 14px;
        grid-template-columns:repeat(4, 1fr);
		grid-template-rows: repeat(5, auto);
    }

    .galeria > a, .galeria_2 > a{
		height: 100%;
		width: 100%;
		max-width: 310px;
    }
	
	.galeria_2 {
		display: grid;
		font-size: 14px;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(5, auto);
		justify-items: center;
		align-items: center;
	}
	
	.galeria_2 > a:nth-child(n+17) {
		display: none !important;
	}
	
}

/* --- ZOOM 300% APROX --- */
@media screen and (min-width: 501px) and (max-width: 768px) {

    .galeria{
		font-size: 12px;
        grid-template-columns:repeat(3, 1fr);
		grid-template-rows: repeat(7, auto);
    }

    .galeria > a, .galeria_2 > a{
		height: 100%;
		max-height: none;
		width: 100%;
    }
	
	.galeria_2 {
		display: grid;
		font-size: 12px;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(7, auto);
		justify-items: center;
		align-items: center;
	}
	
	.galeria_2 > a:nth-child(n+16) {
		display: none !important;
	}
	
}

/* --- ZOOM 400% - 500% CELULARES --- */
@media screen and (min-width: 351px) and (max-width: 500px) {

    .galeria{
		font-size: 10px;
        grid-template-columns:repeat(2, 1fr);
		grid-template-rows: repeat(7, auto);
    }

    .galeria > a, .galeria_2 > a{
		height: 100%;
		max-height: 200px;
    }
	
	.galeria_2 {
		display: grid;
		font-size: 10px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(7, auto);
		justify-items: center;
		align-items: center;
	}
	
	.galeria_2 > a:nth-child(n+15) {
		display: none !important;
	}
	
}

/* --- ZOOM 600% O CELULARES PEQUENIOS --- */
@media screen and (max-width: 350px) {

    .galeria{
		font-size: 8px;
        grid-template-columns:repeat(1, 1fr);
    }

    .galeria > a, .galeria_2 > a{
		height: 100%;
		max-height: 180px;
    }
	
	.galeria_2 {
		display: grid;
		font-size: 8px;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: auto;
		justify-items: center;
		align-items: center;
	}
	
	.galeria_2 > a:nth-child(n+10) {
		display: none !important;
	}
	
}