/**
 * TÄLU · Pack Discount Banner (componente shared)
 *
 * Banner enorme de descuento "X% OFF · Ahorras $Y vs comprar individual"
 * Diego 2026-05-08: replicado en TODOS los packs (familia, cremas, cocina, dia-madre).
 *
 * Uso:
 *   <link rel="stylesheet" href="../styles/pack-banner.css">
 *   <div class="banner-discount">
 *     <span class="big">23% OFF</span>
 *     <span class="small"><strong>Ahorras $14.890</strong>vs. comprar individual</span>
 *   </div>
 */

.banner-discount{
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 26px;
  background: linear-gradient(135deg, #f5dea0 0%, #e7c179 30%, #c9a35d 60%, #a6823d 100%);
  color: #1a1410;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 18px 40px -12px rgba(166,130,61,.6), inset 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.3);
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
}
.banner-discount::before{
  content: ""; position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: shimmer-disc 3s ease-in-out infinite;
}
@keyframes shimmer-disc{
  0%{ left: -60%; } 60%{ left: 130%; } 100%{ left: 130%; }
}
.banner-discount .big{
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  letter-spacing: -.02em; line-height: 1;
  font-weight: 600;
}
.banner-discount .small{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  line-height: 1.2;
}
.banner-discount .small strong{
  display: block;
  font-size: 13px;
  font-weight: 700;
}

/* Variante rosa para Pack Día de la Madre */
.banner-discount.is-mom{
  background: linear-gradient(135deg, #f0c9c2 0%, #d4a59f 50%, #a8736d 100%);
  color: #1a0a02;
  box-shadow: 0 18px 40px -12px rgba(168,115,109,.6), inset 0 1px 0 rgba(255,255,255,.5);
}

@media (max-width: 600px){
  .banner-discount{ padding: 12px 20px; gap: 12px; }
  .banner-discount .big{ font-size: 28px; }
  .banner-discount .small{ font-size: 10px; }
  .banner-discount .small strong{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .banner-discount::before{ animation: none; }
}