:root {
    --halloween-h: 34px;
    --halloween-web-w: clamp(90px, 10vw, 170px);
}

.halloween-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--halloween-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 16px;
    background: var(--sky-900);
    color: rgba(255,255,255,.88);
    font-family: var(--fd);
    /* Fuente fluida: crece con la pantalla (hasta 3200px+) sin desbordar */
    font-size: min(0.8rem, calc((100vw - 48px) / 54));
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.halloween-bar__accent {
    color: #ff8a1f;
    font-weight: 800;
}

.halloween-bar__link {
    color: #ff8a1f;
    font-weight: 700;
    border-bottom: 1px solid currentColor;
    transition: color .15s ease;
}

.halloween-bar__link:hover { color: #fff; }

.navbar:has(> .halloween-bar) { margin-bottom: var(--halloween-h); }

body.home:has(.halloween-bar) .hero {
    padding-top: calc(var(--topbar-h) + var(--navbar-h) + var(--halloween-h));
}

.halloween-web {
    position: fixed;
    top: 0;
    width: var(--halloween-web-w);
    height: auto;
    z-index: 1002;
    pointer-events: none;
    user-select: none;
    opacity: .9;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.8)) drop-shadow(0 0 3px rgba(0,0,0,.35));
}

.halloween-web--left  { left: 0;  transform: translate(-4%, -3%); }
.halloween-web--right { right: 0; transform: translate(4%, -3%); }

@media (max-width: 600px) {
    :root { --halloween-h: 30px; }
    .halloween-bar { font-size: min(.64rem, calc((100vw - 24px) / 40)); gap: 8px; padding: 0 10px; }
    .halloween-bar__link { display: none; }
}

.halloween-web--bottom-left {
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 998;
    transform: translate(-4%, 3%) scaleY(-1);
}

.halloween-web--bottom-right {
    top: auto;
    bottom: 0;
    right: 0;
    z-index: 998;
    transform: translate(4%, 3%) scaleY(-1);
}

/* ════════════════════════════════════════════════════════════
   ARAÑA colgando junto a la telaraña superior derecha
   ────────────────────────────────────────────────────────────
   Ajusta SOLO estas variables:
   --spider-gap     separación entre la araña y la telaraña
                    (la araña siempre queda a la izquierda de la telaraña).
   --spider-top     punto desde donde cuelga (0 = borde superior).
   --spider-w       tamaño de la araña (48px en 320px, hasta 130px).
   --spider-sway    ángulo del balanceo (0deg = quieta).
   --spider-speed   duración de un vaivén completo.
   ════════════════════════════════════════════════════════════ */
.halloween-spider {
    --spider-gap:   clamp(8px, 1.5vw, 24px);
    --spider-right: calc(var(--halloween-web-w) + var(--spider-gap));
    --spider-top:   0px;
    --spider-w:     clamp(48px, 7vw, 130px);
    --spider-sway:  4deg;
    --spider-speed: 4.5s;

    position: fixed;
    top: var(--spider-top);
    right: var(--spider-right);
    z-index: 1003;                      /* por encima de la telaraña (1002) */
    width: var(--spider-w);
    pointer-events: none;
    user-select: none;
    transform-origin: 50% 0;            /* gira desde donde cuelga */
    animation: halloween-spider-sway var(--spider-speed) ease-in-out infinite;
}

.halloween-spider img {
    display: block;
    width: 100%;
    height: auto;
    /* Halo claro para que la silueta negra no se pierda sobre el fondo oscuro.
       Quítalo o baja el .85 si lo quieres más discreto. */
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,.85)) drop-shadow(0 0 3px rgba(255,255,255,.25));
}

@keyframes halloween-spider-sway {
    0%, 100% { transform: rotate(calc(var(--spider-sway) * -1)); }
    50%      { transform: rotate(var(--spider-sway)); }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-spider { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   CALABAZAS (opcional): para quitarlas, borra este bloque y la
   etiqueta <img class="halloween-pumpkins"> del PHP.
   --pumpkins-left / --pumpkins-bottom   posición
   --pumpkins-w                          tamaño
   ════════════════════════════════════════════════════════════ */
.halloween-pumpkins {
    --pumpkins-gap:    clamp(8px, 1.5vw, 24px);   /* separación respecto a la telaraña */
    --pumpkins-left:   calc(var(--halloween-web-w) + var(--pumpkins-gap));
    --pumpkins-bottom: -12px;
    --pumpkins-w:      clamp(200px, 20vw, 440px);

    position: fixed;
    left: var(--pumpkins-left);
    bottom: var(--pumpkins-bottom);
    z-index: 999;                       /* delante de la telaraña inferior (998) */
    width: var(--pumpkins-w);
    height: auto;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 600px) {
    .halloween-pumpkins { --pumpkins-w: clamp(130px, 46vw, 220px); }
}