/* ==========================================================================
   MOVIL-TECH ROMA — catálogo
   ========================================================================== */

.catPage{ background:var(--bg-2, #F7F9FC); }
.catMain{ padding-top:calc(var(--hdr-h) + 10px); }

/* ------------------------------------------------------------------ hero */
.catHero{ padding:30px 0 4px; }
.catCrumb{ margin:0 0 14px; font-size:11.5px; color:var(--gris); letter-spacing:.04em; }
.catCrumb a{ color:var(--azul); text-decoration:none; font-weight:700; }
.catCrumb span{ margin:0 6px; }
.catHero__title{
  margin:8px 0 10px; font-size:clamp(26px,3.4vw,40px); font-weight:800;
  letter-spacing:-.01em; line-height:1.05; text-transform:uppercase; color:var(--tinta);
}
.catHero__sub{ margin:0; max-width:62ch; font-size:14.5px; line-height:1.75; color:var(--gris); }

/* --------------------------------------------------------------- toolbar */
.catBody{ padding:26px 0 60px; }
.catBar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:18px;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
}
.catChips{ display:flex; flex-wrap:wrap; gap:8px; }
.catChip{
  border:1px solid var(--linea-2); background:#fff; color:#4A5164; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 16px; border-radius:999px;
  transition:transform 160ms var(--e-out,ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.catChip:active{ transform:scale(.97); }
.catChip.is-on{ background:var(--azul); border-color:var(--azul); color:#fff; box-shadow:0 8px 20px rgba(6,99,245,.28); }
@media (hover:hover) and (pointer:fine){
  .catChip:hover{ border-color:#BFD7FA; color:var(--azul); }
  .catChip.is-on:hover{ color:#fff; }
}
.catSearch{
  display:flex; align-items:center; gap:9px; flex:1 1 240px; max-width:340px;
  padding:10px 14px; border:1px solid var(--linea-2); border-radius:999px; background:var(--bg-2,#F7F9FC);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.catSearch:focus-within{ border-color:#BFD7FA; box-shadow:0 0 0 4px rgba(6,99,245,.10); background:#fff; }
.catSearch .ico{ width:16px; height:16px; color:var(--azul); flex:none; }
.catSearch input{
  border:0; background:none; outline:none; width:100%; font:inherit; font-size:13px; color:var(--tinta);
}
.catCount{ margin:0 0 14px; font-size:12px; color:var(--gris); }

/* ----------------------------------------------------------------- grid */
.catGrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
}
.prodCard{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  transition:transform .3s var(--e-out,ease), box-shadow .3s var(--e-out,ease), border-color .3s ease;
  opacity:0; transform:translateY(18px);
}
.prodCard.is-in{ opacity:1; transform:none; transition:opacity .5s var(--e-out,ease), transform .5s var(--e-out,ease); transition-delay:var(--d,0ms); }
.prodCard__fig{ margin:0; aspect-ratio:1/1; overflow:hidden; background:#F2F5FA; position:relative; }
.prodCard__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--e-out,ease); }
.prodCard__badge{
  position:absolute; left:12px; top:12px; z-index:2;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; background:var(--azul); color:#fff;
  box-shadow:0 8px 18px rgba(6,99,245,.3);
}
.prodCard__badge--off{ background:#6B7488; box-shadow:none; }
.prodCard__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.prodCard__cat{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--azul); }
.prodCard__h{ margin:0; font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--tinta); line-height:1.25; }
.prodCard__sub{ margin:0; font-size:12.5px; color:#5A6274; font-weight:600; }
.prodCard__p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--gris); flex:1; }
.prodCard__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.prodCard__price{ font-size:15px; font-weight:800; color:var(--tinta); }
.prodCard__price--ask{ font-size:12.5px; font-weight:700; color:var(--gris); }
.prodCard__stock{ font-size:11px; font-weight:700; color:#1B8A4B; }
.prodCard__stock--off{ color:#B4453C; }
.prodCard__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:10px; padding:12px 16px; border-radius:999px; text-decoration:none;
  background:var(--azul); color:#fff; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  transition:transform 160ms var(--e-out,ease), box-shadow .25s ease, background-color .25s ease;
}
.prodCard__cta .ico{ width:15px; height:15px; }
.prodCard__cta:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .prodCard:hover{ transform:translateY(-6px); box-shadow:var(--sh-hover); border-color:#D7E4FA; }
  .prodCard:hover .prodCard__fig img{ transform:scale(1.06); }
  .prodCard__cta:hover{ background:var(--azul-hover,#0553d6); box-shadow:0 12px 26px rgba(6,99,245,.32); }
}
.prodCard.is-off .prodCard__fig img{ filter:grayscale(.75) opacity(.75); }

.catEmpty{ margin:26px 0; font-size:14px; color:var(--gris); }
.catBack{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* --------------------------------------------------------------- footer */
.catFtr{ margin-top:0; border-top:1px solid var(--linea); background:#fff; }
.catFtr .ftr__barIn{ display:flex; justify-content:space-between; gap:12px; padding:18px 0; }
.catFtr p{ margin:0; font-size:11px; color:var(--gris-2); }
.catFtr a{ color:var(--gris-2); text-decoration:none; }
.catFtr a:hover{ color:var(--azul); }

/* ----------------------------------------------------------- responsive */
@media (max-width:1180px){ .catGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:860px){
  .catGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .catBar{ flex-direction:column; align-items:stretch; }
  .catSearch{ max-width:none; }
}
@media (max-width:520px){
  .catGrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .prodCard{ opacity:1; transform:none; }
}