/* ===================================================
   Image Lazy Loading — Shimmer Skeleton
   Estilo oscuro/verde acorde con la paleta del sitio
   =================================================== */

/* === Contenedor base === */
.lazy-img-wrap {
  position: relative;
  overflow: hidden;
  background-color: #0d2a18;
  display: block;
}

/* === Imagen: oculta por defecto, fade-in al cargar === */
.lazy-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease-in-out;
  position: relative;
  z-index: 3;
}

.lazy-img-wrap img.loaded {
  opacity: 1;
}

/* === Efecto shimmer animado === */
.lazy-img-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    110deg,
    #0a2314 25%,
    #163d22 45%,
    #1e5430 50%,
    #163d22 55%,
    #0a2314 75%
  );
  background-size: 300% 100%;
  animation: shimmer-slide 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* === Icono placeholder SVG mientras carga === */
.lazy-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  opacity: 0.2;
  pointer-events: none;
}

/* === Una vez cargada: eliminar shimmer e icono === */
.lazy-img-wrap.is-loaded::before,
.lazy-img-wrap.is-loaded::after {
  display: none !important;
}

.lazy-img-wrap.is-loaded {
  background-color: transparent !important;
}

/* === Keyframes del shimmer === */
@keyframes shimmer-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Accesibilidad: respetar reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  .lazy-img-wrap::before {
    animation: none;
    background: #0d2a18;
  }
}