/* ===== Downloads ===== */
.dl-wrap{ max-width: 1000px; margin:22px auto 36px; padding:0 16px; }
.dl-intro{ text-align:center; max-width:62ch; margin:0 auto 18px; }

.dl-filters{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0 6px;
}
.dl-filter{
  font: 600 13px/1 'Raleway',system-ui; letter-spacing:.04em;
  padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background:#fff; cursor:pointer;
}
.dl-filter.is-active{ 
  border-color: rgba(90,201,180,.45);
  box-shadow: 0 0 0 3px rgba(90,201,180,.10) inset;
}

.dl-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

@media (max-width:920px){ .dl-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .dl-grid{ grid-template-columns: 1fr; } }

.dl-card{
  background:#fcfcfb; border-radius:16px;
  outline:1px solid rgba(0,0,0,.04);
  border:1px solid rgba(167,124,207,.18);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  padding:12px; display:flex; flex-direction:column; gap:10px;
}

.dl-card .thumb{
  width:100%; aspect-ratio: 1 / 1;               /* square box */
  background:
    radial-gradient(var(--dot,.8px) .8px, transparent 1.2px),
    var(--bg,#fff);
  background-size:14px 14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.dl-card .thumb img{
  max-width: 92%; max-height: 92%;               /* contain; no stretch */
  object-fit: contain; display:block;
}

.dl-title{
  margin:2px 2px 0; text-align:center; color:var(--title,#3b3550);
}
.dl-tags{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:-2px;
}
.tag{
  font: 700 10px/1 'Raleway',system-ui; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 8px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
}
.tag.ver{ border-color: rgba(167,124,207,.35); }

.dl-desc{
  text-align:center; font-size:.95rem; margin:2px 6px 0; color:#4a4456;
}

.dl-actions{
  margin-top:6px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-block; padding:8px 14px; border-radius:999px;
  font:700 12px/1 'Raleway',system-ui; letter-spacing:.04em;
  background: #5ac9b4; color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
}
.btn:hover{ filter:brightness(.96); }
.btn.ghost{ background:#fff; color:var(--text,#333); }