/* ===== AO Masonry Gallery (imágenes + videos) ===== */
:root{
  --g-gap: 14px;
  --g-card: #0f172a;
  --g-border:#223254;
  --g-radius:16px;
  --g-shadow: 0 10px 28px rgba(2,6,23,.28);
  --g-title:#e2e8f0;
  --g-muted:#cfe5ff;
}

.ao-gallery{
  /* Use a responsive width: 95% on small screens, 75% on wider viewports */
  width:75%;
  max-width:75%;
  margin:0 auto;
  padding:24px 20px;
}

@media (min-width: 900px){
  .ao-gallery{ width:75%; }
}
.ao-g-title{margin:0 0 14px;font-size:1.8rem;font-weight:1200;color:var(--g-title)}
.ao-g-note{margin:0 0 18px;color:var(--g-muted)}

.ao-g-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
  grid-auto-rows: 8px;         /* altura base para el masonry */
  gap: var(--g-gap);
}

.ao-g-item{
  position:relative; display:block;
  border-radius:var(--g-radius);
  overflow:hidden;
  background:var(--g-card);
  border:1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  transform: translateZ(0);
}
.ao-g-item img,
.ao-g-item video{
  width:100%; height:auto; display:block;
  object-fit:cover;
}
.ao-g-item video{ aspect-ratio: 16/9; background:#0b1220 }

/* Hover sutil */
.ao-g-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.25),transparent);
  opacity:0; transition:opacity .15s ease;
}
.ao-g-item:hover::after{ opacity:1 }

/* ===== Lightbox ===== */
.ao-g-lightbox{
  position:fixed; inset:0; z-index:3000;
  background:rgba(3,10,25,.85);
  display:none; place-items:center; padding:22px;
}
.ao-g-lightbox[aria-hidden="false"]{ display:grid }
.ao-g-stage{
  width:min(1200px,92vw); height:min(84vh,800px);
  display:grid; place-items:center;
}
.ao-g-stage img, .ao-g-stage video{
  max-width:100%; max-height:100%;
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.45);
  background:#000;
}
.ao-g-close{
  position:absolute; top:16px; right:16px;
  width:42px; height:42px; border-radius:999px;
  border:1px solid #223254; background:#0e182f; color:#e2e8f0;
  cursor:pointer; font-size:18px;
}
.ao-g-close:hover{ background:#132241 }

/* Opcional: “etiquetas” pequeñas en la esquina */
.ao-g-badge{
  position:absolute; left:10px; top:10px;
  background:rgba(0,0,0,.45); color:#e2e8f0;
  padding:2px 8px; border-radius:999px; font-size:.8rem;
}