/* gnz-showreel.css — Carrusel de portafolio "liquid glass" (D-SR-4/5/6).
   Tokens de assets/gnz-tokens.css (copiados como fallback: el componente vive en otro host). */
.gsr{
  --ink:#070707; --bone:#F0F0F0; --gray:#999896; --indigo:#1B4FD8; --indigo-dk:#1038A8; --violet:#7C3AED;
  --ease:cubic-bezier(.22,1,.36,1);
  --cw:clamp(240px,28.8vw,324px);   /* D-SR-17: +20% sobre clamp(200,24vw,270) */
  --ch:calc(var(--cw) * 16 / 9);
  position:relative; color:var(--bone); font-family:'DM Sans',system-ui,sans-serif;
  padding:24px 0 8px; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.gsr *{box-sizing:border-box}
.gsr-stage{
  position:relative; height:calc(var(--ch) + 40px); perspective:1400px; perspective-origin:50% 45%;
  touch-action:pan-y; outline:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.gsr-stage.gsr-arrastrando{cursor:grabbing}
.gsr-stage:focus-visible{box-shadow:0 0 0 2px var(--indigo) inset;border-radius:14px}
.gsr-track{position:absolute; inset:0; transform-style:preserve-3d}

/* ---- tarjeta ---- */
.gsr-card{
  position:absolute; left:50%; top:20px; width:var(--cw); height:var(--ch);
  margin-left:calc(var(--cw) / -2);
  transform:translate3d(0,0,0);   /* la posición la escribe el JS (D-SR-8) */
  border-radius:22px; background:rgba(240,240,240,.05); cursor:pointer;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(240,240,240,.10);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  will-change:transform;
}
/* D-SR-16: el oscurecimiento de las vecinas es inline y continuo (JS render), sin transición ni clase → cero parpadeo */
.gsr-media{position:absolute; inset:5px; border-radius:17px; overflow:hidden; background:#0C0C14;
  -webkit-user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.gsr-media img,.gsr-media video{-webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; pointer-events:none}
.gsr-media img,.gsr-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.gsr-media video{opacity:0; transform:scale(1.04); transition:opacity .4s ease-out, transform .4s ease-out}
.gsr-media video.gsr-on{opacity:1; transform:scale(1)}
.gsr-media video.gsr-full{transition:opacity .15s linear, transform .15s linear}   /* cambio al completo casi sin transición */
/* borde con brillo especular (gradiente en máscara) */
.gsr-card::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:1.5px; pointer-events:none; z-index:3;
  background:linear-gradient(140deg,rgba(255,255,255,.75),rgba(255,255,255,.08) 32%,rgba(124,58,237,.35) 70%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* barra de progreso del teaser */
.gsr-prog{position:absolute; left:14px; right:14px; bottom:12px; height:3px; border-radius:3px; background:rgba(240,240,240,.18); z-index:4; overflow:hidden; opacity:0; transition:opacity .4s ease-out}
.gsr-centro .gsr-prog{opacity:1}
.gsr-prog i{display:block; height:100%; width:calc(var(--p,0) * 100%); background:linear-gradient(90deg,var(--indigo-dk),var(--indigo) 45%,var(--violet))}

/* ---- vidrio: píldora, controles, chip ---- */
.gsr-pill,.gsr-btn,.gsr-ctl,.gsr-x{
  background:linear-gradient(180deg,rgba(240,240,240,.20),rgba(240,240,240,.07));
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.08), 0 8px 24px -8px rgba(0,0,0,.6);
  border:1px solid rgba(240,240,240,.22); color:var(--bone);
}
.gsr-chromium .gsr-pill,.gsr-chromium .gsr-btn,.gsr-chromium .gsr-ctl{
  -webkit-backdrop-filter:url(#gsr-refract) blur(14px) saturate(180%); backdrop-filter:url(#gsr-refract) blur(14px) saturate(180%);
}
.gsr-pill{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:4; max-width:calc(100% - 24px);
  padding:5px 14px 3px; border-radius:999px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  font-family:'Bebas Neue',Impact,sans-serif; font-size:19px; letter-spacing:.09em; line-height:1.1;
}
/* botones de la tarjeta central: sonido (D-SR-9) y ampliar (D-SR-10) */
.gsr-ctl{
  position:absolute; bottom:26px; z-index:5; width:44px; height:44px; padding:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font:inherit;
  opacity:0; pointer-events:none; transform:scale(.9);
  transition:opacity .25s ease-out, transform .25s var(--ease), background .2s ease-out;
}
.gsr-snd{left:12px} .gsr-exp{right:12px}
.gsr-asentada .gsr-centro .gsr-ctl{opacity:1; pointer-events:auto; transform:none}
.gsr-asentada .gsr-centro .gsr-ctl:hover{transform:scale(1.06)}
.gsr-asentada .gsr-centro .gsr-ctl:active{transform:scale(.95)}
.gsr-ctl:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.gsr-ctl svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gsr-sonando .gsr-snd{background:linear-gradient(180deg,rgba(27,79,216,.75),rgba(124,58,237,.55))}
/* indicador de pausa (tocar el video = pausa/play) */
.gsr-pausa{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; z-index:4; border-radius:50%;
  display:grid; place-items:center; color:var(--bone); opacity:0; transform:scale(.8); pointer-events:none;
  background:rgba(7,7,7,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .25s ease-out, transform .25s var(--ease)}
.gsr-pausa svg{width:28px;height:28px}
.gsr-pausada .gsr-pausa{opacity:1; transform:none}

/* ---- controles ---- */
.gsr-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px}
.gsr-btn{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font:inherit;
  transition:transform .2s ease-out, background .2s ease-out}
.gsr-btn:hover{transform:scale(1.06)} .gsr-btn:active{transform:scale(.95)}
.gsr-btn:focus-visible,.gsr-x:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.gsr-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gsr-dots{display:flex; gap:6px}
.gsr-dots i{width:6px;height:6px;border-radius:50%;background:rgba(240,240,240,.25);transition:background .3s ease-out, width .3s var(--ease)}
.gsr-dots i.gsr-act{background:var(--bone); width:18px; border-radius:6px}
.gsr-vacio{padding:40px 16px; text-align:center; color:var(--gray)}

/* ---- prefers-reduced-motion / modo plano ---- */
@media (prefers-reduced-motion:reduce){
  .gsr-media video{transition:none}
  .gsr-btn,.gsr-ctl,.gsr-pausa{transition:none}
}

/* ---- modal (D-SR-6) ---- */
.gsr-modal{position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; padding:16px;
  background:rgba(7,7,7,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s ease-out; font-family:'DM Sans',system-ui,sans-serif}
.gsr-modal.gsr-abierto{opacity:1}
.gsr-panel{position:relative; width:min(calc(100vw - 32px), calc((100vh - 32px) * 9 / 16)); width:min(calc(100vw - 32px), calc((100dvh - 32px) * 9 / 16)); aspect-ratio:9/16;
  border-radius:24px; padding:6px; background:rgba(240,240,240,.08);
  border:1px solid rgba(240,240,240,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 40px 80px -20px rgba(0,0,0,.9);
  transform:translateY(12px) scale(.97); transition:transform .4s cubic-bezier(.22,1,.36,1)}
.gsr-abierto .gsr-panel{transform:none}
.gsr-panel video{width:100%; height:100%; border-radius:19px; background:#070707; object-fit:contain; display:block}
.gsr-x{position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; cursor:pointer;
  font-size:18px; line-height:1; display:grid; place-items:center}
.gsr-modal .gsr-rot{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); font-family:'Bebas Neue',Impact,sans-serif;
  letter-spacing:.09em; color:var(--bone); font-size:18px}