/* ══════════════════════════════════════════════════════════════════════════
   MODAL FAMILIA — galería Pinterest
══════════════════════════════════════════════════════════════════════════ */

.fam-box{
  max-width:860px!important;width:95vw!important;padding:0!important;
  background:#0d0d0d;border-radius:18px;overflow:hidden;
  max-height:90vh;display:flex;flex-direction:column;
  contain:layout style;
}

.fam-grid{
  columns:3;column-gap:6px;padding:16px;
  overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
@media (max-width:600px){.fam-grid{columns:2;}}
.fam-grid::-webkit-scrollbar{width:3px;}
.fam-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}

.fam-item{
  break-inside:avoid;margin-bottom:6px;border-radius:8px;
  overflow:hidden;cursor:pointer;position:relative;background:#1a1a1a;
}
.fam-item img{
  width:100%;height:auto;display:block;
  transition:transform .4s ease,filter .4s ease;filter:brightness(.85);
}
.fam-item:hover img{transform:scale(1.04);filter:brightness(1);}

.fam-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%);
  opacity:0;transition:opacity .3s ease;
  display:flex;align-items:flex-end;padding:10px;
}
.fam-item:hover .fam-overlay{opacity:1;}
.fam-overlay span{font-size:11px;color:rgba(255,255,255,.9);font-family:'DM Mono',monospace;}