/* Estilos personalizados de la florería */

/* ═══════════════════════════════════════
   OPTIMIZACIÓN DE CARGA DE IMÁGENES
   ═══════════════════════════════════════ */

/* Skeleton pulse mientras la imagen carga */
.img-loading {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #f2f4f4 8%, #e4e9ea 18%, #f2f4f4 33%);
  background-size: 200% 100%;
  animation: img-shimmer 1.5s linear infinite;
}

@keyframes img-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Fade-in suave cuando la imagen termina de cargar */
.img-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.img-fade.img-loaded {
  opacity: 1;
}

/* Container aspect ratio para evitar layout shift (CLS) */
.img-ratio-4-5 {
  aspect-ratio: 4/5;
}
.img-ratio-1-1 {
  aspect-ratio: 1/1;
}
.img-ratio-16-9 {
  aspect-ratio: 16/9;
}