/* Imagen de fondo del hero */
.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("assets/images/aceite.png");
  background-size: cover;
  background-position: center;
}

/* Animaciones de tarjetas */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.testimonial-card {
  transition: all 0.3s ease;
}
.testimonial-card:hover {
  transform: scale(1.05);
}

/* Optimisation des images progressives */
.progressive-image {
  transition:
    filter 0.8s ease,
    transform 0.3s ease;
  background-color: #f3f4f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d1d5db' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
  /* Éviter les changements de layout */
  object-fit: cover;
  object-position: center;
}

.progressive-loading {
  position: relative;
}

.progressive-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* États de qualité - seulement des effets visuels, pas de changement de source */
.thumb-loaded {
  filter: blur(3px) brightness(0.85) contrast(0.9);
  transform: scale(0.98);
}

.medium-loaded {
  filter: blur(1px) brightness(0.92) contrast(0.95);
  transform: scale(0.99);
}

.full-loaded {
  filter: none;
  transform: scale(1);
}

/* Contenedor mapa responsive */
.map-container {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
.map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}