/* LAYOUT SHIFT PREVENTION - PREVENCIÓN DE CAMBIOS DE LAYOUT */

/* ========================================
   RESERVAR ESPACIO PARA IMÁGENES
   ======================================== */

/* Contenedor base para todas las imágenes */
.image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  display: block;
  contain: layout style;
}

/* Reservar espacio para imágenes hero */
.hero-image-wrapper {
  aspect-ratio: 423/355;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
  min-height: 310px;
  max-width: 450px;
  margin: 0 auto;
  contain: layout style;
}

.hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  display: block;
}

/* Reservar espacio para imágenes de productos */
.product-image-wrapper {
  aspect-ratio: 4/3;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  contain: layout style;
}

.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  display: block;
}

/* Reservar espacio para imágenes de cards */
.card-img-top {
  aspect-ratio: 388/400;
  object-fit: cover;
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
}

/* Reservar espacio para imágenes responsive */
.responsive-image {
  aspect-ratio: 400/310;
  object-fit: cover;
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
}

/* ========================================
   PREVENIR LAYOUT SHIFT EN SECCIONES
   ======================================== */

/* Prevenir que las secciones se muevan */
.section-modern {
  min-height: 200px;
  contain: layout;
}

.section-modern.section-alt {
  min-height: 600px;
  contain: layout;
  position: relative;
}

/* Prevenir layout shift en cards */
.card-modern {
  min-height: 400px;
  contain: layout;
}

.card {
  min-height: 400px;
  contain: layout style;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  contain: layout style;
}

/* Prevenir layout shift en cards de productos */
.product-card-premium {
  min-height: 600px;
  contain: layout;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

/* Prevenir layout shift en price sections */
.price-section {
  min-height: 200px;
  contain: layout;
}

/* ========================================
   PREVENIR LAYOUT SHIFT EN COMPONENTES
   ======================================== */

/* Prevenir layout shift en componentes de precios */
app-precios-volumen-compact {
  display: block;
  min-height: 150px;
  contain: layout;
}

/* Prevenir layout shift en secciones de productos específicas */
#products-section {
  min-height: 600px;
  contain: layout;
  position: relative;
}

/* Prevenir layout shift en testimonios */
app-testimonios {
  display: block;
  min-height: 300px;
  contain: layout;
}

/* Prevenir layout shift en beneficios */
app-beneficios {
  display: block;
  min-height: 400px;
  contain: layout;
}

/* Prevenir layout shift en mostrador */
app-mostrador {
  display: block;
  min-height: 500px;
  contain: layout;
}

/* Prevenir layout shift en mostrador simple */
app-mostradorsimple {
  display: block;
  min-height: 400px;
  contain: layout;
}

/* Prevenir layout shift en productos servicios */
app-productos-servicios {
  display: block;
  min-height: 400px;
  contain: layout;
}

/* Prevenir layout shift en ver precios */
app-verprecios {
  display: block;
  min-height: 300px;
  contain: layout;
}

/* Prevenir layout shift en ver precios sin */
app-verpreciossin {
  display: block;
  min-height: 300px;
  contain: layout;
}

/* Prevenir layout shift en preguntas frecuentes */
app-preguntasfrecuentes {
  display: block;
  min-height: 200px;
  contain: layout;
}

/* Prevenir layout shift en medios de pago */
app-mediospago {
  display: block;
  min-height: 200px;
  contain: layout;
}

/* Prevenir layout shift en btn contacto */
app-btncontacto {
  display: block;
  min-height: 50px;
  contain: layout;
}

/* Prevenir layout shift en btn breadcrumb */
app-btnbreadcrumb {
  display: block;
  min-height: 50px;
  contain: layout;
}

/* ========================================
   OPTIMIZACIONES ESPECÍFICAS PARA IMÁGENES
   ======================================== */

/* Asegurar que las imágenes tengan dimensiones fijas */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Imágenes críticas con LCP optimizado */
.critical-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  contain: layout style;
}

/* Imágenes hero específicas */
.responsive-hero-image {
  aspect-ratio: 423/355;
  object-fit: cover;
  width: 100%;
  height: auto;
  max-width: 450px;
  min-height: 310px;
  display: block;
}

/* Imágenes de productos específicas */
.product-image {
  aspect-ratio: 388/400;
  object-fit: cover;
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
}

/* ========================================
   PLACEHOLDERS Y SKELETONS
   ======================================== */

/* 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;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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

/* Skeleton loader para componentes */
.loading-skeleton {
  background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 8px;
  margin: 1rem 0;
  min-height: 200px;
  contain: layout style;
}

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

/* ========================================
   OPTIMIZACIONES PARA GRID Y LAYOUT
   ======================================== */

/* Estabilizar grid de productos */
.products-grid {
  min-height: 600px;
  contain: layout style;
}

.product-card-wrapper {
  min-height: 400px;
  contain: layout style;
}

/* Estabilizar rows y columns */
.row {
  contain: layout style;
}

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

/* ========================================
   OPTIMIZACIONES PARA TIPOGRAFÍA
   ======================================== */

/* Prevenir layout shift en texto */
h1, h2, h3, h4, h5, h6 {
  contain: layout style;
  min-height: 1.2em;
}

p, span, div {
  contain: layout style;
}

/* ========================================
   OPTIMIZACIONES PARA BOTONES Y ELEMENTOS INTERACTIVOS
   ======================================== */

/* Prevenir layout shift en botones */
.btn {
  contain: layout style;
  min-height: 38px;
}

/* Prevenir layout shift en badges */
.badge {
  contain: layout style;
  min-height: 20px;
}

/* ========================================
   OPTIMIZACIONES RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .hero-image-wrapper {
    min-height: 200px;
  }
  
  .product-image-wrapper {
    min-height: 150px;
  }
  
  .card {
    min-height: 300px;
  }
  
  .product-card-premium {
    min-height: 400px;
  }
  
  .section-modern {
    min-height: 150px;
  }
  
  .section-modern.section-alt {
    min-height: 400px;
  }
}

@media (max-width: 576px) {
  .hero-image-wrapper {
    min-height: 150px;
  }
  
  .product-image-wrapper {
    min-height: 120px;
  }
  
  .card {
    min-height: 250px;
  }
  
  .product-card-premium {
    min-height: 350px;
  }
}

/* ========================================
   OPTIMIZACIONES ESPECÍFICAS PARA PROBLEMAS CONOCIDOS
   ======================================== */

/* Corregir contenedor problemático específico */
div[class*="ngcontent-"] {
  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;
  display: block;
}

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

/* ========================================
   OPTIMIZACIONES PARA PERFORMANCE
   ======================================== */

/* Usar transform3d para forzar composición */
.transform-3d {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

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

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

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