/* ============================================================
   Profegalo · Tema de Halloween para la tienda
   Solo se activa cuando js/halloween.js pone la clase "pg-halloween"
   en <html> (entre las fechas configuradas en ese archivo).
   Paleta "Cyber Haunt Maker": noche violeta, calabaza, violeta arcano y cian.
   ============================================================ */
html.pg-halloween {
  --hw-noche: #12091e;
  --hw-noche-2: #1b0e2b;
  --hw-noche-3: #2d1845;
  --hw-calabaza: #ff7a00;
  --hw-fuego: #ff5400;
  --hw-violeta: #a855f7;
  --hw-cian: #00f0ff;
  --hw-hueso: #fdfbf7;
  --hw-niebla: #b8a8cb;
}

/* ---------- Fondo y textos generales ---------- */
html.pg-halloween body { background: var(--hw-noche); color: var(--hw-hueso); }
html.pg-halloween .pg-top { background: rgba(18, 9, 30, .9); border-bottom-color: rgba(255, 122, 0, .18); }
html.pg-halloween .pg-brand { color: var(--hw-calabaza); }
html.pg-halloween .pg-nav a { color: var(--hw-niebla); }
html.pg-halloween .pg-nav a:hover, html.pg-halloween .pg-nav a.on { color: var(--hw-hueso); background: rgba(255, 122, 0, .12); }
html.pg-halloween .pg-foot { border-top-color: rgba(168, 85, 247, .2); color: var(--hw-niebla); }
html.pg-halloween .pg-foot a, html.pg-halloween .pg-foot-datos { color: var(--hw-hueso); }
html.pg-halloween .pg-loading { color: var(--hw-niebla); }

/* ---------- Portada ---------- */
html.pg-halloween .pgk-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 214, 150, .22) 0, rgba(255, 214, 150, 0) 18%),
    radial-gradient(ellipse at 50% 110%, rgba(255, 122, 0, .28), rgba(255, 122, 0, 0) 60%),
    linear-gradient(180deg, #1d0f30 0%, #12091e 100%);
  border: 1px solid rgba(255, 122, 0, .2);
  isolation: isolate;
}
html.pg-halloween .pgk-hero::before { display: none; }
html.pg-halloween .pgk-hero-title { color: var(--hw-hueso); text-shadow: 0 0 22px rgba(255, 122, 0, .35); }
html.pg-halloween .pgk-hero-sub { color: var(--hw-niebla); }
html.pg-halloween .pgk-hero-logo { box-shadow: 0 0 0 3px rgba(255, 122, 0, .55), 0 0 40px rgba(255, 122, 0, .45); }
html.pg-halloween .pgk-hbtn-wa { background: var(--hw-calabaza); color: var(--hw-noche); box-shadow: 0 0 18px rgba(255, 122, 0, .45); }
html.pg-halloween .pgk-hbtn-sec { background: transparent; color: var(--hw-hueso); border-color: #ffa826; }
html.pg-halloween .pgk-hero > *:not(.hw-capa) { position: relative; z-index: 2; }

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

/* Etiqueta de campaña */
.hw-etiqueta {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(168, 85, 247, .18); border: 1px solid rgba(168, 85, 247, .5);
  color: #e9d5ff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.hw-etiqueta svg { width: 18px; height: 18px; }

/* Luna */
.hw-luna {
  position: absolute; right: 9%; top: 12%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6df 0, #ffe2a8 55%, #f2b866 100%);
  box-shadow: 0 0 40px 10px rgba(255, 210, 140, .35);
  animation: hw-luna 7s ease-in-out infinite;
}
@keyframes hw-luna { 0%, 100% { box-shadow: 0 0 40px 10px rgba(255, 210, 140, .32); } 50% { box-shadow: 0 0 56px 16px rgba(255, 210, 140, .45); } }

/* Niebla que se arrastra por el piso */
.hw-niebla {
  position: absolute; left: -20%; right: -20%; bottom: -30px; height: 120px;
  background:
    radial-gradient(ellipse 30% 60% at 20% 70%, rgba(220, 205, 255, .22), transparent 70%),
    radial-gradient(ellipse 35% 55% at 60% 80%, rgba(220, 205, 255, .18), transparent 70%),
    radial-gradient(ellipse 25% 50% at 90% 70%, rgba(220, 205, 255, .2), transparent 70%);
  filter: blur(6px);
  animation: hw-niebla 22s linear infinite alternate;
}
.hw-niebla.n2 { bottom: -46px; opacity: .7; animation-duration: 31s; animation-direction: alternate-reverse; }
@keyframes hw-niebla { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Araña que baja de su hilo, se queda un rato y vuelve a subir */
.hw-arana { position: absolute; left: 12%; top: 0; width: 46px; filter: drop-shadow(0 0 8px rgba(255, 122, 0, .45)); animation: hw-arana 11s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 50% 0; }
.hw-arana .hilo { display: block; width: 1px; height: 120px; margin: 0 auto; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .55)); }
.hw-arana svg { display: block; width: 46px; height: 46px; margin-top: -2px; animation: hw-balanceo 3.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes hw-arana {
  0%, 8% { transform: translateY(-120px); }
  30%, 62% { transform: translateY(0); }
  70% { transform: translateY(-14px); }
  76% { transform: translateY(0); }
  100% { transform: translateY(-120px); }
}
@keyframes hw-balanceo { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Murciélagos: vuelan por toda la página, de fondo */
.hw-cielo { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.hw-murcielago { position: absolute; left: -60px; width: 58px; opacity: 0; color: #0b0512; filter: drop-shadow(0 0 6px rgba(255, 122, 0, .35)); }
.hw-murcielago svg { width: 100%; height: auto; display: block; animation: hw-aleteo .32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.hw-murcielago.m1 { top: 16%; animation: hw-vuelo 14s linear 1s infinite; }
.hw-murcielago.m2 { top: 34%; width: 30px; animation: hw-vuelo 19s linear 6s infinite; }
.hw-murcielago.m3 { top: 9%; width: 36px; animation: hw-vuelo 23s linear 12s infinite; }
@keyframes hw-aleteo { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes hw-vuelo {
  0% { opacity: 0; transform: translate(0, 0); }
  4% { opacity: .9; }
  25% { transform: translate(28vw, -40px); }
  50% { transform: translate(55vw, 30px); }
  75% { transform: translate(82vw, -20px); }
  92% { opacity: .9; }
  100% { opacity: 0; transform: translate(110vw, 10px); }
}

/* ---------- Categorías, buscador y filtros ---------- */
html.pg-halloween .pgk-cats-title, html.pg-halloween .pgk-head h2 { color: var(--hw-hueso); }
html.pg-halloween .pgk-cats-title { border-bottom-color: var(--hw-calabaza); }
html.pg-halloween .pgk-pp { flex-wrap: wrap; }
html.pg-halloween .pgk-head h2 span { color: var(--hw-calabaza); }
html.pg-halloween .pgk-head-count { color: var(--hw-niebla); }
html.pg-halloween .pgk-cat-card { background: var(--hw-noche-2); border-color: rgba(168, 85, 247, .22); }
html.pg-halloween .pgk-cat-card:hover, html.pg-halloween .pgk-cat-card.active { border-color: rgba(255, 122, 0, .6); box-shadow: 0 8px 24px -4px rgba(255, 122, 0, .3); }
html.pg-halloween .pgk-cat-name { color: var(--hw-hueso); }
html.pg-halloween .pgk-cat-count { color: var(--hw-niebla); }
html.pg-halloween .pgk-search, html.pg-halloween .pgk-sort { background-color: #140a21; border-color: rgba(253, 251, 247, .15); color: var(--hw-hueso); }
html.pg-halloween .pgk-search:focus { border-color: var(--hw-calabaza); box-shadow: 0 0 0 3px rgba(255, 122, 0, .2); }
html.pg-halloween .pgk-fb { background: transparent; border-color: rgba(168, 85, 247, .35); color: var(--hw-niebla); }
html.pg-halloween .pgk-fb:hover { border-color: var(--hw-violeta); color: var(--hw-hueso); }
html.pg-halloween .pgk-fb.on { background: var(--hw-calabaza); border-color: var(--hw-calabaza); color: var(--hw-noche); }

/* ---------- Tarjetas de producto ---------- */
html.pg-halloween .pgk-p { background: var(--hw-noche-2); border-color: rgba(168, 85, 247, .2); }
html.pg-halloween .pgk-p:hover { background: #24133a; border-color: rgba(255, 122, 0, .45); box-shadow: 0 8px 24px -4px rgba(255, 122, 0, .25); }
html.pg-halloween .pgk-pi { background: radial-gradient(ellipse at 50% 100%, rgba(255, 122, 0, .16), transparent 70%), #160b25; }
html.pg-halloween .pgk-pt { color: var(--hw-hueso); }
html.pg-halloween .pgk-pcat { color: #c084fc; }
html.pg-halloween .pgk-pdesc { color: var(--hw-niebla); }
html.pg-halloween .pgk-pprice { color: var(--hw-calabaza); }
html.pg-halloween .pgk-pprice-old { color: var(--hw-niebla); text-decoration-color: var(--hw-fuego); text-decoration-thickness: 2px; }
html.pg-halloween .pgk-add { background: var(--hw-calabaza); color: var(--hw-noche); }
html.pg-halloween .pgk-add:hover { box-shadow: 0 0 18px rgba(255, 122, 0, .45); }
html.pg-halloween .pgk-add[disabled] { background: #2d1845; color: #8f7aa8; }

/* ---------- DESCUENTOS: la parte de terror ---------- */
/* La etiqueta arde, gotea y de vez en cuando tiembla */
html.pg-halloween .pgk-disc,
html.pg-halloween .pgs-discount {
  background: linear-gradient(180deg, #ff7a00, #ff3d00);
  color: #fff; border-radius: 999px; padding: 4px 10px 4px 26px;
  box-shadow: 0 0 14px rgba(255, 84, 0, .7);
  overflow: visible; animation: hw-temblor 5s ease-in-out infinite;
}
html.pg-halloween .pgk-disc::before,
html.pg-halloween .pgs-discount::before {   /* calavera */
  content: ""; position: absolute; left: 7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.9 2 3 5.6 3 10.3c0 2.8 1.4 5.2 3.6 6.6V20a2 2 0 0 0 2 2h1.2v-2.2h1.4V22h1.6v-2.2h1.4V22h1.2a2 2 0 0 0 2-2v-3.1c2.2-1.4 3.6-3.8 3.6-6.6C21 5.6 17.1 2 12 2zm-3.6 11.6a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm7.2 0a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.9 2 3 5.6 3 10.3c0 2.8 1.4 5.2 3.6 6.6V20a2 2 0 0 0 2 2h1.2v-2.2h1.4V22h1.6v-2.2h1.4V22h1.2a2 2 0 0 0 2-2v-3.1c2.2-1.4 3.6-3.8 3.6-6.6C21 5.6 17.1 2 12 2zm-3.6 11.6a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm7.2 0a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.pg-halloween .pgs-discount { position: relative; }
@keyframes hw-temblor {
  0%, 86%, 100% { transform: none; }
  88% { transform: translateX(-2px) rotate(-3deg); }
  90% { transform: translateX(2px) rotate(3deg); }
  92% { transform: translateX(-2px) rotate(-2deg); }
  94% { transform: translateX(1px) rotate(1deg); }
}
/* Gotas que caen de la etiqueta */
.hw-gota {
  position: absolute; top: 85%; width: 5px; height: 7px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #ff3d00; box-shadow: 0 0 6px rgba(255, 61, 0, .8);
  animation: hw-gota 2.8s cubic-bezier(.55, 0, 1, .45) infinite; pointer-events: none;
}
.hw-gota.g1 { left: 34%; animation-delay: .2s; }
.hw-gota.g2 { left: 58%; animation-delay: 1.3s; height: 9px; }
.hw-gota.g3 { left: 78%; animation-delay: 2.1s; }
@keyframes hw-gota {
  0% { transform: translateY(0) scaleY(.4); opacity: 0; }
  12% { transform: translateY(0) scaleY(1); opacity: 1; }
  40% { transform: translateY(2px) scaleY(1.3); }
  100% { transform: translateY(46px) scaleY(1); opacity: 0; }
}

/* Tarjeta con descuento: telaraña en la esquina, ojos en la oscuridad y brillo de calabaza */
html.pg-halloween .pgk-p.hw-maldito { border-color: rgba(255, 122, 0, .4); box-shadow: 0 0 0 1px rgba(255, 122, 0, .15), 0 10px 30px -10px rgba(255, 84, 0, .45); }
.hw-telarana { position: absolute; left: 0; bottom: 0; width: 70px; height: 70px; opacity: .55; pointer-events: none; }
.hw-ojos { position: absolute; left: 50%; top: 42%; width: 46px; height: 12px; margin-left: -23px; display: flex; justify-content: space-between; pointer-events: none; opacity: 0; transition: opacity .4s ease .1s; }
.hw-ojos i { width: 12px; height: 7px; border-radius: 50%; background: #ffd400; box-shadow: 0 0 10px #ff7a00, 0 0 18px #ff5400; animation: hw-parpadeo 3.4s ease-in-out infinite; }
html.pg-halloween .pgk-p.hw-maldito:hover .hw-ojos { opacity: 1; }
html.pg-halloween .pgk-p.hw-maldito:hover .pgk-pi img { filter: brightness(.45) saturate(.7); transition: filter .4s ease; }
@keyframes hw-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
/* Precio de oferta con aviso */
.hw-aviso { display: block; flex-basis: 100%; margin-top: 2px; font-size: 11px; font-weight: 800; color: #ff9a3c; letter-spacing: .02em; animation: hw-titila 2.6s steps(1) infinite; }
@keyframes hw-titila { 0%, 70%, 76%, 100% { opacity: 1; } 72%, 74% { opacity: .2; } }

/* Agotado: se desvanece como un fantasma */
html.pg-halloween .pgk-stk-no { background: rgba(168, 85, 247, .25); color: #e9d5ff; animation: hw-fantasma 3.5s ease-in-out infinite; }
@keyframes hw-fantasma { 0%, 100% { opacity: .95; transform: translateY(0); } 50% { opacity: .45; transform: translateY(-2px); } }

/* ---------- Carrito y detalle ---------- */
html.pg-halloween .pgk-cf { background: var(--hw-calabaza); box-shadow: 0 0 22px rgba(255, 122, 0, .55); }
html.pg-halloween .pgk-cp { background: #1b0e2b; color: var(--hw-hueso); }
html.pg-halloween .pgk-ch { border-bottom-color: rgba(168, 85, 247, .25); }
html.pg-halloween .pgk-ci-name { color: var(--hw-hueso); }
html.pg-halloween .pgk-ci-price { color: var(--hw-calabaza); }
html.pg-halloween .pgk-cft { background: #160b25; border-top-color: rgba(168, 85, 247, .25); }
html.pg-halloween .pgk-ctotal { color: var(--hw-hueso); }
html.pg-halloween .pgs-info h1 { color: var(--hw-hueso); }
html.pg-halloween .pgs-price { color: var(--hw-calabaza); }
html.pg-halloween .pgs-img { background: #160b25; border-color: rgba(168, 85, 247, .25); }
html.pg-halloween .pgs-bc, html.pg-halloween .pgs-bc a { color: var(--hw-niebla); }
html.pg-halloween .pgs-tab-content { color: #d9cce8; }

/* ---------- Respeto a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hw-cielo, .hw-gota, .hw-arana { display: none; }
  .hw-luna, .hw-niebla, .hw-ojos i, .hw-aviso,
  html.pg-halloween .pgk-disc, html.pg-halloween .pgs-discount, html.pg-halloween .pgk-stk-no { animation: none; }
}

@media (max-width: 600px) {
  .hw-luna { right: 5%; top: 4%; width: 44px; height: 44px; }
  .hw-arana { left: 6%; }
}