/* ═══ Galería de proyectos: filtros + mosaico a sangre ═══ */

/* En página única los filtros NO son pegajosos: se quedarían flotando
   sobre las secciones siguientes al pasar de largo la galería. */
.filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:12px var(--gut) 14px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;font-family:var(--head);font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  color:var(--text-2);white-space:nowrap;transition:.2s}
@media (hover:hover){.filters button:hover{border-color:var(--text-2);color:var(--text)}}
.filters button.on{background:var(--yel);border-color:var(--yel);color:var(--ink)}
.filters button b{font-weight:500;opacity:.6;margin-left:6px}

/* mosaico a sangre: sin márgenes laterales, las fotos mandan */
.gal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px}
.gal__item{position:relative;display:block;overflow:hidden;background:var(--bg-3);
  text-align:left;width:100%;padding:0;border:0}
.gal__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;
  transition:transform .7s cubic-bezier(.2,0,.2,1)}
.gal__item.tall img{aspect-ratio:3/4}
.gal__item.wide{grid-column:span 2}
.gal__item.wide img{aspect-ratio:16/10}
@media (hover:hover){.gal__item:hover img{transform:scale(1.05)}}

/* El pie va ENCIMA de la foto, no debajo: así el mosaico no se rompe.
   Aquí sí manda el velo oscuro aunque el sitio sea blanco — es el único
   modo de que el rótulo se lea sobre cualquier fotografía. */
.gal__cap{position:absolute;inset:auto 0 0 0;display:grid;gap:3px;padding:32px 11px 10px;color:#fff;
  background:linear-gradient(transparent,rgba(10,13,17,.5) 45%,rgba(10,13,17,.9));pointer-events:none}
.gal__cap b{font-family:var(--head);font-size:.84rem;font-weight:600;line-height:1.25}
.gal__cap span{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#D2D6DB}

.tag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 8px;border-radius:4px;background:rgba(255,255,255,.94);
  color:var(--text);pointer-events:none}
.tag.render{background:var(--blue);color:#fff}
.tag.proceso{background:var(--yel);color:var(--ink)}
/* En las fichas de comparador sobra: los propios rótulos Antes/Después ya
   lo dicen, y además se pisaban en la misma esquina. */
.gal__item .tag.ad{display:none}

/* comparador embebido en el mosaico */
.gal__item .comp{aspect-ratio:16/10}
.gal__item .comp__knob{width:38px;height:38px}
.gal__item .comp__knob svg{width:15px;height:15px}
.gal__item .comp__lbl{font-size:10px;padding:4px 7px;top:8px}
.gal__item .comp__lbl.l{left:8px}.gal__item .comp__lbl.r{right:8px}

.gal__empty{grid-column:span 2;padding:48px 0;text-align:center;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

@media (min-width:900px){
  .filters{padding-inline:48px;justify-content:center}
  .gal{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gal__item.wide{grid-column:span 2}
  .gal__cap b{font-size:.94rem}
  .gal__empty{grid-column:span 4}
}