/* ==========================================================================
   GALERÍA · deslizador de portada + visor ampliado
   Archivos relacionados: js/gallery.js (comportamiento) y el bloque HTML
   `<div class="gal">` (ver ejemplo en prueba-galeria.html).

   Los colores y tiempos se cambian en theme.css (variables --accent, --count-*, --lb-bg, --caption-color, --t-fade).
   Estructura de clases:
     .gal          contenedor de la galería (deslizador)
       .gal__stage   marco con proporción fija; contiene las diapositivas
         .gal__slide   una imagen (una por <figure>)
         .gal__count   contador sobre la foto (esquina inferior izquierda)
         .gal__open    botón invisible que abre el visor al pulsar la imagen
       .gal__caption título bajo la imagen, alineado a su borde izquierdo
     .lb           visor ampliado (lo crea gallery.js; no está en el HTML)
   ========================================================================== */


/* ---------- Deslizador ---------- */
.gal{margin:0 auto;max-width:1280px}            /* ancho máximo; el marco se adapta al contenedor */

/* Marco: proporción 3:2 con altura tope de 500 px (valores del sitio original).
   Se puede cambiar por instancia con las variables --ratio y --max-h (opción `ratio` de la clase). */
.gal__stage{position:relative;width:100%;aspect-ratio:var(--ratio,3/2);max-height:var(--max-h,500px);overflow:hidden}

/* Diapositivas apiladas; la activa (.is-active) se muestra con fundido.
   La duración del fundido es la de `transition` (--t-fade). */
.gal__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--t-fade) ease;pointer-events:none}
.gal__slide.is-active{opacity:1}
.gal__slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}

/* Contador (ej. «10») sobre la foto. Posición: left / bottom. */
.gal__count{position:absolute;left:6px;bottom:16px;z-index:2;min-width:37px;padding:0 6px;box-sizing:border-box;
            background:var(--count-bg);color:var(--count-color);text-align:center;
            font:16px/22px var(--font);pointer-events:none}

/* Botón transparente que cubre el marco y abre el visor */
.gal__open{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal__open:focus-visible{outline:none}      /* sin recuadro: al cerrar el visor con Esc el foco vuelve a este botón y dejaba un borde visible */

/* Título bajo la imagen */
.gal__caption{margin:10px 0 0;color:var(--caption-color);
              font:var(--fs-caption)/1.4 var(--font);letter-spacing:var(--ls-caption)}

/* ---------- Visor ampliado ---------- */
/* .is-open lo muestra (display); .is-visible activa el fundido de entrada/salida. */
.lb{position:fixed;inset:0;z-index:1000;background:var(--lb-bg);display:none;flex-direction:column;
    opacity:0;transition:opacity .25s ease;touch-action:pan-y}
.lb.is-open{display:flex}
.lb.is-visible{opacity:1}

/* Barra superior: pantalla completa y cerrar */
.lb__bar{display:flex;justify-content:flex-end;gap:14px;padding:18px 22px;flex:0 0 auto}
.lb__btn{appearance:none;border:0;background:none;padding:6px;color:var(--icon);cursor:pointer;line-height:0;
         transition:color .15s ease}
.lb__btn:hover,.lb__btn:focus-visible{color:var(--accent-hover)}
.lb__btn:focus-visible{outline:2px solid var(--icon);outline-offset:2px;border-radius:2px}
.lb__btn svg{width:30px;height:30px;display:block;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square}

/* Zona central: imagen ampliada. padding lateral = espacio reservado a las flechas. */
.lb__main{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 96px}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;display:block;transition:opacity .3s ease;
         -webkit-user-drag:none;user-select:none}
.lb__img.is-changing{opacity:0}                  /* fundido breve al cambiar de imagen */

/* Flechas laterales */
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--lb-bg)}
.lb__nav svg{width:34px;height:34px;stroke-width:2.6}
.lb__prev{left:14px}.lb__next{right:14px}

/* Contador del visor («11 / 26») y aviso de autoría */
.lb__count{flex:0 0 auto;text-align:center;color:var(--icon);font:14px/1 var(--font);
           padding:18px 0 22px;letter-spacing:.02em}
.lb__toast{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;
           padding:10px 16px;border-radius:3px;font:14px/1.3 var(--font);opacity:0;pointer-events:none;transition:opacity .25s}
.lb__toast.is-on{opacity:1}

/* ---------- Móvil: flechas abajo, menos margen ---------- */
@media (max-width:640px){
  .lb__main{padding:0 8px}
  .lb__nav{top:auto;bottom:8px;transform:none}
  .lb__prev{left:10px}.lb__next{right:10px}
  .lb__bar{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.gal__slide,.lb,.lb__img{transition:none}}