/* Quaxel Digifab · visor de trabajos y realce del banner.
   Se carga después de efectos.css.

   El visor es el slider del sitio de «Chinchorro Umbral Ancestral»
   (`D:\- Iniciativas en Desarrollo\PARTICIPO - Nexus Danza - Nico Arcos\
   05 - Coreo Chinchorro RNTC - ICCA 2026\03 - Landing\index.html`), traído
   con su misma anatomía y su mismo comportamiento, y traducido a las fichas de
   Quaxel. Lo que se conserva de allá:

     · el escenario de alto fijo con la MISMA imagen difuminada de fondo,
       que es lo que evita las bandas negras a los lados sin recortar la pieza;
     · la imagen nítida contenida al alto, centrada y ampliable;
     · el contador grande en una esquina, con su denominador pequeño;
     · las flechas laterales sobre el escenario;
     · la barra de recorrido con sus dos extremos rotulados;
     · el fundido de 250 ms al cambiar, el avance solo cada 5 s y la pausa al
       pasar el puntero.

   Lo que cambia, porque es de Quaxel y no de aquel proyecto: el radio de 6 px
   en vez del círculo, el magenta en vez del arena y el oro, la tipografía, y
   el resplandor de neón en vez de la sombra difusa. */

.trab{padding:var(--sep) 0 calc(var(--sep) - 24px)}
.trab__intro{margin-bottom:34px}
.trab__intro .bajada{margin-top:12px}

/* ── Escenario ───────────────────────────────────────────────────────────────*/
.visor__escena{position:relative;width:100%;height:clamp(340px,55vw,660px);overflow:hidden;
  background:var(--fondo-3);background-size:cover;background-position:center}
/* El fondo difuminado son DOS capas que se cruzan por opacidad, igual que las
   imagenes. Antes era un ::before que heredaba la imagen del escenario: al
   cambiarla, el fondo saltaba de golpe, y a veces el navegador ni lo repintaba. */
.visor__fondo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  filter:blur(5px) saturate(.8) brightness(.55);transform:scale(1.06)}
.visor__fondo--b{opacity:0}
.visor__escena::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,17,.55),transparent 30%,transparent 70%,rgba(14,14,17,.75))}

/* Dos capas iguales que se turnan: la que sale se va y la que entra llega, en
   el mismo instante. Con una sola no hay cruce posible — se apaga, se cambia
   la fuente y se enciende, que es un parpadeo, no una transicion. */
.visor__img{position:absolute;top:50%;left:50%;height:100%;width:auto;max-width:none;
  z-index:2;display:block;cursor:zoom-in;will-change:transform,opacity;
  border:1px solid rgba(255,0,255,.25);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 18px 60px rgba(0,0,0,.55);
  transition:border-color .35s var(--curva),box-shadow .35s var(--curva)}
.visor__img--b{z-index:3;opacity:0}
.visor__img:hover{border-color:var(--magenta);box-shadow:0 0 22px rgba(255,0,255,.35),0 18px 60px rgba(0,0,0,.6)}

/* ── Contador ────────────────────────────────────────────────────────────────*/
.visor__cuenta{position:absolute;top:clamp(16px,3vw,28px);right:clamp(16px,4vw,48px);
  z-index:8;text-align:right;pointer-events:none;line-height:1}
.visor__num{display:block;font-size:clamp(3rem,6vw,6rem);font-weight:800;letter-spacing:-.03em;
  color:var(--tinta);text-shadow:0 2px 24px rgba(0,0,0,.75);line-height:1;font-variant-numeric:tabular-nums}
.visor__total{display:block;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-3);margin-top:6px}

/* ── Flechas ─────────────────────────────────────────────────────────────────*/
.visor__flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:8;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:22px;
  border-radius:var(--radio);border:1px solid rgba(255,255,255,.28);
  background:rgba(14,14,17,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--tinta);cursor:pointer;
  transition:background-color .22s var(--curva),border-color .22s var(--curva),transform .22s var(--curva),box-shadow .22s var(--curva)}
.visor__flecha:hover{background:rgba(255,0,255,.24);border-color:var(--magenta);
  transform:translateY(-50%) scale(1.08);box-shadow:0 0 18px rgba(255,0,255,.45)}
.visor__flecha--ant{left:clamp(12px,3vw,32px)}
.visor__flecha--sig{right:clamp(12px,3vw,32px)}
@media (prefers-reduced-transparency:reduce){.visor__flecha{background:#14141a;backdrop-filter:none}}

/* ── Mandos de abajo ─────────────────────────────────────────────────────────*/
.visor__mandos{padding-top:22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.visor__rotulo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;
  letter-spacing:.14em;color:var(--tinta-3)}
.visor__fila{width:100%;display:flex;align-items:center;gap:16px}
.visor__extremo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
/* 44 px de alto para que se pueda tomar con el dedo, con la linea dibujada
   como fondo centrado de 2 px: engordar la barra visible para ganar area
   tactil habria cambiado el diseno; asi el area crece y la linea no. */
.visor__barra{flex:1;-webkit-appearance:none;appearance:none;height:44px;outline:none;cursor:pointer;
  background:linear-gradient(var(--linea-fuerte),var(--linea-fuerte)) center/100% 2px no-repeat}
.visor__barra::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--radio);
  background:var(--magenta);border:2px solid var(--fondo);box-shadow:0 0 12px rgba(255,0,255,.7);cursor:pointer}
.visor__barra::-moz-range-thumb{width:16px;height:16px;border-radius:var(--radio);
  background:var(--magenta);border:2px solid var(--fondo);box-shadow:0 0 12px rgba(255,0,255,.7);cursor:pointer}
.visor__barra:focus-visible{outline:2px solid var(--magenta);outline-offset:6px}
/* Fila de miniaturas: desplazamiento propio, sin barra visible. La activa se
   enciende con borde magenta y opacidad plena; las demas quedan atenuadas. */
.visor__minis{width:100%;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 2px 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.visor__minis::-webkit-scrollbar{display:none}
.visor__mini{flex:none;width:52px;height:64px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;
  background:#1B1B1D;cursor:pointer;opacity:.45;scroll-snap-align:center;
  transition:opacity .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
.visor__mini img{width:100%;height:100%;object-fit:cover;display:block}
.visor__mini:hover{opacity:.8}
.visor__mini.activa{opacity:1;border-color:#FF00FF;transform:translateY(-2px)}
.visor__mini:focus-visible{outline:2px solid #FF00FF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.visor__mini.activa{transform:none}}
/* Una sola linea, siempre. `min-height` fija la altura aunque el texto este
   vacio, y `nowrap` con recorte impide que un pie largo abra una segunda linea:
   eso cambiaba el alto del bloque al pasar de pieza y hacia saltar la pagina.
   Los pies se escriben cortos en el generador; esto es la red por si alguno
   crece. */
.visor__pie{font-size:15px;color:var(--tinta-2);text-align:center;
  height:1.5em;line-height:1.5;max-width:min(100%,68ch);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:599px){
  .visor__flecha{width:44px;height:44px;font-size:19px}
  .visor__num{font-size:2.6rem}
}

/* ── Ampliación ──────────────────────────────────────────────────────────────
   El clic sobre la pieza la abre a pantalla completa, como en el sitio de
   origen. Es un diálogo de verdad, no una capa: así el teclado queda dentro y
   la tecla de escape lo cierra sin código propio. */
.lupa{position:fixed;inset:0;z-index:80;border:0;padding:0;width:100%;height:100%;max-width:100%;max-height:100%;
  background:rgba(6,6,8,.95);display:none;align-items:center;justify-content:center}
.lupa[open]{display:flex}
.lupa::backdrop{background:rgba(6,6,8,.9)}
.lupa img{max-width:min(94vw,1400px);max-height:88vh;width:auto;height:auto;
  border:1px solid rgba(255,0,255,.3);box-shadow:0 0 40px rgba(255,0,255,.2)}
.lupa__cerrar{position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:22px;
  border-radius:var(--radio);border:1px solid var(--linea-fuerte);background:transparent;color:var(--tinta);cursor:pointer;
  transition:border-color .2s var(--curva),background-color .2s var(--curva)}
.lupa__cerrar:hover{border-color:var(--magenta);background:rgba(255,0,255,.14)}
.lupa__pie{position:absolute;left:0;right:0;bottom:clamp(16px,4vw,40px);text-align:center;
  font-size:14px;color:var(--tinta-2);padding:0 var(--lado)}

/* ── Banner: la sección que tiene que destacar ───────────────────────────────
   Dos capas sobre el degradado: unos rayos que barren en diagonal y un pulso
   detrás del botón. Las dos van bajo el contenido y no capturan pulsaciones. */
.banner{position:relative;overflow:hidden;isolation:isolate}
.banner .cont{position:relative;z-index:2}
.banner__rayos{position:absolute;inset:-30%;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(102deg,rgba(255,255,255,0) 0 62px,rgba(255,255,255,.13) 62px 74px,rgba(255,255,255,0) 74px 150px);
  will-change:transform}
.banner__pulso{position:absolute;left:50%;bottom:12%;z-index:0;width:min(560px,80%);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.42),transparent 68%);
  filter:blur(6px);opacity:.5;will-change:transform,opacity}

/* Ventana Windows 95 del visor (2026-09-24): misma familia que las de
   Servicios. El pie y el contador pasan a la barra de estado. */
.visor__ventana .w95__marco{padding:2px}
.visor__ventana .visor__escena{height:clamp(320px,48vw,600px)}
.w95__estado .visor__pie{height:auto;max-width:none;font:400 12px/1 Tahoma,"Segoe UI",Verdana,sans-serif;
  color:#1A1A1A;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w95__estado .visor__rotulo{font:400 12px/1 Tahoma,"Segoe UI",Verdana,sans-serif;color:#1A1A1A;letter-spacing:0}

/* Flechas del visor como botones de Windows 95 (2026-09-24) */
.visor__flecha{border-radius:0;border:0;background:#C0C0C0;color:#0A0A0B;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF;z-index:12;touch-action:manipulation}
.visor__flecha:hover{background:#D4D4D4;transform:translateY(-50%);box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 0 16px rgba(255,0,255,.55)}
.visor__flecha:active{transform:translateY(-50%) translate(1px,1px);box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
.visor__flecha .ico{pointer-events:none}

/* Flechas rehechas (2026-09-24): hermanas de la escena dentro del marco */
.visor__ventana .w95__marco{position:relative}
.visor__img--b,.visor__fondo,.visor__ruido,.visor__cuenta{pointer-events:none}
.vflecha{position:absolute;top:50%;z-index:40;width:52px;height:52px;margin-top:-26px;display:grid;place-items:center;
  border:0;border-radius:0;background:#C0C0C0;color:#0A0A0B;cursor:pointer;touch-action:manipulation;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.vflecha svg{width:18px;height:18px;pointer-events:none}
.vflecha:hover{background:#D4D4D4;box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 0 16px rgba(255,0,255,.55)}
.vflecha:active{transform:translate(1px,1px);box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
.vflecha:focus-visible{outline:1px dotted #0A0A0B;outline-offset:-6px}
.vflecha--ant{left:clamp(12px,3vw,32px)}
.vflecha--sig{right:clamp(12px,3vw,32px)}
@media (max-width:599px){.vflecha{width:44px;height:44px;margin-top:-22px}}