/* Optimizaciones adicionales de rendimiento para imágenes */

/* Mejora del rendimiento de la imagen de fondo del hero */
.hero {
  /* Añadir will-change para optimizar compositing */
  will-change: transform;
  /* Forzar aceleración de hardware */
  transform: translateZ(0);
}

/* Estado cuando la imagen está cargada */
.hero.image-loaded {
  /* Animación suave al cambiar de gradiente a imagen */
  animation: fadeInImage 0.8s ease-in-out;
}

@keyframes fadeInImage {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
  .hero {
    /* En móviles, permitir imagen pero con altura reducida */
    min-height: 80vh;
    /* Optimizar el background-size para móviles */
    background-size: cover;
    background-position: center center;
  }
  
  /* Cuando la imagen esté cargada en móviles */
  .hero.image-loaded {
    /* Transición más suave en móviles */
    transition: background-image 0.8s ease-in-out;
  }
}

/* Optimización para conexiones lentas */
@media (prefers-reduced-data: reduce) {
  .hero {
    /* Para usuarios que prefieren menos datos, mantener gradiente */
    background-image: linear-gradient(135deg, #007A5B 0%, #005F48 50%, #228B22 100%) !important;
  }
}

/* Optimización específica para móviles pequeños */
@media (max-width: 480px) {
  .hero {
    /* En móviles muy pequeños, altura aún más reducida */
    min-height: 70vh;
    /* Posición optimizada para móviles */
    background-position: center 30%;
  }
}

/* Indicador de carga para móviles */
@media (max-width: 768px) {
  .hero:not(.image-loaded)::after {
    /* Indicador más visible en móviles */
    width: 4px;
    height: 4px;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.6);
  }
}

/* Optimización del logo */
.logo {
  /* Evitar reflow al cargar */
  display: block;
  width: 40px;
  height: 40px;
  /* Optimizar rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Lazy loading support para navegadores antiguos */
img[loading="lazy"] {
  /* Fallback para navegadores sin soporte nativo */
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Indicador de carga sutil */
.hero::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.hero:not(.image-loaded)::after {
  opacity: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}