/* BSS Halloween v1 (19-10-2026) — todas las reglas cuelgan de html.bss-halloween, que pone bss-halloween.js
   solo hasta el 01-11-2026. Fuera de esa fecha este archivo no cambia nada. Adornos: aria-hidden y sin clics. */

html.bss-halloween {
  --hw-night: #1B0B26;
  --hw-plum: #3A0F35;
  --hw-orange: #F97316;
  --hw-purple: #6D28D9;
}

/* ── Barra de envío gratis (portada y mayoreo): noche morada, texto blanco (≥ 4.5:1 con cada color) ── */
html.bss-halloween .top-bar {
  background: linear-gradient(90deg, #1B0B26 0%, #3A0F35 50%, #1B0B26 100%) !important;
  color: #fff !important;
}
html.bss-halloween .top-bar small { color: #FFE2C7; }
html.bss-halloween .top-bar .fa-truck { color: #FDBA74; }
.hw-tb-pumpkin svg { width: 18px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* ── Header: telarañas en las esquinas, murciélagos que cruzan detrás del menú y franja naranja-berry-morado ── */
html.bss-halloween header.header,
html.bss-halloween header.checkout-header { isolation: isolate; }
.hw-head { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.hw-head .hw-web { position: absolute; top: 0; left: 0; width: 58px; height: 58px; color: rgba(74, 35, 90, .2); }
.hw-head .hw-web-r { left: auto; right: 0; transform: scaleX(-1); }
.hw-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #F97316 0%, #D6336C 50%, #6D28D9 100%); }

.hw-fly { position: absolute; left: -70px; display: block; animation: hw-cross 24s linear infinite; will-change: transform; }
.hw-fly .hw-bat { display: block; width: 100%; height: auto; }
.hw-bat { color: #2A1233; transform-origin: 50% 70%; animation: hw-flap .32s ease-in-out infinite alternate; }
.hw-head .hw-fly { width: 26px; opacity: .55; }
.hw-head .hw-fly-1 { top: 30%; animation-duration: 26s; animation-delay: 3s; }
.hw-head .hw-fly-2 { top: 55%; width: 20px; animation-duration: 34s; animation-delay: 15s; }

@keyframes hw-cross {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(calc(25vw + 35px), -6px); }
  50%  { transform: translate(calc(50vw + 70px), 4px); }
  75%  { transform: translate(calc(75vw + 105px), -5px); }
  100% { transform: translate(calc(100vw + 140px), 0); }
}
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes hw-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes hw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }

/* ── Carrusel de la portada: guirnalda colgando, murciélagos y araña ── */
.hw-garland { position: absolute; left: 0; right: 0; top: 0; height: 60px; z-index: 12; pointer-events: none; }
.hw-garland .hw-string { position: absolute; left: -3%; right: -3%; top: -14px; height: 34px;
  border-bottom: 2px solid rgba(255, 255, 255, .55); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.hw-g-item { position: absolute; width: 26px; margin-left: -13px; transform-origin: 50% 0;
  animation: hw-swing 2.6s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.hw-g-item:nth-child(odd) { animation-delay: -1.3s; }
.hw-g-item .hw-pumpkin { display: block; width: 26px; height: 24px; }
.hw-g-item .hw-g-bat { display: block; width: 30px; margin-left: -2px; color: #1B0B26; animation: none; }
.hw-flag { display: block; width: 20px; height: 26px; margin: 0 auto; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #F97316; }
.hw-g-2 .hw-flag { background: #7C3AED; }

.hw-hero-bats { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; z-index: 11; pointer-events: none; }
.hw-hero-bats .hw-fly { width: 40px; }
.hw-hero-bats .hw-bat { color: #12061A; }
.hw-hero-bats .hw-fly-a { top: 16%; animation-duration: 17s; animation-delay: 1s; }
.hw-hero-bats .hw-fly-b { top: 28%; width: 30px; animation-duration: 23s; animation-delay: 8s; }
.hw-hero-bats .hw-fly-c { top: 10%; width: 24px; animation-duration: 29s; animation-delay: 14s; }

.hw-hero-spider { position: absolute; right: 12%; top: 0; width: 30px; z-index: 12; pointer-events: none; color: rgba(255, 255, 255, .75);
  animation: hw-bob 5s ease-in-out infinite; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)); }
.hw-hero-spider svg { display: block; width: 30px; height: 90px; }

/* Diapositiva de Halloween (index.html, .hw-slide) */
.hw-slide .carousel-overlay { background: linear-gradient(135deg, rgba(27, 11, 38, .5) 0%, rgba(90, 18, 56, .25) 100%); }
.hw-slide .carousel-badge { background: #B4400F; color: #fff; backdrop-filter: none; }
.hw-slide h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hw-slide p { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* ── Detalles de la portada ── */
html.bss-halloween .section-title::after { background: linear-gradient(90deg, #F97316, #D6336C 55%, #6D28D9); }
html.bss-halloween .product-card:hover { box-shadow: 0 14px 34px rgba(249, 115, 22, .2), 0 0 0 1px rgba(249, 115, 22, .25); }

/* ── Pie de página: noche con luna, murciélagos y telaraña ── */
html.bss-halloween footer.footer { background: linear-gradient(180deg, #24102E 0%, #150A1C 100%) !important; position: relative; isolation: isolate; }
.hw-foot { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.hw-moon { position: absolute; top: -38px; right: -38px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF6DD 0%, #FCE3A8 60%, #F2C46E 100%);
  box-shadow: 0 0 46px 14px rgba(252, 227, 168, .22); opacity: .9; }
.hw-foot .hw-bat { position: absolute; width: 30px; color: #0B0410; animation: none; }
/* murciélagos junto a la luna, arriba de los títulos de las columnas (empiezan a ~70 px) */
.hw-foot .hw-fb-1 { top: 22px; right: 96px; width: 32px; transform: rotate(-8deg); }
.hw-foot .hw-fb-2 { top: 40px; right: 140px; width: 20px; transform: rotate(10deg); }
.hw-foot .hw-fb-3 { top: 12px; right: 170px; width: 16px; }
.hw-foot .hw-fb-1, .hw-foot .hw-fb-2, .hw-foot .hw-fb-3 { color: rgba(253, 186, 116, .55); }
.hw-foot .hw-web { position: absolute; top: 0; left: 0; width: 130px; height: 130px; color: rgba(255, 255, 255, .13); }

@media (max-width: 768px) {
  .hw-tb-pumpkin svg { width: 15px; height: 13px; margin-right: 4px; }
  .hw-head .hw-web { width: 40px; height: 40px; }
  .hw-garland { height: 46px; }
  .hw-g-item { width: 20px; margin-left: -10px; }
  .hw-g-item .hw-pumpkin { width: 20px; height: 18px; }
  .hw-g-item .hw-g-bat { width: 24px; }
  .hw-flag { width: 16px; height: 20px; }
  .hw-garland .hw-g-item:nth-of-type(even) { display: none; }
  .hw-hero-spider { display: none; }
  .hw-hero-bats .hw-fly { width: 28px; }
  .hw-moon { width: 84px; height: 84px; top: -30px; right: -30px; }
  .hw-foot .hw-bat { display: none; }
  .hw-foot .hw-web { width: 90px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html.bss-halloween .hw-fly { display: none; }
  html.bss-halloween .hw-bat,
  html.bss-halloween .hw-g-item,
  html.bss-halloween .hw-hero-spider { animation: none !important; }
}
@media print {
  .hw-head, .hw-garland, .hw-hero-bats, .hw-hero-spider, .hw-foot, .hw-tb-pumpkin { display: none !important; }
}