/* =============================================================
   MOTRONIX — CATÁLOGO DE SOFTWARE
   Depende de style.css (tokens e componentes base).
   ============================================================= */

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s5);
}

/* ---- Card de produto -------------------------------------------- */
.produto-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  transition: border-color var(--trans), background var(--trans);
}
.produto-card:hover {
  border-color: var(--border2);
  background: var(--surface2);
}
.produto-card.is-destaque { border-color: var(--accent-line); }

.produto-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.produto-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etiqueta sobre a imagem */
.produto-card-tag {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(10, 11, 13, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border2);
  color: var(--text-2);
}
.produto-card-tag.is-accent {
  color: var(--accent-hi);
  border-color: var(--accent-line);
}

.produto-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s5);
  gap: var(--s3);
}
.produto-card-body h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.produto-card-body > p {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}

/* Lista curta de características dentro do card */
.produto-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.spec-chip {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}

/* Rodapé do card: preço + ação */
.produto-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.produto-preco {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.produto-preco .label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.produto-preco .valor {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.btn-card {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--r);
  padding: 9px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.produto-card:hover .btn-card {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-card .icon { transition: transform var(--trans); }
.produto-card:hover .btn-card .icon { transform: translateX(2px); }

/* ---- Faixa de garantias sob o catálogo --------------------------- */
.garantias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--s8);
}
.garantia-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  background: var(--bg2);
  padding: var(--s5);
}
.garantia-item .icon { color: var(--accent-hi); flex-shrink: 0; margin-top: 2px; }
.garantia-item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.garantia-item span {
  font-size: 0.8125rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ---- Responsivo -------------------------------------------------- */
@media (max-width: 900px) {
  .garantias { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .catalogo-grid { grid-template-columns: 1fr; }
}