/* Portfolio y Eventos como collage (4/10/26, noche; aprobado por Jacinto) — marcado en parts/collage.php,
   comportamiento en assets/js/ma-collage.js. Se carga solo en /trabajos/ y /eventos/.
   · Franjas sin rejilla: cada pieza con su posición y ancho en % de un campo de 1280 px; el alto de la franja
     lo fija su proporción, así el collage escala entero con la pantalla.
   · Cuatro velocidades al bajar: r rápida, n viva, m casi con el scroll, f lenta (se queda atrás). La rápida
     pasa por delante. --a es el recorrido; en el móvil, mucho más corto, porque las piezas van en columna.
   · Logotipo del cliente en hueso, centrado sobre la obra, con una sombra radial suave para que se lea.
   · Con un filtro puesto (.is-f), el collage se ordena en rejilla y queda quieto.
   · Movimiento reducido: sin velocidades, sin zoom y sin vídeo en marcha. */
.cg{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5.5vw,80px);box-sizing:content-box}
.cg-bd{position:relative}
.cg-p{position:absolute;display:block;color:var(--bone);text-decoration:none;--a:0px}
.cg-p:hover,.cg-p:focus-visible{color:var(--bone)}
.cg-m{position:relative;margin:0;overflow:hidden;border-radius:4px;background:#2A2F2D;container-type:inline-size}
.cg-m img,.cg-m video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.cg-m .cg-b{opacity:0}
.cg-m.has-lg::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(64% 58% at 50% 50%,rgba(12,14,13,.46),rgba(12,14,13,.12) 82%);transition:opacity .7s ease}
.cg-lg{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;background:var(--bone);pointer-events:none;
  -webkit-mask:var(--lg) center / contain no-repeat;mask:var(--lg) center / contain no-repeat;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.28));transition:opacity .6s ease,scale 1s cubic-bezier(.16,1,.3,1)}
.cg-c{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:16px}
.cg-t{font-size:17px;font-weight:400;line-height:1.3;letter-spacing:-.01em;transition:color .4s ease}
.cg-k{flex:none;max-width:55%;font-family:var(--f-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-3);text-align:right;line-height:1.5}
.cg-p:hover .cg-m img,.cg-p:focus-visible .cg-m img,.cg-p:hover .cg-m video,.cg-p:focus-visible .cg-m video{transform:scale(1.035)}
.cg-p:hover .cg-b,.cg-p:focus-visible .cg-b{opacity:1}
.cg-p:hover .cg-m::after,.cg-p:focus-visible .cg-m::after{opacity:0}
.cg-p:hover .cg-lg,.cg-p:focus-visible .cg-lg{opacity:0;scale:.94}
.cg-p:hover .cg-t,.cg-p:focus-visible .cg-t{color:var(--orange)}
/* Piezas estrechas (menos de un cuarto del ancho): el tipo baja debajo del nombre para que ninguno se corte. */
.cg-p.is-s .cg-c{display:block}
.cg-p.is-s .cg-k{display:block;max-width:none;margin-top:6px;text-align:left}

.d-r{z-index:4;--a:260px}.d-n{z-index:3;--a:130px}.d-m{z-index:2;--a:40px}.d-f{z-index:1;--a:-90px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .cg:not(.is-f) .cg-p{animation:cg-vel linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes cg-vel{from{translate:0 var(--a)}to{translate:0 calc(var(--a) * -1)}}

/* Con un filtro: rejilla ordenada con lo que queda, sin velocidades. */
.cg.is-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(20px,2.4vw,36px);align-items:start}
.cg.is-f .cg-bd{display:contents}
.cg.is-f .cg-p{position:relative;left:auto!important;top:auto!important;width:auto!important;translate:none}
.cg.is-f .cg-m{aspect-ratio:4 / 5!important}
.cg.is-f .cg-vacio{grid-column:1 / -1}
.cg-vacio{font-size:17px;color:var(--t-2);padding:40px 0}

@media (max-width:760px){
  .cg{padding:0 20px}
  .cg-bd{aspect-ratio:auto!important;display:flex;flex-direction:column;gap:56px;margin-bottom:56px}
  .cg-p{position:static;width:100%!important}
  .cg-bd .cg-p:nth-child(2){width:80%!important;align-self:flex-end}
  .cg-bd .cg-p:nth-child(3){width:88%!important}
  .cg-c{display:block}
  .cg-k{display:block;max-width:none;margin-top:6px;text-align:left}
  .d-r{--a:44px}.d-n{--a:26px}.d-m{--a:10px}.d-f{--a:-18px}
  .cg.is-f{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (min-width:761px) and (max-width:1100px){
  .cg-t{font-size:15px}
  .d-r{--a:180px}.d-n{--a:90px}.d-m{--a:28px}.d-f{--a:-60px}
}
@media (prefers-reduced-motion: reduce){
  .cg-p{translate:none!important;animation:none!important}
  .cg-m img,.cg-m video,.cg-lg{transition:none}
  .cg-p:hover .cg-m img,.cg-p:hover .cg-m video{transform:none}
}