/* catalog.css — Sección catálogo, grids de productos y controles */

/* ── Sección ── */
.catalog-section{ padding:5rem 2.5rem; background:var(--k) }
.cat-inner{ max-width:1200px; margin:0 auto }
.cat-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:3rem; flex-wrap:wrap; gap:1.5rem;
}
.cat-num{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--g5); margin-bottom:.5rem }
.cat-h{ font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700; letter-spacing:-1px; color:white }
.cat-h span{ font-weight:200; color:var(--g5) }

/* ── Tabs ── */
.cat-tabs{ display:flex; gap:6px; flex-wrap:wrap }
.tab{
  padding:7px 18px; border-radius:30px; border:1px solid rgba(255,255,255,.12);
  background:transparent; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:rgba(255,255,255,.4); cursor:pointer; transition:all .2s;
}
.tab:hover{ border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.7) }
.tab.on{ background:white; color:var(--k); border-color:white; font-weight:700 }

/* ── Controles (búsqueda y sort) ── */
.cat-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:2rem }
.search-box{ flex:1; min-width:200px; position:relative }
.search-box input{
  width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15);
  border-radius:8px; padding:9px 14px 9px 36px; font-size:13px; color:white;
  outline:none; font-family:inherit; transition:border .2s;
}
.search-box input::placeholder{ color:rgba(255,255,255,0.35) }
.search-box input:focus{ border-color:rgba(255,255,255,0.4) }
.search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.45; pointer-events:none }
.sort-select{
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15);
  border-radius:8px; padding:9px 14px; font-size:12px; color:rgba(255,255,255,0.7);
  outline:none; font-family:inherit; cursor:pointer; transition:border .2s;
}
.sort-select:focus{ border-color:rgba(255,255,255,0.4) }
.results-count{ font-size:11px; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:1px; white-space:nowrap }
.no-results{ grid-column:1/-1; text-align:center; padding:4rem 2rem; color:rgba(255,255,255,0.3); font-size:14px }

/* ── Grid Metal Premium ── */
.prod-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,.06); margin-bottom:3rem;
}
.prod-card{ background:var(--k); cursor:pointer; transition:background .2s; overflow:hidden }
.prod-card:hover{ background:#141414 }
.prod-img-wrap{ position:relative; height:200px; background:#111; overflow:hidden }
.prod-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .3s }
.prod-card:hover .prod-img-wrap img{ transform:scale(1.04) }
.prod-badge{
  position:absolute; top:10px; left:10px; font-size:9px; text-transform:uppercase;
  letter-spacing:1px; background:white; color:var(--k); padding:3px 8px; border-radius:2px; font-weight:700;
}
.add-to-cart-btn{
  position:absolute; bottom:10px; right:10px; background:white; color:var(--k);
  border:none; font-size:10px; font-weight:700; padding:5px 10px; border-radius:4px;
  cursor:pointer; opacity:0; transition:opacity .2s; text-transform:uppercase; letter-spacing:.5px;
}
.prod-card:hover .add-to-cart-btn{ opacity:1 }
.var-dots{ position:absolute; bottom:10px; left:10px; display:flex; gap:4px }
.vd{
  width:7px; height:7px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  cursor:pointer; transition:all .2s;
}
.vd.on{ border-color:white; transform:scale(1.3); background:white }
.prod-info{ padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-end }
.prod-ref{ font-size:9px; color:var(--g5); letter-spacing:.5px; margin-bottom:3px; text-transform:uppercase }
.prod-name{ font-size:13px; font-weight:600; color:white }
.prod-vars{ font-size:11px; color:var(--g5); margin-top:4px }
.prod-price-tag{ text-align:right }
.prod-price-val{ font-size:14px; font-weight:700; color:white }
.prod-price-sub{ font-size:9px; color:var(--g5); text-transform:uppercase; letter-spacing:.5px }

/* ── Card qty input (en imagen) ── */
.card-qty-wrap{
  position:absolute; bottom:10px; right:10px; display:none;
  align-items:center; gap:4px;
}
.prod-card:hover .card-qty-wrap{ display:flex }
.card-qty-btn{
  background:rgba(255,255,255,.9); border:none; width:24px; height:24px;
  border-radius:4px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.card-qty-input{
  width:36px; text-align:center; background:rgba(255,255,255,.9); border:none;
  border-radius:4px; padding:3px; font-size:13px; font-weight:600;
}

/* ── Grid Equipamiento ── */
.eq-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,.06); margin-bottom:3rem;
}
.eq-card{ background:var(--k); cursor:pointer; transition:background .2s; overflow:hidden; position:relative }
.eq-card:hover{ background:#141414 }
.eq-img{ height:180px; overflow:hidden }
.eq-img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s }
.eq-card:hover .eq-img img{ transform:scale(1.04) }
.eq-add-btn{
  position:absolute; top:10px; right:10px; background:white; color:var(--k);
  border:none; font-size:10px; font-weight:700; padding:5px 10px; border-radius:4px;
  cursor:pointer; opacity:0; transition:opacity .2s; text-transform:uppercase;
}
.eq-card:hover .eq-add-btn{ opacity:1 }
.eq-info{ padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-end }
.eq-name{ font-size:13px; font-weight:600; color:white }
.eq-cat{ font-size:10px; color:var(--g5); text-transform:uppercase; letter-spacing:1px; margin-top:3px }
.eq-price{ font-size:14px; font-weight:700; color:white }

.cat-cta{ display:flex; justify-content:center }

/* ── Estados sin stock (catálogo dinámico) ─────────────────────── */
.prod-sin-stock-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(220,38,38,.95); color:white; font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:6px 14px; border-radius:4px;
  z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.vd.vd-sin-stock{
  opacity:.35; background:repeating-linear-gradient(45deg,rgba(255,255,255,.2),rgba(255,255,255,.2) 1px,transparent 1px,transparent 3px);
}
.vd.vd-sin-stock.on{ opacity:.55 }
.prod-card-disabled .add-to-cart-btn,
.add-to-cart-btn:disabled{
  background:#444 !important; color:#aaa !important; cursor:not-allowed; opacity:1 !important;
}
.eq-card-disabled .eq-add-btn,
.eq-add-btn:disabled{
  background:#444; color:#aaa; cursor:not-allowed;
}
.prod-card-disabled .prod-img-wrap img,
.eq-card-disabled .eq-img img{ filter:grayscale(.4) brightness(.85) }