/* Lightbox / carrusel */
  .community-lightbox {
    position:fixed; inset:0; background:rgba(8,12,20,.78);
    display:none; align-items:center; justify-content:center; z-index:9999;
  }
  .community-lightbox.open { display:flex; }

  .community-frame {
    position:relative; width:min(1000px, 92vw); height:min(640px, 90vh);
    background:#0d1522; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.5);
    overflow:hidden;
  }
  .community-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:.8rem 1rem; background:#0b1320; color:#e5f4ff;
  }

/* Imatges contingudes i sense “zoom” estrany */
/* viewport */
.community-track{
  height:calc(100% - 60px);
  overflow:hidden;
  position:relative;
  background:#0d1522;
}

/* cinta */
.community-belt{
  display:flex;
  height:100%;
  transition:transform .35s ease;
  will-change:transform;
}

/* cada slide ocupa exactament el 100% del viewport */
.slide{
  flex:0 0 100%;
  min-width:100%;
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box;   /* important */
  padding:0;               /* evita sumar amplada */
  margin:0;                /* per si hi havia margins */
  background:#0d1522;
}
.slide img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  display:block; border-radius:12px;
}


#communityTrack img {
  position:relative !important;
  left:auto !important;
}

  .community-controls { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
  .community-controls button {
    pointer-events:auto; border:none; background:rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    width:44px; height:44px; border-radius:50%; cursor:pointer; margin:0 10px;
    color:#fff; font-size:20px;
  }
  .community-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
  .community-dots button { width:10px; height:10px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.35); }
  .community-dots button.active { background:#fff; }

  .community-close {
    border:none; background:#182235; color:#e5f4ff; border-radius:10px; padding:.4rem .7rem; cursor:pointer;
  }



  /* lightbox base (deixes els teus estils tal com els tens) */
  .community-lightbox{position:fixed; inset:0; background:rgba(8,12,20,.78); display:none; align-items:center; justify-content:center; z-index:9999;}
  .community-lightbox.open{display:flex;}
  .community-frame{position:relative; width:min(1000px,92vw); height:min(640px,90vh); background:#0d1522; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .community-header{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; background:#0b1320; color:#e5f4ff;}
  .community-close{border:none; background:#182235; color:#e5f4ff; border-radius:10px; padding:.4rem .7rem; cursor:pointer;}

  /* VIEWPORT (no es mou) */
  .community-track{
    height:calc(100% - 60px);
    overflow:hidden;
    position:relative;
    background:#0d1522;
  }

  /* CINTA (es mou) */
  .community-belt{
    display:flex;
    height:100%;
    transition:transform .35s ease;
    will-change:transform;
    transform:translate3d(0,0,0);
    width:100%; /* s’actualitza a JS a slides*100% */
  }

  /* SLIDES */
  .slide{
    flex:0 0 100%;
    min-width:100%;
    display:flex; align-items:center; justify-content:center;
    background:#0d1522;
    padding:10px;
  }
  .slide img{
    max-width:100%; max-height:100%;
    width:auto; height:auto; object-fit:contain;
    display:block; border-radius:12px;
  }

  /* Controls i punts (com els tens) */
  .community-controls{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none;}
  .community-controls button{pointer-events:auto; border:none; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); width:44px; height:44px; border-radius:50%; cursor:pointer; margin:0 10px; color:#fff; font-size:20px;}
  .community-dots{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:10px;}
  .community-dots button{width:10px; height:10px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.35);}
  .community-dots button.active{background:#fff;}