/* ============================================================
   Galería Entresocios — estilo monocromo cálido (fiel al tema)
   Tokens del tema: --es-paper --es-surface --es-ink --es-ink-soft
   --es-muted --es-line. Fallbacks por si el plugin corre suelto.
   ============================================================ */
.esg {
	--g-ink:    var(--es-ink, #141311);
	--g-soft:   var(--es-ink-soft, #454341);
	--g-muted:  var(--es-muted, #86847F);
	--g-line:   var(--es-line, #E7E6E3);
	--g-paper:  var(--es-paper, #FCFBFA);
	--g-surf:   var(--es-surface, #FFFFFF);
	--g-serif:  "Taviraj", Georgia, serif;
	--g-sans:   "Helvetica Neue", Helvetica, Arial, sans-serif;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(1.4rem, 4vw, 3rem) clamp(1rem, 4vw, 2.4rem) 4rem;
	font-family: var(--g-sans);
	color: var(--g-ink);
}

/* --- Cabecera --- */
.esg-head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.esg-eyebrow {
	font-size: .64rem; font-weight: 600; letter-spacing: .28em;
	text-transform: uppercase; color: var(--g-muted); margin: 0 0 .6rem;
}
.esg-title {
	font-family: var(--g-serif); font-weight: 500; letter-spacing: -.02em;
	font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.02; margin: 0;
}
.esg-sub {
	max-width: 46ch; margin: .8rem auto 0; color: var(--g-soft);
	font-size: .95rem; line-height: 1.5;
}

/* --- Barra de herramientas --- */
.esg-toolbar {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
	justify-content: flex-end;
	border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line);
	padding: .8rem 0; margin-bottom: 1.2rem;
}

/* --- Selector de eventos (desplegable multi-selección) --- */
.esg-evsel { position: relative; }
/* .esg ... para ganarle al kit de Elementor (.elementor-kit-5 button = 0,1,1) */
.esg .esg-evsel__btn {
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	font-family: var(--g-sans); font-size: .74rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
	background: var(--g-surf); border: 1px solid var(--g-line); color: var(--g-ink);
	padding: .55rem .95rem; border-radius: 999px; transition: border-color .18s;
}
.esg .esg-evsel__btn:hover { border-color: var(--g-ink); }
.esg .esg-evsel__btn[aria-expanded="true"] { border-color: var(--g-ink); }
.esg-evsel__count {
	background: var(--g-ink); color: #fff; font-size: .66rem; line-height: 1;
	min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px;
	display: inline-grid; place-items: center;
}
.esg-evsel__count[hidden] { display: none; }
.esg-evsel__chev { color: var(--g-muted); transition: transform .2s; }
.esg-evsel__btn[aria-expanded="true"] .esg-evsel__chev { transform: rotate(180deg); }

.esg-evsel__panel {
	position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
	width: min(320px, 84vw); max-height: 360px; display: flex; flex-direction: column;
	background: var(--g-surf); border: 1px solid var(--g-line); border-radius: 10px;
	box-shadow: 0 24px 48px -24px rgba(0,0,0,.35); overflow: hidden;
}
.esg-evsel__panel[hidden] { display: none; }
.esg-evsel__searchwrap {
	display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
	border-bottom: 1px solid var(--g-line); color: var(--g-muted);
}
.esg-evsel__search {
	flex: 1 1 auto; border: none; outline: none; background: none;
	font-family: var(--g-sans); font-size: .9rem; color: var(--g-ink);
}
.esg-evsel__search::placeholder { color: var(--g-muted); }
.esg-evsel__list { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; }
.esg-evsel__item {
	display: flex; align-items: center; gap: .6rem; cursor: pointer;
	padding: .5rem .6rem; border-radius: 7px; font-size: .9rem; color: var(--g-ink);
}
.esg-evsel__item:hover { background: var(--g-paper); }
.esg-evsel__check {
	flex: 0 0 auto; width: 17px; height: 17px; border-radius: 4px;
	border: 1.5px solid var(--g-muted); position: relative;
}
.esg-evsel__item[aria-selected="true"] .esg-evsel__check {
	background: var(--g-ink); border-color: var(--g-ink);
}
.esg-evsel__item[aria-selected="true"] .esg-evsel__check::after {
	content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.esg-evsel__name { flex: 1 1 auto; }
.esg-evsel__date { display: block; margin-top: 1px; color: var(--g-muted); font-size: .72rem; font-weight: 400; }
.esg-evsel__num { flex: 0 0 auto; color: var(--g-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.esg-evsel__empty { padding: 1rem; color: var(--g-muted); font-size: .85rem; text-align: center; }

/* --- Chips de filtros activos --- */
.esg-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.esg-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .78rem; background: var(--g-surf); border: 1px solid var(--g-line);
	padding: .34rem .3rem .34rem .7rem; border-radius: 999px; color: var(--g-ink);
}
.esg-chip b { font-weight: 600; }
.esg-chip--persona { padding-left: .3rem; }
.esg-chip__thumb { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; background: var(--g-line); }
.esg .esg-chip__x {
	border: none; background: var(--g-line); color: var(--g-soft);
	width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
	font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.esg .esg-chip__x:hover { background: var(--g-ink); color: #fff; }

.esg-count { color: var(--g-muted); font-size: .82rem; margin: 0 0 1rem; }

/* --- Grid uniforme --- */
.esg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: clamp(.4rem, 1.2vw, .8rem);
}
.esg .esg-tile {
	position: relative; display: block; aspect-ratio: 1 / 1;
	overflow: hidden; background: var(--g-line); border: none; padding: 0;
	cursor: pointer; border-radius: 3px; line-height: 0;
}
.esg-tile img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s;
	opacity: 0;
}
.esg-tile.is-loaded img { opacity: 1; }
.esg-tile:hover img { transform: scale(1.045); }
.esg-tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20,19,17,.28), transparent 45%);
	opacity: 0; transition: opacity .25s;
}
.esg-tile:hover::after { opacity: 1; }
.esg-tile__faces {
	position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
	pointer-events: none;
}
.esg-tile:hover .esg-tile__faces { opacity: 1; }
.esg-tile__face {
	position: absolute; border: 1.5px solid rgba(255,255,255,.85);
	border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* --- Estado vacío / carga --- */
.esg-empty { text-align: center; padding: 3rem 1rem; color: var(--g-soft); }
.esg .esg-clear-all {
	margin-top: 1rem; background: var(--g-ink); color: #fff; border: none;
	padding: .7rem 1.4rem; border-radius: 999px; cursor: pointer; line-height: 1.2;
	font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.esg-sentinel { height: 1px; }
.esg-loading { display: flex; justify-content: center; padding: 2rem; }
/* el atributo hidden debe ganarle al display:flex de arriba */
.esg-loading[hidden], .esg-empty[hidden] { display: none; }
.esg-spinner {
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid var(--g-line); border-top-color: var(--g-ink);
	animation: esg-spin .7s linear infinite;
}
@keyframes esg-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Lightbox
   ============================================================ */
.esg-lb {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(16,15,14,.94);
	display: flex; align-items: center; justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.esg-lb[hidden] { display: none; }
.esg-lb__stage {
	margin: 0; max-width: 100%; max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.esg-lb__imgwrap {
	position: relative; line-height: 0; max-width: 100%;
	max-height: 82vh; display: inline-block;
}
.esg-lb__img {
	max-width: 100%; max-height: 82vh; width: auto; height: auto;
	display: block; border-radius: 3px;
}
.esg-lb__faces { position: absolute; inset: 0; }
.esg-lb .esg-lb__face {
	position: absolute; border: 2px solid rgba(255,255,255,.55);
	border-radius: 4px; background: rgba(255,255,255,0);
	cursor: pointer; padding: 0; line-height: 0; transition: all .18s;
}
.esg-lb__face:hover, .esg-lb__face:focus-visible {
	border-color: #fff; background: rgba(255,255,255,.12);
	box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 20px -6px rgba(0,0,0,.6);
	outline: none;
}
.esg-lb .esg-lb__face.is-active {
	border-color: #7CFC9E; border-style: dashed;
	box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.esg-lb__face .esg-lb__tag {
	position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px);
	background: #fff; color: var(--es-ink, #141311);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: .68rem; font-weight: 600; white-space: nowrap;
	padding: .22rem .5rem; border-radius: 999px; opacity: 0; pointer-events: none;
	transition: opacity .15s; box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}
.esg-lb__face:hover .esg-lb__tag, .esg-lb__face:focus-visible .esg-lb__tag { opacity: 1; }

.esg-lb__cap {
	color: rgba(255,255,255,.72);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: .8rem; letter-spacing: .02em; text-align: center;
}
.esg-lb__cap b { color: #fff; font-weight: 600; }
.esg-lb .esg-lb__x, .esg-lb .esg-lb__nav {
	position: absolute; z-index: 10; background: rgba(255,255,255,.1); border: none;
	color: #fff; cursor: pointer; border-radius: 50%; padding: 0;
	width: 46px; height: 46px; font-size: 26px; line-height: 1;
	display: grid; place-items: center; transition: background .18s;
}
.esg-lb .esg-lb__x:hover, .esg-lb .esg-lb__nav:hover { background: rgba(255,255,255,.24); }
.esg-lb__x { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.esg-lb__nav { top: 50%; transform: translateY(-50%); font-size: 34px; }
.esg-lb__prev { left: clamp(.4rem, 2vw, 1.4rem); }
.esg-lb__next { right: clamp(.4rem, 2vw, 1.4rem); }
.esg-lb__nav[disabled] { opacity: .25; cursor: default; }

@media (max-width: 640px) {
	.esg-grid { grid-template-columns: repeat(2, 1fr); }
	.esg-toolbar { justify-content: flex-start; }
	.esg-evsel { width: 100%; }
	.esg .esg-evsel__btn { width: 100%; justify-content: space-between; }
	.esg-evsel__panel { width: 100%; }
	.esg-lb .esg-lb__nav { width: 40px; height: 40px; }
	/* iOS hace zoom al enfocar un input con font-size < 16px. Forzamos 16px
	   en el campo de filtro para evitar ese zoom al abrir el desplegable. */
	.esg-evsel__search { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.esg-tile img, .esg-tile::after, .esg-spinner { transition: none; animation: none; }
}