/* Galería de modelos en fichas de servicio (2026-10-21). Rejilla con todas las fotos visibles + lightbox <dialog>. */
.svc-gallery{margin-top:2rem}
.svc-gallery__lead{max-width:44rem}
.svc-gallery__grid{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:520px){.svc-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.svc-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* En pantallas anchas la galería sale un poco del ancho del texto para que las fotos se vean mejor. */
@media (min-width:1200px){.svc-gallery{margin-inline:calc(50% - 34rem)}}
.service-brief__body .svc-gallery__grid li{margin:0}
.svc-gallery__item{margin:0;height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.svc-gallery__item:hover{border-color:#cbd5e1;box-shadow:0 6px 18px rgba(15,23,42,.08)}
.service-brief__body a.svc-gallery__link{position:relative;display:block;color:inherit;cursor:zoom-in;border-radius:0}
.svc-gallery__link picture,.svc-gallery__link img{display:block;width:100%;height:auto;aspect-ratio:1280/856;object-fit:cover;background:#f1f5f9;margin:0;border-radius:0}
.svc-gallery__link:focus-visible{outline:3px solid #0d6efd;outline-offset:-3px}
.svc-gallery__zoom{position:absolute;top:.6rem;right:.6rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;opacity:0;transform:scale(.9);transition:opacity .15s ease,transform .15s ease}
.svc-gallery__link:hover .svc-gallery__zoom,.svc-gallery__link:focus-visible .svc-gallery__zoom{opacity:1;transform:none}
@media (hover:none){.svc-gallery__zoom{opacity:1;transform:none}}
.svc-gallery__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.svc-gallery__item figcaption{padding:.7rem .85rem .85rem;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:.2rem}
.svc-gallery__name{font-size:1rem;color:#0f172a;line-height:1.3}
.svc-gallery__text{font-size:.9rem;color:#475569;line-height:1.45}

/* Vista ampliada (2026-10-21b): el <dialog> ocupa toda la pantalla y hace de fondo oscuro, así el
   fundido de apertura/cierre se anima en el propio dialog. Las fotos van en un "escenario" de dos capas
   para el deslizamiento con fundido cruzado (service-gallery.js, Web Animations API). */
.svc-lightbox{padding:0;border:0;margin:0;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(2,6,23,.95);color:#fff;overflow:hidden;overscroll-behavior:contain}
.svc-lightbox::backdrop{background:transparent}
.svc-lightbox__frame{position:relative;box-sizing:border-box;height:100%;display:flex;align-items:center;justify-content:center;padding:3.5rem 3.75rem 1rem}
.svc-lightbox__figure{margin:0;width:min(68rem,100%,calc((100dvh - 8.5rem) * 1.4953))}
.svc-lightbox__stage{position:relative;width:100%;aspect-ratio:1280/856;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.svc-lightbox__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;border-radius:8px;background:#0f172a;will-change:transform,opacity;-webkit-user-drag:none}
.svc-lightbox__caption{margin-top:.75rem;text-align:center;font-size:.95rem;line-height:1.45;color:#e2e8f0;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .6rem;min-height:2.8em}
.svc-lightbox__caption strong{color:#fff}
.svc-lightbox__count{color:#94a3b8;font-variant-numeric:tabular-nums}
.svc-lightbox__btn{position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .15s ease}
.svc-lightbox__btn:hover{background:#0d6efd}
.svc-lightbox__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.svc-lightbox__btn--close{top:.75rem;right:.75rem}
.svc-lightbox__btn--prev,.svc-lightbox__btn--next{top:calc(50% - 1.375rem)}
.svc-lightbox__btn--prev{left:.6rem}
.svc-lightbox__btn--next{right:.6rem}
@media (max-width:640px){
  .svc-lightbox__frame{padding:3.75rem .5rem 5.5rem}
  .svc-lightbox__figure{width:100%}
  .svc-lightbox__btn--prev,.svc-lightbox__btn--next{top:auto;bottom:1rem}
  .svc-lightbox__btn--prev{left:calc(50% - 3.25rem)}
  .svc-lightbox__btn--next{right:calc(50% - 3.25rem)}
}
@media (prefers-reduced-motion:reduce){.svc-gallery__item,.svc-gallery__zoom,.svc-lightbox__btn{transition:none}}
