/* Product Placeholders CSS - Generado automáticamente Phase 1.b */
/* Touch-friendly mobile + Hover effects desktop */

/* === MOBILE PLACEHOLDERS === */
.product-placeholder-mobile {
  min-height: 44px; /* Touch-friendly */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
}

.product-placeholder-transporte-mobile {
  background-image: url('/assets/mobile/placeholder-transporte-mobile.svg');
}

.product-placeholder-alimentacion-mobile {
  background-image: url('/assets/mobile/placeholder-alimentacion-mobile.svg');
}

.product-placeholder-descanso-mobile {
  background-image: url('/assets/mobile/placeholder-descanso-mobile.svg');
}

.product-placeholder-cuidado-mobile {
  background-image: url('/assets/mobile/placeholder-cuidado-mobile.svg');
}

/* === DESKTOP PLACEHOLDERS === */
.product-placeholder-desktop {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-placeholder-desktop:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Ratios específicos desktop */
.product-placeholder-desktop-1x1 { aspect-ratio: 1 / 1; }
.product-placeholder-desktop-4x3 { aspect-ratio: 4 / 3; }
.product-placeholder-desktop-16x9 { aspect-ratio: 16 / 9; }

/* Categorías desktop */
.product-placeholder-transporte-desktop-1x1 {
  background-image: url('/assets/desktop/placeholder-transporte-desktop-1x1.svg');
}
.product-placeholder-transporte-desktop-4x3 {
  background-image: url('/assets/desktop/placeholder-transporte-desktop-4x3.svg');
}
.product-placeholder-transporte-desktop-16x9 {
  background-image: url('/assets/desktop/placeholder-transporte-desktop-16x9.svg');
}

.product-placeholder-alimentacion-desktop-1x1 {
  background-image: url('/assets/desktop/placeholder-alimentacion-desktop-1x1.svg');
}
.product-placeholder-alimentacion-desktop-4x3 {
  background-image: url('/assets/desktop/placeholder-alimentacion-desktop-4x3.svg');
}
.product-placeholder-alimentacion-desktop-16x9 {
  background-image: url('/assets/desktop/placeholder-alimentacion-desktop-16x9.svg');
}

.product-placeholder-descanso-desktop-1x1 {
  background-image: url('/assets/desktop/placeholder-descanso-desktop-1x1.svg');
}
.product-placeholder-descanso-desktop-4x3 {
  background-image: url('/assets/desktop/placeholder-descanso-desktop-4x3.svg');
}
.product-placeholder-descanso-desktop-16x9 {
  background-image: url('/assets/desktop/placeholder-descanso-desktop-16x9.svg');
}

.product-placeholder-cuidado-desktop-1x1 {
  background-image: url('/assets/desktop/placeholder-cuidado-desktop-1x1.svg');
}
.product-placeholder-cuidado-desktop-4x3 {
  background-image: url('/assets/desktop/placeholder-cuidado-desktop-4x3.svg');
}
.product-placeholder-cuidado-desktop-16x9 {
  background-image: url('/assets/desktop/placeholder-cuidado-desktop-16x9.svg');
}

/* === RESPONSIVE HELPERS === */
@media (max-width: 768px) {
  .product-placeholder-responsive {
    @apply product-placeholder-mobile;
  }
}

@media (min-width: 769px) {
  .product-placeholder-responsive {
    @apply product-placeholder-desktop product-placeholder-desktop-1x1;
  }
}

/* === UTILITY CLASSES === */
.placeholder-loading {
  position: relative;
  overflow: hidden;
}

.placeholder-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(-100%);
  animation: placeholder-shimmer 1.5s infinite;
}

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