/* ===================================================================
   EVENTIA · Galería (galeria.html)
=================================================================== */

.gallery-filters{
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.filter-chip{
  padding: 0.55em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--step-small);
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease);
}
.filter-chip:hover{ border-color: var(--dorado-500); color: var(--ink); }
.filter-chip.is-active{ background: var(--cafe-900); border-color: var(--cafe-900); color: var(--nude-50); }

.gallery-grid{
  columns: 4 260px;
  column-gap: var(--sp-3);
}
.gallery-item{
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  border: 1px solid var(--line);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.gallery-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.gallery-item.is-hidden{ display: none; }

.gallery-art{
  position: relative;
  aspect-ratio: var(--ar, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery-art .circle{ position: absolute; border-radius: 50%; }
.gallery-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-3);
  background: linear-gradient(0deg, rgba(58,42,31,0.72), transparent);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gallery-item:hover .gallery-caption{ opacity: 1; transform: translateY(0); }
.gallery-caption strong{ display: block; font-size: var(--step-small); font-family: var(--font-body); font-weight: 500; }
.gallery-caption span{ font-size: 0.72rem; opacity: 0.85; text-transform: uppercase; letter-spacing: var(--tracking-mid); }

@media (max-width: 760px){
  .gallery-grid{ columns: 2 160px; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(58, 42, 31, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
  padding: var(--sp-4);
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; }
.lightbox-inner{
  background: var(--nude-50);
  border-radius: var(--radius-m);
  max-width: 560px;
  width: 100%;
  overflow: hidden;
  transform: scale(0.94);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox-inner{ transform: scale(1); }
.lightbox-art{ aspect-ratio: 4/3; position: relative; overflow: hidden; }
.lightbox-body{ padding: var(--sp-4); }
.lightbox-body h3{ font-size: var(--step-h4); }
.lightbox-body p{ color: var(--ink-soft); margin-top: var(--sp-2); font-size: var(--step-small); }
.lightbox-close{
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 1.2rem;
  z-index: 2;
}

.gallery-note{
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-m);
  color: var(--ink-soft);
  font-size: var(--step-small);
  background: var(--bg-alt);
}