/* =========================================================
   R&B Consultoría Integral — Tema de temporada: Halloween 🎃
   "Noche de brujas": fondo morado-negro, resplandor de calabaza,
   luna, niebla y murciélagos. Aplica con la clase .halloween
   (la agrega halloween.js del 1 al 31 de octubre).
   Forzar: ?halloween=1 · Quitar: ?halloween=0
   ========================================================= */

/* --- Paleta nocturna: se fuerza en todos los modos para dar atmósfera.
   Se usan selectores con la misma/mayor especificidad que las reglas de
   tema del sitio (:root:not([data-theme="light"]) etc.) para ganarles. --- */
html.halloween,
html.halloween:not([data-theme="light"]),
html.halloween[data-theme="light"],
html.halloween[data-theme="dark"] {
    --hw-pumpkin: #FF7A1A;
    --hw-ember: #FFB347;
    --hw-purple: #7C3AED;

    /* Fondos: noche morada/negra */
    --white: #140A20;        /* fondo de página y tarjetas claras */
    --offwhite: #1C1030;     /* superficies */
    --navy: #1B1030;         /* secciones oscuras */
    --navy-dark: #0F0918;    /* más oscuro (footer, cards de pilares) */
    --petrol: #3A2360;       /* antes teal → morado */

    /* Texto claro para que lea sobre el fondo oscuro */
    --ink: #E9DEF6;
    --heading: #FDF3E7;
    --muted: #B3A4C9;
    --on-dark: #FFFFFF;

    /* Acentos → calabaza */
    --gold: #FF8A33;
    --gold-light: #FFB366;

    /* Bordes y glows */
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 180, 120, 0.28);
    --header-bg: rgba(16, 9, 26, 0.82);
    --ring: rgba(255, 122, 26, 0.22);
    --blob-op-a: .34; --blob-op-b: .30; --blob-op-c: .30;
}

/* Resplandor cálido de calabaza + bruma morada sobre el fondo */
html.halloween body {
    background-color: var(--white);
    background-image:
        radial-gradient(900px 500px at 85% -8%, rgba(255, 122, 26, 0.16), transparent 60%),
        radial-gradient(1000px 600px at 10% 0%, rgba(124, 58, 237, 0.18), transparent 60%),
        radial-gradient(1200px 700px at 50% 120%, rgba(124, 58, 237, 0.12), transparent 60%);
    background-attachment: fixed;
}

/* Blobs del hero: morado + calabaza, más intensos */
html.halloween .blob-a { background: var(--hw-purple); }
html.halloween .blob-b { background: var(--hw-pumpkin); }
html.halloween .blob-c { background: #4C1D95; }

/* Palabra destacada del titular → calabaza brillante */
html.halloween .hero h1 .accent {
    color: var(--hw-pumpkin);
    text-shadow: 0 0 22px rgba(255, 122, 26, 0.45);
}

/* Botón de acento con brillo de brasa */
html.halloween .btn-gold { box-shadow: 0 8px 26px rgba(255, 122, 26, 0.4); }
html.halloween .btn-primary { box-shadow: 0 8px 26px rgba(124, 58, 237, 0.35); }

/* Luna llena arriba a la derecha */
.hw-moon {
    position: fixed;
    top: 90px;
    right: 7%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle at 38% 38%, #FFF6E6, #FAE3B0 55%, #E9C27A 100%);
    box-shadow: 0 0 60px 18px rgba(255, 210, 140, 0.35), inset -14px -12px 0 rgba(180, 140, 70, 0.18);
    opacity: 0.9;
}
.hw-moon::before, .hw-moon::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(200, 160, 90, 0.18);
}
.hw-moon::before { width: 26px; height: 26px; top: 22px; left: 30px; }
.hw-moon::after  { width: 18px; height: 18px; bottom: 24px; right: 26px; }

/* Calabaza junto al nombre de marca en el header */
.hw-pumpkin {
    display: inline-block;
    margin-left: 0.3em;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: middle;
    filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.6));
    animation: hw-bob 3.2s ease-in-out infinite;
}

/* Niebla inferior más densa */
.hw-fog {
    position: fixed;
    inset: auto 0 0 0;
    height: 46vh;
    pointer-events: none;
    z-index: 3;
    opacity: 0.6;
    background:
        radial-gradient(ellipse 60% 45% at 20% 100%, rgba(124, 58, 237, 0.28), transparent 70%),
        radial-gradient(ellipse 55% 40% at 78% 100%, rgba(255, 122, 26, 0.18), transparent 70%),
        radial-gradient(ellipse 85% 35% at 50% 100%, rgba(230, 220, 255, 0.08), transparent 70%);
    background-size: 200% 100%;
    animation: hw-fog 28s linear infinite alternate;
}

/* Murciélagos */
.hw-bats { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.hw-bat {
    position: absolute;
    left: -60px;
    width: 42px;
    height: 21px;
    color: #0a0612;
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(255, 122, 26, 0.5));
    animation: hw-fly linear infinite;
}
.hw-bat svg { width: 100%; height: 100%; animation: hw-flap 0.28s ease-in-out infinite alternate; transform-origin: center; }

/* Telaraña en la esquina superior izquierda (la derecha la ocupa la luna) */
.hw-web {
    position: fixed;
    top: 64px;
    left: 0;
    width: 130px;
    height: 130px;
    pointer-events: none;
    z-index: 4;
    opacity: 0.2;
    color: #E9DEF6;
    transform: scaleX(-1);
}

@keyframes hw-fly {
    0%   { transform: translate(0, 0) scale(var(--s, 1)); }
    25%  { transform: translate(28vw, -6vh) scale(var(--s, 1)); }
    50%  { transform: translate(55vw, 5vh) scale(var(--s, 1)); }
    75%  { transform: translate(82vw, -8vh) scale(var(--s, 1)); }
    100% { transform: translate(calc(100vw + 120px), 2vh) scale(var(--s, 1)); }
}
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.55) translateY(8%); } }
@keyframes hw-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-3px) rotate(5deg); } }
@keyframes hw-fog { from { background-position: 0% 0; } to { background-position: 100% 0; } }

@media (max-width: 768px) {
    .hw-moon { width: 72px; height: 72px; top: 76px; }
    .hw-web { width: 86px; height: 86px; top: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-bats { display: none; }
    .hw-fog, .hw-pumpkin { animation: none; }
}