/* ============================================================
   GALERÍA — modal de fotos y videos. Va con galeria.js
============================================================ */
.galeria-fondo{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,12,18,.72); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:galeriaEntra .16s ease;
}
@keyframes galeriaEntra{ from{opacity:0} to{opacity:1} }
.galeria-caja{
  background:var(--panel); border-radius:var(--radio);
  max-width:900px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.galeria-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:2px solid var(--amarillo);
  position:sticky; top:0; background:var(--panel); z-index:1;
}
.galeria-cab h3{
  font-size:16px; font-weight:800; color:var(--azul);
  text-transform:uppercase; letter-spacing:.6px; margin:0;
}
.galeria-cerrar{
  background:none; border:none; font-size:26px; line-height:1;
  color:var(--gris); cursor:pointer; padding:0 4px;
}
.galeria-cerrar:hover{color:var(--rojo)}

.galeria-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px; padding:16px 20px 20px;
}
.g-pieza{margin:0}
.g-pieza img, .g-pieza video, .g-pieza iframe{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; border:1px solid var(--linea); display:block; background:#000;
}
.g-pieza iframe{aspect-ratio:16/9}
.g-video{grid-column:span 2}
@media (max-width:600px){ .g-video{grid-column:span 1} }
.g-pieza figcaption{font-size:12px; color:var(--gris); margin-top:5px}

/* Nombre de producto que abre la galería */
.con-media{
  cursor:pointer; border:none; background:none; font:inherit; color:inherit;
  text-align:left; padding:0; text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px;
}
.con-media:hover{color:var(--azul)}
.ico-media{font-size:11px; opacity:.7; margin-left:3px}