/* Optimizaciones para reducir CLS y forzar reflujos */

/* Reservar espacio para imágenes con relaciones de aspecto específicas */
.img-fluid.rounded-1.shadow-lg.responsive-hero-image {
  aspect-ratio: 1200 / 630;
  width: 100%;
  height: auto;
  content-visibility: auto;
  contain-intrinsic-size: 1200px 630px;
}

/* Clase para contenedores que deben mantener su tamaño */
div[class*="ngcontent-"] {
  box-sizing: border-box;
  contain: layout style;
}

/* Optimizaciones para contenedor principal */
.container {
  contain: layout style;
  content-visibility: auto;
}

/* Estabilizar tipografía para evitar saltos */
body {
  font-display: optional;
}

/* Fijar dimensiones a elementos principales */
img.responsive-hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
}

/* Contenedores con dimensiones explícitas */
.product-image-container {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Placeholder para imágenes mientras cargan */
.image-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: placeholderLoading 1.5s infinite;
}

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

/* Optimización para tarjetas de productos */
.card, .product-card {
  height: 100%;
  contain: layout style paint;
  transform: translateZ(0);
  will-change: transform;
}

/* Contenedor específico mencionado en el error */
div.ngcontent-ng-c3511324963 {
  min-height: 300px;
  contain: layout style;
}

/* Imágenes específicas del error */
img.img-fluid.rounded-1.shadow-lg {
  width: 458px;
  height: 380px;
  aspect-ratio: 458 / 380;
}

/* Optimizar listas de elementos para evitar reflows */
.row {
  contain: layout style;
}

.col, [class*="col-"] {
  contain: layout style;
}

/* Evitar reflows durante transiciones */
.transition-element {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Evitar reflows durante hover */
.hover-effect {
  transition: transform 0.2s ease;
  will-change: transform;
  transform: translateZ(0);
}

.hover-effect:hover {
  transform: translateY(-3px) translateZ(0);
}