/* Decoración de temporada: Halloween.
   Solo adornos (aria-hidden, sin clics): no tapan botones ni cambian textos ni precios.
   La carga includes/seasonal.php solo en las fechas de la campaña. */

:root {
    --tnb-hw-navy: #000D2D;
    --tnb-hw-pumpkin: #E07A35;
    --tnb-hw-pumpkin-dark: #B55A1F;
    --tnb-hw-web: rgba(255, 255, 255, .55);
}

/* ---------- 1. Barra superior: un murciélago naranja entre mensaje y mensaje ---------- */
.tnb-marquee-item { position: relative; }
.tnb-marquee-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -11px;
    width: 22px;
    height: 9px;
    margin-top: -5px;
    background: var(--tnb-hw-pumpkin);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 100 40'%3E%3Cpath d='M50 21 47.8 14.5 46.4 20.6C43.6 20.6 41.6 22.8 40.4 26 33 17 21 9.5 3 5 8.6 12 10.4 18.2 9.6 26.2 14.4 24 18.6 25 21.4 29 25.4 26.4 29.6 27.4 31.8 32 35.8 30.2 39.6 32 41.6 36.4 44.6 35.6 47.6 37.6 50 41.5 52.4 37.6 55.4 35.6 58.4 36.4 60.4 32 64.2 30.2 68.2 32 70.4 27.4 74.6 26.4 78.6 29 81.4 25 85.6 24 90.4 26.2 89.6 18.2 91.4 12 97 5 79 9.5 67 17 59.6 26 58.4 22.8 56.4 20.6 53.6 20.6L52.2 14.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 100 40'%3E%3Cpath d='M50 21 47.8 14.5 46.4 20.6C43.6 20.6 41.6 22.8 40.4 26 33 17 21 9.5 3 5 8.6 12 10.4 18.2 9.6 26.2 14.4 24 18.6 25 21.4 29 25.4 26.4 29.6 27.4 31.8 32 35.8 30.2 39.6 32 41.6 36.4 44.6 35.6 47.6 37.6 50 41.5 52.4 37.6 55.4 35.6 58.4 36.4 60.4 32 64.2 30.2 68.2 32 70.4 27.4 74.6 26.4 78.6 29 81.4 25 85.6 24 90.4 26.2 89.6 18.2 91.4 12 97 5 79 9.5 67 17 59.6 26 58.4 22.8 56.4 20.6 53.6 20.6L52.2 14.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 2. Portada: telarañas en las esquinas y murciélagos ---------- */
.tnb-hw-hero {
    position: absolute;
    inset: 0;
    z-index: 5;            /* encima del vídeo, debajo de la cuenta atrás (6) y del menú */
    pointer-events: none;
    overflow: hidden;
}
.tnb-hw-web {
    position: absolute;
    top: 0;
    color: var(--tnb-hw-web);
    width: clamp(120px, 19vw, 300px);
    height: auto;
}
.tnb-hw-web--left  { left: 0; }
.tnb-hw-web--right { right: 0; transform: scaleX(-1); width: clamp(90px, 12vw, 190px); }
.tnb-hw-web path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.tnb-hw-bat {
    position: absolute;
    left: 0;
    top: var(--y);
    width: var(--w);
    color: var(--tnb-hw-navy);
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .35));   /* se distinguen también sobre lo oscuro */
    animation: tnb-hw-fly var(--dur) linear var(--delay) infinite;
    will-change: transform;
}
.tnb-hw-bat svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
    transform-origin: 50% 70%;
    animation: tnb-hw-flap .32s ease-in-out infinite alternate;
}
@keyframes tnb-hw-fly {
    0%   { transform: translate(-15vw, 0) rotate(-4deg); }
    25%  { transform: translate(22vw, -26px) rotate(3deg); }
    50%  { transform: translate(55vw, 10px) rotate(-3deg); }
    75%  { transform: translate(85vw, -18px) rotate(4deg); }
    100% { transform: translate(115vw, 6px) rotate(-2deg); }
}
@keyframes tnb-hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.45); }
}

/* Cabecera de la portada sobre el banner de Halloween (es claro y ya trae el logo dibujado):
   arriba del todo se oculta el logo grande blanco, y el menú, los iconos y el logo pequeño van
   en azul marino en vez de blanco. El banner baja lo que mide el menú (60 px) para que el menú
   quede sobre blanco y no pise el dibujo. Solo cuando está ese banner (data-hw-own-art). */
#drop-banner[data-hw-own-art] { padding-top: 60px; background: #fff; }
body:has(#drop-banner[data-hw-own-art]) #giant-logo:not(.header-scrolled) { opacity: 0; visibility: hidden; }
body:has(#drop-banner[data-hw-own-art]) #main-nav.header-transparent,
body:has(#drop-banner[data-hw-own-art]) #main-nav.header-transparent #header-nav-menu a,
body:has(#drop-banner[data-hw-own-art]) #main-nav.header-transparent #main-nav-icons a { color: var(--tnb-hw-navy); }
body:has(#drop-banner[data-hw-own-art]) #main-nav.header-transparent #open-menu-btn path { stroke: var(--tnb-hw-navy); }
body:has(#drop-banner[data-hw-own-art]) #page-header.header-scrolled:not(.header-solid) .logo-scrolled-white { display: none; }
body:has(#drop-banner[data-hw-own-art]) #page-header.header-scrolled:not(.header-solid) .logo-scrolled-black { display: block; }

/* ---------- 3. Una araña que baja con su hilo (portada: bajo el banner; resto: bajo la cabecera) ---------- */
.tnb-hw-drop { position: relative; height: 0; z-index: 3; pointer-events: none; }
.tnb-hw-spider {
    position: absolute;
    top: 0;
    left: 79%;
    width: 22px;
    height: 70px;
    transform-origin: 50% 0;
    animation: tnb-hw-swing 3.4s ease-in-out infinite alternate;
}
.tnb-hw-spider::before {          /* el hilo */
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 46px;
    background: var(--tnb-hw-navy);
    opacity: .5;
}
.tnb-hw-spider svg { position: absolute; top: 42px; left: 0; width: 22px; height: auto; color: var(--tnb-hw-navy); }
.tnb-hw-drop--page .tnb-hw-spider { left: auto; right: 2.4%; }
@media (max-width: 900px) { .tnb-hw-drop--page { display: none; } }
@keyframes tnb-hw-swing {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(6deg); }
}

/* ---------- 4. Pie: calabazas bajo el copyright, la grande con la corona blanca de la marca ---------- */
.tnb-hw-pumpkins {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    margin-top: 28px;
    pointer-events: none;
}
.tnb-hw-pumpkins span { display: block; }
.tnb-hw-pumpkins svg { display: block; width: 100%; height: auto; overflow: visible; }
.tnb-hw-pumpkin--s { width: 46px; }
.tnb-hw-pumpkin--l { width: 86px; }
.tnb-hw-pumpkin--m { width: 60px; }

@media (max-width: 768px) {
    .tnb-hw-web { color: rgba(255, 255, 255, .45); }
    .tnb-hw-web--left  { width: 96px; }
    .tnb-hw-web--right { width: 72px; }
    .tnb-hw-spider { left: 74%; }
    .tnb-hw-pumpkin--s { width: 36px; }
    .tnb-hw-pumpkin--l { width: 68px; }
    .tnb-hw-pumpkin--m { width: 48px; }
}

/* Si la persona ha pedido menos movimiento en su sistema: sin murciélagos y la araña quieta */
@media (prefers-reduced-motion: reduce) {
    .tnb-hw-bat { display: none; }
    .tnb-hw-spider { animation: none; }
}