/* ============================================================
   TEMA HALLOWEEN — Inversiones J&J
   Archivo compartido por todas las páginas del sitio.
   Para quitar el tema: elimina <link> y <script> de halloween.* en cada página.
   Para cambiar la paleta: edita las variables de "html:root" aquí abajo.
   ============================================================ */

html:root {
  --accent-rgb: 255, 122, 24;
  --accent2-rgb: 139, 61, 255;
  --bg-rgb: 12, 7, 20;
  --nav-rgb: 12, 7, 20;
  --accent: #ff7a18;
  --accent-hover: #ff9a2e;
  --bg: #0c0714;
  --primary: #1b1229;
  --glass-bg: rgba(24, 14, 38, 0.65);
  --glass-border: rgba(255, 160, 80, 0.12);
  --hw-purple: #8b3dff;
  --hw-green: #9dff3a;
}

/* Apagar tema -> vuelve a la paleta roja original */
html.hw-off:root {
  --accent-rgb: 224, 32, 32; --accent2-rgb: 180, 20, 20; --bg-rgb: 15, 15, 15; --nav-rgb: 10, 10, 10;
  --accent: #e02020; --accent-hover: #ff2d2d; --bg: #0f0f0f; --primary: #1e1e1e;
  --glass-bg: rgba(20, 20, 20, 0.65); --glass-border: rgba(255, 255, 255, 0.08);
}
html.hw-off .hw-deco, html.hw-off .hw-hero-badge-extra { display: none !important; }
html.hw-off #loading-screen .spinner { width: 50px; height: 50px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--accent); font-size: 0; animation: spin 1s linear infinite; filter: none; }
html.hw-off #loading-screen .spinner::after { content: none; }

/* Fondo atmosférico */
html:not(.hw-off) body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,61,255,0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255,122,24,0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
html:not(.hw-off) ::selection { background: #ff7a18; color: #120b1e; }
html:not(.hw-off) ::-webkit-scrollbar-track { background: rgba(139,61,255,0.06); }
html:not(.hw-off) ::-webkit-scrollbar-thumb { background: linear-gradient(#ff7a18, #8b3dff); border-radius: 10px; }

/* Pantalla de carga: calabaza */
html:not(.hw-off) #loading-screen .spinner {
  width: auto; height: auto; border: none; border-radius: 0; font-size: 4rem; line-height: 1;
  animation: hw-bob 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255,122,24,0.75));
}
html:not(.hw-off) #loading-screen .spinner::after { content: '🎃'; }
@keyframes hw-bob { 0%,100% { transform: translateY(0) rotate(-6deg) scale(1); } 50% { transform: translateY(-14px) rotate(6deg) scale(1.08); } }

/* Hero (inicio) */
html:not(.hw-off) .hero-line2 {
  text-shadow: 0 0 14px rgba(255,122,24,0.65), 0 0 40px rgba(255,122,24,0.35), 0 0 80px rgba(139,61,255,0.35);
  animation: hw-flicker 4.5s infinite;
}
@keyframes hw-flicker { 0%,18%,22%,25%,53%,57%,100% { opacity: 1; } 20%,24%,55% { opacity: 0.72; } }
html:not(.hw-off) .hero-tagline { color: #ffb066; }
html:not(.hw-off) .hero-img-right img { filter: saturate(0.85) contrast(1.05) hue-rotate(-8deg); }
html:not(.hw-off) .hero-img-right::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(139,61,255,0.18), transparent 40%, rgba(255,122,24,0.15));
  mix-blend-mode: soft-light;
}

/* Botones principales */
html:not(.hw-off) .hero-btn-primary,
html:not(.hw-off) .tracker-download-btn,
html:not(.hw-off) .footer-join-btn,
html:not(.hw-off) .reset-btn,
html:not(.hw-off) .login-btn,
html:not(.hw-off) .btn-submit {
  background: linear-gradient(135deg, #ff9a2e, #ff5e00);
  color: #1a0d00;
  box-shadow: 0 0 22px rgba(255,122,24,0.45);
}
html:not(.hw-off) .hero-btn-primary:hover,
html:not(.hw-off) .tracker-download-btn:hover,
html:not(.hw-off) .footer-join-btn:hover,
html:not(.hw-off) .reset-btn:hover,
html:not(.hw-off) .login-btn:hover,
html:not(.hw-off) .btn-submit:hover { box-shadow: 0 0 40px rgba(255,122,24,0.75), 0 0 70px rgba(139,61,255,0.35); }

/* Títulos de sección */
html:not(.hw-off) .section-title { text-shadow: 0 0 22px rgba(255,122,24,0.25); position: relative; }
html:not(.hw-off) .section-title::after {
  content: '🦇'; font-size: 0.55em; margin-left: 0.6rem; display: inline-block;
  animation: hw-flap 2.4s ease-in-out infinite; vertical-align: middle;
}
@keyframes hw-flap { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-6px) rotate(8deg); } }

/* Tarjetas con brillo embrujado */
html:not(.hw-off) .event-card:hover,
html:not(.hw-off) .driver-card:hover,
html:not(.hw-off) .req-box:hover,
html:not(.hw-off) .alliance-static-card:hover,
html:not(.hw-off) .job-item:hover,
html:not(.hw-off) .dash-stat-card:hover,
html:not(.hw-off) .welcome-card:hover {
  border-color: rgba(255,122,24,0.55) !important;
  box-shadow: 0 0 0 1px rgba(255,122,24,0.25), 0 10px 34px rgba(139,61,255,0.28), 0 0 28px rgba(255,122,24,0.18) !important;
}
html:not(.hw-off) .toast { border-left-color: #ff7a18; box-shadow: 0 4px 22px rgba(139,61,255,0.35); }
html:not(.hw-off) .toast.error { border-left-color: #ef4444; }
html:not(.hw-off) .toast.success { border-left-color: #22c55e; }
html:not(.hw-off) .nav-links a::after { background: linear-gradient(90deg, #ff7a18, #8b3dff); }

/* ===== Capas decorativas ===== */
.hw-deco { pointer-events: none; }
.hw-fog { position: fixed; left: -10%; right: -10%; bottom: 0; height: 38vh; z-index: 1; opacity: 0.55;
  background:
    radial-gradient(ellipse 40% 60% at 20% 100%, rgba(190,160,255,0.16), transparent 70%),
    radial-gradient(ellipse 45% 55% at 60% 100%, rgba(255,160,90,0.12), transparent 70%),
    radial-gradient(ellipse 35% 50% at 95% 100%, rgba(190,160,255,0.14), transparent 70%);
  filter: blur(14px); animation: hw-fog 38s linear infinite alternate; }
.hw-fog.f2 { height: 28vh; opacity: 0.4; animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes hw-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

.hw-moon { position: absolute; top: 96px; right: 7%; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #ffd98a 55%, #e9a94a 100%);
  box-shadow: 0 0 50px 16px rgba(255,200,120,0.35), 0 0 140px 50px rgba(255,150,60,0.18);
  opacity: 0.92; animation: hw-moonpulse 7s ease-in-out infinite; }
.hw-moon.fixed { position: fixed; z-index: -1; top: 84px; right: 5%; width: clamp(56px, 6vw, 88px); opacity: 0.5; }
.hw-moon::before, .hw-moon::after { content: ''; position: absolute; border-radius: 50%; background: rgba(160,110,40,0.22); }
.hw-moon::before { width: 22%; height: 22%; top: 24%; left: 52%; }
.hw-moon::after { width: 14%; height: 14%; top: 58%; left: 28%; }
@keyframes hw-moonpulse { 0%,100% { box-shadow: 0 0 50px 16px rgba(255,200,120,0.30), 0 0 140px 50px rgba(255,150,60,0.15); } 50% { box-shadow: 0 0 64px 22px rgba(255,200,120,0.45), 0 0 170px 64px rgba(255,150,60,0.24); } }

.hw-layer { position: fixed; inset: 0; z-index: 5; overflow: hidden; }
.hw-bat { position: absolute; left: 0; top: 20vh; width: 46px; height: 26px; will-change: transform; }
.hw-bat svg { width: 100%; height: 100%; fill: #07040d; filter: drop-shadow(0 0 6px rgba(139,61,255,0.7)); }
.hw-bat .wing { transform-origin: 50% 55%; animation: hw-wing 0.28s ease-in-out infinite alternate; }
@keyframes hw-wing { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }

.hw-ghost { position: absolute; width: 54px; opacity: 0.16; animation: hw-ghostfloat 14s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(200,180,255,0.6)); }
.hw-ghost svg { width: 100%; fill: #efe9ff; }
@keyframes hw-ghostfloat { 0%,100% { transform: translate(0,0) rotate(-4deg); } 50% { transform: translate(40px,-44px) rotate(5deg); } }

.hw-ember { position: fixed; width: 5px; height: 5px; border-radius: 50%; background: #ffae4d; box-shadow: 0 0 8px 2px rgba(255,140,40,0.8); pointer-events: none; z-index: 9998; animation: hw-ember 0.9s ease-out forwards; }
@keyframes hw-ember { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

.hw-lightning { position: fixed; inset: 0; z-index: 4; background: radial-gradient(ellipse at 70% 0%, rgba(210,190,255,0.5), rgba(139,61,255,0.12) 55%, transparent 80%); opacity: 0; }
.hw-lightning.zap { animation: hw-zap 0.9s ease-out; }
@keyframes hw-zap { 0% { opacity: 0; } 8% { opacity: 0.55; } 14% { opacity: 0.05; } 22% { opacity: 0.4; } 100% { opacity: 0; } }

/* Araña colgante */
.hw-spider { position: fixed; top: 0; left: 64%; width: 40px; z-index: 1001; pointer-events: auto !important; cursor: pointer;
  transform: translateY(var(--len, 70px)); transition: transform 0.9s ease; }
.hw-spider .sway { transform-origin: top center; animation: hw-sway 3.6s ease-in-out infinite; }
.hw-spider .thread { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 120px; transform: translateX(-50%); background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.55)); }
.hw-spider svg { position: relative; display: block; width: 34px; margin: 0 auto; fill: #07040d; filter: drop-shadow(0 0 4px rgba(255,122,24,0.6)); }
.hw-spider.up { transform: translateY(-90px) !important; }
@keyframes hw-sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Calabazas + telarañas del footer */
.footer-glass { position: relative; }
.hw-pumpkins { position: absolute; left: 3rem; right: 3rem; top: -36px; height: 60px; display: flex; justify-content: space-around; align-items: flex-end; z-index: 2; }
.hw-pumpkin { width: 56px; }
.hw-pumpkin:nth-child(2) { width: 42px; } .hw-pumpkin:nth-child(3) { width: 64px; } .hw-pumpkin:nth-child(4) { width: 46px; }
.hw-pumpkin svg { width: 100%; display: block; filter: drop-shadow(0 0 12px rgba(255,122,24,0.55)); }
.hw-pumpkin .face { fill: #ffe27a; animation: hw-candle 2.2s infinite; }
.hw-pumpkin:nth-child(2) .face { animation-delay: -0.7s; } .hw-pumpkin:nth-child(3) .face { animation-delay: -1.3s; } .hw-pumpkin:nth-child(4) .face { animation-delay: -1.8s; }
@keyframes hw-candle { 0%,100% { opacity: 1; } 30% { opacity: 0.65; } 55% { opacity: 0.95; } 75% { opacity: 0.55; } }
.hw-web { position: absolute; width: 130px; opacity: 0.4; z-index: 1; }
.hw-web svg { width: 100%; fill: none; stroke: #d9ccff; stroke-width: 0.8; }
.hw-web.tl { top: 0; left: 0; } .hw-web.tr { top: 0; right: 0; transform: scaleX(-1); }

/* Calabazas asomándose (páginas sin footer decorado) */
.hw-patch { position: fixed; right: 1rem; bottom: -16px; display: flex; align-items: flex-end; gap: 6px; z-index: 2; }
.hw-patch .hw-pumpkin { width: 46px; }
.hw-patch .hw-pumpkin:nth-child(2) { width: 62px; } .hw-patch .hw-pumpkin:nth-child(3) { width: 38px; }

.hw-hero-badge-extra .hero-badge { border-color: rgba(255,122,24,0.5); }

/* Botón para apagar/encender el tema */
.hw-toggle { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 100000; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,122,24,0.5);
  background: rgba(20,12,32,0.85); backdrop-filter: blur(8px); font-size: 1.4rem; cursor: pointer; box-shadow: 0 0 18px rgba(255,122,24,0.35); transition: transform .2s, box-shadow .2s; line-height: 1; padding: 0; }
.hw-toggle:hover { transform: scale(1.1) rotate(-8deg); box-shadow: 0 0 28px rgba(255,122,24,0.7); }
html.hw-off .hw-toggle { filter: grayscale(1); box-shadow: none; border-color: rgba(255,255,255,0.2); }

@media (max-width: 768px) {
  .hw-moon { top: 78px; right: 5%; opacity: 0.55; }
  .hw-moon.fixed { opacity: 0.35; }
  .hw-web { width: 90px; }
  .hw-pumpkins { left: 1rem; right: 1rem; }
  .hw-pumpkin { width: 40px !important; }
  .hw-spider, .hw-ghost, .hw-patch { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-fog, .hw-bat, .hw-ghost, .hw-moon, .hw-spider .sway, .hw-pumpkin .face, .hero-line2, .section-title::after { animation: none !important; }
}