/* ============================================================
   INVEL — Catálogo Control de Acceso (categorías + listados)
   Carga después de invel.css + home.css
   ============================================================ */

.catalog{ background:var(--bg); }

/* ---------- selector de categorías ---------- */
.cat-pick{
  text-align:center; margin-bottom:12px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.cat-tabs{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  margin:0 auto 56px; max-width:840px;
}
.cat-tab{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 18px; cursor:pointer;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-lg);
  font-family:var(--font); text-align:center;
  transition:border-color .25s, box-shadow .25s, transform .25s, background .25s;
}
.cat-tab:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue-150); }
.cat-tab .ct-ic{
  width:46px; height:46px; border-radius:13px; background:var(--blue-50); color:var(--blue-700);
  display:grid; place-items:center; margin-bottom:4px;
  transition:background .25s, color .25s;
}
.cat-tab .ct-ic svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cat-tab b{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.cat-tab span{ font-size:12.5px; color:var(--ink-faint); }
.cat-tab[aria-selected="true"]{
  border-color:transparent; background:var(--navy-900); box-shadow:var(--shadow-lg);
}
.cat-tab[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:4px 4px 0 0;
  background:var(--grad-warm);
}
.cat-tab[aria-selected="true"] b{ color:#fff; }
.cat-tab[aria-selected="true"] span{ color:#9FB4E4; }
.cat-tab[aria-selected="true"] .ct-ic{ background:rgba(255,255,255,.14); color:#fff; }

/* ---------- panel de categoría ---------- */
.cat-panel[hidden]{ display:none; }
.cat-panel{ animation:catIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes catIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.cat-intro{ max-width:720px; margin-bottom:40px; font-size:17px; color:var(--ink-soft); text-wrap:pretty; }

.block-label{
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.block-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.block-label.own{ color:var(--blue-700); }

/* ---------- tarjeta destacada (producto propio) ---------- */
.prod-featured{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0;
  background:var(--paper); border:1.5px solid var(--blue-150); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:48px;
  transition:transform .25s, box-shadow .25s;
}
.prod-featured:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.pf-visual{
  position:relative; background:linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
  min-height:300px; display:grid; place-items:center; padding:24px;
}
.pf-visual img{ width:100%; height:100%; object-fit:contain; max-height:340px; }
.pf-visual .arc-wm{
  position:absolute; right:-90px; top:-90px; width:280px; height:280px; z-index:0;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 26px rgba(255,255,255,.06);
}
.pf-visual img{ position:relative; z-index:1; }
.pf-body{ padding:40px 40px 38px; display:flex; flex-direction:column; }
.badge{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; margin-bottom:18px;
}
.badge.own{ background:var(--grad-warm); color:#fff; }
.badge.own::before{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.badge.partner{ background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-150); }
.prod-featured h3{ font-size:clamp(24px,2.6vw,32px); font-weight:700; letter-spacing:-.018em; }
.prod-featured .pf-sub{ margin-top:4px; font-size:14.5px; color:var(--blue-700); font-weight:600; }
.prod-featured p.desc{ margin-top:16px; font-size:16px; color:var(--ink-soft); text-wrap:pretty; }

.spec-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.spec-chips .chip{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:12.5px; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:7px 11px;
}
.spec-chips .chip b{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.pf-body .pf-cta{ margin-top:26px; align-self:flex-start; }

/* ---------- grilla de terceros ---------- */
.others-note{ max-width:640px; margin-bottom:26px; font-size:14px; color:var(--ink-faint); text-wrap:pretty; }
.prod-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.prod{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.prod:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-150); }
.prod-ph{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, #EDF0F6 0 12px, #F4F6FB 12px 24px);
  border-bottom:1px solid var(--line);
}
.prod-ph span{
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:11px; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase;
  background:rgba(255,255,255,.7); padding:5px 10px; border-radius:6px;
}
.prod-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.prod h4{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.prod .p-type{ margin-top:3px; font-size:12.5px; color:var(--ink-faint); font-weight:500; }
.prod p{ margin-top:10px; font-size:14px; color:var(--ink-soft); flex:1; text-wrap:pretty; }
.prod .spec-chips{ margin-top:16px; }
.prod .p-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px; align-self:flex-start;
  font-size:14px; font-weight:600; color:var(--blue-700); text-decoration:none;
}
.prod .p-cta::after{ content:"\2192"; transition:transform .2s; }
.prod .p-cta:hover::after{ transform:translateX(4px); }

@media (max-width: 900px){
  .cat-tabs{ grid-template-columns:1fr; gap:10px; max-width:520px; }
  .cat-tab{ flex-direction:row; justify-content:flex-start; gap:14px; padding:16px 18px; text-align:left; }
  .cat-tab .ct-ic{ margin-bottom:0; }
  .prod-featured{ grid-template-columns:1fr; }
  .pf-visual{ min-height:230px; }
  .pf-body{ padding:30px 26px; }
  .prod-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .prod-grid{ grid-template-columns:1fr; }
}