/* Solo para las maquetas: "fotos" dibujadas con degradés mientras no hay fotos del cliente.
   Cada una lleva una etiqueta con la foto que va ahí. --h cambia el tono. */
.foto {
  --h: 30;
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 28% 30%, hsl(var(--h) 38% 64% / .95), transparent 62%),
    radial-gradient(80% 90% at 78% 75%, hsl(calc(var(--h) + 24) 34% 30%), transparent 68%),
    linear-gradient(155deg, hsl(var(--h) 26% 46%), hsl(calc(var(--h) - 18) 32% 16%));
}
.foto::before { /* grano, para que no parezca un degradé plano */
  content: ""; position: absolute; inset: 0; opacity: .28; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.etiqueta-foto {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font: 500 .68rem/1.3 system-ui, sans-serif; letter-spacing: .04em;
  color: #fff; background: rgb(0 0 0 / .35); padding: .3rem .5rem;
}