:root{
    --gap: 8px;
    --pad: 8px;
    --cols: 8;   /* mosaicos horizontales objetivo en pantallas grandes */
    --rows: 3;   /* filas verticales */
    --tile-min: 90px;   /* por debajo de esto, mejor scroll que mosaicos ilegibles */
    --tile-max: 220px;  /* tope para que no crezcan demasiado en contenedores muy anchos */
    --tile: 180px; /* valor inicial; se recalcula por JS según el ancho real del contenedor */
    --bg: #ffffff;
    --tile-bg: #eeeeee;
  }
  #gallery, #gallery *{ box-sizing: border-box; }
  #gallery{
    background: var(--bg);
  
  }

  .gallery{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:flex-start;
    height: calc((var(--tile) * var(--rows)) + ((var(--rows) - 1) * var(--gap)) + (2 * var(--pad)));
    width:100%;
    padding: var(--pad);
    gap: var(--gap);
    overflow-x:auto;
    overflow-y:hidden;
  }

  /* Damos perspectiva a cada casilla para que el "gozne" superior
     del tile se sienta en 3D, como una lama de fachada */
  .tile{
    flex: 0 0 auto;
    width: var(--tile);
    height: var(--tile);
    border-radius:4px;
    overflow:visible;
    cursor:pointer;
    position:relative;
    background: var(--tile-bg);
    perspective: 500px;
  }

  /* Overlay muy tenue que indica que el mosaico es interactivo
     (se puede ampliar). Aparece con el hover normal, independiente
     de la duración del columpio. */
  .tile::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:4px;
    background: rgba(20,20,20,.10);
    opacity:0;
    transition: opacity .25s ease;
    pointer-events:none;
    z-index:2;
  }
  .tile:hover::after{
    opacity:1;
  }

  .tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:4px;
    transform-origin: top center;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: box-shadow .3s ease;
  }

  /* Efecto "columpio": el tile está fijo arriba y se mece
     hacia adelante/atrás como si el viento lo moviera, con
     una oscilación que se va amortiguando. Se dispara vía JS
     (clase .swinging) para que termine su trayectoria aunque
     el mouse ya se haya movido a otro mosaico. */
  .tile img.swinging{
    animation: swing 2.4s ease-out;
  }

  @keyframes swing{
    0%   { transform: rotateX(0deg); }
    6%   { transform: rotateX(-20deg); }
    18%  { transform: rotateX(14deg); }
    32%  { transform: rotateX(-9deg); }
    48%  { transform: rotateX(6deg); }
    64%  { transform: rotateX(-3.5deg); }
    80%  { transform: rotateX(1.5deg); }
    92%  { transform: rotateX(-0.5deg); }
    100% { transform: rotateX(0deg); }
  }

  .lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    align-items:center;
    justify-content:center;
    z-index:999999;
    cursor:zoom-out;
  }
  .lightbox.open{ display:flex; }
  .lightbox img{
    max-width:92vw;
    max-height:92vh;
    border-radius:6px;
    box-shadow:0 10px 40px rgba(0,0,0,.6);
  }

  /* Scrollbar discreto */
  .gallery::-webkit-scrollbar{ height:10px; }
  .gallery::-webkit-scrollbar-thumb{ background:#333; border-radius:5px; }



    @media (max-width: 767px) {
    .gallery {display: none;}
    .lightbox { display: none;}

  }