/* =====================================================================
   Banner de categoría · configurador
   Todo cuelga de .mbmi-catbanner. Ni una regla suelta: no puede afectar
   al tema ni al módulo de filtros.
   ===================================================================== */

.mbmi-catbanner{
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;padding:14px 18px;
  border:1px solid #dbe6fb;border-radius:14px;
  background:linear-gradient(120deg,#f4f8ff 0%,#fff 62%);
  text-decoration:none!important;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}

.mbmi-catbanner:hover{
  border-color:#a9c9f8;
  box-shadow:0 10px 24px rgba(31,59,96,.10);
  transform:translateY(-1px)}

.mbmi-catbanner__ico{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border-radius:11px;
  background:#e7f0ff;color:#2f6fe4}

.mbmi-catbanner__ico svg{
  width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.mbmi-catbanner__txt{flex:1 1 auto;min-width:0}

.mbmi-catbanner__txt b{
  display:block;color:#0f172a;font-size:15px;font-weight:800;line-height:1.25}

.mbmi-catbanner__txt small{
  display:block;margin-top:2px;color:#64748b;font-size:13px;line-height:1.4}

/* Título corto: solo aparece en móvil, donde el largo no cabe en una línea. */
.mbmi-catbanner__short{display:none}

.mbmi-catbanner__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:999px;
  background:#2f6fe4;color:#fff;
  font-size:13.5px;font-weight:700;white-space:nowrap}

.mbmi-catbanner__cta i{font-style:normal;font-size:15px;line-height:1}

@media (max-width:640px){
  /* En móvil pasa a ser un botón de una sola línea. Como tarjeta con título,
     texto y CTA ocupaba casi 140 px y empujaba los productos fuera de la
     primera pantalla, que es justo lo que no interesa en una categoría. */
  .mbmi-catbanner{
    gap:10px;margin-bottom:14px;padding:9px 12px;
    border-radius:999px;flex-wrap:nowrap;align-items:center}
  .mbmi-catbanner__ico{width:30px;height:30px;border-radius:50%}
  .mbmi-catbanner__ico svg{width:17px;height:17px}
  .mbmi-catbanner__txt{
    flex:1 1 auto;min-width:0;
    display:flex;align-items:center}
  .mbmi-catbanner__txt b{
    font-size:13.5px;font-weight:700;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Si hay título corto, manda él y se esconde el largo. */
  .mbmi-catbanner__txt:has(.mbmi-catbanner__short) b{display:none}
  .mbmi-catbanner__short{
    display:block;font-style:normal;font-size:13.5px;font-weight:700;
    color:#0f172a;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* El texto largo sobra: en una línea no cabe y el título ya lo dice. */
  .mbmi-catbanner__txt small{display:none}
  /* El botón se reduce a la flecha: el banner entero ya es pulsable. */
  .mbmi-catbanner__cta{
    width:auto;padding:0;background:none;color:#2f6fe4;
    font-size:0;min-height:0}
  .mbmi-catbanner__cta i{font-size:17px;line-height:1}
}

@media (pointer:coarse){
  .mbmi-catbanner__cta{min-height:46px}
}

@media (prefers-reduced-motion:reduce){
  .mbmi-catbanner{transition:none}
  .mbmi-catbanner:hover{transform:none}
}