/*
  Catálogo 3: misma página que catalogo.html con estilo pop art:
  fondos de semitono (img/fondos-pop/), calles negras, colores saturados
  y carteles amarillos. Se carga después de catalogo.css y solo pisa estilos.
*/

:root {
  /* Las calles y bordes pasan de crema a negro */
  --line: #000;
  --pop-yellow: #ffd400;
  --pop-red: #e3141c;
  --pop-blue: #1f5bd6;
}

body {
  background: #000;
}

.comic-page {
  background: #000;
}

/* ---------- Viñetas de productos ---------- */
.slot-product .shape {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.25) 100%),
    var(--fondo) var(--fondo-pos, center) / cover no-repeat,
    var(--bg);
}

/* Sin grano gastado: colores limpios */
.slot-product .shape::after {
  background: none;
}

.slot-product img {
  filter: contrast(1.06) saturate(1.1) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

/* Fondos asignados como en la referencia (orden de LAYOUT.productos en catalogo.js) */
.slots > .slot-product:nth-child(1)  { --fondo: url('img/fondos-pop/amarillo-1.jpg'); }
.slots > .slot-product:nth-child(2)  { --fondo: url('img/fondos-pop/rojo-1.jpg'); }
.slots > .slot-product:nth-child(3)  { --fondo: url('img/fondos-pop/azul-1.jpg'); }
.slots > .slot-product:nth-child(4)  { --fondo: url('img/fondos-pop/violeta-1.jpg'); }
.slots > .slot-product:nth-child(5)  { --fondo: url('img/fondos-pop/verde-1.jpg'); }
.slots > .slot-product:nth-child(6)  { --fondo: url('img/fondos-pop/amarillo-2.jpg'); }
.slots > .slot-product:nth-child(7)  { --fondo: url('img/fondos-pop/azul-2.jpg'); }
.slots > .slot-product:nth-child(8)  { --fondo: url('img/fondos-pop/rojo-1.jpg'); --fondo-pos: 30% 70%; }
.slots > .slot-product:nth-child(9)  { --fondo: url('img/fondos-pop/amarillo-3.jpg'); }
.slots > .slot-product:nth-child(10) { --fondo: url('img/fondos-pop/azul-3.jpg'); }
.slots > .slot-product:nth-child(11) { --fondo: url('img/fondos-pop/violeta-3.jpg'); }
.slots > .slot-product:nth-child(12) { --fondo: url('img/fondos-pop/verde-2.jpg'); }
.slots > .slot-product:nth-child(13) { --fondo: url('img/fondos-pop/amarillo-1.jpg'); --fondo-pos: 70% 30%; }
.slots > .slot-product:nth-child(14) { --fondo: url('img/fondos-pop/rojo-1.jpg'); --fondo-pos: 60% 40%; }

/* Bordes negros gruesos; la viñeta elegida se marca en amarillo */
.stroke {
  filter:
    drop-shadow(3px 0 0 var(--stroke-color, #000))
    drop-shadow(-3px 0 0 var(--stroke-color, #000))
    drop-shadow(0 3px 0 var(--stroke-color, #000))
    drop-shadow(0 -3px 0 var(--stroke-color, #000));
}

.slot-product.selected {
  --stroke-color: var(--pop-yellow);
}

.slot-circle .shape {
  border: 4px solid #000;
  box-shadow: 0 0 0 4px #000;
}

.slot-circle.selected .shape {
  border-color: var(--pop-yellow);
}

/* ---------- Carteles estilo historieta clásica ---------- */
.caption-box {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  color: #000;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
}

.panel-caption {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: calc(var(--fs-tag) * 1.25);
  color: #000;
  background: var(--pop-yellow);
  border: 2px solid #000;
}

.slot-product.selected .panel-caption {
  background: var(--pop-red);
  color: #fff;
}

/* ---------- Banner: semitono azul con estallido amarillo ---------- */
.banner {
  background: url('img/fondos-pop/azul-1.jpg') center / cover no-repeat, var(--pop-blue);
}

.banner::after {
  background: none;
}

.banner-burst {
  fill: var(--pop-yellow);
  stroke: #000;
  stroke-width: 5;
  opacity: 1;
}

.banner-logo img {
  filter: drop-shadow(4px 4px 0 #000);
}

.caption-poder {
  background: var(--pop-yellow);
}

/* ---------- Panel de precio: semitono amarillo ---------- */
.price-panel {
  background: url('img/fondos-pop/amarillo-2.jpg') center / cover no-repeat, var(--pop-yellow);
}

.detail-name {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: calc(var(--fs-name) * 1.2);
  color: #000;
  text-shadow: 2px 2px 0 #fff;
}

.size {
  border-color: #000;
}

.price {
  color: var(--pop-yellow);
  background: var(--pop-red);
  border: 3px solid #000;
  text-shadow: 0.06em 0.06em 0 #000;
}

.add-to-cart {
  color: #fff;
  background: var(--pop-red);
}

.add-to-cart.added {
  background: #1f8a3a;
}

/* ---------- Franja de ciudad: semitono verde con siluetas ---------- */
.city-strip {
  background:
    var(--skyline) bottom / 100% 80% no-repeat,
    url('img/fondos-pop/verde-2.jpg') center / cover no-repeat;
}

.city-strip::after {
  background: none;
}

.caption-heroe {
  background: var(--pop-yellow);
}

/* ---------- Ventana de detalle ---------- */
.modal-card {
  background: #fff;
}

.modal-art {
  background: url('img/fondos-pop/azul-2.jpg') center / cover no-repeat, var(--pop-blue);
}

.modal-name {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: 2.1rem;
}

.label-tag {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: 1.05rem;
  background: var(--pop-yellow);
}

.color {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.modal-add {
  background: var(--pop-red);
  font-size: 22px;
}

.modal-close:hover {
  background: var(--pop-red);
}

.toast {
  background: var(--pop-yellow);
}