/* ═══════════════════════════════════════════════════════════════════════════
   OPTIMIZACIÓN DE CARGA DE IMÁGENES
   Lazy loading + Evita layout shift + Mejor rendimiento
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== Evitar layout shift (CLS) ===== */
img {
  /* Reservar espacio antes de cargar */
  aspect-ratio: attr(width) / attr(height);
  object-fit: cover;
}

/* Imágenes de servicios/cards: aspect ratio común */
.card-zonit img,
.group img,
[class*="placeholder"] img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Hero image: cubre todo el espacio */
section .absolute.inset-0 img,
.hero-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ===== Lazy loading nativo ===== */
/* Imágenes de servicios (below-the-fold) */
img[src*="/placeholders/control-lighting"],
img[src*="/placeholders/audio-distributed"],
img[src*="/placeholders/access-control"],
img[src*="/placeholders/ip-telephony"],
img[src*="/placeholders/video"],
img[src*="/placeholders/structured-cabling"],
img[src*="/placeholders/professional-audio"],
img[src*="/placeholders/automation-placeholder"],
img[src*="/placeholders/solar-placeholder"] {
  /* Ya no necesitamos loading="lazy" en HTML, lo forzamos con CSS */
  content-visibility: auto;
  contain-intrinsic-size: 600px 400px;
}

/* ===== Placeholder mientras carga (SOLO servicios, NO logo) ===== */
img[src*="/placeholders/"]:not([src]),
img[src*="/placeholders/"][src=""],
img[src*="/placeholders/"]:not([complete]) {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Logo y hero: NUNCA mostrar placeholder */
img[src*="zonit-logo"],
img[alt="ZONIT"],
img[src*="hero-section"],
header img {
  background: none !important;
  animation: none !important;
}

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

/* ===== LOGO Y HERO: SIN EFECTOS (CRÍTICOS) ===== */
/* Forzar visibilidad inmediata sin transiciones */
img[src*="zonit-logo"],
img[alt="ZONIT"],
a[href="/"] img,
header img {
  opacity: 1 !important;
  transition: none !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

img[src*="hero-section"] {
  opacity: 1 !important;
  transition: none !important;
  filter: none !important;
}

/* ===== Fade-in suave SOLO en imágenes de servicios (no críticas) ===== */
img[src*="/placeholders/control-lighting"],
img[src*="/placeholders/audio-distributed"],
img[src*="/placeholders/access-control"],
img[src*="/placeholders/ip-telephony"],
img[src*="/placeholders/video"],
img[src*="/placeholders/structured-cabling"],
img[src*="/placeholders/professional-audio"],
img[src*="/placeholders/automation-placeholder"],
img[src*="/placeholders/solar-placeholder"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[src*="/placeholders/control-lighting"].loaded,
img[src*="/placeholders/audio-distributed"].loaded,
img[src*="/placeholders/access-control"].loaded,
img[src*="/placeholders/ip-telephony"].loaded,
img[src*="/placeholders/video"].loaded,
img[src*="/placeholders/structured-cabling"].loaded,
img[src*="/placeholders/professional-audio"].loaded,
img[src*="/placeholders/automation-placeholder"].loaded,
img[src*="/placeholders/solar-placeholder"].loaded {
  opacity: 1;
}

/* ===== Optimización para móvil ===== */
@media (max-width: 1023.98px) {
  /* Imágenes más pequeñas en móvil */
  img[src*="/placeholders/"] {
    /* El navegador puede usar versión más pequeña si existe */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Reducir calidad ligeramente para mejor performance */
  img {
    image-rendering: auto;
  }
}

/* ===== Evitar imágenes rotas ===== */
img:not([src]),
img[src=""],
img[src="#"] {
  visibility: hidden;
  min-height: 200px;
  background-color: #f5f5f5;
}

/* ===== Performance: Contenido below-the-fold ===== */
section:not(:first-of-type) img {
  /* Lazy load automático para imágenes no críticas */
  loading: lazy;
}