/* Página de catálogo */
.cils-cat { padding-block: 20px 48px; }
.cils-cat__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cils-cat__cab h1 { font: 800 28px/1.15 var(--fuente); letter-spacing: -0.02em; }
.cils-cat__resumen { color: var(--suave); font-size: 14px; }

.cils-filtros { display: grid; gap: 12px; }
.cils-buscador {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
  background: var(--brand-50); border: 1px solid var(--linea); border-radius: var(--r-md); color: var(--suave);
}
.cils-buscador:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(122, 79, 150, 0.22); background: #fff; }
.cils-buscador input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--tinta); font: 400 16px/1.2 var(--fuente); outline: none; }
.cils-buscador input::placeholder { color: var(--suave); }

.cils-chips { display: flex; gap: 8px; margin-inline: calc(var(--pad) * -1); padding: 2px var(--pad) 4px; overflow-x: auto; scrollbar-width: none; }
.cils-chips::-webkit-scrollbar { display: none; }
.cils-chip {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linea); border-radius: 999px; background: #fff;
  color: var(--tinta); font: 500 14px/1 var(--fuente); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cils-chip:hover { border-color: var(--brand-600); }
.cils-chip[aria-current="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.cils-chip--oferta { color: var(--oferta); border-color: #efb4cb; }
.cils-chip--oferta[aria-current="true"] { background: var(--oferta); border-color: var(--oferta); color: #fff; }

.cils-selectores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cils-selector { position: relative; display: block; }
.cils-selector select {
  width: 100%; height: 48px; padding: 0 38px 0 14px; appearance: none; -webkit-appearance: none;
  border: 1px solid #cfc4d8; border-radius: var(--r-md); background: #fff; color: var(--tinta);
  font: 500 15px/1 var(--fuente); cursor: pointer; text-overflow: ellipsis;
}
.cils-selector .cils-icono { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none; }

.cils-filas { margin-top: 8px; transition: opacity 0.15s ease; }
.cils-filas.is-cargando { opacity: 0.45; pointer-events: none; }
.cils-fila { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.cils-fila__foto {
  position: relative; flex: none; width: 104px; height: 104px; padding: 0; overflow: hidden;
  border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--brand-50); cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.cils-fila__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.cils-fila__foto:hover .cils-fila__img { transform: scale(1.05); }
.cils-fila__vacio { display: block; width: 100%; height: 100%; }
.cils-fila__zoom {
  position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 7px; border-radius: 8px; background: rgba(36, 27, 43, 0.74); color: #fff; font: 600 11px/1 var(--fuente);
}
.cils-fila__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cils-fila__nombre { font: 600 15px/1.35 var(--fuente); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cils-fila__desc { margin-top: 3px; color: var(--suave); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cils-fila__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.cils-fila__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.cils-fila__precio strong { font: 700 17px/1.2 var(--fuente); }
.cils-fila__precio s { color: var(--suave); font-size: 13px; }

.cils-vacio { padding: 56px 16px; text-align: center; display: grid; gap: 10px; justify-items: center; color: var(--suave); }
.cils-vacio__titulo { color: var(--tinta); font: 700 18px/1.3 var(--fuente); }
.cils-cargando { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px 0; color: var(--suave); }
.cils-error--lista { text-align: center; }
.cils-mas { padding: 24px 0 0; text-align: center; }
.cils-fin { height: 1px; }

@media (min-width: 900px) {
  .cils-cat { padding-block: 40px 72px; }
  .cils-cat__cab h1 { font-size: 40px; }
  .cils-cat__cab { margin-bottom: 24px; }
  .cils-filtros { grid-template-columns: minmax(0, 1fr) 230px 230px; gap: 16px; align-items: center; }
  .cils-selectores { display: contents; }
  .cils-chips { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; }
  .cils-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
  .cils-fila { padding: 16px; border: 1px solid var(--linea); border-radius: 18px; gap: 18px; transition: box-shadow 0.2s ease; }
  .cils-fila:hover { box-shadow: var(--sombra); }
  .cils-fila__foto { width: 152px; height: 152px; border-radius: 14px; }
  .cils-fila__nombre { font-size: 17px; }
  .cils-fila__desc { font-size: 14px; -webkit-line-clamp: 3; }
  .cils-fila__precio strong { font-size: 20px; }
}