/* =========================================================
   TEMA DE HALLOWEEN (decoración mínima, temporal)
   - Todo está bajo la clase "halloween" del <html>.
   - La clase se pone sola en el <head> (index.html) y se quita sola
     después del 31 de octubre de 2026 (hora de Colombia).
   - Para retirarlo del todo: borrar este archivo, su <link> y el
     bloque marcado "HALLOWEEN" en index.html.
   ========================================================= */

/* Por defecto (sin la clase) todo lo de Halloween está oculto */
.hw-strip, .hw-garland, .hw-spider, .hw-bats, .promo-hw { display: none; }

/* ---------- B · Franja de aviso arriba ---------- */
.halloween .hw-strip {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 38px; padding: 6px 14px; text-align: center;
  background: #160d05; border-bottom: 1px solid rgba(249,115,22,.45);
  color: #fdba74; font-size: 14.5px; font-weight: 500; letter-spacing: .4px; line-height: 1.3;
}
.hw-strip svg { width: 20px; height: 20px; flex: none; }

/* ---------- A · Telarañas en las esquinas del encabezado ---------- */
.halloween header::before, .halloween header::after {
  content: ""; position: absolute; top: 0; width: 150px; height: 150px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M0%200H100M0%200L94%2030M0%200L76%2062M0%200L48%2088M0%200L22%2098M0%200V100%22%2F%3E%20%3Cpath%20d%3D%22M22%200Q19%2019%200%2022M44%200Q38%2038%200%2044M66%200Q57%2057%200%2066M88%200Q75%2075%200%2088%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; pointer-events: none; z-index: 1;
}
.halloween header::before { left: 0; }
.halloween header::after  { right: 0; transform: scaleX(-1); }

/* ---------- D · Guirnalda de luces bajo el encabezado ---------- */
.halloween .hw-garland {
  display: block; position: absolute; left: 0; right: 0; top: 100%; height: 48px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22238%22%20height%3D%2248%22%20viewBox%3D%220%200%20238%2048%22%3E%20%3Cpath%20d%3D%22M0%203Q119%2047%20238%203%22%20fill%3D%22none%22%20stroke%3D%22%23161616%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2233.3%22%20cy%3D%2227.6%22%20r%3D%2212%22%20fill%3D%22%23fb923c%22%20fill-opacity%3D%22.2%22%2F%3E%3Ccircle%20cx%3D%2290.4%22%20cy%3D%2237.7%22%20r%3D%2212%22%20fill%3D%22%23fbbf24%22%20fill-opacity%3D%22.2%22%2F%3E%3Ccircle%20cx%3D%22147.6%22%20cy%3D%2237.7%22%20r%3D%2212%22%20fill%3D%22%23f97316%22%20fill-opacity%3D%22.2%22%2F%3E%3Ccircle%20cx%3D%22204.7%22%20cy%3D%2227.6%22%20r%3D%2212%22%20fill%3D%22%23fde68a%22%20fill-opacity%3D%22.2%22%2F%3E%3Cline%20x1%3D%2233.3%22%20y1%3D%2213.6%22%20x2%3D%2233.3%22%20y2%3D%2218.6%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cellipse%20cx%3D%2233.3%22%20cy%3D%2224.6%22%20rx%3D%224.6%22%20ry%3D%226.4%22%20fill%3D%22%23fb923c%22%2F%3E%20%3Cellipse%20cx%3D%2232.0%22%20cy%3D%2222.6%22%20rx%3D%221.3%22%20ry%3D%222%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.6%22%2F%3E%3Cline%20x1%3D%2290.4%22%20y1%3D%2223.7%22%20x2%3D%2290.4%22%20y2%3D%2228.7%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cellipse%20cx%3D%2290.4%22%20cy%3D%2234.7%22%20rx%3D%224.6%22%20ry%3D%226.4%22%20fill%3D%22%23fbbf24%22%2F%3E%20%3Cellipse%20cx%3D%2289.1%22%20cy%3D%2232.7%22%20rx%3D%221.3%22%20ry%3D%222%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.6%22%2F%3E%3Cline%20x1%3D%22147.6%22%20y1%3D%2223.7%22%20x2%3D%22147.6%22%20y2%3D%2228.7%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cellipse%20cx%3D%22147.6%22%20cy%3D%2234.7%22%20rx%3D%224.6%22%20ry%3D%226.4%22%20fill%3D%22%23f97316%22%2F%3E%20%3Cellipse%20cx%3D%22146.3%22%20cy%3D%2232.7%22%20rx%3D%221.3%22%20ry%3D%222%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.6%22%2F%3E%3Cline%20x1%3D%22204.7%22%20y1%3D%2213.6%22%20x2%3D%22204.7%22%20y2%3D%2218.6%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cellipse%20cx%3D%22204.7%22%20cy%3D%2224.6%22%20rx%3D%224.6%22%20ry%3D%226.4%22%20fill%3D%22%23fde68a%22%2F%3E%20%3Cellipse%20cx%3D%22203.4%22%20cy%3D%2222.6%22%20rx%3D%221.3%22%20ry%3D%222%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E") repeat-x 0 0 / 238px 48px; pointer-events: none; z-index: 5;
}

/* ---------- E · Araña colgante (solo en pantallas anchas, para no tapar el botón) ---------- */
.halloween .hw-spider {
  display: none; position: absolute; right: 40px; top: 0; width: 56px; height: 120px;
  pointer-events: none; z-index: 2; transform-origin: 28px 0; animation: hwSwing 5s ease-in-out infinite;
}
.hw-spider svg { width: 100%; height: 100%; }
@media (min-width: 1500px) { .halloween .hw-spider { display: block; } }

/* ---------- C + F · Murciélagos y luna sobre la foto del banner ---------- */
.halloween .hw-bats { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hw-bats .bat { position: absolute; color: #0d0d0d; opacity: .88; animation: hwDrift 7s ease-in-out infinite alternate; }
.hw-bats .bat svg { width: 100%; height: 100%; display: block; }
.hw-bats .b1 { left: 55%; top: 44px;  width: 92px; height: 55px; }
.hw-bats .b2 { left: 66%; top: 92px;  width: 56px; height: 34px; animation-delay: -2s; }
.hw-bats .b3 { left: 74%; top: 54px;  width: 64px; height: 38px; animation-delay: -4s; }
.hw-bats .b4 { left: 60%; top: 124px; width: 36px; height: 22px; animation-delay: -1s; }
.hw-bats .b5 { left: 80%; top: 110px; width: 40px; height: 24px; animation-delay: -3s; }
.hw-bats .b6 { left: 86%; top: 40px;  width: 62px; height: 37px; animation-delay: -5s; }
.hw-bats .b7 { left: 96%; top: 142px; width: 38px; height: 23px; animation-delay: -2.5s; }
.hw-moon {
  position: absolute; left: 91.5%; top: 70px; width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3bf, #fde9a2 62%, #f7d774);
  box-shadow: 0 0 44px 18px rgba(253,230,138,.32); opacity: .92;
}
.hw-moon i { position: absolute; border-radius: 50%; background: #f1cd6a; opacity: .75; }
.hw-moon i:nth-child(1) { left: 14px; top: 16px; width: 14px; height: 14px; }
.hw-moon i:nth-child(2) { left: 46px; top: 44px; width: 18px; height: 18px; }
.hw-moon i:nth-child(3) { left: 40px; top: 12px; width: 8px;  height: 8px; }

/* ---------- G · Sombrero de bruja sobre el botón de WhatsApp ---------- */
.halloween .whatsapp-float::after {
  content: ""; position: absolute; left: -4px; top: -46px; width: 72px; height: 69px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-52%20-92%20104%20100%22%3E%20%3Cg%20transform%3D%22rotate(-18)%22%3E%20%3Cellipse%20cx%3D%222%22%20cy%3D%224%22%20rx%3D%2238%22%20ry%3D%228.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.25%22%2F%3E%20%3Cg%20fill%3D%22%23241a33%22%20stroke%3D%22%236b5a85%22%20stroke-width%3D%221%22%3E%20%3Cpath%20d%3D%22M-24%202C-16-22-2-42%2012-64%2014-54%2022-34%2026%202Z%22%2F%3E%3Cpath%20d%3D%22M12-64C16-70%2026-70%2030-62%2024-62%2018-60%2014-56Z%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D%22M-23-6L25-6%2026%202-24%202Z%22%20fill%3D%22%23f97316%22%2F%3E%20%3Crect%20x%3D%22-4%22%20y%3D%22-8%22%20width%3D%229%22%20height%3D%2212%22%20rx%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22%23fde68a%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cellipse%20cx%3D%220%22%20cy%3D%222%22%20rx%3D%2240%22%20ry%3D%229%22%20fill%3D%22%23241a33%22%20stroke%3D%22%236b5a85%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; pointer-events: none;
}

/* ---------- Promoción de Halloween ---------- */
.halloween .promo-hw { display: block; position: relative; }
.halloween .promo-normal { display: none; }
.promo-hw h2 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.promo-hw h2 svg { width: 34px; height: 34px; flex: none; }
.promo-hw p strong { color: #ffd29a; font-weight: 900; }
.promo-valid {
  display: inline-block; margin: 0 0 20px; padding: 5px 16px; border-radius: 999px;
  background: rgba(0,0,0,.38); border: 1px solid rgba(251,146,60,.65);
  color: #fdba74; font-size: 13.5px; font-weight: 700; letter-spacing: .4px;
}
.halloween .oferta { position: relative; overflow: hidden; }
.halloween .oferta::before, .halloween .oferta::after {
  content: ""; position: absolute; top: 0; width: 120px; height: 120px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M0%200H100M0%200L94%2030M0%200L76%2062M0%200L48%2088M0%200L22%2098M0%200V100%22%2F%3E%20%3Cpath%20d%3D%22M22%200Q19%2019%200%2022M44%200Q38%2038%200%2044M66%200Q57%2057%200%2066M88%200Q75%2075%200%2088%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; opacity: .8;
}
.halloween .oferta::before { left: 0; }
.halloween .oferta::after  { right: 0; transform: scaleX(-1); }
.halloween .oferta > * { position: relative; z-index: 1; }

/* ---------- Animaciones (suaves) ---------- */
@keyframes hwDrift { from { transform: translate(0, 0); } to { transform: translate(14px, -5px); } }
@keyframes hwSwing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .hw-bats .bat, .halloween .hw-spider { animation: none; }
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1499px) {
  .halloween header::before, .halloween header::after { width: 110px; height: 110px; }
}

/* ---------- Móvil / tablet ---------- */
@media (max-width: 992px) {
  /* En móvil el header no es sticky; se vuelve "relative" para anclar las decoraciones */
  .halloween header { position: relative; }
  .halloween header::before, .halloween header::after { width: 84px; height: 84px; }
  .halloween .hw-garland { background-size: 170px 34px; height: 34px; }
  .halloween .hw-spider { display: block; right: 14px; width: 40px; height: 78px; transform-origin: 20px 0; }
  .halloween .hw-strip { font-size: 12.5px; letter-spacing: .2px; padding: 7px 12px; gap: 8px; }
  .hw-strip svg { width: 16px; height: 16px; }
  /* El texto del banner ocupa todo el ancho: los murciélagos y la luna se quedan arriba */
  .hw-bats .b1 { left: 6%;  top: 42px; width: 52px; height: 31px; }
  .hw-bats .b2 { left: 26%; top: 66px; width: 32px; height: 19px; }
  .hw-bats .b3 { left: 42%; top: 46px; width: 40px; height: 24px; }
  .hw-bats .b4, .hw-bats .b5, .hw-bats .b7 { display: none; }
  .hw-bats .b6 { left: 60%; top: 64px; width: 34px; height: 20px; }
  .hw-moon { left: auto; right: 16px; top: 42px; width: 46px; height: 46px; box-shadow: 0 0 26px 10px rgba(253,230,138,.3); }
  .hw-moon i:nth-child(1) { left: 8px; top: 9px; width: 8px; height: 8px; }
  .hw-moon i:nth-child(2) { left: 26px; top: 25px; width: 10px; height: 10px; }
  .hw-moon i:nth-child(3) { left: 23px; top: 7px; width: 5px; height: 5px; }
  .halloween .oferta::before, .halloween .oferta::after { width: 80px; height: 80px; }
  .promo-hw h2 svg { width: 26px; height: 26px; }
}
@media (max-width: 400px) {
  .halloween .hw-strip { font-size: 11.5px; }
  .halloween .whatsapp-float::after { left: -2px; top: -40px; width: 62px; height: 60px; }
}