/* =====================================================================
   GALERÍAS — 1) carrusel 3D (coverflow) · 2) aparición a todo el ancho
   Se apoya en los tokens de style.css (--neon, --neon-2, --ease, .mono, [data-reveal], --p).
   ===================================================================== */
#slider-root,#reveal-root{--bleed:20px}
@media (min-width:600px){#slider-root,#reveal-root{--bleed:26px}}

/* ---------- GALERÍA 1: carrusel 3D ---------- */
.gs{position:relative;margin-inline:calc(var(--bleed) * -1);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.gs:focus{outline:none}
.gs:focus-visible{outline:2px solid var(--neon-2);outline-offset:-3px;border-radius:6px}
.gs-stage{position:relative;aspect-ratio:1 / 1.12;overflow:hidden;perspective:1100px;perspective-origin:50% 46%;touch-action:pan-y;cursor:grab}
.gs.is-drag .gs-stage{cursor:grabbing}
.gs-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:2%;height:9%;background:radial-gradient(ellipse,color-mix(in srgb,var(--neon) 65%,transparent),transparent 70%);filter:blur(12px);opacity:.7;pointer-events:none;z-index:0}

.gs-slide{--x:0;--r:0;--z:0;--sc:1;--op:1;position:absolute;top:4.2%;left:21%;width:58%;aspect-ratio:9 / 15;margin:0;
  transform:translate3d(calc(var(--x) * 1%),0,calc(var(--z) * 1px)) rotateY(calc(var(--r) * 1deg)) scale(var(--sc));
  opacity:var(--op);transform-style:flat;backface-visibility:hidden}
.gs.ready .gs-slide{transition:transform .75s var(--ease),opacity .6s var(--ease)}
.gs.is-drag .gs-slide{transition:none}
.gs-slide.far{display:none}
.gs-slide:not(.is-active){cursor:pointer}

/* marco de neón */
.gs-frame{position:absolute;inset:0;border-radius:10px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#171b2a,#05060b);
  border:1px solid color-mix(in srgb,var(--neon) 55%,transparent);
  box-shadow:0 22px 38px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.7),0 0 16px color-mix(in srgb,var(--neon) 30%,transparent);
  transition:box-shadow .6s var(--ease),border-color .6s var(--ease)}
.gs-slide.is-active .gs-frame{border-color:var(--neon);box-shadow:0 26px 44px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.7),0 0 34px color-mix(in srgb,var(--neon) 65%,transparent),inset 0 0 18px color-mix(in srgb,var(--neon) 22%,transparent)}
.gs-slide::before,.gs-slide::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--neon);filter:drop-shadow(0 0 6px var(--neon));opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:2}
.gs-slide::before{top:-6px;left:-6px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.gs-slide::after{bottom:-6px;right:-6px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.gs-slide.is-active::before,.gs-slide.is-active::after{opacity:1}

/* imagen completa (contain) sobre su propia versión desenfocada */
.gs-bg{position:absolute;inset:-14%;background:center / cover no-repeat;filter:blur(16px) saturate(1.35) brightness(.55);opacity:0;transition:opacity .6s var(--ease)}
.gs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s var(--ease);-webkit-user-drag:none}
.gs-slide.is-loaded .gs-bg,.gs-slide.is-loaded .gs-img{opacity:1}
.gs-tag{position:absolute;left:9px;top:9px;z-index:3;padding:5px 9px;border-radius:999px;font-size:10px;line-height:1.2;color:#fff;background:rgba(5,6,11,.78);border:1px solid color-mix(in srgb,var(--neon) 65%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--neon) 40%,transparent);white-space:nowrap}

/* controles */
.gs-ui{display:flex;align-items:center;gap:10px;padding:0 var(--bleed);margin-top:10px}
.gs-btn{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--neon);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0)),rgba(8,10,18,.88);color:#fff;
  box-shadow:0 0 18px color-mix(in srgb,var(--neon) 40%,transparent),inset 0 0 14px color-mix(in srgb,var(--neon) 20%,transparent);transition:transform .25s var(--ease),box-shadow .25s}
.gs-btn:hover{box-shadow:0 0 30px color-mix(in srgb,var(--neon) 70%,transparent),inset 0 0 18px color-mix(in srgb,var(--neon) 32%,transparent)}
.gs-btn:active{transform:scale(.92)}
.gs-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gs-play{position:absolute;z-index:300;top:8px;right:calc(var(--bleed) - 6px);width:38px;height:38px;border-color:rgba(255,255,255,.35);background:rgba(5,6,11,.8);box-shadow:none}
.gs-play svg{width:17px;height:17px}
.gs-play svg path[d^="M8 5v14l"]{fill:currentColor;stroke:none}
.gs-play[hidden]{display:none}
.gs-count{flex:1;text-align:center;font-size:19px;letter-spacing:.14em;color:var(--chrome-dim);white-space:nowrap}
.gs-count b{font-weight:400;color:#fff;text-shadow:0 0 14px var(--neon),0 0 4px var(--neon)}
.gs-bar{height:2px;margin:14px var(--bleed) 0;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.gs-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--gp,.025));background:linear-gradient(90deg,var(--neon),var(--neon-2));box-shadow:0 0 12px var(--neon);transition:transform .7s var(--ease)}

/* movimiento reducido (html.reduce lo fija index.html; ?fx=1 o FX.setFull() lo quitan): todo visible, sin animar */
html.reduce .gs-slide,html.reduce .gs-frame,html.reduce .gs-bg,html.reduce .gs-img,html.reduce .gs-bar i{transition:none!important}