/* SIPD · temporada Halloween (decoración no bloqueante) */
.hw-scene {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
}

.guest-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.guest-pills .guest-badge,
.guest-pills .hw-season { margin: 0; }
.hw-season {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 140, 0, .22);
    color: #ffd89a;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 700;
}

body:has(.hw-scene--full) .guest-hero {
    background:
        radial-gradient(520px 280px at 88% 8%, rgba(255, 168, 46, .22), transparent 58%),
        radial-gradient(1200px 480px at -10% -20%, rgba(255,255,255,.08), transparent 55%),
        linear-gradient(180deg, #1a2a16 0%, #006837 52%, #1b140c 100%);
}

body:has(.hw-scene--full) .guest-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 90px;
    background: linear-gradient(180deg, transparent, rgba(20, 10, 4, .35));
    pointer-events: none;
}

body:has(.hw-scene--full) .consulta-hero {
    background:
        radial-gradient(520px 280px at 88% 8%, rgba(255, 168, 46, .2), transparent 58%),
        linear-gradient(180deg, #1a2a16 0%, #006837 58%, #1b140c 100%);
}

body:has(.hw-scene--full) .btn-submit {
    box-shadow: 0 0 0 0 rgba(255, 140, 0, .35);
    animation: hw-btn-glow 2.8s ease-in-out infinite;
}

.hw-sky { position: absolute; inset: 0; }

.hw-moon {
    position: absolute;
    top: 28px;
    right: 7%;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 32%, #fff6c8 0%, #f5d36a 42%, #e6a423 100%);
    box-shadow: 0 0 28px 10px rgba(255, 186, 70, .35);
    animation: hw-moon-pulse 5s ease-in-out infinite;
}

.hw-moon::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 22px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(196, 140, 40, .28);
    box-shadow: 18px 22px 0 6px rgba(196, 140, 40, .18);
}

.hw-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffe9a8;
    box-shadow: 0 0 8px #ffe9a8;
    animation: hw-twinkle 2.4s ease-in-out infinite;
}
.hw-star-1 { top: 12%; left: 18%; animation-delay: .2s; }
.hw-star-2 { top: 22%; left: 36%; animation-delay: .8s; }
.hw-star-3 { top: 8%; left: 62%; animation-delay: 1.2s; }
.hw-star-4 { top: 30%; left: 78%; animation-delay: .4s; }
.hw-star-5 { top: 16%; left: 88%; animation-delay: 1.6s; }

.hw-bat {
    position: absolute;
    color: #1a120c;
    opacity: .82;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
    transform-origin: center;
    animation: hw-fly 16s linear infinite;
}
.hw-bat-1 { top: 10%; left: -12%; width: 46px; animation-duration: 18s; }
.hw-bat-2 { top: 22%; left: -18%; width: 34px; animation-duration: 14s; animation-delay: -4s; }
.hw-bat-3 { top: 16%; left: -22%; width: 40px; animation-duration: 20s; animation-delay: -9s; }
.hw-bat-4 { top: 28%; left: -10%; width: 28px; animation-duration: 12s; animation-delay: -2s; }

.hw-ghost {
    position: absolute;
    width: 46px;
    height: 58px;
    background: rgba(255,255,255,.88);
    border-radius: 23px 23px 10px 10px;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    animation: hw-float 6.5s ease-in-out infinite;
}
.hw-ghost::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 16px;
    background:
        radial-gradient(circle at 16% 0, rgba(255,255,255,.88) 7px, transparent 8px),
        radial-gradient(circle at 50% 0, rgba(255,255,255,.88) 7px, transparent 8px),
        radial-gradient(circle at 84% 0, rgba(255,255,255,.88) 7px, transparent 8px);
}
.hw-ghost-eye {
    position: absolute;
    top: 18px;
    width: 7px;
    height: 9px;
    border-radius: 50%;
    background: #2a1608;
}
.hw-ghost-eye:first-child { left: 12px; }
.hw-ghost-eye:nth-child(2) { right: 12px; }
.hw-ghost-mouth {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 10px;
    height: 7px;
    margin-left: -5px;
    border-radius: 0 0 8px 8px;
    background: #2a1608;
}
.hw-ghost-1 { left: 6%; bottom: 22%; animation-delay: -.8s; }
.hw-ghost-2 { left: 22%; bottom: 34%; transform: scale(.78); animation-duration: 7.5s; }

.hw-spider {
    position: absolute;
    top: 0;
    width: 18px;
    height: 160px;
}
.hw-spider-a { right: 18%; }
.hw-spider-b { right: 62%; animation: hw-web-sway 5.6s ease-in-out infinite; }
.hw-spider-c { left: 8%; animation: hw-web-sway 4.4s ease-in-out infinite reverse; }
.hw-web {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 72px;
    background: rgba(255,255,255,.45);
    transform: translateX(-50%);
}
.hw-spider-body {
    position: absolute;
    top: 68px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #1c120c;
    box-shadow: 0 -7px 0 -2px #1c120c;
    animation: hw-crawl 3.4s ease-in-out infinite;
}
.hw-spider-b .hw-spider-body { animation-duration: 4.2s; animation-delay: -1.2s; }
.hw-spider-c .hw-spider-body { animation-duration: 2.8s; animation-delay: -.6s; }
.hw-spider-b .hw-web { height: 92px; }
.hw-spider-c .hw-web { height: 58px; }
.hw-spider-b .hw-spider-body { top: 88px; }
.hw-spider-c .hw-spider-body { top: 54px; }

.hw-crawlers { position: absolute; inset: 0; }
.hw-crawler {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    color: #16100b;
    opacity: .92;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
    transform-origin: center;
    will-change: transform;
}
.hw-crawler-leg { transform-box: fill-box; }
.hw-crawler-leg.is-l { transform-origin: right center; animation: hw-walk-l .28s ease-in-out infinite; }
.hw-crawler-leg.is-r { transform-origin: left center; animation: hw-walk-r .28s ease-in-out infinite; }
.hw-crawler-1 { width: 46px; animation: hw-wander-1 22s linear infinite; }
.hw-crawler-2 { width: 34px; animation: hw-wander-2 18s linear infinite; }
.hw-crawler-3 { width: 40px; animation: hw-wander-3 26s linear infinite; }
.hw-crawler-4 { width: 30px; animation: hw-wander-4 16s linear infinite; }
.hw-crawler-5 { width: 38px; animation: hw-wander-5 20s linear infinite; }
.hw-crawler-6 { width: 28px; animation: hw-wander-6 14s linear infinite; }
.hw-crawler-7 { width: 44px; animation: hw-wander-7 24s linear infinite; }
.hw-leg {
    position: absolute;
    top: 4px;
    width: 10px;
    height: 1px;
    background: #1c120c;
}
.hw-leg:nth-child(1) { left: -9px; transform: rotate(-28deg); }
.hw-leg:nth-child(2) { left: -9px; top: 7px; transform: rotate(22deg); }
.hw-leg:nth-child(3) { right: -9px; left: auto; transform: rotate(28deg); }
.hw-leg:nth-child(4) { right: -9px; left: auto; top: 7px; transform: rotate(-22deg); }

.hw-leaf {
    position: absolute;
    top: -8%;
    width: 10px;
    height: 14px;
    border-radius: 0 70% 0 70%;
    background: #e56b12;
    opacity: .85;
    animation: hw-fall 11s linear infinite;
}
.hw-leaf-1 { left: 8%; animation-duration: 10s; background: #e56b12; }
.hw-leaf-2 { left: 18%; animation-duration: 13s; animation-delay: -2s; background: #c44d0a; }
.hw-leaf-3 { left: 32%; animation-duration: 9s; animation-delay: -5s; background: #f08a10; }
.hw-leaf-4 { left: 46%; animation-duration: 12s; animation-delay: -1s; background: #8a2d0b; }
.hw-leaf-5 { left: 58%; animation-duration: 14s; animation-delay: -7s; background: #e56b12; }
.hw-leaf-6 { left: 67%; animation-duration: 11s; animation-delay: -3s; background: #d45d0d; }
.hw-leaf-7 { left: 76%; animation-duration: 15s; animation-delay: -6s; background: #f1841f; }
.hw-leaf-8 { left: 84%; animation-duration: 10s; animation-delay: -4s; background: #9a3b12; }
.hw-leaf-9 { left: 91%; animation-duration: 13s; animation-delay: -8s; background: #e56b12; }
.hw-leaf-10 { left: 39%; animation-duration: 16s; animation-delay: -9s; background: #c44d0a; }

.hw-pumpkins {
    position: absolute;
    left: 18px;
    bottom: 10px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.hw-pumpkin {
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.28));
    transform-origin: bottom center;
    animation: hw-bob 3.2s ease-in-out infinite;
}
.hw-pumpkin-1 { width: 78px; }
.hw-pumpkin-2 { width: 56px; animation-delay: -.7s; }
.hw-pumpkin-3 { width: 46px; animation-delay: -1.4s; }

.hw-fog {
    position: absolute;
    left: -10%;
    bottom: -20px;
    width: 120%;
    height: 110px;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .28;
}
.hw-fog-1 {
    background: #f4efe4;
    animation: hw-fog-move 12s ease-in-out infinite;
}
.hw-fog-2 {
    height: 80px;
    bottom: -8px;
    opacity: .18;
    background: #fff;
    animation: hw-fog-move 16s ease-in-out infinite reverse;
}

/* App autenticada: solo cielo y marca, sin tapar el trabajo */
.hw-scene--app { z-index: 6; }
.hw-scene--app .hw-moon { top: 12px; right: 26%; width: 26px; height: 26px; opacity: .65; }
.hw-scene--app .hw-moon::after { display: none; }
.hw-scene--app .hw-ghost,
.hw-scene--app .hw-fog,
.hw-scene--app .hw-leaves,
.hw-scene--app .hw-pumpkins,
.hw-scene--app .hw-star-4,
.hw-scene--app .hw-star-5,
.hw-scene--app .hw-bat-3,
.hw-scene--app .hw-bat-4 { display: none; }
.hw-scene--app .hw-crawlers,
.hw-scene--app .hw-spider-b,
.hw-scene--app .hw-spider-c { display: none; }
.hw-scene--app .hw-spider-a { left: 28px; right: auto; }
.hw-scene--app .hw-bat { opacity: .45; }
body:has(.hw-scene--app) .sipd-brand strong::after {
    content: "🎃";
    margin-left: 6px;
    font-size: 13px;
}

@keyframes hw-fly {
    0% { transform: translate3d(0, 0, 0) scaleX(1); }
    25% { transform: translate3d(36vw, -18px, 0) scaleX(1); }
    50% { transform: translate3d(72vw, 10px, 0) scaleX(1); }
    75% { transform: translate3d(108vw, -12px, 0) scaleX(1); }
    100% { transform: translate3d(130vw, 0, 0) scaleX(1); }
}
@keyframes hw-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}
@keyframes hw-fall {
    0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
    10% { opacity: .85; }
    100% { transform: translate3d(40px, 110vh, 0) rotate(360deg); opacity: .15; }
}
@keyframes hw-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(3deg); }
}
@keyframes hw-crawl {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(18px); }
}
@keyframes hw-web-sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg); }
}
@keyframes hw-walk-l {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
}
@keyframes hw-walk-r {
    0%, 100% { transform: rotate(8deg); }
    50% { transform: rotate(-10deg); }
}
@keyframes hw-wander-1 {
    0% { transform: translate(-6vw, 8vh) rotate(18deg); }
    18% { transform: translate(28vw, 22vh) rotate(-8deg); }
    36% { transform: translate(72vw, 12vh) rotate(22deg); }
    54% { transform: translate(88vw, 48vh) rotate(92deg); }
    72% { transform: translate(42vw, 78vh) rotate(168deg); }
    86% { transform: translate(8vw, 58vh) rotate(250deg); }
    100% { transform: translate(-6vw, 8vh) rotate(378deg); }
}
@keyframes hw-wander-2 {
    0% { transform: translate(104vw, 18vh) rotate(-20deg); }
    20% { transform: translate(70vw, 36vh) rotate(12deg); }
    40% { transform: translate(38vw, 8vh) rotate(-30deg); }
    60% { transform: translate(12vw, 42vh) rotate(80deg); }
    80% { transform: translate(56vw, 88vh) rotate(160deg); }
    100% { transform: translate(104vw, 18vh) rotate(340deg); }
}
@keyframes hw-wander-3 {
    0% { transform: translate(8vw, 102vh) rotate(-80deg); }
    16% { transform: translate(24vw, 70vh) rotate(-10deg); }
    32% { transform: translate(62vw, 54vh) rotate(24deg); }
    50% { transform: translate(92vw, 28vh) rotate(-18deg); }
    68% { transform: translate(48vw, 14vh) rotate(70deg); }
    84% { transform: translate(16vw, 46vh) rotate(150deg); }
    100% { transform: translate(8vw, 102vh) rotate(280deg); }
}
@keyframes hw-wander-4 {
    0% { transform: translate(50vw, -8vh) rotate(90deg); }
    25% { transform: translate(18vw, 30vh) rotate(180deg); }
    50% { transform: translate(80vw, 62vh) rotate(90deg); }
    75% { transform: translate(32vw, 90vh) rotate(0deg); }
    100% { transform: translate(50vw, -8vh) rotate(90deg); }
}
@keyframes hw-wander-5 {
    0% { transform: translate(-8vw, 70vh) rotate(10deg); }
    20% { transform: translate(34vw, 52vh) rotate(-16deg); }
    40% { transform: translate(78vw, 76vh) rotate(28deg); }
    60% { transform: translate(94vw, 34vh) rotate(-40deg); }
    80% { transform: translate(46vw, 6vh) rotate(12deg); }
    100% { transform: translate(-8vw, 70vh) rotate(10deg); }
}
@keyframes hw-wander-6 {
    0% { transform: translate(96vw, 92vh) rotate(-140deg); }
    25% { transform: translate(64vw, 44vh) rotate(-40deg); }
    50% { transform: translate(22vw, 20vh) rotate(20deg); }
    75% { transform: translate(8vw, 80vh) rotate(110deg); }
    100% { transform: translate(96vw, 92vh) rotate(220deg); }
}
@keyframes hw-wander-7 {
    0% { transform: translate(60vw, 4vh) rotate(8deg); }
    14% { transform: translate(86vw, 24vh) rotate(40deg); }
    28% { transform: translate(70vw, 58vh) rotate(110deg); }
    42% { transform: translate(28vw, 64vh) rotate(180deg); }
    56% { transform: translate(10vw, 28vh) rotate(240deg); }
    70% { transform: translate(40vw, 10vh) rotate(300deg); }
    84% { transform: translate(74vw, 82vh) rotate(20deg); }
    100% { transform: translate(60vw, 4vh) rotate(368deg); }
}
@keyframes hw-twinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.3); }
}
@keyframes hw-moon-pulse {
    0%, 100% { box-shadow: 0 0 22px 8px rgba(255, 186, 70, .28); }
    50% { box-shadow: 0 0 36px 14px rgba(255, 186, 70, .48); }
}
@keyframes hw-fog-move {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4%); }
}
@keyframes hw-btn-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
    50% { box-shadow: 0 0 16px 2px rgba(255, 140, 0, .28); }
}

@media (max-width: 720px) {
    .hw-ghost-2,
    .hw-bat-3,
    .hw-bat-4,
    .hw-leaf-6,
    .hw-leaf-7,
    .hw-leaf-8,
    .hw-leaf-9,
    .hw-leaf-10,
    .hw-pumpkin-3,
    .hw-fog-2 { display: none; }
    .hw-moon { width: 46px; height: 46px; top: 16px; right: 14px; }
    .hw-pumpkins { left: 8px; bottom: 6px; }
    .hw-pumpkin-1 { width: 54px; }
    .hw-pumpkin-2 { width: 40px; }
    .hw-spider-a { right: 10%; }
    .hw-crawler-6,
    .hw-crawler-7 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-scene *,
    body:has(.hw-scene--full) .btn-submit {
        animation: none !important;
    }
}

@media print {
    .hw-scene,
    .hw-season { display: none !important; }
}
