/* ---------- Catálogo de materiales ---------- */
.cat-inspo { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 16px; }
.cat-inspo figure { border-radius: var(--r); overflow: hidden; background: var(--bg-3); aspect-ratio: 4/3; cursor: zoom-in; }
.cat-inspo figure:nth-child(2) { aspect-ratio: auto; }
.cat-inspo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat-inspo figure:hover img { transform: scale(1.04); }

.cat-filtros { position: sticky; top: 76px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; margin-bottom: 40px; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); scrollbar-width: none; }
.cat-filtros::-webkit-scrollbar { display: none; }
.cat-filtros button { flex-shrink: 0; padding: 10px 18px; border-radius: 999px; background: var(--bg-2); color: var(--ink); font-weight: 500; font-size: .92rem; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.cat-filtros button:hover { background: var(--bg-3); }
.cat-filtros button.on { background: var(--ink); color: #fff; }
.cat-filtros button.on span { color: var(--lime); }
.cat-filtros span { font-family: var(--f-mono); font-size: .7rem; margin-left: 6px; color: var(--muted-2); }

.cat-grupo { margin-bottom: 90px; scroll-margin-top: 150px; }
.cat-grupo[hidden] { display: none; }
.cat-grupo > h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.05em; margin-bottom: 10px; }
.cat-grupo > p { color: var(--muted); max-width: 680px; margin-bottom: 36px; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-card { background: var(--bg-2); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .4s; }
.cat-card:hover { background: #fff; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); transform: translateY(-4px); }
.cat-foto { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #fff; cursor: zoom-in; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.cat-card:hover .cat-foto img { transform: scale(1.03); }
.cat-foto .mono { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); padding: 7px 11px; border-radius: 10px; font-size: .58rem; }
.cat-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.cat-body h3 { font-size: 1.3rem; letter-spacing: -.035em; margin-bottom: 8px; }
.cat-body p { color: var(--muted); font-size: .94rem; line-height: 1.5; }
.cat-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; }
.cat-specs li { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.cat-precio { margin-top: auto; align-self: flex-start; padding: 12px 20px; font-size: .92rem; }

.cat-nota { margin-top: 10px; padding: 22px 26px; border-radius: var(--r-s); background: var(--bg-2); color: var(--muted); font-size: .92rem; }
.cat-nota strong { color: var(--ink); }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cat-inspo { grid-template-columns: 1fr 1fr; }
  .cat-inspo figure:first-child { grid-column: span 2; }
  .cat-inspo figure:nth-child(2) { aspect-ratio: 3/4; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-filtros { top: 64px; margin: 0 -16px 32px; padding: 12px 16px; }
  .cat-grupo { margin-bottom: 64px; }
}