/*
  Catálogo 2: misma página que catalogo.html pero con fondos de ciudad
  nocturna (img/fondos/) en lugar de colores lisos. Se carga después de
  catalogo.css y solo pisa los fondos.
*/

/* Fondo de cada viñeta de producto: imagen + posición (--fondo / --fondo-pos) */
.slot-product .shape {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(0, 0, 0, 0.55) 100%),
    var(--fondo) var(--fondo-pos, center) / cover no-repeat,
    #141110;
}

/* Variación de fondos (el orden sigue LAYOUT.productos en catalogo.js) */
.slots > .slot-product:nth-child(1)  { --fondo: url('img/fondos/rayos-rojos.jpg'); --fondo-pos: 20% center; }
.slots > .slot-product:nth-child(2)  { --fondo: url('img/fondos/escalera-incendio.jpg'); }
.slots > .slot-product:nth-child(3)  { --fondo: url('img/fondos/pared-cano.jpg'); --fondo-pos: 30% center; }
.slots > .slot-product:nth-child(4)  { --fondo: url('img/fondos/ladrillos-3.jpg'); }
.slots > .slot-product:nth-child(5)  { --fondo: url('img/fondos/torres.jpg'); --fondo-pos: center 30%; }
.slots > .slot-product:nth-child(6)  { --fondo: url('img/fondos/ladrillos-1.jpg'); }
.slots > .slot-product:nth-child(7)  { --fondo: url('img/fondos/columnas.jpg'); }
.slots > .slot-product:nth-child(8)  { --fondo: url('img/fondos/callejon-rojo.jpg'); --fondo-pos: center 70%; }
.slots > .slot-product:nth-child(9)  { --fondo: url('img/fondos/ladrillos-2.jpg'); }
.slots > .slot-product:nth-child(10) { --fondo: url('img/fondos/luna-ciudad.jpg'); --fondo-pos: 40% center; }
.slots > .slot-product:nth-child(11) { --fondo: url('img/fondos/muro-bajo.jpg'); }
.slots > .slot-product:nth-child(12) { --fondo: url('img/fondos/ladrillos-4.jpg'); }
.slots > .slot-product:nth-child(13) { --fondo: url('img/fondos/pared-cano.jpg'); --fondo-pos: 85% center; }
.slots > .slot-product:nth-child(14) { --fondo: url('img/fondos/rayos-rojos.jpg'); --fondo-pos: 80% center; }

/* Banner: rayos rojos */
.banner {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.45) 0%, transparent 70%),
    url('img/fondos/rayos-rojos.jpg') center / cover no-repeat,
    #120f0d;
}

.banner-burst {
  opacity: 0.6;
}

/* Franja inferior: ciudad con luna roja */
.city-strip {
  background: url('img/fondos/ciudad-luna-roja.jpg') center 40% / cover no-repeat, #120f0d;
}

/* Ventana de detalle: pared de ladrillos */
.modal-art {
  background:
    radial-gradient(ellipse at 50% 30%, transparent 25%, rgba(0, 0, 0, 0.6) 100%),
    url('img/fondos/pared-cano.jpg') center / cover no-repeat,
    #141110;
}