/**
 * Fase Merchandising 2 -- estilos minimos del Hero/Banner/Vitrina
 * dinamicos. `.hvm-merch-carousel__slide` arranca oculto por CSS puro
 * (no espera al JS) -- asi, sin JavaScript, solo se ve el primer slide
 * (el que nunca tiene esa clase), como una imagen estatica normal.
 */
.hvm-merch-hero { position: relative; overflow: hidden; }
.hvm-merch-hero img,
.hvm-merch-hero video { width: 100%; height: auto; display: block; }
.hvm-merch-carousel__slide { display: none; }
.hvm-merch-carousel__prev,
.hvm-merch-carousel__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4); color: #fff; border: none;
  padding: 0.5rem 0.75rem; cursor: pointer;
}
.hvm-merch-carousel__prev { left: 0.5rem; }
.hvm-merch-carousel__next { right: 0.5rem; }
.hvm-merch-copy { position: absolute; bottom: 1.5rem; left: 1.5rem; color: #fff; }
.hvm-merch-cta {
  display: inline-block; margin-top: 0.5rem; padding: 0.5rem 1rem;
  background: #fff; color: #0f1f3d; text-decoration: none;
}
.hvm-merch-banner { position: relative; }
.hvm-merch-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.hvm-merch-card { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: inherit; }
.hvm-merch-card__name { font-size: 0.875rem; }
.hvm-merch-price { font-weight: 600; }