/**
 * Estilos para Lazy Loading y Optimización de Imágenes
 */

/* Placeholder mientras carga la imagen */
img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

/* Animación de carga */
@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Cuando la imagen está cargada */
img.img-loaded {
  animation: fadeIn 0.3s ease-in;
  background: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Si hay error al cargar */
img.img-error {
  background: #f5f5f5;
  border: 2px dashed #ddd;
  position: relative;
}

img.img-error::after {
  content: '⚠️ Error al cargar';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 14px;
  text-align: center;
}

/* Optimización para imágenes en cards */
.oferta-card-imagen img,
.noticia-imagen img,
.enlace-imagen img,
.acceso-imagen img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Blur-up effect (opcional) */
img[data-src] {
  filter: blur(10px);
  transition: filter 0.3s ease;
}

img[data-src].loaded {
  filter: blur(0);
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
  /* Reducir calidad de animaciones en móvil */
  img {
    animation-duration: 2s;
  }
}

/* Preload hint para imágenes críticas */
.critical-image {
  content-visibility: auto;
}

/* Contenedor de imagen con aspect ratio para evitar layout shift */
.img-container {
  position: relative;
  overflow: hidden;
}

.img-container::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}