/* ── Mientras la foto carga (MX-067) ─────────────────────────────────────────────────────────────
   UNA sola implementación para todas las superficies que muestran fotos de propiedades: el listado
   y la ficha interna (style.css), la home (home.css), el explorador (global.css) y la ficha pública
   (ficha.css). Cada una trae su hoja y su tema propios; esta los atraviesa a todos.

   QUÉ SE VE (decisión del owner, MX-067, 22/09/2026: «la imagen del 3, con el efecto del 2»): la M
   de Momix quieta y tenue en el centro del hueco —mockup 3, «logo tenue»— y un barrido de luz que la
   cruza —mockup 2—. Hasta hoy eso existía SOLO en las tarjetas de /properties (02/09); el resto de
   las pantallas seguía mostrando el rectángulo vacío que motivó la tarjeta.

   CÓMO SE USA: la caja que contiene la foto lleva la clase `fc`. Nada más — la M no es markup: la
   dibuja `::after` con una máscara (assets/img/momix-m.svg), así que no hay que acordarse de
   copiar un SVG en cada plantilla. `assets/foto-carga.js` pone `fc-lista` cuando la foto llega.

     .fc                 cargando: M + barrido
     .fc.fc-lista        la foto llegó: no queda nada animándose debajo
     .fc.fc-vacia        la propiedad NO tiene foto: M sola, más tenue y sin
                         barrido. «Cargando» y «no tiene foto» no pueden verse igual: un barrido
                         eterno prometería una foto que no va a llegar (la distinción que pidió
                         Máximo en la tarjeta).
     .fc.fc-rota         la foto se pidió y NO vino (404, red caída): igual que vacía, y además se
                         esconde el ícono de imagen rota del navegador.

   CAPAS. Los dos pseudo-elementos van con z-index NEGATIVO dentro de una caja aislada (`isolation`):
   quedan por encima del fondo de la caja y por DEBAJO de todo su contenido —la foto, las etiquetas,
   el botón de favorito—. Así la foto tapa el marcador apenas pinta, aunque el JS no corra nunca,
   y no hay que tocar el z-index de nada de lo que ya vivía en la tarjeta.

   COLORES. Tres variables, con un valor por defecto que sirve sobre fondo claro. Cada superficie las
   redefine desde sus propios tokens (y su tema oscuro), porque ni los nombres ni el mecanismo del
   tema son los mismos en la app y en las páginas públicas. */
.fc{position:relative;isolation:isolate;overflow:hidden;background-color:var(--fc-fondo,#EDF1F5)}
.fc::after{content:"";position:absolute;z-index:-2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(34px,40%);height:min(34px,40%);pointer-events:none;
  background-color:var(--fc-marca,#B6C2CF);
  -webkit-mask:url(img/momix-m.svg) center/contain no-repeat;mask:url(img/momix-m.svg) center/contain no-repeat}
.fc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,var(--fc-luz,rgba(255,255,255,.6)) 50%,transparent 80%);
  transform:translateX(-100%);animation:fc-barrer 1.4s ease-in-out infinite}
@keyframes fc-barrer{to{transform:translateX(100%)}}
/* La foto llegó: se van el barrido y la M. */
.fc.fc-lista::before,.fc.fc-lista::after{content:none}
/* Sin foto: la M se queda, más tenue; el barrido no. */
.fc.fc-vacia::before,.fc.fc-rota::before{content:none}
.fc.fc-vacia::after,.fc.fc-rota::after{opacity:.6}
/* La foto que falló no deja el ícono de imagen rota del navegador encima de la M. */
.fc.fc-rota > img{visibility:hidden}
/* Quien pidió menos movimiento no ve el barrido: la M sola dice lo mismo sin animar. */
@media (prefers-reduced-motion: reduce){
  .fc::before{content:none}
}