/* Muestras de material: texturas pintadas con SVG para cuando aún no hay foto.
   Cada oficio tiene la suya (cal, veladura, marmol, papel, laca, barniz, madera, bronce, pintura). */

.mu { position: relative; background-color: #e9e2d6; background-size: cover; background-position: center; overflow: hidden; isolation: isolate; }
.mu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; }

/* Estuco a la cal: manchas suaves de llana */
.mu-cal {
  background-color: #e8e1d3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.43 1.6 0 0 0 -0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.26 0 0 0 0 0.2 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: cover, 300px 300px;
}

/* Veladura: capas transparentes de ocre y almagre */
.mu-veladura {
  background-color: #d9b98a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.009' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.33 0 0 0 0 0.20 1.9 0 0 0 -0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.86 0 0 0 0 0.66 0 1.8 0 0 -0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: cover, cover;
}

/* Mármol pintado: fondo crema con vetas */
.mu-marmol {
  background-color: #ece7de;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0028 0.0055' numOctaves='5' seed='19'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0 0 0 0 0 0 0 0.08 0.9 0.08 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.38 0 0 0 0 0.36 0.6 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.56 0 0 0 0 0.5 1.2 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: cover, cover;
}

/* Papel pintado: rombos y flor sobre verde agua */
.mu-papel {
  background-color: #b9c2ad;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e9e3d2' stroke-width='1' opacity='.75'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z'/%3E%3C/g%3E%3Cg fill='%23efe8d6' opacity='.85'%3E%3Ccircle cx='28' cy='28' r='3'/%3E%3Cpath d='M28 17c3 4 3 6 0 8-3-2-3-4 0-8ZM28 39c-3-4-3-6 0-8 3 2 3 4 0 8ZM17 28c4-3 6-3 8 0-2 3-4 3-8 0ZM39 28c-4 3-6 3-8 0 2-3 4-3 8 0Z'/%3E%3C/g%3E%3Cg fill='%237f8a6f' opacity='.6'%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='56' cy='0' r='2'/%3E%3Ccircle cx='0' cy='56' r='2'/%3E%3Ccircle cx='56' cy='56' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
}

/* Laca: rojo sangre de buey con reflejo */
.mu-laca {
  background-color: #5c1a17;
  background-image:
    linear-gradient(118deg, transparent 30%, rgba(255, 236, 220, .16) 41%, rgba(255, 236, 220, .04) 48%, transparent 58%),
    radial-gradient(120% 90% at 20% 0%, #7a2621 0%, #5c1a17 45%, #3a0f0d 100%);
  background-size: cover;
}

/* Barniz: madera clara bajo capa ámbar */
.mu-barniz {
  background-color: #a06a35;
  background-image:
    linear-gradient(160deg, rgba(255, 210, 140, .22), rgba(90, 40, 10, .25)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0 0.08 2.4 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: cover, cover;
}

/* Veta de madera: nogal */
.mu-madera {
  background-color: #6b4528;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.06' numOctaves='4' seed='5'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 0.4 0.1 0.6 0.2 0.8 0.3 0.5 0.1 0.7'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0 0.07 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: cover;
}

/* Bronce patinado: brillo metálico con verdín */
.mu-bronce {
  background-color: #8a6234;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.48 0 0 0 0 0.40 2.2 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(115deg, #5e3f1e 0%, #b88a4c 22%, #e2c48a 31%, #9a6c35 44%, #6a4722 62%, #c49a5c 80%, #7b5528 100%);
  background-size: cover, cover;
}

/* Pintura: tres tonos a brocha */
.mu-pintura {
  background-color: #c9b79a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.25' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #8d9a86 0 33%, #c9b79a 33% 66%, #a8573b 66% 100%);
  background-size: cover, cover;
}