/* 🎃 HALLOWEEN 2026 — tema completo AUTOSUFICIENTE (31 oct).
   Cargar esta hoja DESPUÉS de assets/gc.css original del servidor:
     <link rel="stylesheet" href="halloween/halloween.css">
   Solo cambia colores y decoración (variables CSS + pseudos fijos con
   pointer-events:none). NO toca layout, enlaces, formularios ni JS.
   Borrar este fichero = volver al aspecto original. */
/* INICIO HALLOWEEN */

/* ── Paleta dark: noche de calabazas (morado profundo + naranja) ── */
:root {
  --bg: #12071F;
  --bg-soft: #190C2C;
  --surface: #231136;
  --surface-2: #2C1645;
  --surface-3: #371E57;
  --border: rgba(255, 145, 60, .18);
  --border-strong: rgba(255, 145, 60, .36);

  --text: #FFF4E6;
  --text-soft: #ECD9CC;
  --text-mute: #B49BBE;

  --primary: #FF8C2A;
  --primary-hover: #FFB347;
  --primary-deep: #E06D00;
  --on-primary: #2B1000;

  --accent: #7CE36F;
  --accent-hover: #9FF094;
  --on-accent: #06290A;

  --warn: #FFB347;
  --danger: #FF7A6B;

  --shadow-1: 0 1px 2px rgba(26, 6, 40, .55);
  --shadow-2: 0 8px 28px rgba(26, 6, 40, .5);
  --shadow-3: 0 24px 60px rgba(26, 6, 40, .6);
}

body {
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(255, 122, 26, .16), transparent 62%),
    radial-gradient(760px 420px at 4% 4%, rgba(155, 80, 229, .18), transparent 60%);
}

/* ── Modo claro: crema y calabaza (sigue siendo Halloween) ── */
body.light-mode {
  --bg: #FFF7EC;
  --bg-soft: #FFEFDC;
  --surface: #FFFAF3;
  --surface-2: #FFEFD6;
  --surface-3: #FFE6C2;
  --border: rgba(180, 90, 10, .22);
  --border-strong: rgba(180, 90, 10, .4);
  --text: #33160A;
  --text-soft: #6B3A22;
  --text-mute: #97705A;
  --primary: #C25E00;
  --primary-hover: #E06D00;
  --primary-deep: #964900;
  --on-primary: #FFF6EA;
  --accent: #2F9E44;
  --accent-hover: #37B24D;
  --on-accent: #FFFFFF;
  --warn: #B45309;
  --danger: #DC2626;
  --shadow-1: 0 1px 2px rgba(120, 60, 10, .25);
  --shadow-2: 0 8px 24px rgba(120, 60, 10, .2);
  --shadow-3: 0 24px 56px rgba(120, 60, 10, .28);
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(255, 140, 42, .18), transparent 62%),
    radial-gradient(760px 420px at 4% 4%, rgba(155, 80, 229, .12), transparent 60%);
}

/* ── Murciélagos volando (solo pseudos fijos, nunca interceptan clics) ── */
body::before,
body::after {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  top: 9vh;
  font-size: 26px;
  will-change: transform;
  text-shadow: 0 0 16px rgba(0, 0, 0, .45);
}
body::before {
  content: "\1F987";
  animation: gc-hw-bat1 19s linear infinite;
}
body::after {
  content: "\1F987";
  font-size: 19px;
  top: 24vh;
  opacity: .85;
  animation: gc-hw-bat2 26s linear infinite;
}
@keyframes gc-hw-bat1 {
  0%   { transform: translateX(-6vw) translateY(0); }
  20%  { transform: translateX(20vw) translateY(5vh); }
  40%  { transform: translateX(42vw) translateY(-3vh); }
  60%  { transform: translateX(64vw) translateY(4vh); }
  80%  { transform: translateX(86vw) translateY(-2vh); }
  100% { transform: translateX(110vw) translateY(1vh); }
}
@keyframes gc-hw-bat2 {
  0%   { transform: translateX(108vw) translateY(0); }
  25%  { transform: translateX(78vw) translateY(-5vh); }
  50%  { transform: translateX(50vw) translateY(3vh); }
  75%  { transform: translateX(22vw) translateY(-4vh); }
  100% { transform: translateX(-8vw) translateY(2vh); }
}

/* ── Araña bajando de la esquina superior derecha ── */
html::after {
  content: "\1F577\FE0F";
  position: fixed;
  top: 0;
  right: 30px;
  z-index: 9999;
  pointer-events: none;
  font-size: 22px;
  animation: gc-hw-spider 10s ease-in-out infinite;
}
@keyframes gc-hw-spider {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(48px); }
}

/* ── Títulos con calabaza/fantasma y brillo que respira ── */
h1::before { content: "\1F383\00A0"; }
h2::before { content: "\1F47B\00A0"; }
h1 {
  text-shadow: 0 0 18px rgba(255, 140, 42, .22);
  animation: gc-hw-glow 5.5s ease-in-out infinite;
}
@keyframes gc-hw-glow {
  0%, 100% { text-shadow: 0 0 18px rgba(255, 140, 42, .22); }
  50%      { text-shadow: 0 0 32px rgba(155, 80, 229, .5); }
}

/* ── CTAs principales con pulso naranja (box-shadow: sin efecto de layout) ── */
@keyframes gc-hw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 42, .3); }
  50%      { box-shadow: 0 0 18px 3px rgba(255, 140, 42, .28); }
}
.btn-primary,
.btn-success,
.header-cta,
.wc-connect-btn {
  animation: gc-hw-pulse 3.4s ease-in-out infinite;
}

/* ── Scrollbar y selección a juego ── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #190C2C; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF8C2A, #9B5DE5);
  border-radius: 8px;
  border: 2px solid #190C2C;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFB347, #B07AF0); }
::selection { background: #9B5DE5; color: #FFF4E6; }

/* ── Enlaces con tenue aura al pasar el ratón ── */
a:hover { text-shadow: 0 0 12px rgba(255, 140, 42, .5); }

/* ── Respeto a quienes prefieren menos movimiento ── */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  html::after,
  h1,
  .btn-primary,
  .btn-success,
  .header-cta,
  .wc-connect-btn {
    animation: none !important;
  }
}
/* FIN HALLOWEEN */