/* Lobo WST: cores, estados e animações do mascote. Estados em [data-estado], acessórios em [data-props]. */
.lobo-box{position:relative;width:150px;height:150px;flex:none}
.lobo{width:100%;height:100%;display:block;overflow:visible;cursor:pointer}
.lobo *{transform-box:fill-box}
.lobo .lb-pelo{fill:#8E949C;stroke:#1B1B18;stroke-width:2;stroke-linejoin:round}
.lobo .lb-claro{fill:#EEE8D8}
.lobo .lb-escuro{fill:#5E636B}
.lobo .lb-orelha-in{fill:#3A3A36}
.lobo .lb-colar{fill:#F7F3E3;stroke:#1B1B18;stroke-width:1.6;stroke-linejoin:round}
.lobo .lb-gravata{fill:#FFD400;stroke:#1B1B18;stroke-width:1.6;stroke-linejoin:round}
.lobo .lb-branco{fill:#fff;stroke:#1B1B18;stroke-width:1.4}
.lobo .lb-pupila{fill:#111}
.lobo .lb-brilho{fill:#fff}
.lobo .lb-focinho{fill:#F7F3E3;stroke:#1B1B18;stroke-width:1.4}
.lobo .lb-nariz{fill:#111}
.lobo .lb-boca,.lobo .lb-fechados{fill:none;stroke:#111;stroke-width:2.2;stroke-linecap:round}
.lobo .lb-boca-aberta{fill:#2A1010;stroke:none}
.lobo .lb-lingua{fill:#FF7A93}
.lobo .lb-sobrancelha{stroke:#1B1B18;stroke-width:2.6;stroke-linecap:round;opacity:.75}
.lobo .lb-sombra{fill:rgba(0,0,0,.35);transform-origin:center}
.lobo .lb-gota{fill:#7CC4FF;stroke:#2E6FA8;stroke-width:1}
.lobo .lb-ondas path{fill:none;stroke:#FFD400;stroke-width:3;stroke-linecap:round}
.lobo .lb-zzz text{font:400 15px "Anton",Impact,sans-serif;fill:#FFF3B0}
.lobo .lb-envelope rect{fill:#FFFDF2;stroke:#1B1B18;stroke-width:1.8}
.lobo .lb-envelope path{fill:none;stroke:#1B1B18;stroke-width:1.8;stroke-linejoin:round}
.lobo .lb-caneca rect{fill:#FFD400;stroke:#1B1B18;stroke-width:1.8}
.lobo .lb-caneca path{stroke:#1B1B18;stroke-width:1.8}
.lobo .lb-caneca .lb-vapor{fill:none;stroke:#A9A38D;stroke-width:1.6;stroke-linecap:round;animation:lb-vapor 2.4s ease-in-out infinite}
.lobo .lb-oculos rect{fill:#111;stroke:#FFD400;stroke-width:1.4}
.lobo .lb-oculos path{stroke:#111;stroke-width:2.4}
.lobo .lb-touca>path:first-child{fill:#2B3A8C;stroke:#1B1B18;stroke-width:1.8}
.lobo .lb-touca-faixa,.lobo .lb-pompom{fill:#F7F3E3;stroke:#1B1B18;stroke-width:1.4}

/* visibilidade padrão */
.lobo .lb-caneca,.lobo .lb-oculos,.lobo .lb-touca,.lobo .lb-envelope,.lobo .lb-gota,.lobo .lb-ondas,.lobo .lb-zzz,
.lobo .lb-fechados,.lobo .lb-boca-aberta,.lobo .lb-boca-tensa{display:none}
.lobo[data-props~="caneca"] .lb-caneca,.lobo[data-props~="oculos"] .lb-oculos,.lobo[data-props~="touca"] .lb-touca,
.lobo[data-props~="envelope"] .lb-envelope{display:inline}

/* pivôs */
.lobo .lb-pulo{transform-origin:50% 100%}
.lobo .lb-cauda{transform-origin:5% 84%}
.lobo .lb-cabeca{transform-origin:50% 96%}
.lobo .lb-braco-e{transform-origin:90% 5%}
.lobo .lb-braco-d{transform-origin:8% 5%}
.lobo .lb-orelha-e{transform-origin:60% 100%}
.lobo .lb-orelha-d{transform-origin:40% 100%}
.lobo .lb-olho{transform-origin:center}
.lobo .lb-sob-e{transform-origin:100% 50%}
.lobo .lb-sob-d{transform-origin:0% 50%}

/* parado: respira, pisca, abana o rabo, mexe a orelha */
.lobo .lb-cauda{animation:lb-cauda 1.1s ease-in-out infinite}
.lobo .lb-cabeca{animation:lb-respira 3.2s ease-in-out infinite}
.lobo .lb-olho{animation:lb-pisca 4.6s infinite}
.lobo .lb-orelha-e{animation:lb-orelha 5.3s ease-in-out infinite}
@keyframes lb-cauda{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(12deg)}}
@keyframes lb-respira{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
@keyframes lb-pisca{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes lb-orelha{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-12deg)}93%{transform:rotate(5deg)}}
@keyframes lb-vapor{0%,100%{opacity:.2;transform:translateY(2px)}50%{opacity:.9;transform:translateY(-2px)}}

/* comemora: pula, braços para cima, boca aberta */
.lobo[data-estado="comemora"] .lb-pulo{animation:lb-pula .42s cubic-bezier(.3,.7,.4,1) infinite alternate}
.lobo[data-estado="comemora"] .lb-sombra{animation:lb-sombra .42s cubic-bezier(.3,.7,.4,1) infinite alternate}
.lobo[data-estado="comemora"] .lb-braco-e{animation:lb-viva-e .42s ease-in-out infinite alternate}
.lobo[data-estado="comemora"] .lb-braco-d{animation:lb-viva-d .42s ease-in-out infinite alternate}
.lobo[data-estado="comemora"] .lb-cauda{animation-duration:.3s}
.lobo[data-estado="comemora"] .lb-boca-sorri{display:none}
.lobo[data-estado="comemora"] .lb-boca-aberta{display:inline}
@keyframes lb-pula{from{transform:translateY(0) scaleY(.96)}to{transform:translateY(-16px) scaleY(1.02)}}
@keyframes lb-sombra{from{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:.5}}
@keyframes lb-viva-e{from{transform:rotate(120deg)}to{transform:rotate(150deg)}}
@keyframes lb-viva-d{from{transform:rotate(-120deg)}to{transform:rotate(-150deg)}}

/* preocupado: sobrancelhas, orelhas baixas, gota de suor */
.lobo[data-estado="preocupado"] .lb-sob-e{transform:rotate(-16deg) translateY(-2px)}
.lobo[data-estado="preocupado"] .lb-sob-d{transform:rotate(16deg) translateY(-2px)}
.lobo[data-estado="preocupado"] .lb-orelha-e{animation:none;transform:rotate(-16deg)}
.lobo[data-estado="preocupado"] .lb-orelha-d{transform:rotate(16deg)}
.lobo[data-estado="preocupado"] .lb-boca-sorri{display:none}
.lobo[data-estado="preocupado"] .lb-boca-tensa{display:inline}
.lobo[data-estado="preocupado"] .lb-gota{display:inline;animation:lb-gota 1.8s ease-in infinite}
.lobo[data-estado="preocupado"] .lb-cauda{animation-duration:2.6s}
@keyframes lb-gota{0%{transform:translateY(-4px);opacity:0}20%{opacity:1}100%{transform:translateY(14px);opacity:0}}

/* dorme: olhos fechados, cabeça caída, zzz */
.lobo[data-estado="dorme"] .lb-olhos{display:none}
.lobo[data-estado="dorme"] .lb-fechados{display:inline}
.lobo[data-estado="dorme"] .lb-cabeca{animation:lb-cochila 4s ease-in-out infinite}
.lobo[data-estado="dorme"] .lb-cauda{animation:none;transform:rotate(-8deg)}
.lobo[data-estado="dorme"] .lb-zzz{display:inline}
.lobo[data-estado="dorme"] .lb-zzz text{animation:lb-zzz 3s ease-in-out infinite;opacity:0}
.lobo[data-estado="dorme"] .lb-zzz text:nth-child(2){animation-delay:1s}
.lobo[data-estado="dorme"] .lb-zzz text:nth-child(3){animation-delay:2s}
@keyframes lb-cochila{0%,100%{transform:rotate(7deg) translateY(2px)}50%{transform:rotate(9deg) translateY(3.5px)}}
@keyframes lb-zzz{0%{opacity:0;transform:translate(0,6px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-8px) scale(1.1)}}

/* uiva: cabeça para cima, boca aberta, ondas de som */
.lobo[data-estado="uiva"] .lb-cabeca{animation:lb-uivo .9s ease-out forwards}
.lobo[data-estado="uiva"] .lb-olhos{display:none}
.lobo[data-estado="uiva"] .lb-fechados{display:inline}
.lobo[data-estado="uiva"] .lb-boca-sorri{display:none}
.lobo[data-estado="uiva"] .lb-boca-aberta{display:inline}
.lobo[data-estado="uiva"] .lb-ondas{display:inline}
.lobo[data-estado="uiva"] .lb-ondas path{animation:lb-onda 1.1s ease-out infinite;opacity:0}
.lobo[data-estado="uiva"] .lb-ondas path:nth-child(2){animation-delay:.2s}
.lobo[data-estado="uiva"] .lb-ondas path:nth-child(3){animation-delay:.4s}
.lobo[data-estado="uiva"] .lb-orelha-e{animation:none;transform:rotate(14deg)}
.lobo[data-estado="uiva"] .lb-orelha-d{transform:rotate(-14deg)}
@keyframes lb-uivo{to{transform:rotate(-16deg) translate(-3px,-4px)}}
@keyframes lb-onda{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.15) translate(-4px,-4px)}}

/* aceno, nega e trabalha */
.lobo[data-estado="aceno"] .lb-braco-d{animation:lb-aceno .32s ease-in-out infinite alternate}
.lobo[data-estado="aceno"] .lb-cabeca{animation:none;transform:rotate(-5deg)}
@keyframes lb-aceno{from{transform:rotate(-95deg)}to{transform:rotate(-130deg)}}
.lobo[data-estado="nega"] .lb-cabeca{animation:lb-nega .18s ease-in-out 6 alternate}
.lobo[data-estado="nega"] .lb-boca-sorri{display:none}
.lobo[data-estado="nega"] .lb-boca-tensa{display:inline}
.lobo[data-estado="nega"] .lb-sob-e{transform:rotate(-12deg)}
.lobo[data-estado="nega"] .lb-sob-d{transform:rotate(12deg)}
@keyframes lb-nega{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.lobo[data-estado="trabalha"] .lb-cabeca{animation:lb-foco 1.4s ease-in-out infinite}
.lobo[data-estado="trabalha"] .lb-braco-e{animation:lb-digita .22s ease-in-out infinite alternate}
.lobo[data-estado="trabalha"] .lb-braco-d{animation:lb-digita .22s ease-in-out .11s infinite alternate}
@keyframes lb-foco{0%,100%{transform:rotate(3deg) translateY(2px)}50%{transform:rotate(3deg) translateY(3.5px)}}
@keyframes lb-digita{from{transform:rotate(0)}to{transform:rotate(14deg)}}

/* balão de fala */
.lobo-fala{position:absolute;right:62%;bottom:78%;width:max-content;max-width:min(240px,60vw);background:var(--surface,#141412);color:var(--ink,#F7F3E3);
  border:1.5px solid var(--yellow,#FFD400);border-radius:16px 16px 4px 16px;padding:8px 12px;font:600 13px/1.35 var(--font-body,system-ui);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);z-index:3;pointer-events:none}
.lobo-fala.in{animation:lb-fala .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes lb-fala{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}

/* moedas que saltam do lobo */
.lobo-moeda{position:absolute;left:50%;top:45%;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,#FFD400 55%,#B88A00);border:1.5px solid #8a6700;
  font:400 10px/13px var(--font-display,Impact);color:#0B3B1C;text-align:center}
.lobo-moeda.verde{background:#22C55E;border-color:#0B3B1C;border-radius:3px;width:20px;height:13px;line-height:11px}

/* Dia fechado no verde */
.dia-verde{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(8,8,6,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;animation:dv-entra .35s ease both;overflow:hidden}
.dia-verde.sai{animation:dv-sai .4s ease forwards}
.dv-txt{position:relative;text-align:center;z-index:1}
.dv-k{margin:0 0 8px;font:600 12px var(--font-mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#FFD400}
.dia-verde h2{margin:0;font:400 clamp(48px,11vw,132px)/.95 var(--font-display,Impact);letter-spacing:.01em;text-transform:uppercase;color:#F7F3E3}
.dv-w{display:inline-block;animation:dv-palavra .7s cubic-bezier(.2,1.4,.4,1) both}
.dv-w.v{color:#4ADE80;text-shadow:0 0 40px rgba(74,222,128,.55)}
.dv-sub{margin:14px 0 0;font:500 17px var(--font-body,system-ui);color:#A9A38D}
.dv-dica{display:block;margin-top:22px;font:500 11px var(--font-mono,monospace);color:#6f6a57}
.dv-chuva i{position:absolute;top:-30px;width:18px;height:18px;border-radius:50%;font:800 11px/15px system-ui;text-align:center;color:#7A5B00;font-style:normal;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,#FFD400 55%,#B88A00);border:1.5px solid #8a6700;animation:dv-cai 2.4s linear both}
.dv-chuva i.g{background:#22C55E;border-color:#0B3B1C;border-radius:3px;width:24px;height:15px;color:#0B3B1C}
@keyframes dv-entra{from{opacity:0}}
@keyframes dv-sai{to{opacity:0}}
@keyframes dv-palavra{from{opacity:0;transform:translateY(.5em) rotate(6deg) scale(.8);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes dv-cai{to{transform:translateY(112vh) rotate(540deg)}}

@media (prefers-reduced-motion:reduce){
  .lobo *,.lobo-fala.in,.dia-verde,.dv-w,.dv-chuva i{animation:none!important}
}

/* fala "conversando": digitando…, texto acessível e balão clicável quando é notícia */
.lobo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lobo-dig{display:inline-flex;gap:4px;padding:4px 2px}
.lobo-dig i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:lb-dig 1s ease-in-out infinite}
.lobo-dig i:nth-child(2){animation-delay:.15s}.lobo-dig i:nth-child(3){animation-delay:.3s}
@keyframes lb-dig{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.lobo-fala.link{pointer-events:auto;cursor:pointer}
.lobo-fala.link a{color:inherit;text-decoration:none}
.lobo-fala.link a::after{content:" ↗";color:var(--cyan,#FFD400);font-weight:700}
.lobo-fala.link:hover{border-color:var(--cyan,#FFD400)}

/* ---------- Lobo de Wall Street (agenda com login): camadas de imagem animadas ---------- */
.lobo.jordan{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}
.lobo.jordan .jd-pulo,.lobo.jordan .jd-gira{position:absolute;inset:0;transform-origin:50% 100%}
.lobo.jordan img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.lobo.jordan .jd-cabeca{transform-origin:50% 27.75%}
.lobo.jordan .jd-sombra{position:absolute;left:12%;right:12%;bottom:-3px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));transform-origin:center}
/* brilho correndo na nota de dólar */
.lobo.jordan .jd-nota{position:absolute;left:30.7%;top:30.4%;width:36.8%;height:10.2%;transform:rotate(-4deg);overflow:hidden;border-radius:2px;pointer-events:none}
.lobo.jordan .jd-nota i{position:absolute;top:-20%;bottom:-20%;width:35%;left:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));mix-blend-mode:screen;transform:translateX(-140%);animation:jd-brilho 5.5s ease-in-out infinite}
@keyframes jd-brilho{0%,62%{transform:translateX(-140%)}80%,100%{transform:translateX(320%)}}
/* acessórios de estado */
.lobo.jordan .jd-gota{position:absolute;left:66%;top:7%;width:7px;height:10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7CC4FF;border:1px solid #2E6FA8;display:none}
.lobo.jordan .jd-zzz{position:absolute;right:-14px;top:-6px;display:none;font:400 15px "Anton",Impact,sans-serif;color:#FFF3B0}
.lobo.jordan .jd-zzz i{font-style:normal;position:absolute;opacity:0;animation:jd-zzz 2.4s ease-out infinite}
.lobo.jordan .jd-zzz i:nth-child(1){right:14px;top:24px}.lobo.jordan .jd-zzz i:nth-child(2){right:6px;top:12px;animation-delay:.8s}.lobo.jordan .jd-zzz i:nth-child(3){right:-4px;top:0;font-size:19px;animation-delay:1.6s}
@keyframes jd-zzz{0%{opacity:0;transform:translate(0,6px) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translate(8px,-14px) scale(1.1)}}
.lobo.jordan .jd-ondas{position:absolute;left:-26%;top:2%;width:40%;height:24%;display:none}
.lobo.jordan .jd-ondas i{position:absolute;inset:0;border:3px solid #FFD400;border-color:transparent transparent transparent #FFD400;border-radius:50%;opacity:0;animation:jd-onda 1s ease-out infinite}
.lobo.jordan .jd-ondas i:nth-child(2){animation-delay:.25s}.lobo.jordan .jd-ondas i:nth-child(3){animation-delay:.5s}
@keyframes jd-onda{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}

/* parado: respira e mexe a cabeça devagar, como quem está de olho no mercado */
.lobo.jordan .jd-gira{animation:jd-respira 3.6s ease-in-out infinite}
.lobo.jordan .jd-cabeca{animation:jd-cabeca 5.2s ease-in-out infinite}
.lobo.jordan:hover .jd-cabeca{animation-duration:1.6s}
@keyframes jd-respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.014)}}
@keyframes jd-cabeca{0%,100%{transform:rotate(-2.2deg)}25%{transform:rotate(1deg) translateY(-.6%)}50%{transform:rotate(2.4deg)}75%{transform:rotate(.4deg) translateY(.4%)}}

/* comemora: pula, cabeça balançando, sombra encolhe */
.lobo.jordan[data-estado="comemora"] .jd-pulo{animation:jd-pula .42s cubic-bezier(.3,.7,.4,1) infinite alternate}
.lobo.jordan[data-estado="comemora"] .jd-cabeca{animation:jd-vibra .42s ease-in-out infinite alternate}
.lobo.jordan[data-estado="comemora"] .jd-sombra{animation:lb-sombra .42s cubic-bezier(.3,.7,.4,1) infinite alternate}
@keyframes jd-pula{from{transform:translateY(0) scaleY(.97)}to{transform:translateY(-14px) scaleY(1.02)}}
@keyframes jd-vibra{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* preocupado: cabeça de lado, tremidinha e gota de suor */
.lobo.jordan[data-estado="preocupado"] .jd-cabeca{animation:none;transform:rotate(-7deg)}
.lobo.jordan[data-estado="preocupado"] .jd-gira{animation:jd-treme .22s linear infinite}
.lobo.jordan[data-estado="preocupado"] .jd-gota{display:block;animation:jd-gota 1.4s ease-in infinite}
@keyframes jd-treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
@keyframes jd-gota{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* dorme: cochila, cabeça caindo, luz mais baixa e Zzz */
.lobo.jordan[data-estado="dorme"] .jd-cabeca{animation:jd-cochila 4.2s ease-in-out infinite}
.lobo.jordan[data-estado="dorme"] .jd-gira{animation:jd-respira 4.2s ease-in-out infinite;filter:brightness(.82) saturate(.85)}
.lobo.jordan[data-estado="dorme"] .jd-zzz{display:block}
.lobo.jordan[data-estado="dorme"] .jd-nota i{animation:none}
@keyframes jd-cochila{0%,100%{transform:rotate(7deg) translateY(1%)}45%{transform:rotate(10deg) translateY(2%)}55%{transform:rotate(2deg) translateY(-.5%)}}

/* uiva (aviso, alarme, demanda nova): levanta a cabeça e solta ondas */
.lobo.jordan[data-estado="uiva"] .jd-cabeca{animation:jd-anuncia .5s ease-in-out infinite alternate}
.lobo.jordan[data-estado="uiva"] .jd-pulo{animation:jd-pula .5s ease-in-out infinite alternate}
.lobo.jordan[data-estado="uiva"] .jd-ondas{display:block}
@keyframes jd-anuncia{from{transform:rotate(-4deg) translateY(-1%)}to{transform:rotate(-10deg) translateY(-2%)}}

/* aceno, nega e trabalha */
.lobo.jordan[data-estado="aceno"] .jd-gira{animation:jd-balanca .45s ease-in-out infinite alternate}
@keyframes jd-balanca{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.lobo.jordan[data-estado="nega"] .jd-cabeca{animation:jd-nega .32s ease-in-out infinite alternate}
@keyframes jd-nega{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.lobo.jordan[data-estado="trabalha"] .jd-gira{animation:jd-respira 1.4s ease-in-out infinite}
.lobo.jordan[data-estado="trabalha"] .jd-cabeca{animation:jd-cabeca 2.2s ease-in-out infinite}

/* notas de dólar no lugar das moedas */
.lobo-moeda.nota{width:26px;height:13px;border-radius:2px;background:linear-gradient(180deg,#A7D8B4,#7DBB90);border:1px solid #1F5130;color:#1F5130;
  font:800 9px/11px var(--font-body,Montserrat,sans-serif);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}

@media (prefers-reduced-motion:reduce){.lobo.jordan *{animation:none!important}}