/* ============================================================================================================
   GALERÍA POR PRODUCTO · #galeria-app (js/galeria.js) · se carga después de sistema.css
   Una tarjeta por juego o servicio: su mejor foto COMPLETA, a su proporción real, llenando el paspartú (sin copia borrosa
   detrás ni caja cuadrada: el lienzo mide lo que la foto; galeria.js escribe aspect-ratio en línea). Debajo, el nombre y cuántas fotos tiene.
   Al tocarla abre dialog.visor#visor a pantalla completa: foto completa, anterior/siguiente, contador, miniaturas
   con su proporción real y el botón Cotizar. Usa los tokens y piezas de sistema.css (.marco--paspartu, .mini, .btn,
   .app-barra, .app-cerrar, dialog.visor); aquí solo se termina.
   Grilla: 4 columnas en computadora (9 álbumes: la última fila va incompleta), 2 en tableta y celular (si quedan impares, la última ocupa las dos).
   ============================================================================================================ */

/* ---------- 1. grilla de álbumes ----------
   v13 (29 oct): rejilla de COLUMNAS (mampostería). Antes era de filas con align-items:end: la foto alta de las sillas (660 × 1380)
   dejaba ≈ 450 px vacíos arriba de las demás de su fila. Ahora cada tarjeta se apila en su columna a su proporción real (la foto
   sigue completa) y no quedan huecos. 4 columnas en computadora, 3 en compu angosta y tableta, 2 en celular. La tarjeta (.album)
   es vidrio oscuro con filete fino y radio de 18 px; sin el marco de oro ni los rombos. */
.albumes{list-style:none;margin:0;padding:0;columns:4;column-gap:clamp(14px,1.6vw,22px)}
.albumes > li{display:block;min-width:0;margin:0 0 clamp(14px,1.6vw,22px);padding:0;break-inside:avoid;-webkit-column-break-inside:avoid}

.album{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;width:100%;min-width:0;margin:0;padding:6px;
  border:1px solid rgba(243,238,227,.1);border-radius:18px;background:linear-gradient(180deg,rgba(38,28,80,.56),rgba(20,13,46,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.album:focus-visible{outline:2px solid var(--cian);outline-offset:4px}
/* la entrada (.entrada, sistema.css) y el hover comparten transform: la transición del hover va con la curva de la marca */
html.anim .album.entrada.entra{transition:opacity var(--dur-entrada,.9s) var(--curva-entrada) calc(min(var(--i,0),3) * var(--paso-entrada,80ms)),
  transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada) calc(min(var(--i,0),3) * var(--paso-entrada,80ms)),filter var(--dur-entrada,.9s) var(--curva-entrada),
  border-color var(--dur-hover,.45s) var(--curva-entrada)}

/* la foto dentro de la tarjeta, con su propio radio */
.album-portada{display:block;width:100%;border-radius:13px;overflow:hidden;background:var(--s-0)}

/* lienzo a la proporción de la foto: la imagen (con width/height) define el alto; sin copia borrosa ni viñeta encima de la foto */
.album-lienzo{position:relative;display:block;aspect-ratio:auto;overflow:hidden;background:var(--s-0);border-radius:13px;isolation:isolate}
.album-lienzo::before,.album-lienzo::after{content:none}
.album-area{position:relative;display:block;z-index:2}
/* la foto completa llena el lienzo (≥ 98 %): sin translate ni --r */
.album-foto{position:relative;display:block;width:100%;border-radius:13px;background:var(--s-0);transform:none;
  transition:transform 1.1s var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
.album-foto picture{display:block;width:100%;height:auto}
.album-foto img{display:block;width:100%;height:auto;object-fit:contain;border-radius:13px}
/* un solo acento en el capítulo IV (los álbumes no cambian de tono aunque galeria.js aún traiga data-tono por juego) */
.albumes .album[data-tono]{--tono:#F68B2C;--tono-claro:#F68B2C;--tono-suave:rgba(246,139,44,.08);--tono-filete:rgba(246,139,44,.5)}

/* rótulos «Imagen de referencia» y «Video ilustrativo»: cápsula discreta (css/v13-marca.css) sobre el lienzo, abajo a la izquierda;
   el vidrio oscuro lo pone css/v13-secciones.css */
.album-ref{position:absolute;z-index:3;left:10px;bottom:10px;margin:0;max-width:calc(100% - 20px)}
.album-ref-pie{display:none;margin:0}

/* pie: nombre en la serif de la marca a la izquierda; cuántas fotos (versales espaciadas) y la flecha a la derecha */
.album-pie{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;min-width:0;padding:14px 8px 10px}
.album-nombre{display:block;min-width:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(17px,1.3vw,20px);letter-spacing:.01em;line-height:1.2;color:var(--marfil,#F3EEE3)}
.album-nombre::before{content:none}
.album-cuenta{flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:var(--f-rotulo);font-weight:600;font-size:10.5px;letter-spacing:.16em;color:var(--tinta-3)}
.album-cuenta::after{content:"→";font-family:var(--f-texto);font-weight:500;font-size:13px;letter-spacing:0;color:var(--naranja,#F68B2C);opacity:.8;
  transition:transform var(--dur-hover,.45s) var(--curva-entrada),opacity var(--dur-hover,.45s) var(--curva-entrada)}

/* tarjetas de video (galeria.js las pone al inicio de la rejilla, 28 oct: dos): misma tarjeta, pie y medidas que un álbum, pero no
   abren el visor; el video (IA, 1080 en computadora y 720 en celular) se reproduce en su sitio al entrar en pantalla (galeria.js,
   IntersectionObserver). La proporción del lienzo la escribe galeria.js en línea (16:9, o 3:4 para el vertical recortado). El rótulo
   "Video ilustrativo" es la cápsula .album-ref sobre el lienzo (como "Imagen de referencia"); en el pie solo va "Video", para que el
   nombre no se parta */
.album-video{cursor:default}
.album-video .album-lienzo{aspect-ratio:16/9}
/* el video se posiciona respecto al lienzo (que ya mide 16:9), no respecto a .album-foto, que sin imagen no tiene alto */
.album-video :is(.album-area,.album-foto){position:static}
.album-video video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:13px;background:var(--s-0)}
.album-video .album-cuenta::after{content:none}
@media(hover:hover){
  .album-video:hover .album-foto{transform:none}
  /* hover sobrio (solo con mouse): filete naranja, la foto se acerca 3.5 % y la flecha avanza. Sin inclinación ni sombra de color */
  .album:not(.album-video):hover{border-color:rgba(246,139,44,.5)}
  .album:hover .album-foto{transform:scale(1.035)}
  .album:hover .album-cuenta{color:var(--tinta-2)}
  .album:hover .album-cuenta::after{transform:translateX(4px);opacity:1}
}
.album:active .album-foto{transform:scale(.99);transition-duration:.15s}

/* mampostería medida (galeria.js, mamposteria()): rejilla de filas de 2 px; cada <li> ocupa --filas (su alto + el aire) en la
   columna que le tocó para que las columnas terminen parejas (grid-column en línea); dense lo sube al primer hueco de esa columna.
   El orden del DOM queda intacto. Sin JS queda la de columnas. */
/* --cols lo lee galeria.js (no el grid-template-columns resuelto, que también cuenta las columnas implícitas) */
.albumes.albumes--rejilla{--cols:4;columns:auto;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:2px;grid-auto-flow:row dense;row-gap:0;align-items:start}
.albumes.albumes--rejilla > li{margin:0;grid-row-end:span var(--filas,120)}

/* compu angosta y tableta: 3 columnas */
@media(max-width:1100px){
  .albumes{columns:3}
  .albumes.albumes--rejilla{--cols:3}
}
/* celular: 2 columnas compactas */
@media(max-width:600px){
  .albumes{columns:2;column-gap:10px}
  .albumes > li{margin-bottom:10px}
  .albumes.albumes--rejilla{--cols:2}
  .albumes.albumes--rejilla > li{margin:0}
  .album{padding:5px;border-radius:15px}
  .album-portada,.album-lienzo,.album-foto,.album-foto img,.album-video video{border-radius:11px}
  /* pie en UNA línea: el nombre se corta con elipsis y la cuenta queda a la derecha */
  .album-pie{gap:8px;padding:10px 5px 7px}
  .album-nombre{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;letter-spacing:0}
  .album-cuenta{font-size:9.5px;letter-spacing:.1em;gap:6px}
  .album-cuenta::after{font-size:12px}
  /* en la tarjeta chica el rótulo no tapa la foto: pasa al pie */
  .album-ref{display:none}
  .album-ref-pie{display:block;font-family:var(--f-rotulo);font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
  /* tarjeta de video: el nombre va solo en su renglón y el rótulo debajo (.album-ref-pie); la cuenta corta "Video" sobra aquí */
  .album-video .album-pie{flex-wrap:wrap;row-gap:4px}
  .album-video .album-cuenta{display:none}
  .album-video .album-ref-pie{flex:1 0 100%}
  /* con referencia (no video), el rótulo baja a su renglón */
  .album:not(.album-video) .album-pie:has(.album-ref-pie){flex-wrap:wrap;row-gap:4px}
  .album:not(.album-video) .album-ref-pie{flex:1 0 100%;order:3}
}

/* ---------- 2. visor a pantalla completa ----------
   v13 (29 oct): sobre el MORADO NOCHE de la página (antes un negro verdoso de la paleta vieja), con la misma voz de la ronda:
   nombre en la serif de la marca, contador como cápsula fina, rótulos en versales espaciadas y un solo acento naranja (el visor
   ya no toma el tono de cada álbum). La foto completa con esquinas de 12 px; sin brillo ni halo. */
html.visor-abierto{overflow:hidden;scrollbar-gutter:stable}
dialog.visor{overscroll-behavior:contain;background:rgba(12,8,32,.985);color:var(--tinta)}
dialog.visor::backdrop{background:rgba(10,6,26,.84)}
dialog.visor,dialog.visor[data-tono]{--tono:var(--naranja,#F68B2C);--tono-claro:var(--naranja,#F68B2C);--tono-suave:rgba(246,139,44,.08);--tono-filete:rgba(246,139,44,.5)}
.visor-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* barra: nombre y contador · Cotizar · cerrar */
.visor-barra{gap:12px;padding:8px 12px 8px clamp(16px,2.2vw,28px);background:rgba(18,12,43,.62);border-bottom:1px solid rgba(243,238,227,.08)}
.visor-cab{display:flex;align-items:center;gap:6px 16px;min-width:0;margin-right:auto}
.visor-cab .app-titulo{margin:0;min-width:0;gap:12px;font-family:var(--f-display);font-weight:400;font-size:21px;letter-spacing:.01em;line-height:1.15;color:var(--marfil,#F3EEE3)}
.visor .app-titulo::before{width:6px;height:6px;border-radius:50%;transform:none;background:var(--naranja,#F68B2C)}
.visor-nombre{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.visor-cuenta{display:inline-flex;align-items:center;min-height:26px;margin:0;padding:1px 11px 0;border:1px solid rgba(243,238,227,.14);border-radius:999px;
  white-space:nowrap;font-variant-numeric:tabular-nums;font-family:var(--f-rotulo);font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.16em;color:var(--tinta-2,#CFC9DF)}
.visor-cotizar{flex:none}
.visor-cotizar svg{width:16px;height:16px}
.visor .app-cerrar{display:grid}

/* escena: la foto completa al centro, nunca más grande que 1.5 veces su medida real */
.visor-escena{position:relative;display:block;min-height:0;padding:clamp(14px,2.6vh,32px) clamp(76px,7.5vw,120px) clamp(10px,1.6vh,18px);
  touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.visor-fig{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;width:100%;height:100%;margin:0}
.visor-medio{position:relative;min-height:0;will-change:transform,opacity}
.visor-escena .visor-medio :is(img,video){position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:min(100%, calc(var(--w,4000) * 1.5px));max-height:min(100%, calc(var(--h,4000) * 1.5px));
  object-fit:contain;border-radius:12px;-webkit-user-drag:none;
  box-shadow:0 40px 90px -36px rgba(0,0,0,.95),0 0 0 1px rgba(243,238,227,.08);transition:opacity .6s var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
.visor-medio picture{display:contents}
.visor-medio.cargando :is(img,video){opacity:0}
/* mientras baja la foto: un punto naranja que late despacio */
.visor-medio.cargando::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--naranja,#F68B2C);opacity:.8}
@media(prefers-reduced-motion:no-preference){
  .visor-medio.cargando::before{animation:visorLatido 1.1s var(--curva-entrada,ease-in-out) infinite alternate}
  dialog.visor[open]{animation:visorEntra .5s var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
  dialog.visor[open] .visor-fig{animation:visorFoto .8s var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
}
@keyframes visorLatido{from{opacity:.25;transform:scale(.7)}to{opacity:.9;transform:scale(1.1)}}
@keyframes visorEntra{from{opacity:0}}
@keyframes visorFoto{from{opacity:0;transform:translate3d(0,10px,0) scale(.985)}}
.visor-pie{margin:0;text-align:center;font-family:var(--f-rotulo);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.visor-pie:empty{display:none}

/* anterior / siguiente: a los lados en computadora; círculo de vidrio oscuro con filete fino */
.visor-nav{width:52px;height:52px;z-index:3;border-color:rgba(243,238,227,.16);background:rgba(18,12,43,.6);
  transition:border-color var(--dur-hover,.45s) var(--curva-entrada),background-color var(--dur-hover,.45s) var(--curva-entrada)}
.visor-nav svg{width:20px;height:20px}
@media(hover:hover){.visor-nav:hover{border-color:rgba(246,139,44,.55);background:rgba(246,139,44,.08)}}
.visor-nav:active{transform:translateY(-50%) scale(.95)}
.visor-pos{display:none;margin:0;font-variant-numeric:tabular-nums;font-family:var(--f-rotulo);font-weight:600;font-size:11px;letter-spacing:.16em}
.visor-precarga{display:none}

/* debajo de la foto grande, las otras fotos de la atracción (2-3 por álbum): miniaturas grandes con su proporción real
   y un rótulo "3 fotos de Carrusel" (ronda 7: al tocar una tarjeta se abre la foto en grande y se ven las demás a la mano) */
.visor-pie-tira{display:grid;gap:2px;min-width:0}
.visor-tira-t{margin:0;padding:8px var(--gutter,16px) 0;text-align:center;font-family:var(--f-rotulo);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.visor-tira-t:empty{display:none}
.visor-tira{gap:10px;align-items:center;padding:8px var(--gutter,16px) 14px;scroll-padding-inline:var(--gutter,16px);overscroll-behavior-x:contain}
.visor-tira button{--alto:84px;height:var(--alto);width:calc(var(--alto) * var(--r,1));min-width:44px;max-width:150px;border-radius:10px;border-color:rgba(243,238,227,.12);background:var(--s-0);opacity:.5;
  transition:opacity var(--dur-hover,.45s) var(--curva-entrada),border-color var(--dur-hover,.45s) var(--curva-entrada),transform var(--dur-hover,.45s) var(--curva-entrada)}
.visor-tira button img{border-radius:9px}
.visor-tira button picture{display:block;width:100%;height:100%}
.visor-tira button img{width:100%;height:100%;object-fit:contain}
@media(hover:hover){.visor-tira button:hover{opacity:.85}}
.visor-tira button[aria-current="true"]{opacity:1;border-color:var(--tono-claro);box-shadow:0 0 0 1px var(--tono-filete)}
.visor-tira button:focus-visible{outline-offset:2px}

/* un álbum de una sola foto: sin flechas, contador ni tira */
.visor.una :is(.visor-nav,.visor-pos,.visor-tira,.visor-tira-t){display:none!important}

/* celular y tableta: flechas abajo al centro con el contador entre ellas; Cotizar sin el nombre visible */
@media(max-width:900px){
  .visor-barra{min-height:56px;padding:6px 8px 6px 16px;gap:8px}
  .visor-cab{flex-direction:column;align-items:flex-start;gap:2px}
  .visor-cab .app-titulo{font-size:18px}
  .visor-cuenta{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .visor-cot-nombre{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .visor-cotizar{padding:0 14px}
  .visor-escena{padding:10px 10px 70px}
  .visor-nav{width:46px;height:46px;top:auto;bottom:12px;transform:none}
  .visor-nav.ant{left:calc(50% - 98px)}
  .visor-nav.sig{right:calc(50% - 98px)}
  .visor-nav:active{transform:scale(.95)}
  .visor-pos{display:block;position:absolute;left:50%;bottom:27px;transform:translateX(-50%);color:var(--tinta-2)}
  .visor.una .visor-escena{padding-bottom:14px}
  .visor-tira-t{padding:6px 12px 0}
  .visor-tira{gap:8px;padding:6px 12px 12px}
  .visor-tira button{--alto:64px;min-width:36px}
}
@media(max-width:380px){
  .visor-cotizar svg{display:none}
}

/* ---------- 3. reducir movimiento: sin zoom ni desplazamientos ---------- */
@media(prefers-reduced-motion:reduce){
  .album-foto,.album-cuenta::after,.visor-tira button,.visor-escena .visor-medio :is(img,video){transition:none!important}
  .album:hover .album-foto,.album:active .album-foto,.album:hover .album-portada{transform:none!important}
  .album:hover .album-cuenta::after{transform:none}
}