/* Home page specific styles */
.home-hero {
  background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 60%);
  position: relative;
}
.home-hero .hero-bg-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(0,123,255,0.15), transparent 60%);
  pointer-events: none;
}
.home-hero h1 { letter-spacing: -0.5px; }
.home-hero .lead { max-width: 560px; }
.hero-illustration { max-height: 360px; object-fit: contain; }
.hero-placeholder { background: #fafafa; }
/* Wrapper para permitir mostrar imagen también en móviles sin ocupar demasiado espacio */
.hero-visual-wrapper { text-align: center; }
.hero-visual-wrapper .hero-illustration { width: 100%; height: auto; }

.home-featured { background: #fff; }
.featured-grid .product-card { transition: transform .25s ease, box-shadow .25s ease; }
.featured-grid .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

/* Estilos específicos para imágenes de productos destacados */
/* Nuevo layout de imagen cuadrada usando aspect-ratio y sin position absolute */
.home-featured .featured-grid .featured-img-container {
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1; /* Navegadores modernos */
  position: relative;
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .home-featured .featured-grid .featured-img-container::before {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  .home-featured .featured-grid .featured-img-container { display:block; }
  .home-featured .featured-grid .featured-img-container > * { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
}

.home-featured .featured-grid .featured-product-img {
  object-fit: contain;
  object-position: center;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  transition: transform 0.3s ease;
}

.home-featured .featured-grid .product-card:hover .featured-product-img {
  transform: scale(1.05);
}

.featured-grid .price { color: #0d6efd; }

@media (max-width: 767.98px) {
  .home-hero { text-align: center; }
  .home-hero .d-flex { justify-content: center; }
  .hero-illustration { max-height: 260px; }
}