/* ─── cards.css — CuriosVault ─────────────────────────────
   Carga DESPUÉS de styles.css. Aplica a todas las páginas.
──────────────────────────────────────────────────────────── */

/* ── BOTÓN DONAR — pequeño y amarillo en todas las páginas ── */
.btn-donate {
  padding: 0.36rem 0.88rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  background: linear-gradient(0deg, #e09a00 0%, #ffc62d 100%) !important;
  border-bottom: 2px solid #a06800 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18) !important;
  color: #1a1200 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background .18s, transform .18s, box-shadow .18s !important;
}
.btn-donate:hover {
  background: linear-gradient(0deg, #c98800 0%, #f5b800 100%) !important;
  border-bottom-color: #8a5700 !important;
  color: #1a1200 !important;
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}
.btn-donate:active {
  transform: translateY(4px) !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}

/* ── GRID ────────────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem 1.75rem;
}

/* ── BASE CARD ───────────────────────────────────────────── */
.card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  cursor: pointer;
  box-shadow: none !important;
  animation: fadeUp .35s ease both;
  transition: transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.card:hover { transform: translateY(-5px) !important; }

/* ── THUMBNAIL ───────────────────────────────────────────── */
/* Altura fija — todas iguales, imagen recortada centrada   */
.card-thumb-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
  transition: box-shadow .25s;
}
.card:hover .card-thumb-wrap {
  box-shadow: 0 10px 32px rgba(0,0,0,0.16);
}
.card-thumb {
  width: 100%;
  height: 160px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;            /* ocultar contenido de texto fallback */
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.card:hover .card-thumb img { transform: scale(1.05); }
.card-thumb.no-img {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  font-size: 2rem;         /* restaurar para el ícono */
  color: var(--border);
}
.card-thumb .thumb-icon {
  font-size: 2rem;
  color: var(--border);
}

/* ── PRICE BADGE — dorado ────────────────────────────────── */
.price-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e8b21a;
  color: #1a1200;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.76rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
  z-index: 2;
}

/* ── CARD BODY — centrado ────────────────────────────────── */
.card-body {
  padding: 0.65rem 0.2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── TÍTULO ──────────────────────────────────────────────── */
.card-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.25;
}

/* ── CATEGORÍA ASSETS — "2D · Input Prompts" ────────────── */
.card-category {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.cat-dim  { color: var(--accent2); font-weight: 700; flex-shrink: 0; }
.cat-sep  { color: var(--accent2); font-weight: 700; flex-shrink: 0; }
.cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ETIQUETAS — "input · prompt · +3 más" ──────────────── */
.card-tags-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.5;
  gap: 0;
}
.card-tag-plain { white-space: nowrap; color: var(--muted); }
.card-tag-dot   { color: var(--accent2); padding: 0 0.28rem; font-weight: 700; flex-shrink: 0; user-select: none; }
.card-tag-more  { color: var(--muted); opacity: 0.6; padding-left: 0.28rem; white-space: nowrap; }

/* ── PLATAFORMA / TIENDAS (games) ────────────────────────── */
.card-platform {
  font-size: 0.77rem;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 0.16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.card-stores {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.18rem;
}
.store-name  { white-space: nowrap; }
.store-pipe  { color: var(--border); padding: 0 0.3rem; font-weight: 400; }

/* Ocultar estilos viejos */
.products-grid .card-tags      { display: none !important; }
.products-grid .card-meta      { display: none !important; }
.products-grid .platform-links { display: none !important; }
.products-grid .card-tag-pill  { display: none !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.75rem 1.4rem; }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.4rem 1rem; }
  .card-thumb    { height: 130px; }
  .card-title    { font-size: 0.9rem; }
}
@media (max-width: 520px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0.8rem; }
  .card-thumb    { height: 110px; }
  .card-body     { padding: 0.45rem 0.1rem 0; }
  .card-title    { font-size: 0.83rem; }
  .price-badge   { font-size: 0.68rem; padding: 0.16rem 0.4rem; top: 6px; right: 6px; }
}
@media (max-width: 360px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 0.65rem; }
  .card-thumb    { height: 95px; }
}