/* ===== 06 · Proyectos · A «Rejilla a sangre» (elegida en la ronda 11; antes G) =====
   Cuadrícula perfecta de 4 columnas a todo el ancho, fotos 4:3 con 3 px de junta (como .p4 de unicales-preview).
   El texto aparece solo al pasar el ratón o con el foco; en táctil (hover:none) se ve un pie discreto abajo. */
.work-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:clamp(40px,4.4vw,72px);padding-top:clamp(20px,2vw,28px);border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.work-g__grid{list-style:none;margin:0;padding:0;display:grid}
.work-g__a{position:relative;display:block;overflow:hidden;isolation:isolate;color:#fff;background:var(--u-night)}
.work-g__a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .5s}
.work-g__t{position:absolute;z-index:2;display:flex;flex-direction:column;gap:.35rem}
.work-g__t .sx-meta{color:rgba(255,255,255,.8)}
.work-g__h{font-family:var(--f-head);font-weight:var(--w-display);letter-spacing:-.03em;line-height:1.05}
.work-g__a:focus-visible{outline:3px solid var(--u-blue);outline-offset:-3px}
.work-g .work-foot{margin-top:clamp(28px,3vw,48px)}
/* ---------- A · Rejilla a sangre (antes G) ---------- */
.work-g__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.work-g__a{aspect-ratio:4/3}
.work-g__a img{transform:scale(1.04)}
.work-g__a::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,11,26,.95) 0%,rgba(8,11,26,.55) 45%,rgba(8,11,26,0) 100%);opacity:0;transition:opacity .5s}
.work-g__t{left:clamp(14px,1.6vw,24px);right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,22px);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .55s var(--ease)}
.work-g__h{font-size:clamp(1rem,1.5vw,1.3rem)}
.work-g__ar{font-family:var(--f-head);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--u-blue);margin-top:.3rem}
.work-g__a:hover img,.work-g__a:focus-visible img{transform:scale(1.09)}
.work-g__a:hover::after,.work-g__a:focus-visible::after,.work-g__a:hover .work-g__t,.work-g__a:focus-visible .work-g__t{opacity:1;transform:none}
@media (max-width:760px){
  .work-g__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Táctil: sin hover → pie discreto siempre visible */
@media (hover:none){
  .work-g__t{opacity:1;transform:none}
  .work-g__a::after{opacity:1;background:linear-gradient(to top,rgba(8,11,26,.8),rgba(8,11,26,0) 55%)}
  .work-g__ar,.work-g__t .sx-meta{display:none}
  .work-g__h{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .work-g__a img,.work-g__t,.work-g__a::after{transition:none}
  .work-g__a:hover img,.work-g__a:focus-visible img{transform:none}
}