/* ═══ Carga de imágenes: espera visible y entrada suave ═══════════════
   Una imagen que aparece de golpe, o un hueco en blanco que empuja el
   texto cuando por fin carga, se percibe como lentitud aunque el archivo
   pese poco. Aquí el sitio reserva el espacio desde el principio, muestra
   un marco de espera con el azul de la marca y revela la fotografía con
   un fundido corto. */

/* Marco de espera: el reflejo recorre el hueco de izquierda a derecha */
@keyframes bfcShimmer{0%{background-position:-140% 0}100%{background-position:240% 0}}

.bfc-imgwrap > .bfc-img{position:relative;z-index:1}
.bfc-img{opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);transform:scale(1.012)}
.bfc-img.is-ready{opacity:1;transform:none}

/* El contenedor sostiene el espacio mientras la imagen viaja */
.bfc-imgwrap{position:relative;overflow:hidden}
.bfc-imgwrap::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,#e8edf2 18%,#f4f7fa 34%,#dfe7ef 52%,#e8edf2 70%);
  background-size:220% 100%;
  animation:bfcShimmer 1.5s linear infinite;
  transition:opacity .45s ease;
}
/* En cuanto la fotografía está lista, el marco de espera se retira */
.bfc-imgwrap.is-ready::before{opacity:0;animation:none}

/* Sobre fondo oscuro el marco de espera también debe ser oscuro:
   un rectángulo claro dentro de una banda azul marino salta a la vista. */
.img-band.bfc-imgwrap::before, .img-band .bfc-imgwrap::before,
.hero.bfc-imgwrap::before, .hero .bfc-imgwrap::before,
.pg-banner.bfc-imgwrap::before, .pg-banner .bfc-imgwrap::before,
[class*="img-band"].bfc-imgwrap::before,
[class*="img-connect"].bfc-imgwrap::before{
  background:linear-gradient(100deg,#0c2038 18%,#16304f 34%,#0e2540 52%,#0c2038 70%);
  background-size:220% 100%;
}

/* Quien pide menos movimiento recibe la imagen sin fundido ni reflejo */
@media (prefers-reduced-motion:reduce){
  .bfc-img{opacity:1;transform:none;transition:none}
  .bfc-imgwrap::before{animation:none;opacity:0}
}