/*
 * BOOSTIFY MARKET — HALLOWEEN EDITION
 * Capa temporal de tema. Se carga DESPUÉS de custom.css y solo actúa cuando
 * <html class="hw"> está presente (layouts/master.njk). Para volver al diseño
 * normal basta quitar esa clase o el <link> a este archivo.
 *
 * Estructura:
 *   1. Tokens (paleta Halloween sobre la identidad púrpura)
 *   2. Atmósfera (fondo, luna, niebla, árboles, telarañas, vignette)
 *   3. Cielo (murciélagos + brasas)
 *   4. Superficies de página
 *   5. Navbar
 *   6. Hero
 *   7. Catálogo y tarjetas de producto
 *   8. Botones, formularios, modales
 *   9. Carrito / checkout / cuenta
 *  10. CTA, features, footer
 *  11. Animaciones
 *  12. Responsive y reduced-motion
 *
 * Todo el scope va bajo `html.hw` para ganar en especificidad a los <style>
 * inline de cada componente sin ensuciar el resto del CSS.
 */

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════ */
:root {
  --hw-orange: #ff7a1a;
  --hw-orange-soft: #ff9a3d;
  --hw-amber: #ffb347;
  --hw-ember: #ff4d1f;
  --hw-blood: #7a1426;
  --hw-violet: #8b5cf6;
  --hw-purple: #6d28d9;
  --hw-purple-deep: #1a0b2e;
  --hw-night: #07040d;
  --hw-bone: #f6e7d4;

  --hw-orange-rgb: 255, 122, 26;
  --hw-violet-rgb: 139, 92, 246;

  /* Reutiliza los tokens de custom.css: todo lo que ya usaba --brand-grad se transforma solo */
  --brand-1: #8b5cf6;
  --brand-2: #b784ff;
  --brand-3: #ff7a1a;
  --brand-grad: linear-gradient(135deg, #6d28d9 0%, #9d3ce0 48%, #d9560f 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(var(--hw-orange-rgb), .14));
  --hw-text-grad: linear-gradient(100deg, #cdb0ff 0%, #ffb067 100%);

  --bg-page: var(--hw-night);
  --bg-panel: #130a22;
  --bg-card: #130a22;
  --bg-card-hover: #1a0f2e;
  --bg-surface: #0f0819;
  --bg-surface-2: #170d29;

  --border-subtle: rgba(139, 92, 246, .2);
  --border-mid: rgba(139, 92, 246, .38);
  --border-bright: rgba(var(--hw-orange-rgb), .62);

  --shadow-soft: 0 6px 24px rgba(0, 0, 0, .42), 0 0 0 1px rgba(139, 92, 246, .06);
  --shadow-mid: 0 12px 38px rgba(0, 0, 0, .5), 0 0 26px rgba(var(--hw-orange-rgb), .16);
  --shadow-glow: 0 14px 42px rgba(0, 0, 0, .55), 0 0 34px rgba(var(--hw-orange-rgb), .28);

  /* Tokens de la capa "boost" de custom.css */
  --boost-bg: var(--hw-night);
  --boost-panel: #120a20;
  --boost-panel-2: #1a0f2e;
  --boost-line: rgba(176, 130, 255, .16);
  --boost-primary: #a974ff;
  --boost-primary-2: var(--hw-orange-soft);
  --boost-shadow: 0 22px 54px rgba(0, 0, 0, .5);

  --cl-accent: #8b5cf6;
  --cl-accent-rgb: 139, 92, 246;
}

/* ═══ 2. ATMÓSFERA (detrás del contenido) ═════════════════════════ */
html.hw body::before {
  background:
    radial-gradient(ellipse 55% 38% at 12% -6%, rgba(124, 58, 237, .34) 0%, transparent 62%),
    radial-gradient(ellipse 42% 30% at 92% 4%, rgba(var(--hw-orange-rgb), .13) 0%, transparent 62%),
    radial-gradient(ellipse 60% 36% at 50% 108%, rgba(var(--hw-orange-rgb), .16) 0%, transparent 66%),
    radial-gradient(ellipse 45% 30% at 50% 50%, rgba(88, 28, 135, .14) 0%, transparent 70%),
    linear-gradient(180deg, #0d0618 0%, var(--hw-night) 55%, #09030f 100%) !important;
}
html.hw body::after {
  background-image: radial-gradient(rgba(var(--hw-orange-rgb), .05) 1px, transparent 1px) !important;
}

.hw-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Niebla: una sola capa lenta (transform = animación solo de compositor) */
.hw-fog {
  position: absolute;
  left: -30%;
  bottom: 0;
  width: 160%;
  height: 26vh;
  opacity: .45;
  background:
    radial-gradient(ellipse 20% 55% at 14% 60%, rgba(150, 110, 220, .17), transparent 70%),
    radial-gradient(ellipse 24% 50% at 42% 45%, rgba(120, 80, 190, .14), transparent 70%),
    radial-gradient(ellipse 20% 60% at 70% 62%, rgba(170, 120, 230, .15), transparent 70%),
    radial-gradient(ellipse 22% 50% at 92% 48%, rgba(120, 80, 190, .14), transparent 70%);
  will-change: transform;
}
.hw-fog--a { animation: hw-fog-drift 90s linear infinite alternate; }

/* Telarañas en esquinas */
.hw-web {
  position: absolute;
  top: 0;
  width: clamp(110px, 14vw, 200px);
  height: clamp(110px, 14vw, 200px);
  color: rgba(214, 190, 255, .12);
}
.hw-web--tl { left: 0; }
.hw-web--tr { right: 0; transform: scaleX(-1); }

.hw-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(3, 1, 8, .6) 100%);
}

/* ═══ 3. CIELO (por encima del contenido, sin interacción) ════════ */
.hw-sky {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hw-embers { position: absolute; inset: 0; opacity: .85; }

.hw-bat {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 15px;
  color: #0a0412;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(var(--hw-violet-rgb), .55));
  will-change: transform;
}
.hw-bat--1 { animation: hw-bat-fly-a 38s linear 3s infinite; }
.hw-bat--2 { width: 26px; height: 11px; animation: hw-bat-fly-b 52s linear 16s infinite; }
.hw-bat--3 { width: 20px; height: 9px; animation: hw-bat-fly-a 66s linear 30s infinite reverse; }

/* ═══ 4. SUPERFICIES DE PÁGINA ════════════════════════════════════ */
html.hw body { background-color: var(--hw-night) !important; }

/* El fondo lo dibuja body::before; las secciones grandes se vuelven transparentes para que se vea */
html.hw .flex-wrapper,
html.hw .boost-products,
html.hw .boost-why,
html.hw .about-features,
html.hw .rp-why-us {
  background: transparent !important;
}

/* Carrusel de productos: el desvanecido de bordes sigue usando pseudo-elementos (barato de componer),
   pero degradando hacia el negro de la edición en vez del color sólido anterior */
html.hw .boost-products__road::before { background: linear-gradient(90deg, rgba(7, 4, 13, .96), transparent); }
html.hw .boost-products__road::after { background: linear-gradient(270deg, rgba(7, 4, 13, .96), transparent); }

html.hw .editor a:hover,
html.hw .boost-legal__card a:hover { color: var(--hw-orange-soft); }
html.hw ::selection { background: rgba(var(--hw-orange-rgb), .45); color: #fff; }
html.hw :focus-visible { outline-color: var(--hw-orange) !important; }
html.hw { scrollbar-color: var(--hw-orange) var(--bg-surface); }
html.hw ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7c3aed, #d9560f); }

html.hw .boost-kicker { color: var(--hw-orange-soft) !important; }
html.hw .rp-section-badge {
  color: var(--hw-orange-soft) !important;
  border-color: rgba(var(--hw-orange-rgb), .32) !important;
  background: rgba(var(--hw-orange-rgb), .08) !important;
}

/* ═══ 5. NAVBAR ═══════════════════════════════════════════════════ */
html.hw .boostnav__bar {
  background: rgba(12, 6, 22, .84) !important;
  border-color: rgba(var(--hw-violet-rgb), .3);
  box-shadow: 0 12px 40px rgba(3, 1, 8, .65), 0 1px 0 rgba(var(--hw-orange-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .03);
}
html.hw .boostnav__brand span::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: .45rem;
  border-radius: 50%;
  background: var(--hw-orange);
  box-shadow: 0 0 10px 2px rgba(var(--hw-orange-rgb), .75);
  animation: hw-flicker 3.4s ease-in-out infinite;
  vertical-align: middle;
}
html.hw .boostnav__link:hover {
  background: rgba(var(--hw-orange-rgb), .13) !important;
  color: #ffe6cf !important;
}
html.hw .boostnav__link.is-active {
  background: linear-gradient(135deg, #ffb067, #ff7a1a) !important;
  color: #1c0a02 !important;
  box-shadow: 0 4px 18px rgba(var(--hw-orange-rgb), .38);
}
html.hw .boostnav__icon-btn {
  border-color: rgba(var(--hw-violet-rgb), .5) !important;
  background: rgba(var(--hw-violet-rgb), .1) !important;
}
html.hw .boostnav__icon-btn:hover {
  background: rgba(var(--hw-orange-rgb), .18) !important;
  border-color: rgba(var(--hw-orange-rgb), .85) !important;
  box-shadow: 0 0 16px rgba(var(--hw-orange-rgb), .35);
}
html.hw .boostnav__cart-count {
  background: linear-gradient(135deg, #ff9a3d, #ff4d1f);
  color: #1c0a02;
}
html.hw .boostnav .navbar-toggler { border-color: rgba(var(--hw-orange-rgb), .45) !important; }

/* ═══ 6. HERO ═════════════════════════════════════════════════════ */
/* hero.jpg se conserva; se tiñe de violeta/ámbar para integrarlo a la noche */
html.hw .boost-hero {
  background:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(var(--hw-orange-rgb), .28), transparent 70%),
    linear-gradient(180deg, rgba(14, 5, 28, .38) 0%, rgba(14, 5, 28, .62) 58%, var(--hw-night) 100%),
    linear-gradient(90deg, rgba(40, 10, 70, .72), rgba(9, 4, 16, .1), rgba(40, 10, 70, .72)),
    var(--boost-hero-image) center / cover no-repeat !important;
}
html.hw .boost-hero::before {
  background-image: radial-gradient(rgba(255, 214, 170, .85) .75px, transparent .85px);
  opacity: .32;
}
html.hw .boost-hero__aurora {
  background: radial-gradient(closest-side, rgba(var(--hw-orange-rgb), .26), rgba(124, 58, 237, .14) 55%, transparent) !important;
}
html.hw .boost-eyebrow {
  border-color: rgba(var(--hw-orange-rgb), .45);
  background: rgba(24, 8, 4, .62);
  color: #ffd9b3;
  box-shadow: 0 0 22px rgba(var(--hw-orange-rgb), .18);
}
html.hw .boost-eyebrow span {
  background: var(--hw-orange);
  box-shadow: 0 0 0 4px rgba(var(--hw-orange-rgb), .16), 0 0 12px var(--hw-orange);
  animation: hw-flicker 3s ease-in-out infinite;
}
html.hw .boost-eyebrow .hw-tag-icon { width: 15px; height: 15px; color: var(--hw-orange-soft); flex: 0 0 auto; }
html.hw .boost-hero h1 {
  text-shadow: 0 2px 30px #050308, 0 0 46px rgba(var(--hw-violet-rgb), .3);
}
html.hw .boost-hero h1 span {
  background: linear-gradient(105deg, #b98aff 0%, #f4e9ff 38%, #ffab5e 72%, #ff7a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 16px rgba(5, 3, 8, .75));
}
html.hw .btn.boost-cta {
  background: linear-gradient(130deg, #ff7a1a 0%, #ffb347 100%) !important;
  color: #1c0a02 !important;
  box-shadow: 0 10px 34px rgba(var(--hw-orange-rgb), .38), 0 0 0 1px rgba(255, 200, 140, .25) inset;
}
html.hw .btn.boost-cta:hover {
  box-shadow: 0 14px 44px rgba(var(--hw-orange-rgb), .55) !important;
  filter: brightness(1.06);
}
html.hw .boost-text-link { border-color: rgba(var(--hw-violet-rgb), .38); }
html.hw .boost-text-link:hover { border-color: rgba(var(--hw-orange-rgb), .6); }
html.hw .boost-hero__trust b {
  background: var(--hw-orange);
  box-shadow: 0 0 9px var(--hw-orange);
}

/* Decoración propia del hero */
.hw-hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hw-hero-moon {
  position: absolute;
  top: clamp(110px, 20%, 190px);
  right: clamp(24px, 11vw, 190px);
  width: clamp(64px, 8.5vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(150, 105, 140, .38) 0 9%, transparent 10%),
    radial-gradient(circle at 63% 58%, rgba(150, 105, 140, .3) 0 12%, transparent 13%),
    radial-gradient(circle at 44% 72%, rgba(150, 105, 140, .24) 0 6%, transparent 7%),
    radial-gradient(circle at 38% 36%, #fff3dc 0%, #f6dcb4 55%, #e0b583 100%);
  box-shadow: 0 0 46px 6px rgba(255, 196, 120, .3), 0 0 150px 34px rgba(var(--hw-orange-rgb), .16);
  opacity: .78;
}
.hw-hero-trees {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(56px, 8vw, 112px);
  color: var(--hw-night);
}
.hw-hero-pumpkin {
  position: absolute;
  bottom: 1.2rem;
  width: clamp(44px, 6vw, 82px);
  color: #e8590c;
  filter: drop-shadow(0 0 16px rgba(var(--hw-orange-rgb), .55));
  animation: hw-candle 5s ease-in-out infinite;
}
.hw-hero-pumpkin--l { left: clamp(10px, 7vw, 120px); }
.hw-hero-pumpkin--r { right: clamp(10px, 7vw, 120px); width: clamp(34px, 4.6vw, 62px); animation-delay: 1.6s; }
.hw-hero-spider {
  position: absolute;
  top: 0;
  left: clamp(18px, 12vw, 190px);
  transform-origin: top center;
  animation: hw-spider-sway 7s ease-in-out infinite;
}
.hw-hero-spider::before {
  content: '';
  display: block;
  width: 1px;
  height: clamp(90px, 18vh, 190px);
  margin: 0 auto;
  background: linear-gradient(180deg, transparent, rgba(220, 200, 255, .55));
}
.hw-hero-spider svg { display: block; width: 26px; height: 26px; margin: -2px auto 0; color: #0c0514; filter: drop-shadow(0 0 5px rgba(var(--hw-violet-rgb), .7)); }

/* ═══ 7. CATÁLOGO Y TARJETAS DE PRODUCTO ══════════════════════════ */
html.hw .pcard,
html.hw .products .card {
  position: relative;
  background: linear-gradient(180deg, #170d29 0%, #110920 100%) !important;
  border: 1px solid rgba(var(--hw-violet-rgb), .28) !important;
  box-shadow: var(--shadow-soft);
}
html.hw .pcard:hover,
html.hw .products .card:hover {
  border-color: rgba(var(--hw-orange-rgb), .7) !important;
  box-shadow: var(--shadow-glow) !important;
}
/* Telaraña sutil en la esquina superior derecha de cada tarjeta */
html.hw .pcard::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  z-index: 3;
  pointer-events: none;
  opacity: .16;
  transition: opacity .3s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%23e6d4ff' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M54 0L0 0M54 0L0 14M54 0L4 34M54 0L22 54M54 0L54 54'/%3E%3Cpath d='M40 0Q42 12 54 14M26 0Q30 22 54 26M12 0Q18 32 54 40'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
html.hw .pcard:hover::after { opacity: .4; }
html.hw .pcard-img::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(var(--hw-orange-rgb), .1));
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
html.hw .pcard:hover .pcard-img::after { opacity: 1; }
html.hw .pcard-body { background: transparent; }
html.hw .pcard-title-link:hover .pcard-title { color: var(--hw-orange-soft); }
html.hw .pcard-price {
  background: var(--hw-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.hw .pcard-price-old { -webkit-text-fill-color: var(--text-dim); }
html.hw .pcard-price-label { color: rgba(255, 190, 130, .6); }
html.hw .pcard-stock-pill,
html.hw .pcard-badge { background: rgba(10, 4, 18, .78); border-color: rgba(var(--hw-orange-rgb), .22); }

/* Filtros del catálogo */
html.hw .boost-filter-card { border-color: rgba(var(--hw-violet-rgb), .24) !important; }
html.hw .boost-filter-pill:hover { background: rgba(var(--hw-orange-rgb), .12); color: #ffe6cf; }
html.hw .boost-filter-pill.is-active {
  background: linear-gradient(135deg, #6d28d9 0%, #c2410c 100%) !important;
}
html.hw .boost-filter-pill__count { background: rgba(var(--hw-orange-rgb), .14); }

/* ═══ 8. BOTONES, FORMULARIOS, MODALES ════════════════════════════ */
html.hw .btn-primary {
  background: var(--brand-grad) !important;
  box-shadow: 0 4px 20px rgba(var(--hw-violet-rgb), .3);
}
html.hw .btn-primary:hover:not(:disabled) {
  box-shadow: 0 10px 32px rgba(var(--hw-orange-rgb), .42) !important;
}
html.hw .btn-outline-primary {
  --bs-btn-color: #d8c2ff !important;
  --bs-btn-border-color: rgba(var(--hw-violet-rgb), .5) !important;
}
html.hw .btn-outline-primary:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #c2410c 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 26px rgba(var(--hw-orange-rgb), .3);
}

html.hw .form-control:focus,
html.hw .form-select:focus,
html.hw .form-check-input:focus {
  border-color: var(--hw-orange) !important;
  box-shadow: 0 0 0 .22rem rgba(var(--hw-orange-rgb), .22) !important;
}
html.hw .form-check-input:checked {
  background-color: var(--hw-orange);
  border-color: var(--hw-orange);
}
html.hw .rp-otp-digit:focus {
  border-color: var(--hw-orange) !important;
  box-shadow: 0 0 0 3px rgba(var(--hw-orange-rgb), .22) !important;
}

html.hw .modal-backdrop { background: #04010a; }
html.hw .modal-content {
  background: linear-gradient(180deg, #150a26 0%, #0d0618 100%) !important;
  border-color: rgba(var(--hw-violet-rgb), .34) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .7), 0 0 44px rgba(var(--hw-orange-rgb), .1) !important;
  position: relative;
}
html.hw .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--hw-orange), transparent);
  opacity: .8;
  pointer-events: none;
}

/* ═══ 9. CARRITO / CHECKOUT / CUENTA / PÁGINAS ════════════════════ */
html.hw .card,
html.hw .bg-gray,
html.hw .cart .product,
html.hw .cart .form,
html.hw .editor,
html.hw .boost-legal__card {
  background: var(--boost-panel) !important;
  border-color: rgba(var(--hw-violet-rgb), .24) !important;
}
html.hw .boost-order-summary { border-color: rgba(var(--hw-orange-rgb), .26) !important; }
html.hw .boost-order-summary:hover { box-shadow: 0 0 30px rgba(var(--hw-orange-rgb), .12); }
html.hw .boost-checkout__heading h1 { text-shadow: 0 0 28px rgba(var(--hw-violet-rgb), .35); }
html.hw .editor a { color: var(--hw-orange-soft); }

/* ═══ 10. CTA, FEATURES, FOOTER ═══════════════════════════════════ */
html.hw .rp-ctab-card {
  background: linear-gradient(145deg, #1b0d30, #0b0514) !important;
  border-color: rgba(var(--hw-orange-rgb), .26) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, .5), 0 0 40px rgba(var(--hw-orange-rgb), .1) !important;
}
html.hw .rp-ctab-glow {
  background: radial-gradient(closest-side, rgba(var(--hw-orange-rgb), .26), transparent) !important;
}
html.hw .rp-ctab-badge {
  color: #ffd9b3 !important;
  border-color: rgba(var(--hw-orange-rgb), .38) !important;
  background: rgba(var(--hw-orange-rgb), .1) !important;
}
html.hw .rp-ctab-badge svg { color: var(--hw-orange-soft) !important; }
html.hw .rp-ctab-btn-primary {
  background: linear-gradient(130deg, #ff7a1a, #ffb347) !important;
  color: #1c0a02 !important;
  box-shadow: 0 8px 28px rgba(var(--hw-orange-rgb), .32) !important;
}
html.hw .rp-ctab-btn-secondary { border-color: rgba(var(--hw-violet-rgb), .45) !important; }

html.hw .rp-why-card:hover,
html.hw .boost-why__card:hover {
  border-color: rgba(var(--hw-orange-rgb), .5);
  box-shadow: var(--shadow-mid);
}
html.hw .rp-why-icon { color: var(--hw-orange-soft); }

html.hw .boost-footer {
  position: relative;
  background: linear-gradient(180deg, rgba(7, 3, 13, .78), #050209) !important;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(var(--hw-orange-rgb), .6), rgba(var(--hw-violet-rgb), .6), transparent) 1;
}
html.hw .boost-footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(110px, 14vw, 190px);
  height: clamp(110px, 14vw, 190px);
  pointer-events: none;
  opacity: .16;
  transform: scaleX(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e6d4ff' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 0L200 0M0 0L200 70M0 0L200 140M0 0L170 200M0 0L90 200M0 0L0 200'/%3E%3Cpath d='M30 0Q34 30 0 30M62 0Q70 62 0 62M96 0Q108 96 0 96M132 0Q148 132 0 132M168 0Q190 168 0 168'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
html.hw .boost-footer__name i { color: var(--hw-orange-soft); }
html.hw .boost-footer__links a:hover { color: var(--hw-orange-soft); }
html.hw .boost-footer__discord {
  background: rgba(var(--hw-violet-rgb), .16);
  border-color: rgba(var(--hw-violet-rgb), .34);
}
html.hw .boost-footer__discord:hover { border-color: rgba(var(--hw-orange-rgb), .6); }
html.hw .boost-footer__bottom span:last-child::before { content: '\1F383\00a0'; }

/* ═══ 11. ANIMACIONES (solo transform/opacity) ════════════════════ */
@keyframes hw-fog-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18%, 0, 0); } }

@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: .78; }
  50% { opacity: .5; }
  55% { opacity: .9; }
}
@keyframes hw-candle {
  0%, 100% { opacity: 1; }
  40% { opacity: .82; }
  55% { opacity: .94; }
  70% { opacity: .78; }
}
@keyframes hw-spider-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
/* Murciélagos: cruzan la pantalla de forma lenta y aislada */
@keyframes hw-bat-fly-a {
  0%   { opacity: 0; transform: translate3d(-8vw, 26vh, 0) scale(1); }
  6%   { opacity: .9; }
  25%  { transform: translate3d(28vw, 14vh, 0) scale(1.1, .8); }
  50%  { transform: translate3d(58vw, 22vh, 0) scale(1, 1); }
  75%  { transform: translate3d(86vw, 10vh, 0) scale(1.1, .8); }
  94%  { opacity: .9; }
  100% { opacity: 0; transform: translate3d(110vw, 18vh, 0) scale(1); }
}
@keyframes hw-bat-fly-b {
  0%   { opacity: 0; transform: translate3d(108vw, 52vh, 0) scale(-1, 1); }
  6%   { opacity: .8; }
  30%  { transform: translate3d(72vw, 40vh, 0) scale(-1.1, .8); }
  60%  { transform: translate3d(36vw, 48vh, 0) scale(-1, 1); }
  94%  { opacity: .8; }
  100% { opacity: 0; transform: translate3d(-10vw, 36vh, 0) scale(-1.1, .8); }
}

/* ═══ 12. RESPONSIVE Y REDUCED-MOTION ═════════════════════════════ */
@media (max-width: 991.98px) {
  .hw-bat--3 { display: none; }
}
@media (max-width: 767.98px) {
  .hw-fog, .hw-bat--2 { display: none; }
  .hw-web { width: 96px; height: 96px; opacity: .8; }
  .hw-hero-pumpkin--r { display: none; }
  .hw-hero-pumpkin--l { left: 8px; bottom: .4rem; width: 38px; }
  .hw-hero-spider { left: 14px; }
  html.hw .pcard::after { width: 42px; height: 42px; }
  html.hw .boost-footer__bottom span:last-child::before { content: ''; }
}
/* Modo lite (lo activa halloween.js si el equipo va justo, o reduced-motion / poca RAM) */
html.hw-lite .hw-fog,
html.hw-lite .hw-bat,
html.hw-lite .hw-hero-pumpkin,
html.hw-lite .hw-hero-spider,
html.hw-lite .boostnav__brand span::after,
html.hw-lite .boost-eyebrow span { animation: none !important; }
html.hw-lite .hw-bat,
html.hw-lite .hw-embers,
html.hw-lite .hw-fog { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hw-fog, .hw-bat, .hw-hero-pumpkin, .hw-hero-spider,
  html.hw .boostnav__brand span::after,
  html.hw .boost-eyebrow span { animation: none !important; }
  .hw-bat, .hw-embers { display: none; }
}