/* ── VARIABLES ── */
:root{
  --or:#FD5217;--or2:#c93d0c;
  --dk:#111;--dk2:#171717;--dk3:#222;
  --lt:#f4f4f4;--wh:#fff;
  --border:#2a2a2a;--dim:#A5A5A5;--mid:#aaa;
  --silver:#C3C3C3;--teal:#0E2F3E;
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Montserrat',sans-serif;background:var(--dk);color:var(--wh);overflow-x:hidden;}

/* ── TOP BAR ── */
/* ── SHARED NAVBAR (mirrors main.css) ── */
.navbar{background:var(--dk);border-bottom:1px solid var(--border);padding:0;position:sticky;top:0;z-index:100;width:100%;}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:56px;width:100%;}
.logo-box{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0;}
.nav-links a{color:#aaa;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;text-decoration:none;transition:.2s;}
.nav-links a:hover{color:var(--wh);}
.nav-links a.active{color:var(--or);}
.btn-nav{background:var(--or);color:var(--wh)!important;padding:8px 20px;border-radius:2px;font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.btn-nav:hover{background:var(--or2);color:var(--wh)!important;}

/* ── BREADCRUMB BAR ── */
.breadcrumb-bar{
  background:var(--dk);
  border-bottom:1px solid var(--border);
  padding:0 2.5rem;
  height:34px;
  display:flex;align-items:center;justify-content:flex-end;
  position:sticky;top:56px;z-index:90;
}
.bc-trail{display:flex;align-items:center;gap:.4rem;font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.bc-trail a{color:#555;text-decoration:none;transition:.15s;}
.bc-trail a:hover{color:var(--or);}
.bc-sep{color:#333;}
.bc-cur{color:#888;}

/* ── HERO ── */
.cat-hero{background:var(--dk2);border-bottom:1px solid var(--border);padding:3rem 2.5rem 2.5rem;position:relative;overflow:hidden;}
.cat-hero-bg{position:absolute;right:-1rem;top:50%;transform:translateY(-50%);font-size:clamp(5rem,10vw,9rem);font-weight:900;font-style:italic;color:rgba(253,82,23,.04);white-space:nowrap;pointer-events:none;line-height:1;text-transform:uppercase;letter-spacing:-2px;}
.cat-hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2;}
.cat-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.6rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--or);margin-bottom:1rem;}
.cat-eyebrow::before{content:'';width:20px;height:2px;background:var(--or);}
.cat-hero h1{font-size:clamp(2rem,5vw,3.8rem);font-weight:900;font-style:italic;line-height:1;color:var(--wh);}
.cat-hero h1 em{color:var(--or);}
.cat-hero-desc{font-size:.82rem;color:var(--dim);line-height:1.8;max-width:640px;margin-top:1rem;}
.cat-hero-stats{display:flex;gap:0;margin-top:1.8rem;flex-wrap:wrap;}
.cat-stat{border-left:2px solid var(--border);padding:.4rem 1.6rem .4rem 1rem;}
.cat-stat:first-child{border-left:none;padding-left:0;}
.cat-stat-num{font-size:1.5rem;font-weight:900;font-style:italic;color:var(--or);line-height:1;}
.cat-stat-lbl{font-size:.55rem;color:#555;text-transform:uppercase;letter-spacing:1.5px;margin-top:2px;}

/* ── FILTER BAR ── */
.filter-bar{background:var(--dk);border-bottom:1px solid var(--border);padding:.5rem 2.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;position:sticky;top:90px;z-index:80;}
.filter-row{display:contents;}
.filter-sep{width:1px;height:18px;background:#2a2a2a;flex-shrink:0;}
.filter-divider{width:1px;height:16px;background:#222;}
.filter-label{font-size:11px;font-weight:700;color:#444;text-transform:uppercase;letter-spacing:2px;white-space:nowrap;}
.filter-btn{background:transparent;border:1px solid var(--border);color:var(--dim);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 13px;border-radius:2px;cursor:pointer;transition:.15s;}
.filter-btn:hover{border-color:var(--or);color:var(--or);}
.filter-btn.active{background:var(--or);border-color:var(--or);color:var(--wh);}
.filter-select{background:#161616;border:1px solid var(--border);color:var(--mid);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 28px 5px 10px;border-radius:2px;cursor:pointer;transition:.15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.filter-select:focus{outline:none;border-color:var(--or);}
.filter-select.active-filter{border-color:var(--or);color:var(--or);}
.result-count{margin-left:auto;font-size:11px;color:#444;letter-spacing:1px;text-transform:uppercase;font-weight:700;}

/* ── BODY ── */
.cat-body{max-width:1200px;margin:0 auto;padding:2.5rem;}

/* ── SECTION HEADER ── */
.type-section{margin-bottom:3rem;}
.type-section[style*="display:none"]{margin:0;}
.type-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:.8rem;border-bottom:1px solid var(--border);}
.type-badge{font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:2px;}
.type-title{font-size:.72rem;font-weight:700;color:#444;letter-spacing:1px;text-transform:uppercase;}

/* ── BADGE VARIANTS — Macho ── */
.type-badge.lubricado{background:rgba(253,82,23,.12);color:var(--or);border:1px solid rgba(253,82,23,.3);}
.type-badge.no-lubricado{background:rgba(255,255,255,.06);color:#ccc;border:1px solid rgba(255,255,255,.15);}
.type-badge.revestido{background:rgba(100,180,255,.1);color:#7ec8ff;border:1px solid rgba(100,180,255,.2);}

/* ── BADGE VARIANTS — Check ── */
.type-badge.piston{background:rgba(253,82,23,.12);color:var(--or);border:1px solid rgba(253,82,23,.3);}
.type-badge.swing{background:rgba(255,255,255,.06);color:#ccc;border:1px solid rgba(255,255,255,.15);}
.type-badge.tilting{background:rgba(100,180,255,.1);color:#7ec8ff;border:1px solid rgba(100,180,255,.2);}

/* ── BADGE VARIANTS — Compuerta ── */
.type-badge.flexible{background:rgba(253,82,23,.12);color:var(--or);border:1px solid rgba(253,82,23,.3);}
.type-badge.paralelo{background:rgba(255,255,255,.06);color:#ccc;border:1px solid rgba(255,255,255,.15);}
.type-badge.dividido{background:rgba(100,180,255,.1);color:#7ec8ff;border:1px solid rgba(100,180,255,.2);}
.type-badge.plana{background:rgba(100,220,150,.1);color:#7ecf9e;border:1px solid rgba(100,220,150,.2);}

/* ── BADGE VARIANTS — Mariposa ── */
.type-badge.doble{background:rgba(253,82,23,.12);color:var(--or);border:1px solid rgba(253,82,23,.3);}
.type-badge.triple{background:rgba(255,255,255,.06);color:#ccc;border:1px solid rgba(255,255,255,.15);}
.type-badge.revestida{background:rgba(100,180,255,.1);color:#7ec8ff;border:1px solid rgba(100,180,255,.2);}

/* ── CARDS GRID ── */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;}
.products-grid:empty{display:none;}

/* ── CARD ── */
.prod-card{background:var(--dk2);display:flex;flex-direction:column;transition:background .15s,border-color .15s;border:1px solid var(--border);border-radius:3px;}
.prod-card:hover{background:#1e1e1e;border-color:#333;}
.prod-card:hover{background:#1f1f1f;}
.prod-card.hidden{display:none;}
.prod-card-top{display:flex;align-items:flex-start;gap:1rem;padding:1.4rem 1.4rem 0;}
.prod-img-box{width:80px;height:80px;flex-shrink:0;background:var(--dk3);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;}
.prod-img-ph{color:#333;font-size:1.8rem;}
.prod-header{flex:1;min-width:0;}
.prod-type-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--or);margin-bottom:.3rem;}
.prod-name{font-size:18px;font-weight:900;color:var(--wh);line-height:1.1;margin-bottom:.25rem;}
.prod-brand{font-size:11px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:1.5px;display:flex;align-items:center;gap:.35rem;}
.prod-brand::before{content:'';display:block;width:12px;height:1px;background:#444;}
.prod-desc{font-size:14px;color:#666;line-height:1.7;padding:.8rem 1.4rem 1rem;flex:1;}
.prod-features{padding:0 1.4rem .8rem;display:flex;flex-direction:column;gap:.3rem;}
.prod-feature{display:flex;align-items:flex-start;gap:.5rem;font-size:13px;color:var(--dim);line-height:1.5;}
.prod-feature::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--or);flex-shrink:0;margin-top:.4rem;}
.prod-specs{border-top:1px solid var(--border);padding:1rem 1.4rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem .8rem;}
.spec-label{font-size:11px;font-weight:700;color:#444;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.2rem;}
.spec-val{font-size:13px;font-weight:700;color:var(--mid);line-height:1.3;}
.prod-footer{border-top:1px solid var(--border);padding:.8rem 1.4rem;display:flex;align-items:center;justify-content:space-between;}
.prod-ref{font-size:11px;color:#444;font-family:monospace;letter-spacing:.5px;}
.btn-mini{background:transparent;border:1px solid var(--border);color:var(--dim);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:2px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block;}
.btn-mini:hover{border-color:var(--or);color:var(--or);}

/* ── FOOTER ── */
.cat-foot{border-top:1px solid var(--border);margin-top:2rem;padding:1.2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.cat-foot-text{font-size:.62rem;color:#333;letter-spacing:.5px;}
.cat-foot-text span{color:var(--or);}
.btn-contact{background:var(--or);color:var(--wh);font-family:'Montserrat',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:10px 22px;border:none;border-radius:2px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:.2s;}
.btn-contact:hover{background:var(--or2);}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .topbar,.filter-bar,.cat-hero{padding-left:1.2rem;padding-right:1.2rem;}
  .cat-body{padding:1.5rem 1.2rem;}
  .products-grid{grid-template-columns:1fr;}
  .cat-foot{padding:1.2rem;}
  .prod-specs{grid-template-columns:1fr 1fr;}
  .filter-divider{display:none;}
}

/* ── Dynamic badge palette (data-color attribute) ── */
.type-badge[data-color="0"]{background:rgba(253,82,23,.12);color:var(--or);border:1px solid rgba(253,82,23,.3);}
.type-badge[data-color="1"]{background:rgba(255,255,255,.06);color:#ccc;border:1px solid rgba(255,255,255,.15);}
.type-badge[data-color="2"]{background:rgba(100,180,255,.1);color:#7ec8ff;border:1px solid rgba(100,180,255,.2);}
.type-badge[data-color="3"]{background:rgba(100,220,150,.1);color:#7ecf9e;border:1px solid rgba(100,220,150,.2);}
.type-badge[data-color="4"]{background:rgba(200,150,255,.1);color:#c89eff;border:1px solid rgba(200,150,255,.2);}
.type-badge[data-color="5"]{background:rgba(255,220,80,.1);color:#ffd84a;border:1px solid rgba(255,220,80,.2);}

/* ── Brand pills on cards ── */
.prod-brands{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 1.4rem 0;}
.brand-pill{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:2px 8px;border-radius:2px;border:1px solid #2a2a2a;color:#555;
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;transition:.15s;}
.brand-pill:hover{border-color:var(--or);color:var(--or);}
.brand-pill.active-brand{border-color:var(--or);color:var(--or);background:rgba(253,82,23,.08);}

/* ── Brand filter row ── */
.brand-filter-row{display:contents;}
.brand-filter-btn{background:transparent;border:1px solid #222;color:#444;
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:.35rem;}
.brand-filter-btn:hover{border-color:var(--or);color:var(--or);}
.brand-filter-btn.active{background:var(--or);border-color:var(--or);color:#fff;}
.brand-filter-btn img{height:11px;width:auto;filter:brightness(0) invert(1);opacity:.6;}

/* ── Loading / error ── */
#loading{text-align:center;padding:5rem 2rem;color:#444;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;}
#cat-error{display:none;text-align:center;padding:5rem 2rem;color:#666;}
#cat-error span{color:var(--or);font-weight:900;font-size:1.2rem;display:block;margin-bottom:.5rem;}