/* =========================================================

   OneMobile — Catálogo

   Vuexy + Ecommerce

   Versión 20260924.3

========================================================= */


body {

  background:

    radial-gradient(

      circle at 0% 0%,

      rgba(61, 103, 242, .045),

      transparent 31rem

    ),

    radial-gradient(

      circle at 100% 9%,

      rgba(36, 48, 86, .03),

    transparent 30rem

    ),

    var(--bs-body-bg, #f4f5fd);

}


.d-none {

  display: none !important;

}


.icon-base,

.icon-base::before {

  color: currentColor !important;

  line-height: 1;

}


.om-catalog-page {

  --om-primary: #3d67f2;

  --om-primary-dark: #3157d5;

  --om-primary-rgb: 61, 103, 242;

  --om-primary-soft: #eef3ff;


  --om-success: #17a35b;


  --om-title: #243056;

  --om-text: #6f7899;

  --om-muted: #9098b5;


  --om-border: #e7ebf5;

  --om-border-strong: #dfe5f2;


  --om-card: #fff;

  --om-surface: #fbfcff;

  --om-black: #111111;


  --om-radius: .5rem;

  --om-radius-sm: .375rem;


  --om-shadow:

    0 8px 22px rgba(34, 51, 110, .05);


  --om-shadow-hover:

    0 15px 34px rgba(34, 51, 110, .085);


  --bs-primary: var(--om-primary);

  --bs-primary-rgb: var(--om-primary-rgb);

  --bs-heading-color: var(--om-title);

  --bs-body-color: var(--om-title);

  --bs-secondary-color: var(--om-text);

  --bs-border-color: var(--om-border);


  min-height: calc(100vh - 10rem);

  padding-bottom: 1.5rem;


  /*

   * Tipografía:

   * hereda exactamente la familia cargada por Vuexy.

   * Evitamos pesos 650/750/850/900 que pueden provocar

   * síntesis o fallback visual dependiendo del navegador.

   */

  font-family: var(

    --bs-body-font-family,

    "Public Sans",

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif

  );

  font-synthesis: none;

}


.om-catalog-page,

.om-catalog-page button,

.om-catalog-page input,

.om-catalog-page select,

.om-catalog-page textarea,

.om-catalog-page .btn {

  font-family: inherit !important;

}


.om-catalog-page button,

.om-catalog-page input,

.om-catalog-page select,

.om-catalog-page textarea {

  font: inherit;

}


.om-catalog-container {

  max-width: var(--om-catalog-layout-max);

  margin-inline: auto;

}


/* =========================================================

   General cards

========================================================= */


.om-catalog-page .card {

  border-color: var(--om-border);

}


.om-catalog-hero-card,

.om-filter-card,

.om-product-card,

.om-catalog-loader,

.om-empty-state {

  overflow: hidden;


  border: 1px solid var(--om-border);

  border-radius: var(--om-radius);


  background: var(--om-card);


  box-shadow: var(--om-shadow);

}


/* =========================================================

   Buttons

========================================================= */


.om-btn-primary {

  min-height: 2.62rem;


  border-color: var(--om-black) !important;

  border-radius: var(--om-radius-sm) !important;


  background: var(--om-black) !important;

  color: #fff !important;


  box-shadow:

    0 8px 16px rgba(17, 17, 17, .12) !important;


  font-weight: 700;


  transition:

    transform .18s ease,

    box-shadow .18s ease,

    background .18s ease;

}


.om-btn-primary:hover,

.om-btn-primary:focus {

  transform: translateY(-1px);


  border-color: #000 !important;

  background: #000 !important;

  color: #fff !important;


  box-shadow:

    0 11px 21px rgba(17, 17, 17, .17) !important;

}


.om-btn-light {

  min-height: 2.5rem;


  border: 1px solid #dde4f4 !important;

  border-radius: var(--om-radius-sm) !important;


  background: #f4f6fb !important;

  color: #455274 !important;


  box-shadow: none !important;


  font-weight: 600;


  transition:

    transform .18s ease,

    border-color .18s ease,

    background .18s ease;

}


.om-btn-light:hover,

.om-btn-light:focus {

  transform: translateY(-1px);


  border-color: #cfd8ed !important;

  background: #edf1f8 !important;


  color: var(--om-title) !important;

}


/* =========================================================

   Layout

========================================================= */


.om-catalog-layout {

  display: grid;


  grid-template-columns:

    17rem

    minmax(0, 1fr);


  grid-template-areas:

    "filters products";


  gap: 1.15rem;


  align-items: start;

}


.om-catalog-main {

  grid-area: products;

  min-width: 0;

}


/* =========================================================

   Hero / barra blanca

========================================================= */


.om-catalog-hero-card {

  margin-bottom: 1.05rem;

}


.om-catalog-hero-card > .card-body {

  min-height: 8rem;


  display: flex;

  align-items: center;

  justify-content: space-between;


  gap: 1.4rem;


  padding: 1.15rem 1.25rem;

}


.om-catalog-eyebrow {

  display: block;


  margin-bottom: .28rem;


  color: var(--om-primary);


  font-size: .66rem;

  font-weight: 700;

  letter-spacing: .06em;

}


.om-catalog-title {

  margin: 0;


  color: var(--om-title);


  font-size:

    clamp(1.4rem, 1.7vw, 1.8rem);


  font-weight: 700;

  letter-spacing: -.025em;

  line-height: 1.08;

}


.om-catalog-subtitle {

  max-width: 45rem;


  margin: .42rem 0 0;


  color: var(--om-text);


  font-size: .84rem;

  line-height: 1.5;

}


.om-online-price-notice {

  max-width: 44rem;


  display: flex;

  align-items: flex-start;


  gap: .55rem;


  margin-top: .72rem;

  padding: .62rem .7rem;


  border: 1px solid #dce5ff;

  border-radius: var(--om-radius-sm);


  background: #f4f7ff;


  color: #526083;


  font-size: .68rem;

  line-height: 1.4;

}


.om-online-price-icon {

  width: 1.8rem;

  height: 1.8rem;


  flex: 0 0 auto;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  border-radius: var(--om-radius-sm);


  background: var(--om-primary-soft);

  color: var(--om-primary);


  font-size: .88rem;

}


.om-online-price-notice div {

  min-width: 0;


  display: flex;

  flex-direction: column;

}


.om-online-price-notice strong {

  color: var(--om-title);


  font-size: .7rem;

  font-weight: 700;

}


.om-online-price-notice span {

  margin-top: .05rem;

}


/* Summary */

.om-catalog-hero-summary {

  min-width: 15rem;


  display: flex;

  align-items: center;

  justify-content: flex-end;


  gap: .65rem;

}


.om-catalog-summary-icon {

  width: 2.55rem;

  height: 2.55rem;


  flex: 0 0 auto;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  border-radius: var(--om-radius);


  background: var(--om-primary-soft);

  color: var(--om-primary-dark);


  font-size: 1.05rem;


  transition:

    transform .22s ease,

    box-shadow .22s ease;

}


.om-catalog-hero-card:hover .om-catalog-summary-icon {

  transform: translateY(-2px) rotate(-2deg);


  box-shadow:

    0 7px 15px rgba(61, 103, 242, .12);

}


.om-catalog-summary-copy {

  min-width: 0;


  display: grid;

  gap: .08rem;

}


.om-catalog-count {

  color: var(--om-title);


  font-size: .78rem;

  font-weight: 700;


  white-space: nowrap;

}


.om-catalog-summary-copy small {

  color: var(--om-muted);


  font-size: .67rem;

  font-weight: 600;

  line-height: 1.35;

}


/* =========================================================

   Filter

========================================================= */


.om-filter-card {

  grid-area: filters;


  position: sticky;

}


.om-filter-card .card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;


  gap: .65rem;


  padding: .9rem .95rem;


  border-bottom: 1px solid var(--om-border);


  background: #fff;

}


.om-filter-card .card-body {

  padding: .95rem;

}


.om-filter-header-copy {

  min-width: 0;


  display: flex;

  align-items: center;


  gap: .58rem;

}


.om-filter-header-icon {

  width: 2rem;

  height: 2rem;


  flex: 0 0 auto;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  border-radius: var(--om-radius-sm);


  background: var(--om-primary-soft);

  color: var(--om-primary-dark);


  font-size: .92rem;

}


.om-filter-kicker {

  display: block;


  margin-bottom: .08rem;


  color: var(--om-primary);


  font-size: .52rem;

  font-weight: 700;

  letter-spacing: .045em;

}


.om-filter-title {

  color: var(--om-title);


  font-size: .9rem;

  font-weight: 700;

  line-height: 1.2;

}


.om-reset-filters {

  padding: .3rem .42rem;


  border: 0;


  background: transparent;

  color: var(--om-text);


  font-size: .66rem;

  font-weight: 600;


  transition:

    color .18s ease,

    background .18s ease,

    transform .18s ease;

}


.om-reset-filters:hover,

.om-reset-filters:focus {

  transform: translateY(-1px);


  background: #f4f6fb;

  color: var(--om-primary-dark);

}


.om-filter-block {

  margin-bottom: 1rem;

  padding-bottom: 1rem;


  border-bottom: 1px solid var(--om-border);

}


.om-filter-block-last {

  margin-bottom: 0;

  padding-bottom: 0;


  border-bottom: 0;

}


.om-filter-subtitle {

  margin: 0 0 .7rem;


  color: var(--om-title);


  font-size: .7rem;

  font-weight: 700;

  letter-spacing: .025em;

  text-transform: uppercase;

}


.om-filter-label-row {

  display: flex;

  align-items: center;

  justify-content: space-between;


  gap: .5rem;


  margin-bottom: .65rem;

}


.om-filter-help {

  padding: .18rem .36rem;


  border-radius: var(--om-radius-sm);


  background: #f4f6fb;


  color: var(--om-muted);


  font-size: .58rem;

  font-weight: 600;

}


/* Brands */

.om-brand-list {

  display: grid;

  gap: .38rem;

}


.om-brand-option {

  position: relative;


  display: block;


  margin: 0;


  cursor: pointer;

  user-select: none;

}


.om-brand-option input {

  position: absolute;


  opacity: 0;

  pointer-events: none;

}


.om-brand-option-ui {

  min-height: 2.2rem;


  display: flex;

  align-items: center;


  padding: .48rem .62rem;


  border: 1px solid transparent;

  border-radius: var(--om-radius-sm);


  color: var(--om-text);


  font-size: .76rem;

  font-weight: 700;


  transition:

    transform .16s ease,

    background .16s ease,

    border-color .16s ease,

    color .16s ease;

}


.om-brand-option:hover .om-brand-option-ui {

  transform: translateX(2px);


  background: #f8f9fc;

  color: var(--om-title);

}


.om-brand-option input:checked + .om-brand-option-ui {

  border-color: #dce5ff;


  background: var(--om-primary-soft);

  color: var(--om-primary-dark);


  font-weight: 700;

}


.om-brand-option input:checked + .om-brand-option-ui::after {

  width: .4rem;

  height: .4rem;


  margin-left: auto;


  border-radius: 50%;


  background: var(--om-primary);


  content: "";

}


/* Ranges */

.om-range-labels {

  display: flex;

  justify-content: space-between;


  gap: .75rem;


  margin-bottom: .68rem;


  color: var(--om-title);


  font-size: .71rem;

  font-weight: 700;

}


.om-range-wrap {

  position: relative;


  height: 1.75rem;

}


.om-range-track,

.om-range-progress {

  position: absolute;


  top: .82rem;


  height: .22rem;


  border-radius: 50rem;

}


.om-range-track {

  right: 0;

  left: 0;


  background: #e7ebf4;

}


.om-range-progress {

  background: var(--om-primary);

}


.om-range-input {

  position: absolute;


  top: .31rem;

  left: 0;


  width: 100%;

  height: 1.2rem;


  margin: 0;


  pointer-events: none;


  appearance: none;

  -webkit-appearance: none;


  background: transparent;

}


.om-range-input::-webkit-slider-thumb {

  width: .96rem;

  height: .96rem;


  pointer-events: auto;


  appearance: none;

  -webkit-appearance: none;


  border: 2px solid var(--om-primary);

  border-radius: 50%;


  background: #fff;


  box-shadow:

    0 0 0 .18rem rgba(var(--om-primary-rgb), .1);


  cursor: pointer;


  transition:

    transform .16s ease,

    box-shadow .16s ease;

}


.om-range-input::-webkit-slider-thumb:hover {

  transform: scale(1.08);


  box-shadow:

    0 0 0 .28rem rgba(var(--om-primary-rgb), .1);

}


.om-range-input::-moz-range-thumb {

  width: .96rem;

  height: .96rem;


  pointer-events: auto;


  border: 2px solid var(--om-primary);

  border-radius: 50%;


  background: #fff;


  box-shadow:

    0 0 0 .18rem rgba(var(--om-primary-rgb), .1);


  cursor: pointer;

}


/* =========================================================

   Products

========================================================= */


.om-products-wrap {

  min-height: 26rem;

}


.om-products-grid {

  display: grid;


  grid-template-columns:

    repeat(4, minmax(0, 1fr));


  gap: .9rem;

}


.om-product-card {

  height: 100%;


  display: flex;

  flex-direction: column;


  border-color: var(--om-border-strong);


  box-shadow:

    0 6px 17px rgba(34, 51, 110, .04);


  transition:

    transform .2s ease,

    border-color .2s ease,

    box-shadow .2s ease;


}


.om-product-card.is-entering {

  animation:

    omProductIn .34s

    cubic-bezier(.2, .8, .2, 1)

    both;


  animation-delay:

    calc(var(--om-card-index, 0) * 28ms);

}


.om-product-card:hover {

  transform: translateY(-4px);


  border-color:

    rgba(var(--om-primary-rgb), .23);


  box-shadow: var(--om-shadow-hover);

}


/* Product image */

.om-product-media {

  position: relative;


  min-height: 12rem;


  display: flex;

  align-items: center;

  justify-content: center;


  overflow: hidden;


  padding: .9rem;


  border-bottom: 1px solid var(--om-border);


  background:

    radial-gradient(

      circle at 50% 12%,

      rgba(var(--om-primary-rgb), .09),

      transparent 8rem

    ),

    linear-gradient(

      180deg,

      #fff 0%,

      #f5f7fd 100%

    );

}


.om-product-media::before {

  content: "";


  position: absolute;


  top: 10%;

  left: 50%;


  width: 7rem;

  height: 7rem;


  border-radius: 50%;


  background:

    radial-gradient(

      circle,

      rgba(var(--om-primary-rgb), .08),

      transparent 68%

    );


  transform: translateX(-50%);


  transition:

    transform .25s ease,

    opacity .25s ease;

}


.om-product-media::after {

  content: "";


  position: absolute;


  right: .9rem;

  bottom: .48rem;

  left: .9rem;


  height: 1.35rem;


  border-radius: 50%;


  background: rgba(35,48,86,.045);


  filter: blur(.42rem);


  pointer-events: none;

}


.om-product-media img {

  position: relative;

  z-index: 1;


  width: 100%;

  height: 10rem;


  display: block;


  object-fit: contain;


  transition:

    transform .25s ease;

}


.om-product-card:hover .om-product-media img {

  transform:

    translateY(-2px)

    scale(1.035);

}


.om-product-card:hover .om-product-media::before {

  transform:

    translateX(-50%)

    scale(1.1);

}


/* Product body */

.om-product-card .card-body {

  flex: 1 1 auto;


  display: flex;

  flex-direction: column;


  padding: .85rem;

}


.om-product-brand {

  align-self: flex-start;


  max-width: 100%;


  margin-bottom: .5rem;

  padding: .22rem .44rem;


  overflow: hidden;


  border: 1px solid #e3e8f4;

  border-radius: var(--om-radius-sm);


  background: #f7f9fc;

  color: #68738f;


  font-size: .58rem;

  font-weight: 700;

  letter-spacing: .03em;


  text-overflow: ellipsis;

  text-transform: uppercase;

  white-space: nowrap;

}


.om-product-brand i {

  color: var(--om-primary);

}


.om-product-name {

  min-height: 2.4rem;


  display: -webkit-box;


  margin: 0 0 .7rem;


  overflow: hidden;


  color: var(--om-title);


  font-size: .9rem;

  font-weight: 700;

  line-height: 1.35;


  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}


.om-product-pricing {

  margin-top: auto;

}


/* Price preview */

.om-payment-preview {

  overflow: hidden;


  border: 1px solid #dce5ff;

  border-radius: var(--om-radius);


  background: #fff;

}


.om-credit-preview {

  padding: .68rem .72rem;


  background:

    radial-gradient(

      circle at 100% 0%,

      rgba(var(--om-primary-rgb), .11),

      transparent 7rem

    ),

    linear-gradient(

      135deg,

      rgba(var(--om-primary-rgb), .06),

      rgba(var(--om-primary-rgb), .015)

    );

}


.om-credit-preview-head,

.om-credit-preview-price,

.om-cash-preview {

  display: flex;

  align-items: center;

  justify-content: space-between;


  gap: .55rem;

}


.om-credit-preview-head {

  margin-bottom: .3rem;


  color: var(--om-primary-dark);


  font-size: .63rem;

  font-weight: 700;

}


.om-credit-preview-head span {

  display: inline-flex;

  align-items: center;


  gap: .25rem;

}


.om-credit-preview-head small {

  color: var(--om-text);


  font-size: .57rem;

  font-weight: 700;

}


.om-credit-preview-price > span {

  color: var(--om-text);


  font-size: .66rem;

  font-weight: 700;

}


.om-credit-preview-price strong {

  color: var(--om-primary-dark);


  font-size: 1rem;

  font-weight: 700;

  letter-spacing: -.025em;

  line-height: 1;


  white-space: nowrap;

}


.om-credit-preview-price strong small {

  color: var(--om-text);


  font-size: .58rem;

  font-weight: 700;

}


.om-payment-preview--unavailable {

  border-color: var(--om-border);

}


.om-payment-preview--unavailable .om-credit-preview {

  background: #fbfcff;

}


.om-payment-preview--unavailable

.om-credit-preview-price strong {

  color: var(--om-title);


  font-size: .76rem;

  letter-spacing: 0;

}


.om-cash-preview {

  min-height: 2.2rem;


  padding: .5rem .72rem;


  border-top: 1px solid var(--om-border);


  background: #fbfcff;

}


.om-cash-preview span {

  color: var(--om-text);


  font-size: .64rem;

  font-weight: 700;

}


.om-cash-preview strong {

  color: var(--om-title);


  font-size: .75rem;

  font-weight: 700;


  white-space: nowrap;

}


.om-cash-preview--muted strong {

  color: var(--om-text);


  font-size: .67rem;

  font-weight: 600;

}


/* Footer */

.om-product-card .card-footer {

  padding:

    0

    .85rem

    .85rem;


  border-top: 0;


  background: transparent;

}


.om-product-cta {

  min-height: 2.55rem;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  font-size: .74rem;

}


.om-product-cta i {

  transition:

    transform .18s ease;

}


.om-product-cta:hover i {

  transform:

    translateX(3px);

}


/* =========================================================

   Loader

========================================================= */


.om-catalog-loader {

  box-shadow: none;

}


.om-catalog-loader .card-body {

  min-height: 20rem;


  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;


  gap: .38rem;


  color: var(--om-text);


  font-size: .78rem;

}


.om-catalog-loader .card-body strong {

  color: var(--om-title);


  font-size: .86rem;

  font-weight: 700;

}


.om-catalog-loader .card-body > span {

  color: var(--om-muted);


  font-size: .72rem;

  font-weight: 600;

}


.om-loader-visual {

  width: min(14rem, 80%);


  display: grid;

  grid-template-columns:

    2.8rem

    minmax(3rem, 1fr)

    2.8rem;


  align-items: center;


  gap: .5rem;


  margin-bottom: .7rem;

}


.om-loader-phone,

.om-loader-card-icon {

  width: 2.8rem;

  height: 2.8rem;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  border-radius: var(--om-radius);


  font-size: 1.05rem;

}


.om-loader-phone {

  border: 1px solid #dce5ff;


  background: var(--om-primary-soft);

  color: var(--om-primary);

}


.om-loader-card-icon {

  border: 1px solid var(--om-border);


  background: #f7f8fc;

  color: var(--om-title);

}


.om-loader-line {

  position: relative;


  height: .22rem;


  overflow: hidden;


  border-radius: 2rem;


  background: #e9edf5;

}


.om-loader-line::after {

  content: "";


  position: absolute;

  inset: 0;


  width: 42%;


  border-radius: inherit;


  background:

    linear-gradient(

      90deg,

      var(--om-primary),

      #7d98ff

    );


  animation:

    omLoaderFlow 1.25s ease-in-out infinite;

}


/* =========================================================

   Empty / error

========================================================= */


.om-empty-state {

  min-height: 14rem;


  border-style: dashed;

  box-shadow: none;


  background:

    radial-gradient(

      circle at 50% 0%,

      rgba(var(--om-primary-rgb), .045),

      transparent 12rem

    ),

    #fff;

}


.om-empty-state .card-body {

  min-height: 14rem;


  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;


  padding: 1.8rem 1rem;


  text-align: center;

}


.om-empty-icon {

  width: 3.35rem;

  height: 3.35rem;


  flex: 0 0 auto;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  margin-bottom: .8rem;


  border-radius: var(--om-radius);


  background: var(--om-primary-soft);

  color: var(--om-primary);


  font-size: 1.25rem;

}


.om-empty-state strong {

  display: block;


  max-width: 34rem;


  margin: 0;


  color: var(--om-title);


  font-size: .9rem;

  font-weight: 700;

  line-height: 1.35;

}


.om-empty-description {

  display: block;


  max-width: 34rem;


  margin-top: .3rem !important;


  color: var(--om-text);


  font-size: .76rem;

  font-weight: 400;

  line-height: 1.5;

}


.om-empty-state .btn {

  flex: 0 0 auto;

}


.om-empty-state.is-load-error {

  border-style: solid;

}


.om-empty-state.is-load-error .om-empty-icon {

  background: #fff2f2;

  color: #c34b4b;

}


/* =========================================================

   Pagination

========================================================= */


.om-pagination {

  display: flex;

  align-items: center;

  justify-content: center;


  gap: .65rem;


  margin-top: 1.2rem;

}


.om-pagination-btn {

  min-width: 7.5rem;

  min-height: 2.45rem;


  font-size: .75rem;

}


.om-pagination-info {

  min-width: 6rem;


  color: var(--om-text);


  font-size: .74rem;

  font-weight: 600;


  text-align: center;

}


/* =========================================================

   Reveal / motion

========================================================= */


.om-reveal {

  animation:

    omReveal .42s

    cubic-bezier(.2,.8,.2,1)

    both;

}


.om-reveal-1 {

  animation-delay: .06s;

}


@keyframes omReveal {

  from {

    opacity: 0;

    transform: translateY(7px);

  }


  to {

    opacity: 1;

    transform: translateY(0);

  }

}


@keyframes omProductIn {

  from {

    opacity: 0;

    transform: translateY(8px);

  }


  to {

    opacity: 1;

    transform: translateY(0);

  }

}


@keyframes omLoaderFlow {

  from {

    transform: translateX(-115%);

  }


  to {

    transform: translateX(245%);

  }

}


/* =========================================================

   Responsive

========================================================= */


@media (min-width: 1700px) {

  .om-products-grid {

    grid-template-columns:

      repeat(5, minmax(0, 1fr));

  }

}


@media (max-width: 1399.98px) {

  .om-products-grid {

    grid-template-columns:

      repeat(3, minmax(0, 1fr));

  }

}


@media (max-width: 1199.98px) {

  .om-catalog-layout {

    grid-template-columns: 1fr;


    grid-template-areas:

      "products"

      "filters";

  }


  .om-filter-card {

    position: static;

  }

}


@media (max-width: 767.98px) {

  .om-catalog-page {

    padding-bottom: 2rem;

  }


  .om-catalog-hero-card > .card-body {

    min-height: 0;


    align-items: flex-start;

    flex-direction: column;


    gap: .9rem;


    padding: 1rem;

  }


  .om-catalog-hero-summary {

    width: 100%;

    min-width: 0;


    justify-content: flex-start;

  }


  .om-mobile-filter-toggle {

    margin-left: auto;

  }


  .om-products-grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));


    gap: .68rem;

  }


  .om-product-media {

    min-height: 10.5rem;


    padding: .7rem;

  }


  .om-product-media img {

    height: 8.6rem;

  }


  .om-product-card .card-body {

    padding: .7rem;

  }


  .om-product-card .card-footer {

    padding:

      0

      .7rem

      .7rem;

  }


  .om-product-name {

    min-height: 2.25rem;


    margin-bottom: .6rem;


    font-size: .78rem;

  }


  .om-product-brand {

    margin-bottom: .42rem;


    font-size: .54rem;

  }


  .om-credit-preview,

  .om-cash-preview {

    padding-right: .52rem;

    padding-left: .52rem;

  }


  .om-credit-preview-price strong {

    font-size: .84rem;

  }


  .om-credit-preview-price > span,

  .om-cash-preview span {

    font-size: .57rem;

  }


  .om-cash-preview strong {

    font-size: .66rem;

  }


  .om-product-cta {

    min-height: 2.35rem;


    padding: .4rem;


    font-size: .67rem;

  }


  .om-filter-card .card-header,

  .om-filter-card .card-body {

    padding: .9rem;

  }


  .om-brand-list {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));


    gap: .42rem;

  }


  .om-brand-option-ui {

    justify-content: center;


    padding-right: .45rem;

    padding-left: .45rem;


    font-size: .7rem;

  }


  .om-brand-option

  input:checked

  + .om-brand-option-ui::after {

    display: none;

  }


  .om-pagination {

    gap: .4rem;

  }


  .om-pagination-btn {

    min-width: auto;

  }

}


@media (max-width: 420px) {

  .om-products-grid {

    grid-template-columns: 1fr;

  }


  .om-product-media {

    min-height: 12.5rem;

  }


  .om-product-media img {

    height: 10.3rem;

  }

}


/* =========================================================

   Reduced motion

========================================================= */


@media (prefers-reduced-motion: reduce) {

  .om-catalog-page *,

  .om-catalog-page *::before,

  .om-catalog-page *::after {

    animation-duration: .001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .001ms !important;

    scroll-behavior: auto !important;

  }

}


/* =========================================================

   Filtros suaves · 20260813.6

========================================================= */


.om-filter-card.is-filtering .om-filter-header-icon {

  transform: rotate(-8deg) scale(1.04);

}


.om-filter-header-icon {

  transition:

    transform .18s ease,

    background .18s ease;

}


.om-filter-card.is-filtering .om-filter-header-icon {

  background: #e8efff;

}


/*

 * Mientras el usuario arrastra un rango solo se actualizan

 * las etiquetas y la barra. El grid permanece completamente estable.

 */

.om-range-input:active::-webkit-slider-thumb {

  transform: scale(1.06);

  box-shadow:

    0 0 0 .3rem rgba(var(--om-primary-rgb), .1);

}


.om-range-input:active::-moz-range-thumb {

  transform: scale(1.06);

  box-shadow:

    0 0 0 .3rem rgba(var(--om-primary-rgb), .1);

}


/* Cambio de productos sin fade global */

.om-products-grid.is-refreshing .om-product-card {

  pointer-events: none;

}


/* Primera carga únicamente */


/* =========================================================

   Tipografía estable + filtros vivos · 20260813.7

========================================================= */


/*

 * Usar inherit en el contenido generado por JS evita que botones,

 * precios o textos creados después terminen con otra familia.

 */

.om-product-card,

.om-product-card *,

.om-filter-card,

.om-filter-card *,

.om-catalog-hero-card,

.om-catalog-hero-card *,

.om-pagination,

.om-pagination * {

  font-family: inherit;

}


/* -----------------------------

   Indicador de aplicación

\------------------------------ */


.om-products-wrap {

  position: relative;

}


.om-products-wrap::before {

  content: "";


  position: absolute;

  z-index: 8;


  top: -.38rem;

  left: 0;


  width: 100%;

  height: 2px;


  overflow: hidden;


  border-radius: 2rem;


  background: transparent;


  pointer-events: none;

}


.om-products-wrap::after {

  content: "";


  position: absolute;

  z-index: 9;


  top: -.38rem;

  left: 0;


  width: 28%;

  height: 2px;


  border-radius: 2rem;


  background:

    linear-gradient(

      90deg,

      transparent,

      var(--om-primary),

      #8aa1ff,

      transparent

    );


  opacity: 0;

  transform: translateX(-120%);


  pointer-events: none;

}


.om-products-wrap.is-applying-filter::before {

  background: rgba(var(--om-primary-rgb), .06);

}


.om-products-wrap.is-applying-filter::after {

  opacity: 1;


  animation:

    omFilterProgress .46s

    cubic-bezier(.2,.8,.2,1)

    both;

}


/* -----------------------------

   Grid: estable pero con vida

\------------------------------ */


.om-products-grid.is-filter-leaving .om-product-card {

  opacity: .82;

  transform: translateY(1px) scale(.997);


  transition:

    opacity .1s ease,

    transform .1s ease;

}


.om-product-card.is-filter-entering {

  animation:

    omFilterCardIn .24s

    cubic-bezier(.2,.8,.2,1)

    both;

}


/*

 * Primera carga sí mantiene una entrada un poco más rica.

 */

.om-product-card.is-entering {

  animation:

    omProductIn .34s

    cubic-bezier(.2,.8,.2,1)

    both;


  animation-delay:

    calc(var(--om-card-index, 0) * 24ms);

}


/* -----------------------------

   Marca seleccionada

\------------------------------ */


.om-brand-option input:checked + .om-brand-option-ui {

  position: relative;

}


.om-brand-option input:checked + .om-brand-option-ui::before {

  content: "";


  position: absolute;

  inset: -1px;


  border: 1px solid rgba(var(--om-primary-rgb), .15);

  border-radius: inherit;


  pointer-events: none;


  animation:

    omBrandSelect .24s ease-out both;

}


/* -----------------------------

   Range

\------------------------------ */


.om-range-labels span {

  min-width: 4.3rem;


  transition:

    color .14s ease,

    transform .14s ease;

}


.om-range-labels span:last-child {

  text-align: right;

}


.om-range-wrap.is-dragging + * {

  pointer-events: auto;

}


.om-filter-block.is-range-active .om-range-labels span {

  color: var(--om-primary-dark);

  transform: translateY(-1px);

}


.om-filter-block.is-range-active .om-range-progress {

  box-shadow:

    0 0 0 .18rem rgba(var(--om-primary-rgb), .065);

}


.om-range-progress {

  transition:

    box-shadow .14s ease;

}


/* -----------------------------

   Feedback muy sutil del panel

\------------------------------ */


.om-filter-card.is-filtering .om-filter-header-icon {

  transform: rotate(-5deg) scale(1.03);


  background: #e9efff;

}


.om-filter-card.is-filtering {

  border-color:

    rgba(var(--om-primary-rgb), .16);

}


/* =========================================================

   Keyframes

========================================================= */


@keyframes omFilterProgress {

  0% {

    opacity: 0;

    transform: translateX(-120%);

  }


  18% {

    opacity: 1;

  }


  100% {

    opacity: 0;

    transform: translateX(355%);

  }

}


@keyframes omFilterCardIn {

  from {

    opacity: .72;

    transform: translateY(4px);

  }


  to {

    opacity: 1;

    transform: translateY(0);

  }

}


@keyframes omBrandSelect {

  from {

    opacity: .8;

    transform: scale(.97);

  }


  to {

    opacity: 0;

    transform: scale(1.035);

  }

}


@media (prefers-reduced-motion: reduce) {

  .om-products-wrap::after,

  .om-product-card.is-filter-entering,

  .om-brand-option input:checked + .om-brand-option-ui::before {

    animation: none !important;

  }

}


/* =========================================================

   Estados seguros del catálogo · 20260813.8

========================================================= */


/*

 * El panel no puede interactuarse hasta que catálogo + precios

 * estén listos ni durante la breve transición de un filtro.

 */

.om-filter-card.is-disabled {

  cursor: default;

}


.om-filter-card.is-disabled .card-body,

.om-filter-card.is-disabled .card-header {

  pointer-events: none;

  user-select: none;

}


.om-filter-card.is-loading {

  opacity: .72;

}


.om-filter-card.is-loading .om-filter-header-icon {

  animation:

    omFilterWaiting 1.15s

    ease-in-out

    infinite;

}


.om-filter-card.is-applying {

  border-color:

    rgba(var(--om-primary-rgb), .18);

}


/* Disabled control appearance stays subtle, not "greyed out". */

.om-filter-card input:disabled + .om-brand-option-ui {

  cursor: default;

}


.om-filter-card input:disabled:not(:checked) + .om-brand-option-ui {

  opacity: .62;

}


.om-filter-card input:disabled:checked + .om-brand-option-ui {

  opacity: .82;

}


.om-filter-card button:disabled {

  opacity: .55;

  cursor: default;

}


/*

 * Only one content state can visually occupy the product region.

 * These selectors are a second defense in addition to JS.

 */

.om-products-wrap.is-loading

  #contenedorCatalogoProductos,

.om-products-wrap.is-loading

  #catalogoEmpty,

.om-products-wrap.is-loading

  #catalogoPagination {

  display: none !important;

}


.om-products-wrap:not(.is-loading)

  #catalogoLoader {

  display: none !important;

}


/*

 * During the 80ms outgoing transition the existing grid is

 * non-interactive. Filter controls are disabled by JS too.

 */

.om-products-grid.is-filter-leaving {

  pointer-events: none;

}


/* Prevent overlapping animations from repeated interactions. */

.om-products-wrap.is-filter-busy {

  isolation: isolate;

}


.om-products-wrap.is-filter-busy

  .om-pagination-btn {

  pointer-events: none;

}


/* Filter transition line remains subtle. */

.om-products-wrap.is-filter-busy::before {

  background:

    rgba(var(--om-primary-rgb), .055);

}


@keyframes omFilterWaiting {

  0%,

  100% {

    transform: scale(1);

  }


  50% {

    transform: scale(1.045);

  }

}


@media (prefers-reduced-motion: reduce) {

  .om-filter-card.is-loading .om-filter-header-icon {

    animation: none !important;

  }

}