/* AGE · Galería — mismo lenguaje visual que la credencial y el panel del
   evento: tinta casi negra, acento dorado, serif con moderación.
   Todo va acotado bajo .agg para no chocar con el tema ni con Elementor. */

.agg{
	--agg-ink:#14131A;
	--agg-soft:#6b6760;
	--agg-line:#e3ddd2;
	--agg-paper:#fbf9f4;
	--agg-gold:#F4BD4D;
	--agg-gold-deep:#c8901f;
	/* --agg-max llega del shortcode (columnas="…"); --agg-cols lo bajan las
	   escalas de abajo. Van separados porque un estilo en línea le ganaría
	   a cualquier @media y el celular quedaría con 4 columnas. */
	--agg-cols:var(--agg-max,4);
	--agg-gap:18px;
	--agg-serif:Georgia,"Times New Roman",serif;

	font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	color:var(--agg-ink);
	-webkit-tap-highlight-color:transparent;
}
.agg *{ box-sizing:border-box; }
.agg [hidden]{ display:none !important; }

/* ---------- Cada galería: categoría como antetítulo + nombre como título ---------- */

.agg__galeria + .agg__galeria{ margin-top:clamp(48px,6vw,80px); }
.agg__galeria.is-oculto{ display:none; }
.agg__galeria.is-entrando{ animation:agg-entrar .45s cubic-bezier(.2,.7,.3,1) both; }

.agg__head{ margin:0 0 26px; }

.agg__antetitulo{
	display:flex;
	align-items:center;
	gap:14px;
	margin:0;
	font-family:var(--agg-serif);
	font-style:italic;
	font-size:15px;
	letter-spacing:.01em;
	color:var(--agg-gold-deep);
}
.agg__antetitulo::before{
	content:"";
	width:54px;
	height:1px;
	flex:none;
	background:var(--agg-gold);
}

.agg__titulo{
	margin:10px 0 0;
	font-family:var(--agg-serif);
	font-size:clamp(27px,3.4vw,40px);
	font-weight:600;
	line-height:1.15;
	letter-spacing:.005em;
	color:var(--agg-ink);
	text-wrap:balance;
}

/* ---------- Filtro por categoría, arriba de todas las galerías ---------- */

.agg__filtros{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	margin:0 0 clamp(32px,4vw,48px);
}

.agg__filtro{
	position:relative;
	margin:0;
	padding:7px 18px;
	border:0;
	border-radius:0;
	background:none;
	box-shadow:none;
	font:inherit;
	font-size:13.5px;
	line-height:1.4;
	letter-spacing:.01em;
	color:var(--agg-soft);
	cursor:pointer;
	transition:color .2s ease;
}
.agg__filtro + .agg__filtro{ border-left:1px solid var(--agg-line); }
.agg__filtro:hover{ color:var(--agg-ink); background:none; }
.agg__filtro[aria-pressed="true"]{ color:var(--agg-gold-deep); }
.agg__filtro[aria-pressed="true"]::after{
	content:"";
	position:absolute;
	left:18px;
	right:18px;
	bottom:-1px;
	height:2px;
	background:var(--agg-gold);
}
.agg__filtro:focus-visible{ outline:2px solid var(--agg-gold-deep); outline-offset:2px; }

/* ---------- Mosaico ---------- */

/* Sin JS esto ya es una grilla pareja y correcta. El mosaico se activa
   encima, cuando el JS confirma que puede medir las piezas. */
.agg__grid{
	display:grid;
	grid-template-columns:repeat(var(--agg-cols),1fr);
	column-gap:var(--agg-gap);
	row-gap:var(--agg-gap);
	align-items:start;
}
.agg__grid--mosaico{
	/* Unidad menuda: el JS traduce la altura real de cada pieza a un número de
	   tramos, y así el mosaico encaja sin huecos aunque cambien las proporciones. */
	grid-auto-rows:8px;
	grid-auto-flow:row dense;
}

.agg__item{
	position:relative;
	display:block;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	background:var(--agg-paper);
	box-shadow:none;
	overflow:hidden;
	cursor:zoom-in;
	aspect-ratio:16/9;
	/* Sin esto el grid estira la pieza hasta el alto de la fila y la medición
	   del mosaico devolvería el alto de la pista, no el de la foto. */
	align-self:start;
}
.agg__item:focus-visible{ outline:2px solid var(--agg-gold-deep); outline-offset:3px; }

/* !important obligado: Elementor inyecta ".elementor img{height:auto;max-width:100%}"
   con más especificidad que una clase suelta y deforma las fotos. */
.agg__img{
	display:block !important;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	object-fit:cover !important;
	transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.agg__item:hover .agg__img,
.agg__item:focus-visible .agg__img{ transform:scale(1.045); }

/* El plato blanco de la referencia: entra desde el borde inferior con un
   filete dorado y el nombre del álbum. */
.agg__plato{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	gap:11px;
	padding:13px 16px;
	background:#fff;
	text-align:left;
	transform:translateY(101%);
	transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.agg__plato::before{
	content:"";
	width:22px;
	height:1px;
	flex:none;
	background:var(--agg-gold);
}
.agg__item:hover .agg__plato,
.agg__item:focus-visible .agg__plato{ transform:translateY(0); }

.agg__album{
	font-size:12px;
	font-weight:600;
	letter-spacing:.07em;
	text-transform:uppercase;
	color:var(--agg-ink);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* En pantallas táctiles no hay hover: el plato se queda a la vista. */
@media (hover:none){
	.agg__plato{ transform:none; }
}

@keyframes agg-entrar{
	from{ opacity:0; transform:translateY(10px); }
	to{ opacity:1; transform:none; }
}

.agg__vacio{
	margin:28px 0 0;
	text-align:center;
	font-size:14px;
	color:var(--agg-soft);
}

.agg-aviso{
	margin:0;
	padding:16px 18px;
	border:1px dashed #e3ddd2;
	border-radius:10px;
	background:#fbf9f4;
	font-size:14px;
	color:#6b6760;
}

/* ---------- Visor a pantalla completa ---------- */

.agg-visor{
	position:fixed;
	inset:0;
	z-index:2147483000;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:16px;
	padding:56px 20px 28px;
	background:rgba(12,11,16,.94);
	color:#fff;
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.agg-visor[hidden]{ display:none !important; }
.agg-visor__lienzo{
	display:flex;
	align-items:center;
	justify-content:center;
	max-width:min(1400px,100%);
	max-height:78vh;
	min-height:0;
	flex:1;
}
.agg-visor__img{
	display:block !important;
	max-width:100% !important;
	max-height:78vh !important;
	width:auto !important;
	height:auto !important;
	object-fit:contain !important;
	box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.agg-visor__pie{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	justify-content:center;
	text-align:center;
	max-width:640px;
}
.agg-visor__album{
	font-size:12px;
	font-weight:600;
	letter-spacing:.07em;
	text-transform:uppercase;
	color:var(--agg-gold);
}
.agg-visor__texto{ font-size:14px; color:#cfc9c3; }
.agg-visor__contador{
	font-size:12.5px;
	color:#8a8377;
	font-variant-numeric:tabular-nums;
}

.agg-visor__btn{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	color:#fff;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	transition:background .2s ease;
}
.agg-visor__btn:hover{ background:var(--agg-gold-deep); }
.agg-visor__btn:focus-visible{ outline:2px solid var(--agg-gold); outline-offset:3px; }
.agg-visor__btn--cerrar{ top:16px; right:18px; }
.agg-visor__btn--prev{ left:18px; top:50%; transform:translateY(-50%); }
.agg-visor__btn--next{ right:18px; top:50%; transform:translateY(-50%); }
.agg-visor__btn[disabled]{ opacity:.25; pointer-events:none; }

/* ---------- Escalas ---------- */

@media (max-width:1200px){ .agg{ --agg-cols:3; } }
@media (max-width:900px){
	.agg{ --agg-cols:2; --agg-gap:14px; }
	.agg__filtros{ justify-content:flex-start; }
}
@media (max-width:560px){
	.agg{ --agg-cols:1; }
	.agg__filtros{ margin-top:4px; }
	.agg__filtro{ padding:6px 12px; }
	.agg__filtro[aria-pressed="true"]::after{ left:12px; right:12px; }
	.agg-visor__btn--prev{ left:8px; }
	.agg-visor__btn--next{ right:8px; }
}

@media (prefers-reduced-motion:reduce){
	.agg *,
	.agg-visor *{ transition:none !important; animation:none !important; }
}