/* Galería mosaico */
.portfolio-grid.gx-grid{display:block;columns:3 280px;column-gap:1rem;grid-template-columns:none}
.gx-item{position:relative;display:block;width:100%;margin:0 0 1rem;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--surface);cursor:zoom-in;break-inside:avoid;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease) var(--d),transform .7s var(--ease) var(--d)}
.gx-item.in{opacity:1;transform:none}
.gx-item img{display:block;width:100%;height:auto;transition:transform .8s var(--ease),filter .5s}
.gx-video img{aspect-ratio:16/9;object-fit:cover}
.gx-item:hover img,.gx-item:focus-visible img{transform:scale(1.06);filter:brightness(.75)}
.gx-cap{position:absolute;inset:auto 0 0 0;display:grid;gap:.2rem;padding:2.5rem 1rem .9rem;text-align:left;color:#fff;background:linear-gradient(0deg,#050810e6,transparent);opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.gx-cap small{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:#83b7f0}.gx-cap b{font-size:.95rem;font-weight:600}
.gx-item:hover .gx-cap,.gx-item:focus-visible .gx-cap,.gx-video .gx-cap{opacity:1;transform:none}
.gx-play{position:absolute;left:50%;top:45%;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;border-radius:50%;background:#3276c9e6;box-shadow:0 0 0 8px #3276c944;transition:transform .3s var(--ease)}
.gx-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border:.7rem solid transparent;border-left:1.1rem solid #fff;border-right:0}
.gx-item:hover .gx-play{transform:scale(1.12)}
.gx-item:focus-visible{outline:2px solid #83b7f0;outline-offset:3px}
@media (hover:none){.gx-cap{opacity:1;transform:none}}
@media (max-width:600px){.portfolio-grid.gx-grid{columns:2;column-gap:.6rem}.gx-item{margin-bottom:.6rem;border-radius:10px}.gx-cap{padding:1.5rem .6rem .5rem}.gx-cap b{font-size:.78rem}.gx-play{width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem}}
/* Visor */
.gx-box{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:4rem 1fr 4rem;grid-template-rows:1fr auto;align-items:center;background:#03060cf2;backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.gx-box.on{opacity:1}
.gx-stage{grid-column:2;height:100%;display:grid;place-items:center;padding:3.5rem 0 1rem;min-height:0}
.gx-stage img,.gx-stage iframe,.gx-ext{max-width:100%;max-height:calc(100svh - 9rem);border-radius:10px;animation:gx-in .35s var(--ease)}
.gx-stage img{object-fit:contain}
.gx-stage iframe{width:min(100%,calc((100svh - 9rem)*16/9));aspect-ratio:16/9;border:0}
.gx-ext{position:relative;display:block}.gx-ext img{max-height:calc(100svh - 9rem)}.gx-ext span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.8rem 1.4rem;border-radius:10px;background:#3276c9;color:#fff;font-weight:600}
@keyframes gx-in{from{opacity:0;transform:scale(.97)}}
.gx-nav{height:3.5rem;width:3.5rem;margin:auto;border-radius:50%;border:1px solid #ffffff33;background:#0c1422cc;color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:background .2s}
.gx-nav:hover{background:#3276c9}.gx-prev{grid-column:1;grid-row:1}.gx-next{grid-column:3;grid-row:1}
.gx-close{position:absolute;top:.8rem;right:1rem;width:3rem;height:3rem;border-radius:50%;border:1px solid #ffffff33;background:#0c1422cc;color:#fff;font-size:1.8rem;cursor:pointer;z-index:2}
.gx-info{grid-column:1/-1;display:flex;gap:1rem;align-items:baseline;justify-content:center;flex-wrap:wrap;padding:.8rem 1rem 1.2rem;color:#fff}
.gx-count{font-family:var(--mono);font-size:.75rem;color:#83b7f0}.gx-album{color:var(--muted);font-size:.85rem}
@media (max-width:600px){.gx-box{grid-template-columns:1fr}.gx-stage{grid-column:1;padding:3.5rem .5rem .5rem}.gx-nav{position:absolute;bottom:4.2rem;width:3rem;height:3rem}.gx-prev{left:1rem}.gx-next{right:1rem}}
/* Clientes más visibles */
.client-logos{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
.client-card{min-height:190px!important;padding:1.4rem 1rem!important;gap:.9rem!important;transition:background .3s,transform .3s}
.client-card:hover{transform:translateY(-3px)}
.client-mark{height:130px!important;width:100%;position:relative;padding:0!important}
.client-logos .client-mark img{width:auto!important;height:auto!important;max-width:92%!important;max-height:100%!important}
.client-name{font-size:.8rem!important}
@media (max-width:600px){.client-logos{grid-template-columns:repeat(2,1fr)!important}.client-card{min-height:170px!important;padding:1rem .6rem!important}.client-mark{height:100px!important}}