/* ══════════════════════════════════════════════════════════════════
   LISTING CATEGORÍA — listing-categoria.css
   Comparte las CSS custom properties de ficha-producto.css
   Prefijo de clase: .op-lc
   ══════════════════════════════════════════════════════════════════ */

.op-lc {
  --ink:      #0b1220;
  --mute:     #5c6470;
  --muter:    #8e8e93;
  --line:     #e5e5ea;
  --sky:      #eff9ff;
  --soft:     #f2f2f7;
  --primary:  #0b5981;
  --primaryD: #073d5a;
  --accent:   #0883c1;
  --teal:     #25cfac;
  --tealD:    #15a88a;
  --star:     #ffcc00;
  --danger:   #d64545;

  --shadow-card:  0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.08);
  --shadow-float: 0 12px 32px -16px rgba(11,89,129,.35);
  --radius-card:  16px;
  --max-width:    1440px;

  font-family: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

.op-lc * {
  box-sizing: border-box;
}

.op-lc a {
  text-decoration: none;
  color: inherit;
}

/* ── Animaciones ── */
@keyframes op-lc-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes op-lc-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,207,172,.6); }
  70%       { box-shadow: 0 0 0 8px rgba(37,207,172,0); }
}

/* ══════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════ */
.op-lc__breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muter);
  background: #fff;
}
.op-lc__breadcrumb a {
  color: var(--muter);
  transition: color .15s;
}
.op-lc__breadcrumb a:hover {
  color: var(--primary);
}
.op-lc__breadcrumb-sep {
  opacity: .5;
}
.op-lc__breadcrumb-current {
  color: var(--mute);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.op-lc__hero {
  background: var(--sky);
}
.op-lc__hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1024px) {
  .op-lc__hero-inner {
    grid-template-columns: 1fr auto;
    padding: 48px 32px;
    gap: 32px;
  }
}

.op-lc__hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.op-lc__hero-tag-line {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--primary);
}
.op-lc__hero-title {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.op-lc__hero-desc {
  font-size: 14.5px;
  color: var(--mute);
  line-height: 1.65;
  max-width: 700px;
  margin: 0 0 20px;
}

/* Subcategory chips */
.op-lc__subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.op-lc__subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .15s;
  cursor: pointer;
}
.op-lc__subcat-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.op-lc__subcat-count {
  color: var(--muter);
  font-weight: 600;
}

/* Authority card */
.op-lc__authority-card {
  background: #fff;
  border: 1px solid rgba(11,89,129,.15);
  border-radius: 20px;
  padding: 16px;
  max-width: 320px;
  box-shadow: var(--shadow-card);
}
.op-lc__authority-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.op-lc__authority-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(11,89,129,.1);
  color: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.op-lc__authority-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.op-lc__authority-card-desc {
  font-size: 12px;
  color: var(--mute);
  margin-top: 4px;
  line-height: 1.45;
}
.op-lc__authority-card-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.op-lc__authority-stars {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.op-lc__authority-rating {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.op-lc__authority-count {
  font-size: 11px;
  color: var(--muter);
}

/* ══════════════════════════════════════════════════════════════════
   AUTHORITY STRIP
   ══════════════════════════════════════════════════════════════════ */
.op-lc__strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.op-lc__strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  divide-x: 1px solid var(--line);
}
@media (min-width: 768px) {
  .op-lc__strip-inner {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 32px;
  }
}
.op-lc__strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  color: var(--primary);
}
.op-lc__strip-item:last-child {
  border-right: none;
}
.op-lc__strip-item svg {
  flex-shrink: 0;
}
.op-lc__strip-item div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.op-lc__strip-item strong {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.op-lc__strip-item span {
  font-size: 11px;
  color: var(--mute);
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL (sidebar + grid)
   ══════════════════════════════════════════════════════════════════ */
.op-lc__main {
  background: #fff;
  padding: 24px 0 32px;
}
.op-lc__main-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .op-lc__main-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 0 32px;
  }
}

/* ── SIDEBAR ── */
.op-lc__sidebar {
  width: 100%;
  display: none; /* oculto en mobile — se muestra en drawer */
}
@media (min-width: 1024px) {
  .op-lc__sidebar {
    display: block;
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
  }
}

/* Asistente card */
.op-lc__assistant-card {
  background: linear-gradient(135deg, var(--primary), var(--primaryD));
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
  color: #fff;
}
.op-lc__assistant-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}
.op-lc__assistant-card p {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
  margin: 0 0 12px;
}
.op-lc__assistant-btn {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--primary) !important;
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
  line-height: 36px;
  transition: opacity .15s;
}
.op-lc__assistant-btn:hover {
  opacity: .92;
}

/* Caja de filtros */
.op-lc__filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.op-lc__filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.op-lc__filters-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.op-lc__filters-clear {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.op-lc__filters-clear:hover {
  text-decoration: underline;
}

/* Filter groups */
.op-lc__filter-group {
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
}
.op-lc__filter-group:last-child {
  border-bottom: none;
}
.op-lc__filter-group-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.op-lc__filter-chev {
  color: var(--mute);
  transition: transform .2s;
  flex-shrink: 0;
}
.op-lc__filter-group.is-closed .op-lc__filter-chev {
  transform: rotate(-90deg);
}
.op-lc__filter-group.is-closed .op-lc__filter-group-body {
  display: none;
}
.op-lc__filter-group-body {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Checkbox option */
.op-lc__check-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.op-lc__check-box {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--line);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s;
}
.op-lc__check-box input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.op-lc__check-box svg {
  display: none;
  color: #fff;
}
.op-lc__check-box:has(input:checked) {
  background: var(--primary);
  border-color: var(--primary);
}
.op-lc__check-box:has(input:checked) svg {
  display: block;
}
.op-lc__check-option:hover .op-lc__check-box {
  border-color: var(--primary);
}

/* Size grid */
.op-lc__size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.op-lc__size-btn {
  height: 32px;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.op-lc__size-btn:hover,
.op-lc__size-btn.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* Price range */
.op-lc__price-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.op-lc__price-label {
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.op-lc__range-track {
  position: relative;
  height: 24px;
}
.op-lc__range-track::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
.op-lc__range-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background: var(--primary);
  left: 0;
  right: 0;
  pointer-events: none;
}
.op-lc__range-track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: all;
}
.op-lc__range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 4px rgba(11,18,32,.18);
  cursor: pointer;
}
.op-lc__range-track input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  cursor: pointer;
}

/* ── CONTENT (derecha) ── */
.op-lc__content {
  flex: 1;
  min-width: 0;
}

/* ── TOOLBAR ── */
.op-lc__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.op-lc__toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.op-lc__mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
@media (min-width: 1024px) {
  .op-lc__mobile-filter-btn {
    display: none;
  }
}
.op-lc__toolbar-count {
  font-size: 13px;
  color: var(--mute);
}
.op-lc__toolbar-count strong {
  color: var(--ink);
  font-weight: 800;
}
.op-lc__toolbar-count span {
  font-weight: 700;
}
.op-lc__sort-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-lc__sort-label {
  font-size: 12px;
  color: var(--mute);
  display: none;
}
@media (min-width: 640px) {
  .op-lc__sort-label { display: inline; }
}
.op-lc__sort-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.op-lc__sort-select:hover {
  border-color: var(--primary);
}

/* Active filter chips */
.op-lc__active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  animation: op-lc-fade-in .2s ease both;
}
.op-lc__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sky);
  border: 1px solid rgba(11,89,129,.15);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.op-lc__active-chip-remove {
  background: none;
  border: none;
  padding: 2px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--primary);
  border-radius: 999px;
}
.op-lc__active-chip-remove:hover {
  background: rgba(11,89,129,.1);
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT GRID
   ══════════════════════════════════════════════════════════════════ */
.op-lc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 480px) {
  .op-lc__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .op-lc__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .op-lc__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* ── PRODUCT CARD ── */
.op-lc__product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .25s;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
}
.op-lc__product-card:hover {
  border-color: rgba(11,89,129,.3);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* imagen */
.op-lc__card-img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #fff;
}
.op-lc__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  display: block;
}

/* descuento triángulo */
.op-lc__card-discount {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
  overflow: hidden;
  pointer-events: none;
}
.op-lc__card-discount-triangle {
  position: absolute;
  top: -34px;
  left: -34px;
  width: 68px;
  height: 68px;
  background: var(--primary);
  transform: rotate(45deg);
  transform-origin: center;
}
.op-lc__card-discount-label {
  position: absolute;
  top: 10px;
  left: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.02em;
  transform: rotate(-45deg);
  transform-origin: top left;
  white-space: nowrap;
}

/* badges */
.op-lc__card-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.op-lc__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.op-lc__badge--hot {
  background: rgba(11,18,32,.82);
  color: #fff;
}
.op-lc__badge--new {
  background: var(--tealD);
  color: #fff;
}

/* quick sizes on hover */
.op-lc__card-quicksizes {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  display: none;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
@media (min-width: 1024px) {
  .op-lc__card-quicksizes { display: flex; }
  .op-lc__product-card:hover .op-lc__card-quicksizes {
    opacity: 1;
    transform: none;
  }
}
.op-lc__card-quicksizes-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mute);
  padding-left: 2px;
}
.op-lc__card-quicksize {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  transition: background .15s, color .15s;
  cursor: pointer;
}
.op-lc__card-quicksize:hover {
  background: var(--primary);
  color: #fff;
}

/* card body */
.op-lc__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 14px;
}

/* sellos */
.op-lc__card-seals {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.op-lc__card-seal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.op-lc__card-seal--ce {
  color: var(--tealD);
}
.op-lc__card-seal--brand {
  color: var(--muter);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: none;
}

/* nombre */
.op-lc__card-name {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 35px;
}

/* rating */
.op-lc__card-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.op-lc__card-rating-num {
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.op-lc__card-rating-count {
  color: var(--mute);
}
.op-lc__card-verified {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tealD);
}

/* benefits */
.op-lc__card-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.op-lc__card-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
}
.op-lc__card-benefits li svg {
  color: var(--tealD);
  flex-shrink: 0;
  margin-top: 2px;
}

/* stock */
.op-lc__card-stock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  margin-top: auto;
  padding-top: 4px;
}
.op-lc__card-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tealD);
  flex-shrink: 0;
}
.op-lc__card-stock-dot--out {
  background: var(--danger);
}
.op-lc__card-stock-label {
  font-weight: 800;
  color: var(--tealD);
}
.op-lc__card-stock-label--out {
  color: var(--danger);
}
.op-lc__card-stock-sep {
  color: var(--muter);
}
.op-lc__card-delivery {
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* precio */
.op-lc__card-price-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.op-lc__card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.op-lc__card-price-now {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.op-lc__card-price-now .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.op-lc__card-price-was {
  font-size: 13px;
  font-weight: 700;
  color: var(--muter);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.op-lc__card-price-was .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* CTA */
.op-lc__card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  transition: background .15s, transform .1s;
}
.op-lc__product-card:hover .op-lc__card-cta {
  background: var(--primaryD);
}
.op-lc__product-card:active .op-lc__card-cta {
  transform: scale(.99);
}

/* empty state */
.op-lc__empty {
  grid-column: 1/-1;
  padding: 48px 24px;
  text-align: center;
  color: var(--mute);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
}

/* ── PROMO CARD (in-grid) ── */
.op-lc__promo-card {
  background: linear-gradient(135deg, var(--primary), var(--primaryD));
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  color: #fff;
  min-height: 200px;
}
.op-lc__promo-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.op-lc__promo-deco--top {
  width: 160px;
  height: 160px;
  top: -40px;
  right: -40px;
  background: rgba(255,255,255,.1);
  filter: blur(24px);
}
.op-lc__promo-deco--bottom {
  width: 160px;
  height: 160px;
  bottom: -48px;
  left: -48px;
  background: rgba(8,131,193,.3);
  filter: blur(32px);
}
.op-lc__promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.op-lc__promo-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  position: relative;
}
.op-lc__promo-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
  margin: 0;
  position: relative;
}
.op-lc__promo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  position: relative;
}
.op-lc__promo-btn {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  background: #fff;
  color: var(--primary) !important;
  font-size: 13px;
  font-weight: 800;
  transition: opacity .15s;
}
.op-lc__promo-btn:hover {
  opacity: .94;
}
.op-lc__promo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  color: rgba(255,255,255,.8) !important;
  transition: color .15s;
}
.op-lc__promo-link:hover {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   PAGINACIÓN
   ══════════════════════════════════════════════════════════════════ */
.op-lc__pagination {
  display: flex;
  justify-content: center;
  padding: 32px 0 8px;
}
.op-lc__pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.op-lc__pagination .page-numbers li a,
.op-lc__pagination .page-numbers li span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.op-lc__pagination .page-numbers li a:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.op-lc__pagination .page-numbers li .current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   FAQ + ESPECIALISTA
   ══════════════════════════════════════════════════════════════════ */
.op-lc__faq-row {
  background: rgba(242,242,247,.5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.op-lc__faq-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .op-lc__faq-inner {
    grid-template-columns: 360px 1fr;
    padding: 40px 32px;
    gap: 40px;
  }
}

/* Specialist card */
.op-lc__specialist-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.op-lc__specialist-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.op-lc__specialist-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--soft);
  border: 2px solid #fff;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}
.op-lc__specialist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.op-lc__specialist-pulse {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tealD);
  border: 2px solid #fff;
  animation: op-lc-pulse-dot 2s infinite;
}
.op-lc__specialist-supertitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.op-lc__specialist-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.op-lc__specialist-role {
  font-size: 12px;
  color: var(--mute);
  margin-top: 2px;
}
.op-lc__specialist-desc {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.5;
  margin: 0 0 16px;
}
.op-lc__specialist-actions {
  display: flex;
  gap: 8px;
}
.op-lc__specialist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  padding: 0 16px;
  transition: filter .15s;
  text-decoration: none;
}
.op-lc__specialist-btn--wa {
  flex: 1;
  background: #25D366;
  color: #fff !important;
}
.op-lc__specialist-btn--chat {
  background: var(--primary);
  color: #fff !important;
  padding: 0 16px;
}
.op-lc__specialist-btn:hover {
  filter: brightness(1.08);
}
.op-lc__specialist-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mute);
}
.op-lc__specialist-response {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tealD);
  font-weight: 600;
}

/* FAQ */
.op-lc__faq-supertitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.op-lc__faq-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 20px;
}
.op-lc__faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.op-lc__faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s;
}
.op-lc__faq-item:hover,
.op-lc__faq-item.is-open {
  border-color: rgba(11,89,129,.3);
}
.op-lc__faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.op-lc__faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(11,89,129,.3);
  color: var(--primary);
  flex-shrink: 0;
  transition: background .15s, border-color .15s, transform .2s;
}
.op-lc__faq-item.is-open .op-lc__faq-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: rotate(45deg);
}
.op-lc__faq-answer {
  display: none;
  padding: 0 16px 16px;
  font-size: 13px;
  color: var(--mute);
  line-height: 1.65;
}
.op-lc__faq-item.is-open .op-lc__faq-answer {
  display: block;
  animation: op-lc-fade-in .2s ease both;
}
.op-lc__faq-empty {
  font-size: 13px;
  color: var(--muter);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 20px;
}
.op-lc__faq-empty code {
  background: var(--soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   OPINIONES
   ══════════════════════════════════════════════════════════════════ */
.op-lc__reviews {
  background: #fff;
  padding: 48px 0;
}
.op-lc__reviews-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .op-lc__reviews-inner { padding: 0 32px; }
}
.op-lc__reviews-header {
  text-align: center;
  margin-bottom: 28px;
}
.op-lc__reviews-supertitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}
.op-lc__reviews-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.op-lc__reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.op-lc__reviews-summary strong {
  font-weight: 800;
  color: var(--ink);
}
.op-lc__reviews-summary span {
  color: var(--mute);
}

.op-lc__reviews-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
  margin: 0 -20px;
  padding-inline: 20px;
}
.op-lc__reviews-track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .op-lc__reviews-track { margin: 0 -32px; padding-inline: 32px; }
}

.op-lc__review-card {
  flex-shrink: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .op-lc__review-card { width: 300px; }
}
.op-lc__review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.op-lc__review-date {
  font-size: 11px;
  color: var(--muter);
}
.op-lc__review-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
.op-lc__review-footer {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.op-lc__review-footer strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.op-lc__review-footer span {
  font-size: 12px;
  color: var(--primary);
}

.op-lc__reviews-arrows {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .op-lc__reviews-arrows { display: flex; }
}
.op-lc__reviews-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .15s;
}
.op-lc__reviews-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════
   BANNER IVA 4%
   ══════════════════════════════════════════════════════════════════ */
.op-lc__iva-banner {
  background: #fff;
  padding: 40px 0;
}
.op-lc__iva-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .op-lc__iva-banner-inner { padding: 0 32px; }
}
.op-lc__iva-banner-inner > div {
  background: var(--sky);
  border: 1px solid rgba(11,89,129,.15);
  border-radius: 20px;
  padding: 20px;
  display: grid;
  gap: 20px;
  align-items: center;
}
@media (min-width: 768px) {
  .op-lc__iva-banner-inner > div {
    grid-template-columns: 1fr auto;
    padding: 28px;
  }
}
.op-lc__iva-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.op-lc__iva-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.op-lc__iva-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.7);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.op-lc__iva-title {
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.op-lc__iva-title span {
  color: var(--primary);
}
.op-lc__iva-desc {
  font-size: 13px;
  color: var(--mute);
  margin: 0;
  line-height: 1.5;
}
.op-lc__iva-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.op-lc__iva-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background .15s;
}
.op-lc__iva-btn:hover {
  background: var(--primaryD);
}
.op-lc__iva-note {
  font-size: 11px;
  color: var(--muter);
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════
   B2B
   ══════════════════════════════════════════════════════════════════ */
.op-lc__b2b {
  background: var(--ink);
  color: #fff;
}
.op-lc__b2b-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .op-lc__b2b-inner {
    grid-template-columns: 1fr auto;
    padding: 56px 32px;
    gap: 32px;
  }
}
.op-lc__b2b-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.op-lc__b2b-title {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  line-height: 1.15;
}
.op-lc__b2b-desc {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 16px;
}
.op-lc__b2b-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.op-lc__b2b-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.op-lc__b2b-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.op-lc__b2b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: opacity .15s;
}
.op-lc__b2b-btn:hover {
  opacity: .94;
}
.op-lc__b2b-phone {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  text-align: center;
  transition: color .15s;
}
.op-lc__b2b-phone:hover {
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   SEO TEXT
   ══════════════════════════════════════════════════════════════════ */
.op-lc__seo {
  background: rgba(242,242,247,.5);
  padding: 48px 0;
}
.op-lc__seo-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .op-lc__seo-inner { padding: 0 32px; }
}
.op-lc__seo-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
}
@media (min-width: 768px) {
  .op-lc__seo-box { padding: 32px; }
}
.op-lc__seo-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.op-lc__seo-text {
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.7;
}
.op-lc__seo-text[data-expanded="false"] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.op-lc__seo-text[data-expanded="true"] {
  display: block;
}
.op-lc__seo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.op-lc__seo-toggle:hover {
  text-decoration: underline;
}
.op-lc__seo-chev {
  transition: transform .2s;
}
.op-lc__seo-chev.is-open {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════
   DRAWER MOBILE (filtros)
   ══════════════════════════════════════════════════════════════════ */
.op-lc__mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
}
.op-lc__mobile-drawer.is-open {
  display: flex;
}
body.op-lc-drawer-open {
  overflow: hidden;
}
.op-lc__mobile-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,.55);
}
.op-lc__mobile-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: op-lc-drawer-in .25s ease both;
}
@keyframes op-lc-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.op-lc__mobile-drawer-head {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  flex-shrink: 0;
}
.op-lc__mobile-drawer-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.op-lc__mobile-drawer-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  border-radius: 10px;
}
.op-lc__mobile-drawer-close:hover {
  background: var(--soft);
}
.op-lc__mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
/* Dentro del drawer, el sidebar se muestra */
.op-lc__mobile-drawer-body .op-lc__assistant-card {
  display: none; /* ocultar el asistente duplicado en drawer */
}
.op-lc__mobile-drawer-foot {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
}
.op-lc__mobile-drawer-clear {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.op-lc__mobile-drawer-apply {
  height: 44px;
  border-radius: 12px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.op-lc__mobile-drawer-apply:hover {
  background: var(--primaryD);
}